html {
  background-color: #d22;
  overflow: hidden;
}

.container {
  overflow: hidden;
  border: 4px solid #e55;
  border-radius: 10px;
  animation: fade 12s linear forwards;
  text-shadow: 2px 2px 4px #422;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -204px;
  margin-left: -624px;
  height: 400px;
  width: 1240px;
  z-index: 1;
}

@keyframes fade {
  0% {
    background-color: #f00;
  }
  100% {
    background-color: #f88;
  }
}
.heart {
  opacity: 0;
  width: 195px;
  height: 180px;
  position: absolute;
  top: 30%;
  left: 43%;
  background-image: url("http://clipartsy.com/Holidays/Valentines_Day/Valentines_Day/heart_67_linkedin_valentine.svg");
  background-size: cover;
  animation: in 3s linear forwards, pulse .3s ease infinite;
  animation-delay: 10s;
  z-index: 16;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}
@keyframes in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: .75;
  }
}
.happy1 {
  font-family: 'Kaushan Script', cursive;
  position: relative;
  top: 165px;
  color: #000;
  animation: scroll 10s linear forwards;
  font-size: 400%;
  z-index: 5;
}

.happy2 {
  font-family: 'Kaushan Script', cursive;
  position: relative;
  top: 0px;
  color: #000;
  animation: scroll 10s linear forwards;
  font-size: 400%;
  z-index: 5;
}

@keyframes scroll {
  0% {
    transform: translateY(400px);
  }
  100% {
    transform: translateY(-70px);
  }
}
.kiss:nth-child(1) {
  animation: s1 4.5s linear forwards infinite;
  animation-delay: -180ms;
  position: absolute;
  left: 900px;
  top: 197px;
  width: 365px;
  height: 277.4px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s1 {
  0% {
    transform: scale(0) rotateZ(4deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(4deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(4deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(4deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(4deg) translateY(0);
  }
}
.kiss:nth-child(2) {
  animation: s2 4.5s linear forwards infinite;
  animation-delay: -360ms;
  position: absolute;
  left: -185px;
  top: 118px;
  width: 280px;
  height: 212.8px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s2 {
  0% {
    transform: scale(0) rotateZ(1deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(1deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(1deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(1deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(1deg) translateY(0);
  }
}
.kiss:nth-child(3) {
  animation: s3 4.5s linear forwards infinite;
  animation-delay: -540ms;
  position: absolute;
  left: 776px;
  top: -63px;
  width: 440px;
  height: 334.4px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s3 {
  0% {
    transform: scale(0) rotateZ(26deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(26deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(26deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(26deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(26deg) translateY(0);
  }
}
.kiss:nth-child(4) {
  animation: s4 4.5s linear forwards infinite;
  animation-delay: -720ms;
  position: absolute;
  left: -54px;
  top: 27px;
  width: 310px;
  height: 235.6px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s4 {
  0% {
    transform: scale(0) rotateZ(25deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(25deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(25deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(25deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(25deg) translateY(0);
  }
}
.kiss:nth-child(5) {
  animation: s5 4.5s linear forwards infinite;
  animation-delay: -900ms;
  position: absolute;
  left: 110px;
  top: 33px;
  width: 275px;
  height: 209px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s5 {
  0% {
    transform: scale(0) rotateZ(26deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(26deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(26deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(26deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(26deg) translateY(0);
  }
}
.kiss:nth-child(6) {
  animation: s6 4.5s linear forwards infinite;
  animation-delay: -1080ms;
  position: absolute;
  left: -165px;
  top: 166px;
  width: 220px;
  height: 167.2px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s6 {
  0% {
    transform: scale(0) rotateZ(27deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(27deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(27deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(27deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(27deg) translateY(0);
  }
}
.kiss:nth-child(7) {
  animation: s7 4.5s linear forwards infinite;
  animation-delay: -1260ms;
  position: absolute;
  left: 1119px;
  top: -42px;
  width: 215px;
  height: 163.4px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s7 {
  0% {
    transform: scale(0) rotateZ(29deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(29deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(29deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(29deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(29deg) translateY(0);
  }
}
.kiss:nth-child(8) {
  animation: s8 4.5s linear forwards infinite;
  animation-delay: -1440ms;
  position: absolute;
  left: -128px;
  top: 25px;
  width: 435px;
  height: 330.6px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s8 {
  0% {
    transform: scale(0) rotateZ(18deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(18deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(18deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(18deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(18deg) translateY(0);
  }
}
.kiss:nth-child(9) {
  animation: s9 4.5s linear forwards infinite;
  animation-delay: -1620ms;
  position: absolute;
  left: -238px;
  top: 49px;
  width: 380px;
  height: 288.8px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s9 {
  0% {
    transform: scale(0) rotateZ(27deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(27deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(27deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(27deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(27deg) translateY(0);
  }
}
.kiss:nth-child(10) {
  animation: s10 4.5s linear forwards infinite;
  animation-delay: -1800ms;
  position: absolute;
  left: 246px;
  top: 96px;
  width: 580px;
  height: 440.8px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s10 {
  0% {
    transform: scale(0) rotateZ(27deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(27deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(27deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(27deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(27deg) translateY(0);
  }
}
.kiss:nth-child(11) {
  animation: s11 4.5s linear forwards infinite;
  animation-delay: -1980ms;
  position: absolute;
  left: 797px;
  top: -76px;
  width: 585px;
  height: 444.6px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s11 {
  0% {
    transform: scale(0) rotateZ(15deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(15deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(15deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(15deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(15deg) translateY(0);
  }
}
.kiss:nth-child(12) {
  animation: s12 4.5s linear forwards infinite;
  animation-delay: -2160ms;
  position: absolute;
  left: 1136px;
  top: -94px;
  width: 470px;
  height: 357.2px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s12 {
  0% {
    transform: scale(0) rotateZ(6deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(6deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(6deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(6deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(6deg) translateY(0);
  }
}
.kiss:nth-child(13) {
  animation: s13 4.5s linear forwards infinite;
  animation-delay: -2340ms;
  position: absolute;
  left: -25px;
  top: -44px;
  width: 445px;
  height: 338.2px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s13 {
  0% {
    transform: scale(0) rotateZ(28deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(28deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(28deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(28deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(28deg) translateY(0);
  }
}
.kiss:nth-child(14) {
  animation: s14 4.5s linear forwards infinite;
  animation-delay: -2520ms;
  position: absolute;
  left: 54px;
  top: 115px;
  width: 255px;
  height: 193.8px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s14 {
  0% {
    transform: scale(0) rotateZ(10deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(10deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(10deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(10deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(10deg) translateY(0);
  }
}
.kiss:nth-child(15) {
  animation: s15 4.5s linear forwards infinite;
  animation-delay: -2700ms;
  position: absolute;
  left: -66px;
  top: -8px;
  width: 595px;
  height: 452.2px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s15 {
  0% {
    transform: scale(0) rotateZ(15deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(15deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(15deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(15deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(15deg) translateY(0);
  }
}
.kiss:nth-child(16) {
  animation: s16 4.5s linear forwards infinite;
  animation-delay: -2880ms;
  position: absolute;
  left: 273px;
  top: 148px;
  width: 515px;
  height: 391.4px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s16 {
  0% {
    transform: scale(0) rotateZ(30deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(30deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(30deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(30deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(30deg) translateY(0);
  }
}
.kiss:nth-child(17) {
  animation: s17 4.5s linear forwards infinite;
  animation-delay: -3060ms;
  position: absolute;
  left: 773px;
  top: 93px;
  width: 395px;
  height: 300.2px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s17 {
  0% {
    transform: scale(0) rotateZ(8deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(8deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(8deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(8deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(8deg) translateY(0);
  }
}
.kiss:nth-child(18) {
  animation: s18 4.5s linear forwards infinite;
  animation-delay: -3240ms;
  position: absolute;
  left: 229px;
  top: 145px;
  width: 375px;
  height: 285px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s18 {
  0% {
    transform: scale(0) rotateZ(3deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(3deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(3deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(3deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(3deg) translateY(0);
  }
}
.kiss:nth-child(19) {
  animation: s19 4.5s linear forwards infinite;
  animation-delay: -3420ms;
  position: absolute;
  left: 181px;
  top: -73px;
  width: 285px;
  height: 216.6px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s19 {
  0% {
    transform: scale(0) rotateZ(4deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(4deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(4deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(4deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(4deg) translateY(0);
  }
}
.kiss:nth-child(20) {
  animation: s20 4.5s linear forwards infinite;
  animation-delay: -3600ms;
  position: absolute;
  left: 1166px;
  top: 31px;
  width: 395px;
  height: 300.2px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s20 {
  0% {
    transform: scale(0) rotateZ(10deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(10deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(10deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(10deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(10deg) translateY(0);
  }
}
.kiss:nth-child(21) {
  animation: s21 4.5s linear forwards infinite;
  animation-delay: -3780ms;
  position: absolute;
  left: 1178px;
  top: -37px;
  width: 405px;
  height: 307.8px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s21 {
  0% {
    transform: scale(0) rotateZ(5deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(5deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(5deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(5deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(5deg) translateY(0);
  }
}
.kiss:nth-child(22) {
  animation: s22 4.5s linear forwards infinite;
  animation-delay: -3960ms;
  position: absolute;
  left: 1080px;
  top: 72px;
  width: 425px;
  height: 323px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s22 {
  0% {
    transform: scale(0) rotateZ(5deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(5deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(5deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(5deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(5deg) translateY(0);
  }
}
.kiss:nth-child(23) {
  animation: s23 4.5s linear forwards infinite;
  animation-delay: -4140ms;
  position: absolute;
  left: 1158px;
  top: 128px;
  width: 370px;
  height: 281.2px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s23 {
  0% {
    transform: scale(0) rotateZ(21deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(21deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(21deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(21deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(21deg) translateY(0);
  }
}
.kiss:nth-child(24) {
  animation: s24 4.5s linear forwards infinite;
  animation-delay: -4320ms;
  position: absolute;
  left: -26px;
  top: 145px;
  width: 335px;
  height: 254.6px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s24 {
  0% {
    transform: scale(0) rotateZ(26deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(26deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(26deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(26deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(26deg) translateY(0);
  }
}
.kiss:nth-child(25) {
  animation: s25 4.5s linear forwards infinite;
  animation-delay: -4500ms;
  position: absolute;
  left: -131px;
  top: 101px;
  width: 375px;
  height: 285px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s25 {
  0% {
    transform: scale(0) rotateZ(7deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(7deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(7deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(7deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(7deg) translateY(0);
  }
}
.kiss:nth-child(26) {
  animation: s26 4.5s linear forwards infinite;
  animation-delay: -4680ms;
  position: absolute;
  left: 983px;
  top: 26px;
  width: 340px;
  height: 258.4px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s26 {
  0% {
    transform: scale(0) rotateZ(15deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(15deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(15deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(15deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(15deg) translateY(0);
  }
}
.kiss:nth-child(27) {
  animation: s27 4.5s linear forwards infinite;
  animation-delay: -4860ms;
  position: absolute;
  left: -194px;
  top: 90px;
  width: 415px;
  height: 315.4px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s27 {
  0% {
    transform: scale(0) rotateZ(28deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(28deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(28deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(28deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(28deg) translateY(0);
  }
}
.kiss:nth-child(28) {
  animation: s28 4.5s linear forwards infinite;
  animation-delay: -5040ms;
  position: absolute;
  left: 184px;
  top: 83px;
  width: 420px;
  height: 319.2px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s28 {
  0% {
    transform: scale(0) rotateZ(18deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(18deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(18deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(18deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(18deg) translateY(0);
  }
}
.kiss:nth-child(29) {
  animation: s29 4.5s linear forwards infinite;
  animation-delay: -5220ms;
  position: absolute;
  left: 369px;
  top: -13px;
  width: 235px;
  height: 178.6px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s29 {
  0% {
    transform: scale(0) rotateZ(23deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(23deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(23deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(23deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(23deg) translateY(0);
  }
}
.kiss:nth-child(30) {
  animation: s30 4.5s linear forwards infinite;
  animation-delay: -5400ms;
  position: absolute;
  left: 410px;
  top: -90px;
  width: 280px;
  height: 212.8px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s30 {
  0% {
    transform: scale(0) rotateZ(24deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(24deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(24deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(24deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(24deg) translateY(0);
  }
}
.kiss:nth-child(31) {
  animation: s31 4.5s linear forwards infinite;
  animation-delay: -5580ms;
  position: absolute;
  left: 973px;
  top: -50px;
  width: 360px;
  height: 273.6px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s31 {
  0% {
    transform: scale(0) rotateZ(1deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(1deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(1deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(1deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(1deg) translateY(0);
  }
}
.kiss:nth-child(32) {
  animation: s32 4.5s linear forwards infinite;
  animation-delay: -5760ms;
  position: absolute;
  left: 371px;
  top: 196px;
  width: 270px;
  height: 205.2px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s32 {
  0% {
    transform: scale(0) rotateZ(12deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(12deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(12deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(12deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(12deg) translateY(0);
  }
}
.kiss:nth-child(33) {
  animation: s33 4.5s linear forwards infinite;
  animation-delay: -5940ms;
  position: absolute;
  left: 1107px;
  top: 47px;
  width: 355px;
  height: 269.8px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s33 {
  0% {
    transform: scale(0) rotateZ(28deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(28deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(28deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(28deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(28deg) translateY(0);
  }
}
.kiss:nth-child(34) {
  animation: s34 4.5s linear forwards infinite;
  animation-delay: -6120ms;
  position: absolute;
  left: 587px;
  top: 54px;
  width: 565px;
  height: 429.4px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s34 {
  0% {
    transform: scale(0) rotateZ(29deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(29deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(29deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(29deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(29deg) translateY(0);
  }
}
.kiss:nth-child(35) {
  animation: s35 4.5s linear forwards infinite;
  animation-delay: -6300ms;
  position: absolute;
  left: 465px;
  top: -20px;
  width: 560px;
  height: 425.6px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s35 {
  0% {
    transform: scale(0) rotateZ(10deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(10deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(10deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(10deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(10deg) translateY(0);
  }
}
.kiss:nth-child(36) {
  animation: s36 4.5s linear forwards infinite;
  animation-delay: -6480ms;
  position: absolute;
  left: 764px;
  top: 17px;
  width: 480px;
  height: 364.8px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s36 {
  0% {
    transform: scale(0) rotateZ(6deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(6deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(6deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(6deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(6deg) translateY(0);
  }
}
.kiss:nth-child(37) {
  animation: s37 4.5s linear forwards infinite;
  animation-delay: -6660ms;
  position: absolute;
  left: 82px;
  top: -180px;
  width: 365px;
  height: 277.4px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s37 {
  0% {
    transform: scale(0) rotateZ(30deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(30deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(30deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(30deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(30deg) translateY(0);
  }
}
.kiss:nth-child(38) {
  animation: s38 4.5s linear forwards infinite;
  animation-delay: -6840ms;
  position: absolute;
  left: 703px;
  top: -127px;
  width: 295px;
  height: 224.2px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s38 {
  0% {
    transform: scale(0) rotateZ(10deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(10deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(10deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(10deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(10deg) translateY(0);
  }
}
.kiss:nth-child(39) {
  animation: s39 4.5s linear forwards infinite;
  animation-delay: -7020ms;
  position: absolute;
  left: 360px;
  top: 5px;
  width: 525px;
  height: 399px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s39 {
  0% {
    transform: scale(0) rotateZ(22deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(22deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(22deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(22deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(22deg) translateY(0);
  }
}
.kiss:nth-child(40) {
  animation: s40 4.5s linear forwards infinite;
  animation-delay: -7200ms;
  position: absolute;
  left: 784px;
  top: 194px;
  width: 340px;
  height: 258.4px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s40 {
  0% {
    transform: scale(0) rotateZ(4deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(4deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(4deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(4deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(4deg) translateY(0);
  }
}
.kiss:nth-child(41) {
  animation: s41 4.5s linear forwards infinite;
  animation-delay: -7380ms;
  position: absolute;
  left: 979px;
  top: -40px;
  width: 465px;
  height: 353.4px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s41 {
  0% {
    transform: scale(0) rotateZ(30deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(30deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(30deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(30deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(30deg) translateY(0);
  }
}
.kiss:nth-child(42) {
  animation: s42 4.5s linear forwards infinite;
  animation-delay: -7560ms;
  position: absolute;
  left: 255px;
  top: 132px;
  width: 565px;
  height: 429.4px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s42 {
  0% {
    transform: scale(0) rotateZ(4deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(4deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(4deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(4deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(4deg) translateY(0);
  }
}
.kiss:nth-child(43) {
  animation: s43 4.5s linear forwards infinite;
  animation-delay: -7740ms;
  position: absolute;
  left: 534px;
  top: -191px;
  width: 240px;
  height: 182.4px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s43 {
  0% {
    transform: scale(0) rotateZ(20deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(20deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(20deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(20deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(20deg) translateY(0);
  }
}
.kiss:nth-child(44) {
  animation: s44 4.5s linear forwards infinite;
  animation-delay: -7920ms;
  position: absolute;
  left: 538px;
  top: -160px;
  width: 350px;
  height: 266px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s44 {
  0% {
    transform: scale(0) rotateZ(3deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(3deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(3deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(3deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(3deg) translateY(0);
  }
}
.kiss:nth-child(45) {
  animation: s45 4.5s linear forwards infinite;
  animation-delay: -8100ms;
  position: absolute;
  left: 666px;
  top: -1px;
  width: 375px;
  height: 285px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s45 {
  0% {
    transform: scale(0) rotateZ(20deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(20deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(20deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(20deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(20deg) translateY(0);
  }
}
.kiss:nth-child(46) {
  animation: s46 4.5s linear forwards infinite;
  animation-delay: -8280ms;
  position: absolute;
  left: 123px;
  top: 198px;
  width: 375px;
  height: 285px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s46 {
  0% {
    transform: scale(0) rotateZ(25deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(25deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(25deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(25deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(25deg) translateY(0);
  }
}
.kiss:nth-child(47) {
  animation: s47 4.5s linear forwards infinite;
  animation-delay: -8460ms;
  position: absolute;
  left: 99px;
  top: 67px;
  width: 510px;
  height: 387.6px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s47 {
  0% {
    transform: scale(0) rotateZ(28deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(28deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(28deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(28deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(28deg) translateY(0);
  }
}
.kiss:nth-child(48) {
  animation: s48 4.5s linear forwards infinite;
  animation-delay: -8640ms;
  position: absolute;
  left: 819px;
  top: -98px;
  width: 450px;
  height: 342px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s48 {
  0% {
    transform: scale(0) rotateZ(7deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(7deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(7deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(7deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(7deg) translateY(0);
  }
}
.kiss:nth-child(49) {
  animation: s49 4.5s linear forwards infinite;
  animation-delay: -8820ms;
  position: absolute;
  left: 979px;
  top: 52px;
  width: 485px;
  height: 368.6px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s49 {
  0% {
    transform: scale(0) rotateZ(20deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(20deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(20deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(20deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(20deg) translateY(0);
  }
}
.kiss:nth-child(50) {
  animation: s50 4.5s linear forwards infinite;
  animation-delay: -9000ms;
  position: absolute;
  left: 14px;
  top: 139px;
  width: 240px;
  height: 182.4px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/lips.svg");
  background-size: cover;
}
@keyframes s50 {
  0% {
    transform: scale(0) rotateZ(18deg) translateY(0);
  }
  7% {
    transform: scale(0.1) rotateZ(18deg) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(0.1) rotateZ(18deg) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(1) rotateZ(18deg) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(18deg) translateY(0);
  }
}
.float {
  position: relative;
  top: -10px;
  left: 30px;
  animation: float 20s linear infinite;
}

@keyframes float {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(-510px);
  }
}
.float1 {
  position: relative;
  top: 50px;
  left: 110px;
  animation: float1 28s linear infinite 4s;
}

@keyframes float1 {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(-510px);
  }
}
.float2 {
  position: relative;
  top: 50px;
  left: 770px;
  animation: float2 24s linear infinite 1s;
}

@keyframes float2 {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(-510px);
  }
}
.float3 {
  position: relative;
  top: 50px;
  left: 850px;
  animation: float3 18s linear infinite 10s;
}

@keyframes float3 {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(-510px);
  }
}