/***************** body header ****************/

body {
    width: 100%;
    margin: 0 auto;
}




  /*********************** banner-home ***************/

    .slider-top {
    width: 100%;
    height: auto;
    }

   .slider-top video { 
    width: 100%;
    height: 100%;
    }

     #movil {
        display: none;
    }

    
   /*********************** info-web ************************/

   #grup-prov {
       margin-top: 50px;
       width: 100%;
       height: auto;
       background: transparent;
   }

   #grup-prov .container-info {
       width: 1580px;
       height: 350px;
       display: flex;
       margin: 0 auto;
   }

   #grup-prov .container-info .img-org { 
     width: 600px;
     height: 300px;
     margin: 0 auto;
   }

   #grup-prov .container-info .img-org img {
       width: 100%;
       
   }

   #grup-prov .container-info .info-org {
     width: 1000px;
     height: 360px;
   }

   #grup-prov .container-info #info-left {
     margin-left: 2%;
   }

   #grup-prov .container-info #info-right {
    margin-right: 2%;
  }

   #grup-prov .container-info .info-org h2 { 
     position: relative;
     font-size: 27px;
     font-family: FrizQuadrataRegular;
     color: #616161;
     font-weight: 100;
     top: -30px;

   }

   #grup-prov .container-info .info-org h2 .line {
     width: 70%;
     height: 3px;
     background-color: #ff0000;
     float: right;
     position: relative;
     top: 15px;
     border-radius: 3px;
   }

   #grup-prov .container-info .info-org p {
       font-family: RalewayRegular;
       font-size: 18px;
       color: #616161;
   }

   #grup-prov .container-info .info-org #text-down { 
    position: relative;
    font-size: 40px;
    font-family: Blacksword;
    color: #ff0000;
    font-weight: 100;
    top: 0px;
  }

/********************* contenedor de productos ***********************/

  #container-product {
      width: 1580px;
      margin: 0 auto;
      height: 500px;
  }

  .sect-largo {
    height: 900px !important;
  }

  .sect-largo #cont-secundario {
    width: 60% !important;
    margin: 0 auto;
   }


  #container-product .ico-container {
      width: 300px;
      height: auto;
      margin: 0 auto;
      text-align: center;
   }

   #container-product .title {
       width: 100%;
       margin: 0 auto;
       text-align: center;
       display: flex;
       height: 40px;
       font-family: RalewayMedium;
       color: #616161;
       font-weight: 20px;
   }

   #container-product .title #line-a { 
     width: 43%;
     height: 2px;
     background-color: #616161;
     margin: 0 auto;
     position: relative;
     top: 10px;
     border-radius: 2px;
   }

   #container-product .list-product-container {
       width: 100%;
       display: flex;
       margin-top: 30px;
   }

   #container-product .list-product-container .product-cont {
       margin: 0 auto;
       width: 250px;
       height: 360px;
       text-align: center;
   }


   #container-product .list-product-container .product-cont:hover img {
       transform: scale(1.05);
   }

   #container-product .list-product-container .product-cont:hover p {
       color:#313131;
   }

   #container-product .list-product-container .product-cont a {
       text-decoration: none;
   }

   #container-product .list-product-container .product-cont img {
       width: 100%;
       transition: all .3s ease-in-out;
       -webkit-transition: all .3s ease-in-out;
   }

   #container-product .list-product-container .product-cont p {
    font-family: RalewayMedium;
    color: #616161;
    font-size: 15px;
    transition: all .3s ease-in-out;
       -webkit-transition: all .3s ease-in-out;
    }

    #container-product .list-product-container .product-cont #con-ind {
        font-family: RalewayLightItalic;
        color: #616161;
        font-size: 12px;
        transition: all .3s ease-in-out;
       -webkit-transition: all .3s ease-in-out;
       position: relative;
       
    }

    #container-product .list-product-container .product-cont:hover #con-ind:after {
        width: 100px;
    }

    #container-product .list-product-container .product-cont #con-ind:after {
     position: absolute;
     background-color:#7fd800;
     left: 30%;
     top: 0;
     width: 0px;
     height: 100%;
     content: 'Conoce más';
     color: #fff;
     border-radius: 10px;
     overflow: hidden;
     transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    }

/*****************  licencias *****************/
    
#licencias {
    width: 1580px;
    margin: 0 auto;
    height: 500px;
}

#licencias .title-lic {
    width: 100%;
   margin: 0 auto;
   text-align: center;
   display: flex;
   height: 40px;
   font-family: RalewayMedium;
   color: #616161;
   font-weight: 20px;
}

#licencias .title-lic .line-cli {
    width: 45%;
    height: 2px;
    background-color: #616161;
    margin: 0 auto;
    position: relative;
    top: 10px;
    border-radius: 2px;
}

#licencias .container-logos-lic {
    width: 100%;
    height: 120px;
    display: flex;
    position: relative;
    top: 40px;
    margin: 0 auto;
}

#licencias .conta-doble-lic { 
    width: 90%;
}

#licencias .container-logos-lic .logo-marc { 
    margin: 0 auto;
    width: 120px;
    height: auto;
}

#licencias .container-logos-lic .logo-marc img {
    position: relative;
 }

    
/*****************  clientes *****************/
    #clientes {
        width: 1580px;
        margin: 0 auto;
        height: 400px;
    }

    #clientes .title-client {
        width: 100%;
       margin: 0 auto;
       text-align: center;
       display: flex;
       height: 40px;
       font-family: RalewayMedium;
       color: #616161;
       font-weight: 20px;
    }

    #clientes .title-client .line-cli {
        width: 45%;
        height: 2px;
        background-color: #616161;
        margin: 0 auto;
        position: relative;
        top: 10px;
        border-radius: 2px;
    }

    #clientes .container-logos {
        width: 100%;
        height: 105px;
        display: flex;
        position: relative;
        top: 40px;
        margin: 0 auto;
    }

    #clientes .conta-doble { 
        width: 90%;
    }

    #clientes .container-logos .logo-marc { 
        margin: 0 auto;
        width: 150px;
        height: auto;
    }

    #clientes .container-logos .logo-marc img {
        width: 100%;
        filter: grayscale(1);
     }



/**************** biodegradable ******************/

    #sustentable {
        width: 100%;
        height: 200px;
        background-image: url(../assets/home/background-bio.jpg);
        background-size: cover;
        background-position: center;
        text-align: center;
    }

    #sustentable .container-susten { 
        width: 1580px;
        height: 100%;
        display: flex;
        margin: 0 auto;
        position: relative;
        top: 20%;
    }

    #sustentable .container-susten .ico-sus { 
       width: 150px;
       height: auto;
       margin: 0 auto;
    }

    #sustentable .container-susten .ico-sus img {
        width: 100%;
     }

     #sustentable a { 
      position: relative;
      text-decoration: none;
      color: #fff;
      font-family: RalewayMedium;
      top: -40px;
      transition: all .3s ease-in-out;
      -webkit-transition: all .3s ease-in-out; 
     }
      
     #sustentable a:hover { 
       color: yellowgreen;
       text-decoration:underline;
     }

/***************** divisor ****************/
.line-border {
    width: 100%;
    height: 100px;
}


/************** media queries **************/

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




/*************** banner-home ****************/

.slider-top {
    width: 100%;
    height: 400px;
  } 

  .slider-top video { 
    width: 100;
    height: 100%;
    }

   #desktop {
    display: none;
  }

   #movil {
    display: block;
  }

  


/*********************** info-web ***************/
#grup-prov {
    margin-top: 15px;
    
}

#grup-prov .container-info {
    width: 100%;
    height: 600px;
    display: grid;
}

#grup-prov .container-info .img-org { 
    width: 100%;
    height: 200px;
  }

  #grup-prov .container-info .info-org {
    width: 90%;
    height: 190px;
    margin: 0 auto;

  }
    
  #grup-prov .container-info .info-org h2 { 
    font-size: 17px;
    top: -20px;
  }

  #grup-prov .container-info .info-org h2 .line {
    width: 100%;
    height: 3px;
    float: right;
    position: relative;
    top: 15px;
    border-radius: 3px;
  }

  #grup-prov .container-info .info-org p {
    font-size: 14px;
    text-align: left;
    width: 100%;
}

#grup-prov .container-info .info-org #text-down { 
    font-size: 25px;
    font-weight: 100;
    top: 0px;
  }

/********************* contenedor de productos ***********************/

#container-product {
    width: 100%;
    height: 910px;
}

.top-responsive-a {
    height: 700px !important;
}

.ropa-d {
    height: 1200px !important;
}

#container-product .ico-container {
    width: 200px;
    height: auto;
 }

 #container-product .title {
    display: flex;
    height: 40px;
    font-weight: 20px;
    font-size: 15px;
 }

#container-product .list-product-container {
    width: 100%;
    display: block;
    margin-top: 30px;
}

.sect-largo #cont-secundario {
    width: 100% !important;
   }

#container-product .list-product-container .product-cont {
    margin: 0 auto;
    width: 170px;
    height: 260px;
    float: left;
    margin-left: 10px;
    transform: translateX(15%);

}

/**************** licencias ****************/

/*****************  clientes *****************/

#licencias {
    width: 100%;
    margin: 0 auto;
    height: 950px;
    
}

#licencias .title-lic {
    width: 100%;
   height: 40px;
   font-size: 15px;
}

#licencias .container-logos-lic {
    width: 100%;
    height: 250px;
    display: block;
    position: relative;
    top: 40px;
}

#licencias .container-logos-lic .logo-marc { 
    margin: 10px 2.5%;
    width: 110px;
    height: auto;
    float: left;
    transform: translateX(7px);
}

#licencias .container-logos-lic .logo-marc img { 
    width: 75%;
}

/*****************  clientes *****************/

#clientes {
    width: 100%;
    margin: 0 auto;
    height: 750px;
    
}

#clientes .title-client {
    width: 100%;
   height: 40px;
   font-size: 15px;
}

#clientes .container-logos {
    width: 100%;
    height: 200px;
    display: block;
    position: relative;
    top: 40px;
}

#clientes .container-logos .logo-marc { 
    margin: 10px 2%;
    width: 110px;
    height: auto;
    float: left;
    transform: translateX(7px);
}



/**************** division *****************/

.line-border {
    width: 100%;
    height: 30px;
}

/**************** biodegradable ******************/

#sustentable {
    width: 100%;
    height: 265px;
    background-size: cover;
    background-position: center;
}

#sustentable .container-susten { 
    width: 100%;
    height: 250px;
    display: block;
    top: 25%;
}

#sustentable .container-susten .ico-sus { 
    width: 100px;
    height: auto;
    margin: 0 auto;
    float: left;
    margin-left: 15px;
    transform: translateX(20px);
}

#sustentable a { 
    width: 250px;
    font-size: 10px;
}

}