@charset "utf-8";

/*
---------------------------------------------------------------------------------------------------- 
	Default Fonts
----------------------------------------------------------------------------------------------------
*/

/*
---------------------------------------------------------------------------------------------------- 
	Defaults (Body, Font, Headings, Buttons etc.)
----------------------------------------------------------------------------------------------------
*/

body {
	color: #606060;	
	background-color: #101010;
}

h1, h2, h3 {
	margin-top: 0;
	line-height: 1.1;
	font-family: 'open_sansbold', Arial, Helvetica, sans-serif;	
}

h1 {
	font-size: 2.125em;
}

h2 {
	font-size: 1.65em;	
}

h3 {
	font-size: 1.285em;	
}

.list li {
	border-top-color: #dddddd;	
}

input, select, textarea {
	border: none;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
}

input, select {
	height: 50px;
	font-size: 18px;
	padding-left: 15px;
	padding-right: 15px;
}

select {
	cursor: pointer;	
	padding-right: 35px;
	background: url("graphics/select_bgd.png") no-repeat right center;
	background-size: 30px;	
}

.select {
	position: relative;	
}

.select:before {
	content: "";
	top: 2px;
	right: 35px;
	width: 30px;
	height: 46px;	
	position: absolute;
	pointer-events: none;
	background-color: #ffffff;
}

.icons a {
	width: 50px;
	height: 50px;
	font-size: 25px;
	line-height: 50px;
	display: inline-block;	
	border: solid 2px #ffffff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;		
}

.icons a:hover {
	text-decoration: none;
}

.component-image, .module-image {
	margin-bottom: 26px;
}	

.breadcrumbs {
	display: block;
	margin-bottom: 20px;	
}

/*
---------------------------------------------------------------------------------------------------- 
	App
----------------------------------------------------------------------------------------------------
*/

.app-body {
	z-index: 2;
	width: 100%;
	margin-left: 0px;
	position: relative;	
	background-color: #ffffff;
	background-repeat: repeat-x;
	background-attachment: fixed;
	background-position: 0px 40px;
	background-image: url("graphics/background.png");
	transition: margin-left 0.25s;
}

/* App toggles */

.app.toggle .app-body {
	margin-left: -280px;
}

.app.toggle .app-header {
	margin-left: -280px;	
}

.app.toggle .app-footer {
	margin-left: -280px;
}

/*
---------------------------------------------------------------------------------------------------- 
	App-Header
----------------------------------------------------------------------------------------------------
*/

.app-header {
	z-index: 3;	
	width: 100%;
	position: fixed;
	margin-left: 0px;	
	transition: margin-left 0.25s;
}

.nav-bar {
	width: 100%;
	height: 40px;	
	position: fixed; /* Fixes Chrome scrolling with mouse wheel (only) bug */	
	background-color: transparent;	
	transition: background-color 0.5s;	
}

.nav-bar .logo {
	float: left;
	height: 25px;
	margin: 7.5px;
	display: block;	
	position: relative;	
}

.nav-bar .logo img {
	opacity: 0;	
	height: 100%;
	display: block;	
	transition: opacity 0.5s;
	filter: alpha(opacity = 0);		
}

.nav-bar .logo img:first-child {
	opacity: 1;	
	position: absolute;	
	filter: alpha(opacity = 100);	
}

.nav-bar .nav-toggle {
	float: right;
	border: none;	
	outline: none;
	padding: 7px 10px;
	background-color: transparent;
}

.nav-bar .nav-toggle .icon-bar {
	width: 20px;
	height: 4px;
	display: block;
	overflow: hidden;
	background-color: #fff;
	margin: 4px 0px 4px 0px;
	transition: background-color 0.5s;
}

.nav-menu {
	z-index: 1;	
	top: 0px;
	right: 0px;
	width: 280px;
	color: #ffffff;		
	position: fixed;
	transition: color 0.5s;	
}

.nav-menu ul {
	margin: 0px;
	padding: 0px;
	display: block;
	list-style-type: none;
}

.nav-menu li {
	border-style: solid;
	border-color: #303030;
	border-width: 0px 0px 1px 0px;
}

.nav-menu li a {
	color: inherit;
	display: block;
	line-height: 40px;	
	padding: 0px 15px 0px;
	text-transform: capitalize;
}

.nav-menu li a:hover {
	color: #101010;
	text-decoration: none;	
	background-color: #ffffff;
}

.nav-menu li.active a {
	color: #101010;
	background-color: #ffffff;
}

/* Header toggles */

.app-header.toggle .nav-bar {
	color: #101010;
	background-color: #ffffff;	
}

.app-header.toggle .nav-toggle .icon-bar {
	background-color: #101010;	
}

.app-header.toggle .logo img {
	opacity: 1;
	filter: alpha(opacity = 100);	
}

.app-header.toggle .logo img:first-child {
	opacity: 0;
	filter: alpha(opacity = 0);	
}

.nav-menu.toggle {
	color: #101010;	
}

.app.toggle .nav-menu.toggle {
	color: #ffffff;	
}

/*
---------------------------------------------------------------------------------------------------- 
	App-Footer
----------------------------------------------------------------------------------------------------
*/

.app-footer {
	z-index: 2;	
	width: 100%;
	color: #ffffff;	
	margin-left: 0px;	
	text-align: center;
	position: relative;			
	padding: 60px 0px 54px;
	background-color: #101010;	
	transition: margin-left 0.25s;
}

.app-footer .row {
	max-width: 1320px;	
	margin-left: auto;
	margin-right: auto;
}

.app-footer .col {
	padding-left: 15px;
	padding-right: 15px;
}

.app-footer a {
	color: inherit;	
}

.app-footer span {
	display: block;	
}

.app-footer .icons a {
	margin: 0px 7.5px 24px;	
}

/*
---------------------------------------------------------------------------------------------------- 
	Containers
----------------------------------------------------------------------------------------------------
*/

/* Articles */

.con-default img {
	width: 100%;
	display: block;
	margin: 20px 0px;
}

.con-default h1, .con-default h2, .con-default h3, .con-default p, .con-default ul, .con-default ol {
	margin-bottom: 16px;	
}

.con-default > *:first-child {
	margin-top: 0px;	
}

.con-default > *:last-child {
	margin-bottom: 0px;	
}

.con-default .link {
	display: block;
	margin-top: 24px;
	text-align: center;
}

.con-default .link a {
	line-height: 36px;
	border-width: 2px;
	border-radius: 5px;
	border-style: solid;	
	display: inline-block;	
	padding: 0px 30px 0px;	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;		
}

.con-default .link a:hover {
	text-decoration: none;
}

.con-default .meta {
	margin-bottom: 20px;	
}

.con-default .meta span:first-child {
	display: block;
	margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom: solid 1px #dddddd;	
}

.con-default .cost {
	line-height: 1.1;
	font-size: 2.125em;
	margin-bottom: 22px;
}	

.con-default .cost span {
	font-size: 0.335em;
}	

/* Categories */

.con-categories {
	margin-top: 12px;	
}

.con-categories:first-child {
	margin-top: 0px;	
}

.con-categories h3 {
	margin: 0px;
	padding-bottom: 10px;	
	text-transform: capitalize;
	border-bottom: solid 2px #606060;	
}

.con-categories span {
	float: right;
	display: block;
	cursor: pointer;
}

.con-categories ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

.con-categories.less h3 span:before {
	content: "-";		
}

.con-categories.more h3 span:before {
	content: "+";		
}

.con-categories.more ul {
	display: none;
}

.con-categories li a {
	display: block;
	font-size: 14px;	
	padding: 9px 15px;	
	border-bottom: solid 1px #dddddd;	
}

.con-categories li a.selected {
	color: #606060;
}

/* Search */

.con-search {
	border-bottom: solid 2px #606060;	
}

.con-search input {
	padding: 0;
	height: 40px;	
	font-size: 1.285em;	
	background: url("graphics/search_icon.png") no-repeat right center;
	background-size: 20px;
	
	border-radius: 0;	
	-moz-border-radius: 0;
	-webkit-border-radius: 0;	
}

.con-search input:focus {
	outline: 0;
}

/* Products */

.con-product {
	font-size: 14px;
}

.con-product h4 {
	margin: 0px;
	font-size: 1.45em;
}

.con-product .meta {
	margin-top: 15px;	
}

.con-product .meta > * {
	width: 100%;
	color: #606060;		
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.con-product .meta span {
	display: block;	
}

/* Contact */

.con-contact input, .con-contact textarea {
	display: block;	
	margin: 20px 0px 0px;
}

.con-contact textarea {
	resize: none;		
	height: 190px;
	font-size: 18px;
	line-height: 1.4;
	padding: 15px 15px;
}

.con-contact form span {
	display: block;
	text-align: left;
	margin-top: 20px;
}

/* Slideshow */

.con-slideshow {
	top: 0px;
	left: 0px;
	opacity: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;	
	background-color: #101010;
	filter: alpha(opacity = 0);
}

.con-slideshow img {
	position: absolute;	
	opacity: 1;
	filter: alpha(opacity = 100);
}

.con-slideshow > div {
	width: 100%;
	height: 100%;
	display: table;
	position: absolute;	
}

.con-slideshow > div div:before {
	content: '';
	display: table-row;
}

.con-slideshow > div div {
	width: 100%;
	height: 100%;
	text-align: center;	
	display: table-cell;
	vertical-align: middle;
}

.con-slideshow span {
	color: #fff;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;	
}

.con-slideshow .heading {
	line-height: 1;	
	font-size: 2.825em;
	max-width: 1100px;
}

.con-slideshow .body {
	margin-top: 14px;
	line-height: 1.25;		
	max-width: 1100px;	
	font-size: 1.65em;	
}

.con-slideshow .link {
	width: 100%;
	display: block;
	margin-top: 48px;
}

.con-slideshow .link a {
	color: inherit;
	font-size: 18px;
	line-height: 46px;
	padding: 0px 30px;		
	display: inline-block;
	border: solid 2px #ffffff;
	
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;		
}

.con-slideshow .link a:hover {
	text-decoration: none;	
}

/* Subscribe */

.con-subscribe h2, .con-subscribe h3, .con-subscribe p {
	margin-bottom: 16px;	
}

.con-subscribe input[type='submit']:hover {
	background-color: #101010;	
}

/* Login */

.con-login {
	max-width: 410px;
	margin-left: auto;
	margin-right: auto;	
}

.con-login form label {
	margin-top: 14px;
	margin-bottom: 4px;
}

.con-login h1 {
	margin-top: 0px;
	padding-bottom: 8px;
	border-bottom: solid 2px #606060;
}

.con-login .options {
	margin-top: 9px;
	text-align: right;	
}

.con-login form input {
	border: solid 2px #e6e6e6;	
}

.con-login form input[type='submit'] {
	color: #fff;
	border: none;
	margin-top: 20px;
}

.con-login form input[type='submit']:hover {
	background-color: #101010;	
}

/* Cart */

.con-cart h1 {
	margin: 0px;
	padding-bottom: 8px;
	border-bottom: solid 2px #606060;
}

.con-cart form > .row {
	margin: 0px;
	border-bottom: solid 1px #dddddd;	
}

.con-cart form > .row > .col {
	padding-top: 9px;
	padding-bottom: 9px;	
}

.con-cart form > .row > .col > span {
	float: right;
}

.con-cart .row.toggle {
	display: none	
}

.con-cart .row.vertical-align {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}

.con-cart .row.vertical-align > .col:last-child {
	text-align: right;	
}

.con-cart .row.no-border {
	border-bottom: none;	
}

.con-cart .row.no-border .col {
	border-bottom: solid 1px #dddddd;
}
.con-cart .row.no-border .last {
	border-bottom: solid 2px #606060;
}

.con-cart .row .row .col > * {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.con-cart select {
	height: 40px;
	font-size: 1em;
}

.con-cart .row.no-border .select {
	padding: 0px;
}

.con-cart .select:before {
	top: 0px;
	height: 40px;
}

.con-cart .row.no-border .total {
	padding: 0 15px;
	line-height: 59px;
}

.con-cart .total span {
	font-size: 1.625em;
}

.con-cart form > .row:last-child {
	text-align: center;	
	border-bottom: none;	
}

.con-cart form > .row:last-child .col {
	padding: 30px 0 0;
}

.con-cart input[type='image'] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*
---------------------------------------------------------------------------------------------------- 
	Wrappers 
----------------------------------------------------------------------------------------------------
*/

/* Default */

.wrap-default > .col {
	margin-top: 30px;
	margin-bottom: 30px;
}

/* Article */

.wrap-article > .col {
	margin-top: 30px;
	margin-bottom: 30px;
}

/* Blog */

.wrap-blog > .col {
	margin-top: 30px;
	margin-bottom: 30px;
}

.wrap-blog .con-default {
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: solid 2px #101010;	
}

.wrap-blog.single-post .con-default {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;	
}

/* Shop */

.wrap-shop > .col {
	margin-top: 30px;
	margin-bottom: 30px;
}

.wrap-shop .hr {
	clear: both;
	padding: 0px 15px 30px;
}

.wrap-shop .hr hr {
	margin: 0px;
	display: block;
	border-top: solid 2px #101010;	
}

.wrap-shop .con-product {
	margin-bottom: 30px;	
}

.wrap-shop .component-image {
	height: 0px;
	cursor: pointer;
	overflow: hidden;
	margin-bottom: 0px;
}

.wrap-shop .component-image img {
	transition: margin-top 0.25s;	
}

.wrap-shop .component-image:hover img {
	opacity: 0.75;
	filter: alpha(opacity = 75);
}

.wrap-shop .component-images .col {
	margin-top: 30px;	
}

.wrap-shop form > .col {
	margin-bottom: 15px;	
}

.wrap-shop form > .col:last-child {
	margin-bottom: 0px;	
}

.wrap-shop form select {
	border: solid 2px #dddddd;	
}

.wrap-shop .list-heading {
	margin-top: 24px;	
}

.wrap-shop .con-categories li:first-child {
	display: block;	
}

/* Component */

.wrap-component {
	margin-bottom: 30px;	
}

/* Introduction */

.wrap-introduction .con-default > * {
	max-width: 1070px;
	margin-left: auto;
	margin-right: auto;	
	text-align: center;	
}

.wrap-introduction .con-default h1 {
	max-width: 1290px;
}

.wrap-introduction .con-default .breadcrumbs {
	display: none;	
}

/* Line up */

.wrap-line-up {
	margin-top: 20px;		
	text-align: center;
}	

.wrap-line-up .col {
	margin-top: 30px;
}	

/* Slideshow */

.wrap-slideshow {
	min-height: 0;
	position: relative;
	background-color: #101010;;	
}

/* Banner */

.wrap-banner {
	padding: 0px;
	text-align: center;
	background-color: #e6e6e6;
}

.wrap-banner h2 {
	color: inherit;
	font-size: 2.0em;
}

.wrap-banner > div > * {
	margin-left: auto;
	margin-right: auto;	
	padding-left: 15px;
	padding-right: 15px;
}

.wrap-banner > div h2, .wrap-banner > div p {
	margin-top: 0px;
	max-width: 850px;
}

.wrap-banner .con-default {
	color: #fff;
	background-size: cover;
	background-position: center center;
}

.wrap-banner .con-default .link {
	margin-top: 54px;		
}

.wrap-banner .con-default .link a {
	color: inherit;
	font-size: 18px;	
	line-height: 46px;	
}

.wrap-banner > .con-subscribe form {
	margin-top: 54px;
	max-width: 1100px;
}

.wrap-banner > .con-subscribe input {
	margin-bottom: 15px;
}

.wrap-banner > .con-subscribe .link {
	margin-top: 0px;
	max-width: 1100px;	
}

.wrap-banner > .con-contact form {
	max-width: 1100px;
}
	
/* Gallery */	
	
.wrap-gallery {
	margin-top: -30px;	
}
	
.wrap-gallery .col {
	padding: 30px 15px 0px 15px;
}

.wrap-gallery a {
	display: block;	
	background-size: cover;
	background-position: center center;
}

.wrap-gallery a:hover {
	opacity: 0.75;
	filter: alpha(opacity = 75);	
}

.wrap-gallery .thumbnail-image-meta {
	display: block;
	font-size: 14px;
	text-align: center;	
	margin: 10px 15px 0px;	
}
	
/*
---------------------------------------------------------------------------------------------------- 
	Templates
----------------------------------------------------------------------------------------------------
*/

/*
---------------------------------------------------------------------------------------------------- 
	Lightbox
----------------------------------------------------------------------------------------------------
*/

#lightboxContent {	
	box-shadow: inset 0px 0px 0px 1px #606060;			
}

#lightboxContent .image-meta {
	margin-top: 15px;
}

/*
---------------------------------------------------------------------------------------------------- 
	Misc
----------------------------------------------------------------------------------------------------
*/

.icon {
	color: #fff;
	font-size: 25px;
	line-height: 25px;
	margin: 0px 7.5px;	
	display: inline-block;	
	padding: 10.5px 10.5px;
	border: solid 2px #ffffff;
}

.icon:hover {
	color: #fff;
	cursor: pointer;
	text-decoration: none;	
}

/* Pagination */

.con-pagination td {
	padding: 0px 15px 0px;
}

.con-pagination td.numbers {
	padding: 0px 0px 0px;
}

.con-pagination td > * {
	width: 40px;
	height: auto;
	color: #dddddd;
	line-height: 36px;
	border-color: #dddddd;
	border-width: 2px 2px 2px;

	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;		
}

.con-pagination td > *:first-child {
	border-width: 2px;
}

.con-pagination td.numbers a {
	margin: 0px 5px;
}

/*
---------------------------------------------------------------------------------------------------- 
	Media queries
----------------------------------------------------------------------------------------------------
*/

@media (min-width: 768px) {
	
	/* Cart */
			
	.con-cart .row.toggle {
		display: block;	
	}
	
	.con-cart .row.toggle .col:last-child, .con-cart .row.vertical-align .col:last-child {
		text-align: right;	
	}
	
	.con-cart form > .row:last-child {
		text-align: left;	
	}	
	
	.con-cart input[type='image'] {
		margin-right: 0px;
	}
}

@media (min-width: 992px) { 

	.app-body {
		background-position: 0px 80px;
	}
	
	/* Navigation */

	.nav-bar {
		height: 80px;
	}
			
	.nav-bar .logo {
		height: 50px;
		margin: 15px;
	}
		
	.nav-bar .nav-toggle {
		display: none;
	}
	
	.nav-menu {
		z-index: 3;
		top: 20px;
		right: 15px;
		width: auto;
		display: block;
		position: fixed;
	}
	
	.nav-menu li {
		float: left;
		border-width: 0px;	
	}
	
	.nav-menu li a {
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;		
	}
	
	.nav-menu li a:hover {
		color: #fff;
		background-color: transparent;
	}
	
	.nav-menu li.active a {
		color: #fff;
		background-color: transparent;
		transition: background-color 0.5s;
	}
	
	.nav-menu.toggle li a:hover {
		color: #101010;
		background-color: #e6e6e6;
	}
	
	.nav-menu.toggle li.active a {
		color: #101010;
		background-color: #e6e6e6;
	}	
	
	/* Headings */
	
	h1 {
		font-size: 3.0em; 
	}
	
	h2 {
		font-size: 2.125em	
	}
	
	h3 {
		font-size: 1.625em	
	}
	
	/* Article extensions */
	
	.con-default .cost {
		font-size: 3.0em;
	}		
		
	/* Flexbox vertical alignment */	
		
	.vertical-align {
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
	}	

	/* Search */

	.con-search input {
		height: 50px;	
		font-size: 1.625em;	
		background-size: 25px;
	}
	
	/* Slideshow */
	
	.con-slideshow .heading {
		font-size: 4.0em;
	}
	
	.con-slideshow .body {
		font-size: 2.125em;	
	}
		
	/* Banners */
	
	.wrap-banner h2 {
		font-size: 3.0em;
	}
	
	.wrap-banner > .con-subscribe .link {
		display: block;
		text-align: right;
	}
	
	/* Contact form */
	
	.con-contact form span {
		line-height: 50px;
	}	
	
	/* Default */
	
	.wrap-default {
		max-width: 990px;
		margin-left: auto;
		margin-right: auto;
	}	
	
	/* Shop */
	
	.wrap-shop .component-images .col:first-child {
		margin-top: 0px;	
	}
	
	.wrap-shop .list-heading {
		margin-top: 6px;	
	}
}

@media (min-width: 1320px) { 
	
	.wrap-line-up {
		max-width: 1320px;	
		margin-left: auto;
		margin-right: auto;
	}	
	
	/* Article */
	
	.wrap-article {
		max-width: 1320px;
		margin-left: auto;
		margin-right: auto;
	}
	
	/* Blog */
	
	.wrap-blog {
		max-width: 1320px;
		margin-left: auto;
		margin-right: auto;
	}	
	
	/* Shop */
	
	.wrap-shop {
		max-width: 1320px;
		margin-left: auto;
		margin-right: auto;
	}	
		
	/* Gallery */
	
	.wrap-gallery {
		max-width: 1320px;
		margin-left: auto;
		margin-right: auto;
	}	
}