Ako to má třeba StyleCraft.eu
Moje MInecraft IP: 82.208.17.18:27472
Zde je HTML webu:
Spoiler: zobrazit
/* Resets
------------------------------------------------------------------------------------------------------*/
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input, iframe, img {
margin: 0;
padding: 0;
border:0;
}
a img {
border: 0;
}
a {
text-decoration: none;
}
body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
input:focus, select:focus, textarea:focus, button:focus {
outline: none;
}
/* Fonts (external fonts can live here)
------------------------------------------------------------------------------------------------------*/
/* General Structure
------------------------------------------------------------------------------------------------------*/
html {
height: auto;
}
body {
width: 100%;
background: #000;
padding: 0 !important;
}
.wsite-background {
width: 100%;
background: #000 url(images/bg.jpg) top center no-repeat;
background-size: cover;
background-attachment: fixed;
}
.background {
position: fixed;
width: 100%;
height: 100%;
}
.shade {
display: none \9\0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,1);
background: rgba(0,0,0,.5);
background: rgba(0,0,0,.4);
background: -moz-linear-gradient(top, rgba(0,0,0,.4) 0%, rgba(102,102,102,0) 40%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,.4)), color-stop(40%, rgba(102,102,102,0)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,.4) 0%, rgba(102,102,102,0) 40%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,.4) 0%, rgba(102,102,102,0) 40%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,.4) 0%, rgba(102,102,102,0) 40%, rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,.4) 0%, rgba(102,102,102,0) 40%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=0 );
}
.header-hover-container.w-ui {
position: fixed !important;
}
#wrapper {
position: relative;
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 0 50px 35px;
box-sizing: border-box;
}
#header,
#banner,
#main,
#footer {
position: relative;
width: 100%;
overflow: hidden;
padding: 0;
}
#main {
background: #ffffff;
z-index: 1;
}
#banner,
#footer {
background: rgba(0, 0, 0, .8);
}
.container,
.wsite-footer {
position: relative;
margin: 0 auto;
padding: 55px 65px;
box-sizing: border-box;
}
#footer > div {
top: 0 !important;
left: 0 !important;
width: 100% !important;
border-top: none !important;
background: none !important;
margin-top: 30px;
}
#footer > div > div:first-child {
background: none !important;
}
/* Text and type
------------------------------------------------------------------------------------------------------*/
body {
color: #797570;
font: 16px/1 'Open Sans', arial, sans-serif;
}
a {
color: #a2834e;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
a:hover {
color: #cea764;
}
h2 {
font-family: "Ubuntu";
font-size: 1.5em;
color: #494442;
margin: 0 auto .75em;
}
div.paragraph, p {
margin: 0 auto 2.75em;
line-height: 1.75;
}
#footer {
color: #c4c4c4;
font-size: .9em;
text-align: center;
}
#footer .paragraph {
margin: 0 auto 1.5em;
line-height: 1.5;
}
#footer h2 {
color: #c4c4c4;
margin: 0 auto .5em;
font-size: 1.25em;
}
/* Header
------------------------------------------------------------------------------------------------------*/
#nav-wrapper {
display: table;
width: 100%;
min-height: 96px;
}
#logo,
#nav {
display: table-cell;
vertical-align: middle;
}
#nav {
padding-left: 40px;
text-align: right;
}
.wsite-logo img {
max-width: 500px;
max-height: 200px;
}
#wsite-title {
font-family: "Ubuntu";
font-size: 2em;
font-weight: bold;
text-transform: uppercase;
color: #ffffff;
}
/* Navigation
------------------------------------------------------------------------------------------------------*/
#nav > ul li:last-child a {
padding-right: 0 !important;
}
.wsite-menu-default {
margin: 0 auto;
}
.wsite-menu-default li {
list-style: none;
display: inline-block;
}
.wsite-menu-default a {
display: block;
padding: 15px;
color: rgba(255, 255, 255, .65);
font-family: "Ubuntu";
font-weight: bold;
text-transform: uppercase;
}
.wsite-menu-default a:hover,
.wsite-menu a:hover,
.wsite-menu-default #active a {
color: #ffffff;
}
#mobile-nav,
#mobile-button,
#mobile-input {
display: none;
}
/* Submenus */
#wsite-menus .wsite-menu-wrap * {
border: none !important;
}
#wsite-menus .wsite-menu li a {
padding: 10px 20px;
background: #f8f8f8;
color: #797570;
font-family: "Ubuntu";
font-weight: bold;
text-transform: uppercase;
}
#wsite-menus span.wsite-menu-title{
padding: 0;
}
.wsite-menu-arrow {
font-size: 0;
margin-left: 10px;
}
.wsite-menu-arrow {
display: none !important;
}
.wsite-menu-mobile-arrow {
display: inline-block !important;
font-size: inherit !important;
padding: 0 5px;
}
.wsite-menu-mobile-arrow:before, .wsite-menu-arrow:before {
display: inline-block;
content: '\203A';
vertical-align: bottom;
font-size: 20px;
}
.wsite-menu-back-item .wsite-menu-mobile-arrow:before {
content: '\2039' !important;
}
.scrolltop {
position: absolute;
display: block;
top: 0;
right: 0;
font-size: 15px;
font-family: "Ubuntu";
padding: 7px 5px;
background: #a2834e;
text-align: center;
vertical-align: middle;
line-height: 1;
z-index: 5;
text-transform: uppercase;
font-weight: bold;
color: #000;
}
/* Banner
------------------------------------------------------------------------------------------------------*/
#banner {
display: table;
width: 100%;
}
#banner-content {
display: table-cell;
vertical-align: middle;
}
#banner-content {
text-align: center;
}
#banner-content .button {
display: inline-block;
}
#banner h2, #banner p, #banner div {
margin: 0;
}
#banner .wsite-headline,
.splash-page h2 {
color: #a2834e;
font-size: 36px;
text-transform: uppercase;
}
#banner .wsite-headline-paragraph {
color: #fff;
font-size: 1.2em;
}
.wsite-header {
background: url(images/header-bg.jpg) no-repeat center center;
background-size: cover !important;
}
.wsite-header:before {
content: "";
display: block;
}
.tall-header-page #banner .wslide-main {
position: absolute !important;
top: 0 !important;
}
/* Banner Types
------------------------------------------------------------------------------------------------------*/
.landing-page #banner p {
margin: 1.85em auto 2em;
}
.landing-page #banner,
.splash-page #banner {
padding: 2em 0;
}
.landing-page #banner .wsite-button-highlight,
.splash-page #banner .wsite-button-highlight {
color: rgba(255, 255, 255, .65) !important;
border-color: rgba(255, 255, 255, .65) !important;
}
.landing-page #banner .wsite-button-highlight:hover,
.splash-page #banner .wsite-button-highlight:hover {
color: #fff !important;
border-color: #fff !important;
}
.tall-header-page .wsite-header {
max-height: 350px;
}
.tall-header-page .wsite-header:before {
padding-top: 40%;
}
.short-header-page #banner-content,
.title-page #banner-content {
padding: 25px 0;
}
.title-page #banner p {
margin: 1em auto 0;
}
.splash-page,
.splash-page #wrapper {
height: 100%;
}
.splash-page #wrapper {
padding-bottom: 15em;
}
.splash-page #splash {
color: #fff;
display: table;
width: 100%;
height: 100%;
}
.splash-page #splash > div {
display: table-cell;
vertical-align: middle;
}
.splash-page #banner h2 {
margin: 0 auto .5em;
text-align: center;
}
.splash-page #footer {
display: none;
}
/* Storefront
------------------------------------------------------------------------------------------------------*/
#wsite-com-store .wsite-com-content:not(.wsite-com-content-with-sidebar) {
padding: 0 !important;
}
/* Category Blocks */
.wsite-com-category-product-image-wrap,
.wsite-com-category-product-featured-image-wrap,
.wsite-com-category-subcategory-image-wrap {
border: none;
}
.wsite-com-category-subcategory-name-bg {
opacity: .15;
-webkit-transition: opacity 240ms linear;
-moz-transition: opacity 240ms linear;
-o-transition: opacity 240ms linear;
-ms-transition: opacity 240ms linear;
transition: opacity 240ms linear;
}
.wsite-com-category-subcategory-name {
top: 0;
}
.wsite-com-category-subcategory-name-text {
display: table;
padding: 0;
width: 100%;
height: 100%;
text-shadow: none;
-webkit-transition: all 240ms linear;
-moz-transition: all 240ms linear;
-o-transition: all 240ms linear;
-ms-transition: all 240ms linear;
transition: all 240ms linear;
}
.wsite-com-category-subcategory-name-text span {
display: table-cell;
vertical-align: middle;
}
.wsite-com-category-subcategory-link:hover .wsite-com-category-subcategory-name-bg {
opacity: .7;
}
.wsite-com-category-subcategory-link:hover .wsite-com-category-subcategory-name-text {
color: #a2834e !important;
}
/* Sidebar */
.wsite-com-content-with-sidebar .wsite-com-category-subcategory-group {
display: none;
}
.wsite-com-sidebar {
width: 140px;
}
#wsite-com-store #wsite-com-hierarchy ul .wsite-com-link-text {
margin-bottom: 0;
padding: 10px 0;
}
#wsite-com-store #wsite-com-hierarchy ul,
.wsite-com-category-subcategory-name-text {
font-family: "Ubuntu";
font-size: 1.1em;
font-weight: bold;
text-transform: uppercase;
}
#wsite-com-store #wsite-com-hierarchy ul a:hover, .wsite-selected a {
color: #a2834e;
}
/* Product */
#wsite-com-product-title {
font-weight: bold;
}
.wsite-com-product-option-label {
margin: 0 auto 5px;
}
.wsite-com-product-option-color .wsite-com-product-option-color-swatch {
border-radius: 0;
box-shadow: none;
}
/* Blog
------------------------------------------------------------------------------------------------------*/
.blog-sidebar {
width: 250px;
}
.blog-post .blog-separator {
border: none !important;
}
.blog-title .blog-title-link {
display: block;
margin-bottom: .5em;
line-height: 1em;
}
.blogCommentReplyWrapper iframe {
height: 450px !important;
}
/* Content Elements
------------------------------------------------------------------------------------------------------*/
/* Buttons */
.wsite-button,
.wsite-button-inner,
.blog-button,
.blog-button span,
.wsite-editor .wsite-button {
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
background-image: none !important;
line-height: 1 !important;
font-weight: bold;
letter-spacing: .02em;
}
.wsite-button,
.blog-button,
.wsite-editor .wsite-button {
font-family: "Ubuntu";
padding: 1em 1.5em !important;
color: #a2834e !important;
border: 2px solid #a2834e;
}
.wsite-button:hover,
.blog-button:hover {
color: #cea764 !important;
border: 2px solid #cea764;
}
.wsite-button-large {
padding: 1em 2em !important;
}
.wsite-button-highlight,
.wsite-editor .wsite-button-highlight {
color: #a7a4a4 !important;
border-color: #a7a4a4;
}
.wsite-button-highlight:hover {
color: #494442 !important;
border-color: #494442;
}
/* Social Icons */
.wsite-social {
font-size: 1.25em;
white-space: normal;
}
.wsite-social-item {
display: inline-block;
margin: 0 8px 10px;
color: inherit;
}
.wsite-social-item:hover {
color: #494442;
}
/* Form Inputs */
.wsite-form-label {
display: block;
font-size: 1em !important;
padding: 0 0 10px !important;
}
.wsite-form-sublabel {
margin: 5px 0 -10px;
}
.wsite-form-input-container,
.wsite-form-radio-container {
margin-bottom: 25px;
}
input, textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.wsite-form-input,
.wsite-search-element-input,
select,
#commentPostDiv .field input[type=text],
#commentPostDiv .field textarea {
color: inherit;
background: inherit;
border: solid 2px rgba(200, 198, 196, .4);
padding: 5px !important;
min-height: 36px !important;
box-sizing:border-box;
-webkit-transition: all 240ms linear;
-moz-transition: all 240ms linear;
-o-transition: all 240ms linear;
-ms-transition: all 240ms linear;
transition: all 240ms linear;
}
.wsite-form-input:hover,
.wsite-search-element-input:hover,
#commentPostDiv .field input[type=text]:hover,
#commentPostDiv .field textarea:hover {
background: rgba(200, 198, 196, .1);
}
.wsite-form-input:focus,
.wsite-search-element-input:focus,
#commentPostDiv .field input[type=text]:focus,
#commentPostDiv .field textarea:focus {
border: solid 2px rgba(200, 198, 196, 1);
}
.form-field-error .wsite-form-radio-container {
border: none;
}
/* Dropdowns */
select {
border-radius: 0;
height: 38px !important;
}
/* Checkboxes and Radio buttons */
.wsite-form-field input[type='checkbox'],
.wsite-form-field input[type='radio'],
.wsite-com-product-option-label input[type='radio'] {
display: none;
}
.wsite-form-field input[type='checkbox'] + label:before,
.wsite-form-field input[type='radio'] + label:before,
.wsite-com-product-option-label input[type='radio'] + span:before {
content: '';
display: inline-block;
height: 18px;
width: 18px;
margin-right: 8px;
background: transparent;
border: 2px solid rgba(200, 198, 196, .4);
vertical-align: middle;
}
.wsite-form-field input[type='radio'] + label:before,
.wsite-com-product-option-label input[type='radio'] + span:before {
border-radius: 100%;
}
.wsite-form-field input[type='radio']:checked + label:before,
.wsite-com-product-option-label input[type='radio']:checked + span:before {
background: url(images/radio.png) no-repeat center center;
}
.wsite-form-field input[type='checkbox']:checked + label:before {
background: url(images/checkbox.png) no-repeat center center;
}
.form-field-error input[type='radio'] + label:before,
.form-field-error input[type='checkbox'] + label:before {
border-color: #cc0000;
}
/* Gallery Lightbox, Slideshows */
.imageGallery .galleryCaptionInnerText p,
.imageGallery .galleryCaptionInnerText {
font-weight: normal;
}
.fancybox-skin {
background: transparent !important;
webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.fancybox-close {
right: 20px;
top: 18px;
}
.fancybox-close,
.fancybox-next span,
.fancybox-prev span,
.wsite-header .wslide-button-icon {
background: none !important;
width: auto;
height: auto;
}
.fancybox-close:before,
.fancybox-next span:before,
.fancybox-prev span:before,
.wsite-header .wslide-button-icon:before {
font-size: 50px;
line-height: .5;
color: #a2834e !important;
}
.fancybox-close:hover:before,
.fancybox-next:hover span:before,
.fancybox-prev:hover span:before,
.wsite-header .wslide-button-wrap:hover .wslide-button-icon:before {
color: #cea764 !important;
}
.fancybox-close:before {
font-family: 'Calibri';
font-size: 50px;
content: '\00D7';
}
.fancybox-prev span:before,
.wsite-header .wslide-prev .wslide-button-icon:before {
content: '\3008';
font-family: arial;
}
.fancybox-next span:before,
.wsite-header .wslide-next .wslide-button-icon:before {
content: '\3009';
font-family: arial;
}
.fancybox-title {
color: #fff;
font-size: 1em;
}
#fancybox-thumbs ul li a {
border: none;
}
#fancybox-thumbs ul li.active {
opacity: 1;
}
.wsite-header .wslide-dot {
width: 10px !important;
height: 10px !important;
margin: 0 3px !important;
background: #fff !important;
border-radius: 100% !important;
}
.wsite-header .wslide-dot.wslide-dot-current {
background: #cea764 !important;
}
/* Product element */
.wsite-product {
border: solid 2px rgba(200, 198, 196, .4);
border-radius: 0;
box-shadow: none;
}
.wsite-product-image {
border: none;
border-radius: 0;
box-shadow: none;
}
/* Mini cart */
#wsite-mini-cart {
top: 75px !important;
border-radius: 0 !important;
background: #111 !important;
border-color: #111 !important;
color: #fff;
}
#wsite-mini-cart div, #wsite-mini-cart li {
border-color: #111 !important ;
}
.wsite-cart-contents .wsite-product-list, #wsite-mini-cart.arrow-top:before {
border: none !important;
}
#wsite-mini-cart.arrow-top:after {
border-bottom-color: #111 !important;
}
.wsite-product-list *, .wsite-cart-bottom {
color: inherit !important;
}
.wsite-product-list .wsite-product-description {
font-size: 13px;
}
/* Mobile & Tablet Displays
------------------------------------------------------------------------------------------------------*/
@media (max-width: 992px) {
/* General
---------------------------------------*/
html {
height: 100%;
}
body {
font-size: 15px;
height: 100%;
}
#wrapper {
padding: 0 25px 35px;
}
.container, .wsite-footer {
margin: 0 auto;
padding: 2.25em 2.5em;
box-sizing: border-box;
}
/* Header
---------------------------------------*/
#header .container {
display: table;
width: 100%;
}
#menu-button, .wsite-nav-cart {
display: table-cell;
width: 22px;
height: 21px;
vertical-align: middle;
}
#nav {
display: none;
}
#nav-wrapper {
min-height: 0;
}
.wsite-logo {
width: 100%;
padding: 15px 0;
}
.wsite-logo img {
max-height: 80px;
}
/* Cart Link */
.wsite-nav-cart a {
position: relative;
padding: 3px 0 0;
font-size: 0;
overflow: hidden;
display: block;
margin: 0 20px;
}
.wsite-nav-cart a span {
position: relative;
font-size: 12px;
font-family: arial, sans-serif;
display: block;
padding: 3px 0 7px;
color: #000;
width: 26px;
text-align: center;
z-index: 1;
}
.wsite-nav-cart a span:before {
content: '';
position: absolute;
top: 1px;
left: 0;
display: block;
width: 18px;
height: 0;
border-top: 15px solid #fff;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
z-index: -1;
}
.wsite-nav-cart a span:after, .wsite-nav-cart a:after {
content: '';
position: absolute;
bottom: 0;
left: 6px;
width: 4px;
height: 4px;
border-radius: 100%;
display: block;
background: #fff;
}
.wsite-nav-cart a:after {
left: auto;
right: 6px;
}
/* Nav buttons */
.hamburger span, .hamburger:before, .hamburger:after {
position: relative;
display: block;
width: 22px;
height: 4px;
background: #ffffff;
z-index: 3;
-webkit-transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
-moz-transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
-o-transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
-ms-transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
}
.hamburger:before, .hamburger:after {
content: '';
}
.hamburger span {
margin: 4px 0;
}
body.menu-open #wrapper .hamburger:before {
top: 7px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
body.menu-open #wrapper .hamburger:after {
top: -9px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
body.menu-open #wrapper .hamburger span {
opacity: 0;
}
/* Nav
---------------------------------------*/
#mobile-nav {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 0;
overflow: hidden;
padding: 0;
background: #111111;
text-align: center;
box-sizing: border-box;
overflow-y: auto;
z-index: 2;
}
#wrapper,
#mobile-nav {
-webkit-transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
-moz-transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
-o-transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
-ms-transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
}
body.menu-open #wrapper {
height: 100%;
overflow: hidden;
}
body.menu-open #mobile-nav {
max-height: 100vh;
}
#mobile-nav .wsite-menu-default li {
display: block;
}
#mobile-nav .wsite-menu-default a {
position: relative;
display: inline-block;
padding: 10px 25px;
}
#mobile-nav .wsite-menu-default li:first-child a {
padding-top: 20px;
}
#mobile-nav .wsite-menu-default li:last-child a {
padding-bottom: 20px;
}
.wsite-menu-default {
margin: 2.5em 0;
}
.wsite-menu-wrap {
display: block !important;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.wsite-menu {
max-height: 0;
overflow: hidden;
background: rgba(88, 88, 88, .2) !important;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.accordion.open > .wsite-menu {
max-height: 100vh;
}
.expand:before {
content: '+';
display: inline-block;
}
.accordion.open > a > .expand:before {
content: '–';
}
/* Commerce
---------------------------------------*/
/* Cart Link Icon */
/* Mini Cart & Checkout */
#wsite-mini-cart {
left: auto !important;
right: 50px !important;
top: 60px !important;
width: 50% !important;
max-width: 400px;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
}
#wsite-mini-cart .wsite-product-list {
display: block;
max-height: 275px;
overflow: auto;
}
#wsite-mini-cart .wsite-product-list .wsite-list-image-container {
margin: 5px !important;
}
#wsite-mini-cart .wsite-items-right {
padding-right: 5px;
}
#wsite-mini-cart .wsite-product-list > li {
display: table;
width: 100%;
}
#wsite-mini-cart:before, #wsite-mini-cart:after {
display: none !important;
}
#wsite-mini-cart *,
#wsite-com-checkout-list {
font-size: 12px !important;
}
#wsite-mini-cart .wsite-product-image, .wsite-list-image-container,
#wsite-com-checkout-list .wsite-com-checkout-item-image,
#wsite-com-checkout-summary-list .wsite-com-checkout-item-image {
width: 30px !important;
height: 30px !important;
padding: 5px !important;
}
.wsite-com-checkout-item-remove {
display: block !important;
margin: 5px auto 0 !important;
top: auto !important;
left: auto !important;
}
.wsite-com-continue-shopping .caret {
vertical-align: middle;
}
.wsite-product-list li {
border: none;
}
/* Blog Index
---------------------------------------*/
#blogTable > tbody > tr > td {
display: block !important;
width: 100% !important;
margin: 0 auto;
padding: 0 !important;
}
.blog-body {
float: none !important;
}
.blog-sidebar .column-blog {
width: 100%;
float: none;
padding-top: 2em;
}
.blog-sidebar-separator {
padding: 0;
}
}
/* Mobile Displays
------------------------------------------------------------------------------------------------------*/
@media (max-width: 767px) {
/* General Structure
---------------------------------------*/
body {
font-size: 14px;
}
#wrapper {
padding: 0;
}
.container,
.wsite-footer {
margin: 0 auto;
padding: 2em 2.25em;
}
.background {
background: #000 !important;
}
.shade {
display: none;
}
#banner,
#footer {
background: rgba(0, 0, 0, 1);
}
.wsite-multicol-col {
display: block !important;
width: auto !important;
max-width: 100% !important;
margin: 0 auto 1em !important;
}
h2 {
margin: 0 auto .5em;
}
.paragraph, p {
margin: 0 auto 1.75em;
line-height: 1.5;
}
#wsite-mini-cart {
left: 0 !important;
right: 0 !important;
top: 55px !important;
width: 100% !important;
}
/* Header
---------------------------------------*/
#header {
padding: 0 10px;
box-sizing: border-box;
background: #fff;
}
.wsite-nav-cart a span {
color: #fff;
}
.wsite-logo img {
max-height: 50px;
}
#wsite-title {
color: #a2834e;
font-size: 1.5em;
}
.wsite-nav-cart a span::before {
border-top: 15px solid #a2834e;
}
.wsite-nav-cart a span::after,
.wsite-nav-cart a::after,
.hamburger span,
.hamburger:before,
.hamburger:after {
background: #a2834e;
}
/* Banner
---------------------------------------*/
#banner .wsite-headline {
font-size: 1.25em !important;
}
#banner .wsite-headline-paragraph {
font-size: 1.15em !important;
}
/* Layouts
---------------------------------------*/
.landing-page #banner p {
margin: 1em auto 1.15em;
}
.landing-page #banner,
.splash-page #banner {
padding: 0;
}
.title-page #banner p {
margin: 1em auto 0;
}
.no-header-page #header {
border-bottom: 1px solid #f1f1f1;
}
/* Storefront
---------------------------------------*/
.wsite-com-sidebar, .wsite-com-content-with-sidebar {
display: block;
width: 100%;
margin: 0 auto;
padding: 0;
text-align: center;
}
.wsite-com-sidebar:before {
content: 'Categories \25be';
display: block;
font-weight: bold;
font-size: 20px;
margin: 0 auto 20px;
}
#wsite-com-hierarchy {
max-height: 0vh;
overflow: hidden;
-webkit-transition: all 600ms linear;
-moz-transition: all 600ms linear;
-o-transition: all 600ms linear;
-ms-transition: all 600ms linear;
transition: all 600ms linear;
}
.wsite-com-sidebar:hover #wsite-com-hierarchy {
max-height: 100vh;
}
#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,
select {
width: 100% !important;
}
#wsite-com-product-images,
#wsite-com-product-images .wsite-com-column {
float: none !important;
}
#wsite-com-product-info {
margin-left: 0 !important;
margin-top: 25px;
}
/* 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-list .wsite-coupon-input,
#wsite-com-checkout-summary-list .wsite-coupon-input {
width: 120px;
}
#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;
}
/* Content Elements
---------------------------------------*/
.imageGallery > div {
width: 50% !important;
}
.galleryCaptionHover .galleryCaptionHolder {
display: none !important;
}
.galleryImageHolder .galleryCaptionInnerText {
margin: 5px auto;
line-height: 1;
}
/* Search Results Page
---------------------------------------*/
#wsite-search-header h2,
#wsite-search-form-container {
width: 100%;
}
#wsite-search-sidebar {
display: block;
width: 100%;
margin: 0 auto;
padding: 0;
text-align: center;
}
/* Search Results */
#wsite-search-sidebar {
display: none;
}
#wsite-search-results, #wsite-search-product-results .wsite-search-product-result {
width: 100% !important;
padding: 0 !important;
}
#wsite-search-form-container {
float: none;
width: 100%;
margin-top: 10px;
}
}
------------------------------------------------------------------------------------------------------*/
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input, iframe, img {
margin: 0;
padding: 0;
border:0;
}
a img {
border: 0;
}
a {
text-decoration: none;
}
body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
input:focus, select:focus, textarea:focus, button:focus {
outline: none;
}
/* Fonts (external fonts can live here)
------------------------------------------------------------------------------------------------------*/
/* General Structure
------------------------------------------------------------------------------------------------------*/
html {
height: auto;
}
body {
width: 100%;
background: #000;
padding: 0 !important;
}
.wsite-background {
width: 100%;
background: #000 url(images/bg.jpg) top center no-repeat;
background-size: cover;
background-attachment: fixed;
}
.background {
position: fixed;
width: 100%;
height: 100%;
}
.shade {
display: none \9\0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,1);
background: rgba(0,0,0,.5);
background: rgba(0,0,0,.4);
background: -moz-linear-gradient(top, rgba(0,0,0,.4) 0%, rgba(102,102,102,0) 40%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,.4)), color-stop(40%, rgba(102,102,102,0)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,.4) 0%, rgba(102,102,102,0) 40%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,.4) 0%, rgba(102,102,102,0) 40%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,.4) 0%, rgba(102,102,102,0) 40%, rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,.4) 0%, rgba(102,102,102,0) 40%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=0 );
}
.header-hover-container.w-ui {
position: fixed !important;
}
#wrapper {
position: relative;
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 0 50px 35px;
box-sizing: border-box;
}
#header,
#banner,
#main,
#footer {
position: relative;
width: 100%;
overflow: hidden;
padding: 0;
}
#main {
background: #ffffff;
z-index: 1;
}
#banner,
#footer {
background: rgba(0, 0, 0, .8);
}
.container,
.wsite-footer {
position: relative;
margin: 0 auto;
padding: 55px 65px;
box-sizing: border-box;
}
#footer > div {
top: 0 !important;
left: 0 !important;
width: 100% !important;
border-top: none !important;
background: none !important;
margin-top: 30px;
}
#footer > div > div:first-child {
background: none !important;
}
/* Text and type
------------------------------------------------------------------------------------------------------*/
body {
color: #797570;
font: 16px/1 'Open Sans', arial, sans-serif;
}
a {
color: #a2834e;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
a:hover {
color: #cea764;
}
h2 {
font-family: "Ubuntu";
font-size: 1.5em;
color: #494442;
margin: 0 auto .75em;
}
div.paragraph, p {
margin: 0 auto 2.75em;
line-height: 1.75;
}
#footer {
color: #c4c4c4;
font-size: .9em;
text-align: center;
}
#footer .paragraph {
margin: 0 auto 1.5em;
line-height: 1.5;
}
#footer h2 {
color: #c4c4c4;
margin: 0 auto .5em;
font-size: 1.25em;
}
/* Header
------------------------------------------------------------------------------------------------------*/
#nav-wrapper {
display: table;
width: 100%;
min-height: 96px;
}
#logo,
#nav {
display: table-cell;
vertical-align: middle;
}
#nav {
padding-left: 40px;
text-align: right;
}
.wsite-logo img {
max-width: 500px;
max-height: 200px;
}
#wsite-title {
font-family: "Ubuntu";
font-size: 2em;
font-weight: bold;
text-transform: uppercase;
color: #ffffff;
}
/* Navigation
------------------------------------------------------------------------------------------------------*/
#nav > ul li:last-child a {
padding-right: 0 !important;
}
.wsite-menu-default {
margin: 0 auto;
}
.wsite-menu-default li {
list-style: none;
display: inline-block;
}
.wsite-menu-default a {
display: block;
padding: 15px;
color: rgba(255, 255, 255, .65);
font-family: "Ubuntu";
font-weight: bold;
text-transform: uppercase;
}
.wsite-menu-default a:hover,
.wsite-menu a:hover,
.wsite-menu-default #active a {
color: #ffffff;
}
#mobile-nav,
#mobile-button,
#mobile-input {
display: none;
}
/* Submenus */
#wsite-menus .wsite-menu-wrap * {
border: none !important;
}
#wsite-menus .wsite-menu li a {
padding: 10px 20px;
background: #f8f8f8;
color: #797570;
font-family: "Ubuntu";
font-weight: bold;
text-transform: uppercase;
}
#wsite-menus span.wsite-menu-title{
padding: 0;
}
.wsite-menu-arrow {
font-size: 0;
margin-left: 10px;
}
.wsite-menu-arrow {
display: none !important;
}
.wsite-menu-mobile-arrow {
display: inline-block !important;
font-size: inherit !important;
padding: 0 5px;
}
.wsite-menu-mobile-arrow:before, .wsite-menu-arrow:before {
display: inline-block;
content: '\203A';
vertical-align: bottom;
font-size: 20px;
}
.wsite-menu-back-item .wsite-menu-mobile-arrow:before {
content: '\2039' !important;
}
.scrolltop {
position: absolute;
display: block;
top: 0;
right: 0;
font-size: 15px;
font-family: "Ubuntu";
padding: 7px 5px;
background: #a2834e;
text-align: center;
vertical-align: middle;
line-height: 1;
z-index: 5;
text-transform: uppercase;
font-weight: bold;
color: #000;
}
/* Banner
------------------------------------------------------------------------------------------------------*/
#banner {
display: table;
width: 100%;
}
#banner-content {
display: table-cell;
vertical-align: middle;
}
#banner-content {
text-align: center;
}
#banner-content .button {
display: inline-block;
}
#banner h2, #banner p, #banner div {
margin: 0;
}
#banner .wsite-headline,
.splash-page h2 {
color: #a2834e;
font-size: 36px;
text-transform: uppercase;
}
#banner .wsite-headline-paragraph {
color: #fff;
font-size: 1.2em;
}
.wsite-header {
background: url(images/header-bg.jpg) no-repeat center center;
background-size: cover !important;
}
.wsite-header:before {
content: "";
display: block;
}
.tall-header-page #banner .wslide-main {
position: absolute !important;
top: 0 !important;
}
/* Banner Types
------------------------------------------------------------------------------------------------------*/
.landing-page #banner p {
margin: 1.85em auto 2em;
}
.landing-page #banner,
.splash-page #banner {
padding: 2em 0;
}
.landing-page #banner .wsite-button-highlight,
.splash-page #banner .wsite-button-highlight {
color: rgba(255, 255, 255, .65) !important;
border-color: rgba(255, 255, 255, .65) !important;
}
.landing-page #banner .wsite-button-highlight:hover,
.splash-page #banner .wsite-button-highlight:hover {
color: #fff !important;
border-color: #fff !important;
}
.tall-header-page .wsite-header {
max-height: 350px;
}
.tall-header-page .wsite-header:before {
padding-top: 40%;
}
.short-header-page #banner-content,
.title-page #banner-content {
padding: 25px 0;
}
.title-page #banner p {
margin: 1em auto 0;
}
.splash-page,
.splash-page #wrapper {
height: 100%;
}
.splash-page #wrapper {
padding-bottom: 15em;
}
.splash-page #splash {
color: #fff;
display: table;
width: 100%;
height: 100%;
}
.splash-page #splash > div {
display: table-cell;
vertical-align: middle;
}
.splash-page #banner h2 {
margin: 0 auto .5em;
text-align: center;
}
.splash-page #footer {
display: none;
}
/* Storefront
------------------------------------------------------------------------------------------------------*/
#wsite-com-store .wsite-com-content:not(.wsite-com-content-with-sidebar) {
padding: 0 !important;
}
/* Category Blocks */
.wsite-com-category-product-image-wrap,
.wsite-com-category-product-featured-image-wrap,
.wsite-com-category-subcategory-image-wrap {
border: none;
}
.wsite-com-category-subcategory-name-bg {
opacity: .15;
-webkit-transition: opacity 240ms linear;
-moz-transition: opacity 240ms linear;
-o-transition: opacity 240ms linear;
-ms-transition: opacity 240ms linear;
transition: opacity 240ms linear;
}
.wsite-com-category-subcategory-name {
top: 0;
}
.wsite-com-category-subcategory-name-text {
display: table;
padding: 0;
width: 100%;
height: 100%;
text-shadow: none;
-webkit-transition: all 240ms linear;
-moz-transition: all 240ms linear;
-o-transition: all 240ms linear;
-ms-transition: all 240ms linear;
transition: all 240ms linear;
}
.wsite-com-category-subcategory-name-text span {
display: table-cell;
vertical-align: middle;
}
.wsite-com-category-subcategory-link:hover .wsite-com-category-subcategory-name-bg {
opacity: .7;
}
.wsite-com-category-subcategory-link:hover .wsite-com-category-subcategory-name-text {
color: #a2834e !important;
}
/* Sidebar */
.wsite-com-content-with-sidebar .wsite-com-category-subcategory-group {
display: none;
}
.wsite-com-sidebar {
width: 140px;
}
#wsite-com-store #wsite-com-hierarchy ul .wsite-com-link-text {
margin-bottom: 0;
padding: 10px 0;
}
#wsite-com-store #wsite-com-hierarchy ul,
.wsite-com-category-subcategory-name-text {
font-family: "Ubuntu";
font-size: 1.1em;
font-weight: bold;
text-transform: uppercase;
}
#wsite-com-store #wsite-com-hierarchy ul a:hover, .wsite-selected a {
color: #a2834e;
}
/* Product */
#wsite-com-product-title {
font-weight: bold;
}
.wsite-com-product-option-label {
margin: 0 auto 5px;
}
.wsite-com-product-option-color .wsite-com-product-option-color-swatch {
border-radius: 0;
box-shadow: none;
}
/* Blog
------------------------------------------------------------------------------------------------------*/
.blog-sidebar {
width: 250px;
}
.blog-post .blog-separator {
border: none !important;
}
.blog-title .blog-title-link {
display: block;
margin-bottom: .5em;
line-height: 1em;
}
.blogCommentReplyWrapper iframe {
height: 450px !important;
}
/* Content Elements
------------------------------------------------------------------------------------------------------*/
/* Buttons */
.wsite-button,
.wsite-button-inner,
.blog-button,
.blog-button span,
.wsite-editor .wsite-button {
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
background-image: none !important;
line-height: 1 !important;
font-weight: bold;
letter-spacing: .02em;
}
.wsite-button,
.blog-button,
.wsite-editor .wsite-button {
font-family: "Ubuntu";
padding: 1em 1.5em !important;
color: #a2834e !important;
border: 2px solid #a2834e;
}
.wsite-button:hover,
.blog-button:hover {
color: #cea764 !important;
border: 2px solid #cea764;
}
.wsite-button-large {
padding: 1em 2em !important;
}
.wsite-button-highlight,
.wsite-editor .wsite-button-highlight {
color: #a7a4a4 !important;
border-color: #a7a4a4;
}
.wsite-button-highlight:hover {
color: #494442 !important;
border-color: #494442;
}
/* Social Icons */
.wsite-social {
font-size: 1.25em;
white-space: normal;
}
.wsite-social-item {
display: inline-block;
margin: 0 8px 10px;
color: inherit;
}
.wsite-social-item:hover {
color: #494442;
}
/* Form Inputs */
.wsite-form-label {
display: block;
font-size: 1em !important;
padding: 0 0 10px !important;
}
.wsite-form-sublabel {
margin: 5px 0 -10px;
}
.wsite-form-input-container,
.wsite-form-radio-container {
margin-bottom: 25px;
}
input, textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.wsite-form-input,
.wsite-search-element-input,
select,
#commentPostDiv .field input[type=text],
#commentPostDiv .field textarea {
color: inherit;
background: inherit;
border: solid 2px rgba(200, 198, 196, .4);
padding: 5px !important;
min-height: 36px !important;
box-sizing:border-box;
-webkit-transition: all 240ms linear;
-moz-transition: all 240ms linear;
-o-transition: all 240ms linear;
-ms-transition: all 240ms linear;
transition: all 240ms linear;
}
.wsite-form-input:hover,
.wsite-search-element-input:hover,
#commentPostDiv .field input[type=text]:hover,
#commentPostDiv .field textarea:hover {
background: rgba(200, 198, 196, .1);
}
.wsite-form-input:focus,
.wsite-search-element-input:focus,
#commentPostDiv .field input[type=text]:focus,
#commentPostDiv .field textarea:focus {
border: solid 2px rgba(200, 198, 196, 1);
}
.form-field-error .wsite-form-radio-container {
border: none;
}
/* Dropdowns */
select {
border-radius: 0;
height: 38px !important;
}
/* Checkboxes and Radio buttons */
.wsite-form-field input[type='checkbox'],
.wsite-form-field input[type='radio'],
.wsite-com-product-option-label input[type='radio'] {
display: none;
}
.wsite-form-field input[type='checkbox'] + label:before,
.wsite-form-field input[type='radio'] + label:before,
.wsite-com-product-option-label input[type='radio'] + span:before {
content: '';
display: inline-block;
height: 18px;
width: 18px;
margin-right: 8px;
background: transparent;
border: 2px solid rgba(200, 198, 196, .4);
vertical-align: middle;
}
.wsite-form-field input[type='radio'] + label:before,
.wsite-com-product-option-label input[type='radio'] + span:before {
border-radius: 100%;
}
.wsite-form-field input[type='radio']:checked + label:before,
.wsite-com-product-option-label input[type='radio']:checked + span:before {
background: url(images/radio.png) no-repeat center center;
}
.wsite-form-field input[type='checkbox']:checked + label:before {
background: url(images/checkbox.png) no-repeat center center;
}
.form-field-error input[type='radio'] + label:before,
.form-field-error input[type='checkbox'] + label:before {
border-color: #cc0000;
}
/* Gallery Lightbox, Slideshows */
.imageGallery .galleryCaptionInnerText p,
.imageGallery .galleryCaptionInnerText {
font-weight: normal;
}
.fancybox-skin {
background: transparent !important;
webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.fancybox-close {
right: 20px;
top: 18px;
}
.fancybox-close,
.fancybox-next span,
.fancybox-prev span,
.wsite-header .wslide-button-icon {
background: none !important;
width: auto;
height: auto;
}
.fancybox-close:before,
.fancybox-next span:before,
.fancybox-prev span:before,
.wsite-header .wslide-button-icon:before {
font-size: 50px;
line-height: .5;
color: #a2834e !important;
}
.fancybox-close:hover:before,
.fancybox-next:hover span:before,
.fancybox-prev:hover span:before,
.wsite-header .wslide-button-wrap:hover .wslide-button-icon:before {
color: #cea764 !important;
}
.fancybox-close:before {
font-family: 'Calibri';
font-size: 50px;
content: '\00D7';
}
.fancybox-prev span:before,
.wsite-header .wslide-prev .wslide-button-icon:before {
content: '\3008';
font-family: arial;
}
.fancybox-next span:before,
.wsite-header .wslide-next .wslide-button-icon:before {
content: '\3009';
font-family: arial;
}
.fancybox-title {
color: #fff;
font-size: 1em;
}
#fancybox-thumbs ul li a {
border: none;
}
#fancybox-thumbs ul li.active {
opacity: 1;
}
.wsite-header .wslide-dot {
width: 10px !important;
height: 10px !important;
margin: 0 3px !important;
background: #fff !important;
border-radius: 100% !important;
}
.wsite-header .wslide-dot.wslide-dot-current {
background: #cea764 !important;
}
/* Product element */
.wsite-product {
border: solid 2px rgba(200, 198, 196, .4);
border-radius: 0;
box-shadow: none;
}
.wsite-product-image {
border: none;
border-radius: 0;
box-shadow: none;
}
/* Mini cart */
#wsite-mini-cart {
top: 75px !important;
border-radius: 0 !important;
background: #111 !important;
border-color: #111 !important;
color: #fff;
}
#wsite-mini-cart div, #wsite-mini-cart li {
border-color: #111 !important ;
}
.wsite-cart-contents .wsite-product-list, #wsite-mini-cart.arrow-top:before {
border: none !important;
}
#wsite-mini-cart.arrow-top:after {
border-bottom-color: #111 !important;
}
.wsite-product-list *, .wsite-cart-bottom {
color: inherit !important;
}
.wsite-product-list .wsite-product-description {
font-size: 13px;
}
/* Mobile & Tablet Displays
------------------------------------------------------------------------------------------------------*/
@media (max-width: 992px) {
/* General
---------------------------------------*/
html {
height: 100%;
}
body {
font-size: 15px;
height: 100%;
}
#wrapper {
padding: 0 25px 35px;
}
.container, .wsite-footer {
margin: 0 auto;
padding: 2.25em 2.5em;
box-sizing: border-box;
}
/* Header
---------------------------------------*/
#header .container {
display: table;
width: 100%;
}
#menu-button, .wsite-nav-cart {
display: table-cell;
width: 22px;
height: 21px;
vertical-align: middle;
}
#nav {
display: none;
}
#nav-wrapper {
min-height: 0;
}
.wsite-logo {
width: 100%;
padding: 15px 0;
}
.wsite-logo img {
max-height: 80px;
}
/* Cart Link */
.wsite-nav-cart a {
position: relative;
padding: 3px 0 0;
font-size: 0;
overflow: hidden;
display: block;
margin: 0 20px;
}
.wsite-nav-cart a span {
position: relative;
font-size: 12px;
font-family: arial, sans-serif;
display: block;
padding: 3px 0 7px;
color: #000;
width: 26px;
text-align: center;
z-index: 1;
}
.wsite-nav-cart a span:before {
content: '';
position: absolute;
top: 1px;
left: 0;
display: block;
width: 18px;
height: 0;
border-top: 15px solid #fff;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
z-index: -1;
}
.wsite-nav-cart a span:after, .wsite-nav-cart a:after {
content: '';
position: absolute;
bottom: 0;
left: 6px;
width: 4px;
height: 4px;
border-radius: 100%;
display: block;
background: #fff;
}
.wsite-nav-cart a:after {
left: auto;
right: 6px;
}
/* Nav buttons */
.hamburger span, .hamburger:before, .hamburger:after {
position: relative;
display: block;
width: 22px;
height: 4px;
background: #ffffff;
z-index: 3;
-webkit-transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
-moz-transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
-o-transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
-ms-transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
}
.hamburger:before, .hamburger:after {
content: '';
}
.hamburger span {
margin: 4px 0;
}
body.menu-open #wrapper .hamburger:before {
top: 7px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
body.menu-open #wrapper .hamburger:after {
top: -9px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
body.menu-open #wrapper .hamburger span {
opacity: 0;
}
/* Nav
---------------------------------------*/
#mobile-nav {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 0;
overflow: hidden;
padding: 0;
background: #111111;
text-align: center;
box-sizing: border-box;
overflow-y: auto;
z-index: 2;
}
#wrapper,
#mobile-nav {
-webkit-transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
-moz-transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
-o-transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
-ms-transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
transition: all 300ms cubic-bezier(0, 0.085, 0.68, 0.53);
}
body.menu-open #wrapper {
height: 100%;
overflow: hidden;
}
body.menu-open #mobile-nav {
max-height: 100vh;
}
#mobile-nav .wsite-menu-default li {
display: block;
}
#mobile-nav .wsite-menu-default a {
position: relative;
display: inline-block;
padding: 10px 25px;
}
#mobile-nav .wsite-menu-default li:first-child a {
padding-top: 20px;
}
#mobile-nav .wsite-menu-default li:last-child a {
padding-bottom: 20px;
}
.wsite-menu-default {
margin: 2.5em 0;
}
.wsite-menu-wrap {
display: block !important;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.wsite-menu {
max-height: 0;
overflow: hidden;
background: rgba(88, 88, 88, .2) !important;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.accordion.open > .wsite-menu {
max-height: 100vh;
}
.expand:before {
content: '+';
display: inline-block;
}
.accordion.open > a > .expand:before {
content: '–';
}
/* Commerce
---------------------------------------*/
/* Cart Link Icon */
/* Mini Cart & Checkout */
#wsite-mini-cart {
left: auto !important;
right: 50px !important;
top: 60px !important;
width: 50% !important;
max-width: 400px;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
}
#wsite-mini-cart .wsite-product-list {
display: block;
max-height: 275px;
overflow: auto;
}
#wsite-mini-cart .wsite-product-list .wsite-list-image-container {
margin: 5px !important;
}
#wsite-mini-cart .wsite-items-right {
padding-right: 5px;
}
#wsite-mini-cart .wsite-product-list > li {
display: table;
width: 100%;
}
#wsite-mini-cart:before, #wsite-mini-cart:after {
display: none !important;
}
#wsite-mini-cart *,
#wsite-com-checkout-list {
font-size: 12px !important;
}
#wsite-mini-cart .wsite-product-image, .wsite-list-image-container,
#wsite-com-checkout-list .wsite-com-checkout-item-image,
#wsite-com-checkout-summary-list .wsite-com-checkout-item-image {
width: 30px !important;
height: 30px !important;
padding: 5px !important;
}
.wsite-com-checkout-item-remove {
display: block !important;
margin: 5px auto 0 !important;
top: auto !important;
left: auto !important;
}
.wsite-com-continue-shopping .caret {
vertical-align: middle;
}
.wsite-product-list li {
border: none;
}
/* Blog Index
---------------------------------------*/
#blogTable > tbody > tr > td {
display: block !important;
width: 100% !important;
margin: 0 auto;
padding: 0 !important;
}
.blog-body {
float: none !important;
}
.blog-sidebar .column-blog {
width: 100%;
float: none;
padding-top: 2em;
}
.blog-sidebar-separator {
padding: 0;
}
}
/* Mobile Displays
------------------------------------------------------------------------------------------------------*/
@media (max-width: 767px) {
/* General Structure
---------------------------------------*/
body {
font-size: 14px;
}
#wrapper {
padding: 0;
}
.container,
.wsite-footer {
margin: 0 auto;
padding: 2em 2.25em;
}
.background {
background: #000 !important;
}
.shade {
display: none;
}
#banner,
#footer {
background: rgba(0, 0, 0, 1);
}
.wsite-multicol-col {
display: block !important;
width: auto !important;
max-width: 100% !important;
margin: 0 auto 1em !important;
}
h2 {
margin: 0 auto .5em;
}
.paragraph, p {
margin: 0 auto 1.75em;
line-height: 1.5;
}
#wsite-mini-cart {
left: 0 !important;
right: 0 !important;
top: 55px !important;
width: 100% !important;
}
/* Header
---------------------------------------*/
#header {
padding: 0 10px;
box-sizing: border-box;
background: #fff;
}
.wsite-nav-cart a span {
color: #fff;
}
.wsite-logo img {
max-height: 50px;
}
#wsite-title {
color: #a2834e;
font-size: 1.5em;
}
.wsite-nav-cart a span::before {
border-top: 15px solid #a2834e;
}
.wsite-nav-cart a span::after,
.wsite-nav-cart a::after,
.hamburger span,
.hamburger:before,
.hamburger:after {
background: #a2834e;
}
/* Banner
---------------------------------------*/
#banner .wsite-headline {
font-size: 1.25em !important;
}
#banner .wsite-headline-paragraph {
font-size: 1.15em !important;
}
/* Layouts
---------------------------------------*/
.landing-page #banner p {
margin: 1em auto 1.15em;
}
.landing-page #banner,
.splash-page #banner {
padding: 0;
}
.title-page #banner p {
margin: 1em auto 0;
}
.no-header-page #header {
border-bottom: 1px solid #f1f1f1;
}
/* Storefront
---------------------------------------*/
.wsite-com-sidebar, .wsite-com-content-with-sidebar {
display: block;
width: 100%;
margin: 0 auto;
padding: 0;
text-align: center;
}
.wsite-com-sidebar:before {
content: 'Categories \25be';
display: block;
font-weight: bold;
font-size: 20px;
margin: 0 auto 20px;
}
#wsite-com-hierarchy {
max-height: 0vh;
overflow: hidden;
-webkit-transition: all 600ms linear;
-moz-transition: all 600ms linear;
-o-transition: all 600ms linear;
-ms-transition: all 600ms linear;
transition: all 600ms linear;
}
.wsite-com-sidebar:hover #wsite-com-hierarchy {
max-height: 100vh;
}
#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,
select {
width: 100% !important;
}
#wsite-com-product-images,
#wsite-com-product-images .wsite-com-column {
float: none !important;
}
#wsite-com-product-info {
margin-left: 0 !important;
margin-top: 25px;
}
/* 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-list .wsite-coupon-input,
#wsite-com-checkout-summary-list .wsite-coupon-input {
width: 120px;
}
#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;
}
/* Content Elements
---------------------------------------*/
.imageGallery > div {
width: 50% !important;
}
.galleryCaptionHover .galleryCaptionHolder {
display: none !important;
}
.galleryImageHolder .galleryCaptionInnerText {
margin: 5px auto;
line-height: 1;
}
/* Search Results Page
---------------------------------------*/
#wsite-search-header h2,
#wsite-search-form-container {
width: 100%;
}
#wsite-search-sidebar {
display: block;
width: 100%;
margin: 0 auto;
padding: 0;
text-align: center;
}
/* Search Results */
#wsite-search-sidebar {
display: none;
}
#wsite-search-results, #wsite-search-product-results .wsite-search-product-result {
width: 100% !important;
padding: 0 !important;
}
#wsite-search-form-container {
float: none;
width: 100%;
margin-top: 10px;
}
}