@media only screen and (max-width:1600px) {
    .logo-buto-size {
        width: 160px;
        margin-top: 2em;
    }

    .hero-buto-logo {
        padding-left: 2em;
        padding-right: 2em;
    }

    .hero-buto {
        margin-left: 20%;
        margin-right: 20%;
    }
}

@media only screen and (max-width:1260px) {
    .logo-buto-size {
        width: 120px;
        margin-top: 2em;
    }

    .hero-buto-logo {
        padding-left: 1em;
        padding-right: 1em;
    }

    .hero-buto {
        margin-left: 16%;
        margin-right: 16%;
    }

}

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

    .navbar .menu li {
        list-style: none;
        display: inline-block;
        font-size: 1em;
        font-weight: 400;
        margin-left: 1em;
        margin-right: 1em;
    }

    .hero{
        height: 480px;
    }

    
    .catálogo-rojo {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        background-color: #bfe2cd;
    }

    .cat-titulo {
        display: grid;
        grid-row: 1;
        grid-column: 1/3;   
        text-align: center;
    }

    .Motul {
        display: grid;
        grid-column: 1/2;
        grid-row: 2;
        justify-content: center;
        align-items: center;
        border-radius: 1em;
        width: auto;
    }

    .valores-icon {
        text-align: center;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        padding-bottom: 6em;
    }
    

}

@media only screen and (max-width:1000px) {
    
    .hero-buto {
        margin-left: 5%;
        margin-right: 5%;
    }

    .hero-buto-logo {
        padding-left: 1em;
        padding-right: 1em;
    }

    .logo-buto-size {
        width: 150px;
    }

    .hero-text{
        padding-left: 15%;
        font-size: 1em;
    }

    .hero-text2 img{
        max-width: 200px;
    }

    .hero{
        height: 400px;
    }

    .hero-img{
        margin-left: 5%;
        margin-right: 5%;
    }
    

}

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

    .hero{
        height: 300px;
    }
   
    .logo-buto-size {
        width: 300px;
    }

    .hero-buto {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 0.8fr 0.3fr 0.8fr 0.3fr 0.8fr 0.3fr;
    }

    .butos {
        margin: 20px 80px;
        padding: 15px 0;
    }

    .class1buto {
        display: grid;
        grid-column: 1;
        grid-row: 1;
    }

    .class2buto {
        display: grid;
        grid-column: 1;
        grid-row: 3;
    }

    .class3buto {
        display: grid;
        grid-column: 1;
        grid-row: 5;
    }

    .class1b {
        display: grid;
        grid-column: 1;
        grid-row: 2;
    }

    .class2b {
        display: grid;
        grid-column: 1;
        grid-row: 4;
    }

    .class3b {
        display: grid;
        grid-column: 1;
        grid-row: 6;
    }

}

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

    .nav-logo {
        width: 8em;
        margin: auto;
        grid-column: 1/2;
        grid-row: 1;
        padding: 0.4em 0.2em 0.2em 3em ;
    }

    .nav-logo2 {
        width: 14em;
        margin: auto;
        grid-column: 1/2;
        grid-row: 1;
        padding: 0.8em 0.2em 0.8em 3em ;
    }

    .navbar nav{
        display: none;
    }

    .menu-icon {
        display: grid;
        grid-column: 2/3;
        grid-row: 1;
        width: 20%;
        margin: auto 0 auto 75%;
        float: right;
        cursor: pointer;
        font-size: 1.6em;
    }



    .contacto {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
        width: 100%;
        height: 60em;
        margin: auto;
    }

    .mapa{
        display: grid;
        grid-column: 1;
        grid-row: 2;
    }

    .cuadrocontacto {
        display: grid;
        grid-column: 1;
        grid-row: 1;
        padding-bottom: 0.4em;
        text-align: center;
    }

    .insidecuadrocontacto {
        margin: 0.6em;
        padding: 4em 0.2em 4em 0.8em;
    }
    
    .footer-a p {
        font-size: 1em;
        padding-bottom: 1em;
    }

    .catálogo-rojo {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        background-color: #bfe2cd;
    }

    .cat-titulo {
        display: grid;
        grid-row: 1;
        grid-column: 1;   
        text-align: center;
        padding: 0 1em 0 1em;
    }

    .Motul {
        display: grid;
        grid-column: 1;
        grid-row: 2;
        justify-content: center;
        align-items: center;
        border-radius: 1em;
        width: auto;
    }

    .sec-catalogo1 img{
        width: 25em;
    }

    .sec-catalogo2 img{
        width: 25em;
    }

    .mision-vision {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .imagen-historia {
        display: grid;
        grid-column: 1;
        grid-row: 1;
    }
    
    .mv-texto{
        display: grid;
        grid-column: 1;
        grid-row: 2;
    }

    .valores-icon {
        text-align: center;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, 1fr);
        padding-bottom: 6em;
    }
    
    .textohistoria p {
        padding: 0 3em 3em 3em;
    
    }

    .marquesano {
        margin-bottom: 80px;
    }

    .marquee {
        width: 80%;
    }

    .marquee-color {
        border-radius: 20px;
        padding: 20px 5px;
    }

}

@media only screen and (max-width:490px) {
    
    .hero{
        grid-template-columns: 1fr 0.6fr;
    }
    
    .hero-text h1 {
        font-size: 24px;
    }
    .hero-text h2 {
        font-size: 16px;
    }

}

/* form */

@media screen and (max-width: 420px) {
    
    h1 {
        font-size: 18px;
    }
    
    .icon {
        height: 35px;
        width: 35px;
    }
    
    input[type='text'], [type='email'], select, textarea {
        font-size: 0.875em;
    }

    .logo-buto-size {
        width: 200px;
    }

    .insidecuadrocontacto {
        margin: 0;
    }

    .insidecuadrocontacto a {
        font-size: 14px;
    }
    
    .footer-a p {
        font-size: 0.8em;
        padding-bottom: 0.8em;
    }


}

@media screen and (max-width: 768px) {
    #container {
        margin: 20px auto;
        width: 95%;
    }
}

@media screen and (max-width: 480px) {
    h1 {
        font-size: 26px;
    }
}

/*--- banner ---*/

@media only screen and (max-width:1260px){
    .arrow {
        margin-top: 1000px;
    }

    .slide {
        height: 70vh;
        width: 100%;
    }
}


@media only screen and (max-width:1024px){
    .arrow {
        margin-top: 760px;
    }
}

@media only screen and (max-width:1000px){
    .arrow {
        margin-top: 800px;
    }
}



@media only screen and (max-width:768px){
    .arrow {
        margin-top: 680px;
    }

    .slide {
        height: 50vh;
        width: 100vw;
    }
}


@media only screen and (max-width:728px){
    .arrow {
        margin-top: 1360px;
    }

}



@media only screen and (max-width:687px){
    .arrow {
        margin-top: 1350px;
    }
}

@media only screen and (max-width:487px){
    .arrow {
        margin-top: 1100px;
    }

    .slide {
        height: 30vh;
    }
}

@media only screen and (max-width:486px){
    .arrow {
        margin-top: 1240px;
    }

    .slide {
        height: 30vh;
    }
}


@media only screen and (max-width:420px){
    .arrow {
        margin-top: 1120px;
    }
}

@media only screen and (max-width:360px){
    .arrow {
        margin-top: 1180px;
    }
}

@media only screen and (max-width:375px){
    .arrow {
        margin-top: 1190px;
    }
}


@media only screen and (max-width:320px){
    .arrow {
        margin-top: 1200px;
    }
}