/* Roboto --------------------------------------------------------------------*/
  /* Regular */
  @font-face{
    font-family: 'Roboto-regular';
    src: url("/assets/font/roboto/Regular/Roboto-Regular.woff2?v=2.137") format("woff2"), url("/assets/font/roboto/Regular/Roboto-Regular.woff?v=2.137") format("woff");
    font-weight: 400;
    font-style: normal;
  }
  @font-face{
    font-family: 'Roboto-regular';
    src: url("/assets/font/roboto/Regular/Roboto-Regular.woff2?v=2.137") format("woff2"), url("/assets/font/roboto/Regular/Roboto-Regular.woff?v=2.137") format("woff");
    font-weight: normal;
    font-style: normal;
  }
  .roboto-regular{
    font-family: 'Roboto-regular';
  }
  /* Medium */
  @font-face{
    font-family: 'Roboto-medium';
    src: url("/assets/font/roboto/Medium/Roboto-Medium.woff2?v=2.137") format("woff2"), url("/assets/font/roboto/Medium/Roboto-Medium.woff?v=2.137") format("woff");
    font-weight: 500;
    font-style: normal;
  }
  .roboto-medium{
    font-family: 'Roboto-medium';
  }
  /* Medium Italic */
  @font-face{
    font-family: 'Roboto-mediumitalic';
    src: url("/assets/font/roboto/MediumItalic/Roboto-MediumItalic.woff2?v=2.137") format("woff2"), url("/assets/font/roboto/MediumItalic/Roboto-MediumItalic.woff?v=2.137") format("woff");
    font-weight: 500;
    font-style: italic;
  }
  .roboto-mediumitalic{
    font-family: 'Roboto-mediumitalic';
  }
  /* Bold */
  @font-face{
    font-family: 'Roboto-bold';
    src: url("/assets/font/roboto/Bold/Roboto-Bold.woff2?v=2.137") format("woff2"), url("/assets/font/roboto/Bold/Roboto-Bold.woff?v=2.137") format("woff");
    font-weight: 700;
    font-style: normal;
  }
  @font-face{
    font-family: 'Roboto-bold';
    src: url("/assets/font/roboto/Bold/Roboto-Bold.woff2?v=2.137") format("woff2"), url("/assets/font/roboto/Bold/Roboto-Bold.woff?v=2.137") format("woff");
    font-weight: bold;
    font-style: normal;
  }
  .roboto-bold{
    font-family: 'Roboto-bold';
  }

/* Novecentowide -------------------------------------------------------------*/
  /* Book */
  @font-face{
    font-family: 'Novecento-book';
    src: url('/assets/font/novecentowide/Book/Novecentosanswide-Book-webfont.eot');
    src: url('/assets/font/novecentowide/Book/Novecentosanswide-Book-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/font/novecentowide/Book/Novecentosanswide-Book-webfont.woff2') format('woff2'), url('/assets/font/novecentowide/Book/Novecentosanswide-Book-webfont.woff') format('woff'), url('/assets/font/novecentowide/Book/Novecentosanswide-Book-webfont.ttf') format('truetype'), url('/assets/font/novecentowide/Book/Novecentosanswide-Book-webfont.svg#novecento_sans_wide_bookbold') format('svg');
    font-weight: 300;
    font-style: normal;
  }
  .novecento-book{
    font-family: 'Novecento-book';
  }
  /* Regular */
  @font-face{
    font-family: 'Novecento-regular';
    src: url('/assets/font/novecentowide/Regular/Novecentosanswide-Normal-webfont.eot');
    src: url('/assets/font/novecentowide/Regular/Novecentosanswide-Normal-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/font/novecentowide/Regular/Novecentosanswide-Normal-webfont.woff2') format('woff2'), url('/assets/font/novecentowide/Regular/Novecentosanswide-Normal-webfont.woff') format('woff'), url('/assets/font/novecentowide/Regular/Novecentosanswide-Normal-webfont.ttf') format('truetype'), url('/assets/font/novecentowide/Regular/Novecentosanswide-Normal-webfont.svg#novecento_sans_widenormal') format('svg');
    font-weight: 400;
    font-style: normal;
  }
  .novecento-regular{
    font-family: 'Novecento-regular';
  }
  /* DemiBold */
  @font-face{
    font-family: 'Novecento-demibold';
    src: url('/assets/font/novecentowide/DemiBold/Novecentosanswide-DemiBold-webfont.eot');
    src: url('/assets/font/novecentowide/DemiBold/Novecentosanswide-DemiBold-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/font/novecentowide/DemiBold/Novecentosanswide-DemiBold-webfont.woff2') format('woff2'), url('/assets/font/novecentowide/DemiBold/Novecentosanswide-DemiBold-webfont.woff') format('woff'), url('/assets/font/novecentowide/DemiBold/Novecentosanswide-DemiBold-webfont.ttf') format('truetype'), url('/assets/font/novecentowide/DemiBold/Novecentosanswide-DemiBold-webfont.svg#novecento_sans_wide_bookbold') format('svg');
    font-weight: 600;
    font-style: normal;
  }
  .novecento-demibold{
    font-family: 'Novecento-demibold';
  }
  /* Bold */
  @font-face{
    font-family: 'Novecento-bold';
    src: url('/assets/font/novecentowide/Bold/Novecentosanswide-Bold-webfont.eot');
    src: url('/assets/font/novecentowide/Bold/Novecentosanswide-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/font/novecentowide/Bold/Novecentosanswide-Bold-webfont.woff2') format('woff2'), url('/assets/font/novecentowide/Bold/Novecentosanswide-Bold-webfont.woff') format('woff'), url('/assets/font/novecentowide/Bold/Novecentosanswide-Bold-webfont.ttf') format('truetype'), url('/assets/font/novecentowide/Bold/Novecentosanswide-Bold-webfont.svg#novecento_sans_wide_bookbold') format('svg');
    font-weight: 700;
    font-style: normal;
  }
  .novecento-bold{
    font-family: 'Novecento-bold';
  }

/* Global --------------------------------------------------------------------*/

html, body{
  width: 100%;
  height: 100%;
  font-size: 16px;
}

.color-grey{
  color: #7f7f7f;
}

.index-1{
  z-index: 1;
}
.index-2{
  z-index: 2;
}
.index-3{
  z-index: 3;
}
.index-4{
  z-index: 4;
}
.index-5{
  z-index: 5;
}

/* Font Size -----------------------------------------------------------------*/

.font-07{
  font-size: 0.7em;
}
.font-08{
  font-size: 0.8em;
}
.font-09{
  font-size: 0.9em;
}
@media screen and (max-width: 575px) {
  .font-07{
    font-size: 1em !important;
  }
  .font-08{
    font-size: 1em !important;
  }
  .font-09{
    font-size: 1em !important;
  }
}
.font-10{
  font-size: 1em;
}
.font-11{
  font-size: 1.1em;
}
.font-12{
  font-size: 1.2em;
}
.font-13{
  font-size: 1.3em;
}
.font-14{
  font-size: 1.4em;
}
.font-15{
  font-size: 1.5em;
}
.font-16{
  font-size: 1.6em;
}
.font-17{
  font-size: 1.7em;
}
.font-18{
  font-size: 1.8em;
}
.font-19{
  font-size: 1.9em;
}
.font-20{
  font-size: 2em;
}
.font-21{
  font-size: 2.1em;
}
.font-22{
  font-size: 2.2em;
}
.font-23{
  font-size: 2.3em;
}
.font-24{
  font-size: 2.4em;
}
.font-25{
  font-size: 2.5em;
}
.font-26{
  font-size: 2.6em;
}
.font-27{
  font-size: 2.7em;
}
.font-28{
  font-size: 2.8em;
}
.font-29{
  font-size: 2.9em;
}
.font-30{
  font-size: 3em;
}

[data-aos="rotate"] {
  transform-origin: bottom left;
  transform: rotate(-90deg);
  transition-property: transform;
}
[data-aos="rotate"].aos-animate {
  transform: rotate(0deg);
}

[data-aos="rotate2"] {
  transform-origin: top left;
  transform: rotate(-120deg);
  transition-property: transform;
}
[data-aos="rotate2"].aos-animate {
  transform: rotate(0deg);
}

[data-aos="rotate3"] {
  transform-origin: top center;
  transform: rotate(-180deg);
  transition-property: transform;
}
[data-aos="rotate3"].aos-animate {
  transform: rotate(0deg);
}

[data-aos="rotate4"] {
  transform-origin: bottom right;
  transform: rotate(-90deg);
  transition-property: transform;
}
[data-aos="rotate4"].aos-animate {
  transform: rotate(0deg);
}

[data-aos="rotate5"] {
  transform-origin: right center;
  transform: rotate(180deg);
  transition-property: transform;
}
[data-aos="rotate5"].aos-animate {
  transform: rotate(0deg);
}

[data-aos="rotate20"] {
  transform-origin: right center;
  transform: rotate(180deg) translateY(-50%);
  transition-property: transform;
}
[data-aos="rotate20"].aos-animate {
  transform: rotate(0deg) translateY(-50%);
}

/* Header --------------------------------------------------------------------*/

#navbar{
  width: 100%;
  min-width: 320px;
  padding-top: 25px;
  padding-bottom: 25px;
  background: none;
  box-shadow: none;
  transition-duration: 1s;
}

#navbar2{
  padding-top: 25px;
  padding-bottom: 25px;
  background: rgba(52, 59, 64, 0.9) !important;
  box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.3) !important;
  transition-duration: 1s;
}

.scrolled{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  background: rgba(52, 59, 64, 0.9) !important;
  box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.3) !important;
  transition-duration: 1s;
}

#logo{
  height: 1.8em;
}

.nav-line-on{
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 2px;;
  background-color: #89b2ca;
  transition-duration: 0.5s;
}

.nav-line-off{
  position: absolute;
  bottom: 0;
  left: 50%;
  display: inline-block;
  width: 0%;
  height: 2px;
  background-color: none;
  transition-duration: 0.5s;
}

/* Slide 1 -------------------------------------------------------------------*/

#accueil{
  box-shadow: inset 0px 0px 15px 3px rgba(0, 0, 0, 0.3);
  overflow-x: hidden;
}

#h1{
  letter-spacing: 0.12em;
  line-height: 1.3em;
}

#slide1-figure{
  bottom: 0;
  left: 0;
  width: 14%;
}

.arrow {
    opacity: 0;
    position: absolute;
        left: 50%;
        bottom: 5%;
    transform-origin: 50% 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 99;
}

.arrow-first {
    animation: arrow-movement 3s ease-in-out infinite;
}
.arrow-second {
    animation: arrow-movement 3s 1.5s ease-in-out infinite;
}

.arrow:before,
.arrow:after {
    background: #fff;
    content: '';
    display: block;
    height: 3px;
    position: absolute;
        top: 0;
        left: 0;
    width: 30px;
}

.arrow:before {
    transform: rotate(45deg) translateX(-23%);
    transform-origin: top left;
}

.arrow:after {
    transform: rotate(-45deg) translateX(23%);
    transform-origin: top right;
}

@keyframes arrow-movement {
    0% {
        opacity: 0;
        bottom: 10%;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


/* Slide 2 -------------------------------------------------------------------*/

#a-propos{
  padding-top: 8em;
  padding-bottom: 8em;
  overflow: hidden;
}

.blue-background{
  background-color: #006898;
}

#slide2-img{
  z-index: 3;
}

#slide2-picto{
  width: 35%;
}

@media screen and (max-width: 767px) {
  #slide2-picto{
    width: 25% !important;
  }
}

#slide2-text{
  letter-spacing: 0;
  line-height: 1.3em;
}

#slide2-figure2{
  top: -20%;
  left: -7.2%;
  width: 22%;
  z-index: 2;
}

#slide2-figure1{
  bottom: -8em;
  right: -22%;
  width: 22%;
  z-index: 2;
}

@media screen and (max-width: 767px) {
  #slide2-figure2{
    top: -8em;
    left: -0.5%;
    width: 14.5%;
  }

  #slide2-figure1{
    bottom: -8em;
    right: 0%;
  }
}


/* Slide 3 -------------------------------------------------------------------*/

#mission{
  padding-top: 8em;
  padding-bottom: 0em;
  overflow: hidden;
  background: #f4f4f4;
}

.slide3-pictos{
  width: 50%;
}

@media screen and (max-width: 767px) {
  .slide3-pictos{
    width: 25% !important;
  }
}

#slide3-figure{
  top: 0;
  left: 7%;
  width: 28%;
}

#slide4-h2{
  padding-top: 8em;
}

/* Slide 4 -------------------------------------------------------------------*/

#clients{
  padding-top: 8em;
  padding-bottom: 8em;
  overflow-x: hidden;
  z-index: 2;
}

.bg-gradiant{
  background: linear-gradient(top, #f4f4f4, #f4f4f4 60%, #ffffff 60%, #ffffff);
  background: -webkit-linear-gradient(top, #f4f4f4, #f4f4f4 60%, #ffffff 60%, #ffffff);
}

#slide4-encart{
  overflow-y: hidden;
  overflow-x: hidden;
  white-space: nowrap;
  box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.3);
}

.slide4-hori{
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  width: 100%;
}

#left, #right{
  position: relative;
  top: 50%;
  width: 15%;
  min-width: 10px;
  transform: translateY(0%);
	cursor: pointer;
}
#left{
  transform: translateY(0%) rotate(180deg);
	opacity: 0.3;
	cursor: default;
}

#slide4-figure1{
  bottom: 0;
  right: 11.3%;
  width: 14%;
}

#slide4-figure2{
  bottom: 0%;
  left: 5.1%;
  width: 14%;
  transform: translateY(50%);
  z-index: 4;
}

@media screen and (max-width: 767px) {
  #slide4-figure1{
    bottom: 0;
    right: 0.5%;
    width: 14%;
  }

  #slide4-figure2{
    bottom: 0%;
    left: -5.6%;
    width: 14%;
  }
}

/* Slide 5 -------------------------------------------------------------------*/

#equipe{
  padding-bottom: 8em;
  overflow-x:hidden;
  z-index: 1;
}

#slide5-figure-div{
  top: 40%;
  right: 10%;
  width: 95%;
  transform: translateY(-68%);
  overflow: hidden;
  z-index: 4;
}

#slide5-figure{
  width: 14%;
}


/* Slide 6 -------------------------------------------------------------------*/

#contact{
  padding-top: 8em;
  padding-bottom: 8em;
  overflow: hidden;
  box-shadow: inset 0px 0px 15px 3px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 767px) {
  #contact{
  padding-bottom: 4em;
}
}

.slide6-picto{
  height: 1.3em;
}

#slide6-form input{
  padding: 1em;
  outline: none;
  border: none;
}

#slide6-form textarea{
  padding: 1em;
  height: 14.8em;
  outline: none;
  border: none;
}

.submit{
  color: #ffffff;
  padding: 1.2em 2em;
  background-color: #2a8cad;
  border: none;
  border-radius: 500px 500px;
  cursor: pointer;
}

#slide6-figure{
  bottom: 0;
  right: 0;
  width: 14%;
}

.slide6-link{
  text-decoration: none;
}
.slide6-link:hover{
  text-decoration: none;
}
.slide6-link:active{
  text-decoration: none;
}

.slide6-link span{
  color: #89b2ca;
  text-decoration: underline;
}
.slide6-link:hover span{
  color: #95c1dc;
}
.slide6-link:active span{
  color: #89b2ca;
}

.slide6-link2{
  color: #89b2ca;
  text-decoration: underline;
}
.slide6-link2:hover{
  color: #95c1dc;
}
.slide6-link2:active{
  color: #89b2ca;
}



[data-aos="rotate-bottom-left"] {
  transform-origin: left bottom;
  transform: rotate(-180deg) translateY(50%);
  transition-property: transform;
}
[data-aos="rotate-bottom-left"].aos-animate {
  transform: rotate(0deg) translateY(50%);
}

[data-aos="rotate-bottom-right"] {
  transform-origin: right bottom;
  transform: rotate(180deg) translateY(50%);
  transition-property: transform;
}
[data-aos="rotate-bottom-right"].aos-animate {
  transform: rotate(0deg) translateY(50%);
}

.pano-bottom-left{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 14%;
}
.pano-bottom-right{
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14%;
}

.overflow-hidden{
  overflow: hidden;
}

.scale-pano div{
  padding-bottom: 56.25%;
}

.scale-pano img{
  transition-duration: 0.5s, 0.5s;
  transform: scale(1);
}

.scale-pano:hover img{
  transform: scale(1.1);
}

.scale-pano h2{
  transition-duration: 0.5s, 0.5s;
  transform: scale(1);
}

.scale-pano:hover h2{
  transform: scale(1.1);
}

.scale-pano a{
  text-decoration: none;
}

.video-wrapper{
  padding-bottom: 56.25%;
}
.video-wrapper iframe{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}

.video-wrapper-img {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}

#slide20-figure{
  top: 50%;
  right: 0;
  width: 14%;

}