body{
		color: #333;
		font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;

		cursor: url("../imgs/cursor.png"), pointer;
	}





	@font-face {
    font-family: 'dragon_is_comingregular';
    src: url('../fonts/dragon_is_coming-webfont.woff2') format('woff2'),
         url('../fonts/dragon_is_coming-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

	/* Style for our header texts
	* --------------------------------------- */
	h1{
		font-size: 5em;
		font-family: arial,helvetica;
		margin:0;
		padding:0;
	}
	h2{
		font-size: 2em;
		margin: 0 0 18px 0;
		font-family: arial,helvetica;
	}




	/* Common styles
	* --------------------------------------- */
	img{
	    -webkit-transition: all 0.7s ease-out;
		-moz-transition: all 0.7s ease-out;
		-o-transition: all 0.7s ease-out;
		transition: all 0.7s ease-out;
	}
	.section{
		text-align:center;
		overflow:hidden;
		background-color: black !important	;
	}
	.wrap{
		width: 100%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}
	.box{
		text-align: left;
		color: #808080;
		font-size: 1.2em;
		line-height: 1.6em;
	}




	/* Section 0
	* --------------------------------------- */
		#myVideo{
		position: absolute;
		right: 0;
		bottom: 0;
		top:0;
		right:0;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
 		background-color: black; /* in case the video doesn't fit the whole page*/
  		
  		background-position: center center;
  		background-size: contain;
   		object-fit: cover; /*cover video background */
   		z-index:3;
	}



	/* Layer with position absolute in order to have it over the video
	* --------------------------------------- */
	#section0 .layer{
		    margin-top: 50vh;
    		transform: translateY(-50%);
	}

	/*solves problem with overflowing video in Mac with Chrome */
	#section0{
		overflow: hidden;
	}

	#section0 h1{
		font-size: 35em;
		font-family: 'dragon_is_comingregular', arial,helvetica !important;
    	color: #FFF673 !important;
    }


    #section0 span{
		
		/*background-color:rgba(0,0,0, 0.8);*/
    	padding: 0px 10px;
    	
    }
	



	/* Section 1
	* --------------------------------------- */
	#section1{
		background-color: black !important;
		color:white !important;
	}

	#section1 img{
		position:absolute;
		left: 40px;
		top: 15%;

	}

	#section1 .box{
		
		width: 40%;
		height: 100%;
		
		float: left;
		background-color: white;
	}

	#section1 .box p{
		
		padding: 40px 40px;
		font-size: 1.1em;
		text-align: left;
		width: 80%;
		
	}

	#section1 .box h2{
		
		text-align: left;
		font-size: 2em;
		width: 80%;
		padding:25% 40px 0 40px;
		
	}

	#section1 .imgsContainer{

		width: 60%;
		height: 100%;
		float: left;
	}
	#section1 img{
		

		width:15%;
	}

	#iphone2{
		z-index: 10;
	}
	#iphone2.active{
		-webkit-transform: translate3d(0px, 0px, 0px);
		-moz-transform: translate3d(0px, 0px, 0px);
		-ms-transform:translate3d(0px, 0px, 0px);
		transform: translate3d(0px, 0px, 0px);
	}

	#iphone3{
		z-index: 12;
	}
	#iphone3.active{
		-webkit-transform: translate3d(120%, 0px, 0px);
		-moz-transform: translate3d(120%, 0px, 0px);
		-ms-transform:translate3d(120%, 0px, 0px);
		transform: translate3d(120%, 0px, 0px);
	}

	#iphone4{
		z-index: 11;
		left: 140px;
	}

	#iphone4.active{
		-webkit-transform: translate3d(240%, 0px, 0px);
		-moz-transform: translate3d(240%, 0px, 0px);
		-ms-transform:translate3d(240%, 0px, 0px);
		transform: translate3d(240%, 0px, 0px);
	}

/************* section 2 ***************/

	#iphone5{
		z-index: 10;
	}
	#iphone5.active{
		-webkit-transform: translate3d(0px, 50%, 0px);
		-moz-transform: translate3d(0px, 50%, 0px);
		-ms-transform:translate3d(0px, 50%, 0px);
		transform: translate3d(0px, 50%, 0px);
	}

	#iphone6{
		z-index: 12;
	}
	#iphone6.active{
		-webkit-transform: translate3d(0%, 50%, 0px);
		-moz-transform: translate3d(0%, 50%, 0px);
		-ms-transform:translate3d(0%, 50%, 0px);
		transform: translate3d(0%, 50%, 0px);
	}

	#cercle{
		z-index: 12;
	}
	#cercle.active{
		-webkit-transform: translate3d(0%, 30%, 0px);
		-moz-transform: translate3d(0%, 30%, 0px);
		-ms-transform:translate3d(0%, 30%, 0px);
		transform: translate3d(0%, 30%, 0px);
	}

	#section2{
		background-image: url(../imgs/background1.jpeg);
		background-color: white;
	}

	#section2 .imgsContainer{
		    /* top: 50%; */
    text-align: center;
    width: 50%;
    height: 100%;
    background-color: black;
    /* float: left; */
    position: absolute;
    top: 0px;
    left: 50%;
    z-index: 1;
	}

	#section2 img{

	 padding-top: 50px;
	 
    height: 60%;
	}
	#section2 .box{
		text-align: center;
    width: 50%;
    height: 100%;
    background-color: white;
    /* float: left; */
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
	}
	#section2 .test_circle{

    margin-top: 40px;
    width: 600px;
    height: 600px;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid white;
    border-radius: 100%;
    padding: 20px 20px;
    text-align: center;
    background-color: black;
    color: white !important;
     margin-top: 50vh;
    transform: translateY(-50%);

	}

	#section2 p{
		    font-size: 1.3em;
    text-align: center;
    width: 80%;
    margin: auto;
    color: #fff;
    margin-bottom: 15px;
	}

	#section2 h2{
		    text-align: center;
    font-size: 2em;
    margin-top: 50px;
    color: #f9f9f9;
	}





	/* Section 3
	* --------------------------------------- */
	#section3{
		background-image: url(../imgs/background2.jpeg);
		background-color: black;
		
	}

	#pdt_phare_3{
		z-index: 10;
	}
	#pdt_phare_3.active{
		-webkit-transform: translate3d(0px, 30%, 0px);
		-moz-transform: translate3d(0px, 30%, 0px);
		-ms-transform:translate3d(0px, 30%, 0px);
		transform: translate3d(0px, 30%, 0px);
	}

	#pdt_phare_4{
		z-index: 12;
	}
	#pdt_phare_4.active{
		-webkit-transform: translate3d(0%, 30%, 0px);
		-moz-transform: translate3d(0%, 30%, 0px);
		-ms-transform:translate3d(0%, 30%, 0px);
		transform: translate3d(0%, 30%, 0px);
	}
	#section3 .imgsContainer{
		    /* top: 50%; */
    text-align: center;
    width: 50%;
    height: 100%;
    background-color: white;
    /* float: left; */
    position: absolute;
    top: 0px;
    left: 50%;
    z-index: 1;
	}

	#section3 img{

	 margin-top: 30%;
    width: 60%;
	}
	#section3 .box{
		text-align: center;
    width: 50%;
    height: 100%;
    background-color: black;
    /* float: left; */
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
	}
	#section3 .test_circle{

    margin-top: 40px;
    width: 600px;
    height: 600px;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid white;
    border-radius: 100%;
    padding: 20px 20px;
    text-align: center;
    background-color: black;
    color: white !important;
     margin-top: 50vh;
    transform: translateY(-50%);
	}

	#section3 p{
	font-size: 1.3em;
    text-align: center;
    width: 80%;
    margin: auto;
    color: #fff;
    margin-bottom: 15px;
	}

	#section3 h2{
		    text-align: center;
    font-size: 2em;
    margin-top: 50px;
    color: white !important;
	}



	/************************************section 4 *******************/

	#section4 h1
	{
		color:#fff;
		font-size: 25em;
		font-family: 'dragon_is_comingregular', arial,helvetica !important;
	}

	#section4 .tlt_white
	{
		color:#fff !important;
		margin: 20px 0 20px 0;
	}

	
	.white
	{
		background-color: #fff !important;
		font-size: 1.2em;
		font-family: 'dragon_is_comingregular', arial,helvetica !important;
	}
	.white h1
	{
		color: #000 !important;
	}

	#section4 img
	{
		max-width:700px;
		max-height:700px;
		margin-bottom: 20px;
		min-height: 500px;
	}

	#section4 .intro{
		    margin-top: 50vh;
    transform: translateY(-50%);
	}

		/************************************section 4 *******************/

	#section5 h1
	{
		color:#fff;
		font-size: 25em;
		font-family: 'dragon_is_comingregular', arial,helvetica !important;
	}

	#section5 .intro{
		    margin-top: 50vh;
    transform: translateY(-50%);
	}

	#section5 img
	{
		max-width:700px;
		max-height:700px;
		margin-bottom: 20px;
	}

	#section5 h2{
		color: #fff;
	}
	.white
	{
		background-color: #fff !important;
	}
	.white h2
	{
		color: #000 !important;
	}

	



	#section6 .front-black{
		background-color: black;
	}

	#section6 .back-perso{
		padding: 20px 15px;
	}

	#section6 .main{
		margin-top: 50vh;
    transform: translateY(-50%);
	}

	#section6 h2{
		font-size: 25em !important;
		font-family: 'dragon_is_comingregular', arial,helvetica !important;
	}





	#section7 .front-black{
		background-color: white;
	}

	#section7 .back-perso{
		padding: 20px 15px;
		background-color: white;
	}

	#section7 .ch2-info h3{
		color: black !important;

	}

	#section7 .ch2-info p{
		color: black !important;

    	border-top: 1px solid black;
	}

	.ch2-info p a {
		color: black !important;
	}

	#section7 .main{
		margin-top: 50vh;
    transform: translateY(-50%);
	}

	#section7 h2{
		font-size: 25em !important;
		font-family: 'dragon_is_comingregular', arial,helvetica !important;
		color: white !important;
	}
	#section7
	{
		background-color: black !important;
		color: black !important;
	}



	#section8 .front-black{
		background-color: black;
	}

	#section8 .back-perso{
		padding: 15px 10px;
	}

	#section8 .main{
		margin-top: 50vh;
    transform: translateY(-50%);
	}

	#section8 h2{
		font-size: 25em !important;
		font-family: 'dragon_is_comingregular', arial,helvetica !important;
	}

	#section8 h3{
		font-size: 0.9em !important;
	}

	#section8 a{
		color :#fff !important;
	}

	/* Overwriting fullPage.js tooltip color
	* --------------------------------------- */
	.fp-tooltip{
		color: #FFF673;
	}
	#fp-nav span, .fp-slidesNav span{
		border-color: #FFF673;
	}
	#fp-nav li .active span, .fp-slidesNav .active span{
		background: #FFF673;
	}

	

	.fp-controlArrow.fp-prev
	{
		margin-left: 70px;
		    border-color: rgb(0, 0, 0) #fff rgb(0, 0, 0) rgb(0, 0, 0);
	}
	.fp-controlArrow.fp-next
	{
		margin-right: 70px;
		border-color: rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) #fff;
	}

	#section6
	{
		background-color: white !important;
	}

	#section8
	{
		background-color: white !important;
	}


	#section9 .main{
		margin-top: 50vh;
    transform: translateY(-50%);
	}

	#formulaire_ctc {
    width: 500px;
    /* float: right; */
    /* margin-top: 50px; */
    margin-right: auto;
    margin-left: auto;
    /* padding: 0 250px; */
}

	.form_style
	{
		display: inline;
    width: 500px;

    padding: 10px;
    float: right;
    margin-bottom: 20px;
    border-radius:5px;
	}
	.text_area
	{
    height: 100px;

	}

	.div_block
	{
		display: inline-block;
		width: 100%;
	}

	

	.btn-stand
	{
		float: right;
		padding: 10px;
		width: 200px;
		border-radius: 5px;
		background-color: black;
    	color: white;

	}

	.btn-stand:hover
	{
		
		background-color: white;
    	color: black;

	}