/**
 * Linked Style Sheet
 *
 * Root: app/pages/home/index.tsx
 */

/**
 * Source: project/app/shared/styles/system.css
 */
/**
 * Variables
 */

:root {
  --size-0: 0px;
  --size-1: 280px;
  --size-2: 400px;
  --size-3: 600px; /* breakpoint 0 */
  --size-4: 900px; /* breakpoint 1 */
  --size-5: 1280px; /* breakpoint 2 */
  --size-6: 1800px; /* breakpoint 3 */
  --size-7: 1920px;

  --space-0: 0px;
  --space-1: 10px;
  --space-2: 15px;
  --space-3: 20px;
  --space-4: 30px;
  --space-5: 40px;
  --space-6: 60px;
  --space-7: 80px;
  --space-8: 100px;

  --font-size-0: 0px;
  --font-size-1: 14px;
  --font-size-2: 18px;
  --font-size-3: 24px;
  --font-size-4: 32px;
  --font-size-5: 38px;
  --font-size-6: 44px;
  --font-size-7: 56px;

  --line-height-0: 0px;
  --line-height-1: 17px;
  --line-height-2: 25px;
  --line-height-3: 34px;
  --line-height-4: 38px;
  --line-height-5: 46px;
  --line-height-6: 53px;
  --line-height-7: 67px;

  --radii-0: 0px;
  --radii-1: 2px;
  --radii-2: 4px;
  --radii-3: 8px;

  --font-colfax: Colfax, sans-serif;
  --font-fira-mono: 'Fira Mono', monospace;

  --box-shadow-high: 0px 10px 10px rgba(16, 44, 66, 0.05);
  --box-shadow-mid: 0px 10px 20px rgba(16, 44, 66, 0.1);
  --box-shadow-low: 0px 4px 4px rgba(0, 0, 0, 0.1);

  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-black-off: #111111;
  --color-dark: #102C42;
  --color-darker: #164C77;
  --color-grey50: #6E8499;
  --color-grey32: #A0AFBE;
  --color-grey15: #D2DAE2;
  --color-grey08: #E4EBF2;
  --color-blue: #49A9E7;
  --color-blue-light: #EBF6FC;
  --color-blue-dark: #297EC2;
  --color-blue-very-dark: #102C42;
  --color-coral: #F37865;
  --color-teal: #00B893;
  --color-purple: #6D71CA;
  --color-green: #5AC558;
  --color-green-dark: #369E39;
  --color-yellow: #F2D64C;
  --color-red: #EB5757;
}

/**
 * Colors
 */

.clr-white {
  color: var(--color-white);
}

.clr-black {
  color: var(--color-black);
}

.clr-black-off {
  color: var(--color-black-off);
}

.clr-dark {
  color: var(--color-dark);
}

.clr-darker {
  color: var(--color-darker);
}

.clr-grey50 {
  color: var(--color-grey50);
}

.clr-grey32 {
  color: var(--color-grey32);
}

.clr-grey15 {
  color: var(--color-grey15);
}

.clr-grey08 {
  color: var(--color-grey08);
}

.clr-blue {
  color: var(--color-blue);
}

.clr-blue-light {
  color: var(--color-blue-light);
}

.clr-blue-dark {
  color: var(--color-blue-dark);
}

.clr-coral {
  color: var(--color-coral);
}

.clr-teal {
  color: var(--color-teal);
}

.clr-purple {
  color: var(--color-purple);
}

.clr-green {
  color: var(--color-green);
}

.clr-green-dark {
  color: var(--color-green-dark);
}

.clr-yellow {
  color: var(--color-yellow);
}

.clr-red {
  color: var(--color-red);
}


/**
 * Spacing
 */

.center {
  text-align: center;
}

.auto {
  margin-left: auto;
  margin-right: auto;
}

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

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

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

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

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

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

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

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

/**
 * Source: project/app/shared/styles/global.css
 */


/**
 * Font Faces
 */
@font-face {
  font-family: Colfax;
  font-weight: normal;
  font-style: normal;
  src:
    url("https://elements.dev/assets/app/shared/fonts/colfax/Colfax-Regular.woff2?version=f2f2332c757f431450b4") format("woff2"),
    url("https://elements.dev/assets/app/shared/fonts/colfax/Colfax-Regular.woff?version=941d74dee3becc1b456c") format("woff");
}

@font-face {
  font-family: Colfax;
  font-weight: normal;
  font-style: italic;
  src:
    url("https://elements.dev/assets/app/shared/fonts/colfax/Colfax-RegularItalic.woff2?version=d1e5f04d2c372da3f4b5") format("woff2"),
    url("https://elements.dev/assets/app/shared/fonts/colfax/Colfax-RegularItalic.woff?version=2c1495d431ebda5a74ba") format("woff");
}

@font-face {
  font-family: Colfax;
  font-weight: bold;
  font-style: normal;
  src:
    url("https://elements.dev/assets/app/shared/fonts/colfax/Colfax-Bold.woff2?version=3d8af5e2d2f275b15951") format("woff2"),
    url("https://elements.dev/assets/app/shared/fonts/colfax/Colfax-Bold.woff?version=9b341424de94a8072306") format("woff");
}

@font-face {
  font-family: "Fira Mono";
  font-weight: normal;
  font-style: normal;
  src:
    url("https://elements.dev/assets/app/shared/fonts/fira-mono/FiraMono-Regular.woff2?version=75f6ffe092cd85fa2213") format("woff2"),
    url("https://elements.dev/assets/app/shared/fonts/fira-mono/FiraMono-Regular.woff?version=4b44703b6e2db3a59dd8") format("woff");
}

@font-face {
  font-family: "Fira Mono";
  font-weight: bold;
  font-style: normal;
  src:
    url("https://elements.dev/assets/app/shared/fonts/fira-mono/FiraMono-Bold.woff2?version=a166847291611490cfe5") format("woff2"),
    url("https://elements.dev/assets/app/shared/fonts/fira-mono/FiraMono-Bold.woff?version=fadecdd54629957d3fab") format("woff");
}

/**
 * Global Reset (v2.0 | 20110126)
 * http://meyerweb.com/eric/tools/css/reset/
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
}

/**
 * Global Styles
 */

* > * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  min-height: 100vh;
  color: var(--color-dark);
  scroll-behavior: auto;
  text-rendering: optimizeSpeed;
  font-family: var(--font-colfax);
  font-weight: normal;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

h1 {
  font-size: var(--font-size-6);
  line-height: var(--line-height-6);
  margin-bottom: var(--space-4);
}

h2 {
  font-size: var(--font-size-5);
  line-height: var(--line-height-5);
  margin-bottom: var(--space-3);
}

h3 {
  font-size: var(--font-size-4);
  line-height: var(--line-height-4);
  margin-bottom: var(--space-5);
}

h4 {
  font-size: var(--font-size-3);
  line-height: var(--line-height-3);
  margin-bottom: var(--space-3);
}

h5 {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
}

h6 {
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  letter-spacing: 1px;
}

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

/**
 * Source: project/app/pages/home/index.css
 */


.home-page {
}

.home-page button#install {
  margin-top: var(--space-4);
}

.home-page .form-container {
  margin: auto;
  max-width: var(--size-2);
}

.home-page a.learn-more {
  display: block;
  text-align: right;
}

.home-page .header p {
  margin-bottom: var(--space-3);
}

.home-page p.success {
  color: var(--color-green-dark);
  text-align: center;
}

.home-page h3.watch-demos {
  margin: 0px;
}

/**
 * Source: project/app/shared/components/button/index.css
 */


/**
 * base
 */

.button {
  display: inline-block;
  font-family: var(--font-colfax);
  font-weight: bold;
  border: none;
  background: none;
  border-radius: var(--radii-2);
  cursor: pointer;
  box-shadow: var(--box-shadow-low);
  opacity: 1;
  transition: background-color 300ms, box-shadow 300ms;
  outline: none;
}

.button:disabled {
  opacity: 0.7;
  cursor: default;
}

/**
 * sizes
 */

.button--small {
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  padding: 8px 20px;
}

.button--medium {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  padding: 12px 40px;
}

.button--large {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  padding: 12px 40px;
  width: 100%;
  max-width: 315px;
}

.button--huge {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  padding: 12px 40px;
  width: 100%;
}

/**
 * variants
 */

.button--primary {
  background-color: var(--color-blue);
  color: var(--color-white);
}

.button--primary:hover {
  background-color: var(--color-blue-dark);
}

.button--secondary {
  background-color: var(--color-white);
  color: var(--color-dark);
}

.button--secondary:hover {
  background-color: var(--color-grey08);
}

.button--secondary-confirm {
  background-color: var(--color-white);
  color: var(--color-blue);
}

.button--secondary-confirm:hover {
  background-color: var(--color-grey08);
}

.button--success {
  background-color: var(--color-green);
}

.button--link {
  background: none;
  color: var(--color-blue);
  border: none;
  box-shadow: none;
}

.button--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  border: 1px solid;
  border-color: var(--color-grey15);
  width: 52px;
  height: 52px;
  padding: var(--space-0);
  box-shadow: none;
}

.button--icon:not(:disabled):hover {
  border-color: var(--color-grey32);
}

.button--icon-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  border: 1px solid;
  border-color: var(--color-grey08);
  width: 52px;
  height: 52px;
  padding: var(--space-0);
  box-shadow: var(--box-shadow-high);
}

.button--action {
  background-color: var(--color-white);
  color: var(--color-dark);
  border: 1px solid;
  border-color: var(--color-grey15);
  box-shadow: none;
  padding: var(--space-4) var(--space-8);
}

.button--action:not(:disabled):hover,
.button--action:not(:disabled):active {
  box-shadow: var(--box-shadow-high);
}

.button--active {
  border-color: var(--color-blue);
  box-shadow: var(--box-shadow-high);
}

.button--active.button--action {
  background-color: var(--color-blue-light);
}

/**
 * Source: project/app/shared/components/container/index.css
 */


.container {
	position: relative;
	box-shadow: var(--box-shadow-mid);
	overflow: hidden;
}

.container--primary {
	background-color: var(--color-white);
	border: 1px solid;
	border-color: var(--color-grey15);
	padding: var(--space-4);
	border-radius: var(--radii-3);
}

.container--secondary {
	background-color: var(--color-white);
	padding: var(--space-4);
	border-radius: var(--radii-3);
	max-width: var(--size-3);
	text-align: left;
}

@media (min-width: 900px) {
	.container--secondary {
		padding: var(--space-6);
	}
}

/**
 * Source: project/app/shared/components/drop-in/index.css
 */


.drop-in {
	display: inline-block;
	opacity: 0;
	visibility: hidden;
	transform: translateY(30px);
	transition: all 700ms;
}

.drop-in--visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}

/**
 * Source: project/app/shared/components/flex/index.css
 */
/* @import 'app/shared/styles/global'; */

.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/**
 * variants
 */

.flex--top {
  align-items: flex-start;
}

.flex--center {
  align-items: center;
}

.flex--bottom {
  align-items: flex-end;
}

/**
 * Source: project/app/shared/components/bullet/index.css
 */


.bullet {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	column-gap: var(--space-3);
	row-gap: var(--space-2);
}

.bullet .icon {
	color: var(--color-blue);
}

.bullet:not(:last-of-type) {
	margin-bottom: var(--space-3);
}

.bullet--block {
	align-items: center;
	margin-bottom: var(--space-0);
}

.bullet--block *:last-child {
	grid-area: 2 / 2;
}

/**
 * Source: project/app/shared/components/icon/index.css
 */


/**
 * base
 */

.icon {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	vertical-align: middle;
}

.icon--utility {
  width: 24px;
  height: 24px;
}

.icon--illustrative {
  width: 40px;
  height: 40px;
  color: var(--color-blue);
}

.icon--link {
  width: 32px;
  height: 32px;
}

.icon--inline {
	width: 1.2em;
	height: 1.2em;
}

.icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.icon--inline svg {
	position: relative;
	top: 0.125em;
}

/**
 * Source: project/app/shared/components/footer/index.css
 */


.footer {
	border-top: 1px solid var(--color-grey15);
}

.footer__upper {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--space-7);
	margin-bottom: var(--space-3);
}

.footer-beta__upper {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.footer__upper .logo,
.footer-beta__upper .logo {
	margin-bottom: var(--space-5);
}

.footer__links {
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--space-5);
}

.footer__list {
	display: block;
	text-align: left;
	vertical-align: top;
	list-style-type: none;
	min-width: 100px;
}

.footer__social a:not(:last-child) {
	margin-right: var(--space-4);
}

.footer__links .footer__list .icon {
	color: var(--color-dark);
}

/*
This is most likely not the best solution but I believe that the best course of
action is to leave out the scale variant class names from .link (example .link--small .link--medium)
and just place the small the medium styles in manually.
*/

.footer .link {
	font-size: var(--font-size-1);
	line-height: var(--line-height-1);
}

@media (min-width: 900px) {
	.footer .link {
		font-size: var(--font-size-2);
		line-height: var(--line-height-2);
	}
}

@media (min-width: 1280px) {
	.footer__upper {
		grid-template-columns: auto 1fr auto;
	}

	.footer__links {
		justify-content: space-around;
	}
}

/**
 * Source: project/app/shared/components/link/index.css
 */


/**
 * base
 */

.link {
  position: relative;
  color: var(--color-dark);
  font-family: var(--font-colfax);
  font-weight: normal;
  text-decoration: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  border: none;
}

.link:hover {
  opacity: 0.7;
}

.link--active {
  font-weight: bold;
  opacity: 1;
}

/**
 * sizes
 */

.link--small {
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
}

.link--medium {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
}

.link--large {
  font-size: var(--font-size-3);
  line-height: var(--line-height-3);
}

/**
 * variants
 */

.link--primary {
  color: var(--color-blue);
  font-weight: bold;
}

.link--secondary {
  font-weight: bold;
  letter-spacing: 1.5px;
  color: var(--color-grey32);
}

.link--secondary.link--active {
  color: var(--color-dark);
}

.link--secondary::after {
  content: "";
  background-color: var(--color-dark);
  position: absolute;
  left: var(--space-0);
  bottom: -10px;
  width: 100%;
  height: 2px;
  opacity: 0;
  visibility: hidden;
}

.link--secondary.link--active::after {
  visibility: visible;
  opacity: 1;
}

/**
 * Source: project/app/shared/components/logo/index.css
 */


/**
 * base
 */

.logo {
  height: 18px;
}

.logo img {
  max-width: 100%;
  max-height: 100%;
}

/**
 * responsive
 */

@media (min-width: 900px) {
  /**
   * base
   */

  .logo {
    height: 28px;
  }
}

/**
 * Source: project/app/shared/components/section/index.css
 */


.section {
	position: relative;
	padding-right: var(--space-3);
	padding-left: var(--space-3);
	overflow: hidden;
}

.section--grid {
	background-color: var(--color-blue-light);
	background-position: top center;
	background-size: 30px 30px;
	background-image: linear-gradient(to right, rgba(73, 169, 231, 0.1) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(73, 169, 231, 0.1) 1px, transparent 1px);
}

.section--grid-command {
	background-image: url("https://elements.dev/assets/app/shared/images/logos/bg-icon-light.svg?version=b5ae7574b24dc4c13141");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	margin-top: var(--space-5);
	margin-bottom: var(--space-5);
}

.section--blue {
	background-color: var(--color-blue-light);
}

.section--tiny {
	padding: var(--space-4) var(--space-0);
}

.section--small {
	padding-bottom: var(--space-4);
	padding-top: var(--space-4);
}

.section--medium {
	padding-bottom: var(--space-5);
	padding-top: var(--space-5);
}

.section--large {
	padding-bottom: var(--space-6);
	padding-top: var(--space-6);
}

.section__inner {
	margin: auto;
}

.section__inner--small {
	min-width: var(--size-1);
	max-width: var(--size-2);
}

.section__inner--large {
	min-width: var(--size-1);
	max-width: var(--size-5);
}

@media (min-width: 900px) {
	.section {
		padding-right: var(--space-5);
		padding-left: var(--space-5);
	}

	.section--tiny {
		padding: var(--space-5) 0;
	}

	.section--small {
		padding-bottom: var(--space-5);
		padding-top: var(--space-5);
	}

	.section--medium {
		padding-bottom: var(--space-6);
		padding-top: var(--space-6);
	}

	.section--large {
		padding-bottom: var(--space-7);
		padding-top: var(--space-7);
	}
}

@media (min-width: 1280px) {
	.section--grid-command {
		margin-bottom: var(--space-7);
		margin-top: var(--space-7);
	}

	.section--tiny {
		padding-bottom: var(--space-6);
		padding-top: var(--space-6);
	}

	.section--small {
		padding-bottom: var(--space-6);
		padding-top: var(--space-6);
	}

	.section--medium {
		padding-bottom: var(--space-7);
		padding-top: var(--space-7);
	}

	.section--large {
		padding-bottom: var(--space-8);
		padding-top: var(--space-8);
	}
}

/**
 * Source: project/app/shared/components/separator/index.css
 */


.separator {
	display: block;
	background-color: var(--color-grey15);
	border: none;
	width: 100%;
	height: 1px;
}

/**
 * Source: project/app/shared/components/text/index.css
 */


.text {
	font-family: var(--font-colfax);
	font-weight: normal;
}

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

.text--code {
	font-family: var(--font-fira-mono);
}

.text--small {
	font-size: var(--font-size-1);
	line-height: var(--line-height-1);
}

.text--medium {
	font-size: var(--font-size-2);
	line-height: var(--line-height-2);
	max-width: var(--size-4);
}

.text--large {
	font-size: var(--font-size-3);
	line-height: var(--line-height-3);
}

/**
 * Source: project/app/shared/components/grid/index.css
 */


.grid {
  display: grid;
  align-items: center;
  column-gap: var(--space-6);
  row-gap: var(--space-4);
}

.grid--two {
  grid-template-columns: 1fr;
}

.grid--ping {
  grid-template-columns: 1fr;
}

.grid--pong {
  grid-template-columns: 1fr;
}

.grid--three {
  grid-template-columns: 1fr;
  align-items: start;
  column-gap: var(--space-4);
  row-gap: var(--space-5);
}

@media (min-width: 900px) {
  .grid--three {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1280px) {
  .grid--two {
    grid-template-columns: 1fr 1fr;
  }

  .grid--ping {
    grid-template-columns: 1fr 2fr;
  }

  .grid--pong {
    grid-template-columns: 2fr 1fr;
  }

  .grid--three {
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: var(--space-6);
  }
}

@media (min-width: 1800px) {
  .grid {
    display: grid;
    align-items: center;
    column-gap: var(--space-6);
    row-gap: var(--space-5);
  }
}

/**
 * Source: project/app/shared/components/hamburger/index.css
 */
 

/**
 * base
 */

.hamburger {
	cursor: pointer;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.hamburger:hover {
	opacity: 0.7;
}

.hamburger__inner {
	--line-width: 22px;
	--line-height: 2px;
	--line-spacing: 4px;
	--line-border-radius: 2px;

	display: inline-block;
	position: relative;
	width: var(--line-width);
	height: calc(var(--line-height) * 3 + var(--line-spacing) * 2);
}

.hamburger__content {
	display: block;
	top: 50%;
	margin-top: calc(var(--line-height) / -2);
	transition-duration: 0.075s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	width: var(--line-width);
	height: var(--line-height);
	border-radius: var(--line-border-radius);
	position: absolute;
	-moz-transition-property: transform;
	-webkit-transition-property: transform;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease;
}

.hamburger__content::before {
	content: "";
	display: block;
	width: var(--line-width);
	height: var(--line-height);
	border-radius: var(--line-border-radius);
	position: absolute;
	-moz-transition-property: transform;
	-webkit-transition-property: transform;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease;
	top: calc((var(--line-spacing) + var(--line-height)) * -1);
	transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}

.hamburger__content::after {
	content: "";
	display: block;
	width: var(--line-width);
	height: var(--line-height);
	border-radius: var(--line-border-radius);
	position: absolute;
	-moz-transition-property: transform;
	-webkit-transition-property: transform;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease;
	bottom: calc((var(--line-spacing) + var(--line-height)) * -1);
	transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--open .hamburger__content {
	transform: rotate(45deg);
	transition-delay: 0.12s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--open .hamburger__content::before {
	top: 0;
	opacity: 0;
	transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}

.hamburger--open .hamburger__content::after {
	bottom: 0;
	transform: rotate(-90deg);
	transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/**
 * variants
 */

.hamburger--light .hamburger__content,
.hamburger--light .hamburger__content:before,
.hamburger--light .hamburger__content:after {
	background-color: var(--color-white);
}

.hamburger--dark .hamburger__content,
.hamburger--dark .hamburger__content:before,
.hamburger--dark .hamburger__content:after {
	background-color: var(--color-dark);
}

/**
 * Source: project/app/shared/components/header/index.css
 */
 

/**
 * base
 */

.header {
  z-index: 10;
  padding-right: var(--space-3);
  padding-left: var(--space-3);
  position: relative;
  transition: background 150ms;
  border-bottom: 1px solid var(--color-grey08);
  background-color: var(--color-white);
}

.header--dark {
  border-color: transparent;
  background-color: var(--color-black-off);
}

.header--dark a {
  color: var(--color-white);
}

.header__logos > *:first-child {
  display: none;
}

.header .hamburger {
  display: initial;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: var(--size-1);
  max-width: var(--size-5);
  height: 50px;
  margin: auto;
}

.header__nav {
  flex: 1;
  /*display: none;*/
  margin-left: var(--space-6);
}

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

.header__cta {
  display: none;
}

.header__user {
  position: relative;
}

.header__user > a {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

.header__user .icon {
  color: var(--color-blue);
  transition: transform 200ms;
  transform: rotate(0deg);
}

.header--open .header__user .icon {
  transform: rotate(180deg);
}

.header__menu {
  display: none;
  background-color: var(--color-white);
  border-radius: var(--radii-2);
  border: 1px solid var(--color-grey15);
  box-shadow: var(--box-shadow-mid);
  position: absolute;
  right: var(--space-0);
  top: calc(100% + 15px);
  min-width: 250px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px);
  transition: all 200ms;
  z-index: 10;
}

.header__menu a {
  display: block;
  color: var(--color-dark);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-0);
}

.header__nav a {
  font-size: var(--font-size-1);
}

.header__nav a:not(:last-child) {
  margin-right: var(--space-4);
}

.header__menu a:not(:last-child) {
  border-bottom: 1px solid var(--color-grey15);
}

.header__mobilemenu {
  display: initial;
  background-color: var(--color-dark);
  border-top: 1px solid var(--color-grey50);
  position: fixed;
  left: var(--space-0);
  right: var(--space-0);
  top: 50px;
  height: calc(100vh - 49px);
  padding: var(--space-6) var(--space-5);
  overflow: auto;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 150ms, visibility 200ms;
}

.header__mobilemenu a {
  display: block;
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.header__mobilemenu .button {
  margin-top: var(--space-3);
  margin-bottom: var(--space-5);
}

.header__nav .icon {
  color: var(--color-blue);
}

.header__mobilemenu .icon {
  size: 30px;
  color: var(--color-blue);
}

.header--open .header__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.header--open .header__mobilemenu {
  visibility: visible;
  transform: translateY(-1px);
}

/**
 * responsive
 */

@media (min-width: 900px) {
  .header {
    padding-right: var(--space-5);
    padding-left: var(--space-5);
  }

  .header__inner {
    height: 100px;
    max-width: var(--size-7);
  }

  .header__mobilemenu {
    top: 100px;
    height: calc(100vh - 99px);
  }

  .header__nav {
    display: initial;
    margin-left: var(--space-6);
  }

  .header__nav a {
    font-size: var(--font-size-2);
  }
}

@media (min-width: 1280px) {
  .header__logos > *:first-child {
    display: initial;
  }

  .header__logos > *:last-child {
    display: none;
  }

  .header__nav {
    display: initial;
    margin-left: var(--space-6);
  }

  .header__nav a:not(:last-child) {
    margin-right: var(--space-5);
  }

  .header__cta {
    display: initial;
  }

  .header__menu {
    display: initial;
  }

  .header__mobilemenu {
    display: none;
  }

  .header .hamburger {
    display: none;
  }

  .header__cta .button {
    margin-left: var(--space-4);
  }
}

@media (max-width: 1280px) {
  .header--open {
    background-color: var(--color-dark);
  }

  .header--open a {
    color: var(--color-white);
  }
}

@media (min-width: 1800px) {
  .header__nav {
    margin-left: var(--space-8);
  }

  .header__nav a:not(:last-child) {
    margin-right: var(--space-6);
  }
}

/**
 * Source: project/app/shared/components/heading/index.css
 */


.heading {
  font-family: var(--font-colfax);
  font-weight: bold;
}

h1.heading {
  font-size: var(--font-size-6);
  line-height: var(--line-height-6);
  margin-bottom: var(--space-4);
}

h2.heading {
  font-size: var(--font-size-5);
  line-height: var(--line-height-5);
  margin-bottom: var(--space-3);
}

h3.heading {
  font-size: var(--font-size-4);
  line-height: var(--line-height-4);
}

h4.heading {
  font-size: var(--font-size-3);
  line-height: var(--line-height-3);
  margin-bottom: var(--space-3);
}

h5.heading {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
}

h6.heading {
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  letter-spacing: 1px;
}

@media (min-width: 900px) {
  h1.heading {
    font-size: var(--font-size-7);
    line-height: var(--line-height-7);
  }

  h2.heading {
    font-size: var(--font-size-6);
    line-height: var(--line-height-6);
  }
}

/**
 * Source: project/app/shared/components/input/index.css
 */


.input {
	position: relative;
	width: 100%;
}

.input input {
	display: inline-block;
	background-color: var(--color-white);
	color: var(--color-dark);
	font-family: var(--font-colfax);
	font-size: var(--font-size-2);
	line-height: var(--line-height-2);
	width: 100%;
	outline: none;
}

.input input:disabled {
	opacity: 1;
}

.input input::placeholder,
.input input::-ms-input-placeholder {
	color: var(--color-grey32);
}

.input--primary input {
	border: 1px solid var(--color-grey15);
	border-radius: var(--radii-2);
	padding: 14px 15px 11px;
}

.input--primary input:hover,
.input--primary input:focus {
	border-color: var(--color-grey32);
}

.input--primary input:disabled {
	background-color: var(--color-blue-light);
	border: none;
}

.input--secondary {
	/* no styles */
}

.input--inline input {
	padding: var(--space-0);
	margin: var(--space-0);
	border: none;
	background: none;
}

.input--error input {
	color: var(--color-red);
	border-color: var(--color-red);
}

.input--error input:hover,
.input--error input:focus {
	border-color: var(--color-red);
}

.input .text {
	color: var(--color-grey32);
}

.input--primary .text {
	position: relative;
	display: block;
	align-items: center;
	margin-top: var(--space-1);
	font-size: var(--font-size-1);
	line-height: var(--line-height-1);
}

.input--secondary .text {
	position: relative;
	display: block;
	margin-top: var(--space-1);
	font-size: var(--font-size-1);
	line-height: var(--line-height-1);
}

.input--inline .text {
	position: absolute;
	left: var(--space-0);
	top: 100%;
	font-size: 12px;
	line-height: 12px;
}

.input--error .text {
	color: var(--color-red);
}

@media (min-width: 1280px) {
	.input--primary .text {
		position: absolute;
		display: flex;
		top: var(--space-0);
		bottom: var(--space-0);
		left: calc(100% + 20px);
		width: 200px;
		margin-top: var(--space-0);
		font-size: var(--font-size-2);
		line-height: var(--line-height-2);
	}
}

/**
 * Source: project/app/shared/components/install/index.css
 */
.install {
}

.install.dark {
  background-color: var(--color-blue-very-dark);
}

.install.dark h2 {
  color: var(--color-white);
}

.install.dark p {
  color: var(--color-white);
}

.install.light {
  background-color: var(--color-blue-light);
}

/**
 * Source: project/app/shared/components/learn-card/index.css
 */


.learn-card {
	position: relative;
	display: inline-block;
	background-color: var(--color-white);
	border: 1px solid var(--color-grey08);
	border-radius: var(--radii-3);
	width: 100%;
  max-width: 640px;
	box-shadow: var(--box-shadow-high);
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow 100ms, transform 300ms;
}

/* icon variants */
.learn-card--article .icon {
	color: var(--color-green);
}

.learn-card--video .icon {
	color: var(--color-purple);
}

.learn-card--podcast .icon {
	color: var(--color-coral);
}

.learn-card:hover {
	box-shadow: 0px 16px 10px rgba(16, 44, 66, 0.05);
	transform: translateY(-6px);
}

.learn-card__header {
	position: relative;
	text-shadow: 2px 2px var(--color-dark);
	background-color: var(--color-dark);
	color: var(--color-white);
	padding: var(--space-4);
	overflow: hidden;
	z-index: 1;
}

.learn-card__header .icon {
	margin-bottom: var(--space-5);
}

.learn-card__header h4 {
	margin-bottom: var(--space-6);
}

.learn-card__inner {
	padding: var(--space-4);
  color: var(--color-dark);
}

.learn-card__inner .tag {
	margin-top: var(--space-2);
}

/**
 * Source: project/app/shared/components/tag/index.css
 */


.tag {
	display: inline-block;
	background-color: var(--color-grey08);
	color: var(--color-grey50);
	border-radius: 20px;
	padding: 8px 18px;
	text-shadow: none;
  margin-right: var(--space-2);
}

/**
 * Source: project/app/shared/components/texture/index.css
 */


.texture {
	background-repeat: no-repeat;
	background-position: top left;
	position: absolute;
	width: 440px;
	height: 440px;
	opacity: 0.4;
	z-index: -1;
}

/* variants for background image */
.texture--mono {
	background: url("https://elements.dev/assets/app/shared/images/textures/mono.svg?version=1eba64e6f7792f59ad84");
}

.texture--green {
	background: url("https://elements.dev/assets/app/shared/images/textures/green.svg?version=e524c3b4783efb6d5024");
}

.texture--light {
	background: url("https://elements.dev/assets/app/shared/images/textures/light.svg?version=9520c167611f2b478727");
}

.texture--coral {
	background: url("https://elements.dev/assets/app/shared/images/textures/coral.svg?version=12b28c5806f9f1ef3c9c");
}

.texture--purple {
	background: url("https://elements.dev/assets/app/shared/images/textures/purple.svg?version=d2fb1ec34c48386143e3");
}

/* variants for scale */
.texture--small {
	background-size: 440px 440px;
	bottom: -270px;
	right: -130px;
}

.texture--medium {
	background-size: 520px 520px;
	bottom: -130px;
	right: -40px;
}

.texture--large {
	background-size: 600px 600px;
	bottom: -120px;
	right: 0px;
}

@media (min-width: 900px) {
	.texture {
		opacity: 1;
	}
}

/**
 * Source: project/app/shared/components/terminal/index.css
 */


.terminal {
  display: none;
}

@media (min-width: 660px) {
  .terminal {
    display: block;
  }
}