*{ 
    -moz-box-sizing: border-box; box-sizing: border-box; 
    scrollbar-color: rgba(217, 217, 217, .3) transparent; scrollbar-width: thin; 
}
:-moz-window-inactive {
    scrollbar-color: rgba(217, 217, 217, .15) transparent;
}
html,body{ 
	margin:0; padding:0; color: var(--main-color); background-color: var(--main-back);
}
site{
    display: flex; flex: none; flex-direction: column; align-items: stretch; width: 100vw; height: 100vh; overflow-x: hidden; overflow-y: auto;
    font-size: 0.82vw; font-size: 0.733vw; font-family: "Nunito", serif;
}
span,cell{ display: inline-block; }
menu{ padding: 0; margin: 0; }
icon{ display: inline-block; background: no-repeat center center; background-size: contain; }

.cta{ 
    text-decoration: none; display:flex; flex: none; align-items: center; color: var(--reverse-text); background: var(--main-color); padding: 0.5em 1em; border-radius: 1.5em;
    font-family: "Chakra Petch", serif; 
}
.cta lab{ display: inline-block; flex: 1; }

/*------------  HEADER ------------------*/
header{ 
    display:flex; flex: none; align-items: center; justify-content: space-around;  position: fixed; 
    width: 100%; height: 6em; padding: 1em; z-index: 60; /*transition: margin-top 0.25s;*/ 
    background: var(--main-color); color: var(--reverse-text);
}
header .lb{ display:flex; flex: none; align-items: center; }
header #burger a{ display: flex; flex: none; align-items: center;  text-decoration: none; color: var(--reverse-text); font-size: 2.5em; margin-right: 0.5em; }
header #burger a .material-icons{ font-size: inherit; }
header #titre{
    display:flex; flex: none; align-items: center; font-size: 2em; font-weight: bold; text-decoration: none; color: var(--reverse-text);
}
header #titre img{ background-color: #fff; height: 2em; margin-right: 0.25em; }
header #titre img:first-child{ border-radius: 100%; }
header #titre img:last-child{ border-radius: 1em; }

header #mainMenu{ font-size: 1.2em; }
header #mainMenu a{
    text-decoration: none; margin: 0 1em; font-family: "Chakra Petch", serif; color: var(--reverse-text);
}
header #mainMenu a.in{ color: var(--sec-color); }
header #btZone{ display:flex; flex: none; align-items: center; font-size: 1.25em; }
header #btZone .cnx{
    border: 2px solid var(--reverse-text);
}
header #btZone .inscr{
    background-image: linear-gradient(to bottom right, var(--sec-color), var(--sec-color-grad) ); margin-left: 0.5em;
}
header #btZone .acc{
    background-image: linear-gradient(to bottom right, #ccc, #fff ); font-size: 0.88em; margin-left: 0.5em; padding: 0.25em 0.5em; color: var(--main-color);
}
header #btZone .acc:before{ display: inline-block; content: '\e853'; font-family: 'Material Icons'; font-size: 2.5em; }
header #btZone .acc lab{ margin-left: 0.25em; }

header.floated{}

/*--------------------------------------*/

mainct{ display: flex; flex: none; flex-direction: column; padding-top: 6em; }

.splash{ background: center center no-repeat rgb(149, 149, 233); background-size: cover; max-width: 100vw; }
.splash .in{ display: flex; flex: none; }


/*------------  FOOTER ------------------*/
footer{ 
    display: flex; flex: none; justify-content: space-around; align-items: stretch; text-align: center; 
    font-size: 1.25em;
    background: #000; color: #fff;
}
footer section{ flex: 1; padding: 2em; }
footer #logo{ position: relative; }
footer #logo .l{
    border-radius: 100%; width: 5em; margin-right: 0.25em; background-color: #fff; filter: grayscale(100%);
}
footer #logo .ruban{ width: 1.5em; position: absolute; left: calc( 50% + 0.75em ); top: calc( 50% + 0.75em ); filter: drop-shadow(0 0 3px #000); }

footer #summup{ display: flex; justify-content: center; }
footer #summup nav{ display: flex; flex: none; align-items: center; flex-wrap: wrap; width: 100%; }
footer #summup a{ display: inline-flex; flex: none; align-items: center; width: 48%; text-decoration: none; color: var(--sec-color); margin: 0; }
footer #summup a:before{ content: '\e5cc'; display: inline-block; margin-right: 0.5em; font-family: 'Material Icons';  }

#socialBar{
    display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center;
    position: fixed; top: 0; right: 0; width: 8em; height: 100vh; z-index: 15;
}
#socialBar a{ width: 4em; margin: 0.66em 0; }
#socialBar a img{ width: 100%; }

#socialBar #acessibility{ position: relative; }
#socialBar #acessibility .cta{ font-size: 1.25em; }
#socialBar #acessibility .cta lab{ display: none; }
#socialBar #acessibility menu{ position: absolute; width: 25vw; transform: translateX(-6em); font-size: 0.88rem; }
#socialBar #acessibility menu a, #socialBar #acessibility menu .fontsize{ width: 100%; }
#socialBar #acessibility menu .fontsize a{ width: auto; margin-right: 1em; }

#picview{ 
    display: none; width: 100vw; height: 100vh; 
    position: fixed; top: 0; left: 0; z-index: 100;
    background: center center no-repeat #444e; background-size: contain; 
}

/*--------------------------------------*/