MAINHACK

Viewing / Editing File: _base.scss

/**
 * Global styles applied to all non-woocommerce theme components. Includes styles for;
 *
 * Typography
 * Header
 * Footer
 * Main content area
 * Accessiblity helper classes
 * 404
 * Comments
 * Content (posts etc)
 * Forms
 * Media
 * Menus
 * pagination
 * Post formats
 * Widgets
 */

/**
 * Typography
 */

body {
	-ms-word-wrap: break-word;
	word-wrap: break-word;
	margin: 0;
}
body,
button,
input,
textarea {
	color: $color_body;
	font-family: $base-font;
	line-height: 1.618;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	font-weight: 400;
}

select {
	color: initial;
	font-family: $base-font;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: 700;
	margin: 0 0 ms(-3);
	color: darken( $color_body, 20% );

a {
		font-weight: 700;
	}
}

h1,
.alpha {
	font-size: ms(3);
	line-height: 1.214;
	letter-spacing: -1px;
	
}
.entry-title {
	a {
		color: #484c51;
	}
}

h2,
.beta {
	font-size: 2em;
	line-height: 1.214;

& + h3 {
		border-top: 1px solid $color_border;
		padding-top: ms(-3);
	}
}

h3,
.gamma {
	font-size: ms(3);
	font-weight: 600;
}

h4,
.delta {
	font-size: ms(2);
	font-weight: 700;
}

h5 {
	font-size: ms(1);
	font-weight: 700;
}

h6 {
	font-size: ms(0);
	font-weight: 700;
}

.alpha,
.beta,
.gamma,
.delta {
	display: block;
}

p,
ul,
ol,
table,
blockquote,
form {
	& + h2,
	& + header h2,
	& + h3,
	& + h4 {
		margin-top: ms(4);
	}
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin: 0 0 ms(1);
}

p {
	margin: 0 0 ms(1);
}

ul,
ol {
	margin: 0 0 ms(1) 3em;
	padding: 0;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: ms(1);
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 0 ms(3);
}

b,
strong {
	font-weight: 700;
}

blockquote {
	padding: 0 ms(1);
	border-left: 3px solid rgba(0,0,0,0.05);
	font-style: italic;
	margin: 1em 0 1.25em;
}

address {
	margin: 0 0 ms(1);
}

pre {
	background: rgba(#000,.1);
	font-family: "Courier 10 Pitch", Courier, monospace;
	margin-bottom: ms(3);
	padding: ms(3);
	overflow: auto;
	max-width: 100%;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	background-color: rgba(0,0,0,0.05);
	padding: .202em ms(-3);
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	text-decoration: none;
	font-weight: 700;
	background: transparent;
}

sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

small {
	font-size: 75%;
}

big {
	font-size: 125%;
}

figure {
	margin: 0;
}

table {
	margin: 0 0 ms(1);
	width: 100%;
}

th {
	font-weight: bold;
}

img {
	height: auto; // Make sure images are scaled correctly.
	max-width: 100%; // Adhere to container width.
	display: block;
}

a {
	color: $color_links;
	text-decoration: none;
	font-weight: 400;	
	
	&:focus {
		outline-color: transparent;
	}

&:hover {
		text-decoration: underline;
	}
}

// Wait, what..?
.shopper-cute * {
	font-family: "Comic Sans MS", sans-serif;
}

/**
 * Global styles
 */
* {
	box-sizing: border-box;
}

body {
	background-color: $body-background;
	overflow-x: hidden;
}

.page-numbers li .page-numbers {
	background: $color_whitesmoke;
	color: $color_gray40;
	padding: ms(-5) ms(-1);
	-webkit-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	-ms-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	text-decoration: none;

&:hover {
		background-color: $color_woocommerce;
		color: $color_white;
		text-decoration: none;
	}

&.current {
		background-color: $color_woocommerce;
		color: $color_white;
	}
}

.site {
	overflow-x: hidden;
}

.site-content,
.header-widget-region {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

/**
 * Header
 */
.site-header {
	padding-top: ms(3);
	padding-bottom: ms(3);
	color: #9aa0a7;
	background-position: center center;

.site-logo-anchor,
	.site-logo-link,
	.custom-logo-link {
		display: block;

img {
			max-width: 210px;
		}
	}

.site-branding,
	.site-logo-anchor,
	.site-logo-link,
	.custom-logo-link {
		margin-bottom: 0;
		float: left;
	}

.widget {
		margin-bottom: 0;
	}
}

.home.blog,
.home.page:not(.page-template-tpl-page-homepage),
.home.post-type-archive-product {
	.site-header {
		margin-bottom: ms(7);
	}
}

.shopper-latest-from-blog {
	a {

&:hover {
			text-decoration: none;
		}
	}
	.recent-post-title {
		font-size: ms(1);
		text-align: center;
		position: relative;
		@inclue transition (all 0.25s ease);

&:after {
			background-color: #cccccc;
			content: '';
			width: 30px;
			height: 2px;
			display: inline-block;
			position: absolute;
			bottom: -9px;
			left: 44%;
		}
	}
	p {
		text-align: center;
		margin-bottom: ms(-3);
	}
	
	.comments-link {
		text-align: center;
		display: block;
		text-transform: uppercase;
		font-size: ms(-1);

a {
			color: $color_gray30;
			@include transition (all 0.25s ease);

&:hover {
				color: $color_gray40;
			}
		}
	}

}

/**
 * Title Style Homepage
 */
.shopper-product-section {
	.section-title {
		text-align: center;
		margin-bottom: ms(3);
		position: relative;
		font-size: ms(1);
		text-transform: uppercase;
		 
		&:before {
			content: '';
			width: 100%;
			height: 3px;
			position: absolute;
			background-color: #ddd;
			left: 0;
			top: 50%;
			z-index: 1;
		}

span {
			position: relative;
			background: #ffffff;
			display: inline-block;
			padding: 0 15px;
			z-index: 2;
		}

}

&:last-child {
		border-bottom: 0;
	}
}

.page-template-tpl-page-homepage-php {
	.columns-4 {
		ul.products {
			margin-left: 0;
			margin-bottom: 0;
			clear: both;						
		}
	}
}

.feature-banner {
	background-color: #333333;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	text-align: center;

margin-top: -50px;
	max-height: 500px;
	min-height: 500px;
	overflow: hidden;
	position: relative;
	-webkit-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	-ms-transition: .3s ease-in-out;
	transition: .3s ease-in-out;

img {
		display: inline-block;
		border-radius: 0;
	}

.banner-desc {
		text-align: center;
		max-width: 640px;
		margin-left: auto;
		margin-right: auto;
		
		* {
			color: $color_white;
		}
	
	}
}

.no-wc-breadcrumb {
	.site-header {
		margin-bottom: ms(7);
	}

&.page-template-tpl-page-homepage {
		.site-header {
			margin-bottom: 0;
		}
	}
}

.header-widget-region {
	position: relative;
	z-index: 99;
}

.site-branding {
	.site-title {
		font-size: 2em;
		letter-spacing: -1px;
		margin: 0.3em 0 0 0;

a {
			font-weight: 700;
		}
	}

.site-description {
		font-size: ms(-1);
		display: none;
	}
}

#mobile-menu-wrapper {

ul {
		margin: 0;
		padding: 0;
		list-style: none;

ul {
			display: none;
			margin-left: 10px;
		}
	}

li {
		position: relative;

a {
			display: block;
			padding: 0 ms(1);
			height: 40px;
			line-height: 40px;
			border-bottom: 1px solid #666666;
		}
	}

.arrow-sub-menu {
		position: absolute;
		right: 0;
		top: 0;
		width: 50px;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}
}

/**
 * Main content area
 */
.site-main {
	margin-bottom: ms(5);
}

.site-content {
	outline: none;
}

.page-template-tpl-page-homepage {
	.site-main {
		padding-top: 0;
	}
}

.page-template-tpl-page-homepage {
	.type-page {
		padding-top: ms(5);
		padding-bottom: ms(5);
		position: relative;

.shopper-hero__button-edit {
			position: absolute;
			top: 1em;
			right: 1em;
			font-size: ms(-1);
		}
	}

.entry-content {
		font-size: 1.1em;

p:last-child {
			margin-bottom: 0;
		}
	}

.entry-header {
		h1 {
			font-size: ms(6);
			margin-bottom: ms(-6);
		}
	}

.entry-content,
	.entry-header {
		max-width: ms(23);
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
}

.page-template-tpl-page-homepage.has-post-thumbnail {
	.type-page.has-post-thumbnail {
		background-size: cover;
		background-position: center center;
		padding-top: ms(9);
		padding-bottom: ms(9);

.entry-content,
		.entry-title {
			opacity: 0;
			@include transition(all,ease,.5s);

&.loaded {
				opacity: 1;
			}
		}
	}
}

/**
 * Footer
 */
.site-footer {
	background-color: $color_body;
	color: $color_body + #333;

h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: $color_body + #222;
	}

a:not(.button) {
		color: $color_gray30;
	}

.footer-menu {

a {
			color: $color_gray30;
		}
	}

.widget .tagcloud a {
		border-color: $color_gray30;
		color: $color_gray30;
	}
}

.site-info {
	float: left;
	padding: ms(4) 0;
	font-size: 0.750em;
	color: $color_gray30;
}

.footer-menu {

float: right;
	padding: ms(4) 0;
	font-size: 0.750em;
	color: $color_gray30;

> div {
		display: inline-block;
		padding: 0 0 0.313em;
		margin: 0 0 0.313em;
	}
	
	ul {
		list-style: none;
		margin: 0;
		padding: 0;

li {
			display: inline;

&:first-child {

a {
					padding-left: 0;
				}
			}
		}

ul {
			display: none !important;
		}

a {
			padding: 0 0.625em;
			text-transform: uppercase;
		}
	}		
}

/**
 * Alignment
 */
.alignleft {
	display: inline;
	float: left;
	margin-right: ms(1);
}
.alignright {
	display: inline;
	float: right;
	margin-left: ms(1);
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}

/**
 * Accessibility
 */
.screen-reader-text {
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	clip: auto !important;
	display: block;
	font-weight: bold;
	height: auto;
	left: 0;
	line-height: normal;
	padding: 1em ms(3);
	text-decoration: none;
	top: 0;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
	outline: none;
}

/**
 * Clearing
 */
.clear,
.entry-content,
.comment-content,
.site-header,
.site-content,
.site-footer {
	@include clearfix;
}

/**
 * Tables
 */
table {
	border-spacing: 0;
	width: 100%;
	border-collapse: separate;

caption {
		padding: 1em 0;
		font-weight: 700;
	}

td,
	th {
		padding: 1em ms(2);
		text-align: left;
		vertical-align: top;

p:last-child {
			margin-bottom: 0;
		}
	}

thead {
		th {
			text-transform: uppercase;
			padding: ms(2);
			vertical-align: middle;
			font-weight: 900;
		}
	}

tbody {
		h2 {
			font-size: 1em;
			letter-spacing: normal;
			font-weight: normal;

a {
				font-weight: normal;
			}
		}
	}
}

/**
 * 404 Styles
 */
.error404 {
	.widget-title {
		color: #555555;
		font-size: 1em;
		letter-spacing: 0;
		padding: 0 0 0.7em;
		margin-bottom: 1.5em;
		font-weight: 700;
		position: relative;
   		text-transform: uppercase;

&:before {
			background-color: #cccccc;
			content: '';
			width: 70px;
			height: 3px;
			display: block;
			position: absolute;
			bottom: 0;
			left: 0;
   		}
	}
	.fourohfour-columns-2 {
		.col-1 {
			> h2 {
				color: #555555;
				font-size: 1em;
				letter-spacing: 0;
				padding: 0 0 0.7em;
				margin-bottom: 1.5em;
				font-weight: 700;
				position: relative;
				text-transform: uppercase;

&:before {
					background-color: #cccccc;
					content: '';
					width: 70px;
					height: 3px;
					display: block;
					position: absolute;
					bottom: 0;
					left: 0;
				}

}
		}
	}
	.site-content .widget_product_search {
		padding: ms(3);
		background-color: rgba(#000,.025);
		font-size: ms(-1);

form {
			margin: 0;
		}
	}

&.right-sidebar .content-area,
	&.left-sidebar .content-area {
		width: 100%;
	}

.fourohfour-columns-2 {
		@include clearfix;
		padding: ms(5) 0;
		border: 1px solid $color_border;
		border-width: 1px 0;
		margin-bottom: ms(5);

ul.products,
		ul.products li.product,
		.widget {
			margin-bottom: 0;
		}

.col-1 {
			@include span( 6 of 12 );

ul.products {
				li.product {
					@include span( 3 of 6 );
				}
			}
		}

.col-2 {
			@include span( last 6 of 12 );
			padding: ms(3);
			background-color: rgba(#000,.025);
		}
	}
}

/**
 * Comments
 */
#comments {
	padding-top: ms(5);

.comments-title {
		border-bottom: 1px solid $color_border;
		padding-bottom: ms(-3);
		margin-bottom: ms(3);
		font-size: ms(3);
	}

.comment-list {
		list-style: none;
		margin-left: 0;

.comment-body {
			@include clearfix;
		}

.comment-content {
			padding-bottom: ms(3);
			margin-bottom: ms(3);
			overflow: hidden;

cite {
				font-weight: 600;
				font-size: ms(1);
				display: block;

a {
					color: #2c2d33;
				}
			}

.comment-text {
				margin-bottom: ms(-3);

p:last-child {
					margin-bottom: 0;
				}
			}
			.commentmetadata {
				width: 100%;
				a {
					color: #777;
					font-size: ms(-1);
					float: left;
					font-weight: 400;
					
					&:hover {
						color: #000000;
					}					
				}
			}
		}

.comment-meta {
			margin-bottom: 1em;

.avatar {
				margin-bottom: 1em;
				max-width: 70px;
				height: auto;
				border-radius: 50%;
			}

a.comment-date {
				font-size: ms(-1);
			}

cite {
				font-style: normal;
				clear: both;
				display: block;
			}
		}

.reply {
			@include clearfix;
			float: right;

a {
				display: inline-block;
				margin-right: 1em;

&:after {
					@include fa-icon();
					content: "\f112";
					margin-left: ms(-3);
				}

&.comment-edit-link {
					&:after {
						content: "\f040";
					}
				}

&:last-child {
					margin-right: 0;
				}
			}
		}

.children {
			list-style: none;
		}
	}
}

.comment-content a {
	word-wrap: break-word;
}

#respond {
	clear: both;
	padding: ms(3);
	background-color: rgba(0,0,0,0.0125);

.comment-form-author,
	.comment-form-email,
	.comment-form-url {
		input {
			width: 100%;
		}
	}

.form-submit,
	form {
		margin-bottom: 0;
	}

#cancel-comment-reply-link {
		position: absolute;
		top: ms(-3);
		right: ms(-3);
		display: block;
		height: 1em;
		width: 1em;
		overflow: hidden;
		line-height: 1;
		font-size: ms(2);
		text-align: center;
		@include transition(transform,ease,.3s);

&:hover {
			@include transform(scale(1.3));
		}

&:before {
			@include fa-icon();
			content: "\f057";
			display: block;
		}
	}
}

/**
 * Content
 */
.sticky {
	.entry-title {
		&:before {
			@include fa-icon();
			margin-right: ms(-3);
			content: "\f08d";
		}
	}
}

.hentry {
		.entry-header {
			margin-bottom: ms(2);		
		}

.entry-footer {
			@include span(last 9 of 9);
			padding-top: ms(-2);
			padding-bottom: ms(-2);
			margin-bottom: ms(1);			
			border-top: 1px solid #ececec;
			border-bottom: 1px solid #ececec;
			@include clearfix;

> span {
				display: inline-block;
				font-size: .8em;
			}
			
			.posted-on {
				float: left;			
			}

.comments-link {
				float: right;
			}
		}
		
	}

/**
	 * Content
	 */

.hentry {

margin: 0 0 ms(3);
		list-style: none;

.entry-content {

.align-center {
				text-align: center;
				margin-bottom: ms(0);
			}

.more-link {
				position: relative;
				display: inline-block;
				padding: 6px 25px 6px 8px;
				border-style: solid;
    			border-width: 1px;
    			border-color: #ff6600; 
				border-radius: 3px;
				background: $color_white;
				color: #ff6600;
				@include transition(all .25s ease);

&:hover {
					background: #ff6600;
					color: $color_white;
					text-decoration: none;
				}
				&:after {
					content: '\f178';
					font-family: FontAwesome;
					position: absolute;
					right: 0;
					top: 10px;
					margin-right: 8px;
					font-size: 0.875em;
				}
			}

}
}
.entry-header {

.entry-title {
		text-align: center;
		margin-bottom: 15px;				
	}

}

.thumbnail-blog {

.wp-post-image {
		margin-bottom: ms(1);
		margin-left: auto;
		margin-right: auto;
	}

}

.hentry.type-post {

.wp-post-image {

margin-bottom: ms(1);
		margin-left: auto;
		margin-right: auto;

}

.entry-header {
		margin-bottom: ms(0);

.entry-title {
				text-align: center;
				margin-bottom: 0;
				
		}

.posted-on,
		.byline {
			font-size: ms(-1);

a {
				@include underlinedLink();
			}
		}
	}

.entry-meta {
		font-weight: 400;
		color: #334862;
		text-transform: uppercase;
		margin-bottom: ms(1);

a {
			opacity: 0.6;
		}

}

&.type-page {
		.entry-header {
			border-bottom: 0;
			margin-bottom: 0;
		}
	}
}

.hentry {
	&.type-page {
		.entry-header {
			border-bottom: 0;
			margin-bottom: 0;
		}
	}
}

.byline,
.updated:not(.published) {
	display: none;
}
.single, .group-blog {
	.byline {
		display: inline;
	}
}
.page-links {
	clear: both;
	margin: 0 0 ms(1);
}
.entry-meta {
	.author {
		display: inline-block;
		margin-right: ms(-2);

div {
			display: inline-block;
			margin-right: ms(-5);
		}
	}
}
 
.cat-links,
.tags-links{
	display: inline-block;
	margin-right: ms(-2);

div {
		display: inline-block;
		margin-right: ms(-5);
	}
}

.author {
	.avatar {
		width: 64px;
		margin-bottom: 1em;
	}
}

/**
 * Forms
 */
form {
	margin-bottom: ms(3);
}

button,
input,
select,
textarea {
	font-size: 100%; /* Corrects font size not being inherited in all browsers */
	margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
	vertical-align: baseline; /* Improves appearance and consistency in all browsers */
	*vertical-align: middle; /* Improves appearance and consistency in all browsers */
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.add_to_cart.button,
.button,
.added_to_cart {
	border: 0;
	background: none;
	background-color: $color_woocommerce;
	color: #fff;
	cursor: pointer;
	padding: 0 ms(2);
	height: 34px;
	line-height: 34px;
	text-decoration: none;
	font-weight: 400;
	text-shadow: none;
	display: inline-block;
	outline: none;
	-webkit-appearance: none;
	-webkit-font-smoothing: antialiased;
	border-radius: 0;
	-webkit-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	-ms-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	text-decoration: none;
	text-transform: uppercase;

&:hover {
		background-color: $color_woocommerce_hover;
		text-decoration: none;
	}

&.cta,
	&.alt {
		background-color: $color_links;
		border-color: $color_links;

&:hover {
			background-color: $color_links;
		}
	}

&:hover {
		color: #fff;
	}

&.added {
		&:after {
			@include fa-icon();
			content: "\f00c";
			margin-left: ms(-3);
		}
	}

&.loading {
		opacity: 0.5;
	}

&.small {
		padding: ms(-3) ms(-1);
		font-size: ms(-1);
	}

&.disabled,
	&:disabled {
		opacity: 0.5 !important;
		cursor: not-allowed;

&:hover {
			opacity: 0.5 !important;
			background-color: $color_woocommerce;
		}
	}
}

.add_to_cart.button {
	border-radius: 0 !important;
	padding: 0 !important;
	line-height: 34px !important;
}

input[type="checkbox"],
input[type="radio"] {
	padding: 0; /* Addresses excess padding in IE8/9 */
}

input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
	-webkit-appearance: none;
}

input[type="search"] {
	box-sizing: border-box; // Overrules normalize.css.
}

button::-moz-focus-inner,
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
	border: 0;
	padding: 0;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
.input-text {
	padding: 0 ms(-2);
	background-color: $body-background;
	color: $color_body;
	outline: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	font-weight: normal;
 	border: 1px solid #ddd;
 	height: 34px;
 	line-height: 34px;

&:focus {

}
}

textarea {
	overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
	padding-left: ms(-1);
	vertical-align: top; /* Improves readability and alignment in all browsers */
	width: 100%;
	min-height: 200px;
}

label {
	font-weight: 600;
}

label.inline {
	input {
		width: auto;
	}
}

fieldset {
	padding: 0;
	border: 0;
	margin-bottom: ms(3);

legend {
		font-weight: 700;
	}
}

[placeholder]:focus::-webkit-input-placeholder {
	-webkit-transition: opacity 0.5s 0.5s ease;
	-moz-transition: opacity 0.5s 0.5s ease;
	transition: opacity 0.5s 0.5s ease;
	opacity: 0;
}

/**
 * Media
 */
img {
	border-radius: 3px;
}

.page-content,
.entry-content,
.comment-content {
	img.wp-smiley {
		border: none;
		margin-bottom: 0;
		margin-top: 0;
		padding: 0;
		display: inline-block;
		border-radius: 0;
	}
}

/**
 * Captions
 */
.wp-caption {
	margin-bottom: ms(1);
	max-width: 100%;

img[class*="wp-image-"] {
		display: block;
		margin: 0 auto;
	}
	.wp-caption-text {
		text-align: left;
		font-style: italic;
		border-bottom: 2px solid $color_border;
		padding: 1em 0;
	}
}

/**
 * Galleries
 */
.gallery {
	@include clearfix;
	margin-bottom: ms(1);

.gallery-item {
		float: left;
		width: 100%;
		display: inline-block;
		box-sizing: border-box;
		margin: 0;
		padding: 1em 1.5em 0 0;
		vertical-align: top;
		text-align: center;

.gallery-icon {
			a {
				display: block;
			}

img {
				border: none;
				height: auto;
				margin: 0 auto;
			}
		}

.gallery-caption {
			margin: 0;
			text-align: center;
		}
	}

&.gallery-columns-1 {
		.gallery-item {
			max-width: 100%;
		}
	}

&.gallery-columns-2 {
		.gallery-item {
			max-width: 50%;
		}
	}

&.gallery-columns-3 {
		.gallery-item {
			max-width: 33.3%;
		}
	}

&.gallery-columns-4 {
		.gallery-item {
			max-width: 25%;
		}
	}

&.gallery-columns-5 {
		.gallery-item {
			max-width: 20%;
		}
	}

&.gallery-columns-6 {
		.gallery-item {
			max-width: 16.666666667%;
		}
	}

&.gallery-columns-7 {
		.gallery-item {
			max-width: 14.285714286%;
		}
	}

&.gallery-columns-8 {
		.gallery-item {
			width: 12.5%;
		}
	}

&.gallery-columns-9 {
		.gallery-item {
			width: 11.111111111%;
		}
	}
}

/**
 * Embeds
 */
embed,
iframe,
object,
video {
	max-width: 100%;
}

/**
 * Main Naivgation
 */

/**
 * General Menu Styles
 */
.secondary-navigation {
	display: none;
}

button.menu-toggle {
	background: none;;
	color: #333333;
	cursor: pointer;
	border: none;
	box-shadow: none;
	font-size: ms(-1);
	width: 40px;
	height: 40px;
	line-height: 40px;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;

&:hover {
		background: none !important;
		color: #333333;
	}
}

.cart-toggle {
	background: none;;
	color: #333333;
	cursor: pointer;
	border: none;
	box-shadow: none;
	font-size: ms(-1);
	width: 40px;
	height: 40px;
	line-height: 40px;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 9999;
	display: none;

&:hover {
		background: none !important;
		color: #333333;
	}
}

.toggled {
	button.menu-toggle {
		&:before,
		&:after {
			@include transform(translateY(0));
			@include transform(rotate(45deg));
		}

&:after {
			@include transform(rotate(-45deg));
		}

span:before {
			opacity: 0;
		}
	}
}

/**
 * Pagination
 */
.site-main nav.navigation {
	margin: 0 0 ms(1);
	@include clearfix;

.nav-previous,
	.nav-next {
		a {
			display: inline-block;
			@include transition(all,ease,.3s);
			padding: ms(-1) 1em;
			border-radius: 3px;
			color: $color_links;
			font-weight: 400;

}
	}

.nav-previous {
		float: left;
		width: 50%;

a {

&:before {
				@include fa-icon();
				content: "\f177";
				margin-right: ms(-3);
			}

}
	}

.nav-next {
		float: right;
		text-align: right;
		width: 50%;
		border-left: 1px solid #ececec;

a {
			&:after {
				@include fa-icon();
				content: "\f178";
				margin-left: ms(-3);
			}

}
	}

}

/**
 * Post Naivgation
 */
.site-main .post-navigation {
	width: 100%;
	float: left;
	border-top: 1px solid #ececec;
	border-bottom: 1px solid #ececec;
}

/**
 * Pagination
 */
.pagination,
.woocommerce-pagination {
	padding: 1em 0;
	border: 1px solid $color_border;
	border-width: 1px 0;
	text-align: center;
	clear: both;

.page-numbers {
		list-style: none;
		margin: 0;
		@include clearfix;

li {
			display: inline-block;

.page-numbers {
				display: inline-block;

&.prev,
				&.next {
					padding-left: 1em;
					padding-right: 1em;
				}
			}
		}
	}
}

.rtl {
	.pagination,
	.woocommerce-pagination {
		a.next,
		a.prev {
			transform: rotateY(180deg);
		}
	}
}

/**
 * Widgets
 */

.widget {
	margin: 0 0 ms(6);

select {
		max-width: 100%;
	}

.widget-search .search-submit {
		@include screen-reader-text();
	}

.widget-title,
	.widgettitle {
		color: #555555;
		font-size: ms(-0);
		letter-spacing: 0;
		padding: 0 0 0.7em;
    	margin-bottom: 1.5em;
		font-weight: 700;
		position: relative;
		text-transform: uppercase;

&:before {
			background-color: $color_gray30;
			content: '';
			width: 70px;
			height: 3px;
			display: block;
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}

ul {
		margin-left: 0;
		list-style: none;

ul {
			margin-left: ms(3);
		}
		ul.children {
			display: none;
			border-left: 1px solid #ddd;
			width: 100%;
			padding-left: 15px;			
		}
		li {
			position: relative;

.toggle {
					width: 1em;
				   	min-height: 1em;
					font-size: 1.2em;
					height: auto;
					box-shadow: none !important;
					padding: 0;
					color: currentColor;
					opacity: .6;
					margin: 0;
					text-align: center;
					display: inline-block;
					line-height: 33px;
					position: absolute;
					top: -8px;
					right: 0;
					@include transition(all, 0.3s);

&:hover {
						opacity: 1;
						cursor: pointer;
					}

i {
							font-size: ms(-1);
						   @include transition(all, 0.3s);	
					}
				}

li {
						padding: 6px 0;
				}

}

li.current-cat {
			> a {
				color: #ff6600;
			}
		}
		li.current-cat-ancestor {
			> a {
				color: #ff6600;
			}
		}
		li.current-cat-parent {
			> a {
				color: #ff6600;
			}
		
		}
		li.active {			
			> ul.children {
				display: block;
			
			}
				
			> .toggle {
				
				@include transform(rotate(-180deg));
				
				> i {
					&:before {
						content: '\f068';
					}
				}
				
			}
		}
	}

.tagcloud {

a {
			-webkit-transition: .3s ease-in-out;
			-moz-transition: .3s ease-in-out;
			-ms-transition: .3s ease-in-out;
			transition: .3s ease-in-out;
			border: 2px solid $color_whitesmoke;
			color: $color_gray40;
			font-size: ms(-1) !important;
			padding: 3px ms(-1);
			display: inline-block;
			margin: 0 3px 8px 0;
			text-decoration: none;

&:hover {
				background-color: $color_woocommerce_hover;
				border-color: $color_woocommerce_hover;
				color: $color_white;
				text-decoration: none;
			}
		}
	}
}

.widget-area {
	.widget {
		font-weight: 300;

a.button {
			font-weight: 700 !important;
			color: #fff;

&:hover {
				color: #fff;
			}
		}
	}
}

.header-widget-region {
	@include clearfix;

.widget {
		margin: 0;
		padding: 1em 0;
		font-size: ms(-1);
	}
}

.widget_search,
.widget_product_search {
	form {
		position: relative;

input[type=text],
		input[type=search] {
			width: 100%;
			padding-left: ms(5);
		}

input[type=submit] {
			@include screen-reader-text();
			top: 0;
			left: 0;
		}

&:before {
			@include fa-icon();
			content: "\f002";
			position: absolute;
			top: 0.750em;
			left: 1em;
		}
	}
}

.widget_recent_entries,
.widget_pages,
.widget_categories,
.widget_archive,
.widget_recent_comments,
.widget_nav_menu,
.widget_links {
	> ul {
		margin: 0;

> li {
			list-style: none;
			margin-bottom: ms(-2);
			padding-bottom: ms(-2);
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);

&:before {
				font-family: "FontAwesome";
				margin-right: ms(-3);
				display: inline-block;
				opacity: 0.5;
			}
		}

.sub-menu {
			margin-top: ms(-2);
			margin-left: ms(3);
		}
	}
}

.widget-area,
.footer-widgets {
	#wp-calendar {
		th,
		td {
			padding: .236em;
			text-align: center;
		}
	}
}

.widget_recent_entries,
.widget_pages {
	ul {

ul.children {
			margin: ms(-2) 0 0 ms(2);
		}
	}
}

.widget_categories {
	ul {
		li {
			ul.children {
				margin: 10px 0 0px 3px;
			}

}
	}
}

.widget_archive {
	ul {
		li {
		
		}
	}
}

.widget_recent_comments {
	ul {
		li {
			&:before {
				content: "\f105";
			}
		}
	}
}

.widget_nav_menu {
	ul.menu {
		> li {
			list-style: none;
			margin-bottom: ms(-2);
			padding-bottom: ms(-2);
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
			
			.sub-menu {
				display: none;
				border-left: 1px solid #ddd;
				width: 100%;
				padding-left: 15px;
				margin: 10px 0 0px 3px;
			}
			
		}
		li.current-menu-item  {
			> a {
				color: $color_woocommerce;
			}
			
		}
		li.current-menu-ancestor {
			 > a {
			 	color: $color_woocommerce;
			 }
		
		
			
		}
		li.active {
			> .sub-menu {
				display: block;
			}

> .toggle {
			> i {
				&:before {
				content: '\f068';
			}
			}
		 }
		}
	}
}

.widget_links {
	ul {
		li {
			&:before {
				content: "\f105";
			}
		}
	}
}

.widget_rating_filter {
	.wc-layered-nav-rating  {
		margin-bottom: ms(-2);

a {
			text-decoration: none !important;
		}

.star-rating {
			display: inline-block;
		}
	}
}

.widget-area {
	.widget {
		font-size: ms(-1);

h1.widget-title {
			font-size: ms(2);
		}

}
	.widget_categories {
		> ul {
			> li {
				> a {
					display: inline-block;
				}
			}

}
	
	}
}

/* Page Title */
.page-header {
	.page-title {
		text-align: center;
		font-weight: 300;
		text-transform: capitalize;
	}
}

/* Back To Top */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 40px;
    z-index: 9;
    cursor: pointer;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: none;
    color: #fff;
    font-size: 16px;
    background-color: $color_woocommerce;
    @include transition(background 0.25s linear);

&:hover {
    	background: $color_woocommerce_hover;
    }

}
/*--------------------------------------------------------------
20.0 Print
--------------------------------------------------------------*/

@media print {

/* Hide elements */

form,
	button,
	input,
	select,
	textarea,
	.navigation-top,
	.social-navigation,
	#secondary,
	.content-bottom-widgets,
	.header-image,
	.panel-image-prop,
	.icon-thumb-tack,
	.page-links,
	.edit-link,
	.post-navigation,
	.pagination.navigation,
	.comments-pagination,
	.comment-respond,
	.comment-edit-link,
	.comment-reply-link,
	.comment-metadata .edit-link,
	.pingback .edit-link,
	.site-footer aside.widget-area,
	.site-footer .col-full,
	.content-area .entry-footer,
	.site-info,
	.no-comments {
		display: none !important;
	}

.entry-footer,
	#comments,
	.site-footer,
	.single-featured-image-header {
		border: 0;
	}

/* Font sizes */

body {
		font-size: 12pt;
	}

h1 {
		font-size: 24pt;
	}

h2 {
		font-size: 22pt;
	}

h3 {
		font-size: 17pt;
	}

h4 {
		font-size: 12pt;
	}

h5 {
		font-size: 11pt;
	}

h6 {
		font-size: 12pt;
	}

.page .panel-content .entry-title,
	.page-title {
		font-size: 10pt;
	}

/* Layout */

.col-full {
		padding-left: 2% !important;
		padding-right: 2% !important;
		max-width: none;
	}

/* Site Branding */

.site-header {
		background: transparent;
		padding: 0;
	}

.custom-header-media {
		padding: 0;
	}

.site-branding {
		margin-top: 0;
		margin-bottom: 1.75em !important; /* override styles added by JavaScript */
	}

.site-title {
		font-size: 25pt;
	}

.site-description {
		font-size: 12pt;
		opacity: 1;
	}

/* Menu */
	button.menu-toggle {
		display: none;
	}
	/* Posts */

.single-featured-image-header {
		background: transparent;
	}

.entry-meta {
		font-size: 9pt;
	}

/* breadcrumb */
	.woocommerce-breadcrumb {
	 	display: none;
	 }

/* Colors */

body,
	.site {
		background: none !important; /* Brute force since user agents all print differently. */
	}

body,
	a,
	.site-title a {
		color: #222 !important; /* Make sure color schemes don't affect to print */
	}

h2,
	h5,
	blockquote,
	.site-description,
	.entry-meta,
	.entry-meta a {
		color: #777 !important; /* Make sure color schemes don't affect to print */
	}

.entry-content blockquote.alignleft,
	.entry-content blockquote.alignright {
		font-size: 11pt;
		width: 34%;
	}

.site-footer {
		padding: 0;
	}
}

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: _base.scss

Server Info

System Features

User Info