:root {
    --sfondo_principale: #3498db;
    --carattere_logo: normal normal 400 calc(7em + 0.1vw) "Bowlby One SC", sans-serif;
    --carattere_menu: normal normal 300 calc(1em + 0.1vw) "Exo 2", sans-serif;
    --carattere: normal normal 300 calc(0.9em + 0.1vw) "Exo 2", sans-serif;           /* font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit; */
    --carattere_titolo: normal normal 600 calc(1.4em + 0.1vw) "Exo 2", sans-serif;
    --carattere_titolo_news: normal normal 600 calc(1.2em + 0.1vw) "Exo 2", sans-serif;
    --carattere_form: normal normal 300 calc(0.7em + 0.1vw) "Exo 2", sans-serif;
    --carattere_suggest: normal normal 300 calc(0.7em + 0.1vw) "Exo 2", sans-serif;
  }

body {margin:0; padding:0}

h1 {
    margin: calc(1em + 0.1vw) 0 calc(1em + 0.1vw) 0;   
    font:var(--carattere_titolo);
    font-optical-sizing: auto;
    color:sandybrown; 
}

h1 a {
    color:sandybrown; 
    text-decoration:none;
}

h2 {    
    clear:both; 
    width:100%; 
    margin:calc(1.5em + 0.1vw) 0 calc(1em + 0.1vw) 0; 
    color:black;
    font:var(--carattere_titolo_news);}
h2 a {
    color:black;
    text-decoration:none;
}
h2 a:hover {
    color:white;
    background-color:black; 
    text-decoration:none;
}

h3 {
    margin: 2em 0 1em 0; 
    color:sandybrown; 
    font: var(--carattere);
    font-optical-sizing: auto;
    font-weight: 500;
}

.center {text-align:center;}
.sx {text-align:left;}
.dx {text-align:right;}
.black {color:black;}
.white {color:white;}

.bcblack {background-color:black;}
.tdnone {text-decoration:none; }
.fleft {float:left;}
.cb {clear:both;}

.suggestions {font:var(--carattere_suggest);}
.suggestions p {margin:0 0 0.5em 0;}

.logo {
    padding: 0.1em 0 0 0;
    background-color:black;
    text-align:center;
    color:white; 
    font:var(--carattere_logo);
    line-height:100%;
    letter-spacing: calc(0.05em + 0.1vw);
}
.logo a, .logo a:hover {
    color:white; 
    text-decoration:none;
}

.menu {
    padding: 0 0 1.1em 0;
    background-color:black;
    color:white; 
    text-align:center;
    font: var(--carattere_menu);
    font-optical-sizing: auto;
}
.menu a {
    color:white; 
    text-decoration:none; 
}
.menu a:hover {
    color:sandybrown; 
    background-color:white; 
    text-decoration:none; 
}
.menu .selected {
    color:sandybrown; 
    text-decoration:underline; 
}

.content, td {
    box-sizing:border-box;
    max-width:800px; 
    margin:calc(2em + 0.1vw) auto 0 auto;
    padding:0 1em;
    text-align:left;
    font: var(--carattere);
    font-optical-sizing: auto;
}

.content b {
    font-weight: 550;
}

.mainpage h2 {font-size:calc(1em + 0.1vw);}
.mainpage a {color:black;}
.mainpage a:hover {background-color:black; color:white;}
.mainpage img {width:100%; border-radius:1em; transition: transform 0.2s;}
.mainpage img:hover {transform: scale(1.03);}

.title {
    margin: calc(1em + 0.1vw) 0 calc(1em + 0.1vw) 0;   
    font:var(--carattere_titolo);
    font-optical-sizing: auto;
    color:sandybrown; 
}

.coda {
    margin-top:calc(2em + 0.1vw);
    padding: calc(1em + 0.1vw) 0;
    background-color:black;
    text-align:center;
    color:white; 
    font: var(--carattere);
    font-optical-sizing: auto;
}

.coda .social img {width:1.2em; margin:0 0.2em 0.5em 0.2em; transition: transform 0.2s;}
.coda .social img:hover {transform: scale(1.2);}
.coda .social a:hover {background-color:black;}

.coda a {color:white; text-decoration:none; }
.coda a:hover {color:sandybrown; background-color:white; text-decoration:none; }


/*  ------------------------------------------------------- */
/*  ------------------------ ADMIN ------------------------ */
/*  ------------------------------------------------------- */

.formbutt {
    font-size:calc(1em + 0.1vw);
    font-weight: 300; 
}
.formbutt a {
    float:right; 
    border:1px solid black; 
    background-color:#efefef; 
    color:black; 
    font:-webkit-medium-control; 
    border-radius:0.5em; 
    padding:0.2em 0.3em; 
    margin: 0 0 0 0.5em; 
    text-decoration:none;}
  
.newpost textarea, .newpost input, .newpost select {
    width:100%; 
    margin:0 0 0.5em 0;
    font:var(--carattere_form);
    font-optical-sizing: auto;
}
.newpost td {
    font: var(--carattere);
    font-optical-sizing: auto;
}



.tour {
    font: var(--carattere);
    font-optical-sizing: auto;
}
.tour input {
    margin:0 0 0.5em 0;
}
.tourformdesc {
    width:200px; float:left; text-align:right; padding:0 0.5em 0 0;
}
  
/*  ------------------------------------------------------- */
/*  ------------------------ NEWS ------------------------- */
/*  ------------------------------------------------------- */

.news {box-sizing:border-box; }
.news img {
    max-width:33%; 
    float:right; 
    margin:0 0 calc(0.5em + 0.1vw) calc(0.5em + 0.1vw); 
    border:1px solid black; 
    border-radius: calc(1em + 0.1vw);
}

.news .date {
    float:right; 
    font-weight:300; 
    font-size:calc(0.55em + 0.1vw);
    padding:0.5em 0 0 1em; 
    color:black
}
.news .post {
    width:100%; 
    font: var(--carattere);
    font-optical-sizing: auto;
}

.news .replythis {margin:calc(1em + 0.1vw) 0 0 0;}
.news .replythis a {
    border:1px solid black; 
    background-color:#efefef; 
    color:black; 
    font:-webkit-medium-control; 
    border-radius:calc(0.1em + 0.1vw); 
    padding:calc(0.1em + 0.1vw); 
    text-decoration:none;}

.news .commentcnt {
    box-sizing:border-box; 
    width:100%; 
    margin:calc(1em + 0.1vw) 0 0 0;
}
.news .commentcnt .dx {
    width:95%; 
    margin-left:5%;
    text-align:left; 
}
.news .commentcnt .dx .firma {
    width:fit-content; 
    border-bottom:0px solid black; 
    margin:0 0 0.4em 0;
}
.news .commentcnt .dx .comment {
    margin:calc(0.5em + 0.1vw) 0; 
    font-size:calc(0.8em + 0.1vw);
    font-weight:250; 
    padding:0 0;
}
.news .commentcnt .dx .separator {
    width:100%; 
    height:1px; 
    background-color: #efefef;
}
 
.news .replyform {
    width:95%; 
    margin-left:5%; 
    padding:calc(1em + 0.1vw); 
    background-color:#efefef; 
    border-radius:0.5em; 
    text-align:left;
}
.news .replyform input, .news .replyform textarea, .news .replyform button {
    font:var(--carattere_form);
    font-optical-sizing: auto;
}

/*  ------------------------ links ------------------------ */

.links p {margin:calc(0.1em + 0.1vw) 0;}
.links a {font-weight:550;
    text-decoration:none; 
    color:black;
}
.links a:hover {
    background-color:black;
    color:sandybrown;
    transform: scale(1.1)
}

/*  ------------------------ disco ------------------------ */

.disco .griglia {
    float:left; 
    margin:0 0 1em 0; 
    width:33%; 
    text-align:center;
}

.disco .griglia img {
    width:95%;
    margin:0 0 0.2em 0;
    border:0px solid black; 
    border-radius: calc(0.2em + 0.1vw);
}

.disco .discotitle {color:black;}

.disco .cover {float:right; width:50%; margin: 0 0 0 1em;}

.disco .tracklist {margin:1.5em 0 1.5em 0;}
.disco .credits {font-size:calc(0.7em + 0.1vw); margin:0 0 1em 0; padding-top:0.4em}

  /*  ------------------------ media ------------------------ */

.audio {
    width:100%; 
    text-align:center; 
    font-size:calc(0.9em + 0.1vw); 
    padding:0 0 calc(0.5em + 0.1vw) 0;
}

.video {
    width:100%; 
    text-align:left; 
    font-size:calc(0.9em + 0.1vw);
    padding:0 0 calc(1em + 0.1vw) 0;
}
.videodiv {
    width:1%; 
    float:left;
}

  /*  ------------------------ gallery ------------------------ */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15%, 1fr));
    gap: calc(0.5em + 0.1vw);
}

.thumbnail {
    width: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s;
    border-radius: 0.5em;
}

.thumbnail:hover {
    transform: scale(1.1);
}

/* Stile Dialog (Lightbox) */
dialog {
    border: none;
    border-radius: 0.5em;
    padding: 1.2em;
    max-width: 90%;
    max-height: 90%;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.8); /* Sfondo oscurato */
}

#dialogImage {
    max-width: 100%;
    max-height: 80vh;
}



/* Bottone Chiudi */
#closeDialog {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    background: white;
    border: none;
    font-size:calc(1em + 0.1vw);
    cursor: pointer;
}



  /*  ------------------------ google fonts ------------------------ */

.londrina-solid-thin {
    font-family: "Londrina Solid", sans-serif;
    font-weight: 100;
    font-style: normal;
}
    
.londrina-solid-light {
    font-family: "Londrina Solid", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.londrina-solid-regular {
    font-family: "Londrina Solid", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.londrina-solid-black {
    font-family: "Londrina Solid", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.bowlby-one-sc-regular {
    font-family: "Bowlby One SC", sans-serif;
    font-weight: 400;
    font-style: normal;
}
      
.exo-2 {
    /*  <weight>: Use a value from 100 to 900
        <uniquifier>: Use a unique and descriptive class name */
    font-family: "Exo 2", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}