@charset "utf-8";


@font-face {
	font-family: 'Raleway-Light';
	src: url('polices/Raleway-Light.ttf');
	src: url('polices/Raleway-Light.ttf?#iefix') format('truetype'),
	font-weight: normal;
	font-style: normal;
	font-size:36px;
}
@font-face {
	font-family: 'OpenSans-Light';
	src: url('polices/OpenSans-Light.ttf');
	src: url('polices/OpenSans-Light.ttf?#iefix') format('truetype'),
	font-weight: normal;
	font-style: normal;
	font-size:36px;
}


@font-face {
	font-family: 'Raleway-SemiBold';
	src: url('polices/Raleway-SemiBold.ttf');
	src: url('polices/Raleway-SemiBold.ttf?#iefix') format('truetype'),
	font-weight: normal;
	font-style: normal;
	font-size:36px;
}


h1,h2,h3,h4,h5,h6{
	 font-family: "Raleway-SemiBold";
} 

body {
    margin: 0;
	font-family:"OpenSans-Light";
	color:grey;
	background-color:#f1f1f1;
}
#container{
	position:relative;
	margin:0 auto;
	padding-top:15px;
	max-width:1200px;
	min-width:768px;
}

/*Entete*/
.main-header{
	position:relative;
	width:100%;
	height:auto;
}
.main-header img{
	display:inline-block;
	width:50px;
	height:50px;
	padding:0;
	margin:0;
}

.main-header h1{
	display:inline-block;
	margin-left:10px;
	padding:0;
	margin:0;
	vertical-align:top;
}
.social{
	display:inline-block;
	position:absolute;
	right:25px;
	bottom:60%;	
}
.social a{
	color:#c2c2c2;
}
.social a :hover{
	color:#9FF;
	text-shadow:1px 1px 2px black,0 0 25px rgba(0,0,0,0.19),0 0 15px rgba(0,0,0,0.19);
}
.topmenu {
	display:inline-block;
	width:100%;
    list-style-type: none;
    margin-top: 10px;
    padding-top: 15px;
	border-top:3px solid #969696;
	border-bottom:3px solid #969696;
    background:linear-gradient(#aaaaaa,#d6d6d6,#aaaaaa);
	background:-webkit-linear-gradient(#aaaaaa,#d6d6d6,#aaaaaa);
	background:-moz-linear-gradient(#aaaaaa,#d6d6d6,#aaaaaa);
}
.topmenu li {
    display: inline-block;
	background-color:#f2f2f2;
	border-radius:15px 15px 0 0;
}
.topmenu li a {
    display: inline-block;
    color: #3B3B3B;
    text-align: center;
    padding: 16px;
    text-decoration: none;
	font-size:14px;
}
.topmenu li a:hover {
    background-color: #9FF;
	border-radius:15px 15px 0 0;
	text-shadow:1px 1px 2px black,0 0 25px rgba(0,0,0,0.19),0 0 15px rgba(0,0,0,0.19);
	color:white;
}
.topmenu li a.active {
    color: white;
    background-color: #4CAF50;
	border-radius:15px 15px 0 0;
}



/* Contenu*/


.main-content {
	position:relative;
    width:100%;
	height:auto;
}

.section{
	display:inline-block;
	width:68%;
	vertical-align:top;
}
.barre-laterale{
	display:inline-block;
	width:30.4%;
	margin-top:15px;
	margin-left:15px;
}
.section-1, .section-2{
	display:inline-block;
	width:100%;
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
	margin-top:15px;
	text-align:center;
	padding:25px;
}

.section-1 a, .section-2 a{
	text-decoration:none;
	color:orange;
}
.section-1 a:hover,.section-2 a:hover{
	color:lightgreen;
}
hr{
	color:black;
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}




.a-propos-content{
	background-color:black;
	color:#f2f2f2;
	margin:0;
	padding:15px;
}
.a-propos-content a{
	text-decoration:none;
	color:orange;
}
.a-propos-content a:hover{
	text-decoration:none;
	color:lightgreen;
}

.articles{
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
	margin-top:20px;
	margin-bottom:20px;
}
.article a{
	text-decoration:none;
	color:darkorange;
}
.article a:hover{
	text-decoration:none;
	color:lightgreen;
}
.article-titre{
	background-color:black;
	color:#f2f2f2;
	padding:10px;
}
.article-contenus{
	padding:0 20px;
}

.menu{
	margin-top:20px;
	margin-bottom:20px;
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.menu-title{
	background-color:black;
	color:#f2f2f2;
	padding:10px;
}
.menu-content{
	display:block;
	padding-top:20px;
}
.menu-content ul li{
	padding:0 20px;
	list-style-type:none;
}
.menu-content ul{
	padding:0;
	margin:0;
}
	
.menu-content ul li a{
	text-decoration:none;
	color:grey;
}

.follow-me{
	margin-top:20px;
	margin-bottom:20px;
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.follow-me-title{
	background-color:black;
	color:#f2f2f2;
	padding:10px;
}
.follow-me-content{
	display:block;
	padding:20px;
	cursor:pointer;
	color:grey;
}

.follow-me-content i:hover{
	color:lightblue;
	
}

.souscrire{
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
	margin-top:20px;
	margin-bottom:20px;
}
.souscrire-titre{
	background-color:black;
	color:#f2f2f2;
	padding:20px;
}
.souscrire-content{
	padding:20px;
	color:grey;
}

.input-souscrire{
	border:1px solid #ccc!important;
	padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%
}

.bouton-souscrire{
	text-align:left;padding:8px 16px;
	display:block;width:100%;
	color:#fff!important;background-color:#f44336!important
}
/*-------------------------------------slides------------------------------------------*/


	 .main-slider{
		position:relative;
		height:300px;
		box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
	}
	.slideshow-container {
	  position: absolute;
	  left:0;
	  top:0;
	  width: 100%;
	  height:100%;
	  margin: 0;
	  padding:0;
	  background-image:url(../img/fond-slider1.png);
	  z-index:10;
	  
	}
	.mySlides {
		display: none;
	}
	
	.prev, .next {
	  cursor: pointer;
	  position: absolute;
	  top: 45%;
	  width: auto;
	  margin-top: -22px;
	  padding: 16px;
	  color: white;
	  transition: 0.6s ease;
	  border-radius: 0 3px 3px 0;
	}
	
	/* Position the "next button" to the right */
	.next {
	  right: 0;
	}

	
	/* On hover, add a black background color with a little bit see-through */
	.prev:hover, .next:hover {
	  color: rgba(0,0,0,0.8);
	}
	
	/* Caption text */
	.text {
	  color: orange;
	  font-size: 36px;
	  padding: 8px 12px;
	  position: absolute;
	  top: 40%;
	  left:30%;
	  text-align:center;
	}

	/* Number text (1/3 etc) */
	.numbertext {
	  color: #f2f2f2;
	  font-size: 12px;
	  padding: 8px 12px;
	  position: absolute;
	  top: 0;
	}
	
	/* The dots/bullets/indicators */
	.dot {
	  cursor:pointer;
	  height: 13px;
	  width: 13px;
	  margin: 0 2px;
	  background-color: #bbb;
	  border-radius: 50%;
	  display: inline-block;
	  transition: background-color 0.6s ease;
	}
	.boule{
		position:absolute;
		bottom:10%;
		left:47%;
		z-index:20;
	}
	.active, .dot:hover {
	  background-color: #717171;
	}
	
	/* Fading animation */
	.fade {
	  -webkit-animation-name: fade;
	  -webkit-animation-duration: 1.5s;
	  animation-name: fade;
	  animation-duration: 1.5s;
	}
	
	@-webkit-keyframes fade {
	  from {opacity: .4}
	  to {opacity: 1}
	}
	
	@keyframes fade {
	  from {opacity: .4}
	  to {opacity: 1}
	}









/* Pied de page*/
.main-footer {
	display:inline-block;
	position:relative;
	width:100%;
    background-color: #444;
    color: white;
	font-size:12px;
}
.fleche{
	position:absolute;
	bottom:5px;
	right:5px;
	width:60px;
	height:60px;
	text-align:center;
	color:white;
	opacity:0.5;
}
.fleche:hover{
	color:#ff5859;
	cursor:pointer;
}.main-footer p{
	position:relative;
	color:grey;
}
h3 ~ ul{
	list-style-type:none;
	margin:0;
	padding:0;
}
h3 ~ ul a{
	color:grey;
	text-decoration:none;
}
div.partenaires, div.nos-photos,div.menu-entente{
	display:inline-block;
	vertical-align:top;
	
}
.pied > h3{
	color:#3CF;
}

div.menu-entente{
    width: 23%;
	padding:0 25px;
}
div.menu-entente h3{
    color:#3CF;
}
div.nos-photos{
	width: 50%;
}
div.partenaires{
	width: 25%;
}div.partenaires a:hover{
	color:#f2f2f2;
}