/*!
 * CSS surcouche  */
body {
  font-family: 'Noto Serif', serif;
  position: relative;
}

a.lienc {
  color: #222;
  font-weight: bold;
}

a.lienc:hover, a.lienc:focus {
  color: #113B51;
  text-decoration: none;
  border-bottom: 1px solid #113B51;
}

a {
  color: #222;
}

a:hover {
  color: #113B51;
}

img {
  max-width: 100%;
  height: auto;
}


/*.blockfolio img {max-width: 100%;}*/

#kodzbarre {
  font-size: 1.2em;
  background: #113B51;
  font-weight: 500;
  font-family: 'Open Sans', sans-serif;
  border-bottom: 1px solid #113B51;
  box-shadow: 0px 1px 3px #00DFFF;
}

#navkodz li>a:hover {
  border-bottom: 4px solid #00DFFF;
  color: #fff;
}

.navbar-brand {
  color: #ffffff !important;
  margin-right: 20px;
  padding-left: 40px;
  padding-right: 20px;
  border-right: #00DFFF dashed 1px;
  text-shadow: 0 0 0;
}


.navbar-default .navbar-nav>li>a {
  color: #ffffff;
  border-bottom: 4px solid #113B51;
  padding: 10px 15px 5px 15px;
  margin: 5px 5px 0 0;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  border-bottom: 4px solid #00DFFF;
  background: #113B51;
  color: #fff;
}

.kodz {
  font-size: 10vmax;
  color: #fff;
  font-family: 'Noto Serif', serif;
  border-bottom: 5px dashed #00DFFF;
  padding: 0 0 0 2%;
  text-transform: capitalize;

}

.etiquette {
  padding: 7% 0 5%;
  display: flex;
  flex-flow: row wrap;
  min-height: 350px;
}

.etiquette h2 {
      color: #5a5a5a;
      flex: 1 1;
      font-size: 2.5vh;
      margin: 0;
      border: 1px solid #E3EDF3;
      padding: 6% 1% 2%;
      display: inline-block;
      font-weight: 300;
      background: #fcfcfc;
      position: relative;
      text-transform: uppercase;
}



.imgicon {
  height: 80px;
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 1;
  width: 100%;

}

@media screen and (max-width: 992px) {
  .etiquette {
    padding-top: 20%;
  }
  .etiquette h2 {
    padding: 15% 2% 20%;
    flex : 1 1 49%;
  }
  .imgicon {
    height: 85px;
  }
}

@media screen and (max-width: 440px) {
  .etiquette {
    flex-flow: column;
  }
}

.firstrow {
  background: linear-gradient(to bottom,#fafafa 70%,#efefef);
  padding: 4% 0 5% 0;
}

.firstrow img {
  max-width: 100%;
}

.firstrow h1, .firstrow h2 {
  color: #28546C;
  font-size: 22px;
  font-family: 'Noto serif', sans-serif;
  font-weight: 100;
  padding: 2% 0 0 0;
  margin: 4% auto;
  max-width: 90%;
  position: relative;
}



.firstrow h1::before, .firstrow h2::before {
content: "";
top: 37px;
left: -9px;
position: absolute;
width: 28px;
height: 2px;
background-color: #00DFFF;
}

.key-comp {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  margin: 3% 0 8%;
  background-image: url("../img/chevron.png");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 15px;}

.key-comp div { flex: 0 0 150px; margin: 20px 30px; }


a.iconecaption {
  border: 1px solid #00DFFF;
  padding: 10px 10px 10px 50px;
  height: 40px;
  display: block;
  color: #28546C;
  font-weight: 700;
  background: #f1f1f1;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #113B51;
  font-family: 'Open Sans', sans-serif;
  text-align: left;
  transition: background 0.3s ease-in-out;
  position: relative;
}

a.iconecaption:hover {
  background-color: #00DFFF;
  text-decoration: none;
}

.realisations {
  transition: all 0.2s ease-in;
}

.realisations:hover {
  background-color: #1a5687;
}


.realisations a:link {
  padding: 6% 5%;
  margin: 0;
  font-size: 5vmin;
  font-weight: 700;
  color: #fff;
  display: block;
  text-align: center;
  font-family: 'Noto serif', serif;
  transition: all 0.2s ease-in;
}

.realisations a:hover {
  text-decoration: none;
  color: white;
}

.realisations a:visited {
  text-decoration: none;
}


.iconover {
     position: absolute;
     left: 0px;
     top: 2px;
     z-index: 0;
     width: 150px;

}

.linkover {
  border: 1px solid #00DFFF;
  clear: both;}

.goto {
    color: #00DFFF;
    font-size: 160px;
    font-weight: 800;
    text-align: center;
    padding: 0;
    display: block;
}

.list-intro {
 border-bottom: #113B51 6px solid;
 padding: 5% 0 5% 0;
 font-size: 150%;
 font-weight: 800;
 font-family: 'Noto Serif', serif;
}

.entete {
 color: #113B51;
 font-family: 'Noto Serif', serif;
 font-size: 4vh;
 padding: 3%;
 margin-top: 50px;
 display: block;
}


.primary-gradient { background: linear-gradient(to bottom, #4ab9c9, #00d0ef);}
.bg-grey {background-color: #E3EDF3 }


.hcomp {
  border-top: 5px solid #00DFFF;
  padding: 1% 0 0;
  font-size: 8vmin;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  flex: 1 1;
  line-height: 1.5em;
  margin: 1% 2%
}

.listcomp {
  font-size: 16px;
  color: #28546C;
  line-height: 2.5em;
  font-family: 'Open Sans', sans-serif;
  flex: 1 1;
  padding: 0 2%;
  line-height: 3em;
}

.listcomp li::before {
  content: "\e258";
  position: relative;
  top: 1px;
  left: -4px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-size: 90%;
}


.twhite {
  color: #fff;
}

.tgrey {
  color: #555;
}

.blockcomp {
  display: flex;
  padding: 10% 2%;
  flex-flow: row wrap;
  justify-content: center;
}

.iconcomp {
  max-width: 280px;
  flex: 1 1;
  max-height: 280px;
  padding: 1%;
}

@media screen and (max-width: 992px) {
  .blockcomp {
    flex-flow: column;
  }

  .iconcomp {
    max-width: 180px;
    padding: 4% 1%;
    align-self: center;
  }

  }



.blockcomp:nth-of-type(even) {
  background: linear-gradient(to bottom left, #e9e9e9, #f6f6f6);
}

.blockcomp:nth-of-type(odd) {
  background: linear-gradient(to bottom left, #10435b 20%, #00b9d4);
}


.hform {
  color: #111;
  font-size: 9vmin;
  margin-bottom: 5%;
  flex: 1 1;
}

.hform::first-letter {
  background-color: #00DFFF;
  color: #fff;
  font-size: 150%;
  padding: 1%;
  margin: 5px;
  border-radius: 10px;

}


.cowork {
  opacity: 0.5;
  position: relative;
  top: 10%;
  max-height: 220px;
}

.blockform {
  padding: 3% 2% 2% 5%;
  border: 1px solid #f3f3f3;
  background: linear-gradient(to right, #fafafa 85%, #fefefe 85%);
  margin: 2% 0;
}




.blockform p, .blockform li {
  color: #555;
  font-family: 'Open Sans', sans-serif;
  line-height: 2em;
  font-size:17px;
  padding-bottom: 10px;
}
.blockform ul {
  list-style: none;
  padding: 0;
}


.blockform li::before {
  content: "\e258";
  position: relative;
  top: 1px;
  left: -10px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-size: 90%;
}







.blockform a > img {height: 40px; padding: 0 10px;}


/* profil*/

.ppro {
  font-size: 2.5vh;
  line-height: 2em;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
}

.hpro {
  margin: 25px 0 20px 0;
  font-size: 5vmax;
  color: #F1F1F1;
  font-weight: 600;
  border-bottom: 2px dotted #dfdfdf;
  padding: 1%;
}

.prolist {
  margin-top: 10px;
  margin-bottom: 60%;
  font-size: 120%;
  line-height: 170%;
  border-left: 1px solid #eee;
  padding-left: 10px;
}

.proexp {
background: #4ab9c9;
color: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 17px;
}

.ulexp {
  box-shadow: 1px 1px 4px #4ab9c9;
}

/* global*/

.margedown{
  padding-bottom: 3%;
}

/*folio CSS*/

.margefolio {
  padding: 5px 5px 5px 0;

}

.blockfolio {
 padding: 1%;
 background: #fafafa;
 margin: 10px;
 border: 5px solid #fdfdfd;
 position: relative;
 display: flex;
}



.blockfolio > div.inner{
padding: 0;
position: relative;
background: white;
width: 70%;
margin: 7% auto;
display: inline-block;
}

.blockfolio > div.inner > div.details{
/*padding: 1% 2%;
position: relative;*/
padding: 5%;
background: white;
}

@media screen and (max-width: 990px) {
  .blockfolio > div.inner {
    width: 100%;
  }
}



.blockfolio div.screen-s{
padding: 0;
align-self: flex-start;
max-height: 350px;
overflow: hidden;
border-bottom: 15px solid rgba(200, 200, 200, 0.5);
position: relative;
}

.blockfolio div.screen-s::after{
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 70px;
      background: linear-gradient(to bottom, rgba(200, 200, 200, 0), rgba(200, 200, 200, 0.5));
}

.blockfolio div.screen-s img{
width: 100%;
}


.blockfolio div.screen-s a:before {
  content: attr(href) " ";
  background: rgb(10, 10, 10);
  position: absolute;
  color: #fff;
  text-align: center;
  padding: 15% 0 0;
  width: 100%;
  height: 340px;
  opacity: 0;
  font-size: 150%;
  transition: all 0.2s ease-in;
}

.blockfolio div.screen-s a:hover::before {
    opacity: 0.8;
}

.lienext {
  background: linear-gradient(top, #00DFFF, #00B8D2);
  color: #000;
}

.bpro {
  font-size: 7vh;
  text-align: center;
  border-radius: 10px;
  padding: 25% 3px;
  margin: 0 0 0 0;
  display: block;
  box-shadow: 2px 2px 4px #477187;
}


.tblue {
    color: #00B8D2;
}

/* folio  */
.h3folio {
color: #000;
font-weight: bolder;
font-size: 3vmax;
padding: 0 0 1% 0;
margin: 0 0 2% 0;
text-transform: uppercase;
line-height: 1.5em;
position: relative;
}

.h3folio::before {
  content: "";
  background-color: #eaeaea;
  width: 15%;
  height: 8px;
  left: -25px;
  bottom: 0px;
  position: absolute;
}

.h4folio {
padding-top: 4%;
color: #0d4c66;
font-weight: 600;
font-size: 3vh;
margin: 4% 0;

}

.listfolio {
font-family: 'Open Sans', sans-serif;
line-height: 1.8em;
color: #113B51;
margin: 15px 0;
padding: 0;
min-height: 120px;
}

.listfolio > li {
  display: inline-block;
  font-size: 95%;
  padding: 10px 10px 5px 25px;
  position: relative;
  font-weight: bold;
  text-transform: uppercase;

}

.listfolio > li::before {
  content: "";
  width: 9px;
  height: 9px;
  top: 20px;
  left: 7px;
  position: absolute;
  border-radius: 2px;
  border: 3px solid #aaa;
}

.iconcon {
  width: 15%;
  margin: 3% 3% 3% 3%;
}

.blockfolio .label {
  font-size: 1em;
  font-family: 'Open sans', sans-serif;
  padding: 3px 5px;
  margin: 5px 5px 0px 0;
  display: inline-block;
}

.label {
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  margin: 5px 0;
  line-height: 2em;
}

.label.label-info {
  background-color: #10435b;
}

.label.label-warning {
  background-color: #ff9900;
  margin: 5px 10px;
}



/* contact */

.numero {
  padding: 10px;
  font-size: 150%;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.numeroblock {
  padding: 3px 5px;
  background-color: #fafafa;
  margin: 0;
}

.messenger {
  font-size: 12px;
  text-decoration: none;
  display: block;
  padding: 10px 0;
  color: #999;
}

.messenger .label-outline {
  font-size: 12px;
  padding: 2px 3px;
  margin: 3px;
  border: 1px solid #5cb85c;
  color: #5cb85c;
  background-color: #fbfffb;
}

.inner-tel {
  display: inline-block;
  position: relative;
  top: 10px;
}


footer {
margin: 0 0 0 0;
background: linear-gradient(to left top, #10435b, #1d78a3);
/*background: -webkit-linear-gradient(top, #00DFFF, #113B51);*/
padding: 5%;
border-top: #6f90a2 solid 2px;

}

.iconfooter {
  max-height: 100px;
}

.listfoot {
  color: #fff;
  margin: 0 5% 5% 5%;
  font-size: 14px;
  line-height: 2em;
  font-family: 'Open Sans', sans-serif;
  padding: 2rem 0;
  border-top: #fff4 dotted 4px;
  border-bottom: #fff4 dotted 4px;
  font-weight: 300;

}

.listfoot a {
  color: #fff;
}

.listfoot a:hover {
  color: #eee;
}

@media screen and (max-width: 440px) {
  .numero {
    font-size: 110%;
  }
  footer {
    padding: 2%;
  }
  .listfoot{
    margin: 2% 0;
  }
}

/* modal*/

.modal h4 {
  font-weight: 800;
  color: #032436;
  margin-top: 15px;
}