/* ----------------------------- 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:20px; float:left; display:inline;}
.next {margin-right:20px; float:right; display:inline;}

/*
#headertxt {width:100%; padding:20px 0px; top:70%; text-align:center; background:rgba(197,153,43,0.7); border-top:solid 1px #fff; border-bottom:solid 1px #fff;}
#sliderTitulo {font-size:30px; line-height:1.8em; color:#fff; font-weight:200;}
#sliderTexto1 {display:none;}
#sliderTexto2 {display:none;}
*/

#headertxt    {width:60%; top:70%; left:20%;}
#sliderTexto1 {float:none; display:inline;}
#sliderTexto2 {float:none; display:inline;}
#sliderTitulo {width:600px; margin:auto; line-height:98px; text-align:center; font-weight:400;}
#capaEfecto   {width:600px; height:100px; margin:auto; background:rgba(112,84,14,.5); border-radius:5px; overflow:hidden; animation:animaTexto 1s ease-out 1 0s;}

@keyframes animaTexto {
    0% {width:0px;}
    100% {width:600px;}
}


/* --------------------- EFECTOS DE AMPLIACIÓN Y ROTACIÓN ------------------------- */

.headerimg {background-position:50% 50%; background-repeat:none; background-size:cover; opacity:0; z-index:0;
  -webkit-backface-visibility:hidden; 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) {
	
}


@media only screen and (min-width: 1550px) {

#headertxt    {width:50%; top:65%; left:25%;}
#sliderTitulo {width:800px; line-height:145px;}
#capaEfecto   {width:800px; height:150px;}

@keyframes animaTexto {
    0% {width:0px;}
    100% {width:800px;}
}
	
}


@media only screen and (max-width: 1000px) {

.headernav {display:none;}

#headertxt    {width:90%; top:70%; left:5%;}
#sliderTitulo {width:100%; font-size:22px; line-height:58px;}
#capaEfecto   {width:100%; height:60px;}

@keyframes animaTexto {
    0% {width:0px;}
    100% {width:100%;}
}
	
}