
.he site{ direction: rtl; }
.he #product h1 .sep{ margin-left: 0; margin-right: 0.5em; }
.he #concerns{ flex-direction: row-reverse; }


@media (min-width: 1280px){ /*desktop*/
    desktop,.desktop{ display: auto; }
    mobile,.mobile{ display: none; }
    .cont{ margin: 0 20%; }
}

@media (max-width: 1280px){ /*tout mobile*/
    desktop,.desktop{ display: none; }
    mobile,.mobile{ display: auto; }
    cont, .cont{ width: 100vw; margin: 0; padding: 2em; }

    header{ padding: 0 1em; }

    menu.mobilep{ 
        display: none; position: fixed; left:0; margin:0; padding:0; background: #444;  
        top: 4vw; z-index: 40; width: 100vw; overflow-y: auto; color: #000; font-size: 1.5em;
    }
    menu.mobilep in{ 
        display: flex; flex: none; flex-direction: column;  align-items: stretch; 
        height: calc( 100vh - 10vw ); height: -webkit-calc( 100vh - 10vw ); 
    }
    menu.mobilep in a{ text-decoration: none; padding: 0.25em; border-bottom: 1px solid #040404; }


    toolbar{ 
        display: flex; flex: none; justify-content: space-between; align-items: center; width: 100%; height: 4em;
        border-bottom: 1px solid #ccc; background: #fff; color: #3b3838; font-size: 0.4em;
    }
    toolbar cell{ min-width: 6vw;  padding: 0 0.5em; }
    toolbar .btback{ text-decoration: none; color: #000; }
    toolbar .material-icons{ color: #000; font-size: 2em; }
    .he toolbar .material-icons{ transform: scale(-1,1); }
    toolbar h1{ text-align: center; }

    

}

@media (max-width: 1280px) and (min-width:600px) and (orientation: landscape){ /* and (orientation: landscape)*/

    site{ font-size: 1.75vw; }
    menu.mobilep{ width: 50vw; }
    .he menu.mobilep{ left: 50vw; }

    #presentation txt{ font-size: 1.25em; }

    #regPop in iframe{ width: 50vw; height: 60vh; }

}

@media (max-width: 1280px) and (orientation: portrait), (max-width:600px) and (orientation: landscape){  /* and (orientation: portrait)*/
    
    site{ font-size: 4vw; }

    .social{ flex-wrap: wrap; }
    .social .tel{ width: 100%; margin: 0; order: 2; }

    #splash{ font-size: 1.1em; }
    #splash h1{ padding: 0 1em; }

    #presentation span{ flex-direction: column; align-items: center; }
    #presentation txt{ padding: 2em; }

    #learnmore{ flex-direction: column; }
    #learnmore txt span{ text-align: center; }
    #learnmore txt span ul{ padding: 0; }
    #learnmore pic{ font-size: 0.76em; }
    #learnmore pic h1{ font-size: 1.23em; width: 50%; text-align: center; }

    #product{ padding: 2em; }
    #product article .piczone img:nth-child(n+2){ display: none; }

    #photos in{
        grid-template-columns: 50% 50%;
        grid-auto-rows: 10em 10em;
    }
    #photos in a:last-child{ grid-column: 1 / span 2; }
    
    #techspecs article{ width: 96%; }
    #techspecs{ font-size: 1.2em; padding: 2em; }

    footer{ flex-direction: column; text-align: center; }
    footer nav{ margin: 1em 0; }

    #regPop in iframe{ width: 88vw; height: 65vh; }
    #regPop close a{ transform: translate( 1em, -1em); }
}