.wow {
    visibility: hidden;
  }
  .animated{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  /*fadein*/
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .fadeIn {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
  }
  /*fadeInUp*/
  @-webkit-keyframes fadeInUp {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 20px, 0);
      transform: translate3d(0, 20px, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 20px, 0);
      transform: translate3d(0, 20px, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  .fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
  }
  /*fadeInDown*/
  @-webkit-keyframes fadeInDown {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes fadeInDown {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  .fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
  }
  /*floating*/
  .floating{
      animation-name: floating;
      -webkit-animation-name: floating;
      animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
  }
  @keyframes floating {
      0% {
          transform: translateY(0%);
      }
      50% {
          transform: translateY(20px);
      }
      100% {
          transform: translateY(0%);
      }
  }
  @-webkit-keyframes floating {
      0% {
          -webkit-transform: translateY(0%);
      }
      50% {
          -webkit-transform: translateY(20px);
      }
      100% {
          -webkit-transform: translateY(0%);
      }
  }
  /*floating + tossing*/
  .floatoss{
      animation-name: floatoss;
      -webkit-animation-name: floatoss;
      animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
  }
  @keyframes floatoss {
      0% {
          transform: translateY(0%) rotate(-2deg);
      }
      50% {
          transform: translateY(20px) rotate(2deg);
      }
      100% {
          transform: translateY(0%) rotate(-2deg);
      }
  }
  @-webkit-keyframes floatoss {
      0% {
          -webkit-transform: translateY(0%) rotate(-2deg);
      }
      50% {
          -webkit-transform: translateY(20px) rotate(2deg);
      }
      100% {
          -webkit-transform: translateY(0%) rotate(-2deg);
      }
  }
  /*fadeInLeft*/
  @-webkit-keyframes fadeInLeft {
    from {
      opacity: 0;
      -webkit-transform: translate3d(-20px, 0, 0);
      transform: translate3d(-20px, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes fadeInLeft {
    from {
      opacity: 0;
      -webkit-transform: translate3d(-20px, 0, 0);
      transform: translate3d(-20px, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  .fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
  }
  
  /*fadeInRight*/
  @-webkit-keyframes fadeInRight {
    from {
      opacity: 0;
      -webkit-transform: translate3d(20px, 0, 0);
      transform: translate3d(20px, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes fadeInRight {
    from {
      opacity: 0;
      -webkit-transform: translate3d(20px, 0, 0);
      transform: translate3d(20px, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  .fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
  }
  
  /*skewdown*/
  .img-skewtop-inner{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
      animation-name: bgDown;
      -webkit-animation-name: bgDown;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-duration: 1s;
      -webkit-animation-duration: 1s;
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
  }
  @keyframes bgDown {
    0% {
          top: 0
      }
      100% {
          top: 100%
      }
  }
  /*zoomIn*/
  @-webkit-keyframes zoomIn {
    from {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
  
    50% {
      opacity: 1;
    }
  }
  @keyframes zoomIn {
    from {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
  
    50% {
      opacity: 1;
    }
  }
  .zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
  }
  /*slideInLeft*/
  @-webkit-keyframes slideInLeft {
    from {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
    }
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes slideInLeft {
    from {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
    }
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  .slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
  }
  
  .bgLeft,
  .bgRight,
  .bgSlideLeft,
  .bgSlideRight{
    content: "";
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    -webkit-animation-name: bgLeft;
    animation-name: bgLeft;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-duration: 1s;
      -webkit-animation-duration: 1s;
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    z-index: 1
  }
  @keyframes bgLeft {
    0% {
          left: 0
      }
      100% {
          left: 100%;
      }
  }
  .bgRight{
    right: 0;
    left: auto;
    -webkit-animation-name: bgRight;
    animation-name: bgRight;
  }
  @keyframes bgRight {
    0% {
          right: 0
      }
      100% {
          right: 100%;
      }
  }
  /*pulse*/
  .pulse{
      animation-name: pulse;
      -webkit-animation-name: pulse;
      animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
  }
  @keyframes pulse {
      0% {
          transform: scale(0.9);
      }
      50% {
          transform: scale(1);
      }
      100% {
          transform: scale(0.9);
      }
  }
  @-webkit-keyframes pulse {
      0% {
          -webkit-transform: scale(0.95);
          opacity: 0.7;
      }
      50% {
          -webkit-transform: scale(1);
          opacity: 1;
      }
      100% {
          -webkit-transform: scale(0.95);
          opacity: 0.7;
      }
  }
  /*spin*/
  .spin{
    animation-name: spin;
    -webkit-animation-name: spin;
    animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
  }
  @keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
  }
  @-webkit-keyframes spin {
      from {
          -webkit-transform: rotate(0deg);
      }
      to {
          -webkit-transform: rotate(360deg);
      }
  }
  .bgSlideLeft{
    -webkit-animation-name: bgSlideLeft;
    animation-name: bgSlideLeft;
    z-index: -1
  }
  @keyframes bgSlideLeft {
    0% {
          left: 100%
      }
      100% {
          left: 0
      }
  }
  .bgSlideRight{
    right: 0;
    left: auto;
    -webkit-animation-name: bgSlideRight;
    animation-name: bgSlideRight;
    z-index: -1
  }
  @keyframes bgSlideRight {
    0% {
          right: 100%
      }
      100% {
          right: 0
      }
  }
  /*color*/
  .bg-cloud{
    background-color: #e9e9e9;
  }
  .bg-white{
    background-color: #ffffff;
  }
  .bg-yellow{
    background-color: #FFEB00;
  }