/*Fonts*/
@font-face {
    font-family: 'MarckScript Regular';
    src: url('../fonts/MarckScript-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Sofia Medium';
    src: url('../fonts/SofiaProMedium.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Sofia Regular';
    src: url('../fonts/SofiaProRegular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Sofia Bold';
    src: url('../fonts/SofiaProBold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Sofia SemiBold';
    src: url('../fonts/SofiaProSemiBold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Lobster Regular';
    src: url('../fonts/Lobster-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Pacifico Regular';
    src: url('../fonts/Pacifico-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'GoodVibesPro';
    src: url('../fonts/GoodVibesPro.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'SofiaPro Black';
    src: url('../fonts/SofiaPro-Black.ttf') format('truetype');
    font-display: swap;
}






/*Specification*/
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}
h1{
    font-weight: normal;
}
button:active,
button:hover,
button:focus,
input:active,
input:hover,
input:focus,
textarea:active,
textarea:hover,
textarea:focus .slick-slide:active,
.slick-slide:hover,
.slick-slide:focus {
    outline: 0;
    outline-offset: 0;
}

li {
    list-style-type: none;
}

body {
    font-family: 'Sofia Regular', sans-serif;
    color: #272727;
    font-size: 16px;
}

ul {
    padding: 0;
    margin: 0;
}

input:-internal-autofill-selected {
    background-color: rgb(232, 240, 254) !important;
    background-image: none !important;
    color: -internal-light-dark-color(black, white) !important;
}

a:hover {
    text-decoration: none;
}

.title {
    font-family: 'Pacifico Regular';
    font-size: 50px;
    color: #272727;
    text-align: center;
}
.btn{
    font-weight: 600;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280px;
    height: 58px;
    font-size: 14px;
    background: #FF4E51;
    color: white;
    user-select: none;
    font-family: 'Sofia SemiBold', sans-serif;
    border-radius: 40px;  
    -webkit-transition: background-color 0.5s, color 0.5s;
    -moz-transition: background-color 0.5s, color 0.5s;
    -o-transition: background-color 0.5s, color 0.5s;
    transition: background-color 0.5s, color 0.5s;
    border: 1px solid #FF4E51;
    text-decoration: none;
}
.btn:hover{
    background: white;
    color: #FF4E51;
    -webkit-transition: background-color 0.5s, color 0.5s;
    -moz-transition: background-color 0.5s, color 0.5s;
    -o-transition: background-color 0.5s, color 0.5s;
    transition: background-color 0.5s, color 0.5s;
    cursor: pointer;
}
.show-767{
    display: none;
}
#container, .pushy, .push {
    transition: transform 0.5s cubic-bezier(0, 0, 0.2, 1);
}
.pushy-left {
    -webkit-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}
.pushy-open-left .pushy{
    z-index: 99;
}
.pushy {
  width: 100%;
  height: auto;
  background: white;
  z-index: 96;
}
.pushy a {
    color: #1F313B;
    padding: 8px 30px;
}
.pushy a:hover{
    color: #ff4e51;
    cursor: pointer;
}
.pushy ul:first-child {
    margin-top: 68px;
}
.pushy-link {
    text-align: center;
}
.pushy-content{
    padding: 15px 0;
}
.pushy__order .header__nav__btn{
    padding: 0;
    color: white;
    display: flex;
    margin-left: auto;
    margin-right: auto;
}
.pushy-open-left .site-overlay{
    z-index: 98;
    background-color: rgba(0, 0, 0, 0.7);
}



/*Popup*/
.popup {
    width: 100%;
    min-height: 100%;
    background-color: none;
    overflow-y: scroll;
    position: fixed;
    top: 0px;
    left: 0px;
	right:0px;
	bottom:0px;
    z-index: 101;
    transform: translate(0, -100%);
    -webkit-transition: transform 1.5s;
    -moz-transition: transform 1.5s;
    -o-transition: transform 1.5s;
    transition: transform 1.5s;
}
.popup__content {
    margin: 55vh auto 0px auto;
    transform: translate(0, -50%);
    max-width: 720px;
    background-color: #ffffff;
    border-radius: 5px;
    position: relative;
    border-radius: 14px;
    padding: 0 29px 50px 39px;
    padding-top: 80px;
}
.popup.active{
    transform: translate(0, 0);
}
.site-overlay.active{
      display: block;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 101;
      background-color: rgba(0, 0, 0, 0.7);
      -webkit-animation: fade 500ms;
      animation: fade 500ms;
}



.popup_close {
    position: absolute;
    right: 18px;
    top: 18px;
    display: block;
    transition: 0.5s;
}

.popup_close:hover {
    cursor: pointer;
}
.popup_close:hover path{
    transition: 0.5s;
    fill: #FF4E51;
}
.popup__delivery__icon{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}
.popup__delivery__text{
    margin-top: 30px;
    line-height: 32px;
}
.popup__delivery span{
    color: #FF4E51;
}
.popup__delivery .desq{
    font-size: 14px;
}
.popup__delivery .popup__content, .popup__faq .popup__content{
    padding-top: 80px;
}
.popup__faq .popup__content{
    padding-bottom: 20px;

}
.popup__faq .popup__content::-webkit-scrollbar{
    display: none;
}
.popup__faq .faq__box{
    margin-top: 55px;
    width: auto;
}
.popup__faq .faq__content{
    padding-bottom: 25px
}






/*header*/
.header {
    position: relative;
}

.header__top {
    padding: 7px 0 6px 0;
    background: white;
    position: absolute;
    width: 100%;
    z-index: 100;
}
.header__top.fixed{
    position: fixed;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    border-bottom: 1px solid #DFDFDF;
}

.header__top__wr {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__logo {
    display: flex;
    text-decoration: none;
}
.header__logo:hover{
    cursor: pointer;
}

.header__logo__icon {
    flex-shrink: 0;
    margin-right: 21px;
}

.header__logo__text {
    font-family: 'Sofia Medium', sans-serif;
    color: #1F313B;
}

.header__logo__text .bold {
    font-family: 'Sofia Bold';
    font-size: 28px;
    color: #272727;
}

.header__nav {
    display: flex;
    align-items: center;
}

.header__nav__list {
    display: flex;
    align-items: center;
    margin-right: 55px;
}

.header__nav__item {
    margin-right: 45px;
}

.header__nav__item:last-child {
    margin-right: 0;
}

.header__nav__link {
    text-decoration: none;
    color: #1F313B;
    position: relative;
}
.header__nav__link.active{
    color: #FF4E51;
}
.header__nav__link.active:before{
    color: #FF4E51;
    visibility: visible;
    width: 100%;
}


.header__nav__link:before {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #FF4E51;
    visibility: hidden;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.header__nav__link:hover {
    color: #FF4E51;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
}

.header__nav__link:hover:before {
    visibility: visible;
    width: 100%;
}

.header__nav__btn {
    background: #FF4E51;
    border-radius: 40px;
    font-family: 'Sofia SemiBold', sans-serif;
    color: white;
    font-size: 14px;
    width: 195px;
    height: 57px;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    border: 1px solid #FF4E51;
    -webkit-transition: background-color 0.5s, color 0.5s;
    -moz-transition: background-color 0.5s, color 0.5s;
    -o-transition: background-color 0.5s, color 0.5s;
    transition: background-color 0.5s, color 0.5s;
    text-decoration: none;
}

.header__nav__btn:hover {
    background: white;
    color: #FF4E51;
    cursor: pointer;
    -webkit-transition: background-color 0.5s, color 0.5s;
    -moz-transition: background-color 0.5s, color 0.5s;
    -o-transition: background-color 0.5s, color 0.5s;
    transition: background-color 0.5s, color 0.5s;
}

.header__content {
    background: #FF4E51 url(/giftlove/img/header/header-bg.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    position: relative;
    padding-bottom: 178px;
    padding-top: 87px;
}

.header__content .container {
    position: relative;
    z-index: 1;
}

.header__content__title {
    color: white;
    margin-top: 125px;
    text-align: left;
}

.header__content__text {
    font-size: 18px;
    color: white;
    line-height: 38px;
    margin-top: 30px;
    letter-spacing: 2px;
}

.header__content__btn {
    font-weight: 600;
    background:#ffffffc4;
    border-radius: 83px;
    color: #FF4E51;
    font-family: 'Sofia SemiBold', sans-serif;
    font-size: 14px;
    width: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 63px;
    margin-top: 38px;
    border: 4px solid white;
    -webkit-transition: background-color 0.5s, color 0.5s;
    -moz-transition: background-color 0.5s, color 0.5s;
    -o-transition: background-color 0.5s, color 0.5s;
    transition: background-color 0.5s, color 0.5s;
    text-decoration: none;
}
.header__content__btn:hover{
    -webkit-transition: background-color 0.5s, color 0.5s;
    -moz-transition: background-color 0.5s, color 0.5s;
    -o-transition: background-color 0.5s, color 0.5s;
    transition: background-color 0.5s, color 0.5s;
    cursor: pointer;
    background: #FF4E51;
    color: white;
}


.header__content__btn.btn2{
    display: none;
}


.header__gallery {
    background: white;
    padding: 20px;
    margin-top: 39px;
    width: 708px;
    position: relative;
}

.header__gallery__hearts {
    position: absolute;
	pointer-events: none;
    bottom: -40px;
    left: -73px;
    z-index: 2;
}

.header__gallery__main {
    margin-bottom: 20px;
}

.header__gallery__main__img {
    width: 100%;
    height: 400px;
    display: block;
    object-fit: cover;
    margin: 0 auto;
}

.header__gallery__slide {
    margin: 0 10px;
}

.header__gallery__slide:hover {
    cursor: pointer;
}

.header__gallery__slider {}

.header__gallery__img {
    width: 152px;
    display: block;
    margin: 0 auto;
    height: 160px;
    object-fit: cover;
}

.header__info {
    margin-top: 150px;
    position: relative;
}

.header__info__box {
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 25px 0 44px 0;
    box-shadow: 4px 6px 0px rgba(0, 0, 0, 0.05);
}

.header__info__box:before {
    content: url(/giftlove/img/header/cloud.svg);
    position: absolute;
    top: -44px;
    z-index: -1;
}

.header__info__icon {
    flex-shrink: 0;
    margin-bottom: 10px;
}

.header__info__title {
    font-family: 'Sofia Bold';
    color: #FF4E51;
    font-size: 50px;
}

.header__info__subtitle {
    font-family: 'GoodVibesPro';
    font-size: 40px;
}

.header__info__name {
    margin-top: 16px;
}

.header__info__heart {
    position: absolute;
    left: 0;
    top: -150px;
}


/*how*/
.how {
    padding-bottom: 40px;
}
.how__subtitle{
    text-align: center;
    margin-top: 35px;
    margin-bottom: 95px;
}
.how__video-wr {
    width: 100%;
    height: 700px;
    position: relative;
    background: url(/giftlove/img/how/video-bg.jpg) center center / cover;
}
.how__play-btn {
    background-image: url(/giftlove/img/how/play.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 80px;
    width: 108px;
    top: 50%;
    left: 50%;
    margin-left: -45px;
    margin-top: -30px;
    position: absolute;
    border-radius: 21px;
    background-position: 50% 50%;
    cursor: pointer;
}
.how iframe{
    width: 100%;
    height: 100%;
}
.how__btn{
    margin-top: 70px;
}



/*steps*/
.steps{
    background: 
        url(/giftlove/img/steps/bg-top.png) center top no-repeat, 
        url(/giftlove/img/steps/bg-bottom.png) center bottom no-repeat,
        linear-gradient(180deg, #FF7183 0%, rgba(255, 205, 212, 0.71) 100%);
    padding-top: 350px;
    padding-bottom: 300px;
}
.steps__wr{
    background: white;
    padding-top: 100px;
    padding-bottom: 10px;
    position: relative;
}
.steps__img__count{
    font-family: 'SofiaPro Black', sans-serif;
    font-weight: 900;
    font-size: 36px;
    color: #FF4A61;
}
.steps__hearts {
    position: absolute;
    left: -74px;
    top: -75px;
}
.steps__title{
    margin-bottom: 100px;
}
.steps__item{
    margin-bottom: 70px;
}
.steps__number{
    margin-left: 580px;
    font-family: 'Sofia Bold';
    color: white;
    font-size: 24px;
    width: 50px;
	    height: 50px;
    text-align: center;
    padding: 10px;
    background: #FF4A61;
    border-radius: 100px;
    box-shadow: 0 0 0 11px rgba(255, 74, 97, 0.13);
    margin-bottom: 35px;
}
.steps__row{
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.steps__left{
    text-align: right;
    margin-right: 60px;
    width: 564px;
}
.steps__name{
    font-size: 22px;
    font-family: 'Sofia Medium', sans-serif;
}
.steps__text{
    line-height: 1.7em;
    margin-top: 30px;
    margin-bottom: 20px;
}
.steps__persons{}
.steps__persons.box2{
    display: none;
}
.steps__persons img{}
.steps__right{
    width: 680px;
}
.steps__right__images{
    display: flex;
    align-items: center;
}
.steps__right__images img{
    margin-right: 12px;
    flex-shrink: 0;
}
.steps__right__images:nth-of-type(2) img{
    margin-right: 22px;
    flex-shrink: 0;
    margin-top: 20px;
}
.steps__right__images img:last-child{
    margin-right: 0;
}
.link{
    color: #FF4E51;
    text-decoration: underline;
}
.link:hover{
    cursor: pointer;
}
.steps__btn{
    margin-right: 0;
}
.img-group1 img:nth-of-type(5), .img-group1 img:nth-of-type(6), .img-group1 img:nth-of-type(7),
.img-group2 img:nth-of-type(4), .img-group2 img:nth-of-type(5), .img-group2 img:nth-of-type(6),
.img-group3 img:nth-of-type(3), .img-group3 img:nth-of-type(4){
    display: none;
}


.steps__price{
    display: block;
    width: 274px;
    background-image: url(/giftlove/img/steps/price-bg.svg);
    background-repeat: no-repeat;
    background-position: center center;
    font-family: 'MarckScript Regular';
    color: white;
    font-size: 44px;
    padding-top: 20px;
    text-align: center;
    height: 103px;
}
.steps__item:last-child .steps__row{
    display: flex;
    align-items: center;
}


/*celebration*/
.celebration{
    padding-top: 80px;
}
.celebration__title{
    margin-bottom: 120px;
}
.celebration__row:nth-of-type(3){
    margin-bottom: 0;
}
.celebration__box{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 150px;
}
.celebration__icon{
    flex-shrink: 0;
}
.celebration__name{
    font-family: 'Lobster Regular';
    color: #272727;
    font-size: 28px;
    margin-top: 32px;
}
.celebration__name span{
    color: #FF4E51;
}


/*faq*/
.faq{
    padding-top: 100px;
    padding-bottom: 100px;
}
.faq__box{
    width: 935px;
    margin: 0 auto;
    margin-top: 100px;
}
.faq__item{
    display: flex;
    align-items: flex-start;
    border-bottom: 1px dashed #949494;
    margin-bottom: 27px;
}
.faq__item:last-child{
    border: none;
}
.faq__btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0 25px;
    border-radius: 100px;
    background: #FF4A61;
    margin-right: 20px;
}
div.faq__item > div.faq__btn > img.faq__plus, div.faq__item.active > div.faq__btn > img.faq__minus{
    position: static;
    opacity: 1;
    z-index: 1;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
	
}

div.faq__item.active > div.faq__btn > img.faq__plus, div.faq__item > div.faq__btn > img.faq__minus{
    position: absolute;
    z-index: -9999;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
	
}
.faq__btn:hover{
    cursor: pointer;
}
.faq__plus{
    flex-shrink: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.faq__minus{
    flex-shrink: 0;
    position: absolute;
    z-index: -9999;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.faq__content{
    padding-bottom: 45px;
}
.faq__name{
    font-size: 22px;
    font-family: 'Sofia Medium', sans-serif;
    height: 50px;
    display: flex;
    align-items: center;
    user-select: none;
}
.faq__name:hover{
    cursor: pointer;
}
.faq__text{
    line-height: 32px;
    margin-top: 24px;
    display: none; 
}

/*contacts*/
.contacts{
    padding-bottom: 250px;
    background: url(/giftlove/img/contacts/bg.png) no-repeat center top,
                url(/giftlove/img/contacts/bg-bottom.png) no-repeat center bottom,
                linear-gradient(360deg, #FF99A6 -21.68%, rgba(255, 202, 209, 0.44) 121.68%);
}
.contacts .container{
    position: relative;
}
.contacts__box{
    background: white;
    width: 705px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 4px 6px 0px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    padding: 29px 33px;
    margin-top: -80px;
    position: relative;
    z-index: 1;
}
.contacts__wr{
    border: 1px dashed rgba(148, 148, 148, 0.5);
    border-radius: 6px;
    padding: 40px 0;
}
.contacts__title{}
.contacts__main{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 60px;
    margin-bottom: 35px;
}
.contacts__left{}
.contacts__left__item{
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}
.contacts__left__item:last-child{
    margin-bottom: 0;
}
.contacts__left__icon{
    flex-shrink: 0;
    margin-right: 34px;
}
.contacts__left__text a{
    font-family: 'Sofia Bold';
    color: black;
    text-decoration: none;
}
.contacts__right{}
.contacts__right__img{
    flex-shrink: 0;
}
.contacts__subtitle{
    text-align: center;
}
.contacts__social{
    display: flex;
    align-items: center;
    justify-content: center;
}
.contacts__social a{
    text-decoration: none;
}
.contacts__social__icon{
    display: block;
    flex-shrink: 0;
    margin: 0 15px;
    margin-top: 26px;
    -webkit-transition: fill 0.5s;
    -moz-transition: fill 0.5s;
    -o-transition: fill 0.5s;
    transition: fill 0.5s;
}
.contacts__social__icon:hover path{
    -webkit-transition: fill 0.5s;
    -moz-transition: fill 0.5s;
    -o-transition: fill 0.5s;
    transition: fill 0.5s;
}
.contacts__social__icon.fb:hover path{
    fill: #3a569c;
}
.contacts__social__icon.vk:hover path{
    fill: #4680c2;
}
.contacts__social__icon.youtube:hover path{
    fill: #f70000;
}
.contacts__social__icon.insta:hover path{
    fill: #e24569;
}
.contacts__ball {
    position: absolute;
    top: 183px;
    left: 108px;
    z-index: 0;
}


/*footer*/
.footer__text{
    padding-bottom: 30px;
    text-align: center;
    font-size: 14px;
    font-family: 'Sofia Medium';
}



/*menu animate*/
.header__menu-btn {
  width: 30px;
  height: 30px;
  display: none;
  justify-content: center;
  align-items: center;
}

.menu-icon {
  position: relative;
  width: 30px;
  height: 5px;
  background-color: #ff4e51;
}

.menu-icon::before {
  position: absolute;
  left: 0;
  top: -10px;
  content: '';
  width: 30px;
  height: 5px;
  background-color: #ff4e51;
  transition: transform 0.2s ease-in, top 0.2s linear 0.2s;

}

.menu-icon::after {
  position: absolute;
  left: 0;
  top: 10px;
  content: '';
  width: 30px;
  height: 5px;
  background-color: #ff4e51;
  transition: transform 0.2s ease-in, top 0.2s linear 0.2s;

}

.menu-icon.active {
  background-color: transparent;
}

.menu-icon.active::before {
  transform: rotate(45deg);
  top: 0;
  transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
}

.menu-icon.active::after {
  transform: rotate(-45deg);
  top: 0;
  transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
}


/*preloader*/
.preloader {
    position: fixed;
    z-index: 9999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
}
.preloader__heart{
    display: block;
    position: absolute;
    left: 50vw;
    top: 50vh;
    transform: translate(-50%, -50%);
}
.preloader__heart.heart1{
    width: 80px;
    top: calc(50vh - 90px);
    animation-duration: 1.6s;
    animation-name: goUp;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.preloader__heart.heart2{
    width: 60px;
    left: calc(50vw - 60px);
    animation-duration: 1.6s;
    animation-name: goUp2;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0.2s;
}
.preloader__heart.heart3{
    top: calc(50vh + 60px);
    left: calc(50vw + 20px);
    width: 45px;
    animation-duration: 1.6s;
    animation-name: goUp3;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0.4s;
}
.preloader__title{
    font-weight: 300;
    font-family: Arial;
    font-size: 30px;
    text-align: center;
    margin-top: calc(50vh + 90px);
}
.preloader__title span{
    font-weight: 600;
    color: #FF4E51;
    font-size: 50px;
}

@keyframes goUp {
  from {
    top: calc(50vh - 90px);
    opacity: 0;
    width: 80px;
  }
  50%{
    opacity: 1;
    top: calc(50vh - 140px);
  }
  to {
    top: calc(50vh - 170px);
    opacity: 0;
    width: 100px;
  }
}
@keyframes goUp2 {
  from {
    left: calc(50vw - 60px);
    opacity: 0;
    width: 60px;
  }
  50%{
    opacity: 1;
    top: calc(50vh - 85px);
  }
  to {
    top: calc(50vh - 105px);
    opacity: 0;
    width: 80px;
  }
}
@keyframes goUp3 {
  from {
    top: calc(50vh + 60px);
    opacity: 0;
    width: 45px;
  }
  50%{
    opacity: 1;
    top: calc(50vh - 40px);
  }
  to {
    top: calc(50vh - 80px);
    opacity: 0;
    width: 65px;
  }
}