@media only screen and (min-width: 320px) and (max-width: 576px) {
    .pt-sm-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .main-menu .mobile-logo {
        max-width: 280px;
    }

    .hero-area-two-content {
        height: 22rem;
    }

    .thumbs-left {
        height: 17rem;
        z-index: 1;
        position: absolute;
        bottom: 3%;
        left: 24.3%;
        /* top: 20%; */
    }

    .thumbs-right {
        height: 20.6rem;
        position: absolute;
        z-index: 0;
        bottom: 0;
        left: 48%;
        /* top: 5%; */
    }
    .our-mission-image {
    display: none;
    }
    .learn-image-right img {
    display: none;
}
.stories-area {
    margin-top: 13rem;
    padding-top: 5rem!important;
}
.box-livro-carousel-container {
    position: relative!important;
    margin: 0;
    padding: 0;
}
}

@media (min-width: 576px) {
        .our-mission-image {
    display: none;
    }
    .learn-image-right img {
    display: none;
}
.stories-area {
    margin-top: 13rem;
    padding-top: 5rem!important;
}
.box-livro-carousel-container {
    position: relative!important;
    margin: 0;
    padding: 0;
}
}

@media only screen and (max-width:600px) {
    /* CSS regras para dispositivos com largura máxima de 60 pixels */

}

@media only screen and (min-width: 600px) and (max-width: 960px) {
    /* CSS regras para dispositivos com largura entre 600 e 960 pixels */

}

@media only screen and (min-width: 960px) {
    /* CSS regras para dispositivos com largura de 960 pixels ou maior */


}

@media only screen and (orientation: portrait) {
    /* CSS regras para viewports em modo retrato */
}

@media only screen and (orientation: landscape) {
    /* CSS regras para viewports em modo paisagem */
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    /* CSS regras para dispositivos com uma taxa de pixel mínima de 2 */
}

@media only screen and (min-resolution: 2dppx) {
    /* CSS regras para dispositivos com uma resolução mínima de 2 pontos por pixel */
}

@media only screen and (min-width: 1000px) {
    /* CSS rules for devices with a width of 1000 pixels or wider */
}

@media only screen and (min-width: 1200px) {
    /* CSS rules for devices with a width of 1200 pixels or wider */

}

@media only screen and (min-width: 1400px) {

    /* CSS rules for devices with a width of 1400 pixels or wider */



}

@media only screen and (min-width: 1600px) {

    /* CSS rules for devices with a width of 1600 pixels or wider */
    .container-xl-extra {
        padding-left: 15rem !important;
        padding-right: 15rem !important;
    }

    .feature-item .image img {
        height: 18rem;
    }


    .hero-area-two {
        height: 56.6rem !important;
        /*
        background: url(../../assets/images/hero/hero-two-bg.png) no-repeat center;
        background-size: cover;
        */
    }

    .thumbs-right {
        height: 43rem;
        position: absolute;
        z-index: 0;
        bottom: 0;
        left: 50%;
        top: 7%;
    }

    .thumbs-left {
        height: 37rem;
        z-index: 1;
        position: absolute;
        bottom: 0;
        left: 23%;
        top: 20%;
    }

    .thumbs-top-left {
        height: 10rem;
        z-index: 1;
        position: absolute;
        left: 14%;
        top: 13%;
    }

    .hero-area-two-content {
        z-index: 1;
        position: relative;
        background: url(../../assets/images/background/bg-thumbs.png) no-repeat center;
        background-size: contain;
        height: 45rem;
        align-content: end;
        top: 20% !important;
    }

    .how-we-work {
        background: url(../images/background/Prancheta\ 1_2@4x.png) no-repeat;
        background-size: cover;
    }

}

@media only screen and (min-width: 1800px) {}

@media only screen and (min-width: 2000px) {
    /* CSS rules for devices with a width of 2000 pixels or wider */
}