/* CSS Document */

body      {
	margin :0px;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	border: 0px solid #999;
	width:80%;
} 
#en_tete {
	font-size: 10pt;
	color: #999;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}

#bandeau_haut {
	height: 100px;
	width: 100%;
	background-color: #820D12;
background: linear-gradient(90deg, rgba(255,255,255,1) 19%, rgba(130,13,18,1) 62%);
}

#contenu {
	padding-left: 0px;
	width: 100%;
}
#logos {
	height: 50%;
	width: 30%;
	padding-top: 0px;
	z-index: 3;
}
#numero_lettre {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 28px;
	font-style: normal;
	font-weight: bold;
	color: #FFF;
	text-align: right;
	position:absolute;
	left:350px;
	top:110px;
	width:80%;
}

a:link {
	text-decoration: none;
}
a:visited {
	font-weight:normal;
	}
a:hover {
	text-decoration: underline;
	color: #999;
}
a:active {
	text-decoration: underline;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	list-style-type: circle;
	color:#820D11;
}


ul        {
	list-style-position : outside;
	list-style-type:circle;
	margin-top : 0px;
	margin-bottom : 0px;
}   

li {
	padding-top:0px;
	color: #666;
	font-weight: bold;
	line-height: 15px;
}			
			                

p  {	margin-top :2px;margin-bottom:5px;padding-top: 2px;padding-right: 10px;	padding-bottom: 10px;	padding-left: 40px;}   

/**
* Effet titres
*/

h0 {
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  font-size: 92px;
  padding: 80px 50px;
  text-align: center;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
  }
  h0elegantshadow {
    color: #131313;
    background-color: #e7e5e4;
    letter-spacing: .15em;
    text-shadow: 
      1px -1px 0 #767676, 
      -1px 2px 1px #737272, 
      -2px 4px 1px #767474, 
      -3px 6px 1px #787777, 
      -4px 8px 1px #7b7a7a, 
      -5px 10px 1px #7f7d7d, 
      -6px 12px 1px #828181, 
      -7px 14px 1px #868585, 
      -8px 16px 1px #8b8a89, 
      -9px 18px 1px #8f8e8d, 
      -10px 20px 1px #949392, 
      -11px 22px 1px #999897, 
      -12px 24px 1px #9e9c9c, 
      -13px 26px 1px #a3a1a1, 
      -14px 28px 1px #a8a6a6, 
      -15px 30px 1px #adabab, 
      -16px 32px 1px #b2b1b0, 
      -17px 34px 1px #b7b6b5, 
      -18px 36px 1px #bcbbba, 
      -19px 38px 1px #c1bfbf, 
      -20px 40px 1px #c6c4c4, 
      -21px 42px 1px #cbc9c8, 
      -22px 44px 1px #cfcdcd, 
      -23px 46px 1px #d4d2d1, 
      -24px 48px 1px #d8d6d5, 
      -25px 50px 1px #dbdad9, 
      -26px 52px 1px #dfdddc, 
      -27px 54px 1px #e2e0df, 
      -28px 56px 1px #e4e3e2;
  }
 
  h0deepshadow {
    color: #e0dfdc;
    background-color: #333;
    letter-spacing: .1em;
    text-shadow: 
      0 -1px 0 #fff, 
      0 1px 0 #2e2e2e, 
      0 2px 0 #2c2c2c, 
      0 3px 0 #2a2a2a, 
      0 4px 0 #282828, 
      0 5px 0 #262626, 
      0 6px 0 #242424, 
      0 7px 0 #222, 
      0 8px 0 #202020, 
      0 9px 0 #1e1e1e, 
      0 10px 0 #1c1c1c, 
      0 11px 0 #1a1a1a, 
      0 12px 0 #181818, 
      0 13px 0 #161616, 
      0 14px 0 #141414, 
      0 15px 0 #121212, 
      0 22px 30px rgba(0, 0, 0, 0.9);
  }
  h0insetshadow {
    color: #202020;
    background-color: #2d2d2d;
    letter-spacing: .1em;
    text-shadow: 
      -1px -1px 1px #111, 
      2px 2px 1px #363636;
  }
  h0retroshadow {
	  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  font-size: 92px;
  padding: 80px 50px;
  text-align: center;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
    color: #2c2c2c;
    background-color: #d5d5d5;
    letter-spacing: .05em;
    text-shadow: 
      4px 4px 0px #d5d5d5, 
      7px 7px 0px rgba(0, 0, 0, 0.2);
  }
}
	
/**
* Fin Effet titres
*/
h6    {
    margin: 20px;
    font-style: normal;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
    font-size: 45pt;
    font-weight: bold;
    color: aliceblue;  
}
h1    {
	margin:0px;
	font-style: normal;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	font-weight: bold;
	color: #999;
	background-color: none;
}

h2 {
	padding-left: 15px;
	clear:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color : #FFFFFF;
	background: linear-gradient(blue, pink);
	background-image: url(https://previews.123rf.com/images/nata7777/nata77772010/nata7777201000132/156938049-.jpg) ; 
	linear-gradient: to left, 25%, 50%, 75%, 75%);
}

h3    { font-size : 14px; color : #5c8a97; display:inline; margin:0px}
h4    { font-size : 12px; color : #4b6870; display:inline; margin:0px} 

h6 {
    float: none;
    font-size: x-large;
    font-weight: bold;
    /* color: #00294b; */
    color: #D72727;
    text-indent: -15px;
    border-top: solid 1px #ccc;
    width: 100%;
    background-color: #fff;
    clear: right;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: right;
}
/**
* texte clignotant 
*/
.area {
	font-family: "Open Sans",  Impact;
	letter-spacing: 20px;
  text-align: center;
  font-size: 2.5em;
  color: #DC3C3E;
  letter-spacing: -7px;
  font-weight: 25;
  text-transform: uppercase;
  animation: blur .75s ease-out infinite;
  text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}

@keyframes blur {
  from {
    text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #7B96B8,
      0px 0px 150px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8,
      0px -10px 100px #7B96B8;
  }
}

/**
* Fin texte clignotant 
*/


div.rubrique-standard h6 span.fleche {
    float: left;
    font-size: 1.5em;
}

ul.liste-liens a:link, ul.liste-liens a:visited {
	color : #263033; text-decoration : none; font-weight: bold;}	
ul.liste-liens a:hover {
	color : #5494a4;text-decoration : underline;font-weight: bold;}
ul.liste-liens li {padding-top:0px}

div.Lien_sous_rubrique {float: right; margin-top:17px}




/**
* Bug dans la charte :
* les balises h3 attribut "display: inline" qui fait qu'on ne
* retourne pas à la ligne avant un <h3>. Idem pour <h4> 
*/

h3 {display: block;clear:right;}

h4 {display: block}


/**
* Style pour les paragraphes
*/
p {
	text-align: justify;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #999;
}
.Texte_tableaux {
	text-align: justify;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #999;
	margin-left: 5px;
	padding-left: 5px;
}
.Texte_images-encadrées {
	text-align: justify;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #999;
	margin-left: 0px;
	padding-left: 0px;
}
.Texte_défilant_rouge {
	text-align: justify;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #F00;
	margin-left: 0px;
	padding-left: 0px;
}
.exposant {
	font-size: 8px;
	font-family: Arial, Helvetica, sans-serif;
	vertical-align: 3px;
	position: relative;
}
.Texte_9_pt {
	text-align: left;
	font-size: 9px;
	font-family: Arial, Helvetica, sans-serif;
	position: relative;
}

.ours p {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
}


.Lien_sous_rubrique {
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
	font-weight: bold;
	font-size: 13px;
}



.Agenda_CGC_collaboratoin {
	font-family: Arial, Helvetica, sans-serif;
	color: #820D11;
	font-weight: bold;
	font-size: 13px;
}
.Lien_orange {
	font-family: Arial, Helvetica, sans-serif;
	color: #820D11;
	font-weight: bold;
	font-size: 16px;
}
.Sommaire {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20pt;
	font-style: italic;
	font-weight: bold;
	color: #999;
}
.en_tete {
	font-size: 10pt;
	color: #999;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;

}
.signature {
	font-size: 13px;
	color: #999;
	font-style: normal;
	font-family: Arial, Helvetica, sans-serif;
	text-align: right;
}

.icones_left { 
    float: left;
    margin-right: 10px;
    hspace: "5";
	box-shadow: 4px 4px 5px #aaa;
}




/**
 * Style pour la flèche montante
 */

.haut-page {
    float: right;
    font-size: 0.7em;
    color: #FFFFFF;
    padding-top: 2px;
    text-align: right;
	padding-right: 20px;
}
 a.haut-page:hover {
        color: #ccc;
    }

    a.haut-page div.fleche {
        font-size: 1.5em;
    }

.retour-haut {
	margin-right: 20px;
	margin-bottom: 0px;
	display: block;
	float: right;
}


.retour-haut img {	border-style: none;}

.retour-haut p {margin: 0 0 0 10px;	font-size: Smaller;	}
.ours p strong {color: #999;}
.numero_lettre {
	font-size: 24px;
	color: #FFF;
	font-style: normal;
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	text-align: right;
	vertical-align: bottom;
}


/* AJOUTS trouvés sur le net */




.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left:auto
}

@media (min-width: 576px) {
    .container {
        max-width:540px
    }
}

@media (min-width: 768px) {
    .container {
        max-width:720px
    }
}

@media (min-width: 992px) {
    .container {
        max-width:960px
    }
}

@media (min-width: 1200px) {
    .container {
        max-width:1140px
    }
}

.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left:auto
}






/* Navigation principale */

.main-nav, a.btn-primary {
 background-color: #fff;
 border-top: solid 2px #818181;
 border-bottom: solid 2px #818181;
 color: var(--text-color);
}

.main-nav {
 padding: 0;
}

.main-nav .navbar-collapse {
 padding: 0 5px 20px 10px;
 font-family: var(--font-2);
 font-weight: bold;
}

.main-nav a {
 color: var(--text-color);
 font-size: 1.1rem;
}

.main-nav .nav-item {
 padding: 5px;
}

.main-nav .nav-item.active, .main-nav .nav-item.active .nav-link {
 color: var(--color-primary);
}

.main-nav .nav-item:hover,.main-nav .nav-link:hover, .main-nav .nav-item:focus, .main-nav .nav-link:focus {
 color: var(--color-secondary);
}

.main-nav .navbar-toggler {
 border: 0px;
 width:100%;
 padding: 10px 0;
 font-family: var(--font-2);
}

.main-nav .navbar-toggler:hover {
 color: var(--color-secondary);
}


.main-nav .navbar-toggler::before, .main-nav .navbar-toggler::after {
    -webkit-transition:0.4s;
    -moz-transition:0.4s;
    -o-transition:0.4s;
    transition:0.4s;
 display: inline-block;
 content: "\25be";
 font-size: 1.1rem;
 margin-right: 10px;
}

.main-nav .navbar-toggler[aria-expanded="true"]::before, .main-nav .navbar-toggler[aria-expanded="true"]::after {
 transform: rotate(180deg);
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -o-transform: rotate(180deg);
}

.main-nav .navbar-toggler-icon {
 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (min-width: 992px) { 
 .main-nav .navbar-collapse {
 padding: 0;
 justify-content: center;
 }

 .main-nav .nav-item {
 padding: 10px 10px 5px 10px;
 border-bottom: 5px solid transparent;
 -webkit-transition : border 200ms ease-out;
 -moz-transition : border 200ms ease-out;
 -o-transition : border 200ms ease-out;
 transition : border 200ms ease-out;
 }
}

@media(min-width: 1200px) {
 .main-nav a {
 font-size: 1.2rem;
 }

	
	
	
	
	
	
	
	
	
	
	/* IMPORT responsive Videos lax */

/* Mobile */
@media (max-width: 320px) {
.logos {
	width: 10%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
	.bandeau_haut {
	width: 10%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
	
	
	.body {
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 40%;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 10%;
	font-size: 18px;
}
	
	.en_tete {
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 40%;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 100%;
	font-size: 18px;
}
	
	
	
	
	
	
	
.container header nav {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	float: none;
	display: none;
}
header nav ul {
}
nav ul li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	text-align: center;
}
.text_column {
	width: 100%;
	text-align: justify;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.thumbnail {
	width: 100%;
}
.footer_column {
	width: 100%;
	margin-top: 0px;
}
.parallax {
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 40%;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 100%;
	font-size: 18px;
}
.parallax_description {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 90%;
	margin-top: 25px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 12px;
	float: none;
	text-align: center;
}
.banner {
	background-color: #2D9AB7;
	background-image: none;
}
.tagline {
	margin-top: 20px;
	line-height: 22px;
}
.hero_header {
	padding-left: 10px;
	padding-right: 10px;
	line-height: 22px;
	text-align: center;
}
}

/* Small Tablets */
@media (min-width: 321px)and (max-width: 767px) {
.logo {
	width: 100%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: #043745;
}
.container header nav {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	float: none;
	overflow: auto;
	display: inline-block;
	background: #52bad5;
}
header nav ul {
	padding: 0px;
	float: none;
}
nav ul li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	text-align: center;
	padding-top: 8px;
	padding-bottom: 8px;

}
.text_column {
	width: 100%;
	text-align: left;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.thumbnail {
	width: 100%;
}
.footer_column {
	width: 100%;
	margin-top: 0px;
}
.parallax {
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 40%;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 100%;
	font-size: 18px;
	
}
.parallax_description {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 30%;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	float: none;
	width: 100%;
	text-align: center;
}
	
	.banner {
	height: 72%;
	}

	
.thumbnail {
	width: 50%;
}
.parallax {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 20%;
}
.parallax_description {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	padding-top: 30px;
}
.banner {
	padding-left: 20px;
	padding-right: 20px;
}
.footer_column {
	width: 100%;
}
}

/* Small Desktops */
@media (min-width: 768px) and (max-width: 1096px) {
.text_column {
	width: 100%;
}
.thumbnail {
	width: 50%;
}
.text_column {
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.banner {
	margin-top: 0px;
	padding-top: 0px;
	height: 50%;
}
.container .secondary_header ul {
	margin-top: 0%;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 0px;
	width: 100%;
}
.secondary_header ul li {
	list-style: none;
	float: left;
	margin-right: auto;
	margin-top: 0px;
	font-family: "Source Sans Pro";
	font-weight: normal;
	color: #717070;
	letter-spacing: 1px;
	margin-left: auto;
	text-align: center;
	width: 16%;
	transition: all 0.3s linear;
}
.secondary_header ul li:hover {
	color: #717070;
	cursor: pointer;
}

.clear {
		clear: both;
}