/*******************************
*********** GLOBAL *************
*******************************/

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*, *:before, *:after {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

body {
	background-color: #CCC;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#site {
	max-width: 1500px; /* same as #navbar.fixed max-width */
	margin: 0 auto;
}

h2 faching {
	color: red;
	background-color: white;
}

h1 {
	padding: 20px;
	padding-top: 100px;
	font:4em 'Open Sans', sans-serif;
	text-align: center;
}

h2 {
	padding: 10px;
	font:3em 'Open Sans', sans-serif;
	text-align: center;
}

h3 {
	font:2em 'Open Sans', sans-serif;
	padding-bottom: 2em;
	text-align: center;
}

p {
	font: 1.6em 'Open Sans', sans-serif; /*2em*/
	color: #555;
	text-align: justify;
	margin: 0 auto;
}

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

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.table
{
   display:table;
}

.table-row
{
   display:table-row;
}

.table-cell
{
   display:table-cell;
   padding-left: 0;
   padding-right: 2em;
}

/*******************************
******** NAVIGATION BAR ********
*******************************/
nav {
	border: none;
	background-color: #CCC;
	border-top: 5px solid #555;
	border-bottom: 5px solid #555;
}
nav li {
	float: left;
	height: 48px;
	width: 16.6666%;
  	background-color: #CCC;
}

#navbar.fixed {
	/*navbar on top, horizontally centered, width == #site width*/
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	z-index: 9;
	width: 100%;
	max-width: 1500px; /* same as #site max-width */
	background-color: #CCC;
	border-bottom: 5px solid #555;
}

ul {
	list-style: none;
}
ul a{
	display: block;
	text-align: center;
	color: #333;
	text-decoration: none;
}
ul a:hover {
	color: #000;
	text-decoration: underline;
}


.navlist:after {
  content: "";
  display: block;
  clear: both;
}

.navitem {
	font: 2em 'Open Sans', sans-serif;
	line-height: 48px;
}

/*******************************
************ HEADER ************
*******************************/

#banner {
	background-color: #FFF;
	position: block;
    width:100%;
    height:100%;
    text-align: left;
	padding: 0 2%;
}

#headerimage {
	margin-right: 3%;
}

#duslogo  {
	float: right;
}

/*******************************
************* MAIN *************
*******************************/

/**** Text *****
***************/
span.longtext {
	display:none;
}
span.moretext {
	width: 50%;
	cursor: pointer;
	color: #333;
	background-color: #CCC;
}
span.moretext:hover {
	color: #000;
	text-decoration: underline;
}


/*** Container items ****
************************/
.container {
	width: 100%;
	background-color: #FFF;
	padding: 0 2%;
}
.container:after {
	content: "";
	display: block;
	clear: both;
}

.content {
	margin:1%;
}

.ganzebreite {
	margin: 0 1%;
	clear: both;
}
.einhalb {
	width: 48%
}
.goldenmajor {
	width: 59.8%;
}
.goldenminor {
	width: 36.2%;
}

.eindrittel {
	width: 31.333%;
	float: left;
	text-align: center;
}

.links {
	float: left;
	clear: both;
}
.rechts{
	float: right;
}

.galleryimg {
	display: block;
	width: 48%;
	margin: 1% ;
}
.galleryimg:nth-of-type(2n+1) {
	float: left;
}
.galleryimg:nth-of-type(2n) {
	float: right;
}


/*******************************
************ FOOTER ************
*******************************/
footer .container {
	background-color: #CCC;
	overflow: hidden;
}
.footerelement {
	border-left: 5px solid #FFF;
	border-top: 20px solid #CCC;
	border-bottom: 5px solid #FFF;
	border-right: 20px solid #CCC;
	padding: 20px 0;
}
.footerelement p {
	margin: 0;
	margin-left: 4%;
	font: 1em 'Open Sans', sans-serif;
	color: #000;
}

/**** Exceptions *****
**********************/
#start {
    text-align: center;
}



/*#########################################################
  M E D I A   Q U E R I E S
  ######################################################### */

/*************************************
********* below 1500px width *********
*************************************/

@media only screen and (max-width: 1500px) {
	h1 {
		padding: 20px;
		padding-top: 100px;
		font: 3.2em 'Open Sans', sans-serif;
		text-align: center;
	}

	h2 {
		padding: 10px;
		font: 2.4em 'Open Sans', sans-serif;
		text-align: center;
	}
	
	h3 {
		font:1.6em 'Open Sans', sans-serif;
		padding-bottom: 1.6em;
		text-align: center;
	}

	/*p {
		font: 1.6em 'Open Sans', sans-serif;
		color: #555;
		text-align: justify;
		margin: 0 auto;
	}*/
}

/*************************************
********* below 1100px width *********
*************************************/

@media only screen and (max-width: 1100px) {
	h1 {
		padding: 20px;
		padding-top: 100px;
		font: 2.5em 'Open Sans', sans-serif;
		text-align: center;
	}

	h2 {
		padding: 10px;
		font: 1.9em 'Open Sans', sans-serif;
		text-align: center;
	}
	
	h3 {
		font:1.3em 'Open Sans', sans-serif;
		padding-bottom: 1.3em;
		text-align: center;
	}

	p {
		font: 1.3em 'Open Sans', sans-serif;
		color: #555;
		text-align: justify;
		margin: 0 auto;
	}
}


/*************************************
********* below 1000px width *********
*************************************/

@media only screen and (max-width: 1000px) {
	#banner {
		text-align: center;
		padding: 0 5%;
	}
	
	/*******************************
	******** NAVIGATION BAR *******/
	.hamburgerwrap {
		cursor: pointer;
	}
	.hamburger {
		padding-left: 15px;
		padding-top: 15px;
		padding-bottom:15px;
		display: block;
		float: left;
	}
	#hamburgertext {
		color: #333;
		padding-left: 65px;
	}
	.line {
		border-bottom: 4px solid #364d19;
		width: 35px;
		margin-bottom: 6px;
	}
	.line:last-child {
		margin-bottom: 0;
	}
	.navitem {
		font: 2em 'Open Sans', sans-serif;
		line-height: 48px;
	}
	nav li {
		width: 100%;
		padding-left: 15px
	  }
	ul a {
		text-align: left;
	  }
	#navbar.fixed {
		border: none;
	}
	.menu {
		height: 0;
		overflow: hidden;
		transition: height 0.4s;
	}
	.open {
		height: 288px;
	}
}

/*************************************
********* below 800px width *********
*************************************/

@media only screen and (max-width: 799px) {
	.content {
		margin: 0 1%;
		clear: both;
		width: 98%;
	}
/*	.twocolumns {
		display: table;
		width: 100%; 
	} /*

/* ************************************
********* below 700px width *********
************************************ */

@media only screen and (max-width: 700px) {
	h1 {
		padding: 20px;
		padding-top: 100px;
		font: 2em 'Open Sans', sans-serif;
		text-align: center;
	}

	h2 {
		padding: 10px;
		font: 1.5em 'Open Sans', sans-serif;
		text-align: center;
	}
	
	h3 {
		font:1em 'Open Sans', sans-serif;
		padding-bottom: 1em;
		text-align: center;
	}

	p {
		font: 1em 'Open Sans', sans-serif;
		color: #555;
		text-align: justify;
		margin: 0 auto;
	}
}