/*************************************	Custom CSS	**********************************************************************/
body {margin:0;padding:0;color:#686666;font-family:"ChronicleDisplay-Semi", Arial;font-size:14px;}
	a {color:#686666;}
	a:hover {color:#000;}
	
	img {max-width:100%;max-height:auto;border:none;vertical-align:middle;}
	h1 {font-size:20px;font-family:"Gotham-Book";font-weight:bold;}
	h2 {font-size:18px;font-family:"Gotham-Book";font-weight:bold;}
	h3 {font-size:16px;font-family:"Gotham-Book";font-weight:bold;}
	ul {margin-left:0px;padding-left:15px;}
		ul ul {margin-left:15px;}

	#top_area {position:relative;z-index:3;height:60px;background:#fff;box-shadow:0 1px 7px #333;font-size:12px;}
		#logo {}
		#logo > a {position:absolute;float:left;z-index:2;display:block;width:100%;}
		#login_area, #cart_area {padding-top:20px;}
			#login_area > span {margin-left:15px;}
		#cart_area {text-align:right;}
		#top_area #cart {float:none;display:inline-block;width:auto;margin:0;padding:0;}
		#top_area #cart > button {display:inline-block;width:auto;margin:0;padding:0;border:none;border-radius:0;box-shadow:none;background:transparent;color:#686666;text-shadow:none;}
		#top_area #cart > button #cart-total {font-size:13px !important;}

		#cart > ul {width:500px;max-width:500px;text-align:left;padding:10px;}
			#cart .cart-totals {width:500px;max-width:500px;}


	#mid_area {position:relative;z-index:2;margin:0;padding:30px 15px 30px;box-shadow:0 1px 7px #333;}
		#mid_area > .container {position:relative;}
		#notification {position:absolute;right:0;width:90%;}
		#img_main {height:535px;background:url(/image/data/website/img_main.jpg) no-repeat 50% 0;background-size:auto 100%;box-shadow:0 1px 7px #333;}

		a.active {color:#000;font-weight:bold;}
		#mainpage-menu {position:relative;margin-top:-185px;}
			#mainpage-menu a {position:relative;display:block;font-family:"Gotham-Book";text-align:center;background:#fff;}
			#mainpage-menu a > p:first-child {background:#fff;box-shadow:3px 3px 7px #5d5c5b;}
			#mainpage-menu a img {opacity:1;}
			#mainpage-menu a:hover img {opacity:1;}

		#infopage-menu {position:relative;margin:0;}
			#infopage-menu a {position:relative;display:block;font-family:"Gotham-Book";text-align:center;}
			#infopage-menu a > p:first-child {background:#fff;box-shadow:3px 3px 7px #5d5c5b;}
			#infopage-menu a img {opacity:1;}
			#infopage-menu a:hover img {opacity:1;}
			#infopage-menu > div.active a img {opacity:1;}
		
		#product-menu {position:relative;}
			#product-menu a {position:relative;display:block;text-align:center;}
			#product-menu a > p:first-child {background:#fff;box-shadow:3px 3px 7px #5d5c5b;}
			#product-menu a img {opacity:1;}
			#product-menu a:hover img {opacity:1;}
			#product-menu > div.active a img {opacity:1;}

		#main_content {}
			#main_content_l {padding:50px 0;vertical-align:middle;color:#303126;font-family:"Gotham-Book";font-size:20px;text-align:center;}
			#main_content_r {}
			#main_content h1 {font-size:17px;}

			.breadcrumb {float:right;width:75%;margin-top:-130px;}
			.info-copy {float:right;width:75%;padding:40px 0 80px;vertical-align:middle;color:#303126;font-family:"Gotham-Book";font-size:20px;text-align:center;}

/*
		#product_carousel {position:relative;padding:10px 30px;}
			.product-carousel {width:20%;height:auto;}
			.product-carousel p {text-align:center;}
			#product-desc {}
			.carouse_nav {position:absolute;z-index:20;top:0;width:30px;line-height:178px;margin:10px 0;text-align:center;vertical-align:middle;cursor:pointer;opacity:0.5;}
			.carouse_nav:hover {opacity:1;}
				.carousel_next {right:0;}
				.carousel_prev {left:0;}
*/
		
		.category-list {list-style:none;margin:0;padding:0;overflow:hidden;}
			.category-list .panel {box-shadow:none;}
			.category-list .panel-default {border:none;}
			.category-heading {margin:0;padding:0 15px;border-bottom:1px solid #ccc;background:transparent !important;font-family:"Gotham-Book";font-size:20px;}

		.product-info .image {border:none;}
		.product-info .price {font-size:20px;font-family:"Gotham-Book";border:none;}
		.tab-content {padding:0;font-size:12px;}

		.required:before {
			font-weight: bold;
			color: #FF0000;
			content: '';
		}


	#footer {display:none;margin:0;padding:0 0 30px;font-size:10px;background:none;}
		#footer .row {padding:10px 0;}
		#footer ul {list-style:none;margin:0;padding:0;}
			#footer ul > li {float:left;margin:0 5px;}
		.sns {float:right;}
			.sns > li {float:left;margin:0 0 0 10px;padding:0;}
				.sns > li > a {display:block;width:30px;height:30px;line-height:0;margin:0;padding:0;}
				.sns > li > a:hover {opacity:0.7;}
					.facebook {background:url(/image/data/website/icon_facebook.png) no-repeat;}
					.twitter {background:url(/image/data/website/icon_twitter.png) no-repeat;}
					.email {background:url(/image/data/website/icon_email.png) no-repeat;}
					.pinterest {background:url(/image/data/website/icon_pinterest.png) no-repeat;}
		#footer .footer_nav > li {margin:5px 0 !important;padding:0 8px;border-left:1px solid #5e5c5c;color:#5e5c5c;}
			#footer .footer_nav li:first-child {border:none;}
			#footer .footer_nav li > a {color:#5e5c5c;}
			#footer .footer_nav li > a:hover {color:#000;}
		#copyright, #wa {color:#b4b4b4;}
		#wa {text-align:right;}
		#wa a:hover {color:#000;}

	.btn {line-height:1;padding:7px;font-family:"ChronicleDisplay-Italic";font-size:20px;}
		.btn-cart {background:#ccc;font-weight:bold;}
		.btn-cart:hover {box-shadow:0 0 15px #000;}

/* Small devices; Tablets (≥768px) 
   Lets add the styling required for slightly bigger mobile divices from 768 pixels to 991 pixels */

@media (max-width: 768px) {
}
@media (min-width: 768px) and (max-width: 960px) {
	#img_main {height:300px;}
	#mainpage-menu {margin-top:-140px;}
	#logo > a > img {max-width:80%;}
	#content.content-area {margin-top:130px;}
}
@media (min-width: 768px) {
	.col-nav {width:20%;}
}
   
/* Medium devices; Laptops & Desktops (≥992px)
   Lets add the styling required for medium sized devices from 992 pixels to 1199 pixels */
@media (min-width: 960px) {
	/*
		Structure
	*/

	.container {width:960px;}

	.alert {float:right;width:75%;}

	#content {
		width: 100%;
		line-height:1.6;
	}
	#content.info {float:right;width:75%;margin-top:25px;}
	#content.content-area {margin-top:150px;}

	#column-left + #content {
		/*width: 83.33333333333334%;*/
		width:75%
	}

	#column-right + #content {
		/*
		width: 83.33333333333334%;
		right: 16.666666666666664%;
		*/
		width: 75%;
		right: 0;
	}

	#column-left + #column-right + #content {
		width: 50%;
	}

	#column-right {
		float:right;
		right: 0;
	}

	#column-left + #column-right {
		right:0;
	}
}

/* Large devices; Desktops (≥1200px)
   Lets add the styling required for the big boy devices from 1200 pixels and greater */
@media (min-width: 1200px) {

}