@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Quicksand:400,700&display=swap');

/************************ contenus site *************************/
body{
	font-family: 'Quicksand', sans-serif;
	color: #303030;
}
.container{
	position: relative;
	max-width: 950px;
	margin: 12px auto;
}
.container-nav{
	position: relative;
	max-width: 950px;
	margin: 5px auto;
}
.flexbox{
	display: flex;
	align-items: center;
}
a{
	text-decoration: none !important;
}
.ancre{
	height: 40px;
}
.row{
	display: flex;
  	flex-direction: row;
  	flex-wrap: wrap;
}
.row-fixe{
	display: flex;
}
.align-item-center{
	align-items: center;
}
.col-4-tab-2, .col-4-tab-1{
	flex: 0 0 25%;
}
.col-2-tab-1, .col-2-tab-2{
	flex: 0 0 50%;
}
.col-3-tab-1{
	flex: 0 0 33.33%;
}
.col-2-4-tab-1{
	flex: 0 0 75%;
}
.col-2-4-tab-1, .col-2-tab-2, .col-4-tab-1{
	padding: 15px;
}
.col-2-tab-1, .col-4-tab-2, .col-3-tab-1{
	padding: 15px 0px;
}
.padding-15{
	padding: 0px 15px 0 0;
}
.asso-picto, .doc-picto{
	padding-right: 10px;
}
.doc-picto{
	border-right: 3px solid #ffffff;
	width: 55px;
}
img.margin-center{
	margin: auto;
}
/********************** Boutons ****************/
div.btn-contact{
	background-color: #50baa6;
	line-height: 2.2em;
	width: 230px;
	margin: 30px auto;
	text-align: center;
	font-weight: 700;
}
div.btn-contact a{
	color: #ffffff;
	font-size: 1.2em;
}
div.btn-contact:hover a{
	color: #50baa6;
}
div.btn-contact:hover{
	background-color: #ffffff;
}
img.logo-img{
	width: 150px;
	margin: 2px;
}
/************************ texte *************************/
p{font-size: 1em;}
p span{
	font-size: 1.5em;
}
h2{
	font-family: 'Playfair Display', sans-serif;
	font-weight: 700;
	color: #50baa6;
	font-size: 1.9em;
	margin-bottom: 20px;
	position: relative;
	padding: 10px 0;
}
h4{
	font-family: 'Playfair Display', sans-serif;
	font-size: 1.3em;
	font-weight: 400;
	padding-left: 15px;
}
h2:after{
	content: "";
	bottom: 0;
	position: absolute;
	width: 100px;
	left: 0;
	height: 3px;
	background: #50baa6;
}
h2.text-blanc:after{
	background: #ffffff;
}
h3{
	font-size: 1.5em;
	font-family: 'Playfair Display', sans-serif;
	font-weight: 700;
}
strong{
	font-weight: 700;
}
h1{
	font-family: 'Playfair Display', sans-serif;
	font-weight: 400;
	font-size: 2.8em;
	text-align: center;
	color: #ffffff;
	margin-bottom: 10px;
	margin-top: 10px;
}
.text-blanc{
	color: #ffffff;
}
.text-center{
	text-align: center;
}
.text-legend{
	font-size: 0.9em;
}
.margin-bottom-10{
	margin-bottom: 10px;
}
section ul li{
	list-style-image: url('../img/bullet.png');
	list-style-position: inside; 
	margin: 0px 10px 10px 10px;
}
.text-menu-event{
	color: #787878;
	font-weight: 700;
	font-size: 1.1em;
}
.text-menu-event:hover{
	color: #000000;
}
.event-date{
	padding-top: 30px;
	font-size: 29px;
	font-weight: 700;
	color: #50baa6;
}
.text-event{
	font-size: 18px;
}
.lien-event{
	display: block;
	padding: 5px 0;
	font-size: 14px;
	background-color:#787878;
	color: #ffffff;
	width: 120px; 
	letter-spacing: 0.8px;
	font-weight: 700;
	text-align: center;
	margin: 10px 0;
}
.lien-event:hover{
	background-color:#a7a7a7;
}
/************** BLOCS *********************/
.border-grey{
	border:1px solid #787878;
}
.centre-vertical-parent{
	display: flex;
}
.centre-vertical-enfant{
	margin: auto;
}
.bloc-doc-gris{
	padding: 8px;
	background-color: #505050;
	color: #ffffff;
}
div.bloc-doc-gris:hover{
	background-color: #909090;
	vertical-align: middle;
}
.menu-event{
	padding: 10px 0;
	line-height: 2em;
}
.border-left-top-green{
	border-left: 4px solid #bbe3db;
	border-top: 4px solid #bbe3db;
	padding-left: 10px 20px;
	margin: 30px 0;
}
.img-video{
	width: 95%;
	margin:0 auto;
}
.bloc-twitter{
	margin: auto;
	text-align: center;
}

/************ Section et footer ************/
section{
	width: 100%;
	padding: 50px 20px;
}
.sect-fond-gris{
	background-color: #f3f3f3;
}
.sect-fond-bleu{
	background-color: #50baa6;
}
footer, .sect-fond-gris-fonce{
	background-color: #6e6e6e;
}
.sect-header{
	max-height: 600px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	min-height:300px;
	padding-top: 80px;
}
.sect-header p{
	font-size: 1.3em;
}
.sect-header:after{
	width: 100%;
	height: 40%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
}
.sect-header:before{
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
  transform: translateZ(0);
  background-size:cover;
  background:#1B2030 url(../img/image_header.jpg) top center no-repeat;
  background-attachment:fixed;
  animation: grow 60s  linear 10ms infinite;
  transition:all 0.2s ease-in-out;
  z-index:-2
}
.border-footer{
	border-top: 2px solid #aeaeae;
}
.padding-20{
	padding: 20px;
}
footer{
	padding: 10px;
}
footer p{
	color: #aeaeae;
	text-align: center;
}
header {
	margin-bottom: 0px;
	z-index: 1999;
	position: fixed;
	width: 100%;
	background-color: transparent;
}
header.active{
	display: block;
	background-color: #505050;
}
.site-logo {
	position: relative;
	top: 0px;
}
.menu{
	margin-left: auto;
}
ul.site-menu{
	margin: 0;
	width: auto;
}
ul.site-menu li{
	list-style: none;
	position: relative;
}

ul.site-menu li{
	display: inline-block;
	margin: 10px 10px;
}
ul.site-menu li a{
	color: #ffffff;
	font-size: 1.1em;
	line-height: 2em;
	-webkit-transition: all 0.8s;
  	-o-transition: all 0.8s;
  	transition: all 0.8s;
}

ul.site-menu li a:after{
	content: "";
	bottom: 0;
	position: absolute;
	width: 0%;
	left: 0;
	height: 2px;
	-webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition:all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition:all 0.5s;
}
ul.site-menu li a:hover:after{
	background-color: #ffffff;
  	width:100%;
}

/************ Responsive ************/
@media (max-width: 767px){
	.site-logo{
		display: none;	
	}
	img.logo-img{
	width: 120px;
		}
	.col-4-tab-2, .col-2-tab-2{
	flex: 0 0 50%;
	}
	.col-2-tab-1, .col-3-tab-1, .col-4-tab-1, .col-2-4-tab-1{
	flex: 0 0 100%;
	}
	#sect-label .col-2-tab-1:nth-child(2n){
	padding-top: 0;
}
	#sect-label .col-2-tab-1:first-child{
		padding-bottom: 0;
	}
	.nav{
		display: block;
		width: 100%;
		position: absolute;
		top: 50px !important;
		background-color: #f3f3f3;
		max-height: 0em;
		overflow: hidden;
		transition: max-height 0.5s ease-out;
		-webkit-transition: max-height 0.5s ease-out;
	}
	ul.site-menu li{
		width: 100%;
		display: none;
	}
}
@media (max-width: 500px){
	.col-4-tab-2, .col-2-tab-2{
	flex: 0 0 100%;
	text-align: center;
	}
}