@charset "UTF-8";

@font-face {
font-family: "FontAwesome";
src: url(//www.wafabbil.se/wp-content/themes/wafab-theme/dist/fonts/fontawesome/fontawesome-webfont.eot?v=4.7.0);
src: url(//www.wafabbil.se/wp-content/themes/wafab-theme/dist/fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.7.0) format("embedded-opentype"), url(//www.wafabbil.se/wp-content/themes/wafab-theme/dist/fonts/fontawesome/fontawesome-webfont.woff2?v=4.7.0) format("woff2"), url(//www.wafabbil.se/wp-content/themes/wafab-theme/dist/fonts/fontawesome/fontawesome-webfont.woff?v=4.7.0) format("woff"), url(//www.wafabbil.se/wp-content/themes/wafab-theme/dist/fonts/fontawesome/fontawesome-webfont.ttf?v=4.7.0) format("truetype"), url(//www.wafabbil.se/wp-content/themes/wafab-theme/dist/fonts/fontawesome/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular) format("svg");
font-weight: normal;
font-style: normal;
}
@-webkit-keyframes slideright {
0% {
opacity: 0;
transform: translate3d(-20px, 0, 0);
}
10% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
90% {
opacity: 1;
transform: scaleY(1);
}
100% {
transform: scaleY(0);
}
}
@keyframes slideright {
0% {
opacity: 0;
transform: translate3d(-20px, 0, 0);
}
10% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
90% {
opacity: 1;
transform: scaleY(1);
}
100% {
transform: scaleY(0);
}
}
*, *:after, *:before {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.clear {
clear: both;
*zoom: 1;
}
.clear:before {
content: "";
display: table;
}
.clear:after {
content: "";
display: table;
}
body {
font-family: "Catamaran", sans-serif;
font-size: 16px;
font-weight: 400;
color: #222;
overflow-x: hidden;
position: relative;
}
body .wrapper {
max-width: 1280px;
width: 94%;
margin: 0 auto;
padding: 0px 0;
position: relative;
}
body .wideWrapper {
max-width: 1400px;
width: 94%;
margin: 0 auto;
padding: 0px 0;
position: relative;
}
body .smallWrapper {
max-width: 930px;
width: 94%;
margin: 0 auto;
padding: 0px 0;
position: relative;
}
body .flexRowWrapper {
display: flex;
justify-content: space-between;
}
body .flexColumnWrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.arrow {
position: relative;
}
.arrow:before {
content: "";
border-right: solid #fff 1px;
border-top: solid #fff 1px;
transform: translate(-100%, -50%) rotate(45deg);
width: 7px;
height: 7px;
position: absolute;
right: calc(-30px - 8px);
top: 50%;
transition: 0.5s;
}
.arrow:after {
content: "";
border-bottom: solid #fff 1px;
width: 20px;
height: 0;
position: absolute;
right: -30px;
top: 50%;
transform: translateY(-50%);
transition: 0.5s;
}
.titleFix {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
h1, h2, h3, h4 {
font-weight: 400;
color: #222;
font-family: "Catamaran", sans-serif;
}
h1 {
margin: 0 0 10px;
font-size: 3.5em;
line-height: 70px;
font-weight: 600;
}
h2 {
margin: 0 0 8px;
font-size: 3.4em;
line-height: 44px;
}
h3 {
margin: 0 0 6px;
font-size: 2.2em;
line-height: 29px;
}
h4 {
margin: 0 0 5px;
font-size: 22px;
line-height: 26px;
}
h5 {
margin: 0 0 3px;
font-size: 20px;
line-height: 24px;
}
h6 {
margin: 0 0 2px;
font-size: 18px;
line-height: 22px;
}
p {
margin: 0 0 10px 0; }
i, em {
font-style: italic;
}
blockquote {
font-style: italic;
margin: 0 0 10px 20px;
}
b, strong {
font-weight: bold;
}
a {
color: #37444D;
text-decoration: none;
transition: color 0.5s;
}
a:hover {
text-decoration: none;
color: #06141F;
}
a:focus {
outline: 0;
}
a:active {
outline: 0;
}
ul {
margin: 0 0 10px 35px;
}
ul li {
list-style: disc;
padding: 3px 0;
}
ol {
margin: 0 0 10px 35px;
}
ol li {
list-style: decimal;
padding: 0 0;
}
img {
opacity: 1;
transition: opacity 0.2s;
max-width: 100%;
height: auto;
}
img[data-src] {
opacity: 0;
}
img.alignleft {
float: left;
margin: 10px 10px 10px 0;
}
img.alignright {
float: right;
margin: 10px 0 10px 10px;
}
img.aligncenter {
display: block;
margin: 10px auto;
}
.meta-info {
float: left;
width: 100%;
margin: 0 0 5px;
font-size: small;
}
.function_message {
width: 100%;
opacity: 0;
-webkit-animation-name: slideright;
animation-name: slideright;
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
margin: 0 0 15px;
transition: all 0.2s;
position: absolute;
top: 100%;
left: 0;
right: 0;
transform-origin: top;
}
.function_message .inner {
width: 100%;
padding: 10px 20px 10px 13px;
text-align: left;
}
.function_message .inner p {
margin: 0;
}
.function_message .inner p .fa {
margin: 0 5px 0 0;
}
.function_message .inner.success {
color: #3c763d;
background-color: #dff0d8;
border-left: solid 5px #559a1c;
}
.function_message .inner.failed {
color: #a94442;
background-color: #f2dede;
border-left: solid 5px #ca3750;
}
.function_message .inner.info {
color: #31708f;
background-color: #d9edf7;
border-left: solid 5px #18a7c3;
}
.function_message.light_message {
position: inherit;
top: inherit;
right: inherit;
}
.function_message.light_message .inner {
margin: 15px 0;
}
#breadcrumbs {
float: left;
width: 100%;
padding: 20px 0 10px;
margin: 0 0 20px;
font-size: small;
border-bottom: solid 1px #E0E0E0;
font-weight: 600;
color: #37444D;
}
#breadcrumbs span {
color: #000;
}
#breadcrumbs span span a {
font-weight: normal;
opacity: 0.8;
}
#breadcrumbs span span span {
font-weight: bold;
opacity: 1;
}
.btn {
border: 2px solid;
border-radius: 30px;
padding: 12px 50px;
font-family: "Catamaran", sans-serif;
transition: all 0.3s;
}
.btn.trans-bg {
background: transparent;
}
.btn.white-border {
border-color: #fff;
}
.btn.white-hover:hover {
background: rgba(255, 255, 255, 0.2);
}
.btn.red-bg {
background: #f4303e;
}
.btn.red-border {
border-color: #f4303e;
}
.btn.red-hover:hover {
background: #f54855;
border-color: #f54855;
}
.btn.redopac-hover:hover {
background: rgba(244, 48, 62, 0.2) !important;
}
.btn.darkGray-bg {
background: #06141F;
}
.btn.darkGray-border {
border-color: #06141F;
}
.btn.darkGray-hover:hover {
background: #0a2234;
border-color: #0a2234;
}
.btn.white {
color: #fff;
}
.btn.gray {
color: #333;
}
.btn.fullwidth {
display: block;
width: 100%;
padding: 12px 36px;
}
.btn.text-align-left {
text-align: left;
}
.btn.mb10 {
margin-bottom: 10px;
}
.btn.mb20 {
margin-bottom: 20px;
}
.btn.center {
display: inline-block !important;
float: none !important;
}
.center_btn {
display: inline-block;
width: 100%;
text-align: center;
}
input, textarea, select {
resize: none;
outline: 0;
border: solid 1px #E0E0E0;
padding: 10px 8px;
font-family: "Catamaran", sans-serif;
transition: all 0.3s;
font-size: 1em;
}
input.error, textarea.error, select.error {
background: #ffd8e1;
border: solid 1px #E26884 !important;
}
input.error:-webkit-autofill, textarea.error:-webkit-autofill, select.error:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #ffd8e1 inset;
}
input.valid, textarea.valid, select.valid {
background: #eaffe6;
border: solid 1px #eaffe6 !important;
}
input.valid:-webkit-autofill, textarea.valid:-webkit-autofill, select.valid:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #eaffe6 inset;
}
input:focus, textarea:focus, select:focus {
outline: 0;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
button {
border: none;
background-color: #06141F;
color: #fff;
font-family: "Catamaran", sans-serif;
font-weight: 500;
padding: 10px 25px;
font-size: 1.1em;
transition: 0.3s background-color;
}
button:focus {
outline: 0;
}
button:hover {
cursor: pointer;
background-color: #37444D;
}
.form {
padding: 30px 0;
}
.form .row {
width: 100%;
margin-bottom: 10px;
}
.form .row .field {
width: 49%;
}
.form .row .field label {
margin-bottom: 0px;
font-size: 18px;
}
.form .row .field label.error {
margin-bottom: 0;
}
.form .row .field.full {
width: 100%;
}
.form .row .field.gdpr {
justify-content: flex-start;
position: relative;
}
.form .row .field.gdpr input {
margin: auto 0;
margin-right: 5px;
}
.form .row .field.gdpr label {
margin: 0;
}
.form .row .field.gdpr label a {
color: #fff;
text-decoration: underline;
}
.form .row .field.gdpr label.error {
position: absolute;
top: 0;
left: -5px;
transform: translateX(-100%);
-webkit-animation: pulse 4s;
animation: pulse 4s;
transition: 3s;
}
.form .row.msgfield .field {
width: 100%;
}
.form .submitWrapper {
width: 100%;
text-align: right;
}
@-webkit-keyframes pulse {
0% {
font-size: 1em;
}
25% {
font-size: 1.5em;
line-height: 30px;
}
50% {
font-size: 1em;
}
75% {
font-size: 1.5em;
line-height: 30px;
}
100% {
font-size: 1em;
}
}
@keyframes pulse {
0% {
font-size: 1em;
}
25% {
font-size: 1.5em;
line-height: 30px;
}
50% {
font-size: 1em;
}
75% {
font-size: 1.5em;
line-height: 30px;
}
100% {
font-size: 1em;
}
}
#header {
width: 100%;
padding: 7px 0;
position: relative;
z-index: 999;
box-shadow: 0px 0px 10px #0000001A;
}
#header .hWrap {
width: 100%;
max-width: 94%;
}
#header .hWrap #logotype {
width: 100%;
max-width: 250px;
}
#header .hWrap #logotype .logo-img {
width: 100%;
height: auto;
}
#header .hWrap #toggle_navigation {
display: none;
width: 35px;
height: 27px;
position: relative;
transform: rotate(0deg);
transition: 0.5s ease-in-out;
cursor: pointer;
}
#header .hWrap #toggle_navigation span {
display: block;
position: absolute;
height: 2px;
width: 100%;
max-width: 35px;
background: #222;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: 0.15s ease-in-out;
}
#header .hWrap #toggle_navigation span:nth-child(1) {
top: 0;
}
#header .hWrap #toggle_navigation span:nth-child(2), #header .hWrap #toggle_navigation span:nth-child(3) {
top: 11px;
}
#header .hWrap #toggle_navigation span:nth-child(4) {
top: 22px;
}
#header .hWrap #toggle_navigation.open span {
background: #aaa;
}
#header .hWrap #toggle_navigation.open span:nth-child(1) {
top: 11px;
width: 0;
left: 50%;
}
#header .hWrap #toggle_navigation.open span:nth-child(2) {
transform: rotate(45deg);
}
#header .hWrap #toggle_navigation.open span:nth-child(3) {
transform: rotate(-45deg);
}
#header .hWrap #toggle_navigation.open span:nth-child(4) {
top: 11px;
width: 0;
left: 50%;
}
#header .hWrap nav {
display: flex;
flex-direction: column;
}
#header .hWrap nav ul {
margin: auto 0;
padding: 0;
display: flex;
}
#header .hWrap nav ul li {
margin: 0;
list-style: none;
padding: 10px 25px;
text-align: center;
}
#header .hWrap nav ul li a {
padding: 8px 10px;
font-weight: 700;
letter-spacing: 1px;
font-size: 1.1em;
position: relative;
color: #111;
}
#header .hWrap nav ul li a:hover {
text-decoration: none;
}
#header .hWrap nav ul li a:hover:after {
opacity: 1;
top: calc(110% - 10px);
border-color: #37444D;
}
#header .hWrap nav ul li a[href="#"] {
pointer-events: none;
}
#header .hWrap nav ul li a:after {
content: "";
position: absolute;
top: calc(100% - 10px);
left: 50%;
width: calc(100% - 20px);
border-bottom: solid 2px #37444D;
opacity: 0;
transform: translateX(-50%);
transition: 0.5s opacity border-color;
transition: 0.3s top;
}
#header .hWrap nav ul li.current-menu-item a:hover {
border-color: #06141F;
}
#header .hWrap nav ul li.current-menu-item a:after {
opacity: 1;
top: calc(110% - 10px);
border-color: #37444D;
}
#header .hWrap nav ul li.menu-item-has-children {
position: relative;
}
#header .hWrap nav ul li.menu-item-has-children a:after {
display: none;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu {
display: none;
flex-direction: column;
background-color: #06141F;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
min-width: 235px;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item {
text-align: left;
padding: 13px 20px;
position: relative;
display: flex;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item a {
color: #fff;
padding: 0;
padding-right: 5px;
font-weight: normal;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item a:after {
content: "\F105";
font-family: "Font Awesome 5 Regular";
display: none;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item a [data-fa-pseudo-element=":after"] {
margin-left: 15px;
transition: 0.5s transform;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item a:hover [data-fa-pseudo-element=":after"] {
transform: translateX(100%);
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item .grow {
color: #fff;
margin-left: 15px;
transition: 0.2s transform;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item .sub-menu {
position: absolute;
top: 0;
left: calc(100% - 1px);
display: none;
transform: none;
min-width: 260px;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item .sub-menu .menu-item a [data-fa-pseudo-element=":after"] {
display: inline-block;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item .sub-menu:before {
display: none;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item.seeall {
font-size: 0.7em;
font-style: italic;
padding: 30px 20px;
margin-right: 30%;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item.seeall a {
position: relative;
font-weight: 300;
padding: 0;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item.seeall a:before {
content: "";
border-right: solid #fff 1px;
border-top: solid #fff 1px;
transform: translate(0, 50%) rotate(45deg);
width: 7px;
height: 7px;
position: absolute;
right: -30px;
bottom: 50%;
transition: 0.5s;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item.seeall a:not(.IE):after {
content: "";
display: block;
border-bottom: solid #fff 1px;
width: 20px;
height: 0;
position: absolute;
right: -29px;
bottom: 20%;
top: 50%;
transform: translateY(-50%);
transition: 0.5s;
opacity: 1;
left: unset;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item.seeall a:hover:after {
width: 15px;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item.seeall a.IE:after {
content: "";
display: block;
border-bottom: solid #fff 1px;
width: 20px;
height: 0;
position: absolute;
bottom: 20%;
top: 50%;
transition: 0.5s;
opacity: 1;
left: 50%;
transform: translate(-100%, 50%);
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item.seeall [data-fa-pseudo-element=":after"] {
display: none;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item.menu-item-has-children a [data-fa-pseudo-element=":after"] {
display: none;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item.menu-item-has-children a svg {
display: none;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item.menu-item-has-children .sub-menu .menu-item a svg {
display: inline-block;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item.menu-item-has-children .sub-menu .menu-item.menu-item-has-children a svg {
display: none;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item.menu-item-has-children .sub-menu .menu-item.menu-item-has-children .menu-item a svg {
display: inline-block;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item:last-of-type:after {
display: none;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item:after {
content: "";
width: calc(100% - 40px);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-bottom: solid #fff 1px;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu:before {
content: "";
width: 15px;
height: 15px;
background-color: #06141F;
position: absolute;
top: 0;
left: 40%;
transform: rotate(45deg) translateY(-50%);
}
#header .hWrap nav ul li.menu-item-has-children .grow {
color: #222;
}
#header .hWrap .logos {
max-width: 20%;
align-items: center;
}
#header .hWrap .logos .imgHolder {
margin: auto 0;
}
#header .hWrap .logos .imgHolder img {
max-height: 45px;
margin: 0 5px;
}
#frontpageSliderSection .carousel {
position: relative;
overflow: hidden;
}
#frontpageSliderSection .carousel .glide__slides {
margin: 0;
width: 100%;
display: flex;
}
#frontpageSliderSection .carousel .glide__slides .glide__slide {
padding: 0;
width: 100%;
height: 700px;
list-style: none;
background-size: cover;
background-position: top;
}
#frontpageSliderSection .carousel .customControls {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
}
#frontpageSliderSection .carousel .customControls button {
background: transparent;
color: #fff;
font-size: 6em;
}
#frontpageMainSection {
background-color: #F8F8F8;
}
#frontpageMainSection .puffWrapper {
margin-top: -175px;
flex-wrap: wrap;
}
#frontpageMainSection .puffWrapper .left, #frontpageMainSection .puffWrapper .right {
padding: 70px 90px;
}
#frontpageMainSection .puffWrapper .left .heading, #frontpageMainSection .puffWrapper .left .subHeading, #frontpageMainSection .puffWrapper .right .heading, #frontpageMainSection .puffWrapper .right .subHeading {
color: #fff;
margin: 0;
}
#frontpageMainSection .puffWrapper .left .subHeading, #frontpageMainSection .puffWrapper .right .subHeading {
font-size: 1.6em;
line-height: 40px;
margin: 40px 0;
}
#frontpageMainSection .puffWrapper .left .links, #frontpageMainSection .puffWrapper .right .links {
width: 100%;
display: flex;
flex-wrap: wrap;
}
#frontpageMainSection .puffWrapper .left .links a, #frontpageMainSection .puffWrapper .right .links a {
width: calc(50% - 10px);
padding: 15px 25px;
background-color: #37444D;
margin-bottom: 20px;
}
#frontpageMainSection .puffWrapper .left .links a p, #frontpageMainSection .puffWrapper .right .links a p {
margin: 0;
color: #fff;
display: inline-block;
}
#frontpageMainSection .puffWrapper .left .links a:hover p:before, #frontpageMainSection .puffWrapper .right .links a:hover p:before {
right: calc(-40px - 8px);
}
#frontpageMainSection .puffWrapper .left .links a:hover p:after, #frontpageMainSection .puffWrapper .right .links a:hover p:after {
right: -40px;
}
#frontpageMainSection .puffWrapper .left {
background: #37444D;
width: 40%;
}
#frontpageMainSection .puffWrapper .left .links {
flex-direction: column;
}
#frontpageMainSection .puffWrapper .left .links a {
width: 100%;
background-color: #fff;
}
#frontpageMainSection .puffWrapper .left .links a p {
color: #222;
font-weight: 600;
}
#frontpageMainSection .puffWrapper .left .links a p:before, #frontpageMainSection .puffWrapper .left .links a p:after {
border-color: #222;
}
#frontpageMainSection .puffWrapper .right {
background: #06141F;
width: 60%;
}
#frontpageMainSection .puffWrapper .right .heading {
font-size: 3.5em;
font-weight: 600;
line-height: 70px;
}
#frontpageMainSection .puffWrapper .right .subHeading {
padding-right: 25%;
}
#frontpageMainSection .puffWrapper .right span {
color: #fff;
font-style: italic;
font-size: 1.1em;
margin-bottom: 30px;
}
#frontpageMainSection .carouselHolder {
overflow: hidden;
width: 100%;
}
#frontpageMainSection .carouselHolder .puffcarousel {
position: relative;
width: 100%;
}
#frontpageMainSection .carouselHolder .puffcarousel .glide__slides {
margin: 0;
width: 100%;
display: flex;
}
#frontpageMainSection .carouselHolder .puffcarousel .glide__slides .glide__slide {
padding: 0;
width: 100%;
height: 670px;
list-style: none;
background-size: cover;
}
#frontpageMainSection .carouselHolder .puffcarousel .customControls {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
z-index: 999;
max-width: 100vw;
pointer-events: none;
}
#frontpageMainSection .carouselHolder .puffcarousel .customControls button {
background: transparent;
color: #fff;
font-size: 6em;
pointer-events: initial;
}
#frontpageMainSection .carouselHolder .puffcarousel .layer {
width: 100%;
height: 100%;
position: absolute;
top: 0;
background-color: #F8F8F8;
opacity: 0.6;
}
#frontpageMainSection .carouselHolder .puffcarousel .layer.left {
right: 100%;
}
#frontpageMainSection .carouselHolder .puffcarousel .layer.right {
left: 100%;
}
#frontpageMainSection .carouselHolder.mobile {
display: none;
}
#frontpageAboutSection {
padding: 70px 0;
}
#frontpageAboutSection .post {
width: 70%;
margin: 0 auto 15px;
text-align: center;
background-color: #37444D;
display: inline-flex;
}
#frontpageAboutSection .post .imgHolder {
width: 50%;
max-height: 400px;
overflow: hidden;
}
#frontpageAboutSection .post .imgHolder img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-filter: brightness(0.8);
filter: brightness(0.8);
transition: 0.5s all;
}
#frontpageAboutSection .post .textHolder {
width: 50%;
padding: 20px;
justify-content: center;
position: relative;
}
#frontpageAboutSection .post .textHolder h3, #frontpageAboutSection .post .textHolder p, #frontpageAboutSection .post .textHolder span {
color: #fff;
z-index: 2;
}
#frontpageAboutSection .post .textHolder span {
margin-bottom: 15px;
font-style: italic;
}
#frontpageAboutSection .post .textHolder span .divider {
display: inline-block;
font-style: normal;
margin: 0 10px;
}
#frontpageAboutSection .post .textHolder p {
margin-bottom: 0;
}
#frontpageAboutSection .post .textHolder:before {
content: "";
position: absolute;
top: 50%;
left: 0;
z-index: 1;
transform: translate(-50%, -50%) rotate(45deg);
width: 30px;
height: 30px;
background-color: #37444D;
}
#frontpageAboutSection .post:hover .imgHolder img {
transform: scale(1.1);
-webkit-filter: brightness(1);
filter: brightness(1);
}
#frontpageAboutSection .seemore {
text-align: center;
margin-bottom: 60px;
font-size: 1.5em;
}
#frontpageAboutSection .textWrapper {
max-width: 1080px;
width: 94%;
margin: 0 auto;
padding: 0px 0;
position: relative;
}
#frontpageAboutSection .textWrapper h2 {
display: inline-block;
color: #06141F;
text-align: center;
font-weight: 600;
font-size: 3.5em;
line-height: 70px;
padding: 0 30px;
}
#frontpageAboutSection .textWrapper h2 span {
color: #37444D;
}
#frontpageAboutSection .buttonWrapper {
text-align: center;
margin-top: 50px;
}
#frontpageAboutSection .buttonWrapper a {
display: inline-block;
}
#frontpageAboutSection .buttonWrapper a .button {
background-color: #06141F;
padding: 15px 40px;
width: calc(100% + 25px);
text-align: left;
}
#frontpageAboutSection .buttonWrapper a .button .arrow {
color: #fff;
margin: 0;
display: inline-block;
font-weight: 400;
font-family: "Catamaran", sans-serif;
font-size: 1.2em;
transition: 0.5s;
}
#frontpageAboutSection .buttonWrapper a:hover .arrow:before {
right: calc(-40px - 8px);
}
#frontpageAboutSection .buttonWrapper a:hover .arrow:after {
right: -40px;
}
#frontpageLocationsSection {
padding-bottom: 100px;
}
#frontpageLocationsSection .puffWrapper {
flex-wrap: wrap;
}
#frontpageLocationsSection .puffWrapper .shop {
background: #37444D;
width: 33.3333%;
padding: 90px;
position: relative;
z-index: 9999;
}
#frontpageLocationsSection .puffWrapper .shop h2, #frontpageLocationsSection .puffWrapper .shop h3, #frontpageLocationsSection .puffWrapper .shop p, #frontpageLocationsSection .puffWrapper .shop span, #frontpageLocationsSection .puffWrapper .shop a {
color: #fff;
margin-bottom: 0;
}
#frontpageLocationsSection .puffWrapper .shop h2 {
overflow-wrap: inherit;
}
#frontpageLocationsSection .puffWrapper .shop p, #frontpageLocationsSection .puffWrapper .shop span {
font-family: "Catamaran", sans-serif;
font-weight: 600;
}
#frontpageLocationsSection .puffWrapper .shop p {
min-height: 28px;
}
#frontpageLocationsSection .puffWrapper .shop h3 {
text-transform: uppercase;
}
#frontpageLocationsSection .puffWrapper .shop .contact, #frontpageLocationsSection .puffWrapper .shop .hours {
margin: 30px 0;
}
#frontpageLocationsSection .puffWrapper .shop .phone {
margin: 30px 0 0;
}
#frontpageLocationsSection .puffWrapper .shop .email {
margin-bottom: 30px;
}
#frontpageLocationsSection .puffWrapper .shop:nth-of-type(even) {
background: #06141F;
position: relative;
}
#frontpageLocationsSection .puffWrapper .shop:nth-of-type(even):after {
background: #06141F;
}
#frontpageLocationsSection .puffWrapper .shop:after {
display: none;
content: "";
width: 40px;
height: 40px;
background: #37444D;
position: absolute;
top: 100%;
left: 50%;
z-index: 99999;
transform: translate(-50%, -50%) rotate(45deg);
}
#frontpageLocationsSection .puffWrapper .shop.active:after {
display: block;
}
#frontpageLocationsSection .puffWrapper .acf-map {
width: 100%;
height: 400px;
display: none;
}
#heroSubPageSection {
width: 100%;
height: 500px;
background-size: cover;
background-position: center;
margin-bottom: 30px;
}
#subpageSection .contentHolder {
width: 70%;
}
#subpageSection .facebook {
width: 30%;
max-width: 340px;
padding: 0 10px 10px;
margin: 20px 0;
}
#subpageSection .facebook .cff-likebox {
margin-top: 0;
}
.startSection {
margin-top: 30px;
}
#carsPageSection {
padding: 0 0 50px;
}
#carsPageSection .cars {
width: 100%;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 50px;
}
#carsPageSection .cars .car {
width: 50%;
height: 350px;
position: relative;
background-size: cover;
background-position: center;
}
#carsPageSection .cars .car .layer {
background: #000;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
transition: 0.5s;
}
#carsPageSection .cars .car h3 {
display: inline-block;
color: #fff;
position: absolute;
bottom: 10px;
left: 10px;
margin: 0;
}
#carsPageSection .cars .car h3:before {
width: 13px;
height: 13px;
border-width: 3px;
right: calc(-40px - 13px);
}
#carsPageSection .cars .car h3:after {
width: 30px;
border-width: 3px;
right: -40px;
}
#carsPageSection .cars .car:hover {
-webkit-filter: brightness(1);
filter: brightness(1);
}
#carsPageSection .cars .car:hover .layer {
opacity: 0.2;
}
#carsPageSection .cars .car:hover .arrow:before {
right: calc(-50px - 13px);
}
#carsPageSection .cars .car:hover .arrow:after {
right: -50px;
}
#carsPageSection .waykeCars {
width: 100%;
}
#carsPageSection .buttonWrapper {
text-align: center;
padding: 40px 0;
}
#carsPageSection .buttonWrapper .buttonPos {
display: inline-block;
}
#carsPageSection .buttonWrapper .buttonPos .button {
background-color: #06141F;
padding: 15px 40px;
width: calc(100% + 25px);
text-align: left;
cursor: pointer;
}
#carsPageSection .buttonWrapper .buttonPos .button .arrow {
color: #fff;
margin: 0;
display: inline-block;
font-weight: 400;
font-family: "Catamaran", sans-serif;
font-size: 1.2em;
transition: 0.5s;
}
#carsPageSection .buttonWrapper .buttonPos:hover .arrow:before {
right: calc(-40px - 8px);
}
#carsPageSection .buttonWrapper .buttonPos:hover .arrow:after {
right: -40px;
}
#carsPageSection .formContainer {
background-color: #37444D;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
padding: 30px 70px;
display: none;
width: 100vw;
}
#carsPageSection .formContainer .form {
position: relative;
}
#carsPageSection .formContainer .form label, #carsPageSection .formContainer .form h3 {
color: #fff;
}
#carsPageSection .formContainer .form h3 {
margin-bottom: 20px;
}
#carsPageSection .formContainer .form .formCloser {
position: absolute;
top: 0;
right: 0;
color: #fff;
font-size: 1.5em;
cursor: pointer;
}
#carsPageSection .formContainer .form #place {
text-transform: capitalize;
}
#carsPageSection .carinfo .puff {
width: 100%;
}
#carsPageSection .carinfo .puff .left, #carsPageSection .carinfo .puff .right {
width: 50%;
}
#carsPageSection .carinfo .puff .left {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 400px;
}
#carsPageSection .carinfo .puff .right {
position: relative;
justify-content: center;
}
#carsPageSection .carinfo .puff .right h3 {
margin-bottom: 20px;
line-height: 35px;
}
#carsPageSection .carinfo .puff .right .textWrapper {
width: 80%;
margin: 50px auto;
padding-right: 10%;
}
#carsPageSection .carinfo .puff:nth-of-type(2n) .right {
order: 1;
}
#carsPageSection .carinfo .puff:nth-of-type(2n) .right .textWrapper {
padding-right: 0;
padding-left: 10%;
}
#carsPageSection .carinfo .puff:nth-of-type(2n) .left {
order: 2;
}
#contactPageSection {
padding: 0 0 20px;
}
#contactPageSection .contactinfo {
width: 60%;
padding: 40px 0 0;
margin-bottom: 30px;
max-height: 750px;
}
#contactPageSection .contactinfo .place {
flex-wrap: wrap;
justify-content: flex-start;
}
#contactPageSection .contactinfo .place .titles {
width: 100%;
margin-bottom: 15px;
justify-content: flex-start;
}
#contactPageSection .contactinfo .place .titles h2, #contactPageSection .contactinfo .place .titles h4 {
margin: 0;
}
#contactPageSection .contactinfo .place .titles h4 {
margin-top: auto;
line-height: 27px;
}
#contactPageSection .contactinfo .place .col {
width: 33.3333%;
}
#contactPageSection .otherinfo {
background-color: #06141F;
width: 40%;
padding: 40px 60px;
margin-bottom: 30px;
}
#contactPageSection .otherinfo p, #contactPageSection .otherinfo a, #contactPageSection .otherinfo h3, #contactPageSection .otherinfo h4 {
color: #fff;
}
#contactPageSection .otherinfo h3 {
margin-bottom: 20px;
}
#contactPageSection .otherinfo h4 {
margin-top: 20px;
}
#contactPageSection .otherinfo p {
margin-bottom: 0;
}
#contactPageSection .otherinfo a:hover {
color: #8b9eac;
}
#contactPageSection .otherinfo .spare {
margin-bottom: 30px;
}
#contactPageSection .child {
margin-top: 25px;
}
#contactPageSection .child .persons {
justify-content: flex-start;
flex-wrap: wrap;
width: 60%;
}
#contactPageSection .child .persons .person {
width: 31%;
margin-right: 2.3333%;
margin-bottom: 25px;
justify-content: flex-start;
}
#contactPageSection .child .persons .person .imgHolder {
height: 300px;
margin-bottom: 15px;
overflow: hidden;
}
#contactPageSection .child .persons .person .imgHolder img {
width: 100%;
}
#contactPageSection .child .persons .person .textWrapper p, #contactPageSection .child .persons .person .textWrapper h4 {
margin-bottom: 0;
}
#contactPageSection .child .persons .person .textWrapper p:first-of-type {
font-style: italic;
}
#contactPageSection .child .persons .person .textWrapper .cont a {
margin-right: 5px;
width: 30px;
height: 30px;
text-align: center;
background-color: #06141F;
border-radius: 50%;
display: inline-flex;
flex-direction: column;
justify-content: center;
border: solid #06141F 1px;
}
#contactPageSection .child .persons .person .textWrapper .cont a svg {
color: #fff;
margin: 0 auto;
}
#contactPageSection .child .persons .person .textWrapper .cont a:hover {
background-color: transparent;
}
#contactPageSection .child .persons .person .textWrapper .cont a:hover svg {
color: #06141F;
}
#contactPageSection .child .persons .person:nth-of-type(3n) {
margin-right: 0;
}
#contactPageSection .child .contactRight {
width: 40%;
background-color: #06141F;
padding: 40px 60px;
}
#contactPageSection .child .contactRight .row {
flex-wrap: wrap;
margin-bottom: 15px;
}
#contactPageSection .child .contactRight .row .field:first-of-type {
margin-bottom: 15px;
}
#contactPageSection .child .contactRight .row label, #contactPageSection .child .contactRight .row h3 {
color: #fff;
}
#contactPageSection .child .contactRight .submitWrapper button {
border: solid #fff 1px;
}
#contactPageFormSection {
background-color: #37444D;
}
#contactPageFormSection .form {
padding: 50px 0;
}
#contactPageFormSection .form label {
color: #fff;
}
#contactPageFormSection .form h3 {
color: #fff;
margin-bottom: 20px;
}
#contactPageFormSection .form .locationPicker {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #37444D;
z-index: 999;
}
#contactPageFormSection .form .locationPicker .buttonPositioner {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
#contactPageFormSection .form .locationPicker .buttonPositioner h3 {
margin-bottom: 35px;
}
#contactPageFormSection .form .locationPicker .buttonPositioner .locPicker {
font-size: 1.3em;
}
#contactPageFormSection .form .locationPicker .buttonPositioner .locPicker:nth-of-type(2) {
margin: 0 30px;
}
#contactPageFormSection .form button {
border: solid #06141F 1px;
}
#findPageSection .page-content {
margin-bottom: 30px;
}
#findPageSection .acf-map {
height: 400px;
width: 100%;
margin-top: 15px;
}
#serviceForm #brandtxt {
display: none;
}
#serviceForm .gdpr label a {
color: #37444D;
}
#sellcarPageMainSection .page-content {
padding-bottom: 30px;
}
#sellcarPageMainSection .page-content p {
margin-bottom: 0;
}
#sellcarPageMainSection .form {
background-color: #37444D;
}
#sellcarPageMainSection .form label, #sellcarPageMainSection .form h3 {
color: #fff;
}
#sellcarPageMainSection .form h3 {
margin-bottom: 20px;
}
#sellcarPageMainSection .form button {
border: solid #06141F 1px;
}
#wheelsPageSection {
position: relative;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
flex-grow: 1;
}
#wheelsPageSection .buttons {
width: 100%;
text-align: center;
display: flex;
justify-content: center;
padding: 100px 0;
}
#wheelsPageSection .buttons a {
margin: 0 30px;
}
#wheelsPageSection .buttons a .button {
background-color: #06141F;
padding: 25px 40px;
text-align: right;
border: solid 1px #06141F;
transition: 0.5s;
width: 100%;
}
#wheelsPageSection .buttons a .button .text {
color: #fff;
margin: 0;
display: inline-block;
font-weight: 400;
font-family: "Catamaran", sans-serif;
font-size: 1.2em;
line-height: 1;
font-size: 3em;
}
#wheelsPageSection .buttons a .button .text:before {
content: "\F3C5";
display: none;
font-family: "Font Awesome 5 Regular";
}
#wheelsPageSection .buttons a .button .text svg {
margin-right: 20px;
font-size: 0.9em;
}
#wheelsPageSection .buttons a .button:hover {
background: #37444D;
}
#archivePageSection {
width: 100%;
}
#archivePageSection .carsWrapper {
flex-wrap: wrap;
}
#archivePageSection .carsWrapper .post {
width: 49.5%;
margin: 0 0 30px;
margin-right: 1%;
text-align: center;
background-color: #37444D;
display: inline-flex;
}
#archivePageSection .carsWrapper .post .imgHolder {
width: 50%;
max-height: 400px;
overflow: hidden;
position: relative;
}
#archivePageSection .carsWrapper .post .imgHolder img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-filter: brightness(0.8);
filter: brightness(0.8);
transition: 0.5s all;
}
#archivePageSection .carsWrapper .post .imgHolder:after {
content: "";
position: absolute;
top: 50%;
right: 0;
z-index: 1;
transform: translate(50%, -50%) rotate(45deg);
width: 30px;
height: 30px;
background-color: #37444D;
}
#archivePageSection .carsWrapper .post .textHolder {
width: 50%;
padding: 20px;
justify-content: center;
position: relative;
margin: 0 auto;
}
#archivePageSection .carsWrapper .post .textHolder h3, #archivePageSection .carsWrapper .post .textHolder p, #archivePageSection .carsWrapper .post .textHolder span {
color: #fff;
z-index: 2;
}
#archivePageSection .carsWrapper .post .textHolder span {
margin-bottom: 15px;
font-style: italic;
}
#archivePageSection .carsWrapper .post .textHolder span .divider {
display: inline-block;
font-style: normal;
margin: 0 10px;
}
#archivePageSection .carsWrapper .post .textHolder h3 {
line-height: 35px;
}
#archivePageSection .carsWrapper .post .textHolder p {
margin-bottom: 0;
}
#archivePageSection .carsWrapper .post:hover .imgHolder img {
transform: scale(1.1);
-webkit-filter: brightness(1);
filter: brightness(1);
}
#archivePageSection .carsWrapper .post:nth-of-type(2n) {
margin-right: 0;
}
#archivePageSection .pagination {
font-size: 1.1em;
text-align: center;
margin-bottom: 50px;
}
#singlePostSection {
width: 100%;
padding-bottom: 50px;
}
#singlePostSection .heroPostSection {
width: 100%;
max-height: 500px;
-o-object-fit: cover;
object-fit: cover;
margin-bottom: 30px;
}
#singlePostSection .single-post {
width: 75%;
}
#singlePostSection .single-post .post-header h1 {
margin-bottom: 0;
}
#singlePostSection .single-post .post-header .meta-info {
font-size: small;
margin-bottom: 30px;
}
#singlePostSection .single-post .post-content p:last-child {
margin: 0;
}
#searchResultHolder {
width: 100%;
}
#searchResultHolder .search-post {
width: 100%;
margin: 0 0 15px;
padding: 0 0 15px;
border-bottom: solid 1px #F8F8F8;
}
#searchResultHolder .search-post:last-child {
border: none;
padding: 0;
margin: 0;
}
#searchResultHolder .search-post .search-header {
width: 100%;
}
#searchResultHolder .search-post .search-header h2 {
margin: 0;
}
#searchResultHolder .search-post .search-header .meta-info {
font-size: small;
margin: 5px 0;
}
#searchResultHolder .search-post .search-header .meta-info .author {
display: none;
}
#searchResultHolder .search-post .search-content {
width: 100%;
}
#searchResultHolder .search-post .search-content p:last-child {
margin: 0;
}
#searchResultHolder .search-post .search-content .readMore {
width: 100%;
margin: 10px 0 0;
}
#sidebar .innerSidebar .sidebar_box {
float: left;
width: 100%;
margin: 0 0 15px;
padding: 0 0 15px;
border-bottom: solid 1px #d0d6db;
}
#contactBottomSection {
width: 100%;
padding: 30px 0 50px;
}
#contactBottomSection .contact {
max-width: 1150px;
width: 94%;
margin: 0 auto;
flex-wrap: wrap;
}
#contactBottomSection .contact h2 {
width: 100%;
}
#contactBottomSection .contact .locations {
background: #06141F;
width: 20%;
}
#contactBottomSection .contact .locations .location {
padding: 20px;
cursor: pointer;
}
#contactBottomSection .contact .locations .location p {
color: #fff;
margin-bottom: 0;
font-weight: bold;
font-size: 1.2em;
}
#contactBottomSection .contact .locations .location.active {
background: #37444D;
}
#contactBottomSection .contact .main {
background: #37444D;
width: 80%;
padding: 40px;
}
#contactBottomSection .contact .main .place {
display: none;
}
#contactBottomSection .contact .main .place .topdesc h3, #contactBottomSection .contact .main .place .topdesc p, #contactBottomSection .contact .main .place .topdesc a {
color: #fff;
}
#contactBottomSection .contact .main .place .topdesc h3 {
margin-bottom: 20px;
}
#contactBottomSection .contact .main .place .topdesc .contactus {
font-weight: bold;
font-size: 1.2em;
}
#contactBottomSection .contact .main .place .topdesc .contactus:hover {
color: #06141F;
}
#contactBottomSection .contact .main .place .botpersons {
margin-top: 25px;
justify-content: flex-start;
flex-wrap: wrap;
}
#contactBottomSection .contact .main .place .botpersons .person {
width: 49%;
margin-right: 2%;
margin-bottom: 15px;
justify-content: flex-start;
}
#contactBottomSection .contact .main .place .botpersons .person img {
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
width: 150px;
height: 150px;
margin-right: 10px;
}
#contactBottomSection .contact .main .place .botpersons .person .textWrapper {
justify-content: center;
}
#contactBottomSection .contact .main .place .botpersons .person .textWrapper p {
margin-bottom: 0;
color: #fff;
}
#contactBottomSection .contact .main .place .botpersons .person .textWrapper h5, #contactBottomSection .contact .main .place .botpersons .person .textWrapper a {
color: #fff;
}
#contactBottomSection .contact .main .place .botpersons .person:nth-of-type(2n) {
margin-right: 0;
}
#contactBottomSection .contact .main .place.active {
display: block;
}
#footer {
width: 100%;
margin: 0 auto;
position: relative;
padding: 10px 0;
background: #06141F;
padding: 70px 0 0px;
}
#footer .logoWrapper {
text-align: center;
}
#footer .logoWrapper img {
max-width: 200px;
}
#footer .contactWrapper {
color: #fff;
margin: 40px 0 20px;
}
#footer .contactWrapper .left p {
margin-bottom: 0;
font-size: 1.1em;
}
#footer .contactWrapper .left a {
color: #fff;
}
#footer .contactWrapper .left .logo {
max-height: 45px;
margin-top: 20px;
}
#footer .contactWrapper .left .logo a {
display: inline-block;
max-height: 45px;
}
#footer .contactWrapper .left .logo a img {
max-height: 45px;
}
#footer .contactWrapper .right {
margin: 0;
justify-content: flex-start;
}
#footer .contactWrapper .right li {
list-style: none;
text-align: right;
padding: 0;
}
#footer .contactWrapper .right li a {
color: #fff;
font-size: 1.1em;
}
#footer .contactWrapper .right li a:hover {
color: #37444D;
}
#footer .contactWrapper .right .socials {
justify-content: flex-end;
margin-top: auto;
}
#footer .contactWrapper .right .socials a {
color: #fff;
font-size: 2em;
margin-left: 10px;
margin-top: auto;
display: flex;
}
#footer .contactWrapper .right .socials a svg {
margin-top: auto;
}
#footer .contactWrapper .right .socials a:hover {
color: #37444D;
}
#footer .copyright {
font-size: 12px;
width: 100%;
border-top: solid gray 1px;
padding: 15px 0 40px;
}
#footer .copyright .copy {
width: 50%;
text-align: left;
color: gray;
}
#footer .copyright .prod {
width: 50%;
text-align: right;
color: gray;
}
#footer .copyright .prod a {
color: gray;
font-weight: 600;
}
@media only screen and (max-width: 1280px) {
body .wrapper {
max-width: 1024px;
}
}
@media only screen and (max-width: 1140px) {
body .wrapper {
max-width: 900px;
}
}
@media only screen and (max-width: 1024px) {
h2 {
font-size: 3em;
}
h3 {
font-size: 2em;
}
}
@media only screen and (max-width: 966px) {
body .wrapper {
max-width: 750px;
}
}
@media only screen and (max-width: 768px) {
h1 {
font-size: 3em;
}
h2 {
font-size: 2.5em;
}
}
@media only screen and (max-width: 598px) {
.form .row {
flex-direction: column;
}
.form .row .field {
width: 100%;
margin-bottom: 10px;
}
.form .row .field.gdpr {
margin: 20px 0;
}
.form .row .field:not(.gdpr):last-of-type {
margin-bottom: 0;
}
.form button {
width: 100%;
}
}
@media only screen and (max-width: 1440px) {
#header .hWrap nav ul li {
padding: 10px;
}
}
@media only screen and (max-width: 1280px) {
#header .hWrap #logotype {
max-width: 175px;
}
#header .hWrap nav ul li a {
font-size: 1em;
}
}
@media only screen and (max-width: 1140px) {
#header .hWrap #logotype {
max-width: 150px;
}
#header .hWrap nav ul li a {
padding: 0;
}
#header .hWrap nav ul li.menu-item-has-children .grow {
margin-left: 5px;
}
}
@media only screen and (max-width: 1024px) {
#header .hWrap {
justify-content: flex-start;
}
#header .hWrap #logotype {
order: 1;
max-width: 200px;
}
#header .hWrap .logos {
order: 2;
}
#header .hWrap .logos img {
margin: auto 5px;
}
#header .hWrap #toggle_navigation {
order: 3;
align-self: center;
display: block;
margin-left: auto;
}
#header .hWrap nav {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 100vh;
background: rgba(255, 255, 255, 0.9);
overflow-y: scroll;
}
#header .hWrap nav ul {
flex-direction: column;
margin-top: 30px;
margin-left: 3%;
}
#header .hWrap nav ul li {
text-align: left;
}
#header .hWrap nav ul li a, #header .hWrap nav ul li .grow {
font-size: 1.5em;
}
#header .hWrap nav ul li .grow svg {
transition: 0.3s transform;
}
#header .hWrap nav ul li .grow.open svg {
transform: rotate(-90deg);
}
#header .hWrap nav ul li a {
position: relative;
}
#header .hWrap nav ul li a:before {
content: "";
display: inline-block;
width: 60%;
border-bottom: solid 2px #37444D;
position: absolute;
top: 100%;
left: 0;
transform: translateY(-100%);
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu {
position: relative;
top: unset;
left: unset;
transform: none;
min-width: 0;
background-color: transparent;
margin-top: 0;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item {
justify-content: flex-start;
flex-wrap: wrap;
padding: 5px 0;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item a {
color: #111;
max-width: 85%;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item a:before {
display: none;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item.seeall {
margin: 0;
font-size: 1em;
padding: 5px 0px;
font-style: normal;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item.seeall a {
font-weight: normal;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item.seeall a:before, #header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item.seeall a:after {
display: none;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item.seeall a:after {
content: "\F105";
font-family: "Font Awesome 5 Regular";
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item.seeall a [data-fa-pseudo-element=":after"] {
display: inline-block;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item .grow {
color: #111;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item .sub-menu {
left: unset;
top: unset;
position: relative;
width: 100%;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu .menu-item:after {
display: none;
}
#header .hWrap nav ul li.menu-item-has-children .sub-menu:before {
display: none;
}
#header .hWrap nav ul li:hover a:after, #header .hWrap nav ul li.current-menu-item a:after {
display: none;
}
}
@media only screen and (max-width: 1280px) {
#frontpageMainSection .carouselHolder .puffcarousel .glide__slides .glide__slide {
height: 535px;
}
#frontpageMainSection .carouselHolder .puffcarousel .customControls {
width: 100%;
}
#frontpageLocationsSection .puffWrapper .shop {
padding: 50px 40px;
}
}
@media only screen and (max-width: 1140px) {
#wheelsPageSection .buttons {
display: flex;
flex-direction: column;
}
#wheelsPageSection .buttons a {
margin: 20px 0;
}
#frontpageMainSection .carouselHolder .puffcarousel .glide__slides .glide__slide {
height: 470px;
}
}
@media only screen and (max-width: 1024px) {
#frontpageMainSection .puffWrapper .left, #frontpageMainSection .puffWrapper .right {
padding: 40px;
}
#frontpageAboutSection .post {
width: 100%;
}
#frontpageLocationsSection .puffWrapper .shop {
padding: 30px 20px;
}
#frontpageLocationsSection .puffWrapper .shop .contact, #frontpageLocationsSection .puffWrapper .shop .hours, #frontpageLocationsSection .puffWrapper .shop .shopphone {
margin: 30px 0;
}
#contactPageSection .parent {
flex-direction: column;
}
#contactPageSection .contactinfo, #contactPageSection .otherinfo {
width: 100%;
}
#contactPageSection .otherinfo {
display: flex;
padding: 30px;
}
#contactPageSection .otherinfo .spare {
width: 40%;
margin-bottom: 0;
}
#contactPageSection .otherinfo .spare .vendor {
width: 100%;
}
#contactPageSection .otherinfo .other {
width: 60%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
#contactPageSection .otherinfo .other .vendor:first-of-type h4 {
margin-top: 0;
}
#contactPageSection .otherinfo .other .vendor:last-of-type {
margin-top: auto;
}
#contactPageSection .child {
flex-direction: column;
}
#contactPageSection .child .persons {
width: 100%;
}
#contactPageSection .child .contactRight {
width: 100%;
}
#archivePageSection .carsWrapper .post {
width: 100%;
margin-right: 0;
}
}
@media only screen and (max-width: 962px) {
#frontpageLocationsSection .puffWrapper .shop h2 {
font-size: 2.5em;
}
#frontpageMainSection .puffWrapper .right .subHeading {
padding-right: 0;
}
#frontpageMainSection .puffWrapper .right span {
display: none;
}
#frontpageMainSection .carouselHolder .puffcarousel .glide__slides .glide__slide {
height: 335px;
}
}
@media only screen and (max-width: 868px) {
#contactPageSection .otherinfo .spare {
width: 50%;
}
#contactPageSection .otherinfo .other {
width: 50%;
}
}
@media only screen and (max-width: 768px) {
#frontpageAboutSection .seemore {
margin-bottom: 0px;
margin-top: 30px;
}
#frontpageAboutSection .textWrapper h2 {
display: none;
}
#frontpageMainSection .puffWrapper {
flex-direction: column;
}
#frontpageMainSection .puffWrapper .left, #frontpageMainSection .puffWrapper .right {
width: 100%;
}
#frontpageMainSection .puffWrapper .left .subHeading, #frontpageMainSection .puffWrapper .right .subHeading {
font-size: 1.4em;
width: 100%;
}
#frontpageMainSection .puffWrapper .left .heading, #frontpageMainSection .puffWrapper .right .heading {
width: 100%;
}
#frontpageMainSection .puffWrapper .left .links, #frontpageMainSection .puffWrapper .right .links {
width: 100%;
text-align: center;
}
#frontpageMainSection .puffWrapper .right .heading {
font-size: 2.5em;
}
#frontpageMainSection .carouselHolder {
display: none;
}
#frontpageMainSection .carouselHolder.mobile {
display: block;
}
#frontpageMainSection .carouselHolder.mobile .wrapper {
width: 100%;
max-width: 100%;
}
#frontpageMainSection .carouselHolder.mobile .puffcarousel {
margin: 70px auto;
}
#frontpageMainSection .carouselHolder.mobile .puffcarousel .customControls {
display: none;
}
#frontpageMainSection .carouselHolder.mobile .puffcarousel .glide__slides .glide__slide {
width: 100vw;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#frontpageLocationsSection {
padding-bottom: 0;
}
#frontpageLocationsSection .puffWrapper {
flex-direction: column;
width: 100%;
max-width: 100%;
}
#frontpageLocationsSection .puffWrapper .shop {
width: 100%;
display: flex;
justify-content: space-between;
padding: 30px;
flex-direction: column;
}
#frontpageLocationsSection .puffWrapper .shop h3 {
line-height: 44px;
}
#frontpageLocationsSection .puffWrapper .shop .shopphone {
margin-bottom: 0;
}
#frontpageLocationsSection .puffWrapper .shop.active:after {
display: none;
}
#frontpageLocationsSection .puffWrapper .acf-map {
display: none !important;
height: 250px;
}
#frontpageLocationsSection .puffWrapper .shop1 {
order: 1;
}
#frontpageLocationsSection .puffWrapper .shop2 {
order: 2;
}
#frontpageLocationsSection .puffWrapper .shop3 {
order: 3;
}
#frontpageLocationsSection .puffWrapper .shop4 {
order: 4;
}
#carsPageSection .cars {
flex-direction: column;
}
#carsPageSection .cars .car {
width: 100%;
}
#carsPageSection .carinfo .puff {
flex-direction: column;
}
#carsPageSection .carinfo .puff .left, #carsPageSection .carinfo .puff .right {
width: 100%;
}
#carsPageSection .carinfo .puff .right .textWrapper {
padding-right: 0;
}
#carsPageSection .carinfo .puff .right:nth-of-type(2n) .textWrapper {
padding-left: 0;
}
#carsPageSection .carinfo .puff:nth-of-type(2n) .left {
order: 1;
}
#carsPageSection .carinfo .puff:nth-of-type(2n) .right {
order: 2;
}
#contactPageSection .child .persons .person {
width: 49%;
margin-right: 2%;
}
#contactPageSection .child .persons .person:nth-of-type(2n) {
margin-right: 0;
}
#contactPageSection .child .persons .person:nth-of-type(3n) {
margin-right: 2%;
}
}
@media only screen and (max-width: 642px) {
#frontpageAboutSection .wrapper {
width: 100%;
max-width: 100%;
}
#frontpageLocationsSection {
overflow-x: auto;
}
#contactPageSection .otherinfo {
flex-direction: column;
}
#contactPageSection .otherinfo .spare {
width: 100%;
margin-bottom: 30px;
}
#contactPageSection .otherinfo .other {
width: 100%;
}
#subpageSection .contentHolder {
width: 100%;
}
#subpageSection .facebook {
display: none;
}
}
@media only screen and (max-width: 598px) {
#frontpageSliderSection .carousel .glide__slides .glide__slide {
height: 500px;
}
#heroSubPageSection {
height: 300px;
}
#frontpageMainSection .puffWrapper {
margin-top: -125px;
}
#frontpageMainSection .puffWrapper .right .links {
flex-direction: column;
}
#frontpageMainSection .puffWrapper .right .links a {
width: 100%;
}
#frontpageMainSection .puffWrapper .left .heading, #frontpageMainSection .puffWrapper .right .heading {
line-height: 50px;
}
#frontpageMainSection .puffWrapper .left .subHeading, #frontpageMainSection .puffWrapper .right .subHeading {
margin: 20px 0 30px;
}
#frontpageAboutSection .post {
flex-direction: column;
}
#frontpageAboutSection .post .imgHolder {
width: 100%;
}
#frontpageAboutSection .post .textHolder {
width: 100%;
}
#frontpageAboutSection .post .textHolder:before {
left: 50%;
top: 0;
}
#carsPageSection .cars .car {
height: 150px;
}
#carsPageSection .carinfo .puff .right .textWrapper {
width: 94%;
}
#contactPageSection .child .persons .person {
width: 100%;
margin-right: 0;
padding: 0 20px 10px;
}
#contactPageSection .child .persons .person .imgHolder {
height: 350px;
}
#contactPageSection .child .persons .person:nth-of-type(3n) {
margin-right: 0;
}
#contactPageSection .child .contactRight {
padding: 40px;
}
#contactPageSection .contactinfo {
overflow-x: scroll;
}
#contactPageSection .contactinfo .place {
width: 630px;
}
#contactPageFormSection .form .locationPicker .buttonPositioner .locPicker:nth-of-type(2) {
margin: 20px 0;
}
#archivePageSection .carsWrapper .post {
flex-direction: column;
}
#archivePageSection .carsWrapper .post .imgHolder {
width: 100%;
max-height: 250px;
}
#archivePageSection .carsWrapper .post .imgHolder img {
max-height: 250px;
}
#archivePageSection .carsWrapper .post .imgHolder:after {
top: 100%;
right: 50%;
}
#archivePageSection .carsWrapper .post .textHolder {
width: 100%;
}
#archivePageSection .pagination {
font-size: 1.5em;
}
#archivePageSection .pagination .page-numbers {
margin: 0 3px;
}
}
@media only screen and (max-width: 414px) {
#frontpageMainSection .puffWrapper .left .heading, #frontpageMainSection .puffWrapper .right .heading {
padding-right: 20px;
}
}
@media only screen and (max-width: 768px) {
#singlePostSection .heroPostSection {
max-height: 300px;
}
#singlePostSection .single-post {
width: 100%;
}
}
@media only screen and (max-width: 1024px) {
#contactBottomSection .contact .main .place .botpersons .person img {
width: 100px;
height: 100px;
}
}
@media only screen and (max-width: 768px) {
#footer {
padding-top: 50px;
}
#contactBottomSection .contact .locations {
width: 30%;
}
#contactBottomSection .contact .main {
width: 70%;
}
#contactBottomSection .contact .main .place .botpersons .person {
width: 100%;
}
}
@media only screen and (max-width: 667px) {
#contactBottomSection {
padding-top: 0;
}
#contactBottomSection .contact {
flex-direction: column;
}
#contactBottomSection .contact .locations {
width: 100%;
display: flex;
}
#contactBottomSection .contact .main {
width: 100%;
padding: 20px;
}
#footer .contactWrapper {
flex-direction: column;
margin-top: 0;
}
#footer .contactWrapper .left, #footer .contactWrapper .right {
width: 100%;
text-align: center;
margin-top: 15px;
flex-direction: column-reverse;
}
#footer .contactWrapper .left li, #footer .contactWrapper .right li {
text-align: center;
}
#footer .contactWrapper .left .logo, #footer .contactWrapper .right .logo {
margin-bottom: 15px;
margin-top: 0;
}
#footer .contactWrapper .left .socials, #footer .contactWrapper .right .socials {
justify-content: center;
margin-top: 0px;
margin-bottom: 15px;
}
#footer .contactWrapper .left .socials a, #footer .contactWrapper .right .socials a {
margin: 0 5px;
}
} .shop3 div:nth-of-type(3){
display: none!important;
}