
/* ----------------------------- ESTILOS SLIDER INICIO ---------------------------- */

#slider-contenedor {width:100%; margin:0; padding:0; overflow:hidden;}
.headerimg {width:100%; height:100%; top:0px; left:0px; background:no-repeat center center #fff; background-size:cover; position:absolute;}

#slider-contenedor:hover .headernav {opacity:1;}
.headernav {width:100%; height:40px; top:50%; margin:-20px auto auto auto; position:relative; z-index:50; opacity:0;}
.back, .next {height:40px; width:40px; cursor:pointer;}
.back {margin-left:30px; float:left; display:inline;}
.next {margin-right:30px; float:right; display:inline;}

#headertxt {width:100%; padding:20px 0px; top:65%; text-align:center; background:rgba(0,0,0,.8); border-top:solid 1px #498db8; border-bottom:solid 1px #498db8;}
#sliderTitulo {font-size:36px; line-height:1.4em; color:#fff; font-weight:600;}
#sliderTexto1 {font-size:28px; line-height:1.4em; color:#ccc;}
#sliderTexto2 {font-size:28px; line-height:1.4em; color:#aaa;}


/* --------------------- EFECTOS DE AMPLIACIÓN Y ROTACIÓN ------------------------- */

.headerimg {background-position:50% 50%; background-repeat:none; background-size:cover; opacity:0; z-index:0; animation:imageAnimation 6s linear infinite 0s;}

@keyframes imageAnimation { 
	0%   {opacity:0; transform:scale(1);}
	10%  {opacity:1;}
	90%  {opacity:1;}
	100% {opacity:0; transform:scale(1.05);}
}


/*---------------------------------------- RESPONSIVE ---------------------------------*/


@media only screen and (min-width: 1300px) {
	
	#sliderTitulo {font-size:42px;}
	#sliderTexto1 {font-size:32px;}
	#sliderTexto2 {font-size:32px;}

}


@media only screen and (min-width: 1550px) {

	#sliderTitulo {font-size:50px;}
	#sliderTexto1 {font-size:40px;}
	#sliderTexto2 {font-size:40px;}
	
}


@media only screen and (max-width: 1000px) {

	#slider-contenedor {margin-top:60px;}
	#headertxt {width:100%; padding:10px; top:60%;}
	.headernav {display:none;}
	#sliderTitulo {font-size:25px;}
	#sliderTexto1 {font-size:18px;}
	#sliderTexto2 {font-size:18px;}	
	
}

