/*! 
 * Scotch&Carlsen  
 *
 * @package   scotchcarlsen
 * @version   v0.1.0
 * @author    Christoph Sonntagt
 * @copyright 2013 32lines
 */


/* FONTS */
@font-face {
	font-family: 'Norwester Regular';
	src: url('fonts/norwester.eot');
	src: local('?'), url('fonts/norwester.woff') format('woff'), url('fonts/norwester.ttf') format('truetype'), url('fonts/norwester.svg') format('svg'), url('fonts/norwester.otf') format('otf');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: 'Conv_Cicle_Fina';
	src: url('fonts/Cicle_Fina.eot');
	src: local('?'), url('fonts/Cicle_Fina.woff') format('woff'), url('fonts/Cicle_Fina.ttf') format('truetype'), url('fonts/Cicle_Fina.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Conv_Cicle_Fina_Italic';
	src: url('fonts/Cicle_Fina_Italic.eot');
	src: local('?'), url('fonts/Cicle_Fina_Italic.woff') format('woff'), url('fonts/Cicle_Fina_Italic.ttf') format('truetype'), url('fonts/Cicle_Fina_Italic.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Uni_acc';
	src: url('fonts/Uni_acc.eot');
	src: local('?'), url('fonts/Uni_acc.woff') format('woff'), url('fonts/Uni_acc.ttf') format('truetype'), url('fonts/Uni_acc.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Uni_acc_Italic';
	src: url('fonts/Uni_acc_Italic.eot');
	src: local('?'), url('fonts/Uni_acc_Italic.woff') format('woff'), url('fonts/Uni_acc_Italic.ttf') format('truetype'), url('fonts/Uni_acc_Italic.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}


@font-face{
	font-family:'GothamSteve';
	font-style:normal;
	font-weight:700;
	src:url(../font/Gotham-Bold.eot);
	src:url(../font/Gotham-Bold.eot?#iefix) format('embedded-opentype'),url(../font/Gotham-Bold.woff) format('woff'),url(../font/Gotham-Bold.ttf) format('truetype'),url(../font/Gotham-Bold.svg#6a327a217ddd10461b1acdc4d224fee0) format('svg')
}




html {
   /*width: 100%;
   height: 100%;*/	
}

body{
	/*width:100%;
	height:100%;*/
	background:#fff;
	margin: 0;
	padding: 0;
	overflow: hidden;
    font-family: 'Conv_Cicle_Fina';
}

a {
  text-decoration: none;
  color: #333;
}

.left {float: left;}
.right {float: right;}
.hidden {display: none;}
#film_video {margin-top: 68px;}



#global {
  width: 100%;
  height: 100%;
  position: absolute;	
}


#slides{
	position:relative;
	height:400%;
}


.centered{
	position: absolute;
	height: 500px;
	width: 940px;
	top: 50%;
	left: 50%;
	margin-top: -250px;
	margin-left: -470px;
	z-Index: 20;
}

.slide{
	position:relative;
	width:100%;
	overflow: hidden;
	background-color:#fff;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	margin: 0;
	left: 0;
	top: 0;	
	background-position: center top;
}

#slide-1{
	color:#000;
	text-align:center;
	background-image:url(../img/slide-1.jpg)
}

#bg {
    position: relative;
    left: 0px;
    bottom: 0px;
	z-index: 10;
}

#bg, #bg b {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: block;
}

#bg i {
    position: relative;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    display: table;
}

#bg i > i {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    position: static;
    top: 0px;
}

#bg video {
    display: block;
    margin: 0px auto;
    width: 50%;
}

#slide-1 .centered{
	position: absolute;
	height: 404px;
    width: 439px;
	top: 50%;
	left: 50%;
	margin-top: -202px;
	margin-left: -219.5px;
	z-Index: 20;
}

.arrow {
   background-image: url(../img/start_arrow.png);
   text-align: center;
   width: 50px;
   height: 38px;
   position: absolute;
   left: 50%;
   bottom: 100px;
   margin-left: -25px;
   z-index: 20;
   -moz-transition: -moz-transform 0.2s ease;
   -webkit-transition: -webkit-transform 0.2s ease;
   -o-transition: -o-transform 0.2s ease;
   -ms-transition: -ms-transform 0.2s ease;
   transition: transform 0.2s ease;
}
.arrow:hover {   
   -moz-transform: translateY(-12px);
   -webkit-transform: translateY(-12px);
   -o-transform: translateY(-12px);
   -ms-transform: translateY(-12px);
   transform: translateY(-12px);
   cursor: pointer;	
}

 #slide-1 h1{
	opacity: 0.7;
	letter-spacing: 1px;
	color: rgb(255, 255, 255);
	font-family: 'Uni_acc',arial,serif;
	font-size: 120px;
	text-decoration: none;
}

 #slide-1 h2{
	top: 0px;
	opacity: 0.8;
	color: rgb(34, 45, 47);
	font-family: 'Conv_Cicle_Fina',arial,serif;
	font-size: 30px;
	text-decoration: none;
}
#slide-1 h3 {
	top: 8px;
	height: 12px;
	opacity: 0.5;
	color: rgb(255, 255, 255);
	font-family: 'Conv_Cicle_Fina',arial,serif;
	font-size: 17px;
	text-decoration: none;	
}











#slide-2{
	background-image:url(../img/2.jpg);
}

#about-1 {
   margin: 25px 20px 20px 0px;
   float: left;
   display: block;
   width: 100%;
   text-align: center;
}

#about-1 p {
   margin: 0;
   padding:0;
}

#about-1 #line0 {
	font-family: 'Uni_acc',arial,serif;
	text-transform:uppercase;
	letter-spacing: 4px;
    font-size: 35px;
    line-height: 30px;  
	text-decoration:underline;
}

#about-1 #line1 {
	font-family: 'Uni_acc',arial,serif;
	text-transform:uppercase;
	letter-spacing: 4px;
    font-size: 65px;
    line-height: 85px;  
}

#about-1 #line2 {
	font-family: 'Conv_Cicle_Fina_Italic',arial,serif;
	letter-spacing: 1px;
    font-size: 21px;
    line-height: 20px; 
}

#about-1 #line3 {
	font-family: 'Conv_Cicle_Fina_Italic',arial,serif;
	letter-spacing: 5px;
    font-size: 30px;
    line-height: 40px;   
}

#about-1 #line4 {
	font-family: 'Conv_Cicle_Fina_Italic',arial,serif;
	letter-spacing: 5px;
    font-size: 30px;
    line-height: 20px;   
}

#about-1 #line5 {
	font-family: 'Conv_Cicle_Fina_Italic',arial,serif;
	letter-spacing: 2px;
    font-size: 19px;
    line-height: 20px;   
}

#about-1 #line6 {
	font-family: 'Uni_acc',arial,serif;
	text-transform:uppercase;
	letter-spacing: 4px;
    font-size: 30px;
    line-height: 40px; 
}

#about-1 #line7 {
	font-family: 'Conv_Cicle_Fina_Italic',arial,serif;
	letter-spacing: 5px;
    font-size: 35px;
    line-height: 35px;   
}

#about-1 #line8 {
	font-family: 'Conv_Cicle_Fina_Italic',arial,serif;
	letter-spacing: 5px;
    font-size: 22px;
    line-height: 30px;   
}

#about-1 #line9 {
	font-family: 'Uni_acc',arial,serif;
	text-transform:uppercase;
	letter-spacing: 6px;
    font-size: 28px;
    line-height: 16px; 
	color:#e8be60;
	-moz-text-shadow:1px 1px 1px #161615;
	-webkit-text-shadow:1px 1px 1px #161615;
	text-shadow:1px 1px 1px #161615;
}

#about-1 #line10 {
	font-family: 'Uni_acc',arial,serif;
	text-transform:uppercase;
	letter-spacing: 1px;
    font-size: 30px;
    line-height: 48px; 
	color:#e8be60;
	-moz-text-shadow:1px 1px 1px #161615;
	-webkit-text-shadow:1px 1px 1px #161615;
	text-shadow:1px 1px 1px #161615;
}

#about-1 #blank {
    font-size: 30px;
    line-height: 35px; 
}



#slide-3{
	background-color: #FFF;
    font-family: 'Conv_Cicle_Fina_Italic', arial;
    font-size: 17pt;
}
#slide-3 h2 { 
    font-family: "uni_acc";
    font-size: 57.43pt;
    letter-spacing: 10px;
    font-weight: 100;
    text-align: center;
}
#slide-3 h4 { 
    font-family: "uni_acc";
    font-size: 22.97pt;
    letter-spacing: 6px;
    font-weight: 100;
    text-align: center;
    line-height: 0;
    margin: 0px 0px 15px 0px;
}

.ref  {
	position: absolute;
	color: #FFF;
	cursor: pointer;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-position: center right;
}
#ref1 {background-color: #268e96;top:0;left:0;z-Index:1; }
#ref1 img {
    max-width: 80%;
	width: auto;
    height: auto;
    position: relative;
    left: 50%;
    margin-left: -40%;
    z-index: 20;
}
#ref1 h2 {
    margin-bottom: 50%;
left: 50%;
height: 50px;
width: 300px;
margin-left: -150px;
margin-top:220px;
position: relative;
opacity: 1;
text-decoration: none;

	opacity: 1.0;
	font-size: 54px;
	text-decoration: none;

}

#ref1 h3 {
	font-family: "uni_acc";
	font-size: 57px;
	letter-spacing: 10px;
	padding-left:10px;
	font-weight:normal
}
#ref1 > .hidden-container > #center { width:  80%; height: 100%; margin-top:  72px; margin-left: 10%; }
#ref2 {bottom:0;left:0;z-Index:6; color: #1f1f1f; background-color: #EBC77E;}
#ref2 > .preview-container {background-image: url(../img/film_bg.jpg);background-position: cover center;background-repeat: no-repeat;height: 100%;width: 100%; background-size: cover;}

#ref3 {background-color: #EBC77E; color: #1f1f1f; top:0;z-Index:11;}
#ref3 > .preview-container { background-image: url(../img/watchthetrailer_bg.jpg); background-position: center; height: 100%; background-size: cover; }
#ref3 h2 {
    top: 50%;
	left: 50%;
	height: 190px;
	width: 200px;
	margin-left: -100px;
	margin-top: -95px;
	position: relative;
	opacity: 1.0;
	font-family: 'Conv_Cicle_Fina',arial,serif;
	font-size: 54px;
	text-decoration: none;
	text-align:center;
}
#ref3 p {
	font-family: 'Conv_Cicle_Fina_Italic',arial,serif;
	font-weight: 100;
	letter-spacing: 1px;
    font-size: 19px;
    width: auto;
    line-height: 24px;
    margin: 36% 21px 0px 21px;
}

#ref4 {background-color: #1D1D1D; color: #FFF; bottom:0;z-Index:16;}
#ref4 > .hidden-container > #center { width:  80%; height: 100%; margin-top:  72px; margin-left: 10%; }
#ref4 > .preview-container {
    width: 100%;
    height: 100%;
    margin-top: 30px;
}
#ref4 h2 {
    top: 50%;
	left: 50%;
	height: 60px;
	width: 250px;
	margin-left: -125px;
	margin-top: -30px;
	position: relative;
	opacity: 1.0;
	font-size: 54px;
	text-decoration: none;
}

#ref5 {
	background-image: url(../img/photos_bg.jpg);
	top:0;
	right:0;
	height: 100%;
	z-Index:21;
}
#ref5 iframe {
   border: none;	
   z-Index: 330;
    width: 100%;
    height: 100%;
}




#slide-4{
	background-image:url(../img/contact.jpg);
}
.contact { position: absolute; height: 400px; width: 900px; top: 50%; left: 50%; margin-top: -200px; /* height / 2 */ margin-left: -450px; /* width / 2 */ }
.contact_in { position: absolute; height: 250px; width: 900px; margin-top: 163px; text-align:center}
.contact_row { position: relative; float:left; width: 300px; color:#000; font-family: 'Uni_acc', arial, serif; letter-spacing:0.1em; font-size:25px; text-decoration:none; text-transform:uppercase; line-height:35px; background:3px #fff; }
.contact_big { position: relative; float:left; margin-top:50px; width: 900px; color:#fff; text-align:center;}
.contact_big a { color:#444; font-family: Conv_Cicle_Fina-Italic; font-size:18px; font-style:italic; text-decoration:none; padding:4px 5px; background-color:#cfe2de;}
.contact_big a:hover { color:#000; font-family: Conv_Cicle_Fina-Italic; font-size:18px; font-style:italic; text-decoration:none; padding:4px 5px; background-color:#a0dfd6;}

.contact_credits { position: relative; float:left; margin-top:20px; width: 900px; color:#fff; text-align:center; font-family: Conv_Cicle_Fina-Italic; font-size:14px; font-style:italic; text-decoration:none; padding:4px 5px;}
.contact_credits a { color:#ffffff; font-family: Conv_Cicle_Fina-Italic; font-size:14px; font-style:italic; text-decoration:none; padding:4px 5px; text-decoration:underline}
.contact_credits a:hover { color:#000; font-family: Conv_Cicle_Fina-Italic; font-size:14px; font-style:italic; text-decoration:none; padding:4px 5px; background-color:#a0dfd6;}





footer {
  position: fixed;
  bottom: 0;
  background-color: #f8f8f8;
  color: #4a4a4a;
  width: 100%;
  z-index: 300;	
  text-align: center;
  font-family: 'Norwester Regular',arial,serif;
  font-size: 21px;
}

footer nav  {
    display:inline-block;
	width: 800px;
    margin: 0;
    left: 0%;
    z-index: 100;
	position: relative;
	height: 64px;
}

footer nav > ul  {
  list-style: none;	
  margin: 0;
    margin-left: -46px;
}

footer nav > ul > a {
  float: left;	
  padding: 24px 24px;
  margin-right: 24px;
}
.active1 {
  background-color: #946790;
}
.active2 {
  background-color: #e9be60;	
}
.active3 {
  background-color: #d43435;	
}
.active4 {
  background-color: #b0dfd5;	
}
#copy {
	height: 34px;
	float: right;
	right: 0;
	text-align: left;
	background-color: #1f1f1f;
	color: #FFF;
	font-family: 'Uni_acc', arial, serif;	
	z-Index: 101;
	margin-top: 15px;
	width: 200px;
	font-size: 24px;
	letter-spacing: 3px;
	line-height: 37px;
}
#links {
	height: 34px;
	float: left;
	left: 0;
	text-align: left;
	color: #1f1f1f;
	font-family: 'Norwester Regular';
    font-size: 10pt;
	z-Index: 101;
	margin-top: 20px;
	width: 269px;
	letter-spacing: 3px;
	line-height: 34px;
}










.preview-container {
    font-family: 'uni_acc';
    font-size: 57.43pt;
    letter-spacing: 30px;
    font-weight: 100;
    line-height:  10pt;
    text-align: center;
}

#ref3 img {
    width: 223px;
    height: 162px;
    top: 50%;
    left: 50%;
    margin-left: -111.5px;
    margin-top: -81px;
    position: absolute;
}

#ref2 img {
    width: 257px;
    height: 140px;
    top: 50%;
    left: 50%;
    margin-left: -128.5px;
    margin-top: -70px;
    position: absolute;
}

#ref2 h1 {
    width: 390px;
    position: absolute;
    top: 0px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin-left: -195px;
    margin-top: -50px;
}



#ref4 h2 {
font-family: "uni_acc";
font-size: 57.43pt;
letter-spacing: 10px;
font-weight: 100;
text-align: center;
}


#ref5 > .photos {
width: 80%;
height: 90px;
right: 0px;
margin-right: 0px;
top: 50%;
margin-top: -45px;
position: absolute;
background-color: #FFF;
color: #333;
font-family: "uni_acc";
letter-spacing: 6px;
font-size: 57.43pt;
text-align: left;
padding-top:6px;
}

#ref5 > .photos > span {
   margin-top: 7px;
    margin-left: 12px;
    position: absolute;
}

#footer_border {
    position: relative;
    height: 6px;
    width: 100%;
    background-color: #222222;
    z-index: 301;
    bottom: 0;
}

#nav {
    
}

.active {
    background-color: #cfe2de;
}

#center {
  text-align: center;
  font-size: 18px;
}

#cast {
    padding: 27px 0px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

#directors {
    padding: 27px 0px;
    border-top: 1px solid #1f1f1f;
    border-bottom: 1px solid #1f1f1f;
}

#sound {
    padding: 27px 0px;
    border-bottom: 1px solid #1f1f1f;
}

#wave {
    text-align:  center;
    margin-left: 0px !important;
    left: 0% !important;
}

#vimeo_link {
    background-image: url(../img/vimeo.png);
    width: 23px; /*31*/
    height: 21px;
    float: left;
    position:  relative;
    margin: 5px 12px 0px 12px;
}
#vimeo_link:hover {
    background-image: url(../img/vimeo_hover.png);
}

#scotch_link {
    background-image: url(../img/scotch_link.png);
    width: 31px; /*31*/
    height: 21px;
    float: left;
    position: relative;
    margin: 5px 12px 0px 12px;
}
#scotch_link:hover {
    background-image: url(../img/scotch_link_hover.png);
}

#trailer {
    padding: 27px 0px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

#intro {
    padding: 27px 0px;
    border-top: 1px solid #268e96;
    border-bottom: 1px solid #268e96;
}

#explorer{
    padding: 27px 0px;
    border-bottom: 1px solid #268e96;
}
#driving {
    padding: 27px 0px;
    border-bottom: 1px solid #268e96;
}

#final {
    padding: 27px 0px;
    border-bottom: 1px solid #268e96;
}
#close_video {
    height: 128px;
    width: 126px;
    top: 50%;
    left: 0;
    margin-top: -64px;
    position: absolute;
    cursor: pointer;
}
#close_video img { margin-left: -63px; width: 100%; height: 100%; }

.hidden-foto-site {
    top:0;
	right:0;
	height: 100%;
    width: 100%;
	z-Index:330;
}

@media screen and (max-height: 900px) {
    #cast {padding: 24px 0px !important;}
    #directors {padding: 24px 0px !important;}
    #sound {padding: 24px 0px !important;}
    
    
    
    #trailer {padding: 24px 0px !important;}
    #intro {padding: 24px 0px !important;}
    #explorer {padding: 24px 0px !important;}
    #driving {padding: 24px 0px !important;}
    #final {padding: 24px 0px !important;}
}

@media screen and (max-height: 800px) {
    #cast {padding: 21px 0px !important;}
    #directors {padding: 21px 0px !important;}
    #sound {padding: 21px 0px !important;}
    #ref1 > .hidden-container > #center { margin-top: -24px !important; }
    
    #trailer {padding: 21px 0px !important;}
    #intro {padding: 21px 0px !important;}
    #explorer {padding: 21px 0px !important;}
    #driving {padding: 21px 0px !important;}
    #final {padding: 21px 0px !important;}
}

@media screen and (max-height: 700px) {
    #cast {padding: 18px 0px !important;}
    #directors {padding: 18px 0px !important;}
    #sound {padding: 18px 0px !important;}
   #ref1 > .hidden-container > #center { margin-top: -30px !important; }
   #ref1 h3 { margin-bottom: 21px !important; }
    
    #trailer {padding: 18px 0px !important;}
    #intro {padding: 18px 0px !important;}
    #explorer {padding: 18px 0px !important;}
    #driving {padding: 18px 0px !important;}
    #final {padding: 18px 0px !important;}
    #ref4 h2 { margin-bottom: 21px !important; }
}


@media screen and (max-height: 600px) {
    #cast {padding: 15px 0px !important; font-size: 15px !important;}
    #directors {padding: 15px 0px !important; font-size: 15px !important;}
    #sound {padding: 15px 0px !important; font-size: 15px !important;}
   #ref1 > .hidden-container > #center { margin-top: -30px !important; }
   #ref1 h3 { margin-bottom: 12px !important; }
    
    #trailer {padding: 15px 0px !important; font-size: 15px !important;}
    #intro {padding: 15px 0px !important; font-size: 15px !important;}
    #explorer {padding: 15px 0px !important; font-size: 15px !important;}
    #driving {padding: 15px 0px !important; font-size: 15px !important;}
    #final {padding: 15px 0px !important; font-size: 15px !important;}
    #ref4 h2 { margin-bottom: 12px !important;}
}


@media screen and (max-width: 1400px) {
    html {
     font-size: 15px !important;
    }
    
    h2 {
     font-size: 37pt !important;   
    }
    h4 {
     font-size: 15pt !important;   
    }
}