/* RESPONSIVE */





/*---------------------------------------------------*/
/*     ENTRE 1025 et 1440 = LAPTOPS                  */
/*---------------------------------------------------*/
/*
@media screen and (min-width: 1025px) and (max-width: 1440px) {
    
    
}
*/

/*---------------------------------------------------*/
/*     ENTRE 1025 et 1280 = LAPTOPS                  */
/*---------------------------------------------------*/

@media screen and (min-width: 1025px) and (max-width: 1200px) {

    .owl, .customNav1, .customNav2, .customNav3 { display: none; }
    .galerie { display:block; }
    
}


/*---------------------------------------------------*/
/*     IPAD                                  */
/*---------------------------------------------------*/
@media screen and (min-width: 761px) and (max-width: 1024px) {
    
    #menu-hamburger {
        position:fixed;
        top: 0.25rem;right: 0px;
        width: 120px;
    }
    #menu-langSwitcher { display:block; }
    #menu-langSwitcher-2 { display:none; }

    #menu-contenu { width:250%; }
    .menu-element { font-size: 30px; }

    #splash { 
        background-image: url(imgs/starryVault002.jpg);
        background-position: center bottom;  
        background-size: 125%;
    }
    #menu-logo-utsv, #splash-logo-utsv { width: 100%; }

    .bullet { width:24px;height:24px; }

    .intro-keyword-title { font-size:28px; }
    .intro-keyword-subtitle { font-size:16px; }

    .categorie { padding: 3rem; }
    .chapter, .bouton-conteneur, .chapter-header2 { width:100%;max-width:640px; }
    .chapter-content, .chapter-content-2 {
        max-width: 760px;
        -webkit-columns: 1;
         -moz-columns: 1;
              columns: 1;
    }
    .chapter-focus-beige, .chapter-focus-jaune, .chapter-focus-tomato, .chapter-focus-vert {
        max-width: 475px;
    }   

    .chapter-header2 { font-size:42px; }
    .nav-header { font-size:36px; }


    .owl, .customNav1, .customNav2, .customNav3 { display: none; }
    .galerie { display:block; }


    .pied-citation { 
        float:none;padding-left:3rem;width:100%;
        padding-bottom: 0rem; 
        min-height: 250px;
        padding-right: 0;
    }
    .chapter-focus-pied { top: 5rem; }

}
/*---------------------------------------------------*/
/*     < 760 = SMALL                       */
/*---------------------------------------------------*/

@media screen and (min-width: 641px) and (max-width: 760px) {

    #menu-hamburger {
        position:fixed;
        top: 0.25rem;right: 0px;
        width: 100px;
    }
    #menu-langSwitcher { display:block;right:2.75rem; }
    #menu-langSwitcher-2 { display:none; }

    #menu-contenu { width:260%; }
    .menu-element { font-size: 28px; }

    #splash { 
        background-image: url(imgs/starryVault002.jpg);
        background-position: center bottom; 
        background-size: 110%;
    }

    #menu-logo-utsv, #splash-logo-utsv { width: 100%; }

    #splash-logo { display:none; }
    #splash-logo2 { display:block; }

    .bullet { width:24px;height:24px; }

    .intro-keyword-title { font-size:22px; }
    .intro-keyword-subtitle { font-size:14px; }

    .categorie { padding: 3rem; }
    .chapter, .chapter-header2 { width:100%;max-width:600px; }
    .chapter-content, .chapter-content-2 {
        max-width: 640px;
        -webkit-columns: 1;
         -moz-columns: 1;
              columns: 1;
    }
    .chapter-focus-beige, .chapter-focus-jaune, .chapter-focus-tomato, .chapter-focus-vert {
        max-width: 475px;
    }   

    .chapter-header2 { font-size:36px; }
    .nav-header { font-size:32px;min-height: 100px;height:130px; }
    .nav-header-logo { top: 18px;width:130px; }

    .owl, .customNav1, .customNav2, .customNav3 { display: none; }
    .galerie { display:block; }

    .pied-citation { 
        float:none;padding-left:3rem;width:100%;
        padding-bottom: 0rem; 
        min-height: 250px;
        padding-right: 0;
    }
    .chapter-focus-pied { top: 5rem; }
   
}
/*---------------------------------------------------*/
/*     360 à 640 = SMALL                       */
/*---------------------------------------------------*/

@media screen and (min-width: 361px) and (max-width: 640px) {

    #menu-hamburger {
        position:fixed;
        top: 0.25rem;right: 10px;
        width:100px;height:100px;
    }
    #menu-hamburger .icon { stroke-width: 3; }
    #menu-langSwitcher { display:none; }
    #menu-langSwitcher-2 { display:block; }
    
    
    #menu-contenu { width:100%;padding-top:50px; }
    .menu-element { font-size: 28px; }


    /*    a { font-size:15px; } */

    #splash { 
        background-image: url(imgs/starryVault002.jpg);
        background-position: center bottom; 
    }
    #menu-logo-utsv, #splash-logo-utsv { width: 100%;padding-bottom:0.5rem; }
    
    #nav { display:none; }

    #menu-title, #splash-title { top: 0.5rem;width: calc(100% - 6rem);height: auto;padding: 1rem; }
    .splash-title { margin-bottom: 15px;font-size: 24px; }
    .splash-subtitle { font-size: 18px; }

    #splash-logo { display:none; }
    #splash-logo2 { display:block;bottom: -3.5rem; }

    .bullet { width:24px;height:24px; }

    #intro-keywords-conteneur { width:95%; }
    /* .intro-keyword { width:30%; } */
    .intro-keyword-title { font-size:18px; }
    .intro-keyword-subtitle { font-size:13px; }

    #intro-copy { left:8%;width:88%;padding:1.5rem;font-size: 16px;line-height:1.3em; }
    .intro-copy-title { font-size:22px; }

    #pied.categorie { padding:7px !important;padding-bottom:75px; }
    .chapter, .chapter-header2 { width:100%; }
    .chapter-header {
        font-size:28px;
        padding:20px 30px;
    }
    .nav-header { min-height: 100px;height:110px; }
    .chapter-title { padding: 1.5rem 30px 0.5rem 30px; }
    .chapter-subtitle { padding:0 30px;font-size:15px; }
    .chapter-content, .chapter-content-2 {
        -webkit-columns: 1;
         -moz-columns: 1;
              columns: 1;
        padding:30px;
        text-align: left;
	    text-justify: inter-word;
        font-size:15px;
    }
    .chapter-focus-beige, .chapter-focus-jaune, .chapter-focus-tomato, .chapter-focus-vert {
        max-width: 475px;
    }   
    .chapter-header2 { font-size:28px;padding-left:30px; }
    .chapter-exergue, .chapter-pleine-largeur { padding:0 15px; }
    .legende-pleine-largeur2 { padding:0 15px; }

    .nav-header { padding-left: 30px;font-size:24px; }
    .nav-header-logo { top: 25px;width:100px; }

    .owl, .customNav1, .customNav2, .customNav3 { display: none; }
    .galerie { display:block; }
    .galerie-vignette, .galerie-vignette-unit { width: 49%;margin:5px 0.5%; }

    .vignette-video { width: 100%; }
    .pied-citation { 
        float:none;padding-left:30px;width:100%;
        padding-bottom: 0rem; 
        min-height: 250px;
        padding-right: 0;
        font-size: 26px;
    }
    .chapter-focus-beige, .chapter-focus-jaune, .chapter-focus-tomato, .chapter-focus-vert { margin-top:0rem;padding:30px; }
    .chapter-focus-pied { top: 3rem;padding-left:30px; }
    .bouton-conteneur { width:calc(100% - 60px); }
    .bouton { margin-top:-2.5rem; }
}

/*---------------------------------------------------*/
/*     < 360 = SMALL                       */
/*---------------------------------------------------*/

@media screen and (max-width: 360px) {

    /*    a { font-size:15px; } */

    #menu-hamburger {
        position:fixed;
        top: 0.25rem;right: 0.25rem;
        width:70px;height:70px;
    }
    #menu-hamburger .icon { stroke-width: 3; }
    #menu-langSwitcher { display:none; }
    #menu-langSwitcher-2 { display:block; }

    #menu-contenu { width:100%;padding-top:50px; }
    .menu-element { font-size: 24px; }

    #splash { 
        background-image: url(imgs/starryVault002.jpg);
        background-position: center bottom; 
    }
    #menu-logo-utsv, #splash-logo-utsv { width: 100%;padding-bottom:0.5rem; }

    #nav { display:none; }

    #menu-title, #splash-title { top: 0.5rem;width: calc(100% - 3rem);left: 1.5rem;height: auto;padding: 1rem; }
    .splash-title { margin-bottom: 15px;font-size: 24px; }
    .splash-subtitle { font-size: 18px; }

    #splash-logo { display:none; }
    #splash-logo2 { display:block;bottom: -3.5rem; }

    .bullet { width:24px;height:24px; }

    #intro-keywords-conteneur { width:95%; }
    /* .intro-keyword { width:30%; } */
    .intro-keyword-title { font-size:18px; }
    .intro-keyword-subtitle { font-size:13px; }

    #intro-copy { left:8%;width:88%;padding:1.5rem;font-size: 16px;line-height:1.3em; }
    .intro-copy-title { font-size:22px; }

    #pied.categorie {padding:7px !important;padding-bottom:75px; }
    .chapter, .chapter-header2 { width:100%; }
    .chapter-header {
        font-size:28px;
        padding:20px 30px;
    }
    .nav-header { min-height: 100px;height:80px; }
    .nav-header-logo { top: 25px;width:100px; }
    .chapter-title { padding: 1.5rem 30px 0.5rem 30px; }
    .chapter-subtitle { padding:0 30px;font-size:15px; }
    .chapter-content, .chapter-content-2 {
        -webkit-columns: 1;
         -moz-columns: 1;
              columns: 1;
        padding:30px;
        text-align: left;
	    text-justify: inter-word;
        font-size:15px;
    }
    .chapter-focus-beige, .chapter-focus-jaune, .chapter-focus-tomato, .chapter-focus-vert {
        max-width: 475px;
    }   
    .chapter-header2 { font-size:28px;padding-left:30px; }
    .chapter-exergue, .chapter-pleine-largeur { padding:0 15px; }
    .legende-pleine-largeur2 { padding:0 15px; }

    .nav-header { padding-left: 30px;font-size:22px; }

    .vignette-video { width: 100%; }

    .owl, .customNav1, .customNav2, .customNav3 { display: none; }
    .galerie { display:block; }
    .galerie-vignette, .galerie-vignette-unit { width: 49%;margin:5px 0.5%; }

    .pied-citation { 
        float:none;padding-left:30px;width:100%;
        padding-bottom: 0rem; 
        min-height: 250px;
        padding-right: 0;
        font-size: 26px;
    }
    .chapter-focus-beige, .chapter-focus-jaune, .chapter-focus-tomato, .chapter-focus-vert { margin-top:0rem;padding:30px; }
    .chapter-focus-pied { top: 3rem;padding-left:30px; }
    .bouton-conteneur { width:calc(100% - 60px); }
    .bouton { margin-top:-2.5rem; }
}