/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
//  Das Dokument "style.css" bindet alle cssDateien ein und beinhaltet das Farbverzeichnis der Website.
//  
//      Inhalt:
//          - CSS-Importe
//          - Font-Importe
//          - Browser-Settings-Reset
//          - Primary Fontsetting
//          - Globale Einstellungen
//          - Overlay
//          - Registrations Formular
//          - Media-Querrys
//          - Special_Settings for Firefox
//          - Special_Settings for InternetExplorer
//
//      Farbverzeichnis:
//  
//  INFO: 
//
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//  CSS-Importe
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@import url('css/header.css');
@import url('css/index.css');
@import url('css/footer.css');
@import url('css/suche.css');
@import url('css/setcard.css');
@import url('css/video.css');
@import url('css/animated.css');

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//  Font-Importe
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@media screen
{
    /*title*/
    @font-face
    {
        font-family: 'oswald';
        font-weight: normal;
        font-style: normal;

        src: url('fonts/oswald.eot');
        src: url('fonts/oswald.eot?#iefix') format('embedded-opentype'),
        url('fonts/oswald.woff2') format('woff2'),
        url('fonts/oswald.woff') format('woff'),
        url('fonts/oswald.ttf') format('truetype'),
        url('fonts/oswald.svg#oswald') format('svg');
    }

    /*subtitle*/
    @font-face
    {
        font-family: 'montserrat';
        font-weight: normal;
        font-style: normal;

        src: url('fonts/montserrat.eot');
        src: url('fonts/montserrat.eot?#iefix') format('embedded-opentype'),
        url('fonts/montserrat.woff2') format('woff2'),
        url('fonts/montserrat.woff') format('woff'),
        url('fonts/montserrat.ttf') format('truetype'),
        url('fonts/montserrat.svg#montserrat') format('svg');
    }

    /*text*/
    @font-face
    {
        font-family: 'cooperhewitt';
        font-weight: normal;
        font-style: normal;

        src: url('fonts/cooperhewitt.eot');
        src: url('fonts/cooperhewitt.eot?#iefix') format('embedded-opentype'),
        url('fonts/cooperhewitt.woff2') format('woff2'),
        url('fonts/cooperhewitt.woff') format('woff'),
        url('fonts/cooperhewitt.ttf') format('truetype'),
        url('fonts/cooperhewitt.svg#cooperhewitt') format('svg');
    }
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//  Browser-Settings-Reset
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

html
{
    -webkit-font-smoothing: subpixel-antialiased;
}

*
{
    font-family: inherit;
    font-size: 1em;
    font-weight: inherit;
    font-style: inherit;
    line-height: 1em;

    margin: 0;
    padding: 0;

    list-style: none;

    border: 0;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
    outline: 0;
    background-repeat: no-repeat;

    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//  #anker & Overlay
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

#anker
{
    /* setzen JumpTo_points für verlinkungen. Aufgrund des fixed gesetzten Headers. müssen diese Negativ gesetzt werden */
    position: absolute;
    bottom: 60px;
    left: 0;
}

#overlay,
#overlaysms,
#overlayvid,
#overlaycam,
#overlaypic
{
    position: fixed;
    z-index: 999;
    top: -webkit-calc(5% + 60px);
    top: -moz-calc(5% + 60px);
    top: calc(5% + 60px);
    left: 5%;

    display: none;

    width: -webkit-calc(90% - 48px);

    width: -moz-calc(90% - 48px);

    width: calc(90% - 48px);
    height: -webkit-calc(90% - 108px);
    height: -moz-calc(90% - 108px);
    height: calc(90% - 108px);

    border: 24px solid rgba(44,62,80,.95);
}


#overlay .txtBox,
#overlaysms .txtBox,
#overlayvid .txtBox,
#overlaycam .txtBox,
#overlaypic .txtBox
{
    z-index: 1;

    display: none;
}

.govideo,
.goprofile,
.goevent,
.goimg,
.gocam,
.gosms
{
    background-position: 100% 0;
    -moz-background-size: auto 100%;
      -o-background-size: auto 100%;
         background-size: auto 100%;
}

.gosms
{
    background-image: url(img/overlay/sms.jpg);
}

.gocam
{
    background-image: url(img/overlay/cam.jpg);
}

.goimg
{
    background-image: url(img/overlay/img.jpg);
}

.govideo
{
    background-image: url(img/overlay/video.jpg);
}

.goprofile
{
    background-image: url(img/overlay/date.jpg);
}

.goevent
{
    background-image: url(img/overlay/event.jpg);
}

.exit
{
    position: absolute;
    z-index: 999;
    top: -24px;
    right: -24px;

    height: 24px;
    padding: 12px;

    -webkit-transition: .25s ease-in-out;

    -o-transition: .25s ease-in-out;

    -moz-transition: .25s ease-in-out;

    transition: .25s ease-in-out;

    background-color: rgba(244,55,55,.95);
}

.exit:hover,
.exit:active
{
    cursor: pointer;
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//  Primary Fontsetting
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

body
{
    overflow-x: hidden;

    max-width: 1600px;
    margin: 0 auto;
}

h1,
h2,
h3
{
    text-align: left;
}

h1
{
    font-family: 'oswald', Arial, Helvetica, sans-serif;
    font-size: 2.5em;
    line-height: 1.25em;

    max-width: 800px;

    text-transform: uppercase;

    color: #2c3e50;
}

h2
{
    font-family: 'oswald', Arial, Helvetica, sans-serif;
    font-size: 2em;
    line-height: 1.25em;

    margin-bottom: 12px;

    text-transform: uppercase;

    color: #fff;
}

h3
{
    font-family: 'montserrat';
    font-size: 1.5em;

    color: #2c3e50;
}

a
{
    -webkit-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    text-decoration: none;

    color: #9a9557;
}

a:hover,
a:active
{
    cursor: pointer;

    color: #9a9557;
}

p
{
    line-height: 1.25em;

    color: #2c3e50;
}

p,
a,
.reg-input,
.label,
.input,
label,
input,
.error,
li,
textarea,
.btn,
.agbtxt,
button
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}

.rounded
{
    position: relative;

    display: block;

    width: 200px;
    height: 200px;
    margin: 48px auto;

    cursor: pointer;
    text-align: center;

    color: #9a9557;
    border: 1px solid #9a9557;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    background-color: #fff;
}

.rounded:hover,
.rounded:active
{
    margin: 46px auto;

    border: 2px solid #9a9557;
}

.rounded p
{
    position: relative;
    top: -webkit-calc(100px - .5em);
    top: -moz-calc(100px - .5em);
    top: calc(100px - .5em);

    color: #9a9557;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//  Registrations
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

#getem,
#gogetem
{
    position: relative;

    padding: 55px 0 0 0;
}

.formBox
{
    max-width: 480px;
    height: auto;
    padding: 12px;

    background-color: rgba(255, 255, 255, .9);
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Media-Querrys
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@media screen and (min-width: 520px)
{
    #getem,
    #gogetem
    {
        margin-bottom: 24px;
    }

    #getem .formBox,
    #gogetem .formBox
    {
        position: absolute;
        z-index: 9;
        top: 84px;
        left: 24px;

        padding: 24px;
    }
}

@media screen and (min-width: 600px)
{
    #overlay .txtBox,
    #overlaysms .txtBox,
    #overlayvid .txtBox,
    #overlaycam .txtBox,
    #overlaypic .txtBox
    {
        position: absolute;
        right: 0;
        bottom: 82px;

        display: inline-block;

        width: auto;
        height: auto;
    }

    #overlay .txtBox p,
    #overlaysms .txtBox p,
    #overlayvid .txtBox p,
    #overlaycam .txtBox p,
    #overlaypic .txtBox p
    {
        font-family: 'oswald', Arial, Helvetica, sans-serif;
        font-size: 2.5em;

        text-align: right;
        text-transform: uppercase;

        color: #01a2fd;
    }

    #overlay .txtBox span,
    #overlaysms .txtBox span,
    #overlayvid .txtBox span,
    #overlaycam .txtBox span,
    #overlaypic .txtBox span
    {
        line-height: 1.75em;

        padding: 2px 24px;

        background-color: rgba(44,62,80,.95);
    }
}

@media screen and (min-width: 720px)
{
    .argue.box
    {
        display: inline-block;

        width: -webkit-calc(50% - 26px);

        width: -moz-calc(50% - 26px);

        width: calc(50% - 26px);

        vertical-align: top;
    }

    .argue.box.media,
    .argue.box.secure
    {
        margin-left: 48px;
    }

    #getem,
    #gogetem
    {
        padding-top: 60px;
    }
}

@media screen and (min-width: 1600px)
{
    #overlay .txtBox p
    {
        font-size: 3em;
    }

    #overlay .txtBox p span
    {
        line-height: 1.65em;
    }
}

@media screen and (min-width: 1665px)
{
    .govideo,
    .goprofile,
    .goevent,
    .goimg,
    .gocam,
    .gosms
    {
        -moz-background-size: 100% auto;
          -o-background-size: 100% auto;
             background-size: 100% auto;
    }
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//  FireFox-Extrawurst
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@-moz-document url-prefix()
{
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//  Internetexplorer-Extrawurst
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@media screen\0
{
}