@charset "UTF-8";
/* ----------------------------------------------------------- */
/* COLOR
/* ----------------------------------------------------------- */
/* ----------------------------------------------------------- */
/* FONTS
/* ----------------------------------------------------------- */
@font-face {
  font-family: "simplon_normbold";
  src: url("../fonts/simplonnorm-bold-webfont.eot");
  src: url("../fonts/simplonnorm-bold-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/simplonnorm-bold-webfont.woff2") format("woff2"),
    url("../fonts/simplonnorm-bold-webfont.woff") format("woff"),
    url("../fonts/simplonnorm-bold-webfont.ttf") format("truetype"),
    url("../fonts/simplonnorm-bold-webfont.svg#simplon_normbold") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "simplon_normregular";
  src: url("../fonts/simplonnorm-regular-webfont.eot");
  src: url("../fonts/simplonnorm-regular-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/simplonnorm-regular-webfont.woff2") format("woff2"),
    url("../fonts/simplonnorm-regular-webfont.woff") format("woff"),
    url("../fonts/simplonnorm-regular-webfont.ttf") format("truetype"),
    url("../fonts/simplonnorm-regular-webfont.svg#simplon_normregular")
      format("svg");
  font-weight: normal;
  font-style: normal;
}
/* ----------------------------------------------------------- */
/* DEFAULT
/* ----------------------------------------------------------- */
html,
body,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  list-style: none;
  outline: 0;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-style: 1em;
  line-height: 1.2;
  overflow-x: hidden;
  font-family: "simplon_normregular";
  margin-left: 160px;
  padding-top: 80px;
  background: #0d0d0d;
}

.mask-img {
  width: 100%;
  height: 100%;
  display: block;
}

a {
  color: #986643;
}
a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------- */
/* GENERAL
/* ----------------------------------------------------------- */
.border.top {
  width: 100%;
  height: 80px;
  background: #0d0d0d;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
}
.border.top .legend {
  float: right;
  margin-right: 60px;
  line-height: 60px;
  color: white;
  font-family: "simplon_normregular";
  font-size: 0.75em;
  letter-spacing: 0.1em;
}

.border.left {
  width: 160px;
  height: 100vh;
  background: #0d0d0d;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  min-height: 830px;
}

.home .border.left,
.page .border.left {
  position: fixed;
  top: 0;
  left: 0;
}

.container {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------- */
/* HEADER
/* ----------------------------------------------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 40;
}
header .branding {
  float: left;
  width: 80px;
  height: 100%;
  background: #986643;
  position: relative;
  line-height: 80px;
  text-align: center;
  font-family: "simplon_normregular";
  font-size: 1.25em;
  color: white;
  z-index: 3;
}
header .claim {
  color: #fff;
  font-size: 0.875em;
  line-height: 20px;
  letter-spacing: 0.25em;
  padding: 20px 0 20px 180px;
  color: #986643;
}
header .claim span {
  font-size: 1.3em;
  letter-spacing: 0.5em;
  color: #fff;
}
header .toggle-nav {
  float: left;
  width: 80px;
  height: 100%;
  background: #222;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
header .toggle-nav span {
  position: absolute;
  top: 50%;
  margin-left: 25px;
}
header .toggle-nav span,
header .toggle-nav span:before,
header .toggle-nav span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 2px;
  width: 30px;
  background: white;
  position: absolute;
  display: block;
  content: "";
  transition: all 0.2s ease-in-out;
  /* active effect */
  left: 0;
}
header .toggle-nav span:before {
  top: -7px;
}
header .toggle-nav span:after {
  bottom: -7px;
}
header .toggle-nav:hover span::before {
  top: -9px;
}
header .toggle-nav:hover span::after {
  bottom: -9px;
}
header .toggle-nav.close span {
  background-color: transparent;
}
header .toggle-nav.close span::before {
  top: 0;
  width: 30px;
  transform: rotateZ(45deg);
}
header .toggle-nav.close span::after {
  bottom: 0;
  width: 30px;
  transform: rotateZ(-45deg);
}
header #navigation {
  width: 0;
  height: 100vh;
  background: #0d0d0d;
  position: fixed;
  top: 0;
  left: 0;
}
header #navigation .menu {
  display: none;
  width: 100%;
  height: 100%;
  padding: 160px 0 0 60px;
  line-height: 1.2;
}
header #navigation .menu li {
  list-style: decimal;
  font-family: "Times";
  font-size: 1.25em;
  color: #666;
}
header #navigation .menu li a {
  font-family: "simplon_normregular";
  font-size: 1.25em;
  text-transform: lowercase;
  padding-left: 20px;
  color: white;
  -moz-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
}
header #navigation .menu li a::first-letter {
  font-size: 0.875em;
}
header #navigation .menu li a:hover {
  color: #9c9c9c;
}

/* ----------------------------------------------------------- */
/* INTRO
/* ----------------------------------------------------------- */
#intro {
  width: 100%;
  height: calc(100vh - 80px);
  position: relative;
  background: #0d0d0d;
  /* button */
  /* title */
  /* image container */
  /* mask-img */
  /* introduction */
}
#intro #scroll-to-bottom {
  position: absolute;
  z-index: 30;
  bottom: 60px;
  left: 50%;
  width: 40px;
  margin-left: -20px;
  cursor: pointer;
}
#intro #scroll-to-bottom img {
  width: 100%;
}
#intro h1 {
  color: white;
  background: #0d0d0d;
  border-bottom: 10px solid #986643;
  font-family: "simplon_normregular";
  font-size: 1.25em;
  text-transform: lowercase;
  padding: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  position: absolute;
  top: 80px;
  left: -80px;
  z-index: 2;
}
#intro .letterFx {
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  padding: 0 80px;
}
#intro .letterFx .letter {
  font-size: 4em;
  line-height: 1.5;
  font-family: "simplon_normregular";
  color: white;
  letter-spacing: 0.5em;
}
#intro .mask-video {
  width: 100%;
  height: 100%;
  background: grey;
  position: relative;
}
#intro .mask-img {
  float: left;
  width: 50%;
}
#intro .mask-img.big {
  width: 100%;
}
#intro .intro-txt {
  /* à voir */
}
#intro .intro-txt .txt {
  height: auto;
  display: block;
  margin: 40px;
  padding: 20px;
  bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.875em;
  border-bottom: 10px solid #986643;
  position: absolute;
  background: #0d0d0d;
  color: white;
  font-family: "simplon_normregular";
}

.page #intro {
  height: calc((100vh - 60px) / 3 * 2);
  min-height: 500px;
}
@media (min-width: 1500px) {
  .page #intro {
    height: calc((100vh - 80px) / 3 * 2);
  }
}
.page #intro .mask-img.big {
  height: 100%;
}
.page #intro .txt {
  display: table;
  height: calc((100vh - 60px) / 3);
  min-height: 250px;
  padding: 0 30px 0 0;
}
@media (min-width: 1500px) {
  .page #intro .txt {
    height: calc((100vh - 80px) / 3);
  }
}
.page #intro .txt .inner-txt {
  display: table-cell;
  vertical-align: middle;
}

/* ----------------------------------------------------------- */
/* HIGHLIGHTS
/* ----------------------------------------------------------- */
#highlights .link {
  position: absolute;
  padding: 20px;
  top: 50%;
  left: 40px;
  margin-top: -20px;
  z-index: 1;
  cursor: pointer;
  color: white;
  font-family: "simplon_normregular";
  font-size: 0.875em;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  background: #0d0d0d;
  border-bottom: 10px solid #986643;
}
#highlights .highlight {
  width: 50%;
  height: calc(100vh - 60px);
  min-height: 750px;
  background: green;
  float: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
@media (min-width: 1500px) {
  #highlights .highlight {
    height: calc(100vh - 80px);
  }
}
#highlights .left {
  width: 50%;
  float: left;
}
#highlights .left .highlight {
  width: 100%;
  height: calc((100vh - 60px) / 2);
  min-height: 375px;
  background: yellow;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
@media (min-width: 1500px) {
  #highlights .left .highlight {
    height: calc((100vh - 80px) / 2);
  }
}
#highlights .left .highlight:last-of-type {
  width: calc(100% + 60px);
  background: red;
  z-index: 1;
  position: relative;
  height: calc((100vh - 60px) / 2 + 60px);
  min-height: 435px;
  margin-top: -60px;
}
@media (min-width: 1500px) {
  #highlights .left .highlight:last-of-type {
    margin-top: -80px;
    height: calc((100vh - 80px) / 2 + 80px);
  }
}

/* ----------------------------------------------------------- */
/* PRODUITS - REALISATIONS
/* ----------------------------------------------------------- */
#content {
  width: 100%;
  margin-top: 80px;
  float: left;
  padding-right: 40px;
  margin-left: -20px;
}
#content .inner {
  width: 100%;
}
#content .inner .product-el {
  position: relative;
  width: calc(50% - 40px);
  margin: 20px;
  float: left;
  box-shadow: 0 0 20px #000;
  background: #0d0d0d;
}
#content .inner .product-el img {
  opacity: 0.65;
  transition: all 0.3s ease-in-out;
  /* active effect */
}
#content .inner .product-el:hover img {
  opacity: 1;
}
#content .inner .product-el .title {
  position: absolute;
  font-size: 0.875em;
  text-transform: uppercase;
  background: white;
  border-bottom: 10px solid #986643;
  padding: 10px 20px;
  bottom: 40px;
  left: 40px;
  z-index: 1;
  font-family: "simplon_normregular";
  color: #fff;
  background: #0d0d0d;
}

/* ----------------------------------------------------------- */
/* PAGES (ENTREPRISE + CONTACT)
/* ----------------------------------------------------------- */
.page {
  background: #0d0d0d;
}
.page .container {
  font-family: "simplon_normregular";
  color: white;
  font-size: 1.25em;
  line-height: 1.5;
  margin-bottom: 80px;
}
.page .container .inner-txt {
  display: table-cell;
  vertical-align: middle;
}
.page .container .txt {
  float: left;
  width: 50%;
}
.page .container .left {
  position: relative;
  width: 50%;
  float: left;
  margin-top: -80px;
  z-index: 1;
}
.page .container .left .txt {
  width: calc(100% + 80px);
  background: #222;
  display: table;
  margin-left: -80px;
  padding: 80px;
  border-bottom: 10px solid #986643;
}
.page .container .left .mask-img {
  width: 100%;
  background: grey;
  height: calc((100vh - 60px) / 3 * 2 + 60px);
  min-height: 560px;
}
@media (min-width: 1500px) {
  .page .container .left .mask-img {
    height: calc((100vh - 80px) / 3 * 2 + 80px);
  }
}
.page .container .right {
  position: relative;
  width: 50%;
  float: left;
  z-index: 1;
}
.page .container .right .txt {
  width: 100%;
  background: #222;
  padding: 80px;
  display: table;
  border-bottom: 10px solid #986643;
}
.page .container .right .mask-img {
  width: 100%;
  height: calc((100vh - 60px) / 3 * 2);
  min-height: 500px;
  background: grey;
}
@media (min-width: 1500px) {
  .page .container .right .mask-img {
    height: calc((100vh - 80px) / 3 * 2);
  }
}
.page .container .right #map {
  width: 100%;
  height: calc((100vh - 60px) / 3);
  min-height: 250px;
  background: grey;
}
@media (min-width: 1500px) {
  .page .container .right #map {
    height: calc((100vh - 80px) / 3);
  }
}
.page .container .right #map .gm-style {
  width: calc(100% + 80px) !important;
  height: calc(100% + 80px) !important;
  margin: -40px;
}

/* ----------------------------------------------------------- */
/* FOOTER
/* ----------------------------------------------------------- */
footer {
  padding: 80px;
  border-bottom: 10px solid #986643;
  color: #fff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.875em;
  line-height: 1.5;
  background: #222;
}
footer a {
  color: #986643;
}
footer a:hover {
  text-decoration: underline;
}
footer .footer-el {
  width: 33.33%;
  float: left;
}

h3.series-title {
  width: 100%;
  display: block;
  float: none;
  clear: both;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.875em;
  padding: 40px 20px 10px 20px;
}