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

*{
	margin:0;
	padding:0;}
	
html, body{
	width:100%;
	height:100%;
	min-height:100%;
	-webkit-font-smoothing: antialiased;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-size: 100%;
	
	color:#000;
	  font-family: "Lato", sans-serif;
  font-weight: 400;


}


a{text-decoration:none;
color: #000;}
	
img{vertical-align: middle;}



input[type=text], input[type=button], input[type=number], input[type=submit] {
-webkit-appearance: none;
-webkit-border-radius: 0;
}

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

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

}

/*
https://vw.joealden.com/ converter px to vw
1440 breakpoint
*/


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

GENERAL

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.centrage{
    max-width: 1400px;
    position: relative;
    margin: auto;
    box-sizing: border-box;
    padding: 0 60px;
}



.contenu,
footer{
    
 
}


@media screen and (min-width: 1000px) {
.contenu,
    footer {max-width: 700px;
    width: 50%;
    float: left;
    margin-left: 50%;
       padding-right: 60px;
    box-sizing: border-box;
  }   
    
}


@media screen and (max-width: 1000px) {
.contenu,
    footer {
    width: 100%;
    float: left;
           padding:0 60px;
    box-sizing: border-box;
  
}   
}

@media screen and (max-width: 660px) {
.contenu,
    footer { padding:0 30px;}    
    
}



header,
main{
    width: 100%;
    position: relative;
float: left;
}


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

TYPO

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (min-width: 1400px) {
nav ul li,
.chantier h4{
    font-size: 24px;
}


.intro-double h2,
.intro h2,
.liste-projet h3,
.avis h2{
    font-size: 56px;
}

p{
    font-size: 16px;
    line-height: 24px;
    
}

p strong{
      font-family: "Lato", sans-serif;
  font-weight: 700;
}


.nom h2,
.coords p{
    font-size: 120px;
}

.nom h3{
    font-size: 148px;
}


.mail p{font-size: 65px}


.mail h4{
    font-size: 87px;
}
}


@media screen and (min-width: 1000px) and (max-width: 1400px) {
nav ul li,
.chantier h4{
    font-size: 1.7142857142857144vw/*24px*/;
}


.intro-double h2,
.intro h2,
.liste-projet h3,
.avis h2{
    font-size: 4vw/*56px*/;
}

p{
    font-size: 14px/*16px  1.1428571428571428vw*/;
    line-height: 24px;
    
}

p strong{
      font-family: "Lato", sans-serif;
  font-weight: 700;
}


.nom h2,
.coords p{
    font-size: 8.571428571428571vw/*120px*/;
}

.nom h3{
    font-size: 10.571428571428571vw/*148px*/;
}


.mail p{font-size: 4.642857142857143vw;/*65px*/}


.mail h4{
    font-size:6.214285714285714vw/*87px*/;
}
}


@media screen and (max-width: 1000px) {
nav ul li,
.chantier h4{
    font-size: 24px;
}
    
     nav ul li{
        font-size: 32px;
    }   


.intro-double h2,
.intro h2,
.liste-projet h3,
.avis h2{
    font-size: 56px;
}

p{
    font-size: 14px;
    line-height: 22px;
    
}

p strong{
      font-family: "Lato", sans-serif;
  font-weight: 700;
}

.nom h2,
.coords p{
    font-size: 8.571428571428571vw/*120px*/;
}

.nom h3{
    font-size: 10.571428571428571vw/*148px*/;
}


.mail p{font-size: 4.642857142857143vw;/*65px*/}


.mail h4{
    font-size:6.214285714285714vw/*87px*/;
}
    
    .hamburger__container p{
        font-size: 18px}    
}


@media screen and (max-width: 640px){
.nom h2{
    font-size: 50px/*120px*/;
}

.nom h3{
    font-size: 70px/*148px*/;
}

.coords p,
.mail p{font-size: 30px;/*65px*/}


.mail h4{
    font-size:40px/*87px*/;
}    
    
    
    
    }




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

HEADER

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


@media screen and (min-width: 1000px){
header{
    width: 100%;
  
    position: fixed;
    top: 0;
    left: 0;
    background-color: #FFF;
    height: 164px;
    z-index: 100;

    padding-top: 10px;
}
}


@media screen and (max-width: 1000px){
header{
    width: 100%;
  
    position: relative;
    top: 0;
    left: 0;
    background-color: #FFF;
    height: 18vw;
    z-index: 100;

    padding-top: 12px;
}
}

header .logo,
.nav__container .logo{
    width: 50%;
    text-align: center;
    float: left;
    max-width: 700px;
    box-sizing: border-box;
    padding-right: 20px;
    position: relative;
}

.nav__container .logo{
    margin-top: 10px;
    margin-left: 30px;
}


header .logo img,
.nav__container .logo img{
    max-width: 360px;
    width: 100%;
}


@media screen and (min-width: 1000px) {
nav{
    float: left;
    position: relative;
    z-index: 999;
    width: 50%;
        max-width: 700px;
    box-sizing: border-box;
    padding-left: 20px;

    top: 100px;
}

nav ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
        position: relative;
    list-style:none;
   /* width: 50%;

    position: absolute;
     right:0;

    bottom: 30px;*/
}

nav ul li{
     font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
    display: inline-block;
    position: relative;
     transition:.3s;
}


nav li a{ transition:.3s;}

nav li a:hover{
    color: #EBBC2B;
     transition:.3s;
}

nav li.active a:hover{
    color: #000;
     transition:.3s;
}

nav li.active a:before{
    content: "";
    width: 18px;
    height: 29px;
    position: absolute;
    top: -60px;
    text-align: center;
    width: 100%;
    background-image: url("images/fleche.svg");
    background-position: center center;
    background-repeat: no-repeat;
     transition:.3s;
}
    
    
 .hamburger__container.mobile,
    .foot-nav,
    .nav__container .logo{
        display: none;
    }     
}








@media screen and (max-width: 1000px) {
    html.noscroll {
        overflow: hidden;
    }

    body.noscroll {
        overflow: visible;
        height: 100%;
    }

    /*.logo,*/ .hamburger__container {
        position: relative;
        z-index: 9999;
    }

 .nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
		z-index:100;
        opacity: 0;
        transition: opacity .3s ease;
		background-color:#FFF;
    }

    .open {
        opacity: 1;
        right: 0;
		z-index:200;
    }

    .nav__container {
        position: absolute;
        /*padding: 80px 20px 30px;*/
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* These 2 below are all the magic: */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav__container .logo{
        width: 90%;
        float: left;
        position: relative;
        float: left;
        text-align: center;
    }
  
    .nav__container .logo img{
        
        max-width: 200px;
        width: 50%;
    }
    
    
nav ul{
    
    width: 100%;
    position: relative;
    margin-top: 120px;
   
    box-sizing: border-box;
    list-style: none;
}    /* */

   
nav ul li{
     font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
    text-align: center;
    position: relative;
    line-height: 60px;
     transition:.3s;
    width: 100%;
}  
    nav ul li a{
        width: 100%;
        text-align: center;
        padding: 10px;
    }
   
    nav li.active a{
        color: #EBBC2B;
    }    
/*
nav li.active a:before{
    content: "";
    width: 27px;
    height: 12px;
    position: absolute;
   top: 0px;
    left: 0px;
    text-align: center;
  
    background-image: url("images/mini-lat.svg");
    background-position: center center;
    background-repeat: no-repeat;
     transition:.3s;
}   */
    
        
    .foot-nav .logo-artsian-foot{
    width: 152px;
    position: relative;
    margin: auto;
}

.foot-nav .logo-artsian-foot img{
    width: 100%;
}
    
    
}







.hamburger__container {
    display: block;
	width:36px;
	height:36px;
	padding:10px;
    cursor: pointer;
    margin-left: auto;
	border:none;
	background-color:transparent;
    text-align: center;
}


.hamburger__container img,
.hamburger__container p{
    display: block;
    text-align: center;
    width: 100%;
    
}

.hamburger__container img{
    margin-left: 6px;
    
}

.hamburger__container p{
     font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
    margin-top: 10px;
    color: #000;
}



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

GALERIE

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


@media screen and (min-width: 1000px) {
 .picture{
    width: 50%;
    position: fixed;
left: 0;
bottom: 0;
    height: calc(100% - 164px);
   
    box-sizing: border-box;
    padding-right: 20px;
    
  
}   
}

@media screen and (max-width: 1000px) {
 .picture{
    width: 100%;
     height: calc(100vw);
    position: relative;
     float: left;margin-bottom: 60px;


  
   
    
  
}   
}

.picture img{
   /*  width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    object-fit: cover;
    object-position: center center;*/

}

/*slider*/

.slider { float: left; }

.slider .jquery-reslider .slider-block {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 97;
  background-position: 50% 50%;
  background-size: cover;
  opacity: 0;
}

.slider .jquery-reslider .slider-direction {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 45%;
  z-index: 99;
  cursor: pointer;
    display: none;
}

.slider .jquery-reslider .slider-direction.slider-direction-prev {
  left: 20px;
  background: url('../images/prev.png') no-repeat;
        display: none;
}

.slider .jquery-reslider .slider-direction.slider-direction-next {
  right: 20px;
  background: url('../images/next.png') no-repeat;
          display: none;
}

.slider .jquery-reslider .slider-dots {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 30px;
}

.slider .jquery-reslider .slider-dots li {
  width: 30px;
  height: 4px;
  display: inline-block;
  margin: 10px;
    background-color: #EBBC2B;
  cursor: pointer;
     transition:.3s;
}

.slider .jquery-reslider .slider-dots li.active { 
    height: 8px;
     transition:.3s;
    background-color: #ffffff; }
@media screen and (max-width: 768px) {

.slider .jquery-reslider .slider-direction { zoom: .8; }

.slider .jquery-reslider .slider-dots { position: absolute; }
}

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

AVIS

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
/*GESTION DES IMAGES DES FLECHES VIA LE FICHIERS JS*/
	  
.avis{
    width: 100%;
        box-sizing: border-box;
    
   
    position: relative;
    float: left;

}

@media screen and (min-width: 1000px) {
    .avis{padding-left: 20px;
     margin-bottom: 100px;
    } 
    
p.blabla,
.tem{
    margin-bottom: 30px;
}
    
}


@media screen and (max-width: 1000px) {
    .avis{padding-left: 0px;
    margin-top: 30px;
     margin-bottom: 30px;
    }  
    
    p.blabla,
    .tem{
    margin-bottom: 0px;
}
    
}


.owl-carousel-avis{
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1; 

float: left;
  
        display: flex;
  align-items: center;
  justify-content:space-between;
}





  .owl-carousel-avis .owl-stage{
    position: relative;
    -ms-touch-action: pan-Y;
    touch-action: manipulation;
    -moz-backface-visibility: hidden;
    /* fix firefox animation glitch */ }


  .owl-carousel-avis .owl-stage:after{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }


  .owl-carousel-avis .owl-stage-outer{
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px); }


  .owl-carousel-avis .owl-wrapper,
  .owl-carousel-avis .owl-item{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); }


  .owl-carousel-avis .owl-item{
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }


  .owl-carousel-avis .owl-item img{
    display: block;
    width: 100%; }


.owl-carousel .owl-dots.disabled{}

  .owl-carousel-avis .owl-nav .owl-prev,
.owl-carousel-avis .owl-nav .owl-next{
    display: none;
}




  .owl-carousel-avis.owl-loaded {
    display: block; }


  .owl-carousel-avis.owl-loading{
    opacity: 0;
    display: block; }


  .owl-carousel-avis.owl-hidden{
    opacity: 0; }


  .owl-carousel-avis.owl-refresh .owl-item{
    visibility: hidden; }


  .owl-carousel-avis.owl-drag .owl-item{
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }


  .owl-carousel-avis.owl-grab{
    cursor: move;
    cursor: grab; }


  .owl-carousel-avis.owl-rtl{
    direction: rtl; }


  .owl-carousel-avis.owl-rtl .owl-item{
    float: right; }

/* No Js */

.no-js .owl-carousel-avis{
  display: block; }


  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next{
	 }	


.owl-carousel-avis button{
    border: none;
}
	  

.owl-carousel-avis button:focus{
		outline: none;}
	  



.owl-carousel-avis .owl-dots{
    
     
    display: block; 
    
    text-align: left;
 /* text-align: center;
  padding-top: 15px;*/
}

.owl-carousel-avis .owl-dots button.owl-dot{
    position: relative;
 width: 30px;
  height: 4px;
bottom: -2px;
  display: inline-block;
  background:#EBBC2B;
  margin-right: 20px;
      transition:.3s;
}

.owl-carousel-avis .owl-dots button.owl-dot{border-color: #EBBC2B;}


.owl-carousel-avis .owl-dots button.owl-dot.active{
    width: 30px;
  height: 8px;
        top: 0px;
  background-color: #EBBC2B;
      transition:.3s;
}

@media screen and (min-width: 1000px) {

    .owl-carousel-avis .owl-dots{ width: 50%;
         position: relative;  
/*    left:-50%;
      bottom: 80px;*/
}  
    
  
    
}


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

    .owl-carousel-avis .owl-dots{ width: 100%;
         position: relative;  
    left:0%;
      bottom: 0px;
        text-align: center;
        margin-top: 26px;
        margin-bottom: 52px;
}    
    
   
    
}

.owl-carousel-avis .owl-dots button.owl-dot.active{background-color: #000;}


.owl-carousel-avis .owl-dots button.owl-dot:focus{
  outline: none;
}


.owl-carousel-avis .owl-dots button:hover{
    cursor: pointer;
}


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

    .owl-carousel-avis .owl-dots button.owl-dot{ width: 36px;}  
}

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

MAIN

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (min-width: 1000px) {
main{
    margin-top:164px;
}
    

.liste-projet{
      box-sizing:border-box;
    padding-left: 20px;
}    
}


@media screen and (max-width: 1000px) {
main{
    margin-top:0;
}
    

.liste-projet{
      box-sizing:border-box;
    padding-left: 0px;
}    
}


.intro,
.intro-double{
    width: 100%;
    float: left;
      box-sizing:border-box;
  
}

@media screen and (min-width: 740px) {
 .intro,
    .intro-double{  padding-left: 20px;}   
}


@media screen and (max-width: 740px) {
  .intro,
    .intro-double{  padding-left: 0px;}      
}

.intro{
    position: relative;
    margin-bottom: 60px;}

.intro h2,
.intro-double h2,
.liste-projet h3,
.avis h2{
    margin-bottom: 30px;
    color: #EBBC2B;
      font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
}

.avis h2{
        margin-bottom: 0px;
}
.avis p{
        margin-bottom: 30px;
}




.simple-pic img,
.double-pic img{
    width: 100%;
}

.double-pic img:last-child{
    max-width:80%;
    left: 10%;
    position: relative;
    margin: auto;
    margin-bottom: 60px;
}


@media screen and (min-width: 740px) {
.double-pic{
    width: 50%;
    float: left;
}
    
.simple-col p,
.deux-col p{
    width: 50%;
      float: right;
    box-sizing: border-box;
    padding-left: 40px;}    
}

@media screen and (max-width: 740px) {
.double-pic,
    .simple-col p,
.deux-col p{
    width: 100%;
    float: left;
}
    
.double-pic img:last-child{
        max-width: 300px;
    left:calc(50% - 150px);
    }  
    
    
.simple-col p,
.deux-col p{
  padding-left: 0;
  
    }    
}



.simple-col p{
    width: 100%;
     padding-left: 0px;
    
}


.simple-col ul{
    display: block;
    position: relative;
    float: left;
    /*margin-left: 36px;*/
    margin-top: 20px;
     margin-left:  40px;
}

.simple-col li{
      margin-left: 0px;
    text-decoration: none;
    position: relative;
    display: block;
    line-height: 28px;
     transition:.3s;
}


.simple-col li:before{
    position: absolute;
    content: "";
    
    width: 27px;
    height: 12px;
    top: 8px;
    background-image: url("images/mini-lat.svg");
    background-position: center center;
    background-repeat: no-repeat;
     transition:.3s;
    padding-left: -36px;
    left: -40px;
}

.simple-col li a:hover{
    color: #EBBC2B
}

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

LISTE PROJ

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
a .chantier,
.img-alone{
    
    width: calc(100% - 4px);
    position: relative;
    float: left;
    margin-bottom: 50px;
    border: solid 2px #000;
    /*background-color: rgba(235,188,43,1);*/
}

.img-alone{
    border: none;
}

.bgjaune{
    background-color: rgba(235,188,43,1);
}



a .chantier img,
.img-alone img{
    width: 100%;
    max-height: 242px;
    height: 100%;
    object-fit: cover;
    object-position: center;
   
   
}


a:hover .chantier img{
    opacity: 1;
      transition:.3s;
}


a:hover .chantier img.jaune{
    opacity: .5;
      transition:.3s;
}



a .chantier h4{
    width: auto;
     font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
    position: relative;
    text-align: left;
  
    box-sizing: content-box;
    padding-left: 50px;
    padding-top: 20px;
    padding-bottom: 20px;
    
    border-top: solid 2px #000;
    
    text-overflow: ellipsis;
    overflow: hidden;
white-space: nowrap;
}
a .chantier h4 img{
    width: 18px;
    height: 29px;
    left: -20px;
    position: relative;
    border: none;
    transform: rotate(-90deg);
}

a:hover .chantier h4{
    text-align: left;
    color: #EBBC2B;
  
    
}

a .chantier h4,
a:hover .chantier h4,
a .chantier h4 img{
    transition:.3s;
}


a:hover .chantier h4 img{
    transform: rotate(270deg);
    transition:.3s;
}

.pasla{
    opacity: 0;
}

a:hover .chantier img.pasla{
    opacity: 0;
}



.chantier p,
.img-alone p{
    margin-top: 20px;
    margin-bottom: 50px;
}


.image-compare img{
    height: 300px;
}

a .chantier .truelle {
    width: 200px/*382px*/;
    position: absolute;
    left: calc(50% - 100px);
    top: -10px;
}


a .chantier .truelle img{
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 99;
    overflow: visible;
}


/*HACK CHROME*/
/*
@media screen and (-webkit-min-device-pixel-ratio:0) { 
 
a .chantier .truelle {
    width: 382px;
    height: auto;
    position: absolute;
    left: calc(50% - 191px);
}


a .chantier .truelle img{
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 99;
    overflow: visible;
    left: 0;
}
}
*/


/*
a .chantier h4{
   left: 0;
  transition: width .8s ease;
}

a:hover .chantier h4{
    width: 100%;
  transition: width .8s ease;
}*/

/*
.chantier h4:before{
    content: "";
    width: 18px;
    height: 29px;
    position: relative;
    float: left;
    left: 10px;
    background-image: url("images/fleche.svg");
    transform: rotate(-90deg);
    background-position: center center;
    background-repeat: no-repeat;
}

.chantier h4:hover{
    color: #EBBC2B;
    text-align: center;
}

.chantier h4:hover:before{
      background-position: center center;
    background-color: red;
}*/


.icv__circle{
    background-color: #FFF;
    border: solid 3px #000;
}

.icv__arrow-a,
.icv__arrow-b{
    position: relative;

    -webkit-filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0));
    filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0));
    
        filter: none;
    
}

.icv__circle{
    border: none;
}


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

FOOTER

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

footer{
    position: relative;
    text-align: center;
}

footer .logo-artsian-foot{
    width: 152px;
    position: relative;
    margin: auto;
}

footer .logo-artsian-foot img{
    width: 100%;
}

.nom,
.coords,
.mail{
      font-family: "Bebas Neue", sans-serif;
  font-weight: 400;

    width: 100%;
    text-align: center;
}

.nom h2,
.coords p,
.mail p{
    z-index: 10;
    position: relative;
}

.nom h3,
.coords p:last-child,
.mail h4{
    z-index: 2;
        position: relative;
    color: #EBBC2B;
}



@media screen and (min-width: 640px) {
    .nom{
        margin-top: 60px;
    }
    .nom h2,
    .nom h3{
position: relative;
   line-height: 40px
}
    
    .nom h3{  margin-bottom: 130px;}
    .coords p:last-child{
        margin-bottom: 100px;
    }

    .pousse{
        position: relative;
        margin-bottom: 60px;
    }    
    
.simple-col .nom h2,
.simple-col .nom h3{
    line-height: 0px;

}

    
.simple-col .nom h3{
        color: #000;
    z-index: 99;
    
}

    .coords p{
        line-height: 30px;
    }
.coords p:last-child{
position: relative;
  
}

.mail p,    
.mail h4{
     line-height: 30px;
}


}


@media screen and (max-width: 640px) {
.nom h2,
.nom h3{
position: relative;
line-height: 30px;
}
    
    .nom h3,
    .coords p:last-child{
        margin-bottom: 30px;
    }


    .pousse{
        position: relative;
        margin-bottom: 60px;
    }    
    
.simple-col .nom h2,
.simple-col .nom h3{
    line-height: 0px;

}
    
    .simple-col .nom{
        margin-bottom:60px;
    }    

.simple-col .nom h3{

        color: #000;
    z-index: 99;
}


.coords p{
position: relative;
line-height: 16px;
}

    
.mail p,    
.mail h4{
     line-height: 16px;
}

}


.ml,
.bd{
    width: 100%;
    float: left;
    
    margin-top: 30px;
}

.bd{
    margin: 10px 0;
}


 a.ml,
a.bd{
width: 100%;
    color: #D9D9D9;
}

a:hover.ml,
a:hover.bd{
    color: #EBBC2B;
}

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

XXX

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


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

XXX

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


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

XXX

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

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

XXX

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


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

XXX

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


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

XXX

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