/* ------------ STYLES INITIAUX ------------ */

@font-face {
    font-family: "Montserrat-XLight";
    src: url('Typos/Montserrat-ExtraLight.ttf');
}

@font-face {
    font-family: "Montserrat-XLightItalic";
    src: url('Typos/Montserrat-ExtraLightItalic.ttf');
}

@font-face {
    font-family: "Montserrat-Italic";
    src: url('Typos/Montserrat-Italic.ttf');
}

@font-face {
    font-family: "Montserrat";
    src: url('Typos/Montserrat-Regular.ttf');
}

@font-face {
    font-family: "Montserrat-Bold";
    src: url('Typos/Montserrat-Bold.ttf');
}

/* ------------ Au clic, disparition du texte dans search bar ------------ */

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

body{
  margin : 0;
  padding : 0;
  width : 100%;
}

a {
  text-decoration: none;
}

p,h1, h2, h3, h4, h5{
  margin-block-start: 0;
  margin-block-end: 0;
  font-weight: normal;
  padding: 0;
}

h1 {
  font-family: 'Montserrat-Bold', sans-serif;
  text-transform: uppercase;
  text-align: center;
}
p {
  font-family: 'Montserrat', sans-serif;
}

::-webkit-scrollbar {
   width: 3px;
   background-color : black;
}

::-webkit-scrollbar-thumb {
  background-color: #ff7419;
}

html, body {
  height : 100%;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ------------ HEADER ------------ */

header {
  position : relative;
  width: 100vw;
  height: 100vh;
  background-image: url("Images/Background01.jpg");
  background-size: cover;
}

.Dust{
  pointer-events: none;
  position: absolute;
  background : url(Images/Dust.png) repeat;
  width: 100%;
  height: 100%;
  animation : DustUn 10s alternate both ease-in-out infinite;
}

.Dust02 {
  background-size: 20%;
  transform: scale(-2) rotate(45deg);
  animation : DustDeux 25s alternate both ease-in-out infinite;
}

.BlackLayer {
  width: 100vw;
  height: 100vh;
  background-color: black;
  opacity: .3;
}

.MainLogo {
  position: absolute;
  width: 33vw;
  transform: translateX(-50%);
  left: 50vw;
  top: 10vh;
}

.Citation01 {
  position: absolute;
  transform: translateX(-50%);
  left: 50vw;
  bottom: 15vh;
  color : #f0efdd;
  border-radius : 5px 5px 50px 50px;
  padding: 30px;
  background-color: rgba(244,238,211,.1);
  text-align: center;
}

.LiamCitation01 {
  text-align: right;
  margin-top: 10px;
}

.Motif01 {
  position : absolute;
  width: 200px;
  bottom: -35px;
  left: -130px;
}

.Motif02 {
  position : absolute;
  width: 200px;
  bottom: -35px;
  right: -130px;
  transform: scaleX(-1);
}

.GoDown {
  position: absolute;
  bottom: 3vh;
  transform: translateX(-50%);
  left: 50vw;
  animation : GoDown .5s ease-in-out 0s both infinite alternate;
}

.GoDownArrow {
  width: 50px;
}

.Language {
  font-family: 'Montserrat-Bold', sans-serif;
  position: absolute;
  top: 20px;
  right: 30px;
  color: #f0efdd;
}

.SocialMediaHeader {
  position: absolute;
  height: 300px;
  width: 60px;
  right: 20px;
  text-align: center;
  bottom: 0;
}

.SocialHeader {
  width: 40px;
  margin: 10px 0 10px 0;
  transition: .1s;
}

.Wishlists {
  position: absolute;
  left: 0;
  bottom: 5vh;
  width: 150px;
}

.WishlistButton {
  margin: 10px 0 10px -60px;
  width: 300px;
  transition: .15s;
  cursor : pointer;
}

.WishlistButton:hover {
  margin-left: -30px; /* QUAND ACTIF METTRE -30px sinon -60px*/
}

.Citation01>h1 {
  margin-top: 0;
}

/* ------------ ZONE1 ------------ */

#Zone1 {
  width: 100vw;
  padding-bottom: 20px;
  background-color: #f0efdd;
}

h2 {
  font-family : 'Montserrat-Bold', sans-serif;
  font-size: 9em;
  margin-left: -15vw;
  opacity: .05;
}

/* ------------ KICKSTARTER ------------ */
.kickstarter {
  text-align: center;
  margin-bottom: 50px;
}

.KS{
  color: #2ad15e;
  font-size: 5em;
}

.boutonarea {
  margin-top : 25px;
}

.KSbutton {
  font-family : 'Montserrat-Bold', sans-serif;
  text-transform: uppercase;
  color: #2ad15e;
  padding: 7px;
  font-size: 1.5em;
  border: 2px #8c6c60 solid;
  transition: .1s;
}

.KSbutton:hover {
  background-color: #8c6c60;
  color: white;
}
/* ------------ /KICKSTARTER ------------ */

.VideoL99 {
  width: 50vw;
  height: 28.125vw;
  margin-left: 50vw;
  transform: translateX(-50%);
}

.PlusDeVideos {
  text-align: center;
}



.PlusDeVideos>a {
  font-family: 'Montserrat-Bold', sans-serif;
  text-transform: uppercase;
  color: #8c6c60;
  padding: 7px;
  border: 2px #8c6c60 solid;
  transition: .1s;
}

.PlusDeVideos>a:hover {
  background-color: #8c6c60;
  color: white;
}

.Arrow1, .Arrow2 {
  width: 80px;
  position: relative;
  top: 33px;
  user-select: none;
}

.Arrow1 {
  left: 40px;
  transform: scaleX(-1);
}

.Arrow2 {
  right: 40px;
}

.Presentation {
  margin-top: 100px;
  width: 60vw;
  margin-left: 50vw;
  transform: translateX(-50%);
  color: #8c6c60;
  text-align: center;
}

.PresParagraphe {
  margin-top: 20px;
  text-align: justify;
  line-height: 25px;
  font-size : 1.2em;
}

.Galerie {
  width: 70vw;
  transform: translateX(-50%);
  margin-left: 50%;
  text-align: center;
  margin-top: 65px;
  color : #8c6c60;
}

.Galerie>h1 {
  margin-bottom: 20px;
}

.Screenshot {
  display: inline-block;
  margin : 5px;
  width: 30%;
  transition: .2s;
}

.Screenshot:hover {
  transform: rotate(5deg) scale(1.05);

}

.lb-caption {
  font-family: 'Montserrat-Bold', sans-serif;
  text-transform: uppercase;
}
.lb-number {
  font-family: 'Montserrat', sans-serif;
}

.Musiques {
  width: 100vw;
  margin-top: 65px;
  text-align: center;
  color: #8c6c60;
}

.MusicVideos {
  margin-top: 20px;
}

.MusicVideo {
  margin: 0 10px 0 10px;
}

.Presskit {
  width: 100vw;
  height: 80px;
  text-align: center;
  margin-top: 100px;
}

.PresskitLink {
  font-family : 'Montserrat-Bold', sans-serif;
  text-transform: uppercase;
  color: #8c6c60;
  padding: 7px;
  border: 2px #8c6c60 solid;
  transition: .1s;
}

.PresskitLink:hover {
  background-color: #8c6c60;
  color: white;
}

.SocialMedia {
  width: 100vw;
  height: 80px;
  text-align: center;
  margin-top: 20px;
}

.Social:hover, .SocialHeader:hover {
  transform: rotate(10deg);
}
.Social {
  width: 60px;
  margin: 0 40px 0 40px;
  transition: .1s;
}

.email {
  font-family: "Montserrat-Bold", sans-serif;
  text-transform: uppercase;
  color: #8c6c60;
  text-align: center;
  position: relative;
}

/* -------------------- FOOTER ---------------------- */

footer {
  position: relative;
  width: 100vw;
  height: 30vh;
  background-color: #382d29;
}

.Motif03 {
  position: absolute;
  top: -10px;
  left: -125px;
  width: 500px;
  transform: rotate(180deg);
}

.Motif04 {
  position: absolute;
  top: -10px;
  right: -125px;
  width: 500px;
  transform: rotate(180deg) scaleX(-1);
}

.Partenaires {
  width: 50vw;
  height: 18vh;
  text-align: center;
  margin-left: 25vw;
  padding-top: 6vh;
}

.Naglfar {
  transform: translateX(-50%) translateY(-50%);
  left: 50vw;
  top: 50%;
}

.LogoPartenaire {
  margin : 0 20px 0 20px;
  height: 150px;
  opacity: .75;
  transition: .3s;
}

.LogoPartenaire:hover {
  opacity: 1;
}

span {
  position: absolute;
  left: 50vw;
  bottom: 60px;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  font-size: .9em;
  opacity: .7;
}

.Rights {
  bottom: 10px;
  opacity: .4;
}

/* -------------------- ANIMATIONS ---------------------- */

@keyframes GoDown {
  0%{bottom : 3vh;}
  100% {bottom : 2vh;}}

@keyframes GoDownMobile {
  0%{bottom : 10vh;}
  100% {bottom : 8vh;}}

@keyframes DustUn {
  0%{background-position: 0;}
  50%{background-position: -20px -20px;}
  100% {background-position: 00px -10px;}}

@keyframes DustDeux {
  0%{background-position: -60px 50px;}
  50%{background-position: -5px -10px;}
  100% {background-position: 0px 30px;}}


/* -------------------- RESPONSIVE ---------------------- */
/* -------------------- WIDTH: 500 ---------------------- */

  @media (max-width : 500px) {
  .MainLogo {
  width : 65vw;
  }

  /* ------------ KICKSTARTER ------------ */
.kickstarter {
  text-align: center;
  margin-bottom: 50px;
}

.KS{
  color: #2ad15e;
  font-size: 2em;
  margin-top : 0
}

.boutonarea {
  margin-top : 25px;
}

.KSbutton {
  font-family : 'Montserrat-Bold', sans-serif;
  text-transform: uppercase;
  color: #2ad15e;
  padding: 7px;
  font-size: .8em;
  border: 2px #8c6c60 solid;
  transition: .1s;
}

.KSbutton:hover {
  background-color: #8c6c60;
  color: white;
}
/* ------------ /KICKSTARTER ------------ */

  header {
    background-position: -400px 0;
  }

  .Citation01 {
    width: 70vw;
    padding: 25px;
  }

  .Dust{
  animation : DustUn 20s alternate both ease-in-out infinite;
}

.Dust02 {
  background-size: 50%;
  transform: scale(-2) rotate(45deg);
  animation : DustDeux 25s alternate both ease-in-out infinite;
}

  h1 {
    font-size : 1.2em;
    margin-top: 70px;
  }

  .LiamCitation01 {
    font-size: .8em;
    text-align: center;
  }

  .Motif01, .Motif02 {
    width: 100px;
    bottom: -25px;
  }

  .Motif01 {
    left: -20px;
  }

  .Motif02 {
    right: -20px;
  }

  .SocialMediaHeader {
    display: none;
  }

  .Wishlists {
  bottom: 35vh;
  width: 150px;
  }

  .WishlistButton {
  margin: 5px 0 5px -35px;
  width: 240px;
  }

  .GoDown {
    animation: GoDownMobile .5s ease-in-out 0s both infinite alternate;;
  }

  h2 {
    font-size: 5em;
    margin-left: -6vw;
  }

  .VideoL99 {
    width: 100vw;
    height: 230px;
  }

  .Presentation {
    width: 85vw;
    margin-top: 50px;
  }

  .PresParagraphe {
    line-height: 20px;
    font-size: .95em;
  }

  .Galerie {
    width: 100vw;
    margin-top: 50px;
  }

  .Screenshot {
    width: 100%;
    margin: 5px 0 5px 0;
  }

  .Musiques {
    margin-top: 50px;
  }

  .MusicVideos {
    margin-top: 20px;
  }

  .MusicVideo {
  margin: 5px 0 5px 0;
  width: 100%;
  height: 250px;
  }

  .Presskit {
  height: 0px;
  margin-top: 65px;
  }

  .PresskitLink {
    font-size: .7em;
  }

  .SocialMedia {
    margin-top: 95px;
    height: 45px;
  }

  .Social {
    width: 7vw;
    margin: 0 30px 0 30px;
  }

  .Motif03, .Motif04 {
    width: 200px;
  }

  .Partenaires {
    width: 80vw;
    margin-left: 10vw;
    height: 0;
    padding-top: 3vh;
  }

  .LogoPartenaire {
    height: 17vw;
    margin : 0 2vw 0 2vw;
  }

  footer {
    height: 17vh;
  }

  #Zone1 {
    padding-bottom: 20px;
  }

  span {
    font-size: .7em;
    width: 90vw;
  }
}

/* -------------------- HEIGHT: 500 ---------------------- */

  @media (max-height : 500px) {

  .Citation01 {
    width: 70vw;
    padding: 25px;
  }

  h1 {
    font-size : 1.2em;
  }

  .Citation01 {
    bottom: 20vh;
  }

  .LiamCitation01 {
    font-size: .8em;
    text-align: center;
  }

  .Motif01, .Motif02 {
    width: 100px;
    bottom: -25px;
  }

  .Motif01 {
    left: -20px;
  }

  .Motif02 {
    right: -20px;
  }

  .SocialMediaHeader {
    display: none;
  }

  .Wishlists {
  bottom: 50vh;
  width: 150px;
  }

  .WishlistButton {
  margin: 5px 0 5px -35px;
  width: 180px;
  }

  .GoDown {
    animation: GoDownMobile .5s ease-in-out 0s both infinite alternate;;
  }

  h2 {
    font-size: 5em;
    margin-left: -6vw;
  }

  .VideoL99 {
    width: 70vw;
    height: 39vw;
  }

  .Presentation {
    width: 85vw;
    margin-top: 50px;
  }

  .PresParagraphe {
    line-height: 20px;
    font-size: .95em;
  }

  .Galerie {
    width: 90vw;
    margin-top: 50px;
  }

  .Screenshot {
    width: 45%;
    margin: 5px;
  }

  .Musiques {
    margin-top: 50px;
  }

  .MusicVideos {
    margin-top: 50px;
  }

  .MusicVideo {
    margin: 5px 0 5px 0;
    width: 100%;
    height: 100px;
  }

  .Presskit {
  height: 0px;
  margin-top: 65px;
  }

  .PresskitLink {
    font-size: .7em;
  }

  .SocialMedia {
    margin-top: 75px;
    height: 50px;
  }

  .Social {
    width: 7vh;
    margin: 0 30px 0 30px;
  }

  .Motif03, .Motif04 {
    width: 250px;
  }

  .Partenaires {
    width: 80vw;
    margin-left: 10vw;
    height: 0;
    padding-top: 5vh;
  }

  .LogoPartenaire {
    height: 20vh;
    margin : 0 2vw 0 2vw;
  }

  footer {
    height: 40vh;
  }

  #Zone1 {
    padding-bottom: 0;
  }

  span {
    font-size: .7em;
    width: 90vw;
  }
}


/* -------------------- WIDTH: 2000 ---------------------- */

  @media (min-width : 2000px) {
    h2 {
      font-size: 12em;
    }

    .LogoPartenaire {
      height: 225px;
    }
}