/* RESET */ 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;

}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

sub, sup {
  /* Specified in % so that the sup/sup is the right size relative to the surrounding text */
  font-size: 75%;

  /* Zero out the line-height so that it doesn't interfere with the positioning that follows */
  line-height: 0;

  /* Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text */
  position: relative;

  /* Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule */
  vertical-align: baseline;
}

sup { 
  /* Move the superscripted text up */
  top: -0.5em;
}

sub {
  /* Move the subscripted text down, but only half as far down as the superscript moved up */
  bottom: -0.25em;
}

#homeImageContainer{
	width: 100%;
	height: auto;
	position: relative;
}

#image{
	width: 100%;
	height: auto;
	bottom: 0;
	position: relative;
}

#mainLogo{
	position: absolute;
	left:50%;
	transform:translate(-50%,0);	
	top:20px;
	margin-top: -50px;
	opacity: 0;
}

#mainLogo.transition{
	transition:opacity 1.2s ease-in-out, margin-top 1.2s ease-in-out;
}

#mainLogo.show{
	margin-top: 0px;
	opacity: 1;
}

#wddlogo{
	position: absolute;
	left:50%;
	transform:translate(-50%,0);	
	top:220px;	
	opacity: 0;
}

#wddlogo.transition{
	transition:top 1.2s ease-in-out, opacity 1.2s ease-in-out;
}

#wddlogo.show{
	top:260px;		
	opacity: 1;
}

#wddTxt{
	font-family: "Raleway";
	font-size: 16px;
	color:white;
	position: absolute;
	left:50%;
	transform:translate(-50%,0);	
	top:227px;	
	margin-left: -91px;
	opacity: 0;
}

#wddTxt.transition{
	transition:top 1.2s ease-in-out, opacity 1.2s ease-in-out;
}

#wddTxt.show{
	top:267px;		
	opacity: 1;
}

#headerTxt{
	font-family: "Raleway";
	font-size: 30px;
	color:white;
	position: absolute;
	left:50%;
	transform:translate(-50%,0);	
	text-align: center;
	top:270px;
	opacity: 0;
	text-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
}

#headerTxt.transition{
	transition:top 1.2s ease-in-out, opacity 1.2s ease-in-out;
}

#headerTxt.show{
	top:310px;		
	opacity: 1;
}

#arrow{
	position: absolute;
	left:50%;
	transform:translate(-50%,-5px);
	opacity: 0;
	
}

#arrow.transition{
	transition:all 1.2s ease-in-out;	
}

#arrow.show{
	transform:translate(-50%,40px);	
	opacity: 1;
}

#arrow.animated{
	animation: jump 2s infinite;
    animation-timing-function: linear;
}

#introTxtContainer{
	width: 100%;
	max-width: 800px;
	position: relative;
	left:50%;
	transform:translate(-50%,0)!important;
	height: auto;
	margin-top: 100px;
	margin-bottom: 100px;
}

.introTxt{
	font-family: "Raleway";
	font-size: 20px;
	color:#283683;
	text-align: center;
	margin-bottom: 45px;
	line-height:28px;
}

#presentationTxtContainer{
	margin-bottom: 40px;
}


#projectName{
	font-family: "Raleway";
	font-size: 34px;
	text-align: center;
	color:#FF573D;
	margin-bottom: 10px;
}

#projectDesc{
	font-family: "Raleway";
	font-size: 34px;
	color:#283683;
	text-align: center;
	margin-bottom: 20px;
}

#projectAchieve{
	font-family: "Raleway";
	font-size: 20px;
	color:#283683;
	text-align: center;
}


#circleContainer{
	width: 690px;
	height: auto;
	margin:0 auto;
	margin-bottom: 50px;
}

#circleTxt{
	font-family: "Raleway";
	font-size: 30px;
	color:#283683;
	text-align: center;
	top:0px;
	position: absolute;
	display: block;
	left:50%;
	transform:translate(-50%,0)!important;
	top:105px;
}

.circle{
	width: 138px;
	height: 138px;
	background-color: red;
	border-radius: 50%;
	display: inline-block;
	margin-right: 40px;
	background-size: 100%;
	text-align: center;
}

.circle:after{
	content: "Du \A président";
	white-space: pre;
	position: relative;
	left:0;
	top:145px;
	text-align: center;
	width: 100%;
	font-family: "Raleway";
	font-weight: 700;
	font-size: 20px;
}

.circle:last-child{
	margin-right: 0;
}

.circle[data-circle="macron"]{
	background-image:url("assets/thumbs-presid.jpg");
}

.circle[data-circle="ministre"]{
	background-image:url("assets/thumbs-gouv.jpg");
}

.circle[data-circle="philippe"]{
	background-image:url("assets/thumbs-premin.jpg");
}

.circle[data-circle="depute"]{
	background-image:url("assets/thumbs-assnat.jpg");
}

.circle[data-circle="macron"]:after{
	content: "Du \A président";
	color:#283683;
}

.circle[data-circle="ministre"]:after{
	content: "Du \A gouvernement";
	color:#31B5A5;
}

.circle[data-circle="philippe"]:after{
	content: "Du Premier \A ministre";
	color:#3470AB;
}

.circle[data-circle="depute"]:after{
	content: "Des \A députés";
	color:#FF573D;
}

#linksContainer{
	width: 580px;
	margin: 0 auto;
	position: relative;
	height: 240px;
}

#linksHider{
	width: 580px;
	margin: 0 auto;
	height: 230px;
	top:0;
	position: absolute;
	background-color: white;
	transition: height 2s ease-in-out;
}

#linksHider.show{
	height: 0;
}

#itemsContainer{
	width: 580px;
	margin: 0 auto;
	height: auto;
	margin-bottom: 250px;
}

.itemwrapper{
	display: inline-block;
	width: 80px;
	height: auto;
	margin-left: 105px;
	margin-right: 105px;
	text-align: center;
	position: relative;
	text-align: center;
}

.item{
	width: 50px;
	top:0px;
	position: absolute;
	left:50%;
	transform:translate(-50%,0)!important;
}

.itemwrapper:last-child{
	margin-right: 0;
}

.itemwrapper:before{
	content: "leurs \A agendas";
	white-space: pre;
	position: absolute;
	left:0px;
	top:-20px;
	text-align: center;
	font-family: "Raleway";
	font-weight: 700;
	color:#283683;
	font-size: 20px;	
	width: 100%;
}

.itemwrapper[data-item="agenda"]{
	margin-left: 26px;
}

.itemwrapper[data-item="agenda"]:before{
	content: "leurs \A agendas";
}

.itemwrapper[data-item="tweet"]:before{
	content: "leurs \A tweets";
}

.itemwrapper[data-item="activite"]:before{
	content: "leur activité \Aparlementaire";
	white-space: break-word;
}

.itemwrapper:after{
	position: absolute;
	left:50%;
	transform:translate(-50%,0)!important;
	top:70px;
	font-family: "Raleway";
	color:#283683;
	font-size: 17px;
}

.itemwrapper[data-item="agenda"]:after{
	content: "rencontres, \A déplacements";
}

.itemwrapper[data-item="tweet"]:after{
	content: "contenus \A et métadonnées";
}

.itemwrapper[data-item="activite"]:after{
	content: "votes et \A présence";
}

#itemTransition{
	font-family: "Raleway";
	color:#283683;
	font-size: 30px;
	text-align: center;
	width: 100%;
	display: block;
}

.itemNumberContainer{
	width: 580px;
    margin: 0 auto;
    height: auto;
    margin-bottom: 75px;
}

.itemNumberIcon{
	width: 75px;
}

.itemNumberIcon[data-icon="twitter"]{
	margin-left: 105px;
	margin-right: 105px;
}

.itemNumberIcon[data-icon="deputes"]{
	margin-left: 105px;
}

.itemNumber{
	font-family: "Raleway";
	color:#283683;
	font-weight: 700;
	font-size: 18px;
	text-align: center;
	display: inline-block;
	line-height: 18px;
	position: relative;
}	

.itemNumber[data-item="activite"]{
	margin-left: 105px;
}

.itemNumber[data-item="tweet"]{
	margin-left: 105px;
	margin-right: 105px;
}

#itemTransition2{
	font-family: "Raleway";
	color:#283683;
	font-size: 30px;
	text-align: center;
	width: 100%;
	display: block;
}

.opendatacontainer{
	margin-bottom: 200px;	
}

.dataicon{
	left:50%;
	position: absolute;
	transform:translate(-50%,40px);
}

.opendataicon{
	margin-left: -150px;
}

.scrapicon{
	margin-left: 150px;
}

.datatxt{
	left:50%;
	position: absolute;
	transform:translate(-50%,120px);
	font-family: "Raleway";
	color:#283683;
	font-weight: 700;
	font-size: 20px;
	line-height: 22px;
	text-align: center;
	display: block;
}

.opentxt{
	margin-left: -150px;
}

.scraptxt{
	margin-left: 150px;
}

#exampleTxtContainer{
	position: relative;
	top:100px;
	margin-bottom: 150px;
}

#exampleTitle{
	font-family: "Raleway";
	font-size: 34px;
	text-align: center;
	color:#283683;
	margin-bottom: 20px;
}

#exampleTxt{
	font-family: "Raleway";
	font-size: 20px;
	line-height: 18px;
	color:#283683;
	text-align: center;
}

.titleOrange{
	color:#FF573D;
}

#exampleContainer{
	width: 100%;
	height: 525px;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin-bottom: 70px;
    position: relative;
}

#popinWrapper{
	width: 100%;
	height: 0;
	margin-bottom: 300px;
	transition:height 0.8s ease-in-out;
	overflow: hidden;
	position: relative;
}

#popinWrapper.show{
	height: 700px;
}

#popinContainer{
	width: 80%;
	max-width: 1070px;
	height: 630px;
	background-color: white;
	-webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.25);
    margin: 0 auto;
    position: relative;
    top:35px;
    line-height: 30px;
}

#projectImg{
	position: relative;
	width: 100%;
	height:auto;
}

#graphIllu{
	width: 590px;
	height: auto;
	position: absolute;
	top:0;
	left:450px;
	top:50px;
}

#graphTxtContainer{
	width: 360px;
	height: 590px;
	position: relative;
	top:20px;
	left:50px;
}

#graphTitle{
	font-family: "Raleway";
	font-size: 28px;
	line-height: 40px;
	margin-top: 20px;
	position: relative;
	margin-bottom: 15px;
}

#graphQuestion{
	font-family: "Raleway";
	font-size: 20px;
	font-weight: 700;
	color:#283683;
}

#graphReponse{
	font-family: "Raleway";
	font-size: 18px;
	color:#283683;	
	margin-bottom: 15px;
}

#graphInter1{
	font-family: "Raleway";
	font-size: 28px;
	color:#283683;	
	font-weight: 300;
	margin-bottom: 15px;
}

#graphInter2{
	font-family: "Raleway";
	font-size: 28px;
	color:#283683;	
	font-weight: 300;	
	margin-bottom: 15px;
}

#graphSource{
	font-family: "Raleway";
	font-size: 20px;
	font-weight: 700;
	color:#283683;
}

#graphSourceTxt{
	font-family: "Raleway";
	font-size: 18px;
	color:#283683;	
}

#footer{
	position: fixed;
	bottom: 0;
	height: 0;
	width: 100%;
	background-color: white;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    transition:height 0.6s ease-in-out;
    box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
}

#footer.show{
	height: 100px;
}

#footer.end{
	height: 193px;	
}

#footer.credit{
	height: 280px;	
}

#footerTxt{
	font-family: "Raleway";
	color:#283683;
	font-size: 24px;
	left:50%;
	position: absolute;
	transform:translate(-50%,30px);
	margin-left: -210px;
	transition:opacity 0.8s ease-in-out;
	opacity: 1;
}

#footerTxt.hide{
	opacity: 0;
}

#inputMail{
	background-image:none;
    background-color:transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 330px;
    height: 40px;
    border: 1px solid #283683;
    font-family: "Raleway";
	color:grey;
	font-size: 18px;
	text-align: left;
	padding-left: 10px;
	position: absolute;
	left:50%;
	transform:translate(-50%,25px);
	margin-left: 210px;
}

#inputMail::-webkit-outer-spin-button,
#inputMail::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#inputMail:focus{
	border:2px solid #283683;
	outline:none;
}

#inputMail::-webkit-input-placeholder {
  color: #283683;
  opacity: 0.3;
}
#inputMail::-moz-placeholder {
  color: #283683;
}
#inputMail:-ms-input-placeholder {
  color: #283683;
}
#inputMailt:-moz-placeholder {
  color: #283683;
}

#mailBtn{
	width: 90px;
	height: 40px;
	background-color: #FF573D;
	color:white;
	font-family: "Raleway";
	font-weight: 700;
	font-size: 17px;
	position: absolute;
	left:50%;
	transform:translate(-50%,25px);
	margin-left: 419px;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	padding-left: 14px;
	padding-top: 12px;
	cursor: pointer;
}


#inputCase{
	opacity: 1;
	transition:opacity 0.8s ease-in-out;
}

#inputCase.hide{
	opacity: 0;
}

.responseCase{
	opacity: 0;
	transition:opacity 0.8s ease-in-out;
	pointer-events: none;
}

.responseCase.show{
	opacity: 1;
}

.responseCase span{
	font-family: "Raleway";
	font-weight: 400;
	font-size: 18px;
	color:#283683; /* BLUE */
	position: absolute;
	left:50%;
	transform:translate(-50%,35px);
}

#wedotxt{
	font-family: "Raleway";
	font-weight: 700;
	font-size: 17px;
	color:#283683;
	text-align: center;
	position: relative;
	top:100px;
	overflow: hidden;
}

#wedologo{
	position: absolute;
	left:50%;
	transform:translate(-50%,110px);
	cursor: pointer;
}

#credit{
	font-family: "Raleway";
	font-weight: 300;
	font-size: 15px;
	color:#283683;
	text-align: center;
	text-decoration: underline;
	position: relative;
	top:150px;
	cursor: pointer;
	display: block;
}

#credit:hover{
	color:#FF573D;
}

#creditTxt{
	font-family: "Raleway";
	font-weight: 300;
	font-size: 12px;
	color:#283683;
	text-align: center;
	position: relative;
	top:165px;
	cursor: pointer;
	display: block;	
}

#rotateLogo{
	position: relative;
	top:0;
	min-width: 20px;
}

#rotateLogo.animate{
	transition:all 0.5s ease-in-out;
}

#rotateLogo.top{
	/* top:20px; */
}

#rotateLogo.bottom{
	/* top:-20px; */
}


.calendar-green{
	
	width: 63px;
	height: 68px;
	position: absolute; 
}

/*

.calendar-green{
	background-image:url("assets/calendar-green.svg");
	width: 63px;
	height: 68px;
	position: absolute; 
}



.calendar-blue{
	background-image:url("assets/calendar-blue.svg");
	width: 63px;
	height: 68px;
	position: absolute;	
}

.tweet-orange{
	background-image:url("assets/tweet-orange.svg");
	width: 74px;
	height: 60px;
	position: absolute;	
}

.tweet-green{
	background-image:url("assets/tweet-green.svg");
	width: 74px;
	height: 60px;
	position: absolute;	
}


.tweet-green-orange{
	background-image:url("assets/tweet-green-orange.svg");
	width: 94px;
	height: 60px;
	position: absolute;	
}

.an-orange{
	background-image:url("assets/an-orange.svg");
	width: 76px;
	height: 60px;
	position: absolute;	
} */

////

.calendar-green{
	width: 63px;
	height: 68px;
	position: absolute; 
}

.calendar-blue{
	
	width: 63px;
	height: 68px;
	position: absolute;	
}

.tweet-orange{
	
	width: 74px;
	height: 60px;
	position: absolute;	
}

.tweet-green{
	
	width: 74px;
	height: 60px;
	position: absolute;	
}


.tweet-green-orange{
	
	width: 74px;
	height: 60px;
	position: absolute;	
}

.an-orange{
	
	width: 76px;
	height: 60px;
	position: absolute;	
}

.projectExample{
	left:50%;
	transform:translate(-50%,0);
	opacity: 0;
}

.projectExample.transition{
	opacity: 1;
	transition:all 1.5s ease-in-out;
}

.projectExample.transform{
	cursor: pointer;
}

#projectExampleTitle{
	font-family: "Raleway";
	font-weight: 400;
	font-size: 18px;
	color:#283683; /* BLUE */
	position: absolute;
	display: block;
	left:50%;
	transform:translate(-50%,175px);
	text-align: center;
	opacity: 0;
	transition:opacity 0.5s ease-in-out;
}

#projectExampleTitle.display{
	opacity: 1;
}

.projectExample:after{
	font-family: "Raleway";
	font-weight: 700;
	font-size: 20px;
	position: absolute;
	width: 200px;
	top:70px;
	text-align: center;
	line-height: 22px;
	left:50%;
	transform:translate(-50%,0);
	margin-top: 5px;
	content:"Défilé des ministres : plutôt Macron ou plutôt Philippe";
	color:#31B5A5; /* GREEN */
}

.projectExample[data-projet="defile"]{
	top:30px;
	margin-left: -320px;
}

.projectExample[data-projet="followAN"]{
	top:30px;
	margin-left: -80px;
}

.projectExample[data-projet="lechebotte"]{
	top:0px;
	margin-left: 150px;	
}

.projectExample[data-projet="semaine"]{
	top:160px;
	margin-left: 325px;
}

.projectExample[data-projet="chefetat"]{
	top:230px;
	margin-left: -430px;	
}

.projectExample[data-projet="mediaministre"]{
	top:230px;
	margin-left: -130px;	
}

.projectExample[data-projet="activiteTwtter"]{
	top:260px;
	margin-left: 100px;	
}

.projectExample[data-projet="frondeurs"]{
	top:350px;
	margin-left: 320px;	
}

.projectExample[data-projet="presentes"]{
	top:480px;
	margin-left: -420px;	
}

.projectExample[data-projet="malvotees"]{
	top:30px;
	margin-left: 190px;	
}

.projectExample[data-projet="enmarchitude"]{
	top:445px;
	margin-left: -80px;	
}

.projectExample[data-projet="mediadeputes"]{
	top:535px;
	margin-left: 160px;	
}

/* AFTER */

.projectExample[data-projet="defile"]:after{
	content:"Défilé des ministres : plutôt Macron ou plutôt Philippe ?";
	color:#31B5A5; /* GREEN */
}

.projectExample[data-projet="followAN"]:after{
	content:"Qui suit qui à l'Assemblée ?";
	color:#FF573D; /* ORANGE */
}

.projectExample[data-projet="lechebotte"]:after{
	content:"Les ministes lèche-bottes : qui mentionne le plus Macron ?";
	color:#31B5A5; /* GREEN */
}

.projectExample[data-projet="semaine"]:after{
	content:"La semaine-type de Macron";
	color:#283683; /* BLUE */
}

.projectExample[data-projet="chefetat"]:after{
	content:"La géopolitique de Macron depuis les bureaux de l'Elysée";
	color:#283683; /* BLUE */
}

.projectExample[data-projet="mediaministre"]:after{
	content:"Quels médias ont la cote chez nos ministres ?";
	color:#31B5A5; /* GREEN */	
}

.projectExample[data-projet="activiteTwtter"]:after{
	content:"Existe-t-il une solidarité féminine en politique ?";
	color:#31B5A5; /* GREEN */
}

.projectExample[data-projet="frondeurs"]:after{
	content:"Qui sont les nouveaux frondeurs des partis ?";
	color:#FF573D; /* ORANGE */
}

.projectExample[data-projet="presentes"]:after{
	content:"A partir de quel moment un député devient-il moins assidu ?";
	color:#FF573D; /* ORANGE */	
}

.projectExample[data-projet="malvotees"]:after{
	content:"Quelles lois sont les plus mal votées ?";
	color:#FF573D; /* ORANGE */
}

.projectExample[data-projet="enmarchitude"]:after{
	content:"Quel est le score d'\"En Marchitude\" de chaque groupe parlementaire ?";
	color:#FF573D; /* ORANGE */
}

.projectExample[data-projet="mediadeputes"]:after{
	content:"Comment s'informent les députés ?";
	color:#FF573D; /* ORANGE */
}

/* TRANSITION */


.projectExample.transform[data-projet="defile"]{
	top:420px;
	margin-left: -40px;
}

.projectExample.transform[data-projet="followAN"]{
	top:220px;
	margin-left: 60px;
}

.projectExample.transform[data-projet="lechebotte"]{
	top:220px;
	margin-left: 310px;
}

.projectExample.transform[data-projet="semaine"]{
	opacity: 0;
	pointer-events: none;
}

.projectExample.transform[data-projet="chefetat"]{
	opacity: 0;
	pointer-events: none;
}

.projectExample.transform[data-projet="mediaministre"]{
	top:220px;
	margin-left: -205px;
}

.projectExample.transform[data-projet="activiteTwtter"]{
	opacity: 0;
	pointer-events: none;
}

.projectExample.transform[data-projet="frondeurs"]{
	top:220px;
	margin-left: 280px;	
}

.projectExample.transform[data-projet="presentes"]{
	opacity: 0;
	pointer-events: none;
}

.projectExample.transform[data-projet="malvotees"]{
	opacity: 0;
	pointer-events: none;
}

.projectExample.transform[data-projet="enmarchitude"]{
	top:420px;
}

.projectExample.transform[data-projet="mediadeputes"]{
	top:420px;
	margin-left: 190px;	
}

@-webkit-keyframes jump {
  0% {-ms-transform: translate(-50%,40px);transform: translate(-50%,40px);}
  25% {-ms-transform: translate(-50%,50px);transform: translate(-50%,50px);}
  50% {-ms-transform: translate(-50%,40px);transform: translate(-50%,40px);}
  75% {-ms-transform: translate(-50%,50px);transform: translate(-50%,50px);}
}

@-moz-keyframes jump {
  0% {-ms-transform: translate(-50%,40px);transform: translate(-50%,40px);}
  25% {-ms-transform: translate(-50%,50px);transform: translate(-50%,50px);}
  50% {-ms-transform: translate(-50%,40px);transform: translate(-50%,40px);}
  75% {-ms-transform: translate(-50%,50px);transform: translate(-50%,50px);}
}

@-o-keyframes jump {
  0% {-ms-transform: translate(-50%,40px);transform: translate(-50%,40px);}
  25% {-ms-transform: translate(-50%,50px);transform: translate(-50%,50px);}
  50% {-ms-transform: translate(-50%,40px);transform: translate(-50%,40px);}
  75% {-ms-transform: translate(-50%,50px);transform: translate(-50%,50px);}
}

@keyframes jump {
  0% {-ms-transform: translate(-50%,40px);transform: translate(-50%,40px);}
  25% {-ms-transform: translate(-50%,50px);transform: translate(-50%,50px);}
  50% {-ms-transform: translate(-50%,40px);transform: translate(-50%,40px);}
  75% {-ms-transform: translate(-50%,50px);transform: translate(-50%,50px);}
}

.arrowWrapper{
	position: absolute;
	top:50%;
	cursor: pointer;
}

#prevWrap{
	left:5%;
	transform: rotate(180deg);
}

#nextWrap{
	right:5%;
}

#wddlogomobile{
	display: none;
}

.itemNumberMobileContainer{
	display:none;
}

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

	body {
		overflow-x: hidden;
	}

	#mainLogo{
		width: 70%;
		max-width: 450px;
	}

	#wddTxt{
		color:black;
		position: relative !important;
		top:0px !important;
		left: 47% !important;		
		text-align: center;
		width:100% !important;
		margin: auto !important;
	}

	#wddTxt.show{
	}

	#wddlogomobile{
		display: block;
		left:50%;
		transform:translate(-50%,0);	
		top:0px;	
		position:relative;
	}

	#wddlogo{
		display: none;
	}

	#headerTxt{
		color:black;
		text-shadow: none;
		font-size:20px;
		position: relative;
		top:0;
	}

	#headerTxt.show{
		top:10px!important;
		display: block;
	}

	.introTxt{
		padding-left: 20%;
		padding-right: 20%;
	}

	#linksContainer svg{
		display: none;
	}

	#circleContainer{
		width: 100%;
	}

	.circle{
		display: block;
		left:50%!important;
		margin-right: 0;
		margin-bottom: 60px;
		position: relative;
		transform: translate(-50%,0);
	}

	#linksHider{
		display:none;
	}

	#linksContainer{
		width: 100%;
		height: auto;
		height: 125px;
	}

	#circleTxt{
		position: relative;
		top:0;
		font-size: 20px;
		top: 50px;
		text-align: center;
	}

	#itemsContainer{
		width: 100%;
		position: relative;
		top:0;
		margin-bottom: 0px;
	}

	.itemwrapper{
		width: 100%;
		display: block;
		height: 180px;
		margin-right: 0;
		margin-left: 0!important
	}

	.itemNumberContainer{
		display: none;
	}

	.itemNumberMobileContainer{
		display: block;
	}

	#itemTransition{
		margin-bottom: 50px;
	}

	.itemNumberIcon{
		position: relative;
		margin-left: 0!important;
		display: block;
		left:50%;
		width: 50px;
		transform: translate(-50%,0);
	}

	.itemNumber{
		display: block;
		margin-left: 0!important;
		margin-right: 0!important;
		top:10px!important;
		margin-bottom: 30px;
	}

	#itemTransition2{
		top:50px;
		position: relative;
		margin-bottom: 40px;
	}

	.opendataicon{
		margin-left: 0;
	}

	.opentxt{
		margin-left: 0;
	}

	.scrapicon{
		margin-left: 0;
		transform: translate(-50%,200px);
	}

	.scraptxt{
		margin-left: 0;
		transform: translate(-50%,320px);	
	}

	#exampleTxtContainer{
		top:250px;
	}

	#exampleContainer{
		height: 1250px;
	}

	#projectExampleTitle.display{
		display: none;
	}


	.projectExample[data-projet="followAN"]{
		top:150px;
		margin-left: 0px;
	}

	.projectExample[data-projet="mediaministre"]{
		top:300px;
		margin-left: 0px;	
	}

	.projectExample[data-projet="activiteTwtter"]{
		top:450px;
		margin-left: 0px;
	}

	.projectExample[data-projet="frondeurs"]{
		top:600px;
		margin-left: 0px;
	}

	.projectExample[data-projet="presentes"]{
		top:750px;
		margin-left: 0px;	
	}

	.projectExample[data-projet="malvotees"]{
		top:925px;
		margin-left: 0px;	
	}

	.projectExample[data-projet="enmarchitude"]{
		top:1075px;
		margin-left: 0px;
	}

	.projectExample[data-projet="mediadeputes"]{
		top:1250px;
		margin-left: 0px;
	}

	#footer.show{
		height: 195px;
	}

	#footer.credit{
		height: 280px!important;
	}

	#footerTxt{
		font-size: 20px;
		margin-left: 0;
		width: 100%;
    	text-align: center;
		transform: translate(-50%,10px);
	}

	#inputMail{
		margin-left: 0;
		width: 200px;
		transform: translate(-50%,50px);
	}

	#mailBtn{
		margin-left: 0;
		transform: translate(50px,50px);
	}
}