@charset "UTF-8";

/* CSS Document */

/*Browser Reset*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline:none;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}

/*body {line-height: 1;}*/

ol, ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}

table {border-collapse: collapse; border-spacing: 0;}


/*Video*/

#exitbar {position:fixed; top:5%; left:95%; display:none; z-index:10000;}
#exitbar a{float:right; color:#fff; text-decoration:none; z-index:10000;}
#controls {display:none;}
body:hover #exitbar {display:block!important;}
body:hover #controls {display:block!important;}
.loader {position:absolute; margin:0 0 0 0; width:3%; z-index:-1; top:42%; left:48%;}


/*Layout*/

html {background-color:#000; height: 100%;}
html.boulevard { background: #000 url(../images/layout/emotions_boulevard_bg.jpg) center top no-repeat; background-size: 100%;}
@media (max-width: 1600px) {
html.boulevard { background: #000 url(../images/layout/emotions_boulevard_bg.jpg) left top no-repeat; background-size: inherit;}
}
@media (max-width: 800px) {
html.boulevard { background: #000 url(../images/layout/emotions_boulevard_bg.jpg) left top no-repeat; background-size:  100%;}
}
body { font-family: Impact, 'Anton', sans-serif; color:#fff; padding:38px; font-size:100%;}
#main {float:left; margin:0 auto; width:100%;}
hr {height: 1px; background: #fff; margin-top: 30px; border: 0;}

/*Header*/

header {float:left; margin:0; padding:0; width: 100%;}
header h1 {float:left; color:#999; font-size:38px; padding-bottom:5px;}


/*Logo*/
.logo {position:fixed; margin:0 auto;  z-index:100; top:32%; left:18%; width:60%;}
.logo-player {position:fixed;  z-index:100; top:3%; left:3%; width:15%;}
body:hover .logo {display:block!important;}
body:hover .logo-player {display:block!important;}
.enterwebsite {display: block; width: 100%; height: 100%;}
.enter { margin:0 8%; z-index:100; width:84%; height: auto;}
@media (max-width: 1600px) {
.enter { margin:0 9%; z-index:100; width:80%; height: auto;}
}

/*Navi*/
#navi .aktiv {text-decoration: underline;}
#navi {float: left; position: relative; top: -20px; z-index:100; width: 100%; height: 80px;}
#navi a {display: block; float: left; color: #fff; font-family: Impact, 'Anton', sans-serif; font-size: 14px; text-transform: uppercase; text-decoration: none; margin-right: 60px; letter-spacing: 1px; margin-top: 20px;}
#navi a.nav1 {position: absolute; top: -5px; z-index:101;  margin-top: 0px;}
#navi a.nav1 img {width:225px; height: auto;}
#navi a.nav2 {margin-left: 333px;}
#navi a.nav4 {padding-right: 12px; background: url(../images/layout/punkt1_news.png) right 0px no-repeat; background-size: 23%;}
#claim {display: none; clear: both; float: left; margin-left: 233px; margin-bottom: 10px; font-family: 'Oswald', sans-serif; font-weight: 200; font-size: 15px;}
@media (max-width: 1000px) {
#navi {width: 110%;}
#navi a {margin-top: 16px; margin-right: 44px;}
#navi a.nav1 img {width:210px; height: auto;}
#navi a.nav2 {margin-left: 240px;}
#claim {margin-left: 220px; font-size: 15px;}
}
@media (max-width: 768px) {
#navi {width: 120%; height: 100px;}
#navi a {margin-top: 75px; margin-right: 18px;}
#navi a.nav1 { margin-top: 0px; margin-right: 0px;}
#navi a.nav1 img {width:180px; height: auto;}
#navi a.nav2 {margin-left: 0px;}
}
@media (max-width: 420px) {
#navi a {margin-top: 75px; margin-right: 8px;}
#navi a.nav1 { margin-top: 0px; margin-right: 0px;}
#navi a.nav1 img {width:180px; height: auto;}
#navi a.nav2 {margin-left: 0px;}
#navi a.nav4 {}
}
@media (max-width: 360px) {
#navi a {}
#navi a.nav4 {clear: both; margin-top: 0px;}
}

/*Main*/

#clips {clear: both; float:left; width:100%;}
#clips a{float:left; width:25%; text-decoration:none; color:#fff; outline-width:0;}
#clips .show {float:left; width:100%; z-index:0;}
#clips .hide {position:absolute; width:25%; display:none;}
#clips a:hover .hide {display:block!important;}
#clips img {float:left; z-index:0; width:100%;}
#clips video {float:left; z-index:0; width:100%;}
#clips .load {width: 40px; height:40px; padding:28.5% 45% 29% 45%; border: 0;}

/*Footer*/

footer a.aktiv {text-decoration: underline;}
footer {clear: both; float:left; padding:25px 0 20px 0;}
footer a {float:left; display: block; height: 33px; color:#fff; font-size:14px; text-decoration:none; margin:0px 20px 0 0; text-transform: uppercase;}
footer a:nth-child(1) {margin-top: 5px; letter-spacing: 1px;}
footer a:nth-child(6) {margin-top: 8px;}
@media (max-width: 400px) {
footer a:nth-child(2) {clear: both;}
footer a {margin-right: 18px;}
}



/*Büro*/

#buero {font-size:65px; position:absolute; top:0; left:0; z-index:9000;}
#buero h1 {margin:0; padding:0 0 6px 0; line-height:57px;}

/*Evelyne Wenzel*/

#evelyne {float:left; max-width:620px; z-index:9000; font-family: 'Oswald', sans-serif; font-weight: 200; font-size: 15px; line-height:20px;}
#evelyne h1 {float:left; width: 100%; font-weight: 500; margin:0 0 10px 0; letter-spacing: 1px;}
#evelyne h1.ausklapper {margin: 40px 0 10px 0;}
#evelyne a.zuklappen {display: block; border-bottom: 1px solid #fff; padding: 20px 0;}
#evelyne a.beige, .beige { color: #cec1a5;}
#evelyne p {clear:both; margin-bottom: 10px;}
#evelyne h2 {float: left; font-weight: 200; font-size: 15px; margin: 10px 0 10px 0;}
#evelyne a {color: #fff;}
#evelyne a.ausklappen {float: left; margin: 10px 0 10px 15px;}
#biografie {float: right; width: 50%; margin-bottom: 30px; position: relative; margin-top: -120px;}
#biografie p {float: left; margin-left: 20%; margin-top: -25px; font-family: 'Oswald', sans-serif; font-weight: 200; font-size: 12px; line-height:20px;}
#biografie img {width: 100%; float: right; margin: 0; padding: 0;}
#expertise {float: right; width: 30%; margin-bottom: 30px;}
#expertise img {display: block; width: 100%; float: right; margin: 0; padding: 0;}
@media (max-width: 1350px) {
#biografie {width: 40%; margin-top: 0;}
}
@media (max-width: 1124px) {
#biografie {width: 100%; margin-top: 0;}
#biografie img {float: left; width: 100%; margin: 0; padding: 0;}
#expertise {float: left; width: 100%;}
#expertise img {float: left; max-width: 600px; margin: 0; padding: 0;}
}
@media (max-width: 600px) {
#biografie {width: 100%; margin-top: 0;}
#biografie p {float: left; margin-left: 15%; margin-top: -25px;}
}

/*Making of*/

#makingof {float:left; max-width:400px; z-index:9000; font-family: 'Oswald', sans-serif; font-weight: 200; font-size: 15px; line-height:20px;}
#makingof h1 {float:left; font-weight: 500; margin:0 0 10px 0; letter-spacing: 1px;}
#makingof p {clear:both; margin-bottom: 20px;}
#dreh {float: right; width: 50%; margin-bottom: 30px;}
#dreh img {display: block; float: left; max-width: 50%; margin: 0; padding: 0;}
@media (max-width: 1028px) {
#dreh {width: 40%;}
}
@media (max-width: 800px) {
#dreh {float: left; width: 100%;}
}

/*News*/

#news {float:left; max-width:400px; z-index:9000; font-family: 'Oswald', sans-serif; font-weight: 200; font-size: 15px; line-height:20px;}
#news h1 {float:left; font-weight: 500; margin:0 0 10px 0; letter-spacing: 1px;}
#news h2 {float:left; font-family: 'Oswald', sans-serif; font-weight: 200; font-size: 13px; line-height:20px; margin:0 0 10px 0;}
#news p {clear:both; margin-bottom: 20px;}
#news a {color: #fff;}
#galerie {float: right; width: 66%; margin-bottom: 30px;}
#galerie img {display: block; float: left; max-width: 33%; margin: 0; padding: 0;}
@media (max-width: 1300px) {
#galerie {width: 50%;}
}
@media (max-width: 1000px) {
#galerie {width: 40%;}
#galerie img { max-width: 50%; width: 50%;}
}
@media (max-width: 800px) {
#galerie {float: left; width: 100%;}
}

/*Interview*/

#interview {position:absolute; top:0; left:0; z-index:9000; width:94%; float:left;}
#interview h1 {font-size:90px; line-height:90px;}
#interview p {font-size:90px; line-height:90px;}

/*Kontakt*/

#kontakt {float:left; max-width:400px; font-family: 'Oswald', sans-serif; font-weight: 200; font-size: 15px; line-height:20px; padding-right: 20px;}
#kontakt h1 {float:left; font-weight: 500; margin:0 0 10px 0; letter-spacing: 1px;}
#kontakt p {clear:both; margin-bottom: 20px;}


/*Impressum*/

#impressum {float:left; font-family: 'Oswald', sans-serif; font-weight: 200; font-size: 15px; line-height:20px;}
#impressum h1 {float:left; font-weight: 500; margin:0 0 10px 0; letter-spacing: 1px;}
#impressum p {clear:both; width:70%; }
#impressum a {clear:both; text-decoration:none; color:#ccc; line-height:10px;}

/*Background Video fullscreen*/

video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}


        /* jssor slider bullet navigator skin 05 css */
        /*
        .jssorb05 div           (normal)
        .jssorb05 div:hover     (normal mouseover)
        .jssorb05 .av           (active)
        .jssorb05 .av:hover     (active mouseover)
        .jssorb05 .dn           (mousedown)
        */
        .jssorb05 {
            position: absolute;
        }
        .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
            position: absolute;
            /* size of bullet elment */
            width: 16px;
            height: 16px;
            background: url('img/b05.png') no-repeat;
            overflow: hidden;
            cursor: pointer;
        }
        .jssorb05 div { background-position: -7px -7px; }
        .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
        .jssorb05 .av { background-position: -67px -7px; }
        .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

        /* jssor slider arrow navigator skin 12 css */
        /*
        .jssora12l                  (normal)
        .jssora12r                  (normal)
        .jssora12l:hover            (normal mouseover)
        .jssora12r:hover            (normal mouseover)
        .jssora12l.jssora12ldn      (mousedown)
        .jssora12r.jssora12rdn      (mousedown)
        */
        .jssora12l, .jssora12r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 30px;
            height: 46px;
            cursor: pointer;
            background: url('img/a12.png') no-repeat;
            overflow: hidden;
        }
        .jssora12l { background-position: -16px -37px; }
        .jssora12r { background-position: -75px -37px; }
        .jssora12l:hover { background-position: -136px -37px; }
        .jssora12r:hover { background-position: -195px -37px; }
        .jssora12l.jssora12ldn { background-position: -256px -37px; }
        .jssora12r.jssora12rdn { background-position: -315px -37px; }