/* Global */

:root {
/* Colors */
	--primary: #f01c55;
	--secondary: #266ede;
/*
	--secondary: #596acc;
*/
	--tertiary: #8f47de;
	--background-tone-1: #f1f1f1;
	--background-tone-2: rgba(255,255,255, .5);
	--background-tone-3: #fff;
	--content-tone-1: #444;
	--content-tone-2: #ddd;
	--content-tone-3: #111;

	@media (prefers-color-scheme: dark) {
		--background-tone-1: #222;
		--background-tone-2: rgba(0,0,0, .2);
		--background-tone-3: #111;
		--content-tone-1: #aaa;
		--content-tone-2: #666;
		--content-tone-3: #ddd;
	}

/* Fonts */
	--helvetica: 'Helvetica', 'Arial', sans-serif;
	--helvetica-neue: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	--courier: 'Courier Prime', 'Helvetica', sans-serif;
	--georgia: 'Georgia', 'Times New Roman', serif;
}

*, * :before, * :after {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}

@font-face {
	font-family: "Courier Prime";
	src: url("CourierPrime-Regular.ttf") format("truetype");
	font-weight: 300;
	font-style: none;
}
/*
@font-face {
	font-family: "Blocks Edit";
	src: url("Blocks-Edit.ttf") format("truetype");
}
*/
body {
/*
	background-image: url("img/intro-bg.png");
	background-size: 100%;
	background-position-y: 110px;
*/
	background-color: var(--background-tone-1);
	font-family: var(--helvetica);
	color: var(--content-tone-1);
	font-size: 18px;
	line-height: 1.4;
	font-weight: 300;
	text-align: center;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
	cursor: default;

	@media (min-width: 800px) {
		font-size: 20px;
	}
  @media (min-width: 1100px) {
    font-size: 22px;
  }
}

a {
	color: var(--secondary);
	text-decoration: underline;
	transition: all 100ms ease;
	font-weight: 400;

	&.on {
		color: var(--tertiary);
	}
}

h1, h2, h3 {
	display: inline-block;
	width: 100%;
	font-family: var(--helvetica-neue);
	font-weight: 300;
	line-height: 1.1;
	text-wrap: balance;
}

h1 {
	margin-top: 28px;
	margin-bottom: -7px;
/*
	background: -webkit-linear-gradient(#ee434b, #e32f85);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
*/
	font-size: 36px;
	color: var(--primary);

	@media (min-width: 600px) {
		margin-top: 27px;
		margin-bottom: -8px;
		font-size: 40px;
	}
	@media (min-width: 800px) {
		margin-top: 26px;
		margin-bottom: -9px;
		font-size: 44px;
	}
	@media (min-width: 980px) {
		margin-top: 25px;
		margin-bottom: -10px;
		font-size: 52px;
	}

	&:first-child {
		margin-top: -7px;

		@media (min-width: 600px) {
			margin-top: -8px;
		}
		@media (min-width: 800px) {
			margin-top: -9px;
		}
		@media (min-width: 980px) {
			margin-top: -10px;
		}
	}
}

h2 {
	margin-top: 49px;
	margin-bottom: -6px;
/*
	background: linear-gradient(#984fd0, #2c7eca);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
*/
	font-size: 32px;
	color: var(--tertiary);

	@media (min-width: 800px) {
		margin-top: 48px;
		margin-bottom: -7px;
		font-size: 36px;
	}
	@media (min-width: 980px) {
		margin-top: 46px;
		margin-bottom: -9px;
		font-size: 44px;
	}

	&:first-child {
		margin-top: -6px;

		@media (min-width: 800px) {
			margin-top: -7px;
		}
		@media (min-width: 980px) {
			margin-top: -9px;
		}
	}
}

h1 + h2 {
	margin-top: 21px;

	@media (min-width: 800px) {
		margin-top: 22px;
	}
	@media (min-width: 980px) {
		margin-top: 24px;
	}
}
h3 + h2, h4 + h2 {
	margin-top: -6px;

	@media (min-width: 800px) {
		margin-top: -3px;
	}
	@media (min-width: 980px) {
		margin-top: -1px;
	}
}

h3 {
	margin-top: 35px;
	margin-bottom: -5px;
/*
	background: -webkit-linear-gradient(#444, #777);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
*/
	font-size: 24px;
	color: var(--content-tone-1);

	@media (min-width: 800px) {
		margin-top: 36px;
		margin-bottom: -4px;
		font-size: 26px;
	}
	@media (min-width: 930px) {
		margin-top: 35px;
		margin-bottom: -5px;
		font-size: 28px;
	}

	&:first-child {
		margin-top: -5px;

		@media (min-width: 800px) {
			margin-top: -4px;
		}
		@media (min-width: 930px) {
			margin-top: -5px;
		}
	}
}

h2 + h3 {
	margin-top: 20px;

	@media (min-width: 800px) {
		margin-top: 19px;
	}
	@media (min-width: 930px) {
		margin-top: 20px;
	}
}
h4 + h3 {
	margin-top: -5px;

	@media (min-width: 800px) {
		margin-top: -4px;
	}
	@media (min-width: 930px) {
		margin-top: -5px;
	}
}

p, ul, ol, cite {
	margin-top: 19px;
	margin-bottom: -6px;

	@media (min-width: 800px) {
		margin-top: 20px;
		margin-bottom: -5px;
	}
	@media (min-width: 1100px) {
		margin-top: 19px;
		margin-bottom: -6px;
	}
}
ul li, ol li {
	margin-bottom: 10px;
	margin-left: 30px;

	&:last-child {
		margin-bottom: 0;
	}
}
ul {
	list-style: square;
}
cite {
	display: block;
}

em {
	background: linear-gradient(90deg, rgba(255, 227, 89, .75) 50%, rgba(255, 255, 255, 0) 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
	font-style: normal;
	animation: 1s highlight forwards;
	animation-timeline: view(block 30% 20%);

	@media (prefers-color-scheme: dark) {
		color: #444;
	}
}
@keyframes highlight {
	from {
		background-position: 100% 100%;
	}
	to {
		background-position: 0 0;
	}
}

strong, strong a {
	font-weight: 500;
}

small {
	display: inline-block;
	font-size: 20px;
}

/* Secondary nav */

section.headernav {
	margin-bottom: 50px;
	background: linear-gradient(162deg, #8f4da8, #4980c2);
	padding-top: 75px;
	padding-bottom: 15px;

	@media (max-width: 800px) {
		padding-top: 75px;
	}

	& .container {
	  margin-bottom: 0;
	}
	& h1 {
		width: 100%;
		margin: 0;
		-webkit-text-fill-color: initial;
		color: #d3b8fe;
		font-size: 20px;

		@media (min-width: 600px) {
			font-size: 22px;
		}
		@media (min-width: 960px) {
			display: inline-block;
			width: auto;
		}

		& a {
			color: #d3b8fe;
			text-decoration: none;
		}
		& a:hover, a.on {
			color: #fff;
		}
	}
	& nav.alt {
	  display: inline-block;
		margin-top: 2px;
		color: #fff;
		font-size: 18px;

		@media (min-width: 960px) {
	    float: right;
	  }

		& ul {
			display: inline-block;
			margin-right: 50px;
		  margin-top: 0;
		  font-size: 16px;

      @media (min-width: 800px) {
        font-size: 18px;
      }

      &:last-child {
      	margin-right: 0;
      }

			& li {
			  list-style: none;
			  display: inline-block;
			  margin-bottom: 0;
			  margin-right: 15px;
			  margin-left: 0;

				@media (min-width: 960px) {
			    margin-right: 0;
				  margin-left: 20px;
				}
			}
			& a {
			  color: #bfc5fc;
			  text-decoration: none;

				&:hover, &.on {
				  color: #fff;
				}
			}
		}
	}
}

/* Main container */

.container {
	display: block;
	margin: 0 auto;
	margin-bottom: 80px;
	width: 100%;
	text-align: left;
	padding: 0 20px;

	@media (min-width: 980px) {
		width: 80ch;
		padding: 0;
	}

	& header {
		position: relative;
		display: inline-block;
		border-bottom: #ccc 1px solid;
		width: 100%;
	}
}
.container:has(.doc) {
	padding: 0;

	@media (min-width: 480px) {
		padding: 0 20px;
	}

	.doc {
		border-radius: 0;

		@media (min-width: 480px) {
			border-radius: 10px;
		}
	}
}

.container.introduce {
	& p {
		font-size: 26px;
		line-height: 36px;

		@media (max-width: 980px) {
			font-size: 20px;
		}
	}
}

.container.cta {
	text-align: center;

	& p {
		margin-bottom: 0;
	}
	& span {
		display: inline-block;
		margin-right: 10px;
		font-weight: 400;

		@media (max-width: 980px) {
			margin-bottom: 10px;
			font-size: 18px;
			line-height: 1.3em;
		}
	}
	& .btn-main {
		margin-right: 10px;

		@media (max-width: 980px) {
			font-size: 18px;
		}
	}
}

/* Grid layout */

.column-x2, .column-x3, .column-x4, .column-x5, .column-x6, .column-x7, .column-x8, .column-x9, .column-x10, .column-x12 { margin-bottom: 20px; }

@media (min-width: 480px) {
	.row {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: 1fr auto;
		gap: 15px;
	}
	.column-x2, .column-x3, .column-x4, .column-x5, .column-x6, .column-x7, .column-x8, .column-x9, .column-x10, .column-x12 { margin-bottom: 0; }
	.column-x2, .column-x3, .column-x4, .column-x5, .column-x6, .column-x7 { grid-column: auto / span 6; }
	.column-x8, .column-x9, .column-x10, .column-x12 { grid-column: auto / span 12; }
}
@media (min-width: 800px) {
	.column-x2 { grid-column: auto / span 2; }
	.column-x3 { grid-column: auto / span 3; }
	.column-x4 { grid-column: auto / span 4; }
	.column-x5 { grid-column: auto / span 5; }
	.column-x6 { grid-column: auto / span 6; }
	.column-x7 { grid-column: auto / span 7; }
	.column-x8 { grid-column: auto / span 8; }
	.column-x9 { grid-column: auto / span 9; }
	.column-x10 { grid-column: auto / span 10; }
	.column-x12 { grid-column: auto / span 12; }
}

ul.row {
	list-style: none;

	& li {
		margin-bottom: 0;
		margin-left: 0;
	}
}

/* Buttons */

.btn-main, .btn-alt {
	display: inline-block;
	margin: 0;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
	border-radius: 8px;
/*
	border: 1px solid #75acff;
*/
	background-color: var(--secondary);
	padding: 8px 20px;
	color: #fff;
	line-height: 30px;
	font-weight: 400;
	text-decoration: none;
}
.btn-main.disabled, .btn-alt.disabled {
	background: linear-gradient(#aaa, #ddd);
	color: #777;
}
.btn-main.disabled:hover, .btn-alt.disabled:hover {
	cursor: default;
}
.btn-alt {
	background: linear-gradient(#555, #333);
}
.btn-alt.disabled {
	background: none;
	color: #aaa;
}

/* Text Icons

.btn-icon {
	font-weight: 400;
}
.btn-icon:before {
	font-family: 'Blocks Edit';
	position: relative;
	top: 1px;
	margin-right: 5px;
	font-weight: 100;
}
.btn-icon.notify:before {
	content: 't';
}
.btn-icon.add:before {
	content: '+';
}
.btn-icon.remove:before {
	content: 'x';
}
.btn-icon.check:before {
	content: 'y';
}
.btn-icon.new:before {
	content: 'd';
}
.btn-icon.copy:before {
	content: 'c';
}
.btn-icon.edit:before {
	content: 'e';
}
.btn-icon.link:before {
	content: 'l';
}
.btn-icon.export:before {
	content: 's';
}
.btn-icon.menu:before {
	content: '=';
}
.btn-icon.preview:before {
	content: 'v';
}
.btn-icon.download:before {
	content: 'd';
}
*/

/* Utilities */

.box-transparent {
  background-color: var(--background-tone-2);
}
.box-solid {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	background-color: var(--background-tone-3);
}
.box-small {
	margin-trim: block;
  border-radius: 10px;	
  padding: 20px;
}
.box-medium {
	margin-trim: block;
  border-radius: 10px;	
  padding: 25px;
}
.box-large {
	margin-trim: block;
  border-radius: 10px;	
  padding: 35px;
}

.doc {
	position: relative;
	overflow: hidden;
	padding: 60px 65px 40px 65px;

	@media (prefers-color-scheme: dark) {
		background-color: #111;
	}

	@media (max-width: 980px) {
		padding: 20px;
	}
	@media (max-width: 800px) {
		padding: 20px;
	}

	& .header {
		margin: -60px -65px 40px -65px;
		background-color: #f9f9f9;
		padding: 40px 65px 35px 65px;

		@media (prefers-color-scheme: dark) {
			background-color: #191919;
		}

		@media (max-width: 980px) {
			margin: -20px -20px 30px -20px;
			padding: 30px 20px 20px 20px;
		}

		& h2 {
			margin-bottom: 0;

			@media (max-width: 980px) {
				font-size: 40px;
			}
		}
		& .description {
			margin: 0;
			margin-bottom: 10px;
		}
		& .layout-example {
			@media (min-width: 600px) {
				position: absolute;
				top: 20px;
				right: 25px;
			}
		}
	}
}

.content-image {
	border: #eee 1px solid;
}

.screenshot {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  border: #ccc 1px solid;
}

.video {
	border-radius: 2px;

	@media (max-width: 990px) {
		width: 720px;
		height: 406px;
	}
	@media (max-width: 800px) {
		width: 100%;
		height: 54.3vw;
	}
	@media (max-width: 600px) {
		height: 52vw;
	}
}

.person {
	display: inline-block;
	margin-right: 5px;
	border-radius: 100%;
	width: 30px;
	height: 30px;
	background: -webkit-linear-gradient(#D34B52, #D34A7E);
	vertical-align: middle;
	text-align: center;
	line-height: 30px;
	font-weight: 500;
	color: #fff;
	font-size: 14px;
}

blockquote.testimonial {
	border-radius: 10px;
	padding: 30px 50px;
	text-align: center;

	@media (max-width: 990px) {
		padding: 20px 30px;
	}

	& p {
		margin-top: 0;
		font-family: var(--georgia);
		font-size: 20px;
		font-style: italic;
		font-weight: 300;

		@media (min-width: 700px) {
			font-size: 22px;
		}
		@media (min-width: 990px) {
			font-size: 24px;
		}
	}
	& cite {
		margin-top: 10px;
		font-size: 16px;

		@media (min-width: 800px) {
			font-size: 18px;
		}
	}
}

hr {
	display: inline-block;
	margin-top: 30px;
	border: 0;
	border-bottom: #ccc 1px solid;
	width: 100%;
	background: none;
}

.highlighter {
	display: inline;
	background-color: #fff49d;
	padding: 2px 0;
}

.box {
	display: inline-block;
	width: 100%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	border: #D34B52 3px solid;
	background-color: #fff;
	padding: 30px;
}

.totop {
	float: right;
	margin-bottom: 0;
	font-size: 15px;
}


/* Integration listings */

.platforms li {
  display: inline-block;
  margin-left: 0;
  width: 92px;
  text-align: center;
  font-size: 16px;
  line-height: 1.3em;
  vertical-align: top;

  & img {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
  }
}

/* Notice */

@keyframes fadeNotice {
	0%   { background-color: #ffe782; }
	100% { background-color: #ffffff; }
}

section.top-notice {
	margin-top: 115px;
	margin-bottom: -65px;
	border-radius: 5px;
	background-color: #ffffff;
	padding: 20px;
	animation: fadeNotice 1s ease-in-out;

	& p {
		margin-bottom: 0;
		font-size: 20px;
		text-align: center;
	}
}

/* Share article */

#share-link:hover, #code-copy:hover {
	cursor: pointer;
}
#share-link.clicked, #code-copy.clicked {
	color: #444;

	&:hover {
		cursor: default;
	}
}

/* Code boxes */

code {
	display: inline-block;
	position: relative;
	top: -2px;
	margin-bottom: 2px;
	border-radius: 2px;
	max-width: 100%;
	background-color: #282828;
	padding: 2px 6px 0 6px;
	font-family: var(--courier);
	font-size: 18px;
	font-weight: 300;
	color: #eee;
	line-height: 1.2em;
	letter-spacing: 0;
	word-wrap: break-word;

	& em {
		background-image: none;
		font-style: italic !important;
	}
}
code.window {
	display: block;
	margin-top: 20px;
	border-radius: 5px;
	width: 100%;
	padding: 9px 15px 6px 15px;
	white-space: nowrap;
	overflow-x: scroll;
}
code.class:before, code.style:before, code.attribute:before {
	margin-right: 10px;
	font-family: var(--helvetica);
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 300;
	color: #eee;
}
code.class:before {
	content: 'class';
}
code.style:before {
	content: 'style';
}
code.attribute:before {
	content: 'attribute';
}
code.text {
	background-color: #ebebeb;
	color: #505050;
}
code .green {
	color: #A4E405;
}
code .yellow {
	color: #F5EE7F;
}
code .blue {
	color: #59D9F1;
}
code .red {
	color: #F43274;
}
code .purple {
	color: #AC80FF;
}
code .grey {
	color: #828282;
}
p code {
	margin-bottom: 0;
}

textarea.code {
	display: inline-block;
	margin-bottom: 20px;
	border-radius: 5px;
	width: 100%;
	height: 210px;
	resize: none;
	background-color: #282828;
	padding: 9px 15px 6px 15px;
	font-family: var(--courier);
	font-size: 18px;
	font-weight: 300;
	color: #eee;
	line-height: 1.2em;
	letter-spacing: 0;
}

/* PrismJS syntax highlighting, modified from original: https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript */

.language-css {
	color: #ac80ff;
}
.token.cdata, .token.comment, .token.doctype, .token.prolog {
	color: #828282;
}
.token.punctuation {
	color: #eeeeee;
}
.token.namespace {
	opacity: .7;
}
.token.constant, .token.deleted, .token.symbol, .token.tag, .token.rule {
	color: #f43274;
}
.token.property {
	color: #59d9f1;
}
.token.boolean, .token.number {
	color: #ae81ff;
}
.token.attr-name, .token.builtin, .token.char, .token.inserted, .token.selector, .token.string {
	color: #a4e405;
}
.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url, .token.variable {
	color: #eeeeee;
}
.token.atrule, .token.class-name, .token.function {
	color: #ac80ff;
}
.token.attr-value {
	color: #f5ee7f;
}
.token.css.value {
	color: #ac80ff;
}
.token.keyword {
	color: #f43274;
}
.token.important, .token.regex {
	color: #fd971f;
}
/*
.token.bold, .token.important {
	font-weight: 700;
}
.token.italic {
	font-style: italic;
}
.token.entity {
	cursor: help;
}
*/

/* Forms */

input[type='text'], input[type='password'], input[type='email'], input[type='tel'], textarea {
	display: inline-block;
	margin: 0;
	padding: 6px 8px;
	border: #ccc 1px solid;
	border-radius: 5px;
	font-size: 15px;
	font-weight: 200;
}
input[type='submit'] {
	display: inline-block;
	margin: 0;
	font-size: 15px;

	&:hover {
		cursor: pointer;
	}
}

/* Header */

header {
	position: fixed;
	z-index: 99;
	top: 0;
	right: 0;
	left: 0;
	height: 60px;
	backdrop-filter: saturate(300%) blur(5px);
	background-color: rgba(255,255,255, .85);
	padding-top: 14px;

	@media (prefers-color-scheme: dark) {
		background-color: rgba(0,0,0, .85);
	}

	@media (max-width: 800px) {
		height: 55px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	& .container {
		margin-bottom: 0;
	}
}

a.logo {
	float: left;
	position: relative;
	margin-left: 15px;

	@media (max-width: 950px) {
		margin-left: 15px;
	}
	@media (max-width: 375px) {
		transform: scale(0.8, 0.8);
		left: -15px;
		top: 2px;
		margin-right: -30px;
	}
	@media (max-width: 340px) {
		transform: scale(0.65, 0.65);
		left: -27px;
	}

	& img {
		width: 130px;
	}
}

header nav {
	display: inline-block;

	& a {
		font-weight: 400;
		color: #444;
		text-decoration: none;

		@media (prefers-color-scheme: dark) {
			color: #ccc;
		}
	}
	& ul {
		list-style: none;
		margin-bottom: 0;
		line-height: 30px;

		& li {
			float: left;
			margin-bottom: 0;
		}
	}
}

header .mobile {
	text-align: left;

	@media (max-width: 800px) {
		display: none;
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		height: 100vh;
		backdrop-filter: saturate(180%) blur(5px);
		background-color: rgba(255,255,255, .9);
		padding: 40px;

		& .primary, .secondary {
			left: 0;
			width: 100%;

			& ul {
				& li {
					margin-bottom: 10px;
					margin-left: 0;
					width: 100%;

					& a {
						font-size: 24px;
						font-weight: 400;
					}
					& .btn-main {
						padding: 10px 24px;
					}
				}
			}
		}

		@media (prefers-color-scheme: dark) {
			background-color: rgba(0,0,0, .85);
		}
	}
}
header .menu {
	display: block;
	position: absolute;
	right: 20px;
	scale: 150%;
	margin-top: 8px;
	fill: #444;

	&:hover {
		cursor: pointer;
	}

	@media (min-width: 800px) {
		display: none;
	}
}
header .close {
	display: none;
	position: absolute;
	z-index: 1001;
	top: 18px;
	right: 20px;
	scale: 110%;
	fill: #444;

	&:hover {
		cursor: pointer;
	}

	@media (min-width: 800px) {
		display: none;
	}
}

header nav.primary ul {
	display: inline-block;
	line-height: 35px;
	margin-top: 0;
	padding-bottom: 5px;
	font-size: 16px;

	& li {
		margin-left: 20px;
	}
}

header nav.primary ul li .sub {
	display: none;
	position: absolute;
	z-index: 1000;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	backdrop-filter: saturate(180%) blur(5px);
	background-color: rgba(255,255,255, .8);
	padding: 5px 15px;

	& li {
		clear: both;
		margin: 2px 0;
	}
	& a {
		color: #444;
		display: inline-block;
		width: 100%;
		line-height: 30px;

		&:hover {
			color: #2895d9;
		}
	}
}
header nav.primary ul li:hover .sub {
	display: block;
}

header nav.secondary {
	position: relative;
	float: right;
	right: 15px;
	margin-bottom: 5px;

	ul {
		margin-top: 0;
		font-size: 16px;

		& li {
			margin-left: 20px;
			line-height: 35px;
		}
		& a.signup {
			position: relative;
			padding: 1px 12px;
		}
	}
}
header nav.secondary ul a.signup:hover, header nav.secondary ul a.signup.on {
	color: #fff;
}

#subnav {
	z-index: 100;
	top: 0;
	margin-top: -50px;
	margin-bottom: 0;
	backdrop-filter: saturate(180%) blur(10px);
	background-color: rgba(255,255,255, .7);
	text-align: center;

	& .container {
		display: inline-block;
	}
	& nav {
		margin: 0 auto;
		margin-top: 7px;
		margin-bottom: 5px;
		width: auto;

		& ul {
			list-style: none;

			& li {
				display: block;
				float: left;
				margin: 0 30px 0 0;


				@media (max-width: 950px) {
					margin: 0 20px 0 0;
				}
				@media (max-width: 500px) {
					margin: 0 15px 0 0;
				}

				&:last-child {
					margin-right: 0;
				}
				& a {
					@media (max-width: 950px) {
						line-height: 2em;
					}

					&.on {
						color: #444;
					}
				}
			}
		}
	}
}

@media (max-width: 1100px) {
	header nav.primary ul, header nav.secondary ul {
		font-size: 16px;
	}
}

@media (max-width: 1000px) {
	header nav.primary ul, header nav.secondary ul {
		font-size: 15px;
	}
	header nav.primary ul li, header nav.secondary ul li {
		margin-left: 15px;
	}
}

/* Footer */

section.sharethis {
  width: 700px;
  text-align: center;

  @media (max-width: 800px) {
    width: 100%;
    border-radius: 0;
  }

  & p {
    margin-bottom: 0;
  }
}

section.related-content {
	background-color: #e4e4e4;
	padding: 50px 0;

	@media (prefers-color-scheme: dark) {
		background-color: #333;
	}

	& .container {
		margin-bottom: 0;
	}
	& ul {
		margin-bottom: 0;
	}
}

.bg-elements {
	height: 100%;
	background-repeat: no-repeat;
	background-position: center bottom;

	@media (max-width: 1100px) {
		background-size: 125%;
	}
}

.cta2 {
	width: 500px;
	text-align: center;

	@media (prefers-color-scheme: dark) {
		background-color: rgba(0,0,0, .2);
	}

	@media (max-width: 520px) {
		width: 100%;
	}
}

footer {
	display: inline-block;
	float: left;
	width: 100%;
	background-color: #e9e9e9;
	padding-top: 50px;
	color: #444;

	@media (prefers-color-scheme: dark) {
		background-color: #111;
		color: #aaa;
	}

	& .container {
		margin-bottom: 30px;
	}
/*
	& h3 {
		font-size: 24px;

		@media (min-width: 930px) {
			font-size: 26px;
		}
	}
*/
	& p {
		font-size: 16px;
	}
/*
	& ul {
		margin-bottom: 20px;
		font-size: 16px;
		color: #444;
		list-style: none;

		& li {
			margin-left: 0;
			margin-bottom: 5px;
		}
	}
	& .copyright {
		display: inline-block;
		line-height: 35px;
		margin-bottom: 20px;
		font-size: 14px;
		line-height: 1.6em;
	}
*/
}

/* Secondary pages */

section.container.introduce {
  margin-top: 115px;
}

/* Contact forms */

.contactform {
  color: #444;

	@media (prefers-color-scheme: dark) {
		color: #ccc !important;
	}

	& .selections ul {
	  list-style: none;

		& li {
		  margin-left: 0;

			& input[type='radio'] {
			  margin-right: 8px;
			  font-size: 20px;
			  vertical-align: middle;
			}
			& label {
			  vertical-align: middle;
			}
		}
	}
	.campaigns-options li, .contactform .people-options li {
	  display: inline-block;
	  margin-right: 40px;
	}
	.btn-main {
	  margin-bottom: 20px;
	  font-size: 20px;
	}

	.contact label, .plan label {
	  display: block;
	  margin-bottom: 5px;
	}
	input[type='text'], input[type='password'], input[type='email'], input[type='tel'], textarea, select {
	  margin-bottom: 20px;
	  border: #ccc 1px solid;
	  width: 75%;
	  padding: 8px 12px;
	  font-size: 20px;
	  font-weight: 300;
	  color: #444;

		@media (prefers-color-scheme: dark) {
			color: #ccc !important;
		}

		@media (max-width: 800px) {
		   width: 100%;
		}
	}
}

/* Job points */

section.job-points {
  margin-bottom: 90px;

  & ul {
    margin-bottom: 0;
    list-style: none;

    & li {
      margin-bottom: 0;
      margin-left: 0;
      text-align: center;

      @media (max-width: 980px) {
        margin-bottom: 20px;
      }

      & .icon {
        margin-left: 0;
        width: 110px;
      }
      & h3 {
        margin-bottom: 10px;
      }
    }
  }
}