audio{
           max-height: 100%;
           max-width: 100%;
           margin: auto;
           object-fit: contain;
         }
@media (max-width: 576px) {
  .imago-presentazione {
  width: 50%;
}
}
#sp-header.full-header {
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 576px) {
  #sp-header.full-header {
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media (max-width: 576px) {
.burger-icon {
    margin-bottom: 10px;
   }
}
/* aggiunge padding a dx ultima voce di menu */
.sp-megamenu-parent > li:last-child > a {
  padding: 0px 15px;
     }
.sp-megamenu-parent .sp-has-child.open > .sp-dropdown{ display: block; } 
/* fa apparire il menu burgher a 1280px invece che a 991px come di default  */
@media screen and (max-width: 1280px) {
#sp-header #offcanvas-toggler.offcanvas, #sp-header #offcanvas-toggler.mega
{display: flex !important;}
 .sp-megamenu-parent.d-none.d-lg-block 
 { display: none !important; }
}
/* Allinea a destra il logo nella sezione supertop */
.floatlogo {
    float: right;
}
/* Regola per centrare l'immagine nel banner in cima ad ogni pagina */
#sp-supertop {
    margin-bottom: -10px;
    padding: 5px 0 0;
}
/* == css sezione title-top == */
#sp-title-top {
  background-color: #f4f3f4;
}
/* css per la visualizzazione della slide da smartphone (riduce i padding dx e sx) */
#sp-title-top .container {
  padding-left: 5px;
  padding-right: 5px;
}
@media (max-width: 576px) {
  #sp-title-top .container {
  padding-left: 0;
  padding-right: 0;
}
}
/* css classe pagina ricordopaolo per title-top pagina ricordando paolo dove c'è la posizione title */
.ricordopaolo #sp-title-top {
  background-image: url("/images/Paolo-Cecere.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.ricordopaolo .titlepaolo {
  /*min-height: 450px;*/
  height: 45vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: white !important;
}
/* css classe pagina progconcerti per title-top pagina programmi concerto dove c'è la posizione title */
.progconcerti #sp-title-top {
  background-image: url("/images/Imago_Pagine/programmi-concerto-dramsam.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 15% 0%;
}
.progconcerti .titleprog {
  /*min-height: 450px;*/
  height: 45vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: white !important;
}
/* css classe pagina storiadramsam per title-top pagina storia del gruppo dove c'è la posizione title */
.storiadramsam #sp-title-top {
  background-image: url("/images/Imago_Pagine/ensemble-dramsam-storia.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 55% 0%;
}
.storiadramsam .titlestoria {
  /*min-height: 450px;*/
  height: 45vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: white !important;
}
/* css classe pagine dove c'è la slide in posizione title */
.titlepadding #sp-title-top {
  padding: 10px 0; /* padding: 20px 0 0; nel caso della slide ARI */
}
@media (max-width: 576px) {
  .titlepadding #sp-title-top {
  padding: 0;
}
}
/* == FINE css sezione title-top == */
#logotest {
    display: none;
}
/* Tutte maiuscole le voci di menu principale. Quelle dei submenu restano con la sola prima lettera maiuscola */
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
    text-transform: uppercase;
}
/* Ho ridotto a 30px il solito padding top e bottom da 100px! */
#sp-main-body {
    padding: 30px 0;
}
/* css sezione slide */
#sp-slide-top {
  background-color: #F4F3F4;
  padding: 5px 0;
}
/* css sezione loghi */
#sp-underbody {
  background-color: #f4f3f4;
  padding: 60px 0px 40px 0px;
}
/* Ho modificato, snellendolo, font-size e font-weight del titolo dei moduli in posizione right */
#sp-left .sp-module .sp-module-title, #sp-right .sp-module .sp-module-title {
    margin: 0 0 30px;
    padding-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid #f3f3f3;
    font-family: 'Abel', sans-serif;
}
/* Ho modificato, snellendolo, font-size e font-weight del titolo dei moduli in posizione bottom che ora sono uguali a quelli in posizione right */
#sp-bottom .sp-module .sp-module-title {
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 30px;
    color: black;
}
#sp-bottom {
    background-color: #F4F3F4 !important;
    color: #0f0e0e;
}
/* icona menu offcanvas - le impostazioni da backend sembrano non funzionare */
@media (max-width: 575px) {
  #offcanvas-toggler {
    height: 55px;
    line-height: 55px;
  }
}
/* logo fino a 576px - le impostazioni da backend sembrano non funzionare */
@media (max-width: 576px) {
  .logo-image {
    height: 40px;
    margin-bottom: 13px;
  }
}
/* margin-top per la colonna dx che altrimenti si attacca al content da mobile */
@media only screen and (max-width: 991px) {
 #sp-right .sp-module:first-child {
    margin-top: 30px;
  }
}
/* Ho modificato, snellendolo, font-weight (era 600), aumentato da 14 a 16px font-size e messe in bianco le voci di submenu del megamenu */
.sp-megamenu-parent .sp-mega-group > li > a {
  display: block;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 5px;
  color: white;
  text-align: center;
}
/* == CSS per i singoli dropdown-inner con classe inserita nel backend del megamenu nel template == */
/* musica cortese */
.sp-megamenu-parent .MCcolor .sp-dropdown .sp-dropdown-inner {
  background: #C8B25D !important;
  padding: 0px 20px;
  border-radius: 5px;
}
.sp-megamenu-parent .MCcolor .sp-dropdown .sp-dropdown-inner .col-sm-6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 215px;
}
.sp-megamenu-parent .MCcolor .sp-dropdown .sp-dropdown-inner .col-sm-8 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 215px;
}
.sp-megamenu-parent .MCcolor .sp-dropdown .sp-dropdown-inner .col-sm-4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 215px;
}
/* theatrum instrumentorum */
.sp-megamenu-parent .TIcolor .sp-dropdown .sp-dropdown-inner {
  background: #1D7791 !important;
  padding: 0px 20px;
  border-radius: 5px;
}
.sp-megamenu-parent .TIcolor .sp-dropdown .sp-dropdown-inner .col-sm-6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 215px;
}
.sp-megamenu-parent .TIcolor .sp-dropdown .sp-dropdown-inner .col-sm-8 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 215px;
}
.sp-megamenu-parent .TIcolor .sp-dropdown .sp-dropdown-inner .col-sm-4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 215px;
}
/* dramsam */
.sp-megamenu-parent .DRcolor .sp-dropdown .sp-dropdown-inner {
  background: #7B1137 !important;
  padding: 0px 20px;
  border-radius: 5px;
}
.sp-megamenu-parent .DRcolor .sp-dropdown .sp-dropdown-inner .col-sm-6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 215px;
}
/* nasconde i sub-submenu della voce principale ensemble */
.sp-megamenu-parent .DRcolor .sp-dropdown .sp-dropdown-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}
/* == FINE CSS per i dropdown-inner con classi pagine specifiche == */
/* Sfondo delle voci di submenu nel megamenu a mouse over */
.sp-megamenu-parent .sp-mega-group > li > a:hover {
  background-color: whitesmoke;
  transition: .2s;
  border-radius: .25em;
  color: #171717;
}
.sp-megamenu-parent .sp-mega-group > li > a {
    padding-left: 0px !important; /* era 10px - cambiato idea */
}

/* Sfondo voci di submenu a mouse over */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover {
    background-color: lightgray;
    transition: .5s;
    border-radius: .25em;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item a {
   padding-left: 10px !important;
}
/* abbassato il menu offcanvas */
.offcanvas-menu {
    padding-top: 30px;
}

/* Ho aggiunto un margin-top per separare la sezione title dall'header e messo un colore di background 
    #sp-title {
    min-height: 0;
    padding-top: 20px !important;
    background-color: #F4F3F4 !important;
} */

/* regole per il footer */
#sp-footer .container-inner {
  padding: 20px 0;
  border-top: 0px solid rgba(255, 255, 255, 0.1);
}
#sp-footer {
    /*background: #393938;*/
    color: #fff;
}
#sp-footer p {
    margin-bottom: .5rem;
    font-size: .8rem;
}
#sp-footer a {
    color: white !important;
}
#sp-footer a:hover {
    color: lightgray !important;
}
/* fine regole per il footer */
/* regole per il footer-custom */
#sp-footer-custom {
    background: #2b2b2b;
    color: #fff;
    padding: 30px 0 25px;
}
#sp-footer-custom p {
    margin-bottom: .5rem;
    font-size: .9rem;
}
#sp-footer-custom a {
    color: white !important;
}
#sp-footer-custom a:hover {
    color: lightgray !important;
}
/* fine regole per il footer-custom */
/* messo un bordino allo scroll-to-top */
.sp-scroll-up {
    border: solid 1px lightgray;
}

/* Eliminato il copyright di default del template! 
.sp-copyright {
    display: none;
} */
/* Nuova dimensione di h2 e con nuovo font */
h2 {
    font-size: 1.8rem;
    font-family: 'Abel', sans-serif;
}
/* custom breadcrumb */
.breadcrumb {
    padding: 0 .51rem;
    background-color: transparent;
    border-radius: 0;
    border-left: solid 3px #7A1237;
    line-height: 18px;
}
/* cambio colore testo readmore a mouse over */
.article-list .article .readmore a:hover, .article-list .article .readmore a:active, .article-list .article .readmore a:focus {
    color: lightgray;
}

/* diminuito padding e messo bordo più visibile box articoli visualizzazione blog */
.article-list .article {
    padding: 10px;
    border: 1px solid #CDCDCD;
}
/* due regole per i bottoni della navigazione nella visualizzazione blog */
.pager > li a {
    border: 1px solid #CDCDCD;
}
.pager > li a {
    padding: .5rem 1rem;
    border-radius: .25em;
}
/* CSS MODULI MENU POS RIGHT!!! */
#sp-right .sp-module ul > li a:hover {
    background-color: lightgray;
    color: black;
}
#sp-right .sp-module ul > li.active a {
    background-color: #7A1237;
    color: white !important;
     border-radius: .25em;
    border: 1px solid #7A1237;
}
#sp-right .sp-module ul > li a {
    padding-left: 10px;
    border: 1px solid lightgray;
    border-radius: .25em;
}
/* FINE CSS MODULI MENU POS RIGHT! */

/* CSS MODULI POS RIGHT */
/* riduzione margin-top e padding moduli pos right */
#sp-left .sp-module, #sp-right .sp-module {
    margin-top: 15px;
    padding: 20px !important;
}
/* "abbassata" un po' tutta la colonna dx coi moduli pos right 
#sp-right .sp-module:first-child {
    margin-top: 10px !important;
} */
/* FINE CSS MODULI POS RIGHT */

/* == ICONA BURGER OPEN E CLOSE MENU OFFCANVAS == */
/* immagine burger al posto di quella fontawesome di sistema */
.fa-bars::before {
    content: "" !important;
    display: block;
    background: url(/images/burger-circle-32.png) no-repeat;
    width: 48px;
    height: 48px;
    float: right;
    margin-top: 14px;
    margin-right: -15px
}
/* immagine al posto dell'icona close fontawesome di sitema */
.fa-remove::before {
    content: "";
    display: block;
    background: url(/images/close-icon-32.png) no-repeat;
    width: 32px;
    height: 32px;
}
/* distanza dal margine destro dell'offcanvas */
body.ltr .close-offcanvas {
    right: 35px;
}
/* regola per nascondere i background dell'icona che erano impostati nel template */
.close-offcanvas {
    background: transparent !important;
}
/* == FINE ICONA BURGER E CLOSE MENU OFFCANVAS == */


/* dopo l'aggiornamento di HU 1.1 comparivano due righe/border con ampio padding sotto il titolo dell'articolo anche se non sono attivate le icone social...! Tolto il tutto...! */
.article-details .article-ratings-social-share {
    padding: 0;
    border-top: 0px solid #f5f5f5;
    border-bottom: 0px solid #f5f5f5;
    margin-bottom: 0rem;
}


/* Bottoni custom modificando quelli di Bootstrap4 */
.btn-mc {
    color: #ffffff;
    background-color: #C8B25E !important;
    border-color: #f8f9fa;
}
.btn-mc:hover {
    color: #e8e8e8;
    background-color: #928245 !important;
    border-color: #dae0e5;
}
.btn-ti {
    color: #ffffff;
    background-color: #1C7790 !important;
    border-color: #f8f9fa;
}
.btn-ti:hover {
    color: #e8e8e8;
    background-color: #155769 !important;
    border-color: #dae0e5;
}
/* FINE bottoni custom */
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: transparent; /* Lo sfondo era bianco */
    background-clip: border-box;
    border: 0px solid rgba(0,0,0,.125); /* ho tolto il bordo che era di 1 px */
    border-radius: .25rem;
}


/* Regole custom per iCagenda */
.ic-label {
    display: table-cell;
    font-weight: bold;
    min-width: 110px;
    display: none !important;
}
.ic-divCell {
    font-weight: bold;
    padding: 1px 5px;
    font-weight: bold;
}
.ic-info {
    background: transparent none repeat scroll 0 0;
    border-left: 0px solid #ccc;
    border-radius: 0px;
    margin-bottom: 10px;
    padding: 1%;
}
.ic-align-center {
    text-align: left;
}
#ic-list-of-dates {
    display: none;
}
/* tolta la parola DATA nel popup eventi */
.ictip-date-lbl {
    display: none
}
/* tolti i numeri dei posti e delle prenotazioni sotto il testo nella pagina evento */
.ic-divRow.ic-info-tickets-left {
   display: none;
}
.ic-divRow.ic-info-tickets {
   display: none;
}

/* cambio colore chiudi nel popup evento dal calendario */
#ictip a.close {
    color: #1C7790 !important;
}
/* tolto bottone torna all'evento nella schermata di successo della registrazione */
.ic-registration-complete-buttons .ic-btn-success {
   display: none !important;
}
/* aggiunto testo ore prima dell'ora numerica popup */
#ictip .ictip-time:before {
    content:"ore"
}
/* tolti i numeri dei posti nel popup */
.regButtons.ic-reg-buttons {
  display: none !important;
}
/* ingrandito il bottone prenota nella pagina dell'evento */
.ic-registration-box .ic-btn-small.ic-btn-success {
    padding: 3px 9px;
    font-size: 18px;
    line-height: 16px;
    background-image: linear-gradient(to bottom,#1C7790,#1C7790);
}
.ic-registration-box .ic-btn-small.ic-btn-success:hover {
    padding: 3px 9px;
    font-size: 18px;
    line-height: 16px;
	background-color: #1C7790;  
}
/* riquadro evento per la prenotazione */
#icagenda.ic-event-view {
  margin-bottom: 20px;
  border: solid 1px #C8B25E;
  border-radius: .25em;
  padding: 10px;
  background-color: rgba(221,221,221,0.3);
}
/* FINE regole custom per iCagenda */
/* Aggiunto z-index alla galleria SP Easy Image Gallery che altrimenti stava sotto al menu... */
.speasyimagegallery-modal-wrapper {
    z-index: 9999 !important;
}
/* Un semplice effetto di variazione di opacità dell'immagine con transizione tra i due stati. Usata nel modulo coi due loghi in home page. */
.opacity:hover {
    opacity: 0.8;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    transition: all ease-out 0.5s;
    -webkit-transition: all ease-out 0.5s;
    transition: all ease-in 0.5s;
    -webkit-transition: all ease-in 0.5s;
}
.opacity {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    transition: all ease-out 0.5s;
    -webkit-transition: all ease-out 0.5s;
    transition: all ease-in 0.5s;
    -webkit-transition: all ease-in 0.5s;
}
q{
   quotes: "\00ab" "\00bb";
}
/* ==Classi css custom per l'accordion Bootstrap 4 usato nella pagina MC2018== */
.accordion { 
	background-color: #455357;
    color: white;
}
.accbtn {
    color: #e5dbba;
    text-decoration: none;
    background-color: transparent;
    border-color: transparent;
}
.accbtn:hover {
    color: #e5dbba;
    text-decoration: none;
    background-color: transparent;
    border-color: transparent;
}
.accbtn:focus {
    color: #e5dbba;
    text-decoration: none;
    background-color: transparent;
    border-color: transparent;
}
.cardborder {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}
/* quest'ultima classe l'ho aggiunta, dopo aver resso cliccabile tutto l'header dell'accordion, per far si che il cursore a manina compaia su tutto l'header e non solo sul titolo dell'header! */
.cursor {
    cursor: pointer;
}
/* ==FINE==Classi css custom per l'accordion Bootstrap 4 usato nella pagina MC2018== */
/* ==Classi css custom per il bottone Bootstrap 4 usato nella pagina MC2018== */
.btn-outline-mc2018 {
 color:#6c757d;
 background-color:transparent;
 background-image:none;
 border-color:#6c757d
}
.btn-outline-mc2018:hover {
 color:#fff;
 background-color:#3C4E52;
 border-color:#3C4E52;
}
.btn-outline-mc2018.focus,.btn-outline-mc2018:focus {
 box-shadow:0 0 0 .2rem rgba(60,78,82,.5)
}
.btn-outline-mc2018.disabled,.btn-outline-mc2018:disabled {
 color:#6c757d;
 background-color:transparent
}
.btn-outline-mc2018:not(:disabled):not(.disabled).active,.btn-outline-mc2018:not(:disabled):not(.disabled):active,.show>.btn-outline-mc2018.dropdown-toggle {
 color:#fff;
 background-color:#6c757d;
 border-color:#6c757d
}
.btn-outline-mc2018:not(:disabled):not(.disabled).active:focus,.btn-outline-mc2018:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-mc2018.dropdown-toggle:focus {
 box-shadow:0 0 0 .2rem rgba(60,78,82,.5)
}
/* ==FINE==Classi css custom per il bottone Bootstrap 4 usato nella pagina MC2018== */
/* ==Classi css custom per il bottone Bootstrap 4 usato nelle pagine Theatrum Instrumentorum== */
.btn-outline-TI {
 color:#6c757d;
 background-color:transparent;
 background-image:none;
 border-color:#6c757d
}
.btn-outline-TI:hover {
 color:#fff;
 background-color:#1C7790;
 border-color:#1C7790;
}
.btn-outline-TI.focus,.btn-outline-mc2018:focus {
 box-shadow:0 0 0 .2rem rgba(60,78,82,.5)
}
.btn-outline-mc2018.disabled,.btn-outline-TI:disabled {
 color:#6c757d;
 background-color:transparent
}
.btn-outline-TI:not(:disabled):not(.disabled).active,.btn-outline-TI:not(:disabled):not(.disabled):active,.show>.btn-outline-TI.dropdown-toggle {
 color:#fff;
 background-color:#6c757d;
 border-color:#6c757d
}
.btn-outline-TI:not(:disabled):not(.disabled).active:focus,.btn-outline-TI:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-TI.dropdown-toggle:focus {
 box-shadow:0 0 0 .2rem rgba(60,78,82,.5)
}
/* ==FINE==Classi css custom per il bottone Bootstrap 4 usato nelle pagine Theatrum Instrumentorum== */
/* ==Classi css per prima lettera di una parola== */
/*.firstcharacter {
  color: red;
  float: left;
  font-family: Georgia;
  font-size: 60px;
  line-height: 65px;
  padding-top: 0px;
  padding-right: 8px;
  padding-left: 3px;
}*/
.firstcharacter {
  /*color: red;*/
  float: left;
  /*font-family: Georgia;*/
  font-size: 250%;
  line-height: 47px;
  padding-right: 8px;
  /*padding-left: 1%;*/
}
/* FINE==Classi css per prima lettera di una parola== */
.speasyimagegallery-gallery-item-title .paolo {
    display: none;
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 1px;
}

/* css per il form di iscrizione alla newsletter di mailchimp */
#mc_embed_signup {
    font: 16px 'PT Sans', sans-serif !important;
    line-height: 24px !important;
}
#mc-embedded-subscribe-form {
    margin-top: -20px !important;
}

/* css per far scomparire il titolo sulla miniatura immagine di SP Easy Image gallery solo nel modulo La Storia */
.galleriastoria .speasyimagegallery-gallery-item-title {
  display: none !important;
 }

/* == HOVER IMAGE EFFECT! == */
/* utilizzato nelle quattro immagini in riga nella home */
/********* Simple or original overlay *******/

/* Main container */
.overlay-image {
 position: relative;
 width: 100%;
}

/* Original image */
.overlay-image .image {
 display: block;
 width: 100%;
 height: auto;
}

/* Original text overlay */
.overlay-image .text {
 color: #fff;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}

/********* Overlay on hover *******/

/* New overlay on hover */
.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;
}

/* New overlay appearance on hover */
.overlay-image:hover .hover {
 opacity: 1;
}

/********* Background and text only overlay on hover *******/

.overlay-image .normal {
 transition: .5s ease;
}
.overlay-image:hover .normal {
 opacity: 0;
}
.overlay-image .hover {
 background-color: rgba(0,0,0,0.5);
}
/* == FINE HOVER IMAGE EFFECT! == */


/* == CSS MODULI AUDIO IN POS RIGHT == */
/* ridotto il padding standard per far entrare il player mp3 */
.audiopadding {
    padding: 10px !important;
}
/* classe per il titolo p messo a mano sul modulo */
.moduletitleaudio {
    margin: 0 0 30px;
    padding-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid #f3f3f3;
}
/* classe per il titolo p messo a mano sul div negli articoli */
.titolodivaudio {
    margin: 0 0 10px;
    padding-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid #f3f3f3;
}
/* css per i titoli dei pezzi */
.titlenomargin {
   margin-bottom: .1rem;
   font-style: oblique;
   font-size: 14px;
   letter-spacing: -.1px;
}

/* mediaquery per moduli audio pos right e div negli articoli */
@media only screen and (max-width: 991px) {
  .audiomodule {
    display: none;
  }
}
@media only screen and (min-width: 992px) {
  .audionoarticle {
    display: none;
  }
}


/* == CSS VIDEO YOUTUBE == */

    .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;
    }
    
    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }
    
    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }
    
    .youtube-player img:hover {
        -webkit-filter: brightness(75%);
    }
    
    .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("//i.imgur.com/TxzC70f.png") no-repeat;
        cursor: pointer;
    }

/* == FINE CSS VIDEO YOUTUBE == */

/* == LAYOUT BLOG == */
.article-list .article .article-intro-image {
    margin: 0;
}
.article-list .article .article-intro-image img {
    margin-bottom: 20px;
    margin-right: 10px;
}
.article-list .article {
    padding: 5px;
    overflow: hidden;
}
.article-introtext .readmore  {
   margin: 20px 0 10px
}
.article-info {
    background-color: #DCDCDC;
    border-radius: 0.25em;
    padding: 0px 10px 2px 10px;
    color: #7A1237;
    display: inline-block;
    font-weight: 600;
    letter-spacing: 1px;
}
.article-info::before {
    font-family: "Fontawesome";
    content: "\f133";
    color: #252525;
    padding-right: 5px;
    margin-top: 1px;
    font-size: 12px;
    color: #7A1237;
}
/* custom readmore! */
.article-list .article .readmore a {
    padding: .1rem 0rem .3rem 0rem;
background-color: #7A1237;
font-size: .9rem !important;
color: white;
border-radius: .25em;
width: 160px;
display: inline-block;
text-align: center;
letter-spacing: 1px;
}
/* == CSS MINIFRONTPAGE NEWS */
/* css card di minifrontpage news home page versione desktop! */
.mfp_mid_195.mfp_default_skin_card .mfp_default_item .mfp_default_title a {
  font-weight: 500 !important;
  font-size: .9rem !important;
}
.mfp_mid_195.mfp_default_skin_card .mfp_default_item .mfp_default_title {
  line-height: 1rem;
}
.mfp_mid_195.mfp_default_skin_card .mfp_default_item .mfp_date {
  font-size: .7em;
}
.mfp_mid_195.mfp_default_skin_card .mfp_default_item .mfp_thumb_pos_top {
  margin: 0;
}
/* css card di minifrontpage news home page versione mobile! */
.mfp_mid_197.mfp_default_skin_card .mfp_default_item .mfp_default_title a {
  font-weight: 500 !important;
  font-size: 1.1rem !important;
}
.mfp_mid_197.mfp_default_skin_card .mfp_default_item .mfp_default_title {
  line-height: 1.3rem;
}
.mfp_mid_197.mfp_default_skin_card .mfp_default_item .mfp_date {
  font-size: .7em;
}
/* bordo a mouse over sulle immagini delle card */
.mfp_default_skin_card .mfp_default_item .mfp_thumb_pos_top img:hover {
  border: 2px solid #184674;
}
/* == CSS MINIFRONTPAGE NEWS */
/* css per i menu ad ancore! */
#target1 { padding-top: -50px; margin-top: 50px;} #target2 { padding-top: -50px; margin-top: 50px;}
/* == TIPOGRAPHY == */
h1, h2, h3, p {
    font-family: 'idealistsans_light' !important;
}
h1 {
    font-size: 2rem;
}
.article-details .article-header h1 {
    font-size: 2rem;
}
/* da 2 a 1.6 */
.h2, h2 {
    font-size: 1.6rem;
}
/* da 1.75 a 1.4 */
.h3, h3 {
    font-size: 1.4rem;
}
@media only screen and (max-width: 576px) {
h1 {
    font-size: 1.6rem;
}
  .article-details .article-header h1 {
    font-size: 1.6rem;
}
.h2, h2 {
    font-size: 1.4rem;
}
}
@media only screen and (max-width: 1099px) {
.h3, h3 {
    font-size: 1.2rem;
}
}

/* font idealistsans_light */
@font-face {
    font-family: 'idealistsans_light';
    src: url('../fonts/idealistsans_light.woff') format('woff');
}

/* == FINE TIPOGRAPHY == */
/* == CSS WIDGETKIT == */
/* nuovo z-index per lightbox gallery che nascondeva la X di chiusura... */
.uk-lightbox.uk-overflow-hidden.uk-lightbox-panel.uk-open {
  z-index: 10111 !important;
}
/* css grid home page con classe sulla pagina */
.gridhome .uk-scope .uk-text-center {
  text-align: center !important;
  display: flex;
  justify-content: center;
}
.gridhome .uk-scope .uk-card-default {
  background-color: transparent !important;
}
.gridhome .uk-scope .uk-card-default {
  --uk-inverse: dark;
  color: #343434;
}
.gridhome .uk-scope .uk-button-default {
  border: 1px solid #333;
  border-radius: .2em;
}
.gridhome .uk-scope .uk-button-default:hover {
  background-color: #2B2B2B;
  color: #fff;
  border-color: #b2b2b2;
}
/* css accordion pagina Viatores - non in uso, credo... */
.uk-accordion-title {
  font-size: 16px !important;
  border-bottom: 1px solid #7A1237;
  padding: 5px 0 5px 10px;
}
.uk-accordion-content {
  margin-top: 10px !important;
  border-bottom: 1px solid gray;
  padding: 0 5px;
}
.uk-scope .uk-accordion-content em {
  color: #333;
}
/* == FINE CSS WIDGETKIT == */
/* css slide home con classe pagina */
.slidhome #sp-title-top .row {
  display: flex;
  justify-content: center;
}
.slidhome #sp-title {
  min-height: 0;
  width: 60%;
}
@media (max-width: 991px) {
  .slidhome #sp-title {
  min-height: 0;
  width: 100%;
}
}
/* css slide il festival MC con classe pagina */
.slideMCfestival #sp-title-top .row {
  display: flex;
  justify-content: center;
}
.slideMCfestival #sp-title {
  min-height: 0;
  width: 60%;
}
@media (max-width: 991px) {
  .slideMCfestival #sp-title {
  min-height: 0;
  width: 100%;
}
}
/* css slide il festival MC con classe pagina */
.slideTIcastello #sp-title-top .row {
  display: flex;
  justify-content: center;
}
.slideTIcastello #sp-title {
  min-height: 0;
  width: 60%;
}
@media (max-width: 991px) {
  .slideTIcastello #sp-title {
  min-height: 0;
  width: 100%;
}
}
/* css grid pagina edizioni passate MC con classe sulla pagina */
.gridMCpasteditions .uk-scope .uk-button-default {
  border: 1px solid #333;
  border-radius: .2em;
}
.gridMCpasteditions .uk-scope .uk-button-default:hover {
  background-color: #C8B25D;
  color: #fff;
  border-color: #b2b2b2;
}
/* css grid pagina programmi concerti con classe sulla pagina */
.progconcerti .uk-scope .uk-button-default {
  border: 1px solid #333;
  border-radius: .2em;
}
.progconcerti .uk-scope .uk-button-default:hover {
  background-color: #2B2B2B !important;
  color: #fff;
  border-color: #b2b2b2;
}
/* == css toc table pagina paolo == */
/* css toc table */
.toc-list, .toc-list ol {
  list-style-type: disc;
}
.toc-list li {
  padding: 5px 0;
  font-style: italic;
}
/*.toc-list {
  padding-left: 12px;
}*/
/* mediaquery modulo ricordi pagina paolo con classe nel modulo */
@media only screen and (max-width: 991px) {
  .contributimodule {
    display: none;
  }
}
/* mediaquery toc articolo pagina paolo */
@media only screen and (min-width: 992px) {
  .contributi {
    display: none;
  }
}
/* per allineare le ancore */
.anchor {
    padding-top: 55px;
    margin-top: -45px !important;
  }
/* == FINE css toc table pagina paolo == */
/* css modulo lingue nell'header */
.languagemodule {
  border: solid 1px lightgray;
  border-radius: .25em;
  padding: 5px 0px 8px 0px;
  /*background-color: #F4F3F4;*/
  margin-left: 30px;
}
@media (max-width: 576px) {
  .languagemodule {
  margin-bottom: 13px;
}
}
/* css background color overlay JD PopUp Aholic */
#gafancybox-overlay149 {
  background: rgba(0, 0, 0, .8) !important;
  opacity: ;
}