html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}
html, body {margin:0; padding:0;   color:#333;	font:400 15px/15px 'Nixie One', cursive, Courier, MS Courier New, Prestige, monospace;background:#fff; -webkit-font-smoothing:antialiased;}





/* //////////////////SCROLLBAR /////////////////////
The emerging W3C standard
   that is currently Firefox-only */
* {
  scrollbar-width: thin;
  scrollbar-color: black white;
}

/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
  width: 12px;
}
*::-webkit-scrollbar-track {
  background: white;
}
*::-webkit-scrollbar-thumb {
  background-color: black;
  border-radius: 20px;
  border: 3px solid white;
}




/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}





a {
	color: #111;
	text-decoration: none;
}

a:hover,
a:focus {
	outline: none;
	color: #000;}
@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.52;}
}
.blink{
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 0.34s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}
::-moz-selection {
    background: #ffed00;
    text-shadow: none;
}

::selection {
    background: #ffed00;
    text-shadow: none;
}



img {max-width: 100%;}

h1,h2,h3, h4, h5{
	color:#000;
	font-family: 'Nixie One', cursive, Courier, MS Courier New, Prestige, monospace

}



h1 {font-size: 3em; border:0;margin:0;  padding:0; transition: all .5s; margin-bottom: .16em; }
h2 {font-size: 2.5em; border:0;margin:0;  padding:0; transition: all .5s; line-height: 1em;margin-bottom: .34em; }
		h2 img { border:0; max-width:100%; margin:0; padding:0; position: relative; }
	h1 a:hover, h1 a, h2 a:hover, h3 a:hover, h4 a:hover {text-decoration: none;  color: #333; transition: all 1s; }


h3 {font-size: 2em;  line-height: .8em;   border:0;margin:0;  padding:0;transition: all .34s; }
h4 {font-size: 2.2em;  margin:0;line-height: 2em;}
h5 {font-size: 1.34em;  margin:0;font-weight: bold; margin-bottom: .51em;}
.reference-client-paragraphe {margin-top: 2em;transition: all .5s; }

.floatleft { float:left; }
.floatright { float:right; }
.millieu { margin: auto; text-align: center;}
.normal { font-style: normal; }

/*.header {position: relative;}*/
.headercontact {text-align: right;}
.headercontact a:hover {color: black; text-decoration: underline;}

.bloclogo {position: relative; padding: 0; border: 0; margin: 0;  transition:  all 1s; width: 100%; text-align: center;margin-top: 5em; margin-bottom: 7em;}
.bloclogo img{max-width: 76%; }



header nav ul {
    float: left;
    position: relative;
    z-index: 100;
}
ul, li {
    list-style: none;
        list-style-type: none;
    list-style-type: none;
    margin: 0;
    padding: 0;}

nav {margin-top: 5.4%;   margin-bottom: 5.4%;     /* transform: rotate(-5deg);  
      filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur');
    -webkit-transform-origin-y: bottom;
      -webkit-transform-origin-x: -2px;   transform-origin: 2px bottom;*/}
nav ul li {font-size: 1.5em; transition:  all .5s;}
nav ul li button {font-size: 16px; background-color:#fff;transition:  all .5s;
           border: 2px solid rgb(0, 0, 0);}
.button-group {margin-bottom: .5em;}
nav a:hover {}
.hbtn {position: relative; 
      box-sizing: border-box;
      display: inline-block;
      overflow: hidden;
      padding: 8px 20px;
      margin: 0px ;
      text-align: center;
      /*border: 2px solid rgb(0, 0, 0);*/
      text-decoration: none;
      color: rgb(0, 0, 0);
      white-space: nowrap;
      z-index: 0;
} 
 

.hbtn i {
      padding-right: 8px; 
} 
 

.hb-fill-right::before {
      position: absolute;
      content: "";
      background: rgb(0, 0, 0) none repeat scroll 0% 0%;
      transition-duration: 0.3s;
      z-index: -1;
      top: 0px;
      right: auto;
      bottom: auto;
      left: 0px;
      width: 0px;
      height: 100%;
      opacity: 1;
} 
 

.hb-fill-right:hover::before {
      width: 100%;
      height: 100%;
      opacity: 1;
} 
 

.hb-fill-right:hover, .hb-fill-right:hover a { 
      color: rgb(255, 255, 255);
      background: rgb(0, 0, 0) none repeat scroll 0% 0%;
      transition: color 0.3s ease 0s, background 0s ease 0.3s;
} 


.hb-fill-bottom::before {
      position: absolute;
      content: "";
      background: rgb(0,0,0) none repeat scroll 0% 0%;
      transition-duration: 0.3s;
      z-index: -1;
      top: 0px;
      right: auto;
      bottom: auto;
      left: 0px;
      width: 100%;
      height: 0px;
      opacity: 1;
} 
 

.hb-fill-bottom:hover::before {
      width: 100%;
      height: 100%;
      opacity: 1;
} 
 

.hb-fill-bottom:hover {
           color: rgb(255, 255, 255);
      background: rgb(255, 255, 255) none repeat scroll 0% 0%;
      transition: color 0.3s ease 0s, background 0s ease 0.3s;
    cursor: crosshair;
    
} 
 


.lienactif { 
      color: rgb(255, 255, 255);
      background: rgb(0, 0, 0) none repeat scroll 0% 0%;
      transition: color 0.3s ease 0s, background 0s ease 0.3s;
} 
.lieninactif { background:  #ffed00 none repeat scroll 0% 0%; } 

/*//////////////////////////////////////////////////////////////////////////////// CONTENU //////////////////////////////////////*/


.contenu { border:0; padding: 0; margin: 0;  max-width:130em; z-index:0; text-align:center; display: flex; flex-direction: row; flex-wrap:nowrap; align-items:center; justify-content: center; align-content: center; transition: all 1s; margin-bottom: 7em;}
.contenuleft { display: flex; flex-direction: column; }
.contenuright { display: flex;flex-direction: column;}

.contenutxttitre {font-size: 2.5em;line-height: 1em;}
.contenulefttxttitre {   align-self:flex-end ; background-color: black; margin-right: -76px; margin-bottom: 1em; color: white; padding: .5em;}
.contenurighttxttitre {   align-self:flex-start ; background-color: black; margin-left: -76px; margin-bottom: 1em; color: white; padding: .5em;}
.contenulefttxtligne2 { align-self:flex-end ; background-color: black; margin-right: -33px; margin-bottom: 1em; color: white; padding: .5em;font-size: 1em;}
.contenulefttxtligne2 a, .contenutxttitre a, .contenurighttxtligne2 a { color: white;}
.contenulefttxtligne2 a:hover, .contenutxttitre a:hover, .contenurighttxtligne2 a:hover { color: #ffed00;}
.contenurighttxtligne2 { align-self:flex-start ; background-color: black; margin-left: -33px; margin-bottom: 1em; color: white; padding: .5em;font-size: 1em;}
.contenulefttxtligne3 { align-self:flex-end ;  margin-bottom: 1em; color: black; font-size: 1em;padding: .5em;}
.contenurighttxtligne3 { align-self:flex-start; margin-bottom: 1em; color: white; font-size: 1em;padding: .5em;}
.contenuleftbouton { align-self:flex-end; margin: .2em; margin-bottom: 0em;  font-size: 2em; }
.contenurightbouton { align-self:flex-start ; margin: .2em; margin-bottom: 0em; font-size: 2em;}


.apropos {display: flex; flex-wrap: wrap; border:0; padding: 0; margin: 0;  max-width:130em; z-index:0; text-align:center; flex-direction: row;align-items:center; justify-content: center; align-content:flex-start; transition: all 1s; margin-bottom: 2em;}
.moitiegauche, .moitiedroite {max-width: 800px; padding: 1em; text-align: left; font-size:calc(14px + .36vw); width: 50%; }

.effetfondateurimg {width: 800px; height:571px;}
.square700img {width: 800px; height:800px;}
.shoppingsimg {width: 500px; height:708px;}
.aboutimg {width: 800px; height:531px;}
.contenu img { max-width: 100%;}
.devant { z-index: 2;}
.shoppings { font-family: times;}
.clearclass {clear: both;}
.underline {text-decoration: underline;}
.italic {font-style: italic;}


.hbtnsuite {position: relative;
      box-sizing: border-box;
      display: inline-block;
      overflow: hidden;
      padding: 8px 20px;
     text-align: center;
      border: 2px solid rgb(0, 0, 0);
      text-decoration: none;
      color: rgb(0, 0, 0);
      white-space: nowrap;
      z-index: 0;
} 
 

.hbtnsuite i {
      padding-right: 8px;
} 
 

.hbsuite-fill-right::before {
      position: absolute;
      content: "";
      background: rgb(0, 0, 0); none repeat scroll 0% 0%;
      transition-duration: 0.3s;
      z-index: -1;
      top: 0px;
      right: auto;
      bottom: auto;
      left: 0px;
      width: 0px;
      height: 100%;
      opacity: 1;
} 
 

.hbsuite-fill-right:hover::before {
      width: 100%;
      height: 100%;
      opacity: 1;
} 
 

.hbsuite-fill-right:hover, .hbsuite-fill-right:hover a { 
      color: rgb(255, 255, 255);
      background: rgb(0, 0, 0) none repeat scroll 0% 0%;
      transition: color 0.3s ease 0s, background 0s ease 0.3s;
} 

.clients-et-references { border:0; padding: 0; margin: 0;  max-width:130em; z-index:0; text-align:center; display: flex; flex-direction: row; flex-wrap: wrap; align-items:flex-start; justify-content: center; align-content: center; transition: all 1s; 
}

.grid {width: 95vw; margin-top: 1em;}
.grid-item { background:#ffffff; width: 300px; margin-bottom: 20px;transition: all .5s;  margin-top: .1em; border-bottom: .1em;     border-style:groove;    border-width: 1px; border-color: lightgray;}
.grid-item--width2 { width: 350px;}
.grid-item:hover { transition: all .2s;
    background-color: #009ee0; color: white;
     border-width: 1px; border-color: black;
}
.grid-item:hover h2, .grid-item:hover h3 {  color: white;}
/*.grid-item img:hover {width: 210px; transition: all .5s;}*/
.trie {clear: both; margin:1.5em; color:#fff; width: 100vw;  font-size:1.5em; font-weight: bold;}
.trie button, {
  background: #ff540b;
  background-image: -webkit-linear-gradient(top, #ff540b, #ffbf00);
  background-image: -moz-linear-gradient(top, #ff540b, #ffbf00);
  background-image: -ms-linear-gradient(top, #ff540b, #ffbf00);
  background-image: -o-linear-gradient(top, #ff540b, #ffbf00);
  background-image: linear-gradient(to bottom, #ff540b, #ffbf00);
  -webkit-border-radius: 7;
  -moz-border-radius: 7;
  border-radius: 7px;
    border:0px;
  color: #ffffff;
  padding: 5px 7px 5px 7px;
  text-decoration: none; 
font-weight: bold;
    transition: all .5s;
}

.trie button:hover, a.prestationsdetails:hover {  font-size: 1.13em; font-weight: bolder;
  background: #ffbf00;
  text-decoration: none;
    transition: all .5s;
}




 .swiper-pagination-bullet {
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
      color:#000;
      opacity: 1;
      background: rgba(0,0,0,0.2);
    }
    .swiper-pagination-bullet-active {
      color:#fff;
      background: #ffffff;
    }








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

.footer { border:0; padding: 0; margin: 0; margin-top: 5em;  max-width:130em; z-index:0; text-align:center; display: flex; flex-direction: row; flex-wrap:nowrap; align-items:center; justify-content: center; align-content: center; transition: all 1s; margin-bottom: 2.5em; font-size: 2em;}
.footergauche {border:2em; width: 50%;}
.footerdroite {border:2em; width: 50%; }


 .hbtnfooter {
      position: relative;
      box-sizing: border-box;
      display: inline-block;
      overflow: hidden;
      padding: 8px 20px;
      margin: 0px 3px 6px;
      text-align: center;
      border: 2px solid rgb(0, 0, 0);
      text-decoration: none;
      color: rgb(255, 255, 255);
      white-space: nowrap;
      z-index: 0;
} 

.hb-fill-middle2-rev::before {
      position: absolute;
      content: "";
      background: rgb(255, 255, 255) none repeat scroll 0% 0%;
      transition-duration: 0.3s;
      z-index: -1;
      top: 0px;
      right: 0px;
      bottom: auto;
      left: auto;
      width: 50%;
      height: 100%;
      opacity: 1;
} 
 

.hb-fill-middle2-rev:hover::before {
      width: 0px;
      height: 100%;
      opacity: 1;
} 
 

.hb-fill-middle2-rev {
      background: rgb(0, 0, 0) none repeat scroll 0% 0%;
      color: rgb(0, 0, 0);
      transition: color 0.3s ease 0s, background 0s ease 0.3s;
} 
 

.hb-fill-middle2-rev:hover {
      background: transparent none repeat scroll 0% 0%;
      color: rgb(255, 255, 255);
      transition: color 0.3s ease 0s, background 0s ease 0s;
       background: rgb(0, 0, 0);
} 
 

.hb-fill-middle2-rev::after {
      position: absolute;
      content: "";
      background: rgb(255, 255, 255) none repeat scroll 0% 0%;
      transition-duration: 0.3s;
      z-index: -1;
      top: 0px;
      right: auto;
      bottom: auto;
      left: 0px;
      width: 50%;
      height: 100%;
      opacity: 1;
} 
 

.hb-fill-middle2-rev:hover::after {
      width: 0px;
} 
 
.socialetbacktotop  { transition: all .3s; text-align: center; clear:both; margin-bottom: 2em;} 


.socialetbacktotop img:hover  { transition: all .3s;   filter: grayscale(0.5) blur(1px);} 
.socialetbacktotop img  { transition: all .3s; margin:.5em; } 

.right{ float:right; border:0; margin:0; padding: 0;
}
#langue { position:absolute; right: 0; top: 0; text-align:right;font-size: 1.5em; background-color: black; color: white; padding: .5em; z-index: 657168765716765716571;} 
		#langue:hover {  background-color: white; color:black; } 
		#langue a { color: white;} #langue a:hover {  color: #ffb100;} 


/* ------------------------------------------------------------MEDIA QUERIZ  -------------------------------------------------------------------------- */
	
@media screen and (min-width: 1000px) { 
    .contenu { height: 100vh;}
}
@media screen and (max-height: 850px) { 
    .contenu { height:auto;}
}
@media screen and (max-width: 85em) { .contenutxttitre {font-size: 2.5em;}
   .square700img {width: 600px; height:600px; transition: all, 1s;}
    .effetfondateurimg {width: 600px; height:428px;}
    .contenu { height: 100vh;}
     .contenu { height:auto;}
    .contenuleftbouton, .contenurightbouton  { font-size: 1.5em;}
}


@media screen and (max-width: 67em) { .contenutxttitre {font-size: 1.5em;}
    .square700img {width: 400px; height:400px; transition: all, 1s;}
   .shoppingsimg {width: 400px; height:566px; transition: all, 1s;}
    .effetfondateurimg {width: 400px; height:285px;}
    .apropos {flex-direction:column;align-content: center;}
    .moitiegauche, .moitiedroite {width: 100%; }
}





@media screen and (max-width: 52em) {
   
    h1 {font-size: 2.3em;  }
    .cd-headline { font-size: 1.4em;}
 .square700img {width: 300px; height:300px; transition: all, 1s;}
 .shoppingsimg {width: 300px; height:425px; transition: all, 1s;}
    .effetfondateurimg {width: 300px; height:214px;}    
    .contenuleft , .contenuright { min-width: 300px;}
         .contenulefttxttitre, .contenurighttxttitre, .contenulefttxtligne2, .contenurighttxtligne2, .contenulefttxtligne3, .contenurighttxtligne3, .contenuleftbouton, .contenurightbouton  { margin-bottom: .2em;}
         .footer { font-size: 1.5em;}
}


/*///////////// passage en droit **********/
@media screen and (max-width: 39em) {   .bloclogo { margin-top: 3em; margin-bottom: 3em;}
    .contenu { flex-wrap:wrap;} 
        .colonnereverse {flex-flow:column-reverse;}  
     .contenuleft , .contenuright { min-width: 20px;}
    .contenutxttitre {font-size: 2em;margin-top: -1.15em;}
     .contenulefttxttitre, .contenurighttxttitre, .contenulefttxtligne2, .contenurighttxtligne2, .contenulefttxtligne3, .contenurighttxtligne3, .contenuleftbouton, .contenurightbouton  {  
/*         max-width: 80vw;*/
         align-self:center; margin :auto;margin-bottom: .2em;margin-left: 2em; margin-right: 2em;
    }
    
       .square700img {width: 400px; height:400px; transition: all, 1s;}
     .shoppingsimg {width: 400px; height:566px; transition: all, 1s;}
    .effetfondateurimg {width: 400px; height:285px;}
    .footer {display: inline-block; width: 100%; }
       .footergauche, .footerdroite {margin: auto; width: 100%;}

    #langue { font-size: 1em; } 
}


@media screen and (max-width: 30em) { 

    .contenu {    margin-bottom: 3em;}
    .contenutxttitre {font-size: 1.5em;margin-top: -.9em; padding: .3em;}   
    .contenu {padding-top: 2em;}
         .contenulefttxttitre, .contenurighttxttitre, .contenulefttxtligne2, .contenurighttxtligne2, .contenulefttxtligne3, .contenurighttxtligne3, .contenuleftbouton, .contenurightbouton  {padding: .3em;}
 
    h1 {font-size: 2.3em;}
      .footer { font-size: 1em;}
    .hb-fill-middle2-rev::before {
      position: absolute;
      content: "";
      background: rgb(255, 255, 255) none repeat scroll 0% 0%;
      transition-duration: 0.3s;
      z-index: -1;
      top: 0px;
      right: 0px;
      bottom: auto;
      left: auto;
      width: 50%;
      height: 100%;
      opacity: 1;
} 
 

.hb-fill-middle2-rev:hover::before {
      width: 0px;
      height: 100%;
      opacity: 1;
} 
 

.hb-fill-middle2-rev {
      background:rgb(255, 255, 255) none repeat scroll 0% 0%;
      color:rgb(0, 0, 0);
     
} 
}




@media screen and (max-width: 26em) {     h1 {font-size: 1.7em;  }  .bloclogologo > div img {width: 70px; height: 70px; padding-left: .5em;}
    .headercontact a {font-size: .85em;}
    .cd-headline { font-size: 1.25em;}
.square700img {width: 300px; height:300px; transition: all, 1s;}
     .shoppingsimg {width: 300px; height:425px; transition: all, 1s;}
    .effetfondateurimg {width: 300px; height:214px;}
         .contenulefttxttitre, .contenurighttxttitre, .contenulefttxtligne2, .contenurighttxtligne2, .contenulefttxtligne3, .contenurighttxtligne3, .contenuleftbouton, .contenurightbouton  {  margin-left: .8em; margin-right: .8em;
    }
}



@media screen and (max-width: 21em) { h1 {font-size: 1.3em;  }
    .cd-headline { font-size: 1em;}
.square700img {width: 200px; height:200px; transition: all, 1s;}
     .shoppingsimg {width: 200px; height:283px; transition: all, 1s;}
    .effetfondateurimg {width: 200px; height:143px;}
}