/* =====================
   Tablet (Portrait & Landscape)
   ab 768px bis 1024px
   ===================== */
@media (max-width: 1200px) {
	
	h1{
		font-size: 150% !important;
	}
	
	h2{
		font-size: 200% !important;
	}
	
	h3{
		font-size: 250% !important;
	}

	#naviscreen{
		display: none;
	}
	
	#navimobile{
		display: unset;
	}
	
	#lowerleft {
    	display: inline-block;
    	width: 100%;
    	float: unset;
	}
	
	#lowerright {
	    width: 100%;
		margin-top: 20px;
	}
	
	#lowerright h4 {
    	margin: 20px 0 0 0;
    	text-align: left;
	}
	
	#lowerright p {
    	text-align: left;
	}
	
	.text-block img{
		width: 100%;
	}
	
	.vorstandliste h2 {
		font-size: 150%;
	}
	
	.vorstandliste p {
	    font-size: 100%;
	}
	
	.headline img {
    	width: 100%;
    	margin-left: 0;
	}
	
	#menuToggle{
		transition: all 0.3s;
		display: block;
	  	position: absolute;
	  	top: 25px;
	  	right: 20px;
	  	z-index: 1;
	  	-webkit-user-select: none;
	  	user-select: none;
	}
	
	.topper.shrink #menuToggle{
		top: 20px;
	}
	
	#menuToggle input
	{
	  display: block;
	  width: 40px;
	  height: 32px;
	  position: absolute;
	  top: -7px;
	  left: -5px;  
	  cursor: pointer;
	  opacity: 0; /* hide this */
	  z-index: 2; /* and place it over the hamburger */
	  -webkit-touch-callout: none;
	}
	
	/*
	 * Just a quick hamburger
	 */
	#menuToggle span
	{
	  display: block;
	  width: 30px;
	  height: 4px;
	  margin-bottom: 4px;
	  position: relative;
	  background: #ffffff;
	  border-radius: 3px;
	  z-index: 1;
	  transform-origin: 4px 0px;
	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	  opacity 0.55s ease;
	}
	
	.topper.shrink #menuToggle span
	{
	  background: #ffffff;
	}
	
	#menuToggle span:first-child
	{
	  transform-origin: 0% 0%;
	}
	
	#menuToggle span:nth-last-child(2)
	{
	  transform-origin: 0% 100%;
	}
	
	/* 
	 * Transform all the slices of hamburger
	 * into a crossmark.
	 */
	#menuToggle input:checked ~ span
	{
	  opacity: 1;
	  transform: rotate(45deg) translate(-2px, -1px);
	  background: #FFF;
	}
	
	/*
	 * But let's hide the middle one.
	 */
	#menuToggle input:checked ~ span:nth-last-child(3)
	{
	  opacity: 0;
	  transform: rotate(0deg) scale(0.2, 0.2);
	}
	
	/*
	 * Ohyeah and the last one should go the other direction
	 */
	#menuToggle input:checked ~ span:nth-last-child(2)
	{
	  opacity: 1;
	  transform: rotate(-45deg) translate(0, -1px);
	}
	
	/*
	 * Make this absolute positioned
	 * at the top left of the screen
	 */
	#menu {
		position: fixed;
		width: 95vw;
		margin: 0;
		padding: 2.5vw;
		padding-top: 25px;
		background: rgb(117 162 21 / 95%);
		list-style-type: none;
		-webkit-font-smoothing: antialiased;
		transform-origin: 0% 0%;
		transform: translate(100%, 0);
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
		height: 100vh !important;
		font-size: 22px;
		top: 0;
		right: 0%;
		text-align: center;
		overflow-y: scroll;
	}
	
	#menu li{
		padding: 0;
		text-align: left;
	}
	
	/*
	 * And let's fade it in from the left
	 */
	#menuToggle input:checked ~ ul
	{
	  transform: scale(1.0, 1.0);
	  opacity: 1;
	}
	
	#menu a
	{
		text-decoration: none;
		transition: color 0.3s ease;
	}
	
	#menu ul{
	list-style: none;
}

#menu ul li a{
	color: #ffffff;
    line-height: 1.75;
    font-family: 'Lobster', cursive !important;
    font-size: 125%;
	
	}

#menu ul li ul li a{
	color: #FFF;
	font-family: 'Quicksand', sans-serif !important;
	font-size: 100%;
}

#menu ul li ul li ul li a{
	color: #8b8b8b;
}
	
	.eventlist {
    	width: 85%;
    	height: auto;
    	padding: 0;
    	margin: 2%;
    	background-color: rgb(255 255 255 / 75%);
    	padding: 5%;

	}
	
	.eventlist h3 {
	    font-size: 5vw !important;
   	}
	
	
}

/* =====================
   Smartphone (Portrait)
   bis 767px
   ===================== */
@media (max-width: 767px) {

	#naviscreen{
		display: none;
	}
	
	#navimobile{
		display: unset;
	}
	
	.vorstand {
    	display: inline-block;
    	width: 100%;
    	height: auto;
    	padding: 0;
    	margin: 0 0 20px 0;
	}
	
	.vorstandliste h2 {
        font-size: 160%;
    }
	
	.vorstandliste p {
	    font-size: 110%;
		margin: 0;
	}
	
	.vorstandliste p a {
	    font-size: 75% !important;
	}
	
	.headline img {
    	width: 100%;
    	margin-left: 0;
	}
	

	
}


@media (max-width: 1600px) {
			
	.newsArticle {
    	display: inline-block;
    	width: 9vw;
    	height: 9w;
    	padding: 0;
    	margin: 1vw;
	}
	
}


@media (max-width: 800px) {
			
	.newsArticle {
    	display: inline-block;
    	width: 20vw;
    	height: 20vw;
    	padding: 0;
    	margin: 1vw;
	}
	
}

@media (max-width: 400px) {
			
	.newsArticle {
    	display: inline-block;
    	width: 40vw;
    	height: 40vw;
    	padding: 0;
    	margin: 2vw;
	}
	
}