:root {
--primary: #281e4b;
--primary-dark: #1e40af;
--secondary: #d02a38;
--dark: #1f2937;
--light: #f3f4f6;
--carkey-gray: #6c757d;
--carkey-border: #dee2e6;
}
/*Add Css Custom Here*/
/*#header .menu-vertical {
display: none;
}*/
/*====== Fix bugs Megamenu not showing icon font (26/1/2018) =====*/
@media (min-width: 992px){
.menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li > a { line-height: 24px; height: auto;}
.menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li > a i,
.menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li > a b {
display: inline-block;
}
.menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li.with-sub-menu > a:before{display: none;}
.menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li > a img{position: static; transform: inherit;}
}
/************************************************************************************************
MODULE HOME SLIDER
*************************************************************************************************/
@media (min-width: 768px) {
.section1 {
margin: 0;
}
.section1 > .col-style {
padding: 0;
}
}
.block-sale {
position: relative;
}
.block-sale .sale-img {
height: 100%;
}
.block-sale .sale-img > div {
height: 100%;
}
.block-sale .sale-img a {
border-radius: 0;
height: 100%;
}
.block-sale .sale-img a img {
width: 100%;
height: 100%;
object-fit: cover;
}
.block-sale .sale-info .sub-text {
color: #fff;
font-size: 18px;
font-weight: 400;
margin-bottom: 3px;
text-transform: uppercase;
}
.block-sale .sale-info .sale-title {
font-size: 40px;
margin-bottom: 30px;
font-weight: 500;
color: #fff;
}
.block-sale .sale-info h4.sale-title {
font-size:30px;
}
.block-sale .sale-info .sale-content {
font-size: 14px;
color: #fff;
margin-bottom: 30px;
}
.block-sale .sale-info .button {
border-radius: 5px;
display: inline-block;
padding: 6px 20px;
text-transform: uppercase;
background: transparent;
border: 1px solid #fff;
color: #fff;
font-size: 14px;
font-weight: 600;
pointer-events: auto;
}
.block-sale .sale-info .button:hover {
background: #281e4b;
border: 1px solid #281e4b;
color: #fff;
}
.block-sale .sale-info .view_all {
font-size: 14px;
text-decoration: underline;
font-weight: 500;
text-transform: capitalize;
pointer-events: auto;
}
.startseite-slider {
margin-top:15px;
}
.common-shop .startseite-slider {
margin-top:24px;
}
.block-sale.banner1 {
margin-top: 35px;
margin-bottom: 12px;
}
.common-shop .block-sale.banner1 {
margin-top: 25px;
}
.block-service {
padding-top: 40px;
padding-bottom: 40px;
}
.block-service .service_inner {
border-radius: 20px;
display: flex;
gap: 20px;
align-items: center;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.block-service .service_inner .service-ico {
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
position: relative;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.block-service .service_inner img {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
transition-duration: 0.3s;
display: inline-block;
width: 40px;
height: 40px;
}
.block-service .caption {
position: relative !important;
bottom: unset !important;
left: unset !important;
right: unset !important;
}
.block-service .service_inner .service-info {
flex: 1 auto;
}
.block-service .service_inner .service-info h4 {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin: 0;
text-transform: capitalize;
font-size: 18px;
line-height: 30px;
color: #000;
font-weight: 500;
}
.block-service .service_inner .service-info p {
font-size: 14px;
color: #666;
font-weight: 400;
margin-bottom: 0;
margin-top: 2px;
}
.block-service .service_inner:hover .service-ico {
background-color: #000;
border-radius: 100%;
}
.block-service .service_inner:hover .service-ico img {
transition: all 0.7s;
filter: brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(0%) hue-rotate(338deg) brightness(105%) contrast(105%);
animation-name: elementor-animation-wobble-vertical;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
/***
Test
*/
.Homepage-Hero {
position: relative;
background: url("https://cdn11.bigcommerce.com/s-e8i94i2k1a/images/stencil/original/image-manager/tm-hp-bg.jpg") no-repeat center center fixed;
background-size: cover;
float: left;
width: 100%;
padding: 60px 0; }
@media screen and (min-width: 1499px) {
.Homepage-Hero {
background-size: 100% 100%; } }
.Homepage-Hero > img {
width: 100%;
display: none; }
.Homepage-Hero .container > div {
float: left;
width: 50%;
display: inline-block;
vertical-align: middle; }
.Homepage-Hero .container > div.Homepage-Hero-right {
float: right;
box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.5); }
.Homepage-Hero .Homepage-Hero-Left .FastFreeShipping {
width: 355px;
height: 96px;
background-color: #0a4e66;
border-radius: 6px 48px 48px 6px; }
.Homepage-Hero .Homepage-Hero-Left .FastFreeShipping .left,
.Homepage-Hero .Homepage-Hero-Left .FastFreeShipping .right {
float: left;
display: inline-block;
vertical-align: middle; }
.Homepage-Hero .Homepage-Hero-Left .FastFreeShipping .left {
margin: 15px 20px 15px; }
.Homepage-Hero .Homepage-Hero-Left .FastFreeShipping .right span {
font-size: 14px;
font-weight: bold;
line-height: 20px;
letter-spacing: normal;
color: #ffffff;
margin-top: 14px;
display: inline-block; }
.Homepage-Hero .Homepage-Hero-Left .FastFreeShipping .right span.bottomtxt {
font-size: 12px;
font-weight: normal;
line-height: 18px;
margin-top: 0; }
.Homepage-Hero .Homepage-Hero-Left .FastFreeShipping .right h5, .Homepage-Hero .Homepage-Hero-Left .FastFreeShipping .right .tm_dam {
font-size: 20px;
font-weight: 800;
line-height: 28px;
letter-spacing: normal;
color: #ffffff;
margin: 0 0 2px 0; }
.Homepage-Hero .Homepage-Hero-Left .HeadingTxt h1, .Homepage-Hero .Homepage-Hero-Left .HeadingTxt .tm_dam {
margin: 30px 0 10px 0;
font-size: 42px;
font-weight: 900;
line-height: 50px;
letter-spacing: normal;
color: #0a4e66; }
.Homepage-Hero .Homepage-Hero-Left .HeadingTxt h1 span, .Homepage-Hero .Homepage-Hero-Left .HeadingTxt .tm_dam span {
color: #ed8009; }
.Homepage-Hero .Homepage-Hero-Left .HeadingTxt h4, .Homepage-Hero .Homepage-Hero-Left .HeadingTxt .tm_dam {
font-size: 20px;
font-weight: 900;
line-height: 28px;
letter-spacing: normal;
color: #0a4e66;
margin: 0;
text-transform: uppercase;
padding: 0 131px 0 0; }
.Homepage-Hero .Homepage-Hero-Left .HeadingTxt img {
margin-top: 26px;
max-width: 489px; }
.Homepage-Hero .Homepage-Hero-right {
float: left;
width: 100%;
background: #fff; }
.Homepage-Hero .Homepage-Hero-right .tabs {
border: 0;
list-style: none; }
.Homepage-Hero .Homepage-Hero-right .tabs .tab {
border: 0;
background-color: #dee7ea;
text-align: center;
width: 190px; }
.Homepage-Hero .Homepage-Hero-right .tabs .tab.is-active {
background-color: #fff;
padding: 15px 0 0 0;
margin-top: -15px; }
.Homepage-Hero .Homepage-Hero-right .tabs .tab a {
font-size: 20px;
font-weight: normal;
line-height: 26px;
letter-spacing: normal;
text-align: center;
color: #0a4e66;
padding: 9px 0; }
.Homepage-Hero .Homepage-Hero-right .tabs .tab a span {
display: block;
font-weight: bold; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents {
background: #fff;
margin: 0;
padding: 0; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .tab-content {
padding: 0; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .tab-content .Search-Widget-Recent-Searches {
width: 100%;
float: left;
padding: 30px 30px 20px;
border-bottom: 1px solid #d3d3d3; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .tab-content .Search-Widget-Recent-Searches .Search-Widget-Recent-Top {
width: 100%;
float: left;
margin: 0; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .tab-content .Search-Widget-Recent-Searches .Search-Widget-Recent-Top h3 {
font-size: 24px;
font-weight: 900;
color: #0a4e66;
line-height: 32px;
display: inline-block;
margin: 0px 0px 10px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .tab-content .Search-Widget-Recent-Searches .Search-Widget-Recent-Top a {
float: right;
width: 81px;
line-height: 20px;
padding: 4px 0px;
border-radius: 15px;
border: solid 1px #d3d3d3;
background-color: #ffffff;
font-weight: 800;
text-align: center;
font-size: 12px;
text-transform: uppercase;
margin: 2px 0 0; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .tab-content .Search-Widget-Recent-Searches .Search-Widget-Recent-Result {
width: 100%;
float: left; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .tab-content .Search-Widget-Recent-Searches .Search-Widget-Recent-Result ul {
margin: 0;
list-style: none; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .tab-content .Search-Widget-Recent-Searches .Search-Widget-Recent-Result ul li {
width: 100%;
float: left;
padding: 10px;
border: 1px solid #d5dcde;
border-radius: 4px;
margin-bottom: 10px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .tab-content .Search-Widget-Recent-Searches .Search-Widget-Recent-Result ul li div {
display: inline-block;
vertical-align: middle;
width: 16%;
float: left; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .tab-content .Search-Widget-Recent-Searches .Search-Widget-Recent-Result ul li div.Search-Widget-Recent-Content {
width: 84%;
vertical-align: top; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .tab-content .Search-Widget-Recent-Searches .Search-Widget-Recent-Result ul li div.Search-Widget-Recent-Content p {
margin: 0px;
font-size: 14px;
font-weight: 800;
color: #242424;
line-height: 20px;
display: inline-block;
text-transform: uppercase;
margin-left: 15px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .tab-content .Search-Widget-Recent-Searches .Search-Widget-Recent-Result ul li div.Search-Widget-Recent-Content a {
float: right;
margin: 0px;
width: 67px;
padding: 10px 0px;
border-radius: 20px;
font-size: 14px;
font-weight: 800;
color: #fff;
line-height: 20px;
background: #ed8009;
border: 0px;
text-transform: uppercase; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap {
clear: left;
position: relative;
padding: 0 30px;
margin-top: 30px;
float: left; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap h3 {
font-size: 24px;
font-weight: 900;
color: #0a4e66;
line-height: 32px;
display: inline-block;
margin: 0 0 26px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul {
list-style: none; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li {
display: inline-block; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li > a.is-open {
border: 2px solid #ed8009;
z-index: 11;
background: #fff; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li > a.is-open i {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li > a.is-open:after {
height: 6px;
bottom: -5px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li .navPage-subMenu.is-open {
margin: 0;
left: 0 !important;
right: 0 !important;
top: 148px !important;
padding: 15px 0 0 0;
z-index: 10; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li .navPage-subMenu.is-open#navPages-Search-Widget-Option, .Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li .navPage-subMenu.is-open#navPages-Search-Widget-ZIP {
top: 330px !important; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li .navPage-subMenu.is-open#navPages-Search-Widget-Model {
top: 238px !important; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li .navPage-subMenu.is-open > div {
padding: 0 30px 15px;
display: inline-block;
width: 100%; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li .navPage-subMenu.is-open > div:first-child {
border-bottom: 1px solid #d3d3d3; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li .navPage-subMenu.is-open > div:first-child > .form-input {
width: 290px;
height: 46px;
border-radius: 4px;
border: solid 1px #3a3839;
background-color: #ffffff;
font-size: 16px;
font-weight: normal;
line-height: 46px;
letter-spacing: normal;
color: rgba(36, 36, 36, 0.5); }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li .navPage-subMenu.is-open > div.zipCodeWrap:first-child {
border-bottom: 0;
position: relative; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li .navPage-subMenu.is-open > div.zipCodeWrap:first-child .Zip-Right {
position: absolute;
right: 30px;
top: 66px;
margin: 0; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li .navPage-subMenu.is-open > div.zipCodeWrap .Search-Widget-Location {
margin: 3px 0 10px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li .navPage-subMenu.is-open .Search-Widget-Make-List ul,
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li .navPage-subMenu.is-open .Search-Widget-Model-List ul {
width: 33.33%; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li .navPage-subMenu.is-open .Search-Widget-Option-List ul {
width: 50%; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li:first-child {
width: 160px;
margin-right: 26px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li:first-child > a {
position: relative; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li:first-child > a:before {
content: "";
background: url("https://www.tiremart.com/content/start-here-retina.png") no-repeat center;
background-size: 92px auto;
position: absolute;
height: 42px;
width: 92px;
right: 0;
display: inline-block;
top: -43px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li:first-child > a.is-open:before {
display: none; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li:nth-child(2), .Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li:nth-child(4) {
width: 320px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li:nth-child(3) {
width: 100%;
margin: 21px 0; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap > ul > li:last-child {
width: 160px;
margin-left: 26px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .sr_button {
text-align: center;
padding: 0 0 30px 0; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .sr_button a {
margin: 30px 0 0;
padding: 0;
width: 396px;
height: 62px;
border: 0;
border-radius: 31px;
background-color: #ed8009;
line-height: 62px;
font-size: 26px;
font-weight: 800;
letter-spacing: normal;
text-align: center;
color: #ffffff;
text-transform: uppercase;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .sr_button a:hover {
background: #f7a244;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .sr_button.Search-Widget-Size-Result-Wrap a {
width: 282px;
margin-bottom: 30px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .sr_button.Search-Widget-Size-Result-Wrap .Search-Widget-Size-Result-Txt p {
font-size: 12px;
font-weight: normal;
line-height: 18px;
letter-spacing: normal;
text-align: center;
color: #242424;
margin: -15px 0 0 0;
text-transform: uppercase; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Search-Widget-Result-Txt p {
font-size: 12px;
font-weight: normal;
line-height: 18px;
letter-spacing: normal;
text-align: center;
color: #242424;
margin: 15px 0 -4px 0;
text-transform: uppercase; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches {
width: 100%;
float: left;
border-bottom: 1px solid #d3d3d3;
padding: 30px 30px 20px 30px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Top h3 {
font-size: 24px;
font-weight: 900;
color: #0a4e66;
line-height: 32px;
display: inline-block;
margin: 0 0 10px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Top a {
float: right;
width: 81px;
line-height: 20px;
padding: 4px 0px;
border-radius: 15px;
border: solid 1px #d3d3d3;
background-color: #ffffff;
font-weight: 800;
text-align: center;
font-size: 12px;
text-transform: uppercase;
margin: 2px 0 0; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Result {
width: 100%;
float: left;
padding: 0; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Result ul {
margin: 0;
list-style: none; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Result ul li {
width: 100%;
float: left;
border: 1px solid #d5dcde;
padding: 10px;
border-radius: 4px;
margin-bottom: 10px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Result ul li div {
display: inline-block;
vertical-align: middle;
float: left; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Result ul li div.Widget-Size-Recent-Img {
width: 17%; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Result ul li div.Widget-Size-Recent-Img img {
max-height: 46px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Result ul li div.Widget-Size-Recent-Content {
width: 83%;
vertical-align: top; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Result ul li div.Widget-Size-Recent-Content .Front-Rear-Text {
width: 72%;
display: inline-block;
padding-left: 15px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Result ul li div.Widget-Size-Recent-Content .Front-Rear-Text span {
margin: 0px;
font-size: 14px;
font-weight: 800;
color: #242424;
line-height: 20px;
display: inline-block;
text-transform: uppercase;
margin: 0px;
float: left; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Result ul li div.Widget-Size-Recent-Content .Front-Rear-Text span.Front-Label, .Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Result ul li div.Widget-Size-Recent-Content .Front-Rear-Text span.Rear-Label {
font-size: 12px;
font-weight: normal;
margin-right: 3px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Result ul li div.Widget-Size-Recent-Content .Front-Rear-Text span:nth-child(3) {
clear: left; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Result ul li div.Widget-Size-Recent-Content .Tire-Widget-Size-Text {
width: 72%;
display: inline-block;
padding-left: 15px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Result ul li div.Widget-Size-Recent-Content .Tire-Widget-Size-Text span {
margin: 0px;
font-size: 14px;
font-weight: 800;
color: #242424;
line-height: 20px;
display: inline-block;
text-transform: uppercase;
margin: 0px;
float: left; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Result ul li div.Widget-Size-Recent-Content .Tire-Widget-Size-Text span.Tire-Widget-Size-Label {
font-size: 12px;
font-weight: normal;
margin-right: 3px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Result ul li div.Widget-Size-Recent-Content .Tire-Widget-Size-Text span:last-child {
clear: left; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Recent-Searches .Widget-Size-Recent-Result ul li div.Widget-Size-Recent-Content a {
float: right;
margin: 0px;
width: 67px;
padding: 10px 0px;
border-radius: 20px;
font-size: 14px;
font-weight: 800;
color: #fff;
line-height: 20px;
background: #ed8009;
border: 0px;
text-transform: uppercase; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top {
width: 100%;
float: left;
margin: 30px 0 0 0;
border-bottom: 1px solid #d3d3d3; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size {
width: 100%;
float: left;
position: relative;
padding: 0 30px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size h3 {
font-size: 24px;
font-weight: 900;
color: #0a4e66;
line-height: 32px;
display: inline-block;
padding: 0 30px 0 0;
margin: 0px 0 26px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size h4 {
line-height: 28px;
font-size: 20px;
font-weight: 900;
color: #0a4e66;
margin: 0; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div {
clear: both;
float: left;
width: 100%; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul {
margin: 0 -15px;
list-style: none; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li {
width: 33.33%;
float: left;
padding: 0 15px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li > a.is-open {
z-index: 11;
background: #fff; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li > a.is-open i {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li > a.is-open:after {
height: 4px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li .navPage-subMenu {
margin: 0px;
left: 0 !important;
right: 0 !important;
top: 138px !important;
padding: 0;
z-index: 10; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li .navPage-subMenu#navPages-Front-Rear-Widget-Size-ZIP {
top: 296px !important; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li .navPage-subMenu ul {
margin: 15px 0px 0px;
width: 20%;
float: left;
padding: 0 25px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li .navPage-subMenu ul li a {
padding: 3px 0 3px 5px;
margin-bottom: 5px;
display: inline-block; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li .navPage-subMenu ul:after {
display: block;
content: "";
clear: both; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li .navPage-subMenu > div {
padding: 14px 30px 15px;
display: inline-block;
width: 100%; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li .navPage-subMenu > div.Front-Size-Width-Search {
background: url("../img/WidgetWidth.png") no-repeat 100% 0%; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li .navPage-subMenu > div.Front-Size-Sidewall-Search {
background: url("../img/WidgetSidewall.png") no-repeat 100% 0%; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li .navPage-subMenu > div.Front-Size-Diameter-Search {
background: url("../img/WidgetDiameter.png") no-repeat 100% 0%; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li .navPage-subMenu > div:first-child > .form-input {
width: 206px;
height: 46px;
border-radius: 4px;
border: solid 1px #3a3839;
background-color: #ffffff;
color: rgba(36, 36, 36, 0.5);
font-size: 16px;
font-weight: normal;
line-height: 24px;
letter-spacing: normal; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li .navPage-subMenu > div.itemsList {
padding: 0 30px 0px;
border-top: 1px solid #d3d3d3; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li .navPage-subMenu > div.zipCodeWrap:first-child {
border-bottom: 0;
position: relative; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li .navPage-subMenu > div.zipCodeWrap:first-child .Zip-Right {
position: absolute;
right: 30px;
top: 80px;
margin: 0; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li:nth-child(3) > a {
padding-right: 5px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li:first-child > a {
position: relative; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li:first-child > a:before {
content: "";
background: url("https://www.tiremart.com/content/start-here-retina.png") no-repeat center;
background-size: 92px auto;
position: absolute;
height: 42px;
width: 92px;
right: 0;
display: inline-block;
top: -42px;
left: auto; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div > ul > li:first-child > a.is-open:before {
display: none; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div.Front-Rear-Widget-Size-ZIP {
margin-top: 31px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div.Front-Rear-Widget-Size-ZIP > ul > li > a:before {
display: none; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div.Rear-Wrap {
margin: 30px 0 0 0; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div.Rear-Wrap ul li a:before {
display: none; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div.Rear-Wrap ul li .navPage-subMenu {
top: 236px !important; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div.Rear-Wrap ul li > div .Rear-Size-Width-Search {
background: url("../img/WidgetWidth.png") no-repeat 100% 0%; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div.Rear-Wrap ul li > div .Rear-Size-Sidewall-Search {
background: url("../img/WidgetSidewall.png") no-repeat 100% 0%; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Front-Rear-Widget-Size > div.Rear-Wrap ul li > div .Rear-Size-Diameter-Search {
background: url("../img/WidgetDiameter.png") no-repeat 100% 0%; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .different_rear {
width: 100%;
display: block;
margin: 0 auto;
max-width: 730px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .different_rear .diff_rear_lbl {
width: 304px;
border-radius: 21px;
background-color: rgba(222, 231, 234, 0.5);
color: #242424;
display: inline-block;
line-height: 24px;
padding: 9px 15px;
margin: 15px 0 0;
cursor: pointer; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .different_rear .diff_rear_lbl .open_close_ic {
background: url("../img/plus-desactivated.png") no-repeat center;
height: 24px;
width: 24px;
padding: 0px;
display: inline-block;
vertical-align: middle; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .different_rear .diff_rear_lbl .diff_lbl_name {
font-size: 16px;
padding-left: 6px;
line-height: 24px;
color: #242424;
opacity: 0.5;
display: inline-block;
vertical-align: middle; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .different_rear .diff_rear_lbl .diff-tooltip {
display: inline-block;
vertical-align: middle;
padding-left: 1px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .different_rear .diff_rear_lbl .diff-tooltip:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
opacity: 0.5;
font-family: "Font Awesome 5 Free";
font-size: 16px;
line-height: 1;
letter-spacing: normal;
color: #287e9c; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Widget-Size-different {
width: 100%;
float: left;
margin: 15px 0px 0px; }
.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top .Widget-Size-different span {
width: 228px;
padding: 5px 0px;
font-size: 12px;
border-radius: 15px;
line-height: 20px;
border: solid 1px #d3d3d3;
background-color: #ffffff;
display: inline-block;
text-align: center;
text-transform: uppercase;
font-weight: 800;
cursor: pointer; }
/* --------------------------------------
HERO WRAPPER
--------------------------------------- */
.hero-wrapper {
position: relative;
width: 100%;
padding: 60px 0;
overflow: hidden;
background: #000;
}
.hero-bg img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.25;
z-index: 1;
}
.hero-wrapper .container {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
}
/* --------------------------------------
HERO LEFT
--------------------------------------- */
.hero-left {
width: 50%;
color: #fff;
}
.hero-left h1 {
font-size: 42px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 15px;
color: #fff;
}
.hero-left p {
font-size: 18px;
line-height: 1.5;
margin-bottom: 25px;
}
/* --------------------------------------
BADGE
--------------------------------------- */
.hero-badge {
display: flex;
align-items: center;
background: rgba(255,255,255,0.08);
border-radius: 10px;
padding: 10px 15px;
margin-bottom: 20px;
}
.hero-badge img {
width: 40px;
margin-right: 10px;
}
.hero-badge span {
font-weight: 700;
font-size: 16px;
}
.hero-badge p {
margin: 0;
font-size: 14px;
opacity: 0.8;
}
/* --------------------------------------
HERO ICONS (trust icons)
--------------------------------------- */
.hero-icons img {
width: 110px;
margin-right: 10px;
}
/* --------------------------------------
HERO RIGHT (SEARCH BOX)
--------------------------------------- */
.hero-right {
width: 45%;
}
.search-box {
background: #fff;
border-radius: 12px;
padding: 25px;
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
/* --------------------------------------
TABS
--------------------------------------- */
.tabs {
display: flex;
border-bottom: 2px solid #eee;
margin-bottom: 15px;
}
.tabs li {
padding: 10px 18px;
cursor: pointer;
font-weight: 600;
color: #333;
border-bottom: 2px solid transparent;
}
.tabs li.active {
border-bottom: 2px solid #281e4b;
color: #000;
}
.tabs span {
font-weight: 700;
}
/* --------------------------------------
SEARCH FORM FIELDS
--------------------------------------- */
.search-form {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 12px;
}
.search-form select {
width: 100%;
padding: 12px;
border-radius: 8px;
border: 1px solid #ddd;
font-size: 15px;
}
/* --------------------------------------
SEARCH BUTTON
--------------------------------------- */
.search-btn {
grid-column: 1 / 4;
padding: 14px;
background: #281e4b;
color: #fff;
border: none;
border-radius: 8px;
font-size: 17px;
font-weight: 700;
cursor: pointer;
transition: 0.2s;
}
.search-btn:hover {
background: #8e0f0e;
}
/* --------------------------------------
RESPONSIVE
--------------------------------------- */
@media (max-width: 991px) {
.hero-wrapper .container {
flex-direction: column;
text-align: center;
}
.hero-left, .hero-right {
width: 100%;
}
.hero-left h1 {
font-size: 32px;
}
.search-box {
margin-top: 25px;
}
.tab-content.active {
grid-template-columns: repeat(3, 1fr);
}
.search-btn {
grid-column: span 3;
}
.checkbox-grid {
grid-template-columns: repeat(6, 1fr);
}
}
@media (max-width: 576px) {
.hero-left h1 {
font-size: 26px;
}
.hero-left p {
font-size: 16px;
}
.search-form {
grid-template-columns: 1fr;
}
.search-btn {
grid-column: 1;
}
}
/* -----------------------------
WHY BUY SECTION
----------------------------- */
.why-buy {
text-align: center;
margin: 60px auto;
max-width: 1200px;
}
.why-buy h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 35px;
color: #111;
}
/* Grid */
.why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 35px;
}
.why-item {
background: #fff;
padding: 25px;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
transition: transform 0.2s, box-shadow 0.2s;
}
.why-item:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}
.why-item img {
width: 48px;
margin-bottom: 15px;
}
.why-item h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
color: #000;
}
.why-item p {
font-size: 15px;
line-height: 1.6;
color: #555;
}
/* Responsive */
@media (max-width: 991px) {
.why-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.why-grid {
grid-template-columns: 1fr;
}
.why-buy h2 {
font-size: 26px;
}
}
.why-item i {
font-size: 40px;
color: #281e4b;
margin-bottom: 22px;
}
.support-block {
/*background: #f8f9fa;*/
padding: 50px 0;
border-top: 1px solid #eee;
}
.support-inner {
display: flex;
align-items: center;
gap: 30px;
}
.support-image img {
width: 180px;
border-radius: 12px;
object-fit: cover;
}
.support-text {
flex: 1;
}
/* Titel */
.support-text h3 {
font-size: 26px;
font-weight: 700;
margin-bottom: 12px;
color: #111;
}
/* Beschreibung */
.support-text p {
font-size: 16px;
line-height: 1.6;
color: #444;
}
/* Buttons */
.support-buttons {
margin: 18px 0;
display: flex;
gap: 15px;
justify-content: center;
}
.call-btn,
.chat-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #281e4b;
padding: 12px 20px;
border-radius: 8px;
color: #fff;
font-weight: 600;
text-decoration: none;
transition: 0.2s;
}
.chat-btn {
background: #000;
color: #fff;
}
.call-btn i,
.chat-btn i {
font-size: 16px;
}
/* Opening hours */
.support-hours {
font-size: 14px;
margin-top: 8px;
color: #666;
}
.call-btn:hover,
.chat-btn:hover {
color: #ccc;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.support-inner {
flex-direction: column;
text-align: center;
}
.support-buttons {
justify-content: center;
}
.support-image img {
width: 140px;
margin-bottom: 20px;
}
}
.reifen-container{
padding: 40px 15px;
}
.reifen-container h2, .reifen-container p {
color: black
}
.reifen-container img {
border-radius: 10px;
}
.vert-center {
display: table;
height: 100%;
}
.vert-center > div {
display: table-cell;
vertical-align: middle;
}
.row-white {
background-color: #fff;
}
.btn-red {
background: #281e4b !important;
}
.no-margin-bottom {
margin-bottom: 0 !important;
}
.steuer-cl {
margin-left: 7px;
font-size:13px;
font-weight: normal;
color:black
}
.wheel-info {
color: #221c1c;
font-size: 13px;
font-weight: 400;
line-height: 20px;
min-height: 40px;
}
.module.hotline-header {
display: flex;
}
/* Feste Höhe für den Startseiten-Slider */
.module.sohomepage-slider .so-homeslider,
.module.sohomepage-slider .owl2-stage-outer,
.module.sohomepage-slider .owl2-stage,
.module.sohomepage-slider .owl2-item,
.module.sohomepage-slider .owl2-item .item {
/*height: 498px !important; /* Höhe hier nach Wunsch anpassen */
overflow: hidden;
}
/* Bild füllt den Bereich schön aus */
.module.sohomepage-slider .owl2-item .item img {
width: 100%;
height: 100% !important;
object-fit: cover;
}
/* Text-Overlay aus dem normalen Flow nehmen, damit es die Höhe NICHT beeinflusst */
.module.sohomepage-slider .sohomeslider-description {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* optional – Klicks nur auf Button erlauben */
}
.module.sohomepage-slider .sohomeslider-description .slide-button,
.module.sohomepage-slider .sohomeslider-description a.button {
pointer-events: auto; /* Button wieder klickbar machen */
}
.ltabs-wrap .banners {
float:left;
}
.ltabs-wrap .ltabs-tabs-container {
display: none;
}
.ltabs-wrap .product-item-container {
background: white;
}
.ltabs-wrap .banners img {
max-height: 492px;
height: 492px;
width: 290px;
border-radius: 5px;
}
.so-listing-tabs .owl2-controls .owl2-nav {
display:none;
}
.banner-pre .sale-info {
position: absolute;
bottom: 170px;
left: 20px;
color: #fff;
width: auto;
pointer-events: none;
display: grid;
place-items: start;
place-self: center;
}
.banner-pre .sale-info .sub-text {
color: #fff;
font-size: 14px;
font-weight: 400;
margin-bottom: 10px;
text-transform: uppercase;
}
.banner-pre .sale-info .sale-title {
font-size: 40px;
margin-bottom: 30px;
font-weight: 500;
color: #fff;
}
.banner-pre .sale-info h4.sale-title {
font-size:19px;
}
.banner-pre .sale-info .sale-content {
font-size: 14px;
color: #fff;
margin-bottom: 30px;
}
.banner-pre .sale-info .button {
border-radius: 5px;
display: inline-block;
padding: 6px 20px;
text-transform: uppercase;
background: transparent;
border: 1px solid #fff;
color: #fff;
font-size: 14px;
font-weight: 600;
pointer-events: auto;
}
.banner-pre .sale-info .button:hover {
background: #281e4b;
border: 1px solid #281e4b;
color: #fff;
}
.banner-pre .sale-info .view_all {
font-size: 14px;
text-decoration: underline;
font-weight: 500;
text-transform: capitalize;
pointer-events: auto;
}
#conditionModal .modal-header {
padding: 0px;
border: none;
flex-direction: row-reverse;
}
#conditionModal .modal-content {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
animation-duration: 0.3s;
border-radius: 5px;
background-color: #fff;
border: none;
box-shadow: none;
overflow: hidden;
}
#conditionModal .modal-content .modal-title {
padding: 20px 30px;
border-bottom: 1px solid #eee;
font-size: 24px;
line-height: 32px;
color: #000;
text-align: center;
font-weight: 400;
}
#conditionModal .modal-content .modal-title:before {
content: "";
font-family: icomoon !important;
color: #13be00;
margin: 0 10px;
display: inline-block;
}
#conditionModal .modal-body {
padding: 0px;
}
#conditionModal .close {
position: absolute;
width: 20px;
height: 20px;
padding: 0;
z-index: 2;
line-height: 15px;
border-radius: 100%;
-webkit-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
-o-opacity: 1;
opacity: 1;
background-color: transparent;
border: none;
right: 20px;
top: 20px;
}
#conditionModal .close svg {
stroke: #000;
}
#conditionModal .close:hover svg {
stroke: #281e4b;
}
#conditionModal .quickcart {
display: flex;
background: #fafafa;
align-items: center;
}
#conditionModal .cart-popup-left {
flex: 3;
align-items: center;
padding: 50px 30px 50px;
background: #fff;
border-right: 1px solid #eee;
}
#conditionModal .cart-popup-left .wrap-left-content {
display: flex;
column-gap: 30px;
}
#conditionModal .cart-popup-left .wrap-left-content .product-image {
width: 120px;
}
#conditionModal .cart-popup-left .wrap-left-content .cart-popup-info {
flex: 1;
}
#conditionModal .cart-popup-left .wrap-left-content .cart-popup-info .product-name {
font-size: 16px;
font-weight: 400;
color: #000;
}
#conditionModal .cart-popup-left .wrap-left-content .cart-popup-info .price-quantity {
font-size: 18px;
color: #000;
font-weight: normal;
display: inline-block;
}
#conditionModal .cart-popup-left .wrap-left-content .cart-popup-info .price-new {
font-size: 18px;
}
#conditionModal .cart-popup-right {
flex: 3;
padding: 30px;
}
#conditionModal .wrap-right-content .cart-popup-imgbottom {
margin-bottom: 25px;
font-size: 18px;
color: #000;
font-weight: 500;
}
#conditionModal .wrap-right-content .cart-popup-imgbottom .previewCartCheckout-price {
font-size: 24px;
font-weight: 500;
padding: 0px 5px;
color: #281e4b;
display: inline-block;
}
#conditionModal .wrap-right-content .cart-popup-imgbottom .cart-popup-total {
color: #666;
display: block;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
#conditionModal .wrap-right-content .cart-button {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 15px;
grid-row-gap: 15px;
}
#conditionModal .wrap-right-content .btn {
background-color: transparent;
border: 1px solid #000;
color: #000;
justify-content: center;
padding: 12px 10px;
}
#conditionModal .wrap-right-content .btn:hover {
background: #281e4b;
color: #fff;
border: 1px solid #281e4b;
}
#conditionModal .wrap-right-content .btn-checkout {
background: #000;
color: #fff;
}
#conditionModal .modal-header {
background: #222;
border-bottom: none;
}
#conditionModal .modal-title {
color: #fff;
font-size: 16px;
}
#conditionModal .modal-body {
font-size: 14px;
}
#conditionModal .condition-list {
padding: 20px;
}
#conditionModal .condition-list li {
margin-bottom: 6px;
}
/* gesamter Filterblock */
.filter-horizontal .mfilter-box {
background: #f8f9fb;
border-radius: 10px;
padding: 12px;
}
/* einzelner Filter */
.filter-horizontal .mfilter-filter-item {
background: #fff;
border-radius: 8px;
margin-bottom: 12px;
border: 1px solid #e5e7eb;
}
.mfilter-heading {
padding: 12px 14px;
background: #f1f5f9;
cursor: pointer;
user-select: none;
}
.mfilter-heading-text {
font-weight: 600;
font-size: 14px;
color: #111827;
}
.mfilter-heading:hover {
background: #e5e7eb;
}
/* Pfeil / Icon */
.mfilter-head-icon {
width: 16px;
height: 16px;
margin-left: auto;
opacity: 0.6;
}
.filter-horizontal .mfilter-option.mfilter-tb-as-tr {
display: flex;
align-items: center;
padding: 8px 12px;
gap: 10px;
}
.mfilter-option:hover {
background: #f9fafb;
}
/* Label */
.mfilter-option label {
flex: 1;
cursor: pointer;
font-size: 14px;
}
/* Counter */
.mfilter-col-count {
font-size: 12px;
color: #6b7280;
}
.mfilter-col-input input[type="checkbox"],
.mfilter-col-input input[type="radio"] {
width: 16px;
height: 16px;
accent-color: #2563eb; /* Blau, anpassen */
}
.mfilter-gheader {
font-size: 13px;
font-weight: 700;
padding: 8px 12px;
background: #e2e8f0;
color: #334155;
text-transform: uppercase;
letter-spacing: .03em;
}
.filter-panel-item-dropdown {
display: none;
margin-top: 6px;
padding: 6px 0;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
max-height: 300px;
overflow-y: auto;
}
.filter-multi-select.is-open .filter-panel-item-dropdown {
display: block;
}
@media (max-width: 991.98px) {
/* NUR die row in header-middle erwischen */
#header .header-middle .container > .row{
display:flex !important;
align-items:center !important;
flex-wrap:nowrap !important;
}
/* Logo-Spalte */
#header .header-middle .middle-left{
order:1 !important;
flex:0 0 auto !important;
width:auto !important;
text-align:left !important;
}
/* Logo Wrapper + Link + IMG entzentrieren */
#header .header-middle .middle-left .logo{
text-align:left !important;
margin:0 !important;
}
#header .header-middle .middle-left .logo a{
display:inline-flex !important;
justify-content:flex-start !important;
}
#header .header-middle .middle-left .logo img{
margin:0 !important;
display:block !important;
max-width:140px; /* optional */
height:auto;
}
/* Rechte Seite: alles nach rechts */
#header .header-middle .middle-right-w{
order:3 !important;
flex:1 1 auto !important;
width:auto !important;
margin: 0px auto;
padding: 0px;
right: 40px;
}
/* right-without-menu als flex row */
#header .header-middle .middle-right-w .middle-right-without-menu{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:0px;
margin-top: 0px;
}
/* Suchblock als Icon */
#header .header-middle .search-header-w{
order:1 !important;
flex:0 0 auto !important;
width: unset;
float: unset;
margin-right: 0px;
margin-left: 0px;
}
/* Suchformular verstecken (wichtig: auch wrapper #sosearchpro) */
/* standard: versteckt */
#header .search-header-w #sosearchpro {
display:none;
}
.typeheader-10 #sosearchpro .search input.form-control {
position: static !important;
height: 32px !important;
}
.typeheader-10 #sosearchpro .search button {
position: absolute;
top: 0px !important;
right: 4px;
height: 30px !important;
width: 30px !important;
text-align: center;
line-height: 31px;
}
/* sichtbar bei Klick */
#header .search-header-w #sosearchpro.is-open {
display:block;
position: absolute;
left: -50px;
right: 0px;
top: calc(100% + 10px);
background: #fff;
padding: 6px;
border-radius: 8px;
z-index: 9999;
box-shadow: 0 12px 30px rgba(0,0,0,.25);
width: auto;
}
#header .search-header-w #sosearchpro.is-open .search{
display:block !important;
}
/* Such-Icon zeigen (dein Element hat class hidden visible-xs -> ignorieren wir) */
#header .header-middle .search-header-w .icon-search{
display:inline-flex !important;
cursor:pointer;
font-size: 14px;
position: relative;
width: 30px;
height: 30px;
padding: 0px;
border-radius: 100%;
color: #000;
background: #f7f7f7;
display: flex;
justify-content: center;
align-items: center;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
/* Icons rechts */
#header .header-middle .middle-right{
display:flex !important;
align-items:center !important;
gap:0px;
margin-left:0 !important; /* kommt hier NICHT mehr als 'push', weil justify-content macht das */
}
#header.typeheader-10 .shopping_cart{
margin-right: 10px;
}
#header.typeheader-10 .wishlist {
margin-right: 10px;
order: 3;
}
#header .header-bottom {
float:right;
margin-top: -49px;
background: unset;
border: unset;
height:42px;
}
.megamenu-style-dev .navbar-default .horizontal .navbar-toggle {
height: 35px !important;
width: 35px !important;
border-radius: 30px !important;
}
.typeheader-10 .wishlist > a,
.typeheader-10 .shopping_cart .btn-shopping-cart .top_cart {
height: 30px !important;
width: 30px !important;
}
.typeheader-10 .wishlist > a svg {
font-size: 15px;
width: 15px !important;
}
.typeheader-10 .shopping_cart .btn-shopping-cart .top_cart .icon-c svg {
width: 20px !important;
height: 20px !important;
}
}
/* Desktop */
.module.startseite-slider.sohomepage-slider .so-homeslider {
aspect-ratio: 11 / 6; /* ca. 498px bei 1920px */
overflow: hidden;
}
.module.eroffnung-slider.sohomepage-slider .so-homeslider {
aspect-ratio: 8 / 6;
overflow: hidden;
}
.module.eroffnung-slider.sohomepage-slider .owl2-item .item img {
border-radius: 15px;
}
/* Mobile */
@media (max-width: 991.98px) {
.module.startseite-slider.sohomepage-slider .so-homeslider {
aspect-ratio: 17 / 9;
}
}
/* Slider-Füllung */
.module.startseite-slider.sohomepage-slider .owl2-stage-outer,
.module.startseite-slider.sohomepage-slider .owl2-stage,
.module.startseite-slider.sohomepage-slider .owl2-item,
.module.startseite-slider.sohomepage-slider .owl2-item .item {
height: 100%;
}
.search-box .search-title {
color: #281e4b;
font-size: 19px;
margin-bottom: 20px;
font-weight: 600;
}
/* HERO WRAPPER */
.hero-wrapper {
position: relative;
width: 100%;
padding: 60px 0;
overflow: hidden;
background: #000;
}
.hero-bg img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.25;
z-index: 1;
}
.hero-wrapper .container {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
}
/* HERO LEFT */
.hero-left {
width: 50%;
color: #fff;
}
.hero-left h1 {
font-size: 42px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 15px;
color: #fff;
}
.hero-left p {
font-size: 18px;
line-height: 1.5;
margin-bottom: 25px;
}
/* BADGE */
.hero-badge {
display: flex;
align-items: center;
background: rgba(255,255,255,0.08);
border-radius: 10px;
padding: 10px 15px;
margin-bottom: 20px;
}
.hero-badge img {
width: 40px;
margin-right: 10px;
}
.hero-badge span {
font-weight: 700;
font-size: 16px;
}
.hero-badge p {
margin: 0;
font-size: 14px;
opacity: 0.8;
}
/* HERO ICONS */
.hero-icons img {
width: 110px;
margin-right: 10px;
}
/* HERO RIGHT (SEARCH BOX) */
.hero-right {
width: 45%;
}
.search-box {
background: #fff;
border-radius: 12px;
padding: 25px;
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.search-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 20px;
color: #333;
}
/* TABS */
.tabs {
display: flex;
border-bottom: 2px solid #eee;
margin-bottom: 20px;
list-style: none;
padding: 0;
}
.tabs li {
padding: 10px 18px;
cursor: pointer;
font-weight: 600;
color: #221c1c;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: all 0.3s;
}
.tabs li:hover {
color: #281e4b;
}
.tabs li.active {
border-bottom: 2px solid #281e4b;
color: #281e4b;
}
.tabs .tab-title {
font-size: 11px;
font-weight: 400;
display: block;
color: #999;
}
.tabs li.active .tab-title {
color: #221c1c;
}
.tabs span:not(.tab-title) {
font-weight: 700;
font-size: 14px;
}
/* TAB CONTENT */
.tab-content {
display: none;
}
.tab-content.active {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
#komplettrad-content.tab-content.active {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
#komplettrad-content .search-btn {
grid-column: 1 / 5;
}
/* FORM FIELDS */
.form-field {
position: relative;
}
.form-field select {
width: 100%;
padding: 12px;
border-radius: 8px;
border: 1px solid #ddd;
font-size: 15px;
background: #fff;
cursor: pointer;
transition: border-color 0.3s;
}
.form-field select:focus {
outline: none;
border-color: #281e4b;
}
.form-field label {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: #221c1c;
margin-bottom: 5px;
font-weight: 500;
}
.info-icon {
cursor: pointer;
color: #17a2b8;
font-size: 14px;
}
/* SEARCH BUTTON */
.search-btn {
grid-column: 1 / 4;
padding: 14px;
background: #281e4b;
color: #fff;
border: none;
border-radius: 8px;
font-size: 17px;
font-weight: 700;
cursor: pointer;
transition: 0.2s;
margin-top: 8px;
}
.search-btn:hover {
background: #8e0f0e;
}
/* FULL WIDTH FIELDS */
.full-width {
grid-column: 1 / 4;
}
/* CHECKBOX GRID */
.checkbox-group {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-top: 8px;
}
.checkbox-item {
display: flex;
align-items: center;
gap: 5px;
}
.checkbox-item input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #281e4b;
}
.checkbox-item label {
margin: 0;
font-size: 14px;
cursor: pointer;
user-select: none;
}
/* RESPONSIVE */
@media (max-width: 991px) {
.hero-wrapper .container {
flex-direction: column;
text-align: center;
}
.hero-left, .hero-right {
width: 100%;
}
.hero-right {
order: 1;
margin-top:-50px;
}
.hero-left {
order: 2;
margin-top: 30px;
}
.hero-left h1 {
font-size: 32px;
}
.search-box {
margin-top: 25px;
}
.tabs {
justify-content: center;
}
.tabs li {
padding: 8px 12px;
}
}
@media (max-width: 576px) {
.hero-left h1 {
font-size: 21px;
}
.hero-left p {
font-size: 14px;
}
.search-box {
padding: 20px;
}
/* Mobile: Breite, Querschnitt, Zoll in einer Zeile */
#komplettrad-content,
#reifen-content {
grid-template-columns: repeat(3, 1fr);
}
#komplettrad-content.tab-content.active,
#reifen-content.tab-content.active,
#felgen-content.tab-content.active {
display: block;
}
/* Felgen: 2 Spalten für Marke und Felgengröße */
#felgen-content {
grid-template-columns: repeat(2, 1fr);
}
/* Erste 3 Felder (Breite, Querschnitt, Zoll) bleiben nebeneinander */
#komplettrad-content .form-field:nth-child(1),
#komplettrad-content .form-field:nth-child(2),
#komplettrad-content .form-field:nth-child(3),
#reifen-content .form-field:nth-child(1),
#reifen-content .form-field:nth-child(2),
#reifen-content .form-field:nth-child(3) {
width: 50%;
float: left;
padding-right: 5px;
padding-top: 5px;
}
/* Saison, Reifenhersteller, Felgenmarke in einer Zeile */
#komplettrad-content .form-field:nth-child(4),
#komplettrad-content .form-field:nth-child(5),
#komplettrad-content .form-field:nth-child(6),
#reifen-content .form-field:nth-child(4),
#reifen-content .form-field:nth-child(5),
#reifen-content .form-field:nth-child(6),
#reifen-content .form-field:nth-child(7) {
width: 50%;
float: left;
padding-right: 5px;
padding-top: 5px;
}
/* Felgen: Marke und Felgengröße nebeneinander */
#felgen-content .form-field:nth-child(1),
#felgen-content .form-field:nth-child(2),
#felgen-content .form-field:nth-child(3) {
width: 50%;
float: left;
}
.form-field label {
margin-top: 0px;
margin-bottom: 0px;
}
.form-field .checkbox-group {
margin-top: 0px;
}
/* Zustand bleibt full-width */
.full-width {
grid-column: 1 / -1;
}
/* Checkboxen nebeneinander */
.checkbox-group {
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
.checkbox-item label {
font-size: 12px;
}
.checkbox-item input[type="checkbox"] {
width: 16px;
height: 16px;
}
.search-btn {
grid-column: 1 / -1;
font-size: 15px;
padding: 12px;
width: 100%;
}
.tabs {
flex-wrap: wrap;
}
.tabs li {
font-size: 12px;
padding: 8px 10px;
}
.tabs span:not(.tab-title) {
font-size: 12px;
}
.form-field select {
width: 100%;
padding: 7px;
border-radius: 4px;
border: 1px solid #ddd;
font-size: 12px;
}
}
.mfilter-selected-title {
font-weight: 600;
margin-right: 10px;
color: #333;
}
.mfilter-selected-filters {
margin: 12px 0;
}
.mfilter-selected-filters-cnt {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.mfilter-selected-title {
font-weight: 600;
margin-right: 6px;
white-space: nowrap;
}
.mfilter-selected-filters-cnt a {
display: inline-flex;
align-items: center;
background: #f2f4f7;
border: 1px solid #d0d5dd;
border-radius: 20px;
padding: 2px 8px;
font-size: 13px;
color: #333;
cursor: pointer;
transition: all 0.2s ease;
}
.mfilter-selected-filters-cnt a:hover {
background: #e4e7ec;
}
.mfilter-selected-filters-cnt a span:first-child {
margin-right: 6px;
}
/* Close (X) */
/*.mfilter-selected-filters-cnt .mfilter-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: #cfd4dc;
margin-left: 4px;
}
.mfilter-selected-filters-cnt a:hover .mfilter-close {
background: #b42318;
}
.mfilter-selected-filters-cnt .mfilter-close i {
width: 8px;
height: 8px;
position: relative;
}
.mfilter-selected-filters-cnt .mfilter-close i::before,
.mfilter-selected-filters-cnt .mfilter-close i::after {
content: '';
position: absolute;
top: 3px;
left: 0;
width: 8px;
height: 2px;
background: #fff;
}
.mfilter-selected-filters-cnt .mfilter-close i::before {
transform: rotate(45deg);
}
.mfilter-selected-filters-cnt .mfilter-close i::after {
transform: rotate(-45deg);
}*/
.sidebar-overlay {
display: none;
}
.product-category .category-info{
margin-top: 50px;
}
.product-product #collapse-description {
color: #000;
font-size: 16px;
}
.product-product #collapse-description .product-property-list {
font-size: 14px;
}
.short-description.html-clamp {
display: -webkit-box;
-webkit-line-clamp: 4; /* Anzahl Zeilen */
-webkit-box-orient: vertical;
overflow: hidden;
}
.cross-sell-titel {
line-height: 15px;
}
.cross-sell-image {
width:55px;height:55px;object-fit:cover;
}
.cross-sell-price {
color: #281e4b;
}
.btn-primary:active {
color: #fff;
background-color: #281e4b;
border-color: #281e4b;
}
.product-detail #so_askquestion {
margin: 0 5px;
display: inline-block; }
.product-detail #so_askquestion #so_askquestion_product {
position: relative;
background-color: transparent;
border-radius: 5px;
border: 1px solid #eee;
color: #000;
padding: 0px 15px;
height: 50px;
line-height: 50px;
display: flex;
align-items: center;
justify-content: center;
column-gap: 10px;
font-size: 14px;
}
.product-detail #so_askquestion #so_askquestion_product:after {
content: "\f128";
font-family: "FontAwesome";
}
.product-detail #so_askquestion #so_askquestion_product:hover {
color: #281e4b; }
.tooltip-lg .tooltip-inner {
font-size: 14px;
padding: 8px 12px;
}
.carkey-style .hero-section {
/*background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);*/
background:
/* 1️⃣ Verlauf */
linear-gradient(
90deg,
var(--primary) 0%,
var(--primary-dark) 55%,
rgba(0,0,0,0.0) 75%
),
/* 2️⃣ Bild */
url("https://carkey.test/image/catalog/carkey/Carkey-Services.jpg"),
/* 3️⃣ Grundfarbe */
var(--primary);
background-repeat: no-repeat;
background-position: right -200px center;
background-size: auto, 65% 100%, auto;
color: white;
padding: 100px 0 100px;
position: relative;
overflow: hidden;
}
.carkey-style .hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: cover;
opacity: 0.3;
}
.carkey-style .hero-content {
position: relative;
z-index: 2;
}
/*.carkey-style .hero-content h1 {
color: #fff;
}*/
.carkey-style .hero-content .lead {
font-size: 26px;
line-height: 40px;
}
.carkey-style .cta-section .lead {
font-size: 24px;
line-height: 35px;
}
/*
.btn-primary {
background: var(--primary);
border: none;
padding: 12px 32px;
font-weight: 600;
border-radius: 8px;
transition: all 0.3s;
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(37,99,235,0.3);
}
.btn-outline-light {
border: 2px solid white;
padding: 12px 32px;
font-weight: 600;
border-radius: 8px;
}
*/
.carkey-style .service-card {
background: white;
border-radius: 16px;
padding: 40px 30px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
transition: all 0.3s;
height: 100%;
border: 1px solid #e5e7eb;
}
.carkey-style .service-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.carkey-style .service-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
font-size: 32px;
color: white;
padding: 10px;
}
.carkey-style .feature-list {
list-style: none;
padding: 0;
font-size:16px;
}
.carkey-style .feature-list li {
padding: 12px 0;
border-bottom: 1px solid #e5e7eb;
}
.carkey-style .feature-list li:last-child {
border-bottom: none;
}
.carkey-style .feature-list i {
color: var(--secondary);
margin-right: 12px;
font-size: 18px;
}
.carkey-style .cta-section {
background: linear-gradient(135deg, var(--secondary) 0%, #ea580c 100%);
color: white;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.carkey-style .info-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.2);
padding: 12px 24px;
border-radius: 50px;
margin-bottom: 15px;
backdrop-filter: blur(10px);
}
.carkey-style .brand-section {
padding: 60px 0;
background: var(--light);
}
.carkey-style .brand-logo {
filter: grayscale(100%);
opacity: 0.6;
transition: all 0.3s;
max-height: 50px;
}
.carkey-style .brand-logo:hover {
filter: grayscale(0%);
opacity: 1;
}
.carkey-style .contact-info-box {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
color: black;
font-size: 18px;
}
.carkey-style .contact-info-box i {
color: #fff;
font-size: 24px;
margin-right: 15px;
}
.carkey-style .section-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
position: relative;
display: inline-block;
}
.carkey-style .section-subtitle {
color: #40444d;
font-size: 2rem;
margin-bottom: 50px;
}
.startseite-header {
background: var(--primary);
color: white;
padding: 0;
position: relative;
overflow: hidden;
margin: 0px auto;
text-align: center;
}
.padding-t-50 {
padding-top:50px;
}
.padding-50 {
padding-top:50px;
padding-bottom:50px;
}
.margin-t-50 {
margin-top:50px;
}
.padding-80 {
padding-top:80px;
padding-bottom:80px;
}
.service-page .breadcrumb {
display:none;
}
.service-page #wrapper > .container {
padding: 0px;
}
/* Page Header */
.service-page .page-header {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
padding: 80px 0 60px;
position: relative;
overflow: hidden;
}
.service-page .page-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: cover;
}
.service-page .page-header-content {
position: relative;
z-index: 2;
}
/* Trust Badges */
.service-page .trust-badges {
display: flex;
gap: 30px;
flex-wrap: wrap;
margin-top: 30px;
}
.service-page .trust-badge {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255,255,255,0.15);
padding: 12px 20px;
border-radius: 50px;
backdrop-filter: blur(10px);
}
.service-page .trust-badge i {
font-size: 24px;
color: var(--secondary);
}
/* Service Overview Cards */
.service-page .service-overview {
margin-top: -50px;
position: relative;
z-index: 3;
}
.service-page .price-badge {
display: inline-block;
background: var(--secondary);
color: white;
padding: 14px 20px;
border-radius: 50px;
font-weight: 700;
font-size: 3rem;
margin-top: 15px;
}
/* Process Steps */
.service-page .process-step {
display: flex;
align-items: flex-start;
gap: 25px;
margin-bottom: 40px;
position: relative;
}
.service-page .process-step::after {
content: '';
position: absolute;
left: 30px;
top: 70px;
width: 2px;
height: calc(100% + 40px);
background: linear-gradient(to bottom, var(--primary), transparent);
}
.service-page .process-step:last-child::after {
display: none;
}
.service-page .step-number {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 700;
color: white;
flex-shrink: 0;
box-shadow: 0 5px 15px rgba(37,99,235,0.3);
}
.service-page .step-content h4 {
margin-bottom: 10px;
}
/* Feature Grid */
.service-page .feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.service-page .feature-item {
background: white;
padding: 25px;
border-radius: 12px;
border: 2px solid #e5e7eb;
transition: all 0.3s;
}
.service-page .feature-item:hover {
border-color: var(--primary);
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.service-page .feature-item i {
font-size: 32px;
color: var(--primary);
margin-bottom: 15px;
}
.service-page .feature-item h5 {
font-weight: 700;
margin-bottom: 10px;
}
/* Price Table */
.service-page .price-table {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 5px 25px rgba(0,0,0,0.1);
}
.service-page .price-table-header {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
padding: 30px;
text-align: center;
}
.service-page .price-table-body {
padding: 30px;
}
.service-page .price-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid #e5e7eb;
}
.service-page .price-row:last-child {
border-bottom: none;
}
.service-page .price-label {
font-weight: 600;
color: var(--dark);
}
.service-page .price-value {
font-size: 1.3rem;
font-weight: 700;
color: var(--primary);
}
/* FAQ Accordion */
.service-page .faq-accordion .accordion-item {
border: 2px solid #e5e7eb;
border-radius: 12px;
margin-bottom: 15px;
overflow: hidden;
}
.service-page .faq-accordion .accordion-button {
font-weight: 600;
font-size: 18px;
padding: 20px 25px;
background: white;
}
.service-page .faq-accordion .accordion-button:not(.collapsed) {
background: var(--light);
color: var(--primary);
}
.service-page .faq-accordion .accordion-button:focus {
box-shadow: none;
border-color: var(--primary);
}
.service-page .faq-accordion .accordion-body {
padding: 20px 25px;
font-size: 14px;
color: #000;
}
/* CTA Box */
.service-page .cta-box {
background: linear-gradient(135deg, var(--secondary) 0%, #ea580c 100%);
color: white;
padding: 25px;
border-radius: 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.service-page .cta-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.1) 0%, transparent 60%);
}
.service-page .cta-box-content {
position: relative;
z-index: 2;
font-size: 16px;
}
.service-page .btn-primary {
background: var(--primary);
border: none;
font-weight: 600;
border-radius: 5px;
transition: all 0.3s;
}
.service-page .sidebar h3 {
font-size:22px;
}
.service-page .btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(37,99,235,0.4);
}
.service-page .btn-light {
padding: 15px 40px;
font-weight: 600;
border-radius: 8px;
}
/* Car Brands Section */
.service-page .brand-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin-top: 30px;
}
.service-page .brand-item {
background: white;
padding: 30px 20px;
border-radius: 12px;
text-align: center;
border: 2px solid #e5e7eb;
transition: all 0.3s;
font-weight: 600;
color: var(--dark);
}
.service-page .brand-item:hover {
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* Section Styling */
.service-page .section-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
}
.service-page.section-subtitle {
color: #6b7280;
font-size: 1.2rem;
margin-bottom: 50px;
}
.service-page .highlight-box {
background: var(--light);
padding: 40px;
border-radius: 16px;
border-left: 5px solid var(--primary);
color: #000;
}
.service-page .lead {
font-size:17px;
font-weight: normal;
}
.service-page .sidebar img {
border-radius: 20px;
}
/* Scoped styles for About Us page */
.carkey-about-hero {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
padding: 100px 0 100px;
position: relative;
overflow: hidden;
}
.carkey-about-hero::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: url('data:image/svg+xml,') center/cover no-repeat;
opacity: 0.5;
}
.carkey-about-hero-content {
position: relative;
z-index: 1;
}
.carkey-about-subtitle {
color: var(--secondary);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin-bottom: 15px;
display: inline-block;
}
/* Stats Section */
.carkey-about-stats {
background: #fff;
padding: 0;
position: relative;
z-index: 10;
padding: 100px 0 100px;
}
.carkey-about-stats-inner {
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 60px rgba(0,0,0,0.1);
padding: 40px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
@media (max-width: 992px) {
.carkey-about-stats-inner {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.carkey-about-stats-inner {
grid-template-columns: 1fr;
}
}
.carkey-about-stat {
text-align: center;
padding: 20px;
border-right: 1px solid var(--carkey-border);
}
.carkey-about-stat:last-child {
border-right: none;
}
@media (max-width: 992px) {
.carkey-about-stat {
border-right: none;
border-bottom: 1px solid var(--carkey-border);
}
.carkey-about-stat:last-child,
.carkey-about-stat:nth-child(even) {
border-right: none;
}
}
.carkey-about-stat-number {
font-size: 3rem;
font-weight: 700;
color: var(--primary);
line-height: 1;
margin-bottom: 10px;
}
.carkey-about-stat-number span {
color: var(--secondary);
}
/* Story Section */
.carkey-about-story {
padding: 100px 0;
background: var(--light);
}
.carkey-about-story-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
@media (max-width: 992px) {
.carkey-about-story-grid {
grid-template-columns: 1fr;
gap: 40px;
}
}
.carkey-about-story-image {
position: relative;
}
.carkey-about-story-image img {
width: 100%;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.carkey-about-story-badge {
position: absolute;
bottom: -20px;
right: -20px;
background: var(--secondary);
color: #fff;
padding: 25px 30px;
border-radius: 12px;
text-align: center;
box-shadow: 0 10px 30px rgba(230,57,70,0.3);
}
@media (max-width: 576px) {
.carkey-about-story-badge {
position: relative;
bottom: auto;
right: auto;
margin-top: 20px;
display: inline-block;
}
}
.carkey-about-story-badge-number {
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
}
.carkey-about-story-highlights {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 30px;
}
.carkey-about-story-highlight {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
font-size: 16px;
}
.carkey-about-story-highlight i {
color: var(--secondary);
font-size: 1.2rem;
}
.carkey-about-story-highlight span {
color: var(--primary);
}
/* Services Section */
.carkey-about-services {
padding: 100px 0;
background: #fff;
}
.carkey-about-section-header {
text-align: center;
max-width: 700px;
margin: 0 auto 60px;
}
.carkey-about-section-header h2 {
color: var(--primary);
margin-bottom: 15px;
}
.carkey-about-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
@media (max-width: 992px) {
.carkey-about-services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.carkey-about-services-grid {
grid-template-columns: 1fr;
}
}
.carkey-about-service-card {
background: var(--light);
border-radius: 16px;
padding: 35px 30px;
transition: all 0.3s ease;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.carkey-about-service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 0;
background: var(--secondary);
transition: height 0.3s ease;
}
.carkey-about-service-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
border-color: var(--secondary);
}
.carkey-about-service-card:hover::before {
height: 100%;
}
.carkey-about-service-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.story-highlight {
padding: 40px;
border-radius: 20px;
margin: 40px 0;
border-left: 5px solid var(--secondary);
}
.carkey-about-service-icon i {
font-size: 1.5rem;
color: #fff;
}
.carkey-about-service-card h3 {
color: #000;
margin-bottom: 12px;
}
.carkey-about-service-card p {
color: #000;
margin-bottom: 0;
}
/* Values Section */
.carkey-about-values {
padding: 100px 0;
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
}
.carkey-about-values .carkey-about-section-header h2,
.carkey-about-values .carkey-about-section-header p {
color: #fff;
}
.carkey-about-values .carkey-about-section-header p {
opacity: 0.8;
}
.carkey-about-values-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
@media (max-width: 992px) {
.carkey-about-values-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.carkey-about-values-grid {
grid-template-columns: 1fr;
}
}
.carkey-about-value-card {
background: rgba(255,255,255,0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
padding: 35px 25px;
text-align: center;
transition: all 0.3s ease;
}
.carkey-about-value-card:hover {
background: rgba(255,255,255,0.1);
transform: translateY(-5px);
}
.carkey-about-value-icon {
width: 70px;
height: 70px;
background: var(--secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.carkey-about-value-icon i {
font-size: 1.8rem;
color: #fff;
}
.carkey-about-value-card h4 {
color: #fff;
font-weight: 700;
margin-bottom: 12px;
}
.carkey-about-value-card p {
color: rgba(255,255,255,0.7);
margin-bottom: 0;
}
/* Location Section */
.carkey-about-location {
padding: 100px 0;
background: #fff;
}
.carkey-about-location-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
@media (max-width: 992px) {
.carkey-about-location-grid {
grid-template-columns: 1fr;
gap: 40px;
}
}
.carkey-about-location-content h2 {
color: var(--primary);
margin-bottom: 25px;
}
.carkey-about-location-content p {
margin-bottom: 30px;
}
.carkey-about-contact-info {
background: var(--light);
border-radius: 16px;
padding: 30px;
}
.carkey-about-contact-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 15px 0;
border-bottom: 1px solid var(--carkey-border);
}
.carkey-about-contact-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.carkey-about-contact-item:first-child {
padding-top: 0;
}
.carkey-about-contact-item i {
width: 40px;
height: 40px;
background: var(--secondary);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.5rem;
flex-shrink: 0;
}
.carkey-about-contact-item-content strong {
display: block;
color: var(--primary);
margin-bottom: 3px;
}
.carkey-about-contact-item-content span {
color: #000;
}
.carkey-about-location-map {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
height: 400px;
}
.carkey-about-location-map iframe {
width: 100%;
height: 100%;
border: none;
}
/* Brands Section */
.carkey-about-brands {
padding: 60px 0;
background: #fff;
border-top: 1px solid var(--carkey-border);
}
.carkey-about-brands-title {
text-align: center;
color: var(--carkey-gray);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 30px;
}
.carkey-about-brands-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 30px;
opacity: 0.6;
}
.carkey-about-brands-logos img {
height: 40px;
filter: grayscale(100%);
transition: all 0.3s ease;
}
.carkey-about-brands-logos img:hover {
filter: grayscale(0%);
opacity: 1;
}
@media (max-width: 768px) {
.carkey-style .hero-section, .carkey-about-hero, .carkey-about-stats {
padding: 40px 0 40px;
}
.carkey-style .section-title, .carkey-about-hero .section-title {
font-size: 1.8rem;
}
.carkey-about-story,.carkey-about-services,.carkey-about-values,.carkey-about-location {
padding: 50px 0;
}
}
.block-banners .banners {
row-gap: 30px;
display: flex;
flex-direction: column;
}
.block-banners .banner-image {
border-radius: 6px;
overflow: hidden;
position: relative;
}
.block-banners .banner-image > a {
border-radius: inherit !important;
}
.block-banners .banner-image h3 {
background: #fff;
color: #000;
position: absolute;
z-index: 1;
top: 25px;
left: 50%;
transform: translate(-50%);
border-radius: 5px;
padding: 10px 25px;
white-space: nowrap;
font-size: 16px;
font-weight: 500;
display: flex;
align-items: center;
margin: 0;
}
.block-banners .banner-image h3 a {
color: currentColor;
background: transparent;
display: inline-flex;
}
.block-banners .banner-image h3 a:before, .block-banners .banner-image h3 a:after {
display: none;
}
.block-banners .banner-image h3 svg {
transition: 0.3s ease 0.1s;
transform: scale(0);
transform-origin: right;
width: 0;
}
.block-banners .banner-image h3:hover {
background: #d52345;
color: #fff;
}
.block-banners .banner-image h3:hover svg {
transform: scale(1);
width: 20px;
min-width: 20px;
margin-inline-start: 5px;
}
.banners-effect-5 .banners > div.banner-image > a {
background: transparent !important;
}
.banners-effect-5 .banners > div.banner-image:hover {
backface-visibility: hidden;
opacity: 1;
-webkit-transition: opacity 1s ease 0s, transform 1s ease 0s;
-o-transition: opacity 1s ease 0s, transform 1s ease 0s;
transition: opacity 1s ease 0s, transform 1s ease 0s;
}
.banners-effect-5 .banners > div.banner-image:hover a img {
opacity: 0.8;
transform: scale3d(1.1, 1.1, 1);
}
.text-primary {
color: var(--primary) !important;
}
.border-primary {
border-color:var(--primary) !important;
}
.text-secondary-red {
color: var(--secondary) !important;
}
.block-produkte-startseite {
margin-top:40px;
margin-bottom: 50px;
background: url("/image/catalog/carkey/bg-purple.jpg") no-repeat center;
background-size: cover;
/* background: red; */
background-size: 100% 60% !important;
background-position: top !important;
}
.block-produkte-startseite .modtitle {
text-align: center;
}
.block-produkte-startseite .modtitle span{
color: #fff !important;
}
.block-produkte-startseite .listingtab2 {
margin-top: 60px;
}
.cookie-info {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #222;
color: #fff;
padding: 12px;
z-index: 9999;
display: none;
font-size: 14px;
}
.cookie-info__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: 15px;
align-items: center;
}
.cookie-info__text {
flex: 1;
}
.cookie-info__link {
color: var(--primary-color);
text-decoration: underline;
}
.cookie-info__link:hover {
text-decoration: none;
}
.cookie-info__btn {
white-space: nowrap;
}
/* 📱 Mobil */
@media (max-width: 768px) {
.cookie-info__inner {
flex-direction: column;
align-items: flex-start;
}
.cookie-info__btn {
width: 100%;
}
}
.joinchat {
--bottom: 20px;
--sep: 50px;
--header: 70px;
--btn: 60px;
--vh: 100vh;
--red: 37;
--green: 211;
--blue: 102;
--rgb: var(--red), var(--green), var(--blue);
--color: rgb(var(--rgb));
--dark: rgb(calc(var(--red) - 75), calc(var(--green) - 75), calc(var(--blue) - 75));
--hover: rgb(calc(var(--red) + 50), calc(var(--green) + 50), calc(var(--blue) + 50));
--bg: rgba(var(--rgb), 0.04);
--tolerance: 210;
--bw: calc((var(--red)*0.2126 + var(--green)*0.7152 + var(--blue)*0.0722 - var(--tolerance))*-100000);
--text: rgba(var(--bw), var(--bw), var(--bw), min(1, max(0.7, var(--bw))));
--msg: var(--color);
position: fixed;
z-index: 1000;
right: var(--sep);
bottom: var(--bottom);
color: var(--text);
font: normal normal normal 16px/1.625em -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
letter-spacing: 0;
transform: scale3d(0, 0, 0);
transition: transform .3s ease-in-out;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-font-smoothing: antialiased
}
.joinchat *,
.joinchat :after,
.joinchat :before {
box-sizing: border-box
}
.joinchat:not(.joinchat--show)>div {
display: none
}
.joinchat--show {
transform: scaleX(1);
transition: transform .5s cubic-bezier(.18, .89, .32, 1.28)
}
.joinchat.joinchat--left {
right: auto;
left: var(--sep)
}
@media (max-width:480px),
(orientation:landscape) and (max-width:767px) {
.joinchat {
--bottom: 60px;
--sep: 6px;
--header: 55px
}
}
@media (max-width:767px) {
.joinchat {
--bottom: 60px;
--sep: 6px;
--header: 55px
}
}
.joinchat.joinchat--dark {
--msg: var(--dark)
}
@media (color-index:48) {
.joinchat.joinchat--dark-auto {
--msg: var(--dark)
}
}
@media (prefers-color-scheme:dark) {
.joinchat.joinchat--dark-auto {
--msg: var(--dark)
}
}
.joinchat__button {
display: flex;
flex-direction: row;
position: absolute;
z-index: 2;
bottom: 8px;
right: 8px;
height: var(--btn);
min-width: var(--btn);
max-width: 95vw;
background: #25d366;
color: inherit;
border-radius: calc(var(--btn)/2);
box-shadow: 1px 6px 24px 0 rgba(7, 94, 84, .24);
cursor: pointer;
transition: background .2s linear;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
will-change: background-color, width
}
.joinchat__button:hover {
background: #128c7e;
transition: background 1.5s linear
}
.joinchat__button:active {
background: #128c7e;
transition: none
}
.joinchat--chatbox .joinchat__button {
background: var(--color);
transition: background .2s linear;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3)
}
.joinchat--chatbox .joinchat__button:active,
.joinchat--chatbox .joinchat__button:hover {
background: var(--hover)
}
[dir=rtl] .joinchat__button {
flex-direction: row-reverse
}
.joinchat--left .joinchat__button {
right: auto;
left: 8px;
flex-direction: row-reverse
}
[dir=rtl] .joinchat--left .joinchat__button {
flex-direction: row
}
.joinchat__button__open {
width: var(--btn);
height: var(--btn);
background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 01-13.754 2.299l-5.814.735a.392.392 0 01-.438-.44l.748-5.788A12.002 12.002 0 013.517 3.517zm3.61 17.043l.3.158a9.846 9.846 0 0011.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 00-1.747 11.554l.16.303-.51 3.942a.196.196 0 00.219.22l3.961-.501zm6.534-7.003l-.933 1.164a9.843 9.843 0 01-3.497-3.495l1.166-.933a.792.792 0 00.23-.94L9.561 6.96a.793.793 0 00-.924-.445 1291.6 1291.6 0 00-2.023.524.797.797 0 00-.588.88 11.754 11.754 0 0010.005 10.005.797.797 0 00.88-.587l.525-2.023a.793.793 0 00-.445-.923L14.6 13.327a.792.792 0 00-.94.23z'/%3E%3C/svg%3E") 50% no-repeat;
background-size: 60%
}
.joinchat--chatbox .joinchat__button__open {
display: none
}
.joinchat__button__image {
position: absolute;
top: 1px;
right: 1px;
width: calc(var(--btn) - 2px);
height: calc(var(--btn) - 2px);
border-radius: 50%;
overflow: hidden;
opacity: 0
}
.joinchat__button__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover
}
.joinchat--show .joinchat__button__image {
animation: joinchat_image_loop 20s linear 5s infinite normal both
}
.joinchat--image .joinchat__button__image {
opacity: 1;
animation: none
}
.joinchat--chatbox .joinchat__button__image {
display: none
}
.joinchat__button__send {
display: none;
width: var(--btn);
height: var(--btn);
max-width: var(--btn);
padding: 12px 11px 12px 13px;
margin: 0;
flex-shrink: 0
}
.joinchat--chatbox .joinchat__button__send {
display: block
}
.joinchat__button__send path {
fill: none!important;
stroke: var(--text)!important
}
.joinchat__button__send .joinchat_svg__plain {
stroke-dasharray: 1097;
stroke-dashoffset: 1097;
animation: joinchat_plain 6s .2s ease-in-out infinite
}
.joinchat__button__send .joinchat_svg__chat {
stroke-dasharray: 1020;
stroke-dashoffset: 1020;
animation: joinchat_chat 6s 3.2s ease-in-out infinite
}
.joinchat__button__sendtext {
padding: 0;
max-width: 0;
font-weight: 600;
line-height: var(--btn);
white-space: nowrap;
opacity: 0;
overflow: hidden;
transition: none
}
.joinchat--chatbox .joinchat__button__sendtext {
padding: 0 4px 0 24px;
max-width: 200px;
opacity: 1;
transition: max-width .2s linear, opacity .4s ease-out .2s
}
.joinchat--chatbox.joinchat--left .joinchat__button__sendtext {
padding: 0 24px 0 4px
}
.joinchat__badge {
position: absolute;
top: -4px;
right: -4px;
width: 20px;
height: 20px;
border: none;
border-radius: 50%;
background: #e82c0c;
color: #fff;
font-size: 12px;
font-weight: 600;
line-height: 20px;
text-align: center;
box-shadow: none;
opacity: 0;
pointer-events: none
}
.joinchat__badge.joinchat__badge--in {
animation: joinchat_badge_in .5s cubic-bezier(.27, .9, .41, 1.28) 1 both
}
.joinchat__badge.joinchat__badge--out {
animation: joinchat_badge_out .4s cubic-bezier(.215, .61, .355, 1) 1 both
}
.joinchat__tooltip {
position: absolute;
top: 14px;
right: 76px;
max-width: calc(100vw - 105px);
height: 32px;
padding: 0 14px;
border: none;
border-radius: 16px;
background: #fff;
color: rgba(0, 0, 0, .8);
line-height: 31px;
white-space: nowrap;
opacity: 0;
transition: opacity .3s ease-out .4s;
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .4));
transform: translateZ(0);
pointer-events: none
}
.joinchat__tooltip:after {
content: "";
display: block;
position: absolute;
top: 10px;
right: -6px;
border: 8px solid transparent;
border-width: 6px 0 6px 8px;
border-left-color: #fff
}
.joinchat__tooltip div {
overflow: hidden;
text-overflow: ellipsis
}
.joinchat--tooltip .joinchat__tooltip {
animation: joinchat_tootlip 20s linear 5s 1 normal both
}
@media (hover:hover) {
.joinchat__button:hover .joinchat__tooltip {
opacity: 1;
animation: none;
transition: opacity .2s
}
}
.joinchat--chatbox .joinchat__tooltip {
display: none
}
.joinchat--left .joinchat__tooltip {
right: auto;
left: 76px
}
.joinchat--left .joinchat__tooltip:after {
left: -6px;
right: auto;
border-color: transparent;
border-width: 6px 8px 6px 0;
border-right-color: #fff
}
.joinchat__box {
display: flex;
flex-direction: column;
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
width: calc(100vw - var(--sep)*2);
max-width: 400px;
min-height: 170px;
max-height: calc(var(--vh) - var(--bottom) - var(--sep));
border-radius: 32px;
background: transparent;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .5);
text-align: left;
overflow: hidden;
transform: scale3d(0, 0, 0);
opacity: 0;
transition: max-height .2s ease-out, opacity .4s ease-out, transform 0s linear .3s
}
.joinchat--chatbox .joinchat__box {
opacity: 1;
transform: scaleX(1);
transition: max-height .2s ease-out, opacity .2s ease-out, transform 0s linear
}
.joinchat--left .joinchat__box {
right: auto;
left: 0
}
.joinchat__header {
display: flex;
flex-flow: row;
align-items: center;
position: relative;
flex-shrink: 0;
height: var(--header);
padding: 0 70px 0 26px;
margin: 0;
background: var(--color);
text-align: left
}
[dir=rtl] .joinchat__header {
text-align: right
}
.joinchat--dark .joinchat__header {
background: var(--dark)
}
.joinchat__header__text {
font-size: 19px;
font-weight: 600;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: .8
}
.joinchat__powered {
font-size: 11px;
line-height: 18px;
color: inherit!important;
text-decoration: none!important;
fill: currentColor;
opacity: .8
}
.joinchat__powered svg {
display: inline-block;
width: auto;
height: 18px;
vertical-align: -30%
}
.joinchat__powered:active,
.joinchat__powered:hover {
color: inherit!important;
text-decoration: none!important;
opacity: .9
}
.joinchat__wa {
height: 28px;
width: auto;
fill: currentColor;
opacity: .8
}
.joinchat__close {
position: absolute;
top: 50%;
right: 24px;
width: 34px;
height: 34px;
margin-top: -16px;
border-radius: 50%;
background: rgba(0, 0, 0, .4) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 2.4L21.6 0 12 9.6 2.4 0 0 2.4 9.6 12 0 21.6 2.4 24l9.6-9.6 9.6 9.6 2.4-2.4-9.6-9.6L24 2.4z'/%3E%3C/svg%3E") 50% no-repeat;
background-size: 12px;
cursor: pointer;
transition: background-color .3s ease-out;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
.joinchat__close:hover {
background-color: rgba(0, 0, 0, .6)
}
[dir=rtl] .joinchat__close {
right: auto;
left: 24px
}
.joinchat__box__scroll {
padding: 20px 0 70px;
padding-bottom: calc(var(--btn) + 10px);
background: #fff linear-gradient(0deg, var(--bg), var(--bg));
overflow-x: hidden;
overflow-y: auto;
will-change: scroll-position
}
.joinchat__box__scroll::-webkit-scrollbar {
width: 5px;
background: transparent
}
.joinchat__box__scroll::-webkit-scrollbar-thumb {
border-radius: 3px;
background: transparent
}
.joinchat__box__scroll:hover::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, .2)
}
.joinchat--blur .joinchat__box__scroll {
background: rgba(var(--rgb), .2);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px)
}
.joinchat--dark .joinchat__box__scroll {
background: #1a1a1a
}
@supports (-webkit-overflow-scrolling:touch) {
.joinchat__box__scroll {
overflow-y: scroll;
-webkit-overflow-scrolling: touch
}
}
@media (max-width:480px),
(orientation:landscape) and (max-width:767px) {
.joinchat__header__text {
font-size: 17px
}
.joinchat__close {
margin-top: -14px;
width: 28px;
height: 28px
}
.joinchat__box__scroll {
padding-top: 15px
}
}
@media (color-index:48) {
.joinchat--dark-auto .joinchat__box__scroll {
background: #1a1a1a
}
.joinchat--dark-auto .joinchat__header {
background: var(--dark)
}
}
@media (prefers-color-scheme:dark) {
.joinchat--dark-auto .joinchat__box__scroll {
background: #1a1a1a
}
.joinchat--dark-auto .joinchat__header {
background: var(--dark)
}
}
.joinchat__message {
position: relative;
min-height: 60px;
padding: 17px 20px;
margin: 0 26px 26px;
border-radius: 32px;
background: #fff;
color: #4a4a4a;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
transform: translateZ(0)
}
.joinchat__message:before {
content: "";
display: block;
position: absolute;
bottom: 20px;
left: -15px;
width: 17px;
height: 25px;
background: inherit;
-webkit-clip-path: url(#joinchat__message__peak);
clip-path: url(#joinchat__message__peak)
}
.joinchat--dark .joinchat__message {
background: #505050;
color: #d8d8d8
}
@media (color-index:48) {
.joinchat--dark-auto .joinchat__message {
background: #505050;
color: #d8d8d8
}
}
@media (prefers-color-scheme:dark) {
.joinchat--dark-auto .joinchat__message {
background: #505050;
color: #d8d8d8
}
}
@media (max-width:480px),
(orientation:landscape) and (max-width:767px) {
.joinchat__message {
padding: 18px 16px;
line-height: 24px;
margin: 0 20px 20px
}
}
@keyframes joinchat_badge_in {
0% {
opacity: 0;
transform: translateY(50px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes joinchat_badge_out {
0% {
opacity: 1;
transform: translateY(0)
}
to {
opacity: 0;
transform: translateY(-20px)
}
}
@keyframes joinchat_plain {
0%,
50%,
to {
stroke-dashoffset: 1097
}
5%,
45% {
stroke-dashoffset: 0
}
}
@keyframes joinchat_chat {
0%,
50%,
to {
stroke-dashoffset: 1020
}
5%,
45% {
stroke-dashoffset: 0
}
}
@keyframes joinchat_image_loop {
0% {
opacity: 0
}
3%,
20% {
opacity: 1
}
25%,
to {
opacity: 0
}
}
@keyframes joinchat_tootlip {
0% {
opacity: 0;
transform: scaleY(0)
}
1%,
20% {
opacity: 1;
transform: scaleY(1)
}
25%,
to {
opacity: 0;
transform: scaleY(1)
}
}
.joinchat {
--red: 37;
--green: 211;
--blue: 102
}
.new-location-section .carousel-inner img {
aspect-ratio: 16/10;
object-fit: cover;
}
.new-location-section .carousel-indicators {
bottom: -40px;
}
.new-location-section .carousel-indicators button {
background-color: var(--primary-color);
width: 12px;
height: 12px;
border-radius: 50%;
}
.location-content .feature-list li {
padding: 12px 0;
}