@charset "utf-8";
body, nav,  a  {margin: 0; padding: 0;}
body {font-family:  Calibri;letter-spacing:0.05em;font-size:120%;font-weight:400;line-height:140%;background-image:url(../images/background.jpg);}

a {text-decoration: none;}
.container {
    width: 100%;
    max-width: 100%;
    margin: 10px auto;
}

.container2 {
    /*width: 90%;
    max-width: 100%;
    margin: 10px auto;*/
	width:96%;

	height: 75vh;
    margin: 2%;
    padding: 0;	
    overflow: auto;	
}
/*-------------------------------MENU---------------------------------*/
.toggleMenu {
    display:  none;
    background: #313f61;
    padding: 5px 15px;
    color: #fff;
}
.nav {
    list-style: none;
    *zoom: 1;
	background:#313f61;
	display:inline-block;
	overflow: hidden; 
	position: relative;
    text-align:center;

}
.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    margin: 0 auto;
}
.nav a {
    padding: 5px 15px;
    color:#fff;
}
.nav li {
    position: relative;
}
.nav > li {
    float: left;
    border-top: 0px solid #104336;
}
.nav > li > .parent {
    background-image: url("images/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}
.nav > li.hover .parent {
		color:#fe5722;

}
.nav-bleu :hover {
	color:#fe5722;
	

}
.nav-bleu {
	letter-spacing:0.3em;
	font-weight:600;
	
}

.nav > li > a {
    display: block;
}


@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }

}
/*--------------------------FIN MENU-----------------------------------*/

/*--------------------------SLIDESHOW------------------------------*/

* {box-sizing:border-box}

.mySlides {display:none}
.mySlides2 {display:none}
.mySlides3 {display:none}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}
/* Slideshow container */
.slideshow-container2 {
  max-width: 100%;
  position: relative;
  margin: auto;
}
/* Slideshow container */
.slideshow-container3 {
  max-width: 100%;
  position: relative;
  margin: auto;
}
/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
.text2 {
  color: #f2f2f2;
  font-size: 1.5em;
  padding: 8px 12px;
  position: absolute;
  top: 8px;
  width: 100%;
  text-align: center;
}
.text3 {
  color: #f2f2f2;
  font-size: 1.5em;
  padding: 8px 12px;
  position: absolute;
  top: 8px;
  width: 50%;
  text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
.numbertext2 {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
.numbertext3 {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* The dots/bullets/indicators */
.dot {
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.dot2 {
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.dot3 {
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active {
  background-color: #9dd0cd;
}
.active2 {
  background-color: #9dd0cd;
}
.active3 {
  background-color: #9dd0cd;
}
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1s;
  animation-name: fade;
  animation-duration: 1s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
/*------------------------------FIN SLIDESHOW--------------------------*/


/*---------------------------Bouton HAUT------------------------------*/
a#cRetour{
  border-radius:3px;
  padding:10px;
  font-size:15px;
  text-align:center;
  color:#fff;
  background:rgba(0, 0, 0, 0.25);
  position:fixed;
  right:20px;
  opacity:1;
  z-index:99999;
  transition:all ease-in 0.2s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  text-decoration: none;
}
a#cRetour:before{ content: "\25b2"; }
a#cRetour:hover{
  background:rgba(0, 0, 0, 1);
  transition:all ease-in 0.2s;
}
a#cRetour.cInvisible{
  bottom:-35px;
  opacity:0;
  transition:all ease-in 0.5s;
}

a#cRetour.cVisible{
  bottom:20px;
  opacity:1;
}
/*-------------------------------------------FIN Bouton HAUT---------------------------------*/

/*-----------------------CARRES INDEX---------------------------*/
#listemenu {
    height:auto;
	overflow: hidden;
	top:0px;
	left:0px;
	width: 100%; margin:0px auto; 
    position: relative;
    text-align:center;
}

#listemenu2 {
    height:auto;
	overflow: hidden;
	top:0px;
	left:0px;
	width: 100%; margin:0px auto; 
    position: relative;
    text-align:left;
}

.box{ 
	width: 450px; 
	height: auto; 
	margin:0px auto ;
	vertical-align:middle;
	display:inline-block;	 
	overflow: hidden; 
	position: relative;
	text-align:left;
	color:#000;

}

.box2{ 
	width: 600px; 
	height: auto; 
	margin:0px auto ;
	vertical-align:middle;
	display:inline-block;	
	overflow: hidden; 
	position: relative;
	text-align:left;
	color:#000;
}

.box3{ 
	width: 150px; 
	height: auto; 
	margin:0px auto ;
	vertical-align:middle;
	display:inline-block;	
	overflow: hidden; 
	position: relative;
	text-align:left;
	color:#000;
}

.box-texte {
  color: #FFF;
  font-size: 1.2em;
  padding: 5px 5px;
  position:absolute;
  top:0;
}
/*-----------------------FIN CARRES INDEX---------------------------*/


/*-----------------------MISE EN PAGE DU TEXTE----------------------*/
.titre-1em{
		
		font-size: 1em;
		font-weight:900;
		color:#fe5722;
}

.titre-1emb{
		
		font-size: 1em;
		font-weight:900;
		color:#313f61;
}

.titre-1-5em{
		
		font-size: 1.5em;
		color:#fe5722;
}

.titre-2em{
		
		font-size: 2em;
		color:#fe5722;
}

.titre-2-5em{
		
		font-size: 2.5em;
		color:#fe5722;
}

.titre-3em{
		
		font-size: 3em;
		color:#fe5722;
}
/*---------------------- FIN MISE EN PAGE DU TEXTE ------------------*/

/*----------------------- Texte défilant ----------------------------*/
/* Texte défilant */
.messagedefilant {
  display: block;
  margin: 20px auto;
  padding: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 700px;
  height: 60px;
}
 
.messagedefilant div {
  position: absolute;
  min-width: 100%; /* au minimum la largeur du conteneur */
}
 
.messagedefilant div span, 
.messagedefilant div:after {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  white-space: nowrap;
  top:0;
}
 
.messagedefilant div span {
  animation: defilement 10s infinite linear;
  color:#313f61;
}
 
.messagedefilant div:after {
  position: absolute;
  top:0; left:0;
  content:attr(data-text);
  animation: defilement2 10s infinite linear;
  color:#313f61;
}
 
@keyframes defilement {
  0% { margin-left: 0; }
  100% { margin-left: -100%; }
}
 
@keyframes defilement2 {
  0% { margin-left: 100%; }
  100% { margin-left: 0%; }
}

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

body {line-height:160%; }
.box{ width: 325px;}
.box2{ width: 325px;}
.box3{ width: 325px;}
.titre-2-5em{ {line-height:180%; }
.footer {font-size:90%;}
.titre-2-5em{ font-size: 2em; }
.box-texte {font-size:3em }
}

@media  screen and (min-width: 480px) and (max-width: 959px) {

body {line-height:160%; }
.box{ width: 450px;}
.box2{ width: 450px;}
.box3{ width: 450px;}
.titre-2-5em{ {line-height:180%; }
.footer {font-size:90%;}
.titre-2-5em{ font-size: 2em; }
.box-texte {font-size:3em }
}

@media  screen and (min-width: 960px) and (max-width: 1280px) {



}
/*----------------------- FIN Texte défilant ----------------------------*/