/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;1,900&display=swap');
@font-face { font-family: YoungSerif-Regular; src: url('/fonts/YoungSerif-Regular.woff2'); } 



/* CSS */
body {
    margin:0;
    padding:0;
    margin-block-end: 0;
    margin-block-start: 0;
    }

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
  display: none;
}

p {
        display: block;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0;
        margin-inline-end: 0;
        font-family: 'Montserrat';
}

h1 {
  font-size: 2rem;
  font-family: YoungSerif-Regular;
  font-weight: unset;
  display: flex;
  justify-content: center;
}
/* 
.header-bande {
  width: 100%;
  height: 5px;
  background-image:url('BackgroundWebsite.jpg');
  background-size: cover;
  background-position: bottom center;
  position: -webkit-sticky;
  position: sticky;
  top: 5;
} */

.hero{
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-image:url('BackgroundWebsite.jpg');
    background-position: center center;
    display: flex;
    justify-content: center;
    z-index: 2;
}

 #footer {
  height: 100vh;
  background-size: cover;
  background-image:url('BackgroundWebsiteFooter.png');
  background-position: center center;
  display: flex;
  justify-content: center;
  z-index: 2;
  flex-direction: column;
  align-items: center;
}

#footer>h3  {
font-family: "YoungSerif-Regular";
font-weight: unset;
color: transparent;
font-size: 3em;
-webkit-text-stroke: 1px white;
position: absolute;
top: 2vh;
}

.footer-link {
  font-family: "YoungSerif-Regular";
  font-weight: unset;
  font-size: 2em;
  color: white;
  cursor:pointer;
}

#footer>span {
  font-family: "YoungSerif-Regular";
  font-weight: unset;
  font-size: 1em;
  color: white;
  opacity: 20%;
  position: absolute;
  bottom: 10vh;
  transition: 400ms;
}

#footer>span:hover {
transform: scale(1.1);
opacity: 100%;
}

a {
  color: white;
  text-decoration: none;
}

.hero-title {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-content {
    text-align: center;
    font-family: YoungSerif-Regular;
    font-weight: unset;
    color: white;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.hero-content > h2 {
  letter-spacing: 1.5px;
  font-size: 2.5em;
  max-width: 70vw;
  font-weight: unset;
}

.hero-content > p {
  max-width: 35vw;
  font-weight: unset;
  letter-spacing: 0.5px;
}

#logo {
  position: absolute;
  top: 20px;
  left: 20px;
  height: 30px;
}

.sec {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 10vh;
  padding-bottom: 10vh;
  background-color: #FAFAFA;
  /* margin-bottom: 10px; */
}

.sec > h1 {
  font-size: 4em;
  color: #DBDBDB ;
  letter-spacing: 1px;
}

.sec-left, .sec-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sec-text {
  width: 45%;
  color: #242424;
}

.sec-text>h3 {
  font-size: 1.8em;
  margin-bottom: 13px;
}

.sec-text>h3, .sec-text>h4 {
  font-family: YoungSerif-Regular;
  font-weight: unset;

}

.sec-text>p {
  font-family: Montserrat;
  max-width: 80%;
}

.sec-image {
  width: 55%;
  display: flex;
}

.sec-image>img {
  max-width: 90%;
}

.sec-right>.sec-text {
  padding-left: 10%;
  max-width: 35%;
}

.sec-right>.sec-text>p {
  max-width: 100%;
}

.sec-image-duo {
  display: flex;
}


#mockup-phone, #mockup-tablet, #mockup-pc {
  position: relative; 
  object-fit: contain;
}

#mockup-phone {
  max-width: 6vw;
  left: 5%;
  margin-top: 8vh;
}

#mockup-tablet {
  max-width: 14vw;
  left: 75%;
}

#mockup-pc {
  max-width: 22vw;
  left: 10%;
}

.mockup-site {
  height: 50vh;
  padding-right: 10vw;
}

.ecommerce-img {
  margin-left: 20px;
  margin-right: 20px;
  max-height: 90vh;
}

#phone1 {
  margin-top: 70px;
}
.ipad {
  margin: 10px;
  object-fit: contain;
  filter: drop-shadow(7px 7px 7px #0000005F);
}

.ipad1 {
  width: 39%;
}
.ipad2 {
  width: 34%;
}

.sec-image-slide {
  width: 45%;
  /* overflow: hidden; */
}

#photo {
  padding-bottom: 20vh;
}

.lerp-wrap {
  display: inline-block;
  vertical-align: middle;
  margin-left: 1.25rem;
  line-height: 1.1;
}
.lerp-wrap span {
  display: inline-block;
  font-size: 6em;
  font-family: YoungSerif-Regular;
  color: #DBDBDB ;
}

.img-line {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  overflow: hidden;
}

.img-line>img {
  width: 10vw;
  margin: 10px 1vw;
  transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}


/* Project Menu Drop */
#menuProjets {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dropbtn {
  font-size: 6em;
  font-family: YoungSerif-Regular;
  font-weight: unset;
}

.dropdown {
  position: relative;
  display: block;
  z-index: 2;
}

.dropdown-content {
  visibility: hidden;
  font-family: Montserrat;
  opacity: 0;
  transition: visibility 0.5s, opacity 0.5s ease;
  position: relative;
  z-index: 1;
}

.dropdown-content>img {
  visibility: visible;
  opacity: 1;
  position: absolute;
  top: -200px;
  max-width: 35vw;
}

.dropdown a {
  color: transparent;
  -webkit-text-stroke: 1px #242424;
  text-decoration: none;
  display: block;
  transition: 0.3s;
  cursor: pointer;
}

.dropbtn:hover {
  color: #242424;
  -webkit-text-stroke: none;
}

.dropdown:hover .dropdown-content {
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  z-index: -1;
  cursor: pointer;
}

#projets{
  padding-bottom:22vh;
}

/* CURSOR Hover */

.cursor {
  position: fixed;
  width: 40vw;
  height: 28vw;
  background-image: url();
  background-size: cover;
  background-position: center center;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  -webkit-transition: background-image 0.3s ease-in-out;
  transition: background-image 0.3s ease-in-out;  
}


#cocktailHour {
  cursor: pointer;
}

/* RESPONSIVE */

@media only screen and (max-width: 900px) {

  .sec-image.mockup-site {
    transform: scale(1.2);
  }
  
  .ecommerce-img {
    max-height: 60vh;
  }
  
  .sec-image-duo {
    width: 45%;
  }
  
  #ecommerce-text {
    width: 55%;
  }
}

@media only screen and (max-width: 600px) {
.sec > h1 {font-size: 14vw;text-align: center;}
.sec-right {flex-wrap: wrap-reverse;}
.sec-left {flex-wrap: wrap;}
.sec-right > .sec-text, .sec-left>.sec-text, .sec-text>p {max-width: 90%;}
.sec-right>.sec-text {padding-left: 0%;}
.sec-text {width: 90vw;}
.sec-image {width: 100vw;}
.hero-content > p, .hero-content>h2 {  max-width: 90vw;}
.sec-image.mockup-site {transform: scale(2);width: 90vw;}
.mockup-site{height: 20vh;}
.sec-image-duo {width:90%; margin-left: 0px!important;}
#ecommerce-text{width: 90%;}
#mockup {width: 135vw;}
.sec-image-slide{width: 100vw;padding-bottom: 10vh;}
.img-line > img {width: 40vw;margin: 5px;}
.lerp-wrap span {font-size: 18vw;}
.dropbtn{font-size: 20vw;}
.dropdown-content{visibility: visible;opacity: 1;}
.dropdown{margin: 2vh 0px;}

#mockup-pc{left:0%;}
#mockup-tablet{left:75%}
#mockup-phone{left:10%;margin-top:4vh;}

}