﻿/*#||###############################################*/
/*# STILI MULTISCHERMO #############################*/
/*#||###############################################*/
/*#||###############################################*/
header { position: fixed; top: 0; left: 0; width: 100%; height: auto; z-index: 15; }
    /*#||###############################################*/
    header .contained { position: relative; z-index: 3; }
        header .contained:after { content: ''; display: block; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%); width: 100vw; height: 2rem; background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); opacity: 0.1; z-index: 3; }
        header .contained:before { content: ''; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background: #fff; z-index: 2; }
        header .contained * { z-index: 5; }
        header .contained a.logo { flex: 0 1 10%; }
        header .contained nav.menu_voices { flex: 0 1 70%; }
        header .contained nav.side_ctas { flex: 0 1 20%; }
        /**/
        header .contained a { cursor: pointer; }
            header .contained a.logo { height: 7rem; aspect-ratio: 100/85; }
            header .contained a span { text-transform: uppercase; font-size: 2.4rem; }
            header .contained a.inactive { opacity: 0.5; cursor: initial; }
            header .contained a:hover span { text-decoration: underline; }
            header .contained a.inactive:hover span { text-decoration: none; }
    /*#||###############################################*/
    /*#|Ctas|###########################################*/
    header .side_ctas { height: inherit; }
        header .side_ctas .item { cursor: pointer; padding: 0 1.5rem; height: 100%; border-left: solid 1px #ccc; }
            /**/
            header .side_ctas .item.profilo { flex: 0 1 60%; }
            header .side_ctas .item.lang, header .side_ctas .item.hamb_menu, header .side_ctas .item.alert { flex: 0 1 20%; }
            /**/
            header .side_ctas .item.profilo b { }
            header .side_ctas .item.profilo b { margin-right: 0.5rem; }
            header .side_ctas .item.profilo:hover b { text-decoration: underline; }
/**/
.item.lang .image { height: 2rem; aspect-ratio: 15/10; border-radius: 0.5rem; overflow: hidden; }
.item.lang i.absolut_cntr { transform: translate(-50%,50%); }
.item.lang:hover i.absolut_cntr { transform: translate(-50%,60%); }
/**/
header .side_ctas .item.alert { }
    header .side_ctas .item.alert .bkg_clr_bw_fff { height: 3.5rem; aspect-ratio: 1/1; border-radius: 50%; }
        header .side_ctas .item.alert .bkg_clr_bw_fff b { }
        header .side_ctas .item.alert .bkg_clr_bw_fff i { position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); }
    header .side_ctas .item.alert:hover .bkg_clr_bw_fff i { transform: translate(-50%,-50%) rotate(35deg); }
/*#||###############################################*/
/*#|Sottomenu|######################################*/
.submenu { position: absolute; top: 0; right: 0; height: 100vh; width: 100%; max-width: 40rem; background: #fff; padding: 7rem 2rem 2rem 2rem; overflow-y: auto; z-index: 2; transform: translateX(110%); }
    .submenu.active { transform: translateX(0); }
    .submenu .title { padding: 2rem 0; border-bottom: solid 1px #ccc; }
        .submenu .title .closer { cursor: pointer; }
    .submenu nav { padding-bottom: 1rem; border-bottom: solid 1px #ccc; margin-bottom: 1rem; }
        .submenu nav a { display: block; margin: 1rem auto; width: 100%; }
            .submenu nav a:hover { text-decoration: underline; }
    /*#||###############################################*/
    /*#|Alerts|#########################################*/
    .submenu.alerts { }
        .submenu.alerts .item { padding-bottom: 2rem; border-bottom: solid 1px #ccc; margin-bottom: 1rem; }
            .submenu.alerts .item:last-child { border-bottom-color: transparent; }
            .submenu.alerts .item .titolo { }
                .submenu.alerts .item .titolo p { }
                    .submenu.alerts .item .titolo p * { display: block; }
                .submenu.alerts .item .titolo i { }
            .submenu.alerts .item.to_read .titolo i { color: #F00001; }
            .submenu.alerts .item.read .titolo i { color: #BCBCBC; }
            .submenu.alerts .item .copy { margin: 1rem auto; width: 100%; }
                .submenu.alerts .item .copy p { }
            .submenu.alerts .item .cta { }
/*#||###############################################*/

/*#||###############################################*/
/*--------------------------------------------------*/
/*#||###############################################*/
/*- STILI Comuni: tutti gli schermi DESKTOP --------*/
@media (min-width: 769px) {
    /*#||###############################################*/
    .submenu .title { flex-flow: row-reverse; }
    .submenu nav a, .submenu .info { text-align: right; }
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI Comuni: tutti gli schermi PORTABLE -------*/
@media (max-width: 768px) {
    /*#||###############################################*/
    header .contained nav.side_ctas { flex: 0 1 50%; }
    /**/
    header .side_ctas .item.profilo { flex: 0 1 40%; }
    header .side_ctas .item.lang, header .side_ctas .item.hamb_menu, header .side_ctas .item.alert { flex: 0 1 30%; }
    /**/
    header .side_ctas .item { cursor: pointer; padding: 0 0.5rem; height: 100%; border-left: solid 1px #ccc; }
    header .contained nav.menu_voices { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background: #fff; z-index: 1; flex-flow: column; transform: translateY(-110%); }
    header .contained nav.menu_voices.active {transform: translateY(0); }
        header .contained nav.menu_voices a { width: 100%; padding: 0 2rem; }
        header .contained nav.menu_voices .lang { width: 100%; padding: 0 2rem; }
            header .contained nav.menu_voices .lang .image.absolut_cntr { left: 2rem; transform: translate(0,-50%); }
            header .contained nav.menu_voices .lang i.absolut_cntr { left: 2rem; transform: translate(200%,-50%) rotate(-90deg); }
    /*#||###############################################*/
}
/*#||###############################################*/
/*--------------------------------------------------*/
/*#||###############################################*/
/*- 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) {
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI TABLET -----------------------------------*/
@media (min-width: 481px) and (max-width: 768px) {
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI MOBILE -----------------------------------*/
@media (max-width: 480px) {
    /*#||###############################################*/
}
/*--------------------------------------------------*/
