html {
	height: 100%;
}

body {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-family: Arial, 'Helvetica', sans-serif;
	font-size: 16px;
	background-color: #17172e;
}

#body {
	position: relative;
	height: 180%;
	margin: 0 auto;
	overflow-x: hidden;
}

#body.leave {
	height: 350%;
}

#body > .inner {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#media-check {
	position: absolute;
	visibility: hidden;
	z-index: -10000000;
	height: 0;
	width: 1920px;
}

#console-log {
	display: none;
	position: fixed;
	z-index: 10000000;
	top: 0;
	left: 0;
	width: 500px;
	height: 100%;
	overflow: auto;
	background-color: rgba(255,255,255,0.5);
}

	#console-log .log {
		color: black;
	}

#frontground {
	display: none;
	position: fixed;
	z-index: 10000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: url(../elements/ciel-3.png);			
	background-repeat: no-repeat;
	background-color: #192f81;
	background-size: contain;
}

	#frontground .inner {
		display: table;
		width: 100%;
		height: 100%;
	}

		#frontground .inner #spinner {
			display: table-cell;
			vertical-align: middle;
			text-align: center;
			background-image: url(../elements/loader.gif);			
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 120px 120px;
		}

/*scroll indicator*/
.ScrollSceneIndicators {
	z-index: -1000 !important;

}

.ScrollTrigger {
	z-index: -1000 !important;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 20% 0;
	z-index: 1000;

	box-sizing: border-box;
		-webkit-box-sizing: border-box;
		 -khtml-box-sizing: border-box;
		   -moz-box-sizing: border-box;
}

.trigger {
	display: table;
	width: 100%;
	height: 10%;
	text-align: right;
	padding-right: 50px;
	color: red;
}

.trigger.semi {
	height: 5%;
}

.trigger .indicator {
	display: table-cell;
	vertical-align: bottom;
}

.buttons {
	z-index: 1001;
	position: absolute;
	width: 100%;
	height: 50%;
	text-align: center;
	top: 5%;
	left: 0;
	opacity: 1;
}

.buttons.leave {
	opacity: 0;
}

.page {
	padding: 20px; 
	color: white;
	font-size: 1.5em;
	line-height: 1.3em;
	max-width: 960px;
	margin: 0 auto;
			text-shadow: 0 0 4px rgba(0,0,0,0.5);
	-webkit-text-shadow: 0 0 4px rgba(0,0,0,0.5);
	 -khtml-text-shadow: 0 0 4px rgba(0,0,0,0.5);
	   -moz-text-shadow: 0 0 4px rgba(0,0,0,0.5);
	    -ms-text-shadow: 0 0 4px rgba(0,0,0,0.5);
	     -o-text-shadow: 0 0 4px rgba(0,0,0,0.5);
}

#frontmenu .menu-item {
	display: inline-block;
	vertical-align: middle;
	line-height: 150px;
	width: 150px;
	height: 150px;
	padding: 0 10px;
				box-sizing: border-box;
		-webkit-box-sizing: border-box;
		 -khtml-box-sizing: border-box;
		   -moz-box-sizing: border-box;
			border-radius: 50%;
	-webkit-border-radius: 50%;
	 -khtml-border-radius: 50%;
	   -moz-border-radius: 50%;
	    -ms-border-radius: 50%;
	     -o-border-radius: 50%;
	border: 3px solid #3169b3;
	color: white;
	font-size: 15px;
	text-transform: uppercase;
	background-color: #1b244d;
	margin: 20px;
	cursor: pointer;
			transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	 -khtml-transition: all 0.5s ease;
	   -moz-transition: all 0.5s ease;
	    -ms-transition: all 0.5s ease;
	     -o-transition: all 0.5s ease;
}

#frontmenu .menu-item:hover {
			box-shadow: 0 0 40px rgba(255,255,255,1);
	-webkit-box-shadow: 0 0 40px rgba(255,255,255,1);
	 -khtml-box-shadow: 0 0 40px rgba(255,255,255,1);
	   -moz-box-shadow: 0 0 40px rgba(255,255,255,1);
	    -ms-box-shadow: 0 0 40px rgba(255,255,255,1);
	     -o-box-shadow: 0 0 40px rgba(255,255,255,1);
}

#frontmenu .menu-item .inner {
	height: 100%;
	width: 100%;
	vertical-align: middle;
	display: inline-block;
	line-height: 16px;
}

#frontmenu .menu-item:hover {
	color: white;
			text-shadow: 0 0 8px rgba(255,255,255,1);
	-webkit-text-shadow: 0 0 8px rgba(255,255,255,1);
	 -khtml-text-shadow: 0 0 8px rgba(255,255,255,1);
	   -moz-text-shadow: 0 0 8px rgba(255,255,255,1);
	    -ms-text-shadow: 0 0 8px rgba(255,255,255,1);
	     -o-text-shadow: 0 0 8px rgba(255,255,255,1);
}

#frontmenu .menu-item div a {
    display: table;
    height: 100%;
    width: 100%;
    color: #FFFFFF; 
    text-decoration: none;
}

#frontmenu .menu-item div a > span {
    display: table-cell;
    vertical-align: middle;
}

#scroll-indicator-wrapper {
	position: fixed;
	z-index: 10000;
	top: 50px;
	left: 50%;
	width: 150px;
	height: 170px;
	margin-left: -75px;
}

	#scroll-indicator {
		display: table;
		height: 100%;
		font-size: 15px;
		text-transform: uppercase;
		color: white;
		background-image: url(../elements/scroll-indicator.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

		#scroll-indicator .inner {
			vertical-align: middle;
			display: table-cell;
			padding: 40px 20px 0;
			text-align: center;
			line-height: 16px;
		}

.layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.layer6 {
	z-index: 6;
}

.layer7 {
	z-index: 7;
}

.layer8 {
	z-index: 8;
}

.layer9 {
	z-index: 9;
}

.layer10 {
	z-index: 10;
}

.element {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
			box-sizing: border-box;
	-webkit-box-sizing: border-box;
	 -khtml-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	     -o-box-sizing: border-box;
}

.img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: auto;
}

.animated {
			transition-timing-function: linear;
	-webkit-transition-timing-function: linear;
	 -khtml-transition-timing-function: linear;
	   -moz-transition-timing-function: linear;
	    -ms-transition-timing-function: linear;
	     -o-transition-timing-function: linear;
	     	transition-duration: 1s;
	-webkit-transition-duration: 1s;
	 -khtml-transition-duration: 1s;
	   -moz-transition-duration: 1s;
	    -ms-transition-duration: 1s;
	     -o-transition-duration: 1s;
	     	transition-property: all;
	-webkit-transition-property: all;
	 -khtml-transition-property: all;
	   -moz-transition-property: all;
	    -ms-transition-property: all;
	     -o-transition-property: all;

}

.animated.fast {
			transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	 -khtml-transition-duration: 0.5s;
	   -moz-transition-duration: 0.5s;
	    -ms-transition-duration: 0.5s;
	     -o-transition-duration: 0.5s;
}

.animated.slow {
			transition-duration: 2s;
	-webkit-transition-duration: 2s;
	 -khtml-transition-duration: 2s;
	   -moz-transition-duration: 2s;
	    -ms-transition-duration: 2s;
	     -o-transition-duration: 2s;
}

.animated.xslow {
			transition-duration: 5s;
	-webkit-transition-duration: 5s;
	 -khtml-transition-duration: 5s;
	   -moz-transition-duration: 5s;
	    -ms-transition-duration: 5s;
	     -o-transition-duration: 5s;
}

.animated.xxslow {
			transition-duration: 10s;
	-webkit-transition-duration: 10s;
	 -khtml-transition-duration: 10s;
	   -moz-transition-duration: 10s;
	    -ms-transition-duration: 10s;
	     -o-transition-duration: 10s;
}

.bus {
	background-position: left bottom;
	background-image: url(../elements/bus-2.png);
			transform: translate(0,0);
	-webkit-transform: translate(0,0);
	 -khtml-transform: translate(0,0);
	   -moz-transform: translate(0,0);
	    -ms-transform: translate(0,0);
	     -o-transform: translate(0,0);
}

.bus-phare {
	left: 100%;
	width: 120%;
	background-position: left bottom;
	background-image: url(../elements/bus-phare-2.png);
}

#correction {
	z-index: 2;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,100,90,0.15);
}

.layer0 {
	z-index: 0;
}

	#logo-asso {
		width: 195px;
		height: 74px;
		background-image: url(../../association_landings/images/logo-asso.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
		margin: 10px auto;
		display: inline-block;
		vertical-align: middle;
	}

	#logo-noctambus {
		width: 140px;
		height: 24px;
		display: inline-block;
		vertical-align: middle;
	}

	#logo-noctambus {
		margin:  10px auto;
	}

	#logo-noctambus .logo-img {
		width: 70%;
		height: 100%;
		background-image: url(../../association_landings/images/logo-noctambus.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: top left;		
	}

	.table-row {
		display: table-row;
	}

	.menu {
		display: inline-block;
		vertical-align: middle;
	}

	#logo-asso a,
	#logo-noctambus a {
	    display: block;
	    color: white;
	    text-transform: uppercase;
	    width: 100%;
	    height: 100%;
	}

	#logo-noctambus a {
	    width: 150px;
	    text-align: left;
	    font-size: 0.8em;
	    line-height: 1.2em;
	}

	#ciel {
		min-width: 600px;
		background-position: left top;
		background-image: url(../elements/ciel-3.png);
	}

	#ciel:before {
		z-index: -1;
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #1C268B;
		background: -webkit-linear-gradient(#1C268B, #141E4E);
		background:    -moz-linear-gradient(#1C268B, #141E4E);
		background:     -ms-linear-gradient(#1C268B, #141E4E);
		background:      -o-linear-gradient(#1C268B, #141E4E);
		background:         linear-gradient(#1C268B, #141E4E);
	}

	#moon {
		height: 100px;
		width: 100px;
				border-radius: 50%;
		-webkit-border-radius: 50%;
		 -khtml-border-radius: 50%;
		   -moz-border-radius: 50%;
		    -ms-border-radius: 50%;
		     -o-border-radius: 50%;
		top: 330px;
		left: 15%;
		background-position: left top;
		background-image: url(../elements/moon.png);
				box-shadow: 0 0 40px rgba(255,255,255,1);
		-webkit-box-shadow: 0 0 40px rgba(255,255,255,1);
		 -khtml-box-shadow: 0 0 40px rgba(255,255,255,1);
		   -moz-box-shadow: 0 0 40px rgba(255,255,255,1);
		    -ms-box-shadow: 0 0 40px rgba(255,255,255,1);
		     -o-box-shadow: 0 0 40px rgba(255,255,255,1);
	}

	#moon.animated {
		top: auto;
			transform: translate(0,300px);
	-webkit-transform: translate(0,300px);
	 -khtml-transform: translate(0,300px);
	   -moz-transform: translate(0,300px);
	    -ms-transform: translate(0,300px);
	     -o-transform: translate(0,300px);
	}

	#moon.leave {
			transform: translate(0,50px);
	-webkit-transform: translate(0,50px);
	 -khtml-transform: translate(0,50px);
	   -moz-transform: translate(0,50px);
	    -ms-transform: translate(0,50px);
	     -o-transform: translate(0,50px);
	}

	#nuages {
		top: 16%;
		background-position: 0 top;
		background-repeat: repeat-x;
		background-image: url(../elements/nuages-2.png);	
	}

	#nuages.loop {
				animation: slide 240s linear infinite;
		-webkit-animation: slide 240s linear infinite;
		 -khtml-animation: slide 240s linear infinite;
		   -moz-animation: slide 240s linear infinite;
		    -ms-animation: slide 240s linear infinite;
		     -o-animation: slide 240s linear infinite;
	}

	@keyframes slide {
	  from{
	      background-position: 0px top;
	  }
	  to{
	      background-position: 1920px top;
	  }
	}

	@-webkit-keyframes slide {
	  from{
	      background-position: 0px top;
	  }
	  to{
	      background-position: 1920px top;
	  }
	}

	@-khtml slide {
	  from{
	      background-position: 0px top;
	  }
	  to{
	      background-position: 1920px top;
	  }
	}

	@-moz-keyframes slide {
	  from{
	      background-position: 0px top;
	  }
	  to{
	      background-position: 1920px top;
	  }
	}

	@-ms-keyframes slide {
	  from{
	      background-position: 0px top;
	  }
	  to{
	      background-position: 1920px top;
	  }
	}

	@-o-keyframes slide {
	  from{
	      background-position: 0px top;
	  }
	  to{
	      background-position: 1920px top;
	  }
	}

	#jura {
		top: auto;
		bottom: 0;
		height: 42%;
		background-size: 100% 100%;
		background-position: left top;
		background-image: url(../elements/jura-2.png);
	}

.layer1 {
	z-index: 1;
	height: 40%;
}

	#back-village {
		top: auto;
		bottom: 2%;
		background-position: left bottom;
		background-image: url(../elements/back-village.png);	
	}

	#back-city {
		top: auto;
		bottom: 0;
		background-position: left bottom;
		background-image: url(../elements/back-city-2.png);	
	}

		#onu {
			top: auto;
			bottom: 0;
			background-position: left bottom;
			background-image: url(../elements/onu.png);	
		}

		#virage {
			top: auto;
			bottom: 0;
			background-position: left bottom;
			background-image: none;	
		}

		#bus4 {
			top: auto;
			bottom: 12%;
			margin-bottom: -5%;
			left: auto;
			right: -40%;
			width: 4%;
					transform: scaleX(-1) rotate(-3deg);
			-webkit-transform: scaleX(-1) rotate(-3deg);
			 -khtml-transform: scaleX(-1) rotate(-3deg);
			   -moz-transform: scaleX(-1) rotate(-3deg);
			    -ms-transform: scaleX(-1) rotate(-3deg);
			     -o-transform: scaleX(-1) rotate(-3deg);
		}

		.directionBottom #bus4 {
					transform: scaleX(1) rotate(3deg);
			-webkit-transform: scaleX(1) rotate(3deg);
			 -khtml-transform: scaleX(1) rotate(3deg);
			   -moz-transform: scaleX(1) rotate(3deg);
			    -ms-transform: scaleX(1) rotate(3deg);
			     -o-transform: scaleX(1) rotate(3deg);
		}

		#bus4.leave {
			display: none;
		}

	#quai-immeubles {
		top: auto;
		bottom: 0;
		width: 150%;
		background-position: left bottom;
		background-image: url(../elements/quai-immeubles-3.png);	
	}

	#quai-reverberes {
		height: 30px;
		top: auto;
		bottom: 0;
		background-position: left bottom;
		background-repeat: repeat-x;
		background-image: url(../elements/reverbere.png);	
	}

	#quai-pont {
		top: auto;
		bottom: 0;
		width: 150%;
		background-position: left bottom;
		background-image: url(../elements/quai-pont-3-top.png);
	}

	#bus3 {
		left: -100%;
		width: 8%;
				transform: scaleX(1);
		-webkit-transform: scaleX(1);
		 -khtml-transform: scaleX(1);
		   -moz-transform: scaleX(1);
		    -ms-transform: scaleX(1);
		     -o-transform: scaleX(1);
	}

	.directionBottom #bus3 {
				transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		 -khtml-transform: scaleX(-1);
		   -moz-transform: scaleX(-1);
		    -ms-transform: scaleX(-1);
		     -o-transform: scaleX(-1);
	}

	#bus3.animated {
		left: auto;
				transform: translate(-100%,0);
		-webkit-transform: translate(-100%,0);
		 -khtml-transform: translate(-100%,0);
		   -moz-transform: translate(-100%,0);
		    -ms-transform: translate(-100%,0);
		     -o-transform: translate(-100%,0);
	}

	.directionBottom #bus3.animated {
				transform: translate(-100%,0);
		-webkit-transform: translate(-100%,0);
		 -khtml-transform: translate(-100%,0);
		   -moz-transform: translate(-100%,0);
		    -ms-transform: translate(-100%,0);
		     -o-transform: translate(-100%,0);
	}

	#bus3.leave {
				transform: translate(1300%,0);
		-webkit-transform: translate(1300%,0);
		 -khtml-transform: translate(1300%,0);
		   -moz-transform: translate(1300%,0);
		    -ms-transform: translate(1300%,0);
		     -o-transform: translate(1300%,0);
	}

	.directionBottom #bus3.leave {
				transform: translate(1300%,0);
		-webkit-transform: translate(1300%,0);
		 -khtml-transform: translate(1300%,0);
		   -moz-transform: translate(1300%,0);
		    -ms-transform: translate(1300%,0);
		     -o-transform: translate(1300%,0);
	}

.layer2 {
	z-index: 2;
	top: 40%;
	height: 60%;
}

	#quai-pont-bottom {
		width: 150%;
		background-position: left top;
		background-image: url(../elements/quai-pont-3-bottom.png);
	}

		#le-geneve {
			width: 100%;
			top: -40px;
			left: 0;
			bottom: auto;
			background-position: left top;
			background-image: url(../elements/le-geneve-2.png);
		}

		#mouette {
			width: 20%;
			height: 100%;
			left: auto;
			right: 0;
			margin-left: 150px;
			background-position: right 10%;
			background-image: url(../elements/mouette.png);
		}

			#mouette-moving {
				left: 50%;
				width: 50%;
				background-position: right 10%;
				background-image: url(../elements/mouette-moving.png);	
				opacity: 0;
						transform: scaleX(0);
				-webkit-transform: scaleX(0);
				 -khtml-transform: scaleX(0);
				   -moz-transform: scaleX(0);
				    -ms-transform: scaleX(0);
				     -o-transform: scaleX(0);
						transition: all 1500ms ease-in-out;
				-webkit-transition: all 1500ms ease-in-out;
				 -khtml-transition: all 1500ms ease-in-out;
				   -moz-transition: all 1500ms ease-in-out;
				    -ms-transition: all 1500ms ease-in-out;
				     -o-transition: all 1500ms ease-in-out;
						transform-origin: left center;
				-webkit-transform-origin: left center;
				 -khtml-transform-origin: left center;
				   -moz-transform-origin: left center;
				    -ms-transform-origin: left center;
				     -o-transform-origin: left center;			
			}

			#body.scrolling #mouette-moving,
			.touchable #mouette-moving {
				opacity: 1;
						transform: scaleX(1);
				-webkit-transform: scaleX(1);
				 -khtml-transform: scaleX(1);
				   -moz-transform: scaleX(1);
				    -ms-transform: scaleX(1);
				     -o-transform: scaleX(1);
			}

		.directionBottom #mouette {
				transform: scaleX(-1) translate(50%,0);
		-webkit-transform: scaleX(-1) translate(50%,0);
		 -khtml-transform: scaleX(-1) translate(50%,0);
		   -moz-transform: scaleX(-1) translate(50%,0);
		    -ms-transform: scaleX(-1) translate(50%,0);
		     -o-transform: scaleX(-1) translate(50%,0);
		}

		#mouette.animated {
			right: auto;
				transform: translate(600%,0);
		-webkit-transform: translate(600%,0);
		 -khtml-transform: translate(600%,0);
		   -moz-transform: translate(600%,0);
		    -ms-transform: translate(600%,0);
		     -o-transform: translate(600%,0);
		}

		.directionBottom #mouette.animated {
				transform: translate(600%,0);
		-webkit-transform: translate(600%,0);
		 -khtml-transform: translate(600%,0);
		   -moz-transform: translate(600%,0);
		    -ms-transform: translate(600%,0);
		     -o-transform: translate(600%,0);
		}

		#mouette.leave {
				transform: translate(-200%,0);
		-webkit-transform: translate(-200%,0);
		 -khtml-transform: translate(-200%,0);
		   -moz-transform: translate(-200%,0);
		    -ms-transform: translate(-200%,0);
		     -o-transform: translate(-200%,0);
			margin-left: -150px;
		}

		.directionBottom #mouette.leave {
				transform: translate(-200%,0);
		-webkit-transform: translate(-200%,0);
		 -khtml-transform: translate(-200%,0);
		   -moz-transform: translate(-200%,0);
		    -ms-transform: translate(-200%,0);
		     -o-transform: translate(-200%,0);
		}

	#lac {
		background-color: #162254;
		background: -webkit-linear-gradient(#2B5395, #141E4E);
		background:    -moz-linear-gradient(#2B5395, #141E4E);
		background:     -ms-linear-gradient(#2B5395, #141E4E);
		background:      -o-linear-gradient(#2B5395, #141E4E);
		background:         linear-gradient(#2B5395, #141E4E);
	}

.layer3 {
	z-index: 3;
	top: 30%;
	height: 60%;
}

	.jet-d-eau {
		top: auto;
		left: auto;
		right: 0;
		bottom: 40%;
		width: 20%;
		background-position: left bottom;
	}

	#jet-d-eau-0 {
		background-image: url(../elements/jet-d-eau.png);
	}

	#jet-d-eau-1 {
		background-image: url(../elements/jet-d-eau-1.png);
	}

	#jet-d-eau-2 {
		background-image: url(../elements/jet-d-eau-2.png);
	}

	#jet-d-eau-3 {
		background-image: url(../elements/jet-d-eau-3.png);
	}

	.touchable #jet-d-eau-1,
	.touchable #jet-d-eau-2,
	.touchable #jet-d-eau-3 {
		display: none;
	}

	#jet-d-eau-ponton {
		background-image: url(../elements/jet-d-eau-ponton.png);
	}

	#bordul {
		top: auto;
		bottom: 0;
		background-position: left bottom;
		background-image: url(../elements/bordul-2.png);
	}

	#bus2 {
		top: auto;
		bottom: 40%;
		left: auto;
		right: -100%;
		width: 20%;
				transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		 -khtml-transform: scaleX(-1);
		   -moz-transform: scaleX(-1);
		    -ms-transform: scaleX(-1);
		     -o-transform: scaleX(-1);
	}

	.directionBottom #bus2 {
				transform: scaleX(1);
		-webkit-transform: scaleX(1);
		 -khtml-transform: scaleX(1);
		   -moz-transform: scaleX(1);
		    -ms-transform: scaleX(1);
		     -o-transform: scaleX(1);
	}

	#bus2.animated {
		right: auto;
				transform: translate(700%,0) scaleX(-1);
		-webkit-transform: translate(700%,0) scaleX(-1);
		 -khtml-transform: translate(700%,0) scaleX(-1);
		   -moz-transform: translate(700%,0) scaleX(-1);
		    -ms-transform: translate(700%,0) scaleX(-1);
		     -o-transform: translate(700%,0) scaleX(-1);
	}

	.directionBottom #bus2.animated {
				transform: translate(700%,0) scaleX(-1);
		-webkit-transform: translate(700%,0) scaleX(-1);
		 -khtml-transform: translate(700%,0) scaleX(-1);
		   -moz-transform: translate(700%,0) scaleX(-1);
		    -ms-transform: translate(700%,0) scaleX(-1);
		     -o-transform: translate(700%,0) scaleX(-1);
	}

	#bus2.leave {
				transform: translate(-200%,0) scaleX(-1);
		-webkit-transform: translate(-200%,0) scaleX(-1);
		 -khtml-transform: translate(-200%,0) scaleX(-1);
		   -moz-transform: translate(-200%,0) scaleX(-1);
		    -ms-transform: translate(-200%,0) scaleX(-1);
		     -o-transform: translate(-200%,0) scaleX(-1);
	}

	.directionBottom #bus2.leave {
				transform: translate(-200%,0) scaleX(-1);
		-webkit-transform: translate(-200%,0) scaleX(-1);
		 -khtml-transform: translate(-200%,0) scaleX(-1);
		   -moz-transform: translate(-200%,0) scaleX(-1);
		    -ms-transform: translate(-200%,0) scaleX(-1);
		     -o-transform: translate(-200%,0) scaleX(-1);
	}

.layer4 {
	z-index: 4;
	top: 25%;
	height: 60%;
}

	#cathedrale {
		max-width: 60%;
		background-position: left bottom;
		background-image: url(../elements/cathedrale-2.png);
	}

.layer5 {
	z-index: 5;
}

	#vieille-ville {
		top: auto;
		bottom: 3%;
		width: 110%;
		background-repeat: repeat-x;
		background-position: left bottom;
		background-image: url(../elements/vieille-ville-2.png);
	}

	#bus1 {
		top: auto;
		bottom: 8%;
		left: 0%;
		width: 50%;
		margin-left: 0;
	}

	.directionBottom #bus1 {
			transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	 -khtml-transform: scaleX(-1);
	   -moz-transform: scaleX(-1);
	    -ms-transform: scaleX(-1);
	     -o-transform: scaleX(-1);
	}

	.directionBottom #bus1.u-turn {
			transform: scaleX(1);
	-webkit-transform: scaleX(1);
	 -khtml-transform: scaleX(1);
	   -moz-transform: scaleX(1);
	    -ms-transform: scaleX(1);
	     -o-transform: scaleX(1);
	}

	#bus1.animated {
			transition-timing-function: ease-in;
	-webkit-transition-timing-function: ease-in;
	 -khtml-transition-timing-function: ease-in;
	   -moz-transition-timing-function: ease-in;
	    -ms-transition-timing-function: ease-in;
	     -o-transition-timing-function: ease-in; 
				transform: translate(0,0) scaleX(1);
		-webkit-transform: translate(0,0) scaleX(1);
		 -khtml-transform: translate(0,0) scaleX(1);
		   -moz-transform: translate(0,0) scaleX(1);
		    -ms-transform: translate(0,0) scaleX(1);
		     -o-transform: translate(0,0) scaleX(1);
	}

	#bus1.leave {
				transform: translate(200%,0) scaleX(1);
		-webkit-transform: translate(200%,0) scaleX(1);
		 -khtml-transform: translate(200%,0) scaleX(1);
		   -moz-transform: translate(200%,0) scaleX(1);
		    -ms-transform: translate(200%,0) scaleX(1);
		     -o-transform: translate(200%,0) scaleX(1);
	}

	.directionBottom #bus1.leave {
				transform: translate(200%,0) scaleX(1);
		-webkit-transform: translate(200%,0) scaleX(1);
		 -khtml-transform: translate(200%,0) scaleX(1);
		   -moz-transform: translate(200%,0) scaleX(1);
		    -ms-transform: translate(200%,0) scaleX(1);
		     -o-transform: translate(200%,0) scaleX(1);
	}

	#premier-plan {
		width: 160%;
		left: 50%;
		margin-left: -80%;
		margin-top: 3%;
		background-position: left bottom;
		background-image: url(../elements/premier-plan-2.png);
	}

#footer {
	position: absolute;
	display: table;
	z-index: 100;
	bottom: -10%;
	width: 100%;
	height: 10%;
	background-color: #18162e;
}

	#footer-menu {
		display: table-cell;
		vertical-align: bottom;
		padding-bottom: 20px;
		padding-left: 0;
	}

		#footer-menu .menu-item {
			display: inline-block;
			margin-left: 20px;
			margin-bottom: 10px;
			cursor: pointer;
			text-transform: uppercase;
			font-size: 1.2em;
			font-weight: bold;
			line-height: 1.25em;
		}

		#footer-menu .menu-item a {
			color: #435e8d;
			text-decoration: none;
		}

		#footer-menu .menu-item a:hover {
			color: white;
		}	

		#footer-noctambus {
			display: table-row;
			height: 25px;
			margin:  10px auto;
		}

		#footer-noctambus a {
		    display: block;
		    color: white;
		    text-transform: uppercase;
		    height: 100%;
			margin: 0 20px;
		    width: 150px;
		    text-align: left;
		    font-size: 0.8em;
		    line-height: 1.2em;
		}

		#footer-noctambus .logo-img {
		    width: 70%;
		    height: 100%;
			background-image: url(../../association_landings/images/logo-noctambus.png);
			background-repeat: no-repeat;
			background-size: contain;
			background-position: top left;		
		}

@media (max-width: 1280px) {
	#media-check {
		width: 1280px;
	}

	#quai-reverberes {
		height: 20px;
	}

	/*IMAGES*/
	.bus              { background-image: url(../elements-1280/bus-2.png);}
	.bus-phare        { background-image: url(../elements-1280/bus-phare-2.png);}
	#ciel             { background-image: url(../elements-1280/ciel-3.png);}
	#nuages           { background-image: url(../elements-1280/nuages-2.png);}
	#jura             { background-image: url(../elements-1280/jura-2.png);}
	#back-village     { background-image: url(../elements-1280/back-village.png);}
	#back-city        { background-image: url(../elements-1280/back-city-2.png);}
	#onu              { background-image: url(../elements-1280/onu.png);}
	#quai-immeubles   { background-image: url(../elements-1280/quai-immeubles-3.png);}
	#quai-pont        { background-image: url(../elements-1280/quai-pont-3-top.png);}
	#quai-pont-bottom { background-image: url(../elements-1280/quai-pont-3-bottom.png);}
	#le-geneve        { background-image: url(../elements-1280/le-geneve-2.png);}
	#jet-d-eau-0      { background-image: url(../elements-1280/jet-d-eau.png);}
	#bordul           { background-image: url(../elements-1280/bordul-2.png);}
	#cathedrale       { background-image: url(../elements-1280/cathedrale-2.png);}
	#vieille-ville    { background-image: url(../elements-1280/vieille-ville-2.png);}
	#premier-plan     { background-image: url(../elements-1280/premier-plan-2.png);}
}

@media (max-width: 960px) {
	#media-check {
		width: 960px;
	}

	#le-geneve {
		top: -20px;
	}

	#frontmenu .menu-item {
		line-height: 120px;
		width: 120px;
		height: 120px;
		padding: 0 8px;
		font-size: 10px;
		margin: 12px;
	}

	#frontmenu .menu-item .inner {
		line-height: 10px;
	}

	#quai-reverberes {
		height: 15px;
	}

	/*IMAGES*/
	.bus              { background-image: url(../elements-960/bus-2.png);}
	.bus-phare        { background-image: url(../elements-960/bus-phare-2.png);}
	#ciel             { background-image: url(../elements-960/ciel-3.png);}
	#nuages           { background-image: url(../elements-960/nuages-2.png);}
	#jura             { background-image: url(../elements-960/jura-2.png);}
	#back-village     { background-image: url(../elements-960/back-village.png);}
	#back-city        { background-image: url(../elements-960/back-city-2.png);}
	#onu              { background-image: url(../elements-960/onu.png);}
	#quai-immeubles   { background-image: url(../elements-960/quai-immeubles-3.png);}
	#quai-pont        { background-image: url(../elements-960/quai-pont-3-top.png);}
	#quai-pont-bottom { background-image: url(../elements-960/quai-pont-3-bottom.png);}
	#le-geneve        { background-image: url(../elements-960/le-geneve-2.png);}
	#jet-d-eau-0      { background-image: url(../elements-960/jet-d-eau.png);}
	#bordul           { background-image: url(../elements-960/bordul-2.png);}
	#cathedrale       { background-image: url(../elements-960/cathedrale-2.png);}
	#vieille-ville    { background-image: url(../elements-960/vieille-ville-2.png);}
	#premier-plan     { background-image: url(../elements-960/premier-plan-2.png);}
}

@media (max-width: 767px) {	
	#media-check {
		width: 767px;
	}

	.buttons {
		top: 4%;
	}

	.page {
		font-size: 0.8em;
		line-height: 1.3em;
	}

	#frontmenu .menu-item {
		line-height: 80px;
		width: 80px;
		height: 80px;
		padding: 0 5px;
		font-size: 7px;
		margin: 10px;
	}

	#frontmenu .menu-item .inner {
		line-height: 8px;
	}


	#footer-menu .menu-item {
		display: block;
		font-size: 0.8em;
		line-height: 1.25em;
	}

	#quai-reverberes {
		height: 12px;
	}

	/*IMAGES*/
	.bus              { background-image: url(../elements-767/bus-2.png);}
	.bus-phare        { background-image: url(../elements-767/bus-phare-2.png);}
	#ciel             { background-image: url(../elements-767/ciel-3.png);}
	#nuages           { background-image: url(../elements-767/nuages-2.png);}
	#jura             { background-image: url(../elements-767/jura-2.png);}
	#back-village     { background-image: url(../elements-767/back-village.png);}
	#back-city        { background-image: url(../elements-767/back-city-2.png);}
	#onu              { background-image: url(../elements-767/onu.png);}
	#quai-immeubles   { background-image: url(../elements-767/quai-immeubles-3.png);}
	#quai-pont        { background-image: url(../elements-767/quai-pont-3-top.png);}
	#quai-pont-bottom { background-image: url(../elements-767/quai-pont-3-bottom.png);}
	#le-geneve        { background-image: url(../elements-767/le-geneve-2.png);}
	#jet-d-eau-0      { background-image: url(../elements-767/jet-d-eau.png);}
	#bordul           { background-image: url(../elements-767/bordul-2.png);}
	#cathedrale       { background-image: url(../elements-767/cathedrale-2.png);}
	#vieille-ville    { background-image: url(../elements-767/vieille-ville-2.png);}
	#premier-plan     { background-image: url(../elements-767/premier-plan-2.png);}
}


@media (max-width: 480px) {	
	html {
		max-height: 640px;
	}

	#media-check {
		width: 480px;
	}

	.buttons {
		top: 2%;
	}

	#frontmenu .menu-item {
        line-height: 75px;
        width: 75px;
        height: 75px;
        margin: 1px;
    }

	#le-geneve {
		top: 0px;
	}

	#quai-reverberes {
		height: 10px;
	}

	/*IMAGES*/
	.bus              { background-image: url(../elements-480/bus-2.png);}
	.bus-phare        { background-image: url(../elements-480/bus-phare-2.png);}
	#ciel             { background-image: url(../elements-480/ciel-3.png);}
	#nuages           { background-image: url(../elements-480/nuages-2.png);}
	#jura             { background-image: url(../elements-480/jura-2.png);}
	#back-village     { background-image: url(../elements-480/back-village.png);}
	#back-city        { background-image: url(../elements-480/back-city-2.png);}
	#onu              { background-image: url(../elements-480/onu.png);}
	#quai-immeubles   { background-image: url(../elements-480/quai-immeubles-3.png);}
	#quai-pont        { background-image: url(../elements-480/quai-pont-3-top.png);}
	#quai-pont-bottom { background-image: url(../elements-480/quai-pont-3-bottom.png);}
	#le-geneve        { background-image: url(../elements-480/le-geneve-2.png);}
	#jet-d-eau-0      { background-image: url(../elements-480/jet-d-eau.png);}
	#bordul           { background-image: url(../elements-480/bordul-2.png);}
	#cathedrale       { background-image: url(../elements-480/cathedrale-2.png);}
	#vieille-ville    { background-image: url(../elements-480/vieille-ville-2.png);}
	#premier-plan     { background-image: url(../elements-480/premier-plan-2.png);}
}

/*extra narrow*/
@media (min-aspect-ratio: 1/3 ) {
	#bus1 {
		bottom: 3%;
	}

	#bus2 {
		bottom: 10%;
	}

	#bus4 {
		bottom: 3.5%;
	}	

	.ScrollTrigger {
		height: 40%;
		top: 30%;
	}	
}

/*narrow*/
@media (min-aspect-ratio: 1/2 ) {
	#bus1 {
		bottom: 3.5%;
	}

	#bus2 {
		bottom: 12%;
	}

	#bus4 {
		bottom: 5%;
	}		

	.ScrollTrigger {
		height: 50%;
		top: 25%;
	}
}

/*portrait*/
@media (min-aspect-ratio: 2/3 ) {
	#bus1 {
		bottom: 4%;
	}

	#bus2 {
		bottom: 15%;
	}

	#bus4 {
		bottom: 6%;
	}	

	.ScrollTrigger {
		height: 60%;
		top: 20%;
	}
}

/*portrait-square*/
@media (min-aspect-ratio: 4/5 ) {
	#bus1 {
		bottom: 4.5%;
	}

	#bus2 {
		bottom: 18%;
	}

	#bus4 {
		bottom: 7%;
	}	

	.ScrollTrigger {
		height: 70%;
		top: 15%;
	}
}

/*square*/
@media (min-aspect-ratio: 1/1 ) {
	#bus1 {
		bottom: 5%;
	}

	#bus2 {
		bottom: 23%;
	}

	#bus4 {
		bottom: 9%;
	}		

	.ScrollTrigger {
		height: 80%;
		top: 10%;
	}
}

/*square-landscape*/
@media (min-aspect-ratio: 5/4 ) {
	#bus1 {
		bottom: 6%;
	}

	#bus2 {
		bottom: 28%;
	}

	#bus4 {
		bottom: 9.5%;
	}	

	.ScrollTrigger {
		height: 90%;
		top: 5%;
	}
}

/*landscape-square*/
@media (min-aspect-ratio: 4/3 ) {
	#bus1 {
		bottom: 6.5%;
	}

	#bus2 {
		bottom: 32%;
	}

	#bus4 {
		bottom: 10.7%;
	}	

	.ScrollTrigger {
		height: 95%;
		top: 2.5%;
	}
}

/*landscape-squa*/
@media (min-aspect-ratio: 7/5 ) {
	#bus4 {
		bottom: 11%;
	}
}

/*landscape*/
@media (min-aspect-ratio: 3/2 ) {
	#premier-plan {
		top: 3%;
	}

	#bus1 {
		bottom: 7%;
	}

	#bus2 {
		bottom: 35%;
	}

	#bus4 {
		bottom: 11.7%;
	}	

	.ScrollTrigger {
		height: 100%;
		top: 0;
	}
}

/*landscape-panorama*/
@media (min-aspect-ratio: 8/5 ) {
	#bus4 {
		bottom: 12.7%;
	}
}

/*panorama*/
@media (min-aspect-ratio: 9/5 ) {
	#bus1 {
		bottom: 7.5%;
	}

	#bus2 {
		bottom: 42%;
	}

	#bus4 {
		bottom: 14.4%;
	}	
}

/*extra panorama 2*/
@media (min-aspect-ratio: 2/1 ) {
	#bus1 {
		bottom: 8.5%;
	}

	#bus2 {
		bottom: 48%;
	}

	#bus4 {
		bottom: 16%;
	}	
}
/*extra extra panorama 2.25*/
@media (min-aspect-ratio: 9/4 ) {
	#bus4 {
		bottom: 17.5%;
	}

	#bus2 {
		bottom: 52%;
	}
}

/*extra extra panorama 2.5*/
@media (min-aspect-ratio: 5/2 ) {
	#bus4 {
		bottom: 19.5%;
	}

	#bus2 {
		bottom: 58%;
	}
}

/*extra extra panorama 2.75*/
@media (min-aspect-ratio: 11/4 ) {
	#bus4 {
		bottom: 21.5%;
	}

	#bus2 {
		bottom: 62%;
	}
}

/*extra extra extra panorama 3*/
@media (min-aspect-ratio: 3/1 ) {
	#bus1 {
		bottom: 11%;
	}

	#bus2 {
		bottom: 64%;
	}

	#bus4 {
		bottom: 23.5%;
	}	
}