*{
    margin:0;
    padding:0;
    font-weight: 400;
    list-style-type: none;
}
body{
    margin: 0;
    padding:0;
    font-family: 'Roboto Slab', serif;
    width:100%;
    background-color: #292828;
}
#loader{
    position:absolute;
    top:0;
    left:0;
    z-index:5000;
    width:100%;
    height:100vh;
    background-color: #fff;
}

#loading{
    position: absolute;
    top:50%;
    left:50%;
    width:170px;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}

.error{
    color:red;
}

.good{
    color:#59ff3b;
}

/*HEADER*/

header{
    padding-top:20px;
    padding-bottom:20px;
    text-align: center;
    background-color: #fff;
}

header img{
    vertical-align: middle;
}

.tiret-header{
    width:30%;
    height:1px;
    display: inline-block;
    background-color:#d9d9d9;
}

/*URGENCE*/

#urgence{
    width:100%;
    color:white;
    font-size:16px;
    background-color: rgba(0,0,0,0.7);
    text-align: center;
    padding:6px 0 6px 0;
    margin:0;
    position: relative;
    top:0;
    left:0;
    z-index:3000;
}

#urgence span{
    animation: clignote 1.2s infinite;
    -webkit-animation: clignote 1.2s infinite; 
    -moz-animation: clignote 1.2s infinite; 
    -ms-animation: clignote 1.2s infinite; 
    -o-animation: clignote 1.2s infinite; 
}

@keyframes clignote {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
    100%{
    opacity: 0.3;
  }
}
@-webkit-keyframes clignote {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
    100%{
    opacity: 0.3;
  }
}
@-moz-keyframes clignote {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
    100%{
    opacity: 0.3;
  }
}
@-ms-keyframes clignote {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
    100%{
    opacity: 0.3;
  }
}
@-o-keyframes clignote {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
    100%{
    opacity: 0.3;
  }
}

/*NAV*/

nav{
    width:100%;
    font-size:16px;
    background-color: #ac2321;
    text-align: center;
    padding: 6px 0 6px 0;
    position:absolute;
    z-index:4000;
    
}

.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 4000;
  border-top: 0;
}

.nav-items{
    display: inline-block;
    margin-left:50px;
    margin-right:50px;
}

.nav-items a{
    color:white;
    text-decoration: none;
    transition:all 0.1s cubic-bezier(0, .28, .22, .7);
    -webkit-transition:all 0.1s cubic-bezier(0, .28, .22, .7);
    -moz-transition:all 0.1s cubic-bezier(0, .28, .22, .7);
    -ms-transition:all 0.1s cubic-bezier(0, .28, .22, .7);
    -o-transition:all 0.1s cubic-bezier(0, .28, .22, .7);
}

.nav-items-links:hover{
    color:rgba(999,999,999,0.2);
}

#ombre-nav{
    width:100%;
    height:50px;
    background: url(images/ombre-nav.png) repeat-x;
    position:absolute;
    bottom:-50px;
}

#travaux{
    position: relative;
}

#travaux a{
    text-decoration: none;
}


/*SOUS-NAV*/

#sous-nav{
    display:none;
    position: absolute;
    top:37px;
    left:-60px;
    width: 240px;
    z-index:3000;
    
    -moz-box-shadow: 0px 20px 50px -20px #000000;
    -webkit-box-shadow: 0px 20px 50px -20px #000000;
    -o-box-shadow: 0px 20px 50px -20px #000000;
    box-shadow: 0px 20px 50px -20px #000000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=180, Strength=50);
}

#sous-nav li{
    font-size:16px;
    text-decoration: none;
    padding:6px;
    background-color: #ac2321;
    transition:all 0.1s cubic-bezier(0, .28, .22, .7);
    -webkit-transition:all 0.1s cubic-bezier(0, .28, .22, .7);
    -moz-transition:all 0.1s cubic-bezier(0, .28, .22, .7);
    -ms-transition:all 0.1s cubic-bezier(0, .28, .22, .7);
    -o-transition:all 0.1s cubic-bezier(0, .28, .22, .7);
}

#sous-nav li:hover{
    background-color: #222121;
}

#sous-nav li:hover .tiret-color{
    opacity:1;
}

#sous-nav a{
    text-decoration: none;
}

.sous-nav-item{
    border-bottom:#d45b59 1px solid;
}

.sous-nav-last{
    border:none;
}

.tiret-color{
    width:8px;
    height:8px;
    display: inline-block;
    vertical-align: middle;
    border-radius:8px;
    margin-left:-10px;
    opacity:0;
    
    transition:all 1s cubic-bezier(0, .28, .22, .7);
    -webkit-transition:all 1s cubic-bezier(0, .28, .22, .7);
    -moz-transition:all 1s cubic-bezier(0, .28, .22, .7);
    -ms-transition:all 1s cubic-bezier(0, .28, .22, .7);
    -o-transition:all 1s cubic-bezier(0, .28, .22, .7);
}

.sous-nav-item-name{
    display: inline-block;
    vertical-align: middle;
    margin-right:5px;
    margin-left: 5px;
}

.couverture{
    background-color: #00809e;
}

.isolation{
    background-color: #ee9d17;
}

.zinguerie{
    background-color: #164277;
}

.infiltration{
    background-color: #553c71;
}

.peinture{
    background-color: #d64f2e;
}

.charpente{
    background-color: #744f2e;
}

.nettoyage{
    background-color: #4c771e;
}

/*SECTION*/

#section{
    width:100%;
    position: relative;
}

.categorie{
    position: relative;
    border-bottom:1px solid white;
    width:100%;
    height:300px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
}

.categorie:hover .filtre{
    display:none;
}

.categorie h1{
    color:white;
    letter-spacing: 20px;
    margin-left: 5px;
    position: absolute;
    top:50%;
    left:50%;
    z-index:2300;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}

.filtre{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2000;
    background-color: rgba(0,0,0,0.5);
}

.couverture{
   background-image:url(images/couverture/slide1-couverture.jpg); 
}

.isolation{
   background-image:url(images/isolation/slide1-isolation.jpg); 
}

.zinguerie{
   background-image:url(images/zinguerie/slide1-zinguerie.jpg); 
}

.infiltration{
   background-image:url(images/infiltration/slide1-infiltration.jpg); 
}

.peinture{
   background-image:url(images/peinture/slide1-peinture.jpg); 
}

.charpente{
   background-image:url(images/charpente/slide1-charpente.jpg); 
}

.nettoyage{
   background-image:url(images/nettoyage/slide1-nettoyage.jpg); 
}
/*FOOTER*/

footer{
    text-align: center;
    padding-top:50px;
    padding-bottom:50px;
    color:#3e3a3a;
    background-color: #fff;
}

.footer-row{
    display:inline-block;
    width:320px;
}

.footer-row a{
    font-size:14px;
    color:#3e3a3a;
    text-decoration: none;
    transition: color 0.3s linear;
}

.footer-row a:hover{
    color:#d01411;
}

.footer-row li{
    margin-top:10px;
    margin-bottom:10px;
}

/*HAMBURGER CLOSE*/

#close{
    display:none;
}

.hamburger{
    display:none;
    vertical-align: middle;
    margin-left:44%;
}

.hamburger .line{
  width: 50px;
  height: 5px;
  background-color: #ac2321;
  display: block;
  margin: 8px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hamburger:hover{
  cursor: pointer;
}

#hamburger-5.is-active{
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

#hamburger-5.is-active .line:nth-child(2){
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

#hamburger-5 .line:nth-child(2){
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}


#hamburger-5.is-active .line:nth-child(2){
  opacity: 0;
}

#hamburger-5.is-active .line:nth-child(1),
#hamburger-5.is-active .line:nth-child(3){
  width: 35px;
  -webkit-transform-origin: right;
  -moz-transform-origin: right;
  -ms-transform-origin: right;
  -o-transform-origin: right;
  transform-origin: right;
}

#hamburger-5.is-active .line:nth-child(1){
  -webkit-transform: translateY(15px) rotate(45deg);
  -ms-transform: translateY(15px) rotate(45deg);
  -o-transform: translateY(15px) rotate(45deg);
  transform: translateY(15px) rotate(45deg);
}

#hamburger-5.is-active .line:nth-child(3){
  -webkit-transform: translateY(-15px) rotate(-45deg);
  -ms-transform: translateY(-15px) rotate(-45deg);
  -o-transform: translateY(-15px) rotate(-45deg);
  transform: translateY(-15px) rotate(-45deg);
} 


/*RESPONSIVE*/

@media screen and (max-width:960px){
    .nav-items{
        display: inline-block;
        margin-left:20px;
        margin-right:20px;
    }
}

@media screen and (max-width:790px){
    #separateur{
        display:none;
    }
}

@media screen and (max-width:760px){
    .nav-items{
        display: inline-block;
        margin-left:20px;
        margin-right:20px;
    }
}

@media screen and (max-width:660px){
    .nav-items{
        display: inline-block;
        margin-left:10px;
        margin-right:10px;
    }
}

@media screen and (max-width:550px){
    .nav-items{
        display: inline-block;
        margin-left:3px;
        margin-right:3px;
    }
}

@media screen and (max-width:520px){
    header img{
        width:80px;
    }
    
    .tiret-header{
        display:none;
    }
    
    #urgence{
        width:100%;
        color:white;
        font-size:13px;
        background-color: rgba(0,0,0,0.4);
        text-align: center;
        padding:6px 0 6px 0;
        margin:0;
        position: relative;
        top:0;
        left:0;
        z-index:3000;
    }
    
    .hamburger{
        display:inline-block;
    }
    
    nav{
        position: fixed;
        display:none;
        top:0;
        left:0;
        padding-top:70px;
        padding-bottom:50px;
        font-size:18px;
    }
    
    .nav-items{
        display:block;
        margin-left:0px;
        margin-right:0px;
        margin-bottom:20px;
    }
    
    #close{
        display:block;
        width:25px;
        position: absolute;
        top:20px;
        right:20px;
        cursor:pointer;
    }
    
    #close:hover{
        opacity: 0.1;
    }
    
    .categorie{
        height:200px;
    }
    
    .categorie h1{
        letter-spacing:0px;
    }
}