html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}
html, body {margin:0; padding:0;height: 100%;    font-family: 'Montserrat', sans-serif;  }


/*
 * 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: #ffffff;
    padding: 0.2em 0;
}



body {
/*	background: #fff;*/
background-color: #000000;

	color: #ffffff;
	width: 100%; height: 100%; position: relative; z-index:0;
	font-size: 1em;
	position: absolute;
}

a {transition: all .3s;
	color: #fff;
	text-decoration: none;
}

a:hover,
a:focus {
	outline: transition: all .3s;none;
	color: #c92219;}
@-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: #c92219;
    text-shadow: none;
}

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



img {max-width: 100%;}
video {max-width: 100%; padding: 1em;}


h2 {font-size:calc(52px + 1.5vw);font-family: 'Lato', sans-serif;border:0;margin:0;  padding:0; margin-bottom: 0.2em; }
.nomdeprojet {font-size: 5vw; margin-top: -.9em; }
		h2 img { border:0; max-width:100%; margin:0; padding:0; position: relative; }
	


h3 {font-size: 2.2em; margin-bottom: 2em;  font-weight:700; border:0;margin:0;  padding:0; }
h4 {font-size: 1.6em;  margin:0;line-height: 2em;}
h5 {font-size: 1.34em;  margin:0;font-weight: bold; margin-bottom: .51em;}


.floatleft { float:left; }
.floatright { float:right; }
.normal { font-style: normal; }
.bigtitre {font-size:calc(52px + 1.5vw);font-family: 'Lato', sans-serif;border:0;margin:0;  padding:0; margin-bottom: 0.2em;  }

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


header nav ul {   font-family: 'Montserrat', sans-serif; 
    float: left;
    position: relative;
    z-index: 100;
}
ul, li {   font-family: 'Montserrat', sans-serif; 
    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: 1em; 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;}

.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(255, 255, 255) none repeat scroll 0% 0%;
      transition-duration: 0.3s;
      z-index: -1;
      top: 0px;
      right: auto;
      bottom: auto;
      right: 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(0, 0, 0);
      background: rgb(255, 255, 255) 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(255, 255, 255) 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:  #c92219 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;}
.contenulefttxttitre {   align-self:flex-end ; background-color: white; margin-right: -76px; margin-bottom: 1em; color: white; padding: .5em;}
.contenurighttxttitre {   align-self:flex-start ; background-color: white; margin-left: -76px; margin-bottom: 1em; color: white; padding: .5em;}
.contenulefttxtligne2 { align-self:flex-end ; background-color: white; margin-right: -33px; margin-bottom: 1em; color: white; padding: .5em;font-size: 1em;}
.contenurighttxtligne2 { align-self:flex-start ; background-color: white; margin-left: -33px; margin-bottom: 1em; color: white; padding: .5em;font-size: 1em;}
.contenulefttxtligne3 { align-self:flex-start ;  margin-bottom: 1em; color: white; font-size: 1em;padding: .5em;}
.contenurighttxtligne3 { align-self:flex-end ; margin-bottom: 1em; color: white; font-size: 1em;padding: .5em;}
.contenuleftbouton { align-self:flex-end;  margin-bottom: 0em; margin-right: 33px;  font-size: 2em;}
.contenurightbouton { align-self:flex-end ;  margin-bottom: 0em; font-size: 1em;}

.effetfondateurimg {width: 800px; height:571px;}
.square700img {width: 700px; height:700px;}
.shoppingsimg {width: 500px; height:708px;}
.contenu img { max-width: 100%;}
.devant { z-index: 2;}
.shoppings { font-family: times; font-weight: 200;}
.clearclass {clear: both;}
.center {text-align:center; margin: auto; }

.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: white;}
.grid-item:hover h2 {  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;
}













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

.footer { border:0; padding: 0; margin: 0; margin-top: 1em;  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(10px);} 
.socialetbacktotop img  { transition: all .3s; } 


.bandcamp {max-width: 700px; margin: auto;}
.bandcamp img {transition: all .3s;   padding: .7em;}
.bandcamp img:hover {transition: all .3s;   filter: grayscale(0.7) blur(5px);}

/* ------------------------------------------------------------MEDIA QUERIZ  -------------------------------------------------------------------------- */
	
@media screen and (max-width: 85em) { .contenutxttitre {font-size: 2.5em;}
   .square700img {width: 600px; height:600px; transition: all, 1s;}
    .effetfondateurimg {width: 600px; height:428px;}
}


@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;}
}





@media screen and (max-width: 52em) {
   .nomdeprojet {font-size: 7vw; margin-top: -1.2em; }
    .bloclogo 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;}
 
    .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: 43em) {  
  
    .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;}
       .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%;}

    
}


@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;}
 
   .bloclogo h1 {font-size: 2.3em;  }
      .footer { font-size: 1em;}
   
 
}




@media screen and (max-width: 26em) {     .bloclogo 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;}
}



@media screen and (max-width: 21em) { .bloclogo 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;}
}


