/* -------------------------------- 

Primary style

-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 100%;
  font-family: "Fjord One", serif;
  color: #7f8c97;
  background-color: #e9f0f5;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

a {
  color: #acb7c0;
  text-decoration: none;
  font-family: "Fjord One", serif;
}

h1, h2, h3 {
  font-family: "Fjord One", serif;
  font-weight: bold;
}

header {
	flex: 0 0 7em;
	background: #185359;
	margin-bottom: 0.25em;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
}

header img {
	width: 6em;
	height: 6em;
	margin-left: 1em;
	margin-right: 1em;
	justify-self: flex-start;
}

header h1 {
	color: white;
	font-size: 2em;
}

footer {
	flex: 0 0 1.5em;
	margin-top: 1em;
}

.btn {
	display: flex;
	flex-direction: row;
	margin: 0.125em;
  background: #185359;
  background-image: -webkit-linear-gradient(top, #185359, #2d97a1);
  background-image: -moz-linear-gradient(top, #185359, #2d97a1);
  background-image: -ms-linear-gradient(top, #185359, #2d97a1);
  background-image: -o-linear-gradient(top, #185359, #2d97a1);
  background-image: linear-gradient(to bottom, #185359, #2d97a1);
  -webkit-border-radius: 13;
  -moz-border-radius: 13;
  border-radius: 13px;
  font-family: Arial;
  color: #ffffff;
  font-size: 1.25em;
  padding: 0.5em 1em 0.5em 1em;
  text-decoration: none;
}

.btn:hover {
  background: #2d97a1;
  background-image: -webkit-linear-gradient(top, #2d97a1, #5ab2ed);
  background-image: -moz-linear-gradient(top, #2d97a1, #5ab2ed);
  background-image: -ms-linear-gradient(top, #2d97a1, #5ab2ed);
  background-image: -o-linear-gradient(top, #2d97a1, #5ab2ed);
  background-image: linear-gradient(to bottom, #2d97a1, #5ab2ed);
  text-decoration: none;
}

nav ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	margin-bottom: 0.25em;
}
@media (min-width: 50em) {
nav ul {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
}
}

nav span {
	font-weight: bold;
}

main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

main h1 {
	font-size: 2em;
	margin-bottom: 1em;
}

main h2 {
	font-size: 1em;
	margin-bottom: 0.25em;
}

main h3 {
	font-size: 1em;
	margin-top: 0.75em;
	margin-bottom: 0.25em;
}

nav {
	flex: 1 1 auto
}

#landingimg {
	flex: 1 1 auto;
	margin-left: 0.5em;
	margin-right: 0.5em;
}

#landing {
	flex: 1 1 20vw;
	display: flex;
	flex-direction: column;
	font-size: 1.5em;
	margin-left: 1em;
	margin-right: 1em;
}

main b {
  font-weight: bold;
}

@media (min-width: 50em) and (orientation: landscape) {
main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: row;
	margin-right: 0.75em;
	margin-left: 0.25em;
}

nav {
	flex: 0 0 10em
}
}

#message {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	font-size: 1.5em;
	margin-left: 1em;
	margin-top: 1em;
}

#row-element {
	flex: 1 1 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
}

#contact-row-element {
	flex: 1 1 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
}

#slider {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	font-size: 1.5em;
	margin-left: 0.5em;
}

#slidernav button.selected {
	font-weight: bold;
	color: #ffaaff;
}

#image-left {
	width: 100%;
	margin-right: 0.5em;
}

#image-right {
	width: 100%;
	margin-left: 0.5em;
}

#text-contact {
	width: 30vw;
}

#text-left {
	width: 60vw;
}

#text-right {
	width: 60vw;
}

#slides img {
	width: 100%;
}

.invisible {
	display: none;
}

#slidernav {
 list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.small_btn {
	background: #185359;
	background-image: -webkit-linear-gradient(top, #185359, #2d97a1);
	background-image: -moz-linear-gradient(top, #185359, #2d97a1);
	background-image: -ms-linear-gradient(top, #185359, #2d97a1);
	background-image: -o-linear-gradient(top, #185359, #2d97a1);
	background-image: linear-gradient(to bottom, #185359, #2d97a1);
	-webkit-border-radius: 7;
	-moz-border-radius: 7;
	border-radius: 7px;
	font-family: Arial;
	color: #ffffff;
	font-size: 0.5em;
	margin: 0.125em;
	padding: 0.5em 0.75em 0.5em 0.75em;
	text-decoration: none;
}

.small_btn:hover {
	background: #2d97a1;
	background-image: -webkit-linear-gradient(top, #2d97a1, #5ab2ed);
	background-image: -moz-linear-gradient(top, #2d97a1, #5ab2ed);
	background-image: -ms-linear-gradient(top, #2d97a1, #5ab2ed);
	background-image: -o-linear-gradient(top, #2d97a1, #5ab2ed);
	background-image: linear-gradient(to bottom, #2d97a1, #5ab2ed);
	text-decoration: none;
}