/* ============================================================
  NAVIGATION - DEMO NAV
============================================================ */
nav.demo-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
nav.demo-nav li {
  display: inline-block;
  font-family: "Roboto Slab", serif;
  font-size: 12px;
}
nav.demo-nav a {
  display: block;
  padding: 3px 8px;
  background-color: tomato;
  color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
nav.demo-nav a:hover,
nav.demo-nav li.active a {
  background-color: #ff3814;
}

/* ============================================================
  BASE OVERRIDES

  Use this to make sure max width of wrapper is also max
  video width in demo 3.
============================================================ */

.wrapper.ntk3 {
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: 100%;
  
  left: 0;
  top: 0;
  z-index: 3;
}
.titre-surligne {
    font-family: 'SignPainterAdArt';
    text-transform: uppercase;
    position: relative;
    text-align: center;
    font-size: 42px;
    z-index: 4;
}
span.surligne {
    position: absolute;
    z-index: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
        z-index: 1;
}

/* ============================================================
FULL SCREEN BACKGROUND VIDEO
============================================================ */
#cmn-video-nethink__video {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity:1;
}

#cmn-video-nethink__content {
  text-align: center;
}

.cmn-video-nethink__content--header {
  margin-bottom: 40px;
}
.cmn-video-nethink__content--header h2,
.cmn-video-nethink__content--header p,
.cmn-video-nethink__content--header a {
  color: #fff;
  text-shadow: -1px 1px 4px rgba(0, 0, 0, 0.6);
}
.cmn-video-nethink__content--header h2 {

  font-size: 30px;
}
 h1 {
  font-size: 25px;
  margin-bottom:10px;
  color:#fff;
  z-index: 100;
}
.cmn-video-nethink__content--header p {
  margin-bottom: 40px;
}
.cmn-video-nethink__content--header a {
  display: inline-block;
  margin: 0;
  padding: 10px 20px;
  font-family: "Roboto Slab", serif;
  border: solid 0px #fff;
  -webkit-transition: background 0.3s, color 0.3s, text-shadow 0.3s;
  -moz-transition: background 0.3s, color 0.3s, text-shadow 0.3s;
  -o-transition: background 0.3s, color 0.3s, text-shadow 0.3s;
  transition: background 0.3s, color 0.3s, text-shadow 0.3s;
}
.cmn-video-nethink__content--header a:hover {
  background-color: #fff;
  color: #787878;
  text-shadow: none;
}

.video-web-lyon {
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  margin-top: -18px;
}
.video-web-lyon h2 {
  margin: 0 0 10px 0;
  color: #fff;
   font-weight: 600;
  font-size: 34px;
}
.video-web-lyon p {
  margin: 0 0 20px 0;
  color: #fff;
  line-height: 1.5em;
}
@media (min-width: 200px) and (max-width: 600px){
#cmn-video-nethink__video {
display:none;
}
.cmn-video-nethink__content--header h2 {
   font-weight: 600;
  font-size: 50px;
}
.mail{display:none!important;}
.mail2
{   
    margin-top:5px;
    margin-bottom:30px;
    padding: 0px;
    border-radius:50px;
    background-color: #ff3300;
    display:inline-block;
}
.mail2 a
{   
    border:0;
    
}
header.primary-header {
  padding: 0px;
}


}
@media screen and (min-width: 601px) {
.mail2
{ display:none;}

}
@media all and (min-width: 600px) {
  .cmn-video-nethink__content--header h2 {
    font-size: 42px;
   font-weight: 600;
  }
  .cmn-video-nethink__content--header p,
  .cmn-video-nethink__content--header a {
    font-size: 18px;
  }
}
@media all and (min-width: 1024px) {
  .cmn-video-nethink__content--header h2 {
    font-size: 54px;
     font-weight: 600;
  }
  .cmn-video-nethink__content--header p,
  .cmn-video-nethink__content--header a {
    font-size: 24px;
  }
}

/* ============================================================
FULL SCREEN BACKGROUND grid
============================================================ */

.pattern-overlay {
    background: url("../images/template/grid.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-attachment:fixed;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    overflow: hidden;
    position: absolute;
    width: 100%;
}
.clients img{
  opacity:0.7;
  padding-left:40px;
  width:-50%;
  height:auto;
  display:in-line;
  margin-top:20px;
  padding-bottom:40px;
}
#clients {
  margin-top:10px;

}
.clients img:first-child {
  opacity:0.7;
  padding-left:0px;
  display:in-line;
}
.clients2 img{
  opacity:0.7;
  padding-left:58px;
  width:-50%;
  height:auto;
  display:in-line;
  padding-bottom:40px;
}
.clients2 img:first-child {
  opacity:0.7;
  padding-left:0px;
  display:in-line;
}
#footer{
position:fixed;
bottom:0;
left:0;
height:100px;
background: black;
}
@media screen and (max-height: 770px) {
.clients2 {display:none;}

.pattern-overlay {
display:none;
}

}
@media screen and (min-width:300px) and (max-width:1010px) {
.clients {display:none;}
.clients2 {display:none;}

.video-web-lyon {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
    border-radius: 36px;
    margin-top: -18px;
    padding: 20px;
    margin-bottom:100px;
}


}
#contact {margin-bottom:20px;}
#phone {background-color: #ff3300;font-size: 12px;padding: 10px; padding:5px; display:block;color:#fff;}
#mail {background-color: #ff3300;font-size: 12px;padding: 10px; padding:5px; color:#fff;display:block;}
.phone 
{
background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
    margin-top:5px;
    padding: 10px;
    color: white;
    display:inline-block;

    display:inline-block;
}

.mail
{    
    background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
    margin-top:5px;
    padding: 10px;
    color: white;
    display:inline-block;
}
.metier
{   
    margin-top:5px;
    padding: 10px;
    color: white;
    background-color: #ff3300;
    display:inline-block;
}
.adresse
{   
    background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
    margin-top:5px;
    padding: 10px;
    color: white;

    display:inline-block;

}