/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
/* @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900"); */
/* @import url('https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@400;700&family=Fredericka+the+Great&family=Hammersmith+One&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Hammersmith+One&display=swap');

/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
div pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
figure,
header,
nav,
section,
article,
aside,
footer,
figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header,
nav,
section,
article,
aside,
footer,
hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html,
body {
  font-family: "Hammersmith One", sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #1e1e1e;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 28px;
  color: #4a4a4a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  font-family: "Poppins", sans-serif;
  background-color: #000000;
  scroll-behavior: smooth
}

::selection {
  background: #0071f8;
  color: #fff;
}

::-moz-selection {
  background: #0071f8;
  color: #fff;
}

.section {
  margin-top: 120px;
}

.section-heading {
  margin-bottom: 70px;
}

.section-heading h2 {
  font-size: 36px;
  font-weight: 700;
  text-transform: capitalize;
  margin-top: 20px;
  line-height: 44px;
}

.section-heading h2 em {
  font-style: normal;
  color: #0071f8;
}

.section-heading h6 {
  color: #f89500;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
}

.main-button a {
  display: inline-block;
  background-color: #f89500;
  text-transform: uppercase;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  height: 50px;
  line-height: 50px;
  padding: 0px 30px;
  border-radius: 25px;
  transition: all 0.3s;
}

.main-button a:hover {
  background-color: #0071f8;
  color: #fff;
}

/* 
---------------------------------------------
Pre-loader Style
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.99);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #f89500;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #f89500;
  border-radius: 50%;
}

/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

.background-header {
  background-color: #000000 !important;
  border-radius: 0px 0px 0px 0px;
  height: 80px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15) !important;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.background-header .logo img {
  max-width: 110px;
}

.header-area {
  position: absolute;
  background-color: transparent;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.header-area .main-nav {
  background: transparent;
  display: flex;
}

.header-area .main-nav .logo {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: inline-block;
}

.header-area .main-nav .logo h1 {
  font-size: 36px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  margin-right: 30px;
  padding-right: 30px;
  border-right: 1px solid rgba(250, 250, 250, 0.3);
}

.background-header .main-nav .logo {
  margin-top: 18px;
}

.header-area .main-nav ul.nav {
  border-radius: 0px 0px 25px 25px;
  flex-basis: 100%;
  margin-top: 10px;
  justify-content: right;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li {
  padding-left: 10px;
  padding-right: 10px;
  height: 40px;
  line-height: 40px;
}

.header-area .main-nav .nav li a {
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 20px;
  font-weight: 300;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  text-transform: capitalize;
  color: #fff;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  border: transparent;
  letter-spacing: 0.25px;
}

.header-area .main-nav .nav li:last-child a {
  background-color: #f89500;
  text-transform: uppercase;
  font-weight: 500;
}

.header-area .main-nav .nav li:last-child:hover a {
  background-color: #f89500;
}

.header-area .main-nav .nav li:hover a {
  background-color: rgba(255, 255, 255, 0.3);
}

.header-area .main-nav .nav li a.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.3);
}

.background-header .main-nav .nav li a.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.3);
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 22px;
}

.background-header .main-nav ul.nav {
  margin-top: 20px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.header-area.header-sticky .nav li a.active {
  color: #fff;
}

.visible {
  display: inline !important;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 5px;
    padding-right: 5px;
  }
}

@media (max-width: 767px) {
  .background-header .main-nav {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 25px 25px;
    width: 100%;
  }

  .background-header .main-nav .nav,
  .header-area .main-nav .nav {
    background-color: #fff;
  }

  .background-header .main-nav .nav li a,
  .header-area .main-nav .nav li a {
    line-height: 50px;
    height: 50px;
    font-weight: 400;
    color: #1e1e1e;
    background-color: #fff;
    border-radius: 0px 0px 25px 25px;
  }

  .background-header .main-nav .nav li,
  .header-area .main-nav .nav li {
    border-top: 1px solid #ddd;
    background-color: #f1f0fe;
    height: 50px;
    border-radius: 0px 0px 25px 25px;
  }

  .background-header .main-nav .nav li:last-child,
  .header-area .main-nav .nav li:last-child {
    border-radius: 0px 0px 25px 25px;
  }

  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
  }

  .header-area .main-nav .logo {
    position: absolute;
    left: 30px;
    top: 0px;
  }

  .background-header .main-nav .logo {
    top: 0px;
  }

  .background-header .main-nav .border-button {
    top: 0px !important;
  }

  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }

  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #f89500 !important;
    opacity: 1;
  }

  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }

  .header-area .nav li:last-child a {
    background-color: transparent !important;
    font-weight: 300 !important;
    text-transform: capitalize !important;
  }

  .header-area {
    background-color: transparent;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }

  .header-area .container {
    padding: 0px;
  }

  .header-area .logo {
    margin-left: 0px;
    margin-top: 30px;
  }

  .header-area .menu-trigger {
    display: block !important;
  }

  .header-area .main-nav {
    overflow: hidden;
  }

  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }

  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }

  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }

  .background-header.header-sticky .nav {
    margin-top: 80px !important;
  }

  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}


/*
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer {
  margin-top: 10%;
  background-color: #f89500;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  /* padding: auto; */
}

footer p {
  text-align: center;
  color: #fff;
  transition: all 0.3s;
  position: relative;
  z-index: 3;
}

footer p a {
  /* text-align: center; */
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

footer p a:hover {
  color: #000000;
  font-size: large;
  line-height: 20px;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

/* 
---------------------------------------------
Page Header Style
--------------------------------------------- 
*/

.page-heading {
  background-image: url(../images/page-heading-bg.jpg);
  border-radius: 0px 0px 150px 150px;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 200px 0px 100px 0px;
  text-align: center;
}

.page-heading span {
  display: inline-block;
  font-size: 16px;
  color: #fff;
}

.page-heading span a {
  color: #fff;
}

.page-heading h3 {
  font-size: 48px;
  text-transform: uppercase;
  color: #fff;
  margin-top: 20px;
  position: relative;
  margin-bottom: 20px;
}

/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .header-area {
    top: 0;
  }

  .main-banner .right-image span.offer {
    left: 20px;
    bottom: 20px;
  }

  .cta .subscribe form button {
    position: relative;
    width: 100%;
    margin-top: 15px;
  }

  .main-banner {
    padding: 0;
    margin: 0;
  }

  .menu-p {
    padding-bottom: 40%;
    margin-top: -80px;
  }

  .b-hero-mokaclub {
    background: none;
  }

  footer p {
    padding: 0;
    line-height: 15px;
    display: flex;
    justify-content: center;
    /* Centra horizontalmente */
    align-items: center;
    /* Centra verticalmente */
    height: 80px;
    /* Es necesario definir una altura para el centrado vertical */
  }

  footer p a {
    padding: 0;
    line-height: 18px;
    display: flex;
    justify-content: center;
    /* Centra horizontalmente */
    align-items: center;
    /* Centra verticalmente */
    height: 80px;
    /* Es necesario definir una altura para el centrado vertical */
    font-size: small;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav .logo img {
    max-width: 110px;
  }

  .header-area .main-nav .nav li a {
    padding-left: 10px;
    padding-right: 10px;
  }

  .header-area .main-nav ul.nav {
    margin-top: 0px;
  }

  .background-header .main-nav ul.nav {
    margin-top: 20px;
  }

  .main-banner .caption {
    margin-bottom: 45px;
    text-align: center;
  }

  .main-banner .caption form,
  .main-banner .caption form input {
    max-width: 100%;
  }

}

@media (max-width: 1200px) {}


/* blur FX */
.blur {
  animation: BlurFX linear both;
  animation-timeline: view();
  animation-range: entry;
}

@keyframes BlurFX {
  0% {
    opacity: 0;
    transform: translateY(90px) scale(0.75);
    /* letter-spacing: 10px; */
    filter: blur(5px);
  }

  65% {
    transform: translateY(-8px) scale(1.03);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
    filter: blur(0);
  }
}


/* ----------------------------------------------
FX ANIMACIONES
  Generated by AnimatiSS
  Licensed under FreeBSD License
  URL: https://xsgames.co/animatiss
  Twitter: @xsgames_
---------------------------------------------- */
/* ----------------------------------------------
  Generated by AnimatiSS
  Licensed under FreeBSD License
  URL: https://xsgames.co/animatiss
  Twitter: @xsgames_
---------------------------------------------- */

.tracking-in-expand-forward-bottom {
  animation: tracking-in-expand-forward-bottom 0.4s linear both
}

@keyframes tracking-in-expand-forward-bottom {
  0% {
    letter-spacing: -.2em;
    transform: translateZ(-700px) translateY(100px);
    opacity: 0
  }

  40% {
    opacity: .6
  }

  100% {
    transform: translateZ(0) translateY(0);
    opacity: 1
  }
}

.tracking-in-expand-forward-top {
  animation: tracking-in-expand-forward-top 0.4s linear both
}

@keyframes tracking-in-expand-forward-top {
  0% {
    letter-spacing: -.2em;
    transform: translateZ(-700px) translateY(-100px);
    opacity: 0
  }

  40% {
    opacity: .6
  }

  100% {
    transform: translateZ(0) translateY(0);
    opacity: 1
  }
}

.scale-down-top {
  animation: scale-down-top 0.4s;
}

@keyframes scale-down-top {
  0% {
    transform: scale(1);
    transform-origin: center top
  }

  100% {
    transform: scale(.5);
    transform-origin: center top
  }
}

.bounce-top {
  animation: bounce-top 0.9s linear both;
}

@keyframes bounce-top {
  0% {
    transform: translateY(-45px);
    animation-timing-function: ease-in;
    opacity: 1;
  }

  24% {
    opacity: 1;
  }

  40% {
    transform: translateY(-24px);
    animation-timing-function: ease-in;
  }

  65% {
    transform: translateY(-12px);
    animation-timing-function: ease-in;
  }

  82% {
    transform: translateY(-6px);
    animation-timing-function: ease-in;
  }

  93% {
    transform: translateY(-4px);
    animation-timing-function: ease-in;
  }

  25%,
  55%,
  75%,
  87% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }

  100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

.bounce-bottom {
  animation: bounce-bottom 0.9s linear both;
}

@keyframes bounce-bottom {
  0% {
    transform: translateY(45px);
    animation-timing-function: ease-in;
    opacity: 1;
  }

  24% {
    opacity: 1;
  }

  40% {
    transform: translateY(24px);
    animation-timing-function: ease-in;
  }

  65% {
    transform: translateY(12px);
    animation-timing-function: ease-in;
  }

  82% {
    transform: translateY(6px);
    animation-timing-function: ease-in;
  }

  93% {
    transform: translateY(4px);
    animation-timing-function: ease-in;
  }

  25%,
  55%,
  75%,
  87% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }

  100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

.jello-horizontal {
  animation: jello-horizontal 0.9s linear both;
}

@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }

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

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

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

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

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

  100% {
    transform: scale3d(1, 1, 1);
  }
}

.vibrate {
  animation: vibrate 1.5s linear both;
}

@keyframes vibrate {
  0% {
    transform: translate(0);
  }

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

  40% {
    transform: translate(-2px, -2px);
  }

  60% {
    transform: translate(2px, 2px);
  }

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

  100% {
    transform: translate(0);
  }
}

.jello-vertical {
  animation: jello-vertical 0.9s linear both;
}

@keyframes jello-vertical {
  0% {
    transform: scale3d(1, 1, 1);
  }

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

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

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

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

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

  100% {
    transform: scale3d(1, 1, 1);
  }
}

.tracking-in-contract {
  animation: tracking-in-contract 0.4s linear both;
}

@keyframes tracking-in-contract {
  0% {
    letter-spacing: 0.6em;
    opacity: 0;
  }

  40% {
    opacity: 0.6;
  }

  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}

.bounce-left {
  animation: bounce-left 0.9s linear both;
}

@keyframes bounce-left {
  0% {
    transform: translateX(-48px);
    animation-timing-function: ease-in;
    opacity: 1;
  }

  24% {
    opacity: 1;
  }

  40% {
    transform: translateX(-26px);
    animation-timing-function: ease-in;
  }

  65% {
    transform: translateX(-13px);
    animation-timing-function: ease-in;
  }

  82% {
    transform: translateX(-6.5px);
    animation-timing-function: ease-in;
  }

  93% {
    transform: translateX(-4px);
    animation-timing-function: ease-in;
  }

  25%,
  55%,
  75%,
  87%,
  98% {
    transform: translateX(0);
    animation-timing-function: ease-out;
  }

  100% {
    transform: translateX(0);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

.bounce-right {
  animation: bounce-right 0.9s linear both;
}

@keyframes bounce-right {
  0% {
    transform: translateX(48px);
    animation-timing-function: ease-in;
    opacity: 1;
  }

  24% {
    opacity: 1;
  }

  40% {
    transform: translateX(26px);
    animation-timing-function: ease-in;
  }

  65% {
    transform: translateX(13px);
    animation-timing-function: ease-in;
  }

  82% {
    transform: translateX(6.5px);
    animation-timing-function: ease-in;
  }

  93% {
    transform: translateX(4px);
    animation-timing-function: ease-in;
  }

  25%,
  55%,
  75%,
  87%,
  98% {
    transform: translateX(0);
    animation-timing-function: ease-out;
  }

  100% {
    transform: translateX(0);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

.tracking-in-expand-forward-bottom {
  animation: tracking-in-expand-forward-bottom 3.2s linear both;
}

@keyframes tracking-in-expand-forward-bottom {
  0% {
    letter-spacing: -0.2em;
    transform: translateZ(-700px) translateY(100px);
    opacity: 0;
  }

  40% {
    opacity: 0.6;
  }

  100% {
    transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}

.slide-top {
  animation: slide-top 0.4s linear both;
}

@keyframes slide-top {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100px);
  }
}

.shadow-pop-bottom-right {
  animation: shadow-pop-bottom-right 0.4s linear both;
}

@keyframes shadow-pop-bottom-right {
  0% {
    box-shadow:
      0 0 #3e3e3e,
      0 0 #3e3e3e,
      0 0 #3e3e3e,
      0 0 #3e3e3e,
      0 0 #3e3e3e,
      0 0 #3e3e3e,
      0 0 #3e3e3e,
      0 0 #3e3e3e;
    transform: translateX(0) translateY(0);
  }

  100% {
    box-shadow:
      1px 1px #3e3e3e,
      2px 2px #3e3e3e,
      3px 3px #3e3e3e,
      4px 4px #3e3e3e,
      5px 5px #3e3e3e,
      6px 6px #3e3e3e,
      7px 7px #3e3e3e,
      8px 8px #3e3e3e;
    transform: translateX(-8px) translateY(-8px);
  }
}

.wobble-horizontal-top {
  animation: wobble-horizontal-top 0.8s linear both;
}

@keyframes wobble-horizontal-top {

  0%,
  100% {
    transform: translateX(0);
    transform-origin: 50% 50%;
  }

  15% {
    transform: translateX(-30px) rotate(6deg);
  }

  30% {
    transform: translateX(15px) rotate(-6deg);
  }

  45% {
    transform: translateX(-15px) rotate(3.6deg);
  }

  60% {
    transform: translateX(9px) rotate(-2.4deg);
  }

  75% {
    transform: translateX(-6px) rotate(1.2deg);
  }
}

.slide-bottom {
  animation: slide-bottom 0.4s linear both;
}

@keyframes slide-bottom {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100px);
  }
}

.shake-vertical {
  animation: shake-vertical 0.8s linear both;
}

@keyframes shake-vertical {

  0%,
  100% {
    transform: translateY(0);
  }

  10%,
  30%,
  50%,
  70% {
    transform: translateY(-8px);
  }

  20%,
  40%,
  60% {
    transform: translateY(8px);
  }

  80% {
    transform: translateY(6.4px);
  }

  90% {
    transform: translateY(-6.4px);
  }
}

.shadow-inset-bottom {
  animation: shadow-inset-bottom 0.4s linear both;
}

@keyframes shadow-inset-bottom {
  0% {
    box-shadow: inset 0 0 0 0 transparent;
  }

  100% {
    box-shadow: inset 0 -6px 14px -6px rgba(0, 0, 0, 1);
  }
}

.shadow-drop-left-right {
  animation: shadow-drop-left-right 0.4s linear both;
}

@keyframes shadow-drop-left-right {
  0% {
    box-shadow:
      0 0 0 0 transparent,
      0 0 0 0 transparent;
  }

  100% {
    box-shadow:
      -12px 0 20px -12px rgba(255, 255, 255, 0.55),
      12px 0 20px -12px rgba(255, 255, 255, 0.55);
  }
}

.shadow-drop-center {
  animation: shadow-drop-center 0.4s linear both;
}

@keyframes shadow-drop-center {
  0% {
    box-shadow: 0 0 0 0 transparent;
  }

  100% {
    box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.55);
  }
}

.tracking-in-expand-forward-bottom {
  animation: tracking-in-expand-forward-bottom 0.4s linear both;
}

@keyframes tracking-in-expand-forward-bottom {
  0% {
    letter-spacing: -0.2em;
    transform: translateZ(-700px) translateY(100px);
    opacity: 0;
  }

  40% {
    opacity: 0.6;
  }

  100% {
    transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}

.blur-out-expand {
  animation: blur-out-expand 0.4s linear both;
}

@keyframes blur-out-expand {
  0% {
    transform: scale(1);
    filter: blur(0.01px);
  }

  100% {
    transform: scale(2);
    filter: blur(12px);
    opacity: 0;
  }
}

.blur-out {
  animation: blur-out 0.4s linear both;
}

@keyframes blur-out {
  0% {
    filter: blur(0.01px);
  }

  100% {
    filter: blur(12px);
    opacity: 0;
  }
}

.blur-in-expand {
  animation: blur-in-expand 0.4s linear both;
}

@keyframes blur-in-expand {
  0% {
    transform: scale(0);
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
  }
}

/* ---------------------------------------------
fin
------------------------------------------------*/