:root {
    --base-size: 0.8vw;

    --color-yellow: #ebc851ff;
    --color-magenta: #d60059;
    --color-light-magenta: #d6005980;
    --color-blue: #5a97c3;
    --color-light-blue: #d6e5f0;
    --color-light-grey: rgba(0, 0, 0, 0.25);
    --color-grey: #747474;
    --color-grey-alpha: #74747480;
    --color-white: #FFF;
    --color-black: #000;

    --spacing-xs: .4em;
    --spacing-s: .8em;
    --spacing-m: 1em;
    --spacing-l: 2em;

    --border-radius: .1em;

    --font-family-primary: "Open Sans", "Trebuchet", sans-serif;

    --font-small-size: 0.9em;
    --font-body-size: var(--base-size);
    --font-body-weight: 300;
    --font-h1-size: 1.4em;
    --font-h1-weight: 300;
    --font-h2-size: 1.6em;
    --font-h2-weight: 700;
}

html, body {
	position: relative;
	width: 100%;
	height: 100%;
}

body {
	color: #333;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: var(--font-family-primary);
    font-size: var(--font-body-size);
    font-weight: var(--font-body-weight);
}

body.portrait {
    --font-h1-size: 1.2em;
    --font-h2-size: 1.8em;
}

section {
    position: relative;
    width: 100%;
}

strong {
    font-weight: calc(var(--font-body-weight) * 1.5);
}

h1 {
    color: var(--color-grey);
    font-size: var(--font-h1-size);
    font-weight: var(--font-h1-weight);
    width: 100%;
}

h1 strong {
    font-weight: calc(var(--font-h1-weight) * 2);
}

h2 {
    color: var(--color-black);
    font-size: var(--font-h2-size);
    font-weight: var(--font-h2-weight);
    margin: 0;
    padding: 0;
    margin-bottom: 1em;
    width: 100%;
}

small {
    font-size: var(--font-small-size);
}

a {
	color: rgb(0,100,200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(0,80,160);
}

label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em;
	padding: 0.4em;
	margin: 0 0 1em 0;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 2px;
}

input:disabled {
	color: #ccc;
}

button {
	color: #333;
	background-color: #f4f4f4;
	outline: none;
}

button:disabled {
	color: #999;
}

button:not(:disabled):active {
	background-color: #ddd;
}

button:focus {
	border-color: #666;
}

.cta {
    border: none;
    padding: 0.4em;
    border-radius: 2em;
    background-color: var(--color-magenta);
    color: white;
    text-transform: uppercase;
    margin-bottom: 0;
    font-size: var(--font-h1-size);
    font-weight: calc(var(--font-h1-weight) * 2);
    min-width: 23vw;
}

.portrait .cta {
    font-size: calc(var(--font-h1-size) * 0.9);
    min-width: 50vw;
}

.content {
    padding: 4em 0;
    position: relative;
}

.portrait .content {
    padding: 6em 0 2em 0;
}

/** Fonts **/

/* open-sans-300 light */
@font-face {
    font-family: 'Open Sans';
    src: url('./fonts/open-sans-300.eot'); /* IE9 Compat Modes */
    src: local('Open Sans Light'), local('OpenSans-Light'),
    url('./fonts/open-sans-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/open-sans-300.woff') format('woff'), /* Modern Browsers */
    url('./fonts/open-sans-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/open-sans-300.svg#OpenSans') format('svg'); /* Legacy iOS */
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* open-sans-400 regular  */
@font-face {
    font-family: 'Open Sans';
    src: url('./fonts/open-sans-400.eot'); /* IE9 Compat Modes */
    src: local('Open Sans Regular'), local('OpenSans-400'),
    url('./fonts/open-sans-400.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/open-sans-400.woff') format('woff'), /* Modern Browsers */
    url('./fonts/open-sans-400.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/open-sans-400.svg#OpenSans') format('svg'); /* Legacy iOS */
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* open-sans-700 bold */
@font-face {
    font-family: 'Open Sans';
    src: url('./fonts/open-sans-700.eot'); /* IE9 Compat Modes */
    src: local('Open Sans Bold'), local('OpenSans-Bold'),
    url('./fonts/open-sans-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/open-sans-700.woff') format('woff'), /* Modern Browsers */
    url('./fonts/open-sans-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/open-sans-700.svg#OpenSans') format('svg'); /* Legacy iOS */
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Normalize Buttons */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

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

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}