/* Monument Fonts */
@font-face{
  font-family: MonumentBold;
  src: url("./fonts/MonumentExtended/MonumentExtended-Bold.otf");
  font-weight: bold;
}
@font-face{
  font-family: MonumentLight;
  src: url("./fonts/MonumentExtended/MonumentExtended-Light.otf");
  font-weight: light;
}
@font-face{
  font-family: Monument;
  src: url("./fonts/MonumentExtended/MonumentExtended-Regular.otf");
  font-weight: regular;
}
@font-face{
  font-family: MonumentBlack;
  src: url("./fonts/MonumentExtended/MonumentExtended-Ultrabold.otf");
  font-weight: bolder;
}
@font-face{
  font-family: MonumentThin;
  src: url("./fonts/MonumentExtended/MonumentExtended-Ultralight.otf");
  font-weight: lighter;
}
/* Helvetica Fonts */
@font-face{
  font-family: HelveticaNeue;
  src: url("./fonts/HelveticaNeueLTPro/HelveticaNeueLTProLtEx.otf");
  font-weight: light;
}
@font-face{
  font-family: HelveticaNeueRegular;
  src: url("./fonts/HelveticaNeueLTPro/HelveticaNeueLTProEx.otf");
  font-weight: light;
}
/* Montserrat Fonts */
@font-face{
  font-family: Montserrat;
  src: url("./fonts/Montserrat/Montserrat-Regular.ttf");
  font-weight: regular;
}
@font-face{
  font-family: MontserratLight;
  src: url("./fonts/Montserrat/Montserrat-Light.ttf");
  font-weight: light;
}
@font-face{
  font-family: MontserratBold;
  src: url("./fonts/Montserrat/Montserrat-Bold.ttf");
  font-weight: bold;
}
@font-face{
  font-family: MontserratMedium;
  src: url("./fonts/Montserrat/Montserrat-Medium.ttf");
  font-weight: bold;
}

body{
  width: 100%;
  overflow-x: hidden;
  margin: -5px;
  background-color: #1b1b1b;
  /*background-color: #fffcf4;*/
  font-family: HelveticaNeue;
}

#corpus{
  background-color: #fffcf4;
  width: 125%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

a, a:visited{
  text-decoration: none;
}
 hr{
   color: rgba(0,0,0,0.1);
 }

/* Headers */
h1{
  font-family: MonumentLight;
  font-size: 70px;
  margin-bottom: 0px;
}
h2{
  font-family: HelveticaNeueRegular;
  font-size: 40px;
  color: white;
  margin-bottom: -5px;
  margin-top: 20px;
}
h3{
  font-family: HelveticaNeue;
  font-weight: light;
  color: #ff943e;
  font-size: 45px;
  margin-top: 5px;
  margin-bottom: 70px;
}
h4{
  font-family: HelveticaNeueRegular;
  font-size: 75px;
  margin-bottom: 0px;
}
h5{
  font-family: MonumentThin;
  color: white;
  font-size: 50px;
  margin-bottom: 20px;
}
h6{
  font-family: HelveticaNeueRegular;
  font-size: 60px;
  margin-bottom: 10px;
  margin-top: 100px;
}

/* Navbar */
#nav{
  font-family: HelveticaNeue;
  font-weight: light;
  width: 100%;
  margin: auto;
  background-color: #1b1b1b;
  padding-top: 50px;
  padding-bottom: 50px;
  color: white;
  font-size: 35px;
  padding-left: 10%;
  position: fixed;
  z-index: 10;
  transition: top 0.4s ease-in-out;
}

.nav-links{
  color: #eccbb1;
  text-decoration: none;
  margin-right: 12%;
  padding-bottom: 10px;
  transition: all 0.25s ease-out;
  vertical-align: middle;
}
.nav a:active{
  color: white;
  border-bottom: solid 2px orange;
  transition: all 0.25s ease-out;
}
.nav-logo{
  display: none;
}

.active{
  font-size: 40px;
  color: #ff943e;
  font-weight: bold;
}
.active:hover{
  color: #ff943e;
  font-weight: bold;
  border-bottom: solid 0px orange;
}

#presentation{
  width: 90%;
  margin: auto;
  background-color: #fffcf4;
  padding-top: 250px;
  margin-bottom: 80px;
}
.col60{
  width: 100%;
}
.col40{
  display: none;
}
.pp{
  width: 400px;
  margin-left: -110px;
  margin-top: -40px;
  border-radius: 10px;
}
.camera-img{
  display: none;
}

p{
  color: #2f2639;
  font-family: Montserrat;
  font-size: 35px;
  width: 90%;
  margin-bottom: 40px;
}

.col60 p{
  width: 100%;
}

#key-numbers{
  background-color: #ff943e;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 50px;
  margin: auto;
  color: white;
  font-family: Montserrat;
  font-size: 50px;
}
#key-numbers table{
  width: 100%
}
#key-numbers table tr td{
  width: 33%;
  text-align: center;
  padding: 20px;
  padding-left: 30px;
  padding-right: 30px;
}

#key-numbers h2{
  font-size: 60px;
}

#triangle{
  display: none;
}

#triangle2{
  width: 125%;
}
#triangle2 img{
  display: block;
  width: 75px;
  height: 30px;
  margin: auto;
  margin-bottom: -30px;
  margin-top : -1px;
}

.button{
  font-family: HelveticaNeueRegular;
  width: 95%;
  font-size: 50px;
  color: white;
  margin-right: 150px;
  margin-top: 50px;
  padding: 25px;
  padding-top: 32px;
  text-align: center;
  border-radius: 200px;
  /* background-color: #a97ed4; */
  background: linear-gradient(10deg, rgba(153,111,185, 1) 0%, rgba(193,155,232, 1) 100%);
  transition: all 0.15s ease-out;
}
.button:active{
  transition: all 0.15s ease-out;
  background-color: #b88fe0;
}

.wide{
  padding-left: 70px;
  padding-right: 70px;
}

.col60 table tr td:nth-child(even) .button{
  margin-left: 70px;
  width: 100%;
}

.arrow{
  display: none;
}

#video-banner{
  display: none;
}

#video-banner-mobile{
  width: 100%;
  margin: auto;
}

#videos{
  width: 90%;
  margin: auto;
  padding-top: 20px;
}
#videos p{
  margin-bottom: 40px;
}

#videos .button{
  margin-bottom: 40px;
  background-color: #1cacef;
  border-bottom: solid 3px #1c6e94;
}
#videos .button:hover{
  border-bottom: solid 1px #1c6e94;
  background-color: #2fbdff;
}

#videos #picto-motion{
  margin-top: -10px;
  width: 20%;
}

#purple-banner{
  background-color: #be93e8;
  width: 101%;
  margin-top: 110px;
}
#purple-banner-container{
  width: 100%;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 40px;
}

.logos-table{
  width: 95%;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 40px;
}

.logos-table tr td{
  width: 12.5%;
  margin: auto;
  padding-top: 20px;
  vertical-align: top;
}
.logos-table tr td img{
  display: block;
  width: 85%;
  margin: auto;
}
.logos-table tr td div{
  display: none;
}

.button2{
  color: white;
  background: linear-gradient(10deg, rgba(255, 138, 0, 1) 0%, rgba(255, 184, 100, 1) 100%);
  font-family: HelveticaNeueRegular;
  font-size: 52px;
  width: 93%;
  border-radius: 200px;
  padding: 40px;
  text-align: center;
  vertical-align: middle;
}

#videos p{
  margin-bottom: 100px;
}
#videos .button2{
  font-size: 52px;
}

.banner-container{
  width: 140%;
  margin-left: -6%;
  overflow: hidden;
  margin-bottom: 150px;
  margin-top: 125px;
}
.banner{
  width: 100%;
}

#motion-banner{
  width: 112%;
  overflow: hidden;
  margin-left: -6%;
  margin-bottom: 150px;
  margin-top: 125px;
}
#motion-banner video{
  margin-bottom: -5px;
}

.videos-table{
  width: 100%;
}
.videos-table tr td{
  width: 33%;
  border-radius: 8px;
  vertical-align: top;
}

.photos-table{
  margin-bottom: 30px;
  margin-top: -10px;
}

.photos-table tr td img{
  width: 100%;
  border-radius: 5px;
}

#footer-mobile{
  background-color: #1b1b1b;
  width: 125%;
  padding-top: 50px;
  padding-bottom: 30px;
  color: white;
  font-family: HelveticaNeue;
}
#footer-content-mobile {
  width: 90%;
  margin: auto;
  font-size: 30px;
}
#footer-content-mobile .subtitle{
  color: #ff943e;
  font-size: 38px;
}

#footer-content-mobile .button{
  margin-top: 80px;
  margin-bottom: 50px;
}

.contact-infos{
  font-size: 45px;
  margin-top: 80px;
  color: #BBB;
  width: 100%;
  text-align: left;
}
.contact-infos a{
  color: #BBB;
  transition: all 0.1s ease-out;
}
.contact-infos a:active{
  color: white;
  border-bottom: solid 1px #a97ed4;
  transition: all 0.25s ease-out;
}

.contact-img {
  margin-bottom: 40px;
  vertical-align: middle;
}

.contact-img img{
  width: 64px;
  height: 64px;
  margin-right: 30px;
  margin-bottom: -20px;
}

#social-networks{
  margin-top: 100px;
  text-align: center;
}
#social-networks a{
  margin-left: 35px;
  margin-right: 35px;
}
#social-networks img{
  height: 92px;
  width: 92px;
}

.bottom-note{
  font-size: 22px;
  margin: auto;
  text-align: center;
  color: #999999;
  width: 100%;
  margin-top: 100px;
}

#latest{
  width: 90%;
  margin: auto;
  padding-top: 150px;
  padding-bottom: 50px;
}

.latest-table{
  margin-top: 120px;
  margin-bottom: 100px;
}

.latest-table h6{
  margin-top: 55px;
}

.latest-table tr td{
  padding: 10px;
  vertical-align: top;
  padding-bottom: 50px;
}

.latest-table tr td:first-child{
  display: none;
}
.latest-table tr td:last-child{
  width: 100%;
}

.latest-table tr td embed{
  height: 250px;
  min-height: 200px;
  max-height: 350px;
  border-radius: 6px;
}

.latest-table p a{
  color: black;
  text-decoration: underline;
}
.latest-table p a:active{
  color: #a97ed4;
}

.thumbnail{
  width: 100%;
  border-radius: 6px;
}

.mobile-video-display{
  display: block;
  width: 100%;
  margin-bottom: 0px;
  margin-top: 50px;
  border-radius: 10px;
}

.labels{
  margin-bottom: 0px;
  margin-top: -15px;
}

.label{
  font-family: HelveticaNeueRegular;
  border-radius: 50px;
  padding-top: 12px;
  padding-bottom: 8px;
  padding-left: 25px;
  padding-right: 25px;
  font-size: 25px;
  color: white;
  margin-right: 5px;
}
.lb-gaming{
  background: linear-gradient(5deg, #429de3 0%, #8fc6ff 100%);
  /* background-color: #8fc6ff; */
}
.lb-motion{
  background: linear-gradient(5deg, #ae77dd 0%, #d0a7ff 100%);
  /* background-color: #d0a7ff; */
}
.lb-montage{
  background: linear-gradient(5deg, rgba(255, 138, 0, 1) 0%, rgba(255, 184, 100, 1) 100%);
  /*background-color: rgba(255, 184, 100, 1);*/
}
.lb-cadrage{
  background: linear-gradient(5deg, #44bc66 0%, #a0dcb1 100%);
  /*background-color: #a0dcb1;*/
}
.lb-corpo{
  background: linear-gradient(5deg, #79959a 0%, #afc2c6 100%);
}
.lb-mariage{
  background: linear-gradient(5deg, #d8514b 0%, #fb847e 100%);
}
.lb-docu{
  background: linear-gradient(5deg, #42bba6 0%, #85f0c9 100%);
}
.lb-sport{
  background: linear-gradient(5deg, #393939 0%, #717171 100%);
}
.lb-clip{
  background: linear-gradient(5deg, #c37350 0%, #e48f6a 100%);
}

.latest-date{
  font-family: HelveticaNeueRegular;
  font-size: 30px;
  color: #a97ed4;
}

.latest-date a{
  background-color: #a97ed4;
  color: white;
  padding: 5px;
  padding-bottom: 3px;
  border-radius: 3px;
}

.showreel-video{
  max-width: 100%;
  min-width: 200px;
  border-radius: 15px;
  padding: 0;
  overflow: hidden;
  margin-top: 50px;
  margin-bottom: 120px;
}
.showreel-video video{
  margin-bottom: -5px;
  max-width: 100%;
}

.title-container{
  margin: auto;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
}
.banner-title{
  font-family: HelveticaNeueRegular;
  font-size: 60px;
  color: white;
  text-align: center;
  margin: auto;
  padding-bottom: 10px;
  border-bottom: solid 3px #8f62bc;
}

#clients-1{
  display: block;
}
#clients-2{
  display: none;
}

#clients-switcher table{
  margin:auto;
}

#clients-switcher {
  margin-top: 80px;
}

.active-switcher{
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 24px;
  border: solid 4px white;
  margin-left: 10px;
  margin-right: 10px;
}
.switcher{
  width: 30px;
  height: 30px;
  background-color: rgba(255,255,255,0);
  border-radius: 24px;
  border: solid 4px white;
  margin-left: 10px;
  margin-right: 10px;
}

.cta-clients{
  text-align: center;
  width: 95%;
  margin: auto;
  font-family: MontserratMedium;
  font-size: 40px;
  color: white;
  margin-top: 70px;
}
.cta-clients span{
  padding: 2px;
  background-color: #9f79c4;
}

.cat{
  margin-top: 120px;
}
.cat:first-child{
  margin-top: 50px;
}

.cat h6{
  color: #be93e8;
  margin-bottom: 10px;
}
.cat table{
  margin-bottom: -5px;
}
.cat table tr td{
  max-height: 500px;
}

.photos-table-description{
  font-family: Montserrat;
  font-size: 45px;
  margin-bottom: 40px;
  margin-top: 20px;
}

.legend{
  width: 99%;
  margin: auto;
  font-size: 40px;
  text-align: center;
  position: relative;
  top: -60px;
  color: rgba(255,255,255,1);
  /*background-color: rgba(0,0,0,0.4);*/
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0) 100%);
  filter: blur(0px);
  padding-bottom: 30px;
  padding-top: 30px;
  margin-top: -55px;
  margin-bottom: -10px;
}

.flex-child{
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
}
.flex-child div{
  padding-left: 3px;
  padding-right: 3px;
  vertical-align: middle;
}
.flex-child img{
  width: 100%;
  border-radius: 6px;
}

.down{
  margin-top: 30px;
}

.pres-1{
  width: 100%;
  margin-left: 0px;
  padding-top: 30px;
  text-align: left;
}
.pres-2{
  width: 100%;
}
.pres-3{
  width: 100%;
  margin-top: 70px;
}

.pres-1 h4{
  color: #a97ed4;
}
.pres-2 .camera-img{
  max-width: 80px;
}
.cta-buttons-main{
  display: inline-block;
  max-width: 100px;
}

.pp-about{
  width: 100%;
}
.img-ae{
  display: none;
}

#videos .flex-child{
  margin-bottom: 30px;
}

.photos-banner{
  margin-top: 125px;
  width: 109%;
  margin-left: -4.5%;
}

.contact-div hr{
  width: 100%;
  margin-top: 30px;
  margin-bottom: 50px;
}

.desktop-only{
  display: none;
}

.link-real{
  margin-top: 100px;
}

#loader{
  position: fixed;
  z-index: 9999;
  background-color: #fffcf4;
  width: 101%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  height: 4000px;
}
#corpus{
  filter: blur(6px);
  transition: filter 0.4s ease-in-out;
}

#loader img{
  display: block;
  margin: auto;
  margin-top: 500px;
  width: 128px;
  opacity: 1;
  animation: rotation 1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  85% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#scroller-mobile{
  position: fixed;
  z-index: 600;
  top: 75%;
  left: 81%;
  height: 220px;
  width: 220px;
  border-radius: 200px;
  background-color: rgb(190,147,232);
  opacity: 0.1;
}
#scroller-mobile img{
  position: relative;
  width: 128px;
  height: 128px;
  top: 40px;
  left: 46px;
}

.scroll-in{
  transition: opacity 0.4s ease-out;
}
.scroll-out{
  transition: opacity 1s ease-in-out;
}

#pp-banner{
  width: 100%;
  overflow: hidden;
  margin-bottom: -200px;
  padding-top: 30px;
  background-color: #1b1b1b;
}
#pp-banner img{
  width: 100%;
  margin-bottom: -10px;
}