/* Autor: René Hidalgo */
@import url(fuentes/fuentes.css);
html, body {width:100%; height:100%;} .clr {clear:both; float:none;}
html,body,form,div,p,blockquote,span,iframe,img,a,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,object,fieldset,table,td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, main, section {display:block;}
table {border-collapse:collapse; border-spacing:0;} body::selection {background:#FFF; color:#000;}
body {font:normal 100%/1.4 a, sans-serif; background:#000; color:#FFF;}
a {color:inherit; text-decoration:none;} a:active, a:hover {outline:0;} li {list-style:none outside none;}
img, embed, iframe, object, video {max-width:100%; margin:1em 0; height:auto; box-sizing:border-box; vertical-align: middle;}
p>embed, p>iframe, p>object, p>video {margin:1em 0 0;}

.hslide {position:relative; min-height:100%; background:#000 none center bottom no-repeat; background-size:cover; box-sizing:border-box; padding:2% 5%;}
.xhslide {display:none;}
#s1 {background-image:url(sl1.jpg);}
#s2 {background-image:url(sl2.jpg);}
#s3 {background-image:url(sl3.jpg);}
#s4 {background-image:url(sl4.jpg);}
#s5 {background-image:url(sl5.jpg);}

#s1 {text-align:center;}
#s1 header {position:absolute; top:50%; left:0; right:0;}
#s1 h1 {font-size:12em; font-size:10vw; text-indent:-999em; background:url(AusenciaS.png) center no-repeat; background-size:contain;}
#s1 h2 {font-size:1.5em; font-weight:500; opacity:.7; margin-top:.3em; padding:0 2em;}
#s1 a {position:absolute; bottom:1em; left:50%; transform:translate(-50%,0); transition:.4s opacity ease; opacity:.5;}
#s1 a:hover {opacity:1;}
#s1 svg {width:4em; height:2em;}

#s2 h1 {font:400 16em/1.2 h; font-size:13vw; box-sizing:border-box;}
#s2 h1 strong {display:block;}
#s2 h1 .t25 {font-size:25%;}
#s2 h1 .t30 {font-size:30%;}
#s2 h1 .t75 {font-size:75%;}
#s2 .cita {font-size:150%; position:absolute; bottom:4em; box-sizing:border-box; max-width:40em;}

#s3 h1 {font:400 4em/1.2 h; padding-top:1em;}
#s3 .divs {display:table; width:100%;}
#s3 .divs > * {display:table-cell;}
#s3 p:not(.cita) {font-size:170%; background:rgba(0,0,0,.3); padding:0 .5em; margin:0 -.5em; max-width:25em; text-align:justify;}
#s3 .cita {vertical-align:middle; box-sizing:border-box; text-align:center; font-size:150%; line-height:1.6; text-shadow:.1em .15em .1em rgba(90,90,90,.7);}
#s3 .cita>span {display:inline-block; max-width:20em; box-sizing:border-box; padding:0 1em;}

#s4 h1 {font:400 4em/1.2 h; padding-top:1em; margin:0 0 .5em;}
#s4 p {font-size:180%; margin:0 0 1.5em; text-align:justify; max-width:52em;}
#s4 p {font-size:180%; margin:0 0 1.5em; text-align:justify; max-width:52em;}

#s5 p {font-size:180%; text-align:center;}
#s5 p:nth-child(1) {padding-top:3em; margin:0 auto; max-width:47em;}
#s5 p:nth-child(2) {padding:3em 0 2em; color:#CCC; font-size:150%;}
#s5 .forma {margin:0 auto 0; max-width:20em; position:relative;}
#s5 label,input {display:block; width:100%; color:#AAA; box-sizing:border-box;}
#s5 .btn {text-transform:uppercase; background:#AAA; color:#FFF; margin-top:.5em; transition:.3s background ease;}
#s5 .btn:hover {background:#333; cursor:pointer;}
#s5 input {font:inherit; border:0; color:#000; padding:.2em .3em;}
#s5 .mnsj {width:100%; padding-top:.5em; text-align:center; position:absolute; top:100%; left:50%; transform:translate(-50%,0);}

.controles {position:fixed; right:1em; top:50%; transform:translate(0,-50%); display:none;}
.controles i {display:block; cursor:pointer; margin:1em 0; width:1em; height:2em; background:#FFF; box-shadow:0 0 .5em #FFF; transition:.4s opacity ease; opacity:.5; border-radius:.4em;}
.controles i:hover {opacity:.75;}
.controles i.activo {opacity:1;}

footer {transform:translate(0,-100%);}
footer > ul {display:table; width:100%;}
footer > ul > li {display:table-cell; text-align:center; vertical-align:middle; width:16%;}
footer > ul > li:nth-child(3) {width:36%;}
footer > ul > li:nth-child(4) svg {width:10em;}
footer > ul > li > a {width:100%;}
footer svg {width:7em; max-width:80%;}
footer .contacto {font-size:125%;}
footer .contacto h2 {font-size:120%; font-weight:normal; text-transform:uppercase;}

aside {position:fixed; right:4em; top:2em;}
aside a {width:2em; height:2em; margin-left:.5em;}
aside svg {width:2em; height:2em;}
body > svg {display:none;}

@media (min-width:1200px) {
	.hslide {width:100%; height:100%;}
	.js .hslide {position:fixed; left:-100%; right:0; top:0; transition:.1s opacity ease; opacity:0;}
	.hslide.activo {left:0; opacity:1; transition-duration:.6s;}
	.hslide > * {opacity:0; transition:.1s opacity ease;}
	.hslide.activo > * {opacity:1; transition-duration:1s; transition-delay:.5s;}
	.controles {display:block;}
	footer {position:fixed; left:0; right:0; bottom:-100%; transition:.1s bottom cubic-bezier(0,1,0,1); transform:none;}
	#s5.activo~footer {bottom:0; transition-duration:1.5s;}
}

@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi) {
	body {font-size:150%;}
	.controles {font-size:200%;}
}

@media screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1024px), screen and (min-resolution: 144dpi) and (max-width: 1024px) {
	#s2 {padding-top:10%;}
	#s2 h1 {font-size:20vw;}
	#s1 svg {width:6em; height:3em;}
	aside a {margin-left:1em;}
	aside svg {width:3em; height:3em;}
}

@media screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 768px), screen and (min-resolution: 144dpi) and (max-width: 768px) {
	#s5 p {font-size:130%;}
}

@media (min-aspect-ratio:5/2) {
	#s1 header {transform:translate(0,-50%);}
}

@media (min-aspect-ratio:11/5) {
	#s2 .cita {right:0; max-width:65%;}
}

@media (max-width:1770px) {
}

@media (min-width:1800px) {
	#s1 h2 {font-size:1.25vw;}
}

@media (max-width:1200px) {
	#s3 .divs, #s3 .divs > * {display:block;}
	#s3 .cita {text-align:left; margin-top:1em;}
	#s3 .cita>span {max-width:none; padding:0;}
}

@media (max-width:1024px) {
	.controles {right:1%;}
	.controles i {width:.5em; height:1em;}
}

@media (max-width:768px) {
	#s3 h1 {font-size:150%;}
	.home #s3 p {font-size:100%; line-height:1.2;}
	#s4 h1 {font-size:150%;}
	#s4 p {font-size:100%; line-height:1.2;}
	aside {right:1em; top:1em;}
}

@media (max-width:640px) {
}

@media (max-width:480px) {
	#s1 h2 {font-size:1em;}
}

@media (max-width:320px) {
	body {opacity:.8;}
}