@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
	padding: 0px;
	margin: 0px;
}

* {
	font-family: 'Roboto', sans-serif;
}

p, h1, h2, h3 {
	padding: 0px;
	margin: 0px;
}


.addtocart {
position: fixed;
margin-top: 8%;
right: 0;
width: 140px;
background-color: black;
padding: 20px;
color: #fff;
}

button.btn.btn-green {

	background-color: #fff;
border-radius: 0;
margin-top: 5px;
color: #000;
}
.stk {

width: 95px; 
text-align: center;
margin-bottom: 5px; 
color: #fff; 
background-color: #000; 
border: 1px dotted #fff;
font-size: 20px;
}

input {

	border:none;
	-webkit-user-select: text;

}

input:focus
    {
    border-color: #fff;
    box-shadow: none;
    box-decoration-break: none;
    outline: none;
    user-select: none;
        }

        input:selection { background-color: #000; }

/* ===== HEADER (header.php) ===== */
#header {
	height: 185px;
	background-color: #000;
}

	#header h1, 
	#header p {
		color: #fff;
		text-align: center;
	}

	#header h1 {
		font-size: 24px;
	}

	#header h1.price-header {
		margin-top: 70px;
		margin-bottom: 12px;
	}

	#header h1.single-row {
		line-height: 185px;
	}

	#header p {
		font-size: 16px;
	}

	#header .logo img {
		display: block;
		margin: 15px auto 0px auto;
	}

	#header #go_back {
		position: absolute;
		bottom: 20px;
		left: 50%;
		margin-left: -33px;
		color: #fff;
	}

	#header #go_back:hover {
		text-decoration: none;
	}

@media (max-width: 800px) 
{
	#header {
		height: auto;
		background-color: #000;
	}

		#header h1, 
		#header p {
			color: #fff;
			text-align: center;
		}

		#header h1 {
			font-size: 18px;
		}

		#header h1.price-header {
			margin-top: 20px;
			margin-bottom: 12px;
		}

		#header h1.single-row {
			font-size: 16px;
			line-height: 50px;
		}

		#header p {
			font-size: 16px;
		}

		#header .logo img {
			display: block;
			margin: 15px auto 0px auto;
		}
		.col-md-4 {
		width: 25%;
}
}
/* ===== HEADER (header.php) ===== */
@media (min-width: 992px) 
{
		.col-md-4 {
		width: 25%;
}
}


/* ===== MENU (menu.php) ===== */
#main-menu {
	position: absolute;
	top: 185px;
	left: 420px;
	z-index: 99999999999999999999999999999;
}

	#main-menu ul {
		padding: 0px;
		margin: 0px;
		list-style-type: none;
	}

	#main-menu ul ul {
		display: none;
	}

	#main-menu ul li:hover ul {
		display: block;
	}


	#main-menu ul li {
		position: relative;
		float: left;
	}

	#main-menu ul li a {
		background-color: #fff;
		display: block;
		color: #000;
		font-size: 16px;
		text-decoration: none;
		padding: 10px 20px;
		margin-right: 10px;

		-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
		-ms-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
		-o-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
		box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
	}

	#main-menu ul li a:hover {
		color: #fff;
		background-color: #000;
	}

	#main-menu .active {
		color: #fff;
		background-color: #000;
	}

@media (max-width: 800px) 
{
	#main-menu {
		position: relative;
		top: 0px;
		left: 0px;
	}

	#main-menu ul li a {
		background-color: #000;
		display: block;
		color: #fff;
		font-size: 16px;
		text-decoration: none;
		padding: 10px 20px;
		border: 1px solid #fff;
		margin-right: 0;

		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		-ms-box-shadow: none;
		-o-box-shadow: none;
		box-shadow: none;
	}


}
/* ===== MENU (menu.php) ===== */



/* ===== TABLES (tables.php) ===== */
#tables {
	position: absolute;
	top: 255px;
	left: 420px;
	right: 50px;
}

	#tables .box {
		width: 100px;
		height: 100px;
		margin: 0px 20px 20px 0px;
		background-color: #74A431;

		position: relative;
		float: left;
	}

	#tables .box a {
		width: 100px;
		height: 100px;
		display: block;
		line-height: 100px;
		text-align: center;
		text-decoration: none;
		color: #fff;
		font-size: 36px;
	}

	#tables .open-order {
		background-color: red !important;
	}

@media (max-width: 800px) 
{
	#tables {
		width: 90%;
		margin: 20px auto;
		position: relative;
		top: 0px;
		left: 0px;
		right: 0px;
	}

		#tables .box {
			width: 100%;
			height: 120px;
			margin: 0px 20px 20px 0px;
			background-color: #74A431;

			position: relative;
			float: left;
		}

		#tables .box a {
			width: 100%;
			height: 120px;
			line-height: 120px;
		}
}


	.box1 {
float:right !important;
width: 200px !important;
padding-left: 50px;
	}

	.box2 {
float: right !important;
width: 200px !important;
margin-top: 150px !important;
padding-left: 50px;
margin-right: -200px !important;
	}

.box4 {
margin-top: 130px !important;
float: left !important;
margin-left: -120px !important;
}

.box5 {
margin-top: 260px !important;
float: left !important;
margin-left: -120px !important;
}
.box6 {
margin-top: 390px !important;
float: left !important;
margin-left: -120px !important;
}

.box7, .box8, .box9, .box10 {

margin-top: 290px !important;
float: right !important;
position: absolute !important;
border-radius: 50px;
}


.box7 {
margin-left: 430px !important;
}
.box8 {
margin-left: 550px !important;
}
.box9 {
margin-left: 670px !important;
}
.box10 {
margin-left: 790px !important;
}
/* ===== TABLES (tables.php) ===== */



/* ===== PRODUCTS (order.php) ===== */
#products {
	position: absolute;
	top: 255px;
	left: 420px;
	right: 50px;
}

	#products .box {
		width: 150px;
		height: 150px;
		margin: 0px 20px 20px 0px;
		background-color: #74A431;

		position: relative;
		float: left;
	}

	#products .box a {
		display: block;
		line-height: 30px;
		text-align: center;
		text-decoration: none;
		color: #fff;
		font-size: 16px;
		margin: 0px;
		padding: 30px 0px;
	}

	#accessories {
		position: absolute;
		top: 255px;
		left: 420px;
		right: 50px;
	}

	#accessories input[type="checkbox"] {
		display: none;
	}

	#accessories label {
		width: 120px;
		height: 125px;
		margin: 0px 20px 20px 0px !important;
		padding: 35px 0px 0px 0px;
		background-color: #74A431;
		display: block;
		line-height: 30px;
		text-align: center;
		text-decoration: none;
		color: #fff;
		font-size: 15px;
		margin: 0px;
		position: relative;
		float: left;
	}

	#accessories .btn-green {
		width: 150px;
		height: 40px;
		line-height: 40px;
		display: block;
		border: 0px;
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		-ms-border-radius: 0px;
		-o-border-radius: 0px;
		border-radius: 0px;
		text-align: center;
		text-decoration: none;
		color: #fff;
		background-color: #333;
		margin-top: 40px;
		padding: 0px;
	}

	#accessories .btn-green:hover {
		background-color: #666;
	}

	#accessories .btn-close {
		font-size: 24px;
		color: #74A431;
		opacity: 1;
		position: fixed;
		top: 20px;
		right: 20px;
	}

	#accessories .addon-h3-top {
		margin: 0px 0px 20px 0px;
	}

	#accessories .addon-h3 {
		margin: 40px 0px 20px 0px;
	}

	#accessories input[type=checkbox]:checked + label { 
		background-color: #333;
	}


@media (max-width: 800px) 
{
	#products {
		width: 90%;
		margin: 20px auto;
		position: relative;
		top: 0px;
		left: 0px;
		right: 0px;
	}

		#products .box {
			width: 19.5%;
height: 120px;
margin: 1px;
background-color: #74A431;
position: relative;
float: left;
		}

		#products .box a {

			font-size: 12px;
			line-height: 20px;
		}


		#products .box a {
			padding: 15px 0px;
		}

		#accessories {
			width: 100% !important;
			margin: 1px;
			position: relative;
			top: 0;
			left:0;
			right: 0;
		}

		#accessories label {
			width: 19.5%;
			
			display: block;
			margin: 1px !important;
			padding: 45px 0px 0px 0px !important;
			background-color: #74A431;
			display: block;
			line-height: 20px;
			text-align: center;
			text-decoration: none;
			color: #fff;
			font-size: 12px;
			margin: 0px;
		}
.addtocart {

position:relative;
margin-top: 0;
width:100%;

}

button.btn.btn-green {
	width: 75%;
	margin-top: -5px;

}
		#accessories .btn-green {
			width: 100%;
			margin: 40px auto 0px auto;
		}
}
/* ===== PRODUCTS (order.php) ===== */



/* ===== HOMEPAGE (index.php) ===== */
#homepage {
	margin: 80px 0px;
}

	#homepage .box {
		height: 250px;
		background-color: #74A431;

		-webkit-transition: all .2s linear;
		-moz-transition: all .2s linear;
		-ms-transition: all .2s linear;
		-o-transition: all .2s linear;
		transition: all .2s linear;

		-webkit-box-shadow: 0px 10px 5px -8px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 10px 5px -8px rgba(0,0,0,0.75);
		-ms-box-shadow: 0px 10px 5px -8px rgba(0,0,0,0.75);
		-o-box-shadow: 0px 10px 5px -8px rgba(0,0,0,0.75);
		box-shadow: 0px 10px 5px -8px rgba(0,0,0,0.75);
	}

	#homepage .box:hover {
		-webkit-transform: scale(1.02);
		-moz-transform: scale(1.02);
		-ms-transform: scale(1.02);
		-o-transform: scale(1.02);
		transform: scale(1.02);
	}

	#homepage .box a {
		display: block;
		line-height: 250px;
		color: #fff;
		font-size: 18px;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
	}

@media (max-width: 800px) 
{
	#homepage {
		margin: 30px 0px;
	}

		#homepage .box {
			height: 180px;
			margin-bottom: 20px;
			background-color: #74A431;
		}

		#homepage .box a {
			line-height: 180px;
		}	
}
/* ===== HOMEPAGE (index.php) ===== */



/* ===== CART (cart.php) ===== */
#cart {
	width: 380px;
	height: 100vh;
	top: 0px;
	left: 0px;
	position: fixed;
	float: left;

	-webkit-box-shadow: 2px 0px 4px 0px rgba(0,0,0,0.37);
	-moz-box-shadow: 2px 0px 4px 0px rgba(0,0,0,0.37);
	-ms-box-shadow: 2px 0px 4px 0px rgba(0,0,0,0.37);
	-o-box-shadow: 2px 0px 4px 0px rgba(0,0,0,0.37);
	box-shadow: 2px 0px 4px 0px rgba(0,0,0,0.37);
}

	#cart .content {
		height: 70%;
		padding: 20px;
		margin-top: 185px;
		overflow: scroll;
	}

	#cart .content h1 {
		font-size: 24px;
		padding: 10px 0px;
		border-bottom: 1px solid #000;
		margin-bottom: 10px;
	}

	#cart .content h1 span {
		float: right;
		line-height: 24px;
		font-size: 14px;
		padding-right: 10px;
	}

	#cart .table td {
		border: 0px;
	}

	#cart .table .accessory-name {
		padding-left: 20px;
	}

	#cart .table .small-text {
		font-size: 11px;
	}

	#cart .table-footer {
		padding: 10px 0px;
	}

	#cart .table-footer p {
		font-weight: bold;
		font-size: 18px;
	}

	#cart .btn-checkout {
		width: 100%;
		height: 60px;
		line-height: 60px;
		display: block;
		background-color: #74A431;
		color: #fff;
		letter-spacing: 1px;
		text-align: center;
		text-decoration: none;
		font-size: 16px;

		position: absolute;
		left: 0px;
		bottom: 0px;
	}

	#cart .btn-checkout:hover { 
		opacity: .8;
	}

@media (max-width: 800px) 
{
	#cart {
		width: 100%;
		height: auto;
		position: relative;
		float: none;

		-webkit-box-shadow: 0px 10px 5px -8px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 10px 5px -8px rgba(0,0,0,0.75);
		-ms-box-shadow: 0px 10px 5px -8px rgba(0,0,0,0.75);
		-o-box-shadow: 0px 10px 5px -8px rgba(0,0,0,0.75);
		box-shadow: 0px 10px 5px -8px rgba(0,0,0,0.75);
	}

		#cart .content {
			height: auto;
			padding: 2%;
			margin-top: 0px;
			overflow: visible;
		}

		#cart .table-responsive {
			border: 0px;
		}

		#cart .btn-checkout {
			width: 96%;
			height: 50px;
			line-height: 50px;
			margin: 10px auto 0px auto;
			position: relative;
			bottom: 20px;
		}

		#cart .btn-checkout:hover { 
			opacity: .8;
		}
}
/* ===== CART (cart.php) ===== */



/* ===== BUYER DETAILS (buyer_details.php) ===== */
#buyer_details {
	margin: 50px 50px 0px 450px;
}

	#buyer_details h1 {
		font-size: 32px;
	}

	#search-input {
		position: relative;
	}
	
	#search_result {
	}
	
	#search_result ul {
		padding: 0px;
		margin: 0px;
		list-style-type: none;
	}

	#search_result ul li {
		width: 100%;
		height: 35px;
		border-bottom: 1px solid #ccc;
		background-color: #fff;
	}

	#search_result ul li:hover {
		background-color: #e3e3e3;
	}

	#search_result ul li a {
		width: 100%;
		height: 35px;
		display: block;
		padding: 0px 0px 0px 10px;
		margin: 0px;
		line-height: 35px;
		cursor: pointer;
	}


	#buyer_details .buyerdata-form {
		padding: 50px 0px 20px 0px;
		
	}

	#buyer_details input[type="text"] {
		-moz-border-radius: 0px;
		-ms-border-radius: 0px;
		-o-border-radius: 0px;
		border-radius: 0px;
		text-transform: capitalize;
	}

	#buyer_details .btn-black {
		font-size: 16px;
		padding: 10px 25px;
		color: #fff;
		background-color: #000;
		text-align: center;
		text-decoration: none;

		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		-ms-border-radius: 0px;
		-o-border-radius: 0px;
		border-radius: 0px;

		-webkit-transition: all .2s linear;
		-moz-transition: all .2s linear;
		-ms-transition: all .2s linear;
		-o-transition: all .2s linear;
		transition: all .2s linear;
	}

	#buyer_details .btn-black:hover {
		-webkit-transform: scale(1.02);
		-moz-transform: scale(1.02);
		-ms-transform: scale(1.02);
		-o-transform: scale(1.02);
		transform: scale(1.02);
	}

@media (max-width: 800px) 
{
	#buyer_details {
		margin: 50px 15px;
	}

		#buyer_details h1 {
			font-size: 28px;
			margin-bottom: 20px;
		}

		#buyer_details .buyerdata-form {
			padding: 20px 0px 0px 0px;
		}

		#buyer_details .btn-black {
			font-size: 14px;
			padding: 8px 20px;
			color: #fff;
			background-color: #000;
			text-align: center;
			text-decoration: none;
		}
}
/* ===== BUYER DETAILS (buyer_details.php) ===== */





/*  CART - ON CHECK OUT  */
#warenkorb {
	position: absolute;
	top: 255px;
	left: 420px;
	right: 50px;
}

	#warenkorb h1 {
		font-size: 24px;
		text-transform: uppercase;
		letter-spacing: 4px;
		padding: 0px;
		margin: 30px 0px 0px 0px;
	}

	#warenkorb .product-item {
		line-height: 40px;
		font-size: 16px;
	}

	#warenkorb .product-item .price {
		text-align: right;
	}
	
	#warenkorb .product-item span.quantity,
	#warenkorb .product-item .manage-product-options {
		float: left;
	}

	#warenkorb .product-item .manage-product-options {
		margin-left: 10px;
	}

	#warenkorb .product-item .manage-product-options .btn-circle {
		width: 24px;
		height: 24px;
		text-align: center;
		line-height: 24px;
		font-size: 12px;
		background-color: #e3e3e3;
		padding: 0px;
		margin: 0px 3px;
		border: 0px;
		color: #666;
		text-decoration: none;

		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-ms-border-radius: 50%;
		-o-border-radius: 50%;
		border-radius: 50%;	
	}

	#warenkorb .product-item .manage-product-options .btn-remove {
		color: #fff;
		background-color: #333;
	}

	#warenkorb #shopping_cart_items {
		margin: 50px 0px 0px 0px;
		padding: 30px 0px;
		border-top: 1px solid #666;
		border-bottom: 1px solid #666;
	}

	#warenkorb #options {
		margin-top: 50px;
	}

	#warenkorb h3 {
		font-size: 18px;
		padding: 10px 0px 0px 0px;
		margin: 0px;
	}

	#warenkorb .total_with_vat {
		border-top: 1px solid #e3e3e3;
		text-align: right;
	}

	#warenkorb .total_price_calculation h3 {
		text-align: right;
	}

	#warenkorb .total_price_calculation h3.total_with_vat {
		width: 150px;
		margin-top: 10px;
		border-top: 1px solid #e3e3e3;
		float: right;
		font-size: 24px;
	}

	#warenkorb .total_price_calculation h3.total_with_vat span {
		font-weight: normal;
		font-size: 14px;
		padding-right: 10px;
	}

	#warenkorb .order-details {
		margin: 40px 0px;
	}

	#warenkorb .order-details textarea {
		width: 100%;
		height: 100px;
		padding: 8px;
		resize: none;
		border: 1px solid #333;
		margin-bottom: 10px;
	}

	#warenkorb .order-details input[type="text"],
	#warenkorb .order-details input[type="time"],
	#warenkorb .order-details input[type="date"] {
		width: 100%;
		padding: 8px;
		margin-bottom: 10px;
		border: 1px solid #333;
	}

	#warenkorb .order-details .coupon_code_result {
		color: red;
	}

	#warenkorb .order-details .btn-green {
		width: 240px;
		height: 45px;
		line-height: 45px;
		text-align: center;
		color: #fff;
		background-color: #74A431;
		padding: 0px;
		margin: 30px 0px 0px 0px;
		text-transform: uppercase;

		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		-ms-border-radius: 0px;
		-o-border-radius: 0px;
		border-radius: 0px;	
	}

@media (max-width: 800px)
{
	#warenkorb {
		margin: 0px auto;
		position: relative;
		top: 0px;
		left: 0px;
		right: 0px;
	}

		#warenkorb h1 {
			margin: 40px 0px 0px 0px;
		}

		#warenkorb .product-item .manage-product-options .btn-remove {
			color: #fff;
			background-color: #333;
		}

		#warenkorb #shopping_cart_items {
			margin: 30px 0px 0px 0px;
		}

		#warenkorb .order-details {
			margin: 40px 0px;
		}

		#warenkorb .order-details textarea {
			width: 100%;
			height: 120px;
			padding: 8px;
			resize: none;
			border: 1px solid #333;
		}

		#warenkorb .order-details input[type="text"] {
			width: 100%;
			padding: 8px;
			border: 1px solid #333;
		}

		#warenkorb .order-details .btn-green {
			width: 100%;
			height: 45px;
			line-height: 45px;
			text-align: center;
			color: #fff;
			background-color: #74A431;
			padding: 0px;
			margin: 30px auto 0px auto;
			text-transform: uppercase;

			-webkit-border-radius: 0px;
			-moz-border-radius: 0px;
			-ms-border-radius: 0px;
			-o-border-radius: 0px;
			border-radius: 0px;	
		}	
}
/*  CART - ON CHECK OUT  */





/*  OPEN INVOICES (Homepage)  */
#open-orders {

}

	#open-orders h1 {
		padding: 0px;
		margin: 0px 0px 20px 0px;
		font-size: 24px;
		text-transform: uppercase;
	}

	#open-orders a {
		text-decoration: underline;
	}

	#open-orders a.btn {
		text-decoration: none !important;
	}

	#open-orders span.label-custom {
		width: 50px !important;
		padding: 5px !important;
		display: block !important;
		background-color: #74A431 !important;
	}
/*  OPEN INVOICES (Homepage)  */





/*  PAYMENT INVOICES (Homepage)  */
#payment-header {
	padding: 50px 0px;
	background-color: #000;
}
	
	#payment-header img {
		width: 160px;
		display: block;
		margin: 0px auto;
	}
	
	#payment-header a {
		width: 120px;
		text-align: center;
		color: #fff;
		display: block;
		margin: 0px auto;
	}

#payment {
	margin: 50px 0px;
}

	#payment h3 {
		margin-bottom: 40px;
	}

	#payment p.select-label {
		padding: 20px 0px;
	}

	#payment button {
		margin-top: 30px;
		padding: 8px 15px;
		border-radius: 0px;
		background-color: #333;
		border: 0px;
	}

	#payment button:hover {
		background-color: #74A431;
	}

	#payment input[type="checkbox"] {
		display: none;
	}

	#payment .checkboxes label {
		width: 150px;
		height: 150px;
		margin: 0px 20px 20px 0px !important;
		padding: 45px 0px 0px 0px;
		background-color: #74A431;
		display: block;
		line-height: 30px;
		text-align: center;
		text-decoration: none;
		color: #fff;
		font-size: 16px;
		margin: 0px;
		position: relative;
		float: left;
	}

	#payment .checkboxes input[type=checkbox]:checked + label { 
		background-color: #333;
	}
/*  PAYMENT INVOICES (Homepage)  */

#homepage1 .box1 {

	padding:20px;
	background-color: #000;
	color: #fff;
	text-align: center;
}

#homepage1 .box1 a {

	color: #fff;
}

#homepage1 {

	width: 60%;
	margin: 0 auto;
}