:root {
    --white: #f2f2f2;
    --grey: #999999;
    --gold: #aa8a2c;
    --spotify: #1ed760;
    --youtube: #ff0000;
    --transparentBackground: #212322cc;
    --noUpcomingDatesMsgDisplay: initial;
    --upcomingDatesTableLabelsDisplay: hidden;
    --setlistDisplay: none;
}

body {
    background-image: url('../ressources/imgs/background.jpg');
    background-size: cover;
    width: 100vw;
    height: 100%;
    overflow: hidden;
    font-family: Jost;
    color: var(--white);
    margin: 0;
    background-color: #1d1d1d;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@supports (-webkit-touch-callout: none) {
    body {
        min-height: -webkit-fill-available;
    }
}

ul {
    list-style: none;
}

ul,
li {
    margin: 0;
    padding: 0;
}

img {
    display: block;
}

header > .may-mainMenu--desktop ul.may-menuContainer {
    display: flex;
    gap: 4em;
    align-items: center;
}

header > .may-mainMenu--desktop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    height: 6em;
    position: absolute;
    left: 2.5%;
    top: 0;
}

header > .may-mainMenu--desktop ul li {
    font-size: 1.1em;
    text-transform: uppercase;
    position: relative;
}

header > .may-mainMenu--desktop .may-logoContainer > img {
    height: 4em;
}

[class*='may-button'] {
    border-style: solid;
    border-width: 1px;
    border-color: var(--gold);
    border-radius: 4em;
    padding: 0.6em 2em;
    text-transform: uppercase;
}

#homepage section {
    grid-template-columns: 1fr 1fr;
    gap: 0 20vw;
    grid-auto-rows: 1fr;
}

main section {
    width: 95%;
    height: calc(100% - 8em);
    position: absolute;
    left: 2.5%;
    display: grid;
    top: 6em;
}

h1 {
    font-size: max(4em, min(5vw, 6.5em));
    font-weight: 500;
    margin: 0;
    margin-bottom: 0.25em;
}

#homepage .may-musicPlatforms {
    display: flex;
    gap: 1.5em;
}

button {
    background: none;
    color: currentColor;
    font-family: inherit;
    border: none;
    cursor: pointer;
}

.may-button--spotify {
    border-color: var(--spotify);
}

.may-button--apple {
    border-color: var(--white);
}

.may-button--youtube {
    border-color: var(--youtube);
}

.may-musicPlatforms button > img {
    height: 2.2em;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2em;
}

#homepage #title .may-container {
    width: fit-content;
}

#homepage #title {
    align-items: center;
    justify-content: center;
}

#homepage > section > .may-cell {
    display: flex;
}

.may-datesGrid {
    display: grid;
    grid-template-columns: repeat(4, fit-content(100%));
}

.may-datesGrid .may-tourDate--single {
    display: contents;
}

span {
    font-size: 1.2em;
}

.may-datesGrid {
    gap: 2em 4em;
    align-items: center;
}

.may-datesGrid .may-tourDate--single {
    color: var(--white);
    text-transform: initial;
}

.may-datesGrid .may-subtext {
    color: var(--grey);
    font-size: 0.8em;
}

.may-datesGrid .may-tag--city {
    line-height: 1em;
}

#homepage #tour-dates-widget > div {
    width: 100%;
}

h2 {
    font-weight: 500;
    text-transform: uppercase;
    font-size: max(2.2em, min(2vw, 3.5em));
}

span > [class*='may-button'] {
    padding: 1em 2em;
}

#homepage > div.may-bg {
    position: fixed;
    z-index: -10;
    width: fit-content;
    right: 0;
    bottom: 0;
    height: calc(100% - 8em);
    max-width: 50vw;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

#homepage > div.may-bg > img {
    max-width: 100%;
    max-height: 100%;
}

#homepage #tour-dates-widget.may-cell {
    align-items: flex-end;
}

input {
    border: none;
    -webkit-appearance: none;
    background: none;
    color: currentColor;
    font-family: inherit;
}

input:focus {
    outline: none;
}

#homepage #newsletter {
    align-items: flex-end;
    justify-content: flex-end;
    visibility: hidden;
}

#newsletter .may-CTA {
    height: fit-content;
    background-color: var(--transparentBackground);
    border-style: solid;
    border-width: 1px;
    border-color: var(--gold);
    border-radius: 4em;
}

#newsletter .may-CTA > input {
    padding-left: 1.25em;
    padding-right: 1em;
    padding-top: 0.45em;
    padding-bottom: 0.45em;
    font-size: 1.2em;
    width: 20vw;
}

#newsletter .may-CTA > button {
    padding-right: 2.25em;
    padding-top: 0.45em;
    padding-bottom: 0.45em;
    padding-left: 2em;
    border-left-style: solid;
    border-width: 1px;
    border-color: var(--gold);
    font-size: 1.2em;
}

#newsletter .may-CTA > input::placeholder {
    color: var(--white);
    opacity: 0.6;
}

@media (max-width:1699px) {
    #homepage section {
        gap: 0;
    }
}

.may-datesGrid .may-tourDate--single .may-button {
    white-space: nowrap;
    padding: 1em 2em;
}

@media (max-width:1149px) {
    #homepage #placeholder.may-cell {
        display: none;
    }

    #homepage > div.may-bg {
        max-width: unset;
        width: max-content;
        height: calc(100% - 10em);
    }

    #homepage section {
        grid-template-columns: 1fr;
    }
}

@media (max-height:799px) {
    #homepage .may-datesGrid .may-tourDate--single:last-of-type {
        display: none;
    }

    .may-layout--2.may-scrollable {
        overflow: scroll;
    }

    .may-layout--2.may-scrollable > .may-content.may-scrollable {
        overflow: initial;
    }

    #tour-dates #details.may-layout--2.may-noscroll {
        grid-template-rows: unset;
    }
}

@media (max-width:1149px) {
    #homepage #title {
        justify-content: flex-start;
    }

    .may-datesGrid {
        justify-content: space-between;
    }
}

@media (max-width:649px) {
    main section {
        width: 90%;
        left: 5%;
        top: 5em;
        height: calc(100% - 7em);
    }

    .may-musicPlatforms button > img {
        height: 1.4em;
    }
}

.may-tableLabel {
    color: var(--grey);
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width:649px) {
    .may-datesGrid .may-tourDate--single > .may-wrapper {
        display: grid;
        width: fit-content;
    }

    .may-datesGrid .may-responsive--desktop {
        display: none;
    }
}

@media (min-width:650px) {
    .may-datesGrid .may-responsive--mobile {
        display: none;
    }
}

@media (max-width:649px) {
    .may-datesGrid {
        gap: 1em;
        grid-template-columns: repeat(3, min-content);
    }
}

@media (min-width:650px) {
    .may-datesGrid .may-tourDate--single > .may-wrapper {
        display: contents;
    }
}

.may-datesGrid .may-tourDate--single .may-wrapper:first-of-type {
    align-self: start;
}

@media (max-width:649px) {
    span {
        font-size: 1em;
    }

    .may-layout--2.may-scrollable {
        overflow: scroll;
    }

    .may-layout--2.may-scrollable > .may-content.may-scrollable {
        overflow: initial;
    }
}

@media (min-width:650px) {
}

@media (max-width:649px) {
}

@media (max-width:459px) {
    #homepage #title .may-responsive--desktop {
        display: none;
    }
}

@media (min-width:460px) {
    #homepage #title .may-responsive--mobile {
        display: none;
    }
}

@media (max-width:459px) {
    #homepage #title button {
        border: none;
        padding: 0;
    }

    #homepage #title button > img {
        height: 2.5em;
    }
}

.may-datesGrid .may-tourDate--single button > img {
    height: 3em;
}

.may-datesGrid .may-tourDate--single button:before {
    content: "More Infos";
}

@media (min-width:460px) {
    .may-datesGrid .may-tourDate--single button > img {
        display: none;
    }
}

@media (max-width:459px) {
    .may-datesGrid .may-tourDate--single button:before {
        display: none;
    }

    .may-datesGrid .may-tourDate--single button {
        border: none;
        padding: 0;
        padding-right: 1em;
    }
}

@media (max-width:1499px) {
    header > .may-mainMenu--desktop ul.may-menuContainer {
        gap: 1.8em;
    }

    header > .may-mainMenu--desktop ul > li {
        font-size: 1em;
    }
}

@media (max-width:1149px) {
    header > .may-mainMenu--desktop ul.may-menuContainer {
        display: none;
    }
}

section.may-layout--2 #title {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: title;
}

#social-cause #placeholder {
    grid-area: placeholder;
}

#social-cause .may-content {
    display: grid;
    gap: 3em;
    padding-top: 3em;
}

#social-cause .may-content > .may-element {
    display: grid;
    grid-template-rows: repeat(2, min-content);
    gap: 0 4em;
    justify-self: center;
}

#social-cause .may-content .may-element h2 {
    grid-area: title;
}

#social-cause .may-content .may-element .may-pContainer {
    grid-area: text;
    text-align: justify;
}

.may-pContainer > p:first-of-type {
    margin-top: 0;
}

.may-pContainer > p:last-of-type {
    margin-bottom: 1.5em;
}

p {
    font-size: 1.2em;
}

#social-cause .may-content .may-element .may-imgContainer {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 1em;
}

#social-cause .may-content .may-element:nth-child(2n+1) {
    grid-template-areas: "title title" "text image";
    grid-template-columns: 3fr 2fr;
}

#social-cause .may-content .may-element:nth-child(2n) {
    grid-template-areas: "title title" "image text";
    grid-template-columns: 2fr 3fr;
}

#social-cause .may-content .may-element:nth-child(2n) h2 {
    text-align: right;
}

#social-cause .may-content .may-element:nth-child(2n) .may-pContainer > button {
    float: right;
}

section.may-layout--2 #title h1 {
    margin: 0;
    margin-top: 0.5em;
}

@media (max-width:1149px) {
    #social-cause .may-content .may-element:nth-of-type(1n) {
        grid-template-columns: 1fr;
        grid-template-areas: "title" "image" "text";
    }

    #social-cause .may-content .may-element .may-imgContainer {
        height: 10em;
        margin-bottom: 1em;
    }
}

section.may-layout--2 #title .may-titleContainer {
    width: 80%;
}

.may-scrollable::-webkit-scrollbar {
    display: none;
}

.may-scrollable {
    overflow: scroll;
    scrollbar-width: none;
}

section.may-layout--2 .may-content .may-element {
    width: 65%;
}

@media (max-width:649px) {
    section.may-layout--2 #title .may-titleContainer {
        width: 100%;
    }

    section.may-layout--2 .may-content > .may-element {
        width: 100%;
    }

    #social-cause .may-content .may-element:nth-child(1n) h2 {
        text-align: left;
    }

    #social-cause .may-content .may-element:nth-child(1n) .may-pContainer > button {
        float: none;
    }
}

section.may-layout--2 .may-content {
    grid-area: content;
}

section.may-layout--2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content 1fr;
    grid-template-areas: "title title" "content content";
}

#peter-and-friends .may-content {
    display: grid;
    padding-top: 6em;
}

#peter-and-friends .may-content #peter.may-element {
    justify-self: center;
    display: grid;
    grid-template-areas: "title title" "text video";
    grid-template-columns: 11fr 9fr;
    gap: 0 4em;
    height: min-content;
}

#peter-and-friends .may-content #peter.may-element .may-pContainer {
    grid-area: text;
    text-align: justify;
}

.may-YTvideo > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.may-YTvideo {
    position: relative;
    height: fit-content;
    border-radius: 1em;
    overflow: hidden;
    clip-path: inset(0% 0% 0% 0% round 1em);
}

.may-YTvideo > .may-spacer {
    padding-top: 56.25%;
}

#friends.may-element {
    justify-self: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4em;
}

.may-socialNetworks img {
    height: 2em;
}

.may-card .may-imgContainer > img {
    position: absolute;
    top: 0;
    left: 0;
}

.may-card .may-imgContainer {
    position: relative;
    background-image: url('../ressources/imgs/image217731-1.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-bottom: 1.5em;
    border-radius: 1em;
    filter: grayscale(100%);
}

.may-card .may-imgContainer > .may-spacer {
    padding-top: 55%;
}

.may-card .may-pContainer {
    text-align: justify;
    margin-top: 1.5em;
}

.may-card h2 {
    margin-top: 0;
    margin-bottom: 0.25em;
}

.may-card > span {
    color: var(--grey);
    text-transform: uppercase;
}

#peter-and-friends .may-content #peter .may-YTvideo {
    grid-area: video;
}

#peter-and-friends .may-content #peter h2 {
    grid-area: title;
    margin-top: 0;
}

#peter-and-friends .may-content #peter .may-socialNetworks {
    margin-top: 1.5em;
}

@media (max-width:1499px) {
    #peter-and-friends .may-content #peter.may-element {
        grid-template-areas: "title title" "video video" "text text";
    }

    #peter-and-friends .may-content #peter.may-element .may-pContainer {
        padding-top: 1.5em;
    }
}

.may-scrollable--fading--top {
    mask-image: linear-gradient(transparent, rgb(0, 0, 0) 3em);
    -webkit-mask-image: linear-gradient(transparent, rgb(0, 0, 0) 3em);
}

#tour-dates .may-content > .may-element {
    justify-self: center;
    display: grid;
    grid-template-columns: minmax(45%, min-content) 1fr;
    gap: 4em;
    grid-template-areas: "dates image";
    display: none;
}

#tour-dates .may-content {
    display: grid;
    padding-top: 6em;
    grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
}

#tour-dates .may-datesGrid {
    height: 100%;
    justify-content: space-between;
    gap: 2em;
    grid-area: dates;
}

#tour-dates #dates .may-content .may-imgContainer {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 1em;
    grid-area: image;
}

section.may-layout--2.may-noscroll {
    grid-template-rows: repeat(auto-fit, minmax(100px, min-content));
}

.may-scrollable--fading--top-and-bottom {
    mask-image: linear-gradient(transparent, rgb(0, 0, 0) 5%, rgb(0, 0, 0) 95%, transparent);
    -webkit-mask-image: linear-gradient(transparent, rgb(0, 0, 0) 5%, rgb(0, 0, 0) 95%, transparent);
}

#title h1 > span,
#title h1 > a {
    font-size: 1em;
}

#tour-dates #title h1 > span,
#tour-dates #title h1 > a {
    color: var(--grey);
}

#tour-dates #title h1 > a.may-active {
    color: inherit;
}

h1 > a > .may-underline {
    position: absolute;
    left: 0;
    bottom: 0;
}

#tour-dates #title h1 > a {
    position: relative;
    cursor: pointer;
}

#title h1 > a.may-active > .may-underline {
    width: 100%;
    height: 5px;
    background-color: var(--gold);
}

#tour-dates .may-content > .may-element.may-active {
    display: inherit;
}

#tour-dates section.may-active {
    display: grid;
}

#tour-dates section {
    display: none;
}

#tour-dates #details #title h1 {
    margin: 0;
    pointer-events: none;
}

#tour-dates #details #title button {
    margin-top: 2em;
    font-size: max(1em, min(0.9vw, 1.3em));
}

#tour-dates #details #title p {
    margin: 0;
}

#tour-dates #details .may-content > .may-element {
    display: grid;
    grid-template-areas: "gallery setlist";
    grid-template-columns: 1fr minmax(40%, max-content);
    gap: 8em;
}

#tour-dates #details .may-gallery {
    grid-area: gallery;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5em;
    height: min-content;
}

.may-gallery .may-imgContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: min-content;
    border-radius: 0.5em;
    overflow: hidden;
}

.may-gallery .may-imgContainer > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

.may-gallery .may-imgContainer > .may-spacer {
    padding-top: 56.25%;
}

#tour-dates #details #setlist {
    grid-area: setlist;
    display: var(--setlistDisplay);
}

.may-setlist {
    display: grid;
    grid-template-columns: min-content min-content 1fr;
    justify-content: start;
    counter-reset: setlist;
    gap: 1em 2em;
}

.may-setlist .may-track {
    display: contents;
}

.may-setlist .may-track > .may-track--count::before {
    counter-increment: setlist;
    content: counter(setlist, decimal-leading-zero);
}

#tour-dates #details #setlist h2 {
    margin-top: 0;
}

.may-setlist .may-track > .may-track--platforms {
    white-space: nowrap;
}

.may-setlist .may-track > .may-track--platforms > button > img {
    height: 1.5em;
}

.may-setlist .may-track .may-track--name {
    white-space: nowrap;
}

#tour-dates #dates #past .may-datesGrid .may-tourDate--single button:before {
    content: "More infos";
}

#tour-dates #details #setlist .may-track--platforms {
    text-align: center;
}

#tour-dates #dates > .may-content > .may-element {
    max-height: 600px;
}

#tour-dates #dates > .may-content > .may-element > .may-selector > button > h2 {
    margin-top: 0.5em;
    margin-bottom: 0.7em;
    text-transform: none;
    position: relative;
}

#tour-dates #dates > .may-content > .may-element > .may-selector {
    display: grid;
    grid-template-columns: min-content min-content;
    gap: 2em;
    justify-content: space-around;
    display: none;
    grid-area: selector;
}

.may-selector > button.may-active > h2 > .may-underline {
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 3px;
    background-color: var(--gold);
}

@media (max-width: 1499px) and (min-height: 800px) {
    #tour-dates #dates .may-content .may-imgContainer {
        display: none;
    }

    #tour-dates .may-content > .may-element {
        grid-template-columns: 1fr;
        grid-template-areas: "dates";
    }
}

@media (max-width: 1299px) {
    #tour-dates #dates .may-content > .may-element {
        grid-template-columns: 1fr;
        grid-template-areas: "image" "selector" "dates";
        gap: 0;
        max-height: initial;
    }

    #tour-dates #dates .may-content .may-imgContainer {
        height: 10em;
        display: inherit;
    }

    #tour-dates #dates .may-content {
        padding-top: 3em;
    }

    #tour-dates #dates #title {
        display: none;
    }

    #tour-dates #dates > .may-content > .may-element > .may-selector {
        display: inherit;
    }
}

@media (max-width:1149px) {
    #tour-dates #dates > .may-content > .may-element {
        width: 80%;
    }
}

@media (max-width:649px) {
    #tour-dates #dates .may-content .may-imgContainer {
        height: 8em;
    }
}

@media (max-width:799px) {
    #tour-dates #dates > .may-content > .may-element {
        width: 100%;
    }
}

@media (max-width:1499px) {
    #tour-dates #details .may-gallery {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    #tour-dates #details .may-content > .may-element {
        gap: 4em;
    }
}

@media (max-width:1149px) {
    #tour-dates #details .may-content > .may-element {
        grid-template-areas: "gallery" "setlist";
        grid-template-columns: 1fr;
    }
}

@media (max-width:649px) {
    #tour-dates #details .may-content > .may-element {
        width: 100%;
    }

    #tour-dates #details > .may-content {
        overflow: initial;
    }

    #tour-dates #details.may-layout--2.may-noscroll {
        grid-template-rows: unset;
    }
}

@media (max-width:1149px) {
    #tour-dates #details > .may-content {
        padding-top: 3em;
    }

    .may-setlist {
        grid-template-columns: min-content 1fr min-content;
    }
}

#gallery .may-content > .may-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    height: min-content;
    gap: 1em 2em;
}

#gallery .may-content {
    display: grid;
}

#gallery .may-content .may-gallery > .may-SN--post {
    height: min-content;
}

#gallery .may-content > .may-gallery .may-imgContainer {
    border-radius: 1em;
}

#gallery .may-gallery .may-SN--post > span {
    color: var(--grey);
}

#gallery .may-content {
    padding-top: 3em;
}

#gallery .may-content .may-element {
    justify-self: center;
}

#gallery .may-content > .may-socialNetworks {
    text-align: center;
    padding-bottom: 3em;
    padding-top: 3em;
}

#gallery .may-content > .may-socialNetworks > h2 {
    text-transform: none;
    font-weight: 400;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

@media (max-width:799px) {
    #gallery .may-content > .may-element {
        width: 80%;
    }
}

@media (max-width:649px) {
    #gallery .may-content > .may-element {
        width: 100%;
    }
}

.may-layout--3 > .may-content {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "title title" "art tracklist" "list list";
    display: grid;
    grid-template-rows: min-content 1fr min-content;
    height: 100%;
    gap: 3em 4em;
    width: 80%;
}

section.may-layout--3 {
    display: flex;
    justify-content: center;
}

#music #album-list {
    grid-area: list;
    display: flex;
    height: min-content;
    justify-content: flex-start;
}

#music #art {
    grid-area: art;
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#music #album-list .may-imgContainer > .may-spacer {
    padding-top: 100%;
}

#music #album-list .may-imgContainer {
    width: max(4em, min(7vw, 7.5em));
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 1em;
    min-width: 4em;
    font-size: 1.2em;
    cursor: pointer;
}

#music #art .may-imgContainer {
    border-radius: 1em;
    max-height: 100%;
    max-width: 100%;
    display: grid;
    align-content: center;
    justify-content: center;
}

#music #title h1 {
    display: inline;
    margin: 0;
    margin-right: 0.25em;
}

#music #title button {
    font-size: max(1em, min(0.9vw, 1.3em));
    transform: translateY(-25%);
    display: none;
}

#music #title {
    grid-area: title;
}

#music #tracklist {
    grid-area: tracklist;
    display: flex;
    justify-content: flex-start;
}

.may-tracklist {
    display: grid;
    grid-template-columns: repeat(5, min-content);
    justify-content: start;
    counter-reset: tracklist;
    gap: 1em 2em;
    height: min-content;
}

.may-tracklist .may-track {
    display: contents;
}

.may-tracklist .may-track > .may-track--count::before {
    counter-increment: tracklist;
    content: counter(tracklist, decimal-leading-zero);
}

.may-tracklist .may-track > .may-track--name {
    white-space: nowrap;
}

.may-tracklist .may-track > .may-track--platforms {
    white-space: nowrap;
}

.may-tracklist .may-track > .may-track--platforms > button > img {
    height: 1.5em;
}

#music #tracklist > .may-tracklist {
    padding-top: 2em;
    width: min-content;
}

.may-tracklist .may-track--duration {
    text-align: center;
}

.may-tracklist .may-track--platforms {
    text-align: center;
}

#music #tracklist > .may-trackInfo {
    width: 100%;
}

#music #tracklist > .may-trackInfo > h2 {
    text-align: center;
}

#music #tracklist > * {
    display: none;
}

#music #tracklist > .may-active {
    display: grid;
}

a {
    font-size: 1.2em;
    color: inherit;
    text-decoration: none;
}

#music #art img {
    max-width: 100%;
    border-radius: 1em;
    max-height: 100%;
    justify-self: end;
}

@media (max-width:1499px) {
    .may-layout--3 > .may-content {
        width: 90%;
        grid-template-columns: 2fr 3fr;
    }

    #music #tracklist .may-tracklist {
        gap: 1em;
        justify-content: space-between;
        width: 100%;
    }
}

@media (max-width:1149px) {
    .may-layout--3 > .may-content {
        grid-template-areas: "title title" "art art" "tracklist tracklist" "list list";
        grid-template-rows: min-content 8em 1fr min-content;
        gap: 1em;
    }

    #music #art .may-imgContainer {
        display: contents;
    }

    #music #art img {
        object-fit: cover;
        width: 100%;
    }
}

@media (max-width:649px) {
    .may-layout--3 > .may-content {
        width: 100%;
    }

    #music .may-tracklist {
        grid-template-columns: repeat(4, min-content);
    }

    #music .may-tracklist .may-track--duration {
        display: none;
    }
}

#music #album-list > .may-container {
    display: flex;
    gap: 4em;
    margin-left: auto;
    margin-right: auto;
}

.may-scrollable--fading--left-and-right {
    mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 5%, rgb(0, 0, 0) 95%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 5%, rgb(0, 0, 0) 95%, transparent);
}

@media (max-width:1149px) {
    #music #album-list > .may-container {
        gap: 3em;
    }
}

@media (max-width:649px) {
    #music #album-list > .may-container {
        gap: 2em;
    }
}

span > span {
    font-size: 1em;
}

.may-tracklist > .may-container {
    display: contents;
}

.may-setlist > .may-container {
    display: contents;
}

.may-mainMenu--desktop > .may-menuContainer li > .may-underline {
    left: 0;
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 3px;
}

header > .may-mainMenu--desktop > .may-menuContainer > .may-container {
    display: contents;
}

header > .may-mainMenu--desktop > a {
    font-size: 1em;
    z-index: 1001;
}

button > span {
    font-size: 1em;
}

.may-socialNetworks a {
    font-size: 1em;
    display: inline-block;
    margin-right: 1em;
}

section.may-layout--4 {
    height: calc(100vh - 6em);
}

#sculpture > section > .may-content {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100%;
    grid-template-areas: "text image";
    display: grid;
    width: 80%;
    justify-self: center;
    gap: 4em;
    padding-top: 3em;
}

#sculpture #images > .may-element {
    height: 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}

#sculpture #texts {
    grid-area: text;
    padding-top: 8vh;
    position: relative;
}

#sculpture #images {
    grid-area: image;
    position: relative;
}

#sculpture #texts p {
    text-align: justify;
}

#sculpture #texts h2 {
    text-align: center;
}

#sculpture #texts .may-element {
    position: absolute;
    filter: opacity(0%);
    transition: filter 0.7s ease-in-out;
}

#sculpture #texts .may-element.may-active {
    filter: opacity(100%);
}

#sculpture #images > .may-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(50vw);
    filter: opacity(0%);
    transition: filter 0.7s ease-in-out, transform 0.7s ease-in-out;
}

#sculpture #images > .may-element.may-active {
    filter: opacity(100%);
    transform: translateX(0vw);
}

@media (max-width:1499px) {
    #sculpture #texts {
        padding-top: 0;
    }

    #sculpture > section > .may-content {
        gap: 0;
    }
}

@media (max-width:1149px) {
    #sculpture > section > .may-content {
        grid-template-areas: "text" "image";
        grid-template-columns: 1fr;
        grid-template-rows: min-content 1fr;
    }

    #sculpture #texts {
        display: contents;
    }

    #sculpture #images {
        display: contents;
    }

    #sculpture #images > .may-element {
        position: relative;
        grid-area: image;
    }

    #sculpture #texts > .may-element {
        grid-area: text;
        position: relative;
    }
}

@media (max-width:799px) {
    #sculpture > section > .may-content {
        padding-top: 1em;
    }
}

@media (max-width:649px) {
    #sculpture > section > .may-content {
        width: 90%;
        padding-top: 0;
    }
}

#shop .may-layout--2 > .may-content > .may-element {
    justify-self: center;
}

#shop .may-layout--2 > .may-content {
    display: grid;
    padding-top: 3em;
}

#shop .may-productsList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4em;
}

.may-productsList > .may-product > .may-imgContainer > .may-spacer {
    padding-top: 100%;
}

.may-productsList > .may-product > .may-imgContainer {
    margin-bottom: 0.5em;
    position: relative;
}

.may-productsList > .may-product > span {
    display: block;
    text-align: center;
}

.may-productsList > .may-product > .may-product--name {
    font-size: 1.3em;
}

.may-productsList > .may-product > .may-imgContainer > img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#shop-single-product > .may-layout--2 > .may-content > .may-element {
    justify-self: center;
}

#shop-single-product .may-content {
    display: grid;
    padding-top: 3em;
}

#shop-single-product .may-content .may-product--single {
    display: grid;
    grid-template-columns: calc(40% - 2em) calc(60% - 2em);
    grid-template-areas: "gallery infos";
    gap: 4em;
}

#shop-single-product .may-product--single .may-imgContainer {
    position: relative;
}

h2 > span {
    font-size: 1em;
}

#shop-single-product .may-product--single .may-product--price .may-product--price--sale {
    text-decoration: line-through;
    color: var(--grey);
    margin-right: 0.5em;
    font-size: 0.7em;
}

#shop-single-product .may-product--single .may-product--name > h2 {
    margin-top: 0;
    margin-bottom: 0;
}

#shop-single-product .may-product--single .may-product--rating > span > img {
    height: 1em;
    display: inline-block;
}

#shop-single-product .may-product--single .may-imageGallery .may-imgContainer > img {
    width: 100%;
}

#shop-single-product .may-product--single .may-imageGallery {
    justify-self: end;
    width: 100%;
}

span > bdi > span {
    font-size: 1em;
}

#shop-single-product .may-content > div {
    display: none;
}

#shop-single-product .may-product--single .may-product--price > h2 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.woocommerce-product-gallery__image:hover > :nth-last-child(2) {
    opacity: 0;
}

.woocommerce-product-gallery__image > .zoomImg {
    background-color: transparent!important;
}

.woocommerce div.product div.images .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, 22.75%);
    gap: 1.1em 3%;
    padding-top: 1.1em;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    width: 100%;
}

#shop-single-product .may-product--single .may-pContainer > p {
    text-align: justify;
}

select {
    all: unset;
    font-size: 1.2em;
    border-style: solid;
    border-width: 1px;
    border-color: var(--gold);
    border-radius: 4em;
    padding: 0.6em 2em;
}

select * {
    background-color: #1f1f1f;
}

#shop-single-product .may-product--single .may-product--variations {
    grid-template-columns: repeat(auto-fit, minmax(100px, min-content));
    display: grid;
    gap: 4em;
}

#shop-single-product .may-product--single .may-product--cart button {
    font-size: 1.2em;
    border-style: solid;
    border-width: 1px;
    border-color: var(--gold);
    border-radius: 4em;
    padding: 0.6em 2em;
}

#shop-single-product .may-product--single .may-product--cart input {
    font-size: 1.2em;
    border-style: solid;
    border-width: 1px;
    border-color: var(--gold);
    border-radius: 4em;
    padding: 0.6em;
    width: 2.5em;
    padding-left: 1em;
    padding-right: 1em;
    margin-right: 1em;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

#shop-single-product .may-product--single .may-product--cart {
    margin-top: 1.5em;
}

#shop-single-product .may-product--single .may-wrapper {
    display: inline-block;
}

header > .may-mainMenu--desktop ul > li.may-button {
    display: none;
}

header > .may-mainMenu--mobile {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-color: rgba(29, 29, 29, 0.5);
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
}

header > .may-mainMenu--mobile > .may-menuContainer {
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-top: 6em;
}

header > .may-mainMenu--mobile ul li {
    font-size: 1.2em;
    text-transform: uppercase;
    position: relative;
    width: fit-content;
    margin-top: 0.5em;
}

header > .may-mainMenu--mobile li .may-underline {
    left: 0;
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 3px;
}

@media (max-width:799px) {
    header > .may-mainMenu--mobile > .may-menuContainer {
        margin-left: 5%;
        margin-right: 5%;
    }
}

@media (max-width:459px) {
    header > .may-mainMenu--mobile > .may-menuContainer {
        margin-left: 6%;
        margin-right: 6%;
    }
}

.may-mainMenu--desktop > .may-menuContainer .may-menuElement--active > .may-underline {
    background-color: var(--gold);
}

.may-mainMenu--desktop > .may-menuContainer li:hover > .may-underline {
    background-color: var(--gold);
}

header .may-mainMenu--mobile .may-menuElement--active > .may-underline {
    background-color: var(--gold);
}

header > .may-mainMenu--mobile.may-active {
    display: inherit;
}

@media (max-width:649px) {
    .may-layout--3 > .may-content {
        grid-template-rows: min-content 1fr min-content;
        grid-template-areas: "title title" "tracklist tracklist" "list list";
    }

    #music #art {
        display: none;
    }
}

@media (max-width:459px) {
    #music #tracklist [class*='may-track--count'] {
        display: none;
    }

    #music #tracklist > .may-tracklist {
        grid-template-columns: repeat(3, min-content);
        padding-top: 1em;
    }
}

@media (max-width:649px) {
    #tour-dates #dates .may-content {
        padding-top: 1em;
    }
}

@media (max-width:459px) {
    .may-tracklist .may-track > .may-track--name {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

header > .may-mainMenu--mobile > .may-clickHandler {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width:649px) {
    #peter-and-friends section {
        height: calc(100% - 5em);
    }

    #gallery section {
        height: calc(100% - 5em);
    }

    #social-cause section {
        height: calc(100% - 5em);
    }

    #tour-dates section {
        height: calc(100% - 5em);
    }

    header > .may-mainMenu--desktop {
        height: 5em;
    }

    header > .may-mainMenu--desktop .may-logoContainer > img {
        height: 3em;
    }

    main section {
    }
}

.may-card {
    display: flex;
    flex-direction: column;
}

#press #press-clipping.may-element {
    justify-self: center;
    display: grid;
    margin-top: 6em;
    gap: 4em;
    grid-template-columns: 1fr 1fr;
}

#press .may-content {
    display: grid;
}

#press #press-clipping .may-card .may-button {
    width: fit-content;
}

#press #press-download {
    justify-self: center;
    text-align: center;
    padding-bottom: 3em;
    padding-top: 3em;
    margin-top: 6em;
}

#press #press-download > h2 {
    text-transform: none;
    font-weight: 400;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

#press #press-download > .may-wrapper {
    display: flex;
    justify-content: center;
    gap: 4em;
}

@media (max-width:1499px) {
    #press #press-clipping.may-element {
        grid-template-columns: 1fr;
    }
}

@media (max-width:649px) {
    #press #press-download > .may-wrapper {
        gap: 2em;
    }
}

@media (max-width:459px) {
    #press #press-download > .may-wrapper {
        flex-direction: column;
        gap: 1em;
    }
}

@media (max-width:1149px) {
    #press #press-clipping.may-element {
        margin-top: 4em;
    }
}

@media (max-width:799px) {
    #press #press-clipping.may-element {
        margin-top: 2em;
    }
}

.may-tracklist .may-track > a > img {
    height: 1em;
}

.may-tracklist .may-track .may-JS--lyricsButton {
    cursor: pointer;
}

#press-clipping .may-card > a {
    width: fit-content;
}

#friends .may-card > .may-imgContainer {
    margin-top: auto;
}

@media (max-width:1149px) {
    #homepage .may-bg > img {
        transform: translateX(25%);
    }

    #homepage #tour-dates-widget {
        display: none;
    }
}

@media (max-width:459px) {
    #homepage .may-bg > img {
        transform: translateX(44%);
    }
}

#tour-dates #dates #upcoming #JS-tourDateTable--upcoming > .may-message {
    grid-column-start: 1;
    grid-column-end: 5;
    display: var(--noUpcomingDatesMsgDisplay);
}

#tour-dates #dates #JS-tourDateTable--upcoming .may-message > h2 {
    text-transform: none;
    font-weight: 400;
}

#tour-dates #dates #upcoming #JS-tourDateTable--upcoming .may-tableLabel {
    visibility: var(--upcomingDatesTableLabelsDisplay);
}

#people section .may-content {
    display: grid;
    padding-top: 4em;
}

section .may-content > h2 {
    justify-self: center;
}

#people section .may-content > h2 {
    font-size: max(3em, min(3vw, 4.2em));
    margin-bottom: 0.25em;
}

#people #friends.may-element {
    margin-bottom: 6em;
}

#about_me .may-content > .may-element {
    justify-self: center;
}

#about_me .may-content {
    display: grid;
    gap: 4em;
}

.may-element.may-textandimagearea {
}

.may-textandimagearea > h2 {
}

.may-textandimagearea > img {
    float: right;
    width: 45%;
    margin-left: 2em;
    margin-bottom: 2em;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
    height: auto;
}

.may-textandimagearea > .may-pContainer {
    text-align: justify;
}

.may-textandimagearea > .may-imageGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
    width: 100%;
}

.may-textandimagearea > .may-imageGrid img {
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
    height: auto;
    width: 100%;
}

.may-textandimagearea:nth-child(even) > img {
    float: left;
    margin-left: 0;
    margin-right: 2em;
}

@media (max-width:459px) {
    div.may-textandimagearea:nth-child(even) > h2 {
        text-align: left;
    }

    div.may-textandimagearea > img {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-top: 1em;
        margin-bottom: 1em;
        aspect-ratio: unset;
        height: 5em;
    }

    .may-textandimagearea > .may-imageGrid > img {
        aspect-ratio: unset;
        height: 16em;
    }
}

.may-textandimagearea img {
    border-radius: 1em;
}

#quotes-widget .may-pContainer {
    font-style: italic;
}

#quotes-widget .may-icon {
    height: 2.5em;
}

#quotes-widget > .may-container {
    width: 80%;
}

#homepage #quotes-widget {
    display: flex;
    align-items: center;
    justify-content: center;
}

#quotes-widget h3 {
    margin: 0;
}

#quotes-widget div.may-pContainer {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

#quotes-widget .may-pContainer > p:last-of-type {
    margin-bottom: 0;
}

@media (max-width:1149px) {
    #homepage #quotes-widget {
        display: none;
    }
}

#press #contact-infos.may-element {
    justify-self: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    gap: 4em;
    padding: 2em;
}

#press #contact-infos > .may-decorative {
    position: absolute;
    width: 1px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(242, 242, 242, 0.6) 25%, rgba(242, 242, 242, 0.6) 75%, rgba(0, 0, 0, 0) 100%);
}

#press #contact-infos h4 {
    font-weight: normal;
}

#press #contact-infos h2 {
    text-transform: none;
    font-weight: 600;
}

@media (max-width:1149px) {
    #press #contact-infos.may-element {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #press #contact-infos > .may-decorative {
        display: none;
    }
}

.may-textandimagearea > .may-imageGrid .may-about {
    text-align: center;
    margin: 1em 0;
}

.may-textandimagearea > .may-imgContainer {
    width: 45%;
    float: right;
    display: block;
}

@media (max-width:1499px) {
    #people .may-content .may-element {
        width: 85%;
    }
}

@media (max-width:1149px) {
    #friends.may-element {
        grid-template-columns: 1fr;
    }
}

@media (max-width:649px) {
    #people .may-content .may-element {
        width: 100%;
    }
}

section > .may-content > .may-pContainer {
    justify-self: center;
    text-align: justify;
}

#people .may-content .may-element.may-pContainer {
    margin-bottom: 1em;
}

#tour-dates #details #details--backButton {
    border-style: none;
    border-bottom-style: solid;
    border-radius: 0;
    padding: 0.75em 1.25em;
    margin-bottom: 1em;
}