html{ 
background: url(../images/birthday_bg.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
      /* Sass Arrays and Mixins */
body {
  font-family: "Poppins", sans-serif;
  line-height: 1.5;
 /* background-color: #f78e1e;*/
  overflow: hidden;
  height: 100vh;
  position: relative;
}

.wrapper {
  display: flex;
  height: 100%;
  min-height: 500px;
  width: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.wrapper .text {
  display: block;
  width: 700px;
  z-index: 200;
}
.wrapper .text h1 {
  margin: 1em 2em 0;
  transform: rotate(1deg);
  background: #fff;
  padding: 1.2em  3em;
  display: inline-block;
}
.wrapper .text h2 {
  transform: rotate(-2deg);
  margin: -1em 6em 1em 3em;
  float: right;
  background: #f78e1e;
  padding: 1em 3em;
  display: inline-block;
}

svg {
  width: 300px;
  height: auto;
  z-index: 199;
}

.balloons {
  height: 100%;
  width: 100%;
  position: absolute;
}

.balloon {
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  display: block;
  height: 100px;
  opacity: 0.8;
  position: absolute;
  width: 80px;
}
.balloon:after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  bottom: -5px;
  content: "";
  height: 0;
  left: 45%;
  position: absolute;
  width: 0;
}

.balloon0 {
  background-color: #f76598;
  left: 47%;
  animation: flyingBalloon 15s -68s linear infinite;
  -webkit-animation: flyingBalloon 15s -68s linear infinite;
  -moz-animation: flyingBalloon 15s -68s linear infinite;
  -ms-animation: flyingBalloon 15s -68s linear infinite;
  -o-animation: flyingBalloon 15s -68s linear infinite;
}
.balloon0:after {
  border-bottom: 10px solid #f76598;
}

.balloon1 {
  background-color: #62b5d8;
  left: 5%;
  animation: flyingBalloon 21s -99s linear infinite;
  -webkit-animation: flyingBalloon 21s -99s linear infinite;
  -moz-animation: flyingBalloon 21s -99s linear infinite;
  -ms-animation: flyingBalloon 21s -99s linear infinite;
  -o-animation: flyingBalloon 21s -99s linear infinite;
}
.balloon1:after {
  border-bottom: 10px solid #62b5d8;
}

.balloon2 {
  background-color: #ead641;
  left: 63%;
  animation: flyingBalloon 8s -68s linear infinite;
  -webkit-animation: flyingBalloon 8s -68s linear infinite;
  -moz-animation: flyingBalloon 8s -68s linear infinite;
  -ms-animation: flyingBalloon 8s -68s linear infinite;
  -o-animation: flyingBalloon 8s -68s linear infinite;
}
.balloon2:after {
  border-bottom: 10px solid #ead641;
}

.balloon3 {
  background-color: #ddd;
  left: 46%;
  animation: flyingBalloon 13s -70s linear infinite;
  -webkit-animation: flyingBalloon 13s -70s linear infinite;
  -moz-animation: flyingBalloon 13s -70s linear infinite;
  -ms-animation: flyingBalloon 13s -70s linear infinite;
  -o-animation: flyingBalloon 13s -70s linear infinite;
}
.balloon3:after {
  border-bottom: 10px solid #ddd;
}

.balloon4 {
  background-color: #f76598;
  left: 1%;
  animation: flyingBalloon 9s -69s linear infinite;
  -webkit-animation: flyingBalloon 9s -69s linear infinite;
  -moz-animation: flyingBalloon 9s -69s linear infinite;
  -ms-animation: flyingBalloon 9s -69s linear infinite;
  -o-animation: flyingBalloon 9s -69s linear infinite;
}
.balloon4:after {
  border-bottom: 10px solid #f76598;
}

.balloon5 {
  background-color: #f76598;
  left: 66%;
  animation: flyingBalloon 9s -65s linear infinite;
  -webkit-animation: flyingBalloon 9s -65s linear infinite;
  -moz-animation: flyingBalloon 9s -65s linear infinite;
  -ms-animation: flyingBalloon 9s -65s linear infinite;
  -o-animation: flyingBalloon 9s -65s linear infinite;
}
.balloon5:after {
  border-bottom: 10px solid #f76598;
}

.balloon6 {
  background-color: #ead641;
  left: 24%;
  animation: flyingBalloon 13s -64s linear infinite;
  -webkit-animation: flyingBalloon 13s -64s linear infinite;
  -moz-animation: flyingBalloon 13s -64s linear infinite;
  -ms-animation: flyingBalloon 13s -64s linear infinite;
  -o-animation: flyingBalloon 13s -64s linear infinite;
}
.balloon6:after {
  border-bottom: 10px solid #ead641;
}

.balloon7 {
  background-color: #ead641;
  left: 31%;
  animation: flyingBalloon 17s -93s linear infinite;
  -webkit-animation: flyingBalloon 17s -93s linear infinite;
  -moz-animation: flyingBalloon 17s -93s linear infinite;
  -ms-animation: flyingBalloon 17s -93s linear infinite;
  -o-animation: flyingBalloon 17s -93s linear infinite;
}
.balloon7:after {
  border-bottom: 10px solid #ead641;
}

.balloon8 {
  background-color: #ead641;
  left: 6%;
  animation: flyingBalloon 11s -64s linear infinite;
  -webkit-animation: flyingBalloon 11s -64s linear infinite;
  -moz-animation: flyingBalloon 11s -64s linear infinite;
  -ms-animation: flyingBalloon 11s -64s linear infinite;
  -o-animation: flyingBalloon 11s -64s linear infinite;
}
.balloon8:after {
  border-bottom: 10px solid #ead641;
}

.balloon9 {
  background-color: #ffffff;
  left: 10%;
  animation: flyingBalloon 8s -72s linear infinite;
  -webkit-animation: flyingBalloon 8s -72s linear infinite;
  -moz-animation: flyingBalloon 8s -72s linear infinite;
  -ms-animation: flyingBalloon 8s -72s linear infinite;
  -o-animation: flyingBalloon 8s -72s linear infinite;
}
.balloon9:after {
  border-bottom: 10px solid #ffffff;
}

.balloon10 {
  background-color: #ead641;
  left: 91%;
  animation: flyingBalloon 10s -57s linear infinite;
  -webkit-animation: flyingBalloon 10s -57s linear infinite;
  -moz-animation: flyingBalloon 10s -57s linear infinite;
  -ms-animation: flyingBalloon 10s -57s linear infinite;
  -o-animation: flyingBalloon 10s -57s linear infinite;
}
.balloon10:after {
  border-bottom: 10px solid #ead641;
}

.balloon11 {
  background-color: #62b5d8;
  left: 23%;
  animation: flyingBalloon 23s -69s linear infinite;
  -webkit-animation: flyingBalloon 23s -69s linear infinite;
  -moz-animation: flyingBalloon 23s -69s linear infinite;
  -ms-animation: flyingBalloon 23s -69s linear infinite;
  -o-animation: flyingBalloon 23s -69s linear infinite;
}
.balloon11:after {
  border-bottom: 10px solid #62b5d8;
}

.balloon12 {
  background-color: #ffffff;
  left: 34%;
  animation: flyingBalloon 11s -85s linear infinite;
  -webkit-animation: flyingBalloon 11s -85s linear infinite;
  -moz-animation: flyingBalloon 11s -85s linear infinite;
  -ms-animation: flyingBalloon 11s -85s linear infinite;
  -o-animation: flyingBalloon 11s -85s linear infinite;
}
.balloon12:after {
  border-bottom: 10px solid #ffffff;
}

.balloon13 {
  background-color: #8BC34A;
  left: 26%;
  animation: flyingBalloon 21s -72s linear infinite;
  -webkit-animation: flyingBalloon 21s -72s linear infinite;
  -moz-animation: flyingBalloon 21s -72s linear infinite;
  -ms-animation: flyingBalloon 21s -72s linear infinite;
  -o-animation: flyingBalloon 21s -72s linear infinite;
}
.balloon13:after {
  border-bottom: 10px solid #8BC34A;
}

.balloon14 {
  background-color: #d981e8;
  left: 86%;
  animation: flyingBalloon 13s -91s linear infinite;
  -webkit-animation: flyingBalloon 13s -91s linear infinite;
  -moz-animation: flyingBalloon 13s -91s linear infinite;
  -ms-animation: flyingBalloon 13s -91s linear infinite;
  -o-animation: flyingBalloon 13s -91s linear infinite;
}
.balloon14:after {
  border-bottom: 10px solid #d981e8;
}

.balloon15 {
  background-color: #8BC34A;
  left: 81%;
  animation: flyingBalloon 10s -58s linear infinite;
  -webkit-animation: flyingBalloon 10s -58s linear infinite;
  -moz-animation: flyingBalloon 10s -58s linear infinite;
  -ms-animation: flyingBalloon 10s -58s linear infinite;
  -o-animation: flyingBalloon 10s -58s linear infinite;
}
.balloon15:after {
  border-bottom: 10px solid #8BC34A;
}

.balloon16 {
  background-color: #eee;
  left: 83%;
  animation: flyingBalloon 13s -75s linear infinite;
  -webkit-animation: flyingBalloon 13s -75s linear infinite;
  -moz-animation: flyingBalloon 13s -75s linear infinite;
  -ms-animation: flyingBalloon 13s -75s linear infinite;
  -o-animation: flyingBalloon 13s -75s linear infinite;
}
.balloon16:after {
  border-bottom: 10px solid #eee;
}

.balloon17 {
  background-color: #ffffff;
  left: 47%;
  animation: flyingBalloon 27s -80s linear infinite;
  -webkit-animation: flyingBalloon 27s -80s linear infinite;
  -moz-animation: flyingBalloon 27s -80s linear infinite;
  -ms-animation: flyingBalloon 27s -80s linear infinite;
  -o-animation: flyingBalloon 27s -80s linear infinite;
}
.balloon17:after {
  border-bottom: 10px solid #ffffff;
}

.balloon18 {
  background-color: #ddd;
  left: 30%;
  animation: flyingBalloon 9s -94s linear infinite;
  -webkit-animation: flyingBalloon 9s -94s linear infinite;
  -moz-animation: flyingBalloon 9s -94s linear infinite;
  -ms-animation: flyingBalloon 9s -94s linear infinite;
  -o-animation: flyingBalloon 9s -94s linear infinite;
}
.balloon18:after {
  border-bottom: 10px solid #ddd;
}

.balloon19 {
  background-color: #ffffff;
  left: 68%;
  animation: flyingBalloon 17s -91s linear infinite;
  -webkit-animation: flyingBalloon 17s -91s linear infinite;
  -moz-animation: flyingBalloon 17s -91s linear infinite;
  -ms-animation: flyingBalloon 17s -91s linear infinite;
  -o-animation: flyingBalloon 17s -91s linear infinite;
}
.balloon19:after {
  border-bottom: 10px solid #ffffff;
}

.balloon20 {
  background-color: #ffffff;
  left: 13%;
  animation: flyingBalloon 9s -88s linear infinite;
  -webkit-animation: flyingBalloon 9s -88s linear infinite;
  -moz-animation: flyingBalloon 9s -88s linear infinite;
  -ms-animation: flyingBalloon 9s -88s linear infinite;
  -o-animation: flyingBalloon 9s -88s linear infinite;
}
.balloon20:after {
  border-bottom: 10px solid #ffffff;
}

.balloon21 {
  background-color: #eee;
  left: 39%;
  animation: flyingBalloon 21s -82s linear infinite;
  -webkit-animation: flyingBalloon 21s -82s linear infinite;
  -moz-animation: flyingBalloon 21s -82s linear infinite;
  -ms-animation: flyingBalloon 21s -82s linear infinite;
  -o-animation: flyingBalloon 21s -82s linear infinite;
}
.balloon21:after {
  border-bottom: 10px solid #eee;
}

.balloon22 {
  background-color: #eee;
  left: 4%;
  animation: flyingBalloon 24s -79s linear infinite;
  -webkit-animation: flyingBalloon 24s -79s linear infinite;
  -moz-animation: flyingBalloon 24s -79s linear infinite;
  -ms-animation: flyingBalloon 24s -79s linear infinite;
  -o-animation: flyingBalloon 24s -79s linear infinite;
}
.balloon22:after {
  border-bottom: 10px solid #eee;
}

.balloon23 {
  background-color: #ffffff;
  left: 19%;
  animation: flyingBalloon 19s -51s linear infinite;
  -webkit-animation: flyingBalloon 19s -51s linear infinite;
  -moz-animation: flyingBalloon 19s -51s linear infinite;
  -ms-animation: flyingBalloon 19s -51s linear infinite;
  -o-animation: flyingBalloon 19s -51s linear infinite;
}
.balloon23:after {
  border-bottom: 10px solid #ffffff;
}

.balloon24 {
  background-color: #ddd;
  left: 50%;
  animation: flyingBalloon 9s -52s linear infinite;
  -webkit-animation: flyingBalloon 9s -52s linear infinite;
  -moz-animation: flyingBalloon 9s -52s linear infinite;
  -ms-animation: flyingBalloon 9s -52s linear infinite;
  -o-animation: flyingBalloon 9s -52s linear infinite;
}
.balloon24:after {
  border-bottom: 10px solid #ddd;
}

.balloon25 {
  background-color: #ffffff;
  left: 60%;
  animation: flyingBalloon 22s -95s linear infinite;
  -webkit-animation: flyingBalloon 22s -95s linear infinite;
  -moz-animation: flyingBalloon 22s -95s linear infinite;
  -ms-animation: flyingBalloon 22s -95s linear infinite;
  -o-animation: flyingBalloon 22s -95s linear infinite;
}
.balloon25:after {
  border-bottom: 10px solid #ffffff;
}

.balloon26 {
  background-color: #eee;
  left: 3%;
  animation: flyingBalloon 17s -92s linear infinite;
  -webkit-animation: flyingBalloon 17s -92s linear infinite;
  -moz-animation: flyingBalloon 17s -92s linear infinite;
  -ms-animation: flyingBalloon 17s -92s linear infinite;
  -o-animation: flyingBalloon 17s -92s linear infinite;
}
.balloon26:after {
  border-bottom: 10px solid #eee;
}

.balloon27 {
  background-color: #eee;
  left: 80%;
  animation: flyingBalloon 14s -68s linear infinite;
  -webkit-animation: flyingBalloon 14s -68s linear infinite;
  -moz-animation: flyingBalloon 14s -68s linear infinite;
  -ms-animation: flyingBalloon 14s -68s linear infinite;
  -o-animation: flyingBalloon 14s -68s linear infinite;
}
.balloon27:after {
  border-bottom: 10px solid #eee;
}

.balloon28 {
  background-color: #eee;
  left: 84%;
  animation: flyingBalloon 8s -72s linear infinite;
  -webkit-animation: flyingBalloon 8s -72s linear infinite;
  -moz-animation: flyingBalloon 8s -72s linear infinite;
  -ms-animation: flyingBalloon 8s -72s linear infinite;
  -o-animation: flyingBalloon 8s -72s linear infinite;
}
.balloon28:after {
  border-bottom: 10px solid #eee;
}

.balloon29 {
  background-color: #eee;
  left: 71%;
  animation: flyingBalloon 16s -88s linear infinite;
  -webkit-animation: flyingBalloon 16s -88s linear infinite;
  -moz-animation: flyingBalloon 16s -88s linear infinite;
  -ms-animation: flyingBalloon 16s -88s linear infinite;
  -o-animation: flyingBalloon 16s -88s linear infinite;
}
.balloon29:after {
  border-bottom: 10px solid #eee;
}

.balloon30 {
  background-color: #ddd;
  left: 50%;
  animation: flyingBalloon 9s -59s linear infinite;
  -webkit-animation: flyingBalloon 9s -59s linear infinite;
  -moz-animation: flyingBalloon 9s -59s linear infinite;
  -ms-animation: flyingBalloon 9s -59s linear infinite;
  -o-animation: flyingBalloon 9s -59s linear infinite;
}
.balloon30:after {
  border-bottom: 10px solid #ddd;
}

.balloon31 {
  background-color: #ddd;
  left: 2%;
  animation: flyingBalloon 14s -72s linear infinite;
  -webkit-animation: flyingBalloon 14s -72s linear infinite;
  -moz-animation: flyingBalloon 14s -72s linear infinite;
  -ms-animation: flyingBalloon 14s -72s linear infinite;
  -o-animation: flyingBalloon 14s -72s linear infinite;
}
.balloon31:after {
  border-bottom: 10px solid #ddd;
}

.balloon32 {
  background-color: #ffffff;
  left: 22%;
  animation: flyingBalloon 27s -53s linear infinite;
  -webkit-animation: flyingBalloon 27s -53s linear infinite;
  -moz-animation: flyingBalloon 27s -53s linear infinite;
  -ms-animation: flyingBalloon 27s -53s linear infinite;
  -o-animation: flyingBalloon 27s -53s linear infinite;
}
.balloon32:after {
  border-bottom: 10px solid #ffffff;
}

.balloon33 {
  background-color: #eee;
  left: 26%;
  animation: flyingBalloon 8s -93s linear infinite;
  -webkit-animation: flyingBalloon 8s -93s linear infinite;
  -moz-animation: flyingBalloon 8s -93s linear infinite;
  -ms-animation: flyingBalloon 8s -93s linear infinite;
  -o-animation: flyingBalloon 8s -93s linear infinite;
}
.balloon33:after {
  border-bottom: 10px solid #eee;
}

.balloon34 {
  background-color: #ddd;
  left: 73%;
  animation: flyingBalloon 12s -70s linear infinite;
  -webkit-animation: flyingBalloon 12s -70s linear infinite;
  -moz-animation: flyingBalloon 12s -70s linear infinite;
  -ms-animation: flyingBalloon 12s -70s linear infinite;
  -o-animation: flyingBalloon 12s -70s linear infinite;
}
.balloon34:after {
  border-bottom: 10px solid #ddd;
}

.balloon35 {
  background-color: #ffffff;
  left: 97%;
  animation: flyingBalloon 24s -73s linear infinite;
  -webkit-animation: flyingBalloon 24s -73s linear infinite;
  -moz-animation: flyingBalloon 24s -73s linear infinite;
  -ms-animation: flyingBalloon 24s -73s linear infinite;
  -o-animation: flyingBalloon 24s -73s linear infinite;
}
.balloon35:after {
  border-bottom: 10px solid #ffffff;
}

.balloon36 {
  background-color: #eee;
  left: 46%;
  animation: flyingBalloon 16s -85s linear infinite;
  -webkit-animation: flyingBalloon 16s -85s linear infinite;
  -moz-animation: flyingBalloon 16s -85s linear infinite;
  -ms-animation: flyingBalloon 16s -85s linear infinite;
  -o-animation: flyingBalloon 16s -85s linear infinite;
}
.balloon36:after {
  border-bottom: 10px solid #eee;
}

.balloon37 {
  background-color: #ffffff;
  left: 91%;
  animation: flyingBalloon 25s -88s linear infinite;
  -webkit-animation: flyingBalloon 25s -88s linear infinite;
  -moz-animation: flyingBalloon 25s -88s linear infinite;
  -ms-animation: flyingBalloon 25s -88s linear infinite;
  -o-animation: flyingBalloon 25s -88s linear infinite;
}
.balloon37:after {
  border-bottom: 10px solid #ffffff;
}

.balloon38 {
  background-color: #ffffff;
  left: 56%;
  animation: flyingBalloon 16s -72s linear infinite;
  -webkit-animation: flyingBalloon 16s -72s linear infinite;
  -moz-animation: flyingBalloon 16s -72s linear infinite;
  -ms-animation: flyingBalloon 16s -72s linear infinite;
  -o-animation: flyingBalloon 16s -72s linear infinite;
}
.balloon38:after {
  border-bottom: 10px solid #ffffff;
}

.balloon39 {
  background-color: #ffffff;
  left: 18%;
  animation: flyingBalloon 26s -67s linear infinite;
  -webkit-animation: flyingBalloon 26s -67s linear infinite;
  -moz-animation: flyingBalloon 26s -67s linear infinite;
  -ms-animation: flyingBalloon 26s -67s linear infinite;
  -o-animation: flyingBalloon 26s -67s linear infinite;
}
.balloon39:after {
  border-bottom: 10px solid #ffffff;
}

@-webkit-keyframes flyingBalloon {
  from {
    bottom: -20%;
  }
  to {
    bottom: 110%;
  }
}
@-moz-keyframes flyingBalloon {
  from {
    bottom: -20%;
  }
  to {
    bottom: 110%;
  }
}
@-ms-keyframes flyingBalloon {
  from {
    bottom: -20%;
  }
  to {
    bottom: 110%;
  }
}
@-o-keyframes flyingBalloon {
  from {
    bottom: -20%;
  }
  to {
    bottom: 110%;
  }
}
@keyframes flyingBalloon {
  from {
    bottom: -20%;
  }
  to {
    bottom: 110%;
  }
}
#smile path:nth-of-type(2) {
  -webkit-animation: wink 3s ease-in-out infinite forwards;
  animation: wink 3s ease-in-out infinite forwards;
  opacity: 1;
}

#smile path:nth-of-type(1) {
  -webkit-animation: wink2 3s ease-in-out infinite forwards;
  animation: wink2 3s ease-in-out infinite forwards;
  opacity: 0;
}

#eye-r path:nth-of-type(1) {
  -webkit-animation: wink 3s ease-in-out infinite forwards;
  animation: wink 3s ease-in-out infinite forwards;
  opacity: 1;
}

#eye-r path:nth-of-type(2) {
  -webkit-animation: wink2 3s ease-in-out infinite forwards;
  animation: wink2 3s ease-in-out infinite forwards;
  opacity: 0;
}

@-webkit-keyframes wink {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes wink {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes wink2 {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes wink2 {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.bday_title{
	    text-align: center;
    color: #e42c6a;
    font-size: 3.5em;
    margin-top: 10%;
   
	font-family: 'Monoton', cursive;
}
.bday_name{ color: #0b74a0; }

#dark_cover {
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: #000;
  position: fixed;
  /* RGBa with 0.6 opacity */
  background: rgba(0, 0, 0, 0.5);
  /* For IE 5.5 - 7*/
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  /* For IE 8*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}