/* CSS Document */
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */


/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999999;
	background: url(../images/Preloader.gif) center no-repeat #fff;
}

* {
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
}

/* link underlines tend to make hypertext less readable, 
   because underlines obscure the shapes of the lower halves of words */
:link, :visited  {
	text-decoration: none
}
/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */

/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
/* the default spacing on headings does not match nor align with 
   normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/*  nonetheless strip their margin and padding as well */

/* whoever thought blue linked image borders were a good idea? */
a img, :link img, :visited img {
	border: none
}
/* de-italicize address */
address {
	font-style: normal
}
/* more varnish stripping as necessary... */

a {
	color:#ee3b33;
	text-decoration: none;
	margin: 0;
	transition: all 0.3s ease-in-out 0s;
	transition-duration: 0.2s;
}

a:hover {
	color: #F9BF2E;
	text-decoration: none;
}

hr {
	border:none;
	border-top: 1px dashed red;
}


.centre {
	text-align: center;
}

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


.imgEgal {
    width: 100%;
	max-height: 25vh;
	min-height: 25vh;
    object-fit: cover;
	overflow: hidden;
}

.object-fit_cover { 
	width: 100%;
	max-height: 50vh;
	min-height: 50vh;
	display: block;
	object-fit: cover;
}

.imgLeft {
	max-width: 350px !important;
	height: auto;
	display: block;
	float: left !important;
	margin: 0 30px 0 0!important;
	max-height: 200px;
}

.imgRight {
	max-width: 150px;
	height: auto;
	display: block;
	float: right;
	margin: 0 0 0 30px;
}

form h3 {
  color:#8F8F8F;
	font-size: 21px;
	font-weight:400;
}

button, hr, input {
    overflow: visible;
}
button, input, select, textarea {
    font: inherit;
    margin: 0;
}

input[type=text]:focus, select:focus {
  border: 1px solid #000;
}

input {
	padding: 10px;
	display: block;
	border: none;
	border: 1px solid #ccc;
	width:90%;
	margin: 10px 0;
}

select {
	padding: 10px;
	display: block;
	border: none;
	border: 1px solid #ccc;
	width:92%;
	margin: 10px 0;
}

textarea {
	width:90%;
	padding: 10px;
	display: block;
	border: 1px solid #ccc;
	margin: 10px 0;
}



.bouton {
    border: none;
    display: inline-block;
    outline: 0;
    padding: 15px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: #FFF;
    background-color: #ee3b33;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	border-radius: 5px;
	width:92%;
	font-weight: 700;
}


.cap {
	text-transform: uppercase;
}



/*____________________________Colonne Responsive_________________________________*/


.container {
	
}
.bar:after, .bar:before, .cell-row:after, .cell-row:before, .clear:after, .clear:before, .container:after, .container:before, .panel:after, .panel:before, .row-padding:after, .row-padding:before, .row:after, .row:before {
	content: "";
	display: table;
	clear: both
}
.col {
	float: left;
	width: 100%
}
.col.s1 {
	width: 8.33333%
}
.col.s2 {
	width: 16.66666%
}
.col.s3 {
	width: 24.99999%
}
.col.s4 {
	width: 33.33333%
}
.col.s5 {
	width: 41.66666%
}
.col.s6 {
	width: 49.99999%
}
.col.s7 {
	width: 58.33333%
}
.col.s8 {
	width: 66.66666%
}
.col.s9 {
	width: 74.99999%
}
.col.s10 {
	width: 83.33333%
}
.col.s11 {
	width: 91.66666%
}
.col.s12 {
	width: 99.99999%
}

@media (min-width:601px) {
.col.m1 {
	width: 8.33333%
}
.col.m2 {
	width: 16.66666%
}
.col.m3, .quarter {
	width: 24.99999%
}
.col.m4, .third {
	width: 33.33333%
}
.col.m5 {
	width: 41.66666%
}
.col.m6, .half {
	width: 49.99999%
}
.col.m7 {
	width: 58.33333%
}
.col.m8, .twothird {
	width: 66.66666%
}
.col.m9, .threequarter {
	width: 74.99999%
}
.col.m10 {
	width: 83.33333%
}
.col.m11 {
	width: 91.66666%
}
.col.m12 {
	width: 99.99999%
}
	
}

@media (min-width:993px) {
.col.l1 {
	width: 8.33333%
}
.col.l2 {
	width: 16.66666%
}
.col.l3 {
	width: 24.99999%
}
.col.l4 {
	width: 33.33333%
}
.col.l5 {
	width: 41.66666%
}
.col.l6 {
	width: 49.99999%
}
.col.l7 {
	width: 58.33333%
}
.col.l8 {
	width: 66.66666%
}
.col.l9 {
	width: 74.99999%
}
.col.l10 {
	width: 83.33333%
}
.col.l11 {
	width: 91.66666%
}
.col.l12 {
	width: 99.99999%
}

}


/*____________________________Colonne Responsive Box_________________________________*/


/* Boite nouvelle accueil*/

.col-container {
  display: table;
	width:100%;
}



.colbox {
	display: inline-block;
	vertical-align: top;
	float:left:
}
.colbox.s1 {
	width: 8.33333%;
}
.colbox.s2 {
	width: 16.66666%;
}
.colbox.s3 {
	width: 24.99999%;
}
.colbox.s4 {
	width: 33.33333%;
}
.colbox.s5 {
	width: 41.66666%;
}
.colbox.s6 {
	width: 49.99999%;
}
.colbox.s7 {
	width: 58.33333%;
}
.colbox.s8 {
	width: 66.66666%;
}
.colbox.s9 {
	width: 74.99999%;
}
.colbox.s10 {
	width: 83.33333%;
}
.colbox.s11 {
	width: 91.66666%;
}
.colbox.s12 {
	width: 100%;
}

@media (min-width:601px) {
	
.colbox {
	display: table-cell;
	vertical-align: top;
}
	
.colbox.m1 {
	width: 8.33333%;
}
.colbox.m2 {
	width: 16.66666%;
}
.colbox.m3 {
	width: 24.99999%;
}
.colbox.m4 {
	width: 33.33333%;
}
.colbox.m5 {
	width: 41.66666%;
}
.colbox.m6 {
	width: 49.99999%;
}
.colbox.m7 {
	width: 58.33333%;
}
.colbox.m8 {
	width: 66.66666%;
}
.colbox.m9 {
	width: 74.99999%;
}
.colbox.m10 {
	width: 83.33333%;
}
.colbox.m11 {
	width: 91.66666%;
}
.colbox.m12 {
	width: 99.99999%;
}
	
}

@media (min-width:993px) {
.colbox.l1 {
	width: 8.33333%;
}
.colbox.l2 {
	width: 16.66666%;
}
.colbox.l3 {
	width: 24.99999%;
}
.colbox.l4 {
	width: 33.33333%;
}
.colbox.l5 {
	width: 41.66666%;
}
.colbox.l6 {
	width: 49.99999%;
}
.colbox.l7 {
	width: 58.33333%;
}
.colbox.l8 {
	width: 66.66666%;
}
.colbox.l9 {
	width: 74.99999%;
}
.colbox.l10 {
	width: 83.33333%;
}
.colbox.l11 {
	width: 91.66666%;
}
.colbox.l12 {
	width: 99.99999%;
}

}



/* Container for flexboxes */

.grid {
	font-size: 1.3rem;
	font-weight: 700;
}


.col-row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.col-column {
  width: 24.9%;
display:flexbox;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .col-column {
    flex: 48.8%;
	
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-column {
    flex: 99%;
  }
}



.margin {
	margin: 16px!important
}
.margin-left {
	margin-left: 16px!important
}
.margin-right {
	margin-right: 16px!important
}

.padding-8 {
	padding: 8px!important
}

.padding-16 {
	padding: 16px!important
}
.padding-24 {
	padding: 24px!important
}
.padding-32 {
	padding: 32px!important
}
.padding-48 {
	padding: 48px!important
}

.padding-64 {
	padding: 64px!important;
}

.padding-20 {
	padding: 20%!important;
}


.padding-top-36{
	padding-top: 50px!important;
}


@media (max-width:992px) {
.padding-32 {
	padding: 16px!important
}
.padding-48, .padding-64 {
	padding: 24px!important
}
	
	.padding-top-36{
	padding-top: 30px!important;
}

}


/*      Contenu des pages   */


.resultat a {
	color:#ee3b33;
	border:1px solid #ee3b33;
	text-decoration: none;
	margin: 0;
	padding:5px 10px;
	transition: all 0.3s ease-in-out 0s;
	transition-duration: 0.2s;
}

.resultat a:hover {
	background-color: #F9BF2E;
	color:#FFF;
	text-decoration: none;
}


.section1 {
	width: 80%;
	padding: 5% 10%;
 	background-color:#FFF;
	text-align: center;
	
}


.intro {
	width: 80%;
	padding: 5% 10%;
	text-align: center;
	
}

.intro p {
    font-size: 18px;
    letter-spacing: 0.5px;
    line-height: 32px;
}