@media (max-width: 1440px) {
.full {
        display: none;
}

nav.mobile {
        position: fixed;
        display: block;
        height: 48px;
}

nav.mobile > div {
        position: absolute;
        float: none;
        height: 38px;
}

.logo {
        left: 5px;
}

.nav-collapse {
        top: 5px;
        right: 5px;
}

.nav-collapse > i {
        position: absolute;
        top: calc(50% - 7px);
        right: 0;
        padding-right: 10px;
}

.mobile .logo > a{
        margin-top: 0;
        height: 40px;
        width: auto;
}

#sub-menu{
        position: fixed;
        top: 48px;
        background-color: white;
        width: 100%;
        height: 100%;
        left: 0;
}

#sub-menu ul{
        width: 100%;
}

#sub-menu ul li{
        padding: 10px ;
        width: 100%;
        text-align: center;
        box-shadow: inset 0 0 1px rgba(0,0,0,0.5);
}

.scroll-to-up{
        display: none;
}

main {
        overflow-y: auto;
}

article {
        padding: 20px;
}

.icon-right-open-big {
        display: none;
}

.edtudes section article{
    background-color: rgba(255,255,255, .5);
}

article.def-descr {
       background-color: rgba(113, 206, 225, .6);
}

article.black {
        background-color: rgba(0,0,0, .5);
        color: #fff !important;
}

article.white {
        background-color: rgba(255,255,255, .5);
        color: #000;
}

section.section-1 article,
section.section-2 article,
section.section-3 article,
section.section-4 article,
section.section-5 article,
section.section-6 article {
        width: 320px;
        left: 0;
        top: 20%;
        margin: auto;
}

section.section-1 article.def-descr,
section.section-2 article.def-descr,
section.section-3 article.def-descr,
section.section-4 article.def-descr,
section.section-5 article.def-descr,
section.section-6 article.def-descr {
        width: 320px;
        margin: auto;
        position: absolute;
        top: 30%;
        left: 0;
        right: 0;
}

section.section-1 article.def-descrv {    
    top: 23%;
}

.edtudes .section-1 article,
.edtudes .section-2 article{
    top: 10%;
}

.edtudes .section-3 article {
    top: 30%;
}

section.section-1 article.def-descr h2,
section.section-2 article.def-descr h2,
section.section-3 article.def-descr h2,
section.section-4 article.def-descr h2,
section.section-5 article.def-descr h2,
section.section-6 article.def-descr h2 {
        font-size: 1.5em;
}

section.section-2 article > .image,
section.section-3 article > .image,
section.section-4 article > .image,
section.section-5 article > .image,
section.section-6 article > .image {
        display: none;
        margin: auto;
        left: 0;
        height: 360px;
        width: 360px;
}

.com section article > p{
        padding-bottom: 10px;
}

.com section.section-1 article h2 {
        font-size: 1.2em;
}

form > input{
        width: inherit;
}

section .controller {
    top: calc(50% + 300px);
    left: calc(50% - 35px);
}

.edtudes  section > article > h2, .page-etudes section > article > h2{
        font-size: 2.3em;
}

.edtudes .section-1 .twentytwenty-wrapper{
        width: 600px;
}

.edtudes .section-4{
        display: none;
}

.edtudes section.section-1 article,
.edtudes section.section-2 article,
.edtudes section.section-3 article,
.edtudes section.section-4 article {
        width: inherit;
}

.edtudes ul.list-image .image{
        width: 320px;
}

.com section.section-1 article{
        top: calc(50% - 100px);
        background-color: rgba(113, 206, 225, .6);
        border-radius: 5px;
}
}

@media screen and (max-width: 720px) {
.edtudes section.section-1 article,
.edtudes section.section-2 article,
.edtudes section.section-3 article,
.edtudes section.section-4 article {
        width: 95%;
}

footer p {
        font-size: 0.8em;
}

section.section-1 article,
section.section-2 article,
section.section-3 article,
section.section-4 article,
section.section-5 article,
section.section-6 article {
        top: 15%;
}
}

@media screen and (max-width: 625px) {
.section-1 .twentytwenty-wrapper {
        width: 450px !important;
}

.edtudes section > article > h2 {
        font-size: 1.5em;
}

.edtudes section > article > ul li {
        font-size: 1em !important;
}

.edtudes section > article > p {
        font-size: 1em !important;
}
section.section-1 article,
section.section-2 article,
section.section-3 article,
section.section-4 article,
section.section-5 article,
section.section-6 article {
        top: 13%;
}

section.section-1 article h2,
section.section-2 article h2,
section.section-3 article h2,
section.section-4 article h2,
section.section-5 article h2,
section.section-6 article h2 {
        font-size: 1.2em;
}

section.section-1 article p,
section.section-2 article p,
section.section-3 article p,
section.section-4 article p,
section.section-5 article p,
section.section-6 article p {
        font-size: 0.8em;
}

section.section-1 article,
section.section-2 article,
section.section-3 article,
section.section-4 article,
section.section-5 article,
section.section-6 article {
        width: 300px !important;
        padding: 15px;
}

section.section-1 article.def-descrv {
    top: 50% !important;
}
}

@media screen and (max-width: 525px) {
.section-1 .twentytwenty-wrapper {
    width: 350px !important;
}

.edtudes .section-1 article,
.edtudes .section-2 article{
    top: 0%;
}

.edtudes .section-3 article {
    top: 10%;
}
}

@media screen and (max-width: 400px) {
.section-1 .twentytwenty-wrapper {
        width: 300px !important;
}

.edtudes section.section-1 article,
.edtudes section.section-2 article,
.edtudes section.section-3 article,
.edtudes section.section-4 article {
        width: 92%;
}
}

@media screen and (max-width: 360px) {
.edtudes section.section-1 article,
.edtudes section.section-2 article,
.edtudes section.section-3 article,
.edtudes section.section-4 article {
        width: 90%;
}

ul.list-image .image {
        width: 290px !important;
}
}

@media screen and (max-width: 350px) {
section.section-1 article.def-descrv {    
        padding: 5px !important;
}


section.section-1 article.def-descr,
section.section-2 article.def-descr,
section.section-3 article.def-descr,
section.section-4 article.def-descr,
section.section-5 article.def-descr,
section.section-6 article.def-descr {
        width: 300px !important;
        padding: 5px;
}
}

@media screen and (max-height: 1000px) {
section.section-1 article.def-descrf {
        top: 10% !important;  
}
}

@media screen and (max-height: 680px) {
.section-1 .twentytwenty-wrapper {
        width: 70% !important;
}

.section-2 .twentytwenty-wrapper {
        width: 90%;
        margin: 0 auto;
}

.edtudes section > article > h2 {
        font-size: 1.2em;
}

.edtudes section > article > ul li {
        font-size: 0.8em !important;
}

.edtudes section > article > p {
        font-size: 0.8em !important;
}

section.section-1 article.def-descrf {
        top: 17% !important;  
}
}

@media screen and (max-height: 590px) {
section.section-1 article,
section.section-2 article,
section.section-3 article,
section.section-4 article,
section.section-5 article,
section.section-6 article {
        width: 320px;
        padding-right: inherit;
}

section.section-1 article.def-descrv {    
        position: relative; 
        left: 0;
        width: 500px;
        padding: 5px 15px;
}

section.section-1 article.def-descr,
section.section-2 article.def-descr,
section.section-3 article.def-descr,
section.section-4 article.def-descr,
section.section-5 article.def-descr,
section.section-6 article.def-descr {
        width: 320px;
        position: absolute;
        top: 30%;
}

section.section-1 article.def-descr h2,
section.section-2 article.def-descr h2,
section.section-3 article.def-descr h2,
section.section-4 article.def-descr h2,
section.section-5 article.def-descr h2,
section.section-6 article.def-descr h2 {
    font-size: 1.2em;
}

section.section-1 article.def-descr p,
section.section-2 article.def-descr p,
section.section-3 article.def-descr p,
section.section-4 article.def-descr p,
section.section-5 article.def-descr p,
section.section-6 article.def-descr p {
    font-size: 0.8em;
}

section.section-1 article h2,
section.section-2 article h2,
section.section-3 article h2,
section.section-4 article h2,
section.section-5 article h2,
section.section-6 article h2 {
        font-size: 1.3em;
}

section.section-1 article p,
section.section-2 article p,
section.section-3 article p,
section.section-4 article p,
section.section-5 article p,
section.section-6 article p {
        font-size: 0.9em;
}

section.section-1 article.def-descrf {
        top: 15%;  
}
   
.com section article {
    top: calc(50% - 70px) !important;
}
}
    
@media screen and (max-height: 500px) {

section.section-1 article,
section.section-2 article,
section.section-3 article,
section.section-4 article,
section.section-5 article,
section.section-6 article {
        width: 320px;
        padding-right: inherit;
        top: 30%;
}
.edtudes section article {
    width: 80% !important;
}
#compare-1 {
    display: none;
}

#compare-2 {
    display: none;
}
}

@media screen and (max-height: 400px) {

section.section-1 article.def-descr,
section.section-2 article.def-descr,
section.section-3 article.def-descr,
section.section-4 article.def-descr,
section.section-5 article.def-descr,
section.section-6 article.def-descr {
        width: 320px;
        position: absolute;
        top: 25%;
}

section.section-1 article.def-descrv {    
        width: 500px;
}  
    
.edtudes section > article > h2 {
        font-size: 1em;
}

section.section-1 article.def-descrv {
        top: 15% !important;
    }
}

@media screen and (max-height: 325px) {
section.section-1 article,
section.section-2 article,
section.section-3 article,
section.section-4 article,
section.section-5 article,
section.section-6 article { 
        padding: 10px;
}

section.section-1 article.def-descrv {    
    top: 15%;
}
}

@media screen and (min-width: 1500px) {
.edtudes section > article > h2 {
        font-size: 1.7em;
}
}

@media screen and (min-width: 2000px) {
.edtudes section > article > h2 {
        font-size: 2em;
}
}

@media  screen and (max-width: 1440px) {
    section.section-1 article.left,
    section.section-2 article.left,
    section.section-3 article.left,
    section.section-4 article.left,
    section.section-5 article.left {
        margin-left: 10%; 
}

    section.section-1 article.right,
    section.section-2 article.right,
    section.section-3 article.right,
    section.section-4 article.right,
    section.section-5 article.right {
    margin-right: 10%; 
}
}

@media  all and (orientation: portrait) {
    section.section-1 article,
    section.section-2 article,
    section.section-3 article,
    section.section-4 article,
    section.section-5 article {
    margin: auto !important; 
}

section.section-1 article.def-descr,
section.section-2 article.def-descr,
section.section-3 article.def-descr,
section.section-4 article.def-descr,
section.section-5 article.def-descr,
section.section-6 article.def-descr {
        top: 60%;
}

section.section-1 article.def-descrv {
    top: 30%;
}

section.section-1 article.def-descrf {
        top: 30%;  
}

.home section.section-1{
        background-image:url('../img/elissys_main_mobile.jpg');
}
.edtudes .wrapper {
        background-image:url('../img/elissys_laboratory_mobile.jpg');
}
.chevaux section.section-1 {
        background-image:url('../img/elissys_black_mobile.jpg');
}
.chevaux section.section-2 {
        background-image:url('../img/elissys_rude_mob2.jpg');
}
.chevaux section.section-3 {
        background-image:url('../img/elissys_brown-haired_mob2.jpg');
}
.chevaux section.section-4 {
        background-image:url('../img/elissys_brune_mob.jpg');
}
.chevaux section.section-5 {
        background-image:url('../img/elissys_couple_girl2.jpg');
}
.visage section.section-1 {
        background-image:url('../img/elissys_la_regeneration_mobile.jpg');
}
.visage section.section-2 {
        background-image:url('../img/elissys_les_cremes_2.jpg');
}
.visage section.section-3 {
        background-image:url('../img/elissys_les_masques2.jpg');
}
.visage section.section-4 {
        background-image:url('../img/elissys_le_gommage2.jpg');
}
.visage section.section-5 {
        background-image:url('../img/elissys_la_lotion2.jpg');
}
.corps section.section-1 {
        background-image:url('../img/elissys_les_prods_du_corps_mobile.jpg');
}
.corps section.section-2 {
        background-image:url('../img/elissys_les_creme2.jpg');
}
.corps section.section-3 {
        background-image:url('../img/elissys_la_lotion_m2.jpg');
}
.corps section.section-4 {
        background-image:url('../img/elissys_le_gel_douche2.jpg');
}
.corps section.section-5 {
        background-image:url('../img/elissys_le_peeling2.jpg');
}
.mains section.section-1 {
        background-image:url('../img/elissys_la_beaute_mobile.jpg');
}
.mains section.section-2 {
        background-image:url('../img/elissys_la_creme_m4.jpg');
}
.mains section.section-3 {
        background-image:url('../img/elissys_le_savon2.jpg');
}
.mains section.section-4 {
        background-image:url('../img/elissys_le_gommage_6.jpg');
}
.mains section.section-5 {
        background-image:url('../img/elissys_les_masques_4.jpg');
}
.avis section {
        background-image:url('../img/elissys_production_mobile.jpg');
}
.com section {
        background-image:url('../img/elissys_communication_background_mobile.jpg');
}
}