.banner-home-proyectos {

  background-image: url(../img/webp/proyectos-banner.webp);

  width: 100%;

  height: 500px;

  background-repeat: no-repeat;

  position: relative;

  background-size: cover;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

 @media (max-width: 768px) {

  .banner-home-proyectos {

   background-position: center;

   height: 430px;

   align-items: center;

  }

 }

.titulo-banner2 {

  font-family: "Klavika";

  color: #fff;

  font-size: 100px;
  display: flex;
  flex-direction: column;
  gap: 1vw;
  align-items: center;

}

 @media (max-width: 768px){

  .titulo-banner2 {

   font-size: 65px;

  }

 }

.titulo-banner-pequeno2{

  font-size: 40px;

  font-family: 'Klavika';

  font-weight: 500;

  margin: 0px;

  height: 20px;

  color: #fff;

 }

  @media (max-width: 768px){

   .titulo-banner-pequeno2{

    height: 15px;

    font-size: 25px;

   }

  }



/* ++++++++++++++++++ Contenido principal ++++++++++++++++++ */

main.content-project {

  align-items: center;

  background-color: #ffffff;

  display: flex;

  flex-direction: column;

  height: auto;

  margin-bottom: 20px;

  width: 100%;

}



section.contain-cards-project {

  display: flex;

  height: 550px;

  flex-direction: row;

  width: 900px;

  border-radius: 15px;

  margin-bottom: 40px;

  justify-content: space-between;

}

div.div-card-left {

  height: 100%;

  width: 437px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

img.img-project {

  width: 437px;

  height: 287px;

}

div.div-contain-imgs {

  height: 127px;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  width: 100%;

  margin-top: 10px;

}

img.contain-img-project {

  width: 138px;

  height: auto;

}

div.div-contain-text {

  height: auto;

  display: flex;

  width: auto;

  background-color: #f2f3f4;

}

p.text-project {

  font-family: Arial, Helvetica, sans-serif;

  font-size: 18px;

  margin: 10px 20px;

  width: 100%;

  height: auto;

  margin-top: 10px;

  margin-bottom: 10px;

}



div.div-card-right {

  height: 100%;

  width: 437px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.grilla-algunos-proyectos {

 width: 70%;

 display: grid;

 grid-template-columns: repeat(3, 1fr);

 grid-gap: 5px;

 margin-top: -60px;

 z-index: 0;

 margin-bottom: 15px;

}

 @media (max-width: 768px) {

  .grilla-algunos-proyectos {

    width: 90%;

    grid-template-columns: repeat(2, 1fr);

  }

 }

 .item-gap {

  width: 100%;

  height: auto;

  display: flex;

  justify-content: center;

  flex-direction: column;

  overflow: hidden;

  border-radius: 15px;

 }

  @media (max-width: 768px){

   .item-gap{

    flex-direction: column-reverse;

   }

  }

 .item-gap-imagen{

  width: auto;

  height: 260px;

 }

  @media (max-width: 768px){

   .item-gap-imagen {

    height: 180px;

   }

  }

 .item-gap-imagen img{

  width: auto;

  height: 100%;

 }

 .item-gap-texto{

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

 }

 .item-gap-texto p{

  width: 80%;

  font-family: 'ClearSans', sans-serif;

  font-size: 16px;

  line-height: 1.1em;

 }



.grilla {

  width: 70%;

  display: grid;

  grid-template-columns: repeat(10, 1fr);

}

 @media (max-width: 768px) {

  .grilla {

    width: 90%;

    grid-template-columns: repeat(5, 1fr);

  }

 }



.item {

  width: 100%;

  height: 100px;

  overflow: hidden;

  background-color: #ccc;

  display: flex;

  align-items: center;

  justify-content: center;

}

.item img {

  width: auto;

  height: 100%;

}



/* The Modal (background) */

.modal-project {

  display: none; /* Hidden by default */

  position: fixed; /* Stay in place */

  z-index: 2; /* Sit on top */

  padding-top: 50px; /* Location of the box */

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  background-color: rgb(0, 0, 0); /* Fallback color */

  background-color: rgba(0, 0, 0, 0.8); /* Black w/ opacity */

}



/* Modal Content (image) */

.item img.item-img {

  cursor: pointer;

  transition: 0.3s;

}



.item img.item-img:hover {

  opacity: 0.5;

}



.modal-project-content {

  height: 90%;

  margin: auto;

  display: block;

  width: 50%;

  opacity: 1 !important;

  max-width: 1200px;

}



/* Add Animation */

.modal-project-content,

.modal-project-caption {

  -webkit-animation-name: zoom;

  -webkit-animation-duration: 0.6s;

  animation-name: zoom;

  animation-duration: 0.6s;

}



@-webkit-keyframes zoom {

  from {

    -webkit-atransform: scale(0);

  }

  to {

    -webkit-transform: scale(1);

  }

}



@keyframes zoom {

  from {

    transform: scale(0);

  }

  to {

    transform: scale(1);

  }

}



/* The Close Button */

.modal-project-close {

  position: absolute;

  top: 15px;

  right: 35px;

  color: #f1f1f1;

  font-size: 40px;

  font-weight: bold;

  transition: 0.3s;

}



.modal-project-close:hover,

.modal-project-close:focus {

  color: #bbb;

  text-decoration: none;

  cursor: pointer;

}



/*GALLERY*/

.gallery {

  display: grid;

  height: auto;

  grid-template-columns: repeat(10, 1fr);

  gap: 0px;

  max-width: 1000px;

  width: 70%;

 }

  @media (max-width: 768px){

   .gallery{

    width: 90%;

    grid-template-columns: repeat(4, 1fr);

   }

  }



 .gallery img {

  width: 100%;

  height: 100px;

  display: block;

  object-fit: cover;

  transition: transform 0.3s;

  cursor: pointer;

 }



 .gallery img:hover {

  transform: scale(1.05);

 }



 .lightbox {

  display: none;

  position: fixed;

  z-index: 1000;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.9);

  justify-content: center;

  align-items: center;

 }



 .lightbox-content {

  display: flex;

  overflow: hidden;

  object-fit: fill;

  width: 80%;

  height: 80%;

  background-size: cover;

  position: relative;

  align-items: center;

 }



 .lightbox-slide {

  display: none;

 }



 .lightbox-slide img {

  width: 100%;

  border-radius: 8px;

 }



 .lightbox .close {

  position: absolute;

  top: 20px;

  right: 20px;

  color: #182828;

  font-size: 35px;

  font-weight: bold;

  transition: 0.3s;

  background-color: #fff;

  width: 35px;

  height: 35px;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

 }



 .lightbox .close:hover,

 .lightbox .close:focus {

  color: #bbb;

  text-decoration: none;

  cursor: pointer;

 }



 .lightbox .prev,

 .lightbox .next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  padding: 16px;

  margin-top: -22px;

  color: white;

  font-weight: bold;

  font-size: 20px;

  transition: 0.6s ease;

  border-radius: 0 3px 3px 0;

  user-select: none;

 }



 .lightbox .next {

  right: 10px;

  border-radius: 3px 0 0 3px;

 }



 .lightbox .prev {

  left: 10px;

  border-radius: 3px 3px 0 0;

 }



 .lightbox .prev:hover,

 .lightbox .next:hover {

  background-color: rgba(0, 0, 0, 0.8);

 }