/*--------------------------------------------------------- MEDIA Qs ---------------------------------------------------------------------------------------- */
@media (max-width: 320px) {
    .bgs-hero-cx div {
        top: 50%;
    }
    .bgp-hero-cx div {
        top: 60%;
    }
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media screen and (min-width: 320px) { /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 480px :::::::: */
    /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    h1.sub-t {
        font-size: 2.6em;
        line-height: .94em;
    }

    h2.sub-t {
        font-size: 2.4em;
        line-height: 1.2em;
    }

    p.add-txt {
        font-size: 1.1em;
        line-height: 1.5em;
    }

    .main-logo {
        width: 180px;
        height: auto
    }

    .sec-logo {
        width: 60px;
        height: auto
    }

    .pat-logo {
        width: 100px;
        height: auto
    }

    .rfmLogo svg {
        width: 30%;
        left: 35%;
        right: 35%;
        top: 2%;
    }

    .rfmLogoFooter svg {
        width: 30%;
        left: 35%;
        right: 35%;
    }

    .xs-text-center {
        text-align: center;
    }

    .xs-f-center {
        display: flex;
        align-items: center;
        justify-content: center
    }

    #video-bg {
        height: 20%;
    }

    .xs-quarter-img-sz {
        width: 70%
    }

    .hero-x-bg-06 {
        height: 760px;
    }

    .bgs-hero-cx div {
        top: 75%;
    }

    .bgp-hero-cx div {
        top: 80%;
    }
    .circle-text {
        max-width: 75%;
    }
}
/* ::: Video fix */
@media screen and (min-width: 410px) {
    .hero-x-bg-06 {
        height: 800px;
    }
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media screen and (min-width: 480px) { /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 480px :::::::: */
    /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    .rfmShareIcos svg {
        width: 40%;
        left: 30%;
        right: 30%;
        margin-top: 15%;
    }

    #video-bg {
        height: 40%;
    }

    .hero-x-bg-06 {
        height: 880px;
    }

    .pat-logo {
        width: 80px;
        height: auto
    }
    .bgs-hero {
        height: 100vh;
    }

    .bgs-hero-cx div {
        top: 90%;
    }
}
/* ::: Video fix */
@media screen and (min-width: 620px) {
    .hero-x-bg-06 {
        height: 950px;
    }
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media screen and (min-width: 768px) { /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 768px :::::: */
    /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    h1.sub-t {
        font-size: 2.6em;
        line-height: .94em;
    }

    h2.sub-t {
        font-size: 2.4em;
        line-height: .94em;
    }

    p.add-txt {
        font-size: 1.1em;
        line-height: 1.5em;
    }

    .main-logo {
        width: 320px;
        height: auto
    }

    .sec-logo {
        width: 100px;
        height: auto
    }

    .pat-logo {
        width: 100px;
        height: auto
    }

    .rfmLogo svg {
        width: 26%;
        left: 37%;
        right: 37%;
        top: 6%;
    }

    .rfmLogoFooter svg {
        width: 26%;
        left: 37%;
        right: 37%;
    }

    .rfmShareIcos svg {
        width: 30%;
        left: 35%;
        right: 35%;
        margin-top: 10%;
    }

    .xs-f-center {
        display: block
    }

    .xs-text-center {
        text-align: unset
    }

    #video-bg {
        height: 30%;
    }

    .xs-quarter-img-sz {
        width: auto
    }

    .hero-x-bg-06 {
        height: 1000px;
    }
    .circle-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px;
    }

    .circle-item {
        flex-direction: row;
    }
    .circle-text {
        max-width: 100%;
    }
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media screen and (min-width: 992px) { /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 992px :::::::: */
    /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    h1.sub-t {
        font-size: 3em;
        line-height: .94em;
    }

    h2.sub-t {
        font-size: 2.8em;
        line-height: .94em;
    }

    .pat-logo {
        width: 180px;
        height: auto;
        /*margin-left: 120px !important*/
    }

    p.add-txt {
        font-size: 1.2em;
        line-height: 1.5em;
    }


    .rfmLogo svg {
        width: 22%;
        left: 39%;
        right: 39%;
        top: 6%;
    }

    .rfmLogoFooter svg {
        width: 20%;
        left: 40%;
        right: 40%;
    }

    .rfmShareIcos svg {
        width: 20%;
        left: 40%;
        right: 40%;
        margin-top: 10%;
    }

    #video-bg {
        height: 25%;
    }

    .hero-x-bg-06 {
        height: 1100px;
    }
    .bgs-hero {
        width: 100%;
        height: 80vh;
        background-image: url('https://rfmsite2023-images.azureedge.net/outros/barulho/images/RFM-barulho-temporada-8-animadores_bgdesktop.png'), url('https://rfmsite2023-images.azureedge.net/outros/barulho/images/RFM-barulho-temporada-8_bgdesktop.jpg');
        background-size: contain, cover;
        background-position: bottom, center;
    }

    .bgs-hero-cx div {
        aspect-ratio: 1920/1080;
        top: 90%;
    }

    .bgp-hero {
        width: 100%;
        height: 100vh;
        background-image: url('https://rfmsite2023-images.azureedge.net/outros/barulho/images/RFM-barulho-temporada-8-cdm_bgdesktop.jpg');
        background-size: contain;
        background-position: bottom;
    }

    .bgp-hero-cx div {
        aspect-ratio: 1920/1080
    }

    .circle-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px;
    }

    .circle-item {
        flex-direction: row;
    }

}


/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media screen and (min-width: 1024px) { /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 1024px :::::: */
    /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    .playpause {
        width: 15%;
        height: 15%;
    }
    .bgs-hero-cx div {
        top: 90%;
    }
}


/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media screen and (min-width: 1200px) { /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 1200px :::::::::: */
    /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    h1.sub-t {
        font-size: 4em;
        line-height: .94em;
    }

    h2.sub-t {
        font-size: 3.8em;
        line-height: .94em;
    }

    p.add-txt {
        font-size: 1.4em;
        line-height: 1.5em;
    }

    .rfmLogo svg {
        width: 14%;
        left: 43%;
        right: 43%;
        top: 5%;
    }

    .rfmLogoFooter svg {
        width: 14%;
        left: 43%;
        right: 43%;
    }

    .rfmShareIcos svg {
        width: 16%;
        left: 42%;
        right: 42%;
        margin-top: 8%;
    }

    #video-bg {
        height: 40%;
    }

    .hero-x-bg-06 {
        height: 1020px;
    }

    .bgs-hero-cx div {
        top: 90%;
    }

    .bgp-hero-cx div {
        top: 85%;
    }
    .bgp-hero {
        height: 75vh;
    }
}


/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media screen and (min-width: 1400px) { /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 1400px ::::::::: */
    /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    .hero-x-bg-06 {
        height: 1050px;
    }
    .bgp-hero {
        height: 100vh;
    }
    .bgs-hero-cx div {
        top: 110%;
    }

    .bgp-hero-cx div {
        top: 95%;
    }
}



/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media screen and (min-width: 1600px) { /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 1600px ::::::::::::: */
    /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    .hero-x-bg-00, .hero-x-bg-01, .hero-x-bg-02, .hero-x-bg-03, .hero-x-bg-04 {
        height: 560px;
    }

    .section-05 {
        background-size: contain;
    }

    .hero-x-bg-06 {
        height: 1200px;
    }
}



/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media screen and (min-width: 1900px) { /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 1900 px :::::::::: */
    /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    .hero-x-bg-00, .hero-x-bg-01, .hero-x-bg-02, .hero-x-bg-03, .hero-x-bg-04 {
        height: 570px;
    }

    h2.sub-t {
        font-size: 4em;
        line-height: .94em;
    }

    p.add-txt {
        font-size: 1.4em;
        line-height: 1.5em;
    }

    .rfmLogo svg {
        width: 14%;
        left: 43%;
        right: 43%;
        top: 5%;
    }

    .rfmLogoFooter svg {
        width: 8%;
        left: 46%;
        right: 46%;
    }

    .rfmShareIcos svg {
        width: 12%;
        left: 44%;
        right: 44%;
        margin-top: 5%;
    }

    #video-bg {
        height: 50%;
    }

    .hero-x-bg-06 {
        height: 1350px;
    }
    .bgs-hero-cx div {
        top: 110%;
    }
    .bgp-hero {
        height: 85vh;
    }
}

@media screen and (min-width: 2200px) { /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 2200 px :::::::::: */
    /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    .hero-x-bg-00, .hero-x-bg-01, .hero-x-bg-02, .hero-x-bg-03, .hero-x-bg-04, .hero-x-bg-05 {
        height: 600px;
    }

    .hero-x-bg-06 {
        height: 1550px;
    }
    .bgs-hero-cx div {
        top: 120%;
    }
    .bgp-hero {
        height: 90vh;
    }
}