body, BODY {scrollbar-3dlight-color:#FFFFFF;
           scrollbar-arrow-color:#483D8B;
           scrollbar-base-color:#000000;
           scrollbar-track-color:#E8F0FC;
           scrollbar-darkshadow-color:#4682B4;
           scrollbar-face-color:#D0E0F8;
           scrollbar-highlight-color:#F0F8FF;
           scrollbar-shadow-color:#B0C4DE;
		   
		   /*text-shadow: 0px 0px 11px rgba(1, 79, 247, 0.75);
		   color: #E0E7F5;*/
		   font-family: Gabriola, Arial;
		   color: #031C79;
		   font-size: 22px;
		   overflow: scroll;
		   max-width:100%;
		   height:auto;

		   }
@media all and (orientation:landscape) and (min-width: 550px) {

body, BODY {
	font-size:18px;
}
}

@media all and (orientation:portrait) and (max-width: 449px) {

body, BODY {
	font-size:18px;
	line-height:1.3em;
}
}

@media only screen and (orientation:portrait) and (min-height: 200px) and (max-height: 567px) {
}

@media all and (max-height: 567px) {
#HNY p {
    font-size: 1.6em;
  animation-duration: 8s, 10s;
  animation-delay: 0s, 8s;
  animation-fill-mode: forwards;
  animation-name: pushdown, disappear;
  animation-iteration-count: 1;

}
}

@keyframes disappear {
0%,40% {top:-10px; opacity:1; line-height: 0.9em;}
41% {top:-20px; opacity:0.5;line-height: 0.4em;}
80% {top:-30px; opacity:0.2; font-size: 0.8em; line-height: 0.2em;}
100% {top:-35px; opacity:0; font-size: 0em; line-height: 0em;}
}


@keyframes pushdown {
  from   {
      top: 50%;
         font-size: 2.1em;
    text-transform: uppercase;
    letter-spacing: 1.6em;
    overflow: hidden;
        width: 100%;
  }
  to  {margin-top:10px;
  font-size: 1.5em;
    line-height: 0.9em;
    letter-spacing: 0.4em;
    width: 100%;
  }
}


@media all and (orientation:portrait) and (min-height: 568px) AND (max-height: 730px) {
#HNY p {
    font-size: 1.6em;
  animation-duration: 8s, 10s;
  animation-delay: 0s, 8s;
  animation-fill-mode: forwards;
  animation-name: bispushdown, bisdisappear;
  animation-iteration-count: 1;

}
}
    @keyframes bisdisappear {
0%,40% {opacity:1; line-height: 0.9em;}
41% {opacity:0.5;}
80% {opacity:0.2;}
100% {opacity:0;}
}


@keyframes bispushdown {
  from   {
      top: 50%;
         font-size: 2.8em;
    text-transform: uppercase;
    letter-spacing: 1.6em;
    overflow: hidden;
        width: 100%;
  }
  to  {margin-top:50px;
  font-size: 1.6em;
    line-height: 0.9em;
    letter-spacing: 0.4em;
    width: 100%;
  }
}


@media all and (orientation:portrait) and (min-height: 731px) AND (max-height: 898px) {
#HNY p {
    font-size: 1.6em;
  animation-duration: 8s, 10s;
  animation-delay: 0s, 8s;
  animation-fill-mode: forwards;
  animation-name: terpushdown, bisdisappear;
  animation-iteration-count: 1;

}
}

@keyframes terpushdown {
  from   {
      top: 50%;
         font-size: 3em;
    text-transform: uppercase;
    letter-spacing: 2em;
    overflow: hidden;
        width: 100%;
  }
  to  {margin-top:100px;
  font-size: 1.6em;
    line-height: 0.9em;
    letter-spacing: 0.4em;
    width: 100%;
  }
}

@media all and (orientation:portrait) and (min-height: 899px) {
#HNY p {
    font-size: 1.6em;
  animation-duration: 8s, 10s;
  animation-delay: 0s, 8s;
  animation-fill-mode: forwards;
  animation-name: quaterpushdown, bisdisappear;
  animation-iteration-count: 1;

}
}

@keyframes quaterpushdown {
  from   {
      top: 50%;
         font-size: 4em;
    text-transform: uppercase;
    letter-spacing: 2em;
    overflow: hidden;
        width: 100%;
  }
  to  {margin-top:200px;
  font-size: 1.6em;
    line-height: 0.9em;
    letter-spacing: 0.4em;
    width: 100%;
  }
}

		   
body a:link, BODY a:link {color: #4E7EEF;
			text-decoration: none;
			}
body a:hover, BODY a:hover {color: #83F7DA;
			font-style: bold;}
body a:visited , BODY a:visited {color: #9D51D6;
				font-style: bold;}
		   
header {	Display:none;
			height:0;
			/*position:absolute;
			top: 0;
			font-size: 14px;
			height: auto;
			min-width: 100%;
			/*z-index: 3000;*/
						/*background-color: #2A63FF;
			background-image:-webkit-linear-gradient(top, #333A40 0%, #2A63FF 100%);
			background-image:linear-gradient(to bottom, #333A40 0%, #2A63FF 100%);*/

			}

#top {
	position:absolute;
	top:0;
	font-size: 1vmin;
	font-size: 1vmax;
	min-height:15px;
	text-align:center;
	z-index:4000;}

#vuheader {	display:none;
			/*position:absolute;
			top: 25px;
			min-height:10px;
			max-height: 57px;
			min-width: auto;
			z-index: 1000;
			overflow:hidden;
		-moz-transition: .8s all .3s;
		-webkit-transition: .8s all .3s;
		transition: .8s all .3s;
			/*background-color: #2A63FF;
			background-image:-webkit-linear-gradient(top, #333A40 0%, #2A63FF 100%);
			background-image:linear-gradient(to bottom, #333A40 0%, #2A63FF 100%);*/

			}

#vuheader:hover { display:none;
			/*top: 30px;
			max-height: 170px;
			min-width: auto;
			z-index: 1000;*/
}

#vufooter { 
			min-height: 55px;
			max-height: 65px;
			min-width: auto;
			z-index: 1000;
			overflow:hidden;
		-moz-transition: .8s all .3s;
		-webkit-transition: .8s all .3s;
		transition: .8s all .3s;
			}

#vufooter:hover {
			/*top: 30px;*/
			max-height: 170px;
			min-width: auto;
			z-index: 1000;
			}
			

	
#vufooter1 { 
			display:none;
						
			}
@media all and (max-height: 567px) {
CENTER {		max-width: 100%;
			top: -20px;
			padding-bottom: 5px;
			height:auto;
		}
}			
CENTER {		max-width: 100%;
			top: 0;
			padding-bottom: 5px;
			height:auto;
		}
		
#block {	max-width: 100%;	
			top:0px;
			bottom: 10px;
			
			
		}


		
  
footer, FOOTER {	
			position:fixed;
			font-family: Gabriola, Arial;
		    font-size: 18px;
			min-height:45px;
			bottom: 0;
			min-width: 100%;
			background-color: #FFFFFF;
			opacity:1;
			filter:alpha(opacity=100);
			z-index:2500;
			/*background-image:-webkit-linear-gradient(bottom, #333A40 0%, #2A63FF 100%);
			background-image:linear-gradient(to top, #333A40 0%, #2A63FF 100%);*/
}

.anim {
        z-index:1500;
}

#HNY p {
    font-size: 1.6em;
  animation-duration: 8s, 10s;
  animation-delay: 0s, 8s;
  animation-fill-mode: forwards;
  animation-name: apushdown, Adisappear;
  animation-iteration-count: 1;

}

@keyframes Adisappear {
0%,40% {top:-10px; opacity:1; line-height: 0.9em;}
41% {top:-20px; opacity:0.5;line-height: 0.4em;}
80% {top:-30px; opacity:0.2; font-size: 0.8em; line-height: 0.2em;}
100% {top:-35px; opacity:0; font-size: 0em; line-height: 0em;}
}


@keyframes apushdown {
  from   {
      top: 50%;
         font-size: 4em;
    text-transform: uppercase;
    letter-spacing: 2em;
    overflow: hidden;
        width: 100%;
  }
  to  {margin-top:10px;
  font-size: 1.6em;
    line-height: 0.9em;
    letter-spacing: 0.4em;
    width: 100%;
  }
}


table
{
    border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
	/*width:610px;
	height:484px;*/
}
td
{
    /*width:610px;*/
	border: none;
}

/*tr
{	width:auto;
	}*/

		   
.italique {font-style: italic;}

.temp {opacity:0;animation:15s hide 1 ;}
@keyframes hide {
0%,99% {opacity:1;}
100% {opacity:0;}
}

.logoform {
	width: 38px;
	height: 34px;
    margin: auto;
    position: absolute;
	z-index:500;
 
}

.logo {
    margin: auto;
    vertical-align: center;
	position: absolute;
	margin-top:50px;
	z-index:500;
 
}

.logobgr {
	margin: auto;
	max-width: 300px;
	height: auto;
	z-index:500;
}


@media all and (orientation:landscape) and (max-device-width: 750px){
.logobgrM {
	min-width: 150px;
	max-width: 250px;
	height: auto;
	z-index:500;
}
}

@media all and (orientation:portrait) and (max-device-width: 449px) and (max-height: 504px) {
#textvariable a {
    line-height: 1em;
}
}

@media all and (orientation:portrait) and (max-device-width: 339px) and (max-height: 504px) {
.logobgrM {
	top: 5%;
	width: 280px;
	height: auto;
	z-index:500;
}

/*#textvariable a {
    line-height: 1em;
}*/
}

@media all and (orientation:portrait) and (max-device-width: 449px) and (max-height: 504px) {
.logobgrM {
	top: 5%;
	width: 300px;
	height: auto;
	z-index:500;
}

/*#textvariable a {
    line-height: 1em;
}*/
}

@media all and (orientation:portrait) and (max-device-width: 550px) and (min-height: 505px){
.logobgrM {
	top: 10%;
	width: 350px;
	height: auto;
	z-index:500;
}
}

@media all and (orientation:portrait) and (max-height: 565px) {
.logobgrM {
	top: 15%;
	
}
}


@media all and (orientation:portrait) and (min-height: 566px) {
.logobgrM {
	top: 25%;
	
}
}


.logobgrM {
	display: block;
    margin-left: auto;
    margin-right: auto; 
	max-width: 300px;
	height: auto;
	z-index:500;
}

@media screen and (orientation:landscape) and (max-width: 750px) {

/* Conteneur principal */
.DEUXoverlay-image {
 margin-top:-20px;
 position: relative;
 width: 100%;
}
/* Image originale */
.DEUXoverlay-image .logobgrM {
 display: block;
 width: auto;
 height: auto;
 opacity:1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 transition: .5s ease;
 -ms-transition: .5s ease;
 -o-transition: .5s ease;
 -moz-transition: .5s ease;
 -webkit-transition: opacity .5s ease;
}
/* Texte original 
.overlay-image .text {
 color: #fff;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}*/
/* Overlay */
.DEUXoverlay-image:hover .logobgrM {
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 z-index: 0;
}

.DEUXoverlay-image:hover a{
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 z-index: 0;
}

.DEUXoverlay-image .Atext {
color: #031C79;
position: absolute;
top: 25%;
margin: auto;
width:100%;
}

.DEUXoverlay-image .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 transition: .5s ease;
  -ms-transition: .5s ease;
 -o-transition: .5s ease;
 -moz-transition: .5s ease;
 -webkit-transition: opacity .5s ease;
}
/* Apparition overlay sur passage souris */
.DEUXoverlay-image:hover .hover {
 opacity: 1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 z-index: 1500;

}

.DEUXoverlay-image:hover .hover a{
 opacity: 1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 z-index: 1500;

}

.DEUXoverlay-image:hover .hover img{
 min-width:10%;
 height:auto;
 opacity: 1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 z-index: 1500;

}

/*.overlay-image:hover .text {
color: #031C79;
font-size: 30px;
top:30px;
left: auto;
right: auto;
}*/



}

@media all and (orientation:landscape) and (max-width: 1000px) {
/* Conteneur principal */
.DEUXoverlay-image {
 position: relative;
 width: 100%;
}
/* Image originale */
.DEUXoverlay-image .logobgrM {
 display: block;
 width: auto;
 height: auto;
 opacity:1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 transition: .5s ease;
 -ms-transition: .5s ease;
 -o-transition: .5s ease;
 -moz-transition: .5s ease;
 -webkit-transition: opacity .5s ease;
}
/* Texte original 
.overlay-image .text {
 color: #fff;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}*/
/* Overlay */
.DEUXoverlay-image:hover .logobgrM {
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 z-index: 0;
}

.DEUXoverlay-image:hover a{
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 z-index: 0;
}

.DEUXoverlay-image .Atext {
color: #031C79;
position: absolute;
top: 25%;
margin: auto;
width:100%;
}

.DEUXoverlay-image .hover {
 position: absolute;
 top: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;
  -ms-transition: .5s ease;
 -o-transition: .5s ease;
 -moz-transition: .5s ease;
 -webkit-transition: opacity .5s ease;
}
/* Apparition overlay sur passage souris */
.DEUXoverlay-image:hover .hover {
 opacity: 1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 z-index: 1500;

}

.DEUXoverlay-image:hover .hover a{
 opacity: 1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 z-index: 1500;

}

.DEUXoverlay-image:hover .hover img{
 min-width:10%;
 height:auto;
 opacity: 1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 z-index: 1500;

}

/*.overlay-image:hover .text {
color: #031C79;
font-size: 30px;
top:30px;
left: auto;
right: auto;
}*/

}

@media all and (orientation:landscape) and (min-width: 1001px) {
/* Conteneur principal */
.DEUXoverlay-image {
 position: relative;
 width: 100%;
}
/* Image originale */
.DEUXoverlay-image .logobgrM {
 display: block;
 width: auto;
 height: auto;
 opacity:1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 transition: .5s ease;
  -ms-transition: .5s ease;
 -o-transition: .5s ease;
 -moz-transition: .5s ease;
 -webkit-transition: opacity .5s ease;
}
/* Texte original 
.overlay-image .text {
 color: #fff;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}*/
/* Overlay */
.DEUXoverlay-image:hover .logobgrM {
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 z-index: 0;
}

.DEUXoverlay-image:hover a{
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 z-index: 0;
}

.DEUXoverlay-image .Atext {
color: #031C79;
position: absolute;
top: 25%;
margin: auto;
width:100%;
}

.DEUXoverlay-image .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 transition: .5s ease;
  -ms-transition: .5s ease;
 -o-transition: .5s ease;
 -moz-transition: .5s ease;
 -webkit-transition: opacity .5s ease;
}
/* Apparition overlay sur passage souris */
.DEUXoverlay-image:hover .hover {
 opacity: 1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 z-index: 1500;

}

.DEUXoverlay-image:hover .hover a{
 opacity: 1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 z-index: 1500;

}

.DEUXoverlay-image:hover .hover img{
 min-width:5%;
 max-width:10%;
 height:auto;
 opacity: 1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 z-index: 1500;

}

/*.overlay-image:hover .text {
color: #031C79;
font-size: 30px;
top:30px;
left: auto;
right: auto;
}*/

}



@media all and (orientation:portrait) {
.Atext {
		display:none;
}

.DEUXoverlay-image .Atext {
	display;none;
}
}



.logoappli {
    /**display: block;
	min-width: 412px;
	max-width: 70%;
	height: auto;
    margin: auto;**/
    max-height: 210px;
	max-width: 207px;
	padding: 2px, 2px, 2px, 2px;
	/*position: absolute;*/
	 /**display : inline-block;**/
	/*padding:10px 0px;*/
	
	
 
}

@media all and (orientation:portrait) and (max-width: 295px) {
/* Conteneur principal */
.overlay-image {
 margin-top:25px;
 position: relative;
 width: 100%;
 margin-bottom:15px;
}
/* Image originale */
.overlay-image .logoappli2 {
 display: block;
 width: 80%;
 height: auto;
 opacity:1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 transition: .5s ease;
  -ms-transition: .5s ease;
 -o-transition: .5s ease;
 -moz-transition: .5s ease;
 -webkit-transition: opacity .5s ease;
}
/* Texte original 
.overlay-image .text {
 color: #fff;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}*/
/* Overlay */
.overlay-image:hover .logoappli2 {
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
}

.overlay-image .text {
color: #031C79;
position: absolute;
text-align:justify;
padding-left:5px;
padding-right:5px;
font-size:16px;
margin: auto;
width:100%;
}

.overlay-image .texta {

color: #4E7EEF;
position: absolute;
text-align:justify;
padding-left:10px;
padding-right:10px;
font-size:16px;
margin: auto;
width:100%;
}

.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 80%;
 width: 80%;
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 transition: .5s ease;
  -ms-transition: .5s ease;
 -o-transition: .5s ease;
 -moz-transition: .5s ease;
 -webkit-transition: opacity .5s ease;
}
/* Apparition overlay sur passage souris */
.overlay-image:hover .hover {
 opacity: 1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 top:-45px;
 font-size:16px;

}

/*.overlay-image:hover .text {
color: #031C79;
font-size: 30px;
top:30px;
left: auto;
right: auto;
}*/

}



@media all and (orientation:portrait) and (max-width: 365px) {
/* Conteneur principal */
.overlay-image {
 margin-top:15px;
 position: relative;
 width: 100%;
}
/* Image originale */
.overlay-image .logoappli2 {
 display: block;
 width: 80%;
 height: auto;
 opacity:1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 transition: .5s ease;
  -ms-transition: .5s ease;
 -o-transition: .5s ease;
 -moz-transition: .5s ease;
 -webkit-transition: opacity .5s ease;
}
/* Texte original 
.overlay-image .text {
 color: #fff;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}*/
/* Overlay */
.overlay-image:hover .logoappli2 {
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
}

.overlay-image .text {
color: #031C79;
position: absolute;
text-align:justify;
padding-left:5px;
padding-right:5px;
font-size:16px;
margin: auto;
width:100%;
}

.overlay-image .texta {

color: #4E7EEF;
position: absolute;
text-align:justify;
padding-left:10px;
padding-right:10px;
font-size:16px;
margin: auto;
width:100%;
}

.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 80%;
 width: 80%;
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 transition: .5s ease;
  -ms-transition: .5s ease;
 -o-transition: .5s ease;
 -moz-transition: .5s ease;
 -webkit-transition: opacity .5s ease;
}
/* Apparition overlay sur passage souris */
.overlay-image:hover .hover {
 opacity: 1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 top:-35px;
 font-size:16px;

}

/*.overlay-image:hover .text {
color: #031C79;
font-size: 30px;
top:30px;
left: auto;
right: auto;
}*/

}

@media all and (orientation:portrait) and (min-width: 366px) {

/* Conteneur principal */
.overlay-image {
 position: relative;
 width: 100%;
}
/* Image originale */
.overlay-image .logoappli2 {
 display: block;
 width: 70%;
 height: auto;
 margin: auto;
 opacity:1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 transition: .5s ease;
  -ms-transition: .5s ease;
 -o-transition: .5s ease;
 -moz-transition: .5s ease;
  -webkit-transition: opacity .5s ease;
}
/* Texte original 
.overlay-image .text {
 color: #fff;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}*/
/* Overlay */
.overlay-image:hover .logoappli2 {
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */


}

.overlay-image .text {
color: #031C79;
position: absolute;
font-size:20px;
text-align:justify;
padding-left:10px;
padding-right:10px;
top: 15%;
margin: auto;
width:100%;
}

.overlay-image .texta {

color: #4E7EEF;
position: absolute;
text-align:justify;
padding-left:10px;
padding-right:10px;
top: 15%;
margin: auto;
width:auto;
}

.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 80%;
 width: 80%;
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 transition: .5s ease;
  -ms-transition: .5s ease;
 -o-transition: .5s ease;
 -moz-transition: .5s ease;
 -webkit-transition: opacity .5s ease;
}
/* Apparition overlay sur passage souris */
.overlay-image:hover .hover {
 opacity: 1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 top:-20px;
 font-size:20px;

}

/*.overlay-image:hover .text {
color: #031C79;
font-size: 30px;
top:30px;
left: auto;
right: auto;
}*/

}

@media all and (orientation:landscape) and (min-device-width: 751px){
/* Conteneur principal */
.overlay-image {
 position: relative;
 width: 80%;
}
/* Image originale */
.overlay-image .logoappli2 {
 
 width: 60%;
 height: auto;
 opacity:1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 transition: .5s ease;
  -ms-transition: .5s ease;
 -o-transition: .5s ease;
 -moz-transition: .5s ease;
 -webkit-transition: opacity .5s ease;
}
/* Texte original 
.overlay-image .text {
 color: #fff;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}*/
/* Overlay */
.overlay-image:hover .logoappli2 {
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */

}

.overlay-image .text {

color: #031C79;
position: absolute;
text-align:justify;
padding-left:10px;
padding-right:10px;
top: 15%;
margin: auto;
width:auto;
}

.overlay-image .texta {

color: #4E7EEF;
position: absolute;
text-align:justify;
padding-left:10px;
padding-right:10px;
top: 15%;
margin: auto;
width:auto;
}

.overlay-image .hover {
 display: absolute;
 top: 0;
 height: 40%;
 width: 40%;
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 transition: .5s ease;
  -ms-transition: .5s ease;
 -o-transition: .5s ease;
 -moz-transition: .5s ease;
 -webkit-transition: opacity .5s ease;
}
/* Apparition overlay sur passage souris */
.overlay-image:hover .hover {
 opacity: 1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 top:-15px;
}

/*.overlay-image:hover .text {
color: #031C79;
font-size: 30px;
top:30px;
left: auto;
right: auto;
}*/

}

@media screen and (orientation:landscape) and (max-width: 750px) and (max-height:550px) {

/* Conteneur principal */
.overlay-image {
 position: relative;
 width: 80%;
}
/* Image originale */
.overlay-image .logoappli2 {
 
 max-width: 60%;
 height: auto;
 opacity:1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 transition: .5s ease;
  -ms-transition: .5s ease;
 -o-transition: .5s ease;
 -moz-transition: .5s ease;
 -webkit-transition: opacity .5s ease;
}
/* Texte original 
.overlay-image .text {
 color: #fff;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}*/
/* Overlay */
.overlay-image:hover .logoappli2 {
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */

}

.overlay-image .text {

color: #031C79;
position: absolute;
text-align:justify;
padding-left:10px;
padding-right:10px;
top: 15%;
margin: auto;
width:auto;
}

.overlay-image .texta {

color: #4E7EEF;
position: absolute;
text-align:justify;
padding-left:10px;
padding-right:10px;
top: 15%;
margin: auto;
width:auto;
}

.overlay-image .hover {
 display: absolute;
 top: 0;
 height: 40%;
 width: 40%;
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 transition: .5s ease;
  -ms-transition: .5s ease;
 -o-transition: .5s ease;
 -moz-transition: .5s ease;
 -webkit-transition: opacity .5s ease;
}
/* Apparition overlay sur passage souris */
.overlay-image:hover .hover {
 opacity: 1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 top:-45px;
}

/*.overlay-image:hover .text {
color: #031C79;
font-size: 30px;
top:30px;
left: auto;
right: auto;
}*/
	
}

.overlay-image:hover .hover {
 top:-25px;
}

.logoappli2 {
    /**display: block;
	min-width: 412px;
	max-width: 70%;
	height: auto;
    margin: auto;*/
    max-height: auto;
	max-width: 80%;
	padding: 2px, 2px, 2px, 2px;
	/*position: absolute;*/
	 /**display : inline-block;
	/*padding:10px 0px;
	opacity:0.99;
	transition: opacity .4s;
	/*filter:alpha(opacity=99);*/
	z-index:1000;
	
 
}

@media all and (orientation:landscape) {

.logoappli3 {
    /**display: block;
	min-width: 412px;
	max-width: 70%;
	height: auto;
    margin: auto;*/
    height: 30%;
	width: 30%;
	padding: 2px, 2px, 2px, 2px;
	/*position: absolute;*/
	 /**display : inline-block;
	/*padding:10px 0px;
	opacity:0.99;
	transition: opacity .4s;
	/*filter:alpha(opacity=99);*/
	z-index:1000;
	
 
}
}

@media all and (orientation:portrait) {

.logoappli3 {
    /**display: block;
	min-width: 412px;
	max-width: 70%;
	height: auto;
    margin: auto;*/
    height: 50%;
	width: 50%;
	padding: 2px, 2px, 2px, 2px;
	/*position: absolute;*/
	 /**display : inline-block;
	/*padding:10px 0px;
	opacity:0.99;
	transition: opacity .4s;
	/*filter:alpha(opacity=99);*/
	z-index:1000;
	
 
}
}


/*img.logoappli2 {
    
	transition: opacity .4s;
	
	
 
}

img.logoappli2:hover {
    
	opacity:0;
	/*filter:alpha(opacity=0);
	
 
}*/


.logo1 {
    /**display: block;
	min-width: 412px;
	max-width: 70%;
	height: auto;
    margin: auto;**/
    clear:both;
	height: 315px;
	width: auto;
	padding: 2px, 2px, 2px, 2px;
	float:right;
	/*position: absolute;*/
	display : inline-block;
	/*padding:10px 0px;*/
	z-index:1000;
	
 
}

.logo2{
	/*width: 610px;*/
	height: 270px;
	/*position: absolute;
	top:-20px;*/
	right:30px;
	/*display :inline-block;*/
	z-index:950;
	/*padding:-30px 0px;
	vertical-align:top:*/
	
	
}

.logo2:hover
{	/*opacity:1;
	filter:alpha(opacity=100);*/
	/*width: 650px;*/
	height: 289px;
	/*top:0;
	left:230px;
	position: absolute;*/
	-moz-transition: .8s all .3s;
	-webkit-transition: .8s all .3s;
	transition: .8s all .3s;
	z-index:950;
	
}

.logo3 {
	width: 310px;
	opacity:0.99;
	filter:alpha(opacity=99);
	/*position: absolute;
	left:280px;
	top :-150px;*/
	display :inline-block;
	z-index:900;
	
}

.logo3:hover
{
	width: 299px;
	opacity:0.99;
	filter:alpha(opacity=99);
	/*top:-155px;
	left:270px;
	position: absolute;*/
	-moz-transition: .8s all .3s;
	-webkit-transition: .8s all .3s;
	transition: .8s all .3s;
	display :inline-block;
	z-index:900;
}

.logo4 {
	/*width: 549px;*/
	height: 262px;
	/*position: relative;
	right:-40px;
	top:-30px;*/
	z-index:950;
	/*padding:-30px 0px;
	vertical-align:top;*/
}

.logo4:hover
{
	/*opacity:1;
	filter:alpha(opacity=100);*/
	/*width: 579px;*/
	height: 282px;
	/*position: relative;
	right:-80px;
	top:-25px;*/
	-moz-transition: .8s all .3s;
	-webkit-transition: .8s all .3s;
	transition: .8s all .3s;
	z-index:1000;
}

.logo5 {
	width: 250px;
	height:auto;
	opacity:0.99;
	filter:alpha(opacity=99);
	/*position: absolute;
	left:280px;
	top :-150px;*/
	display :inline-block;
	
	
}

.logo6 {
	width: 200px;
	height:auto;
	
}

.logo7 {
	width: 30px;
	height:26px;
	
}

a img { 
	border: none;
}
		   
h1 {	text-align: center;
	font-size: 15pt;
}

h2 {
	font-size: 10pt;
}

	div {height: relative;}
	/*div#menu {position: absolute; width: 470;
			margin-left: 320px;
			top: 10px;}
	div#menu0 {position: absolute; width: 500;
			margin-left: 850px;
			top: 10px;}
	div#menu1 {position: absolute;
			z-index: 8;}
	div#menu2 {position: fixed;
		top:50;
		right: 0;
		z-index:950;}
	div#menu3 {position: fixed;
			left: 0;
			top:50;
			z-index:500;
			}
	div#menu4 {position: fixed;
			top: 0;
			z-index:700;}*/
	
	div#IMAGEUP {text-align:center;
			}
	div#IMAGEDOWN {margin-top:10px;
			text-align:center;
			}
@media all and (min-width:311px) {
.txtscr2 {
	display:none;
}	
}

@media all and (max-width:310px) {
.txtscr {

	display:none;

}

.txtscr2 {
	margin-top:-120px;
	text-align:right;
	font-size:.9rem;
	line-height:1.2rem;
}
}	
			
@media all and (max-width:350px) {
.txtscr {

	text-align:right;
	/*font-size:.7rem;*/
	line-height:1.2rem;

}
}			
			
@media all and (max-width:750px) {
.txtscr {
	margin-top:-130px;
	text-align:right;
	/*font-size:.7rem;*/
	line-height:1.2rem;
	margin-bottom:130px;
}
}			

.txtscr {
	margin-top:-150px;
	text-align:right;
	/*font-size:.7rem;*/
	line-height:1.2rem;
	margin-bottom:110px;
}
			
#textheader {
			display: none;
			}			
			
#textfooter {
			height: auto;
			}
			
#textfooter1 {
			display: none;
			}


@media all and (orientation:landscape) and (min-width: 850px) {

#textvariable {
			display: none;
}

}
			
#textvariable {
			height: auto;
}

#text2variable {
	display:none;
}

/*menu-demo2*/	
#menu-demo2, #menu-demo2 ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu-demo2 li{
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}
#menu-demo2 ul li{
display:inherit;
border-radius:0;
}
#menu-demo2 ul li:hover{
border-radius:0;
}
#menu-demo2 ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu-demo2 ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
max-height:25em;
}
/* background des liens menus */
#menu-demo2 li:first-child{
background-color: #2A63FF;
background-image:-webkit-linear-gradient(top, #2A63FF 0%, #333A40 100%);
background-image:linear-gradient(to bottom, #2A63FF 0%, #333A40 100%);
}
#menu-demo2 li:nth-child(2){
background-color: #2A63FF;
background-image:-webkit-linear-gradient(top, #2A63FF 0%, #333A40 100%);
background-image:linear-gradient(to bottom, #2A63FF 0%, #333A40 100%);
}
#menu-demo2 li:nth-child(3){
background-color: #2A63FF;
background-image:-webkit-linear-gradient(top, #2A63FF 0%, #333A40 100%);
background-image:linear-gradient(to bottom, #2A63FF 0%, #333A40 100%);
}
#menu-demo2 li:nth-child(4){
background-color: #2A63FF;
background-image:-webkit-linear-gradient(top, #2A63FF 0%, #333A40 100%);
background-image:linear-gradient(to bottom, #2A63FF 0%, #333A40 100%);
}
#menu-demo2 li:last-child{
background-color: #83F7DA;
background-image:-webkit-linear-gradient(top, #83F7DA 0%, #4FA18C 100%);
background-image:linear-gradient(to bottom, #83F7DA 0%, #4FA18C 100%);
}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:#1239A4;
}
#menu-demo2 li:nth-child(2) li{
background:#1239A4;
}
#menu-demo2 li:nth-child(3) li{
background:#1239A4;
}
#menu-demo2 li:nth-child(4) li{
background:#1239A4;
}
#menu-demo2 li:last-child li{
background:#1239A4;
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:#83F7DA;
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:#83F7DA;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#83F7DA;
}
#menu-demo2 li:nth-child(4):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#83F7DA;
}
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:#1239A4;
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 10px;
min-width:90px;
max-width:130px;
min-height:350px;
color:#fff;
font-family:gabriola, arial;
}
#menu-demo2 ul a{
padding:8px 0;
}
#menu-demo2 li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#fff;
}

/*menu-demo3*/
#menu-demo3{
padding:0;
margin:0;
list-style:none;
text-align:left;
}

#menu-demo3 ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu-demo3 li{
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}
#menu-demo3 ul li{
display:inherit;
border-radius:0;
}
#menu-demo3 ul li:hover{
border-radius:0;
}
#menu-demo3 ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu-demo3 ul{
position:absolute;
z-index: 1000;
max-height: 0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo3 li:hover ul{
max-height:25em;
}

/* background des liens menus */
#menu-demo3 li:first-child{
background:white url(/img/2017/petitcarremenu.png) no-repeat;
background-position:center center;
min-width:70px;
min-height:70px;}

/* background des liens sous menus */
#menu-demo3 li:first-child li{
background:none;
}
#menu-demo3 li:nth-child(2) li{
background:#1239A4;
}
#menu-demo3 li:nth-child(3) li{
background:#1239A4;
}
#menu-demo3 li:nth-child(4) li{
background:#1239A4;
}
#menu-demo3 li:last-child li{
background:#94A1D0;
}
/* background des liens menus et sous menus au survol */
#menu-demo3 li:first-child:hover, #menu-demo3 li:first-child li:hover{
background:none;
}
#menu-demo3 li:nth-child(2):hover, #menu-demo3 li:nth-child(2) li:hover{
background:#94A1D0;
}
#menu-demo3 li:nth-child(3):hover, #menu-demo3 li:nth-child(3) li:hover{
background:#1239A4;
}
#menu-demo3 li:nth-child(4):hover, #menu-demo3 li:nth-child(3) li:hover{
background:#1239A4;
}
#menu-demo3 li:last-child:hover, #menu-demo3 li:last-child li:hover{
background:#1239A4;
}
/* les a href */

#menu-demo3 a{
text-decoration:none;
display:block;
padding:8px 10px;
min-height:50px;
max-width:300px;
color:#fff;
font-family:gabriola, arial;
font-size:18px;
}
#menu-demo3 ul a{
padding:8px 0;
}
#menu-demo3 li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu-demo3 li:hover a, #menu-demo3 li li:hover a{
color:#fff;
}

/*@media all and max-width: 329px) {
#menu-demo3     {
        display: none; 
    }

#menu-demo4     {
        display: none; 
    }


}*/

@media all and (max-width: 190px) {
#menu-demo5     {
        display: none; 
    }

#menu-demo6    {
        display: none; 
    }			
}

/*menu-demo4*/
	
#menu-demo4{
padding:0;
right:10px;
top:0;
position:absolute;
list-style:none;
text-align:right;
}

#menu-demo4 ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu-demo4 li{
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}
#menu-demo4 ul li{
display:inherit;
border-radius:0;
}
#menu-demo4 ul li:hover{
border-radius:0;
}
#menu-demo4 ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu-demo4 ul{
position:absolute;
z-index: 1500;
max-height: 0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo4 li:hover ul{
max-height:25em;
}

/* background des liens menus */
#menu-demo4 li:first-child{
background: url(/img/2017/carremains.png) no-repeat;
background-position:center center;
min-width:70px;
min-height:70px;}

/* background des liens sous menus */
#menu-demo4 li:first-child li{
background:none;

}
#menu-demo4 li:nth-child(2) li{
background:#1239A4;

}
#menu-demo4 li:nth-child(3) li{
background:#1239A4;
}
#menu-demo4 li:nth-child(4) li{
background:#1239A4;
}
#menu-demo4 li:last-child li{
background:#94A1D0;
}
/* background des liens menus et sous menus au survol */ 
#menu-demo4 li:first-child:hover, #menu-demo4 li:first-child li:hover{
background:none;
}
#menu-demo4 li:nth-child(2):hover, #menu-demo4 li:nth-child(2) li:hover{
background:#94A1D0;
}
#menu-demo4 li:nth-child(3):hover, #menu-demo4 li:nth-child(3) li:hover{
background:#1239A4;
}
#menu-demo4 li:nth-child(4):hover, #menu-demo4 li:nth-child(3) li:hover{
background:#1239A4;
}
#menu-demo4 li:last-child:hover, #menu-demo4 li:last-child li:hover{
background:#1239A4;
}
/* les a href */

#menu-demo4 a{
text-decoration:none;
display:block;
padding:8px 10px;
min-height:90px;
min-width:100px;
max-width:300px;
color:#fff;
font-family:gabriola, arial;
font-size:18px;
}
#menu-demo4 ul a{
padding:8px 0;
}
#menu-demo4 li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu-demo4 li:hover a, #menu-demo4 li li:hover a{
color:#fff;
}

/*menu-demo5*/
#menu-demo5{
padding:0;
bottom:0;
list-style:none;
text-align:left;
}

#menu-demo5 ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu-demo5 li{
display:inline-block;
position:relative;
border-radius: 0 0 5px 5px;
}
#menu-demo5 ul li{
display:inherit;
border-radius:0;
}
#menu-demo5 ul li:hover{
border-radius:0;
}
#menu-demo5 ul li:first-child{
border-radius:5px 5px 0 0;
}
#menu-demo5 ul{
position:absolute;
z-index: 1000;
max-height: 0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s; top:0;
-webkit-transition: .8s all .3s; top:0;
transition: .8s all .3s; top:0;
}
#menu-demo5 li:hover ul{
max-height:25em;
top:-300px;
}

/* background des liens menus */
#menu-demo5 li:first-child{
background:white url(/img/2017/petitcarremenu.png) no-repeat;
background-size:contain;
background-position:center center;
min-width:20px;
max-width:40px;
max-height:40px;
}

/* background des liens sous menus */
#menu-demo5 li:first-child li{
background:none;
}
#menu-demo5 li:nth-child(2) li{
background:#1239A4;
}
#menu-demo5 li:nth-child(3) li{
background:#1239A4;
}
#menu-demo5 li:nth-child(4) li{
background:#1239A4;
}
#menu-demo5 li:last-child li{
background:#94A1D0;
}
/* background des liens menus et sous menus au survol */
#menu-demo5 li:first-child:hover, #menu-demo5 li:first-child li:hover{
background:none;
}
#menu-demo5 li:nth-child(2):hover, #menu-demo5 li:nth-child(2) li:hover{
background:#94A1D0;
}
#menu-demo5 li:nth-child(3):hover, #menu-demo5 li:nth-child(3) li:hover{
background:#1239A4;
}
#menu-demo5 li:nth-child(4):hover, #menu-demo5 li:nth-child(3) li:hover{
background:#1239A4;
}
#menu-demo5 li:last-child:hover, #menu-demo5 li:last-child li:hover{
background:#1239A4;
}
/* les a href */

#menu-demo5 a{
text-decoration:none;
display:block;
padding:5px 7px;
min-height:40px;
min-width:70px;
max-width:100px;
color:#fff;
font-family:gabriola, arial;
font-size:10px;
font-style:bold;
}
#menu-demo5 ul a{
padding:5px 0;
}
#menu-demo5 li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu-demo5 li:hover a, #menu-demo5 li li:hover a{
color:#fff;
}

/*menu-demo6*/

#menu-demo6{
padding:0;
right:10px;
bottom:0;
position:absolute;
list-style:none;
text-align:right;
}

#menu-demo6 ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu-demo6 li{
display:inline-block;
position:relative;
border-radius: 0 0 5px 5px;
}
#menu-demo6 ul li{
display:inherit;
border-radius:0;
}
#menu-demo6 ul li:hover{
border-radius:0;
}
#menu-demo6 ul li:first-child{
border-radius:5px 5px 0 0;
}
#menu-demo6 ul{
position:absolute;
z-index: 1500;
max-height: 0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s; top:0;
-webkit-transition: .8s all .3s; top:0;
transition: .8s all .3s; top:0;
}
#menu-demo6 li:hover ul{
max-height:25em;
top:-120px;
}

/* background des liens menus */ 
#menu-demo6 li:first-child{
background: url(/img/2017/carremains.png) no-repeat;
background-size:contain;
background-position:center center;
max-width:45px;
max-height:45px;}



/* background des liens sous menus */
#menu-demo6 li:first-child li{
background:none;

}
#menu-demo6 li:nth-child(2) li{
background:#1239A4;

}
#menu-demo6 li:nth-child(3) li{
background:#1239A4;
}
#menu-demo6 li:nth-child(4) li{
background:#1239A4;
}
#menu-demo6 li:last-child li{
background:#94A1D0;
}
/* background des liens menus et sous menus au survol */
#menu-demo6 li:first-child:hover, #menu-demo6 li:first-child li:hover{
background:none;
}
#menu-demo6 li:nth-child(2):hover, #menu-demo6 li:nth-child(2) li:hover{
background:#94A1D0;
}
#menu-demo6 li:nth-child(3):hover, #menu-demo6 li:nth-child(3) li:hover{
background:#1239A4;
}
#menu-demo6 li:nth-child(4):hover, #menu-demo6 li:nth-child(3) li:hover{
background:#1239A4;
}
#menu-demo6 li:last-child:hover, #menu-demo6 li:last-child li:hover{
background:#1239A4;
}
/* les a href */

#menu-demo6 a{
text-decoration:none;
display:block;
padding:5px 7px;
height:auto;
width:70px;
color:#fff;
font-family:gabriola, arial;
font-size:10px;
font-style:bold;
}
#menu-demo6 ul a{
padding:5px 0;
}
#menu-demo6 li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu-demo6 li:hover a, #menu-demo6 li li:hover a{
color:#fff;
}



@media all and (min-width: 650px) {
div#colonne1 {
    width:80%;
	margin: auto;
	padding: 5px;
	font-size:18px;
	text-align:justify;


}
}

div#colonne1 {
    width:95%;
	font-size:20px;
	margin: auto;
	padding: 5px;
	text-align:justify;


}

div#colonne2 {
	margin: auto;
	padding: 5px;


	}

div#colonne2:hover {
	display:none;
	
	}

div#souscolonnes {
	clear: both;
	float: left;
	width: auto;
	height: 150px;
    margin: auto;
	padding: 5px;
	}
	
div#colonneu{
	max-width: 90%;
	margin: 0 auto;
	margin-top: 40px;
	padding: 15px;
	background: rgba(85, 109, 198, 0.2);
	border-radius: 25px;
	
}

#colonneu a:link {color:#014FF7;}

.container {
    height: 436px;   
    width: 549px;
    text-align: center;
   
    border: 1px solid red; /* Afin de bien voir que c'est centré dans la boîboîte */
}

.container .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.container img {
    width: auto;
	height: auto;
	vertical-align: middle;
}

div#corps {
       top:5px;
	   margin:auto;
	   width: 95%;
	   position : relative;
        }

div#corps2 {
      clear: both;
	   position : relative;
	   top:0px;
        }	

		
fieldset {
 
 margin-bottom:5px;
 border:none;
 
 }

legend {
 color: #4E7EEF;
 font-weight:bold
 }

label {
 color:#031C79;
 text-align:justify;
 margin-top:5px;
 display:block;
 }

label.inline {
 display:inline;
 margin-right:10px;
 }
 
input, textarea, select {
 background-color:#FFF3F3;
 padding:3px;

 }

input[type=text], input[type=email], textarea, select {
 min-width:300px;
 max-width:350px;
 border:1px solid #4E7EEF;
 border-radius:5px;
 box-shadow:1px 1px 2px #4E7EEF inset;
}

input[type="radio"] {
  display: none;
}
input[type="radio"] + label {
  position: relative;
  padding-left: 1.3rem;
}
input[type="radio"] + label::before,
input[type="radio"] + label::after {
  display: block;
  position: absolute;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  content:'';
  width: 1rem;
  height: 1rem; 
  border-radius: 1rem;
}
input[type="radio"] + label::before {
  border: 1px solid #00B7E8;
  background-color: #eee;
  
}
input[type="radio"]:checked + label::after {
  background-color: #00B7E8;
}

input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label {
  box-sizing: border-box;
  display: inline-block;
  width: 3rem;
  height: 1.5rem;
  border-radius: 1.5rem;
  padding:2px;
  background-color: #c0ceda ;
  transition: all 0.5s ;
}
input[type="checkbox"] + label::before {
  box-sizing: border-box;
  display: block;
  content: "";
  height: calc(1.5rem - 4px);
  width: calc(1.5rem - 4px);
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.5s ;
}
input[type="checkbox"]:checked + label {
  background-color: #00B7E8 ;
}

input[type="checkbox"]:invalid + label {
  background-color: red ;
}

input[type="checkbox"]:checked + label::before {
  margin-left: 1.5rem ;
}

input:valid {
   box-shadow: 0 0 2px 1px green;
}

input:invalid {
   box-shadow: 0 0 2px 1px red;
}

input[type=text]:-moz-read-only {
  background-color: #00B7E8 ;
  color:#031C79;
}
input[type=text]:read-only {
  background-color: #00B7E8 ;
  color:#031C79;
}

input[type=email]:-moz-read-only {
  background-color: #00B7E8 ;
  color:#031C79;
}

input[type=email]:read-only {
  background-color: #00B7E8 ;
  color:#031C79;
}

textarea:-moz-read-only {
  background-color: #00B7E8 ;
  color:#031C79;
}

textarea:read-only {
  background-color: #00B7E8 ;
  color:#031C79;
}

select {
 margin-top:10px;
 }

 
input[type=submit], input[type=reset] {
 min-width:80px;
 max-width:130px;
 margin-left:5px;
 box-shadow:1px 1px 1px #4E7EEF;
 cursor:pointer;
 }
 
@media all and (max-width:350px) {
input, textarea, select {
 padding:3px;
 border:1px solid #4E7EEF;
 border-radius:5px;
 box-shadow:1px 1px 2px #4E7EEF inset;
 }
input[type=text], input[type=email], textarea, select {
  min-width:250px;
 max-width:280px;
}
}

@media all and (max-width:280px) {
input, textarea, select {
 padding:3px;
 border:1px solid #4E7EEF;
 border-radius:5px;
 box-shadow:1px 1px 2px #4E7EEF inset;
 }
input[type=text], input[type=email], textarea, select {
 min-width:190px;
 max-width:200px;
}
}