/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
.head_logo { width: 70%; background-color: var(--lime); border-radius: 0 0 0 1.5rem; height: 4rem; }

header :where(.menu_mappa_traffico, .menu_hamburger, .menu_login).menu_item  { display: none; }

header :where(.menu_mappa_meteo, .menu_meteo) { background-color: var(--lime); }

header .menu_mappa_meteo { order: 4; width: 15%; height: 4rem; padding: 0 1rem; border-radius: 0 0 1.5rem 0; }
header .menu_mappa_meteo span { display: none; }

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FOUNDATIONS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
.fixed_bkg { opacity: 0.65; filter: brightness(0.3); }

::-moz-selection { color: var(--black); background: var(--lime); }
::selection { color: var(--black); background: var(--lime); }

/* Scrollbar style */
body::-webkit-scrollbar { background-color: var(--white); }
body::-webkit-scrollbar-thumb { background-color: var(--lime); }

/* Loader */
#loader { background-color: rgb(var(--black-rgb) / 15%); }
#loader svg path { stroke: var(--lime); }


/**
 *
 *  █▀▀▄  █▀▀  ▄▀▀  █ ▄▀  ▀▀█▀▀  ▄▀▀▄  █▀▀▄      ▄▀▀  █▄ ▄█  ▄▀▀▄  █    █ 
 *  █  █  █▀▀   ▀▄  █▀▄     █    █  █  █  █       ▀▄  █ █ █  █▀▀█  █ ▄  █ ▄ 
 *  ▀▀▀   ▀▀▀  ▀▀   ▀ ▀▀    ▀     ▀▀   █▀▀       ▀▀   ▀   ▀  ▀  ▀  ▀▀▀  ▀▀▀  - LAPTOP |  1024 x 768  ->  1280 x 720
 * __________________________________________________________________________________________________________________________________________________________________________
 */
 
@media screen and (min-width: 601px) {

    header .menu_mappa_meteo { width: auto; }
    header .menu_mappa_meteo span { display: block; }

}


/**
 *
 *  █▀▀▄  █▀▀  ▄▀▀  █ ▄▀  ▀▀█▀▀  ▄▀▀▄  █▀▀▄      ▄▀▀  █▄ ▄█  ▄▀▀▄  █    █ 
 *  █  █  █▀▀   ▀▄  █▀▄     █    █  █  █  █       ▀▄  █ █ █  █▀▀█  █ ▄  █ ▄ 
 *  ▀▀▀   ▀▀▀  ▀▀   ▀ ▀▀    ▀     ▀▀   █▀▀       ▀▀   ▀   ▀  ▀  ▀  ▀▀▀  ▀▀▀  - LAPTOP |  1024 x 768  ->  1280 x 720
 * __________________________________________________________________________________________________________________________________________________________________________
 */
 
@media screen and (min-width: 1024px) {

    .head_logo { order: 1; background-color: transparent; height: auto; }
    .head_logo p span { color: var(--green); }

    header .menu_traffico { order: 2; }
    header .menu_meteo { order: 3; border-radius: 2rem 0 0 2rem; }
    header .menu_mappa_meteo { border-radius: 0 2rem 2rem 0; }
    header .menu_trasporto { order: 5; }
}