/* `xxxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1579.98px) {

}

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
}
/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {


}
@media(min-width: 1024.98px) and (max-width: 1199.98px) {

}
/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 1024.98px) {

}
@media(min-width: 767.98px) and (max-width: 991.98px) {

}
/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 768.98px) {
     .is-active{
         position: fixed;
        right: 0;
    }
     .is-active .hamburger-box{
        width: 24px;
    }
    .hamburger-inner, .hamburger-inner::before,  .hamburger-inner::after {
        background-color: #f5f5f5;
        box-shadow: 2px 1px 2px #ffa10a;
    }
     .is-active .hamburger-inner,  .is-active .hamburger-inner::before,  .is-active .hamburger-inner::after {
        background-color: #ffa10a;
    }
    .navbar a {
        text-align: center;
        padding: 1rem;
    }
    .navbar img {
        height: 6rem;
        transform: none
    }


}
/* x variare l'allineamento verticale, in base all'height del dispositivo */
@media (min-height: 689.98px) and (max-height: 710px) {
    .navbar img {
        height: 7rem;
    }
    .navbar a {
        padding: 1rem 2rem;
    }
}
@media (min-height: 710.02px) and (max-height: 760px) {
    .navbar a {
        padding: 1rem 2rem;
    }
    .navbar img {
        margin-top: 1rem;
    }

}
@media (min-height: 760.02px) and (max-height: 830px) {
    .navbar a {
        padding: 1.4rem 2rem;
    }
    .navbar img {
        margin-top: 1rem;
    }

}
@media (min-height: 830.02px) and (max-height: 870px) {
    .navbar a {
        padding: 1.6rem 2rem;
    }
    .navbar img {
        margin-top: 1rem;
    }
}
/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .main .mobile_header img {
        margin-left: 4rem;
    }
}
/* applies to xx-small devices (portrait phones, less than 376px) */
@media (max-width: 375.98px) {
    .main .mobile_header img {
        margin-left: 4rem;
        height: 32px;
    }
}