@charset "UTF-8";
/* CSS Document */



/* 

SINTAXIS MEDIA QUERIES:

https://developer.mozilla.org/es/docs/CSS/Media_queries




RESOLUCIONES:


Restando de alto por navegador:
- PC: 	125  
-iPod: 	108
-tablet	121


iPod / iPhone (Vertical)
320 x 372	(iPod 4g 320 x 480 RETINA -->	640 x  960 píxeles a 326 puntos por pulgada) 
320 x 460	(iPod 5g 320 x 568 RETINA -->	640 x 1136 píxeles a 326 puntos por pulgada) 
375 x 559	(iPhone6 4,7  375 x 667 RETINA --> 	 750 x 1334 píxeles a 326 puntos por pulgada)  
414 x 628	(iPhone6 5,5  414 x 736 RETINA --> 	1080 x 1920 píxeles a 401 puntos por pulgada) iPhone 6 Plus

Samsung Tab
528 x 839	(528 x 960)


iPad / Tablet:
H: 1024 x 660 (iPad 1024 x 768)
V:  768 x 916 (iPad  768 x 1024)
H: 1024 x 479 (Tablet 1024 x 600)
V:  600 x 903 (Tablet  600 x 1024)


PC:
1024 x 643 (notebook 1024x768)
1280 x 643 (notebook 1280x768)
1366 x 643 (notebook 1366x768)




Algunos autores recomiendan optimizar estos anchos de pantalla: 

320 px 
480 px 
600 px 
768 px 
900 px 
1200 px

*/




nav, #nav{
	height:0px;
	overflow:hidden;
	background-color: #006598; /* Default (Azul petroleo) */
	background-position: left center;
	background-repeat:repeat;
	background-size: cover;
	/* 
	-webkit-filter: grayscale(.6) blur(20px);
	-moz-filter: grayscale(.6) blur(20px);
	-o-filter: grayscale(.6) blur(20px);
	-ms-filter: grayscale(.6) blur(20px);
	filter: grayscale(.6) blur(20px);
	*/
}






/* ----------------------- BARRA NAV ------------------------- */


body.slide_0{
	background-color:#30393C;
}
body.slide_0{
	background-color:#222;
}
body.slide_2{
	background-color:#DDD;
}
body.slide_3{
	background-color:#00396C;
}
body.slide_4{
	background-color:#666;
}
body.slide_4{
	background-color:#222;
}



body.slide_0 nav, 
body.slide_0 #nav{
	background-color: #006598;
	-webkit-filter: none;
}
body.slide_1 nav, 
body.slide_1 #nav{
	background-color: #101619;
	-webkit-filter: none;
}
body.slide_2 nav, 
body.slide_2 #nav{
	background-color: #EEEEEE;
	-webkit-filter: none;
}
body.slide_3 nav, 
body.slide_3 #nav{
	background-color: #003753;
	-webkit-filter: none;
}
body.slide_4 nav, 
body.slide_4 #nav{
	background-color: #67697F;
	-webkit-filter: none;
}
body.slide_5 nav, 
body.slide_5 #nav{
	background-color: #30393C;
	-webkit-filter: none;
}






body.slide_0 nav, 
body.slide_0 #nav{
	background-image: url(../img/Slide1_barra.jpg);
}
body.slide_1 nav, 
body.slide_1 #nav{
	background-image: url(../img/Slide2_barra.jpg);
}
body.slide_2 nav, 
body.slide_2 #nav{
	background-image: url(../img/Slide3_barra.jpg);
}
body.slide_3 nav, 
body.slide_3 #nav{
	background-image: url(../img/Slide4_barra.jpg);
}
body.slide_4 nav, 
body.slide_4 #nav{
	background-image: url(../img/Slide5_barra.jpg);
}


	/* Cargo de fondo, la misma imágen que se cargó ! YA NO! Voy a cargar solo una, de 640 (a lo sumo dos distintas)

html.img_640 body.slide_0 nav, 
html.img_640 body.slide_0 #nav{
	background-image: url(../img/Slide1_640.jpg);
}
html.img_640 body.slide_1 nav, 
html.img_640 body.slide_1 #nav{
	background-image: url(../img/Slide2_640.jpg);
}
html.img_640 body.slide_2 nav, 
html.img_640 body.slide_2 #nav{
	background-image: url(../img/Slide3_640.jpg);
}
html.img_640 body.slide_3 nav, 
html.img_640 body.slide_3 #nav{
	background-image: url(../img/Slide4_640.jpg);
}
html.img_640 body.slide_4 nav, 
html.img_640 body.slide_4 #nav{
	background-image: url(../img/Slide5_640.jpg);
}



html.img_1024 body.slide_0 nav, 
html.img_1024 body.slide_0 #nav{
	background-image: url(../img/Slide1_1024.jpg);
}
html.img_1024 body.slide_1 nav, 
html.img_1024 body.slide_1 #nav{
	background-image: url(../img/Slide2_1024.jpg);
}
html.img_1024 body.slide_2 nav, 
html.img_1024 body.slide_2 #nav{
	background-image: url(../img/Slide3_1024.jpg);
}
html.img_1024 body.slide_3 nav, 
html.img_1024 body.slide_3 #nav{
	background-image: url(../img/Slide4_1024.jpg);
}
html.img_1024 body.slide_4 nav, 
html.img_1024 body.slide_4 #nav{
	background-image: url(../img/Slide5_1024.jpg);
}



html.img_1366 body.slide_0 nav, 
html.img_1366 body.slide_0 #nav{
	background-image: url(../img/Slide1_1366.jpg);
}
html.img_1366 body.slide_1 nav, 
html.img_1366 body.slide_1 #nav{
	background-image: url(../img/Slide2_1366.jpg);
}
html.img_1366 body.slide_2 nav, 
html.img_1366 body.slide_2 #nav{
	background-image: url(../img/Slide3_1366.jpg);
}
html.img_1366 body.slide_3 nav, 
html.img_1366 body.slide_3 #nav{
	background-image: url(../img/Slide4_1366.jpg);
}
html.img_1366 body.slide_4 nav, 
html.img_1366 body.slide_4 #nav{
	background-image: url(../img/Slide5_1366.jpg);
}



html.img body.slide_0 nav, 
html.img body.slide_0 #nav{
	background-image: url(../img/Slide1.jpg);
}
html.img body.slide_1 nav, 
html.img body.slide_1 #nav{
	background-image: url(../img/Slide2.jpg);
}
html.img body.slide_2 nav, 
html.img body.slide_2 #nav{
	background-image: url(../img/Slide3.jpg);
}
html.img body.slide_3 nav, 
html.img body.slide_3 #nav{
	background-image: url(../img/Slide4.jpg);
}
html.img body.slide_4 nav, 
html.img body.slide_4 #nav{
	background-image: url(../img/Slide5.jpg);
}
 	
	*/
	
	
	
	
	
	

/* ----------------------- BARRA NAV ------------------------- */










nav, #nav{
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	
	top:0px;
}

#supersized,
#supersized li{
	-webkit-transition: top 1s;
	-moz-transition: top 1s;
	-o-transition: top 1s;
	transition: top 1s;
	
	top:0px;
}




span.salto{
	display:block;
}
span.linea{
	display:block;
	/* padding: 4px 0; */
}


#mostrar_menu{
	display:none;
}






.cajaSlide{
	font-size: 12px;
}











/* CAMBIO ESTOS DEFAULTS (COmprobar que funcionen en la vista general y pasarlos a estilos.css ) */

#container-map{
	/* position:absolute !important;
	top:0 !important;
	bottom:auto !important;
	margin-top: 140px !important;
	
	position:absolute !important;*/
	height:46%;
	height:46vh;
	
	bottom: 14vh;
	bottom: 20%;
	bottom: 20vh;
}

#container-map #datos_contacto {
	height:130px;
	height:22vh;
	margin-top: -130px;
	margin-top: -22vh;
}

#container-map #datos_contacto ul li div.icono {
	height: 50px;
	height: 7vh;
	margin-bottom: 20px;
	margin-bottom: 2vh;
}
#container-map #datos_contacto ul li div.icono img {
	height: 100%;
	height: 7vh;
}

#container-textos-3 .cajaSlide .ver_mas{
	display:none;
}









@media (min-width: 1280px) {
	
	.cajaSlide{
		font-size: 13px;
	}
	
}






@media (min-width: 1280px) and (min-height: 700px) {
	
	ul#slide-list {
		margin-top: 6px;
	}
	.fijo-right{
		margin-top: 16px;
	}
	
}






@media (min-width: 1320px) {
	
	ul#slide-list li a {
		font-size: 15px;
		line-height: 15px;
	}
	
}






@media (min-width: 1380px) {
	
	ul#slide-list li a {
		font-size: 16px;
		line-height: 16px;
	}
	
}






@media (min-width: 1280px) and (min-height: 800px) {
	
	.cajaSlide,
	#container-textos-3 .cajaSlide,
	#container-textos-4 .cajaSlide{
		font-size: 13px;
		line-height: 22px;
	}
	#container-textos-3 .cajaSlide{
		line-height: 22px;
	}

	
}






@media (min-width: 1024px) and (max-height: 700px) {
	
	#thumb-tray.fijo ,
	#thumb-tray.fijo ul,
	#thumb-tray.fijo ul#thumb-list li,
	#thumb-tray.fijo ul#thumb-list li img{
		height: 18vh;
		min-height: 18vh;
	}
	
	#container-map,
	body.thumb_fijo #container-map{
		bottom: 18%;
		bottom: 18vh;
	}
	
}








@media (max-width: 920px) {

	#supersized li img,
	#supersized li.prevslide img, 
	#supersized li.activeslide img {
		width: 920px !important;
		height: auto !important;
		position: absolute;
		display: inline-block;
		left: 50% !important;
		margin-left: -460px !important;
	}
	
}





/* @media (min-width: 1024px) and (max-width: 1100px) and (max-height:559px){ */
@media (max-width: 1060px) and (orientation: landscape){
	
	ul#slide-list li {
		margin: 0 8px;
		padding: 4px 4px;
	}
	
	.fijo-right{
		margin-right: 30px;
	}
	
}






/* @media (min-width: 1024px) and (max-width: 1100px) and (max-height:559px){ */
@media (max-width: 990px) and (orientation: landscape){
	
	ul#slide-list li {
		margin: 0 6px;
		padding: 4px 2px;
	}
	
	.fijo-right{
		margin-right: 16px;
	}
	
}









@media screen and (max-width: 920px), 
screen and (max-width: 1024px) and (min-height:640px), 
screen and (orientation: portrait){
	
	
	/* ------------ Menú ------------ */
	nav, #nav{
		height: 40px;
	}
	#supersized,
	#supersized li{
		top:40px;
	}
	body.slide_5 #supersized li {
		border-top: 6px solid #EEE;
	}
	
	body.slide_0 .logoPower,
	body.slide_5 .logoPower {
		background-image: url(../img/sprite_2.png);
	}
	
	#mostrar_menu{
		display: block;
		margin: 2px;
		position: fixed;
		top: 2px;
		right: 4px;
		width: 44px;
		height: 28px;
		border: 1px solid #E39F00;
		z-index: 9;
	}
	#mostrar_menu a{
		display: inline-block;
		position: relative;
		width: 98%;
		height: 98%;
		margin: 1%;
		background-color: #000;
		background: rgba(0, 0, 0, 0.2);
	}
	#mostrar_menu a span {
		display: block;
		width: 80%;
		height: 5px;
		margin: auto;
		margin-top: 3px;
		background: #E39F00;
		opacity: 0.8;
	}
	
	body.slide_2 #mostrar_menu a {
		background: rgba(150, 150, 150, 0.1);
	}
	
	.fijo-right{
		right:auto;
		left:0;
		margin-top: 2px;
		margin-right:auto;
		margin-left: 20px;
		/* float: left;
		margin-top: -36px;*/
	}
	
	
	ul#slide-list {
		padding: 0;
		float: right;
		position: fixed;
		left: auto;
		right: 52px;
		top: 8px;
		margin-left: 0 !important;
	}
	ul#slide-list.active {
		padding: 20px;
		padding-top: 56px;
		right: 0px;
		top: 0px;
		background:#111111;
		background:rgba(0, 0, 0, 0.6);
	}
	
	ul#slide-list li {
		float: none;
		display:none;
	}
	ul#slide-list.active li {
		display:block;
	}
	
	/* Reseteo, porque en este slide era texto negro*/
	body.slide_2 ul#slide-list.active li.current-slide {
		border: 1px solid #FFF;
		color: #FFF;
	}
	body.slide_2 ul#slide-list.active li a {
		color: #FFF;
		text-shadow: 0 0 20px black;
	}
	
	
	ul#slide-list li.slide-link-5{
		display:inline-block;
	}
	ul#slide-list li.slide-link-5.current-slide {
		background-color:rgba(255, 255, 255, 0.2);
	}
	ul#slide-list li.slide-link-5.current-slide a {
		color: #FFFFFF;
	}
	
	
	/* ------------ Menú ------------ */
	
	
		/* MODIFICACIONES AL BOTÓN "CONNECT" */
	
	ul#slide-list li.slide-link-5 {
		margin-top: -4px;
		padding: 7px 30px 7px 2px;
		background-color: #333;
		background-color: rgba(0, 0, 0, 0.4);
	}
	ul#slide-list li.slide-link-5 a {
		padding-left: 6px;
	}
	
	body.slide_2 ul#slide-list li a{
		text-shadow: 0 0 20px black;
	}
	body.slide_2 ul#slide-list li.slide-link-5 {
		background-color: #EEE;
		background-color: rgba(150, 150, 150, 0.1);
	}
	body.slide_2 ul#slide-list li.slide-link-5 a{
		text-shadow: none;
	}
	
		/* ACTIVO: RESET ! */
	ul#slide-list.active li.slide-link-5 {
		margin-top: 0;
		padding: 4px 30px 4px 2px;
	}
		/* En lugar de volver a 0 el padding para el item 5, lo cambio para todas, porque queda mejor*/
	ul#slide-list.active li a {
		padding: 0 6px;
	}
	
}








@media screen and (max-width: 920px) {
	
	
	
	body.slide_0 #container-textos-1 .cajaSlide .encuadro {
		border: 1px solid #FFFFFF;
	}
	
	body.slide_0 #container-textos-1 .cajaSlide,
	body.slide_1 #container-textos-2 .cajaSlide,
	body.slide_3 #container-textos-4 .cajaSlide,
	body.slide_4 #container-textos-5 .cajaSlide {
		position: absolute;
		left: 0 !important;
		right: 0 !important;
		margin: 0 !important;/* margin: 0 0 40px 0 !important;*/
		text-align: left !important;
		background: rgba(0, 0, 0, 0.5);
		padding: 20px;
		color: white !important;
		
		top: 46vh !important;
		bottom: 18vh !important;
	}
	
	
	body.slide_2 #container-textos-3 .cajaSlide{
		left: 56% !important;
		/* right: 40px !important;*/
		right: 4%;
	}
	
	#supersized li.slide-2 img,
	#supersized li.slide-2.prevslide img, 
	#supersized li.slide-2.activeslide img {
		width: 1000px !important;
		margin-left: -500px !important;
	}
	
	
	.cajaSlide .encuadro{
		border: 1px solid #EEEEEE !important;
	}
	#container-textos-3 .cajaSlide .encuadro {
		border: 1px solid #444 !important;
	}
	
	.cajaSlide.responsive span.salto{
		display:inline;
	}
	
	body.slide_0 #container-textos-1 .cajaSlide {
		color: #FFFFFF;
		/* padding-left:50px !important; */
	} 
	body.slide_1 #container-textos-2 .cajaSlide .linea img{
		width:120px;
	}
	body.slide_1 #container-textos-2 .cajaSlide span.salto,
	body.slide_3 #container-textos-4 .cajaSlide span.salto{
		display:inline-block;
	}
	
	
	
	
	
	
	
	/* PARA QUE NO QUEDE MAL CUANDO SE VE EL FONDO, (EN PANTALLAS MUY ALTAS) */
	
	body.slide_0 #supersized li {
		background: #222222 !important;
	}body.slide_1 #supersized li {
		background: #090909 !important;
	}
	body.slide_2 #supersized li {
		background: #FFFFFF !important;
	}
	body.slide_3 #supersized li {
		background: #183043 !important;
	}
	body.slide_4 #supersized li {
		background: #191313 !important;
	}
	
	
	/* El 1º slide, es el más difícil de dejar bien, así que le pongo sombra y otro color al fondo del texto */
	body.slide_0 #supersized li img{
		box-shadow: 0 0 30px black;
	}
	body.slide_0 #container-textos-1 .cajaSlide {
		background: rgba(0, 14, 26, 0.6);
	}
	
	
	
	
	.cajaSlide, 
	body.slide_0 #container-textos-1 .cajaSlide, 
	body.slide_1 #container-textos-2 .cajaSlide, 
	body.slide_2 #container-textos-3 .cajaSlide,
	body.slide_3 #container-textos-4 .cajaSlide, 
	body.slide_4 #container-textos-5 .cajaSlide {
		text-shadow: 1px 1px 10px black;
	}
	
	
	
}



	body.slide_2 #container-textos-3 .cajaSlide{
		
		text-shadow: 1px 1px 10px white;
		
	}


/* Ajustes en el texto más largo (3º Slide) que es distinto */

@media screen and (max-width: 800px), 
screen and (max-height: 460px) {
	
	/* Los agrego, porque no venían seteados! (3º slide y "general") */
	.cajaSlide,
	body.slide_2 #container-textos-3 .cajaSlide {
		position: absolute;
		left: 0 !important;
		right: 0 !important;
		margin: 0 !important;
		text-align: left !important;
		background: rgba(0, 0, 0, 0.5);
		padding: 20px;
		color: white !important;
		
		top: 46% !important;
		top: 46vh !important;
		bottom: 18vh !important;
	}
	
	
	#container-textos-1 .cajaSlide .encuadro{
		border: 1px solid #EEEEEE;
	}
	#container-textos-3 .cajaSlide .encuadro {
		border: none !important;
		padding: inherit;
		font-family: inherit;
	}
	
	
	body.slide_2 #container-textos-3 .cajaSlide{
		background: rgba(255, 255, 255, 0.5) !important;
		color: #222222 !important;
		text-shadow: 1px 1px 10px white;
		padding-right: 10%;
		
	}
	body.slide_2 #container-textos-3 .cajaSlide.active{
		top: 0 !important;
		overflow-y: auto;
		padding-top: 40px !important;
		background: rgba(255, 255, 255, 0.9) !important;
		line-height:13px;
		z-index: 99;
	}
	
	body.slide_2 #container-textos-3 .cajaSlide .ver_mas{
		display:block;
		position: absolute;
		top: 10px;
		right: 2px;
		margin:2px;
	}
	body.slide_2 #container-textos-3 .cajaSlide .ver_mas a{
		display:inline-block;
		text-decoration:none;
		color:#111111;
		font-size:20px;
		padding:6px;
		border:1px solid #111111;
	}
	
	body.slide_2 #container-textos-3 .cajaSlide.active .ver_mas{
		position: fixed;
		top:20px;
	}

}

@media screen and (min-height: 600px) and (max-width: 800px){
	body.slide_2 #container-textos-3 .cajaSlide.active{
		padding-top: 100px !important;
	}
	body.slide_2 #container-textos-3 .cajaSlide.active .ver_mas {
		top: 80px;
		right: 10px;
	}
}




@media screen and (max-width: 800px) and (min-width: 513px), 
screen and (max-height: 460px) {
	
	/* Porque en el 3º slide, sino, le pisa la cara a la chica */
	.cajaSlide,
	body.slide_0 #container-textos-1 .cajaSlide,
	body.slide_1 #container-textos-2 .cajaSlide,
	body.slide_2 #container-textos-3 .cajaSlide,
	body.slide_3 #container-textos-4 .cajaSlide,
	body.slide_4 #container-textos-5 .cajaSlide {
		top: 48% !important;
		top: 48vh !important;
	}

}

@media (min-width: 1024px) and (max-height: 700px) {
	
	#container-textos-3 .cajaSlide{
		margin-top:-20px;
	}
	
}

@media screen and (max-width: 1023px) and (max-height: 680px) and (min-width: 921px) and (min-height: 601px){
	
	#container-textos-3 .cajaSlide{
		margin-top: -20px !important;	
	}
	
}





@media screen and (max-width: 800px){
	
	
	/*  width viene en 920px (o 1000 para el 3º slide) ! */
	#supersized li.slide-0 img,
	#supersized li.slide-0.prevslide img, 
	#supersized li.slide-0.activeslide img {
		margin-left: -416px !important;
	}
	
	#supersized li.slide-1 img,
	#supersized li.slide-1.prevslide img, 
	#supersized li.slide-1.activeslide img {
		margin-left: -556px !important;
	}
	
	#supersized li.slide-2 img,
	#supersized li.slide-2.prevslide img, 
	#supersized li.slide-2.activeslide img {
		margin-left: -500px !important;
	}
	
	#supersized li.slide-3 img,
	#supersized li.slide-3.prevslide img, 
	#supersized li.slide-3.activeslide img {
		margin-left: -500px !important;
	}
	
	#supersized li.slide-4 img,
	#supersized li.slide-4.prevslide img, 
	#supersized li.slide-4.activeslide img {
		margin-left: -436px !important;
	}
	
}





@media (max-width: 730px) and (min-width: 513px){

	/* Viene en 920px, y absolute ! no necesito esto
	#supersized li img,
	#supersized li.prevslide img, 
	#supersized li.activeslide img {
		width: 900px !important;
		margin-left: -450px !important;
	}*/
	
	#supersized li.slide-0 img, 
	#supersized li.slide-0.prevslide img, 
	#supersized li.slide-0.activeslide img {
		margin-left: -376px !important;
	}
	
	#supersized li.slide-1 img, 
	#supersized li.slide-1.prevslide img, 
	#supersized li.slide-1.activeslide img {
		margin-left: -494px !important;
		margin-top: -40px;
	}
	
	#supersized li.slide-2 img,
	#supersized li.slide-2.prevslide img, 
	#supersized li.slide-2.activeslide img {
	}
	
	#supersized li.slide-3 img,
	#supersized li.slide-3.prevslide img, 
	#supersized li.slide-3.activeslide img {
		margin-left: -410px !important;
		margin-top: -30px !important;
	}
	
	#supersized li.slide-4 img,
	#supersized li.slide-4.prevslide img, 
	#supersized li.slide-4.activeslide img {
		margin-left: -380px !important;
		margin-top: -30px !important;
	}
	
	
}

@media (max-width: 512px) and (min-width: 400px){
	
	/* Tengo que setear width en el 3º slide (slide-2), porque viene distinto ! */
	#supersized li img,
	#supersized li.prevslide img, 
	#supersized li.activeslide img {
		height: auto !important;
		position: absolute;
		display: inline-block;
		left: 50% !important;
		
		width: 780px !important;
		margin-left: -320px !important;
	}
	
	#supersized li.slide-0 img,
	#supersized li.slide-0.prevslide img, 
	#supersized li.slide-0.activeslide img {
		margin-left: -320px !important;
	}
	
	#supersized li.slide-1 img,
	#supersized li.slide-1.prevslide img, 
	#supersized li.slide-1.activeslide img {
		margin-left: -426px !important;
		margin-top: -68px !important;
	}
	
	#supersized li.slide-2 img,
	#supersized li.slide-2.prevslide img, 
	#supersized li.slide-2.activeslide img {
		width: 780px !important;
		margin-left: -260px !important;
		margin-top: -20px !important;
	}
	
	#supersized li.slide-3 img,
	#supersized li.slide-3.prevslide img, 
	#supersized li.slide-3.activeslide img {
		margin-left: -350px !important;
		margin-top: -40px !important;
	}
	
	#supersized li.slide-4 img,
	#supersized li.slide-4.prevslide img, 
	#supersized li.slide-4.activeslide img {
		width: 720px !important;
		margin-left: -300px !important;
		margin-top: -30px !important;
	}
	
}



@media (max-width: 399px){
	
	/* Tengo que setear width en el 3º slide (slide-2), porque viene distinto ! */
	#supersized li img,
	#supersized li.prevslide img, 
	#supersized li.activeslide img {
		width: 620px !important;
		margin-left: -310px !important;
	}
	
	#supersized li.slide-0 img,
	#supersized li.slide-0.prevslide img, 
	#supersized li.slide-0.activeslide img {
		margin-left: -254px !important;
	}
	
	#supersized li.slide-1 img,
	#supersized li.slide-1.prevslide img, 
	#supersized li.slide-1.activeslide img {
		margin-left: -336px !important;
		margin-top: -40px !important;
	}
	
	#supersized li.slide-2 img,
	#supersized li.slide-2.prevslide img, 
	#supersized li.slide-2.activeslide img {
		width: 620px !important;
		margin-left: -200px !important;
		margin-top: -10px !important;
	}
	
	#supersized li.slide-3 img,
	#supersized li.slide-3.prevslide img, 
	#supersized li.slide-3.activeslide img {
		margin-left: -276px !important;
		margin-top: -20px !important;
	}
	
	#supersized li.slide-4 img,
	#supersized li.slide-4.prevslide img, 
	#supersized li.slide-4.activeslide img {
		width: 600px !important;
		margin-left: -250px !important;
		margin-top: -26px !important;
	}
	
	
	
}

	
	



@media (max-width: 540px) {
	
	ul#slide-list li.slide-link-5 a .connect{
		display:inline-block;
	}
	ul#slide-list li.slide-link-5 a .strom_connect{
		display:none;
	}
	
	ul#slide-list.active li.slide-link-5 a .connect{
		display:none;
	}
	ul#slide-list.active li.slide-link-5 a .strom_connect{
		display:inline-block;
	}
	
}

@media (max-width: 600px){

	#thumb-tray ul#thumb-list li span {
		font-size: 12px;
		padding: 20% 0;
	}
}


@media (max-width: 504px) {
	
	
	.fijo-right .bandera-1{
		display: inline-block;
		position: fixed;
		top: 46px;
		left: 20px;
	}
	
	.fijo-right .bandera-2{
		display: inline-block;
		position: fixed;
		top: 46px;
		left: 50px;
	}
	
	.fijo-right .bandera-3{
		display: inline-block;
		position: fixed;
		top: 46px;
		left: 80px;
	}
	
	.fijo-right .logoPower{
		position: fixed;
		top: 4px;
		left: 20px;
	}
	
	
}



@media screen and (min-height: 440px) and (orientation: portrait) {
	
	nav, #nav{
		height: 52px;
	}
	#supersized,
	#supersized li{
		top:52px;
	}
	body.slide_5 #supersized li {
		border-top: 6px solid #EEE;
	}
	
	body.slide_0 .logoPower,
	body.slide_5 .logoPower {
		background-image: url(../img/sprite_2.png);
	}
	
	
	#mostrar_menu{
		top: 8px;
	}
	
	ul#slide-list {
		top: 14px;
	}
	
	.fijo-right{
		margin-top: 8px;
	}
	
	.cajaSlide {
		margin: 0 0 52px 0 !important;
	}
	
}

@media screen and (min-height: 440px) and (orientation: portrait) and (max-width: 504px){
	
	
	.fijo-right .bandera-1,
	.fijo-right .bandera-2,
	.fijo-right .bandera-3{
		top: 58px;
	}
	
	.fijo-right .logoPower{
		top: 12px;
	}
	
}

























/* Mapa y form horizontales y menos de 600 de alto */
@media screen and (min-width:661px) and (max-height:600px){
	
	#container-map #contact-form form .mobile_left,
	#container-map #contact-form form .mobile_right{
		display:inline-block;
		width:49%;
		float:left;
	}
	#container-map #contact-form form .mobile_right{
		float:right;
	}
		
}





@media screen and (min-height:461px) and (max-height: 580px) and (min-width: 800px){
	
	#container-textos-3 .cajaSlide {
	margin-top: -20px;
	margin-right: 20px;
	/* font-size: 11px;
	line-height: 14px; */
	margin-right: 6%;
	line-height: 16px;
	}
	
	#container-textos-3 .cajaSlide span.linea {
		/* padding: 2px 0; */
	}
	#container-textos-3 .cajaSlide span.salto {
		display: inline;
	}
	#container-textos-3 .cajaSlide .encuadro {
		border: none !important;
		font-family: inherit !important;
		text-decoration: underline;
		display: inline;
		padding:0;
	}
	
}
@media screen and (min-height:461px) and (max-height: 580px) and (min-width: 800px) and (max-width: 920px){
	
	#container-textos-3 .cajaSlide {
	margin-top: -50px;
	}
	html.mobile #container-textos-3 .cajaSlide {
	margin-top: -40px;
	}
	
}












/* PANTALLAS CHICAS */

@media screen and (max-width: 880px) and (min-width:661px){
	
	#container-map #contact-map {
		width: 50%;
	}
	#container-map #contact-form {
		width: 50%;
	}
	
}

@media screen and (max-width: 660px) and (min-width:350px){
	
	#container-map{
		height:64%;
		height:60vh;
		margin-top: 20%;
		margin-top: 26vh;
		bottom: auto;
	}
	
	#container-map #contact-map {
		position: relative;
		top: auto;
		width:100%;
		height:30%;
		height:21vh; /* OJO ! NO 30vh, porque es el porcentaje del padre, no de html */
	}
	#container-map #contact-form {
		position: relative;
		top: auto;
		width:100%;
		/* height:70%; DEJARLO EN 100%, por default, así no sobra en tamaños largos */
	}
	
	#container-map #datos_contacto {
		/* position: relative;
		height: auto;
		width: 100%;
		margin-top: auto;
		padding-bottom: 20px;*/
		margin-top: -20%;
		margin-top: -20vh;
		height:20%;
		height:20vh;
	}
	
	#container-map #datos_contacto ul{
		padding-top:10px;
	}
	#container-map #datos_contacto ul li {
	list-style: none;
	display: block;
	width: auto;
	vertical-align: top;
	clear: both;
	text-align: left;
	padding: 2px 20px;
	}
	#container-map #datos_contacto ul li div.icono {
	height: 20px;
	margin-bottom: 0;
	display: inline-block;
	}
	#container-map #datos_contacto ul li div.icono img {
	height: 20px;
	}
	#container-map #datos_contacto ul li h3 {
	display: inline;
	font-size: 14px;
	line-height: 12px;
	}
	#container-map #datos_contacto ul li p {
	display: inline;
	font-size: 12px;
	line-height: 12px;
	}
	
}

@media screen and (max-width: 660px) and (min-width:350px) and (max-height:632px){
	
	
	/* Oculto los thumbs (Ver si conviene sacarlos por javascript, o poner un botón para mostrarlos) */
	body.slide_5 #thumb-tray {
		display: none !important;
	} 
	
	
}







/* PANTALLAS MUY CHICAS */
@media screen and (max-width: 380px){
	
	/* El menú ocupa todo el ancho*/
	ul#slide-list.active {
		left: 0;
	}
	
}

@media screen and (max-width: 360px){
	
	/* Se oculta el botón "connect" */
	ul#slide-list li.slide-link-5 {
		display:none;
	}
	ul#slide-list.active li.slide-link-5 {
		display:block;
	}
	
}

@media screen and (max-height: 540px){
	
	/* Thumbs más chiquitos, (no los necesito cuadrados) */
	#thumb-tray ,
	#thumb-tray ul,
	#thumb-tray ul#thumb-list li,
	#thumb-tray ul#thumb-list li img,
	#thumb-tray.fijo ,
	#thumb-tray.fijo ul,
	#thumb-tray.fijo ul#thumb-list li,
	#thumb-tray.fijo ul#thumb-list li img{
		height: 14vh !important;
		min-height: 14vh !important;
	}
	#thumb-tray ul#thumb-list li span {
		padding: 10% 0;
		padding: 5vh 0;
	}
	
	#container-map,
	body.thumb_fijo #container-map{
		bottom: 14%;
		bottom: 14vh;
	}
	
}

/* Si aparecen los textos abajo*/
@media screen and (max-width: 800px), 
screen and (max-height: 460px),
screen and (max-height: 960px) and (orientation: portrait){
	
	/* 
	.cajaSlide, 
	body.slide_0 #container-textos-1 .cajaSlide, 
	body.slide_1 #container-textos-2 .cajaSlide, 
	body.slide_2 #container-textos-3 .cajaSlide,
	body.slide_3 #container-textos-4 .cajaSlide, 
	body.slide_4 #container-textos-5 .cajaSlide {
		text-shadow: 1px 1px 10px black;
	}
	
	body.slide_2 #container-textos-3 .cajaSlide{
		
		background: rgba(255, 255, 255, 0.5) !important;
		color: #111 !important;
		text-shadow: 1px 1px 10px white;
		
	}
	body.slide_2 #container-textos-3 .cajaSlide.active{
		top: 0 !important;
		overflow-y: auto;
		padding-top: 40px !important;
		background: rgba(255, 255, 255, 0.9) !important;
		line-height:13px;
		z-index: 99;
	}
	
	body.slide_2 #container-textos-3 .cajaSlide .ver_mas{
		display:block;
		position: absolute;
		top: 10px;
		right: 2px;
		margin:2px;
	}
	body.slide_2 #container-textos-3 .cajaSlide .ver_mas a{
		display:inline-block;
		text-decoration:none;
		color:#111111;
		font-size:20px;
		padding:6px;
		border:1px solid #111111;
	}
	
	body.slide_2 #container-textos-3 .cajaSlide.active .ver_mas{
		position: fixed;
		top:20px;
	}
	*/
	
}

@media screen and (max-height: 420px){
	body.slide_2 #container-textos-3 .cajaSlide.active{
		padding-top: 10px !important;
	}
}



@media screen and (max-height: 540px) and (max-width: 800px),
screen and (max-height: 460px){
	
	#container-textos-1, 
	#container-textos-2, 
	#container-textos-3, 
	#container-textos-4, 
	#container-textos-5,
	#container-map {
		position: absolute;
		height: 86vh;
		/* margin-top: -52px; */
		margin-top: -40px;
	}
	
	html.mobile #container-textos-1, 
	html.mobile #container-textos-2, 
	html.mobile #container-textos-3, 
	html.mobile #container-textos-4, 
	html.mobile #container-textos-5,
	html.mobile #container-map {
		margin-top: -60px;
	}
	
	#container-map {
		top: 90px;
	}
	
	html.mobile body.slide_5 #thumb-tray{
		display:none !important;
	}
	
	.cajaSlide, 
	body.slide_0 #container-textos-1 .cajaSlide, 
	body.slide_1 #container-textos-2 .cajaSlide, 
	body.slide_2 #container-textos-3 .cajaSlide,
	body.slide_3 #container-textos-4 .cajaSlide, 
	body.slide_4 #container-textos-5 .cajaSlide {
		/* position: relative;
		min-height: 60vh;*/
		position:absolute;
		bottom: 0 !important;
		/* overflow-y:auto; // SAQUÉ OVERFLOW !! */
	}
	
	body.slide_0 #container-textos-1 .cajaSlide span.salto,
	body.slide_0 #container-textos-1 .cajaSlide span.linea,
	body.slide_1 #container-textos-2 .cajaSlide span.salto,
	body.slide_1 #container-textos-2 .cajaSlide span.linea,
	body.slide_3 #container-textos-4 .cajaSlide span.salto,
	body.slide_3 #container-textos-4 .cajaSlide span.linea,
	body.slide_4 #container-textos-5 .cajaSlide span.salto,
	body.slide_4 #container-textos-5 .cajaSlide span.linea {
		display: inline;
	}
	
	
	.cajaSlide .encuadro {
		/* border-width: 0 0 1px 0 !important; */
		border:none !important;
		font: inherit;
		text-decoration:underline;
		display:inline;
		padding:0;
		margin:inherit;
	}
	
	
	
	#container-map #datos_contacto {
		position: relative;
		height: auto;
		width: 100%;
		margin-top: auto;
		padding-bottom: 20px;
	}
	#container-map #contact-map {
		display: none;
	}
	#container-map #contact-form {
		position: relative;
		/* height: auto; */
		top: auto;
		width: 100%;
		padding-bottom:100px;
	}
	
	
	#container-map #datos_contacto ul{
		padding-top:10px;
	}
	#container-map #datos_contacto ul li {
	list-style: none;
	display: block;
	width: auto;
	vertical-align: top;
	clear: both;
	text-align: left;
	padding: 2px 20px;
	}
	#container-map #datos_contacto ul li div.icono {
	height: 20px;
	line-height: 20px;
	vertical-align: text-bottom;
	margin-bottom: 0;
	display: inline-block;
	}
	#container-map #datos_contacto ul li div.icono img {
	height: 100%;
	}
	#container-map #datos_contacto ul li h3 {
	display: inline;
	font-size: 14px;
	line-height: 20px;
	}
	#container-map #datos_contacto ul li p {
	display: inline;
	font-size: 12px;
	line-height: 20px;
	}

	
	/* Oculto los thumbs (Ver si conviene sacarlos por javascript, o poner un botón para mostrarlos) */
	#thumb-tray {
		display: none !important;
	} 
	
	#container-textos-1, 
	#container-textos-2, 
	#container-textos-3, 
	#container-textos-4, 
	#container-textos-5,
	#container-map {
		height: 100%;
	}
	
	
}





@media screen and (max-height: 440px){
	
	#container-textos-1, 
	#container-textos-2, 
	#container-textos-3, 
	#container-textos-4, 
	#container-textos-5,
	#container-map {
		margin-top: -40px;
	}
}


@media screen and (max-height: 454px){
	
	
	
	#container-map #contact-form form {
		padding: 8px 20px;
	}
	#container-map #contact-form form input, #container-map #contact-form form textarea {
		width: 98%;
		padding: 6px 1%;
		margin: 4px 0;
	}
	#container-map #contact-form form #enviar{
		margin:2px;
		padding: 7px 10px 5px 10px;
	}
	
}


@media screen and (max-height: 440px){
	
	
	#container-map #datos_contacto {
		padding-bottom: 10px;
	}
	#container-map #contact-form form {
		padding: 4px 20px;
	}
	#container-map #contact-form form input, #container-map #contact-form form textarea {
		width: 98%;
		padding: 6px 1%;
		margin: 3px 0;
	}
	#container-map #contact-form form #enviar{
		margin:0;
		padding: 6px 10px 4px 10px;
	}
	
}


@media screen and (max-height: 400px){
	
	/* Oculto los thumbs (Ver si conviene sacarlos por javascript, o poner un botón para mostrarlos) 
	#thumb-tray {
		display: none !important;
	} 
	
	#container-textos-1, 
	#container-textos-2, 
	#container-textos-3, 
	#container-textos-4, 
	#container-textos-5,
	#container-map {
		height: 100%;
	}
	*/
	#container-map #datos_contacto {
		padding-bottom: 10px;
	}
	#container-map #datos_contacto ul li h3 {
		display: none;
	}
	#container-map #contact-form form {
		padding: 4px 20px;
	}
	#container-map #contact-form form .mobile_left,
	#container-map #contact-form form .mobile_right{
		display:inline-block;
		width:49%;
		float:left;
	}
	#container-map #contact-form form .mobile_right{
		float:right;
	}
	#container-map #contact-form form input, #container-map #contact-form form textarea {
		width: 98%;
		padding: 6px 1%;
		margin: 3px 0;
	}
	#container-map #contact-form form #enviar{
		margin:0;
		padding: 6px 10px 4px 10px;
	}
	
	/* 
	.fijo-right .bandera-1,
	.fijo-right .bandera-2,
	.fijo-right .bandera-3 {
		top: 64px;
	}
	.fijo-right .logoPower {
		top: 14px;
	}*/
	
	html.mobile .fijo-right .bandera-1,
	html.mobile .fijo-right .bandera-2,
	html.mobile .fijo-right .bandera-3 {
		top: 64px;
	}
	html.mobile .fijo-right .logoPower {
		top: 14px;
	}
	
	/*
	.cajaSlide,
	body.slide_0 #container-textos-1 .cajaSlide,
	body.slide_1 #container-textos-2 .cajaSlide,
	body.slide_2 #container-textos-3 .cajaSlide,
	body.slide_3 #container-textos-4 .cajaSlide,
	body.slide_4 #container-textos-5 .cajaSlide {
		top: 50vh !important;
		bottom: 0 !important;
	}
	*/
}









/*  TOUCH  */ 
@media screen and (max-width: 920px), 
screen and (max-width: 1024px) and (min-height:640px), 
screen and (orientation: portrait){
	
	/* Le doy más espacio a los botones y barra del menu */
	
	html.mobile nav, 
	html.mobile #nav{
		height: 60px;
	}
	
	html.mobile #supersized,
	html.mobile #supersized li{
		top:60px;
	}
	
	
	body.slide_0 .logoPower,
	body.slide_5 .logoPower {
		background-image: url(../img/sprite_2.png);
	}
	
	
	html.mobile #mostrar_menu{
		margin: 2px;
		top: 4px;
		right: 4px;
		width: 48px;
		height: 44px;
	}
	html.mobile #mostrar_menu a{
	}
	html.mobile #mostrar_menu a span {
		height: 7px;
		margin-top: 6px;
	}
	
	
	html.mobile ul#slide-list {
		right: 58px;
		top: 8px;
	}
	html.mobile ul#slide-list li a{
		font-size:16px;
		line-height:16px;
	}
	html.mobile ul#slide-list li,
	html.mobile ul#slide-list li.slide-link-5 {
		padding: 14px 30px 14px 10px;
	}
	html.mobile ul#slide-list li.slide-link-5 {
		margin-top: -2px;
	}
	
	
	html.mobile ul#slide-list.active {
		right: 0;
		top: 0;
		padding-top:64px;
	}
	html.mobile ul#slide-list.active li,
	html.mobile ul#slide-list.active li.slide-link-5{
		margin-top: 0;
		padding:14px 30px;
	}
	html.mobile ul#slide-list.active li a{
		font-size:18px;
		line-height:18px;
	}
	

	html.mobile .fijo-right{
		margin-top: 14px;
		margin-left: 20px;
	}
	
	html.mobile .fijo-right .bandera-1,
	html.mobile .fijo-right .bandera-2 {
		margin-right: 12px;
	}
	html.mobile .fijo-right .bandera-3 {
		margin-right: 22px;
	}
	
}

/* @media screen and (min-height: 440px) and (orientation: portrait) and (max-width: 504px){ */
@media screen and (min-height: 401px) and (orientation: portrait) and (max-width: 504px){
	
	
	html.mobile .fijo-right .bandera-1,
	html.mobile .fijo-right .bandera-2,
	html.mobile .fijo-right .bandera-3{
		top: 66px;
	}
	
	html.mobile .fijo-right .logoPower{
		top: 16px;
	}
	
}










/* Resoluciones RARAS / ajuste en contactos: 

Cuando el form está vertical y están los thumbs y el mapa ocupando espacio */
@media screen and (max-width:660px) and (min-height:633px) {
	
	#container-map {
		bottom: 18%;
		bottom: 18vh;
		height: 56%;
		height: 56vh;
	}
	
	#container-map #datos_contacto {
		margin-top: -110px;
		height: 110px;
		/* margin-top: -16vh;
		height: 16vh; */
	}
		
}
/* Cuando los thumbs tapan al form, achico el form */
@media screen and (max-width:660px) and (max-height:770px) and (min-height:633px) {
	
	#container-map #contact-form form .mobile_left,
	#container-map #contact-form form .mobile_right{
		display:inline-block;
		width:49%;
		float:left;
	}
	#container-map #contact-form form .mobile_right{
		float:right;
	}
		
}
/* Cuando ya no están los thumbs, pero sí el mapa*/
@media screen and (max-width:660px) and (max-height:632px) and (min-height:541px) {
	
	#container-map #contact-form form .mobile_left,
	#container-map #contact-form form .mobile_right{
		display:inline-block;
		width:49%;
		float:left;
	}
	#container-map #contact-form form .mobile_right{
		float:right;
	}
		
	
	#container-map {
		bottom: 18%;
		bottom: 18vh;
		height: 48%;
		height: 48vh;
	}
	
	#container-map #datos_contacto {
		margin-top: -104px;
		margin-top: -16vh;
		height: 104px;
		height: 16vh;
	}
		
}





/* Muy específico (algunas tablets) */
@media (max-width: 1023px) and (min-width: 801px) and (max-height: 500px) and (min-height: 461px) {
	
	#container-textos-3 .cajaSlide {
		right: 2% !important;
		margin-right: 4px;
		line-height: 15px;
	}
}
/* Viene del anterior, pero es solo para pantallas de menos de 920 de ancho (con barra nav) */
@media (max-width: 920px) and (min-width: 801px) and (max-height: 500px) and (min-height: 461px) {
	
	#container-textos-3 .cajaSlide {
		margin-top: -50px;
	}
}





/* Muy horizontales PC */
@media (min-width: 1024px) and (max-height: 500px) and (min-height: 461px){
	
	#container-textos-3 .cajaSlide {
		margin-top: -20px;
	}
	#supersized li.slide-3 img, 
	#supersized li.slide-3.prevslide img, 
	#supersized li.slide-3.activeslide img,
	#container-textos-4 .cajaSlide {
		margin-top: -20px;
	}
	#supersized li.slide-4 img, 
	#supersized li.slide-4.prevslide img, 
	#supersized li.slide-4.activeslide img,
	#container-textos-5 .cajaSlide {
		margin-top: -15px;
	}
	
}

@media (min-width: 1160px) and (max-height: 600px){
	
	#container-textos-3 .cajaSlide {
		margin-top: 0;
	}
	#supersized li.slide-3 img, 
	#supersized li.slide-3.prevslide img, 
	#supersized li.slide-3.activeslide img,
	#container-textos-4 .cajaSlide {
		margin-top: -30px;
	}
	#supersized li.slide-4 img, 
	#supersized li.slide-4.prevslide img, 
	#supersized li.slide-4.activeslide img,
	#container-textos-5 .cajaSlide {
		margin-top: -15px;
	}
	
}
@media (min-width: 1280px) and (max-height: 600px) {
	
	#supersized li.slide-3 img, 
	#supersized li.slide-3.prevslide img, 
	#supersized li.slide-3.activeslide img,
	#container-textos-4 .cajaSlide {
		margin-top: -60px;
	}
	#supersized li.slide-4 img, 
	#supersized li.slide-4.prevslide img, 
	#supersized li.slide-4.activeslide img,
	#container-textos-5 .cajaSlide {
		margin-top: -40px;
	}
	
}
@media (min-width: 1300px) and (max-height: 600px){
	
	#container-textos-3 .cajaSlide {
		margin-top: -10px;
	}
}

@media (min-width: 1360px) and (max-height: 600px) {
	
	#container-textos-3 .cajaSlide {
		margin-top: -20px;
	}
	
	#supersized li.slide-3 img, 
	#supersized li.slide-3.prevslide img, 
	#supersized li.slide-3.activeslide img,
	#container-textos-4 .cajaSlide {
		margin-top: -90px;
	}
	#supersized li.slide-4 img, 
	#supersized li.slide-4.prevslide img, 
	#supersized li.slide-4.activeslide img,
	#container-textos-5 .cajaSlide {
		margin-top: -60px;
	}
	
}














/* 	Resoluciones 4:3 1024x768 / 1280x960 / 1400x1050 / 1600x1200 / 2048x1536  
	(SIN borrar el alto de navegador, porque se la banca, solo para 4:3 reales que se vuelve casi cuadrado)*/

/*  1024 tiene otra relación, porque lleva barra mobile.
	Solo voy a usar esta otra, si está muy vertical y no llega a los ajustes para mobile
	(Por ej. cuando pongo una ventana cuadrada en la compu, sino, se ve el fondo negro) */
@media screen and (max-width: 1024px) and (min-width: 921px) and (min-height: 900px){
	nav, #nav{
		height: 60px;
	}
	#supersized,
	#supersized li{
		top:60px;
	}
	
	body.slide_0 .logoPower,
	body.slide_5 .logoPower {
		background-image: url(../img/sprite_2.png);
	}
	
	
	ul#slide-list {
	top: 16px;
	}
	#mostrar_menu {
		top: 10px;
	}
	.fijo-right {
		top: 10px;
	}
} 



@media screen and (max-width: 1280px) and (min-width: 1025px) and (min-height: 960px),
screen and (max-width: 1400px) and (min-height: 1050px),
screen and (max-width: 1600px) and (min-height: 1200px){
	
	nav, #nav{
		height: 60px;
	}
	#supersized,
	#supersized li{
		top:60px;
	}
	body.slide_5 #supersized li {
		border-top: 6px solid #EEE;
	}
	
	body.slide_0 .logoPower,
	body.slide_5 .logoPower {
		background-image: url(../img/sprite_2.png);
	}
	
	
	ul#slide-list {
		position: fixed;
		top: 0;
	}
	
	/* Reseteo esto que cambié para pantallas de más de 1280*/
	ul#slide-list {
		margin-top: 0px;
	}
	.fijo-right{
		margin-top: 10px;
	}
	
}