/*
*
* Responsive Stylesheet Eishockey Online
* @author Andre Seifert
* @email aseifert@mindcaps.com
*
*
*/

@import url("font-awesome.min.css");

/* Same Fonts*/

h1,
h2,
h3,
h4,
h5,
h6,
p,
div,
body,
ul,
li,
a {
	font-family: Tahoma,Arial,Helvetica,Sans-Serif!important;
	
}

/* Clean Up Mlodule */
.art-postcontent ul > li::before, .art-post ul > li::before, .art-textblock ul > li::before {
    display: none!important;
}

.allmode-portal .allmode-title a {
    border-bottom: none;
}
/* Umstellung 768x90 */
.art-sheet {
	width: 1166px;
}

.art-sheet {
	margin-left: 0;
	margin-right: 0;
}

.art-header {
	background-size: cover;
}
/* Ebay */
h3.eb_headline,
.eb_product {
	font-family: Tahoma, Arial, Helvetica, Sans-Serif!important;
}

h3.eb_headline {
	margin-bottom: 20px;
	margin-top: 20px;
}

.eb_product .eb_img {
	width: 25%;
	float: left;
	text-align: center;
	border: 1px solid #ccc;
	padding: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.eb_product a {
	color: #000!important;
}

.eb_product a:hover {
	color: #000!important;
}

.eb_product img {
	width: auto;
	max-width: 100%;
	height: auto;
	float: none;	
}

.eb_product {
	width: 100%;
	float: left;
	margin-bottom: 10px;
}

.eb_product .eb_price {
	color: #000;
}

.eb_product .eb_price,
.eb_product .eb_title {
	width: 70%;
	float: right;
	margin-bottom: 10px;
}

.eb_product .eb_title {
	font-size: 15px;
	color: #D50C01;
}

.eb_btn {
	display: inline-block;
	float: left;
	padding: 10px 25px;
	border: 1px solid #D50C01;
	font-weight: 400;
	margin-top: 20px;
	color: #D50C01;
}

.eb_btn:hover {
	background: #D50C01;
	color: #fff;
}



/* Responsive Menu */
body {
	overflow-x: hidden;
}

/* Border Box Reset mobile menu */
.mobile-menu, 
.mobile-menu * {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;    
	box-sizing: border-box;    

}


/* Mobile Menu Styles */
.mobile-menu {
	width: 80%;
	position: absolute;
	left: -80%;
	height: 100%;
	background: #DC151C;
	z-index: 1000;
	padding: 20px;
	font-family: inherit;	
	/* Transition / Animation */
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
	/* Add Basic Font */
	font-size: 12px;
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
}


.mobile-menu ul {
	list-style: none;
}

.mobile-menu ul li {
	float: left; 
	width: 100%;
	margin: 10px 0;

}

.mobile-menu,
.mobile-menu a {
	color: #fff;
	text-decoration: none;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5em;
}

.mobile-menu a:hover {
	/* Hover Effect not necessary (mobile Version) */
}

.mobile-menu i {
	font-size: 20px;
	margin-top: 10px;
	margin-right: 10px;
}

/* Box Shadow Menu */
.mobile-menu-link {
	position: absolute;
	display: none;
	color: #DC151C;
	font-size: 30px;
	right: 15px;
	top: 10px;
}


/* Mobile Logo */
.mobile-logo {
	display: none;
	position: relative;
	z-index: 100;
}


.mobile-logo  img {
	width: 120px;
	height: 120px;
	margin: 10px;
}

.show-on-mobile {
	display: none;
}

/* Mobile Devices */
@media screen and  (max-width: 768px) { 
/* Start CSS */
	
	/* 1. SET BASICS TO 100% AND FLOAT */
		body {
			min-width: 100%; 
			overflow-x: hidden;
		}
		
		#art-main {
			text-align: left;
		}
		
		.art-sheet {
			margin-top: 0px;
			background-image: none!important;
		}

		.art-sheet,
		.art-sidebar1,
		.art-content-layout .art-content {
			width: 100%;
		}
		
		.art-layout-cell {
			display: block;
			float: left;
		}
	
		img {
			max-width: 100%!important;
			height: auto!important;
		}
	
	
	/* 2. START HEADER */
	
		/* Hide Navigation */
		.desktop-nav {
			display: none;
		}
		
		/* Show mobile Nav */
		.mobile-menu-link {
			display: block;
		}
		
		/* Change Logo */
		.art-header {
			/*background-image: url('../images/eishockey-online-logo-300x300.png');
			background-size: 120px 120px;
			background-position: 10px 10px ;*/
			background-image: none;
			height: auto;
			background: #333;
			background: url('../images/mobile-header-image.jpg');
			background-size:  initial;
		}
		
		.mobile-logo  {
			display: inline-block;
		}
			
		/* Have to be Important to overwrite Inline CSS */
		header .art-textblock {
			float: left !important;
			position: static!important;
			top: 0 !important;
			height: 44px !important;
			width: auto !important;
			display: none!important;
		}
		
		/* Have to be Important to overwrite Inline CSS */
		header .art-textblock div /* ,
		header .art-textblock a*/ {
			height: 44px!important;
			width: 30px!important;
		}
		
		/* Have to be Important to overwrite Inline CSS */
		header .art-textblock.art-object1592217116 {
			float: right!important;
			margin-right: 20px;
			margin-top: 10px;
		}
		
	/* Content Blocks / Article Preview */
	
	.hide-on-mobile {
		display: none;
	}
	
	.show-on-mobile {
		display: block;
	}
	
	.art-content-layout .art-sidebar1 {
		width: 100%!important;
	}
	
	.allmode-default .allmode-img {
		width: 25%;
	}
	
	#art-main .allmode-default .allmode-topitem .allmode-text {
		text-align: justify!important;
	}
		
	/* 4. Footer */
	footer.art-footer {
		margin-top: 30px
	}
	
	footer.art-footer table {
		display: none;		
	}
	
	.allmode-default .allmode-img img,
	.allmode-portal .allmode-img img {
		border: none!important;
		margin: 0!important;
		background: none!important;
	}
	
	.allmode-img	{
		width: 32%;
		float: left;
		margin: 0 1% 10px 0;
		padding: 0px!important;
		border: none!important;
	}
	
	.allmode-img img {
		padding: 0 10px 10px 0!important;
	}
	
	.allmode-info,
	.allmode-title,
	.allmode-date {
		width: 66%;
		float: left;
	}
	
	.jwts_tabberlive li {
		float: left;
	}
	
	.art-postcontent ul > li::before, .art-post ul > li::before {
		display: none;
	}	
	
	ul.jwts_tabbernav li a {
		display: inline-block;
		border: none;
	}
	
	.jwts_tabbernav {
		width: 100%;
		float: left;
	}
	
	ul.jwts_tabbernav li.jwts_tabberactive a {
		color: #fff;
		background: #D50C01;
		border: none;
	}
	
	ul.jwts_tabbernav li a:hover {
		border: none;
		background: inherit;
	}
	
	.allmode-img {
		
		width: 100%!important;
		float: left!important;
		margin: 0!important ;
	}
	
	.allmode-img img {
		width:auto!important;
		height: auto!important;
		max-width: 100%!important;
	}
	
	.allmode-info,
	.allmode-title,
	.allmode-date {
		width: 100%!important;
		float: left!important;
	}	
	
	
/* End CSS */
}
/**/
@media screen and  (max-width: 320px) { 
	.allmode-img {
		width: 100%;
		float: left;
		margin: 0 ;
	}
	
	.allmode-info,
	.allmode-title,
	.allmode-date {
		width: 100%;
		float: left;
	}
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px)
and (orientation : portrait) { 
	.allmode-img {
		
		width: 100%!important;
		float: left!important;
		margin: 0!important ;
	}
	
	.allmode-info,
	.allmode-title,
	.allmode-date {
		width: 100%!important;
		float: left!important;
	}
}

.mobileShowandreas {display: none;} 

  /* Smartphone Portrait and Landscape */ 
  @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px){ 
      .mobileShow {display: inline;}
  }