body{
	background-color: #152C47;
	background-image: url(../images/Extreme-triathlon-Marc-Ternier2.jpg);
	background-origin: border-box;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	font-family: 'Roboto', sans-serif;
	font-size: 100%;
}

footer{
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 1000;
}

footer p{
	font-size: 10px;
	font-weight: 100;
	color: #fff;
	opacity: 0.6;
	padding-right: 5px;
	padding-bottom: 2px;
}

/* Conteneur des boites */
.sp-container{
	width: 55%;
	max-width: 1000px;
	height: 900px;
	padding-top: 90px;
  margin-left: auto;
  margin-right: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

/* bloc central */
.sp-content{
	width: 100%;
	height: 480px;
	-webkit-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
	-moz-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
	-ms-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
	animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
}

/* trait */
.sp-content:after{
	content: '';
	width: 4px;
	background: #fff;
	height: 100%;
	position: absolute;
	left: calc( 50% - 2px);
}


.sp-wrap{
	width: 50%;
	height: 100%;
	float: left;
	background: #F7A514;
	overflow: hidden;
}

.sp-wrap span{
	display: block;
	color: #152C47;
	background: #F7A514;
	font-size: 3.4em;
	line-height: 2.4em;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}

.logo{
  width: 80%;
	max-width: 370px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 30px;
  padding-bottom: 10px;
}

.sp-wrap .sp-mid{
	display: block;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

.sp-container .sp-right h1 {
	color: #fff;
	font-size: 3.75em;
	line-height: 1em;
	padding-top: 7px;
	margin-right: 5%;
	text-transform: uppercase;
	text-align: right;
	text-shadow: 0px 0px 1px rgba(255,255,255,0.9);
}

/* animations bloc du milieu */
.sp-left span.sp-top {
	text-align: center;
	-webkit-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
	-moz-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
	-ms-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
	animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
}
.sp-left .sp-mid {
	-webkit-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
	-moz-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
	-ms-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
	animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
}

.sp-right span.sp-top {
	text-align: center;
	-webkit-animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards;
	-moz-animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards;
	-ms-animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards;
	animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards;
}
.sp-right .sp-mid {
	-webkit-animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards;
	-moz-animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards;
	-ms-animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards;
	animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards;
}
.sp-right span.sp-bottom {
	text-align: center;
	padding-top: 10px;
	-webkit-animation: slideRight 0.5s ease-in 3.2s backwards, fadeOut 1s linear 4.6s backwards;
	-moz-animation: slideRight 0.5s ease-in 3.2s backwards, fadeOut 1s linear 4.6s backwards;
	-ms-animation: slideRight 0.5s ease-in 3.2s backwards, fadeOut 1s linear 4.6s backwards;
	animation: slideRight 0.5s ease-in 3.2s backwards, fadeOut 1s linear 4.6s backwards;
}


/* bloc réseaux sociaux */
.sp-full{
	position: relative;
	-webkit-animation: fadeIn 1s linear 6.6s backwards;
	-moz-animation: fadeIn 1s linear 6.6s backwards;
	-ms-animation: fadeIn 1s linear 6.6s backwards;
	animation: fadeIn 1s linear 6.6s backwards;
	display: flex;
	flex-direction: column;
}

.sp-full .RS{
	display: flex;
	justify-content: center;
}

.sp-full .RS a{
	padding: 10px;
	display: inline-block;
	-webkit-animation: zoomIn 0.7s ease-in-out 7s backwards;
	-moz-animation: zoomIn 0.7s ease-in-out 7s backwards;
	-ms-animation: zoomIn 0.7s ease-in-out 7s backwards;
	animation: zoomIn 0.7s ease-in-out 7s backwards;
}

.sp-full .RS a img{
	width: 40%;
	max-width: 200px;
	margin: auto;
}

.sp-full h2 {
	font-family: 'gogoposterpunchregular';
	font-size: 3em;
	color: #fff;
	float: left;
	text-align: right;
	padding-bottom: 30px;
}

.sp-full a:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=70);
	opacity: 0.7;
}

/* ANIMATIONS */
@-webkit-keyframes open{
	0%{
		-webkit-transform: scale(1,0);
	}
	100%{
		-webkit-transform: scale(1,1);
	}
}
@-webkit-keyframes squeeze{
	0%{
		height: 600px;
	}
	100%{
		height: 260px;
	}
}
@-webkit-keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@-webkit-keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 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 moveUp{
	0%{
		-webkit-transform: translateY(0px);
	}
	100%{
		-webkit-transform: translateY(-105px);
	}

}
@-webkit-keyframes zoomIn{
	0%{
		-webkit-transform: scale(0);
	}
	100%{
		-webkit-transform: scale(1);
	}
}
/**/
@-moz-keyframes open{
	0%{
		-moz-transform: scale(1,0);
	}
	100%{
		-moz-transform: scale(1,1);
	}
}
@-moz-keyframes squeeze{
	0%{
		height: 600px;
	}
	100%{
		height: 260px;
	}
}
@-moz-keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@-moz-keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 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 moveUp{
	0%{
		-moz-transform: translateY(0px);
	}
	100%{
		-moz-transform: translateY(-105px);
	}

}
@-moz-keyframes zoomIn{
	0%{
		-moz-transform: scale(0);
	}
	100%{
		-moz-transform: scale(1);
	}
}
/**/
@keyframes open{
	0%{
		transform: scale(1,0);
	}
	100%{
		transform: scale(1,1);
	}
}
@keyframes squeeze{
	0%{
		height: 600px;
	}
	100%{
		height: 260px;
	}
}
@keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes slideLeft{
	0%{
		transform: translateX(120%);
	}
	100%{
		transform: translateX(0%);
	}
}
@keyframes slideRight{
	0%{
		transform: translateX(-120%);
	}
	100%{
		transform: translateX(0%);
	}
}
@keyframes moveUp{
	0%{
		transform: translateY(0px);
	}
	100%{
		transform: translateY(-105px);
	}

}
@keyframes zoomIn{
	0%{
		transform: scale(0);
	}
	100%{
		transform: scale(1);
	}
}


/* -------------RESPONSIVE------------------*/

@media all and (max-width: 1760px)
 {
	 .sp-container .sp-right h1 {
	 	font-size: 3.3em;
		margin-top: 10px;
	 }

	 .sp-right span.sp-bottom {
	 	padding-top: 15px;
		}
 }

 @media all and (max-width: 1580px)
  {
 	 .sp-container .sp-right h1 {
 	 	font-size: 3.1em;
 	 }

  }

@media all and (max-width: 1470px)
 {
	 .sp-container{
	 	width: 70%;
		}
		.sp-container .sp-right h1 {
  	 	font-size: 3.4em;
  	 }

   .sp-full h2{
     font-size: 2.7em;
		 letter-spacing: 0.05em;
   }
 }

 @media all and (max-width: 1366px) and (max-height: 766px)
  {
    .sp-container{
		 width: 67%;
    }

		.sp-container .sp-right h1 {
 		margin-top: 15px;
		margin-bottom: 10px;
 	 }

		.sp-wrap span{
			font-size: 3em;
			line-height: 2.4em;
		}
		.sp-full .RS a img{
			max-width: 180px;
		}

		footer {
 	 position: relative;
 	 padding-bottom: 5px;
 	 }
	  footer p{
 	  text-align: right;
 	  }
  }

	@media all and (max-width: 1280px)
   {
  	 .sp-container .sp-right h1 {
  	 	font-size: 3.2em;
  	 }
   }

	 @media all and (max-width: 1250px)
    {
   	 .sp-container .sp-right h1 {
   	 	font-size: 3em;
   	 }
    }

 @media all and (max-width: 1080px)
  {
		.sp-container{
		 height: 700px;
		 }

		.sp-container .sp-right h1 {
 		margin-top: 10px;
		font-size: 2.5em;
 	 }
	 .sp-wrap{
	 	height: 85%;
	 }
	 .sp-content:after{
	 	height: 85%;
	 }
		.sp-wrap span{
			font-size: 2.2em;
			line-height: 2.4em;
		}
		.sp-full .RS a img{
			max-width: 150px;
		}

    .sp-full h2{
      font-size: 1.8em;
 		  letter-spacing: 0.05em;
    }
		.logo{
		  width: 70%;
			padding-top: 40px;
		}

		@keyframes moveUp{
			0%{
				transform: translateY(0px);
			}
			100%{
				transform: translateY(-65px);
			}
		}
		@-webkit-keyframes moveUp{
			0%{
				-webkit-transform: translateY(0px);
			}
			100%{
				-webkit-transform: translateY(-65px);
			}
		}
		@-webkit-keyframes moveUp{
			0%{
				-webkit-transform: translateY(0px);
			}
			100%{
				-webkit-transform: translateY(-65px);
			}
		}
  }
	@media all and (max-width: 960px)
	 {
		 .sp-container .sp-right h1 {
  			font-size: 2.4em;
   	 }
  }
	@media all and (max-width: 820px)
   {
		 .sp-container{
			width: 85%;
		 	height: 900px;
			}
 		.sp-container .sp-right h1 {
  		margin-top: 20px;
 			margin-bottom: 10px;
 			font-size: 2.2em;
  	 }
 	 .sp-wrap{
 	 	height: 75%;
 	 }
 	 .sp-content:after{
 	 	height: 75%;
 	 }
 		.sp-wrap span{
 			font-size: 2em;
 			line-height: 2.4em;
 		}
     .sp-full h2{
       font-size: 1.5em;
  		 letter-spacing: 0.05em;
     }
 		.logo{
 			padding-top: 35px;
 		}

 		@keyframes moveUp{
 			0%{
 				transform: translateY(0px);
 			}
 			100%{
 				transform: translateY(-65px);
 			}
 		}
		@-webkit-keyframes moveUp{
			0%{
				-webkit-transform: translateY(0px);
			}
			100%{
				-webkit-transform: translateY(-65px);
			}
		}
		@-webkit-keyframes moveUp{
			0%{
				-webkit-transform: translateY(0px);
			}
			100%{
				-webkit-transform: translateY(-65px);
			}
		}
   }
	 @media all and (max-width: 760px)
	  {
			.sp-container{
 			 padding-top: 60px;
			 height: 400px;
			 justify-content: flex-start;
 			}
		}

	 @media all and (max-width: 736px)
	  {
			.sp-container{
			 padding-top: 50px;
			 height: 500px;
			 justify-content: flex-start;
			}

    	.sp-container .sp-right h1 {
	 		font-size: 1.9em;
	 	  }
		 .sp-wrap span{
  			font-size: 1.8em;
  			line-height: 2.4em;
  		}
			.sp-wrap{
	  	 	height: 80%;
	  	 }
	  	 .sp-content:after{
	  	 	height: 80%;
	  	 }
			 .logo{
	 		  width: 80%;
				}

			 @keyframes squeeze{
			 	0%{
			 		height: 600px;
			 	}
			 	100%{
			 		height: 210px;
			 	}
			 }
			 @-moz-keyframes squeeze{
			 	0%{
			 		height: 600px;
			 	}
			 	100%{
			 		height: 210px;
			 	}
			 }
			 @-webkit-keyframes squeeze{
			 	0%{
			 		height: 600px;
			 	}
			 	100%{
			 		height: 210px;
			 	}
			 }
	  }

		@media all and (max-width: 568px)
 	  {
			.sp-container .sp-right h1 {
			font-size: 1.8em;
		  margin-top: 0;
		}
		 .sp-wrap{
			 height: 70%;
			}
			.sp-content:after{
			 height: 70%;
			}

			.logo{
				padding-top: 20px;
			}
			
			footer p{
				font-size: 6px
			}

			@keyframes squeeze{
			 0%{
				 height: 500px;
			 }
			 100%{
				 height: 180px;
			 }
			}
 	  }

		@media all and (max-width: 414px) and (max-height: 736px)
		 {
			 .sp-container{
				width: 90%;
				height: 700px;
				justify-content: space-around;
			 }

			 .sp-container .sp-right h1 {
			 font-size: 1.35em;
			}

			 .sp-wrap span{
				padding-top: 90px;
				font-size: 1.2em;
   			line-height: 2em;
			 }

			 footer {
				position: fixed;
	 			bottom: 0;
	 			right: 0;
	 			z-index: 1000;
		 }
		 .sp-full h2{
       font-size: 1.2em;
  		 letter-spacing: 0.09em;
     }
		 .sp-full .RS a img{
		 	width: 80px;
			padding-left: 15px;
			padding-right: 15px;
		 }

		 @keyframes moveUp{
 			0%{
 				transform: translateY(0px);
 			}
 			100%{
 				transform: translateY(-115px);
 			}
 		}
 		@-webkit-keyframes moveUp{
 			0%{
 				-webkit-transform: translateY(0px);
 			}
 			100%{
 				-webkit-transform: translateY(-115px);
 			}
 		}
 		@-webkit-keyframes moveUp{
 			0%{
 				-webkit-transform: translateY(0px);
 			}
 			100%{
 				-webkit-transform: translateY(-115px);
 			}
 		}
	}
	@media all and (max-width: 384px) and (max-height: 736px)
	 {
		 .sp-container .sp-right h1 {
		 font-size: 1.25em;
		}
		.sp-full h2{
			font-size: 1.1em;
			letter-spacing: 0.09em;
		}
	}

	@media all and (max-width: 360px) and (max-height: 740px)
	 {
		 .sp-container .sp-right h1 {
		 font-size: 1.2em;
		}
		.sp-full{
			margin-top: -70px;
		}
		.sp-full h2{
			font-size: 1em;
			letter-spacing: 0.09em;
		}
}

	@media all and (max-width: 320px) and (max-height: 580px)
	 {
		 .sp-container{
			width: 90%;
			height: 550px;
			justify-content: space-around;
		 }

		 .sp-container .sp-right h1 {
		 font-size: 1.05em;
		 padding-top: 20px;
		}
		.sp-wrap span{
		 padding-top: 55px;
		 font-size: 1em;
		 line-height: 2em;
		}

		@keyframes moveUp{
		 0%{
			 transform: translateY(0px);
		 }
		 100%{
			 transform: translateY(-65px);
		 }
	 }
	 @-webkit-keyframes moveUp{
		 0%{
			 -webkit-transform: translateY(0px);
		 }
		 100%{
			 -webkit-transform: translateY(-65px);
		 }
	 }
	 @-webkit-keyframes moveUp{
		 0%{
			 -webkit-transform: translateY(0px);
		 }
		 100%{
			 -webkit-transform: translateY(-65px);
		 }
	 }
	}