.wrapper-960 {	position:absolute;
			 	width:960px;
				height:500px;
				top:100px;
				left:50%;
				margin-left:-480px;
				
					-webkit-animation:	open 0.5s linear forwards, squeeze 0.6s linear 5s forwards;
					-moz-animation:		open 0.5s linear forwards, squeeze 0.6s linear 5s forwards;
					-ms-animation:		open 0.5s linear forwards, squeeze 0.6s linear 5s forwards;
					animation:			open 0.5s linear forwards, squeeze 0.6s linear 5s forwards; }
				
		
.wrapper-960:after {	content:'';
						position:absolute;
						width:4px;
						height:100%;
						left:360px;
						background:#4D5E67;}
				

				
.droite-360 {	position:absolute;
			 	width:360px;
				height:100%;
				overflow:hidden;}
				
.gauche-600 {	position:absolute;
			 	width:600px;
				height:100%;
				left:360px;
				overflow:hidden;}
				
				
.logo-intro {	width:300px;
				height:200px;
				margin-top:125px;
				background:url(../images/logo-intro.png) center center no-repeat;
				
					-webkit-animation:	slideLeft 0.5s ease-in 0.5s backwards, moveUpLogo 0.6s linear 4.5s forwards;
					-moz-animation:		slideLeft 0.5s ease-in 0.5s backwards, moveUpLogo 0.6s linear 4.5s forwards;
					-ms-animation:		slideLeft 0.5s ease-in 0.5s backwards, moveUpLogo 0.6s linear 4.5s forwards;
					animation:			slideLeft 0.5s ease-in 0.5s backwards, moveUpLogo 0.6s linear 4.5s forwards;
				}
				
.line1,
.line2,
.line3,
.line4,
.line5 { 	display:block;
			margin-left:30px;
			line-height:54px;
			font-family: 'LatoWebLight';
			font-size:68px;
			padding-right:30px;
			}
			

.line1,
.line2,
.line3,
.line5,
.span-apostrophe{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}
.line4 {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

 
.sloganImpression,			
.span-impression,
.span-nant{	font-family: 'LatoWebBold';}

.span-exclamation { font-family: 'LatoWebBlack';
					font-size:130px;
					color:#F68E00;
					float:right;
					line-height:80px;}
					
.span-nant 	{	-webkit-animation:	invisible 0.5s linear 2s backwards;
				-moz-animation:		invisible 0.5s linear 2s backwards;
				-ms-animation:		invisible 0.5s linear 2s backwards;
				animation:			invisible 0.5s linear 2s backwards;
			}

.span-exclamation { -webkit-transform: rotate(10deg);
					-moz-transform: rotate(10deg);
					-o-transform: rotate(10deg);}

.sloganEt,
.span-et { color:#00789D;}

.sloganWeb,
.span-web { color:#00789D;
			font-family: 'LatoWebBold';}
			
			
.slogan {	position:absolute;
			top:315px;
			left:40px;
			font-family: 'LatoWebLight';
			text-align:right;
			font-size:48px;
			line-height:40px;
			
	-webkit-animation:	blurFadeIn 0.5s ease-in 8s backwards;
	-moz-animation:		blurFadeIn 0.5s ease-in 8s backwards;
	-ms-animation:		blurFadeIn 0.5s ease-in 8s backwards;
	animation:			blurFadeIn 0.5s ease-in 8s backwards;
	color: transparent;
	text-shadow: 0px 0px 0px #4D5E67;			
			
				/*-webkit-animation:	fadeIn 0.5s linear 8s backwards;
				-moz-animation:		fadeIn 0.5s linear 8s backwards;
				-ms-animation:		fadeIn 0.5s linear 8s backwards;
				animation:			fadeIn 0.5s linear 8s backwards;*/		}
				
			
.line1 { margin-top:125px;
	-webkit-animation:	slideRight 0.5s ease-out 1.2s backwards, fadeOut 1s linear 4s backwards;
	-moz-animation:		slideRight 0.5s ease-out 1.2s backwards, fadeOut 1s linear 4s backwards;
	-ms-animation:		slideRight 0.5s ease-out 1.2s backwards, fadeOut 1s linear 4s backwards;
	animation:			slideRight 0.5s ease-out 1.2s backwards, fadeOut 1s linear 4s backwards;
}
.line2 {
	-webkit-animation:	slideRight 0.5s ease-out 1.6s backwards, fadeOut 1s linear 4s backwards;
	-moz-animation:		slideRight 0.5s ease-out 1.6s backwards, fadeOut 1s linear 4s backwards;
	-ms-animation:		slideRight 0.5s ease-out 1.6s backwards, fadeOut 1s linear 4s backwards;
	animation:			slideRight 0.5s ease-out 1.6s backwards, fadeOut 1s linear 4s backwards;
}
.line3 {
	-webkit-animation:	slideRight 0.5s ease-out 2s backwards, fadeOut 1s linear 4s backwards;
	-moz-animation:		slideRight 0.5s ease-out 2s backwards, fadeOut 1s linear 4s backwards;
	-ms-animation:		slideRight 0.5s ease-out 2s backwards, fadeOut 1s linear 4s backwards;
	animation:			slideRight 0.5s ease-out 2s backwards, fadeOut 1s linear 4s backwards;
}
.line4 {
	-webkit-animation:	slideRight 0.5s ease-out 2.4s backwards, moveUpImpression 0.6s linear 4.5s forwards;
	-moz-animation:		slideRight 0.5s ease-out 2.4s backwards, moveUpImpression 0.6s linear 4.5s forwards;
	-ms-animation:		slideRight 0.5s ease-out 2.4s backwards, moveUpImpression 0.6s linear 4.5s forwards;
	animation:			slideRight 0.5s ease-out 2.4s backwards, moveUpImpression 0.6s linear 4.5s forwards;
}
.line5 {
	-webkit-animation:	slideRight 0.5s ease-out 2.8s backwards, fadeOut 1s linear 4s backwards;
	-moz-animation:		slideRight 0.5s ease-out 2.8s backwards, fadeOut 1s linear 4s backwards;
	-ms-animation:		slideRight 0.5s ease-out 2.8s backwards, fadeOut 1s linear 4s backwards;
	animation:			slideRight 0.5s ease-out 2.8s backwards, fadeOut 1s linear 4s backwards;
}
.span-apostrophe {
	-webkit-animation:	fadeOut 0.5s linear 4s backwards;
	-moz-animation:		fadeOut 0.5s linear 4s backwards;
	-ms-animation:		fadeOut 0.5s linear 4s backwards;
	animation:			fadeOut 0.5s linear 4s backwards;
}
.span-nant {
	-webkit-animation:	invisible 0.5s linear 6s backwards, fadeIn 1s linear 6s backwards;
	-moz-animation:		invisible 0.5s linear 6s backwards, fadeIn 1s linear 6s backwards;
	-ms-animation:		invisible 0.5s linear 6s backwards, fadeIn 1s linear 6s backwards;
	animation:			invisible 0.5s linear 6s backwards, fadeIn 1s linear 6s backwards;
}

.span-exclamation {
		-webkit-animation:	invisible 0.5s linear 6s backwards, fadeIn 1s linear 6.4s backwards, rotation 0.5s linear 7.5s backwards;
		-moz-animation:		invisible 0.5s linear 6s backwards, fadeIn 1s linear 6.4s backwards, rotation 0.5s linear 7.5s backwards;
		-ms-animation:		invisible 0.5s linear 6s backwards, fadeIn 1s linear 6.4s backwards, rotation 0.5s linear 7.5s backwards;
		animation:			invisible 0.5s linear 6s backwards, fadeIn 1s linear 6.4s backwards, rotation 0.5s linear 7.5s backwards;
		}
		
nav {	position: absolute;
		width: 600px;
		height: 70px;
		line-height:58px;
		top:300px;
		right:-50px;
		z-index: 1000;
		
		-webkit-animation:	zoomIn 1s ease-in-out 8.5s backwards;
		-moz-animation:		zoomIn 1s ease-in-out 8.5s backwards;
		-ms-animation:		zoomIn 1s ease-in-out 8.5s backwards;
		animation:			zoomIn 1s ease-in-out 8.5s backwards; }


@media (min-width : 1024px) { 				
/***** WEBKIT
*****************************************/				
@-webkit-keyframes open{
	0%{		-webkit-transform: scale(1,0);	}
	100%{	-webkit-transform: scale(1,1);	}
}
@-webkit-keyframes slideLeft{
	0%{		-webkit-transform: translateX(120%);}
	100%{	-webkit-transform: translateX(0%);	}
}
@-webkit-keyframes slideRight{
	0%{		-webkit-transform: translateX(-120%);}
	100%{	-webkit-transform: translateX(0%);	}
}
@-webkit-keyframes fadeOut{
	0%{		opacity: 1;	}
	100%{	opacity: 0;	}
}
@-webkit-keyframes squeeze{
	0%{		height: 500px;	}
	100%{	height: 220px;	}
}
@-webkit-keyframes moveUpLogo{
	0%{		-webkit-transform: translateY(0px);	}
	100%{	-webkit-transform: translateY(-120px);	}
}
@-webkit-keyframes moveUpImpression{
	0%{		-webkit-transform: translateY(0px);	}
	100%{	-webkit-transform: translateY(-210px);	}
}
@-webkit-keyframes invisible{
	0%{		opacity: 0;	}
	100%{	opacity: 0;	}
}
@-webkit-keyframes fadeIn{
	0%{		opacity: 0;	}
	100%{	opacity: 1;	}
}
@-webkit-keyframes rotation{
	0% {	-webkit-transform: rotate(0deg);}
	100% {	-webkit-transform: rotate(10deg);}
}
@-webkit-keyframes zoomIn{
	0%{		-webkit-transform: scale(0);}
	100%{	-webkit-transform: scale(1);}
}
@-webkit-keyframes blurFadeIn{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 20px #4D5E67;
		-webkit-transform: scale(2);
	}
	100%{
		opacity: 1;
		text-shadow: 0px 0px 0px #4D5E67;
		-webkit-transform: scale(1);
	}
}
/***** MOZ
*****************************************/
@-moz-keyframes open{
	0%{		-moz-transform: scale(1,0);	}
	100%{	-moz-transform: scale(1,1); }
}
@-moz-keyframes slideLeft{
	0%{		-moz-transform: translateX(120%);}
	100%{	-moz-transform: translateX(0%);	}
}
@-moz-keyframes slideRight{
	0%{		-moz-transform: translateX(-120%);}
	100%{	-moz-transform: translateX(0%);	}
}
@-moz-keyframes fadeOut{
	0%{		opacity: 1;	}
	100%{	opacity: 0;	}
}
@-moz-keyframes squeeze{
	0%{		height: 500px;	}
	100%{	height: 220px;	}
}
@-moz-keyframes moveUpLogo{
	0%{		-moz-transform: translateY(0px);	}
	100%{	-moz-transform: translateY(-120px);	}
}
@-moz-keyframes moveUpImpression{
	0%{		-moz-transform: translateY(0px);	}
	100%{	-moz-transform: translateY(-210px);	}
}
@-moz-keyframes invisible{
	0%{		opacity: 0;	}
	100%{	opacity: 0;	}
}
@-moz-keyframes fadeIn{
	0%{		opacity: 0;	}
	100%{	opacity: 1;	}
}
@-moz-keyframes rotation{
	0% {	-moz-transform: rotate(0deg);}
	100% {	-moz-transform: rotate(10deg);}
}
@-moz-keyframes zoomIn{
	0%{		-moz-transform: scale(0);}
	100%{	-moz-transform: scale(1);}
}
@-moz-keyframes blurFadeIn{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 20px #4D5E67;
		-moz-transform: scale(2);
	}
	100%{
		opacity: 1;
		text-shadow: 0px 0px 0px #4D5E67;
		-moz-transform: scale(1);
	}
}

/***** 
*****************************************/
@keyframes open{
	0%{		transform: scale(1,0);	}
	100%{	transform: scale(1,1);	}
}
@keyframes slideLeft{
	0%{		transform: translateX(120%);}
	100%{	transform: translateX(0%);	}
}
@keyframes slideRight{
	0%{		transform: translateX(-120%);}
	100%{	transform: translateX(0%);	}
}
@keyframes fadeOut{
	0%{		opacity: 1;	}
	100%{	opacity: 0;	}
}
@keyframes squeeze{
	0%{		height: 500px;	}
	100%{	height: 220px;	}
}
@keyframes moveUpLogo{
	0%{		transform: translateY(0px);	}
	100%{	transform: translateY(-120px);	}
}
@keyframes moveUpImpression{
	0%{		transform: translateY(0px);	}
	100%{	transform: translateY(-210px);	}
}
@keyframes invisible{
	0%{		opacity: 0;	}
	100%{	opacity: 0;	}
}
@keyframes fadeIn{
	0%{		opacity: 0;	}
	100%{	opacity: 1;	}
}
@keyframes rotation{
	0% {	transform: rotate(0deg);}
	100% {	transform: rotate(10deg);}
}
@keyframes zoomIn{
	0%{		transform: scale(0);}
	100%{	transform: scale(1);}
}
@keyframes blurFadeIn{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 20px #4D5E67;
		transform: scale(2);
	}

	100%{
		opacity: 1;
		text-shadow: 0px 0px 0px #4D5E67;
		transform: scale(1);
	}
}

}

/*************************************************************************************************************************************************
**************************************************************************************************************************************************
**************************************************************************************************************************************************
				RESPONSIVE
				**********************************************************************************************************************************
				**********************************************************************************************************************************
				*********************************************************************************************************************************/

				@media (max-width : 1023px) {
					
.wrapper-960 {	position:relative;
			 	width:100%;
				height:auto;
				top:60px;
				left:auto;
				margin-left:0;
				
					-webkit-animation:	none !important;
					-moz-animation:		none !important;
					-ms-animation:		none !important;
					animation:			none !important; }					 

.wrapper-960:after { display:none; }
				
.droite-360 {	position:relative; margin:auto; height:300px; }
				
.gauche-600 {	display:none; }
				
				
.logo-intro {	margin-top:0; margin-left:auto; margin-right:auto;

				
					-webkit-animation: none !important;
					-moz-animation:		none !important;
					-ms-animation:		none !important;
					animation:			none !important;
				}
				


			
			
.slogan {	position:relative;
    		width: 280px;
			top:0;
			left:0;
			text-align:right;
			margin:auto;
	-webkit-animation:	none !important;
	-moz-animation:		none !important;
	-ms-animation:		none !important;
	animation:			none !important;
	color: inherit;
		}

		
nav {	position: relative;
		margin: auto;
		width: 310px;
		height: 250px;
   		padding-top: 10px;
		line-height:60px;
		top:50px;
		right:0;
		text-align:right;
		font-size: 36px;
    	background: #354148;
		
		-webkit-animation:	none !important;
		-moz-animation:		none !important;
		-ms-animation:		none !important;
		animation:			none !important; } 
		}