article, aside, footer, header, main, nav, section {
  	display: block;
}

html, body, h1, h2, h3, ul, li, a, p, 
article, aside, footer, header, main, nav, section {
  	padding: 0;
  	margin: 0;
}


*{
	box-sizing: border-box;
}

header {
	background-color: #333333;
}

.banner {
  	padding-top: 10px;
}


body {
	margin-left: auto;
  	margin-right: auto;
  	background-color: white;
  	font-family: Verdana;

}

/*-----------------------------------------
 * Computer styles
 ------------------------------------------*/
@media only screen and (min-width:749px) {

	.banner {
		margin-left: auto;
		margin-right: auto;
		max-width: 1024px;
		width: 80%;
		font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	}

	.logo{
		display: inline;
		top:10px;
		/*margin-left:10%;*/
	}


	/*make hamburger invisible*/
	.c-hamburger {
		display:none;
	}
	
	/*make submenu plus invisible*/
	.sub-dropdown1, .sub-dropdown2 {
		display:none;
	}
	
	/*navigation*/
	nav{
		display: inline-block;
		position: relative;
		top:10px;
		margin-bottom: 10px;
	}

	nav > ul a {
		display: block;
		white-space: nowrap; 	/*prevent linebreak*/
		padding: 10px;
	}

	/*remove list bullets*/
	nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	
	/*put menu items next to each other*/
	nav > ul > li {
		float: left;
	}

	
	/*top level menu items*/
	.hoverBtn {
		color:white;
		text-decoration:none;
		-webkit-transition: color 0.4s;
	    transition: color 0.4s;*/
	}
	
	/*change color on hover*/
	.hoverBtn:hover {
		color: #DAA520;
		text-decoration:none;
		-webkit-transition: color 0.4s;
	    transition: color 0.4s;
	}
	
	/*make submenu invisible*/
	.sub-menu1, .sub-menu2{
		/*display: none;*/
		z-index:1000;
		max-height: 0;
		display: block;
		overflow: hidden;
	    position: absolute;
	    background-color: #333333;
	    -webkit-transition: max-height 0.6s ease-in-out;
	    -moz-transition: max-height 0.6s ease-in-out;
	    -o-transition: max-height 0.6s ease-in-out;
	    -ms-transition: max-height 0.6s ease-in-out;
	    transition: max-height 0.6s ease-in-out; 
	}
	
	/*make submenu visible*/
	.dropdown1:hover .sub-menu1{
		max-height: 2000px;
	}
	.dropdown2:hover .sub-menu2{
		max-height: 2000px;
	}
	
	
	/*slide in when scrolling*/	
 	.module {
   		position: relative;
   		float: left;
   		&:nth-child(even) {
     	margin-right: 0;
     	opacity:0;
   		}
 	}
  
 	.come-in {
   		transform: translateX(-50px);
   		opacity:0;
   		animation: come-in 0.8s ease forwards;
 	}
 	.come-in:nth-child(odd) {
   		animation-duration: 0.6s;
 	}
 	.already-visible {
   		transform: translateX(0);
   		opacity:1;
   		animation: none;
	}

	@keyframes come-in {
  		to { transform: translateX(0);
  		opacity:1;
   		transition: opacity 0.8s ease forward;}
	}
	
	
	
	.ttArticle {
		width:65%;
		display:inline-block;
	}
	
	.otArticle {
		width:30%;
		text-align: left;
		float:right
	}
	
	/*set width so two-halves are display on next to each other*/
	.thDiv {
		width:49%;
	}
	
	/*make headline above image disappear*/
	.thDivHeaderImg {
		display:none;
	}
	
	.content {
		width: 80%;
	}
	section {
		float: left;
		width:70%;
		margin-right:auto;
	}
	
	aside {
  		background-color: white;
  		width: 200px;
  		float: right;
  		/*padding: 20px 20px;*/
  		margin-top: 40px;
	}
	
	.flasche {
		margin-right: auto;
		margin-left: auto;
	}
	
	@media only screen and (max-width:1050px) {
		aside {
  			float:none;
  			margin-left: auto;
  			margin-right: auto;
		}
		section {
			float:none;
			width:90%;
			margin-right: auto;
			/*margin-left: auto;*/
		}
	}
	
	.gallery_landscape {
		width:72.7%;
	}
	
	.gallery_portrait {
		width: 26.2%;
	}
	
	.videoAlternative {
		display:none;
	}
	
}




/*-----------------------------------------
 * Smarphone styles
 ------------------------------------------*/
@media only screen and (max-width:749px){

	.logo{
		display: block;
		top:10px;
		margin-left: auto;
    	margin-right: auto 
	}

	/*hamburger*/
	
	.c-hamburger {
	  display: block;
	  position: relative;
	  overflow: hidden;
	  margin: 0 auto;
	  padding: 0;
	  width: 96px;
	  height: 96px;
	  font-size: 0;
	  text-indent: -9999px;
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  appearance: none;
	  box-shadow: none;
	  border-radius: none;
	  border: none;
	  cursor: pointer;
	  /*-webkit-transition: background 0.3s;
	          transition: background 0.3s;*/
	}

	.c-hamburger:focus {
	  outline: none;
	}

	.c-hamburger span {
	  display: block;
	  position: absolute;
	  top: 44px;
	  left: 18px;
	  right: 18px;
	  height: 8px;
	  background: white;
	}

	.c-hamburger span::before,
	.c-hamburger span::after {
	  position: absolute;
	  display: block;
	  left: 0;
	  width: 100%;
	  height: 8px;
	  background-color: white;
	  content: "";
	}

	.c-hamburger span::before {
	  top: -20px;
	}

	.c-hamburger span::after {
	  bottom: -20px;
	}


	/*Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
	 * down to center and transform into an "x".*/
	.c-hamburger--htx {
	  background-color: #333333;
	}
	
	/*.c-hamburger--htx span {
	  -webkit-transition: background 0s 0.3s;
	          transition: background 0s 0.3s;
	}*/
	
	.c-hamburger--htx span::before,
	.c-hamburger--htx span::after {
	  -webkit-transition-duration: 0.3s, 0.3s;
	          transition-duration: 0.3s, 0.3s;
	  -webkit-transition-delay: 0.3s, 0s;
	          transition-delay: 0.3s, 0s;
	}

	.c-hamburger--htx span::before {
	  -webkit-transition-property: top, -webkit-transform;
	          transition-property: top, transform;
	}
	
	.c-hamburger--htx span::after {
	  -webkit-transition-property: bottom, -webkit-transform;
	          transition-property: bottom, transform;
	}
	
	/* active state, i.e. menu open */
	/*.c-hamburger--htx.is-active {
	  background-color: #cb0032;
	}*/
	
	/*make vertical line invisible*/
	.c-hamburger--htx.is-active span {
	  background: none;
	}
	
	/*rotate two lines*/
	.c-hamburger--htx.is-active span::before {
	  top: 0;
	  -webkit-transform: rotate(45deg);
	      -ms-transform: rotate(45deg);
	          transform: rotate(45deg);
	}
	
	.c-hamburger--htx.is-active span::after {
	  bottom: 0;
	  -webkit-transform: rotate(-45deg);
	      -ms-transform: rotate(-45deg);
	          transform: rotate(-45deg);
	}
	
	.c-hamburger--htx.is-active span::before,
	.c-hamburger--htx.is-active span::after {
	  -webkit-transition-delay: 0s, 0.3s;
	          transition-delay: 0s, 0.3s;
	}
	
	
	/*plus*/
	
	.c-plus {
	  /*display: block;*/
	  position: relative;
	  overflow: hidden;
	  margin-top: 11px;
	  margin-right:20%;
	  top:auto;
	  padding: 0;
	  width: 25px;
	  height: 25px;
	  font-size: 0;
	  text-indent: -9999px;
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  appearance: none;
	  box-shadow: none;
	  border-radius: none;
	  border: none;
	  cursor: pointer;
	}

	.c-plus:focus {
	  outline: none;
	}

	.c-plus span {
	  display: block;
	  position: absolute;
	  top: 10px;
	  width:100%;
	  height: 4px;
	  background: white;
	  -webkit-transition: background 0.6s;
	    transition: background 0.6s;
	  -webkit-transition-delay: 0.4s;
	  	-moz-transition-delay: 0.4s;
	  	-o-transition-delay: 0.4s;
	  	-ms-transition-delay: 0.4s;
	  	transition-delay: 0.4s;
	}

	.c-plus span::before {
	  position: absolute;
	  display: block;
	  left: 0;
	  width: 100%;
	  height: 4px;
	  background-color: white;
	  content: "";
	}

	.c-plus span::before {
		-moz-transform: rotate(90deg);
			-webkit-transform: rotate(90deg);
			-o-transform: rotate(90deg);
	      	-ms-transform: rotate(90deg);
	        transform: rotate(90deg);
	}

	.c-plus--htx {
	  background-color: #333333;
	}
	
	.c-plus--htx span::before{
	  -webkit-transition-duration: 0.6s;
	  	-moz-transition-duration: 0.6s;
	  	-o-transition-duration: 0.6s;
	  	-ms-transition-duration: 0.6s;
	  	transition-duration: 0.6s;
	  
	}

	
	/*make vertical line invisible*/
	.c-plus--htx.is-active span {
	  background: none;
	  -webkit-transition: background 0.6s;
	    transition: background 0.6s;


	}
	
	/*rotate two lines*/
	.c-plus--htx.is-active span::before {
	  top: 0;
	  -moz-transform: rotate(180deg);
			-webkit-transform: rotate(180deg);
			-o-transform: rotate(180deg);
	      	-ms-transform: rotate(180deg);
	        transform: rotate(180deg);
	  -webkit-transition-delay: 0.4s;
	  	-moz-transition-delay: 0.4s;
	  	-o-transition-delay: 0.4s;
	  	-ms-transition-delay: 0.4s;
	  	transition-delay: 0.4s;
	}
	
	
	
	/*hide menu*/
	.menu {
	  	max-height:0;
	  	padding-left: 15%;
	  	overflow: hidden;
	  	-webkit-transition: all 0.6s;
	    -moz-transition: max-height 0.6s ease-in-out;
	    -o-transition: max-height 0.6s ease-in-out;
	    -ms-transition: max-height 0.6s ease-in-out;
	    transition: max-height 0.6s ease-in-out;
	 }
	
	/*show menu*/
	.expand {
		margin: 0 auto;
		width: 100%
		padding: 20px;
	  	max-height:1000px;
	  	padding-bottom:10px;
	  	-webkit-transition: all 0.6s ease-in-out;
	    -moz-transition: max-height 0.6s ease-in-out;
	    -o-transition: max-height 0.6s ease-in-out;
	    -ms-transition: max-height 0.6s ease-in-out;
	    transition: max-height 0.6s ease-in-out;
	}
	
	.sub-dropdown1, .sub-dropdown2 {
		color:white;
		float: right;
		font-size:24px;
		font-weight: bold;
		display:block;
		padding-right:0;
		cursor: pointer;
	}
	
	/*hide sub-menu*/
	.sub-menu1, .sub-menu2 {
	  	max-height:0;
	  	margin-left:20px;
	  	overflow: hidden;
	  	-webkit-transition: max-height 0.6s ease-in-out;
	    -moz-transition: max-height 0.6s ease-in-out;
	    -o-transition: max-height 0.6s ease-in-out;
	    -ms-transition: max-height 0.6s ease-in-out;
	    transition: max-height 0.6s ease-in-out;
	} 
	
	/*show sub-menu*/
	.sub-expand1, .sub-expand2 {
	  	max-height:1000px;
	  	-webkit-transition: max-height 0.6s ease-in-out;
	    -moz-transition: max-height 0.6s ease-in-out;
	    -o-transition: max-height 0.6s ease-in-out;
	    -ms-transition: max-height 0.6s ease-in-out;
	    transition: max-height 0.6s ease-in-out;
	}
	
	/*navigation*/
	nav{
		/*display: inline-block;*/
		position: relative;
		top:10px;
		margin-bottom: 10px;
	}

	nav > ul a {
		display: inline-block;
		padding: 10px;
	}

	/*remove list bullets*/
	nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	
	/*top level menu items*/
	.hoverBtn {
		color:white;
		max-width: 200px;
		font-size:20px;
		text-decoration:none;
		-webkit-transition: color 0.4s;
	    transition: color 0.4s;*/
	}
	
	/*change color on hover*/
	.hoverBtn:hover {
		color: #DAA520;
		font: Verdana;
		text-decoration:none;
		-webkit-transition: color 0.4s;
	    transition: color 0.4s;*/
	}
	
	
	
 	/*slide in when scrolling*/	
 	.module {
   		position: relative;
   		float: left;
   		opacity:0;
   		&:nth-child(even) {
     	margin-right: 0;
   		}
 	}
  
 	.come-in {
   		transform: translateY(150px);
   		display:block;
   		opacity:0;
   		animation: come-in 0.8s ease forwards;
 	}
 	.come-in:nth-child(odd) {
   		animation-duration: 0.6s;
 	}
 	.already-visible {
   		transform: translateY(0);
   		opacity:1;
   		animation: none;
	}

	@keyframes come-in {
  		to { transform: translateY(0);
  		opacity:1;
   		transition: opacity 0.8s ease forward;}
	}

	
	
	.ttArticle {
		width:100%;
	}
	
	.otArticle {
		width:100%;
		text-align: left;
	}
	
	/*set width so two-halves are display on top of each other*/
	.thDiv {
		width:100%;
		text-align:justify;
	}
	
	/*make headline above text in two.halfes block disappear*/
	.thDivHeaderText {
		display:none;
	}
	
	.content{
		width: 100%;
	}
	
	section {
		width:90%;
		margin-right: auto;
		margin-left: auto;
	}
	
	aside {
		display:none;
	}
	
	.gallery_landscape {
		width:100%;
	}
	
	.gallery_portrait {
		width:49%;
	}
	
	.gallery_portrait_2 {
		float:right;
	}
	
	.fancybox {
		/*pointer-events: none;*/
	}
	
	.vid {
		display:none;
	}
	
}



.content{
	margin-left: auto;
	margin-right: auto;
	max-width: 1024px;
	color: #333333;
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	line-height:1.7;
	-ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}


section {
  	background-color: white;
  	margin-top: 20px;
}

article {
	text-align:justify;
  	background-color: white;
  	margin-top: 10px;
  	padding: 10px 0px;
  	
}


.buttonMehr {
	padding: 10px;
	text-decoration:none;
	border: 2px solid #DAA520;
	color: #DAA520;
	background-color: white;
	-webkit-transition: color 0.4s, background-color 0.4s;
	transition: color 0.4s, background-color 0.4s;
}

.buttonMehr:hover {
	color: white;
	background-color: #DAA520;
}

/*buttons in content section*/
.hoverBtnContent {
	color:#333333;
	text-decoration:none;
	-webkit-transition: color 0.4s;
    transition: color 0.4s;*/
}

/*change color on hover*/
.hoverBtnContent:hover {
	color: #DAA520;
	text-decoration:none;
	-webkit-transition: color 0.4s;
    transition: color 0.4s;
}

footer {
  clear: both;
  background-color: #333333;
  color: white;
  margin-top: 50px;
  padding: 20px 20px;
}