@charset "UTF-8";
/* level color */
/*fv*/
@-webkit-keyframes fv_open {
  0% {
    opacity: .2;
  }
  60% {
    opacity: .2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fv_open {
  0% {
    opacity: .2;
  }
  60% {
    opacity: .2;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes elasticity {
  20% {
    /*transform: scale3d(1.3, 0.7, 1);*/
  }
  40% {
    /*transform: scale3d(0.7, 1.3, 1);*/
  }
  60% {
    /*transform: scale3d(1.1, 0.8, 1);*/
  }
  80% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
    top: 48%;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes elasticity {
  20% {
    /*transform: scale3d(1.3, 0.7, 1);*/
  }
  40% {
    /*transform: scale3d(0.7, 1.3, 1);*/
  }
  60% {
    /*transform: scale3d(1.1, 0.8, 1);*/
  }
  80% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
    top: 48%;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes zoomIn {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes zoomIn {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

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

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

@-webkit-keyframes poyoyon {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  15% {
    -webkit-transform: translate(0, 5px);
            transform: translate(0, 5px);
  }
  30% {
    -webkit-transform: translate(0, 8px);
            transform: translate(0, 8px);
  }
  50% {
    -webkit-transform: translate(0, -8px);
            transform: translate(0, -8px);
  }
  70% {
    -webkit-transform: translate(0, 5px);
            transform: translate(0, 5px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@keyframes poyoyon {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  15% {
    -webkit-transform: translate(0, 5px);
            transform: translate(0, 5px);
  }
  30% {
    -webkit-transform: translate(0, 8px);
            transform: translate(0, 8px);
  }
  50% {
    -webkit-transform: translate(0, -8px);
            transform: translate(0, -8px);
  }
  70% {
    -webkit-transform: translate(0, 5px);
            transform: translate(0, 5px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

/*背景色変更*/
@-webkit-keyframes BackgroundAnimation {
  0% {
    background-position: 19% 0%;
  }
  50% {
    background-position: 82% 100%;
  }
  100% {
    background-position: 19% 0%;
  }
}

@keyframes BackgroundAnimation {
  0% {
    background-position: 19% 0%;
  }
  50% {
    background-position: 82% 100%;
  }
  100% {
    background-position: 19% 0%;
  }
}

/*お試しの吹き出し*/
@-webkit-keyframes jump_otameshi {
  to {
    -webkit-transform: transtateY(0);
            transform: transtateY(0);
  }
  from {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
}
@keyframes jump_otameshi {
  to {
    -webkit-transform: transtateY(0);
            transform: transtateY(0);
  }
  from {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
}

@keyframes zoomIn {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}

@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}

@-webkit-keyframes fuwafuwa-r {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  33.33333% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  66.66667% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}

@keyframes fuwafuwa-r {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  33.33333% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  66.66667% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}

@-webkit-keyframes fuwafuwa-l {
  0% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  33.33333% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  66.66667% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fuwafuwa-l {
  0% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  33.33333% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  66.66667% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes horizontal1 {
  0% {
    -webkit-transform: translateX(-3px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}

@keyframes horizontal1 {
  0% {
    -webkit-transform: translateX(-3px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}

@-webkit-keyframes horizontal2 {
  0% {
    -webkit-transform: translateX(3px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}

@keyframes horizontal2 {
  0% {
    -webkit-transform: translateX(3px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}

@-webkit-keyframes vertical {
  0% {
    -webkit-transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0px);
  }
}

@keyframes vertical {
  0% {
    -webkit-transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0px);
  }
}

@-webkit-keyframes hurueru {
  0% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg);
  }
  25% {
    -webkit-transform: translate(2px, 2px) rotateZ(1deg);
            transform: translate(2px, 2px) rotateZ(1deg);
  }
  50% {
    -webkit-transform: translate(0px, 2px) rotateZ(0deg);
            transform: translate(0px, 2px) rotateZ(0deg);
  }
  75% {
    -webkit-transform: translate(2px, 0px) rotateZ(-1deg);
            transform: translate(2px, 0px) rotateZ(-1deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg);
  }
}

@keyframes hurueru {
  0% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg);
  }
  25% {
    -webkit-transform: translate(2px, 2px) rotateZ(1deg);
            transform: translate(2px, 2px) rotateZ(1deg);
  }
  50% {
    -webkit-transform: translate(0px, 2px) rotateZ(0deg);
            transform: translate(0px, 2px) rotateZ(0deg);
  }
  75% {
    -webkit-transform: translate(2px, 0px) rotateZ(-1deg);
            transform: translate(2px, 0px) rotateZ(-1deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg);
  }
}

@-webkit-keyframes jump {
  20% {
    -webkit-transform: translateY(2%) scaleY(0.9);
            transform: translateY(2%) scaleY(0.9);
  }
  40% {
    -webkit-transform: translateY(-100%) scaleY(1.2);
            transform: translateY(-100%) scaleY(1.2);
  }
  50% {
    -webkit-transform: translateY(10%) scaleY(0.8);
            transform: translateY(10%) scaleY(0.8);
  }
  70% {
    -webkit-transform: translateY(-5%) scaleY(1);
            transform: translateY(-5%) scaleY(1);
  }
  80%, 100% {
    -webkit-transform: translateY(0) scaleY(1);
            transform: translateY(0) scaleY(1);
  }
}

@keyframes jump {
  20% {
    -webkit-transform: translateY(2%) scaleY(0.9);
            transform: translateY(2%) scaleY(0.9);
  }
  40% {
    -webkit-transform: translateY(-100%) scaleY(1.2);
            transform: translateY(-100%) scaleY(1.2);
  }
  50% {
    -webkit-transform: translateY(10%) scaleY(0.8);
            transform: translateY(10%) scaleY(0.8);
  }
  70% {
    -webkit-transform: translateY(-5%) scaleY(1);
            transform: translateY(-5%) scaleY(1);
  }
  80%, 100% {
    -webkit-transform: translateY(0) scaleY(1);
            transform: translateY(0) scaleY(1);
  }
}

@-webkit-keyframes bubble-l {
  0% {
    bottom: 0px;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
    opacity: .5;
  }
  50% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(80px);
            transform: translateX(80px);
    opacity: 1;
  }
  100% {
    bottom: 200px;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes bubble-l {
  0% {
    bottom: 0px;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
    opacity: .5;
  }
  50% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(80px);
            transform: translateX(80px);
    opacity: 1;
  }
  100% {
    bottom: 200px;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes bubble-r {
  0% {
    bottom: 0px;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
    opacity: .5;
  }
  50% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
    opacity: 1;
  }
  100% {
    bottom: 200px;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes bubble-r {
  0% {
    bottom: 0px;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
    opacity: .5;
  }
  50% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
    opacity: 1;
  }
  100% {
    bottom: 200px;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes bubble-pl {
  0% {
    bottom: 0px;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
    opacity: .5;
  }
  50% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(80px);
            transform: translateX(80px);
    opacity: 1;
  }
  100% {
    bottom: 300px;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes bubble-pl {
  0% {
    bottom: 0px;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
    opacity: .5;
  }
  50% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(80px);
            transform: translateX(80px);
    opacity: 1;
  }
  100% {
    bottom: 300px;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes bubble-pr {
  0% {
    bottom: 0px;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
    opacity: .5;
  }
  50% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
    opacity: 1;
  }
  100% {
    bottom: 300px;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes bubble-pr {
  0% {
    bottom: 0px;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
    opacity: .5;
  }
  50% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
    opacity: 1;
  }
  100% {
    bottom: 300px;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
}

@media screen and (min-width: 767px) {
  html {
    font-size: 130%;
  }
}

body {
  background: linear-gradient(104deg, #f6b7aa, #ffe3ef);
  background-size: 400% 400%;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  -webkit-animation: BackgroundAnimation 40s ease infinite;
  animation: BackgroundAnimation 40s ease infinite;
  font-size: 1.4rem;
  overflow-x: hidden;
}

.uhs_contents {
  min-height: 100vh !important;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2) !important;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.2) !important;
}

.info_box__contents {
  padding-top: 8vh;
}

* {
  -webkit-tap-highlight-color: transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*:focus {
  outline: none;
}

a {
  text-decoration: none;
}

header, .header {
  max-width: 768px;
  min-width: 320px;
  width: 100%;
  height: 8vh;
  min-height: 40px;
  padding: 1vh 0;
  position: fixed !important;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  text-align: center;
  z-index: 1000;
  background-color: white;
  border-bottom: 1px solid #000;
}

header h1, .header h1 {
  height: 90%;
}

header h1 img, .header h1 img {
  height: 90%;
  width: auto;
}

header .header__btn, .header .header__btn {
  position: absolute;
  right: 2px;
  top: 2px;
  height: 7.5vh;
  min-height: 40px;
}

header .header__btn img, .header .header__btn img {
  height: 100%;
}

.main_wrapper {
  padding-top: 8vh;
}

.main_wrapper .home_fv {
  background-image: url(../image/site/fv__back.png);
  background-size: 5%;
  position: relative;
}

.main_wrapper .home_fv__catch {
  width: 100%;
}

.main_wrapper .home_fv__img {
  width: 71%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  z-index: 3;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-name: fv_open;
          animation-name: fv_open;
}

.main_wrapper .home_fv__img--title {
  -webkit-animation: elasticity 3s ease 1 forwards;
          animation: elasticity 3s ease 1 forwards;
  z-index: 4;
  width: 70%;
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  margin: auto;
}

.main_wrapper .home_fv__btn {
  width: 100%;
  margin: 2rem auto;
  line-height: 0;
}

.main_wrapper .home_fv img {
  width: 100%;
}

.main_wrapper .home_ans {
  position: relative;
}

.main_wrapper .home_ans img {
  width: 100%;
}

.main_wrapper .home_ans__deco {
  position: absolute;
  top: 0;
}

.main_wrapper .home_ans__deco--1.isActive {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.main_wrapper .home_ans__deco--2.isActive {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.main_wrapper .home_ans__deco--3.isActive {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.main_wrapper .home_ans__deco--4.isActive {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.main_wrapper .home_ans__deco--5.isActive {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.main_wrapper .home_ans__deco--6.isActive {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.main_wrapper .home_ans__deco--7.isActive {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.main_wrapper .home_ans__deco--8.isActive {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.main_wrapper .home_ans__deco--9.isActive {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.main_wrapper .home_ans__deco--10.isActive {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.main_wrapper .home_ans__deco--11.isActive {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}

.main_wrapper .home_ans__img {
  position: relative;
}

.main_wrapper .home_ans__img--ans {
  position: absolute;
  top: 0;
  -webkit-animation: machigaiAns 2s step-end infinite;
          animation: machigaiAns 2s step-end infinite;
}

.main_wrapper .home_ans #home_ans--canvas {
  width: 100%;
  position: absolute;
  height: 28vh;
  z-index: 80;
}

.main_wrapper .home_illust {
  position: relative;
}

.main_wrapper .home_illust__det {
  position: absolute;
  top: 0;
  opacity: 0;
}

.main_wrapper .home_illust__det--illust1.isActive {
  -webkit-animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
          animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.main_wrapper .home_illust__det--illust2.isActive {
  -webkit-animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
          animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.main_wrapper .home_illust__det--illust3.isActive {
  -webkit-animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
          animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.main_wrapper .home_illust__det--illust4.isActive {
  -webkit-animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
          animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.main_wrapper .home_illust__det--illust5.isActive {
  -webkit-animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
          animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

.main_wrapper .home_closing {
  background-image: url(../image/site/fv__back.png);
  background-size: 5%;
  position: relative;
  z-index: 1;
  top: -4rem;
  padding-top: 3rem;
}

.main_wrapper .home__title03 {
  z-index: 3;
  position: relative;
}

.main_wrapper .home__title03--deco {
  position: absolute;
  bottom: 0;
}

.main_wrapper .home__title03--deco.isActive {
  -webkit-animation: poyopoyo 2s ease-out 1;
          animation: poyopoyo 2s ease-out 1;
  opacity: 1;
}

.home__ftbtn {
  position: fixed;
  z-index: 100;
  bottom: 0;
  width: 100%;
  max-width: 768px;
  background-color: #E784B0;
  display: none;
  padding: .3rem 0;
}

.home__ftbtn img {
  width: 100%;
}

.home_wrapper img, .login_wrapper img {
  width: 100%;
}

.level-wrapper {
  padding-top: 1rem;
  padding-bottom: 3rem;
}

.level-wrapper img {
  width: 100%;
}

.level-wrapper--id1 {
  background-color: #FFF5F5;
}

.level-wrapper--id2 {
  background-color: #FFFCF2;
}

.level-wrapper--id3 {
  background-color: #F5FBFC;
}

.level-wrapper--id4 {
  background-color: #F5FBFF;
}

.level-wrapper .start-question {
  display: block;
  margin-bottom: 2rem;
}

.level-wrapper__status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 2rem;
}

.level-wrapper__status li {
  position: relative;
  width: 41%;
  margin: 0 1%;
}

.level-wrapper__status li p {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
  font-weight: bold;
  font-size: 4.5rem;
}

.level-wrapper__status li p span {
  font-size: 2rem;
}

.levelall-wrapper {
  padding: 3rem 0;
  position: relative;
}

.levelall-wrapper img {
  width: 100%;
}

.levelall-wrapper > p, .levelall-wrapper > a {
  z-index: 8;
  position: relative;
}

.levelall-wrapper .allclear__btn {
  margin-bottom: 1rem;
}

.levelall-wrapper--id1 {
  background-color: #FFF5F5;
}

.levelall-wrapper--id2 {
  background-color: #FFFCF2;
}

.levelall-wrapper--id3 {
  background-color: #F5FBFC;
}

.levelall-wrapper--id4 {
  background-color: #F5FBFF;
}

.login__back {
  background-image: url(../image/site/login__fvback.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  background-color: #fff;
}

.login__deco {
  position: absolute;
  top: 0;
}

.login__deco--item1 {
  -webkit-animation: fuwafuwa-l 3s infinite ease-in-out .8s alternate;
          animation: fuwafuwa-l 3s infinite ease-in-out .8s alternate;
}

.login__deco--item2 {
  -webkit-animation: fuwafuwa-r 3s infinite ease-in-out .8s alternate;
          animation: fuwafuwa-r 3s infinite ease-in-out .8s alternate;
}

.login__deco--item3 {
  -webkit-animation: fuwafuwa-l 3s infinite ease-in-out .8s alternate;
          animation: fuwafuwa-l 3s infinite ease-in-out .8s alternate;
}

.login__deco--item4 {
  -webkit-animation: fuwafuwa-r 3s infinite ease-in-out .8s alternate;
          animation: fuwafuwa-r 3s infinite ease-in-out .8s alternate;
}

.login__deco--item5 {
  -webkit-animation: fuwafuwa-l 3s infinite ease-in-out .8s alternate;
          animation: fuwafuwa-l 3s infinite ease-in-out .8s alternate;
}

.login__deco--item6 {
  -webkit-animation: fuwafuwa-r 3s infinite ease-in-out .8s alternate;
          animation: fuwafuwa-r 3s infinite ease-in-out .8s alternate;
}

.login__deco--item7 {
  -webkit-animation: fuwafuwa-l 3s infinite ease-in-out .8s alternate;
          animation: fuwafuwa-l 3s infinite ease-in-out .8s alternate;
}

.login__deco--item8 {
  -webkit-animation: fuwafuwa-r 3s infinite ease-in-out .8s alternate;
          animation: fuwafuwa-r 3s infinite ease-in-out .8s alternate;
}

.login__deco--item9 {
  -webkit-animation: fuwafuwa-l 3s infinite ease-in-out .8s alternate;
          animation: fuwafuwa-l 3s infinite ease-in-out .8s alternate;
}

.login__deco--item10 {
  -webkit-animation: fuwafuwa-r 3s infinite ease-in-out .8s alternate;
          animation: fuwafuwa-r 3s infinite ease-in-out .8s alternate;
}

.login__deco--item11 {
  -webkit-animation: fuwafuwa-l 3s infinite ease-in-out .8s alternate;
          animation: fuwafuwa-l 3s infinite ease-in-out .8s alternate;
}

.login__deco--item12 {
  -webkit-animation: fuwafuwa-r 3s infinite ease-in-out .8s alternate;
          animation: fuwafuwa-r 3s infinite ease-in-out .8s alternate;
}

.login__deco--item13 {
  -webkit-animation: fuwafuwa-l 3s infinite ease-in-out .8s alternate;
          animation: fuwafuwa-l 3s infinite ease-in-out .8s alternate;
}

.login__levelwrapper {
  position: relative;
}

.login__levelwrapper--deco {
  position: absolute;
  top: 0;
}

.login__levelwrapper--deco1 {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.login__levelwrapper--deco2 {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.login__levelwrapper--deco3 {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.login__levelwrapper--deco4 {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.login__levelwrapper--deco5 {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.login__levelwrapper--deco6 {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.login__levelwrapper--deco7 {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.login__levelwrapper--deco8 {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.login__levelwrapper--deco9 {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.login__levelwrapper--deco10 {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.login__levelwrapper--deco11 {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}

.login__levelwrapper--deco12 {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.login__levelwrapper--deco13 {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}

.login__levelwrapper--deco14 {
  -webkit-animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
          animation: poyoyon 2s cubic-bezier(0.25, 1, 0.5, 1) infinite forwards;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

.login__level {
  position: relative;
}

.login__level--point {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
  font-weight: bold;
  font-size: 5rem;
}

.login__level--point > p {
  display: inline-block;
}

.login__level--point > span {
  font-size: 2rem;
}

.login__rate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 2rem;
}

.login__rate li {
  position: relative;
  width: 41%;
  margin: 0 1%;
}

.login__ansrate, .login__levelrate {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
  font-weight: bold;
  font-size: 3rem;
}

.login__ansrate span, .login__levelrate span {
  font-size: 1.5rem;
}

.login__today, .login__notclear {
  margin-bottom: 3rem;
}

.login__today--img, .login__notclear--img {
  width: 95%;
  display: block;
  border: 5px solid #fff;
  margin: 0 auto;
  -webkit-box-shadow: 0 0 8px #cacaca;
          box-shadow: 0 0 8px #cacaca;
  position: relative;
}

.login__today--img a > img, .login__notclear--img a > img {
  opacity: .5;
}

.login__today--startbtn, .login__notclear--startbtn {
  position: absolute;
  width: 33%;
  top: 40%;
  left: 37%;
  -webkit-animation: poyopoyo 3s ease-out infinite;
          animation: poyopoyo 3s ease-out infinite;
}

.login__today--clear, .login__notclear--clear {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
}

.login__today #login__today--canvas, .login__notclear #login__today--canvas {
  width: 100%;
  position: absolute;
  height: 28vh;
  z-index: 60;
}

.login__today--restartbtn, .login__notclear--restartbtn {
  position: absolute;
  width: 40%;
  top: 70%;
  left: 33%;
  -webkit-animation: poyopoyo 3s ease-out infinite;
          animation: poyopoyo 3s ease-out infinite;
}

.level_banner > * {
  position: relative;
}

.level_banner a {
  position: relative;
  display: block;
}

.level_banner__rate {
  position: absolute;
  top: 0;
  font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
  font-weight: bold;
  text-align: center;
  font-size: 1.5rem;
}

.level_banner__rate--id1 {
  color: #ED9786;
}

.level_banner__rate--id2 {
  color: #F7D66F;
}

.level_banner__rate--id3 {
  color: #8AC0C4;
}

.level_banner__rate--id4 {
  color: #96C8F0;
}

.timeout_wrapper {
  background-color: #E4E6EA;
  padding-bottom: 3rem;
}

.timeout_wrapper img {
  width: 100%;
}

.timeout_wrapper__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  top: -1rem;
  width: 94%;
  margin: 0 auto;
}

.timeout_wrapper__btn li {
  position: relative;
  width: 48%;
  margin: 0 1%;
}

.answer-wrapper {
  padding-bottom: 3rem;
}

.answer-wrapper img {
  width: 100%;
}

.answer-wrapper a {
  display: block;
  margin-bottom: 1rem;
}

.answer-wrapper--id {
  padding-bottom: 3rem;
  padding-top: 2rem;
}

.answer-wrapper--id1 {
  background-color: #FFF5F5;
}

.answer-wrapper--id2 {
  background-color: #FFFCF2;
}

.answer-wrapper--id3 {
  background-color: #F5FBFC;
}

.answer-wrapper--id4 {
  background-color: #F5FBFF;
}

.answer-back {
  background-image: url(../image/site/anser_back.png);
  background-repeat: no-repeat;
  background-size: contain;
}

body.fixed {
  position: fixed;
  left: 0;
  width: 100%;
}

.modal {
  display: none;
  /* 初期状態 */
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  /* モーダルは画面いっぱいに */
  height: 100vh;
  /* モーダルは画面いっぱいに */
  z-index: 99;
}

.modal__overlay {
  width: 100%;
  /* 黒背景も画面いっぱいに */
  height: 100vh;
  /* 黒背景も画面いっぱいに */
  background-color: rgba(231, 132, 176, 0.95);
}

.modal__menu {
  position: absolute;
  background-color: transparent;
  top: 0%;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  width: 100%;
  max-width: 768px;
  min-width: 320px;
  height: auto;
}

.modal .header {
  background-color: transparent !important;
}

.modal__menuwrapper {
  margin-top: 1.5rem;
  padding: 8vh 3rem 0 3rem;
  height: 80vh;
  overflow: auto;
  text-align: right;
}

.modal .menulist__img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin-bottom: 1rem;
}

.modal .menulist__img div {
  width: 48%;
  margin-bottom: 1rem;
}

.modal .menulist__img img {
  width: 100%;
}

.modal .menulist__text {
  margin-bottom: 1rem;
}

.modal .menulist__text a {
  text-decoration: none;
  color: #ffffff;
}

.modal .menulist__text a:after {
  content: "\f101";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: .5rem;
}

.copyright {
  margin: 0 auto;
}

.modal_clear {
  display: none;
  /* 初期状態 */
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  /* モーダルは画面いっぱいに */
  height: 100vh;
  /* モーダルは画面いっぱいに */
  z-index: 1000;
}

.modal_clear__overlay {
  width: 100%;
  /* 黒背景も画面いっぱいに */
  height: 100vh;
  /* 黒背景も画面いっぱいに */
}

.modal_clear__overlay--id1 {
  background-color: rgba(255, 245, 245, 0.95);
}

.modal_clear__overlay--id2 {
  background-color: rgba(255, 252, 242, 0.95);
}

.modal_clear__overlay--id3 {
  background-color: rgba(245, 251, 252, 0.95);
}

.modal_clear__overlay--id4 {
  background-color: rgba(245, 251, 255, 0.95);
}

.modal_clear__contents {
  position: absolute;
  background-color: transparent;
  top: 0%;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  width: 100%;
  max-width: 768px;
  min-width: 320px;
  height: auto;
  padding: 8vh 3rem 0 3rem;
}

.modal_clear__contents > div {
  position: relative;
}

.modal_clear__contents .all-clear {
  position: relative;
  z-index: 9;
}

.modal_clear__btn {
  position: absolute;
  right: 2px;
  top: 2px;
  height: 7.5vh;
  z-index: 100;
}

.modal_clear__btn img {
  height: 100%;
  width: auto !important;
}

.allclear__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  width: 94%;
  margin: -1.5rem auto 0 auto;
  z-index: 10;
}

.allclear__btn li {
  position: relative;
  width: 48%;
  margin: 0 1%;
}

.allclear__longbtn {
  margin: -1.5rem auto 0 auto;
  z-index: 10;
  position: relative;
}

.allclear__btnbtn {
  z-index: 10;
  position: relative;
}

.jump {
  -webkit-animation: 0.5s jump_otameshi infinite alternate linear;
          animation: 0.5s jump_otameshi infinite alternate linear;
}

.top_otameshi {
  position: relative;
  display: block;
  padding: 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  background: #f7d66f;
  border-radius: .5rem;
  color: #ffffff;
  width: 90%;
  margin: 1rem auto 3rem auto;
  text-align: center;
  text-decoration: none;
}

.top_otameshi:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #f7d66f;
}

.top_otameshi_bt {
  position: relative;
  display: block;
  padding: 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  text-decoration: none;
  background: #f7d66f;
  border-radius: .5rem;
  color: #ffffff;
  width: 90%;
  margin: 1rem auto 3rem auto;
  text-align: center;
}

.top_otameshi_bt:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #f7d66f;
}

.top_otameshi h5 {
  font-size: 2rem;
  margin-bottom: .5rem;
  font-weight: bold;
}

.top_otameshi h6 {
  font-size: 1.4rem;
  margin-bottom: .5rem;
  line-height: 1.5;
}

h6.otameshi {
  padding: 1rem;
  text-align: center;
  background-color: #efecea;
  margin-bottom: 2rem;
  line-height: 1.5;
}

.headline--jump .char {
  --name: jump;
  --dur: 2s;
  --del: calc(var(--char-index) * 0.075s);
  --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
}

.word, .char {
  -webkit-animation-delay: var(--del);
          animation-delay: var(--del);
  -webkit-animation-direction: var(--dir, normal);
          animation-direction: var(--dir, normal);
  -webkit-animation-duration: var(--dur);
          animation-duration: var(--dur);
  -webkit-animation-iteration-count: var(--it, 1);
          animation-iteration-count: var(--it, 1);
  -webkit-animation-name: var(--name);
          animation-name: var(--name);
  -webkit-animation-timing-function: var(--tf);
          animation-timing-function: var(--tf);
  -webkit-animation-fill-mode: var(--fill, forwards);
          animation-fill-mode: var(--fill, forwards);
  display: inline-block;
  position: relative;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  z-index: 1;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
}

.bubble:nth-child(odd) {
  -webkit-animation: bubble-r 10s ease-in infinite;
          animation: bubble-r 10s ease-in infinite;
}

.bubble:nth-child(even) {
  -webkit-animation: bubble-l 10s ease-in infinite;
          animation: bubble-l 10s ease-in infinite;
}

.bubble:nth-child(1) {
  left: 24%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 15px;
  height: 15px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(2) {
  left: 45%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 12px;
  height: 12px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(3) {
  left: 76%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 11px;
  height: 11px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(4) {
  left: 66%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 20px;
  height: 20px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(5) {
  left: 26%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 9px;
  height: 9px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(6) {
  left: 64%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 6px;
  height: 6px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(7) {
  left: 28%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 11px;
  height: 11px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(8) {
  left: 68%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 4px;
  height: 4px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(9) {
  left: 58%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 8px;
  height: 8px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(10) {
  left: 28%;
  -webkit-animation-duration: 7.2s;
          animation-duration: 7.2s;
  width: 1px;
  height: 1px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(11) {
  left: 55%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 12px;
  height: 12px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(12) {
  left: 31%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 13px;
  height: 13px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(13) {
  left: 3%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 14px;
  height: 14px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(14) {
  left: 53%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 8px;
  height: 8px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(15) {
  left: 10%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 14px;
  height: 14px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(16) {
  left: 15%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 17px;
  height: 17px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(17) {
  left: 47%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 5px;
  height: 5px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(18) {
  left: 29%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 6px;
  height: 6px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(19) {
  left: 69%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 16px;
  height: 16px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(20) {
  left: 65%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 4px;
  height: 4px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(21) {
  left: 18%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 12px;
  height: 12px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(22) {
  left: 6%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 20px;
  height: 20px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(23) {
  left: 72%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 4px;
  height: 4px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(24) {
  left: 10%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 9px;
  height: 9px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(25) {
  left: 49%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 1px;
  height: 1px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(26) {
  left: 45%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 19px;
  height: 19px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(27) {
  left: 41%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 5px;
  height: 5px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(28) {
  left: 49%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 5px;
  height: 5px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(29) {
  left: 72%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 3px;
  height: 3px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(30) {
  left: 78%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 14px;
  height: 14px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(31) {
  left: 41%;
  -webkit-animation-duration: 7.2s;
          animation-duration: 7.2s;
  width: 6px;
  height: 6px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(32) {
  left: 3%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 19px;
  height: 19px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(33) {
  left: 80%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 8px;
  height: 8px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(34) {
  left: 68%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 13px;
  height: 13px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(35) {
  left: 74%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 7px;
  height: 7px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(36) {
  left: 25%;
  -webkit-animation-duration: 4.8s;
          animation-duration: 4.8s;
  width: 10px;
  height: 10px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(37) {
  left: 55%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 16px;
  height: 16px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(38) {
  left: 67%;
  -webkit-animation-duration: 7.2s;
          animation-duration: 7.2s;
  width: 9px;
  height: 9px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(39) {
  left: 41%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 8px;
  height: 8px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(40) {
  left: 19%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 1px;
  height: 1px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(41) {
  left: 14%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 11px;
  height: 11px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(42) {
  left: 77%;
  -webkit-animation-duration: 7.2s;
          animation-duration: 7.2s;
  width: 5px;
  height: 5px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(43) {
  left: 28%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 4px;
  height: 4px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(44) {
  left: 24%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 11px;
  height: 11px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(45) {
  left: 60%;
  -webkit-animation-duration: 7.2s;
          animation-duration: 7.2s;
  width: 16px;
  height: 16px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(46) {
  left: 50%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 10px;
  height: 10px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(47) {
  left: 2%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 11px;
  height: 11px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(48) {
  left: 12%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 19px;
  height: 19px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(49) {
  left: 6%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 17px;
  height: 17px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(50) {
  left: 28%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 18px;
  height: 18px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(51) {
  left: 79%;
  -webkit-animation-duration: 7.2s;
          animation-duration: 7.2s;
  width: 15px;
  height: 15px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(52) {
  left: 22%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 14px;
  height: 14px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(53) {
  left: 7%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 1px;
  height: 1px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(54) {
  left: 11%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 14px;
  height: 14px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(55) {
  left: 63%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 5px;
  height: 5px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(56) {
  left: 57%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 7px;
  height: 7px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(57) {
  left: 37%;
  -webkit-animation-duration: 4.8s;
          animation-duration: 4.8s;
  width: 7px;
  height: 7px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(58) {
  left: 32%;
  -webkit-animation-duration: 4.8s;
          animation-duration: 4.8s;
  width: 19px;
  height: 19px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(59) {
  left: 50%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 2px;
  height: 2px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(60) {
  left: 78%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 17px;
  height: 17px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(61) {
  left: 36%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 6px;
  height: 6px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(62) {
  left: 10%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 7px;
  height: 7px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(63) {
  left: 61%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 19px;
  height: 19px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(64) {
  left: 14%;
  -webkit-animation-duration: 4.8s;
          animation-duration: 4.8s;
  width: 2px;
  height: 2px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(65) {
  left: 8%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 10px;
  height: 10px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(66) {
  left: 39%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 16px;
  height: 16px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(67) {
  left: 27%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 9px;
  height: 9px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(68) {
  left: 35%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 19px;
  height: 19px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(69) {
  left: 36%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 3px;
  height: 3px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(70) {
  left: 42%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 8px;
  height: 8px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(71) {
  left: 28%;
  -webkit-animation-duration: 7.2s;
          animation-duration: 7.2s;
  width: 17px;
  height: 17px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(72) {
  left: 17%;
  -webkit-animation-duration: 4.8s;
          animation-duration: 4.8s;
  width: 1px;
  height: 1px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(73) {
  left: 54%;
  -webkit-animation-duration: 7.2s;
          animation-duration: 7.2s;
  width: 7px;
  height: 7px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(74) {
  left: 29%;
  -webkit-animation-duration: 7.2s;
          animation-duration: 7.2s;
  width: 17px;
  height: 17px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(75) {
  left: 23%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 11px;
  height: 11px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(76) {
  left: 2%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 9px;
  height: 9px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(77) {
  left: 37%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 3px;
  height: 3px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(78) {
  left: 36%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 5px;
  height: 5px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(79) {
  left: 63%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 20px;
  height: 20px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(80) {
  left: 29%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 18px;
  height: 18px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(81) {
  left: 13%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 13px;
  height: 13px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(82) {
  left: 1%;
  -webkit-animation-duration: 7.2s;
          animation-duration: 7.2s;
  width: 15px;
  height: 15px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(83) {
  left: 31%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 4px;
  height: 4px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(84) {
  left: 29%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 15px;
  height: 15px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(85) {
  left: 80%;
  -webkit-animation-duration: 4.8s;
          animation-duration: 4.8s;
  width: 1px;
  height: 1px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(86) {
  left: 1%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 1px;
  height: 1px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(87) {
  left: 76%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 9px;
  height: 9px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(88) {
  left: 18%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 2px;
  height: 2px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(89) {
  left: 62%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 13px;
  height: 13px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(90) {
  left: 20%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 18px;
  height: 18px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(91) {
  left: 25%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 13px;
  height: 13px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(92) {
  left: 37%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 20px;
  height: 20px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(93) {
  left: 43%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 9px;
  height: 9px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(94) {
  left: 34%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 9px;
  height: 9px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(95) {
  left: 66%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 20px;
  height: 20px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(96) {
  left: 24%;
  -webkit-animation-duration: 4.8s;
          animation-duration: 4.8s;
  width: 4px;
  height: 4px;
  background-color: #F55898;
  border: 1px solid transparent;
}

.bubble:nth-child(97) {
  left: 5%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 10px;
  height: 10px;
  background-color: #FFDD50;
  border: 1px solid transparent;
}

.bubble:nth-child(98) {
  left: 18%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 6px;
  height: 6px;
  background-color: #FFFFFF;
  border: 1px solid #000;
}

.bubble:nth-child(99) {
  left: 7%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 4px;
  height: 4px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble:nth-child(100) {
  left: 46%;
  -webkit-animation-duration: 7.2s;
          animation-duration: 7.2s;
  width: 13px;
  height: 13px;
  background-color: #83D8DB;
  border: 1px solid transparent;
}

.bubble_page {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
}

.bubble_page:nth-child(odd) {
  -webkit-animation: bubble-pr 10s ease-in infinite;
          animation: bubble-pr 10s ease-in infinite;
}

.bubble_page:nth-child(even) {
  -webkit-animation: bubble-pl 10s ease-in infinite;
          animation: bubble-pl 10s ease-in infinite;
}

.bubble_page:nth-child(1) {
  left: 13%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 3px;
  height: 3px;
  background-color: #FFFFFF;
  border: 1px solid #000;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.bubble_page:nth-child(2) {
  left: 52%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 9px;
  height: 9px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.bubble_page:nth-child(3) {
  left: 21%;
  -webkit-animation-duration: 4.8s;
          animation-duration: 4.8s;
  width: 3px;
  height: 3px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.bubble_page:nth-child(4) {
  left: 1%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 4px;
  height: 4px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.bubble_page:nth-child(5) {
  left: 33%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 16px;
  height: 16px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.bubble_page:nth-child(6) {
  left: 64%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 10px;
  height: 10px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.bubble_page:nth-child(7) {
  left: 70%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 16px;
  height: 16px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.bubble_page:nth-child(8) {
  left: 58%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 5px;
  height: 5px;
  background-color: #FFFFFF;
  border: 1px solid #000;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.bubble_page:nth-child(9) {
  left: 102%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 18px;
  height: 18px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.bubble_page:nth-child(10) {
  left: 15%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 3px;
  height: 3px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.bubble_page:nth-child(11) {
  left: 23%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 20px;
  height: 20px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.bubble_page:nth-child(12) {
  left: 45%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 7px;
  height: 7px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.bubble_page:nth-child(13) {
  left: 5%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 14px;
  height: 14px;
  background-color: #FFFFFF;
  border: 1px solid #000;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.bubble_page:nth-child(14) {
  left: 3%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 6px;
  height: 6px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.bubble_page:nth-child(15) {
  left: 47%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 4px;
  height: 4px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.bubble_page:nth-child(16) {
  left: 43%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 12px;
  height: 12px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.bubble_page:nth-child(17) {
  left: 46%;
  -webkit-animation-duration: 4.8s;
          animation-duration: 4.8s;
  width: 7px;
  height: 7px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.bubble_page:nth-child(18) {
  left: 2%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 14px;
  height: 14px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.bubble_page:nth-child(19) {
  left: 65%;
  -webkit-animation-duration: 7.2s;
          animation-duration: 7.2s;
  width: 15px;
  height: 15px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.bubble_page:nth-child(20) {
  left: 31%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 20px;
  height: 20px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.bubble_page:nth-child(21) {
  left: 88%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 1px;
  height: 1px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.bubble_page:nth-child(22) {
  left: 3%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 12px;
  height: 12px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.bubble_page:nth-child(23) {
  left: 75%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 19px;
  height: 19px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.bubble_page:nth-child(24) {
  left: 77%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 9px;
  height: 9px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.bubble_page:nth-child(25) {
  left: 59%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 18px;
  height: 18px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.bubble_page:nth-child(26) {
  left: 21%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 17px;
  height: 17px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.bubble_page:nth-child(27) {
  left: 43%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 8px;
  height: 8px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.bubble_page:nth-child(28) {
  left: 58%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 8px;
  height: 8px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.bubble_page:nth-child(29) {
  left: 69%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 4px;
  height: 4px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.bubble_page:nth-child(30) {
  left: 70%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 18px;
  height: 18px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.bubble_page:nth-child(31) {
  left: 24%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 10px;
  height: 10px;
  background-color: #FFFFFF;
  border: 1px solid #000;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.bubble_page:nth-child(32) {
  left: 54%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 15px;
  height: 15px;
  background-color: #FFFFFF;
  border: 1px solid #000;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.bubble_page:nth-child(33) {
  left: 96%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 15px;
  height: 15px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.bubble_page:nth-child(34) {
  left: 37%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 16px;
  height: 16px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.bubble_page:nth-child(35) {
  left: 89%;
  -webkit-animation-duration: 4.8s;
          animation-duration: 4.8s;
  width: 19px;
  height: 19px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.bubble_page:nth-child(36) {
  left: 96%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 17px;
  height: 17px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.bubble_page:nth-child(37) {
  left: 4%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 7px;
  height: 7px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.bubble_page:nth-child(38) {
  left: 18%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 20px;
  height: 20px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.bubble_page:nth-child(39) {
  left: 103%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 15px;
  height: 15px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.bubble_page:nth-child(40) {
  left: 66%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 18px;
  height: 18px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.bubble_page:nth-child(41) {
  left: 64%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 11px;
  height: 11px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.bubble_page:nth-child(42) {
  left: 32%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 10px;
  height: 10px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.bubble_page:nth-child(43) {
  left: 59%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 19px;
  height: 19px;
  background-color: #FFFFFF;
  border: 1px solid #000;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.bubble_page:nth-child(44) {
  left: 102%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 7px;
  height: 7px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.bubble_page:nth-child(45) {
  left: 3%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 3px;
  height: 3px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.bubble_page:nth-child(46) {
  left: 59%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 3px;
  height: 3px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.bubble_page:nth-child(47) {
  left: 49%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 15px;
  height: 15px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.bubble_page:nth-child(48) {
  left: 27%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 17px;
  height: 17px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.bubble_page:nth-child(49) {
  left: 6%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 19px;
  height: 19px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.bubble_page:nth-child(50) {
  left: 106%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 7px;
  height: 7px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.bubble_page:nth-child(51) {
  left: 75%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 15px;
  height: 15px;
  background-color: #FFFFFF;
  border: 1px solid #000;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.bubble_page:nth-child(52) {
  left: 62%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 7px;
  height: 7px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.bubble_page:nth-child(53) {
  left: 22%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 9px;
  height: 9px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.bubble_page:nth-child(54) {
  left: 27%;
  -webkit-animation-duration: 7.2s;
          animation-duration: 7.2s;
  width: 10px;
  height: 10px;
  background-color: #FFFFFF;
  border: 1px solid #000;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.bubble_page:nth-child(55) {
  left: 69%;
  -webkit-animation-duration: 4.8s;
          animation-duration: 4.8s;
  width: 13px;
  height: 13px;
  background-color: #FFFFFF;
  border: 1px solid #000;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.bubble_page:nth-child(56) {
  left: 72%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 4px;
  height: 4px;
  background-color: #FFFFFF;
  border: 1px solid #000;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.bubble_page:nth-child(57) {
  left: 1%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 15px;
  height: 15px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.bubble_page:nth-child(58) {
  left: 93%;
  -webkit-animation-duration: 7.2s;
          animation-duration: 7.2s;
  width: 20px;
  height: 20px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.bubble_page:nth-child(59) {
  left: 1%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 11px;
  height: 11px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.bubble_page:nth-child(60) {
  left: 21%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 7px;
  height: 7px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.bubble_page:nth-child(61) {
  left: 19%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 6px;
  height: 6px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.bubble_page:nth-child(62) {
  left: 91%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 4px;
  height: 4px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.bubble_page:nth-child(63) {
  left: 87%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 15px;
  height: 15px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.bubble_page:nth-child(64) {
  left: 75%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 10px;
  height: 10px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.bubble_page:nth-child(65) {
  left: 91%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 20px;
  height: 20px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.bubble_page:nth-child(66) {
  left: 76%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 6px;
  height: 6px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.bubble_page:nth-child(67) {
  left: 24%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 17px;
  height: 17px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.bubble_page:nth-child(68) {
  left: 8%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 13px;
  height: 13px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.bubble_page:nth-child(69) {
  left: 3%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 20px;
  height: 20px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.bubble_page:nth-child(70) {
  left: 19%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 20px;
  height: 20px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.bubble_page:nth-child(71) {
  left: 18%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 3px;
  height: 3px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.bubble_page:nth-child(72) {
  left: 81%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 1px;
  height: 1px;
  background-color: #FFFFFF;
  border: 1px solid #000;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.bubble_page:nth-child(73) {
  left: 39%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 1px;
  height: 1px;
  background-color: #FFFFFF;
  border: 1px solid #000;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.bubble_page:nth-child(74) {
  left: 77%;
  -webkit-animation-duration: 4.8s;
          animation-duration: 4.8s;
  width: 12px;
  height: 12px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.bubble_page:nth-child(75) {
  left: 73%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 11px;
  height: 11px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.bubble_page:nth-child(76) {
  left: 58%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 16px;
  height: 16px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.bubble_page:nth-child(77) {
  left: 54%;
  -webkit-animation-duration: 4.8s;
          animation-duration: 4.8s;
  width: 11px;
  height: 11px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.bubble_page:nth-child(78) {
  left: 10%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 1px;
  height: 1px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.bubble_page:nth-child(79) {
  left: 36%;
  -webkit-animation-duration: 3.9s;
          animation-duration: 3.9s;
  width: 11px;
  height: 11px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.bubble_page:nth-child(80) {
  left: 79%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 19px;
  height: 19px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.bubble_page:nth-child(81) {
  left: 73%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 5px;
  height: 5px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.bubble_page:nth-child(82) {
  left: 110%;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  width: 16px;
  height: 16px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.bubble_page:nth-child(83) {
  left: 11%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 19px;
  height: 19px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.bubble_page:nth-child(84) {
  left: 4%;
  -webkit-animation-duration: 7.2s;
          animation-duration: 7.2s;
  width: 14px;
  height: 14px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.bubble_page:nth-child(85) {
  left: 66%;
  -webkit-animation-duration: 4.8s;
          animation-duration: 4.8s;
  width: 20px;
  height: 20px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.bubble_page:nth-child(86) {
  left: 52%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 19px;
  height: 19px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.bubble_page:nth-child(87) {
  left: 45%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 15px;
  height: 15px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.bubble_page:nth-child(88) {
  left: 18%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 9px;
  height: 9px;
  background-color: #FFFFFF;
  border: 1px solid #000;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.bubble_page:nth-child(89) {
  left: 74%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 6px;
  height: 6px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.bubble_page:nth-child(90) {
  left: 74%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 3px;
  height: 3px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.bubble_page:nth-child(91) {
  left: 81%;
  -webkit-animation-duration: 6.6s;
          animation-duration: 6.6s;
  width: 16px;
  height: 16px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.bubble_page:nth-child(92) {
  left: 88%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 8px;
  height: 8px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.bubble_page:nth-child(93) {
  left: 94%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  width: 6px;
  height: 6px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.bubble_page:nth-child(94) {
  left: 36%;
  -webkit-animation-duration: 4.8s;
          animation-duration: 4.8s;
  width: 19px;
  height: 19px;
  background-color: #FFFFFF;
  border: 1px solid #000;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.bubble_page:nth-child(95) {
  left: 26%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 6px;
  height: 6px;
  background-color: #FFFFFF;
  border: 1px solid #000;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.bubble_page:nth-child(96) {
  left: 40%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 8px;
  height: 8px;
  background-color: #FFDD50;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.bubble_page:nth-child(97) {
  left: 33%;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  width: 17px;
  height: 17px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.bubble_page:nth-child(98) {
  left: 87%;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  width: 3px;
  height: 3px;
  background-color: #F55898;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.bubble_page:nth-child(99) {
  left: 51%;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s;
  width: 5px;
  height: 5px;
  background-color: #83D8DB;
  border: 1px solid transparent;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.bubble_page:nth-child(100) {
  left: 91%;
  -webkit-animation-duration: 7.2s;
          animation-duration: 7.2s;
  width: 12px;
  height: 12px;
  background-color: #FFFFFF;
  border: 1px solid #000;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
/*# sourceMappingURL=common.css.map */