/* web font */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;600;800&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

::-moz-selection {
  color: #fff;
  background-color: #abd198;
}

::selection {
  color: #fff;
  background-color: #abd198;
}

/* hamberger menu */
.ham {
  width: 60px;
  height: 55px;
  cursor: pointer;
  position: relative;
  z-index: 900;
  justify-self: end;
  position: fixed;
  margin-top: 5vh;
  right: 2rem;
}

@media screen and (min-width: 768px) {
  .ham {
    right: 11rem;
  }
}

.ham span {
  margin-left: auto;
  display: block;
  background: #fff;
  width: 42px;
  height: 4px;
  transition: margin 0.25s 0.25s, 0.25s transform;
}

.ham .bar1 {
  margin-bottom: 8px;
}

.ham .bar3 {
  margin-top: 8px;
}

.active .ham span {
  transition: 0.25s margin, 0.25s transform 0.25s;
}

.active .ham .bar1 {
  margin-top: 8px;
  margin-bottom: -4px;
  transform: rotate(45deg);
}

.active .ham .bar2 {
  transform: rotate(45deg);
}

.active .ham .bar3 {
  margin-top: -4px;
  transform: rotate(135deg);
}

/* header nav */
#logo {
  position: fixed;
  margin: 5vh 0 0 0;
  font-size: 24px;
  z-index: 200;
  left: 2rem;
}

@media screen and (min-width: 768px) {
  #logo {
    left: 11rem;
    padding: 0;
  }
}

#logo a {
  color: #fff;
  text-decoration: none;
}

#hamArea {
  display: block;
}

#hamArea .inner {
  position: fixed;
  background: linear-gradient(0deg, #c3add4, #b7a3d3);
  top: 0;
  right: calc(-400px - 28rem);
  bottom: 0;
  transition: all 0.5s;
  z-index: 800;
  opacity: 1;
  width: 100%;
  padding: 10rem 5rem;
}

@media screen and (min-width: 768px) {
  #hamArea .inner {
    width: auto;
    padding: 15rem 20rem 0 8rem;
  }
}

#hamArea .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#hamArea .inner ul li {
  margin: 0;
}

#hamArea .inner ul li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-size: 36px;
  line-height: 70px;
  color: #fff;
  transition-duration: 0.2s;
}

#hamArea .inner ul li a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 1px;
  top: auto;
  bottom: 13px;
  background-color: #fff;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.6s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.6s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  width: 0;
  left: auto;
  right: 0;
}

#hamArea .inner ul li a:hover::after {
  width: 100%;
  right: auto;
  left: 0;
}

#hamArea #mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(49, 122, 68, 0.4), rgba(97, 61, 83, 0.5));
  opacity: 0;
  z-index: 200;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: none;
}

.active #hamArea .inner {
  right: 0;
  opacity: 1;
}

.active #hamArea #mask {
  opacity: 1;
  display: block;
}

#slider_back {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90vh;
  background: linear-gradient(0deg, #c3add4, #b7a3d3);
  z-index: 10;
}

#slider_top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 98vh;
  background: #b7a3d3;
  z-index: 150;
  opacity: 0;
}

.heroWrap {
  width: 100%;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  z-index: 100;
}

#hero {
  margin-top: 15vh;
  height: 60%;
  width: 100%;
  position: relative;
}

#hero img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.headline {
  position: absolute;
  top: 60%;
  left: 10%;
  color: #fff;
  font-size: 17vw;
  transform: translateY(-10%, -70%);
}

@media screen and (min-width: 768px) {
  .headline {
    font-size: 100px;
  }
}

body,
html {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  background: #eae4f2;
  font-size: 13px;
  z-index: -1;
}

@supports (display: grid) {

  body,
  html {
    display: block;
  }
}

.section {
  display: none;
  padding: 15vh 2rem 2rem;
}

@media screen and (min-width: 768px) {
  .section {
    width: 80%;
    margin: auto;
    padding: 20vh 0;
  }
}

@supports (display: grid) {
  .section {
    display: block;
  }
}

.grid {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 150px;
  grid-auto-flow: row dense;
}

.item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  background-color: #c3b1df;
  color: #fff;
  grid-column-start: auto;
  grid-row-start: auto;
  color: #fff;
  background-size: cover;
  background-position: center;
  box-shadow: -2px 2px 20px 0px rgb(214, 199, 227);
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
}

.item:nth-of-type(3n) {
  background-image: url("https://images.unsplash.com/photo-1422255198496-21531f12a6e8?dpr=2&auto=format&fit=crop&w=1500&h=996&q=80&cs=tinysrgb&crop=");
}

.item:nth-of-type(4n) {
  background-image: url("https://images.unsplash.com/photo-1490914327627-9fe8d52f4d90?dpr=2&auto=format&fit=crop&w=1500&h=2250&q=80&cs=tinysrgb&crop=");
}

.item:nth-of-type(5n) {
  background-image: url("https://images.unsplash.com/photo-1476097297040-79e9e1603142?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=");
}

.item:nth-of-type(6n) {
  background-image: url("https://images.unsplash.com/photo-1464652149449-f3b8538144aa?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=");
}

.item:hover {
  transform: scale(1.05);
}

.item:hover:after {
  opacity: 0;
}

.item--medium {
  grid-row-end: span 2;
}

.item--large {
  grid-row-end: span 3;
}

.item--full {
  grid-column-end: auto;
}

@media screen and (min-width: 768px) {
  .item--full {
    grid-column: 1/-1;
    grid-row-end: span 2;
  }
}

.item a {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #c3b1df;
  opacity: 0.2;
  transition: opacity 0.5s ease-in-out;
}

.item a:hover {
  opacity: 0;
}

#lightbox {
  position: fixed;
  top: 50% !important;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

#illust_accessorie {
  background-position: 22%;
}

.lb-number {
  display: none !important;
}

.lb-data .lb-caption {
  color: #fff;
  letter-spacing: 0.1em;
  font-weight: 600;
}

footer {
  background: -ms-linear-gradient(-50deg, rgb(195, 173, 212) 83.6%, rgb(201, 225, 189) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#C3ADD4', endColorstr='#C9E1BD' ,GradientType=0)";
  background: linear-gradient(140deg, rgb(195, 173, 212) 83.6%, rgb(201, 225, 189) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C3ADD4", endColorstr="#C9E1BD", GradientType=1);
  padding: 2rem;
}

@media screen and (min-width: 768px) {
  footer {
    padding: 11rem;
  }
}

.contact_inner .contact_title {
  margin-bottom: 14px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.05em;
}

@media screen and (min-width: 768px) {
  .contact_inner .contact_title {
    margin-bottom: 28px;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
  }
}

.contact_inner .contact_link {
  color: #c3add4;
  text-decoration: none;
  font-size: min(5.59895vw, 7rem);
  font-weight: 900;
  text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
  transition-property: color, text-shadow;
  transition-duration: 0.4s;
  transition-timing-function: ease-out;
}

.contact_inner .contact_link:hover {
  color: #fff;
  text-shadow: none;
}

.footer_container {
  color: #fff;
  border-top: 1px solid #fff;
  margin-top: 5rem;
  padding-top: 2rem;
}

/*# sourceMappingURL=style.css.map */