* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Cormorant Infant', serif;
}

body {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  background: url(../img/blur_background_b.jpg);
  background-size: cover;
}

.preloader {
    background-color: #fff;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
}
.preloader__loader {
      height: 100vh;
      width: 100%;
      background: url(../img/blur_background_b.jpg);
      background-size: cover;
}

/* весь контейнер поддерживает перспективу */
.flip-container {
 perspective: 1000;
}
 /* переверните сторону при проведении мышью */
 .flip-container:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(180deg);
 }

.flip-container, .front, .back {
 width: 400px;
 height: 300px;
}


/* здесь находится скорость перевертывания */
.flipper {
 transition: 3s;
 transform-style: preserve-3d;

 position: relative;
}

/* скройте обратную сторону во время переворота */
.front, .back {
 backface-visibility: hidden;

 position: absolute;
 top: 0;
 left: 0;
}

/* лицевая сторона размещена над обратной */
.front {
 z-index: 2;
}

/* обратная, изначально скрытая сторона */
.back {
 transform: rotateY(180deg);
}




/* весь контейнер поддерживает перспективу */
.flip-container {
 perspective: 1000;
}
 /* переверните сторону при проведении мышью */
 .flip-container:hover .flipper, .flip-container.hover .flipper {
 transform: rotateY(180deg);
 }



/* здесь находится скорость перевертывания */
.flipper {
 transition: 0.6s;
 transform-style: preserve-3d;

 position: relative;
}

/* скройте обратную сторону во время переворота */
.front, .back {
 backface-visibility: hidden;

 position: absolute;
 top: 0;
 left: 0;
}

/* лицевая сторона размещена над обратной */
.front {
 z-index: 2;
}

/* обратная, изначально скрытая сторона */
.back {
 transform: rotateY(180deg);
}




.wrapper {
  height: 300px;

      background: url(../img/letter_front.png);
      position: relative;
      display: flex;
      justify-content: center;
      z-index: 0;
      background-size: cover;
}

.lid {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-right: 200px solid transparent;
  border-bottom: 150px solid transparent;
  border-left: 200px solid transparent;
  transform-origin: top;
  transition: transform 0.25s linear;
}

/* Lid when closed         */
.lid.one {
  border-top: 0px solid #658ced;
  transform: rotateX(0deg);
  z-index: 12;
  transition-delay: 0s;
  height: 150px;
  background-size: 410px !important;
  background-position: top center !important;
  background: url(../img/letter_back_top-front.png);

}

/* Lid when opened */
.lid.two {

  background: url(../img/letter_back_top.png);
    width: 400px;
    height: 150px;
    border: 0px red solid;
    position: relative;
    top:20px;
    background-position: center !important;
    background-size: contain !important;
}

.envelope {
  position: absolute;
      height: 100%;
      width: 100%;
      /* color: #658ced; */
      top: 0;
      left: 0;
      border-top: 150px solid transparent;
      border-right: 200px solid #c4dff000;
      border-bottom: 150px solid #c4dff000;
      border-left: 200px solid #a4d4f200;
      z-index: 3;
      background: url(../img/letter_back.png);
      background-position: center;
      background-size: 400px;
}

.letter {
  position: absolute;
  top: 24px;
  width: 80%;
  height: 80%;
          background-size: contain !important;
  background: url(../img/priglahenie.jpg);
  border-radius: 0px;
  z-index: 2;
  transition: 3s;
    box-shadow: 0px 0px 20px 10px #00000069;
    font-size: 16px;
    padding: 20px;
}

.letter span {
    font-size: 20px;
    display: block;
    font-weight: 900;
}


.letter p {
  text-align: center;
  font-size: 30px;
  margin-top: 30px;
  color: #3B4049;
}

.wrapper:hover .lid.one {
    transform: rotateX(90deg);
    transition-delay: 0s;

}

.wrapper:hover  .lid.two {
    transform: rotateX(180deg);
    transition-delay: 0s;


}

.wrapper:hover .letter {
  transform: translateY(0px); /*-75)*/
  transition-delay: 3s;
    z-index: 999 !important;
}


.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden;
    background: url(../img/background.jpg);
    border-radius: 0px;
}

.btn {

    padding: 20px 20px;

    line-height: 0px;
    text-decoration: none;
    color: #FFF;
    text-shadow: 0px 1px 3px rgb(0 0 0 / 75%);
    background-color: #f85969;
    outline: none;
    border-radius: 5px;
    border: 0px solid #4c0300;
    box-shadow: 0 3px 3px rgb(244 67 87 / 40%);
    position: relative;
    overflow: visible;
    -webkit-transition: 500ms linear;
    -moz-transition: 500ms linear;
    -o-transition: 500ms linear;
    transition: 500ms linear;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 100;
    top: 0px;
    position: relative;
z-index: 1;
}
.btn:hover {
  background-color: #d93545;
}
.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
    font-size: 24px;
    padding: 20px;
}
.modal-dialog-scrollable .modal-body img {
    width: 100%;
}
.modal-dialog-scrollable .modal-body h2 {
    font-weight: 900;
}
.dotted {
  border-top: 4px black dotted !important;
  border-bottom: 4px black dotted !important;
  width: 100px;
  display: inline-block;
  text-align: center;
}





body .textcontainer {
  padding: 10px 0;
  text-align: center;
}
body .particletext {
  text-align: center;
  font-size: 48px;
  position: relative;
}
body .particletext.hearts > .particle {
  opacity: 0;
  position: absolute;
  background-color: #cc2a5d;
  -webkit-animation: hearts 3s ease-in infinite;
          animation: hearts 3s ease-in infinite;
}
body .particletext.hearts > .particle:before, body .particletext.hearts > .particle:after {
  position: absolute;
  content: '';
  border-radius: 100px;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #cc2a5d;
}
body .particletext.hearts > .particle:before {
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
body .particletext.hearts > .particle:after {
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

@-webkit-keyframes hearts {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0%) rotate(45deg);
            transform: translate(0, 0%) rotate(45deg);
  }
  20% {
    opacity: 0.8;
    -webkit-transform: translate(0, -20%) rotate(45deg);
            transform: translate(0, -20%) rotate(45deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%) rotate(45deg);
            transform: translate(0, -1000%) rotate(45deg);
  }
}
@keyframes hearts {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0%) rotate(45deg);
            transform: translate(0, 0%) rotate(45deg);
  }

  20% {
    opacity: 0.2;
    -webkit-transform: translate(0, 40%) rotate(45deg);
            transform: translate(0, 40%) rotate(45deg);
  }

  60% {
    opacity: 0.6;
    -webkit-transform: translate(0, -20%) rotate(45deg);
            transform: translate(0, -20%) rotate(45deg);
  }
  80% {
    opacity: 0.8;
    -webkit-transform: translate(0, 40%) rotate(45deg);
            transform: translate(0, 40%) rotate(45deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, -20%) rotate(45deg);
            transform: translate(0, -20%) rotate(45deg);
  }
}



@keyframes list {
  100% {transform: translateY(100px); opacity: 0;}
  90% {transform: translateY(80px) translateX(100px) rotate(0deg); opacity: 1;}
  80% {transform: translateY(120px) translateX(-50px)rotate(40deg);}
  70% {transform: translateY(300px) translateX(100px)rotate(0deg);}
  60% {transform: translateY(400px) translateX(-100px)rotate(60deg);opacity: 0.4;}
  50% {transform: translateY(450px) translateX(250px)rotate(0deg);}
  40% {transform: translateY(500px) translateX(-50px)rotate(40deg);}
  30% {transform: translateY(600px) translateX(100px)rotate(80deg);}
  20% {transform: translateY(700px) translateX(-150px)rotate(40deg);}
  10% {transform: translateY(800px) translateX(150px)rotate(0deg); opacity: 0;}
}
img {
  float: left;

}
.preloader__loader .pic1 {height: 70px; animation: 10s list infinite;}
.preloader__loader .pic2 {height: 47px; animation: 14s list infinite;}
.preloader__loader .pic3 {height: 180px; animation: 16s list infinite;}
.preloader__loader .pic4 {height: 55px; animation: 13s list infinite;}
.preloader__loader .pic5 {height: 70px; animation: 10s list infinite;}
.preloader__loader .pic6 {height: 96px; animation: 14s list infinite;}
.preloader__loader .pic7 {height: 80px; animation: 17s list infinite;}
.preloader__loader .pic8 {height: 37px; animation: 17s list infinite;}
.preloader__loader .pic9 {height: 67px; animation: 13s list infinite;}
.preloader__loader .pic10 {height: 72px; animation: 10s list infinite;}
.preloader__loader .pic11 {height: 90px; animation: 14s list infinite;}
.preloader__loader .pic12 {height: 80px; animation: 15s list infinite;}
.preloader__loader .pic13 {height: 52px; animation: 18s list infinite;}
.preloader__loader .pic14 {height: 45px; animation: 10s list infinite;}
.preloader__loader .pic15 {height: 77px; animation: 19s list infinite;}
.preloader__loader .pic16 {height: 90px; animation: 17s list infinite;}
.preloader__loader .pic17 {height: 40px; animation: 15s list infinite;}

@media  (min-width:992px) {

  .flip-container, .front, .back {
      width: 800px;
      height: 600px;
  }
  .wrapper {
    height: 600px;}
  .envelope {
    background-size: 800px;
  }
  .lid.one {
    height: 300px;
    background-size: 820px !important;
  }
  .lid.two {
    width: 800px;
    height: 300px;
    top: 30px;
  }
  .letter {
      top: 50px;
      padding: 90px 100px;
      font-size: 22px;
  }
  .letter span {
    font-size: 28px;
  }
  .wrapper:hover .letter {
    transform: translateY(-150px);
    transition-delay: 0.5s;
  }

  body .textcontainer {
      padding: 50px 0px !important;
      text-align: center;
  }
}