@charset "utf-8";
/* 
=================================================================================================================
ARANZAZU CALLEJA
-----------------------------------------------------------------------------------------------------------------
Diego Besné // diegobesne.com
=================================================================================================================
*/

/* RESET CSS */
* { margin:0; padding:0;}
html, body{ height:100%;}
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, b, 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; vertical-align:baseline;}
/* 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;}

img, a img, embed, iframe{ border:none; vertical-align:bottom;}
a, button{ color:#000; outline:none; text-decoration:none;
/* Webkit */ -webkit-transition:.2s ease-in-out;
/* Firefox */ -moz-transition:.2s ease-in-out;
/* Opera */ -o-transition:.2s ease-in-out; 
/* Standard */ transition:.2s ease-in-out;}
a:hover{ color:#a0a0a0;}
form, fieldset{ border:none;}
ol, ul{ list-style:none;}
abbr{}
hr{ display:none;}
h1, h2, h3, h4, h5, h6{ font-weight:normal;}

/* CLEARFIX */
.clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
* html .clearfix { zoom:1;} /* IE6 */
*:first-child+html .clearfix { zoom:1;} /* IE7 */

/* GENERIC STYLES */
html, body{ -webkit-font-smoothing:antialiased;}

body{ background:#000 url(img/bg-black.png) repeat; color:#000; font:normal 16px/26px 'Montserrat', sans-serif; font-weight:400; text-align:center;}

#container{ background:#fff; border:15px solid #000; position:relative; top:0; right:0; bottom:0; left:0;}
body.portada #container{ background:#000; border-color:#fff; position:absolute;}

#lang{ position:absolute; top:23px; left:34px; text-align:left;}
#redes{ position:absolute; top:23px; right:34px; text-align:right;}
#lang ul li, #redes ul li{ color:#a0a0a0; display:inline; font-size:10px; line-height:18px; letter-spacing:1px; text-transform:uppercase;}
#lang ul li:before, #redes ul li:before{ content:" / ";}
#lang ul li:first-child:before, #redes ul li:first-child:before{ content:"";}
#lang ul li a, #redes ul li a{ border-bottom:1px solid #fff; color:#a0a0a0; padding:0 0 2px;}
#lang ul li a:hover, #redes ul li a:hover{ border-color:#a0a0a0;}

body.portada #lang ul li, body.portada #redes ul li{ color:#e5e5e5;}
body.portada #lang ul li a, body.portada #redes ul li a{ color:#e5e5e5; border:none;}

#header{ padding:35px 0 70px; margin:0 auto;}

#header .logo{}

#header .nav { padding:35px 0 0;}
#header .nav ul{ font:normal 12px/18px 'Montserrat', sans-serif; font-weight:400px; letter-spacing:1px; text-transform:uppercase;}
#header .nav ul li{ display:inline; padding:0 20px;}
#header .nav ul li a{ border-bottom:1px solid #fff; padding:0 0 3px;}
#header .nav ul li a:hover{ border-bottom:1px solid #000; color:#000;}

body.portada #header .nav ul li a{ border:none;}
body.portada #header .nav ul li a:hover{}

body.portada #header .nav ul li a{ color:#fff;}
body.biografia #header .nav ul li a.biografia, body.biografia #header .nav ul li a.biografia:hover,
body.reel #header .nav ul li a.reel, body.reel #header .nav ul li a.reel:hover,
body.filmografia #header .nav ul li a.filmografia, body.filmografia #header .nav ul li a.filmografia:hover,
body.otros #header .nav ul li a.otros, body.otros #header .nav ul li a.otros:hover,
body.contacto #header .nav ul li a.contacto, body.contacto #header .nav ul li a.contacto:hover{ color:#a0a0a0; border:none;}

#content{ margin:0 auto; padding:0 0 70px; width:580px;}

body.reel #content{ width:90%; max-width:700px;}

#content h1{ border-bottom:thin solid #000; display:inline-block; font-size:16px; letter-spacing:1px; line-height:26px; font-weight:400; text-align:center; text-transform:uppercase;}
#content img, #content iframe, #content embed{ clear:both; display:block; margin:25px auto 0;}
#content p{ letter-spacing:.25px; margin:26px 0 0; text-align:left;}
#content p.p_contacto{ font-size:16px; letter-spacing:1px; line-height:26px; margin:63px auto 0; text-align:center; text-transform:uppercase;}
#content p.p_contacto a{ background:#fff; border:2px solid #000; padding:10px 20px;}
#content p.p_contacto a:hover{ background:#000; color:#fff;}
#content p.p_descargar{ font-size:12px; letter-spacing:1px; line-height:26px; margin:40px auto 0; text-align:center; text-transform:uppercase;}
#content p.p_descargar a{ border-bottom:1px solid #fff; padding:0 0 3px;}
#content p.p_descargar a:hover{ border-bottom:1px solid #000; color:#000;}
#content .cita{ margin:30px 0 0; padding:0 10%;}
#content .cita blockquote{ background:url(img/border-sep.png) no-repeat top center; font-size:16px; font-style:normal; font-weight:400; line-height:24px; margin:0; padding:25px 0 0; text-transform:uppercase;}
#content .cita p{ background:url(img/border-sep.png) no-repeat bottom center; text-align:center; font-size:12px; letter-spacing:1px; line-height:36px; margin:0 auto; padding:3px 0 21px; text-transform:uppercase;}

body.filmografia #content, body.otros #content{ margin:0 auto; padding-bottom:40px; width:960px;}
#content .film_list{ padding:40px 0 0; text-align:left;}
#content .film_list .film{ display:inline-block; margin:0 1.3%; padding:0 0 50px; vertical-align:top; width:47%;}
#content .film_list .film h2{ border-bottom:1px solid #000; display:block; font-size:16px; font-weight:400; line-height:20px; padding:0 0 8px; text-transform:uppercase;}
#content .film_list .film h2 em{ font-size:13px; font-style:normal; display:none;}
#content .film_list .film .data{ padding:20px 0 0;}
#content .film_list .film .data .img{ display:inline; float:left; text-align:center; width:26%;}
#content .film_list .film .data .img ul{ color:#a0a0a0; font-size:11px; line-height:16px; padding:10px 0 0; text-transform:uppercase;}
#content .film_list .film .data .img ul li{ display:inline;}
#content .film_list .film .data .img ul li:before{ content:" / ";}
#content .film_list .film .data .img ul li:first-child:before{ content:"";}
#content .film_list .film .data .img ul li a{ border-bottom:1px solid #fff; color:#a0a0a0; padding:0 0 2px;}
#content .film_list .film .data .img ul li a:hover{ border-color:#a0a0a0;}
#content .film_list .film .data .img img{ margin:0; padding:0; height:auto; width:100%;}
#content .film_list .film .data .desc{ display:inline; float:right; width:69%;}
#content .film_list .film .data .desc p{ font-size:13px; line-height:20px; margin:0; padding:0; text-transform:uppercase;}
#content .film_list .film .data .desc p.p_premio{ font-size:12px; line-height:18px; margin:15px 0 0; text-transform:none;}

#content .film_list .film .data .desc p.p_audio { font-size:11px; line-height:18px; margin:10px 0 0;}
#content .film_list .film .data .desc p.p_audio a,
#content .film_list .film .data .desc p.p_audio a.sm2_link{
/* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
display:inline-block; vertical-align:middle; background-color:#b5b5b5; color:#fff; margin:3px 0 0; padding:5px 15px 5px 30px;-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
#content .film_list .film .data .desc p.p_audio a, /* use a.sm2_link {} if you want play icons showing only if SM2 is supported */
#content .film_list .film .data .desc p.p_audio a.sm2_paused:hover,
#content .film_list .film .data .desc p.p_audio a.sm2_link:hover { background-image:url(img/icon_play.png);  background-position:5px 5px; background-repeat:no-repeat;}
#content .film_list .film .data .desc p.p_audio a.sm2_link:hover { /* default hover color, if you'd like.. */ background-color:#000; color:#fff;}
#content .film_list .film .data .desc p.p_audio a.sm2_paused { background-color:#b5b5b5;}
#content .film_list .film .data .desc p.p_audio a.sm2_paused:hover { background:#000 url(img/icon_play.png) no-repeat 5px 5px; }
#content .film_list .film .data .desc p.p_audio a.sm2_playing,
#content .film_list .film .data .desc p.p_audio a.sm2_playing:hover { background:#000 url(img/icon_pause.png) no-repeat 5px 5px;}

.filtrado{ font:normal 12px/24px 'Montserrat', sans-serif; font-weight:400px; letter-spacing:1px; padding:30px 0 0; text-transform:uppercase;}
.filtrado li{ display:inline; padding:0 10px;}
.filtrado li a{ border-bottom:1px solid #fff; color:#000; padding:0 0 2px;}
.filtrado li a:hover{ border-color:#000; color:#000;}
.filtrado li a.selected{ border-color:#fff; color:#a0a0a0;}
@media screen and (max-width:600px) {
.filtrado li{ display:block;}
}

.clear_left{ clear:left;}

#content .contact_data{ margin:30px 0 0; padding:0 10%;}
#content .contact_data address{ background:url(img/border-sep.png) no-repeat top center; font-size:16px; font-style:normal; font-weight:400; line-height:24px; margin:0; padding:25px 0 0;}
#content .contact_data address a{ border-bottom:1px solid #fff; padding:0 0 2px;}
#content .contact_data address a:hover{ border-color:#000; color:#000;}
#content .contact_data ul.ul_redes{ background:url(img/border-sep.png) no-repeat bottom center; text-align:center; font-size:12px; letter-spacing:1px; line-height:36px; margin:0 auto; padding:3px 0 21px; text-transform:uppercase;}
#content .contact_data ul.ul_redes li{ display:inline;}
#content .contact_data ul.ul_redes li:before{ content:" / ";}
#content .contact_data ul.ul_redes li:first-child:before{ content:"";}
#content .contact_data ul.ul_redes li a{ border-bottom:1px solid #fff; padding:0 0 2px;}
#content .contact_data ul.ul_redes li a:hover{ border-color:#000; color:#000;}

#footer{ text-align:center; margin:0 auto; padding:42px 0; width:100%;}
#footer h1{ font:normal 20px/24px 'Montserrat', sans-serif; font-weight:700; letter-spacing:4px; text-transform:uppercase;}
#footer h2{ font:normal 12px/24px 'Montserrat', sans-serif; font-weight:400; letter-spacing:2.75px; padding:3px 0 0; text-transform:uppercase;}
body.portada #footer{ color:#fff; position:absolute; bottom:0; right:0; left:0;}

/* RESPONSIVE */

@media screen and (max-width:479px) {
#container{ min-height:300px;}
#lang{ position:absolute; top:0px; left:0; right:0; text-align:center;}
#redes{ display:none;}
#header .nav ul li{ display:block;}
#content{ width:90% !important;}
#content img{ display:block; height:auto !important; width:100%;}
#content .film_list .film{ display:block; margin:0; float:none; height:auto !important; min-height:inherit; padding:0 0 30px; width:100%;}
#footer{ width:90%;}
}
@media screen and (max-width:767px) {
#container{ min-height:450px;}
#header .nav ul li{ display:block;}
body.biografia #header .nav ul li a.biografia,
body.reel #header .nav ul li a.reel,
body.filmografia #header .nav ul li a.filmografia,
body.otros #header .nav ul li a.otros,
body.contacto #header .nav ul li a.contacto{ border:none; color:#a0a0a0;}
#content{ width:90% !important;}
#content .film_list .film{ display:block; margin:0; float:none; height:auto !important; min-height:inherit; padding:0 0 30px; width:100%;}
#footer{ width:90%;}
}
@media screen and (max-width:1023px) {
body.filmografia #content, body.otros #content{ width:90%;}
}

.videoWrapper { position:relative; padding-bottom:56.25%; /* 16:9 */ height:0;}
.videoWrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%;}