html { 
overflow-x: hidden;
}
@font-face {
font-family: 'D-DIN-PRO';
src: url(//www.frontbrakelights.com/wp-content/themes/fbl-theme/fonts/D-DIN-PRO-400-Regular.otf);
font-weight: 400; 
}
@font-face {
font-family: 'D-DIN-PRO-Bold';
src: url(//www.frontbrakelights.com/wp-content/themes/fbl-theme/fonts/D-DIN-PRO-700-Bold.otf);
font-weight: 700; 
}
a.fbl-button {
padding: 17px 30px 18px 30px;
border: 2px solid var(--green);
border-radius: 30px;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
font-family: 'D-DIN-PRO-Bold';  
display: inline-block;
color: #fff;
}
a.fbl-button:hover {
color: var(--dark);
background: var(--green);
box-shadow: 0 -1px 20px rgba(112, 224, 0, 0.91);
}
.megamenu-cta a.fbl-button {
font-family: 'D-DIN-PRO-Bold' !important;  
}
a.fbl-button.dark:hover {
color: var(--dark) !important;
}
strong {
font-family: 'D-DIN-PRO-Bold';  
}
:root {
--green: #70E000;
--black: #1C1C1C;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
a {
text-decoration-skip-ink: auto;
transition: all 0.3s linear;
text-decoration: none;
}
a[href^="tel"] {
color: inherit;
text-decoration: none;
}
button {
outline: 0;
}
ol,ul {
list-style: none;
}
blockquote,q {
quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after {
content: '';
content: none;
}
q {
display: inline;
font-style: italic;
}
q:before {
content: '"';
font-style: normal;
}
q:after {
content: '"';
font-style: normal;
}
textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"] {
-webkit-appearance: none;
appearance: none;
border-radius: 0;
}
input[type="search"] {
-webkit-appearance: textfield;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
th,td {
padding: 2px;
}
big {
font-size: 120%;
}
small,sup,sub {
font-size: 80%;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
dd {
margin-left: 20px;
}
kbd,tt {
font-family: courier;
font-size: 12px;
}
ins {
text-decoration: underline;
}
del,strike,s {
text-decoration: line-through;
}
dt {
font-weight: bold;
}
address,cite,var {
font-style: italic;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
html {
max-width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
scroll-behavior: smooth;
font-family: 'D-DIN-PRO';
background: var(--black);
font-size: 15px;
}
p {
font-family: 'D-DIN-PRO';
color: #fff;
font-size: 15px;
line-height: 1.4;
font-weight: 400;
opacity: 0.7;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'D-DIN-PRO';
color:#fff;
line-height: 1.1;
font-weight: 400;
}
h1 {
font-size: 130px;
}
h2 {
font-size: 45px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 25px;
}
img {
width: 100%;
height: auto;
display: block;
}
.dark p, .dark h1, .dark h2, .dark h3, .dark h4, .dark li, .dark a {
color: var(--black);
}
.dark-bgr {
background-color: var(--black);
} section {
width: 100%;
}
.row.in-grid {
max-width: 1200px;
padding-left: 15px;
padding-right: 15px;
margin: auto;
}
.columns-wrapper {
display: flex;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
float: none;
width: 100%; }
.columns-wrapper.middle {
align-items: center;
}
.col-12 {
flex: 0 0 100%;
width: 100%;
padding-left: 1%;
padding-right: 1%;
}
.col-11 {
flex: 0 0 91.66666667%;
width: 91.66666667%;
padding-left: 1%;
padding-right: 1%;
}
.col-10 {
flex: 0 0 83.33333333%;
width: 83.33333333%;
padding-left: 1%;
padding-right: 1%;
}
.col-9 {
flex: 0 0 75%;
width: 75%;
padding-left: 1%;
padding-right: 1%;
}
.col-8 {
flex: 0 0 66.66666667%;
width: 66.66666667%;
padding-left: 1%;
padding-right: 1%;
}
.col-7 {
flex: 0 0 58.33333333%;
width: 58.33333333%;
padding-left: 1%;
padding-right: 1%;
}
.col-6 {
flex: 0 0 50%;
max-width: 50%;
padding-left: 1%;
padding-right: 1%;
}
.col-5 {
flex: 0 0 41.66666667%;
max-width: 41.66666667%;
padding-left: 1%;
padding-right: 1%;
}
.col-4 {
flex: 0 0 33.33333333%;
max-width: 33.33333333%;
padding-left: 1%;
padding-right: 1%;
}
.col-3 {
flex: 0 0 25%;
max-width: 25%;
padding-left: 1%;
padding-right: 1%;
}
.col-2 {
flex: 0 0 16.66666667%;
max-width: 16.66666667%;
padding-left: 1%;
padding-right: 1%;
}
.col-1 {
flex: 0 0 8.33333333%;
max-width: 8.33333333%;
padding-left: 1%;
padding-right: 1%;
}
.col-5-5 {
width: 100%
}
.col-4-5 {
width: 80%
}
.col-3-5 {
width: 60%
}
.col-2-5 {
width: 40%
}
.col-1-5 {
width: 20%
}
.col-3-0 {
width: 30%
}
.content-container {
position: relative;
z-index: 2;
max-width: 1200px;
padding-left: 15px;
padding-right: 15px;
margin: auto;
} @media (max-width: 1000px) {
.col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1, .col-5-5, .col-4-5, .col-3-5, .col-2-5, .col-1-5, .col-3-0 {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
padding-left: 0%;
padding-right: 0%;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 22px;
}
p {
font-size: 15px;
}
}  #header {
display: flex;
justify-content: flex-end;
padding: 15px 45px;
z-index: 3;
align-items: center;
height: 92px;
position: relative;
}
.logo {
margin-right: auto;
margin-left: 0;
z-index: 3;
}
#header .logo a {
display: flex;
}
.logo img {
height: 62px;
}
.drawer--top.drawer-open .drawer-nav {
position: absolute;
}
ul.megamenu-nav {
display: flex;
}
.megamenu-nav > li.nav-item {
padding: 0 15px;
display: block;
z-index: 2;
}
.megamenu-nav > li.nav-item>a {
padding: 0 10px;
}
li.nav-item:last-child {
padding-right: 0;
}
li.nav-item a {
font-size: 15px;
text-decoration: none;
color: #fff;
font-family: 'D-DIN-PRO';
transition: all 0.2s ease;
position: relative;
}
.megamenu-nav > li.nav-item>a:before {
content: '';
width: 0%;
height: 2px;
position: absolute;
background: var(--green);
bottom: -7px;
left: 0;
transition: all 0.3s ease;
}
.megamenu-nav > li.nav-item>a:hover:before,
li.drawer-open a#openTop:before {
width: 100%;
}
#header.opened li.nav-item a {
color: var(--black);
}
#header.opened li.nav-item a:hover,
li.nav-item a:hover,
li.drawer-open a#openTop {
color: var(--green) !important;
}
#header.opened li.nav-item a.fbl-button.dark:hover {
color: var(--dark) !important;
}
li#top {
z-index: 1;
overflow: visible !important;
}
li#top a {
z-index: 3;
}
a#openTop {
position: relative;
}
.drawer-overlay {
background-color: rgb(28 28 28 / 75%);
}
.section.megamenu-container {
padding-top: 100px;
padding-bottom: 80px;
}
.section.megamenu-container .row.in-grid {
max-width: 1000px;
}
.megamenu-submenu li {
margin-bottom: 15px;
}
.megamenu-submenu li a {
font-size: 30px;
}
.megamenu-cta {
padding: 30px 30px 120px 30px;
border: 1px solid #C4C4C4;
border-radius: 15px;
background: url(//www.frontbrakelights.com/wp-content/uploads/2023/09/Mask-Group-10.png);
background-size: 100% auto;
background-position: bottom right;
background-repeat: no-repeat;
}
.megamenu-cta p {
color: var(--black);
font-size: 30px;
margin-bottom: 20px;
line-height: 1.1;
}
a#openTop {
padding-right: 16px;
}
a#openTop:after {
content: '';
width: 8px;
height: 5px;
background: url(//www.frontbrakelights.com/wp-content/uploads/2023/09/menu-arrow-hover.svg);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
right: 0px;
bottom: 6px;
transition: all 0.1s ease;
filter: brightness(100);
}
a#openTop:hover:after {
filter: brightness(1);
}
.drawer-open a#openTop:after {
transform: rotateX(180deg);
filter: brightness(1);
}
@media (min-width: 1000px) {
button.drawer-toggle.drawer-hamburger.drawer-toggle--right {
display: none;
}
} .section.page-default-top {
background-size: cover;
min-height: 100vh;
padding-top: 140px;
margin-top: -92px;
text-align: center;
background-position: center;
position: relative;
}
.columns-wrapper.page-title {
position: relative;
z-index: 1;
}
p.subtitle-top {
font-size: 21px;
text-transform: uppercase;
font-family: 'D-DIN-PRO-Bold';
letter-spacing: 2.1px;
color: var(--green);
opacity: 1;
}
p.subtitle-bottom {
font-size: 21px;
}
.section.page-default-top:after {
content: '';
width: 100%;
height: 45%;
position: absolute;
background: linear-gradient(to bottom, rgb(28 28 28 / 0%), #1C1C1C 98%);
bottom: 0;
left: 0;
}
.light-image {
position: relative;
}
.light-image img.light {
position: absolute;
top: -50%;
left: -380px;
transform: translateY(-53%);
width: 1200px;
}
.columns-wrapper.page-title .col-12 {
position: relative;
padding-top: 25px;
padding-bottom: 80px;
}
.corner {
background: none;
height: 18px;
width: 18px;
position: absolute;
}
#top-left.corner {
top: 0;
left: 0;
border-radius: 18px 0 0 0;
border-top: 2px solid var(--green);
border-left: 2px solid var(--green);
}
#top-right.corner {
top: 0;
right: 0;
border-radius: 0 18px 0 0;
border-top: 2px solid var(--green);
border-right: 2px solid var(--green);
}
#bottom-right.corner {
bottom: 0;
right: 0;
border-radius: 0 0 18px 0;
border-bottom: 2px solid var(--green);
border-right: 2px solid var(--green);
}
#bottom-left.corner {
bottom: 0;
left: 0;
border-radius: 0 0 0 18px;
border-bottom: 2px solid var(--green);
border-left: 2px solid var(--green);
} .section.video-block {
position: relative;
padding-top: 120px;
}
.video-block .video {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: 0;
left: 0;
}
#background-video {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.video-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0; 
opacity: 1;
z-index: -1;
}
.video-overlay {
background: #1C1C1C;
background: linear-gradient(to bottom, rgb(28 28 28 / 15%) 0%, #1C1C1C 98%);  
}
.video-block .col-12 {
text-align: center;
padding-bottom: 50px;
}
.video-block h2 {
font-size: 90px;
}
.corners-block {
position: relative;
}
.video-block .corners-block {
padding: 33px 35px;
} .video-block .divider-line {
display: block;
height: 1px;
width: 100%;
background: #fff;
opacity: 0.3;
margin: 37px 0;
}
.video-cta {
display: flex;
align-items: center;
justify-content: space-between;
}
a.video-link {
position: relative;
color: #fff;
text-transform: uppercase;
font-family: 'D-DIN-PRO-Bold';
letter-spacing: 1px;
padding-left: 50px;
}
a.video-link:hover {
color: var(--green);
}
a.video-link:before {
content: '';
width: 35px;
height: 35px;
position: absolute;
left: 0;
top: -9px;
background: url(//www.frontbrakelights.com/wp-content/uploads/2023/09/video.svg);
background-size: contain;
background-repeat: no-repeat;
} .section.page-default-top.contact .columns-wrapper.page-title .col-12 {
position: relative;
padding-top: 0px;
padding-bottom: 10px;
}
.section.page-default-top.contact h1 {
font-size: 90px;
margin-bottom: 40px;
}
.columns-wrapper.contact-block {
background: var(--green);
border-radius: 18px;
padding: 100px 70px 60px 70px;
text-align: left;
}
.columns-wrapper.contact-block .col-7.dark {
padding-left: 50px;
}
.contact-block .col-5.dark {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contact-call {
display: flex;
align-items: center;
gap: 19px;
}
.contact-call .image {
width: 76px;
height: 76px;
border-radius: 50%;
background-size: 25px;
background-repeat: no-repeat;
background-position: center;
border: 1px solid rgb(28 28 28 / 20%);
}
.contact-call span {
color: rgb(28 28 28 / 70%);
}
.contact-call span.number {
color: rgb(28 28 28 / 100%);
font-size: 21px;
font-family: 'D-DIN-PRO-Bold'
} .wpcf7-form label {
font-size: 15px;
line-height: 1.4;
color: rgb(28 28 28 / 60%);
}
.wpcf7-form textarea, 
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"] {
border: none;
border-bottom: 1px solid rgb(28 28 28 / 25%);
width: 100%;
background: transparent;
margin-bottom: 40px;  
height: 45px;
font-size: 15px;
color: var(--black);
font-family: 'D-DIN-PRO';
padding: 10px 15px;
}
.wpcf7-form textarea {
height: 100px;
}
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus {
outline: none;
}
.columns-wrapper.middle.gdpr-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.wpcf7 input[type="checkbox"]  {
padding: 0px;
-webkit-appearance: none;
width: 0px !important;
margin: 0;
}
span.wpcf7-list-item label {
display: flex;
}
.wpcf7-list-item {
margin: 0;
}
span.wpcf7-list-item-label {
position: relative;
padding-left: 35px;
font-size: 15px;
line-height: 1.1;
color: var(--black);
cursor: pointer;
}
span.wpcf7-list-item-label a {
text-decoration: underline;
color: var(--black);
}
span.wpcf7-list-item-label:before {
content: '';
width: 25px;
height: 25px;
position: absolute;
border-radius: 5px;
display: block;
left: 0;
top: 50%;
transform: translateY(-50%);
background: rgb(28 28 28 / 30%);
}
span.wpcf7-list-item-label:after {
content: '';
width: 25px;
height: 25px;
position: absolute;
border: none;
border-radius: 5px;
display: block;
left: 0px;
top: 50%;
transform: translateY(-50%) scale(0);
background: #1C1C1C url(//www.frontbrakelights.com/wp-content/uploads/2023/09/icon-check.svg);
background-size: 15px;
background-repeat: no-repeat;
background-position: center;
transition: all 0.2s ease;
}
input[type="checkbox"]:checked + span.wpcf7-list-item-label:after {
transform: translateY(-50%) scale(1);
}
span.wpcf7-not-valid-tip {
background: transparent;
box-shadow: none !important;
color: #b80a0a !important;
font-size: 14px;
bottom: -10px;
position: absolute;
right: 0;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
background: #b80a0a;
border-color: #b80a0a;
color: #fff;
}
.gdpr-wrapper span.wpcf7-not-valid-tip {
bottom: -40px;
right: auto;
left: 0;
}
button.contact-btn {
padding: 17px 70px 18px 30px;
border: none;
border-radius: 30px;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
font-family: 'D-DIN-PRO-Bold';  
display: inline-block;
color: #fff;
background: #1C1C1C;
cursor: pointer;
position: relative;
}
button.contact-btn:hover {
color: var(--green);
}
button.contact-btn:after {
content: '';
width: 16px;
height: 15px;
background: url(//www.frontbrakelights.com/wp-content/uploads/2023/09/right_arrow.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
.inputfield {
position: relative;
}
.inputfield:before {
content: "";
left: 0;
bottom: 40px;
z-index: 1;
background: #1D1D1D;
height: 1px;
position: absolute;
transition: all 0.35s ease-in-out;
width: 0;
}
.inputfield.textarea:before {
bottom: 43px;
}
.inputfield.active:before {
left: 0;
width: 100%;
}
.inputfield.active label {
opacity: 1;
transform: translateY(-15px);
}
.inputfield label {
position: absolute;
margin-left: 15px;
z-index: 1;
transition: all 0.2s ease-in-out;
} .archived-posts {
display: flex;
flex-wrap: wrap;
position: relative;
border-top: 1px solid rgb(255 255 255 / 30%);
}
.archived-posts a.archive-item:nth-child(1n) {
padding: 40px 35px 40px 0px;
border-right: 1px solid rgb(255 255 255 / 30%);
}
.archived-posts a.archive-item:nth-child(2n) {
padding: 40px 0px 40px 35px;
border-right: none;
}
.archived-posts a.archive-item {
flex: 0 0 50%;
border-bottom: 1px solid rgb(255 255 255 / 30%);
}
.post-thumbnail {
position: relative;
width: 100%;
padding-bottom: 60%;
overflow: hidden;
border-radius: 15px;
}
.post-thumbnail img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.post-title h3 {
margin-top: 30px;
margin-bottom: 18px;
color: #fff;
transition: all 0.3s ease;
}
a.archive-item:hover h3 {
color: var(--green);
text-decoration: underline;
}
.post-content {
display: flex;
align-items: flex-start;
}
.date-cat {
flex: 0 0 150px;
padding-right: 25px;
}
time.entry-date {
color: rgb(255 255 255 / 70%);
font-size: 15px;
}
.category {
color: var(--green);
} .columns-wrapper.selected-posts .col-6 {
padding: 0;
}
.columns-wrapper.selected-posts {
padding-left: 1%;
padding-right: 1%;
}
.first-post {
border-top: 1px solid rgb(255 255 255 / 30%);
padding: 25px 35px 25px 0px;
}
.popular-posts {
border-top: 1px solid rgb(255 255 255 / 30%);
display: flex;
flex-direction: column;
justify-content: flex-start;
border-left: 1px solid rgb(255 255 255 / 30%);
margin-left: -1px;
height: calc(100% - 26.5px);
}
.popular-posts a.archive-item-popular {
display: flex;
align-items: center;
gap: 30px;
padding-left: 35px; 
padding-top: 25px;
padding-bottom: 25px;
border-bottom: 1px solid rgb(255 255 255 / 30%);
}
.popular-posts a.archive-item-popular:last-child {
border-bottom: none;
}
a.archive-item-popular .post-thumbnail {
position: relative;
width: 100%;
padding-bottom: 30%;
overflow: hidden;
border-radius: 15px;
flex: 0 0 45%;
}
a.archive-item-popular h3 {
font-size: 20px;
transition: all 0.3s ease;
}
a.archive-item-popular:hover h3 {
color: var(--green);
text-decoration: underline;
}
a.archive-item-popular .date-cat {
display: flex;
margin-top: 25px;
gap: 15px;
}
h4.article-title {
text-transform: uppercase;
font-size: 15px;
letter-spacing: 2px;
margin-bottom: 10px;
}
.section.blog-title .col-12 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.section.blog-title h1 {
font-size: 90px;
}
ul.category-list {
display: flex;
gap:3px;
}
ul.category-list li a {
font-size: 15px;
text-transform: uppercase;
color: #fff;
font-family: 'D-DIN-PRO-Bold';
letter-spacing: 1px;
padding: 5px 17px;
background: transparent;
transition: all 0.3s ease;
}
ul.category-list li.active a,
ul.category-list li a:hover {
color: var(--green);
background: rgb(144 220 67 / 20%);
border-radius: 26px;
}
body.archive.category .section.blog-title h1 {
font-size: 45px;
max-width: 430px;
}
body.archive.category .section.blog-title {
padding-top: 35px;
} img.image-light {
position: absolute;
z-index: -1;
top: -300px;
width: 1100px;
right: -110px;
}
.section.single-blog-header {
position: relative;
padding-top: 70px;
padding-bottom: 70px;
}
.section.single-blog-header .row.in-grid {
max-width: 990px;
}
.section.single-blog-header h1 {
font-size: 45px;
margin-bottom: 40px;
}
.meta-info {
display: flex;
gap: 30px;
margin-bottom: 40px;
}
.meta-info a {
color: var(--green);
}
.single-post-image {
position: relative;
width: 100%;
padding-bottom: 60%;
overflow: hidden;
border-radius: 15px;
}
.single-post-image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.section.single-post-content .row.in-grid {
max-width: 600px;
}
.section.single-post-content {
padding-bottom: 110px;
}
.section.single-post-content * {
width: auto !important;
} 
p.wp-caption-text {
font-size: 12px;
text-align: center;
opacity: 0.5;
margin: 5px 0;
} .post-full-content{
padding-bottom: 40px;
margin-bottom: 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);    
}
.share-buttons,
.share-buttons a {
display: flex;
align-items: center;
}
.share-buttons a {
margin-left: 20px;
gap: 10px;
color: rgb(255 255 255 / 70%);
}
.share-buttons a img {
max-width: 25px;
}
.section.post-widget h2 {
font-size: 90px;
margin-bottom: 20px;
}
.section.post-widget .columns-wrapper.selected-posts {
border-bottom: 1px solid rgb(255 255 255 / 30%);
}
.section.post-widget .popular-posts {
height: 100%;
}
.section.post-widget .read-more {
text-align: center;
padding-top: 25px;
} .section.home-1 {
min-height: 100vh;
margin-top: -92px;
background-image: url(//www.frontbrakelights.com/wp-content/uploads/2023/09/hero.jpg);
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
img.light-image-1 {
position: absolute;
width: 1200px;
right: -500px;
bottom: -200px;
}
.section.home-1 h1 {
font-size: 45px;
max-width: 700px;
}
.section.home-1 .row.in-grid {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.section.home-1 .columns-wrapper.middle {
position: relative;
margin-bottom: 65px;
padding: 50px 80px;
}
.section.home-1 .fbl-button {
margin-top: 15px;
}
.section.home-1 .overlay-top {
position: absolute;
width: 100%;
height: 20vh;
left: 0;
top: 0;
background: linear-gradient(to bottom, rgb(28 28 28 / 70%), rgb(28 28 28 / 0%));
}
.section.home-1 .overlay-bottom{
position: absolute;
width: 100%;
height: 45vh;
left: 0;
bottom: 0;
background: linear-gradient(to top, rgb(28 28 28 / 100%) 5%, rgb(28 28 28 / 0%));
}
.section.home-1 h1 span {
text-decoration: underline;
text-decoration-thickness: 2px;
}
.section.home-2 {
padding-top: 120px;
}
.home-2 .col-3.numbers-title {
display: flex;
align-items: center;
}
.home-2 .col-3.numbers-title img {
max-width: 70px;
margin-right: 16px;
}
.home-2 .col-3.numbers-title h4 {
font-size: 21px;
}
.home-2 .columns-wrapper {
align-items: baseline;
}
.home-2 .columns-wrapper .col-9 {
padding-left: 20px;
}
.numbers-item {
display: flex;
align-items: center;
position: relative;
border-bottom: 1px solid rgb(255 255 255 / 30%);
padding-bottom: 40px;
margin-bottom: 40px;
}
.numbers-item:nth-child(3) {
border-bottom: none;
margin-bottom: 0;
}
.numbers-item p.number-count {
font-size: 120px;
color: var(--green);
flex: 0 0 50%;
line-height: 1;
opacity: 1;
}
p.number-info {
padding-right:35px;
}
.numbers-item img {
position: absolute;
max-width: 35px;
right: 0;
top: 50%;
transform: translateY(-50%);
margin-top: -20px;
}
.section.home-3 {
padding-top: 80px;
padding-bottom: 150px;
position: relative;
}
img.light-image-2 {
position: absolute;
z-index: -1;
max-width: 1300px;
top: 50%;
left: -180px;
transform: translateY(-53%);
}
.home-3 img.illustration {
border-radius: 18px;
}
.home-3 .col-6.image {
padding-right: 100px;
}
.home-3 h2 {
padding-right: 160px;
position: relative;
}
.home-3 h2 img {
position: absolute;
right: 0;
width: 90px;
bottom: 0;
}
.home-3 .divider-line {
position: relative;
height: 1px;
width: 100%;
background: rgba(255,255,255,0.3);
margin: 40px 0;
}
.home-3 .col-6 .columns-wrapper.middle p {
max-width: 340px;
}
.home-3 .col-6 .columns-wrapper.middle {
justify-content: space-between;
}
.section.home-4 .columns-wrapper {
position: relative;
padding: 55px 0;
}
.section.home-4 h2 {
font-size: 90px;
}
.section.home-4 h2 span {
color: var(--green);
}
.section.home-5 img {
width: 100vw;
height: auto;
margin-top: -90px;
position: relative; 
min-height: 645px;
object-fit: cover;
}
.section.home-6 {
background: #fff;
margin-top: -1px;
padding-bottom: 150px;
}
.section.home-6 .row.in-grid {
margin-top: -150px;
position: relative;
z-index: 2;
}
.home-6 h4 {
font-family: 'D-DIN-PRO-Bold';
font-size: 21px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
}
.home-6 .columns-wrapper.areas-boxes .col-6 {
padding-left: 5px;
padding-right: 5px;
margin-bottom: 10px
}
a.box-inner {
background: rgb(139 138 138 / 10%);
border: 1px solid rgba(28, 28, 28, 0.1);
display: flex;
flex-direction: column;
height: 100%;
border-radius: 15px;
padding: 43px 40px 18px 45px;
position: relative;
justify-content: space-between;
min-height: 290px;
transition: all 0.3s ease;
}
a.box-inner:hover {
background: var(--green);
border-color: var(--green);
}
a.box-inner img {
position: absolute;
width: 62px;
right: 40px;
top: 43px;
}
a.box-inner .inner-bottom {
display: flex;
align-items: center;
min-height: 4em;
}
a.box-inner .inner-bottom p {
flex: 0 0 50%;
}
a.box-inner .box-button {
flex: 0 0 50%;
position: relative;
padding-left: 75px;
text-transform: uppercase;
letter-spacing: 1px;  
}
a.box-inner .box-button:before {
content: '';
background: transparent;
border: 1px solid var(--black);
left: 0;
top: 50%;
width: 50px;
height: 50px;
position: absolute;
border-radius: 50%;
transform: translateY(-50%);
background-image: url(//www.frontbrakelights.com/wp-content/uploads/2023/09/plus.svg);
background-size: 15px;
background-repeat: no-repeat;
background-position: center;
transition: all 0.3s ease;
}
a.box-inner:hover .box-button:before {
background: #fff;
border: 1px solid #fff;
top: 50%;
position: absolute;
border-radius: 50%;
transform: translateY(-50%) scale(1.05);
background-image: url(//www.frontbrakelights.com/wp-content/uploads/2023/09/plus.svg);
background-size: 15px;
background-repeat: no-repeat;
background-position: center;
}
img.light-image-3 {
position: absolute;
width: 1500px;
top: -800px;
right: -950px;
opacity: 0.6;
}
.section.home-7.dark {
background: #fff;
position: relative;
padding-bottom: 5px;
}
img.light-image-4 {
position: absolute;
width: 1200px;
top: -400px;
left: -450px;  
z-index: 1;
}
.home-7 .row.in-grid {
position: relative;
z-index: 2;
}
.home-7 .col-12 img {
position: absolute;
width: 110px;
top: 0;
}
.home-7 h2 {
font-size: 90px;
padding-left: 200px;
margin-bottom: 80px;
}
.home-7 h2 .underline {
text-decoration: underline;
text-decoration-thickness: 3px;
}
.home-7 h2 .green {
color: var(--green);
}
p.align-right {
text-align: right;
}
.home-7 .divider-line {
display: block;
height: 1px;
width: 100%;
background: #1C1C1C;
opacity: 0.3;
margin: 37px 0;
}
.section.home-8 {
background: #fff;
padding-top: 30px;
padding-bottom: 70px;
}
.section.home-8 .row.in-grid {
position: relative;
z-index: 2;
}
span.green {
color: var(--green);
}
.section.home-8 h2 {
padding-bottom: 20px;
}
.homeslider-wrapper {
position: relative;
}
.homeslider-item img {
width: 100%;
height: auto;
}
.slider-content {
margin-top: -200px;
position: relative;
width: calc(50% + 40px);
margin-left: auto;
margin-right: 0;
padding: 40px 240px 45px 40px 
}
.slider-content h3 {
font-size: 21px;
padding-bottom: 10px;
}
.button-group {
position: absolute;
right: 40px;
bottom: 180px;
z-index: 10;
}
button.button.button--previous,
button.button.button--next {
width: 60px;
height: 60px;
background: var(--black);
border: none;
border-radius: 50%;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
}
button.button.button--next {
margin-left: 20px;
}
button.button.button--previous:hover,
button.button.button--next:hover {
background: var(--green);
}
button.button.button--previous:before {
content: '';
border: solid #fff;
border-width: 0 1px 1px 0;
display: inline-block;
padding: 5px;
transform: rotate(135deg) translate(-50%,-50%);
-webkit-transform: rotate(135deg) translate(-50%,-50%);
position: absolute;
left: 50%;
top: 50%;
transform-origin: top left;
margin-left: 2px;
}
button.button.button--next:before {
content: '';
border: solid #fff;
border-width: 0 1px 1px 0;
display: inline-block;
padding: 5px;
transform: rotate(-45deg) translate(-50%,-50%);
-webkit-transform: rotate(-45deg) translate(-50%,-50%);
position: absolute;
left: 50%;
top: 50%;
transform-origin: top left;
margin-left: -2px;
}
ul.slider-dots {
margin-top: 40px;
display: flex;
align-items: flex-start;
gap: 40px;
}
ul.slider-dots li {
flex: 1;
text-align: center;
padding-top: 20px;
border-top: 2px solid rgb(155 155 155 / 30%);
cursor: pointer;
}
ul.slider-dots li:hover,
ul.slider-dots li.slick-active {
border-top: 2px solid var(--green); 
}
span.dots__item p {
font-size: 21px;
opacity: 1;
}
span.dots__item p span {
font-size: 15px;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
padding-left: 18px;
}
span.dots__item p span:before {
content: '';
width: 11px;
height: 12px;
position: absolute;
top: 2px;
left: 0;
}
span.dots__item p.standard span:before {
background: #70E000;
}
span.dots__item p.dangerous span:before {
background: #FDA304;
}
.section.home-8 .col-12.center {
text-align:center;
padding-top: 70px;
}
.page-template-template-home .section.post-widget {
padding-top: 130px;
}
.page-template-template-home .video-overlay {
height: 101%;
} .cb-tagreel {
position: relative;
}
.cb-tagreel-content {
padding: 200px 0;
}
.cb-tagreel-row {
display: flex;
position: relative;
text-align: center;
white-space: nowrap;
}
.cb-tagreel-item {
position: relative;
line-height: 100%;
font-size: 90px;
line-height: 1.2;
flex: 0 0 50%;
padding: 0px 90px 0 240px;
color: #fff;
}
.cb-tagreel-item span {
position: relative;
display: inline-block;
z-index: 1;
}
.cb-tagreel-item:before {
content: '';
position: absolute;
width: 150px;
height: 1px;
background: #fff;
left: 0;
top: 55px;
}
.cb-tagreel-items {
overflow: hidden;
cursor: default;
}
img.light-footer {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-40%, -56%);
z-index: -1;
width: 1300px;
height: auto;
}
footer#footer {
overflow: hidden;
}
.section.footer-top .row.in-grid,
.section.footer-bottom .row.in-grid {
max-width: 1310px;
}
.section.footer-top {
padding-bottom: 70px;
}
img.logo-footer {
max-width: 50px;
margin-bottom: 22px;
}
.footer-top a.fbl-button {
margin-top: 25px
}
h5.footer-title {
font-size: 15px;
color: rgb(255 255 255 / 70%);
}
.menu-footer-1 {
margin-top: 30px;
}
.menu-footer-1 li.menu-item {
padding-bottom: 15px;
}
.menu-footer-1 li.menu-item a {
font-size: 21px;
color: #fff;
}
.menu-footer-2 li.menu-item {
padding-bottom: 12px;
}
.menu-footer-2 li.menu-item a {
font-size: 15px;
color: #fff;
}
.menu-footer-1 li.menu-item a:hover,
.menu-footer-2 li.menu-item a:hover {
color: var(--green);
}
.footer-bottom {
padding-bottom: 70px;
}
.social-icons {
display: flex;
gap: 20px;
margin-top: 16px;
}
.social-icons img {
max-width: 26px;
height: auto;
}
.social-icons a:hover {
opacity: 0.5;
}
.footer-bottom .col-9 {
display: flex;
justify-content: space-between;
align-items: center;
} .partners {
display: flex;
gap: 50px;
}
.partners img {
max-height: 40px;
} .language-switcher {
position: relative;
padding: 0;
width: 70px;
margin-left: 80px;
}
.language-switcher #top-left,
.language-switcher #top-right,
.language-switcher #bottom-right,
.language-switcher #bottom-left {
border-color: #fff;
border-width: 1px;
height: 12px;
width: 12px;
}
.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
padding-right: 0;
font-family: 'D-DIN-PRO';
letter-spacing: 1px;
}
.wpml-ls-legacy-dropdown a {
display: block;
text-decoration: none;
color: #fff;
border: none;
background-color: transparent;
padding: 13px 18px;
border-radius: 14px;
}
.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after {
content: "";
vertical-align: middle;
display: inline-block;
border-width: 0 1px 1px 0 !important;
border: solid #fff;
border-top: none;
position: absolute;
padding: 2px;
right: 14px;
top: calc(50% - 0.175em);
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
border-top: none !important;
}
.wpml-ls-legacy-dropdown .wpml-ls-current-language:hover>a, 
.wpml-ls-legacy-dropdown a:focus, .wpml-ls-legacy-dropdown a:hover {
color: #70e000;
background: transparent;
}
.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer>ul {
text-align: left !important;
}
.wpml-ls-legacy-list-horizontal {
border: none !important;
padding: 0 !important;
margin-top: 25px;
}
.wpml-ls-legacy-list-horizontal .wpml-ls-item {
margin-right: 10px !important;
}
.wpml-ls-legacy-list-horizontal a {
display: block;
text-decoration: none;
padding: 0px;
width: 40px;
height: 40px;
line-height: 25px !important;
color: #fff;
border: 1px solid transparent;
text-align: center;
border-radius: 50%;
transition: all 0.3s ease;
color: rgb(255 255 255 / 70%);
}
li.wpml-ls-slot-footer a:hover,
li.wpml-ls-slot-footer.wpml-ls-current-language a {
border: 1px solid #fff !important;
color: #fff;
} @media (max-width: 1000px) {
.main-menu.megamenu {
display: none;
}
#header {
padding: 15px 20px;
height: 72px;
}
.logo img {
height: 42px;
}
.language-switcher {
margin-left: auto;
margin-right: 60px;
}
.drawer-hamburger,
.drawer-hamburger:hover {
position: absolute;
top: 12px;
margin-right: 10px;
padding: 13px 10px 25px;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
background-color: #fff;
}
.drawer--right .drawer-nav {
right: -100vw;
}
.drawer-nav {
background-color: var(--black);
padding: 80px 30px 20px 30px;
height: 100vh;
width: 100vw;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 25px;
}
.drawer--right.drawer-open .drawer-hamburger {
right: 0px;
position:fixed;
}
.drawer-nav ul.menu > li.menu-item {
padding-bottom: 15px;
}
.drawer-nav ul li.menu-item a {
color: #fff;
font-size: 28px;
}
.drawer-nav ul.sub-menu {
margin-left: 20px;
}
.drawer-nav ul.sub-menu li.menu-item {
padding-bottom: 5px;
}
.drawer-nav ul.sub-menu li.menu-item a {
font-size: 22px;
}
.drawer-nav .megamenu-cta {
padding: 20px 20px 80px 20px;
background-color: #fff;
position: relative;
margin-top: auto;
margin-bottom: 50px;
}
.drawer-nav a.fbl-button.dark {
color: var(--black) !important;
}
.drawer-nav .megamenu-cta p {
font-size: 24px;
} .section.home-1 {
margin-top: -82px;
background-position: left 20% center;
}
img.light-image-1 {
right: -550px;
bottom: -300px;
}
.section.home-1 .overlay-bottom {
height: 65vh;
}
.section.home-1 .columns-wrapper.middle {
margin-bottom: 75px;
padding: 40px;
}
.section.home-1 h1 {
font-size: 32px;
margin-bottom: 20px;
}
.section.home-2 {
padding-top: 80px;
position: relative;
}
.home-2 .col-3.numbers-title {
margin-bottom: 20px;
}
.home-2 .col-3.numbers-title img {
max-width: 50px;
}
.home-2 .col-3.numbers-title h4 {
font-size: 18px;
}
.numbers-item {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.numbers-item p.number-count {
font-size: 80px;
flex: 0 0 auto;
}
.section.home-3 {
padding-bottom: 80px;
}
.home-3 .col-6.image {
padding-right: 0px;
padding-bottom: 20px;
}
.home-3 h2 {
padding-right: 70px;
}
.home-3 h2 img {
width: 65px;
}
.home-3 .divider-line {
margin: 20px 0;
}
img.light-image-2 {
top: -300px;
left: -180px;
transform: translateY(0);
width: 900px;
}
.home-3 .col-6 .columns-wrapper.middle p {
margin-bottom: 20px;
}
.section.home-4 .columns-wrapper {
padding: 30px 10px;
}
.section.home-4 h2 {
font-size: 48px;
padding-bottom: 20px;
}
.section.home-5 img {
width: 100vw;
height: auto;
margin-top: 20px;
position: relative;
min-height: 450px;
object-fit: cover;
}
.section.home-6 .row.in-grid {
margin-top: -120px;
}
a.box-inner {
padding: 20px;
min-height: 230px;
}
a.box-inner h2 {
max-width: 200px;
}
a.box-inner img {
right: 20px;
top: 23px;
}
a.box-inner .box-button {
padding-left: 55px;
}
a.box-inner .box-button:before {
width: 40px;
height: 40px;
}
.home-7 .col-12 img {
width: 55px;
}
.home-7 h2 {
font-size: 40px;
padding-left: 75px;
margin-bottom: 40px;
}
img.light-image-4 {
width: 1000px;
top: -500px;
}
.slider-content {
margin-top: -50px;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 30px 30px 100px 30px;
}
.button-group {
right: 20px;
bottom: 140px;
}
ul.slider-dots {
gap: 5px;
}
ul.slider-dots li {
flex: 0 0 24%;
max-width: 24%;
}
span.dots__item p {
font-size: 13px;
line-height: 1.1;
text-align: left;
}
span.dots__item p span {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0px;
display: inline-block;
margin-top: 5px;
}
.video-block h2 {
font-size: 45px;
}
.video-block .corners-block {
padding: 30px 20px;
}
.page-template-template-home .section.post-widget {
padding-top: 80px;
}
.section.post-widget h2 {
font-size: 45px;
}
.first-post {
padding: 25px 0px 25px 0px;
}
.date-cat {
flex: 0 0 90px;
padding-right: 0px;
}
.popular-posts {
border-left: none;
}
.popular-posts a.archive-item-popular {
align-items: flex-start;
gap: 20px;
padding-left: 0px;
}
a.archive-item-popular h3 {
font-size: 15px;
}
a.archive-item-popular .date-cat {
margin-top: 15px;
gap: 5px;
}
a.archive-item-popular time.entry-date, 
a.archive-item-popular .category {
font-size: 12px;
}
.cb-tagreel-content {
padding: 100px 0;
}
.cb-tagreel-item {
font-size: 36px;
padding: 0px 40px 0 120px;
}
.cb-tagreel-item:before {
width: 80px;
top: 22px;
}
img.light-footer {
transform: translate(-30%, -50%);
width: 700px;
}
.section.footer-top {
padding-bottom: 20px;
}
.section.footer-top .col-3,
.section.footer-bottom .col-3{
padding-bottom: 30px;
}
.section.footer-top h3 {
font-size: 30px;
}
.footer-bottom .col-9 {
align-items: flex-start;
flex-direction: column;
gap: 30px;
}
p.footer-copyright {
order: 2;
}
.footer-bottom {
padding-bottom: 30px;
}
.section.page-default-top {
padding-top: 150px;
margin-top: -82px;
min-height: 600px;
}
.columns-wrapper.page-title .col-12 {
padding-top: 30px;
padding-bottom: 60px;
}
.columns-wrapper.page-title h1 {
margin-top: 10px;
margin-bottom: 10px;
}
.light-image img.light {
position: absolute;
top: -100vw;
left: -80vw;
transform: translateY(0);
width: 200vw;
}
.section.page-default-top.contact h1 {
font-size: 45px;
}
.columns-wrapper.contact-block {
padding: 30px;
}
.contact-call {
margin-top: 20px;
margin-bottom: 30px;
}
.columns-wrapper.contact-block .col-7.dark {
padding-left: 0px;
}
.columns-wrapper.middle.gdpr-wrapper {
flex-direction: column;
align-items: flex-start;
gap: 30px;
}
.section.blog-title .col-12 {
align-items: flex-start;
margin-bottom: 30px;
flex-direction: column;
gap: 30px;
}
.section.blog-title h1 {
font-size: 45px;
}
ul.category-list {
flex-wrap: wrap;
}
ul.category-list li {
margin-bottom: 15px;
}
body.archive.category .section.blog-title {
padding-top: 0px;
}
.archived-posts a.archive-item:nth-child(1n) {
padding: 40px 0px 40px 0px;
border-right: none;
}
.archived-posts a.archive-item {
border-bottom: 1px solid rgb(255 255 255 / 30%);
flex: 0 0 100%;
}
.section.single-blog-header h1 {
font-size: 28px;
margin-bottom: 30px;
}
.section.single-blog-header img.image-light {
top: -100px;
width: 600px;
right: -200px;
}
}