:root {
    --margin: 40px;
    --gap: 20px;
    --n-columns: 12;

    --margin-elements: 90px;
    --margin-elements-60px: 60px;
    --margin-elements-30px: 30px;
    --header-height: 0;

    --border-radius: 15px;

    --logoHeight: 54.4px;

    --white: #ffffff;
    --black: #1e1e1e;
    --yellow: #fbffad;
    --orange: #fd705d;
    --grey: #e0e0e0;

    --grey2: rgba(30, 30, 30, 0.5);
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "neue-haas-grotesk-text", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 29px;

    text-wrap: pretty;
}

/*fonts*/
p {
    font-size: 24px;
    line-height: 29px;
    font-weight: 400;
}

.p-small {
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
}

.p-smaller {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
}

h1 {
    font-size: 52px;
    line-height: 55px;
    font-weight: 400;
}

h2 {
    font-size: 36px;
    line-height: 40px;
    font-weight: 400;
}

a {
    color: inherit;
    text-decoration: none;
}


/*general*/
.grid {
    display: grid;
    grid-template-columns: repeat(var(--n-columns), 1fr);
    grid-gap: var(--gap);

    width: 100%;
}

.padding-inner {
    padding-left: var(--margin);
    padding-right: var(--margin);
    width: calc(100% - var(--margin) * 2);
}

.margin-inner {
    margin-left: var(--margin);
    margin-right: var(--margin);
    width: calc(100% - var(--margin) * 2);
}

.margin-top-90px {
    margin-top: var(--margin-elements);
}

.span-1 {
    grid-column: span 1;
}

.span-2 {
    grid-column: span 2;
}

.span-3 {
    grid-column: span 3;
}

.span-4 {
    grid-column: span 4;
}

.span-5 {
    grid-column: span 5;
}

.span-6 {
    grid-column: span 6;
}

.span-7 {
    grid-column: span 7;
}

.span-8 {
    grid-column: span 8;
}

.span-9 {
    grid-column: span 9;
}

.span-10 {
    grid-column: span 10;
}

.span-11 {
    grid-column: span 11;
}

.span-12 {
    grid-column: span 12;
}

.mobile-none {
    display: none;
}

.desktop-none {
    display: none;
}



.justify-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.align-left {
    display: flex;
    justify-content: flex-end;
    gap: var(--gap);
}

.align-right {
    display: flex;
    justify-content: flex-end;
    gap: var(--gap);
}

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

strong {
    font-weight: 500;
}

.bold {
    font-weight: 500;
}

.bold p {
    font-weight: 500;
}

::-moz-selection {
    /* Code for Firefox */
    color: var(--black);
    background: var(--yellow);
}

::selection {
    color: var(--black);
    background: var(--yellow);
}

.page-template-page-home,
.page-template-page-sobre,
.page-template-page-agenda {
    background-color: var(--yellow);
    color: var(--black);
}

.page-template-page-showcase {
    background-color: var(--orange);
    color: var(--black);
}

.page-template-page-editions {
    background-color: var(--grey);
    color: var(--black);
}

.page-template-page-home ::-moz-selection,
.page-template-page-sobre ::-moz-selection,
.page-template-page-agenda ::-moz-selection {
    /* Code for Firefox */
    color: var(--yellow);
    background: var(--black);
}

.page-template-page-home ::selection,
.page-template-page-sobre ::selection,
.page-template-page-agena ::selection {
    color: var(--yellow);
    background: var(--black);
}

.page-template-page-showcase ::-moz-selection {
    /* Code for Firefox */
    color: var(--black);
    background: var(--orange);
}

.page-template-page-showcase ::selection {
    color: var(--black);
    background: var(--orange);
}

.page-template-page-editions ::-moz-selection {
    /* Code for Firefox */
    color: var(--grey);
    background: var(--black);
}

.page-template-page-editions ::selection {
    color: var(--grey);
    background: var(--black);
}

/*assets*/

.arrow-slider-container {
    display: flex;
    flex-direction: row;
    gap: 40px;
}

.arrow-slider svg {
    width: 27px;
    height: 24px;
    opacity: 100%;
    transform: opacity 0.5s ease;
}

.arrow-slider svg:hover {
    opacity: 50%;
    cursor: pointer;
}

.arrow-slider:hover {
    opacity: 50%;
    cursor: pointer;
}

.arrow {
    width: 27px;
    height: 24px;
    opacity: 100%;
    transform: opacity 0.5s ease;
}

.arrow:hover {
    opacity: 50%;
    cursor: pointer;
}

/*button*/
.button-white-stroke,
.button-black-stroke,
.button-stroke,
.button-orange-stroke {
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
}

.button-div a {
    text-decoration: none;
}

.button-white-stroke {
    border: 1px solid var(--white);
    background-color: transparent;
    height: fit-content;
    padding: 10px 20px;
    color: var(--white);
    border-radius: 100px;
    transition: all 0.5s ease;
}

.button-stroke {
    border: 1px solid var(--white);
    background-color: transparent;
    height: fit-content;
    padding: 10px 20px;
    color: var(--white);
    border-radius: 100px;
    transition: all 0.5s ease;
}

.button-stroke:hover {
    background-color: var(--white);
    color: var(--black);
    cursor: pointer;
}

.button-white-stroke:hover {
    background-color: var(--white);
    color: var(--black);
    cursor: pointer;
}

.button-white-stroke.active {
    background-color: var(--white);
    color: var(--black);
}

.button-orange-stroke {
    border: 1px solid var(--orange);
    background-color: transparent;
    height: fit-content;
    padding: 10px 20px;
    color: var(--orange);
    border-radius: 100px;
    transition: all 0.5s ease;
}

.button-orange-stroke:hover {
    background-color: var(--orange);
    color: var(--white);
    cursor: pointer;
}

.button-orange-stroke.active {
    background-color: var(--orange);
    color: var(--white);
}

.button-black-stroke {
    border: 1px solid var(--black);
    background-color: transparent;
    height: fit-content;
    padding: 10px 20px;
    color: var(--black);
    border-radius: 100px;
    transition: all 0.5s ease;
}

.button-black-stroke.active {
    background-color: var(--black);
    color: var(--white);
}

.page-template-page-home .button-black-stroke:hover,
.page-template-page-sobre .button-black-stroke:hover,
.page-template-page-agenda .button-black-stroke:hover {
    background-color: var(--black);
    color: var(--yellow);
    cursor: pointer;
}

.page-template-page-home .button-black-stroke.active,
.page-template-page-sobre .button-black-stroke.active,
.page-template-page-agenda .button-black-stroke.active {
    background-color: var(--black);
    color: var(--yellow);
}

.page-template-page-showcase .button-black-stroke.active {
    background-color: var(--black);
    color: var(--orange);
}

.page-template-page-editions .button-black-stroke.active {
    background-color: var(--black);
    color: var(--grey);
}

.button-black-stroke:hover {
    background-color: var(--black);
    color: var(--white);
    cursor: pointer;
}

.button-div {
    display: flex;
    flex-direction: row;
    column-gap: var(--gap);
    row-gap: var(--gap);
    justify-content: flex-start;
    flex-wrap: wrap;
}

/*index*/
.hero-index {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/*video*/
.video-container {
    border-radius: var(--border-radius);
    width: calc(100% - var(--margin) * 2);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
    margin-top: var(--margin-elements);
}

.slider-container {
    margin-top: var(--margin-elements-60px);
}

.slider-video {
    width: calc(100% - var(--margin) * 2) !important;
}

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

.video-cover {
    position: relative;
}

.video-cover-info {
    z-index: 2;
    position: absolute;
    bottom: calc(var(--gap) * 2);
    left: calc(var(--gap) * 2);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: flex-start;
}

.video-info-title {
    color: var(--white);
}

/*video slider*/
.slide-cover-info {
    color: var(--white);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: flex-start;
}

.slide {
    border-radius: var(--border-radius);
}

.slide-cover {
    border-radius: var(--border-radius);
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}


.slide-cover-info {
    z-index: 2;
    position: absolute;
    bottom: calc(var(--gap) * 2);
    left: calc(var(--gap) * 2);
}

.slide-info-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.slide {
    position: relative;
}

.slide-arrows {
    z-index: 2;
    position: absolute;
    bottom: calc(var(--gap) * 2);
    right: calc(var(--gap) * 2);
    display: flex;
    flex-direction: row;
    gap: 40px;
}

/*video*/
.video-wrapper {
    width: 100%;
}

.slider-container {
    position: relative;
    overflow: hidden;
    display: flex;
    width: 100%;
}

.slider-container .video-slide {
    flex: 0 0 100%;
    min-width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.slider-container .video-slide.active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}

.slider-container:has(.video-slide:only-child) .video-slide {
    opacity: 1 !important;
    position: relative !important;
}

.video-youtube {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
    z-index: 3;
}

.video-youtube.active {
    pointer-events: unset;
    opacity: 1;
}

.video-youtube iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.video-youtube button.back-video {
    position: absolute;
    top: calc(var(--gap) * 2);
    left: calc(var(--gap) * 2);
}

/*galeria*/
.slider-container {
    position: relative;
    overflow: hidden;
    display: flex;
    width: 100%;
    max-height: calc(100dvh - var(--header-height) - var(--gap) * 2);
}

.slider-container .slide {
    flex: 0 0 100%;
    min-width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.slider-container .slide.active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}

/* If there's only one slide, make it always active */
.slider-container:has(.slide:only-child) .slide {
    opacity: 1 !important;
    position: relative !important;
}

.slide-legenda {
    position: absolute;
    color: var(--white);
    bottom: calc(var(--gap) * 2);
    left: calc(var(--gap) * 2);
    height: fit-content;
}

.slide-cover {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: var(--black);
}

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

.slide-cover img.vertical {
    height: 100%;
    width: auto;
    object-fit: contain;
}

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




/**/
.content-hr-top {
    margin-top: var(--margin-elements);
    border-top: 1px solid var(--black);
    padding-top: var(--margin-elements);
}

.margin-top {
    margin-top: var(--margin-elements);
}

.text-container {
    display: flex;
    flex-direction: column;
    gap: var(--margin-elements-60px);
    align-items: flex-start;
}

.text-container-single {
    display: flex;
    flex-direction: column;
    gap: var(--margin-elements);
    align-items: flex-start;
}

/*solid container*/


.container-solid-slider {
    width: calc(100% - (var(--margin) * 2));
    margin-top: var(--margin-elements);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    position: relative;
}

.container-solid-slide {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    padding: 40px 30px;
    border-radius: var(--border-radius);
    width: calc(100% - var(--margin) * 2);
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.container-solid-slide.active {
    opacity: 1;
    pointer-events: all;
    z-index: 10;
    position: relative;
    width: calc(100% - var(--margin) * 2);
}

.container-solid {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    padding: 40px 30px;
    border-radius: var(--border-radius);
    width: calc(100% - var(--margin) * 2);
    position: relative;
    opacity: 1;
    transition: opacity 0.5s ease;
    z-index: 1;
}

.container-solid-default,
.container-solid-black {
    background-color: var(--black);
    color: var(--white);
}

.container-solid-orange {
    background-color: var(--orange);
    color: var(--black);
}

.container-solid-grey {
    background-color: var(--grey);
    color: var(--black);
}

.container-solid-left {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.container-main-content {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.container-solid-title {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.container-solid-right {
    width: 50%;
}

.container-solid-right-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.container-solid-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container-solid-left-button {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    align-content: center;
    align-items: center;
}

.container-solid-arrow {
    display: flex;
    flex-direction: row;
    gap: 40px;
}


/*agenda*/
.agenda-item {
    margin: 0 calc(-1 * var(--margin));
    width: calc(100% + var(--margin) * 2);
}

.agenda-item a {
    color: var(--black);
    text-decoration: none;
}

.agenda-item a:hover {
    color: var(--yellow);
    text-decoration: none;
}

.agenda-item-content {
    align-items: center;
    border-top: 1px solid var(--black);
    width: calc(100% - var(--margin) * 2);
    box-sizing: border-box;
    transition: all 0.5s ease;
    margin: 0 var(--margin);
    padding: var(--gap) 0;
}

.agenda-item:hover {
    background-color: var(--black);
    color: var(--white);
    cursor: pointer;
}

.page-template-page-showcase .agenda-item:hover {
    background-color: var(--black);
    color: var(--orange);
    cursor: pointer;
}

.page-template-page-home .agenda-item:hover,
.page-template-page-sobre .agenda-item:hover,
.page-template-page-agenda .agenda-item:hover {
    background-color: var(--black);
    color: var(--yellow);
    cursor: pointer;
}

.agenda-container {
    margin-top: calc(var(--margin-elements) - var(--gap));
}

.button-agenda {
    padding: var(--gap) 0;
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
}

/*slider info*/
.container-solid-black .button-stroke {
    border: 1px solid var(--white);
    background-color: transparent;
    height: fit-content;
    color: var(--white);
    border-radius: 100px;
    transition: all 0.5s ease;
}

.container-solid-black .button-stroke:hover {
    background-color: var(--white);
    color: var(--black);
    cursor: pointer;
}

.container-solid-black .arrow-slider path {
    fill: var(--white);
}

.container-solid-orange .button-stroke {
    border: 1px solid var(--black);
    background-color: transparent;
    height: fit-content;
    color: var(--black);
    border-radius: 100px;
    transition: all 0.5s ease;
}

.container-solid-orange .button-stroke:hover {
    background-color: var(--black);
    color: var(--orange);
    cursor: pointer;
}

.container-solid-orange .arrow-slider path {
    fill: var(--black);
}

.container-solid-grey .button-stroke {
    border: 1px solid var(--black);
    background-color: transparent;
    height: fit-content;
    color: var(--black);
    border-radius: 100px;
    transition: all 0.5s ease;
}

.container-solid-grey .button-stroke:hover {
    background-color: var(--black);
    color: var(--grey);
    cursor: pointer;
}

.container-solid-grey .arrow-slider path {
    fill: var(--black);
}

/*news*/
.news-container-main {
    margin-top: calc(var(--margin-elements) * 2);
}

.news-item {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border-radius: var(--border-radius);
}

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

.news-title {
    color: var(--white);
    position: absolute;
    bottom: 0;
    z-index: 2;
    padding: var(--gap);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: flex-start;
}

.news-container {
    margin-top: calc(var(--margin-elements) - var(--gap));
}

.button-news {
    padding: var(--gap) 0;
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
    margin-top: calc(var(--margin-elements) - var(--gap));
}

/*header*/
.page-template-page-home .header-nav,
.page-template-page-sobre .header-nav,
.page-template-page-agenda .header-nav {
    background-color: var(--yellow);
}

.page-template-page-showcase .header-nav {
    background-color: var(--orange);
}

.page-template-page-editions .header-nav {
    background-color: var(--grey);
}

header {
    padding-top: var(--gap);
    padding-bottom: var(--gap);
    margin-bottom: 60px;
    background-color: var(--white);
    z-index: 100;
    position: sticky;
    top: 0;
    align-items: center;
}

.page-template-page-home header,
.page-template-page-sobre header,
.page-template-page-agenda header {
    background-color: var(--yellow);
}

.page-template-page-showcase header {
    background-color: var(--orange);
}

.page-template-page-editions header {
    background-color: var(--grey);
}

#logo-header {
    height: var(--logoHeight);
}

.header-buttons {
    grid-column: 11 / span 2;
    display: flex;
    justify-content: space-between;
    gap: var(--gap);
}

.header-language {
    display: flex;
    flex-direction: row;
    gap: 0.2em;
}

.header-language-selected {
    text-decoration: underline;
}

.header-nav-first {
    grid-column: 3 / span 3;
}

#header-menu:hover {
    cursor: pointer;
    text-decoration: underline;
}

.header-nav li {
    list-style: none;
    font-size: 36px;
    line-height: 40px;
    font-weight: 400;
}

.header-nav a {
    text-decoration: none;
    color: var(--black);
}

.header-nav li:hover {
    text-decoration: underline;
    cursor: pointer;
}

.header-nav ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-nav {
    width: 100%;
    position: absolute;

    background-color: var(--white);
    top: calc(var(--logoHeight) + var(--gap) * 2);
    opacity: 0;
    visibility: hidden;
    user-select: none;
    transition: all 0.5s ease;
    overflow: hidden;
}

.header-nav nav {
    width: calc(100% - var(--margin-elements) * 2) !important;
    padding: var(--gap) var(--margin-elements);
}

.header-nav.active {
    opacity: 1;
    user-select: auto;
    visibility: visible;
}

/*footer*/
footer {
    background-color: var(--black);
    color: var(--white);
    margin-top: calc(var(--margin-elements) * 2);
    padding-top: 40px;
    padding-bottom: 40px;
}

.footer-newsletter {
    display: flex;
    flex-direction: column;
    gap: var(--margin-elements-60px);
}

.footer-newsletter-input {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: flex-start;
}

.footer-pages {
    margin-top: 75px;
}

.footer-contacts {
    grid-column: 6 / span 3;
}

.footer-logos-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-logos-img-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-logos-img {
    height: 27px;
}

.footer-logos {
    display: flex;
    flex-direction: row;
    gap: var(--margin-elements-60px);
}

.footer-end {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: var(--gap);

    width: 100%;
}

.footer-end-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*artistas*/
.single-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.single-img-horizontal {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--border-radius);
    overflow: hidden;
}

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

.single-details {
    padding-top: var(--gap);
    border-top: 1px solid var(--black);
    row-gap: var(--margin-elements-60px);
    margin-top: var(--gap);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/*.single-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}*/

.single-container {
    margin-top: var(--margin-elements);
}

.single-container-slider {
    margin-left: var(--margin);
    margin-right: var(--margin);
    width: calc(100% - var(--margin) * 2);
}

.single-container-slider a {
    text-decoration: none;
    color: var(--black);
}



.single-container a {
    text-decoration: none;
    color: var(--black);
}

/*artistas-single*/
.arrow-back {
    margin-bottom: 40px;
}


.single-slide {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
}

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

.single-slide-info {
    color: var(--white);
    position: absolute;
    bottom: 0;
}

.single-slide-info {
    width: calc(100% - var(--margin-elements-30px) * 2);
    padding: var(--margin-elements-30px);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.single-main-info {
    padding-right: var(--gap);
    border-right: 1px solid var(--black);
}

.single-aside {
    display: flex;
    flex-direction: column;
    gap: var(--margin-elements);
}

.single-aside-info {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: flex-start;
}

#single-text-seemore {
    position: relative;
    overflow: hidden;
    max-height: 203px;
    /* collapsed height */
    transition: max-height 0.5s ease;
    user-select: none;
}


#single-text-seemore.expanded {
    max-height: 2000px;
    /* large enough to show full content */
}

#single-text-seemore-button {
    cursor: pointer;
    margin-top: var(--gap);
}

.margin-slider-container {
    margin-top: calc(var(--margin-elements) - var(--gap));
}

.single-aside-button {
    margin-top: var(--gap);
}

.single-title {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/*agenda*/
.filter-agenda .active {
    text-decoration: underline;
}

.filter-agenda-container {
    margin-top: var(--margin-elements-30px);
}

/*image container*/
.image-container {
    border-radius: var(--border-radius);
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

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

/*single-item-horizontal*/
.single-img-horizontal {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.single-item-horizontal:hover .button-black-stroke {
    background-color: var(--black);
    color: var(--yellow);
    cursor: pointer;
}

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

.single-container-slider {
    margin-top: calc(var(--margin-elements) - var(--gap));
    margin-left: var(--margin);
    display: flex;
    flex-direction: row;
    gap: var(--gap);

    overflow-x: scroll;

    scrollbar-width: none;
    padding-bottom: 1rem;

    margin-left: calc(var(--margin) * -1);
    width: calc(100% + var(--margin) * 0);
    padding: 0 var(--margin);
}

.single-container-slider::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.single-item-horizontal {
    flex: 0 0 calc(50% - var(--gap) / 2);
    scroll-snap-align: start;
    box-sizing: border-box;
}

.single-img-vertical {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--border-radius);
    overflow: hidden;
}

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

.single-item-vertical {
    flex: 0 0 calc(33% - var(--gap) / 2);
    scroll-snap-align: start;
    box-sizing: border-box;
}

/*container solid list*/
.container-solid-list {
    display: flex;
    flex-direction: row;
    gap: var(--gap);

    padding: 40px 30px;
    margin-top: var(--margin-elements);
    border-radius: var(--border-radius);

    display: flex;
    flex-direction: row;
    gap: var(--gap);
}

.container-solid-white {
    background-color: var(--white);
    color: var(--orange);
}

.container-solid-white .button-stroke {
    border: 1px solid var(--orange);
    background-color: transparent;
    height: fit-content;
    color: var(--orange);
    border-radius: 100px;
    transition: all 0.5s ease;
}

.container-solid-white .arrow-slider path {
    fill: var(--orange);
}

.container-solid-black {
    background-color: var(--black);
}

.container-solid-list-left {
    width: 50%;
}

.container-solid-list-right {
    width: 50%;
}

.container-solid-white .container-solid-list-item {
    padding-bottom: calc(var(--gap) * 2);
    border-bottom: 1px solid var(--black);
    margin-bottom: calc(var(--gap) * 2);
    color: var(--black);
}

.container-solid-black .container-solid-list-item {
    padding-bottom: calc(var(--gap) * 2);
    border-bottom: 1px solid var(--white);
    margin-bottom: calc(var(--gap) * 2);
    color: var(--white);
}

.container-solid-list-item:last-child {
    margin-bottom: 0;
}

.container-solid-slider-item {
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--yellow);

    flex: 0 0 calc(75% - var(--gap) / 2);
    scroll-snap-align: start;
    box-sizing: border-box;
    padding: var(--margin-elements-30px);
}

.container-solid-right-slider {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;

    /* Hide scrollbar */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.container-solid-right-slider::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.container-solid-slider-img {
    aspect-ratio: 4 / 4;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.container-solid-slider-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container-solid-slider-info {
    color: var(--black);
    border-top: 1px solid var(--black);
    padding-top: var(--margin-elements-30px);
    margin-top: var(--margin-elements-30px);

    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}

.container-solid-slider-info-buttons {
    margin-top: var(--margin-elements-60px);
}

/*showcase*/
.solid-button {
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--margin-elements-30px);
    background-color: var(--black);
    border-radius: var(--border-radius);
    margin-top: var(--margin-elements);
}

.solid-button-orange {
    color: var(--black);
    background-color: var(--orange);
}

.solid-button-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--margin-elements-30px);
    margin-top: var(--margin-elements-30px);
    border-top: 1px solid var(--white);
}

.solid-button-item-a {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: var(--white);
    opacity: 1;
    transition: opacity 0.5s ease;
}

.solid-button-item-a:hover {
    opacity: 0.5;
}

.solid-button-item:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: 0 !important;
}

.solid-button-item-a:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: 0 !important;
}

.solid-button-orange {
    background-color: var(--orange);
    color: var(--black);
}

.solid-button-orange .solid-button-item {
    border-top: 1px solid var(--black);
}

.container-solid-white-showcase {
    background-color: var(--white);
    color: var(--orange);
}

.container-solid-title-info {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
}

.container-solid-info {
    flex: 0 0 calc(25% - var(--gap) / 2);
}

.container-showcase {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.container-showcase-title {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.container-showcase-slider-item {
    background-color: var(--white);
}

.container-showcase-slider-item .container-solid-slider-info {
    color: var(--orange);
    border-top: 1px solid var(--orange);
}

/*partners*/
.partners-item img {
    width: 100%;
}

.partners-item-container {
    row-gap: 10px;
}

/*discography*/

.discography-img-vertical {
    aspect-ratio: 3 / 4;
    width: 100%;
}

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

.discography-img-square {
    aspect-ratio: 4 / 4;
    width: 100%;
}

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

.discography-grey {
    color: var(--grey2);
}

.discography-details {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: flex-start;
}

.discography-categories {
    padding: 10px 0;
    margin-bottom: 10px;

    border-bottom: 1px solid var(--black);
}

.discography-container {
    margin-top: calc(var(--margin-elements) - var(--gap));
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    overflow-x: scroll;
    scrollbar-width: none;
    padding-bottom: 1rem;
    margin-left: calc(var(--margin) * -1);
    width: calc(100% + var(--margin) * 0);
    padding: 0 var(--margin);
}

.scroll-container {
    cursor: grab;
}

.scroll-container.dragging {
    cursor: grabbing;
}

.discography-item {
    flex: 0 0 calc(33% - var(--gap) / 2);
    scroll-snap-align: start;
    box-sizing: border-box;
}

.discography-details-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

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

    /*fonts*/
    p {
        font-size: 29px;
        /* was 24px */
        line-height: 34px;
        /* was 29px */
        font-weight: 400;
    }

    .p-small {
        font-size: 25px;
        /* was 20px */
        line-height: 29px;
        /* was 24px */
        font-weight: 400;
    }

    .p-smaller {
        font-size: 17px;
        /* was 12px */
        line-height: 21px;
        /* was 16px */
        font-weight: 400;
    }

    h1 {
        font-size: 57px;
        /* was 52px */
        line-height: 60px;
        /* was 55px */
        font-weight: 400;
    }

    h2 {
        font-size: 41px;
        /* was 36px */
        line-height: 45px;
        /* was 40px */
        font-weight: 400;
    }
}

@media screen and (max-width: 960px) {
    :root {
        --margin: 40px;
        --gap: 20px;
        --n-columns: 12;

        --margin-elements: 45px;
        --margin-elements-60px: 40px;
        --margin-elements-30px: 20px;

        --border-radius: 15px;

        --logoHeight: 34px;
    }

    /*fonts*/
    p {
        font-size: 16px;
        line-height: 20px;
        font-weight: 400;
    }

    .p-small {
        font-size: 16px;
        line-height: 20px;
        font-weight: 400;
    }

    .p-smaller {
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
    }

    h1 {
        font-size: 24px;
        line-height: 29px;
        font-weight: 400;
    }

    h2 {
        font-size: 24px;
        line-height: 29px;
        font-weight: 400;
    }


    /*geral*/
    .button-white-stroke,
    .button-black-stroke,
    .button-stroke,
    .button-orange-stroke {
        font-size: 16px;
        line-height: 20px;
        font-weight: 400;
        padding: 5px 10px;
    }

    /*header*/
    .header-language {
        display: none;
    }

    .header-buttons {
        grid-column: 8 / span 6;
        display: flex;
        justify-content: flex-end;
        gap: var(--gap);
    }

    .header-nav nav ul {
        grid-column: span 12;
    }

    .header-nav nav {
        height: calc(100vh - (var(--logoHeight) + var(--gap)) - (var(--gap) * 3));
    }

    /*homepage*/
    .span-12-m {
        grid-column: span 12;
    }

    .span-11-m {
        grid-column: span 11;
    }

    .span-10-m {
        grid-column: span 10;
    }

    .span-9-m {
        grid-column: span 10;
    }

    .span-8-m {
        grid-column: span 10;
    }

    .span-7-m {
        grid-column: span 7;
    }

    .span-6-m {
        grid-column: span 6;
    }

    .span-5-m {
        grid-column: span 5;
    }

    .span-4-m {
        grid-column: span 4;
    }

    .span-3-m {
        grid-column: span 3;
    }

    .span-2-m {
        grid-column: span 2;
    }

    .span-1-m {
        grid-column: span 1;
    }

    /*header*/
    header {
        margin-bottom: 30px;
    }

    /*artistas*/
    .single-item {
        grid-column: span 12;
    }

    .single-img {
        aspect-ratio: 4 / 3;
    }

    .single-details {
        gap: 20px;
    }

    /*news*/
    .news-item {
        position: relative;
        aspect-ratio: 4 / 3;
        grid-column: span 12;
    }

    .single-main-info {
        padding-right: 0;
        padding-bottom: var(--gap);
        border-right: none;
        border-bottom: 1px solid var(--black);

        grid-column: span 12;
    }

    .text-container {
        gap: var(--margin-elements-30px);
    }

    .single-aside {
        grid-column: span 12;
    }

    /*slider video*/
    .slide-cover-info {
        bottom: calc(var(--gap));
        left: calc(var(--gap));
    }

    .slide-cover {
        aspect-ratio: 4 / 3;
    }

    /*slider solid*/
    .container-solid-left {
        width: 100%;
    }

    .container-solid-right {
        width: 100%;
    }

    .container-solid-slide {
        display: flex;
        flex-direction: column;
    }

    .arrow-slider-container {
        gap: 20px;
    }

    .arrow-slider svg {
        width: 18px;
        height: 16px;
    }

    .arrow-back img {
        width: 18px;
        height: 16px;
    }

    .arrow-slider {
        width: 18px;
        height: 16px;
    }

    .solid-button-item img {
        width: 18px;
        height: 16px;
    }

    .container-solid-title {
        gap: 20px;
        margin-bottom: 20px;
    }

    .container-solid-right-img {
        aspect-ratio: 4 / 4;
    }

    /*agenda*/
    .agenda-item-content {
        grid-gap: 0 !important;
    }

    .agenda-item-content {
        position: relative;
    }

    .arrow-agenda {
        position: absolute;
        top: 50%;
        right: 0;
    }

    .order-1 {
        order: 1;
    }

    .order-2 {
        order: 2;
    }

    .category-agenda>* {
        font-size: 12px;
        line-height: 15px;
        margin-bottom: 10px;
    }

    .local-agenda {
        margin-top: 10px;
    }

    .news-container-main {
        margin-top: calc(var(--margin-elements));
    }

    /*footer*/
    .footer-logos {
        margin-top: var(--gap);
    }

    .footer-pages-mobile {
        display: block;
        margin-top: var(--gap);
    }

    .footer-logos {
        display: flex;
        flex-direction: column;
        gap: var(--gap);
    }

    /*agenda*/
    .filter-agenda-container {
        margin-bottom: 90px;
    }

    /*sobre*/
    .image-container {
        aspect-ratio: 4 / 3;
    }

    .single-item-horizontal {
        flex: 0 0 calc(75% - var(--gap) / 2);
    }

    /*container solid*/
    .container-solid-list-left {
        width: 100%;
    }

    .container-solid-list-right {
        width: 100%;
    }

    .container-solid-list {
        flex-direction: column;
        gap: 40px;
    }

    .container-solid-white .container-solid-list-item {
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .container-solid-list-item h2 {
        font-size: 16px;
        list-style-type: 20px;
    }

    .container-solid-type2 {
        display: flex;
        flex-direction: column;
    }

    .container-solid-slider-item {
        border-radius: var(--border-radius);
        overflow: hidden;
        background-color: var(--yellow);
        flex: 0 0 calc(100%);
        scroll-snap-align: start;
        box-sizing: border-box;
        padding: var(--margin-elements-30px);
    }

    .container-solid-slider-info-buttons {
        margin-top: var(--margin-elements-30px);
    }


    .single-title {
        gap: 0.5em;
    }

    .container-solid-black .container-solid-list-item {
        padding-bottom: 10px;
        margin-bottom: 10px;
    }


    .solid-button {
        padding: var(--gap);
        margin-top: var(--gap);
    }

    .single-container-slider {
        margin-left: var(--margin);
        margin-right: 0;
        width: calc(100% - var(--margin));
    }


    /*agenda*/
    .single-aside-button {
        margin-top: 0;
    }

    .slide-arrows {
        bottom: calc(var(--gap));
        right: calc(var(--gap));
        gap: 20px;
    }

    .hr-solid {
        margin: calc(var(--gap)) auto calc(var(--gap) * 2) auto;
        display: block;
    }

    .single-aside {
        display: flex;
        flex-direction: column;
        gap: var(--gap);
    }

    .margin-slider-container {
        margin-top: 0;
    }

    .single-main-info {
        padding-bottom: calc(var(--gap) * 2);
    }



    .single-aside-info {
        margin: var(--gap) 0;
    }

    /*showcase*/
    .container-solid-left-button {
        margin-top: var(--gap);
    }

    .container-solid-title-info {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .container-showcase {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .container-solid-slide {
        width: calc(100% - var(--margin) * 2);
    }

    .container-solid-slide.active {
        width: calc(100% - var(--margin) * 2);
    }

    .container-solid-slider {
        width: calc(100% - var(--margin) * 2);
    }

    /**/
    .single-item-vertical {
        flex: 0 0 calc(75% - var(--gap) / 2);
    }

    .single-img-vertical {
        aspect-ratio: 4 / 4;
    }

}