/* tags */
html {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  width: 100vw;
  scroll-behavior: smooth;
}

body {
  display: grid;

  min-width: 320px;
  width: auto;

  color: #363636;

  margin: 0;
  padding: 0;

  overflow-x: hidden;
}

body {

  grid-template-areas: "header header header" "nav main side" "footer footer footer";

  grid-template-columns: 2vw 96vw 2vw;
  grid-template-rows: auto auto auto;
}

@media only screen and (min-device-width: 1025px) {
  body {
    grid-template-columns: 25% auto 25%;
  }
}

header {
  grid-area: header;
  height: max-content;
}

main {
  grid-area: main;

  min-width: 320px;
  width: auto;
}

footer {
  grid-area: footer;
  text-align: center;
}

nav {
  grid-area: nav;
}

aside {
  grid-area: side;
}

ul {
  list-style-type: none;
}

footer span {
  padding-left: 2em;
  padding-right: 2em;
  display: inline-block;
  color: #8c8c8c;
  font-size: medium;
}

hr {
  border-top: 1px solid lightgray;
  margin-top: 10%;
}

a.anchor {
  display: block;
  position: relative;
  top: -0%;
  visibility: hidden;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  color: #8c8c8c;
}

a {
  color: inherit;
}

a:visited {
  color: inherit;
}

/* classes */
.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.parallax {
  min-width: 320px;
  width: auto;
  height: 100vh;
  margin: 0;
  /*margin-bottom: 5%;*/

  clear: both;

  background-image: url("resources/pexels-panumas-nikhomkhai-1148820.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  
  background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

.parallax-small {
  height: 20vh;
  margin: 0;
  /*margin-bottom: 5%;*/

  clear: both;

  background-image: url("resources/pexels-panumas-nikhomkhai-1148820.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  
  background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

 /* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1024px) {
  .parallax {
    background-attachment: scroll;
  }
  
  .parallax-small {
    background-attachment: scroll;
  }
} 

#logo_img {
  height: 100%; 
  width: 100%;
}

.wrap-center{
	margin: 0 auto;
	position: relative;
	max-width: 50%;
}

.banner-centered {
	text-align: center;
	position: absolute;
	display: block;
	height: inherit;
	overflow: hidden;
  margin-top: 20vh;
}

@media only screen and (max-device-width: 560px) {
  .banner-centered {
    margin-top: 40vh;
  }

  .wrap-center{
    max-width: 80%;
  }

}

.blocky-text {
  text-align: justify;
}

.textbox-container{
  display: grid;
  text-align: center;
}

.textbox-container-two-col {
  display: grid;
  text-align: center;
}

@media only screen and (min-device-width: 641px) {
  .textbox-container{
    grid-template-columns: 33.3% auto 33.3%;
  }

  .textbox-container-two-col {
    grid-template-columns: 49.9% auto;
  }
}

@media only screen and (max-device-width: 640px) {
  .textbox-container,
  .textbox-container-two-col {
    grid-template-columns: 100%;
  }

  footer span {
    padding: 0.5em;
    display: block;
  }
} 

.textbox {
  padding: 1em;
  line-height: 150%;
}

.lightText {
  color: #8c8c8c;
}

.hidden {
  display: none;
}

.footer_text {
  line-height: 150%;
}

.spacer {
  margin-top: 5%;
}

.endOfPage {
  margin-bottom: 3cm;
}

#picture_tobi {
  max-width: 100%;
  width: 15em;
}

#logo_color_small {
  max-width: 100%;
  width: 35em;
}

/* nav bar */
.navbar {
  background-color: #333; /* Black background color */
  position: fixed; /* Make it stick/fixed */
  top: 0; /* Stay on top */
  width: 100%; /* Full width */
  transition: top 0.4s, opacity 0.8s; /* Transition effect when sliding down (and up) */
  margin: 0 auto;
  z-index: 99;  
}

.navbar-contains {
  width: 100%;
  display: block;
  justify-content: left;
}

.navbar-contains ul {
  list-style-type: none;
  margin: 0;
  padding: 0;

  background-color: #333;
}

.navbar-contains li {
  float: none;
}  

.navbar-contains li a {
  display: block;
  color: white;
  text-align: left;
  padding: 1em;
  text-decoration: none;
}

.navbar-contains ul li a{
  display: none;
}

#menuButton,
#menuButtonImpres,
#menuButtonPrivacy {
  display: flex;
  color: white;
  padding: 0.5em;
}

@media only screen and (min-device-width: 800px) {
 
  .navbar-contains {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .navbar-contains li {
    float: left;
  }

  .navbar-contains li a {
    text-align: center;
    padding: 1.5em 3em 1.5em 3em;
  }

  .navbar-contains ul li a{
    display: flex;
  }

  #menuButton,
  #menuButtonImpres,
  #menuButtonPrivacy {
    display: none;
  }
}

@media only screen and (min-device-width: 1367px) {
  .navbar a:hover {
    background-color: #ddd;
    color: black;
    transition: all 0.15s ease-in;
  }

  .navbar a:not(:hover) { 
    background-color: #333;
    color: white;
    transition: all 0.15s ease-in;
  }
}

@media only screen and (max-device-width: 1366px) {
  .navbar a.touchHover {
    background-color: #ddd;
    color: black;
    transition: all 0.1s ease-in;
  }

  .navbar a.touchUnHover {
    background-color: #333;
    color: white;
    transition: all 0.20s ease-in;
  }
}

#navbar_impres,
#navbar_privacy {
  opacity: 0.8;
}

textarea  
{  
  font-family: Arial, Helvetica, sans-serif;  
}