*,: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:1em;
}

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:0;
  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);
}

.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:30%;
  }
}

@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:20%;
}

.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;
		<!-- --color2:#00fdff;-->
  --color2:#00fdff;


  --duration: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:-55%
}
  }

.__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;
}