.env-container {
  height: 100vh;
  width: 100vw;
  background: var(--preLoading);
  display: grid;
  place-items: center;
  z-index: 9999;
  position: fixed;
  /* overscroll-behavior: contain;; */
}

.env-container>.envelope-wrapper {
  background: var(--bg-envelope-color);
  box-shadow: 0 0 40px var(--shadow-color);
}

.envelope-wrapper>.envelope {
  position: relative;
  width: 300px;
  height: 230px;
  background: var(--bg-envelope-color);
}

.envelope-wrapper>.envelope2 {
  position: absolute;
  width: 300px;
  height: 230px;
  background: var(--bg-envelope-color);
}

.envelope-wrapper>.envelope::before {
  content: "";
  position: absolute;
  top: 0;
  z-index: 2;
  border-top: 130px solid var(--envelope-tab);
  border-right: 150px solid transparent;
  border-left: 150px solid transparent;
  transform-origin: top;
  transition: all 0.5s ease-in-out 0.7s;
}

.envelope-wrapper>.envelope2::before {
  content: "";
  position: absolute;
  top: 0;
  z-index: 2;
  border-top: 130px solid #fffbf3;
  border-right: 150px solid transparent;
  border-left: 150px solid transparent;
  transform-origin: top;
  transition: all 0.5s ease-in-out 0.7s;
}

.envelope-wrapper>.envelope::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 0px;
  height: 0px;
  border-top: 130px solid transparent;
  border-right: 150px solid var(--envelope-cover);
  border-bottom: 100px solid var(--envelope-cover);
  border-left: 150px solid var(--envelope-cover);
}

.envelope>.letter {
  position: absolute;
  right: 22%;
  bottom: 0;
  width: 54%;
  height: 80%;
  /* background: var(--primary); */
  text-align: center;
  transition: all 1s ease-in-out;
  box-shadow: 0 0 5px var(--shadow-color);
  padding: 20px 10px;
}

.show>.envelope>.letter {
  z-index: 2;
  opacity: 1;
}

.envelope>.letter>.text {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: var(--txt-color);
  text-align: left;
  font-size: 10px;
}

.env-logo {
  width: 60px;
  z-index: 10000;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 10px;
}

.heart {
  position: absolute;
  top: 51%;
  left: 50%;
  width: 15px;
  height: 15px;
  background: var(--heart-color);
  z-index: 4;
  transform: translate(-50%, -20%) rotate(45deg);
  transition: transform 0.5s ease-in-out 1s;
  box-shadow: 0 1px 6px var(--shadow-color);
  cursor: pointer;
}

.heart:before,
.heart:after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: var(--heart-color);
  border-radius: 50%;
}

.heart:before {
  top: -7.5px;
}

.heart:after {
  right: 7.5px;
}

.flap2>.envelope2:before {
  transform: rotateX(180deg);
  z-index: 2;
}

.flap>.envelope:before {
  transform: rotateX(180deg);
  z-index: 2;
  border-top: 130px solid var(--envelope-cover);
}

.flap>.envelope>.letter {
  bottom: 100px;
  transform: scale(1);
  transition-delay: 1s;
}

.flap>.heart {
  transform: rotate(90deg);
  transition-delay: 0.4s;
}


.no-webp .elementWithBackgroundGallery1 {
  background-image: url("gallery/gallery1.jpeg");
}

.no-webp .elementWithBackgroundGallery2 {
  background-image: url("gallery/gallery2.jpeg");
}

.no-webp .elementWithBackgroundGallery3 {
  background-image: url("gallery/gallery3.jpeg");
}

.no-webp .elementWithBackgroundGallery4 {
  background-image: url("gallery/gallery4.jpeg");
}

.no-webp .elementWithBackgroundGallery5 {
  background-image: url("gallery/gallery5.jpeg");
}

.no-webp .elementWithBackgroundGallery6 {
  background-image: url("gallery/gallery6.jpeg");
}

.no-webp .elementWithBackgroundGallery7 {
  background-image: url("gallery/gallery7.jpeg");
}

.no-webp .elementWithBackgroundGallery8 {
  background-image: url("gallery/gallery8.jpeg");
}

.no-webp .elementWithBackgroundGallery9 {
  background-image: url("gallery/gallery9.jpeg");
}

.no-webp .elementWithBackgroundGallery10 {
  background-image: url("gallery/gallery10.jpeg");
}

.no-webp .elementWithBackgroundGallery11 {
  background-image: url("gallery/gallery11.jpeg");
}

.no-webp .elementWithBackgroundGallery12 {
  background-image: url("gallery/gallery12.jpeg");
}

.no-webp .elementWithBackgroundGallery13 {
  background-image: url("gallery/gallery13.jpeg");
}

.no-webp .elementWithBackgroundGallery14 {
  background-image: url("gallery/gallery14.jpeg");
}

.no-webp .elementWithBackgroundGallery15 {
  background-image: url("gallery/gallery15.jpeg");
}

.no-webp .elementWithBackgroundGallery16 {
  background-image: url("gallery/gallery16.jpeg");
}

.no-webp .elementWithBackgroundGallery17 {
  background-image: url("gallery/gallery17.jpeg");
}

.no-webp .elementWithBackgroundGallery18 {
  background-image: url("gallery/gallery18.jpeg");
}

.no-webp .elementWithBackgroundGallery19 {
  background-image: url("gallery/gallery19.jpeg");
}

.no-webp .elementWithBackgroundGallery20 {
  background-image: url("gallery/gallery20.jpeg");
}

.no-webp .elementWithBackgroundGallery21 {
  background-image: url("gallery/gallery21.jpeg");
}

.no-webp .elementWithBackgroundGallery22 {
  background-image: url("gallery/gallery22.jpeg");
}

.no-webp .elementWithBackgroundGallery23 {
  background-image: url("gallery/gallery23.jpeg");
}

.no-webp .elementWithBackgroundGallery24 {
  background-image: url("gallery/gallery24.jpeg");
}

.no-webp .elementWithBackgroundGallery25 {
  background-image: url("gallery/gallery25.jpeg");
}

.no-webp .elementWithBackgroundGallery26 {
  background-image: url("gallery/gallery26.jpeg");
}

.no-webp .elementWithBackgroundGallery27 {
  background-image: url("gallery/gallery27.jpeg");
}

.no-webp .elementWithBackgroundGallery28 {
  background-image: url("gallery/gallery28.jpeg");
}

.no-webp .elementWithBackgroundGallery29 {
  background-image: url("gallery/gallery29.jpeg");
}

.no-webp .elementWithBackgroundGallery30 {
  background-image: url("gallery/gallery30.jpeg");
}

.no-webp .elementWithBackgroundGallery31 {
  background-image: url("gallery/gallery31.jpeg");
}

.no-webp .elementWithBackgroundGallery32 {
  background-image: url("gallery/gallery32.jpeg");
}

.no-webp .elementWithBackgroundGallery33 {
  background-image: url("gallery/gallery33.jpeg");
}

.no-webp .elementWithBackgroundGallery34 {
  background-image: url("gallery/gallery34.jpeg");
}

.no-webp .elementWithBackgroundGallery35 {
  background-image: url("gallery/gallery35.jpeg");
}

.no-webp .elementWithBackgroundGallery36 {
  background-image: url("gallery/gallery36.jpeg");
}

.no-webp .elementWithBackgroundGallery37 {
  background-image: url("gallery/gallery37.jpeg");
}

.no-webp .elementWithBackgroundGallery38 {
  background-image: url("gallery/gallery38.jpeg");
}

.no-webp .elementWithBackgroundGallery39 {
  background-image: url("gallery/gallery39.jpeg");
}

.no-webp .elementWithBackgroundGallery40 {
  background-image: url("gallery/gallery40.jpeg");
}

.no-webp .elementWithBackgroundGallery41 {
  background-image: url("gallery/gallery41.jpeg");
}

.no-webp .elementWithBackgroundGallery42 {
  background-image: url("gallery/gallery42.jpeg");
}

.webp .elementWithBackgroundGallery1 {
  background-image: url("gallery/gallery1.webp");
}

.webp .elementWithBackgroundGallery2 {
  background-image: url("gallery/gallery2.webp");
}

.webp .elementWithBackgroundGallery3 {
  background-image: url("gallery/gallery3.webp");
}

.webp .elementWithBackgroundGallery4 {
  background-image: url("gallery/gallery4.webp");
}

.webp .elementWithBackgroundGallery5 {
  background-image: url("gallery/gallery5.webp");
}

.webp .elementWithBackgroundGallery6 {
  background-image: url("gallery/gallery6.webp");
}

.webp .elementWithBackgroundGallery7 {
  background-image: url("gallery/gallery7.webp");
}

.webp .elementWithBackgroundGallery8 {
  background-image: url("gallery/gallery8.webp");
}

.webp .elementWithBackgroundGallery9 {
  background-image: url("gallery/gallery9.webp");
}

.webp .elementWithBackgroundGallery10 {
  background-image: url("gallery/gallery10.webp");
}

.webp .elementWithBackgroundGallery11 {
  background-image: url("gallery/gallery11.webp");
}

.webp .elementWithBackgroundGallery12 {
  background-image: url("gallery/gallery12.webp");
}

.webp .elementWithBackgroundGallery13 {
  background-image: url("gallery/gallery13.webp");
}

.webp .elementWithBackgroundGallery14 {
  background-image: url("gallery/gallery14.webp");
}

.webp .elementWithBackgroundGallery15 {
  background-image: url("gallery/gallery15.webp");
}

.webp .elementWithBackgroundGallery16 {
  background-image: url("gallery/gallery16.webp");
}

.webp .elementWithBackgroundGallery17 {
  background-image: url("gallery/gallery17.webp");
}

.webp .elementWithBackgroundGallery18 {
  background-image: url("gallery/gallery18.webp");
}

.webp .elementWithBackgroundGallery19 {
  background-image: url("gallery/gallery19.webp");
}

.webp .elementWithBackgroundGallery20 {
  background-image: url("gallery/gallery20.webp");
}

.webp .elementWithBackgroundGallery21 {
  background-image: url("gallery/gallery21.webp");
}

.webp .elementWithBackgroundGallery22 {
  background-image: url("gallery/gallery22.webp");
}

.webp .elementWithBackgroundGallery23 {
  background-image: url("gallery/gallery23.webp");
}

.webp .elementWithBackgroundGallery24 {
  background-image: url("gallery/gallery24.webp");
}

.webp .elementWithBackgroundGallery25 {
  background-image: url("gallery/gallery25.webp");
}

.webp .elementWithBackgroundGallery26 {
  background-image: url("gallery/gallery26.webp");
}

.webp .elementWithBackgroundGallery27 {
  background-image: url("gallery/gallery27.webp");
}

.webp .elementWithBackgroundGallery28 {
  background-image: url("gallery/gallery28.webp");
}

.webp .elementWithBackgroundGallery29 {
  background-image: url("gallery/gallery29.webp");
}

.webp .elementWithBackgroundGallery30 {
  background-image: url("gallery/gallery30.webp");
}

.webp .elementWithBackgroundGallery31 {
  background-image: url("gallery/gallery31.webp");
}

.webp .elementWithBackgroundGallery32 {
  background-image: url("gallery/gallery32.webp");
}

.webp .elementWithBackgroundGallery33 {
  background-image: url("gallery/gallery33.webp");
}

.webp .elementWithBackgroundGallery34 {
  background-image: url("gallery/gallery34.webp");
}

.webp .elementWithBackgroundGallery35 {
  background-image: url("gallery/gallery35.webp");
}

.webp .elementWithBackgroundGallery36 {
  background-image: url("gallery/gallery36.webp");
}

.webp .elementWithBackgroundGallery37 {
  background-image: url("gallery/gallery37.webp");
}

.webp .elementWithBackgroundGallery38 {
  background-image: url("gallery/gallery38.webp");
}

.webp .elementWithBackgroundGallery39 {
  background-image: url("gallery/gallery39.webp");
}

.webp .elementWithBackgroundGallery40 {
  background-image: url("gallery/gallery40.webp");
}

.webp .elementWithBackgroundGallery41 {
  background-image: url("gallery/gallery41.webp");
}

.webp .elementWithBackgroundGallery42 {
  background-image: url("gallery/gallery42.webp");
}

.no-js .elementWithBackgroundGallery1 {
  background-image: url("gallery/gallery1.jpeg");
}

.no-js .elementWithBackgroundGallery2 {
  background-image: url("gallery/gallery2.jpeg");
}

.no-js .elementWithBackgroundGallery3 {
  background-image: url("gallery/gallery3.jpeg");
}

.no-js .elementWithBackgroundGallery4 {
  background-image: url("gallery/gallery4.jpeg");
}

.no-js .elementWithBackgroundGallery5 {
  background-image: url("gallery/gallery5.jpeg");
}

.no-js .elementWithBackgroundGallery6 {
  background-image: url("gallery/gallery6.jpeg");
}

.no-js .elementWithBackgroundGallery7 {
  background-image: url("gallery/gallery7.jpeg");
}

.no-js .elementWithBackgroundGallery8 {
  background-image: url("gallery/gallery8.jpeg");
}

.no-js .elementWithBackgroundGallery9 {
  background-image: url("gallery/gallery9.jpeg");
}

.no-js .elementWithBackgroundGallery10 {
  background-image: url("gallery/gallery10.jpeg");
}

.no-js .elementWithBackgroundGallery11 {
  background-image: url("gallery/gallery11.jpeg");
}

.no-js .elementWithBackgroundGallery12 {
  background-image: url("gallery/gallery12.jpeg");
}

.no-js .elementWithBackgroundGallery13 {
  background-image: url("gallery/gallery13.jpeg");
}

.no-js .elementWithBackgroundGallery14 {
  background-image: url("gallery/gallery14.jpeg");
}

.no-js .elementWithBackgroundGallery15 {
  background-image: url("gallery/gallery15.jpeg");
}

.no-js .elementWithBackgroundGallery16 {
  background-image: url("gallery/gallery16.jpeg");
}

.no-js .elementWithBackgroundGallery17 {
  background-image: url("gallery/gallery17.jpeg");
}

.no-js .elementWithBackgroundGallery18 {
  background-image: url("gallery/gallery18.jpeg");
}

.no-js .elementWithBackgroundGallery19 {
  background-image: url("gallery/gallery19.jpeg");
}

.no-js .elementWithBackgroundGallery20 {
  background-image: url("gallery/gallery20.jpeg");
}

.no-js .elementWithBackgroundGallery21 {
  background-image: url("gallery/gallery21.jpeg");
}

.no-js .elementWithBackgroundGallery22 {
  background-image: url("gallery/gallery22.jpeg");
}

.no-js .elementWithBackgroundGallery23 {
  background-image: url("gallery/gallery23.jpeg");
}

.no-js .elementWithBackgroundGallery24 {
  background-image: url("gallery/gallery24.jpeg");
}

.no-js .elementWithBackgroundGallery25 {
  background-image: url("gallery/gallery25.jpeg");
}

.no-js .elementWithBackgroundGallery26 {
  background-image: url("gallery/gallery26.jpeg");
}

.no-js .elementWithBackgroundGallery27 {
  background-image: url("gallery/gallery27.jpeg");
}

.no-js .elementWithBackgroundGallery28 {
  background-image: url("gallery/gallery28.jpeg");
}

.no-js .elementWithBackgroundGallery29 {
  background-image: url("gallery/gallery29.jpeg");
}

.no-js .elementWithBackgroundGallery30 {
  background-image: url("gallery/gallery30.jpeg");
}

.no-js .elementWithBackgroundGallery31 {
  background-image: url("gallery/gallery31.jpeg");
}

.no-js .elementWithBackgroundGallery32 {
  background-image: url("gallery/gallery32.jpeg");
}

.no-js .elementWithBackgroundGallery33 {
  background-image: url("gallery/gallery33.jpeg");
}

.no-js .elementWithBackgroundGallery34 {
  background-image: url("gallery/gallery34.jpeg");
}

.no-js .elementWithBackgroundGallery35 {
  background-image: url("gallery/gallery35.jpeg");
}

.no-js .elementWithBackgroundGallery36 {
  background-image: url("gallery/gallery36.jpeg");
}

.no-js .elementWithBackgroundGallery37 {
  background-image: url("gallery/gallery37.jpeg");
}

.no-js .elementWithBackgroundGallery38 {
  background-image: url("gallery/gallery38.jpeg");
}

.no-js .elementWithBackgroundGallery39 {
  background-image: url("gallery/gallery39.jpeg");
}

.no-js .elementWithBackgroundGallery40 {
  background-image: url("gallery/gallery40.jpeg");
}

.no-js .elementWithBackgroundGallery41 {
  background-image: url("gallery/gallery41.jpeg");
}

.no-js .elementWithBackgroundGallery42 {
  background-image: url("gallery/gallery42.jpeg");
}