/*
////////////////////////////////////////////////////////////
//
// L8M
//
// 
// Contains base JS (jQuery).
//
// Filesource  /public/js/jquery/responsive.js
// Version     $Id: responsive.css 92 2014-08-20 16:02:47Z sl $
//
////////////////////////////////////////////////////////////
*/

/*
////////////////////////////////////////////////////////////
// RESPONSIVE DESIGN
// 1200px
////////////////////////////////////////////////////////////
*/

@media screen and (max-width: 1199px) {
	
	main,
	main.container,
	footer {
		margin: 0px 5px;
	}
}

/*
////////////////////////////////////////////////////////////
// RESPONSIVE DESIGN
// 980px
////////////////////////////////////////////////////////////
*/

@media screen and (max-width: 979px) {
	
	main div.side {
		margin-right: 2%;
		width: 25%;
	}
	
	main div.side + div.wrap {
		width: 73%;
	}
	
	div.orderview div.products div.orderproduct > div.quantity > * {
		width: 15px;
	}

}

/*
////////////////////////////////////////////////////////////
// RESPONSIVE DESIGN
// 900px
////////////////////////////////////////////////////////////
*/

@media screen and (max-width: 899px) {

	body {
		font-size: 50%;
	}
	
	main div.side {
		margin-right: 2%;
		width: 25%;
	}
	
	main div.side + div.wrap {
		width: 73%;
	}

}

/*
////////////////////////////////////////////////////////////
// RESPONSIVE DESIGN
// 860px
////////////////////////////////////////////////////////////
*/

@media screen and (max-width: 859px) {
	
	article.product div.container-side,
	article.product div.productview {
		width: 100%;
		margin-top: 20px;
	}
	
	div.media-controls-uploader a.button {
		float: left;
		margin-top: 5px;
	}
	
	header a.logo {
		width: 29%;
	}	

}

/*
////////////////////////////////////////////////////////////
// RESPONSIVE DESIGN
// 768px
////////////////////////////////////////////////////////////
*/

@media screen and (max-width: 767px) {

	header,
	header.container {
		padding: 40px 0px 20px 0px;
	}

	header a.logo {
		width: 100%;
	}

	header div.options-menu {
		display: none;
	}
	
	header div.boxes {
		position: fixed;
		top: 0px;
		right: 0px;
		z-index: 110;
	}
	
	header div.boxes > div.search,
	header div.boxes > div.cart,
	header div.boxes > div {
		width: 50px;
		background: none;
		margin: 0px;
		float: right;
	}
	
	header div.boxes > div.cart ul {
		position: inherit;
		margin-left: -10px;
	}
	
	header div.boxes > div.cart:hover ul li {
		padding: 10px 15px;
	}
	
	header div.boxes div.contain {
		display: none;
		position: absolute;
		width: 250px;
		right: 0px;
		background-color: #FFF;
		max-height: 58px;
	}
	
	header div.boxes div.active div.contain {
		display: block;
		padding: 10px 10px;
		box-shadow: 0px 0px 2px #333333;
	}
	
	header div.boxes div.active div.contain h5 {
		display: none;
	}

	header div.boxes > div a.selector {
		display: block;
	}

	nav.menu {
		position: fixed;
		top: 0px;
	}
	
	nav.menu a.menu-selector {
		display: block !important;
	}
	
	nav.menu div.container {
		position: fixed;
		top: 40px;
		left: 0px;
		min-width: 320px;
		margin-left: -320px;
		transition: margin 0.5s;
		height: 100%;
		overflow: auto;
		display: block;
		background-color: #333333;
	}
	
	nav.menu.active div.container {
		margin-left: 0px;
	}
	
	nav.menu ul {
		display: block;
	}
	
	nav.menu ul li {
		float: none !important;
	}
	
	nav.menu ul li a {
		border-top: 1px solid #232323;
	}
	
	
	nav.menu ul.menu li ul {
		position: relative;
	}
	nav.menu ul li ul {
		display: none;
		z-index: 100;
		position: relative;
		border: none;
	}	
	
	nav.menu ul li ul li a {
		border-top: none;
		padding-left: 20px;
	}
	
	main div.side {
		margin-right: 2%;
		width: 33%;
	}
	
	main div.side + div.wrap {
		width: 65%;
	}
	
	main div.side div.content.hide-when-smaller {
		display: none;
	}
	
	main div.navigation > ul > li.a,
	main div.navigation ul li.active > ul > li > a,
	main div.navigation > ul > li > a {
		font-size: 115%;
	}

	div.list article {
		width: 47% !important;
		margin: 0 2% 5px 0 !important;
	}

	div.list article:nth-child(2n+2) {
		margin: 0 0 5px !important;
	}

	div.orderview div.products {
		position: relative;
	}

	div.orderview div.products div.legend {
		display: none;
	}
	
	div.orderview div.products div.orderproduct {
		padding: 10px;
		box-shadow: 0px 0px 0px 1px #CCC;
		text-align: center;
	}

	div.orderview div.products > div > div {
		width: 100% !important;
		margin-bottom: 10px;
	}
	
	div.orderview div.products div.orderproduct > div legend {
		display: inline;
	}

	div.orderview div.products > div > div.quantity {
		width: 120px !important;
		margin-bottom: 10px;
	}
	
	div.orderview div.products > div > div.quantity a {
		display: block;
	}
	
	div.orderview div.products div.orderproduct > div.article > div:last-child,
	div.orderview div.products div.orderproduct > div.article > div:first-child {
	width: 100%;
	}
	
	div.orderview div.products div.orderproduct > div.price {
		text-align: center !important;
	}
	
	div.orderview div.products div > div.refund,
	div.orderview div.products div > div.sumprice,	
	div.orderview div.products div > div.refundsum {		
		display: none;
	}

	header div.boxes div.right-links {
		display: block;
	}	

}

/*
////////////////////////////////////////////////////////////
// RESPONSIVE DESIGN
// 605px
////////////////////////////////////////////////////////////
*/

@media screen and (max-width: 605px) {

	main h1, main h2 {
		font-size: 130%;
	}
	
	main div.side {
		margin: 0px;
		width: 100%;
	}
	
	main div.side + div.wrap {
		width: 100%;
	}
	
	main div.side.small > div.content {
		width: 94%;
		padding: 15px 3% 16px;
		max-width: 94%;
	}
	
	main div.side.small > div.content.active div.navigation {
		position: inherit;
	}
	
	main div.side.small > div.content.active h2,
	main div.side h2,
	main div.side h3 {
		margin: -15px -9px 0;
	}
	
	main div.side.small div.navigation {
		width: 106%;
		margin: 0px -3%;
	}
	
	main div.side .content + .content {
		margin-top: 0px;
	}
	
	main div.side .content:last-child {
		margin-bottom: 20px;
	}
	
	a.button + a.button {
		margin: 5px 0px 0px 5px;
	}
	

	header a.logo {
		width: 90%;
		margin-left: 5%;
	}	

}

/*
////////////////////////////////////////////////////////////
// RESPONSIVE DESIGN
// 420px
////////////////////////////////////////////////////////////
*/

@media screen and (max-width: 419px) {

	p > img {
		float: none !important;
		display: block;
	}

	main div.content-boxes div.content-box {
		padding: 4% 46% 4% 4%;
		width: 46%;
	}
	
	main div.content-boxes div.content-box:nth-child(2n+2) {
		margin: 0px 0px 10px 0px;
	}
	
	form div.form-element-container {
		margin: 0px;
		width: 100%;
	}
	
	/*
	 * exeption for shop.cart.overview
	*/

	form div#gruppe4-group input {
		position: absolute;
		width: 97%;
		margin-top: -130px;
	}

	form div#gruppe4-group a.button.cancel {
		margin-top: 50px;
	}
	
	div.related-products div {
		font-size: 100%;
		height: auto;
	}
	
}

/*
////////////////////////////////////////////////////////////
// RESPONSIVE DESIGN
// 320px
////////////////////////////////////////////////////////////
*/

@media screen and (max-width: 320px) {

	div.list article {
		width: 98% !important;
		margin: 0px 0% 5px 0px !important;
	}	

}