body {
    background-color: #FFF8EF;

}

a,
button {
    all: unset;
}


.mobileYearsHistorial {
    display: none;
}

.section {
    margin-bottom: 90px;
}





html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

.pageContent {
    flex: 1;
}

.footer {
    margin-top: auto;
}

/* —————————————————————————————————————————— MENU ——————————————————————————————————————————*/
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background-color: #010C20;
    text-align: right;
    padding: 30px 0px;
    z-index: 2;
}



.logoHome,
.menuLogo a img {
    width: 60px;
}

.hideMobile {
    display: none;
}

.menuMobile {
    background-image: url(../img/icons/hamburgerMenu.svg);
    width: 44px;
    height: 44px;
    color: white;
    background-size: cover;
}

.menuItem:first-of-type,
.menuItem:first-of-type a {
    margin-left: 0 !important;
}

.menuLogo {
    float: left;
    margin-top: -28px !important;
}


.menuItem,
.menuItem a,
.menuItem a:visited {
    display: inline-block;
    margin: 0px 10px;
    vertical-align: top;
    position: relative;
    transition: 300ms;
}

.menuItem a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 3px;
    background: #FF6C72;
    transform: scaleX(0);
    transition: transform 0.3s;
}

.menuItem>a:hover::after {
    transform: scaleX(1);
}


.menuUL,
.pageContent {
    transition: 500ms;
}

.menuItem a:hover,
.footer a:hover {
    color: #FF6C72 !important;
    cursor: pointer;
    /* text-decoration: underline; */
}

#vinteAnos:hover{
    color: white!important;
}

.dropdownItemList .subMenuItem:hover a {
    /* background-color: #FF6C72; */
    color: #FF6C72 !important;
}



.menuUL,
.footerWidth {
    width: 1180px;
    margin: auto;
}

.menuUL {
    margin-top: 8px;
}

.subMenuItem a {
    /* border: 1px solid pink; */
    padding: 12px 0px;
    padding-left: 5px;
    width: -webkit-fill-available;
    margin: 0px !important;
    padding: 15px;
}



.subMenuItem {
    border: 1px solid #B41E24;
    padding: 0px;
    /* margin: -1px!important;    */
}

:last-of-type.subMenuItem {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

:first-of-type.subMenuItem {
    border-top: none !important;
}


.dropDownArrow {
    background-image: url(../assets/ArrowDown.svg);
    background-position: center;
    width: 13px;
    height: 7px;
    margin-top: 5px;
    float: right;
    background-color: transparent;
    border: none;
    margin-left: 8px;
}

.dropdownItemList {
    width: 0px;
    z-index: -1;
    text-align: left;
    margin-top: 30px;
    padding-top: 50px;
    top: 0;
    margin-left: -10px;
    display: none;
    position: fixed;
    width: max-content !important;
    height: fit-content !important;
    background-color: #010C20;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#galeriaDropDown{
    width: 105px!important;
}






/* —————————————————————————————————————————— FOOTER ——————————————————————————————————————————*/
.footer {
    /* position: absolute; */
    /* bottom: 0; */
    width: 100%;
    background-color: #010C20;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    /* Center content horizontally */
    align-items: center;
    /* Align items vertically */
}

.zeroBottomFooter {
    bottom: 0;
}

.footerWidth {
    display: flex;
    justify-content: space-between;
    /* Pushes items to the edges */
    align-items: center;
}

.footerWidth ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footerLink {
    margin: 0px 20px;
}

.footerLink a {
    color: white;
    text-decoration: none;
}

.footerLink:first-of-type {
    margin-left: 0;
}

.footerRightSide {
    display: flex;
    align-items: center;
}

.socialMedia {
    display: flex;
    gap: 20px;
    margin-right: 20px;
}

.socialMedia a img {
    height: 24px;
    /* Adjust size if necessary */
    width: auto;
}

.footerRightSide img {
    height: 40px;
    /* Adjust logo size */
}


.menuActive {
    position: relative;
    display: inline-block;
}

.subMenuActive {
    background-color: #B41E24;
    pointer-events: none;
}

.subMenuActive a {}

.menuActive::after {
    content: '' !important;
    position: absolute !important;
    left: -10px !important;
    bottom: 0 !important;
    width: calc(100% + 20px) !important;
    height: 12px !important;
    background-color: #B41E24 !important;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
    transform: translateY(24px) !important;
}




/* —————————————————————————————————————— HOMEPAGE ——————————————————————————————————————————*/


.homepageIntro {
    background-image: linear-gradient(to bottom, #010C20, rgba(0, 0, 0, 0)), url(../assets/img/homepage.jpg);
    background-position: center;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    color: white;
    transition: 100ms;
    position: absolute;
    /* Ensure it's positioned correctly */
    top: 0;
    left: 0;
    margin-bottom: 100vh;
    position: absolute
}

.homepageIntro img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.homepageIntro h1 {
    z-index: 0;
    margin: auto;
    position: absolute;
    top: 40%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    left: 0;
    right: 0;
    font-size: 110px;
    text-transform: uppercase;
    transition: 500ms;
}

.homepageIntro h1 span {
    display: block;
    font-size: 40px;
    font-family: 'LexendDeca Regular';
    text-transform: uppercase;
    margin-top: 10px;
    width: fit-content;
    /* border-bottom: 5px solid #B41E24; */
    margin: auto;
    border-top: 10px solid #B41E24;
    line-height: 80px;
    padding: 0px 390px;
    margin-top: 20px;
    transition: 500ms;
}

.homepageQuote {
    /* background-color: orange; */
    width: 770px;
    margin: auto;
    text-align: center;
    margin: 80px auto;
    margin-top: calc(100vh + 80px);
}

.homepageQuote div p:first-of-type {
    color: #B41E24;
    font-family: "Quicksand Bold";
    margin-bottom: 0px;
}

.homepageImageSeparator {
    width: 100vw;
    height: 350px;
    object-fit: cover;
}

.homepageInfo {
    width: 1180px;
    margin: auto;
}

.homepageInfoContainer,
.homepageInfoContact {
    display: flex;
    column-gap: 50px;
    row-gap: 50px;
    margin: auto;
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 50px;

}

.homepageInfoBlock {
    width: 100%;
    height: 250px;
    background-color: #010C20;
    display: inline-block;
    position: relative;
}

.homepageInfoBlock h2 {
    font-family: "LexendDeca Bold";
    font-size: 36px;
    color: white;
    border-bottom: 5px solid #B41E24;
    width: fit-content;
    margin-top: 30px;
    margin-left: 30px;
}

.homepageInfoBlock p {
    color: white;
    margin: 20px 30px;
}

.homepageInfoBlock a {
    color: white;
    background-color: #B41E24;
    font-family: "LexendDeca Bold";
    font-size: 16px;
    border-radius: 50px;
    text-decoration: none;
    padding: 10px 20px;
    position: absolute;
    right: 30px;
    bottom: 30px;
    transition: 300ms;
    outline: 0px solid #B41E24;
    outline-offset: 0px;
}

.homepageInfoBlock a:visited {
    color: white;
}

.homepageInfoBlock a:hover {
    outline: 3px solid #B41E24;
    outline-offset: 5px;
    cursor: pointer;
}


.homepageInfoContact img,
iframe {
    width: 565px;
    height: 600px;
    display: inline-block;
    object-fit: cover;
}

.homepageVideos {
    column-count: 3;
    margin: auto;
    gap: 50px;
    width: 1180px;
    padding: calc((100vw - 1180px)/2);
    margin-top: 150px;
    background-color: #0E1C35;
}

.homepageVideoBlock {
    width: 100%;
    margin-bottom: 70px;
    break-inside: avoid;
}

.homepageVideos h3 {
    color: white;
    margin-bottom: 15px;
    border-bottom: 3px solid #B41E24;
    display: inline-block;
}

.homepageVideos iframe {
    width: 100%;
    height: 217px;
}

/* —————————————————————————————————————— CORALISTAS CONTENT ——————————————————————————————————————————*/



.pageContent {
    /* background-color: green; */
    width: 1180px;
    margin: auto;
    margin-top: 160px;
    margin-bottom: 150px;

}

.vozContainer,
.straightLineContainer {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 40px;
}

.vozContainer {
    cursor: pointer;
}

.straightLine {
    flex-grow: 1;
    height: 3px;
    background-color: #B41E24;
}


.coralistasDropDownArrow {
    width: 40px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: 400ms;
}


.coralistasContainer {
    display: none;
    grid-template-columns: repeat(6, 1fr);
    /* 6 equal-width columns */
    gap: 20px;
    /* Optional: Add spacing between items */
    margin-top: 60px;
    margin-bottom: 80px;

}

.coralista {
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
    /* Optional: Add space below each item */
}

.imagemCoralista {
    width: 100%;
    height: 180px;
    /* Adjust image height */
    object-fit: cover;
    /* Ensure the image fills the space without distortion */
    margin-bottom: 10px;
    outline: 5px solid #B41E24;
    outline-offset: -5px;
}



.chefeDeNaipeBanner {
    background-color: #B41E24;
    text-align: center;
    position: relative;
    width: 180px;
    z-index: -1;
    width: 100%;
    margin-top: -30px;
}


.episodio {
    display: none;
    display: inline-block;
    column-gap: 20px;
    break-inside: avoid;
    vertical-align: top;
    width: calc(1172px / 3);
    margin-bottom: 80px;
}

.cocContent {
    vertical-align: top;
    display: inline-block;
    position: relative;
    height: 130px;
    margin-left: 15px;
}

.nomesCOC li {
    margin-bottom: 6px;
}

.temporada1 {
    /* display: block; */
}

.temporada2,
.temporada3 {
    /* display: none!important ; */
}

.COCthumbnail {
    width: 190px;
    height: 130px;
    object-fit: cover;
}

.newTabCOC {
    position: absolute;
    bottom: 0;
}

.newTabCOC:hover {
    text-decoration: underline;
    cursor: pointer;
}

.containerTemporadasCoc {
    margin-top: 50px;
    min-height: 650px;
}

.cocButtons {
    margin-top: 50px;
}

#coc2 {
    margin: 0 40px;
}

.cocButtons button {
    background-color: transparent;
    color: black;
    border: none;
    font-family: 'LexendDeca Medium';
    font-size: 20px;
    text-decoration: underline;
}

.cocButtons .active {
    color: #B41E24 !important;
    text-decoration: none;
    font-family: 'LexendDeca Bold';
    pointer-events: none;
}

.cocButtons button:hover {
    color: #591313;
    cursor: pointer;
}

/* —————————————————————————————————————— APRESENTAÇÃO ——————————————————————————————————————————*/

.DVDs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 50px;
    /* Adjust space between images */
}

.DVDs .example-image {
    width: 100%;
    margin-bottom: 0px;
    height: 210px;
    object-fit: cover;
}

.DVDs .imageBlock {
    break-inside: avoid;
    width: 100%;
    /* Ensures full width inside the column */
}

.twoColumnImage {
    width: 565px;
}

.audicoesContent {
    width: 380px;
    display: inline-block;
}

.audicoesContent div {
    /* margin-bottom: 30px; */
    padding: 30px;
}

.audicoesContent img {
    margin-left: -30px;
    margin-top: 2px;
    position: absolute;
}

.audicoesContent div:first-child {
    padding-top: 0;
}

.audicoesImg {
    float: right;
    width: 770px;
    transition: 500ms;
}


/* —————————————————————————————————————— concertos ——————————————————————————————————————————*/

#loadMoreBtn {
    width: 100%;
    height: 50px;
    margin-top: 15px;
    border: 2px solid #B41E24;

    background-color: transparent;
    font-family: 'LexendDeca Regular';
    font-size: 20px;
    background-color: #B41E24;
    color: white;
}

#loadMoreBtn:hover {
    background-color: transparent;
    color: #B41E24;
    cursor: pointer;
}

.historialBlock:last-of-type {
    border: none;
}

.historialDate {
    opacity: 0.3;
}

#historialContainer,
#agendaContainer {
    display: inline-block;
    transition: 500ms;
}

#historialContainer {
    width: 950px;
    margin-top: -240px;
    margin-left: 70px;
}

#agendaContainer {
    width: 1025px;
}

#historialContainer {
    display: block !important;
    margin-left: 230px;
    margin-top: -130px;

}

#historialYears {
    display: inline-block;
    vertical-align: top;
    margin-top: -240px;
    margin-left: 230px;
    position: sticky;
    top: 80px;
    z-index: 1;
    background-color: #FFF8EF;
}


.historialTitle,
.historialDesc {
    max-width: 600px;
}




.year-button {
    font-family: 'LexendDeca Bold';
    background-color: transparent;
    border: none;
    opacity: 0.2;
    transition: 300ms;
    margin-bottom: 5px;
    font-size: 30px;
    display: inline-block;
    margin: 0px 15px 15px 0px;
    text-align: center;
    width: 75px;
}

.year-button:first-of-type {
    padding-top: 30px;
}



.keyboardActive a:focus,
.keyboardActive .dropDownArrow:focus,
.keyboardActive .year-button:focus {
    outline: 4px solid #B41E24;
    outline-offset: 8px;
    opacity: 1;
}

.yearSelected {
    color: #B41E24 !important;
    opacity: 1;
    pointer-events: none;
}


.year-button:hover {
    opacity: 1;
    cursor: pointer;
}

#concertTable {
    width: 100%;
}

#concertTable .cell:nth-of-type(1) {
    width: 140px;
}

#concertTable .row:first-of-type {
    position: sticky;
    top: 80px;
    background-color: #FFF8EF;
}

#concertTable .row:first-of-type .cell {
    padding-bottom: 20px;
}

.sideMenu {
    font-family: 'LexendDeca Light';
    color: black;
    display: inline-block;
    vertical-align: top;
    margin-top: 30px;
    width: 150px;
    position: sticky;
    top: 110px;
}

.sideMenu a,
.sideMenu a:visited {
    color: black;
    display: block;
    margin-bottom: 20px;
    line-height: 23px;
    text-decoration: none;
}

.sideMenu a:hover {
    text-decoration: underline;
    cursor: pointer;
}

#vinteAnos {
    text-shadow: 0px 0px 5px #FED16E, 0px 0px 25px #FED16E, 0px 0px 2px #FFFFFF;
}

.sideMenuSelected {
    font-family: 'LexendDeca Bold';
    pointer-events: none;
    position: relative;
    text-decoration: none !important;
}

.sideMenuSelected::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: #B41E24;
    border-radius: 50%;
}



tr:first-of-type {
    border-bottom: none;
}

tr:first-of-type>td {
    position: relative;
    /* Allows precise positioning */
    padding-bottom: 10px;
    /* Space below text */
    font-family: 'LexendDeca Bold' !important;
    font-size: 20px;
}

tr:first-of-type>td::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    margin: auto;
    height: 5px;
    background-color: #B41E24;
}




/* —————————————————————————————————————— DIREÇÃO ——————————————————————————————————————————*/

.blockImage {
    width: 155px;
}

.direcaoContent {
    color: black;

}

.direcaoContentBlocks {
    color: black;
}

.direcaoBlock {
    break-inside: avoid;
    display: flex;
    margin-bottom: 50px;
}


.blockRightContent {
    color: black;
    margin-left: 50px;
    position: relative;
}

.blockTitle {
    color: black;
    font-family: 'Quicksand Bold';
    font-size: 22px;
    margin-bottom: 0px;
}

.blockSubTitle {
    font-family: 'Quicksand Semibold';
    font-size: 16px;
    margin-bottom: 10px;
}

.direcaoBlockGroup {
    column-count: 2;
    column-gap: 50px;
    margin-bottom: 120px;
    margin-top: 40px;
    break-inside: avoid;
}

.straightLineContainer span {
    font-family: 'LexendDeca Regular';
    font-size: 36px;
    color: #B41E24;
}

.cvIntro {
    margin-bottom: 50px;
    position: relative;
}

.backArrow {
    position: fixed;
    width: 40px;
    background-image: url("../assets/icons/backArrow.svg");
    position: fixed;
    width: 30px;
    top: 100px;
    left: 20px;
    height: 25px;
}

.backArrow:hover {
    background-image: url("../assets/icons/backArrowHover.svg");
    cursor: pointer;
}

.cvImage {
    width: 180px;
    display: inline-block;
    margin-right: 20px;
}

.cvID {
    display: inline-block;
    vertical-align: top;
}


/* —————————————————————————————————————— DESTAQUE ——————————————————————————————————————————*/

.destaqueContainer {
    column-count: 3;
    column-gap: 50px;
}

.destaqueConcert {
    break-inside: avoid;
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 3px solid #B41E24;
}

.destaqueConcert img {
    width: 100%;
}

.destaqueTitle {
    font-family: 'Quicksand Bold';
    font-size: 24px;
    color: #B41E24;
    margin: 10px 0;
}

.destaqueDescription {
    font-family: 'Quicksand Medium';
    font-size: 16px;
    margin: 0;
}


/* —————————————————————————————————————— SÓCIOS ——————————————————————————————————————————*/

.sociosContainer {}


.socioByYear {
    display: flex;
    margin-bottom: 50px;
}


.socioByYear h2 {
    color: #B41E24;
    width: 155px;
    font-family: 'LexendDeca Bold';
    font-size: 35px;
}

.verticalRedLine {
    /* background-color: #B41E24;
    width: 3px; */
    border: 2px solid #B41E24;
    margin-right: 20px;
}

.sociosHonorariosList {
    color: black;
    list-style: none;
    font-family: 'Quicksand Medium';
    font-size: 16px;
}

.sociosHonorariosList li {
    margin-bottom: 11px;
    list-style: inside;
}

.secondList li {
    margin-left: 20px;
}

.secondList li:first-of-type {
    margin-top: 15px;
}



/* —————————————————————————————————————————— APOIOS ——————————————————————————————————————————*/

.patrocinios img,
.parcerias img {
    vertical-align: middle;
    margin: 20px;
    width: 196px;
}



.patrocinios,
.parcerias {
    margin: 0px 0px 50px 0;
}

.cmvLogo {
    width: 500px;
    margin-bottom: 100px;
}



/* —————————————————————————————————————————— RIDER ——————————————————————————————————————————*/

.riderContent,
.riderWarning {
    font-family: 'Quicksand Medium';
    margin-top: 40px;
    break-inside: avoid;
}

.riderContent {
    column-count: 2;
    column-gap: 50px;
}

.riderContent span {
    color: #B41E24;
    font-family: 'Quicksand Bold';
}

.riderWarning {
    font-family: 'Quicksand Medium';
    margin-top: 80px;
}

.riderContent ul,
.riderWarning ul {
    line-height: 24px;
}

.riderContent ul li,
.riderWarning ul li {
    font-size: 16px;
    line-height: 24px;
    margin-top: 18px;
    list-style: inside;
    break-inside: avoid;
}

.riderContent ul li::marker,
.riderWarning ul li::marker {
    color: #B41E24;
}

.riderContent ul ul,
.riderWarning ul ul {
    margin-top: 18px;
}

.riderContent ul ul li,
.riderWarning ul ul li {
    margin-top: 0px;
}

.riderWarning h2 {
    color: #B41E24;
}



/* —————————————————————————————————————————— 404 ——————————————————————————————————————————*/

.content404 h2 {
    color: #B41E24;
    margin-bottom: 30px;
}

.content404 h3 {
    margin-top: 70px;
    margin-bottom: 20px;
    font-family: 'LexendDeca Regular';
    font-size: 24px;
}

.content404 p {
    margin-bottom: 14px;
}

.container404 {
    width: fit-content;
    display: inline-block;
}

.content404 img {
    float: right;
    transition: 500ms;
}


/* —————————————————————————————————————————— FOTOS ——————————————————————————————————————————*/

.lb-number {
    font-family: 'LexendDeca Regular';
}

.galleryFotosPageCount {
    color: black;
    font-family: 'LexendDeca Regular';
    text-decoration: none;
    border: 2px solid #B41E24;
    width: 25px;
    display: inline-grid;
    text-align: center;
    line-height: 25px;
    margin-right: 10px;
}

.gallerySelected {
    color: white;
    background-color: #B41E24;
    pointer-events: none;
}

.galleryFotosPageCount:hover {
    color: white;
    border: 2px solid #FF6C72;
    background-color: #FF6C72;
}


.galeriaFotosMain,
.galeriaVideosMain {
    width: calc(100% - 155px);
    display: inline-block;
}

.galeriaFotosMain .galleryContainer,
.galeriaVideosMain .galleryContainer {
    width: 100%;
}

.gallerySpan {
    font-style: italic;
    opacity: 0.3;
}


.galleryContainer iframe {
    width: 100%;
    height: auto;
    margin-bottom: 50px;
}



/* —————————————————————————————————————— HOMEPAGE ——————————————————————————————————————————*/

.contactosPage>h2 {
    margin-bottom: 50px;
}


.contactosLocation {
    column-count: 2;
    display: flex;
    gap: 50px;
}

.contactosLocation iframe {
    width: 565px;
    height: 293px;
}


.contactosInfoContainer {
    display: flex;
    width: 100%;
    gap: 50px;
    margin-top: 150px;
}

.contactosInfoContainer h2 {
    margin-bottom: 30px;
}

.contactosInfoContainer>div {
    width: 100%;
}

.contactosInfo {
    color: black;
}



.contactosVicesContainer {
    margin-top: 50px;
}

.contactosInfoContainer iframe {
    width: 100%;
}


.contactosVices {
    margin-bottom: 30px;
}

.contactosPage p {
    margin-bottom: 10px;
}

.contactosNome {
    color: #B41E24;
    font-size: 20px;
    font-family: "Quicksand Semibold";
    margin-bottom: 0px !important;
}



/* —————————————————————————————————————————— 20 ANOS ——————————————————————————————————————————*/


.vinteContainer {
    display: flex;
    gap: 50px;
}

.vinteAnosImg {
    width: 565px;
    display: inline-block;
}

.vinteAnosInfo {
    display: inline-block;
    width: calc(100% - 615px);
    float: right;
}

.vinteAnosInfoColumnContainer {
    column-count: 2;
    margin-top: 50px;
}