/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html, body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
#root, #__next {
  isolation: isolate;
}

/* Fonts */
.overpass-normal {
  font-family: "Overpass", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.overpass-bold {
  font-family: "Overpass", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

/*
@font-face {
  font-family: 'zulu-partners';
  src:  url('../fonts/zulu-partners.eot?z3o5ur');
  src:  url('../fonts/zulu-partners.eot?z3o5ur#iefix') format('embedded-opentype'),
    url('../fonts/zulu-partners.ttf?z3o5ur') format('truetype'),
    url('../fonts/zulu-partners.woff?z3o5ur') format('woff'),
    url('../fonts/zulu-partners.svg?z3o5ur#zulu-partners') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts *//*
  font-family: 'zulu-partners' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== *//*
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*/
.icon-linkedin:before {
  content: "\eac9";
}
.icon-facebook:before {
  content: "\ea91";
}
.icon-instagram:before {
  content: "\ea92";
}

/* Flexbox */
.flex {display: flex;}
.flex-center {justify-content: center;}
.flex-space-between {justify-content: space-between;}
.flex-align-items-middle {align-items: center;}
.flex-align-items-bottom {align-items: flex-end;}

/* Headings */
h1, h2, h3 {font-weight: 500; font-family: 'Saira Semi Condensed', sans-serif;}
h1 {font-size: 3.2em; line-height: 1.5em;}

/* Layout */
body {background-color: #111111; color: #ddd; font-family: 'Overpass Mono', sans-serif;}
header, main, footer {width: 100%;}
header.temp {display: block; height: 100px;}
section {margin: 0 auto; position: relative;}
.pw-720 section, section.pw-720 {width: 720px;}
.pw-960 section, section.pw-960 {width: 960px;}
.pw-1120 section, section.pw-1120 {width: 1120px;}
section article {}

/**
 * Temp starts
 */
 header.home.temp {height: 60px;}
 header.temp {padding: 20px 0 0 0;}
 header.temp article {height: 30px;}
 header.temp article img.logo.center {margin: 0 auto;}
 main.temp {text-align: center; margin: 0 auto; padding: 20px 0 0 0;}
 main.temp.legal {padding: 0 0 60px 0; text-align: left;}
 main.temp.legal article h1 { font-size: 1.8em; padding: 0 0 1em 0;}
 main.temp.legal article h2 { font-size: 1.6em; padding: 0.5em 0 1em 0;}
 main.temp.legal article h3 { font-size: 1.2em; padding: 0.5em 0 1em 0;}
 main.temp.legal article p { font-size: 1em; padding: 0 0 1.5em 0;}
 main.temp article.logo {height: 200px;}
 main.temp article.label {padding: 40px 0 80px 0;}
 main.temp article.label h1 {font-size: 2em;}
 main.temp article.label .contact {padding: 30px 0 0 0;}
 main.temp article.label .contact span.stamp {font-size: 1.2em; font-weight: 700;}
 span.empty {display: none;}

 footer.temp {margin: 30px 0 30px 0;}
 nav#footer-nav-links {padding: 30px 0 30px 0;}
 nav#footer-nav-links .item {padding: 0 20px;}
 nav#footer-nav-links .item a {text-decoration: none; color: #eee; border: none;}
 nav#footer-nav-links .item a:hover {border-bottom: 2px solid #ccc;}
 nav#footer-nav-links .item.active a {color: #777; border: none;}
 nav#footer-nav-links .item.active a:hover {border-bottom: 2px solid #999;}

/**
 * Temp ends
 */


section#header-one {padding: 20px 0 0 0;}
#header-logo {height: 35px; padding-top: 8px;}
img.logo {max-height: 100%;}
section#main-one {padding: 8em 0 6em 0; height: 44em;}
section#main-one > article {position: absolute;}
section#main-one h1 {text-align: center; font-size: 5.5em; line-height: 1.25em; font-style: normal;}

article#main-headliner {left: 0; z-index: 110; width: 645px;}
article#main-headliner .anim {opacity: 0; animation-duration: 3s; animation-timing-function: ease-in; animation-delay: 0s; animation-direction: normal; animation-name: headline-in; animation-fill-mode: forwards;}
article#main-headliner .anim.first {animation-delay: 8s;}
article#main-headliner .anim.second {animation-delay: 13s;}
article#main-headliner .anim.third {animation-delay: 18s;}
@keyframes headline-in {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
article#main-hero-image {opacity: 0; background-image: url('/_assets/img/polygon-snail-dark.png'); right: 0; width: 600px; height: 500px; background-size: contain; background-repeat: no-repeat; z-index: 105; animation: 40s linear 0s normal snail-slide; animation-fill-mode: forwards;}
@keyframes snail-slide {
  0% {
    opacity: 0;
    transform: translateX(2);
  }
  5% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(-50px);
  }
}

section#main-two {}
section#main-two > article {}
section#main-two h2 {text-align: center; font-size: 3.2em; line-height: 1.25em; font-style: normal;}
article#main-product {}
article#main-product .blurb {font-size: 2.4em; font-weight: 600; text-align: center; padding: 2em 0;}
ul#main-tab {position: relative; top: 5px; margin: 0; padding: 0; list-style: none; z-index: 125;}
ul#main-tab li {color: #bbbbbb; margin: 0 15px; width: 33%; height: 150px; font-size: 1.8em; text-align: center; font-weight: 600; border-top: 5px solid #111111;  border-top-left-radius: 25px; border-top-right-radius: 40px; padding: 0 5px; cursor: pointer;}
ul#main-tab li.active {color: #eeeeee; border-left: 5px solid #eeeeee; border-top: 5px solid #eeeeee; border-right: 5px solid #eeeeee; border-bottom: 8px solid #111111;}
ul#main-tab li::before {position: relative; top: 5px; content: '\2b23'; display: block; color: #888;}
ul#main-tab li.active::before {color: #75b23f;}
div#main-tab-content {position: relative; border-top: 5px solid #eeeeee; z-index: 120;}

/* Link */
li a, p a {display: inline-block; text-decoration: none; border-bottom: 2px solid #555; color: #eee;}
li a:hover, p a:hover {border-bottom: 2px solid #ccc;}

/* List */
ol {list-style-position: inside; margin: 0; padding: 0;}
ol ol {padding: 0.5em 0 0 1.5em;}
ol li {padding: 0.5em 0;}
ul {list-style-type: none; list-style-position: inside; margin: 0; padding: 0;}
ul li {padding: 0 0 15px 0;}
ul li::before {content: '\2b23'; padding: 0 20px 0 0;}

/* Elements */

a.button, button {border-top: 0.2em solid #eee; border-right: 0.5em solid #eee; border-bottom: 0.5em solid #eee; border-left: 0.2em solid #eee; border-radius: 0.2em; background-color: #111; color: #eee; font-size: 1em; cursor: pointer; padding: 0.3em 1em; text-decoration: none;}
a.button:hover, button:hover {background-color: #333;}
a.button:active, button:active {border-top-width: 0.3em; border-right-width: 0.4em; border-bottom-width: 0.4em; border-left-width: 0.3em;}
a.button.large-text, button.large-text {font-size: 1.5em; font-weight: bold;}
a.button.wide, button.wide {width: 18vw;}
button.status-progress {animation: icon;}

span[class^="icon-"] {font-family: 'Overpass Mono', monospace; font-size: 1.2em;}
.icon-dynamic::before {display: inline-block;}
button[class*="status-"] .icon-dynamic {margin-right: 7px;}
button.status-progress .icon-dynamic::before {content: '\21bb';
animation: iconFadeIn 0.5s ease-in-out forwards, iconSpin 0.5s linear infinite;}
button.status-done .icon-dynamic::before {content: '\2713';}
button.status-fail .icon-dynamic::before {content: '\2717';}
@keyframes iconFadeIn {
  0% {opacity: 0;}
  50% {opacity: 0.8;}
  100% {opacity: 1;}
}
@keyframes iconSpin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.icon-arrow-right::before{content: '\2192';}
.icon-arrow-round-right::before{content: '\21bb';}