@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "DM Sans", sans-serif;
}

.body{
    margin: 0 auto;
    max-width: 1400px;
    font-family: "DM Sans", sans-serif;
    /*background: #75E4A6;*/
    background: #fff;
    position: relative;
    
}

.bodyIndex{
    margin: 0 auto;
    max-width: 1400px;
    font-family: "DM Sans", sans-serif;
    position: relative;
    background: url(/img/fondoIndex.jpeg);
    background-repeat: no-repeat;
    background-position: 30% 28%;
    background-size: auto 70%;
}
.bodyEmpresa{
    margin: 0 auto;
    max-width: 1400px;
    font-family: "DM Sans", sans-serif;
    position: relative;
    background: url(/img/tranquera.jpeg);
    background-repeat: no-repeat;
    background-position: 30% 15%;
    background-size: auto 65%;
}
.bodyContacto{
    margin: 0 auto;
    max-width: 1400px;
    font-family: "DM Sans", sans-serif;
    position: relative;
    background: url(/img/manga.jpeg);
    background-repeat: no-repeat;
    background-position: 30% 15%;
    background-size: auto 65%;
}

.title{
    display: block;
    width:98%;
    padding: 0px 30px;
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    height: 40px;
}

/*-----------------MENU--------------*/
nav{
    background:#d41c1c;
    height: 80px;
}

.icons{
    position: absolute;
    left: 0px;
    font-size: 20px;
    width:150px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.icons a{
    text-decoration: none;
    color: #fff;
    transition: .3s;
}
.icons a:hover{
    text-decoration: none;
    color: #000;
    font-size: 22px;
}


.nav__container{
    width: 90%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.nav__logo{
    cursor: pointer;
}

.nav__img{
    width: 30px;
    display: block;
}

.list{
    background:#d41c1c;;
    width: 100%;
    max-width: 450px;
    position: fixed;
    right: 0;
    top: 80px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    
    transform: translate(100%);
    transition: transform .5s;
    z-index: 999;
}

/*.nav:hover .list{
    transform: translate(0);
}*/ /*puro css*/

.list--show{
    transform: translate(0);
}

.list__item{
    list-style: none;
}

.list__link{
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
}
.list__link:hover{
    color: #000;
}

/*--------/MENU--------------*/

/*---------LOGO---------------*/

.logo{
    margin-top: 20px;
    /*display: flex;
    justify-content: space-evenly;
    align-items: center;*/
    text-align: center;
}

.logo img{
    width: 70%;
    max-width: 500px;
    margin-top: 30px;
    /*-moz-box-shadow: 0px 0px 30px #ffffff;
    -webkit-box-shadow: 0px 0px 30px #ffffff;
    box-shadow: 0px 0px 30px #ffffff;*/
}

/*---------/LOGO---------------*/


/*---------MAIN---------------*/
.main{
    height: auto;    
}

.mainIndex{
    height: 400px;
    /*vertical-align: middle;*/
    /*flex-wrap: wrap;*/
    display: flex;
    align-items:end;
    padding-bottom: 0px;

}

.main_Empresa{
    display: flex;
    align-items:end;
    background-color: rgba(255, 255, 255, 0.5);
    margin-bottom: -30px;
    margin-top: 20px;
}

.main_text{
    font-family: "DM Sans", sans-serif;
    padding: 30px 10px;
    color: #ffffff;
    text-align: justify;
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: -20px;
    text-transform: capitalize;
    position: relative;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
    
}
.main_text_empresa{
    font-family: "DM Sans", sans-serif;
    color: #000000;
    text-align: justify;
    font-size: 16px;
    width: 100%;
    text-transform: none;
    padding: 40px 20px;

}


#titulo_prod{
    color:#f00d0d;
    text-transform: uppercase;
}

.boton{
    position: absolute;
    right: 20px;
    bottom: 0px;
    background:grey;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    right:0px;
    font-size: 16px;
    transition: .5s;
}
.boton:hover{
    background:#f00d0d;
}

/*---------------PRODUCTOS----------------*/

.productos{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;   
}

.box_producto{
    display: block;
    width: 98%;
    height: 100px;
    position: relative;
    border: #344223 solid 2px;
    border-radius: 5px;
    margin-bottom: 5px;
    color: #fff;
    transition: .5s;
}

.box_producto h1{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;   
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    width:100%;
    height: 100%;
    text-align: center;
    transition: .5s;
}

.box_producto:hover{
    color: #f00d0d;
    -webkit-text-stroke: 0.3px #fff;
}

.box_producto h1:hover{
    background: rgba(134, 84, 84, 0.5);
}

#tranqueras{background: url(/productos/tranqueras/STD-Modelo121/1.jpeg);}
#cepos{background: url(/productos/cepos/1.jpeg);}
#mangas{background: url(/productos/mangas/1.jpeg);}
#cargadores{background: url(/img/cargador.jpeg);}
#juegos{background: url(/productos/juegos/1.jpeg);}
#basculas{background: url(/productos/basculas/1.jpeg);}
#portones{background: url(/productos/portones/1.jpeg);}
#juegos_de_jardin{background: url(/productos/juegos_jardin.jpeg);}
#casillas{background: url(/productos/casillas.jpeg);}

#tranqueras,#cepos,#mangas,#cargadores,#juegos,#basculas,#portones,#juegos_de_jardin,#casillas{
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

#tranqueras:hover,#cepos:hover,#mangas:hover,#cargadores:hover,#juegos:hover,#basculas:hover,#portones:hover,#juegos_de_jardin:hover,#casillas:hover{
    background-size: 110% auto;
}

/*----------CAROUSEL--------------*/
.folleto{
    display: block;
    background: #3a3a3a;
    width: 95%;
    max-width: 500px;
    border-radius: 5px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    height: 310px;
    box-shadow: 3px 3px 5px 3px #ff1313;
    margin-top: 20px;
}


.folleto h3{
    margin-top: 5px;
    font-size: 20px;
}

.carousel-inner{
    /*overflow: hidden;*/
    margin: 5px 0px;
    border-top: #025325 solid 1px;
    border-bottom: #025325 solid 1px;
    height: 250px;
    border-radius: 5px;
}
.carousel-inner img{
    width: 100%;
}

/*-------------CONTACTO------------*/

.contacto{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    background-color: #979797;
    padding-top: 30px;
}
.box_contacto{
    display:block;
    width: 98%;
    max-width: 500px;
    font-size: 18px;
    color: #000;
    margin-bottom: 30px;
}

.img_contacto{
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.img_contacto img{
    width:60%;
}

.box_contacto li{
    list-style: none;
}

.box_contacto a{
    text-decoration: none;
}





/*---------FOOTER---------------*/

.footer{
    display: block;
    /*background: #f3e0e0;*/
    background: #3a3a3a;
    /*border-top: #025325 double 1px;*/
    border-top: #fff double 1px;
    height: auto;
    margin-bottom: 0;
    margin-top: 20px;
    font-family: "DM Sans", sans-serif;
    padding: 20px 0px;
    color: #fff;
}

.footer_logo{
    display: block;
    width: 100%;
    text-align: center;
}
.footer_logo img{
    width: 50px;
}

.footer_box{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.info_footer{
    display: block;
    padding: 0px 20px;
    text-align: justify;
    width: 40%;
    min-width: 400px;
    margin-bottom: 10px;
}
.titulo_footer{
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 10px;
    color: #929191;
}
.footer_box ul{
    list-style: none;
}
.footer_box li a{
    font-family: "DM Sans", sans-serif;
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    transition: 0.3s;
}
.footer_box li a:hover{
    text-decoration: none;
    color: #000;
}

.wp{
    display: block;
    width: 50px;
    height: auto;
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 888;
}
.wp img{
    width: 100%;
}


/*---------FOOTER---------------*/


@media(min-width:700px) {

    .bodyIndex{
        background-position: center 6%;
        background-size: 100% auto;
    }
    .bodyEmpresa{
        background-position: center 30%;
        background-size: 100% auto;
    }



    /*----------NAV---------------*/
    nav{
        background: #d41c1c;
        height: 50px;
    }

    .list{
        position: unset;
        flex-direction: row;
        background: none;
        transform: unset;
        transition: none;
    }

    .nav__logo{
        display: none;
    }

    /*----------------LOGO------------------*/

    .logo{
        text-align: center;
        margin-left: 30px;
        margin-top: 10px;
    }
    
    .logo img{
        width: 50%;
        max-width: 400px;
    }
    
    .boton{
        font-size: 18px;
        padding: 10px;
    }
    /*------------------CAROUSEL----------------*/

    .folleto{
        width:80%;
        max-width: 950px;
        height: 550px;
    }

    .folleto h3{
        font-size: 25px;
        margin-top: 10px;
    }

    .carousel-inner{
        height: 470px;
        margin: 20px 0px;
    }
    .carousel-inner img{
        width: 100%;
    }

    /*------------------MAIN----------------*/

    .main_text{
        padding: 0px;
        font-size: 25px;
    }

    .main_text_empresa{
        padding: 50px;
        text-align: justify;
        font-size: 18px;
        font-size: 25px;
        text-transform: none;
    }

    .wp{
        right: 20px;
        bottom: 20px;
    }

    /*-------------------PRODUCTOS-------------*/
    .box_producto{
        width: 50%;
        max-width: 400px;
        height: 200px;
    }
    
}