/*
.w3-00547C,.w3-hover-00547C:hover{color:#ffffff!important;background-color:#00547C!important}
.w3-51aac8,.w3-hover-51aac8:hover{color:#ffffff!important;background-color:#51aac8!important}

.w3-teal-lp,.w3-hover-teal-lp:hover{color:#fff!important;background-color:#717D81!important}

.w3-round-codris{border: 1px solid #00547C;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;}

.w3-button:hover{text-decoration:none;}

.w3-reslpb{color:#fff!important;background-color:#00547C!important}
.w3-hover-reslpb:hover{color:#00547C!important;background-color:#fff!important}
.w3-reslpw{color:#00547C!important;background-color:#fff!important}
.w3-hover-reslpw:hover{color:#fff!important;background-color:#3071A9!important}





.w3-display-left_lp{position:absolute;top:50%;left:5%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right_lp{position:absolute;top:50%;right:5%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
*/

.w3-E30613,.w3-hover-E30613:hover{color:#ffffff!important;background-color:#E30613!important}
/*.w3-round-headcodris{border: 1px solid #E30613;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;}*/
.w3-round-headcodris{border: 1px solid #E30613;border-bottom-left-radius: 10px 80px;}



a {
  
color: #F44336; 
  text-decoration: none;
  outline-style:none; /* suppression bordure au clic */
}
a:hover { 
color: #F44336;
text-decoration: underline;
}

.row {
  font-family: 'Noto Sans', sans-serif;
  font-style: normal;
}

.row a {
  
color: #F44336;
  text-decoration: none;
  outline-style:none; /* suppression bordure au clic */
}
.row a:hover { 
color: #F44336;
text-decoration: underline;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

/* suppression focus trait FOCUS */ 
.row a:active, a:focus {outline-style:none;text-decoration: none;color: #F44336;}
.row a:visited {outline-style:none;text-decoration: none;color: #F44336;}

* {outline: none;}


a img {
  opacity: 1.0;
}
a img:hover {
  opacity: 0.5;
}

	
[class*="col-"] {
  float: left;
  padding: 15px;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}




@media (max-width:550px){	
	/* For mobile phones: */
	[class*="col-"] {
	  width: 100%;
		
	}
}


* {
  box-sizing: border-box;
}


/* content main */
.flex_main {
  display: flex;
  flex-direction: row;
  text-align: left;
}

.flex_main-0 {
  background-color: #ffffff;
  text-align:left;  
  padding: 0px;
  flex: 10%;
}

.flex_main-1 {
  background-color: #ffffff;
  text-align:left;
  padding: 0px;
  flex: 80%;
}
.flex_main-2 {
  background-color: #ffffff;  
  text-align:left;  
  padding: 0px;
  flex: 10%;
}

 
/* header */
.flex_header {
  display: flex;
  flex-direction: row; 
  text-align: right;
}

.flex_header-1 {
  background-color: #ffffff;
  padding: 0px;
  text-align: left;
  flex: 28%;

}
.flex_header-2 {
  background-color: #ffffff; 
  padding: 0px;
  text-align: right;
  flex: 72%;

}
@media (max-width: 700px) { 
  .flex_header {
    flex-direction: column;  
  }	
}


<style type="text/css">


html,body{{font-family: 'Poppins', sans-serif;}

	
.w3-E30613,.w3-hover-E30613:hover{color:#ffffff!important;background-color:#E30613!important}
.w3-round-headcodris{border: 1px solid #E30613;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}


/* header */
#infoconnex {
padding:5px;
float:right!important; 
}
a #infoconnex {
font-size: 15px;
letter-spacing: 0px;
line-height: 44px;
color: #ffffff;
font-weight: 600;
font-family: "Poppins";
}

.flex_header-1 {
  background-color: #ffffff;
  padding: 0px;
  text-align: left;
  flex: 28%;

}
.flex_header-2 {
  background-color: #ffffff; 
  padding: 0px;
  text-align: right;
  flex: 72%;

}
@media (max-width: 1680px) {	
	.dropbtn { 
		font-size:16px;
	}
	.notdropdown a {
		font-size:16px;
	}
	.flex_header-1 {
		flex: 24%;
	}
	.flex_header-2 {
		flex: 76%;
	}	
}
@media (max-width: 1450px) {	
	.dropbtn { 
		font-size:14px;
	}
	.notdropdown a {
		font-size:14px;
	}
	.flex_header-1 {
		flex: 22%;
	}
	.flex_header-2 {
		flex: 78%;
	}	
}
@media (max-width: 1280px) {	
	.dropbtn { 
		font-size:12px;
	}
	.notdropdown a {
		font-size:12px;
	}
	.flex_header-1 {
		flex: 20%;
	}
	.flex_header-2 {
		flex: 80%;
	}
	
}
@media (max-width: 1100px) {
	.flex_header-1 {
		flex: 30%;
	}
	.flex_header-2 {
		flex: 70%;
		
	}	
	.dropdown {
		display:block;
		text-align:left;
		font-size:16px;	 
	}
	.notdropdown {
		display:block;
		text-align:left;
	}
	.notdropdown a{
		font-size:16px;
	}	
	.dropbtn { 
		font-size:16px;
	}
	.dropdown-content a {
		font-size:14px;
	}	
}







/* menu haut */
.flex_menu_haut {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.flex_menu_haut-1 {
  background-color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  color: #00364C;
  letter-spacing: 1px; 
  padding: 0px;
  text-align: right;
  flex: 50%;
}
.flex_menu_haut-2 {
  background-color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  color: #00364C;
  letter-spacing: 1px; 
  padding: 0px;
  padding-top: 20px;
  text-align: right;
  flex: 50%;
}
#SidebarCODRIS {
display:block; 	
}
#btnSidebar {
display:none; 
}
#mainmenuCODRIS {
display:block;
font-size: 12px;
font-weight: 700;
color: #00364C;
letter-spacing: 1px; 

}

@media (max-width: 1450px) {
	#btnSidebar {
	display:block;
	}
	#mainmenuCODRIS {
	 display:none;
	}
}
@media (max-width: 700px) { 
  .flex_header {
    flex-direction: column;  
  }
	.flex_header-1 {
		flex: 50%;
	}
	.flex_header-2 {
		flex: 50%;
	}  	
	#tetiere1 {
		height:142px;
	}
	#tetiere2 {
		height:142px;
	}	
	#infoconnex {
		float:left!important;
	}
}




/* slider */
* {box-sizing: border-box}

.mySlides {display: none;}
/*img {vertical-align: middle;}*/

/* Slideshow container */
.slideshow-container {
  /*max-width: 1000px;*/
  position: relative;
  /*margin: auto;*/
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #002D53;
  background-color: rgba(255,255,255,0.6);
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}



/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}



/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-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) {
  .prev, .next,.text {font-size: 11px}
}



/* slider */
.slidetitle {
	
	position:absolute;
	top:20%;left:20%;
	font-size:3vw;
	line-height:120%;
	color:#00354D;
	font-weight: 700;
	width:30%; 
	}
.slideinfo {
	font-size:1vw;
	line-height:120%;
	color:#00354D;
	font-weight: 400;
	margin-top:5%;
	margin-bottom:5%;	
	}
.slidetbutton {
	font-size:1vw;
	line-height:120%;
	color:#00354D;
	font-weight: 400;	
	}
.cibleslide {
  cursor: pointer;
  position: absolute;
  top: 92%;
  width:100%;   
}

@media (max-width: 1000px) {	
	.cibleslide {
	  position: absolute;
	  top: 84%;   
	}	
	.slidetbutton {
	font-size:2vw;
	}	
	.slidetitle {
		position:absolute;
		top:10%;
	}	
}
 


.w3-round-headcodris2{border: 1px solid #E30613;border-bottom-left-radius: 10px 10px;border-bottom-right-radius: 10px 10px;}
.w3-E30613,.w3-hover-E30613:hover{color:#fff!important;background-color:#E30613!important}




.wrap {
  position: relative;
  margin: 3em 0;
}


/* Frame */

.frame {
  height: 465px;
  line-height: 465px;
  overflow: hidden;
}

.frame ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  font-size: 50px;
}

.frame ul li {
  float: left;
  /*width: 364px;*/
  height: 100%;
  margin:4px;
  padding: 0;
  background: #C9C9C9;
  color: #ddd;
  text-align: center;
  cursor: pointer;
}

.frame ul li.active {
  color: #fff;
  background: #a03232;
}
@media (max-width: 600px) {
	.frame {
		height: 320px;
		line-height: 320px;
	}
	.frame ul li {
		width: 250px;
	}
}

/* Scrollbar */

.scrollbar {
  margin: 0 0 1em 0;
  margin-top:10px;
  height: 6px;
  background: #fff;
  line-height: 0;
}

.scrollbar .handle {
  width: 50px;
  height: 100%;
  background: #00354D;
  cursor: pointer;
}

.scrollbar .handle .mousearea {
  position: absolute;
  top: -9px;
  left: 0;
  width: 100%;
  height: 20px;
}


/* Pages */

.pages {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  text-align: center;
}

.pages li {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 4px;
  text-indent: -999px;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}

.pages li:hover {
  background: #aaa;
}

.pages li.active {
  background: #666;
}


/* Controls */

.controls {
  margin: 25px 0;
  text-align: center;
}


/* One Item Per Frame example*/

.oneperframe {
  height: 300px;
  line-height: 300px;
}

.oneperframe ul li {
  width: 1140px;
}

.oneperframe ul li.active {
  background: #333;
}