@charset "UTF-8";

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

main {
  display: block
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

pre {
  font-family: monospace, monospace;
  font-size: 1em
}

a {
  background-color: transparent
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: bolder
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

img {
  border-style: none
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  padding: .35em .75em .625em
}

legend {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

progress {
  vertical-align: baseline
}

textarea {
  overflow: auto
}

[type=checkbox],
[type=radio] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

details {
  display: block
}

summary {
  display: list-item
}

template {
  display: none
}

[hidden] {
  display: none
}

@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") format("woff");
  font-weight: 400;
  font-style: normal
}

:root {
  --swiper-theme-color: #007aff
}

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1
}

.swiper-container-vertical>.swiper-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-box-sizing: content-box;
  box-sizing: content-box
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

.swiper-container-multirow>.swiper-wrapper {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

.swiper-container-multirow-column>.swiper-wrapper {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

.swiper-container-free-mode>.swiper-wrapper {
  -webkit-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  margin: 0 auto
}

.swiper-slide {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform
}

.swiper-slide-invisible-blank {
  visibility: hidden
}

.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto
}

.swiper-container-autoheight .swiper-wrapper {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-transition-property: height, -webkit-transform;
  transition-property: height, -webkit-transform;
  -o-transition-property: transform, height;
  transition-property: transform, height;
  transition-property: transform, height, -webkit-transform
}

.swiper-container-3d {
  -webkit-perspective: 1200px;
  perspective: 1200px
}

.swiper-container-3d .swiper-cube-shadow,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-wrapper {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d
}

.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10
}

.swiper-container-3d .swiper-slide-shadow-left {
  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
  background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-3d .swiper-slide-shadow-right {
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-3d .swiper-slide-shadow-top {
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-css-mode>.swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none
}

.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar {
  display: none
}

.swiper-container-css-mode>.swiper-wrapper>.swiper-slide {
  scroll-snap-align: start start
}

.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper {
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory
}

.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper {
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory
}

:root {
  --swiper-navigation-size: 44px
}

.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size)/ 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size)/ 2);
  z-index: 10;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: .35;
  cursor: auto;
  pointer-events: none
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 10px;
  right: auto
}

.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  content: 'prev'
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 10px;
  left: auto
}

.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: 'next'
}

.swiper-button-next.swiper-button-white,
.swiper-button-prev.swiper-button-white {
  --swiper-navigation-color: #ffffff
}

.swiper-button-next.swiper-button-black,
.swiper-button-prev.swiper-button-black {
  --swiper-navigation-color: #000000
}

.swiper-button-lock {
  display: none
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: .3s opacity;
  -o-transition: .3s opacity;
  transition: .3s opacity;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0
}

.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%
}

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transform: scale(.33);
  -ms-transform: scale(.33);
  transform: scale(.33);
  position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  -webkit-transform: scale(.66);
  -ms-transform: scale(.66);
  transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  -webkit-transform: scale(.33);
  -ms-transform: scale(.33);
  transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  -webkit-transform: scale(.66);
  -ms-transform: scale(.66);
  transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  -webkit-transform: scale(.33);
  -ms-transform: scale(.33);
  transform: scale(.33)
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: .2
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-container-vertical>.swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0)
}

.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  display: block
}

.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 8px
}

.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  -webkit-transition: .2s transform, .2s top;
  -o-transition: .2s transform, .2s top;
  transition: .2s transform, .2s top
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px
}

.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  white-space: nowrap
}

.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transition: .2s transform, .2s left;
  -o-transition: .2s transform, .2s left;
  transition: .2s transform, .2s left
}

.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transition: .2s transform, .2s right;
  -o-transition: .2s transform, .2s right;
  transition: .2s transform, .2s right
}

.swiper-pagination-progressbar {
  background: rgba(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%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top
}

.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top
}

.swiper-container-horizontal>.swiper-pagination-progressbar,
.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0
}

.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-container-vertical>.swiper-pagination-progressbar {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0
}

.swiper-pagination-white {
  --swiper-pagination-color: #ffffff
}

.swiper-pagination-black {
  --swiper-pagination-color: #000000
}

.swiper-pagination-lock {
  display: none
}

.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, .1)
}

.swiper-container-horizontal>.swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%
}

.swiper-container-vertical>.swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, .5);
  border-radius: 10px;
  left: 0;
  top: 0
}

.swiper-scrollbar-cursor-drag {
  cursor: move
}

.swiper-scrollbar-lock {
  display: none
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center
}

.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain
}

.swiper-slide-zoomed {
  cursor: move
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-animation: swiper-preloader-spin 1s infinite linear;
  animation: swiper-preloader-spin 1s infinite linear;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000
}

@-webkit-keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  -webkit-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out
}

.swiper-container-fade .swiper-slide {
  pointer-events: none;
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity
}

.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none
}

.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto
}

.swiper-container-cube {
  overflow: visible
}

.swiper-container-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  width: 100%;
  height: 100%
}

.swiper-container-cube .swiper-slide .swiper-slide {
  pointer-events: none
}

.swiper-container-cube.swiper-container-rtl .swiper-slide {
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-next+.swiper-slide,
.swiper-container-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible
}

.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-cube .swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden
}

.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .6;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  z-index: 0
}

.swiper-container-flip {
  overflow: visible
}

.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1
}

.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none
}

.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto
}

.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden
}

/*! * * * * * * * * * * * * * * * * * * * *\  
  CSShake :: Package
  v1.5.0
  CSS classes to move your DOM
  (c) 2015 @elrumordelaluz
  http://elrumordelaluz.github.io/csshake/
  Licensed under MIT
\* * * * * * * * * * * * * * * * * * * * */
.shake,
.shake-chunk,
.shake-crazy,
.shake-hard,
.shake-horizontal,
.shake-little,
.shake-opacity,
.shake-rotate,
.shake-slow,
.shake-vertical {
  display: inherit;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center
}

.shake-constant.shake-constant--hover:hover,
.shake-freeze,
.shake-trigger:hover .shake-constant.shake-constant--hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused
}

.shake-chunk:hover,
.shake-crazy:hover,
.shake-freeze:hover,
.shake-hard:hover,
.shake-horizontal:hover,
.shake-little:hover,
.shake-opacity:hover,
.shake-rotate:hover,
.shake-slow:hover,
.shake-trigger:hover .shake,
.shake-trigger:hover .shake-chunk,
.shake-trigger:hover .shake-crazy,
.shake-trigger:hover .shake-freeze,
.shake-trigger:hover .shake-hard,
.shake-trigger:hover .shake-horizontal,
.shake-trigger:hover .shake-little,
.shake-trigger:hover .shake-opacity,
.shake-trigger:hover .shake-rotate,
.shake-trigger:hover .shake-slow,
.shake-trigger:hover .shake-vertical,
.shake-vertical:hover,
.shake:hover {
  -webkit-animation-play-state: running;
  animation-play-state: running
}

@-webkit-keyframes shake {
  2% {
    -webkit-transform: translate(-1.5px, 2.5px) rotate(.5deg);
    transform: translate(-1.5px, 2.5px) rotate(.5deg)
  }

  4% {
    -webkit-transform: translate(1.5px, 2.5px) rotate(.5deg);
    transform: translate(1.5px, 2.5px) rotate(.5deg)
  }

  6% {
    -webkit-transform: translate(2.5px, .5px) rotate(.5deg);
    transform: translate(2.5px, .5px) rotate(.5deg)
  }

  8% {
    -webkit-transform: translate(2.5px, -1.5px) rotate(.5deg);
    transform: translate(2.5px, -1.5px) rotate(.5deg)
  }

  10% {
    -webkit-transform: translate(2.5px, 1.5px) rotate(1.5deg);
    transform: translate(2.5px, 1.5px) rotate(1.5deg)
  }

  12% {
    -webkit-transform: translate(-.5px, 1.5px) rotate(-.5deg);
    transform: translate(-.5px, 1.5px) rotate(-.5deg)
  }

  14% {
    -webkit-transform: translate(1.5px, 1.5px) rotate(1.5deg);
    transform: translate(1.5px, 1.5px) rotate(1.5deg)
  }

  16% {
    -webkit-transform: translate(-.5px, 2.5px) rotate(-.5deg);
    transform: translate(-.5px, 2.5px) rotate(-.5deg)
  }

  18% {
    -webkit-transform: translate(-1.5px, -1.5px) rotate(-.5deg);
    transform: translate(-1.5px, -1.5px) rotate(-.5deg)
  }

  20% {
    -webkit-transform: translate(.5px, 1.5px) rotate(.5deg);
    transform: translate(.5px, 1.5px) rotate(.5deg)
  }

  22% {
    -webkit-transform: translate(-.5px, 2.5px) rotate(.5deg);
    transform: translate(-.5px, 2.5px) rotate(.5deg)
  }

  24% {
    -webkit-transform: translate(-.5px, .5px) rotate(1.5deg);
    transform: translate(-.5px, .5px) rotate(1.5deg)
  }

  26% {
    -webkit-transform: translate(-.5px, 2.5px) rotate(.5deg);
    transform: translate(-.5px, 2.5px) rotate(.5deg)
  }

  28% {
    -webkit-transform: translate(1.5px, .5px) rotate(.5deg);
    transform: translate(1.5px, .5px) rotate(.5deg)
  }

  30% {
    -webkit-transform: translate(2.5px, 2.5px) rotate(.5deg);
    transform: translate(2.5px, 2.5px) rotate(.5deg)
  }

  32% {
    -webkit-transform: translate(1.5px, -1.5px) rotate(1.5deg);
    transform: translate(1.5px, -1.5px) rotate(1.5deg)
  }

  34% {
    -webkit-transform: translate(1.5px, 1.5px) rotate(-.5deg);
    transform: translate(1.5px, 1.5px) rotate(-.5deg)
  }

  36% {
    -webkit-transform: translate(1.5px, 1.5px) rotate(1.5deg);
    transform: translate(1.5px, 1.5px) rotate(1.5deg)
  }

  38% {
    -webkit-transform: translate(2.5px, 1.5px) rotate(1.5deg);
    transform: translate(2.5px, 1.5px) rotate(1.5deg)
  }

  40% {
    -webkit-transform: translate(2.5px, 1.5px) rotate(-.5deg);
    transform: translate(2.5px, 1.5px) rotate(-.5deg)
  }

  42% {
    -webkit-transform: translate(-1.5px, -.5px) rotate(-.5deg);
    transform: translate(-1.5px, -.5px) rotate(-.5deg)
  }

  44% {
    -webkit-transform: translate(.5px, 2.5px) rotate(1.5deg);
    transform: translate(.5px, 2.5px) rotate(1.5deg)
  }

  46% {
    -webkit-transform: translate(2.5px, -.5px) rotate(.5deg);
    transform: translate(2.5px, -.5px) rotate(.5deg)
  }

  48% {
    -webkit-transform: translate(-.5px, .5px) rotate(-.5deg);
    transform: translate(-.5px, .5px) rotate(-.5deg)
  }

  50% {
    -webkit-transform: translate(-1.5px, 1.5px) rotate(-.5deg);
    transform: translate(-1.5px, 1.5px) rotate(-.5deg)
  }

  52% {
    -webkit-transform: translate(2.5px, 1.5px) rotate(.5deg);
    transform: translate(2.5px, 1.5px) rotate(.5deg)
  }

  54% {
    -webkit-transform: translate(2.5px, 2.5px) rotate(1.5deg);
    transform: translate(2.5px, 2.5px) rotate(1.5deg)
  }

  56% {
    -webkit-transform: translate(2.5px, -1.5px) rotate(.5deg);
    transform: translate(2.5px, -1.5px) rotate(.5deg)
  }

  58% {
    -webkit-transform: translate(2.5px, 2.5px) rotate(-.5deg);
    transform: translate(2.5px, 2.5px) rotate(-.5deg)
  }

  60% {
    -webkit-transform: translate(.5px, -.5px) rotate(.5deg);
    transform: translate(.5px, -.5px) rotate(.5deg)
  }

  62% {
    -webkit-transform: translate(-.5px, -.5px) rotate(1.5deg);
    transform: translate(-.5px, -.5px) rotate(1.5deg)
  }

  64% {
    -webkit-transform: translate(-.5px, 2.5px) rotate(-.5deg);
    transform: translate(-.5px, 2.5px) rotate(-.5deg)
  }

  66% {
    -webkit-transform: translate(2.5px, 1.5px) rotate(.5deg);
    transform: translate(2.5px, 1.5px) rotate(.5deg)
  }

  68% {
    -webkit-transform: translate(.5px, 2.5px) rotate(1.5deg);
    transform: translate(.5px, 2.5px) rotate(1.5deg)
  }

  70% {
    -webkit-transform: translate(-1.5px, -.5px) rotate(1.5deg);
    transform: translate(-1.5px, -.5px) rotate(1.5deg)
  }

  72% {
    -webkit-transform: translate(-1.5px, -.5px) rotate(-.5deg);
    transform: translate(-1.5px, -.5px) rotate(-.5deg)
  }

  74% {
    -webkit-transform: translate(2.5px, -.5px) rotate(-.5deg);
    transform: translate(2.5px, -.5px) rotate(-.5deg)
  }

  76% {
    -webkit-transform: translate(-.5px, 1.5px) rotate(1.5deg);
    transform: translate(-.5px, 1.5px) rotate(1.5deg)
  }

  78% {
    -webkit-transform: translate(2.5px, .5px) rotate(-.5deg);
    transform: translate(2.5px, .5px) rotate(-.5deg)
  }

  80% {
    -webkit-transform: translate(2.5px, .5px) rotate(-.5deg);
    transform: translate(2.5px, .5px) rotate(-.5deg)
  }

  82% {
    -webkit-transform: translate(.5px, -1.5px) rotate(-.5deg);
    transform: translate(.5px, -1.5px) rotate(-.5deg)
  }

  84% {
    -webkit-transform: translate(-1.5px, 1.5px) rotate(-.5deg);
    transform: translate(-1.5px, 1.5px) rotate(-.5deg)
  }

  86% {
    -webkit-transform: translate(2.5px, -1.5px) rotate(1.5deg);
    transform: translate(2.5px, -1.5px) rotate(1.5deg)
  }

  88% {
    -webkit-transform: translate(-.5px, 2.5px) rotate(.5deg);
    transform: translate(-.5px, 2.5px) rotate(.5deg)
  }

  90% {
    -webkit-transform: translate(2.5px, 1.5px) rotate(-.5deg);
    transform: translate(2.5px, 1.5px) rotate(-.5deg)
  }

  92% {
    -webkit-transform: translate(2.5px, 2.5px) rotate(-.5deg);
    transform: translate(2.5px, 2.5px) rotate(-.5deg)
  }

  94% {
    -webkit-transform: translate(.5px, .5px) rotate(.5deg);
    transform: translate(.5px, .5px) rotate(.5deg)
  }

  96% {
    -webkit-transform: translate(.5px, 1.5px) rotate(.5deg);
    transform: translate(.5px, 1.5px) rotate(.5deg)
  }

  98% {
    -webkit-transform: translate(-1.5px, .5px) rotate(-.5deg);
    transform: translate(-1.5px, .5px) rotate(-.5deg)
  }

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

@keyframes shake {
  2% {
    -webkit-transform: translate(-1.5px, 2.5px) rotate(.5deg);
    transform: translate(-1.5px, 2.5px) rotate(.5deg)
  }

  4% {
    -webkit-transform: translate(1.5px, 2.5px) rotate(.5deg);
    transform: translate(1.5px, 2.5px) rotate(.5deg)
  }

  6% {
    -webkit-transform: translate(2.5px, .5px) rotate(.5deg);
    transform: translate(2.5px, .5px) rotate(.5deg)
  }

  8% {
    -webkit-transform: translate(2.5px, -1.5px) rotate(.5deg);
    transform: translate(2.5px, -1.5px) rotate(.5deg)
  }

  10% {
    -webkit-transform: translate(2.5px, 1.5px) rotate(1.5deg);
    transform: translate(2.5px, 1.5px) rotate(1.5deg)
  }

  12% {
    -webkit-transform: translate(-.5px, 1.5px) rotate(-.5deg);
    transform: translate(-.5px, 1.5px) rotate(-.5deg)
  }

  14% {
    -webkit-transform: translate(1.5px, 1.5px) rotate(1.5deg);
    transform: translate(1.5px, 1.5px) rotate(1.5deg)
  }

  16% {
    -webkit-transform: translate(-.5px, 2.5px) rotate(-.5deg);
    transform: translate(-.5px, 2.5px) rotate(-.5deg)
  }

  18% {
    -webkit-transform: translate(-1.5px, -1.5px) rotate(-.5deg);
    transform: translate(-1.5px, -1.5px) rotate(-.5deg)
  }

  20% {
    -webkit-transform: translate(.5px, 1.5px) rotate(.5deg);
    transform: translate(.5px, 1.5px) rotate(.5deg)
  }

  22% {
    -webkit-transform: translate(-.5px, 2.5px) rotate(.5deg);
    transform: translate(-.5px, 2.5px) rotate(.5deg)
  }

  24% {
    -webkit-transform: translate(-.5px, .5px) rotate(1.5deg);
    transform: translate(-.5px, .5px) rotate(1.5deg)
  }

  26% {
    -webkit-transform: translate(-.5px, 2.5px) rotate(.5deg);
    transform: translate(-.5px, 2.5px) rotate(.5deg)
  }

  28% {
    -webkit-transform: translate(1.5px, .5px) rotate(.5deg);
    transform: translate(1.5px, .5px) rotate(.5deg)
  }

  30% {
    -webkit-transform: translate(2.5px, 2.5px) rotate(.5deg);
    transform: translate(2.5px, 2.5px) rotate(.5deg)
  }

  32% {
    -webkit-transform: translate(1.5px, -1.5px) rotate(1.5deg);
    transform: translate(1.5px, -1.5px) rotate(1.5deg)
  }

  34% {
    -webkit-transform: translate(1.5px, 1.5px) rotate(-.5deg);
    transform: translate(1.5px, 1.5px) rotate(-.5deg)
  }

  36% {
    -webkit-transform: translate(1.5px, 1.5px) rotate(1.5deg);
    transform: translate(1.5px, 1.5px) rotate(1.5deg)
  }

  38% {
    -webkit-transform: translate(2.5px, 1.5px) rotate(1.5deg);
    transform: translate(2.5px, 1.5px) rotate(1.5deg)
  }

  40% {
    -webkit-transform: translate(2.5px, 1.5px) rotate(-.5deg);
    transform: translate(2.5px, 1.5px) rotate(-.5deg)
  }

  42% {
    -webkit-transform: translate(-1.5px, -.5px) rotate(-.5deg);
    transform: translate(-1.5px, -.5px) rotate(-.5deg)
  }

  44% {
    -webkit-transform: translate(.5px, 2.5px) rotate(1.5deg);
    transform: translate(.5px, 2.5px) rotate(1.5deg)
  }

  46% {
    -webkit-transform: translate(2.5px, -.5px) rotate(.5deg);
    transform: translate(2.5px, -.5px) rotate(.5deg)
  }

  48% {
    -webkit-transform: translate(-.5px, .5px) rotate(-.5deg);
    transform: translate(-.5px, .5px) rotate(-.5deg)
  }

  50% {
    -webkit-transform: translate(-1.5px, 1.5px) rotate(-.5deg);
    transform: translate(-1.5px, 1.5px) rotate(-.5deg)
  }

  52% {
    -webkit-transform: translate(2.5px, 1.5px) rotate(.5deg);
    transform: translate(2.5px, 1.5px) rotate(.5deg)
  }

  54% {
    -webkit-transform: translate(2.5px, 2.5px) rotate(1.5deg);
    transform: translate(2.5px, 2.5px) rotate(1.5deg)
  }

  56% {
    -webkit-transform: translate(2.5px, -1.5px) rotate(.5deg);
    transform: translate(2.5px, -1.5px) rotate(.5deg)
  }

  58% {
    -webkit-transform: translate(2.5px, 2.5px) rotate(-.5deg);
    transform: translate(2.5px, 2.5px) rotate(-.5deg)
  }

  60% {
    -webkit-transform: translate(.5px, -.5px) rotate(.5deg);
    transform: translate(.5px, -.5px) rotate(.5deg)
  }

  62% {
    -webkit-transform: translate(-.5px, -.5px) rotate(1.5deg);
    transform: translate(-.5px, -.5px) rotate(1.5deg)
  }

  64% {
    -webkit-transform: translate(-.5px, 2.5px) rotate(-.5deg);
    transform: translate(-.5px, 2.5px) rotate(-.5deg)
  }

  66% {
    -webkit-transform: translate(2.5px, 1.5px) rotate(.5deg);
    transform: translate(2.5px, 1.5px) rotate(.5deg)
  }

  68% {
    -webkit-transform: translate(.5px, 2.5px) rotate(1.5deg);
    transform: translate(.5px, 2.5px) rotate(1.5deg)
  }

  70% {
    -webkit-transform: translate(-1.5px, -.5px) rotate(1.5deg);
    transform: translate(-1.5px, -.5px) rotate(1.5deg)
  }

  72% {
    -webkit-transform: translate(-1.5px, -.5px) rotate(-.5deg);
    transform: translate(-1.5px, -.5px) rotate(-.5deg)
  }

  74% {
    -webkit-transform: translate(2.5px, -.5px) rotate(-.5deg);
    transform: translate(2.5px, -.5px) rotate(-.5deg)
  }

  76% {
    -webkit-transform: translate(-.5px, 1.5px) rotate(1.5deg);
    transform: translate(-.5px, 1.5px) rotate(1.5deg)
  }

  78% {
    -webkit-transform: translate(2.5px, .5px) rotate(-.5deg);
    transform: translate(2.5px, .5px) rotate(-.5deg)
  }

  80% {
    -webkit-transform: translate(2.5px, .5px) rotate(-.5deg);
    transform: translate(2.5px, .5px) rotate(-.5deg)
  }

  82% {
    -webkit-transform: translate(.5px, -1.5px) rotate(-.5deg);
    transform: translate(.5px, -1.5px) rotate(-.5deg)
  }

  84% {
    -webkit-transform: translate(-1.5px, 1.5px) rotate(-.5deg);
    transform: translate(-1.5px, 1.5px) rotate(-.5deg)
  }

  86% {
    -webkit-transform: translate(2.5px, -1.5px) rotate(1.5deg);
    transform: translate(2.5px, -1.5px) rotate(1.5deg)
  }

  88% {
    -webkit-transform: translate(-.5px, 2.5px) rotate(.5deg);
    transform: translate(-.5px, 2.5px) rotate(.5deg)
  }

  90% {
    -webkit-transform: translate(2.5px, 1.5px) rotate(-.5deg);
    transform: translate(2.5px, 1.5px) rotate(-.5deg)
  }

  92% {
    -webkit-transform: translate(2.5px, 2.5px) rotate(-.5deg);
    transform: translate(2.5px, 2.5px) rotate(-.5deg)
  }

  94% {
    -webkit-transform: translate(.5px, .5px) rotate(.5deg);
    transform: translate(.5px, .5px) rotate(.5deg)
  }

  96% {
    -webkit-transform: translate(.5px, 1.5px) rotate(.5deg);
    transform: translate(.5px, 1.5px) rotate(.5deg)
  }

  98% {
    -webkit-transform: translate(-1.5px, .5px) rotate(-.5deg);
    transform: translate(-1.5px, .5px) rotate(-.5deg)
  }

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

.shake-trigger:hover .shake,
.shake.shake-constant,
.shake.shake-freeze,
.shake:hover {
  -webkit-animation-name: shake;
  animation-name: shake;
  -webkit-animation-duration: .1s;
  animation-duration: .1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

@-webkit-keyframes shake-little {
  2% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  4% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  6% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  8% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  10% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  12% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  14% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  16% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  18% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  20% {
    -webkit-transform: translate(0, 1px) rotate(.5deg);
    transform: translate(0, 1px) rotate(.5deg)
  }

  22% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  24% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  26% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  28% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  30% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  32% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  34% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  36% {
    -webkit-transform: translate(0, 1px) rotate(.5deg);
    transform: translate(0, 1px) rotate(.5deg)
  }

  38% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  40% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  42% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  44% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  46% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  48% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  50% {
    -webkit-transform: translate(0, 1px) rotate(.5deg);
    transform: translate(0, 1px) rotate(.5deg)
  }

  52% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  54% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  56% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  58% {
    -webkit-transform: translate(0, 1px) rotate(.5deg);
    transform: translate(0, 1px) rotate(.5deg)
  }

  60% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  62% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  64% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  66% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  68% {
    -webkit-transform: translate(0, 1px) rotate(.5deg);
    transform: translate(0, 1px) rotate(.5deg)
  }

  70% {
    -webkit-transform: translate(0, 1px) rotate(.5deg);
    transform: translate(0, 1px) rotate(.5deg)
  }

  72% {
    -webkit-transform: translate(0, 1px) rotate(.5deg);
    transform: translate(0, 1px) rotate(.5deg)
  }

  74% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  76% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  78% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  80% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  82% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  84% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  86% {
    -webkit-transform: translate(0, 1px) rotate(.5deg);
    transform: translate(0, 1px) rotate(.5deg)
  }

  88% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  90% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  92% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  94% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  96% {
    -webkit-transform: translate(0, 1px) rotate(.5deg);
    transform: translate(0, 1px) rotate(.5deg)
  }

  98% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

@keyframes shake-little {
  2% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  4% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  6% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  8% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  10% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  12% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  14% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  16% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  18% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  20% {
    -webkit-transform: translate(0, 1px) rotate(.5deg);
    transform: translate(0, 1px) rotate(.5deg)
  }

  22% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  24% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  26% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  28% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  30% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  32% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  34% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  36% {
    -webkit-transform: translate(0, 1px) rotate(.5deg);
    transform: translate(0, 1px) rotate(.5deg)
  }

  38% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  40% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  42% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  44% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  46% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  48% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  50% {
    -webkit-transform: translate(0, 1px) rotate(.5deg);
    transform: translate(0, 1px) rotate(.5deg)
  }

  52% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  54% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  56% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  58% {
    -webkit-transform: translate(0, 1px) rotate(.5deg);
    transform: translate(0, 1px) rotate(.5deg)
  }

  60% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  62% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  64% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  66% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  68% {
    -webkit-transform: translate(0, 1px) rotate(.5deg);
    transform: translate(0, 1px) rotate(.5deg)
  }

  70% {
    -webkit-transform: translate(0, 1px) rotate(.5deg);
    transform: translate(0, 1px) rotate(.5deg)
  }

  72% {
    -webkit-transform: translate(0, 1px) rotate(.5deg);
    transform: translate(0, 1px) rotate(.5deg)
  }

  74% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  76% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  78% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  80% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  82% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  84% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  86% {
    -webkit-transform: translate(0, 1px) rotate(.5deg);
    transform: translate(0, 1px) rotate(.5deg)
  }

  88% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  90% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  92% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  94% {
    -webkit-transform: translate(1px, 0) rotate(.5deg);
    transform: translate(1px, 0) rotate(.5deg)
  }

  96% {
    -webkit-transform: translate(0, 1px) rotate(.5deg);
    transform: translate(0, 1px) rotate(.5deg)
  }

  98% {
    -webkit-transform: translate(1px, 1px) rotate(.5deg);
    transform: translate(1px, 1px) rotate(.5deg)
  }

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

.shake-little.shake-constant,
.shake-little.shake-freeze,
.shake-little:hover,
.shake-trigger:hover .shake-little {
  -webkit-animation-name: shake-little;
  animation-name: shake-little;
  -webkit-animation-duration: .1s;
  animation-duration: .1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

@-webkit-keyframes shake-slow {
  2% {
    -webkit-transform: translate(-1px, -3px) rotate(-1.5deg);
    transform: translate(-1px, -3px) rotate(-1.5deg)
  }

  4% {
    -webkit-transform: translate(-1px, -3px) rotate(-1.5deg);
    transform: translate(-1px, -3px) rotate(-1.5deg)
  }

  6% {
    -webkit-transform: translate(-8px, 2px) rotate(3.5deg);
    transform: translate(-8px, 2px) rotate(3.5deg)
  }

  8% {
    -webkit-transform: translate(-4px, -5px) rotate(.5deg);
    transform: translate(-4px, -5px) rotate(.5deg)
  }

  10% {
    -webkit-transform: translate(2px, -2px) rotate(2.5deg);
    transform: translate(2px, -2px) rotate(2.5deg)
  }

  12% {
    -webkit-transform: translate(5px, 5px) rotate(-1.5deg);
    transform: translate(5px, 5px) rotate(-1.5deg)
  }

  14% {
    -webkit-transform: translate(-9px, -3px) rotate(1.5deg);
    transform: translate(-9px, -3px) rotate(1.5deg)
  }

  16% {
    -webkit-transform: translate(-6px, 1px) rotate(-.5deg);
    transform: translate(-6px, 1px) rotate(-.5deg)
  }

  18% {
    -webkit-transform: translate(3px, -3px) rotate(3.5deg);
    transform: translate(3px, -3px) rotate(3.5deg)
  }

  20% {
    -webkit-transform: translate(1px, 1px) rotate(2.5deg);
    transform: translate(1px, 1px) rotate(2.5deg)
  }

  22% {
    -webkit-transform: translate(-3px, 4px) rotate(1.5deg);
    transform: translate(-3px, 4px) rotate(1.5deg)
  }

  24% {
    -webkit-transform: translate(0, -3px) rotate(2.5deg);
    transform: translate(0, -3px) rotate(2.5deg)
  }

  26% {
    -webkit-transform: translate(-3px, 5px) rotate(-1.5deg);
    transform: translate(-3px, 5px) rotate(-1.5deg)
  }

  28% {
    -webkit-transform: translate(-7px, 4px) rotate(1.5deg);
    transform: translate(-7px, 4px) rotate(1.5deg)
  }

  30% {
    -webkit-transform: translate(6px, 5px) rotate(2.5deg);
    transform: translate(6px, 5px) rotate(2.5deg)
  }

  32% {
    -webkit-transform: translate(-6px, -5px) rotate(2.5deg);
    transform: translate(-6px, -5px) rotate(2.5deg)
  }

  34% {
    -webkit-transform: translate(-4px, -4px) rotate(-2.5deg);
    transform: translate(-4px, -4px) rotate(-2.5deg)
  }

  36% {
    -webkit-transform: translate(5px, -1px) rotate(-.5deg);
    transform: translate(5px, -1px) rotate(-.5deg)
  }

  38% {
    -webkit-transform: translate(9px, 4px) rotate(2.5deg);
    transform: translate(9px, 4px) rotate(2.5deg)
  }

  40% {
    -webkit-transform: translate(6px, -2px) rotate(2.5deg);
    transform: translate(6px, -2px) rotate(2.5deg)
  }

  42% {
    -webkit-transform: translate(4px, 5px) rotate(3.5deg);
    transform: translate(4px, 5px) rotate(3.5deg)
  }

  44% {
    -webkit-transform: translate(9px, 5px) rotate(-.5deg);
    transform: translate(9px, 5px) rotate(-.5deg)
  }

  46% {
    -webkit-transform: translate(-7px, 4px) rotate(3.5deg);
    transform: translate(-7px, 4px) rotate(3.5deg)
  }

  48% {
    -webkit-transform: translate(0, -7px) rotate(-.5deg);
    transform: translate(0, -7px) rotate(-.5deg)
  }

  50% {
    -webkit-transform: translate(1px, -7px) rotate(2.5deg);
    transform: translate(1px, -7px) rotate(2.5deg)
  }

  52% {
    -webkit-transform: translate(-8px, 5px) rotate(-1.5deg);
    transform: translate(-8px, 5px) rotate(-1.5deg)
  }

  54% {
    -webkit-transform: translate(-7px, 9px) rotate(1.5deg);
    transform: translate(-7px, 9px) rotate(1.5deg)
  }

  56% {
    -webkit-transform: translate(2px, 0) rotate(-.5deg);
    transform: translate(2px, 0) rotate(-.5deg)
  }

  58% {
    -webkit-transform: translate(0, 3px) rotate(.5deg);
    transform: translate(0, 3px) rotate(.5deg)
  }

  60% {
    -webkit-transform: translate(-7px, 5px) rotate(1.5deg);
    transform: translate(-7px, 5px) rotate(1.5deg)
  }

  62% {
    -webkit-transform: translate(3px, -4px) rotate(.5deg);
    transform: translate(3px, -4px) rotate(.5deg)
  }

  64% {
    -webkit-transform: translate(-4px, -8px) rotate(2.5deg);
    transform: translate(-4px, -8px) rotate(2.5deg)
  }

  66% {
    -webkit-transform: translate(-1px, 7px) rotate(1.5deg);
    transform: translate(-1px, 7px) rotate(1.5deg)
  }

  68% {
    -webkit-transform: translate(-3px, 0) rotate(-2.5deg);
    transform: translate(-3px, 0) rotate(-2.5deg)
  }

  70% {
    -webkit-transform: translate(-9px, -6px) rotate(-.5deg);
    transform: translate(-9px, -6px) rotate(-.5deg)
  }

  72% {
    -webkit-transform: translate(-5px, -6px) rotate(3.5deg);
    transform: translate(-5px, -6px) rotate(3.5deg)
  }

  74% {
    -webkit-transform: translate(-6px, -7px) rotate(.5deg);
    transform: translate(-6px, -7px) rotate(.5deg)
  }

  76% {
    -webkit-transform: translate(-4px, 2px) rotate(-.5deg);
    transform: translate(-4px, 2px) rotate(-.5deg)
  }

  78% {
    -webkit-transform: translate(-7px, -8px) rotate(2.5deg);
    transform: translate(-7px, -8px) rotate(2.5deg)
  }

  80% {
    -webkit-transform: translate(10px, 1px) rotate(-1.5deg);
    transform: translate(10px, 1px) rotate(-1.5deg)
  }

  82% {
    -webkit-transform: translate(-7px, 1px) rotate(-.5deg);
    transform: translate(-7px, 1px) rotate(-.5deg)
  }

  84% {
    -webkit-transform: translate(-4px, -7px) rotate(-1.5deg);
    transform: translate(-4px, -7px) rotate(-1.5deg)
  }

  86% {
    -webkit-transform: translate(3px, -1px) rotate(1.5deg);
    transform: translate(3px, -1px) rotate(1.5deg)
  }

  88% {
    -webkit-transform: translate(0, 10px) rotate(2.5deg);
    transform: translate(0, 10px) rotate(2.5deg)
  }

  90% {
    -webkit-transform: translate(-1px, -9px) rotate(-1.5deg);
    transform: translate(-1px, -9px) rotate(-1.5deg)
  }

  92% {
    -webkit-transform: translate(4px, 4px) rotate(1.5deg);
    transform: translate(4px, 4px) rotate(1.5deg)
  }

  94% {
    -webkit-transform: translate(0, 3px) rotate(-1.5deg);
    transform: translate(0, 3px) rotate(-1.5deg)
  }

  96% {
    -webkit-transform: translate(0, -5px) rotate(3.5deg);
    transform: translate(0, -5px) rotate(3.5deg)
  }

  98% {
    -webkit-transform: translate(-1px, 1px) rotate(2.5deg);
    transform: translate(-1px, 1px) rotate(2.5deg)
  }

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

@keyframes shake-slow {
  2% {
    -webkit-transform: translate(-1px, -3px) rotate(-1.5deg);
    transform: translate(-1px, -3px) rotate(-1.5deg)
  }

  4% {
    -webkit-transform: translate(-1px, -3px) rotate(-1.5deg);
    transform: translate(-1px, -3px) rotate(-1.5deg)
  }

  6% {
    -webkit-transform: translate(-8px, 2px) rotate(3.5deg);
    transform: translate(-8px, 2px) rotate(3.5deg)
  }

  8% {
    -webkit-transform: translate(-4px, -5px) rotate(.5deg);
    transform: translate(-4px, -5px) rotate(.5deg)
  }

  10% {
    -webkit-transform: translate(2px, -2px) rotate(2.5deg);
    transform: translate(2px, -2px) rotate(2.5deg)
  }

  12% {
    -webkit-transform: translate(5px, 5px) rotate(-1.5deg);
    transform: translate(5px, 5px) rotate(-1.5deg)
  }

  14% {
    -webkit-transform: translate(-9px, -3px) rotate(1.5deg);
    transform: translate(-9px, -3px) rotate(1.5deg)
  }

  16% {
    -webkit-transform: translate(-6px, 1px) rotate(-.5deg);
    transform: translate(-6px, 1px) rotate(-.5deg)
  }

  18% {
    -webkit-transform: translate(3px, -3px) rotate(3.5deg);
    transform: translate(3px, -3px) rotate(3.5deg)
  }

  20% {
    -webkit-transform: translate(1px, 1px) rotate(2.5deg);
    transform: translate(1px, 1px) rotate(2.5deg)
  }

  22% {
    -webkit-transform: translate(-3px, 4px) rotate(1.5deg);
    transform: translate(-3px, 4px) rotate(1.5deg)
  }

  24% {
    -webkit-transform: translate(0, -3px) rotate(2.5deg);
    transform: translate(0, -3px) rotate(2.5deg)
  }

  26% {
    -webkit-transform: translate(-3px, 5px) rotate(-1.5deg);
    transform: translate(-3px, 5px) rotate(-1.5deg)
  }

  28% {
    -webkit-transform: translate(-7px, 4px) rotate(1.5deg);
    transform: translate(-7px, 4px) rotate(1.5deg)
  }

  30% {
    -webkit-transform: translate(6px, 5px) rotate(2.5deg);
    transform: translate(6px, 5px) rotate(2.5deg)
  }

  32% {
    -webkit-transform: translate(-6px, -5px) rotate(2.5deg);
    transform: translate(-6px, -5px) rotate(2.5deg)
  }

  34% {
    -webkit-transform: translate(-4px, -4px) rotate(-2.5deg);
    transform: translate(-4px, -4px) rotate(-2.5deg)
  }

  36% {
    -webkit-transform: translate(5px, -1px) rotate(-.5deg);
    transform: translate(5px, -1px) rotate(-.5deg)
  }

  38% {
    -webkit-transform: translate(9px, 4px) rotate(2.5deg);
    transform: translate(9px, 4px) rotate(2.5deg)
  }

  40% {
    -webkit-transform: translate(6px, -2px) rotate(2.5deg);
    transform: translate(6px, -2px) rotate(2.5deg)
  }

  42% {
    -webkit-transform: translate(4px, 5px) rotate(3.5deg);
    transform: translate(4px, 5px) rotate(3.5deg)
  }

  44% {
    -webkit-transform: translate(9px, 5px) rotate(-.5deg);
    transform: translate(9px, 5px) rotate(-.5deg)
  }

  46% {
    -webkit-transform: translate(-7px, 4px) rotate(3.5deg);
    transform: translate(-7px, 4px) rotate(3.5deg)
  }

  48% {
    -webkit-transform: translate(0, -7px) rotate(-.5deg);
    transform: translate(0, -7px) rotate(-.5deg)
  }

  50% {
    -webkit-transform: translate(1px, -7px) rotate(2.5deg);
    transform: translate(1px, -7px) rotate(2.5deg)
  }

  52% {
    -webkit-transform: translate(-8px, 5px) rotate(-1.5deg);
    transform: translate(-8px, 5px) rotate(-1.5deg)
  }

  54% {
    -webkit-transform: translate(-7px, 9px) rotate(1.5deg);
    transform: translate(-7px, 9px) rotate(1.5deg)
  }

  56% {
    -webkit-transform: translate(2px, 0) rotate(-.5deg);
    transform: translate(2px, 0) rotate(-.5deg)
  }

  58% {
    -webkit-transform: translate(0, 3px) rotate(.5deg);
    transform: translate(0, 3px) rotate(.5deg)
  }

  60% {
    -webkit-transform: translate(-7px, 5px) rotate(1.5deg);
    transform: translate(-7px, 5px) rotate(1.5deg)
  }

  62% {
    -webkit-transform: translate(3px, -4px) rotate(.5deg);
    transform: translate(3px, -4px) rotate(.5deg)
  }

  64% {
    -webkit-transform: translate(-4px, -8px) rotate(2.5deg);
    transform: translate(-4px, -8px) rotate(2.5deg)
  }

  66% {
    -webkit-transform: translate(-1px, 7px) rotate(1.5deg);
    transform: translate(-1px, 7px) rotate(1.5deg)
  }

  68% {
    -webkit-transform: translate(-3px, 0) rotate(-2.5deg);
    transform: translate(-3px, 0) rotate(-2.5deg)
  }

  70% {
    -webkit-transform: translate(-9px, -6px) rotate(-.5deg);
    transform: translate(-9px, -6px) rotate(-.5deg)
  }

  72% {
    -webkit-transform: translate(-5px, -6px) rotate(3.5deg);
    transform: translate(-5px, -6px) rotate(3.5deg)
  }

  74% {
    -webkit-transform: translate(-6px, -7px) rotate(.5deg);
    transform: translate(-6px, -7px) rotate(.5deg)
  }

  76% {
    -webkit-transform: translate(-4px, 2px) rotate(-.5deg);
    transform: translate(-4px, 2px) rotate(-.5deg)
  }

  78% {
    -webkit-transform: translate(-7px, -8px) rotate(2.5deg);
    transform: translate(-7px, -8px) rotate(2.5deg)
  }

  80% {
    -webkit-transform: translate(10px, 1px) rotate(-1.5deg);
    transform: translate(10px, 1px) rotate(-1.5deg)
  }

  82% {
    -webkit-transform: translate(-7px, 1px) rotate(-.5deg);
    transform: translate(-7px, 1px) rotate(-.5deg)
  }

  84% {
    -webkit-transform: translate(-4px, -7px) rotate(-1.5deg);
    transform: translate(-4px, -7px) rotate(-1.5deg)
  }

  86% {
    -webkit-transform: translate(3px, -1px) rotate(1.5deg);
    transform: translate(3px, -1px) rotate(1.5deg)
  }

  88% {
    -webkit-transform: translate(0, 10px) rotate(2.5deg);
    transform: translate(0, 10px) rotate(2.5deg)
  }

  90% {
    -webkit-transform: translate(-1px, -9px) rotate(-1.5deg);
    transform: translate(-1px, -9px) rotate(-1.5deg)
  }

  92% {
    -webkit-transform: translate(4px, 4px) rotate(1.5deg);
    transform: translate(4px, 4px) rotate(1.5deg)
  }

  94% {
    -webkit-transform: translate(0, 3px) rotate(-1.5deg);
    transform: translate(0, 3px) rotate(-1.5deg)
  }

  96% {
    -webkit-transform: translate(0, -5px) rotate(3.5deg);
    transform: translate(0, -5px) rotate(3.5deg)
  }

  98% {
    -webkit-transform: translate(-1px, 1px) rotate(2.5deg);
    transform: translate(-1px, 1px) rotate(2.5deg)
  }

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

.shake-slow.shake-constant,
.shake-slow.shake-freeze,
.shake-slow:hover,
.shake-trigger:hover .shake-slow {
  -webkit-animation-name: shake-slow;
  animation-name: shake-slow;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

@-webkit-keyframes shake-hard {
  2% {
    -webkit-transform: translate(7px, 10px) rotate(-1.5deg);
    transform: translate(7px, 10px) rotate(-1.5deg)
  }

  4% {
    -webkit-transform: translate(-4px, -8px) rotate(.5deg);
    transform: translate(-4px, -8px) rotate(.5deg)
  }

  6% {
    -webkit-transform: translate(-8px, 0) rotate(.5deg);
    transform: translate(-8px, 0) rotate(.5deg)
  }

  8% {
    -webkit-transform: translate(8px, 4px) rotate(-.5deg);
    transform: translate(8px, 4px) rotate(-.5deg)
  }

  10% {
    -webkit-transform: translate(-2px, 6px) rotate(-.5deg);
    transform: translate(-2px, 6px) rotate(-.5deg)
  }

  12% {
    -webkit-transform: translate(3px, 6px) rotate(1.5deg);
    transform: translate(3px, 6px) rotate(1.5deg)
  }

  14% {
    -webkit-transform: translate(4px, -7px) rotate(-2.5deg);
    transform: translate(4px, -7px) rotate(-2.5deg)
  }

  16% {
    -webkit-transform: translate(8px, 9px) rotate(.5deg);
    transform: translate(8px, 9px) rotate(.5deg)
  }

  18% {
    -webkit-transform: translate(-5px, -5px) rotate(-2.5deg);
    transform: translate(-5px, -5px) rotate(-2.5deg)
  }

  20% {
    -webkit-transform: translate(-6px, 0) rotate(.5deg);
    transform: translate(-6px, 0) rotate(.5deg)
  }

  22% {
    -webkit-transform: translate(9px, -8px) rotate(1.5deg);
    transform: translate(9px, -8px) rotate(1.5deg)
  }

  24% {
    -webkit-transform: translate(9px, -9px) rotate(3.5deg);
    transform: translate(9px, -9px) rotate(3.5deg)
  }

  26% {
    -webkit-transform: translate(1px, 2px) rotate(-2.5deg);
    transform: translate(1px, 2px) rotate(-2.5deg)
  }

  28% {
    -webkit-transform: translate(-8px, -4px) rotate(.5deg);
    transform: translate(-8px, -4px) rotate(.5deg)
  }

  30% {
    -webkit-transform: translate(2px, 8px) rotate(-1.5deg);
    transform: translate(2px, 8px) rotate(-1.5deg)
  }

  32% {
    -webkit-transform: translate(1px, -8px) rotate(-.5deg);
    transform: translate(1px, -8px) rotate(-.5deg)
  }

  34% {
    -webkit-transform: translate(9px, 7px) rotate(3.5deg);
    transform: translate(9px, 7px) rotate(3.5deg)
  }

  36% {
    -webkit-transform: translate(7px, -8px) rotate(.5deg);
    transform: translate(7px, -8px) rotate(.5deg)
  }

  38% {
    -webkit-transform: translate(-6px, 4px) rotate(.5deg);
    transform: translate(-6px, 4px) rotate(.5deg)
  }

  40% {
    -webkit-transform: translate(9px, 8px) rotate(.5deg);
    transform: translate(9px, 8px) rotate(.5deg)
  }

  42% {
    -webkit-transform: translate(5px, -2px) rotate(3.5deg);
    transform: translate(5px, -2px) rotate(3.5deg)
  }

  44% {
    -webkit-transform: translate(6px, 2px) rotate(1.5deg);
    transform: translate(6px, 2px) rotate(1.5deg)
  }

  46% {
    -webkit-transform: translate(-6px, 6px) rotate(1.5deg);
    transform: translate(-6px, 6px) rotate(1.5deg)
  }

  48% {
    -webkit-transform: translate(-9px, 9px) rotate(.5deg);
    transform: translate(-9px, 9px) rotate(.5deg)
  }

  50% {
    -webkit-transform: translate(-8px, -8px) rotate(.5deg);
    transform: translate(-8px, -8px) rotate(.5deg)
  }

  52% {
    -webkit-transform: translate(8px, -5px) rotate(1.5deg);
    transform: translate(8px, -5px) rotate(1.5deg)
  }

  54% {
    -webkit-transform: translate(3px, -9px) rotate(3.5deg);
    transform: translate(3px, -9px) rotate(3.5deg)
  }

  56% {
    -webkit-transform: translate(-5px, -8px) rotate(-2.5deg);
    transform: translate(-5px, -8px) rotate(-2.5deg)
  }

  58% {
    -webkit-transform: translate(-2px, 1px) rotate(2.5deg);
    transform: translate(-2px, 1px) rotate(2.5deg)
  }

  60% {
    -webkit-transform: translate(-3px, 2px) rotate(-.5deg);
    transform: translate(-3px, 2px) rotate(-.5deg)
  }

  62% {
    -webkit-transform: translate(4px, -2px) rotate(3.5deg);
    transform: translate(4px, -2px) rotate(3.5deg)
  }

  64% {
    -webkit-transform: translate(-5px, 9px) rotate(-2.5deg);
    transform: translate(-5px, 9px) rotate(-2.5deg)
  }

  66% {
    -webkit-transform: translate(2px, -3px) rotate(.5deg);
    transform: translate(2px, -3px) rotate(.5deg)
  }

  68% {
    -webkit-transform: translate(-7px, -8px) rotate(2.5deg);
    transform: translate(-7px, -8px) rotate(2.5deg)
  }

  70% {
    -webkit-transform: translate(0, -3px) rotate(1.5deg);
    transform: translate(0, -3px) rotate(1.5deg)
  }

  72% {
    -webkit-transform: translate(-5px, 1px) rotate(-.5deg);
    transform: translate(-5px, 1px) rotate(-.5deg)
  }

  74% {
    -webkit-transform: translate(-1px, -5px) rotate(-2.5deg);
    transform: translate(-1px, -5px) rotate(-2.5deg)
  }

  76% {
    -webkit-transform: translate(9px, -5px) rotate(3.5deg);
    transform: translate(9px, -5px) rotate(3.5deg)
  }

  78% {
    -webkit-transform: translate(-1px, -3px) rotate(1.5deg);
    transform: translate(-1px, -3px) rotate(1.5deg)
  }

  80% {
    -webkit-transform: translate(3px, -9px) rotate(2.5deg);
    transform: translate(3px, -9px) rotate(2.5deg)
  }

  82% {
    -webkit-transform: translate(7px, -7px) rotate(2.5deg);
    transform: translate(7px, -7px) rotate(2.5deg)
  }

  84% {
    -webkit-transform: translate(4px, -2px) rotate(-.5deg);
    transform: translate(4px, -2px) rotate(-.5deg)
  }

  86% {
    -webkit-transform: translate(-2px, 1px) rotate(1.5deg);
    transform: translate(-2px, 1px) rotate(1.5deg)
  }

  88% {
    -webkit-transform: translate(-7px, 2px) rotate(-1.5deg);
    transform: translate(-7px, 2px) rotate(-1.5deg)
  }

  90% {
    -webkit-transform: translate(-6px, 1px) rotate(-2.5deg);
    transform: translate(-6px, 1px) rotate(-2.5deg)
  }

  92% {
    -webkit-transform: translate(9px, 6px) rotate(-1.5deg);
    transform: translate(9px, 6px) rotate(-1.5deg)
  }

  94% {
    -webkit-transform: translate(3px, 10px) rotate(3.5deg);
    transform: translate(3px, 10px) rotate(3.5deg)
  }

  96% {
    -webkit-transform: translate(-2px, -6px) rotate(2.5deg);
    transform: translate(-2px, -6px) rotate(2.5deg)
  }

  98% {
    -webkit-transform: translate(5px, 2px) rotate(-.5deg);
    transform: translate(5px, 2px) rotate(-.5deg)
  }

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

@keyframes shake-hard {
  2% {
    -webkit-transform: translate(7px, 10px) rotate(-1.5deg);
    transform: translate(7px, 10px) rotate(-1.5deg)
  }

  4% {
    -webkit-transform: translate(-4px, -8px) rotate(.5deg);
    transform: translate(-4px, -8px) rotate(.5deg)
  }

  6% {
    -webkit-transform: translate(-8px, 0) rotate(.5deg);
    transform: translate(-8px, 0) rotate(.5deg)
  }

  8% {
    -webkit-transform: translate(8px, 4px) rotate(-.5deg);
    transform: translate(8px, 4px) rotate(-.5deg)
  }

  10% {
    -webkit-transform: translate(-2px, 6px) rotate(-.5deg);
    transform: translate(-2px, 6px) rotate(-.5deg)
  }

  12% {
    -webkit-transform: translate(3px, 6px) rotate(1.5deg);
    transform: translate(3px, 6px) rotate(1.5deg)
  }

  14% {
    -webkit-transform: translate(4px, -7px) rotate(-2.5deg);
    transform: translate(4px, -7px) rotate(-2.5deg)
  }

  16% {
    -webkit-transform: translate(8px, 9px) rotate(.5deg);
    transform: translate(8px, 9px) rotate(.5deg)
  }

  18% {
    -webkit-transform: translate(-5px, -5px) rotate(-2.5deg);
    transform: translate(-5px, -5px) rotate(-2.5deg)
  }

  20% {
    -webkit-transform: translate(-6px, 0) rotate(.5deg);
    transform: translate(-6px, 0) rotate(.5deg)
  }

  22% {
    -webkit-transform: translate(9px, -8px) rotate(1.5deg);
    transform: translate(9px, -8px) rotate(1.5deg)
  }

  24% {
    -webkit-transform: translate(9px, -9px) rotate(3.5deg);
    transform: translate(9px, -9px) rotate(3.5deg)
  }

  26% {
    -webkit-transform: translate(1px, 2px) rotate(-2.5deg);
    transform: translate(1px, 2px) rotate(-2.5deg)
  }

  28% {
    -webkit-transform: translate(-8px, -4px) rotate(.5deg);
    transform: translate(-8px, -4px) rotate(.5deg)
  }

  30% {
    -webkit-transform: translate(2px, 8px) rotate(-1.5deg);
    transform: translate(2px, 8px) rotate(-1.5deg)
  }

  32% {
    -webkit-transform: translate(1px, -8px) rotate(-.5deg);
    transform: translate(1px, -8px) rotate(-.5deg)
  }

  34% {
    -webkit-transform: translate(9px, 7px) rotate(3.5deg);
    transform: translate(9px, 7px) rotate(3.5deg)
  }

  36% {
    -webkit-transform: translate(7px, -8px) rotate(.5deg);
    transform: translate(7px, -8px) rotate(.5deg)
  }

  38% {
    -webkit-transform: translate(-6px, 4px) rotate(.5deg);
    transform: translate(-6px, 4px) rotate(.5deg)
  }

  40% {
    -webkit-transform: translate(9px, 8px) rotate(.5deg);
    transform: translate(9px, 8px) rotate(.5deg)
  }

  42% {
    -webkit-transform: translate(5px, -2px) rotate(3.5deg);
    transform: translate(5px, -2px) rotate(3.5deg)
  }

  44% {
    -webkit-transform: translate(6px, 2px) rotate(1.5deg);
    transform: translate(6px, 2px) rotate(1.5deg)
  }

  46% {
    -webkit-transform: translate(-6px, 6px) rotate(1.5deg);
    transform: translate(-6px, 6px) rotate(1.5deg)
  }

  48% {
    -webkit-transform: translate(-9px, 9px) rotate(.5deg);
    transform: translate(-9px, 9px) rotate(.5deg)
  }

  50% {
    -webkit-transform: translate(-8px, -8px) rotate(.5deg);
    transform: translate(-8px, -8px) rotate(.5deg)
  }

  52% {
    -webkit-transform: translate(8px, -5px) rotate(1.5deg);
    transform: translate(8px, -5px) rotate(1.5deg)
  }

  54% {
    -webkit-transform: translate(3px, -9px) rotate(3.5deg);
    transform: translate(3px, -9px) rotate(3.5deg)
  }

  56% {
    -webkit-transform: translate(-5px, -8px) rotate(-2.5deg);
    transform: translate(-5px, -8px) rotate(-2.5deg)
  }

  58% {
    -webkit-transform: translate(-2px, 1px) rotate(2.5deg);
    transform: translate(-2px, 1px) rotate(2.5deg)
  }

  60% {
    -webkit-transform: translate(-3px, 2px) rotate(-.5deg);
    transform: translate(-3px, 2px) rotate(-.5deg)
  }

  62% {
    -webkit-transform: translate(4px, -2px) rotate(3.5deg);
    transform: translate(4px, -2px) rotate(3.5deg)
  }

  64% {
    -webkit-transform: translate(-5px, 9px) rotate(-2.5deg);
    transform: translate(-5px, 9px) rotate(-2.5deg)
  }

  66% {
    -webkit-transform: translate(2px, -3px) rotate(.5deg);
    transform: translate(2px, -3px) rotate(.5deg)
  }

  68% {
    -webkit-transform: translate(-7px, -8px) rotate(2.5deg);
    transform: translate(-7px, -8px) rotate(2.5deg)
  }

  70% {
    -webkit-transform: translate(0, -3px) rotate(1.5deg);
    transform: translate(0, -3px) rotate(1.5deg)
  }

  72% {
    -webkit-transform: translate(-5px, 1px) rotate(-.5deg);
    transform: translate(-5px, 1px) rotate(-.5deg)
  }

  74% {
    -webkit-transform: translate(-1px, -5px) rotate(-2.5deg);
    transform: translate(-1px, -5px) rotate(-2.5deg)
  }

  76% {
    -webkit-transform: translate(9px, -5px) rotate(3.5deg);
    transform: translate(9px, -5px) rotate(3.5deg)
  }

  78% {
    -webkit-transform: translate(-1px, -3px) rotate(1.5deg);
    transform: translate(-1px, -3px) rotate(1.5deg)
  }

  80% {
    -webkit-transform: translate(3px, -9px) rotate(2.5deg);
    transform: translate(3px, -9px) rotate(2.5deg)
  }

  82% {
    -webkit-transform: translate(7px, -7px) rotate(2.5deg);
    transform: translate(7px, -7px) rotate(2.5deg)
  }

  84% {
    -webkit-transform: translate(4px, -2px) rotate(-.5deg);
    transform: translate(4px, -2px) rotate(-.5deg)
  }

  86% {
    -webkit-transform: translate(-2px, 1px) rotate(1.5deg);
    transform: translate(-2px, 1px) rotate(1.5deg)
  }

  88% {
    -webkit-transform: translate(-7px, 2px) rotate(-1.5deg);
    transform: translate(-7px, 2px) rotate(-1.5deg)
  }

  90% {
    -webkit-transform: translate(-6px, 1px) rotate(-2.5deg);
    transform: translate(-6px, 1px) rotate(-2.5deg)
  }

  92% {
    -webkit-transform: translate(9px, 6px) rotate(-1.5deg);
    transform: translate(9px, 6px) rotate(-1.5deg)
  }

  94% {
    -webkit-transform: translate(3px, 10px) rotate(3.5deg);
    transform: translate(3px, 10px) rotate(3.5deg)
  }

  96% {
    -webkit-transform: translate(-2px, -6px) rotate(2.5deg);
    transform: translate(-2px, -6px) rotate(2.5deg)
  }

  98% {
    -webkit-transform: translate(5px, 2px) rotate(-.5deg);
    transform: translate(5px, 2px) rotate(-.5deg)
  }

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

.shake-hard.shake-constant,
.shake-hard.shake-freeze,
.shake-hard:hover,
.shake-trigger:hover .shake-hard {
  -webkit-animation-name: shake-hard;
  animation-name: shake-hard;
  -webkit-animation-duration: .1s;
  animation-duration: .1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

@-webkit-keyframes shake-horizontal {
  2% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }

  4% {
    -webkit-transform: translate(6px, 0) rotate(0);
    transform: translate(6px, 0) rotate(0)
  }

  6% {
    -webkit-transform: translate(-8px, 0) rotate(0);
    transform: translate(-8px, 0) rotate(0)
  }

  8% {
    -webkit-transform: translate(-2px, 0) rotate(0);
    transform: translate(-2px, 0) rotate(0)
  }

  10% {
    -webkit-transform: translate(-9px, 0) rotate(0);
    transform: translate(-9px, 0) rotate(0)
  }

  12% {
    -webkit-transform: translate(-9px, 0) rotate(0);
    transform: translate(-9px, 0) rotate(0)
  }

  14% {
    -webkit-transform: translate(9px, 0) rotate(0);
    transform: translate(9px, 0) rotate(0)
  }

  16% {
    -webkit-transform: translate(7px, 0) rotate(0);
    transform: translate(7px, 0) rotate(0)
  }

  18% {
    -webkit-transform: translate(4px, 0) rotate(0);
    transform: translate(4px, 0) rotate(0)
  }

  20% {
    -webkit-transform: translate(2px, 0) rotate(0);
    transform: translate(2px, 0) rotate(0)
  }

  22% {
    -webkit-transform: translate(-2px, 0) rotate(0);
    transform: translate(-2px, 0) rotate(0)
  }

  24% {
    -webkit-transform: translate(-3px, 0) rotate(0);
    transform: translate(-3px, 0) rotate(0)
  }

  26% {
    -webkit-transform: translate(9px, 0) rotate(0);
    transform: translate(9px, 0) rotate(0)
  }

  28% {
    -webkit-transform: translate(-6px, 0) rotate(0);
    transform: translate(-6px, 0) rotate(0)
  }

  30% {
    -webkit-transform: translate(-8px, 0) rotate(0);
    transform: translate(-8px, 0) rotate(0)
  }

  32% {
    -webkit-transform: translate(-4px, 0) rotate(0);
    transform: translate(-4px, 0) rotate(0)
  }

  34% {
    -webkit-transform: translate(-9px, 0) rotate(0);
    transform: translate(-9px, 0) rotate(0)
  }

  36% {
    -webkit-transform: translate(1px, 0) rotate(0);
    transform: translate(1px, 0) rotate(0)
  }

  38% {
    -webkit-transform: translate(2px, 0) rotate(0);
    transform: translate(2px, 0) rotate(0)
  }

  40% {
    -webkit-transform: translate(-9px, 0) rotate(0);
    transform: translate(-9px, 0) rotate(0)
  }

  42% {
    -webkit-transform: translate(5px, 0) rotate(0);
    transform: translate(5px, 0) rotate(0)
  }

  44% {
    -webkit-transform: translate(-8px, 0) rotate(0);
    transform: translate(-8px, 0) rotate(0)
  }

  46% {
    -webkit-transform: translate(8px, 0) rotate(0);
    transform: translate(8px, 0) rotate(0)
  }

  48% {
    -webkit-transform: translate(8px, 0) rotate(0);
    transform: translate(8px, 0) rotate(0)
  }

  50% {
    -webkit-transform: translate(-2px, 0) rotate(0);
    transform: translate(-2px, 0) rotate(0)
  }

  52% {
    -webkit-transform: translate(5px, 0) rotate(0);
    transform: translate(5px, 0) rotate(0)
  }

  54% {
    -webkit-transform: translate(3px, 0) rotate(0);
    transform: translate(3px, 0) rotate(0)
  }

  56% {
    -webkit-transform: translate(7px, 0) rotate(0);
    transform: translate(7px, 0) rotate(0)
  }

  58% {
    -webkit-transform: translate(4px, 0) rotate(0);
    transform: translate(4px, 0) rotate(0)
  }

  60% {
    -webkit-transform: translate(8px, 0) rotate(0);
    transform: translate(8px, 0) rotate(0)
  }

  62% {
    -webkit-transform: translate(1px, 0) rotate(0);
    transform: translate(1px, 0) rotate(0)
  }

  64% {
    -webkit-transform: translate(2px, 0) rotate(0);
    transform: translate(2px, 0) rotate(0)
  }

  66% {
    -webkit-transform: translate(6px, 0) rotate(0);
    transform: translate(6px, 0) rotate(0)
  }

  68% {
    -webkit-transform: translate(-6px, 0) rotate(0);
    transform: translate(-6px, 0) rotate(0)
  }

  70% {
    -webkit-transform: translate(-9px, 0) rotate(0);
    transform: translate(-9px, 0) rotate(0)
  }

  72% {
    -webkit-transform: translate(4px, 0) rotate(0);
    transform: translate(4px, 0) rotate(0)
  }

  74% {
    -webkit-transform: translate(5px, 0) rotate(0);
    transform: translate(5px, 0) rotate(0)
  }

  76% {
    -webkit-transform: translate(2px, 0) rotate(0);
    transform: translate(2px, 0) rotate(0)
  }

  78% {
    -webkit-transform: translate(-4px, 0) rotate(0);
    transform: translate(-4px, 0) rotate(0)
  }

  80% {
    -webkit-transform: translate(2px, 0) rotate(0);
    transform: translate(2px, 0) rotate(0)
  }

  82% {
    -webkit-transform: translate(-9px, 0) rotate(0);
    transform: translate(-9px, 0) rotate(0)
  }

  84% {
    -webkit-transform: translate(-3px, 0) rotate(0);
    transform: translate(-3px, 0) rotate(0)
  }

  86% {
    -webkit-transform: translate(-7px, 0) rotate(0);
    transform: translate(-7px, 0) rotate(0)
  }

  88% {
    -webkit-transform: translate(1px, 0) rotate(0);
    transform: translate(1px, 0) rotate(0)
  }

  90% {
    -webkit-transform: translate(-5px, 0) rotate(0);
    transform: translate(-5px, 0) rotate(0)
  }

  92% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }

  94% {
    -webkit-transform: translate(-6px, 0) rotate(0);
    transform: translate(-6px, 0) rotate(0)
  }

  96% {
    -webkit-transform: translate(7px, 0) rotate(0);
    transform: translate(7px, 0) rotate(0)
  }

  98% {
    -webkit-transform: translate(-4px, 0) rotate(0);
    transform: translate(-4px, 0) rotate(0)
  }

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

@keyframes shake-horizontal {
  2% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }

  4% {
    -webkit-transform: translate(6px, 0) rotate(0);
    transform: translate(6px, 0) rotate(0)
  }

  6% {
    -webkit-transform: translate(-8px, 0) rotate(0);
    transform: translate(-8px, 0) rotate(0)
  }

  8% {
    -webkit-transform: translate(-2px, 0) rotate(0);
    transform: translate(-2px, 0) rotate(0)
  }

  10% {
    -webkit-transform: translate(-9px, 0) rotate(0);
    transform: translate(-9px, 0) rotate(0)
  }

  12% {
    -webkit-transform: translate(-9px, 0) rotate(0);
    transform: translate(-9px, 0) rotate(0)
  }

  14% {
    -webkit-transform: translate(9px, 0) rotate(0);
    transform: translate(9px, 0) rotate(0)
  }

  16% {
    -webkit-transform: translate(7px, 0) rotate(0);
    transform: translate(7px, 0) rotate(0)
  }

  18% {
    -webkit-transform: translate(4px, 0) rotate(0);
    transform: translate(4px, 0) rotate(0)
  }

  20% {
    -webkit-transform: translate(2px, 0) rotate(0);
    transform: translate(2px, 0) rotate(0)
  }

  22% {
    -webkit-transform: translate(-2px, 0) rotate(0);
    transform: translate(-2px, 0) rotate(0)
  }

  24% {
    -webkit-transform: translate(-3px, 0) rotate(0);
    transform: translate(-3px, 0) rotate(0)
  }

  26% {
    -webkit-transform: translate(9px, 0) rotate(0);
    transform: translate(9px, 0) rotate(0)
  }

  28% {
    -webkit-transform: translate(-6px, 0) rotate(0);
    transform: translate(-6px, 0) rotate(0)
  }

  30% {
    -webkit-transform: translate(-8px, 0) rotate(0);
    transform: translate(-8px, 0) rotate(0)
  }

  32% {
    -webkit-transform: translate(-4px, 0) rotate(0);
    transform: translate(-4px, 0) rotate(0)
  }

  34% {
    -webkit-transform: translate(-9px, 0) rotate(0);
    transform: translate(-9px, 0) rotate(0)
  }

  36% {
    -webkit-transform: translate(1px, 0) rotate(0);
    transform: translate(1px, 0) rotate(0)
  }

  38% {
    -webkit-transform: translate(2px, 0) rotate(0);
    transform: translate(2px, 0) rotate(0)
  }

  40% {
    -webkit-transform: translate(-9px, 0) rotate(0);
    transform: translate(-9px, 0) rotate(0)
  }

  42% {
    -webkit-transform: translate(5px, 0) rotate(0);
    transform: translate(5px, 0) rotate(0)
  }

  44% {
    -webkit-transform: translate(-8px, 0) rotate(0);
    transform: translate(-8px, 0) rotate(0)
  }

  46% {
    -webkit-transform: translate(8px, 0) rotate(0);
    transform: translate(8px, 0) rotate(0)
  }

  48% {
    -webkit-transform: translate(8px, 0) rotate(0);
    transform: translate(8px, 0) rotate(0)
  }

  50% {
    -webkit-transform: translate(-2px, 0) rotate(0);
    transform: translate(-2px, 0) rotate(0)
  }

  52% {
    -webkit-transform: translate(5px, 0) rotate(0);
    transform: translate(5px, 0) rotate(0)
  }

  54% {
    -webkit-transform: translate(3px, 0) rotate(0);
    transform: translate(3px, 0) rotate(0)
  }

  56% {
    -webkit-transform: translate(7px, 0) rotate(0);
    transform: translate(7px, 0) rotate(0)
  }

  58% {
    -webkit-transform: translate(4px, 0) rotate(0);
    transform: translate(4px, 0) rotate(0)
  }

  60% {
    -webkit-transform: translate(8px, 0) rotate(0);
    transform: translate(8px, 0) rotate(0)
  }

  62% {
    -webkit-transform: translate(1px, 0) rotate(0);
    transform: translate(1px, 0) rotate(0)
  }

  64% {
    -webkit-transform: translate(2px, 0) rotate(0);
    transform: translate(2px, 0) rotate(0)
  }

  66% {
    -webkit-transform: translate(6px, 0) rotate(0);
    transform: translate(6px, 0) rotate(0)
  }

  68% {
    -webkit-transform: translate(-6px, 0) rotate(0);
    transform: translate(-6px, 0) rotate(0)
  }

  70% {
    -webkit-transform: translate(-9px, 0) rotate(0);
    transform: translate(-9px, 0) rotate(0)
  }

  72% {
    -webkit-transform: translate(4px, 0) rotate(0);
    transform: translate(4px, 0) rotate(0)
  }

  74% {
    -webkit-transform: translate(5px, 0) rotate(0);
    transform: translate(5px, 0) rotate(0)
  }

  76% {
    -webkit-transform: translate(2px, 0) rotate(0);
    transform: translate(2px, 0) rotate(0)
  }

  78% {
    -webkit-transform: translate(-4px, 0) rotate(0);
    transform: translate(-4px, 0) rotate(0)
  }

  80% {
    -webkit-transform: translate(2px, 0) rotate(0);
    transform: translate(2px, 0) rotate(0)
  }

  82% {
    -webkit-transform: translate(-9px, 0) rotate(0);
    transform: translate(-9px, 0) rotate(0)
  }

  84% {
    -webkit-transform: translate(-3px, 0) rotate(0);
    transform: translate(-3px, 0) rotate(0)
  }

  86% {
    -webkit-transform: translate(-7px, 0) rotate(0);
    transform: translate(-7px, 0) rotate(0)
  }

  88% {
    -webkit-transform: translate(1px, 0) rotate(0);
    transform: translate(1px, 0) rotate(0)
  }

  90% {
    -webkit-transform: translate(-5px, 0) rotate(0);
    transform: translate(-5px, 0) rotate(0)
  }

  92% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }

  94% {
    -webkit-transform: translate(-6px, 0) rotate(0);
    transform: translate(-6px, 0) rotate(0)
  }

  96% {
    -webkit-transform: translate(7px, 0) rotate(0);
    transform: translate(7px, 0) rotate(0)
  }

  98% {
    -webkit-transform: translate(-4px, 0) rotate(0);
    transform: translate(-4px, 0) rotate(0)
  }

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

.shake-horizontal.shake-constant,
.shake-horizontal.shake-freeze,
.shake-horizontal:hover,
.shake-trigger:hover .shake-horizontal {
  -webkit-animation-name: shake-horizontal;
  animation-name: shake-horizontal;
  -webkit-animation-duration: .1s;
  animation-duration: .1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

@-webkit-keyframes shake-vertical {
  2% {
    -webkit-transform: translate(0, 9px) rotate(0);
    transform: translate(0, 9px) rotate(0)
  }

  4% {
    -webkit-transform: translate(0, 6px) rotate(0);
    transform: translate(0, 6px) rotate(0)
  }

  6% {
    -webkit-transform: translate(0, 4px) rotate(0);
    transform: translate(0, 4px) rotate(0)
  }

  8% {
    -webkit-transform: translate(0, -1px) rotate(0);
    transform: translate(0, -1px) rotate(0)
  }

  10% {
    -webkit-transform: translate(0, -5px) rotate(0);
    transform: translate(0, -5px) rotate(0)
  }

  12% {
    -webkit-transform: translate(0, -1px) rotate(0);
    transform: translate(0, -1px) rotate(0)
  }

  14% {
    -webkit-transform: translate(0, -3px) rotate(0);
    transform: translate(0, -3px) rotate(0)
  }

  16% {
    -webkit-transform: translate(0, -8px) rotate(0);
    transform: translate(0, -8px) rotate(0)
  }

  18% {
    -webkit-transform: translate(0, 9px) rotate(0);
    transform: translate(0, 9px) rotate(0)
  }

  20% {
    -webkit-transform: translate(0, 1px) rotate(0);
    transform: translate(0, 1px) rotate(0)
  }

  22% {
    -webkit-transform: translate(0, 5px) rotate(0);
    transform: translate(0, 5px) rotate(0)
  }

  24% {
    -webkit-transform: translate(0, -8px) rotate(0);
    transform: translate(0, -8px) rotate(0)
  }

  26% {
    -webkit-transform: translate(0, 5px) rotate(0);
    transform: translate(0, 5px) rotate(0)
  }

  28% {
    -webkit-transform: translate(0, -2px) rotate(0);
    transform: translate(0, -2px) rotate(0)
  }

  30% {
    -webkit-transform: translate(0, -4px) rotate(0);
    transform: translate(0, -4px) rotate(0)
  }

  32% {
    -webkit-transform: translate(0, 2px) rotate(0);
    transform: translate(0, 2px) rotate(0)
  }

  34% {
    -webkit-transform: translate(0, -5px) rotate(0);
    transform: translate(0, -5px) rotate(0)
  }

  36% {
    -webkit-transform: translate(0, 3px) rotate(0);
    transform: translate(0, 3px) rotate(0)
  }

  38% {
    -webkit-transform: translate(0, -9px) rotate(0);
    transform: translate(0, -9px) rotate(0)
  }

  40% {
    -webkit-transform: translate(0, -8px) rotate(0);
    transform: translate(0, -8px) rotate(0)
  }

  42% {
    -webkit-transform: translate(0, 7px) rotate(0);
    transform: translate(0, 7px) rotate(0)
  }

  44% {
    -webkit-transform: translate(0, -1px) rotate(0);
    transform: translate(0, -1px) rotate(0)
  }

  46% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }

  48% {
    -webkit-transform: translate(0, 5px) rotate(0);
    transform: translate(0, 5px) rotate(0)
  }

  50% {
    -webkit-transform: translate(0, 9px) rotate(0);
    transform: translate(0, 9px) rotate(0)
  }

  52% {
    -webkit-transform: translate(0, 10px) rotate(0);
    transform: translate(0, 10px) rotate(0)
  }

  54% {
    -webkit-transform: translate(0, -5px) rotate(0);
    transform: translate(0, -5px) rotate(0)
  }

  56% {
    -webkit-transform: translate(0, -1px) rotate(0);
    transform: translate(0, -1px) rotate(0)
  }

  58% {
    -webkit-transform: translate(0, -7px) rotate(0);
    transform: translate(0, -7px) rotate(0)
  }

  60% {
    -webkit-transform: translate(0, -1px) rotate(0);
    transform: translate(0, -1px) rotate(0)
  }

  62% {
    -webkit-transform: translate(0, 10px) rotate(0);
    transform: translate(0, 10px) rotate(0)
  }

  64% {
    -webkit-transform: translate(0, 1px) rotate(0);
    transform: translate(0, 1px) rotate(0)
  }

  66% {
    -webkit-transform: translate(0, -1px) rotate(0);
    transform: translate(0, -1px) rotate(0)
  }

  68% {
    -webkit-transform: translate(0, 6px) rotate(0);
    transform: translate(0, 6px) rotate(0)
  }

  70% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }

  72% {
    -webkit-transform: translate(0, -9px) rotate(0);
    transform: translate(0, -9px) rotate(0)
  }

  74% {
    -webkit-transform: translate(0, 3px) rotate(0);
    transform: translate(0, 3px) rotate(0)
  }

  76% {
    -webkit-transform: translate(0, -9px) rotate(0);
    transform: translate(0, -9px) rotate(0)
  }

  78% {
    -webkit-transform: translate(0, -9px) rotate(0);
    transform: translate(0, -9px) rotate(0)
  }

  80% {
    -webkit-transform: translate(0, 1px) rotate(0);
    transform: translate(0, 1px) rotate(0)
  }

  82% {
    -webkit-transform: translate(0, -6px) rotate(0);
    transform: translate(0, -6px) rotate(0)
  }

  84% {
    -webkit-transform: translate(0, -4px) rotate(0);
    transform: translate(0, -4px) rotate(0)
  }

  86% {
    -webkit-transform: translate(0, -4px) rotate(0);
    transform: translate(0, -4px) rotate(0)
  }

  88% {
    -webkit-transform: translate(0, 8px) rotate(0);
    transform: translate(0, 8px) rotate(0)
  }

  90% {
    -webkit-transform: translate(0, -3px) rotate(0);
    transform: translate(0, -3px) rotate(0)
  }

  92% {
    -webkit-transform: translate(0, 2px) rotate(0);
    transform: translate(0, 2px) rotate(0)
  }

  94% {
    -webkit-transform: translate(0, 5px) rotate(0);
    transform: translate(0, 5px) rotate(0)
  }

  96% {
    -webkit-transform: translate(0, 3px) rotate(0);
    transform: translate(0, 3px) rotate(0)
  }

  98% {
    -webkit-transform: translate(0, -9px) rotate(0);
    transform: translate(0, -9px) rotate(0)
  }

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

@keyframes shake-vertical {
  2% {
    -webkit-transform: translate(0, 9px) rotate(0);
    transform: translate(0, 9px) rotate(0)
  }

  4% {
    -webkit-transform: translate(0, 6px) rotate(0);
    transform: translate(0, 6px) rotate(0)
  }

  6% {
    -webkit-transform: translate(0, 4px) rotate(0);
    transform: translate(0, 4px) rotate(0)
  }

  8% {
    -webkit-transform: translate(0, -1px) rotate(0);
    transform: translate(0, -1px) rotate(0)
  }

  10% {
    -webkit-transform: translate(0, -5px) rotate(0);
    transform: translate(0, -5px) rotate(0)
  }

  12% {
    -webkit-transform: translate(0, -1px) rotate(0);
    transform: translate(0, -1px) rotate(0)
  }

  14% {
    -webkit-transform: translate(0, -3px) rotate(0);
    transform: translate(0, -3px) rotate(0)
  }

  16% {
    -webkit-transform: translate(0, -8px) rotate(0);
    transform: translate(0, -8px) rotate(0)
  }

  18% {
    -webkit-transform: translate(0, 9px) rotate(0);
    transform: translate(0, 9px) rotate(0)
  }

  20% {
    -webkit-transform: translate(0, 1px) rotate(0);
    transform: translate(0, 1px) rotate(0)
  }

  22% {
    -webkit-transform: translate(0, 5px) rotate(0);
    transform: translate(0, 5px) rotate(0)
  }

  24% {
    -webkit-transform: translate(0, -8px) rotate(0);
    transform: translate(0, -8px) rotate(0)
  }

  26% {
    -webkit-transform: translate(0, 5px) rotate(0);
    transform: translate(0, 5px) rotate(0)
  }

  28% {
    -webkit-transform: translate(0, -2px) rotate(0);
    transform: translate(0, -2px) rotate(0)
  }

  30% {
    -webkit-transform: translate(0, -4px) rotate(0);
    transform: translate(0, -4px) rotate(0)
  }

  32% {
    -webkit-transform: translate(0, 2px) rotate(0);
    transform: translate(0, 2px) rotate(0)
  }

  34% {
    -webkit-transform: translate(0, -5px) rotate(0);
    transform: translate(0, -5px) rotate(0)
  }

  36% {
    -webkit-transform: translate(0, 3px) rotate(0);
    transform: translate(0, 3px) rotate(0)
  }

  38% {
    -webkit-transform: translate(0, -9px) rotate(0);
    transform: translate(0, -9px) rotate(0)
  }

  40% {
    -webkit-transform: translate(0, -8px) rotate(0);
    transform: translate(0, -8px) rotate(0)
  }

  42% {
    -webkit-transform: translate(0, 7px) rotate(0);
    transform: translate(0, 7px) rotate(0)
  }

  44% {
    -webkit-transform: translate(0, -1px) rotate(0);
    transform: translate(0, -1px) rotate(0)
  }

  46% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }

  48% {
    -webkit-transform: translate(0, 5px) rotate(0);
    transform: translate(0, 5px) rotate(0)
  }

  50% {
    -webkit-transform: translate(0, 9px) rotate(0);
    transform: translate(0, 9px) rotate(0)
  }

  52% {
    -webkit-transform: translate(0, 10px) rotate(0);
    transform: translate(0, 10px) rotate(0)
  }

  54% {
    -webkit-transform: translate(0, -5px) rotate(0);
    transform: translate(0, -5px) rotate(0)
  }

  56% {
    -webkit-transform: translate(0, -1px) rotate(0);
    transform: translate(0, -1px) rotate(0)
  }

  58% {
    -webkit-transform: translate(0, -7px) rotate(0);
    transform: translate(0, -7px) rotate(0)
  }

  60% {
    -webkit-transform: translate(0, -1px) rotate(0);
    transform: translate(0, -1px) rotate(0)
  }

  62% {
    -webkit-transform: translate(0, 10px) rotate(0);
    transform: translate(0, 10px) rotate(0)
  }

  64% {
    -webkit-transform: translate(0, 1px) rotate(0);
    transform: translate(0, 1px) rotate(0)
  }

  66% {
    -webkit-transform: translate(0, -1px) rotate(0);
    transform: translate(0, -1px) rotate(0)
  }

  68% {
    -webkit-transform: translate(0, 6px) rotate(0);
    transform: translate(0, 6px) rotate(0)
  }

  70% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }

  72% {
    -webkit-transform: translate(0, -9px) rotate(0);
    transform: translate(0, -9px) rotate(0)
  }

  74% {
    -webkit-transform: translate(0, 3px) rotate(0);
    transform: translate(0, 3px) rotate(0)
  }

  76% {
    -webkit-transform: translate(0, -9px) rotate(0);
    transform: translate(0, -9px) rotate(0)
  }

  78% {
    -webkit-transform: translate(0, -9px) rotate(0);
    transform: translate(0, -9px) rotate(0)
  }

  80% {
    -webkit-transform: translate(0, 1px) rotate(0);
    transform: translate(0, 1px) rotate(0)
  }

  82% {
    -webkit-transform: translate(0, -6px) rotate(0);
    transform: translate(0, -6px) rotate(0)
  }

  84% {
    -webkit-transform: translate(0, -4px) rotate(0);
    transform: translate(0, -4px) rotate(0)
  }

  86% {
    -webkit-transform: translate(0, -4px) rotate(0);
    transform: translate(0, -4px) rotate(0)
  }

  88% {
    -webkit-transform: translate(0, 8px) rotate(0);
    transform: translate(0, 8px) rotate(0)
  }

  90% {
    -webkit-transform: translate(0, -3px) rotate(0);
    transform: translate(0, -3px) rotate(0)
  }

  92% {
    -webkit-transform: translate(0, 2px) rotate(0);
    transform: translate(0, 2px) rotate(0)
  }

  94% {
    -webkit-transform: translate(0, 5px) rotate(0);
    transform: translate(0, 5px) rotate(0)
  }

  96% {
    -webkit-transform: translate(0, 3px) rotate(0);
    transform: translate(0, 3px) rotate(0)
  }

  98% {
    -webkit-transform: translate(0, -9px) rotate(0);
    transform: translate(0, -9px) rotate(0)
  }

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

.shake-trigger:hover .shake-vertical,
.shake-vertical.shake-constant,
.shake-vertical.shake-freeze,
.shake-vertical:hover {
  -webkit-animation-name: shake-vertical;
  animation-name: shake-vertical;
  -webkit-animation-duration: .1s;
  animation-duration: .1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

@-webkit-keyframes shake-rotate {
  2% {
    -webkit-transform: translate(0, 0) rotate(1.5deg);
    transform: translate(0, 0) rotate(1.5deg)
  }

  4% {
    -webkit-transform: translate(0, 0) rotate(-1.5deg);
    transform: translate(0, 0) rotate(-1.5deg)
  }

  6% {
    -webkit-transform: translate(0, 0) rotate(-1.5deg);
    transform: translate(0, 0) rotate(-1.5deg)
  }

  8% {
    -webkit-transform: translate(0, 0) rotate(4.5deg);
    transform: translate(0, 0) rotate(4.5deg)
  }

  10% {
    -webkit-transform: translate(0, 0) rotate(3.5deg);
    transform: translate(0, 0) rotate(3.5deg)
  }

  12% {
    -webkit-transform: translate(0, 0) rotate(1.5deg);
    transform: translate(0, 0) rotate(1.5deg)
  }

  14% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  16% {
    -webkit-transform: translate(0, 0) rotate(-3.5deg);
    transform: translate(0, 0) rotate(-3.5deg)
  }

  18% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  20% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  22% {
    -webkit-transform: translate(0, 0) rotate(-6.5deg);
    transform: translate(0, 0) rotate(-6.5deg)
  }

  24% {
    -webkit-transform: translate(0, 0) rotate(-.5deg);
    transform: translate(0, 0) rotate(-.5deg)
  }

  26% {
    -webkit-transform: translate(0, 0) rotate(-5.5deg);
    transform: translate(0, 0) rotate(-5.5deg)
  }

  28% {
    -webkit-transform: translate(0, 0) rotate(4.5deg);
    transform: translate(0, 0) rotate(4.5deg)
  }

  30% {
    -webkit-transform: translate(0, 0) rotate(6.5deg);
    transform: translate(0, 0) rotate(6.5deg)
  }

  32% {
    -webkit-transform: translate(0, 0) rotate(-2.5deg);
    transform: translate(0, 0) rotate(-2.5deg)
  }

  34% {
    -webkit-transform: translate(0, 0) rotate(-2.5deg);
    transform: translate(0, 0) rotate(-2.5deg)
  }

  36% {
    -webkit-transform: translate(0, 0) rotate(-6.5deg);
    transform: translate(0, 0) rotate(-6.5deg)
  }

  38% {
    -webkit-transform: translate(0, 0) rotate(-5.5deg);
    transform: translate(0, 0) rotate(-5.5deg)
  }

  40% {
    -webkit-transform: translate(0, 0) rotate(1.5deg);
    transform: translate(0, 0) rotate(1.5deg)
  }

  42% {
    -webkit-transform: translate(0, 0) rotate(-4.5deg);
    transform: translate(0, 0) rotate(-4.5deg)
  }

  44% {
    -webkit-transform: translate(0, 0) rotate(4.5deg);
    transform: translate(0, 0) rotate(4.5deg)
  }

  46% {
    -webkit-transform: translate(0, 0) rotate(-5.5deg);
    transform: translate(0, 0) rotate(-5.5deg)
  }

  48% {
    -webkit-transform: translate(0, 0) rotate(-5.5deg);
    transform: translate(0, 0) rotate(-5.5deg)
  }

  50% {
    -webkit-transform: translate(0, 0) rotate(6.5deg);
    transform: translate(0, 0) rotate(6.5deg)
  }

  52% {
    -webkit-transform: translate(0, 0) rotate(-1.5deg);
    transform: translate(0, 0) rotate(-1.5deg)
  }

  54% {
    -webkit-transform: translate(0, 0) rotate(4.5deg);
    transform: translate(0, 0) rotate(4.5deg)
  }

  56% {
    -webkit-transform: translate(0, 0) rotate(5.5deg);
    transform: translate(0, 0) rotate(5.5deg)
  }

  58% {
    -webkit-transform: translate(0, 0) rotate(6.5deg);
    transform: translate(0, 0) rotate(6.5deg)
  }

  60% {
    -webkit-transform: translate(0, 0) rotate(4.5deg);
    transform: translate(0, 0) rotate(4.5deg)
  }

  62% {
    -webkit-transform: translate(0, 0) rotate(-1.5deg);
    transform: translate(0, 0) rotate(-1.5deg)
  }

  64% {
    -webkit-transform: translate(0, 0) rotate(5.5deg);
    transform: translate(0, 0) rotate(5.5deg)
  }

  66% {
    -webkit-transform: translate(0, 0) rotate(-6.5deg);
    transform: translate(0, 0) rotate(-6.5deg)
  }

  68% {
    -webkit-transform: translate(0, 0) rotate(-4.5deg);
    transform: translate(0, 0) rotate(-4.5deg)
  }

  70% {
    -webkit-transform: translate(0, 0) rotate(2.5deg);
    transform: translate(0, 0) rotate(2.5deg)
  }

  72% {
    -webkit-transform: translate(0, 0) rotate(-6.5deg);
    transform: translate(0, 0) rotate(-6.5deg)
  }

  74% {
    -webkit-transform: translate(0, 0) rotate(2.5deg);
    transform: translate(0, 0) rotate(2.5deg)
  }

  76% {
    -webkit-transform: translate(0, 0) rotate(4.5deg);
    transform: translate(0, 0) rotate(4.5deg)
  }

  78% {
    -webkit-transform: translate(0, 0) rotate(-1.5deg);
    transform: translate(0, 0) rotate(-1.5deg)
  }

  80% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  82% {
    -webkit-transform: translate(0, 0) rotate(-6.5deg);
    transform: translate(0, 0) rotate(-6.5deg)
  }

  84% {
    -webkit-transform: translate(0, 0) rotate(5.5deg);
    transform: translate(0, 0) rotate(5.5deg)
  }

  86% {
    -webkit-transform: translate(0, 0) rotate(-4.5deg);
    transform: translate(0, 0) rotate(-4.5deg)
  }

  88% {
    -webkit-transform: translate(0, 0) rotate(4.5deg);
    transform: translate(0, 0) rotate(4.5deg)
  }

  90% {
    -webkit-transform: translate(0, 0) rotate(4.5deg);
    transform: translate(0, 0) rotate(4.5deg)
  }

  92% {
    -webkit-transform: translate(0, 0) rotate(1.5deg);
    transform: translate(0, 0) rotate(1.5deg)
  }

  94% {
    -webkit-transform: translate(0, 0) rotate(-1.5deg);
    transform: translate(0, 0) rotate(-1.5deg)
  }

  96% {
    -webkit-transform: translate(0, 0) rotate(-6.5deg);
    transform: translate(0, 0) rotate(-6.5deg)
  }

  98% {
    -webkit-transform: translate(0, 0) rotate(-2.5deg);
    transform: translate(0, 0) rotate(-2.5deg)
  }

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

@keyframes shake-rotate {
  2% {
    -webkit-transform: translate(0, 0) rotate(1.5deg);
    transform: translate(0, 0) rotate(1.5deg)
  }

  4% {
    -webkit-transform: translate(0, 0) rotate(-1.5deg);
    transform: translate(0, 0) rotate(-1.5deg)
  }

  6% {
    -webkit-transform: translate(0, 0) rotate(-1.5deg);
    transform: translate(0, 0) rotate(-1.5deg)
  }

  8% {
    -webkit-transform: translate(0, 0) rotate(4.5deg);
    transform: translate(0, 0) rotate(4.5deg)
  }

  10% {
    -webkit-transform: translate(0, 0) rotate(3.5deg);
    transform: translate(0, 0) rotate(3.5deg)
  }

  12% {
    -webkit-transform: translate(0, 0) rotate(1.5deg);
    transform: translate(0, 0) rotate(1.5deg)
  }

  14% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  16% {
    -webkit-transform: translate(0, 0) rotate(-3.5deg);
    transform: translate(0, 0) rotate(-3.5deg)
  }

  18% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  20% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  22% {
    -webkit-transform: translate(0, 0) rotate(-6.5deg);
    transform: translate(0, 0) rotate(-6.5deg)
  }

  24% {
    -webkit-transform: translate(0, 0) rotate(-.5deg);
    transform: translate(0, 0) rotate(-.5deg)
  }

  26% {
    -webkit-transform: translate(0, 0) rotate(-5.5deg);
    transform: translate(0, 0) rotate(-5.5deg)
  }

  28% {
    -webkit-transform: translate(0, 0) rotate(4.5deg);
    transform: translate(0, 0) rotate(4.5deg)
  }

  30% {
    -webkit-transform: translate(0, 0) rotate(6.5deg);
    transform: translate(0, 0) rotate(6.5deg)
  }

  32% {
    -webkit-transform: translate(0, 0) rotate(-2.5deg);
    transform: translate(0, 0) rotate(-2.5deg)
  }

  34% {
    -webkit-transform: translate(0, 0) rotate(-2.5deg);
    transform: translate(0, 0) rotate(-2.5deg)
  }

  36% {
    -webkit-transform: translate(0, 0) rotate(-6.5deg);
    transform: translate(0, 0) rotate(-6.5deg)
  }

  38% {
    -webkit-transform: translate(0, 0) rotate(-5.5deg);
    transform: translate(0, 0) rotate(-5.5deg)
  }

  40% {
    -webkit-transform: translate(0, 0) rotate(1.5deg);
    transform: translate(0, 0) rotate(1.5deg)
  }

  42% {
    -webkit-transform: translate(0, 0) rotate(-4.5deg);
    transform: translate(0, 0) rotate(-4.5deg)
  }

  44% {
    -webkit-transform: translate(0, 0) rotate(4.5deg);
    transform: translate(0, 0) rotate(4.5deg)
  }

  46% {
    -webkit-transform: translate(0, 0) rotate(-5.5deg);
    transform: translate(0, 0) rotate(-5.5deg)
  }

  48% {
    -webkit-transform: translate(0, 0) rotate(-5.5deg);
    transform: translate(0, 0) rotate(-5.5deg)
  }

  50% {
    -webkit-transform: translate(0, 0) rotate(6.5deg);
    transform: translate(0, 0) rotate(6.5deg)
  }

  52% {
    -webkit-transform: translate(0, 0) rotate(-1.5deg);
    transform: translate(0, 0) rotate(-1.5deg)
  }

  54% {
    -webkit-transform: translate(0, 0) rotate(4.5deg);
    transform: translate(0, 0) rotate(4.5deg)
  }

  56% {
    -webkit-transform: translate(0, 0) rotate(5.5deg);
    transform: translate(0, 0) rotate(5.5deg)
  }

  58% {
    -webkit-transform: translate(0, 0) rotate(6.5deg);
    transform: translate(0, 0) rotate(6.5deg)
  }

  60% {
    -webkit-transform: translate(0, 0) rotate(4.5deg);
    transform: translate(0, 0) rotate(4.5deg)
  }

  62% {
    -webkit-transform: translate(0, 0) rotate(-1.5deg);
    transform: translate(0, 0) rotate(-1.5deg)
  }

  64% {
    -webkit-transform: translate(0, 0) rotate(5.5deg);
    transform: translate(0, 0) rotate(5.5deg)
  }

  66% {
    -webkit-transform: translate(0, 0) rotate(-6.5deg);
    transform: translate(0, 0) rotate(-6.5deg)
  }

  68% {
    -webkit-transform: translate(0, 0) rotate(-4.5deg);
    transform: translate(0, 0) rotate(-4.5deg)
  }

  70% {
    -webkit-transform: translate(0, 0) rotate(2.5deg);
    transform: translate(0, 0) rotate(2.5deg)
  }

  72% {
    -webkit-transform: translate(0, 0) rotate(-6.5deg);
    transform: translate(0, 0) rotate(-6.5deg)
  }

  74% {
    -webkit-transform: translate(0, 0) rotate(2.5deg);
    transform: translate(0, 0) rotate(2.5deg)
  }

  76% {
    -webkit-transform: translate(0, 0) rotate(4.5deg);
    transform: translate(0, 0) rotate(4.5deg)
  }

  78% {
    -webkit-transform: translate(0, 0) rotate(-1.5deg);
    transform: translate(0, 0) rotate(-1.5deg)
  }

  80% {
    -webkit-transform: translate(0, 0) rotate(.5deg);
    transform: translate(0, 0) rotate(.5deg)
  }

  82% {
    -webkit-transform: translate(0, 0) rotate(-6.5deg);
    transform: translate(0, 0) rotate(-6.5deg)
  }

  84% {
    -webkit-transform: translate(0, 0) rotate(5.5deg);
    transform: translate(0, 0) rotate(5.5deg)
  }

  86% {
    -webkit-transform: translate(0, 0) rotate(-4.5deg);
    transform: translate(0, 0) rotate(-4.5deg)
  }

  88% {
    -webkit-transform: translate(0, 0) rotate(4.5deg);
    transform: translate(0, 0) rotate(4.5deg)
  }

  90% {
    -webkit-transform: translate(0, 0) rotate(4.5deg);
    transform: translate(0, 0) rotate(4.5deg)
  }

  92% {
    -webkit-transform: translate(0, 0) rotate(1.5deg);
    transform: translate(0, 0) rotate(1.5deg)
  }

  94% {
    -webkit-transform: translate(0, 0) rotate(-1.5deg);
    transform: translate(0, 0) rotate(-1.5deg)
  }

  96% {
    -webkit-transform: translate(0, 0) rotate(-6.5deg);
    transform: translate(0, 0) rotate(-6.5deg)
  }

  98% {
    -webkit-transform: translate(0, 0) rotate(-2.5deg);
    transform: translate(0, 0) rotate(-2.5deg)
  }

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

.shake-rotate.shake-constant,
.shake-rotate.shake-freeze,
.shake-rotate:hover,
.shake-trigger:hover .shake-rotate {
  -webkit-animation-name: shake-rotate;
  animation-name: shake-rotate;
  -webkit-animation-duration: .1s;
  animation-duration: .1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

@-webkit-keyframes shake-opacity {
  10% {
    -webkit-transform: translate(-4px, -3px) rotate(.5deg);
    transform: translate(-4px, -3px) rotate(.5deg);
    opacity: .11
  }

  20% {
    -webkit-transform: translate(4px, 3px) rotate(-.5deg);
    transform: translate(4px, 3px) rotate(-.5deg);
    opacity: .93
  }

  30% {
    -webkit-transform: translate(3px, 4px) rotate(2.5deg);
    transform: translate(3px, 4px) rotate(2.5deg);
    opacity: .46
  }

  40% {
    -webkit-transform: translate(5px, -2px) rotate(-1.5deg);
    transform: translate(5px, -2px) rotate(-1.5deg);
    opacity: .97
  }

  50% {
    -webkit-transform: translate(4px, -4px) rotate(-.5deg);
    transform: translate(4px, -4px) rotate(-.5deg);
    opacity: .95
  }

  60% {
    -webkit-transform: translate(0, -3px) rotate(2.5deg);
    transform: translate(0, -3px) rotate(2.5deg);
    opacity: .87
  }

  70% {
    -webkit-transform: translate(-1px, 2px) rotate(2.5deg);
    transform: translate(-1px, 2px) rotate(2.5deg);
    opacity: 1
  }

  80% {
    -webkit-transform: translate(4px, 2px) rotate(-.5deg);
    transform: translate(4px, 2px) rotate(-.5deg);
    opacity: .94
  }

  90% {
    -webkit-transform: translate(1px, 4px) rotate(-.5deg);
    transform: translate(1px, 4px) rotate(-.5deg);
    opacity: .47
  }

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

@keyframes shake-opacity {
  10% {
    -webkit-transform: translate(-4px, -3px) rotate(.5deg);
    transform: translate(-4px, -3px) rotate(.5deg);
    opacity: .11
  }

  20% {
    -webkit-transform: translate(4px, 3px) rotate(-.5deg);
    transform: translate(4px, 3px) rotate(-.5deg);
    opacity: .93
  }

  30% {
    -webkit-transform: translate(3px, 4px) rotate(2.5deg);
    transform: translate(3px, 4px) rotate(2.5deg);
    opacity: .46
  }

  40% {
    -webkit-transform: translate(5px, -2px) rotate(-1.5deg);
    transform: translate(5px, -2px) rotate(-1.5deg);
    opacity: .97
  }

  50% {
    -webkit-transform: translate(4px, -4px) rotate(-.5deg);
    transform: translate(4px, -4px) rotate(-.5deg);
    opacity: .95
  }

  60% {
    -webkit-transform: translate(0, -3px) rotate(2.5deg);
    transform: translate(0, -3px) rotate(2.5deg);
    opacity: .87
  }

  70% {
    -webkit-transform: translate(-1px, 2px) rotate(2.5deg);
    transform: translate(-1px, 2px) rotate(2.5deg);
    opacity: 1
  }

  80% {
    -webkit-transform: translate(4px, 2px) rotate(-.5deg);
    transform: translate(4px, 2px) rotate(-.5deg);
    opacity: .94
  }

  90% {
    -webkit-transform: translate(1px, 4px) rotate(-.5deg);
    transform: translate(1px, 4px) rotate(-.5deg);
    opacity: .47
  }

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

.shake-opacity.shake-constant,
.shake-opacity.shake-freeze,
.shake-opacity:hover,
.shake-trigger:hover .shake-opacity {
  -webkit-animation-name: shake-opacity;
  animation-name: shake-opacity;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

@-webkit-keyframes shake-crazy {
  10% {
    -webkit-transform: translate(15px, 19px) rotate(3deg);
    transform: translate(15px, 19px) rotate(3deg);
    opacity: .53
  }

  20% {
    -webkit-transform: translate(14px, -1px) rotate(2deg);
    transform: translate(14px, -1px) rotate(2deg);
    opacity: .25
  }

  30% {
    -webkit-transform: translate(4px, -17px) rotate(2deg);
    transform: translate(4px, -17px) rotate(2deg);
    opacity: .73
  }

  40% {
    -webkit-transform: translate(14px, 19px) rotate(-1deg);
    transform: translate(14px, 19px) rotate(-1deg);
    opacity: .13
  }

  50% {
    -webkit-transform: translate(-14px, 6px) rotate(6deg);
    transform: translate(-14px, 6px) rotate(6deg);
    opacity: .4
  }

  60% {
    -webkit-transform: translate(-6px, -12px) rotate(4deg);
    transform: translate(-6px, -12px) rotate(4deg);
    opacity: .48
  }

  70% {
    -webkit-transform: translate(8px, -8px) rotate(-5deg);
    transform: translate(8px, -8px) rotate(-5deg);
    opacity: .28
  }

  80% {
    -webkit-transform: translate(-5px, 18px) rotate(-3deg);
    transform: translate(-5px, 18px) rotate(-3deg);
    opacity: .97
  }

  90% {
    -webkit-transform: translate(-19px, 10px) rotate(-2deg);
    transform: translate(-19px, 10px) rotate(-2deg);
    opacity: .14
  }

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

@keyframes shake-crazy {
  10% {
    -webkit-transform: translate(15px, 19px) rotate(3deg);
    transform: translate(15px, 19px) rotate(3deg);
    opacity: .53
  }

  20% {
    -webkit-transform: translate(14px, -1px) rotate(2deg);
    transform: translate(14px, -1px) rotate(2deg);
    opacity: .25
  }

  30% {
    -webkit-transform: translate(4px, -17px) rotate(2deg);
    transform: translate(4px, -17px) rotate(2deg);
    opacity: .73
  }

  40% {
    -webkit-transform: translate(14px, 19px) rotate(-1deg);
    transform: translate(14px, 19px) rotate(-1deg);
    opacity: .13
  }

  50% {
    -webkit-transform: translate(-14px, 6px) rotate(6deg);
    transform: translate(-14px, 6px) rotate(6deg);
    opacity: .4
  }

  60% {
    -webkit-transform: translate(-6px, -12px) rotate(4deg);
    transform: translate(-6px, -12px) rotate(4deg);
    opacity: .48
  }

  70% {
    -webkit-transform: translate(8px, -8px) rotate(-5deg);
    transform: translate(8px, -8px) rotate(-5deg);
    opacity: .28
  }

  80% {
    -webkit-transform: translate(-5px, 18px) rotate(-3deg);
    transform: translate(-5px, 18px) rotate(-3deg);
    opacity: .97
  }

  90% {
    -webkit-transform: translate(-19px, 10px) rotate(-2deg);
    transform: translate(-19px, 10px) rotate(-2deg);
    opacity: .14
  }

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

.shake-crazy.shake-constant,
.shake-crazy.shake-freeze,
.shake-crazy:hover,
.shake-trigger:hover .shake-crazy {
  -webkit-animation-name: shake-crazy;
  animation-name: shake-crazy;
  -webkit-animation-duration: .1s;
  animation-duration: .1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

@-webkit-keyframes shake-chunk {
  2% {
    -webkit-transform: translate(-12px, -8px) rotate(1deg);
    transform: translate(-12px, -8px) rotate(1deg)
  }

  4% {
    -webkit-transform: translate(-12px, -11px) rotate(5deg);
    transform: translate(-12px, -11px) rotate(5deg)
  }

  6% {
    -webkit-transform: translate(-7px, 13px) rotate(-13deg);
    transform: translate(-7px, 13px) rotate(-13deg)
  }

  8% {
    -webkit-transform: translate(-10px, -9px) rotate(-3deg);
    transform: translate(-10px, -9px) rotate(-3deg)
  }

  10% {
    -webkit-transform: translate(5px, 7px) rotate(2deg);
    transform: translate(5px, 7px) rotate(2deg)
  }

  12% {
    -webkit-transform: translate(9px, -12px) rotate(8deg);
    transform: translate(9px, -12px) rotate(8deg)
  }

  14% {
    -webkit-transform: translate(-12px, 2px) rotate(-1deg);
    transform: translate(-12px, 2px) rotate(-1deg)
  }

  16% {
    -webkit-transform: translate(2px, -6px) rotate(-11deg);
    transform: translate(2px, -6px) rotate(-11deg)
  }

  18% {
    -webkit-transform: translate(13px, -1px) rotate(12deg);
    transform: translate(13px, -1px) rotate(12deg)
  }

  20% {
    -webkit-transform: translate(-3px, -7px) rotate(0);
    transform: translate(-3px, -7px) rotate(0)
  }

  22% {
    -webkit-transform: translate(-1px, 14px) rotate(14deg);
    transform: translate(-1px, 14px) rotate(14deg)
  }

  24% {
    -webkit-transform: translate(-10px, -13px) rotate(-5deg);
    transform: translate(-10px, -13px) rotate(-5deg)
  }

  26% {
    -webkit-transform: translate(-10px, -6px) rotate(-8deg);
    transform: translate(-10px, -6px) rotate(-8deg)
  }

  28% {
    -webkit-transform: translate(7px, 15px) rotate(11deg);
    transform: translate(7px, 15px) rotate(11deg)
  }

  30% {
    -webkit-transform: translate(12px, 0) rotate(-5deg);
    transform: translate(12px, 0) rotate(-5deg)
  }

  32% {
    -webkit-transform: translate(-8px, -4px) rotate(11deg);
    transform: translate(-8px, -4px) rotate(11deg)
  }

  34% {
    -webkit-transform: translate(4px, 7px) rotate(-4deg);
    transform: translate(4px, 7px) rotate(-4deg)
  }

  36% {
    -webkit-transform: translate(8px, -2px) rotate(-5deg);
    transform: translate(8px, -2px) rotate(-5deg)
  }

  38% {
    -webkit-transform: translate(11px, -9px) rotate(-8deg);
    transform: translate(11px, -9px) rotate(-8deg)
  }

  0%,
  100%,
  40% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

@keyframes shake-chunk {
  2% {
    -webkit-transform: translate(-12px, -8px) rotate(1deg);
    transform: translate(-12px, -8px) rotate(1deg)
  }

  4% {
    -webkit-transform: translate(-12px, -11px) rotate(5deg);
    transform: translate(-12px, -11px) rotate(5deg)
  }

  6% {
    -webkit-transform: translate(-7px, 13px) rotate(-13deg);
    transform: translate(-7px, 13px) rotate(-13deg)
  }

  8% {
    -webkit-transform: translate(-10px, -9px) rotate(-3deg);
    transform: translate(-10px, -9px) rotate(-3deg)
  }

  10% {
    -webkit-transform: translate(5px, 7px) rotate(2deg);
    transform: translate(5px, 7px) rotate(2deg)
  }

  12% {
    -webkit-transform: translate(9px, -12px) rotate(8deg);
    transform: translate(9px, -12px) rotate(8deg)
  }

  14% {
    -webkit-transform: translate(-12px, 2px) rotate(-1deg);
    transform: translate(-12px, 2px) rotate(-1deg)
  }

  16% {
    -webkit-transform: translate(2px, -6px) rotate(-11deg);
    transform: translate(2px, -6px) rotate(-11deg)
  }

  18% {
    -webkit-transform: translate(13px, -1px) rotate(12deg);
    transform: translate(13px, -1px) rotate(12deg)
  }

  20% {
    -webkit-transform: translate(-3px, -7px) rotate(0);
    transform: translate(-3px, -7px) rotate(0)
  }

  22% {
    -webkit-transform: translate(-1px, 14px) rotate(14deg);
    transform: translate(-1px, 14px) rotate(14deg)
  }

  24% {
    -webkit-transform: translate(-10px, -13px) rotate(-5deg);
    transform: translate(-10px, -13px) rotate(-5deg)
  }

  26% {
    -webkit-transform: translate(-10px, -6px) rotate(-8deg);
    transform: translate(-10px, -6px) rotate(-8deg)
  }

  28% {
    -webkit-transform: translate(7px, 15px) rotate(11deg);
    transform: translate(7px, 15px) rotate(11deg)
  }

  30% {
    -webkit-transform: translate(12px, 0) rotate(-5deg);
    transform: translate(12px, 0) rotate(-5deg)
  }

  32% {
    -webkit-transform: translate(-8px, -4px) rotate(11deg);
    transform: translate(-8px, -4px) rotate(11deg)
  }

  34% {
    -webkit-transform: translate(4px, 7px) rotate(-4deg);
    transform: translate(4px, 7px) rotate(-4deg)
  }

  36% {
    -webkit-transform: translate(8px, -2px) rotate(-5deg);
    transform: translate(8px, -2px) rotate(-5deg)
  }

  38% {
    -webkit-transform: translate(11px, -9px) rotate(-8deg);
    transform: translate(11px, -9px) rotate(-8deg)
  }

  0%,
  100%,
  40% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0)
  }
}

.shake-chunk.shake-constant,
.shake-chunk.shake-freeze,
.shake-chunk:hover,
.shake-trigger:hover .shake-chunk {
  -webkit-animation-name: shake-chunk;
  animation-name: shake-chunk;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

.blocker {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 1;
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #000;
  background-color: rgba(0, 0, 0, .75);
  text-align: center
}

.blocker:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -.05em
}

.blocker.behind {
  background-color: transparent
}

.modal {
  display: none;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  max-width: 500px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 90%;
  background: #fff;
  padding: 15px 30px;
  border-radius: 8px;
  -webkit-box-shadow: 0 0 10px #000;
  -o-box-shadow: 0 0 10px #000;
  -ms-box-shadow: 0 0 10px #000;
  box-shadow: 0 0 10px #000;
  text-align: left
}

.modal a.close-modal {
  position: absolute;
  top: -12.5px;
  right: -12.5px;
  display: block;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==)
}

.modal-spinner {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  padding: 12px 16px;
  border-radius: 5px;
  background-color: #111;
  height: 20px
}

.modal-spinner>div {
  border-radius: 100px;
  background-color: #fff;
  height: 20px;
  width: 2px;
  margin: 0 1px;
  display: inline-block;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out
}

.modal-spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s
}

.modal-spinner .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s
}

.modal-spinner .rect4 {
  -webkit-animation-delay: -.9s;
  animation-delay: -.9s
}

@-webkit-keyframes sk-stretchdelay {

  0%,
  100%,
  40% {
    -webkit-transform: scaleY(.5)
  }

  20% {
    -webkit-transform: scaleY(1)
  }
}

@keyframes sk-stretchdelay {

  0%,
  100%,
  40% {
    transform: scaleY(.5);
    -webkit-transform: scaleY(.5)
  }

  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1)
  }
}

.padShow {
  display: none !important
}

.phoneShow {
  display: none !important
}

@media screen and (max-width:1380px) {
  .padShow {
    display: block !important
  }

  .padHide {
    display: none !important
  }

  .padShow.hide {
    display: none !important
  }
}

@media screen and (max-width:768px) {
  .phoneHide {
    display: none !important
  }

  .phoneShow {
    display: block !important
  }

  .phoneShow.hide {
    display: none !important
  }
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

body {
  font-family: "微軟正黑體", "Microsoft JhengHei", STHeiti, "STHeiti Light", Arial, sans-serif
}

.noto-font {
  font-family: 'Noto Serif TC'
}

.hide {
  display: none !important
}

a {
  text-decoration: none;
  color: inherit
}

.mainContainer {
  width: 100%;
  padding-top: 80px;
  overflow-x: hidden
}

.tempHide {
  -webkit-transform: translate(0, 50px);
  -ms-transform: translate(0, 50px);
  transform: translate(0, 50px);
  opacity: 0;
  -webkit-transition: all .8s;
  -o-transition: all .8s;
  transition: all .8s
}

.tempHide.left {
  -webkit-transform: translate(-50px, 0);
  -ms-transform: translate(-50px, 0);
  transform: translate(-50px, 0)
}

.tempHide.right {
  -webkit-transform: translate(50px, 0);
  -ms-transform: translate(50px, 0);
  transform: translate(50px, 0)
}

.tempHide.show {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0)
}

.underline {
  position: relative
}

.underline:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #fff;
  bottom: -1px;
  left: 0
}

@-webkit-keyframes sun {
  from {
    opacity: 1
  }

  50% {
    opacity: .95
  }

  to {
    opacity: 1
  }
}

@keyframes sun {
  from {
    opacity: 1
  }

  50% {
    opacity: .95
  }

  to {
    opacity: 1
  }
}

#top-btn {
  width: 50px;
  height: 160px;
  background-image: url(../images/topBtn.png);
  position: fixed;
  bottom: 100px;
  right: 20px;
  cursor: pointer;
  z-index: 99;
  -webkit-transform: translate(0, 500px);
  -ms-transform: translate(0, 500px);
  transform: translate(0, 500px);
  will-change: transform;
  opacity: 0;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s
}

#top-btn.show {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0)
}

#top-btn.show:hover {
  -webkit-transform: translate(0, -10px);
  -ms-transform: translate(0, -10px);
  transform: translate(0, -10px)
}

@media screen and (max-width:768px) {
  #top-btn {
    right: 0
  }
}

#event-btn {
  position: relative;
  position: fixed;
  top: 100%;
  right: -50%;
  z-index: 100;
  will-change: transform, top, margin-top;
  -webkit-transform: translate(0, calc(-100% - 15px));
  -ms-transform: translate(0, calc(-100% - 15px));
  transform: translate(0, calc(-100% - 15px));
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  margin-top: 0;
  -webkit-transition: all .8s;
  -o-transition: all .8s;
  transition: all .8s
}

#event-btn>* {
  position: absolute;
  top: 0;
  left: 0
}

#event-btn>:first-child {
  position: relative
}

@media screen and (max-width:1380px) {
  #event-btn {
    -webkit-transform: translate(0, calc(-100% - 15px)) scale(.8);
    -ms-transform: translate(0, calc(-100% - 15px)) scale(.8);
    transform: translate(0, calc(-100% - 15px)) scale(.8)
  }
}

#event-btn .bg {
  width: 400px;
  height: 310px;
  background-image: url(../images/index-right.png)
}


#event-btn .pro {
  width: 400px;
  height: 310px;
  background-image: url(../images/index-pro0.gif)
}

#event-btn.show {
  right: 0
}

.custom-select {
  position: relative;
  display: block;
  max-width: 400px;
  min-width: 160px;
  border: 1px solid #fff;
  background-color: #1199c6;
  z-index: 10
}

.custom-select select {
  border: none;
  outline: 0;
  background: 0 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  margin: 0;
  display: block;
  width: 100%;
  padding: 12px 40px 15px 15px;
  font-size: 24px;
  color: #fff;
  background-color: #1199c6
}

.custom-select:after {
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  content: '';
  width: 12px;
  height: 10px;
  background-image: url(../images/icon-arrD.png)
}

.custom-input {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.custom-input input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0
}

.custom-input .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border: 1px solid #000;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s
}

.custom-input input:checked~.checkmark {
  background-color: #2196f3
}

.custom-input .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  -webkit-transform: scale(.1);
  -ms-transform: scale(.1);
  transform: scale(.1);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s
}

.custom-input input:checked~.checkmark:after {
  display: block
}

.custom-input .checkmark:after {
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg) scale(1);
  -ms-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1)
}

.bg-gradient-1 {
  background: #d2ad73;
  background: -webkit-gradient(linear, left top, right top, from(#d2ad73), color-stop(50%, #ebd2a1), to(#d2ad73));
  background: -o-linear-gradient(left, #d2ad73 0, #ebd2a1 50%, #d2ad73 100%);
  background: linear-gradient(90deg, #d2ad73 0, #ebd2a1 50%, #d2ad73 100%)
}

.bg-gradient-2 {
  background: #e3d8c5;
  background: -o-linear-gradient(321deg, #e3d8c5 0, #fefefd 100%);
  background: linear-gradient(129deg, #e3d8c5 0, #fefefd 100%)
}

.form-btn {
  width: 400px;
  height: 58px;
  background-image: url(../images/btn-1.png);
  text-align: center;
  padding-top: 11px;
  font-size: 18px;
  position: relative;
  letter-spacing: .1em;
  cursor: pointer;
  width: 285px;
  background-size: 100% 100%;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  border: 0;
  -webkit-transition: all .1s;
  -o-transition: all .1s;
  transition: all .1s
}

.form-btn.blue {
  width: 400px;
  height: 58px;
  background-image: url(../images/btn-2.png);
  width: 285px
}

.form-btn.white {
  width: 284px;
  height: 58px;
  background-image: url(../images/btn-3.png);
  width: 285px
}

.form-btn.gray {
  width: 448px;
  height: 75px;
  background-image: url(../images/btn-4.png);
  width: 285px;
  height: 58px
}

@media screen and (max-width:768px) {
  .form-btn {
    height: 90px;
    padding-top: 22px;
    width: 100%;
    font-size: 24px
  }

  .form-btn.white {
    height: 90px;
    width: 100%
  }

  .form-btn.blue {
    height: 90px;
    width: 100%
  }

  .form-btn.gray {
    width: 448px;
    height: 75px;
    background-image: url(../images/btn-4.png);
    height: 90px;
    width: 100%
  }
}

.form-btn:after {
  content: '';
  position: absolute;
  top: 17px;
  right: 15px;
  width: 29px;
  height: 7px;
  background-image: url(../images/arr.png);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s
}

@media screen and (max-width:768px) {
  .form-btn:after {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    top: 32px;
    right: 25px
  }
}

.form-btn:hover {
  -webkit-transform: scale(.95);
  -ms-transform: scale(.95);
  transform: scale(.95)
}

.form-btn:hover:after {
  right: 20px
}

.form-btn.disabled {
  pointer-events: none
}

.form-btn.disabled:after {
  display: none
}

.form-input {
  width: 100%;
  background-color: #1199c6;
  border: 1px solid #fff;
  padding: 15px;
  font-size: 19px;
  margin: 5px 0;
  color: #fff
}

.form-input::-webkit-input-placeholder {
  color: #fff
}

.form-input::-moz-placeholder {
  color: #fff
}

.form-input:-ms-input-placeholder {
  color: #fff
}

.form-input::-ms-input-placeholder {
  color: #fff
}

.form-input::placeholder {
  color: #fff
}

.form-input:-webkit-autofill,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px #1199c6 inset;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: #fff
}

.blocker {
  z-index: 100;
  background-color: rgba(0, 0, 0, .5)
}

.blocker .modal {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  max-width: none;
  width: auto
}

@media screen and (max-width:768px) {
  .blocker .modal {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5)
  }
}

.blocker .modal p {
  font-size: 18px;
  text-align: center
}

.blocker .modal .store-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

@media screen and (max-width:768px) {
  .blocker .modal .store-btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
  }
}

.blocker .modal .store-btn {
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid rgba(17, 153, 198, .5);
  margin: 10px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: inline-block;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  cursor: pointer
}

.blocker .modal .store-btn:hover {
  opacity: .7
}

.blocker .modal .store-btn img {
  display: block
}

.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 80px;
  z-index: 50;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 25px
}

@media screen and (max-width:768px) {
  .header {
    padding: 0 15px
  }
}

.header .menuBtn {
  width: 64px;
  height: 60px;
  background-image: url(../images/menuBtn.png);
  cursor: pointer;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s
}

.header .menuBtn.cloz {
  background-image: url(../images/menuBtnCloz.png)
}

@media screen and (max-width:768px) {
  .header .menuBtn {
    -webkit-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7);
    width: 80px;
    height: 82px;
    background-image: url(../images/menuBtn2.png)
  }

  .header .menuBtn.cloz {
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8);
    width: 80px;
    height: 79px;
    background-image: url(../images/menuBtnCloz2.png)
  }
}

.header .logo {
  width: 127px;
  height: 89px;
  background-image: url(../images/logo.png);
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%) scale(.8);
  -ms-transform: translateX(-50%) scale(.8);
  transform: translateX(-50%) scale(.8)
}

@media screen and (max-width:768px) {
  .header .logo {
    -webkit-transform: translateX(-50%) scale(.8);
    -ms-transform: translateX(-50%) scale(.8);
    transform: translateX(-50%) scale(.8)
  }
}

body {
  width: 100%;
  height: 100%
}

.slideout-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 320px;
  min-height: 100vh;
  -webkit-overflow-scrolling: touch;
  z-index: 0;
  display: none
}

.slideout-menu-left {
  left: 0
}

.slideout-menu-right {
  right: 0
}

.slideout-panel {
  position: relative;
  z-index: 1;
  will-change: transform;
  background-color: #fff;
  min-height: 100vh
}

.slideout-open {
  overflow: hidden
}

.slideout-open .slideout-panel,
.slideout-open body {
  overflow: hidden
}

.slideout-open .slideout-menu {
  display: block
}

.panel:before {
  content: '';
  display: block;
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition: background-color .5s ease-in-out;
  -o-transition: background-color .5s ease-in-out;
  transition: background-color .5s ease-in-out
}

.panel-open:before {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, .3);
  z-index: 99
}

#menu {
  background-color: #0d9ecf;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

#menu .menu-section-list {
  list-style-type: none;
  padding: 20px 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%
}

#menu .menu-section-list li {
  padding: 30px 15px;
  color: #fff;
  font-size: 21px;
  position: relative;
  cursor: pointer
}

#menu .menu-section-list li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, .5)
}

#menu .menu-section-list li:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 25px;
  width: 32px;
  height: 7px;
  background-image: url(../images/arr-yellow.png);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  will-change: transform;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0
}

@media screen and (min-width:769px) {
  #menu .menu-section-list li:hover {
    color: #fffb8b
  }

  #menu .menu-section-list li:hover:after {
    opacity: 1;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
  }
}

.footer {
  height: 65px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #fff
}

.footer .txt {
  color: #38b1c9
}

/* .index {
  width: 100%;
  position: relative;
  height: calc(100vh - 80px)
} */

@media screen and (max-width:768px) {
  .index {
    height: auto
  }
}

/* .index .back-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden
} */

.index .back-bg .video-bg {
  width: 100%;
  font-size: 0;
}

.index .back-bg .video-bg img {
  width: 100%;
}

.index .back-bg .moblie-index {
  display: none
}

.index .back-bg .moblie-index img {
  display: block;
  width: 100%
}

@media screen and (max-width:768px) {
  .index .back-bg {
    position: relative
  }

  .index .back-bg .video-bg {
    display: none
  }
}

@media screen and (max-width:768px) and (max-width:768px) {
  .index .back-bg .moblie-index {
    display: block
  }
}

/* .index .front-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0
} */

.index .front-wrap .textLeft {
  position: absolute;
  top: 35px;
  left: 70px
}

@media screen and (max-height:900px) {
  .index .front-wrap .textLeft {
    -webkit-transform: translate(0, 0) scale(.8);
    -ms-transform: translate(0, 0) scale(.8);
    transform: translate(0, 0) scale(.8);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0
  }
}

@media screen and (max-height:780px) {
  .index .front-wrap .textLeft {
    -webkit-transform: translate(0, 0) scale(.6);
    -ms-transform: translate(0, 0) scale(.6);
    transform: translate(0, 0) scale(.6);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0
  }
}

@media screen and (max-width:768px) {
  .index .front-wrap .textLeft {
    display: none
  }
}

.index .front-wrap .textLeft .txt-content {
  position: relative
}

.index .front-wrap .textLeft .txt-content>* {
  position: absolute;
  top: 0;
  left: 0
}

.index .front-wrap .textLeft .txt-content>:first-child {
  position: relative
}

.index .front-wrap .textLeft .t1 {
  width: 191px;
  height: 488px;
  background-image: url(../images/index-t1.png)
}

.index .front-wrap .textLeft .t2 {
  width: 191px;
  height: 488px;
  background-image: url(../images/index-t2.png)
}

.index .front-wrap .textRight {
  position: absolute;
  right: 25px;
  bottom: 220px
}

.index .front-wrap .textRight .txt-content {
  position: relative
}

.index .front-wrap .textRight .txt-content>* {
  position: absolute;
  top: 0;
  left: 0
}

.index .front-wrap .textRight .txt-content>:first-child {
  position: relative
}

@media screen and (max-height:900px) {
  .index .front-wrap .textRight {
    -webkit-transform: translate(0, 0) scale(.8);
    -ms-transform: translate(0, 0) scale(.8);
    transform: translate(0, 0) scale(.8);
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    right: 15px;
    bottom: 180px
  }
}

@media screen and (max-height:780px) {
  .index .front-wrap .textRight {
    -webkit-transform: translate(0, 0) scale(.6);
    -ms-transform: translate(0, 0) scale(.6);
    transform: translate(0, 0) scale(.6)
  }
}

@media screen and (max-height:600px) {
  .index .front-wrap .textRight {
    -webkit-transform: translate(0, 0) scale(.5);
    -ms-transform: translate(0, 0) scale(.5);
    transform: translate(0, 0) scale(.5)
  }
}

@media screen and (max-height:555px) {
  .index .front-wrap .textRight {
    -webkit-transform: translate(0, 0) scale(.4);
    -ms-transform: translate(0, 0) scale(.4);
    transform: translate(0, 0) scale(.4);
    right: 30px
  }
}

@media screen and (max-width:768px) {
  .index .front-wrap .textRight {
    display: none
  }
}

.index .front-wrap .textRight .t1 {
  width: 230px;
  height: 546px;
  background-image: url(../images/index-tt1.png)
}

.index .front-wrap .textRight .t2 {
  width: 230px;
  height: 546px;
  background-image: url(../images/index-tt2.gif)
}

.index .front-wrap .textRight .t3 {
  width: 230px;
  height: 546px;
  background-image: url(../images/index-tt3.png)
}

.index .front-wrap .textRight .t4 {
  width: 230px;
  height: 546px;
  background-image: url(../images/index-tt4.png)
}

.ingredient {
  min-height: 100vh;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url(../images/bg2.jpg);
  background-position: 50% 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 150px 0;
  position: relative;
  overflow: hidden
}

.ingredient:after {
  content: '';
  position: absolute;
  top: -50px;
  right: -250px;
  width: 601px;
  height: 481px;
  background-image: url(../images/sunlights.png)
}

.ingredient .title {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 10;
  -webkit-transition: all .8s;
  -o-transition: all .8s;
  transition: all .8s
}

@media screen and (max-width:768px) {
  .ingredient .title {
    -webkit-transform: translate(-18px, 0) scale(.8);
    -ms-transform: translate(-18px, 0) scale(.8);
    transform: translate(-18px, 0) scale(.8)
  }
}

.ingredient .title .t1 {
  width: 331px;
  height: 111px;
  background-image: url(../images/p2-title1.png);
  -webkit-transform: scale(.8);
  -ms-transform: scale(.8);
  transform: scale(.8)
}

.ingredient .title .t2 {
  width: 274px;
  height: 59px;
  background-image: url(../images/p2-title2.png);
  margin-left: -15px
}

.ingredient .note {
  color: #fff;
  font-size: 14px;
  line-height: 1.6em;
  padding: 20px
}

.ingredient .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 30px;
  max-width: 100%;
  padding-left: 40px
}

@media screen and (max-height:780px) {
  .ingredient .content {
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8)
  }
}

@media screen and (max-width:768px) {
  .ingredient .content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
  }
}

.ingredient .content .videoWrap {
  position: relative;
  width: 846px;
  z-index: 5;
  max-width: 100%;
  top: 50px
}

@media screen and (max-width:768px) {
  .ingredient .content .videoWrap {
    width: 92%;
    -ms-flex-item-align: start;
    align-self: start
  }
}

.ingredient .content .videoWrap .frame {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .5);
  top: 7px;
  left: -8px;
  z-index: 2;
  pointer-events: none
}

.ingredient .content .videoWrap .videoBox {
  overflow: hidden;
  width: 100%
}

.ingredient .content .videoWrap .videoPlayBtn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s
}

.ingredient .content .videoWrap .videoPlayBtn .v-btn {
  width: 150px;
  height: 150px;
  background-image: url(../images/playBtn.png);
  -webkit-transform: scale(.7);
  -ms-transform: scale(.7);
  transform: scale(.7);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s
}

.ingredient .content .videoWrap .videoPlayBtn:hover {
  background-color: rgba(0, 0, 0, .1)
}

.ingredient .content .videoWrap .videoPlayBtn:hover .v-btn {
  -webkit-transform: scale(.6);
  -ms-transform: scale(.6);
  transform: scale(.6)
}

.ingredient .content .videoWrap .videoPlayBtn.show {
  opacity: 1
}

.ingredient .content .videoWrap video {
  width: 100%;
  position: relative;
  left: 1px
}

.ingredient .content .videoWrap .videoTitle {
  position: absolute;
  top: -20px;
  left: 50%;
  -webkit-transform: translate(-50%, -100%);
  -ms-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  opacity: 1;
  z-index: 4;
  max-width: 80%
}

.ingredient .content .videoWrap .videoTitle.show {
  opacity: 1
}

.ingredient .content .videoWrap .txt {
  position: absolute;
  top: 100%;
  left: 0;
  color: #fff;
  font-size: 14px;
  padding: 20px;
  padding-right: 80px;
  line-height: 1.6em
}

.ingredient .content .textWrap {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url(../images/p2-txtBg.jpg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 533px;
  padding: 80px 40px 80px 80px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  top: -60px;
  left: -40px
}

@media screen and (max-width:768px) {
  .ingredient .content .textWrap {
    top: 0;
    left: 0;
    margin-top: 20px;
    width: 90%
  }
}

.ingredient .content .textWrap .headline {
  position: relative
}

.ingredient .content .textWrap .headline>* {
  position: absolute;
  top: 0;
  left: 0
}

.ingredient .content .textWrap .headline>:first-child {
  position: relative
}

.ingredient .content .textWrap .headline .t1 {
  width: 386px;
  height: 111px;
  background-image: url(../images/p2-pop2.png)
}

.ingredient .content .textWrap .headline .t2 {
  width: 386px;
  height: 111px;
  background-image: url(../images/p2-pop1.png)
}

.ingredient .content .textWrap .txt {
  margin-top: 30px;
  color: #fff;
  font-size: 21px;
  letter-spacing: .2em;
  line-height: 1.8em
}

.ingredient2 {
  min-height: 100vh;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url(../images/bg3-02.jpg);
  background-position: 0 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 150px 0;
  font-size: 21px;
  color: #fff;
  padding-right: 30px;
  -webkit-transition: all .1s;
  -o-transition: all .1s;
  transition: all .1s;
  position: relative;
  overflow: hidden
}

.ingredient2:after {
  content: '';
  position: absolute;
  top: -50px;
  right: -250px;
  width: 601px;
  height: 481px;
  background-image: url(../images/sunlights.png)
}

@media screen and (max-width:768px) {
  .ingredient2 {
    background-image: url(../images/bg3-moblie.jpg);
    background-position: 0 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-right: 0;
    display: block;
    min-height: auto;
    padding-bottom: 360px
  }
}

@media screen and (max-width:768px) {
  .ingredient2 .content .headline {
    margin-left: 35px
  }
}

.ingredient2 .content .headline .t1 {
  width: 458px;
  height: 68px;
  background-image: url(../images/p3-t1.png)
}

.ingredient2 .content .headline .txt {
  margin-top: 20px;
  padding-left: 17px;
  font-size: 22px
}

@media screen and (max-width:768px) {
  .ingredient2 .content .headline .txt {
    padding-left: 0;
    font-size: 24px;
    font-weight: 700
  }
}

.ingredient2 .content .sub {
  padding-left: 136px;
  padding-top: 76px;
  font-size: 19px;
  background-repeat: no-repeat;
  line-height: 1.6em;
  margin-top: 40px;
  font-weight: 700;
  text-shadow: 0 0 10px #0a6bac, 0 0 10px #0a6bac
}

@media screen and (max-width:768px) {
  .ingredient2 .content .sub {
    font-size: 22px
  }
}

.ingredient2 .content .title2 {
  background-image: url(../images/p3-t2.png);
  min-width: 479px;
  min-height: 132px;
  margin-left: 30px
}

@media screen and (max-width:768px) {
  .ingredient2 .content .title2 {
    min-width: auto;
    margin-left: 20px
  }
}

.ingredient2 .content .title3 {
  background-image: url(../images/p3-t3.png);
  min-width: 562px;
  min-height: 168px;
  margin-left: 60px
}

@media screen and (max-width:768px) {
  .ingredient2 .content .title3 {
    margin-left: 20px;
    min-width: auto
  }
}

@-webkit-keyframes floating {
  from {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }

  50% {
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px)
  }

  to {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }
}

@keyframes floating {
  from {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }

  50% {
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px)
  }

  to {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }
}

@-webkit-keyframes arr {
  from {
    -webkit-transform: translate(15px, 0);
    transform: translate(15px, 0)
  }

  50% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }

  to {
    -webkit-transform: translate(15px, 0);
    transform: translate(15px, 0)
  }
}

@keyframes arr {
  from {
    -webkit-transform: translate(15px, 0);
    transform: translate(15px, 0)
  }

  50% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }

  to {
    -webkit-transform: translate(15px, 0);
    transform: translate(15px, 0)
  }
}

@-webkit-keyframes arr2 {
  from {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }

  50% {
    -webkit-transform: translate(15px, 0);
    transform: translate(15px, 0)
  }

  to {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }
}

@keyframes arr2 {
  from {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }

  50% {
    -webkit-transform: translate(15px, 0);
    transform: translate(15px, 0)
  }

  to {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }
}

@-webkit-keyframes arr3 {
  from {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }

  50% {
    -webkit-transform: translate(-7px, 0);
    transform: translate(-7px, 0)
  }

  to {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }
}

@keyframes arr3 {
  from {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }

  50% {
    -webkit-transform: translate(-7px, 0);
    transform: translate(-7px, 0)
  }

  to {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }
}

.products {
  min-height: calc(100vh -100px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

@media screen and (max-width:768px) {
  .products {
    min-height: auto
  }
}

.products .swiper-container {
  width: 100%
}

.products .swiper-container .swiper-btn {
  position: absolute;
  top: 50%;
  margin-top: -43px;
  z-index: 10;
  cursor: pointer
}

.products .swiper-container .swiper-btn-prev {
  width: 32px;
  height: 60px;
  background-image: url(../images/arrLeft2.png);
  left: 25px;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-animation-name: arr;
  animation-name: arr;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out
}

.products .swiper-container .swiper-btn-prev.swiper-button-disabled {
  left: -100px
}

.products .swiper-container .swiper-btn-next {
  width: 35px;
  height: 65px;
  background-image: url(../images/arrRight2.png);
  right: 25px;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-animation-name: arr2;
  animation-name: arr2;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out
}

.products .swiper-container .swiper-btn-next.swiper-button-disabled {
  right: -100px
}

.products .pro-1 {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url(../images/pbg-1.jpg);
  padding: 100px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

@media screen and (max-height:780px) {
  .products .pro-1 {
    padding: 0
  }
}

@media screen and (max-width:768px) {
  .products .pro-1 {
    padding: 150px 0
  }
}

.products .pro-1 .content {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

@media screen and (max-height:780px) {
  .products .pro-1 .content {
    -webkit-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7)
  }
}

@media screen and (max-width:768px) {
  .products .pro-1 .content {
    -webkit-transform: scale(1.25);
    -ms-transform: scale(1.25);
    transform: scale(1.25)
  }
}

.products .pro-1 .content .pro-title {
  font-size: 40px;
  font-weight: 700;
  color: #483431
}

.products .pro-1 .content .pro-title .txt span {
  display: inline-block
}

.products .pro-1 .content .pro-title .icon-x {
  margin: 0 5px
}

@media screen and (max-width:768px) {
  .products .pro-1 .content .pro-title {
    font-size: 38px
  }
}

.products .pro-1 .content .proBox {
  margin-top: 30px;
  position: relative;
  min-height: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end
}

.products .pro-1 .content .proBox .product {
  width: 135px;
  height: 256px;
  background-image: url(../images/pro-1.png);
  -webkit-animation-name: floating;
  animation-name: floating;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s
}

.products .pro-1 .content .proBox .bubble {
  width: 71px;
  height: 74px;
  background-image: url(../images/pro-sub-1.png);
  position: absolute;
  right: -80px;
  bottom: 10px
}

.products .pro-1 .content .proBox .badge {
  width: 87px;
  height: 138px;
  background-image: url(../images/pro1-badge.gif);
  position: absolute;
  top: 0;
  left: -100px
}

.products .pro-1 .content .info {
  width: 253px;
  height: 66px;
  background-image: url(../images/pro-title-1.png);
  margin-top: 20px
}

.products .pro-1 .content .feature {
  width: 399px;
  height: 129px;
  background-image: url(../images/pro-feature-1.png);
  margin-top: 32px
}

.products .pro-1 .content .btn {
  letter-spacing: .1em;
  font-weight: 700;
  font-size: 18px;
  padding-top: 14px;
  text-align: center;
  cursor: pointer;
  position: relative;
  margin-top: 15px;
  width: 400px;
  height: 58px;
  background-image: url(../images/btn-1.png)
}

.products .pro-1 .content .btn:after {
  content: '';
  right: 15px;
  top: 17px;
  position: absolute;
  width: 72px;
  height: 19px;
  background-image: url(../images/buyTxt.png);
  -webkit-animation-name: arr3;
  animation-name: arr3;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out
}

.products .pro-1 .content .more {
  -ms-flex-item-align: start;
  align-self: start;
  margin: 0 auto;
  margin-top: 5px;
  display: block;
  width: 400px
}

.products .pro-2 {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url(../images/pbg-1.jpg);
  padding: 100px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

@media screen and (max-height:780px) {
  .products .pro-2 {
    padding: 0
  }
}

@media screen and (max-width:768px) {
  .products .pro-2 {
    padding: 150px 0
  }
}

.products .pro-2 .content {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

@media screen and (max-height:780px) {
  .products .pro-2 .content {
    -webkit-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7)
  }
}

@media screen and (max-width:768px) {
  .products .pro-2 .content {
    -webkit-transform: scale(1.25);
    -ms-transform: scale(1.25);
    transform: scale(1.25)
  }
}

.products .pro-2 .content .pro-title {
  font-size: 40px;
  font-weight: 700;
  color: #483431
}

.products .pro-2 .content .pro-title .txt span {
  display: inline-block
}

.products .pro-2 .content .pro-title .icon-x {
  margin: 0 5px
}

@media screen and (max-width:768px) {
  .products .pro-2 .content .pro-title {
    font-size: 38px
  }
}

.products .pro-2 .content .proBox {
  margin-top: 30px;
  position: relative;
  min-height: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end
}

.products .pro-2 .content .proBox .product {
  width: 125px;
  height: 294px;
  background-image: url(../images/pro-2.png);
  -webkit-animation-name: floating;
  animation-name: floating;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
  animation-delay: 0s
}

.products .pro-2 .content .proBox .bubble {
  width: 74px;
  height: 76px;
  background-image: url(../images/pro-sub-2.png);
  position: absolute;
  right: -80px;
  bottom: 10px
}

.products .pro-2 .content .proBox .badge {
  width: 87px;
  height: 138px;
  background-image: url(../images/pro1-badge.gif);
  position: absolute;
  top: 0;
  left: -100px
}

.products .pro-2 .content .info {
  width: 259px;
  height: 66px;
  background-image: url(../images/pro-title-2.png);
  margin-top: 20px
}

.products .pro-2 .content .feature {
  width: 399px;
  height: 129px;
  background-image: url(../images/pro-feature-2.png);
  margin-top: 32px
}

.products .pro-2 .content .btn {
  letter-spacing: .1em;
  font-weight: 700;
  font-size: 18px;
  padding-top: 14px;
  text-align: center;
  cursor: pointer;
  position: relative;
  margin-top: 15px;
  width: 400px;
  height: 58px;
  background-image: url(../images/btn-1.png)
}

.products .pro-2 .content .btn:after {
  content: '';
  right: 15px;
  top: 17px;
  position: absolute;
  width: 72px;
  height: 19px;
  background-image: url(../images/buyTxt.png);
  -webkit-animation-name: arr3;
  animation-name: arr3;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out
}

.products .pro-2 .content .more {
  -ms-flex-item-align: start;
  align-self: start;
  margin: 0 auto;
  margin-top: 5px;
  display: block;
  width: 400px
}

.products .pro-3 {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url(../images/pbg-1.jpg);
  padding: 100px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url(../images/pbg-2.jpg)
}

@media screen and (max-height:780px) {
  .products .pro-3 {
    padding: 0
  }
}

@media screen and (max-width:768px) {
  .products .pro-3 {
    padding: 150px 0
  }
}

.products .pro-3 .content {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

@media screen and (max-height:780px) {
  .products .pro-3 .content {
    -webkit-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7)
  }
}

@media screen and (max-width:768px) {
  .products .pro-3 .content {
    -webkit-transform: scale(1.25);
    -ms-transform: scale(1.25);
    transform: scale(1.25)
  }
}

.products .pro-3 .content .pro-title {
  font-size: 40px;
  font-weight: 700;
  color: #483431;
  color: #298bc3
}

.products .pro-3 .content .pro-title .txt span {
  display: inline-block
}

.products .pro-3 .content .pro-title .icon-x {
  margin: 0 5px
}

@media screen and (max-width:768px) {
  .products .pro-3 .content .pro-title {
    font-size: 38px
  }
}

.products .pro-3 .content .proBox {
  margin-top: 30px;
  position: relative;
  min-height: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end
}

.products .pro-3 .content .proBox .product {
  width: 97px;
  height: 295px;
  background-image: url(../images/pro-3.png);
  -webkit-animation-name: floating;
  animation-name: floating;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-delay: 1s;
  animation-delay: 1s
}

.products .pro-3 .content .proBox .bubble {
  width: 88px;
  height: 92px;
  background-image: url(../images/pro-sub-3.png);
  position: absolute;
  right: -80px;
  bottom: 10px;
  right: -90px;
  bottom: -5px
}

.products .pro-3 .content .proBox .badge {
  width: 87px;
  height: 138px;
  background-image: url(../images/pro1-badge.gif);
  position: absolute;
  top: 0;
  left: -100px
}

.products .pro-3 .content .info {
  width: 267px;
  height: 67px;
  background-image: url(../images/pro-title-3.png);
  margin-top: 20px
}

.products .pro-3 .content .feature {
  width: 399px;
  height: 129px;
  background-image: url(../images/pro-feature-3.png);
  margin-top: 32px
}

.products .pro-3 .content .btn {
  letter-spacing: .1em;
  font-weight: 700;
  font-size: 18px;
  padding-top: 14px;
  text-align: center;
  cursor: pointer;
  position: relative;
  margin-top: 15px;
  width: 400px;
  height: 58px;
  background-image: url(../images/btn-1.png);
  width: 400px;
  height: 58px;
  background-image: url(../images/btn-2.png)
}

.products .pro-3 .content .btn:after {
  content: '';
  right: 15px;
  top: 17px;
  position: absolute;
  width: 72px;
  height: 19px;
  background-image: url(../images/buyTxt.png);
  -webkit-animation-name: arr3;
  animation-name: arr3;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out
}

.products .pro-3 .content .more {
  -ms-flex-item-align: start;
  align-self: start;
  margin: 0 auto;
  margin-top: 5px;
  display: block;
  width: 400px
}

.beauty {
  min-height: 100vh;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url(../images/bg4.jpg);
  background-position: 50% 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 150px 0
}

.beauty .title {
  font-size: 52px;
  text-shadow: 0 0 10px rgba(255, 255, 255, .5);
  color: #fff;
  font-weight: 700;
  letter-spacing: .05em
}

@media screen and (max-width:768px) {
  .beauty .title {
    font-size: 40px
  }
}

.beauty .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-left: 30px;
  margin-top: 60px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

@media screen and (max-width:768px) {
  .beauty .content {
    padding-left: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
  }
}

.beauty .content .sildeWrap {
  position: relative;
  z-index: 5;
  width: calc(100% - 480px);
  height: 354px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1
}

@media screen and (max-width:768px) {
  .beauty .content .sildeWrap {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    width: 95%;
    -ms-flex-item-align: end;
    align-self: flex-end
  }
}

.beauty .content .sildeWrap .frame {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .5);
  top: 7px;
  left: -8px;
  z-index: 2;
  pointer-events: none
}

.beauty .content .sildeWrap .swiper-container {
  width: 100%;
  height: 350px;
  background-color: rgba(255, 255, 255, .3);
  overflow: hidden
}

.beauty .content .sildeWrap .swiper-container .swiper-slide {
  background-repeat: no-repeat;
  width: 350px
}

.beauty .content .sildeWrap .swiper-container .swiper-slide img {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.beauty .content .textWrap {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url(../images/p2-txtBg.jpg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 480px;
  padding: 60px 70px 50px 20px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  top: 40px;
  left: 40px
}

@media screen and (max-width:768px) {
  .beauty .content .textWrap {
    -ms-flex-item-align: start;
    align-self: start;
    padding: 60px 70px 50px 60px;
    top: -15px;
    left: 15px;
    width: 90%
  }
}

.beauty .content .textWrap .headline {
  position: relative;
  left: 20px
}

.beauty .content .textWrap .headline>* {
  position: absolute;
  top: 0;
  left: 0
}

.beauty .content .textWrap .headline>:first-child {
  position: relative
}

.beauty .content .textWrap .headline .t1 {
  width: 301px;
  height: 134px;
  background-image: url(../images/p4-t1.png)
}

.beauty .content .textWrap .headline .t2 {
  width: 301px;
  height: 134px;
  background-image: url(../images/p4-t2.png)
}

.beauty .content .textWrap .txt {
  text-align: right;
  margin-top: 30px;
  color: #fff;
  font-size: 21px;
  line-height: 1.8em
}

.beauty .content .textWrap .tag {
  font-size: 21px;
  position: absolute;
  bottom: -50px;
  left: 0;
  color: #0e64a0
}

@media screen and (max-width:768px) {
  .beauty .content .textWrap .tag {
    padding-left: 25px;
    left: auto;
    right: 0
  }
}

.form {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url(../images/bg5.jpg);
  background-position: 50% 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 150px 0
}

.form:after {
  content: '';
  position: absolute;
  top: -50px;
  right: -250px;
  width: 601px;
  height: 481px;
  background-image: url(../images/sunlights.png)
}

@media screen and (max-width:768px) {
  .form {
    padding: 100px 30px 250px
  }
}

.form .content {
  width: 100%;
  max-width: 600px;
  position: relative
}

.form .content .product {
  width: 400px;
  height: 500px;
  background-image: url(../images/pro.png);
  position: absolute;
  left: -20px;
  -webkit-transform: translate(-100%, -20px);
  -ms-transform: translate(-100%, -20px);
  transform: translate(-100%, -20px);
  background-size: 100%;
  background-repeat: no-repeat;
}

@media screen and (max-width:768px) {
  .form .content .product {
    position: relative;
    left: 0;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    margin: 0 auto;
    margin-bottom: 25px;
    width: 320px;
    height: 360px;
  }
}

.form .content .form-container .ft-1 {
  position: relative;
  margin-left: -5px
}

.form .content .form-container .ft-1>* {
  position: absolute;
  top: 0;
  left: 0
}

.form .content .form-container .ft-1>:first-child {
  position: relative
}

.form .content .form-container .ft-1 .t1 {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url(../images/form-t1.png);
  position: relative;
  width: 100%
}

.form .content .form-container .ft-1 .t1:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 10.48253%
}

/* .form .content .form-container .ft-1 .t1>* {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}

.form .content .form-container .ft-1 .t2 {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url(../images/form-t2.png);
  position: relative;
  position: absolute;
  width: 100%
}

.form .content .form-container .ft-1 .t2:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 10.48253%
}

.form .content .form-container .ft-1 .t2>* {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
} */
.form .content .form-container .ft-1 .t3 {
  width: 100%;
}

.form .content .form-container .ft-1 .t3 img {
  width: 100%;
}

.form .content .form-container .sub {
  font-size: 20px;
  color: #fff;
  line-height: 2em;
  margin-top: 20px
}

.form .content .form-container .selects {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 30px
}

.form .content .form-container.fc-1 .form-btn {
  margin: 0 auto;
  margin-top: 25px
}

.form .content .form-container.fc-1 .mapWrap {
  width: 100%;
  height: 237px;
  border: 1px solid #cfa671;
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

@media screen and (max-width:768px) {
  .form .content .form-container.fc-1 .mapWrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: auto
  }
}

.form .content .form-container.fc-1 .mapWrap .map {
  width: 337px;
  height: 100%;
  -ms-flex-negative: 0;
  flex-shrink: 0
}

@media screen and (max-width:768px) {
  .form .content .form-container.fc-1 .mapWrap .map {
    width: 100%;
    height: auto
  }
}

.form .content .form-container.fc-1 .mapWrap .map img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block
}

.form .content .form-container.fc-1 .mapWrap .locationWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

.form .content .form-container.fc-1 .mapWrap .locationWrap .l-txt {
  height: 45px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 19px;
  -ms-flex-negative: 0;
  flex-shrink: 0
}

@media screen and (max-width:768px) {
  .form .content .form-container.fc-1 .mapWrap .locationWrap .l-txt {
    font-size: 24px;
    height: 50px
  }
}

.form .content .form-container.fc-1 .mapWrap .locationWrap .locations {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: scroll;
  overflow-x: hidden
}

@media screen and (max-width:768px) {
  .form .content .form-container.fc-1 .mapWrap .locationWrap .locations {
    max-height: 300px
  }
}

.form .content .form-container.fc-1 .mapWrap .locationWrap .locations .location-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 20px 25px
}

.form .content .form-container.fc-1 .mapWrap .locationWrap .locations .location-item>* {
  pointer-events: none
}

.form .content .form-container.fc-1 .mapWrap .locationWrap .locations .location-item .location-info {
  padding-top: 2px
}

.form .content .form-container.fc-1 .mapWrap .locationWrap .locations .location-item .store-name {
  font-size: 17px;
  font-weight: 700
}

@media screen and (max-width:768px) {
  .form .content .form-container.fc-1 .mapWrap .locationWrap .locations .location-item .store-name {
    font-size: 22px
  }
}

.form .content .form-container.fc-1 .mapWrap .locationWrap .locations .location-item .store-addr {
  font-size: 14px;
  margin-top: 4px
}

@media screen and (max-width:768px) {
  .form .content .form-container.fc-1 .mapWrap .locationWrap .locations .location-item .store-addr {
    font-size: 18px
  }
}

.form .content .form-container.fc-1 .mapWrap .locationWrap .locations .location-item .store-phone {
  font-size: 14px;
  margin-top: 4px
}

@media screen and (max-width:768px) {
  .form .content .form-container.fc-1 .mapWrap .locationWrap .locations .location-item .store-phone {
    font-size: 18px
  }
}

.form .content .form-container.fc-2 .f-title {
  font-size: 36px;
  letter-spacing: .05em;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 10px rgba(255, 255, 255, .5)
}

.form .content .form-container.fc-2 .location-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 15px 10px;
  margin-top: 30px
}

.form .content .form-container.fc-2 .location-item .icon {
  width: 26px;
  height: 39px;
  background-image: url(../images/icon-point.png);
  margin: 25px 45px
}

.form .content .form-container.fc-2 .location-item .location-info {
  padding-top: 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

.form .content .form-container.fc-2 .location-item .store-name {
  font-size: 19px;
  font-weight: 700
}

@media screen and (max-width:768px) {
  .form .content .form-container.fc-2 .location-item .store-name {
    font-size: 22px
  }
}

.form .content .form-container.fc-2 .location-item .store-addr {
  font-size: 16px;
  margin-top: 8px
}

@media screen and (max-width:768px) {
  .form .content .form-container.fc-2 .location-item .store-addr {
    font-size: 18px
  }
}

.form .content .form-container.fc-2 .location-item .store-phone {
  font-size: 14px;
  margin-top: 8px
}

@media screen and (max-width:768px) {
  .form .content .form-container.fc-2 .location-item .store-phone {
    font-size: 18px
  }
}

.form .content .form-container.fc-2 .inputWrap {
  margin-top: 15px
}

.form .content .form-container.fc-2 .checkWrap {
  margin-top: 10px
}

.form .content .form-container.fc-2 label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 0
}

.form .content .form-container.fc-2 label .checkmark {
  top: -4px
}

.form .content .form-container.fc-2 .btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 25px
}

@media screen and (max-width:768px) {
  .form .content .form-container.fc-2 .btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
  }
}

.form .content .form-container.fc-3 .f-title {
  font-size: 36px;
  letter-spacing: .05em;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 10px rgba(255, 255, 255, .5)
}

.form .content .form-container.fc-3 .f-subtitle {
  padding: 35px 50px;
  margin-top: 30px
}

.form .content .form-container.fc-3 .f-subtitle .txt {
  font-size: 19px;
  line-height: 2em
}

.form .content .form-container.fc-3 .f-subtitle strong {
  font-size: 22px;
  color: #009bb9
}

@media screen and (max-width:768px) {
  .form .content .form-container.fc-3 .f-subtitle strong {
    font-size: 28px
  }
}

.form .content .form-container.fc-3 .f-subtitle .form-btn {
  margin: 30px auto 20px
}

.form .content .form-container.fc-3 .f-subtitle .note {
  font-size: 15px;
  line-height: 1.4em;
  color: #2a2a2a
}

.form .content .form-container.fc-3 .f-subtitle.f-s2 {
  border: 1px solid #fff;
  padding: 35px 50px 10px
}

@media screen and (max-width:768px) {
  .form .content .form-container.fc-3 .f-subtitle.f-s2 {
    padding: 35px 20px 10px
  }
}

.form .content .form-container.fc-3 .f-subtitle.f-s2 .f-sub-title {
  font-size: 27px;
  color: #fff
}

.form .content .form-container.fc-3 .f-subtitle.f-s2 .f-sub-title .icon-line {
  width: 53px;
  height: 50px;
  background-image: url(../images/icon-line.png);
  vertical-align: text-top;
  display: inline-block;
  margin-top: -7px;
  margin-right: 7px
}

.form .content .form-container.fc-3 .f-subtitle.f-s2 .txt {
  margin-top: 10px
}

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