body{
  font:25px/1.1em arial, sans-serif;

 	
 }

/* CURSEUR PERSO */
a:hover, .gif:hover, .poopc,.burger {
	cursor: url("../images/curseur.png") 35 35, pointer; 
}


/* home page */

.abot {
	width: 74%;
	padding: 7%;
	left: 14%;
position: relative;
top: 65vh;

color: #fc5202; 
text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 11px #fff,
    0 0 12px #0fa,
    0 0 14px #0fa,
    0 0 16px #0fa,
    0 0 18px #0fa,
    0 0 25px #0fa;
font-weight: bold; font-size: 25px;
z-index: 102;
opacity: 1;
	overflow: hidden;
    overflow-y: auto;
}

.abot.show{
	display: none;
	opacity: 0;}


.intro{
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
background-color: black;
} 

.imgBackground {
	display: block;
	position: relative;
    width:100%; height:auto;
    transition : all 2s;
    /*object-fit: cover;*/

}

.imgBGresp {
	display: none;
	position: relative;
    width:100%; height:auto;
    transition : all 2s;
    /*object-fit: cover;*/

}

.gif {
	width: 10%;
	height: auto;
	display: none;
	position: fixed;
	z-index:101;
	top: 0pt;
	left: -5pt;

}

.gif:hover{
    transform: rotate(360deg);
    transition: all 0.3s ease-in-out 0s;

}


.burger {
	width: 6%;
	height: auto;
	display: none;
	position: fixed;
	z-index:101;
	top: 20pt;
	right: 20pt;

}

.burger:hover{
    transform: rotate(360deg);
transition: all 0.3s ease-in-out 0s;

}

.burgerh {
	width: 6%;
	height: auto;
	display: none;
	position: fixed;
	z-index:101;
	top: 20pt;
	right: 20pt;

}

.burgerh:hover{
    transform: rotate(360deg);
    transition: all 0.3s ease-in-out 0.3s;

}

.contacth {
	width: 45vh;
	height: 18vh;
	left: 9%;
	top: 1%;
	position: fixed;
	
	opacity: 0;
	transition: all 0.5s;
}

.contacth.show{

	opacity: 1;
}


.contacth:hover{
    
    animation: shake 0.5s;
    animation-iteration-count: infinite;
	
}

.workh {
	width: 35vh;
	height: 18vh;
	left: 42%;
	top: 1%;
	position: fixed;
	opacity: 0;
	transition: all 0.5s;
}

.workh.show{

	opacity: 1;
}


.workh:hover{
    
    animation: shake 0.5s;
    animation-iteration-count: infinite;
	
}


.abh {
	
	width: 35vh;
	height: 20vh;
	right: 10%;
	top: -1%;
	position: fixed;
	opacity: 0;
	transition: all 0.5s;
}

.abh.show{

	opacity: 1;
}


.abh:hover{
    
    animation: shake 0.5s;
    animation-iteration-count: infinite;
	
}





.burgerwork {
	display: block;
	position: fixed;
	z-index:101;
	top: 20pt;
	right: 20pt;

}

.burgerwork:hover{
    transform: rotate(360deg);
    transition: all 0.3s ease-in-out 0s;

}

.imgLoading
{
 	position: absolute;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	display: flex;
	align-items:center;
	justify-content : center;
	z-index: 1;
	transition: all 1s;
 
}

.about {
	width: 110%;
	height: 90%;
	position: fixed;
	top: 50pt;
	left: -65pt;
	opacity: 0;
	transition: all 0.5s;
	z-index: 0;
}

.about.show{
	
	opacity: 1;	
}


.menu {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0pt;
	right: 0pt;
	opacity: 0;
	transition: all 0.5s;
	z-index: 100;
}



.menu.show{
	
	opacity: 1;
}




.menuburger{
	position: fixed;
	display: flex;
	align-items:center;
	justify-content : center;
	width: 100%;
	z-index: 100;
}

.contact {
	width: 60vh;
	height: 25vh;
	left: 4%;
	top: 32%;
	position: fixed;
	
	opacity: 0;
	transition: all 0.5s;
}

.contact.show{

	opacity: 1;
}


.contact:hover{
    
    animation: shake 0.5s;
    animation-iteration-count: infinite;
	
}

.work {
	width: 45vh;
	height: 28vh;
	left: 41%;
	top: 32%;
	position: fixed;
	opacity: 0;
	transition: all 0.5s;
}

.work.show{

	opacity: 1;
}


.work:hover{
    
    animation: shake 0.5s;
    animation-iteration-count: infinite;
	
}


.ab {
	
	width: 45vh;
	height: 30vh;
	right: 5%;
	top: 30%;
	position: fixed;
	opacity: 0;
	transition: all 0.5s;
}

.ab.show{

	opacity: 1;
}


.ab:hover{
    
    animation: shake 0.5s;
    animation-iteration-count: infinite;
	
}



/* WORK */

.BGWORK {
	display:block;
	position: relative;
    width:100%; height:auto;
   
    /*object-fit: cover;*/

}

.BGWORKresp {
	display:none;
	position: relative;
    width:100%; height:auto;
   
    /*object-fit: cover;*/

}

.gifwork {
	
	position: fixed;
	z-index:101;
	top: 0pt;
	left: -5pt;

}

.gifwork:hover{
    transform: rotate(360deg);
    transition: all 0.3s ease-in-out 0s;

}


.WORKK {
	width: 200pt;
	height: 90pt;
	left: 40%;
	top: 0%;
	position: fixed;
	z-index:101;
	opacity: 1;
	transition: all 0.5s;
}

.WORKK.show{

	opacity: 0;
}

.cont {
	width: 200pt;
	height: 90pt;
	left: 40%;
	top: 0%;
	position: fixed;
	z-index:101;
	opacity: 1;
	transition: all 0.5s;
}

.cont.show{

	opacity: 0;
}

.abo {
	width: 200pt;
	height: 90pt;
	left: 40%;
	top: 0%;
	position: fixed;
	z-index:101;
	opacity: 1;
	transition: all 0.5s;
}

.abo.show{

	opacity: 0;
}

.poopc {
	
	position: fixed;
	z-index:101;
	bottom: -5pt;
left: 3%;
	opacity: 1;

}

.poopc:hover{
    animation: shake 0.5s;
    animation-iteration-count: infinite;

}
.poopc.show{

	opacity: 0;
}
.poopc2 {
	
	position: fixed;
	z-index:90;
	bottom: -5pt;
left: 3%;
    opacity: 0;
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

.poopc2:hover{
    animation: shake 0.5s;
    animation-iteration-count: infinite;

}
.poopc2.show{

	opacity: 1;
}
.poop {
	
	position: fixed;
	z-index:101;
	bottom: -5pt;
	left: 5pt;
	opacity: 1;
	overflow: hidden;
    overflow-y: auto;
}

.poop.show{
display: none;
	opacity: 0;
}

.hi {
	animation: shake 0.5s;
    animation-iteration-count: infinite;
	width: 35vw;
	height: 30vh; 
	position: fixed;
	z-index:110;
	top: 145px;
	left: 3%;
	opacity: 1;
	overflow: hidden;
    overflow-y: auto;
}
.hi.show{
	display: none;
	opacity: 0;
}
.hi:hover{
    animation: shake 0.5s;
    animation-iteration-count: stop;

}


.insta {

	width: 45vw;
	height: 90vh; 
	position: fixed;
	z-index:110;
	top: 145px;
	left: 50%;
	opacity: 1;
	overflow: hidden;
    overflow-y: auto;
}
.insta.show{
	display: none;
	opacity: 0;
}


.instad {
	animation: shake 0.5s;
    animation-iteration-count: infinite;
	width: 45vw;
	height: 50vh; 
	position: fixed;
	z-index:120;
	top: 130px;
	left: 50%;
	opacity: 1;
	overflow: hidden;
    overflow-y: auto;
}
.instad.show{
	display: none;
	opacity: 0;

}
.instad:hover{
    animation: shake 0.5s;
    animation-iteration-count: stop;
    background-image: url('images/PNG/instam.png')
  

}

.instam{
	animation: shake 0.5s;
    animation-iteration-count: infinite;
	width: 45vw;
	height: 50vh;
	position: fixed;
	z-index:120;
	top: 40%;
	left: 50%;
	opacity: 1;
	overflow: hidden;
    overflow-y: auto;
}
.instam.show{
	display: none;
	opacity: 0;

}
.instam:hover{
    animation: shake 0.5s;
    animation-iteration-count: stop;
    background-image: url('images/PNG/instadd.png')
  

}


.GIFABOUT {
	top: 159px;
	position: fixed;
	z-index:90;
	bottom: -5pt;
left: 3%;
    opacity: 1;

}

.GIFABOUT.show{

	opacity: 0;
}


.vid1 video {
	padding: 4%;

width: 400px;
  height: 400px;
  border-radius: 100%;
  position: absolute;
  top: 3%;
  z-index: 5;
}

.vid2 video {
		padding: 4%;
	left: 22.5%;
	
  width: 400px;
  height: 400px;
  border-radius: 100%;
  position: absolute;
  top: 3%;
  z-index: 6;
}

.vid3 video {
		padding: 4%;
	left: 45%;
	
  width: 400px;
  height: 400px;
  border-radius: 100%;
  position: absolute;
  top: 3%;
  z-index: 6;
}

.plangif {

	width: 100%;
	height: auto;
 	position: relative;
  	z-index: 16;
}

.welc1 video {
	padding: 1%;
  width: 69%;
  height: auto;
 
  position: absolute;

  z-index: 6;
}

.welc2 video {
	padding: 1%;
  width: 69%;
  height: auto;
 top: 40%;
  position: absolute;

  z-index: 6;
}

.monof video {
	padding: 1%;
  width: 69%;
  height: auto;
 
  position: absolute;

  z-index: 6;
}

.L1 { 
	position: fixed;
	top: 139px;
	width:100%; 
	height:1.5px; 
	background-color: #cf4d27;
	z-index: 1003; 
	opacity: 1;
	transition: all 0.5s;
}

.L1.show{

	opacity: 0;
}

.fond{position: absolute; top:0; left: 0; width: 100%; height: auto}
.conteneurProjet{
	color: #cf4d27;
	top: 139px;
	overflow: hidden;
	overflow-y: auto;
	position: fixed;
	width:100%;
	height: calc(100vh - 139px);opacity: 1;
	transition: all 0.5s;
	z-index: 102;
	
}

.conteneurProjet.show{

	display:none;
}
.flex {
 	display: flex;
 	position: relative;
}
.flex div.blocProjet {width: 25%;}
.flex div.blocProjet .cadre {border:1px solid #fc5202; }

.flex div.blocProjet .cadre img {width:100%; height:auto;}
.flex div.blocProjet .cadre img:hover{
	animation: shake 0.5s;
    animation-iteration-count: infinite;
      -webkit-filter: invert(100%) !important;
}

/* Text dùn projet*/
.flex .blocProjet div:nth-child(2) {color: #fc5202; border:1px solid #fc5202;
text-align: center;padding-top: 5px;padding-bottom: 5px;
font-weight: bold; font-size: 24px;}

/*
.flex .blocProjet div:nth-child(2) {color:white; border:1px solid #cf4d27; border-top:0; border-bottom: 0; border-right: 0 }
.flex:last-child .blocProjet div:nth-child(2) {border-bottom:1px solid #cf4d27;}
.flex:last-child .blocProjet div:nth-child(2) {border-right:1px solid #cf4d27;}
*/


/* PAGE CSS POUR DETAIL PROJET */

.conteneurProjetDetail {margin-top:calc(139px + 70px);}
.conteneurProjetDetail.show{

	display:none;
}


.imageDetailProjet {width: 70%}
.infoDetailProjet {
	font-weight: bold; 
	width:30%; 
	padding:20px; 
	}
.imageDetailProjet img  {width: 100%; height: auto; border-right: 1px solid #fc5202; display: block; }
.titreProjetDetail img:hover{
	animation: shake 0.5s;
    animation-iteration-count: infinite;
    
}
.titreProjetDetail {

	position: fixed; 
	border-bottom:1px
	solid #fc5202; 
	height: 70px; 
	top:139px; 
	line-height: 70px; 
	width: 100%;
	font-weight: bold; 
	font-size: 30px; 
	color:#fc5202;
	text-align: center;
	}
.titreProjetDetail .flesh1{
	padding-top: 8px;
	position: fixed;
	left: 2%;
	top: 139px;
	width: 70px; 
	height: auto;  
	display: block;
	}
.titreProjetDetail .flesh2{
	padding-top: 8px;
	right: 2%;
	position: fixed;
	top: 139px;
	width: 70px; 
	height: auto;  
	display: block;
	}
.flexDetailProjet {border-bottom:1px solid #fc5202 }

.conteneurDetailProjet {
    color: #fc5202;
    top: 209px;
    overflow: hidden;
    overflow-y: auto;
    position: fixed;
    width: 100%;
    height: calc(100vh - 209px);
    opacity: 1;
    transition: all 0.5s;
    z-index: 102;
}

	opacity: 1;
	transition: all 0.5s;
}

.L1.show{

	opacity: 0;
}

.flex {
 	display: flex;
 	position: relative;
}

.flex div.fleche1 {border:1px solid #fc5202;order:0; }
.flex div.image {width: 25%;order:3;}
.flex div.fleche2 {border:1px solid #fc5202; }
.flex div.texte {width:100%; height:auto;}
.flex div.blocAGNES .cadre img {width:100%; height:auto;}

/* Text dùn projet*/
.flex .blocAGNES div:nth-child(2) {color: #fc5202; border:1px solid #fc5202;
text-align: center;padding-top: 5px;
font-weight: bold; font-size: 24px;}

/* AGNES*/


@media screen and (width: 2560px) {

	.abot {
	width: 87%;
	padding: 5%;
	left: 10%;
position: relative;
top: 75vh;
line-height: 32pt;
color: #fc5202; 
text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 11px #fff,
    0 0 12px #0fa,
    0 0 14px #0fa,
    0 0 16px #0fa,
    0 0 18px #0fa,
    0 0 25px #0fa;
font-weight: bold; font-size: 35px;
z-index: 102}

	.GIFABOUT {
		width: 100%;
		height: auto;
	top: 159px;
	position: fixed;
	z-index:90;
	bottom: -5pt;
left: 1%;
    opacity: 1;

}

.GIFABOUT.show{

	opacity: 0;
}

}


@media screen and (max-width: 1200px) {
	.BGWORK{
		display: block;}
		.BGWORKresp {
		display: none;}
 	.menuburger {top:50%; transform:translate(0, -50%); display:block; z-index: 101}
 	.menuburger img {position: relative; display: block; top:0; left: 0; width: 40%;
    transform: rotate(0); margin:0 auto; height: auto;}
    .menuburger .contact {width: 40%;
    }


}

@media screen and (max-width: 874px) {

.abot {
	width: 90%;
	padding: 5%;
	left: 8%;
	position: relative;
	top: 95vh;

	color: #fc5202; 
	text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 11px #fff,
    0 0 12px #0fa,
    0 0 14px #0fa,
    0 0 16px #0fa,
    0 0 18px #0fa,
    0 0 25px #0fa;
	font-weight: bold; font-size: 20px;
	z-index: 102}

.GIFABOUT{
	top: 35%;
	width: 120%;
	height: auto;	
	left: -10%;
	transform: rotate(-35deg);}

.poopc{
	width: 43%;
	height: auto;
	transform: rotate(45deg);
	left: 1%;
	bottom:-75px;}

.poopc2{
	width: 43%;
	height: auto;
	left: 1%;
	bottom:-75px;
	transform: rotate(45deg);}

.insta{
	top: 38%;
	width: 93%;
	height: auto;
	left: 4%;
	bottom:-45px;}

.instad{
	top: 36%;
	width: 93%;
	height: auto;
	left: 4%;
	bottom:-45px;}

.instam{
	top: 53%;
	width: 93%;
	height: auto;
	left: 4%;
	bottom:-45px;}

.hi{
	width: 95%;
	height: auto;}

.burger {
	width: 20%;
	height: auto;}

.gif{width: 20%;
	height: auto;}
	
.flex {flex-wrap: wrap;}	
.flex div.blocProjet {width: 50%;}
	}

@media screen and (max-width: 768px) {

.vid1 video {
	padding: 4%;

width: 300px;
  height: 300px;
  border-radius: 100%;
  position: absolute;
  top: 3%;
  z-index: 5;
}

.vid2 video {
		padding: 4%;
	left: 32%;
	
  width: 300px;
  height: 300px;
  border-radius: 100%;
  position: absolute;
  top: 3%;
  z-index: 6;
}

.vid3 video {
		padding: 4%;
	left: 64%;
	top: 10%;
  width: 300px;
  height: 300px;
  border-radius: 100%;
  position: relative;
  top: 3%;
  z-index: 7;
}





.plangif {

	width: 100%;
	height: auto;
 	position: relative;
  	z-index: 16;
}

	.GIFABOUT{
	top: 35%;
	width: 160%;
	height: auto;	
	left: -30%;
	transform: rotate(-55deg);
	
	}
 	.abo{display: none;}
 	.WORKK{display: none;}
 	.cont{display: none;}
	.imageDetailProjet {width: 100%; border-bottom: 1px solid #fc5202 }
	.infoDetailProjet {width:100%; padding:20px; border-bottom:1px solid #fc5202;border-top:1px solid #fc5202}


}

@media screen and (max-width: 480px) {



	.abot {
	width: 90%;
	padding: 5%;
	left: 8%;
position: relative;
top: 95vh;

color: #fc5202; 
text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 11px #fff,
    0 0 12px #0fa,
    0 0 14px #0fa,
    0 0 16px #0fa,
    0 0 18px #0fa,
    0 0 25px #0fa;
font-weight: bold; font-size: 20px;
z-index: 102}


	.welc1 video {
		top: 3%;
	padding: 1%;
  width: 100%;
  height: auto;
 
  position: absolute;

  z-index: 6;
}

.welc2 video {
	padding: 1%;
  width: 100%;
  height: auto;
 top: 35%;
  position: absolute;

  z-index: 6;
}

	.vid1 video {
	padding: 4%;

width: 350px;
  height: 350px;
  border-radius: 100%;
  position: relative;
  top: 3%;
  z-index: 5;
}

.vid2 video {
		padding: 4%;
	left: 4%;
	
  width: 350px;
  height: 350px;
  border-radius: 100%;
  position: relative;
  top: 3%;
  z-index: 6;
}

.vid3 video {
		padding: 4%;
	left: 4%;
	
  width: 350px;
  height: 350px;
  border-radius: 100%;
  position: relative;
  top: 3%;
  z-index: 6;
}

.plangif {

	width: 100%;
	height: auto;
 	position: absolute;
  	z-index: 16;
}

.GIFABOUT{
	top: 40%;
	width: 200%;
	height: auto;	
	left: -45%;
	transform: rotate(-90deg);
	
	}

	.poopc{
	width: 60%;
	height: auto;
	transform: rotate(45deg);
	left: -1%;
	bottom:-45px;
	}
	.poopc2{
		width: 60%;
	height: auto;
	left: -1%;
		bottom:-45px;
	transform: rotate(45deg);
	}

.insta{
	top: 45%;
		width: 99%;
	height: auto;
	left: 1%;
		bottom:-45px;

	}

	.instad{
	top: 44%;
		width: 99%;
	height: auto;
	left: 1%;
		bottom:-45px;

	}
	.instam{
	top: 55%;
		width: 99%;
	height: auto;
	left: 1%;
		bottom:-45px;

	}

	.hi{
	
		width: 95%;
	height: auto;
	}

		.BGWORK {
	display: none;}
	
	.BGWORKresp {
		display: block;}
	.burger {
	width: 30%;
	height: auto;}

	.gif{width: 50%;
	height: auto;}

  	.flex div.blocProjet {width: 100%;}
  	

}


@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(8deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg);  }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.rotating img {width:100%; height: 100%}
			.rotating {position:fixed;}
			header {position:fixed; top:0; left:0; z-index: 1; width:100%; height:50px}
			header a {color:#fff}
			@-webkit-keyframes rotating /* Safari and Chrome */ {
			  from {
				-webkit-transform: rotate(0deg);
				-o-transform: rotate(0deg);
				transform: rotate(0deg);
			  }
			  to {
				-webkit-transform: rotate(360deg);
				-o-transform: rotate(360deg);
				transform: rotate(360deg);
			  }
			}
			@keyframes rotating {
			  from {
				-ms-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-webkit-transform: rotate(0deg);
				-o-transform: rotate(0deg);
				transform: rotate(0deg);
			  }
			  to {
				-ms-transform: rotate(360deg);
				-moz-transform: rotate(360deg);
				-webkit-transform: rotate(360deg);
				-o-transform: rotate(360deg);
				transform: rotate(360deg);
			  }
			}
			.rotating {
			  -webkit-animation: rotating 5s linear infinite;
			  -moz-animation: rotating 5s linear infinite;
			  -ms-animation: rotating 5s linear infinite;
			  -o-animation: rotating 5s linear infinite;
			  animation: rotating 5s linear infinite;
			}