@charset "UTF-8";
/*!
Theme Name: Food Ordering
Theme URI:
Description: This is the theme created for Food Ordering
Author: Khoozh
Author URI:
Version: 1.0.2
Tags: one-column, two-columns, left-sidebar, right-sidebar, accessibility-ready, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
Template: genesis
License: GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Table of Contents
sass/
|
|- abstracts/
| |- _variables.scss # Sass Variables
| |- _functions.scss # Sass Functions
| |- _mixins.scss # Sass Mixins
| |- _placeholders.scss # Sass Placeholders
|
|- fonts/
| |- _nucleo.scss # Icon Pack
|
|– base/
| |- _reset.scss # Reset/normalize
| |- _typography.scss # Typography rules
| |- _defaults.scss # Genesis Defaults
| |- _animations.scss # Animations
|
|– components/
| |- _graphics.scss # Graphics
| |- _buttons.scss # Buttons
| |- _widget.scss # Genesis Default Widget and Plugins
| |- _forms.scss # Forms
| |- _list-pagination.scss # List and pagination
| |- -title-divider.scss # Title and dividers
| |- _objects.scss # Customised objects
| |- _banners.scss # Banners
| |- _hero-slider.scss # Hero Slider
|
|– layout/
| |- _grid.scss # Grid
| |- _gs-structure-layout.scss # Genesis default structure and layout
| |- _header.scss # Header
| |- _sidebar.scss # Sidebar
| |- _footer.scss # Footer
|
|– pages/
| |- _post-archive.scss # Post archive styles
| |- _post-single.scss # Single Post Styles
|
|– themes/
| |- _khoozh.scss # Default theme
| |- _woocommerce.scss # Woocommerce Styles
|
|– vendors/
| |- _slick.scss # Slick Slider
| |- _slick-theme.scss # Slick Slider Theme
| |- _featherlight.scss # Featherlight Gallery
|
|- main.scss # Main Sass file
*/
/* Variables
============================================= */
/* Body Text Styles */
/* Font Weight */
/* Colors */
/* Etc. */
/* Background pattern image link*/
/* Graphic divider link */
/* For Microsite only */
/* Mixins
============================================= */
/* Media Queries
--------------------------------------------- */
/* Container
--------------------------------------------- */
/* Image Aspect Ratio
---------------------------------------------
// Apply image ratio to figure
![]()
*/
/* Absolute
--------------------------------------------- */
/* Gradient Fade
--------------------------------------------- */
/* Badge / Tag label
--------------------------------------------- */
/* Icons
--------------------------------------------- */
table.cart .product-remove a:after, .wpcf7 form .wpcf7-response-output:before {
display: inline-block;
font: normal normal normal 1em/1 "baseicon";
speak: none;
text-transform: none;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Circle Object
--------------------------------------------- */
/* Thumbnail Card
---------------------------------------------
![]()
*/
/* Line Border
--------------------------------------------- */
/* Child Margin
--------------------------------------------- */
/* Clear Fix
--------------------------------------------- */
/* Functions
============================================= */
/* Placeholders
============================================= */
/* White Gradient
--------------------------------------------- */
/* Transitions
--------------------------------------------- */
#woocommerce-product-search-field, .interactive-cart-header .interactive-cart-close, .woocommerce-MyAccount-navigation-link a, li.product, .menu-shop-menu-container a,
.widget_product_categories a, .ordering-from-widget a, .hero-slider, input[type=checkbox] + *:after, .menu-primary > li.menu-item-has-children:before, .slick-dots li button:before {
transition: all 0.3s ease-in-out;
}
/* Flexbox
--------------------------------------------- */
.woocommerce-pagination .page-numbers, .woocommerce-info a,
.woocommerce-message a, .interactive-cart-summary > div, #cart-items, .widget_layered_nav_filters ul li a::before, table.cart .product-remove a, #sidebar-toggle-close, .floating-whatsapp-button, .pagination, .wpcf7 form .wpcf7-response-output:before, .btn-icon-text i, #woocommerce-product-search-button, .header-widget-area a,
.header-widget-area button, .menu-toggle {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before, .slick-track:after {
content: "";
display: table;
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
display: none;
}
[dir=rtl] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: flex;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* Slider */
.slick-loading .slick-list {
background: #fff url("./js/plugins/slick/ajax-loader.gif") center center no-repeat;
}
/* Icons */
@font-face {
font-family: "slick";
src: url("./js/plugins/slick/fonts/slick.eot");
src: url("./js/plugins/slick/fonts/slick.eot?#iefix") format("embedded-opentype"), url("./js/plugins/slick/fonts/slick.woff") format("woff"), url("./js/plugins/slick/fonts/slick.ttf") format("truetype"), url("./js/plugins/slick/fonts/slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal;
}
/* Arrows */
.slick-next,
.slick-prev {
position: absolute;
display: block;
height: 30px;
width: 30px;
line-height: 0;
font-size: 0;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none;
z-index: 2;
}
.slick-next:focus, .slick-next:hover,
.slick-prev:focus,
.slick-prev:hover {
outline: none;
background: transparent;
color: transparent;
}
.slick-next:focus:before, .slick-next:hover:before,
.slick-prev:focus:before,
.slick-prev:hover:before {
opacity: 1;
}
.slick-next.slick-disabled:before,
.slick-prev.slick-disabled:before {
opacity: 0.25;
}
.slick-next:before,
.slick-prev:before {
font-family: "slick";
font-size: 30px;
line-height: 1;
color: #ddd;
opacity: 0.75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: 15px;
}
[dir=rtl] .slick-prev {
left: auto;
right: -35px;
}
.slick-prev:before {
content: "←";
}
[dir=rtl] .slick-prev:before {
content: "→";
}
.slick-next {
right: 15px;
}
[dir=rtl] .slick-next {
left: -25px;
right: auto;
}
.slick-next:before {
content: "→";
}
[dir=rtl] .slick-next:before {
content: "←";
}
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -25px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%;
}
.slick-dots li {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
outline: none;
line-height: 0;
font-size: 0;
color: transparent;
padding: 5px;
cursor: pointer;
}
.slick-dots li button:focus, .slick-dots li button:hover {
outline: none;
}
.slick-dots li button:focus:before, .slick-dots li button:hover:before {
opacity: 1;
font-size: 18px;
}
.slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
content: "•";
width: 20px;
height: 20px;
font-family: "slick";
font-size: 12px;
line-height: 20px;
text-align: center;
color: black;
opacity: 0.25;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
color: black;
opacity: 0.75;
}
/* --------------------------------
baseicon Web Font
Generated using nucleoapp.com
-------------------------------- */
@font-face {
font-family: "baseicon";
src: url("fonts/baseicon.eot");
src: url("fonts/baseicon.eot") format("embedded-opentype"), url("fonts/baseicon.woff2") format("woff2"), url("fonts/baseicon.woff") format("woff"), url("fonts/baseicon.ttf") format("truetype"), url("fonts/baseicon.svg") format("svg");
font-weight: normal;
font-style: normal;
}
/*------------------------
base class definition
-------------------------*/
.icon {
display: inline-block;
font: normal normal normal 1em/1 "baseicon";
speak: none;
text-transform: none;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*------------------------
change icon size
-------------------------*/
/* relative units */
.icon-sm {
font-size: 0.8em;
}
.icon-lg {
font-size: 1.2em;
}
/* absolute units */
.icon-16 {
font-size: 16px;
}
.icon-32 {
font-size: 32px;
}
/*----------------------------------
add a square/circle background
-----------------------------------*/
.icon-bg-square,
.icon-bg-circle {
padding: 0.35em;
background-color: #eee;
}
.icon-bg-circle {
border-radius: 50%;
}
/*------------------------------------
use icons as list item markers
-------------------------------------*/
.icon-ul {
padding-left: 0;
list-style-type: none;
}
.icon-ul > li {
display: flex;
align-items: flex-start;
line-height: 1.4;
}
.icon-ul > li > .icon {
margin-right: 0.4em;
line-height: inherit;
}
/*------------------------
spinning icons
-------------------------*/
.icon-is-spinning {
-webkit-animation: icon-spin 2s infinite linear;
-moz-animation: icon-spin 2s infinite linear;
animation: icon-spin 2s infinite linear;
}
@-webkit-keyframes icon-spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes icon-spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes icon-spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*------------------------
rotated/flipped icons
-------------------------*/
.icon-rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.icon-rotate-180 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.icon-rotate-270 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.icon-flip-y {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.icon-flip-x {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
}
/*------------------------
icons
-------------------------*/
.icon-account::before {
content: "\ea01";
}
.icon-bag-09::before {
content: "\ea02";
}
.icon-checked-symbol::before {
content: "\ea03";
}
.icon-facebook-1::before {
content: "\ea04";
}
.icon-facebook-circle::before {
content: "\ea05";
}
.icon-facebook::before {
content: "\ea06";
}
.icon-fax::before {
content: "\ea07";
}
.icon-ic_access_time_48px::before {
content: "\ea08";
}
.icon-ic_arrow_back_36px::before {
content: "\ea09";
}
.icon-ic_close_48px::before {
content: "\ea0a";
}
.icon-ic_mail_outline_48px::before {
content: "\ea0b";
}
.icon-instagram::before {
content: "\ea0c";
}
.icon-lock::before {
content: "\ea0d";
}
.icon-phone-2-2::before {
content: "\ea0e";
}
.icon-phone-2::before {
content: "\ea0f";
}
.icon-pin::before {
content: "\ea10";
}
.icon-placeholder::before {
content: "\ea11";
}
.icon-plus::before {
content: "\ea12";
}
.icon-shopping-cart::before {
content: "\ea13";
}
.icon-single-01::before {
content: "\ea14";
}
.icon-star::before {
content: "\ea15";
}
.icon-whatsapp-logo::before {
content: "\ea16";
}
.icon-youtube::before {
content: "\ea17";
}
.icon-zoom-2::before {
content: "\ea18";
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: 700;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
line-height: 1.3;
display: inline-block;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
[type=button],
[type=reset],
[type=submit],
button {
-webkit-appearance: button;
border: 0;
cursor: pointer;
background-color: transparent;
}
/**
* Remove the inner border and padding in Firefox.
*/
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
border-width: 0;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type=checkbox],
[type=radio] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/* Box Sizing
--------------------------------------------- */
html {
box-sizing: border-box;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
/* Typographical Elements
--------------------------------------------- */
html {
font-size: 56%;
/* 10px browser default */
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
scroll-behavior: smooth;
}
@media only screen and (min-width: 960px) {
html {
font-size: 62.5%;
}
}
/* Chrome fix */
body > div {
font-size: 14px;
font-size: 1.4rem;
}
body {
background-color: #fff;
color: #777;
font-family: "Roboto", sans-serif;
font-size: 14px;
font-size: 1.4rem;
font-weight: 400;
line-height: 1.625;
}
button,
input:focus,
input[type=button],
input[type=reset],
input[type=submit],
textarea:focus,
.button,
.gallery img {
transition: all 0.2s ease-in-out;
}
ol,
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
hr {
border: 0;
border-collapse: collapse;
border-top: 1px solid #eee;
clear: both;
margin: 30px 0;
}
b,
strong {
font-weight: 700;
}
blockquote,
cite,
em,
i {
font-style: italic;
}
mark {
background: #ddd;
color: #333;
}
blockquote {
margin: 30px;
}
blockquote::before {
content: "“";
display: block;
font-size: 30px;
font-size: 3rem;
height: 0;
left: -20px;
position: relative;
top: -10px;
}
/* Headings
--------------------------------------------- */
h1,
h2,
h3,
h4,
.woocommerce-shipping-totals th,
h5,
h6 {
font-weight: 700;
color: black;
line-height: 1.2;
margin: 0 0 2rem;
}
h1 {
font-size: 5rem;
font-family: "Roboto", sans-serif;
}
h2 {
font-size: 3.6rem;
font-family: "Roboto", sans-serif;
}
h3 {
font-size: 2.4rem;
font-family: "Roboto", sans-serif;
}
h4, .woocommerce-shipping-totals th {
font-size: 1.8rem;
font-weight: 400;
}
h5 {
font-size: 1.6rem;
}
h6 {
font-size: 1.3rem;
}
a {
text-decoration: none;
font-weight: 700;
color: black;
}
a:hover {
text-decoration: underline;
color: black;
}
label {
font-size: 1.4rem;
color: hsl(0deg, 0%, 60%);
}
/* Text
--------------------------------------------- */
p {
font-size: 1.5rem;
line-height: 2.4rem;
margin: 0 0 15px;
}
p.x-small {
font-size: 1.2rem;
line-height: 1.2;
}
p.small, .woocommerce-privacy-policy-text p, .site-footer > .wrap > p {
font-size: 1.4rem;
line-height: 1.2;
}
p.large {
font-size: 1.8rem;
line-height: 1.5;
}
/* Dark theme
--------------------------------------------- */
/* Defaults
============================================= */
/* Objects
--------------------------------------------- */
.wp-caption,
embed,
iframe,
img,
object,
video {
max-width: 100%;
}
img {
height: auto;
vertical-align: top;
}
figure {
margin: 0;
}
/* Gallery
--------------------------------------------- */
.gallery {
overflow: hidden;
}
.gallery img {
height: auto;
}
.gallery img:focus, .gallery img:hover {
outline: none;
}
/* Tables
--------------------------------------------- */
table {
border-collapse: collapse;
border-spacing: 0;
line-height: 2;
margin-bottom: 40px;
width: 100%;
}
tbody {
border-bottom: 1px solid #eee;
}
td,
th {
text-align: left;
}
td:first-child,
th:first-child {
padding-left: 0;
}
td {
border-top: 1px solid #eee;
padding: 6px;
}
th {
font-weight: 400;
padding: 0 6px;
}
/* Screen Reader Text
--------------------------------------------- */
.screen-reader-shortcut,
.screen-reader-text,
.screen-reader-text span {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-shortcut:focus,
.screen-reader-text:focus {
background: #fff;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #333;
display: block;
font-size: 1em;
font-weight: 700;
height: auto;
padding: 15px 23px 14px;
text-decoration: none;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
}
.more-link {
position: relative;
}
/* Image release
--------------------------------------------- */
.image-release {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: none;
display: block;
}
/* Vertical align column objects
--------------------------------------------- */
.vertical-center .wp-block-column {
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
/* Animations
============================================= */
.fade-scale-before, .fade-left-before, .fade-right-before, .hidden {
transition: all 0.5s ease-in-out;
opacity: 0;
}
/* fade in top */
.hidden {
transform: translateY(30px);
}
.shown {
opacity: 1;
transform: translateY(0px);
}
/* fade in right */
.fade-right-before {
transform: translateX(-30px);
}
.fade-right {
opacity: 1;
transform: translateX(0px);
}
/* fade in left */
.fade-left-before {
transform: translateX(30px);
}
.fade-left {
opacity: 1;
transform: translateX(0px);
}
/* fade in scale */
.fade-scale-before {
transform: scale(0.9);
}
.fade-scale {
opacity: 1;
transform: scale(1);
}
/* Grid
============================================= */
/* Column Mixin
--------------------------------------------- */
.woocommerce-lost-password .woocommerce, .woocommerce-order-pay .woocommerce, .woocommerce-order-received .woocommerce-customer-details,
.woocommerce-order-received .woocommerce-order-details, .shop-banner p, .entry-header p,
.regular-banner p {
padding: 0 5%;
}
@media only screen and (min-width: 960px) {
.woocommerce-lost-password .woocommerce, .woocommerce-order-pay .woocommerce, .woocommerce-order-received .woocommerce-customer-details,
.woocommerce-order-received .woocommerce-order-details, .shop-banner p, .entry-header p,
.regular-banner p {
padding: 0;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
}
.cols-2, .col2-set, .woocommerce-account.logged-in .woocommerce {
display: flex;
flex-flow: row wrap;
}
.cols-2 > *, .col2-set > *, .woocommerce-account.logged-in .woocommerce > * {
width: 100%;
margin-bottom: 30px;
}
@media only screen and (min-width: 670px) {
.cols-2 > *, .col2-set > *, .woocommerce-account.logged-in .woocommerce > * {
width: calc((100% - (30px * (2 - 1))) / 2);
margin-right: 30px;
}
.cols-2 > *:nth-child(2n), .col2-set > *:nth-child(2n), .woocommerce-account.logged-in .woocommerce > *:nth-child(2n) {
margin-right: 0;
}
}
.cols-3 {
display: flex;
flex-flow: row wrap;
}
.cols-3 > * {
width: 100%;
margin-bottom: 30px;
}
@media only screen and (min-width: 670px) {
.cols-3 > * {
width: calc((100% - (30px * (3 - 1))) / 3);
margin-right: 30px;
}
.cols-3 > *:nth-child(3n) {
margin-right: 0;
}
}
/* Column Layouts
--------------------------------------------- */
@media only screen and (min-width: 670px) {
.two-one > *:nth-child(1) {
flex: 2 1 0;
}
.two-one > *:nth-child(2) {
flex: 1 1 0;
}
}
/* Wrapper
--------------------------------------------- */
section.wrapper {
width: 100%;
padding: 50px 5%;
}
@media only screen and (min-width: 960px) {
section.wrapper {
padding: 80px 10%;
}
}
section.wrapper-small {
width: 100%;
padding: 15px 5%;
}
@media only screen and (min-width: 960px) {
section.wrapper-small {
padding: 30px 10%;
}
}
section.wrapper-large {
width: 100%;
padding: 80px 5%;
}
@media only screen and (min-width: 960px) {
section.wrapper-large {
padding: 120px 10%;
}
}
section.wrapper-full {
width: 100%;
padding: 50px 0;
}
@media only screen and (min-width: 960px) {
section.wrapper-full {
padding: 80px 0;
}
}
/* Genesis Structure and Layout
============================================== */
/* Site Container
--------------------------------------------- */
.site-container {
word-wrap: break-word;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
min-height: 100vh;
}
main.content {
flex: 1 1 100%;
}
.site-header + * {
margin-top: 95px;
}
/* Common Classes
------------------------------------------------------------------------------------------ */
/* Genesis
--------------------------------------------- */
.after-entry,
.archive-description,
.author-box {
margin-bottom: 40px;
}
.after-entry {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
padding: 20px 30px;
}
.after-entry .widget:last-of-type {
margin-bottom: 0;
}
.breadcrumb {
border-bottom: 1px solid #eee;
font-size: 16px;
font-size: 1.6rem;
margin-bottom: 40px;
padding-bottom: 10px;
}
.archive-description p:last-child,
.author-box p:last-child {
margin-bottom: 0;
}
/* Search Form
--------------------------------------------- */
.search-form {
overflow: hidden;
}
.entry-content .search-form {
margin-bottom: 40px;
width: 50%;
}
.post-password-form input[type=submit],
.search-form input[type=submit] {
margin-top: 10px;
}
.widget_search input[type=submit] {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
width: 1px;
}
/* Titles
--------------------------------------------- */
.entry-title a,
.sidebar .widget-title a {
color: #333;
text-decoration: none;
}
.entry-title a:focus,
.entry-title a:hover {
color: #0073e5;
}
.widget-title {
font-size: 16px;
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 20px;
}
/* WordPress
--------------------------------------------- */
.aligncenter {
text-align: center;
}
a.aligncenter img {
display: block;
margin: 0 auto;
}
a.alignnone {
display: inline-block;
}
.alignleft {
float: left;
text-align: left;
}
.alignright {
float: right;
text-align: right;
}
a.alignleft,
a.alignnone,
a.alignright {
max-width: 100%;
}
.aligncenter,
img.centered {
display: block;
margin: 0 auto 30px;
}
.wp-caption.alignleft,
a.alignleft,
img.alignleft {
margin: 0 20px 20px 0;
}
.wp-caption.alignright,
a.alignright,
img.alignright {
margin: 0 0 20px 20px;
}
.gallery-caption,
.wp-caption-text {
font-size: 14px;
font-size: 1.4rem;
font-weight: 600;
margin: 0;
text-align: center;
}
.entry-content p.wp-caption-text {
margin-bottom: 0;
}
.entry-content .wp-audio-shortcode,
.entry-content .wp-playlist,
.entry-content .wp-video {
margin: 0 0 30px;
}
/* Header Buttons
--------------------------------------------- */
#woocommerce-product-search-button, .header-widget-area a,
.header-widget-area button, .menu-toggle {
width: 40px;
height: 40px;
background-color: hsla(0deg, 0%, 0%, 0);
border-radius: 50%;
font-size: 17px;
color: hsl(0deg, 0%, 40%);
font-weight: 400;
line-height: 1;
}
#woocommerce-product-search-button:hover, .header-widget-area a:hover,
.header-widget-area button:hover, .menu-toggle:hover,
#woocommerce-product-search-button a:hover,
.menu-toggle a:hover {
text-decoration: none;
}
#woocommerce-product-search-button:hover, .header-widget-area a:hover,
.header-widget-area button:hover, .menu-toggle:hover {
color: #111;
}
/* Skip Links
--------------------------------------------- */
.genesis-skip-link {
margin: 0;
}
.genesis-skip-link .skip-link-hidden {
display: none;
visibility: hidden;
}
.genesis-skip-link li {
height: 0;
list-style: none;
width: 0;
}
/* Site Header
--------------------------------------------- */
.site-header {
position: fixed;
z-index: 999;
border-top: 5px solid #111;
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
top: 0;
width: 100%;
}
.site-header > .wrap {
display: flex;
flex-flow: row wrap;
align-items: center;
/* Structure */
}
.site-header > .wrap > *.pre-header {
flex: 0 0 100%;
}
.site-header > .wrap > *.title-area {
flex: 2 1 0;
}
@media only screen and (min-width: 960px) {
.site-header > .wrap > *.title-area {
flex: 0 0 auto;
}
}
.site-header > .wrap > *.header-widget-area {
flex: 1 1 0;
}
@media only screen and (min-width: 960px) {
.site-header > .wrap > *.header-widget-area {
flex: 0 0 auto;
}
}
.site-header > .wrap > *.menu-toggle {
flex: 1 1 0;
}
/* Title Area
--------------------------------------------- */
.title-area {
width: 90px;
padding: 0px 0;
order: 2;
margin: 0 auto;
}
@media only screen and (min-width: 960px) {
.title-area {
order: 0;
margin: 0 5%;
}
}
.title-area a {
display: block;
max-width: 90px;
margin: 0 auto;
}
.site-description,
.wp-custom-logo .site-title {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
/* Responsive Menu
--------------------------------------------- */
.menu .menu-item:focus {
position: static;
}
.menu .menu-item > a:focus + ul.sub-menu,
.menu .menu-item.sfHover > ul.sub-menu {
left: auto;
opacity: 1;
}
.genesis-responsive-menu {
position: relative;
display: none;
}
@media only screen and (min-width: 960px) {
.genesis-responsive-menu {
display: inherit;
}
}
/* Menu Toggle & Sub Menu Toggle */
.menu-toggle,
.sub-menu-toggle {
background-color: transparent;
border-width: 0;
color: #111;
display: block;
margin: 0 auto;
overflow: hidden;
text-align: center;
visibility: visible;
}
@media only screen and (min-width: 960px) {
.menu-toggle,
.sub-menu-toggle {
display: none;
visibility: hidden;
}
}
.menu-toggle:focus, .menu-toggle:hover,
.sub-menu-toggle:focus,
.sub-menu-toggle:hover {
background-color: transparent;
border-width: 0;
}
/* Menu Toggle */
.menu-toggle {
position: relative;
z-index: 1000;
overflow: hidden;
padding: 0;
order: 4;
margin: 0;
font-size: 0;
text-align: right;
}
.menu-toggle::before {
position: relative;
text-rendering: auto;
margin-right: 20px;
}
.menu-toggle.activated::before {
content: "\f335";
}
/* Sub Menu Toggle */
.sub-menu-toggle {
position: absolute;
right: 5px;
top: 15px;
z-index: 100;
text-align: center;
}
.sub-menu-toggle:before {
display: inline-block;
text-rendering: auto;
transform: rotate(0);
transition: transform 0.25s ease-in-out;
color: #111;
}
.sub-menu-toggle.activated:before {
transform: rotate(180deg);
color: #2b2b2b;
}
/* Header Menu
--------------------------------------------- */
.menu-primary > li:focus, .menu-primary > li:hover {
background-color: #fff;
}
@media only screen and (min-width: 960px) {
.menu-primary > li:focus, .menu-primary > li:hover {
background-color: hsl(0deg, 0%, 96%);
border-bottom: 3px solid #111;
}
}
/* Header Menu Structure */
.nav-primary {
position: fixed;
width: 100%;
height: 100%;
top: 95px;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99;
overflow-y: scroll;
display: none;
}
@media only screen and (min-width: 960px) {
.nav-primary {
position: relative;
top: 0;
height: auto;
width: auto;
background-color: transparent;
display: flex;
flex-flow: row wrap;
align-self: stretch;
overflow-y: visible;
margin-left: auto;
}
}
@media only screen and (min-width: 960px) {
.nav-primary .wrap {
height: 100%;
}
}
/* Main Header Menu */
.menu-primary {
display: flex;
flex-flow: row wrap;
position: relative;
line-height: 1;
height: 100%;
background-color: rgb(250, 250, 250);
box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.1);
/* Generic li style*/
/* Generic nav link style */
/* First level li */
/* Level 2 Menu */
}
@media only screen and (max-width: 670px) {
.menu-primary {
justify-content: center;
}
}
@media only screen and (min-width: 960px) {
.menu-primary {
background-color: transparent;
box-shadow: none;
}
}
.menu-primary .sub-menu {
z-index: 99;
box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, 0.15);
background-color: #f0f0f0;
display: none;
/* Second level li */
}
@media only screen and (min-width: 960px) {
.menu-primary .sub-menu {
position: absolute;
min-width: 180px;
width: auto;
opacity: 0;
left: 9999px;
background-color: #fff;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
border-radius: 0 0 8px 8px;
}
}
/* Styles for Main Navigation
--------------------------------------------- */
@media only screen and (min-width: 960px) {
.menu-primary .menu-item {
border: 0;
}
}
.menu-primary > li {
position: relative;
width: 100%;
/* If have children */
/* If Highlighted */
}
@media only screen and (min-width: 960px) {
.menu-primary > li {
display: block;
height: 100%;
width: auto;
}
}
.menu-primary > li.menu-item-has-children:before {
position: absolute;
content: "";
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 7px solid #111;
left: calc(50% - 10px);
opacity: 0;
bottom: 0;
}
.menu-primary > li.menu-item-has-children:hover:before {
opacity: 1;
}
.menu-primary > li.menu-item--highlight > a {
background-color: #111;
color: #fff;
margin: 0 10px;
}
@media only screen and (min-width: 960px) {
.menu-primary .sub-menu .menu-item:hover {
background-color: #111;
}
.menu-primary .sub-menu .menu-item:hover > a {
color: #fff;
}
}
.menu-primary a {
position: relative;
display: flex;
flex-flow: row wrap;
justify-content: center;
font-weight: 700;
font-family: "Roboto", sans-serif;
color: #595959;
text-transform: uppercase;
font-size: 1.3rem;
}
@media only screen and (min-width: 960px) {
.menu-primary a {
height: 100%;
text-align: left;
align-items: center;
justify-content: flex-start;
}
}
.menu-primary a:hover {
text-decoration: none;
}
.menu-primary a i {
font-weight: 400;
}
.menu-primary > li > a {
padding: 20px 24px;
}
.menu-primary .sub-menu .menu-item > a {
padding: 14px 15px;
}
@media only screen and (min-width: 960px) {
.menu-primary .sub-menu .menu-item > a {
font-size: 14px;
}
.menu-primary .sub-menu .menu-item > a:hover {
color: #fff;
background-color: #111;
}
}
/* Header Widget Area
--------------------------------------------- */
.header-widget-area {
display: flex;
flex-flow: row nowrap;
position: relative;
z-index: 101;
order: 0;
}
@media only screen and (min-width: 960px) {
.header-widget-area {
order: 3;
margin: 0 5%;
}
}
.header-widget-area .menu {
display: flex;
flex-flow: row wrap;
}
.header-widget-area .menu li {
margin-bottom: 0;
}
.header-widget-area .widget {
margin-bottom: 0;
}
/* Pre Header
--------------------------------------------- */
.pre-header {
position: relative;
font-size: 10px;
display: flex;
justify-content: space-between;
background-color: #f7f7f7;
padding: 3px 3%;
}
.pre-header > * {
margin-bottom: 0;
}
.pre-header > * i {
margin: 0 3px;
font-weight: 700;
}
.pre-header > *:nth-child(odd) {
flex: 1 1 0;
display: flex;
line-height: 2;
align-items: center;
}
.pre-header > *:nth-child(even) {
flex: 11 1 0;
text-align: center;
}
@media only screen and (min-width: 670px) {
.pre-header > *:nth-child(even) {
flex: 2 1 0;
}
}
.pre-header > *:last-child {
text-align: right;
justify-content: flex-end;
}
.pre-header p {
color: #9e1c25;
}
@media only screen and (max-width: 670px) {
.pre-header a span {
display: none;
}
}
/* Sidebar
--------------------------------------------- */
.sidebar {
font-size: 16px;
font-size: 1.6rem;
line-height: 1.5;
}
.sidebar .widget {
margin-bottom: 50px;
}
.sidebar p {
margin-bottom: 20px;
}
/* Footer
============================================== */
/* Footer Widgets
--------------------------------------------- */
.footer-widgets {
width: 100%;
padding: 30px 5%;
background-color: #fff;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
}
.footer-widgets .wrap {
display: flex;
flex-flow: column nowrap;
}
@media only screen and (min-width: 960px) {
.footer-widgets .wrap {
max-width: 960px;
margin-left: auto;
margin-right: auto;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.footer-widgets .wrap > * {
margin-right: 30px;
}
.footer-widgets .wrap > *:last-child {
margin-right: 0;
}
}
.footer-widget-area {
margin-bottom: 20px;
}
@media only screen and (min-width: 960px) {
.footer-widget-area {
margin-bottom: 0;
}
}
@media only screen and (min-width: 960px) {
.footer-widget-area:nth-child(1) {
flex: 1 1 0;
}
}
@media only screen and (min-width: 960px) {
.footer-widget-area:nth-child(2) {
flex: 3 1 0;
}
}
@media only screen and (min-width: 960px) {
.footer-widget-area:nth-child(3) {
flex: 1 1 0;
}
}
.footer-widgets .menu {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
}
.footer-widgets .menu li {
margin: 0 12px;
width: 100%;
}
@media only screen and (min-width: 960px) {
.footer-widgets .menu li {
width: auto;
}
}
.footer-widgets .menu li a {
display: block;
padding: 12px;
text-align: center;
font-size: 1.3rem;
color: #666;
}
@media only screen and (min-width: 960px) {
.footer-widgets .menu li a {
padding: 0;
}
}
.footer-widgets .menu li a i {
font-size: 16px;
}
.footer-widgets-1 img {
max-width: 90px;
width: 90px;
display: block;
margin: 0 auto;
}
@media only screen and (min-width: 960px) {
.footer-widgets-1 img {
margin: 0 auto 0 0;
}
}
.footer-widget-area:last-child,
.footer-widgets .widget:last-child {
margin-bottom: 0;
}
#menu-social-media-menu {
justify-content: center;
}
@media only screen and (max-width: 670px) {
#menu-social-media-menu .menu-item {
width: auto;
}
.site-header #menu-social-media-menu {
display: none;
}
}
/* Site Footer
--------------------------------------------- */
.site-footer {
background-color: black;
color: #f3e7d7;
line-height: 1.5;
padding: 15px 5% 5px;
}
.site-footer > .wrap {
display: flex;
flex-flow: column nowrap;
text-align: center;
}
.site-footer > .wrap > p {
margin: 0 0 5px;
}
/* Graphics
============================================= */
/* Secondary Graphic
--------------------------------------------- */
/* Background Pattern
--------------------------------------------- */
.shop-banner, .entry-header,
.regular-banner {
background: url("../../../../static/background-pattern.jpg") no-repeat center/cover;
}
@media only screen and (min-width: 960px) {
.shop-banner, .entry-header,
.regular-banner {
background-attachment: fixed;
}
}
/* Divider after title
--------------------------------------------- */
/* Buttons
=============================================
btn-1
btn-2
btn-icon-text
*/
/* Structure of a button */
.woocommerce-info a,
.woocommerce-message a, button[type=submit],
.button, .wapf-radios .wapf-label-text, .added_to_cart, form input[type=submit], .btn {
position: relative;
display: inline-block;
line-height: initial;
font-weight: 700;
text-align: center;
text-transform: uppercase;
top: 0;
border: 0;
transition: all 0.15s ease-in-out;
cursor: pointer;
padding: 0.9em 1.2em;
font-size: 1.3rem;
}
.woocommerce-info a:hover,
.woocommerce-message a:hover, button[type=submit]:hover,
.button:hover, .wapf-radios .wapf-label-text:hover, .added_to_cart:hover, form input[type=submit]:hover, .btn:hover {
text-decoration: none;
}
.woocommerce-pagination a,
.woocommerce-pagination span, header.woocommerce-Address-title a, .btn-small {
position: relative;
display: inline-block;
line-height: initial;
font-weight: 700;
text-align: center;
text-transform: uppercase;
top: 0;
border: 0;
transition: all 0.15s ease-in-out;
cursor: pointer;
padding: 0.6em 0.9em;
font-size: 1.2rem;
}
.woocommerce-pagination a:hover,
.woocommerce-pagination span:hover, header.woocommerce-Address-title a:hover, .btn-small:hover {
text-decoration: none;
}
#shipping_method label, #sidebar-toggle, .radio-input-wrapper input[type=radio] + *, .btn-large {
position: relative;
display: inline-block;
line-height: initial;
font-weight: 700;
text-align: center;
text-transform: uppercase;
top: 0;
border: 0;
transition: all 0.15s ease-in-out;
cursor: pointer;
padding: 1.2em;
font-size: 1.4rem;
}
#shipping_method label:hover, #sidebar-toggle:hover, .radio-input-wrapper input[type=radio] + :hover, .btn-large:hover {
text-decoration: none;
}
.btn.align-c {
margin: 0 auto;
display: table;
}
/* Solid Button - btn-1
--------------------------------------------- */
.woocommerce-pagination a, .woocommerce-info a,
.woocommerce-message a, .wc-backward, .checkout-button,
a.add_to_cart_button,
button.add_to_cart_button,
button[type=submit], .wapf-radios .wapf-checkable.wapf-checked .wapf-label-text, .woocommerce-form-login__submit,
.woocommerce-form-register__submit, #shipping_method input[type=hidden] + label, #shipping_method input[type=radio]:checked + label, #sidebar-toggle, form input[type=submit], .btn-1 {
background-color: black;
color: #fff;
border-radius: 3px;
}
.woocommerce-pagination a:hover, .woocommerce-info a:hover,
.woocommerce-message a:hover, .wc-backward:hover, .checkout-button:hover,
a.add_to_cart_button:hover,
button.add_to_cart_button:hover,
button[type=submit]:hover, .wapf-radios .wapf-checkable.wapf-checked .wapf-label-text:hover, .woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover, #shipping_method input[type=hidden] + label:hover, #shipping_method input[type=radio]:checked + label:hover, #sidebar-toggle:hover, form input[type=submit]:hover, .btn-1:hover {
color: #fff;
background-color: black;
}
.woocommerce-pagination a:active, .woocommerce-info a:active,
.woocommerce-message a:active, .wc-backward:active, .checkout-button:active,
a.add_to_cart_button:active,
button.add_to_cart_button:active,
button[type=submit]:active, .wapf-radios .wapf-checkable.wapf-checked .wapf-label-text:active, .woocommerce-form-login__submit:active,
.woocommerce-form-register__submit:active, #shipping_method input[type=hidden] + label:active, #shipping_method input[type=radio]:checked + label:active, #sidebar-toggle:active, form input[type=submit]:active, .btn-1:active {
transform: translateY(3px);
}
header.woocommerce-Address-title a, .radio-input-wrapper input[type=radio] + *, .btn-1-secondary {
background-color: hsl(0deg, 0%, 60%);
color: hsl(0deg, 0%, 100%);
border-radius: 3px;
}
header.woocommerce-Address-title a:hover, .radio-input-wrapper input[type=radio] + :hover, .btn-1-secondary:hover {
color: #fff;
background-color: #737373;
}
header.woocommerce-Address-title a:active, .radio-input-wrapper input[type=radio] + :active, .btn-1-secondary:active {
transform: translateY(3px);
}
.woocommerce-pagination span, .shop_table .button, .wapf-radios .wapf-label-text, #shipping_method label, .added_to_cart, .btn-1-light {
background-color: hsl(0deg, 0%, 90%);
color: hsl(0deg, 0%, 50%);
border-radius: 3px;
}
.woocommerce-pagination span:hover, .shop_table .button:hover, .wapf-radios .wapf-label-text:hover, #shipping_method label:hover, .added_to_cart:hover, .btn-1-light:hover {
color: #fff;
background-color: #bfbfbf;
}
.woocommerce-pagination span:active, .shop_table .button:active, .wapf-radios .wapf-label-text:active, #shipping_method label:active, .added_to_cart:active, .btn-1-light:active {
transform: translateY(3px);
}
.btn-1-success {
background-color: #689447;
color: hsl(0deg, 0%, 100%);
border-radius: 3px;
}
.btn-1-success:hover {
color: #fff;
background-color: #44602e;
}
.btn-1-success:active {
transform: translateY(3px);
}
.btn-1-info {
background-color: #369;
color: hsl(0deg, 0%, 100%);
border-radius: 3px;
}
.btn-1-info:hover {
color: #fff;
background-color: #204060;
}
.btn-1-info:active {
transform: translateY(3px);
}
.btn-1-warning {
background-color: #f7e720;
color: #484303;
border-radius: 3px;
}
.btn-1-warning:hover {
color: #fff;
background-color: #c3b507;
}
.btn-1-warning:active {
transform: translateY(3px);
}
.btn-1-danger {
background-color: #9e1c25;
color: hsl(0deg, 0%, 100%);
border-radius: 3px;
}
.btn-1-danger:hover {
color: #fff;
background-color: #5d1016;
}
.btn-1-danger:active {
transform: translateY(3px);
}
/* Outline Button - btn-2
--------------------------------------------- */
.btn-2 {
background-color: transparent;
color: #111;
border: 2px solid #2b2b2b;
border-radius: 5px;
text-transform: none;
}
.btn-2:hover {
background-color: #111;
border-color: #111;
color: #fff;
}
.btn-2-white {
background-color: transparent;
color: #fff;
border: 2px solid white;
border-radius: 5px;
text-transform: none;
}
.btn-2-white:hover {
background-color: #fff;
border-color: #fff;
color: #fff;
}
.btn-2-white:hover {
color: black;
}
/* Button Icon Text - .btn-icon-text
--------------------------------------------- */
.btn-icon-text {
display: flex;
align-items: center;
border-radius: 3px;
background-color: black;
color: #fff;
width: auto;
padding: 6px 12px;
}
.btn-icon-text:hover {
color: #fff;
}
.btn-icon-text i {
width: 30px;
height: 30px;
background-color: hsla(0deg, 0%, 100%, 0);
border-radius: 50%;
font-size: 18px;
margin-right: 5px;
margin-left: -5px;
}
.btn-icon-text i:hover,
.btn-icon-text i a:hover {
text-decoration: none;
}
/* Genesis Widgets
============================================= */
/* Widget
--------------------------------------------- */
.widget {
margin-bottom: 40px;
}
.widget p:last-child,
.widget ul > li:last-of-type {
margin-bottom: 0;
}
.widget ul > li {
margin-bottom: 10px;
}
.widget ul > li:last-of-type {
padding-bottom: 0;
}
.widget ol > li {
list-style-position: inside;
list-style-type: decimal;
padding-left: 20px;
text-indent: -20px;
}
.widget li li {
border: 0;
margin: 0 0 0 30px;
padding: 0;
}
.widget_calendar table {
width: 100%;
}
.widget_calendar td,
.widget_calendar th {
text-align: center;
}
/* Featured Content
--------------------------------------------- */
/* Plugins
---------------------------------------------------------------------------------------------------- */
/* Genesis eNews Extended
--------------------------------------------- */
/* Genesis Simple FAQ
--------------------------------------------- */
/* Jetpack
--------------------------------------------- */
/* Forms
============================================== */
/*
** Form Errors
*/
.woocommerce-invalid-required-field label {
color: #9e1c25 !important;
}
.woocommerce-invalid-required-field input, .StripeElement.invalid {
box-shadow: 0 0 0 2px #9e1c25 !important;
border: 1px solid white !important;
}
/*CONTACT FORM*/
:focus {
outline: 0;
}
::placeholder {
opacity: 0.5;
}
input:not([type=submit]):not([type=file]),
textarea {
height: 38px;
width: 100%;
padding: 6px 10px;
background-color: #fff;
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
color: #555;
}
@media only screen and (max-width: 670px) {
input:not([type=submit]):not([type=file]),
textarea {
font-size: 16px;
line-height: 1.5;
}
}
/* Removes awkward default styles on some inputs for iOS */
input:not([type=submit]):not([type=file]),
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input:not([type=submit]):not([type=file]):focus, input:not([type=submit]):not([type=file]):hover,
select:focus,
select:hover,
textarea:focus,
textarea:hover {
background-color: #eaeaea;
border: 1px solid #bbbbbb;
outline: 0;
}
input:not([type=submit]):not([type=file]):focus,
select:focus,
textarea:focus {
box-shadow: 0 0 0 2px #140e0e;
border: 1px solid white;
}
input[type=checkbox],
input[type=radio] {
display: inline;
}
form p {
margin-bottom: 20px;
}
form label {
font-weight: 700;
}
form textarea {
min-height: 80px;
}
form input[type=file] {
padding: 0.6em 0;
background-color: transparent;
border: 0;
}
form input[type=submit] {
width: 100%;
}
form input[type=submit]:disabled {
background: #f1f1f2;
box-shadow: 0 0 0 0 #ccc;
}
form input[type=submit]:disabled:hover {
top: 0;
}
/*WPCF7 SPECIFIC ERROR AND APPROVAL MESSAGES*/
.wpcf7 form .wpcf7-list-item {
margin: 0;
}
.wpcf7 form .wpcf7-not-valid-tip {
color: #fff;
background-color: #cc4a4a;
padding: 0.2em 0.6em;
font-size: 1.2rem;
font-weight: 700;
border-radius: 0 0 5px 5px;
text-align: center;
}
.wpcf7 form .wpcf7-response-output {
position: relative;
margin: 10px 0;
padding: 0.5em 1em;
border: 0 solid #cc4a4a;
font-size: 1.4rem;
line-height: 2.2rem;
color: #fff;
background-color: #cc4a4a;
border-radius: 5px;
font-weight: 600;
}
.wpcf7 form .wpcf7-response-output:before {
font-weight: 700;
left: 5px;
top: calc(50% - 15px);
position: absolute;
width: 30px;
height: 30px;
border-radius: 15px;
background-color: rgba(255, 255, 255, 0.3);
}
.wpcf7 form .wpcf7-acceptance-missing,
.wpcf7 form .wpcf7-validation-errors {
padding-left: 40px;
}
.wpcf7 form .wpcf7-acceptance-missing:before,
.wpcf7 form .wpcf7-validation-errors:before {
content: "\ea0a";
}
.wpcf7 form .wpcf7-mail-sent-ok {
padding-left: 40px;
background-color: green;
}
.wpcf7 form .wpcf7-mail-sent-ok:before {
content: "\ea03";
}
/* Select Reset
--------------------------------------------- */
select {
display: block;
font-size: 1.5rem;
color: #555;
line-height: 1.3;
padding: 0.6em 1.4em 0.5em 0.8em;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
border: 1px solid #ccc;
border-radius: 0.3em;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat, repeat;
background-position: right 0.7em top 50%, 0 0;
background-size: 0.65em auto, 100%;
}
@media only screen and (max-width: 670px) {
select {
font-size: 16px;
}
}
select::-ms-expand {
display: none;
}
select:hover {
border-color: #888;
}
select:focus {
border-color: #aaa;
box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
box-shadow: 0 0 0 3px -moz-mac-focusring;
color: #222;
outline: none;
}
select option {
font-weight: normal;
}
/* Checkbox Reset
--------------------------------------------- */
input[type=checkbox] {
display: none;
position: absolute;
-webkit-appearance: none;
}
input[type=checkbox] + * {
position: relative;
line-height: 1.5;
display: inline;
}
input[type=checkbox] + * > * {
float: left;
}
input[type=checkbox] + *:after, input[type=checkbox] + *:before {
pointer-events: none;
content: "";
}
input[type=checkbox] + *:before {
display: inline-flex;
height: 16px;
min-width: 16px;
width: 16px;
border: solid 2px #ccc;
background: #fff;
margin-right: 10px;
}
input[type=checkbox] + *:after {
position: absolute;
height: 11px;
width: 22px;
top: 0;
left: 0;
border-bottom: solid 3px #999;
border-left: solid 3px #999;
background: none;
transform: rotate(-45deg) scale(0);
transform-origin: center center;
}
input[type=checkbox] + *:hover {
opacity: 0.8;
}
input[type=checkbox]:checked + *:before {
border-color: #f2f2f2;
background-color: #f2f2f2;
}
input[type=checkbox]:checked + *:after {
opacity: 1;
transform: rotate(-45deg) scale(0.8);
border-bottom: solid 4px #689447;
border-left: solid 4px #689447;
}
/* List style
--------------------------------------------- */
.number-list, div.product .woocommerce-product-details__short-description ol, .item-list, div.product .woocommerce-product-details__short-description ul {
margin-bottom: 24px;
}
.number-list li, div.product .woocommerce-product-details__short-description ol li, .item-list li, div.product .woocommerce-product-details__short-description ul li {
margin-bottom: 12px;
margin-left: 24px;
}
.number-list ol, div.product .woocommerce-product-details__short-description ol ol, .item-list ol, div.product .woocommerce-product-details__short-description ul ol,
.number-list ul,
div.product .woocommerce-product-details__short-description ol ul,
.item-list ul,
div.product .woocommerce-product-details__short-description ul ul {
margin-bottom: 0;
}
.item-list > li, div.product .woocommerce-product-details__short-description ul > li {
list-style-type: disc;
}
.number-list > li, div.product .woocommerce-product-details__short-description ol > li {
list-style-type: decimal;
}
/* Entry Meta
--------------------------------------------- */
.entry-footer .entry-meta {
border-top: 1px solid #eee;
padding-top: 20px;
}
.entry-comments-link::before {
content: "—";
margin: 0 6px 0 2px;
}
/* Pagination
--------------------------------------------- */
.pagination {
position: relative;
margin: 60px 0;
}
.adjacent-entry-pagination {
margin-bottom: 0;
}
.archive-pagination li {
display: inline;
}
.archive-pagination li a {
background-color: #f5f5f5;
color: #333;
cursor: pointer;
display: inline-block;
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 4px;
padding: 8px 12px;
text-decoration: none;
}
.archive-pagination li a:focus,
.archive-pagination li a:hover,
.archive-pagination li.active a {
background-color: #333;
color: #fff;
}
/* Section Title
--------------------------------------------- */
.section-title {
margin-bottom: 20px;
}
.section-title.align-c {
text-align: center;
margin: 0 auto;
}
.section-title h4, .section-title .woocommerce-shipping-totals th, .woocommerce-shipping-totals .section-title th {
position: relative;
color: #111;
font-family: "Roboto", sans-serif;
font-size: 1.4rem;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 10px;
}
/* Divider
--------------------------------------------- */
hr {
border: 0;
}
hr.small {
margin: 10px 0;
}
.divider-c, .divider {
position: relative;
margin: 15px 0;
border-top: 1px solid #111;
width: 50px;
}
.divider-c {
margin-left: auto;
margin-right: auto;
}
/* Image Banner
==========================================
*/
/* Banners
============================================== */
.hero-slider, .shop-banner, .entry-header,
.regular-banner {
position: relative;
width: 100%;
z-index: 0;
padding: 50px 5%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
.hero-slider img, .shop-banner img, .entry-header img,
.regular-banner img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
object-fit: cover;
}
/* Regular Banner
--------------------------------------------- */
.shop-banner, .entry-header,
.regular-banner {
height: auto;
min-height: 250px;
text-align: center;
}
.shop-banner > *, .entry-header > *,
.regular-banner > * {
margin-bottom: 10px;
}
.shop-banner > *:last-child, .entry-header > *:last-child,
.regular-banner > *:last-child {
margin-bottom: 0;
}
.shop-banner p, .entry-header p,
.regular-banner p {
font-family: "Roboto", sans-serif;
}
.shop-banner img, .entry-header img,
.regular-banner img {
opacity: 0.8;
}
/* Giant Banner
--------------------------------------------- */
/* Hero Slider
============================================= */
/* Giant Banner Slider */
.hero-slider {
padding: 0;
overflow: hidden;
height: auto;
}
@media only screen and (max-width: 670px) {
.hero-slider {
max-height: none;
}
}
@media only screen and (min-width: 670px) {
.hero-slider {
max-height: 720px;
}
}
.hero-slider .slick-next,
.hero-slider .slick-prev {
z-index: 5;
}
@media only screen and (max-width: 670px) {
.hero-slider .slick-next,
.hero-slider .slick-prev {
top: 50vw;
}
}
.hero-slider .slick-next:before,
.hero-slider .slick-prev:before {
color: black;
}
.hero-slider .slick-prev {
left: 1%;
}
.hero-slider .slick-next {
right: 1%;
}
.hero-slider--short {
max-height: none;
}
@media only screen and (min-width: 670px) {
.hero-slider--short {
max-height: 400px;
}
}
.hero-slider--short .hero-slide {
height: auto;
}
@media only screen and (min-width: 670px) {
.hero-slider--short .hero-slide {
height: 400px;
max-height: 400px;
}
}
@media only screen and (min-width: 960px) {
.hero-slider--short .hero-slide {
height: 100vh;
}
}
.hero-slider--short .hero-slide img {
max-height: 50vw;
height: 100%;
}
@media only screen and (min-width: 670px) {
.hero-slider--short .hero-slide figcaption {
height: 50vw;
}
}
/* Giant Banner Slide */
.hero-slide {
height: auto;
/* Generic Figcaption Styles */
/* Caption Positions */
/* Dark font styles */
}
@media only screen and (max-width: 670px) {
.hero-slide {
flex-direction: column;
}
}
@media only screen and (min-width: 670px) {
.hero-slide {
height: 70vh;
}
}
@media only screen and (min-width: 960px) {
.hero-slide {
max-height: 56.25vw;
height: 100vh;
}
}
.hero-slide figcaption {
position: relative;
height: auto;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
z-index: 0;
width: 100%;
}
@media only screen and (max-width: 670px) {
.hero-slide figcaption {
padding: 20px 5%;
text-align: center;
align-items: center;
}
.hero-slide figcaption:before {
position: absolute;
content: "";
left: 0;
top: -99px;
width: 100%;
height: 100px;
background: linear-gradient(to top, hsl(255deg, 100%, 100%) 0%, hsla(255deg, 100%, 100%, 0) 100%);
}
}
@media only screen and (max-width: 670px) and (max-width: 670px) {
.hero-slide figcaption:before {
content: none;
}
}
@media only screen and (max-width: 670px) {
.hero-slide figcaption br {
display: none;
}
}
@media only screen and (max-width: 670px) {
.hero-slide figcaption p {
margin-bottom: 10px !important;
}
}
@media only screen and (min-width: 670px) {
.hero-slide figcaption {
position: absolute;
}
}
.hero-slide figcaption h2 {
font-size: 4.8rem;
color: black;
font-weight: 700;
}
.hero-slide figcaption h4, .hero-slide figcaption .woocommerce-shipping-totals th, .woocommerce-shipping-totals .hero-slide figcaption th {
font-family: "Roboto", sans-serif;
font-size: 1.4rem;
color: black;
font-weight: 700;
margin-bottom: 0;
}
@media only screen and (max-width: 670px) {
.hero-slide img {
position: relative;
height: 100vw;
}
}
.hero-slide--left:before {
left: 0;
}
.hero-slide--left.hero-slide--light:before {
background: linear-gradient(to right, hsl(255deg, 100%, 100%) 0%, hsla(255deg, 100%, 100%, 0) 100%);
}
.hero-slide--left.hero-slide--dark:before {
background: linear-gradient(to right, hsl(0deg, 0%, 0%) 0%, hsla(0deg, 0%, 0%, 0) 100%);
}
@media only screen and (min-width: 670px) {
.hero-slide--left figcaption {
left: 5vw;
}
}
.hero-slide--right:before {
right: 0;
}
.hero-slide--right.hero-slide--light:before {
background: linear-gradient(to left, hsl(255deg, 100%, 100%) 0%, hsla(255deg, 100%, 100%, 0) 100%);
}
.hero-slide--right.hero-slide--dark:before {
background: linear-gradient(to left, hsl(0deg, 0%, 0%) 0%, hsla(0deg, 0%, 0%, 0) 100%);
}
@media only screen and (min-width: 670px) {
.hero-slide--right figcaption {
right: 5vw;
text-align: right;
align-items: flex-end;
}
}
.hero-slide--top:before {
top: 0;
}
.hero-slide--top.hero-slide--light:before {
background: linear-gradient(to bottom, hsl(255deg, 100%, 100%) 0%, hsla(255deg, 100%, 100%, 0) 100%);
}
.hero-slide--top.hero-slide--dark:before {
background: linear-gradient(to bottom, hsl(0deg, 0%, 0%) 0%, hsla(0deg, 0%, 0%, 0) 100%);
}
@media only screen and (min-width: 670px) {
.hero-slide--top figcaption {
top: 0;
}
}
.hero-slide--top img {
object-position: bottom;
}
.hero-slide--bottom:before {
bottom: 0;
}
.hero-slide--bottom.hero-slide--light:before {
background: linear-gradient(to top, hsl(255deg, 100%, 100%) 0%, hsla(255deg, 100%, 100%, 0) 100%);
}
.hero-slide--bottom.hero-slide--dark:before {
background: linear-gradient(to top, hsl(0deg, 0%, 0%) 0%, hsla(0deg, 0%, 0%, 0) 100%);
}
@media only screen and (min-width: 670px) {
.hero-slide--bottom figcaption {
bottom: 0;
}
}
@media only screen and (min-width: 670px) {
.hero-slide--dark figcaption * {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.hero-slide--dark figcaption h2 {
color: #fff;
}
.hero-slide--dark figcaption h4, .hero-slide--dark figcaption .woocommerce-shipping-totals th, .woocommerce-shipping-totals .hero-slide--dark figcaption th {
color: #fff;
}
.hero-slide--dark figcaption p {
color: #fff;
font-weight: 700;
}
}
/* Left and right figcaption*/
@media only screen and (min-width: 670px) {
.hero-slide--left figcaption, .hero-slide--right figcaption {
top: 50%;
transform: translateY(-50%);
width: 40%;
max-width: 400px;
}
.hero-slide--top figcaption, .hero-slide--bottom figcaption {
left: 0;
height: 50%;
padding: 0 20%;
text-align: center;
align-items: center;
justify-content: center;
}
}
.hero-slide--top:before, .hero-slide--bottom:before, .hero-slide--left:before, .hero-slide--right:before {
position: absolute;
mix-blend-mode: overlay;
opacity: 0.5;
}
@media only screen and (min-width: 670px) {
.hero-slide--top:before, .hero-slide--bottom:before, .hero-slide--left:before, .hero-slide--right:before {
content: "";
}
}
.hero-slide--left:before, .hero-slide--right:before {
top: 0;
width: 50%;
height: 100%;
}
.hero-slide--top:before, .hero-slide--bottom:before {
left: 0;
width: 100%;
height: 50%;
}
.single-page .entry-content {
max-width: 960px;
padding: 0 50px;
margin: 50px auto 0;
}
/* Floating button */
.floating-whatsapp-button {
width: 46px;
height: 46px;
background-color: #25d366;
border-radius: 50%;
font-size: 23px;
position: fixed;
font-weight: 400;
right: 10px;
bottom: 10px;
z-index: 9999999;
color: #fff;
text-align: center;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
line-height: 46px;
}
.floating-whatsapp-button:hover,
.floating-whatsapp-button a:hover {
text-decoration: none;
}
@media only screen and (max-width: 670px) {
.my-account-button.header-icon-button {
display: none;
}
}
/* Hitpay */
.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
display: block !important;
}
.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details {
display: flex !important;
}
.payment-panel-completed > * {
display: flex;
flex-flow: column nowrap;
justify-content: center;
background: transparent !important;
color: #444 !important;
align-items: center;
}
.multi-home-content {
display: flex;
flex-flow: column nowrap;
max-width: 960px;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 auto;
padding: 25px;
min-height: calc(100vh - 60px);
}
@media only screen and (min-width: 670px) {
.multi-home-content {
padding: 50px;
}
}
.multi-home-content > * {
width: 100%;
}
.multi-home-content .custom-logo-link {
width: 130px;
}
@media only screen and (min-width: 670px) {
.multi-home-content .custom-logo-link {
width: 200px;
}
}
#locations-button-wrapper,
#postal-code-shortlist {
margin-top: 40px;
}
.radio-input-wrapper input[type=radio] {
display: none;
}
.radio-input-wrapper input[type=radio] + * {
width: 100%;
}
.radio-input-wrapper input[type=radio]:checked + * {
background-color: #111;
}
.ordering-from-widget {
top: 95px;
position: fixed;
font-size: 11px;
background-color: black;
color: #fff;
padding: 4px 10px;
}
@media only screen and (max-width: 670px) {
.ordering-from-widget {
width: 100%;
text-align: center;
}
}
@media only screen and (min-width: 670px) {
.ordering-from-widget {
right: 5%;
border-radius: 0 0 8px 8px;
}
}
.ordering-from-widget:hover a {
max-height: 50px;
}
.ordering-from-widget a {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
max-height: 0;
overflow: hidden;
}
.ordering-from-widget a i {
position: relative;
font-weight: 700;
}
/*
* Edited 20190727
*/
/*
* TABLE OF CONTENTS
* ----------- *
* - Woocommerce Variables
* - Woocommerce Global Styles
* - Add to Cart Button
* - Breadcrumb
* - Sale Label
* - Message box
* - Pagination
*/
/* Woocommerce Variables */
form label, .addresses address p:before,
.woocommerce-customer-details address p:before, .addresses address:before,
.woocommerce-customer-details address:before, .woocommerce-order-overview .deliveryDetails > span, .variation .wc-item-meta-label,
.variation dt,
.wc-item-meta .wc-item-meta-label,
.wc-item-meta dt, div.product-type-variable .single_variation_wrap .woocommerce-variation-price .price:before {
display: block;
clip: unset;
width: auto;
height: auto;
text-transform: none;
font-size: 14px;
cursor: pointer;
color: hsl(0deg, 0%, 50%);
font-weight: 700;
}
div.product-type-variable .single_variation_wrap .woocommerce-variation-price .price:before {
font-weight: 700;
font-size: 1.6rem;
color: #666;
}
/* Archive Page Main Layout
============================================= */
.archive.woocommerce .content {
width: 100%;
display: flex;
flex-flow: row wrap;
align-items: flex-start;
padding: 0 3vw;
margin-top: 0;
}
@media only screen and (min-width: 960px) {
.archive.woocommerce .content {
padding: 0 5%;
}
}
.archive.woocommerce aside.widget-area {
align-self: stretch;
}
@media only screen and (max-width: 670px) {
.archive.woocommerce aside.widget-area {
position: fixed;
display: none;
width: 100%;
margin-right: 0;
border-right: 0;
z-index: 10000;
background: #fff;
height: 100vh;
top: 0;
left: 0;
padding: 100px 50px;
overflow: scroll;
}
}
/* Shop Banner
--------------------------------------------- */
.shop-banner {
min-height: 0;
}
.shop-banner p {
padding: 0;
margin-left: auto;
margin-right: auto;
font-size: 1.4rem;
}
@media only screen and (min-width: 960px) {
.shop-banner p {
max-width: 60vw;
}
}
/* Shop Archive Top Bar
--------------------------------------------- */
.archive-topbar {
border-bottom: 2px solid #f1f1f1;
padding-bottom: 30px;
margin-bottom: 30px;
position: relative;
width: 100%;
padding: 20px 0;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
.woocommerce-result-count {
margin-bottom: 0;
color: hsl(0deg, 0%, 60%);
font-size: 1.2rem;
}
.woocommerce-ordering {
width: 100%;
}
@media only screen and (max-width: 670px) {
.woocommerce-ordering {
margin-bottom: 10px;
}
}
@media only screen and (min-width: 960px) {
.woocommerce-ordering {
width: 250px;
}
}
/* Shop Archive Widget Area
--------------------------------------------- */
.woocommerce aside.widget-area {
border-right: 2px solid #f1f1f1;
padding-right: 15px;
margin-right: 15px;
margin-bottom: 30px;
width: 150px;
}
@media only screen and (min-width: 960px) {
.woocommerce aside.widget-area {
border-right: 2px solid #f1f1f1;
padding-right: 30px;
margin-right: 30px;
width: 250px;
}
}
.woocommerce aside.widget-area .widget {
border-bottom: 2px solid #f1f1f1;
padding-bottom: 30px;
margin-bottom: 30px;
}
/* Sidebar Toggle */
#sidebar-toggle {
width: 100%;
}
@media only screen and (min-width: 670px) {
#sidebar-toggle {
display: none;
}
}
#sidebar-toggle-close {
width: 40px;
height: 40px;
background-color: #f1f1f1;
border-radius: 50%;
font-size: 25px;
color: black;
position: absolute;
top: 5vw;
right: 5vw;
}
#sidebar-toggle-close:hover,
#sidebar-toggle-close a:hover {
text-decoration: none;
}
@media only screen and (min-width: 960px) {
#sidebar-toggle-close {
display: none;
}
}
/* Specifically for product category */
.menu-shop-menu-container,
.widget_product_categories {
font-size: 1.4rem;
}
.menu-shop-menu-container a,
.widget_product_categories a {
color: hsl(0deg, 0%, 60%);
display: block;
padding: 0.2em 0;
}
.menu-shop-menu-container a:hover,
.widget_product_categories a:hover {
color: hsl(0deg, 0%, 40%);
padding-left: 0.4em;
text-decoration: none;
}
/* Products
--------------------------------------------- */
/* Structure of products to differentiate it from related products */
.archive.woocommerce .products {
display: flex;
flex-flow: row wrap;
}
.archive.woocommerce .products > * {
width: calc((100% - (5px / 2 * (2 - 1))) / 2);
margin-right: 2.5px;
}
@media only screen and (max-width: 670px) {
.archive.woocommerce .products > * {
margin-bottom: 2.5px;
}
}
@media only screen and (max-width: 670px) {
.archive.woocommerce .products > *:nth-child(2n) {
margin-right: 0;
}
}
@media only screen and (min-width: 670px) {
.archive.woocommerce .products > * {
width: calc((100% - (5px * (4 - 1))) / 4);
margin-right: 5px;
}
.archive.woocommerce .products > *:nth-child(4n) {
margin-right: 0;
}
}
ul.products {
position: relative;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
flex: 1 1 0;
margin-bottom: 30px;
}
@media only screen and (min-width: 960px) {
ul.products {
justify-content: flex-start;
}
}
/* Product List */
li.product {
position: relative;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
text-align: center;
padding: 5px;
}
li.product > * {
margin-bottom: 10px;
}
li.product > *:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 960px) {
li.product {
padding: 10px;
}
li.product:hover {
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
}
}
li.product a {
width: 100%;
text-decoration: none;
}
li.product .attachment-woocommerce_thumbnail,
li.product .woocommerce-placeholder {
object-fit: contain;
width: 100%;
height: 180px;
margin-bottom: 30px;
background-color: #000;
}
@media only screen and (min-width: 960px) {
li.product .attachment-woocommerce_thumbnail,
li.product .woocommerce-placeholder {
transition: all 0.2s ease-in-out;
margin-left: auto;
margin-right: auto;
}
}
li.product .woocommerce-placeholder {
object-fit: contain;
}
li.product .woocommerce-loop-product__title {
font-size: 1.6rem;
color: black;
margin-bottom: 5px;
}
li.product .price {
font-size: 1.4rem;
font-weight: 400;
color: #999;
/* For sale item */
}
li.product .price ins {
font-weight: 700;
color: #111;
text-decoration: none;
}
/* Added to cart button */
/* Single Product Layout */
.single-product .product-primary-information {
background-color: hsl(0deg, 0%, 97%);
padding: 0 2.5%;
}
@media only screen and (min-width: 670px) {
.single-product .product-primary-information {
padding: 0 5%;
}
}
/* Simple AND Variable Product */
div.product {
position: relative;
width: 100%;
display: flex;
flex-flow: row wrap;
/* Common Product Description / Summary */
}
div.product .summary {
position: relative;
}
div.product .summary > * {
margin-bottom: 15px;
}
div.product .summary > *:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 670px) {
div.product .summary {
flex: 1 1 0;
}
}
div.product .product_title {
font-size: 3rem;
}
div.product .price {
font-size: 2rem;
font-weight: 700;
}
div.product .woocommerce-product-details__short-description {
padding: 20px 10px;
background-color: hsl(0deg, 0%, 100%);
border-radius: 5px;
border: 1px solid hsl(0deg, 0%, 90%);
}
@media only screen and (min-width: 670px) {
div.product .woocommerce-product-details__short-description {
padding: 20px;
}
}
div.product .woocommerce-product-details__short-description > *:last-child {
margin-bottom: 0;
}
/* Common Product Page Gallery */
.woocommerce-product-gallery img {
display: block;
width: 100%;
height: auto;
box-shadow: none;
}
.woocommerce-product-gallery div.thumbnails {
padding-top: 1em;
}
.woocommerce-product-gallery.woocommerce-product-gallery {
position: relative;
margin-bottom: 40px;
display: flex;
flex-flow: row wrap;
}
@media only screen and (min-width: 670px) {
.woocommerce-product-gallery.woocommerce-product-gallery {
flex: 1 1 0;
margin-right: 50px;
flex-flow: row-reverse nowrap;
max-width: 42vw;
}
}
.woocommerce-product-gallery.woocommerce-product-gallery .woocommerce-product-gallery__image {
background-color: transparent;
}
.woocommerce-product-gallery.woocommerce-product-gallery .woocommerce-product-gallery__image a > img {
height: 400px;
object-fit: contain;
}
@media only screen and (min-width: 670px) {
.woocommerce-product-gallery.woocommerce-product-gallery .woocommerce-product-gallery__image a > img {
height: 500px;
}
}
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
transition: all cubic-bezier(0.795, -0.035, 0, 1) 0.5s;
margin: 0;
padding: 0;
}
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper .zoomImg {
background-color: #fff;
opacity: 0;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image--placeholder {
border: 1px solid #f2f2f2;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) {
width: 25%;
display: inline-block;
}
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
position: absolute;
top: 0.5em;
right: 0.5em;
font-size: 2em;
z-index: 9;
width: 36px;
height: 36px;
background: #fff;
text-indent: -9999px;
border-radius: 100%;
box-sizing: content-box;
}
.woocommerce-product-gallery .woocommerce-product-gallery__trigger::before {
content: "";
display: block;
width: 10px;
height: 10px;
border: 2px solid #000;
border-radius: 100%;
position: absolute;
top: 9px;
left: 9px;
box-sizing: content-box;
}
.woocommerce-product-gallery .woocommerce-product-gallery__trigger::after {
content: "";
display: block;
width: 2px;
height: 8px;
background: #000;
border-radius: 6px;
position: absolute;
top: 19px;
left: 22px;
transform: rotate(-45deg);
box-sizing: content-box;
}
.woocommerce-product-gallery .flex-control-thumbs {
zoom: 1;
margin: 0;
padding: 0;
align-self: flex-start;
margin-top: 30px;
}
@media only screen and (min-width: 670px) {
.woocommerce-product-gallery .flex-control-thumbs {
width: 80px;
max-width: 80px;
min-width: 80px;
}
}
.woocommerce-product-gallery .flex-control-thumbs li {
padding: 0 10px 10px;
float: left;
margin: 0;
list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs li img {
cursor: pointer;
opacity: 0.5;
margin: 0;
width: 40px;
}
@media only screen and (min-width: 670px) {
.woocommerce-product-gallery .flex-control-thumbs li img {
width: 80px;
}
}
.woocommerce-product-gallery .flex-control-thumbs li img:hover {
opacity: 1;
}
.woocommerce-product-gallery .flex-control-thumbs .slick-list {
display: flex;
flex-flow: row wrap;
align-items: center;
}
@media only screen and (min-width: 670px) {
.woocommerce-product-gallery .flex-control-thumbs .slick-list {
flex-direction: column;
}
}
.woocommerce-product-gallery .flex-control-thumbs .slick-current img {
opacity: 1;
}
@media only screen and (min-width: 670px) {
.woocommerce-product-gallery .flex-control-thumbs .slick-current img {
box-shadow: 0 0 0 3px #fff, 0 0 0 4px #ccc;
}
}
@media only screen and (min-width: 670px) {
.woocommerce-product-gallery .flex-control-thumbs .slick-next {
transform: rotate(90deg) translateY(50%);
top: auto;
bottom: -30px;
left: 50%;
}
}
@media only screen and (min-width: 670px) {
.woocommerce-product-gallery .flex-control-thumbs .slick-prev {
transform: rotate(90deg) translateY(50%);
top: -30px;
left: 50%;
}
}
/* Variable Product */
div.product-type-variable {
/* For variations */
/* After variation select */
}
div.product-type-variable table.variations {
table-layout: fixed;
margin-bottom: 10px;
}
div.product-type-variable table.variations tbody {
vertical-align: top;
border: 0;
}
div.product-type-variable table.variations td {
border: 0;
}
div.product-type-variable table.variations .label {
width: 120px;
}
div.product-type-variable table.variations .value {
width: auto;
}
div.product-type-variable table.variations .value select {
width: 100%;
}
div.product-type-variable table.variations .value .reset_variations {
display: none !important;
}
div.product-type-variable .single_variation_wrap > * {
margin-bottom: 15px;
}
div.product-type-variable .single_variation_wrap .single_variation {
padding: 20px 10px;
background-color: hsl(0deg, 0%, 100%);
border-radius: 5px;
border: 1px solid hsl(0deg, 0%, 90%);
}
@media only screen and (min-width: 670px) {
div.product-type-variable .single_variation_wrap .single_variation {
padding: 20px;
}
}
div.product-type-variable .single_variation_wrap .woocommerce-variation-price {
border-top: 1px solid #f1f1f1;
padding-top: 20px;
margin-top: 20px;
}
div.product-type-variable .single_variation_wrap .woocommerce-variation-price .price {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
width: 100%;
}
div.product-type-variable .single_variation_wrap .woocommerce-variation-price .price:before {
content: "Price";
display: inline-block;
width: 120px;
margin-right: 6px;
}
div.product-type-variable .single_variation_wrap .woocommerce-variation-price .price del {
font-size: 1.2rem;
opacity: 0.6;
margin-right: 3px;
}
/* Quantity and Add to cart module */
div.product-type-variable .woocommerce-variation-add-to-cart, div.product-type-simple form.cart {
position: relative;
display: flex;
flex-flow: row wrap;
padding: 15px 0;
}
div.product-type-variable .woocommerce-variation-add-to-cart input.qty, div.product-type-simple form.cart input.qty {
height: 100%;
width: 40px;
}
div.product-type-variable .woocommerce-variation-add-to-cart .quantity, div.product-type-simple form.cart .quantity {
position: relative;
z-index: 2;
display: flex;
flex-flow: row nowrap;
flex: 0 0 40px;
}
div.product-type-variable .woocommerce-variation-add-to-cart .quantity input, div.product-type-simple form.cart .quantity input {
border: 0;
border-top: 1px solid hsl(0deg, 0%, 80%);
border-bottom: 1px solid hsl(0deg, 0%, 80%);
text-align: center;
border-radius: 0;
z-index: 1;
/* Hide HTML5 Up and Down arrows. */
}
div.product-type-variable .woocommerce-variation-add-to-cart .quantity input[type=number]::-webkit-outer-spin-button, div.product-type-simple form.cart .quantity input[type=number]::-webkit-outer-spin-button, div.product-type-variable .woocommerce-variation-add-to-cart .quantity input[type=number]::-webkit-inner-spin-button, div.product-type-simple form.cart .quantity input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
div.product-type-variable .woocommerce-variation-add-to-cart .quantity input[type=number], div.product-type-simple form.cart .quantity input[type=number] {
-moz-appearance: textfield;
}
div.product-type-variable .woocommerce-variation-add-to-cart .minus, div.product-type-simple form.cart .minus,
div.product-type-variable .woocommerce-variation-add-to-cart .plus,
div.product-type-simple form.cart .plus {
font-size: 20px;
width: 40px;
height: 40px;
padding: 0;
font-weight: 700;
border: 1px solid hsl(0deg, 0%, 80%);
}
div.product-type-variable .woocommerce-variation-add-to-cart .minus, div.product-type-simple form.cart .minus {
border-radius: 4px 0 0 4px;
}
div.product-type-variable .woocommerce-variation-add-to-cart .plus, div.product-type-simple form.cart .plus {
border-radius: 0 4px 4px 0;
}
div.product-type-variable .woocommerce-variation-add-to-cart .button.single_add_to_cart_button, div.product-type-simple form.cart .button.single_add_to_cart_button {
flex: 1 1 0;
margin-left: 15px;
}
/* Woocommerce Tabs */
.woocommerce .woocommerce-tabs {
width: 100%;
}
/* Related Products */
.related.products {
position: relative;
width: 100%;
padding: 50px 2.5%;
}
@media only screen and (min-width: 670px) {
.related.products {
padding: 50px 5%;
}
}
.related.products > h2 {
position: relative;
text-align: center;
font-size: 2.8rem;
}
.related.products .products {
display: flex;
flex-flow: row wrap;
}
.related.products .products > * {
width: calc((100% - (20px / 2 * (2 - 1))) / 2);
margin-right: 10px;
}
@media only screen and (max-width: 670px) {
.related.products .products > * {
margin-bottom: 10px;
}
}
@media only screen and (max-width: 670px) {
.related.products .products > *:nth-child(2n) {
margin-right: 0;
}
}
@media only screen and (min-width: 670px) {
.related.products .products > * {
width: calc((100% - (20px * (4 - 1))) / 4);
margin-right: 20px;
}
.related.products .products > *:nth-child(4n) {
margin-right: 0;
}
}
/* Single product attributes */
.single-product-attributes {
display: flex;
flex-flow: row wrap;
}
@media only screen and (min-width: 670px) {
.single-product-attributes {
justify-content: flex-end;
}
}
.single-product-attributes .tag-label {
position: relative;
display: inline-block;
border-radius: 5px;
margin-bottom: 5px;
background-color: hsl(0deg, 0%, 97%);
font-weight: 700;
font-size: 12px;
padding: 3px 8px;
font-size: 1.4rem;
color: #666;
text-align: center;
line-height: 1;
border: 1px solid hsl(0deg, 0%, 50%);
margin: 3px;
}
.single-product-attributes .tag-label:hover {
background-color: #dedede;
}
.single-product-attributes .tag-label small {
font-size: 1rem;
letter-spacing: 0.3px;
text-transform: uppercase;
display: block;
opacity: 0.8;
margin-bottom: 5px;
}
/* Single product add to any plugin */
.summary .addtoany_header {
width: 100%;
}
@media only screen and (max-width: 670px) {
.summary .addtoany_header {
text-align: center;
}
}
@media only screen and (min-width: 670px) {
.summary .addtoany_header {
float: left;
line-height: 30px;
width: 120px;
}
}
.summary .a2a_kit {
position: relative;
display: flex;
flex-wrap: wrap;
}
@media only screen and (max-width: 670px) {
.summary .a2a_kit {
width: 100%;
margin-top: -10px;
padding-bottom: 30px;
justify-content: center;
}
}
@media only screen and (min-width: 670px) {
.summary .a2a_kit {
left: 10px;
}
}
/* Woo Cart
============================================= */
/* Structure */
.woocommerce-cart .woocommerce {
padding: 50px 3vw 80px;
width: 100%;
display: flex;
flex-flow: row wrap;
}
@media only screen and (min-width: 960px) {
.woocommerce-cart .woocommerce {
padding: 50px 5% 80px;
}
}
.woocommerce-cart .entry-content {
max-width: none;
padding: 0;
}
.woocommerce-cart .woocommerce-cart-form {
flex: 1 1 100%;
}
@media only screen and (min-width: 960px) {
.woocommerce-cart .woocommerce-cart-form {
margin-right: 5vw;
flex: 2 1 0;
}
}
.woocommerce-cart .cart-collaterals {
flex: 1 1 100%;
}
@media only screen and (min-width: 960px) {
.woocommerce-cart .cart-collaterals {
flex: 1 1 0;
}
}
/* General Table */
.shop_table {
background-color: #fff;
font-size: 1.4rem;
table-layout: fixed;
overflow: hidden;
}
.shop_table p {
margin: 0;
}
.shop_table thead {
color: hsl(0deg, 0%, 60%);
font-size: 1.2rem;
text-transform: uppercase;
border-bottom: 5px solid #eee;
}
.shop_table th {
padding: 8px 10px;
font-weight: 700;
border-top: 1px solid #eee;
}
.shop_table td {
padding: 15px 10px;
}
@media only screen and (min-width: 960px) {
.shop_table td {
padding: 25px 15px;
}
}
.shop_table td:before {
text-transform: uppercase;
font-size: 1.2rem;
color: #999;
}
.shop_table td.product-name {
font-weight: 700;
color: black;
font-size: 1.4rem;
width: auto;
line-height: 2.2rem;
}
.shop_table td.product-name a {
color: hsl(0deg, 0%, 30%);
font-weight: 700;
}
.shop_table td.product-name p {
color: hsl(0deg, 0%, 60%);
font-size: 1.2rem;
margin-bottom: 15px;
font-weight: 400;
}
.shop_table td.product-name p:last-child {
margin-bottom: 0;
}
.shop_table .product-quantity {
width: 100%;
}
@media only screen and (min-width: 670px) {
.shop_table .product-quantity {
width: 100px;
}
}
.shop_table .product-quantity input {
width: 50px;
text-align: center;
}
@media only screen and (min-width: 670px) {
.shop_table .product-quantity input {
width: 80%;
text-align: left;
}
}
@media only screen and (min-width: 670px) {
.shop_table .product-price {
width: 100px;
}
.shop_table .product-subtotal {
width: 100px;
}
}
/* Cart Table */
table.cart {
/* Mobile Table */
}
table.cart .product-remove {
font-weight: 700;
padding: 10px;
}
@media only screen and (min-width: 670px) {
table.cart .product-remove {
width: 30px;
}
}
table.cart .product-remove a {
width: 26px;
height: 26px;
background-color: #9e1c25;
border-radius: 50%;
font-size: 0;
color: #fff;
margin: 0 0 0 auto;
font-size: 0;
}
table.cart .product-remove a:hover,
table.cart .product-remove a a:hover {
text-decoration: none;
}
@media only screen and (min-width: 960px) {
table.cart .product-remove a {
width: 20px;
height: 20px;
opacity: 0.6;
}
table.cart .product-remove a:hover {
opacity: 1;
text-decoration: none;
}
}
table.cart .product-remove a:after {
content: "\ea0a";
font-size: 14px;
font-weight: 700;
}
@media only screen and (min-width: 670px) {
table.cart .product-thumbnail {
width: 100px;
text-align: center;
}
table.cart .product-thumbnail img {
width: 80px;
height: 80px;
object-fit: contain;
padding: 5px;
}
}
table.cart .actions {
padding: 20px;
border-top: 3px solid #eee;
*zoom: 1;
}
table.cart .actions::after, table.cart .actions::before {
content: " ";
display: table;
}
table.cart .actions::after {
clear: both;
}
table.cart .actions .button {
margin: 0;
font-size: 1.3rem;
}
table.cart .actions .coupon {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
float: left;
}
table.cart .actions .coupon label[for=coupon_code] {
display: none;
}
table.cart .actions button[name=update_cart] {
float: right;
}
table.cart .actions #coupon_code {
width: 50%;
}
@media only screen and (min-width: 960px) {
table.cart .actions #coupon_code {
width: auto;
}
}
@media only screen and (max-width: 670px) {
table.cart tbody tr.cart_item {
border: 1px solid #eee;
margin-bottom: 20px;
border-radius: 10px;
}
table.cart tbody tr.cart_item td {
border-color: #f5f5f5;
}
}
/* Variation text within table */
.variation,
.wc-item-meta {
margin: 0;
}
.variation .wc-item-meta-label,
.variation dt,
.wc-item-meta .wc-item-meta-label,
.wc-item-meta dt {
margin-top: 10px;
}
.variation dd,
.wc-item-meta dd {
margin: 0;
}
/* Cart Totals Table */
.cart_totals {
background-color: #f7f7f7;
padding: 5px 20px 20px;
}
.cart_totals .shop_table {
background-color: transparent;
border-radius: 0;
box-shadow: 0 0 0 0 transparent;
margin-bottom: 10px;
}
@media only screen and (min-width: 670px) {
.cart_totals .woocommerce-shipping-totals {
width: 200%;
}
}
.cart_totals > h2 {
display: none;
}
.cart_totals tr:first-child > * {
border-top: 0;
}
.cart_totals td,
.cart_totals th {
padding: 12px 0;
}
.cart_totals th {
width: auto;
border-top: 1px solid #eee;
color: #666;
}
.cart_totals td {
text-align: right;
}
.cart_totals .woocommerce-shipping-destination {
line-height: 20px;
font-size: 1.2rem;
margin: 10px 0;
opacity: 0.8;
}
.cart_totals .woocommerce-shipping-destination strong {
display: block;
}
.cart_totals .checkout-button i {
font-size: 1.4rem;
}
#shipping_method {
font: 700 1.4rem "Roboto", sans-serif;
}
#shipping_method > * {
margin-bottom: 10px;
}
#shipping_method > *:last-child {
margin-bottom: 0;
}
#shipping_method input[type=hidden] + label, #shipping_method input[type=radio]:checked + label {
border-radius: 7px;
border: 2px solid black;
}
#shipping_method input[type=radio] {
display: none;
}
#shipping_method input[type=hidden] {
display: none;
}
#shipping_method label {
width: 100%;
text-transform: capitalize;
}
.cart-empty {
width: 100%;
text-align: center;
}
.return-to-shop {
width: 100%;
text-align: center;
}
/* Cross Sells */
.page .cross-sells {
margin-top: 30px;
}
.page .cross-sells h2 {
font-size: 20px;
font-family: "Roboto", sans-serif;
letter-spacing: 0 !important;
margin-bottom: 0;
}
.page .cross-sells ul.products {
display: flex;
flex-flow: row wrap;
padding: 0;
}
.page .cross-sells ul.products > * {
width: calc((100% - (5px / 2 * (2 - 1))) / 2);
margin-right: 2.5px;
}
@media only screen and (max-width: 670px) {
.page .cross-sells ul.products > * {
margin-bottom: 2.5px;
}
}
@media only screen and (max-width: 670px) {
.page .cross-sells ul.products > *:nth-child(2n) {
margin-right: 0;
}
}
@media only screen and (min-width: 670px) {
.page .cross-sells ul.products > * {
width: calc((100% - (5px * (3 - 1))) / 3);
margin-right: 5px;
}
.page .cross-sells ul.products > *:nth-child(3n) {
margin-right: 0;
}
}
.page .cross-sells ul.products li.product img {
height: 220px;
}
.page .cross-sells ul.products li.product .woocommerce-loop-product__title {
font-size: 16px;
}
/* Structure
--------------------------------------------- */
.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce {
padding: 0 3vw 50px;
}
@media only screen and (min-width: 960px) {
.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce {
padding: 0 5% 50px;
}
}
.woocommerce-checkout:not(.woocommerce-order-received) .entry-content {
max-width: none;
padding: 0;
}
.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-form-login-toggle {
flex: 1 1 100%;
}
/* Checkout form */
form.woocommerce-checkout .col2-set {
display: flex;
flex-flow: row wrap;
}
form.woocommerce-checkout .col2-set > * {
width: 100%;
margin-bottom: 80px;
}
@media only screen and (min-width: 670px) {
form.woocommerce-checkout .col2-set > * {
width: calc((100% - (80px * (2 - 1))) / 2);
margin-right: 80px;
}
form.woocommerce-checkout .col2-set > *:nth-child(2n) {
margin-right: 0;
}
}
form.woocommerce-checkout .col-1 {
margin-bottom: 50px;
}
form.woocommerce-checkout .col-1 > * {
margin-bottom: 30px;
}
form.woocommerce-checkout .col-1 > *:last-child {
margin-bottom: 0;
}
form.woocommerce-checkout .col-2 {
padding: 30px 10px;
align-self: flex-start;
background: #f7f7f7;
}
@media only screen and (min-width: 960px) {
form.woocommerce-checkout .col-2 {
padding: 50px;
}
}
/* Ship to a different address */
.woocommerce-form__label-for-checkbox span {
font-size: 1.6rem;
font-weight: 700;
font-family: "Roboto", sans-serif;
letter-spacing: 0;
}
/* Checkout Page Order Summary
--------------------------------------------- */
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table tfoot td {
width: 165px;
text-align: right;
vertical-align: top;
}
/* Select shipping method
--------------------------------------------- */
/* Shipping Method */
.woocommerce-shipping-totals {
position: relative;
display: flex;
flex-flow: column nowrap;
/* woocommerce shipping module for cart page*/
/* woocommerce shipping module for checkout page*/
/* woocommerce shipping module general */
}
@media only screen and (min-width: 670px) {
.woocommerce-shipping-totals {
width: calc(100% + 165px);
}
}
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals td {
padding: 15px 10px;
}
@media only screen and (max-width: 670px) {
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals td {
width: calc(100% + 165px);
}
}
@media only screen and (min-width: 670px) {
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals td {
width: 100%;
}
}
.woocommerce-shipping-totals th {
position: relative;
width: calc(100% + 165px);
color: black;
background: #f7f7f7;
padding-top: 30px;
margin-bottom: 0;
font-weight: 700;
}
@media only screen and (min-width: 670px) {
.woocommerce-shipping-totals td {
width: 100%;
}
}
/* Payment method
--------------------------------------------- */
.woocommerce-checkout-review-order h4, .woocommerce-checkout-review-order .woocommerce-shipping-totals th, .woocommerce-shipping-totals .woocommerce-checkout-review-order th {
font-weight: 700;
}
#payment {
max-width: 600px;
margin: 0 auto;
/* To select saved payment methods */
}
#payment input[type=radio] {
display: none;
}
#payment input[type=radio]:checked + label {
background-color: #130f0f !important;
color: #fff;
border-radius: 5px 5px 0 0;
}
#payment .payment_methods > li {
margin-bottom: 15px;
}
#payment .payment_methods > li > label {
cursor: pointer;
background-color: whitesmoke;
padding: 0.7rem 2rem;
width: 100%;
display: block;
border-radius: 5px;
font-size: 1.6rem;
text-transform: none;
}
#payment .payment_methods > li > label:hover {
background-color: #ebebeb;
}
#payment .payment_methods > li > label img {
float: right;
}
#payment .payment_box {
padding: 20px;
background-color: #fff;
/* Error inside payment */
}
@media only screen and (min-width: 960px) {
#payment .payment_box {
padding: 30px 30px 20px;
}
}
#payment .payment_box .wc-payment-form {
border: 0;
padding: 0;
}
#payment .payment_box .wc-payment-form .form-row {
margin-bottom: 10px;
}
#payment .payment_box .woocommerce_error {
font-weight: 700;
padding: 0.5rem 1rem;
text-align: center;
}
#payment .wc-saved-payment-methods {
margin: 15px 0;
}
#payment .wc-saved-payment-methods label {
padding: 0.5rem 1rem;
}
#payment .wc-saved-payment-methods label:hover {
background-color: #e6e6e6;
}
/* For Stripe only
--------------------------------------------- */
#stripe-payment-data p {
font-size: 1.3rem;
line-height: 1.5;
}
label[for=payment_method_stripe] img {
display: none;
}
/* After payment box
--------------------------------------------- */
.place-order .woocommerce-terms-and-conditions-checkbox-text {
display: inline-flex;
}
.place-order .woocommerce-terms-and-conditions-checkbox-text a {
margin-left: 3px;
}
.place-order p {
font-size: 1.4rem;
color: #666;
}
#place_order {
width: 100%;
}
/* Errors
--------------------------------------------- */
/* 1 item to review
============================================= */
.woocommerce-order-received .entry-content {
max-width: none;
padding: 0;
margin-top: 0;
}
.woocommerce-order-received .entry-title {
font-size: 4rem;
}
.woocommerce-order-received .woocommerce-order {
padding: 50px 5%;
background-color: hsl(0deg, 0%, 97%);
}
.woocommerce-order-received .woocommerce-order > * {
margin-bottom: 40px;
}
.woocommerce-order-received .woocommerce-order > *:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 960px) {
.woocommerce-order-received .woocommerce-order {
padding: 50px 10%;
}
}
.woocommerce-order-received .woocommerce-order-details__title {
font-size: 2rem;
}
@media only screen and (max-width: 670px) {
.woocommerce-order-received .woocommerce-customer-details,
.woocommerce-order-received .woocommerce-order-details {
padding: 0;
}
}
/* Overview bar */
.woocommerce-order-overview {
display: flex;
flex-flow: row wrap;
justify-content: center;
background-color: #fff;
position: relative;
margin: 0 auto;
border-top: 3px solid #111;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
/* REVIEW THIS */
}
.woocommerce-order-overview > * {
flex: 1 1 100%;
position: relative;
text-transform: uppercase;
font-weight: 700;
font-size: 1.2rem;
padding: 10px 20px;
border-right: 1px dotted #ddd;
color: #888;
}
@media only screen and (min-width: 960px) {
.woocommerce-order-overview > * {
flex: 1 1 0;
}
}
.woocommerce-order-overview > *:last-child {
border-right: 0;
}
.woocommerce-order-overview > * strong {
position: relative;
text-transform: none;
display: block;
font-weight: 700;
font-size: 1.6rem;
color: black;
line-height: 20px;
}
.woocommerce-order-overview .deliveryDetails {
flex: 1 1 100%;
background-color: black;
margin: 0;
color: #fff;
font-size: 1.6rem;
text-transform: capitalize;
}
@media only screen and (min-width: 960px) {
.woocommerce-order-overview .deliveryDetails {
text-align: center;
flex: 1 1 50%;
}
}
.woocommerce-order-overview .deliveryDetails > span {
color: #fff;
}
.woocommerce-thankyou-order-received {
text-align: center;
}
.woocommerce-table--order-details .product-total,
.woocommerce-table--order-details tfoot td {
width: 20%;
text-align: right;
vertical-align: top;
}
/* Payment Reminder */
.payment-reminder {
align-items: center;
max-width: 700px;
margin: 0 auto;
}
.payment-reminder img {
margin: 0 auto;
display: block;
}
.woocommerce-order-pay .entry-content {
background-color: hsl(0deg, 0%, 97%);
}
.woocommerce-order-pay .product-quantity {
width: auto;
}
/* Woocommerce Account Page
============================================= */
/* Main Structure */
.woocommerce-MyAccount-content {
padding: 35px 17.5px;
background-color: hsl(0deg, 0%, 100%);
border-radius: 10px;
border: 1px solid #ddd;
}
@media only screen and (min-width: 670px) {
.woocommerce-MyAccount-content {
padding: 35px;
}
}
/* general woocommerce account style. For my account, logged in, and lost password */
.woocommerce-account {
/* Woocommerce account logged in specific style*/
}
.woocommerce-account .entry-content {
position: relative;
background-color: hsl(0deg, 0%, 97%);
padding: 30px 5%;
margin-top: 0;
}
@media only screen and (min-width: 960px) {
.woocommerce-account .entry-content {
max-width: none;
width: 100%;
padding: 30px 10%;
}
}
.woocommerce-account.logged-in .woocommerce {
align-items: flex-start;
}
@media only screen and (min-width: 670px) {
.woocommerce-account.logged-in .woocommerce > *:nth-child(1) {
flex: 1 1 0;
}
.woocommerce-account.logged-in .woocommerce > *:nth-child(2) {
flex: 3 1 0;
}
}
/* My Account Navigation */
.woocommerce-MyAccount-navigation {
background-color: #fff;
border-radius: 10px;
border: 1px solid #ddd;
padding: 15px 0;
}
.woocommerce-MyAccount-navigation-link {
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-bottom: 10px;
}
.woocommerce-MyAccount-navigation-link.is-active a {
font-weight: 700;
color: black;
}
.woocommerce-MyAccount-navigation-link a {
display: block;
padding: 0 12px;
color: #888;
font-size: 1.5rem;
font-weight: 400;
}
.woocommerce-MyAccount-navigation-link a:hover {
text-decoration: none;
padding-left: 18px;
color: #555;
}
/* Content */
.woocommerce-MyAccount-content {
display: flex;
flex-flow: column nowrap;
margin: 0 auto;
}
.woocommerce-MyAccount-content em {
opacity: 0.8;
font-size: 1.4rem;
}
.woocommerce-MyAccount-content mark {
position: relative;
display: inline-block;
border-radius: 5px;
margin-bottom: 5px;
background-color: hsl(0deg, 0%, 95%);
font-weight: 700;
font-size: 12px;
padding: 3px 8px;
color: hsl(0deg, 0%, 20%);
}
.woocommerce-MyAccount-content mark:hover {
background-color: #d9d9d9;
}
.woocommerce-MyAccount-content fieldset {
background-color: hsl(0deg, 0%, 99%);
border: 1px solid hsl(0deg, 0%, 90%);
padding: 10px 30px;
margin: 20px 0;
}
.woocommerce-MyAccount-content fieldset legend {
font-weight: 700;
font-size: 1.6rem;
color: hsl(0deg, 0%, 40%);
padding: 0 10px;
margin: 0 -10px;
}
/* Remove dashboard link */
.woocommerce-MyAccount-navigation-link--dashboard {
display: none;
}
/* Password strength */
.woocommerce-password-strength {
padding: 5px 0;
}
.woocommerce-password-strength.short {
color: #9e1c25;
}
.woocommerce-password-strength.bad {
color: #ff5b36;
}
.woocommerce-password-strength.good {
color: #689447;
}
.woocommerce-password-strength.strong {
color: #689447;
}
/* Woocommerce Account Orders Table */
.woocommerce-orders-table__cell-order-delivery-date, .woocommerce-orders-table__header-order-delivery-date {
display: none !important;
}
@media only screen and (min-width: 960px) {
.woocommerce-orders-table__header-order-number {
width: 80px;
}
.woocommerce-orders-table__header-order-actions, .woocommerce-orders-table__header-order-status {
width: 120px;
}
}
.woocommerce-table--order-details td {
padding: 15px 10px;
line-height: 1.5;
}
/* Login
============================================= */
/* My account page
--------------------------------------------- */
#customer_login {
display: flex;
flex-flow: row wrap;
}
#customer_login > * {
width: 100%;
margin-bottom: 5vw;
}
@media only screen and (min-width: 670px) {
#customer_login > * {
width: calc((100% - (5vw * (2 - 1))) / 2);
margin-right: 5vw;
}
#customer_login > *:nth-child(2n) {
margin-right: 0;
}
}
#customer_login .woocommerce-form-login {
background-color: transparent;
padding: 0;
}
#customer_login .col-1 {
border-bottom: 1px solid hsl(0deg, 0%, 85%);
margin-bottom: 30px;
}
@media only screen and (min-width: 960px) {
#customer_login .col-1 {
border-bottom: 0;
margin-bottom: 0;
}
}
.woocommerce-form-login {
position: relative;
display: flex;
flex-flow: column nowrap;
background-color: #fff;
padding: 30px;
width: 100%;
}
@media only screen and (min-width: 960px) {
.woocommerce-form-login {
max-width: 50vw;
margin: 0 auto;
}
}
.woocommerce-form-login label.woocommerce-form__label {
float: right;
font-size: 1.4rem;
}
.woocommerce-privacy-policy-text p {
line-height: 1.5;
color: hsl(0deg, 0%, 60%);
}
/* For lost password page */
.widget_layered_nav_filters ul {
margin: 0;
padding: 0;
border: 0;
list-style: none outside;
zoom: 1;
}
.widget_layered_nav_filters ul li {
float: left;
padding: 0 1em 1px 1px;
list-style: none;
}
.widget_layered_nav_filters ul li a {
color: #888;
font-size: 1.3rem;
text-decoration: none;
}
.widget_layered_nav_filters ul li a::before {
display: inline-block;
font: normal normal normal 1em/1 "baseicon";
speak: none;
text-transform: none;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\ea0a";
font-weight: 700;
margin-right: 8px;
width: 15px;
height: 15px;
background-color: #9e1c25;
border-radius: 50%;
font-size: 1.4rem;
color: #fff;
}
.widget_layered_nav_filters ul li a::before:hover,
.widget_layered_nav_filters ul li a::before a:hover {
text-decoration: none;
}
/* Interactive Cart
============================================= */
/* Header buttons */
#cart-items {
position: absolute;
width: 20px;
height: 20px;
background-color: #111;
border-radius: 50%;
font-size: 1.4rem;
font-weight: 700;
top: -5px;
right: -3px;
color: #fff;
}
#cart-items:hover,
#cart-items a:hover {
text-decoration: none;
}
#interactive-cart-activate {
position: relative;
}
.interactive-cart__bg {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(0, 0, 20, 0.5);
}
.interactive-cart-wrapper {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99999999;
display: none;
}
.interactive-cart {
position: relative;
background-color: hsl(0deg, 0%, 95%);
margin: 0 0 0 auto;
height: 100%;
display: flex;
flex-flow: column nowrap;
overflow: hidden;
}
@media only screen and (min-width: 960px) {
.interactive-cart {
width: 40vw;
}
}
/* Cart Header */
.interactive-cart-header {
position: relative;
background-color: #fff;
padding: 20px 12px;
flex: 0 1 0;
}
@media only screen and (min-width: 960px) {
.interactive-cart-header {
padding: 12px;
}
}
.interactive-cart-header > * {
margin: 0;
text-align: center;
color: #888;
}
.interactive-cart-header a:hover {
text-decoration: none;
}
.interactive-cart-header .interactive-cart-close {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: 0;
top: 0;
color: hsl(0deg, 0%, 50%);
height: 100%;
width: 50px;
font-size: 25px;
}
.interactive-cart-header .interactive-cart-close:hover {
left: -3px;
color: #777;
}
/* Mini Cart Notice */
.interactive-cart__notice {
padding: 10px 0;
}
.interactive-cart__notice > * {
margin-bottom: 5px;
}
.interactive-cart__notice > *:last-child {
margin-bottom: 0;
}
.interactive-cart__notice > * {
margin-left: 15px;
margin-right: 15px;
}
.interactive-cart__notice.cart-item-card {
flex-flow: column nowrap;
}
.interactive-cart__notice p {
font-size: 13px;
line-height: 1.5;
font-weight: 700;
}
.message--error {
color: #9e1c25;
}
.message--success {
color: #689447;
}
/* Cart Item List */
.interactive-cart-items {
flex: 1 1 0;
padding: 20px 0;
overflow-y: scroll;
width: 100%;
height: 100%;
}
@media only screen and (min-width: 960px) {
.interactive-cart-items {
margin-right: -17px;
padding-right: 17px;
/* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box;
/* So the width will be 100% + 17px */
}
}
/* Cart Item */
.cart-item-card {
position: relative;
display: flex;
flex-flow: row wrap;
flex-wrap: nowrap;
width: 94%;
background-color: #fff;
border-radius: 8px;
margin-left: 3%;
margin-right: 3%;
margin-bottom: 10px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.cart-item-card > figure {
position: relative;
width: 80px;
padding-top: 80px;
}
.cart-item-card > figure > img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
.cart-item-card .caption {
flex: 1 1 0;
position: relative;
padding: 15px;
background-color: #fff;
}
@media only screen and (min-width: 960px) {
.cart-item-card {
width: 93%;
margin-left: 5%;
margin-right: auto;
}
}
.cart-item-card img {
align-self: center;
margin: 10px;
display: block;
width: 100px;
height: 100px;
object-fit: cover;
}
.cart-item-card .caption {
flex: 1 1 auto;
}
.cart-item-card .caption > * {
margin-bottom: 8px;
}
.cart-item-card .caption > *:last-child {
margin-bottom: 0;
}
.cart-item-card .caption > * {
font-size: 1.4rem;
}
.cart-item-card .product-title {
font-size: 1.4rem;
font-weight: 700;
color: black;
}
.cart-item-card .remove_from_cart_button {
flex: 0 0 auto;
align-self: flex-start;
width: 40px;
height: 40px;
font-size: 20px;
text-align: center;
line-height: 40px;
text-decoration: none;
font-weight: 700;
color: #9e1c25;
}
.interactive-cart-summary {
position: relative;
background-color: #fff;
flex: 0 1 0;
}
.interactive-cart-summary > div {
border-bottom: 1px solid #e5e5e5;
padding-bottom: 5px;
margin-bottom: 5px;
position: relative;
justify-content: space-between;
padding: 8px 5%;
}
.interactive-cart-summary > div > * {
margin-bottom: 0;
}
.interactive-cart-summary > div:last-of-type {
margin-bottom: 0;
border-bottom: 0;
}
.interactive-cart-summary__buttons {
display: flex;
flex-flow: row wrap;
}
.interactive-cart-summary__buttons > * {
width: calc((100% - (0px / 2 * (2 - 1))) / 2);
margin-right: 0px;
}
@media only screen and (max-width: 670px) {
.interactive-cart-summary__buttons > * {
margin-bottom: 0px;
}
}
@media only screen and (max-width: 670px) {
.interactive-cart-summary__buttons > *:nth-child(2n) {
margin-right: 0;
}
}
@media only screen and (min-width: 670px) {
.interactive-cart-summary__buttons > * {
width: calc((100% - (0px * (2 - 1))) / 2);
margin-right: 0px;
}
.interactive-cart-summary__buttons > *:nth-child(2n) {
margin-right: 0;
}
}
.interactive-cart-summary__buttons a {
border-radius: 0;
}
.interactive-cart-summary__buttons a:first-child {
border-right: 1px solid black;
}
/* If there are no products */
.no-product-text {
position: relative;
display: block;
text-align: center;
padding: 0 5%;
}
/* Woocommerce address component
=============================================
1. Order order-received
2. My Account edit address
*/
/* Address section */
header.woocommerce-Address-title {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
header.woocommerce-Address-title h2,
header.woocommerce-Address-title h3 {
margin-bottom: 0;
}
/* Addresses */
.addresses h2,
.addresses h3,
.woocommerce-customer-details h2,
.woocommerce-customer-details h3 {
font-size: 1.8rem;
}
.addresses address,
.woocommerce-customer-details address {
padding: 15px 7.5px;
background-color: hsl(0deg, 0%, 100%);
border-radius: 5px;
border: 1px solid hsl(0deg, 0%, 90%);
font-size: 1.4rem;
font-style: normal;
font-weight: 700;
line-height: 1.5;
}
@media only screen and (min-width: 670px) {
.addresses address,
.woocommerce-customer-details address {
padding: 15px;
}
}
.addresses address:before,
.woocommerce-customer-details address:before {
content: "Address: ";
}
.addresses address p,
.woocommerce-customer-details address p {
margin-top: 15px;
margin-bottom: 0;
line-height: 1.5;
font-size: 1.4rem;
}
.addresses address p.woocommerce-customer-details--phone:before,
.woocommerce-customer-details address p.woocommerce-customer-details--phone:before {
content: "Phone: ";
}
.addresses address p.woocommerce-customer-details--email:before,
.woocommerce-customer-details address p.woocommerce-customer-details--email:before {
content: "Email address: ";
}
/**
* woocommerce-smallscreen.scss
* Optimises the default WooCommerce frontend layout when viewed on smaller screens.
*/
/**
* Style begins
*/
@media only screen and (max-width: 670px) {
.woocommerce,
.woocommerce-page {
/**
* General layout
*/
/**
* Products
*/
/**
* Product Details
*/
/**
* Cart
*/
/**
* Checkout
*/
/**
* Account
*/
}
.woocommerce table.shop_table_responsive thead,
.woocommerce-page table.shop_table_responsive thead {
display: none;
}
.woocommerce table.shop_table_responsive tbody tr:first-child td:first-child,
.woocommerce-page table.shop_table_responsive tbody tr:first-child td:first-child {
border-top: 0;
}
.woocommerce table.shop_table_responsive tbody th,
.woocommerce-page table.shop_table_responsive tbody th {
display: none;
}
.woocommerce table.shop_table_responsive tr,
.woocommerce-page table.shop_table_responsive tr {
display: block;
}
.woocommerce table.shop_table_responsive tr td,
.woocommerce-page table.shop_table_responsive tr td {
display: block;
text-align: right !important;
}
.woocommerce table.shop_table_responsive tr td.order-actions,
.woocommerce-page table.shop_table_responsive tr td.order-actions {
text-align: left !important;
}
.woocommerce table.shop_table_responsive tr td::before,
.woocommerce-page table.shop_table_responsive tr td::before {
content: attr(data-title) ": ";
font-weight: 700;
float: left;
}
.woocommerce table.shop_table_responsive tr td.actions::before, .woocommerce table.shop_table_responsive tr td.product-remove::before,
.woocommerce-page table.shop_table_responsive tr td.actions::before,
.woocommerce-page table.shop_table_responsive tr td.product-remove::before {
display: none;
}
.woocommerce table.shop_table_responsive tr:nth-child(2n) td,
.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
background-color: rgba(0, 0, 0, 0.025);
}
.woocommerce table.my_account_orders tr td.order-actions,
.woocommerce-page table.my_account_orders tr td.order-actions {
text-align: left;
}
.woocommerce table.my_account_orders tr td.order-actions::before,
.woocommerce-page table.my_account_orders tr td.order-actions::before {
display: none;
}
.woocommerce table.my_account_orders tr td.order-actions .button,
.woocommerce-page table.my_account_orders tr td.order-actions .button {
float: none;
margin: 0.125em 0.25em 0.125em 0;
}
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2 {
float: none;
width: 100%;
}
.woocommerce #content div.product div.images,
.woocommerce #content div.product div.summary,
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.images,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.images,
.woocommerce-page div.product div.summary {
float: none;
width: 100%;
}
.woocommerce #content table.cart .product-thumbnail,
.woocommerce table.cart .product-thumbnail,
.woocommerce-page #content table.cart .product-thumbnail,
.woocommerce-page table.cart .product-thumbnail {
display: none;
}
.woocommerce #content table.cart td.actions,
.woocommerce table.cart td.actions,
.woocommerce-page #content table.cart td.actions,
.woocommerce-page table.cart td.actions {
text-align: left;
}
.woocommerce #content table.cart td.actions .coupon,
.woocommerce table.cart td.actions .coupon,
.woocommerce-page #content table.cart td.actions .coupon,
.woocommerce-page table.cart td.actions .coupon {
float: none;
*zoom: 1;
padding-bottom: 0.5em;
}
.woocommerce #content table.cart td.actions .coupon::after, .woocommerce #content table.cart td.actions .coupon::before,
.woocommerce table.cart td.actions .coupon::after,
.woocommerce table.cart td.actions .coupon::before,
.woocommerce-page #content table.cart td.actions .coupon::after,
.woocommerce-page #content table.cart td.actions .coupon::before,
.woocommerce-page table.cart td.actions .coupon::after,
.woocommerce-page table.cart td.actions .coupon::before {
content: " ";
display: table;
}
.woocommerce #content table.cart td.actions .coupon::after,
.woocommerce table.cart td.actions .coupon::after,
.woocommerce-page #content table.cart td.actions .coupon::after,
.woocommerce-page table.cart td.actions .coupon::after {
clear: both;
}
.woocommerce #content table.cart td.actions .coupon .button,
.woocommerce #content table.cart td.actions .coupon .input-text,
.woocommerce #content table.cart td.actions .coupon input,
.woocommerce table.cart td.actions .coupon .button,
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce table.cart td.actions .coupon input,
.woocommerce-page #content table.cart td.actions .coupon .button,
.woocommerce-page #content table.cart td.actions .coupon .input-text,
.woocommerce-page #content table.cart td.actions .coupon input,
.woocommerce-page table.cart td.actions .coupon .button,
.woocommerce-page table.cart td.actions .coupon .input-text,
.woocommerce-page table.cart td.actions .coupon input {
width: 48%;
box-sizing: border-box;
}
.woocommerce #content table.cart td.actions .coupon .button.alt,
.woocommerce #content table.cart td.actions .coupon .input-text + .button,
.woocommerce table.cart td.actions .coupon .button.alt,
.woocommerce table.cart td.actions .coupon .input-text + .button,
.woocommerce-page #content table.cart td.actions .coupon .button.alt,
.woocommerce-page #content table.cart td.actions .coupon .input-text + .button,
.woocommerce-page table.cart td.actions .coupon .button.alt,
.woocommerce-page table.cart td.actions .coupon .input-text + .button {
float: right;
}
.woocommerce #content table.cart td.actions .button,
.woocommerce table.cart td.actions .button,
.woocommerce-page #content table.cart td.actions .button,
.woocommerce-page table.cart td.actions .button {
display: block;
width: 100%;
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce .cart-collaterals .cross-sells,
.woocommerce .cart-collaterals .shipping_calculator,
.woocommerce-page .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cross-sells,
.woocommerce-page .cart-collaterals .shipping_calculator {
width: 100%;
float: none;
text-align: left;
}
.woocommerce.woocommerce-checkout form.login .form-row,
.woocommerce-page.woocommerce-checkout form.login .form-row {
width: 100%;
float: none;
}
.woocommerce #payment .terms,
.woocommerce-page #payment .terms {
text-align: left;
padding: 0;
}
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
float: none;
width: 100%;
box-sizing: border-box;
margin-bottom: 1em;
}
.woocommerce .lost_reset_password .form-row-first,
.woocommerce .lost_reset_password .form-row-last,
.woocommerce-page .lost_reset_password .form-row-first,
.woocommerce-page .lost_reset_password .form-row-last {
width: 100%;
float: none;
margin-right: 0;
}
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation {
float: none;
width: 100%;
}
/**
* Twenty Thirteen specific styles
*/
.single-product .twentythirteen .panel {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
#woocommerce-product-search-field {
position: fixed;
width: 100%;
height: 70px;
border: 0;
border-radius: 0;
background-color: hsl(0deg, 0%, 95%);
text-align: center;
font-size: 2.4rem;
max-width: 0;
left: 50%;
right: 50%;
padding: 0;
}
#woocommerce-product-search-field:focus, #woocommerce-product-search-field:hover {
background-color: #111;
color: #fff;
box-shadow: none;
}
#woocommerce-product-search-field:focus::placeholder, #woocommerce-product-search-field:hover::placeholder {
color: #fff;
}
.woocommerce-product-search--active #woocommerce-product-search-field {
max-width: 100%;
left: 0;
right: 0;
padding: 0 5%;
}
#woocommerce-product-search-button {
-webkit-appearance: none;
background: transparent;
padding: 0;
}
#woocommerce-product-search-button:hover {
background: transparent;
}
#woocommerce-product-search-button i {
font-weight: 700;
width: 40px;
height: 40px;
line-height: 40px;
}
/* Make woocommerce variations table full width*/
table.variations tr {
display: flex;
flex-flow: column nowrap;
}
table.variations tr td {
padding: 0;
}
/* wapf checkbox prices */
.wapf-pricing-hint {
float: right !important;
}
.wapf-input[type=checkbox] + .wapf-label-text {
padding-left: 0;
}
/* WAPF Radio Buttons */
.wapf-radios {
display: flex;
flex-flow: row wrap;
}
.wapf-radios > * {
margin-right: 6px;
}
.wapf-radios > *:last-child {
margin-right: 0;
}
.wapf-radios .wapf-input-label {
height: 100%;
}
.wapf-radios .wapf-checkable {
width: calc(50% - 6px);
margin-bottom: 6px;
}
.wapf-radios .wapf-checkable.wapf-checked .wapf-label-text {
border: 1px solid black;
}
.wapf-radios .wapf-checkable input[type=radio] {
display: none;
}
.wapf-radios .wapf-label-text {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border: 1px solid hsl(0deg, 0%, 80%);
}
@media only screen and (max-width: 670px) {
.wapf-radios .wapf-label-text {
flex-direction: column;
}
}
/* Woocommerce Global Styles */
.woocommerce {
*zoom: 1;
}
.woocommerce::after, .woocommerce::before {
content: " ";
display: table;
}
.woocommerce::after {
clear: both;
}
/* Newly discovered global styles */
.woocommerce-column__title {
margin-bottom: 10px;
}
/* Global forms */
/* Button styles for woocommerce */
/* Add to Cart Button AKA Main button */
.checkout-button,
a.add_to_cart_button,
button.add_to_cart_button,
button[type=submit] {
margin-bottom: 0;
display: block;
}
@media only screen and (max-width: 670px) {
.wc-backward {
display: block;
}
}
/* BREADCRUMB */
.woocommerce-breadcrumb {
font-size: 1.3rem;
text-transform: uppercase;
/* Archive Page */
/* Single Product Breadcrumbs */
}
.woocommerce.archive .woocommerce-breadcrumb {
letter-spacing: 1px;
}
.single-product .woocommerce-breadcrumb {
border-bottom: 2px solid #f1f1f1;
padding-bottom: 20px;
margin-bottom: 20px;
width: 100%;
color: #888;
font-size: 1.4rem;
padding: 20px 0;
}
@media only screen and (min-width: 670px) {
.single-product .woocommerce-breadcrumb {
padding: 30px 0;
}
}
.single-product .woocommerce-breadcrumb a {
margin: 0;
font-weight: 700;
}
/* SALE LABEL */
.onsale {
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
}
li.product .onsale {
display: table;
margin: -26px auto 5px;
font-size: 12px;
padding: 0.05rem 0.6rem;
border-radius: 3px;
background-color: #689447;
}
.summary .onsale {
position: relative;
display: inline-block;
border-radius: 5px;
margin-bottom: 5px;
background-color: #689447;
font-weight: 700;
font-size: 12px;
padding: 3px 8px;
}
.summary .onsale:hover {
background-color: #507236;
}
/* Message box */
.woocommerce-notices-wrapper {
margin: 30px auto 0;
flex: 1 1 100%;
}
.woocommerce-account.logged-in .woocommerce-notices-wrapper {
margin-top: 0;
}
.woocommerce-cart .woocommerce-notices-wrapper {
margin-top: 0;
}
.woocommerce-NoticeGroup {
margin: 30px auto 0;
flex: 1 1 100%;
}
/* All information and messages */
.woocommerce-info,
.woocommerce-message {
position: relative;
border-radius: 3px;
font-size: 1.4rem;
line-height: 1.5;
font-weight: 400;
background-color: #f2f2f2;
color: #555;
list-style: none outside;
width: 100%;
margin: 0 auto 2em;
word-wrap: break-word;
text-align: center;
padding: 12px;
}
@media only screen and (min-width: 960px) {
.woocommerce-info,
.woocommerce-message {
margin-bottom: 30px;
padding: 12px 24px 12px 12px;
}
}
.woocommerce-info a,
.woocommerce-message a {
width: 100%;
height: auto;
white-space: nowrap;
border-radius: 3px;
margin: 0 0 10px;
}
@media only screen and (min-width: 960px) {
.woocommerce-info a,
.woocommerce-message a {
width: auto;
margin: 0 10px;
}
}
.woocommerce-info .restore-item,
.woocommerce-message .restore-item {
display: none;
}
/* All errors */
.woocommerce-error {
position: relative;
border-radius: 3px;
font-size: 1.4rem;
line-height: 1.5;
font-weight: 400;
list-style: none outside;
width: 100%;
word-wrap: break-word;
display: flex;
flex-flow: column nowrap;
padding: 12px;
margin-bottom: 30px;
}
.woocommerce-error li {
list-style: none outside !important;
padding-left: 0 !important;
margin-left: 0 !important;
width: 100%;
margin-bottom: 0 !important;
}
.woocommerce-NoticeGroup-checkout .woocommerce-error li {
margin-bottom: 10px !important;
}
.woocommerce-NoticeGroup-checkout .woocommerce-error li:last-child {
margin-bottom: 0 !important;
}
.woocommerce-message {
color: #fff;
background-color: #689447;
}
.woocommerce-message a {
background: #5c833f;
}
.woocommerce-message a:hover {
background-color: #507236;
}
.woocommerce-info {
color: #fff;
background-color: #ccc;
}
.woocommerce-info a {
background: #bfbfbf;
}
.woocommerce-info a:hover {
background-color: #b3b3b3;
}
.woocommerce-error {
color: #fff;
background-color: #9e1c25;
}
.woocommerce-error a {
background: #881820;
}
.woocommerce-error a:hover {
background-color: #73141b;
}
/* PAGINATION */
.woocommerce-pagination {
position: relative;
text-align: center;
margin: 10px 0;
flex: 1 1 100%;
}
.woocommerce-pagination .page-numbers > * {
margin-right: 5px;
}
.woocommerce-pagination .page-numbers > *:last-child {
margin-right: 0;
}
.woocommerce-pagination a,
.woocommerce-pagination span {
font-size: 1.6rem;
}
.woocommerce-pagination span {
cursor: unset;
}
/* Woocommerce Store Notice */
.woocommerce-store-notice {
position: fixed;
width: 100%;
color: #fff;
background-color: #111;
text-align: center;
margin-bottom: 0;
padding: 12px 5%;
z-index: 88;
bottom: 0;
}
@media only screen and (min-width: 960px) {
.woocommerce-store-notice {
position: relative;
padding: 6px 5%;
}
}
.woocommerce-store-notice__dismiss-link {
position: absolute;
right: 5%;
color: #fff;
font-size: 18px;
}