@charset "utf-8";

/* CSS Document */



* { margin: 0; padding: 0;}



body,

html {

  height: 100%;

}



body {

  margin: 0;

  font-family: 'Open Sans', sans-serif;

}



.clearfix {

  *zoom: 1;

}



.clearfix:before,

.clearfix:after {

  display: table;

  line-height: 0;

  content: "";

}

.clearfix:after {

  clear: both;

}



header{

	width: 100%;

	height: auto;

	padding: 7px 0;

	background-color: rgba(0,0,0,0.8);

	position: fixed;

	z-index: 99;

	font-family: 'Oswald', sans-serif;

}



.container { width: 1290px; margin: 0 auto; position: relative;}



#menu-supp { float: right; margin: 10px 0 0 20px;}

#menu-supp a { width: 28px; height: 28px; display: block; text-indent: -9999px; float: left; margin-right: 10px;}

#menu-supp #btn-facebook { background: url(../images/icon-fb.png) center center no-repeat #7b7b7b;}

#menu-supp #btn-instagram { background: url(../images/icon-instagram.png) center center no-repeat #7b7b7b;}

#menu-supp a:hover { background-color: #f7941e !important;}



.header-left{ float: left; position: relative; font-family: 'Oswald', sans-serif; padding-left: 20px;}

.header-left a { text-transform: uppercase; color: #f7941e; font-size: 30px; font-weight: bold; text-decoration: none; letter-spacing: 1px;}

.header-left a:hover { color: #fff;}

 

.header-right{

	position: relative;

	color: white;

	float: right;

	text-align: right;

}



#joindre { background: url(../images/bg-joindre.jpg); padding: 100px 0;}

#joindre p { font-size: 30px; color: #CCC; text-align: center; padding: 0 50px;}

#joindre a { color: #fff;}



#copy { background-color: #000; padding: 80px 0;}

#copy p { text-align: center; color: #CCC; padding: 0 50px;}

#copy p span { color: #666;}

#copy a { color: #fff; text-decoration: none;}



.titre-page {  overflow: hidden; position: relative;

    height: 600px; 

    background-attachment: fixed;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

	-webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;}



.titre-page .container { height: 100%;}  



#parralax-apropos { background-image:url(../images/parralax/1.jpg);}

#parralax-invitez { background-image:url(../images/parralax/2.jpg);}

#parralax-axes { background-image:url(../images/parralax/3.jpg);}

#parralax-voter { background-image:url(../images/parralax/4.jpg);}



.col { width: 40%; margin: 50px 5%; float: left; position: relative;}

.separ { border-bottom: 1px solid #CCC; margin-bottom: 20px;}





h1 {font-family: 'Oswald', sans-serif; margin-bottom: 20px;}

.titre-page h1 { font-size: 50px; padding: 20px 40px; background-color: rgba(0,0,0,0.8); font-weight: normal; text-transform: uppercase; display: inline-block; position: absolute; bottom: 50px; left: 0; color: #fff;}

h2 {font-family: 'Oswald', sans-serif; font-size: 28px; margin-bottom: 20px; text-transform: uppercase;}

p, .container ul { color: #666; padding-bottom: 30px; font-size: 20px;}

.container ul { list-style: none; margin-left: 40px;}

.container ul li { background: url(../images/fleche-axes.png) left center no-repeat; padding-left: 50px; margin-bottom: 20px;}

.col p { text-align:justify;}

.container p a, .container ul a { color: #000;}

.container p a:hover, .container ul a:hover { color: #fff; background-color: #f7941e; text-decoration: none;}



.btn { display: block; float: left; margin: 20px 20px 30px 0; padding: 20px 30px; border-radius: 20px; text-decoration: none; font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: #000; background-color: #f7941e;}

.btn:hover { background-color: #000; color: #fff;}





/* ACCUEIL */



#accueil-apropos { background: url(../images/bg-accueil-apropos.jpg); position: relative;

    background-attachment: fixed;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

	-webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;}

  

#accueil-fleche-bas { width: 120px; height: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; background-color: #e5e5e5; display: block; margin: -60px 0 0 -60px; left: 50%; position: absolute; z-index: 2;}

#accueil-fleche-bas img { margin: 15px 0 0 45px; opacity: .3;}

#accueil-fleche-bas:hover img { margin-top: 25px; opacity: 1;}

#accueil-bloc-gris { height: 240px; background-color: #e5e5e5;} 

#accueil-apropos-texte { width: 900px; margin: -150px auto 150px auto; background-color: #fff; box-shadow: 0 0 40px rgba(0,0,0,.2);}

#accueil-apropos-texte-inner { padding: 70px 80px;}

#accueil-apropos-texte p { font-size: 18px; font-style:italic;}

#accueil-apropos-texte #plus { background-color: #dbdbdb;}

#accueil-apropos-texte #plus:hover { background-color: #000;}



#axes-titre {font-family: 'Oswald', sans-serif; font-size: 73px; text-transform: uppercase; color: #f7941e; line-height: 70px; text-align: center; margin: 60px 0 30px 0;}

#axes-titre span { font-size: 44px; color: #000; letter-spacing: 4px;}



#bg-page { background:url(../images/bg-axes-accueil.jpg) bottom repeat-x; padding-bottom: 170px;}

.axes-case { width: 375px; height: 120px; float: left; position: relative; font-family: 'Oswald', sans-serif; border: 1px solid #f7941e; margin: 20px 25px;}

.axes-numero { font-size: 50px; position: absolute; top: 20px; left: 25px;}

.axes-titre { font-size: 22px; width: 270px; text-transform: uppercase; margin: 27px 0 0 70px;}

.axes-fleche { width: 30px; height: 30px; background: url(../images/fleche-axes.png) center center no-repeat; position: absolute; top: 40px; right: 40px; opacity: 0;}



.axes-case:hover { background-color: #f7941e; cursor: pointer;}

.axes-case:hover .axes-numero { opacity: 0;}

.axes-case:hover .axes-titre { margin-left: 35px}

.axes-case:hover .axes-fleche { right: 25px; opacity: 1;}






/* slider */



.owl-carousel {

  position: relative;

  height: 100%;

}

.owl-carousel div:not(.owl-nav) {

  height: 100%;

}



.owl-carousel .owl-slide-un {

  background-image: url(../images/slider-accueil/1.jpg);

  background-repeat: no-repeat;

  background-size: cover;

  background-position: top center;

}



.owl-carousel .owl-slide-deux {

  background-image: url(../images/slider-accueil/2.jpg);

  background-repeat: no-repeat;

  background-size: cover;

  background-position: top center;

}



.owl-carousel .owl-slide-trois {

  background-image: url(../images/slider-accueil/3.jpg);

  background-repeat: no-repeat;

  background-size: cover;

  background-position: top center;

}



.owl-carousel .owl-slide-quatre {

  background-image: url(../images/slider-accueil/4.jpg);

  background-repeat: no-repeat;

  background-size: cover;

  background-position: top center;

}



.owl-carousel .owl-slide-cinq {

  background-image: url(../images/slider-accueil/5.jpg);

  background-repeat: no-repeat;

  background-size: cover;

  background-position: top center;

}



.owl-carousel .owl-slide-six {

  background-image: url(../images/slider-accueil/6.jpg);

  background-repeat: no-repeat;

  background-size: cover;

  background-position: top center;

}



.owl-carousel .owl-slide-sept {

  background-image: url(../images/slider-accueil/7.jpg);

  background-repeat: no-repeat;

  background-size: cover;

  background-position: top center;

}



.owl-carousel div.owl--text {

  position: absolute;

  bottom: 5em;

  left: 6em;

  padding: 30px;

  height: auto;

  max-width: 50%;

  font-family: 'Oswald', sans-serif;

  text-transform: uppercase;

}



.owl--text .slider-titre { color: #a8a8a8; font-size: 50px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 3px solid #fff;}

.owl--text .slider-axe { color: #fff; font-size: 70px; margin-bottom: 20px;}

.owl--text a { font-size: 40px; letter-spacing: 1px; color: #fff; text-decoration: none; background: rgba(0,0,0,0.7); border-radius: 10px; text-transform: none; display: inline-block; padding: 10px 20px;}

.owl--text a:hover { background-color: #f7941e; color: #000;}



.owl-carousel .owl-nav {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

}

.owl-carousel .owl-nav div {

  position: absolute;

  top: 0;

  bottom: 0;

  display: inline-block;

  zoom: 1;

  margin: 0;

  width: 50px;

  height: 50px;

  line-height: 25px;

  text-align: center;

  font-size: .9em;

  border-radius: 3px;

  color: #FFF;

  opacity: .3;

  text-transform: capitalize;

}

.owl-carousel .owl-nav div:hover {

opacity: 1;

}

.owl-carousel .owl-nav .owl-prev {

  left: 15px;

}

.owl-carousel .owl-nav .owl-next {

  right: 15px;

}





/* À PROPOS */



#photo-frame { width: 300px; height: 300px; overflow: hidden; border-radius: 150px; position: relative; left: 50%; margin-left: -150px; margin-bottom: 30px;}

#apropos-slogan { width: 350px; margin-bottom: 40px;}







/* AXES */



#menu-axes { list-style: none; margin: 50px 0; overflow: hidden;}

#menu-axes li { float: left; background: none; padding: 0; margin: 0;}

#menu-axes a { display: block; border: 1px solid #f7941e; padding: 20px 30px; color: #000; text-decoration: none; font-family: 'Oswald', sans-serif; text-transform: uppercase; margin: 10px;}

#menu-axes a:hover { background-color: #f7941e;}

#menu-axes #current { background-color: #f7941e;}

#menu-axes #current:hover { cursor: default;}

.titre-axes { width: 350px; position: relative; left: 50%; margin: -100px 0 50px -175px; font-family: 'Oswald', sans-serif; text-transform: uppercase; border: 1px solid #ccc; box-shadow: 4px 4px 0 rgba(0,0,0,.2); font-size: 25px; text-align: center; padding: 10px 0; background-color: #fff;}

.col .p-axes { text-align: center;} 

.axe-btn { position: relative; left: 50%; margin-left: -80px;}



.gallery { margin: 0 0 60px 0; overflow: hidden;}

.gallery a { background-color: #f7941e; display: block; float:left; overflow: hidden; position: relative; width: 29%; margin: 2%;}

.gallery a img { opacity: 1; width: 100%;}

.gallery a:hover > img { opacity: 0.5}

.gallery a span { position: absolute; background:url(../images/zoom.png) center center no-repeat; z-index: 80; opacity: 0; width: 100%; height: 100%;}

.gallery a:hover span { opacity: 1;}




/* OÙ VOTER */

.table-ou-voter {margin-bottom: 50px; font-size: 20px;}
.table-ou-voter th, .table-ou-voter td { padding: 5px; text-align: left;}
.table-ou-voter th {background-color: #000; color: #fff;}
.table-ou-voter tr:nth-child(even) td {background-color: #EDEDED;}




/* ENGAGEMENTS */

#zone-engagements {margin-top: 50px; text-align: center;}
.engagements-element {display: inline-block; width: 45%;}
.engagements-element img {width: 90%; height: auto;}





/* TRANSITIONS */



#menu-supp a, .header-left a, .owl--text a, .owl-carousel .owl-nav div, #accueil-fleche-bas img, .btn, .axes-case, .axes-numero, .axes-titre, .axes-fleche, #menu-axes a, .container p a, .container ul a, .gallery a img, .gallery a span {

-webkit-transition: 0.3s;

-moz-transition: 0.3s;

-o-transition: 0.3s;

-ms-transition: 0.3s;

transition: 0.3s}









/* MENU */



#open{

	display: none;

}

nav { margin-top: 5px;}

nav>a{

	text-decoration: none;

	color: white;

	position: relative;

	display: inline-block;

	font-size: 16px;

	text-transform: uppercase;

	line-height: 40px;

	padding: 0 20px;

	-webkit-transition: all .3s ease;

}

nav>a:hover{

	background: #f7941e;

	border-radius: 5px;

	color: #000;

}



nav>a#current { cursor: default; color: #f7941e;}

nav>a#current:hover { background-color: transparent;}



.hidden-desktop{

	display: none;

}



.header-right label{

	position: absolute;

	top: 0;

	right: 0;

	cursor: pointer;

}

.header-right span{

	position: relative;

	font-size: 12px;

	width: 2em;

	height: 2em;

	background: rgba(255,255,255,.8);

	-webkit-transition: all .3s ease;

}

.header-right span:hover{

	background: rgba(255,255,255,1);

}

.header-right span:before,

.header-right span:after{

	content: '';

	position: absolute;

	width: 2em;

	height: .5em;

	top: 4px;

	left: 0;

	background: #000;

}

.header-right span:after{

	top: 14px;

}



@media all and (max-width: 1310px) {

	.container { width: 94%; margin: 0 3%;}

	.owl--text .slider-titre { font-size: 25px; padding-bottom: 10px; margin-bottom: 10px;}

	.owl--text .slider-axe {font-size: 40px; margin-bottom: 10px;}

	.owl--text a { font-size: 25px;}

	

	.axes-case { width: 43%; margin: 3%;}

	.axes-titre { font-size: 20px; width: 70%;}

}



/* Small monitor */

@media (max-width: 979px){

	nav>a{

		padding: 0 1.5em;

	}

	#accueil-apropos-texte{ width: 95%;}

	.axes-case { width: 93%; margin: 3%;}

	.axes-titre { font-size: 20px; width: 70%;}

	.col { width: 90%; float: none;}
    
    p {font-size: 16px;}
    .table-ou-voter {font-size: 16px;}
    .container ul {font-size: 16px;}
    
    #zone-engagements {margin-top: 40px;}
    .engagements-element {display: inline-block; width: 100%;}
    .engagements-element img {width: 90%; height: auto;}
    
}

 

/* Landscape phone to portrait tablet */

@media (max-width: 767px) {

	.container{

		width: 95%;

	}

	nav>a{

		padding: 0 2em;

	}

	.header-left,

	.header-right{

		width: 100%;

		text-align: center;

		padding: 0;

	}

	

	#menu-supp { float: none; position: absolute; margin: 0; top: 20px; left: 20px;}

	header{position: relative;}

	

	.owl-carousel .owl-slide-un, .owl-carousel .owl-slide-deux, .owl-carousel .owl-slide-trois, .owl-carousel .owl-slide-quatre, .owl-carousel .owl-slide-cinq, .owl-carousel .owl-slide-six, .owl-carousel .owl-slide-sept {background-position: top right;}
    
    .owl-carousel div.owl--text {left: 0;}

	

	.owl--text .slider-titre { font-size: 20px; color: #fff;}

	.owl--text .slider-axe {font-size: 30px;}

	

	#accueil-fleche-bas	{ display: none;}

	

	#accueil-apropos-texte-inner { padding: 40px 60px;}

	

	.titre-page h1 { font-size: 35px; padding: 10px 20px;}

	

	.titre-page {height: 400px;}

	

	#joindre p { font-size: 20px;}

	

	.col p { text-align: left;}

	.col .p-axes { font-size: 16px;}

	

	.gallery a { width: 46%; margin: 2%;}

}

 

/* Landscape phones and down */

@media (max-width: 480px) {

	

	header { min-height: 100px;}

	

	nav{

		height: 0;

		overflow: hidden;

		-webkit-transition: all .3s ease;

		margin-top: 50px;

	}

	input[type="checkbox"]:checked + nav{

		height: 215px;

	}

	nav>a{

		padding: 0 1em;

		display: block;

		border-bottom: solid 1px rgba(255,255,255,.1);

	}

	.header-left,

	.header-right{

		width: 100%;

		text-align: center;

	}

	.hidden-desktop{

		display: block;

	}

	

	#menu-supp { top: 60px;}

	.header-right label { margin-top: 10px; margin-right: 10px;}

}