/* nav burger */
.burger {
    display: none;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: var(--green-kenko);
    margin: 5px;
    transition: all 0.3s ease;
}

.nav-active {
        transform: translateX(0%);
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

@media screen and (max-width: 1024px) {
    .nav-links {
        width: 50%;
    }
}

/* end nav burger */

/* @media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    
    .nav-links {
        position: fixed;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: var(--nav-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    
    .nav-links li {
        opacity: 0;
    }
    
    .burger {
        display: block;
        cursor: pointer;
    }
} */
@media screen and (max-width: 1350px) {
    .contact{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10px;
    }
    .contact-phone {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    #minicolchoes {
        grid-area: minicolchoes;
        background: var(--secondary-color);
        display: grid;
        grid-template-columns: 1fr 1fr;    
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "1-1 1-2"
                            "2-1 2-2";
        /* border-bottom: 1px solid;
        border-color: #5C6B73; */
        /* grid-gap: 0 45px; */
    }
    .mini-colchao {
        display: grid;
        grid-template-rows: 3fr 0.5fr 1.5fr;
        align-items: center;
        justify-items: center;
        /* max-width: 250px; */
    
    }
    #mini-colchao1{
        grid-area: 1-1;
        /* justify-self: end;         */
        border-right: 1px solid lightgray;
    }
    #mini-colchao2{
        grid-area: 1-2;
        border-left: 1px solid lightgray;
        /* justify-self: start; */
    }
    #mini-colchao3{
        grid-area: 2-1;
        border-right: 1px solid lightgray;
        /* justify-self: end; */
    }
    #mini-colchao4{
        grid-area: 2-2;
        /* justify-self: start; */
        border-left: 1px solid lightgray;
    }

    .container {
        /* display: grid; */
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows:     5fr 
        /* grid-template-rows:     5fr */
                                3fr   /*kenko light*/
                                1fr   /*stamps*/
                                3fr     /*comparacao*/
                                7fr     /*thumbs*/                            
                                1.5fr     /*vantagens*/
                                1fr;    /*footer*/
    }

    nav .logo {
        padding-left: 10px;
    }

    .dist_auto {
        padding-left: 24%;    
        font-size: 8px;
    }
}

@media screen and (max-width: 900px) {
    .container {
        grid-template-rows:     1.5fr 
        /* grid-template-rows:     5fr */
                                1.5fr   /*kenko light*/
                                1.5fr
                                0.5fr   /*stamps*/
                                1.5fr     /*comparacao*/
                                2.7fr     /*thumbs*/                            
                                0.6fr     /*vantagens*/
                                0.6fr
                                0.6fr
                                0.3fr;    /*footer*/
        grid-template-areas: 
            /* "nav nav nav nav nav nav" */
            "banner banner banner banner banner banner"
            "info-kenko-light info-kenko-light info-kenko-light info-kenko-light info-kenko-light info-kenko-light"
            "foto-kenko-light foto-kenko-light foto-kenko-light foto-kenko-light foto-kenko-light foto-kenko-light"
            "icone1 icone2 icone3 icone4 icone4 icone5"
            "comparacao comparacao comparacao comparacao comparacao comparacao"
            "minicolchoes minicolchoes minicolchoes minicolchoes minicolchoes minicolchoes"
            "vantagem1 vantagem1 vantagem1 vantagem1 vantagem1 vantagem1"
            "vantagem2 vantagem2 vantagem2 vantagem2 vantagem2 vantagem2"
            "vantagem3 vantagem3 vantagem3 vantagem3 vantagem3 vantagem3"
            "footer footer footer footer footer footer";
    }

    #comparacao img {
        /* max-height: 80%; */
        width: 95%;
    }

    .vantagem {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
    .vantagem img {
        height: 100px;
        padding-right: 5rem;
        /* justify-self: start; */
        align-self: center;
    }
    .vantagem .legenda {
        justify-self: start;
        padding-left: 0px;
    }
    .vantagem .legenda-whats {
        display: grid;
        padding-right: 55px;
        font-size: 1.5rem;
    }


    /* nav */
    nav {
        grid-template-columns: 3fr 3fr 1fr;
    }
    body {
        overflow-x: hidden;
    }
    
    .nav-links {
        position: fixed;
        right: 0px;
        height: 89vh;
        top: 8vh;
        background-color: var(--nav-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    
    .nav-links li {
        opacity: 0;
    }
    nav .logo {
        padding-left: 10px;
    }

    .dist_auto {
        padding-left: 27%;    
        font-size: 8px;
    }
    
    .burger {
        justify-self: end;
        padding-right: 40px;
        display: block;
        cursor: pointer;
    }
    .nav-active {
        transform: translateX(0%);
    }
    .float {
        display: none;
    }
    .selos img {
        /* height: 150px; */
        width: 50%;
        height: auto;
    }
}

@media screen and (max-width: 700px) {
    .container {
        grid-template-rows:     1.5fr 
        /* grid-template-rows:     5fr */
                                1.5fr   /*kenko light*/
                                1.5fr
                                0.6fr   /*stamps*/
                                1.5fr     /*comparacao*/
                                7fr     /*thumbs*/                            
                                0.6fr     /*vantagens*/
                                0.6fr
                                0.6fr
                                0.3fr;    /*footer*/
        grid-template-areas: 
            /* "nav nav nav nav nav nav" */
            "banner banner banner banner banner banner"
            "info-kenko-light info-kenko-light info-kenko-light info-kenko-light info-kenko-light info-kenko-light"
            "foto-kenko-light foto-kenko-light foto-kenko-light foto-kenko-light foto-kenko-light foto-kenko-light"
            "icone1 icone2 icone3 icone4 icone4 icone5"
            "comparacao comparacao comparacao comparacao comparacao comparacao"
            "minicolchoes minicolchoes minicolchoes minicolchoes minicolchoes minicolchoes"
            "vantagem1 vantagem1 vantagem1 vantagem1 vantagem1 vantagem1"
            "vantagem2 vantagem2 vantagem2 vantagem2 vantagem2 vantagem2"
            "vantagem3 vantagem3 vantagem3 vantagem3 vantagem3 vantagem3"
            "footer footer footer footer footer footer";
    }
    .selos img {
        /* height: 150px; */
        width: 60%;
        height: auto;
    }
    
    #minicolchoes {
        grid-area: minicolchoes;
        background: var(--secondary-color);
        display: grid;
        grid-template-columns: 1fr;    
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas:    "1-1"
                                "2-1"
                                "3-1"
                                "4-1";
        /* border-bottom: 1px solid;
        border-color: #5C6B73; */
        /* grid-gap: 0 45px; */
    }
    .mini-colchao {
        display: grid;
        grid-template-rows: 3fr 0.5fr 1.5fr;
        align-items: center;
        justify-items: center;
        /* max-width: 250px; */
    
    }
    #mini-colchao1{
        grid-area: 1-1;
        /* border-bottom: 1px solid lightgray; */
    }
    #mini-colchao2{
        grid-area: 2-1;
        /* border-top: 1px solid lightgray; */
        /* border-bottom: 1px solid lightgray; */
        
    }
    #mini-colchao3{
        grid-area: 3-1;
        /* border-top: 1px solid lightgray; */
        /* border-bottom: 1px solid lightgray; */
    }
    #mini-colchao4{
        grid-area: 4-1;
        /* border-bottom: 2px solid lightgray; */
    }

    .dist_auto {
        padding-left: 18%;    
        font-size: 8px;
    }
}

@media screen and (min-width: 450px) {
    .optional-footer {
        display: none;
    }
    #pagamento2 {
        display: none;
    }
}

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

    .container {
        grid-template-rows:     0.7fr 
                                1.5fr   /*kenko light*/
                                0.7fr
                                0.3fr   /*stamps*/
                                0.5fr     /*comparacao*/
                                7fr     /*thumbs*/                            
                                0.8fr     /*vantagens*/
                                0.8fr
                                0.8fr
                                0.3fr;    /*footer*/
    }

    nav .contact {
        display: none;
    }

    .burger {
        justify-self: end;
        padding-right: 0;
    }

    .vantagem {
        background: var(--secondary-color);
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-items: center;
        font-size: 1.7rem;
        color: #003709;
    }
    #vantagem3 
    {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
    }
    .vantagem img {
        height: 100px;
        justify-self: start;
        padding-left: 10px;
        padding-right: 0px;
    }
    .vantagem .legenda {
        justify-self: start;
        padding-left: 10px;
        padding-right: 10px;        
    }
    
    #pagamento1 {
        display: none;
    }
}