/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {}

audio,
canvas,
iframe,
img,
svg,
video {vertical-align: middle;}

.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;}

.c{clear: both;}

::-moz-selection { 
color: #fff;
background: #86a5b6;}

::selection {
color: #fff;
background: #86a5b6;}

a:active, a:focus{
outline: none;
	color: #dbba85;}
	
/* body:after{
	    display:none;
	    content: url(seta2.png);}  */
	    
@font-face {
    font-family: 'brandon';
    src: url('fonts/hvd_fonts_-_brandon_printed_double-webfont.eot');
    src: url('fonts/hvd_fonts_-_brandon_printed_double-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/hvd_fonts_-_brandon_printed_double-webfont.woff') format('woff'),
         url('fonts/hvd_fonts_-_brandon_printed_double-webfont.ttf') format('truetype'),
         url('fonts/hvd_fonts_-_brandon_printed_double-webfont.svg#brandon') format('svg');
    font-weight: normal;
    font-style: normal;}
	    

/* ==========================================================================
   DESKTOP
   ========================================================================== */



@media only screen and (min-width:800px) { 

.extra-link {
text-transform: lowercase;
clear: both;
font-size: 1.75em;
line-height: 1em;
letter-spacing: .25em;
text-align: center;
width: 375px;
margin: 40px auto 0;
padding: 20px;
display: block;
color: #362b22;
border: 1px solid rgba(161, 161, 161, 0.6);
background: rgba(255, 255, 255, 0.25);}

body{
font-variant-ligatures: common-ligatures; 
text-rendering: optimizeLegibility;
margin: 0;
padding: 0;
background: #fff;
color: #000;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
border-left: 10px solid #fff;
border-right: 10px solid #fff; }

body:before, body:after {
    content: "";
    position: fixed;
    background: #fff;
    z-index: 99999;
    left: 0;
    right: 0;
    height: 10px;}
    
body:before {
    top: 0;}
    
body:after {
    bottom: 0;}

p{
line-height: 1.5em;
margin: 0 0 1.5em;}
	
ul{margin: 0; padding: 0;}	

a{
text-decoration: none;}

header{
margin-top: 10px;
height: 730px;
overflow: hidden;
position: relative;
background: #1b1c16 url(header.jpg) no-repeat;
background-size: cover;}

header #sticker{
position: absolute;	
width: 100%;
z-index: 100;}

header nav ul{
font-family:"brandon", "Open Sans", sans-serif;
padding: 20px 0 0 0;
list-style: none;
width:990px;
margin: 0 auto;}
	
header nav li{
display: inline;}
	
header nav a{
padding: 5px;
margin-right: 10px;
display: block;
float: left;
color:#fff;}

header nav li:last-child a{
margin-right: 0;}

#social-top{ 
position: absolute;
top: 17px;
right: 0px;
margin: 0 auto 45px;
width:130px;
height: 30px;
overflow: hidden;
background: url(redes.png) 5px 0 no-repeat;}		
	
#social-top a{  
display: block;
float: left;
width: 25px;
height: 30px;
margin-right: 5px;
text-indent: -999em;}
		
.scroll{
background-color: rgba(0, 0, 0, 0.25);
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
height: 55px;}		
		
header h1{
width: 565px;
height:158px;
position: absolute;
top: 180px;
margin-left:-310px;
left:50%;
z-index: 100;
text-indent: -999em;
background: url(logo.png);}

#auteur{
width: 280px;
height:24px;
position: absolute;
top: 355px;
margin-left:-20px;
left:50%;
z-index: 100;
text-indent: -999em;
background: url(auteur.png);}

#awa{
width: 532px;
height:90px;
position: absolute;
top: 125px;
margin-left:-266px;
left:50%;
z-index: 100;
text-indent: -999em;
background: url(premios-header.png);}	

#action-links{
font-family:"brandon", "Open Sans", sans-serif;
overflow: hidden;
font-size: 1.15em;
width: 490px;
position: absolute;
top: 430px;
margin-left:-245px;
left:50%;
z-index: 100;
text-align: center;}

#action-links a{
padding: 15px;
	color: #fff;
	display: block;
	width: 42%;
	border: 1px solid #fff;}
	
#action-links .popup-youtube{
	float: left;	}	

#action-links .popup-programacao{
	float: right;}	

#action-links a:hover{	
background-color: rgba(0, 0, 0, 0.75);
	-webkit-transition: background 1s ease-in-out;
	-moz-transition: background 1s ease-in-out;
	-ms-transition: background 1s ease-in-out;
	-o-transition: background 1s ease-in-out;
	transition: background 1s ease-in-out;}

#scroll-icon{
width: 75px;
height: 75px;
display: block;
position: fixed;
bottom: 10px;
margin-left:-37px;
left:50%;
z-index: 100;
text-indent: -999em;
background: url(seta.png) bottom center no-repeat;}

#info{
padding: 100px 0 0;
background: #eff1f0 url(bg-caderno.jpg) top center repeat-y;
background-size: cover;}

.inner{
	width: 920px;
	margin: 0 auto;
	overflow: hidden;}

.left-col{
	float: left;
	width: 440px;}
	
.right-col{
		float: right;
		width: 440px;}
		
h2{
border-bottom: 2px solid #000;
text-align: center;
font-family:"brandon", "Open Sans", sans-serif;
font-weight: normal;
font-size: 2.5em;
margin: 0 0 30px;
padding: 0 0 15px;}		

#sinopse{
margin: 0 0 35px;
overflow: hidden;}

#elenco{
margin: 0 0 65px;
overflow: hidden;}

#elenco .left-col, #elenco .right-col{
min-height: 475px;}

#elenco .left-col{
background: url(cast-pics-1.png) top left no-repeat;	}

#elenco .right-col{
background: url(cast-pics-2.png) top left no-repeat;	}

#elenco p{
margin: 0;
padding: 35px 0 35px 135px;	}

#diretor{
margin: 0 0 55px;
overflow: hidden;}

#diretor {}

#diretor ul{
line-height: 2em;
list-style: none;}

#director-statement{
margin: 0 0 55px;
overflow: hidden;}

#equipe{
overflow: hidden;}

#equipe p{
line-height: 2em;}

#equipe em{
margin: 0 0 0 .25em;}

#fotos{
text-align: center;
overflow: hidden;
width: 1225px;
padding: 0 0 50px 20px;
margin: 60px auto 0;}

#fotos ul{
	list-style: none;}
	
#fotos li{
display: block;
float: left;
padding: 0;
margin: 0 20px 20px 0;
overflow: hidden;
width: 385px;
height: 200px;}	
	
#fotos a{
color: #3f3f3f;
display: block;}

#fotos img{ transition: all 1s ease-in-out; }

#fotos img:hover { transform: scale(1.25); }

#fotos .out{
margin: 20px;
display: block;
border: 1px solid rgba(161, 161, 161, 0.6);}
	 
#fotos .in{
overflow: hidden;
display: block;
padding:6px 0;
font-size: 1.75em;
line-height: 1em;
letter-spacing: .25em;
transition: all 1s ease-in-out;}	 

#fotos .in:hover{transform: scale(1.25);}
	
#fotos strong{
display: block;}

#festivals-awards p{
text-align: center;
line-height: 1.8em;}

#festivals-awards a{
text-align: center;
clear: both;
	display: block;
	margin: 30px auto 0;
	width: 300px;
padding: 10px;
	color: #3f3f3f;
	transition: all 1s ease-in-out;
	font-size: 1.75em;
	line-height: 1em;
	letter-spacing: .25em;
	border: 1px solid rgba(161, 161, 161, 0.6);}
	
#festivals-awards a strong{
display: block;}

#critica-chamadas{
height:700px;
background: #edf7ff url(bg-criticas-chamadas.jpg) center no-repeat;
background-size: cover;}

#more-awa{
max-width: 1220px;
width: 95%;
height: 400px;
margin: 0 auto ;
background: url(premios-en.png) 0 50px no-repeat;
background-size: contain;}	 

#critica-chamadas a{
font-size: 1.75em;
line-height: 1em;
letter-spacing: .25em;
text-align: center;
width: 375px;
margin: 40px auto 0;
padding: 20px;
display: block;
color: #362b22;
border: 1px solid rgba(161, 161, 161, 0.6);
background: rgba(255, 255, 255, 0.25);}
	
#info-2{
background: #eff1f0 url(bg-caderno.jpg) top center no-repeat;
background-size: cover;}

#critica-completas{
padding: 50px 0;}	

#critica-completas p{
	margin: 0;}

#critica-completas .byline{
font-weight: bold;
margin: 0 0 1em;}
	
#critica-completas h2{padding: 50px 0 0 ;}

#critica-completas a{
color: #000;}
	
#contatos{
background: #6985a1 url(contatos.jpg) center no-repeat;
background-size: cover;
padding: 95px 0 0;
min-height: 730px;}

#contatos .inner{
	width: 780px;}

#contatos a{
color: #000;}

h4{
font-family:"brandon", "Open Sans", sans-serif;
font-weight: normal;
font-size: 1.4em;
margin: 0 0 15px;
padding: 0;}		
	
.col3{
width: 30%;
float: left;}

.col3:first-child{
margin-right: 5px;}	
	
.col3:last-child{
float: right;}	
	
footer{
	border-top: 1px solid #b7b7b7;
	padding: 40px 0 130px;}	
	
#footer-social{
margin: 0 auto 45px;
	width:130px;
	height: 30px;
	overflow: hidden;
	background: url(footer-social.png) 5px 0 no-repeat;}		
	
#footer-social a{
	display: block;
	float: left;
	width: 35px;
	height: 30px;
	margin-right: 5px;
	text-indent: -999em;}
	
#patroc{
max-width:95%;
margin: auto;
background: url(footer-2.png) center no-repeat;
background-size: contain;
height:75px;}	

.white-popup, .festivais-popup  {
width: 935px;
color: #fff;
position: relative;
margin: 85px auto;
min-height: 420px;}

.festivais-popup, .white-popup  {
padding: 0 85px;}
	  
.white-popup h2, .festivais-popup h2{
font-weight: 300;
font-family:"Open Sans", sans-serif;
border-bottom:1px solid #fff;}

.white-popup{
text-align: center;}
	
.white-popup strong{
font-size: 1.25em;}	

.white-popup strong a{
display: block;
color: #fff;}

.white-popup iframe{
margin: 0 auto !important; 
width: 800px;	
}

.white-popup strong span{
	text-decoration: underline;}

h3{
margin: 0 0 15px;
padding: 0;
text-align: center;
text-transform: uppercase;}

.comprar{
width: 22%;
text-align: right;	}

.comprar a{
width: 140px;
text-transform: uppercase;
color: #000;
background: #fff;	
padding: 10px 15px;}
	  
table{
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
margin: 0 0 50px;
padding: 0 0 5px;
width: 100%;}
  	
table, th, td {} 
	  	
td{
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
vertical-align: middle;
padding: 15px 0;  }
	  
.slicknav_menu {
	display:none;
	height: 0px !important;
}

}

 /* ==========================================================================
   MOBILE
   ========================================================================== */

@media only screen and (max-width:800px) { 


.extra-link{
text-transform: lowercase;
font-size: 1.75em;
line-height: 1em;
letter-spacing: .25em;
text-align: center;
margin: 20px 20px 50px;
padding: 20px;
display: block;
color: #362b22;
border: 1px solid rgba(161, 161, 161, 0.6);
background: rgba(255, 255, 255, 0.5);}

.js #menu {
height: 0px !important;
display:none;}
	
.js .slicknav_menu {
display:block;}

body{
font-variant-ligatures: common-ligatures; 
text-rendering: optimizeLegibility;
margin: 0;
padding: 0;
background: #fff;
color: #000;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
border-left: 10px solid #fff;
border-right: 10px solid #fff; }

body:before, body:after {
content: "";
position: fixed;
background: #fff;
z-index: 99999;
left: 0;
right: 0;
height: 10px;}
    
body:before {
top: 0;}
    
body:after {
bottom: 0;}

p{
line-height: 1.5em;
margin: 0 0 1.5em;}
	
ul{margin: 0; padding: 0;}	

a{
text-decoration: none;}

header{
min-height: 640px;
background: #8d7765 url(header-m.jpg) no-repeat center;
background-size: cover;}

#social-top{ 
position: fixed;
top: 17px;
right: 0px;
margin: 0 auto 45px;
width:130px;
height: 30px;
overflow: hidden;
background: url(redes.png) 5px 0 no-repeat;}		
	
#social-top a{  
display: block;
float: left;
width: 35px;
height: 30px;
margin-right: 5px;
text-indent: -999em;}
		
.scroll{
background-color: rgba(0, 0, 0, 0.25);
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;}	
		
#awa{
margin: auto;
width: 80%;
height:105px;
background: url(premios-header.png) bottom no-repeat;
background-size: contain;}	

header h1{
margin: -5px 0 0 -20px;
height:75px;
text-indent: -999em;
background: url(logo.png) bottom no-repeat;
background-size: contain;}

#auteur{
height:20px;
z-index: 100;
text-indent: -999em;
background: url(auteur.png)center no-repeat;
background-size: contain;}
	
#action-links{
border: 1px solid transparent;
margin: 175px 0 20px;
font-family:"brandon", "Open Sans", sans-serif;
font-size: 1.15em;
text-align: center;}

#action-links a{
margin: 0 30px 15px;
padding: 15px;
color: #fff;
display: block;
border: 1px solid #fff;}

#scroll-icon{display: none !important;
height: 0;}

#info{
padding: 50px 0 0;
background: #eff1f0 url(bg-caderno.jpg) top left repeat-y;}

.inner{
padding: 0 20px;
overflow: hidden;}

h2{
border-bottom: 2px solid #000;
text-align: center;
font-family:"brandon", "Open Sans", sans-serif;
font-weight: normal;
font-size: 2.5em;
margin: 0 0 30px;
padding: 0 0 15px;}		

#sinopse{
margin: 0 0 35px;
overflow: hidden;}

#elenco{
margin: 0 0 65px;
overflow: hidden;}

#elenco .left-col{
margin-bottom: 10px;}

#elenco .left-col{
background: url(cast-pics-1.png) top left no-repeat;}

#elenco .right-col{
background: url(cast-pics-2.png) top left no-repeat;}

#elenco p{
margin: 0;
padding: 35px 0 35px 135px;	}

#diretor{
margin: 0 0 55px;
overflow: hidden;}

#diretor ul{
line-height: 2em;
list-style: none;}

#equipe{
margin-bottom: 50px;
overflow: hidden;}

#equipe p{
margin: 0;
line-height: 2em;}

#equipe em{
margin: 0 0 0 .25em;}

#fotos{
text-align: center;
overflow: hidden;
padding: 0 0 50px;
margin: 60px auto 0;}

#fotos ul{
list-style: none;}
	
#fotos li{
padding: 0;
margin: 0 0 20px;
overflow: hidden;
height: 200px;}	
	
#fotos a{
color: #3f3f3f;
display: block;}

#fotos .out{
margin: 20px;
display: block;
border: 1px solid rgba(161, 161, 161, 0.6);}
	 
#fotos .in{
overflow: hidden;
display: block;
padding:6px 0;
font-size: 1.75em;
line-height: 1em;
letter-spacing: .25em;;}	 

#fotos strong{
display: block;}

#festivals-awards {}

#festivals-awards p{border: 1px solid red;
text-align: center !important;
margin: 0;
line-height: 2em;}

#festivals-awards a{
clear: both;
	display: block;
	margin: 30px auto 0;
padding: 10px;
	color: #3f3f3f;
	transition: all 1s ease-in-out;
	font-size: 1.75em;
	line-height: 1em;
	letter-spacing: .25em;
	border: 1px solid rgba(161, 161, 161, 0.6);}
	
#festivals-awards strong{
display: block;}
	
#critica-chamadas{border: 1px solid transparent;
background: #edf7ff url(bg-criticas-chamadas.jpg) center no-repeat;
background-size: cover;}

#more-awa{
width: 95%;
height: 150px;
margin: 0 auto ;
background: url(premios-en.png) 0 50px no-repeat;
background-size: contain;}	 

#critica-chamadas a{
font-size: 1.75em;
line-height: 1em;
letter-spacing: .25em;
text-align: center;
margin: 20px 20px 50px;
padding: 20px;
display: block;
color: #362b22;
border: 1px solid rgba(161, 161, 161, 0.6);
background: rgba(255, 255, 255, 0.5);}
	
#info-2{
background: #eff1f0 url(bg-caderno.jpg) top left repeat-y;}

#critica-completas{
padding: 50px 0;}	

#critica-completas p{
margin: 0;}

#critica-completas .byline{
font-weight: bold;
margin: 0 0 1em;}
	
#critica-completas h2{padding: 50px 0 0 ;}

#critica-completas a{
color: #000;}
	
#contatos{
background: #6f8fa8 url(contatos-m.jpg) top no-repeat;
background-size: cover;
padding: 50px 0 0;
min-height: 675px;}

#contatos a{
color: #000;}

h4{
font-family:"brandon", "Open Sans", sans-serif;
font-weight: normal;
font-size: 1.4em;
margin: 0 0 15px;
padding: 0;}		

	
footer{
border-top: 1px solid #b7b7b7;
padding: 40px 0 65px;}	
	
#footer-social{
margin: 0 auto 45px;
width:130px;
height: 30px;
overflow: hidden;
background: url(footer-social.png) 5px 0 no-repeat;}		
	
#footer-social a{
	display: block;
	float: left;
	width: 35px;
	height: 30px;
	margin-right: 5px;
	text-indent: -999em;}
	
#patroc{
max-width:100%;
margin: auto;
background: url(footer-2.png) center no-repeat;
background-size: contain;
height:75px;}	

.white-popup, .festivais-popup  {
padding:40px 20px;
color: #fff;
position: relative;}

.white-popup h2, .festivais-popup h2{
font-weight: 300;
font-family:"Open Sans", sans-serif;
border-bottom:1px solid #fff;}

.white-popup p{
text-align: center;}
	
.white-popup strong{
font-size: 1.25em;}	

.white-popup strong a{
display: block;
color: #fff;}

.white-popup strong span{
	text-decoration: underline;}

h3{
margin: 0 0 15px;
padding: 0;
text-align: center;
text-transform: uppercase;}

.cinema{
padding: 15px 0 10px; }

.comprar{
padding: 0 0 10px; 
border-bottom: 1px solid rgba(255, 255, 255, 0.5);}

.comprar a{
display: block;
text-transform: uppercase;
color: #000;
background: #fff;	
padding: 10px 15px;}
	  
table{
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
margin: 0 0 50px;
padding: 0 0 5px;
width: 100%;}
  	
table, th, td {} 
	  	
td{
display:block;
	text-align: center;
vertical-align: middle;
 }

}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;}

.clearfix:after {
    clear: both;}

.clearfix {
    *zoom: 1;}