/* Babelleir - GeneaKat - skin - Babelleir Flex */

@font-face{
	font-family:'fontawesome';
	font-style:normal;
	font-weight:normal;
	src:url("fonts/fontawesome-webfont.eot?v=4.2.0");
	src:url("fonts/fontawesome-webfont.eot?#iefix&v=4.2.0") format("embedded-opentype"),url("fonts/fontawesome-webfont.woff?v=4.2.0") format("woff"),url("fonts/fontawesome-webfont.ttf?v=4.2.0") format("truetype"),url("fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") format("svg")}

@font-face {
	font-family: 'Merriweather';
	src: url('fonts/Merriweather-Regular.ttf')  format('truetype');
	font-weight: normal;
    font-style: normal;
	}
@font-face {
	font-family: 'Jura';
	src: url('fonts/Jura-Regular.ttf')  format('truetype');
	font-weight: normal;
    font-style: normal;
	}
@font-face {
	font-family: 'Lora';
	src: url('fonts/Lora-Regular.ttf')  format('truetype');
	font-weight: normal;
    font-style: normal;
	}
@font-face {
	font-family: 'Lora';
	src: url('fonts/Lora-Italic.ttf')  format('truetype');
	font-weight: normal;
    font-style: italic;
	}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-Regular.ttf')  format('truetype');
	font-weight: normal;
    font-style: normal;
	}

/* Ombre du haut de la page appliquée au body */
body:before {
   content: "";
   position: fixed;
   top: -10px;
   left: 0;
   height: 10px;
   z-index: 100;
   -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}
/* fin Ombre du haut de la page appliquée au body */


/* HTML */
* {
  margin: 0;
  padding: 0;
  border: 0px none;
  outline: 0px none;
  vertical-align: baseline;
  box-sizing: border-box;
}
/* HTML */
html,
body {
  font-family: Raleway, Helvetica, sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  color: #333;
  font-size:1rem;
  background-color: #fff;
  height: 100%;
  width: 100%;
  line-height:normal;
}
h1 {
   /*font-weight: bold;*/
   font-size: 200%;
   line-height:120%;
   
}
h2 {
   font-size: 120%;
   color: #333;
   margin-top: 10px;
}
h3 {
   margin-top: 10px;
   font-size: 24px;  
}
a, a:visited {
  text-decoration: none;color: hsl(324, 70%, 45%);animation: cooleur 6s infinite;font-weight:normal;
}
/*a {
  text-decoration: none;
  color: #333;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}*/
a:hover {
  color: #000!important;
  text-decoration: none !important;
 /* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;modif Kat*/
}
a:visited {}
ul {
  list-style: outside none disc;
  text-align: left;
  margin-left: 18px;
}
li {
  
}
.histoire {  color: #14153a;
padding: 1% 5%;
  margin:1% 5%;
  max-height:200px;
  overflow-y:auto;
  background-color: #f0f1fc;
 border: solid 0px #1D1F54;
  /*border-radius: 10px;*/
  box-shadow: 0 0 0 0px #2a2d7a inset, 0 0 0 6px rgba(255, 255, 255, 0.6) inset, 0 0 40px #14153a inset, 0 10px 15px -10px rgba(0,0,0,0.6);}
  }
img {max-width:100%; height:auto}
hr {
   border: 0;
   height: 0;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
   margin: 16px 0;
}
/* tables */
td {padding: 5px;}
/* forms */
#main-content.w23 .cbox .w45 form h3  {
   margin-top: 28px;
   color: #333;
   border-bottom: solid 3px #1D1F54;
   font-size:20px;
} 
#main-content.w23 .cbox .w34 form h2 {
	color: #333;
	font-size:27px;
}
#main-content.w23 .cbox .w23 form p a, #main-content.w23 .cbox .w34 form p a {
  border-radius: 5px;
  border: 1px solid #1D1F54;
  cursor : pointer;
  padding: 8px 12px;
  text-shadow:none;
}
#main-content.w23 .cbox .w23 form p a:hover, #main-content.w23 .cbox .w34 form p a:hover {
	color: #333;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bdb7ac+0,f9f8f4+100 */
background: #bdb7ac; /* Old browsers */
background: -moz-linear-gradient(top,  #bdb7ac 0%, #f9f8f4 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #bdb7ac 0%,#f9f8f4 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #bdb7ac 0%,#f9f8f4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bdb7ac', endColorstr='#f9f8f4',GradientType=0 ); /* IE6-9 */
  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}
#main-content.w23 .cbox .w23, #main-content.w23 .cbox .w34 {margin-bottom: 4%;}
form fieldset label span {color:#333;}


fieldset {margin-top: 20px;}
label {margin-top: 22px;}
label span {font-size: 12px; color: #0059b3; float: right;}
label span::before {content:'('}
label span::after {content:')'}
fieldset .field {width:100%}
.field {
   padding: 9px 12px;
   border: solid 1px #333;
   border-radius: 5px;
   margin-bottom: 14px;
   margin-top: 7px;
   font-size: 105%;
	min-height:42px;
}
.field:focus {
   background:#F0F0F1;
   border-color: #0097FF;
}
.block {
   width: 100%;
	min-width: initial !important;
}
/* Form 2 columns - adHoc 0.61 Babelleir */ 
fieldset.colbabe-2 {display:grid; grid-template-columns: 48% 48%; grid-gap:4%}
fieldset.colbabe-2 label {margin-top: 0;}
fieldset.colbabe-2 .span-2 {grid-column: 1 / span 2;} /*end Form 2 columns */

textarea {resize:none}
button, .btn, a.btn {
   margin : 3px;
   border : solid 1px #333;
   background: #fff;
   color: #333;
   text-shadow: 0 1px white;
   font-family : inherit;
   font-size : 80%;
   cursor : pointer;
   padding: 8px 12px;
   min-width: 90px;
   text-align:center;
   border-radius: 5px;
}
button:hover, .btn:hover {
       
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bdb7ac+0,f9f8f4+100 */
background: #bdb7ac; /* Old browsers */
background: -moz-linear-gradient(top,  #bdb7ac 0%, #f9f8f4 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #bdb7ac 0%,#f9f8f4 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #bdb7ac 0%,#f9f8f4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bdb7ac', endColorstr='#f9f8f4',GradientType=0 ); /* IE6-9 */
   border-color: #333;
  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}
.btn-group {
   margin: 16px auto;
   white-space: nowrap;
   text-align: center;
   display: inline-block;
   width: 100%;
}
.btn:first-child {float: left;}
.btn:last-child {float: right;}
.btn-outline {}
.btn-big {padding: 5px;}
.btn-med {min-width: 90px;padding: 6px 10px);}
.btn-sml {padding: 1px;}

input[type=checkbox] {
      display:none;
}
label + input[type="checkbox"] {
  /*background-image:url(img/chkbx.png);*/
}

input[type="checkbox"] + label {
	padding-left: 50px;
	height: 30px;
	display: inline-block;
	line-height: 25px;
	background-repeat: no-repeat;
	background-position: 0 0;
	cursor: pointer;
   /*background-image:url(img/chkbx.png);*/
   margin-top:12px;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;   
}
input[type=checkbox]:checked + label {
   background-position: 0 -30px;
}

input.field::placeholder {color:#a4b0ba}
.infoform {font-size:85%; margin:8px 0; padding:12px 8px; background:#f0f8ff}
		
/* glyphs 64*/
form h2 {color:#d4ad82}
.glyph64 {
   height: 78px;
   width: 78px;
   padding: 4px;
   border: solid 1px #333;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f9f8f4+0,bdb7ac+100 */
background: #f9f8f4; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #f9f8f4 0%, #bdb7ac 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #f9f8f4 0%,#bdb7ac 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #f9f8f4 0%,#bdb7ac 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f8f4', endColorstr='#bdb7ac',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


   margin-right: 14px;
   float: left;
   border-radius: 5px;
  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}

/* grid */
.w12 {
  width: 48%;
  float: left;
  margin-left: 4%;
}
.w13 {
  width: 30.6%;
  float: left;
  margin-left: 4.1%;
}
.w23 {
  width: 65.3%;
  float: left;
  margin-left: 4.1%;
}
.w14 {
  width: 22.75%;
  float: left;
  margin-left: 3%;
}
.w24 {
  width: 48.5%;
  float: left;
  margin-left: 3%;
}
.w34 {
  width: 74.25%;
  float: left;
  margin-left: 3%;
}
.w45 {
  width: 79.5%;
  float: left;
  margin-left: 2.5%;
}
.w35 {
  width: 59%;
  float: left;
  margin-left: 2.5%;
}
.w25 {
  width: 38.5%;
  float: left;
  margin-left: 2.5%;
}
.w15 {
  width: 18%;
  float: left;
  margin-left: 2.5%;
}
.w11,
.w22,
.w33,
.w44,
.w55 {
  width: 100%;
  float: none;
  margin: 0;
  clear:both;
}
/* general styles */
.nowrap {white-space: nowrap;}
.evidence {
  background-color: #D8D8D8;
  font-weight: 600;
  padding: 0 4px;
}
.quick-links {
   text-shadow: none;
   display: none;
   text-align: right;
   background: linear-gradient(#14153a, #2a2d7a);
   height: 34px;
   margin-top:6px;
   padding: 8px 12px 0px 0px;
   margin: 6px 1px 0px 1px;
   font-weight:initial;
   font-size:10px;
   color: #fff;
   padding-bottom: 60px;
   border-radius: 5px;
}
.quick-links img, .quick-links a img {
   padding: 1px;
   height:20px;
   width:20px;
   cursor:pointer;
   background: #fff;
   margin: 2px 4px 0 2px;
}   
.quick-links img:hover, .quick-links a:hover img {
   height:22px;
   width:22px;
   margin: 0 2px 0 2px;
}
/* Container */
#container {
  /*min-height: calc(100% - 30px);*/
  overflow: hidden;
  /*margin:auto;*/
  width: 100%;
  /*padding:1%;*/
  
}
.wrapper {
  max-width: 100%;
  margin: 0 3%;
  clear:both;
  overflow:hidden;
  display: -webkit-box; 
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex; 
  display: flex;
}
.wrapper div:first-child {
  margin-left: 0;
}
/* header */
#header {
  top:0;
  width: 100%;
  height: auto;
  background: #14153a;
  background: linear-gradient(#14153a, #2a2d7a);
  margin-bottom: 20px;
  box-shadow: 1px 1px 3px #ffffff;
  text-shadow:rgb(64,49,25) -1px -1px 0;
}

#head-mid div.wrapper div {float:left;height: auto; }
#head-btm {margin:.02rem 0;background: #14153a; background: linear-gradient(#14153a, #1f2159, #14153a);border-top:1px solid #fff}

/* header elements */
#logo {
  height: auto;
}
#logo img {
	padding: 10px 10px 0px 10px;
}
#site_title {
   text-shadow:rgb(64,49,25) -1px -1px 0;
   color: #E9E9E9;
   font-size: 150%;
   line-height: 100%;
   height: auto;
   margin-top: 8px;
   font-family: Merriweather, cursive;
}
#site_slogan {
   font-family:  Merriweather, cursive;
   font-style: italic;
   font-size: 100%;
   line-height: 150%;
   color: #fff;
   position: absolute;
   width: 80%;
   height: 100px;
   padding-top: 57px;
   padding-left: 120px;
   display: flex;
   align-items:flex-end;

}
#date {
  width: 50%;
  margin-left:1.3%;
  padding: 5px;
  float: right;
  color: #fff;
}


#user-panel{
	position: absolute;
	top: 2.7%;
	right: 1.5%;
}
#src-head {
   margin-right: 34px;
   margin-top: -3px;
   border: solid 1px #fff;
   border-radius: 4px;
   height:29px;
   background: #05416E;
}
#search {vertical-align:text-top; height:28px; border: none}

#src-head form input[type=submit] {
   background: url("../../include/ico/search2.png") no-repeat scroll 40% / 14px;
   height: 27px;
   width:26px;
   vertical-align:text-top;
}
#login {  display: inline-block;
  padding: 6px 12px;
  margin-top: 6%;
  margin-right: 25px;

  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
    color: #6c460c;
    text-shadow: 0 1px white;
    
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bdb7ac+0,f9f8f4+100 */
background: #bdb7ac; /* Old browsers */
background: -moz-linear-gradient(top,  #bdb7ac 0%, #f9f8f4 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #bdb7ac 0%,#f9f8f4 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #bdb7ac 0%,#f9f8f4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bdb7ac', endColorstr='#f9f8f4',GradientType=0 ); /* IE6-9 */
  border-color: #ccc;
  box-shadow: inset 0px 0px 3px black;

  }
  
  #login:hover {
	  
	text-decoration: none;
  color: #6c460c;
  text-shadow: 0 1px white;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f9f8f4+0,bdb7ac+100 */
background: #f9f8f4; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #f9f8f4 0%, #bdb7ac 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #f9f8f4 0%,#bdb7ac 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #f9f8f4 0%,#bdb7ac 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f8f4', endColorstr='#bdb7ac',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  border-color: #ccc;
  box-shadow: inset 0px 0px 3px black;
  }
  #login:focus {
	  text-decoration: none;
  color: #6c460c;
  text-shadow: 0 1px #fff;
  
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9f8f4+0,bdb7ac+100 */
background: #f9f8f4; /* Old browsers */
background: -moz-linear-gradient(top,  #f9f8f4 0%, #bdb7ac 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f9f8f4 0%,#bdb7ac 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f9f8f4 0%,#bdb7ac 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f8f4', endColorstr='#bdb7ac',GradientType=0 ); /* IE6-9 */
  
  border-color: #ccc;
  box-shadow: inset 0px 0px 3px black
}
  
  #login a {
	  color: #6c460c; 
	  text-decoration: none;
	  text-shadow: 0 1px white;
  }



#navmob-btn:hover {
   text-decoration:none;
   color:#FFF;
   border: solid 1px #FFF;
}


#SwitchLang {
   margin-left: 10px;
   text-align: center;
   width: 40px;
}

#flags-panel {
  position: absolute;
  border-radius: 3px;
  color: white;
  display: none;
  background: #d4ad82;
  width: 50px;
  padding: 10px;
  border:1px inset #333;
  z-index: 20;
}
#flags-panel img {
  padding-top: 10px;
}


/* menu bar*/
#menu-bar {font: bold 110%; width: 96%;}
#menu-bar a {
    display: inline-block;
  padding: 6px 12px;
  margin-top: 6px;
  margin-right: 7px;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
    color: #6c460c;
    text-shadow: 0 1px white;
    
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bdb7ac+0,f9f8f4+100 */
background: #bdb7ac; /* Old browsers */
background: -moz-linear-gradient(top,  #bdb7ac 0%, #f9f8f4 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #bdb7ac 0%,#f9f8f4 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #bdb7ac 0%,#f9f8f4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bdb7ac', endColorstr='#f9f8f4',GradientType=0 ); /* IE6-9 */
  border-color: #ccc;
  box-shadow: inset 0px 0px 3px black;
  

}
#menu-bar a:hover {
	text-decoration: none;
  color: #6c460c;
  text-shadow: 0 1px white;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f9f8f4+0,bdb7ac+100 */
background: #f9f8f4; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #f9f8f4 0%, #bdb7ac 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #f9f8f4 0%,#bdb7ac 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #f9f8f4 0%,#bdb7ac 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f8f4', endColorstr='#bdb7ac',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  border-color: #ccc;
  box-shadow: inset 0px 0px 3px black;

  }
#menu-bar a:focus {
  color: #6c460c;
  text-shadow: 0 1px #fff;
  
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9f8f4+0,bdb7ac+100 */
background: #f9f8f4; /* Old browsers */
background: -moz-linear-gradient(top,  #f9f8f4 0%, #bdb7ac 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f9f8f4 0%,#bdb7ac 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f9f8f4 0%,#bdb7ac 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f8f4', endColorstr='#bdb7ac',GradientType=0 ); /* IE6-9 */
  
  border-color: #ccc;
  box-shadow: inset 0px 0px 3px black
}

nav#menu-bar ul#menu li#menu_home a::before {content: "\f015  ";font-family: "fontawesome";}
nav#menu-bar ul#menu li:nth-child(2) a::before {content: "\f02d  ";font-family: "fontawesome";font-weight: normal;}
nav#menu-bar ul#menu li:nth-child(3) a::before {content: "\f0e8  ";font-family: "fontawesome";font-weight: normal;}
nav#menu-bar ul#menu li:nth-child(4) a::before {content: "\f002  ";font-family: "fontawesome";font-weight: normal;}
nav#menu-bar ul#menu li:nth-child(5) a::before {content: "\f083  ";font-family: "fontawesome";font-weight: normal;}
nav#menu-bar ul#menu li:nth-child(6) a::before {content: "\f003  ";font-family: "fontawesome";font-weight: normal;}

#user-panel #login a::before  {content: "\f007  ";font-family: "fontawesome";}



div#header-top #menu,
div#header-btm #menu {
  display: inline-block;
  width: 95%;
}
#navmob-btn {display:none}
ul#menu li {float: left;margin: 0;}

/* sections */
#HeroUnit {
  padding: 40px 80px;
  font-size: 180%;
  color: #333;
  margin-top:2%;
}
#UpTab, #DownTab {
   text-align: center;
   font-weight: bold;
   font-size: 90%;
   color: #333;
   padding-bottom: 1.5%;
   margin-top: 2% !important;
}
#UpTab {

}
.UpTab.w13,.UpTab.w12,.UpTab.w14,.UpTab.w15,.UpTab.w11 {margin-top: 1.5%;background:rgba(240, 240, 240, 0.7);padding: 8px;border-radius: 5px;border: 1px solid #1e4a74;}

div.UpTab > div.ltit {
  font-size: 16px;
  background-color: #3373AD;
  color: #fff;
  text-align: center;
}
#DownTab {

}
#DownTab-0.box.w11,#DownTab-0.box.w12,#DownTab-0.box.w13,#DownTab-0.box.w14,#DownTab-0.box.w15 {margin-top: 1.5%;background:rgba(240, 240, 240, 0.7);padding: 8px;border-radius: 5px;border: 1px solid #1e4a74;}
#DownTab-1.box.w11,#DownTab-1.box.w12,#DownTab-1.box.w13,#DownTab-1.box.w14,#DownTab-1.box.w15 {margin-top: 1.5%;background:rgba(240, 240, 240, 0.7);padding: 8px;border-radius: 5px;border: 1px solid #1e4a74;}
#DownTab-2.box.w11,#DownTab-2.box.w12,#DownTab-2.box.w13,#DownTab-2.box.w14,#DownTab-2.box.w15 {margin-top: 1.5%;background:rgba(240, 240, 240, 0.7);padding: 8px;border-radius: 5px;border: 1px solid #1e4a74;}
#DownTab-3.box.w11,#DownTab-3.box.w12,#DownTab-3.box.w13,#DownTab-3.box.w14,#DownTab-3.box.w15 {margin-top: 1.5%;background:rgba(240, 240, 240, 0.7);padding: 8px;border-radius: 5px;border: 1px solid #1e4a74;}
#DownTab-4.box.w11,#DownTab-4.box.w12,#DownTab-4.box.w13,#DownTab-4.box.w14,#DownTab-4.box.w15 {margin-top: 1.5%;background:rgba(240, 240, 240, 0.7);padding: 8px;border-radius: 5px;border: 1px solid #1e4a74;}

.clearfix {clear: both;padding-bottom:1.5%}


/* page */

#page .wrapper {
  display: flex; 
 }

#Main {
  margin-top: 1.5%;
  background:rgba(240, 240, 240, 0.7);
  padding: 8px;
  -webkit-box-shadow: 0px 0px 10px rgba(255, 255, 255,.8);
  -moz-box-shadow: 0px 0px 10px rgba(255, 255, 255,.8);
  box-shadow: 0px 0px 10px rgba(255, 255, 255,.8);
  border-radius: 5px;
  border: 1px solid #4145bb;
  }
#Main.w23,#Main.w24 {padding-top: 0.4%;margin-bottom: 1em;}
#Main.w23 .box,#Main.w24 .box {margin-top: 1.5%;}


#SideBar1 {
  margin-top: 1.5%;
  background:rgba(240, 240, 240, 0.7);
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #333;
}

#SideBar0 {
  /*margin-top: 1.5%;*/
  /*background:rgba(240, 240, 240, 0.7);*/
  padding: 8px;
  border-radius: 5px;
  /*border: 1px solid #333;*/
}

#main-content {
  margin-top: 1.5%;
  background:rgba(240, 240, 240, 0.7);
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #4145bb;
}

#main-content.w23 {
  /*background-image: url(img/cuir-4.jpg);*/
  background:rgba(240, 240, 240, 0.7);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid #4145bb;
  border-radius: 5px;
  margin-bottom: 1em;
}
#main-content.w33 {
  margin-bottom: 1em;
}

#main-content.w33 .cbox {
 /* background-image: url(img/cuir-1.jpg);*/
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  /*box-shadow: 1px 1px 3px #ffffff;*/	
}
#main-content.w23 .cbox	{
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 3% 2%;  
}

#page {
  margin-top: 2%;
  }
 #pg-idx .w12 h4 a::before {
 content: "\f0a4";
 font-family: "fontawesome";
 margin-right: 2%;
 }
 #pg-idx .w12 h4 a {
   margin : 0;
   background: transparent;
   color: #333;
   text-shadow: 0 1px white;
   font-family : inherit;
   font-size : 70%;
   cursor : pointer;
   padding: 8px 12px;
   min-width: 90px;
   text-align:center;
   border-radius: 5px;
   /*line-height: 2.5em;*/ 
 }

.cbox p {margin-bottom:8px;}
.ctit, .ltit {

}
h2.ctit, .ctit {
   font-size: 32px;
   color: #333;
   text-shadow: 0 1px white;

}
/* side boxes */
.box {
   margin-top:1.5%;
   clear: both;
}
.right-side.box {
	color: #14153a; 
	padding: 15px 0px; 
	margin: 16px 0px; 
	background-color: #f0f1fc; 
	border-radius: 10px;
	box-shadow: 0 0 0 5px #2a2d7a inset, 0 0 0 6px rgba(255, 255, 255, 0.6) inset, 0 0 40px #14153a inset, 0 10px 15px -10px rgba(0,0,0,0.6);}
	
.right-side.box.ltit{
	padding-top: 16px !important;
}
	
.ltit {
  font-size: 105%;
  /*padding: 10px;*/
  width: 70%;
  margin: 0px 15% !important;

font: normal 24px 'Raleway', Verdana, Helvetica, sans-serif; text-align: center; color: #fff; font-variant:small-caps; background: #14153a; background: linear-gradient(#14153a, #2a2d7a, #14153a); padding: 5px; margin: 0; border-radius: 5px;
}
/* side menus */
.catitem, .rubr {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   background: none;
   padding:5px 9px 0px 9px;
   margin: 0;
}
ul.item {list-style: inside none none;padding-left: 30px !important;}
li.item {
  padding: 6px 9px;
  border-bottom: dotted 1px #d1d1d1;
  font-size: 90%;
  font-weight: bold;
  margin:0;
}
.item a {display:block}
.mark-cat {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 2px 12px 0 0;

}

.mark-cat.active {
	background-color: none;
}
.mark-item.active {
	display: inline-block;
	width: 0px;
	height: 0px;
	margin: 0px 20px 0 0;
	background: none;
}
.mark-item.active::before {
	font-family:"fontawesome";
	content: "\f00c";
	color:#81d130;
	background: none;
}
.mark-cat.open, .mark-cat.close {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0px 12px 0px 0px;
	font-size: 80%;
	font-weight: bold;
	text-align: center;
	color: #320000;
	border: solid 0px #D7D7D7;
	line-height: 15px;
	background:none;
}
.mark-cat.open::after {
	font-family:"fontawesome";
	color: #fff;
	content: "\f0a9";	color:#1C1E51;
	background: none;

	}

.mark-cat.close::before {
	font-family:"fontawesome";
	color: #575757;
	content: "\f062";
}
/*.active {
   text-shadow: 1px 1px #aaa;
   color:#d4ad82;
   text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}*/
/* footer */
#footer {
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-size: 70%;
  /*padding-bottom: 0.5%;*/
  
  margin-top:2%;
  -webkit-box-shadow: 0px 0px 10px rgba(255,255,255,.8);
  -moz-box-shadow: 0px 0px 10px rgba(255, 255, 255,.8);
  box-shadow: 0px 0px 10px rgba(255, 255, 255,.8); 
  margin-bottom: 3em !important;
}
#footer .btn {
	color:#fff;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	border-color: #fff;
}
#footer .btn:hover {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bdb7ac+0,f9f8f4+100 */
background: #bdb7ac; /* Old browsers */
background: -moz-linear-gradient(top,  #bdb7ac 0%, #f9f8f4 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #bdb7ac 0%,#f9f8f4 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #bdb7ac 0%,#f9f8f4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bdb7ac', endColorstr='#f9f8f4',GradientType=0 ); /* IE6-9 */
text-shadow: 0 1px white;
color: #333;
border-color:#333;
  -webkit-box-shadow: 0px 0px 10px rgba(255,255,255,.8);
  -moz-box-shadow: 0px 0px 10px rgba(255, 255, 255,.8);
  box-shadow: 0px 0px 10px rgba(255, 255, 255,.8); 
}
#foot-box-0 .ltit, #foot-box-1 .ltit, #foot-box-2 .ltit, #foot-box-3 .ltit, #foot-box-4 .ltit  {
  -webkit-box-shadow: 0px 0px 10px rgba(255,255,255,.8);
  -moz-box-shadow: 0px 0px 10px rgba(255, 255, 255,.8);
  box-shadow: 0px 0px 10px rgba(255, 255, 255,.8); 	
}
#foot-box-0, #foot-box-1, #foot-box-2, #foot-box-3, #foot-box-4 {
  font-size: 100%;
  margin-top: 1.5%;
  background:rgba(0, 0, 0, 0.5);
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #000;
  }
  #foot-box.w13 .ltit a::before {
	font-family:"fontawesome";
	content: "\f00c";
	color:#81d231;
	background: none;

  }
/* info-footer */
#info-footer {
  background: #212361;
  color: #FAF6F6;
  height: 20px;
  font-size: 0.6em;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  z-index: 110;
}

/* infofooter */
#info-footer .wrapper {
  max-width: 96%;
  display: flex;
  font-size: 1em;
  padding: 3px 0 3px 0;
}

#info-footer div {
  height: auto !important;
  color: #FFF;
}

#info-footer div a {
  color: #9797ff;
}

#info-footer div a:hover {
  color: #fff !important;
}

#gen-time {
  text-align: center;
  text-shadow: none;
}

#gen-time::before {
  font-family: "fontawesome";
  color: #37f83a;
  content: "\f01e";
  padding-right: 1.5%;
}

#adHoc-link, #adHoc-link a {
  text-align: right;
  text-shadow: none;
    color: #fff !important;
}

#adHoc-link::before {
  font-family: "fontawesome";
  color: #f7c437;
  content: "\f1c9";
  padding-right: 1.5%;
}

#skin-author, #skin-author a {
  text-shadow: none !important;
  color: #fff !important;
}

#skin-author::before {
  font-family: "fontawesome";
  color: #f7c437;
  content: "\f06c";
  padding-right: 1.5%;
}


/* pagination */
ul.pager {
  margin: 0;
  text-align: center;
  color: #333;
  list-style: none;
}
.pager li,
.pagernext,
.pagerprev {
  padding: 8px;
  border-radius: 5px;
  display: inline-block;
  margin: 0;
  border: solid 1px #2a2d7a;
}
.pagernext,
.pagerprev {
  background: /*#14153b; background: linear-gradient(#14153a, #2a2d7a, #14153a);*/inherit;
  color: /*rgba(255, 255, 255, 0)*/#2a2c7b;
  float: right;
  font-size: 80%;

}
  
.pagernext:hover,
.pagerprev:hover {
   border-color:/* #333*/#2a2c7b;
  -webkit-box-shadow: 0px 0px 10px rgba(40,43,115,.8);
  -moz-box-shadow: 0px 0px 10px rgba(40,43,115,.8);
  box-shadow: 0px 0px 10px rgba(40,43,115,.8);
}
.pagernext a::after {content: "  \f0a9";font-family: "fontawesome";font-weight: normal;text-shadow:none;color:#2a2c7b;}
.pagernext a:hover {color:#fff;}
.pagerprev a::before {content: "\f0a8  ";font-family: "fontawesome";font-weight: normal;text-shadow:none;color:#2a2c7b;}
.pagerprev a:hover {color:#fff;text-shadow:none !important;}

a.pagernext,
a.pagerprev {
  color: #fff;
  text-shadow: none !important;
}
.pagerprev {
  float: left;
  padding-left: 0;
}

/* pages */

nav #pg-idx h2{font-weight: bold;}
.btn-scroll-up, .btn-scroll-down{
   margin-left:80px;
   cursor:pointer;
   width: 0;
   height: 0;
   border: solid 30px transparent;
}
.btn-scroll-up{border-bottom: solid 15px #1F215B;}
.btn-scroll-down{border-top: solid 15px #1F215B;}
.pg-inside-menu p {
   display:block;
   padding: 0 22px;
}

#pginfo {
   background: #14153a;
   font-size: 85%; 
   background: linear-gradient(#14153a, #2a2d7a, #14153a);
   padding: 12px;
   border-radius: 6px;
   -webkit-box-shadow: 7px 7px 9px 0px rgba(50, 50, 50, 0.35);
   -moz-box-shadow: 7px 7px 9px 0px rgba(50, 50, 50, 0.35);
   box-shadow: 7px 7px 9px 0px rgba(50, 50, 50, 0.35);
   border:2px inset #fff;
   text-align: left;
   margin-top:30px;
   color: #fff;
   text-shadow: none;
   line-height: 1.5em;
}
nav ul.pager li.pagerprev a,nav ul.pager li.pagernext a{color:#fff;text-shadow: none}
#pginfo b:nth-child(1) {
	color: #fff;
}
#pginfo b:nth-child(3) {
	color: #fff;
	/*text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;*/
}
#pginfo b:nth-child(5) {
	border-radius: 25px;
	/*background: #d4ad82;*/
	padding: 0px 7px;
	/*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
	border:1px inset #fff;
}
span#infoclick a {font-size:140%;padding-right:2%;}
#infoclick a::before {content:"\f05a";font-family: "fontawesome";font-weight: normal;padding-right: 0.5%;}
/*.noprint {padding-top: 3%;font-size: 60% !important;}
.noprint a::before {content:"\f02f";font-family: "fontawesome";font-weight: normal;padding-right: 0.5%;}
.noprint a:nth-child(4) {display: none}Modif Kat pour supprimer la mini imprimante en bas de page - 9mars22*/

#pg-idx .w12 h3 {font-size: 100%;color: #d4ad82;font-weight: normal;}
#pg-idx .w12 h4{font-size: 150%;margin: 12px 0px}  
/* .label-new, .label-upd {float:right; font: status-bar; font-size:9px; vertical-align:super; padding:8px; color: red;} */

.label-upd {font: status-bar; float:right; padding: 1px 8px; font-size:10px;text-decoration: none;color: hsl(324, 70%, 45%);animation: cooleur 6s infinite;text-shadow:initial;
	border:1px inset text-decoration: none;color: hsl(324, 70%, 45%);animation: kooleur 6s infinite;;
	border-radius: 4px;
	margin-left: 5px !important;margin-top:3px;}
@keyframes cooleur {
    from, to { color: hsl(324, 70%, 45%); }
    10%      { color: hsl(360, 65%, 45%); }
    20%      { color: hsl( 36, 80%, 45%); }
    30%      { color: hsl( 72, 75%, 35%); }
    40%      { color: hsl(108, 65%, 35%); }
    50%      { color: hsl(144, 75%, 35%); }
    60%      { color: hsl(180, 75%, 35%); }
    70%      { color: hsl(216, 60%, 45%); }
    80%      { color: hsl(252, 65%, 50%); }
    90%      { color: hsl(288, 60%, 40%); }
}
@keyframes kooleur {
    from, to { border-color: hsl(324, 70%, 45%); }
    10%      { border-color: hsl(360, 65%, 45%); }
    20%      { border-color: hsl( 36, 80%, 45%); }
    30%      { border-color: hsl( 72, 75%, 35%); }
    40%      { border-color: hsl(108, 65%, 35%); }
    50%      { border-color: hsl(144, 75%, 35%); }
    60%      { border-color: hsl(180, 75%, 35%); }
    70%      { border-color: hsl(216, 60%, 45%); }
    80%      { border-color: hsl(252, 65%, 50%); }
    90%      { border-color: hsl(288, 60%, 40%); }
}

.label-new {font: status-bar; float:right; padding: 1px 8px; font-size:10px;color: #fff;text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;border:1px solid #000;border-radius: 3px;background: #4fd400;margin-left: 5px !important;margin-top:3px;}

.img-new, .img-upd {float:right; padding: 6px;}
.pg-inside-menu .img-new, 
.pg-inside-menu .img-upd, 
h4 .img-new, 
h4 .img-upd {float:none; padding: 0 8px; }
.pg-inside-menu span.label-new,
.pg-inside-menu span.label-upd,
h4 span.label-new, 
h4 span.label-upd {float:none; vertical-align:super; padding: 0 8px; }


/* Messages */
.message{padding: 6px; margin-top: 22px; color:#fff}
.info{background:#2D90FF;}
.warning{background:#D90000;}
.show-side-panel {
    position: fixed;
    top: 50%;
    right: 0px;
    width: 20px;
    height: 120px;
    border: solid 20px transparent;
    border-right-color: #2a2c7b;
    z-index: 100;
}
.user-side-panel {
   position: fixed;
   top: 0px;
   right: -220px;
   z-index: 100;
   background: linear-gradient(#14153a, #2a2d7a);
   width: 220px;
   height: 100%;
   text-align: center;
   font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 90%;
}
.user-side-panel p {
   padding: 10px;
   clear: both;
}
/* goTop Link */
.goTop {text-align: center;text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;text-decoration: none;position: fixed;bottom: 10%;right: 40px;display: none; padding: 13px;
background: #14153a; background: linear-gradient(#14153a, #2a2d7a);
font-weight: bold;line-height: 1em;font-size: 1em;border-radius: 5px;border:1px solid #333;}
.goTop::after {content: "\2227";font-size: 2rem;font-weight: bold;color: #fff;}
.goTop:hover {box-shadow: 5px 5px 20px #aaa;background: #14153a; background: linear-gradient(#14153a, #2a2d7a, #14153a);
	
}

/* mobile */
@media screen and (max-width: 1024px) {.wrapper{width:96%}}
@media screen and (min-width: 901px) {#menu{display:inline-block !important}}
@media screen and (max-width: 900px) {
   img {max-width: 96%; margin: 5px 2px; clear:both}
   .wrapper{flex-direction:column; width:96%;}
   .w11, .w12, .w13, .w14, .w15, .w22, .w23, .w24, .w25, .w33, .w34, .w35, .w44, .w45, .w55 {
      width: 98%;
      float: left;
      margin-left:0;
      margin-right: 0;
   }
   #header{margin-top: 50px;}
   #head-mid {height: auto}
   #logo {margin:4px 0}
   #site_title{ }
   #user-panel {
      position: fixed;
      margin: 0;
      top: 13px;
      right: 20px;
      z-index: 20;
   }
   #login {float:right !important;margin-top:-4%;}
   ul.pager {padding-bottom: 20px;}
   ul.pager li {display: none;}
   li.pagerprev, li.pagernext  {display: block !important;}
   #menu-bar {
      top: 0;
      left: 0;
      padding-left: -20px;
      position: fixed;
      width: 100%;
      height: 50px;
      background: #333;
      z-index: 10;
   -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   }
   #navmob-btn {
      display: block;
      margin: 10px 12px !important;
      border: 1px solid #EDEDED;
      float: left;
      color: #EDEDED;
   }
   #navmob-btn p {padding: 2px 12px; font-weight:normal}
   #navmob-btn span {
      width: 20px;
      background: #EDEDED none repeat scroll 0% 0%;
      display: block;
      height: 2px;
      margin: 5px 10px;
   }
nav #menu-bar ul#menu{
	left: 0;
	margin-left: 0;
	padding-left: 0;
}
   ul#menu {
      display: none;
      background: #333;
      max-width: 100%;
      clear:both;
      padding-bottom: 2%;
   }
   ul#menu li {
      float:none;
   }
   #flags-panel{background:#333}
   .lbox{clear:both;}
   .lbox img {clear:both;margin:auto!important;max-width:100%;}
   
   #UpTab .wrapper{display: flex; flex-direction: row;max-width: 100%;padding-right: 1%}
   #DownTab .wrapper{display: flex; flex-direction: column;max-width: 100%;padding-right: -1%}
   #page .wrapper{display: flex; flex-direction: column;max-width: 100%;padding-right: -1%}
   #info-footer .wrapper {display: flex; flex-direction: row;max-width: 100%;padding-right: 1%}
   #footer .wrapper{display: flex; flex-direction: row;max-width: 100%;padding-right: 1%}
}
@media screen and (max-width: 700px) {
	fieldset.colbabe-2 {display:block;}   /* Form 2 columns - adHoc 0.61 */
	#UpTab .wrapper{display: flex; flex-direction:column;padding-right: -1% !important;}
	#footer .wrapper{display: flex; flex-direction: column;padding-right: -1% !important;}
}
@media screen and (max-width: 480px) {
   #site_title{width:initial;padding:5px }
   #src-head{display:none}
   #date {display: none}
   ul.pager.pager{display: flex;flex-direction:column;justify-content:center;clear: both;}
   nav ul li.pagerprev{margin-bottom: 7px;}
   #footer{margin-bottom: 3em;}
}
@media screen and (max-width: 280px) {
     #footer{margin-bottom: 3em;}
}

@media print {
   #header, #SideBar1, .show-side-panel, #footer, #info-footer {display:none}
   /* grid */
   .w12,.w13,.w23,.w14,.w24,.w34,.w45,.w35,.w25,.w15,.w11,.w22,.w33,.w44,.w55 {
     width: 100%;
     float: none;
     margin: 0;
   }
}

#captcha-div input.field {margin-left: 1%}

.well {
	color: #404040;
	  text-shadow: 0 1px white;
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9f8f4+0,bdb7ac+100 */
background: #f9f8f4; /* Old browsers */
background: -moz-linear-gradient(top,  #f9f8f4 0%, #bdb7ac 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f9f8f4 0%,#bdb7ac 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f9f8f4 0%,#bdb7ac 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f8f4', endColorstr='#bdb7ac',GradientType=0 ); /* IE6-9 */



  border: 1px solid #404040;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 7px #555;
          box-shadow: 0 0 7px #555;
}
  
#font-awesome-list {text-shadow: none !important;}
#font-awesome-list
.font-group li
{
  color: #fff;
  list-style: none;
} 

#font-awesome-list span icon-name {margin:15px;}
#font-awesome-list span icon-value {padding:15px;}

/* nouveau css contact - captcha */
.captcha {
	border:1px solid #bdbcbc;
	border-radius: 6px;
	text-align: center;
	max-width: 70%;
	display: block;
    margin-left: auto;
    margin-right: auto;
    padding:0px 9px;
    padding-top: 15px;
    margin-top: 15px;
    
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e5e5e5+0,ffffff+100 */
background: rgb(229,229,229); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(229,229,229,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(229,229,229,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(229,229,229,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
 
-webkit-box-shadow: 3px 3px 5px 0px rgba(147, 147, 147, 0.75);
-moz-box-shadow:    3px 3px 5px 0px rgba(147, 147, 147, 0.75);
box-shadow:         3px 3px 5px 0px rgba(147, 147, 147, 0.75);
    }
#SPC_image {border:solid 1px #666666; border-radius:4px;box-shadow:5px 5px 4px rgba(173, 173, 173, 1);padding:0;}
#SPC_image {
    -webkit-animation:none;
    -moz-animation:none;
    animation:none;
}

.img-rounded {background: #333}
.captcha img {border:solid 1px #7d7d7d; border-radius:45px;padding:0px 11px;font-size: 1rem;vertical-align:50% !important;}
.captcha img {border: 1px solid #636363;color:green;vertical-align:middle;text-align:center;}
.captcha img:hover {
	border: 2px solid #00bd30;
	background: #a23f00
  }
.captcha img:active {
	border: 1px solid #00bd30;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
 
.nwsl{display: flex;
	justify-content:center;
    align-items:center;
}
input#nwslmail.field.block{
	margin: 0;
}
.nwsl fieldset{width: 100%;margin: 9px 9px;clear: both;height: auto}
.nwsl.w23 fieldset input#nwslmail.field.block{width: 100% !important;}
.nwsl.w23{margin: 0;padding: 0;}
/*Nuage de noms*/
.surnames-cloud, .surnames-cloud a {
		text-align: left;font-weight:normal;font-family:Merriweather;line-height:1.2rem;animation:none;
	}
	a.size1      { color: #FF0066;font-size:1.8rem; }
	a.size1:link    { color: #FF0066; }
	a.size1:visited { color: #FF0066; }

	a.size2      { color: #660000; font-size:1.7rem;}
	a.size2:link    { color: #660000; }
	a.size2:visited { color: #660000; }

	a.size3      { color: #006633; font-size:1.6rem;}
	a.size3:link    { color: #006633; }
	a.size3:visited { color: #006633; }

	a.size4      { color: #6633FF; font-size:1.5rem;}
	a.size4:link    { color: #6633FF; }
	a.size4:visited { color: #6633FF; }

	a.size5      { color: #CC0033;font-size:1.4rem;}
	a.size5:link    { color: #CC0033; }
	a.size5:visited { color: #CC0033; }

	a.size6      { color: #666666;font-size:1.3rem; }
	a.size6:link    { color: #666666; }
	a.size6:visited { color: #666666; }

	a.size7      { color: #339900; font-size:1.2rem;}
	a.size7:link    { color: #339900; }
	a.size7:visited { color: #339900; }

	a.size8      { color: #009999;font-size:1rem;}
	a.size8:link    { color: #009999; }
	a.size8:visited { color: #009999; }

	a.size9      { color: #ff6600;font-size:0.9rem; }
	a.size9:link    { color: #ff6600; }
	a.size9:visited { color: #ff6600; }

	a.size0      { color: #0131b4;font-size:0.8rem; }
	a.size0:link    { color: #0131b4; }
	a.size0:visited { color: #0131b4; }
	
	blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 20px;
  position: relative;
  
  /*Font*/
  font-family: Arial, serif;
  font-size: 16px;
  line-height: 1.2;
  color: #666;
  text-align: justify;
  
  /*Borders - (Optional)*/
  border-left: 15px solid rgb(42, 44, 123);
  border-right: 2px solid rgb(42, 44, 123);
  
  /*Box Shadow - (Optional)*/
  box-shadow: 2px 2px 15px #ccc;
}

blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: rgb(42, 44, 123);
  
  /*Positioning*/
  position: absolute;
  left: 10px;
  top:5px;
}

blockquote::after{
  /*Reset to make sure*/
  content: "";
}

blockquote a{
  text-decoration: none;
  background: #eee;
  cursor: pointer;
  padding: 0 3px;
  color: #c76c0c;
}

blockquote a:hover{
 color: #666;
}

blockquote em{
  font-style: italic;
}
/*img.cadre-bleu {
 box-shadow: 5px 5px 20px rgb(99, 113, 139); 
 border-color: #ffffff;
 border-style: solid;
 border-width: 0;
 display: block;
 padding:1%;
margin:1rem;
text-align:center;
}*/
.cadre-bleu {
 box-shadow: 5px 5px 20px rgb(99, 113, 139); 
 border-color: #ffffff;
 border-style: solid;
 border-width: 1px;
display: block;
 padding:1%;
 text-align:center;
 margin:0 auto;
}

input.stat {font-size;1.2rem;text-align: center;}

.embed-responsive {position: relative;display: block;height: 0;padding: 0;overflow: hidden;}
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object {  position: absolute;  top: 0;  left: 0;  bottom: 0;  height: 100%;  width: 100%;  border: 0;}
.embed-responsive.embed-responsive-kat {  padding-bottom: 100%;}
.embed-responsive.embed-responsive-16by9 {padding-bottom: 56.25%;}
.embed-responsive.embed-responsive-4by3 {padding-bottom: 75%;}

/* videos */
.parent {width:95%; margin:50px auto;}
.parent h5 {padding:0; margin:0; font:normal 16px/24px verdana, arial, sans-serif; color:#666;}
/* set the 'wrap' with a percentage bottom margin so that this is responsive */
.wrap {position:relative; width:100%; height:0; margin-bottom:10%; overflow:hidden;} /* use overflow:hidden to crop the left and right overlap of the resized video */
/* calculate the height of the 'wrap' depending on the aspect ratio required */
.ratio-16-9 {padding-top:calc(100%/(16/9));} 
.ratio-3-2  {padding-top:calc(100%/(3/2));}
.ratio-4-3  {padding-top:calc(100%/(4/3));}
.ratio-16-9 iframe {width:100%; height:100%; position:absolute; top:0; left:0;} /* as the original video has the aspect ratio 16:9 the width and height of the iframe is 100% */
/* the new width is the new height * the original aspect ratio */
/* the left position is the (wrap width - the new width) divided by 2 */
.ratio-3-2 iframe {width:calc((100%/(3/2)) * (16/9)); height:100%; position:absolute; top:0; left:calc((100% - ((100%/(3/2)) * (16/9))) / 2);} 
.ratio-4-3 iframe {width:calc((100%/(4/3)) * (16/9)); height:100%; position:absolute; top:0; left:calc((100% - ((100%/(4/3)) * (16/9))) / 2);}
/* fin videos */
.embed-responsive {position: relative;display: block;height:0;padding:0;overflow: hidden; box-shadow: 5px 5px 20px #404040; 
 border-color: #ffffff;
 border-style: solid;
 border-width: 0;
text-align:center;}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {position: absolute;top:0;left:0;bottom:0;height:100%;width:100%;border:0;}
.embed-responsive.embed-responsive-kat {padding-bottom: 100%;}
.embed-responsive.embed-responsive-16by9 {padding-bottom: 56.25%;}
.embed-responsive.embed-responsive-nat { padding-bottom: 56.25%;padding-right:5%;
 padding-left:15%;
padding-top:5%;
margin:2.5% auto;
height:95%;width:95%;}
.embed-responsive.embed-responsive-4by3 {padding-bottom: 75%;}
.iframe {width:100%;text-align:center;}
/*Gallery*/
.gallery {list-style: none;margin: 0;padding: 0;}
.gallery li {padding: 10px;margin: 0;float: left;position: relative;width: 130px;height: 130px;}
.gallery li:hover img {border-color: #000;background: #ddd;}
.gallery img {background: #fff;border: solid 1px #888;padding: 5px;}
.gallery em {background: #fff url(images/grey-gradient.gif) repeat-y;color: #000;font-style: normal;	padding: 2px 10px;	display: block;	position: absolute;	top: 110px;	left: 9px;	border: 1px solid #999;	border-left-color: #888;}
.gallery a {text-decoration: none;}
.gallery a:hover em {	background: #ffdb01 url(images/orange-gradient.gif) repeat-y;border-color: #c25b08;}

.star {color: hsl(324, 70%, 45%);animation: cooleur 6s infinite;text-shadow:initial;}
.img-fluid {
  max-width: 100%;
  height: auto;
}
.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #4145bb;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}
.histoire {box-shadow: 0px 0px 10px rgba(0, 0, 0,.8);border: 2px dotted rgb(0, 0, 0);padding: 1%;max-height:450px;overflow-y:auto;}
.conte {-webkit-box-shadow: 0px 0px 10px rgba(255, 207, 9,.8);box-shadow: 0px 0px 10px rgba(255, 207, 9,.8);border: 2px groove rgb(255, 207, 9);margin: 20px;padding: 20px;max-height:500px;overflow-y:auto;background-image: url(images/parchemin22.jpg);font-size: 1rem;font-family: macondo swash caps;color: rgb(0,0,0);}
.cadre {/*box-shadow: 0px 0px 10px rgba(255, 207, 9,.8);*/border: 1px solid rgb(0,0,0);margin: 10px 20px;padding: 10px;max-height:500px;overflow-y:auto;font-size: 0.7rem;font-variant:small-caps;}


img.img-cadre {
 box-shadow: 5px 5px 20px #404040; 
 border-color: #ffffff;
 border-style: solid;
 border-width: 0;
 display: block;
 padding:1%;
margin:1rem auto;
text-align:center;
}
img.img-cadrelat {
 box-shadow: 5px 5px 20px #404040; 
 border-color: #ffffff;
 border-style: solid;
 border-width: 0;
 display: block;
 padding:1%;
margin:1rem;
}
img.centre  {
 border-color: #ffffff;
 border-style: solid;
 border-width: 0;
 display: block;
 padding:1%;
margin:1rem auto;
text-align:center;
}
img.enigma {border : solid 6px hsl(324, 70%, 45%);animation: kooleur 6s infinite;margin: 0 auto;}
@keyframes fade {
  0%   { opacity: 0; }
  11.11%   { opacity: 1; }
  33.33%  { opacity: 1; }
  44.44%  { opacity: 0; }
  100% { opacity: 0; }
}
.fadein {
  display: block;
  width: 90%;
  position: relative;
  height: 0;
  padding: 33.33% 0 0 0;
  overflow: hidden;
  box-shadow: 5px 5px 20px #404040; 
 border-color: #ffffff;
 border-style: solid;
 border-width: 0;
 }
.fadein img { position:absolute;top:0; /*center:0;*/ width:100%;  height:100%; vertical-align:middle; overflow: hidden; display: block;
text-align:center;opacity:0; animation-name: fade; animation-duration: 44s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s;  }
.fadein img:nth-child(2) { animation-delay: 4s;  }
.fadein img:nth-child(3) { animation-delay: 8s;  }
.fadein img:nth-child(4) { animation-delay: 12s;  }
.fadein img:nth-child(5) { animation-delay: 16s;  }
.fadein img:nth-child(6) { animation-delay: 20s;  }
.fadein img:nth-child(7) { animation-delay: 24s;  }
.fadein img:nth-child(8) { animation-delay: 28s;  }
.fadein img:nth-child(9) { animation-delay: 32s;  }
.fadein img:nth-child(10) { animation-delay: 36s;  }
.fadein img:nth-child(11) { animation-delay: 40s;  }
.fadein img:nth-child(12) { animation-delay: 44s;  }