/* 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 */


/* link underlines tend to make hypertext less readable, 
   because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }

/* no list-markers by default, since lists are used more often for semantics */
ol { list-style:none }

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

/* 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 */
ol,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }

/* 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... */

body{
	margin:0px;
	color:#272727;
	background-color:#FFFFFF;
	line-height:20px;
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	font-size:14px;

}

#accueil{
		background-image:url(../images/bg_accueil.gif);
	background-position:center top;
	background-repeat:no-repeat;
	}
#sub{
	background-image:url(../images/bg_sub.jpg);
	background-position:top center;
	background-repeat:no-repeat;
	}
a{
	text-decoration:none;
	color:#993300;
}

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

.changement{
	padding:30px; 
    background-color:#B00002; 
    color:#FFF; 
    font-size: 30px; 
    line-height: normal; 
    text-align: left;
    font-family: 'Oswald', cursive;
    text-transform: uppercase;
    display: block;
    background-image: linear-gradient(to bottom right, #ca3131, #1c0000);
    border-radius: 25px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.flocon{
	padding:30px; 
    background-color:#023d8c; 
    color:#FFF; 
    font-size: 30px; 
    line-height: normal; 
    text-align: left;
    font-family: 'Oswald', cursive;
    text-transform: uppercase;
    display: block;
    background-image: linear-gradient(to bottom right, #1d7dff, #023d8c);
    border-radius: 25px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


#sous-menu{
	max-width: 1000px;
	height:10px;
	margin:0px auto;
    font-size: 18px;
    font-weight: 400;
    position: relative;
    display: block;
    color:#000;
   text-align: center;
    font-family: 'Oswald', cursive;
    text-transform: uppercase;
    padding:10px 0 0 0;
}
#sous-menu a {
    color:#000;
}
#sous-menu a:hover {
    color:#860101;
}

#menu{
	max-width: 1000px;
	height:104px;
	margin:0px auto;	
}

#menu ul {
  list-style-type: none;
  margin: 20px 0 0 0;
  padding: 0;
  overflow: hidden;
}

#menu li {
  float: left;
}

#menu li a {
  display: inline-block;
  text-align: center;
  padding: 20px;
  text-decoration: none;
  font-family: 'Oswald', cursive;
    font-weight:700;
    color:#860101;
    font-size: 18px;
    letter-spacing: 2px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    text-transform: uppercase;
}

#menu li a:hover {
  color: #111;
}


.conteneur_accueil{
	width: 956px;
	background-image:url(../images/bg_conteneur_accueil.gif);
	background-position:center top;
	background-repeat:no-repeat;
	position:relative;
	margin-top:-80px;
	padding-left:0px;
	padding-right:0px;
	padding-top:0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-bottom: 30px;
	z-index: 95;
	
	
}
.conteneur_sub{
	width: 956px;
	padding-left:0px;
	padding-right:0px;
	padding-top:0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-bottom: 30px;
	
	
}
#photo_accueil{
	height:320px;
	width: 1075px;
	z-index: 99;
	position: relative;
	margin-top: -250px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	text-align: right;
	}
	
#photo_sub {
	height:320px;
	width: 1075px;
	z-index: 99;
	position: relative;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	text-align: right;
	padding-top: 45px;
}


h1{
	font-family: 'Oswald', cursive;
	font-weight:700;
	font-size:30px;
	line-height:36px;
	text-transform:uppercase;
	color:#860101;
	padding-top:10px;
	padding-bottom:10px;
	}
h2{
	font-family: 'Oswald', cursive;
	font-weight:700;
	font-size:24px;
	line-height:28px;
	padding-top:10px;
	padding-bottom:10px;
	}
h3{
	font-family: 'Oswald', cursive;
	font-weight:700;
	font-size:18px;
	color:#FFFFFF;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:10px;
	margin-bottom:10px;
	}
h4{
	font-family: 'Oswald', cursive;
	font-weight:700;
	font-size:18px;
	color:#FFFFFF;
	font-weight:bold;
	margin: 0px;
	padding: 0px;
	}
h5{
	font-size:14px;
	color:#000000;
	font-family: 'Oswald', cursive;
	font-weight:700;

	}
h6{
	font-family: 'Oswald', cursive;
	font-weight:700;
	font-size:24px;
	color:#272727;
	padding-top:10px;
	padding-bottom:10px;
	margin-bottom:5px;
	}
	
strong{
	font-family: 'Oswald', cursive;
	font-weight:700;
	}
	
.imgFull{
	max-width: 100%;
    height: auto;
}

.section1{
	width:80%;
    padding:5% 10%;
	}


.bgRouge{
	background-image:url("../images/bg_rouge.jpg");
	background-position:right top;
	background-repeat:no-repeat;
	}


.bgBleu{
	background-image:url("../images/bg_bleu.jpg");
	background-position:right top;
	background-repeat:no-repeat;
	}

.bouton {
  color: #FFF!important;
  font-size: 1.2rem;
  font-weight: 700 !important;
  margin: 20% 0;
  padding: 2%;
  background-color: #262626;
  letter-spacing: 1px;
    border-radius: 30px;
}


.TextBlanc{
	color: #FFFFFF;
}





.rouge{
	color:#912101;
	}


#footer_sub{
	padding:20px;
	text-align:center;
	color:#FFFF;
    background-color: #232323;
	}
#footer_sub a{
	color:#FFFF;
	}
#footer_sub a:hover{
	color:#860101;
	}





/*____________________________Colonne Responsive_________________________________*/


.container {
	padding: 3%;
}
.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%
}

}


.margin {
	margin: 16px!important
}
.margin-left {
	margin-left: 16px!important
}
.margin-right {
	margin-right: 16px!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;
}

.margin-neg {
	margin-top: -100px!important;
	z-index: 99;
	position: relative;
}


@media (max-width:992px) {
.padding-32 {
	padding: 16px!important
}
.padding-48, .padding-64 {
	padding: 24px!important
}
	
.margin-neg {
	margin-top: 0!important;
	z-index: 99;
	position: relative;
}

	
}