/*!**************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/swiper/swiper.css ***!
  \**************************************************************************************************************/
/**
 * Swiper 11.1.5
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2024 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: July 15, 2024
 */

/* FONT_START */
@font-face {
  font-family: 'swiper-icons';
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
/* FONT_END */
:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: '';
  flex-shrink: 0;
  order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */

/*!**************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/swiper/modules/navigation.css ***!
  \**************************************************************************************************************************/
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
  display: none !important;
}
.swiper-button-prev svg,
.swiper-button-next svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}
.swiper-rtl .swiper-button-prev svg,
.swiper-rtl .swiper-button-next svg {
  transform: rotate(180deg);
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-lock {
  display: none;
}
/* Navigation font start */
.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: 'prev';
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: 'next';
}
/* Navigation font end */

/*!**************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/swiper/modules/pagination.css ***!
  \**************************************************************************************************************************/
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
          appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform,
        200ms top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
        200ms left;
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}
.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-lock {
  display: none;
}

/*!**************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/swiper/modules/mousewheel.css ***!
  \**************************************************************************************************************************/

/*!********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/animate.css/animate.css ***!
  \********************************************************************************************************************/
@charset "UTF-8";/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}
.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animate__animated.animate__infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animate__animated.animate__repeat-1 {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: var(--animate-repeat);
  animation-iteration-count: var(--animate-repeat);
}
.animate__animated.animate__repeat-2 {
  -webkit-animation-iteration-count: calc(1 * 2);
  animation-iteration-count: calc(1 * 2);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
  animation-iteration-count: calc(var(--animate-repeat) * 2);
}
.animate__animated.animate__repeat-3 {
  -webkit-animation-iteration-count: calc(1 * 3);
  animation-iteration-count: calc(1 * 3);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
  animation-iteration-count: calc(var(--animate-repeat) * 3);
}
.animate__animated.animate__delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-delay: var(--animate-delay);
  animation-delay: var(--animate-delay);
}
.animate__animated.animate__delay-2s {
  -webkit-animation-delay: calc(1s * 2);
  animation-delay: calc(1s * 2);
  -webkit-animation-delay: calc(var(--animate-delay) * 2);
  animation-delay: calc(var(--animate-delay) * 2);
}
.animate__animated.animate__delay-3s {
  -webkit-animation-delay: calc(1s * 3);
  animation-delay: calc(1s * 3);
  -webkit-animation-delay: calc(var(--animate-delay) * 3);
  animation-delay: calc(var(--animate-delay) * 3);
}
.animate__animated.animate__delay-4s {
  -webkit-animation-delay: calc(1s * 4);
  animation-delay: calc(1s * 4);
  -webkit-animation-delay: calc(var(--animate-delay) * 4);
  animation-delay: calc(var(--animate-delay) * 4);
}
.animate__animated.animate__delay-5s {
  -webkit-animation-delay: calc(1s * 5);
  animation-delay: calc(1s * 5);
  -webkit-animation-delay: calc(var(--animate-delay) * 5);
  animation-delay: calc(var(--animate-delay) * 5);
}
.animate__animated.animate__faster {
  -webkit-animation-duration: calc(1s / 2);
  animation-duration: calc(1s / 2);
  -webkit-animation-duration: calc(var(--animate-duration) / 2);
  animation-duration: calc(var(--animate-duration) / 2);
}
.animate__animated.animate__fast {
  -webkit-animation-duration: calc(1s * 0.8);
  animation-duration: calc(1s * 0.8);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
  animation-duration: calc(var(--animate-duration) * 0.8);
}
.animate__animated.animate__slow {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
}
.animate__animated.animate__slower {
  -webkit-animation-duration: calc(1s * 3);
  animation-duration: calc(1s * 3);
  -webkit-animation-duration: calc(var(--animate-duration) * 3);
  animation-duration: calc(var(--animate-duration) * 3);
}
@media print, (prefers-reduced-motion: reduce) {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }

  .animate__animated[class*='Out'] {
    opacity: 0;
  }
}
/* Attention seekers  */
@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
@keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
.animate__bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
.animate__flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}
@-webkit-keyframes shakeX {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shakeX {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.animate__shakeX {
  -webkit-animation-name: shakeX;
  animation-name: shakeX;
}
@-webkit-keyframes shakeY {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
@keyframes shakeY {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
.animate__shakeY {
  -webkit-animation-name: shakeY;
  animation-name: shakeY;
}
@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.animate__headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.animate__swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}
@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}
@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.animate__jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: calc(1s * 1.3);
  animation-duration: calc(1s * 1.3);
  -webkit-animation-duration: calc(var(--animate-duration) * 1.3);
  animation-duration: calc(var(--animate-duration) * 1.3);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
/* Back entrances */
@-webkit-keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInDown {
  -webkit-animation-name: backInDown;
  animation-name: backInDown;
}
@-webkit-keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInLeft {
  -webkit-animation-name: backInLeft;
  animation-name: backInLeft;
}
@-webkit-keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInRight {
  -webkit-animation-name: backInRight;
  animation-name: backInRight;
}
@-webkit-keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInUp {
  -webkit-animation-name: backInUp;
  animation-name: backInUp;
}
/* Back exits */
@-webkit-keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutDown {
  -webkit-animation-name: backOutDown;
  animation-name: backOutDown;
}
@-webkit-keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutLeft {
  -webkit-animation-name: backOutLeft;
  animation-name: backOutLeft;
}
@-webkit-keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutRight {
  -webkit-animation-name: backOutRight;
  animation-name: backOutRight;
}
@-webkit-keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutUp {
  -webkit-animation-name: backOutUp;
  animation-name: backOutUp;
}
/* Bouncing entrances  */
@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__bounceIn {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
/* Bouncing exits  */
@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.animate__bounceOut {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
.animate__bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
.animate__bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}
/* Fading entrances  */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopLeft {
  -webkit-animation-name: fadeInTopLeft;
  animation-name: fadeInTopLeft;
}
@-webkit-keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopRight {
  -webkit-animation-name: fadeInTopRight;
  animation-name: fadeInTopRight;
}
@-webkit-keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomLeft {
  -webkit-animation-name: fadeInBottomLeft;
  animation-name: fadeInBottomLeft;
}
@-webkit-keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomRight {
  -webkit-animation-name: fadeInBottomRight;
  animation-name: fadeInBottomRight;
}
/* Fading exits */
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
.animate__fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.animate__fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.animate__fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.animate__fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.animate__fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}
@-webkit-keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
@keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
.animate__fadeOutTopLeft {
  -webkit-animation-name: fadeOutTopLeft;
  animation-name: fadeOutTopLeft;
}
@-webkit-keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
@keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
.animate__fadeOutTopRight {
  -webkit-animation-name: fadeOutTopRight;
  animation-name: fadeOutTopRight;
}
@-webkit-keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
@keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
.animate__fadeOutBottomRight {
  -webkit-animation-name: fadeOutBottomRight;
  animation-name: fadeOutBottomRight;
}
@-webkit-keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
@keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
.animate__fadeOutBottomLeft {
  -webkit-animation-name: fadeOutBottomLeft;
  animation-name: fadeOutBottomLeft;
}
/* Flippers */
@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animate__animated.animate__flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}
@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}
@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutX {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutY {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}
/* Lightspeed */
@-webkit-keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInRight {
  -webkit-animation-name: lightSpeedInRight;
  animation-name: lightSpeedInRight;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInLeft {
  -webkit-animation-name: lightSpeedInLeft;
  animation-name: lightSpeedInLeft;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutRight {
  -webkit-animation-name: lightSpeedOutRight;
  animation-name: lightSpeedOutRight;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
@-webkit-keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutLeft {
  -webkit-animation-name: lightSpeedOutLeft;
  animation-name: lightSpeedOutLeft;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
/* Rotating entrances */
@-webkit-keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
/* Rotating exits */
@-webkit-keyframes rotateOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.animate__rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
@-webkit-keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.animate__rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
/* Specials */
@-webkit-keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.animate__hinge {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
  -webkit-animation-name: hinge;
  animation-name: hinge;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}
@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.animate__rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}
/* Zooming entrances */
@-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;
  }
}
.animate__zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}
/* Zooming exits */
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
.animate__zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
.animate__zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
.animate__zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}
@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
/* Sliding entrances */
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
@-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);
  }
}
.animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
  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 slideInRight {
  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);
  }
}
.animate__slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}
/* Sliding exits */
@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

/*!***********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/css/components/init.css ***!
  \***********************************************************************************************************/
/***
* author: zmt
* data: 2022-0408-17
****/
/*reset*/
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, th, td, p, form, input, button, textarea, hr { margin:0; padding:0; }
ol,ul,li {list-style:none}
img {border:none;}
em {font-style:normal;}
img { border: none; vertical-align: top; object-fit: cover; transition: all 500ms; }
body,button,input,select,textarea { font: 12px/1.6 "\5FAE\8F6F\96C5\9ED1",tahoma,arial ; color:#000;}
input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
th{text-align:inherit;}
.clear{ clear:both;}
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both;height: 0; }

a {color:#000;text-decoration:none; outline: none;}
a:hover {color:#733b1a;text-decoration:none;}
.hidden { display: none;}
.scale img:hover { transform: scale(1.05);}

/*global*/
.f13{ font-size:13px;}
.f12{ font-size:12px;}
.f14{ font-size:14px;}
.f15{ font-size:15px;}
.f16{ font-size:16px;}
.f18{ font-size:18px;}
.f20{ font-size:20px;}
.mar_t2{ margin-top:2px;}
.mar_t5{ margin-top:5px;}
.mar_t10{ margin-top:10px;}
.mar_t15{ margin-top:15px;}
.mar_t20{ margin-top:20px;}
.mar_t30 { margin-top: 30px;}
.pad_b5{ padding-bottom:5px;}
.pad_b10{ padding-bottom:10px;}
.pad_b20{ padding-bottom:20px;}
.left{ float:left;}
.right{ float:right;}
.f700{ font-weight:700;}
.f100{ font-weight:100;}
.fyahei{ font-family:"\5FAE\8F6F\96C5\9ED1";}
.ta-l,.ta_l{ text-align:left;}
.ta-c,.ta_c{ text-align:center;}
.ta-r,.ta_r{ text-align:right;}
.pos-rel,.pos_rel{ position:relative;}
.pos-abs,.pos_abs{ position:absolute;}
.indent{ text-indent:2em;}
.cursor{ cursor:pointer;}
.wrapper { width: 1200px; margin-left:auto; margin-right: auto; }
.shadow { box-shadow: rgba(203,201,201,0.5) 0 0 10px 0;}
/*header*/

.top-code { height: 26px;margin-top: 7px;}
.top-xbiaoapp {position: relative; padding-left: 24px; font-size: 16px; }
.top-xbiaoapp b{ position: absolute; left:0; width: 17px;height: 26px;background: url(http://www.xbiao.com/images/pc/2022/sprite20220317.png) -25px 0;}
.top-xbiaoapp:hover { color:#733b1a;}
.top-xbiaoapp:hover b {background-position: -50px 0;} 


.top-weibo { position: relative; display: inline-block;  width: 29px;height: 25px; vertical-align: top; margin-left: 30px;}
.top-weibo b { position: absolute; left:0; top:-2px; width: 29px;height: 25px;background: url(http://www.xbiao.com/images/pc/2022/sprite20220317.png) 0 -47px;}
.top-wechat { position: relative;display: inline-block; width: 25px;height: 20px; cursor: default; margin-left: 22px; vertical-align: top;}
.top-wechat b { position: absolute; left:0; top:3px; width: 25px;height: 20px;background: url(http://www.xbiao.com/images/pc/2022/sprite20220317.png) 0 -78px;}
.top-xbiaoapp i,.top-wechat i,.top-weibo i{ display: none; position: absolute; left: 0; top: 40px; border-width:1px; border-style:solid;border-color:#2d190f; padding: 10px; background-color: #fff;}
.top-xbiaoapp:hover i, .top-wechat:hover i,.top-weibo:hover i{ display: block; }
/*search-bar*/
.top-search { position: relative; width: 387px; height: 44px; background-color: #fff; border-radius: 44px;}
.right-search{margin-top: 15px; float: right; position: relative; z-index: 1;}
.top-consearch { position: relative;}
.top-consearch::before{ position: absolute; left: 24px;top: 15px; content: ""; width: 16px;height: 16px; background: url(http://www.xbiao.com/images/pc/2022/sprite20220317.png) no-repeat -5px -5px;}
.top-consearch span{position: absolute; left: 50px; top: 0px; height: 44px; line-height: 44px; color: #929191; cursor: text; }
.top-consearch input { border: none; width: 262px; height: 44px; margin-left: 40px; padding-left: 10px;  line-height: 44px; outline: none; background: none; }
.top-butsearch { width: 75px; height: 44px; position: absolute; right: 0px; top: 0px;}
.top-butsearch input{appearance:none; border: 0; border-radius: 44px; background-color: #9c5f29; width: 75px; height: 44px; cursor: pointer; outline: none; font-size: 16px; color:#fff; }
.top-datasearch{ position:absolute; left:0; top:44px; background:#fff; display:none; min-width:387px; box-shadow:rgba(203,201,201,0.2) 0 10px 5px 0; }
.top-datasearch li{ padding:0 10px; font-size: 14px; line-height: 2em; white-space: nowrap; cursor: default;}
.top-datasearch li.hover{ background:#eae9e9;}
.top-datasearch span{ background:#f5f3f4; color:#ccc; display:block; position:relative; padding:6px 98px 6px 7px; line-height:normal; font-size:14px;}
.top-datasearch span i{ background:url(http://www.xbiao.com/images/pc/pub/del.png) no-repeat; position:absolute; width:13px; height:12px; right:7px; top:8px; cursor:pointer;}


.top-loginbox { float: right; height: 40px; position: relative; z-index: 2; margin-left: 20px;}
.top-loginbox i {font-style: normal;}
.top-login { position: relative; height: 40px; line-height: 40px; display: inline-block; padding-right: 15px; padding-left: 10px; cursor: default; }
.top-login a { width: 60px;height: 32px; display: inline-block; border: 1px solid #733b1a; line-height: 32px; text-align: center; border-radius: 5px; color: #733b1a;}
.top-login,.top-reg { font-size:16px; }

.top-user {display: inline-block; height: 40px;padding-left: 10px; vertical-align: top; line-height: 40px; color:#979797; float: left; position: relative; }
.top-user span { float: left; display: inline-block; height: 16px; line-height: 16px; color: #979797; background:url(http://www.xbiao.com/images/pc/pub/topbar.png) right -195px no-repeat; padding-right: 15px; width: auto!important; max-width: 58px;  width: 58px;overflow: hidden; text-overflow:ellipsis; white-space: nowrap; *white-space: normal; margin-top: 12px; cursor: pointer;}
.top-user span:hover { color: #733b1a; }
.top-user a b { color: #f00; }
.top-user:hover span {background-position: right -215px;}
.top-avatar { float: left; margin-top: 6px; margin-right: 5px; display: inline-block; width: 28px;height: 28px; border-radius: 50%; vertical-align: middle;}
.top-msg-mark { display: none; position: absolute; left:55px;width: 7px;height: 7px;background: url(http://www.xbiao.com/images/pc/pub/topbar.png) 0 -180px; }
.top-user-inforbox,.top-user-msgbox { display: none; position: absolute; top: 40px;  background:url(http://www.xbiao.com/images/opacity.gif);  }
.top-user-inforbox {width: 80px;right: 0;}
.top-user-msgbox {width: 100px; left: 0px;}
.top-user:hover .top-user-inforbox,.top-user:hover .top-user-msgbox { display: block; }
.top-user-infor,.top-user-msg { border: 1px solid #e5e5e5; margin-top: 8px; background-color: #fff; overflow: hidden; }
.top-user-infor li,.top-user-msg li{ height: 30px; border-top: 1px solid #e5e5e5; margin-top: -1px; line-height: 30px; }
.top-user-infor li a,.top-user-msg li a { display: block;border: 1px solid #fff;  text-indent: 13px; height: 27px;line-height: 27px; color:#999;  }
.top-user-msg li a {text-indent: 6px; position: relative;}
.top-user-infor li a:hover ,.top-user-msg li a:hover { background-color: #f9f9f9; color: #996600; }
.top-user-msg li i{ position: absolute; right: 3px; top: 6px; width: 22px; height: 14px; line-height: 14px; border-radius: 2px; background-color: #e5e5e5; color: #979797; text-align: right; padding-right: 3px; }
.top-user-tip{ position: absolute;top:3px;left:33px;width: 12px;height: 6px;background: url(http://www.xbiao.com/images/pc/pub/topbar.png) -8px -186px; }


/*searchandlink*/
.title h3{ display: inline-block; font-size:30px; font-weight: bold; line-height: 34px; border-bottom:2px solid #733b1a;}
.mar_t25 {margin-top: 25px}
.searchandlink {overflow: hidden;}
.searchandlink ul{ margin-left: -12px;}
.searchandlink li{ position: relative; float: left; margin: 15px 12px 0; font-size: 14px; line-height: 16px;}
.searchandlink li::before { position: absolute; left:-11px; content: ""; width: 0; height: 16px; border-left: 1px solid #eee;}

/*footer*/
.footer { margin: 50px auto 0;}
.foot-link { text-align: center; line-height: 24px; }
.footline { width: 0; height:12px;overflow: hidden; display: inline-block; vertical-align: middle; margin: 0 10px;  }
.iphone-ico i,.android-ico i,.telphone-ico i{ background:url(http://www.xbiao.com/images/pc/2022/ico_app.png) no-repeat 0 0; display:inline-block;width:18px; height:20px;padding-right:5px; vertical-align:middle;margin-top:-4px;margin-left:2px;}
.android-ico i{ background-position:-1px -26px;width:17px; height:20px; line-height:24px;margin-left:13px;}
.telphone-ico i{ background-position:0 -51px;width:11px; height:18px; line-height:22px;margin-left:12px;}
.wbfoot{ background:url(http://www.xbiao.com/images/pc/2022/ico_app.png) no-repeat 0 -70px;padding-left:20px; display:inline-block; height:24px;}
.copyright { text-align: center; margin-top: 10px; }
.float-ico-xbiao { display: none; position: fixed; left: 50%; margin-left: 620px;bottom: 100px; width: 45px; }
.float-go-top{width: 45px;height: 45px;background: url(http://www.xbiao.com/images/pc/2022/backtotop.png) 0 0 no-repeat; cursor: pointer; margin-bottom: 4px; position: relative;}
.float-go-top:hover { background-position: -45px 0; }

/*winlogin*/
.winlogin { width:620px; /*box-shadow:2px 2px 3px #ccc;*/ position:relative;_zoom:1; display:none;}
.x_closewin { display:block; width:41px; height:40px; position:absolute; background:url(http://www.xbiao.com/images/winlogin_x.png); right:-20px; top:-20px; cursor:pointer; overflow:hidden;}
.winlogin_head { width:100%; background:url(http://www.xbiao.com/images/winlogin_h.png) no-repeat; overflow:hidden;}
.winlogin_head .headbg { height:55px; padding-left:20px; background:#f7f7f7; line-height:55px; border-left:1px solid #ccc; border-right:1px solid #ccc; margin-top:5px;}
.winlogin_head .headbg h2,.winlogin_head .headbg .h2,.winlogin_head .headbg a {font-size:20px; font-weight:bold; display:inline; background:none;}
.winlogin_head .headbg h2,.winlogin_head .headbg .h2 { color:#333;}
.winlogin_head .headbg span { font-size:20px; color:#999; font-weight:100; margin:0 15px;}
.winlogin_head .headbg a{ color:#960;}
.winlogin_head .headbg a:hover { color:#960; text-decoration:underline;} 
.winlogin_c { width:618px; border-left:1px solid #ccc; border-right:1px solid #ccc; background:#fff; padding-bottom:65px;}
.winlogin_form { margin:50px 0 0 50px;  padding-right:50px; border-right:1px solid #e3e3e3; display:inline; width:262px;}
.winlogin_form p { position:relative;}
.winlogin_form .inputlabel { position:absolute; left:40px; line-height:40px; font-size:16px; color:#ccc; cursor:text;}
.xuser_name ,.xuser_pwd { width:262px; height:40px; background:url(http://www.xbiao.com/images/winlogin.png) top left; background-position:0 -70px;}
.xuser_name input,.xuser_pwd input { border:0; height:34px; margin-left:35px; margin-top:3px; width:220px; font-size:16px; line-height:34px; color:#333;outline:none;}
.xuser_pwd { background-position:0 -110px; margin-top:20px;}
.winlogin_smt { margin-top:20px; overflow:hidden; position:relative;_zoom:1;}
.xuser_submit { display:inline-block; width:105px; height:40px;background:url(http://www.xbiao.com/images/winlogin.png) top left; background-position:-105px 0; border:0; cursor:pointer; float:left;}
.winlogin_smt .remepwd { width:140px; height:15px; line-height:15px;left:18px; *left:15px; top:12px;font-family:Verdana, Geneva, sans-serif; display:inline-block; float:left; position:relative; color:#333;}
.winlogin_smt .remepwd input { display:inline;position:relative; left:-3px; top:1px; float:left; width:13px; height:13px;}
.winlogin_smt .remepwd label { float:left;}
.winlogin_smt .remepwd a { float:right; color:#960;}
.winlogin_wbqq { padding:50px 20px;}
.wbqq { margin-top:25px; margin-left:10px; overflow:hidden;_zoom:1;}
.wbqq a { width:47px; display:inline-block; float:left; padding-top:50px;background:url(http://www.xbiao.com/images/winlogin.png) top left; white-space:nowrap; color:#333; text-align:center;}
.wbqq a:hover { text-decoration:underline; color:#333;}
.wbqq a.login_qq { margin-left:30px; background-position:-50px 0;}
.wbqq a.login_wx { margin-left:30px; background-position:-273px 0;}
.winlogin_foot { width:100%; height:5px; background:url(http://www.xbiao.com/images/winlogin_f.png) no-repeat; overflow:hidden;}





/* 页面登录弹框 */
/* 内容 */
.winlogin .reg_area{width: 408px;height: 590px;background: #fff; position: absolute; top: 45px; left: 50%;}
.winlogin .reg_container{width: 408px;height: 590px;}
.winlogin .regiterform{display: block;padding: 50px 0 0 103px;}

/*  表单  */
.winlogin .reg_form{width: 408px;}
.winlogin .reg_nav{height: 54px;}
.winlogin .reg_nav a{display: block;width: 50%;height: 54px;line-height:54px;font-size: 18px;color: #fff;text-align: center;background: #74381e;}
.winlogin .reg_nav a.act{ background: #fff; color: #74381e;}
.winlogin .reg_item{position: relative; margin: 20px auto 30px; width: 325px;}
.winlogin .text_box{position: relative;width: 323px;/*height: 27px;*/border: 1px solid #bbb;padding: 3px 0;border-radius: 23px;}
.winlogin .reg_icon{position: relative;width: 37px;height: 40px;}
.winlogin .reg_icon i{display: block;width: 37px;height: 40px;margin-left: 2px;background: url(http://www.xbiao.com/images/pc/pub/login2020-icon.png) no-repeat;}
.winlogin .reg_box{position: relative;width: 285px;height: 40px;}
.winlogin .reg_label{position: absolute;top: 0;left: 0;height: 27px;line-height: 27px;padding-left: 12px;font-size: 12px;color: #aaa;cursor: text;}
.winlogin .fsd_form1 .reg_label,.winlogin .fsd_form1 .reg_input{padding-left: 7px;}
.winlogin .reg_input{outline: none;width: 250px;height: 40px;padding: 0 12px;border: none;line-height: 27px;font-size: 16px;color: #000;overflow: hidden;}
.winlogin .del_con{ z-index: 99;cursor: pointer; width: 13px; height: 12px; background: url(http://www.xbiao.com/images/pc/pub/del.png);position: absolute; right: 16px;top: 14px;display: none;}

/* input 框 全面 icon */
.winlogin .reg_form .oversea{display: none;}
.winlogin .reg_form .per_icon i{background-position: 10px -64px;}
.winlogin .reg_form .lock_icon i{background-position: 10px -28px;}
.winlogin .reg_form .verify_icon i{background-position: 10px -96px;}
.winlogin .reg_form .phone_icon i{background-position: 10px 8px;}
.winlogin .reg_form .username_icon i{ background: url(http://www.xbiao.com/images/pc/pub/icon_username.png)  no-repeat 10px center;}

/* 短息验证码 图片验证 */
.winlogin .verifyCode,.winlogin .smsCode{ overflow: hidden;position: relative;width: 220px;height: 40px;border: 1px solid #bbb;padding: 3px 0;margin-right: 5px; border-bottom-left-radius: 24px;border-top-left-radius: 24px;}
.winlogin .verifyCode.error,.winlogin .text_box.error,.smsCode.error{border-color: #f00;}
.winlogin .verifyCode .reg_label{top: 3px;padding-left: 7px;}
.winlogin .verifyCode .reg_input{width: 119px;height: 27px;padding: 0 7px;}
.winlogin .smsCode .reg_label{position: absolute;top: 3px;left: 0;height: 27px;overflow: hidden;line-height: 27px;padding-left: 7px;font-size: 12px;color: #aaa;cursor: text;}
.winlogin .smsCode .reg_input{outline: none;width: 170px;height: 40px;padding: 0 7px;border: none;line-height: 27px;font-size: 16px;color: #000;overflow: hidden;}
.winlogin .sms_txt a{ display: none; width: 97px; height: 48px; font-size: 14px; background: #74381e; color: #fff; line-height:48px; border-bottom-right-radius: 24px;border-top-right-radius: 24px; text-align: center; cursor:pointer; }
.winlogin .sms_txt span{ display: block; width: 97px; height: 48px; font-size: 14px; background: #eeeeee; color: #999999; line-height:48px; border-bottom-right-radius: 24px;border-top-right-radius: 24px; text-align: center; cursor:default; }
.winlogin .sms_txt.act a{display: block;}
.winlogin .sms_txt.act span{ display: none;}
.winlogin .smsCode_input{ width: 180px;}


/* 点击按钮进行验证 */
.winlogin .verify_btn{ display: block; width: 325px; height: 48px; background: url(http://www.xbiao.com/images/pc/pub/login2020-btn.png) no-repeat;}
.winlogin .verify_btn:hover{ background: url(http://www.xbiao.com/images/pc/pub/login2020-btn-hover.png) no-repeat; }
.winlogin .verify_text{ font-size: 16px; color: #999999; line-height:48px;margin-left: 12px;}
.winlogin .verify_box {margin-bottom: 16px;}
.winlogin .reg_btn{margin-top: 25px;}

/* 登录按钮 */
.winlogin .reg_loginbtn{position: relative;width: 325px; margin: 0 auto;}
.winlogin .reg_submit,.winlogin .reg_loginIn,.reg_binding{display: block;width: 325px; border-radius: 24px;height: 48px;line-height: 48px;text-align: center;background: #74381e;font-size: 18px;color: #fff;outline: none;border:none;cursor: pointer;}
.winlogin .reg_btn span,.winlogin .reg_bind span{display: block;font-size: 12px;line-height: 20px;color: #959595;width: 325px;text-align: center;margin-top: 4px;}
.winlogin .reg_bind span{text-align: left;}
.winlogin .reg_btn span a,.winlogin .reg_bind span a{color: #74381e;}

/* 忘记密码 || 注册账号 */
.winlogin .forget_password{margin-right: 10px; float: right;font-size: 14px;line-height: 20px;color: #74381e;margin-bottom: 5px;}
.winlogin .register_new_user{margin-left: 10px;float: left;font-size: 14px;line-height: 20px;color: #74381e;margin-bottom: 5px;}

/* 自动登录 || 网站服务协议 */
.winlogin .safe{position: relative;margin-top: 8px;width: 307px;overflow: hidden;line-height: 17px;padding-left: 18px;}
.winlogin #UserLogin_rememberMe,.winlogin #UserLogin_treaty{display: none;}
.winlogin .autoLogin_box{position: absolute;top: 0;left: 0; width: 16px;height: 17px;background: url(http://www.xbiao.com/images/pc/pub/login2020_box.png) 0 0 no-repeat;cursor: pointer;}
.winlogin .autoLogin_box.sel{background-position: -17px 0;}
.winlogin .safe span{display: inline-block;font-size: 12px;color: #000; margin-left: 6px;}
.winlogin .safe span em{font-size: 10px;color: #cfcfcf; margin-left: 12px;}
.winlogin .safe span a { color: #74381e;}
.winlogin .see_treaty  span{color: #999;}
.winlogin #UserLogin_treaty{display: none;}
.winlogin .treaty_box{position: absolute;top: 0;left: 0; width: 16px;height: 17px;background: url(http://www.xbiao.com/images/pc/pub/login2020_box.png) 0 0 no-repeat;cursor: pointer;}
.winlogin .treaty_box.sel{background-position: -17px 0;}
.winlogin .autoLogin_bt,.winlogin .treaty_bt {cursor: pointer }
.winlogin .treaty_bt_box .treaty_bt{  font-size: 12px;color: #999;margin-left: 0;}

/* 报错提示 */
.winlogin .need{position: absolute;top: 13px;left: -16px;width: 7px;height: 7px;background: url(http://www.xbiao.com/images/pc/pub/register_icon.png) 0 -301px no-repeat;}
.winlogin .error_prompt{position: absolute;top: 50px;left: 40px;height: 25px;line-height: 25px;width: 285px;background: #fff;}
.winlogin .error_icon{position: absolute;left: 0;top: 5px;width: 14px;height: 14px;background: url(http://www.xbiao.com/images/pc/pub/register_icon.png) 0 -246px no-repeat;}
.winlogin .error_info{font-size: 12px;color: #f00;padding-left: 24px;}
.winlogin .error_info a{color: #74381e;}
.winlogin .reg_loginbtn .error_prompt{top: 0;}


/* 其他登录方式 */
.winlogin .thirdland{width: 325px; margin: 35px auto 0; }
.winlogin .thirdland p{font-size: 16px;line-height: 20px;color: #000;}
.winlogin .thirdland_container{margin-top: 16px;}
.winlogin .thirdland_container li{float: left;width: 64px;text-align: center;}
.winlogin .thirdland_container li.login_weixin,.thirdland_container li.login_weibo{margin-right: 66px;}
.winlogin .thirdland_container li i{display: block;width: 66px;height: 66px;background: url(http://www.xbiao.com/images/pc/pub/login2020-logo.png) no-repeat;}
.winlogin .thirdland_container li.login_qq i{background-position: -88px 0;}
.winlogin .thirdland_container li.login_weibo i{background-position: -88px -176px;}
.winlogin .thirdland_container li.login_weixin i{background-position:  -88px -88px;}
.winlogin .thirdland_container li.login_qq:hover i{background-position: 0 0;}
.winlogin .thirdland_container li.login_weibo:hover i{background-position: 0 -176px;}
.winlogin .thirdland_container li.login_weixin:hover i{background-position: 0 -88px;}
.winlogin .thirdland_container li span{display: block;font-size: 14px;line-height: 20px;color: #000;margin-top: 10px;}

/* 页面弹框登录 */
.winlogin{width:408px;height:590px;}
.winlogin #open_fn {top:0;left:0;}
.winlogin .user_login{display: none;}
.winlogin .x_closewin{width: 54px;height: 54px;background: rgba(0,0,0,0.2) url(http://www.xbiao.com/images/pc/pub/del_2.png) no-repeat center center;right: -54px;top: 0;}
.winlogin .reg_item.code{ margin-bottom: 21px;margin-top: 25px; }

/*flash广告*/
.flashadlink { position: relative; }
.flashadlink object { vertical-align: top; }
.flashadlink img { vertical-align: inherit; display: inline-block;}
.flashadlink .box_h { position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; background: url(http://www.xbiao.com/images/opacity.gif); }
.adlabel_right,.adlabel_left { position: relative; }
.adlabel_right:after { content: ""; position: absolute; right: 15px; top: 15px; width: 45px; height: 25px; background: url(http://www.xbiao.com/images/pc/pub/adlabel.png); }
.adlabel_left:after { content: ""; position: absolute; left: 15px; top: 15px; width: 45px; height: 25px; background: url(http://www.xbiao.com/images/pc/pub/adlabel.png); }

/* 珠宝文章样式覆盖 */
mark{display: block; text-align: center; background: #fff; font-size: 14px; line-height: 14px; color: #4e4e4e}

#aliyunCaptcha-puzzle { transition: none;}
/*!******************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/css/components/share/share.css ***!
  \******************************************************************************************************************/
/*share*/
.wrap_share {width: 120px;height: 28px;line-height: 28px;margin-right: 20px}
.share_btn {width: 120px;height: 28px;display: flex;align-items: center;justify-content: space-between;}
.share_btn .bds_tsina,.share_btn .bds_qzone,.share_btn .bds_tqq,.share_btn .bds_renren,.share_btn .bds_douban,.share_btn .bds_weixin{ display: inline-block; background-image:url(../../../images/static/diving-watch/ii.png);background-repeat:no-repeat; width: 18px; height: 18px;}
.share_btn .bds_tsina { background-position:1px -39px!important ;}
.share_btn .bds_tsina:hover { background-position:1px 0px!important ;}
.share_btn .bds_qzone { background-position:-43px -39px!important ;}
.share_btn .bds_qzone:hover { background-position:-43px 0px!important ;}
.share_btn .bds_tqq { background-position:-21px -39px!important ;}
.share_btn .bds_tqq:hover { background-position:-21px 0px!important ;}
.share_btn .bds_weixin { background-position:-111px -39px!important ;}
.share_btn .bds_weixin:hover { background-position:-111px 0px!important ;}
.share_qrcode{position:fixed;top:50%;left:50%;margin-left:-125px;margin-top:-150px;z-index:99;border:1px solid #ccc;background:white;padding:10px;}
.share_qrcode i{font-style:normal;font-size:12px;font-weight:bold;}
.share_qrcode b{font-style:normal;font-size:16px;font-weight:bold;position:absolute;right:15px;top:10px;color:#990;cursor:pointer;}
.share_qrcode img{display:block;margin:15px auto;}
.share_qrcode em{font-style:normal;font-size:12px;font-weight:normal;display:block;width:100%;color:#666;}

/*!********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/css/components/footer/footer.css ***!
  \********************************************************************************************************************/

/*footer*/
.pubfooter {position: relative;clear:both; background-color: #000; margin-left:auto; margin-right:auto; font-size:12px;}
.footer {text-align:center;margin:0 auto;}
.copyright{text-align:center;line-height:52px;color:#999; }
.foot_top {font-size:12px;line-height:24px; color:#999; text-align:center; height:24px;padding-top:40px;}
.foot_top .gray0{ color:#999;}
.foot_top .wbfoot{ background:url(http://www.xbiao.com/images/index/v_xbiao.png) no-repeat 0 2px; *background-position:left center; padding-left:20px; }
.footline{ display: inline-block; height:24px; line-height:24px; font-size:12px; vertical-align:middle; margin:0 10px; color:#999; font-family:"Sim Sun"}
.foot_top a { color:#999; display:inline-block;}
.foot_top a:hover { background:none; color:#999;text-decoration:underline;}
.iphone_ico i,.android_ico i,.telphone_ico i{ background:url(../../../images/static/diving-watch/ico_phone.png) no-repeat -3px 0; display:inline-block;width:18px; height:20px;padding-right:5px; vertical-align:middle;margin-top:-4px;*margin-top:0;margin-left:2px; opacity:.8;filter:alpha(opacity=80);}
.android_ico i{ background-position:-1px -26px;width:21px; height:24px; line-height:24px;margin-left:13px;}
.telphone_ico i{ background-position:-6px -59px;width:11px; height:22px; line-height:22px;margin-left:12px;}




/*!*************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/css/style.css ***!
  \*************************************************************************************************/
.pr{position: relative;}
.pa{position: absolute;}
.scale {
	overflow: hidden;
}

.scale img {
	transition: transform 500ms;
	vertical-align: top;
}

.scale:hover img {
	transform: scale(1.06);
}

.hide {
	display: none;
}

.show {
	display: block;
}

.cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*top*/
.nav-top-bg {
	position: relative;
	width: 100%;
	height: 30px;
	background: #f7f7f7;
	line-height: 28px;
	font-family: Verdana;
	z-index: 12;
	font-size: 12px;
}

.nav-top-bg span a {
	color: #773b09;
}

.nav-top-bg span a:hover {
	background-color: #f7f7f7;
	color: #773b09;
}

.nav-top {
	overflow: hidden;
}

.i_logo {
	margin-top: 3px;
}

.back {
	float: right;
	display: block;
	width: 80px;
	text-align: right;
}

.more {
	color: #b19651;
}

.more a {
	color: #b19651;
}

.more a:hover {
	color: #fff;
}

/*container*/
.wrapper {
	margin: auto;
	width: 1200px;
	height: 100%;
}

.wrapper1200 {
	margin: 0 auto;
	width: 100%;
}

.wrapper-bg {
	background: #fff;
}

.container {
	margin: 0 auto;
	width: 1200px;
}

/* pages */

/* .stage{width: 100%; height: calc( 100vh - 30px - 126px ); margin: 0 auto; } */
.stage {
	width: 100%;
	height: calc(100vh - 30px - 0px);
	max-height: 901px;
	margin: 0 auto;
}

.stage>.swiper {
	width: 100%;
	height: 100%;
}

.stage>.swiper>.swiper-slide {
	width: 100%;
	height: 100%;
	font-size: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.page {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
}

.page1 {
	background-image: url(../../../images/static/diving-watch/bg1.jpg);
}

.page2 {
	background-image: url(../../../images/static/diving-watch/bg2.jpg);
}
.page3,
.page4,
.page5,
.page6,
.page7,
.page8,
.page9,
.page10,
.page11,
.page12,
.page13,
.page14{
	background-image: url(../../../images/static/diving-watch/bg3.jpg);
}
/* .page13{
	background-image: url(./css-images/bg13.jpg);
} */



.content {
	width: 100%;
	height: 100%;
	position: relative;
}

/* page1 */
/* .content1 {
	position: relative;
} */


/**==============================================
 * *              首页大图布局&动画
 *   
 *   
 *   
 *
 *=============================================**/

/* .main-pic {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -419px;
	margin-top: -350px;
	width: 837px;
	height: 575px;
	background-image: url(./css-images/main-pic.png);
	background-position: center center;
	background-size: cover;
	animation: fadeIn 2s .6s both;
} */
.main {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -419px;
	margin-top: -350px;
	width: 869px;
	height: 575px;
	/* background-color: pink; */
	background-image: url(../../../images/static/diving-watch/main-bg2.png);
	background-position: center center;
	background-size: cover;
	animation: fadeIn 2s .6s both;
}
.main .main-font1{
	position: absolute;
    left: 59px;
    top: 34px;
}
.main .main-font2{
    left: 30px;
    top: 184px;
}
.main .main-font3{
	left: 90px;
    top: 366px;
}
.main .main-sea-star1{
	left: 60px;
    top: 453px;
	animation: shakeX 30s -3s infinite;

}
.main .main-sea-star2{
	left: 380px;
    top: 314px;
	animation: shakeY 80s -3s infinite;
}
.main .main-lifebuoy{
    left: 534px;
    top: 0;
	animation: shakeX 50s -4s infinite;
}
.main .main-fash{
	left: 777px;
    top: 74px;
	animation: fash-jump 4s -.8s infinite backwards;
}
.main .main-water{
	left: 650px;
    top: 106px;
	animation: water-fade-out 4s 0s infinite;
	transform-origin: left bottom;

}
@keyframes fash-jump {
	0% {
		opacity: 1;
		transform: translate(0px, 0px);
	}
	40% {
		opacity: 1;
		transform: translate(-150px, 150px);
	}
	50% {
		opacity: 0;
		transform: translate(-150px, 150px);
	}
	60% {
		opacity: 0;
		transform: translate(0px, 0px);
	}
	70% {
		opacity: 1;
		transform: translate(0px, 0px);
	}
	100% {
		opacity: 1;
		transform: translate(0px, 0px);
	}
}
@keyframes water-fade-out {
	0% {
		opacity: 0;
		transform: scale(1);
	}
	15% {
		opacity: 1;
		transform: scale(1);
	}
	30% {
		opacity: 1;
		transform: scale(1.1);
	}
	50% {
		opacity: 0;
		transform: scale(1.2);
	}
	100% {
		opacity: 0;
		transform: scale(1.2);
	}
}














.start-wrpper{
	animation: fadeIn 2s 1s 1 both;
}
.start {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -73px;
	margin-top: 260px;
	width: 146px;
	height: 80px;
	background-image: url(../../../images/static/diving-watch/start.png);
	background-position: center center;
	background-size: cover;
	animation: bounce 5s 1s infinite both;
}

/* page2 */
.content2 {
	position: relative;
}

.white-board {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -598px;
	margin-top: -360px;
	width: 1196px;
	height: 628px;     /* display: none; */
}

.white-board2{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -550px;
	margin-top: -360px;
	width: 1101px;
	height: 601px;
}
/* font */
.font-ani{
	animation: pulse 1s  -1s infinite;
}
.font-byj{
	left: 50%;
	bottom: 17px;
	margin-left: -46px;
	animation-delay: -.3s;
}
.font-gzh{
	left: 50%;
	bottom: 20px;
	margin-left: -60px;
	animation-delay: -.2s;
}
.font-cgz{
	left: 50%;
	bottom: 17px;
	margin-left: -46px;
	animation-delay: -.9s;
}
.font-wxz{
	left: 50%;
	bottom: 20px;
	margin-left: -60px;
	animation-delay: -.8s;
}



.cloud{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: 230px;
	margin-top: -390px;
	animation: shakeX 30s infinite;
}

.option {
	position: absolute;
}

.option1 {
	left: 50%;
	top: 50%;
	margin-left: -565px;
	margin-top: -315px;
}

.option2 {
	left: 50%;
	top: 50%;
	margin-left: -290px;
	margin-top: -210px;
}

.option3 {
	left: 50%;
	top: 50%;
	margin-left: 10px;
	margin-top: -290px;
}

.option4 {
	left: 50%;
	top: 50%;
	margin-left: 288px;
	margin-top: -247px;
}

.diving-man {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -654px;
	margin-top: -4px;
}

.sea-star {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: 510px;
	margin-top: 137px;
}

.watch-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: 474px;
	margin-top: 179px;
}
.watch-icon4 {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: 530px;
	margin-top: -280px
}
.watch-icon img{
	animation: pulse 2s -1s infinite
}
.watch-icon4 img{
	animation: pulse 5s  -3s infinite
}

@keyframes swiming {
	0% {
		opacity: 0;
		transform: translateX(0px);
	}
	10% {
		opacity: 1;
		transform: translateX(0px);
	}

	90% {
		opacity: 1;
		transform: translateX(-800px);
	}
	100% {
		opacity: 0;
		transform: translateX(-800px);
	}
}

.area-btn {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: 300px;
	margin-top: 220px;
	animation: swiming 30s infinite;
}

/**========================================================================
 * *                                page3
 *   
 *   
 *   
 *
 *========================================================================**/
.pac {
	position: absolute;
	left: 50%;
	top: 50%;
}

.student {
	margin-left: -486px;
	margin-top: -300px;
}

.parent {
	margin-left: 306px;
	margin-top: -47px;
}
.btn-group3,
.btn-group2,
.btn-group1{
	display: none;
}


.chat1,
.chat2,
.chat3,
.chat4,
.chat5,
.chat6,
.chat7,
.chat8,
.chat2{
	opacity: 0;
}
.chat-fadein-up0{opacity:1; animation:fadeInUp .8s  1 both;}
.chat-fadein-up1{opacity:1; animation:fadeInUp .8s .5s 1 both;}
.chat-fadein-up2{opacity:1; animation:fadeInUp .8s 1s 1 both;}
.chat-fadein-up3{opacity:1; animation:fadeInUp .8s 1.5s 1 both;}
.chat-fadein-up4{opacity:1; animation:fadeInUp .8s 2s 1 both;}

.parent-speak1{
	opacity: 0;
}
.fadein-right{
	animation: person-fadein-right 1s 1 1s forwards;
}
@keyframes person-fadein-right {
	0% {
		opacity: 0;
		transform: translateX(200px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}


.ani-start{
	animation: yaoyiyao 3s infinite;
} 
.ani-end{
	animation: none;
}

/*  */
@keyframes longflash {
	0% {
		opacity: 0.1;
	}
	5% {
		opacity: 1;
	}
	10% {
		opacity: 0.1;

	}
	15% {
		opacity: 1;

	}
	20% {
		opacity: 0.1;

	}
	25% {
		opacity: 1;
	}
	100% {
		opacity: 1;

	}
}

@keyframes yaoyiyao {
	0% {
		transform: translateX(5px);
	}
	5% {
		transform: translateX(-5px);
	}
	10% {
		transform: translateX(5px);

	}
	15% {
		transform: translateX(-5px);
	}
	20% {
		transform: translateX(5px);
	}
	25% {
		transform: translateX(0px);
	}
	100% {
		transform: translateX(0px);
	}
}





.worker{
	margin-left: -486px;
	margin-top: -300px;
}
.worker2{
	margin-left: 266px;
    margin-top: -197px;
}

.business-man{
	margin-left: -376px;
	margin-top: -280px;
}
.business-man2{
	margin-left: 296px;
    margin-top: -142px;
}


.chat {
	font-size: 20px;
	line-height: 56px;
	height: 56px;
	padding: 0 1.5em;
	border-radius: 25px;
}

.chat-a {
	background-color: #fff;
}

.chat-a::after {
	position: absolute;
	left: 30px;
	bottom: -20px;
	content: "";
	width: 20px;
	height: 20px;
	background: url(../../../images/static/diving-watch/chat-a.png) no-repeat 100% 0;
}

.chat-b {
	background-color: #ffe8a1;
}

.chat-b span{
	color: #d36412;
}

.chat-b::after {
	position: absolute;
	right: 35px;
	bottom: -20px;
	content: "";
	width: 20px;
	height: 20px;
	background: url(../../../images/static/diving-watch/chat-b.png) no-repeat 100% 0;
}
.chat-c {
	background-color: #ffe8a1;
}

.chat-c::after {
	position: absolute;
	left: 30px;
	bottom: -20px;
	content: "";
	width: 20px;
	height: 20px;
	background: url(../../../images/static/diving-watch/chat-c.png) no-repeat 100% 0;
}
/* chat-1 */
.chat-a-1-1 {
	margin-left: -281px;
	margin-top: -260px;
}

.chat-a-1-2 {
	margin-left: -210px;
	margin-top: -195px;
}

.chat-a-1-3 {
	margin-left: -288px;
	margin-top: -119px;
}

.chat-b-1-1 {
	margin-left: 118px;
	margin-top: -59px;
}

.chat-b-1-2 {
	margin-left: -257px;
	margin-top: 12px;
}

.chat-b-1-3 {
	margin-left: 63px;
	margin-top: 93px;
}

/* chat-2 */
.parent-pos2{
	margin-left: 246px;
    margin-top: -120px;
}
.chat-b-2-1 {
    margin-left: 16px;
    margin-top: -146px;
}

.chat-b-2-2 {
	margin-left: -147px;
    margin-top: -69px;
}

.chat-b-2-3 {
	margin-left: 43px;
    margin-top: -25px;
}
.chat-b-2-4 {
    margin-left: -12px;
    margin-top: 75px;
}
/* chat-3 */
.chat-a-3-1 {
    margin-left: -185px;
    margin-top: -270px;
}

.chat-a-3-2 {
	margin-left: -255px;
    margin-top: -195px;
}

.chat-a-3-3 {
	margin-left: -133px;
    margin-top: -119px;
}

.chat-a-3-4 {
	margin-left: -292px;
    margin-top: -39px;
}

.chat-b-3-1 {
    margin-left: 43px;
    margin-top: 72px;
}
/* chat-4 */
.chat-b-4-1 {
    margin-left: -113px;
    margin-top: -188px;
}

.chat-b-4-2 {
    margin-left: -43px;
    margin-top: -98px;
}
.chat-b-4-3 {
    margin-left: -113px;
    margin-top: 8px;
}

.chat-b-4-4 {
    margin-left: -50px;
    margin-top: 109px;
}
/* chat-5 */
.chat-a-5-1 {
	margin-left: -125px;
    margin-top: -247px;
}

.chat-a-5-2 {
	margin-left: 5px;
    margin-top: -181px;
}

.chat-a-5-3 {
    margin-left: -149px;
    margin-top: -95px;
}

.chat-a-5-4 {
	margin-left: 68px;
    margin-top: -27px;
}
.chat-c-5-1 {
	margin-left: -254px;
    margin-top: 43px;
}
/* chat-6 */
.chat-b-6-1 {
    margin-left: -78px;
    margin-top: -160px;
}

.chat-b-6-2 {
    margin-left: -170px;
    margin-top: -44px;
}

.chat-b-6-3 {
    margin-left: -99px;
    margin-top: 60px;
}
/* select-watch-btn */
.select-watch-btn {
	margin-left: -103px;
	margin-top: 276px;
	animation: shakeX 20s -1s infinite;
}
.select-watch-btn1,
.select-watch-btn2,
.select-watch-btn3
{
	display: none;
}
/**=======================
 *     fash-bubble
 *  
 *  
 *========================**/
.fash-bubble{
	position: absolute;
	left: 0px;
	top: 30px;
	width: 5px;
	height: 5px;
	border: 1px solid #fe9e2f;
	background-color: #fff;
	border-radius: 50%;
	animation: fash-bubble 4s infinite;
	
}
.fash-bubble1{
	animation-delay: -1s;
}
.fash-bubble2{
	animation-delay: -2s;
}
.fash-bubble3{
	animation-delay: -3s;
}
@keyframes fash-bubble {
	0% {
		opacity: 1;
		transform: translate(0px, 0px) scale();
	}
	15% {
		opacity: 1;
		transform: translate(-5px, -10px) scale(1);
	}
	100% {
		/* transform: translate(-20px,-20px); */
		opacity: 0;
		transform: translate(10px, -30px) scale(0.8);
	}
}


/**========================================================================
 * *                                bubbles-wrapper
 *   
 *   
 *   
 *
 *========================================================================**/

ul.bubbles-wrapper{
	position: absolute;
	/* left的值可以 -200 到 1400*/
	left: 0;
	top: 50%;
	margin-top: 500px;
	width: 100%;
	height: 20px;
	/* background-color: red; */
}
ul.bubbles-wrapper li{
	position: absolute;
	left: 0;
	bottom: -150px;
	/* background-color: pink; */
	/* width: 20px;
	height: 20px;
	border: 2px solid #fff;
	border-radius: 50%; */
}
.bubble0{
	width: 36px;
	height: 36px;
	background: url(../../../images/static/diving-watch/bubble1.png) no-repeat center center;
	animation:bubble1 50s infinite;

}
.bubble1{
	width: 33px;
	height: 33px;
	background: url(../../../images/static/diving-watch/bubble2.png) no-repeat center center;
	animation:bubble2 40s infinite;
}
.bubble2{
	width: 20px;
	height: 20px;
	background: url(../../../images/static/diving-watch/bubble3.png) no-repeat center center;
	animation:bubble3 30s infinite;
}
.bubble3{
	width: 13px;
	height: 13px;
	background: url(../../../images/static/diving-watch/bubble4.png) no-repeat center center;
	animation:bubble4 20s infinite;
}
.bubble4{
	width: 25px;
	height: 25px;
	background: url(../../../images/static/diving-watch/bubble1.png) no-repeat center center;
	background-size: cover;
	animation:bubble5 10s infinite;
}


@keyframes bubble1 {
	0% {
		/* opacity: .5; */
		transform: translate(20px,-100px);
	}
	25% {
		opacity: 1;
		transform: translate(-20px,-200px);

	}
	50% {
		opacity: 1;
		transform: translate(20px,-300px);
	}
	70% {
		opacity: .8;
		transform: translate(-20px,-400px);
	}
	100% {
		/* opacity: .5; */
		transform: translate(20px,-500px);
	}
}
@keyframes bubble2 {
	0% {
		/* opacity: .5; */
		transform: translate(20px,-100px);
	}
	25% {
		opacity: 1;
		transform: translate(-30px,-200px);

	}
	50% {
		opacity: 1;
		transform: translate(30px,-300px);
	}
	70% {
		opacity: .8;
		transform: translate(-30px,-400px);
	}
	100% {
		/* opacity: .5; */
		transform: translate(20px,-500px);
	}
}
@keyframes bubble3 {
	0% {
		/* opacity: .5; */
		transform: translate(20px,-100px);
	}
	25% {
		opacity: 1;
		transform: translate(-40px,-200px);

	}
	50% {
		opacity: 1;
		transform: translate(50px,-300px);
	}
	70% {
		opacity: .8;
		transform: translate(-40px,-400px);
	}
	100% {
		/* opacity: .5; */
		transform: translate(20px,-800px);
	}
}
@keyframes bubble4 {
	0% {
		/* opacity: .5; */
		transform: translate(0px,-100px);
	}
	100% {
		opacity: 1;
		transform: translate(200px,-500px);
	}
}
@keyframes bubble5 {
	0% {
		/* opacity: .5; */
		transform: translate(0px,-100px);
	}
	100% {
		opacity: 1;
		transform: translate(-200px,-500px);
	}
}

/* 选表1 */
.click-select-watch-btn{
	margin-left: -123px;
	margin-top: 256px;
}

.watch-item{
	display: flex;
	flex-direction: column;
	align-items: center;
	/* background-color: red; */
}
.watch-pic{
	padding-bottom: 10px;
}
.watch-name{
	font-size: 16px;
	line-height: 24px;
	height: 24px;
	padding: 0 10px;
}
.bg-yellow{
	position: relative;
	background-color: #ffe8a1;
}
.bg-yellow::before{
	position: absolute;
	right: 100%;
	top: 0;
	content: "";
	width: 0;
	height: 0;
	border-top: 12px solid transparent;
	border-right: 4px solid #ffe8a1;
	border-bottom: 12px solid #ffe8a1;
	border-left: 4px solid transparent;
}
.bg-yellow::after{
	position: absolute;
	left: 100%;
	top: 0;
	content: "";
	width: 0;
	height: 0;
	border-top: 12px solid #ffe8a1;
	border-right: 4px solid transparent;
	border-bottom: 12px solid transparent;
	border-left: 4px solid #ffe8a1;
}

.bg-blue{
	position: relative;
	background-color: #1573ff;
	color: #fff;
}
.bg-blue::before{
	position: absolute;
	right: 100%;
	top: 0;
	content: "";
	width: 0;
	height: 0;
	border-top: 12px solid transparent;
	border-right: 4px solid #1573ff;
	border-bottom: 12px solid #1573ff;
	border-left: 4px solid transparent;
}
.bg-blue::after{
	position: absolute;
	left: 100%;
	top: 0;
	content: "";
	width: 0;
	height: 0;
	border-top: 12px solid #1573ff;
	border-right: 4px solid transparent;
	border-bottom: 12px solid transparent;
	border-left: 4px solid #1573ff;
}

.watch-point{
	position: absolute;
	left: 100%;
	top: 50%;
	margin-left: -60px;
	margin-top: 30px;
	width: 19px;
	height: 19px;
	text-align: center;
	background-color: blue;
	border: 2px solid #fff;
	border-radius: 50%;
	box-sizing: border-box;
}
.watch-point::before{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -3.5px;
	margin-top: -.6px;
	content: "";
	width: 7px;
	height: 1px;
	background-color: #fff;
	z-index: 888;
}
.watch-point::after{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -3.5px;
	margin-top: -.6px;
	content: "";
	width: 7px;
	height: 1px;
	background-color: #fff;
	transform: rotateZ(90deg);
	transform-origin: center center;
}

.watch-attr{
	position: absolute;
	width: 230px;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 999;
	color: #fff;
	padding-top: 30px;
	box-sizing: border-box;
	overflow: hidden;
}

.watch-attr ul{
	display: block;
	width: 200px;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}
.watch-attr ul li{
	max-width: 200px;
	line-height: 35px;
	font-size: 14px;
}

.watch-close{
	position: absolute;
	right: -10px;
	bottom: -10px;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	background-color: #274883;
}
.watch-close::before{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -13px;
	margin-top: -3px;
	content: "";
	width: 20px;
	height: 1px;
	transform: rotateZ(-45deg);
	background-color: #fff;
}
.watch-close::after{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -13px;
	margin-top: -3px;
	content: "";
	width: 20px;
	height: 1px;
	background-color: #fff;
	transform: rotateZ(45deg);
	transform-origin: center center;
}


/* one */
.watch-chat-one-1{
	margin-left: -505px;
	margin-top: -320px;
}
.watch-chat-one-2{
	margin-left: -255px;
	margin-top: -190px;
}
.watch-chat-one-3{
	margin-left: 5px;
	margin-top: -320px;
}
.watch-chat-one-4{
	margin-left: 265px;
	margin-top: -190px;
}
/* two */
.watch-chat-two-1{
	margin-left: -447px;
	margin-top: -320px;
}
.watch-chat-two-2{
	margin-left: -111px;
	margin-top: -190px;
}
.watch-chat-two-3{
	margin-left: 203px;
	margin-top: -320px;
}
.watch-chat-two-4{
	margin-left: 265px;
	margin-top: -190px;
}
/* 展示手表 */
.watch-show{
	margin-left: -450px;
    margin-top: -300px;
	width: 400px;
}

.return{
    margin-left: -250px;
    margin-top: 258px;
}
.next-area{
	margin-left: 41px;
    margin-top: 259px;
}
.return img{	
	animation: shakeX 30s 3s infinite;
}
.next-area img{	
	animation: shakeX 40s 3s infinite;
}
.swiper-slide-active .ani{
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	/* animation-name: flash; */
}
/**========================================================================
 * *                                swiper2 & swiper3
 *   
 *   
 *   
 *
 *========================================================================**/
/* swiper2 */
.swiper2,.swiper3{
	margin-left: -550px;
	margin-top: -360px;
	width: 1101px;
	height: 601px;
	overflow: hidden;
}
.prev-btn0{
	left: 0px;
	top: 50%;
	margin-top: -50px;
	width: 50px;
	height: 100px;
	background: url(../../../images/static/diving-watch/arr.png) no-repeat 0 0;
	color:rgba(0, 0, 0, 0);
}

.next-btn0{
	right: 0px;
	top: 50%;
	margin-top: -50px;
	width: 50px;
	height: 100px;
	background: url(../../../images/static/diving-watch/arr.png) no-repeat 100% 0;
	color:rgba(0, 0, 0, 0);
}
.prev-btn{
	left: 0px;
	top: 50%;
	margin-top: -50px;
	width: 50px;
	height: 100px;
	background: url(../../../images/static/diving-watch/arr1.png) no-repeat 0 0;
	color:rgba(0, 0, 0, 0);
	animation: arrPrev 2s infinite;

}

.next-btn{
	right: 0px;
	top: 50%;
	margin-top: -50px;
	width: 50px;
	height: 100px;
	background: url(../../../images/static/diving-watch/arr1.png) no-repeat 100% 0;
	color:rgba(0, 0, 0, 0);
	animation: arrNext 2s infinite;
}
/**-----------------------
 * *       swiper中表的定位
 *  
 *  
 *------------------------**/

.watch-chat-three-1,
.watch-chat-three-4,
.watch-chat-four-1,
.watch-chat-four-4{
	left: 120px;
	top: 33px;
}
.watch-chat-three-2,
.watch-chat-three-5,
.watch-chat-four-2,
.watch-chat-four-5{
	top: 150px;
	margin-left: -110px;

}
.watch-chat-three-3,
.watch-chat-four-3{
	top: 32px;
	margin-left: 190px;

}
/**------------------------------------------------------------------------
 * *                                结果也
 *   
 *   
 *   
 *
 *------------------------------------------------------------------------**/
.result-bg{
	margin-left: -550px;
	margin-top: -358px;
}
.result-list{
	width: 1000px;
	height: 300px;
	/* background-color: pink; */
	margin-left: -500px;
	margin-top: -220px;
	display: flex;
}
.result-watch{
	position: relative;
	width: 250px;
	height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.result-watch .result-pic{
	width: 200px;
	height: 250px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.result-watch .result-pic img{
	transform: scale(0.8);
	transform-origin: top center;
}
.result-watch .result-tit{
	font-size: 14px;
	line-height: 30px;
	height: 30px;
	overflow: hidden;
}

.result-point{
	position: absolute;
	left: 100%;
	top: 50%;
	margin-left: -50px;
	margin-top: 30px;
	width: 19px;
	height: 19px;
	text-align: center;
	background-color: #1573ff;
	border: 2px solid #fff;
	border-radius: 50%;
	box-sizing: border-box;
}
.result-point::before{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -3.5px;
	margin-top: -.6px;
	content: "";
	width: 7px;
	height: 1px;
	background-color: #fff;
	z-index: 888;
}
.result-point::after{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -3.5px;
	margin-top: -.6px;
	content: "";
	width: 7px;
	height: 1px;
	background-color: #fff;
	transform: rotateZ(90deg);
	transform-origin: center center;
}
.result-attr{
	position: absolute;
	width: 230px;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 999;
	color: #fff;
	box-sizing: border-box;
	overflow: hidden;
}

.result-attr ul{
	display: block;
	width: 200px;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}
.result-attr ul li{
	max-width: 200px;
	line-height: 35px;
	font-size: 14px;
}


.show-all{
	margin-left: 400px;
	margin-top: 290px;
}
.go-home{
	margin-left: -80px;
	margin-top: 360px;
}

.share-btn{
	margin-left: -160px;
	margin-top: 290px;
}
.share-pic{
	width: 1200px;
	height: 650px;
	margin-left: -600px;
	margin-top: -400px;
	display: none;
}
.share-pic-inner{
	width: 1200px;
	height: 650px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.7);
}
.share-close{
	position: absolute;
	right: 10px;
	top: 10px;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	background-color: #274883;
}
.share-close::before{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -10px;
	margin-top: 0px;
	content: "";
	width: 20px;
	height: 1px;
	transform: rotateZ(-45deg);
	background-color: #fff;
}
.share-close::after{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -10px;
	margin-top: -0px;
	content: "";
	width: 20px;
	height: 1px;
	background-color: #fff;
	transform: rotateZ(45deg);
	transform-origin: center center;
}
/* score-wrapper */ 
.score-wrapper{
	margin-left: -150px;
	margin-top: 120px;
	width: 300px;
	height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.score-item{
	display: flex;
	justify-content: space-between;
}
.score-tit{
	width: 60px;
	line-height: 26px;
	font-size: 22px;
}
.score-heart{
	width: 34px;
	height: 26px;
	background: url(../../../images/static/diving-watch/heart.png) no-repeat 0 0;
}
.score-heart-red{
	background-position: 100% 100%;
}

.lifebuoy2{
	margin-left: 100px;
	margin-top: 350px;
	animation: shakeY 20s linear infinite;
}
.watch-icon1{
	margin-left: -500px;
	margin-top: 350px;
	animation: shakeY 30s linear infinite;
}
.watch-icon2{
	margin-left: -450px;
	margin-top: 350px;
	animation: shakeY 40s linear infinite;
}

/**========================================================================
 * *                                skeak
 *   
 *   
 *   
 *
 *========================================================================**/
.sayani{display: none;}

.last-bg{
	margin-left: -550px;
	margin-top: -380px;
}

/**========================================================================
 *                             last-wrapper
 *  
 *  
 *  
 *  
 *========================================================================**/
 .swiper4{
	margin-left: -550px;
	margin-top: -380px;
	width: 1100px;
	height: 750px;
	overflow: hidden;
	padding-top: 20px;
}
.last-wrapper{
	width: 1100px;
	height: 680px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/* align-items: flex-start; */
	/* justify-content: space-around; */
	/* background-color: rgba(0, 0, 0, 0.7); */
}
.last-item{
	position: relative;
	width: 366px;
	height: 330px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	box-sizing: border-box;
	transform: scale(0.96);
	/* background-color: rebeccapurple; */
}
.last-pic{
	display: flex;
	width: 250px;
	height: 330px;
	justify-content: center;

}
.last-pic img{
	transform: scale(0.8);
}
.last-name{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 330px;
	text-align: center;
}
.last-name a{
	color: #000;
}
.last-point{
	position: absolute;
	left: 100%;
	top: 50%;
	margin-left: -100px;
	margin-top: 30px;
	width: 19px;
	height: 19px;
	text-align: center;
	background-color: #1573ff;
	border: 2px solid #fff;
	border-radius: 50%;
	box-sizing: border-box;
}
.last-point::before{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -3.5px;
	margin-top: -.6px;
	content: "";
	width: 7px;
	height: 1px;
	background-color: #fff;
	z-index: 888;
}
.last-point::after{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -3.5px;
	margin-top: -.6px;
	content: "";
	width: 7px;
	height: 1px;
	background-color: #fff;
	transform: rotateZ(90deg);
	transform-origin: center center;
}
.last-attr{
	position: absolute;
	width: 230px;
	height: 330px;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 999;
	color: #fff;
	padding-top: 20px;
	box-sizing: border-box;
	overflow: hidden;
}

.last-attr ul{
	display: block;
	width: 200px;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}
.last-attr ul li{
	max-width: 200px;
	line-height: 35px;
	font-size: 14px;
}
.last-sea-star1{
	margin-left: -590px;
    margin-top: 200px;
	z-index: 999;
}
.last-sea-star2{
	margin-left: -490px;
    margin-top: 310px;
	z-index: 999;
	transform: scale(0.6) rotateZ(45deg);

}
.last-btn{
	background: url(../../../images/static/diving-watch/arr2.png);
	width: 48px;
	height: 90px;
	color: rgba(0, 0, 0, 0);
}
.last-prev{
	left: 0;
	top: 50%;
	margin-top: -45px;
	background-position: 0 0;
}
.last-next{
	right: 0;
	top: 50%;
	margin-top: -45px;
	background-position: 100% 0;
}
.last-btn2{
	background: url(../../../images/static/diving-watch/arr3.png);
	width: 48px;
	height: 90px;
	color: rgba(0, 0, 0, 0);
}
.last-prev2{
	left: 0;
	top: 50%;
	margin-top: -45px;
	background-position: 0 0;
	animation: arrPrev 2s infinite;
}
.last-next2{
	right: 0;
	top: 50%;
	margin-top: -45px;
	background-position: 100% 0;
	animation: arrNext 2s infinite;
}

@keyframes arrPrev {
	0% {
		transform: translateX(0);
	}
	10%{
		transform: translateX(-10px);
	}
	20% {
		transform: translateX(0);
	}
	30%{
		transform: translateX(-10px);
	}
	40% {
		transform: translateX(0);
	}
	100%{
		transform: translateX(0);
	}
}
@keyframes arrNext {
	0% {
		transform: translateX(0);
	}
	10%{
		transform: translateX(10px);
	}
	20% {
		transform: translateX(0);
	}
	30%{
		transform: translateX(10px);
	}
	40% {
		transform: translateX(0);
	}
	100%{
		transform: translateX(0);
	}
}
/**========================================================================
 * *                       macbook viewport
 *   
 *   
 *   
 *
 *========================================================================**/
@media only screen and (max-width:1440px) {

	/* page1 */

	/* .main-pic{
			    transform: scale(0.7);
			    transform-origin: center center;
			 }
			 .start{
			    transform: scale(0.7);
			    transform-origin: center center;
			 } */

	.content {
		transform: scale(0.7);
		transform-origin: center center;
	}

	.content14 {
		transform: scale(0.66);
		transform-origin: center center;
	}

}

/**==============================================
 * *                   music
 *   
 *   
 *   
 *
 *=============================================**/
.music{
	position: fixed;
	top: 50px;
	left: 50%;
	margin-left: 560px;
	z-index: 999;
	background: url(../../../images/static/diving-watch/music.png);
	width: 40px;
	height: 40px;
}
.music-play{
	background-position: 0 0;
	animation: playing 5s linear infinite;
}
.music-pause{
	background-position: 0 100%;
}

@keyframes playing {
	0% {
		transform: rotateZ(0deg);
	}
	100% {
		transform: rotateZ(360deg);
	}
	
}

.message{
	display: none;
	position: fixed;
	z-index: 999;
	left: 50%;
	top: 50%;
	margin-left: -100px;
	width: 200px;
	height: 50px;
	line-height: 50px;
	font-size: 18px;
	color: #fff;
	background: rgba(0, 0, 0, 0.7);
	text-align: center;
}

.show-message{
	display: block;
}