@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&display=swap');

html, body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Heebo', sans-serif;
}
a{
text-decoration: none;
}
#comunicazione {
position:fixed;
float:left;
width:400px;
padding:25px;
left:50%;
-webkit-transform:translate(-50%);
    -ms-transform:translate(-50%);
        transform:translate(-50%);
border-radius:25px;
z-index:12;
background:rgb(52, 57, 65);
color:#fff;
top:2%;
-webkit-animation-name:comunicazione;
        animation-name:comunicazione;
-webkit-animation-delay: 4s;
        animation-delay: 4s;
-webkit-animation-duration:1s;
        animation-duration:1s;
-webkit-animation-fill-mode:forwards;
        animation-fill-mode:forwards
}
@-webkit-keyframes comunicazione {
from {
opacity:1;
top:2%
}
to {
opacity:0;
top:-10%
}
}
@keyframes comunicazione {
from {
opacity:1;
top:2%
}
to {
opacity:0;
top:-10%
}
}
#comunicazione .titolo {
position:relative;
float:left;
width:100%;
margin-top:0;
font-size:20px;
font-weight:700;
text-align:center
}
#comunicazione .descrizione {
position:relative;
float:left;
width:100%;
margin-top:10px;
font-size:12px;
font-weight:100;
text-align:center
}
#header{
position: fixed;
float: left;
width: 100%;
height: 120px;
background: white;
z-index: 10;
top: 0;
-webkit-box-shadow:0 5px 10px 5px rgba(85,85,85,.5);
-o-box-shadow:0 5px 10px 5px rgba(85,85,85,.5);
box-shadow:0 5px 10px 5px rgba(85,85,85,.5);
}

#header .logo{
position: relative;
float: left;
width: 100%;
height: 80px;
padding: 5px 0px;
}

#header .logo img{
position: relative;
float: left;
height: 100%;
left: 50%;
-webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
        transform: translate(-50%);
}

#header #bottoni{
position: relative;
float: left;
width: 50%;
left: 50%;
-webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
        transform: translate(-50%);

}

#header #bottoni .bottone{
position: relative;
float: left;
width: 28.3%;
padding: 0 2.5%;
text-align: center;
margin-top: -5px;
transition: 0.3s;
}

#header #bottoni .bottone .testo{
width: -moz-fit-content;
text-align: center;
margin-left: auto;
margin-right: auto;
color:  #063660;
font-size: 17px;
font-weight: 500;
cursor: pointer;
transition: 0.3s;
}

#header #bottoni .bottone:hover .testo{
    color: white;
}

#header #bottoni .bottone:hover{
    background:  #063660;
}

#header .menu-header{
position: fixed;
float: right;
width: 100%;
height: 70px;
right: 0px;
z-index: 9;
display: none;
}

#header .menu-header .menu{
position: absolute;
float: right;
width: 30px;
top: 50%;
right: 10px;
-webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
        transform: translate(0%, -50%);
}

.bar1, .bar2, .bar3 {
width: 100%;
height: 3px;
background-color: black;
margin: 5px 0px;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
border-radius: 2px;
}

.change .bar1 {
margin: 4px 0;
-webkit-transform: rotate(-45deg) translate(-5px, 4px);
-ms-transform: rotate(-45deg) translate(-5px, 4px);
    transform: rotate(-45deg) translate(-5px, 4px);
}

.change .bar2 {
opacity: 0;
}

.change .bar3 {
margin: 4px 0;
-webkit-transform: rotate(45deg) translate(-7px, -7px);
-ms-transform: rotate(45deg) translate(-7px, -7px);
    transform: rotate(45deg) translate(-7px, -7px);
}

@media (max-width: 1000px){
#header{
width: 100%;
height: 70px;
overflow: hidden;
}
#header .logo{
height: 50px;
z-index: 1;
}
#header #bottoni{
position: fixed;
float: right;
width: 50%;
height: 100%;
background: white;
right: -100%;
margin-top: 70px;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
z-index: 0;
left: auto;
-webkit-transform: translate(0);
    -ms-transform: translate(0);
        transform: translate(0);
}

#header #bottoni .bottone .testo{
font-size: 15px;
}

#header #bottoni.change{
right: 0;
}

#header #bottoni .bottone{
position: relative;
float: left;
width: 80%;
padding: 8% 10%;
margin: 0;
background: white;
}

#header .menu-header{
display: block;
}
}