html{
  background: url(img/home_bg.jpg) no-repeat top center;
  background-size: cover;
  height: 100%;
}
body{
  background: transparent;
  min-height: 550px;
}
@media screen and (max-width: 1279px){
  body{
    height: 100%;
  }
}

header{
  padding-top: 10px;
  padding-bottom: 25px;
}
header h1{
  width: 130px;
  height: 25px;
  margin-bottom: 10px;
}
header .tab{
  height: 12px;
}
header .tab.chauffage{
  width: 41px;
}
header .tab.chauffe-eau{
  width: 45px;
}
header .tab.ventilation{
  width: 42px;
}


.container{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: 1280px;
  margin: auto;
  z-index: 1;
}
.container.video{
  bottom: 0;
  top: auto;
  z-index: 0;
}
.container.video:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(img/home_bg.png) no-repeat bottom -60px center;
  background-size: cover;
  z-index: 0;
  pointer-events: none;
}
.content{
  position: relative;
  max-width: 640px;
  margin: auto;
}
.content.text{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.content.text header{
  padding-top: 20px;
  padding-bottom: 10px;
}
.content.text .intro{
  font-size: 18px; 
  padding: 0 40px;
}
.content.text .intro .desc{
  color: #76ad1c;
  padding-left: 70px;
  background: url(img/home_icon.png) no-repeat top left;
  background-size: 55px;
  min-height: 55px;
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
}
.content.text .intro .skip{
  display: inline-block;
  text-decoration: none;
  color: #fff;
  background: #76ad1c;
  padding: 10px 20px;
  border-radius: 20px;
}
.content.video{
  z-index: -1;
}
.content.video .video_wrapper{
  padding-top: 120%;
}
.content.video .video_position{
  position: absolute;
  top: 55.8%;
  left: 47.4%;
  width: 48.6%;
  padding-top: 42%;
  overflow: hidden;
  background: #000;
}
.content.video .video_wrapper video{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 114.5%;
  margin: -5% -8.2%;
}

@media screen and (max-width: 640px) {
  body{
    min-height: 480px;
  }
  .container{
    max-width: 960px; 
  }
  .content{
    max-width: 480px;
  }
  .content.text header{
    padding-top: 30px;
  }
  .content.text .intro{
    padding: 0 20px;
  }
  .container.video:after{
    background-position : bottom -45px center;
  }
}
@media screen and (max-width: 480px) {
  body{
    min-height: 420px;
  }
  .container{
    max-width: 640px; 
  }
  .content{
    max-width: 320px;
  }
  .content.text header{
    padding-top: 20px;
  }
  .content.text .intro .desc{
    padding-top: 0;
    margin-top: 10px;
  }
  .container.video:after{
    background-position : bottom -30px center;
  }
}