/*CARROUSEL DE IMAGENES*/

.galerias {
   width: 35%;
   margin: auto;
}

@media (max-width: 1400px) {
   .galerias{
      width: 50%;
   }
}

@media (max-width: 1000px) {
   .galerias{
      width: 70%;
   }
}

@media (max-width: 600px) {
   .galerias{
      width: 90%;
   }
}

/* contenedor de carrousel */
.carrousel {
   width: 100%;
   position: relative;
   margin: auto;
}

/* esconder imagenes */
.diapo {
   display: none;
}

@media (max-width: 550px){
   .diapo {
      display: flex;
      justify-content: center;
      align-items: center;
   }
}

img {
   width: 90%;
   margin: 0 5%;
}

@media (max-width: 550px){
   img {
      width: 80%;
      text-align: center;
      margin: 0 10%;
   }
}



/* boton previo y posterior */
.prev, .poste {
   cursor: pointer;
   position: absolute;
   top: 50%;
   width: auto;
   margin-top: -22px;
   padding: 16px;
   color: #02ff35;
   font-weight: bold;
   font-size: 18px;
   transition: 0.6s ease;
   user-select: none;
}

/* posiciond el boton posterior */
.poste {   
   right: -15px;
   border-radius: 48%;
}

.prev {
   left: -15px;
   border-radius: 48%;
}

/* color de fondo de previo y posterior */
.prev:hover, .poste:hover {
   background-color: #fff;
    box-shadow: 0 7px 5px rgba(0, 0, 0, 0.1);
}

/* texto */
.text {
   color: #f2f2f2;
   font-size: 15px;
   padding: 8px 12px;
   position: absolute;
   bottom: 8px;
   width: 100%;
   text-align: center;
}

/* numero */
.numdiap {
   color: #121212;
   font-size: 12px;
   padding: 8px 12px;
   position: absolute;
   top: 0;
}

/* puntos de diapositivas */
.puntodiap {
   cursor: pointer;
   height: 10px;
   width: 10px;
   margin: 0 2px;
   background-color: #001960;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
}

.active, .puntodiap:hover {
   background-color: #3dff20;
}

/* animacion desvanecer */
.fade {
   animation-name: fade;
   animation-duration: 1.5s;
}

@keyframes fade {
   from {opacity: .4}
   to {opacity: 1}
}

/* FIN CARROUSEL*/

/* GALERIA DE CLIENTE EN GRID */

.galeria {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   margin: 0 15%;
}

@media (max-width: 600px){
   .galeria{
      grid-template-columns: repeat(3, 1fr);
      width: 100%;
      margin: 0;
   }
}

.galeria-item {
   margin: 0; 
   padding: 0; 
   text-align: center;
   cursor: pointer;
   overflow: hidden;    
}

.galeria-item img {
   margin: 0;
   width: 100%; 
   height: 100%;
   transition: .5s;
}

.galeria-item:hover img {
   transform: scale(1.05);
   transition: .5s;
}

/* Estilos para el lightbox */
.lightbox {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   z-index: 1;
   text-align: center;
}

.lightbox-contenido {
   margin: 100px auto;
   max-width: 600px;
   max-height: 600px;
}

@media (max-width: 1400px) and (max-height: 1200px){
   .lightbox-contenido {
      margin: 70px auto;
      max-width: 400px;
      max-height: 400px;
   }   
} 

@media (max-width: 550px){
   .lightbox-contenido {
      margin: 100px auto;
      max-width: 300px;
      max-height: 300px;
   }
}

.lightbox-contenido2 {
   margin: 100px auto;
   max-width: 600px;
}

@media (max-width: 550px){
   .lightbox-contenido2 {
      margin: 100px auto;
      max-width: 300px;
   }
}

.cerrar {
   color: white;
   font-size: 35px;
   position: absolute;
   top: 85px;
   right: 30px;
   cursor: pointer;
}

/* FINDE GALERIA GRID */

/* CONTENEDOR DIAPOSITIVA*/

.diapo2-container {
   width: 70%;
   position: relative;
   margin: auto;
}

@media (max-width: 992px){
   .diapo2-container{
      width: 70%;
   }
}

@media (max-width: 600px){
   .diapo2-container{
      width: 100%;
   }
}

/*Imagen de slide*/

.img-slide{
   display: flex;
   justify-content: center;
   margin: auto;
   max-width: 50%;
}

@media (max-width: 992px){
   .img-slide{
      max-width: 90%;
   }
}

@media (max-width: 600px){
   .img-slide{
      max-width: 100%;
   }
}

/* Estilo para las imágenes */
.diapo2 {
   display: none;
}

/* FIN */

/*SLIDER DE MARCAS*/

.marcas-slider-container {
   width: 60%;
   height: auto;
   margin: auto;
   overflow: hidden;
}

@media (max-width: 1200px){
   .marcas-slider-container {
      width: 80%;
   }
}

.marcas-slider-track {
   padding: 0;
}

.marcas-slider-container .marcas-slider-track {
   display: flex;
   animation: scroll 40s linear infinite;
   -webkit-animation: scroll 40s linear infinite;
   width: calc(250px * 24); 
}

.marcas-slider-container .marca-slider {
   width: 250px;
}

@media (max-width: 600px){
   .marcas-slider-container .marca-slider {
      width: 250px;
   }
}
.marcas-slider-container .marca-slider img {
   width: 100%;
}

@keyframes scroll {
   0% {
     -webkit-transform: translateX(0);
     transform: translateX(0);
   }
   100% {
     -webkit-transform: translateX(calc(-250px * 12));
     transform: translateX(calc(-250px * 12));
   }   
}

/* FIN DIAPOSITIVAS */

/*SLIDER DE MARCAS*/

.marcas-slider-container2 {
   width: 60%;
   height: auto;
   margin: auto;
   overflow: hidden;
   background-color: #fff;
}

@media (max-width: 1200px){
   .marcas-slider-container2 {
      width: 80%;
   }
}

.marcas-slider-track2 {
   padding: 0;
}

.marcas-slider-container2 .marcas-slider-track2 {
   display: flex;
   animation: scroll2 40s linear infinite;
   -webkit-animation: scroll 40s linear infinite;
   width: calc(190px * 32); 
}

.marcas-slider-container2 .marca-slider2 {
   margin-left: 40px; 
   width: 150px;
}

@media (max-width: 600px){
   .marcas-slider-container2 .marca-slider2 {
      width: 150px;
   }
}
.marcas-slider-container2 .marca-slider2 img {
   width: 100%;
}

@keyframes scroll2 {
   0% {
     -webkit-transform: translateX(0);
     transform: translateX(0);
   }
   100% {
     -webkit-transform: translateX(calc(-190px * 16));
     transform: translateX(calc(-190px * 16));
   }   
}

/* FIN DIAPOSITIVAS MARCAS */