﻿/*-------------------------------------------------------------------------------*/
/*																				 */
/* 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%;
	}	

	.animated-text {
		display:none;
	} 

	.headline {
		font-size:100%;
		padding-top:5%;

	}
	.headline b  {
		font-size:150%;
	}
	.slider img{	
		width:95%;
	}
		
	.shopline {
		font-size:90%;
	}

	.shopline b  {
		font-size:90%;
	}

	button.accordion b {	
		font-size:110%;
	}
		
}
	
@media screen and (max-width: 799px) { 	   /* Tablet, Smartfone  */
	body {
		font-size:90%;
	}
	.navigation {
		height:60px;
		
	}
	
	.banner {
		padding-top:9%;
	
	}

	.img-wrapper{
		width:98%;
	}

	/*.img-wrapper img{
		width:95%;
	}*/

	.headline {
		font-size:130%;
		width:100%;
		padding:3% 0% 6% 0%;

	}
	.headline p {
		padding:0 5% 0 5%;
	} 

	.headline b  {
		font-size:130%;
	}
	.liveblock {
		width:98%;
		font-size:70%;
		padding:1%;
		margin:1% 1% 1% 1%;
	
	}

	/*.live-wrapper{
		display:none;
	}*/

	.welcome {	
			font-size:100%;
			padding:0 5% 10% 5%;
	}
			
	.flex-container{
		flex-direction: column;
		font-size:120%;
	}		
	.info-item {
	    width: 95%;
	    margin-left:2.5%;
	}
	.info-item b {
		font-size:80%;
		color:#333333;
	}
		
	.scrollicon {
		bottom:100px;
	}
	
	.panel_box {
		width:90%;
		font-size:60%;
	
	}
	.panel_box b{
		font-size:130%;
	
	}
	.sponsor-wrapper img {
		width:25%;	
	}
	
	button.accordion b {	
		font-size:130%;
		font-weight:bold;	
	}

}

@media screen and (max-width: 450px) {
	.banner {
		padding-top:15%;
	
	}
	button.accordion b {	
		font-size:115%;
	}
	 .sidenav {
	  	padding-top: 15px;
	 }	 	 
	 .sidenav a {
	  font-size: 18px;
	 }

	.liveblock b {
		font-size:100%;		
	}	 
}
