/*HERO*/
.slider-box{
    width: auto;
    margin: auto;
    margin: auto;
    overflow: hidden;
    
}
    .slider-box ul{
        margin: 130px 0 0 0;
        display: flex;
        padding: 0;
        width: 500%;
        animation: slide 20s infinite alternate ease-in-out;
    }
    .slider-box li{
        width: 100%;
        list-style: none;
        position: relative;
    }
    .slider-box img{
        width: 100%;
        height: 100%;
        position: relative;
        
    }

    @keyframes slide {
        0% { margin-left: 0; }
        20% { margin-left: 0; }
        25% { margin-left: -100%; }
        40% { margin-left: -100%; }
        45% { margin-left: -200%; }
        60% { margin-left: -200%; }
        65% { margin-left: -300%; }
        80% { margin-left: -300%; }
        85% { margin-left: -400%; }
        100% { margin-left: -400%; }
    }    




.content{
    padding: 0;
    margin: 0;
}




/*ICONOS*/
    #icon_blocks{
        background-color: #183
    
    ;
        height: 125px;
        padding: 0 8%;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: space-between;
    }
        #icon_blocks div{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 60px;
            width: auto;
        }   
            #icon_blocks div img{
                height: 50px; 
                margin-right: 10px;
            }
            #icon_blocks div span{ 
                color: #fff;
                font-size: 18pt;
                line-height: 1.1;
            }

/*PRODUCTOS*/
    /*NUESTROS PRODUCTOS*/
    .productos_destacados{
        /*margin: 0px 0;*/
        padding: 03%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        color: #18377A;
     
        background-image: url("/img/hero/BANNERS-09-09.png");

           
  /*min-height: 200px; */

  /* Create the parallax scrolling effect */
  background-attachment: fixed;

  background-repeat: no-repeat;
  background-size: cover;
      
        
       
       
    }
    .productos_destacados a{
        text-decoration: none;
    }
    .productos_destacados div{
        flex: 1 0 20%;
        max-width: 280px;
        
    }
    .productos_destacados div img{
        border-radius: 25px;
        width: 100%;
        height: auto;
        max-width: 100%;
        background:blue;
    }
    .productos_destacados div h5{
        color: #ffdf00;
        font-size: larger;
        font-weight: 900;
        text-align: center;
        margin: 8px 0;
    }
    /*NUESTROS PRODUCTOS*/


hr{
    margin: 10px 200px;
}


/* banner de los circulos y triangulos */ 

.productoInfo{
   
         background-image: url("/img/hero/BANNERS-finall.png");
               /*background:#15297c;*/

           
  min-height: 200px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;

  background-repeat: no-repeat;
  background-size: cover;

           
  min-height: 200px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;

  background-repeat: no-repeat;
  background-size: cover; 
}


.Producto_Ofr{
    
background-image: url("/img/hero/BANNERS-finall.png");
               /*background:#15297c;*/

          
  /* Create the parallax scrolling effect */
  background-attachment: fixed;

  background-repeat: no-repeat;
  background-size: cover;

           
  /*min-height: 200px; */

  /* Create the parallax scrolling effect */
  background-attachment: fixed;

  background-repeat: no-repeat;
  background-size: cover; 
     }

/* ORDER */
            .order_box{
                width: 500px;
                height: 410px;
                background-color: white;
              
                position: absolute;
                z-index: 50;
                top: 180px; 
                left:1300px;
                border-radius: 25px;
               
            }   
                .order_box form{
                    height: 400px;
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    justify-content: center;
                    align-items: center;
                 
                }
                .order_box form input, 
                .order_box form textarea{
                    margin: 8px;
                }
                /* .order_box form input{
                    border-radius: 25px;
                    width: 450px;
                    height: 80px;
                    border: 0;
                    padding-left: 20px;
                    padding: 0 20px;
                }
                .order_box form textarea{
                    border-radius: 25px;
                    width: 450px;
                    height: 130px;
                    border: 0;
                    padding: 20px 15px;
                    resize: none;
                }   
                    
                .order_box form button{
                    height: 50px;
                    width: 380px;
                    margin-top: 30px;
                    border-radius: 70px;
                    color: #fff;
                    background-color: #09BB1B;
                    border: 0;
                    font-size: larger;
                    font-weight: bold   ; 
                }*/ 
                
        /* ORDER */
        
        





/*PRODUCTOS OFERTAS-----------------------------------------------*/
.offers_box_mobile {
    display: none;
}
.offers_box{
    margin: 4% 0;
    padding: 0 5%;
    flex-direction: column;
    display: flex;
    align-items: center;
    
}
.offers_box h1 {
    font-weight: 600;
    color: #18377A;

    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;
}
.offers_box .products_box{
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(5 , 1fr);
    gap: 30px;
    grid-row-gap:0
}
.offers_box .products_box a{
    text-decoration: none;
}
.offers_box .products_box div{
    margin: 30px 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);    
    width: 300px;
}
.offers_box .products_box div img{
    background-color: #e6e6e6;
    width: 300px;
    height: auto;
}
.offers_box .products_box div span{
    display: flex;
    flex-direction: column;
    padding: 10px;
}   
.offers_box .products_box div span .categoria{
    font-size: 10pt;
    color: #18377A;
    
}
.offers_box .products_box div span h5{
    font-size: 13.5pt;
    font-weight: 750;
    color: #18377A;
    height: auto;
    display: flex;
}
.offers_box .products_box div span .datos{
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 22px;  
}
.offers_box .products_box div span .datos .medidas{
    color: #18377A;
    display: flex;
    align-items: center;
    justify-content: center ;
    width: auto;
    padding: 0 5px;
    text-align: center;
    margin: 0 5px 0 0;
    background-color: #e6e6e6;
    font-size: smaller;
}
.offers_box .products_box div span .datos .color{
    margin-left: 8px;
    border: 1px solid #e6e6e6;
    height: 20px;
    width: 20px;
}
.offers_box .products_box div span button{
    margin: 15px 0;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 5% 0;
    border-radius: 17px;
    background-color: #09BB1B;
    color: #fff;
    border: none;
    font-weight: bold;
    font-size: large;
}
.offers_box .button_more{
    margin: 20px;
    width: 100%;
    max-width: 400px;
    height: 40px;
    font-size: large;
    font-weight: bold;
    list-style: none;
    text-decoration: none;
    color: #fff;
    border-radius: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background-color: #18377A
}  
.offers_box .button_more:hover{
    background-color: #E6BD5C;
    }
/*---------------------------------------------------NUESTROS PRODUCTOS*/





/*BANNER DE NOTICIAS--------------------------------------------------*/
.new_banner{
    height: 450px;
    width: auto;
}
/*--------------------------------------------------BANNER DE NOTICIAS*/




/* CLIENTES ---------------------------------------------------------*/ 
.clients_box {
    /*margin: 4% 0;*/
    padding: 0;
    display: flex;
    flex-direction: column;
} 
.clients_box h1 {
    color: #18377A;
    text-align: center;
}
.clients_box .clients_logo {
    margin:  20px 0;
    padding: 0 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.clients_box .clients_logo div {
    margin: 10px;
    flex: 1 0 10%;
    max-width: 300px;
}
.clients_box .clients_logo div img {
    width: 100%;
    height: auto;
    max-width: 100%;
}
/*---------------------------------------------------------CLIENTES*/


.flex-nosotros{ 
      display: flex;
  background-color: black;
  
  /*--------------------------------*/ 
  flex-direction: row;

  text-align: center;

}

.flex-nosotros > div {

  margin: 10px;
  padding: 20px;
 

}
.flex-nosotros > div >h2 {


font-size: 18px;
}