@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

   
@font-face{
	font-family: "Impactt";
	src: url("../fonts/Impactt.ttf") format("truetype");
  }


body {
  height: 100vh;
}

html, body{
  scroll-behavior: smooth;
	cursor:
	url("../img/cursor.png"),auto !important;
}

.disableSave {
    -webkit-user-select:none;
    -webkit-touch-callout:none;
}

img {
  pointer-events: none;
}

img{
  pointer-events: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;/* prevent callout to copy image, etc when tap to hold */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
          supported by Chrome, Opera and Firefox */
}


#titre, .navlink , h3{
	font-family:'Poppins'!important;
}

video {
-webkit-user-drag: none;
}


.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
  padding-top: 75%;
}

.iframe-size{
	width:80%!important;
	margin:auto;
}

.instagram-media{margin:0 auto!important;width:50%!important;}








/*LOADER*/

#loader{
	position: fixed;
	width:100%;
	height:100vh;
	z-index:101;
	overflow: visible;
	background:black url("../img/load.gif") no-repeat center center;
	background-size:contain;
}

.retourWORKS{font-weight:300;
color:white;
font-size:3em;
	margin-top:10vh;
}






h2{
	color: white;
	font-size:4em;
	font-weight:800;
}

a:hover{
	text-decoration: none;
	color:#f5bc00;
}

.texte_courant{
	font-weight:500;
	font-size: 0.9em;
	color:white;
}

.bold{
	font-weight: 700;
}





/*nav*/

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index:1;
  top: 0;
  left: 0;
  background-color:black;
  background-size:cover;
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {

font-family:'Impactt';
	padding: 8px;
  text-decoration: none;
  font-size: 60px;
  color: #f5bc00;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color:white;
}

.overlay .closebtn {
  position: absolute;
  top: -0.4em;
  right: 0.1em;
  font-size: 80px;
	font-weight: 200;
  color:#f5bc00;
}

.overlay .closebtn:hover {
	color:white;
}

.navhome{
	padding-top:1em;
	display:flex;
	flex-direction: row;
	justify-content: space-between;
}

.nav{
	width:100%;
	position: fixed;
	top:0;
	z-index:100!important;
	background-color: none;
	padding:0.5em 1em 0.5em 1em;
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: auto;
	margin-top: 0em;
}

.nav a:hover{
	color:white;
}

#navbar{
		  transition: top 0.5s;
}

.navlink{
	display: none;
}

.logo{
	width:3em;
}

.scrollmenu {
	overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	overflow: auto;
	white-space: nowrap;
	font-size:1em;
	font-weight: 300;
}

.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 0em 3em;
  text-decoration: none;
}

.minimenu{
	height:6.2em;
	padding:3em 0em 0em 0em;
}

.minimenu .col-1{
	padding-right: 0px!important;
}


























/*HOME*/
#backhome_1{
	background-image: url("../img/bg/etoiles_phone.jpg");
  background-repeat:repeat-y;
    background-size: 100vh auto ;
    background-position: left top;
    background-attachment: fixed;



	
	
	
	margin: 0!important;
  padding: 0!important; 
}





#backhome_2{
	background-color:#00293B;
}


#backhome_3{
	height: 100vh;
	background-color:#00293B;
	display: flex;
	align-items: center;

}




.jesuis{
	color:white;
	line-height: 1.6em;
}

.positionjesuis{
	position: relative;
	z-index:11;
	display:flex;
	align-items: center;
	height:100vh;
}

.suis{
	font-family:'Impactt';
	letter-spacing: 0.05em;
	font-weight:900;
	font-size: 3em;
	margin-bottom:0px;
	color:white;
}

.imd{
	color:white;
	text-transform: none;
	font-size: 1.5em;
}

.call{
	position: absolute;
	left: 0; 
 	right: 0; 
 	margin-left: auto; 
 	margin-right: auto; 
	width:3em;
	top:85%;
	opacity: 0.8;
	z-index:20;
	animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.call:hover{
	opacity: 1;
}












/*FLY*/

.aPhoto img
{
	position: fixed;
	width: 50%;
	right:3%;
	 top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	z-index:0;
	

	animation:float 2s infinite;
    animation-duration: 4s;
	animation-fill-mode: both;
	animation-timing-function:ease;
}

    @keyframes float { 
		
  
  0% {
		transform: translateY(-50%);
	}
	50% {
		transform: translateY(-45%);
	}
	100% {
		transform: translateY(-50%);
	}
  
  }



.images
{
    width: 100%;
    height: auto;
}

.cloud_1{
	position:absolute;
	bottom:-2em;
	width:100%;
	z-index:1!important;
}







/*works_accueil*/

.works{
	font-family:'Impactt';
	width: 100%;
	height:100vh;
	display:flex;
	align-items: center;
}

.titre_works{
	position: absolute;
	z-index:11;
	text-transform: uppercase;
	opacity: 1;
	border-bottom: solid 0.5em white;
	right:15%;
}

.titre_works h2:hover{
	color:black;
	box-shadow: inset 100vh 0 0 0 white;
}

.titre_works:hover{
		border-bottom: none;
}

.works h2{
	margin-bottom: -3%;
	color:white;
	
	 box-shadow: inset 0 0 0 0 white;
  margin: 0 -.25rem;
  padding: 0 .25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}








.ordi{
	z-index:2;
	position: absolute;
}



.cloud_2{
	position:absolute;
	width:100%;
	margin-top:80%;
	z-index:10!important;
}



/*ABOUT*/


.about{
	font-family:'Impactt';
	width: 100%;
	height:auto;
	display:flex;
	align-items:center;
}

.fauteuil_vide{
	margin-top:20%;
	z-index:2;
	position: absolute;
	right:6%;
}

.titre_about{
	position: relative;
	z-index:1;
	width:100%;
	text-transform: uppercase;
}


.sous_titre{
	font-size: 1.5em;
	margin-top:2em;
	font-weight: 800;
	text-transform: uppercase;
	color: white;
}

.bio{
	margin-top:1em;
	z-index:10;
	padding-left:0!important;
}




#contact{
	position: relative;
	z-index:12;
		padding-left:0!important;

}

.reseaux p:nth-child(1){
	font-weight:800;
}

.num{
	text-decoration: none;
}

.mail{
	color: white;
}

.footer{
	margin-top:-45px;
	height:45px;
	position: absolute;
	width:100%;
	text-align:center;
	background-color: rgba(0,0,0,1);
	color: white;
	font-weight:200;
	

}

.footer a {
	color:#f5bc00;
	text-decoration: underline;
}

.footer p {
vertical-align: middle;
	position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}


































/*WORKS_HTML*/

.backworks{
	background-color:black;
}

.cloud_works{
	position:fixed;
	bottom:-4em;
	width:100%;
	z-index:1!important;
}

.vignettes{
	padding-top:4em;
	padding-bottom:4em;
	max-width: 100%;
}

.margeimg{
	margin:1em 0;
}

.border_img{
	border:0.1px solid white;
}


.overlayimg {
	display: flex;
	align-items: center;
	justify-content:center;
	position:absolute;
	top:.0rem;
	right:.92rem;
	bottom:.0rem;
	left:.94rem;
	background-color:#fff;
	opacity:0;
	transition:opacity .6s ease;
	color:black;
}


.overlayimg h3{
	text-transform: uppercase;
	padding:0px!important;
	margin:0px!important;
	font-weight:800;
	text-align: center;
	font-size:1em;
}

.overlayimg p{
	margin:0px!important;
	font-size:0.7em;
	text-transform: uppercase;
}

.textover{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.overlayimg:hover{
	opacity:0.9;
	color:black;
}






































/*mes Projets*/

#titre{
	margin:2em 0em 0.5em 0em;
	color: white;
	font-size: 2em;
	text-transform: uppercase;
	font-weight:bold;
}

#legende{
	margin-top:8em;
	margin-bottom:0px;
	padding-bottom:5em;
	color:white;
	font-weight:bold;
	font-size:1em;
	text-transform: uppercase;
}

.carousel-inner{
	margin-bottom:1em;
}

.carousel-indicators .active{
width: 12px;
height: 12px;
margin: 2px;
background-color:#fff;
}

.carousel-indicators li {
    top:4em;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #000\9;
    background-color:rgba(0,0,0,0);
    border: 1px solid #fff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.carousel-item img {
	max-width:90%;
	max-height: 75vh;
	margin: auto;
}





.video{
	max-width:90%;
	max-height: 75vh;
	margin: auto;
    }

.bigvideo{
	min-width:90%;
	margin:0px!important;
	padding: 0px!important;
    }


.little_img img{
	max-width:40%;
	max-height: 40%;
	margin: auto;
}





.carousel-control-prev{
	width:5%;
	display: flex;
	justify-content: flex-start;
}

.carousel-control-next{
	width:5%;
	display: flex;
	justify-content: flex-end;
}




.down{
	opacity: 0.5;
	margin-top:2em;
	display:flex;
	justify-content: center;
}

.down:active{
	opacity: 0.9;
}

.down:hover{
	opacity: 0.9;
}

/*MODAL*/

.modal-content{
	border-radius:0px!important;
}

.btn_modal{
	color: white;
	font-size:3em;
	font-weight: 600;
	background:none;
}

.btn_modal:hover{
	color:#f5bc00;
}

#ancre{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.modal-title{
	text-transform: uppercase;
	font-weight: 800;
}

.close:hover{
	color:#f5bc00!important;
}

.btn-secondary{
	background-color:rgba(0,0,0,0.00);
	border:none;
	font-weight: 700;
	color:black;
}

.btn-secondary:hover{
	background-color:rgba(0,0,0,0.00);
	color:#f5bc00!important;
}







/*723*/



#backcompagnie{
	background-color:black;
	background-size:cover;
}



/*BUZZ*/



#backbuzz{
	background-color:black;
	background-size:cover;
}





/*LUXLED*/


#backluxled{
	background-color:black;
}


/*SPORTIPOLIS*/


#backsportipolis{
	background-color:black;
}


/*LVT*/


#backvestigium{
	background-color:#253b24;
}


/*SHOWREEL*/


#backshow{
	background-color:black;
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover;
	background-attachment: fixed;
}

/*HYBRIDE*/


#backhybride{
	background-color:black;
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover;
	background-attachment: fixed;
}




/*Farm prod*/

#backfarm{
	background-color:#111C40;
}


/*GROIN*/

#backgroin{
	background-color:#E2B758;
}

/*LOCALE*/

#backlalocale{
	background-color: #33658a;
}

/*femmes_graphiques*/

#backfemmes_graphiques{
	background-color: #23767B;
}


/*PERSO*/

#backperso{
	background-color:#0A2D46;
}



/*DIPLOME*/

#backdiplome{
	background-color:#040B04;
}


/*ZANOTTO*/

#backzanotto{
	background-color:#A0D2EB;
}

#backTriptyque{
	background-color:black;
}

#backChimere{
	background-color:black;
}

#backAgape{
	background-color:black;
}

#backShine{
	background-color:black;
}


































@media (min-width: 450px) {
	
	
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 5em}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }	
	
.cloud_2{
	margin-top:20%;
}
	
	.carousel-item-buzz img {
	max-width:90%;
	max-height: 60vh;
	margin: auto;
}
	

	
	

}






/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
	
		.aPhoto
{
	position: fixed;




	width: 60%;
	right:10%;
	 top: 52%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	z-index:10;
}

.images
{
    width: 90%;
    height: auto;
}
	
	
	
		h2{
	font-size:6em;
}
	
	


	
	.texte_courant{
	font-size:1.2em;
}

	

	
	
	/*JESUIS*/	
	
.jesuis{
	color:white;
	line-height: 2.3em;
}
	
.suis{
		font-size: 4em;
		margin-bottom:0px;
	}
	
	
}













/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	
	

	

	
	
	/*WORKS ACCUEIL*/

	
	
	.titre_works{
		border-bottom: solid 1.2em white;
	}
	
	
	#titre{
	margin:1.5em 0em 0.5em 0em;
	font-size: 3em;
	}
	
	
	
	
	
	
		/*ABOUT*/
	




.contact{
	padding-top:1em;
}


	.aPhoto{
		z-index:10;
	}
	
	
	
	
	
	
	
}













/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
	

		
#backhome_1{


	background-image: url("../img/bg/etoiles.jpg");
	background-attachment: fixed;
	background-size:cover!important;
	 margin: auto;
	 background-position:center center;
  	background-repeat:no-repeat;
}
	
		h2{
	font-size:9em;
}
	.suis{
		font-size: 5em;
		margin-bottom:0px;
	}
	
	
	/*OVERLAY*/

	.overlayimg h3{
	font-size:2em;
} 
	
.overlayimg p{
	margin:0px!important;
	font-size:1em;
	text-transform: uppercase;
}
	

	
	

	
	

}













/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
	

	
	
	h2{
	font-size:12em;
}
	
	
	.cloud_1{
	bottom:-30em;
}
	
	
	
	
	
	/*NAV*/
	
.navhome{
	justify-content: center;
}
	
		
.navlink{
	text-decoration: none;
	display: flex;
	font-weight:400;
	margin:0px!important;
	padding:0px!important;
}	
	

	
	.navlink a:after{
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #f5bc00;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
	}
	
	.navlink a:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
	
.navlink a{
	  display: inline-block;
  	position: relative;
	text-transform: uppercase;
	color:white;
	
	font-weight: bold;
	}
	
.navlink:nth-child(4){
	text-align: right;
	}
	
.nav{
		padding:1em 3em 1em 3em;
	}
	

	
.navlink a:hover{
text-decoration: none;
	}
	
	
	



	
	
/*JESUIS*/	
	
	

.jesuis{
	color:white;
	line-height: 4em;
}
	
	
.suis{
	font-weight:800;
	font-size: 7em;

}
	
	.imd{
		font-size: 2.5em;
	}



.about{
	font-size: 1.2em;
	line-height: 1.5em;
	margin-right:3em;
	color:white;
	font-weight:600;
}
	
	
	
	
/*ABOUT*/
	
	.sous_titre{
	font-size: 2em;
}



	
	
	
	
	
	
	
	
	
	
	
/*BUZZ*/
	
	
	#legende{
	margin-top:8em;
	margin-bottom:0px;
	padding-bottom:5em;
	color:white;
	font-size:1.5em;
}
	
	
	
.carousel-item-buzz img {
	max-width:90%;
	max-height: 73vh;
	margin: auto;
}
	
	
	
	
	
	
}





@media (min-width: 1800px) {
	
	
.about{
	font-size: 1.2em;
	line-height: 1.5em;
	margin-right:3em;
	color:white;
	font-weight:600;
}
	
	.fauteuil_vide{
	margin-top:8%;
	width:38%;
	}
	
	.suis{
	font-weight:800;
	font-size: 10em;

}






}