@font-face{
  font-family: "Lato";
  src:  url("https: //www.dutchiem.com/fonts/Lato-Regular.ttf") format("truetype");
}

html {
	height:100%;
		
}

body { 
	font-family: "Lato", sans-serif; 
	color:#ffffcc; 
	background-color: #000000;
	height:98vh;
}

/* Styles for the index.php page,
   Navigation and Picture placement */

.main {
	position:absolute;
	top:30vh;
	left:15vw;
	max-width:70vw;
}

.logo {
	position:absolute;
	max-width: 12vw;
	left:44vw;
	top: 7vh;
}

.navbar-light .navbar-toggler-icon,
.navbar-dark .navbar-toggler-icon,
.navbar .navbar-toggler-icon {
  background-image: url(../img/Menu_Burger_white.png);
}

.nav-left {
	position:absolute;
	left:15vw;
	top:7vh;
	width:100%;
	max-width:29vw;
}

.nav-right {
	position:absolute;
	left:57vw;
	top:7vh;
	width:100%;
	max-width:29vw;
}

nav ul {
	justify-content:center;
}

nav a {
	color:#ffffcc;
	text-shadow: 0.5px 0.5px blue;
	margin:30px;
}

.lang {
	position:absolute;
	text-align: center;
	left:0;
	bottom:20vh;
	width:100%;
	
}

.lang a {
	color:#ffffcc;
	text-shadow: 0.5px 0.5px blue;
}

.bottom {
	position:fixed; 
	text-align:center;
	left:0;
	bottom:1vh;
	width: 100%;
	color:#803300;
}

/* Styles for the navigation of the rest of the pages */

.logoSide {
	position:fixed;
	max-width:12vw;
	left:2vw;
	top:3vh;
}

.navSide {
	position:fixed;
	top:30vh;
	width:14vw;
	text-align: center;
	list-style: none;
}

.navSide a {
	color:#ffffcc;
	text-shadow: 0.5px 0.5px blue;
}

.bottom-left {
	position:fixed;
	width:14vw;
	max-height:25vh;
	left:1vw;
	bottom: 4vh;
	text-align:center;
	padding-top:3px;
	padding-bottom:3px;
	text-shadow: 0.5px 0.5px blue;
	border-radius:15px;
}

.blockStyle {
	font-size:2.1vh;
	text-align:center;
	color:#ffffcc;
	background-color:#262626;
	padding-top:5px;
	padding-bottom:5px;
}

.btn-DutchieM {
	color:#cceeff;
	background-color:#262626;
	border: 3px double #cceeff;
	border-radius:;
}

.impressum {
	text-align: center;
	padding-bottom: 5px;
}

.impressum a {
	color:#ffffcc;
	text-shadow: 0.5px 0.5px blue;display: flex;
	
}

.btn-DutchieM-2 {
	color:#ffffcc;
	background-color:#262626;
	border: 3px double #ffffcc;
	border-radius:;
}

.proglang {
	max-width:3vw;
	margin: 1vw 2vw 1vw 2vw;
}

.side3 {
	position:fixed;
	width:14vw;
	left:86vw;
	top:10vh;
	padding:5px;
}

.modal-header,
.modal-body {
	background-color:#262626 !important;
}

.extraClass {
	display:none;
}

.bottom-left a {
	text-shadow:none;
}

.content {
	position:absolute;
	top:12vh;
	left:17vw;
	width:66vw;
	min-height:95%;
	background-color:#1a1a1a;
}

.content .row {
	margin-left: 5px !important;
	margin-right: 5px !important;
}


/* Styles for text, titles, etc. */
.title {
	text-align:center;
	text-decoration: underline overline;
	text-shadow: 1px 1px blue;
	padding:1vh;
}

/* ######## Icon and pictogram sizing ######### */
/* social network links */
.social {
	max-height:25px;
}

/* html, css, php, Javascript pictogramms */
.proglang {
	max-width:8vw;
	margin: 1vw 2vw 1vw 2vw;
}

/* helper class for the Under construction text */
.centered {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-size:28px;
	text-shadow:2px 2px blue;
}

.topic {
	color:#ffc299;
	background-color:;
	margin:5px;	
	padding-top:4vh;
	padding-left:2.5vw;
	padding-right:2.5vw;
}

.topic h3,
.topic1 h3 {
	text-align:center;
	text-decoration: underline;
}

.topic1 {
	color:#cceeff;
	background-color:;
	margin:5px;	
	padding-top:4vh;
	padding-left:2.5vw;
	padding-right:2.5vw;
}

.kaart {
  position:relative; 
  -ms-flex-direction: row;
  flex-direction: row;
  min-width:0;
  word-wrap: break-word;
  background-color: transparent;
  background-clip: border-box;
  text-align:center !important;
  border: solid 1px white;
}




/* distance marker to put a space between content */
.spacer-sm {
	height:3vh;
}

.spacer-lg {
	height:6vh;
}

.hidden {
	display: none;
}

.response {
	margin-top:  100px;
	margin-left: 150px;
	margin-right: 150px;
}


/* Mobile classes */
@media(max-width:1056px) {
	.main {
		position:static;
		top:0;
		left:0;
		max-width:100%;
	}

	.logo {
		position:static;
		top:0;
		left:0;
		max-width:60vw;
	}

	nav a {
		margin:0;
	}

	.centered {
		font-size:20px;
	}

	.content {
		position:static;
		top:0;
		left:0;
		width:100%;
	} 

	.response {
		margin: 0;
	}
}