/*Inicia cambio de estilo de scroll bar*/
::-webkit-scrollbar{
  background: #d4d4d4;
  width:  20px;
height: 20px;
}
::-webkit-scrollbar-track {
background: #e1e1e1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #b3b3b3;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb:active {
background-color: #45e5eb;
}
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 4px;
}
/*Finaliza cambio de estilo scroll bar*/
/*CAROUSEL al contenedor padre se le deja el tamaño del 100%*/

/*en la clase del carousel se realiza independiente para que ahi pueda agregar el escroll X*/
.carousel{

}
/*el texto ya esta centrado ya que se le dio el ancho del 100% al contenedor padre*/
#carousel p{  
color: #134A73; 
font-family:sans-serif;
font-size:20px;
text-align:center;   
margin-top: 3%;
margin-bottom: 40px;  
}
/* se le da el tamaño que se desea para la visulizacion de las imagenes ya que en el contenedor de la clase de carousel es donde estara creado el scroll*/
#carousel .gallery {
display: flex;
flex-direction: column;
width:1000px;
height: 300vh;

}

#carousel .item {
flex: 0.9;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: none;
transition: flex 0.8s ease;
}

#carousel .item:hover{
  flex: 15%;
}

/*fotos*/

#carousel .item-1 { 
  background-image: url('../images/agua1.jpg');
}
#carousel .item-2 { 
  background-image:  url('../images/agua2.jpg');
}
#carousel .item-3 { 
  background-image: url('../images/agua3.jpg');
}
#carousel .item-4 { 
  background-image: url('../images/agua4.jpg');
}
#carousel .item-5 { 
  background-image: url('../images/agua5.jpg');
}
#carousel .item-6 { 
  background-image:url('../images/agua6.jpg');
}
#carousel .item-7 { 
  background-image: url('');
}
#carousel .item-8 { 
  background-image: url('');
}

#carousel .item-9 { 
  background-image: url('');
}
#carousel .item-10 { 
  background-image: url('');
}
#carousel .item-11 { 
  background-image: url('');
}
#carousel .item-12 { 
  background-image: url('');
}
/*se agrego el cursos para que sepa que esta en cada imagen*/
.gallery .item:hover{
  cursor:pointer;
}


.btn-whatsapp {
  display:block;
  width:120px;
  height:120px;
  color:lavender;
  position: fixed;
  right:20px;
  bottom:20px;
  border-radius:50%;
  line-height:80px;
  text-align:center;
  z-index:999;
}