*,
:after,
:before {
    box-sizing: border-box;
}

ol[class],
ul[class] {
    padding: 0;
}

blockquote,
body,
dd,
dl,
figcaption,
figure,
h1,
h2,
h3,
h4,
li,
p {
    margin: 0;
}

html {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    line-height: 1.5;
}

body {
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

article>*+* {
    margin-top: 3em;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
}

code,
kbd,
pre,
samp {
    font-family: Menlo,Monaco,Consolas,Courier New,monospace;
}

code,
pre {
    background-color: #fafafa;
    font-size: 75%;
}

pre {
    margin: 5em;
    padding: .75rem 1rem;
    overflow: auto;
}

code {
    color: #d05;
    padding: .2rem .4rem;
}

pre code {
    background-color: transparent;
    color: inherit;
    font-size: inherit;
    padding: 0;
}

ins,
mark {
    background-color: #ffa;
    padding: .1em .2em;
}

fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

@media (prefers-reduced-motion:reduce){
    * {
        -webkit-animation-duration: .01ms !important;
        animation-duration: .01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

:root {
    font-size: 62.5%;
}

@font-face{
    font-family: Avenir;
    font-style: normal;
    font-weight: 400;
    src: local("Avenir"), url(/fonts/AvenirLTStd-Roman.woff) format("woff");
}

@font-face{
    font-family: Avenir;
    font-style: italic;
    font-weight: 400;
    src: local("Avenir"), url(/fonts/AvenirLTStd-Oblique.woff) format("woff");
}

@font-face{
    font-family: Avenir;
    font-style: 200;
    font-weight: 400;
    src: local("Avenir"), url(/fonts/AvenirLTStd-Light.woff) format("woff");
}

@font-face{
    font-family: Avenir;
    font-style: italic;
    font-weight: 200;
    src: local("Avenir"),
    url(/fonts/AvenirLTStd-LightOblique.woff) format("woff");
}

@font-face{
    font-family: Avenir;
    font-style: normal;
    font-weight: 300;
    src: local("/fonts/Avenir LT Std 45 Book"),
    url(/fonts/AvenirLTStd-Book.woff) format("woff");
}

@font-face{
    font-family: Avenir;
    font-style: italic;
    font-weight: 300;
    src: local("Avenir LT Std 45 Book Oblique"),
    url(/fonts/AvenirLTStd-BookOblique.woff) format("woff");
}

@font-face{
    font-family: Avenir;
    font-style: normal;
    font-weight: 500;
    src: local("Avenir LT Std 65 Medium"),
    url(/fonts/AvenirLTStd-Medium.woff) format("woff");
}

@font-face{
    font-family: Avenir;
    font-style: italic;
    font-weight: 500;
    src: local("Avenir LT Std 65 Medium Oblique"),
    url(/fonts/AvenirLTStd-MediumOblique.woff) format("woff");
}

@font-face{
    font-family: Avenir;
    font-style: normal;
    font-weight: 700;
    src: local("Avenir LT Std 85 Heavy"),
    url(/fonts/AvenirLTStd-Heavy.woff) format("woff");
}

@font-face{
    font-family: Avenir;
    font-style: italic;
    font-weight: 700;
    src: local("Avenir LT Std 85 Heavy Oblique"),
    url(/fonts/AvenirLTStd-HeavyOblique.woff) format("woff");
}

@font-face{
    font-family: Avenir;
    font-style: normal;
    font-weight: 800;
    src: local("/fonts/Avenir LT Std 95 Black"),
    url(/fonts/AvenirLTStd-Black.woff) format("woff");
}

@font-face{
    font-family: Avenir;
    font-style: italic;
    font-weight: 800;
    src: local("Avenir LT Std 95 Black Oblique"),
    url(/fonts/AvenirLTStd-BlackOblique.woff) format("woff");
}

.container_out {
    width: auto;
}

.container,
.container_in {
    width: 95vw;
}

.container {
    max-width: 1400px;
}

.container_in {
    max-width: 1240px;
}

.container_out {
    max-width: 2000px;
}

.__copy {
    font-size: .88em;
    line-height: 1.2;
}

.button {
    border-style: solid;
    border-width: 1px;
    padding: .5em 2em;
    background-color: transparent;
    border-radius: 2em;
    cursor: pointer;
    color: inherit;
    -webkit-transition: color .3s,background-color .3s;
    transition: color .3s,background-color .3s;
}

.button--active,
.button:hover {
    border-color: transparent;
    color: var(--text-light);
    color: var(--alt-color, var(--text-light));
    background-color: var(--text-dark);
    background-color: var(--bg-color, var(--text-dark));
}

.button-gradient {
    position: relative;
    overflow: hidden;
    border: 1px solid;
    border-color: initial;
    padding: .5em 2em;
    background: transparent;
    border-radius: 2em;
    font-style: normal;
    font-size: inherit;
    text-decoration: none;
    outline: 0;
    cursor: pointer;
    color: inherit;
    z-index: 0;
}

.button-gradient:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    border-radius: inherit;
    background: -webkit-gradient(
      linear,
      right top, left top,
      from(#0433ff),
      to(#00fdff));
    background: linear-gradient(
      270deg,
      #0433ff,
      #00fdff);
    background: -webkit-gradient(
      linear,
      left top, left bottom,
      from(var(--gr-direction, to left)),
      color-stop(var(--color1)),
      to(var(--color2))
    );
    background: linear-gradient(
      var(--gr-direction, to left),
      var(--color1),
      var(--color2)
    );
}

.button-gradient.button-gradient--active,
.button-gradient:hover {
    color: #fff;
    border-color: transparent;
}

.button-gradient.button-gradient--active:before,
.button-gradient:hover:before {
    opacity: 1;
    z-index: -1;
}

.button__arrow {
    display: inline-block;
    width: 1.625em;
    height: .6875em;
    vertical-align: middle;
    margin-left: 1em;
    -webkit-transition: -webkit-transform .3s .1s;
    transition: -webkit-transform .3s .1s;
    transition: transform .3s .1s;
    transition: transform .3s .1s,-webkit-transform .3s .1s;
    margin-bottom: .05em;
}

.button__arrow--inverse {
    margin-left: auto;
    margin-right: 1em;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.button-gradient:hover .button__arrow,
.button:hover .button__arrow {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
}

.button-gradient:hover .button__arrow--inverse,
.button:hover .button__arrow--inverse {
    -webkit-transform: scaleX(-1) translateX(3px);
    transform: scaleX(-1) translateX(3px);
}

.logo {
    text-decoration: none;
    width: 160px;
    height: 20px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-clip-path: none;
    clip-path: none;
}

.logo>svg {
    width: 100%;
    height: 100%;
}

.logo>svg .logo__rect--left {
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s;
}

.logo>svg .logo__rect--right {
    -webkit-transition: -webkit-transform .3s .2s;
    transition: -webkit-transform .3s .2s;
    transition: transform .3s .2s;
    transition: transform .3s .2s,-webkit-transform .3s .2s;
}

.logo>svg .logo__text {
    -webkit-transition: opacity .2s,-webkit-transform .3s .2s;
    transition: opacity .2s,-webkit-transform .3s .2s;
    transition: transform .3s .2s,opacity .2s;
    transition: transform .3s .2s,opacity .2s,-webkit-transform .3s .2s;
}

.logo>svg .logo__rect--left,
.logo>svg .logo__rect--right,
.logo>svg .logo__text {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.logo>svg .logo__text {
    opacity: 1;
}

@media (min-width:64rem){
    .logo--alt {
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-clip-path: inset(0 40% 0 40%);
        clip-path: inset(0 40% 0 40%);
    }

    .logo--alt>svg .logo__rect--left {
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s,-webkit-transform .3s;
        -webkit-transform: translateX(calc(50% - 6px));
        transform: translateX(calc(50% - 6px));
    }

    .logo--alt>svg .logo__rect--right {
        -webkit-transition: -webkit-transform .3s .2s;
        transition: -webkit-transform .3s .2s;
        transition: transform .3s .2s;
        transition: transform .3s .2s,-webkit-transform .3s .2s;
        -webkit-transform: translateX(calc(-50% + 6px));
        transform: translateX(calc(-50% + 6px));
    }

    .logo--alt>svg .logo__text {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition: opacity .2s,-webkit-transform .3s .2s;
        transition: opacity .2s,-webkit-transform .3s .2s;
        transition: transform .3s .2s,opacity .2s;
        transition: transform .3s .2s,opacity .2s,-webkit-transform .3s .2s;
    }
}

.logo__text {
    font-weight: 800;
    text-transform: uppercase;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

@media (min-width:64rem){
    .text-left\@sm {
        text-align: left;
    }
}

@media (min-width:76.8rem){
    .text-left\@md {
        text-align: left;
    }
}

@media (min-width:102.4rem){
    .text-left\@lg {
        text-align: left;
    }
}

@media (min-width:128rem){
    .text-left\@xl {
        text-align: left;
    }
}

@media (min-width:64rem){
    .text-center\@sm {
        text-align: center;
    }
}

@media (min-width:76.8rem){
    .text-center\@md {
        text-align: center;
    }
}

@media (min-width:102.4rem){
    .text-center\@lg {
        text-align: center;
    }
}

@media (min-width:128rem){
    .text-center\@xl {
        text-align: center;
    }
}

@media (min-width:64rem){
    .text-right\@sm {
        text-align: right;
    }
}

@media (min-width:76.8rem){
    .text-right\@md {
        text-align: right;
    }
}

@media (min-width:102.4rem){
    .text-right\@lg {
        text-align: right;
    }
}

@media (min-width:128rem){
    .text-right\@xl {
        text-align: right;
    }
}

.italic {
    font-style: italic;
}

.font-hairline {
    font-weight: 100;
}

.font-thin {
    font-weight: 200;
}

.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-extrabold {
    font-weight: 800;
}

@media (min-width:64rem){
    .font-hairline\@sm {
        font-weight: 100;
    }

    .font-thin\@sm {
        font-weight: 200;
    }

    .font-light\@sm {
        font-weight: 300;
    }

    .font-normal\@sm {
        font-weight: 400;
    }

    .font-medium\@sm {
        font-weight: 500;
    }

    .font-semibold\@sm {
        font-weight: 600;
    }

    .font-bold\@sm {
        font-weight: 700;
    }

    .font-extrabold\@sm {
        font-weight: 800;
    }
}

@media (min-width:76.8rem){
    .font-hairline\@md {
        font-weight: 100;
    }

    .font-thin\@md {
        font-weight: 200;
    }

    .font-light\@md {
        font-weight: 300;
    }

    .font-normal\@md {
        font-weight: 400;
    }

    .font-medium\@md {
        font-weight: 500;
    }

    .font-semibold\@md {
        font-weight: 600;
    }

    .font-bold\@md {
        font-weight: 700;
    }

    .font-extrabold\@md {
        font-weight: 800;
    }
}

@media (min-width:102.4rem){
    .font-hairline\@lg {
        font-weight: 100;
    }

    .font-thin\@lg {
        font-weight: 200;
    }

    .font-light\@lg {
        font-weight: 300;
    }

    .font-normal\@lg {
        font-weight: 400;
    }

    .font-medium\@lg {
        font-weight: 500;
    }

    .font-semibold\@lg {
        font-weight: 600;
    }

    .font-bold\@lg {
        font-weight: 700;
    }

    .font-extrabold\@lg {
        font-weight: 800;
    }
}

@media (min-width:128rem){
    .font-hairline\@xl {
        font-weight: 100;
    }

    .font-thin\@xl {
        font-weight: 200;
    }

    .font-light\@xl {
        font-weight: 300;
    }

    .font-normal\@xl {
        font-weight: 400;
    }

    .font-medium\@xl {
        font-weight: 500;
    }

    .font-semibold\@xl {
        font-weight: 600;
    }

    .font-bold\@xl {
        font-weight: 700;
    }

    .font-extrabold\@xl {
        font-weight: 800;
    }
}

.no-underline {
    text-decoration: none;
}

.text-color,
.text-color\:hover:hover {
    color: #5f5f5f;
    color: var(--text-color);
}

.text-dark,
.text-dark\:hover:hover {
    color: #000;
    color: var(--text-dark);
    grid-area: 1 / 2 / 2 / 3;
}

.text-light,
.text-light\:hover:hover {
    color: #969696;
    color: var(--text-light);
}

.text-white,
.text-white\:hover:hover {
    color: #fff;
}

:root {
    --ms-bases: 1, 1.25;
    --ms-ratios: 1.5;
}

.rem-base {
    font-size: 1rem;
}

.em-base {
    font-size: 1em;
}

.rem-xs {
    font-size: .667rem;
}

.em-xs {
    font-size: .667em;
}

@media (min-width:76.8rem){
    .md\:rem-xs {
        font-size: .667rem;
    }

    .em-xs {
        font-size: .667em;
    }
}

.rem-sm {
    font-size: .833rem;
}

.em-sm {
    font-size: .833em;
}

@media (min-width:76.8rem){
    .md\:rem-sm {
        font-size: .833rem;
    }

    .em-sm {
        font-size: .833em;
    }
}

.rem-lg {
    font-size: 1.25rem;
}

.em-lg {
    font-size: 1.25em;
}

@media (min-width:76.8rem){
    .md\:rem-lg {
        font-size: 1.25rem;
    }

    .em-lg {
        font-size: 1.25em;
    }
}

.rem-xl {
    font-size: 1.5rem;
}

.em-xl {
    font-size: 1.5em;
}

@media (min-width:76.8rem){
    .md\:rem-xl {
        font-size: 1.5rem;
    }

    .em-xl {
        font-size: 1.5em;
    }
}

.rem-2xl {
    font-size: 1.875rem;
}

.em-2xl {
    font-size: 1.875em;
}

@media (min-width:76.8rem){
    .md\:rem-2xl {
        font-size: 1.875rem;
    }

    .em-2xl {
        font-size: 1.875em;
    }
}

.rem-3xl {
    font-size: 2.25rem;
}

.em-3xl {
    font-size: 2.25em;
}

@media (min-width:76.8rem){
    .md\:rem-3xl {
        font-size: 2.25rem;
    }

    .em-3xl {
        font-size: 2.25em;
    }
}

.rem-4xl {
    font-size: 2.813rem;
}

.em-4xl {
    font-size: 2.813em;
}

@media (min-width:76.8rem){
    .md\:rem-4xl {
        font-size: 2.813rem;
    }

    .em-4xl {
        font-size: 2.813em;
    }
}

.rem-5xl {
    font-size: 3.375rem;
}

.em-5xl {
    font-size: 3.375em;
}

@media (min-width:76.8rem){
    .md\:rem-5xl {
        font-size: 3.375rem;
    }

    .em-5xl {
        font-size: 3.375em;
    }
}

.line-xs {
    line-height: 1;
}

.line-sm {
    line-height: 1.2;
}

.line-md {
    line-height: 1.4;
}

.line-lg {
    line-height: 1.6;
}

.line-xl {
    line-height: 1.8;
}

.line-2xl {
    line-height: 2;
}

.pt-0p {
    padding-top: 0;
}

@media (min-width:64rem){
    .pt-0p\@sm {
        padding-top: 0;
    }
}

@media (min-width:76.8rem){
    .pt-0p\@md {
        padding-top: 0;
    }
}

@media (min-width:102.4rem){
    .pt-0p\@lg {
        padding-top: 0;
    }
}

@media (min-width:128rem){
    .pt-0p\@xl {
        padding-top: 0;
    }
}

.pt-10p {
    padding-top: 10%;
}

@media (min-width:64rem){
    .pt-10p\@sm {
        padding-top: 10%;
    }
}

@media (min-width:76.8rem){
    .pt-10p\@md {
        padding-top: 10%;
    }
}

@media (min-width:102.4rem){
    .pt-10p\@lg {
        padding-top: 10%;
    }
}

@media (min-width:128rem){
    .pt-10p\@xl {
        padding-top: 10%;
    }
}

.pt-20p {
    padding-top: 20%;
}

@media (min-width:64rem){
    .pt-20p\@sm {
        padding-top: 20%;
    }
}

@media (min-width:76.8rem){
    .pt-20p\@md {
        padding-top: 20%;
    }
}

@media (min-width:102.4rem){
    .pt-20p\@lg {
        padding-top: 20%;
    }
}

@media (min-width:128rem){
    .pt-20p\@xl {
        padding-top: 20%;
    }
}

.pt-30p {
    padding-top: 30%;
}

@media (min-width:64rem){
    .pt-30p\@sm {
        padding-top: 30%;
    }
}

@media (min-width:76.8rem){
    .pt-30p\@md {
        padding-top: 30%;
    }
}

@media (min-width:102.4rem){
    .pt-30p\@lg {
        padding-top: 30%;
    }
}

@media (min-width:128rem){
    .pt-30p\@xl {
        padding-top: 30%;
    }
}

.pt-40p {
    padding-top: 40%;
}

@media (min-width:64rem){
    .pt-40p\@sm {
        padding-top: 40%;
    }
}

@media (min-width:76.8rem){
    .pt-40p\@md {
        padding-top: 40%;
    }
}

@media (min-width:102.4rem){
    .pt-40p\@lg {
        padding-top: 40%;
    }
}

@media (min-width:128rem){
    .pt-40p\@xl {
        padding-top: 40%;
    }
}

.pt-50p {
    padding-top: 50%;
}

@media (min-width:64rem){
    .pt-50p\@sm {
        padding-top: 50%;
    }
}

@media (min-width:76.8rem){
    .pt-50p\@md {
        padding-top: 50%;
    }
}

@media (min-width:102.4rem){
    .pt-50p\@lg {
        padding-top: 50%;
    }
}

@media (min-width:128rem){
    .pt-50p\@xl {
        padding-top: 50%;
    }
}

.pr-0p {
    padding-right: 0;
}

@media (min-width:64rem){
    .pr-0p\@sm {
        padding-right: 0;
    }
}

@media (min-width:76.8rem){
    .pr-0p\@md {
        padding-right: 0;
    }
}

@media (min-width:102.4rem){
    .pr-0p\@lg {
        padding-right: 0;
    }
}

@media (min-width:128rem){
    .pr-0p\@xl {
        padding-right: 0;
    }
}

.pr-10p {
    padding-right: 10%;
}

@media (min-width:64rem){
    .pr-10p\@sm {
        padding-right: 10%;
    }
}

@media (min-width:76.8rem){
    .pr-10p\@md {
        padding-right: 10%;
    }
}

@media (min-width:102.4rem){
    .pr-10p\@lg {
        padding-right: 10%;
    }
}

@media (min-width:128rem){
    .pr-10p\@xl {
        padding-right: 10%;
    }
}

.pr-20p {
    padding-right: 20%;
}

@media (min-width:64rem){
    .pr-20p\@sm {
        padding-right: 20%;
    }
}

@media (min-width:76.8rem){
    .pr-20p\@md {
        padding-right: 20%;
    }
}

@media (min-width:102.4rem){
    .pr-20p\@lg {
        padding-right: 20%;
    }
}

@media (min-width:128rem){
    .pr-20p\@xl {
        padding-right: 20%;
    }
}

.pr-30p {
    padding-right: 30%;
}

@media (min-width:64rem){
    .pr-30p\@sm {
        padding-right: 30%;
    }
}

@media (min-width:76.8rem){
    .pr-30p\@md {
        padding-right: 30%;
    }
}

@media (min-width:102.4rem){
    .pr-30p\@lg {
        padding-right: 30%;
    }
}

@media (min-width:128rem){
    .pr-30p\@xl {
        padding-right: 30%;
    }
}

.pr-40p {
    padding-right: 40%;
}

@media (min-width:64rem){
    .pr-40p\@sm {
        padding-right: 40%;
    }
}

@media (min-width:76.8rem){
    .pr-40p\@md {
        padding-right: 40%;
    }
}

@media (min-width:102.4rem){
    .pr-40p\@lg {
        padding-right: 40%;
    }
}

@media (min-width:128rem){
    .pr-40p\@xl {
        padding-right: 40%;
    }
}

.pr-50p {
    padding-right: 50%;
}

@media (min-width:64rem){
    .pr-50p\@sm {
        padding-right: 50%;
    }
}

@media (min-width:76.8rem){
    .pr-50p\@md {
        padding-right: 50%;
    }
}

@media (min-width:102.4rem){
    .pr-50p\@lg {
        padding-right: 50%;
    }
}

@media (min-width:128rem){
    .pr-50p\@xl {
        padding-right: 50%;
    }
}

.pb-0p {
    padding-bottom: 0;
}

@media (min-width:64rem){
    .pb-0p\@sm {
        padding-bottom: 0;
    }
}

@media (min-width:76.8rem){
    .pb-0p\@md {
        padding-bottom: 0;
    }
}

@media (min-width:102.4rem){
    .pb-0p\@lg {
        padding-bottom: 0;
    }
}

@media (min-width:128rem){
    .pb-0p\@xl {
        padding-bottom: 0;
    }
}

.pb-10p {
    padding-bottom: 10%;
}

@media (min-width:64rem){
    .pb-10p\@sm {
        padding-bottom: 10%;
    }
}

@media (min-width:76.8rem){
    .pb-10p\@md {
        padding-bottom: 10%;
    }
}

@media (min-width:102.4rem){
    .pb-10p\@lg {
        padding-bottom: 10%;
    }
}

@media (min-width:128rem){
    .pb-10p\@xl {
        padding-bottom: 10%;
    }
}

.pb-20p {
    padding-bottom: 20%;
}

@media (min-width:64rem){
    .pb-20p\@sm {
        padding-bottom: 20%;
    }
}

@media (min-width:76.8rem){
    .pb-20p\@md {
        padding-bottom: 20%;
    }
}

@media (min-width:102.4rem){
    .pb-20p\@lg {
        padding-bottom: 20%;
    }
}

@media (min-width:128rem){
    .pb-20p\@xl {
        padding-bottom: 20%;
    }
}

.pb-30p {
    padding-bottom: 30%;
}

@media (min-width:64rem){
    .pb-30p\@sm {
        padding-bottom: 30%;
    }
}

@media (min-width:76.8rem){
    .pb-30p\@md {
        padding-bottom: 30%;
    }
}

@media (min-width:102.4rem){
    .pb-30p\@lg {
        padding-bottom: 30%;
    }
}

@media (min-width:128rem){
    .pb-30p\@xl {
        padding-bottom: 30%;
    }
}

.pb-40p {
    padding-bottom: 40%;
}

@media (min-width:64rem){
    .pb-40p\@sm {
        padding-bottom: 40%;
    }
}

@media (min-width:76.8rem){
    .pb-40p\@md {
        padding-bottom: 40%;
    }
}

@media (min-width:102.4rem){
    .pb-40p\@lg {
        padding-bottom: 40%;
    }
}

@media (min-width:128rem){
    .pb-40p\@xl {
        padding-bottom: 40%;
    }
}

.pb-50p {
    padding-bottom: 50%;
}

@media (min-width:64rem){
    .pb-50p\@sm {
        padding-bottom: 50%;
    }
}

@media (min-width:76.8rem){
    .pb-50p\@md {
        padding-bottom: 50%;
    }
}

@media (min-width:102.4rem){
    .pb-50p\@lg {
        padding-bottom: 50%;
    }
}

@media (min-width:128rem){
    .pb-50p\@xl {
        padding-bottom: 50%;
    }
}

.pl-0p {
    padding-left: 0;
}

@media (min-width:64rem){
    .pl-0p\@sm {
        padding-left: 0;
    }
}

@media (min-width:76.8rem){
    .pl-0p\@md {
        padding-left: 0;
    }
}

@media (min-width:102.4rem){
    .pl-0p\@lg {
        padding-left: 0;
    }
}

@media (min-width:128rem){
    .pl-0p\@xl {
        padding-left: 0;
    }
}

.pl-10p {
    padding-left: 10%;
}

@media (min-width:64rem){
    .pl-10p\@sm {
        padding-left: 10%;
    }
}

@media (min-width:76.8rem){
    .pl-10p\@md {
        padding-left: 10%;
    }
}

@media (min-width:102.4rem){
    .pl-10p\@lg {
        padding-left: 10%;
    }
}

@media (min-width:128rem){
    .pl-10p\@xl {
        padding-left: 10%;
    }
}

.pl-20p {
    padding-left: 20%;
}

@media (min-width:64rem){
    .pl-20p\@sm {
        padding-left: 20%;
    }
}

@media (min-width:76.8rem){
    .pl-20p\@md {
        padding-left: 20%;
    }
}

@media (min-width:102.4rem){
    .pl-20p\@lg {
        padding-left: 20%;
    }
}

@media (min-width:128rem){
    .pl-20p\@xl {
        padding-left: 20%;
    }
}

.pl-30p {
    padding-left: 30%;
}

@media (min-width:64rem){
    .pl-30p\@sm {
        padding-left: 30%;
    }
}

@media (min-width:76.8rem){
    .pl-30p\@md {
        padding-left: 50%;
    }
}

@media (min-width:102.4rem){
    .pl-30p\@lg {
        padding-left: 30%;
    }
}

@media (min-width:128rem){
    .pl-30p\@xl {
        padding-left: 30%;
    }
}

.pl-40p {
    padding-left: 40%;
}

@media (min-width:64rem){
    .pl-40p\@sm {
        padding-left: 40%;
    }
}

@media (min-width:76.8rem){
    .pl-40p\@md {
        padding-left: 40%;
    }
}

@media (min-width:102.4rem){
    .pl-40p\@lg {
        padding-left: 40%;
    }
}

@media (min-width:128rem){
    .pl-40p\@xl {
        padding-left: 40%;
    }
}

.pl-50p {
    padding-left: 50%;
}

@media (min-width:64rem){
    .pl-50p\@sm {
        padding-left: 50%;
    }
}

@media (min-width:76.8rem){
    .pl-50p\@md {
        padding-left: 50%;
    }
}

@media (min-width:102.4rem){
    .pl-50p\@lg {
        padding-left: 50%;
    }
}

@media (min-width:128rem){
    .pl-50p\@xl {
        padding-left: 50%;
    }
}

.pt- {
    padding-top: var(--pt-);
}

@media (min-width:64rem){
    .pt-\@sm {
        padding-top: var(--pt-);
    }
}

@media (min-width:76.8rem){
    .pt-\@md {
        padding-top: var(--pt-);
    }
}

@media (min-width:102.4rem){
    .pt-\@lg {
        padding-top: var(--pt-);
    }
}

@media (min-width:128rem){
    .pt-\@xl {
        padding-top: var(--pt-);
    }
}

.pr- {
    padding-right: var(--pr-);
}

@media (min-width:64rem){
    .pr-\@sm {
        padding-right: var(--pr-);
    }
}

@media (min-width:76.8rem){
    .pr-\@md {
        padding-right: var(--pr-);
    }
}

@media (min-width:102.4rem){
    .pr-\@lg {
        padding-right: var(--pr-);
    }
}

@media (min-width:128rem){
    .pr-\@xl {
        padding-right: var(--pr-);
    }
}

.pb- {
    padding-bottom: var(--pb-);
}

@media (min-width:64rem){
    .pb-\@sm {
        padding-bottom: var(--pb-);
    }
}

@media (min-width:76.8rem){
    .pb-\@md {
        padding-bottom: var(--pb-);
    }
}

@media (min-width:102.4rem){
    .pb-\@lg {
        padding-bottom: var(--pb-);
    }
}

@media (min-width:128rem){
    .pb-\@xl {
        padding-bottom: var(--pb-);
    }
}

.pl- {
    padding-left: var(--pl-);
}

@media (min-width:64rem){
    .pl-\@sm {
        padding-left: var(--pl-);
    }
}

@media (min-width:76.8rem){
    .pl-\@md {
        padding-left: var(--pl-);
    }
}

@media (min-width:102.4rem){
    .pl-\@lg {
        padding-left: var(--pl-);
    }
}

@media (min-width:128rem){
    .pl-\@xl {
        padding-left: var(--pl-);
    }
}

.px- {
    padding-left: var(--px-);
    padding-right: var(--px-);
}

@media (min-width:64rem){
    .px-\@sm {
        padding-left: var(--px-);
        padding-right: var(--px-);
    }
}

@media (min-width:76.8rem){
    .px-\@md {
        padding-left: var(--px-);
        padding-right: var(--px-);
    }
}

@media (min-width:102.4rem){
    .px-\@lg {
        padding-left: var(--px-);
        padding-right: var(--px-);
    }
}

@media (min-width:128rem){
    .px-\@xl {
        padding-left: var(--px-);
        padding-right: var(--px-);
    }
}

.py- {
    padding-top: var(--py-);
    padding-bottom: var(--py-);
}

@media (min-width:64rem){
    .py-\@sm {
        padding-top: var(--py-);
        padding-bottom: var(--py-);
    }
}

@media (min-width:76.8rem){
    .py-\@md {
        padding-top: var(--py-);
        padding-bottom: var(--py-);
    }
}

@media (min-width:102.4rem){
    .py-\@lg {
        padding-top: var(--py-);
        padding-bottom: var(--py-);
    }
}

@media (min-width:128rem){
    .py-\@xl {
        padding-top: var(--py-);
        padding-bottom: var(--py-);
    }
}

.pt-1 {
    padding-top: 1rem;
}

@media (min-width:64rem){
    .pt-1\@sm {
        padding-top: 1rem;
    }
}

@media (min-width:76.8rem){
    .pt-1\@md {
        padding-top: 1rem;
    }
}

@media (min-width:102.4rem){
    .pt-1\@lg {
        padding-top: 1rem;
    }
}

@media (min-width:128rem){
    .pt-1\@xl {
        padding-top: 1rem;
    }
}

.pt-2 {
    padding-top: 2rem;
}

@media (min-width:64rem){
    .pt-2\@sm {
        padding-top: 2rem;
    }
}

@media (min-width:76.8rem){
    .pt-2\@md {
        padding-top: 2rem;
    }
}

@media (min-width:102.4rem){
    .pt-2\@lg {
        padding-top: 2rem;
    }
}

@media (min-width:128rem){
    .pt-2\@xl {
        padding-top: 2rem;
    }
}

.pt-3 {
    padding-top: 3rem;
}

@media (min-width:64rem){
    .pt-3\@sm {
        padding-top: 3rem;
    }
}

@media (min-width:76.8rem){
    .pt-3\@md {
        padding-top: 3rem;
    }
}

@media (min-width:102.4rem){
    .pt-3\@lg {
        padding-top: 3rem;
    }
}

@media (min-width:128rem){
    .pt-3\@xl {
        padding-top: 3rem;
    }
}

.pt-4 {
    padding-top: 4rem;
}

@media (min-width:64rem){
    .pt-4\@sm {
        padding-top: 4rem;
    }
}

@media (min-width:76.8rem){
    .pt-4\@md {
        padding-top: 4rem;
    }
}

@media (min-width:102.4rem){
    .pt-4\@lg {
        padding-top: 4rem;
    }
}

@media (min-width:128rem){
    .pt-4\@xl {
        padding-top: 4rem;
    }
}

.pt-5 {
    padding-top: 5rem;
}

@media (min-width:64rem){
    .pt-5\@sm {
        padding-top: 5rem;
    }
}

@media (min-width:76.8rem){
    .pt-5\@md {
        padding-top: 5rem;
    }
}

@media (min-width:102.4rem){
    .pt-5\@lg {
        padding-top: 5rem;
    }
}

@media (min-width:128rem){
    .pt-5\@xl {
        padding-top: 5rem;
    }
}

.pr-1 {
    padding-right: 1rem;
}

@media (min-width:64rem){
    .pr-1\@sm {
        padding-right: 1rem;
    }
}

@media (min-width:76.8rem){
    .pr-1\@md {
        padding-right: 1rem;
    }
}

@media (min-width:102.4rem){
    .pr-1\@lg {
        padding-right: 1rem;
    }
}

@media (min-width:128rem){
    .pr-1\@xl {
        padding-right: 1rem;
    }
}

.pr-2 {
    padding-right: 2rem;
}

@media (min-width:64rem){
    .pr-2\@sm {
        padding-right: 2rem;
    }
}

@media (min-width:76.8rem){
    .pr-2\@md {
        padding-right: 2rem;
    }
}

@media (min-width:102.4rem){
    .pr-2\@lg {
        padding-right: 2rem;
    }
}

@media (min-width:128rem){
    .pr-2\@xl {
        padding-right: 2rem;
    }
}

.pr-3 {
    padding-right: 3rem;
}

@media (min-width:64rem){
    .pr-3\@sm {
        padding-right: 3rem;
    }
}

@media (min-width:76.8rem){
    .pr-3\@md {
        padding-right: 3rem;
    }
}

@media (min-width:102.4rem){
    .pr-3\@lg {
        padding-right: 3rem;
    }
}

@media (min-width:128rem){
    .pr-3\@xl {
        padding-right: 3rem;
    }
}

.pr-4 {
    padding-right: 4rem;
}

@media (min-width:64rem){
    .pr-4\@sm {
        padding-right: 4rem;
    }
}

@media (min-width:76.8rem){
    .pr-4\@md {
        padding-right: 4rem;
    }
}

@media (min-width:102.4rem){
    .pr-4\@lg {
        padding-right: 4rem;
    }
}

@media (min-width:128rem){
    .pr-4\@xl {
        padding-right: 4rem;
    }
}

.pr-5 {
    padding-right: 5rem;
}

@media (min-width:64rem){
    .pr-5\@sm {
        padding-right: 5rem;
    }
}

@media (min-width:76.8rem){
    .pr-5\@md {
        padding-right: 5rem;
    }
}

@media (min-width:102.4rem){
    .pr-5\@lg {
        padding-right: 5rem;
    }
}

@media (min-width:128rem){
    .pr-5\@xl {
        padding-right: 5rem;
    }
}

.pb-1 {
    padding-bottom: 1rem;
}

@media (min-width:64rem){
    .pb-1\@sm {
        padding-bottom: 1rem;
    }
}

@media (min-width:76.8rem){
    .pb-1\@md {
        padding-bottom: 1rem;
    }
}

@media (min-width:102.4rem){
    .pb-1\@lg {
        padding-bottom: 1rem;
    }
}

@media (min-width:128rem){
    .pb-1\@xl {
        padding-bottom: 1rem;
    }
}

.pb-2 {
    padding-bottom: 2rem;
}

@media (min-width:64rem){
    .pb-2\@sm {
        padding-bottom: 2rem;
    }
}

@media (min-width:76.8rem){
    .pb-2\@md {
        padding-bottom: 2rem;
    }
}

@media (min-width:102.4rem){
    .pb-2\@lg {
        padding-bottom: 2rem;
    }
}

@media (min-width:128rem){
    .pb-2\@xl {
        padding-bottom: 2rem;
    }
}

.pb-3 {
    padding-bottom: 3rem;
}

@media (min-width:64rem){
    .pb-3\@sm {
        padding-bottom: 3rem;
    }
}

@media (min-width:76.8rem){
    .pb-3\@md {
        padding-bottom: 3rem;
    }
}

@media (min-width:102.4rem){
    .pb-3\@lg {
        padding-bottom: 3rem;
    }
}

@media (min-width:128rem){
    .pb-3\@xl {
        padding-bottom: 3rem;
    }
}

.pb-4 {
    padding-bottom: 4rem;
}

@media (min-width:64rem){
    .pb-4\@sm {
        padding-bottom: 4rem;
    }
}

@media (min-width:76.8rem){
    .pb-4\@md {
        padding-bottom: 4rem;
    }
}

@media (min-width:102.4rem){
    .pb-4\@lg {
        padding-bottom: 4rem;
    }
}

@media (min-width:128rem){
    .pb-4\@xl {
        padding-bottom: 4rem;
    }
}

.pb-5 {
    padding-bottom: 5rem;
}

@media (min-width:64rem){
    .pb-5\@sm {
        padding-bottom: 5rem;
    }
}

@media (min-width:76.8rem){
    .pb-5\@md {
        padding-bottom: 5rem;
    }
}

@media (min-width:102.4rem){
    .pb-5\@lg {
        padding-bottom: 5rem;
    }
}

@media (min-width:128rem){
    .pb-5\@xl {
        padding-bottom: 5rem;
    }
}

.pl-1 {
    padding-left: 1rem;
}

@media (min-width:64rem){
    .pl-1\@sm {
        padding-left: 1rem;
    }
}

@media (min-width:76.8rem){
    .pl-1\@md {
        padding-left: 1rem;
    }
}

@media (min-width:102.4rem){
    .pl-1\@lg {
        padding-left: 1rem;
    }
}

@media (min-width:128rem){
    .pl-1\@xl {
        padding-left: 1rem;
    }
}

.pl-2 {
    padding-left: 2rem;
}

@media (min-width:64rem){
    .pl-2\@sm {
        padding-left: 2rem;
    }
}

@media (min-width:76.8rem){
    .pl-2\@md {
        padding-left: 2rem;
    }
}

@media (min-width:102.4rem){
    .pl-2\@lg {
        padding-left: 2rem;
    }
}

@media (min-width:128rem){
    .pl-2\@xl {
        padding-left: 2rem;
    }
}

.pl-3 {
    padding-left: 3rem;
}

@media (min-width:64rem){
    .pl-3\@sm {
        padding-left: 3rem;
    }
}

@media (min-width:76.8rem){
    .pl-3\@md {
        padding-left: 3rem;
    }
}

@media (min-width:102.4rem){
    .pl-3\@lg {
        padding-left: 3rem;
    }
}

@media (min-width:128rem){
    .pl-3\@xl {
        padding-left: 3rem;
    }
}

.pl-4 {
    padding-left: 4rem;
}

@media (min-width:64rem){
    .pl-4\@sm {
        padding-left: 4rem;
    }
}

@media (min-width:76.8rem){
    .pl-4\@md {
        padding-left: 4rem;
    }
}

@media (min-width:102.4rem){
    .pl-4\@lg {
        padding-left: 4rem;
    }
}

@media (min-width:128rem){
    .pl-4\@xl {
        padding-left: 4rem;
    }
}

.pl-5 {
    padding-left: 5rem;
}

@media (min-width:64rem){
    .pl-5\@sm {
        padding-left: 5rem;
    }
}

@media (min-width:76.8rem){
    .pl-5\@md {
        padding-left: 5rem;
    }
}

@media (min-width:102.4rem){
    .pl-5\@lg {
        padding-left: 5rem;
    }
}

@media (min-width:128rem){
    .pl-5\@xl {
        padding-left: 5rem;
    }
}

.px-1 {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width:64rem){
    .px-1\@sm {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width:76.8rem){
    .px-1\@md {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width:102.4rem){
    .px-1\@lg {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width:128rem){
    .px-1\@xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.px-2 {
    padding-left: 2rem;
    padding-right: 2rem;
}

@media (min-width:64rem){
    .px-2\@sm {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width:76.8rem){
    .px-2\@md {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width:102.4rem){
    .px-2\@lg {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width:128rem){
    .px-2\@xl {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.px-3 {
    padding-left: 3rem;
    padding-right: 3rem;
}

@media (min-width:64rem){
    .px-3\@sm {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

@media (min-width:76.8rem){
    .px-3\@md {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

@media (min-width:102.4rem){
    .px-3\@lg {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

@media (min-width:128rem){
    .px-3\@xl {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

.px-4 {
    padding-left: 4rem;
    padding-right: 4rem;
}

@media (min-width:64rem){
    .px-4\@sm {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

@media (min-width:76.8rem){
    .px-4\@md {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

@media (min-width:102.4rem){
    .px-4\@lg {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

@media (min-width:128rem){
    .px-4\@xl {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

.px-5 {
    padding-left: 5rem;
    padding-right: 5rem;
}

@media (min-width:64rem){
    .px-5\@sm {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

@media (min-width:76.8rem){
    .px-5\@md {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

@media (min-width:102.4rem){
    .px-5\@lg {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

@media (min-width:128rem){
    .px-5\@xl {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

.py-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (min-width:64rem){
    .py-1\@sm {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

@media (min-width:76.8rem){
    .py-1\@md {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

@media (min-width:102.4rem){
    .py-1\@lg {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

@media (min-width:128rem){
    .py-1\@xl {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

.py-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

@media (min-width:64rem){
    .py-2\@sm {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

@media (min-width:76.8rem){
    .py-2\@md {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

@media (min-width:102.4rem){
    .py-2\@lg {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

@media (min-width:128rem){
    .py-2\@xl {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

.py-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

@media (min-width:64rem){
    .py-3\@sm {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

@media (min-width:76.8rem){
    .py-3\@md {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

@media (min-width:102.4rem){
    .py-3\@lg {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

@media (min-width:128rem){
    .py-3\@xl {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

.py-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width:64rem){
    .py-4\@sm {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

@media (min-width:76.8rem){
    .py-4\@md {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

@media (min-width:102.4rem){
    .py-4\@lg {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

@media (min-width:128rem){
    .py-4\@xl {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

.py-5 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (min-width:64rem){
    .py-5\@sm {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

@media (min-width:76.8rem){
    .py-5\@md {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

@media (min-width:102.4rem){
    .py-5\@lg {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

@media (min-width:128rem){
    .py-5\@xl {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

.p-0 {
    padding: 0;
}

@media (min-width:64rem){
    .p-0\@sm {
        padding: 0;
    }
}

@media (min-width:76.8rem){
    .p-0\@md {
        padding: 0;
    }
}

@media (min-width:102.4rem){
    .p-0\@lg {
        padding: 0;
    }
}

@media (min-width:128rem){
    .p-0\@xl {
        padding: 0;
    }
}

.\!p-0 {
    padding: 0 !important;
}

.mt-0p {
    margin-top: 0;
}

.mt-5p {
    margin-top: 5%;
}

.mt-10p {
    margin-top: 10%;
}

.mt-15p {
    margin-top: 15%;
}

.mt-20p {
    margin-top: 15%;
}

.mt-25p {
    margin-top: 25%;
}

.mt-30p {
    margin-top: 30%;
}

.mt-35p {
    margin-top: 35%;
}

.mt-40p {
    margin-top: 40%;
}

.mt-45p {
    margin-top: 45%;
}

.mt-50p {
    margin-top: 50%;
}

.mr-0p {
    margin-right: 0;
}

.mr-5p {
    margin-right: 5%;
}

.mr-10p {
    margin-right: 10%;
}

.mr-15p {
    margin-right: 15%;
}

.mr-20p {
    margin-right: 20%;
}

.mr-25p {
    margin-right: 25%;
}

.mr-30p {
    margin-right: 30%;
}

.mr-35p {
    margin-right: 35%;
}

.mr-40p {
    margin-right: 40%;
}

.mr-45p {
    margin-right: 45%;
}

.mr-50p {
    margin-right: 50%;
}

.mb-0p {
    margin-bottom: 0;
}

.mb-5p {
    margin-bottom: 5%;
}

.mb-10p {
    margin-bottom: 10%;
}

.mb-15p {
    margin-bottom: 15%;
}

.mb-20p {
    margin-bottom: 20%;
}

.mb-25p {
    margin-bottom: 25%;
}

.mb-30p {
    margin-bottom: 30%;
}

.mb-35p {
    margin-bottom: 35%;
}

.mb-40p {
    margin-bottom: 40%;
}

.mb-45p {
    margin-bottom: 45%;
}

.mb-50p {
    margin-bottom: 50%;
}

.ml-0p {
    margin-left: 0;
}

.ml-5p {
    margin-left: 5%;
}

.ml-10p {
    margin-left: 10%;
}

.ml-15p {
    margin-left: 15%;
}

.ml-20p {
    margin-left: 20%;
}

.ml-25p {
    margin-left: 25%;
}

.ml-30p {
    margin-left: 30%;
}

.ml-35p {
    margin-left: 35%;
}

.ml-40p {
    margin-left: 40%;
}

.ml-45p {
    margin-left: 45%;
}

.ml-50p {
    margin-left: 50%;
}

@media (min-width:64rem){
    .mt-0p\@sm {
        margin-top: 0;
    }
}

@media (min-width:76.8rem){
    .mt-0p\@md {
        margin-top: 0;
    }
}

@media (min-width:102.4rem){
    .mt-0p\@lg {
        margin-top: 0;
    }
}

@media (min-width:128rem){
    .mt-0p\@xl {
        margin-top: 0;
    }
}

@media (min-width:64rem){
    .mt-5p\@sm {
        margin-top: 5%;
    }
}

@media (min-width:76.8rem){
    .mt-5p\@md {
        margin-top: 5%;
    }
}

@media (min-width:102.4rem){
    .mt-5p\@lg {
        margin-top: 5%;
    }
}

@media (min-width:128rem){
    .mt-5p\@xl {
        margin-top: 5%;
    }
}

@media (min-width:64rem){
    .mt-10p\@sm {
        margin-top: 10%;
    }
}

@media (min-width:76.8rem){
    .mt-10p\@md {
        margin-top: 10%;
    }
}

@media (min-width:102.4rem){
    .mt-10p\@lg {
        margin-top: 10%;
    }
}

@media (min-width:128rem){
    .mt-10p\@xl {
        margin-top: 10%;
    }
}

@media (min-width:64rem){
    .mt-15p\@sm {
        margin-top: 15%;
    }
}

@media (min-width:76.8rem){
    .mt-15p\@md {
        margin-top: 15%;
    }
}

@media (min-width:102.4rem){
    .mt-15p\@lg {
        margin-top: 15%;
    }
}

@media (min-width:128rem){
    .mt-15p\@xl {
        margin-top: 15%;
    }
}

@media (min-width:64rem){
    .mt-20p\@sm {
        margin-top: 20%;
    }
}

@media (min-width:76.8rem){
    .mt-20p\@md {
        margin-top: 20%;
    }
}

@media (min-width:102.4rem){
    .mt-20p\@lg {
        margin-top: 20%;
    }
}

@media (min-width:128rem){
    .mt-20p\@xl {
        margin-top: 20%;
    }
}

@media (min-width:64rem){
    .mt-25p\@sm {
        margin-top: 25%;
    }
}

@media (min-width:76.8rem){
    .mt-25p\@md {
        margin-top: 25%;
    }
}

@media (min-width:102.4rem){
    .mt-25p\@lg {
        margin-top: 25%;
    }
}

@media (min-width:128rem){
    .mt-25p\@xl {
        margin-top: 25%;
    }
}

@media (min-width:64rem){
    .mt-30p\@sm {
        margin-top: 30%;
    }
}

@media (min-width:76.8rem){
    .mt-30p\@md {
        margin-top: 30%;
    }
}

@media (min-width:102.4rem){
    .mt-30p\@lg {
        margin-top: 30%;
    }
}

@media (min-width:128rem){
    .mt-30p\@xl {
        margin-top: 30%;
    }
}

@media (min-width:64rem){
    .mt-35p\@sm {
        margin-top: 35%;
    }
}

@media (min-width:76.8rem){
    .mt-35p\@md {
        margin-top: 35%;
    }
}

@media (min-width:102.4rem){
    .mt-35p\@lg {
        margin-top: 35%;
    }
}

@media (min-width:128rem){
    .mt-35p\@xl {
        margin-top: 35%;
    }
}

@media (min-width:64rem){
    .mt-40p\@sm {
        margin-top: 40%;
    }
}

@media (min-width:76.8rem){
    .mt-40p\@md {
        margin-top: 40%;
    }
}

@media (min-width:102.4rem){
    .mt-40p\@lg {
        margin-top: 40%;
    }
}

@media (min-width:128rem){
    .mt-40p\@xl {
        margin-top: 40%;
    }
}

@media (min-width:64rem){
    .mt-45p\@sm {
        margin-top: 45%;
    }
}

@media (min-width:76.8rem){
    .mt-45p\@md {
        margin-top: 45%;
    }
}

@media (min-width:102.4rem){
    .mt-45p\@lg {
        margin-top: 45%;
    }
}

@media (min-width:128rem){
    .mt-45p\@xl {
        margin-top: 45%;
    }
}

@media (min-width:64rem){
    .mt-50p\@sm {
        margin-top: 50%;
    }
}

@media (min-width:76.8rem){
    .mt-50p\@md {
        margin-top: 50%;
    }
}

@media (min-width:102.4rem){
    .mt-50p\@lg {
        margin-top: 50%;
    }
}

@media (min-width:128rem){
    .mt-50p\@xl {
        margin-top: 50%;
    }
}

@media (min-width:64rem){
    .mr-0p\@sm {
        margin-right: 0;
    }
}

@media (min-width:76.8rem){
    .mr-0p\@md {
        margin-right: 0;
    }
}

@media (min-width:102.4rem){
    .mr-0p\@lg {
        margin-right: 0;
    }
}

@media (min-width:128rem){
    .mr-0p\@xl {
        margin-right: 0;
    }
}

@media (min-width:64rem){
    .mr-5p\@sm {
        margin-right: 5%;
    }
}

@media (min-width:76.8rem){
    .mr-5p\@md {
        margin-right: 5%;
    }
}

@media (min-width:102.4rem){
    .mr-5p\@lg {
        margin-right: 5%;
    }
}

@media (min-width:128rem){
    .mr-5p\@xl {
        margin-right: 5%;
    }
}

@media (min-width:64rem){
    .mr-10p\@sm {
        margin-right: 10%;
    }
}

@media (min-width:76.8rem){
    .mr-10p\@md {
        margin-right: 10%;
    }
}

@media (min-width:102.4rem){
    .mr-10p\@lg {
        margin-right: 10%;
    }
}

@media (min-width:128rem){
    .mr-10p\@xl {
        margin-right: 10%;
    }
}

@media (min-width:64rem){
    .mr-15p\@sm {
        margin-right: 15%;
    }
}

@media (min-width:76.8rem){
    .mr-15p\@md {
        margin-right: 15%;
    }
}

@media (min-width:102.4rem){
    .mr-15p\@lg {
        margin-right: 15%;
    }
}

@media (min-width:128rem){
    .mr-15p\@xl {
        margin-right: 15%;
    }
}

@media (min-width:64rem){
    .mr-20p\@sm {
        margin-right: 20%;
    }
}

@media (min-width:76.8rem){
    .mr-20p\@md {
        margin-right: 20%;
    }
}

@media (min-width:102.4rem){
    .mr-20p\@lg {
        margin-right: 20%;
    }
}

@media (min-width:128rem){
    .mr-20p\@xl {
        margin-right: 20%;
    }
}

@media (min-width:64rem){
    .mr-25p\@sm {
        margin-right: 25%;
    }
}

@media (min-width:76.8rem){
    .mr-25p\@md {
        margin-right: 25%;
    }
}

@media (min-width:102.4rem){
    .mr-25p\@lg {
        margin-right: 25%;
    }
}

@media (min-width:128rem){
    .mr-25p\@xl {
        margin-right: 25%;
    }
}

@media (min-width:64rem){
    .mr-30p\@sm {
        margin-right: 30%;
    }
}

@media (min-width:76.8rem){
    .mr-30p\@md {
        margin-right: 30%;
    }
}

@media (min-width:102.4rem){
    .mr-30p\@lg {
        margin-right: 30%;
    }
}

@media (min-width:128rem){
    .mr-30p\@xl {
        margin-right: 30%;
    }
}

@media (min-width:64rem){
    .mr-35p\@sm {
        margin-right: 35%;
    }
}

@media (min-width:76.8rem){
    .mr-35p\@md {
        margin-right: 35%;
    }
}

@media (min-width:102.4rem){
    .mr-35p\@lg {
        margin-right: 35%;
    }
}

@media (min-width:128rem){
    .mr-35p\@xl {
        margin-right: 35%;
    }
}

@media (min-width:64rem){
    .mr-40p\@sm {
        margin-right: 40%;
    }
}

@media (min-width:76.8rem){
    .mr-40p\@md {
        margin-right: 40%;
    }
}

@media (min-width:102.4rem){
    .mr-40p\@lg {
        margin-right: 40%;
    }
}

@media (min-width:128rem){
    .mr-40p\@xl {
        margin-right: 40%;
    }
}

@media (min-width:64rem){
    .mr-45p\@sm {
        margin-right: 45%;
    }
}

@media (min-width:76.8rem){
    .mr-45p\@md {
        margin-right: 45%;
    }
}

@media (min-width:102.4rem){
    .mr-45p\@lg {
        margin-right: 45%;
    }
}

@media (min-width:128rem){
    .mr-45p\@xl {
        margin-right: 45%;
    }
}

@media (min-width:64rem){
    .mr-50p\@sm {
        margin-right: 50%;
    }
}

@media (min-width:76.8rem){
    .mr-50p\@md {
        margin-right: 50%;
    }
}

@media (min-width:102.4rem){
    .mr-50p\@lg {
        margin-right: 50%;
    }
}

@media (min-width:128rem){
    .mr-50p\@xl {
        margin-right: 50%;
    }
}

@media (min-width:64rem){
    .mb-0p\@sm {
        margin-bottom: 0;
    }
}

@media (min-width:76.8rem){
    .mb-0p\@md {
        margin-bottom: 0;
    }
}

@media (min-width:102.4rem){
    .mb-0p\@lg {
        margin-bottom: 0;
    }
}

@media (min-width:128rem){
    .mb-0p\@xl {
        margin-bottom: 0;
    }
}

@media (min-width:64rem){
    .mb-5p\@sm {
        margin-bottom: 5%;
    }
}

@media (min-width:76.8rem){
    .mb-5p\@md {
        margin-bottom: 5%;
    }
}

@media (min-width:102.4rem){
    .mb-5p\@lg {
        margin-bottom: 5%;
    }
}

@media (min-width:128rem){
    .mb-5p\@xl {
        margin-bottom: 5%;
    }
}

@media (min-width:64rem){
    .mb-10p\@sm {
        margin-bottom: 10%;
    }
}

@media (min-width:76.8rem){
    .mb-10p\@md {
        margin-bottom: 10%;
    }
}

@media (min-width:102.4rem){
    .mb-10p\@lg {
        margin-bottom: 10%;
    }
}

@media (min-width:128rem){
    .mb-10p\@xl {
        margin-bottom: 10%;
    }
}

@media (min-width:64rem){
    .mb-15p\@sm {
        margin-bottom: 15%;
    }
}

@media (min-width:76.8rem){
    .mb-15p\@md {
        margin-bottom: 15%;
    }
}

@media (min-width:102.4rem){
    .mb-15p\@lg {
        margin-bottom: 15%;
    }
}

@media (min-width:128rem){
    .mb-15p\@xl {
        margin-bottom: 15%;
    }
}

@media (min-width:64rem){
    .mb-20p\@sm {
        margin-bottom: 20%;
    }
}

@media (min-width:76.8rem){
    .mb-20p\@md {
        margin-bottom: 20%;
    }
}

@media (min-width:102.4rem){
    .mb-20p\@lg {
        margin-bottom: 20%;
    }
}

@media (min-width:128rem){
    .mb-20p\@xl {
        margin-bottom: 20%;
    }
}

@media (min-width:64rem){
    .mb-25p\@sm {
        margin-bottom: 25%;
    }
}

@media (min-width:76.8rem){
    .mb-25p\@md {
        margin-bottom: 25%;
    }
}

@media (min-width:102.4rem){
    .mb-25p\@lg {
        margin-bottom: 25%;
    }
}

@media (min-width:128rem){
    .mb-25p\@xl {
        margin-bottom: 25%;
    }
}

@media (min-width:64rem){
    .mb-30p\@sm {
        margin-bottom: 30%;
    }
}

@media (min-width:76.8rem){
    .mb-30p\@md {
        margin-bottom: 30%;
    }
}

@media (min-width:102.4rem){
    .mb-30p\@lg {
        margin-bottom: 30%;
    }
}

@media (min-width:128rem){
    .mb-30p\@xl {
        margin-bottom: 30%;
    }
}

@media (min-width:64rem){
    .mb-35p\@sm {
        margin-bottom: 35%;
    }
}

@media (min-width:76.8rem){
    .mb-35p\@md {
        margin-bottom: 35%;
    }
}

@media (min-width:102.4rem){
    .mb-35p\@lg {
        margin-bottom: 35%;
    }
}

@media (min-width:128rem){
    .mb-35p\@xl {
        margin-bottom: 35%;
    }
}

@media (min-width:64rem){
    .mb-40p\@sm {
        margin-bottom: 40%;
    }
}

@media (min-width:76.8rem){
    .mb-40p\@md {
        margin-bottom: 40%;
    }
}

@media (min-width:102.4rem){
    .mb-40p\@lg {
        margin-bottom: 40%;
    }
}

@media (min-width:128rem){
    .mb-40p\@xl {
        margin-bottom: 40%;
    }
}

@media (min-width:64rem){
    .mb-45p\@sm {
        margin-bottom: 45%;
    }
}

@media (min-width:76.8rem){
    .mb-45p\@md {
        margin-bottom: 45%;
    }
}

@media (min-width:102.4rem){
    .mb-45p\@lg {
        margin-bottom: 45%;
    }
}

@media (min-width:128rem){
    .mb-45p\@xl {
        margin-bottom: 45%;
    }
}

@media (min-width:64rem){
    .mb-50p\@sm {
        margin-bottom: 50%;
    }
}

@media (min-width:76.8rem){
    .mb-50p\@md {
        margin-bottom: 50%;
    }
}

@media (min-width:102.4rem){
    .mb-50p\@lg {
        margin-bottom: 50%;
    }
}

@media (min-width:128rem){
    .mb-50p\@xl {
        margin-bottom: 50%;
    }
}

@media (min-width:64rem){
    .ml-0p\@sm {
        margin-left: 0;
    }
}

@media (min-width:76.8rem){
    .ml-0p\@md {
        margin-left: 0;
    }
}

@media (min-width:102.4rem){
    .ml-0p\@lg {
        margin-left: 0;
    }
}

@media (min-width:128rem){
    .ml-0p\@xl {
        margin-left: 0;
    }
}

@media (min-width:64rem){
    .ml-5p\@sm {
        margin-left: 5%;
    }
}

@media (min-width:76.8rem){
    .ml-5p\@md {
        margin-left: 5%;
    }
}

@media (min-width:102.4rem){
    .ml-5p\@lg {
        margin-left: 5%;
    }
}

@media (min-width:128rem){
    .ml-5p\@xl {
        margin-left: 5%;
    }
}

@media (min-width:64rem){
    .ml-10p\@sm {
        margin-left: 10%;
    }
}

@media (min-width:76.8rem){
    .ml-10p\@md {
        margin-left: 10%;
    }
}

@media (min-width:102.4rem){
    .ml-10p\@lg {
        margin-left: 10%;
    }
}

@media (min-width:128rem){
    .ml-10p\@xl {
        margin-left: 10%;
    }
}

@media (min-width:64rem){
    .ml-15p\@sm {
        margin-left: 15%;
    }
}

@media (min-width:76.8rem){
    .ml-15p\@md {
        margin-left: 15%;
    }
}

@media (min-width:102.4rem){
    .ml-15p\@lg {
        margin-left: 15%;
    }
}

@media (min-width:128rem){
    .ml-15p\@xl {
        margin-left: 15%;
    }
}

@media (min-width:64rem){
    .ml-20p\@sm {
        margin-left: 20%;
    }
}

@media (min-width:76.8rem){
    .ml-20p\@md {
        margin-left: 20%;
    }
}

@media (min-width:102.4rem){
    .ml-20p\@lg {
        margin-left: 20%;
    }
}

@media (min-width:128rem){
    .ml-20p\@xl {
        margin-left: 20%;
    }
}

@media (min-width:64rem){
    .ml-25p\@sm {
        margin-left: 25%;
    }
}

@media (min-width:76.8rem){
    .ml-25p\@md {
        margin-left: 25%;
    }
}

@media (min-width:102.4rem){
    .ml-25p\@lg {
        margin-left: 25%;
    }
}

@media (min-width:128rem){
    .ml-25p\@xl {
        margin-left: 25%;
    }
}

@media (min-width:64rem){
    .ml-30p\@sm {
        margin-left: 30%;
    }
}

@media (min-width:76.8rem){
    .ml-30p\@md {
        margin-left: 30%;
    }
}

@media (min-width:102.4rem){
    .ml-30p\@lg {
        margin-left: 30%;
    }
}

@media (min-width:128rem){
    .ml-30p\@xl {
        margin-left: 30%;
    }
}

@media (min-width:64rem){
    .ml-35p\@sm {
        margin-left: 35%;
    }
}

@media (min-width:76.8rem){
    .ml-35p\@md {
        margin-left: 35%;
    }
}

@media (min-width:102.4rem){
    .ml-35p\@lg {
        margin-left: 35%;
    }
}

@media (min-width:128rem){
    .ml-35p\@xl {
        margin-left: 35%;
    }
}

@media (min-width:64rem){
    .ml-40p\@sm {
        margin-left: 40%;
    }
}

@media (min-width:76.8rem){
    .ml-40p\@md {
        margin-left: 40%;
    }
}

@media (min-width:102.4rem){
    .ml-40p\@lg {
        margin-left: 40%;
    }
}

@media (min-width:128rem){
    .ml-40p\@xl {
        margin-left: 40%;
    }
}

@media (min-width:64rem){
    .ml-45p\@sm {
        margin-left: 45%;
    }
}

@media (min-width:76.8rem){
    .ml-45p\@md {
        margin-left: 45%;
    }
}

@media (min-width:102.4rem){
    .ml-45p\@lg {
        margin-left: 45%;
    }
}

@media (min-width:128rem){
    .ml-45p\@xl {
        margin-left: 45%;
    }
}

@media (min-width:64rem){
    .ml-50p\@sm {
        margin-left: 50%;
    }
}

@media (min-width:76.8rem){
    .ml-50p\@md {
        margin-left: 50%;
    }
}

@media (min-width:102.4rem){
    .ml-50p\@lg {
        margin-left: 50%;
    }
}

@media (min-width:128rem){
    .ml-50p\@xl {
        margin-left: 50%;
    }
}

.mt- {
    margin-top: var(--mt-);
}

.mr- {
    margin-right: var(--mr-);
}

.mb- {
    margin-bottom: var(--mb-);
}

.ml- {
    margin-left: var(--ml-);
}

@media (min-width:64rem){
    .mt- {
        margin-top: var(--mt-sm-);
    }
}

@media (min-width:76.8rem){
    .mt- {
        margin-top: var(--mt-md-);
    }
}

@media (min-width:102.4rem){
    .mt- {
        margin-top: var(--mt-lg-);
    }
}

@media (min-width:128rem){
    .mt- {
        margin-top: var(--mt-xl-);
    }
}

@media (min-width:64rem){
    .mr- {
        margin-right: var(--mr-sm-);
    }
}

@media (min-width:76.8rem){
    .mr- {
        margin-right: var(--mr-md-);
    }
}

@media (min-width:102.4rem){
    .mr- {
        margin-right: var(--mr-lg-);
    }
}

@media (min-width:128rem){
    .mr- {
        margin-right: var(--mr-xl-);
    }
}

@media (min-width:64rem){
    .mb- {
        margin-bottom: var(--mb-sm-);
    }
}

@media (min-width:76.8rem){
    .mb- {
        margin-bottom: var(--mb-md-);
    }
}

@media (min-width:102.4rem){
    .mb- {
        margin-bottom: var(--mb-lg-);
    }
}

@media (min-width:128rem){
    .mb- {
        margin-bottom: var(--mb-xl-);
    }
}

@media (min-width:64rem){
    .ml- {
        margin-left: var(--ml-sm-);
    }
}

@media (min-width:76.8rem){
    .ml- {
        margin-left: var(--ml-md-);
    }
}

@media (min-width:102.4rem){
    .ml- {
        margin-left: var(--ml-lg-);
    }
}

@media (min-width:128rem){
    .ml- {
        margin-left: var(--ml-xl-);
    }
}

.mx- {
    margin-left: var(--px-);
    margin-right: var(--px-);
}

@media (min-width:64rem){
    .mx- {
        margin-left: var(--mx-sm-);
        margin-right: var(--mx-sm-);
    }
}

@media (min-width:76.8rem){
    .mx- {
        margin-left: var(--mx-md-);
        margin-right: var(--mx-md-);
    }
}

@media (min-width:102.4rem){
    .mx- {
        margin-left: var(--mx-lg-);
        margin-right: var(--mx-lg-);
    }
}

@media (min-width:128rem){
    .mx- {
        margin-left: var(--mx-xl-);
        margin-right: var(--mx-xl-);
    }
}

.my- {
    margin-top: var(--my-);
    margin-bottom: var(--my-);
}

@media (min-width:64rem){
    .my- {
        margin-top: var(--my-sm-);
        margin-bottom: var(--my-sm-);
    }
}

@media (min-width:76.8rem){
    .my- {
        margin-top: var(--my-md-);
        margin-bottom: var(--my-md-);
    }
}

@media (min-width:102.4rem){
    .my- {
        margin-top: var(--my-lg-);
        margin-bottom: var(--my-lg-);
    }
}

@media (min-width:128rem){
    .my- {
        margin-top: var(--my-xl-);
        margin-bottom: var(--my-xl-);
    }
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.mt-3 {
    margin-top: 3rem;
}

.mt-4 {
    margin-top: 4rem;
}

.mt-5 {
    margin-top: 5rem;
}

.mr-0 {
    margin-right: 0;
}

.mr-1 {
    margin-right: 1rem;
}

.mr-2 {
    margin-right: 2rem;
}

.mr-3 {
    margin-right: 3rem;
}

.mr-4 {
    margin-right: 4rem;
}

.mr-5 {
    margin-right: 5rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mb-3 {
    margin-bottom: 3rem;
}

.mb-4 {
    margin-bottom: 4rem;
}

.mb-5 {
    margin-bottom: 5rem;
}

.ml-0 {
    margin-left: 0;
}

.ml-1 {
    margin-left: 1rem;
}

.ml-2 {
    margin-left: 2rem;
}

.ml-3 {
    margin-left: 3rem;
}

.ml-4 {
    margin-left: 4rem;
}

.ml-5 {
    margin-left: 5rem;
}

@media (min-width:64rem){
    .mt-0\@sm {
        margin-top: 0;
    }
}

@media (min-width:76.8rem){
    .mt-0\@md {
        margin-top: 0;
    }
}

@media (min-width:102.4rem){
    .mt-0\@lg {
        margin-top: 0;
    }
}

@media (min-width:128rem){
    .mt-0\@xl {
        margin-top: 0;
    }
}

@media (min-width:64rem){
    .mt-1\@sm {
        margin-top: 1rem;
    }
}

@media (min-width:76.8rem){
    .mt-1\@md {
        margin-top: 1rem;
    }
}

@media (min-width:102.4rem){
    .mt-1\@lg {
        margin-top: 1rem;
    }
}

@media (min-width:128rem){
    .mt-1\@xl {
        margin-top: 1rem;
    }
}

@media (min-width:64rem){
    .mt-2\@sm {
        margin-top: 2rem;
    }
}

@media (min-width:76.8rem){
    .mt-2\@md {
        margin-top: 2rem;
    }
}

@media (min-width:102.4rem){
    .mt-2\@lg {
        margin-top: 2rem;
    }
}

@media (min-width:128rem){
    .mt-2\@xl {
        margin-top: 2rem;
    }
}

@media (min-width:64rem){
    .mt-3\@sm {
        margin-top: 3rem;
    }
}

@media (min-width:76.8rem){
    .mt-3\@md {
        margin-top: 3rem;
    }
}

@media (min-width:102.4rem){
    .mt-3\@lg {
        margin-top: 3rem;
    }
}

@media (min-width:128rem){
    .mt-3\@xl {
        margin-top: 3rem;
    }
}

@media (min-width:64rem){
    .mt-4\@sm {
        margin-top: 4rem;
    }
}

@media (min-width:76.8rem){
    .mt-4\@md {
        margin-top: 4rem;
    }
}

@media (min-width:102.4rem){
    .mt-4\@lg {
        margin-top: 4rem;
    }
}

@media (min-width:128rem){
    .mt-4\@xl {
        margin-top: 4rem;
    }
}

@media (min-width:64rem){
    .mt-5\@sm {
        margin-top: 5rem;
    }
}

@media (min-width:76.8rem){
    .mt-5\@md {
        margin-top: 5rem;
    }
}

@media (min-width:102.4rem){
    .mt-5\@lg {
        margin-top: 5rem;
    }
}

@media (min-width:128rem){
    .mt-5\@xl {
        margin-top: 5rem;
    }
}

@media (min-width:64rem){
    .mr-0\@sm {
        margin-right: 0;
    }
}

@media (min-width:76.8rem){
    .mr-0\@md {
        margin-right: 0;
    }
}

@media (min-width:102.4rem){
    .mr-0\@lg {
        margin-right: 0;
    }
}

@media (min-width:128rem){
    .mr-0\@xl {
        margin-right: 0;
    }
}

@media (min-width:64rem){
    .mr-1\@sm {
        margin-right: 1rem;
    }
}

@media (min-width:76.8rem){
    .mr-1\@md {
        margin-right: 1rem;
    }
}

@media (min-width:102.4rem){
    .mr-1\@lg {
        margin-right: 1rem;
    }
}

@media (min-width:128rem){
    .mr-1\@xl {
        margin-right: 1rem;
    }
}

@media (min-width:64rem){
    .mr-2\@sm {
        margin-right: 2rem;
    }
}

@media (min-width:76.8rem){
    .mr-2\@md {
        margin-right: 2rem;
    }
}

@media (min-width:102.4rem){
    .mr-2\@lg {
        margin-right: 2rem;
    }
}

@media (min-width:128rem){
    .mr-2\@xl {
        margin-right: 2rem;
    }
}

@media (min-width:64rem){
    .mr-3\@sm {
        margin-right: 3rem;
    }
}

@media (min-width:76.8rem){
    .mr-3\@md {
        margin-right: 3rem;
    }
}

@media (min-width:102.4rem){
    .mr-3\@lg {
        margin-right: 3rem;
    }
}

@media (min-width:128rem){
    .mr-3\@xl {
        margin-right: 3rem;
    }
}

@media (min-width:64rem){
    .mr-4\@sm {
        margin-right: 4rem;
    }
}

@media (min-width:76.8rem){
    .mr-4\@md {
        margin-right: 4rem;
    }
}

@media (min-width:102.4rem){
    .mr-4\@lg {
        margin-right: 4rem;
    }
}

@media (min-width:128rem){
    .mr-4\@xl {
        margin-right: 4rem;
    }
}

@media (min-width:64rem){
    .mr-5\@sm {
        margin-right: 5rem;
    }
}

@media (min-width:76.8rem){
    .mr-5\@md {
        margin-right: 5rem;
    }
}

@media (min-width:102.4rem){
    .mr-5\@lg {
        margin-right: 5rem;
    }
}

@media (min-width:128rem){
    .mr-5\@xl {
        margin-right: 5rem;
    }
}

@media (min-width:64rem){
    .mb-0\@sm {
        margin-bottom: 0;
    }
}

@media (min-width:76.8rem){
    .mb-0\@md {
        margin-bottom: 0;
    }
}

@media (min-width:102.4rem){
    .mb-0\@lg {
        margin-bottom: 0;
    }
}

@media (min-width:128rem){
    .mb-0\@xl {
        margin-bottom: 0;
    }
}

@media (min-width:64rem){
    .mb-1\@sm {
        margin-bottom: 1rem;
    }
}

@media (min-width:76.8rem){
    .mb-1\@md {
        margin-bottom: 1rem;
    }
}

@media (min-width:102.4rem){
    .mb-1\@lg {
        margin-bottom: 1rem;
    }
}

@media (min-width:128rem){
    .mb-1\@xl {
        margin-bottom: 1rem;
    }
}

@media (min-width:64rem){
    .mb-2\@sm {
        margin-bottom: 2rem;
    }
}

@media (min-width:76.8rem){
    .mb-2\@md {
        margin-bottom: 2rem;
    }
}

@media (min-width:102.4rem){
    .mb-2\@lg {
        margin-bottom: 2rem;
    }
}

@media (min-width:128rem){
    .mb-2\@xl {
        margin-bottom: 2rem;
    }
}

@media (min-width:64rem){
    .mb-3\@sm {
        margin-bottom: 3rem;
    }
}

@media (min-width:76.8rem){
    .mb-3\@md {
        margin-bottom: 3rem;
    }
}

@media (min-width:102.4rem){
    .mb-3\@lg {
        margin-bottom: 3rem;
    }
}

@media (min-width:128rem){
    .mb-3\@xl {
        margin-bottom: 3rem;
    }
}

@media (min-width:64rem){
    .mb-4\@sm {
        margin-bottom: 4rem;
    }
}

@media (min-width:76.8rem){
    .mb-4\@md {
        margin-bottom: 4rem;
    }
}

@media (min-width:102.4rem){
    .mb-4\@lg {
        margin-bottom: 4rem;
    }
}

@media (min-width:128rem){
    .mb-4\@xl {
        margin-bottom: 4rem;
    }
}

@media (min-width:64rem){
    .mb-5\@sm {
        margin-bottom: 5rem;
    }
}

@media (min-width:76.8rem){
    .mb-5\@md {
        margin-bottom: 5rem;
    }
}

@media (min-width:102.4rem){
    .mb-5\@lg {
        margin-bottom: 5rem;
    }
}

@media (min-width:128rem){
    .mb-5\@xl {
        margin-bottom: 5rem;
    }
}

@media (min-width:64rem){
    .ml-0\@sm {
        margin-left: 0;
    }
}

@media (min-width:76.8rem){
    .ml-0\@md {
        margin-left: 0;
    }
}

@media (min-width:102.4rem){
    .ml-0\@lg {
        margin-left: 0;
    }
}

@media (min-width:128rem){
    .ml-0\@xl {
        margin-left: 0;
    }
}

@media (min-width:64rem){
    .ml-1\@sm {
        margin-left: 1rem;
    }
}

@media (min-width:76.8rem){
    .ml-1\@md {
        margin-left: 1rem;
    }
}

@media (min-width:102.4rem){
    .ml-1\@lg {
        margin-left: 1rem;
    }
}

@media (min-width:128rem){
    .ml-1\@xl {
        margin-left: 1rem;
    }
}

@media (min-width:64rem){
    .ml-2\@sm {
        margin-left: 2rem;
    }
}

@media (min-width:76.8rem){
    .ml-2\@md {
        margin-left: 2rem;
    }
}

@media (min-width:102.4rem){
    .ml-2\@lg {
        margin-left: 2rem;
    }
}

@media (min-width:128rem){
    .ml-2\@xl {
        margin-left: 2rem;
    }
}

@media (min-width:64rem){
    .ml-3\@sm {
        margin-left: 3rem;
    }
}

@media (min-width:76.8rem){
    .ml-3\@md {
        margin-left: 3rem;
    }
}

@media (min-width:102.4rem){
    .ml-3\@lg {
        margin-left: 3rem;
    }
}

@media (min-width:128rem){
    .ml-3\@xl {
        margin-left: 3rem;
    }
}

@media (min-width:64rem){
    .ml-4\@sm {
        margin-left: 4rem;
    }
}

@media (min-width:76.8rem){
    .ml-4\@md {
        margin-left: 4rem;
    }
}

@media (min-width:102.4rem){
    .ml-4\@lg {
        margin-left: 4rem;
    }
}

@media (min-width:128rem){
    .ml-4\@xl {
        margin-left: 4rem;
    }
}

@media (min-width:64rem){
    .ml-5\@sm {
        margin-left: 5rem;
    }
}

@media (min-width:76.8rem){
    .ml-5\@md {
        margin-left: 5rem;
    }
}

@media (min-width:102.4rem){
    .ml-5\@lg {
        margin-left: 5rem;
    }
}

@media (min-width:128rem){
    .ml-5\@xl {
        margin-left: 5rem;
    }
}

.mx-0 {
    margin-left: 0;
    margin-right: 0;
}

.mx-1 {
    margin-left: 1rem;
    margin-right: 1rem;
}

.mx-2 {
    margin-left: 2rem;
    margin-right: 2rem;
}

.mx-3 {
    margin-left: 3rem;
    margin-right: 3rem;
}

.mx-4 {
    margin-left: 4rem;
    margin-right: 4rem;
}

.mx-5 {
    margin-left: 5rem;
    margin-right: 5rem;
}

@media (min-width:64rem){
    .mx-0\@sm {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (min-width:76.8rem){
    .mx-0\@md {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (min-width:102.4rem){
    .mx-0\@lg {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (min-width:128rem){
    .mx-0\@xl {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (min-width:64rem){
    .mx-1\@sm {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

@media (min-width:76.8rem){
    .mx-1\@md {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

@media (min-width:102.4rem){
    .mx-1\@lg {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

@media (min-width:128rem){
    .mx-1\@xl {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

@media (min-width:64rem){
    .mx-2\@sm {
        margin-left: 2rem;
        margin-right: 2rem;
    }
}

@media (min-width:76.8rem){
    .mx-2\@md {
        margin-left: 2rem;
        margin-right: 2rem;
    }
}

@media (min-width:102.4rem){
    .mx-2\@lg {
        margin-left: 2rem;
        margin-right: 2rem;
    }
}

@media (min-width:128rem){
    .mx-2\@xl {
        margin-left: 2rem;
        margin-right: 2rem;
    }
}

@media (min-width:64rem){
    .mx-3\@sm {
        margin-left: 3rem;
        margin-right: 3rem;
    }
}

@media (min-width:76.8rem){
    .mx-3\@md {
        margin-left: 3rem;
        margin-right: 3rem;
    }
}

@media (min-width:102.4rem){
    .mx-3\@lg {
        margin-left: 3rem;
        margin-right: 3rem;
    }
}

@media (min-width:128rem){
    .mx-3\@xl {
        margin-left: 3rem;
        margin-right: 3rem;
    }
}

@media (min-width:64rem){
    .mx-4\@sm {
        margin-left: 4rem;
        margin-right: 4rem;
    }
}

@media (min-width:76.8rem){
    .mx-4\@md {
        margin-left: 4rem;
        margin-right: 4rem;
    }
}

@media (min-width:102.4rem){
    .mx-4\@lg {
        margin-left: 4rem;
        margin-right: 4rem;
    }
}

@media (min-width:128rem){
    .mx-4\@xl {
        margin-left: 4rem;
        margin-right: 4rem;
    }
}

@media (min-width:64rem){
    .mx-5\@sm {
        margin-left: 5rem;
        margin-right: 5rem;
    }
}

@media (min-width:76.8rem){
    .mx-5\@md {
        margin-left: 5rem;
        margin-right: 5rem;
    }
}

@media (min-width:102.4rem){
    .mx-5\@lg {
        margin-left: 5rem;
        margin-right: 5rem;
    }
}

@media (min-width:128rem){
    .mx-5\@xl {
        margin-left: 5rem;
        margin-right: 5rem;
    }
}

.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.my-1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.my-2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.my-3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.my-4 {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.my-5 {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

@media (min-width:64rem){
    .my-0\@sm {
        margin-top: 0;
        margin-bottom: 0;
    }
}

@media (min-width:76.8rem){
    .my-0\@md {
        margin-top: 0;
        margin-bottom: 0;
    }
}

@media (min-width:102.4rem){
    .my-0\@lg {
        margin-top: 0;
        margin-bottom: 0;
    }
}

@media (min-width:128rem){
    .my-0\@xl {
        margin-top: 0;
        margin-bottom: 0;
    }
}

@media (min-width:64rem){
    .my-1\@sm {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}

@media (min-width:76.8rem){
    .my-1\@md {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}

@media (min-width:102.4rem){
    .my-1\@lg {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}

@media (min-width:128rem){
    .my-1\@xl {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}

@media (min-width:64rem){
    .my-2\@sm {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

@media (min-width:76.8rem){
    .my-2\@md {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

@media (min-width:102.4rem){
    .my-2\@lg {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

@media (min-width:128rem){
    .my-2\@xl {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

@media (min-width:64rem){
    .my-3\@sm {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
}

@media (min-width:76.8rem){
    .my-3\@md {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
}

@media (min-width:102.4rem){
    .my-3\@lg {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
}

@media (min-width:128rem){
    .my-3\@xl {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
}

@media (min-width:64rem){
    .my-4\@sm {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
}

@media (min-width:76.8rem){
    .my-4\@md {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
}

@media (min-width:102.4rem){
    .my-4\@lg {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
}

@media (min-width:128rem){
    .my-4\@xl {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
}

@media (min-width:64rem){
    .my-5\@sm {
        margin-top: 5rem;
        margin-bottom: 5rem;
    }
}

@media (min-width:76.8rem){
    .my-5\@md {
        margin-top: 5rem;
        margin-bottom: 5rem;
    }
}

@media (min-width:102.4rem){
    .my-5\@lg {
        margin-top: 5rem;
        margin-bottom: 5rem;
    }
}

@media (min-width:128rem){
    .my-5\@xl {
        margin-top: 5rem;
        margin-bottom: 5rem;
    }
}

.m-0 {
    margin: 0;
}

@media (min-width:64rem){
    .m-0\@sm {
        margin: 0;
    }
}

@media (min-width:76.8rem){
    .m-0\@md {
        margin: 0;
    }
}

@media (min-width:102.4rem){
    .m-0\@lg {
        margin: 0;
    }
}

@media (min-width:128rem){
    .m-0\@xl {
        margin: 0;
    }
}

.\!m-0 {
    margin: 0 !important;
}

.ml-auto {
    margin-left: auto;
}

@media (min-width:64rem){
    .ml-auto\@sm {
        margin-left: auto;
    }
}

@media (min-width:76.8rem){
    .ml-auto\@md {
        margin-left: auto;
    }
}

@media (min-width:102.4rem){
    .ml-auto\@lg {
        margin-left: auto;
    }
}

@media (min-width:128rem){
    .ml-auto\@xl {
        margin-left: auto;
    }
}

.mr-auto {
    margin-right: auto;
}

@media (min-width:64rem){
    .mr-auto\@sm {
        margin-right: auto;
    }
}

@media (min-width:76.8rem){
    .mr-auto\@md {
        margin-right: auto;
    }
}

@media (min-width:102.4rem){
    .mr-auto\@lg {
        margin-right: auto;
    }
}

@media (min-width:128rem){
    .mr-auto\@xl {
        margin-right: auto;
    }
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

@media (min-width:64rem){
    .mx-auto\@sm {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width:76.8rem){
    .mx-auto\@md {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width:102.4rem){
    .mx-auto\@lg {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width:128rem){
    .mx-auto\@xl {
        margin-left: auto;
        margin-right: auto;
    }
}

.block {
    display: block;
}

@media (min-width:64rem){
    .block\@sm {
        display: block;
    }
}

@media (min-width:76.8rem){
    .block\@md {
        display: block;
    }
}

@media (min-width:102.4rem){
    .block\@lg {
        display: block;
    }
}

@media (min-width:128rem){
    .block\@xl {
        display: block;
    }
}

.\!block {
    display: block !important;
}

.inline-block {
    display: inline-block;
}

@media (min-width:64rem){
    .inline-block\@sm {
        display: inline-block;
    }
}

@media (min-width:76.8rem){
    .inline-block\@md {
        display: inline-block;
    }
}

@media (min-width:102.4rem){
    .inline-block\@lg {
        display: inline-block;
    }
}

@media (min-width:128rem){
    .inline-block\@xl {
        display: inline-block;
    }
}

.\!inline-block {
    display: inline-block !important;
}

.none {
    display: none;
}

@media (min-width:64rem){
    .none\@sm {
        display: none;
    }
}

@media (min-width:76.8rem){
    .none\@md {
        display: none;
    }
}

@media (min-width:102.4rem){
    .none\@lg {
        display: none;
    }
}

@media (min-width:128rem){
    .none\@xl {
        display: none;
    }
}

.\!none {
    display: none !important;
}

.relative {
    position: relative;
}

.\!relative {
    position: relative !important;
}

.do\:relative .if\:relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.\!absolute {
    position: absolute !important;
}

.do\:absolute .if\:absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.\!fixed {
    position: fixed !important;
}

.do\:fixed .if\:fixed {
    position: fixed;
}

.sticky {
    position: -webkit-sticky;
    position: sticky;
}

.\!sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
}

.do\:sticky .if\:sticky {
    position: -webkit-sticky;
    position: sticky;
}

.static {
    position: static;
}

.\!static {
    position: static !important;
}

.do\:static .if\:static {
    position: static;
}

@media (min-width:64rem){
    .relative\@sm {
        position: relative;
    }
}

@media (min-width:76.8rem){
    .relative\@md {
        position: relative;
    }
}

@media (min-width:102.4rem){
    .relative\@lg {
        position: relative;
    }
}

@media (min-width:128rem){
    .relative\@xl {
        position: relative;
    }
}

@media (min-width:64rem){
    .absolute\@sm {
        position: absolute;
    }
}

@media (min-width:76.8rem){
    .absolute\@md {
        position: absolute;
    }
}

@media (min-width:102.4rem){
    .absolute\@lg {
        position: absolute;
    }
}

@media (min-width:128rem){
    .absolute\@xl {
        position: absolute;
    }
}

@media (min-width:64rem){
    .fixed\@sm {
        position: fixed;
    }
}

@media (min-width:76.8rem){
    .fixed\@md {
        position: fixed;
    }
}

@media (min-width:102.4rem){
    .fixed\@lg {
        position: fixed;
    }
}

@media (min-width:128rem){
    .fixed\@xl {
        position: fixed;
    }
}

@media (min-width:64rem){
    .sticky\@sm {
        position: -webkit-sticky;
        position: sticky;
    }
}

@media (min-width:76.8rem){
    .sticky\@md {
        position: -webkit-sticky;
        position: sticky;
    }
}

@media (min-width:102.4rem){
    .sticky\@lg {
        position: -webkit-sticky;
        position: sticky;
    }
}

@media (min-width:128rem){
    .sticky\@xl {
        position: -webkit-sticky;
        position: sticky;
    }
}

@media (min-width:64rem){
    .static\@sm {
        position: static;
    }
}

@media (min-width:76.8rem){
    .static\@md {
        position: static;
    }
}

@media (min-width:102.4rem){
    .static\@lg {
        position: static;
    }
}

@media (min-width:128rem){
    .static\@xl {
        position: static;
    }
}

.place-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.t-0 {
    top: 0;
}

.r-0 {
    right: 0;
}

.b-0 {
    bottom: 0;
}

.l-0 {
    left: 0;
}

.zi-1 {
    z-index: 1;
}

.zi-0 {
    z-index: 0;
}

.zi-10 {
    z-index: 10;
}

.zi-20 {
    z-index: 20;
}

.zi-30 {
    z-index: 30;
}

.zi-40 {
    z-index: 40;
}

.zi-50 {
    z-index: 50;
}

.zi-60 {
    z-index: 60;
}

.zi-70 {
    z-index: 70;
}

.zi-80 {
    z-index: 80;
}

.zi-90 {
    z-index: 90;
}

.zi-100 {
    z-index: 100;
}

.w-auto {
    width: auto;
}

@media (min-width:64rem){
    .w-auto\@sm {
        width: auto;
    }
}

@media (min-width:76.8rem){
    .w-auto\@md {
        width: auto;
    }
}

@media (min-width:102.4rem){
    .w-auto\@lg {
        width: auto;
    }
}

@media (min-width:128rem){
    .w-auto\@xl {
        width: auto;
    }
}

.w-full {
    width: 100%;
}

@media (min-width:64rem){
    .w-full\@sm {
        width: 100%;
    }
}

@media (min-width:76.8rem){
    .w-full\@md {
        width: 100%;
    }
}

@media (min-width:102.4rem){
    .w-full\@lg {
        width: 100%;
    }
}

@media (min-width:128rem){
    .w-full\@xl {
        width: 100%;
    }
}

.w-fullscreen {
    width: 100vw;
}

@media (min-width:64rem){
    .w-fullscreen\@sm {
        width: 100vw;
    }
}

@media (min-width:76.8rem){
    .w-fullscreen\@md {
        width: 100vw;
    }
}

@media (min-width:102.4rem){
    .w-fullscreen\@lg {
        width: 100vw;
    }
}

@media (min-width:128rem){
    .w-fullscreen\@xl {
        width: 100vw;
    }
}

.h-full {
    height: 100%;
}

@media (min-width:64rem){
    .w-full\@sm {
        height: 100%;
    }
}

@media (min-width:76.8rem){
    .w-full\@md {
        height: 100%;
    }
}

@media (min-width:102.4rem){
    .w-full\@lg {
        height: 100%;
    }
}

@media (min-width:128rem){
    .w-full\@xl {
        height: 100%;
    }
}

.h-fullscreen {
    height: 100vh;
}

@media (min-width:64rem){
    .w-fullscreen\@sm {
        height: 100vh;
    }
}

@media (min-width:76.8rem){
    .w-fullscreen\@md {
        height: 100vh;
    }
}

@media (min-width:102.4rem){
    .w-fullscreen\@lg {
        height: 100vh;
    }
}

@media (min-width:128rem){
    .w-fullscreen\@xl {
        height: 100vh;
    }
}

.bg-white {
    background-color: #fff;
}

.bg-top {
    background-position: top;
}

.bg-right {
    background-position: 100%;
}

.bg-bottom {
    background-position: bottom;
}

.bg-left {
    background-position: 0;
}

.bg-center {
    background-position: 50%;
}

.bg-cover {
    background-size: cover;
}

.bg-contain {
    background-size: contain;
}

@media (min-width:64rem){
    .bg-sm\@sm {
        background-size: sm;
    }
}

@media (min-width:76.8rem){
    .bg-md\@md {
        background-size: md;
    }
}

@media (min-width:102.4rem){
    .bg-lg\@lg {
        background-size: lg;
    }
}

@media (min-width:128rem){
    .bg-xl\@xl {
        background-size: xl;
    }
}

.rounded {
    border-radius: 99999px;
}

.outline-none {
    outline: none;
}

.no-border {
    border: 0;
}

.\!no-border {
    border: 0 !important;
}

.border-light {
    border: 1px solid rgba(0, 0, 0, .04);
}

.border-1 {
    border: 1px solid;
}

.grid {
    --gap: normal;
    --column-gap: var(--gap);
    --row-gap: var(--gap);
    display: grid;
    grid-template-columns: repeat(2, [col] minmax(1px, 1fr));
    grid-template-columns: repeat(var(--columns), [col] minmax(1px, 1fr));
    grid-template-areas: none;
    grid-template-areas: var(--gird-area, none);
    grid-row-gap: var(--row-gap);
    row-gap: var(--row-gap);
    grid-column-gap: var(--column-gap);
    -webkit-column-gap: var(--column-gap);
    -moz-column-gap: var(--column-gap);
    column-gap: var(--column-gap);
}

@media (min-width:64rem){
    .grid\@sm {
        display: grid;
    }
}

@media (min-width:76.8rem){
    .grid\@md {
        display: grid;
    }
}

@media (min-width:102.4rem){
    .grid\@lg {
        display: grid;
    }
}

@media (min-width:128rem){
    .grid\@xl {
        display: grid;
    }
}

@media (min-width:64rem){
    .grid,
    .grid\@sm {
        grid-template-columns: repeat(
      var(--columns, auto),
      [col] minmax(1px, 1fr)
    );
        grid-template-columns: repeat(
      var(--columns-sm, var(--columns, auto)),
      [col] minmax(1px, 1fr)
    );
        grid-template-areas: none;
        grid-template-areas: var(--gird-area-sm, var(--gird-area, none));
        grid-row-gap: var(--gap);
        row-gap: var(--gap);
        grid-row-gap: var(--row-gap-sm, var(--gap-sm, var(--row-gap, var(--gap))));
        row-gap: var(--row-gap-sm, var(--gap-sm, var(--row-gap, var(--gap))));
        grid-column-gap: var(--gap);
        -webkit-column-gap: var(--gap);
        -moz-column-gap: var(--gap);
        column-gap: var(--gap);
        grid-column-gap: var(
      --column-gap-sm,
      var(--gap-sm, var(--column-gap, var(--gap)))
    );
        -webkit-column-gap: var(
      --column-gap-sm,
      var(--gap-sm, var(--column-gap, var(--gap)))
    );
        -moz-column-gap: var(
      --column-gap-sm,
      var(--gap-sm, var(--column-gap, var(--gap)))
    );
        column-gap: var(
      --column-gap-sm,
      var(--gap-sm, var(--column-gap, var(--gap)))
    );
    }
}

@media (min-width:76.8rem){
    .grid,
    .grid\@md,
    .grid\@sm {
        grid-template-columns: repeat(
      var(--columns, auto),
      [col] minmax(1px, 1fr)
    );
        grid-template-columns: repeat(
      var(--columns-md, var(--columns-sm, var(--columns, auto))),
      [col] minmax(1px, 1fr)
    );
        grid-template-areas: none;
        grid-template-areas: var(
      --grid-area-md,
      var(--gird-area-sm, var(--gird-area, none))
    );
        grid-row-gap: var(--gap);
        row-gap: var(--gap);
        grid-row-gap: var(
      --row-gap-md,
      var(--gap-md, var(--row-gap-sm, var(--row-gap, var(--gap))))
    );
        row-gap: var(
      --row-gap-md,
      var(--gap-md, var(--row-gap-sm, var(--row-gap, var(--gap))))
    );
        grid-column-gap: var(--gap);
        -webkit-column-gap: var(--gap);
        -moz-column-gap: var(--gap);
        column-gap: var(--gap);
        grid-column-gap: var(
      --column-gap-md,
      var(--gap-md, var(--column-gap-sm, var(--column-gap, var(--gap))))
    );
        -webkit-column-gap: var(
      --column-gap-md,
      var(--gap-md, var(--column-gap-sm, var(--column-gap, var(--gap))))
    );
        -moz-column-gap: var(
      --column-gap-md,
      var(--gap-md, var(--column-gap-sm, var(--column-gap, var(--gap))))
    );
        column-gap: var(
      --column-gap-md,
      var(--gap-md, var(--column-gap-sm, var(--column-gap, var(--gap))))
    );
    }
}

@media (min-width:102.4rem){
    .grid,
    .grid\@lg,
    .grid\@md,
    .grid\@sm {
        grid-template-columns: repeat(
      var(--columns, auto),
      [col] minmax(1px, 1fr)
    );
        grid-template-columns: repeat(
      var(
        --columns-lg,
        var(--columns-md, var(--columns-sm, var(--columns, auto)))
      ),
      [col] minmax(1px, 1fr)
    );
        grid-template-areas: none;
        grid-template-areas: var(
      --grid-area-lg,
      var(--grid-area-md, var(--gird-area-sm, var(--gird-area, none)))
    );
        grid-row-gap: var(--gap);
        row-gap: var(--gap);
        grid-row-gap: var(
      --row-gap-lg,
      var(
        --gap-lg,
        var(--row-gap-md, var(--row-gap-sm, var(--row-gap, var(--gap))))
      )
    );
        row-gap: var(
      --row-gap-lg,
      var(
        --gap-lg,
        var(--row-gap-md, var(--row-gap-sm, var(--row-gap, var(--gap))))
      )
    );
        grid-column-gap: var(--gap);
        -webkit-column-gap: var(--gap);
        -moz-column-gap: var(--gap);
        column-gap: var(--gap);
        grid-column-gap: var(
      --column-gap-lg,
      var(
        --gap-lg,
        var(
          --column-gap-md,
          var(--column-gap-sm, var(--column-gap, var(--gap)))
        )
      )
    );
        -webkit-column-gap: var(
      --column-gap-lg,
      var(
        --gap-lg,
        var(
          --column-gap-md,
          var(--column-gap-sm, var(--column-gap, var(--gap)))
        )
      )
    );
        -moz-column-gap: var(
      --column-gap-lg,
      var(
        --gap-lg,
        var(
          --column-gap-md,
          var(--column-gap-sm, var(--column-gap, var(--gap)))
        )
      )
    );
        column-gap: var(
      --column-gap-lg,
      var(
        --gap-lg,
        var(
          --column-gap-md,
          var(--column-gap-sm, var(--column-gap, var(--gap)))
        )
      )
    );
    }
}

@media (min-width:128rem){
    .grid,
    .grid\@lg,
    .grid\@md,
    .grid\@sm,
    .grid\@xl {
        grid-template-columns: repeat(
      var(--columns, auto),
      [col] minmax(1px, 1fr)
    );
        grid-template-columns: repeat(
      var(
        --columns-xl,
        var(
          --columns-lg,
          var(--columns-md, var(--columns-sm, var(--columns, auto)))
        )
      ),
      [col] minmax(1px, 1fr)
    );
        grid-template-areas: none;
        grid-template-areas: var(
      --grid-area-xl,
      var(
        --grid-area-lg,
        var(--grid-area-md, var(--gird-area-sm, var(--gird-area, none)))
      )
    );
        grid-row-gap: var(--gap);
        row-gap: var(--gap);
        grid-row-gap: var(
      --row-gap-xl,
      var(
        --gap-xl,
        var(
          --row-gap-lg,
          var(--row-gap-md, var(--row-gap-sm, var(--row-gap, var(--gap))))
        )
      )
    );
        row-gap: var(
      --row-gap-xl,
      var(
        --gap-xl,
        var(
          --row-gap-lg,
          var(--row-gap-md, var(--row-gap-sm, var(--row-gap, var(--gap))))
        )
      )
    );
        grid-column-gap: var(--gap);
        -webkit-column-gap: var(--gap);
        -moz-column-gap: var(--gap);
        column-gap: var(--gap);
        grid-column-gap: var(
      --column-gap-xl,
      var(
        --gap-xl,
        var(
          --column-gap-lg,
          var(
            --column-gap-md,
            var(--column-gap-sm, var(--column-gap, var(--gap)))
          )
        )
      )
    );
        -webkit-column-gap: var(
      --column-gap-xl,
      var(
        --gap-xl,
        var(
          --column-gap-lg,
          var(
            --column-gap-md,
            var(--column-gap-sm, var(--column-gap, var(--gap)))
          )
        )
      )
    );
        -moz-column-gap: var(
      --column-gap-xl,
      var(
        --gap-xl,
        var(
          --column-gap-lg,
          var(
            --column-gap-md,
            var(--column-gap-sm, var(--column-gap, var(--gap)))
          )
        )
      )
    );
        column-gap: var(
      --column-gap-xl,
      var(
        --gap-xl,
        var(
          --column-gap-lg,
          var(
            --column-gap-md,
            var(--column-gap-sm, var(--column-gap, var(--gap)))
          )
        )
      )
    );
    }
}

.\!grid {
    --gap: normal;
    --column-gap: var(--gap);
    --row-gap: var(--gap);
    display: grid !important;
    grid-row-gap: var(--row-gap);
    row-gap: var(--row-gap);
    grid-column-gap: var(--column-gap);
    -webkit-column-gap: var(--column-gap);
    -moz-column-gap: var(--column-gap);
    column-gap: var(--column-gap);
    grid-template-columns: repeat(2, [col] minmax(1px, 1fr));
    grid-template-columns: repeat(var(--columns), [col] minmax(1px, 1fr));
}

.grid>* {
    grid-column: auto;
    grid-column: var(--col, auto);
    grid-row: auto;
    grid-row: var(--row, auto);
}

@media (min-width:64rem){
    .grid>* {
        grid-column: auto;
        grid-column: var(--col-sm, var(--col, auto));
        grid-row: auto;
        grid-row: var(--row-sm, var(--row, auto));
    }
}

@media (min-width:76.8rem){
    .grid>* {
        grid-column: auto;
        grid-column: var(--col-md, var(--col, auto));
        grid-row: auto;
        grid-row: var(--row-md, var(--row, auto));
    }
}

@media (min-width:102.4rem){
    .grid>* {
        grid-column: auto;
        grid-column: var(--col-lg, var(--col, auto));
        grid-row: auto;
        grid-row: var(--row-lg, var(--row, auto));
    }
}

@media (min-width:128rem){
    .grid>* {
        grid-column: auto;
        grid-column: var(--col-xl, var(--col, auto));
        grid-row: auto;
        grid-row: var(--row-xl, var(--row, auto));
    }
}

.order-first {
    -webkit-box-ordinal-group: -9998;
    order: -9999;
}

.order-last {
    -webkit-box-ordinal-group: 10000;
    order: 9999;
}

.order-none {
    -webkit-box-ordinal-group: 1;
    order: 0;
}

@media (min-width:64rem){
    .order-first\@sm {
        -webkit-box-ordinal-group: -9998;
        order: -9999;
    }

    .order-last\@sm {
        -webkit-box-ordinal-group: 10000;
        order: 9999;
    }

    .order-none\@sm {
        -webkit-box-ordinal-group: 1;
        order: 0;
    }
}

@media (min-width:76.8rem){
    .order-first\@md {
        -webkit-box-ordinal-group: -9998;
        order: -9999;
    }

    .order-last\@md {
        -webkit-box-ordinal-group: 10000;
        order: 9999;
    }

    .order-none\@md {
        -webkit-box-ordinal-group: 1;
        order: 0;
    }
}

@media (min-width:102.4rem){
    .order-first\@lg {
        -webkit-box-ordinal-group: -9998;
        order: -9999;
    }

    .order-last\@lg {
        -webkit-box-ordinal-group: 10000;
        order: 9999;
    }

    .order-none\@lg {
        -webkit-box-ordinal-group: 1;
        order: 0;
    }
}

@media (min-width:128rem){
    .order-first\@xl {
        -webkit-box-ordinal-group: -9998;
        order: -9999;
    }

    .order-last\@xl {
        -webkit-box-ordinal-group: 10000;
        order: 9999;
    }

    .order-none\@xl {
        -webkit-box-ordinal-group: 1;
        order: 0;
    }
}

.flex {
    display: -webkit-box;
    display: flex;
}

@media (min-width:64rem){
    .flex\@sm {
        display: -webkit-box;
        display: flex;
    }
}

@media (min-width:76.8rem){
    .flex\@md {
        display: -webkit-box;
        display: flex;
    }
}

@media (min-width:102.4rem){
    .flex\@lg {
        display: -webkit-box;
        display: flex;
    }
}

@media (min-width:128rem){
    .flex\@xl {
        display: -webkit-box;
        display: flex;
    }
}

.\!flex {
    display: -webkit-box !important;
    display: flex !important;
}

.flex-1 {
    -webkit-box-flex: 1;
    flex: 1;
}

.flex-wrap {
    flex-wrap: wrap;
}

@media (min-width:64rem){
    .flex-wrap\@sm {
        flex-wrap: wrap;
    }
}

@media (min-width:76.8rem){
    .flex-wrap\@md {
        flex-wrap: wrap;
    }
}

@media (min-width:102.4rem){
    .flex-wrap\@lg {
        flex-wrap: wrap;
    }
}

@media (min-width:128rem){
    .flex-wrap\@xl {
        flex-wrap: wrap;
    }
}

.flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

@media (min-width:64rem){
    .flex-column\@sm {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }
}

@media (min-width:76.8rem){
    .flex-column\@md {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }
}

@media (min-width:102.4rem){
    .flex-column\@lg {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }
}

@media (min-width:128rem){
    .flex-column\@xl {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }
}

.items-start {
    -webkit-box-align: start;
    align-items: flex-start;
}

.items-center {
    -webkit-box-align: center;
    align-items: center;
}

.items-end {
    -webkit-box-align: end;
    align-items: flex-end;
}

@media (min-width:64rem){
    .items-start\@sm {
        -webkit-box-align: start;
        align-items: flex-start;
    }
}

@media (min-width:76.8rem){
    .items-start\@md {
        -webkit-box-align: start;
        align-items: flex-start;
    }
}

@media (min-width:102.4rem){
    .items-start\@lg {
        -webkit-box-align: start;
        align-items: flex-start;
    }
}

@media (min-width:128rem){
    .items-start\@xl {
        -webkit-box-align: start;
        align-items: flex-start;
    }
}

@media (min-width:64rem){
    .items-center\@sm {
        -webkit-box-align: center;
        align-items: center;
    }
}

@media (min-width:76.8rem){
    .items-center\@md {
        -webkit-box-align: center;
        align-items: center;
    }
}

@media (min-width:102.4rem){
    .items-center\@lg {
        -webkit-box-align: center;
        align-items: center;
    }
}

@media (min-width:128rem){
    .items-center\@xl {
        -webkit-box-align: center;
        align-items: center;
    }
}

@media (min-width:64rem){
    .items-end\@sm {
        -webkit-box-align: end;
        align-items: flex-end;
    }
}

@media (min-width:76.8rem){
    .items-end\@md {
        -webkit-box-align: end;
        align-items: flex-end;
    }
}

@media (min-width:102.4rem){
    .items-end\@lg {
        -webkit-box-align: end;
        align-items: flex-end;
    }
}

@media (min-width:128rem){
    .items-end\@xl {
        -webkit-box-align: end;
        align-items: flex-end;
    }
}

.justify-start {
    -webkit-box-pack: start;
    justify-content: flex-start;
}

.justify-center {
    -webkit-box-pack: center;
    justify-content: center;
}

.justify-end {
    -webkit-box-pack: end;
    justify-content: flex-end;
}

.justify-between {
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

@media (min-width:64rem){
    .justify-start\@sm {
        -webkit-box-pack: start;
        justify-content: flex-start;
    }
}

@media (min-width:76.8rem){
    .justify-start\@md {
        -webkit-box-pack: start;
        justify-content: flex-start;
    }
}

@media (min-width:102.4rem){
    .justify-start\@lg {
        -webkit-box-pack: start;
        justify-content: flex-start;
    }
}

@media (min-width:128rem){
    .justify-start\@xl {
        -webkit-box-pack: start;
        justify-content: flex-start;
    }
}

@media (min-width:64rem){
    .justify-center\@sm {
        -webkit-box-pack: center;
        justify-content: center;
    }
}

@media (min-width:76.8rem){
    .justify-center\@md {
        -webkit-box-pack: center;
        justify-content: center;
    }
}

@media (min-width:102.4rem){
    .justify-center\@lg {
        -webkit-box-pack: center;
        justify-content: center;
    }
}

@media (min-width:128rem){
    .justify-center\@xl {
        -webkit-box-pack: center;
        justify-content: center;
    }
}

@media (min-width:64rem){
    .justify-end\@sm {
        -webkit-box-pack: end;
        justify-content: flex-end;
    }
}

@media (min-width:76.8rem){
    .justify-end\@md {
        -webkit-box-pack: end;
        justify-content: flex-end;
    }
}

@media (min-width:102.4rem){
    .justify-end\@lg {
        -webkit-box-pack: end;
        justify-content: flex-end;
    }
}

@media (min-width:128rem){
    .justify-end\@xl {
        -webkit-box-pack: end;
        justify-content: flex-end;
    }
}

@media (min-width:64rem){
    .justify-between\@sm {
        -webkit-box-pack: justify;
        justify-content: space-between;
    }
}

@media (min-width:76.8rem){
    .justify-between\@md {
        -webkit-box-pack: justify;
        justify-content: space-between;
    }
}

@media (min-width:102.4rem){
    .justify-between\@lg {
        -webkit-box-pack: justify;
        justify-content: space-between;
    }
}

@media (min-width:128rem){
    .justify-between\@xl {
        -webkit-box-pack: justify;
        justify-content: space-between;
    }
}

@media (min-width:64rem){
    .justify-around\@sm {
        justify-content: space-around;
    }
}

@media (min-width:76.8rem){
    .justify-around\@md {
        justify-content: space-around;
    }
}

@media (min-width:102.4rem){
    .justify-around\@lg {
        justify-content: space-around;
    }
}

@media (min-width:128rem){
    .justify-around\@xl {
        justify-content: space-around;
    }
}

.self-start {
    align-self: flex-start;
}

.self-center {
    align-self: center;
}

.self-end {
    align-self: flex-end;
}

.self-stretch {
    align-self: stretch;
}

.self-auto {
    align-self: auto;
}

@media (min-width:64rem){
    .self-start\@sm {
        align-self: flex-start;
    }
}

@media (min-width:76.8rem){
    .self-start\@md {
        align-self: flex-start;
    }
}

@media (min-width:102.4rem){
    .self-start\@lg {
        align-self: flex-start;
    }
}

@media (min-width:128rem){
    .self-start\@xl {
        align-self: flex-start;
    }
}

@media (min-width:64rem){
    .self-center\@sm {
        align-self: center;
    }
}

@media (min-width:76.8rem){
    .self-center\@md {
        align-self: center;
    }
}

@media (min-width:102.4rem){
    .self-center\@lg {
        align-self: center;
    }
}

@media (min-width:128rem){
    .self-center\@xl {
        align-self: center;
    }
}

@media (min-width:64rem){
    .self-end\@sm {
        align-self: flex-end;
    }
}

@media (min-width:76.8rem){
    .self-end\@md {
        align-self: flex-end;
    }
}

@media (min-width:102.4rem){
    .self-end\@lg {
        align-self: flex-end;
    }
}

@media (min-width:128rem){
    .self-end\@xl {
        align-self: flex-end;
    }
}

@media (min-width:64rem){
    .self-stretch\@sm {
        align-self: stretch;
    }
}

@media (min-width:76.8rem){
    .self-stretch\@md {
        align-self: stretch;
    }
}

@media (min-width:102.4rem){
    .self-stretch\@lg {
        align-self: stretch;
    }
}

@media (min-width:128rem){
    .self-stretch\@xl {
        align-self: stretch;
    }
}

@media (min-width:64rem){
    .self-auto\@sm {
        align-self: auto;
    }
}

@media (min-width:76.8rem){
    .self-auto\@md {
        align-self: auto;
    }
}

@media (min-width:102.4rem){
    .self-auto\@lg {
        align-self: auto;
    }
}

@media (min-width:128rem){
    .self-auto\@xl {
        align-self: auto;
    }
}

@-webkit-keyframes opacity{
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes opacity{
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.to\:opacity-1 {
    -webkit-animation: op .3s;
    animation: op .3s;
    -webkit-animation: op var(--duration);
    animation: op var(--duration);
}

.list-none {
    list-style: none;
}

.align-middle {
    vertical-align: middle;
}

.cursor-default {
    cursor: default;
}

.cursor-pointer {
    cursor: pointer;
}

.object-cover {
    -o-object-fit: cover;
    object-fit: cover;
}

:root {
    --wrapper: 1400px;
    --text-color: #5f5f5f;
    --text-light: #969696;
    --text-dark: #000;
    --overlay: hsla(0, 0%, 100%, 0.5);
    --shadow: 30px 30px 20px rgba(0, 0, 0, 0.07);
    --columns: 2;
    --rows: 4;
    --color1: #0433ff;
    <!--: #00fdff;
    --color2-->: #00fdff;
    --color2: 0.3s;
}

body {
    margin: 0;
    font-family: Avenir,sans-serif;
    font-size: 1.6rem;
    color: #5f5f5f;
    color: var(--text-color);
    line-height: 1.75;
    font-weight: 200;
    min-height: 100vh;
}

.section {
    margin-top: 14rem;
}

.masonry {
    --masonry: 3;
    --gap: 1.56em;
    grid-column-gap: var(--gap);
    -webkit-column-gap: var(--gap);
    -moz-column-gap: var(--gap);
    column-gap: var(--gap);
    orphans: 1;
    widows: 1;
    display: block;
}

.masonry,
.masonry>* {
    page-break-inside: avoid;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.masonry>* {
    display: inline-block;
    display: table;
    width: 100%;
    margin-bottom: var(--gap);
}

@media (min-width:40rem){
    .masonry {
        -webkit-column-count: var(--masonry);
        -moz-column-count: var(--masonry);
        column-count: var(--masonry);
    }
}

.media {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: start;
    align-items: flex-start;
}

.quote>p:first-of-type:before,
.quote>p:last-of-type:after {
    content: "“";
}

.quote footer {
    font-size: .64em;
}

.card {
    padding: 3em;
    background-color: #fff;
}

.transition {
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-transition: all var(--duration, .3s);
    transition: all var(--duration, .3s);
}

.shadow {
    box-shadow: 30px 30px 20px rgba(0, 0, 0, .07);
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 0, 0, .04);
}

.shadow\:hover {
    border: 1px solid transparent;
}

.shadow\:hover:hover {
    z-index: 1;
    box-shadow: 30px 30px 20px rgba(0, 0, 0, .07);
    box-shadow: var(--shadow);
    border-color: rgba(0, 0, 0, .04);
}

.overlay,
.overlay\:hover {
    position: relative;
}

.overlay .overlay__content,
.overlay:after,
.overlay\:hover .overlay__content,
.overlay\:hover:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.5em 1.65em;
}

.overlay .overlay__content,
.overlay\:hover .overlay__content {
    z-index: 1;
}

.overlay:after,
.overlay\:hover:after {
    content: attr(data-overlay);
    font: inherit;
    background: hsla(0, 0%, 100%, .5);
    background: var(--overlay);
    color: #000;
    color: var(--text-dark);
}

.overlay\:hover .overlay__content,
.overlay\:hover:after {
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    -webkit-transition: opacity var(--duration, .3s);
    transition: opacity var(--duration, .3s);
    opacity: 0;
    visibility: hidden;
}

.overlay\:hover:hover .overlay__content,
.overlay\:hover:hover:after {
    opacity: 1;
    visibility: visible;
}

.features {
    --columns: 3;
    --stroke: 1px;
    margin-bottom: 4em;
}

.features .card {
    padding-left: 2em;
    padding-right: 2em;
}

.features .title {
    font-size: 1.67em;
    margin-bottom: .76em;
}

.features .icon {
    width: 64px;
    height: 64px;
    margin-bottom: 2em;
}

.icon-text {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    margin-left: .25em;
}

.form input,
.form textarea {
    border: 0;
    width: 100%;
    padding: 2em 4em;
    outline: 0;
}

.form textarea {
    min-height: 180px;
    resize: none;
}

.form input:not(:last-child),
.form textarea:not(:last-child) {
    border-bottom: 1px solid #e8e8e8;
}

.form ::-webkit-input-placeholder {
    color: #b4b4b4;
}

.form ::-moz-placeholder {
    color: #b4b4b4;
}

.form :-ms-input-placeholder {
    color: #b4b4b4;
}

.form :-moz-placeholder {
    color: #b4b4b4;
}

.underline,
.underline\:hover {
    text-decoration: none;
    display: inline;
    background-image: -webkit-gradient(
      linear,
      right top, left top,
      from(#0433ff),
      to(#00fdff));
    background-image: linear-gradient(
      270deg,
      #0433ff,
      #00fdff);
    background-image: -webkit-gradient(
      linear,
      right top, left top,
      from(var(--color1, #043ff)),
      to(var(--color2, #00fdff))
    );
    background-image: linear-gradient(
      270deg,
      var(--color1, #0433ff),
      var(--color2, #00fdff)
    );
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 2px;
    background-size: 100% var(--stroke, 2px);
}

.underline\:hover:hover {
    background-size: 100% calc(100% - 2px);
    background-size: 100% calc(100% - var(--stroke, 2px));
}

.underline\:after,
.underline\:after\:hover {
    text-decoration: none;
    position: relative;
    background-image: none;
}

.underline\:after:after,
.underline\:after\:hover:after {
    content: "";
    height: 2px;
    height: var(--stroke, 2px);
    background: #0433ff;
    background: var(--color1, #0433ff);
    background: -webkit-gradient(
      linear,
      right top, left top,
      from(#0433ff),
      to(#00fdff));
    background: linear-gradient(
      270deg,
      #0433ff,
      #00fdff);
    background: -webkit-gradient(
      linear,
      right top, left top,
      from(var(--color1, #0433ff)),
      to(var(--color2, #00fdff))
    );
    background: linear-gradient(
      270deg,
      var(--color1, #0433ff),
      var(--color2, #00fdff)
    );
    position: absolute;
    bottom: -.1em;
    left: 0;
    left: var(--px-, 0);
    right: 0;
    right: var(--px-, 0);
}

.underline\:after\:hover:after {
    opacity: 0;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    -webkit-transition: opacity var(--duration, .3s);
    transition: opacity var(--duration, .3s);
}

.underline\:after\:hover:hover:after {
    opacity: 1;
}

.\!underline\:after {
    text-decoration: none;
    position: relative;
    background-image: none;
}

.\!underline\:after:after {
    content: "";
    height: 2px;
    height: var(--stroke, 2px);
    background: #0433ff;
    background: var(--color1, #0433ff);
    background: -webkit-gradient(
    linear,
    right top, left top,
    from(#0433ff),
    to(#00fdff));
    background: linear-gradient(
    270deg,
    #0433ff,
    #00fdff);
    background: -webkit-gradient(
    linear,
    right top, left top,
    from(var(--color1, #0433ff)),
    to(var(--color2, #00fdff))
  );
    background: linear-gradient(
    270deg,
    var(--color1, #0433ff),
    var(--color2, #00fdff)
  );
    position: absolute;
    bottom: -.1em;
    left: 0;
    left: var(--px-, 0);
    right: 0;
    right: var(--px-, 0);
    opacity: 1 !important;
}

.text-gradient,
.text-gradient\:hover:hover {
    background-image: -webkit-gradient(
    linear,
    right top, left top,
    from(#0433ff),
    to(#00fdff));
    background-image: linear-gradient(
    270deg,
    #0433ff,
    #00fdff);
    background-image: -webkit-gradient(
    linear,
    right top, left top,
    from(var(--color1, #0433ff)),
    to(var(--color2, #00fdff))
  );
    background-image: linear-gradient(
    270deg,
    var(--color1, #0433ff),
    var(--color2, #00fdff)
  );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.__hero_card {
    max-width: 30em;
    padding-top: 2.5em;
    padding-bottom: 2em;
}

@media (min-width:768px){
    .__hero_card {
        margin-top: -40%;
    }
}

.__highlight_card {
    padding: 5em;
    max-width: 600px;
}

@media (min-width:768px){
    .__highlight_card {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        top: -25%;
    }
}

.__contact_cards {
    max-width: 500px;
}

.__contact_cards .card {
    width: 100%;
    padding-left: 4em;
}

@media (min-width:768px){
    .__contact_cards {
        margin-top: -43%;
        margin-left: 50%;
    }
}

.__contact_page_cards {
    max-width: 700px;
}

.__contact_page_cards .card {
    width: 100%;
}

@media (min-width:768px){
    .__contact_page_cards {
        margin-top: -43%;
        margin-left: 40%;
    }
}

.__quote_card {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: -200px;
    max-width: 600px;
    font-size: 1.33em;
}

.__quote_card>.avatar {
    width: 160px;
    height: 160px;
    padding: .8em;
}

.__team_card,
.__team_page_card {
    width: 100%;
}

.__team_card .avatar,
.__team_page_card .avatar {
    width: 160px;
    height: 160px;
}

.__team_card .card__content,
.__team_page_card .card__content {
    padding: 3em;
}

.__team_card .card__content:not(:last-of-type),
.__team_page_card .card__content:not(:last-of-type) {
    border-right: 1px solid #e8e8e8;
}

.avatar {
    position: relative;
    width: 10em;
    height: 10em;
    padding: 1em;
    border-radius: 9999px;
}

.avatar>img {
    border-radius: inherit;
}

.crop-top {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

.to\:crop-top {
    -webkit-transition: -webkit-clip-path .3s;
    transition: -webkit-clip-path .3s;
    transition: clip-path .3s;
    transition: clip-path .3s,-webkit-clip-path .3s;
}

.avatar:hover .to\:crop-top {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

.crop-bottom {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

.to\:crop-bottom {
    -webkit-transition: -webkit-clip-path .3s;
    transition: -webkit-clip-path .3s;
    transition: clip-path .3s;
    transition: clip-path .3s,-webkit-clip-path .3s;
}

.avatar:hover .to\:crop-bottom {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

.crop-left {
    -webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.to\:crop-left {
    -webkit-transition: -webkit-clip-path .3s;
    transition: -webkit-clip-path .3s;
    transition: clip-path .3s;
    transition: clip-path .3s,-webkit-clip-path .3s;
}

.avatar:hover .to\:crop-left {
    -webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.crop-right {
    -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.to\:crop-right {
    -webkit-transition: -webkit-clip-path .3s;
    transition: -webkit-clip-path .3s;
    transition: clip-path .3s;
    transition: clip-path .3s,-webkit-clip-path .3s;
}

.avatar:hover .to\:crop-right {
    -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.crop-top-left {
    -webkit-clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%);
    clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%);
}

.to\:crop-top-left {
    -webkit-transition: -webkit-clip-path .3s;
    transition: -webkit-clip-path .3s;
    transition: clip-path .3s;
    transition: clip-path .3s,-webkit-clip-path .3s;
}

.avatar:hover .to\:crop-top-left {
    -webkit-clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%);
    clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%);
}

.crop-bottom-left {
    -webkit-clip-path: polygon(0 50%, 50% 50%, 50% 100%, 0 100%);
    clip-path: polygon(0 50%, 50% 50%, 50% 100%, 0 100%);
}

.to\:crop-bottom-left {
    -webkit-transition: -webkit-clip-path .3s;
    transition: -webkit-clip-path .3s;
    transition: clip-path .3s;
    transition: clip-path .3s,-webkit-clip-path .3s;
}

.avatar:hover .to\:crop-bottom-left {
    -webkit-clip-path: polygon(0 50%, 50% 50%, 50% 100%, 0 100%);
    clip-path: polygon(0 50%, 50% 50%, 50% 100%, 0 100%);
}

.crop-top-right {
    -webkit-clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%);
    clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%);
}

.to\:crop-top-right {
    -webkit-transition: -webkit-clip-path .3s;
    transition: -webkit-clip-path .3s;
    transition: clip-path .3s;
    transition: clip-path .3s,-webkit-clip-path .3s;
}

.avatar:hover .to\:crop-top-right {
    -webkit-clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%);
    clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%);
}

.crop-bottom-right {
    -webkit-clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
    clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
}

.to\:crop-bottom-right {
    -webkit-transition: -webkit-clip-path .3s;
    transition: -webkit-clip-path .3s;
    transition: clip-path .3s;
    transition: clip-path .3s,-webkit-clip-path .3s;
}

.avatar:hover .to\:crop-bottom-right {
    -webkit-clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
    clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
}

@media (min-width:768px){
    .__team_card {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        top: -200px;
    }
}

.__masonry {
    --gap: 1.6rem;
    line-height: 1.2;
}

.__masonry>* {
    margin-bottom: 1em;
}

.__masonry>:after {
    font-size: 1.875em;
}

.portfolio {
    --columns: 12;
    --gird-area-lg: "__01 __02 __03 __04 __05 __06 __07 __08 __09 __10 __11 __12";
    --gird-area: "__01 __01 __01 __01 __01 __01 __01 __01 __01 __01 __01 __01"
    "__02 __02 __02 __02 __02 __02 __03 __03 __03 __03 __03 __03"
    "__04 __04 __04 __04 __04 __04 __06 __06 __06 __06 __06 __06"
    "__05 __05 __05 __05 __05 __05 __06 __06 __06 __06 __06 __06"
    "__07 __07 __07 __07 __09 __09 __09 __09 __09 __09 __09 __09"
    "__08 __08 __08 __08 __09 __09 __09 __09 __09 __09 __09 __09"
    "__10 __10 __10 __10 __10 __10 __11 __11 __11 __11 __11 __11"
    "__10 __10 __10 __10 __10 __10 __12 __12 __12 __12 __12 __12"
    "__13 __13 __13 __13 __13 __13 __13 __13 __14 __14 __14 __14"
    "__13 __13 __13 __13 __13 __13 __13 __13 __15 __15 __15 __15";
}

#layout-grid:checked~.portfolio {
    --gird-area-lg: "__01 __01 __01 __01 __03 __03 __03 __03 __02 __02 __02 __02"
      "__01 __01 __01 __01 __04 __04 __04 __04 __10 __11 __12 __13"
      "__01 __01 __01 __01 __04 __04 __04 __04 __08 __08 __09 __09";
    --gird-area: "__01 __01 __01 __01 __01 __01 __02 __02 __02 __02 __02 __02"
      "__03 __03 __03 __03 __04 __04 __04 __04 __05 __05 __05 __05"
      "__06 __06 __06 __06 __07 __07 __07 __07 __08 __08 __08 __08"
      "__09 __09 __09 __10 __10 __10 __11 __11 __11 __12 __12 __12"
      "__13 __13 __13 __14 __14 __14 __15 __15 __15 ... ... ...";
}

.portfolio--switch {
    --columns: 12;
    --gird-area: "__01 __01 __01 __01 __02 __02 __02 __02 __03 __03 __03 __03"
    "__04 __04 __04 __04 __05 __05 __05 __05 __06 __06 __06 __06"
    "__07 __07 __07 __07 __08 __08 __08 __08 __09 __09 __09 __09"
    "__10 __10 __10 __10 __11 __11 __11 __11 __12 __12 __12 __12"
    "__13 __13 __13 __13 __14 __14 __14 __14 __15 __15 __15 __15";
}

.portfolio--switch .portfolio__item {
    --aspect-ratio: 100%;
}

#layout-grid:checked~.portfolio--switch {
    --gird-area: "__01 __01 __01 __02 __02 __02 __03 __03 __03 __04 __04 __04"
      "__05 __05 __05 __05 __06 __06 __06 __06 __07 __07 __07 __07"
      "__08 __08 __08 __08 __08 __08 __09 __09 __09 __09 __09 __09"
      "__10 __10 __10 __11 __11 __11 __12 __12 __12 __13 __13 __13"
      "__14 __14 __14 __14 __14 __14 __15 __15 __15 __15 __15 __15";
}

#layout-grid:checked~.portfolio--switch .portfolio__item:last-of-type {
    --aspect-ratio: 134.74026%;
}

#layout-grid:checked~.portfolio,
#layout-grid:checked~.portfolio--switch {
    -webkit-animation: op .5s;
    animation: op .5s;
}

#layout-base:checked~.portfolio,
#layout-base:checked~.portfolio--switch {
    -webkit-animation: op2 .5s;
    animation: op2 .5s;
}

@-webkit-keyframes op{
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes op{
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes op2{
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes op2{
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.blog {
    --columns: 1;
    --row-gap: 7rem;
}

#layout-grid:checked~.blog {
    --column-gap: 1rem;
    --row-gap: 1rem;
    --columns: 3;
}

#layout-grid:checked~.blog .blog__item {
    font-size: .85em;
}

#layout-grid:checked~.blog .blog__meta {
    justify-content: space-around;
}

.blog__details {
    max-width: 75%;
}

.bg-aspect-ratio {
    --bg-image: linear-gradient(270deg, var(--color1), var(--color2));
    display: block;
    width: 100%;
    background-repeat: no-repeat;
    background-image: var(--bg-image);
}

.bg-aspect-ratio:before {
    content: "";
    display: block;
    padding-top: 100%;
    padding-top: var(--aspect-ratio, 100%);
}

.portfolio__item {
    display: block;
    width: 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border: 4px solid #fff;
}

.portfolio__item:before {
    content: "";
    display: block;
    padding-top: 100%;
    padding-top: var(--aspect-ratio, 100%);
}

.portfolio__item:after {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    font-size: 2.4em;
    line-height: 1;
}

.ctrl {
    position: static;
    display: inline-block;
    float: right;
    clear: both;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.ctrl>svg {
    width: 100%;
    height: 100%;
}

.ctrl:last-of-type {
    margin-top: 1em;
}

#layout-base:checked~.portfolio__controls .ctrl:first-of-type,
#layout-grid:checked~.portfolio__controls .ctrl:last-of-type,
.ctrl:hover {
    color: #a0a0a0;
}

.menu {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    position: fixed;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    background-color: hsla(0, 0%, 100%, .94);
    font-size: 1.6em;
}

@media (min-width:64rem){
    .menu {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        position: static;
        display: -webkit-box;
        display: flex;
        font-size: medium;
        opacity: 1;
        visibility: visible;
    }
}

.submenu {
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    font-size: .6em;
}

#hamburger-menu:checked~.menu .submenu {
    opacity: 1;
    visibility: visible;
}

@media (min-width:64rem){
    .submenu {
        font-size: 1em;
        background-color: #fff;
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }

    #hamburger-menu:checked~.menu .submenu {
        opacity: 0;
        visibility: hidden;
    }

    .menu__link:hover .submenu {
        opacity: 1 !important;
        visibility: visible !important;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.hamburger__icon {
    width: 43px;
    height: 26px;
}

#hamburger-menu:checked~.menu {
    opacity: 1;
    visibility: visible;
}

.hamburger__label {
    position: absolute;
    top: 2em;
    left: 2em;
    z-index: 10;
    cursor: pointer;
    -webkit-transition: color .2s;
    transition: color .2s;
}

.hamburger__label:hover {
    color: #000;
    color: var(--text-dark);
}

.hamburger-line {
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s,-webkit-transform .2s;
    -webkit-transform-origin: left center;
    transform-origin: left center;
}

#hamburger-menu:checked~.hamburger__label .hamburger-line:nth-of-type(2) {
    -webkit-transform: rotate(45deg) scaleX(.6);
    transform: rotate(45deg) scaleX(.6);
}

#hamburger-menu:checked~.hamburger__label .hamburger-line:nth-of-type(3) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#hamburger-menu:checked~.hamburger__label .hamburger-line:first-of-type {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

@media (min-width:64rem){
    .hamburger__label {
        display: none;
    }
}

.color-picker {
    width: 1em;
    height: 1em;
    background-color: red;
    border-radius: 100%;
    display: inline-block;
    margin-left: .3em;
}