.gradient {
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    animation: Gradient 15s ease infinite;
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes animate-from-dom {
    0% {
        transform: scale(1);
        max-height: 1000px;
        opacity: 1;
    }
    100% {
        transform: scale(0);
        max-height: 0;
        opacity: 0;
    }
}
* {
    display: flex;
    flex-flow: row wrap;
}

html {
    box-sizing: border-box;
    font-size: 1em;
    line-height: 1.4;
}

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

html,
body {
    flex: 100%;
    min-width: 100%;
    min-height: 100%;
    background: white;
    scroll-behavior: smooth;
}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

head,
style,
link,
title,
script,
router-outlet {
    display: none;
}

body,
div,
ol,
ul,
li,
a,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
input,
textarea,
button {
    font-family: var(--sans-serif);
    font-size-adjust: auto;
    font-weight: normal;
    font-size: 100%;
    text-decoration: none;
    padding: 0;
    margin: 0;
    border: 0;
    line-height: 1.2;
    list-style: none;
    list-style-type: none;
    color: rgb(var(--body-text));
}
body:focus,
div:focus,
ol:focus,
ul:focus,
li:focus,
a:focus,
h1:focus,
h2:focus,
h3:focus,
h4:focus,
h5:focus,
h6:focus,
form:focus,
fieldset:focus,
input:focus,
textarea:focus,
button:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

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

hr {
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input,
textarea {
    -webkit-user-select: text;
    user-select: text;
}

textarea,
select,
input,
button,
label {
    outline: none;
}

button,
label {
    user-select: none;
    cursor: pointer;
}

a {
    cursor: pointer;
}

i {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom;
    mask-position: bottom;
}

button,
input,
optgroup,
select,
textarea {
    border: none;
    background-color: unset;
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}

[contenteditable]:read-only {
    cursor: not-allowed;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    background-color: rgb(0, 0, 0) !important;
    color: red !important;
    -webkit-transition-property: background-color !important;
    -webkit-transition-delay: 99999s;
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

@-webkit-keyframes autofill {
    to {
        background: transparent;
    }
}
input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

/* ==========================================================================
   Base styles: opinionated defaults
========================================================================== */
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Customize the background color to match your design.
*/
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
   * A better looking default horizontal rule
   */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */
audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
   * Remove default fieldset styles.
   */
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
   * Allow only vertical resizing of textareas.
   */
textarea {
    resize: vertical;
}

/* ------------------------------------------------------------------------ *
    https://codepen.io/BRacicot/pen/vvJwxR?editors=1100
* ------------------------------------------------------------------------ */
h1,
h2,
h3,
h4 {
    font-family: larsseit-bold, sans-serif;
    line-height: 1;
    letter-spacing: -2px;
    margin: 0;
    text-transform: uppercase;
}
h1 span,
h2 span,
h3 span,
h4 span {
    width: 100%;
}

h1 {
    font-size: 60px;
    font-weight: bold;
}

h2 {
    margin: 0;
    font-size: 54px;
    font-weight: 500;
}

h3 {
    font-size: 22px;
}

h4 {
    font-size: 16px;
}

.subtext {
    color: rgb(var(--light-text));
    font-size: 11px;
}

strong {
    font-weight: 600;
    color: rgb(var(--dark-text));
}

p, span, a {
    font-family: "atlas-grotesk", sans-serif;
    display: inline-block;
}

p {
    margin: 5px 0;
    line-height: 30px;
}

a {
    color: rgb(var(--primary-color));
    cursor: pointer;
}
span {
    line-height: 1.5;
}

.redact,
.redacted {
    background-color: black;
    user-select: none;
}

.redacted {
    display: inline-block;
    height: 24px;
    width: 100%;
}

/* ------------------------------------------------------------------------ *
    FONT STACKS - see _variables-root.scss
* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ *
    CUSTOM FONTS
    Lets try to not use these for the sake of optimizing the overall page weight
* ------------------------------------------------------------------------ */
@font-face {
    font-family: "larsseit-bold";
    src: url("fonts/larsseit-bold.woff") format("woff2");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "atlas-grotesk";
    src: url("fonts/atlas-grotesk.woff") format("woffs");
    font-weight: normal;
    font-style: normal;
}
.show {
    display: flex !important;
}

.hide {
    display: none !important;
}

/* ==========================================================================
    Helper classes
========================================================================== */
/*
* Hide visually and from screen readers
*/
.hidden,
[hidden] {
    display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.visually-hidden {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    /* 1 */
}

/*
* Extends the .visually-hidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
    visibility: hidden;
}

/* ------------------------------------------------------------------------ *  
    ANIMATED BORDER
    https://codepen.io/gayane-gasparyan/pen/jOmaBQK
* ------------------------------------------------------------------------ */
@property --rotate {
    syntax: "<angle>";
    initial-value: 132deg;
    inherits: false;
}
:root {
    --card-height: 50vh;
    --card-width: var(--card-height);
}

.animated-border {
    position: relative;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: var(--card-width);
    height: var(--card-height);
    padding: 3px;
    background: rgb(var(--primary-background));
    border-radius: 6px;
    font-size: 1.5em;
}
.animated-border::before {
    content: "";
    position: absolute;
    top: -2%;
    left: -2%;
    width: 104%;
    height: 104%;
    z-index: -1;
    border-radius: 8px;
    background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
    animation: spin 2.5s linear infinite;
}
.animated-border::after {
    content: "";
    position: absolute;
    top: calc(var(--card-height) / 6);
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    z-index: -1;
    transform: scale(0.8);
    opacity: 1;
    transition: opacity 0.5s;
    filter: blur(calc(var(--card-height) / 6));
    background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
    animation: spin 2.5s linear infinite;
}

@keyframes spin {
    0% {
        --rotate: 0deg;
    }
    100% {
        --rotate: 360deg;
    }
}
/* ------------------------------------------------------------------------ *  
    HASHTAGS
    chips with style
    <ul class="hashtags">
        <li class="hashtag">nomorefreework</li>
    </ul>    
* ------------------------------------------------------------------------ */
.hashtags {
    align-items: center;
}

.hashtag {
    max-height: 45px;
    margin: 0 3px 10px 0;
    cursor: pointer;
}

/* ------------------------------------------------------------------------ *  
    COUNTDOWN
* ------------------------------------------------------------------------ */
.time {
    justify-content: space-between;
}

/* ------------------------------------------------------------------------ *  
    FLOATING "EMOTES" 
    Copying Twitter's streaming hearts an Twitch "emotes"
    Used on the Stream section
    https://codepen.io/rainner/pen/JJXOmQ?editors=0110
* ------------------------------------------------------------------------ */
.emotes {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 300px;
    z-index: 10;
}

.emote {
    position: absolute;
}

.emote-inner {
    position: relative;
    width: 50px;
    height: 50px;
}
.emote-inner:before, .emote-inner:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50px;
    background-color: inherit;
    width: 30px;
    height: 30px;
    color: #e1306c;
}
.emote-inner:after {
    content: attr(data-content);
}
.emote-inner.default {
    width: 30px;
    height: 30px;
    margin: 0 10px;
    transform: rotate(-45deg);
}
.emote-inner.default:before, .emote-inner.default:after {
    content: "";
    border-radius: 50%;
}
.emote-inner.default:before {
    top: -15px;
    left: 0;
}
.emote-inner.default:after {
    left: 15px;
    top: 0;
}

.heart,
.eth,
.xlm,
.ada,
.matic {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.heart {
    background-image: var(--heart);
}

.eth {
    background-image: var(--eth);
}

.xlm {
    background-image: var(--xlm);
}

.ada {
    background-image: var(--ada);
}

.matic {
    background-image: var(--matic);
}

/* ------------------------------------------------------------------------ *  
    HEXAGON
* ------------------------------------------------------------------------ */
.hexa {
    border: 0px;
    float: left;
    text-align: center;
    height: 35px;
    width: 60px;
    font-size: 22px;
    background: #f0f0f0;
    color: #3c3c3c;
    position: relative;
    margin-top: 15px;
}
.hexa:before {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    border-bottom: 15px solid #f0f0f0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    top: -15px;
}
.hexa:after {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 15px solid #f0f0f0;
    bottom: -15px;
}

/* ------------------------------------------------------------------------ *  
    CHIPS

* ------------------------------------------------------------------------ */
.chip {
    padding: 6px 12px;
    margin-right: 5px;
    border: 3px solid black;
    border-radius: 25px;
    font-size: 24px;
    color: black;
}

/* ------------------------------------------------------------------------ *  
    ROADMAP TIMELINE
    An ordered list should be used for this order list of events
    thus :nth-of-type() is perfect for selcting their layout
    https://codepen.io/krishnab/pen/OPwqbW
* ------------------------------------------------------------------------ */
.events {
    flex: 100%;
}
.events:before {
    content: " ";
    position: absolute;
    left: 50%;
    top: 0;
    display: block;
    width: 2px;
    height: 100%;
    margin-left: -1px;
    background: rgb(213, 213, 213);
    background: -moz-linear-gradient(top, rgba(213, 213, 213, 0) 0%, rgb(213, 213, 213) 8%, rgb(213, 213, 213) 92%, rgba(213, 213, 213, 0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(30, 87, 153)), color-stop(100%, rgb(125, 185, 232)));
    background: -webkit-linear-gradient(top, rgba(213, 213, 213, 0) 0%, rgb(213, 213, 213) 8%, rgb(213, 213, 213) 92%, rgba(213, 213, 213, 0) 100%);
    background: -o-linear-gradient(top, rgba(213, 213, 213, 0) 0%, rgb(213, 213, 213) 8%, rgb(213, 213, 213) 92%, rgba(213, 213, 213, 0) 100%);
    background: -ms-linear-gradient(top, rgba(213, 213, 213, 0) 0%, rgb(213, 213, 213) 8%, rgb(213, 213, 213) 92%, rgba(213, 213, 213, 0) 100%);
    background: linear-gradient(to bottom, rgba(213, 213, 213, 0) 0%, rgb(213, 213, 213) 8%, rgb(213, 213, 213) 92%, rgba(213, 213, 213, 0) 100%);
}

.event {
    position: relative;
    flex: 100%;
    min-height: 100px;
    margin-bottom: 20px;
}

.event__header {
    justify-content: center;
    width: 100%;
    height: 50px;
    margin-top: 20px;
    background-color: white;
}

.event__bullet {
    position: absolute;
    width: 16px;
    height: 10px;
    top: 0;
    left: calc(50% - 8px);
    border: 0;
    background: #00c4f3;
    z-index: 99;
}
.event__bullet:before {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    top: -4px;
    border-bottom: 4px solid #00c4f3;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}
.event__bullet:after {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    bottom: -4px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 4px solid #00c4f3;
}

.event__title {
    align-content: center;
}

.event__content {
    position: relative;
}

.event__desc {
    background-color: white;
    font-size: 35px;
}

/* ------------------------------------------------------------------------ *  
    SCROLL TO TOP LINK
* ------------------------------------------------------------------------ */
.scroll-top {
    position: fixed;
    top: calc(100% - 5vh);
    left: calc(100% - 10vw);
}

/* ------------------------------------------------------------------------ *
    GLOBAL CSS VARIABLES
    naming: https://medium.com/@amcdnl/theming-angular-with-css-variables-3c78a5b20b24
* ------------------------------------------------------------------------ */
:root {
    --primary-color: 33, 150, 243;
    --secondary-color: 245,248,250;
    --tertiary: 241,249,255;
    --red: 255, 132, 132;
    --green: 128, 255, 167;
    --primary-color-dark: 0,93,167;
    /* ------------------------------------------------------------------------ *
        FORM & INPUT COLORS
    * ------------------------------------------------------------------------ */
    --field-background: 61, 61, 61;
    --field-background-focused: 45, 45, 45;
    --static-border-color: rgba(33, 150, 243, 0.24);
    --hover-border-color: rgba(33, 150, 243, .87);
    --focused-border-color: 33, 150, 243;
    --disabled-border-color: rgba(33, 150, 243, 0.24);
    --append-prepend-disabled:#d7e9f8;
    --append-prepend-disabled-text:#7ac4ff;
    /* ------------------------------------------------------------------------ *
        BACKGROUNDS & SOLIDS
    * ------------------------------------------------------------------------ */
    --primary-background: 214, 214, 214;
    --secondary-background: 255, 255, 255;
    --dark-background: 41, 41, 41;
    --light-gray-bg: 245, 248, 254;
    --border: 218, 220, 224;
    --border-hover: 214, 214, 214;
    /* ------------------------------------------------------------------------ *
        TYPOGRAPHY
        https://material.io/guidelines/style/typography.html#typography-other-typographic-guidelines
    * ------------------------------------------------------------------------ */
    --sans-serif: "Helvetica Neue", Helvetica, "open sans", Arial, "Lucida Grande", sans-serif;
    --heading-text: 115,115,115;
    --body-text: 0,0,0;
    --light-text: 128,128,128;
    --dark-text: 115,115,115;
    --disabled-text: 128,128,128;
    /* ------------------------------------------------------------------------ *
        LAYOUT VALUES
    * ------------------------------------------------------------------------ */
    --grid-columns: auto-fit;
    --label-flex: 0 0 auto;
    /* ------------------------------------------------------------------------ *
        MISC & SHARED STYLES
    * ------------------------------------------------------------------------ */
    --chip: 112, 112, 112;
    --hr: 0, 0, 0, 0.12;
    --disabled-color: 239, 239, 239;
    --hexagon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cpath d='M38,2 L82,2 A12,12 0 0,1 94,10 L112,44 A12,12 0 0,1 112,56L94,90 A12,12 0 0,1 82,98L38,98A12,12 0 0,1 26,90L8,56A12,12 0 0,1 8,44L26,10A12,12 0 0,1 38,2' /%3E%3C/svg%3E");
    --heart: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="red" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path></svg>');
    --eth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='geometricPrecision' image-rendering='optimizeQuality' fill-rule='nonzero' viewBox='0 0 784.37 1277.39'%3E%3Cpath fill='%23343434' d='M392.07 0l-8.57 29.11v844.63l8.57 8.55 392.06-231.75z'/%3E%3Cpath fill='%238c8c8c' d='M392.07 0L0 650.54l392.07 231.75V472.33z'/%3E%3Cpath fill='%233c3c3b' d='M392.07 956.52l-4.83 5.89v300.87l4.83 14.1 392.3-552.49z'/%3E%3Cpath fill='%238c8c8c' d='M392.07 1277.38V956.52L0 724.89z'/%3E%3Cpath fill='%23141414' d='M392.07 882.29l392.06-231.75-392.06-178.21z'/%3E%3Cpath fill='%23393939' d='M0 650.54l392.07 231.75V472.33z'/%3E%3C/svg%3E");
    --xlm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:v='https://vecta.io/nano' viewBox='0 0 236.36 200'%3E%3Cpath fill='%2304b4e5' d='M203 26.16l-28.46 14.5-137.43 70a82.49 82.49 0 0 1-.7-10.69A81.87 81.87 0 0 1 158.2 28.6l16.29-8.3 2.43-1.24A100 100 0 0 0 18.18 100q0 3.82.29 7.61a18.19 18.19 0 0 1-9.88 17.58L0 129.57V150l25.29-12.89h0l8.19-4.18 8.07-4.11h0L186.43 55l16.28-8.29 33.65-17.15V9.14zM236.36 50L49.78 145l-16.28 8.31L0 170.38v20.41l33.27-16.95 28.46-14.5 137.57-70.1A83.45 83.45 0 0 1 200 100a81.87 81.87 0 0 1-121.91 71.36l-1 .53-17.66 9A100 100 0 0 0 218.18 100l-.29-7.68a18.2 18.2 0 0 1 9.87-17.58l8.6-4.38z'/%3E%3C/svg%3E");
    --ada: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:v='https://vecta.io/nano' viewBox='0 0 375 346.5' fill='%230033ad'%3E%3Cpath d='M102.8 172c-.8 13.9 9.9 25.8 23.8 26.6h1.5c14 0 25.3-11.3 25.2-25.3 0-14-11.3-25.3-25.3-25.2-13.4 0-24.5 10.5-25.2 23.9zm-94.2-6.5c-4.5-.3-8.4 3.2-8.6 7.7s3.2 8.4 7.7 8.6c4.5.3 8.3-3.2 8.6-7.7s-3.2-8.3-7.7-8.6zm92.6-140.1c4-2 5.6-7 3.6-11s-7-5.6-11-3.6-5.6 6.9-3.6 10.9c2 4.1 6.9 5.8 11 3.7-.1 0 0 0 0 0zm25.6 44.7c6.2-3.1 8.7-10.7 5.6-16.9s-10.7-8.7-16.9-5.6-8.7 10.7-5.6 16.9 10.7 8.7 16.9 5.6zm-86.2 30.7a10.46 10.46 0 0 0 14.4-3 10.46 10.46 0 0 0-3-14.4 10.46 10.46 0 0 0-14.4 3c-3.2 4.8-1.8 11.3 3 14.4zM55.9 161c-7-.4-12.9 4.9-13.3 11.9s4.9 12.9 11.9 13.3 12.9-4.9 13.3-11.9c.4-6.9-4.9-12.9-11.9-13.3zM42 245.7a10.43 10.43 0 0 0-4.6 14 10.43 10.43 0 0 0 14 4.6 10.43 10.43 0 0 0 4.6-14c-2.6-5.1-8.9-7.2-14-4.6zm49-110.8c6.9 4.5 16.1 2.6 20.5-4.3 4.5-6.9 2.6-16.1-4.3-20.5-6.9-4.5-16.1-2.6-20.5 4.3-4.5 6.8-2.6 16 4.3 20.5zm155.5-65.8c5.8 3.8 13.7 2.2 17.5-3.6s2.2-13.7-3.6-17.5-13.7-2.2-17.5 3.6c-3.9 5.9-2.3 13.7 3.6 17.5zm25.8-44.5c3.8 2.5 8.8 1.4 11.3-2.4s1.4-8.8-2.4-11.3-8.8-1.4-11.3 2.3c-2.4 3.8-1.3 8.9 2.4 11.4zm-23.9 123.3c-13.9-.8-25.9 9.9-26.6 23.8-.8 13.9 9.9 25.9 23.8 26.6h1.4c13.9 0 25.2-11.3 25.2-25.3.1-13.3-10.4-24.4-23.8-25.1h0zm-113.3-14.8c4.3 8.5 13 13.9 22.6 13.9 13.9 0 25.2-11.3 25.2-25.3 0-3.9-.9-7.8-2.7-11.4-6.3-12.5-21.5-17.5-33.9-11.2-12.5 6.4-17.5 21.6-11.2 34h0zM333 100.8c5.1-2.6 7.1-8.9 4.5-14s-8.9-7.1-14-4.5-7.1 8.8-4.6 13.9c2.7 5.1 8.9 7.2 14.1 4.6zm-64 8c-7.3 3.7-10.3 12.6-6.6 19.9s12.6 10.3 19.9 6.6 10.3-12.6 6.6-19.9-12.6-10.2-19.9-6.6zm-82.5-88c5.7.3 10.6-4.1 11-9.8S193.4.4 187.7 0c-5.7-.3-10.6 4-11 9.7a10.57 10.57 0 0 0 9.8 11.1zm-.1 65.3c8.2.5 15.2-5.8 15.6-14 .5-8.2-5.8-15.2-14-15.6-8.2-.5-15.2 5.8-15.6 14s5.8 15.2 14 15.6zM106 237.7c7.3-3.7 10.3-12.6 6.6-19.9s-12.6-10.3-19.9-6.6-10.3 12.6-6.6 19.9 12.6 10.3 19.9 6.6zm90-129.9c-7.6 11.7-4.4 27.3 7.3 34.9s27.3 4.4 34.9-7.3 4.4-27.3-7.3-34.9c-4.1-2.7-8.9-4.1-13.8-4.1-8.5 0-16.4 4.3-21.1 11.4zm43.9 105.6c-6.3-12.5-21.5-17.5-33.9-11.2-12.5 6.3-17.5 21.5-11.2 33.9 6.3 12.5 21.5 17.5 33.9 11.2 12.4-6.2 17.5-21.2 11.3-33.7 0-.1 0-.1-.1-.2zm44.1-1.8c-6.9-4.5-16.1-2.6-20.5 4.3-4.5 6.9-2.6 16.1 4.3 20.5 6.9 4.5 16.1 2.6 20.5-4.3 4.5-6.8 2.6-16-4.3-20.5zm48.4-37.9c.4-7-4.9-12.9-11.9-13.3s-12.9 4.9-13.3 11.9 4.9 12.9 11.9 13.3c6.9.4 12.9-5 13.3-11.9zm34.9-9c-4.5-.3-8.4 3.2-8.6 7.7s3.2 8.4 7.7 8.6c4.5.3 8.3-3.2 8.6-7.7a8.23 8.23 0 0 0-7.7-8.6zm-32.9 81a10.46 10.46 0 0 0-14.4 3 10.46 10.46 0 0 0 3 14.4 10.46 10.46 0 0 0 14.4-3c3.2-4.8 1.8-11.3-3-14.4zm-231.8 76.2c-3.8-2.5-8.8-1.4-11.3 2.3-2.5 3.8-1.4 8.8 2.3 11.3 3.8 2.5 8.8 1.4 11.3-2.3 2.6-3.7 1.5-8.8-2.3-11.3zm171.2-.8c-4 2-5.6 7-3.6 11s7 5.6 11 3.6 5.6-6.9 3.6-10.9c-2-4.1-6.9-5.8-11-3.7h0zM179 238.7c7.6-11.7 4.4-27.3-7.3-35-11.7-7.6-27.3-4.4-35 7.3s-4.4 27.3 7.3 35c4.1 2.7 8.9 4.1 13.8 4.1 8.6.1 16.5-4.2 21.2-11.4zm-50.5 38.7c-5.8-3.8-13.7-2.2-17.5 3.6s-2.2 13.7 3.6 17.5 13.7 2.2 17.5-3.6c3.9-5.8 2.3-13.7-3.6-17.5zm58.9 48.3c-5.7-.3-10.6 4.1-11 9.8s4.1 10.6 9.8 11c5.7.3 10.6-4 11-9.7a10.57 10.57 0 0 0-9.8-11.1zm.1-65.3c-8.2-.5-15.2 5.8-15.6 14-.5 8.2 5.8 15.2 14 15.6s15.2-5.8 15.6-14c.5-8.1-5.8-15.2-14-15.6zm60.7 16c-6.2 3.2-8.7 10.8-5.5 17s10.8 8.7 17 5.5c6.2-3.1 8.7-10.7 5.6-16.9-3.2-6.2-10.8-8.8-17.1-5.6z'/%3E%3C/svg%3E");
    --matic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:v='https://vecta.io/nano' viewBox='0 0 38.4 33.5'%3E%3Cpath d='M29 10.2c-.7-.4-1.6-.4-2.4 0L21 13.5l-3.8 2.1-5.5 3.3c-.7.4-1.6.4-2.4 0L5 16.3c-.7-.4-1.2-1.2-1.2-2.1v-5c0-.8.4-1.6 1.2-2.1l4.3-2.5c.7-.4 1.6-.4 2.4 0L16 7.2c.7.4 1.2 1.2 1.2 2.1v3.3l3.8-2.2V7c0-.8-.4-1.6-1.2-2.1l-8-4.7c-.7-.4-1.6-.4-2.4 0L1.2 5C.4 5.4 0 6.2 0 7v9.4c0 .8.4 1.6 1.2 2.1l8.1 4.7c.7.4 1.6.4 2.4 0l5.5-3.2 3.8-2.2 5.5-3.2c.7-.4 1.6-.4 2.4 0l4.3 2.5c.7.4 1.2 1.2 1.2 2.1v5c0 .8-.4 1.6-1.2 2.1L29 28.8c-.7.4-1.6.4-2.4 0l-4.3-2.5c-.7-.4-1.2-1.2-1.2-2.1V21l-3.8 2.2v3.3c0 .8.4 1.6 1.2 2.1l8.1 4.7c.7.4 1.6.4 2.4 0l8.1-4.7c.7-.4 1.2-1.2 1.2-2.1V17c0-.8-.4-1.6-1.2-2.1L29 10.2z' fill='%238247e5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------------ *
    COMPONENT LIST
    this is for a list of nested components
* ------------------------------------------------------------------------ */
button {
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 3px;
    border: 1px solid #000;
    color: black;
    text-decoration: none;
}
button:active {
    top: 0.025em;
}
button * {
    pointer-events: none;
}
button i {
    min-width: 25px;
    height: 100%;
    pointer-events: none;
}

/* ------------------------------------------------------------------------ *
    BASE LAYOUT
* ------------------------------------------------------------------------ */
main {
    justify-content: center;
    flex: 1;
}

.content {
    justify-content: center;
    align-items: center;
    flex: 100%;
    min-height: 50vh;
    margin: 3vh 3vw;
}
.content.dark {
    background: rgb(var(--dark-background));
}
.content.dark div,
.content.dark h1 {
    color: rgb(var(--light-text));
}

.centered {
    justify-content: center;
    align-content: center;
    width: 100%;
    max-width: 1060px;
}

header {
    flex: 100%;
    justify-content: center;
    padding: 25px 0;
    text-align: center;
}

.left,
.right {
    position: relative;
    align-items: center;
    width: 100%;
}
.left p,
.right p {
    font-size: 60px;
}

.content__body {
    position: relative;
    flex: 100%;
    padding: 3vh 0;
}
.content__body .hexagon {
    position: absolute;
    top: 40px;
    left: calc(100% - 100px);
    width: 100px;
}

/* ------------------------------------------------------------------------ *  
    NAVIGATION
* ------------------------------------------------------------------------ */
.navigation {
    flex: 100%;
    justify-content: center;
}

.nav {
    width: 100%;
    max-width: 1060px;
}

/* ------------------------------------------------------------------------ *  
    TOP FOLD SECTION
* ------------------------------------------------------------------------ */
.top {
    position: relative;
    min-height: 100vh;
    padding: 0 !important;
    z-index: 0;
}
.top .centered-wrapper {
    justify-content: center;
    align-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.top .centered {
    height: 100%;
}
.top .right {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.top header {
    justify-content: center;
    align-self: flex-end;
    padding: 20px 0;
}
.top h1 {
    text-align: left;
    color: #610bd9;
}
.top .desc {
    flex: 1;
    align-self: flex-start;
    text-align: center;
    font-size: 1.4rem;
}
.top .desc__text {
    flex: 100%;
    font-size: 24px;
}
.top .desc__ctas {
    flex: 100%;
    justify-content: center;
    padding: 10px 0 10px 0;
}
.top .ctas {
    justify-content: center;
    width: 100%;
}
.top .time {
    width: 100%;
    margin-bottom: 5vh;
}
/* ------------------------------------------------------------------------ *  
    MISC STYLES
* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ *  
    INTRO - 
    Your work makes professional networking obsolete
    You are here
* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ *  
    REVOLUTIONARY SOCIAL POSTS SECTION
* ------------------------------------------------------------------------ */
.social {
    flex: 100%;
    min-height: 800px;
}

.social__level {
    display: none;
    opacity: 0;
    transition: all 2s ease-in-out;
}
.social__level.active {
    display: flex;
    opacity: 1;
}

.range-slider {
    display: flex;
    align-items: center;
    margin: 60px 0 5vh 0;
}

.range-slider {
    width: 100%;
}

.range-slider__range {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #d7dcdf;
    outline: none;
    padding: 0;
    margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
    position: relative;
    top: -5px;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2c3e50;
    cursor: pointer;
    transition: background 0.15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
    background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
    background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: #2c3e50;
    cursor: pointer;
    transition: background 0.15s ease-in-out;
}
.range-slider__range::-moz-range-thumb:hover {
    background: #1abc9c;
}
.range-slider__range:active::-moz-range-thumb {
    background: #1abc9c;
}
.range-slider__range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
}

.range-slider__value {
    display: inline-block;
    position: relative;
    width: 60px;
    color: #fff;
    line-height: 20px;
    text-align: center;
    border-radius: 3px;
    background: #2c3e50;
    padding: 5px 10px;
    margin-left: 8px;
}
.range-slider__value:after {
    position: absolute;
    top: 8px;
    left: -7px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 7px solid #2c3e50;
    border-bottom: 7px solid transparent;
    content: "";
}

::-moz-range-track {
    background: #d7dcdf;
    border: 0;
}

input::-moz-focus-inner,
input::-moz-focus-outer {
    border: 0;
}

.def__descs li {
    display: list-item;
    list-style: decimal;
    width: 100%;
}
.def__descs span {
    display: inline-block;
    width: 100%;
}

/* ------------------------------------------------------------------------ *  
    VERIFIED
* ------------------------------------------------------------------------ */
.verified img,
.verified picture {
    width: 100%;
}

/* ------------------------------------------------------------------------ *  
    RESUME
* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ *  
    GRAD
* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ *  
    PRODUCT
* ------------------------------------------------------------------------ */
.product p {
    font-size: 20px;
    line-height: 1.4;
}

/* ------------------------------------------------------------------------ *  
    PAID
* ------------------------------------------------------------------------ */
.cam__wrapper {
    position: relative;
    flex: 100%;
    min-height: 500px;
    max-height: 90vh;
}

.cam__video {
    width: 100%;
    min-height: 500px;
    max-height: 90vh;
    background: rgb(var(--dark-background));
}

.cam__btn {
    display: inline-block;
}

.cam__footer {
    flex: 1;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.thank-btn {
    justify-content: center;
    width: 40px;
    height: 40px;
}

/* ------------------------------------------------------------------------ *  
    JOBS
* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ *  
    REFERRAL BONUSES
* ------------------------------------------------------------------------ */
.referral .content__body {
    min-height: 500px;
}

.notifs {
    position: relative;
    overflow: hidden;
}

.notif {
    position: absolute;
    overflow: hidden;
    border-radius: 20px;
    transition: 0.5s ease-in-out;
}
.notif.left, .notif.right {
    width: 75%;
}
.notif.right.in {
    transform: translate(33%, 0);
}
.notif.right.out {
    transform: translate(131%, 0);
}
.notif.left.in {
    transform: translate(0, 0);
}
.notif.left.out {
    transform: translate(-131%, 0);
}

/* ------------------------------------------------------------------------ *  
    ANONYMOUS
* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ *  
    RECRUITERS
* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ *  
    ROADMAP
* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ *  
    TEAM
* ------------------------------------------------------------------------ */
.team__img {
    border-radius: 50%;
    margin-bottom: 5vh;
}

.team__mate p {
    font-size: 16px;
}

/* ------------------------------------------------------------------------ *  
    APPLY
* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ *  
    TWITTER CONSENSUS
* ------------------------------------------------------------------------ */
.twitter {
    justify-content: center;
    align-content: flex-start;
    width: 100%;
    max-width: 1060px;
    min-height: 100vh;
    padding: 0;
}

.twitter-tweet {
    max-width: 340px;
}

#observed {
    flex: 100%;
    height: 10vh;
    background: red;
}

.grid {
    align-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    min-height: 100vh;
    position: relative;
}

.grid__item {
    width: 340px;
}

@media only screen and (min-width: 768px) {
    /* ------------------------------------------------------------------------ *
        BASE LAYOUT
    * ------------------------------------------------------------------------ */
    .content {
        padding: 0 3vw;
        margin: 3vh 0;
    }

    .content__body .hexagon {
        top: 40px;
        left: calc(100% - 50px);
        width: 100px;
    }

    .left,
.right {
        width: 50%;
    }

    .left {
        padding-right: 20px;
    }

    .right {
        padding-left: 20px;
    }

    /* ------------------------------------------------------------------------ *  
        TOP FOLD SECTION
    * ------------------------------------------------------------------------ */
    .top header {
        justify-content: flex-start;
    }
    .top .left {
        width: 55%;
    }
    .top .right {
        width: 45%;
    }
    .top .ctas {
        justify-content: flex-start;
    }
    .top .desc__text {
        text-align: left;
    }
    .top .desc__ctas {
        justify-content: flex-start;
    }

    /* ------------------------------------------------------------------------ *  
        ROADMAP TIMELINE
        An ordered list should be used for this order list of events
        thus :nth-of-type() is perfect for selcting their layout
        https://codepen.io/krishnab/pen/OPwqbW
    * ------------------------------------------------------------------------ */
    .events {
        flex: 100%;
    }
    .events li:nth-of-type(even) .event__content {
        left: calc(50% + 1px);
        padding-left: 40px;
    }
    .events li:nth-of-type(even) .event__content .event__bullet {
        right: calc(100% - 7px);
        left: auto;
    }

    .event__content {
        width: calc(50% - 1px);
        padding-right: 40px;
    }

    .event__header {
        margin-top: 0;
    }

    .event__bullet {
        left: calc(100% - 7px);
        top: 21px;
    }

    /* ------------------------------------------------------------------------ *  
        TWITTER CONSENSUS
    * ------------------------------------------------------------------------ */
    .twitter {
        padding: 0;
    }
}
@media print {
    /* ==========================================================================
        Print styles.
        Inlined to avoid the additional HTTP request:
        https://www.phpied.com/delay-loading-your-print-css/
    ========================================================================== */
}
@media print {
    *,
*::before,
*::after {
        background: #fff !important;
        color: #000 !important;
        /* Black prints faster */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
a:visited {
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }

    abbr[title]::after {
        content: " (" attr(title) ")";
    }

    /*
    * Don't show links that are fragment identifiers,
    * or use the `javascript:` pseudo protocol
    */
    a[href^="#"]::after,
a[href^="javascript:"]::after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }

    pre,
blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    tr,
img {
        page-break-inside: avoid;
    }

    p,
h2,
h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
h3 {
        page-break-after: avoid;
    }
}
@media print {
    body {
        background: rgb(255, 255, 255);
        overflow: hidden;
    }
}
@media print {
    .navigation,
aside {
        background: rgb(255, 255, 255);
    }
}
@media print {
    aside {
        flex-flow: column;
    }
}

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