/* RESET */

* {
	margin:0px;
    padding:0px;
    border:0px;
    outline:0px;
	box-sizing: border-box;
	line-height:140%;
}

/* MAIN */

html {
	height:100%;
}
body {
	font: 15px/135% 'Open Sans', Arial, helvetica, sans serif;
	font-weight:400;
	color:#484848;
	background: url(../images/body-bg.svg) no-repeat !important;
	background-position: bottom left !important;
	background-size: 100vw !important;
	background-attachment: fixed!important;
}
table{
	border: none;
	border-collapse: collapse;
} 
tr {
	border-bottom:1px solid #efefef;
}
td {
	vertical-align:top;
}
.clear {clear: both;}
.float_right {float: right;}
.float_left {float: left;}
.align-center {text-align:center;}

/* Framework */

header {
}
	header.header {
		border-bottom:1px solid #CC2426;
	}

.content {
	padding: 30px 0px;
}
.topnavi ul,
.mainnavi .wrapper,
.content{
	max-width: 1400px;
	margin: 0px auto;
	width:90%;
}
.mainnavi{
	height: 40px;
}


.twocols{
	display: table;
	max-width: 1400px;
	width: 100%;
	margin: 0px auto;
	padding:0px 20px;
	box--sizing:border-box;
}
	.twocols .sidebar{
		vertical-align: top;
		padding: 30px 20px 30px 0px;
		float:left;
		width:300px;
	}
		.twocols .sidebar .tx-hotshop-categorynavi p{
			padding: 10px 10px;
			background: #CC2426;
			color: #fff;
			font-size: 14px;
			text-transform: uppercase;
			margin-bottom: 10px;
		}
		.twocols .sidebar .tx-hotshop-categorynavi ul{
			list-style: none;
		}
			.twocols .sidebar .tx-hotshop-categorynavi a{
				padding: 7px 10px;
				border-bottom: 1px #ccc solid;
				color: #484848;
				text-decoration: none;
				display: block;
			}
			.twocols .sidebar .tx-hotshop-categorynavi li.active > a,
			.twocols .sidebar .tx-hotshop-categorynavi a:hover{
				color: #CC2426;
			}
			.twocols .sidebar .tx-hotshop-categorynavi ul a{
				padding-left: 10px;
				background: #fff;
			}
			.twocols .sidebar .tx-hotshop-categorynavi ul ul a{
				padding-left: 25px;
				background: #f5f5f5;
			}
			.twocols .sidebar .tx-hotshop-categorynavi ul ul ul a{
				padding-left: 40px;
				background: #e9e9e9;
			}
			.twocols .sidebar .tx-hotshop-categorynavi ul ul ul ul a{
				padding-left: 55px;
				background: #e0e0e0;
			}
				
		.twocols .sidebar .tx-hotshop-categorynavi ul ul{
			display: none;
		}
		.twocols .sidebar .tx-hotshop-categorynavi li.active > ul{
			display: block;
		}
				
	.twocols .content {
		padding: 30px 0px 30px 20px;
		width: calc(100% - 300px);
		float: right;
	}
	
	
		/* list of subcategories on the show-category-page */
		
		.content ul.tx-hotshop-subcategories{
			margin: 0px 0px 30px 0px;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 3fr));
			grid-gap: 10px;
			align-items: center;
		}
			.tx-hotshop-subcategories li{
				display: block;
				float: left;
				margin: 0;
				border: 1px solid #000;
				width: 100%;
				height: 250px;
				position: relative;
				background-repeat: no-repeat; 
				background-position: center center; 
				background-size: cover;
			}
				.tx-hotshop-subcategories a{
					display: block;
					width: 100%;
					height: 100%;
				}
					.tx-hotshop-subcategories a span{
						position: absolute;
						bottom: 0px;
						display: block;
						text-align: center;
						background: #000;
						color: #fff;
						padding: 7px;
						width: 100%;
						text-decoration: none;
					}
		
		
		/* list of products on the show-category-page */
		
		.tx-hotshop-products,
		.tx-hotshop-cart{
			width: 100%;
			/* table-layout: fixed; */
		}
			.tx-hotshop-products tr,
			.tx-hotshop-cart tr{
				padding: 0;
		}
			.tx-hotshop-products th,
			.tx-hotshop-cart th{
				text-align: left;
				background: #000;
				color: #fff;
				padding: .625em;
			}
				.tx-hotshop-products-image,
				.tx-hotshop-cart-image{
					text-align: center;
				}
					.tx-hotshop-products img,
					.tx-hotshop-cart img{
						max-width: 100px;
					}
				.tx-hotshop-products-qty{
					text-align: center;
				}
				.tx-hotshop-cart-comment input{
					width: 220px;
				}
				.tx-hotshop-cart-qty input{
					width: 80px;
				}
				.tx-hotshop-cart-update-button{
					font-size: 11px;
					width: 80px;
					border: 1px solid #dddddd;
					padding: 4px;
					text-align: center;
					cursor: pointer;
					margin-top: -4px;
					background: #000;
					color: #fff
				}
				.tx-hotshop-cart-update-button:hover{
					background: #CC2426;
					transition: background ease 0.25s;
				}
				.tx-hotshop-products-price,
				.tx-hotshop-cart-price{
					text-align: left;
				}				
				.tx-hotshop-products-price,
				.tx-hotshop-products-cartbtn,
				.tx-hotshop-cart-price,
				.tx-hotshop-cart-cartbtn{
					white-space: nowrap;
				}
					.tx-hotshop-products-cartbtn a{
						padding: 6px 10px 7px 10px !important;
						text-decoration: none;
						text-align: center;
						display: block;
						font-weight: normal !important;
						margin: 0px !important;
					}
					.tx-hotshop-cart-removebtn a:hover, 
					.tx-hotshop-cart-removebtn a{
						background: url(../images/delete-icon.png) no-repeat !important;
						width: 27px !important;
						height: 27px !important;
						padding: 0px !important;
						border: none !important;
						margin: 0px !important;
						background-size: 17px !important;
						background-position: 5px 5px !important;
					}
					
					
		/* product-details on the show-product-page */
		
		.tx-hotshop-product{
			width: 100%;
		}
			.tx-hotshop-product-image{
				width: 50%;
			}
				.tx-hotshop-product-image img{
					width: 100%;
				}
			.tx-hotshop-product-price{
				font-weight: bold;
				font-size: 24px;
			}
			.tx-hotshop-product-qty-red{	color: #f00;	}
			.tx-hotshop-product-qty-orange{	color: #f80;	}
			.tx-hotshop-product-qty-green{	color: #0b0;	}
			
			.tx-hotshop-product input[type="number"],
			.tx-hotshop-product input[type="submit"]{
				display: inline-block;
				margin: 0px;
				padding: 10px;
			}
			.tx-hotshop-product input[type="number"]{
				width: 70px;
			}



		/* cart on the cart-page/order-page */

		.tx-hotshop-cart-sum-row td{
			border-top: 2px solid #000;
			font-weight: bold;
			background: #fff;
		}
			.tx-hotshop-cart-sum{
				text-align: right;
			}
		.tx-hotshop-cart-btns {
			margin-top: 30px;
			height: 60px;
		}
			.tx-hotshop-cart-btns a{
				text-decoration: none;
				text-align: center;
				display: block;
				font-weight: normal !important;
				margin: 0px !important;
				padding: 14px 30px 15px 30px !important;
				float: right;
			}
			.tx-hotshop-cart-btns input[type="submit"]{
				float: left;
			}
			.tx-hotshop-cart-btns input[type="submit"],
			.tx-hotshop-cart-btns a{
				width: auto;
				margin: 0px;
			}
			.tx-hotshop-order-btn{
				text-align: center;
			}
				.tx-hotshop-order-btn  input[type="submit"]{
					width: auto;
					margin: 0px;
					display: inline-block;
				}






/* NAVIGATION */

.topnavi {
	text-align: right;
}
	.topnavi ul{
		list-style:none;
		display:block;
	}
		.topnavi ul li { 
			display:inline-block;
		}	
			.topnavi ul li a{
				color:#575756;
				padding:10px 10px;
				margin:0;
				font-weight:bold;
				text-transform:uppercase;
				text-decoration:none;
				font-size:12px;
				display:block;
				transition:color ease 0.25s;
			}
			.topnavi ul li a:hover, .topnavi ul li.active a, .topnavi ul li a:focus{
				color:#CC2426;
				transition:color ease 0.25s;
			}

.mainnavi {
	float:right;
	width:70%;
}
	.mainnavi ul {
		list-style:none;
		display:block;
		float: right;
		margin-top:20px;
	}
		.mainnavi li { 
			display:inline-block;
			margin-right:10px;
		}
			.mainnavi li a {
				height: 40px !important;
				width: 40px !important;
				background-size: 30px !important;
				text-indent: -9999px;
				padding: 8px;
				display: block;
				background-position: 5px 5px !important;
				border:1px solid rgba(0,0,0,0.05);
			}
			.mainnavi ul li a.Account,
			.mainnavi ul li a.Registrierung {
				background:url(../images/icon-account.svg) no-repeat;
			}
			.mainnavi ul li a.Warenkorb {
				background:url(../images/icon-basket.svg) no-repeat;
			}
			.mainnavi ul li a.Kasse {
				background:url(../images/icon-pay.svg) no-repeat;
			}
			.mainnavi ul li a.Logout,
			.mainnavi ul li a.Login{
				background:url(../images/icon-logout.svg) no-repeat;
			}
			
			.mainnavi li a:hover,
			.mainnavi li a.active ,
			.mainnavi li a:focus{
				background-color: rgba(0,0,0,0.05) !important;
				transition: background ease 0.5s !important;
				border-radius: 0;
				text-indent: 0;
				width: 100% !important;
				padding: 8px 10px 8px 40px;
				color: #000;
				text-decoration: none;
			}
	
	
	
/* Search in Navi */	

.mainnavi .wrapper div {
	float: left;
}
	.mainnavi .wrapper div .tx-hotsearch-pi1-searchform {
		margin-bottom: 0px;
	}
		.mainnavi .wrapper div input[type="text"]{
			width: 150px;
			font-size: 13px !important;
			padding: 3px 7px;
			margin-top: 8px;
		}
		.mainnavi .wrapper div .tx-hotsearch-pi1-searchform input[type="submit"]{
			display: none;
		}
	
/* Search in Searchpage */	

	.tx-hotsearch-pi1-searchform{
		margin-bottom: 0;
	}
		.tx-hotsearch-pi1-searchform input[type="text"]{
			width: calc(100% - 50px);
			display: inline-block;
		}
		.tx-hotsearch-pi1-searchform input[type="submit"]{
			width: auto;
			display: inline-block;
			padding: 9px 0 9px 0;
			width:44px;
			height:44px;
			background:url(../images/icon-search.svg) no-repeat #fff;
			background-position:2px 2px;
			background-size:40px;
			text-indent:-9999px;		
			border:none;
			border-radius:50%;
		}
		.tx-hotsearch-pi1-searchform input[type="submit"]:hover{
			background:url(../images/icon-search.svg) no-repeat rgba(0,0,0,0.1);
			background-size:40px;
			background-position:2px 2px;
		}
	.tx_hotsearch_infos_quantity{
		color: #bbb;
	}
	
	

/* Typo */

ul.typo3-messages{
	margin-left: 0px !important;
}
	.typo3-messages .alert{
		padding: 10px 15px;
	}
	.typo3-messages .alert-success{
		background: #efe;
		color: #0a0;
	}
	.typo3-messages .alert-danger{
		background: #fee;
		color: #c00;
	}

.content p {
	margin-bottom:15px;
}

h1, h1 a {
	font-size:27px;
	font-weight:300;
	color:#000;
	margin-bottom:35px;
}

h2, h2 a {
	font-size:18px;
	font-weight:700;
	color:#000;
	margin-top:35px;
	margin-bottom:20px;
}
h3, h3 a {
	font-size:15px;
	font-weight:700;
	color:#000;
	margin-top:20px;
	margin-bottom:10px;
}
h4, h4 a {
	margin-bottom:20px;
}
.content ul,
.content ol {
	margin-left:25px;
	margin-bottom:25px;
}
.content ul li {
	list-style:none;
	position:relative;
	margin-bottom:10px;
}
.content ol li {
	position:relative;
	margin-bottom:10px;
}
.content ul li ul{
	margin-left:20px;
	margin:15px 0px 15px 20px;
}
a {
	color:#CC2426;
}


/* FORMS */
input,
textarea,
select {
	padding:10px;
	font: 16px/135% 'Open Sans', Arial, helvetica, sans serif !important;
	font-weight:400;
	color:#484848;
	border:1px solid #dddddd;
	background:#f5f5f5;
	border-radius:3px;
    width:68%;
	margin-bottom:10px;
}

input:focus,
textarea:focus,
select:focus {
	background:#ccc;
}
select option {
	padding:6px 10px;
}
.tx-hotshop-products-cartbtn a,
.tx-hotshop-cart-removebtn a,
.tx-hotshop-cart-btns a,
input[type=submit] {
	text-transform:uppercase;
	border-radius:3px;
	font-size:18px;
	font-weight:700;
	color:#fff;
	background:#000;
	border-bottom:1px solid #dddddd;
	margin:25px 0px;
	padding: 15px 30px;
	display:block;
	cursor:pointer;
	transition:background ease 0.25s;
}
input[type=submit]:hover,
input[type=submit]:focus,
.tx-hotshop-products-cartbtn a:hover,
.tx-hotshop-cart-removebtn a:hover,
.tx-hotshop-cart-btns a:hover{
	background:#CC2426;
	transition:background ease 0.25s;
}
form fieldset {
	border: none;
	margin-top: 30px;
}
form fieldset legend {
	display: none;
}
form label {
	width:100%;
	display:inline-block;
	vertical-align:top;
}



/* ERRORS */

.tx-changepassword-err{
	color: #EF0000;
	background: #FFEAEA;
	padding: 10px 15px;
	display: inline-block;
	margin: 15px 0px;
}
.error{
	color: #EF0000;
	background: #FFEAEA;
	padding: 10px 15px;
	margin: 0px;
}
.warning{
	color: #CC2426;
	background: #fff2d6;
	padding: 10px 15px;
	margin: 15px 0px;
}


/* MISC */
img {
	max-width:100%;
	height:auto;
}
.csc-textpic-center-outer,
.csc-textpic-center-inner,
.csc-textpic-left-outer,
.csc-textpic-left-inner,
.csc-textpic-right-outer,
.csc-textpic-right-inner {
	float:none !important;
	right:inherit !important;
}

hr {
	border-bottom:1px solid #dddddd;
	height:1px;
	background:none;
	margin:20px 0px;
}
table {
	margin-bottom:20px;
}
table thead th {
	background:#000;
	color:#fff;
	text-align:left;
}
table tr {
	
}
table tr:nth-child(even) {
	background:#f5f5f5;
}
table tr td,
table thead th{
	padding:10px;
}

div.csc-textpic .csc-textpic-imagewrap figure {
	    display: block;
}

.csc-textpic-caption {
	display:block !important;
	background:#e5e5e5;
	background:rgba(0,0,0,.1);
	padding:3px 8px;
	font-size:12px;
	text-transform:uppercase;
}


div.csc-textpic-center .csc-textpic-imagewrap, 
div.csc-textpic-center figure.csc-textpic-imagewrap{
	overflow: visible;
}
	div.csc-textpic-center .csc-textpic-center-outer,
	div.csc-textpic-center .csc-textpic-center-inner{
		float: none;
		position: normal;
		right: auto;
	}
		div.csc-textpic .csc-textpic-imagewrap img{
			width: 100% !important;
		}


div.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap{
	width: 50%;
}
.csc-textpic-intext-right-nowrap .csc-textpic-text{
	margin-right: 50%;
}






/* RESPONSIVE */

/* tablet */
@media only screen and (max-width: 1024px) {
	body {
		font: 14px/100% 'Open Sans', Arial, helvetica, sans serif;
		font-weight:300;
	}
		
	.topnavi,
	.mainnavi {
		text-align:center;
	}

	
	input,
	textarea,
	select {
		width:100%;
	}

}

/* mobile */
@media only screen and (max-width: 767px) {

	.topnavi ul li a{
		font-size: 10px;
		padding: 7px 5px;
		font-weight: normal;
	}
	.mainnavi ul li a{
		font-size: 12px;
		height: 36px !important;
		width: 36px !important;
		background-size: 24px !important;
	}

	.float_right,
	.float_left,
	div.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap,
	div.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap	{
		float: none;
	}
	body {
		font: 13px/100% 'Open Sans', Arial, helvetica, sans serif;
		font-weight:300;
	}
	.content {
		margin:0px;
	}
	h1, h1 a {
		font-size:20px;
	}
	h2, h2 a {
		font-size:17px;
	}
	h3, h3 a {
		font-size:15px;
	}
	
	div.csc-textpic-intext-right .csc-textpic-imagewrap,
	div.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap,
	div.csc-textpic-intext-left .csc-textpic-imagewrap,
	div.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap,
	.csc-textpic-intext-right-nowrap .csc-textpic-text,
	.csc-textpic-intext-left-nowrap .csc-textpic-text	{
		margin: 0px;
	}
}

/* ############################################################################################# 
## MODIFY ##################################################################################
############################################################################################# */


header .twocols {
	margin:10px auto;
}
#logo {
	max-width:250px;
	width:30%;
	float:left;
}
.box {
	background:#fff;
	padding:20px;
	-webkit-box-shadow: 0px 0px 15px -4px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 15px -4px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 15px -4px rgba(0,0,0,0.5);
	display:block;
}
.twocols .content .box {
	margin:0;	
}
.content > .box {
	margin:0 20px;
}
.searchbox {
	width:100%;
	max-width:1400px;
	margin:10px auto;
	padding:0 20px;
	box-sizing:border-box;
}
#menuToggle input{
	display:none;
}
.black_layer {
		display:none;
}
.layout-3 {
	width:100%;
}
.layout-3 .box {
	background:url(../images/entry-bg.jpg) no-repeat #fff;
	background-size:auto 100%;
	background-position:right top;
	min-height:500px;
}
.layout-3 .box > div {
	max-width:60%;
}
@media only screen and (max-width: 1100px) {
	#menuToggle {
		display: block;
		position: relative;
		z-index: 1;
		-webkit-user-select: none;
		user-select: none;
		position:absolute;
		left: 20px;
		top: 110px;
	}
	#menuToggle input {
		display: block;
		width: 40px;
		height: 32px;
		position: absolute;
		top: -7px;
		left: -5px; 
		cursor: pointer;
		opacity: 0;
		z-index: 2; 
		-webkit-touch-callout: none;
	}
	#menuToggle span {
		display: block;
		width: 33px;
		height: 4px;
		margin-bottom: 5px;
		position: relative;
		background: #2a2a2a;
		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;
	}
	#menuToggle span:first-child {
		transform-origin: 0% 0%;
	}
	#menuToggle span:nth-last-child(2) {
		transform-origin: 0% 100%;
	}
	#menuToggle input:checked ~ span {
		opacity: 1;
		transform: rotate(45deg) translate(-2px, -1px);
		background: #000;
	}
	#menuToggle input:checked ~ span:nth-last-child(3) {
		opacity: 0;
		transform: rotate(0deg) scale(0.2, 0.2);
	}
	#menuToggle input:checked ~ span:nth-last-child(2) {
		transform: rotate(-45deg) translate(0, -1px);
	}
	.sidebar {
		position: absolute;
		width: auto;
		margin: -100px 0 0;
		padding: 20px;
		padding-top: 125px;
		list-style-type: none;
		-webkit-font-smoothing: antialiased;
		transform-origin: 0% 0%;
		transform: translate(-120%, 0);
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
		min-width: 300px;
		box-sizing: border-box;
		left: -20px;
		height:400px;
		overflow-y:scroll;
		float:none;
		background:#fff;	
	}
	.sidebar .box {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;		
	}
	.black_layer {
		background: rgba(0,0,0,0.8);
		display: none;
		position: absolute;
		width: 100vw;
		height: calc(100vh - 42px);
		padding: 0;
		margin: -42px 0 30px 0;
	}
	#menuToggle input:checked ~ .black_layer {
		display: block;
		left:-20px;
		top: 0 !important;
	}
	#menuToggle input:checked ~ .sidebar {
		transform: none;
		padding-top:50px;
		margin-top:-69px;
	}
	.sidebar .box {
		transform: none;
		right: -21px;
		border-top:80px solid #fff;
		margin-top:-70px;
	}
	header .twocols {
		margin:10px auto;
		height:43px;
	}
	#logo img {
		height:43px;
		width:auto;
	}
	.mainnavi ul {
		margin-top:0px;
	}
	.twocols .content {
		padding: 0;
		width: 100%;
		float: none;
		margin-bottom:40px;
	}
	.searchbox {
		width: calc(100% - 50px);
		float: right;
	}
	.tx-hotshop-products-cartbtn a, .tx-hotshop-cart-btns a {
		font-size:13px;
	}
}

@media only screen and (max-width: 769px) {
	.tx-hotshop-products-cartbtn a, .tx-hotshop-cart-btns a {
		background:url(../images/icon-basket-white.svg) no-repeat #000;
		height:40px;
		width:40px;
		background-size:24px!important;
		background-position:7px 7px!important;
		text-indent:-9999px!important;
	}
	.tx-hotshop-products-cartbtn a br, .tx-hotshop-cart-btns a br {
		display:none;
	}
	.tx-hotshop-products-cartbtn a:hover, .tx-hotshop-cart-btns a:hover {
		background:url(../icon-basket-white.svg) no-repeat #CC2426;
	}
	.tx-hotshop-products tr,
	.tx-hotshop-cart tr{
		display: block;
		margin-bottom: 0;
		border-bottom: 3px solid #ddd;
	}
	.tx-hotshop-products th,
	.tx-hotshop-cart th{
		display:none;
	}
	.tx-hotshop-products td,
	.tx-hotshop-cart td{
		border-bottom: 1px solid #ddd;
		display: block;
		text-align: left;
	}
	.tx-hotshop-products td:last-child,
	.tx-hotshop-cart td:last-child{
		border-bottom: 0;
	}
	.tx-hotshop-cart-sum-row td:last-child {
		display:none;
	}
	.layout-3 .box {
		background-position:250px 0!important;
	}
}
@media only screen and (max-width: 600px) {
	.layout-3 .box {
		background: none!important;
		min-height:250px!important;
	}
	.layout-3 .box > div {
		max-width:100%!important;
	}
}
@media only screen and (max-width: 430px) {
	.mainnavi li a:hover, .mainnavi li a.active, .mainnavi li a:focus {
		text-indent:-9999px!important;
		padding: 8px!important;
		width: 36px !important;
	}
}