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

/*
font-family: 'Merriweather', serif;
font-family: 'Josefin Slab', serif;
*/

*{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: 125%;}
body{background:#fff;font-weight:300;font-family: 'Josefin Slab', 'Arial', 'Helvetica', serif;color:#353434}

h2{position:relative;display:block;margin-bottom:50px;text-align:center;font-weight:700;font-size:1.5rem;font-family: 'Merriweather', 'Arial', serif;line-height:1em;color:#1f1f1f}
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-weight:600}

.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:.6em;font-family:opensans-light;color:#fff}

.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(171, 165, 179, .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:18px}
	#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:120px;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-weight:700;line-height:1.1em;color:#fff;text-transform:none;}
	#intro p:not(.next){font-size:1.2rem;line-height:1.4em;font-weight:600;
		text-shadow:0 0 10px rgba(0, 0, 0, 1);
	}

	/* 3.2 TRAYECTORIA */
	#trayectoria{min-height:660px;padding:100px 0;}
	#trayectoria h2{position:relative;display:inline-block;}
	#trayectoria h2:before{width:168px;height:168px;position:absolute;top:-10px;right:0;display:block;background:#f8cd51;content:"";
		border-radius: 168px;
	}
	#trayectoria h2 span{position:relative}
	#trayectoria .owl-dots .owl-dot span, #otros-premiados .owl-dots .owl-dot span{background:#888}
	#trayectoria .owl-dot span:hover, #trayectoria .owl-dot.active span, #otros-premiados .owl-dot span:hover, #otros-premiados .owl-dot.active span{background:#ede1ba}

	/* 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:#f7f3e6}
	.item-obras .obra{padding:0 20px;box-sizing:border-box}
	.item-obras .obra img{width:auto}
	.item-obras .obra .caja-obra{display:flex;margin:30px 0;text-decoration:none;color:#1f1f1f}
	.item-obras .obra .img-obra{position:relative;flex:0 0 100px}
	.item-obras .obra .img-obra img{position:relative;display:block}
	.item-obras .obra .info-obra{line-height:normal;text-align:left}
	.item-obras .obra .info-obra *{display:block}
	.item-obras .obra .info-obra strong{padding:15px;background:#fff;font-size:.9rem}
	.item-obras .obra .info-obra em{padding:15px;font-style:normal;font-weight:700;color:#bba96f}

	/* 3.5 RECONOCIMIENTOS */
	#reconocimientos{padding:100px 0;background:#000;text-align:center;color:#fff}
	#reconocimientos h2{color:#fff}
	#reconocimientos li span{display:block;font-family: 'Merriweather', 'Arial', serif;font-weight:700;color:#969173}
	#reconocimientos li strong:after{display:block;width:62px;height:1px;margin:15px auto;background:#3f3f3f;content:""}

	/* 3.6 PREMIO PRINCESA ASTURIAS */
	#premio{padding:100px 0;background:#f7f2e3 url(../img/css/fondoPremio.png) no-repeat 95% 50%;text-align:center}
	#premio h2{margin:0 auto 50px;text-align:center;color:#1f1f1f}
	#premio .caja-premio{width:100%;float:left;}
	
	
	/* 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.4rem;}
	#otros-premiados .item .nombre{font-family:opensans;font-size:.9rem;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:.8rem;color:#454545}


/* 5. RESPONSIVE */

	/* 5.1 ESTILOS PARA RESOLUCIONES MAYORES DE 650PX */
	@media screen and (min-width: 650px) {

		h2:after {margin: -20px 0 0;}
		
		.item-obras{
			display:flex;
			flex-wrap:wrap;
		}
		.item-obras .obra{width:50%;}
		.item-obras .obra .img-obra{flex:0 0 157px;height:255px}
		.item-obras .obra .img-obra:before{position:absolute;bottom:-10px;left:-10px;display:block;width:100%;height:100%;background:rgba(226, 222, 209, .7);content:""}
		.item-obras .obra .info-obra{margin-top:40px}
		.item-obras .obra .info-obra strong{font-size:1rem;:}
	}

	@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: 3.3rem;}

		.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:4.5rem}
		#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%}
		#trayectoria h2:before{right:-100px}
	
		#reconocimientos li strong:after{display:none}
		#reconocimientos li strong:before{display:block;width:62px;height:1px;margin:15px 0 15px -20px;background:#3f3f3f;content:""}
		
		#obras{background:#f7f3e6 url(../img/css/fondoObras.jpg) repeat-y 0 0}
		.item-obras .obra{width:33%;}

		#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.2 SECCIONES */
		#intro h2{font-size:4.5rem}
		#intro p:not(.next){font-size:1.7rem;}
		#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:#000 url(../img/css/fondoReconocimientos.jpg) no-repeat 0 0;background-size:auto 100%;text-align:left}
		#reconocimientos h2{margin-bottom:100px}
		#reconocimientos ul{display:flex;flex-wrap:wrap;}
  		#reconocimientos li{width:50%;padding:0 15px 50px 0;text-align:left;box-sizing:border-box}
  		#reconocimientos .copy{left:10%;right:auto}

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

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

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