/* Different CSS-breakpoint: (orientation: landscape/portrait). */

/* Default serif font for paragraphs and ordinary text: Source Sans Pro */
@import url('https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,600&subset=latin-ext');

/* Default sans font: Open Sans */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin-ext');

/* Sans font for headings: Yanone Kaffeesatz */
@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300,400&subset=latin-ext');

/* fun display-style font "Amatic SC": @import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700&subset=latin-ext'); */

* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
	color: dimgrey;
	position: relative;
	border-collapse: collapse;
	scroll-behavior: smooth;
}

body {
	font-family: "Source Serif Pro", Georgia, Times, serif;
	font-size: 12pt;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Yanone Kaffeesatz", Helvetica, Arial, sans-serif;
	font-weight: 400;
	text-align: center;
	margin: 0;
}

em {
	font-weight: 400;
	font-style: italic;
}

p {
	text-align: justify;
	hyphens: auto;
}

img {
	max-width: 100%;
	height: auto;
}

.row::after {
	content: "";
	clear: both;
	display: table;
	empty-cells: show;
}

.display-container {
	width: 100%;
	display: block;
	position: relative;
}

.full-height {
	height: 100%;
}

.display-middle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.display-bottom-center {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,-50%);
}

.welcome {
	font-family: "Yanone Kaffeesatz", Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 200%;
	letter-spacing: 0.33ex;
	border: 2px solid;
	padding: 1.5ex 2ex;
	white-space: nowrap;
}

.tab-bar {
	display: inline-table;
	text-align: center;
	position: relative;
	border: none;
	top: 0;
	left: 50%;
	transform: translate(-50%,-1.5em);
	clear: both;
	float: none;
	margin: 0;
	padding: 0;
}

.tab-button {
	font-family: "Yanone Kaffeesatz", Helvetica, Arial, sans-serif;
	display: table-cell;
	border: none;
	background-color: lightgrey;
	color: black;
	width: inherit;
	white-space: nowrap;
	font-size: 100%;
	margin: 0;
	padding: 15px;
}

.tab-button:hover {
	background-color: white;
}

.vspace-s {
	display: block;
	margin-bottom: 0.25em;
	content: "​";
}

.vspace-m {
	display: block;
	margin-bottom: 0.5em;
	content: "​";
}

.vspace-l {
	display: block;
	margin-bottom: 1em;
	content: "​";
}

.pad-s-bt {padding-bottom: 10px; padding-top: 10px;}
.pad-s-lr {padding-left: 10px; padding-right: 10px;}

.pad-m-bt {padding-bottom: 25px; padding-top: 25px;}
.pad-m-lr {padding-left: 25px; padding-right: 25px;}

.pad-l-bt {padding-bottom: 35px; padding-top: 35px;}
.pad-l-lr {padding-left: 35px; padding-right: 35px;}

.mar-s-bt {margin-bottom: 10px; margin-top: 10px;}
.mar-s-lr {margin-left: 10px; margin-right: 10px;}

.mar-m-bt {margin-bottom: 25px; margin-top: 25px;}
.mar-m-lr {margin-left: 25px; margin-right: 25px;}

.mar-l-bt {margin-bottom: 35px; margin-top: 35px;}
.mar-l-lr {margin-left: 35px; margin-right: 35px;}

.centered {
	text-align: center;
}

.text-light {
	color: white;
	border-color: white;
}

.text-dark {
	color: #333333;
	border-color: #333333;
}

a:link, a:visited {
	color: mediumpurple;
	text-decoration: none;
}

a:hover {
	color: rebeccapurple;
	text-decoration: none;
}

a.text-light:link, a.text-light:visited {
	color: white;
	text-decoration: none;
}

a.text-light:hover {
	color: lightgrey;
	text-decoration: none;
}

[class*=bg-hero] {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.bg-hero1 {
	background-image: url(images/forest.jpg);
	min-height: 100%;
}

.bg-hero2 {
	background-image: url(images/forest2.jpg);
	min-height: 400px;
}

.bg-hero3 {
	background-image: url(images/forest3.jpg);
	min-height: 400px;
}

.footer {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-style: italic;
	font-size: 9pt;
	background-color: #333333;
	color: lightgrey;
}

[class*="col-"] {
	float: left;
	display: table-cell;
	position: relative;
}

/* for mobile phones */
[class*="col-"] {width: 100%;}
[class*="mar-d"] {margin: 0;}
@media only screen and (max-width: 499px) {
	[class*="bg-hero"] {background-attachment: scroll;}
	.welcome {font-size: 16pt;}
	.col-s-0  {width:   0.000%;}
}

/* for tablets */
@media only screen and (min-width: 500px) {
	[class*="bg-hero"] {background-attachment: scroll;}
	.col-m-0  {width:   0.000%;}
	.col-m-1  {width:   8.333%;}
	.col-m-2  {width:  16.666%;}
	.col-m-3  {width:  25.000%;}
	.col-m-4  {width:  33.333%;}
	.col-m-5  {width:  41.666%;}
	.col-m-6  {width:  50.000%;}
	.col-m-7  {width:  58.333%;}
	.col-m-8  {width:  66.666%;}
	.col-m-9  {width:  75.000%;}
	.col-m-10 {width:  83.333%;}
	.col-m-11 {width:  91.666%;}
	.col-m-12 {width: 100.000%;}
}

/* treat tablets in portrait-mode like mobile phones */
@media only screen and (min-width: 500px) and (orientation: portrait) {
	[class*="col-"] {width: 100%;}
	.col-s-0  {width:   0.000%;}
}

/* for desktop */
@media only screen and (min-width: 1113px) {
	body {font-size: 14pt;}
	[class*="bg-hero"] {background-attachment: fixed;}
	.col-0  {width:   0.000%;}
	.col-1  {width:   8.333%;}
	.col-2  {width:  16.666%;}
	.col-3  {width:  25.000%;}
	.col-4  {width:  33.333%;}
	.col-5  {width:  41.666%;}
	.col-6  {width:  50.000%;}
	.col-7  {width:  58.333%;}
	.col-8  {width:  66.666%;}
	.col-9  {width:  75.000%;}
	.col-10 {width:  83.333%;}
	.col-11 {width:  91.666%;}
	.col-12 {width: 100.000%;}
	.mar-d-s-bt {margin-bottom: 10px; margin-top: 10px;}
	.mar-d-s-lr {margin-left: 10px; margin-right: 10px;}
	.mar-d-m-bt {margin-bottom: 25px; margin-top: 25px;}
	.mar-d-m-lr {margin-left: 25px; margin-right: 25px;}
	.mar-d-l-bt {margin-bottom: 35px; margin-top: 35px;}
	.mar-d-l-lr {margin-left: 35px; margin-right: 35px;}
}