@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
* {
box-sizing: border-box;
text-decoration: none !important;
outline: none !important;
padding: 0 0;
margin: 0 0;
font-family: "Open Sans";
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #000;
}
::-webkit-scrollbar-thumb {
background: #ddd;
}
::-moz-selection {
color: #fff;
background: #000;
}
::selection {
color: #fff;
background: #000;
}
html {
width: 100%;
float: left;
}
body {
width: 100%;
float: left;
padding: 0;
margin: 0;
}
.mainContainer {
width: 1266px;
float: left;
}
.jarallax {
position: relative;
}
.jarallax .jarallax-img {
position: absolute;
}
.toggle_icon {
display: none;
float: right;
width: auto;
margin: 0;
position: relative;
height: 34px;
padding: 6px 0px;
z-index: 10;
}
.toggle_icon b {
width: 26px;
height: 3px;
background: #fff;
float: left;
position: relative;
transition: 0.2s ease-in-out;
}
.toggle_icon b::after {
content: "";
position: absolute;
width: 26px;
height: 3px;
background: #fff;
right: 0;
transition: 0.2s ease-in-out;
bottom: -10px;
}
.toggle_icon b::before {
content: "";
position: absolute;
width: 26px;
height: 3px;
background: #fff;
right: 0;
bottom: -20px;
transition: 0.2s ease-in-out;
}
.toggle_icon b.creatCross {
transform: rotate(45deg) translate(0px, 0);
margin: 12px 0 0 0;
}
.toggle_icon b.creatCross:after {
opacity: 0;
}
.toggle_icon b.creatCross:before {
transform: rotate(-90deg) translate(19px, 0px);
}
.responsiveLogo {
display: none;
}
header {
width: 100%;
position: absolute;
display: flex;
justify-content: center;
z-index: 9999;
transition: 0.3s ease-in-out;
}
header .headercontainer {
width: 100%;
float: left;
}
header .headercontainer .headermain {
width: 100%;
float: left;
display: flex;
justify-content: center;
}
header .headercontainer .headermain .navListing {
margin: 11px 0 0 0;
padding: 0;
float: left;
display: flex;
flex-flow: row;
gap: 95px;
align-items: center;
transition: 0.3s ease-in-out;
}
header .headercontainer .headermain .navListing li {
list-style: none;
float: left;
margin: 0;
padding: 0;
position: relative;
}
header .headercontainer .headermain .navListing li a {
float: left;
margin: 0;
padding: 24px 0;
color: #FFF;
font-family: "Open Sans";
font-size: 12px;
font-weight: 700;
letter-spacing: 1.833px;
text-transform: uppercase;
position: relative;
overflow: hidden;
transition: 0.3s ease-in-out;
}
header .headercontainer .headermain .navListing li a::after {
content: "";
position: absolute;
bottom: -1px;
left: -100%;
background-color: #fff;
width: 100%;
height: 3px;
transition: 0.3s ease-in-out;
}
header .headercontainer .headermain .navListing li a:hover::after {
left: 0;
}
header .headercontainer .headermain .navListing li.logoWrap {
margin: 0 0;
}
header .headercontainer .headermain .navListing li.logoWrap a {
font-size: 0;
width: 161px;
height: 14px;
background-image: url(//vossenwheels.com/wp-content/themes/vossen/assets/v2/images/logo.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin: 0;
}
header .headercontainer .headermain .navListing li.logoWrap a::after {
display: none;
}
header .headercontainer .headermain .navListing li.menuBtyn {
margin: 0 0 0 0;
}
header .headercontainer .headermain .navListing li.menuBtyn a {
position: relative;
margin: 0 0 0 47px;
}
header .headercontainer .headermain .navListing li.menuBtyn a::after {
display: none;
}
header .headercontainer .headermain .navListing li.menuBtyn a img {
width: 24px;
float: left;
margin: -4px 0;
}
header.sticky {
background-color: #fff;
box-shadow: 0 8px 9px rgba(0, 0, 0, 0.04);
position: fixed !important;
}
header.sticky .headercontainer .headermain .navListing li {
position: relative;
}
header.sticky .headercontainer .headermain .navListing li a {
color: #000;
}
header.sticky .headercontainer .headermain .navListing li a::after {
background-color: #cb212f;
}
header.sticky .headercontainer .headermain .navListing li.menuBtyn a img {
filter: invert(1);
}
.heroHeader {
width: 100%;
float: left;
height: 935px;
background-color: #000;
margin: 0 0 0 0;
position: relative;
overflow: hidden;
}
.heroHeader .paralaxContain {
width: 100%;
height: 100%;
left: 0;
}
.heroHeader .paralaxContain::after {
content: "";
position: absolute;
width: 100%;
height: 512px;
top: 0;
left: 0;
background: linear-gradient(180deg, #121212c7 5.73%, rgba(18, 18, 18, 0.76) 47.4%, rgba(18, 18, 18, 0) 100%); z-index: 99;
}
.heroHeader .hero { object-fit: cover;
top: 0;
transition: 1.2s ease-in-out;
position: relative;
transform-origin: center; transform: scale(1.32);
z-index: 99;
width: 100%;
height: 100%;
}
.heroHeader.loaded .hero {
opacity: 1;
}
.heroHeader .heroImage {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
top: 0;
position: absolute;
left: 0;
z-index: 10;
opacity: 1 !important;
transition: 0s !important;
}
.heroHeader .heroInfo {
width: 100%;
position: absolute;
top: 162px !important;
z-index: 999;
display: flex;
justify-content: center;
height: calc(100% - 162px);
}
.heroHeader .heroInfo span.text {
width: 100%;
float: left;
position: relative;
transition: 0.5s ease-in-out;
transition-delay: 0.5s;
bottom: -70px;
opacity: 0;
}
.heroHeader .heroInfo span.text h1 {
width: 954px;
float: left;
color: #FFF;
text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
font-size: 150px;
font-weight: 300;
line-height: 91.5%;
letter-spacing: -3px;
}
.heroHeader .heroInfo .gotoBttn {
width: 303px;
padding: 10px 24px 10px 10px;
float: left; background: rgba(22, 22, 22, 0.7);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
margin: 0 0 -80px 0;
display: flex;
align-items: center;
position: absolute;
gap: 16px;
bottom: 80px;
transition: 1.2s ease-in-out;
transition-delay: 0.6s;
opacity: 0;
}
.heroHeader .heroInfo .gotoBttn img.wheel {
min-width: 88px;
max-width: 88px;
height: 88px;
float: left;
-o-object-fit: cover;
object-fit: cover; }
.heroHeader .heroInfo .gotoBttn h4 {
width: 100%;
float: left;
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 700;
}
.heroHeader .heroInfo .gotoBttn h4 small {
width: 100%;
float: left;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
color: #FFF;
}
.heroHeader .heroInfo .gotoBttn img.redArrow {
position: absolute;
right: 24px;
}
.heroHeader.loaded .heroInfo span.text {
opacity: 1;
bottom: 0;
}
.heroHeader.loaded .heroInfo .gotoBttn {
opacity: 1;
margin: 0 0 0 0;
}
.handcraftWrap {
width: 100%;
float: left;
margin: 60px 0 0 0;
display: flex;
justify-content: center;
}
.handcraftWrap .hc__Inner {
width: 100%;
float: left; background: #F8F9FA;
padding: 48px 40px;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
}
.handcraftWrap .hc__Inner article {
width: 467px;
float: left;
}
.handcraftWrap .hc__Inner article h1 {
width: 100%;
float: left;
color: #121212;
font-size: 60px;
font-style: normal;
font-weight: 300;
line-height: 118.182%;
}
.handcraftWrap .hc__Inner article h1 img {
transform: translate(5px, -8px);
}
.handcraftWrap .hc__Inner article a {
float: left;
display: flex;
align-items: center;
gap: 3px;
color: #353535;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1.833px;
text-transform: uppercase;
margin: 30px 0 0 0;
}
.handcraftWrap .hc__Inner .videoContainer {
float: left;
width: 618px;
height: 270px; border: 1px solid rgba(0, 0, 0, 0.16);
overflow: hidden;
position: relative;
}
.handcraftWrap .hc__Inner .videoContainer video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: 1.2s ease-in-out;
transition-delay: 0.2s;
opacity: 0;
transform: scale(1.3);
}
.handcraftWrap .hc__Inner .videoContainer video.animated {
opacity: 1;
transform: scale(1);
}
.handcraftWrap .hc__Inner .videoContainer .playIcon {
position: absolute;
width: 64px;
height: 64px;
background-color: rgba(22, 22, 22, 0.5);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
border-radius: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.handcraftWrap .hc__Inner .videoContainer .playIcon i {
font-size: 20px;
color: transparent;
-webkit-text-stroke: 2px #fff;
}
.catWrap {
width: 100%;
float: left;
display: flex;
justify-content: center;
margin: 98px 0 116px 0;
}
.catWrap .catInner {
width: 100%;
float: left;
}
.catWrap .catInner .catHeader {
width: 100%;
float: left;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.catWrap .catInner .catHeader h2 {
width: 100%;
float: left;
margin: 0;
color: #121212;
text-align: center;
font-size: 48px;
font-style: normal;
font-weight: 300;
line-height: normal;
}
.catWrap .catInner .catHeader p {
width: 545px;
float: left;
text-align: center;
color: #616060;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px;
margin: 12px 0 0 0;
}
.catWrap .catInner .catBoxes {
width: 100%;
float: left;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin: 32px 0 0 0;
}
.catWrap .catInner .catBoxes .catBox {
width: 618px;
height: 495px;
float: left;
overflow: hidden; position: relative;
background-color: #f7f7f7;
}
.catWrap .catInner .catBoxes .catBox::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 38.38%);
z-index: 10;
}
.catWrap .catInner .catBoxes .catBox span {
width: 100%;
float: left;
height: 100%;
opacity: 0;
transform: scale(1.3);
transition: 1.2s ease-in-out;
transition-delay: 0.3s;
}
.catWrap .catInner .catBoxes .catBox span img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: 5s;
}
.catWrap .catInner .catBoxes .catBox.catBox span.animated {
opacity: 1;
transform: scale(1);
}
.catWrap .catInner .catBoxes .catBox:hover img {
transform: scale(1.2);
}
.catWrap .catInner .catBoxes .catBox h2 {
position: absolute;
width: 100%;
left: 0;
bottom: 66px;
text-align: center;
color: #FFF;
text-align: center;
font-size: 60px;
font-style: normal;
font-weight: 300;
line-height: normal;
z-index: 12;
}
.catWrap .catInner .catBoxes .catBox h2 small {
width: 100%;
float: left;
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 26px;
}
.catWrap .catInner .catBoxes .moreCateBtnWrap {
width: 100%;
float: left;
margin: 40px 0 0 0;
text-align: center;
}
.catWrap .catInner .catBoxes .moreCateBtnWrap a {
display: inline-block; border: 1px solid #2B2929;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
display: inline-flex;
padding: 14px 16px;
color: #000;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1.833px;
text-transform: uppercase;
transition: 0.3s ease-in-out;
}
.catWrap .catInner .catBoxes .moreCateBtnWrap a:hover {
background-color: #121212;
border-color: #121212;
color: #fff;
}
.galleryHeader {
width: 100%;
float: left;
height: 473px;
background-color: #000;
position: relative;
overflow: hidden;
margin: 0 0 0px 0;
display: flex;
justify-content: center;
}
.galleryHeader h1 {
width: 100%;
float: left;
margin: 260px 0 0 0;
color: #FFF;
text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
font-size: 100px;
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: -2px;
position: relative;
z-index: 99;
}
.galleryHeader .gHeadBack {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
transition: 1.3s ease-in-out;
transition-delay: 0.3s;
opacity: 0;
}
.galleryHeader.animated .gHeadBack {
opacity: 1;
}
.galleryWrap {
width: 100%;
float: left;
margin: 94px 0;
display: flex;
justify-content: center;
}
.galleryWrap .galleryInner {
width: 100%;
float: left;
}
.galleryWrap .galleryInner .g__nav {
width: 100%;
float: left;
}
.galleryWrap .galleryInner .g__nav .g__link {
width: 50%;
float: left;
text-align: center;
border-bottom: 2px solid #EBEBEB;
text-align: center;
padding-bottom: 17px;
color: #000;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1.833px;
text-transform: uppercase;
transition: 0.4s ease-in-out;
}
.galleryWrap .galleryInner .g__nav .g__link.active {
border-color: #000;
}
.galleryWrap .galleryInner .g__nav .g__link:hover {
border-color: #121212;
color: #121212;
}
.galleryWrap .galleryInner .galleryBoxesWrap {
width: 100%;
float: left;
margin: 40px 0 0 0;
}
.galleryWrap .galleryInner .galleryBoxesWrap .galleryboxWrap {
width: 100%;
float: left;
display: none;
}
.galleryWrap .galleryInner .galleryBoxesWrap .galleryboxWrap:first-child {
display: block;
}
.galleryWrap .galleryInner .galleryBoxesWrap .galleryboxWrap .gBoxWrapInn {
width: 100%;
float: left;
display: flex;
flex-flow: row;
align-items: flex-start;
gap: 30px;
}
.galleryWrap .galleryInner .galleryBoxesWrap .galleryboxWrap .bigBoxVideo {
min-width: 402px;
max-width: 402px;
height: 636px;
float: left;
background-color: #f7f7f7;
overflow: hidden; position: relative;
}
.galleryWrap .galleryInner .galleryBoxesWrap .galleryboxWrap .bigBoxVideo video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.galleryWrap .galleryInner .galleryBoxesWrap .galleryboxWrap .bigBoxVideo::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 38.38%);
z-index: 10;
}
.galleryWrap .galleryInner .galleryBoxesWrap .galleryboxWrap .bigBoxVideo h2 {
width: 100%;
position: absolute;
bottom: 81px;
left: 0;
text-align: center;
color: #fff;
font-size: 60px;
font-style: normal;
font-weight: 300;
line-height: normal;
z-index: 99;
}
.galleryWrap .galleryInner .galleryBoxesWrap .galleryboxWrap .bigBoxVideo h2 small {
width: 100%;
float: left;
color: #fff;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 26px;
}
.galleryWrap .galleryInner .galleryBoxesWrap .galleryboxWrap .galleryMain {
width: 100%;
float: left;
display: flex;
flex-flow: row wrap;
row-gap: 40px;
-moz-column-gap: 24px;
column-gap: 24px;
}
.galleryWrap .galleryInner .galleryBoxesWrap .galleryboxWrap .galleryMain .g__box {
width: 262px;
float: left;
}
.galleryWrap .galleryInner .galleryBoxesWrap .galleryboxWrap .galleryMain .g__box picture {
width: 100%;
float: left;
height: 168px; overflow: hidden;
background-color: #fff;
}
.galleryWrap .galleryInner .galleryBoxesWrap .galleryboxWrap .galleryMain .g__box picture img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: 5s;
}
.galleryWrap .galleryInner .galleryBoxesWrap .galleryboxWrap .galleryMain .g__box h4 {
width: 100%;
float: left;
margin: 16px 0 0 0;
color: #14161D;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 112%;
letter-spacing: -0.32px;
text-transform: capitalize;
transition: 0.3s ease-in-out;
}
.galleryWrap .galleryInner .galleryBoxesWrap .galleryboxWrap .galleryMain .g__box h4 small {
width: 100%;
float: left;
color: #525459;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 150%;
margin: 0;
}
.galleryWrap .galleryInner .galleryBoxesWrap .galleryboxWrap .galleryMain .g__box:hover {
position: relative;
}
.galleryWrap .galleryInner .galleryBoxesWrap .galleryboxWrap .galleryMain .g__box:hover img {
transform: scale(1.2);
}
.galleryWrap .galleryInner .galleryBoxesWrap .galleryboxWrap .galleryMain .g__box:hover h4 {
color: #cb212f;
}
footer {
width: 100%;
float: left;
background: #0e0e0e;
display: flex;
justify-content: center;
}
footer .footerContainer {
width: 1370px;
float: left;
}
footer .footerContainer .footerMain {
width: 100%;
float: left;
padding: 100px 0;
}
footer .footerContainer .footerMain .foot__top {
width: 100%;
float: left;
border-top: 1px solid #363636;
border-bottom: 1px solid #363636;
padding: 30px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
footer .footerContainer .footerMain .foot__top .socialIcons {
float: left;
display: flex;
gap: 30px;
}
footer .footerContainer .footerMain .foot__top .socialIcons a {
float: left;
}
footer .footerContainer .footerMain .foot__top .socialIcons a img {
width: 24px;
}
footer .footerContainer .footerMain .foot__top .logoFooter {
float: left;
}
footer .footerContainer .footerMain .foot__top .requestQuote {
width: 170px;
float: left;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 0;
color: #0e0e0e;
background: #fff;
border: 1px solid #fff;
padding: 10px 0;
transition: all 0.35s ease-in-out;
text-align: center;
}
footer .footerContainer .footerMain .foot__main {
width: 100%;
float: left;
margin: 90px 0;
display: flex;
flex-flow: row wrap;
}
footer .footerContainer .footerMain .foot__main .footBox {
width: 227px;
float: left;
}
footer .footerContainer .footerMain .foot__main .footBox h4 {
width: 100%;
float: left;
margin: 0 0 0 0;
}
footer .footerContainer .footerMain .foot__main .footBox h4 a {
width: 100%;
float: left;
margin: 0 0 0 0;
font-size: 12px;
color: #8D8D8D;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.3s ease-in-out;
}
footer .footerContainer .footerMain .foot__main .footBox h4 a:hover {
color: #EB1F27;
}
footer .footerContainer .footerMain .foot__main .footBox ul {
width: 100%;
float: left;
margin: 25px 0 0 0;
padding: 0;
}
footer .footerContainer .footerMain .foot__main .footBox ul li {
width: 100%;
float: left;
list-style: none;
line-height: 2.14;
}
footer .footerContainer .footerMain .foot__main .footBox ul li a {
width: 100%;
float: left;
font-size: 14px;
color: #fff;
letter-spacing: 0.05rem;
transition: 0.3s ease-in-out;
}
footer .footerContainer .footerMain .foot__main .footBox ul li a:hover {
color: #EB1F27;
}
footer .footerContainer .footerMain .footerEnd {
width: 100%;
float: left;
text-align: center;
border-top: 1px solid #363636;
padding: 30px 0 60px 0;
font-size: 12px;
color: #828282;
letter-spacing: 0.05rem;
}
.vidPopWrap {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.42);
position: fixed;
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
top: 0;
left: 0;
z-index: 9999;
display: none;
}
.vidPopWrap .vidPopMain {
width: 1050px;
height: 650px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.4);
padding: 10px;
transition: 0.5s ease-in-out;
opacity: 0;
}
.vidPopWrap .vidPopMain.active {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
.vidPopWrap .vidPopMain iframe {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.vidPopWrap .vidPopMain .closeBttn {
width: 60px;
height: 60px;
position: absolute;
background-color: #fff;
z-index: 999;
top: -11px;
right: -16px;
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
-webkit-text-stroke: 8px #fff;
cursor: pointer;
transition: 0.3s ease-in-out;
color: #000;
}
.vidPopWrap .vidPopMain .closeBttn:hover {
color: #EB1F27;
} #menu-item-74947 a, #menu-item-74948 a { display:block; padding:36px 40px 32px 40px; text-transform:none; border:none; font-size: 30px; font-weight:200; }
#menu-item-74948 .vossen-menu-columns:before { content:''; background:#fff; display:block; width:30px; height:30px; position:absolute; left:-20px; top:40px; transform: rotate(45deg); }
#menu-item-74947 .vossen-menu-columns:before { content:''; background:#fff; display:block; width:30px; height:30px; position:absolute; left:-20px; top:157px; transform: rotate(45deg); }
.vossen-menu-columns { background:#F5F5F5; overflow:hidden; width:75%; color:#141414; position: absolute; top:0px; right:0px; display:none; height:400px; }
.sub-menu li:hover .vossen-menu-columns { display:block; }
.top-bar-section .dropdown { background:#fff !important; min-height:400px; z-index: 9999;}
.top-bar-section .has-dropdown.not-click:hover > .dropdown { background:#fff; }
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) { background:#fff; color:#141414; font-size:30px; font-weight:200; }
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) { background:#fff; color:#141414; border:none; }
.vossen-menu-columns .menu-intro { text-align:center; padding-top:50px; }
.vossen-menu-columns .menu-intro h2 { font-size:18px; font-weight:200; margin: 3px 10% 8px 10%; letter-spacing: .12em; }
.vossen-menu-columns .menu-intro p { 
font-size: 14px;
margin: 0 10% 20px 10%;
line-height: 23px;
}
.vossen-menu-columns .menu-intro .buttons-row a { background:#EC2028; line-height:normal; padding:18px 64px !important; font-size:11px !important; font-weight:700 !important; letter-spacing:1px; border-radius: 0px; border:none; display:inline-block !important; height:auto; margin:0; }
.vossen-menu-columns .menu-intro .buttons-row a:hover { color:#fff; background:#141414; }
.vossen-menu-columns .menu-galleries { padding-top:50px; }
.vossen-menu-columns .menu-galleries .menu-gallery { padding-left:8px; padding-right:8px; margin-bottom:12px; }
.vossen-menu-columns .menu-galleries .menu-gallery a { padding:0 !important; }
.vossen-menu-columns .menu-galleries .menu-gallery h3 { margin:8px 0 10px 0; white-space: nowrap; overflow: hidden; position:relative; }
.vossen-menu-columns .menu-galleries .menu-gallery h3 a { color:#141414; font-size:13px !important; font-weight:700 !important; letter-spacing:normal; line-height:normal; }
.vossen-menu-columns .menu-galleries .menu-gallery p { font-size:12px; margin:0; }
.vossen-menu-columns .menu-promo { padding-top:50px; padding-left: 1em; }
.vossen-menu-columns .menu-promo a { padding:0 !important; }
.vossen-menu-columns .menu-promo a img { width: 84%; }
li#menu-item-74948 .vossen-menu-columns { display:block; }
li#menu-item-80732 {
display: none;
}
header .headercontainer .headermain .navListing li {
position: static !important;
}
li#menu-item-80733 {
display: none;
}
li#menu-item-80731 {
display: none;
}
.sub-menu { 
top: 111px;
background:#fff;
overflow:hidden;
-webkit-box-shadow: 0 0 27px 0 rgba(0,0,0,.21);
box-shadow: 0 0 27px 0 rgba(0,0,0,.21);
width: 1340px;
position: absolute;
height: 400px;
left: 50%;
display: none;
transform: translate(-50%, 0%);
}
.navListing li:hover ul.sub-menu {
display: block;
}
.sub-menu a::after {
display: none !important;
}
.sub-menu li {
position: static !important;
width: 100%;
}
.top-bar-section ul li#menu-item-74947, .top-bar-section ul li#menu-item-74948 {
clear: both;
width: 25%;
background: #fff;
color: #141414;
font-size: 30px;
font-weight: 200;
border-bottom: 1px solid #cfcfcf;
margin-right: 0;
padding: 0;
float: left;
display: block;
}
#menu-item-74948 a:not(.vossen-menu-columns a) {
text-transform: none;
font-size: 30px;
font-weight: 200;
color: #000;
border-bottom: 1px solid #cacaca;
width: 335px !important;
}
#menu-item-74947 a:not(.vossen-menu-columns a) {
text-transform: none;
font-size: 30px;
font-weight: 200;
color: #000;
border-bottom: 1px solid #cacaca;
width: 335px !important;
}
.vossen-menu-columns .columns {
width: 33.33%;
float: left;
text-align: center;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
.vossen-menu-columns .columns.menu-intro {
display: flex;
flex-flow: column;
align-items: center;
} 
.vossen-menu-columns .menu-galleries.columns {
display: flex;
flex-flow: row wrap;
}
.vossen-menu-columns .menu-galleries.columns .menu-gallery {
width: 50%;
float: left;
}
.vossen-menu-columns .menu-galleries.columns a img {
width: 100%;
}
.vossen-menu-columns .menu-galleries .menu-gallery h3 {
margin: 8px 0 10px 0;
white-space: nowrap;
overflow: hidden;
position: relative;
width: 100%;
text-align: center;
}
.vossen-menu-columns .menu-galleries .menu-gallery h3 a {
color: #000 !important;
width: 100%;
text-align: center;
}
.vossen-menu-columns .menu-galleries .menu-gallery h3 .fader {
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 120px;
z-index: 1000;
background-image: linear-gradient(to right, #ffffff00 , whitesmoke);
}
.vossen-menu-columns .menu-intro .buttons-row a {
color: #fff !important;
}
header {
flex-flow: column !important;
}
.headerBarTop {
width: 100%;
float: left;
display: flex !important;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #3D3D3D;
background: #171717;
transition: 0.3s ease-in-out;
}
.headerBarTop .hbBox {
float: left;
}
.headerBarTop .hbBox ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
.headerBarTop .hbBox ul li {
float: left;
margin: 0;
padding: 0;
border-right: 1px solid #3D3D3D;
display: flex;
flex-flow: row wrap;
align-items: center;
}
#top-bar-right ul li:last-child {
border: 0 !important;
}
.headerBarTop .hbBox ul li a {
color: #8D8D8D;
font-size: 12px;
padding: 10px 24px 10px 18px;
display: block;
transition: all 0.35s;
}
.headerBarTop .hbBox ul li a:hover {
color: #fff;
}
.headerBarTop .hbBox ul li a img {
filter: invert(0);
float: left;
margin: 1px 7px 0 0;
}
.headerBarTop .hbBox ul li b {
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.83px;
line-height: 13px;
margin-right: 7px;
border-left: 1px solid #3D3D3D;
padding: 12px 13px;
background: #474747;
font-family: Helvetica, Arial, sans-serif;
}
.sticky .sub-menu {
top: 73px !important;
}
.sticky .headerBarTop .hbBox ul li {
border-color: #F0F0F0;
}
.sticky .headerBarTop .hbBox ul li b {
border-color: #F0F0F0;
color: #3D3D3D;
}
.sticky .headerBarTop .hbBox ul li a img {
filter: invert(1);
float: left;
margin: 1px 7px 0 0;
}
.sticky .headerBarTop .hbBox ul li a:hover {
color: #000 !important;
}
header.sticky .headercontainer .headermain .navListing {
margin: 8px 0;
}
header.sticky .headerBarTop {
background-color: #fff !important;
border-color: #F0F0F0;
display: none !important;
}
.stkBttn {
position: fixed;
right: 15px;
}
.forMobile {
opacity: 0 !important;
}
@media screen and (min-width: 240px) and (max-width: 900px){
.forDesktop {
display: none;
}
.forMobile {
opacity: 1 !important;
width: 100%;
height: 100%;
object-fit: cover;
}
.headerBarTop {
display: none !important;
}
header.sticky {
background-color: transparent !important;
position: absolute !important;
}
.heroHeader .heroInfo span.text h1 {
width: 100%;
font-size: 67px;
line-height: 70px;
}
.heroHeader .heroInfo {
padding: 0 8px;
}
li#menu-item-74802 {
display: none;
}
li#menu-item-80732 {
display: block;
}
li#menu-item-80733 {
display: block;
}
li#menu-item-80731 {
display: block;
}
header .headercontainer .headermain .navListing {
align-items: flex-start;
background-image: url(//vossenwheels.com/wp-content/themes/vossen/assets/images/logo.png), url(//vossenwheels.com/wp-content/themes/vossen/assets/images/menuBack.jpg);
background-size: 60px, 100%;
background-repeat: no-repeat;
padding: 145px 40px 0 !important;
background-position: 32px 23px, top;
}
.oldStyleNav {
position: absolute !important;
}
header.oldStyleNav .headercontainer .headermain .navListing li a {
color: #fff !important;
font-size: 12px !important;
}
header .headercontainer .headermain .navListing.activeNav {
left: 0;
margin: 0 !important;
}
header.sticky .headercontainer .headermain .navListing li a {
color: #fff;
}
}
@media screen and (min-width: 901px) and (max-width: 1199px){
.navListing li:hover ul.sub-menu {
display: block;
transform: scale(.6) translate(-83%, 0);
transform-origin: top;
left: 50%;
}
}
@media screen and (min-width: 1200px) and (max-width: 1349px){
header .headercontainer .headermain .navListing li.logoWrap {
margin: 0 0px !important;
}
.navListing li:hover ul.sub-menu {
display: block;
transform: scale(.6) translate(-83%, 0);
transform-origin: top;
left: 50%;
}
}
@media screen and (min-width: 1201px) and (max-width: 1499px){
header {
padding: 0 0 !important;
}
} .gallerytopWrap {
width: 100%;
float: left;
background: #0E0E0E;
position: relative;
overflow: hidden;
}
.gallerytopWrap .galleryMainImage {
width: calc(100% - 472px);
height: 100vh;
float: left;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: 0.4s ease-in-out;
}
.gallerytopWrap .galleryMainImage span{
position: absolute;
width: 100%;
height: 100%;
display: none;
z-index: 10;
}
.gallerytopWrap .playVideo {
top: 50%;
z-index: 99;
position: absolute;
left: 50%;
background: rgba(255, 255, 255, 0.40);
backdrop-filter: blur(5px);
width: 92px;
height: 92px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 45px;
color: transparent;
-webkit-text-stroke: 2px #fff;
cursor: pointer;
transform: translate(-50%, -50%);
padding: 0 0 0 10px;
}
.gallerytopWrap .galleryMainImage img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.gallerytopWrap .galleryMainImage span:first-child {
display: block;
}
.gallerytopWrap .galleryThumb {
width: 600px;
position: absolute;
bottom: 64px;
right: 101px;
z-index: 99;
transition: 0.5s ease-in-out;
} .gallerytopWrap .galleryThumb .gtSlide {
width: 100%;
float: left;
display: flex;
gap: 10px;
white-space: nowrap;
cursor: default;
overflow: auto;
overflow: scroll hidden;
scroll-snap-type: x mandatory;
scroll-padding: 0px 1.25rem;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, #000 40%, transparent);
mask-image: linear-gradient(90deg, #000 40%, transparent);
transition: 0.5s ease-in-out;
-ms-overflow-style: -ms-autohiding-scrollbar;
scrollbar-width: none;
}
.gallerytopWrap .galleryThumb .gtSlide::-webkit-scrollbar {
display: none !important;
-webkit-appearance: none;
}
.gallerytopWrap .galleryThumb .gtSlide .thumb {
max-width: 110px;
min-width: 110px;
height: 74px;
float: left;
border: 2px solid rgba(255, 255, 255, 0.20);
white-space: normal;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: 0.3s ease-in-out;
position: relative;
}
.gallerytopWrap .galleryThumb .gtSlide .thumb .playIcon{
width: 31px;
height: 31px;
position: absolute;
background-color: rgba(255, 255, 255, 0.40);
backdrop-filter: blur(5px);
border-radius: 100%;
top: 9px;
left: 9px;
color: transparent;
-webkit-text-stroke: 1px #fff;
display: flex !important;
justify-content: center;
align-items: center;
font-size: 14px;
}
.gallerytopWrap .galleryThumb .gtSlide .thumb.activeThumb {
border: 2px solid rgba(255, 255, 255, 0.90);
}
.gallerytopWrap .galleryThumb .gtSlide .thumb img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.gallerytopWrap .galleryThumb .arrowRight {
position: absolute;
z-index: 9999;
top: 13px;
right: -35px;
color: #fff;
width: 20px;
height: 20px;
cursor: pointer;
font-size: 24px;
-webkit-text-stroke: 3px #0e0e0e;
transition: 0.5s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 100%;
}
.gallerytopWrap .galleryThumb .arrowLeft {
position: absolute;
z-index: 9999;
top: 13px;
left: -35px;
color: #000;
width: 20px;
height: 20px;
cursor: pointer;
font-size: 24px;
-webkit-text-stroke: 3px #fff;
transition: 0.5s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 100%;
}
.gallerytopWrap article {
width: 472px;
top: 180px;
right: 0;
padding: 0 60px 0 60px;
position: absolute;
transition: 0.4s ease-in-out;
display: none;
}
.gallerytopWrap article p {
width: 100%;
float: left;
max-width: 245px;
margin: 0;
font-size: 12px;
font-weight: 700;
line-height: 20.8px;
letter-spacing: 2.4000000954px;
text-align: left;
color: #838383;
text-transform: uppercase;
}
.gallerytopWrap article h1 {
width: 100%;
float: left;
color: #fff;
margin: 16px 0 0 0;
font-size: 50px;
font-style: normal;
font-weight: 700;
line-height: 112%;
text-align: left;
text-transform: uppercase;
}
.gallerytopWrap article .expantBttn {
border: 1px solid #FFF;
display: flex;
padding: 14px 16px;
align-items: center;
gap: 16px;
color: #fff;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1.2px;
text-transform: uppercase;
margin: 24px 0 0 0;
background: #0E0E0E;
float: left;
cursor: pointer;
}
.gallerytopWrap article .targetWheel {
width: 100%;
float: left;
float: left;
margin: 16px 0 0 0;
display: flex;
align-items: center;
gap: 4px;
color: #fff;
font-size: 11px;
font-style: normal;
font-weight: 800;
line-height: normal;
letter-spacing: 1.833px;
text-transform: uppercase;
text-decoration: none !important;
}
.gallerytopWrap .minViewGallery {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
right: 28px;
top: 44px;
transition: 0.5s ease-in-out;
transform: scale(0);
z-index: 999;
}
.gallerytopWrap.animateTop {
position: relative;
z-index: 9999;
}
.gallerytopWrap.animateTop .galleryMainImage {
width: 100% !important;
}
.gallerytopWrap.animateTop article {
right: -472px;
}
.gallerytopWrap.animateTop .minViewGallery {
transform: scale(1);
}
.gallerytopWrap.animateTop .galleryThumb {
width: 1260px !important;
left: inherit;
right: calc(50% - 630px);
}
.gallerytopWrap.animateTop .galleryThumb .gtSlide {
-webkit-mask-image: none !important;
mask-image: none !important;
}
.gallerytopWrap.animateTop .galleryThumb .arrowRight {
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
-webkit-text-stroke-color: #fff;
color: #000;
}
.gallerytopWrap.animateTop .galleryThumb .arrowLeft {
transform: scale(1);
}
.wheelDetailsSection {
width: 100%;
float: left;
padding: 26px 0 117px 0;
display: flex;
flex-flow: column;
align-items: center;
}
.wheelDetailsSection .wheelContainer {
width: 1260px;
float: left;
} .wheelDetailsSection .wheelContainer .wdTop {
width: 100%;
float: left;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0 16px 0; }
.archiveBoxNotice {
width: calc(100% - 263px);
float: right;
border: 1px solid #D9D9D9;
padding: 12px 22px;
border-radius: 8px;
margin: -52px 0 45px 0;
}
.archiveBoxNotice p {
width: 100%;
float: left;
color: #222222;
font-size: 16px;
line-height: 25.6px;
font-weight: 400;
}
.archiveBoxNotice p b {
color: #D52331;
}
.wheelDetailsSection .wheelContainer .wdTop .wDetails {
float: left;
display: flex;
align-items: center;
}
.wheelDetailsSection .wheelContainer .wdTop .wDetails picture {
width: 194px;
height: 194px;
float: left;
margin: 0 69px 0 0;
}
.wheelDetailsSection .wheelContainer .wdTop .wDetails picture img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.wheelDetailsSection .wheelContainer .wdTop .wDetails .dBox {
float: left;
color: #0E0E0E;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1px;
text-transform: uppercase;
display: flex;
flex-flow: column;
}
.wheelDetailsSection .wheelContainer .wdTop .wDetails .dBox small {
float: left;
color: #696969;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 160%;
letter-spacing: 1px;
}
.wheelDetailsSection .wheelContainer .wdTop .wDetails .dBox.veBox {
margin: 0 0 0 118px;
}
.wheelDetailsSection .wheelContainer .wdTop .goDetails {
float: left;
padding: 14px 16px;
background: #FFF;
border: 1px solid #2B2929;
color: #000;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1.2px;
text-transform: uppercase;
transition: 0.3s ease-in-out;
}
.wheelDetailsSection .wheelContainer .wdTop .goDetails:hover {
background-color: #2B2929;
color: #fff;
}
.wheelDetailsSection .wheelContainer .wdMid {
width: 100%;
float: left;
padding: 41px 0 72px 0;
border-top: 1px solid #D9D9D9;
border-bottom: 1px solid #D9D9D9;
display: flex;
justify-content: space-between;
flex-flow: row wrap;
} .wheelDetailsSection .wheelContainer .wdMid .sizes {
width: 366px;
float: left;
}
.wheelDetailsSection .wheelContainer .wdMid .sizes h4 {
width: 100%;
float: left;
color: #1E1E1E;
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: 33.6px; letter-spacing: 2px;
margin: 0 0 24px 0;
}
.wheelDetailsSection .wheelContainer .wdMid .sizes .wmDetails {
width: 100%;
float: left;
display: flex;
flex-flow: column;
gap: 8px;
}
.wheelDetailsSection .wheelContainer .wdMid .sizes .wmDetails p {
width: 100%;
float: left;
color: #222;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 25px;
margin: 0px 0;
padding: 0 0;
}
.wheelDetailsSection .wheelContainer .wdMid .sizes .wmDetails p b {
font-weight: 700;
}
.wheelDetailsSection .wheelContainer .wdMid .finishOption {
width: 200px;
float: left;
}
.wheelDetailsSection .wheelContainer .wdMid .finishOption h4 {
width: 100%;
float: left;
color: #1E1E1E;
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: 33.6px; letter-spacing: 2px;
margin: 0 0 24px 0;
}
.wheelDetailsSection .wheelContainer .wdMid .finishOption .wmDetails {
width: 100%;
float: left;
display: flex;
flex-flow: column;
gap: 33px;
}
.wheelDetailsSection .wheelContainer .wdMid .finishOption .wmDetails .fnBox {
width: 100%;
float: left;
display: flex;
align-items: center;
gap: 17px;
}
.wheelDetailsSection .wheelContainer .wdMid .finishOption .wmDetails .fnBox img {
min-width: 78px;
max-width: 78px;
height: 78px;
-o-object-fit: contain;
object-fit: contain;
}
.wheelDetailsSection .wheelContainer .wdMid .finishOption .wmDetails .fnBox p {
width: 100%;
float: left;
color: #222;
font-size: 14px;
font-weight: 400;
line-height: 22.4px;
margin: 0;
}
.wheelDetailsSection .wheelContainer .wdMid .finishOption .wmDetails .fnBox p b {
font-weight: 700;
white-space: nowrap;
}
.wheelDetailsSection .wheelContainer .wdMid .finishOption .wmDetails .fnBox p i {
text-transform: capitalize;
}
.wheelDetailsSection .wheelContainer .wdMid .outFitted {
width: 306px;
float: left;
}
.wheelDetailsSection .wheelContainer .wdMid .outFitted h4 {
width: 100%;
float: left;
color: #1E1E1E;
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: 33.6px; letter-spacing: 2px;
margin: 0 0 24px 0;
}
.wheelDetailsSection .wheelContainer .wdMid .outFitted .wbDetails {
width: 100%;
float: left;
}
.wheelDetailsSection .wheelContainer .wdMid .outFitted .wbDetails p {
width: 100%;
float: left;
color: #222;
font-size: 14px;
font-weight: 400;
line-height: 22.4px;
margin: 0;
}
.wheelDetailsSection .wheelContainer .wdMid .outFitted .wbDetails p b {
font-weight: 700;
}
.wheelDetailsSection .wheelContainer .vehicleGallries {
width: 100%;
float: left;
margin: 67px 0 0 0;
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.wheelDetailsSection .wheelContainer .vehicleGallries .galleryPart {
width: 834px;
float: left;
}
.wheelDetailsSection .wheelContainer .vehicleGallries .galleryPart h3 {
width: 100%;
float: left;
color: #121212;
font-size: 40px;
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: -1px;
margin: 0 0 0 0;
}
.wheelDetailsSection .wheelContainer .vehicleGallries .galleryPart .vgInner {
width: 100%;
float: left;
display: flex;
flex-flow: row wrap;
margin: 32px 0 0 0;
-moz-column-gap: 24px;
column-gap: 24px;
row-gap: 40px;
}
.wheelDetailsSection .wheelContainer .vehicleGallries .galleryPart .vgInner .vgBox {
width: 226px;
float: left;
}
.wheelDetailsSection .wheelContainer .vehicleGallries .galleryPart .vgInner .vgBox picture {
width: 100%;
float: left;
}
.wheelDetailsSection .wheelContainer .vehicleGallries .galleryPart .vgInner .vgBox picture img {
width: 100%;
}
.wheelDetailsSection .wheelContainer .vehicleGallries .galleryPart .vgInner .vgBox article {
width: 100%;
float: left;
margin: 16px 0 0 0;
}
.wheelDetailsSection .wheelContainer .vehicleGallries .galleryPart .vgInner .vgBox article h5 {
width: 100%;
float: left;
margin: 0 0 0 0;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 112%; letter-spacing: -0.32px;
text-transform: capitalize;
color: #14161D;
}
.wheelDetailsSection .wheelContainer .vehicleGallries .galleryPart .vgInner .vgBox article p {
width: 100%;
float: left;
margin: 2px 0 0 0;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 150%;
color: #525459;
}
.wheelDetailsSection .wheelContainer .vehicleGallries .otherGallleryLinkPart {
width: 280px;
float: left;
display: flex;
flex-flow: column;
gap: 8px;
margin: 86px 0 0 0;
}
.wheelDetailsSection .wheelContainer .vehicleGallries .otherGallleryLinkPart a {
width: 100%;
float: left;
margin: 0;
display: flex;
gap: 8px;
align-items: center;
color: #141414;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.wheelDetailsSection .wheelContainer .vehicleGallries .otherGallleryLinkPart a i {
color: #D52331;
font-weight: 800;
font-size: 23px;
}
body.stopScroll {
overflow: hidden;
}
.single-vossen_gallery header .headercontainer {
background-image: linear-gradient(360deg, rgba(0, 0, 0, 0.00) 2.28%, rgba(0, 0, 0, .62) 95.23%);
padding: 0 0 26px 0;
}
.single-vossen_gallery header.sticky .headercontainer {
background-image: none !important;
padding: 0 !important;
} .iPopupWrap {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
z-index: 99999;
top: 0;
left: 0;
display: none;
backdrop-filter: blur(7px);
}
.ipopContain {
width: 80%;
height: 80%;
background: #fff;
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
transition: 0.4s ease-in-out;
opacity: 0;
}
.iPopupWrap.show .ipopContain {
top: 50%;
opacity: 1;
}
.ipopContain iframe {
width: 100%;
height: 100%;
object-fit: cover;
}
.closeIpop {
position: absolute;
z-index: 99;
background: #f00;
width: 71px;
height: 60px;
display: flex !important;
justify-content: center;
align-items: center;
color: #fff;
font-size: 47px !important;
-webkit-text-stroke: 7px #f00;
right: 0;
top: 0;
cursor: pointer;
} .sideTextAnother {
width: 100px;
float: right;
}
.sideTextAnother strong {
font-size: 14px !important;
}
.sideTextAnother p span {
display: flex;
flex-flow: row;
white-space: nowrap;
gap: 5px;
} .bttnsWrap {
float: left;
display: flex;
gap: 16px;
align-items: center;
}
.bttnsWrap .requestQuoteBtn {
float: left;
padding: 14px 16px;
background: #2B2929;
border: 1px solid #2B2929;
color: #fff;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1.2px;
text-transform: uppercase;
transition: 0.3s ease-in-out;
}
.bttnsWrap .requestQuoteBtn:hover {
background: #fff;
border: 1px solid #2B2929;
color: #2B2929;
}
.blackFrydayFormWrap {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #fff;
z-index: 99999;
display: none;
}
.bffContainer {
width: 100%;
height: 100%;
background-color: #fff;
position: absolute;
top: 0; display: flex;
flex-direction: column;
justify-content: center; transition: 0.5s ease-in-out;
}
.showPop.bffContainer {
left: 0;
opacity: 1;
}
.bffContainer .fitmentSectionContainer::before {
display: none;
}
.bffContainer .fitment-content h2 {
font-family: 'Open Sans';
color: #0E0E0E !important;
text-transform: uppercase;
font-weight: 300;
font-size: 60px;
line-height: 1.2;
margin: 0;
}
.blacfFridayAnchor{ width: 100%; float: left; margin-top: 30px; }
.blacfFridayAnchor a{ float: left; color: #949494; font-family: 'HND-ExtraBold'; font-size: 10px; font-weight: 800; letter-spacing: 1.67px; line-height: 12px; display: inline-block;
text-transform: uppercase; padding: 0 10px 10px 10px; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; border-bottom: 1px solid #666666;
}
.blacfFridayAnchor a.active{ color: #fff; border-bottom: 1px solid #fff; }
.blacfFridayAnchor a:first-child{ padding: 0 0px 10px 0px; }
.bffContainer .blacfFridayAnchor a {
font-family: 'Open Sans' !important;
font-size: 12px !important;
}
.bffContainer .blacfFridayAnchor a.active {
color: #0E0E0E !important;
border-bottom: 1px solid #0E0E0E !important;
}
.bffContainer .blacfFridayAnchor a.activeThing {
color: #0E0E0E !important;
border-bottom: 1px solid #0E0E0E !important;
}
.bffContainer .chosen-new-select .chosen-container-single .chosen-single {
background-color: #fff !important;
height: 60px !important;
border: 1px solid #0E0E0E !important;
color: #0E0E0E !important;
width: 166px;
padding: 0 9px;
}
.bffContainer .custom-field:first-child {
width: 100% !important;
}
.bffContainer .custom-field {
width: 100% !important;
margin: 0 0px 0 11px !important;
}
.bffContainer .chosen-new-select .chosen-container-single .chosen-single span {
background-color: #fff !important;
line-height: 60px !important;
color: #0E0E0E;
font-size: 14px !important;
}
.bffContainer .chosen-new-select .chosen-container-single .chosen-single div {
right: 2px !important;
top: 21px !important;
}
.bffContainer .hf-series-fitment-container .right-select-content {
min-height: unset !important;
}
.bffContainer .hf-series-fitment-container .quote-button-custom-field a.button {
background: #0e0e0e !important;
color: #fff !important;
}
.bffContainer .make_model_year_container {
margin-bottom: 27px !important;
}
.bffContainer .quote-field input.medium {
border: 1px solid #0E0E0E !important;
border-radius: 0px;
background: #fff !important;
height: 59px;
letter-spacing: 1px !important;
color: #0E0E0E !important;
}
.bffContainer .quote-field input.medium::placeholder {
color: #0E0E0E !important;
}
.bffContainer .request_form_text h4 {
color: #616060;
font-size: 16px;
font-family: 'Open Sans';
font-weight: 400;
line-height: 28px;
margin: 0;
}
.bffContainer .request_form_text span {
color: #616060;
font-size: 16px;
font-family: 'Open Sans';
font-weight: 400;
line-height: 28px;
margin: 0;
}
.bffContainer .gform_wrapper .gform_footer input[type="submit"].gform_button {
background: #0e0e0e !important;
color: #fff !important;
}
.bffContainer .gform_wrapper .gform_footer {
padding-top: 0 !important;
}
.bffContainer .request_form_text {
margin-top: -15px !important;
}
.bffContainer .custom-field.bffPage:first-child {
width: 201px !important;
}
.bffPage .chosen-container {
width: 100% !important;
}
.bffPage .chosen-single {
width: 100% !important;
}
.bffContainer .finish_color_box {
box-sizing: border-box !important;
height: 60px !important;
width: 260px !important;
border: 1px solid #666666 !important;
background-color: #fff !important;
color: #949494 !important;
margin: 0px 0 0 13px !important;
font-weight: 400 !important;
text-transform: uppercase;
float: left;
font-family: 'Open Sans' !important;
padding: 0 12px;
}
.bffContainer .finish_color_box::placeholder {
color: #949494 !important;
}
.bffContainer .wheel_size_containerDisplay {
margin-bottom: 20px !important;
}
.bffContainer .chosen-container.chosen-with-drop .chosen-drop {
left: 0 !important;
width: 166px;
}
.bffContainer .chosen-container .chosen-results {
background: #f8f8f8 !important;
}
.bffContainer .chosen-container .chosen-results li {
padding: 9px 15px;
}
.closeFormPop {
position: absolute;
z-index: 999;
top: 0;
right: 0;
width: 80px;
height: 65px;
background: #e7403e;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.closeFormPop i {
font-size: 59px;
-webkit-text-stroke: 9px #e7403e;
color: #fff;
margin: -8px 0 0 0;
}
.pb_info {
width: 100%;
float: left;
padding: 32px;
background-color: #212121;
display: flex;
justify-content: space-between;
align-items: center;
flex-flow: row;
}
.pb_info h3 {
float: left;
color: #FFF;
font-family: 'Open Sans';
font-size: 60px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin: 0;
max-width: 220px;
}
.pb_info h3 b {
width: 100%;
float: left;
font-family: 'Open Sans';
font-size: 24px;
font-weight: 700;
margin: -9px 0 2px 0;
}
.forWheelSize .chosen-drop {
width: 201px !important;
}
.hf-series-fitment-container {
height: unset;
}
.fitment-content {
max-width: 1010px;
margin: 0 auto;
position: relative;
display: flex;
}
.large-5 {
width: 41.66667%;
}
.large-7 {
width: 58.33333%;
}
.right-select-content {
display: flex;
margin-top: 13px;
padding-left: 48px;
}
.make_model_year_container {
width: 100%;
float: left;
display: flex;
}
.quote-button-custom-field {
text-align: right;
}
.quote-button-custom-field a.button {
margin-bottom: 0;
color: #0e0e0e;
background: #fff;
border: 1px solid #fff;
padding: 16px 40px 16px 40px;
transition: all 0.35s;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: -1px;
display: inline-block;
min-width: 200px;
text-align: center;
}
.wheel_size_container {
width: 90%;
float: right;
}
.wheel_size_container #tab-links {
width: 100%;
display: flex;
}
.bffContainer .custom-field.bffPage:first-child {
width: 201px !important;
}
.chosen-new-select {
position: relative;
}
.bffContainer .wheel_size_containerDisplay {
margin-bottom: 20px !important;
width: 100%;
}
#id_request_quote_form_container_quote {
display: none;
}
.bffContainer .request_form_text {
margin-top: -15px !important;
}
.request_form_text_quote h4, .request_form_text_quote span {
color: #616060 !important;
font-size: 16px !important;
font-family: 'Open Sans' !important;
font-weight: 400 !important;
line-height: 28px !important;
margin: 0 !important;
}
.gform_body ul {
list-style: none outside none;
margin: 27px 0 0 0;
display: flex;
flex-flow: row wrap;
gap: 16px;
}
.gform_body ul li .gfield_label {
display: none;
}
.gform_body ul li {
position: relative !important;
}
.large-6 {
width: calc(50% - 8px);
}
.large-12 {
width: 100%;
}
.gform_body ul li .ginput_container_text {
position: relative;
}
.palceholder .star {
position: absolute !important;
color: #f00;
top: 9px;
right: 11px;
}
.bffContainer .quote-field input.medium {
border: 1px solid #0E0E0E !important;
border-radius: 0px;
background: #fff !important;
height: 59px;
letter-spacing: 1px !important;
color: #0E0E0E !important;
width: 100%;
padding: 0 10px;
}
.gform_footer {
text-align: right;
}
body .gform_wrapper .gform_footer input.button, body .gform_wrapper .gform_footer input[type=submit] {
margin-bottom: 0;
color: #0e0e0e !important;
background: #fff !important;
border: 1px solid #fff !important;
padding: 16px 40px 16px 40px !important;
transition: all 0.35s;
font-size: 14px !important;
font-weight: bold;
text-transform: uppercase;
letter-spacing: -1px !important;
display: inline-block;
min-width: 200px !important;
text-align: center;
cursor: pointer;
}
.gform_confirmation_wrapper {
width: 100%;
margin: 25px 0 0 0;
}
.noScroll {
overflow: hidden;
}
@media screen and (min-width: 240px) and (max-width: 1020px) {
.fitment-content {
max-width: unset;
margin: 0 auto;
width: 100%;
position: relative;
display: flex;
flex-flow: column;
gap: 27px;
padding: 0 15px;
}
.small-12 {
width: 100% !important;
}
.bffContainer .fitment-content h2 {
font-size: 36px;
}
.blacfFridayAnchor {
width: 100%;
display: flex;
overflow: auto;
white-space: nowrap;
}
.blacfFridayAnchor::-webkit-scrollbar {
display: none;
}
.bffContainer .blacfFridayAnchor a {
font-size: 11px !important;
width: 100%;
text-align: center;
}
.right-select-content {
padding-left: 0;
}
.make_model_year_container {
flex-flow: column;
gap: 14px;
}
.chosen-select{
width: 100%;
float: left;
border: 1px solid #646464;
padding: 18px 25px !important;
background-color: #fff !important;
border-radius: 0 !important;
color: #000 !important;
min-height: 40px !important;
}
.wheel_size_container {
width: 100%;
float: right;
}
.wheel_size_container #tab-links {
width: 100%;
display: flex;
flex-flow: column;
gap: 15px;
}
.bffContainer .custom-field.bffPage:first-child {
width: 100% !important;
margin: 0 0 0 0 !important;
}
.bffContainer .finish_color_box {
width: 100% !important;
margin: 0px 0 0 0px !important;
}
.bffContainer .custom-field {
margin: 0 0 0 0 !important;
}
.gform_body {
width: 100%;
float: left;
overflow: auto;
max-height: 412px;
}
.gform_body::-webkit-scrollbar {
display: none;
}
}