/* ===========================================
	Estilo CSS de rael.es por Rael del Fraile
   =========================================== */

/* --------------------
	HTML, General
   -------------------- */

*, html, body { box-sizing:border-box; }

img { border:0; }

p {margin:0; padding:0 0 1em 0;}

html, body {
/*	font-family:'Acme'; de google*/
	height:100%;
	min-height:800px;
	margin:0; padding:0; border:0;
	background-color:#FFFFFF;
}

/* --------------------
	Tipografías
   -------------------- */


h1 {
	font-family: 'rael', arial; font-weight:normal;
	letter-spacing:-0.05em;
	word-spacing:-0.17em;
	line-height:102px;
	font-size:102px;
	color:#22485c; /* old agrisado 33444a; anterior a5a4e1; old iconos aeadeb; primer 9897df;*/
	text-indent:-8px;
}

h2, h3, .botones-up, .ventana-head, .pophead-cuerpo, .padre-contenedor-cajas {
	font-family: 'dimbo', arial;
}

.ventana, .parent-miniaturas, .parent-miniaturas-ilustracion, .parent-miniaturas-3d, .parent-miniaturas-animacion, .parent-miniaturas-grafica, .ventana-pie, .contacto-contenedor, .contacto-boton-enviar, .contacto-campos, .contacto-mensaje, .cv-contenedor, .cv-menu  {
	font-family: 'dimbo', arial;
}

/* Tipografía de la barra de título del POP-UP de las miniaturas, parte de la clase .mfp-bottom-bar de la hoja jquery-magnific-popup.css  */
.mfp-bottom-bar {
	color: #f4f4f4;
	font-family:'dimbo', verdana; font-size:17px;
}

/* contador derecha */
.mfp-counter {
	font-size:16px;
	color: #ccc;
	right: -20%;
	margin-right: 125px;
}

/* -- Reducir espaciado de texto para que no realice SEO -- */
.txt-no-seo {
	word-spacing:0.15em;
	letter-spacing:-0.15em;
}


/* --------------------
	Header
   -------------------- */

.padre-header {
	float:left;
	min-width:1024px;
	width:100%;
	height:25%; /*orig 26.76 */
	min-height:190px;
}

.header-1, .header-2 {
	width:1024px;
	height:50%;
	position:relative;
	margin-left:auto; margin-right:auto;
}

.header-textos {
	position:absolute;
	bottom:0px; /* opcion centrado: top:50%; margin-top:-50px; */
	width:1024px;
	height:100px;
	display:block;
	text-align:center;
	font-weight:inherit;
	margin-left:-8px; /* -8 para centrar con pelotitas*/
}

h1, h2, h3 {
	display:inline;
	margin:0;
	float:left;
	width:1024px;
}


h1 {
	height:75px; /* orig con h3 activo: 50px, sin él 75 */
/*	text-indent:100%; overflow:hidden; white-space:nowrap; background:url("../img/h1-nombre.gif") center bottom no-repeat;*/
/*	text-shadow:#aeadeb 1px 0px 0px;*/
}

.h1-imagen {
	background:url("../img/h1-nombre.gif") center bottom no-repeat;
	float:left;
	height:75px; width:100%;
/*	margin:-75px auto 0 auto;*/
}

h2 {
	font-size:27px; /* titulos anteiores 26 */
	letter-spacing:0.02em;
	line-height:35px;
	color:#22485c;/* old agrisado 33444a; anterior a5a4e1; iconos aeadeb; anterior a1a7ee; */
	height:25px;
	font-weight:normal;
	transform: scaleY(1.1);
	-webkit-transform: scaleY(1.1);
	-moz-transform: scaleY(1.1);
	-o-transform: scaleY(1.1);
	-ms-transform: scaleY(1.1);
}

h3 {
	font-size:19px;
	letter-spacing:0.06em;
	line-height:33px;
	color:#b6bbf0;
	height:25px;
}


/* -- Espacios extra sobre cálculo inicial de altura, para separar más. Poner o quitar todos estos en grupo -- */

/* Se recolocan, sumando px por cada uno de ellos, y saliendo por encima de los espacios originales 
h1, h2, h3 { margin-top:4px; 
}

.header-2 { margin-top:10px; }
.padre-header { margin-bottom:5px; }

*/


/* -- /fin espacios extra -- */



/* --------------------
	Botones Up
   -------------------- */

.botones-up {
	z-index:5; /* Por encima de GIF espera, por debajo de Fade */
	width:1024px; height:90px;
	position:absolute;
	bottom:0px; /* opcion centrado: top:50%; margin-top:-45px; */
	margin-bottom:5px;
}

.botones-up ul{
	list-style-type:none;
	text-align:center;
	margin: 0 0 0 -4px; /*-4ps para centrar a cabeza de pj */
}

.botones-up li{
	will-change: transform, opacity; /* Evitar parpadeos en Firefox */
	display:inline-block; text-align: center;
	margin-right:60px;
	-ms- filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9, M12=0, M21=0, M22=0.9, SizingMethod='auto expand')"; /* IE8 */
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9, M12=0, M21=0, M22=0.9, SizingMethod='auto expand'); /* IE6 y 7 */ 
/*	opacity:1;
	-moz-opacity:1;*/
	filter: alpha(opacity=100); /* IE8 */
/* si span seleccionable: */
	height:115px; cursor:pointer;
}

.botones-up li:hover { /* En IE no va scale, usamos opacidad para su hover */
	-ms- filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')"; /* IE8 */
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand'); /* IE6 y 7 */ 
/*	opacity:0.8;
	-moz-opacity: 0.8;*/
	filter: alpha(opacity=80); /* IE8 */
}

.botones-up li span  {
	pointer-events:none;
	-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
	display: block;
	position:relative;
	line-height:90px;
/*	font-weight:bold;*/
/* visible: */
	top:50px;
    width:90px;
	text-align:center;white-space:nowrap; overflow:visible;
	margin-left:0px;
	font-size:19px; */
/* oculto:
	top:35px;
    width:90px;
	margin-left:0px;
	font-size:7px; */
/*	font-size:18px; cuando scale 0.3 / 1.5 */
	letter-spacing:0.03em;
	color:#2f97cf; /* old bbb3e7; primer c5bbe0; */
	text-align: center;
/*	transform:scale(0.3);
	-webkit- transform: scale(0.3);
	-moz- transform:scale(0.3);
	-o-transform: scale(0.3);
	-ms-transform: scale(0.3);
/*	opacity:0;
	-moz-opacity:0;
	filter: alpha(opacity=0); */
}

.botones-up li:hover span  {
	top:65px;
	width:120px;
	margin-left:-15px;
	font-size:33px;/*cuando oculto: 27px;*/
/*	transform:scale(1.5);
	-webkit- transform: scale(1.5);
	-moz- transform:scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);*/
/*	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100); */
}

.boton-up-1, .boton-up-2, .boton-up-3 {
	background-size:85%;
	cursor:pointer;
	float:left;
	width:90px; height:90px;
	background-position:center; background-repeat:no-repeat;
/*	background-size: 80% auto;*/
	}

.botones-up div { background-size:85%; }
/*.botones-up div:hover { background-size:100%; } esto hacía el efecto en hover sobre el div, ahora lo hace en hover sobre el li completo (incluido span que sobresale) */
.botones-up li:hover div  { background-size:100%; }

.boton-up-1 {background-image:url("../img/boton-film.gif");}
.boton-up-1:hover {background-image:url("../img/boton-film-anim.gif");}

.boton-up-2 {background-image:url("../img/boton-folios.gif");}
.boton-up-2:hover {background-image:url("../img/boton-folios-anim.gif");}

.boton-up-3 {background-image:url("../img/boton-mail.gif");}
.boton-up-3:hover {background-image:url("../img/boton-mail-anim.gif");}

.botones-up div, .botones-up li span {
	transition: all 0.22s ease-in-out;
	-webkit-transition: 0.22s ease-in-out;
	-moz-transition: all 0.22s ease-in-out;
	-o-transition: all 0.22s ease-in-out;
	-ms-transition: all 0.22s ease-in-out;
}

/* --------------------
	Cajas con personaje
   -------------------- */

.padre-contenedor-cajas {
	float:left;
	min-width:1024px;
	min-height:590px; /* 520 + 40 margen */
	width:99%;
	height:75%; /* Orig 73.24 */
	position:relative;
	margin-top:10px;
	margin-bottom:20px;
/*	border: solid #900;*/
}
	
.contenedor-cajas {
	width:1026px; height:520px;
	position:absolute;
	top:45%;
	margin-top:-260px; /* 520 : 2 */
	left:50%;
	margin-left:-512px; /* 1024 : 2 */
	background: white url("../img/rael-animado.gif") center bottom no-repeat;
}

.area-cajas-up {
	float:left;	width:1024px; height:264px;
}

.area-cajas-down {
	float:left;	width:1024px; height:256px;
	background: url("../img/cajas-close.png") center bottom no-repeat;
}


/* ----- Cajas -----*/

.caja {
	width:256px; height:256px;
	float:left;
	background-image:url("../img/cajas-close.png");
	background-repeat:no-repeat;
	cursor:pointer;
	}

/* id individual */
#caja1 { background-position: 0 0; }
#caja2 { background-position: -256px 0 ; }
#caja3 { background-position: -512px 0 ; }
#caja4 { background-position: -768px 0 ; }


.cajas-anim, .cajas-open {
	width:256px; height:256px;
	float:left;
	background-image:url("../img/cajas-blur.png");
	background-repeat:no-repeat;
	cursor:pointer;
}


/* ----- Cajas Tíutlos ----- */


.caja-titulo {
	color: #333;
	font-size: 30px;
	text-align: center;
	text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
/*	text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4),
	0px 0px 20px rgba(0, 0, 0, 0.4);*/
	position:relative;
	transition: all 0.6 ease-in-out;
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	-webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -o-user-select:none; user-select:none;

}

#caja1:hover .caja-titulo, #caja2:hover .caja-titulo, #caja3:hover .caja-titulo, #caja4:hover .caja-titulo {
	color:#2e5165; /* old gris 666;*/
	text-shadow: 0px 1px 7px rgba(255, 225, 255, 0.3);
/*	text-shadow: 0px 1px 3px rgba(200, 225, 255, 0.2),
	0px 0px 20px rgba(0, 0, 0, 0);*/
}

/*#caja1:hover .caja-titulo {	color:#EE2; }
#caja2:hover .caja-titulo {	color:#49EBFF; }
#caja3:hover .caja-titulo {	color:#FF5252; }
#caja4:hover .caja-titulo {	color:#FFB149; }*/
	
#caja1 .caja-titulo, #caja1 .caja-subtitulo {
	top:130px;
	left:-30px;
	transform: matrix(1, 0.08, 0, 1.5, 0, 0);
}

#caja2 .caja-titulo, #caja2 .caja-subtitulo {
	top: 145px;	
	transform: matrix(1.2, 0.04, 0, 1.6, 0, 0);
}

#caja3 .caja-titulo, #caja3 .caja-subtitulo {
	top: 140px;
	left: 7px;
	transform: matrix(1, -0.03, 0, 1.5, 0, 0);
}

#caja4 .caja-titulo, #caja4 .caja-subtitulo {
	top:130px;
	left:30px;
	transform: matrix(0.9, -0.06, 0, 1.5, 0, 0);
}

.caja-subtitulo {
	margin-top: 45px;
	color:#2f97cf; /* old aeadeb; primer 83a6ed; */
	font-size: 12px;
	letter-spacing:0.06em;
	text-align: center;
/*	text-shadow: 0px 0px 3px rgba(90, 190, 255, 0.4);*/
	opacity:0;
	-moz-opacity:0;
	filter: alpha(opacity=0); /* IE8 */	
	transition: all 0.3 ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -o-user-select:none; user-select:none;
	pointer-events: none;
}

#caja1:hover .caja-subtitulo, #caja2:hover .caja-subtitulo, #caja3:hover .caja-subtitulo, #caja4:hover .caja-subtitulo {
	margin-top: -50px;
	font-size: 19px;
	opacity:1;
	-moz-opacity:1;
	filter: alpha(opacity=100); /* IE8 */	
}


/* --------------------
	Carga de Fuentes
   -------------------- */

@font-face {
    font-family: 'rael';
    src: url('fonts/dimbo/rael-webfont.eot');
    src: url('fonts/dimbo/rael-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/rael/rael-webfont.woff2') format('woff2'),
         url('fonts/rael/rael-webfont.woff') format('woff'),
         url('fonts/rael/rael.ttf') format('truetype'),
         url('fonts/rael/rael-webfont.svg#raelregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dimbo';
    src: url('fonts/dimbo/Dimbo-Regular-webfont.eot');
    src: url('fonts/dimbo/Dimbo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/dimbo/Dimbo-Regular-webfont.woff2') format('woff2'),
         url('fonts/dimbo/Dimbo-Regular-webfont.woff') format('woff'),
         url('fonts/dimbo/Dimbo-Regular-webfont.ttf') format('truetype'),
         url('fonts/dimbo/Dimbo-Regular-webfont.svg#dimboregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'stanberry';
    src: url('fonts/stanberry/Stanberry-webfont.eot');
    src: url('fonts/stanberry/Stanberry-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/stanberry/Stanberry-webfont.woff2') format('woff2'),
         url('fonts/stanberry/Stanberry-webfont.woff') format('woff'),
         url('fonts/stanberry/Stanberry-webfont.ttf') format('truetype'),
         url('fonts/stanberry/Stanberry-webfont.svg#stanberry') format('svg');
    font-weight: normal;
    font-style: normal;
}


/*

@font-face {
    font-family: 'coolvetica';
    src: url('fonts/coolvetica/coolvetica-webfont.eot');
    src: url('fonts/coolvetica/coolvetica-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/coolvetica/coolvetica-webfont.woff2') format('woff2'),
         url('fonts/coolvetica/coolvetica-webfont.woff') format('woff'),
         url('fonts/coolvetica/coolvetica-webfont.ttf') format('truetype'),
         url('fonts/coolvetica/coolvetica-webfont.svg#coolveticaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'square';
    src: url('fonts/square721/Square721BT-SQR721N-webfont.eot');
    src: url('fonts/square721/Square721BT-SQR721N-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/square721/Square721BT-SQR721N-webfont.woff2') format('woff2'),
         url('fonts/square721/Square721BT-SQR721N-webfont.woff') format('woff'),
         url('fonts/square721/Square721BT-SQR721N-webfont.ttf') format('truetype'),
         url('fonts/square721/Square721BT-SQR721N-webfont.svg#square721_btroman') format('svg');
    font-weight: normal;
    font-style: normal;
}

*/


/* --------------------
	Precargas
   -------------------- */

.precargas { width:1px; height:1px; }
.pre-boton-1 {background-image:url("../img/boton-film-anim.gif");}
.pre-boton-2 {background-image:url("../img/boton-folios-anim.gif");}
.pre-boton-3 {background-image:url("../img/boton-mail-anim.gif");}
.pre-cajas-anim {background-image:url("../img/cajas-blur.png");}