Files
Commerce/custom/css/custom.css
2025-02-13 11:23:15 +01:00

2008 lines
40 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
.picture_select_label > input[type="checkbox"] {
display: none;
}
.picture_select_label > input[type="radio"] {
display: none;
}
.picture_select {
display: block;
position: relative;
margin: 10px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.picture_select::before {
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid #03337a;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
z-index:1
}
.picture_select img {
height: 50px;
width: 50px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked+.picture_select {
border-color: #ddd;
}
.product_category_nav {
display: flex;
flex-grow: 1;
flex-basis: 0;
justify-content: center;
align-items: center;
}
.product_category_nav a {
white-space: nowrap;
text-decoration: none;
color: #555555;
padding: 10px 10px;
margin: 0 10px;
border: 1px solid #555555;
border-radius: 5px;
}
:checked+.picture_select::before {
content: "✓";
background-color: #03337a;
transform: scale(1);
}
:checked+.picture_select img {
transform: scale(0.9);
box-shadow: 0 0 5px #333;
}
.container.highlight-section {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
-ms-flex-align: center;
padding: 48px 24px;
min-height: 40vh;
background-color: #ececec;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
align-items: center;
}
h2.title-message {
margin-top: 0;
margin-bottom: 0;
max-width: 800px;
text-align: center;
font-size: 36px;
font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h2.neutral-cover-heading {
margin-top: 0;
margin-bottom: 0;
letter-spacing: -1px;
font-weight: 500;
font-size: 36px;
font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4;
}
h4.neutral-headline-footer {
margin-top: 0;
margin-bottom: 0;
text-align: left;
font-weight: 500;
font-size: 20px;
font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4;
}
h4.neutral-feature-title-1 {
margin-top: 16px;
margin-bottom: 16px;
text-align: left;
font-weight: 500;
font-size: 20px;
font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4;
}
p.paragraph.neutral-paragraph-text {
margin-top: 16px;
color: #666;
text-align: left;
font-weight: 300;
font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 25px;
}
p.paragraph.direction-footer {
margin-top: 0;
margin-bottom: 16px;
color: #666;
text-align: right;
font-weight: 400;
font-size: 14px;
font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 25px;
}
p.paragraph.neutral-paragraph-text-1 {
margin-top: 16px;
color: #000;
text-align: left;
font-weight: 300;
font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 25px;
}
span.text-element.slider-text {
position: absolute;
top: 45%;
right: 0;
bottom: 45%;
left: 0;
padding: 8px 12px;
color: #f2f2f2;
text-align: center;
text-transform: uppercase;
font-weight: 600;
font-size: 48px;
font-family: 'Syne', sans-serif;
line-height: 1;
}
a.link-text.neutral-nav-link-menu {
padding: 4px 16px;
color: #000;
text-align: center;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 600;
font-size: 14px;
font-family: 'Fahkwang', sans-serif;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: .25s;
-moz-transition-duration: .25s;
-o-transition-duration: .25s;
transition-duration: .25s;
}
a.link-text.logo-navbar-link {
padding: 4px 16px 4px 0;
color: #000;
text-align: center;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 800;
font-size: 26px;
font-family: 'Fahkwang', sans-serif;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: .25s;
-moz-transition-duration: .25s;
-o-transition-duration: .25s;
transition-duration: .25s;
}
a.link-text.neutral-text-link {
color: #000;
text-decoration: none;
font-weight: 500;
font-size: 16px;
font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
-o-transition-duration: .2s;
transition-duration: .2s;
}
a.link-text.neutral-nav-link-footer {
margin-bottom: 16px;
color: #666;
text-align: right;
text-decoration: none;
font-weight: 400;
font-size: 14px;
font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: .25s;
-moz-transition-duration: .25s;
-o-transition-duration: .25s;
transition-duration: .25s;
}
a.link-text.nav-link-footer {
margin-bottom: 16px;
color: #666;
text-align: right;
text-decoration: none;
font-weight: 400;
font-size: 14px;
font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: .25s;
-moz-transition-duration: .25s;
-o-transition-duration: .25s;
transition-duration: .25s;
}
a.link-text.neutral-text-link-1 {
color: #000;
text-decoration: none;
font-weight: 500;
font-size: 16px;
font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
-o-transition-duration: .2s;
transition-duration: .2s;
}
a.link-text.neutral-nav-link-menu:hover {
color: #7c7737;
}
a.link-text.logo-navbar-link:hover {
color: #b5b5b5;
}
a.link-text.neutral-text-link:hover {
-webkit-transform: translateX(2px);
-moz-transform: translateX(2px);
-o-transform: translateX(2px);
transform: translateX(2px);
}
a.link-text.neutral-nav-link-footer:hover {
color: #12141d;
}
a.link-text.nav-link-footer:hover {
color: #12141d;
}
a.link-text.neutral-text-link-1:hover {
-webkit-transform: translateX(2px);
-moz-transform: translateX(2px);
-o-transform: translateX(2px);
transform: translateX(2px);
}
/* Layout Elements */
.container.neutral-navbar {
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: 0;
z-index: 1000;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
-ms-flex-align: start;
margin-right: auto;
margin-left: auto;
padding: 24px;
max-width: none;
width: auto;
border-bottom-width: 0;
border-bottom-style: solid;
background-color: transparent;
background-image: none;
background-attachment: scroll;
background-position: left top;
background-clip: border-box;
background-origin: padding-box;
background-size: 0 0;
background-repeat: no-repeat;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-moz-box-align: start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background-blend-mode: normal;
}
.container.navigation-links {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
-ms-flex-align: center;
width: 100%;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
}
.container.space-img-background-section {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
-ms-flex-align: center;
min-height: 85vh;
background-image: url('../pictures/PHOTO-2023-02-17-19-33-19%202.jpg');
background-attachment: scroll;
background-position: left top;
background-clip: border-box;
background-origin: padding-box;
background-size: cover;
background-repeat: repeat;
background-blend-mode: normal;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
}
.container.space-big-text-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: start;
padding-right: 24px;
padding-left: 24px;
max-width: 1600px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-moz-box-align: start;
align-items: flex-start;
}
.container.neutral-cover-section-1 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
-ms-flex-align: center;
padding: 48px 24px;
min-height: 50vh;
background-color: #e9e8e7;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
.container.neutral-two-columns {
display: grid;
-ms-flex-pack: center;
-ms-flex-align: center;
margin-right: 0;
margin-left: 0;
padding-left: 0;
max-width: 1280px;
width: 100%;
grid-template-columns: repeat(2 , 1fr);
grid-template-rows: auto;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
justify-items: center;
grid-row-gap: 48px;
grid-column-gap: 24px;
}
.container.neutral-container-picture-wrap {
overflow: hidden;
border-radius: 8px;
}
.container.neutral-column-text-right {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
-ms-flex-align: start;
margin-left: 24px;
max-width: 800px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-moz-box-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
.container.neutral-features-section-4 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
-ms-flex-align: center;
padding: 96px 24px;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
.container.neutral-footer-section-1 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
-ms-flex-align: center;
padding: 96px 24px;
background-color: #e2e1df;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
.container.neutral-footer-three-columns {
display: grid;
max-width: 1280px;
grid-template-columns: 50% repeat(2 , 25%);
grid-template-rows: auto;
grid-template-areas: 'description links direction';
}
.container.description-logos-footer {
grid-area: description;
}
.container.social-footer-wrapper {
margin-top: 16px;
}
.container.container-links-footer-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding-right: 16px;
padding-left: 16px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
grid-area: links;
}
.container.container-direction-footer {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: start;
-ms-flex-align: end;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-moz-box-align: end;
align-items: flex-end;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-moz-box-pack: start;
justify-content: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
grid-area: direction;
}
.container.container-telephone-footer {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}
.container.container-1 {
min-height: 100px;
}
.container.t-column {
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 12.5%;
}
.container.t-row {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container.mySlides {
position: relative;
display: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container.lightbox-wrapper {
position: relative;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;
padding-top: 0;
min-width: 60px;
min-height: auto;
max-width: 1400px;
width: 60%;
}
.container.neutral-features-section-4-1 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
-ms-flex-align: center;
padding: 96px 24px;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
.container.neutral-three-columns-1 {
display: grid;
margin-right: auto;
margin-left: auto;
max-width: 1280px;
grid-template-columns: repeat(3 , 1fr);
grid-template-rows: auto;
grid-row-gap: 48px;
grid-column-gap: 24px;
}
.container.neutral-feature-wrapper-1 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: start;
-ms-flex-align: center;
max-width: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-moz-box-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
}
.container.container-feature-icon-wrapper-1 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
-ms-flex-align: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
.container#about {
background-image: url('../pictures/Morval_Andelot_Morval.jpg');
}
a.glyph.mobile-nav-button {
display: none;
}
.html-element.navigation-code {
display: none;
}
div.responsive-picture.neutral-picture {
margin-bottom: 0;
background-image: url('../pictures/PHOTO-2023-03-12-22-01-14.jpg');
background-attachment: scroll;
background-position: left top;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
background-repeat: repeat;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: .25s;
-moz-transition-duration: .25s;
-o-transition-duration: .25s;
transition-duration: .25s;
background-blend-mode: normal;
}
a.social-image.neutral-social-icon {
margin-right: 8px;
margin-left: 8px;
padding: 4px;
max-width: 24px;
border-radius: 50px;
background-color: #0064fa;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: .25s;
-moz-transition-duration: .25s;
-o-transition-duration: .25s;
transition-duration: .25s;
}
a.social-image.left-align.neutral-social-icon {
margin-left: 0;
}
span.glyph.icon-footer {
margin-right: 4px;
color: #666;
}
li.list-item {
color: #666;
font-weight: 300;
font-family: 'mont', sans-serif;
line-height: 18px;
}
li.list-item.list-item-1 {
color: #666;
line-height: 25px;
}
a.responsive-picture.mini-photo {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;
min-width: 60px;
width: 60%;
opacity: .8;
}
a.glyph.next {
position: absolute;
top: 45%;
right: 0;
margin-top: 0;
padding: 16px;
border-top-left-radius: 5px;
color: #fff;
font-size: 24px;
line-height: 20px;
cursor: pointer;
}
a.glyph.prev {
position: absolute;
top: 45%;
margin-top: 0;
padding: 16px;
border-radius: 5px;
background-color: transparent;
color: #fff;
font-size: 24px;
line-height: 20px;
cursor: pointer;
}
div.responsive-picture.picture-1 {
margin-right: auto;
margin-left: auto;
min-width: 100px;
width: 100%;
}
span.glyph.neutral-feature-icon-1 {
margin-bottom: 8px;
color: #0c408d;
text-align: center;
font-size: 40px;
}
div.responsive-picture.neutral-picture:hover {
-webkit-transform: scaleX(1.04) scaleY(1.04);
-moz-transform: scaleX(1.04) scaleY(1.04);
-o-transform: scaleX(1.04) scaleY(1.04);
transform: scaleX(1.04) scaleY(1.04);
}
a.social-image.neutral-social-icon:hover {
-webkit-transform: translateY(-2px);
-moz-transform: translateY(-2px);
-o-transform: translateY(-2px);
transform: translateY(-2px);
}
a.responsive-picture.mini-photo:hover {
opacity: 1;
}
a.glyph.next:hover {
border-top-left-radius: 0;
background-color: #000;
}
a.glyph.prev:hover {
border-radius: 0;
background-color: #000;
}
a.responsive-picture.mini-photo:active {
opacity: 1;
}
@media screen and (max-width: 80rem) {
/* Layout Elements */
.container.neutral-two-columns {
grid-template-columns: repeat(2 , 50%);
grid-template-rows: auto;
}
}
@media screen and (max-width: 60rem) {
/* Text Elements */
a.link-text.neutral-nav-link-menu {
padding-right: 24px;
padding-left: 24px;
}
a.link-text.logo-navbar-link {
padding-right: 24px;
padding-left: 24px;
}
/* Layout Elements */
.container.container-8 {
margin-top: 16px;
}
.container.space-img-background-section {
background-attachment: scroll;
}
.container.neutral-two-columns {
grid-template-columns: 1fr;
grid-template-rows: repeat(2 , auto);
justify-items: center;
}
.container.neutral-column-text-right {
margin-top: 16px;
margin-left: 0;
}
.container.neutral-footer-three-columns {
grid-template-areas: 'description' 'links' 'direction';
grid-template-rows: repeat(3 , auto);
grid-template-columns: 1fr;
grid-row-gap: 48px;
grid-column-gap: 24px;
}
.container.social-footer-wrapper {
margin-top: 16px;
}
.container.neutral-three-columns-1 {
grid-template-rows: repeat(3 , auto);
grid-template-columns: auto;
}
}
@media screen and (max-width: 48rem) {
/* Text Elements */
p.paragraph.direction-footer {
text-align: left;
}
a.link-text.neutral-nav-link-menu {
display: block;
margin-top: 0;
margin-right: auto;
margin-left: auto;
padding: 24px;
width: 100%;
color: #26261e;
text-align: center;
font-weight: 400;
font-size: 20px;
font-family: 'Tenor Sans', sans-serif;
}
a.link-text.logo-navbar-link {
display: block;
margin-top: 0;
margin-right: auto;
margin-left: auto;
padding: 24px;
width: 100%;
color: #26261e;
text-align: center;
font-weight: 700;
font-size: 24px;
font-family: 'Tenor Sans', sans-serif;
}
a.link-text.neutral-text-link {
margin-top: 8px;
}
a.link-text.neutral-nav-link-footer {
text-align: left;
}
a.link-text.nav-link-footer {
text-align: left;
}
a.link-text.neutral-text-link-1 {
margin-top: 8px;
}
a.link-text.neutral-nav-link-menu:hover {
color: #7c7737;
}
/* Layout Elements */
.container.neutral-navbar {
position: fixed;
z-index: 1000;
-ms-flex-pack: end;
-ms-flex-align: start;
margin-right: 0;
margin-left: 0;
padding-top: 16px;
padding-bottom: 16px;
max-height: 80px;
background-color: transparent;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-moz-box-align: start;
align-items: flex-start;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-moz-box-pack: end;
justify-content: flex-end;
}
.container.navigation-links {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 500;
visibility: hidden;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
-ms-flex-align: center;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
width: 100%;
background-color: #f9f9f9;
opacity: 0;
-webkit-transition-duration: .3s;
-moz-transition-duration: .3s;
-o-transition-duration: .3s;
transition-duration: .3s;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
.container.neutral-two-columns {
display: grid;
margin-right: auto;
margin-left: auto;
}
.container.container-links-footer-wrapper {
margin-top: 24px;
padding-left: 0;
}
.container.container-direction-footer {
-ms-flex-align: start;
margin-top: 24px;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-moz-box-align: start;
align-items: flex-start;
}
.container.neutral-three-columns-1 {
grid-template-columns: auto;
grid-template-rows: repeat(3 , auto);
}
.container.navigation-links.show-menu {
top: 0;
visibility: visible;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
opacity: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
}
a.glyph.mobile-nav-button {
display: block;
color: #1d1d1d;
text-align: right;
font-size: 34px;
line-height: 1;
}
a.glyph.close-button-cross.mobile-nav-button {
position: absolute;
top: 0;
right: 0;
left: auto;
padding-top: 20px;
padding-right: 24px;
color: #26261e;
}
div.responsive-picture.neutral-picture {
margin-bottom: 0;
max-width: 800px;
}
}
@media screen and (max-width: 35.3125rem) {
/* Text Elements */
h2.neutral-cover-heading {
font-size: 6.52vw;
}
/* Layout Elements */
.container.neutral-cover-section-1 {
padding-right: 16px;
padding-left: 16px;
}
.container.neutral-features-section-4 {
padding-right: 16px;
padding-left: 16px;
}
.container.neutral-footer-section-1 {
padding-right: 16px;
padding-left: 16px;
}
.container.neutral-footer-three-columns {
grid-template-areas: 'description description' 'links links' 'direction direction';
grid-template-rows: repeat(3 , auto);
}
.container.neutral-features-section-4-1 {
padding-right: 16px;
padding-left: 16px;
}
}
@media screen and (max-width: 20rem) {
/* Text Elements */
h2.neutral-cover-heading {
font-size: 20px;
}
h4.neutral-headline-footer {
text-align: left;
}
h4.neutral-feature-title-1 {
text-align: left;
}
}
blockquote,body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,select,td,textarea,th,ul {
font-family: 'mont', 'Helvetica Neue',Helvetica,Arial,sans-serif;
}
body {
min-height: 100vh;
position: relative
}
.form-container,.link-container,[class*=container] {
min-width: 10px
}
.link-container,label.label-container {
display: block
}
.responsive-picture {
width: 65%;
margin:auto;
overflow: hidden;
display: block
}
.responsive-picture picture {
line-height: 0;
display: block
}
.responsive-picture img {
width: 100%;
height: 100%;
border-radius: 5px;
}
.placeholder {
background-color: lightgrey;
text-align: center;
padding: 10px 0
}
h3.smallhero-header {
font-size: 1.25em;
color: #464646
}
h3.smallhero-tagline {
color: #646464;
font-style: normal;
padding: 0
}
.placeholder-hero {
background-color: lightgrey;
text-align: left;
padding: 10px 0 10px 20px
}
h1.hero-header {
color: #464646
}
p.hero-tagline {
color: #646464;
font-style: normal;
padding: 0
}
code {
font-family: Consolas,monaco,monospace
}
.social-element {
display: inline-block;
text-align: center
}
.social-element a.social-label {
text-align: center;
font-family: Georgia,Times,'Times New Roman',serif;
display: block
}
.social-image {
background-color: #525252;
border-radius: 3px;
max-width: 32px;
display: inline-block
}
.social-image img {
margin: 0 auto;
display: block;
width: 100%;
height: 100%
}
a.glyph,span.glyph {
display: block;
text-decoration: none
}
a.glyph i,span.glyph i {
line-height: 1
}
.image-for-button {
height: auto;
overflow: hidden;
width: 100%;
max-width: 24px;
display: inline-block;
vertical-align: inherit
}
.image-for-button picture {
max-width: none;
height: auto;
display: block;
line-height: 0
}
.image-for-button img {
width: 100%;
height: 100%
}
button.button-glyph,button.button-image {
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif
}
a.glyph-for-button,span.glyph-for-button {
font-size: 22px;
text-decoration: none
}
a.glyph-for-button i,span.glyph-for-button i {
line-height: 1
}
a[class*=link-button] .image-for-button {
vertical-align: middle
}
button[data-coffeebuilder-button][data-disabled],button[disabled] {
opacity: .25;
cursor: auto
}
.responsive-video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%
}
.responsive-video.square {
padding-bottom: 120%;
max-width: initial
}
.responsive-video embed,.responsive-video iframe,.responsive-video object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
video {
width: 50%;
background-color: #000
}
audio {
display: inline-block;
box-sizing: border-box;
background-color: transparent;
padding: 0 20px 30px;
height: 95px;
width: 50%;
margin: 10px
}
.responsive-map {
position: relative;
overflow: hidden;
max-width: 100%;
width: 100%;
height: 350px;
min-height: 50px;
background-color: #dcdcdc
}
.responsive-map embed,.responsive-map iframe,.responsive-map object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.rule {
padding: 5px 0;
width: 100%;
margin: 7px 0
}
.rule hr {
margin: 0;
padding: 0;
border: none;
border-top: 1px solid #ddd;
width: 100%
}
form.paypal-button,form.paypal-image {
display: inline-block;
padding: 0;
overflow: hidden
}
form.paypal-button {
background-color: silver
}
form.paypal-button button {
padding: .5em 1em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
border-radius: 0;
background: 0 0;
line-height: 1;
color: inherit;
cursor: inherit;
display: block;
margin: 0;
width: 100%;
height: 100%
}
form.paypal-image input[type=image] {
width: 100%;
margin: 0
}
textarea {
resize: none
}
.label-container span.text-element {
display: inline-block;
font-size: 1em
}
.bg-full-screen-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -100;
overflow: hidden
}
video.full-screen-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -100;
width: 100%;
height: 100%;
background-color: transparent;
-o-object-fit: cover;
object-fit: cover
}
.bg-content-size-container {
position: relative;
display: block;
overflow: hidden;
margin: 0;
min-height: 100px;
width: 100%
}
video.content-size-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background-color: transparent;
-o-object-fit: cover;
object-fit: cover
}
label.checkbox>[type=checkbox],label.radio>[type=radio] {
margin-right: .5rem
}
.container.sd-four-cols,.container.sd-three-cols,.container.sd-two-cols {
display: grid;
padding-left: .75rem;
padding-right: .75rem;
grid-column-gap: 1.5rem
}
.container.sd-two-cols {
grid-template-columns: repeat(2,1fr)
}
.container.sd-three-cols {
grid-template-columns: repeat(3,1fr)
}
.container.sd-four-cols {
grid-template-columns: repeat(4,1fr)
}
.icon {
background: url('./MORVALFavicon.svg');
height: 20px;
width: 20px;
display: block;
/* Other styles here */
}
a.link-button.action-btn {
display: block;
margin-top: 24px;
margin-right: auto;
margin-left: auto;
padding: 16px 32px;
max-width: 250px;
background-color: #03337a;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
background-image: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
background-attachment: scroll;
background-position: left top;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
background-repeat: repeat;
color: #fff;
text-align: center;
text-decoration: none;
text-transform: none;
font-weight: 500;
background-blend-mode: lighten;
border-radius: 5px;
}
a.link-button {
color: #010101;
font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.breadcrum p{
font-size: 0.8em;
display: inline;
}
.breadcrum a{
text-decoration: none;
color: #4a90e2;
cursor: pointer;
font-family: inherit;
font-size: 0.8em;
}
.img_config {
border-radius:5px;
width: 25px;
height: 25px;
margin: 1px;
}
.footer-low {
text-align: center;
border-top: 1px solid #fff;
padding: 10px;
background-color: #e2e1df;
}
.footer-low a{
text-decoration: none;
color: #555555;
cursor: pointer;
font-family: inherit;
font-size: 0.8em;
}
.footer_logo {
max-width: 100px;
}
.logos img {
mix-blend-mode: multiply;
margin-left: 20px;
margin-right: 20px;
max-width: 90%;
vertical-align: middle;
border-style: none;
}
.home_text p {
margin-top: 16px;
color: #666;
text-align: left;
font-weight: 300;
font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 25px;
}
.home_text {
padding: 10px;
font-style: italic;
}
.stock p {
font-size: 10px;
margin: auto;
padding: 5px;
width: fit-content;
border-radius: 5px;
color: white;
}
.stock p:before {
content : '\1F4E6';
}
.stock_product p {
font-size: 10px;
font-weight: normal;
margin: 10px;
padding: 0px;
}
.stock_product p:before {
content : '\1F4E6';
}
.delivery p {
font-size: 10px;
font-weight: normal;
margin: 10px;
padding: 0px;
}
.delivery p:before {
content : '\26DF';
}
#simple-cookie-consent {
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
resize: vertical;
overflow: auto;
z-index: 999999999;
background: rgba(0, 0, 0, 0.7);
}
#simple-cookie-consent .cookie-consent-container {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
margin: -100px auto 0;
background: #fff;
padding: 20px;
max-width: 500px;
}
.cookie-consent-notice h4{
font-family: 'good';
font-size:24px;
}
#simple-cookie-consent .cookie-consent-selection {
text-align: right;
}
#simple-cookie-consent input {
border: none;
padding: 10px 20px;
margin: 10px 0 0 10px;
background: none;
font-size: 1.1em;
}
#simple-cookie-consent input.cookie-consent-allow {
background-color: #04aa6d;
color: #fff;
}
#simple-cookie-consent input.cookie-consent-allow:focus,
#simple-cookie-consent input.cookie-consent-allow:hover {
background-color: #059862;
cursor: pointer;
}
#simple-cookie-consent input.cookie-consent-deny {
padding: 5px 0;
font-size: 0.9em;
opacity: 0.8;
}
#simple-cookie-consent input.cookie-consent-deny:focus,
input.cookie-consent-deny:hover {
opacity: 1;
cursor: pointer;
}
#simple-cookie-consent hr {
margin: 15px 0;
}
a.action-btn:after {
content: ' ';
display: inline-block;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
height: 8px;
width: 8px;
transform: rotate(-45deg);
margin-left: 1rem;
}
@media screen and (max-width: 600px){
.container.highlight-section {
min-height: 25vh;
}
h2.title-message {
margin-top: 0;
margin-bottom: 0;
max-width: 800px;
text-align: center;
font-size: 20px;
font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
}
#banner {
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
resize: vertical;
overflow: auto;
z-index: 999999999;
background: rgba(0, 0, 0, 0.7);
}
#banner .banner_container {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
margin: -100px auto 0;
background: #fff;
padding: 20px;
max-width: 500px;
}
.banner_notice h4{
font-family: 'gerb';
font-size:24px;
color:#fda104;
text-shadow: 0 0 1px #12141d;
}
#banner .banner_selection {
text-align: right;
}
#banner input {
border: none;
padding: 10px 20px;
margin: 10px 0 0 10px;
background: none;
font-size: 1.1em;
}
#banner input.banner_allow {
background-color: #03337a;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
background-image: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
color: #fff;
}
#banner input.banner_allow:focus,
#banner input.banner_allow:hover {
cursor: pointer;
}
#banner input.banner_deny {
padding: 5px 0;
font-size: 0.9em;
opacity: 0.8;
font-weight: 600;
}
#banner input.banner_deny:focus,
input.banner_deny:hover {
opacity: 1;
cursor: pointer;
}
#banner hr {
margin: 15px 0;
}
/* Main Container */
.filtersection {
display: flex;
margin: 0 auto;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
background: white;
border-radius: 12px;
margin-bottom: 50px;
padding: 10px;
width: 95%;
}
/* Filter Section */
.filter-section {
width: 250px;
padding: 20px;
border-right: 1px solid #e0e0e0;
}
.filter-section h2 {
margin-bottom: 15px;
color: #333;
}
.filter-group {
margin-bottom: 20px;
}
.filter-group label {
margin-bottom: 10px;
}
.filter-group input[type="checkbox"] {
margin-right: 10px;
}
/* Responsive Design */
@media (max-width: 768px) {
.filtersection {
flex-direction: column;
text-align: center;
}
.filter-section {
width: 100%;
border-right: none;
border-bottom: 1px solid #e0e0e0;
}
}
.news-section {
padding: 80px 20px;
background-color: #f8f8f8;
}
.news-container {
max-width: 1200px;
margin: 0 auto;
}
.news-header {
text-align: center;
margin-bottom: 50px;
}
.news-header h2 {
font-size: 2rem;
margin-bottom: 15px;
font-family: 'gerb', sans-serif;
}
.news-header p {
color: #666;
font-size: 1.1rem;
}
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 50px;
}
.news-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: box-shadow 0.3s ease;
}
.news-card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.news-card-content {
padding: 20px;
}
.news-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.news-date {
color: #666;
font-size: 0.9rem;
}
.news-tag {
background: #e6f0ff;
color: #0066cc;
padding: 4px 12px;
border-radius: 15px;
font-size: 0.8rem;
}
.news-title {
font-size: 1.25rem;
margin-bottom: 15px;
color: #333;
font-weight: 600;
}
.news-preview {
color: #666;
margin-bottom: 20px;
line-height: 1.5;
}
.read-more {
color: #0066cc;
text-decoration: none;
display: inline-flex;
align-items: center;
font-weight: 500;
}
.read-more:hover {
color: #0052a3;
}
.read-more::after {
content: '>';
margin-left: 5px;
}
.view-all-container {
text-align: center;
}
.view-all-btn {
background: #0066cc;
color: white;
padding: 12px 24px;
border-radius: 4px;
text-decoration: none;
display: inline-block;
transition: background-color 0.3s ease;
}
.view-all-btn:hover {
background: #0052a3;
}
@media (max-width: 1024px) {
.news-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.news-grid {
grid-template-columns: 1fr;
}
}