@font-face {
font-family: 'Helvetica';
src: url('../../fonts/helvetica/Helvetica.eot');
src: url('../../fonts/helvetica/Helvetica.woff') format('woff'), url('../../fonts/helvetica/Helvetica.ttf') format('truetype'), url('../../fonts/helvetica/Helvetica.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Gotham';
src: url('../../fonts/gotham/GothamBold.eot');
src: url('../../fonts/gotham/GothamBold.woff') format('woff'), url('../../fonts/gotham/GothamBold.ttf') format('truetype'), url('../../fonts/gotham/GothamBold.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/** general rules
* ----------------------------------------------------------------------*/
*{-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
html, body{width:100%; height:100%; font-size:100%; color:#ffffff; background-color: #000000;font-family: 'Helvetica', sans-serif;}
img{max-width: 100%; height: auto;}
a{text-decoration: none; color:#ffffff;}
a:hover{color:#BB1B00;}
/** general classes
* ----------------------------------------------------------------------*/
.clear{clear:both;}
.link-spacer{display: block; float:left; margin:0 4px;}
.legal-link-spacer{display: inline-block; margin:0 4px;}
/** preloader
* ----------------------------------------------------------------------*/
#preloader {position: absolute; width: 240px; height: 140px; top: 50%; left: 50%; margin-left: -120px; margin-top: -70px;}
/** main divs
* ----------------------------------------------------------------------*/
#wrapper{position:absolute; min-width:320px; width:100%; height:100%; position:relative; background-color: #333333;display:none; overflow: hidden; z-index: 1000;}
#background{position:relative; width:100%; height:100%; background:url(../images/background.jpg) no-repeat center center; background-size: cover;}
#background img{width:100%; height:100%;}
#footer{position: absolute; width:100%; height:60px; left:0px; bottom:0px; text-align: center;}
#date-text{position:absolute; width:auto; height:36px; left:0; top:26%; right:0px; margin:auto; font-weight:bold; text-align: center; letter-spacing:5px; color:#CCCCCC;font-family: 'Gotham'; }
#buttons-trailer{position:absolute; auto; height:36px; left:0; bottom:60px; right:0px; margin:auto; font-weight:bold; line-height:36px; text-align: center;}
.no-touch #buttons-trailer:hover{color:#928D7C;}
/** footer
* ----------------------------------------------------------------------*/
/*left*/
#footer-left{position: absolute; left:50px; bottom:10px;}
#social{position:relative; height:30px; line-height: 30px;}
#social ul{list-style: none; padding:0px; margin:0px; margin:0 auto; float:left; width:90px; height:30px;}
#social ul li{width:30px; height:30px; float:left; margin-right: 0px; margin-left: 0px; position: relative;}
#social ul li a{display:block; width:100%; height:100%; margin:0; padding:0; line-height: 0; padding:1px;}
.no-touch #social ul li a:hover{border:2px solid #BB1B00;padding:0;}
#hashtag{float:left; width:auto; margin-left:10px; letter-spacing:4px;}
#links ul{list-style: none; padding:0px; margin:0px; font-size: 8px; margin-top:10px;}
#links ul li{float:left; position: relative;}
#links ul li a{display: block; width:100%; height:100%; margin:0; padding:0;}
/*center*/
#legal{position: absolute; left:0; right:0; bottom:24px; margin: auto; width:380px;}
#legal #text3d{width:380px; height:26px; display:block; margin:0 auto;}
#legal-button{display: none; position: absolute; left:0; right:0; bottom:10px; margin:auto; font-weight: bold; font-size: 14px; width:100px;}
/*right*/
#footer-right{position: absolute; right:50px; bottom:10px; text-align: right;}
#rating{position: relative;}
#copyright{font-size: 8px; margin-top:10px; pointer-events:none;}
/*credits block*/
#credits-block{position: absolute; width:100%; height:200px; left:0; bottom:-300px; text-align: center; background:url(../images/black_tile_90.png) repeat;}
#credits-block-image{width:100%; max-width: 758px; position: absolute; left:0; right:0; top:0; line-height: 200px; margin:auto;}
#credits-block-close{position: absolute; right:10px; top:10px;font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: bold; color:#BB1B00;}
.no-touch #credits-block-close:hover{color:#928D7C;}
/*legal block*/
#legal-block{position: absolute; width:100%; height:240px; left:0; bottom:-300px; text-align: center; background:url(../images/black_tile_90.png) repeat;}
#legal-block-close{position: absolute; right:10px; top:10px;font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: bold; color:#BB1B00;}
.no-touch #legal-block-close:hover{color:#928D7C;}
#legal-block img{max-width: 90%;}
#legal-block-rating{margin-top:10px;}
#legal-block-3d{margin-top:5px;}
#legal-block-copyright{font-size: 9px; padding: 0 10px; padding-bottom: 10px; pointer-events:none;}
#legal-block-links{padding: 0 10px; display:inline-block;}
#legal-block-links ul{list-style: none; padding:0px; margin:0px; font-size: 9px;}
#legal-block-links ul li{display: inline-block; position: relative;}
#legal-block-links ul li a{display: block; width:100%; height:100%; margin:0; padding:0;}
.legal-block-link-group{display:inline-block;}
#mobile-break{display:inline-block;}
/** overlay
* ----------------------------------------------------------------------*/
#overlay{display:none; position: absolute; width:100%; height:100%; left:0; top:0; background-color:#000000; z-index: 2000;}
#overlay-close{position: absolute; right:10px; top:10px; font-weight: bold;}
#youtube-container{position:absolute; width:100%; height:100%; overflow:hidden;}
#youtube-container iframe,
#youtube-container object,
#youtube-container embed {position: absolute; border:none; top: 0; left: 0; width: 100%; height: 100%;}
/** desktop / mobile
* ----------------------------------------------------------------------*/
.desktop #wrapper{min-height:640px; min-width: 1020px;}
.mobile #wrapper{min-height: 580px; min-width: 320px;}
@media only screen and (orientation: portrait){
.mobile #wrapper{min-height: 100%;}
}
@media only screen and (orientation: landscape){
.mobile #wrapper{min-height: 580px;}
}
/** breakpoints
* ----------------------------------------------------------------------*/
#breakpoints{display:fixed; left:0; top:0; width:0; height:0; visibility: hidden;}
@media only screen and (min-device-width: 300px){
#breakpoints:after {content: "300";}
#footer{height:70px;}
#buttons-trailer{bottom:70px;}
#links{display:none;}
#copyright{display:none;}
#legal{display: none;}
#legal-button{display:block; bottom:10px; width:100px;}
#footer-right{display:none;}
#footer-left{left:0px; right:0px; margin:auto; bottom:36px;}
#social{display:inline-block;}
#legal-block{height:200px;}
#mobile-break{display: none;}
}
@media only screen and (min-device-width: 460px){
#breakpoints:after {content: "460";}
#footer{height:96px;}
#footer-left{left:10px; bottom:10px;}
#footer-right{right:10px;display: block;}
#legal{bottom:66px; display:block;}
#legal-button{bottom:36px;}
#buttons-trailer{bottom:96px;}
#social{display:block;}
#legal-block{height: 220px;}
#mobile-break{display: inline-block;}
}
@media only screen and (min-device-width: 768px){
#breakpoints:after {content: "768";}
#legal-button{bottom:10px;}
#legal-block{height: 240px;}
}
@media only screen and (min-device-width: 1024px){
#breakpoints:after {content: "1024";}
#legal-button{display:none;}
#links{display:block;}
#copyright{display:block;}
#footer-left{left:50px;}
#footer-right{right:50px;}
}
@media only screen and (min-width: 1440px){
#breakpoints:after {content: "1440";}
#footer{height: 60px;}
#legal{bottom:6px;}
#buttons-trailer{bottom:60px;}
}