.bg-blue {
  background-color: #0071ba;
  overflow: hidden; }

div.butterfly-anim {
  height: 0;
  width: 100%;
  box-sizing: content-box;
  padding-bottom: 19.369369%;
  position: relative;
  z-index: 0; }
  div.butterfly-anim > * {
    position: absolute; }
  div.butterfly-anim > .static {
    left: 0;
    right: 0;
    top: 7.09090909%;
    bottom: 8.45454545%;
    background: url(../img/anim-static.png) no-repeat center center;
    background-size: contain;
    z-index: 3; }
  div.butterfly-anim > .cloud {
    background: url(../img/cloud.png) no-repeat center center;
    background-size: contain;
    z-index: 1;
    width: 5.367828%;
    height: 18.818182%;
    -webkit-animation: butterflyClouds 80s infinite linear;
            animation: butterflyClouds 80s infinite linear; }
    div.butterfly-anim > .cloud[cloud1], div.butterfly-anim > .cloud[cloud3], div.butterfly-anim > .cloud[cloud4] {
      width: 3.74868%;
      height: 13.090909%; }
    div.butterfly-anim > .cloud[cloud1] {
      left: 12.407603%;
      top: 42.636364%;
      -webkit-animation-duration: 40s;
              animation-duration: 40s; }
    div.butterfly-anim > .cloud[cloud2] {
      left: 34.723689%;
      top: 9.454545%; }
    div.butterfly-anim > .cloud[cloud3] {
      left: 66.525871%;
      top: 17.272727%;
      -webkit-animation-duration: 30s;
              animation-duration: 30s; }
    div.butterfly-anim > .cloud[cloud4] {
      left: 85.885252%;
      top: 11.272727%;
      -webkit-animation-duration: 50s;
              animation-duration: 50s; }
  div.butterfly-anim > .line {
    width: 1%;
    height: 1%;
    background: #fff;
    -webkit-animation: butterflyLines 20s infinite linear;
            animation: butterflyLines 20s infinite linear; }
    div.butterfly-anim > .line[line1] {
      left: 18.936994%;
      top: 59.727273%;
      -webkit-animation-delay: -10.4s;
              animation-delay: -10.4s; }
    div.butterfly-anim > .line[line2] {
      left: 20.5%;
      top: 64%;
      -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
              transform: rotate(45deg);
      -webkit-animation-delay: -10s;
              animation-delay: -10s; }
    div.butterfly-anim > .line[line3] {
      left: 22.1%;
      top: 68%;
      -webkit-transform: rotate(8deg);
          -ms-transform: rotate(8deg);
              transform: rotate(8deg);
      -webkit-animation-delay: -9.6s;
              animation-delay: -9.6s; }
    div.butterfly-anim > .line[line4] {
      left: 29%;
      top: 69%;
      -webkit-transform: rotate(-4deg);
          -ms-transform: rotate(-4deg);
              transform: rotate(-4deg);
      -webkit-animation-delay: -8.4s;
              animation-delay: -8.4s; }
    div.butterfly-anim > .line[line5] {
      left: 31%;
      top: 68%;
      -webkit-transform: rotate(-8deg);
          -ms-transform: rotate(-8deg);
              transform: rotate(-8deg);
      -webkit-animation-delay: -8s;
              animation-delay: -8s; }
    div.butterfly-anim > .line[line6] {
      left: 33%;
      top: 66%;
      -webkit-transform: rotate(-12deg);
          -ms-transform: rotate(-12deg);
              transform: rotate(-12deg);
      -webkit-animation-delay: -7.6s;
              animation-delay: -7.6s; }
    div.butterfly-anim > .line[line7] {
      left: 35%;
      top: 64%;
      -webkit-transform: rotate(-8deg);
          -ms-transform: rotate(-8deg);
              transform: rotate(-8deg);
      -webkit-animation-delay: -7.2s;
              animation-delay: -7.2s; }
    div.butterfly-anim > .line[line8] {
      left: 37%;
      top: 62%;
      -webkit-transform: rotate(-7deg);
          -ms-transform: rotate(-7deg);
              transform: rotate(-7deg);
      -webkit-animation-delay: -6.8s;
              animation-delay: -6.8s; }
    div.butterfly-anim > .line[line9] {
      left: 39%;
      top: 60%;
      -webkit-transform: rotate(-6deg);
          -ms-transform: rotate(-6deg);
              transform: rotate(-6deg);
      -webkit-animation-delay: -6.4s;
              animation-delay: -6.4s; }
    div.butterfly-anim > .line[line10] {
      left: 45%;
      top: 59.5%;
      -webkit-transform: rotate(2deg);
          -ms-transform: rotate(2deg);
              transform: rotate(2deg);
      -webkit-animation-delay: -5.3s;
              animation-delay: -5.3s; }
    div.butterfly-anim > .line[line11] {
      left: 47%;
      top: 61%;
      -webkit-transform: rotate(9deg);
          -ms-transform: rotate(9deg);
              transform: rotate(9deg);
      -webkit-animation-delay: -4.9s;
              animation-delay: -4.9s; }
    div.butterfly-anim > .line[line12] {
      left: 49%;
      top: 63.5%;
      -webkit-transform: rotate(12deg);
          -ms-transform: rotate(12deg);
              transform: rotate(12deg);
      -webkit-animation-delay: -4.5s;
              animation-delay: -4.5s; }
    div.butterfly-anim > .line[line13] {
      left: 51%;
      top: 66.5%;
      -webkit-transform: rotate(16deg);
          -ms-transform: rotate(16deg);
              transform: rotate(16deg);
      -webkit-animation-delay: -4.1s;
              animation-delay: -4.1s; }
    div.butterfly-anim > .line[line14] {
      left: 53%;
      top: 68.5%;
      -webkit-transform: rotate(-2deg);
          -ms-transform: rotate(-2deg);
              transform: rotate(-2deg);
      -webkit-animation-delay: -3.7s;
              animation-delay: -3.7s; }
    div.butterfly-anim > .line[line15] {
      left: 55%;
      top: 66.5%;
      -webkit-transform: rotate(-23deg);
          -ms-transform: rotate(-23deg);
              transform: rotate(-23deg);
      -webkit-animation-delay: -3.3s;
              animation-delay: -3.3s; }
    div.butterfly-anim > .line[line16] {
      left: 62.6%;
      top: 42.6%;
      -webkit-transform: rotate(-23deg);
          -ms-transform: rotate(-23deg);
              transform: rotate(-23deg);
      -webkit-animation-delay: -2s;
              animation-delay: -2s; }
    div.butterfly-anim > .line[line17] {
      left: 64.6%;
      top: 39.6%;
      -webkit-transform: rotate(-10deg);
          -ms-transform: rotate(-10deg);
              transform: rotate(-10deg);
      -webkit-animation-delay: -1.6s;
              animation-delay: -1.6s; }
    div.butterfly-anim > .line[line18] {
      left: 66.6%;
      top: 42%;
      -webkit-transform: rotate(31deg);
          -ms-transform: rotate(31deg);
              transform: rotate(31deg);
      -webkit-animation-delay: -1.2s;
              animation-delay: -1.2s; }
    div.butterfly-anim > .line[line19] {
      left: 68.4%;
      top: 48%;
      -webkit-transform: rotate(31deg);
          -ms-transform: rotate(31deg);
              transform: rotate(31deg);
      -webkit-animation-delay: -0.8s;
              animation-delay: -0.8s; }
    div.butterfly-anim > .line[line20] {
      left: 70.4%;
      top: 52%;
      -webkit-transform: rotate(12deg);
          -ms-transform: rotate(12deg);
              transform: rotate(12deg);
      -webkit-animation-delay: -0.4s;
              animation-delay: -0.4s; }
    div.butterfly-anim > .line[line21] {
      left: 72.4%;
      top: 52%;
      -webkit-transform: rotate(-8deg);
          -ms-transform: rotate(-8deg);
              transform: rotate(-8deg);
      opacity: 0;
      -webkit-animation-delay: -19.8s;
              animation-delay: -19.8s; }
    div.butterfly-anim > .line[line22] {
      left: 74.4%;
      top: 49%;
      -webkit-transform: rotate(-23deg);
          -ms-transform: rotate(-23deg);
              transform: rotate(-23deg);
      opacity: 0;
      -webkit-animation-delay: -19.4s;
              animation-delay: -19.4s; }
    div.butterfly-anim > .line[line23] {
      left: 76.4%;
      top: 46%;
      -webkit-transform: rotate(-6deg);
          -ms-transform: rotate(-6deg);
              transform: rotate(-6deg);
      opacity: 0;
      -webkit-animation-delay: -19s;
              animation-delay: -19s; }
    div.butterfly-anim > .line[line24] {
      left: 78.4%;
      top: 46%;
      -webkit-transform: rotate(6deg);
          -ms-transform: rotate(6deg);
              transform: rotate(6deg);
      opacity: 0;
      -webkit-animation-delay: -18.8s;
              animation-delay: -18.8s; }
  div.butterfly-anim > .butterfly-holder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    -webkit-animation: butterflyMove 20s linear infinite;
            animation: butterflyMove 20s linear infinite;
    z-index: 3; }
    div.butterfly-anim > .butterfly-holder > .butterfly {
      position: absolute;
      background: url(../img/butterfly-hd.png) no-repeat 0 0;
      background-size: 100% auto;
      width: 3.9%;
      height: 20.181818%;
      -webkit-animation: butterflyFlap 0.5s steps(13) infinite, butterflyRotate 20s linear infinite;
              animation: butterflyFlap 0.5s steps(13) infinite, butterflyRotate 20s linear infinite;
      left: 71.189722%;
      top: 39.727273%;
      z-index: 3; }

@-webkit-keyframes butterflyClouds {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  40% {
    opacity: 1; }
  49.9% {
    -webkit-transform: translateX(1000%);
            transform: translateX(1000%);
    opacity: 0; }
  50% {
    opacity: 0;
    -webkit-transform: translate(-1000%);
            transform: translate(-1000%); }
  60% {
    opacity: 1; } }

@keyframes butterflyClouds {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  40% {
    opacity: 1; }
  49.9% {
    -webkit-transform: translateX(1000%);
            transform: translateX(1000%);
    opacity: 0; }
  50% {
    opacity: 0;
    -webkit-transform: translate(-1000%);
            transform: translate(-1000%); }
  60% {
    opacity: 1; } }

@-webkit-keyframes butterflyLines {
  0% {
    opacity: 0; }
  0.001% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes butterflyLines {
  0% {
    opacity: 0; }
  0.001% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-webkit-keyframes butterflyFlap {
  100% {
    background-position: 0 100%; } }

@keyframes butterflyFlap {
  100% {
    background-position: 0 100%; } }

@-webkit-keyframes butterflyMove {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  3% {
    -webkit-transform: translate(3.5%, -5%);
            transform: translate(3.5%, -5%); }
  10.5% {
    -webkit-transform: translate(11.5%, 3%);
            transform: translate(11.5%, 3%); }
  28% {
    -webkit-transform: translate(29.5%, -12%);
            transform: translate(29.5%, -12%);
    opacity: 1; }
  28.01% {
    opacity: 0;
    -webkit-transform: translate(29.5%, -12%);
            transform: translate(29.5%, -12%); }
  28.02% {
    -webkit-transform: translate(-75.5%, -12%);
            transform: translate(-75.5%, -12%); }
  28.03% {
    opacity: 1;
    -webkit-transform: translate(-75.5%, -12%);
            transform: translate(-75.5%, -12%); }
  36% {
    -webkit-transform: translate(-66.5%, 5%);
            transform: translate(-66.5%, 5%); }
  40.5% {
    -webkit-transform: translate(-61.5%, -2%);
            transform: translate(-61.5%, -2%); }
  44% {
    -webkit-transform: translate(-57.5%, 14%);
            transform: translate(-57.5%, 14%); }
  48.5% {
    -webkit-transform: translate(-52.8%, 10%);
            transform: translate(-52.8%, 10%); }
  53% {
    -webkit-transform: translate(-47.8%, 19%);
            transform: translate(-47.8%, 19%); }
  71.5% {
    -webkit-transform: translate(-28.8%, 9%);
            transform: translate(-28.8%, 9%); }
  80% {
    -webkit-transform: translate(-19.5%, 19%);
            transform: translate(-19.5%, 19%); }
  91.5% {
    -webkit-transform: translate(-7.5%, -12%);
            transform: translate(-7.5%, -12%); }
  97.5% {
    -webkit-transform: translate(-1.5%, 2%);
            transform: translate(-1.5%, 2%); } }

@keyframes butterflyMove {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  3% {
    -webkit-transform: translate(3.5%, -5%);
            transform: translate(3.5%, -5%); }
  10.5% {
    -webkit-transform: translate(11.5%, 3%);
            transform: translate(11.5%, 3%); }
  28% {
    -webkit-transform: translate(29.5%, -12%);
            transform: translate(29.5%, -12%);
    opacity: 1; }
  28.01% {
    opacity: 0;
    -webkit-transform: translate(29.5%, -12%);
            transform: translate(29.5%, -12%); }
  28.02% {
    -webkit-transform: translate(-75.5%, -12%);
            transform: translate(-75.5%, -12%); }
  28.03% {
    opacity: 1;
    -webkit-transform: translate(-75.5%, -12%);
            transform: translate(-75.5%, -12%); }
  36% {
    -webkit-transform: translate(-66.5%, 5%);
            transform: translate(-66.5%, 5%); }
  40.5% {
    -webkit-transform: translate(-61.5%, -2%);
            transform: translate(-61.5%, -2%); }
  44% {
    -webkit-transform: translate(-57.5%, 14%);
            transform: translate(-57.5%, 14%); }
  48.5% {
    -webkit-transform: translate(-52.8%, 10%);
            transform: translate(-52.8%, 10%); }
  53% {
    -webkit-transform: translate(-47.8%, 19%);
            transform: translate(-47.8%, 19%); }
  71.5% {
    -webkit-transform: translate(-28.8%, 9%);
            transform: translate(-28.8%, 9%); }
  80% {
    -webkit-transform: translate(-19.5%, 19%);
            transform: translate(-19.5%, 19%); }
  91.5% {
    -webkit-transform: translate(-7.5%, -12%);
            transform: translate(-7.5%, -12%); }
  97.5% {
    -webkit-transform: translate(-1.5%, 2%);
            transform: translate(-1.5%, 2%); } }

@-webkit-keyframes butterflyRotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  3% {
    -webkit-transform: scale(1, 1) rotate(40deg);
            transform: scale(1, 1) rotate(40deg); }
  10.5% {
    -webkit-transform: scale(0.2, 0.5) rotate(10deg);
            transform: scale(0.2, 0.5) rotate(10deg); }
  28% {
    -webkit-transform: scale(0.2, 0.2) rotate(40deg);
            transform: scale(0.2, 0.2) rotate(40deg);
    opacity: 1; }
  28.01% {
    opacity: 0;
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg); }
  28.02% {
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg); }
  28.03% {
    opacity: 1;
    -webkit-transform: scale(0.2, 0.2) rotate(40deg);
            transform: scale(0.2, 0.2) rotate(40deg); }
  36% {
    -webkit-transform: scale(0.2, 0.2) rotate(60deg);
            transform: scale(0.2, 0.2) rotate(60deg); }
  40.5% {
    -webkit-transform: scale(0.4, 0.5) rotate(10deg);
            transform: scale(0.4, 0.5) rotate(10deg); }
  44% {
    -webkit-transform: scale(0.3, 0.5) rotate(40deg);
            transform: scale(0.3, 0.5) rotate(40deg); }
  48.5% {
    -webkit-transform: scale(1, 1) rotate(60deg);
            transform: scale(1, 1) rotate(60deg); }
  53% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); }
  71.5% {
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg); }
  75% {
    -webkit-transform: rotate(75deg);
            transform: rotate(75deg); }
  80% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); }
  91.5% {
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg); }
  94% {
    -webkit-transform: rotate(80deg);
            transform: rotate(80deg); }
  97.5% {
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg); } }

@keyframes butterflyRotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  3% {
    -webkit-transform: scale(1, 1) rotate(40deg);
            transform: scale(1, 1) rotate(40deg); }
  10.5% {
    -webkit-transform: scale(0.2, 0.5) rotate(10deg);
            transform: scale(0.2, 0.5) rotate(10deg); }
  28% {
    -webkit-transform: scale(0.2, 0.2) rotate(40deg);
            transform: scale(0.2, 0.2) rotate(40deg);
    opacity: 1; }
  28.01% {
    opacity: 0;
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg); }
  28.02% {
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg); }
  28.03% {
    opacity: 1;
    -webkit-transform: scale(0.2, 0.2) rotate(40deg);
            transform: scale(0.2, 0.2) rotate(40deg); }
  36% {
    -webkit-transform: scale(0.2, 0.2) rotate(60deg);
            transform: scale(0.2, 0.2) rotate(60deg); }
  40.5% {
    -webkit-transform: scale(0.4, 0.5) rotate(10deg);
            transform: scale(0.4, 0.5) rotate(10deg); }
  44% {
    -webkit-transform: scale(0.3, 0.5) rotate(40deg);
            transform: scale(0.3, 0.5) rotate(40deg); }
  48.5% {
    -webkit-transform: scale(1, 1) rotate(60deg);
            transform: scale(1, 1) rotate(60deg); }
  53% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); }
  71.5% {
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg); }
  75% {
    -webkit-transform: rotate(75deg);
            transform: rotate(75deg); }
  80% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); }
  91.5% {
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg); }
  94% {
    -webkit-transform: rotate(80deg);
            transform: rotate(80deg); }
  97.5% {
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg); } }