/*****************************************************************************************************************************/
.show       {display: inline-block;}
.hidden     {display: none;}
a           {color: white; text-decoration: none;}
a:visited   {text-decoration: none;}
ul          {list-style-type: none; padding: 0;}
.cent       {height: 100%; width: 100%;}

/* TOUT /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
html{
height: 100%; 
margin: 0; 
padding: 0;/*
overflow: hidden;*/
background-color: #272727;/*
user-select: none;*/
-webkit-text-size-adjust: 100%;
}

/*
.grid-menu > div,
.grid > div,
.grid-footer > div,
.grid-links> div,
.grid-a > div{
background-color: #83c9ff0e;
border: solid 1px rgba(211, 211, 211, 0.116);}
*/
.grid/*,
.grid-footer*/{
display: grid;
grid-template-columns: 1fr 75% 1fr;
grid-template-rows: 1fr;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.grid-menu{
display: grid;
grid-template-columns: 30% 70%;
grid-template-rows: 1fr;
height: 6%;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.grid{
height: 90.2%;}

/* BODY /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
body{
position: relative; 
margin: 0 auto; 
padding: 0; 
width: 100%;
min-height: 100%;
color: white; 
font-family: Cambria, Arial, Helvetica, sans-serif;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.body-site{
position: relative;/*
overflow: hidden;*/
background-color: #272727;
z-index: 0;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#body{
width: 100%;
height: 94%;
position: absolute;
top: 6.0%;
background-color: #333333;}






























/* ANIMATIONS ///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@keyframes move
{
    0%  {transform: translateX(0px);}
    100%{transform: translateX(6px);}
}
@keyframes slide-open
{
    0%  {width: 0%; opacity: 1.0;}
    100%{width: 315px;}
}
@keyframes slide-close
{
    0%  {width: 315px;}
    100%{width: 0%;}
}
@keyframes slide-open2
{
    0%  {left: 0%;}
    100%{left: 316px;}
}
@keyframes slide-close2
{
    0%  {left: 316px;}
    100%{left: 0%;}
}
@keyframes fade
{
    0%  {opacity: 0;}
    100%{opacity: 1.0;}
}