html {
   position: relative;
   min-height: 100%;
}

body{
   font-family: 'Open Sans', sans-serif;
   /*background-image: url("../img/bright_squares.png");*/
   /*background-image: url("../img/brickwall.png");*/
   /*background-image: url("../img/eight_horns_v2.png");*/
   background-color: #f9f9f9;
   background-repeat: repeat;
}

a:focus{
   outline: none;
}

.container{
   position: relative;
}

.header-container{
   width: 100%;
   background-color: #262626;
   padding: 20px 0 20px 0;
   border-bottom: 8px solid #3d3d46;
   position: relative;
   box-shadow: 0 4px 5px 0 rgba(68, 68, 68, 0.45);
   margin: 0 0 40px 0;
}

#main-logo{
   margin: 0 0 20px 0;
}

.logo-text{
   color: #bfbfbf;
   text-align: center;
   font-family: 'Fredericka the Great', cursive;
   font-size: 66px;
   margin: 0;
   text-shadow:
      2px 2px 0 #262626,
      3px 3px 0 #50505b;
}

.logo-text a{
   color: #FFFFFF;
   text-decoration: none;
}

.logo-text a:hover{
   text-decoration: none;
   color: #FFFFFF;
}

.logo-text a img{
   width: 110px;
}

.logo div{
   text-align: center;
   font-family: 'Old Standard TT', serif;
   font-size: 22px;
   color: #BFBFBF;
   text-shadow: 1px 1px 0 #33333a;
}

#mobile{
   display: none;
}

#mobile a{
   color: #FFFFFF;
   text-decoration: none;
}

#mobile :hover{
   color: #FFFFFF;
   text-decoration: none;
}

#mobile .sub-title{
   color: #BFBFBF;
}

#menu{
   font-size: 15px;
   padding: 0;
   margin: 0;
   list-style: none;

   -ms-box-orient: horizontal;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;

   -webkit-justify-content: center;
   justify-content: center;
}

#menu li:not(.no-item){
   margin: 10px 13px 10px;
   text-align: center;
}

#menu .no-item a{
   margin: 0 40px;
   color: #FFFFFF;
   border: none;
}

#menu .no-item a:hover{
   border: none;
}

#menu .no-item img{
   width: 90px;
   height: auto;
   margin: 12px 40px 0;
}

#menu li a{
   color: #BFBFBF;
   text-decoration: none;
   border-bottom: 1px solid #262626;

   -webkit-transition: all 200ms ease 0s;
   -moz-transition: all 200ms ease 0s;
   -o-transition: all 200ms ease 0s;
   transition: all 200ms ease 0s;
}

#menu li a:hover,
#menu li.active a{
   color: #FFFFFF;
   border-bottom: 1px solid #FFFFFF;
}

.footer{
   background-color: #dcdcdc;
   bottom: 0;
   padding: 20px 0;
   position: absolute;
   width: 100%;
   border-top: 1px solid #d1d1d1;
   text-align: center;
}

.footer .tel{
   font-size: 20px;
}

.jumbotron{
   background: none;
   border-radius: 0;
   text-align: center;
   margin: 0 0 0;
}

.jumbotron h1{
   font-size: 54px;
   margin: 0 0 15px 0;
}

.jumbotron p{
   font-size: 18px;
}

.services h2{
   margin: 30px 0 50px;
   text-align: center;
}

.deco-left{
   position: absolute;
   left: 0px;
   top: 42px;
   overflow: hidden;
   width: 90px;
   height: auto;
}

.deco-right{
   right: 0px;
   top: 42px;
   position: absolute;
   overflow: hidden;
   width: 90px;
   height: auto;
}

.deco img{
   width: 90px;
   height: auto;
}

.marketing h1,
.marketing h2,
.customers h2{
   text-shadow: 1px 1px 0 #bfbfbf;
}

.marketing .col-sm-4 {
   margin-bottom: 40px;
   padding: 20px;
   text-align: center;
   transition: all 0.2s ease-in-out 0s;
}

.marketing .col-sm-4:hover{  
   background-color: #dee5dd;
   border-radius: 6px;
   cursor: default;
   transform: scale(1.05);
}

.marketing .col-sm-4:hover a{
   text-shadow: none;
}

.marketing .col-sm-4 .btn{
   margin: 20px 0 0 0;
   transition: all 0.2s ease-in-out 0s;
}

.marketing .col-sm-4:hover .btn{
   background-color: #5cb85c;
   border-color: #4cae4c;
   color: #fff
}

.marketing .col-sm-4:hover .btn:hover{
    background-color: #449d44;
    border-color: #398439;
    color: #fff;
}

.marketing .fa{
   font-size: 95px;
}
.marketing .col-sm-4 p{
   font-weight: 200;
}

.featurette{
   margin: 40px 0;
}

.featurette-heading {
   font-size: 50px;
   margin-top: 0;
   padding: 0 15px;
   word-wrap: break-word;
}

.featurette p{
   line-height: 24px;
}

.customers{
   background-color: #eeeeee;
   margin: 40px 0 -40px;
   padding: 100px 100px 130px;
   box-shadow: 0 1px 8px 0 rgba(68, 68, 68, 0.45);
}

.customers .overlay{
   position: relative;
}

.customers .overlay-left{
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,ffffff+100&1+0,0+100 */
   background: -moz-linear-gradient(left, rgba(238,238,238,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to right, rgba(238,238,238,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
   position: absolute;
   z-index: 999;
   width: 13%;
   height: 60px;
}

.customers .overlay-right{
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,eeeeee+100&0+0,1+100 */
   background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(238,238,238,1) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(238,238,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(238,238,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#eeeeee',GradientType=1 ); /* IE6-9 */
   position: absolute;
   z-index: 999;
   width: 13%;
   height: 60px;
   right: 0;
   top: 0;
}

.customers h2{
   margin: 0 0 70px 0;
   text-align: center;
}

.detail p{
   line-height: 27px;
}

.detail p strong{
   display: block;
   margin: 30px 0 0 0;
}

.detail img{
   width: 100%;
}

/* Offerte */
section.offerte {
   background-color: #3d3d46;
   color: #f9f9f9;
   margin: 40px 0 0;
   padding: 40px 0;
   text-shadow: 2px 2px 0 #2d2d36;
   width: 100%;
   border-top: 2px solid #5d5d66;
}

section.offerte .wrapper {
   margin: 0 auto;
   max-width: 540px;
   width: 40%;
}

section.offerte .wrapper h2 {
   font-size: 1.9em;
   margin: 1em 0 0.3em;
}

section.offerte .wrapper h2, section.offerte .wrapper p {
   text-align: center;
}

section.offerte .wrapper p.offerte-sub-title {
    font-size: 1.1em;
    margin: 0 0 2em;
}

section.offerte .wrapper #submit {
   margin: 20px 0 15px;
   width: 100%;
}

section.offerte .wrapper .g-recaptcha{
    margin: 30px 0 10px 0;
}

section.offerte .wrapper h2, section.offerte .wrapper p {
   text-align: center;
}

section.offerte .wrapper h2 {
   font-weight: 600;
   margin: 1em 0 0.3em;
}

section.offerte .wrapper p.or-call {
    margin: 1em 0;
}

section.offerte textarea{
    resize:vertical;
    min-height: 130px;
}

footer{
   background-color: #262626;
   padding: 60px 0;
   color: #f9f9f9;
   text-shadow: 2px 2px 0 #2d2d36;
   border-top: 2px solid #2d2d36;
}

footer .certificate,
footer .contact{
   width: 48%;
   float: left;
   text-align: center;
}

footer .contact{
   width: 48%;
   float: right;
}

footer .contact ul{
   list-style: none;
   margin: 0;
   padding: 0;
}

footer h3{
   margin: 0 0 25px 0;
}

footer .image-wrapper img{
   width: 90px;
}

footer .certificate .image-wrapper img:nth-child(even){
   margin: 0 30px;
}

@media only screen and (min-device-width : 0pc) and (max-device-width : 767px) {
   .marketing .col-sm-4{
      margin: 0 10% 40px;
   }

   .customers{
      padding: 100px 30px 130px;
   }

   footer .certificate,
   footer .contact{
      width: 100%;
      text-align: center;
      margin: 35px 0;
      padding: 0 20px;
   }
}

@media only screen and (min-device-width : 0px) and (max-device-width : 775px) {
   #menu{
      display: block;
   }

   #menu li:not(.no-item){
      margin: 30px 0;
      text-align: center;
      width: 100%;
      line-height: normal;
   }

   #menu .no-item{
      display: none;
   }

   .footer{
      height: 135px;
   }

   .deco{
      display: none;
   }

   section.offerte .wrapper{
      margin: 0 auto;
      width: 90%;
   }

}

@media only screen and (min-device-width : 775px) and (max-device-width : 990px) {
   #menu .no-item{
      display: none;
   }

   section.offerte .wrapper{
      margin: 0 auto;
      width: 90%;
   }
}

@media only screen and (min-device-width : 990px) and (max-device-width : 1200px) {
   #menu .no-item{
      display: none;
   }
}