@charset "UTF-8";

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document

   ========================================================================== */

/**

 * 1. Correct the line height in all browsers.

 * 2. Prevent adjustments of font size after orientation changes in iOS.

 */

html {

  line-height: 1.15; /* 1 */

  -webkit-text-size-adjust: 100%; /* 2 */

}



/* Sections

   ========================================================================== */

/**

 * Remove the margin in all browsers.

 */

body {

  margin: 0;

}



/**

 * Render the `main` element consistently in IE.

 */

main {

  display: block;

}



/**

 * Correct the font size and margin on `h1` elements within `section` and

 * `article` contexts in Chrome, Firefox, and Safari.

 */

h1 {

  font-size: 2em;

  margin: 0.67em 0;

}



/* Grouping content

   ========================================================================== */

/**

 * 1. Add the correct box sizing in Firefox.

 * 2. Show the overflow in Edge and IE.

 */

hr {

  box-sizing: content-box; /* 1 */

  height: 0; /* 1 */

  overflow: visible; /* 2 */

}



/**

 * 1. Correct the inheritance and scaling of font size in all browsers.

 * 2. Correct the odd `em` font sizing in all browsers.

 */

pre {

  font-family: monospace, monospace; /* 1 */

  font-size: 1em; /* 2 */

}



/* Text-level semantics

   ========================================================================== */

/**

 * Remove the gray background on active links in IE 10.

 */

a {

  background-color: transparent;

}



/**

 * 1. Remove the bottom border in Chrome 57-

 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.

 */

abbr[title] {

  border-bottom: none; /* 1 */

  text-decoration: underline; /* 2 */

  -webkit-text-decoration: underline dotted;

          text-decoration: underline dotted; /* 2 */

}



/**

 * Add the correct font weight in Chrome, Edge, and Safari.

 */

b,

strong {

  font-weight: bolder;

}



/**

 * 1. Correct the inheritance and scaling of font size in all browsers.

 * 2. Correct the odd `em` font sizing in all browsers.

 */

code,

kbd,

samp {

  font-family: monospace, monospace; /* 1 */

  font-size: 1em; /* 2 */

}



/**

 * Add the correct font size in all browsers.

 */

small {

  font-size: 80%;

}



/**

 * Prevent `sub` and `sup` elements from affecting the line height in

 * all browsers.

 */

sub,

sup {

  font-size: 75%;

  line-height: 0;

  position: relative;

  vertical-align: baseline;

}



sub {

  bottom: -0.25em;

}



sup {

  top: -0.5em;

}



/* Embedded content

   ========================================================================== */

/**

 * Remove the border on images inside links in IE 10.

 */

img {

  border-style: none;

}



/* Forms

   ========================================================================== */

/**

 * 1. Change the font styles in all browsers.

 * 2. Remove the margin in Firefox and Safari.

 */

button,

input,

optgroup,

select,

textarea {

  font-family: inherit; /* 1 */

  font-size: 100%; /* 1 */

  line-height: 1.15; /* 1 */

  margin: 0; /* 2 */

}



/**

 * Show the overflow in IE.

 * 1. Show the overflow in Edge.

 */

button,

input { /* 1 */

  overflow: visible;

}



/**

 * Remove the inheritance of text transform in Edge, Firefox, and IE.

 * 1. Remove the inheritance of text transform in Firefox.

 */

button,

select { /* 1 */

  text-transform: none;

}



/**

 * Correct the inability to style clickable types in iOS and Safari.

 */

button,

[type=button],

[type=reset],

[type=submit] {

  -webkit-appearance: button;

}



/**

 * Remove the inner border and padding in Firefox.

 */

button::-moz-focus-inner,

[type=button]::-moz-focus-inner,

[type=reset]::-moz-focus-inner,

[type=submit]::-moz-focus-inner {

  border-style: none;

  padding: 0;

}



/**

 * Restore the focus styles unset by the previous rule.

 */

button:-moz-focusring,

[type=button]:-moz-focusring,

[type=reset]:-moz-focusring,

[type=submit]:-moz-focusring {

  outline: 1px dotted ButtonText;

}



/**

 * Correct the padding in Firefox.

 */

fieldset {

  padding: 0.35em 0.75em 0.625em;

}



/**

 * 1. Correct the text wrapping in Edge and IE.

 * 2. Correct the color inheritance from `fieldset` elements in IE.

 * 3. Remove the padding so developers are not caught out when they zero out

 *    `fieldset` elements in all browsers.

 */

legend {

  box-sizing: border-box; /* 1 */

  color: inherit; /* 2 */

  display: table; /* 1 */

  max-width: 100%; /* 1 */

  padding: 0; /* 3 */

  white-space: normal; /* 1 */

}



/**

 * Add the correct vertical alignment in Chrome, Firefox, and Opera.

 */

progress {

  vertical-align: baseline;

}



/**

 * Remove the default vertical scrollbar in IE 10+.

 */

textarea {

  overflow: auto;

}



/**

 * 1. Add the correct box sizing in IE 10.

 * 2. Remove the padding in IE 10.

 */

[type=checkbox],

[type=radio] {

  box-sizing: border-box; /* 1 */

  padding: 0; /* 2 */

}



/**

 * Correct the cursor style of increment and decrement buttons in Chrome.

 */

[type=number]::-webkit-inner-spin-button,

[type=number]::-webkit-outer-spin-button {

  height: auto;

}



/**

 * 1. Correct the odd appearance in Chrome and Safari.

 * 2. Correct the outline style in Safari.

 */

[type=search] {

  -webkit-appearance: textfield; /* 1 */

  outline-offset: -2px; /* 2 */

}



/**

 * Remove the inner padding in Chrome and Safari on macOS.

 */

[type=search]::-webkit-search-decoration {

  -webkit-appearance: none;

}



/**

 * 1. Correct the inability to style clickable types in iOS and Safari.

 * 2. Change font properties to `inherit` in Safari.

 */

::-webkit-file-upload-button {

  -webkit-appearance: button; /* 1 */

  font: inherit; /* 2 */

}



/* Interactive

   ========================================================================== */

/*

 * Add the correct display in Edge, IE 10+, and Firefox.

 */

details {

  display: block;

}



/*

 * Add the correct display in all browsers.

 */

summary {

  display: list-item;

}



/* Misc

   ========================================================================== */

/**

 * Add the correct display in IE 10+.

 */

template {

  display: none;

}



/**

 * Add the correct display in IE 10.

 */

[hidden] {

  display: none;

}



.swing-in-top-fwd {

  -webkit-animation: swing-in-top-fwd 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s both;

          animation: swing-in-top-fwd 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s both;

}

@-webkit-keyframes swing-in-top-fwd {

  0% {

    -webkit-transform: rotateX(-100deg);

            transform: rotateX(-100deg);

    -webkit-transform-origin: top;

            transform-origin: top;

    opacity: 0;

  }

  100% {

    -webkit-transform: rotateX(0deg);

            transform: rotateX(0deg);

    -webkit-transform-origin: top;

            transform-origin: top;

    opacity: 1;

  }

}

@keyframes swing-in-top-fwd {

  0% {

    -webkit-transform: rotateX(-100deg);

            transform: rotateX(-100deg);

    -webkit-transform-origin: top;

            transform-origin: top;

    opacity: 0;

  }

  100% {

    -webkit-transform: rotateX(0deg);

            transform: rotateX(0deg);

    -webkit-transform-origin: top;

            transform-origin: top;

    opacity: 1;

  }

}



.bounce-in-top {

  -webkit-animation: bounce-in-top 1.1s both;

          animation: bounce-in-top 1.1s both;

}

@-webkit-keyframes bounce-in-top {

  0% {

    -webkit-transform: translateY(-500px);

            transform: translateY(-500px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

    opacity: 0;

  }

  38% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

    opacity: 1;

  }

  55% {

    -webkit-transform: translateY(-65px);

            transform: translateY(-65px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  72% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

  81% {

    -webkit-transform: translateY(-28px);

            transform: translateY(-28px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  90% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

  95% {

    -webkit-transform: translateY(-8px);

            transform: translateY(-8px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  100% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

}

@keyframes bounce-in-top {

  0% {

    -webkit-transform: translateY(-500px);

            transform: translateY(-500px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

    opacity: 0;

  }

  38% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

    opacity: 1;

  }

  55% {

    -webkit-transform: translateY(-65px);

            transform: translateY(-65px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  72% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

  81% {

    -webkit-transform: translateY(-28px);

            transform: translateY(-28px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  90% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

  95% {

    -webkit-transform: translateY(-8px);

            transform: translateY(-8px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  100% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

}



.slide-in-blurred-right {

  -webkit-animation: slide-in-blurred-right 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;

          animation: slide-in-blurred-right 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;

}

@-webkit-keyframes slide-in-blurred-right {

  0% {

    -webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);

    transform: translateX(1000px) scaleX(2.5) scaleY(0.2);

    -webkit-transform-origin: 0% 50%;

    transform-origin: 0% 50%;

    -webkit-filter: blur(40px);

    filter: blur(40px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateX(0) scaleY(1) scaleX(1);

    transform: translateX(0) scaleY(1) scaleX(1);

    -webkit-transform-origin: 50% 50%;

    transform-origin: 50% 50%;

    -webkit-filter: blur(0);

    filter: blur(0);

    opacity: 1;

  }

}

@keyframes slide-in-blurred-right {

  0% {

    -webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);

    transform: translateX(1000px) scaleX(2.5) scaleY(0.2);

    -webkit-transform-origin: 0% 50%;

    transform-origin: 0% 50%;

    -webkit-filter: blur(40px);

    filter: blur(40px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateX(0) scaleY(1) scaleX(1);

    transform: translateX(0) scaleY(1) scaleX(1);

    -webkit-transform-origin: 50% 50%;

    transform-origin: 50% 50%;

    -webkit-filter: blur(0);

    filter: blur(0);

    opacity: 1;

  }

}



.swing-left-fwd {

  -webkit-animation: swing-left-fwd 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;

          animation: swing-left-fwd 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;

}

@-webkit-keyframes swing-left-fwd {

  0% {

    -webkit-transform: rotateY(0);

            transform: rotateY(0);

    -webkit-transform-origin: left bottom;

            transform-origin: left bottom;

  }

  100% {

    -webkit-transform: rotateY(-180deg);

            transform: rotateY(-180deg);

    -webkit-transform-origin: left bottom;

            transform-origin: left bottom;

  }

}

@keyframes swing-left-fwd {

  0% {

    -webkit-transform: rotateY(0);

            transform: rotateY(0);

    -webkit-transform-origin: left bottom;

            transform-origin: left bottom;

  }

  100% {

    -webkit-transform: rotateY(-180deg);

            transform: rotateY(-180deg);

    -webkit-transform-origin: left bottom;

            transform-origin: left bottom;

  }

}



.slide-in-blurred-left {

  -webkit-animation: slide-in-blurred-left 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;

          animation: slide-in-blurred-left 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;

}

@-webkit-keyframes slide-in-blurred-left {

  0% {

    -webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);

            transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);

    -webkit-transform-origin: 100% 50%;

            transform-origin: 100% 50%;

    -webkit-filter: blur(40px);

            filter: blur(40px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateX(0) scaleY(1) scaleX(1);

            transform: translateX(0) scaleY(1) scaleX(1);

    -webkit-transform-origin: 50% 50%;

            transform-origin: 50% 50%;

    -webkit-filter: blur(0);

            filter: blur(0);

    opacity: 1;

  }

}

@keyframes slide-in-blurred-left {

  0% {

    -webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);

            transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);

    -webkit-transform-origin: 100% 50%;

            transform-origin: 100% 50%;

    -webkit-filter: blur(40px);

            filter: blur(40px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateX(0) scaleY(1) scaleX(1);

            transform: translateX(0) scaleY(1) scaleX(1);

    -webkit-transform-origin: 50% 50%;

            transform-origin: 50% 50%;

    -webkit-filter: blur(0);

            filter: blur(0);

    opacity: 1;

  }

}



.swing-in-left-fwd {

  -webkit-animation: swing-in-left-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;

          animation: swing-in-left-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;

}

@-webkit-keyframes swing-in-left-fwd {

  0% {

    -webkit-transform: rotateY(100deg);

    transform: rotateY(100deg);

    -webkit-transform-origin: left;

    transform-origin: left;

    opacity: 0;

  }

  100% {

    -webkit-transform: rotateY(0);

    transform: rotateY(0);

    -webkit-transform-origin: left;

    transform-origin: left;

    opacity: 1;

  }

}

@keyframes swing-in-left-fwd {

  0% {

    -webkit-transform: rotateY(100deg);

    transform: rotateY(100deg);

    -webkit-transform-origin: left;

    transform-origin: left;

    opacity: 0;

  }

  100% {

    -webkit-transform: rotateY(0);

    transform: rotateY(0);

    -webkit-transform-origin: left;

    transform-origin: left;

    opacity: 1;

  }

}



.swing-right-fwd {

  -webkit-animation: swing-right-fwd 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

          animation: swing-right-fwd 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

}

@-webkit-keyframes swing-right-fwd {

  0% {

    -webkit-transform: rotateY(0);

            transform: rotateY(0);

    -webkit-transform-origin: right;

            transform-origin: right;

  }

  100% {

    -webkit-transform: rotateY(180deg);

            transform: rotateY(180deg);

    -webkit-transform-origin: right;

            transform-origin: right;

  }

}

@keyframes swing-right-fwd {

  0% {

    -webkit-transform: rotateY(0);

            transform: rotateY(0);

    -webkit-transform-origin: right;

            transform-origin: right;

  }

  100% {

    -webkit-transform: rotateY(180deg);

            transform: rotateY(180deg);

    -webkit-transform-origin: right;

            transform-origin: right;

  }

}



.bounce-in-left {

  -webkit-animation: bounce-in-left 2s both;

          animation: bounce-in-left 2s both;

}

@-webkit-keyframes bounce-in-left {

  0% {

    -webkit-transform: translateX(-600px);

            transform: translateX(-600px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

    opacity: 0;

  }

  38% {

    -webkit-transform: translateX(0);

            transform: translateX(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

    opacity: 1;

  }

  55% {

    -webkit-transform: translateX(-68px);

            transform: translateX(-68px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  72% {

    -webkit-transform: translateX(0);

            transform: translateX(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

  81% {

    -webkit-transform: translateX(-28px);

            transform: translateX(-28px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  90% {

    -webkit-transform: translateX(0);

            transform: translateX(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

  95% {

    -webkit-transform: translateX(-8px);

            transform: translateX(-8px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  100% {

    -webkit-transform: translateX(0);

            transform: translateX(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

}

@keyframes bounce-in-left {

  0% {

    -webkit-transform: translateX(-600px);

            transform: translateX(-600px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

    opacity: 0;

  }

  38% {

    -webkit-transform: translateX(0);

            transform: translateX(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

    opacity: 1;

  }

  55% {

    -webkit-transform: translateX(-68px);

            transform: translateX(-68px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  72% {

    -webkit-transform: translateX(0);

            transform: translateX(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

  81% {

    -webkit-transform: translateX(-28px);

            transform: translateX(-28px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  90% {

    -webkit-transform: translateX(0);

            transform: translateX(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

  95% {

    -webkit-transform: translateX(-8px);

            transform: translateX(-8px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  100% {

    -webkit-transform: translateX(0);

            transform: translateX(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

}



.flip-in-hor-bottom {

  -webkit-animation: flip-in-hor-bottom 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

          animation: flip-in-hor-bottom 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

}

@-webkit-keyframes flip-in-hor-bottom {

  0% {

    -webkit-transform: rotateX(80deg);

            transform: rotateX(80deg);

    opacity: 0;

  }

  100% {

    -webkit-transform: rotateX(0);

            transform: rotateX(0);

    opacity: 1;

  }

}

@keyframes flip-in-hor-bottom {

  0% {

    -webkit-transform: rotateX(80deg);

            transform: rotateX(80deg);

    opacity: 0;

  }

  100% {

    -webkit-transform: rotateX(0);

            transform: rotateX(0);

    opacity: 1;

  }

}



.slit-in-vertical {

  -webkit-animation: slit-in-vertical 0.6s ease-out both;

          animation: slit-in-vertical 0.6s ease-out both;

}

@-webkit-keyframes slit-in-vertical {

  0% {

    -webkit-transform: translateZ(-800px) rotateY(90deg);

            transform: translateZ(-800px) rotateY(90deg);

    opacity: 0;

  }

  54% {

    -webkit-transform: translateZ(-160px) rotateY(87deg);

            transform: translateZ(-160px) rotateY(87deg);

    opacity: 1;

  }

  100% {

    -webkit-transform: translateZ(0) rotateY(0);

            transform: translateZ(0) rotateY(0);

  }

}

@keyframes slit-in-vertical {

  0% {

    -webkit-transform: translateZ(-800px) rotateY(90deg);

            transform: translateZ(-800px) rotateY(90deg);

    opacity: 0;

  }

  54% {

    -webkit-transform: translateZ(-160px) rotateY(87deg);

            transform: translateZ(-160px) rotateY(87deg);

    opacity: 1;

  }

  100% {

    -webkit-transform: translateZ(0) rotateY(0);

            transform: translateZ(0) rotateY(0);

  }

}



.fade-in-fwd {

  -webkit-animation: fade-in-fwd 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;

          animation: fade-in-fwd 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;

}

@-webkit-keyframes fade-in-fwd {

  0% {

    -webkit-transform: translateZ(-80px);

            transform: translateZ(-80px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateZ(0);

            transform: translateZ(0);

    opacity: 1;

  }

}

@keyframes fade-in-fwd {

  0% {

    -webkit-transform: translateZ(-80px);

            transform: translateZ(-80px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateZ(0);

            transform: translateZ(0);

    opacity: 1;

  }

}



.rotate-in-ver {

  -webkit-animation: rotate-in-ver 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

          animation: rotate-in-ver 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

}

@-webkit-keyframes rotate-in-ver {

  0% {

    -webkit-transform: rotateY(-360deg);

            transform: rotateY(-360deg);

    opacity: 0;

  }

  100% {

    -webkit-transform: rotateY(0deg);

            transform: rotateY(0deg);

    opacity: 1;

  }

}

@keyframes rotate-in-ver {

  0% {

    -webkit-transform: rotateY(-360deg);

            transform: rotateY(-360deg);

    opacity: 0;

  }

  100% {

    -webkit-transform: rotateY(0deg);

            transform: rotateY(0deg);

    opacity: 1;

  }

}



.slide-in-bottom {

  -webkit-animation: slide-in-bottom 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

          animation: slide-in-bottom 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

}

@-webkit-keyframes slide-in-bottom {

  0% {

    -webkit-transform: translateY(300px);

            transform: translateY(300px);

    opacity: 0;

  }

  80% {

    opacity: 0.5;

  }

  100% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    opacity: 1;

  }

}

@keyframes slide-in-bottom {

  0% {

    -webkit-transform: translateY(300px);

            transform: translateY(300px);

    opacity: 0;

  }

  80% {

    opacity: 0.5;

  }

  100% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    opacity: 1;

  }

}



.bounce-in-bottom {

  -webkit-animation: bounce-in-bottom 1.3s both;

          animation: bounce-in-bottom 1.3s both;

}

@-webkit-keyframes bounce-in-bottom {

  0% {

    -webkit-transform: translateY(200px);

            transform: translateY(200px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

    opacity: 0;

  }

  38% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

    opacity: 1;

  }

  55% {

    -webkit-transform: translateY(65px);

            transform: translateY(65px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  72% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

  81% {

    -webkit-transform: translateY(28px);

            transform: translateY(28px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  90% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

  95% {

    -webkit-transform: translateY(8px);

            transform: translateY(8px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  100% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

}

@keyframes bounce-in-bottom {

  0% {

    -webkit-transform: translateY(200px);

            transform: translateY(200px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

    opacity: 0;

  }

  38% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

    opacity: 1;

  }

  55% {

    -webkit-transform: translateY(65px);

            transform: translateY(65px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  72% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

  81% {

    -webkit-transform: translateY(28px);

            transform: translateY(28px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  90% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

  95% {

    -webkit-transform: translateY(8px);

            transform: translateY(8px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  100% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

}



/** Media Queries **/

.techyButton {

  display: inline-block;

  padding: 0 30px;

  height: 3rem;

  line-height: 3rem;

  margin-left: 20px;

  margin-top: 3rem;

  border: 1px solid #920097;

  border: 1px solid;

  border-style: solid none;

  -webkit-transform: skewX(-30deg);

          transform: skewX(-30deg);

  color: var(--bg2);

  text-decoration: none;

  text-transform: uppercase;

  outline: none;

  transition-duration: 0.1s;

  transition-property: color, text-shadow;

}

.techyButton.stay {

  color: #920097;

}



.techyButton > span {

  display: inline-block;

  -webkit-transform: skewX(30deg);

          transform: skewX(30deg);

}



.techyButton:after, .techyButton:before {

  content: " ";

  display: inline-block;

  position: absolute;

  width: 19px;

  height: 54%;

  border: 1px solid var(--bg2);

  border-style: none solid solid none;

  border-bottom-width: 1.5px;

  top: 6px;

  right: -10px;

  transition-property: border-color;

}



.techyButton.stay:after, .techyButton.stay:before {

  content: " ";

  display: inline-block;

  position: absolute;

  width: 19px;

  height: 54%;

  border: 1px solid #920097;

  border-style: none solid solid none;

  border-bottom-width: 1.5px;

  top: 6px;

  right: -10px;

  transition-property: border-color;

}



.techyButton:after {

  -webkit-transform: skewX(30deg) skewY(-37deg);

          transform: skewX(30deg) skewY(-37deg);

  right: -10px;

}



.techyButton:before {

  -webkit-transform: skewX(30deg) skewY(-37deg) rotate(180deg);

          transform: skewX(30deg) skewY(-37deg) rotate(180deg);

  left: -10px;

}



.techyButton, .techyButton:before, .techyButton:after {

  transition-duration: 0.1s;

}



.techyButton:hover, .techyButton:hover:before, .techyButton:hover:after {

  border-color: white;

  color: white;

  text-shadow: 0 0 10px white;

  transition: all 0.2s ease;

}



@media screen and (max-width: 770px) {

  .button-1 {

    display: flex;

    align-items: center;

    justify-content: center;

  }

  .techyButton {

    margin: 0 auto;

    margin-top: 3rem;

  }

}

html {

  font-size: 62.5%;

  box-sizing: border-box;

  background: linear-gradient(60deg, rgb(84, 58, 183) 0%, rgb(0, 172, 193) 100%);

  overflow-x: hidden;

}



*, *:before, *:after {

  box-sizing: inherit;

}



body {

  font-family: "Inter", sans-serif;

  font-size: 1.6rem;

  background: linear-gradient(60deg, rgb(84, 58, 183) 0%, rgb(0, 172, 193) 100%);

  overflow-x: hidden;

}
body.luz .techyButton {

  color: #920097;

}

body.luz .techyButton:after {

  content: " ";

  border: 1px solid #920097;

  border-style: none solid solid none;

  border-bottom-width: 1.5px;

  top: 6px;

  right: -10px;

  transition-property: border-color;

}
body.luz .techyButton:before {

  content: " ";

  border: 1px solid #920097;

  border-style: none solid solid none;

  border-bottom-width: 1.5px;

  top: 6px;

  right: -10px;


}

body.luz .techyButton:hover{
  border-color: white;
  color: white;
  text-shadow: 0 0 10px white;
  transition: all 0.5s ease;
}

body.luz .techyButton:hover:after {
  border-color: white;
  color: white;
  text-shadow: 0 0 10px white;
  transition: all 0.5s ease;
}
body.luz .techyButton:hover:before {
  border-color: white;
  color: white;
  text-shadow: 0 0 10px white;
  transition: all 0.5s ease;
}

body.luz .project-details h3 a {
  color: #400064;
}


body.luz .project-button.active{
  color: #fff;
  transition: all 0.3s ease;

}

body.luz .project-info.active p.change{
  color: #400064;
}






body::-webkit-scrollbar {

  width: 5px;

  background-color: #400043;

}

body::-webkit-scrollbar-thumb {

  width: 5px;

  background: linear-gradient(100deg, #00f2ff 0%, #fc00d6 100%);

  border-radius: 1rem;

}



p {

  line-height: 1.3;

  font-size: 2rem;

  color: #400064;

  font-weight: 600;

}

p.lighten{
  
  line-height: 1.3;

  font-size: 2rem;

  color: white;

  text-shadow:  #400064 2px 2px 5px;

  font-weight: 600;

}



img {

  max-width: 100%;

  display: block;

}



ul {

  padding: 0;

  list-style: none;

  margin: 0;

}



.index {

  position: relative;

  z-index: 10;

}



.text-center {

  text-align: center;

}



.opacity-text {

  -webkit-filter: opacity(0.7);

          filter: opacity(0.7);

}



.opacity-0 {

  -webkit-filter: opacity(0);

          filter: opacity(0);

}



.format {

  padding: 8rem 3rem;

  background: transparent;

  background-color: transparent;

  max-width: 120rem;

  margin: 0 auto;

}



.heading {

  display: flex;

  justify-content: flex-end;

  align-items: center;

  width: 100%;

}

.heading h2 {

  margin-right: 5rem;

}



.heading-left {

  display: flex;

  flex-direction: row-reverse;

  justify-content: flex-end;

  align-items: center;

}

.heading-left h2 {

  margin-right: 5rem;

}



.number {

  font-family: "Fira Code", monospace;

  color: #920097;

  font-size: 4rem;

}



.line-heading {

  height: 1px;

  width: 40%;

  margin-right: 2rem;

  background-color: transparent;

  background: linear-gradient(270deg, #920097 0%, #ffffff 100%);

}



.line-heading-short {

  height: 1px;

  width: 30%;

  background-color: transparent;

  background: linear-gradient(270deg, #920097 0%, #ffffff 100%);

}



@media screen and (max-width: 1000px) {

  html, body {

    overflow-x: hidden;

  }

  p {

    line-height: 1.2;

    font-size: 1.8rem;

  }

  .format {

    padding: 5rem 5rem;

    background: transparent;

    background-color: transparent;

    max-width: 120rem;

    margin: 0 auto;

  }

  .number {

    font-size: 3.5rem;

  }

  .line-heading-short {

    width: 18%;

  }

}

@media screen and (max-width: 770px) {

  html, body {

    overflow-x: hidden;

  }

  p {

    font-size: 1.6rem;

  }

  .format {

    padding: 3rem 2rem;

    background: transparent;

    background-color: transparent;

    max-width: 120rem;

    margin: 0 auto;

  }

  .number {

    font-size: 2.5rem;

  }

  .line-heading-short {

    display: none;

  }

  .line-heading {

    display: none;

  }

}

h1, h2, h3 {

  margin: 0;

  line-height: 1.5;

}



h1, h2, h3, h4, h5, h6 {

  color: #FFFFFF;

}



h1 {

  font-size: 8rem;

}



.hello .devscoast {

  font-size: 10rem;

}



.hello .block {

  font-size: 3rem;

}



h2 {

  font-size: 5rem;

  font-weight: 600;

}



h3 {

  font-size: 4rem;

}



h4 {

  font-size: 3.5rem;

}



h5 {

  font-family: "Fira Code", monospace;

  font-size: 2rem;

}



a {

  font-family: "Fira Code", monospace;

  text-decoration: none;

  font-size: 2rem;

  cursor: pointer;

}



li {

  font-size: 2rem;

  margin: 1.5rem 0;

  color: #FFFFFF;

  font-family: "Fira Code", monospace;

}



@media screen and (max-width: 1000px) {

  h1 {

    font-size: 5rem;

    line-height: 1.2;

  }

  .hello .block {

    font-size: 3rem;

  }

  .hello .devscoast {

    font-size: 7rem;

  }

  h2 {

    font-size: 4.5rem;

  }

  h2.developers {

    margin-top: 1.5rem;

    margin-bottom: 2rem;

  }

  h3 {

    font-size: 3.5rem;

  }

  h4 {

    font-size: 3rem;

  }

  h5 {

    font-size: 2.5rem;

  }

  a {

    text-decoration: none;

    font-size: 1.6rem;

  }

  li {

    font-size: 1.8rem;

    margin: 1.5rem 0;

  }

}

@media screen and (max-width: 770px) {

  h1 {

    font-size: 4rem;

  }

  .hello .block {

    font-size: 2rem;

  }

  h2 {

    font-size: 3rem;

    line-height: 1.5;

  }

  h2.developers {

    margin-top: 1.5rem;

    margin-bottom: 2rem;

    font-size: 2.4rem;

  }

  h3 {

    font-size: 2.2rem;

  }

  h4 {

    font-size: 2rem;

  }

  h5 {

    font-size: 1.8rem;

  }

  a {

    margin: 0 auto;

  }

  li {

    font-size: 1.6rem;

  }

}

nav {

  display: flex;

  justify-content: space-between;

  align-items: center;

  background-color: #fff;

  padding: 10px 20px;

  position: fixed;

  width: 100%;

  z-index: 15;

}



.logo-header {

  width: 200px;

  margin-left: 6rem;

}



.logo-header img {

  width: 200px;

  height: auto;

}



.nav-links ul {

  display: flex;

  justify-content: space-between;

  align-items: center;

  list-style: none;

  margin: 0;

  padding: 0;

}



.nav-links li {

  margin: 0 1rem;

}



.nav-links a {

  text-decoration: none;

  color: #000;

}



.burger {

  display: none;

  cursor: pointer;

}



.burger div {

  width: 3rem;

  height: 0.3rem;

  border-radius: 1rem;

  background-color: #000;

  margin: 5px;

  transition: all 0.3s ease;

}



@media screen and (max-width: 1000px) {

  .nav-links {

    position: fixed;

    top: 8rem;

    right: -100%;

    height: 100vh;

    width: 100%;

    background-color: rgba(38, 38, 38, 0.5019607843);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    transition: all 0.5s ease;

  }

  .nav-links ul {

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .nav-links li {

    margin: 2rem 0;

  }

  .nav-links a {

    text-decoration: none;

    color: #ffffff;

  }

  .burger {

    display: block;

  }

  .toggle {

    transition: all 0.2s ease 0.4s;

  }

  .toggle .bar-1 {

    -webkit-transform: rotate(45deg);

            transform: rotate(45deg);

    -webkit-transform-origin: 0.2rem;

            transform-origin: 0.2rem;

  }

  .toggle .bar-2 {

    opacity: 0;

  }

  .toggle .bar-3 {

    -webkit-transform: rotate(-45deg);

            transform: rotate(-45deg);

    -webkit-transform-origin: 0.5rem;

            transform-origin: 0.5rem;

  }

  .nav-active {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    position: absolute;

    top: 7rem;

    right: 0;

    height: 100vh;

    width: 100%;

    background-color: #262626;

    opacity: 0.95;

    transition: all 0.5s ease-in-out;

    z-index: 5;

  }

  .nav-active li {

    opacity: 0;

  }

  .nav-active li a {

    font-size: 2rem;

  }

  .nav-active li:nth-child(1) {

    transition: all 0.5s ease 0.2s;

  }

  .nav-active li:nth-child(2) {

    transition: all 0.5s ease 0.4s;

  }

  .nav-active li:nth-child(3) {

    transition: all 0.5s ease 0.6s;

  }

  .nav-active li:nth-child(4) {

    transition: all 0.5s ease 0.8s;

  }

  .nav-active li:nth-child(5) {

    transition: all 0.5s ease 1s;

  }

  .nav-active li {

    opacity: 1;

  }

}

@media screen and (max-width: 500px) {

  nav {

    justify-content: space-around;

  }

}

.hello {

  margin-left: 10rem;

  padding-top: 20rem;

}

.hello .block {

  display: block;

  font-family: "Fira Code", monospace;

  color: #920097;

}

.hello h2 {

  font-family: "Fira Code", monospace;

}

.hello .devscoast {

  font-family: "Titillium Web", sans-serif;

  font-weight: 700;

  -webkit-text-stroke-width: 1px;

  -webkit-text-stroke-color: #ffffff;

  -webkit-filter: drop-shadow(2px 2px 2px #ffffff);

          filter: drop-shadow(2px 2px 2px #ffffff);

  -webkit-animation: textGradient 8s linear infinite;

  /* animation: textGradient 8s linear infinite; */

  background: linear-gradient(115deg, #e5cf3f 20%, #41dcdc 40%, #a46ae3 68%, #e5cf3f 80%);

  -webkit-background-clip: text;

  background-size: 500% auto;

  -webkit-text-fill-color: transparent;

  color: transparent;

}

@-webkit-keyframes textGradient {

  from {

    background-position: 0 0;

  }

  to {

    background-position: 100% 0;

  }

}

@keyframes textGradient {

  from {

    background-position: 0 0;

  }

  to {

    background-position: 100% 0;

  }

}



@media screen and (max-width: 1000px) {

  .hello {

    margin: 0 auto;

  }

}

@media screen and (max-width: 1000px) {

  .hello {

    padding-top: 12rem;

  }

}

.about-us {

  display: grid;

  grid-template-columns: 1fr 2fr;

  gap: 5rem;

}

.about-us .beach {

  margin-top: 10rem;

  position: relative;

}

.about-us .beach::before {

  content: "";

  position: absolute;

  width: 97%;

  height: 97%;

  top: 5px;

  left: 5px;

  background-image: url(../img/matrix.jpg);

  background-repeat: no-repeat;

  background-size: contain;

  z-index: 3;

  transition: all 0.8s ease;

}

.about-us .beach::after {

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  top: 3rem;

  left: -3rem;

  background-image: url(../img/marco.png);

  background-repeat: no-repeat;

  background-size: contain;

  z-index: 1;

  transition: all 0.8s ease;

}

.about-us .beach:hover::before {

  opacity: 0;

  transition: all 0.8s ease;

}

.about-us .beach:hover::after {

  top: 2rem;

  left: -2rem;

  transition: all 0.8s ease;

}

.about-us .beach .beach-imagen img {

  position: relative;

  z-index: 2;

  border: 10px solid;

  border-image-slice: 1;

  border-width: 5px;

  border-image-source: linear-gradient(to top, #ecd189, #3cf2dd);

}

.about-us__content h2.nosotros {

  margin-right: 0;

  font-size: 4rem;

}

@media screen and (max-width: 1300px) {

  .about-us__content h2.nosotros {

    font-size: 3.2rem;

  }

}

@media screen and (max-width: 500px) {

  .about-us__content h2.nosotros {

    font-size: 3rem;

  }

}

.about-us__content .technologies {

  display: flex;

  justify-content: space-around;

}

.about-us__content .technologies ul {

  margin-left: 2rem;

}

.about-us__content .technologies ul:nth-child(1) {

  margin-left: 0;

}

.about-us__content .technologies li {

  display: flex;

  align-items: center;

}

.about-us__content .technologies span {

  color: #920097;

}

.about-us__content .technologies li.header-li {

  margin-left: 2.5rem;

  margin-bottom: 2rem;

  font-weight: 700;

  font-family: "Fira Code", monospace;

}



@media screen and (max-width: 1300px) {

  .about-us {

    margin: 0 3rem 0 6rem;

    grid-template-columns: 2fr 3fr;

  }

  h2 {

    font-size: 3.5rem;

  }

  .number {

    font-size: 3rem;

  }

  p {

    font-size: 1.8rem;

  }

  li {

    font-size: 1.6rem;

  }

}

@media screen and (max-width: 1000px) {

  .about-us {

    margin: 0;

    grid-template-columns: 1fr;

  }

  .about-us .beach {

    display: none;

  }

  .about-us__content .heading {

    justify-content: flex-end;

  }

  .about-us__content .technologies {

    justify-content: flex-start;

  }

  .about-us .heading h2 {

    margin-right: 2rem;

  }

}

@media screen and (max-width: 770px) {

  .about-us__content .heading .line-heading {

    display: none;

  }

}

@media screen and (max-width: 600px) {

  .about-us__content .technologies {

    display: none;

  }

}

.projects-container {

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

}

.projects-container .heading-left {

  margin-bottom: 3rem;

}



.projects {

  display: flex;

  justify-content: flex-start;

  align-items: center;

  margin-left: 5rem;

}



.project-details h3 {

  font-size: 3rem;

}

.project-details h3 a {

  font-size: 3rem;

  color: #cc00cc;

}



.projects-list {

  display: flex;

  flex-direction: column;

  justify-content: space-around;

  margin-right: 2rem;

  height: 26rem;

}



.project-info {

  display: none;

}



.project-info.active {

  display: flex;

  flex-direction: column;

  justify-content: space-around;

}

.project-info.active h3 {

  margin-left: 3.5rem;

}

.project-info.active p {

  color: var(--bg2);

  margin-left: 3.5rem;

}

.project-info.active li {

  display: flex;

}

.project-info.active li span {

  margin-right: 1rem;

}



.project-button {

  background-color: transparent;

  border: none;

  font-size: 2rem;

  font-weight: bold;

  color: #400064;

  text-transform: uppercase;

  margin: 1rem;

  cursor: pointer;

  transition: all 0.3s ease;

}

.project-button:first-of-type {

  margin-top: 0;

}

.project-button:last-of-type {

  margin-bottom: 0;

}



.project-button.active {

  color: #920097;

  transition: all 0.3s ease;

}



@media screen and (max-width: 1000px) {

  .projects-list {

    height: 24rem;

  }

}

@media screen and (max-width: 770px) {

  .projects {

    margin-left: 0;

  }

  .projects-container h2 {

    margin: 0 0 3rem 0;

  }

  .projects-list {

    height: 23rem;

  }

  .project-button {

    margin-left: 0;

    padding-left: 0;

  }

}

@media screen and (max-width: 650px) {

  .projects-container .heading-left {

    margin-bottom: 0rem;

  }

  .projects {

    flex-direction: column;

  }

  .projects-list {

    height: auto;

    flex-direction: row;

    justify-content: flex-start;

    overflow-x: scroll;

    width: 90vw;

    margin-bottom: 3rem;

  }

  .projects-list::-webkit-scrollbar {

    height: 5px;

    border-radius: 1rem;

    background-color: rgba(146, 0, 151, 0.3176470588);

  }

  .projects-list::-webkit-scrollbar-thumb {

    height: 5px;

    background: linear-gradient(100deg, #00f2ff 0%, #fc00d6 100%);

    border-radius: 1rem;

  }

  .project-button {

    margin: 0 2rem 1rem 2rem;

  }

  .project-button:last-of-type {

    margin-bottom: 1rem;

  }

}

.project-cards {

  display: flex;

  max-width: 110rem;

  margin: 0 auto;

  flex-direction: column;

  align-items: center;

}

.project-cards p.change {

  margin-bottom: 4rem;

}

.project-cards .heading .line-heading {

  height: 1.1px;

}

.project-cards .heading h2 {

  margin-right: 2rem;

}

.project-cards .card {

  opacity: 1;

  transition: opacity 0.5s ease-in-out;

}

.project-cards .card-hidden {

  opacity: 0;

  position: absolute;

  z-index: -1;

  transition: opacity 0.5s ease-in-out 0.2s;

}

.project-cards button {

  background-color: transparent;

  cursor: pointer;

}

.project-cards__grid {

  margin: 0 auto;

  display: grid;

  gap: 3rem;

  grid-template-columns: repeat(auto-fill, minmax(40rem, 1fr));

}

.project-cards__grid .card {

  padding: 2rem;

  background-color: rgba(0, 255, 255, 0.448);

  border-radius: 2rem;

  -webkit-backdrop-filter: blur(20px);

          backdrop-filter: blur(20px);

  display: flex;

  flex-direction: column;

  transition: all 0.3s ease;

}

.project-cards__grid .card:hover {

  -webkit-transform: translateY(-10px);

          transform: translateY(-10px);

  -webkit-filter: brightness(130%);

          filter: brightness(130%);

  outline: 3px solid #920097;

  transition: all 0.3s ease;

}

.project-cards__grid .card .main-content {

  margin-top: 1rem;

}

.project-cards__grid .card .main-content a {

  font-family: "Inter", sans-serif;

}

.project-cards__grid .card .dFlex {

  display: flex;

  justify-content: space-between;

  margin: 0 2rem 2rem 0rem;

}

.project-cards__grid .card .dFlex a :hover {

  color: #FFFFFF;

  transition: all 0.5s ease;

}

.project-cards__grid .card .dFlex i {

  font-size: 4rem;

  color: #400064;

}

.project-cards__grid .card .dFlex:last-of-type {

  justify-content: center;

  margin: 0;

}

.project-cards__grid .card .dFlex:last-of-type h5 {

  margin-right: 2rem;

}



@media screen and (max-width: 770px) {

  .project-cards .heading h2 {

    margin-right: 0;

  }

  .project-cards__grid {

    grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));

  }

}

.contact {

  display: flex;

  flex-direction: column;

  max-width: 100%;

}

.contact h5 {

  margin-top: 0;

}

.contact .text-content {

  display: flex;

  max-width: 110rem;

  margin: 0 auto;

  flex-direction: column;

  align-items: center;

  position: relative;

  z-index: 20;

}



@media screen and (max-width: 770px) {

  .contact h5 {

    margin-top: 3rem;

  }

}

.footer {

  text-align: center;

  color: white;

  margin: 0;

  padding-top: 10rem;

  width: 100%;

}



.footer-bottom {

  width: 100%;

  color: #bbb;

  margin: 0;

}

.footer-bottom .copyright {

  margin: 0 auto;

  text-align: center;

}

.footer-bottom .copyright p {

  color: #bbb;

  margin: 1rem 0;

}

.footer-bottom .copyright p a {

  color: #bbb;

}



.waves {

  position: relative;

  width: 100%;

  height: 10vh;

  margin-bottom: -7px; /*Fix for safari gap*/

  min-height: 100px;

  max-height: 150px;

}



.videohero {

  position: relative;

}

.videohero video {

  width: 100%;

  margin-top: -10rem;

}

.videohero #btn-play {

  cursor: pointer;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0.5;

  background-color: transparent;

  border: none;

}



/* Animation */

.parallax > use {

  -webkit-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;

          animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;

}



.parallax > use:nth-child(1) {

  -webkit-animation-delay: -2s;

          animation-delay: -2s;

  -webkit-animation-duration: 7s;

          animation-duration: 7s;

  fill: #043e84;

}



.parallax > use:nth-child(2) {

  -webkit-animation-delay: -3s;

          animation-delay: -3s;

  -webkit-animation-duration: 10s;

          animation-duration: 10s;

  fill: #044684;

  opacity: 0.7;

}



.parallax > use:nth-child(3) {

  -webkit-animation-delay: -4s;

          animation-delay: -4s;

  -webkit-animation-duration: 13s;

          animation-duration: 13s;

  fill: #046884;

  opacity: 0.5;

}



.parallax > use:nth-child(4) {

  -webkit-animation-delay: -5s;

          animation-delay: -5s;

  -webkit-animation-duration: 20s;

          animation-duration: 20s;

  fill: #047c84;

  opacity: 0.3;

}



/*waves reverse*/

.waves1 {

  -webkit-transform: rotate(180deg);

          transform: rotate(180deg);

  -webkit-transform: scaleY(-1);

          transform: scaleY(-1);

  position: relative;

  width: 100%;

  height: 10vh;

  min-height: 100px;

  max-height: 150px;

}



.parallax1 > use {

  -webkit-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;

          animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;

}



.parallax1 > use:nth-child(1) {

  -webkit-animation-delay: -5s;

          animation-delay: -5s;

  -webkit-animation-duration: 20s;

          animation-duration: 20s;

  fill: #ffffff;

  opacity: 0.3;

}



.parallax1 > use:nth-child(2) {

  -webkit-animation-delay: -5s;

          animation-delay: -5s;

  -webkit-animation-duration: 20s;

          animation-duration: 20s;

  fill: #047c84;

  opacity: 0.3;

}



.parallax1 > use:nth-child(3) {

  -webkit-animation-delay: -5s;

          animation-delay: -5s;

  -webkit-animation-duration: 20s;

          animation-duration: 20s;

  fill: #89bdc1;

  opacity: 0.3;

}



.parallax1 > use:nth-child(4) {

  -webkit-animation-delay: -5s;

          animation-delay: -5s;

  -webkit-animation-duration: 20s;

          animation-duration: 20s;

  fill: #047c84;

  opacity: 0.3;

}



@-webkit-keyframes move-forever {

  0% {

    -webkit-transform: translate3d(-90px, 0, 0);

            transform: translate3d(-90px, 0, 0);

  }

  100% {

    -webkit-transform: translate3d(85px, 0, 0);

            transform: translate3d(85px, 0, 0);

  }

}



@keyframes move-forever {

  0% {

    -webkit-transform: translate3d(-90px, 0, 0);

            transform: translate3d(-90px, 0, 0);

  }

  100% {

    -webkit-transform: translate3d(85px, 0, 0);

            transform: translate3d(85px, 0, 0);

  }

}

/*Shrinking for mobile*/

@media (max-width: 768px) {

  .footer {

    text-align: center;

    color: white;

    margin: 0;

    padding-top: 8rem;

    width: 100%;

  }

  .waves {

    height: 40px;

    min-height: 40px;

  }

  .waves1 {

    min-height: 30px;

    max-height: 30px;

  }

  .content {

    height: 11vh;

  }

}

.triangle {

  overflow-x: hidden;

  -webkit-clip-path: url(#cp);

          clip-path: url(#cp);

  width: 100rem;

  height: 100rem;

  background-size: 100% 100%;

  background-position: center right;

  background-repeat: no-repeat;

  background-blend-mode: screen;

  position: absolute;

  z-index: 0.5;

  top: -20px;

  right: 0px;

}



.second {

  background-color: #000000;

  background-image: url("https://media.giphy.com/media/2VqwNP7Iosf8v1TB2Y/giphy.gif");

  opacity: 0.6;

}



.triangle-4 {

  -webkit-clip-path: url(#cp4);

          clip-path: url(#cp4);

  width: 110%;

  height: 100%;

  background-size: 100% 100%;

  background-position: center right;

  background-repeat: no-repeat;

  background-blend-mode: screen;

  position: absolute;

  z-index: 0.5;

  bottom: 0rem;

  margin-left: -5rem;

}



.fourth {

  background-color: rgba(251, 255, 0, 0.5647058824);

  background-image: url("https://media.giphy.com/media/RNbM4zvZQlhkTqh2iN/giphy.gif");

  opacity: 0.6;

}



@media screen and (max-width: 1000px) {

  .triangle-4 {

    margin-left: -6rem;

  }

}

@media screen and (max-width: 770px) {

  .triangle, .triangle-2, .triangle-3 {

    width: 80rem;

    height: 80rem;

  }

  .triangle {

    top: -20px;

    width: 100rem;

    height: 100rem;

  }

}

@media (max-width: 500px) {

  .cards.format {

    padding-top: 0;

  }

}



.bottom-padding {

  padding: 0 0 8rem 0;

}

.bottom-padding:last-child {

  padding-bottom: 0;

}

@media (max-width: 770px) {

  .bottom-padding {

    padding: 0 0 4rem 0;

  }

}



.card1 {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  align-items: center;

}

@media (max-width: 770px) {

  .card1 {

    display: flex;

    flex-direction: column-reverse;

  }

}

.card1 .imagen {

  background-image: linear-gradient(180deg, #3cf2dd 18%, #facf85);

  border-radius: 2rem;

  box-shadow: 9px 10px 10px -1px rgba(0, 0, 0, 0);

}

@media (max-width: 770px) {

  .card1 .imagen {

    margin-top: 0;

    width: 100%;

  }

}

.card1 .imagen img {

  padding: 3rem 3rem 0 3rem;

}

.card1 .imagen::before {

  background-color: #000;

  content: "";

  opacity: 0.5;

  position: absolute;

  border-radius: 2rem;

  transition: 2s;

  width: 100%;

  height: 100%;

}

.card1 .imagen:hover {

  box-shadow: 2px 5px 10px -1px rgba(0, 0, 0, 0.8);

  transition: 2s;

  background-image: linear-gradient(180deg, #3cf2dd 58%, #facf85);

}

.card1 .imagen:hover::before {

  transition: 2s;

  opacity: 0;

}

.card1 .contenido_cards {

  text-align: end;

  position: relative;

  z-index: 1;

}

.card1 .contenido_cards a h2 {

  margin-top: 24px;

  margin-bottom: 16px;

  -webkit-animation: textGradient 8s linear infinite;

  /* animation: textGradient 8s linear infinite; */

  background: linear-gradient(115deg, #e5cf3f 20%, #41dcdc 40%, #a46ae3 68%, #e5cf3f 80%);

  -webkit-background-clip: text;

  background-size: 500% auto;

  -webkit-text-fill-color: transparent;

  color: transparent;

  font-size: 28px;

  line-height: 34px;

}

@keyframes textGradient {

  from {

    background-position: 0 0;

  }

  to {

    background-position: 100% 0;

  }

}

@media (max-width: 770px) {

  .card1 .contenido_cards {

    margin-left: 0rem !important;

  }

}

@media (max-width: 500px) {

  .card1 .contenido_cards ul {

    font-size: 1rem;

  }

  .card1 .contenido_cards h2 {

    font-size: 2rem;

  }

}

.card1 .contenido_cards p {

  color: #d0d1d4;

  background-color: #043e84;

  box-shadow: 2px 5px 10px -1px rgba(0, 0, 0, 0.8);

  padding: 2rem;

  border-radius: 0.5rem;

}

.card1 .contenido_cards ul {

  display: flex;

  justify-content: space-evenly;

  font-weight: 600;

}



.card2 {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  align-items: center;

}

@media (max-width: 770px) {

  .card2 {

    display: flex;

    flex-direction: column;

  }

}

.card2 .imagen2 {

  background-image: linear-gradient(180deg, #facf85 18%, #3cf2dd);

  border-radius: 2rem;

  box-shadow: 9px 10px 10px -1px rgba(0, 0, 0, 0);

}

.card2 .imagen2 img {

  padding: 3rem 3rem 0 3rem;

}

.card2 .imagen2::before {

  background-color: #000;

  content: "";

  opacity: 0.5;

  position: absolute;

  width: 100%;

  height: 100%;

  border-radius: 2rem;

  transition: 2s;

}

.card2 .imagen2:hover {

  box-shadow: 2px 5px 10px -1px rgba(0, 0, 0, 0.8);

  transition: 2s;

  background-image: linear-gradient(180deg, #facf85 58%, #3cf2dd);

}

.card2 .imagen2:hover::before {

  transition: 2s;

  opacity: 0;

}

.card2 .contenido_cards2 {

  position: relative;

  z-index: 1;

}

.card2 .contenido_cards2 a h2 {

  margin-top: 24px;

  margin-bottom: 16px;

  -webkit-animation: textGradient 8s linear infinite;

  /* animation: textGradient 8s linear infinite; */

  background: linear-gradient(115deg, #e5cf3f 20%, #41dcdc 40%, #a46ae3 68%, #e5cf3f 80%);

  -webkit-background-clip: text;

  background-size: 500% auto;

  -webkit-text-fill-color: transparent;

  color: transparent;

  font-size: 28px;

  line-height: 34px;

}

@media (max-width: 770px) {

  .card2 .contenido_cards2 {

    margin-right: 0rem !important;

  }

}

@media (max-width: 770px) and (max-width: 500px) {

  .card2 .contenido_cards2 ul {

    font-size: 1rem;

  }

  .card2 .contenido_cards2 h2 {

    font-size: 2rem;

  }

}

.card2 .contenido_cards2 p {

  color: #d0d1d4;

  background-color: #043e84;

  box-shadow: 2px 5px 10px -1px rgba(0, 0, 0, 0.8);

  padding: 2rem;

  border-radius: 0.5rem;

}

.card2 .contenido_cards2 ul {

  font-weight: 600;

  color: #00ff62;

  display: flex;

  justify-content: space-evenly;

}



.elemento-visible {

  transition: opacity 10s;

  opacity: 1;

  margin-right: -10rem;

  position: relative;

  transition: 5s; /* hace que se quede en la última posición de la animación */

}

@media (max-width: 770px) {

  .elemento-visible {

    margin: 0;

  }

}



.elemento-oculto {

  opacity: 0;

}



.elemento-visible1 {

  transition: opacity 10s;

  opacity: 1;

  position: relative;

  transition: 5s; /* hace que se quede en la última posición de la animación */

}

@media (max-width: 770px) {

  .elemento-visible1 {

    margin-right: 0rem;

  }

}



.elemento-oculto1 {

  opacity: 0;

}



.elemento-visible2 {

  transition: opacity 10s;

  opacity: 1;

  margin-left: -10rem;

  position: relative;

  transition: 5s; /* hace que se quede en la última posición de la animación */

}

@media (max-width: 770px) {

  .elemento-visible2 {

    margin: 0;

  }

}



.elemento-oculto2 {

  opacity: 0;

}



.elemento-visible3 {

  transition: opacity 10s;

  opacity: 1;

  margin-left: rem;

  position: relative;

  transition: 5s; /* hace que se quede en la última posición de la animación */

}

@media (max-width: 770px) {

  .elemento-visible3 {

    margin-left: 0rem;

  }

}



.elemento-oculto3 {

  opacity: 0;

}



span.switcher {

  position: relative;

  -webkit-transform: scale(0.4);

          transform: scale(0.4);

  width: 200px;

  height: 50px;

  border-radius: 25px;

}

span.switcher input {

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

  position: relative;

  width: 200px;

  height: 50px;

  border-radius: 25px;

  background-color: #000;

  outline: none;

}

span.switcher input:before, span.switcher input:after {

  z-index: 2;

  position: absolute;

  top: 50%;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

  font-size: 150%;

  color: #FFFFFF;

}

span.switcher input:before {

  content: "ESP";

  left: 40px;

}

span.switcher input:after {

  content: "EN";

  right: 40px;

}

span.switcher label {

  z-index: 1;

  position: absolute;

  top: 10px;

  bottom: 10px;

  border-radius: 20px;

}

span.switcher.switcher-1 input {

  transition: 0.25s -0.1s;

}

span.switcher.switcher-1 input:checked {

  background-color: #FFFFFF;

}

span.switcher.switcher-1 input:checked:before {

  color: #FFFFFF;

  transition: color 0.5s 0.2s;

}

span.switcher.switcher-1 input:checked:after {

  color: #e1e1e1;

  transition: color 0.5s;

}

span.switcher.switcher-1 input:checked + label {

  left: 10px;

  right: 100px;

  background: #000;

  transition: left 0.5s, right 0.4s 0.2s;

}

span.switcher.switcher-1 input:not(:checked) {

  background: #000;

  transition: background 0.5s -0.1s;

}

span.switcher.switcher-1 input:not(:checked):before {

  color: #e1e1e1;

  transition: color 0.5s;

}

span.switcher.switcher-1 input:not(:checked):after {

  color: #000;

  transition: color 0.5s 0.2s;

}

span.switcher.switcher-1 input:not(:checked) + label {

  left: 100px;

  right: 10px;

  background: #FFFFFF;

  transition: left 0.4s 0.2s, right 0.5s, background 0.35s -0.1s;

}

span.switcher.switcher-2 {

  overflow: hidden;

}

span.switcher.switcher-2 input {

  transition: background-color 0s 0.5s;

}

span.switcher.switcher-2 input:before {

  color: #000;

}

span.switcher.switcher-2 input:after {

  color: #FFFFFF;

}

span.switcher.switcher-2 input:checked {

  background-color: #FFFFFF;

}

span.switcher.switcher-2 input:checked + label {

  background: #FFFFFF;

  -webkit-animation: turn-on 0.5s ease-out;

          animation: turn-on 0.5s ease-out;

}

@-webkit-keyframes turn-on {

  0% {

    left: 100%;

  }

  100% {

    left: 0%;

  }

}

@keyframes turn-on {

  0% {

    left: 100%;

  }

  100% {

    left: 0%;

  }

}

span.switcher.switcher-2 input:not(:checked) {

  background: #000;

}

span.switcher.switcher-2 input:not(:checked) + label {

  background: #000;

  -webkit-animation: turn-off 0.5s ease-out;

          animation: turn-off 0.5s ease-out;

}

@-webkit-keyframes turn-off {

  0% {

    right: 100%;

  }

  100% {

    right: 0%;

  }

}

@keyframes turn-off {

  0% {

    right: 100%;

  }

  100% {

    right: 0%;

  }

}

span.switcher.switcher-2 label {

  top: 0px;

  width: 200px;

  height: 50px;

  border-radius: 25px;

}



/* Agrega la clase "show" para mostrar las secciones */

.spanish:not(.show),

.english:not(.show) {

  display: none;

}



:root {

  --on: 0;

  --bg: hsl(calc(200 - (var(--on) * 0)), calc((20 + (var(--on) * 100)) * 1%), calc((20 + (var(--on) * 25)) * 1%));

  --bg2: hsl(calc(800 - (var(--on) * 160)), calc((20 + (var(--on) * 50)) * 10%), calc((20 + (var(--on) * 1)) * 1.5%));

  --bg3: hsl(calc(300 - (var(--on) * 160)), calc((20 + (var(--on) * 50)) * 10%), calc((20 + (var(--on) * 50)) * 2%));

  --bg4: hsl(calc(300 - (var(--on) * 160)), calc((20 + (var(--on) * 50)) * 10%), calc((20 + (var(--on) * 25)) * 0.5%));

  --bg5: hsl(calc(300 - (var(--on) * 160)), calc((20 + (var(--on) * 50)) * 10%), calc((20 + (var(--on) * 25)) * 5%));

  --cord: hsl(0, 0%, calc((60 - (var(--on) * 50)) * 1%));

  --stroke: hsl(0, 0%, calc((60 - (var(--on) * 50)) * 1%));

  --shine: hsla(0, 0%, 100%, calc(0.75 - (var(--on) * 0.5)));

  --cap: hsl(0, 0%, calc((40 + (var(--on) * 30)) * 1%));

  --filament: hsl(45, calc(var(--on) * 80%), calc((25 + (var(--on) * 75)) * 1%));

}



.black {

  background: var(--bg);

}

.black .change {

  color: var(--bg2);

}

.black .hello .change {

  color: white;

  text-shadow: var(--bg2) 2px 2px 5px;

}

.black .hello .block {

  color: var(--bg2);

}

.black .project-button {

  color: var(--bg2);

}

.black .project-button.active {

  color: var(--bg3);

}

.black .second {

  background-color: var(--bg4);

}



.toggle-scene {

  overflow: visible;

  height: 13rem;

  position: fixed;

  top: -5px;

  left: 15px;

  z-index: 100;

}



.toggle-scene__cord {

  stroke: var(--cord);

  cursor: move;

}



.toggle-scene__cord:nth-of-type(1) {

  display: none;

}



.toggle-scene__cord:nth-of-type(2),

.toggle-scene__cord:nth-of-type(3),

.toggle-scene__cord:nth-of-type(4),

.toggle-scene__cord:nth-of-type(5) {

  display: none;

}



.toggle-scene__cord-end {

  stroke: var(--cord);

  fill: var(--cord);

}



.toggle-scene__dummy-cord {

  stroke-width: 6;

  stroke: var(--cord);

}



.bulb__filament {

  stroke: var(--filament);

}

.bulb {

  cursor: pointer;

}

.bulb__shine {

  stroke: var(--shine);

}



.bulb__flash {

  stroke: #f5e0a3;

  display: none;

}



.bulb__bulb {

  stroke: var(--stroke);

  fill: hsla(calc(180 - 95 * var(--on)), 80%, 80%, calc(0.1 + 0.4 * var(--on)));

}

.bulb__bulb__lighted {

  stroke: var(--stroke);

  fill: rgb(255, 165, 0, .8);

}



.bulb__cap {

  fill: var(--cap);

}



.bulb__cap-shine {

  fill: var(--shine);

}



.bulb__cap-outline {

  stroke: var(--stroke);

}



/* Estilo para el fondo del loading */

#loading {

  background: #2c2c2c;

  position: fixed;

  width: 100%;

  height: 100%;

  z-index: 9999;

}



.flicker-out-1 {

  -webkit-animation: flicker-out-1 2s linear 3s both;

          animation: flicker-out-1 2s linear 3s both;

}

@-webkit-keyframes flicker-out-1 {

  0% {

    opacity: 1;

  }

  13.9% {

    opacity: 1;

  }

  14% {

    opacity: 0;

    box-shadow: none;

  }

  14.9% {

    opacity: 0;

    box-shadow: none;

  }

  15% {

    opacity: 1;

  }

  22.9% {

    opacity: 1;

  }

  23% {

    opacity: 0;

    box-shadow: none;

  }

  24.9% {

    opacity: 0;

    box-shadow: none;

  }

  25% {

    opacity: 1;

  }

  34.9% {

    opacity: 1;

  }

  35% {

    opacity: 0;

    box-shadow: none;

  }

  39.9% {

    opacity: 0;

    box-shadow: none;

  }

  40% {

    opacity: 1;

  }

  42.9% {

    opacity: 1;

  }

  43% {

    opacity: 0;

    box-shadow: none;

  }

  44.9% {

    opacity: 0;

    box-shadow: none;

  }

  45% {

    opacity: 1;

  }

  50% {

    opacity: 1;

  }

  54.9% {

    opacity: 1;

  }

  55% {

    opacity: 0;

    box-shadow: none;

  }

  69.4% {

    opacity: 0;

    box-shadow: none;

  }

  69.5% {

    opacity: 1;

  }

  69.9% {

    opacity: 1;

  }

  70% {

    opacity: 0;

    box-shadow: none;

  }

  79.4% {

    opacity: 0;

    box-shadow: none;

  }

  79.9% {

    opacity: 1;

  }

  80% {

    opacity: 0;

    box-shadow: none;

  }

  89.8% {

    opacity: 0;

    box-shadow: none;

  }

  89.9% {

    opacity: 1;

    box-shadow: none;

  }

  90% {

    opacity: 0;

    box-shadow: none;

  }

  100% {

    opacity: 0;

  }

}

@keyframes flicker-out-1 {

  0% {

    opacity: 1;

  }

  13.9% {

    opacity: 1;

  }

  14% {

    opacity: 0;

    box-shadow: none;

  }

  14.9% {

    opacity: 0;

    box-shadow: none;

  }

  15% {

    opacity: 1;

  }

  22.9% {

    opacity: 1;

  }

  23% {

    opacity: 0;

    box-shadow: none;

  }

  24.9% {

    opacity: 0;

    box-shadow: none;

  }

  25% {

    opacity: 1;

  }

  34.9% {

    opacity: 1;

  }

  35% {

    opacity: 0;

    box-shadow: none;

  }

  39.9% {

    opacity: 0;

    box-shadow: none;

  }

  40% {

    opacity: 1;

  }

  42.9% {

    opacity: 1;

  }

  43% {

    opacity: 0;

    box-shadow: none;

  }

  44.9% {

    opacity: 0;

    box-shadow: none;

  }

  45% {

    opacity: 1;

  }

  50% {

    opacity: 1;

  }

  54.9% {

    opacity: 1;

  }

  55% {

    opacity: 0;

    box-shadow: none;

  }

  69.4% {

    opacity: 0;

    box-shadow: none;

  }

  69.5% {

    opacity: 1;

  }

  69.9% {

    opacity: 1;

  }

  70% {

    opacity: 0;

    box-shadow: none;

  }

  79.4% {

    opacity: 0;

    box-shadow: none;

  }

  79.9% {

    opacity: 1;

  }

  80% {

    opacity: 0;

    box-shadow: none;

  }

  89.8% {

    opacity: 0;

    box-shadow: none;

  }

  89.9% {

    opacity: 1;

    box-shadow: none;

  }

  90% {

    opacity: 0;

    box-shadow: none;

  }

  100% {

    opacity: 0;

  }

}



/* Estilo para el logo */

#loading-center {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 150px;

  height: 150px;

  margin-top: -75px;

  margin-left: -75px;

}

#loading-center .glitch-wrapper {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

}

#loading-center .glitch {

  font-family: "Titillium Web", sans-serif;

  position: relative;

  font-size: 80px;

  font-weight: 700;

  line-height: 1.2;

  color: #fff;

  letter-spacing: 5px;

  -webkit-animation: shift 4s ease-in-out infinite alternate;

          animation: shift 4s ease-in-out infinite alternate;

  z-index: 1;

}

#loading-center .glitch:before {

  content: attr(data-glitch);

  position: absolute;

  top: 0;

  left: -2px;

  text-shadow: -1px 0 #00ffff;

  width: 100%;

  color: #fff;

  background-color: transparent;

  overflow: hidden;

  clip: rect(0, 900px, 0, 0);

  animation: noise-before 3s infinite linear alternate-reverse;

}

#loading-center .glitch:after {

  content: attr(data-glitch);

  position: absolute;

  top: 0;

  left: 2px;

  text-shadow: 1px 0 #ff00ff;

  width: 100%;

  color: #fff;

  background-color: transparent;

  overflow: hidden;

  clip: rect(0, 900px, 0, 0);

  animation: noise-after 2s infinite linear alternate-reverse;

}

@-webkit-keyframes noise-before {

  0% {

    clip: rect(61px, 9999px, 52px, 0);

  }

  5% {

    clip: rect(33px, 9999px, 144px, 0);

  }

  10% {

    clip: rect(121px, 9999px, 115px, 0);

  }

  15% {

    clip: rect(144px, 9999px, 162px, 0);

  }

  20% {

    clip: rect(62px, 9999px, 180px, 0);

  }

  25% {

    clip: rect(34px, 9999px, 42px, 0);

  }

  30% {

    clip: rect(147px, 9999px, 179px, 0);

  }

  35% {

    clip: rect(99px, 9999px, 63px, 0);

  }

  40% {

    clip: rect(188px, 9999px, 122px, 0);

  }

  45% {

    clip: rect(154px, 9999px, 14px, 0);

  }

  50% {

    clip: rect(63px, 9999px, 37px, 0);

  }

  55% {

    clip: rect(161px, 9999px, 147px, 0);

  }

  60% {

    clip: rect(109px, 9999px, 175px, 0);

  }

  65% {

    clip: rect(157px, 9999px, 88px, 0);

  }

  70% {

    clip: rect(173px, 9999px, 131px, 0);

  }

  75% {

    clip: rect(62px, 9999px, 70px, 0);

  }

  80% {

    clip: rect(24px, 9999px, 153px, 0);

  }

  85% {

    clip: rect(138px, 9999px, 40px, 0);

  }

  90% {

    clip: rect(79px, 9999px, 136px, 0);

  }

  95% {

    clip: rect(25px, 9999px, 34px, 0);

  }

  100% {

    clip: rect(173px, 9999px, 166px, 0);

  }

}

@keyframes noise-before {

  0% {

    clip: rect(61px, 9999px, 52px, 0);

  }

  5% {

    clip: rect(33px, 9999px, 144px, 0);

  }

  10% {

    clip: rect(121px, 9999px, 115px, 0);

  }

  15% {

    clip: rect(144px, 9999px, 162px, 0);

  }

  20% {

    clip: rect(62px, 9999px, 180px, 0);

  }

  25% {

    clip: rect(34px, 9999px, 42px, 0);

  }

  30% {

    clip: rect(147px, 9999px, 179px, 0);

  }

  35% {

    clip: rect(99px, 9999px, 63px, 0);

  }

  40% {

    clip: rect(188px, 9999px, 122px, 0);

  }

  45% {

    clip: rect(154px, 9999px, 14px, 0);

  }

  50% {

    clip: rect(63px, 9999px, 37px, 0);

  }

  55% {

    clip: rect(161px, 9999px, 147px, 0);

  }

  60% {

    clip: rect(109px, 9999px, 175px, 0);

  }

  65% {

    clip: rect(157px, 9999px, 88px, 0);

  }

  70% {

    clip: rect(173px, 9999px, 131px, 0);

  }

  75% {

    clip: rect(62px, 9999px, 70px, 0);

  }

  80% {

    clip: rect(24px, 9999px, 153px, 0);

  }

  85% {

    clip: rect(138px, 9999px, 40px, 0);

  }

  90% {

    clip: rect(79px, 9999px, 136px, 0);

  }

  95% {

    clip: rect(25px, 9999px, 34px, 0);

  }

  100% {

    clip: rect(173px, 9999px, 166px, 0);

  }

}

@-webkit-keyframes noise-after {

  0% {

    clip: rect(26px, 9999px, 33px, 0);

  }

  5% {

    clip: rect(140px, 9999px, 198px, 0);

  }

  10% {

    clip: rect(184px, 9999px, 89px, 0);

  }

  15% {

    clip: rect(121px, 9999px, 6px, 0);

  }

  20% {

    clip: rect(181px, 9999px, 99px, 0);

  }

  25% {

    clip: rect(154px, 9999px, 133px, 0);

  }

  30% {

    clip: rect(134px, 9999px, 169px, 0);

  }

  35% {

    clip: rect(26px, 9999px, 187px, 0);

  }

  40% {

    clip: rect(147px, 9999px, 137px, 0);

  }

  45% {

    clip: rect(31px, 9999px, 52px, 0);

  }

  50% {

    clip: rect(191px, 9999px, 109px, 0);

  }

  55% {

    clip: rect(74px, 9999px, 54px, 0);

  }

  60% {

    clip: rect(145px, 9999px, 75px, 0);

  }

  65% {

    clip: rect(153px, 9999px, 198px, 0);

  }

  70% {

    clip: rect(99px, 9999px, 136px, 0);

  }

  75% {

    clip: rect(118px, 9999px, 192px, 0);

  }

  80% {

    clip: rect(1px, 9999px, 83px, 0);

  }

  85% {

    clip: rect(145px, 9999px, 98px, 0);

  }

  90% {

    clip: rect(121px, 9999px, 154px, 0);

  }

  95% {

    clip: rect(156px, 9999px, 44px, 0);

  }

  100% {

    clip: rect(67px, 9999px, 122px, 0);

  }

}

@keyframes noise-after {

  0% {

    clip: rect(26px, 9999px, 33px, 0);

  }

  5% {

    clip: rect(140px, 9999px, 198px, 0);

  }

  10% {

    clip: rect(184px, 9999px, 89px, 0);

  }

  15% {

    clip: rect(121px, 9999px, 6px, 0);

  }

  20% {

    clip: rect(181px, 9999px, 99px, 0);

  }

  25% {

    clip: rect(154px, 9999px, 133px, 0);

  }

  30% {

    clip: rect(134px, 9999px, 169px, 0);

  }

  35% {

    clip: rect(26px, 9999px, 187px, 0);

  }

  40% {

    clip: rect(147px, 9999px, 137px, 0);

  }

  45% {

    clip: rect(31px, 9999px, 52px, 0);

  }

  50% {

    clip: rect(191px, 9999px, 109px, 0);

  }

  55% {

    clip: rect(74px, 9999px, 54px, 0);

  }

  60% {

    clip: rect(145px, 9999px, 75px, 0);

  }

  65% {

    clip: rect(153px, 9999px, 198px, 0);

  }

  70% {

    clip: rect(99px, 9999px, 136px, 0);

  }

  75% {

    clip: rect(118px, 9999px, 192px, 0);

  }

  80% {

    clip: rect(1px, 9999px, 83px, 0);

  }

  85% {

    clip: rect(145px, 9999px, 98px, 0);

  }

  90% {

    clip: rect(121px, 9999px, 154px, 0);

  }

  95% {

    clip: rect(156px, 9999px, 44px, 0);

  }

  100% {

    clip: rect(67px, 9999px, 122px, 0);

  }

}

@-webkit-keyframes shift {

  0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {

    -webkit-transform: skewX(0deg);

            transform: skewX(0deg);

  }

  41% {

    -webkit-transform: skewX(10deg);

            transform: skewX(10deg);

  }

  42% {

    -webkit-transform: skewX(-10deg);

            transform: skewX(-10deg);

  }

  59% {

    -webkit-transform: skewX(40deg) skewY(10deg);

            transform: skewX(40deg) skewY(10deg);

  }

  60% {

    -webkit-transform: skewX(-40deg) skewY(-10deg);

            transform: skewX(-40deg) skewY(-10deg);

  }

  63% {

    -webkit-transform: skewX(10deg) skewY(-5deg);

            transform: skewX(10deg) skewY(-5deg);

  }

  70% {

    -webkit-transform: skewX(-50deg) skewY(-20deg);

            transform: skewX(-50deg) skewY(-20deg);

  }

  71% {

    -webkit-transform: skewX(10deg) skewY(-10deg);

            transform: skewX(10deg) skewY(-10deg);

  }

}

@keyframes shift {

  0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {

    -webkit-transform: skewX(0deg);

            transform: skewX(0deg);

  }

  41% {

    -webkit-transform: skewX(10deg);

            transform: skewX(10deg);

  }

  42% {

    -webkit-transform: skewX(-10deg);

            transform: skewX(-10deg);

  }

  59% {

    -webkit-transform: skewX(40deg) skewY(10deg);

            transform: skewX(40deg) skewY(10deg);

  }

  60% {

    -webkit-transform: skewX(-40deg) skewY(-10deg);

            transform: skewX(-40deg) skewY(-10deg);

  }

  63% {

    -webkit-transform: skewX(10deg) skewY(-5deg);

            transform: skewX(10deg) skewY(-5deg);

  }

  70% {

    -webkit-transform: skewX(-50deg) skewY(-20deg);

            transform: skewX(-50deg) skewY(-20deg);

  }

  71% {

    -webkit-transform: skewX(10deg) skewY(-10deg);

            transform: skewX(10deg) skewY(-10deg);

  }

}



@media screen and (max-width: 500px) {

  #loading-center .glitch {

    font-size: 60px;

  }

}

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