/* General */

body {
		top:0px; height: 1050px; overflow:auto;
		margin: auto;
		padding: 0;
		color:#fff;
		font: normal 90% "Trebuchet MS",Verdana,"Lucida Grande",Tahoma,Arial,Helvetica,Sans-Serif;
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
		background:url(../images/black-1072366_1920.jpg) repeat fixed;
		-webkit-background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		-ms-background-size: 100% 100%;
		-o-background-size: 100% 100%;
 		background-size: 100% 100%;
	}

	@keyframes Mapetiteanimation 
		{
			from { transform : perspective(400px) rotateY(0deg);  }
			to   { transform : perspective(400px) rotateY(360deg);}
		}

#titre { margin-left: 6%; margin-bottom:0px; }

h2 	{
	margin-top:0;
	margin-bottom: 5px;
	text-align: center;
	font-size: 2em;
	font-weight:bold;
	color: #eca603;
	}

h3 	{
	margin-top:0;
	margin-bottom: 5px;
	font-size: 1.25em;
	font-weight:bold;
	color: #fff;
	}

h4 	{
	font-size: 1.1em;
	font-weight:bold;
	color: #eca603;
	margin-top: 25px;
	margin-bottom: 2px;
	}

a 	{
	font-weight:bold;
	color:#fff;
	}

.g-recaptcha 
	{
		display: block;
		position : relative;
		margin-bottom: 0;
	}

/* Wrapper */

#wrap {
	position: relative;
	top:0px; height: 1000px; overflow:hidden; 
	-webkit-transition: top 1.5s cubic-bezier(.49,.22,.52,1);
	-moz-transition: top 1.5s cubic-bezier(.49,.22,.52,1.35);
	-ms-transition: top 1.5s cubic-bezier(.49,.22,.52,1.35);
	-o-transition: top 1.5s cubic-bezier(.49,.22,.52,1.35);
	transition: top 1.5s cubic-bezier(.49,.22,.52,1.35);
	}

/* Nav */
#nav {
	position: fixed;
	top: 0; left:0; right: 0;
	padding: 1em 0;
	margin:0;
	background: #000;
	text-align:center;
	font-size: 1em;
	z-index:10;
	}
#nav li {
	display: inline;
	margin:0;
	}
#nav a {
	display: inline-block;
	margin: 0 3em;
	color: #eee;
	text-transform: uppercase;
	text-decoration: none;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	}

#nav a:hover { 
	color : #8F8A89; 
	-webkit-transform: scale(1.2) rotate(2deg);
	-moz-transform: scale(1.2) rotate(2deg);
	-ms-transform: scale(1.2) rotate(2deg);
	-o-transform: scale(1.2) rotate(2deg);
	transform: scale(1.2) rotate(2deg);
	 }

/* slides */

#slide1, #slide2, #slide3 {
	height: 1040px;
	padding-top:35px;
	/* background:url(../images/black-1072366_1920.jpg) center 0 no-repeat fixed; z-index: 2; */
}


/* Slides contents */

.slide_inside {
	width: 100%;
	margin: auto;
	text-align: center;
	padding: 0px;
}

.milieu {
	width: 80%;
	margin: auto;
	text-align: center;
	padding: 0px;
}

.Adroite {
	position : absolute; right : 150px;
	float : right; 
	max-width: 500px;
	min-width: 320px;
	width: 40%;
	margin: 30px 2px 0px 0px;
	padding: 0px;
}

.laurier1 {
 	display: flex;
 	width: 600px;
	margin: auto;
	text-align: left;
	align-items: center;
	padding: 0px;
	max-width: 100em;
	font-size: 1.7em;
	font-weight:bold;
	color: #eca603;
	}

.Message1 {
	display: block;
	position : relative;
	top : 20px;
	text-align: center;
	width: 40%;
	left : 30%;
	height: 130px;
	background-color: rgba(47,39,39,0.4);
	border : 1px gray solid;
	font-size: 18px;
	line-height: 60%;
} 
.Message1 p:hover {
	-webkit-transform: scale(1.13);
	-moz-transform: scale(1.13);
	-ms-transform: scale(1.13);
	-o-transform: scale(1.13);
	transform: scale(1.13);
}

.MessageCoté1 {
	display: block;
	position : absolute;
	top: -80px; left: -80px; width : 1em;
	border : 2px solid #F2C958;
	padding : 0px 15px 0px 15px;
	text-align: center;
	background-color: rgba(253,158,15,0.3);
	font-size: 13px;
	font-weight: bold;
	line-height: 115%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.MessageCoté1:hover { background-color: rgba(253,158,15,0.6); }

.Message2 {
	position : block;
	margin: auto;
	margin-top: 30px;
	width: 550px;  
	text-align: right;
	font-size: 15px;
	line-height: 140%;
	color : #F7D358;	
}


.Texte1 {
	display: block;
	position: relative;
	top : 125px; margin: auto; padding : 4px;
	width : 770px; height : 280px;
	/* background-color:rgba(1,1,1,0.1); */
	text-align: justify;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.35em;
	-webkit-column-count:2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap : 2em;
	-moz-column-gap : 2em;
	column-gap : 2em;
    -webkit-word-break: break-all;
    -ms-word-break: break-all;
  	word-break: break-all;
  	-webkit-word-break: break-word;
  	-ms-word-break: break-word;
  	word-break: break-word;  
 }
 .Texte1 p:hover 
   {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
   }

#presentation {
	width: 310px;
	text-align: center;
	margin : auto;
	font-size: 0.8em;
	color : #F5D0A9;
}

.Image { float: left; padding-right: 12px; opacity: 0.6;}
.Image:hover { opacity : 1;  }

#slide1 .slide_inside {
	width: 500px;
	text-align: left;
	}	

#slide2 .slide_inside {
	width:300px; 
	margin: auto;
	text-align: justify;
	left: 360px;
	}

#slide3 .slide_inside {
	margin-top: 00px;
	}

#AccrochNew {
/*	text-align: left; */
	color : #F7D358; 
	line-height: 1.45em;
	}

#Maison {
	width: 55px;
	height: 55px;
	margin: 10px 20px 0 5px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
  	transition: all 0.5s ease;
	}

#Maison:hover {
	width: 45px;
	height: 45px;
	border-radius: 50%;  
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg); 
	-ms-transform: rotate(360deg); 
	-o-transform: rotate(360deg); 
	transform: rotate(360deg);
	}

/* Troopers & clone */

#trooper, #clone {
	z-index: -10;
	position: relative;
	
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
	-o-transform: rotate(10deg);
	transform: rotate(10deg);
	-webkit-transition: all 2s cubic-bezier(.49,.22,.52,0);
	-moz-transition: all 2s cubic-bezier(.49,.22,.52,0);
	-ms-transition: all 2s cubic-bezier(.49,.22,.52,0);
	-o-transition: all 2s cubic-bezier(.49,.22,.52,0);
	transition: all 2s cubic-bezier(.49,.22,.52,0);
	}

#clone {
	left: -220px;
	top: 200px;
	}

#Block1	{
	display : block;
	width : 240px;
	margin : auto;
	text-align: center;
	border : 1px solid gray;
	background-color: rgba(47,39,39,0.4);
	transition: all 0.3s
	}
#Block1:hover 
		{
		color: black;	
		background-color: rgba(248,240,238,0.3);
		transform : translate(-7px,0px);
		}

#Block2	{
	display : flex;
	position: absolute;
	top : 1050px; left : 60%;
	width : 125px;
	padding-left: 20px;
	border : 1px solid gray;
	background-color: rgba(47,39,39,0.4);
	transition: all 0.4s;
	}
#Block2:hover 
		{
		color: black;	
		background-color: rgba(248,240,238,0.3);
		-webkit-transform: translate(-10px,0px);
		-moz-transform: translate(-10px,0px);
		-ms-transform: translate(-10px,0px);
		-o-transform: translate(-10px,0px);
		transform : translate(-10px,0px);
		}

#Identity	{
	display : flex; margin : auto;
	position: relative;
	top : 10px; 
	width : 220px;
	z-index: 100;               
	}



/* formulaire */

.formulaire {display : flex; flex-direction: column; justify-content: center; overflow: hidden; }

.text-form 	{ float:left; display:block;margin-top: 6px; margin-right: 8px; font-size:14px; width:100px;
				color:#F19017;background-color:rgba(1,1,1,0.25); padding-left: 7px; 
				Font-Weight: Bold; height:28px; text-shadow: 2px 2px black; }

#contact-form {  margin : auto; max-width: 530px;}
#contact-form  label 	{ overflow:hidden; }
#contact-form  input 	{ float:left;width:330px;font-size:13px;line-height:0.1em;padding:4px 10px; color : white;
						  margin:7px; font-family:Arial, Helvetica, sans-serif; background-color: rgba(237,223,220,0.3); border:0px; }
#contact-form textarea 	{ height:100px; overflow:auto; float:left; width:330px; font-size:13px; line-height:1.23em;color:#0f0f0f;
	padding:4px 10px;margin:8px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;background-color: rgba(237,223,220,0.3);border:0px;}

.buttons  { text-align:right; margin-top: 0; }
.button-2 {
	border:none;
	border-radius:4px;
	box-shadow:3px 3px 2px #aaa;
	background:#fff;
	font:bold 0.7em Arial;
	color:#555;
	margin-top: 0px;
	}
.button-2:hover { border-radius:6px; box-shadow : 0 0 0; }

.buttons a 	{margin-left:6px;padding:4px 10px 5px; text-decoration:none; margin-top: 0px;}

.button,.button-2:hover { background:black; color:white; }

		::-webkit-input-placeholder { color: silver; }
		::-moz-placeholder { color: silver; }
		::-moz-placeholder { color: silver; }
		::-ms-input-placeholder { color: silver; }
		:input-placeholder { color: silver; }

.error { 	clear:both; margin:2px; padding:2px; color:orange; 
			font-weight: normal; text-align: right; font-size: 0.9em; width: 300px; text-shadow: 0 0; }


/* Texte défilant */

.defileParent {
	display: block;
	margin: 3em auto;
	overflow: hidden;
	position: relative; min-height: 10.7%;
	table-layout: fixed;
	text-align: center;
	width: 530px;
}
.defileParent2 {
	display: block;
	margin: 3em auto;
	overflow: hidden;
	position: relative; min-height: 2%;
	table-layout: fixed;
	text-align: center;
	width: 530px;
}
.defile {
	display:block;
	position : absolute;bottom: 0;
	-webkit-animation:linear marqueelike 10s infinite;
	-moz-animation:linear marqueelike 10s infinite;
	-o-animation:linear marqueelike 10s infinite;
	-ms-animation:linear marqueelike 10s infinite;
	animation:linear marqueelike 10s infinite;
	margin-left:-110%;
	padding:0 5px;
	text-align:left;
	height:20px;
}
/*.defile:hover {
  -webkit-animation-play-state:paused;
  -moz-animation-play-state:paused;
  animation-play-state:paused;
}*/

.defile:after {
	content:attr(data-text);
	position:absolute;
	white-space:nowrap;
	padding-left:10px;
}


/*petits écrans */

@media screen and (max-width: 1170px) 
    {
    	.Message1 {	width: 50%; left : 30%; font-size: 18px; height: 130px; }
    	.Message2 { margin-top: 30px; }
		.Adroite { right: 60px; }

	}	

@media screen and (max-width: 965px)
    {
    	#clone { left : 00px; top : 300px; }
    	.Message1 {	width: 75%; left : 20%; }
    	.Message2 { font-size: 14px; width : 510px; margin-top: 30px; }
    	.Message1 p:hover {
							-webkit-transform: scale(1.1);
							-moz-transform: scale(1.1);
							-ms-transform: scale(1.1);
							-o-transform: scale(1.1);
							transform: scale(1.1);
							} 
    	.Texte1 {	width: 600px;	font-size: 0.9em; height : 280px; }
		.Adroite { right: 40px; }
	}		

@media screen and (max-width: 670px) 
    {
    	#nav { display : none;}
    	#slide1, #slide2, #slide3 { padding-top: 2px; margin-top: 2px; }
    	#slide2 { padding-top: 60px; }
    	#slide2 .slide_inside { width: 400px; left : 220px; }
    	#slide3 .slide_inside {	margin-top: 35px; }
    	#clone { left : -80px; top : 300px; }
    	#trooper { left : -60px; top: 270px; }
    	.laurier1 { font-size: 1.6em; width: 320px; }
    	#Block2	{ top : 1010px; left : 60%; }
    	#contact-form { max-width: 450px;}
    	#contact-form input {width:270px; margin:5px;}
		#contact-form textarea {height:150px;width:271px;margin:5px;}
		.text-form {margin-right: 5px;width:100px;line-height:2.0em;}
		.Message1 { font-size: 18px; width: 80%; left : 12%; height: 125px; }
		.Message2 { font-size: 14px; width: 460px; left : 45%; }
		.MessageCoté1 { left : -60px; }
		#slide2 { padding-top: 5px; }
		#slide2 .slide_inside { width: 320px; margin-top: 10px; }
		.Texte1 {	width: 480px;
					height: 330px;
    				-webkit-column-gap : 1.5em;
					-moz-column-gap : 1.5em;
					column-gap : 1.5em;
				}
		#titre { margin-left: 5%; }
    	h2 { font-size: 1.6em; }
    	.Adroite { right: 40px; }
    }

@media screen and (max-width: 555px) 
    {	
    	#clone { left : -40px; top : 300px; }
    	#trooper { left : -85px; top: 270px; }
    	#contact-form { max-width: 410px;}
    	#contact-form input {width:230px; margin:5px;}
		#contact-form textarea {height:150px;width:231px;margin:5px;}
		.text-form {margin-right: 5px;width:100px;line-height:2.0em;}
		.MessageCoté1 { display: none; }
		.Message1 { left : 3%; width: 95%;  height : 110px; font-size: 14px; }
		.Message2 { font-size: 12px; width : 100%; text-align: center; margin-top: 50px; }
		#Block2	{ left : 50%; }
		.Texte1 { 	top : 100px; 
					width : 320px; 
					height: 400px;
					position : relative; 
					line-height: 1.25em; 
					font-size: 0.8em;
					-webkit-column-count:1; 
    				-moz-column-count: 1; 
    				column-count: 1; }
    	.defile { display : none; }				
    	h2 { font-size: 1.5em; }
    	.Adroite { right: 20px; }
    	#titre { margin-left: 4%; }
    }

 @media screen and (max-width: 490px) 
    {
    	.defileParent 	{ width: 300px; }
    	.defileParent2 	{ width: 300px; }
    	.text-form 	{ width: 95%; text-align: center; }
    	#contact-form { max-width: 390px;}
    	#contact-form input {width:90%; margin:5px;}
		#contact-form textarea {height:150px;width:90%;margin:5px;}
		#AccrochNew { font-size: 10px; }  
    	.Adroite { right: 0px; }
    	#titre { margin-left: 3%; }
    }

@media screen and (max-width: 390px) 
    {
    	.Texte1 { top : 120px; width: 280px; height: 420px; }
    	#titre { margin-left: 1%; font-size: 18px; }
    }

/* target elements */

#s1:target ~ #wrap { top:0px; height: 1000px; overflow:hidden;}
#s1:target ~ #wrap #trooper { top: 300px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-ms-transform: rotate(20deg);-o-transform: rotate(20deg);transform: rotate(20deg); }
#s1:target ~ #wrap #clone { top: 200px;-webkit-transform: rotate(10deg);-moz-transform: rotate(10deg);-ms-transform: rotate(10deg);-o-transform: rotate(10deg);transform: rotate(10deg); }

#s2:target ~ #wrap { overflow:visible; top:-1000px; height: 1000px;}
#s2:target ~ #wrap #trooper { top: -85px; -webkit-transform: rotate(-22deg);-moz-transform: rotate(-22deg);-ms-transform: rotate(-22deg);-o-transform: rotate(-22deg);transform: rotate(-22deg); }
#s2:target ~ #wrap #clone { top: -85px; -webkit-transform: rotate(360deg);-moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg);transform: rotate(360deg); }

#s3:target ~ #wrap { overflow:visible; top:-2130px; height: 1000px; }
#s3:target ~ #wrap #trooper { left:-1500px;top:-1000px;-webkit-transform:rotate(-15deg);-moz-transform:rotate(-15deg);-ms-transform:rotate(-15deg);-o-transform:rotate(-15deg);transform: rotate(-15deg); }
#s3:target ~ #wrap #clone { left:-1000px;top: -900px;-webkit-transform: rotate(-15deg);-moz-transform: rotate(-15deg);-ms-transform: rotate(-15deg);-o-transform: rotate(-15deg);transform: rotate(-15deg); }


@-webkit-keyframes marqueelike {
	0%, 100% {margin-left:100%;}
	99.99% {margin-left:-125%;}
 }
@-moz-keyframes marqueelike {
	0%, 100% {margin-left:100%;}
	99.99% {margin-left:-125%;}
 }
@-o-keyframes marqueelike {
	0%, 100% {margin-left:100%;}
	99.99% {margin-left:-125%;}
 }
@-ms-keyframes marqueelike {
	0%, 100% {margin-left:100%;}
	99.99% {margin-left:-125%;}
 }
@keyframes marqueelike {
	0%, 100% {margin-left:100%;}
	99.99% {margin-left:-125%;}
 }