@import url("fuente/fuente.css");
@import url("../plugin/owlCarousel/css/owl.carousel.css");

*{margin:0;padding:0;border:0;list-style-type:none;outline:none !important;}

/* Para Safari */
::selection{background:#e3e3e3;color:#666;}

/* Para Firefox */
::-moz-selection{background:#e3e3e3;color:#666;}

html {font-size: 105%;}
body{background:#fff;font-weight:300;font-family:roboto, Arial, Helvetica, sans-serif;color:#6d6d6d}

h2{position:relative;display:block;margin-bottom:50px;text-align:center;font-weight:300;font-size:2.4rem;font-style:italic;font-family: 'Playfair Display', serif;line-height:1em;color:#191134}
#fallojurado-video h2.tipo2{font-size:1.3rem}
h3{margin-bottom:25px;font-weight:normal;font-family:tradeGothic-bold;color:#93969c;font-size:2rem;}
p{margin:0 0 25px;line-height:1.5em;}
strong{font-weight:normal;font-family:opensans-bold;}

.hidden{display:none;}

.modulo100{width:100%;float:left;}
.caja-ancho{max-width:95%;margin:0 auto;}
.txt-left{text-align:left !important;}
.txt-centro{text-align:center;}
.txt-dcha{text-align:right}
.color{color:#ff2b06}

.section{position:relative}
.copy{z-index:9999999999;position:absolute;bottom:25px;right:10%;font-size:.7em;color:#868585}

.img-deco{position:relative;display:inline-block;margin:0 auto}
.img-deco:before{position:absolute;bottom:-10px;right:-10px;display:block;width:100%;height:100%;background:rgba(22, 23, 21, .7);content:""}
.img-deco img{position:relative;display:block}


/*** INDICE DE ESTILOS ESTRUCTURA

	1. Enacabezado
		1.1 Idiomas
		1.2 Logotipo
		1.3 Redes sociales
		1.4 Responsive encabezado
	2. Navegacion plugin
	3. Secciones
		3.1 Intro
		3.2 Trayectoria
		3.3 Conferencia TED
		3.4 Obras
		3.5 Reconocimientos
		3.6 Premio Princesa de Asturias
		3.7 Otros premiados
	4. Pie
	5. Responsive
		5.1 Estilos para resoluciones mayores de 755px
			5.1.1 Comunes
			5.1.2 Encabezado
			5.1.3 Secciones
		5.2 Estilos para resoluciones mayores de 1080px
			5.2.1 Comunes
			5.2.2 Secciones

**/

/* 1. ENCABEZADO */
#main-header{padding:10px;text-align:center;}

	/* 1.1 IDIOMAS */
	#idiomas{float:left;margin-top:23px}
	#idiomas li{display:inline-block;vertical-align:top;padding-right:8px;margin-right:5px;border-right:1px solid #000;line-height:1em;font-size:.8rem;color:#000223}
	#idiomas li:last-child{border:0;padding-right:0;margin-right:0}
	#idiomas li a{text-decoration:none;color:#b3b3b3}

	/* 1.2 LOGOTIPO */
	.logo{width:140px;display:inline-block}

	/* 1.3 REDES SOCIALES */
	.compartir{float:right;margin-top:13px;}
	.compartir .item-compartir{display:inline-block;vertical-align:middle;margin-left:5px;text-align:left;}
	.compartir .item-compartir a{display:block}

/* 2. NAVEGACION PLUGIN */
	#fp-nav{opacity:1;
		-webkit-transition: all 1s ease-out;
		-moz-transition: all 1s ease-out;
		-ms-transition: all 1s ease-out;
		-o-transition: all 1s ease-out;
		transition: all 1s ease-out;
	}
	#fp-nav.off{opacity:0}

/* 3. SECCIONES */

	/* AJUSTES NAVEGACION PLUGIN */
	#fp-nav{display:none;}

	/* 3.1 INTRO */
	#intro{background:#000;color:#fff;}
	#intro .visible-phone{position:relative}
	#intro h2{margin:-60px 0 15px;font-size:2.3rem;font-style:normal;line-height:1.1em;color:#fff;text-transform:none}
	#intro h2:after{display:none}
	#intro p:not(.next){font-size:1.2rem;line-height:1.4em;}

	/* 3.2 TRAYECTORIA */
	#trayectoria{min-height:660px;padding:100px 0;}
	#trayectoria h2{padding-bottom:140px;background:transparent url(../img/css/tituloTrayectoria.jpg) no-repeat 50% 100%}

	/* 3.3 CONFERENCIA TED */
	#conferencia-ted{padding:100px 0;background:#000 url(../img/css/fondoTed.jpg) no-repeat 100% 0;background-size:cover;font-size:1.1rem;color:#fff}
	#conferencia-ted h2{margin-bottom:50px}

	/* 3.4 OBRAS*/

	#obras{padding:100px 0;background:#e5e5e4 url(../img/css/fondoObras.jpg) repeat-y 0 0}
	#obras ul.listado-obras{
		display:flex;
		flex-wrap:wrap
	}
	#obras ul.listado-obras li{width:100%;text-align:center}
	#obras ul.listado-obras li p{margin:0;padding:30px}
	#obras ul.listado-obras li *{display:block}
	#obras ul.listado-obras li span.anio{display:block;font-family:roboto;font-weight:500;font-size:1.7rem;color:#aeaeae}
	#obras ul.listado-obras li span.nombre{display:block;margin:14px 0;font-family:playfair;font-style:italic;font-size:1.2em;color:#656270;}
	#obras ul.listado-obras li a{text-decoration:none;}
	#obras ul.listado-obras li img{margin:0 auto 30px}

	/* 3.5 RECONOCIMIENTOS */
	#reconocimientos{padding:100px 0;background:#fff;text-align:center}
	#reconocimientos .logos{margin-top:60px}
	#reconocimientos .logos img{margin:0 5px 5px}

	/* 3.6 PREMIO PRINCESA ASTURIAS */
	#premio{padding:100px 0;background:#898ca0 url(../img/css/fondoPremio.png) no-repeat 95% 50%;text-align:center;color:#fff}
	#premio h2{margin:0 auto 50px;text-align:center;color:#1f1f1f}
	#premio .caja-premio{width:100%;float:left;}
	#premio .owl-dots .owl-dot span{background:#fff}
	#premio .owl-dot span:hover, #premio .owl-dot.active span{background:#1f1f1f}
	#premio .img-deco:before{right:auto;left:-10px;background:#cccdcd}

	/* 3.7 OTROS PREMIADOS */
	#otros-premiados{padding:100px 20px 60px;width:100%;float:left;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}

	#otros-premiados .item *{display:block}
	#otros-premiados .item a{text-decoration:none}

	#otros-premiados .item span{overflow:hidden;margin-bottom:20px;}
	#otros-premiados .item img{
		-webkit-transition: all 1s ease-out;
		-moz-transition: all 1s ease-out;
		-ms-transition: all 1s ease-out;
		-o-transition: all 1s ease-out;
		transition: all 1s ease-out;
	}
	#otros-premiados .item a:hover img{transform:scale(1.2)}

	#otros-premiados .item strong, #otros-premiados .item .nombre{width:80%;margin:0;line-height:1em;
		-webkit-transition: all 1s ease-out;
		-moz-transition: all 1s ease-out;
		-ms-transition: all 1s ease-out;
		-o-transition: all 1s ease-out;
		transition: all 1s ease-out;
	}
	#otros-premiados .item strong{margin-bottom:5px;font-family:tradeGothic-bold;color:#93969c;font-size:1.8rem;}
	#otros-premiados .item .nombre{font-family:opensans;font-size:1rem;color:#0e0e0e}
	#otros-premiados .item a:hover strong, #otros-premiados .item a:hover .nombre{color:#111a59}

	/* 3.8 PANTALLA VIDEOS RESPONSIVE */
	#videos{padding:50px 0;border-top:1px solid #c7c7c7;text-align:center}
	#videos .volver{margin-top:20px;text-align:center}
	#videos .volver .boton{padding:5px 30px;background:#3b80c2;text-decoration:none;border:0;color:#fff}
	#videos .jwplayer{margin:0 auto}

/* 4. PIE */
#main-footer{width:100%;float:left;border-top:1px solid #c7c7c7;padding:50px 0 40px;font-size:.9rem;color:#454545}


/* 5. RESPONSIVE */

	@media screen and (min-width: 370px) {
	    h2 {font-size: 2.5rem;}
	  }


	/* 5.1 ESTILOS PARA RESOLUCIONES MAYORES DE 650PX */
	@media screen and (min-width: 650px) {
		h2 {font-size: 3rem;}
		h2:after {margin: -20px 0 0;}

		#obras ul.listado-obras li{width:50%;}
	}

	@media (max-width: 755px) {
		#intro, #intro .fp-tableCell{height:auto !important}
	}

	/* 5.2 ESTILOS PARA RESOLUCIONES MAYORES DE 755PX */
	@media (min-width: 755px) {

		/* 5.1.1 COMUNES */
		h2 {font-size: 4.1rem;}

		.caja-ancho{margin:0 auto;}
		.btn:hover {border-color:#00aca9;color:#00aca9;}

		/* 5.1.2 ENCABEZADO */
		#main-header{padding:10px 20px}
		.logo{width:auto;margin-bottom:0;}
		#idiomas{margin-top:35px}
    	.compartir{margin-top:27px}

		#fp-nav{display: block;}

		/* 5.1.3 SECCIONES */
		#intro{background:transparent url(../img/css/fondoIntro.jpg) no-repeat 37% 100%;background-size:cover;color:#fff;}
		#intro h2{margin-bottom:30px;font-size:5.8rem}
		#intro p.next{position:absolute;bottom:150px;left:0;width:100%;text-align:center;}

		#trayectoria, #obras, #reconocimientos, #premio{padding:100px 70px}
		#trayectoria{background-position:100% 100%}

		#obras ul.listado-obras li{width:33%}

		#reconocimientos .logos img{margin:0 15px 5px}

		#premio{text-align:left}
		#premio h2{margin-bottom:100px}

		#otros-premiados{padding:100px 50px 60px;}

	}


	/* 5.3 ESTILOS PARA RESOLUCIONES MAYORES DE 1080PX */
	@media (min-width: 1080px) {

		/* 5.2.1 COMUNES */
		.copy{font-size:.8em}

		/* 5.2.2 SECCIONES */
		#intro h2{font-size:6.5rem}
		#intro p:not(.next){font-size:1.6rem;}
		#trayectoria, #obras, #reconocimientos, #premio{padding:100px 0}
		#trayectoria{background-size:auto}

		#conferencia-ted{background-size:auto}
		.boton:hover{border-color:#3b80c2;color:#3b80c2}

		#reconocimientos{background:#fff url(../img/css/fondoReconocimientos.jpg) no-repeat 100% 0;text-align:left}
		#reconocimientos h2{text-align:left}

		#obras ul.listado-obras{min-height:738px;flex-wrap:nowrap;background:transparent url(../img/css/lineaObras.gif) repeat-x 0 50%}
		#obras ul.listado-obras li{width:130px}
		#obras ul.listado-obras li:nth-child(2n){
			align-self: flex-end
		}

		#obras ul.listado-obras p a{
			display:flex;
			flex-direction: column;
			transition: opacity 500ms ease;
		}

		#obras ul.listado-obras li:before, #obras ul.listado-obras li:after {
		  background: #888;
		  content: "";
		  display:block;
		  height: 13px;
		  width: 13px;
		  margin:20px auto 0;
		  border-radius:13px;
		}
		#obras ul.listado-obras li:before{display:none}
		#obras ul.listado-obras li:nth-child(2n):after{display:none}
		#obras ul.listado-obras li:nth-child(2n):before{display:block;margin:0 auto 20px}

		#obras ul.listado-obras li p{padding:0}
		#obras ul.listado-obras li span.nombre{margin:14px -45px;min-height:56px;font-size:1.15rem}

			#obras ul.listado-obras li:nth-child(2n) .img{order:2}


		#obras ul.listado-obras p a:hover{opacity:.6}

		#premio .owl-dots{padding-left:20px;box-sizing:border-box;text-align:left}

		#otros-premiados{padding:100px 50px 60px;}
		#otros-premiados .item .nombre{font-size:1.2rem;}
	}

	@media (min-width: 1600px) {
		#otros-premiados{padding:100px 125px 60px;}
	}