/* header */

@media (max-width: 952px){
  .enlace{
      padding-left: 20px;
  }
  nav ul li a{
      font-size: 16px;
  }
}

@media (max-width: 768px){

  nav{
      width: 100%;
      z-index: 10;
      
      
  }
  .checkbtn{
      display: block;
  }
  ul{
      position: fixed;
      width: 100%;
      height: 100vh;
      background: #F5F5F5;
      /* el top 80 te dice que este 80 px abajo del menu */
      top: 80px;
      left: -100%;
      text-align: left;
      transition: all .5s;
      
  }

  nav ul li a{
      color: #000;
  }   
  nav ul li{
      display: block;
      margin: 50px 0;
      line-height: 30px;
      
  }
  nav ul li a{
      font-size: 20px;
  }
  li a:hover, li a.active{
      background: none;
      color: #ff5b25;
  }
  #check:checked ~ ul{
      left:0;
  }
}

/* BANNER */
@media only screen and (max-width: 768px) {
  .banner-img-movil{   
    display: block;
    z-index: 1;
    position: relative;
  }

  .banner-img-movil img{
     
    width: 100%;
    height: auto;
  }
  
  .banner-text h2{
    font-size: 4.5rem;
    padding-top: 40px;
    letter-spacing: 5px;
  }

 


}

/* MAIN PROCES */
@media only screen and (max-width: 768px) {
  .pleca{    
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    
  }

  .pleca .titulos{
    margin-top: 30px;
    padding-top: 30px;
  }
  
  .btn-mainproces {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* margin-top: 150px; */
    
  }
  
  .btn-mainproces img {
    width: 35%;
    height: auto;      
    
  }
}

@media only screen and (max-width: 1100px) {
  .btn-mainproces img {
    height: 140px;
    width: 140px;
    margin: 10px;
    transition: transform 0.2s ease-in-out;
  }
  
}

/* mediaquery slider */
@media screen and (max-width: 768px){
  .container-all{
    width: 90%;
    margin-top: 45px;
  }
}

/* Establecemos el ancho máximo del contenedor de página */
@media screen and (max-width: 768px) {
  .container-slider {
    
    max-width: 100%;
  }
}

/* Hacemos que el contenedor de la imagen sea flexible para adaptarse a diferentes tamaños de pantalla */
@media screen and (max-width: 768px) {
  .slider-frame {
    
    position: relative;
    width: 100%;
  }
}

/* Ajustamos la animación para que se adapte a diferentes tamaños de pantalla */
@media screen and (max-width: 768px) {
  @keyframes slide {
    0% {margin-left: 0%;}
    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%;}
    120% {margin-left: -400%;}
  }
}


 /* Estilos para la sección de Project Development */

@media only screen and (max-width: 768px) {
 
  .developement {      
    text-align: center;
    
  }
  .developement img{
    width: 100%;
  }

  .spacer100{
    display: none;
  }
}


/*----------OUR CUSTOMERS----------*/

@media only screen and (max-width: 768px) {
  .fondo-tit {
    background-color: #f5f5f5;
    padding: 20px 0;
  }
  
  .tit-clientes {
    margin-bottom: 20px;
  }
  
  .clientes {
    display: flex;
    flex-wrap: wrap;
    /* flex-direction: row; */
    justify-content: center;
    margin: 0;
    
  }
  
  .clientes-int {
    /* background-color: aqua; */
    margin: 0px;
    width: 33%;
    height: auto;
    /* width: calc(60% - 20px); */
  }
  
 
}

/* PIE */

@media only screen and (max-width: 900px) {
  footer{
    background: black;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    
  }

  .c-texto-pie {
    margin-bottom: 20px;
  }

  .c-texto-pie p {
    font-size: 14px;
  }
}