@keyframes heart-0 {
  0% {left: 25px; top: -334px; opacity: 1;}
  10% {top: -280px;}
  20% {top: -240px;}
  30% {top: -210px;}
  40% {top: -190px;}
  50% {top: -210px;}
  60% {top: -240px;}
  70% {top: -330px;}
  80% {top: -400px;}
  90% {top: -500px;}
  100% {left: 200%; top: -600px; opacity: 0;}
}

@keyframes heart-1 {
  0% {left: 290px; top: -350px; opacity: 1;}
  10% {top: -300px;}
  20% {top: -260px;}
  30% {top: -220px;}
  40% {top: -200px;}
  50% {top: -190px;}
  60% {top: -220px;}
  70% {top: -300px;}
  80% {top: -450px;}
  90% {top: -600px;}
  100% {left: 200%; top: -600px; opacity: 0;}
}

@keyframes heart-2 {
  0% {left: 192px; top: -230px; opacity: 1;}
  10% {top: -150px;}
  20% {top: -100px;}
  30% {top: -80px;}
  40% {top: -70px;}
  50% {top: -100px;}
  60% {top: -150px;}
  70% {top: -235px;}
  80% {top: -450px;}
  90% {top: -600px;}
  100% {left: 200%; top: -600px; opacity: 0;}
}

@keyframes heart-3 {
  0% {left: 370px; top: -430px; opacity: 1;}
  10% {top: -400px;}
  20% {top: -300px;}
  30% {top: -250px;}
  40% {top: -260px;}
  50% {top: -300px;}
  60% {top: -400px;}
  70% {top: -600px;}
  80% {top: -600px;}
  90% {top: -600px;}
  100% {left: 200%; top: -600px; opacity: 0;}
}

@keyframes heart-4 {
  0% {left: 210px; top: -220px; opacity: 1;}
  10% {top: -150px;}
  20% {top: -130px;}
  30% {top: -121px;}
  40% {top: -125px;}
  50% {top: -140px;}
  60% {top: -190px;}
  70% {top: -310px;}
  80% {top: -470px;}
  90% {top: -600px;}
  100% {left: 200%; top: -600px; opacity: 0;}
}

@keyframes heart-5 {
  0% {left: 330px; top: -330px; opacity: 1;}
  10% {top: -210px;}
  20% {top: -160px;}
  30% {top: -140px;}
  40% {top: -160px;}
  50% {top: -250px;}
  60% {top: -290px;}
  70% {top: -340px;}
  80% {top: -430px;}
  90% {top: -500px;}
  100% {left: 200%; top: -600px; opacity: 0;}
}

/*smartphone*/
@media (max-width: 1100px) {
  .tree {
    float: none;
    margin: auto;
    min-width: 400px;
    width: 100%;
  }  

  .text {
    float: none;
    margin: auto;
    padding-top: 0px;
    width: 100%;
  }
}

/*PC*/
@media (min-width: 1101px) {
  .tree {
    float: left;
    margin: auto;
    min-width: 400px;
    width: 49%;
  }  

  .text {
    float: left;
    padding-top: 80px;
    margin: auto;
    width: 49%;
  }  
}

.content {
  color: white;
  position: absolute;
  top: 60px;
  left: 0px;
  overflow: hidden;
  width: 100%;
  /* IE10 Consumer Preview */ 
  background-image: -ms-linear-gradient(bottom, rgb(255, 10, 50) 0%, #FFFFFF 100%);

  /* Mozilla Firefox */ 
  background-image: -moz-linear-gradient(bottom, rgb(255, 10, 50) 0%, #FFFFFF 100%);

  /* Opera */ 
  background-image: -o-linear-gradient(bottom, rgb(255, 10, 50) 0%, #FFFFFF 100%);

  /* Webkit (Safari/Chrome 10) */ 
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(255, 10, 50)), color-stop(1, #FFFFFF));

  /* Webkit (Chrome 11+) */ 
  background-image: -webkit-linear-gradient(bottom, rgb(255, 10, 50) 0%, #FFFFFF 100%);

  /* W3C Markup, IE10 Release Preview */ 
  background-image: linear-gradient(to top, rgb(255, 10, 50) 0%, #FFFFFF 100%);
}

.audioplayer {
  border: 3px solid white;
  border-radius: 50px;
  height: 50px;
  margin: 3px auto 3px 200px;
  width: 50px;
}

.audioplayer .play-icon { 
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-left: 20px solid white;
  border-bottom: 15px solid transparent;
  margin: 10px 10px 10px 17px;
  
}

.audioplayer .pause-icon {
  margin: 5px auto auto 5px;
}

.audioplayer .pause-icon .line {
  background-color: white;
  float: left;
  margin: 5px;
  height: 30px;
  width: 10px;
}

.clear {
  clear: both;
}

.footer {
  background-color: #c70063;
  color: white;
  width: 100%;
}

.header {
  background-color: #c70063;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 60px;
  width: 100%;
}

.header .logo {
  margin-left: 80px;
  margin-right: 20px;
  float: left;
}

.header .logo img {
  height: 50px;
}

.heart {
    position: relative;
    width: 0px;
    height: 0px;
}
.heart:before,
.heart:after {
    position: absolute;
    content: "";
    left: 20px;
    top: 0;
    width: 20px;
    height: 32px;
    background: #cb0000;
    -moz-border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
.heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}


#animated-heart-0 {
  animation: heart-0 20s linear infinite;
}

#animated-heart-1 {
  animation: heart-1 23s linear infinite;
}

#animated-heart-2 {
  animation: heart-2 27s linear infinite;
}

#animated-heart-3 {
  animation: heart-3 32s linear infinite;
}

#animated-heart-4 {
  animation: heart-4 35s linear infinite;
}

#animated-heart-5 {
  animation: heart-5 41s linear infinite;
}

#heart-0 {
  left: 220px;
  top: -130px;
}

#heart-1 {
  left: 220px;
  top: -400px;
}

#heart-2 {
  left: 20px;
  top: -400px;
}

#heart-3 {
  left: 420px;
  top: -400px;
}

#heart-4 {
  left: 170px;
  top: -410px;
}

#heart-5 {
  left: 160px;
  top: -430px;
}

#heart-6 {
  left: 110px;
  top: -440px;
}

#heart-7 {
  left: 70px;
  top: -430px;
}

#heart-8 {
  left: 70px;
  top: -200px;
}

#heart-9 {
  left: 40px;
  top: -250px;
}

#heart-10 {
  left: 20px;
  top: -310px;
}

#heart-11 {
  left: 170px;
  top: -160px;
}

#heart-12 {
  left: 150px;
  top: -170px;
}

#heart-13 {
  left: 270px;
  top: -420px;
}

#heart-14 {
  left: 310px;
  top: -440px;
}

#heart-15 {
  left: 350px;
  top: -440px;
}

#heart-16 {
  left: 390px;
  top: -430px;
}

#heart-17 {
  left: 420px;
  top: -320px;
}

#heart-18 {
  left: 410px;
  top: -260px;
}

#heart-19 {
  left: 370px;
  top: -200px;
}

#heart-20 {
  left: 320px;
  top: -170px;
}

#heart-21 {
  left: 270px;
  top: -150px;
}

#heart-22 {
  left: 240px;
  top: -240px;
}

#heart-23 {
  left: 280px;
  top: -220px;
}

#heart-24 {
  left: 285px;
  top: -260px;
}

#heart-25 {
  left: 310px;
  top: -225px;
}

#heart-26 {
  left: 327px;
  top: -250px;
}

#heart-27 {
  left: 270px;
  top: -184px;
}

#heart-28 {
  left: 270px;
  top: -290px;
}

#heart-29 {
  left: 370px;
  top: -330px;
}

#heart-30 {
  left: 200px;
  top: -310px;
}

#heart-31 {
  left: 210px;
  top: -275px;
}

#heart-32 {
  left: 192px;
  top: -230px;
}

#heart-33 {
  left: 210px;
  top: -333px;
}

#heart-34 {
  left: 290px;
  top: -350px;
}

#heart-35 {
  left: 300px;
  top: -388px;
}

#heart-36 {
  left: 317px;
  top: -317px;
}

#heart-37 {
  left: 370px;
  top: -380px;
}

#heart-38 {
  left: 180px;
  top: -370px;
}

#heart-39 {
  left: 150px;
  top: -312px;
}

#heart-40 {
  left: 120px;
  top: -344px;
}

#heart-41 {
  left: 80px;
  top: -244px;
}

#heart-42 {
  left: 130px;
  top: -222px;
}

#heart-43 {
  left: 120px;
  top: -264px;
}

#heart-44 {
  left: 83px;
  top: -284px;
}

#heart-45 {
  left: 57px;
  top: -344px;
}

#heart-46 {
  left: 94px;
  top: -394px;
}

#heart-47 {
  left: 356px;
  top: -284px;
}

#heart-48 {
  left: 160px;
  top: -274px;
}

#heart-49 {
  left: 111px;
  top: -180px;
}

#purple-heart-0 {
  left: 235px;
  top: -140px;
}

#purple-heart-1 {
  left: 210px;
  top: -380px;
}

#purple-heart-2 {
  left: 40px;
  top: -420px;
}

#purple-heart-3 {
  left: 415px;
  top: -367px;
}

#purple-heart-4 {
  left: 140px;
  top: -400px;
}

#purple-heart-5 {
  left: 113px;
  top: -320px;
}

#purple-heart-6 {
  left: 67px;
  top: -383px;
}

#purple-heart-7 {
  left: 50px;
  top: -320px;
}

#purple-heart-8 {
  left: 110px;
  top: -200px;
}

#purple-heart-9 {
  left: 50px;
  top: -270px;
}

#purple-heart-10 {
  left: 80px;
  top: -340px;
}

#purple-heart-11 {
  left: 200px;
  top: -160px;
}

#purple-heart-12 {
  left: 180px;
  top: -190px;
}

#purple-heart-13 {
  left: 317px;
  top: -410px;
}

#purple-heart-14 {
  left: 260px;
  top: -375px;
}

#purple-heart-15 {
  left: 340px;
  top: -370px;
}

#purple-heart-16 {
  left: 370px;
  top: -410px;
}

#purple-heart-17 {
  left: 380px;
  top: -320px;
}

#purple-heart-18 {
  left: 390px;
  top: -270px;
}

#purple-heart-19 {
  left: 340px;
  top: -200px;
}

#purple-heart-20 {
  left: 290px;
  top: -160px;
}

#purple-heart-21 {
  left: 270px;
  top: -150px;
}

#purple-heart-22 {
  left: 210px;
  top: -220px;
}

#purple-heart-23 {
  left: 310px;
  top: -270px;
}

#purple-heart-24 {
  left: 285px;
  top: -326px;
}

#purple-heart-25 {
  left: 210px;
  top: -215px;
}

#purple-heart-26 {
  left: 147px;
  top: -250px;
}

#purple-heart-27 {
  left: 230px;
  top: -194px;
}

#purple-heart-28 {
  left: 240px;
  top: -290px;
}

#purple-heart-29 {
  left: 330px;
  top: -330px;
}

#purple-heart-30 {
  left: 220px;
  top: -340px;
}

#purple-heart-31 {
  left: 180px;
  top: -275px;
}

#purple-heart-32 {
  left: 162px;
  top: -230px;
}

#purple-heart-33 {
  left: 160px;
  top: -333px;
}

#purple-heart-34 {
  left: 378px;
  top: -350px;
}

#purple-heart-35 {
  left: 310px;
  top: -358px;
}

#purple-heart-36 {
  left: 193px;
  top: -257px;
}

#purple-heart-37 {
  left: 140px;
  top: -360px;
}

#purple-heart-38 {
  left: 170px;
  top: -350px;
}

#purple-heart-39 {
  left: 125px;
  top: -282px;
}

#purple-heart-40 {
  left: 100px;
  top: -364px;
}

#purple-heart-41 {
  left: 70px;
  top: -224px;
}

#purple-heart-42 {
  left: 100px;
  top: -252px;
}

#purple-heart-43 {
  left: 80px;
  top: -304px;
}

#purple-heart-44 {
  left: 163px;
  top: -304px;
}

#purple-heart-45 {
  left: 37px;
  top: -364px;
}

#purple-heart-46 {
  left: 104px;
  top: -414px;
}

#purple-heart-47 {
  left: 346px;
  top: -294px;
}

#purple-heart-48 {
  left: 360px;
  top: -234px;
}

#purple-heart-49 {
  left: 25px;
  top: -334px;
}


#rose-heart-0 {
  left: 235px;
  top: -150px;
}

#rose-heart-1 {
  left: 210px;
  top: -370px;
}

#rose-heart-2 {
  left: 40px;
  top: -410px;
}

#rose-heart-3 {
  left: 415px;
  top: -347px;
}

#rose-heart-4 {
  left: 140px;
  top: -430px;
}

#rose-heart-5 {
  left: 240px;
  top: -350px;
}

#rose-heart-6 {
  left: 67px;
  top: -363px;
}

#rose-heart-7 {
  left: 50px;
  top: -330px;
}

#rose-heart-8 {
  left: 240px;
  top: -230px;
}

#rose-heart-9 {
  left: 50px;
  top: -290px;
}

#rose-heart-10 {
  left: 390px;
  top: -245px;
}

#rose-heart-11 {
  left: 200px;
  top: -170px;
}

#rose-heart-12 {
  left: 160px;
  top: -170px;
}

#rose-heart-13 {
  left: 317px;
  top: -420px;
}

#rose-heart-14 {
  left: 260px;
  top: -395px;
}

#rose-heart-15 {
  left: 340px;
  top: -390px;
}

#rose-heart-16 {
  left: 370px;
  top: -430px;
}

#rose-heart-17 {
  left: 380px;
  top: -360px;
}

#rose-heart-18 {
  left: 390px;
  top: -290px;
}

#rose-heart-19 {
  left: 340px;
  top: -220px;
}

#rose-heart-20 {
  left: 310px;
  top: -190px;
}

#rose-heart-21 {
  left: 270px;
  top: -170px;
}

#rose-heart-22 {
  left: 210px;
  top: -210px;
}

#rose-heart-23 {
  left: 310px;
  top: -250px;
}

#rose-heart-24 {
  left: 285px;
  top: -306px;
}

#rose-heart-25 {
  left: 280px;
  top: -205px;
}

#rose-heart-26 {
  left: 265px;
  top: -245px;
}

#rose-heart-27 {
  left: 230px;
  top: -174px;
}

#rose-heart-28 {
  left: 240px;
  top: -270px;
}

#rose-heart-29 {
  left: 340px;
  top: -310px;
}

#rose-heart-30 {
  left: 220px;
  top: -310px;
}

#rose-heart-31 {
  left: 180px;
  top: -265px;
}

#rose-heart-32 {
  left: 162px;
  top: -210px;
}

#rose-heart-33 {
  left: 260px;
  top: -320px;
}

#rose-heart-34 {
  left: 378px;
  top: -330px;
}

#rose-heart-35 {
  left: 310px;
  top: -328px;
}

#rose-heart-36 {
  left: 193px;
  top: -237px;
}

#rose-heart-37 {
  left: 140px;
  top: -330px;
}

#rose-heart-38 {
  left: 170px;
  top: -330px;
}

#rose-heart-39 {
  left: 125px;
  top: -262px;
}

#rose-heart-40 {
  left: 130px;
  top: -374px;
}

#rose-heart-41 {
  left: 70px;
  top: -254px;
}

#rose-heart-42 {
  left: 100px;
  top: -222px;
}

#rose-heart-43 {
  left: 80px;
  top: -314px;
}

#rose-heart-44 {
  left: 163px;
  top: -324px;
}

#rose-heart-45 {
  left: 17px;
  top: -364px;
}

#rose-heart-46 {
  left: 104px;
  top: -404px;
}

#rose-heart-47 {
  left: 346px;
  top: -274px;
}

#rose-heart-48 {
  left: 360px;
  top: -214px;
}

#rose-heart-49 {
  left: 25px;
  top: -324px;
}

.main {
  width: 100%;
}

.main-menu {
  background-color: #c70063;
}

.main-menu .icon .line {
  background-color: white;
}


.purple-heart {
    position: relative;
    width: 0px;
    height: 0px;
}
.purple-heart:before,
.purple-heart:after {
    position: absolute;
    content: "";
    left: 20px;
    top: 0;
    width: 20px;
    height: 32px;
    background: #c70063;
    -moz-border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
.purple-heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}


.rose-heart {
    position: relative;
    width: 0px;
    height: 0px;
}
.rose-heart:before,
.rose-heart:after {
    position: absolute;
    content: "";
    left: 20px;
    top: 0;
    width: 20px;
    height: 32px;
    background: rgb(250, 150, 100);
    -moz-border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
.rose-heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

.sub-menu .item {
  background-color: #c70063;
  border: 1px solid white;
  color: white;
}

.sub-menu .item:hover {
  background-color: white;
  color: #c70063;
}

.tree {
  float: left;
  height: 650px;
  min-width: 400px;
  width: 50%;
}

.tree .shadow {
  -moz-border-radius: 400px / 100px;
  -webkit-border-radius: 400px / 100px;
  border-radius: 400px / 100px;
  position: relative;
  box-shadow: 70px 500px 100px;
  height: 100px;
  width: 400px;
}

.tree .trank {
  
}

.tree .trunk #trunk-0{ 
  position: relative;
  left: 120px;
  top: 430px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-right: 100px solid black;
  -moz-transform: rotate(-10deg); /* Для Firefox */
    -ms-transform: rotate(-10deg); /* Для IE */
    -webkit-transform: rotate(-10deg); /* Для Safari, Chrome, iOS */
    -o-transform: rotate(-10deg); /* Для Opera */
    transform: rotate(-10deg);
}

.tree .trunk #trunk-1{ 
  position: relative;
  left: 210px;
  top: 400px;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-left: 140px solid black;
  -moz-transform: rotate(10deg); /* Для Firefox */
    -ms-transform: rotate(10deg); /* Для IE */
    -webkit-transform: rotate(10deg); /* Для Safari, Chrome, iOS */
    -o-transform: rotate(10deg); /* Для Opera */
    transform: rotate(10deg);
}

.tree .trunk #trunk-2{ 
  position: relative;
  left: 125px;
  top: 320px;
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-left: 180px solid black;
  -moz-transform: rotate(60deg); /* Для Firefox */
    -ms-transform: rotate(60deg); /* Для IE */
    -webkit-transform: rotate(60deg); /* Для Safari, Chrome, iOS */
    -o-transform: rotate(60deg); /* Для Opera */
    transform: rotate(60deg);
}

.tree .trunk #trunk-3{ 
  position: relative;
  left: 160px;
  top: 185px;
  width: 0;
  height: 0;
  border-top: 180px solid transparent;
  border-right: 50px solid black;
  -moz-transform: rotate(-20deg); /* Для Firefox */
    -ms-transform: rotate(-20deg); /* Для IE */
    -webkit-transform: rotate(-20deg); /* Для Safari, Chrome, iOS */
    -o-transform: rotate(-20deg); /* Для Opera */
    transform: rotate(-20deg);
}

.tree .trunk #trunk-4{ 
  position: relative;
  left: 168px;
  top: -120px;
  width: 0;
  height: 0;
  border-top: 180px solid transparent;
  border-right: 40px solid black;
  -moz-transform: rotate(10deg); /* Для Firefox */
    -ms-transform: rotate(10deg); /* Для IE */
    -webkit-transform: rotate(10deg); /* Для Safari, Chrome, iOS */
    -o-transform: rotate(10deg); /* Для Opera */
    transform: rotate(10deg);
}

.text img {
  width: 100%;
}