#menu {
    display              : grid;
    grid-template-columns: auto auto;
    padding              : 35px;
    position             : fixed;
    top                  : 0;
    width                : 100%;
    z-index              : 100;
}

.hide-menu {
    transition: transform 1s;
    transform : translateY(-200px);
}

.show-menu {
    transition: transform 1s;
    transform : translateY(0px);
}

.nav {
    margin-top   : auto;
    margin-bottom: auto;
}

.nav-link,
#title h1 {
    color                    : white;
    font-size                : 170%;
    font-weight              : bold;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

#title {
    display: inline-flex;
    cursor : pointer;
}

#title * {
    color                    : white;
    display                  : inline-flex;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

#title img {
    border-radius: 25px;
    height       : 135px;
}

#title h1 {
    margin                   : 0;
    font-size                : 185%;
    margin-left              : 5%;
    white-space              : nowrap;
    margin-top               : auto;
    margin-bottom            : auto;
    color                    : #cc8816;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

#background-img {
    width                  : 100%;
    height                 : auto;
    background             : url("../imgs/background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size   : cover;
    -o-background-size     : cover;
    background-size        : cover;
    z-index                : -100;
}

#content-wrap {
    width  : 100%;
    padding: 12% 5% 1% 5%;
}

#content-wrap>div,
footer {
    display: block;
}

#content {
    /*background-color: rgba(255, 255, 255, 0.2);*/
    min-height    : 100%;
    width         : 100%;
    padding-bottom: 7px;
}

#content>div {
    width: 100%;
}

.home h1 {
    font-size: 1.9em !important;
    margin   : 5px !important;
    padding  : 0 !important;
}

.home h2 {
    font-size    : 1.5em !important;
    margin-top   : 10px !important;
    margin-bottom: 10px !important;
    padding      : 0 !important;
}

#estate-inverno {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    padding              : 0 2% 0 2%;
    position             : absolute;
    bottom               : 20%;
    width                : 90% !important;
    background           : 0;
}

#estate,
#inverno {
    position: relative;
    bottom  : 150px;
}

.image {
    padding            : 2%;
    position           : absolute;
    opacity            : 1;
    display            : block;
    width              : 90%;
    height             : auto;
    transition         : .5s ease;
    backface-visibility: hidden;
    left               : 50%;
    transform          : translate(-50%, -50%);
    background-color   : rgba(255, 255, 255, 0.5);
    border             : 2px solid black;
}

.middle {
    transition   : .5s ease;
    opacity      : 0;
    position     : absolute;
    top          : 50%;
    left         : 50%;
    transform    : translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align   : center;
}

#estate:hover .image,
#inverno:hover .image {
    opacity: 0.3;
    cursor : pointer;
}

#estate:hover .middle,
#inverno:hover .middle {
    opacity: 1;
    cursor : pointer;
}

.hover-text {
    background-color: #cc8816;
    color           : black;
    font-size       : 4em;
    padding         : 16px 32px;
}

#links>p {
    position                 : fixed;
    right                    : 0;
    writing-mode             : vertical-rl;
    text-orientation         : upright;
    font-size                : 200%;
    font-weight              : 900;
    color                    : white;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
    cursor                   : pointer;
}

#links>ul {
    display         : block;
    position        : fixed;
    right           : 100px;
    background-color: aqua;
}

#links:focus-within #links>ul {
    display: block;
    z-index: 10;
}

#footer {
    padding         : 20px 0 20px 0;
    height          : fit-content;
    background-color: rgba(37, 37, 37, 1);
    color           : white;
    font-size       : 1em;
    text-align      : center;
}

#footer p,
#footer a {
    font-size: 20px;
}

#footer h4 {
    text-decoration: underline;
    white-space    : pre;
}

.icon {
    margin-left : 10px;
    margin-right: 10px;
    color       : white;
    max-width   : 30px;
}

#map {
    width        : 70%;
    height       : 60%;
    position     : relative;
    margin       : auto;
    margin-bottom: 2%;
}

#map iframe {
    width : 100%;
    height: 100%;
}

#come-arrivare * {
    text-align               : center;
    color                    : white;
    font-weight              : bold;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

.hidden {
    display: none;
}

.resultBox {
    display              : grid;
    grid-template-columns: 1fr 1fr;
}

.result {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius   : 15%;
    white-space     : pre-line;
    padding         : 3% 5% 3% 5%;
    max-width       : 100%;
    margin-top      : 15px;
}

.result p {
    padding: 0;
    margin : 0;
}

.result .inline-grid {
    display              : grid;
    grid-template-columns: auto auto auto auto;
}

.result:nth-child(2n+1) {
    margin-right: 10px;
}

.result:nth-child(2n) {
    margin-left: 10px;
}

.result img {
    width        : 100%;
    margin-bottom: 10px;
}

.result h2,
div {
    display: block;
}

.grid-2-cols {
    display              : grid;
    grid-template-columns: auto auto;
}

.subpage {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius   : 20px;
    white-space     : pre-line;
    padding         : 0 5% 0 5%;
}

.subpage h1 {
    margin-top: 30px;
}

.subpage p {
    font-size: 1.3em;
    padding  : 0;
    margin   : 10px;
}

#link_trasporti {
    background-color: rgba(255, 255, 255, 0.9);
    padding         : 20px;
    text-align      : center;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

#link_trasporti * {
    color : black;
    margin: 0 10px 0 10px;
}

#via-crucis img {
    width  : 70%;
    display: block;
    margin : auto;
}

#eventi {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap         : 20px;
}

#eventi-canale {
    padding: 0 2% 0 2%;
}

#eventi-canale .evento {
    display: inline-table;
}

#eventi-canale .evento img {
    float: left;
    width: 40%;
    align: middle;
}

#eventi-canale .evento h1,
#eventi-canale .evento p {
    margin-left: 42%;
    margin-top : 0px;
    display    : block;
    text-align : left;
    line-height: 1.3em;
}

#eventi-canale .evento p {
    font-size: 1.1em;
}

#eventi-canale .evento h1 {
    font-size: 1.7em;
}

#home-estate.subpage,
#home-inverno.subpage {
    padding    : 2%;
    padding-top: 0;
}

#home-estate .container,
#home-inverno .container {
    margin   : 0;
    min-width: 100%;
}

#home-estate .container p {
    margin-bottom: 35px;
}

#home-estate .container h2 {
    font-weight: bold;
}

/*img[data-src]::before {
    content: 'Loading...';
}*/

.carousel {
    max-width   : 70%;
    margin-right: auto;
    margin-left : auto;
}

.collapsible {
    cursor    : pointer;
    width     : 100%;
    border    : none;
    text-align: left;
    outline   : none;
}

.active,
.collapsible:hover {
    background-color: #ccc;
}

.collapsible-content {
    max-height: 0;
    overflow  : hidden;
    transition: max-height 0.2s ease-out;
}

.collapsible:after {
    content    : '\02795';
    font-size  : 13px;
    color      : white;
    float      : right;
    margin-left: 5px;
}

/*.active:after {
    content: "\2796";
}*/

.justifyed {
    text-align  : justify;
    text-justify: inter-word;
}

.grassetto {
    font-weight: bold;
}

#webcam>div {
    display        : flex;
    flex-direction : column;
    justify-content: flex-start;
    align-items    : center;
}

#webcam>div>div {
    display              : grid;
    grid-template-columns: 1fr 1fr;
}

#webcam>div>div h1 {
    font-size  : 1.5rem;
    grid-column: span 2;
    text-align : center;
    padding    : 0;
    margin     : 0;
    margin-top : 10px;
}

#webcam>div>div a {
    font-weight              : bold;
    font-size                : 1.3rem;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

#webcam img {
    max-height: 65vh;
    max-width : 80vw;
}

/*@media all and (max-width: 800px) {
    .subpage {
        margin-top: 50vh;
        background-color: aqua;
    }
}*/