/* remove special formatting for <pre> so we can use it for editables */
pre {
	background: none;
	color: inherit;
	padding: 0;
	font-size: inherit;
	font-family: inherit;
	white-space: pre-wrap;
	overflow: visible;
}
/* show an outline around editables */
div[data-editable] {
	outline-color: #eebe00;
	outline-style: solid;
	outline-width: 3px;
}

body {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	color: black;
}

.blue-section a:link, .blue-section a:visited, .blue-section a:active {
	color: white;
}
.blue-section a:hover {
	color: #c7c7c7;
}

section#header {
	background-color: #B1F0F7;
	text-align: center;
}
@media screen and (min-width: 769px) {
	section#header img {
		width: 60%;
	}
}
.section#menu {
	background-color: #33ADBA;
}
.section#menu .columns {
	justify-content: center;
}
.section#menu .column {
	text-align: center;
	font-size: 1.25rem;
    font-weight: bold;
    color: white;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.section#menu .column.selected {
	background-color: #1BDAF1;
}
.section#menu a {
	display: block;
	padding: 0.75rem;
	text-transform: uppercase;
}
.section#menu a:link, .section#menu a:visited, .section#menu a:active {
	color: white;
}
.section#menu a:hover {
	color: black;
}

.button.is-link {
    font-weight: bold;
    color: white;
    /*font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;*/
	background-color: #33ADBA;
	border-radius: 1.5em;
	padding-left: 1.5em;
	padding-right: 1.5em;
	height: 3em;
	min-width: 9rem;
}

section#hero {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	text-align: center;
	background-position: center center;
}
section#hero.light-blue {
	background-color: #B1F0F7;
}
section#hero div {
	font-family: Cabin Sketch;
	font-size: 2.5em;
	color: white;
	line-height: 1.2em;
}
section#hero.light-blue div {
	color: black;
}
@media screen and (min-width: 769px) {
	section#hero div {
		font-size: 4em;
	}
}
.white-section .columns, .blue-section .columns, .light-blue-section .columns {
	align-items: center;
}
.white-section .column, .blue-section .column, .light-blue-section .column {
	text-align: center;
}
.white-section .title, .blue-section .title, .light-blue-section .title {
	font-family: "Amatic SC";
	font-weight: bold;
	font-size: 2.5em;
}
.white-section .title {
	color: #33ADBA;
}
.light-blue-section {
	background-color: #B1F0F7;
}
.blue-section {
	color: white;
	background-color: #33ADBA;
}
.blue-section .button.is-link {
	color: #1BDAF1;
	background-color: white;
}
.blue-section .button.is-link:hover,
.white-section .button.is-link:hover {
	background-color: #3e56c4;
	color: white;
}
.blue-section .title {
	color: white;
}

.vertical-align {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.vertical-align div {
	padding: 0.5rem;
}