/*--------------------------------------------------------------
TABLE OF CONTENTS:
----------------------------------------------------------------

1.0 Single
    1.1 single-concert

2.0 Archive
3.0 Loop
4.0 Objects
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Single
--------------------------------------------------------------*/
/* 1.1 Single-Concert
----------------------*/

.single-concert .stripeHeaderContent .content {
    max-width: 800px;
}

/*.infoconcerto*/
.single-concert .infoConcerto .leftSide{
    width: 39%;
    margin-right: 2%;
    box-sizing: border-box;
}
.single-concert .infoConcerto .sectionLabel {
    margin-bottom: 4rem;
}
.single-concert .infoConcerto .enti {
    margin-bottom: 6rem;
}
.single-concert .infoConcerto .enteWrap {
    margin-bottom: 4rem;
}
.single-concert .enteWrap .ente {
    margin-bottom: 2rem;
}
.single-concert .enteWrap .persona {
    margin-bottom: 1rem;
}
.single-concert .persona .ruolo, .single-concert .brano .autore, .single-concert .durata .label{
    width: 45%;
    margin-right: 3%;
    max-width: 200px;
}
.single-concert .persona .nome, .single-concert .brano .titolo, .single-concert .durata .content{
    width: 52%;
}
.single-concert .brani {
    margin-bottom: 4rem;
}
.single-concert .brani .brano {
    margin-bottom: 0.7rem;
}


.single-concert .infoConcerto .rightSide{
    width: 59%;
}
.single-concert .infoConcerto .mediaMenu {
}
.single-concert .infoConcerto .mediaMenu-item {
    margin-right: 3rem;
    font-size: 2.1rem;
    border-bottom: 2px solid;
    padding-bottom: 0.3rem;
    cursor: pointer;
}
.single-concert .mediaItemContent .concertSlider {
    margin-top: -2.2rem;
    overflow: visible;
    margin-left: 0;
}
.single-concert .mediaItem .mediaElement{
    margin-right: 30px;
}
.single-concert .mediaItem.descrizione, .single-concert .mediaItem.audio{
    margin-top: 4rem;
}
.single-concert .mediaItem.video .mediaElement{
    width: auto;
}
.single-concert .mediaItem.descrizione .container {
    padding: 4rem;
    min-height: 5px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
}
.single-concert .mediaItem.descrizione .titolo {
    padding-bottom: 0.3rem;
    margin-bottom: 3rem;
    display: inline-block;
}
.single-concert .infoConcerto .preview {
    height: 380px;
    width: auto;
}
.single-concert .mediaItem.audio .audioWrap {
    margin-bottom: 4rem;
}
.single-concert .mediaItem.audio .audioWrap .titolo{
    margin-bottom: 2rem;
}

/*.sponsors*/
/*vedi style footer sptripe sponsor*/

/*altreRepliche*/
/* Widget calendario rimosso dalla sezione date/orari: il rightSide (slider repliche) ora occupa tutta la riga, senza più leftSide come fratello */
.single-concert .altreRpliche .boxUpnext.noLeftSide .rightSide {
    width: 100%;
}
/* .swiper-container eredita margin-left/right:auto da css/ext/swiper.min.css (libreria vendor):
senza più il leftSide accanto, quel margin:auto ricentra il blocco invece di lasciarlo appoggiato a sinistra.
Override mirato solo a questa istanza, non tocchiamo il comportamento di default di Swiper altrove. */
.single-concert .altreRpliche .boxUpnext.noLeftSide .swiper-container {
    margin-left: 0;
    margin-right: 0;
}

/*.prezzi*/

.single-concert .prezzi .content {
/*    background-color: #F2F2F2;
    padding-top: 4rem;
    padding-bottom: 6rem;*/
}

/* 1.2 Single-Course
----------------------*/
.corsoBox .bottoni .buttonsContainer {
    display: block;
}
.corsoBox .bottoni .buttonsContainer .button {
    margin-bottom: 1rem;
}
.single-course .boxesSection .boxMenu {
   width: 27rem;
   opacity: 1;
   transition: 0.5s ease;
   margin-bottom: 8rem;
}
.single-course .boxesSection .boxMenu.invisible {
   opacity: 0;
}
.single-course .boxesSection .boxMenu.fixed {
    position: fixed;
    top: 1rem;
    width: 27rem;
}
.single-course .boxMenuItem {
    margin-bottom: 1.5rem;
}
.single-course .boxesSection .rightSide {
    width:75%;
    left: 25%;
}
.single-course .boxCorso {
    padding: 5rem;
}
.single-course .boxCorso:first-of-type {
    padding-top: 0;
}
.single-course .boxCorso.bgGrigio:first-of-type {
    padding-top: 5rem;
}

/* 1.4 Single-News
----------------------*/
.single-news .leftSide {
    width: 60%;
}
.single-news .rightSide {
    width: 25%;
}
.single-news .materiali .buttonsContainer {
    display: block;
}
.single-news .materiali .buttonsContainer .button {
    margin-bottom: 0.5rem;
}
.single-news .materiali .buttonsContainer .button.regular {
    display: block;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* 1.4 Single-Person(teacherLoop, artistLoop)
----------------------*/
.personContent .boxHighlight .content {
    width: 80%;
}
/*--------------------------------------------------------------
2.0 Archive
--------------------------------------------------------------*/
/*CONCERT*/
.archiveConcert {
    margin-top: 5rem;
}
.archiveConcert .leftSide {
    width: 70%;
}
.archiveConcertNotice {
    border-left: 0.4rem solid #00588f;
    background: rgba(0,88,143,0.06);
    padding: 1.5rem 2rem;
    margin-bottom: 3rem;
    font-size: 1.4rem;
    line-height: 1.6;
}
.archiveConcertNotice p:last-child {
    margin-bottom: 0;
}
.archiveConcert .rightSide {
    min-width: 300px;
    margin-top: 5rem;
}
.archiveConcert .mainFilterWrap .material-icons{
    font-size: 3rem;
}
.archiveConcert .mainFilterWrap label{
    top: 0.3rem;
}
.archiveConcert .mainFilterWrap .filterItemWrap {
    margin: 0
}
.filterItemWrap .searchAction {
    position: absolute;
    margin-right: 0;
    right: 1rem;
    cursor: pointer;
    top: 0.7rem;
    background-color: white;
}
.archiveConcert .mainFilterWrap  {
    margin-bottom: 1rem;
    min-height: 7rem;
    margin-top: -2rem;
}
.archiveConcert .mainFilterWrap .label {
    margin-right: 1rem;
}
.archiveConcert .pseudoInput {
    cursor: pointer;
    margin-right: 1rem;
}
.archiveConcert .pseudoInput.quando {
    color: var(--color-main);
}
.archiveConcert .pseudoInput.quando.active {
    text-decoration: underline;
}
.archiveConcert .rightSide .filterItemWrap {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}
.archiveConcert .filterGroupTitle {
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    margin-top: 4rem;
}
.archiveConcert .rightSide .filterGroupTitle i{
    font-size: 2.5rem;
}
.archiveConcert .rightSide .filterWrap .iconWrap {
    width: 24px;
    height: 24px;
    margin-right: 1rem;
}
.archiveConcert .rightSide .filterWrap .iconWrap svg {
    width: 85%;
    height: auto;
}
.archiveConcert .rightSide .filterWrap .label, .qthemeDatePickerWrap .label{
    width: 70px;
    color: black;
}
.archiveConcert .rightSide .qthemeSelectWrap {
    flex-grow: 1;
}


/*--------------------------------------------------------------
3.0 Loop
--------------------------------------------------------------*/
/* 3.1 Replica
----------------------*/
/*3.1.1 Replica Box*/
.boxReplicaLoop, .stessaReplicaLoop {
    width: 290px;
    
    
    margin-right: 30px;
    margin-bottom: 30px;
}
.boxReplicaLoop .upside, .boxReplicaLoop .downside {
    margin: 0 5px;
    border: 1px solid var(--color-off);
}
.boxReplicaLoop .upside {
    padding-top: 1.5rem;
}
.boxReplicaLoop .downside {
    padding-bottom: 1.5rem;
}
.boxReplicaLoop .replicaHeader {
    align-items: flex-start;
    gap: 2rem;
}
.boxReplicaLoop .dataWrap {
    padding-right: 0;
}
.boxReplicaLoop .dataWrap .giornoMese {
    gap: 0.5rem;
    align-items: flex-end;
    margin-top: 0.3rem;
}
.boxReplicaLoop .dataWrap .orario {
    margin-top: 0.4rem;
}
/*"ORE" in maiuscolo risulta otticamente più grande delle cifre dell'orario anche a parità
di font-size (fs12 su entrambi): riducendo leggermente solo l'etichetta si uniforma la resa visiva*/
.orario .oreLabel {
    font-size: 0.85em;
}
.boxReplicaLoop .headerInfo {
    width: 100%;
}
.boxReplicaLoop .alert {
    font-size: 1.2rem;
    line-height: 1.2rem;
    position: relative;
    left: 5px;
    padding: 0.6rem 1rem;
    box-sizing: border-box;
    top: 8px;
/*    width: 100%;*/
    margin: 1rem 0;
}
.boxReplicaLoop .cover{
    width: 100%;
    height: 190px;
}
.replicaLoop .preferito {
/*    display: none;*/
}
.boxReplicaLoop .headerInfo .addToCalendar {
/*    margin-right: 1rem;*/
}
.boxReplicaLoop .headerInfo .icons {
    gap: 1rem;
}
.boxReplicaLoop .addToCalendar .icon, .elencoReplicaLoop .addToCalendar .icon {
    border: none;
}
.boxReplicaLoop .headerInfo .addToCalendar .buttonText {
    font-size: 1.3rem;
}

.boxReplicaLoop .titolo {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    min-height: 50px;
}
.boxReplicaLoop .infoWrap {
    margin-top: 2rem;
    gap: 1rem;
    flex-wrap: nowrap;
}
.boxReplicaLoop .buttonsContainer {
    margin-top: 3.5rem;
}
.boxReplicaLoop .smallButton.raised {
    padding-right: 1.4rem;
    padding-left: 1.4rem;
}
.boxReplicaLoop .smallButton.regular {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.boxReplicaLoop .zoomWrap{
    position: relative;
    overflow: hidden;
    width: 100%
}
.boxReplicaLoop .zoom {
    transition: 0.5s ease;
}
.boxReplicaLoop .zoom:hover {
    transform: scale(1.2);
}
/*stessaReplicaLoop*/
.stessaReplicaLoop {
    margin-bottom: 0;
}
.stessaReplicaLoop .infoWrap > * {
    margin-bottom: 1rem;
}
/*3.1.2 Replica Elenco*/
.elencoReplicaLoop {
    display: grid;
    grid-template-columns: 200px 2fr minmax(0, 200px);
    grid-template-areas:
        "fotoAzioni titolo dataWrap"
        "fotoAzioni titolo buttons";
    align-items: center;
    column-gap: 2rem;
    row-gap: 1.5rem;
    width: 100%;
    padding: 20px 20px 20px 20px;
    margin-bottom: 30px;
    box-sizing: border-box;
}
.elencoReplicaLoop > *{
    box-sizing: border-box;
}
.elencoReplicaLoop .contentWrap {
    padding-left: 10px;
    padding-right: 10px;
}
.elencoReplicaLoop .alert {
    position: absolute;
    padding: 3px 10px;
    box-sizing: border-box;
    top: -14px;
    min-width: 240px;
    font-size: 10px;
}

.elencoReplicaLoop .fotoAzioni {
    grid-area: fotoAzioni;
    gap: 0.5rem;
}
.elencoReplicaLoop .foto {
    width: 100%;
    aspect-ratio: 200 / 140;
}
.elencoReplicaLoop .foto a {
    display: block;
    width: 100%;
    height: 100%;
}
.elencoReplicaLoop .foto .cover {
    width: 100%;
    height: 100%;
}
.elencoReplicaLoop .titoloWrap {
    grid-area: titolo;
    display: flex;
    align-items: center;
    gap: 1rem;
}
/* L'icona education/formazione è un div senza classe propria (solo "title"), secondo figlio di .titoloWrap */
.elencoReplicaLoop .titoloWrap > div:not(.titolo) {
    margin-top: 0.3rem;
}
.elencoReplicaLoop .titolo {
    font-size: 21px;
    line-height: 1.3;
}
.elencoReplicaLoop .dataWrap {
    grid-area: dataWrap;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.elencoReplicaLoop .dataWrapTop {
    gap: 1rem;
    flex-wrap: wrap;
}
/*sala leggermente più piccola: prima sembrava l'informazione principale del blocco data.
Turno sotto, a capo, stessa dimensione, con un piccolo distacco*/
.elencoReplicaLoop .luogo {
    font-size: 1.3rem;
}
.elencoReplicaLoop .turno {
    font-size: 1.3rem;
    margin-top: 0.3rem;
}
.elencoReplicaLoop .giornoMese {
    gap: 0.5rem;
    align-items: flex-end;
}
.elencoReplicaLoop .azioni {
    gap: 1rem;
}
.elencoReplicaLoop .buttonsContainer {
    grid-area: buttons;
}

.elencoReplicaLoop .button.raised {
    padding: 5px 10px;
}
.elencoReplicaLoop .buttonText {
    font-size: 13px;
    text-align: center;
}


/* 3.2 courseLoop
----------------------*/

.courseLoop {
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-bottom: 2rem;
}
.courseLoop > *, .courseLoop .rightSide > *{
    box-sizing: border-box;
}
.courseLoop .titolo {
    width: 35%;
}
.courseLoop .rightSide {
    width: 65%;
}
.courseLoop .rightSide > *{
    flex-grow: 1;
    flex-basis: 0;
}
.courseLoop .button {
    font-weight: 400;
}
.courseLoop.tableHeader {
    padding-bottom: 1.5rem;
    margin-bottom: 3rem;
}

/* 3.3 personLoop (teacherLoop, artistLoop)
----------------------*/
.personLoop {
    margin-right: 4rem;
    margin-bottom: 1rem;
}
.personLoop.conFoto {
    margin-bottom: 2rem;
}
.personLoop .cover {
    width: 18rem;
    height: 18rem;
    margin-bottom: 1.5rem;
}
.artistStreamWrapper {
    border-bottom: 1px solid var(--color-off);
}
.artistLoop.noFoto {
    margin-right: 1rem;
}
.artistLoop.noFoto:not(:last-child) .cognome:after {
    content: ',';
}
.primaParteWrap, .altriArtistiWrap {
    margin-top: 2rem;
}
/* 3.4 newsLoop
----------------------*/
.newsLoop {
    width: 45%;
    margin-left: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 8rem;
}
.newsLoop .leftSide {
    width: 40%;
}
.newsLoop .cover {
    width: 100%;
    bottom: 1.5rem;
    right: 1.5rem;
    height: 0;
    padding-top: 66%;
    display: block;
}
.newsLoop .contenuto {
    width: 60%;
    padding: 2rem 5rem 2rem 1.5rem;
}

.newsHighlight.newsLoop {
    color: white;
    width: 100%;
    margin-left: 0;
    min-height: 30rem;
    margin-bottom: 10rem;
}
.newsHighlight.newsLoop .cover {
    bottom: 0;
    right: 0;
    left: 7rem;
    top: 2rem;
    padding-top: 0;
    height: 32rem;
    position: absolute;
    width: 85%;
}
.newsHighlight.newsLoop .contenuto {
    padding: 2rem 5rem 2rem 13rem;
    width: 40%;
}
.newsHighlight.newsLoop .titolo, .newsHighlight.newsLoop .button {
    color: white;
}
/* 3.5 albumLoop
----------------------*/
.albumLoop {
    width: 30%;
    margin-right: 3%;
    margin-bottom: 8rem;
}
.qslider .albumLoop {
    width: 30rem;
    margin-right: 3rem;
}
.albumLoop .copertina {
    max-width: 230px;
    height: 230px;
}
.albumLoop .descrizione {
    margin-bottom: 3rem;
}

/* 3.5 mediaLoop
----------------------*/
.mediaLoop {
    min-width: 30%;
    width: 405px;
    max-width: 100%;
    margin-right: 3rem;
}
.mediaLoop .imgWrap {
    height: 30rem;
    margin-bottom: 1.5rem;
}
.mediaLoop .imgWrap img {
    height: 100%;
}
.mediaLoop .fs21 {
    padding-top: 1.5rem;
    margin-bottom: 1rem;
}
.mediaLoop .descrizione {
    color: var(--color-font);
}
.mediaLoop .ctaWrap {
    color: white;
    z-index: 9;
    font-size: 1.8rem;
    transition: color 0.3s ease;
}
.mediaLoop .ctaWrap i {
    font-weight: 800;
    margin-right: 1rem;
    font-size: 2rem;
}
.mediaLoopAction:hover .mediaLoop .ctaWrap,
.mediaLoopAction:hover .mediaLoop .ctaWrap i {
    color: var(--color-off);
}
.mediaLoop .typeLabel {
    margin-left: 1rem;
    text-transform: capitalize;
}
.mediaLoop .buttonsContainer {
    margin-top: 2rem;
}
.audioHiddenContent {
    width: 90%;
}
.lbMediaWrap .audioWrap{
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.7);
    padding: 2rem;
}

.lbMediaWrap .mejs-container, .lbMediaWrap .mejs-container .mejs-controls, .lbMediaWrap .mejs-embed, .lbMediaWrap .mejs-embed body {
    background: none;
}
.lbMediaWrap .infoWrap {
    margin: 4rem 2rem 0 2rem;
}
.fancybox-close-small svg {
    color: white;
}
.lbMediaWrap .scGalleryItem .content{
    padding: 2rem 10rem;
}
.lbMediaWrap .scGalleryItem .copertina {
    object-fit: contain;
    width: 100%;
}
.mediaHiddenContent{
    overflow: hidden;
}
.sc-mediaGallery .qsliderArrows {
    width: 95%;
}
.sc-mediaGallery .qsliderArrow{
    color: white;
    background-color: 	rgba(255,255,255, 0.5);
    border-radius: 100%;
}
.sc-mediaGallery .qsliderArrow.swiper-button-disabled {
    color: var(--color-off);
}

#archiveReplace .mediaLoopAction {
    width: 30%;
    margin-right: 3.3%;
    margin-bottom: 5rem;
}
#archiveReplace .mediaLoopAction .mediaLoop{
    width: 100%;
    margin-right: 0;
}

.woocommerce-account .mediaLoopAction {
    width: 47%;
    margin-right: 0!important;
    margin-bottom: 5rem;
}
.woocommerce-account .mediaLoopAction .mediaLoop {
    width: 100%;
}
.sc-mediaGallery .copertina, .mediaHiddenContent .copertina {
    max-width: 100%;
    height: auto;
    width: auto;
    min-height: 400px;
}
.sc-mediaGallery .copertina.copertinaVideo {
    width: 700px;
}


/*comunicati stampa*/

.pressReleaseLoop .data {
    min-width: 30%;
    margin-left: 1rem;
}
.pressReleaseLoop .buttonsContainer {
    margin-top: 2rem;
}

    /* 3.5 quadratoProductLoop
    ----------------------*/
.quadratoProductLoop {
    width: 30%;
    margin-right: 3%;
    margin-bottom: 8rem;
}
.qslider .quadratoProductLoop {
    width: 230px;
    margin-right: 4rem;
}
.quadratoProductLoop .imgWrap {
    width: 230px;
    height: 230px;
}
.quadratoProductLoop .descrizione {
    margin-bottom: 3rem;
}

.rettangolareProductLoop {
    width: 420px;
    margin-right: 4rem;
}
.rettangolareProductLoop .imgWrap {
    width: 180px;
    height: 230px;
}
.rettangolareProductLoop .content {
    width: 220px;
}

/* 3.7 searchLoop
----------------------*/
.searchLoop {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
/*il titolo (ora cliccabile) risultava sottolineato pur non avendo trovato in nessun file CSS
una regola che lo giustifichi esplicitamente: override mirato per neutralizzarlo, stesso
rimedio già usato altrove nel tema per un problema simile (vedi .entryContent a.white)*/
.searchLoop .title a {
    text-decoration: none;
}
.searchLoop .description {
    max-width: 650px;
}


/*--------------------------------------------------------------
4.0 Objects
--------------------------------------------------------------*/
/* 4.1 Calendar
----------------------*/
.qthemeCalendar .monthAndYear {
    color: black;
    font-size: 1.6rem;
}
.qthemeDatePicker td:not(.unselectable), .selectSingleDate td.active, .upcomingCalendar td.active  {
    cursor: pointer;
}
.upcomingCalendar td.unselectable {
    cursor: default;
}
.selectSingleDate {
    margin: 4.5rem 0;
}
.selectSingleDate td.today {
    font-weight: bold;
    color: black;
}
.selectSingleDate td.active, .upcomingCalendar td.active {
    text-decoration: underline;
}
.selectSingleDate td.selected, .qthemeCalendar td.active:hover {
    color: white;
    font-weight: bold;
    text-decoration: none!important;
    border-radius: 2rem;
}

.qthemeDatePicker .selectedDate {
    cursor: pointer;
    flex-grow: 1;
    position: relative;
}
/* 4.2 MailUp Form
----------------------*/ 
.mailUpForm {
    margin-top: 3rem;
}
.mailUpForm button.button.raised{
    margin-left: 5rem;
}
.mailUpForm .top input{
    margin-bottom: 2rem;
}
.mailUpForm #campo2{
    margin-left: 4rem;
}
#popupIniziale {
    max-width: 800px;
    width: 90%;
}
/*FORZATURE DI LEANDRO*/
/*.entryContent input {
    width: auto!important;
}*/

#ammissioniForm input[type=radio] {
    display: inline-block;
    opacity: 1;
}

/* 4.2 Lightbox Lead
----------------------*/
.leadLightbox {
    max-width: 50%;
}
.leadLightbox .button {
    border: 0.3rem solid var(--color-highlight)!important;
}
.leadLightbox input[type=checkbox] + label::before {
    top: 2px;
}
.leadLightbox input[type=checkbox] + label::after{
    top: 5px;
    left: 3px;
}
.leadLightbox input[type=checkbox] + label{
    color: #6D6D6D;
    font-size: 14px;
}