/* CSS Document */

 	a { color: #6aa43f; text-decoration: none;}
	a:hover { text-decoration: none;}
	h2 { color: #6aa43f; font-size: 1.5em; text-align: center; margin: 5px 0 15px 0; }
    h3 { color: #333; border-bottom: 2px dotted #bbb; font-size: 1.1em; margin: 30px 0 15px 0; }
    table td { border: 1px solid #ccc; padding: 0px 5px; }
    table thead td { background-color: #eee; }
	body { font-family: Arial, Helvetica, sans-serif; font-size: 1em; margin: 0; padding: 0; color: #222; }
	hr { border: none; height: 1px; background-color: #aaa; margin: 20px 0;}
	
	.hide-mobile { display: none; }
	.contact-bar { margin: 10px 0; color: #fff; display: inline-block; width: 100%; }
	.contact-bar a { color: #fff;  background-color: #333; border-bottom: 1px solid #777; padding: 10px 0; width: 100%; text-align: center; display: block; }
	.contact-bar a:hover { color: #6aa43f;  background-color: #111; }
	.contact-bar .col-fb { display: none; }
	.image-bar .logo-container { text-align: center; border-bottom: 1px solid #ccc; }
	.image-bar .logo-container img { margin: 10px 0 10px 0; }
	.image-bar .slogan { font-weight: bold; font-size: 1em; text-align: center; color: #6aa43f; }
	.brand-logo img { border: 1px solid #ccc; }
	.brand-logo { text-align: center; padding: 20px 0 10px 0; clear: both; }
	.main-content { padding: 0 8px 20px 8px; }
	.service-bar { background-color: #eee; font-size: 0.9em; color: #444; width: 96%; padding: 2%; display: block; text-align: center; line-height: 1.5em; margin-bottom: 30px; }
	.service-bar .txt-highlight { color: #fff; font-weight: normal; font-size: 0.85em; padding: 7px 10px; background-color: #6aa43f; line-height: 2.5em; }
	.service-text { padding: 8px; background-color: #efefef; }
	.service-text li { margin-bottom: 6px; }
	hr.collection-devider { height: 0; background-color: #fff; border: none; margin: 0 0 35px 0; clear: both; }
	.wrapper { width: 95%; margin: 2em auto; }
	a.brick-box { overflow: hidden; display: inline-block; margin-bottom: 8px; width: calc(100% - 0px); margin-right: 0; }
	a.brick-box:hover img { transform: scale(1.15); }
	a.brick-box:hover .product img { transform: scale(1.0); }
	.brick-box figure { margin: 0; }
	.brick-box img {  border: none; max-width: 100%; height: auto; display: block; background: #ccc; transition: transform .2s ease-in-out; margin: 0 auto; }
	h2.collection-headline { text-align: center; font-weight: normal; letter-spacing: 1px; font-size: 1.3em; color: #888; margin-bottom: 24px; } 
	a.brick-box .product { color: #333; font-size: 0.9em; border: 1px solid #ccc; padding: 10px; text-align: center; overflow: hidden; }
	a.brick-box .product .prd-name { font-weight: bold; height: 50px; overflow: hidden; }
	a.brick-box:hover .product .prd-name { color: #6aa43f; }
	a.brick-box .product .prd-price { margin: 0; }
	a.brick-box .product .prd-unitpr { font-size: 0.7em; }
	.search-container { display: none; text-align: center; margin-bottom: 10px; }
	.search-container input[type="text"] { height: 54px; width: 60%; border: 2px solid #ccc; padding: 4px 10px; font-size: 1.2em; border-radius: 10px; margin: 5px 0 5px 5px; }
	.search-container input[type="submit"] { font-weight: bold; border: none; border-radius: 10px; background-color: #666; color: #fff; height: 58px; padding: 12px 14px; font-size: 1.1em; text-transform: uppercase; margin: 5px 5px 5px 0; -webkit-appearance: none; }
	.search-container input[type="submit"]:hover { cursor: pointer; background-color: #333; }
	i.fa.fa-long-arrow-down { color: #bbb; margin-top: 7px; font-size: 2.0em; }
	
	.two-rowbox { display: none; }
	
	@media (min-width:320px) { 
	
	}
	@media (min-width:481px) {
	.search-container { display: block; }
	a.brick-box { width: calc(50% - 8px); margin-right: 8px; }
	a.brick-box:nth-of-type(2n) { margin-right: 0;}
	}
	@media (min-width:641px) { 
	h2, h3,	.brand-logo { text-align: left; }
	.contact-bar { background-color: #333; font-size: 0.9em; color: #fff; display: inline-block; width: 100%; padding: 3px 0; margin: 0;}
	.contact-bar .col-1-4 { float: left; width: 23%; padding:1%; text-align: center; }
	.contact-bar a { border-bottom: none; padding: 0; width: auto; display: inline; }
	.contact-bar a:hover { color: #6aa43f;  background-color: #333; }
	.image-bar { padding: 0 0 20px 20px; background-color: #1f1f1f; color: #eee; min-height: 140px; border-bottom: 1px solid #ccc; background: #fff url(https://www.bike-packing.de/media/ebay/ebay-header-bikepacking.jpg) no-repeat center top; }
	.image-bar .logo-container { width: 178px; height: 138px; background-color: #fff; border: 1px solid #ccc; float: left; border-top: 0; }
	.image-bar .logo-container img { margin: 26px 0 0 0; }
	.image-bar .slogan { display: inline-block; font-size: 0.9em; font-weight: bold; background-color: #333; padding: 6px; color: #fff; margin-left: 28px; margin-top: 72px;}
	.image-bar .slogan .highbar { font-weight: normal; color: #6aa43f; }
	.brand-logo { display: none; }
	.main-content, .service-text { padding: 15px; }
	.search-container { float: left; margin-left: 28px; width: 62%; text-align: left; }
	.search-container input[type="text"] {  float: left; border: none; border-radius: 0; margin: 0; }
	.search-container input[type="submit"] { float: left; border-radius: 0; margin: 0; height: 55px; }
	.search-link { display: inline-block; margin-left: 28px; margin-top: 10px; }
	.search-link a { font-size: 0.9em; font-weight: bold; background-color: #6aa43f; color: #fff; padding: 6px; }
	.search-link a:hover { background-color: #7ab54f; }

	
	}
	@media (min-width:736px) {
	.main-content, .service-text { padding: 20px; }
	.image-bar .slogan { font-size: 1.0em; padding: 6px 10px; }
	.three-rowbox a.brick-box { width: calc(33% - 8px);  }
	.three-rowbox a.brick-box:nth-of-type(2n) { margin-right: 8px;}
	.three-rowbox a.brick-box:nth-of-type(3n) { margin-right: 0; }
	.four-rowbox a.brick-box { width: calc(25% - 10px);  }
	.four-rowbox a.brick-box:nth-of-type(2n) { margin-right: 8px;}
	.four-rowbox a.brick-box:nth-of-type(4n) { margin-right: 0; }
	.service-bar { font-size: 1.1em; }
	}
	
	@media (min-width:961px) {
	.contact-bar { font-size: 1em; }
	.contact-bar .col-1-4 { width: 21%; }
	.contact-bar .col-fb { display: block; float: left; width: 24px; padding: 6px; text-align: center; font-size: 1.5em; }

	
	}
	@media (min-width:1025px) {
	.main-content, .service-text { padding: 30px; }
	.hide-mobile { display: inline; }
	
	}
	@media (min-width:1281px) {
	
	}