@charset "utf-8";
/* CSS Document */

 
html {
  font-family: 'Open Sans', sans-serif;
  font-size:16px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin:0px;
    padding:0px;
  
}


body {
  margin:0px;
  margin-top:0px;
  padding:0; margin:0;
  margin-right: 0;
  
   
}

.cacher {
	display:none !important;	
}

/*
Ceci permet d'afficher le arrow avant un div
*/
.arrow_element {display:inline-block;margin-right:0px; width:10%; vertical-align: top !important; /* background-color:red; */ } 
.text_element {display:inline-block; margin-right:0px; margin-bottom:20px; width:75%; /* background-color:red; */ } 

/*
Pour la partie ou on affiche limage article avec limage devant le titre de larticle
*/

.image_article_positione {display:inline-block;margin-right:5px; margin-bottom:20px; width:20%; vertical-align: top !important; /* background-color:red; */ } 
.text_article_positione {display:inline-block; margin-right:0px; margin-bottom:20px; width:65%; /* background-color:red; */ } 



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

.arrow_element {display:inline-block;margin-right:5px; width:16px; vertical-align: top !important; /* background-color:red; */ } 
.text_element {display:inline-block; margin-right:0px; margin-bottom:20px; width:75%; /* background-color:red; */ } 

/*
Pour la partie ou on affiche limage article avec limage devant le titre de larticle
*/

.image_article_positione {display:inline-block;margin-right:1px; margin-bottom:20px; width:70px; vertical-align: top !important; /* background-color:red; */ } 
.text_article_positione {display:inline-block; margin-right:0px; margin-bottom:20px; width:65%; /* background-color:red; */ } 

	
}


.max_width_some_percent {
	max-width:90% !important;
	
}

/*
Mon code qui permet de changer le style du wysiwyg en fonction de l'ecran qu'on a


*/

.maxjohn_wysiwyg_screen_small {
	 
	width: 95% !important;
	
	height: auto !important;
	 
}


.maxjohn_wysiwyg_screen {
	width: 100%;
	/*
	height: auto;
	min-height:400px;
	*/
	height: auto;
	min-height:400px;
	
	max-width:100% !important;
 	 
}


/*

*/



/*
Debut de Pour les Photos
*/
 
.photo_rectangle_inverse {
	padding: 0;
  margin: 0;
  height: 160px;
  width: 170px;
  -webkit-clip-path: url(#shape);
  clip-path: url(#shape);
  position: relative;
  -webkit-transform: translateZ(1px)
}

 

/*
Fin de Pour les Photos
*/




/*
Debut Pour le pace
*/

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #D7A744;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

.pace .pace-progress-inner {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #D7A744, 0 0 5px #D7A744;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -moz-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  -o-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 15px;
  right: 15px;
  width: 14px;
  height: 14px;
  border: solid 2px transparent;
  border-top-color: #D7A744;
  border-left-color: #D7A744;
  border-radius: 10px;
  -webkit-animation: pace-spinner 400ms linear infinite;
  -moz-animation: pace-spinner 400ms linear infinite;
  -ms-animation: pace-spinner 400ms linear infinite;
  -o-animation: pace-spinner 400ms linear infinite;
  animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
  0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
  0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
  0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
  0% { transform: rotate(0deg); transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}

/*
Fin Pour le pace
*/

.first_blue {
	 
	color:#234884;
	 
}



.yellow_link a:link {
    color:#D7A744;
	text-decoration: none;
}

.yellow_link a:hover {
    color:#234884;
	text-decoration: none;
}


.announce_link a:link {
    color:#0000;
	text-decoration: none;
}

.announce_link a:hover {
    color:#234884;
	text-decoration: none;
}





.max_width_e_ressources_line {
	max-width:862px !important;
	
}

.max_width_student_text {
	max-width:287px !important;
}

.max_width_gray_left {
	max-width:327px !important;
}

.max_width_milieu {
	max-width:1275px !important;
	
}


 .full_width_image {
     
}

/*
On stretch l'image pour les ecrans qui sont au dessus de 1350 qui est celui du design par defaut
*/
@media screen and (min-width:1351px) {

.full_width_image {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	min-width:100%;
    
    max-height: 100%;
    margin: auto;
    overflow: auto;
}

}

.logo1 {
	 
}

.right {
    position: absolute;
    right: 0px;
	text-align: right !important;
     
}



.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}





/*

Pour rendre les videos comme youtube responsive
*/

.contact_us_bold {
	font-size:18px;
	font-weight:bold;
	text-transform:uppercase;
	line-height:200%;
	
}

.e_ressources {
	font-size:18px;
	font-weight:bold;
	text-transform:uppercase;
	
}



.videowrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; 
    height: 0; 
    overflow: hidden;
	display:block;
}
.videowrapper iframe, 
.videowrapper object,
.videowrapper embed {
    position: absolute;
    top: 0;
    left: 0;
	right: 0;
	bottom: 0;
    width: 75%;
    height: 75%;
	max-width:90%;
	max-height:90%;
	margin: auto;
	margin-right: auto;
margin-left: auto;
margin-bottom:auto;
display:block;
	
}

/*
Fin de Pour rendre les videos comme Youtube RESPONSIVES
*/


.videoFrame {
	 
	 
}
 


@media screen and (max-width:1080px) {
	.videoFrame {
		display:none;	
	}
}




/*
Pour rendre limage sombre
il faut entourer limage dun div ou span avec 
sombre_entourage
et on applique sombre_image a limage
*/


.sombre_entourage {
   /* 
   display: inline-block; 
   J'enleve ceci car puisque l'image est deja full with ca cree un conflict
   autrement jallais maintenir ceci ci limage netait pas full width
   */
    background: black;
     
}
 
.sombre_image {
	 opacity: 0.3;
	  
}



.full-width-div {
    position: absolute;
    width: 100%;
    left: 0;
	right:0;
	margin-right: 0;
	
}

.before_main_menu{
    border: 1px solid #B3490E;
    padding: 6px;
    background: #B3490E;
    border-top-left-radius: 2em;
	border-top-right-radius: 2em;
	 
}

.before_bas{
    border: 1px solid #DFA257;
    padding: 20px;
    background: #D7A744;
	 
	font-size:12px;   
	 
}

.bas_yellow {
    border: 1px solid #B3490E;
    padding: 5px;
    background: #B3490E;
	 
	font-size:12px;   
	 
}


.bas_white {
     
    padding: 5px;
	text-align:center;
    background: #FFFFFF;
	 
	font-size:12px;   
	 
}

.small_margin {
	margin-left:2%;
	margin-right:2%;
	margin-top:2%;
	margin-bottom:2%;
	padding-bottom:2%;
	  	
}

.small_bottom_margin {
	margin-bottom:5%;
	
}

.arrow_color_jaune {
	color:#B3490E;	
}

.arrow_color_bleue {
	color:#234884;	
}

hr {
  border: 0;
  clear:both;
  display:block;
  width: 100%;               
  background-color:#234884;
  height: 1px;
}


/*
Links
*/

a {
    color: #234884;
}

 /* unvisited link */
a:link {
    color: #234884;
}

/* visited link */
a:visited {
    color: #234884;
}

/* mouse over link */
a:hover {
    color: #B3490E;
}

/* selected link */
a:active {
    color: #B3490E;
} 

.colone_jaune_premier {
    border: 1px solid #B3490E;
    padding-top:10px;
    background: #B3490E;
	color:#FFF;
	font-size:16px;
	 
	
	
	margin-right:2%;
	margin-bottom:1%;
	
	width:99%;
max-width:285px !important;
	vertical-align:baseline;
	 
     
}

.colone_jaune{
    border: 1px solid #B3490E;
    padding-top:10px;
    background: #B3490E;
	color:#FFF;
	font-size:16px;
	 
	
	
	margin-right:2%;
	margin-bottom:1%;
	
	width:99%;
	max-width:285px !important;
	
	vertical-align:middle;
     
}

.colone_bleue_premier {
    border: 1px solid #234884;
	padding-top:10px;
	
	
    background: #234884;
	color:#FFF;
	font-size:16px;
	  
	 
	margin-bottom:2%;
	
	width:99%;
max-width:285px !important;
	vertical-align:baseline;
	 
	 
}

.colone_bleue {
    border: 1px solid #234884;
    padding-top:10px;
    background: #234884;
	color:#FFF;
	font-size:16px;
	 
	
	margin-right:2%;
	margin-bottom:1%;
	 
	
	width:99%;
max-width:285px !important;
    vertical-align:middle;
	 
}




/* allows us to size the header height based as a percent */
html, body {
  height:100%;
}

.navigation_unchattered {
	font-size:55px;
	text-align:center;
	color:#234884;
		padding-left:5%;
	padding-right:5%;
	padding-top:3%;
	padding-bottom:5%;
	font-weight:100;
	
}

.blue_generale {
	color:#234884;
}

.uppercase {
	text-transform:uppercase;	
}

.center {
    margin: 0 auto;
   
    
    padding: 10px;
}

.navigation_whatwedo {
	font-size:36px;
	text-align:center;
	color:#234884;
	
}

.navigation_whatwedo_text {
	font-size:16px;
	text-align:center;
	 
	padding-left:18%;
	padding-right:18%;
	
	padding-bottom:5%;
	
}

.no_decoration a {
	text-decoration:none;
	
}

.text_en_generale {
	font-size:16px;
	 
	 
		padding-left:5%;
	padding-right:5%;
	
	padding-bottom:5%;
	 
	
}


.theproblem {
	font-size:24px;
}

.theproblem_text_padding {
	padding-left:16%;
	padding-right:16%;
	padding-bottom:5%;
}

.theproblem img {
display:block;
   margin:auto;	
}

.communities {
	padding-bottom:2%;
	
}

 




.rsmall {
	font-size:14px;
	text-align:center;
	color:#234884;
	
}

.rverysmall {
	font-size:12px;
	 
	
}

.rblanc {
	 
	color:#FFF;
	
}

.bleu_principale {
	color:#234884;
}

.r12 {
	font-size:12px;
 	
}

.r14 {
	font-size:14px;
}
.r14blanc {
	font-size:14px;
	 
	color:#FFF;
	
}
.r14b {
	font-size:24px;
	 
	color:#747474;
	
}
.join_us {
	font-size:24px;
	text-align:center;
	color:#747474;
	font-weight: 300; 
	font-style: normal;
	
	
}

.join_us_text {
	padding-top:2%;
	padding-bottom:5%;
	
    margin: 0 auto;
	  
}

/*
@media screen and (max-width:768px) {
	.join_us_text img {
		width:50%;
	}
	
}
*/

.r14c {
	font-size:14px;
	 
	color:#747474;
	
}
.r48 {
	font-size:48px;
	 
	
}

.black_icons_area {
 width:100% !important;
 max-width:100% !important;
	
	max-height:100%;
 height:250px;
 background-color:#0071A6;
 color:#FFF;
 
 
  
 
	/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
 	 
  vertical-align: middle;
  line-height: normal;   
	text-align:center;
	
 		
}





/*
############################################################################
############################################################################
Debut pour le menu bleue du top haut
*/ 



/* Remove margins and padding from the list, and add a background color */
 
ul.topnav_max {
    list-style-type: none;
	margin:0 auto; /* pour centrer le menu */
    padding: 0;
	overflow:hidden;
    
    background-color: #234884;
	 
	 text-align: center;
	 width:1350px; /* pour centrer le menu */
	  
	 max-width:100%;
}

/* Float the list items side by side */
ul.topnav_max li {float: left;    }

/* Style the links inside the list items */
ul.topnav_max li a {
    display: inline-block;
    color: #FFFFFF;
    text-align: center;
	
    padding: 14px 16px;
    text-decoration: none;
   
	 font-family: 'Open Sans', sans-serif;
    font-size: 13px;
	 transition: 0.3s;
	transition: all .2s ease-in-out;
	width:170px; /* Pour centrer le menu */
}

/* Change background color of links on hover */
ul.topnav_max li a:hover {
	background-color: #B3490E; 
	color:#FFFFFF;
	transform: scale(1.0);
	 
}

/* Hide the list item that contains the link that should open and close the topnav_max on small screens */
ul.topnav_max li.icon {display: none;}


/*
##############################################################################
Add media query
*/

 /* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav_max (li.icon) 

Normalement @media screen and (max-width:768px) 
 
 */
@media screen and (max-width:790px) {
  ul.topnav_max li:not(:first-child) {display: none;}
  ul.topnav_max li.icon {
    float: right;
    display: inline-block;
  }
  
  ul.topnav_max li a {
	  width:auto;  
  }
  
  ul.topnav_max {
	  width:auto;
  }
}

/* The "responsive" class is added to the topnav_max with JavaScript when the user clicks on the icon. This class makes the topnav_max look good on small screens 

Normalement @media screen and (max-width:768px) 

*/
@media screen and (max-width:790px) {
  ul.topnav_max.responsive {position: relative;}
  ul.topnav_max.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav_max.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav_max.responsive li a {
    display: block;
    text-align: left;
  }
  
  ul.topnav_max li a {
	  width:auto;  
  }
  
  
  ul.topnav_max {
	  width:auto;
  }
  
}

 
/*
############################################################################
############################################################################
Debut pour le menu sticky  et menu normal
*/ 


/* Remove margins and padding from the list, and add a background color */
ul.topnav {
    list-style-type: none;
	margin:0 auto; /* pour centrer le menu */
    padding: 0;
	overflow:hidden;
    
    background-color: #FFF;
	 text-align: center;
	 width:1350px; /* pour centrer le menu */
	  
	 max-width:100%;
	  
	  
}

/* Float the list items side by side */
ul.topnav li {float: left;    }

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #234884;
    text-align: center;
	
    padding: 14px 16px;
    text-decoration: none;
   
	 font-family: 'Open Sans', sans-serif;
    font-size: 15px;
	 transition: 0.3s;
	transition: all .2s ease-in-out;
	width:185px; /* Pour centrer le menu */
}

/* Change background color of links on hover */
ul.topnav li a:hover {
	
	color:#B3490E;
	transform: scale(1.1);
	}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}


/*
##############################################################################
Add media query
*/

 /* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) 

Normalement @media screen and (max-width:768px) 
 
 */
@media screen and (max-width:1024px) {

ul.topnav {
     
	 width:1024px; /* pour centrer le menu */
	  
	   
}

ul.topnav li a {
     
    padding: 7px 7px;
    
    font-size: 15px;
	  
	width:130px; /* Pour centrer le menu */
} 


ul.topnav_max li a {
     
    padding: 7px 7px;
    
    font-size: 12px;
	  
	width:130px; /* Pour centrer le menu */
} 
   
	
}
 
 
@media screen and (max-width:790px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
  
  ul.topnav li a {
	  width:auto;  
  }
  
  ul.topnav {
	  width:auto;
	  max-width:95% !important;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens 

Normalement @media screen and (max-width:768px) 

*/
@media screen and (max-width:790px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
  
  ul.topnav li a {
	  width:auto;  
  }
  
  
  ul.topnav {
	  width:auto;
	  max-width:95% !important;
  }
  
}


/*
Pour le menu sticky
*/

 
.menu {
	
   
 }
 
.menu-padding {
	 
    padding-top:0px;
}
 
.sticky {
    position:fixed;
    top:0;
	z-index:1;
	 
	max-width:100%; 
	
	overflow:hidden;
	
	max-height:100vh;
  overflow-y:auto;
  height:auto !important;
    
}

/*
Lorsque le menu est superieur egale a la largeuur par defaut qui est 1350px dans notre cas
on mettra le sticky a 100% de largeur minimum pour que ca couvre lecran
*/

@media screen and (min-width:1350px) {
	.sticky {
		
	}
}


.sticky ul.topnav {
	background-color:#234884;
	border-bottom: 1px solid #234884;
	
	/*
	border: 1px solid #FFFFFF;
	*/
	
}

.sticky ul.topnav li a {
	color:#FFF;
}

 

/*
############################################################################
############################################################################
Debut de pour le Arrow qui mene vers le bas
*/


 
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}



section {
  float:left;
  width:100%;
  background:#fff;
  position:relative;
  box-shadow:0 0 5px 0px #333;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    
	text-align:center !important;
	
}

.vtop {
    display: inline-block;
    vertical-align: top !important;
     
}

/*
On met le container a 100 prcent
*/
.container-full {
   
  width: 100%;
   padding: 0 15px; margin-left: 0px; margin-right: 0px; 
   
}
 

/* the important styles */

/* the wrapper element that will become the outer circle */
  
/*
 
Dimensions of mobiles
*/
@media (max-width: 319px)  {
	
   

 


}

@media (min-width: 319px)  and (min-height: 479px) {
	
   

 


}


@media (min-width: 359px)  and (min-height: 639px) {
	
   
}

@media (min-width: 479px)  and (min-height: 319px) {
	
   
}

@media (min-width: 479px)  and (min-height: 849px) {
	
   
}


@media (min-width: 767px)  and (min-height: 1023px) {
	
   
}

@media (min-width: 853px)  and (min-height: 480px) {
   
  
}


@media (min-width: 879px)  and (min-height: 1279px) {
   
  
  
}

@media (min-width: 1023px)  and (min-height: 767px) {
   
  
  
}

@media (min-width: 1079px)  and (min-height: 1919px) {
   
  

   
}


@media (min-width: 1365px)  and (min-height: 610px) {
	
    
}


@media (min-width: 1365px)  and (min-height: 767px) {
	
     
 
}


.content {
  float:left;
  width:100%;
   
  
}

.laweh_padding {
padding-left:3%;
  padding-right:3%;	
}

.laweh_padding_milieu {
padding-left:5%;
  padding-right:5%;	
}

@media all and  (max-width: 800px) { 
.laweh_padding_milieu {
padding-left:12%;
  padding-right:12%;	
}

}


.laweh_all_boxes_padding {
padding-left:1%;
  padding-right:1%;	
}

.laweh_contact_padding {
padding-left:3%;
  
  padding-top:4%;
   
	line-height: 200%;
	color:#234884;
	font-size:12px;
	  	
}

.bas_laweh_padding {
padding-left:6%;
padding-right:6%;

  padding-top:2%;
   
	line-height: 200%;
	color:#234884;
	font-size:12px;
	  	
}

.bas_laweh_padding_yellow {
padding-left:8%;
  
  padding-top:2px;
   
	
	color:#FFFFFF;
	font-size:12px;
	  	
}

.bas_laweh_padding_yellow_a {
padding-left:20%;
  
  padding-top:2px;
   
	
	color:#FFFFFF;
	font-size:12px;
	  	
}

 
.welcome_padding {
margin-left:5%;
  margin-right:5%;
  margin-top:8%;	
}

.welcome_big_font {
	font-size:30px;
}

.welcome_normal_font {
	font-size:14px;
}

@media all and  (max-width: 1024px) {
	
.welcome_normal_font {
		display:none;
}

}

.bg_gris {
	background-color:#B3490E;
	color:#FFF;
	 
}


.responsive-fieldset {
	display:table-cell; 
	width: 100% !important;
	border: 1px solid #D7A744;
	  
	margin-left:0px !important;
	margin-top:3px;
	
	padding-left:3%;
  padding-right:3%;
  padding-top:2%;
  padding-bottom:2%;
	}
	
	
fieldset {
     
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
	 
    
}
	

/*
Fin de pour le Arrow qui mene vers le bas
############################################################################
############################################################################
*/ 



.bg_blanc {
	background-color:#FFF;
	
}

.remove_pading {
    padding-left:0px;
    padding-right:0px;
}

.notre_tableau {
	padding:0; margin:0;
	 margin-right: auto; margin-left: auto;
	width:1280px;
	top:0;
	
	
}

.notre_tableau img {
	display: block;
}

 

.black_menu_down {
	
	width:100%;
	 
	
	max-width:100%;
	max-height:100%;
	background-color:#FFFFFF;
	
	
	text-align:center;
	
	 
		
}




.text_interne_noir {
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
letter-spacing: -1px;
font-size:18px;
margin-right:20px;
margin-left:20px;
padding-left:50px;

text-align:left;	
}

.text_interne_rouge {
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
letter-spacing: -1px;
font-size:14px;
color:#F80F00;
text-align:left;
}


.bg_red {
	background-color:#F80F00;
	color:#FFF;
	font-family: "Roboto";
	font-weight: 100;
	font-size:36px;
	text-align:center;
}

.notre_logo {
	width:249px;
	height:162px;
	max-width:100%;
	
	
}

.a_cacher_apres_haut_droite {
	
	
}

.largeur_principale
{
	width:1280px;
	max-width:100%;
	
}


.bg_black {
	background-color:#FFFF;
	color:#0071a6;
	 
}


 

.menu_general_simple {
	 font-family: 'Open Sans', sans-serif;
	
    font-size: 1.5vw;
    
     
    color:  #0071a6;
	 
	
}

 


 



.text_blanc {
	color:#FFF;
	
}

.float_left {
	float:left;
	 
}

.float_right {
	float:right;
	 
}

.centrer {
	text-align:center;	
}

.centrer_image {
	 margin: 0 auto;	
}

.justify {
	text-align:justify;
}

.gauche {
	text-align:left;
}

.who_we_are {
	height:78px;
	
	
}

.bg_responsive {
background-size:100% auto;	
}

/*

*/




input[type=submit] {padding:5px 15px; background:#D7A744; color:#FFF; border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
	}
	
	
input[type="text"] {

  
  color:#000000;

}

  

 

.navbar .nav > li > a {
	
	font-family: 'Open Sans', sans-serif;
	
    font-size: 1.5vw;
    
     
    color:  #0071a6;
}


.navbar-default {
    background-color: #FFFFFF;
    border-color: #E7E7E7;
}


 

.navbar-custom {
    color: #FFFFFF;
    background-color: #000000;
}
 

.who_we_are__background-image {
    max-width:100%;
	height:auto;
	
    display: block;
}

.who_we_are__text {
    position: absolute;
    left:500px;
    color: #fff;
	 transition: all .2s ease-in-out;
	 
	 
}

.who_we_are__text:hover {
	 transform: scale(1.1); 
}

.who_we_are__login {
     
    color: #fff;
	  
	 
}




.articles_image_background {
    max-width:100%;
	height:auto;
	
    display: block;
}

.articles_text1 {
    position: absolute;
	padding-left:5%;
	padding-right:5%;
	padding-bottom:5%;
	padding-top:5%;
    left:10%;
	bottom:50%;
	
	min-width:45% !important;
	max-width:47% !important;
 	 
}

.articles_text2 {
    position: absolute;
	padding-left:5%;
	padding-right:5%;
	padding-bottom:5%;
	padding-top:5%;
    left:57%;
	bottom:50%;
	
	min-width:45% !important;
	max-width:47% !important;
 	 
}


.articles_text3 {
    position: absolute;
	padding-left:5%;
	padding-right:5%;
	padding-bottom:5%;
	padding-top:5%;
    left:10%;
	bottom:15%;
	 
	min-width:45% !important;
	max-width:47% !important;
 	 
}

.articles_text4 {
    position: absolute;
	padding-left:5%;
	padding-right:5%;
	padding-bottom:5%;
	padding-top:5%;
    left:57%;
	bottom:15%;
	
	min-width:45% !important;
	max-width:47% !important;
 	 
}


.article_icon {
	padding-right:3%;
float:left;
  

width:110px;
	
} 

.article_texte_inner {
	padding-left:20px;	
}

.article_title {
	font-size:30px;
}



.article_title_content {
	font-size:14px;
}


@media all and  (max-width: 1080px) { 



.article_title {
	font-size:21px;
} 

.article_icon {
	padding-right:3%;
float:left;
width:100px;
} 


}


@media all and  (max-width: 854px) { 



.article_title {
	font-size:24px;
	
} 

.article_icon {
	padding-right:2%;
 
width:95px;

	
} 

.articles_text1 {
	left:5%;	
	min-width:47% !important;
	bottom:40%;
}

.articles_text2 {
	left:50%;
	min-width:47% !important;
	bottom:40%;	
}
.articles_text3 {
	left:5%;	
	min-width:47% !important;
	bottom:5%;
}

.articles_text4 {
	left:50%;	
	min-width:47% !important;
	bottom:5%;
}

}


@media all and  (max-width: 768px) { 

fieldset { 
	border-right: 0px !important;
	border-left: 0px !important;
	border-top: 0px !important;
	border-bottom: 0px !important;
}

.articles_text2 {
	display:none;	
}

.articles_text4 {
	display:none;	
}

.articles_text1 {
	
	min-width:80% !important;
	max-width:90% !important;
	bottom:40%; 	
}

.articles_text3 {
	
	min-width:80% !important;
	max-width:90% !important;
	bottom:2%; 	
}

.article_icon {
	width:90px;	
}


.article_title {
	font-size:24px;
	
} 


}




@media all and  (max-width: 480px) { 

.articles_text3 {
	display:none;	
}

 

.articles_text1 {
	
	min-width:80% !important;
	max-width:90% !important;
	bottom:10%; 	
}
 
.article_icon {
	width:85px;	
}


.article_title {
	font-size:24px;
	
} 

}



@media all and  (max-width: 360px) { 



.articles_text1 {
	
	min-width:90% !important;
	max-width:95% !important;
	bottom:5%; 	
}
 
.article_icon {
	width:85px;	
}


.article_title {
	font-size:18px;
	
} 

}


.zoomer {
	 transition: all .2s ease-in-out;
}

.zoomer:hover {
	 transform: scale(1.1); 
}
.who_we_are__input {
    
    color: #fff;
	background-color:#49C7EB;
	 
}

.who_we_are__search {
	
	width:40px;
	height:auto;
	 
}

 

.what_we_do__background-image {
    width: 100%;
    display: block;
}
.what_we_do__text {
    position: absolute;
    bottom: 0;
    left:150px;
    color: #fff;
	font-family: "Roboto";
	font-weight: 100;
	font-size:36px;
}


 

/*


*/



/* Pour les menus */
@media all and  (min-width: 768px) { 


.menu_general_responsive {
	
	 
/* display:none;   */
	
}

}


@media all and  (max-width: 767px) { 

 
.who_we_are__text {
	display:none;
	 
	 
}
 

}


@media all and  (max-width: 768px) { 

 
.menu_general_simple {
	 display:none;
	
}
 

}


/* Fin de pour les menus */
 



@media all and  (min-width: 213px) { 
.who_we_are__text { 
top:40px;
left:150px;


}

.who_we_are__input {
width:200px;
height:41px;
border-radius:10px;
color: #fff;
background-color:#49C7EB;
}



.what_we_do__text { 
font-size: 9px;
left:40px;
bottom:0px;
} 





} 


@media all and  (min-width: 320px) { 
.who_we_are__text { 
top:10px;
left:200px;


}

.who_we_are__input {
width:60px;
height:20px;
border-radius:10px;
color: #fff;
background-color:#49C7EB;
}

.who_we_are__search {
width:15px;
height:auto;
 
}

.what_we_do__text { 
font-size: 15px; 
left:40px;
bottom:-1px;
} 

}




@media all and  (min-width: 360px) { 
.who_we_are__text { 
top:10px;
left:240px;


}

.who_we_are__input {
width:60px;
height:20px;
border-radius:10px;
color: #fff;
background-color:#49C7EB;
}

.who_we_are__search {
width:15px;
height:auto;
 
}


.what_we_do__text { 
font-size: 15px; 
left:40px;
bottom:0px;
} 

}




@media all and  (min-width: 400px) { 
.who_we_are__text { 
top:40px;
left:250px;


}

.who_we_are__input {
width:200px;
height:41px;
border-radius:10px;
color: #fff;
background-color:#49C7EB;
}



.what_we_do__text { 
font-size: 18px; 
left:60px;
bottom:0px;
 
} 

} 




@media all and  (min-width: 480px) { 
.who_we_are__text { 
top:40px;
left:300px;


}

.who_we_are__input {
width:200px;
height:41px;
border-radius:10px;
color: #fff;
background-color:#49C7EB;
}


.what_we_do__text { 
font-size: 20px; 
left:60px;
bottom:0px;
 
} 


} 





@media all and  (min-width: 540px) { 
.who_we_are__text { 
top:25px;
left:400px;


}

.who_we_are__input {
width:120px;
height:25px;
border-radius:10px;
color: #fff;
background-color:#49C7EB;
}


.what_we_do__text { 
font-size: 25px; 
left:50px;
bottom:0px;

} 


 
} 



@media all and  (min-width: 600px) { 

.who_we_are__text { 
top:25px;
left:450px;


}

.who_we_are__input {
width:150px;
height:30px;
border-radius:10px;
color: #fff;
background-color:#49C7EB;
}




 
} 




@media all and (min-width: 768px) { 

.who_we_are__text { 
top:25px;
left:520px;


}

.who_we_are__input {
width:150px;
height:30px;
border-radius:10px;
color: #fff;
background-color:#49C7EB;
}



}




@media all and (min-width: 800px) { 

.who_we_are__text { 
top:25px;
left:540px;


}

.who_we_are__input {
width:150px;
height:30px;
border-radius:10px;
color: #fff;
background-color:#49C7EB;
}



}


@media all and (min-width: 960px) { 

.who_we_are__text { 
top:35px;
left:700px;


}

.who_we_are__input {
width:170px;
height:30px;
border-radius:10px;
color: #fff;
background-color:#49C7EB;
}


 
.what_we_do__text { 
font-size: 36px; 
left:200px;
} 


.menu_height_1 {
 height:100px;
}


.black_menu_top {
 

  
 
	/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
 
	max-width:100%;
	max-height:100%;
 
  vertical-align: middle;
  line-height: normal;   
	text-align:center; 
 		
}



.black_menu_down {
 
 height:162px;	
	/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
 
		
}

 
} 



 


@media screen and (min-width: 1280px) { 
.who_we_are__text { 
top:40px;
left:1000px;



}

.who_we_are__input {
width:200px;
height:41px;
border-radius:10px;
color: #fff;
background-color:#49C7EB;
}





.what_we_do__text { 
font-size: 40px; 
left:230px;
bottom:10px;
}
 


/*
For the animated arrow
*/
.mon_arrow {
   
  white-space: nowrap;
  font-size: 4rem;
  position: absolute;
  right: 0;
  bottom: 30px;
  left: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 750ms ease-in-out;
  -ms-transition: all 750ms ease-in-out;
  -o-transition: all 750ms ease-in-out;
  transition: all 750ms ease-in-out;
}

/* this sets the position of the arrow when it's up, so it will move up or down by 14px when you add or remove this class */
.lift {
  bottom: 35px;
}
/*
End for the animated arrow
*/


.img_provisoire_rempli { 
width: 100%; 
}	

} 
 



@media screen and (min-width: 1520px) { 
.who_we_are__text {
     
   top:40px;
left:1200px;
     
	 
	 
}


.who_we_are__input {
width:200px;
height:41px;
border-radius:10px;
color: #fff;
background-color:#49C7EB;
}





.what_we_do__text { 
font-size: 40px; 
left:230px;
bottom:10px;
}
 
 

} 
 


@media screen and (min-width: 1920px) { 
.who_we_are__text {
     
   top:40px;
left:1600px;
     
	 
	 
}

.who_we_are__input {
width:200px;
height:41px;
border-radius:10px;
color: #fff;
background-color:#49C7EB;
}





.what_we_do__text { 
font-size: 40px; 
left:230px;
bottom:10px;
}
 

 




} 
 
/*
On definit le header based on the height

*/

/*



*/

.bg_who_we_are {
	
	
	background:url(../images/decoupes/who_we_are.png) no-repeat top ;	
	
	background-size:100% auto;
	 
	height:289px;
	
	
	
}


/*
Pour le backgroud de who we are

*/

/*
$bg-width: 1283px;
$bg-height: 289px;

.bg_who_we_are_background {
  background: url(../images/decoupes/who_we_are.png) 0 0 / cover no-repeat;
  padding-top: $bg-height / $bg-width * 100%;
  position: relative;
  overflow: hidden;
}
*/

.bg_who_we_are_text {
  position: absolute;
  bottom:15px;
  left:70px;
  font-size:36px; 
   
   
/* background-color:#F80F00; */
  background: red; 
  
  margin: 0; 
    
  min-width: 40%;
  padding: .25em 1em;
  text-align: center;
  color: white;
 /* border-right: 1px solid; */
   
font-family: "Roboto";
font-weight: 100;

   
  &:before {
    content: '';
    display: block;
    width: 500%;
    border-top: 1px solid;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  
  &:after {
    content: '';
    display: block;
    background: maroon;
    width: 50px;
    position: absolute;
    top: 0;
    right: -51px;
    height: 100%;
  }
}

/*

Fin de pour le background de Who we are 
*/






#full-width {
       
   } 
   
/*
Remove the left and right padding of Bootstrap
*/  

[class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}



.largeur_par_defaut {
	width:1350px !important;
	max-width:100%;
	overflow:hidden;
	text-overflow:inherit;
	 
	
}

.overflow_hidden {
	overflow:hidden;
	
}

.imgFull { 
width: 100%; 
}

.img_provisoire_rempli { 

 

}







 


/* ===== Buttons ===== */
.btn-lg,
.btn-group-lg > .btn {
  font-size: 14px;
  border-radius: 4px;
}
/*** Button Colors ***/
.btn-theme-primary {
  background: #dd4b39;
  background-image: -webkit-linear-gradient(top, #6c8ea0 0%, #dd4b39 100%);
  background-image: -o-linear-gradient(top, #6c8ea0 0%, #dd4b39 100%);
  background-image: linear-gradient(to bottom, #6c8ea0 0%, #dd4b39 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6c8ea0', endColorstr='#ffdd4b39', GradientType=0);
  border-color: #d73925;
  color: #ffffff;
}
.btn-theme-primary:hover,
.btn-theme-primaryfocus,
.btn-theme-primary:active {
  border-color: #c23321;
  background: #dd4b39;
  background-image: none;
  color: #ffffff;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-theme-secondary {
  background: #dd4b39;
  background-image: -webkit-linear-gradient(top, #6c8ea0 0%, #dd4b39 100%);
  background-image: -o-linear-gradient(top, #6c8ea0 0%, #dd4b39 100%);
  background-image: linear-gradient(to bottom, #6c8ea0 0%, #dd4b39 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6c8ea0', endColorstr='#ffdd4b39', GradientType=0);
  border-color: #d73925;
  color: #ffffff;
}
.btn-theme-secondary:hover,
.btn-theme-secondaryfocus,
.btn-theme-secondary:active {
  border-color: #c23321;
  background: #dd4b39;
  background-image: none;
  color: #ffffff;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}