html {
font-size: 10px;
}
@media screen and (max-width: 400px) {
html {
font-size: 9.210526315789474px;
}
}
html,
body {
height: 100%;
}
#intro-head {
height: 1px;
position: absolute;
top: 0px;
left: -20px;
z-index: -99;
}
* {
font-family: 'Montserrat', sans-serif !important;
}
img {
font-size: 10px !important;
image-rendering: auto !important;
}
body {
background: #f6f7f8;
font-family: 'Montserrat', sans-serif;
font-size: 1.9rem;
font-style: normal;
font-weight: normal;
line-height: 1.789;
color: #000000;
margin: 0;
padding: 0;
overflow-x: hidden;
}
body.nav-wrap-is-visible {
overflow: hidden;
}
body.ss-bg-white {
background: #ffffff;
}
/* -------------------------------------------------------------------
* ## links
* ------------------------------------------------------------------- */
a {
color: #5a5a5a;
transition: all 0.3s ease-in-out;
}
p,
ul,
ol {
font-size: 14px;
font-weight: 500;
color: #686a73;
}
a:hover,
a:focus,
a:active {
color: #188F8B;
}
a:hover,
a:active {
outline: 0;
}
/* ===================================================================
* # typography & general theme styles
*
* ------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-weight: 500;
font-style: normal;
color: #000000;
font-variant-ligatures: common-ligatures;
text-rendering: optimizeLegibility;
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
margin-top: 6rem;
margin-bottom: 1.6rem;
}
h4 {
font-size: 13px !important;
color: #686a73;
font-weight: 700 !important;
letter-spacing: 0.7px;
text-transform: uppercase;
}
.ads {
display: none;
}
.loading-dark::after {
content: "";
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #188F8B;
border-top-color: transparent;
animation: loading 0.6s linear infinite;
margin-left: 10px;
margin-bottom: 2px;
vertical-align: middle;
}
.loading::after {
content: "";
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #fff;
border-top-color: transparent;
animation: loading 0.6s linear infinite;
margin-left: 10px;
margin-bottom: 2px;
vertical-align: middle;
}
@keyframes loading {
to {
transform: rotate(360deg);
}
}
@media screen and (max-width: 600px) {
.work-btn {
margin: 0px !important;
bottom: 20px !important;
transform: translate(-50%, -50%);
left: 50% !important;
}
.no-mob {
flex-direction: column;
justify-content: left !important;
gap: 12px !important;
align-items: start !important;
}
.poster-logo {
letter-spacing: 8px !important;
font-size: 30px !important;
}
.ads {
display: block;
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
margin-top: 5.6rem;
}
}
h5,
.h5,
h6,
.h6 {
margin-top: 4.8rem;
margin-bottom: 1.2rem;
}
@media screen and (max-width: 600px) {
h5,
.h5,
h6,
.h6 {
margin-top: 4.4rem;
margin-bottom: 0.8rem;
}
}
h1,
.h1 {
font-size: 3.6rem;
line-height: 1.222;
}
@media screen and (max-width: 600px) {
h1,
.h1 {
font-size: 3.3rem;
}
}
h2,
.h2 {
font-size: 3rem;
line-height: 1.2;
}
h3,
.h3 {
font-size: 1.8rem;
line-height: 1.167;
color: #188F8B;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
display: flex;
gap: 8px;
align-items: center;
}
h4,
.h4 {
font-size: 2.1rem;
line-height: 1.333;
}
h5,
.h5 {
font-size: 1.8rem;
line-height: 1.333;
}
h6,
.h6 {
font-size: 1.6rem;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: .16rem;
}
p img {
margin: 0;
}
p.lead {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-size: 2.4rem;
line-height: 1.833;
margin-bottom: 3.6rem;
color: #000000;
}
@media screen and (max-width: 1200px) {
p.lead {
font-size: 2.2rem;
}
}
@media screen and (max-width: 600px) {
p.lead {
font-size: 2.1rem;
}
}
em,
i,
strong,
b {
font-size: inherit;
line-height: inherit;
}
em,
i {
font-family: 'Montserrat', sans-serif;
font-style: italic;
}
strong,
b {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
small {
font-size: 1.2rem;
line-height: inherit;
}
blockquote {
margin: 4rem 0;
padding: 4rem 4rem;
border-left: 4px solid black;
position: relative;
}
@media screen and (max-width: 600px) {
blockquote {
padding: 3.2rem 3.2rem;
}
}
@media screen and (max-width: 400px) {
blockquote {
padding: 2.8rem 2.8rem;
}
}
.featured {
background-color: #188f8b42;
border-radius: 30px;
padding: 5px 7px 5px 5px;
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
color: #147c78;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
}
.featured span {
margin-right: 5px;
font-size: 16px;
font-variation-settings:
'FILL' 1,
'wght' 400,
'GRAD' 0,
'opsz' 24
}
blockquote p {
font-weight: 400;
padding: 0;
font-size: 2.4rem;
line-height: 1.833;
color: #000000;
}
@media screen and (max-width: 500px) {
blockquote p {
font-size: 2.2rem;
}
}
blockquote cite {
display: block;
font-family: 'Montserrat', sans-serif;
font-size: 1.5rem;
font-style: normal;
line-height: 1.333;
}
blockquote cite:before {
content: "\2014 \0020";
}
blockquote cite,
blockquote cite a,
blockquote cite a:visited {
color: #7e7e7e;
border: none;
}
abbr {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-variant: small-caps;
text-transform: lowercase;
letter-spacing: .05rem;
color: #7e7e7e;
}
var,
kbd,
samp,
code,
pre {
font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}
pre {
padding: 2.4rem 3.2rem 3.2rem;
background: #efefef;
overflow-x: auto;
}
code {
font-size: 1.4rem;
margin: 0 .2rem;
padding: .4rem .8rem;
white-space: nowrap;
background: #efefef;
border: 1px solid #d3d3d3;
color: #000000;
border-radius: 3px;
}
pre>code {
display: block;
white-space: pre;
line-height: 2;
padding: 0;
margin: 0;
border: none;
}
pre.prettyprint>code {
border: none;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
text-decoration: none;
}
mark {
background: #fff099;
color: #000000;
}
hr {
border: solid #e0e0e0;
border-width: 1px 0 0;
clear: both;
margin: 2.4rem 0 1.6rem;
height: 0;
}
/* -------------------------------------------------------------------
* ## Lists
* ------------------------------------------------------------------- */
ol {
list-style: decimal;
}
ul {
list-style: disc;
}
li {
display: list-item;
}
ol,
ul {
margin-left: 1.6rem;
}
ul li {
padding-left: .4rem;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin: .8rem 0 .8rem 1.6rem;
}
ul.disc li {
display: list-item;
list-style: none;
padding: 0 0 0 .8rem;
position: relative;
}
ul.disc li::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #33998a;
position: absolute;
left: -16px;
top: 11px;
vertical-align: middle;
}
dt {
margin: 0;
color: #33998a;
}
dd {
margin: 0 0 0 2rem;
}
/* -------------------------------------------------------------------
* ## responsive video container
* ------------------------------------------------------------------- */
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* -------------------------------------------------------------------
* ## floated image
* ------------------------------------------------------------------- */
img.pull-right {
margin: 1.2rem 0 0 2.8rem;
}
img.pull-left {
margin: 1.2rem 2.8rem 0 0;
}
/* -------------------------------------------------------------------
* ## tables
* ------------------------------------------------------------------- */
table {
border-width: 0;
width: 100%;
max-width: 100%;
font-family: 'Montserrat', sans-serif;
border-collapse: collapse;
}
th,
td {
padding: 1.2rem 1.2rem;
text-align: left;
border-bottom: 1px solid #e0e0e0;
min-width: 150px;
}
th {
color: #000000;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* -------------------------------------------------------------------
* ## Spacing
* ------------------------------------------------------------------- */
button,
.btn {
margin-bottom: 1.6rem;
}
fieldset {
margin-bottom: 1.6rem;
}
input,
textarea,
select,
pre,
blockquote,
figure,
table,
p,
ul,
ol,
dl,
form,
.video-container,
.ss-custom-select {
margin-bottom: 1.5rem;
}
#explore-cat {
cursor: pointer;
}
/* ===================================================================
* # preloader
*
* ------------------------------------------------------------------- */
#preloader-x {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ffffff;
z-index: 500;
height: 100dvh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ffffff;
z-index: 500;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* ===================================================================
* # forms
*
* ------------------------------------------------------------------- */
fieldset {
border: none;
}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
display: block;
border: 0;
outline: none;
color: #5a5a5a;
font-family: 'Montserrat', sans-serif;
font-size: 1.3rem;
line-height: 3.2rem;
max-width: 100%;
border: 1px solid #acacac;
background: transparent;
border-radius: 5px;
transition: all .3s ease-in-out;
font-weight: 600;
padding: 8px 15px;
}
.ss-custom-select {
position: relative;
padding: 0;
}
.ss-custom-select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: 0.01px;
text-overflow: '';
margin: 0;
line-height: 3rem;
vertical-align: middle;
}
.ss-custom-select select option {
padding-left: 2rem;
padding-right: 2rem;
}
.ss-custom-select select::-ms-expand {
display: none;
}
.ss-custom-select::after {
border-bottom: 2px solid #000000;
border-right: 2px solid #000000;
content: '';
display: block;
height: 8px;
width: 8px;
margin-top: -7px;
pointer-events: none;
position: absolute;
right: 2.4rem;
top: 50%;
transition: all 0.15s ease-in-out;
-webkit-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
textarea {
min-height: 25.6rem;
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
color: #000000;
}
label,
legend {
font-weight: 700;
font-size: 1.4rem;
margin-bottom: .8rem;
line-height: 1.714;
color: #000000;
display: block;
}
input[type="checkbox"],
input[type="radio"] {
display: inline;
}
label>.label-text {
display: inline-block;
margin-left: 1rem;
font-family: 'Montserrat', sans-serif;
line-height: inherit;
}
label>input[type="checkbox"],
label>input[type="radio"] {
margin: 0;
position: relative;
top: .2rem;
}
/* -------------------------------------------------------------------
* ## Style Placeholder Text
* ------------------------------------------------------------------- */
::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #8c8c8c;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #8c8c8c;
opacity: 1;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #8c8c8c;
opacity: 1;
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #8c8c8c;
}
::-ms-input-placeholder {
/* Microsoft Edge */
color: #8c8c8c;
}
::placeholder {
/* Most modern browsers support this now. */
color: #8c8c8c;
}
.placeholder {
color: #8c8c8c !important;
}
/* -------------------------------------------------------------------
* ## Change Autocomplete styles in Chrome
* ------------------------------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-text-fill-color: #33998a;
transition: background-color 5000s ease-in-out 0s;
}
/* ===================================================================
* # buttons
*
* ------------------------------------------------------------------- */
.btn,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
font-weight: 700;
font-size: 1.3rem;
text-transform: uppercase;
letter-spacing: .5rem;
height: 6rem;
line-height: 5.6rem;
padding: 0 3.2rem;
margin: 0 .4rem 1.6rem 0;
color: #000000;
text-decoration: none;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: all .3s ease-in-out;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #d3d3d3;
border: 0.2rem solid #d3d3d3;
}
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.btn:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
background-color: #c3c3c3;
border-color: #c3c3c3;
color: #000000;
outline: 0;
}
/* button primary
* ------------------------------------------------- */
.btn.btn--primary,
button.btn--primary,
input[type="submit"].btn--primary,
input[type="reset"].btn--primary,
input[type="button"].btn--primary {
background: #000000;
border-color: #000000;
color: #ffffff;
}
.btn.btn--primary:hover,
button.btn--primary:hover,
input[type="submit"].btn--primary:hover,
input[type="reset"].btn--primary:hover,
input[type="button"].btn--primary:hover,
.btn.btn--primary:focus,
button.btn--primary:focus,
input[type="submit"].btn--primary:focus,
input[type="reset"].btn--primary:focus,
input[type="button"].btn--primary:focus {
background: #33998a;
border-color: #33998a;
}
/* button modifiers
* ------------------------------------------------- */
.btn.full-width,
button.full-width {
width: 100%;
margin-right: 0;
}
.btn--medium,
button.btn--medium {
height: 6.4rem !important;
line-height: 6rem !important;
}
.btn--large,
button.btn--large {
height: 6.8rem !important;
line-height: 6.4rem !important;
}
.btn--stroke,
button.btn--stroke {
background: transparent !important;
border: 0.2rem solid #000000;
color: #000000;
}
.btn--stroke:hover,
button.btn--stroke:hover {
background: #000000 !important;
border: 0.2rem solid #000000;
color: #ffffff;
}
.btn--pill,
button.btn--pill {
padding-left: 3.2rem !important;
padding-right: 3.2rem !important;
border-radius: 1000px !important;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/* ===================================================================
* # additional components
*
* ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
* ## additional typo styles
* ------------------------------------------------------------------- */
/* drop cap
* ----------------------------------------------- */
.drop-cap:first-letter {
float: left;
margin: 0;
padding: 1.6rem .8rem 0 0;
font-weight: 700;
font-size: 8.6rem;
line-height: 6rem;
text-indent: 0;
background: transparent;
color: #000000;
}
/* line definition style
* ----------------------------------------------- */
.lining dt,
.lining dd {
display: inline;
margin: 0;
}
.lining dt+dt:before,
.lining dd+dt:before {
content: "\A";
white-space: pre;
}
.lining dd+dd:before {
content: ", ";
}
.lining dd+dd:before {
content: ", ";
}
.lining dd:before {
content: ": ";
margin-left: -0.2em;
}
/* dictionary definition style
* ----------------------------------------------- */
.dictionary-style dt {
display: inline;
counter-reset: definitions;
}
.dictionary-style dt+dt:before {
content: ", ";
margin-left: -0.2em;
}
.dictionary-style dd {
display: block;
counter-increment: definitions;
}
.dictionary-style dd:before {
content: counter(definitions, decimal) ". ";
}
/**
* Pull Quotes
* -----------
* markup:
*
*
*
* --------------------------------------------------------------------- */
.pull-quote {
position: relative;
padding: 2.4rem 0;
}
.pull-quote blockquote {
background-color: #efefef;
border: none;
margin: 0;
padding-top: 9.6rem;
position: relative;
}
.pull-quote blockquote:before {
content: "";
display: block;
height: 3.2rem;
width: 3.2rem;
background-repeat: no-repeat;
background: center center;
background-size: contain;
background-image: url(../images/icons/icon-quote.svg);
position: absolute;
top: 4rem;
left: 4rem;
}
/**
* Stats Tab
* ---------
* markup:
*
*
*
* Extend this object into your markup.
*
* --------------------------------------------------------------------- */
.stats-tabs {
padding: 0;
margin: 3.2rem 0;
}
.stats-tabs li {
display: inline-block;
margin: 0 1.6rem 3.2rem 0;
padding: 0 1.5rem 0 0;
border-right: 1px solid #d3d3d3;
}
.stats-tabs li:last-child {
margin: 0;
padding: 0;
border: none;
}
.stats-tabs li a {
display: inline-block;
font-size: 2.5rem;
font-weight: 700;
border: none;
color: #000000;
}
.stats-tabs li a:hover {
color: #33998a;
}
.stats-tabs li a em {
display: block;
margin: .8rem 0 0 0;
font-family: 'Montserrat', sans-serif;
font-size: 1.5rem;
font-weight: normal;
font-style: normal;
color: #7e7e7e;
}
/* -------------------------------------------------------------------
* ## skillbars
* ------------------------------------------------------------------- */
.skill-bars {
list-style: none;
margin: 6.8rem 0 3.2rem;
}
.skill-bars li {
height: .4rem;
background: #c3c3c3;
width: 100%;
margin-bottom: 6.8rem;
padding: 0;
position: relative;
}
.skill-bars li strong {
position: absolute;
left: 0;
top: -4rem;
font-weight: 700;
color: #000000;
text-transform: uppercase;
letter-spacing: .2rem;
font-size: 1.4rem;
line-height: 2.4rem;
}
.skill-bars li .progress {
background: #000000;
position: relative;
height: 100%;
}
.skill-bars li .progress span {
position: absolute;
right: 0;
top: -3.6rem;
display: block;
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 1.1rem;
line-height: 1;
background: #000000;
padding: .8rem .8rem;
border-radius: 3px;
}
.skill-bars li .progress span::after {
position: absolute;
left: 50%;
bottom: -10px;
margin-left: -5px;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #000000;
content: "";
}
.skill-bars li .percent5 {
width: 5%;
}
.skill-bars li .percent10 {
width: 10%;
}
.skill-bars li .percent15 {
width: 15%;
}
.skill-bars li .percent20 {
width: 20%;
}
.skill-bars li .percent25 {
width: 25%;
}
.skill-bars li .percent30 {
width: 30%;
}
.skill-bars li .percent35 {
width: 35%;
}
.skill-bars li .percent40 {
width: 40%;
}
.skill-bars li .percent45 {
width: 45%;
}
.skill-bars li .percent50 {
width: 50%;
}
.skill-bars li .percent55 {
width: 55%;
}
.skill-bars li .percent60 {
width: 60%;
}
.skill-bars li .percent65 {
width: 65%;
}
.skill-bars li .percent70 {
width: 70%;
}
.skill-bars li .percent75 {
width: 75%;
}
.skill-bars li .percent80 {
width: 80%;
}
.skill-bars li .percent85 {
width: 85%;
}
.skill-bars li .percent90 {
width: 90%;
}
.skill-bars li .percent95 {
width: 95%;
}
.skill-bars li .percent100 {
width: 100%;
}
/* -------------------------------------------------------------------
* ## alert box
* ------------------------------------------------------------------- */
.alert-box {
padding: 2.4rem 4rem 2.4rem 3.2rem;
position: relative;
margin-bottom: 3.2rem;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.5rem;
line-height: 1.6;
}
.alert-box__close {
position: absolute;
display: block;
right: 1.6rem;
top: 1.6rem;
cursor: pointer;
width: 12px;
height: 12px;
}
.alert-box__close::before,
.alert-box__close::after {
content: '';
position: absolute;
display: inline-block;
width: 2px;
height: 12px;
top: 0;
left: 5px;
}
.alert-box__close::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.alert-box__close::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.alert-box--error {
background-color: #ffd1d2;
color: #dd4043;
}
.alert-box--error .alert-box__close::before,
.alert-box--error .alert-box__close::after {
background-color: #dd4043;
}
.alert-box--success {
background-color: #c8e675;
color: #637533;
}
.alert-box--success .alert-box__close::before,
.alert-box--success .alert-box__close::after {
background-color: #637533;
}
.alert-box--info {
background-color: #d5ebfb;
color: #387fb2;
}
.alert-box--info .alert-box__close::before,
.alert-box--info .alert-box__close::after {
background-color: #387fb2;
}
.alert-box--notice {
background-color: #fff099;
color: #827217;
}
.alert-box--notice .alert-box__close::before,
.alert-box--notice .alert-box__close::after {
background-color: #827217;
}
/* -------------------------------------------------------------------
* ## pagination
* ------------------------------------------------------------------- */
.pgn {
margin: 3.2rem auto 3.2rem;
text-align: center;
}
.pgn ul {
display: inline-block;
list-style: none;
margin-left: 0;
position: relative;
padding: 0 6rem;
}
.pgn ul li {
display: inline-block;
margin: 0;
padding: 0;
}
.pgn__num {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.7rem;
line-height: 3.2rem;
display: inline-block;
padding: .2rem 1.2rem;
height: 3.6rem;
margin: .2rem .2rem;
color: #000000;
transition: all, .3s, ease-in-out;
}
.pgn__num:hover {
background: #d3d3d3;
color: #000000;
}
.pgn .current,
.pgn .current:hover {
background-color: #000000;
color: white;
}
.pgn .inactive,
.pgn .inactive:hover {
opacity: 0.4;
cursor: default;
}
.pgn__prev,
.pgn__next {
display: block;
background-repeat: no-repeat;
background-size: 16px 8px;
background-position: center;
height: 3.6rem;
width: 4.8rem;
line-height: 2rem;
padding: 0;
margin: 0;
opacity: 1;
font: 0/0 a;
text-shadow: none;
color: transparent;
transition: all, .2s, ease-in-out;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.pgn__prev:hover,
.pgn__next:hover {
background-color: #d3d3d3;
}
.pgn__prev {
background-image: url("../images/icons/icon-arrow-left.svg");
left: 0;
}
.pgn__next {
background-image: url("../images/icons/icon-arrow-right.svg");
right: 0;
}
.pgn__prev.inactive,
.pgn__next.inactive {
opacity: 0.4;
cursor: default;
}
.pgn__prev.inactive:hover,
.pgn__next.inactive:hover {
background-color: transparent;
}
/* -------------------------------------------------------------------
* responsive:
* pagination
* ------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
.pgn ul {
padding: 0 5.2rem;
}
}
/* ===================================================================
* # Common and Reusable Styles
*
* ------------------------------------------------------------------- */
.wide {
max-width: 1400px;
}
.narrow {
max-width: 1000px;
}
.display-1 {
font-size: 30px;
line-height: 1.143;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
color: #188F8B;
margin-top: 0;
text-align: left;
margin-bottom: .8rem;
}
/* -------------------------------------------------------------------
* ## animation stuff
* ------------------------------------------------------------------- */
.animate-this {
opacity: 0;
visibility: hidden;
}
.no-js .animate-this,
.no-cssanimations .animate-this {
opacity: 1;
visibility: visible;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
/* fade in */
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
visibility: hidden;
-webkit-transform: translate3d(0, 150%, 0);
transform: translate3d(0, 150%, 0);
}
to {
opacity: 1;
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
visibility: hidden;
-webkit-transform: translate3d(0, 150%, 0);
transform: translate3d(0, 150%, 0);
}
to {
opacity: 1;
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/* -------------------------------------------------------------------
* ## entry media
* ------------------------------------------------------------------- */
.media-wrap {
margin-bottom: 7.2rem;
}
.media-wrap img,
.media-wrap .video-container {
vertical-align: bottom;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* -------------------------------------------------------------------
* ## listing header
* ------------------------------------------------------------------- */
.listing-header {
padding: 0 20px 2.4rem;
}
.listing-header h1 {
margin-top: 0;
}
/* -------------------------------------------------------------------
* ## slick slider
* ------------------------------------------------------------------- */
.slick-slider .slick-slide {
outline: none;
}
.slick-slider .slick-dots {
display: block;
list-style: none;
width: 100%;
padding: 0;
margin: 3rem 0 0 0;
text-align: center;
position: absolute;
top: 100%;
left: 0;
}
.slick-slider .slick-dots li {
display: inline-block;
width: 18px;
height: 18px;
margin: 0;
padding: 4px;
cursor: pointer;
}
.slick-slider .slick-dots li button {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
border: none;
line-height: 10px;
padding: 0;
margin: 0;
cursor: pointer;
font: 0/0 a;
text-shadow: none;
color: transparent;
}
.slick-slider .slick-dots li button:hover,
.slick-slider .slick-dots li button:focus {
outline: none;
}
.slick-slider .slick-dots li.slick-active button,
.slick-slider .slick-dots li:hover button {
background: #ffffff;
}
/* -------------------------------------------------------------------
* ## masonry entries
* ------------------------------------------------------------------- */
.masonry {
margin-bottom: 3.2rem;
}
.masonry:after {
content: "";
display: table;
clear: both;
}
.masonry .grid-sizer,
.masonry__brick {
float: left;
width: 25%;
}
.masonry__brick {
padding: 0 20px;
}
.masonry .entry {
margin-bottom: 40px;
color: rgba(0, 0, 0, 0.5);
}
.masonry .entry__thumb {
position: relative;
overflow: hidden;
}
.masonry .entry__thumb-link img {
vertical-align: bottom;
transition: all .3s;
}
.masonry .entry__thumb-link::before {
content: "";
display: block;
background: rgba(21, 21, 21, 0.6);
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all .3s;
z-index: 1;
}
.masonry .entry__thumb-link::after {
content: "...";
font-family: georgia, serif;
font-size: 2.4rem;
z-index: 1;
display: block;
height: 88px;
width: 88px;
letter-spacing: -1px;
line-height: 88px;
margin-left: -44px;
margin-top: -44px;
position: absolute;
left: 50%;
top: 50%;
text-align: center;
color: #ffffff;
opacity: 0;
visibility: hidden;
transition: all .3s;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
.masonry .entry__thumb:hover .entry__thumb-link::before {
opacity: 1;
visibility: visible;
}
.masonry .entry__thumb:hover .entry__thumb-link::after {
opacity: 1;
visibility: visible;
-webkit-transform: scale(1);
transform: scale(1);
}
.masonry .entry__thumb:hover .entry__thumb-link img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.masonry .entry__text {
padding: 3.2rem 2.8rem 4rem;
background-color: #ffffff;
}
.masonry .entry__text p {
margin-bottom: 0;
}
.masonry .entry__title {
font-size: 2.6rem;
font-weight: 400;
line-height: 1.231;
margin-top: 0;
margin-bottom: .8rem;
}
.masonry .entry__title a {
color: #000000;
}
.masonry .entry__title a:hover,
.masonry .entry__title a:focus {
color: #267367;
}
.masonry .entry__excerpt {
font-size: 1.7rem;
line-height: 1.882;
}
.masonry .entry__meta {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 11.5px;
line-height: 2rem;
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 3.2rem;
}
.masonry .entry__meta span {
margin-right: 10px;
}
.masonry .entry__meta span:last-child {
margin-right: 0;
}
.masonry .entry__meta a {
color: #000000;
}
.masonry .entry__meta a:hover,
.masonry .entry__meta a:focus {
color: #33998a;
}
.masonry .entry__meta-cat a::after {
content: ", ";
}
.masonry .entry__meta-cat a:last-child::after {
display: none;
}
/* -------------------------------------------------------------------
* ## post formats - masonry view
* ------------------------------------------------------------------- */
/* format quote & format link
* --------------------------------------- */
.format-quote,
.format-link {
text-align: center;
}
.format-quote .entry__thumb,
.format-link .entry__thumb {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background: #ffffff;
padding: 2.4rem 3rem 5.6rem;
min-height: 324px;
width: 100%;
position: relative;
}
.format-quote .entry__thumb::before,
.format-link .entry__thumb::before {
content: "";
display: block;
height: 3.2rem;
width: 3.2rem;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
margin-bottom: 1.6rem;
position: absolute;
top: 4rem;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.format-quote blockquote::before {
display: none;
}
.format-quote blockquote,
.format-link .link-wrap {
margin: 0;
padding: 0;
border: none;
}
.format-quote blockquote p,
.format-link .link-wrap h2 {
font-size: 2.8rem;
font-weight: 400;
line-height: 1.429;
color: #000000;
padding: 8rem 0 0 0;
margin-top: 0;
margin-bottom: 3.2rem;
}
.format-quote cite,
.format-link cite {
display: block;
font-family: 'Montserrat', sans-serif;
font-size: 1.5rem;
font-style: normal;
line-height: 1.6;
color: rgba(0, 0, 0, 0.4);
}
.format-quote cite::before,
.format-link cite::before {
display: none;
}
.format-quote cite a,
.format-quote cite a:visited {
color: rgba(0, 0, 0, 0.4);
border: none;
}
.format-quote .entry__thumb::before {
background-image: url(../images/icons/icon-quote.svg);
}
.format-link .entry__thumb::before {
background-image: url(../images/icons/icon-link.svg);
}
.format-link .link-wrap cite:before {
display: none;
}
.format-link .link-wrap cite a,
.format-link .link-wrap cite a:visited {
color: rgba(0, 0, 0, 0.4);
display: inline-block;
padding-bottom: .3rem;
}
.format-link .link-wrap cite a:hover,
.format-link .link-wrap cite a:focus {
color: #000000;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
/* format video & format audio
* --------------------------------------- */
.format-video .entry__thumb::after,
.format-audio .entry__thumb::after {
content: "";
display: block;
height: 5.2rem;
width: 5.2rem;
position: absolute;
bottom: 3.2rem;
left: 2.4rem;
background-position: center center;
background-repeat: no-repeat;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
}
.format-video .entry__thumb-link::before,
.format-video .entry__thumb-link::after,
.format-audio .entry__thumb-link::before,
.format-audio .entry__thumb-link::after {
display: none;
}
.format-video .entry__thumb::after {
cursor: zoom-in;
background-image: url(../images/icons/icon-video.svg);
background-size: 3.2rem 3.2rem;
}
.format-video .entry__thumb-link {
cursor: zoom-in;
}
.format-audio .entry__thumb::after {
background-image: url(../images/icons/icon-audio.svg);
background-size: 2.2rem 2.2rem;
}
/* -------------------------------------------------------------------
* responsive:
* common and reusable styles
* ------------------------------------------------------------------- */
@media screen and (max-width: 1800px) {
.masonry-wrap {
max-width: 1260px;
}
.listing-header {
padding: 0 1.6vw 2.4rem;
}
.masonry .grid-sizer,
.masonry__brick {
width: 33.33333%;
}
.masonry__brick {
padding: 0 1.6vw;
}
.masonry .entry {
margin-bottom: 3.2vw;
}
}
@media screen and (max-width: 1700px) {
.masonry__brick {
padding: 0 1.4vw;
}
.masonry .entry {
margin-bottom: 2.8vw;
}
}
@media screen and (max-width: 1600px) {
.listing-header {
padding: 0 1.2vw 2.4rem;
}
.masonry__brick {
padding: 0 1.2vw;
}
.masonry .entry {
margin-bottom: 2.4vw;
}
}
@media screen and (max-width: 1500px) {
.masonry-wrap {
max-width: 900px;
}
.listing-header {
padding: 0 1.8vw 2.4rem;
}
.masonry .grid-sizer,
.masonry__brick {
width: 50%;
}
.masonry__brick {
padding: 0 1.8vw;
}
.masonry .entry {
margin-bottom: 3.6vw;
}
}
@media screen and (max-width: 1400px) {
.display-1 {
font-size: 30px;
}
}
@media screen and (max-width: 1100px) {
.footer-two {
padding: 20px !important;
padding-bottom: 50px !important;
}
.footer-cols {
grid-template-columns: repeat(2, 2fr) !important;
}
.masonry-wrap,
.listing-header {
width: 89%;
max-width: 900px;
margin: 0 auto;
}
}
@media screen and (max-width: 800px) {
.mc {
flex-direction: column;
}
.mc-text h5,
.mc-text h2 {
text-align: center;
margin: 0px !important;
margin-bottom: 20px !important;
}
.snow-cont {
display: none !important;
}
.display-1 {
font-size: 26px;
}
.masonry-wrap {
max-width: 580px;
}
.listing-header {
text-align: center;
}
.masonry .grid-sizer,
.masonry__brick {
width: 100%;
float: none;
}
.masonry__brick {
padding: 0 3.6rem;
}
.masonry .entry {
margin-bottom: 4rem;
}
}
@media screen and (max-width: 600px) {
.footer-two {
padding: 20px !important;
padding-bottom: 50px !important;
}
.footer-cols {
grid-template-columns: repeat(1, 4fr) !important;
}
.display-1 {
font-size: 26px;
}
.masonry-wrap,
.listing-header {
width: auto;
max-width: 500px;
padding-left: 25px;
padding-right: 25px;
}
.masonry__brick {
padding: 0 10px;
}
}
@media screen and (max-width: 500px) {
.display-1 {
font-size: 26px;
}
}
@media screen and (max-width: 400px) {
.display-1 {
font-size: 22px;
}
.media-wrap {
margin-bottom: 5.6rem;
}
.masonry-wrap,
.listing-header {
padding-left: 22px;
padding-right: 22px;
}
.masonry__brick {
padding: 0;
}
.masonry .entry {
margin-bottom: 3.2rem;
}
}
/* ===================================================================
* # site header
*
* ------------------------------------------------------------------- */
.s-wrap {
position: relative;
}
#under-logo {
position: absolute;
opacity: 0.05;
right: 0px;
bottom: -3px;
height: 101%;
z-index: -1;
}
#app {
display: flex;
flex-direction: column;
}
.filter-container {
width: 100%;
overflow-x: auto;
position: relative;
white-space: nowrap;
padding: 55px 50px 0px 50px;
-ms-overflow-style: none;
display: flex;
/* Internet Explorer 10+ */
scrollbar-width: none;
/* Firefox */
background: transparent;
gap: 14px;
}
.filter {
display: inline-flex;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
}
.filter img {
width: 55px;
height: 55px;
border-radius: 50%;
border: 3px solid white;
}
.filter span {
width: 57px;
display: flex;
justify-content: center;
align-items: center;
height: 57px;
color: #686a73;
font-size: 30px;
padding: 5px;
border-radius: 50%;
border: 3px solid white;
}
.filter .border {
border-radius: 50%;
border: 3px solid #188F8B;
max-width: 63px;
height: 63px !important;
}
.filter p {
margin-top: 8px;
text-align: center;
font-weight: 700;
letter-spacing: 0.5px;
font-size: 10px;
text-transform: uppercase;
margin-bottom: 0px;
}
.filter-container::-webkit-scrollbar {
display: none;
/* Safari and Chrome */
}
.search-container {
position: relative;
width: 0px;
top: 0px;
display: inline-block;
transition: width 0.3s ease;
transition: min-width 0.3s ease;
min-width: 0px;
overflow: hidden;
position: relative;
}
.search-container.expand {
width: 400px !important;
min-width: 400px;
margin-left: 10px;
}
.search-container.collapse {
width: 0px;
min-width: 0px;
margin-left: 0px;
}
#search-filter {
margin-right: -14px;
}
.search-input {
width: calc(100% - 10px);
height: 57px !important;
padding: 15px 25px !important;
box-sizing: border-box;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.7px;
background-color: white !important;
border-radius: 100px !important;
color: #686a73;
border: 3px solid #eaeaea !important;
text-transform: uppercase;
margin-bottom: 0px;
margin-top: 12px;
}
.header-container {
/* From https://css.glass */
z-index: 99 !important;
width: 100dvw;
display: flex;
flex-direction: row;
position: fixed;
align-items: center;
/* From https://css.glass */
background: #f6f7f863;
backdrop-filter: blur(12.2px);
-webkit-backdrop-filter: blur(12.2px);
}
.header-container .logo {
width: 46px;
padding: 12px;
display: none;
cursor: pointer;
margin-left: 5px;
}
.header-container a .title {
text-transform: uppercase;
margin: 0px;
font-size: 14px;
margin-left: 3px;
cursor: pointer;
font-weight: 700;
margin-left: 20px;
display: flex;
justify-content: center;
align-items: center;
color: #686a73;
/*666a72*/
letter-spacing: 0.7px;
}
.header-container a .title span {
font-size: 17px;
}
.header-container .search {
width: 30%;
padding: 4px 20px;
/*background-color: #eaeaea;*/
margin: 10px;
font-size: 13px;
border: 1px solid #eaeaea !important;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.7px;
border-radius: 5px;
height: auto;
margin-right: 0px;
color: #686a73;
border: 0px solid #ccc;
}
.header-container .search:focus {
border: 1px solid #188f8b42 !important;
outline: none !important;
}
.header-container .search-btn {
padding: 6px;
user-select: none;
/* Standard syntax */
background-color: #188f8b42;
margin: 10px;
font-size: 30px;
border-radius: 5px;
cursor: pointer;
margin-right: 150px;
color: #188F8B;
}
.header-container .grid-btn {
padding: 6px;
background-color: #188f8b42;
margin: 10px;
font-size: 30px;
border-radius: 5px;
cursor: pointer;
user-select: none;
/* Standard syntax */
margin-right: 0px;
color: #188F8B;
}
.header-container .menu {
padding: 5px;
/*background-color: #eaeaea;*/
font-size: 30px;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
margin-bottom: 5px;
margin-top: 5px;
user-select: none;
/* Standard syntax */
color: #686a73;
}
.header-container #select-cur {
/* padding: 8px 10px;
background-color: #eaeaea;*/
font-size: 14px;
border-radius: 5px;
cursor: pointer;
padding: 10px;
font-weight: 700;
user-select: none;
/* Standard syntax */
color: #686a73;
}
/* -------------------------------------------------------------------
* ## header logo
* ------------------------------------------------------------------- */
.header__logo a {
display: block;
margin: 0;
padding: 0;
outline: 0;
border: none;
transition: all .3s;
}
.header__logo img {
width: 100%;
height: 100%;
margin: 0;
}
/* -------------------------------------------------------------------
* ## header main navigation
* ------------------------------------------------------------------- */
.header__nav-wrap {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-flex: 1 1 0%;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
max-width: 100%;
background-color: #fff;
margin-top: 3.2rem;
}
.header__nav-wrap a {
color: rgba(0, 0, 0, 0.6);
}
.header__nav {
list-style: none;
margin: 0;
padding: 0;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 3px;
font-size: 12px;
}
.header__nav li {
display: block;
padding: 0 2rem 0 0;
width: 100%;
position: relative;
}
.header__nav li a {
display: block;
color: rgba(0, 0, 0, 0.6);
line-height: 4.4rem;
transition-property: color;
}
.header__nav li.has-children {
padding-right: 3.3rem;
}
.header__nav li.has-children>a::after {
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
border-right: 1px solid rgba(255, 255, 255, 0.4);
content: '';
display: block;
height: 5px;
width: 5px;
margin-top: -4px;
pointer-events: none;
position: absolute;
right: 1.8rem;
top: 21px;
-webkit-transform-origin: 66% 66%;
-ms-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: all .5s;
}
.header__nav li.has-children>a.sub-menu-is-open::after {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.header__nav li:hover>a,
.header__nav li:focus>a {
color: #686a73;
}
.header__nav li:hover li,
.header__nav li:focus li {
background: transparent;
}
.header__nav li.current>a {
color: #000000;
}
.header__nav li ul {
display: none;
font-weight: 300;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 3px;
margin: 0;
padding: .8rem 0 2rem 1.2rem;
}
.header__nav li ul a {
line-height: 3.2rem;
}
/* -------------------------------------------------------------------
* ## menu toggle
* ------------------------------------------------------------------- */
.header__menu-toggle {
display: none;
height: 42px;
width: 42px;
line-height: 42px;
font-family: 'Montserrat', sans-serif;
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: .2rem;
color: rgba(255, 255, 255, 0.5);
transition: all .3s;
position: absolute;
right: 4rem;
top: 18px;
}
.header__menu-toggle:hover,
.header__menu-toggle:focus {
color: #ffffff;
}
.header__menu-toggle span {
display: block;
width: 16px;
height: 2px;
margin-top: -1px;
background-color: #ffffff;
transition: all .5s;
font: 0/0 a;
text-shadow: none;
color: transparent;
position: absolute;
top: 50%;
left: 9px;
right: auto;
bottom: auto;
}
.header__menu-toggle span::before,
.header__menu-toggle span::after {
content: '';
width: 24px;
height: 100%;
background-color: inherit;
position: absolute;
left: 0;
transition: all .5s;
}
.header__menu-toggle span::before {
top: -8px;
}
.header__menu-toggle span::after {
bottom: -8px;
}
.header__menu-toggle.is-clicked span {
background-color: rgba(255, 255, 255, 0);
transition: all .1s;
}
.header__menu-toggle.is-clicked span::before,
.header__menu-toggle.is-clicked span::after {
background-color: white;
}
.header__menu-toggle.is-clicked span::before {
top: 0;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.header__menu-toggle.is-clicked span::after {
bottom: 0;
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
/* -------------------------------------------------------------------
* ## header social
* ------------------------------------------------------------------- */
.header__social {
list-style: none;
margin: 4rem 0 0 0;
padding: 0 0 4.4rem 0;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.header__social li {
margin-right: 2px;
}
.header__social li:last-child {
margin-right: 0;
}
.header__social a {
display: block;
background-color: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.5);
height: 3.6rem;
width: 3.6rem;
border-radius: 50%;
position: relative;
}
.header__social a::after {
z-index: 1;
content: '';
display: block;
height: 1.4rem;
width: 1.4rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transition: all .3s ease-in-out;
position: absolute;
left: 50%;
right: 0;
top: 50%;
}
.header__social a:hover::after {
height: 1.8rem;
width: 1.8rem;
}
.header__social span {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
border: 0;
position: absolute;
}
.header__social .ss-facebook a::after {
background-image: url(../images/icons/social/icon-facebook.svg);
}
.header__social .ss-twitter a::after {
background-image: url(../images/icons/social/icon-twitter.svg);
}
.header__social .ss-dribbble a::after {
background-image: url(../images/icons/social/icon-dribbble.svg);
}
.header__social .ss-behance a::after {
background-image: url(../images/icons/social/icon-behance.svg);
}
.header__social .ss-instagram a::after {
background-image: url(../images/icons/social/icon-instagram.svg);
}
.header__social .ss-pinterest a::after {
background-image: url(../images/icons/social/icon-pinterest.svg);
}
.header__social .ss-rss a::after {
background-image: url(../images/icons/social/icon-rss.svg);
}
/* -------------------------------------------------------------------
* responsive:
* header
* -------------------------------------------------------------------
@media screen and (max-width: 1600px) {
.header-container {
width: 290px;
}
}
@media screen and (max-width: 1200px) {
.header-container {
width: 270px;
padding-right: 2.8rem;
padding-left: 4rem;
}
.header__nav {
font-size: 15.5px;
}
}
@media screen and (max-width: 1100px) {
.header-container {
width: 100%;
background: transparent;
padding: 0;
min-height: 78px;
bottom: auto;
}
.header__top {
z-index: 100;
background: white;
width: 100%;
height: 78px;
position: absolute;
top: 0;
left: 0;
}
.header__logo {
margin-top: 4px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
position: absolute;
top: 50%;
left: 4rem;
}
.header__logo img {
width: 120px;
height: 29px;
}
.header__nav-wrap {
z-index: 99;
background: #eaeaea;
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
margin: 0;
padding: 164px 60px 64px;
overflow-y: auto;
}
.nav-wrap-is-visible .header-container {
height: 100vh;
}
.nav-wrap-is-visible .header__top {
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.nav-wrap-is-visible .header__nav-wrap {
opacity: 1;
visibility: visible;
}
.nav-wrap-is-visible .search-trigger {
display: none;
}
.header__nav {
font-size: 20px;
border-top: 1px dotted rgba(255, 255, 255, 0.04);
}
.header__nav>li {
border-bottom: 1px dotted rgba(255, 255, 255, 0.04);
}
.header__nav>li>a {
line-height: 7.2rem;
}
.header__nav li.has-children>a::after {
top: 32px;
}
.header__nav li ul {
font-size: 12px;
}
.header__nav li ul a {
line-height: 4rem;
}
.header__menu-toggle {
z-index: 101;
display: block;
}
.header__social {
margin-top: 8rem;
}
.header__social a {
height: 4.4rem;
width: 4.4rem;
}
}
@media screen and (max-width: 800px) {
.header__nav {
font-size: 18px;
}
.header__nav>li>a {
line-height: 6.8rem;
}
.header__nav li.has-children>a::after {
top: 30px;
}
.header__nav li ul {
font-size: 11px;
}
}
@media screen and (max-width: 500px) {
.header__logo {
left: 3.4rem;
}
.header__nav-wrap {
padding: 152px 44px 64px;
}
.header__menu-toggle {
right: 3.4rem;
}
}
@media screen and (max-width: 400px) {
.header__logo {
left: 2.4rem;
}
.header__nav-wrap {
padding: 140px 40px 64px;
}
.header__menu-toggle {
right: 2.4rem;
}
}
*/
/* ===================================================================
* # search
*
* ------------------------------------------------------------------- */
.search-block {
z-index: 400;
display: block;
text-align: center;
background-color: #ffffff;
transition: all .3s;
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.search-form {
width: 100%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
position: absolute;
top: 50%;
}
.search-form label {
color: #000000;
}
.search-form::after {
content: "Press Enter to begin your search.";
display: block;
letter-spacing: 0.6px;
font-size: 1.6rem;
margin-top: 3.2rem;
text-align: center;
color: rgba(0, 0, 0, 0.5);
}
.search-form input[type="search"] {
background-color: transparent;
color: #000000;
height: auto;
width: 100%;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 6rem;
line-height: 1.6;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
max-width: 680px;
padding-top: .8rem !important;
padding-bottom: .8rem !important;
margin: 0 auto;
text-align: center;
}
.search-form input[type="search"]::-webkit-search-decoration,
.search-form input[type="search"]::-webkit-search-cancel-button,
.search-form input[type="search"]::-webkit-search-results-button,
.search-form input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none;
}
.search-form input[type="search"]::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #000000;
}
.search-form input[type="search"]:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #000000;
opacity: 1;
}
.search-form input[type="search"]::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #000000;
opacity: 1;
}
.search-form input[type="search"]:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #000000;
}
.search-form input[type="search"]::-ms-input-placeholder {
/* Microsoft Edge */
color: #000000;
}
.search-form input[type="search"]::placeholder {
/* Most modern browsers support this now. */
color: #000000;
}
.search-form input[type="search"].placeholder {
color: #000000 !important;
}
.search-form input[type="search"]:focus {
outline: none;
}
.search-form input[type="submit"] {
display: none;
}
body.search-is-visible {
overflow: hidden;
}
.search-is-visible .search-block {
opacity: 1;
visibility: visible;
}
/* -------------------------------------------------------------------
* ## close button for search
* ------------------------------------------------------------------- */
.search-close {
position: absolute;
display: block;
width: 45px;
height: 45px;
top: 21px;
left: 50%;
margin-left: -23px;
font: 0/0 a;
text-shadow: none;
color: transparent;
}
.search-close::before,
.search-close::after {
content: '';
position: absolute;
display: inline-block;
width: 2px;
height: 20px;
top: 12px;
left: 22px;
background-color: #000000;
}
.search-close::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.search-close::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* -------------------------------------------------------------------
* ## search modal trigger
* ------------------------------------------------------------------- */
.search-trigger,
.search-line {
z-index: 0;
}
.search-trigger {
font-weight: 400;
font-size: 12px;
line-height: 1.6rem;
text-transform: uppercase;
letter-spacing: 3px;
color: #000000;
transition-property: color;
position: fixed;
right: 40px;
top: 6.4rem;
}
.search-trigger:focus,
.search-trigger:hover {
color: #686a73;
}
.search-trigger svg {
height: 18px;
width: 18px;
display: block;
}
.search-trigger span {
content: "Search";
width: auto;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 1.8rem 100%;
transform-origin: 1.8rem 100%;
position: absolute;
top: 72px;
left: 0;
}
.search-line {
display: block;
width: 1px;
height: calc(100vh - 200px);
background-color: rgba(0, 0, 0, 0.1);
position: fixed;
right: 48px;
top: auto;
bottom: 0;
}
/* -------------------------------------------------------------------
* responsive:
* search
* ------------------------------------------------------------------- */
@media screen and (max-height: 750px) {
/*
.catelouge-container {
overflow: auto;
scroll-snap-type: none !important;
-ms-overflow-style: auto !important;
scrollbar-width: auto !important;
padding-bottom: 200px !important;
}
Hide scrollbar for Chrome, Safari and Opera
.catelouge-container::-webkit-scrollbar {
display: auto !important;
}*/
}
@media screen and (max-width: 1200px) {
.filter-container {
padding-left: 15px;
padding-right: 15px;
}
.catelouge-container {
grid-template-columns: repeat(3, 1fr) !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
}
@media screen and (max-width: 1100px) {
.search-trigger {
z-index: 101;
position: fixed;
top: 2.6rem;
right: 8.8rem;
}
.search-trigger svg {
width: 28px;
height: 28px;
}
.search-trigger svg path {
fill: white;
}
.search-trigger span,
.search-line {
display: none;
}
.scroll-btns {
padding-right: 20px;
bottom: 40px !important;
}
}
@media screen and (max-width: 900px) {
.branch {
width: 60% !important;
}
.branch2 {
width: 60% !important;
}
.checkout-info {
flex-direction: column-reverse;
}
.catelouge-container {
grid-template-columns: repeat(2, 1fr) !important;
}
.header-container .search {
display: none !important;
}
.header-container .grid-btn {
display: none !important;
}
.header-container .search-btn {
display: none !important;
}
.search-form::after {
font-size: 1.5rem;
}
.search-form input[type="search"] {
max-width: none;
width: 75%;
font-size: 4.2rem;
}
}
@media screen and (max-width: 600px) {
.search-container.expand {
width: 70dvw !important;
min-width: 70dvw;
margin-left: 10px;
}
.catelouge-container {
grid-template-columns: repeat(1, 1fr) !important;
}
.search-form input[type="search"] {
font-size: 3.4rem;
}
}
@media screen and (max-width: 500px) {
.search-trigger {
right: 8rem;
}
}
@media screen and (max-width: 400px) {
.search-form input[type="search"] {
font-size: 2.6rem;
}
.search-trigger {
top: 2.8rem;
right: 7.2rem;
}
}
/* ===================================================================
* # site content & footer
*
* ------------------------------------------------------------------- */
.s-content,
.s-footer {
/* padding-left: 330px;
width: calc(100% - 100px);
*/
padding: 0px 30px 0px 30px;
max-width: 2140px;
}
/* -------------------------------------------------------------------
* ## content
* ------------------------------------------------------------------- */
.s-content {
padding-top: 6.4rem;
}
.content__page {
padding-top: 5rem;
padding-bottom: 6rem;
}
.content__page img {
margin-top: 3.2rem;
margin-bottom: 3.2rem;
}
.content__page-header {
text-align: center;
margin-bottom: 4rem;
}
/* -------------------------------------------------------------------
* ## footer
* ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
* ## go to top
* ------------------------------------------------------------------- */
.scroll-btns {
position: fixed;
right: 18px;
bottom: 70px;
}
.next-item {
z-index: 1;
opacity: 1;
visibility: visible;
transition: all .8s;
cursor: pointer;
z-index: 1;
}
.prev-item {
z-index: 1;
opacity: 1;
visibility: visible;
transition: all .8s;
margin-bottom: 20px;
cursor: pointer;
z-index: 1;
}
.prev-item a,
.prev-item a:visited {
text-decoration: none;
border: none;
display: block;
height: 6rem;
width: 6rem;
line-height: 6rem;
border-radius: 10px;
text-align: center;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
transition: all .3s;
background-image: url(../images/icons/icon-arrow-up.svg);
background-color: #0c0c0c;
background-repeat: no-repeat;
background-position: center center;
background-size: 7px 14px;
}
.next-item a,
.next-item a:visited {
text-decoration: none;
border: none;
display: block;
height: 6rem;
width: 6rem;
border-radius: 10px;
line-height: 6rem;
transform: rotate(180deg);
text-align: center;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
transition: all .3s;
background-image: url(../images/icons/icon-arrow-up.svg);
background-color: #0c0c0c;
background-repeat: no-repeat;
background-position: center center;
background-size: 7px 14px;
}
.next-item.link-is-visible {
opacity: 1;
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* -------------------------------------------------------------------
* responsive:
* site content & footer
* ------------------------------------------------------------------- */
@media screen and (max-width: 1600px) {
.s-content,
.s-footer {
/* padding-left: 320px; */
}
}
@media screen and (max-width: 1200px) {
.s-content,
.s-footer {
/*padding-left: 290px;
width: calc(100% - 80px);*/
}
}
@media screen and (max-width: 1100px) {
.s-content,
.s-footer {
padding: 0px 0px 0px 0px !important;
width: 100%;
}
.s-content {
padding-top: 14.2rem;
}
.content__page {
padding-top: 10rem;
padding-bottom: 6rem;
}
}
@media screen and (max-width: 600px) {
#under-logo {
display: none;
}
.s-content {
padding-top: 12.6rem;
}
.content__page {
padding-bottom: 4rem;
}
.footer__copyright span {
display: block;
}
.footer__copyright span::after {
display: none;
}
}
/* ===================================================================
* # blog styles and blog components
*
* ------------------------------------------------------------------- */
.entry__media,
.entry__post-thumb {
position: relative;
}
/* -------------------------------------------------------------------
* ## entry header meta
* ------------------------------------------------------------------- */
.entry__header-meta {
list-style: none;
font-size: 1.8rem;
font-weight: 300;
line-height: 1.778;
margin-left: 0;
color: #000000;
}
.entry__header-meta li {
display: inline-block;
padding-left: 0;
margin: 0 .8rem;
}
.entry__header-meta a {
color: rgba(0, 0, 0, 0.7);
}
.entry__header-meta a:hover,
.entry__header-meta a:focus {
color: #000000;
}
.entry__header-meta .cat-links a::after {
content: ", ";
}
.entry__header-meta .cat-links a:last-child::after {
display: none;
}
/* -------------------------------------------------------------------
* ## post tags
* ------------------------------------------------------------------- */
.entry__tags {
margin-top: 6rem;
}
.entry__tags span {
font-weight: 500;
color: #000000;
padding-right: 56px;
margin-right: 1.6rem;
position: relative;
}
.entry__tags span::after {
display: inline-block;
content: "";
height: 1px;
width: 40px;
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: 50%;
right: 0;
}
.entry__tags .entry__tag-list {
display: inline-block;
padding-right: 0;
margin-right: 0;
}
.entry__tags .entry__tag-list::after {
display: none;
}
.entry__tags .entry__tag-list a {
display: inline-block;
font-weight: 400;
font-size: 1.3rem;
line-height: inherit;
color: #1a1a1a;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px;
margin-right: 6px;
margin-bottom: 8px;
padding: 1px 12px;
}
.entry__tags .entry__tag-list a:hover,
.entry__tags .entry__tag-list a:focus {
background-color: #000000;
border-color: #000000;
color: #ffffff;
}
.entry__tags .entry__tag-list a:last-child {
margin-right: 0;
}
/* -------------------------------------------------------------------
* ## blog single page navigation
* ------------------------------------------------------------------- */
.entry__pagenav {
margin-top: 10.2rem;
padding-top: 2rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
}
.entry__nav:after {
content: "";
display: table;
clear: both;
}
.entry__nav span {
display: block;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2.5px;
color: #1a1a1a;
margin-bottom: 1.6rem;
transition: all .3s;
}
.entry__nav a {
font-weight: 500;
font-size: 3rem;
line-height: 1.333;
color: #000000;
}
.entry__nav a:hover span,
.entry__nav a:focus span {
color: #33998a;
}
.entry__prev,
.entry__next {
width: 50%;
float: left;
padding-right: 2rem;
}
/* -------------------------------------------------------------------
* ## related articles
* ------------------------------------------------------------------- */
.entry__related {
margin-top: 10.2rem;
padding-top: 2rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
}
.entry__related h3 {
margin-top: 0;
margin-bottom: 3.2rem;
}
.entry__related h5 {
margin-top: .8rem;
font-size: 1.9rem;
font-weight: 400;
line-height: 2.8rem;
}
.related {
list-style: none;
margin-left: -4rem;
}
.related__item {
float: left;
width: 33.33333%;
padding-left: 4rem;
margin-bottom: 3.2rem;
}
.related__link {
display: block;
position: relative;
}
.related__link img {
vertical-align: bottom;
}
.related__link::before {
content: "";
display: block;
background: rgba(255, 255, 255, 0.2);
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all .3s;
}
.related__link:hover::before {
opacity: 1;
visibility: visible;
}
/* -------------------------------------------------------------------
* responsive:
* blog styles and blog components
* ------------------------------------------------------------------- */
@media screen and (max-width: 800px) {
.entry__header-meta {
font-size: 1.7rem;
}
.entry__prev,
.entry__next {
width: auto;
float: none;
padding-right: 0;
}
.entry__nav [class*="entry__"]+[class*="entry__"] {
margin-top: 2rem;
}
.related {
margin-left: -4.4rem;
}
.related__item {
padding-left: 4.4rem;
width: 50%;
}
.related__item:nth-child(2n+1) {
clear: both;
}
}
@media screen and (max-width: 600px) {
.related {
margin-left: -2rem;
}
.related__item {
padding-left: 2rem;
}
}
@media screen and (max-width: 460px) {
.related {
margin-left: 0;
}
.related__item {
float: none;
width: auto;
padding-left: 0;
}
}
/* -------------------------------------------------------------------
* ## comments
* ------------------------------------------------------------------- */
.comments-wrap {
padding: 6.4rem 0 0 0;
background-color: #ffffff;
}
.comments-wrap h3 {
margin-top: 0;
}
.comments-wrap h3 span {
display: block;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 1.8rem;
line-height: 1.556;
color: #7e7e7e;
}
/* comments
* -------------------------------------------------- */
#comments {
padding-top: 2rem;
padding-bottom: 1.2rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
#comments ol,
#comments ul {
list-style: none;
}
.commentlist {
margin: 6rem 0 5.6rem;
padding: 0;
}
.commentlist>.comment {
position: relative;
list-style: none;
margin: 0;
padding: 2rem 0 0 0;
padding-left: 14%;
}
.comment__avatar {
position: absolute;
left: 0;
display: block;
}
.comment__avatar img {
height: 6.4rem;
width: 6.4rem;
border-radius: 100%;
vertical-align: bottom;
}
.comment__info {
position: relative;
}
.comment__info .comment__author {
font-weight: 500;
font-size: 1.9rem;
line-height: 1.684;
font-style: normal;
color: #000000;
}
.comment__meta {
font-family: 'Montserrat', sans-serif;
font-style: normal;
line-height: 2.4rem;
display: block;
color: #7e7e7e;
text-align: right;
width: 150px;
position: absolute;
top: 0;
right: 0;
}
.comment__meta .comment__time {
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: .1rem;
color: #7e7e7e;
}
.comment__meta .comment__reply a {
font-size: 1.3rem;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .2rem;
color: #000000;
}
.comment__text {
clear: both;
margin: 1.6rem 0 0 0;
padding: 0 175px 0 0;
}
.comment ul.children {
margin: 0;
padding: 0;
}
.comment ul.children li {
padding-left: 5%;
margin-top: calc(3.2rem + 2rem);
border-left: 1px solid rgba(0, 0, 0, 0.15);
}
/* comments form
* ---------------------------- */
.comments-wrap .comment-respond {
margin-top: 6.4rem;
}
.comment-respond form {
padding-top: 6rem;
}
/* -------------------------------------------------------------------
* responsive:
* comments
* ------------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
.comment__avatar img {
height: 6rem;
width: 6rem;
}
.comment__meta {
text-align: left;
width: auto;
position: static;
}
.comment__meta .comment__time,
.comment__meta .comment__reply {
display: inline-block;
}
.comment__meta .comment__time {
margin-right: 12px;
}
.comment__text {
padding: 0;
}
.comments-wrap .comment-respond {
margin-top: 4.4rem;
}
}
@media screen and (max-width: 800px) {
.comment__avatar img {
margin-top: 0;
height: 5.2rem;
width: 5.2rem;
}
}
@media screen and (max-width: 600px) {
.commentlist>.comment {
padding-top: 0;
padding-left: 0;
}
.comment__avatar {
display: none;
}
.comment ul.children li {
margin-top: calc(3.2rem + 0rem);
}
}
@media screen and (max-width: 500px) {
.comment ul.children li {
border-left: none;
}
}
@media screen and (max-width: 400px) {
.comment-respond form {
padding-top: 3.2rem;
}
}
/* -------------------------------------------------------------------
* ## format gallery
* ------------------------------------------------------------------- */
.format-gallery .entry__thumb {
overflow: hidden;
}
.format-gallery .slider {
overflow: hidden;
}
.format-gallery .slick-dots {
text-align: left;
margin: 0;
padding: 0 2rem 0 2.4rem;
position: absolute;
top: auto;
bottom: 2.4rem;
left: 0;
}
.format-gallery .slider__slides {
cursor: pointer;
overflow: hidden;
opacity: 0;
visibility: hidden;
}
.format-gallery .slider__slides.slick-initialized {
opacity: 1;
visibility: visible;
}
#no-result {
display: none;
width: 100%;
}
/*
#no-result h2 {
margin: 0px;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.7px;
text-align: center;
color: #188F8B !important;
}
#no-result h5 {
margin: 0px;
font-size: 13px;
font-weight: 600;
margin-top: 10px;
text-align: center;
color: #7c7c7c !important;
}*/
.catelouge-wrapper {
min-height: calc(100dvh - 140px);
width: 100%;
justify-content: center;
display: flex;
align-items: center;
flex-direction: column;
}
.catelouge-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* Three columns */
grid-auto-rows: auto;
/* Infinite rows */
gap: 20px;
min-height: calc(100dvh - 140px);
width: 100%;
/*
overflow-y: scroll;
scroll-snap-type: y mandatory;*/
padding: 18px 50px 50px 50px;
margin-top: 0px;
/*
-ms-overflow-style: none;
scrollbar-width: none;*/
}
/*
.catelouge-container::-webkit-scrollbar {
display: none;
}
.catelouge-container>section {
scroll-snap-align: start;
transition: transform 0.3s ease-in-out;
}
*/
.watch {
/* height: 100%; */
}
.watch-body {
padding: 0px;
}
.watch-container {
box-shadow: rgba(100, 100, 111, 0.2) 0px 3px 7px 0px;
background-color: #fff;
border-radius: 16px;
padding: 16px;
position: relative;
cursor: pointer;
display: flex;
overflow: hidden;
justify-content: left;
flex-direction: column;
}
.footer-cell {
display: flex;
justify-content: center;
align-items: center;
}
.footer-cell img {
height: 28px;
padding-left: 5px;
padding-right: 5px;
}
.watch-container .watch-image {
border: 1px solid #dadada !important;
border-radius: 8px;
margin-bottom: 10px;
aspect-ratio: 1/1;
width: 100%;
min-height: 200px;
}
.img-loader {
border: 1px solid #dadada !important;
width: 100%;
border-radius: 10px;
padding: calc(50% - 25px);
margin-bottom: 10px;
}
/* HTML: */
.loader {
width: 50px;
aspect-ratio: 1/1;
border-radius: 50%;
border: 3px solid #eaeaea;
border-right-color: #188F8B;
animation: l2 1s infinite linear;
}
@keyframes l2 {
to {
transform: rotate(1turn)
}
}
.watch-container .stock-indicator {
position: absolute;
left: 30px;
top: 30px;
width: 12px;
height: 12px;
background-color: #188F8B;
border-radius: 20px;
animation: blink 1s infinite;
}
.blink {
animation: blink 1s infinite;
}
.procure {
color: #f17d01 !important;
}
.procure span {
color: #f17d01 !important;
}
.watch-container .title {
margin: 0px;
font-weight: 700;
color: #686a73;
text-transform: uppercase;
letter-spacing: 0.7px;
font-size: 12px;
padding-top: 5px;
margin-bottom: 0px;
min-height: 32px;
text-align: right;
}
.watch-container .brand {
margin: 0px;
display: flex;
min-height: 32px;
line-height: 1.2;
text-transform: uppercase;
font-size: 12px;
flex: 1;
padding-top: 5px;
font-weight: 700;
color: #686a73;
letter-spacing: 0.7px;
text-align: left;
}
.watch-container hr {
margin-top: 10px;
margin-bottom: 3px;
}
.watch-container .price {
font-weight: 700;
color: #686a73;
margin: 0px;
font-size: 12px;
flex: 1;
letter-spacing: 0.7px;
margin-top: 10px;
margin-bottom: 5px;
text-align: left;
}
.watch-container .members-price {
font-weight: 700;
color: #188F8B;
margin: 0px;
font-size: 12px;
letter-spacing: 0.7px;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 5px;
background-color: #188f8b42;
margin-top: 5px;
margin-bottom: 5px;
text-align: right;
}
.split {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.watch-container .specs {
font-size: 12px;
margin: 0px;
color: #188F8B;
letter-spacing: 0.7px;
text-transform: uppercase;
display: flex;
font-weight: 700;
align-items: center;
justify-content: right;
text-align: left;
margin-top: 10px;
}
.watch-container .location {
font-size: 12px;
margin: 0px;
color: #188F8B;
display: flex;
flex: 1;
align-items: center;
justify-content: right;
letter-spacing: 0.7px;
text-transform: uppercase;
font-weight: 700;
border-radius: 20px;
text-align: right;
margin-top: 10px;
}
.watch-container span {
color: #188F8B;
padding-right: 5px;
font-size: 18px;
font-variation-settings:
'FILL' 1,
'wght' 400,
'GRAD' 0,
'opsz' 24
}
.watch-desc {
flex: 1;
padding: 10px 0px 0px 40px;
display: flex;
height: 100%;
flex-direction: column;
}
.watch-desc .title {
margin: 0px;
font-weight: 700;
color: #686a73;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-top: 10px;
font-size: 25px;
}
.watch-desc .brand {
margin: 0px;
display: flex;
text-transform: uppercase;
font-size: 18px;
padding-top: 0px;
font-weight: 500;
color: #188F8B;
align-items: center;
letter-spacing: 1px;
}
.watch-desc .price {
font-weight: 400;
color: #686a73;
margin: 0px;
font-size: 25px;
flex: 1;
letter-spacing: 2px;
margin-left: 3px;
display: flex;
align-items: center;
}
.watch-desc .price span {
margin-right: 10px;
font-variation-settings:
'FILL' 1,
'wght' 400,
'GRAD' 0,
'opsz' 24
}
.watch-desc .mem-price {
font-weight: 00;
color: #188F8B;
border: 2px solid #188F8B;
margin: 0px;
margin-top: 0px;
overflow: hidden;
font-size: 25px;
letter-spacing: 2px;
border-radius: 10px;
margin-left: 3px;
}
.m-price {
margin: 0px;
font-weight: 400;
color: #188F8B;
margin: 0px;
margin-top: 0px;
padding: 5px 20px;
font-size: 25px;
flex: 1;
letter-spacing: 2px;
}
.m-tag {
margin: 0px;
padding: 2px 10px;
padding-bottom: 4px;
font-size: 10px;
font-weight: 700;
left: 0px;
letter-spacing: 0.7px;
color: white;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
background-color: #188F8B;
}
#p-views {
margin: 0px !important;
color: #686a73;
}
#p-stock-id {
margin: 0px !important;
color: #686a73;
margin-left: 3px !important;
}
.price-split {
margin-top: 0px;
flex-direction: row;
}
.m-tag span {
margin-right: 5px;
font-size: 12px;
font-variation-settings:
'FILL' 1,
'wght' 400,
'GRAD' 0,
'opsz' 24
}
.watch-desc hr {
margin-top: 15px;
margin-bottom: 15px;
}
.watch-desc .specs {
font-size: 12px;
margin: 0px;
color: #188F8B;
letter-spacing: 0.7px;
display: flex;
align-items: center;
margin-left: 3px;
text-transform: uppercase;
font-weight: 700;
margin-top: 10px;
margin-bottom: 10px;
}
.watch-desc .specs span {
margin-right: 5px;
font-size: 20px;
font-variation-settings:
'FILL' 1,
'wght' 400,
'GRAD' 0,
'opsz' 24
}
.f-1 {
flex: 1;
}
.watch-desc .btn {
border-radius: 10px;
background-color: #188f8b42;
border: #188f8b42;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
letter-spacing: 0.7px;
color: #147c78;
margin: 0px;
padding: 0px 20px;
}
.watch-desc .actions {
display: flex;
}
.watch-desc .actions .btn-container {
display: flex;
flex: 1;
}
.watch-desc .actions .purchase {
display: flex;
margin-left: 15px;
color: white;
flex: 1;
background-color: #188F8B;
}
.watch-desc .actions .info {
flex: 1;
}
.watch-desc .actions .next {
color: #188F8B;
margin-left: 20px;
background-color: #188f8b42;
border-radius: 10px;
cursor: pointer;
padding: 0px 15px;
font-size: 30px !important;
display: flex;
align-items: center;
justify-content: center;
}
.watch-images {
background-color: #fff;
border-radius: 15px;
overflow: hidden;
height: 100%;
z-index: 1 !important;
border: 1px solid #dadada;
aspect-ratio: 1/1;
}
.watch-images img {
height: 100% !important;
width: 100% !important;
object-fit: contain !important;
}
@media screen and (max-width: 1024px) {
.watch-desc .actions {
display: flex;
flex-direction: column !important;
}
.watch-desc .actions .info {
display: none;
}
.watch-desc .actions .purchase {
display: flex;
margin-top: 15px;
margin-left: 0px !important;
}
.watch-desc .actions .next {
margin-top: 15px;
margin-left: 15px;
}
#buy-btn {
margin-right: 0px;
margin-bottom: 15px;
margin-top: 0px;
display: none;
}
#buy-btn-mobile {
visibility: visible !important;
position: relative !important;
pointer-events: all !important;
width: auto !important;
}
#buy-btn {
visibility: hidden !important;
position: absolute !important;
pointer-events: none !important;
width: 0px !important;
}
}
#buy-btn-mobile {
background-color: #188F8B;
color: white;
visibility: hidden;
position: absolute;
width: 0px;
margin-top: 20px;
pointer-events: none;
}
@media screen and (max-width: 825px) {
.watch-actions {
flex-direction: column !important;
}
.watch-desc .body span {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 6;
/* Number of lines to show */
-webkit-box-orient: vertical;
}
#side_nav .nav-footer {
margin-bottom: 0px;
}
#side_nav .nav-info {
width: 100% !important;
}
#side_nav .nav-info-mobile {
font-size: 13px !important;
display: block !important;
}
.watch-desc .price,
.watch-desc .m-price {
font-size: 20px !important;
}
.m-price {
padding: 5px 16px !important;
}
.watch-container .price {
font-size: 12px !important;
}
.watch-container .title {
font-size: 12px !important;
}
.watch-desc .title {
font-size: 20px !important;
margin-bottom: 0px;
margin-left: 3px;
margin-top: 17px;
}
.watch-desc .brand {
margin-left: 3px;
font-size: 15px;
}
.product-specs th,
.featured,
.product-specs td {
font-size: 12px !important;
}
.watch-desc .specs {
margin-top: 10px;
font-size: 12px !important;
margin-bottom: 10px !important;
}
.watch-desc .body {
font-size: 13px !important;
margin-bottom: 20px !important;
}
#side_nav .nav-left {
display: none !important;
}
#side_nav .nav-right {
padding-right: 20px !important;
}
.nav-search {
display: flex !important;
}
}
@media screen and (max-width: 1025px) {
.watch-images {
height: auto !important;
width: 100%;
}
.watch-images img {
width: 100%;
}
.watch-desc {
padding: 20px 0px 0px 00px !important;
}
.watch-desc .title {
margin-bottom: 0px;
margin-left: 3px;
}
.watch-desc .specs {
margin-top: 10px !important;
}
.watch-desc .body {
margin-bottom: 20px !important;
}
}
@media screen and (max-width: 600px) {
.watch-desc .body {
font-size: 12px !important;
}
.price-split {
margin-top: 0px;
justify-content: center;
align-items: center;
}
.x-split,
.menu-info {
flex-direction: column !important;
}
.menu-info a {
margin-top: 10px;
margin-left: 0px !important;
width: 100%;
}
}
@media screen and (max-height: 700px) {
.watch-desc {
width: 100%;
}
.watch-desc .body {
display: none;
}
.watch-desc .title {
font-size: 20px !important;
width: 100%;
}
.watch-desc .price {
font-size: 20px;
margin-top: 15px !important;
}
.watch-desc .brand {
padding-top: 5px;
}
.watch-desc .specs {
font-size: 12px !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
}
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined' !important;
font-variation-settings:
'FILL' 1,
'wght' 400,
'GRAD' 0,
'opsz' 20;
}
.flickity-page-dots {
bottom: 10px !important;
}
.flickity-button {
background-color: transparent !important;
padding: 0px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
top: 48% !important;
}
.flickity-prev-next-button.next {
right: -3px !important;
}
.flickity-button svg {
width: 15px !important;
fill: #686a73;
}
.flickity-page-dots .dot {
background-color: #686a73 !important;
width: 5px !important;
height: 5px !important;
}
.nav-search {
display: none;
margin-bottom: 20px;
}
.nav-search .search {
padding: 4px 20px;
background-color: #eaeaea;
margin: 10px;
font-size: 13px;
border: 1px solid #eaeaea !important;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.7px;
border-radius: 5px;
height: auto;
margin-right: 0px;
color: #686a73;
border: 0px solid #ccc;
flex: 1;
}
.nav-search .search:focus {
border: 1px solid #188f8b42 !important;
outline: none !important;
}
.nav-search .search-btn {
padding: 6px;
background-color: #188f8b42;
margin: 10px;
font-size: 30px;
margin-right: 0px;
border-radius: 5px;
cursor: pointer;
color: #188F8B;
}
#side_nav {
position: fixed;
top: 0;
right: -100%;
z-index: 102;
display: flex;
width: 100%;
overscroll-behavior: contain;
flex-direction: row;
height: 100dvh;
transition: right 0.3s ease-in-out;
/* From https://css.glass */
background: rgba(255, 255, 255, 0.71);
backdrop-filter: blur(22.2px);
-webkit-backdrop-filter: blur(12.2px);
}
#swipe {
background-color: #686a7323;
border-radius: 20px;
cursor: pointer;
padding-top: 40px;
padding-right: 20px;
width: 300px;
height: 300px;
}
.swipe-info {
color: #686a73;
text-transform: uppercase;
text-decoration: none;
font-size: 12px;
text-align: right;
margin-top: 20px;
letter-spacing: 0.7px;
font-weight: 500 !important;
}
#side_nav .nav-left {
display: flex;
margin-left: 20px;
margin-top: 40px;
justify-content: center;
flex-direction: column;
align-items: center;
}
#side_nav .nav-right {
display: flex;
flex-direction: column;
align-items: end;
padding-right: 60px;
padding-bottom: 30px;
padding-top: 60px;
padding-left: 20px;
margin-left: auto;
}
#side_nav ul {
list-style: none;
margin-top: 0px;
margin-bottom: 40px !important;
border-radius: 20px;
height: fit-content;
}
#side_nav ul li {
padding: 15px 0px;
text-align: end;
font-weight: 700 !important;
}
#side_nav .nav-info {
color: #188F8B;
text-decoration: none;
width: 55%;
font-size: 13px;
line-height: 20px;
text-align: right;
letter-spacing: 0px;
font-weight: 600 !important;
}
#side_nav .nav-info-mobile {
color: #686a73;
display: none;
text-transform: uppercase;
text-decoration: none;
font-size: 12px;
text-align: right;
letter-spacing: 0.7px;
font-weight: 500 !important;
}
#side_nav .nav-footer {
color: #686a73;
text-transform: uppercase;
text-decoration: none;
font-size: 13px;
text-align: right;
margin-top: 10px;
letter-spacing: 0.7px !important;
font-weight: 700 !important;
}
#side_nav ul li a {
color: #686a73;
text-transform: uppercase;
text-decoration: none;
font-size: 13px;
letter-spacing: 0.7px;
font-weight: 700 !important;
padding: 10px 0px;
}
#side_nav hr {
width: 100%;
max-width: 1000px;
}
#side_nav ul li a:hover {
color: #188F8B;
margin-right: 10px;
}
.dark-mode {
padding: 6px;
font-size: 30px;
border-radius: 5px;
cursor: pointer;
color: #686a73;
position: absolute;
left: 20px;
background-color: #686a7323;
bottom: 20px;
}
.close-menu {
padding: 6px;
font-size: 30px;
border-radius: 5px;
cursor: pointer;
color: #dd4043;
position: absolute;
right: 5px;
top: 5px;
}
.why {
width: fit-content;
margin-left: auto;
display: none;
}
.product-images {
background-color: #fff;
border-radius: 15px;
overflow: hidden;
z-index: 1 !important;
border: 1px solid #ccc;
aspect-ratio: 1/1;
}
.product-images img {
margin: 0px;
object-fit: contain;
height: 100%;
}
.table-wrap {
display: flex;
flex-direction: column;
}
.product-specs {
font-size: 14px;
text-transform: uppercase;
font-weight: 500;
flex: 1;
letter-spacing: 0.7px;
margin-top: 35px;
border-radius: 15px;
border: 1px solid #dadada;
border-collapse: separate !important;
margin-bottom: 0px;
}
.product-specs tr {
display: flex;
flex-direction: row;
}
.product-specs td {
padding: 0px 10px;
font-size: 12px;
color: #686a73;
flex: 1;
min-height: 50px;
display: flex;
align-items: center;
}
.product-specs th {
padding: 0px 12px;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
max-width: 100px;
color: #188F8B;
letter-spacing: 0.7px;
min-height: 50px;
display: flex;
align-items: center;
}
.product-info .title {
color: #188F8B;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.7px;
margin-top: 35px;
font-weight: 700;
margin-bottom: 15px;
}
.product-info hr {
margin-bottom: 30px;
margin-top: 30px;
}
.product-info .body {
color: #686a73;
font-size: 14px;
font-weight: 500;
margin: 0px;
}
.star-feat {
position: absolute;
top: 22px;
right: 20px;
}
.red {
color: #fff !important;
background-color: #188F8B !important;
}
.watch-actions {
flex: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.watch-actions {
flex: 1;
display: flex;
flex-direction: row;
justify-content: center;
cursor: pointer;
align-items: center;
}
.watch-actions .action {
background-color: #686a7323;
margin: 20px;
padding: 20px;
min-width: 230px;
min-height: 230px;
display: flex;
border-radius: 15px;
justify-content: center;
align-items: center;
flex-direction: column;
}
.watch-actions span {
color: #686a73;
font-size: 80px;
font-variation-settings:
'FILL' 0,
'wght' 250,
'GRAD' 0,
'opsz' 48;
}
.watch-actions p {
padding-top: 20px;
margin: 0px;
text-transform: uppercase;
letter-spacing: 2px;
color: #686a73;
font-weight: 700;
cursor: pointer;
font-size: 13px;
}
@media screen and (max-width: 1100px) {
.grid-container {
grid-template-columns: repeat(3, 1fr) !important;
margin-left: 80px;
margin-right: 80px;
padding-bottom: 80px;
/* Padding for the grid container */
}
.hero-cell {
width: 33% !important;
}
}
@media screen and (max-width: 600px) {
.bottom-hero {
display: none !important;
}
#side_nav .nav-right {
padding-bottom: 25px !important;
padding-top: 50px;
}
.grid-container {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media screen and (max-width: 800px) {
.no-res-container {
flex-direction: column;
width: calc(100% - 40px) !important;
}
.grid-container {
margin-left: 20px !important;
margin-right: 20px !important;
padding-bottom: 20px !important;
/* Padding for the grid container */
}
}
.menu-info {
justify-content: end;
}
.menu-info a {
font-size: 13px;
color: #188F8B;
border-radius: 10px;
border: 0px;
display: flex;
text-transform: uppercase;
margin-left: 10px;
font-weight: 700;
justify-content: right;
align-items: center;
padding: 10px 0px;
letter-spacing: 0.7px;
margin-bottom: 20px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* Three columns */
grid-auto-rows: auto;
/* Infinite rows */
gap: 20px;
/* Gap between grid items */
margin-top: 100px;
padding: 10px;
margin-left: 50px;
margin-right: 50px;
padding-bottom: 80px;
/* Padding for the grid container */
}
.grid-item {
background-color: white;
border-radius: 12px;
padding: 15px;
cursor: pointer;
text-align: left;
display: flex;
user-select: none;
flex-direction: column;
height: 100%;
box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 20px 0px;
}
.grid-item img {
aspect-ratio: 1/1;
border: 1px solid #dadada;
border-radius: 8px;
margin-bottom: 5px;
}
.grid-item .title {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
color: #686a73;
margin: 0px;
letter-spacing: 0.7px;
margin-top: 10px;
padding-bottom: 10px;
padding-left: 8px;
}
.grid-item .brand {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.7px;
text-transform: uppercase;
margin: 0px;
color: #686a73;
padding-left: 8px;
}
.grid-item .specs {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.7px;
text-transform: uppercase;
margin: 0px;
margin-bottom: 6px;
color: #188F8B;
padding-left: 8px;
}
.grid-item .price {
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
color: #7e7e7e;
letter-spacing: 1.5px;
flex: 1;
margin: 0px;
margin-top: 20px;
padding-bottom: 20px;
padding-left: 8px;
}
.grid-item .btn {
margin: 0px;
border-radius: 10px;
background-color: #188f8b42;
border-color: #188f8b42;
border: none;
color: #147c78;
display: none;
font-size: 13px;
letter-spacing: 2px;
align-items: center;
justify-content: center;
}
.mobile-card {
padding: 0px;
height: 100%;
border-radius: 15px !important;
display: flex !important;
position: relative;
background-position: center;
background-image: url(/images/watches/ap1.webp);
}
.blur {
height: 100%;
width: 100%;
position: absolute;
/* From https://css.glass */
background: rgba(255, 255, 255, 0.71);
backdrop-filter: blur(7.2px);
-webkit-backdrop-filter: blur(7.2px);
}
.slick-carousel img {
overflow: hidden;
margin-bottom: 1px;
flex: 1 !important;
object-fit: fill;
margin: 20px;
margin-bottom: 0px;
border: 1px solid #dadada !important;
border-radius: 14px;
}
.info-watch {
padding: 20px;
position: absolute;
width: 100%;
bottom: 0px;
}
.info-watch .title {
margin: 0px;
font-weight: 700;
color: #686a73;
text-transform: uppercase;
letter-spacing: 0.7px;
text-align: center;
font-size: 24px;
padding-top: 10px;
}
.info-watch .brand {
margin: 0px;
text-transform: uppercase;
font-size: 13px;
padding-top: 10px;
font-weight: 500;
margin-bottom: 30px;
padding-left: 3px;
color: #188F8B;
text-align: center;
align-items: center;
letter-spacing: 0.7px;
}
.info-watch .price {
font-weight: 400;
color: #686a73;
margin: 0px;
margin-top: 20px;
text-align: center;
font-size: 24px;
margin-bottom: 20px;
letter-spacing: 2px;
margin-left: 3px;
}
.info-watch .specs {
font-size: 13px;
margin: 0px;
color: #188F8B;
letter-spacing: 0.7px;
text-align: center;
margin-left: 3px;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 30px;
}
.info-watch .btn-container {
display: flex;
flex: 1;
}
.info-watch .purchase {
display: flex;
margin-left: 0px;
color: white;
display: flex;
border-radius: 10px;
letter-spacing: 2px;
margin-bottom: 0px;
border: none;
flex: 1;
align-items: center;
justify-content: center;
background-color: #188F8B;
}
.info-watch .next {
color: #188F8B;
margin-left: 20px;
background-color: #188f8b42;
border-radius: 10px;
cursor: pointer;
padding: 0px 15px;
font-size: 30px !important;
display: flex;
align-items: center;
justify-content: center;
}
.footer-main {
position: fixed;
bottom: 0px;
}
.footer {
position: relative;
padding: 6px;
align-items: center;
justify-content: center;
overflow: hidden;
width: 100dvw;
z-index: 99;
display: none;
/* From https://css.glass */
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10.1px);
-webkit-backdrop-filter: blur(10.1px);
}
.chat-fab {
background-color: #188F8B;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 15px 0px;
margin-left: auto;
margin-bottom: 10px;
margin-right: 10px;
width: 55px;
cursor: pointer;
right: 0px;
height: 55px;
border-radius: 10px;
position: relative;
padding: 14px;
z-index: 100;
display: none;
}
.footer p {
margin: 0px !important;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.7px;
overflow: hidden;
font-weight: 700;
text-align: center;
width: 100%;
position: absolute;
color: #188F8B;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
/* white-space: nowrap;
animation: moveText 30s linear infinite;*/
}
.text-container {
overflow: hidden;
width: 100%;
height: 50px;
/* Adjust height as needed */
position: relative;
}
.moving-text {
position: absolute;
white-space: nowrap;
animation: moveText 10s linear infinite;
}
@keyframes moveText {
0% {
left: 110%;
/* Start position */
}
100% {
left: -120%;
/* End position */
}
}
.product-overlay {
position: fixed;
overscroll-behavior: contain;
border-radius: 0px;
top: 0px;
width: 100%;
z-index: 999;
left: -100%;
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(22.2px);
-webkit-backdrop-filter: blur(22.2px);
transition: left 0.3s ease-in-out;
height: 100dvh;
padding-bottom: 50px;
overflow: auto;
}
.back-btn {
padding: 3px;
font-size: 14px;
border-radius: 5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.7px;
display: flex;
justify-content: left;
align-items: center;
cursor: pointer;
color: #188F8B;
margin-top: 15px;
margin-left: 20px;
padding-right: 15px;
}
.back-btn span {
font-size: 30px;
margin-right: 0px;
}
.desc-cont {
margin-top: 35px;
}
.desc-cont p {
border: 1px solid #dadada;
border-radius: 15px;
padding: 20px;
margin-bottom: auto;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.darkmode--activated p,
.darkmode--activated a,
.darkmode--activated h4,
.darkmode--activated .no-res-container h5,
.darkmode--activated .no-res-container input,
.darkmode--activated td,
.darkmode--activated label,
.darkmode--activated #p-stock-id,
.darkmode--activated #p-views,
.darkmode--activated h2 {
color: #cdcdcd !important;
}
.darkmode--activated .watch-container,
.darkmode--activated .no-res-container,
.darkmode--activated .footer-two,
.darkmode--activated #preloader,
.darkmode--activated .checkout-product,
.darkmode--activated .popup-content li {
color: #cdcdcd !important;
background-color: #1d1d1d !important;
}
.darkmode--activated .filter span {
color: #cdcdcd !important;
border: 3px solid #393939;
}
.darkmode--activated hr,
.darkmode--activated table,
.darkmode--activated th,
.darkmode--activated .ytvid,
.darkmode--activated .desc-cont p,
.darkmode--activated td {
border-color: #188f8b89;
}
.darkmode--activated .btnx,
.darkmode--activated .search-input {
color: #cdcdcd !important;
background: #3a3b3b !important;
}
.darkmode--activated .filter-tag {
background-color: #292a2b;
}
.darkmode--activated .header-container {
background-color: #292a2bb5;
}
.darkmode--activated .header-container .title,
.darkmode--activated .header-container span {
color: #cdcdcd !important;
}
.darkmode--activated body,
.darkmode--activated .popup-content {
background: #3a3b3b;
}
.darkmode--activated .watch-image,
.darkmode--activated .product-images {
opacity: 0.9;
}
.darkmode--activated #side_nav,
.darkmode--activated #popup,
.darkmode--activated .footer,
.darkmode--activated .product-overlay {
background: #222222e3 !important;
}
.darkmode--activated .mc {
background-color: #147c78
}
.darkmode--activated .fab {
background: #222222 !important;
}
.lds-ripple,
.lds-ripple div {
box-sizing: border-box;
color: #188F8B;
}
.lds-ripple {
position: absolute;
display: inline-block;
margin-bottom: 40px;
width: 80px;
color: #188F8B;
height: 80px;
}
.lds-ripple div {
position: absolute;
border: 4px solid currentColor;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 8px;
height: 8px;
opacity: 0;
}
4.9% {
top: 36px;
left: 36px;
width: 8px;
height: 8px;
opacity: 0;
}
5% {
top: 36px;
left: 36px;
width: 8px;
height: 8px;
opacity: 1;
}
100% {
top: 0;
left: 0;
width: 80px;
height: 80px;
opacity: 0;
}
}
.footer-cell span {
background-color: #188F8B;
border-radius: 5px;
color: white;
margin-left: 5px;
margin-right: 5px;
padding: 3px 7px;
}
.footer-cell a {
color: #188F8B;
}
.logo-header {
display: flex;
margin-left: 10px;
justify-content: center;
}
.logo-header img {
width: 30px;
display: none;
}
.logo-header .title {
margin-left: 10px !important;
color: #686a73 !important;
}
.footer-cell i {
font-size: 20px;
margin-right: 5px;
margin-left: 5px;
font-variation-settings:
'FILL' 1,
'wght' 400,
'GRAD' 0,
'opsz' 24
}
.usdt {
background-color: #26A17B !important;
}
.bitcoin {
background-color: #f7931a !important;
}
.eft {
background-color: #1b1b1b !important;
}
.cash {
background-color: #72a568 !important;
}
.keywords {
opacity: 0;
height: 0px;
width: 0px;
margin: 0px;
}
.popup {
position: fixed;
display: none;
z-index: 100;
width: 100dvw;
height: 100vh;
/* From https://css.glass */
background: rgba(137, 137, 137, 0.71);
backdrop-filter: blur(3.2px);
-webkit-backdrop-filter: blur(3.2px);
}
.popup-content {
background-color: white;
width: 85%;
max-width: 400px;
padding: 18px;
max-height: 75%;
overflow: auto;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
position: absolute;
top: 49%;
left: 50%;
transform: translate(-50%, -50%)
}
.popup-content h2 {
margin: 0px;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
margin-top: 5px;
letter-spacing: 0.7px;
text-align: center;
color: #188F8B !important;
}
.popup-content ul {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
margin: 0px;
gap: 10px;
}
.popup-content ul li {
list-style: none;
padding: 10px 15px;
color: #444;
background-color: #fff;
width: 100%;
cursor: pointer;
border-radius: 5px;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
border: #188F8B 2px solid;
letter-spacing: 0.7px;
}
.popup-content ul li:hover {
background-color: #f0f0f0;
}
.ad-text {
width: 100%;
position: absolute;
line-height: 16px;
color: #188F8B !important;
}
.ad-text p {
font-weight: 700 !important;
}
.wac {
background-color: #188f8b2f;
border-radius: 5px !important;
position: relative;
line-height: 16px !important;
padding: 6px 15px 6px 10px;
font-size: 12px !important;
font-weight: 700 !important;
max-width: 150px;
margin-right: 20px;
font-variation-settings:
'wght' 700 !important;
border-right: 10px #188F8B solid;
height: 44px;
display: flex;
flex: 1;
align-items: center;
}
.ad-text .flickity-slider {
display: inline-flex;
justify-content: left;
align-items: center;
}
.ad-text img {
height: 40px;
margin-left: 12px;
margin-right: auto !important;
}
.ad-cell {
display: inline-flex;
width: 100%;
position: relative;
font-size: 12px;
font-weight: 700;
justify-content: left;
align-items: center;
letter-spacing: 0.7px;
margin-bottom: 0px;
left: 0px;
color: #188F8B !important;
right: 0px;
text-transform: uppercase;
}
.ad-cell a {
color: #188F8B;
}
.ad-cell i {
color: #188F8B;
background-color: #188f8b2f;
border-radius: 5px;
padding: 10px;
margin-right: 15px;
font-variation-settings:
'FILL' 1,
'wght' 400,
'GRAD' 0,
'opsz' 24;
}
#member-login {
z-index: 1000;
}
* {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
}
.member-content {
overflow-x: hidden;
}
.member-content h2 {
text-align: left;
margin-top: 0px;
}
.member-content span {
margin-top: 2px;
margin-right: 0px;
}
.member-content p {
font-size: 13px;
font-weight: 600;
margin-top: 30px;
letter-spacing: 0px;
text-align: left;
margin-bottom: 30px;
line-height: 20px;
}
#member-log-out {
color: #dd4043 !important;
cursor: pointer;
}
#memberNumber {
text-align: left !important;
}
.member-content input {
background-color: #eaeaea;
border: none !important;
border-radius: 5px;
font-size: 12px;
width: 100%;
font-weight: 700;
color: #444 !important;
padding: 10px;
margin-bottom: 60px;
line-height: 20px;
text-align: center;
letter-spacing: 0.7px;
text-transform: uppercase;
height: 50px;
}
.member-content .btn {
background-color: #188F8B;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
width: 100%;
font-size: 12px;
height: 50px;
border: 0px;
letter-spacing: 0.7px;
border-radius: 5px;
margin-bottom: 0px;
}
.iti {
display: flex !important;
}
.iti__search-input {
margin-bottom: 10px !important;
border-radius: 0px !important;
padding: 10px !important;
font-size: 13px;
font-weight: 600;
}
.iti__country {
margin-top: 1px !important;
border-radius: 0px !important;
font-size: 12px !important;
}
.iti__selected-dial-code {
color: #188F8B !important;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.7px;
}
#people-phone {
margin-left: 0px;
}
.iti__dropdown-content {
border: 3px #eaeaea solid !important;
border-radius: 5px !important;
overflow: hidden;
box-shadow: none !important;
}
.iti__selected-country-primary span {
padding: 0px;
font-size: 30px;
}
.iti__selected-country {
background-color: #dedede !important;
border: 3px #dedede solid !important;
padding: 0px !important;
padding-right: 10px !important;
margin-top: 0px !important;
}
.poster {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: url(/images/blur.webp);
image-rendering: auto;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: #686a73;
padding: 0px;
margin: 0px;
}
.poster-overlay {
width: 100%;
height: 100vh;
position: absolute;
z-index: 1;
/* From https://css.glass */
background: rgba(103, 103, 103, 0.4);
backdrop-filter: blur(12.5px);
-webkit-backdrop-filter: blur(10.5px);
}
.poster-hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
padding: 20px;
z-index: 2;
}
.poster-logo-img {
width: 500px;
margin-bottom: 10px;
max-width: 100%;
max-height: 150px;
}
.poster-logo {
z-index: 3;
margin: 0px;
text-align: center;
color: white;
margin-bottom: 10px;
font-family: "Cinzel Decorative", serif !important;
letter-spacing: 14px;
margin-left: 8px;
transition: letter-spacing 0.5s ease;
/* Transition effect */
font-size: 40px;
text-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.poster-logo:hover {
letter-spacing: 16px;
}
.poster-logo span {
opacity: 0.2;
}
.poster-hero p {
color: #fff;
font-weight: 700;
font-size: 13px;
display: block;
align-items: center;
text-align: center;
padding: 0px 40px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.poster-hero p span {
font-size: 15px;
}
.work-btn {
margin-left: 5px;
display: inline-flex;
cursor: pointer;
position: absolute;
color: white;
z-index: 9;
font-size: 13px;
letter-spacing: 0.5px;
font-weight: 700;
text-transform: uppercase;
left: 20px;
bottom: 120px;
}
.work-btn:hover {
color: white;
margin-left: 15px;
}
.poster-hero a span {
margin-left: 5px;
}
.poster-hero .explore-btn {
color: #fff !important;
background-color: #ffffff2e;
border: none;
letter-spacing: 1px !important;
font-size: 13px !important;
width: auto !important;
border-radius: 50px;
display: inline-flex;
font-weight: 700;
text-transform: uppercase;
padding: 20px 40px;
}
.poster-hero .explore-btn:hover {
padding: 20px 70px;
}
.bottom-hero {
position: absolute !important;
width: 100%;
bottom: 0px !important;
margin: 0px;
padding: 0px;
margin-top: auto;
margin-bottom: 0px;
z-index: 3;
background-color: #ffffff2e;
}
.hero-cell {
width: 20%;
padding: 20px;
display: flex;
justify-content: center;
}
.hero-cell img {
height: 60px;
}
#show-more {
display: none;
position: relative;
background-color: #188f8b2f;
border-radius: 50px;
border: 0px;
font-size: 13px;
letter-spacing: 0.5px;
padding: 20px 40px;
height: auto;
line-height: 20px;
color: #188F8B;
margin-bottom: 40px;
}
#show-more:hover {
padding: 20px 70px;
}
.poster .vid-container {
overflow: hidden;
width: 100vw;
margin-top: 0px;
height: calc(100dvh - 00px);
}
.vid-container video {
object-fit: cover;
width: 100%;
opacity: 1;
height: 100%;
}
.footer-cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.footer-two {
background-color: white;
padding: 40px;
padding-bottom: 50px;
z-index: 1;
position: relative;
}
.footer-two .column {
flex: 1;
}
.footer-two h4 {
font-size: 13px;
margin-bottom: 30px;
}
.footer-two p {
font-weight: 600;
font-size: 13px;
}
.spaced {
line-height: 32px;
}
.credit {
width: 100%;
}
.fab {
position: fixed;
bottom: 20px;
right: 20px;
background-color: white;
color: #188F8B !important;
border: none;
border-radius: 10px;
display: flex;
border: 2px #188F8B solid;
/* Initially hidden */
justify-content: center;
overflow: hidden;
align-items: center;
font-size: 24px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
cursor: pointer;
z-index: 1;
animation: pulse 2s infinite;
}
body.pwa-mode .fab {
/* Additional PWA-specific styles */
border-radius: 50px;
bottom: 25px;
right: 25px;
}
body.pwa-mode #side_nav .nav-right {
padding-bottom: 30px !important;
}
body.pwa-mode .dark-mode {
bottom: 25px;
border-radius: 50px;
left: 25px;
}
/* Pulsating wave animation */
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(24, 143, 139, 0.3);
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 10px rgba(24, 143, 139, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(24, 143, 139, 0);
}
}
.fab a {
padding: 10px 20px;
font-size: 25px;
margin: 0px;
color: #188F8B !important;
}
.fab .wa {
background-color: #188f8b31;
}
.fab:focus {
outline: none;
}
#open-ig {
background: #833ab4;
background: linear-gradient(to right,
#833ab4, #fd1d1d, #fcb045);
}
.popular {
border: 1px #d4d4d4 solid;
border-radius: 15px;
padding: 10px 10px 4px 10px;
display: flex;
justify-content: center;
gap: 12px;
}
.filter-tag {
text-align: right;
font-weight: 700;
letter-spacing: 0.5px;
font-size: 10px;
text-transform: uppercase;
flex: 1;
display: flex;
padding: 0px 5px;
justify-content: end;
align-items: center;
color: #188F8B;
position: absolute;
top: 0px;
background-color: #f6f7f8;
margin-top: 48px;
}
.footer-title {
color: #188F8B;
}
.ytvid {
aspect-ratio: 16/9;
width: 100%;
border-radius: 15px;
margin-top: 35px;
border: 1px solid #dadada;
}
#about-vid {
aspect-ratio: 16/9;
width: 100%;
border-radius: 15px;
border: 1px solid #188F8B;
}
.flickity-enabled:focus {
outline: none;
}
#filter-by {
align-self: center;
margin: 0px;
}
#buy-btn {
margin-left: 0px;
flex: 0.6;
margin-right: 15px;
}
.checkout-info h3 {
margin-bottom: 20px;
margin-top: 0px;
}
.checkout-info label {
color: #5a5a5a;
font-size: 13px;
}
.input-split {
display: flex;
gap: 10px;
}
.radio-group {
border: 1px solid #acacac;
display: flex;
gap: 10px;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
flex-direction: column;
}
.custom-radio {
position: relative;
padding-left: 20px;
cursor: pointer;
margin-bottom: 0px;
user-select: none;
color: #5a5a5a;
font-size: 13px;
}
.custom-radio input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.radio-btn {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #c7c7c7;
border-radius: 50%;
border: 2px solid #c7c7c7;
transition: background-color 0.3s;
}
.custom-radio input:checked~.radio-btn {
background-color: #188F8B;
border-color: #188F8B;
}
.radio-btn::after {
content: "";
position: absolute;
display: none;
}
.custom-radio input:checked~.radio-btn::after {
display: block;
}
.custom-radio .radio-btn::after {
top: 4px;
left: 4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
.block-cont {
border: 1px solid #188F8B;
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
}
.block-cont label {
background-color: #188f8b29;
color: #188F8B;
margin-bottom: 0px;
padding: 15px;
border-bottom: 1px solid #188F8B;
}
.block-cont p {
padding: 15px;
font-size: 13px;
margin: 0px;
color: #5a5a5a;
}
#place-order {
background-color: #188F8B;
border-color: #188F8B;
color: white;
border-radius: 10px;
font-size: 12px !important;
letter-spacing: 1px;
margin-bottom: 30px;
width: 100%;
margin-top: 30px;
position: relative;
font-weight: 700;
}
.check-actions button {
background-color: #188f8b42;
border: 0px;
color: #147c78;
border-radius: 10px;
font-size: 12px !important;
letter-spacing: 1px;
width: 100%;
position: relative;
display: flex;
font-weight: 700;
justify-content: center;
align-items: center;
}
.checkout-product {
display: flex;
align-items: center;
border-radius: 10px;
overflow: hidden;
background-color: #eaeaea;
border: 1px solid #acacac;
}
.checkout-product img {
width: 160px;
height: 160px;
background-color: white;
}
.checkout-product label {
padding: 0px 20px;
margin-top: 15px;
}
.checkout-product p {
font-size: 16px;
letter-spacing: 1px;
margin-bottom: 10px;
padding: 0px 20px;
color: #188F8B;
}
.checkout-cost {
margin-top: 20px;
padding: 10px;
margin-bottom: 20px;
}
.cost-line {
display: flex;
text-align: end;
}
.cost-line label {
flex: 1;
}
.cost-line label span {
font-size: 16px;
}
.total {
font-size: 18px !important;
}
#order-confirm {
margin-bottom: 30px;
}
.success-order {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px;
text-align: center;
}
.success-order span {
font-size: 70px;
color: #188F8B;
padding: 10px;
}
.success-order p {
text-align: center;
}
.success-order h2 {
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0px;
color: #5a5a5a;
font-weight: 700;
margin-top: 20px;
}
#product-label {
display: block;
/* Ensures the label takes full width */
overflow: hidden;
/* Hides overflow text */
text-overflow: ellipsis;
/* Adds ellipsis (...) for overflowed text */
display: -webkit-box;
/* For modern browsers */
-webkit-line-clamp: 5;
/* Limits the content to 5 lines */
-webkit-box-orient: vertical;
/* Sets the orientation to vertical */
max-height: 7.5em;
/* Adjusts height based on line height */
line-height: 1.5em;
/* Sets line height */
}
.total span {
font-size: 12px !important;
margin-left: 5px;
color: #7e7e7e;
}
#product-load {
display: flex;
margin-left: auto;
margin-right: auto;
position: relative;
margin-top: 30px;
margin-bottom: 80px;
}
#p-price p {
font-size: 12px;
font-weight: 600 !important;
letter-spacing: 0px;
margin: 0px;
display: inline-block;
margin-right: 10px;
line-height: 0px;
}
#p-price {
display: block;
}
.product-page-main {
z-index: 1;
margin-top: 50px;
margin-bottom: 50px;
}
.back-prod {
font-size: 30px !important;
margin-left: -5px;
}
#product-loading {
display: flex;
position: relative;
justify-content: center;
align-items: center;
width: 100dvw;
height: 100dvh;
}
.snow-cont {
position: absolute;
width: 100dvw;
display: none;
height: 100vh;
z-index: 2;
pointer-events: none;
overflow: hidden;
}
.snow,
.snow:after,
.snow::before {
will-change: transform;
content: '';
position: absolute;
top: -650px;
right: 0;
pointer-events: none;
bottom: 0;
left: 0;
background-image: radial-gradient(4px 4px at 100px 50px, #fff, transparent),
radial-gradient(6px 6px at 200px 150px, #fff, transparent),
radial-gradient(3px 3px at 50px 200px, #fff, transparent),
radial-gradient(4px 4px at 550px 550px, #fff, transparent);
background-size: 650px 650px;
animation: SnowAnim 4s linear infinite;
}
.snow:after {
margin-left: -250px;
opacity: 0.5;
animation-direction: reverse;
animation-duration: 6s;
}
.snow::before {
margin-left: -350px;
opacity: 0.7;
animation-direction: reverse;
animation-duration: 9s;
}
@keyframes SnowAnim {
from {
transform: translateY(0);
}
to {
transform: translateY(650px);
}
}
.explore-btn {
margin-top: 10px;
}
.branch {
width: 30%;
position: absolute;
z-index: 2;
left: 0px;
top: 0px;
opacity: 0.9;
pointer-events: none;
}
.branch2 {
width: 25%;
position: absolute;
z-index: 2;
right: 0px;
bottom: 0px;
opacity: 0.9;
pointer-events: none;
}
.text-fade-wrapper {
position: absolute;
width: 100%;
top: 70px;
font-size: 13px;
z-index: 4;
text-align: center;
height: 2em;
color: #ffffff;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.5px;
/* Maintain height to avoid layout shift */
}
.text-fade-item {
position: absolute;
padding: 0px 20px;
width: 100%;
opacity: 0;
animation: textFadeInOut 24s linear infinite;
}
.text-fade-item:nth-child(1) {
animation-delay: 0s;
z-index: 2;
}
.text-fade-item:nth-child(2) {
animation-delay: 8s;
}
.text-fade-item:nth-child(3) {
animation-delay: 16s;
}
@keyframes textFadeInOut {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
30% {
opacity: 1;
}
35% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.no-res-container {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 50px auto;
width: 80%;
box-shadow: rgba(100, 100, 111, 0.2) 0px 3px 7px 0px;
background-color: #fff;
border-radius: 16px;
padding: 25px;
gap: 40px;
z-index: 0;
}
.no-res-left-column,
.no-res-right-column {
display: flex;
flex: 1;
flex-direction: column;
}
.no-res-left-column {
text-align: center;
}
.no-res-left-column h2 {
margin: 0px;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.7px;
text-align: center;
color: #188F8B !important;
margin-top: 30px;
}
.no-res-left-column h5 {
margin: 0px;
font-size: 13px;
font-weight: 700;
margin-bottom: 15px;
margin-top: 10px;
text-align: center;
color: #7c7c7c !important;
}
.no-res-right-column h5 {
margin: 0px;
font-size: 13px;
font-weight: 700;
margin-bottom: 15px;
color: #7c7c7c !important;
}
.no-res-chat-button {
background-color: #188f8b42;
color: #147c78;
border: none;
border-radius: 10px;
display: inline-flex;
margin-left: auto;
font-size: 13px;
margin-right: auto;
justify-content: center;
align-items: center;
cursor: pointer;
letter-spacing: 0.7px;
}
.no-res-chat-button:hover,
.no-res-chat-button:focus {
background-color: #188f8b42;
color: #147c78;
}
.no-res-right-column {
text-align: left;
}
.no-res-form-model {
display: flex;
margin: 0px;
flex-direction: column;
}
.no-res-form-model h3 {
font-size: 20px;
margin-bottom: 15px;
}
.no-res-form-model label {
font-size: 14px;
margin-top: 10px;
}
.no-res-form-model input,
.no-res-form-model select {
padding: 10px;
margin-top: 0px;
border: 1px solid #d4d4d4;
border-radius: 10px;
font-size: 13px;
}
.no-res-submit-button {
background-color: #188F8B;
color: white;
border: none;
border-radius: 10px;
display: inline-flex;
margin-bottom: 0px;
justify-content: center;
align-items: center;
margin-top: 10px;
cursor: pointer;
letter-spacing: 0.7px;
margin-right: 0px;
}
.no-res-submit-button:hover,
.no-res-submit-button:focus {
background-color: #188F8B;
color: white;
}
.mc {
background-color: #333333;
display: flex;
align-items: center;
padding: 30px 50px;
z-index: 1;
}
.mc-text {
flex: 1;
}
.mc-text h2 {
font-family: "Cinzel Decorative", serif !important;
color: white !important;
letter-spacing: 1px;
margin: 0px;
font-size: 20px;
}
.mc-text h5 {
text-transform: uppercase;
color: rgba(255, 255, 255, 0.632);
font-weight: 700;
margin: 0px;
margin-right: 30px;
margin-top: 10px;
font-size: 13px;
letter-spacing: 0.7px;
}
.mc-btn {
margin: 0px;
color: white;
background-color: #ffffff2e;
border: 0px;
letter-spacing: 2px;
border-radius: 10px;
}
.mc-btn:hover,
.mc-btn:focus {
color: white !important;
background-color: #ffffff12 !important;
}