/*-------------------------------------------------------------------------------*/
/*																				 */
/* CSS-File: 	responsive.css       	                                         */
/* Version:		001																 */
/*																				 */
/* Datum:		24.01.2018														 */
/*																				 */
/* Author:		BoomArang Engineering											 */
/* Purpose:		mobile styles für alle Seiten  									 */
/*																				 */
/* History:		none                         									 */
/*																				 */
/*																				 */
/*-------------------------------------------------------------------------------*/

/*----------------------------------------------------------*/
/*				Mobile Style								*/
/*----------------------------------------------------------*/
@media screen and (max-width: 1200px) {			/*  Laptop      */
	body {
		font-size:120%;
	}	

.hotdates{
	top:100px;
	font-size:80%;
}

	.headline {
		font-size:100%;
		padding-top:5%;

	}
	.headline b  {
		font-size:150%;
	}
	.headline img {
		width:8%;
	}

	.img-wrapper img{
		width:95%;
	}
			
}
	
@media screen and (max-width: 799px) { 	   /* Tablet, Smartfone  */
	body {
		font-size:90%;
	}

	.hotdates{
		top:60px;
		font-size:80%;
	}
	
	.navigation {
		height:40px;
	}
	
	.headline {
		font-size:130%;
		padding:3% 0 6% 0;

	}
	.headline p {
		padding:0 3% 0 3%;
	} 

	.headline b  {
		font-size:130%;
	}
		
	.welcome {	
			font-size:100%;
			padding:0 5% 10% 5%;
	}
		
	button.accordion {
	    font-size: 120%;
	}
	
	.flex-container{
		flex-direction: column;
		font-size:120%;
	}		
	.info-item {
	    width: 95%;
	    margin-left:2.5%;
	}
	.info-item, b {
		font-size:80%;
		color:#333333;
	}
	.info-item img {
		width:10%;
	}
		
	.scrollicon {
		bottom:100px;
	}
	button.accordion {
	    width: 90%;
	}
	
	.panel_box {
		width:90%;
		font-size:60%;
	
	}
	.panel_box b{
		font-size:130%;
	
	}
	.sponsor-wrapper img {
		width:25%;	
	}

	.liveblock {
		width:80%;

	}	

	
}

@media screen and (max-width: 450px) {
	.hotdates{
		top:190px;
		font-size:80%;
	}
}

@media screen and (max-height: 450px) {
	 .sidenav {
	  	padding-top: 15px;
	 }	 	 
	 .sidenav a {
	  	font-size: 18px;
	 }
}
@media screen and (max-width: 320px) {
	.hotdates{
		top:150px;
		font-size:80%;
	}
}