﻿/*#||###############################################*/
/*# STILI MULTISCHERMO #############################*/
/*#||###############################################*/
/*--------------------------------------------------*/
/*#||###############################################*/
/*#|HEAD Principale|################################*/
header { background-color: rgba(255,255,2550.9); backdrop-filter: blur(10px); padding: 1rem 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 15; }
    header:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2rem; transform: translateY(100%); z-index: 1; opacity: 0.1; /**/ background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); }
    header .main_menu .logo { padding-right: 2rem; border-right: solid 1px #034798; }
        header .main_menu .logo img { height: 5rem; }
        header .main_menu .logo:hover { border-right-color: #CCC; }
            header .main_menu .logo:hover img { transform: translateY(-0.2rem); }
    /**/
    header .main_menu .voice_item { position: relative; padding: 0.5rem 0; border-bottom: solid 1px transparent; }
        header .main_menu .voice_item span { display: block; }
    header .main_menu label.voice_item:after { content: url('../img/icone/arrow_down.svg'); position: absolute; bottom: 0; left: 50%; transform: translate(-50%,80%); opacity: 0; }
    header .main_menu label.voice_item:hover:after { opacity: 1; }
    header .main_menu .voice_item:hover { border-bottom-color: #034798; padding: 0.25rem 0 0.75rem 0; }
    /**/
    header .hamburger_menu { display: block; padding-left: 4rem; border-left: solid 1px #034798; height: 2rem; width: auto; aspect-ratio: 1 / 1; position: relative; }
        header .hamburger_menu:hover i { color: #034798; transform: translate(-50%,-50%) rotate(90deg); }
.hamburger_menu i.fa-xmark, #hamburger_submenu_trigger:checked ~ .head_container .main_menu .hamburger_menu i.fa-bars { display: none; }
.hamburger_menu i.fa-bars, #hamburger_submenu_trigger:checked ~ .head_container .main_menu .hamburger_menu i.fa-xmark { display: block; }
/*#||###############################################*/
/*#|SOTTOMENU|######################################*/
header .background_closing_label { background: rgba(255,255,255,0.9); }
.submenu { position: fixed; }
    .submenu.fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; transform: translateY(-110%); }
#hamburger_submenu_trigger:checked ~ .head_container .submenu.hamburger, #nuovo_submenu_trigger:checked ~ .head_container .submenu.nuovo, #usatokm0_submenu_trigger:checked ~ .head_container .submenu.usatokm0, #promo_submenu_trigger:checked ~ .head_container .submenu.promo { transform: translateY(0); }
/**/
.submenu.fullscreen a { flex-grow: 1; text-align: center; }
    .submenu.fullscreen a strong { padding-bottom: 0.5rem; border-bottom: solid 1px transparent; border-bottom-color: transparent; }
    .submenu.fullscreen a:hover strong { border-bottom-color: #034798; }
/**/
.submenu.fullscreen .brands { flex: 1 1 100%; }
    .submenu.fullscreen .brands p { text-align: center; }
    .submenu.fullscreen .brands a.flx_itm { flex: 0 1 auto; position: relative; height: 8rem; aspect-ratio: 3/2; padding: 0; margin: 0.5rem 1rem; }
        .submenu.fullscreen .brands a.flx_itm img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90%; height: 90%; object-fit: contain; }
        .submenu.fullscreen .brands a.flx_itm:hover img { transform: translate(-50%,-60%); }
/**/
/*#||###############################################*/
/*#|VARIABILE con solo logo|########################*/
header.logo_only { z-index:16; padding: 2rem 0;}
    header.logo_only .main_menu .logo { padding-right: 0; border-right: none; }
    header.logo_only .head_container { position: relative; top: unset; left: unset; width: 100%; height: auto; transform: none; z-index: 3; padding: 0; overflow-y: auto; display: block; flex-flow: unset; justify-content: unset; }
/*#||###############################################*/
/*--------------------------------------------------*/
/*#||###############################################*/
/*- STILI Comuni: tutti gli schermi DESKTOP --------*/
@media (min-width: 769px) {
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI Comuni: tutti gli schermi PORTABLE -------*/
@media (max-width: 768px) {
    /*#||###############################################*/
    .main_menu.mobile { z-index: 2; }
    header .background_closing_label { background: #fff; }
    /*#||###############################################*/
    .head_container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; transform: translateY(-130%); z-index: 3; padding: 4rem 2rem 8rem 2rem; overflow-y: auto; display: flex; flex-flow: column; justify-content: space-evenly;}
    #mobile_submenu_trigger:checked ~ .head_container { transform: translateY(0); }
    /*#||###############################################*/
    .head_container .main_menu, .head_container .submenu.hamburger { height: auto; flex: 1 1 auto; }
    .head_container .submenu.hamburger { position: relative; top: unset; left: unset; transform: unset; }
        .head_container .main_menu .d_flx.j_between, .head_container .submenu.hamburger .d_flx.absolut_cntr { display: flex; flex-flow: column; align-content: flex-start; align-items: flex-start; position: relative; top: unset; left: unset; transform: unset; flex-wrap: wrap; height: 100%; justify-content: space-evenly;}
            .head_container .main_menu .d_flx *, .head_container .submenu.hamburger .d_flx.absolut_cntr * { display: block; text-align: left; font-family: rubik-bold, sans-serif; }
    .head_container nav .font_sz_var_03, .head_container nav .font_sz_var_04 { font-size: 2rem; }
    .head_container nav .d_flx a { font-size: 2rem; }
    /*#||###############################################*/
    /*#|SOTTOMENU|######################################*/
    .head_container .submenu {  left: unset; right: 0; transform: translateX(110%); z-index: 5; }
    #nuovo_submenu_trigger:checked ~ .head_container .submenu.nuovo, #usatokm0_submenu_trigger:checked ~ .head_container .submenu.usatokm0 { transform: translateX(0); }
    .submenu.fullscreen .brands a.flx_itm { height: 6rem; }
    /*#||###############################################*/
}
/*#||###############################################*/
/*--------------------------------------------------*/
/*#||###############################################*/
/*- STILI ESCLUSIVI GRANDI SCHERMI -----------------*/
@media (min-width: 1281px) {
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI SCHERMI MEDI --------------------------*/
@media (min-width: 1025px) and (max-width: 1280px) {
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI PICCOLI SCHERMI --------------------------*/
@media (min-width: 769px) and (max-width: 1024px) {
    /*#||###############################################*/
    header .main_menu .voice_item span { font-size: 1.6rem; }
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI TABLET -----------------------------------*/
@media (min-width: 481px) and (max-width: 768px) {
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI MOBILE -----------------------------------*/
@media (max-width: 480px) {
    /*#||###############################################*/
    .submenu.fullscreen a { flex-basis: auto;}
    /*#||###############################################*/
    header { padding: 1rem 0; }
}
/*--------------------------------------------------*/
