@font-face {
    font-family: basier_circleregular;
    src: url("basiercircle-regular-webfont.eot")/*tpa=https://heyslate.com/fonts/basiercircle-regular-webfont.eot*/;
    src: url("basiercircle-regular-webfont.eot-#iefix")/*tpa=https://heyslate.com/fonts/basiercircle-regular-webfont.eot?#iefix*/ format("embedded-opentype"),url("basiercircle-regular-webfont.woff2")/*tpa=https://heyslate.com/fonts/basiercircle-regular-webfont.woff2*/ format("woff2"),url("basiercircle-regular-webfont.woff")/*tpa=https://heyslate.com/fonts/basiercircle-regular-webfont.woff*/ format("woff"),url("basiercircle-regular-webfont.ttf")/*tpa=https://heyslate.com/fonts/basiercircle-regular-webfont.ttf*/ format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: basier_circlesemibold;
    src: url("basiercircle-semibold-webfont.eot")/*tpa=https://heyslate.com/fonts/basiercircle-semibold-webfont.eot*/;
    src: url("basiercircle-semibold-webfont.eot-#iefix")/*tpa=https://heyslate.com/fonts/basiercircle-semibold-webfont.eot?#iefix*/ format("embedded-opentype"),url("basiercircle-semibold-webfont.woff2")/*tpa=https://heyslate.com/fonts/basiercircle-semibold-webfont.woff2*/ format("woff2"),url("basiercircle-semibold-webfont.woff")/*tpa=https://heyslate.com/fonts/basiercircle-semibold-webfont.woff*/ format("woff"),url("basiercircle-semibold-webfont.ttf")/*tpa=https://heyslate.com/fonts/basiercircle-semibold-webfont.ttf*/ format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: basier_circlemedium;
    src: url("basiercircle-medium-webfont.eot")/*tpa=https://heyslate.com/fonts/basiercircle-medium-webfont.eot*/;
    src: url("basiercircle-medium-webfont.eot-#iefix")/*tpa=https://heyslate.com/fonts/basiercircle-medium-webfont.eot?#iefix*/ format("embedded-opentype"),url("basiercircle-medium-webfont.woff2")/*tpa=https://heyslate.com/fonts/basiercircle-medium-webfont.woff2*/ format("woff2"),url("basiercircle-medium-webfont.woff")/*tpa=https://heyslate.com/fonts/basiercircle-medium-webfont.woff*/ format("woff"),url("basiercircle-medium-webfont.ttf")/*tpa=https://heyslate.com/fonts/basiercircle-medium-webfont.ttf*/ format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: basier_circlebold;
    src: url("basiercircle-bold-webfont.eot")/*tpa=https://heyslate.com/fonts/basiercircle-bold-webfont.eot*/;
    src: url("basiercircle-bold-webfont.eot-#iefix")/*tpa=https://heyslate.com/fonts/basiercircle-bold-webfont.eot?#iefix*/ format("embedded-opentype"),url("basiercircle-bold-webfont.woff2")/*tpa=https://heyslate.com/fonts/basiercircle-bold-webfont.woff2*/ format("woff2"),url("basiercircle-bold-webfont.woff")/*tpa=https://heyslate.com/fonts/basiercircle-bold-webfont.woff*/ format("woff"),url("basiercircle-bold-webfont.ttf")/*tpa=https://heyslate.com/fonts/basiercircle-bold-webfont.ttf*/ format("truetype");
    font-weight: 400;
    font-style: normal
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

html,body {
    font-size: 8px;
    font-family: basier_circleregular,sans-serif,-apple-system;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    overflow-x: hidden
}

html.invite,body.invite {
    background: #f4f4f8
}

h1,h2,h3,h4,h5,h6,a,p,span,small,ul,ol,dl,label,select,input,button,table {
    font-size: 2rem;
    font-family: basier_circleregular,sans-serif,-apple-system;
    font-weight: 300;
    margin: 0;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

img {
    display: block;
    width: 100%
}

@media(min-width: 1024px) {
    img {
        width:auto
    }
}

em {
    display: inline-block;
    font-size: 2rem;
    color: #2c2a35;
    background: #ffd371;
    font-style: normal;
    padding: .5rem 1rem;
    border-radius: .5rem;
    margin-bottom: 2rem
}

h1,h2 {
    font-weight: 900;
    font-family: basier_circlebold,sans-serif,-apple-system;
    font-size: 4.5rem;
    line-height: 1;
    color: #2c2a35;
    letter-spacing: -.1rem
}

@media(min-width: 640px) {
    h1,h2 {
        font-size:6rem
    }
}

@media(min-width: 1024px) {
    h1,h2 {
        font-size:7rem
    }
}

@media(min-width: 1280px) {
    h1,h2 {
        font-size:3rem
    }
}

h1 {
    position: relative;
    margin-top: 0
}

a {
    color: #334ac0
}

p {
    color: #545465;
    font-size: 2rem
}

@media(min-width: 640px) {
    p {
        font-size:2.5rem;
        line-height: 1.6
    }
}

form {
    position: relative;
    width: 100%
}

form input+input {
    margin-top: 2rem
}

form input {
    font-size: 2rem;
    width: 100%;
    border: 1px solid rgba(21,32,43,.2);
    background: #fff;
    outline: none;
    box-shadow: inset 0 -1px 0 0 inherit;
    padding: 1.5rem 2rem;
    flex: 1;
    border-radius: .5rem
}

form input:focus {
    border-color: #00a1f9;
    box-shadow: inset 0 0 0 1px #00a1f9
}

form button {
    margin-top: 2rem
}

form button:hover {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.2)
}

button,.btn {
    width: auto;
    border: none;
    height: 6rem;
    border-radius: .5rem;
    outline: none;
    cursor: pointer;
    color: #fff;
    transition: all .1s ease-in-out;
    margin-top: 4rem;
    white-space: nowrap;
    text-decoration: none;
    text-align: left;
    display: inline-flex;
    align-items: center;
    background: #334ac0;
    padding: 1.5rem 2rem
}

button svg,.btn svg {
    margin-right: 1rem
}

button span,.btn span {
    color: #fff;
    transition: all .1s ease-in-out
}

button:hover,.btn:hover {
    background: #2c2a35
}

button__secondary,.btn__secondary {
    background: rgba(44,42,53,.05)
}

button__secondary span,.btn__secondary span {
    color: #334ac0
}

button__secondary:hover span,.btn__secondary:hover span {
    color: #fff
}

header {
    padding: 4rem 0
}

@media(min-width: 768px) {
    header {
        position:absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: 2
    }
}

header div {
    display: flex;
    align-items: center;
    justify-content: space-between
}

header img {
    width: auto;
    height: 4rem
}

header .btn {
    margin: 0
}

header ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: space-between;
    align-items: center
}

header ul li {
    margin-left: 4rem
}

header ul li:first-child,header ul li:last-child {
    display: none
}

@media(min-width: 640px) {
    header ul li:first-child,header ul li:last-child {
        display:block
    }
}

header ul li a {
    text-decoration: none
}

header ul li a.video {
    opacity: 1
}

footer {
    width: 100%;
    background: #2c2a35;
    padding: 4rem 0
}

@media(min-width: 640px) {
    footer {
        padding:8rem 0
    }
}

@media(min-width: 1024px) {
    footer {
        padding:6rem 0;
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center
    }
}

@media(min-width: 1024px) {
    footer .wrap {
        display:flex;
        align-items: center
    }
}

footer aside {
    margin-bottom: 4rem
}

@media(min-width: 1024px) {
    footer aside {
        width:60%
    }
}

footer aside h2 {
    color: #fff;
    width: 100%
}

footer aside p,footer aside form {
    margin: 4rem 0 0;
    max-width: 100%
}

@media(min-width: 1024px) and (max-width:1366px) {
    footer aside p,footer aside form {
        max-width:90rem
    }
}

@media(min-width: 1280px) {
    footer aside p,footer aside form {
        max-width:70rem
    }
}

footer aside p {
    color: #fff
}

footer aside p+div {
    color: #8fbc8f;
    font-size: 2rem;
    height: 8rem;
    display: flex;
    align-items: center;
    margin: 4rem 0 0
}

@media(min-width: 640px) {
    footer aside p+div {
        font-size:2.5rem;
        line-height: 1.6
    }
}

footer aside input {
    color: #fff;
    background: rgba(255,255,255,.05);
    border-color: transparent
}

footer figure {
    margin: 0 auto;
    border-radius: 2rem;
    overflow: hidden;
    width: 100%
}

@media(min-width: 1024px) {
    footer figure {
        position:absolute;
        right: -30rem;
        top: 50%;
        transform: translateY(-50%);
        width: 75rem
    }
}

@media(min-width: 1366px) {
    footer figure {
        width:90rem
    }
}

@media(min-width: 1366px) {
    footer figure {
        right:-15rem
    }
}

footer figure img {
    display: block
}

footer figure video {
    display: block;
    width: 100%;
    height: 100%
}

.wrapper {
    width: 100%;
    overflow: hidden
}

.wrap {
    width: 100%;
    max-width: 1366px;
    margin: 0 auto;
    padding: 0 4rem
}

@media(min-width: 640px) {
    .wrap {
        padding:0 6rem
    }
}

@media(min-width: 1024px) {
    .wrap {
        padding:0 8rem
    }
}

@media(min-width: 1366px) {
    .wrap {
        padding:0 12rem
    }
}

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center
}

@media(min-width: 768px) {
    .hero {
        flex-direction:row;
        align-items: flex-end
    }
}

.hero__cta {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 2rem 0
}

@media(min-width: 768px) {
    .hero__cta {
        padding:5rem 0
    }
}

@media(min-width: 1024px) {
    .hero__cta {
        padding:5rem 0
    }
}

.hero__cta>div {
    position: relative;
    z-index: 1
}

@media(min-width: 768px) and (max-width:1280px) {
    .hero__cta>div {
        width:65%
    }
}

@media(min-width: 1280px) and (max-width:1366px) {
    .hero__cta>div {
        width:50%
    }
}

.hero__cta p {
    margin: 4rem 0 0
}

@media(min-width: 1024px) {
    .hero__cta p {
        max-width:70rem
    }
}

.hero figure {
    margin: 0;
    width: 20rem
}

@media(min-width: 768px) and (max-width:1366px) {
    .hero figure {
        position:absolute;
        bottom: 0;
        right: -5rem;
        width: 50rem
    }
}

@media(min-width: 1024px) {
    .hero figure {
        width:60rem;
        right: -5rem
    }
}

@media(min-width: 1280px) {
    .hero figure {
        width:60rem;
        right: 15rem
    }
}

@media(min-width: 1366px) {
    .hero figure {
        width:70rem;
        margin-right: -10rem
    }
}

.hero figure img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto
}

.single {
    padding: 128px 0
}

@media(min-width: 1366px) {
    .single {
        padding:192px 0
    }
}

.single h1,.single p,.single ul {
    margin: 32px 0
}

@media(min-width: 1024px) {
    .single h1,.single p,.single ul {
        margin-left:auto;
        margin-right: auto
    }
}

.single p:first-child {
    margin-top: 0
}

.single p:last-child {
    margin-bottom: 0
}

.single ul {
    padding: 0 20px;
    list-style-position: outside
}

.single ul li {
    padding: 0;
    margin: 0
}

.dark {
    background: #334ac0;
    padding-bottom: 8rem
}

.dark h2 {
    color: #fff;
    margin: 4rem 0
}

@media(min-width: 1024px) {
    .dark h2 {
        margin:10rem 0;
        width: 80%
    }
}

@media(min-width: 1366px) {
    .dark h2 {
        width:100%
    }
}

@media(min-width: 768px) {
    .dark .grid {
        display:flex;
        flex-wrap: wrap;
        margin: 2rem -4rem
    }
}

.dark .grid .item {
    padding: 2rem 0
}

@media(min-width: 768px) {
    .dark .grid .item {
        flex-basis:50%;
        padding: 2rem 4rem
    }
}

@media(min-width: 1024px) {
    .dark .grid .item {
        flex-basis:33.33%
    }
}

.dark .grid svg {
    margin-bottom: 2rem
}

.dark .grid p {
    font-size: 2rem;
    opacity: .5
}

.dark h3 {
    color: #ffd371;
    font-size: 2.5rem;
    margin-bottom: 2rem
}

.dark p {
    font-size: 2rem;
    color: #fff
}

@media(min-width: 1024px) {
    .dark p {
        font-size:2.5rem
    }
}

.dark p+p,.dark p+ul {
    margin-top: 4rem
}

.images {
    position: relative;
    display: flex;
    flex-wrap: wrap
}

.images figure {
    position: relative;
    margin: -8rem auto 0;
    width: 100%
}

.images figure.person {
    position: absolute;
    z-index: 3;
    width: 24rem;
    top: -12rem;
    right: 0
}

.images figure.person img {
    width: 100%;
    height: auto
}

.images figure img {
    position: relative;
    z-index: 2;
    width: 100%
}

.images figure::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    background: #00a1f9;
    transform: translate3d(-50%,-25%,0);
    filter: blur(60px)
}

.note {
    opacity: .5
}

html.demo #demo {
    display: flex
}

#demo {
    position: fixed;
    display: none;
    background: rgba(0,0,0,.8);
    height: 100vh;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

#demo div {
    position: relative;
    background: #000;
    border-radius: 16px;
    padding: 16px;
    margin: auto;
    width: 80vw;
    height: 80vh
}

#demo div iframe {
    display: block;
    width: 100%;
    height: 100%
}

.meta {
    width: 100%;
    background: #2c2a35
}

.meta hr {
    height: 1px;
    background: #fff;
    border: none;
    margin: 0;
    opacity: .05
}

.meta div {
    padding: 2rem 4rem
}

@media(min-width: 400px) {
    .meta div {
        display:flex;
        align-items: center;
        justify-content: space-between
    }
}

.meta span {
    display: block;
    color: #fff;
    opacity: .2
}

.meta span a {
    color: #fff
}

.meta svg {
    display: block;
    opacity: .2
}

@media(max-width: 400px) {
    .meta svg {
        margin-top:2rem
    }
}

hr {
    display: block;
    margin: 0;
    height: 1px;
    border: none;
    opacity: 0
}