/*
 GHZ MainLayout
*/
html,
button,
input,
select,
textarea {  font-family: 'Source Sans Pro', sans-serif; }

body {
    margin: 0;
}

.pagewrapper {
    display: flex;
    justify-content: center;  /* horizontal */
    align-items: center;      /* vertikal */
    width: 85vw;              
/*    height: 100%;       */   
    margin: 0 auto;          
	overflow: hidden;
}

	#page {
	  display: grid;
	  width: 100%;
	  height: 100vh;
	  
	  grid-template-areas:
		". head  head   head ."
		". nav   main   main ."
		"foot foot  foot   foot foot";
	  
	  grid-template-rows: 15% 1fr 5%;
	  grid-template-columns: 1em minmax(150px, 250px) 1fr 1fr 1em;
	}
	
	
/* Mobile & Tablets */
@media only screen and (max-width: 768px) {
	
	.pagewrapper {
		display: flex;
		width: 100vw;
		margin: 0 auto;          
		overflow: hidden;
	}
	h2 {
	  letter-spacing: 1px !important;
	  padding: 1px;
	}
	
	main {
		margin-left: 5px;
		margin-right: 5px;
	}
	
  /*
	main * {
		overflow:auto;
	}
	*/
	
	#content {
		margin: 0 !important;
	}
	
	#page {
	  display: grid;
	  width: 95%;
	  height: 100vh;
	  
	  grid-template-areas:
		". head   head   head ."
		"main main   main   main main"
		"foot foot  foot foot foot";
		  
		grid-template-rows: minmax(130px, auto) auto auto;
		grid-template-columns: 1fr 2fr 2fr 2fr 1fr;
	}
}


#page > logo {
    grid-area: logo;

}

#page > header {
    grid-area: head;
	background-size: contain;
}

#page > nav {
    grid-area: nav;
    background-color: white;
}

#page > main {
    grid-area: main;
    background-color: white;
    overflow: auto;
}

#page > footer {
    grid-area: foot;
    background-color: #a1cdd5;
}

#page  {
    background-color: white;
}