/*##### RESET ######*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{margin:inherit;padding:inherit}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/*##### GLOBAL ######*/
:root {--primaryColor:#961d1e; --secondaryColor: #ffcb37; --tertiaryColor: #183A89; --darkColor: #010101; --lightColor: #f0f0f0; --shadeColor: #0000004d;}
* { box-sizing: border-box;}
body { font: 1.4rem Lato, sans-serif; color: var(--lightColor);}
img {max-width: 100%; height: auto;}

.radial-out{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);position:relative;overflow:hidden;transition:color .3s}
.radial-out:hover:before{transform:scale(2)}
.radial-out:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:var(--tertiaryColor);border-radius:100%;transform:scale(0);transition:transform .3s ease-out}

@media screen and (max-width:1023px) {
#home, #resolution {
  font-size: 1rem;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/entryBg.jpg);
  background-position:center center;
  background-size: cover;
  height: 100vh;
  text-align: center;
  
}
.left {
    display:none;
}r
.right {
    display: none;
}
#alertEntry {font-size: 1.4em; background-color: var(--secondaryColor); margin: 0.5em; padding: 1em; color: var(--darkColor);}
#buttonEntry {display: none;}
#home h1, #resolution h1 { font-size: 1.5em; text-transform: uppercase; margin-bottom: 0.8em; text-shadow: 2px 2px 0 var(--darkColor);}
#home h1 span, #resolution h1 span { display: block;}
#home h2, #resolution h2 { font-size: 1.3em; font-family: "Crimson Text", serif; margin-bottom: 1em;text-shadow: 2px 2px 0 var(--darkColor);}
#headings { padding: 1.3em; margin-bottom: 0.5em;}  
#home #logo, #resolution #logo { max-width: 6em;}

#archivio, #modale-pdf, header {display: none;}
}
@media screen and (min-width:1024px) {
/*###  HEADER ####*/
header { display: flex; justify-content: space-between; align-items: center; padding: 0.3em 1em; height: 10vh; position: fixed; top: 0; left: 0; width: 100%; background: var(--lightColor); z-index: 100;} 
#logoBox { display: flex; height: 100%; gap: 20px; align-items: center; color: var(--darkColor); font-weight: bold; font-size: 0.8em; text-transform: uppercase;}
#logoBox img { width: auto; height: 100%;}
nav li {display: inline-block; }
nav li a { display: flex; gap: 5px; background-color: var(--secondaryColor); padding: 0.5em 1em; border-radius: 30px; text-transform: uppercase; text-decoration: none; font-size: 0.8em; color: var(--darkColor); border: 2px solid var(--lightColor); outline: 2px dashed var(--lightColor); outline-offset: -5px;}
nav li a:hover {color: var(--lightColor);}
nav li a:hover img {filter: invert(100%);}

/*##### HOME ######*/
#alertEntry {display: none;}
#home {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/entryBg.jpg);
  background-position:center center;
  background-size: cover;
  height: 100vh;
  text-align: center;
}

#home h1 { font-size: 2em; text-transform: uppercase; margin-bottom: 0.8em; text-shadow: 2px 2px 0 var(--darkColor);}
#home h1 span { display: block;}
#home h2 { font-size: 1.5em; font-family: "Crimson Text", serif; margin-bottom: 1em;text-shadow: 2px 2px 0 var(--darkColor);}
#headings { padding: 2em; margin-bottom: 1em;}  
#home #logo { width: 13%;}
#buttonEntry { position: absolute; width: 100%; bottom: 10vh;}
#buttonEntry a { display: inline-block; padding: 0.5em 1em; border-radius: 30px; text-transform: uppercase; text-decoration: none; width: 40%; border: 2px solid var(--lightColor); outline: 2px dashed var(--lightColor); outline-offset: -5px;}
#buttonEntry a:first-child {background-color: var(--primaryColor); color: var(--lightColor); margin-right: 3%;}
#buttonEntry a:last-child {background-color: var(--secondaryColor); color: var(--darkColor);}


/*#### CONTAINER ARCHIVIO  #####*/
main#archivio {margin-top: 10vh; }
section#salaFaldoni {position: relative; height: 100%; background-color: var(--darkColor);}
section#salaFaldoni::before { position: absolute; content: ""; width: 100%; height: 100%; background:  radial-gradient(circle, rgba(254,254,254,0) 0%, rgba(0,0,0,0.6) 99.9%); pointer-events: none;
}
#salaFaldoni svg a { cursor: pointer;}
image { transition: transform 3s linear;}
image.animate, #salaFaldoni svg a { transform: scale(2.4) ; transform-origin: center 70%;}

.sottoserie, .sottosottoserie, .fascicolo {position: relative; height: 100%; padding: 30px;  }
.sfondoLettura{position:fixed;top:0;left:0;width:100%;height:100vh;background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(../img/tavoloBg.jpg);background-size:cover;background-position:center;z-index:-1;}  
.mainLettura { position: relative; z-index: 1; }

.faldoneIn {display: flex; justify-content: space-between; align-items: flex-start; max-width: 1300px; margin: 0 auto;}
.faldoneIn > *:last-child {width: 90%;}
.faldoneIn > *:first-child {width:18%;}
.faldoneDoc { display: flex; flex-wrap: wrap; justify-content: center;}
.faldoneDoc > * { width: 22%; margin: 0 2% 2% 0;}
.sottoserieBox { box-shadow: var(--shadeColor) 0px 2px 8px; background: var(--lightColor); border-radius: 10px; overflow: hidden; color: var(--darkColor); font-size: 0.8em; text-transform: uppercase; transition: transform 0.3s; }
.sottoserieBox h3 { background-color: #e2dede; padding: 1em; text-align: center; transition: background-color 0.3s}
.sottoserieBox a { padding: 30px; border-radius: 50%; background: var(--shadeColor); display: block; width: 70%; margin: 30px auto; transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;}
.sottoserieBox:hover { transform: scale(1.05);}
.sottoserieBox:hover h3 { background-color: var(--secondaryColor);}
.sottoserieBox:hover a {background: var(--secondaryColor); border-color: var(--shadeColor); box-shadow: 0 0 10px var(--shadeColor);}

.sottoserieFascicolo { box-shadow: var(--shadeColor) 0px 2px 8px; background: var(--lightColor); border-radius: 10px; overflow: hidden; color: var(--darkColor); font-size: 0.8em; text-transform: uppercase; transition: transform 0.3s; }
    .sottoserieFascicolo h3 {
        background-color: #e2dede;
        padding: 1em;
        text-align: center;
        transition: background-color 0.3s
    }
    .sottoserieFascicolo a {
        padding: 30px;
        border-radius: 50%;
        background: var(--shadeColor);
        display: block;
        width: 70%;
        margin: 30px auto;
        transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
    }
    .sottoserieFascicolo:hover {
        transform: scale(1.05);
    }
    .sottoserieFascicolo:hover a {
        background: var(--secondaryColor);
        border-color: var(--shadeColor);
        box-shadow: 0 0 10px var(--shadeColor);
    }


#sottoserieRef, #sottosottoserieRef { display: flex; flex-direction: column; align-items: center; box-shadow: var(--shadeColor) 0px 2px 8px; background: var(--secondaryColor); border-radius: 10px; color: var(--darkColor); border: 5px solid var(--lightColor); margin-bottom: 0.5em; font-size: 0.8em; text-transform: uppercase; padding: 1em; text-align: center; }
#sottoserieRef div, #sottosottoserieRef div { background: white; padding: 7px; border-radius: 50%;}
#sottoserieRef img, #sottosottoserieRef img { width: 1.5em; display: block;}

.fascicolo h3 {background-color: var(--primaryColor); color:var(--lightColor);}
.fascicolo h3 img {width: 1.2em;}
.fascicolo .sottoserieBox a { padding: 10px; border-radius: 0%; background: transparent; display: block; width: 90%; margin: 15px auto; transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; text-decoration: none; color: var(--darkColor);}
.fascicolo .sottoserieBox:hover a {background: var(--secondaryColor); color: var(--darkColor); border-color: var(--shadeColor); box-shadow: 0 0 10px var(--shadeColor);}
.fascicolo .sottoserieBox p:last-child { background-color: #e2dede; padding: 1em;}

    .fascicolo .sottoserieFascicolo a {
        padding: 10px;
        border-radius: 0%;
        background: transparent;
        display: block;
        width: 90%;
        margin: 15px auto;
        transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
        text-decoration: none;
        color: var(--darkColor);
    }

    .fascicolo .sottoserieFascicolo:hover a {
        background: var(--secondaryColor);
        color: var(--darkColor);
        border-color: var(--shadeColor);
        box-shadow: 0 0 10px var(--shadeColor);
    }

    .fascicolo .sottoserieFascicolo p:last-child {
        background-color: #e2dede;
        padding: 1em;
    }


#selectAlert, .faldoneLabel {background: var(--primaryColor); color: var(--secondaryColor); text-transform: uppercase; font-weight: bold; font-size: 1.2em; letter-spacing: 2px; text-align: center; width: 70%; padding: 0.4em; border-radius: 30px; border: 2px solid var(--lightColor); outline: 2px dashed var(--lightColor); outline-offset: -5px; position: absolute; top: 30px; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 2.5s linear 0.5s;}
#selectAlert.animate {opacity: 1;}
.faldoneLabel {position: static; transform: none; margin: 0 auto 50px; opacity: 1; }
.faldoneImg {border: 5px solid var(--lightColor); border-radius: 15px; background-color: var(--lightColor);}
.faldoneImg img {display: block; width: 100%; border-radius: 10px;}


/*### MODAL WINDOW ###*/
/* Stili per la finestra modale */
object {object-fit: contain;}
.modale{display:none;position:fixed;z-index:1;left:0;top:0;height:100vh;width:100%;overflow:auto;background-color:rgba(0,0,0,.4); z-index: 10000;}
.contenuto-modale{background-color:var(--primaryColor);border:1px solid #888;width:90%;height:90vh;margin:5vh auto;padding:.5vh 2vh;border-radius:30px}
.titolo-modale{display:flex;justify-content:space-between;align-items:center;color:var(--lightColor);}
.chiudi-modale{float:right;font-size:3em;font-weight:bold}
.chiudi-modale:hover,.chiudi-modale:focus{color:black;text-decoration:none;cursor:pointer}
.tooltipTest{position:absolute;background-color:var(--secondaryColor);color:var(--darkColor);padding:.7em 1.4em;border-radius:30px;border:2px solid var(--lightColor);outline:2px dashed var(--lightColor);outline-offset:-5px;box-shadow:0 0 15px var(--darkColor);z-index:1}  
#messaggio-modale {display: flex; justify-content: center; align-items: center; height: 83%;}

#resolution {display: none;}
} /*end media query*/