.diamond {-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  clip-path: url(#diamond);}
.pentagon {-webkit-clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
  clip-path: url(#pentagon);}
.hexagon {-webkit-clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  clip-path: url(#hexagon);}
.octogon {-webkit-clip-path: polygon(0 50%, 15% 15%, 50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%);
  clip-path: url(#octogon);}
.avatar {margin-top: 50px;}

/*Mes classes et id css*/
@font-face {
    font-family:Merriweather;
	src:url(../font/Merriweather.ttf);
}

@font-face {
    font-family:Raleway;
	src:url(../font/Raleway.ttf);
}

@font-face {
    font-family:Exo2;
	src:url(../font/Exo2-Light.otf);
}

@font-face {
    font-family:quartzo;
	src:url(../font/quartzo.ttf);
}

@font-face {
    font-family:mochary;
	src:url(../font/mochary.ttf);
}

@font-face {
    font-family:Esphimere;
	src:url(../font/Esphimere.otf);
}

@font-face {
    font-family:Roboto;
	src:url(../font/Roboto.ttf);
}

@font-face {
    font-family:coming;
	src:url(../font/coming.otf);
}

@font-face {
    font-family:droidsans;
	src:url(../font/droidsans.ttf);
}

@font-face {
    font-family:ptsans;
	src:url(../font/ptsans.ttf);
}

@font-face {
    font-family:CostaRica;
	src:url(../font/CostaRica.otf);
}

@font-face {
    font-family:Sanchezregular;
	src:url(../font/Sanchezregular.otf);
}

@font-face {
    font-family:candara;
	src:url(../font/candara.ttf);
}

@font-face {
    font-family:LondonMM;
	src:url(../font/LondonMM.ttf);
}

@font-face {
    font-family:vintage;
	src:url(../font/vintage.otf);
}

@font-face {
    font-family:Chardons;
	src:url(../font/Chardons.ttf);
}

@font-face {
    font-family:Delius;
	src:url(../font/Delius.ttf);
}

@font-face {
    font-family:balonez_fantasia;
	src:url(../font/balonez_fantasia.ttf);
}

@font-face {
    font-family:fontastique;
	src:url(../font/fontastique.ttf);
}

@font-face {
    font-family:Raspoutine;
	src:url(../font/RaspoutineMedium_TB.otf);
}

@font-face {
    font-family:OpenSans;
	src:url(../font/OpenSans-Light.ttf);
}

@font-face {
    font-family:Maiandra;
	src:url(../font/Maiandra.ttf);
}

@font-face {
    font-family:Geometos;
	src:url(../font/Geometos.ttf);
}

@font-face {
    font-family:big_noodle_titling;
	src:url(../font/big_noodle_titling.ttf);
}

@font-face {
    font-family:QueenEmpress;
	src:url(../font/QueenEmpress.ttf);
}
@font-face {
    font-family:Sansation_Regular;
	src:url(../font/Sansation_Regular.ttf);
}

@font-face {
    font-family:Castal_Street;
	src:url(../font/Castal_Street.ttf);
}

#obligatoire{margin-bottom:10px;
text-align:right;
color:#FF3300;}

#hauteur_galerie{height:300px;
overflow:hidden;}

#box_galerie{height:70px;
overflow:hidden;
width:120px;
display:inline-block;
margin-bottom:3px;}
#box_galerie img{height:70px;}

#box_galerie2{height:150px;
overflow:hidden;
padding-left:2px;
padding-right:2px;
display:inline-block;
margin-bottom:3px;}
#box_galerie2 img{width:260px;}

#input_recherche{background:none;
height:24px;
color:#000;
font-size:12px;
display:inline-block;}

#bouton_recherche{height:24px;
margin-top:5px;
padding:2px 0px 0px 2px;
color:#fff;
width:40px;
border-radius:0px 4px 4px 0px;
background:url(../img/loupe.png) center #ff6600 no-repeat;}

#footer_galerie{width:70px;
overflow:hidden;
height:40px;
margin-bottom:5px;
float:left;
margin-right:5px;}
#footer_galerie img{width:70px;}

#new-label {color: #fff;
background: #a833c1;
text-transform: uppercase;
padding: 9px 0 7px;
text-shadow: 1px 1px rgba(0, 0, 0, 0.24);
width: 130px;
text-align: center;
display: block;
position: absolute;
left: -33px;
top: 16px;
z-index: 0;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);}

.wrapper {
  margin: 10px auto;
  background: white;
  /*border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.2);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.2);*/
  position: relative;
  z-index: 90;
}

.ribbon-wrapper-green {
  width: 120px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(35deg);
  -moz-transform:    rotate(35deg);
  -ms-transform:     rotate(35deg);
  -o-transform:      rotate(35deg);
  position: relative;
  padding: 5px 0;
  font-size:12px;
  left: -5px;
  top: 20px;
  width: 150px;
  background-color: #259cef;
  /*background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); */
  color: #fff;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}

#propos{font-size:33px;
margin-bottom:20px;
margin-top:30px;
text-align:center;}
#propos div{border-bottom:3px solid #2e9400;
display:inline-block;
color:#2e9400;
font-family:droidsans;
padding-left:20px;
padding-right:20px;}

#contact{font-size:14px;
line-height:26px;
margin-top:50px;}

#grayscale img{filter: grayscale(0.5);
-webkit-filter: grayscale(0.5);
-moz-filter: grayscale(0.5);
-o-filter: grayscale(0.5);
-ms-filter: grayscale(0.5);
-moz-transition: all 0.6s ease-in-out 0.2s;
-webkit-transition: all 0.6s ease-in-out 0.2s;
-o-transition: all 0.6s ease-in-out 0.2s;
-ms-transition: all 0.6s ease-in-out 0.2s;
transition: all 0.6s ease-in-out 0.2s;}
		
#grayscale img:hover{filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);

filter: saturate(200%);
-webkit-filter: saturate(200%);
-moz-filter: saturate(200%);
-o-filter: saturate(200%);
-ms-filter: saturate(200%);

-moz-transform: rotate(0deg) scale(1.1);
-webkit-transform: rotate(0deg) scale(1.1);
-o-transform: rotate(0deg) scale(1.1);
-ms-transform: rotate(0deg) scale(1.1);
transform: rotate(0deg) scale(1.1);
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
box-shadow: 1px 1px 5px 777;}

.blur img{filter: blur(1px);
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);}
.blur img:hover{filter: blur(0);
-webkit-filter: blur(0);
-moz-filter: blur(0);
-o-filter: blur(0);
-ms-filter: blur(0);}

.saturate img{filter: saturate(100%);
-webkit-filter: saturate(100%);
-moz-filter: saturate(100%);
-o-filter: saturate(100%);
-ms-filter: saturate(100%);}

.saturate img:hover{filter: saturate(200%);
-webkit-filter: saturate(200%);
-moz-filter: saturate(200%);
-o-filter: saturate(200%);
-ms-filter: saturate(200%);}


#sepia img{filter: sepia(1);
-webkit-filter: sepia(1);
-moz-filter: sepia(1);
-o-filter: sepia(1);
-ms-filter: sepia(1);
-moz-transition: all 0.6s ease-in-out 0.2s;
-webkit-transition: all 0.6s ease-in-out 0.2s;
-o-transition: all 0.6s ease-in-out 0.2s;
-ms-transition: all 0.6s ease-in-out 0.2s;
transition: all 0.6s ease-in-out 0.2s;
position:relative;}

#sepia img:hover{filter: sepia(0);
-webkit-filter: sepia(0);
-moz-filter: sepia(0);
-o-filter: sepia(0);
-ms-filter: sepia(0);
-moz-transform: rotate(2deg) scale(1.2);
-ms-transform: rotate(2deg) scale(1.2);
-O-transform: rotate(2deg) scale(1.2);
-webkit-transform: rotate(2deg) scale(1.2);
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
box-shadow: 1px 1px 5px 777;}

.zoomarticle {
	height: auto;
	margin-bottom: 1.65em;
	margin-left: 3%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	list-style: none;
}

.article_big_img {
	overflow: hidden;
	padding: 2px;
}

.article_big_img > img {
	transition: all 1s;
	-moz-transition: all 1s;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
}

.zoomarticle:hover > .article_big_img > img {
	transform: scale(1.05);
	-ms-transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-o-transform: scale(1.05);
	-moz-transform: scale(1.05);
}

/*ul{margin-left:-25px;}*/
.ex4 li {display:inline;
margin-bottom:20px;
padding-left:0;}
/*.ex4 ul {margin-left:-25px;}*/

.ex4 figure {position: relative;
	/*display: inline-block;*/
	margin: 0;
	font-size:15px;
	text-align: center;
	overflow: hidden;}
		
.ex4 figcaption {
	position: absolute;
	left: 0;
	bottom:-1em;
	height: 6em;
	width:100%;
	line-height: 1.3em;
	text-align: center;
	color: #fff;
	padding-top:25px;
	font-size:16px;
	padding-left:10px;
	padding-right:10px;
	background: rgba(0,0,0,0.6);
	overflow: hidden;
	transition: all 0.4s;
}
.ex4 figcaption span {display:block;
font-size:14px;
text-align:left;}


.ex4 figure:hover figcaption,
.ex4 figure:focus figcaption {
	height: 100%;
	background: rgba(0,0,0,0.8);
}

#span_panier{font-size:12px;
color:#eee;}

/*#inscription{background:url(../img/avantage.jpg) fixed;
background-position:top;
background-size: cover;
color: #fff;
opacity:1;
font-size:18px;
position: relative;
padding:50px 15px 50px 15px;
text-align:center;}
#inscription h1{margin-top:10px;
font-family:droidsans;
font-size:45px;}
#inscription i{color:#fff;}*/

#icon-video{text-align:right;}
#icon-video img{z-index:10;
position:absolute;
width:40px;
margin-left:-40px;}

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

.grid .padding-effect{height:200px;}
.padding-effect{padding-left:2px;
padding-right:2px;}

#input-news{margin-top:5px;
background:none;
color:#fff;
width:50%;
border-radius:4px 0px 0px 4px;
display:inline-block;}

#bouton-news{height:38px;
margin-top:-3px;
margin-left:-3px;
width:110px;
padding:2px 0px 0px 2px;
display:inline-block;
border-radius:0px 4px 4px 0px;}

#newsletter{background:#033158;
padding-bottom:5px;
color:#fff;
padding-top:5px;
margin-top:20px;}
#newsletter i{color:#fff;
font-size:28px;
margin-right:15px;}

#titro_newsletter{margin-bottom:0px;
display:inline-block;
font-size:19px;}

#social_newsletter{margin-bottom:0px;
display:inline-block;
margin-top:-10px;
font-size:19px;}

#input_recherche_news{margin-top:5px;
background:none;
color:#fff;
width:50%;
border-radius:4px 0px 0px 4px;
display:inline-block;}

#bouton_recherche_news{height:38px;
margin-top:-5px;
margin-left:-5px;
width:110px;
padding:2px 0px 0px 2px;
display:inline-block;
border-radius:0px 4px 4px 0px;}

#footer{padding:15px 0px 20px 0px;
background:#235384;
font-size:13px;
color:#fff;}
#footer a{color:#fff;}
#footer i{color:#fff;}
#separer_foot{margin-bottom:8px;}
#titro_foot{font-size:20px;
margin-bottom:10px;
letter-spacing:1px;
border-bottom:dotted 1px;}

#detail_img{width:450px;
float:left;
margin-right:15px;}

#detail_propos{width:250px;
float:left;
margin-right:15px;}

/*#comite{height:350px;
background:#fff;
font-family:Exo2;
margin-bottom:10px;
padding:10px;}*/

#comite{height:300px;
background:#00cc66;
padding:10px;
text-align:center;}

#box_img{height:180px;
overflow:hidden;}

#flash_info{color:#fff;
background:#ffc500;
float: left;
font-family:Delius;
padding:12px;
margin-right:5px;
font-weight: bold;
text-shadow: 1px 1px 1px #333;
font-size:17px;}
#flash{margin-top:10px;
color:#F00;
font-size:15px;}
#flash a{text-decoration:none;}

#float_img {float: right;
width: 100px;
margin-bottom: -50px;}

.scrollup{width: 40px;
height: 40px;
position: fixed;
bottom: 50px;
right: 20px;
display: none;
color: white;
background-color: #3a3f51;
border: 1px solid #3a3f51;
font-size: 20px;
text-align: center;
line-height: 37px;}
.scrollup:hover{color: white;}