448 lines
9.4 KiB
SCSS
448 lines
9.4 KiB
SCSS
/*-------------------------------------------------------*/
|
|
/* Table of Content
|
|
|
|
1. General
|
|
2. Typography
|
|
3. Navigation
|
|
4. Layout
|
|
5. Blog
|
|
6. Shortcodes
|
|
7. Shop Products
|
|
8. Cart
|
|
9. Checkout
|
|
10. Footer
|
|
11. Responsive
|
|
12. Spacings
|
|
|
|
/*-------------------------------------------------------*/
|
|
|
|
|
|
/*-------------------------------------------------------*/
|
|
/* General
|
|
/*-------------------------------------------------------*/
|
|
|
|
.clearfix {
|
|
*zoom: 1;
|
|
|
|
&:before, &:after {
|
|
display: table;
|
|
line-height: 0;
|
|
content: "";
|
|
}
|
|
|
|
&:after {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.clear { clear: both; }
|
|
.oh { overflow: hidden; }
|
|
.ov { overflow: visible; }
|
|
.relative { position: relative; }
|
|
|
|
.section-wrap {
|
|
padding: 80px 0;
|
|
overflow: hidden;
|
|
background-attachment: fixed;
|
|
background-size: cover;
|
|
}
|
|
|
|
.main-container {
|
|
margin: auto;
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.rev_slider_wrapper.container {
|
|
width: 1170px;
|
|
}
|
|
}
|
|
|
|
.mobile section { background-attachment: scroll !important; }
|
|
.bg-dark { background-color: $bg-dark; }
|
|
.bg-darkblue { background-color: #152332; }
|
|
.bg-light { background-color: $bg-light; }
|
|
.bg-white { background-color: #fff; }
|
|
.bg-color { background-color: $main-color; }
|
|
.white { color: #fff; }
|
|
.static { position: static; }
|
|
.block { display: block; }
|
|
.left { float: left; }
|
|
.right { float: right; }
|
|
.valign { position: absolute; top: 50%; @include transform (translateY(-50%)); }
|
|
.container-fluid.semi-fluid { padding: 0 50px; }
|
|
.img-fw { width: 100%; }
|
|
.uppercase { text-transform: uppercase; letter-spacing: 0.02em; }
|
|
.last { margin-bottom: 0 !important; }
|
|
@media (max-width: 991px) { .md-text-center {text-align: center}; }
|
|
@media (max-width: 767px) { .sm-text-center {text-align: center}; }
|
|
@media (max-width: 480px) { .xs-text-center {text-align: center}; }
|
|
img.alignleft {float: left;margin: 10px 20px 10px 0;}
|
|
img.alignright { float: right; margin: 10px 0 10px 20px; }
|
|
.animation-wrap { overflow: hidden; }
|
|
|
|
|
|
::-moz-selection {
|
|
color: #fff;
|
|
background-color: $main-color;
|
|
}
|
|
|
|
::-webkit-selection {
|
|
color: #fff;
|
|
background-color: $main-color;
|
|
}
|
|
|
|
::selection {
|
|
color: #fff;
|
|
background-color: $main-color;
|
|
}
|
|
|
|
:focus {
|
|
outline: none;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: $body-font;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
font-smoothing: antialiased;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-font-smoothing: antialiased;
|
|
background: #fff;
|
|
outline: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
color: $text-color;
|
|
|
|
img {
|
|
border: none;
|
|
max-width: 100%;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-o-user-select: none;
|
|
user-select: none;
|
|
}
|
|
}
|
|
|
|
video {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
/* Preloader
|
|
-------------------------------------------------------*/
|
|
|
|
.loader-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #fff;
|
|
z-index: 99999;
|
|
}
|
|
|
|
.loader {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 50px;
|
|
height: 50px;
|
|
font-size: 0;
|
|
color: $main-color;
|
|
display: inline-block;
|
|
margin:-25px 0 0 -25px;
|
|
text-indent: -9999em;
|
|
-webkit-transform: translateZ(0);
|
|
-ms-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
|
|
div {
|
|
background-color: $main-color;
|
|
display: inline-block;
|
|
float: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 50px;
|
|
height: 50px;
|
|
opacity: .5;
|
|
border-radius: 50%;
|
|
-webkit-animation: ballPulseDouble 2s ease-in-out infinite;
|
|
animation: ballPulseDouble 2s ease-in-out infinite;
|
|
}
|
|
|
|
div:last-child {
|
|
-webkit-animation-delay: -1s;
|
|
animation-delay: -1s;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes ballPulseDouble{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes ballPulseDouble{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}
|
|
|
|
|
|
/* Scroll Down icon
|
|
-------------------------------------------------------*/
|
|
|
|
.scroll-down {
|
|
font-size: 16px;
|
|
width: 38px;
|
|
height: 38px;
|
|
background-color: rgba(255,255,255,.2);
|
|
text-align: center;
|
|
line-height: 38px;
|
|
z-index: 50;
|
|
position: absolute;
|
|
bottom: 40px;
|
|
left: 50%;
|
|
margin-left: -19px;
|
|
border-radius: 50%;
|
|
|
|
&.dark {
|
|
background-color: transparent;
|
|
border: 2px solid $heading-color;
|
|
|
|
i {
|
|
color: $heading-color;
|
|
left: 11px;
|
|
}
|
|
}
|
|
|
|
&.bottom-140 {
|
|
bottom: 140px;
|
|
|
|
@include bp-sm {
|
|
bottom: 80px;
|
|
}
|
|
}
|
|
|
|
a {
|
|
line-height: 38px;
|
|
position: relative;
|
|
z-index: 50;
|
|
}
|
|
|
|
i {
|
|
color: #fff;
|
|
-webkit-animation: scroll-down-icon 1s infinite;
|
|
-moz-animation: scroll-down-icon 1s infinite;
|
|
-o-animation: scroll-down-icon 1s infinite;
|
|
animation: scroll-down-icon 1s infinite;
|
|
position: absolute;
|
|
left: 13px;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes scroll-down-icon {
|
|
0%{ bottom: 3px; }
|
|
50%{ bottom: 8px; }
|
|
100%{ bottom: 3px; }
|
|
}
|
|
@-moz-keyframes scroll-down-icon {
|
|
0%{ bottom: 3px; }
|
|
50%{ bottom: 8px; }
|
|
100%{ bottom: 3px; }
|
|
}
|
|
@-o-keyframes scroll-down-icon {
|
|
0%{ bottom: 3px; }
|
|
50%{ bottom: 8px; }
|
|
100%{ bottom: 3px; }
|
|
}
|
|
@keyframes scroll-down-icon {
|
|
0%{ bottom: 3px; }
|
|
50%{ bottom: 8px; }
|
|
100%{ bottom: 3px; }
|
|
}
|
|
|
|
.row.row-4 {
|
|
margin: 0 -2px;
|
|
}
|
|
|
|
.row.row-4 > div {
|
|
padding: 0 2px;
|
|
}
|
|
|
|
.row.row-10 {
|
|
margin: 0 -5px;
|
|
}
|
|
|
|
.row.row-10 > div {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.row.row-12 {
|
|
margin: 0 -6px;
|
|
}
|
|
|
|
.row.row-12 > div {
|
|
padding: 0 6px;
|
|
}
|
|
|
|
.row.row-16 {
|
|
margin: 0 -8px;
|
|
}
|
|
|
|
.row.row-16 > div {
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.row.row-20 {
|
|
margin: 0 -10px;
|
|
}
|
|
|
|
.row.row-20 > div {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
/* Row multiple items
|
|
-------------------------------------------------------*/
|
|
|
|
// clear the first in row for any block that has the class "items-grid"
|
|
.items-grid .col-xs-6:nth-child(2n + 3) { clear: left; }
|
|
.items-grid .col-xs-4:nth-child(3n + 4) { clear: left; }
|
|
.items-grid .col-xs-3:nth-child(4n + 5) { clear: left; }
|
|
.items-grid .col-xs-2:nth-child(6n + 7) { clear: left; }
|
|
.items-grid .col-xs-1:nth-child(12n + 13) { clear: left; }
|
|
@media (min-width: 768px) {
|
|
// reset previous grid
|
|
.items-grid .col-xs-6:nth-child(2n + 3) { clear: none; }
|
|
.items-grid .col-xs-4:nth-child(3n + 4) { clear: none; }
|
|
.items-grid .col-xs-3:nth-child(4n + 5) { clear: none; }
|
|
.items-grid .col-xs-2:nth-child(6n + 7) { clear: none; }
|
|
.items-grid .col-xs-1:nth-child(12n + 13) { clear: none; }
|
|
|
|
// clear first in row for small columns
|
|
.items-grid .col-sm-6:nth-child(2n + 3) { clear: left; }
|
|
.items-grid .col-sm-4:nth-child(3n + 4) { clear: left; }
|
|
.items-grid .col-sm-3:nth-child(4n + 5) { clear: left; }
|
|
.items-grid .col-sm-2:nth-child(6n + 7) { clear: left; }
|
|
.items-grid .col-sm-1:nth-child(12n + 13) { clear: left; }
|
|
}
|
|
@media (min-width: 992px) {
|
|
// reset previous grid
|
|
.items-grid .col-sm-6:nth-child(2n + 3) { clear: none; }
|
|
.items-grid .col-sm-4:nth-child(3n + 4) { clear: none; }
|
|
.items-grid .col-sm-3:nth-child(4n + 5) { clear: none; }
|
|
.items-grid .col-sm-2:nth-child(6n + 7) { clear: none; }
|
|
.items-grid .col-sm-1:nth-child(12n + 13) { clear: none; }
|
|
|
|
// clear first in row for medium columns
|
|
.items-grid .col-md-6:nth-child(2n + 3) { clear: left; }
|
|
.items-grid .col-md-4:nth-child(3n + 4) { clear: left; }
|
|
.items-grid .col-md-3:nth-child(4n + 5) { clear: left; }
|
|
.items-grid .col-md-2:nth-child(6n + 7) { clear: left; }
|
|
.items-grid .col-md-1:nth-child(12n + 13) { clear: left; }
|
|
}
|
|
@media (min-width: 1200px) {
|
|
// reset previous grid
|
|
.items-grid .col-md-6:nth-child(2n + 3) { clear: none; }
|
|
.items-grid .col-md-4:nth-child(3n + 4) { clear: none; }
|
|
.items-grid .col-md-3:nth-child(4n + 5) { clear: none; }
|
|
.items-grid .col-md-2:nth-child(6n + 7) { clear: none; }
|
|
.items-grid .col-md-1:nth-child(12n + 13) { clear: none; }
|
|
|
|
// clear first in row for large columns
|
|
.items-grid .col-lg-6:nth-child(2n + 3) { clear: left; }
|
|
.items-grid .col-lg-4:nth-child(3n + 4) { clear: left; }
|
|
.items-grid .col-lg-3:nth-child(4n + 5) { clear: left; }
|
|
.items-grid .col-lg-2:nth-child(6n + 7) { clear: left; }
|
|
.items-grid .col-lg-1:nth-child(12n + 13) { clear: left; }
|
|
}
|
|
|
|
|
|
/* 5 columns
|
|
-------------------------------------------------------*/
|
|
|
|
.col-xs-5ths,
|
|
.col-sm-5ths,
|
|
.col-md-5ths,
|
|
.col-lg-5ths {
|
|
position: relative;
|
|
min-height: 1px;
|
|
padding-right: 10px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.col-xs-5ths {
|
|
width: 20%;
|
|
float: left;
|
|
}
|
|
|
|
@media (min-width: 767px) {
|
|
.col-sm-5ths {
|
|
width: 20%;
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.col-md-5ths {
|
|
width: 20%;
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.col-lg-5ths {
|
|
width: 20%;
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
|
|
/* Hover Overlays
|
|
-------------------------------------------------------*/
|
|
|
|
.hover-overlay {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
background-color: rgba(0,0,0,.60);
|
|
backface-visibility: hidden;
|
|
@include transform (translateZ(0,0,0));
|
|
@include transition ($all);
|
|
}
|
|
|
|
.hover-trigger:hover .hover-overlay {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
|
|
/* Hover Scale
|
|
-------------------------------------------------------*/
|
|
.hover-scale img {
|
|
@include transition (all 1.5s ease-out);
|
|
}
|
|
|
|
.hover-scale:hover img {
|
|
@include transform (scale(1.1,1.1));
|
|
}
|
|
|
|
|
|
/* List Items
|
|
-------------------------------------------------------*/
|
|
.list-dividers > li {
|
|
position: relative;
|
|
padding: 9px 0;
|
|
border-bottom: 1px solid $border-color;
|
|
|
|
&:last-child {
|
|
padding-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.list-no-dividers > li {
|
|
position: relative;
|
|
padding: 5px 0;
|
|
} |