@font-face {
    font-family: 'bebas_neuebold';
    src: url('../fonts/bebasneue_bold-webfont.woff2') format('woff2'),
         url('../fonts/bebasneue_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'bebas_neuebook';
    src: url('../fonts/bebasneue_book-webfont.woff2') format('woff2'),
         url('../fonts/bebasneue_book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body{
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}

h1,h2,h3,h4,h5{
    font-family: 'bebas_neuebold';
	text-transform:uppercase;
	font-weight:bold;
}

h1 span{
	background: url(../img/nddl.png) bottom center no-repeat;
	background-size:120px 22px;
}

html,body {height:100%;}

#headlines{
	background:#ffce20 url(../img/background-nddl.jpg) center center no-repeat;
	background-size:cover;
	margin-bottom:0;
	border-radius:0;
	/*height:100vh;*/
}

.navbar{
	margin-bottom:0;
	border:none;
	min-height:60px !important;
}

.navbar-default{
	background:#fff;
}

.navbar-brand{
	padding:0;
}

.navbar h4{
    font-family: 'bebas_neuebook';
	font-weight:100;
	padding-top:10px;
	padding-bottom:0;
	margin-top:0;
	margin-bottom:0;
	margin-left:5px;
}

.navbar h4 strong{
    font-family: 'bebas_neuebold';
}

.navbar .socials{
	list-style-type: none;
	margin-top:10px;
	padding-left:5px;
}

.fixed-header{
	background:#fff;
	z-index:5;
	display:none;
}

.fixed-header .navbar-brand img{
	max-height:60px;
	margin:5px;
}

.fixed-header .navbar .pull-right{
	background-image:none !important;
}

.fixed-header h2{
	font-size:20px;
	display:block;
	float:left;
	margin:12px 0;
	margin-left:20px;
	padding-right:40px;
	background: url(../img/vote-fixed.png) right center no-repeat;
	background-size:15px 28px;
}

.callto-socials ul{
	list-style-type: none;	
}

.callto-socials ul a, .callto-socials ul a i{
	color: #fff;	
}

.callto-socials ul a{
	text-decoration:none;
}

.callto-socials ul a i{
	font-size:50px;
	width:75px;
	height:75px;
	padding:10px;
	border-radius:50%;
	border:solid 2px #fff;
}

.callto-socials a:hover i{
	color:#110e03;
	border-color:#110e03;
}

.callto-socials ul p{
	color:#110e03;
	font-size:14px;
	font-weight:bold;
}

.result-ok .callto-content h2{
	color:#110e03;
}

.result-ok .entitle{
	display:block;
	text-align:left;
	margin:0 auto;
}

.result-ok .entitle h1{
	margin:0 auto;
	display:block;
	width:630px;
	background:transparent url(../img/picto-a-voter.png) left center no-repeat;
	background-size:138px 138px;
	padding-left:160px;
}

.callto-socials ul p span{
	color:#fff;
}

.callto-socials .callto-content{
	padding-top:0;
}

.callto-socials{
	width:95%;
}

.navbar .socials li{
	float:left;
	margin-right:10px;
}

.navbar .socials li a{
	color:#000;
	font-size:12px;
}

.navbar .socials li a i{
	border:solid 1px #39d3c9;
	width:17px;
	height:17px;
	line-height:17px;
	border-radius:50%;
	padding:10px;
	display:inline-block;
	position:relative;
	margin-top: -1px;
	vertical-align: top;
}

.navbar .socials li a span{
	color:#39d3c9;
}

.navbar .socials li a i.fa-facebook:before{
	position:absolute;
	top:3px;
	left:6px;
}

.navbar .pull-right{
	background-repeat:no-repeat;
	background-position:left center;
	background-image:url(../img/arrow-socials.png);	
	background-size:15px 30px;
	padding-left:20px;
}

.navbar .socials li a i:before{
	position:absolute;
	top:3px;
	left:4px;
}

.navbar-header{
	width:100%;
}

.jumbotron p.accroche{
    font-weight: 400;
	font-size:16px;
}

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

.jumbotron p.closure{
	font-size:12px;
}

.jumbotron p.counter{
    font-family: 'bebas_neuebold';
	font-size:45px;
	background-repeat:no-repeat;
	background-position:center center;
	background-image:url(../img/fond-turquoise.png);	
	background-size:350px 90px;
	padding:20px;
	margin-bottom:-40px !important;
}

.callto{
	color:#fff;
	width:550px;
	height:275px;
	margin:30px auto;
	background-repeat:no-repeat;
	background-position:center center;
	background-image:url(../img/encart-noir.png);	
	background-size:550px 275px;	
}

.result-ok .callto{
	width:800px;
	background-image:url(../img/encart-ok.png);
	background-size:800px 210px !important;
	height: 210px;
	
}

.question-lightbox{
	background-repeat:no-repeat;
	background-position:top center;
	background-image:url(../img/encart-noir.png);	
	background-size:420px 190px;
	padding:20px;
	padding-bottom:40px;
}

.callto-content{
	padding-top:30px;
	padding-bottom:30px;
}

.nddl-answer{
	margin-bottom:15px;
	margin-top:10px;
}

.nddl-answer .btn,
.btn-support {
	margin-left:8px;
	margin-right:8px;
	color:#000;
	font-size: 20px;
	padding-left:25px;
	padding-right:25px;
	border-radius:20px !important;
    font-family: 'bebas_neuebold' !important;
}

.btn-nddl, .btn-support {
	background:#FFCE20;
}

.btn-group>.btn.active, 
.btn-group>.btn:active, 
.btn-group>.btn:focus, 
.btn-group>.btn:hover{
	background:#39D3C9;	
	box-shadow:none;
}

.container-faq{
	background:#000;	
	color:#fff;
	padding-top:60px;
	padding-bottom:60px;
}

.row-faq{
	padding-bottom:60px;
}

.row-faq a{
	color:#39D3C9;
}

.container-faq h2{
	display:block;
	background-repeat:no-repeat;
	background-position:left center;
	background-size:75px 75px;
	line-height:75px;
	padding-left:115px;
	margin-bottom:30px;
}

.container-faq .why-icon{
	background-image:url(../img/picto-turquoise.png);
	line-height:34px;	
	padding-top:5px;
	padding-bottom:5px;
}

.container-faq .project-icon{
	background-image:url(../img/picto-jaune.png);
}

.container-faq .using-icon{
	background-image:url(../img/picto-gris.png);	
}

.container-ape{
	padding-top:60px;
	padding-bottom:60px;
	background:#f2efe9;
}

.title-agir{
	background-image:url(../img/logo.png);	
	background-position:left center;
	background-repeat:no-repeat;
	padding-left:95px;
	margin-top:0;
	font-size: 28px;
	min-height:100px;
	background-size: 90px;
}

.container-ape p{
	font-size:12px;
}

.socials i{
	color:#39d3c9;
}

.container-partners{
	padding-top:60px;
	padding-bottom:60px;
}

.partenaire{
    width: 100%;
	display:inline-block;
	border-radius:50%;
    padding-bottom: 100%; /* = width for a square aspect ratio */
	background:#f2efe9;
}

.overlay, .overlay-social{
	background:#ffce20;
	opacity:0.8;
	z-index:90;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.overlay-social{
	background:#39d3c9;
	opacity:1;	
}

.lightbox{
	position:relative;
}

.lightbox a{
	color:#39d3c9;
	font-weight:bold;
}

.lightbox .close{
	position:absolute;
	top:15px;
	right:15px;
	width:30px;
	height:30px;
	cursor:pointer;
	background:url(../img/close.png) no-repeat center center;
	background-size:30px 30px;	
}

.lightbox .pictogram{
	position:absolute;
	top:-40px;
	width:80px;
	height:80px;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	background-size:80px 80px;
	background-position:center center;
	background-repeat:no-repeat;
}

.lightbox h2{
	color:#a6a5a3;
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
	font-weight:400;
	text-transform:none;
	margin-bottom:40px;
}

.question-lightbox h2{
    font-family: 'bebas_neuebold';
	text-transform:uppercase;
	font-weight:bold;
	color:#fff;
	font-size:25px;
	text-align:center;
	margin-bottom:10px;
}

.question-lightbox .nddl-answer{
	margin:0 40px;
}

#lightbox-vote .pictogram{
	background-image:url(../img/vote.png);
}

#lightbox-success .pictogram{
	background-image:url(../img/send.png);
}

#lightbox-vote, #lightbox-success, #lightbox-social{
	display:none;
	position:absolute;
	max-width:100%;
	width:570px;
	top:100px;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	background:#fff;
	padding:60px;
	z-index:999;
}

#lightbox-success, .overlay{
	/*display:block;*/
	display:none;
}

#lightbox-social{
	top:10px;
	padding:20px;
	background:transparent;
}

#lightbox-social h2{
	color:#110e03;
	font-family: 'bebas_neuebold';
	margin-bottom:20px;
}

#lightbox-social .socials{
	list-style-type: none;
	padding:0;
	max-width:250px;
	margin:0 auto;
}

#lightbox-social .socials li{
	max-width:230px;
	background:#fff;
	border-radius:40px;
	margin-bottom:10px;
	padding:17px;
}

#lightbox-social .socials li a{
	color:#110e03;
}

#lightbox-social .socials li a i{
	color:#ffce20;
	border:solid 2px #ffce20;
	width:40px;
	font-size:20px;
	height:40px;
	line-height:40px;
	border-radius:50%;
	padding:10px;
	display:inline-block;
	position:relative;
	margin-top: -1px;
}

#lightbox-social .socials li a em{
	display:inline-block;
	vertical-align:top;
	padding-top:10px;
	font-style:normal;
}

#lightbox-social .socials li.facebook a em{
	padding-top:0px;
}

#lightbox-social .socials li a span{
	color:#39d3c9;
}

#lightbox-social .socials li a i.fa-facebook:before{
	position:absolute;
	left:12px;
	top:-1px;
}

#lightbox-social .socials li a i:before{
	position:absolute;
	top:-2px;
	left:9px;
}

#lightbox-vote input[type=text]{
	font-size:15px;
}

.ape-petition-form-submit {
    clear: both;
	margin-top: -15px;
	text-align: center;
}

#ape-petition-form-submit {
	background:#fecd20 url(../img/confirm-btn.png);
	background-repeat:no-repeat;
	background-position:20px center;
	background-size:20px 20px;
	border: none;
	padding:9px 40px 9px 40px;
	padding-left:55px;
	border-radius:30px;
    font-family: 'bebas_neuebold';
	text-transform:uppercase;
	font-weight:bold;
	color:#000;
	font-size:30px;
	text-decoration: underline;
}
#ape-petition-form-submit:hover,
#ape-petition-form-submit:focus,
#ape-petition-form-submit:active {
	text-decoration: none;
}

#lightbox-vote .input-lg{
	padding:7px 16px;
	height:36px;
}

#lightbox-success .heading{
	font-size:16px;
}

#jauge{
	padding:25px;
	background:#fff;
	width:100%;
	max-width:450px;
	margin:0 auto;
	margin-top:50px;
	position:relative;
	border-radius:30px;
	margin-bottom:10px;
	overflow:hidden;
}

#jauge-non{
	background:#39d3c9;
	height:100%;
	width: 0;
	top:0;
	left:0;
	position:absolute;
	-webkit-transition: width 2s;
	-moz-transition: width 2s;
	-ms-transition: width 2s;
	-o-transition: width 2s;
	transition: width 2s;
}

#jauge h3{
	position:absolute;
	display:block;
	color:#000;
	top:0;
	right:20px;
	margin:0;
	line-height:50px;
}

#jauge-non h3{
	left:20px;
	right:auto;
}

#jauge-non h3{
	left:30px;
}

.label-jauge{
	padding:8px 15px;
	background:#fff;
	color:#000;
	margin-top:-40px;
	position:absolute;
}

.label-jauge h5{
	margin:0;	
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
  position:absolute;
  bottom:-10px;
  left:50%;
  margin-left:-8px;
}

.label-jauge-non{
	left:15%;
}

.label-jauge-oui{
	right:15%;
}

.row-faq ul li{
	color:#39d3c9;
}

.row-faq ul li span{
	color:#fff;
}

.mandatory{
	opacity:0.5;
}

.social-mobile{
	display:none;
}

.navbar-brand img{
	max-width:180px;
}

@media screen and (max-width: 590px) {
	h1 span{
	background-size:69px 12px;
	}
	
	.navbar h4{
	display:none;
	}
	
	#lightbox-vote, #lightbox-success{
		padding:20px;
	}
	
	#lightbox-vote .nddl-answer{
		text-align:center;
	}
	
	#lightbox-vote .btn-group-vertical>.btn, #lightbox-vote .btn-group>.btn{
		float:none;
		margin-bottom:10px;
	}
	
	#ape-petition-form-submit {
		font-size:20px;
	}
	
	.callto{
		width:100%;
		height:auto;
		background:#000;
		margin-bottom:5px;
		padding-bottom:20px;
	}
	
	.callto .btn-group>.btn {
		float: none;
		display:block;
		width:210px;
		margin-bottom: 10px;
	}
	
	.jumbotron p.counter {
		background-size: 210px 50px;
	}
	
	#headlines{
		height:auto;
		padding-bottom:0;
	}
	
	.jumbotron p.counter{
		font-size:25px;
	}
	
	.jumbotron .container {
		padding-left:0;
		padding-right:0;
	}
	
	.jumbotron .accroche{
		font-size:14px !important;
		padding-left:20px;
		padding-right:20px;
	}
	
}

@media screen and (max-width: 980px) {
	.result-ok .callto{
        height:auto;
        background-image:none;
        max-width:100%;
		display: none;
	}

	.result-ok .entitle {
		margin-bottom: 30px;
	}

	#headlines{
		background:#ffce20;
	}

	.title-agir{
		background-position:top center;
		padding-left:0;
		padding-top:100px;
		min-height:100px;
		text-align:center;
	}

}

@media screen and (max-width: 568px) {
	.question-lightbox{
		background-repeat:no-repeat;
		background-position:top center;
		background-image:url(../img/lightbox-ok.png);	
		background-size:420px 350px;
		padding:20px;
		padding-bottom:40px;
	}

	.social-desktop{
		display:none;
	}

	.social-mobile{
		display:block;
	}

	.pull-right{
		background-image:none !important;
	}

	.social-mobile a{
		text-decoration:none !important;
		background:#000;
		font-family: 'bebas_neuebold';
		border-radius:20px;
		color:#ffce20;
		font-size:16px;
		padding:10px 20px;
		display:block;
		margin:10px 2px;
	}

	.social-mobile a i{
		color:#39d3c9;
		margin-right:4px;
	}

	.navbar-brand img{
		max-width:150px;
		margin:5px;
	}
	
	.result-ok .callto-content h2{
		color:#fff;
	}

	.callto-socials ul p{
		color:#fff;
	}

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

@media screen and (min-width: 568px) and (max-width: 768px) {
	.partenaire{
		padding-bottom:0;
		height:80px;
		width:80px;
	}

	.row-partners-logo{
		text-align:center;
	}

}

@media screen and (max-width: 768px) {
	.result-ok .entitle h1{
		background-size:80px 80px;
		padding-left:100px;
		width:320px;
	}
}

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

	.single .callto{
		width:800px !important;
		height:393px !important;
		background-size:800px 393px !important;
	}

	.single .jumbotron .h2,
	.single .jumbotron h2 {
	    font-size: 40px;
	    margin-top:30px;
	    margin-bottom:25px;
	}

	.jumbotron .nddl-answer .btn {
	    margin-left: 16px;
	    margin-right: 16px;
	    font-size: 30px;
	    padding-left: 45px;
	    padding-right: 45px;
	    border-radius: 40px !important;
	    font-family: 'bebas_neuebold';
	}

	.jumbotron p.closure {
	    font-size: 15.5px;
	    margin-top:25px;
	}

	#headlines{
		height:auto;
	}

}

@media screen and (max-width: 768px) {
	.fixed-header{
		display:none;
	}
}