/*VARIABLE*/
:root{
  --size-content: 1080px;
  --width-menu:1240px;
  --margin-top-service: 150px;
  --margin-top-section-galerie : 0;

  /*color general*/
  --color-background-jaune: rgb(218,181,30);

  --color-element : rgb(218,181,30);
  --color-white: rgb(255, 255, 255);

  /*Variable menu color*/

  --second-color-menu : rgb(218,181,30);
  --second-color-content: rgb(218,181,30);
 
  
  --main-color: rgba(22,22,22,1);

  /*Color BASE HOVER ACTIVE*/

  --color-base-menu:rgba(255, 255, 255,1);
  --color-hover-menu:rgba(255, 255, 255,1);
  --color-active-menu:rgba(255, 255, 255,1);
  
  --color-element-menu:rgb(255, 255, 255);
  --color-social:rgba(255, 255, 255,0.6);
  --color-social-hover:rgba(255, 255, 255,1);
}


/*GENERAL********************************************************************************************/
/****************************************************************************************************/
/****************************************************************************************************/

/*AJOUTS DES FONTS***********************************************************************************/

@font-face {
  font-family: "Montserrat-light";
  src: url("../fonts/Montserrat-Light.ttf");
 }
 
 @font-face {
  font-family: "Montserrat-regular";
  src: url("../fonts/Montserrat-Regular.ttf");
 }
 
 @font-face {
  font-family: 'Montserrat-bold';
  src: url("../fonts/Montserrat-Bold.ttf");
 }
 
 /******************************************************************************************************/

 @font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?pzyn69');
  src:  url('../fonts/icomoon.eot?pzyn69#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?pzyn69') format('truetype'),
    url('../fonts/icomoon.woff?pzyn69') format('woff'),
    url('../fonts/icomoon.svg?pzyn69#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-social_artstation:before {
  content: "\e900";
  
}
.icon-social_insta:before {
  content: "\e901";
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  overflow:hidden;
}

body{
background:rgba(22,22,22,1);
padding:0;
margin:0;

}

ul{
  margin:0;
  display:block;
}

li{list-style-type: none;}

a{text-decoration:none;}

h1{
  font-family:"Montserrat-regular";
  font-size:18px;
  color:var(--color-white);
  letter-spacing: 2px;
}

h2{
  font-family:"Montserrat-light";
  font-size:14px;
  color:var(--color-white);
  letter-spacing:3px;
}

p{
  font-family:"Montserrat-light";
  font-size:12px;
  line-height:1.6em;
  letter-spacing:0.1em;
  color:var(--color-white);
}

img{width:100%;}


/*centrer verticalement les pages*/
.vertical-center{
   display: flex;
   align-items: center;
   justify-content: center;
}

.section{
  margin:0;
  padding:0;
}

/****************************************************************************************************/
/****************************************************************************************************/
/****************************************************************************************************/
/****************************************************************************************************/


/*DEGRADE PAGES///////////////////////////////////////////////////////////////////////////////////////*/



.section-services{
  background: linear-gradient(rgba(20,20,20,1),rgba(22,22,22,1));
  z-index:-1;
}

.section-contact{
  background: linear-gradient(rgba(22,22,22,1),rgba(18,18,18,1));
}

/****************************************************************************************************/
/****************************************************************************************************/
/****************************************************************************************************/
/****************************************************************************************************/

/*LOADER*/

.bloc_loader{
  position:fixed;
  width:100%;
  height:100%;
  background:#252525;
  z-index:9999;
}






/*MENU********************************************************************************************/
/****************************************************************************************************/
/****************************************************************************************************/
#menu-content{
  position: fixed;
  width: 100%;
  height: 90px;
  margin: 0;
  z-index: 1000;
  
}

/*couleur de fond pour l'animation du menu*/
#menu-content #color-background{
  position:absolute;
  width:100%;
  height:90px;
  top:0;
  left:0;
  opacity:0;
  background-color:var(--second-color-menu);
  z-index:-1000;
}

#menu{
  position:relative;
  width:var(--width-menu);
  margin:0 auto 0 auto;
  padding:0;
  display:flex;
  justify-content: space-between;
  align-items:center;
 
}

.brand-title{
  width:50px;
  margin-top:3px;
  transition:.5s; 
}

#menu .brand-title.deploy{
  transform: translateX(-180px);
}



#menu ul{
  margin:0;
  padding:10px 0 10px 0;
  display:flex;
}

#menu ul li{
  margin-right:50px;
}

#menu ul li:nth-child(4){
  margin-right:0;
}

#menu li a{
  font-family:"Montserrat-regular";
  color:var(--color-base-menu);
  letter-spacing:3px;
  font-size:12px;
  position:relative;
  display:block;
}

#menu li a:hover{
  color:var(--color-hover-menu);
}

#menu li a.active{
  color:var(--color-active-menu);
}

#menu li a .elem-active{
  position:absolute;
  width:6px;
  height:10px;
  top:2px;
  left:-20px;
  background-color:var(--second-color-menu);
  opacity:0;
  transform-origin: top right;
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition : all 0.3s ease-in-out;
}

#menu li a:hover .elem-active{
  opacity:1;
  transform: scaleX(1);
}

#menu li a.active .elem-active{
  opacity:1;
  transform: scaleX(1);
}


/*icones sociales/////////////////////////////////////////////////////////////*/

/*Barre de separation menu icone sociales*/

.trait-separation{
  width:2px;
  height:15px;
  margin:0 50px 0 50px;
  background-color:var(--color-element-menu);
}

#menu ul li:nth-child(6), #menu ul li:nth-child(7){
  margin-right:25px;
  margin-top:-3px;
}

#menu ul li:last-child{
  margin-right:0;
  margin-left:0;
}

#menu li i{
  font-size: 20px;
  color:var(--color-social);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#menu li i:hover{
  color:var(--color-social-hover);
  cursor:pointer;
}

/******************************************************************************/


/*FOOTER**********************************************************************************************/

footer{
  position:absolute;
  bottom: 0px;
  height:70px;
  width:100%;
  text-align:center;
  background-color:#1b1b1b;
  display:flex;
  align-items: center;
  justify-content: center;
  }
  
footer .bt-mention{
  font-family:"Montserrat-regular";
  color:var(--color-element);
  letter-spacing:3px;
  font-size:12px;
  padding-bottom:2px;
}

footer p{
  font-family:"Montserrat-regular";
  color:var(--color-white);
  letter-spacing:3px;
  font-size:12px;
}

.bt-top{
  display:block;
  position:absolute;
  right:22px;
}

.bt-top a{
  opacity:1;
}



/*****************************************************************************************************************/
/*****************************************************************************************************************/
/*****************************************************************************************************************/
/*****************************************************************************************************************/




/*PAGE ACCUEIL****************************************************************************************/

.section-accueil{
  background: linear-gradient(rgba(16,16,16,1),rgba(20,20,20,1));
}

#content-accueil{
  width:600px;
  margin:0 auto 0 auto;
  position:relative;
  display:flex;
  flex-direction:column;
}

#title-accueil{
  width:75%;
  padding:0;
  margin:0 auto 60px auto;
}

/*bloc a propos de moi*/

#about-me{
  width:100%;
  height:auto;
  text-align:justify;
}

#about-me h2{
  position:relative;
  display:block;
}

/*carré jaune a la droite du titre*/

#about-me h2:after{
  content:"\A";
  width:5px;
  height:15px;
  position:absolute;
  right:0;
  top:2px;
  background-color:var(--color-background-jaune);
}

#about-me p{
  font-weight: 100;
  margin-top:16px;
}

/*bouton contact direction ----> page contact*/

.bt-contact{
  display:flex;
  width:100%;
  margin-top:75px;
}

.bt-contact a{
  position:relative;
  font-family:"Montserrat-regular";
  background-color:var(--second-color-menu );
  color:rgb(245, 245, 245);
  padding:12px 30px 12px 30px;
  font-size:0.65rem;
  margin:0 auto 0 auto;
  letter-spacing:0.2em;
  border:none;
  -moz-border-radius:1px;
  -webkit-border-radius:1px;
  -o-border-radius:1px;
  border-radius:1px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition : all 0.3s ease-in-out;
}

.bt-contact a:hover{
  border-radius:2px;
  }

.bt-contact a #text-bt-contact{ 
  position:relative;
  display:block;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition : all 0.3s ease-in-out;
}

.bt-contact a:hover #text-bt-contact{
  transform: translateX(-10px);
}

.bt-contact a #arrow-contact{
  background-image: url(../img/arrow_contact.png);
  position:absolute;
  top:14px;
  right:18px;
  height : 8px;
  width : 14px;
  opacity:0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition : all 0.5s ease-in-out;
}

.bt-contact a:hover #arrow-contact{
    opacity:1;
}


/*************************/

/*picto souris scrolling*/

#mouse{
  background-image: url(../img/mouse.png);
  position:absolute;
  width:21px;
  height:35px;
  bottom:50px;
  left:50%;
  margin-left:-10px;
  
}

/*****************************************************************************************************************/
/*****************************************************************************************************************/
/*****************************************************************************************************************/
/*****************************************************************************************************************/

/*PAGE SERVICE****************************************************************************************/

.section-services{
  margin:0;
  padding:0;
}

#content-services{
  
  width:100%;
  margin:0 auto 0 auto;
  padding-top:180px;
}

/*titre + triangle jaune (::after ) /////////////////////////////////////*/

#content-services .title-services{
  position:relative;
  width:100%;
  height:48px;
  background-color:var(--second-color-menu );
  margin-bottom: 6px;
  text-align:center;
  padding:14px 0 0 0;
}

#content-services .title-services::after{
  content: '';
  position: absolute;
  left: 50%;
  top:100%;
  margin-left:-19px;
  height : 0;
  width : 0;
  border-top : 12px solid var(--second-color-menu );
  border-right : 19px solid transparent;
  border-left : 19px solid transparent;
  clear: both;
}

/**************************************************/

#bg-bloc-services{
  border-top: 2px solid #454545;
  border-bottom: 2px solid #454545;
  position:relative;
  padding-bottom:160px;
  z-index:-1;
  height:auto;
}

#bg-bloc-services::after{
  content:url(../img/arrow_cadre.png);
  position:absolute;
  left:50%;
  top:-2px;
  margin-left:-32px;
}

#bloc-services{
  width:var(--size-content);
  /*width:62%;*/
  margin-top:90px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:0;
  display: flex;
  justify-content: space-between;
}

#bloc-services .service{
  width:23.5%;
  text-align:center;
  background:rgb(26, 26, 26);
  padding:30px 18px 0 25px;
  height:360px;
}

#bloc-services .service img{
  width:125px;
}

#bloc-services .bloc-info-service{
  width:100%;
  height:auto;
  
  border-radius: 4px;
  padding:0;
  font-family:"Montserrat-regular";
}

#bloc-services .bloc-info-service h2{
  margin-top:20px;
  font-size:16px;
  text-align:center;
  margin-bottom:25px;
}

#bloc-services .bloc-info-service li{
  color:#ffffff;
  position:relative;
  text-align:left;
  padding:0 0 0 14px;
  font-size:12px;
  margin-top:15px;
}

#bloc-services .bloc-info-service li:before{
  content:"";
  position:absolute;
  width:6px;
  height:10px;
  background-color: #dab51e;
  top:3px;
  left:0;
}


/*PAGE GALERIE***************************************************************************/

#content-galerie{
  width:var(--size-content);
  height:auto;
  position:relative;
  margin:0 auto 0 auto;
}

#content-galerie #barre-jaune{
  height:5px;
  width:100%;
  background-color:#dab51e;
  margin-bottom:8px;
}

#content-galerie .bloc-menu-galerie{
  width:100%;
  height:60px;
  border-top: 5px solid #dab51e;
  padding:0;
  margin-top:8px;
  display:flex;
  align-items: center;
  justify-content: center;
  
}

#menu-galerie{
  padding:0;
  margin:0 0 0 0;
  display:flex;
  align-items: center;
  height:50px;
}

#menu-galerie li:nth-child(1){
  margin-left:40px;
}

#menu-galerie li a{
  font-family:"Montserrat-regular";
  color:white;
  letter-spacing:3px;
  font-size:13px;
  position:relative;
  font-weight:normal;
  display:block;
  padding:14px 20px 14px 20px;
}
  
#menu-galerie li a:after{
  content:"";
  position:absolute;
  width:100%;
  height:4px;
  top:-6px;
  left:0;
  background:rgba(22,22,22,1);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition : all 0.3s ease-in-out;
  transform-origin: top right;
  transform: scaleY(0);
  opacity:1;
}

#menu-galerie li a:hover:after{
  content:"";
  position:absolute;
 background:#dab51e;
  transform: scaleY(1);
}

#menu-galerie li a.slide-active:after{
  content:"";
  position:absolute;
  background:#dab51e;
  transform: scaleY(1);
}

/**************************************************/

#main-galerie{
  width:100%;
  height:543px;
  margin:0;
  display:flex;
  padding:0;
  box-sizing: border-box;
  overflow:hidden;
}

.col-galerie-5{
  width:20%;
  height:auto;
  margin-left:8px;
  padding:0;
  overflow:hidden;
  background-color:#252525;
  box-sizing: border-box;
}

.col-galerie-6{
  width:16,666%;
  height:auto;
  margin-left:8px;
  padding:0;
  overflow:hidden;
  background-color:#252525;
  box-sizing: border-box;
}

.col-galerie-5 img, .col-galerie-6 img{
  width:100%;
  height:auto;
  display:block;
  opacity:0.8;
  position:relative;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition : all 0.3s ease-in-out;
  display:block;
}

.col-galerie-5 img:hover, .col-galerie-6 img:hover{
  opacity:1;
}

.col-galerie-5:first-child,.col-galerie-6:first-child{
  margin-left:0;
}

#main-galerie .img-galerie:last-child{
  margin-right:0;
}


/*GALERIE MOBILE********************************************************************************************/
/**********************************************************************************************************/

#content-galerie-mobile{
  display:none;
  flex-wrap: wrap;
  width:100%;
  height:auto;
  position:relative;
  border-top: 2px solid #454545;
  border-bottom: 2px solid #454545;
  
}

#content-galerie-mobile:before{
  content:"";
  position:absolute;
  left:0;
  top:-24px;
  height:10px;
  width:100%;
  background-color:#dab51e;
}

#content-galerie-mobile:after{
  content:"";
  position:absolute;
  left:0;
  bottom:-24px;
  height:10px;
  width:100%;
  background-color:#dab51e;
}

#content-galerie-mobile .img-galerie-mobile{
  width:25%;
  height:auto;
  padding:0;
  margin:0;
  position:relative;
} 

#content-galerie-mobile .img-galerie-mobile::after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

#content-galerie-mobile .img-galerie-mobile a img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}




/********************************************************************************************************/


/*PAGE CONTACT*******************************************************************************************/

#main-contact{
   /*width:32%;*/
   width:620px;
  margin:0 auto 0 auto;
  position:relative;
  padding:200px 0 0 0;
}

#main-contact .bloc-title{
  position:relative;
  width:100%;
  height:60px;
  background-color:#dab51e;
  margin-bottom: 6px;
  text-align:center;
  z-index:10;
}

#main-contact .bloc-title::after{
  content: '';
  position: absolute;
  left: 50%;
  top:100%;
  margin-left:-19px;
  height : 0;
  width : 0;
  border-top : 12px solid #dab51e;
  border-right : 19px solid transparent;
  border-left : 19px solid transparent;
  clear: both;
}

#main-contact .bloc-title .title{
  line-height:60px;
}

#main-contact .content{
  background-color:#1b1b1b;
  border: 2px solid #454545;
  position:relative;
}

#main-contact .content::after{
  content:url(../img/arrow_cadre.png);
  position:absolute;
  left:50%;
  top:-2px;
  margin-left:-32px;
}

#main-contact .content p{
  width:80%;
  padding:50px 0 10px 0;
  margin:0 auto;
}

/*FORMULAIRE***********************************************************************************/

form{
  display:flex;
  flex-direction:column;
}

input[type=text],input[type=email]{
  background-color:transparent;
  border:none;
  border-bottom:1px solid #323232;
  width:68%;
  margin:0 auto;
  font-family:"Montserrat-light";
  margin-top:20px;
  height:42px;
  color: white;
  -webkit-transition: border-bottom 0.5s;
  -moz-transition: border-bottom 0.5s;
  transition: border-bottom 0.5s;
}

textarea{
  background-color:transparent;
  border:none;
  border-bottom:1px solid #323232;
  width:68%;
  margin:0 auto;
  font-family:"Montserrat-light";
  height:20px;
  margin-top:20px;
  color: white;
  -webkit-transition: border-bottom 0.5s;
  -moz-transition: border-bottom 0.5s;
  transition: border-bottom 0.5s;
  padding-top:15px;
}

input::placeholder,textarea::placeholder {
  color: #dadada;
  line-height:1.8em;
  letter-spacing:0.1em;
}

input:focus,textarea:focus {
  border-bottom:1px solid #505050;
  outline: none;
  line-height:1.8em;
  letter-spacing:0.1em;
}

input.erreur::placeholder, textarea.erreur::placeholder {
  color: rgb(202, 141, 141);
}

input.erreur, textarea.erreur {
  border-bottom-color: rgb(182, 36, 36);
}

#success-message{
  position:relative;
  width:80%;
  text-align:left;
  font-family:"Montserrat-regular";
  line-height:1.5em;
  letter-spacing:0.1em;
}

#success-message.erreur {
  font-family:"Montserrat-regular";
  font-size:12px;
  padding: 10px 14px 10px 18px;
  color: rgb(202, 141, 141);
  background-color: rgba(219, 74, 49, 0.6);
  margin: 0 auto 40px auto;
  border-radius:3px;
}

#success-message.success {
  font-family:"Montserrat-regular";
  font-size:12px;
  padding: 15px 0 15px 65px;
  color: rgb(241, 241, 241);
  background-color:#50cf70;
  margin: 0 auto 40px auto;
  position:relative;
  border-radius:3px;
  
}

#success-message.success::before {
  content:url(../img/picto_succes.png);
  width:30px;
  height:30px;
  position:absolute;
  top:9px;
  left:15px;
  
}

/*STYLE LORS D4UN REMPLISSAGE AUTOMATIQUE*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
      -webkit-box-shadow: 0 0 0 30px #1b1b1b inset !important;
      -moz-box-shadow: 0 0 0 30px #1b1b1b inset !important;
      box-shadow:0 0 0 30px #1b1b1b inset !important;
}

input:-webkit-autofill{
      -webkit-text-fill-color: white !important;
}

::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome 56, Safari 9 */
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */

/* Focus */
*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome 56, Safari 9 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */

/******************************************/


/******************************************/

/*FORM ERROR******************************************************************************************************/µ



.error{
  color:white;
}

/*CLASS POUR LA HEIGHT AUTO DU TEXTAREA*/
.animated {

vertical-align:top;
min-width:68%;
max-width:68%;
-webkit-transition: height 0.2s;
-moz-transition: height 0.2s;
transition: height 0.2s;
resize:none;

}

/******************************************/

/*BOUTON ENVOYER****************************************************************************************/
.bt_submit{
  position:relative;
  background-color:#dab51e;
  color:white;
  padding:15px 35px 15px 34px;
  font-size:12px;
  margin:45px auto 45px auto;
  border:none;
  cursor:pointer;
  display: flex;
   justify-content: center;
  -webkit-transition: border-radius 0.3s ease-in-out;
  -moz-transition: border-radius 0.3s ease-in-out;
  -o-transition: border-radius 0.3s ease-in-out;
  transition : border-radius 0.3s ease-in-out;
  transform:scale(1);
}

.bt_submit:hover{
  border-radius:3px;
}

.bt_submit:active {
  transform:scale(0.99);
}

.bt_submit #text-bt-submit{
  display:inline-block;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition : all 0.3s ease-in-out;
  
}

.bt_submit:hover #text-bt-submit{
  transform: translateX(-10px);
  position:relative;
}

.bt_submit #picto-letter{
  
  position:absolute;
  top:12px;
  right:16px;
  height : 20px;
  width : 20px;
  opacity:0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition : all 0.5s ease-in-out;
}

.bt_submit:hover #picto-letter{
    opacity:1;
}

/********************************************************************************************************************/

/*DOTS*/

#fp-nav ul,
.fp-slidesNav ul {
  margin: 0 10px 0 0;
  padding: 0;
}
#fp-nav ul li,
.fp-slidesNav ul li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 15px 0 0 0;
    position:relative;
}
.fp-slidesNav ul li {
    display: inline-block;
}

#fp-nav ul li a,
.fp-slidesNav ul li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{
    height: 14px;
    width: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 100%;
 }

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 8px;
    width: 8px;
    border: 0;
    background: #e2e2e1;
    left: 50%;
    top: 50%;
    margin: -4px 0 0 -4px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{
    width: 10px;
    height: 10px;
    margin: -5px 0px 0px -5px;
}


.fp-controlArrow{
  display:none;
}

/*MENTIONS LEGALES///////////////////////////////////////////////////////////////////////*/

#body-mention{
  position:relative;
  height:auto;
  padding-bottom:100px;
}

footer #bt-top-mention{
  margin:0 auto;
  display:block;
}

#bande-titre{
  width:100%;
  height:90px;
  background-color:#dab51e;
}

#bloc-titre-mention{
  width:40%;
  display:flex;
  align-items:center;
  height:90px;
  margin:0 auto;
}

#bande-titre .brand-title-mention{
  width:40px;
  margin-right:30px;
}

#bande-titre h1{
  margin-top:0;
  font-size:22px;
}

#bande-titre a{
  font-family:"Montserrat-regular";
  color:white;
  letter-spacing:3px;
  font-size:12px;
  position:relative;
  font-weight:bolder;
  margin-left: auto;
}

#mention-content{
  padding:90px 0 45px 0;
  width:40%;
  margin:0 auto;
  
}

#mention-content h2{
  font-size:16px;
  color:#dab51e;
  margin-bottom:20px;
}

#mention-content p{
  text-align:justify;
}

footer{
  display: flex;
  justify-content: center;
  align-items: center;
}



/*MENU MOBILE***************************************************************************/

#menu-mobile{
  position:fixed;
  top:0;
  right:-180px;
  width:180px;
  height:100%;
  background:rgba(22,22,22,1);
  border-left:2px solid rgb(61, 61, 61);
  z-index:9999; 
  transition: .5s;
  display:none;
}



#menu-mobile.deploy{
  right:0;
}

.wrapper{
  left:0;
  transition:.5s; 
  position:relative; 
}

.wrapper.deploy{
  left:-180px;
}



#menu-mobile ul{
  flex-direction: column;
  width:100%;

}

#menu-mobile ul li{
  text-align:left;
  width:100%;
  
  border-bottom:4px solid rgba(22,22,22,1);
}

#menu-mobile ul li:first-child{
  margin-top:23px;
}

#menu-mobile li a{
  font-family:"Montserrat-regular";
  color:white;
  letter-spacing:3px;
  font-size:12px;
  padding:15px 0 15px 35px;
  display:block;
  width:100%;
  transition:.5s; 
}

#bloc-icon-social{
 position:absolute;
 left:80px;
 bottom:20px;
 display:flex; 
}

#bloc-icon-social i:first-child{
  margin-right:20px;
}


#bloc-icon-social .icon-social_artstation, #bloc-icon-social .icon-social_insta{
  color:white;
  font-size:22px;
}

#menu-mobile li a:hover{
  background-color:rgba(218,181,30,1);
}

#menu-mobile li a.active-mobile{
  background-color:rgba(218,181,30,1);
}

/*bouton pour le menu mobile*/
.toggle-button{
  position:absolute;
  top:25px;
  left:-66px;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  width:46px;
  height:46px;
  border-radius:40px;
  background:transparent;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition : all 0.5s ease-in-out;
  cursor:pointer;
}


.toggle-button .bar{
  height:3px;
  width:30px;
  background-color:white;
  border-radius:10px;
  transform:translateY(21px) translateX(10px);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition : all 0.3s ease-in-out;
}


.toggle-button.is-opened .bar{
  background:transparent;
}

.toggle-button.is-opened .bar:before{
  transform:translateY(0) rotate(45deg);
  width:25px;
}

.toggle-button.is-opened .bar:after{
  transform:translateY(0) rotate(-45deg);
  width:25px;
}



.toggle-button .bar:before,.toggle-button .bar:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:3px;
  width:30px;
  background-color:white;
  transform-origin: 50% 50%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition : all 0.3s ease-in-out;
  
}

.toggle-button .bar:before{
  transform:translateY(-10px);
}

.toggle-button .bar:after{
  transform:translateY(10px);
}


/**********************************************************************************/

.bt-contact-mobile{
  display:none;
  width:100%;
  margin-top:75px;
}

.bt-contact-mobile a{
  position:relative;
  font-family:"Montserrat-regular";
  background-color:var(--second-color-menu );
  color:rgb(245, 245, 245);
  padding:12px 30px 12px 30px;
  font-size:0.65rem;
  margin:0 auto 0 auto;
  letter-spacing:0.2em;
  border:none;
  -moz-border-radius:1px;
  -webkit-border-radius:1px;
  -o-border-radius:1px;
  border-radius:1px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition : all 0.3s ease-in-out;
}


.bt-top-mobile{
  display:none;
  position:absolute;
  right:22px;
}

/*style des pages qui affichent les template web*/

#content-galerie-web{
  width:60%;
  margin:0 auto 50px auto;
}

#content-galerie-web-3{
  width:35%;
  margin:0 auto 50px auto;
}

#content-galerie-web-6{
  width:40%;
  margin:0 auto 50px auto;
}

#bt-close-web{
  display:block;
  position:fixed;
  top:28px;
  right:30px;
  width:50px;
  height:50px;
  
  z-index:1000;
}

#bt-close-web-mobile{
  display:none;
  position:fixed;
  top:26px;
  right:30px;
  width:50px;
  height:50px;
  z-index:1000;
}

.title-web-big{
  margin:10px auto 20px auto;
  width:60%;

  padding:16px 0 16px 40px;
  background-color:var(--color-element);
}

#bloc-galerie-web img{
  width:100%;
  border: 1px solid rgb(51, 51, 51);
}

.page-web{
  position:relative;
}

.bt-top-web{
  
  position:absolute;
  right:40px;
  bottom:0;
  width:26px;
  
}



/*MEDIA QUERIES//////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/****************************************************************************************************************************/
/****************************************************************************************************************************/
/****************************************************************************************************************************/


/*Labtop =<1600px
  Tablet landscape =<1024px
  table =<768px
  Mobile =<480px */

 
 

  @media screen and (min-width: 1240px) and (max-width: 1280px)  {
    

    /*page mention-legale*/
     
      #mention-content{
        width:60%;
      }
    
      #bloc-titre-mention{
        width:60%;
      }
        
    }
      
    
    @media screen and (min-width: 1080px) and (max-width: 1240px){
    
      /*MENU PRINCIPALE*/
      
      #menu{
        width:90%;
      }
       
      /*reduction de l'espace entre les 4 premier elements du menu*/
      #menu ul li:nth-child(-n+3){
        margin-right:40px;
      }
    
      .trait-separation{
        margin:0 40px 0 40px;
      }
      
      /*PAGE SERVICE*/
     
      #bloc-services{
        width:86%;
      }
    
      /*PAGE GALERIE*/
    
      #content-galerie{
        width:86%;
      }
    
      #main-galerie{
        height:auto;
      }
    
      #menu-galerie li a:after{
        top:-6px;
      }
    
     /*MENTION LEGALES*/
     #mention-content{
      width:60%;
      }
    
      #bloc-titre-mention{
        width:60%;
      }
    
    }


    /****************************************************************************************************************************/
/****************************************************************************************************************************/
/****************************************************************************************************************************/
    @media screen and (min-width: 900px) and (max-width: 1080px){
    
      /*MENU PRINCIPALE*/
      #menu{
        width:90%;
      }
       
      /*reduction de l'espace entre les 4 premier elements du menu*/
      #menu ul li:nth-child(-n+3){
        margin-right:40px;
      }
    
      .trait-separation{
        margin:0 40px 0 40px;
      }
    
      /*PAGE SERVICE*/
     
      #bloc-services{
        width:94%;
      }
    
      /*PAGE GALERIE*/
    
      #content-galerie{
        width:94%;
      }
      
      #main-galerie{
        height:auto;
      }
    
      #menu-galerie li a:after{
        top:-6px;
      }
      
      /*DoTS*/
      #fp-nav ul,.fp-slidesNav ul {
      display:none;
      }
    
    }

    /****************************************************************************************************************************/
/****************************************************************************************************************************/
/****************************************************************************************************************************/
    
    @media screen and (max-width: 900px){
      /*PAGE WEB*/

      #content-galerie-web{
        width:78%;
        margin:0 auto 50px auto;
      }

      #content-galerie-web-3{
        width:76%;
        margin:0 auto 50px auto;
      }
      
      #content-galerie-web-6{
        width:76%;
        margin:0 auto 50px auto;
      }

      #bt-close-web{
        display:none;
       
      }
      .title-web-big{
        
        width:78%;
        margin:10px auto 20px auto;
        
      
        padding:16px 0 16px 40px;
        
        background-color:var(--color-element);
      }
      
      #bt-close-web-mobile{
        display:block;
        position:fixed;
        top:26px;
        right:10px;
        width:50px;
        height:50px;
        z-index:1000;
      }

      .bt-top-web{
        display:block;
        position:absolute;
        right:22px;
        
        
      }
      
      
    
    /*Cacher la scrollbar*/
    ::-webkit-scrollbar {
        display: none;
        }
    
    /*redimensionnement des pages pour mobile*/
    
    /*FOOTER*/
    .bt-top{
      display:none;
    }
    
    .bt-top-mobile{
      display:block;
    }
    
    .trait-separation{
      margin:0 15px 0 15px;
    }
    
    
    
    /*MENU*/
    
    #menu-mobile{
      display:flex;
    }
    
    #menu-content #color-background{
      
      opacity:1;
      -moz-box-shadow: 0 0 15px rgba(27, 27, 27, 0.8);
      -webkit-box-shadow: 0 0 15px rgba(27, 27, 27, 0.8); 
      box-shadow: 0 0 15px rgba(27, 27, 27, 0.8);
    }
    
    #menu{
      width:100%;
      /*background-color:#dab51e;*/
      padding:0;
      margin:0;
      height:80px;
    }
    
    #menu .brand-title{
      
      margin-left:24px;
      margin-top:13px;
    }

   
     
    /*CACHER LE MENU PRINCIPALE*/
    #menu ul{
      display:none;
    }
    
    .wrapper{
      overflow:hidden;
    }
     
    
      /*SECTION ACCUEIL*/
      
      .section-accueil{
        padding:140px 0 120px;
      }
    
      .bt-contact-mobile{
        display:flex;
      }
    
      .bt-contact{
        display:none;
      }
    
      #mouse{
        display:none;
      }
    
      /*SECTION SERVICE*/
      
      .section-services{
        padding:140px 0 0 0;
      }
    
      #content-services{
        padding:0;
        
      }
    
      #content-services .title-services{
        z-index:10;
      }
      
      #bg-bloc-services{
        z-index:0;
        padding:0 0 0 0;
      }
      
      #bloc-services{
        width:100%;
        height:auto;
        display:flex;
        flex-direction: column;
        margin-bottom:20px;
        margin-top:65px;
      } 
      
      #bloc-services .service{
        width:70%;
        text-align:left;
        padding:0;
        display:flex;
        justify-content: baseline;
        margin:25px auto 25px auto;
        align-items: center;
        background:rgb(26, 26, 26);
        border-radius:10px 3px 3px 10px;
        height:auto;
      }
      
      #bloc-services .service img{
        width:125px;
        height:125px;
        border-radius:6px 0 0 6px;
        background:rgb(218,181,30);
      }
    
      #bloc-services .bloc-info-service{
        margin-left:30px;
      }
    
      #bloc-services .bloc-info-service h2{
        margin-top:0;
        text-align:left;
        margin-bottom:0;
      }
    
      #bloc-services .bloc-info-service ul{
        margin:0;
      }
    
      #bloc-services .bloc-info-service ul li{
        margin-top:8px;
      }
    
      /*SECTION GALERIE*/
    
      .section-galerie{
        margin-top:0;
        padding:160px 0 160px 0;
      }
    
      /*CACHER LA GALERIE PRINCIPALE*/
      #content-galerie{
        display:none;
      }
    
      /*AFFICHER LA GALERIE MOBILE*/
      #content-galerie-mobile{
        display:flex;
        
      }
     
      
      /*SECTION CONTACT*/
    
      .section-contact{
        padding:140px 0 340px;
        display:flex;
        justify-content: center;
      }

      #bg-bloc-services{
        padding-bottom:50px;
      }
      
      #main-contact{
        padding:0 0 0 0;
      }

      #main-contact .content{
        padding:0 0 40px 0;
      }

      #main-contact .content p{
        width:80%;
        padding:60px 0 20px 0;
        margin:0 auto;
      }

      input[type=text],input[type=email]{
        margin-top:20px;
         
       }
 
       textarea{
        margin-top:20px;
        
       }

      .bt_submit{
        margin:60px auto 20px auto;
      }
      
      
      
      /*MENTION LEGALE*/
      #mention-content{
        width:85%;
      }
    
      #bloc-titre-mention{
        width:85%;
      }
    
    }


    /****************************************************************************************************************************/
/****************************************************************************************************************************/
/****************************************************************************************************************************/
    
    @media screen and (max-width :640px){

      #bt-close-web-mobile{
        display:block;
        position:absolute;
        top:28px;
        right:0;
        width:50px;
        height:50px;
        z-index:1000;
      }

      .bt-top-web{
        
        position:absolute;
        right:50%;
        bottom:-32px;
        transform:translateX(13px);
      }

     .title-web-big{
        
        width:100%;
        margin:10px auto 20px auto;
        
      
        padding:16px 0 16px 40px;
        
        background-color:var(--color-element);
      }
      

      #body-mention footer{
        padding-top:20px;
      }
      
      footer{
        display:flex;
        flex-direction:column;
        align-items: center;
        
        height:auto;
        padding-bottom:20px;
      }

      

      footer .bt-mention{
        margin-bottom:5px;
        color:var(--color-element);
      }

      footer .bt-top-mobile{
        position:relative;
        margin:20px auto;
        right:0;
      }

      .trait-separation{
        display:none;
      }

      #content-accueil{
        width:85%;
      }

      #title-accueil{
        width:100%;
      }

      #bloc-services .service{
        background-color:none;
        display:flex;
        flex-direction: column;
        justify-content: center;
        width:70%;
        padding: 40px 20px 40px 20px;
      }

      #bloc-services .bloc-info-service{
        width:auto;
        
        margin-left:0;
        }
      

      #bloc-services .bloc-info-service h2{
        text-align:center;
        margin-top:20px;
        margin-bottom:20px;
      }

      #bloc-services .bloc-info-service li{
        text-align:center;
        color:var(--color-element);;
      }

      #bloc-services .bloc-info-service li:before{
        display:none;
      }

      #bloc-services .service img{
        border-radius:0 0 0 0;
        background:none;
      }


      #content-galerie-mobile .img-galerie-mobile{
        width:50%;
        height:auto;
        padding:0;
        margin:0;
        position:relative;
      } 

      /*SECTION CONTACT*/
    
      .section-contact{
        padding:200px 0 280px;
        display:flex;
        justify-content: center;
      }


      
      #main-contact{
        width:100%;
        padding:0 0 0 0;
      }

      #main-contact .content{
        border-left:none;
        border-right:none;
        
      }

    
      #main-contact .content p{
        width:80%;
        
      }

      input[type=text],input[type=email]{
       width:80%;
        
      }

      textarea{
        width:80%;
       
      }

      .animated {

        
        min-width:80%;
        max-width:80%;
        
        
        }

      


    }