html{
box-sizing: border-box;
background-color: var(--black);
scrollbar-width: thin;
scrollbar-color: var(--mid) transparent;
width: 100%;
overflow-x: hidden;
}
html * {
box-sizing: border-box;
}
body{
font-family: var(--body-font);
font-weight: var(--body-weight);
font-size: var(--body-font-size);
margin: 0 auto;
text-align: var(--text-align);
width: 100%;
box-sizing: border-box;
max-width: 2400px;
color: var(--black);
background-color: var(--black);
}
a{
cursor: pointer;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6, .title{
color: var(--black);
font-family: var(--heading-font);
font-weight: var(--heading-weight);
text-align: var(--text-align);
padding: 0;
margin: 0;
font-size: var(--heading-font-size);
line-height: var(--heading-line-height);
letter-spacing: var(--heading-letter-spacing);
}
p{
color: var(--black);
text-align: var(--text-align);
line-height: var(--body-line-height);
margin: var(--margin);
letter-spacing: var(--body-letter-spacing);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: var(--mid);
border-radius: 10px;
transition: background-color 0.3s ease-in-out;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--contrast);
}
.link{
text-decoration-line: var(--link-underline);
color: var(--link-text-color);
text-decoration-color: var(--link-underline-color);
text-decoration-style: var(--link-underline-style);
text-decoration-thickness: var(--link-underline-thickness);
transition: all 0.3s ease-in-out;
}
.link:hover{
color: var(--link-text-hover-color);
text-decoration-color: var(--link-underline-hover-color);
}
.button0{
box-sizing: border-box;
font-family: var(--body-font);
display: block;
width: max-content;
font-size: var(--body-font-size);
line-height: var(--body-line-height);
padding: var(--xs-spacing) var(--s-spacing);
margin: var(--margin);
color: var(--button-text-color);
background-color: var(--button-bg-color);
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: var(--button-border-radius);
text-shadow: none;
border-style: var(--button-border-style);
border-color: var(--button-border-color);
border-width: var(--button-border-width);
text-wrap: nowrap;
}
.button0:hover{
color: var(--button-text-hover-color);
background-color: var(--button-bg-hover-color);
border-color: var(--button-border-hover-color);
}
.button1{
box-sizing: border-box;
font-family: var(--body-font);
display: block;
width: fit-content;
font-size: var(--body-font-size);
line-height: var(--body-line-height);
padding: var(--xs-spacing) var(--s-spacing);
margin: 0 auto;
border: 2px solid var(--contrast);
background-color: var(--white);
color: var(--dark);
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 0;
}
.button1:hover{
background-color: var(--contrast);
color: var(--white);
}
.nav {
position: sticky;
top: 0;
display: flex;
flex-direction: row;
align-items: center;
height: 55px;
padding: var(--xs-spacing);
z-index: 99;
}
.menu-toggle{
cursor: pointer;
padding: 15px;
display: flex;
flex-direction: column;
background-color: transparent;
}
.menu-toggle span{
display: block;
width: 25px;
height: 5px;
transition: all 0.3s ease-in-out;
}
.nav a {
margin: 0 auto;
transition: background-color 0.3s ease-in-out;
}
.nav #logo img{
height: 45px;
width: auto;
}
.nav a#logo{
display:flex;
margin-right: 0;
}
.nav a#logo:hover{
background-color: transparent;
}
.menu-items {
display: flex;
flex-direction: column;
width: 100%;
font-size: var(--body-font-size);
position: absolute;
top: 55px;
left: 0;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
z-index: 1;
box-sizing: border-box;
}
.menu-items a {
box-sizing: border-box;
width: 100%;
padding: 25px 50px;
}
.menu-open .menu-items {
transform: translateX(0);
}
@media screen and (min-width: 500px) {
.nav {
flex-direction: row;
height: 55px;
}
.menu-items {
position: static;
transform: none;
flex-direction: row;
width: auto;
font-size: var(--body-font-size);
}
.menu-items a {
padding: 15px;
border: none;
}
.menu-toggle {
display: none;
}
}
.sub-nav-wrapper{
position: sticky;
top: 0;
z-index: 99;
height: 55px;
}
.sub-nav{
display: flex;
flex-direction: column;
text-align: center;
width: 100%;
position: absolute;
top: 55px;
left: 0;
transform: translateX(-120%);
transition: all 0.3s ease-in-out;
z-index: 1;
box-sizing: border-box;
}
.sub-nav-wrapper.menu-open .sub-nav{
transform: translateX(0);
}
.level-1 {
display: block;
padding: 16px;
font-size: var(--body-font-size);
border: none;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.dropdown {
overflow: hidden;
min-height: 55px;
}
.level-2 {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
z-index: 999;
}
.level-2 a {
padding: 12px 16px;
text-decoration: none;
display: block;
transition: background-color 0.3s ease-in-out;
}
.dropdown:hover .level-2 {
max-height: 500px;
}
@media screen and (min-width: 500px) {
.sub-nav{
position: relative;
flex-direction: row;
transform: translateX(0);
top: 0;
}
.level-2{
position: absolute;
}
.level-2 a{
width: 150px;
}
.level-1 {
width: 150px;
}
}
.content-image {
text-align: var(--text-align);
width: 100%;
min-height: 67vh;
position: relative;
line-height: 0;
}
.content-image picture,
.content-image img {
opacity: 0.75;
width: 100%;
min-height: 67vh;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.content-image .content-image-p {
min-height: 67vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
padding: var(--m-spacing);
box-sizing: border-box;
text-align: center;
max-width: 800px;
margin: auto;
}
@media screen and (min-width:500px){
.content-image .content-image-p{
padding: var(--xxxl-spacing);
}
}
.header{
text-align: var(--text-align);
width: 100%;
position: relative;
line-height: 0;
min-height: 67vh;
height: 100%;
overflow: hidden;
}
.header picture,
.header img{
opacity: 0.75;
width: 100%;
min-height: 67vh;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.header .header-h1{
min-height: 67vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding: var(--m-spacing);
box-sizing: border-box;
}
.header > span{
min-height: 67vh;
}
@media screen and (min-width:500px){
.header .header-h1{
padding: var(--xxxl-spacing);
}
}
@media screen and (min-width:800px){
.header{
min-height: fit-content;
}
/* .header img{
min-height: fit-content;
} */
.header > span{
min-height: fit-content;
}
.header-left .header-h1{
left: 0;
width: 50%;
margin-left: 0;
}
.header-right .header-h1{
right: 0;
width: 50%;
margin-right: 0;
}
}
.header-cta{
text-align: var(--text-align);
width: 100%;
min-height: 80vh;
height: 100%;
position: relative;
line-height: 0;
overflow: hidden;
}
.header-cta picture,
.header-cta img{
opacity: 0.75;
width: 100%;
height: 100%;
min-height: 80vh;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.header-cta div:first-of-type{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--m-spacing);
position: relative;
top: 0;
left: 0;
width: 100%;
min-height: 80vh;
height: 100%;
margin: 0;
padding: var(--m-spacing);
box-sizing: border-box;
}
.header-cta h1, .header-cta p{
width: 100%;
padding: 0;
margin: 0;
}
.header-cta .button0{
margin: var(--margin);
}
@media screen and (min-width: 500px){
.header-cta p{
font-size: var(--m-spacing);
}
.header-cta div:first-of-type{
padding: var(--xxxl-spacing);
gap: var(--xxl-spacing);
}
}
@media screen and (min-width:800px){
.header-cta{
height: 800px;
}
.header-cta img{
height: 800px;
}
.header-cta div:first-of-type{
height: 800px;
}
}
/* header roll */
.header-roll{
text-align: var(--text-align);
width: 100%;
position: relative;
line-height: 0;
box-sizing: border-box;
min-height: 67vh;
height: 100%;
}
.header-roll h1{
margin: 0 auto 180px 0;
}
.header-roll-span{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
top: 0;
left: 0;
min-height: 67vh;
height: 100%;
max-height: 100%;
padding: var(--m-spacing);
width: 100%;
max-width: 2400px;
box-sizing: border-box;
gap: var(--m-spacing);
z-index: 1;
}
.header-roll img{
opacity: 0.75;
width: 100%;
height: 100%;
min-height: 67vh;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
@media screen and (min-width: 500px) {
.header-roll-span{
height: 67vh;
}
}
main{
margin: 0 var(--m-spacing);
}
section{
box-sizing: border-box;
margin: 0 auto;
}
h2{
color: var(--black);
font-size: var(--heading-font-size);
text-align: var(--text-align);
}
.heading h1{
text-align: var(--text-align);
font-weight: var(--heading-weight);
margin: auto;
padding: var(--m-spacing);
}
@media screen and (min-width:500px){
.heading h1{
padding: var(--xxxl-spacing);
}
}
.cards, .sub-pages, .values{
display: grid;
grid-template-columns: 1fr;
padding: var(--m-spacing);
gap: var(--m-spacing);
margin: auto;
justify-items: center;
justify-content: center;
max-width: 2400px;
box-sizing: border-box;
}
.cards h4, .sub-pages h4, .values h4, .cards p, .sub-pages p, .values p{
width: 100%;
margin: 0;
}
.cards h4, .sub-pages h4, .values h4{
font-family: var(--body-font);
font-size: 1.618em;
font-weight: bold;
}
.cards > div, .sub-pages > div, .values > div{
min-width: min-content;
max-width: 100%;
display: flex;
flex-direction: column;
gap: calc(var(--m-spacing) * 0.5);
}
.cards img, .sub-pages img{
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
}
@media screen and (min-width: 500px) {
.cards, .sub-pages, .values{
grid-template-columns: 1fr 1fr;
padding: var(--xxxl-spacing);
}
}
@media screen and (min-width: 800px) {
.cards, .sub-pages, .values{
grid-template-columns: 1fr 1fr 1fr;
}
}
.picture{
display: block;
overflow: hidden;
line-height: 0;
}
.picture img{
height: 100%;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}
.picture img:hover{
transform: scale(1.05);
}
.original-image{
display: block;
overflow: hidden;
line-height: 0;
}
.original-image img{
height: 100%;
width: 100%;
object-fit: cover;
}
.feature {
text-align: var(--text-align);
max-width: 2400px;
align-items: var(--justify-content);
margin: auto;
}
.feature > div{
margin: auto;
padding: var(--m-spacing);
display: flex;
flex-direction: column;
gap: var(--m-spacing);
max-width: 800px;
}
.feature h2, .feature p{
text-align: var(--text-align);
padding: 0;
margin: 0;
}
.feature a{
margin: var(--margin);
}
@media screen and (min-width:500px){
.feature > div {
padding: var(--xxxl-spacing);
gap: var(--xxl-spacing);
}
}
.breadcrumbs{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
align-items: flex-start;
padding: var(--xs-spacing);
}
.breadcrumbs > div{
display: flex;
flex-direction: row;
align-items: center;
}
.breadcrumbs span{
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
}
.breadcrumbs div span a{
padding: var(--xs-spacing);
}
.breadcrumbs a{
transition: color 0.3s ease-in-out;
}
.grid{
display: grid;
grid-template-columns: auto;
line-height: 0;
padding: var(--m-spacing);
margin: 0;
gap: var(--m-spacing);
}
.grid > div{
box-sizing: border-box;
width: 100%;
height: 100%;
max-width: 400px;
overflow: hidden;
}
.grid img{
width: 100%;
height: 100%;
aspect-ratio: 1/1;
object-fit: cover;
overflow: hidden;
transform: scale(1.01);
transition: transform 0.3s ease-in-out;
}
.grid img:hover{
transform: scale(1.05);
}
@media screen and (min-width: 500px){
.grid{
grid-template-columns: auto auto;
}
}
@media screen and (min-width: 700px){
.grid{
grid-template-columns: auto auto auto;
}
}
@media screen and (min-width: 900px){
.grid{
grid-template-columns: auto auto auto auto;
}
}
@media screen and (min-width: 2400px){
.grid{
grid-template-columns: auto auto auto auto auto;
}
}
@media screen and (min-width: 1800px){
.grid{
grid-template-columns: auto auto auto auto auto auto;
}
}
.bento{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: var(--m-spacing);
margin: auto;
padding: var(--m-spacing);
}
.bento img{
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}
.bento img:hover{
transform: scale(1.1);
}
.bento > div{
max-height: 350px;
overflow: hidden;
}
@media screen and (min-width: 500px){
.bento{
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.bento > div:nth-child(1){
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.bento > div:nth-child(2){
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.bento > div:nth-child(3){
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.bento > div:nth-child(4){
grid-column: 2 / 4;
grid-row: 2 / 3;
}
}
.stats{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: var(--m-spacing);
margin: auto;
padding: var(--m-spacing);
}
.stats > div{
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
gap: calc(var(--m-spacing) * 0.5);
margin: 0 auto;
}
.stats h4{
width: 100%;
text-align: var(--text-align);
}
.stats p{
text-align: var(--text-align);
margin: 0;
}
@media screen and (min-width: 500px){
.stats{
padding: var(--xxxl-spacing);
gap: var(--xxl-spacing);
}
}
@media screen and (min-width: 700px){
.stats{
flex-direction: row;
}
.stats > div{
width: 33%;
max-width: 333px;
}
}
.social{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--m-spacing);
padding: var(--m-spacing);
margin: auto;
}
.social a{
display: block;
max-width: 40px;
max-height: 40px;
border-radius: 100%;
padding: 0;
}
@media screen and (min-width: 500px){
.social{
padding: var(--xxxl-spacing);
}
}
.clients{
display: grid;
grid-template-columns: 1fr;
align-items: center;
justify-content: center;
padding: var(--m-spacing);
gap: var(--m-spacing);
margin: auto;
}
.clients div{
display: block;
max-width: 200px;
max-height: 100px;
margin: 0 auto;
object-fit: contain;
}
.clients img{
display: block;
width: 100%;
height: auto;
max-width: 200px;
max-height: 100px;
object-fit: contain;
}
@media screen and (min-width: 500px){
.clients{
grid-template-columns: 1fr 1fr;
padding: var(--xxxl-spacing);
gap: var(--xxl-spacing);
}
}
@media screen and (min-width: 900px){
.clients{
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
@media screen and (min-width: 1300px){
.clients{
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
}
.gallery {
box-sizing: border-box;
display: block;
column-count: 2;
gap: var(--m-spacing);
break-inside: avoid;
width: 100%;
height: fit-content;
padding: var(--m-spacing);
margin: auto;
}
.gallery div{
width: 100%;
height: fit-content;
overflow: hidden;
margin-bottom: var(--m-spacing);
line-height: 0;
}
.gallery img{
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}
.gallery img:hover{
transform: scale(1.05);
}
@media screen and (min-width: 500px) {
.gallery {
column-count: 3;
}
}
@media screen and (min-width: 900px) {
.gallery {
column-count: 4;
}
}
@media screen and (min-width: 2400px){
.gallery {
column-count: 5;
}
}
@media screen and (min-width: 1800px){
.gallery {
column-count: 6;
}
}
.split-header{
line-height: 0;
box-sizing: border-box;
}
.split-header > div{
display: flex;
flex-direction: column;
align-items: var(--text-align);
justify-content: center;
box-sizing: border-box;
padding: var(--m-spacing);
gap: var(--m-spacing);
}
.split-header p{
margin: 0;
}
.split-header a{
margin: var(--margin);
}
.split-header > span{
display: block;
overflow: hidden;
}
.split-header img{
width: 100%;
height: 100%;
aspect-ratio: 3/2;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}
.split-header img:hover{
transform: scale(1.05);
}
@media screen and (min-width: 500px){
.split-header > div{
padding: var(--xxxl-spacing);
gap: var(--xxl-spacing);
}
}
@media screen and (min-width: 1000px) {
.split-header{
display: flex;
flex-direction: row;
}
.split-header > div{
width: 50vw;
max-width: 2400px;
}
.split-header img{
width: 50vw;
max-width: 2400px;
}
}
.split-header-reverse{
line-height: 0;
box-sizing: border-box;
}
.split-header-reverse > div{
display: flex;
flex-direction: column;
align-items: var(--text-align);
justify-content: center;
box-sizing: border-box;
padding: var(--m-spacing);
gap: var(--m-spacing);
}
.split-header-reverse p{
margin: 0;
}
.split-header-reverse a{
margin: var(--margin);
}
.split-header-reverse > span{
display: block;
overflow: hidden;
}
.split-header-reverse img{
width: 100%;
height: 100%;
aspect-ratio: 3/2;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}
.split-header-reverse img:hover{
transform: scale(1.05);
}
@media screen and (min-width: 500px){
.split-header-reverse > div{
padding: var(--xxxl-spacing);
gap: var(--xxl-spacing);
}
}
@media screen and (min-width: 1000px) {
.split-header-reverse{
display: flex;
flex-direction: row-reverse;
}
.split-header-reverse > div{
width: 50vw;
max-width: 2400px;
}
.split-header-reverse img{
width: 50vw;
max-width: 2400px;
}
}
.notification {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: var(--body-font-size);
}
.notification > p, .notification span {
margin: 0;
padding: var(--m-spacing);
}
.notification span{
cursor: pointer;
}
.popup {
position: fixed;
display: none;
opacity: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
padding: var(--m-spacing);
box-sizing: border-box;
transition: opacity 0.3s ease-in-out;
}
.popup > div {
padding: var(--m-spacing);
box-shadow: 5px 5px 25px var(--dark);
}
.popup.show {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 1;
background-color: var(--mid50);
z-index: 999;
}
.popup p{
padding: var(--xs-spacing);
}
@media screen and (min-width: 650px){
.popup{
padding: var(--xxxl-spacing);
}
.popup > div {
padding: var(--xxxl-spacing);
max-width: 600px;
}
}
video {
display: block;
width: 100%;
}
.video-header{
text-align: var(--text-align);
width: 100%;
position: relative;
line-height: 0;
box-sizing: border-box;
min-height: 67vh;
height: 100%;
}
.video-header-span{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
top: 0;
left: 0;
min-height: 67vh;
height: 100%;
max-height: 100%;
padding: var(--m-spacing);
width: 100%;
max-width: 2400px;
box-sizing: border-box;
gap: var(--m-spacing);
z-index: 1;
}
.video-header h1{
font-weight: var(--heading-weight);
width: 100%;
box-sizing: border-box;
margin: var(--margin);
}
.video-header video{
box-sizing: border-box;
object-fit: cover;
position: absolute;
/* width: 100%;
height: 500px; */
max-width: 2400px;
min-height: 67vh;
height: 100%;
/* max-height: 910px; */
}
@media screen and (min-width:500px){
.video-header-span{
padding: var(--xxxl-spacing);
}
}
@media screen and (min-width:800px){
.video-header{
/* height: 800px; */
min-height: fit-content;
}
.video-header-span{
/* height: 800px; */
min-height: fit-content;
}
.video-header video{
/* height: 800px; */
min-height: fit-content;
}
}
/* call to action video header */
.video-header-cta{
text-align: var(--text-align);
width: 100%;
position: relative;
line-height: 0;
box-sizing: border-box;
min-height: 67vh;
height: 100%;
}
.video-header-cta-span{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
top: 0;
left: 0;
min-height: 67vh;
height: 100%;
max-height: 100%;
padding: var(--m-spacing);
width: 100%;
max-width: 2400px;
box-sizing: border-box;
gap: var(--m-spacing);
z-index: 1;
}
.video-header-cta h1{
font-weight: var(--heading-weight);
width: 100%;
box-sizing: border-box;
margin: var(--margin);
}
.video-header-cta p{
font-weight: var(--body-weight);
font-size: 1.618em;
width: 100%;
box-sizing: border-box;
margin: var(--margin);
}
.video-header-cta-button {
margin: var(--margin);
}
.video-header-cta video{
box-sizing: border-box;
object-fit: cover;
position: absolute;
max-width: 2400px;
min-height: 67vh;
height: 100%;
}
@media screen and (min-width:500px){
.video-header-cta-span{
padding: var(--xxxl-spacing);
}
}
@media screen and (min-width:800px){
.video-header-cta{
min-height: 800px;
}
.video-header-cta-span{
min-height: 800px;
}
.video-header-cta video{
min-height: 800px;
}
}
/*video small*/
.video-wrapper-small{
display: block;
}
.video-wrapper-small video{
max-width: 1200px;
margin: auto;
}
.content-left{
max-width: 2400px;
}
.content-left p{
margin: 0;
}
.content-left > div{
box-sizing: border-box;
padding: var(--m-spacing);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content-left > span{
box-sizing: border-box;
overflow: hidden;
}
.content-left img{
width: 100%;
height: 100%;
aspect-ratio: 3/2;
object-fit: cover;
}
@media screen and (min-width: 500px){
.content-left > div{
padding: var(--xxxl-spacing);
}
}
@media screen and (min-width: 1000px) {
.content-left{
display: flex;
flex-direction: row;
}
.content-left > div{
width: 50vw;
max-width: 1200px;
}
.content-left img{
box-sizing: border-box;
width: 50vw;
max-width: 2400px;
transition: transform 0.3s ease-in-out;
}
.img-hover img:hover{
transform: scale(1.05);
}
}
.content-left-inset > div{
padding: var(--m-spacing);
}
.content-left-inset > span{
display: block;
}
.content-left-inset img{
box-sizing: border-box;
padding: var(--m-spacing);
width: 100%;
}
@media screen and (min-width:500px){
.content-left-inset > div{
padding: var(--xxxl-spacing);
}
}
@media screen and (min-width: 1000px){
.content-left-inset > span{
width: 50%;
}
.content-left-inset > div{
width: 50%;
padding: var(--xxxl-spacing);
}
.content-left-inset img{
padding: var(--xxxl-spacing);
}
}
.video-content-left > span{
margin: auto;
}
.video-content-right > span{
margin: auto;
}
@media screen and (min-width: 1000px){
.video-content-left > div{
width: 50%;
}
.video-content-right > div{
width: 50%;
}
.video-content-left > span{
width: 50%;
}
.video-content-right > span{
width: 50%;
}
}
.youtube-content-left iframe, .youtube-content-right iframe{
width: 100%;
height: 100%;
min-width: 300px;
min-height: 300px;
}
.content-right{
max-width: 2400px;
}
.content-right p{
margin: 0;
}
.content-right > div{
box-sizing: border-box;
padding: var(--m-spacing);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content-right > span{
box-sizing: border-box;
overflow: hidden;
}
.content-right img{
width: 100%;
height: 100%;
aspect-ratio: 3/2;
object-fit: cover;
}
@media screen and (min-width: 500px){
.content-right > div{
padding: var(--xxxl-spacing);
}
}
@media screen and (min-width: 1000px) {
.content-right{
display: flex;
flex-direction: row-reverse;
}
.content-right > div{
width: 50vw;
max-width: 1200px;
}
.content-right img{
box-sizing: border-box;
width: 50vw;
max-width: 2400px;
transition: transform 0.3s ease-in-out;
}
.img-hover img:hover{
transform: scale(1.05);
}
}
.content-right-inset > div{
padding: var(--m-spacing);
}
.content-right-inset > span{
display: block;
}
.content-right-inset img{
box-sizing: border-box;
padding: var(--m-spacing);
width: 100%;
}
@media screen and (min-width:500px){
.content-right-inset > div{
padding: var(--xxxl-spacing);
}
}
@media screen and (min-width: 1000px){
.content-right-inset > span{
width: 50%;
}
.content-right-inset > div{
width: 50%;
}
.content-right-inset img{
padding: var(--xxxl-spacing);
}
}
.content-split{
box-sizing: border-box;
display:flex;
flex-direction: column;
max-width: 2400px;
}
.content-split > div{
padding: var(--m-spacing);
}
.content-split > span{
overflow: hidden;
}
.content-split img{
width: 100%;
height: 100%;
aspect-ratio: 1/1;
object-fit: cover;
overflow: hidden;
}
.content-split p{
margin: 0;
}
@media screen and (min-width:500px){
.content-split > div{
padding: var(--xxxl-spacing);
}
}
@media screen and (min-width: 700px){
.content-split{
flex-direction: row;
}
.content-split > div{
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 33%;
max-width: 33%;
}
.content-split > span{
box-sizing: border-box;
min-width: 34%;
}
}
.content-central{
box-sizing: border-box;
display:flex;
flex-direction: column;
max-width: 2400px;
}
.content-central > div{
padding: var(--m-spacing);
}
.content-central > span{
overflow: hidden;
}
.content-central img{
width: 100%;
height: 100%;
aspect-ratio: 1/1;
object-fit: cover;
overflow: hidden;
}
@media screen and (min-width:500px){
.content-central > div{
padding: var(--xxxl-spacing);
}
}
@media screen and (min-width: 700px){
.content-central{
flex-direction: row;
}
.content-central > div{
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 34%;
}
.content-central > span{
box-sizing: border-box;
min-width: 33%;
max-width: 33%;
}
}
.areas{
margin: 0 auto;
padding: var(--m-spacing);
max-width: 2400px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: calc(var(--m-spacing) * 0.5);
align-items: center;
justify-content: var(--justify-content);
}
.areas svg, .areas h4, .areas p{
margin: var(--margin);
}
@media screen and (min-width: 500px){
.areas{
padding: var(--xxxl-spacing);
}
}
.accordion-wrapper{
max-width: 2400px;
margin: 0 auto;
}
.accordion-wrapper .accordion {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
cursor: pointer;
text-align: var(--text-align);
padding: calc(var(--m-spacing) * 0.25);
transition: background-color 0.3s ease-in-out;
}
.accordion-wrapper h5{
font-size: var(--heading-font-size);
padding: 0;
}
.accordion-wrapper .panel {
box-sizing: border-box;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.accordion-wrapper p{
text-align: var(--text-align);
padding: var(--m-spacing);
}
.accordion-open{
transition: transform 0.3s ease-in-out;
}
.accordion-wrapper .active .accordion-open{
transform: rotate(45deg);
}
.menu{
display: grid;
grid-template-columns: 7fr 1fr;
gap: calc(var(--m-spacing) * 0.5);
margin: auto;
padding: var(--m-spacing);
}
.menu p{
margin: 0;
padding: 0;
}
.menu p:first-child{
font-weight: var(--body-weight);
text-align: var(--text-align);
}
.menu p:nth-child(2){
font-style: italic;
text-align: var(--text-align);
}
.menu p:nth-child(3){
text-align: var(--text-align);
grid-column-start: 2;
grid-row-start: 1;
}
@media screen and (min-width:500px){
.menu{
padding: var(--xxxl-spacing);
}
}
.vimeo, .youtube{
display: flex;
align-items: center;
justify-content: center;
padding: var(--m-spacing);
margin: auto;
line-height: 0;
}
.vimeo iframe, .youtube iframe {
width: 100%;
max-width: 2400px;
}
@media screen and (min-width:500px){
.vimeo, .youtube{
padding: var(--xxxl-spacing);
}
}
.content {
box-sizing: border-box;
margin: auto;
max-width: 2400px;
}
.content > div{
display: flex;
flex-direction: column;
gap: var(--m-spacing);
padding: var(--m-spacing);
max-width: 800px;
margin: auto;
}
.content h2, .content p{
margin: 0;
}
@media screen and (min-width: 500px){
.content {
/* padding: var(--xxxl-spacing); */
gap: var(--xxl-spacing);
}
.content > div {
padding: var(--xxl-spacing);
}
}
.content-side {
margin: auto;
padding: var(--m-spacing);
max-width: 2400px;
display: flex;
flex-direction: column;
justify-content: var(--justify-content);
gap: var(--m-spacing);
}
.content-side p{
max-width: 800px;
}
@media screen and (min-width: 500px){
.content-side {
padding: var(--xxxl-spacing);
gap: var(--xxl-spacing);
}
}
@media screen and (min-width: 800px){
.content-side {
flex-direction: row;
align-items: center;
}
.content-side h2, .content-side p{
margin: auto;
}
}
.newsletter-wrapper{
display: block;
}
.contact, .newsletter{
font-family: var(--body-font);
font-size: var(--body-font-size);
display: flex;
flex-direction: column;
width: 100%;
max-width: 2400px;
margin: auto;
text-align: var(--text-align);
padding: var(--m-spacing);
gap: calc(var(--m-spacing) * 0.5);
box-sizing: border-box;
}
.contact input, .contact textarea, .newsletter input{
font-family: var(--body-font);
font-size: var(--body-font-size);
padding: var(--s-spacing);
border: none;
}
.contact input:autofill, .contact textarea:autofill, .newsletter input:autofill{
font-family: var(--body-font);
font-size: var(--body-font-size);
}
.contact-wrapper{
display: grid;
grid-template-rows: auto auto;
gap: var(--m-spacing);
max-width: 2400px;
margin: 0 auto;
}
.contact-wrapper > div{
padding: 0 var(--m-spacing);
margin: auto;
display: flex;
flex-direction: column;
gap: calc(var(--m-spacing) * 0.5);
}
.contact-wrapper h3{
margin-top: var(--m-spacing);
}
@media screen and (min-width:500px){
.contact, .newsletter{
padding: var(--xxxl-spacing);
}
.contact-wrapper > div{
padding: var(--xxxl-spacing);
}
}
@media screen and (min-width:900px){
.contact-wrapper{
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
}
}
.newsletter h3{
font-family: var(--heading-font);
font-size: var(--heading-font-size);
text-align: var(--text-align);
font-weight: var(--heading-weight);
}
.newsletter label[for=email]{
font-family: var(--heading-font);
font-size: var(--heading-font-size);
text-align: var(--text-align);
font-weight: var(--heading-weight);
}
.newsletter span{
display: flex;
flex-direction: row;
align-items: center;
gap: calc(var(--m-spacing) * 0.2);
flex-wrap: nowrap;
}
.newsletter button, .contact button, .newsletter .button0, .contact .button0{
margin: var(--margin);
}
#consent{
font-family: var(--body-font);
font-size: var(--body-font-size);
font-weight: var(--body-weight);
accent-color: var(--contrast);
}
#consent + label{
font-family: var(--body-font);
font-size: var(--body-font-size);
font-weight: var(--body-weight);
}
.testimonial{
display:flex;
flex-direction: column;
gap: calc(var(--m-spacing) * 0.5);
margin: auto;
padding: var(--m-spacing);
max-width: 2400px;
text-align: var(--text-align);
}
.testimonial h6{
text-align: var(--text-align);
font-weight: var(--heading-weight);
padding: 0;
margin: 0;
}
.testimonial p{
text-align: var(--text-align);
font-weight: var(--body-weight);
padding: 0;
margin: 0;
}
.testimonial p:last-child{
font-style: italic;
font-weight: var(--body-weight);
}
.testimonial p:first-of-type{
font-size: 1.618em;
}
@media screen and (min-width: 500px){
.testimonial{
padding: var(--xxxl-spacing);
}
}
.opening{
box-sizing: border-box;
max-width: 2400px;
margin: auto;
}
.opening > div{
padding: var(--m-spacing);
max-width: 800px;
margin: auto;
}
.opening h2{
text-align: var(--text-align);
margin-bottom: var(--m-spacing);
}
.opening p{
text-align: var(--text-align);
margin: var(--margin);
}
@media screen and (min-width: 500px){
/* .opening{
padding: var(--xxl-spacing);
} */
.opening h2{
margin-bottom: var(--l-spacing);
}
.opening > div {
padding: var(--xxl-spacing);
}
}
#cookie-banner{
box-sizing: border-box;
display: none;
position: fixed;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
bottom: 0;
width: 100%;
background-color: var(--black);
color: var(--white);
padding: var(--m-spacing);
text-align: var(--text-align);
z-index: 1;
}
#cookie-banner p{
color: var(--white);
}
#cookie-banner span{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 10px;
margin: var(--margin);
color: var(--white);
}
.footer-small{
display: flex;
flex-direction: column;
gap: var(--m-spacing);
text-align: var(--text-align);
padding: var(--m-spacing);
}
.footer-small div:first-child{
display: grid;
grid-template-columns: auto auto;
gap: var(--m-spacing);
width: fit-content;
margin: var(--margin);
text-align: var(--text-align);
align-items: center;
}
.footer-small div:nth-child(2){
line-height: var(--body-line-height);
}
#year-footer-small{
display: inline-block;
margin: 0 5px;
}
.footer-small a {
display: inline-block;
text-align: var(--text-align);
max-width: max-content;
font-weight: var(--body-weight);
transition: color 0.3s ease-in-out;
}
@media screen and (min-width:500px){
.footer-small{
padding: var(--xxxl-spacing);
}
}
.footer-large{
display: flex;
flex-direction: column;
gap: var(--xl-spacing);
align-items: flex-start;
justify-items: center;
text-align: var(--text-align);
padding: var(--m-spacing);
}
.footer-large .footer-links{
width: 100%;
display: grid;
grid-template-columns: auto auto;
gap: var(--m-spacing);
margin: 0 auto;
text-align: var(--text-align);
}
.footer-large .contact-links{
display: flex;
flex-direction: column;
gap: 10px;
justify-content: var(--justify-content);
margin: var(--margin);
width: fit-content;
}
.footer-large .copyright{
margin: auto;
text-align: var(--text-align);
line-height: var(--body-line-height);
}
.footer-large .contact-links span{
display: flex;
flex-direction: row;
gap: 5px;
align-items: center;
justify-content: var(--justify-content);
text-align: var(--text-align);
flex-wrap: nowrap;
}
.footer-large a{
text-align: var(--text-align);
max-width: max-content;
font-weight: var(--body-weight);
transition: color 0.3s ease-in-out;
margin: var(--margin);
}
.footer-large img{
margin: var(--margin);
width: 200px;
height: auto;
}
.footer-large svg{
min-width: 24px;
}
#year-footer-large{
display: inline-block;
margin: 0 5px;
}
@media screen and (min-width: 500px){
.footer-large{
padding: var(--xxxl-spacing);
}
.footer-large .footer-links{
grid-template-columns: auto auto auto;
gap: var(--m-spacing) var(--l-spacing);
}
.footer-large .contact-links{
flex-direction: row;
flex-wrap: wrap;
}
}
@media screen and (min-width: 600px){
.footer-large .footer-links{
grid-template-columns: auto auto auto auto;
gap: var(--m-spacing) var(--xxxl-spacing);
}
}
.footer-icons .icons{
display: flex;
flex-direction: row;
gap: var(--m-spacing);
}
.footer-icons .icons svg{
fill: #dfdfdf;
}
.footer-icons .payment-icons{
display: flex;
flex-direction: row;
gap: var(--m-spacing);
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
margin: auto;
}
.msg-contact, .msg-news, .msg-form{
display: none;
padding: 0;
font-style: italic;
}
.logo{
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: var(--m-spacing);
margin: auto;
width: 100%;
max-width: 2400px;
line-height: 0;
}
.logo img{
width: 100%;
max-width: 400px;
height: auto;
margin: auto;
}
@media screen and (min-width: 500px){
.logo{
padding: var(--xxxl-spacing);
}
}
.back-button{
display: flex;
padding: var(--m-spacing);
}
.back-button a{
display: block;
height: 25px;
}
.spacer-small{
height:var(--s-spacing);
}
@media screen and (min-width: 500px){
.spacer-small{
height: var(--m-spacing);
}
}
.spacer{
height: var(--l-spacing);
}
@media screen and (min-width: 500px){
.spacer{
height: var(--xl-spacing);
}
}
.spacer-large{
height: var(--xxl-spacing);
}
@media screen and (min-width: 500px){
.spacer-large{
height: calc(var(--xxxl-spacing) * 2);
}
}
.divider-block{
display: block;
height: 2px;
width: 100%;
}
.search-wrapper{
margin: auto;
max-width: 2400px;
padding: var(--m-spacing);
box-sizing: border-box;
}
@media screen and (min-width: 500px) {
.search-wrapper{
padding: var(--xxxl-spacing);
}
}
.search{
display: flex;
flex-direction: row;
align-items: center;
justify-content: var(--justify-content);
max-width: 400px;
gap: var(--m-spacing);
}
.search svg{
min-height: 31px;
min-width: 31px;
}
.search input{
font-family: var(--body-font);
font-size: var(--body-font-size);
border: none;
border-radius: 0;
width: 100%;
max-width: 300px;
padding: var(--s-spacing);
}
.search button{
background-color: transparent;
margin: 0;
}
.load_more{
font-family: var(--body-font);
font-weight: var(--body-weight);
font-size: var(--body-font-size);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.results{
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--m-spacing);
flex-wrap: wrap;
}
.results a{
display: flex;
flex-direction: column;
gap: 10px;
box-sizing: border-box;
min-width: 50%;
padding: var(--s-spacing);
}
.results img{
object-fit: cover;
aspect-ratio: 1/1;
}
@media screen and (min-width:1000px){
.results{
grid-template-columns: 1fr 1fr 1fr;
}
.results a{
min-width: 33%;
}
}
.prev-next{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: auto;
padding: var(--m-spacing);
}
.pull-quote{
display: flex;
flex-direction: column;
gap: calc(var(--m-spacing) * 0.5);
margin: auto;
padding: var(--m-spacing);
max-width: 2400px;
}
.pull-quote div{
margin: var(--margin);
}
.pull-quote svg{
fill: var(--contrast);
}
.pull-quote h6{
text-align: var(--text-align);
}
@media screen and (min-width:500px){
.pull-quote{
padding: var(--xxxl-spacing);
}
}
.image-links{
display: grid;
grid-template-columns: 1fr;
padding: var(--m-spacing);
gap: var(--xxl-spacing);
margin: auto;
justify-items: center;
justify-content: center;
max-width: 2400px;
box-sizing: border-box;
}
.image-links > a > div, .image-links > span > div{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: min-content;
max-width: 100%;
gap: var(--m-spacing);
}
.image-links h4{
position: absolute;
margin: 0;
font-family: var(--body-font);
font-size: var(--m-spacing);
font-weight: bold;
}
.image-links img{
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
opacity: 0.75;
transition: opacity 0.3s ease-in-out;
}
.image-links img:hover{
opacity: 0.5;
}
@media screen and (min-width: 500px) {
.image-links {
padding: var(--xxxl-spacing);
}
}
@media screen and (min-width: 600px) {
.image-links {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width: 800px) {
.image-links {
grid-template-columns: 1fr 1fr 1fr;
}
}
.pricing{
display: grid;
grid-template-columns: 1fr;
align-items: flex-start;
justify-content: center;
gap: 10px;
margin: auto;
padding: var(--m-spacing) 0;
text-align: var(--text-align);
box-sizing: border-box;
line-height: var(--body-line-height);
}
.pricing > div{
min-width: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
text-align: var(--text-align);
box-shadow: 5px 10px 25px var(--mid50);
box-sizing: border-box;
}
.pricing > div > div{
min-width: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: calc(var(--m-spacing) * 0.25);
text-align: var(--text-align);
padding: calc(var(--m-spacing) * 0.5);
box-sizing: border-box;
}
.pricing > div > span:nth-child(1), .pricing > div > span:nth-child(3), .pricing > div > span:nth-child(4) {
width: 100%;
box-sizing: border-box;
}
.pricing > div > div > span:nth-child(2){
font-size: 1.618em;
}
.pricing .highlight-on{
gap: 0;
}
.pricing > .highlight-on > span {
padding: 5px;
text-align: var(--text-align);
box-sizing: border-box;
}
.pricing > div > span{
height: 28px;
}
.pricing-feature-wrapper{
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: var(--justify-content);
gap: 10px;
text-align: var(--text-align);
}
.pricing-feature-wrapper-off{
display: none;
}
.pricing a{
margin: var(--margin);
}
.pricing h2{
font-size: 1.618em;
}
.pricing p{
margin: 0;
text-align: left;
}
.pricing .descr{
height: 100px;
}
.pricing .pricing-svg{
height: 24px;
width: 24px;
min-height: 24px;
min-width: 24px;
}
.pricing .button0{
margin-bottom: var(--s-spacing);
}
@media screen and (min-width:500px){
.pricing{
padding: var(--m-spacing);
}
}
@media screen and (min-width:900px){
.pricing{
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width:1500px) {
.pricing{
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
@media screen and (min-width:1550px) {
.pricing{
padding: var(--xxxl-spacing);
}
}
.table-wrapper{
/* padding: var(--m-spacing); */
padding: 0;
}
.table{
padding: var(--m-spacing);
margin: auto;
border-spacing: 0;
}
.table th, .table td{
padding: var(--xs-spacing);
}
.table h5{
font-size: 1.618em;
}
@media screen and (min-width:500px){
.table-wrapper{
padding: var(--xxxl-spacing);
}
/* .table{
padding: var(--xxxl-spacing);
} */
}
.table-flex{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: auto;
/* padding: var(--m-spacing); */
padding: 0;
}
.table-flex > div{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin: auto;
padding: var(--m-spacing);
}
.table-flex table{
margin: 0;
border-spacing: 0;
}
.table-flex th, .table-flex td{
padding: var(--xs-spacing);
}
.table-flex h5{
font-size: 1.618em;
}
@media screen and (min-width:500px){
.table-flex{
padding: var(--xxxl-spacing);
}
/* .table-flex > div{
padding: var(--xxxl-spacing);
} */
}
.banner-container {
width: 100%;
overflow: hidden;
padding: 10px 0;
white-space: nowrap;
position: relative;
}
.scrolling-text {
display: inline-block;
padding-left: 100%;
animation: scrollText 40s linear infinite;
}
@keyframes scrollText {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.slideshow-container {
width: 100%;
height: 100%;
max-height: 768px;
max-width: 1200px;
margin: auto;
position: relative;
overflow: hidden;
}
.slides {
width: 100%;
height: 100%;
display: flex;
transition: transform 0.5s ease;
}
.slide {
width: 100%;
display: none;
}
.slide img{
width: 100%;
height: 768px;
object-fit: cover;
}
.slideshow-container input[type="radio"] {
display: none;
}
.thumbnails {
text-align: center;
margin: 0 auto;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
max-width: 480px;
}
.thumbnails label {
display: block;
cursor: pointer;
width: 60px;
height: 60px;
}
.thumbnail {
width: 60px;
height: 60px;
object-fit: cover;
opacity: 0.6;
transition: opacity 0.3s ease, transform 0.2s ease;
}
.thumbnails label:hover .thumbnail {
opacity: 1;
}
.product{
max-width: 2400px;
margin: 0 auto;
}
.product > div{
padding: var(--m-spacing);
}
.product h1{
font-size: 1.618em;
}
.product h2{
font-weight: var(--body-weight);
font-size: var(--body-font-size);
font-family: var(--body-font);
}
.product details h2{
margin: 25px auto;
}
.product details{
cursor: pointer;
}
.product h3{
font-size: var(--body-font-size);
}
@media screen and (min-width:500px){
.product > div{
padding: var(--xxxl-spacing);
}
}
@media screen and (min-width:800px){
.product{
display: grid;
grid-template-columns: 1fr 1fr;
}
.product > .slideshow-wrapper{
width: 100%;
box-sizing: border-box;
max-width: 1200px;
}
.product > div{
box-sizing: border-box;
max-width: 1200px;
padding: var(--m-spacing);
}
}
@media screen and (min-width:1000px){
.product > div{
padding: var(--xxxl-spacing);
}
}
.add-to-cart-form{
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
}
.add-to-cart-form > div{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.add-to-cart-form label{
margin: 0;
}
.quantity-buttons{
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.decrement-btn, .increment-btn{
display: flex;
padding: 5px;
background-color: var(--light);
margin: 0;
border: 2px solid var(--light);
}
.quantity-input{
padding: 5px;
width: 50px;
height: 38px;
text-align: center;
border: 2px solid var(--mid);
}
.add-to-cart-btn{
font-weight: bold;
margin-top: 10px;
width: 100%;
max-width: 100%;
padding: var(--s-spacing);
}
.price_wrapper{
font-family: var(--heading-font);
font-weight: var(--heading-weight);
font-size: 1.618em;
}
.prev_price_wrapper{
font-weight: var(--body-weight);
font-size: var(--body-font-size);
}
.percent_discount_display{
font-size: var(--body-font-size);
color: var(--contrast);
}
.stock_display{
color: var(--contrast);
}
.sub-wrapper{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}
.sub-wrapper a{
display: block;
padding: var(--xs-spacing) var(--s-spacing);
color: var(--white);
background-color: var(--mid);
transition: background-color 0.3s ease-in-out;
}
.sub-wrapper a:hover{
background-color: var(--dark);
}
.product-cards{
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--m-spacing);
margin: auto;
padding: var(--m-spacing) 0;
justify-items: center;
justify-content: center;
}
.product-cards > a{
width: 100%;
display: flex;
flex-direction: column;
gap: var(--m-spacing);
color: var(--black);
}
.product-cards img{
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
height: auto;
}
.product-cards h2{
font-family: var(--body-font);
font-size: 1.618rem;
font-weight: var(--body-weight);
text-align: var(--text-align);
margin: var(--margin);
}
.product-cards p{
text-align: var(--text-align);
margin: var(--margin);
}
.category, .collection{
padding: var(--m-spacing);
}
@media screen and (min-width:700px){
.category, .collection{
padding: var(--xxxl-spacing);
}
.product-cards{
grid-template-columns: 1fr 1fr 1fr;
gap: var(--l-spacing);
padding: var(--l-spacing) 0;
}
}
@media screen and (min-width:1000px){
.product-cards{
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
.variant_1_options, .variant_2_options, .variant_3_options{
justify-content: var(--justify-content);
}
.variant_1_options > label, .variant_2_options > label, .variant_3_options > label{
display: inline-block;
padding: var(--xs-spacing) var(--s-spacing);
border: 2px solid transparent;
}
.variant_1_options input, .variant_2_options input, .variant_3_options input{
display: none;
}
.variant_1_options label:has(input:checked), .variant_2_options label:has(input:checked), .variant_3_options label:has(input:checked){
border: 2px solid var(--mid);
}
.variant_1_options label:has(input:disabled), .variant_2_options label:has(input:disabled), .variant_3_options label:has(input:disabled){
color: var(--white);
text-decoration: line-through;
}
.select-css {
display: block;
font-size: var(--body-font-size);
font-family: var(--body-font);
font-weight: var(--body-weight);
/* color: var(--black); */
line-height: 1.3;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
padding: var(--xs-spacing);
/* border: 2px solid var(--mid); */
border: none;
border-radius: 0;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
/* background-color: var(--white); */
background-repeat: no-repeat, repeat;
background-position: right .7em top 50%, 0 0;
background-size: .90em auto, 100%;
}
.select-css::-ms-expand {
display: none;
}
.select-css:hover {
border-color: var(--midgrey);
}
.select-css:focus {
border-color: var(--lightgrey);
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
box-shadow: 0 0 0 3px -moz-mac-focusring;
color: var(--darkgrey);
outline: none;
}
.select-css option {
font-weight:normal;
}
.sort{
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
margin-top: var(--m-spacing);
}
.sort-select{
width: 180px;
margin: 0 auto;
}
@media screen and (min-width: 600px){
.search-wrapper-shop{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: stretch;
gap: var(--m-spacing);
}
.sort{
margin: 0;
}
}
.shop-footer{
box-sizing: border-box;
max-width: 2400px;
margin: 0 auto;
display: grid;
gap: var(--m-spacing);
padding: var(--m-spacing);
text-align: var(--text-align);
justify-content: stretch;
}
.shop-footer form{
display: flex;
flex-direction: row;
width: 100%;
align-items: center;
justify-content: flex-start;
max-width: none;
grid-column-start: 1;
grid-column-end: 3;
padding: 0;
}
.shop-footer input{
box-sizing: border-box;
width: 100%;
border-radius: 0;
border: none;
font-family: var(--body-font);
font-size: var(--body-font-size);
font-weight: var(--body-weight);
padding: 10px 9px;
margin: var(--margin);
}
.shop-footer form button{
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
padding: 9px;
margin-left: -44px;
border: none;
}
.shop-footer form span{
display: flex;
margin: auto;
width: 100%;
}
.shop-footer .payment-icons{
margin: var(--margin);
justify-content: var(--justify-content);
display: flex;
flex-direction: row;
gap: 5px;
flex-wrap: wrap;
}
.shop-footer .links{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
text-align: var(--text-align);
}
.shop-footer .links a{
transition: color 0.3s ease-in-out;
}
.shop-footer .links a:hover{
background-color: transparent;
}
.shop-footer .social{
margin: var(--margin);
padding: 0;
}
#year-footer-shop{
display: inline-block;
margin: 0 5px;
}
#countryMenu{
justify-content: var(--justify-content);
margin: var(--margin);
width: 100%;
}
@media screen and (min-width:500px){
.shop-footer{
padding: var(--xxxl-spacing);
gap: var(--xxl-spacing);
}
}
@media screen and (min-width:900px){
.shop-footer{
align-items: flex-end;
}
.shop-footer .links{
grid-template-columns: 1fr 1fr 1fr;
}
.shop-footer input{
width: 400px;
}
#countryMenu{
width: 400px;
}
.shop-footer form span{
width: 400px;
margin: var(--margin);
}
}
.shop-nav{
box-sizing: border-box;
position: sticky;
top: 0;
display: grid;
grid-template-columns: 20fr 1fr 1fr 1fr 1fr;
align-items: center;
height: 60px;
padding: 10px 10px 10px 20px;
z-index: 1;
}
.shop-nav .logo-wrapper{
width: fit-content;
}
.shop-nav img{
height: 20px;
width: auto;
}
.shop-nav a{
padding: 0;
}
.shop-nav a:hover{
background-color: transparent;
}
.shop-nav .cart-icon{
font-family:'Calibri', sans-serif;
font-size:32px;
}
.shop-nav .cart-link{
margin-right: 20px;
}
.shop-nav .wishlist-link{
margin-right: 20px;
}
.shop-nav .search-link{
margin-right: 20px;
}
.shop-nav .cat-nav-open{
margin-right: 20px;
}
.cat-nav{
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 100%;
max-width: 2400px;
padding: var(--xs-spacing);
gap: 10px;
margin-bottom: 10px;
position: absolute;
top: 60px;
opacity: 0;
transform: translateY(-200%);
transition: all 0.3s ease-in-out;
z-index: 1;
box-sizing: border-box;
}
.cat-nav-open{
opacity: 1;
transform: translateY(0);
}
.cat-nav > div{
display: flex;
flex-direction: column;
min-width: 200px;
}
.cat-nav span{
font-weight: bold;
margin-bottom: 10px;
}
.cat-nav a{
text-decoration: none;
padding: 0;
margin-bottom: 10px;
}
.cat-nav a:hover{
text-decoration: underline;
background-color: transparent;
}
@media screen and (min-width: 500px){
.cat-nav{
flex-direction: row;
}
}
.custom_input_wrapper{
display: flex;
flex-direction: column;
padding: var(--m-spacing) 0;
}
.custom_input_wrapper > label{
text-align: var(--text-align);
width: 100%;
}
.custom_input{
box-sizing: border-box;
width: 100%;
font-family: var(--body-font);
font-size: var(--body-font-size);
padding: var(--s-spacing);
background-color: var(--light);
border: none;
}
.custom_input::placeholder{
color: var(--black);
}
.categories, .collections{
display: grid;
grid-template-columns: 1fr;
gap: var(--m-spacing);
padding: var(--m-spacing);
margin: auto;
}
.categories > a, .collections > a{
display: flex;
width: 100%;
height: 100%;
}
.categories img, .collections img{
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.categories h2, .collections h2{
position: absolute;
margin: var(--m-spacing);
text-align: var(--text-align);
font-size: 1.618em;
}
@media screen and (min-width:500px){
.categories, .collections{
padding: var(--xxxl-spacing);
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width:800px){
.categories, .collections{
grid-template-columns: 1fr 1fr 1fr;
}
}
@media screen and (min-width:1000px){
.categories, .collections{
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
@media screen and (min-width:1500px){
.categories, .collections{
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
}
@media screen and (min-width:1700px){
.categories, .collections{
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
}
.fade-in{
opacity: 0;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp{
opacity: 0;
animation: fadeInUp 0.75s ease-in-out forwards;
}
.dark_mode_wrapper{
display: block;
width: 100%;
height: 31px;
}
.dark-mode, .light-mode{
margin: var(--margin);
background-color: transparent;
height: 31px;
}
.dark-mode:hover, .light-mode:hover{
background-color: transparent;
}
.dark-mode svg, .light-mode svg{
fill: var(--mid);
}
.cart-wrapper{
background-color: var(--white);
max-width: 2400px;
padding: 25px;
margin: auto;
display: flex;
flex-direction: column;
gap: var(--m-spacing);
}
.cart-wrapper > div{
display: flex;
flex-direction: column;
gap: var(--m-spacing);
}
@media screen and (min-width: 500px) {
.cart-wrapper{
padding: var(--m-spacing);
}
}
@media screen and (min-width: 900px) {
.cart-wrapper{
display: flex;
flex-direction: row;
gap: var(--m-spacing);
justify-content: center;
}
.cart-wrapper > div{
display: flex;
flex-direction: column;
gap: var(--m-spacing);
}
}
.cart-wrapper .select-css{
border: 1px solid var(--mid);
}
.cart-wrapper .payment-icons{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.cart-items{
display: flex;
flex-direction: column;
gap: var(--m-spacing);
}
.cart-item{
display: grid;
grid-template-columns: max-content auto auto;
grid-template-rows: auto auto auto auto;
gap: 10px;
align-items: center;
box-shadow: 1px 1px 20px var(--light);
padding: var(--xs-spacing);
}
.cart-item > img{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 5;
object-fit: cover;
}
.cart-item > .product-name{
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.cart-item > .price-name{
font-size: 0.75em;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.cart-item > .price-span{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
align-self: center;
justify-self: flex-end;
}
.cart-item > .custom-input{
font-size: 0.75em;
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
align-self: center;
justify-self: flex-start;
}
.cart-item > .interval-text{
font-size: 0.75em;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
align-self: center;
justify-self: flex-end;
}
.cart-button-wrapper{
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
align-self: flex-end;
justify-self: center;
}
.cart-button-wrapper button{
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
border: none;
padding: 5px;
transition: background-color 0.3s ease-in-out;
}
.cart-button-wrapper button:hover{
background-color: var(--light);
border: none;
}
.continue-shopping{
margin: var(--margin);
margin-top: var(--m-spacing);
}
.recently-viewed-wrapper{
display: flex;
flex-direction: column;
gap: 10px;
margin: auto;
padding: var(--m-spacing);
box-sizing: border-box;
}
.recently-viewed-wrapper h6{
font-size: 1.618em;
}
#productContainer, #favProductContainer{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--m-spacing);
}
#productContainer a, #favProductContainer a{
display: flex;
flex-direction: column;
gap: 5px;
width: min-content;
}
#productContainer img, #favProductContainer img{
width: 140px;
height: 140px;
object-fit: cover;
}
#productContainer span, #favProductContainer span{
text-wrap: wrap;
}
.interval_text{
font-size: var(--body-font-size);
}
#clearViewedBtn, #clearFavsBtn{
text-decoration: underline;
cursor: pointer;
}
.wishlist{
font-family: var(--body-font);
font-weight: bold;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--xs-spacing);
color: var(--contrast);
background-color: var(--white);
margin-top: var(--xs-spacing);
width: 100%;
max-width: 100%;
padding: var(--s-spacing);
cursor: pointer;
box-sizing: border-box;
border-style: var(--button-border-style);
border-width: var(--button-border-width);
border-color: var(--button-border-color);
border-radius: var(--button-border-radius);
transition: border 0.3s ease-in-out;
}
.wishlist:hover{
border-color: var(--button-border-hover-color);
}
.wishlist svg{
fill: var(--contrast);
}
@media screen and (min-width: 500px){
.recently-viewed-wrapper{
padding: var(--xxxl-spacing);
}
}
#success{
padding: var(--m-spacing);
margin: 25px auto;
max-width: 600px;
box-shadow: 1px 1px 20px var(--light);
}
#success img{
width: 100%;
max-width: 400px;
margin: var(--margin);
}
/*custom feature start*/
.domain-search-wrapper,
.domain-transfer-wrapper{
box-sizing: border-box;
display: flex;
flex-direction: column;
margin: auto;
padding: var(--m-spacing);
gap: var(--m-spacing);
}
.domain-search-wrapper h2,
.domain-transfer-wrapper h2{
font-size: var(--l-spacing)
}
.domain-search-wrapper > div,
.domain-transfer-wrapper > div{
display: flex;
flex-direction: row;
align-items: center;
justify-content: right;
gap: var(--m-spacing);
width: 100%;
}
.domain-search-wrapper input,
.domain-transfer-wrapper input{
width: 100%;
font-family: var(--body-font);
font-size: var(--body-font-size);
color: var(--black);
padding: var(--s-spacing);
background-color: var(--white);
border: 1px solid var(--mid);
border-radius: 0;
}
.domain-search-wrapper #checkout-link,
.domain-search-wrapper #select-hosting-link{
background-color: var(--contrast);
}
@media screen and (min-width:500px){
.domain-search-wrapper,
.domain-transfer-wrapper{
padding: var(--xxxl-spacing);
gap: var(--xxl-spacing);
}
}
@media screen and (min-width:1280px){
.domain-search-wrapper,
.domain-transfer-wrapper{
display: grid;
grid-template-columns: 1fr 1fr;
}
.domain-search-wrapper label{
grid-column-start: 1;
grid-column-end: 2;
}
.domain-search-wrapper div{
grid-column-start: 2;
grid-column-end: 3;
}
.domain-transfer-wrapper label{
grid-column-start: 2;
grid-column-end: 3;
}
.domain-transfer-wrapper div{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
}
.domain-transfer-form{
display: flex;
flex-direction: row;
align-items: center;
justify-content: right;
gap: 25px;
width: 100%;
max-width: 100%;
padding: 0;
margin: 0 auto;
}
.suggestions{
box-sizing: border-box;
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 100%;
margin: auto;
background-color: var(--white);
}
.suggestion{
box-sizing: border-box;
display: flex;
padding: var(--m-spacing);
margin: auto;
background-color: var(--white);
outline: 2px solid var(--light);
cursor: pointer;
border: 2px solid transparent;
transition: border 0.3s ease-in-out;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 2400px;
}
.suggestion:hover{
border: 2px solid var(--dark);
}
.suggestion .icon{
display: flex;
gap: var(--xs-spacing);
align-items: center;
}
.suggestions p{
box-sizing: border-box;
font-family: var(--heading-font);
width: 100%;
text-align: center;
padding: var(--m-spacing);
font-size: var(--body-font-size);
margin: auto;
}
/*custom feature end*/
/*classes for color*/
.black{
color: var(--black);
}
.dark{
color: var(--dark);
}
.mid{
color: var(--mid);
}
.light{
color: var(--light);
}
.contrast{
color: var(--contrast);
}
.white{
color: var(--white);
}
.color7{
color: var(--color7);
}
.color8{
color: var(--color8);
}
.color9{
color: var(--color9);
}
.color10{
color: var(--color10);
}
/*classes for color hover*/
.hover-black:hover{
color: var(--black);
}
.hover-dark:hover{
color: var(--dark);
}
.hover-mid:hover{
color: var(--mid);
}
.hover-light:hover{
color: var(--light);
}
.hover-contrast:hover{
color: var(--contrast);
}
.hover-white:hover{
color: var(--white);
}
.hover-color7:hover{
color: var(--color7);
}
.hover-color8:hover{
color: var(--color8);
}
.hover-color9:hover{
color: var(--color9);
}
.hover-color10:hover{
color: var(--color10);
}
/*classes for background-color*/
.bg-black{
background-color: var(--black);
}
.bg-dark{
background-color: var(--dark);
}
.bg-mid{
background-color: var(--mid);
}
.bg-light{
background-color: var(--light);
}
.bg-contrast{
background-color: var(--contrast);
}
.bg-white{
background-color: var(--white);
}
.bg-color7{
background-color: var(--color7);
}
.bg-color8{
background-color: var(--color8);
}
.bg-color9{
background-color: var(--color9);
}
.bg-color10{
background-color: var(--color10);
}
/*classes for background-color hover*/
.bg-hover-black:hover{
background-color: var(--black);
}
.bg-hover-dark:hover{
background-color: var(--dark);
}
.bg-hover-mid:hover{
background-color: var(--mid);
}
.bg-hover-light:hover{
background-color: var(--light);
}
.bg-hover-contrast:hover{
background-color: var(--contrast);
}
.bg-hover-white:hover{
background-color: var(--white);
}
.bg-hover-color7:hover{
background-color: var(--color7);
}
.bg-hover-color8:hover{
background-color: var(--color8);
}
.bg-hover-color9:hover{
background-color: var(--color9);
}
.bg-hover-color10:hover{
background-color: var(--color10);
}
/* classes for svg fills */
.fill-black, .fill-black svg{
fill: var(--black);
}
.fill-dark, .fill-dark svg{
fill: var(--dark);
}
.fill-mid, .fill-mid svg{
fill: var(--mid);
}
.fill-light, .fill-light svg{
fill: var(--light);
}
.fill-contrast, .fill-contrast svg{
fill: var(--contrast);
}
.fill-white, .fill-white svg{
fill: var(--white);
}
.fill-color7, .fill-color7 svg{
fill: var(--color7);
}
.fill-color8, .fill-color8 svg{
fill: var(--color8);
}
.fill-color9, .fill-color9 svg{
fill: var(--color9);
}
.fill-color10, .fill-color10 svg{
fill: var(--color10);
}
/* classes for outline color */
.outline-black{
outline: 2px solid var(--black);
}
.outline-dark{
outline: 2px solid var(--dark);
}
.outline-mid{
outline: 2px solid var(--mid);
}
.outline-light{
outline: 2px solid var(--light);
}
.outline-contrast{
outline: 2px solid var(--contrast);
}
.outline-white{
outline: 2px solid var(--white);
}
.outline-color7{
outline: 2px solid var(--color7);
}
.outline-color8{
outline: 2px solid var(--color8);
}
.outline-color9{
outline: 2px solid var(--color9);
}
.outline-color10{
outline: 2px solid var(--color10);
}
/* text shadow colors */
.text-shadow-color-black{
text-shadow: 2px 2px 10px var(--black);
}
.text-shadow-color-dark{
text-shadow: 2px 2px 10px var(--dark);
}
.text-shadow-color-mid{
text-shadow: 2px 2px 10px var(--mid);
}
.text-shadow-color-light{
text-shadow: 2px 2px 10px var(--light);
}
.text-shadow-color-contrast{
text-shadow: 2px 2px 10px var(--contrast);
}
.text-shadow-color-white{
text-shadow: 2px 2px 10px var(--white);
}
.text-shadow-color-color7{
text-shadow: 2px 2px 10px var(--color7);
}
.text-shadow-color-color8{
text-shadow: 2px 2px 10px var(--color8);
}
.text-shadow-color-color9{
text-shadow: 2px 2px 10px var(--color9);
}
.text-shadow-color-color10{
text-shadow: 2px 2px 10px var(--color10);
}
/* classes for placeholder colors */
.placeholder-black::placeholder{
color: var(--black);
}
.placeholder-dark::placeholder{
color: var(--dark);
}
.placeholder-mid::placeholder{
color: var(--mid);
}
.placeholder-light::placeholder{
color: var(--light);
}
.placeholder-contrast::placeholder{
color: var(--contrast);
}
.placeholder-white::placeholder{
color: var(--white);
}
.placeholder-color7::placeholder{
color: var(--color7);
}
.placeholder-color8::placeholder{
color: var(--color8);
}
.placeholder-color9::placeholder{
color: var(--color9);
}
.placeholder-color10::placeholder{
color: var(--color10);
}
/* classes for border-top color */
.border-top-black{
border-top: 1px solid var(--black);
}
.border-top-dark{
border-top: 1px solid var(--dark);
}
.border-top-mid{
border-top: 1px solid var(--mid);
}
.border-top-light{
border-top: 1px solid var(--light);
}
.border-top-contrast{
border-top: 1px solid var(--contrast);
}
.border-top-white{
border-top: 1px solid var(--white);
}
.border-top-color7{
border-top: 1px solid var(--color7);
}
.border-top-color8{
border-top: 1px solid var(--color8);
}
.border-top-color9{
border-top: 1px solid var(--color9);
}
.border-top-color10{
border-top: 1px solid var(--color10);
}
/* classes for font sizes*/
.font-size-10 {
font-size: 10px;
}
.font-size-12 {
font-size: 12px;
}
.font-size-14 {
font-size: 14px;
}
.font-size-16 {
font-size: 16px;
}
.font-size-18 {
font-size: 18px;
}
.font-size-20 {
font-size: 20px;
}
.font-size-22 {
font-size: 22px;
}
.font-size-24 {
font-size: 24px;
}
.font-size-26 {
font-size: 25px;
}
.font-size-28 {
font-size: 26px;
}
.font-size-30 {
font-size: 27px;
}
.font-size-32 {
font-size: 28px;
}
.font-size-34 {
font-size: 29px;
}
.font-size-36 {
font-size: 30px;
}
.font-size-38 {
font-size: 31px;
}
.font-size-40 {
font-size: 32px;
}
.font-size-42 {
font-size: 34px;
}
.font-size-44 {
font-size: 35px;
}
.font-size-46 {
font-size: 37px;
}
.font-size-48 {
font-size: 38px;
}
.font-size-50 {
font-size: 42px;
}
.font-size-52 {
font-size: 52px;
}
.font-size-54 {
font-size: 43px;
}
.font-size-56 {
font-size: 45px;
}
.font-size-58 {
font-size: 46px;
}
.font-size-60 {
font-size: 48px;
}
.font-size-62 {
font-size: 50px;
}
.font-size-64 {
font-size: 51px;
}
.font-size-66 {
font-size: 53px;
}
.font-size-68 {
font-size: 54px;
}
.font-size-70 {
font-size: 56px;
}
.font-size-72 {
font-size: 58px;
}
@media screen and (min-width:500px){
.font-size-26 {
font-size: 26px;
}
.font-size-28 {
font-size: 28px;
}
.font-size-30 {
font-size: 30px;
}
.font-size-32 {
font-size: 32px;
}
.font-size-34 {
font-size: 34px;
}
.font-size-36 {
font-size: 36px;
}
.font-size-38 {
font-size: 38px;
}
.font-size-40 {
font-size: 40px;
}
.font-size-42 {
font-size: 42px;
}
.font-size-44 {
font-size: 44px;
}
.font-size-46 {
font-size: 46px;
}
.font-size-48 {
font-size: 48px;
}
.font-size-50 {
font-size: 50px;
}
.font-size-52 {
font-size: 52px;
}
.font-size-54 {
font-size: 54px;
}
.font-size-56 {
font-size: 56px;
}
.font-size-58 {
font-size: 58px;
}
.font-size-60 {
font-size: 60px;
}
.font-size-62 {
font-size: 62px;
}
.font-size-64 {
font-size: 64px;
}
.font-size-66 {
font-size: 66px;
}
.font-size-68 {
font-size: 68px;
}
.font-size-70 {
font-size: 70px;
}
.font-size-72 {
font-size: 72px;
}
}
/* classes for text-align */
.text-align-left{
display: block;
text-align: left;
}
.text-align-right{
display: block;
text-align: right;
}
.text-align-center{
display: block;
text-align: center;
}
.text-align-justify{
display: block;
text-align: justify;
}
.text-align-inline{
display: inline;
}
/* classes for font styles */
.font-style-normal {
font-style: normal;
}
.font-style-italic {
font-style: italic;
}
.font-style-oblique {
font-style: oblique;
}
/* classes for font-weights */
.font-weight-bold {
font-weight: 700;
}
.font-weight-normal {
font-weight: 400;
}
.font-weight-light {
font-weight: 300;
}
/* classes for text-decorations */
.text-decoration-overline{
text-decoration: overline;
}
.text-decoration-line-through{
text-decoration: line-through;
}
.text-decoration-underline{
text-decoration: underline;
}
/* classes for bullet points */
.bullet-point-disc{
display: list-item;
list-style-position: inside;
list-style-type: disc;
}
.bullet-point-circle{
display: list-item;
list-style-position: inside;
list-style-type: circle;
}
.bullet-point-square{
display: list-item;
list-style-position: inside;
list-style-type: square;
}
.bullet-point-numeric{
display: list-item;
list-style-position: inside;
list-style-type: decimal;
}
/* classes for letter spacing */
.letter-spacing--5{
letter-spacing: -5px;
}
.letter-spacing--45{
letter-spacing: -4.5px;
}
.letter-spacing--4{
letter-spacing: -4px;
}
.letter-spacing--35{
letter-spacing: -3.5px;
}
.letter-spacing--3{
letter-spacing: -3px;
}
.letter-spacing--25{
letter-spacing: -2.5px;
}
.letter-spacing--2{
letter-spacing: -2px;
}
.letter-spacing--18{
letter-spacing: -1.8px;
}
.letter-spacing--16{
letter-spacing: -1.6px;
}
.letter-spacing--14{
letter-spacing: -1.4px;
}
.letter-spacing--12{
letter-spacing: -1.2px;
}
.letter-spacing--1{
letter-spacing: -1px;
}
.letter-spacing--08{
letter-spacing: -0.8px;
}
.letter-spacing--06{
letter-spacing: -0.6px;
}
.letter-spacing--04{
letter-spacing: -0.4px;
}
.letter-spacing--02{
letter-spacing: -0.2px;
}
.letter-spacing-0{
letter-spacing: 0;
}
.letter-spacing-02{
letter-spacing: 0.2px;
}
.letter-spacing-04{
letter-spacing: 0.4px;
}
.letter-spacing-06{
letter-spacing: 0.6px;
}
.letter-spacing-08{
letter-spacing: 0.8px;
}
.letter-spacing-1{
letter-spacing: 1px;
}
.letter-spacing-12{
letter-spacing: 1.2px;
}
.letter-spacing-14{
letter-spacing: 1.4px;
}
.letter-spacing-16{
letter-spacing: 1.6px;
}
.letter-spacing-18{
letter-spacing: 1.8px;
}
.letter-spacing-2{
letter-spacing: 2px;
}
.letter-spacing-25{
letter-spacing: 2.5px;
}
.letter-spacing-3{
letter-spacing: 3px;
}
.letter-spacing-35{
letter-spacing: 3.5px;
}
.letter-spacing-4{
letter-spacing: 4px;
}
.letter-spacing-45{
letter-spacing: 4.5px;
}
.letter-spacing-5{
letter-spacing: 5px;
}
/* classes for line heights */
.line-height-0{
line-height: 0!important;
}
.line-height-02{
line-height: 0.2!important;
}
.line-height-04{
line-height: 0.4!important;
}
.line-height-06{
line-height: 0.6!important;
}
.line-height-08{
line-height: 0.8!important;
}
.line-height-1{
line-height: 1!important;
}
.line-height-12{
line-height: 1.2!important;
}
.line-height-14{
line-height: 1.4!important;
}
.line-height-16{
line-height: 1.6!important;
}
.line-height-18{
line-height: 1.8!important;
}
.line-height-2{
line-height: 2!important;
}
/* classes for padding */
.padding-xs{
padding: var(--xs-spacing);
}
.padding-s{
padding: var(--s-spacing);
}
.padding-m{
padding: var(--m-spacing);
}
.padding-l{
padding: var(--l-spacing);
}
.padding-xl{
padding: var(--xl-spacing);
}
.padding-xxl{
padding: var(--xxl-spacing);
}
.padding-xxxl{
padding: var(--xxxl-spacing);
}
/* classes for gaps */
.gap-xs{
gap: var(--xs-spacing);
}
.gap-s{
gap: var(--s-spacing);
}
.gap-m{
gap: var(--m-spacing);
}
.gap-l{
gap: var(--l-spacing);
}
.gap-xl{
gap: var(--xl-spacing);
}
.gap-xxl{
gap: var(--xxl-spacing);
}
.gap-xxxl{
gap: var(--xxxl-spacing);
}
/* roll wrapper styles */
.video-header-roll h1{
margin-bottom: 180px;
}
.roll-wrapper {
position: relative;
}
.roll-wrapper div {
position: absolute;
width: 100%;
opacity: 0;
animation-name: rollText;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
@keyframes rollText {
0% {
opacity: 0;
transform: translateY(10px);
}
10% {
opacity: 0;
transform: translateY(10px);
}
15% {
opacity: 1;
transform: translateY(0px);
}
25% {
opacity: 1;
transform: translateY(0px);
}
30% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 0;
transform: translateY(-10px);
}
}
.slideshow-header-roll{
text-align: var(--text-align);
width: 100%;
position: relative;
line-height: 0;
box-sizing: border-box;
min-height: 67vh;
height: 100%;
max-height: 800px;
}
.slideshow-header-roll h1{
margin-bottom: 180px;
width: 100%;
}
.slideshow-header-span{
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
min-height: 100%;
max-height: 800px;
padding: var(--m-spacing);
width: 100%;
max-width: 2400px;
gap: var(--m-spacing);
z-index: 1;
}
@media screen and (min-width:1000px){
.slideshow-header-span{
left: unset;
}
}
.form{
font-family: var(--body-font);
font-size: var(--body-font-size);
display: flex;
flex-direction: column;
gap: calc(var(--m-spacing) * 0.5);
width: 100%;
max-width: 2400px;
margin: auto;
text-align: var(--text-align);
box-sizing: border-box;
padding: 0;
}
.form input, .form textarea {
box-sizing: border-box;
font-family: var(--body-font);
font-size: var(--body-font-size);
padding: var(--s-spacing);
border: none;
width: 100%;
}
.form input:autofill, .form textarea:autofill{
font-family: var(--body-font);
font-size: var(--body-font-size);
}
.form label{
text-align: var(--text-align);
}
.form-wrapper{
display: grid;
grid-template-rows: auto auto;
padding: var(--m-spacing);
gap: var(--m-spacing);
max-width: 2400px;
margin: 0 auto;
}
.form-wrapper > div{
display: flex;
flex-direction: column;
gap: calc(var(--m-spacing) * 0.5);
margin: auto;
width: 100%;
}
.form-group{
display: flex;
flex-direction: column;
align-items: center;
justify-content: var(--justify-content);
gap: calc(var(--m-spacing) * 0.25);
}
.form-group > *{
margin: var(--margin);
}
.checkbox-label {
display: flex;
align-items: center;
justify-content: center;
margin: var(--margin);
gap: calc(var(--m-spacing )* 0.25);
}
@media screen and (min-width:500px){
.form-wrapper{
padding: var(--xxxl-spacing);
gap: var(--xxl-spacing);
}
.form-wrapper > div{
gap: var(--xxl-spacing);
}
}
@media screen and (min-width:1000px){
.form-wrapper{
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
}
.form-wrapper > div{
margin-top: 0;
}
}
.form input[type=range]{
outline: none;
}
.form input[type=radio]{
display: block;
}
.form input[type=color]{
padding: 0;
height: 100px;
outline: none;
border: none;
}
.df{
display: flex;
}
.g10{
gap: 10px;
}
.m0{
margin: 0;
}
.mixed-interval-checkout-body{
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
background-color: #fafafa;
display: flex;
flex-direction: column;
padding-top: 24px;
}
.mixed-interval-checkout-body .cart-items-wrapper{
margin: auto;
padding: 24px;
width: 100%;
max-width: 600px;
display: flex;
flex-direction: column;
gap: 24px;
}
.mixed-interval-checkout-body .cart-items-wrapper .name{
font-size: 20px;
font-weight: 700;
}
.mixed-interval-checkout-body .cart-items-wrapper .price{
font-size: 20px;
font-weight: 700;
text-align: right;
}
.mixed-interval-checkout-body .cart-items-wrapper .descr{
font-size: 16px;
color: #444444;
}
.mixed-interval-checkout-body .cart-items-wrapper .quantity{
text-align: right;
font-size: 16px;
color: #444444;
}
.mixed-interval-checkout-body .total{
font-size: 24px;
}
.mixed-interval-checkout-body .cart-item-wrapper{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.mixed-interval-checkout-form{
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
display: flex;
font-size: 16px;
flex-direction: column;
gap: 8px;
margin: 24px auto;
width: 100%;
max-width: 600px;
padding: 24px;
box-sizing: border-box;
box-shadow: 5px 10px 25px #eeeeee;
background-color: white;
}
.mixed-interval-checkout-body .remove-cart-item-button{
background-color: transparent;
border: none;
padding: 0;
margin: 8px 0 auto auto;
cursor: pointer;
}
.mixed-interval-checkout-body .remove-cart-item-button svg{
fill: #b9b9b9;
}
.mixed-interval-checkout-body img{
margin: auto;
}
@media screen and (min-width:500px){
.mixed-interval-checkout-form{
padding: 48px;
}
}
@media screen and (min-width:1000px){
.mixed-interval-checkout-body{
flex-direction: row;
align-items: flex-start;
justify-content: center;
}
.mixed-interval-checkout-body .cart-items-wrapper{
margin: 24px auto;
gap: 56px;
}
}
.mixed-interval-checkout-form input, .mixed-interval-checkout-form select{
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 16px;
color: #1a1a1a;
padding: 8px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #eeeeee;
box-shadow: 1px 2px 5px #eeeeee;
}
.mixed-interval-checkout-form label{
color: #353535;
}
.mixed-interval-checkout-form button{
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 16px;
padding: 8px 16px;
border-radius: 5px;
background-color: #625afa;
color: white;
border: 1px solid #000000;
transition: background-color 0.3s ease-in-out;
}
.mixed-interval-checkout-form button:hover{
background-color: #3932c0;
}
.mixed-interval-checkout-body .payment-icons{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.checkout-mx-error{
position: fixed;
top: 0;
width: 100%;
margin: auto;
color: darkred;
padding: 25px;
background-color: white;
text-align: center;
}
.shipping-package{
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 25px;
padding-bottom: 25px;
border-bottom: 1px solid var(--dark);
}
.shipping-package h6{
font-family: var(--body-font);
font-size: var(--body-font-size);
}
.loading {
display: flex;
align-items: center;
flex-direction: column;
gap: 16px;
font-size: 1rem;
color: var(--black);
margin: auto;
}
.loading .spinner {
width: 22px;
height: 22px;
border: 3px solid var(--light);
border-top-color: var(--mid);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.loading .large-spinner {
width: 44px;
height: 44px;
border: 6px solid var(--light);
border-top-color: var(--mid);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.loading .loading-text{
font-size: 24px;
color: white;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.editing-link-wrapper > span{
background-color: #FFFFFF;
color: #000000;
}