/*animations*/

@keyframes switchMe {
    from{left: 2px;
        background-color: rgb(220,220,220);
    }
    to{left: 22px;
        background-color: rgb(200,200,200);
    }
}

@keyframes switchOffMe {
    from{left: 22px;
        background-color: rgb(200,200,200);
    }
    to{left: 2px;
        background-color: rgb(220,220,220);
    }
}

@keyframes moveMeOnRight {
    from{
        right: -375px;
    }
    to{
        right: 0; 
    }
}
@keyframes moveMeOnLeft {
    from{
        right: 0; 
    }
    to{
        right: -375px;
    }
}
@keyframes putMeUp {
    from{
        margin-top: 25vh;
        margin-bottom: 25vh;
        height: 50vh;
    }
    to{
        margin-top: 15vh;
        margin-bottom: 0;
        height: 2vh;
    }
}
@keyframes disapparMe{
    from{
        background: rgba(255,255,255,0.7);
        backdrop-filter: blur(5px);
        height: 100vh;
    }
    to{
        background: transparent;
        backdrop-filter: blur(0px);
        height: 10vh;
    }
}
@keyframes moveMeUp{
    0%{
        top: 0vh;
        opacity: 0;
    }
    50%{
        top: -1.5vh;
        opacity: 1;
    }
    100%{
        top: -3vh;
        opacity: 0;
    }
}
html, body{
    user-select: none;
}
header{
	width:100vw;
	z-index: 999;
    height: 15vh;
    max-height: 15vh;
    min-height: 15vh;
    top: 0;
    position: fixed;
}
/*logo*/
#headerSide{
    width: 100vw;
    position: absolute;
    z-index: 999;
    max-height: 15vh;
    min-height: 15vh;
    max-height: 0;
    min-height: 0;
}
.logoSpace{
	width: 20vw;
	float:left;
	max-height: 10vh;
}
img.logo{
	width: calc(20vw - 50px);
	float:left;
    left: 2vw;
    margin: 25px;
    cursor: pointer;
}
img.centerLogo{
	width: calc(10vw - 50px);
    left: calc(40vw - 25px);
    margin: 25px;
    cursor: pointer;
}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 100,
  'GRAD' 200,
  'opsz' 48
}
span.comeBack{
    font-size: 60px;
    height: 60px;
    width: 60px;
    border-radius: 150px;
    border: 1px solid rgb(120,120,120);
    color: rgb(120,120,120);
    padding: 20px;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: calc(-50vw + 20px);
    mix-blend-mode: difference;
    z-index: 99999;
}
span.whiteComeBack{
    color: rgb(255,255,255) !important;
    border: 1px solid rgb(255,255,255);
}
#headerSide{
    width: 50vw;
    position: absolute;
    z-index: 10;
    max-height: 15vh;
    min-height: 15vh;
}
header{
	width:100vw;
	position: absolute;
	z-index: 3;
    height: 15vh;
    backdrop-filter: blur(5px);
    top: 0;
}
/**********/
/* mobile */
/**********/
@media (min-width: 279px) and (max-width: 823px) {
    #headerSide {
        width: 100vw;
        position: absolute;
        z-index: 10;
        max-height: 10vh;
        min-height: 10vh;
    }
    .locationTitle {
        height: 20px !important;
        line-height: 20px !important;
        width: 37.5vw !important;
        text-align: left !important;
        margin-top: 1.5vh !important;
    }
    span.mainLocationIcon {
        display: none;
    }
    /*questa impostazione viene settata su location-style, ma essendo un file utilizzato in più pagine, posso utilizzare i fogli di stile personalizzati per modificare in alcune sezioni delle feature comuni a più pagine*/
    .locationContainer{
        position: absolute !important;
        top: 0 !important;
        mix-blend-mode: difference;
    }
    img.logo{
        width: 25vw;
        margin-left: 37.5vw !important;
        margin-right: 37.5vw !important;
        top: 2.5vh;
        margin: 0px;
        margin-right: 0px;
        margin-left: 0px;
        mix-blend-mode: difference;
    }
    span.comeBack {
        font-size: 40px;
        height: 40px;
        width: 40px;
        border-radius: 100px;
        border: 1px solid rgb(30,30,30);
        color: rgb(30,30,30);
        padding: 15px;
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 10px;
        mix-blend-mode: difference;
    }
}