@media (min-width: 900px) {
  html {
		font-size:100%;
  }
}

.nav-bottom {
	position: fixed;
	left:0;
	right:0;
	bottom:0;
	height:3.25rem;
	display:flex;
	background-color:rgba(??CodeColorREPRVB??, 0.6);
}

@media (max-width: 500px) {
	.nav-bottom {
		height:5.25rem;
	}
}
@media (min-width: 900px) {
	.nav-bottom {
		height:2.50rem;
	}
}
.nav-top {
	position: fixed;
	top:0;
  left:0;
	right:0;
	bottom:0;
	height:3.75rem;
	padding:0.3125rem;
	z-index:2;
}

.logo-bottom {
	width:100%;
	justify-content:center !important;
	display:flex;
	position:absolute;
	top:25%;
}

 

/*****************************************************************/

/* Global font family - font size and color for the responses*/
body, td, th, div, p, pre, a, span, li, input, select, textarea, label, legend {
	font-family: arial,tahoma,verdana,sans-serif;
	font-size: 1.0em;
	line-height: 1.2em;
	border-radius: 3px;
	outline: none;
	text-decoration: none;
  }
textarea {
	width:60%;
}

textarea:focus {
	border: 2px solid ??CodeColorREP??;
}

input[type="text"]:focus, input[type="number"]:focus { 
	border: 2px solid ??CodeColorREP??;
}

a:link{
	text-decoration:none;
}
a:hover{
	text-decoration:none;
}
a:visited{
	text-decoration:none;
}

table {
	border-spacing: 0;
	border-radius: 4px;
}



.Titre {
	color: #8093B4;
	font-size: 1.3em;
	padding: 10px 0 10px 0;
	text-align: left;
	line-height: 1.2em;
  text-decoration: underline;
  font-weight: bold;
}

.label {
	color: ??CodeColor??;
	font-size: 14px;
	padding: 10px 0 10px 0;
	text-align: left;
	line-height: 1.2em;
    font-weight: bold;
  }

#headercontent, .framecontainer {
	max-width: 100%;
}

#headercontent {
  background-color: ??BGcolor??;
	background-image: linear-gradient(0deg, rgba(255,255,255,0.7), rgba(255, 255, 255, 0.7)), url('https://moai-surveys.com/Webprod/Resources/_Commun/Ressources/RGPD4.jpg') no-repeat center;
  background-size: cover !important;
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
}

.framecontainer {
	display:flex;
	position:absolute;
	height:100%;
	width:100%;
}

@media (min-width: 1000px) {
  .framecontent {
		max-width:64rem;
	  margin:auto;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		-moz-box-shadow: 2px 2px 8px #9f9f9f;
		-webkit-box-shadow: 2px 2px 8px #9f9f9f;
		box-shadow: 2px 2px 8px #9f9f9f;
	  background-color:rgba(255,255,255, 0.55);
	}  
}
@media (max-width: 1000px) {
  .framecontent {
		max-width:34rem;
	  margin:auto;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		-moz-box-shadow: 2px 2px 8px #9f9f9f;
		-webkit-box-shadow: 2px 2px 8px #9f9f9f;
		box-shadow: 2px 2px 8px #9f9f9f;
	  background-color:rgba(255,255,255, 0.55);
	}
}



  /************************ mainframe structure ******************************************/
 

#mainframe {
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
  
/* header structure */
#headercontainer {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 100%;
	height: 3.5em;
	background-color: #868686;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#868686));
	background-image: -webkit-linear-gradient(top, #000000, #868686);
	background-image: -moz-linear-gradient(top, #000000, #868686);
	background-image: -o-linear-gradient(top, #000000, #868686);
	background-image: -ms-linear-gradient(top, #000000, #868686);
	background-image: linear-gradient(top, #000000, #868686);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#000000', EndColorStr='#868686');
}

#headercontent {
	position: fixed;
	top:0;
  left:0;
	right:0;
	bottom:0;
	background: linear-gradient(0deg, rgba(255,255,255,0.7), rgba(255, 255, 255, 0.2)), url('https://moai-surveys.com/Webprod/Resources/_Commun/Ressources/RGPD4.png') no-repeat center;
  background-size:cover !important;
  }

#header{
	width: 100%;
}

#header ul{
	display: block;
}

#header, #header li{
	list-style: none;
	display: inline-block;
	margin: 0;
	padding: 0;
}
  
/* navigation button structure */
#navcontainer{
	display: inline-block;
	margin: 0;
	padding: 0;
	width: 100%;
}

#navcontent {
	max-width: 100%;
	margin: 0 auto;
	padding: 1.25rem 2.125rem 1.25rem 2.125rem;
}

#navcontentleft {
	display:inline;
	float: left;
	width: 10%;
	text-align: left;
	padding: 0;
}
  


/* ------------------------------Width of the container MOBILE */
@media (max-width: 640px) {
  #navcontentmiddle {
		display:inline;
		width: 96%;
		text-align: center;
		padding: 0;
		line-height: 1em;
  }
}

/* ------------------------------Width of the container PC*/
@media (min-width: 641px) {
  #navcontentmiddle {
		display:inline;
		width: 80%;
		text-align: center;
		padding: 0;
  }
}


/* ---------------------------------------- */ 
#navcontentright {
	display:inline;
	float: left;
	width: 10%;
	text-align: right;
	padding: 0;
}
#navseparator {
	display: inline;
	margin: 0 4% 0 4%;
}



/* ------------------------------IMAGE MOBILE */
@media (max-width: 640px) {
	#responsiveMOBILE
		 {  
		 		display: none;
		 	}
	#responsiveLOGO{
  	width: 100%;
  	max-width: 95%;
  	height: auto;
  	align: center;
	}
}
  
/* ------------------------------IMAGE PC*/
@media (min-width: 641px) {
  #responsiveMOBILE  {
		max-width: 100%;
		height: auto;
  }
  
  #responsiveLOGO  {
  	max-width: 100%;
  	height: auto;
  }
  
}

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