@media (min-width: 916px){ /*1539px*/
    #wheelPopup.recentered #wheelsView{ width: 100%; }

}

@media (max-width: 915px){ /*tablet + mobile common */


}

@media (min-width: 568px) and (max-width: 915px) and (orientation: landscape){

    #wheelPopup{ padding-left: calc( var(--wheelctWidthTB) / 3 ); }
    #wheelPopup ovl{ 
        background-position: top calc( var(--wheelctWidthTB) * 1.68 / 4.5 * -1 ) left calc( var(--wheelctWidthTB) * 1.68 / 2.1 * -1 );
        background-size: calc( var(--wheelctWidthTB) * 1.68 );      
        animation: ovlzoom_h 0.75s linear both; animation-delay: 0.4s;
    }
    @keyframes ovlzoom_h{
        from { background-size: 50%;  }
        to { background-size: calc( var(--wheelctWidthTB) * 1.68 );  }
    }
    #wheelPopup in{ 
        width: 76vw; height: 90vh;
        background-position: center left calc( var(--wheelctWidthTB) * 1.68 / 2.5 * -1 );
        background-size: calc( var(--wheelctWidthTB) * 1.68 );      
        animation: inzoom_v 0.75s linear both; animation-delay: 0.2s;
    }
    @keyframes inzoom_v{
        from { background-size: 50%;  }
        to { background-size: calc( var(--wheelctWidthTB) * 1.68 );  }
    }
    #wheelsView{ height: var(--wheelctHeightTB); width: calc( var(--wheelctWidthTB) - ( var(--wheelctWidthTB) / 3 ) ); }
    #wheelPopup.recentered #wheelsView{ margin-left: 0; width: 100%; }
    #wheelPopup #sideblock .mascott{ width: 18em; }
    #wheelscontenaire{ width: var(--wheelctWidthTB); height: var(--wheelctHeightTB); }
    #wheelscontenaire .overlay{ width: var(--wheelctWidthTB); height: var(--wheelctHeightTB); }
}


@media (max-width: 567px) and (orientation: portrait){

    #wheelPopup{ padding-left: 0; padding-top: calc( var(--wheelctWidthMB) / 3 ); }
    #wheelPopup.recentered{ padding-top: 0; }
    #wheelPopup ovl{ 
        /*background-position: top calc( var(--wheelctWidthMB) * 1.68 / 4.5 * -1 ) left calc( var(--wheelctWidthMB) * 1.68 / 2.1 * -1 );*/
        background-position: left calc( var(--wheelctHeightMB) * 1.68 / 3 * -1 ) top calc( var(--wheelctHeightMB) * 1.68 / 3 * -1 );
        background-size: calc( var(--wheelctWidthMB) * 1.68 ); border-radius: 5vw;
        animation: ovlzoom_v 0.75s linear both; animation-delay: 0.4s;
    }
    @keyframes ovlzoom_v{
        from { background-size: 50%;  }
        to { background-size: calc( var(--wheelctHeightMB) * 1.68 );  }
    }
    #wheelPopup in{ 
        flex-direction: column; width: 90vw; height: 82vh; margin-left: 0; 
        background-position: center top calc( var(--wheelctHeightMB) * 1.68 / 2.5 * -1 );
        background-size: calc( var(--wheelctHeightMB) * 1.68 ); border-radius: 5vw;
        animation: inzoom_v 0.75s linear both; animation-delay: 0.2s;
    }
    @keyframes inzoom_v{
        from { background-size: 50%;  }
        to { background-size: calc( var(--wheelctHeightMB) * 1.68 );  }
    }
    
    #wheelPopup #sideblock{ width: 100%; align-items: center; overflow: hidden; }
    #wheelPopup #sideblock #winnersList{ width: 100%; overflow: hidden; margin-left: 0; mask-image: linear-gradient(to right, transparent 0%, black 50%, transparent 100% ); }
    #wheelPopup #tools{ top: calc( var(--wheelctHeightMB) - 4em ); }
    #wheelPopup.recentered #tools{ top: -0.9em; }

    #wheelsView{ flex-direction: column; height: calc( var(--wheelctWidthMB) - (var(--wheelctWidthMB) / 3) ); }
    #wheelPopup.recentered #wheelsView{ height: 100%; }
    #wheelPopup #sideblock #logo{ font-size: 0.88em; }
    #wheelscontenaire{ width: var(--wheelctWidthMB); height: var(--wheelctHeightMB); animation: wheelroll_v 0.75s linear both!important; }
    @keyframes wheelroll_v {
        from { transform: translate(0, -15vw) rotate(-45deg); opacity: 0; }
        to { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    }
    #wheelscontenaire .overlay{ width: var(--wheelctWidthMB); height: var(--wheelctHeightMB); }
    #wheelscontenaire .overlay #wheels_ampoules{ margin-top: 3%; }

}