*{
	margin :0 ;
	padding: 0;
	outline: 0;
}


/*------------------------------------*\
    $FONT
\*------------------------------------*/
/*@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css');*/

/*Font Awesome Fonts*/
@font-face {
font-family: 'FontAwesome';
font-style: normal;
font-weight: normal;
src: url('font/FontAwesome.ttf') format('truetype');
}

@font-face {
font-family: 'pacifico';
font-style: normal;
font-weight: normal;
src: url('font/Pacifico.ttf') format('truetype');
}

@font-face {
font-family: 'raleway-medium';
font-style: normal;
font-weight: normal;
src: url('font/Raleway-Medium.ttf') format('truetype');
}


@font-face {
font-family: 'raleway-regular';
font-style: normal;
font-weight: normal;
src: url('font/Raleway-Regular.ttf') format('truetype');
}


@font-face {
font-family: 'raleway-bold';
font-style: normal;
font-weight: normal;
src: url('font/Raleway-SemiBold.ttf') format('truetype');
}


@font-face {
font-family: 'raleway-light';
font-style: normal;
font-weight: normal;
src: url('font/Raleway-Light.ttf') format('truetype');
}


/*------------------------------------*\
    $CLASS
\*------------------------------------*/

.mobile 		{ display: none; }
.bg-pink		{ background-color: #fec8c8; }
.bg-red			{ background-color: #e10023; }
.bg-orange		{ background-color: orange; }
.bg-blue		{ background-color: CornflowerBlue; }
.bg-purple		{ background-color: purple; }
.red 			{ color: #e10023;}
.center 		{ text-align: center; }
.hidden 		{ display: none; }



/*------------------------------------*\
    $GRID
\*------------------------------------*/
.row{
	max-width: 75rem;
	margin-left: auto;
    margin-right: auto;
}

.row:after {
    clear: both;
}

.row:after, .row:before {
    content: ' ';
    display: table;
}

.columns{
	width: 100%;
    float: left;
	/*padding-left: .9375rem;
    padding-right: .9375rem;*/
}

.columns:last-child:not(:first-child){
	
	float: right;	
}

.medium-1
{
	width: 8.33333%;
}

.medium-2
{
	width: 16.66667%;
}

.medium-3
{
	width: 25%;
}

.medium-4
{
	width: 33.33333%;
}

.medium-5
{
	width: 41.66667%;
}

.medium-6
{
	width: 50%;
}

.medium-7
{
	width: 58.33333%;
}

.medium-8
{
	width: 66.66667%;
}

.medium-9
{
	width: 75%;
}

.medium-10
{
	width: 83.33333%;
}

.medium-11
{
	width: 91.66667%;
}

.medium-12
{
	width: 100%;
}


/** Responsive **/
/*.small-12{
	width: 100%;
}*/

@media screen and (max-width: 800px) {
	
	.small-12{
		width: 100%;
	}
}


/*------------------------------------*\
    $GLOBAL
\*------------------------------------*/

body {
	font-family: "raleway-regular", sans-serif;
	line-height: normal;
	font-size: 1em;
	color: #545454;
	text-rendering: optimizeLegibility;
}

body, html{
	height: 100%;
	width: 100%;
}


a[href] {
	color: inherit;
	text-decoration: none;
}

ul, li{
	list-style-type: none;
	margin: 0;
	padding: 0;
}


input[type=text], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], textarea, select{
	border-radius: 0;
	box-shadow: none;
	border : none;
	background-color: #f5f5f5;
}

input[type=text]:focus, input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, textarea:focus, select:focus{
	border-radius: 0;
	box-shadow: none;
	border : none;
	background-color: #f5f5f5;
	outline: 0;
}

section{
	width: 100%;
	height: 100%;
	position: relative;
}

section h1{
	font-family: "mathlete", sans-serif;
	letter-spacing: 1px;
	color: #3e3e3e;
	font-size: 3.8em;
}

section h2{
	font-family: "pacifico", sans-serif;
	color : #323232;
	font-size: 2em;
}


section p{
	font-family: "raleway-regular", sans-serif;
	text-align: justify;
}


button:hover{
	cursor: pointer;
}


/*------------------------------------*\
    $CLASSES LIENS
\*------------------------------------*/

a.back{
	border : 1px solid #ced4da;
	padding: 8px 25px;	
	display: inline-block;
	margin-left: 15px;
	font-size: 0.9em;
	font-weight: bold;
	background-color: #fff;
	transform-style: flat;
  	transition: all 250ms ease-out;
}

a.back:before, a.back:after {
  content: "";
  position: absolute;
  z-index: -2;
  transition: all 250ms ease-out;
}

a.back:hover{
  box-shadow: 0 15px 10px -10px rgba(31, 31, 31, 0.5);
}



.link_red i.fa{
	font-size: 0.6em;
	margin-left: 7px;
}


/*------------------------------------*\
    $LOADER
\*------------------------------------*/
.bg-loader{
	opacity: 0;
}

#preloader{
	position: fixed;
   	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800;
    height: 100%;
    width: 100%;
    display: table;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f995ba+2,f76fa1+100 */
	background: #f995ba; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover, #f995ba 2%, #f76fa1 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover, #f995ba 2%,#f76fa1 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center, #f995ba 2%,#f76fa1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f995ba', endColorstr='#f76fa1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#loader {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.lds-default{
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px;
}

.lds-default div {
	position: absolute;
	width: 5px;
	height: 5px;
	background: #fff;
	border-radius: 50%;
	animation: lds-default 1.2s linear infinite;
}

.lds-default div:nth-child(1) {
	animation-delay: 0s;
	top: 29px;
	left: 53px;
}

.lds-default div:nth-child(2) {
	animation-delay: -0.1s;
	top: 18px;
	left: 50px;
}

.lds-default div:nth-child(3) {
	animation-delay: -0.2s;
	top: 9px;
	left: 41px;
}

.lds-default div:nth-child(4) {
	animation-delay: -0.3s;
	top: 6px;
	left: 29px;
}

.lds-default div:nth-child(5) {
	animation-delay: -0.4s;
	top: 9px;
	left: 18px;
}

.lds-default div:nth-child(6) {
	animation-delay: -0.5s;
	top: 18px;
	left: 9px;
}

.lds-default div:nth-child(7) {
  animation-delay: -0.6s;
  top: 29px;
  left: 6px;
}

.lds-default div:nth-child(8) {
  animation-delay: -0.7s;
  top: 41px;
  left: 9px;
}

.lds-default div:nth-child(9) {
  animation-delay: -0.8s;
  top: 50px;
  left: 18px;
}

.lds-default div:nth-child(10) {
  animation-delay: -0.9s;
  top: 53px;
  left: 29px;
}

.lds-default div:nth-child(11) {
  animation-delay: -1s;
  top: 50px;
  left: 41px;
}

.lds-default div:nth-child(12) {
  animation-delay: -1.1s;
  top: 41px;
  left: 50px;
}

@keyframes lds-default {
  0%, 20%, 80%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}


/*------------------------------------*\
    $HOMEPAGE
\*------------------------------------*/

.scrollLocked{

	overflow: hidden;
}


.scroll {
	display: block;
	position: absolute;
	z-index: 50;
	bottom: 10px;
	left: 49.1%;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	transition: 		background-color 0.4s;
	-webkit-transition: background-color 0.4s;
	-moz-transition:    background-color 0.4s;
	-o-transition:      background-color 0.4s;
	-ms-transition:     background-color 0.4s;
	animation-name: bounceScroll;
    outline: none!important;
    text-align: center;
    -moz-animation: bounceScroll 3s infinite;
    -webkit-animation: bounceScroll 3s infinite;
    animation: bounceScroll 3s infinite;
    background-color: rgba(255,255,255,0.6);
}

.scroll:hover{
	background-color: rgba(255,255,255, 0.8);
}


.scroll i.fa{
	font-size: 25px;
	color: #ef669a;
	display: block;
	padding-top: 4px;
}

/*.scroll img{
	width: 20px;
	display: block;
    margin: auto;
    margin-top: 12.5px;
}*/


.scroll-top{
	bottom: 15px;
	right: 15px;
	position: fixed;
	visibility: hidden;
	display: block;
	height: 30px;
	width: 30px;
	background-color: rgba(255,255,255,0.7);
	transition: 		background-color 0.7s;
	-webkit-transition: background-color 0.7s;
	-moz-transition:    background-color 0.7s;
	-o-transition:      background-color 0.7s;
	-ms-transition:     background-color 0.7s;
	text-align: center;
}


.scroll-top .fa{
	color: #ef669a;
    font-size: 15px;
    line-height: 30px;
    font-weight: bold;
}

.scroll-top:hover{
	background-color: #fff;
}



@-moz-keyframes bounceScroll {
  	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);transform: translateY(0);}
  	40% {-moz-transform: translateY(-30px);transform: translateY(-30px);}
  	60% {-moz-transform: translateY(-15px);transform: translateY(-15px);}

}
@-webkit-keyframes bounceScroll {
  	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);transform: translateY(0);}
  	40% {-webkit-transform: translateY(-30px);transform: translateY(-30px);}
  	60% {-webkit-transform: translateY(-15px);transform: translateY(-15px);}
}
@keyframes bounceScroll {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);-ms-transform: translateY(0);
	    -webkit-transform: translateY(0);transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);-ms-transform: translateY(-30px);
	    -webkit-transform: translateY(-30px);transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);-ms-transform: translateY(-15px);
	    -webkit-transform: translateY(-15px);transform: translateY(-15px);}
}

	


/* Smarphones et petits écrans */
@media screen and (max-width: 700px) {

}



/*------------------------------------*\
    $NAV
\*------------------------------------*/


#logo{
	position: absolute;
	/*left: 3%;
	top: 0px;*/
	width: 10%; /* 12*/
	z-index : 700;
	text-align: right;
	/*background-color: yellow;*/
}

#logo.fixed{
	position: fixed;
	width: auto;
	left: 40px;
}


#logo img{
	/*width: 145px;*/
	/*width: 70%;*/
	max-width: 100%;
	-ms-interpolation-mode: bicubic;

}

#logo.fixed img{
	width: 80px;
}

.nav-fixed .logo-nav img{
	height: 35px;
}

nav.nav-fixed .logo-nav{
	margin-left: 120px;
}

nav.nav-fixed .logos-rs{
	margin-right: 120px;
}


nav.nav-fixed{
	position: fixed;
	top: 0;
	z-index: 100;
	min-width: 100%;
	margin-left: 0;
	/*justify-content: space-around;*/
	background-color: #fff;
	padding-top : 0;
    padding-bottom: 0px !important;
	/*background-color: rgba(255,255,255);*/
	box-shadow: 0 10px 30px -12px rgba(110,110,110,1), 0 9px 31px 0 rgba(110,110,110,.5), 0 8px 10px -5px rgba(110,110,110,.2);
	z-index: 1;
}

nav{
	padding-top: 10px;
	display: flex;
	display: -webkit-flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;
	margin-left: 10%;
	-webkit-transition: padding .65s ease-out;
    -moz-transition: padding .65s ease-out;
    -o-transition: padding .65s ease-out;
    transition: padding .65s ease-out;
}



#section1 nav{
	padding-bottom: 10px;
}


nav.logo-nav{
	margin-left: 0;
}


nav .logo-nav img{
	margin-left: 2px;
}


ul.nav{
	display: flex;
	display: -webkit-flex;
	justify-content: center;
    text-align: center;
    flex-wrap: wrap;
}


nav .separateur{
	display: none;
	margin-top: 18px;
}

ul.nav > li{
	font-family: "mathlete-bold", sans-serif;
	font-size: 1.4em;
	letter-spacing: 1px;
}


ul.nav li{
	position: relative;
}

ul.nav > li > a{
	padding: 11px 1.3em;
	padding-top: 8px;
	display: block;
	transition: .5s ease;
	position: relative;
}


ul.nav > li > a.active{
	color: #fff;
	clear: both;
	background-color: #ff95bb;
}

ul.nav > li > a.active:hover{
	text-decoration: none;
	background-color: #ff87b2;
	color: #fff;
}


ul.nav > li > a.active:after{
	top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #ff95bb;
    border-width: 5px;
    left: 50%;
    margin-left: -5px;
}

nav.nav-fixed ul.nav > li > a.active:after{
	content: none;
}


ul.nav > li > a:hover{
	text-decoration: none;
	background-color: #f5f5f5;
	color: black;

}

ul.nav ul{
	margin-left: 0px;
	position:absolute;
	z-index: 1000;
	max-height:0;
	left: 0;
	right: 0;
	overflow:hidden;
	-moz-transition: .8s all .2s;
	-webkit-transition: .8s all .2s;
	transition: .8s all .2s;
	background-color: #fff;
}

ul.nav ul a{
	padding: 0.3em ;
	display: inline-block;
	width: 80%;
	border-bottom: 1px dashed #fec8c8;
}

ul.nav ul li:last-child a{
	border-bottom: none;
}


ul.nav li:hover ul{
	max-height: 15em;
}

ul.nav ul a:hover{
	text-decoration: underline;
}


nav .logos-rs{
	margin-right: 0;
}

nav .logos-rs a{
	display: inline-block;
	width: 25px;
	height: 25px;
	background-color: #ff7fad;
	border-radius: 50%;
	text-align: center;
}

nav .logos-rs a:hover{
	opacity: 0.8;
}

nav .logos-rs img{
	padding-top: 5px;
}


.dropdown:after{
	position: absolute;
	content: "\f107";
	top: 40%;
	right: 12px;
	font-family: 'FontAwesome';
	font-size: 13px;
}

.dropdown-active:after{
	position: absolute;
	content: "\f107";
	top: 40%;
	right: 12px;
	font-family: 'FontAwesome';
	font-size: 13px;
	color: #fff;
}


/**** NAV MOBILE ***/

.overlay-mobile{

	display: none;

	position: fixed;

	top: 60px;
    
    left: 0;
    
    right: 0;
    
    bottom: 0;
    
    background-color: rgba(0,0,0,0.75);
    
    z-index: 51;
}


.show-overlay{

	display: block;
}


.header-mobile{

	max-height: 60px;

	display: none;

	justify-content: space-between;

	align-items: center;
}


.header-mobile > div > *{

	display: inline-block;

	vertical-align: middle;
}


.header-mobile > div > a > img{

	margin : 0 10px;

	display: block;
}


.header-mobile > div > img{
	
	height: 25px;
}


.header-mobile a:last-child{

	margin-right: 15px;

	color: #333333;

	-webkit-transition: all 300ms ease-in 0s;
    
    -moz-transition: all 300ms ease-in 0s;
    
    -o-transition: all 300ms ease-in 0s;
  	
  	transition: all 300ms ease-in 0s;
}


.rotate{

	-webkit-transform: rotate(90deg);
    
    -moz-transform: rotate(90deg);
    
    -o-transform: rotate(90deg);
    
    -ms-transform: rotate(90deg);
    
    transform: rotate(90deg);
}


.nav-mobile ul.nav > li.opened > a:after{

	-webkit-transform: rotate(180deg);
    
    -moz-transform: rotate(180deg);
    
    -o-transform: rotate(180deg);
    
    -ms-transform: rotate(180deg);
    
    transform: rotate(180deg);
}


.sub-underline{

	border-bottom: 2px solid #333;
}


/* Smarphones et petits écrans */
@media screen and (max-width: 800px) {

	/*** Class menu mobile ***/

	.header-mobile{

		display: -webkit-flex;

		display: flex;

	}

	#logo{

		display: none;
	}

	nav{

		display: none;

		margin-left: 0;

		padding-top: 0;

		position: absolute;
    	
    	left: 0px;
    	
    	right: 0px;
    	
    	background-color: rgb(255, 255, 255);
    	
    	z-index: 60;
		
	}


	nav > div:first-child{

		display: none;
	}


	.logos-rs{

		text-align: center;
		
		padding: 11px 1.3em;
    	
    	padding-top: 8px;
	}


	ul.nav{

		flex-direction: column;

		flex-wrap: nowrap;

		min-width: 100%;
	}



	ul.nav ul{

		position: static;

		max-height: none;

		display: none;

		transition: none;

		-webkit-transition : none;
	}


	/*ul.nav li:hover ul{
		
		max-height: 0 !important;
	}*/


	nav.nav-fixed {

		position: static;
	}



	/* Flêches sur le lien après le dropdown */

	/*ul.nav > li > a.active:after{

		border : none;
	}*/


	.dropdown:after, .dropdown-active:after{

		content : '';
	}


	.dropdown > a:after{
		border :none;
		position: absolute;
		content: "\f107";
		top: 40%;
		right: 12px;
		font-family: 'FontAwesome';
		font-size: 13px;
		-webkit-transition:all 300ms ease-in 0s;
    	-moz-transition: all 300ms ease-in 0s;
    	-o-transition: all 300ms ease-in 0s;
  		transition: all 300ms ease-in 0s;
	}

	ul.nav > li > a.active:after{

		border : none;
	}

	ul.nav > li.dropdown > a.active:after, ul.nav > li.dropdown-active > a.active:after{
		position: absolute;
		content: "\f107";
		top: 40%;
		right: 12px;
		font-family: 'FontAwesome';
		font-size: 13px;
		color: #fff;
		border : 0;
		width: auto;
		height: auto;
		margin-left: none;
		left: auto;
		-webkit-transition:all 300ms ease-in 0s;
    	-moz-transition: all 300ms ease-in 0s;
    	-o-transition: all 300ms ease-in 0s;
  		transition: all 300ms ease-in 0s;
	}

}



@media screen and (min-width: 801px) {

	nav{
		
		display: flex !important;
		
		display: -webkit-flex !important;
	}


}





/*------------------------------------*\
    $SLIDER
\*------------------------------------*/

div.bxslider{
	width: 100%;
	height: 100% !important;
}

div.bxslider > div{
	background-color: orange;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	-moz-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;
}

div.bxslider > div > a{
	display: block;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}


div.bxslider .text_slider{
	position: absolute;
	background-color: #fc87b2;
	text-align: center;
	color: #fff;
	height: 100%;
	width: 50%;
	opacity: 0.85;
	display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}


div.bxslider .text_slider > div span:first-child{
	font-family: "mathlete", sans-serif;
	letter-spacing: 1px;
	display: block;
	font-size: 6em;

}

div.bxslider .text_slider > div span:nth-child(3){
	font-family: "pacifico", sans-serif;
	display: block;
	font-size: 2.8em;
}

div.bxslider .text_slider > div img{
	display: inline;
	text-align: center;
}



#section2 p, #section3 p{
	text-align-last: center;
	line-height: 38px;
	color: #080808;
	font-size: 0.9em;
	font-family: "raleway-medium", sans-serif;
}



/*------------------------------------*\
    $SECTION 2
\*------------------------------------*/
#section2{
	background-image: url("../../img/homepage/bg_ail.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

#section2 div#img{
	position: absolute;
	width: 100%;
	top: 80px; /* 9% */
	text-align: center;
}

#section2 #content{
	padding-top: 200px;  /* 12%*/
}


#section2 #content div{
	background-color: rgba(255,255,255,0.85);
	width: 770px;
	margin: auto;
	padding-top: 90px;
}



#section2 h1, section#section2 h2{
	text-align: center;
}

#section2 p{
	padding: 1.4em 2.3em;
	margin: auto;
}


/*------------------------------------*\
    $SECTION 3
\*------------------------------------*/


#section3{
	background-image: url("../../img/homepage/bg_igp.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

#section3 > div:first-child{
	float: left;
	padding: 25px 0 0 2%;
}


#section3 > div:first-child img{
	max-width: 350px;
}

#section3 > div:nth-child(2){
	width: 550px;
	height: 100%;
	float: right;
	background-color: rgba(255,255,255,0.85);
	margin-right: 5%;
}


#section3 > div:nth-child(2) img{
	max-width: 200px;
	margin: auto;
	display: block;
	margin-top : 25px;
	margin-bottom : 15px;
}


#section3 > div:nth-child(2) p{
	width: 90%;
	margin : auto;
	margin-top: 20px;
}

#section3 > div:nth-child(2) h1, #section3 > div:nth-child(2) h2{
	text-align: center;	
}

span.separateur{
	display: block;
	background-color: black;
	height: 5px;
	width: 50px;
	margin: auto;
	margin-top: 10px;
}



/*------------------------------------*\
    $VIGNETTES HOMEPAGE
\*------------------------------------*/
#vignettes{
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
    flex-direction: row;
    font-family: "pacifico", sans-serif;
    text-align: center;
    font-size: 2.1em;
    color: #fff;
    /*height: 634.33px;*/
}

#vignettes > div{
	flex-grow: 1; 
	flex-basis: 0;
	position: relative;
	opacity: 0;
}


#vignettes > div:first-child{
	background-image: url("../../img/homepage/vignette_1.jpg"); 
	background-repeat : no-repeat; 
	background-size: cover;
}

#vignettes > div:nth-child(2){
	background-image: url("../../img/homepage/vignette_2.jpg"); 
	background-repeat : no-repeat; 
	background-size: cover;
}

#vignettes > div:last-child{
	background-image: url("../../img/homepage/vignette_3.jpg");
	background-repeat: no-repeat;
	background-size: cover; 
}

#vignettes > div span:first-child{
	display: block;
	background-color: rgba(239,102,154, 0.85);
	padding-bottom: 0.2em;
}


/*** OVERLAY EFFECT ***/


#vignettes .overlay{
	position: absolute;
	width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.5);
    opacity: 0;
    transition: .5s ease;
}

#vignettes > div span:nth-child(3){
	transition: .5s ease;
	font-size: 0.5em;
	opacity: 0;
	position: absolute;
	bottom: 10px;
	right: 10px;
	text-align: center;
	background-color: #e10023;
	padding: 0px 28px 3px 28px;
}

#vignettes > div:hover > .overlay {
	opacity: 1;
	cursor: pointer;
}

#vignettes > div:hover > span:nth-child(3){
	opacity: 1;
}

#vignettes > div span:nth-child(3):hover{
	cursor: pointer;
}



/*** ANIMATION AU SCROLL ***/

.slide{
	opacity: 1;
	transition: .5s ease;
	-webkit-animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }

}


/*------------------------------------*\
    $SECTION 4
\*------------------------------------*/

#section4{
	background: url("../../img/ardoise.jpg") no-repeat; 
	background-size: cover;
}

#section4 h1{
	color: #fff;
	font-weight: lighter;
	text-align: center;
	padding-top: 5px;
	font-size: 4.3em;
}

#section4 .separateur{
	background-color: #fff;
}



#section4 .row{
	max-width: 100%;
}



/*------------------------------------*\
    $ACTUALITES ACCUEIL (Section 4)
\*------------------------------------*/


#section4 #actus-accueil{
	width: 715px;
	margin: auto;
}

#section4 #actus-accueil > div:not(.no-actus){
	background-color: white;
	margin-bottom: 25px;
	height: 220px;
	position: relative;
}


#section4 #actus-accueil > .no-actus{
	width: 100%;
	margin-bottom: 20px;
}


#section4 #actus-accueil > a{
	font-family: "pacifico", sans-serif;
	float: right;
	color: #fff;
	font-size: 1.2em;
	background-color: #e10023;
	width: 220px;
    text-align: center;
    padding-bottom: 3px;
    transition: background-color .2s ease;
}


#section4 #actus-accueil > a:hover{
	background-color: #fe0028;
}


#section4 #actus-accueil .medium-5{
	height: 100%;
	/*background-color: orange;*/
	background-repeat: no-repeat;
	background-position: center;
	/*background-size: cover;*/
}


#section4 #actus-accueil .medium-7 div, #section4 #actus-accueil .medium-12 div{
	padding: 15px;
}

/*#section4 #actus-accueil > div img{
	max-width: 100%;
}*/


#section4 #actus-accueil > div span{
	font-size: 13px;
}


#section4 #actus-accueil > div h3{
	font-size: 1.4em;
	text-transform: uppercase;
    font-weight: normal;
    font-family: 'raleway-medium', sans-serif;
}


#section4 #actus-accueil > div > a{
	font-weight: bold;
	font-size: 0.8em;
	position: absolute;
	background-color: #f5f5f5;
	bottom: 0;
    right: 0;
    display: block;
    padding: 8px 13px;
    -webkit-transition: background-color 0.5s ease;
  	-moz-transition: background-color 0.5s ease;
  	-o-transition: background-color 0.5s ease;
  	transition: background-color 0.5s ease;
}

#section4 #actus-accueil > div > a:hover{
	background-color: #dfdfdf;
}


#section4 #actus-accueil p{
	line-height: 24px;
	margin-top: 15px;
	font-size: 0.9em;
}

#section4 > .row > .columns{
	margin-top: 50px;
}

#section4 > .row .medium-4 span{
	font-family: "pacifico", sans-serif;
	background-color: #fc4d8c;
	display: block;
    width: 370px;
    text-align: center;
    font-size: 1.4em;
    /*margin: auto;*/
    color: #fff;
    padding-bottom: 3px;
}

#section4 iframe{
	display: block;
	/*margin: auto;*/
}

#section4 > .row > .medium-4{
	position: relative;
}

#section4 #fleches{
	position: absolute;
	top: -100px;
	left: 80px;
	display: block;
	-moz-animation: bounceScroll 2s infinite;
    -webkit-animation: bounceScroll 2s infinite;
    animation: bounceScroll 2s infinite;
}

#section4 #forme-ail{
	position: absolute;
    bottom: -3px;
    right: 15%;
    height: 80px;
}






/*------------------------------------*\
    $RESPONSIVE ACCUEIL
\*------------------------------------*/

/*Max height */

@media screen and (min-width: 801px) and (max-width: 1200px) {

	#section4 #actus-accueil{

		width: 90%;

		margin : auto;
	}

	#section4 .inter-6{

		width: 50%;
	}


	#section4 > div.columns:first-child{

		width: 100%;
	}

	
	#section4 iframe, #section4 > .row .medium-4 span{

		/*width: 90%;*/
		margin : auto;
	}

	#section4 #fleches{

		display: none;
	}
	

}


/* Smarphones et petits écrans */
@media screen and (max-width: 800px) {

	
	/* Général */

	section .not-mobile{

		display: none;
	}


	section{

		height : initial;

		min-height: 200px;
	}



	/* Slider */

	div.bxslider .text_slider img{

		max-width: 90%;
	}

	div.bxslider .text_slider > div span:first-child{

		font-size: 2.5em;

		/*margin-top: 0;*/
	}


	div.bxslider .text_slider > div span:nth-child(3){

		font-size: 1.5em;
	}


	/* Section 2 */

	#section2{

		padding-bottom: 5%;
	}

	#section2 #content div{

		width: 90%;
	}

	#section2 #content{

		padding-top: 155px;
	}

	#section2 img{

		max-width: 200px;
	}

	

	/* Section 3 */

	/*#section3{

		padding : 2% 0;
	}

	#section3 > div{

		margin-top: 0;
	}*/

	#section3 > div:first-child img{

		max-width: 300px;

		margin: auto;
	}


	#section3 > div:first-child, #section3 > div:nth-child(2){

		width: 100%;

		float: none;

		text-align: center;

		padding-left: 0;
	}


	#section3 div:nth-child(2) img{

		max-width: 150px;
	}


	#section3 p{

		width: 90%;
	}


	/* Vignettes */

	#vignettes{

		/*flex-direction: column;

		height: auto;*/

		font-size: 1.7em;
	}




	/* Section 4 */

	#section4 #actus-accueil{

		max-width: 90%;
	}

	#section4 #fleches{

		display: none;
	}

	#section4 iframe{

		margin : auto;

		margin-bottom: 20px;

	}

	#section4 > .row .medium-4 span{

		margin : auto;
	}


}



@media screen and (max-width: 500px) {


	/* Général */

	section h1, #section4 h1{

		font-size: 3.3em;
	}


	section h2{

		font-size: 1.5em;
	}


	/* Slider */

	.bx-controls-direction{

		display: none;
	}


	/* Vignettes */

	#vignettes{

		flex-direction: column;

		height: auto !important;

	}


	#vignettes > div{

		height: 200px;

		flex-basis: auto;

		background-position: center;

	}



}




/*------------------------------------*\
    $MAIN
\*------------------------------------*/


.main:after {
    clear: both;
}

.main:after, .main:before {
    content: ' ';
    display: table;
}


.ariane{
	font-size: 0.7em;
	color: #5f5f5f;
	padding: 5px;
	margin-left: 10%;
}

.ariane a{
	text-decoration: underline;
}

.ariane a:hover{
	color: #222222;
}

/*.main{
	min-height: 700px;
	background-color: #d8d8d873;
}*/

.main p{
	text-align: justify;
}

.main  > .row:not(.recette), article > .row, .bg-content > .row{
	padding : 20px 0;
	background-color: #fff;
	min-height: 255px; /* A améliorer */
}

.bandeau-title{
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top center;
	/*background-size: cover;*/
	width: 100%;
	height: 300px;
}


.item-decouvrir .bandeau-title{
	background-image: url('/img/title/bandeau-decouvrir.jpg');
}

.item-deguster .bandeau-title{
	background-image: url('/img/title/bandeau-tartes.jpg');
}

.item-celebrer .bandeau-title{
	background-image: url('/img/title/bandeau-celebrer.jpg');
}

.item-trouver .bandeau-title{
	background-image: url('/img/title/bandeau-trouver.jpg');
}

.bandeau-actualite, .actu > .bandeau-title{
	background-image: url('/img/title/bandeau-actualites.jpg');
}



.main .bandeau-title h1{
	font-family: "pacifico", sans-serif;
	font-weight: lighter;
	font-size: 3.5em;
    text-align: center;
    line-height: 300px;   
    color: #fff;
    /*background-image: url('/img/overlay_title.jpg');
    background-repeat: repeat;*/
    background-color: rgba(0,0,0,0.4);
  	-webkit-filter: drop-shadow(0.045em 0.045em 0.04em rgba(0, 0, 0, 0.21));
}


/*** Animation pour le titre ***/


main h1.tracking-in-expand {
	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}


@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}




/*------------------------------------*\
    $ARTICLE
\*------------------------------------*/
article, .bg-content{
	/*background-color: #d8d8d873;*/
	background-image : url("../../img/bg-articles.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}



article > .row{
	background-color: #fff;
}

article table[border='0'],
article table[border='0'] tbody,
article iframe {
	border: 0;
}


article figcaption{
	/*text-align: center;
	font-family: "raleway-bold", sans-serif;
	font-size: 13px;
	padding-top: 5px;*/
	color: #9c9c9c;
    display: block;
    text-align: center;
    font-size: 0.7em;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: 2px;
    padding: 0 5px;
    text-transform: uppercase;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    width: 90%;
    margin: auto;
    margin-top: 7px;
}

article p{
	text-align: justify;
	color: inherit;
	line-height: 27px;
}


article h2, article h3, article h4{
	margin-left: 3%;
	margin-right: 3%;
	font-weight: normal;
}

article h2{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.7em;
	letter-spacing: 1px;
	margin-bottom: 10px;
}



/**** Différenciation actualités / articles ****/

.WidgetDirect{

	margin : 0 0 0 3% !important;

}

article.actu figure{
	margin-top: 15px;
}

article.actu img{
	max-width: 90%;
	display: block;
	margin: auto;
	border-radius: 3px;
}


article.actu  span.crea{
	font-size: 13px;
	font-family: "raleway-bold", sans-serif;
	display: inline-block;
	margin-bottom: 20px;
}

/*article.actu .medium-12 span.crea{
	padding-left: 20px;
}
*/

article.actu p span{
	color: #545454 !important;
}

article.actu .columns > div{
	padding: 2% 5% 2% 0%; /* Différencier avec le nombre de colonnes */
}

article.actu .small-12 > div{
	padding-left: 2%;
}

/*article .columns:first-child{
	background-color: red;
}

article .columns:nth-child(2){
	background-color: orange;
}*/


article.article .back{
	margin-bottom: 10px;
}

article.article p{
	margin: auto;
	margin-left: 3%;
	margin-right: 3%;
}

article .article-photos{
	width: 485px;
	margin : auto;
	margin-bottom: 15px;
}


article.article .article-photos img{
	
	display: block;
	
	max-width: calc(100% - 10px); /* On enlève les bordures */
	
	margin: auto;

	-webkit-box-shadow: 0 0 5px #ccc;
    
    box-shadow: 0 0 5px #ccc;
    
    border: 5px solid #fff;

}


/* Contenu article bdd */

.article-content{

	/*background-color: orange;*/

	padding: 1%;
}

.article-content *{

	font-family: 'raleway-regular', sans-serif;

	/*font-size: inherit !important;*/
}

.article-content p{

	width: 90%;
}

.article-content img{

	/*border: 1px solid #ddd !important;*/

  	padding: 0 !important;

  	float : none !important;

  	display: block;

  	margin : auto !important;

  	padding: 5px 0 !important;
}


.inline-flex p{
	
	display: inline-flex;
    
    align-items: center;    
    
    justify-content: center;
}


.inline-flex img{

	padding: 5px !important;
}


.article-content h2, .article-content h3, strong{

	font-weight: normal !important;

	font-family: 'raleway-medium', sans-serif;
}


.article-content h2{

	font-size: 2.2em;

	font-family: 'raleway-regular', sans-serif !important;

	padding: 10px 15px;

	margin-bottom: 20px;

	/*text-align: center !important;*/
	text-align: left !important;

	border-bottom: 1px dashed #d8d8d8;
	
}


.article-content h3{

	margin : 10px 3%;

	color: #e10023;

	margin-bottom: 15px;

	margin-top: 20px;

	text-transform: uppercase;

	text-transform: none;

	/*background : url("../../img/test_title.jpg") no-repeat;

	color: #fff;*/

}

.article-content h4{

	text-transform: uppercase;

	margin-top: 15px;

	margin-bottom: 10px;

	font-family: 'raleway-bold', sans-serif;

	padding: 5px 10px;

	color: #333;

	font-size: 0.95em;

	border-top : 1px solid #d8d8d8;

	border-bottom : 1px solid #d8d8d8;

	text-align: center !important;

}

.article-content h4 strong{

	font-family: 'raleway-bold', sans-serif;
}


.article-content h4 u{

	text-decoration: none;
}


.article-content table{

	max-width: 94%;

	margin : auto;

	/*border: 1px solid #000;*/
	
	border-collapse: collapse;
}


.article-content td{

	/*border: 1px solid #000;*/
	
	border-collapse: collapse;

	/*padding: 1%;*/

	padding: 5px 0;

	line-height: 27px;

	width: auto !important;
}


.article-content table tr > td:first-child{

	text-align: center;
}


.article-content p img, .article-content td img{

	float: none !important;
}


.article-content > div{

	margin : 5px 3%;

	line-height: 27px;
}



.article-content ul{

	font-family: 'raleway-regular', sans-serif !important;

	list-style: inside;

	line-height: 25px;

	margin-left: 3%;

	padding: 10px 0;
}


.article-content li{

	list-style-type: square;
}

.array{

	margin-top: 10px;

}

.array tr strong{

	font-family: 'raleway-bold', sans-serif;

}


.array tr td:first-child, .array tr td:nth-child(2){

	text-align: center;
}


.array th, .array tr{

	border-bottom: 1px solid #ddd;
}


@media screen and (max-width: 39.9375em) {


	.main  .bandeau-title{

		height: auto;
	}


	.main  .bandeau-title > h1{

		/*line-height: 125px;
    
    	font-size: 2.5em;*/

    	line-height: 100px;
    
    	font-size: 2em;
	}
	

	article iframe {
		
		max-width: 100%;
	}


	.article-content p, .article-content ul, .article-content td, .article-content div{

		font-size: 0.9em !important;
	}

	.article-content table td > p{

		width: auto;
	}

	article .article-photos{

		width: 95%;
	}


	.article-content img{

		max-width: 100% !important;

		float: none !important;

		height: auto !important;
	}

	.article-content h2{

		font-size: 1.5em;
	}


	.article-content h3{

		font-size: 1em;
	}


}


/*------------------------------------*\
    $RECETTES
\*------------------------------------*/

.recettes .bg-content > .row{
	padding-top: 0;
}

.recettes .bandeau-title{
	background-image: url('/img/title/bandeau-recette.jpg');
}

.recettes .header-form{
	border-top: 1px dashed #d8d8d8;
	border-bottom: 1px dashed #d8d8d8;
	padding: 2% 0; 
	margin: auto;
	margin: 1%;
}


form.search{
	width: 40%;
	display: inline-block;
	margin-left: 10%;
}

form.search input{
	width: 80%;
	padding: 10px 15px;
	font-family: "raleway-regular", sans-serif;
	font-size: 14px;
	-webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
}

form.search button{
	color: #fff;
	padding: 0 15px;
	height: 36px;
	border : 0;
	margin-left: -4px;
	vertical-align: bottom;
}

form.search button:hover{
	opacity: 0.9;
}

form.search button i{
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

form.search button:hover i{
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
}

form.search input:focus{
	background-color: #fff;
	box-shadow: 0 0 5px rgba(199, 199, 199, 1);
}

.sort{
	display: inline-block;
}


.sort > a{
	background-color: #eaeaea;
	font-size: 0.9em;
	padding: 5px 10px;
	-webkit-transition: all .25s ease;
	display: inline-block;
}

.sort > a:hover, .sort > a.active{
	background-color: #e10023;
	color: #fff;
}



div.galerie{
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
    flex-direction: row;
	padding: 1%;
	justify-content: space-around;
}

div.galerie-article{
	border-top: 1px solid #d8d8d8;
    width: 93%;
    margin: auto;
}


div.galerie > div:not(#load-more){
	flex-basis: 30%;
	flex-grow: 1;
	/*width: 30%;*/
	margin: 1rem;
	-webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  	transition: -webkit-transform 1s ease;
  	transition: transform 1s ease;
  	transition: transform 1s ease, -webkit-transform 1s ease;	
	position: relative;
	display: block;
	/*overflow: hidden;*/
}

div.galerie > div > a{
	display: block;
}

div.galerie > div > a > div{
	background-repeat: no-repeat;
	background-size: cover;
	background-position-x: center;
	transition: all 0.5s ease;
	height: 270px;
	position: relative;
}

div.galerie .overlay{
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba( 49, 49, 49, 0.55);
    opacity: 0;
    transition: .4s ease;
}



div.galerie > div > a > div:hover > .overlay{
	opacity: 1;
}

div.galerie .content{
	position: relative;
}

div.galerie .content > span:first-child{
    color: #9c9c9c;
    display: block;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: 2px;
    padding: 0 5px;
    text-transform: uppercase;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    margin-top: 2%;
}

div.galerie .content > span:nth-child(2){
	display: block;
	font-family: "mathlete-bold", sans-serif;
	text-align: center;
	font-size: 2em;
	color: #454545;
	text-overflow: ellipsis;
	/*letter-spacing: 1px;*/
}


div.galerie .content a:hover{
	color: black;
}


div.galerie .content img{
	opacity: 0.3;
	transition: opacity .4s ease;
}

div.galerie .content img.show{
	opacity: 1;
}



.galerie #load-more > div{
	display: inline-block;
}

div.galerie > span{
	width: 100%;
	font-family: "mathlete-bold", sans-serif;
	text-align: center;
	font-size: 1.9em;
	display: block;
	height: 20%;
	letter-spacing: 1px;
}



.galerie .no-result{
	background-color: #f5f5f5;
    font-weight: bold;
    padding: 15px 20px;
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

.galerie #load-more{
	width: 100%;
}


/*div.galerie > div:hover > div{
	cursor: pointer;
	transform: scale(1.2);
}*/



/** Animations **/

.fadeInUp {
	animation-duration: 1s;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	opacity: 0;
	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp;
}


@keyframes fadeInUp {
  from {
    -webkit-transform: translate3d(0, 40px, 0);
            transform: translate3d(0, 40px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes fadeInUp {
  from {
    -webkit-transform: translate3d(0, 40px, 0);
            transform: translate3d(0, 40px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}




@media screen and (max-width: 930px) {
	
	form.search, .sort{

		display: block;

		width: 70%;

		margin : auto;

		margin-bottom: 10px;
	}
	
}



@media screen and (max-width: 39.9375em) {
	
	form.search, .sort{

		width: 95%;
	}

	.sort > a{

		margin-bottom: 5px;
	} 


	div.galerie{

		flex-direction: column;
	}


	div.galerie > div > a > div{

		height: 200px;

		background-position: center;
	}


	div.galerie .content img{

		/*opacity: 1;*/

		vertical-align: baseline;

		width: 20px;
	}


	div.galerie .content > span:nth-child(2){

		font-size: 1.8em;
	}



}





/**********************************/
/********* FICHE RECETTE **********/
/**********************************/


.recette{
	background-color: #d8d8d873;
	/*padding: 2% 0 0 0;*/
	font-family: "raleway-regular", sans-serif !important;
	background-image: url("../../img/bg-recettes.jpg"); 
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center;
	position: relative;
}


.recette > .header{
	width: 800px;
	margin : auto;
	padding: 15px 0;
}


.recette > div:not(.header){
	width: 800px;
	margin : auto;
	background-color: #fff;
	/*-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);*/
	min-height: 450px;
	font-size: 0.95em;
	padding: 1px 0 15px 0;
} 


.recette > div > h2{
	font-family: "pacifico", sans-serif;
	font-weight: lighter;
	font-size: 3em;
	/*color: #fff;*/
	text-align: center;	
	border: 1px dashed #d8d8d8;
	margin: 1%;
	padding: 2%;
	line-height: 60px;
}


.recette .bg-img {
	background-repeat: no-repeat;
	height: 275px;
	margin: auto;
	background-size: cover;
	background-position: center;
}

.recette .infos{
	display: block;
	background : url("../../img/ardoise.jpg") no-repeat;
	font-size: 0.7em;
	text-align : center;
	padding : 5px 0;
	font-family: "raleway-bold", sans-serif;
	margin-bottom: 10px;
	color: #d8d8d8;
}

.recette .infos > span:first-child{
	background-color: #ff7fad;
    padding : 5px 10px;
    letter-spacing: 1px;
    color: #fff;
    text-transform: uppercase;
    margin-right: 2px;
}

.recette .infos > span:nth-child(2), .recette .infos > span:nth-child(3){
	padding : 0 5px;
}

.recette .infos i{
	padding-right: 2px;
}


.recette > div > .content{
	width: 95%;
	margin: auto;
	line-height: 25px;
}

.recette > div > .content > div{
	padding: 10px 0;
}


.recette > div > .content p, .recette > div > .content span{

	font-family: 'raleway-regular', sans-serif !important;

	font-size: 1em !important;
}


.recette .ingredients{
	/*list-style-image: url('/img/ail_liste.png');*/
	list-style-position: inside;
	padding: 10px 0;
}

.recette .ingredients li{
	background: url('/img/ail_liste.png') no-repeat left center;
	margin-bottom: 2px;
	padding-left: 20px; 
}


.recette h3{
	color: #9c9c9c;
    display: block;
    text-align: center;
    font-size: 0.8em;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: 2px;
    padding: 0 5px;
    text-transform: uppercase;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    margin: 5px 0 5px 0;
}


/*.recette > div:first-child div {
	background-repeat: no-repeat;
	background-position: center;
	height: 100%;
} 

.recette > div:nth-child(2){
	background-color: #fff;
	height: 100%;
}

.recette > div:nth-child(2) div{
	padding : 15px 20px;
	text-align: justify;
}*/


@media screen and (max-width: 800px) {
	
	.recette > div{
		
		width: 100% !important;
	}


	.recette > div > h2{
		
		font-size: 1.5em;
	} 
}




/*------------------------------------*\
    $ACTUALITÉS (Liste)
\*------------------------------------*/

.list-actu{
	position: relative;
	max-width: 950px; /* 90% */
	margin: auto;
	border-bottom: 1px solid #d8d8d8;
	margin-bottom: 25px;
	padding: 1% 0;
	padding-bottom: 15px;
}

.list-actu > .row{
	height: 100%;
}

.list-actu .medium-4{
	text-align: center;
}


.list-actu .medium-4 > a{
	display: block;
}

.list-actu img{
	display: block;
	margin: auto;
	max-width : 90%;
	max-height: 200px;
}


.list-actu h2{
	text-transform: uppercase;
	font-weight: normal;
	/*font-family: 'raleway-bold', sans-serif;*/
}

.list-actu .medium-8 div{
	padding: 5px 10px;
}

.list-actu .medium-8 p{
	line-height: 24px;
    margin-top: 15px;
    font-size: 0.9em;
    color: #4a4a4a;
}

.list-actu .medium-8 span{
	font-size: 13px;
}

.list-actu a.lien-actu{
	font-weight: bold;
	font-size: 0.85em;
	position: absolute;
	font-family: "pacifico", sans-serif;
    color: #fff;
    font-weight: lighter;
	/*background-color: #f5f5f5;*/
	background-color: #fe0028;
	bottom: 5px;
    right: 0;
    display: block;
    padding: 4px 20px;
   	padding-top: 2px;
    -webkit-transition: background-color 0.5s ease;
  	-moz-transition: background-color 0.5s ease;
  	-o-transition: background-color 0.5s ease;
  	transition: background-color 0.5s ease;
}

.list-actu a.lien-actu:hover{
	background-color: #e10023
}

.hidden-actu{
	display: none;
}


.no-actus{
	width: 90%;
	margin : auto;
	background-color: #eeeeee;
	text-align: center;
	height: 80px;
	line-height: 80px;
	font-family: 'raleway-medium', sans-serif;
}


#load-more{
	text-align: center;
}

#load-more a {
	display: inline-block;
	font-family: 'raleway-bold', sans-serif;
	padding: 7px 12px;
	font-size: 0.9em;
	transition: background-color .3s ease-in;
	-webkit-transition: background-color .3s ease-in;
  	-moz-transition: background-color .3s ease-in;
  	-o-transition: background-color .3s ease-in;
}


#load-more a:hover{
	background-color: #f4f4f4; 
}

/*** Loader affichage ***/

.lds-ellipsis {
  /*display: inline-block;*/
  position: relative;
  width: 64px;
  height: 64px;
}

.lds-ellipsis div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #dfdfdf;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}



@media screen and (max-width: 39.9375em) {
	
	.list-actu a.lien-actu{

		position: static;

		text-align: center;
	}


	.list-actu .columns{

		width: 100%;
	}

	.list-actu .lien-actu{
		
		font-size: 14px;
	}

}



@media screen and (max-width: 1000px) {


	.list-actu{

		height: auto;

		width: 90%;
	}


	.list-actu p:not(.mobile){
		
		display: none;
	}

	.list-actu p.mobile{
		
		display: block;
	}

}


/*@media screen and (min-width: 40em) and (max-width: 63.9375em) {
	
	.list-actu {
		
		width: 80%;
	}
}*/


div#page-erreur{
	
	min-height: 200px;
}


/*------------------------------------*\
    $PAGINATION DES ACTUS
\*------------------------------------*/
/*div.center{
	text-align: center;
}

div#pagination{
	display: inline-block;
}

div#pagination a{
	display: inline-block;
	padding: 6px 14px;
    text-decoration: none;
    color: black; 
    transition: background-color .4s;  
}

div#pagination a:hover:not(.active){
	background-color: #ddd;
}

div#pagination a.active{
	background-color: black;
	color: #fff;
}*/


/*------------------------------------*\
    $CONTACT
\*------------------------------------*/

#contact:after {
    clear: both;
}

#contact:after, #contact:before {
    content: ' ';
    display: table;
}


#contact > .columns > div {
	padding : 0 3% 3% 3%;
}

#contact h2{
	/*font-family: "mathlete", sans-serif;*/
	text-align: center;
	text-transform: uppercase;
	margin-left: 0px;
	letter-spacing: 0px;
	font-size: 1.5em;
}


#contact .separateur{
	margin-bottom: 15px;
}


#contact form{
	width: 90%;
	margin: auto;
}


#contact form .form-control{
	display: block;
    width: 100%;
    padding: 6px 10px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
	border-radius: 0;
    border-color: #ccc;
    border-width: 0 0 2px 0;
    border-style: none none solid none;
    box-shadow: none;
    font-family: inherit;
    transition: border-color .35s ease-in-out;
}

#contact form .form-control:focus{
	border-color: #9e9e9e;
}

#contact form label{
	opacity: 0;
}

#contact form textarea{
	resize: none;
}

#contact form .bouton_formulaire{
	border: none;
	background-color: #e10023;
	color: #fff;
	font-family: "pacifico", sans-serif;
	text-align: center;
    padding: 2px 0px;
    padding-bottom: 8px;
    font-size: 1.3em;
    display: inline-block;
   	width: 100%;
   	transition: background-color .2s ease;
}


#contact form .bouton_formulaire:hover{
	background-color: #fe0028;
}

#contact .g-recaptcha > div {
	margin: auto;
}

#contact form .row{
	margin-top: 20px;
}

#contact iframe{
	width: 100%;
}


.contact .bandeau-title{
	background-image: url('/img/title/bandeau-contact.jpg');
}


/*------------------------------------*\
    $MENTIONS LÉGALES
\*------------------------------------*/


.mentions .back{
	margin-bottom: 20px !important;
}


.mentions .bandeau-title{
	background-image: url('/img/title/bandeau-mentions.jpg');
}

.mentions h3{
	text-transform: uppercase;
	margin-top: 10px;
}

.mentions a{
	font-family: 'raleway-medium', sans-serif;
}

.mentions a:hover{
	text-decoration: underline;
}


/*------------------------------------*\
    $FOOTER
\*------------------------------------*/


footer{
	width: 100%;
	color: #fff;
	position: relative;
	/*background-color: #ff7fad;*/
	font-size: 0.9em;
	line-height: 23px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff7fad+1,ff82ab+99 */
	background: #ff7fad; /* Old browsers */
	background: -moz-linear-gradient(top, #ff7fad 1%, #ff82ab 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ff7fad 1%,#ff82ab 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ff7fad 1%,#ff82ab 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7fad', endColorstr='#ff82ab',GradientType=0 ); /* IE6-9 */
	padding-top: 1px;
}

/*footer > img {
	position: absolute;
	bottom: 0;
}*/

footer > div:first-child{
	width: 95%;
	margin: auto;
	border-top: 1px dashed #fff;
	border-bottom: 1px dashed #fff;
	margin-top: 1%;
	margin-bottom: 1%;
	padding: 1% 0;
}

footer .row{
	/*padding : 1% 0 3% 0;*/
}

footer .row > div:nth-child(2){
	text-align: center;
}

/*footer .row > div:nth-child(2) > div{
	background-color: orange;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
}*/

footer .row > div:nth-child(2) a:hover{
	text-decoration: underline;
}


footer .row .medium-4 > div{
	padding : 2em 1.5em; 
	/*min-height: 200px;*/
}

footer .row > .columns:last-child{
	float: left;
}

footer h4{
	font-size: 1em;
	font-weight: normal;
	font-family: 'raleway-bold', sans-serif;
	margin-bottom: 10px;
}

footer .row h4:not(h4:nth-child(2)){
	text-align: left;
}


footer ul#sitemap a:hover{
	text-decoration: underline;
}

footer ul#sitemap i.fa-play{
	color: #e10023;
	margin-right: 4px;
	font-size: 9px;
}

footer ul#sitemap ul{
	margin-left: 1em;
}

footer .logos-footer{
	text-align: center;
}

footer .logos-footer img{
	max-width: 100%;
}

footer .logos-footer > img{
	height: 70px;
}

footer .logos-footer .row-img{
	margin-bottom: 10px;
}

footer .logos-footer .row-img img{
	height: 40px;
}


footer .row > .columns:first-child div{
	margin-left: 20%;
}



.rotate{
	transform : rotate(90deg);
}

footer .copyright{
	text-align: center;
	font-size: 13px;
	background-color: #ff6ba0;
	padding : 1px 0;
}


footer .copyright a{
	text-decoration: underline;
}


footer .copyright b{
	font-weight: normal;
	font-family: 'raleway-bold', sans-serif;
}


/*------------------------------------*\
    $NEWSLETTER FOOTER
\*------------------------------------*/
/*form#form-newsletter input{
	width: 70%;
	margin-bottom: 0;
	margin-left: 6%;
	-webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
}

form#form-newsletter input, form#form-newsletter button {
    display: inline-block;
}

form#form-newsletter input:focus{
	background-color: #fff;
	box-shadow: 0 0 5px rgba(199, 199, 199, 1);
}

form#form-newsletter button{
	border-radius: 0px;
	line-height: normal;
	padding : 0 1rem;
	height: 2.4375rem;
	margin-left: -4px;
	color: #fff;
}*/




/*------------------------------------*\
    $CONTACT
\*------------------------------------*/
/*fieldset.contact {
	border: 1px solid #B1C800;
	padding-bottom: 10px;
}

label.inline {
	display: inline;
	margin-right: 5px;
}

.g-recaptcha {
	margin-bottom: 10px;
}



/*------------------------------------*\
    $SEARCH
\*------------------------------------*/
/*.recherche {
	margin: 15px 0;
}

.recherche .ariane {
	margin-bottom: 15px;
}*/