/* ------*/
/* Fonts */
/* ------*/

@font-face {
	font-family: 'OpenSans Regular' ; 
	src: url('./includes/fonts/open_sans_regular.woff') ;
	}
@font-face {
	font-family: 'OpenSans Light' ;
	src: url('./includes/fonts/open_sans_light.woff') ;
	}
@font-face {
	font-family: 'OpenSans Bold' ;
	src: url('./includes/fonts/open_sans_bold.woff') ;
	}

/* ------------------------------- */
/* Styles for main structure tags  */
/* ------------------------------- */

html {
	margin: 0 ;
	padding: 0 ;
	width: 100% ; 
	height: 100% ;
	}

body {
	display: grid ;
	grid-template-rows: auto 1fr auto ;
	margin: 0 ;
	padding: 0 ;
	width: 100% ; 
	height: 100% ;
	font-family: 'OpenSans Regular', sans-serif ;
	font-size: 14px ;
	line-height: 1.6 ;
	color: #000000 ;
	background-color: #FDF5E6 ;
	}

header {
	display: grid ;
	grid-template-columns: 40px auto 40px ;
	grid-gap: 20px ;
	padding: 20px ;
	font-family: 'OpenSans Bold', sans-serif ;
	font-size: 16px ;
	text-align: center ;
	background-color: #D2B48C ;
	}

nav {
	display: none ;
	grid-template-rows: auto ;
	grid-gap: 20px ;
	padding: 20px ;
	text-align: center ;
	background-color: #D2B48C ;
	}

main {
	display: grid ;
	grid-template-rows: auto ;
	grid-gap: 20px ;
	}

article {
	padding: 20px ;
	background-color: #FAEBD7 ;
	}

footer {
	display: grid ;
	grid-template-columns: 40px auto 40px ;
	grid-gap: 20px ;
	padding: 20px ;
	text-align: center ;
	background-color: #D2B48C ;
	}

/* --------------------------- */
/* Styles for main inline tags */
/* --------------------------- */

h1 {
	margin: 0 ;
	font-size: 17px ;
	}

h2 {
	font-size: 16px ;
	}

h3 {
	font-size: 15px ;
	}

a {
	color: #CC0000 ;
	cursor: pointer ;
	text-decoration: none ;
	}

b {
	font-family: 'OpenSans Bold', sans-serif ;
	}

ol {
	margin: 0 ;
	padding: 0 ;
	}

figure {
	margin: 0 ;
	margin-top: 30px ;
	margin-bottom: 30px ;
	text-align: center ;
	}

figcaption {
	padding: 5px ;
	padding-left: 10px ;
	padding-right: 10px ;
	font-size: 11px ;
	}

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

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

textarea {
	width: 100% ;
	margin-bottom: 10px ;
	border: none ;
	}

input[type="search"] {
	width: 100% ;
	margin-bottom: 10px ;
	border: none ;
	}

input[type="text"] {
	width: 100% ;
	margin-bottom: 10px ;
	border: none ;
	}

input[type="file"] {
	width: 100% ;
	margin-bottom: 10px ;
	border: none ;
	}

nav ol {
	margin-top: 10px ;
	}

nav ol li {
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
	}

article ol {
	margin: 0 ;
	padding: 0 ;
	}

/* ------------------ */
/* Styles for classes */
/* ------------------ */

.skip {
	position: absolute ;
	top: -500px ;
	}

.map {
	width: 100% ;
	height: 400px ;
	}

.mapping {
	width: 100% ;
	height: 400px ;
	}

.chapters {
	margin-left: 50px ;
	}

.addons {
	display: grid ;
	grid-template-columns: auto 50px ;
	grid-gap: 10px ;
	margin-top: 20px ;
	font-size: 10px ;
	}

/* -------------------- */
/* Styles for hamburger */
/* -------------------- */

.hamburger {
	display: inline-block ;
	cursor: pointer ;
	}

.hamburger .bar1, .bar2, .bar3 {
	width: 30px ;
	height: 5px ;
	margin-top: 5px ;
	background-color: #000000 ;
	transition: 1s ;
	}

.change .bar1 {
	transform: rotate(90deg) translate(10px,-10px) ;
	}

.change .bar2 {
	transform: rotate(90deg) ;
	}

.change .bar3 {
	transform: rotate(90deg) translate(-10px,10px) ;
	}

/* -------------------- */
/* Styles for footnotes */
/* -------------------- */

section p input[type="checkbox"] {
	display: none ;
	}

section p label {
	color: #CC0000 ;
	}

section p span {
	display: none ;
	}

section p input[type="checkbox"]:checked + span {
	display: inline ;
	padding: 5px ;
	background: #E9DAC6 ;
	}

/* ----------------------- */
/* Styles for grid layouts */
/* ----------------------- */

/* Grid für den Bereich <section> mit voller Breite der Kästchen */
.grid-tiles-large {
	display: grid ;
	grid-template-columns: auto ;
	grid-gap: 10px ;
	margin: 10px ;
	}

/* Grid für den Bereich <section> mit flexibler Breite der Kästchen */
.grid-tiles-small {
	display: grid ;
	grid-template-columns: auto ;
	grid-gap: 10px ;
	margin: 10px ;
	}

/* ---------------------------------------- */
/* Styles for different larger screen sizes */
/* ---------------------------------------- */

@media screen and (min-width:992px) {

	body {
		grid-template-columns: 420px 1fr ;
		font-size: 16px ;
		line-height: 1.6 ;
		}

	header {
		grid-column-start: 1 ;
		grid-column-end: 3 ;
		grid-row-start: 1 ;
		grid-row-end: 1 ;
		font-size: 26px ;
		}

	nav {
		display: block ;
		text-align: left ;
		padding: 30px ;
		grid-gap: 30px ;
		grid-column-start: 1 ;
		grid-column-end: 1 ;
		grid-row-start: 2 ;
		grid-row-end: 2 ;
		}

	main {
		padding: 20px ;
		grid-gap: 40px ;
		grid-column-start: 2 ;
		grid-column-end: 2 ;
		grid-row-start: 2 ;
		grid-row-end: 2 ;

		}

	footer {
		grid-column-start: 1 ;
		grid-column-end: 3 ;
		grid-row-start: 3 ;
		grid-row-end: 3 ;
		}
	
	figure {
		margin: 50px ;
		}

	.hamburger {
		display: none ;
		}

	.map {
		height: 600px ;
		}

	.mapping {
		float: right ;
		width: 50% ;
		margin-left: 50px ;
		}

	.grid-tiles-large {
		grid-template-columns: minmax(auto, 1280px) ;
		}

	.grid-tiles-small {
		grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)) ;
		}

	}