: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-green: #008B60;
    --color-light-green: rgb(91, 171, 151);
    --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.2em;
    --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;
}

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

.cta--red {
    background-color: var(--color-magenta);
}

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

.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;
}

.fish {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	pointer-events: none;
}

.fish.portrait,
.portrait .fish {
	display: none;
}

.portrait .fish.portrait {
	display: block;
}

/* validatable Inputs */
.input input,
textarea {
	background-repeat: no-repeat;
}
.input input {
	background-position: calc(100% + .2em) center;
	background-size: auto calc(100% + 8px);
}

textarea {
	background-position: calc(100% + .2em) calc(100% + .2em);
	background-size: auto 62px;
}

.input input + .error,
textarea + .error,
.input input[type="submit"] + .messages div {
	opacity: 0;
	transition: opacity .2s;
	color: var(--color-magenta);
	margin-top: -.5em;
	height: 2em;
}

.input input[type="submit"] {
	background-color: var(--color-light-magenta);
	pointer-events: none;
	border: none;
	color: white;
	text-transform: uppercase;
	font-weight: 700;
	transition: background-color .2s;
}

.input input[type="submit"].submit--allowed {
	background-color: var(--color-green);
	cursor: pointer;
	pointer-events: all;
}

.input input[type="submit"].success {
	background-color: var(--color-green);
}

.input input[type="submit"] + .messages .success {
	color: var(--color-green);
}

.input input.invalid,
textarea.invalid,
.input input.valid,
textarea.valid {
	padding: calc(0.4em - 2px);
}

.input input.invalid,
textarea.invalid {
	border: 4px solid var(--color-magenta) !important;
	background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTQiIGhlaWdodD0iNTQiIHZpZXdCb3g9IjAgMCA1NCA1NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjU0IiBoZWlnaHQ9IjU0IiByeD0iMjciIGZpbGw9IiNENjAwNTkiLz4KPHJlY3QgeD0iMjQiIHk9IjkiIHdpZHRoPSI2IiBoZWlnaHQ9IjI1IiByeD0iMyIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTI0IDQyQzI0IDQwLjM0MzEgMjUuMzQzMSAzOSAyNyAzOUMyOC42NTY5IDM5IDMwIDQwLjM0MzEgMzAgNDJDMzAgNDMuNjU2OSAyOC42NTY5IDQ1IDI3IDQ1QzI1LjM0MzEgNDUgMjQgNDMuNjU2OSAyNCA0MloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
}

.input input.valid,
textarea.valid {
	border: 4px solid var(--color-green) !important;
	background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTQiIGhlaWdodD0iNTQiIHZpZXdCb3g9IjAgMCA1NCA1NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjU0IiBoZWlnaHQ9IjU0IiByeD0iMjciIGZpbGw9IiMwMDhCNjAiLz4KPHBhdGggZD0iTTIzLjY2NzQgMzkuODM4N0MyMi44MDk4IDM5LjgzODcgMjIuMDMwMiAzOS40NTUzIDIxLjQ4NDUgMzguNzY1MkwxNC41NDYxIDI5LjcxNjdDMTMuNjQ5NiAyOC41MjgyIDEzLjg4MzUgMjYuODc5NSAxNS4wNTI4IDI1Ljk1OTNDMTYuMjYxMiAyNS4wNzc1IDE3LjkzNzMgMjUuMzA3NSAxOC44NzI5IDI2LjQ1NzdMMjMuNDcyNSAzMi40MDA2TDM0Ljk3MTUgMTQuMjY1M0MzNS43NTExIDEzLjAwMDEgMzcuNDI3MiAxMi42MTY3IDM4LjcxMzYgMTMuNDIxOEMzOS45OTk5IDE0LjE4ODcgNDAuMzg5NyAxNS44MzczIDM5LjU3MTEgMTcuMTAyNkwyNi4wMDYyIDM4LjU3MzVDMjUuNTM4NCAzOS4zMDE5IDI0LjcxOTggMzkuODAwNCAyMy44MjMzIDM5LjgzODdDMjMuNzg0MyAzOS44Mzg3IDIzLjcwNjQgMzkuODM4NyAyMy42Njc0IDM5LjgzODdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
}

.input input.invalid + .error,
textarea.invalid + .error {
	opacity: 1;
}

.input input[type="submit"] {
	margin: 0 0 2vh;
}
.input input[type="submit"] + .messages div {
	height: 4em;
	margin-top: 0;
}

.input input[type="submit"].error + .messages .error,
.input input[type="submit"].success + .messages .success {
	opacity: 1;
	margin-top: -.5em;
	height: 4.5em;
}

.input input[type="submit"] + .messages .success,
.input input[type="submit"].success + .messages .error,
.input input[type="submit"].error + .messages .success {
	height: 0;
}