/*-------------
 	General
-------------*/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:wght@100&family=Outfit:wght@100&display=swap');

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


a{
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	opacity: 0.9;
}

a:hover{
	opacity: 1;
}

.button{
  color: #fff;
 
  text-transform: uppercase;
  background-color: #ffff;
  font-weight: 800;
  text-align: center;
  height: 20;
  min-width:  17em;
  border: none;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  cursor: pointer;
}

.button:hover{
  background-color: #af8d67;
}

.button > a > i {
  font-size: 40px;
}


a.btn{
	color: #fff;
	border-radius: 4px;
	text-transform: uppercase;
	background-color: #eb8239;
	font-weight: 800;
	text-align: center;
  font-family: 'Outfit', sans-serif;
}
h3{
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
}

h1{
  text-align: center;
  font-size: 30px;
  color: #565555;
  font-family: 'Montserrat', sans-serif;
}

hr{
  margin-top: 10px;
	width: 100px;
	height: 2px;
	background-color: #eb8239;
	border: 0;
	margin-bottom: 50px;
}

.but{
  display: flex;
  align-items: center;
  justify-content: center;

}

.lineatarjeta{
  width: 80px;
  height: 2px;
  background-color: #eb8239;
  border: 0;
  margin-bottom: 10px;
}

section{
	display: flex;
	flex-direction: column;
	align-items: center;
  width: 100%;
	padding: 50px 50px;

}

@media (max-width: 1000px){

	section{
		padding: 100px 50px;
	}

}

@media (max-width: 600px){

	section{
		padding: 80px 30px;
	}

}



section h3.title{
	color: #3E3E3E;
	text-transform: none; 
	font-family: 'Montserrat', sans-serif;
	margin-bottom: 20px;
	text-align: center;
}

section h3.title:hover{
  color: #99744F;
}

#psection{
	max-width: 800px;
	text-align: center;
	margin-bottom: 20px;
	padding: 0 20px;
	line-height: 2;
  font-family: 'Montserrat', sans-serif;
}



ul.grid{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

}


/*----------------------------------------------Inicia barra de navegación---------------------------------------------------------*/

.navmenu{

    background-color: #ffff;
    height: 6em;
    width: 100vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
     z-index: 105;
     position: sticky;
     top: 0;
     left: 0;
     bottom: 0;
     padding: 0, 15px;
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);    
}

.navMo {
   width: 100vw;

   overflow: auto;

   position: sticky;

   top:0;

   left: 0;

   padding: 15px 0;

   white-space: nowrap;

   bottom: 0;


}

.logo-1{
  margin-right: 20px;

}

.logo-1 > a > img{
  width: 12em;
  padding: 5px;
}





.menuitems{
      z-index: 3;
    display: flex;
    list-style: none;
}

.menuitems li{
    border-radius: 3px;
    margin:  05px;
}

.menuitems li a{

    padding:  7px 15px;
    text-decoration: none;
    font-size: 16px;
    display: block;
    color: #3E3E3E;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;


}


.menuitems li:hover a:hover{
  color: #AF8D67;
  transform: scale(1.1, 1.1);
}

.iconomenu{
    margin-right: 30px;
    font-size: 25px;
    color:#6D7982;
    cursor: pointer;
    display: none;
}

ul.show{
    top:65px;
}

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

.menuitems li a{
   
    font-size: 16px;

}
}

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

.navmenu{
    height: 65px;
}

.iconomenu{
    
    display: inline-flex;
}
.menuitems{
   
    position: fixed;
    width: 100vw;
    height: calc(100%-65px);
    top: -100vh;
    text-align: center;
    transition: all .4s;
    flex-direction: column;
    background: #ffffff;
   

}

.menuitems li{
    margin: 30px 0 0 0;
    line-height: 30px;

}
.menuitems li:hover{
    background:none;
}

.menuitems li a{
    font-size: 20px;
    color: #6D7982;
   }

.menuitems li a:hover{

     color: #ffcb05;

}

}
@media screen and (max-width: 858px) and (orientation: landscape){
    .menuitems li {
    margin: 5px 0 0 0; 

}
    .menuitems li {
    overflow: scroll;
    height: calc(100%-65px);

}
}

/*----------------------------------------------Final barra de navegación---------------------------------------------------------*/

/*----------------------------------------------Inicia slider Principal-----------------------------------------------------------*/



@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slidy infinite; 
}

/*----------------------------------------------Finaliza slider Principal-----------------------------------------------------------*/

/*-------------------------------------------Inicia Section descripción de Hotel del Carmen ----------------------------------------*/




.section01{
background-image: url(../img/textura.jpg);
  background-size: 30% auto;


}

.hdc{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
 
  
}

.logo-hdc-descripcion > img{
  width: 18em;
  padding-bottom: 1.5em;

}

hr {
  background-color:#3E3E3E;
  width: 35em;
}

.sev{
  width: 100%;
  display: flex;
  height: 20em;

}
.servcios{
  background-color: #A4563C;
  background-image: url(../img/flores.png);
  background-size: 50% auto;
}

#ser{
  color:#ffffff;
}

.tips-habi{
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}



#hab{
  width: 100%;
  height: auto;

}

/*-------------------------------------------Final Section descripción de Hotel del Carmen ----------------------------------------*/

/*-------------------------------------------Inicia Section Beneficios -----------------------------------------------------------*/

.tarjetaProductos{
display:flex;
flex-flow: row wrap;
justify-content: space-between;
margin: 20px;
padding: 15px;
flex-grow: 1;
}

.Productos1 {
  
flex-basis: 15%;
border-radius: 25px;
margin-bottom: 20px;
color: #000;
font-family: 'Roboto Condensed', sans-serif;
padding: 15px;
margin: 15px;
text-align: center;
}


.Productos1 h3 {
padding-top: 10px;
padding-bottom: 5px;
font-size: 20px;
color: #fff;
text-align: center;


}


#tarjetafoto{
 width: 100px;
 height: 100px;


}

#tarjetafoto:hover{
 transform: scale(1.2);


}
.product-content{
  padding-top: 5px;
}

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

  .Productos1 {
flex-basis: 5%;
padding: 10px;
margin: 10px;
}

.tarjetaProductos{

justify-content: center;
margin: 20px;

}

  }

/*-------------------------------------------Termina Section Beneficios -----------------------------------------------------------*/

/*-------------------------------------------Inicia Section Tipos de Habitación ---------------------------------------------------*/



.sec_2{
  width: 100%;
  /*background-image: url(../img/textura.jpg);*/
  background-color: #ffffff;
  background-size: 50% auto;
  max-width: 200%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.sec_2 > div > h2{
 
  font-size: 7.5em;
  color: #ffffff;
  text-align: center;
}

#habinicio{
  width: 100%;
  height: 100%;
   display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: row wrap;
  text-align: center;

}

.tarjetaHab{
  
 width: 100%;
 height: 100%;
display:flex;
flex-flow: row wrap;
justify-content: space-between;
margin: 15px;
padding: 20px;
flex-grow: 1;
}

.Hab-01 {
  
align-items: center;
justify-content: center;
flex-basis: 20%;
 margin: 15px;
 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
 

}

#titu-hab{
  font-family: 'Montserrat', sans-serif
}

#tarjetaHab{
 width: 100%;
 height: 100%;
cursor: pointer;
position: relative;
}

#box_1{
  align-self: flex-start;  

}

#box_2{
  margin-top: 7%;  

}

.box {
  display: block;
  overflow: hidden;
  text-align: center;
  position: relative;
  color: 3
}

.overlay > h3{
  font-size: 42px;
  line-height:  55px;
  text-align: center;
  flex-basis: 25%;
  font-family: 'Montserrat', sans-serif;
}

.overlay{
  width: 100%;
  height:100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
    flex-flow:wrap;



 
}

.overlay > p {
flex-basis: 90%;
font-size: 16px;
line-height: 25px;
font-family: 'Montserrat', sans-serif;
margin-top: 15px;
text-align: justify, center;

}


#enla-servi{
  color: #000000;
}

/* SCALE */

.scale .overlay{
  background-color: #99744F;
  color: #ffffff;
  line-height: 200px;
  transform: translateX(210%) scale(3);
  -webkit-transition: transform 0.6s ease-in-out;
  -o-transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
}

.scale .box:hover .overlay{
  transform: translateX(0) scale(1);
}


.demo a {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 5;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
  box-shadow: 0px 20px 20px #000;
}



#section04 a {
  padding-top: 25px;
}
#section04 a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 25px;
  height: 25px;
  margin-left: -12px;
  border-left: 3px solid #8e6c32;

  border-bottom: 3px solid #8e6c32;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb04 2s infinite;
  animation: sdb04 2s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb04 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
}
@keyframes sdb04 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    transform: rotate(-45deg) translate(0, 0);
  }
}


.reveal{
  position: relative;
  transform: translateY(50%);
  opacity: 0;
  transition: all 2s ease;
}

.reveal.active{
  transform: translateY(0px);
  opacity: 1;
}

.revea2{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: all 1.5s ease;
}

.revea2.active{
  transform: translateY(0px);
  opacity: 1;
}



@media screen and (min-width:1200px) and (max-width: 1440px) {

.sec_2{
  margin: 15px;

}

  .Hab-01 {
flex-basis: 30%;
}

  }

@media (max-width: 1440px) {

  .tarjetaHab{

display:flex;
flex-flow: wrap;
justify-content: center;
margin: 0px;
padding: 0px;
flex-grow: 1;


}

        .Hab-01 {
flex-basis:85%;
margin: 15px;
padding: 5;
 
}

  .overlay > h3{
  font-size: 20px;
  line-height:  30px;
}

}
  
@media (max-width: 430px) {
  .overlay > h3{
  font-size: 16px;
  line-height: 15px;
}

.overlay > p {
flex-basis: 90%;
font-size: 10px;
line-height: 17px;

margin-top: 7px;


}

  }


  /*@media (max-width: 768px) {
    
.tarjetaHab{

display:flex;
flex-flow: wrap;
justify-content: center;
margin: 5px;
flex-grow: 1;
background-color: blue ;

}

        .Hab-01 {
flex-basis:65%;
margin: 25px;
background-color: red;
 
}

  .overlay > h3{
  font-size: 20px;
  line-height:  30px;
}

  }*/

 
 


/*-------------------------------------------Finaliza Section Tipos de Habitación ---------------------------------------------------*/



/*--------------------------- Fin Fuentes ------------------*/






/*-------------------------------------------------*/
.contac-01{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-between;
}

.contac-01 > img{
  width: 34em;
  height: auto;
}

/*-------------
  Footer
-------------*/

footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
  background-color: #3e3e3e;
  padding: 50px 0;
  
}

footer > div > img{
  width: 60%;
}

footer > ul >li >img{
  
  width: 25%;
  
}

footer ul{
  display: flex;
  margin-bottom: 25px;
  font-size: 32px;
}

footer ul li{
  margin: 0 8px;
  list-style: none; 
}

footer ul li:first-child{
  margin-left: 0; 
}

footer ul li:last-child{
  margin-right: 0;  
}

footer p{
  text-transform: uppercase;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 10px;
}

footer p a{
  color: #fff;
}

@media (max-width: 700px){

  footer{
    padding: 80px 15px;
  }

}


/* -- Demo ads -- */

@media (max-width: 1074px) {
  footer{
  
  margin-top: -70px;
}
}

@media (max-width: 1200px) {
  #bsaHolder{ display:none;}
}

@media (max-width: 1004px) {

footer{
  
  margin-top: -70px;
}
  
}




/*----------------------
  Features Section
----------------------*/


.features{
  /*--background-image: url(../img/flores-cafe.png);*/
  background-size: 100%;
  padding: 0px, 0px;
  
}

.ubicacion{
  display: flex;
  width: 100%;
  justify-content: space-around;
  flex-flow: row wrap;
  align-items: center;

}

.dat{
  margin-left: 25px;
}

#vermapa{
  text-align: center;
  margin-top: 20px;
}
.datos{
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: 13px;
  background-color: #fff;
  font-family: 'Montserrat', sans-serif;

}

#dat{
  margin-left: 10px;
}

#da-icoh4{
  margin-left: 10px;
}

.da-ico{
  display: flex;
  flex-flow: row wrap;
  align-items:center;
  justify-content: flex-start;
  margin-top: 15px;
  text-align: center;
  
}


#icons{
    font-size: 30px;
    color: #af8d67;  
    text-align: center;
}

.igle > img{
  width:500px;
}

/*
.grid{

}
.features .grid li{
  padding: 0 30px;
  flex-basis: 100%;
  text-align: center;
  list-style: none;
  background-color: red;

}


.features .grid li > img{
  width: 25em;
  height: auto;
  }

.features .grid li i{
    font-size: 30px;
    color: #af8d67;
    margin-bottom: 25px;
}

.features .grid li i > hr{
    align-items: flex-start;
}

.features .grid li h4{
  color: #555;
    font-size: 15px;
    
}

.features .grid li p{
    margin: 0;

}

@media (max-width: 1000px){

  .features .grid li{
    flex-basis: 70%;
    margin-bottom: 65px;
  }

  .features .grid li:last-child{
    margin-bottom: 0;
  }

}


@media (max-width: 600px){

  .features .grid li{
    flex-basis: 100%;
  }

}*/



@media (max-width: 826px){

  #mapa{
    width: 400px;
    height: 400px;
  }



}


@media (max-width: 425px){

  #mapa{
    width: 300px;
    height: 400px;
  }

}

/* ------------Profile Card--------------- */

.galeria{
  background-image: url(../img/textura.jpg);
  background-size: 30%;
}

/* ----> wrapper */
#content-slider .slider-wrap {
  max-width: 1200px;
  width: 100%;
  margin: 0px auto;
  position: relative;
  text-align: right;
}

#content-slider .slider-wrap.full {
  width: 100%;
  max-width: 100%;
  text-align: center; 
  border: none;
}

/* -------> Responsive images (ensure images don't scale beyond their parents) */
#content-slider img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  vertical-align: middle;
  border: 0;
}

/* -------> Main */
#content-slider .slider {
  overflow: hidden;
  width: 100%;
  height: 35rem;
  margin: 0 auto;       
  position: relative;               
}

#content-slider .slider-inner {
  width: 500%;          
  line-height: 0;
  display: flex;
  height: 100%;
  animation: 30s slidy infinite;
  transition: all 2s ease-in-out; 
}

#content-slider .slider-main-title {
  text-align: center;
  font-weight: 700;
  font-size: 2rem;          
  line-height: 3rem;
  text-transform: uppercase;
  margin: 1rem 0;
}

#content-slider .slider .slider-head {
  position: absolute;
  z-index: 12;
  width: 40%;
  height: auto;
  display: inline-block;
  background: rgba(0, 0, 0, 0.5);
  padding: 1rem 1rem;
  margin: 1rem 0 0 1rem;
  overflow: hidden;
  transition: all 0.5s ease-in-out; 
}

#content-slider .slider-thumb .slider-head {
  position: absolute;
  z-index: 12;                      
  top: 0;
  right: 0;
  width: auto;
  height: auto;  
  text-align: right;
  margin: .5rem .5rem 0 0;
  opacity: 1;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}



/* -------> Main Img */
#content-slider figure {
  margin: 0;
  padding: 0;
  width: 20%;
  cursor: pointer;
  transition: all 2s ease-in-out; 
}

#content-slider figure img {
  width: 100%;
  position: relative;
}   

/* -------> Max contrls img preview */ 
#content-slider .slider-thumb {
  width: 25%;
  margin: 35rem 0% 0 0%;
  text-align: center;
  display: block;
  z-index: 1000;
  cursor: pointer;
  position: absolute;
}

#content-slider .slider-thumb:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: .55;
  transition: all .2s ease-in-out;
}

#content-slider .slider-thumb:hover:after {
  opacity: 0;
}

#thumb-1 { left: 0; }
#thumb-2 { left: 25%; }
#thumb-3 { left: 50%; }
#thumb-4 { left: 75%; }

#content-slider input[type='radio'] {           
  width: 10px;
  height: 10px;
  position: absolute;
  display: none;
}

#content-slider .slider-arrow-control {                   
  position: absolute;
  left: 0;
  z-index: 15;          
  top: 0%;
  width: 100%;
  height: 3.125rem;
  top: 50%;
  transform: translateY(-50%);
}

#content-slider .slider-dot {
  width: 15px;
  height: 15px;
  margin: 0 2px;
  text-align: center;
  display: inline-block;
  position: relative;
  z-index: 1000;
  cursor: pointer;
  border-radius: 100%;
  border: 2px solid #AF8D67;
  background: #99744F;

  transition: all 0.3s ease-in-out; 
}

#content-slider .slider-dot-control {
  padding: 1rem 0;
  width: 100%;
  bottom: 0;
  z-index: 10;
  position: absolute;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  font-size: 0;
  line-height: 0;
}   

#content-slider .slider-dot-control>label:hover { 
  width: 9px; 
  height: 9px; 
  background: #FFF; 
  border: 1px solid #AF8D67; 
}     


/* -------> Controls */ 


#input-1:checked ~ .slider .slider-inner { margin-left: 0%;   }
#input-2:checked ~ .slider .slider-inner { margin-left:-100%; }
#input-3:checked ~ .slider .slider-inner { margin-left:-200%; }
#input-4:checked ~ .slider .slider-inner { margin-left:-300%; }
#input-5:checked ~ .slider .slider-inner { margin-left:-400%; }




#input-1:checked ~ #thumb-1:after { opacity: 0; }
#input-2:checked ~ #thumb-2:after { opacity: 0; }
#input-3:checked ~ #thumb-3:after { opacity: 0; }
#input-4:checked ~ #thumb-4:after { opacity: 0; }


.slider-arrow-control>label:nth-child(2) {
  width: 3.125rem;
  height: 3.125rem;
  top: 50%;
  margin-top: -1.5625rem;
  display: inline-block;
  position: relative;           
  cursor: pointer;
}

#input-1:checked ~ .slider-arrow-control>label:nth-child(2),
#input-2:checked ~ .slider-arrow-control>label:nth-child(3),
#input-3:checked ~ .slider-arrow-control>label:nth-child(4),
#input-4:checked ~ .slider-arrow-control>label:nth-child(1),
#input-5:checked ~ .slider-arrow-control>label:nth-child(1),
#input-1:checked ~ .slider-arrow-control>label:nth-child(4),
#input-2:checked ~ .slider-arrow-control>label:nth-child(1),
#input-3:checked ~ .slider-arrow-control>label:nth-child(2),
#input-4:checked ~ .slider-arrow-control>label:nth-child(3) {
  width: 3.125rem;
  height: 3.125rem;
  top: 50%;
  margin-top: -1.5625rem;
  display: inline-block;
  position: relative;           
  cursor: pointer;
}

#input-1:checked ~ .slider-arrow-control>label:nth-child(2):after,
#input-2:checked ~ .slider-arrow-control>label:nth-child(3):after,
#input-3:checked ~ .slider-arrow-control>label:nth-child(4):after,
#input-4:checked ~ .slider-arrow-control>label:nth-child(1):after,
#input-5:checked ~ .slider-arrow-control>label:nth-child(1):after,
#input-1:checked ~ .slider-arrow-control>label:nth-child(4):after,
#input-2:checked ~ .slider-arrow-control>label:nth-child(1):after,
#input-3:checked ~ .slider-arrow-control>label:nth-child(2):after,
#input-4:checked ~ .slider-arrow-control>label:nth-child(3):after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 2.125rem;
  line-height: 3.125rem;
  color: #AF8D67;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 3.125rem;
  background: rgba(0,0,0,.5);
}

#input-1:checked ~ .slider-arrow-control>label:nth-child(2),  
#input-2:checked ~ .slider-arrow-control>label:nth-child(3), 
#input-3:checked ~ .slider-arrow-control>label:nth-child(4), 
#input-4:checked ~ .slider-arrow-control>label:nth-child(1) {       
  float: right;
  right: 0;                      
}

#input-1:checked ~ .slider-arrow-control>label:nth-child(2):after,  
#input-2:checked ~ .slider-arrow-control>label:nth-child(3):after, 
#input-3:checked ~ .slider-arrow-control>label:nth-child(4):after, 
#input-4:checked ~ .slider-arrow-control>label:nth-child(1):after {
  content: "\f054";                     
}

#input-1:checked ~ .slider-arrow-control>label:nth-child(4),
#input-2:checked ~ .slider-arrow-control>label:nth-child(1),
#input-3:checked ~ .slider-arrow-control>label:nth-child(2),
#input-4:checked ~ .slider-arrow-control>label:nth-child(3) {   
  float: left;
  left: 0;           
}

#input-1:checked ~ .slider-arrow-control>label:nth-child(4):after,
#input-2:checked ~ .slider-arrow-control>label:nth-child(1):after,
#input-3:checked ~ .slider-arrow-control>label:nth-child(2):after,
#input-4:checked ~ .slider-arrow-control>label:nth-child(3):after {
  content: "\f053";
}

/*#thumb-1:focus ~ .slider-inner { margin-left: 0%;   }
#thumb-2:focus ~ .slider-inner { margin-left:-100%; }
#thumb-3:focus ~ .slider-inner { margin-left:-200%; }
#thumb-4:focus ~ .slider-inner { margin-left:-300%; }
#thumb-5:focus ~ .slider-inner { margin-left:-400%; }*/

#content-slider input:checked ~ .slider-inner {
  animation: none;         
}
#content-slider input:hover ~ .slider-inner, 
#content-slider label:hover ~ .slider-inner {
  animation-play-state: paused;
}
#content-slider input:hover ~ .slider-inner, 
#content-slider label:hover ~ .slider-inner {
  animation-play-state: paused;
}
#content-slider span:focus ~ .slider-inner {
  animation: none;         
}
#content-slider span:hover ~ .slider-inner {
  animation-play-state: paused;
}


/* -------> Animation */
/*
@keyframes slidy {
20% { margin-left:    0%; }
25% { margin-left: -100%; }
45% { margin-left: -100%; }
50% { margin-left: -200%; }
70% { margin-left: -200%; }
75% { margin-left: -300%; }
95% { margin-left: -300%; }
100% { margin-left: -400%; }
}*/


/* -------> Responsive */
@media (max-width: 992px) {
  html {
    font-size: 12px;
  }

  #content-slider .slider-thumb .head {
    display: none;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 10px;
  }

  #content-slider .slider .head {
    display: none;
  }

  #content-slider .slider-dot { display: none; }

  #content-slider .slider-arrow-control { display: block; }


  #content-slider #thumb-2:focus { opacity: 1; } 

  #thumb-2:focus ~ #thumb-5 { display: none; }

  #content-slider #thumb-3:focus { opacity: 1; } 

  #thumb-3:focus ~ #thumb-5 { display: none; }

  #content-slider #thumb-4:focus { opacity: 1; } 

  #thumb-4:focus ~ #thumb-5 { display: none; }

}

@media (max-width: 480px) {
  #content-slider .slider-thumb img { display: none; }
}