/* Variables
------------------------------------------------------------------
{
Color: [
{
value: 'light',
sample: '#8496b3',
background: '#ffffff',
primary: '#415161',
secondary: '#8496b3',
link: '#546270',
ahover: '#6c8095',
navlink: '#b5c0d1',
bannerBg: '#f9fafb',
border1: '#e6e9eb',
border2: '#b5c0d1',
btnNormal: '#ffffff',
btnHover: '#415161',
btnHL: '#ffffff',
btnHHover: '#727f97',
easeBezFast: 'all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53)',
easeBezMedium: 'all 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53)',
easeBezSlow: 'all 600ms cubic-bezier(0.55, 0.085, 0.68, 0.53)',
easeLinFast: 'all 150ms linear',
easeLinMedium: 'all 300ms linear',
easeLinSlow: 'all 600ms linear'
},
{
value: 'dark',
sample: '#222930',
background: '#222930',
primary: '#ffffff',
secondary: '#8496b3',
link: '#8496b3',
ahover: '#99afd1',
navlink: '#8496b3',
bannerBg: '#29333d',
border1: '#394250',
border2: '#8496b3',
btnNormal: '#222930',
btnHover: '#ffffff',
btnHL: '#222930',
btnHHover: '#727f97',
easeBezFast: 'all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53)',
easeBezMedium: 'all 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53)',
easeBezSlow: 'all 600ms cubic-bezier(0.55, 0.085, 0.68, 0.53)',
easeLinFast: 'all 150ms linear',
easeLinMedium: 'all 300ms linear',
easeLinSlow: 'all 600ms linear'
}
]
}
------------------------------------------------------------------
*/
/* Resets
--------------------------------------------------------------------------------*/
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input, iframe, img {
margin: 0;
padding: 0;
font-size:100%;
border:0;
}
a img {
border: 0;
}
input:focus, select:focus, textarea:focus, button:focus {
outline: none;
}
/* General
--------------------------------------------------------------------------------*/
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
font: 16px/1 'Montserrat', sans-serif;
background: $background;
color: $primary;
-webkit-font-smoothing: antialiased;
}
.body-wrap {
width: 100%;
min-height: 100%;
background: $background;
}
body.full-width-off {
background: $bannerBg;
}
body.full-width-off .body-wrap,
body.full-width-off.splash-page #header-wrap {
max-width: 1100px;
margin: 0 auto;
border-left: 1px solid $border1;
border-right: 1px solid $border1;
}
.container {
margin: 0 auto;
max-width: 1024px;
}
#header-wrap,
#banner-wrap,
#main-wrap,
#footer-wrap {
width:100%;
}
.wrapper {
display: block;
position: relative;
left: 0;
z-index: 1;
-webkit-transition: $easeBezFast;
-moz-transition: $easeBezFast;
-o-transition: $easeBezFast;
transition: $easeBezFast;
}
a {
color: $link;
text-decoration: none;
outline: 0;
-webkit-transition: $easeBezFast;
-moz-transition: $easeBezFast;
-o-transition: $easeBezFast;
transition: $easeBezFast;
}
a:hover {
color: $ahover;
text-decoration: none;
}
.paragraph a {
border-bottom: 1px solid $border1;
}
h2 {
font-size: 1.5em;
margin: 0 auto 1em;
}
p, .paragraph, div.paragraph {
line-height: 1.75;
margin: 0 auto 2em;
}
blockquote {
background: $secondary;
font-size: 1.25em;
font-style:normal !important;
line-height: 1.75em;
color: $background;
padding: 1.5em 2em !important;
margin: 2em auto;
border-left: 0px !important;
}
/* Header
--------------------------------------------------------------------------------*/
#header-wrap {
text-align: center;
background: $background;
z-index:13;
-webkit-transition: $easeBezFast;
-moz-transition: $easeBezFast;
-o-transition: $easeBezFast;
transition: $easeBezFast;
}
#logo {
font-size: 2.75em;
font-weight: bold;
color: $primary;
text-transform: uppercase;
text-align: center;
padding: 1em 0 .5em;
}
#logo img {
max-height: 200px;
max-width: 100%;
margin: 0 !important;
}
/* Navigation
--------------------------------------------------------------------------------*/
#nav {
position: relative;
width: 100%;
overflow: hidden;
background: $background;
border-bottom:1px solid $border1;
}
#nav ul, #nav ul li {
list-style: none;
text-align:center;
}
#nav ul li {
display:inline-block;
}
#nav ul span:last-child li,
#nav ul > li:last-child {
background: none;
}
#nav ul li a {
display: block;
color: $navlink;
padding: 1em .75em;
font-size: 1.15em;
}
#nav ul li#active a,
#nav ul li a:hover {
color: $primary;
}
.stuck {
position: fixed !important;
top: 0;
left: 0;
z-index: 13;
}
body.full-width-off .stuck {
max-width: 1100px;
left: auto;
}
/* Navigation Submenu's
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu-wrap {
font-size: inherit;
}
#wsite-menus .wsite-menu li a {
font-size: 1em;
color: $navlink;
background: $background;
border: 0;
}
#wsite-menus .wsite-menu li a:hover {
color: $primary;
background: $bannerBg;
}
#wsite-menus .wsite-menu-arrow {
display: none;
}
#wsite-menus .wsite-menu {
border: 1px solid $border1;
}
/* Mobile Elements
--------------------------------------------------------------------------------*/
/* Nav */
.nav-trigger {
display: none;
cursor: pointer;
}
.mobile-wrap {
display: none;
-webkit-transition: $easeBezFast;
-moz-transition: $easeBezFast;
-o-transition: $easeBezFast;
transition: $easeBezFast;
}
input.nav-trigger,
input.nav-trigger-close{
display: none;
}
/* Banner General
--------------------------------------------------------------------------------*/
#banner-wrap {
display: table;
background: $bannerBg;
border-bottom:1px solid $border1;
text-align:center;
}
#banner-wrap .banner {
display: table-cell;
vertical-align: middle;
padding: 1.75em;
}
#banner-wrap .container {
max-width: 700px;
}
#banner-wrap h2 {
font-size: 2em;
margin: 0 auto;
}
#banner-wrap p {
color: $secondary;
font-size: 1.15em;
margin: 0 auto;
}
#banner-wrap h2 + p {
font-size: 1.15em;
margin: 2em auto 0;
}
#banner-wrap .button-wrap {
margin: 0 auto;
}
#banner-wrap h2 + .button-wrap, #banner-wrap p + .button-wrap {
margin: 2.5em auto 0;
}
#banner-wrap .button-wrap {
display: inline-block;
text-align: center !important;
}
/* Page type: Landing page
--------------------------------------------------------------------------------*/
.landing-page #banner-wrap {
height: 400px;
}
/* Page type: Tall header
--------------------------------------------------------------------------------*/
.tall-header-page .wsite-background {
width: 100%;
height: 375px;
background: url(default-bg.jpg) no-repeat center center;
background-size:cover;
}
/* Page type: Short header
--------------------------------------------------------------------------------*/
.short-header-page .wsite-background {
width: 100%;
height: 250px;
background: url(default-bg.jpg) no-repeat center center;
background-size:cover;
}
/* Page type: No header
--------------------------------------------------------------------------------*/
.splash-page #header-wrap,
.title-page #banner-wrap {
border-bottom:1px solid $border1;
}
/* Page type: Title Page
--------------------------------------------------------------------------------*/
.title-page #banner-wrap {
background: $bannerBg;
height: 250px;
}
/* Splash Content
--------------------------------------------------------------------------------*/
.splash-page .wsite-background {
background: url(default-bg.jpg) no-repeat center center;
background-size:cover;
}
.splash-page .body-wrap {
height: 100%;
background: none;
}
.splash-page #wrapper {
overflow: hidden;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.splash-page #header-wrap {
position: fixed;
}
#wrapper-inner {
display: table;
width: 100%;
height: 100%;
max-width: 900px;
text-align: center;
margin: 0 auto;
}
.splash-container {
margin: auto;
vertical-align: middle;
display: table-cell;
}
#splash-wrap {
text-align: center;
background: $background;
-webkit-box-shadow: 0 10px 30px rgba(0,0,0,.1);
-moz-box-shadow: 0 10px 30px rgba(0,0,0,.1);
box-shadow: 0 10px 30px rgba(0,0,0,.1);
overflow:hidden;
}
.splash-page #nav {
padding: 0 1em;
box-sizing: border-box;
}
.splash-page #footer-wrap {
display:none;
}
/* Main Content
--------------------------------------------------------------------------------*/
#main-wrap {
background: $background;
}
#main-wrap .container {
padding: 3em 3em 5em;
}
/* Footer
--------------------------------------------------------------------------------*/
#footer-wrap {
border-top:1px solid $border1;
color:$primary;
font-size: .85em;
}
.wsite-footer {
padding: 3em 0;
}
.wsite-footer h2 {
font-size: 1.25em;
}
#footer-wrap .container > div {
top: auto !important;
}
/* Form Customization
--------------------------------------------------------------------------------*/
.wsite-form-label {
display: block;
font-size: 1em !important;
padding: 0 0 10px !important;
}
.wsite-form-input-container, .wsite-form-radio-container {
margin-bottom: 25px;
}
.wsite-form-input,
.wsite-search-element-input,
.wsite-form-field select,
.wsite-com-product-option select,
.commentInput input,
.commentTextarea textarea {
color: $btnHHover !important;
background: transparent !important;
border: 1px solid $border2 !important;
padding: 10px !important;
min-height: 40px !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
box-sizing:border-box;
-webkit-transition: $easeBezFast;
-moz-transition: $easeBezFast;
-o-transition: $easeBezFast;
-ms-transition: $easeBezFast;
transition: $easeBezFast;
}
.wsite-form-input:focus, .wsite-search-element-input:focus, .commentInput input:focus,.commentTextarea textarea:focus {
border: 1px solid $primary !important;
}
.wsite-form-container .form-input-error {
border: 1px solid #e96c6c !important;
}
.form-field-error .wsite-form-radio-container {
border: none;
}
/* Dropdowns */
.wsite-form-field select,
.wsite-com-product-option select {
border-radius: 0;
height: 40px !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
}
.wsite-form-field select,
.wsite-com-product-option select {
background: url(select-arrow.png) no-repeat 97% center !important;
}
/* Checkboxes and Radio buttons */
.wsite-com-product-option-label {
margin-bottom: .5em;
}
.wsite-form-sublabel {
margin: 5px 0 -10px;
}
.wsite-com-product-option-label input, .form-radio-container input {
display: none !important;
}
.wsite-com-product-option-label input[type="radio"] + span:before, .form-radio-container label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 5px;
vertical-align: middle;
border: 1px solid $border2;
-webkit-transition: $easeBezFast;
-moz-transition: $easeBezFast;
-o-transition: $easeBezFast;
-ms-transition: $easeBezFast;
transition: $easeBezFast;
}
.wsite-com-product-option-label input[type="radio"] + span:before,
.form-radio-container input[type="radio"] ~ label:before {
border-radius: 100%;
-webkit-box-shadow: inset 0px 0px 0px 4px $background;
-moz-box-shadow: inset 0px 0px 0px 4px $background;
box-shadow: inset 0px 0px 0px 4px $background;
}
.wsite-com-product-option-label input[type="radio"]:checked + span:before,
.form-radio-container input[type="radio"]:checked ~ label:before {
background: $primary;
border: 1px solid $primary;
}
.form-radio-container input[type="checkbox"]:checked ~ label:before {
background: url($Color-checkbox.png) no-repeat center center /contain;
border: 1px solid $primary;
}
#wsite-com-checkout-list .wsite-form-input, #wsite-com-checkout-summary-list .wsite-form-input {
min-width: 50px !important;
}
.wsite-com-continue-shopping .caret {
line-height: 1.25;
}
/* Buttons
--------------------------------------------------------------------------------*/
/* Small structure & regular style */
.wsite-button-inner,
.wsite-button,
.blog-button span {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 400;
background: none;
border: none;
background: transparent !important;
background-image: none !important;
}
.wsite-button .wsite-button-inner, .blog-button {
display: inline-block;
height: auto !important;
padding: 4px 27px !important;
background: transparent;
color: $btnHHover !important;
border: 1px solid $btnHHover !important;
transition: all 0.5s ease;
}
.wsite-button:hover .wsite-button-inner {
background: $btnHHover !important;
color: $btnNormal !important;
}
/* Large structure & regular style */
.wsite-button-large .wsite-button-inner {
padding: 2px 57px !important;
}
/* Highlighted styles */
.wsite-button-highlight .wsite-button-inner {
background: $btnHover !important;
color: $btnNormal !important;
border: 1px solid $btnHover !important;
}
.wsite-button-highlight:hover .wsite-button-inner {
background: transparent !important;
color: $btnHover !important;
border: 1px solid $btnHover !important;
}
/* Social Links
--------------------------------------------------------------------------------*/
.wsite-social {
white-space: normal;
}
.wsite-social-item {
display: inline-block;
margin: 0 5px 5px;
}
/* Search Results
--------------------------------------------------------------------------------*/
#wsite-search-header {
border: none !important;
}
/* Gallery
--------------------------------------------------------------------------------*/
.imageGallery .galleryCaptionInnerText p, .imageGallery .galleryCaptionInnerText {
font-family: 'Montserrat Alternates', sans-serif;
font-weight:700;
}
.galleryCaptionHolderInnerBg {
opacity: 0.2;
}
.fancybox-close{
border-bottom:none;
}
.fancybox-overlay {
background: $background !important;
}
.fancybox-title {
color: $primary;
}
.fancybox-skin {
border-radius: 0 !important;
}
#fancybox-thumbs ul li a {
border: none;
}
.fancybox-skin {
background: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
text-align: center;
}
.touch .fancybox-nav {
display: none !important;
}
/* Store
--------------------------------------------------------------------------------*/
#wsite-com-breadcrumbs {
font-size: .85em;
}
#wsite-com-store #wsite-com-hierarchy ul {
font-size: 1em;
}
#close {
display: none;
}
.wsite-selected a {
color: $navlink;
}
.wsite-com-category-product-image-wrap, .wsite-com-category-product-featured-image-wrap, .wsite-com-category-subcategory-image-wrap {
border: none;
}
#wsite-com-product-info-inner * {
border-color: $border1 !important;
}
.wsite-product {
box-shadow: none !important;
background: none !important;
border: none !important;
}
/* Blog
--------------------------------------------------------------------------------*/
.blog-post .blog-date {
padding-top: 4px !important;
}
.blog-title a {
display: block;
margin: 0 auto .25em !important;
}
.blog-title a {
text-decoration: none;
border-bottom: none;
}
.blog-separator {
border-bottom: 1px solid $border1 !important;
}
.blog-comments a {
text-decoration: none;
background: url(icon-bubble.png) no-repeat;
padding-left: 25px;
line-height: 20px;
display: inline-block;
border-bottom: none;
}
.blog-post .blog-separator {
margin-bottom: 1em;
font-size: inherit;
}
.blog-sidebar {
width: 250px;
}
.blogCommentReplyWrapper iframe {
height: 470px !important;
}
.blogCommentHeading .blogCommentAuthor span.name,
.blogCommentHeading .blogCommentAuthor a.name,
.blogCommentHeading .blogCommentDate,
.blogCommentText p {
color: $primary !important;
}
/* Tablet layout
--------------------------------------------------------------------------------*/
@media (max-width:1024px) {
/* General
--------------------------*/
body {
font-size: 15px;
-webkit-overflow-scrolling: touch;
}
.body-wrap {
overflow-x: hidden;
}
.container{
width: auto;
padding: 0 !important;
}
.wrapper,
#header-wrap,
#main-wrap,
#footer-wrap,
#nav {
box-sizing:border-box;
}
.wrapper{
box-shadow: 0 1px 10px rgba(171, 171, 171, 0.35);
/* iPhone 6 Plus bug fix */
border-radius:1px;
width: 100%;
min-height: 100%;
}
#main-wrap{
padding: 40px;
}
p, .paragraph {
line-height: 1.5 !important;
}
h2 {
font-size: 1.75em !important;
}
font {
font-size: 100% !important;
}
/* Footer
--------------------------*/
.wsite-footer {
padding: 40px;
}
/* Banner
--------------------------*/
.landing-page #banner-wrap {
height: 350px;
}
.tall-header-page .wsite-background {
height: 300px;
}
.short-header-page .wsite-background, .title-page #banner-wrap {
height: 225px;
}
.splash-page .sticky-wrapper {
height: auto !important;
}
.splash-page .mobile-wrap {
background: $background;
top: 0 ;
}
body.splash-page.menu-open .mobile-wrap {
left: 0;
}
.splash-page #wrapper-inner {
width: 100%;
padding: 0 50px;
box-sizing: border-box;
}
/* Header
--------------------------*/
#logo {
font-size: 2.25em;
}
#logo img {
max-height: 125px;
}
.wsite-logo {
vertical-align:middle;
line-height:1em;
}
.wsite-logo #wsite-title {
font-size: 1em !important;
line-height: 1 !important;
}
#header-wrap {
border-bottom:1px solid $border1;
top: 0 !important;
left: 0;
display: table;
}
#header-wrap .nav-trigger,
#header-wrap #logo {
display: table-cell;
vertical-align: middle;
}
#header-wrap .nav-trigger {
padding-left: 40px;
}
#header-wrap #logo {
width: 100%;
padding: 20px 80px 20px 20px;
box-sizing: border-box;
}
/* Nav
--------------------------*/
#nav {
display: none;
}
.mobile-wrap {
display: block;
}
.nav-trigger {
padding: 10px;
}
body.menu-open .wrapper,
body.menu-open .wrapper #header-wrap {
left: 350px;
}
body.menu-open .mobile-wrap {
left: 0;
}
body.menu-open #wsite-mini-cart {
bottom: -70px;
}
.nav-trigger span.mobile {
display: block;
height: 2px;
width: 20px;
position: relative;
margin: 0 auto 5px;
background: $primary;
}
.nav-trigger span.mobile:last-child{
margin-bottom: 0;
}
.mobile-wrap {
position: fixed;
top: 0;
left: -350px;
width: 350px;
height: 100%;
padding: 2em 1.5em;
overflow-y: auto;
z-index: 0;
box-sizing: border-box;
}
.mobile-wrap .nav-trigger {
margin-left: 20px;
}
#navmobile ul li a {
padding: 6px 0;
font-size: 1.25em !important;
display: inline-block;
}
.wsite-mobile-menu a {
color: $navlink;
}
.wsite-mobile-menu #active a, .wsite-mobile-menu a:focus {
color: $link;
}
.wsite-menu-mobile-arrow {
display: inline-block !important;
font-size: inherit !important;
padding: 0 5px
}
.wsite-menu-mobile-arrow:before {
display: inline-block;
content: '\203A';
vertical-align: bottom
}
.wsite-menu-back-item .wsite-menu-mobile-arrow:before {
content:'\2039'
}
.wsite-menu-arrow{
display: none;
}
.wsite-menu-default,
.wsite-menu {
list-style-type: none;
}
.wsite-menu-default a,
.wsite-menu-back-item a,
.wsite-menu a {
cursor: pointer;
}
/* Transform menu button */
body.menu-open .wrapper .mobile:first-child{
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
top: 3px;
}
body.menu-open .wrapper .mobile:nth-child(2) {
display: none;
}
body.menu-open .wrapper .mobile:last-child{
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
top:-4px;
}
/* Blog
--------------------------*/
.blog-sidebar-separator{
padding:0;
}
.blog-post .blog-header,
#wsite-content .blog-post .blog-header h2.blog-title,
.blog-post .blog-header div a{
padding: 0 0 10px !important;
line-height: 1.3em !important;
font-size: 1.3em;
display: block;
}
/* Products
--------------------------*/
.wsite-com-content{
padding: 0;
}
/* Cart
--------------------------*/
#wsite-mini-cart .wsite-product-image{
padding: 5px !important;
}
/* Search
--------------------------*/
#wsite-search-header h2 {
font-size: 1.25em;
margin-top: 8px;
}
input#wsite-search-query {
font-size: 1em;
}
#wsite-search-submit {
border-radius: 0;
}
#wsite-search-list h3 {
font-size: 1.5em;
}
/* Category
--------------------------*/
#wsite-com-store #wsite-com-hierarchy ul .wsite-com-link-text {
padding: .25em 0;
}
.wsite-com-column-group.wsite-com-category-product-featured-group .wsite-com-column,
#wsite-com-store .wsite-com-category-product-group .wsite-com-column {
width: 50% !important;
}
/* Footer
--------------------------*/
.footer-full {
padding-bottom: 70px !important;
}
/* Cart
--------------------------*/
#wsite-mini-cart.arrow-top:after,
#wsite-mini-cart.arrow-top:before {
border: none !important;
}
#wsite-mini-cart{
background: $background !important;
color: $primary !important;
box-shadow: none !important;
z-index: 1 !important;
position: fixed !important;
bottom: 0;
top: auto !important;
width: 100%;
box-sizing: border-box;
border: none !important;
border-top: 1px solid $border1 !important;;
border-radius: 0 !important;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#wsite-mini-cart.full{
display: block !important;
}
#wsite-mini-cart .wsite-product-list{
display: none;
}
.wsite-cart-bottom {
color: inherit !important;
}
/* Checkout
--------------------------*/
#wsite-com-checkout-list .wsite-remove-button, #wsite-com-checkout-summary-list .wsite-remove-button {
left: 0;
margin-left: 0;
}
#wsite-com-checkout-list tbody .wsite-form-input {
max-width: 70px;
}
}
/* Mobile Layout
--------------------------------------------------------------------------------*/
@media (max-width:767px) {
/* General
--------------------------*/
body {
font-size: 14px;
}
#main-wrap {
padding: 20px;
}
.wsite-footer {
padding: 20px 30px;
}
/* Columns
--------------------------*/
.wsite-multicol-col {
width: 100% !important;
display: block;
padding: 0 !important;
margin: 0 auto 1em !important;
}
.wsite-multicol-table-wrap {
margin: 0 !important;
}
/* Header
--------------------------*/
#logo {
font-size: 1.4em;
}
#logo img {
max-height: 75px;
}
#header-wrap #logo {
padding: 10px 70px 10px 20px;
}
#header-wrap .nav-trigger {
padding-left: 20px;
}
/* Nav
--------------------------*/
body.menu-open .wrapper,
body.menu-open .wrapper #header-wrap {
left: 275px;
}
.mobile-wrap {
left: -275px;
width: 275px;
}
/* Page Type
--------------------------*/
.landing-page #banner-wrap {
height: 275px;
}
.tall-header-page .wsite-background {
height: 225px;
}
.short-header-page .wsite-background {
height: 150px;
}
.title-page #banner-wrap {
background: $bannerBg;
height: 250px;
padding: 0 1em;
box-sizing: border-box;
}
.no-header-page #header-wrap,
.splash-page #header-wrap {
border-bottom:1px solid $border1;
}
.splash-page #wrapper-inner {
padding: 0 20px;
}
/* Buttons
--------------------------*/
.wsite-button-inner{
font-size: 1em;
}
.wsite-button-large .wsite-button-inner{
padding: 2px 40px;
}
/* Blog
--------------------------*/
#blogTable td {
width: 100%;
display: block;
}
.column-blog {
width: 100%;
}
.imgPusher + span a {
display: inline-block;
}
img.galleryImageBorder.wsite-image {
width: 100%;
box-sizing: border-box;
}
.blog-content span {
width:100%!important;
}
div.blog-post-separator {
display: none;
}
/* Gallery
--------------------------*/
.imageGallery .galleryCaptionInnerText p,
.imageGallery .galleryCaptionInnerText{
font-size:0.8em;
line-height: 1;
}
.galleryCaptionHolder {
display:none;
}
.fullwidth-mobile .galleryCaptionHolder{
display:block;
}
.fullwidth-mobile{
width:100% !important;
}
.fullwidth-mobile > div{
margin: 5px 0 !important;
}
.wsite-image{
margin-right: 0 !important;
}
.wsite-image > a, .cloud-zoom, .imgPusher + span a{
display: block;
}
/* Forms
--------------------------*/
.wsite-name-field .wsite-form-input-last-name,
.wsite-name-field .wsite-form-input-first-name{
width: 100%;
}
.wsite-form-field{
max-width: none;
}
/* Search
--------------------------*/
#wsite-search-list p{
font-size: 1em;
}
#wsite-search-header h2{
font-size: 1em;
margin-top: 11px;
}
input#wsite-search-query{
font-size: 1em;
}
#wsite-search-list h3{
font-size: 1.2em;
}
#wsite-search-results, #wsite-search-sidebar {
padding: 0 !important;
width: 100% !important;
float: none !important;
}
#wsite-search-product-results .wsite-search-product-result {
width: 50% !important;
}
#wsite-search-product-results .wsite-search-product-image-container {
height: 150px !important;
}
/* Storefront
---------------------------------------*/
#wsite-com-store .wsite-com-category-subcategory-group .wsite-com-column,
#wsite-com-store .wsite-com-category-product-featured-group .wsite-com-column,
#wsite-com-store .wsite-com-category-product-group .wsite-com-column {
width: 50% !important;
}
/* Product Page
--------------------------*/
#wsite-com-product-images {
width: 100%;
margin-bottom: 20px;
}
#wsite-com-product-info {
margin-left: 0 !important;
margin-top: 1em;
}
/* Checkout
--------------------------*/
#wsite-com-checkout-list .wsite-remove-button, #wsite-com-checkout-summary-list .wsite-remove-button {
display: block;
margin: 5px auto 0;
left: auto;
top: auto;
}
.wsite-com-continue-shopping .caret, #wsite-com-checkout-list, #wsite-com-checkout-summary-list {
line-height: 2em;
}
#wsite-com-checkout-list .wsite-form-input, #wsite-com-checkout-summary-list .wsite-form-input {
min-height: 0 !important;
padding: 5px !important;
}
#wsite-com-checkout-list .wsite-form-input:not(.wsite-coupon-input), #wsite-com-checkout-summary-list .wsite-form-input:not(.wsite-coupon-input) {
width: 40px !important;
min-width: 0 !important;
}
#wsite-com-checkout-list .wsite-coupon-input,
#wsite-com-checkout-summary-list .wsite-coupon-input {
width: 120px;
}
#wsite-com-checkout-list .wsite-com-checkout-item-image, #wsite-com-checkout-summary-list .wsite-com-checkout-item-image {
width: 50px !important;
height: 50px !important;
}
#wsite-com-checkout-cart-footer {
text-align: center;
}
h2.wsite-checkout-header {
padding-bottom: 0 !important;
}
.wsite-com-continue-shopping .caret, #wsite-com-checkout-list, #wsite-com-checkout-summary-list {
font-size: .65em !important;
}
#wsite-com-checkout-cart .wsite-com-paypal-checkout {
float: none !important;
}
#wsite-com-checkout .wsite-checkout-button {
padding: 1em 1.5em !important;
}
#wsite-mini-cart .wsite-subtotal-wrapper, .wsite-product-list .wsite-product-description, .wsite-name-header, .wsite-product-price {
color: inherit !important;
font-size: 1em !important;
line-height: 1.2 !important;
}
/* Stripe Checkout Page
---------------------------------------*/
.wsite-com-checkout-payment-column,
.wsite-com-checkout-summary-column {
display: block !important;
width: auto !important;
max-width: 100% !important;
margin: 0 auto 1em !important;
}
#wsite-com-checkout-cart-footer {
text-align: center;
}
.wsite-com-continue-shopping {
display: block;
margin: 0 auto 5px;
}
#wsite-com-checkout-cart-footer form {
float: none !important;
}
.wsite-com-continue-shopping .caret {
vertical-align: middle;
}
#wsite-com-checkout-payment-order {
margin-left: 0;
}
/* Categories
--------------------------*/
.wsite-com-content{
width:100%;
margin-left:0;
}
.wsite-com-category-subcategory-name-text{
font-size:0.8em;
}
#wsite-com-product-list{
padding-top:20px;
}
/* Category Dropdown
--------------------------*/
#wsite-com-store .wsite-com-sidebar{
width: 100%;
float: none !important;
padding: 0 !important;
text-align: center;
position: relative;
z-index: 11;
margin: 0 auto 15px;
cursor: pointer;
min-height: 40px;
}
#wsite-com-store .wsite-com-sidebar::after {
/*display: inline-block;*/
position: absolute;
top: 0;
content: 'VIEW ALL CATEGORIES \25be';
padding: 0;
text-align: center;
/*font-family: 'Maven Pro', Helvetica, sans-serif;*/
font-weight: 900 !important;
text-transform: uppercase;
color: white;
background: $secondary;
clear: both;
width:100%;
padding:10px 18px;
display:block;
z-index: 10;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition: all 120ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
-moz-transition: all 120ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
-o-transition: all 120ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
-ms-transition: all 120ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
transition: all 120ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
#wsite-com-store .sidebar-expanded::after {
display: none;
}
#wsite-com-store .sidebar-expanded {
cursor: default !important;
}
#wsite-com-store .wsite-com-content-with-sidebar {
margin-left: 0 !important;
padding: 0 !important;
}
#wsite-com-store .wsite-com-sidebar #wsite-com-hierarchy > ul {
top: 0;
left: 0;
width: 100%;
padding: 2.75em 0 .25em !important;
background: $secondary;
}
#wsite-com-store .wsite-com-sidebar #wsite-com-hierarchy {
position: absolute;
width: 100%;
max-height: 0;
overflow: hidden;
margin: 0 auto;
display: block;
top:0;
z-index: 11;
-webkit-transition: max-height 350ms linear;
-moz-transition: max-height 350ms linear;
-o-transition: max-height 350ms linear;
-ms-transition: max-height 350ms linear;
transition: max-height 350ms linear;
}
#wsite-com-store .sidebar-expanded #wsite-com-hierarchy {
max-height: 5000px !important;
margin: 0 auto .25em;
}
#wsite-com-store #close {
position: absolute;
z-index: 12;
width: 100%;
top: 0px;
text-align: center;
font-weight: 900 !important;
text-transform: uppercase;
color: white;
display: block;
padding:10px 0;
}
#wsite-com-store .wsite-com-sidebar #wsite-com-hierarchy a, #wsite-com-store .wsite-com-sidebar #wsite-com-hierarchy {
color: white;
}
#wsite-com-hierarchy .wsite-selected {
font-weight: bold;
color: #fff;
}
}