@font-face {
  font-family: OswaldBold;
  src: url("../fonts/Oswald-Bold.ttf");
  font-weight: bold; }
* {
  box-sizing: border-box; }

html {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: 0 0; }

body {
  margin: 0;
  background-color: #9fcc3b; }

.loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  visibility: hidden;
  animation: loader 3s forwards;
  animation-delay: 0s; }
@keyframes loader {
  0%, 90% {
    opacity: 1;
    visibility: visible; }
  100% {
    opacity: 0;
    visibility: hidden; } }
  .loader span {
    border: 10px solid #f3f3f3;
    border-top: 10px solid #9fcc3b;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 45%;
    left: 45%;
    transform: translate(-50%, -50%); }
    @media (min-width: 768px) {
      .loader span {
        top: 50%;
        left: 50%; } }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
.noScroll {
  overflow: hidden !important; }

.end {
  position: absolute;
  bottom: 50vh; }

.mizoCsipotelek {
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  position: relative;
  margin: auto;
  max-width: 100%; }
  @media only screen and (min-width: 1024px) {
    .mizoCsipotelek {
      height: 100vh; } }

section {
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  overflow: hidden; }
  @media only screen and (min-width: 1024px) {
    section {
      height: 101vh; } }
  section.two, section.three, section.four, section.five, section.six, section.seven, section.eight, section.nine, section.ten, section.eleven {
    background: url("../images/bg.svg");
    background-position: center; }

.people {
  position: fixed;
  top: 0;
  right: -100vw;
  z-index: 1;
  user-select: none;
  pointer-events: none; }
  .people:before {
    content: url("../images/moo.svg");
    width: 170px;
    height: 100%;
    display: block; }
    @media (min-width: 576px) {
      .people:before {
        width: 405px; } }
  .people.one {
    display: none; }
  .people.two {
    display: block;
    -webkit-animation: people2 1s forwards;
    -moz-animation: people2 1s forwards;
    -o-animation: people2 1s forwards;
    animation: people2 1s forwards;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes people2 {
  0% {
    top: 0;
    right: -100vw;
    transform: unset; }
  99% {
    top: 30%;
    right: 0%;
    transform: translate(30%, -30%); }
  100% {
    top: 30%;
    right: 0%;
    transform: translate(30%, -30%); } }
@-moz-keyframes people2 {
  0% {
    top: 0;
    right: -100vw;
    transform: unset; }
  99% {
    top: 30%;
    right: 0%;
    transform: translate(30%, -30%); }
  100% {
    top: 30%;
    right: 0%;
    transform: translate(30%, -30%); } }
@-o-keyframes people2 {
  0% {
    top: 0;
    right: -100vw;
    transform: unset; }
  99% {
    top: 30%;
    right: 0%;
    transform: translate(30%, -30%); }
  100% {
    top: 30%;
    right: 0%;
    transform: translate(30%, -30%); } }
@keyframes people2 {
  0% {
    top: 0;
    right: -100vw;
    transform: unset; }
  99% {
    top: 30%;
    right: 0%;
    transform: translate(30%, -30%); }
  100% {
    top: 30%;
    right: 0%;
    transform: translate(30%, -30%); } }
    @media (min-width: 576px) {
      .people.two {
        -webkit-animation: people2 1s forwards;
        -moz-animation: people2 1s forwards;
        -o-animation: people2 1s forwards;
        animation: people2 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people2 {
        0% {
          top: 0;
          right: -100vw;
          transform: unset; }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(0%, -30%); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(0%, -30%); } }
      @-moz-keyframes people2 {
        0% {
          top: 0;
          right: -100vw;
          transform: unset; }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(0%, -30%); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(0%, -30%); } }
      @-o-keyframes people2 {
        0% {
          top: 0;
          right: -100vw;
          transform: unset; }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(0%, -30%); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(0%, -30%); } }
      @keyframes people2 {
        0% {
          top: 0;
          right: -100vw;
          transform: unset; }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(0%, -30%); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(0%, -30%); } } }
    @media (min-width: 1200px) {
      .people.two {
        -webkit-animation: people2 1s forwards;
        -moz-animation: people2 1s forwards;
        -o-animation: people2 1s forwards;
        animation: people2 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people2 {
        0% {
          top: 0;
          right: -100vw;
          transform: unset; }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } }
      @-moz-keyframes people2 {
        0% {
          top: 0;
          right: -100vw;
          transform: unset; }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } }
      @-o-keyframes people2 {
        0% {
          top: 0;
          right: -100vw;
          transform: unset; }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } }
      @keyframes people2 {
        0% {
          top: 0;
          right: -100vw;
          transform: unset; }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } } }
  .people.three {
    -webkit-animation: people3 1s forwards;
    -moz-animation: people3 1s forwards;
    -o-animation: people3 1s forwards;
    animation: people3 1s forwards;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes people3 {
  0% {
    top: 30%;
    right: 35%;
    transform: translate(35%, -30%); }
  99% {
    top: 9%;
    right: 70%;
    transform: translate(70%, -30%); }
  100% {
    top: 9%;
    right: 70%;
    transform: translate(70%, -30%) scale(-1, 1); } }
@-moz-keyframes people3 {
  0% {
    top: 30%;
    right: 35%;
    transform: translate(35%, -30%); }
  99% {
    top: 9%;
    right: 70%;
    transform: translate(70%, -30%); }
  100% {
    top: 9%;
    right: 70%;
    transform: translate(70%, -30%) scale(-1, 1); } }
@-o-keyframes people3 {
  0% {
    top: 30%;
    right: 35%;
    transform: translate(35%, -30%); }
  99% {
    top: 9%;
    right: 70%;
    transform: translate(70%, -30%); }
  100% {
    top: 9%;
    right: 70%;
    transform: translate(70%, -30%) scale(-1, 1); } }
@keyframes people3 {
  0% {
    top: 30%;
    right: 35%;
    transform: translate(35%, -30%); }
  99% {
    top: 9%;
    right: 70%;
    transform: translate(70%, -30%); }
  100% {
    top: 9%;
    right: 70%;
    transform: translate(70%, -30%) scale(-1, 1); } }
    @media (min-width: 576px) {
      .people.three {
        -webkit-animation: people3 1s forwards;
        -moz-animation: people3 1s forwards;
        -o-animation: people3 1s forwards;
        animation: people3 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people3 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(65%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(65%, -30%) scale(-1, 1); } }
      @-moz-keyframes people3 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(65%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(65%, -30%) scale(-1, 1); } }
      @-o-keyframes people3 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(65%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(65%, -30%) scale(-1, 1); } }
      @keyframes people3 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(65%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(65%, -30%) scale(-1, 1); } } }
    @media (min-width: 1200px) {
      .people.three {
        -webkit-animation: people3 1s forwards;
        -moz-animation: people3 1s forwards;
        -o-animation: people3 1s forwards;
        animation: people3 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people3 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-moz-keyframes people3 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-o-keyframes people3 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @keyframes people3 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } } }
  .people.four {
    -webkit-animation: people4 1s forwards;
    -moz-animation: people4 1s forwards;
    -o-animation: people4 1s forwards;
    animation: people4 1s forwards;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes people4 {
  0% {
    top: 30%;
    right: 70%;
    transform: translate(70%, -30%) scale(-1, 1); }
  99% {
    top: 10%;
    right: 35%;
    transform: translate(35%, -30%) scale(-1, 1); }
  100% {
    top: 10%;
    right: 35%;
    transform: translate(35%, -30%); } }
@-moz-keyframes people4 {
  0% {
    top: 30%;
    right: 70%;
    transform: translate(70%, -30%) scale(-1, 1); }
  99% {
    top: 10%;
    right: 35%;
    transform: translate(35%, -30%) scale(-1, 1); }
  100% {
    top: 10%;
    right: 35%;
    transform: translate(35%, -30%); } }
@-o-keyframes people4 {
  0% {
    top: 30%;
    right: 70%;
    transform: translate(70%, -30%) scale(-1, 1); }
  99% {
    top: 10%;
    right: 35%;
    transform: translate(35%, -30%) scale(-1, 1); }
  100% {
    top: 10%;
    right: 35%;
    transform: translate(35%, -30%); } }
@keyframes people4 {
  0% {
    top: 30%;
    right: 70%;
    transform: translate(70%, -30%) scale(-1, 1); }
  99% {
    top: 10%;
    right: 35%;
    transform: translate(35%, -30%) scale(-1, 1); }
  100% {
    top: 10%;
    right: 35%;
    transform: translate(35%, -30%); } }
    @media (min-width: 576px) {
      .people.four {
        -webkit-animation: people4 1s forwards;
        -moz-animation: people4 1s forwards;
        -o-animation: people4 1s forwards;
        animation: people4 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people4 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%); } }
      @-moz-keyframes people4 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%); } }
      @-o-keyframes people4 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%); } }
      @keyframes people4 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%); } } }
    @media (min-width: 1200px) {
      .people.four {
        -webkit-animation: people4 1s forwards;
        -moz-animation: people4 1s forwards;
        -o-animation: people4 1s forwards;
        animation: people4 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people4 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } }
      @-moz-keyframes people4 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } }
      @-o-keyframes people4 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } }
      @keyframes people4 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } } }
  .people.five {
    -webkit-animation: people5 1s forwards;
    -moz-animation: people5 1s forwards;
    -o-animation: people5 1s forwards;
    animation: people5 1s forwards;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes people5 {
  0% {
    top: 30%;
    right: 35%;
    transform: translate(35%, -30%); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
@-moz-keyframes people5 {
  0% {
    top: 30%;
    right: 35%;
    transform: translate(35%, -30%); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
@-o-keyframes people5 {
  0% {
    top: 30%;
    right: 35%;
    transform: translate(35%, -30%); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
@keyframes people5 {
  0% {
    top: 30%;
    right: 35%;
    transform: translate(35%, -30%); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
    @media (min-width: 576px) {
      .people.five {
        -webkit-animation: people5 1s forwards;
        -moz-animation: people5 1s forwards;
        -o-animation: people5 1s forwards;
        animation: people5 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people5 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-moz-keyframes people5 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-o-keyframes people5 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @keyframes people5 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%) scale(-1, 1); } } }
    @media (min-width: 1200px) {
      .people.five {
        -webkit-animation: people5 1s forwards;
        -moz-animation: people5 1s forwards;
        -o-animation: people5 1s forwards;
        animation: people5 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people5 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-moz-keyframes people5 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-o-keyframes people5 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @keyframes people5 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } } }
  .people.six {
    -webkit-animation: people6 1s forwards;
    -moz-animation: people6 1s forwards;
    -o-animation: people6 1s forwards;
    animation: people6 1s forwards;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes people6 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); } }
@-moz-keyframes people6 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); } }
@-o-keyframes people6 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); } }
@keyframes people6 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); } }
    @media (min-width: 576px) {
      .people.six {
        -webkit-animation: people6 1s forwards;
        -moz-animation: people6 1s forwards;
        -o-animation: people6 1s forwards;
        animation: people6 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people6 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%); } }
      @-moz-keyframes people6 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%); } }
      @-o-keyframes people6 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%); } }
      @keyframes people6 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%); } } }
    @media (min-width: 1200px) {
      .people.six {
        -webkit-animation: people6 1s forwards;
        -moz-animation: people6 1s forwards;
        -o-animation: people6 1s forwards;
        animation: people6 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people6 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } }
      @-moz-keyframes people6 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } }
      @-o-keyframes people6 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } }
      @keyframes people6 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } } }
  .people.seven {
    -webkit-animation: people7 1s forwards;
    -moz-animation: people7 1s forwards;
    -o-animation: people7 1s forwards;
    animation: people7 1s forwards;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes people7 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
@-moz-keyframes people7 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
@-o-keyframes people7 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
@keyframes people7 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
    @media (min-width: 576px) {
      .people.seven {
        -webkit-animation: people7 1s forwards;
        -moz-animation: people7 1s forwards;
        -o-animation: people7 1s forwards;
        animation: people7 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people7 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-moz-keyframes people7 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-o-keyframes people7 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @keyframes people7 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%) scale(-1, 1); } } }
    @media (min-width: 1200px) {
      .people.seven {
        -webkit-animation: people7 1s forwards;
        -moz-animation: people7 1s forwards;
        -o-animation: people7 1s forwards;
        animation: people7 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people7 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-moz-keyframes people7 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-o-keyframes people7 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @keyframes people7 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } } }
  .people.eight {
    -webkit-animation: people8 1s forwards;
    -moz-animation: people8 1s forwards;
    -o-animation: people8 1s forwards;
    animation: people8 1s forwards;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes people8 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); } }
@-moz-keyframes people8 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); } }
@-o-keyframes people8 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); } }
@keyframes people8 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); } }
    @media (min-width: 576px) {
      .people.eight {
        -webkit-animation: people8 1s forwards;
        -moz-animation: people8 1s forwards;
        -o-animation: people8 1s forwards;
        animation: people8 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people8 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%); } }
      @-moz-keyframes people8 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%); } }
      @-o-keyframes people8 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%); } }
      @keyframes people8 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%); } } }
    @media (min-width: 1200px) {
      .people.eight {
        -webkit-animation: people8 1s forwards;
        -moz-animation: people8 1s forwards;
        -o-animation: people8 1s forwards;
        animation: people8 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people8 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } }
      @-moz-keyframes people8 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } }
      @-o-keyframes people8 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } }
      @keyframes people8 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } } }
  .people.nine {
    -webkit-animation: people9 1s forwards;
    -moz-animation: people9 1s forwards;
    -o-animation: people9 1s forwards;
    animation: people9 1s forwards;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes people9 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
@-moz-keyframes people9 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
@-o-keyframes people9 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
@keyframes people9 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
    @media (min-width: 576px) {
      .people.nine {
        -webkit-animation: people9 1s forwards;
        -moz-animation: people9 1s forwards;
        -o-animation: people9 1s forwards;
        animation: people9 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people9 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-moz-keyframes people9 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-o-keyframes people9 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @keyframes people9 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%) scale(-1, 1); } } }
    @media (min-width: 1200px) {
      .people.nine {
        -webkit-animation: people9 1s forwards;
        -moz-animation: people9 1s forwards;
        -o-animation: people9 1s forwards;
        animation: people9 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people9 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-moz-keyframes people9 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-o-keyframes people9 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @keyframes people9 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } } }
  .people.ten {
    -webkit-animation: people10 1s forwards;
    -moz-animation: people10 1s forwards;
    -o-animation: people10 1s forwards;
    animation: people10 1s forwards;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes people10 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); } }
@-moz-keyframes people10 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); } }
@-o-keyframes people10 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); } }
@keyframes people10 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); } }
    @media (min-width: 576px) {
      .people.ten {
        -webkit-animation: people10 1s forwards;
        -moz-animation: people10 1s forwards;
        -o-animation: people10 1s forwards;
        animation: people10 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people10 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%); } }
      @-moz-keyframes people10 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%); } }
      @-o-keyframes people10 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%); } }
      @keyframes people10 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 0%;
          transform: translate(35%, -30%); } } }
    @media (min-width: 1200px) {
      .people.ten {
        -webkit-animation: people10 1s forwards;
        -moz-animation: people10 1s forwards;
        -o-animation: people10 1s forwards;
        animation: people10 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people10 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } }
      @-moz-keyframes people10 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } }
      @-o-keyframes people10 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } }
      @keyframes people10 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%) scale(-1, 1); }
        100% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); } } }
  .people.eleven {
    -webkit-animation: people11 1s forwards;
    -moz-animation: people11 1s forwards;
    -o-animation: people11 1s forwards;
    animation: people11 1s forwards;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes people11 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
@-moz-keyframes people11 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
@-o-keyframes people11 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
@keyframes people11 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  99% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%); }
  100% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
    @media (min-width: 576px) {
      .people.eleven {
        -webkit-animation: people11 1s forwards;
        -moz-animation: people11 1s forwards;
        -o-animation: people11 1s forwards;
        animation: people11 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people11 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-moz-keyframes people11 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-o-keyframes people11 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @keyframes people11 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 100%;
          transform: translate(70%, -30%) scale(-1, 1); } } }
    @media (min-width: 1200px) {
      .people.eleven {
        -webkit-animation: people11 1s forwards;
        -moz-animation: people11 1s forwards;
        -o-animation: people11 1s forwards;
        animation: people11 1s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people11 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-moz-keyframes people11 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-o-keyframes people11 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @keyframes people11 {
        0% {
          top: 30%;
          right: 35%;
          transform: translate(35%, -30%); }
        99% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%); }
        100% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } } }
  .people.twelve {
    -webkit-animation: people12 0.5s forwards;
    -moz-animation: people12 0.5s forwards;
    -o-animation: people12 0.5s forwards;
    animation: people12 0.5s forwards;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes people12 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  99% {
    top: -100vw;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  100% {
    top: -100vw;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
@-moz-keyframes people12 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  99% {
    top: -100vw;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  100% {
    top: -100vw;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
@-o-keyframes people12 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  99% {
    top: -100vw;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  100% {
    top: -100vw;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
@keyframes people12 {
  0% {
    top: 3%;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  99% {
    top: -100vw;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); }
  100% {
    top: -100vw;
    right: 50%;
    transform: translate(50%, -3%) scale(-1, 1); } }
    @media (min-width: 576px) {
      .people.twelve {
        -webkit-animation: people12 0.5s forwards;
        -moz-animation: people12 0.5s forwards;
        -o-animation: people12 0.5s forwards;
        animation: people12 0.5s forwards;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
      @-webkit-keyframes people12 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: -100vw;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        100% {
          top: -100vw;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-moz-keyframes people12 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: -100vw;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        100% {
          top: -100vw;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @-o-keyframes people12 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: -100vw;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        100% {
          top: -100vw;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } }
      @keyframes people12 {
        0% {
          top: 30%;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        99% {
          top: -100vw;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); }
        100% {
          top: -100vw;
          right: 70%;
          transform: translate(70%, -30%) scale(-1, 1); } } }
  .people.thirteen, .people.fifteen {
    display: none; }

.headerWrapper.fifteen ~ .thePictureIsAnIllustration {
  display: none; }

.thePictureIsAnIllustration {
  position: fixed;
  left: 10px;
  bottom: 10px;
  color: #1B5A41;
  font-family: OswaldBold, sans-serif;
  font-style: italic;
  font-weight: bold;
  z-index: 999; }

.one .textWrapper,
.two .textWrapper,
.three .textWrapper,
.four .textWrapper,
.five .textWrapper,
.six .textWrapper,
.seven .textWrapper,
.eight .textWrapper,
.nine .textWrapper,
.ten .textWrapper,
.eleven .textWrapper,
.thirteen .textWrapper,
.fifteen .textWrapper {
  display: block;
  position: absolute;
  color: #1B5A41;
  opacity: 0;
  font-family: OswaldBold, sans-serif;
  font-size: 28px;
  line-height: 38px;
  letter-spacing: 0.25px; }
  @media (min-width: 576px) {
    .one .textWrapper,
    .two .textWrapper,
    .three .textWrapper,
    .four .textWrapper,
    .five .textWrapper,
    .six .textWrapper,
    .seven .textWrapper,
    .eight .textWrapper,
    .nine .textWrapper,
    .ten .textWrapper,
    .eleven .textWrapper,
    .thirteen .textWrapper,
    .fifteen .textWrapper {
      font-size: 40px;
      line-height: 48px; } }
  .one .textWrapper .text-uppercase,
  .two .textWrapper .text-uppercase,
  .three .textWrapper .text-uppercase,
  .four .textWrapper .text-uppercase,
  .five .textWrapper .text-uppercase,
  .six .textWrapper .text-uppercase,
  .seven .textWrapper .text-uppercase,
  .eight .textWrapper .text-uppercase,
  .nine .textWrapper .text-uppercase,
  .ten .textWrapper .text-uppercase,
  .eleven .textWrapper .text-uppercase,
  .thirteen .textWrapper .text-uppercase,
  .fifteen .textWrapper .text-uppercase {
    font-size: 45px;
    line-height: 63px; }
    @media (min-width: 576px) {
      .one .textWrapper .text-uppercase,
      .two .textWrapper .text-uppercase,
      .three .textWrapper .text-uppercase,
      .four .textWrapper .text-uppercase,
      .five .textWrapper .text-uppercase,
      .six .textWrapper .text-uppercase,
      .seven .textWrapper .text-uppercase,
      .eight .textWrapper .text-uppercase,
      .nine .textWrapper .text-uppercase,
      .ten .textWrapper .text-uppercase,
      .eleven .textWrapper .text-uppercase,
      .thirteen .textWrapper .text-uppercase,
      .fifteen .textWrapper .text-uppercase {
        font-size: 60px;
        line-height: 72px; } }

.two .textWrapper {
  top: 80%;
  left: 50%;
  transform: translate(-50%, -80%);
  text-align: center; }

.three .textWrapper {
  top: 41%;
  left: 70%;
  transform: translate(-70%, -35%);
  text-align: left; }
  @media (min-width: 768px) {
    .three .textWrapper {
      top: 35%; } }

.four .textWrapper {
  top: 35%;
  left: 30%;
  transform: translate(-30%, -35%);
  text-align: right; }

.five .textWrapper {
  top: 44%;
  left: 60%;
  transform: translate(-50%, -38%);
  text-align: left;
  width: 100%; }
  @media (min-width: 576px) {
    .five .textWrapper {
      top: 35%;
      left: 70%;
      transform: translate(-70%, -35%);
      width: 55%; } }
  @media (min-width: 992px) {
    .five .textWrapper {
      width: unset; } }

.six .textWrapper {
  top: 35%;
  left: 40%;
  transform: translate(-40%, -35%);
  text-align: right; }

.seven .textWrapper {
  top: 35%;
  left: 65%;
  transform: translate(-50%, -35%);
  text-align: left;
  width: 100%; }
  @media (min-width: 576px) {
    .seven .textWrapper {
      top: 35%;
      left: 70%;
      transform: translate(-70%, -35%);
      width: 50%; } }
  @media (min-width: 992px) {
    .seven .textWrapper {
      width: unset; } }

.eight .textWrapper {
  top: 36%;
  left: 45%;
  transform: translate(-45%, -30%);
  text-align: right; }
  @media (min-width: 576px) {
    .eight .textWrapper {
      top: 35%;
      left: 40%;
      transform: translate(-40%, -35%); } }
  @media (min-width: 768px) {
    .eight .textWrapper {
      top: 30%;
      left: 30%;
      transform: translate(-30%, -30%); } }

.nine .textWrapper {
  top: 33%;
  left: 30%;
  transform: translate(-30%, -25%);
  text-align: left;
  width: 90%; }
  @media (min-width: 576px) {
    .nine .textWrapper {
      top: 30%;
      left: 70%;
      transform: translate(-70%, -30%);
      width: 50%; } }
  @media (min-width: 992px) {
    .nine .textWrapper {
      width: unset; } }

.ten .textWrapper {
  top: 35%;
  left: 40%;
  transform: translate(-40%, -35%);
  text-align: right;
  width: 92%; }
  @media (min-width: 576px) {
    .ten .textWrapper {
      width: unset; } }
  @media (min-width: 768px) {
    .ten .textWrapper {
      top: 35%;
      left: 30%;
      transform: translate(-30%, -35%); } }

.eleven .textWrapper {
  top: 35%;
  left: 70%;
  transform: translate(-70%, -35%);
  text-align: left;
  width: 80%; }
  @media (min-width: 576px) {
    .eleven .textWrapper {
      width: unset; } }

.thirteen .textWrapper {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; }
  @media (min-width: 576px) {
    .thirteen .textWrapper {
      top: 50%;
      left: 20%;
      transform: translate(-30%, -50%); } }
  @media (min-width: 992px) {
    .thirteen .textWrapper {
      top: 50%;
      left: 30%;
      transform: translate(-30%, -50%); } }

.active .textWrapper {
  transition: opacity 2s ease-in;
  opacity: 1; }

.mizoCsipotelek .headerWrapper {
  display: block;
  width: 100%;
  position: fixed;
  z-index: 10;
  top: 0; }
  .mizoCsipotelek .headerWrapper.twelve, .mizoCsipotelek .headerWrapper.fifteen, .mizoCsipotelek .headerWrapper.thirteen, .mizoCsipotelek .headerWrapper.fourteen {
    z-index: 3;
    background: unset; }
  .mizoCsipotelek .headerWrapper.null:not(.one):not(.two):not(.three):not(.four):not(.five):not(.six):not(.seven):not(.eight):not(.nine):not(.ten):not(.eleven):not(.twelve):not(.thirteen):not(.fourteen):not(.fifteen) .logo {
    display: block;
    position: absolute;
    top: 0;
    left: -100vw;
    width: 245px;
    height: 160px;
    transition: all 2s;
    max-width: 100px;
    -webkit-animation: mizoOurMilk 1s forwards;
    -moz-animation: mizoOurMilk 1s forwards;
    -o-animation: mizoOurMilk 1s forwards;
    animation: mizoOurMilk 1s forwards;
    animation-delay: 3s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes mizoOurMilk {
  0% {
    top: 0;
    left: -100vw;
    transform: unset; }
  100% {
    top: 0;
    left: 2vw;
    transform: unset; } }
@-moz-keyframes mizoOurMilk {
  0% {
    top: 0;
    left: -100vw;
    transform: unset; }
  100% {
    top: 0;
    left: 2vw;
    transform: unset; } }
@-o-keyframes mizoOurMilk {
  0% {
    top: 0;
    left: -100vw;
    transform: unset; }
  100% {
    top: 0;
    left: 2vw;
    transform: unset; } }
@keyframes mizoOurMilk {
  0% {
    top: 0;
    left: -100vw;
    transform: unset; }
  100% {
    top: 0;
    left: 2vw;
    transform: unset; } }
    @media (min-width: 768px) {
      .mizoCsipotelek .headerWrapper.null:not(.one):not(.two):not(.three):not(.four):not(.five):not(.six):not(.seven):not(.eight):not(.nine):not(.ten):not(.eleven):not(.twelve):not(.thirteen):not(.fourteen):not(.fifteen) .logo {
        max-width: unset; } }
    .mizoCsipotelek .headerWrapper.null:not(.one):not(.two):not(.three):not(.four):not(.five):not(.six):not(.seven):not(.eight):not(.nine):not(.ten):not(.eleven):not(.twelve):not(.thirteen):not(.fourteen):not(.fifteen) .logo:before {
      content: url("../images/mizoOurMilk.svg"); }
    .mizoCsipotelek .headerWrapper.null:not(.one):not(.two):not(.three):not(.four):not(.five):not(.six):not(.seven):not(.eight):not(.nine):not(.ten):not(.eleven):not(.twelve):not(.thirteen):not(.fourteen):not(.fifteen) .logo span {
      display: block;
      height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0; }
  .mizoCsipotelek .headerWrapper .logo {
    position: relative;
    transition: all 2s;
    max-width: 100px; }
    @media (min-width: 768px) {
      .mizoCsipotelek .headerWrapper .logo {
        max-width: 310px; } }
    .mizoCsipotelek .headerWrapper .logo:before {
      content: url("../images/logoBg.svg");
      display: block; }
    .mizoCsipotelek .headerWrapper .logo span {
      display: block;
      width: 40px;
      position: absolute;
      top: 45%;
      left: 10%;
      transform: translate(-10%, -45%); }
      @media (min-width: 576px) {
        .mizoCsipotelek .headerWrapper .logo span {
          width: 80px; } }
      .mizoCsipotelek .headerWrapper .logo span:before {
        content: url("../images/mizoLogo.svg"); }
  .mizoCsipotelek .headerWrapper .pictureGallery {
    display: block;
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    right: -50vw;
    max-width: 100px;
    -webkit-animation: pictureGallery 1s forwards;
    -moz-animation: pictureGallery 1s forwards;
    -o-animation: pictureGallery 1s forwards;
    animation: pictureGallery 1s forwards;
    animation-delay: 3s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes pictureGallery {
  0% {
    top: 0;
    right: -50vw;
    transform: unset; }
  100% {
    top: 0;
    right: 0;
    transform: unset; } }
@-moz-keyframes pictureGallery {
  0% {
    top: 0;
    right: -50vw;
    transform: unset; }
  100% {
    top: 0;
    right: 0;
    transform: unset; } }
@-o-keyframes pictureGallery {
  0% {
    top: 0;
    right: -50vw;
    transform: unset; }
  100% {
    top: 0;
    right: 0;
    transform: unset; } }
@keyframes pictureGallery {
  0% {
    top: 0;
    right: -50vw;
    transform: unset; }
  100% {
    top: 0;
    right: 0;
    transform: unset; } }
    @media (min-width: 768px) {
      .mizoCsipotelek .headerWrapper .pictureGallery {
        max-width: 210px; } }
    .mizoCsipotelek .headerWrapper .pictureGallery a span {
      position: absolute;
      top: 30%;
      left: 70%;
      transform: translate(-70%, -30%);
      color: white;
      font-size: 11px;
      font-family: OswaldBold, sans-serif; }
      @media (min-width: 768px) {
        .mizoCsipotelek .headerWrapper .pictureGallery a span {
          font-size: 16px; } }

.galleryWrapper {
  display: none; }

section.one.active .headerWrapper .logo, section.two.active .headerWrapper .logo {
  -webkit-animation: logo 1s forwards;
  -moz-animation: logo 1s forwards;
  -o-animation: logo 1s forwards;
  animation: logo 1s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes logo {
  0% {
    top: 0;
    left: -50vw;
    transform: unset; }
  100% {
    top: 0;
    left: 0;
    transform: unset; } }
@-moz-keyframes logo {
  0% {
    top: 0;
    left: -50vw;
    transform: unset; }
  100% {
    top: 0;
    left: 0;
    transform: unset; } }
@-o-keyframes logo {
  0% {
    top: 0;
    left: -50vw;
    transform: unset; }
  100% {
    top: 0;
    left: 0;
    transform: unset; } }
@keyframes logo {
  0% {
    top: 0;
    left: -50vw;
    transform: unset; }
  100% {
    top: 0;
    left: 0;
    transform: unset; } }
section.one.active .headerWrapper .pictureGallery, section.two.active .headerWrapper .pictureGallery {
  -webkit-animation: pictureGallery 1s forwards;
  -moz-animation: pictureGallery 1s forwards;
  -o-animation: pictureGallery 1s forwards;
  animation: pictureGallery 1s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes pictureGallery {
  0% {
    top: 0;
    right: -50vw;
    transform: unset; }
  100% {
    top: 0;
    right: 0;
    transform: unset; } }
@-moz-keyframes pictureGallery {
  0% {
    top: 0;
    right: -50vw;
    transform: unset; }
  100% {
    top: 0;
    right: 0;
    transform: unset; } }
@-o-keyframes pictureGallery {
  0% {
    top: 0;
    right: -50vw;
    transform: unset; }
  100% {
    top: 0;
    right: 0;
    transform: unset; } }
@keyframes pictureGallery {
  0% {
    top: 0;
    right: -50vw;
    transform: unset; }
  100% {
    top: 0;
    right: 0;
    transform: unset; } }
section.null {
  background: url("../images/background.svg");
  background-position: bottom;
  background-size: cover; }
  section.null .firstWhiteFleck {
    width: 100%;
    position: absolute;
    top: 0;
    left: -100vw;
    max-width: 100vw;
    height: 100%;
    opacity: 0;
    animation: firstWhiteFleck 0.5s forwards;
    animation-delay: 4s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes firstWhiteFleck {
  0% {
    top: 0;
    left: -100vw;
    opacity: 1; }
  100% {
    top: 0;
    left: 0;
    opacity: 1; } }
    @media (min-width: 1200px) {
      section.null .firstWhiteFleck {
        max-width: 70vw; } }
    section.null .firstWhiteFleck:before {
      content: '';
      background: url("../images/firstWhiteFleck.svg") no-repeat;
      height: 100%;
      display: block;
      background-size: cover;
      background-position: bottom; }
      @media (min-width: 1200px) {
        section.null .firstWhiteFleck:before {
          background-position: unset; } }
  section.null .textWrapper {
    position: absolute;
    top: 20%;
    left: 20%;
    transform: translate(-20%, -20%);
    opacity: 0;
    animation: firstTextWrapper 1s forwards;
    animation-delay: 4.5s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes firstTextWrapper {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
    @media (min-width: 576px) {
      section.null .textWrapper {
        top: 30%;
        transform: translate(-20%, -30%); } }
    section.null .textWrapper img {
      width: 220px; }
      @media (min-width: 1200px) {
        section.null .textWrapper img {
          width: 440px; } }
  section.null .sun {
    width: 19vw;
    position: absolute;
    bottom: calc(100vh - 60%);
    left: calc(100vw - 28%);
    max-width: 200px;
    animation: sun 5s infinite;
    animation-delay: 0s; }
    @media (min-width: 768px) {
      section.null .sun {
        bottom: calc(100vh - 40%); } }
@keyframes sun {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }
    @media (min-width: 1024px) {
      section.null .sun {
        min-width: 200px;
        max-width: unset; } }
    section.null .sun:before {
      content: url("../images/nap.svg");
      display: block; }
  section.null .mizoMilk28Big {
    width: 50vw;
    position: absolute;
    top: -100vh;
    left: 60%;
    transform: translate(-60%, 0);
    opacity: 0;
    animation: mizoMilk28BigDrop 0.2s forwards;
    animation-delay: 3.5s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes mizoMilk28BigDrop {
  0% {
    top: -100vh;
    left: 60%;
    transform: translate(-60%, 0); }
  10% {
    opacity: 1; }
  100% {
    top: 100%;
    left: 60%;
    transform: translate(-60%, -100%);
    opacity: 1; } }
    @media (min-width: 576px) {
      section.null .mizoMilk28Big {
        width: 40vw; } }
    @media (min-width: 1024px) {
      section.null .mizoMilk28Big {
        min-width: 420px;
        max-width: 620px; } }
    section.null .mizoMilk28Big:before {
      content: url("../images/product.svg");
      display: block; }
  section.null .flowers {
    width: 100%;
    position: absolute;
    bottom: -50vw;
    max-width: 80vw;
    right: 20px;
    opacity: 0;
    animation: flowers 0.5s forwards;
    animation-delay: 4s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes flowers {
  0% {
    bottom: -50vw;
    right: 20px;
    opacity: 1; }
  100% {
    bottom: 0;
    right: 20px;
    opacity: 1; } }
    @media (min-width: 768px) {
      section.null .flowers {
        max-width: 65vw; } }
    section.null .flowers:before {
      content: url("../images/flowers.svg");
      display: block; }

section.one {
  background: linear-gradient(#599c2e, #9fcc3b);
  background-size: 100%; }
  section.one .csipotelekCsodafarm {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -25%);
    width: 245px; }
    @media (min-width: 768px) {
      section.one .csipotelekCsodafarm {
        width: 445px; } }
    section.one .csipotelekCsodafarm:before {
      content: url("../images/headBuilding.svg"); }
  section.one .textWrapper {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -65%);
    text-align: center; }
  section.one .arrow {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, 5%);
    width: 15px; }
    @media (min-width: 576px) {
      section.one .arrow {
        width: 25px; } }
    section.one .arrow:before {
      content: url("../images/arrow.svg"); }
section.active .csipotelekCsodafarm {
  animation: fadeIn 2s forwards;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
section.active .arrow {
  animation: bouncing 2s infinite;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%) scale(0.5); }
  100% {
    opacity: 1;
    transform: translate(-50%, -30%) scale(1); } }
@keyframes bouncing {
  0%, 20%, 50%, 80%, 100% {
    transform: translate(-50%, 5%) translateY(0); }
  40% {
    transform: translate(-50%, 5%) translateY(-30px); }
  60% {
    transform: translate(-50%, 5%) translateY(-15px); } }
.two .tree,
.two .building1,
.two .building2 {
  display: block;
  position: absolute;
  top: 0;
  left: -100vw; }
  .two .tree:before,
  .two .building1:before,
  .two .building2:before {
    display: block; }
.two .farm {
  position: absolute;
  top: 30%;
  left: 30%;
  transform: translate(-30%, -30%);
  width: 200px;
  height: 150px; }
  @media (min-width: 576px) {
    .two .farm {
      width: 495px;
      height: 366px; } }
.two .tree {
  width: 100px; }
  @media (min-width: 576px) {
    .two .tree {
      width: 227px; } }
  .two .tree:before {
    content: url("../images/1_tree.svg"); }
.two .building1,
.two .building2 {
  width: 140px; }
  @media (min-width: 576px) {
    .two .building1,
    .two .building2 {
      width: 350px; } }
  .two .building1 .star,
  .two .building2 .star {
    display: block;
    width: 40px;
    position: absolute;
    transform: scale(1); }
    @media (min-width: 576px) {
      .two .building1 .star,
      .two .building2 .star {
        width: 100px; } }
    .two .building1 .star:before,
    .two .building2 .star:before {
      background: url("../images/star.png") no-repeat;
      background-size: 100% 100%;
      content: '';
      height: 5.3vw;
      display: block; }
.two .building1:before {
  content: url("../images/building.svg"); }
.two .building1 .star {
  top: -25%;
  left: 40%;
  transform: translate(-40%, 25%);
  animation: pulse1 1s infinite;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
.two .building2:before {
  content: url("../images/building.svg"); }
.two .building2 .star {
  top: 25%;
  right: 10%;
  transform: translate(-10%, -25%);
  animation: pulse2 2s infinite;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
.two.active .tree {
  -webkit-animation: tree 1s forwards;
  -moz-animation: tree 1s forwards;
  -o-animation: tree 1s forwards;
  animation: tree 1s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes tree {
  0% {
    top: 0;
    left: -100vw;
    transform: unset; }
  100% {
    top: -30%;
    left: 70%;
    transform: translate(-70%, 30%); } }
@-moz-keyframes tree {
  0% {
    top: 0;
    left: -100vw;
    transform: unset; }
  100% {
    top: -30%;
    left: 70%;
    transform: translate(-70%, 30%); } }
@-o-keyframes tree {
  0% {
    top: 0;
    left: -100vw;
    transform: unset; }
  100% {
    top: -30%;
    left: 70%;
    transform: translate(-70%, 30%); } }
@keyframes tree {
  0% {
    top: 0;
    left: -100vw;
    transform: unset; }
  100% {
    top: -30%;
    left: 70%;
    transform: translate(-70%, 30%); } }
.two.active .building1 {
  -webkit-animation: building1 1s forwards;
  -moz-animation: building1 1s forwards;
  -o-animation: building1 1s forwards;
  animation: building1 1s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes building1 {
  0% {
    top: 0;
    left: -100vw;
    transform: unset; }
  100% {
    top: 12%;
    left: 50%;
    transform: translate(-50%, -12%); } }
@-moz-keyframes building1 {
  0% {
    top: 0;
    left: -100vw;
    transform: unset; }
  100% {
    top: 12%;
    left: 50%;
    transform: translate(-50%, -12%); } }
@-o-keyframes building1 {
  0% {
    top: 0;
    left: -100vw;
    transform: unset; }
  100% {
    top: 12%;
    left: 50%;
    transform: translate(-50%, -12%); } }
@keyframes building1 {
  0% {
    top: 0;
    left: -100vw;
    transform: unset; }
  100% {
    top: 12%;
    left: 50%;
    transform: translate(-50%, -12%); } }
.two.active .building2 {
  -webkit-animation: building2 1s forwards;
  -moz-animation: building2 1s forwards;
  -o-animation: building2 1s forwards;
  animation: building2 1s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes building2 {
  0% {
    top: 0;
    left: -100vw;
    transform: unset; }
  100% {
    top: 70%;
    left: -50%;
    transform: translate(50%, -70%); } }
@-moz-keyframes building2 {
  0% {
    top: 0;
    left: -100vw;
    transform: unset; }
  100% {
    top: 70%;
    left: -50%;
    transform: translate(50%, -70%); } }
@-o-keyframes building2 {
  0% {
    top: 0;
    left: -100vw;
    transform: unset; }
  100% {
    top: 70%;
    left: -50%;
    transform: translate(50%, -70%); } }
@keyframes building2 {
  0% {
    top: 0;
    left: -100vw;
    transform: unset; }
  100% {
    top: 70%;
    left: -50%;
    transform: translate(50%, -70%); } }
@keyframes pulse1 {
  0% {
    transform: translate(-40%, 25%) scale(0.85); }
  70% {
    transform: translate(-40%, 25%) scale(1.05); }
  100% {
    transform: translate(-40%, 25%) scale(0.85); } }
@keyframes pulse2 {
  0% {
    transform: translate(-10%, -25%) scale(0.85); }
  70% {
    transform: translate(-10%, -25%) scale(1.05); }
  100% {
    transform: translate(-10%, -25%) scale(0.85); } }
.three .bed,
.three .blanket,
.three .pillow1,
.three .pillow2 {
  display: block;
  position: absolute;
  top: 0;
  left: -100vw; }
  .three .bed:before,
  .three .blanket:before,
  .three .pillow1:before,
  .three .pillow2:before {
    display: block; }
.three .bedWrapper {
  width: 290px;
  height: 230px;
  position: absolute;
  top: calc(100vh - 67%);
  left: 50%;
  transform: translate(-50%, 45%); }
  @media (min-width: 576px) {
    .three .bedWrapper {
      width: 437px;
      height: 40%;
      top: calc(100vh - 60%); } }
  @media (min-width: 1024px) {
    .three .bedWrapper {
      height: 345px; } }
.three .bed {
  width: 100%; }
  .three .bed:before {
    content: url("../images/2_bed.svg"); }
.three .blanket {
  width: 65%; }
  .three .blanket:before {
    content: url("../images/2_sand.svg"); }
.three .pillow1,
.three .pillow2 {
  width: 14%; }
.three .pillow1:before {
  content: url("../images/2_pillow.svg"); }
.three .pillow2:before {
  content: url("../images/2_pillow.svg"); }
.three.active .bed {
  -webkit-animation: bed 0.5s forwards;
  -moz-animation: bed 0.5s forwards;
  -o-animation: bed 0.5s forwards;
  animation: bed 0.5s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes bed {
  0% {
    top: 55%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 0;
    left: 0;
    transform: unset; } }
@-moz-keyframes bed {
  0% {
    top: 55%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 0;
    left: 0;
    transform: unset; } }
@-o-keyframes bed {
  0% {
    top: 55%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 0;
    left: 0;
    transform: unset; } }
@keyframes bed {
  0% {
    top: 55%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 0;
    left: 0;
    transform: unset; } }
.three.active .blanket {
  -webkit-animation: blanket 1s forwards;
  -moz-animation: blanket 1s forwards;
  -o-animation: blanket 1s forwards;
  animation: blanket 1s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes blanket {
  0% {
    top: 61%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 34%;
    left: 16%;
    transform: translate(-16%, -34%); } }
@-moz-keyframes blanket {
  0% {
    top: 61%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 34%;
    left: 16%;
    transform: translate(-16%, -34%); } }
@-o-keyframes blanket {
  0% {
    top: 61%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 34%;
    left: 16%;
    transform: translate(-16%, -34%); } }
@keyframes blanket {
  0% {
    top: 61%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 34%;
    left: 16%;
    transform: translate(-16%, -34%); } }
.three.active .pillow1 {
  -webkit-animation: pillow1 1.5s forwards;
  -moz-animation: pillow1 1.5s forwards;
  -o-animation: pillow1 1.5s forwards;
  animation: pillow1 1.5s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes pillow1 {
  0% {
    top: 65%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 31%;
    left: 16%;
    transform: translate(-16%, -31%); } }
@-moz-keyframes pillow1 {
  0% {
    top: 65%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 31%;
    left: 16%;
    transform: translate(-16%, -31%); } }
@-o-keyframes pillow1 {
  0% {
    top: 65%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 31%;
    left: 16%;
    transform: translate(-16%, -31%); } }
@keyframes pillow1 {
  0% {
    top: 65%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 31%;
    left: 16%;
    transform: translate(-16%, -31%); } }
.three.active .pillow2 {
  -webkit-animation: pillow2 1.8s forwards;
  -moz-animation: pillow2 1.8s forwards;
  -o-animation: pillow2 1.8s forwards;
  animation: pillow2 1.8s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes pillow2 {
  0% {
    top: 62%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 21%;
    left: 29%;
    transform: translate(-29%, -21%); } }
@-moz-keyframes pillow2 {
  0% {
    top: 62%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 21%;
    left: 29%;
    transform: translate(-29%, -21%); } }
@-o-keyframes pillow2 {
  0% {
    top: 62%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 21%;
    left: 29%;
    transform: translate(-29%, -21%); } }
@keyframes pillow2 {
  0% {
    top: 62%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 21%;
    left: 29%;
    transform: translate(-29%, -21%); } }
.four .cow,
.four .cowshedDoor {
  display: block;
  position: absolute;
  top: 0;
  right: -100vw; }
  .four .cow:before,
  .four .cowshedDoor:before {
    display: block; }
.four .cow {
  width: 170px; }
  @media (min-width: 576px) {
    .four .cow {
      width: 285px; } }
  .four .cow:before {
    content: url("../images/3_cow.svg"); }
.four .cowshedDoor {
  width: 185px; }
  @media (min-width: 576px) {
    .four .cowshedDoor {
      width: 316px; } }
  .four .cowshedDoor .door {
    width: 100%; }
    .four .cowshedDoor .door:before {
      content: url("../images/3_gate.svg"); }
  .four .cowshedDoor .doorTop {
    width: 69%;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(0, 0);
    z-index: 10; }
    .four .cowshedDoor .doorTop:before {
      content: url("../images/doorTop.svg"); }
  .four .cowshedDoor .doorFront {
    width: 68%;
    position: absolute;
    top: 90%;
    right: 0;
    transform: translate(0, -90%);
    z-index: 9; }
    .four .cowshedDoor .doorFront:before {
      content: url("../images/doorFront.svg"); }
  .four .cowshedDoor .doorItem1,
  .four .cowshedDoor .doorItem2,
  .four .cowshedDoor .doorItem3,
  .four .cowshedDoor .doorItem4,
  .four .cowshedDoor .doorItem5,
  .four .cowshedDoor .doorItem6,
  .four .cowshedDoor .doorItem7 {
    position: absolute;
    width: 50%;
    top: 20%;
    right: 5%;
    transform: translate(-5%, -20%); }
    .four .cowshedDoor .doorItem1:before,
    .four .cowshedDoor .doorItem2:before,
    .four .cowshedDoor .doorItem3:before,
    .four .cowshedDoor .doorItem4:before,
    .four .cowshedDoor .doorItem5:before,
    .four .cowshedDoor .doorItem6:before,
    .four .cowshedDoor .doorItem7:before {
      content: url("../images/doorItem.svg"); }
  .four .cowshedDoor .doorItem1 {
    z-index: 8; }
  .four .cowshedDoor .doorItem2 {
    z-index: 7; }
  .four .cowshedDoor .doorItem3 {
    z-index: 6; }
  .four .cowshedDoor .doorItem4 {
    z-index: 5; }
  .four .cowshedDoor .doorItem5 {
    z-index: 4; }
  .four .cowshedDoor .doorItem6 {
    z-index: 3; }
  .four .cowshedDoor .doorItem7 {
    z-index: 2; }
  @media (min-width: 768px) {
    .four .cowshedDoor .shadow {
      width: 25px;
      height: 25px;
      background: #84ba3f;
      position: absolute;
      top: 80%;
      left: 30%;
      transform: translate(-30%, -80%); } }
.four.active .cow {
  -webkit-animation: cow 1s forwards;
  -moz-animation: cow 1s forwards;
  -o-animation: cow 1s forwards;
  animation: cow 1s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes cow {
  0% {
    top: 55%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 60%;
    right: 81%;
    transform: translate(65%, 0); } }
@-moz-keyframes cow {
  0% {
    top: 55%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 60%;
    right: 81%;
    transform: translate(65%, 0); } }
@-o-keyframes cow {
  0% {
    top: 55%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 60%;
    right: 81%;
    transform: translate(65%, 0); } }
@keyframes cow {
  0% {
    top: 55%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 60%;
    right: 81%;
    transform: translate(65%, 0); } }
.four.active .cowshedDoor {
  -webkit-animation: cowshedDoor 1s forwards;
  -moz-animation: cowshedDoor 1s forwards;
  -o-animation: cowshedDoor 1s forwards;
  animation: cowshedDoor 1s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes cowshedDoor {
  0% {
    top: 58%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 58%;
    right: 58%;
    transform: translate(58%, 0); } }
@-moz-keyframes cowshedDoor {
  0% {
    top: 58%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 58%;
    right: 58%;
    transform: translate(58%, 0); } }
@-o-keyframes cowshedDoor {
  0% {
    top: 58%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 58%;
    right: 58%;
    transform: translate(58%, 0); } }
@keyframes cowshedDoor {
  0% {
    top: 58%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 58%;
    right: 58%;
    transform: translate(58%, 0); } }
.four.active .doorItem1 {
  animation: doorItem1 1.5s infinite;
  animation-delay: 1.5s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes doorItem1 {
  0%, 25%, 100% {
    top: 20%;
    right: 5%;
    transform: translate(-5%, -20%); }
  50%, 75% {
    top: 30%;
    right: 5%;
    transform: translate(-5%, -30%); } }
.four.active .doorItem2 {
  animation: doorItem2 1.5s infinite;
  animation-delay: 1.5s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes doorItem2 {
  0%, 25%, 100% {
    top: 20%;
    right: 5%;
    transform: translate(-5%, -20%); }
  50%, 75% {
    top: 40%;
    right: 5%;
    transform: translate(-5%, -40%); } }
.four.active .doorItem3 {
  animation: doorItem3 1.5s infinite;
  animation-delay: 1.5s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes doorItem3 {
  0%, 25%, 100% {
    top: 20%;
    right: 5%;
    transform: translate(-5%, -20%); }
  50%, 75% {
    top: 50%;
    right: 5%;
    transform: translate(-5%, -50%); } }
.four.active .doorItem4 {
  animation: doorItem4 1.5s infinite;
  animation-delay: 1.5s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes doorItem4 {
  0%, 25%, 100% {
    top: 20%;
    right: 5%;
    transform: translate(-5%, -20%); }
  50%, 75% {
    top: 60%;
    right: 5%;
    transform: translate(-5%, -60%); } }
.four.active .doorItem5 {
  animation: doorItem5 1.5s infinite;
  animation-delay: 1.5s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes doorItem5 {
  0%, 25%, 100% {
    top: 20%;
    right: 5%;
    transform: translate(-5%, -20%); }
  50%, 75% {
    top: 70%;
    right: 5%;
    transform: translate(-5%, -70%); } }
.four.active .doorItem6 {
  animation: doorItem6 1.5s infinite;
  animation-delay: 1.5s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes doorItem6 {
  0%, 25%, 100% {
    top: 20%;
    right: 5%;
    transform: translate(-5%, -20%); }
  50%, 75% {
    top: 80%;
    right: 5%;
    transform: translate(-5%, -80%); } }
.four.active .doorItem7 {
  animation: doorItem7 1.5s infinite;
  animation-delay: 1.5s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes doorItem7 {
  0%, 25%, 100% {
    top: 20%;
    right: 5%;
    transform: translate(-5%, -20%); }
  50%, 75% {
    top: 90%;
    right: 5%;
    transform: translate(-5%, -90%); } }
@media (min-width: 768px) {
  .four.active .shadow {
    animation: shadow 1.5s infinite;
    animation-delay: 1.5s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); } }
@keyframes shadow {
  0%, 25%, 100% {
    top: 80%;
    left: 30%;
    transform: translate(-30%, -80%);
    height: 25px;
    width: 25px; }
  50%, 75% {
    top: 95%;
    left: 20%;
    transform: translate(-20%, -95%);
    height: 50px;
    width: 50px; } }
.five .waterCooling {
  display: block;
  position: absolute;
  top: 0;
  left: -100vw; }
  .five .waterCooling:before {
    display: block; }
.five .waterCooling {
  width: 300px;
  height: 200px; }
  @media (min-width: 576px) {
    .five .waterCooling {
      width: 400px;
      height: 350px; } }
  @media (min-width: 768px) {
    .five .waterCooling {
      width: 620px;
      height: 400px; } }
  .five .waterCooling .fanWrapper {
    position: absolute;
    width: 35%;
    height: 100%;
    left: 0;
    top: 5%;
    transform: translate(0, -5%);
    perspective: 200px; }
    .five .waterCooling .fanWrapper:before {
      content: '';
      background: url("../images/ventillator.gif") no-repeat;
      width: 100%;
      display: block;
      height: 100%;
      background-size: 100%; }
    .five .waterCooling .fanWrapper .fanCircle {
      position: absolute;
      width: 100%;
      z-index: 1; }
      .five .waterCooling .fanWrapper .fanCircle:before {
        content: url("../images/fanCircle.svg"); }
    .five .waterCooling .fanWrapper .fan {
      position: absolute;
      top: 25px;
      left: 15px;
      width: 64%;
      transform-style: preserve-3d;
      height: 80px; }
      @media (min-width: 576px) {
        .five .waterCooling .fanWrapper .fan {
          height: 217px;
          width: 80%; } }
      .five .waterCooling .fanWrapper .fan .cup {
        position: absolute;
        top: 45%;
        left: 60%;
        transform: translate(-60%, -45%);
        width: 20px;
        height: 20px;
        z-index: 1; }
        @media (min-width: 576px) {
          .five .waterCooling .fanWrapper .fan .cup {
            width: 40px;
            height: 40px; } }
        .five .waterCooling .fanWrapper .fan .cup:before {
          content: url("../images/cup.svg"); }
      .five .waterCooling .fanWrapper .fan .fanWent {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%; }
        .five .waterCooling .fanWrapper .fan .fanWent:before {
          content: url("../images/fanWent.svg"); }
  .five .waterCooling .showerWrapper {
    position: absolute;
    width: 14%;
    left: 43%;
    transform: translate(-43%, 0);
    height: 100%; }
    .five .waterCooling .showerWrapper .shower {
      position: absolute;
      width: 100%;
      z-index: 1;
      transform: translateZ(0); }
      .five .waterCooling .showerWrapper .shower:before {
        content: url("../images/showerHead.svg"); }
    .five .waterCooling .showerWrapper .waterDrop1,
    .five .waterCooling .showerWrapper .waterDrop2,
    .five .waterCooling .showerWrapper .waterDrop3,
    .five .waterCooling .showerWrapper .waterDrop4,
    .five .waterCooling .showerWrapper .waterDrop5,
    .five .waterCooling .showerWrapper .waterDrop6,
    .five .waterCooling .showerWrapper .waterDrop7,
    .five .waterCooling .showerWrapper .waterDrop8,
    .five .waterCooling .showerWrapper .waterDrop9,
    .five .waterCooling .showerWrapper .waterDrop10,
    .five .waterCooling .showerWrapper .waterDrop11,
    .five .waterCooling .showerWrapper .waterDrop12 {
      position: absolute;
      width: 100%;
      max-width: 12px;
      top: 20%;
      left: 20%; }
      @media (min-width: 576px) {
        .five .waterCooling .showerWrapper .waterDrop1,
        .five .waterCooling .showerWrapper .waterDrop2,
        .five .waterCooling .showerWrapper .waterDrop3,
        .five .waterCooling .showerWrapper .waterDrop4,
        .five .waterCooling .showerWrapper .waterDrop5,
        .five .waterCooling .showerWrapper .waterDrop6,
        .five .waterCooling .showerWrapper .waterDrop7,
        .five .waterCooling .showerWrapper .waterDrop8,
        .five .waterCooling .showerWrapper .waterDrop9,
        .five .waterCooling .showerWrapper .waterDrop10,
        .five .waterCooling .showerWrapper .waterDrop11,
        .five .waterCooling .showerWrapper .waterDrop12 {
          max-width: 25px; } }
      .five .waterCooling .showerWrapper .waterDrop1:before,
      .five .waterCooling .showerWrapper .waterDrop2:before,
      .five .waterCooling .showerWrapper .waterDrop3:before,
      .five .waterCooling .showerWrapper .waterDrop4:before,
      .five .waterCooling .showerWrapper .waterDrop5:before,
      .five .waterCooling .showerWrapper .waterDrop6:before,
      .five .waterCooling .showerWrapper .waterDrop7:before,
      .five .waterCooling .showerWrapper .waterDrop8:before,
      .five .waterCooling .showerWrapper .waterDrop9:before,
      .five .waterCooling .showerWrapper .waterDrop10:before,
      .five .waterCooling .showerWrapper .waterDrop11:before,
      .five .waterCooling .showerWrapper .waterDrop12:before {
        content: url("../images/waterDrop.svg"); }
  .five .waterCooling .cow {
    position: absolute;
    width: 45%;
    right: 0;
    top: 7%;
    transform: scale(-1, 1) translate(0, 7%); }
    .five .waterCooling .cow:before {
      content: url("../images/3_cow.svg"); }
.five.active .waterCooling {
  -webkit-animation: waterCooling 1s forwards;
  -moz-animation: waterCooling 1s forwards;
  -o-animation: waterCooling 1s forwards;
  animation: waterCooling 1s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes waterCooling {
  0% {
    top: 72%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 72%;
    left: 50%;
    transform: translate(-50%, 0); } }
@-moz-keyframes waterCooling {
  0% {
    top: 72%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 72%;
    left: 50%;
    transform: translate(-50%, 0); } }
@-o-keyframes waterCooling {
  0% {
    top: 72%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 72%;
    left: 50%;
    transform: translate(-50%, 0); } }
@keyframes waterCooling {
  0% {
    top: 72%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 72%;
    left: 50%;
    transform: translate(-50%, 0); } }
  @media (min-width: 576px) {
    .five.active .waterCooling {
      -webkit-animation: waterCooling 1s forwards;
      -moz-animation: waterCooling 1s forwards;
      -o-animation: waterCooling 1s forwards;
      animation: waterCooling 1s forwards;
      animation-delay: 0s;
      animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
    @-webkit-keyframes waterCooling {
      0% {
        top: 55%;
        left: -100vw;
        transform: unset; }
      100% {
        top: 55%;
        left: 50%;
        transform: translate(-50%, 0); } }
    @-moz-keyframes waterCooling {
      0% {
        top: 55%;
        left: -100vw;
        transform: unset; }
      100% {
        top: 55%;
        left: 50%;
        transform: translate(-50%, 0); } }
    @-o-keyframes waterCooling {
      0% {
        top: 55%;
        left: -100vw;
        transform: unset; }
      100% {
        top: 55%;
        left: 50%;
        transform: translate(-50%, 0); } }
    @keyframes waterCooling {
      0% {
        top: 55%;
        left: -100vw;
        transform: unset; }
      100% {
        top: 55%;
        left: 50%;
        transform: translate(-50%, 0); } } }
.five.active .fanWent {
  animation: fanRotate 1s infinite;
  animation-delay: 1s;
  animation-timing-function: linear; }
.five.active .waterDrop1 {
  -webkit-animation: waterDrop1 1.5s infinite;
  -moz-animation: waterDrop1 1.5s infinite;
  -o-animation: waterDrop1 1.5s infinite;
  animation: waterDrop1 1.5s infinite;
  animation-delay: 1.5s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes waterDrop1 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 40%;
    left: 25%;
    transform: translate(-25%, -40%);
    opacity: 1; }
  100% {
    top: 40%;
    left: 25%;
    transform: translate(-25%, -40%);
    opacity: 0; } }
@-moz-keyframes waterDrop1 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 40%;
    left: 25%;
    transform: translate(-25%, -40%);
    opacity: 1; }
  100% {
    top: 40%;
    left: 25%;
    transform: translate(-25%, -40%);
    opacity: 0; } }
@-o-keyframes waterDrop1 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 40%;
    left: 25%;
    transform: translate(-25%, -40%);
    opacity: 1; }
  100% {
    top: 40%;
    left: 25%;
    transform: translate(-25%, -40%);
    opacity: 0; } }
@keyframes waterDrop1 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 40%;
    left: 25%;
    transform: translate(-25%, -40%);
    opacity: 1; }
  100% {
    top: 40%;
    left: 25%;
    transform: translate(-25%, -40%);
    opacity: 0; } }
.five.active .waterDrop2 {
  -webkit-animation: waterDrop2 1.5s infinite;
  -moz-animation: waterDrop2 1.5s infinite;
  -o-animation: waterDrop2 1.5s infinite;
  animation: waterDrop2 1.5s infinite;
  animation-delay: 1.6s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes waterDrop2 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 52%;
    left: -15%;
    transform: translate(15%, -52%);
    opacity: 1; }
  100% {
    top: 52%;
    left: -15%;
    transform: translate(15%, -52%);
    opacity: 0; } }
@-moz-keyframes waterDrop2 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 52%;
    left: -15%;
    transform: translate(15%, -52%);
    opacity: 1; }
  100% {
    top: 52%;
    left: -15%;
    transform: translate(15%, -52%);
    opacity: 0; } }
@-o-keyframes waterDrop2 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 52%;
    left: -15%;
    transform: translate(15%, -52%);
    opacity: 1; }
  100% {
    top: 52%;
    left: -15%;
    transform: translate(15%, -52%);
    opacity: 0; } }
@keyframes waterDrop2 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 52%;
    left: -15%;
    transform: translate(15%, -52%);
    opacity: 1; }
  100% {
    top: 52%;
    left: -15%;
    transform: translate(15%, -52%);
    opacity: 0; } }
.five.active .waterDrop3 {
  -webkit-animation: waterDrop3 1.5s infinite;
  -moz-animation: waterDrop3 1.5s infinite;
  -o-animation: waterDrop3 1.5s infinite;
  animation: waterDrop3 1.5s infinite;
  animation-delay: 1.7s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes waterDrop3 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 50%;
    left: 85%;
    transform: translate(-85%, -50%) rotate(-20deg);
    opacity: 1; }
  100% {
    top: 50%;
    left: 85%;
    transform: translate(-85%, -50%) rotate(-20deg);
    opacity: 0; } }
@-moz-keyframes waterDrop3 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 50%;
    left: 85%;
    transform: translate(-85%, -50%) rotate(-20deg);
    opacity: 1; }
  100% {
    top: 50%;
    left: 85%;
    transform: translate(-85%, -50%) rotate(-20deg);
    opacity: 0; } }
@-o-keyframes waterDrop3 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 50%;
    left: 85%;
    transform: translate(-85%, -50%) rotate(-20deg);
    opacity: 1; }
  100% {
    top: 50%;
    left: 85%;
    transform: translate(-85%, -50%) rotate(-20deg);
    opacity: 0; } }
@keyframes waterDrop3 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 50%;
    left: 85%;
    transform: translate(-85%, -50%) rotate(-20deg);
    opacity: 1; }
  100% {
    top: 50%;
    left: 85%;
    transform: translate(-85%, -50%) rotate(-20deg);
    opacity: 0; } }
.five.active .waterDrop4 {
  -webkit-animation: waterDrop4 1.5s infinite;
  -moz-animation: waterDrop4 1.5s infinite;
  -o-animation: waterDrop4 1.5s infinite;
  animation: waterDrop4 1.5s infinite;
  animation-delay: 1.7s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes waterDrop4 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 60%;
    left: 45%;
    transform: translate(-45%, -60%) rotate(-20deg);
    opacity: 1; }
  100% {
    top: 60%;
    left: 45%;
    transform: translate(-45%, -60%) rotate(-20deg);
    opacity: 0; } }
@-moz-keyframes waterDrop4 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 60%;
    left: 45%;
    transform: translate(-45%, -60%) rotate(-20deg);
    opacity: 1; }
  100% {
    top: 60%;
    left: 45%;
    transform: translate(-45%, -60%) rotate(-20deg);
    opacity: 0; } }
@-o-keyframes waterDrop4 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 60%;
    left: 45%;
    transform: translate(-45%, -60%) rotate(-20deg);
    opacity: 1; }
  100% {
    top: 60%;
    left: 45%;
    transform: translate(-45%, -60%) rotate(-20deg);
    opacity: 0; } }
@keyframes waterDrop4 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 60%;
    left: 45%;
    transform: translate(-45%, -60%) rotate(-20deg);
    opacity: 1; }
  100% {
    top: 60%;
    left: 45%;
    transform: translate(-45%, -60%) rotate(-20deg);
    opacity: 0; } }
.five.active .waterDrop5 {
  -webkit-animation: waterDrop5 1.5s infinite;
  -moz-animation: waterDrop5 1.5s infinite;
  -o-animation: waterDrop5 1.5s infinite;
  animation: waterDrop5 1.5s infinite;
  animation-delay: 1.8s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes waterDrop5 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 68%;
    left: -35%;
    transform: translate(35%, -68%);
    opacity: 1; }
  100% {
    top: 68%;
    left: -35%;
    transform: translate(35%, -68%);
    opacity: 0; } }
@-moz-keyframes waterDrop5 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 68%;
    left: -35%;
    transform: translate(35%, -68%);
    opacity: 1; }
  100% {
    top: 68%;
    left: -35%;
    transform: translate(35%, -68%);
    opacity: 0; } }
@-o-keyframes waterDrop5 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 68%;
    left: -35%;
    transform: translate(35%, -68%);
    opacity: 1; }
  100% {
    top: 68%;
    left: -35%;
    transform: translate(35%, -68%);
    opacity: 0; } }
@keyframes waterDrop5 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 68%;
    left: -35%;
    transform: translate(35%, -68%);
    opacity: 1; }
  100% {
    top: 68%;
    left: -35%;
    transform: translate(35%, -68%);
    opacity: 0; } }
.five.active .waterDrop6 {
  -webkit-animation: waterDrop6 1.5s infinite;
  -moz-animation: waterDrop6 1.5s infinite;
  -o-animation: waterDrop6 1.5s infinite;
  animation: waterDrop6 1.5s infinite;
  animation-delay: 1.8s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes waterDrop6 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 72%;
    left: 25%;
    transform: translate(-25%, -72%) rotate(-25deg);
    opacity: 1; }
  100% {
    top: 72%;
    left: 25%;
    transform: translate(-25%, -72%) rotate(-25deg);
    opacity: 0; } }
@-moz-keyframes waterDrop6 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 72%;
    left: 25%;
    transform: translate(-25%, -72%) rotate(-25deg);
    opacity: 1; }
  100% {
    top: 72%;
    left: 25%;
    transform: translate(-25%, -72%) rotate(-25deg);
    opacity: 0; } }
@-o-keyframes waterDrop6 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 72%;
    left: 25%;
    transform: translate(-25%, -72%) rotate(-25deg);
    opacity: 1; }
  100% {
    top: 72%;
    left: 25%;
    transform: translate(-25%, -72%) rotate(-25deg);
    opacity: 0; } }
@keyframes waterDrop6 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 72%;
    left: 25%;
    transform: translate(-25%, -72%) rotate(-25deg);
    opacity: 1; }
  100% {
    top: 72%;
    left: 25%;
    transform: translate(-25%, -72%) rotate(-25deg);
    opacity: 0; } }
.five.active .waterDrop7 {
  -webkit-animation: waterDrop7 1.5s infinite;
  -moz-animation: waterDrop7 1.5s infinite;
  -o-animation: waterDrop7 1.5s infinite;
  animation: waterDrop7 1.5s infinite;
  animation-delay: 1.9s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes waterDrop7 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 73%;
    left: 120%;
    transform: translate(-120%, -73%) rotate(-70deg);
    opacity: 1; }
  100% {
    top: 73%;
    left: 120%;
    transform: translate(-120%, -73%) rotate(-70deg);
    opacity: 0; } }
@-moz-keyframes waterDrop7 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 73%;
    left: 120%;
    transform: translate(-120%, -73%) rotate(-70deg);
    opacity: 1; }
  100% {
    top: 73%;
    left: 120%;
    transform: translate(-120%, -73%) rotate(-70deg);
    opacity: 0; } }
@-o-keyframes waterDrop7 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 73%;
    left: 120%;
    transform: translate(-120%, -73%) rotate(-70deg);
    opacity: 1; }
  100% {
    top: 73%;
    left: 120%;
    transform: translate(-120%, -73%) rotate(-70deg);
    opacity: 0; } }
@keyframes waterDrop7 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 73%;
    left: 120%;
    transform: translate(-120%, -73%) rotate(-70deg);
    opacity: 1; }
  100% {
    top: 73%;
    left: 120%;
    transform: translate(-120%, -73%) rotate(-70deg);
    opacity: 0; } }
.five.active .waterDrop8 {
  -webkit-animation: waterDrop8 1.5s infinite;
  -moz-animation: waterDrop8 1.5s infinite;
  -o-animation: waterDrop8 1.5s infinite;
  animation: waterDrop8 1.5s infinite;
  animation-delay: 2s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes waterDrop8 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 62%;
    left: 140%;
    transform: translate(-140%, -62%) rotate(-70deg);
    opacity: 1; }
  100% {
    top: 62%;
    left: 140%;
    transform: translate(-140%, -62%) rotate(-70deg);
    opacity: 0; } }
@-moz-keyframes waterDrop8 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 62%;
    left: 140%;
    transform: translate(-140%, -62%) rotate(-70deg);
    opacity: 1; }
  100% {
    top: 62%;
    left: 140%;
    transform: translate(-140%, -62%) rotate(-70deg);
    opacity: 0; } }
@-o-keyframes waterDrop8 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 62%;
    left: 140%;
    transform: translate(-140%, -62%) rotate(-70deg);
    opacity: 1; }
  100% {
    top: 62%;
    left: 140%;
    transform: translate(-140%, -62%) rotate(-70deg);
    opacity: 0; } }
@keyframes waterDrop8 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 62%;
    left: 140%;
    transform: translate(-140%, -62%) rotate(-70deg);
    opacity: 1; }
  100% {
    top: 62%;
    left: 140%;
    transform: translate(-140%, -62%) rotate(-70deg);
    opacity: 0; } }
.five.active .waterDrop9 {
  -webkit-animation: waterDrop9 1.5s infinite;
  -moz-animation: waterDrop9 1.5s infinite;
  -o-animation: waterDrop9 1.5s infinite;
  animation: waterDrop9 1.5s infinite;
  animation-delay: 2s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes waterDrop9 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 85%;
    left: -15%;
    transform: translate(15%, -85%) rotate(-50deg);
    opacity: 1; }
  100% {
    top: 85%;
    left: -15%;
    transform: translate(15%, -85%) rotate(-50deg);
    opacity: 0; } }
@-moz-keyframes waterDrop9 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 85%;
    left: -15%;
    transform: translate(15%, -85%) rotate(-50deg);
    opacity: 1; }
  100% {
    top: 85%;
    left: -15%;
    transform: translate(15%, -85%) rotate(-50deg);
    opacity: 0; } }
@-o-keyframes waterDrop9 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 85%;
    left: -15%;
    transform: translate(15%, -85%) rotate(-50deg);
    opacity: 1; }
  100% {
    top: 85%;
    left: -15%;
    transform: translate(15%, -85%) rotate(-50deg);
    opacity: 0; } }
@keyframes waterDrop9 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 85%;
    left: -15%;
    transform: translate(15%, -85%) rotate(-50deg);
    opacity: 1; }
  100% {
    top: 85%;
    left: -15%;
    transform: translate(15%, -85%) rotate(-50deg);
    opacity: 0; } }
.five.active .waterDrop10 {
  -webkit-animation: waterDrop10 1.5s infinite;
  -moz-animation: waterDrop10 1.5s infinite;
  -o-animation: waterDrop10 1.5s infinite;
  animation: waterDrop10 1.5s infinite;
  animation-delay: 2.1s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes waterDrop10 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 87%;
    left: 97%;
    transform: translate(-97%, -87%) rotate(-45deg);
    opacity: 1; }
  100% {
    top: 87%;
    left: 97%;
    transform: translate(-97%, -87%) rotate(-45deg);
    opacity: 0; } }
@-moz-keyframes waterDrop10 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 87%;
    left: 97%;
    transform: translate(-97%, -87%) rotate(-45deg);
    opacity: 1; }
  100% {
    top: 87%;
    left: 97%;
    transform: translate(-97%, -87%) rotate(-45deg);
    opacity: 0; } }
@-o-keyframes waterDrop10 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 87%;
    left: 97%;
    transform: translate(-97%, -87%) rotate(-45deg);
    opacity: 1; }
  100% {
    top: 87%;
    left: 97%;
    transform: translate(-97%, -87%) rotate(-45deg);
    opacity: 0; } }
@keyframes waterDrop10 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 87%;
    left: 97%;
    transform: translate(-97%, -87%) rotate(-45deg);
    opacity: 1; }
  100% {
    top: 87%;
    left: 97%;
    transform: translate(-97%, -87%) rotate(-45deg);
    opacity: 0; } }
.five.active .waterDrop11 {
  -webkit-animation: waterDrop11 1.5s infinite;
  -moz-animation: waterDrop11 1.5s infinite;
  -o-animation: waterDrop11 1.5s infinite;
  animation: waterDrop11 1.5s infinite;
  animation-delay: 2.2s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes waterDrop11 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 87%;
    left: 180%;
    transform: translate(-180%, -87%) rotate(-50deg);
    opacity: 1; }
  100% {
    top: 87%;
    left: 180%;
    transform: translate(-180%, -87%) rotate(-50deg);
    opacity: 0; } }
@-moz-keyframes waterDrop11 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 87%;
    left: 180%;
    transform: translate(-180%, -87%) rotate(-50deg);
    opacity: 1; }
  100% {
    top: 87%;
    left: 180%;
    transform: translate(-180%, -87%) rotate(-50deg);
    opacity: 0; } }
@-o-keyframes waterDrop11 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 87%;
    left: 180%;
    transform: translate(-180%, -87%) rotate(-50deg);
    opacity: 1; }
  100% {
    top: 87%;
    left: 180%;
    transform: translate(-180%, -87%) rotate(-50deg);
    opacity: 0; } }
@keyframes waterDrop11 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 87%;
    left: 180%;
    transform: translate(-180%, -87%) rotate(-50deg);
    opacity: 1; }
  100% {
    top: 87%;
    left: 180%;
    transform: translate(-180%, -87%) rotate(-50deg);
    opacity: 0; } }
.five.active .waterDrop12 {
  -webkit-animation: waterDrop12 1.5s infinite;
  -moz-animation: waterDrop12 1.5s infinite;
  -o-animation: waterDrop12 1.5s infinite;
  animation: waterDrop12 1.5s infinite;
  animation-delay: 2.2s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes waterDrop12 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 75%;
    left: 240%;
    transform: translate(-240%, -75%) rotate(-50deg);
    opacity: 1; }
  100% {
    top: 75%;
    left: 240%;
    transform: translate(-240%, -75%) rotate(-50deg);
    opacity: 0; } }
@-moz-keyframes waterDrop12 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 75%;
    left: 240%;
    transform: translate(-240%, -75%) rotate(-50deg);
    opacity: 1; }
  100% {
    top: 75%;
    left: 240%;
    transform: translate(-240%, -75%) rotate(-50deg);
    opacity: 0; } }
@-o-keyframes waterDrop12 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 75%;
    left: 240%;
    transform: translate(-240%, -75%) rotate(-50deg);
    opacity: 1; }
  100% {
    top: 75%;
    left: 240%;
    transform: translate(-240%, -75%) rotate(-50deg);
    opacity: 0; } }
@keyframes waterDrop12 {
  0% {
    top: 25%;
    left: 25%;
    transform: unset; }
  95% {
    top: 75%;
    left: 240%;
    transform: translate(-240%, -75%) rotate(-50deg);
    opacity: 1; }
  100% {
    top: 75%;
    left: 240%;
    transform: translate(-240%, -75%) rotate(-50deg);
    opacity: 0; } }
@keyframes fanRotate {
  0% {
    transform: translate(-50%, -50%) rotate(0); }
  25% {
    transform: translate(-59%, -57%) rotate(90deg); }
  50% {
    transform: translate(-48%, -63%) rotate(180deg); }
  75% {
    transform: translate(-39%, -56%) rotate(270deg); }
  100% {
    transform: translate(-50%, -50%) rotate(360deg); } }
.six .forage,
.six .gmoFree {
  display: block;
  position: absolute;
  top: 0;
  right: -100vw; }
  .six .forage:before,
  .six .gmoFree:before {
    display: block; }
.six .forage {
  width: 200px;
  height: 155px; }
  @media (min-width: 768px) {
    .six .forage {
      width: 376px;
      height: 296px; } }
  .six .forage .hay {
    position: absolute;
    top: 0;
    left: 5%;
    transform: translate(-4%, 0);
    width: 75%;
    z-index: 1; }
    .six .forage .hay:before {
      content: url("../images/hay.svg"); }
  .six .forage .filament {
    position: absolute;
    top: 18%;
    left: 21%;
    transform: translate(-21%, -18%);
    width: 60%;
    z-index: 2; }
    .six .forage .filament:before {
      content: url("../images/filament.svg"); }
  .six .forage .bowl {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100%; }
    .six .forage .bowl:before {
      content: url("../images/bowl.svg"); }
.six .gmoFree {
  width: 80px;
  z-index: 2; }
  @media (min-width: 768px) {
    .six .gmoFree {
      width: 135px; } }
  .six .gmoFree:before {
    content: url("../images/gmoFree.svg"); }
.six.active .forage {
  -webkit-animation: forage 1s forwards;
  -moz-animation: forage 1s forwards;
  -o-animation: forage 1s forwards;
  animation: forage 1s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes forage {
  0% {
    top: 55%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    right: 50%;
    transform: translate(50%, 0); } }
@-moz-keyframes forage {
  0% {
    top: 55%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    right: 50%;
    transform: translate(50%, 0); } }
@-o-keyframes forage {
  0% {
    top: 55%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    right: 50%;
    transform: translate(50%, 0); } }
@keyframes forage {
  0% {
    top: 55%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    right: 50%;
    transform: translate(50%, 0); } }
.six.active .gmoFree {
  animation: gmoFree 1s forwards;
  animation-delay: 1s; }
@keyframes gmoFree {
  0% {
    top: 10%;
    left: -25%;
    transform: translate(25%, -10%) scale(2);
    opacity: 0; }
  100% {
    top: 10%;
    left: -25%;
    transform: translate(25%, -10%) scale(1);
    opacity: 1; } }
.six.active .filament {
  animation: filament 1.5s infinite;
  animation-delay: 1s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }

@keyframes filament {
  0% {
    transform: translate(-21%, -18%) rotate(0deg); }
  25% {
    transform: translate(-21%, -18%) rotate(1deg); }
  50% {
    transform: translate(-21%, -18%) rotate(0deg); }
  75% {
    transform: translate(-21%, -18%) rotate(-1deg); }
  100% {
    transform: translate(-21%, -18%) rotate(0deg); } }
.seven .cowDugDropBucket {
  display: block;
  position: absolute;
  top: 0;
  left: -100vw; }
  .seven .cowDugDropBucket:before {
    display: block; }
.seven .cowDugDropBucket {
  width: 150px;
  height: 221px; }
  @media (min-width: 576px) {
    .seven .cowDugDropBucket {
      width: 216px;
      height: 325px; } }
  .seven .cowDugDropBucket .milkBucket {
    position: absolute;
    top: 0;
    width: 100%; }
    .seven .cowDugDropBucket .milkBucket:before {
      content: url("../images/milkBucket.svg"); }
  .seven .cowDugDropBucket .milkDrop {
    position: absolute;
    width: 15%;
    top: 40%;
    left: 60%;
    transform: translate(-60%, -40%);
    opacity: 0; }
    .seven .cowDugDropBucket .milkDrop:before {
      content: url("../images/milkDrop.svg"); }
  .seven .cowDugDropBucket .wave {
    position: absolute;
    opacity: 0;
    top: 65%;
    left: 60%;
    transform: translate(-60%, -65%);
    width: 2px;
    height: 1px;
    border: #d9dde0 7px solid;
    border-radius: 50%; }
.seven.active .cowDugDropBucket {
  -webkit-animation: cowDugDropBucket 1s forwards;
  -moz-animation: cowDugDropBucket 1s forwards;
  -o-animation: cowDugDropBucket 1s forwards;
  animation: cowDugDropBucket 1s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes cowDugDropBucket {
  0% {
    top: 55%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    left: 50%;
    transform: translate(-50%, 0); } }
@-moz-keyframes cowDugDropBucket {
  0% {
    top: 55%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    left: 50%;
    transform: translate(-50%, 0); } }
@-o-keyframes cowDugDropBucket {
  0% {
    top: 55%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    left: 50%;
    transform: translate(-50%, 0); } }
@keyframes cowDugDropBucket {
  0% {
    top: 55%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    left: 50%;
    transform: translate(-50%, 0); } }
.seven.active .milk {
  width: 71px;
  height: 40px;
  background: #FFF;
  border-radius: 50%;
  position: absolute;
  top: 65%;
  left: 65%;
  transform: translate(-65%, -65%);
  perspective: 200px;
  transform-style: preserve-3d; }
  @media (min-width: 576px) {
    .seven.active .milk {
      width: 105px;
      height: 63px; } }
.seven.active .milkDrop {
  animation: milkDrop 2s infinite;
  animation-delay: 1s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes milkDrop {
  0% {
    top: 40%;
    left: 60%;
    transform: translate(-60%, -40%) scale(0.5);
    opacity: 0; }
  90% {
    top: 60%;
    left: 60%;
    transform: translate(-60%, -60%) scale(1);
    opacity: 1; }
  100% {
    top: 65%;
    left: 60%;
    transform: translate(-60%, -65%) scale(0.8);
    opacity: 0; } }
.seven.active .wave {
  animation: ripple 2s infinite;
  animation-delay: 3s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes ripple {
  0% {
    opacity: 1;
    top: 65%;
    left: 60%;
    transform: translate(-60%, -65%); }
  100% {
    width: 110px;
    height: 67px;
    border-width: 1px;
    opacity: 0;
    top: 65%;
    left: 63%;
    transform: translate(-63%, -70%); } }
  @media (min-width: 576px) {
    @keyframes ripple {
      0% {
        opacity: 1;
        top: 65%;
        left: 60%;
        transform: translate(-60%, -65%); }
      100% {
        width: 75px;
        height: 45px;
        border-width: 1px;
        opacity: 0;
        top: 65%;
        left: 63%;
        transform: translate(-63%, -70%); } } }

.eight .cowWalking {
  display: block;
  position: absolute;
  top: 0;
  right: -100vw; }
  .eight .cowWalking:before {
    display: block; }
.eight .cowWalking {
  width: 290px;
  height: 230px;
  overflow: hidden; }
  @media (min-width: 576px) {
    .eight .cowWalking {
      width: 376px;
      height: 325px; } }
  .eight .cowWalking .cow {
    position: absolute;
    width: 75%;
    top: 40%;
    left: 2%;
    transform: translate(0, -40%);
    z-index: 2; }
    .eight .cowWalking .cow:before {
      content: url("../images/walkingCow.svg"); }
  .eight .cowWalking .sidewalk1 {
    z-index: 1;
    position: absolute;
    width: 100%;
    bottom: 0; }
    .eight .cowWalking .sidewalk1:before {
      content: url("../images/sidewalkEmpty.svg"); }
    .eight .cowWalking .sidewalk1 .walkingShadow {
      position: absolute;
      bottom: 31px;
      right: 4px;
      width: 48%;
      height: 26px;
      transform: rotate(-30deg);
      background: #84ba3f;
      z-index: 1; }
      @media (min-width: 576px) {
        .eight .cowWalking .sidewalk1 .walkingShadow {
          bottom: 39px;
          right: 10px;
          width: 46%;
          height: 29px; } }
    .eight .cowWalking .sidewalk1 .walkingSide {
      position: absolute;
      bottom: 37px;
      right: 32px;
      background: #b23516;
      transform: skew(0deg, -30deg);
      width: 39%;
      height: 13px;
      z-index: 1; }
      @media (min-width: 576px) {
        .eight .cowWalking .sidewalk1 .walkingSide {
          bottom: 49px;
          right: 41px; } }
    .eight .cowWalking .sidewalk1 .hiddenBox {
      z-index: 1;
      width: 70%;
      position: absolute;
      top: -126px;
      left: -80px;
      background: #9fcc3b;
      height: 170px;
      transform: rotate(-30deg); }
    .eight .cowWalking .sidewalk1 .hiddenBox2 {
      z-index: 1;
      width: 65%;
      position: absolute;
      bottom: -90px;
      right: -82px;
      background: #9fcc3b;
      height: 145px;
      transform: rotate(-30deg); }
      @media (min-width: 576px) {
        .eight .cowWalking .sidewalk1 .hiddenBox2 {
          width: 65%;
          bottom: -80px;
          right: -60px;
          height: 127px; } }
    .eight .cowWalking .sidewalk1 .hiddenBox3 {
      z-index: 1;
      position: absolute;
      background: #9fcc3b;
      height: 20px;
      transform: rotate(-1deg);
      width: 11%;
      bottom: -14px;
      right: 113px; }
      @media (min-width: 576px) {
        .eight .cowWalking .sidewalk1 .hiddenBox3 {
          bottom: -15px;
          right: 150px; } }
    .eight .cowWalking .sidewalk1 .line1,
    .eight .cowWalking .sidewalk1 .line11,
    .eight .cowWalking .sidewalk1 .line22,
    .eight .cowWalking .sidewalk1 .line2 {
      position: absolute;
      width: 188px;
      height: 100%; }
      .eight .cowWalking .sidewalk1 .line1:before,
      .eight .cowWalking .sidewalk1 .line11:before,
      .eight .cowWalking .sidewalk1 .line22:before,
      .eight .cowWalking .sidewalk1 .line2:before {
        content: url("../images/line1.svg"); }
    .eight .cowWalking .sidewalk1 .line1 {
      top: 20px;
      left: 136px; }
      @media (min-width: 576px) {
        .eight .cowWalking .sidewalk1 .line1 {
          top: 7px; } }
    .eight .cowWalking .sidewalk1 .line11 {
      top: -98px;
      left: -44px; }
      @media (min-width: 576px) {
        .eight .cowWalking .sidewalk1 .line11 {
          top: -85px; } }
    .eight .cowWalking .sidewalk1 .line2 {
      top: 66px;
      left: 9px; }
      @media (min-width: 576px) {
        .eight .cowWalking .sidewalk1 .line2 {
          top: 79px; } }
    .eight .cowWalking .sidewalk1 .line22 {
      top: -39px;
      left: -171px; }
      @media (min-width: 576px) {
        .eight .cowWalking .sidewalk1 .line22 {
          top: -26px; } }
    .eight .cowWalking .sidewalk1 .line,
    .eight .cowWalking .sidewalk1 .linee {
      position: absolute;
      width: 188px;
      height: 100%; }
      .eight .cowWalking .sidewalk1 .line:before,
      .eight .cowWalking .sidewalk1 .linee:before {
        content: url("../images/line.svg"); }
    .eight .cowWalking .sidewalk1 .line {
      top: 42px;
      left: 71px; }
    .eight .cowWalking .sidewalk1 .linee {
      top: -62px;
      left: -108px; }
.eight.active .cowWalking {
  -webkit-animation: cowWalking 1s forwards;
  -moz-animation: cowWalking 1s forwards;
  -o-animation: cowWalking 1s forwards;
  animation: cowWalking 1s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes cowWalking {
  0% {
    top: 55%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    right: 50%;
    transform: translate(50%, 0); } }
@-moz-keyframes cowWalking {
  0% {
    top: 55%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    right: 50%;
    transform: translate(50%, 0); } }
@-o-keyframes cowWalking {
  0% {
    top: 55%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    right: 50%;
    transform: translate(50%, 0); } }
@keyframes cowWalking {
  0% {
    top: 55%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    right: 50%;
    transform: translate(50%, 0); } }
.eight.active .line1 {
  animation: line1 3s infinite;
  animation-delay: 1s;
  animation-timing-function: linear; }
@keyframes line1 {
  0% {
    top: 20px;
    left: 136px; }
  100% {
    top: 124px;
    left: 318px; } }
  @media (min-width: 576px) {
    @keyframes line1 {
      0% {
        top: 7px;
        left: 136px; }
      100% {
        top: 111px;
        left: 318px; } } }
.eight.active .line11 {
  animation: line11 3s infinite;
  animation-delay: 1s;
  animation-timing-function: linear; }
@keyframes line11 {
  0% {
    top: -85px;
    left: -44px; }
  100% {
    top: 20px;
    left: 136px; } }
  @media (min-width: 576px) {
    @keyframes line11 {
      0% {
        top: -98px;
        left: -44px; }
      100% {
        top: 7px;
        left: 136px; } } }
.eight.active .line {
  animation: line 3s infinite;
  animation-delay: 1s;
  animation-timing-function: linear; }
@keyframes line {
  0% {
    top: 42px;
    left: 71px; }
  100% {
    top: 148px;
    left: 254px; } }
.eight.active .linee {
  animation: linee 3s infinite;
  animation-delay: 1s;
  animation-timing-function: linear; }
@keyframes linee {
  0% {
    top: -62px;
    left: -108px; }
  100% {
    top: 42px;
    left: 71px; } }
.eight.active .line2 {
  animation: line2 3s infinite;
  animation-delay: 1s;
  animation-timing-function: linear; }
@keyframes line2 {
  0% {
    top: 66px;
    left: 9px; }
  100% {
    top: 171px;
    left: 190px; } }
  @media (min-width: 576px) {
    @keyframes line2 {
      0% {
        top: 79px;
        left: 9px; }
      100% {
        top: 184px;
        left: 190px; } } }
.eight.active .line22 {
  animation: line22 3s infinite;
  animation-delay: 1s;
  animation-timing-function: linear; }
@keyframes line22 {
  0% {
    top: -39px;
    left: -171px; }
  100% {
    top: 66px;
    left: 9px; } }
  @media (min-width: 576px) {
    @keyframes line22 {
      0% {
        top: -26px;
        left: -171px; }
      100% {
        top: 79px;
        left: 9px; } } }

.nine .cowManager {
  display: block;
  position: absolute;
  top: 0;
  left: -100vw; }
  .nine .cowManager:before {
    display: block; }
.nine .cowManager {
  width: 290px; }
  @media (min-width: 576px) {
    .nine .cowManager {
      width: 583px; } }
  .nine .cowManager:before {
    content: url("../images/cowManager.svg"); }
  .nine .cowManager .fill {
    position: absolute;
    top: 44%;
    left: 9px;
    transform: translate(-7%, -44%);
    background: #fdb914;
    width: 4px;
    height: 0; }
    @media (min-width: 576px) {
      .nine .cowManager .fill {
        left: 18px;
        transform: translate(0, -44%);
        width: 7px; } }
  .nine .cowManager .fill2 {
    position: absolute;
    top: 63%;
    left: 35px;
    transform: translate(0, -63%) rotateY(32deg);
    background: #61bd61;
    width: 4px;
    height: 0; }
    @media (min-width: 576px) {
      .nine .cowManager .fill2 {
        left: 71px;
        transform: translate(0, -63%) rotateY(32deg);
        width: 8px; } }
  .nine .cowManager .fill3 {
    position: absolute;
    top: 63%;
    left: 62px;
    transform: translate(0, -63%) rotateY(18deg);
    background: #f47d21;
    width: 4px;
    height: 0; }
    @media (min-width: 576px) {
      .nine .cowManager .fill3 {
        left: 125px;
        transform: translate(0, -63%) rotateY(18deg);
        width: 7px; } }
  .nine .cowManager .data {
    position: absolute;
    top: 63%;
    left: 6.2%;
    transform: translate(-3.2%, -63%);
    width: 1%;
    height: 2.5%;
    background: #fdb914;
    border-radius: 50%;
    opacity: 0; }
  .nine .cowManager .data2 {
    position: absolute;
    top: 74%;
    left: 16%;
    transform: translate(-30%, -64%);
    width: 1%;
    height: 2.5%;
    background: #61bd61;
    border-radius: 50%;
    opacity: 0; }
  .nine .cowManager .data3 {
    position: absolute;
    top: 85%;
    left: 25%;
    transform: translate(-30%, -40%);
    width: 1%;
    height: 2.5%;
    background: #f47d21;
    border-radius: 50%;
    opacity: 0; }
  .nine .cowManager .box {
    position: absolute;
    top: 28%;
    left: 20.6%;
    transform: translate(-16%, -16%) skew(0deg, 30deg);
    width: 3.6%;
    height: 15%;
    background: #01b9f2; }
  .nine .cowManager .box2 {
    position: absolute;
    top: 39%;
    left: 29.6%;
    transform: translate(-16%, -16%) skew(0deg, 30deg);
    width: 3.7%;
    height: 15%;
    background: #01b9f2; }
  .nine .cowManager .box3 {
    position: absolute;
    top: 51%;
    left: 39%;
    transform: translate(-18%, -16%) skew(0deg, 30deg);
    width: 3.7%;
    height: 15%;
    background: #01b9f2; }
.nine.active .cowManager {
  -webkit-animation: cowManager 1s forwards;
  -moz-animation: cowManager 1s forwards;
  -o-animation: cowManager 1s forwards;
  animation: cowManager 1s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes cowManager {
  0% {
    top: 55%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 68%;
    left: 50%;
    transform: translate(-50%, 0); } }
@-moz-keyframes cowManager {
  0% {
    top: 55%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 68%;
    left: 50%;
    transform: translate(-50%, 0); } }
@-o-keyframes cowManager {
  0% {
    top: 55%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 68%;
    left: 50%;
    transform: translate(-50%, 0); } }
@keyframes cowManager {
  0% {
    top: 55%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 68%;
    left: 50%;
    transform: translate(-50%, 0); } }
  @media (min-width: 576px) {
    .nine.active .cowManager {
      -webkit-animation: cowManager 1s forwards;
      -moz-animation: cowManager 1s forwards;
      -o-animation: cowManager 1s forwards;
      animation: cowManager 1s forwards;
      animation-delay: 0s;
      animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
    @-webkit-keyframes cowManager {
      0% {
        top: 55%;
        left: -100vw;
        transform: unset; }
      100% {
        top: 55%;
        left: 50%;
        transform: translate(-50%, 0); } }
    @-moz-keyframes cowManager {
      0% {
        top: 55%;
        left: -100vw;
        transform: unset; }
      100% {
        top: 55%;
        left: 50%;
        transform: translate(-50%, 0); } }
    @-o-keyframes cowManager {
      0% {
        top: 55%;
        left: -100vw;
        transform: unset; }
      100% {
        top: 55%;
        left: 50%;
        transform: translate(-50%, 0); } }
    @keyframes cowManager {
      0% {
        top: 55%;
        left: -100vw;
        transform: unset; }
      100% {
        top: 55%;
        left: 50%;
        transform: translate(-50%, 0); } } }
.nine.active .fill {
  animation: fill 4s infinite;
  animation-delay: 1.5s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes fill {
  0% {
    height: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
  25% {
    height: 18%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px; }
  50% {
    height: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
  75% {
    height: 18%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px; }
  100% {
    height: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0; } }
.nine.active .fill2 {
  animation: fill2 4s infinite;
  animation-delay: 1.5s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes fill2 {
  0% {
    height: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
  25% {
    height: 28%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px; }
  50% {
    height: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
  75% {
    height: 28%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px; }
  100% {
    height: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0; } }
.nine.active .fill3 {
  animation: fill3 4s infinite;
  animation-delay: 1.5s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes fill3 {
  0% {
    height: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
  25% {
    height: 8%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px; }
  50% {
    height: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
  75% {
    height: 8%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px; }
  100% {
    height: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0; } }
.nine.active .data {
  animation: data 1s infinite;
  animation-delay: 1s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes data {
  0% {
    position: absolute;
    top: 63%;
    left: 6.2%;
    transform: translate(-3.2%, -63%);
    width: 1%;
    height: 2.5%;
    background: #fdb914;
    border-radius: 50%;
    opacity: 0; }
  1% {
    opacity: 1; }
  99% {
    position: absolute;
    top: 45%;
    left: 21%;
    transform: translate(-22%, -59%);
    width: 1%;
    height: 2.5%;
    background: #fdb914;
    border-radius: 50%; }
  100% {
    opacity: 0; } }
.nine.active .data2 {
  animation: data2 1s infinite;
  animation-delay: 1s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes data2 {
  0% {
    position: absolute;
    top: 74%;
    left: 16%;
    transform: translate(-30%, -64%);
    width: 1%;
    height: 2.5%;
    background: #61bd61;
    border-radius: 50%;
    opacity: 0; }
  1% {
    opacity: 1; }
  99% {
    position: absolute;
    top: 56%;
    left: 30%;
    transform: translate(0%, -56%);
    width: 1%;
    height: 2.5%;
    background: #61bd61;
    border-radius: 50%; }
  100% {
    opacity: 0; } }
.nine.active .data3 {
  animation: data3 1s infinite;
  animation-delay: 1s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes data3 {
  0% {
    position: absolute;
    top: 85%;
    left: 25%;
    transform: translate(-30%, -40%);
    width: 1%;
    height: 2.5%;
    background: #f47d21;
    border-radius: 50%;
    opacity: 0; }
  1% {
    opacity: 1; }
  99% {
    position: absolute;
    top: 66%;
    left: 40%;
    transform: translate(-40%, -10%);
    width: 1%;
    height: 2.5%;
    background: #f47d21;
    border-radius: 50%; }
  100% {
    opacity: 0; } }
.nine.active .box {
  animation: bg 3.5s infinite;
  animation-delay: 1s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes bg {
  0% {
    background-color: #01b9f2; }
  25% {
    background-color: #61bd61; }
  50% {
    background-color: #f47d21; }
  75% {
    background-color: #01b9f2; }
  100% {
    background-color: #fdb914; } }
.nine.active .box2 {
  animation: box2 3.5s infinite;
  animation-delay: 1s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes box2 {
  0% {
    background: #01b9f2; }
  25% {
    background: #fdb914; }
  50% {
    background: #f47d21; }
  75% {
    background: #01b9f2; }
  100% {
    background: #61bd61; } }
.nine.active .box3 {
  animation: box3 3.5s infinite;
  animation-delay: 1s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes box3 {
  0% {
    background: #01b9f2; }
  25% {
    background: #fdb914; }
  50% {
    background: #61bd61; }
  75% {
    background: #01b9f2; }
  100% {
    background: #f47d21; } }
.ten .milkCarton {
  display: block;
  position: absolute;
  top: 0;
  right: -100vw; }
  .ten .milkCarton:before {
    display: block; }
.ten .milkCarton {
  width: 200px;
  height: 198px; }
  @media (min-width: 576px) {
    .ten .milkCarton {
      width: 310px;
      height: 306px; } }
  .ten .milkCarton .milkCartonBase {
    position: absolute;
    width: 76%;
    top: 15%;
    left: 100%;
    transform: translate(-100%, -15%); }
    .ten .milkCarton .milkCartonBase:before {
      content: url("../images/milkCartonBase.svg"); }
  .ten .milkCarton .plant {
    position: absolute;
    width: 24%;
    top: 70%;
    left: 0;
    transform: translate(0, -70%);
    transform-origin: bottom; }
    .ten .milkCarton .plant:before {
      content: url("../images/plant.svg"); }
  .ten .milkCarton .explodedMilkCartonFirst {
    position: absolute;
    width: 35%;
    top: 97%;
    left: 72%;
    transform: translate(-72%, -97%); }
    .ten .milkCarton .explodedMilkCartonFirst:before {
      content: url("../images/explodedMilkCartonFirst.svg"); }
  .ten .milkCarton .explodedMilkCartonSecond {
    position: absolute;
    width: 45%;
    top: 98.5%;
    left: 79%;
    transform: translate(-72%, -98.5%); }
    .ten .milkCarton .explodedMilkCartonSecond:before {
      content: url("../images/explodedMilkCartonSecond.svg"); }
.ten.active .milkCarton {
  -webkit-animation: milkCarton 1s forwards;
  -moz-animation: milkCarton 1s forwards;
  -o-animation: milkCarton 1s forwards;
  animation: milkCarton 1s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes milkCarton {
  0% {
    top: 55%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    right: 50%;
    transform: translate(50%, 0); } }
@-moz-keyframes milkCarton {
  0% {
    top: 55%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    right: 50%;
    transform: translate(50%, 0); } }
@-o-keyframes milkCarton {
  0% {
    top: 55%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    right: 50%;
    transform: translate(50%, 0); } }
@keyframes milkCarton {
  0% {
    top: 55%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    right: 50%;
    transform: translate(50%, 0); } }
.ten.active .plant {
  animation: plant 2s infinite;
  animation-delay: 1.5s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes plant {
  0%, 100% {
    top: 70%;
    left: 0;
    transform: translate(0, -70%); }
  50% {
    top: 70%;
    left: 0;
    transform: translate(0, -70%) rotate(-4deg); } }
.ten.active .explodedMilkCartonFirst {
  animation: explodedMilkCartonFirst 3s infinite;
  animation-delay: 1.5s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes explodedMilkCartonFirst {
  0%, 25%, 100% {
    top: 97%;
    left: 72%;
    transform: translate(-72%, -97%); }
  50%, 75% {
    top: 97%;
    left: 105%;
    transform: translate(-105%, -97%); } }
.ten.active .explodedMilkCartonSecond {
  animation: explodedMilkCartonSecond 3s infinite;
  animation-delay: 1.5s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes explodedMilkCartonSecond {
  0%, 25%, 100% {
    top: 98.5%;
    left: 79%;
    transform: translate(-72%, -98.5%); }
  50%, 75% {
    top: 98.5%;
    left: 160%;
    transform: translate(-160%, -98.5%); } }
.eleven .szegedCathedral {
  display: block;
  position: absolute;
  top: 0;
  left: -100vw; }
  .eleven .szegedCathedral:before {
    display: block; }
.eleven .szegedCathedral {
  width: 200px;
  height: 228px; }
  @media (min-width: 576px) {
    .eleven .szegedCathedral {
      width: 282px;
      height: 319px; } }
  .eleven .szegedCathedral .cathedral {
    position: absolute;
    width: 45%;
    top: 0;
    left: 0;
    z-index: 1; }
    .eleven .szegedCathedral .cathedral:before {
      content: url("../images/cathedral.svg"); }
  .eleven .szegedCathedral .cathedralShadow {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0; }
    .eleven .szegedCathedral .cathedralShadow:before {
      content: url("../images/cathedralShadow.svg"); }
  .eleven .szegedCathedral .hungarianProduct {
    position: absolute;
    width: 37%;
    top: 9%;
    right: 0;
    transform: translate(0, -9%);
    transform-origin: bottom; }
    .eleven .szegedCathedral .hungarianProduct:before {
      content: url("../images/hungarianProduct.svg"); }
.eleven.active .szegedCathedral {
  -webkit-animation: szegedCathedral 1.5s forwards;
  -moz-animation: szegedCathedral 1.5s forwards;
  -o-animation: szegedCathedral 1.5s forwards;
  animation: szegedCathedral 1.5s forwards;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes szegedCathedral {
  0% {
    top: 55%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    left: 50%;
    transform: translate(-50%, 0); } }
@-moz-keyframes szegedCathedral {
  0% {
    top: 55%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    left: 50%;
    transform: translate(-50%, 0); } }
@-o-keyframes szegedCathedral {
  0% {
    top: 55%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    left: 50%;
    transform: translate(-50%, 0); } }
@keyframes szegedCathedral {
  0% {
    top: 55%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 55%;
    left: 50%;
    transform: translate(-50%, 0); } }
.eleven.active .hungarianProduct {
  animation: hungarianProduct 1.5s infinite linear;
  animation-delay: 1.5s;
  animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes hungarianProduct {
  0%, 10%, 20%, 100% {
    top: 9%;
    right: 0;
    transform: translate(0, -9%) rotate(0); }
  5% {
    top: 9%;
    right: 0;
    transform: translate(0, -9%) rotate(5deg); }
  15% {
    top: 9%;
    right: 0;
    transform: translate(0, -9%) rotate(-5deg); } }
.twelve {
  background: url("../images/codexBG.svg");
  background-position: center; }
  .twelve .book {
    transform-style: preserve-3d;
    height: 318px;
    width: 237px;
    cursor: pointer;
    backface-visibility: visible;
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translate(-50%, 0); }
    @media (min-width: 576px) {
      .twelve .book {
        height: 710px;
        width: 475px; } }
    .twelve .book:before {
      display: block; }
  .twelve .front, .twelve .back, .twelve .page1, .twelve .page2, .twelve .page3, .twelve .page4, .twelve .page5, .twelve .page6 {
    transform-style: preserve-3d;
    position: absolute;
    width: 237px;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: left center;
    transition: transform .5s ease-in-out, box-shadow .35s ease-in-out;
    max-height: 638px; }
    @media (min-width: 576px) {
      .twelve .front, .twelve .back, .twelve .page1, .twelve .page2, .twelve .page3, .twelve .page4, .twelve .page5, .twelve .page6 {
        width: 475px; } }
  .twelve .front:before {
    content: url("../images/codex.svg"); }
  .twelve .front:after {
    background: url("../images/codexCover.svg");
    position: absolute;
    right: 0;
    background-size: 100%;
    content: '';
    width: 217px;
    height: 281px; }
    @media (min-width: 576px) {
      .twelve .front:after {
        width: 433px;
        height: 565px; } }
  .twelve .back {
    background: #018993; }
  .twelve .front, .twelve .page1, .twelve .page3, .twelve .page5 {
    border-bottom-right-radius: 27px;
    border-top-right-radius: 27px;
    border-top-left-radius: 27px;
    border-bottom-left-radius: 27px; }
  .twelve .back, .twelve .page2, .twelve .page4, .twelve .page6 {
    border-bottom-right-radius: 27px;
    border-top-right-radius: 27px;
    border-top-left-radius: 27px;
    border-bottom-left-radius: 27px; }
  .twelve .book.open .front, .twelve .book.open .page1, .twelve .book.open .page3, .twelve .book.open .page5 {
    border-bottom-right-radius: 27px;
    border-top-right-radius: 27px;
    border-top-left-radius: unset;
    border-bottom-left-radius: unset; }
  .twelve .book.open .back, .twelve .book.open .page2, .twelve .book.open .page4, .twelve .book.open .page6 {
    border-bottom-right-radius: 27px;
    border-top-right-radius: 27px;
    border-top-left-radius: unset;
    border-bottom-left-radius: unset; }
  .twelve .book.open .front {
    transform: rotateY(-160deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, 0.2);
    background: #018993; }
    .twelve .book.open .front:before {
      content: ''; }
    .twelve .book.open .front:after {
      content: '';
      background: unset; }
  .twelve .book.open .page1 {
    transform: rotateY(-150deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, 0.2); }
  .twelve .book.open .page2 {
    transform: rotateY(-30deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, 0.2); }
  .twelve .book.open .page3 {
    transform: rotateY(-140deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, 0.2); }
  .twelve .book.open .page4 {
    transform: rotateY(-40deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, 0.2); }
  .twelve .book.open .page5 {
    transform: rotateY(-130deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, 0.2); }
  .twelve .book.open .page6 {
    transform: rotateY(-50deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, 0.2); }
  .twelve .book.open .back {
    transform: rotateY(-20deg) scale(1.1); }
  .twelve .book.open .page1 {
    background: #efefef; }
  .twelve .book.open .page2 {
    background: #efefef; }
  .twelve .book.open .page3 {
    background: #f5f5f5; }
  .twelve .book.open .page4 {
    background: #f5f5f5; }
  .twelve .book.open .page5 {
    background: #fafafa; }
  .twelve .book.open .page6 {
    background: #fdfdfd; }
  .twelve .grass {
    display: block;
    position: absolute;
    width: 100%;
    height: 50vh;
    bottom: -100%;
    left: 0; }
    @media (min-width: 576px) {
      .twelve .grass {
        height: 60vh; } }
    .twelve .grass:before {
      background: url("../images/grass.svg");
      content: '';
      width: 100%;
      height: 100%;
      display: block; }
  .twelve.active .book {
    animation: codex 0.4s forwards;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
    .twelve.active .book.open {
      animation: moveBook 0.5s forwards;
      animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes codex {
  0% {
    top: -100%;
    left: 50%;
    transform: translate(-50%, 0); }
  100% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); } }
@keyframes moveBook {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  100% {
    top: 50%;
    left: 65%;
    transform: translate(-65%, -50%); } }
  .twelve.active .grass {
    animation: grass 0.4s forwards;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes grass {
  0% {
    bottom: -100%;
    left: 0; }
  100% {
    bottom: -20%;
    left: 0; } }
.thirteen {
  background: white; }
  .thirteen .grass {
    display: block;
    position: absolute;
    width: 100%;
    height: 42vh;
    top: -29%;
    left: 0;
    background-color: #9fcc3b;
    z-index: 1; }
    @media (min-width: 375px) {
      .thirteen .grass {
        height: 34vh;
        top: -29%; } }
    @media (min-width: 576px) {
      .thirteen .grass {
        height: 60vh;
        top: -40%; } }
    .thirteen .grass:before {
      background: url("../images/grass.svg");
      content: '';
      width: 100%;
      height: 100%;
      display: block;
      background-size: cover; }
      @media (min-width: 576px) {
        .thirteen .grass:before {
          background-size: unset; } }
  .thirteen .grass2 {
    display: block;
    position: absolute;
    width: 100%;
    height: 42vh;
    top: 12%;
    left: 0;
    background-color: #9fcc3b;
    transform: rotate(180deg) scale(-1, 1); }
    @media (min-width: 375px) {
      .thirteen .grass2 {
        height: 34vh;
        top: 4%; } }
    @media (min-width: 992px) {
      .thirteen .grass2 {
        height: 60vh;
        top: 19%; } }
    .thirteen .grass2:before {
      background: url("../images/grass.svg");
      content: '';
      width: 100%;
      height: 100%;
      display: block;
      background-size: cover; }
      @media (min-width: 576px) {
        .thirteen .grass2:before {
          background-size: unset; } }
  .thirteen .explodedDrawingSplash {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 2; }
    .thirteen .explodedDrawingSplash:before {
      content: url("../images/explodedDrawingSplash.svg");
      max-height: 98vh;
      display: block;
      height: 80vh; }
      @media (min-width: 576px) {
        .thirteen .explodedDrawingSplash:before {
          height: 98vh; } }
      @media (min-width: 992px) {
        .thirteen .explodedDrawingSplash:before {
          height: unset; } }
  .thirteen .explodedDrawing {
    display: block;
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22.5vw;
    height: 100%;
    max-height: 32vw;
    z-index: 2; }
    @media (min-width: 576px) {
      .thirteen .explodedDrawing {
        top: 50%;
        left: 75%;
        transform: translate(-60%, -50%); } }
    @media (min-width: 992px) {
      .thirteen .explodedDrawing {
        top: 50%;
        left: 60%;
        transform: translate(-60%, -50%); } }
    @media (min-width: 1024px) {
      .thirteen .explodedDrawing {
        min-width: 423px;
        min-height: 601px;
        top: 65%;
        left: 75%;
        transform: translate(-75%, -65%); } }
    .thirteen .explodedDrawing .explodedMilkCartonBase {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(0, -50%);
      width: 66%;
      opacity: 0; }
      .thirteen .explodedDrawing .explodedMilkCartonBase:before {
        content: url("../images/explodedMilkCartonBase.svg"); }
    .thirteen .explodedDrawing .explodedMilkCartonFirst1 {
      position: absolute;
      width: 70.5%;
      top: 100%;
      right: -100vw; }
      .thirteen .explodedDrawing .explodedMilkCartonFirst1:before {
        content: url("../images/explodedMilkCartonFirst1.svg"); }
    .thirteen .explodedDrawing .explodedMilkCartonSecond2 {
      position: absolute;
      width: 70.5%;
      top: 100%;
      right: -100vw; }
      .thirteen .explodedDrawing .explodedMilkCartonSecond2:before {
        content: url("../images/explodedMilkCartonSecond2.svg"); }
    .thirteen .explodedDrawing .explodedMilkCartonThird {
      position: absolute;
      width: 70.5%;
      top: 100%;
      right: -100vw; }
      .thirteen .explodedDrawing .explodedMilkCartonThird:before {
        content: url("../images/explodedMilkCartonThird.svg"); }
    .thirteen .explodedDrawing .explodedMilkCartonFourth {
      position: absolute;
      width: 70.5%;
      top: 100%;
      right: -100vw; }
      .thirteen .explodedDrawing .explodedMilkCartonFourth:before {
        content: url("../images/explodedMilkCartonFourth.svg"); }
    .thirteen .explodedDrawing .explodedMilkCartonFifth {
      position: absolute;
      width: 70.5%;
      top: 100%;
      right: -100vw; }
      .thirteen .explodedDrawing .explodedMilkCartonFifth:before {
        content: url("../images/explodedMilkCartonFifth.svg"); }
    .thirteen .explodedDrawing .explodedMilkCartonSixth {
      position: absolute;
      width: 70.5%;
      top: 100%;
      right: -100vw; }
      .thirteen .explodedDrawing .explodedMilkCartonSixth:before {
        content: url("../images/explodedMilkCartonSixth.svg"); }
  .thirteen .textWrapper {
    opacity: 1;
    z-index: 2;
    font-size: 20px;
    line-height: 22px; }
    @media (min-width: 576px) {
      .thirteen .textWrapper {
        font-size: 30px;
        line-height: 40px; } }
    .thirteen .textWrapper .text-uppercase {
      font-size: 22px;
      line-height: 31px; }
      @media (min-width: 576px) {
        .thirteen .textWrapper .text-uppercase {
          font-size: 45px;
          line-height: 63px; } }
    .thirteen .textWrapper .plantBased {
      display: flex;
      font-size: 18px;
      color: #008A2E;
      justify-content: center;
      font-weight: normal; }
      .thirteen .textWrapper .plantBased:before {
        content: url("../images/plantBased.svg");
        width: 25px;
        height: 35px;
        margin-right: 10px; }
    .thirteen .textWrapper .fossil {
      display: flex;
      font-size: 18px;
      color: #404A51;
      justify-content: center;
      font-weight: normal; }
      .thirteen .textWrapper .fossil:before {
        content: url("../images/fossil.svg");
        width: 25px;
        height: 35px;
        margin-right: 10px; }
  .thirteen.active .explodedMilkCartonBase {
    animation: explodedMilkCartonBase 1s forwards;
    animation-delay: 2.1s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@keyframes explodedMilkCartonBase {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
  .thirteen.active .explodedMilkCartonFirst1 {
    -webkit-animation: explodedMilkCartonFirst1 0.5s forwards;
    -moz-animation: explodedMilkCartonFirst1 0.5s forwards;
    -o-animation: explodedMilkCartonFirst1 0.5s forwards;
    animation: explodedMilkCartonFirst1 0.5s forwards;
    animation-delay: 1.8s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes explodedMilkCartonFirst1 {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
@-moz-keyframes explodedMilkCartonFirst1 {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
@-o-keyframes explodedMilkCartonFirst1 {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
@keyframes explodedMilkCartonFirst1 {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
  .thirteen.active .explodedMilkCartonSecond2 {
    -webkit-animation: explodedMilkCartonSecond2 0.5s forwards;
    -moz-animation: explodedMilkCartonSecond2 0.5s forwards;
    -o-animation: explodedMilkCartonSecond2 0.5s forwards;
    animation: explodedMilkCartonSecond2 0.5s forwards;
    animation-delay: 1.5s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes explodedMilkCartonSecond2 {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
@-moz-keyframes explodedMilkCartonSecond2 {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
@-o-keyframes explodedMilkCartonSecond2 {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
@keyframes explodedMilkCartonSecond2 {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
  .thirteen.active .explodedMilkCartonThird {
    -webkit-animation: explodedMilkCartonThird 0.5s forwards;
    -moz-animation: explodedMilkCartonThird 0.5s forwards;
    -o-animation: explodedMilkCartonThird 0.5s forwards;
    animation: explodedMilkCartonThird 0.5s forwards;
    animation-delay: 1.2s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes explodedMilkCartonThird {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
@-moz-keyframes explodedMilkCartonThird {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
@-o-keyframes explodedMilkCartonThird {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
@keyframes explodedMilkCartonThird {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
  .thirteen.active .explodedMilkCartonFourth {
    -webkit-animation: explodedMilkCartonFourth 0.5s forwards;
    -moz-animation: explodedMilkCartonFourth 0.5s forwards;
    -o-animation: explodedMilkCartonFourth 0.5s forwards;
    animation: explodedMilkCartonFourth 0.5s forwards;
    animation-delay: 0.9s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes explodedMilkCartonFourth {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
@-moz-keyframes explodedMilkCartonFourth {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
@-o-keyframes explodedMilkCartonFourth {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
@keyframes explodedMilkCartonFourth {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
  .thirteen.active .explodedMilkCartonFifth {
    -webkit-animation: explodedMilkCartonFifth 0.5s forwards;
    -moz-animation: explodedMilkCartonFifth 0.5s forwards;
    -o-animation: explodedMilkCartonFifth 0.5s forwards;
    animation: explodedMilkCartonFifth 0.5s forwards;
    animation-delay: 0.6s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes explodedMilkCartonFifth {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
@-moz-keyframes explodedMilkCartonFifth {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
@-o-keyframes explodedMilkCartonFifth {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
@keyframes explodedMilkCartonFifth {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
  .thirteen.active .explodedMilkCartonSixth {
    -webkit-animation: explodedMilkCartonSixth 0.5s forwards;
    -moz-animation: explodedMilkCartonSixth 0.5s forwards;
    -o-animation: explodedMilkCartonSixth 0.5s forwards;
    animation: explodedMilkCartonSixth 0.5s forwards;
    animation-delay: 0.3s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes explodedMilkCartonSixth {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
@-moz-keyframes explodedMilkCartonSixth {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
@-o-keyframes explodedMilkCartonSixth {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
@keyframes explodedMilkCartonSixth {
  0% {
    top: 100%;
    right: -100vw;
    transform: translate(-100vw, -100%); }
  100% {
    top: 100%;
    right: 29.5%;
    transform: translate(0, -100%) translateZ(0); } }
.fourteen {
  background: white; }
  .fourteen .milkCartonWrapper {
    max-width: 1025px;
    width: 100%;
    height: 100%;
    position: relative; }
  .fourteen .mizoMilk15Small,
  .fourteen .mizoMilk28Small,
  .fourteen .mizoMilk15Big,
  .fourteen .mizoMilk28Big {
    display: block;
    position: absolute;
    top: 0;
    left: -100vw;
    height: 100%;
    z-index: 1; }
    .fourteen .mizoMilk15Small:before,
    .fourteen .mizoMilk28Small:before,
    .fourteen .mizoMilk15Big:before,
    .fourteen .mizoMilk28Big:before {
      display: block;
      height: 100%;
      width: 100%;
      content: '';
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: center;
      cursor: pointer; }
    .fourteen .mizoMilk15Small:after,
    .fourteen .mizoMilk28Small:after,
    .fourteen .mizoMilk15Big:after,
    .fourteen .mizoMilk28Big:after {
      display: block;
      max-width: 60%; }
  .fourteen .mizoMilk35Small,
  .fourteen .mizoLactoseFreeMilk15Small,
  .fourteen .mizoMilk35Big,
  .fourteen .mizoLactoseFreeMilk15Big {
    display: block;
    position: absolute;
    top: 0;
    right: -100vw;
    height: 100%;
    z-index: 1; }
    .fourteen .mizoMilk35Small:before,
    .fourteen .mizoLactoseFreeMilk15Small:before,
    .fourteen .mizoMilk35Big:before,
    .fourteen .mizoLactoseFreeMilk15Big:before {
      display: block;
      height: 100%;
      width: 100%;
      content: '';
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: center;
      cursor: pointer; }
    .fourteen .mizoMilk35Small:after,
    .fourteen .mizoLactoseFreeMilk15Small:after,
    .fourteen .mizoMilk35Big:after,
    .fourteen .mizoLactoseFreeMilk15Big:after {
      display: block;
      max-width: 60%; }
  .fourteen .mizoMilk15Small,
  .fourteen .mizoMilk28Small,
  .fourteen .mizoMilk35Small,
  .fourteen .mizoLactoseFreeMilk15Small {
    width: 50px;
    height: 60px;
    top: 15%;
    opacity: 1; }
    @media (min-width: 576px) {
      .fourteen .mizoMilk15Small,
      .fourteen .mizoMilk28Small,
      .fourteen .mizoMilk35Small,
      .fourteen .mizoLactoseFreeMilk15Small {
        width: 161px;
        height: 244px; } }
    .fourteen .mizoMilk15Small:hover:before,
    .fourteen .mizoMilk28Small:hover:before,
    .fourteen .mizoMilk35Small:hover:before,
    .fourteen .mizoLactoseFreeMilk15Small:hover:before {
      background-size: 45%;
      background-position: center; }
  .fourteen .mizoMilk15Big,
  .fourteen .mizoMilk28Big,
  .fourteen .mizoMilk35Big,
  .fourteen .mizoLactoseFreeMilk15Big {
    width: 70px;
    height: 85px;
    top: 50%;
    opacity: 1; }
    @media (min-width: 576px) {
      .fourteen .mizoMilk15Big,
      .fourteen .mizoMilk28Big,
      .fourteen .mizoMilk35Big,
      .fourteen .mizoLactoseFreeMilk15Big {
        width: 216px;
        height: 317px; } }
    .fourteen .mizoMilk15Big:hover:before,
    .fourteen .mizoMilk28Big:hover:before,
    .fourteen .mizoMilk35Big:hover:before,
    .fourteen .mizoLactoseFreeMilk15Big:hover:before {
      background-size: 45%;
      background-position: center; }
  .fourteen .mizoMilk15Small:before {
    background-image: url("../images/mizoCannedMilk/mizoMilk15Small.png"); }
  .fourteen .mizoMilk15Small:after {
    content: url("../images/shadow.svg");
    margin-right: auto;
    margin-left: 25%; }
  .fourteen .mizoMilk15Small:hover:before {
    background-image: url("../images/mizoCannedMilk/mizoMilk15SmallFront.png"); }
  .fourteen .mizoMilk15Small:hover:after {
    margin: auto; }
  .fourteen .mizoMilk28Small:before {
    background-image: url("../images/mizoCannedMilk/mizoMilk28Small.png"); }
  .fourteen .mizoMilk28Small:after {
    content: url("../images/shadow.svg");
    margin-right: auto;
    margin-left: 25%; }
  .fourteen .mizoMilk28Small:hover:before {
    background-image: url("../images/mizoCannedMilk/mizoMilk28SmallFront.png"); }
  .fourteen .mizoMilk28Small:hover:after {
    margin: auto; }
  .fourteen .mizoMilk35Small:before {
    background-image: url("../images/mizoCannedMilk/mizoMilk35Small.png"); }
  .fourteen .mizoMilk35Small:after {
    content: url("../images/shadow.svg");
    margin-left: auto;
    margin-right: 25%; }
  .fourteen .mizoMilk35Small:hover:before {
    background-image: url("../images/mizoCannedMilk/mizoMilk35SmallFront.png"); }
  .fourteen .mizoMilk35Small:hover:after {
    margin: auto; }
  .fourteen .mizoLactoseFreeMilk15Small:before {
    background-image: url("../images/mizoCannedMilk/mizoLactoseFreeMilk15Small.png"); }
  .fourteen .mizoLactoseFreeMilk15Small:after {
    content: url("../images/shadow.svg");
    margin-left: auto;
    margin-right: 25%; }
  .fourteen .mizoLactoseFreeMilk15Small:hover:before {
    background-image: url("../images/mizoCannedMilk/mizoLactoseFreeMilk15SmallFront.png"); }
  .fourteen .mizoLactoseFreeMilk15Small:hover:after {
    margin: auto; }
  .fourteen .mizoMilk15Big:before {
    background-image: url("../images/mizoCannedMilk/mizoMilk15Big.png"); }
  .fourteen .mizoMilk15Big:after {
    content: url("../images/shadow.svg");
    margin-right: auto;
    margin-left: 30%; }
  .fourteen .mizoMilk15Big:hover:before {
    background-image: url("../images/mizoCannedMilk/mizoMilk15BigFront.png"); }
  .fourteen .mizoMilk15Big:hover:after {
    margin: auto; }
  .fourteen .mizoMilk28Big:before {
    background-image: url("../images/mizoCannedMilk/mizoMilk28Big.png"); }
  .fourteen .mizoMilk28Big:after {
    content: url("../images/shadow.svg");
    margin-right: auto;
    margin-left: 30%; }
  .fourteen .mizoMilk28Big:hover:before {
    background-image: url("../images/mizoCannedMilk/mizoMilk28BigFront.png"); }
  .fourteen .mizoMilk28Big:hover:after {
    margin: auto; }
  .fourteen .mizoMilk35Big:before {
    background-image: url("../images/mizoCannedMilk/mizoMilk35Big.png"); }
  .fourteen .mizoMilk35Big:after {
    content: url("../images/shadow.svg");
    margin-left: auto;
    margin-right: 30%; }
  .fourteen .mizoMilk35Big:hover:before {
    background-image: url("../images/mizoCannedMilk/mizoMilk35BigFront.png"); }
  .fourteen .mizoMilk35Big:hover:after {
    margin: auto; }
  .fourteen .mizoLactoseFreeMilk15Big:before {
    background-image: url("../images/mizoCannedMilk/mizoLactoseFreeMilk15Big.png"); }
  .fourteen .mizoLactoseFreeMilk15Big:after {
    content: url("../images/shadow.svg");
    margin-left: auto;
    margin-right: 30%; }
  .fourteen .mizoLactoseFreeMilk15Big:hover:before {
    background-image: url("../images/mizoCannedMilk/mizoLactoseFreeMilk15BigFront.png"); }
  .fourteen .mizoLactoseFreeMilk15Big:hover:after {
    margin: auto; }
  .fourteen.active .mizoMilk15Small {
    -webkit-animation: mizoMilk15Small 1.5s forwards;
    -moz-animation: mizoMilk15Small 1.5s forwards;
    -o-animation: mizoMilk15Small 1.5s forwards;
    animation: mizoMilk15Small 1.5s forwards;
    animation-delay: 0.4s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes mizoMilk15Small {
  0% {
    top: 20%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 20%;
    left: 15%;
    transform: translate(-15%, 0); } }
@-moz-keyframes mizoMilk15Small {
  0% {
    top: 20%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 20%;
    left: 15%;
    transform: translate(-15%, 0); } }
@-o-keyframes mizoMilk15Small {
  0% {
    top: 20%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 20%;
    left: 15%;
    transform: translate(-15%, 0); } }
@keyframes mizoMilk15Small {
  0% {
    top: 20%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 20%;
    left: 15%;
    transform: translate(-15%, 0); } }
  .fourteen.active .mizoMilk28Small {
    -webkit-animation: mizoMilk28Small 1s forwards;
    -moz-animation: mizoMilk28Small 1s forwards;
    -o-animation: mizoMilk28Small 1s forwards;
    animation: mizoMilk28Small 1s forwards;
    animation-delay: 0.2s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes mizoMilk28Small {
  0% {
    top: 20%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 20%;
    left: 35%;
    transform: translate(-35%, 0); } }
@-moz-keyframes mizoMilk28Small {
  0% {
    top: 20%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 20%;
    left: 35%;
    transform: translate(-35%, 0); } }
@-o-keyframes mizoMilk28Small {
  0% {
    top: 20%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 20%;
    left: 35%;
    transform: translate(-35%, 0); } }
@keyframes mizoMilk28Small {
  0% {
    top: 20%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 20%;
    left: 35%;
    transform: translate(-35%, 0); } }
  .fourteen.active .mizoMilk35Small {
    -webkit-animation: mizoMilk35Small 1s forwards;
    -moz-animation: mizoMilk35Small 1s forwards;
    -o-animation: mizoMilk35Small 1s forwards;
    animation: mizoMilk35Small 1s forwards;
    animation-delay: 0.2s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes mizoMilk35Small {
  0% {
    top: 20%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 20%;
    right: 35%;
    transform: translate(35%, 0); } }
@-moz-keyframes mizoMilk35Small {
  0% {
    top: 20%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 20%;
    right: 35%;
    transform: translate(35%, 0); } }
@-o-keyframes mizoMilk35Small {
  0% {
    top: 20%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 20%;
    right: 35%;
    transform: translate(35%, 0); } }
@keyframes mizoMilk35Small {
  0% {
    top: 20%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 20%;
    right: 35%;
    transform: translate(35%, 0); } }
  .fourteen.active .mizoLactoseFreeMilk15Small {
    -webkit-animation: mizoLactoseFreeMilk15Small 1.5s forwards;
    -moz-animation: mizoLactoseFreeMilk15Small 1.5s forwards;
    -o-animation: mizoLactoseFreeMilk15Small 1.5s forwards;
    animation: mizoLactoseFreeMilk15Small 1.5s forwards;
    animation-delay: 0.4s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes mizoLactoseFreeMilk15Small {
  0% {
    top: 20%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 20%;
    right: 15%;
    transform: translate(15%, 0); } }
@-moz-keyframes mizoLactoseFreeMilk15Small {
  0% {
    top: 20%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 20%;
    right: 15%;
    transform: translate(15%, 0); } }
@-o-keyframes mizoLactoseFreeMilk15Small {
  0% {
    top: 20%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 20%;
    right: 15%;
    transform: translate(15%, 0); } }
@keyframes mizoLactoseFreeMilk15Small {
  0% {
    top: 20%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 20%;
    right: 15%;
    transform: translate(15%, 0); } }
  .fourteen.active .mizoMilk15Big {
    -webkit-animation: mizoMilk15Big 1.5s forwards;
    -moz-animation: mizoMilk15Big 1.5s forwards;
    -o-animation: mizoMilk15Big 1.5s forwards;
    animation: mizoMilk15Big 1.5s forwards;
    animation-delay: 0.5s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes mizoMilk15Big {
  0% {
    top: 50%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 50%;
    left: 5%;
    transform: translate(-5%, 0); } }
@-moz-keyframes mizoMilk15Big {
  0% {
    top: 50%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 50%;
    left: 5%;
    transform: translate(-5%, 0); } }
@-o-keyframes mizoMilk15Big {
  0% {
    top: 50%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 50%;
    left: 5%;
    transform: translate(-5%, 0); } }
@keyframes mizoMilk15Big {
  0% {
    top: 50%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 50%;
    left: 5%;
    transform: translate(-5%, 0); } }
  .fourteen.active .mizoMilk28Big {
    -webkit-animation: mizoMilk28Big 1s forwards;
    -moz-animation: mizoMilk28Big 1s forwards;
    -o-animation: mizoMilk28Big 1s forwards;
    animation: mizoMilk28Big 1s forwards;
    animation-delay: 0.3s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes mizoMilk28Big {
  0% {
    top: 50%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 50%;
    left: 30%;
    transform: translate(-30%, 0); } }
@-moz-keyframes mizoMilk28Big {
  0% {
    top: 50%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 50%;
    left: 30%;
    transform: translate(-30%, 0); } }
@-o-keyframes mizoMilk28Big {
  0% {
    top: 50%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 50%;
    left: 30%;
    transform: translate(-30%, 0); } }
@keyframes mizoMilk28Big {
  0% {
    top: 50%;
    left: -100vw;
    transform: unset; }
  100% {
    top: 50%;
    left: 30%;
    transform: translate(-30%, 0); } }
  .fourteen.active .mizoMilk35Big {
    -webkit-animation: mizoMilk35Big 1s forwards;
    -moz-animation: mizoMilk35Big 1s forwards;
    -o-animation: mizoMilk35Big 1s forwards;
    animation: mizoMilk35Big 1s forwards;
    animation-delay: 0.3s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes mizoMilk35Big {
  0% {
    top: 50%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 50%;
    right: 30%;
    transform: translate(30%, 0); } }
@-moz-keyframes mizoMilk35Big {
  0% {
    top: 50%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 50%;
    right: 30%;
    transform: translate(30%, 0); } }
@-o-keyframes mizoMilk35Big {
  0% {
    top: 50%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 50%;
    right: 30%;
    transform: translate(30%, 0); } }
@keyframes mizoMilk35Big {
  0% {
    top: 50%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 50%;
    right: 30%;
    transform: translate(30%, 0); } }
  .fourteen.active .mizoLactoseFreeMilk15Big {
    -webkit-animation: mizoLactoseFreeMilk15Big 1.5s forwards;
    -moz-animation: mizoLactoseFreeMilk15Big 1.5s forwards;
    -o-animation: mizoLactoseFreeMilk15Big 1.5s forwards;
    animation: mizoLactoseFreeMilk15Big 1.5s forwards;
    animation-delay: 0.5s;
    animation-timing-function: cubic-bezier(0.49, 0.18, 0.53, 0.94); }
@-webkit-keyframes mizoLactoseFreeMilk15Big {
  0% {
    top: 50%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 50%;
    right: 5%;
    transform: translate(5%, 0); } }
@-moz-keyframes mizoLactoseFreeMilk15Big {
  0% {
    top: 50%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 50%;
    right: 5%;
    transform: translate(5%, 0); } }
@-o-keyframes mizoLactoseFreeMilk15Big {
  0% {
    top: 50%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 50%;
    right: 5%;
    transform: translate(5%, 0); } }
@keyframes mizoLactoseFreeMilk15Big {
  0% {
    top: 50%;
    right: -100vw;
    transform: unset; }
  100% {
    top: 50%;
    right: 5%;
    transform: translate(5%, 0); } }
.fifteen {
  background: url("../images/followMeBg.svg");
  background-size: cover;
  background-position: center; }
  .fifteen .flowMilk:before {
    display: block;
    position: absolute;
    top: -5px;
    content: url("../images/t.svg");
    width: 100%;
    left: 0; }
  .fifteen .textWrapper {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -30%);
    width: 100%;
    text-align: center; }
    .fifteen .textWrapper.text-uppercase {
      font-size: 22px; }
      @media (min-width: 576px) {
        .fifteen .textWrapper.text-uppercase {
          font-size: 60px;
          line-height: 72px; } }
    .fifteen .textWrapper span {
      color: white; }
  .fifteen .loveMizo {
    display: flex;
    position: absolute;
    width: 100%;
    max-width: 310px;
    min-width: 310px;
    min-height: 80px;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -70%);
    background: #EF476F;
    border-radius: 50px;
    justify-content: space-between;
    align-items: center;
    color: #FFFCDF;
    font-family: OswaldBold, sans-serif;
    font-size: 20px;
    font-weight: bold; }
    @media (min-width: 576px) {
      .fifteen .loveMizo {
        max-width: 532px;
        min-width: 480px;
        min-height: 103px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 40px; } }
    .fifteen .loveMizo .facebook,
    .fifteen .loveMizo .instagram {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex; }
      .fifteen .loveMizo .facebook:before,
      .fifteen .loveMizo .instagram:before {
        display: block;
        width: 24px;
        height: 24px; }
        @media (min-width: 576px) {
          .fifteen .loveMizo .facebook:before,
          .fifteen .loveMizo .instagram:before {
            width: 48px;
            height: 48px; } }
    .fifteen .loveMizo .facebook {
      margin-left: 15px; }
      @media (min-width: 576px) {
        .fifteen .loveMizo .facebook {
          margin-left: 35px; } }
      .fifteen .loveMizo .facebook:before {
        content: url("../images/facebook.svg"); }
    .fifteen .loveMizo .instagram {
      margin-right: 15px; }
      @media (min-width: 576px) {
        .fifteen .loveMizo .instagram {
          margin-right: 35px; } }
      .fifteen .loveMizo .instagram:before {
        content: url("../images/instagram.svg"); }
  .fifteen .footer {
    display: none; }
    @media (min-width: 1024px) {
      .fifteen .footer {
        display: block; } }

.footer {
  width: 100%;
  position: absolute !important;
  bottom: 0; }

.sixteen {
  display: block;
  background: #031932; }
  @media (min-width: 1024px) {
    .sixteen {
      display: none; } }

.text-uppercase {
  text-transform: uppercase; }

.container {
  max-width: 1010px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px; }
  @media (min-width: 980px) {
    .container {
      padding-left: 50px;
      padding-right: 50px; } }

/*# sourceMappingURL=style.css.map */