body{ background: #111111; font-family: 'Open Sans'; font-style: normal; position: relative; overflow-x: hidden;; } ul{ list-style: none; } img{ max-width: 100%; } a{ text-decoration: none; } .wrapper{ width: 1180px; margin: 0 auto; position: relative; z-index: 100; max-width: calc(100% - 40px); } .row{ display: flex; align-items: center; gap: 5px; } .section_title{ font-size: 28px; font-weight: 600; color: #fff; width: 100%; } .section_title a{ color: #fff!important; } .section_title.small{ font-size: 22px; } .green{ color: #81B225; } .section_title .button{ color: #B8B8B8; font-size: 12px; text-transform: uppercase; border: 1px solid #B8B8B8; filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.5)); border-radius: 4px; padding: 8px 15px; text-decoration: none; font-weight: 600; } .section_description{ color: #B8B8B8; font-size: 14px; } .section_text{ color: #E3E3E3; font-size: 14px; line-height: 1.5; } h2.title{ font-size: 18px; } .bg_pattern{ position: absolute; top: 0px; right: 0; z-index: 0; max-height: 100%; } .bg_pattern img{ width: 100%; height: 100%; } .zoomContainer{ z-index: 99999; } /* General */ .mt-0{ margin-top: 0px !important; } .mt-5{ margin-top: 5px !important; } .mt-10{ margin-top: 10px !important; } .mt-20{ margin-top: 20px !important; } .mt-25{ margin-top: 25px !important; } .mt-30{ margin-top: 30px !important; } .mt-40{ margin-top: 40px !important; } .mt-60{ margin-top: 60px !important; } .mt-100{ margin-top: 100px !important; } .mr-5{ margin-right: 5px !important; } .mr-10{ margin-right: 10px !important; } .mr-20{ margin-right: 20px !important; } .mr-30{ margin-right: 30px !important; } .ml-5{ margin-left: 5px !important; } .ml-10{ margin-left: 10px !important; } .ml-20{ margin-left: 20px !important; } .ml-30{ margin-left: 30px !important; } .mb-0{ margin-bottom: 0px !important; } .mb-10{ margin-bottom: 10px !important; } .mb-20{ margin-bottom: 20px !important; } .mb-30{ margin-bottom: 30px !important; } .mb-60{ margin-bottom: 60px !important; } .pb-0{ padding-bottom: 0px !important; } .w100p{ width: 100% !important; } .hide_scroll{ overflow: hidden !important; } .hidden{ display: none !important; } .bold{ font-weight: 600 !important; } .button{ display: inline-block; border: none; outline: none; font-size: 18px; color: #000; padding: 10px 20px; text-transform: uppercase; font-weight: 600; text-decoration: none; border-radius: 4px; background: transparent; text-align: center; } .button:hover{ cursor: pointer; opacity: 0.8; } .button.green{ background: #81B225; } .button.gray{ background: #B8B8B8; } .button.black{ background: #000000; color: #fff; } .button.white{ background: #fff; } .button.orange{ background: #FF4E00; color: #fff; } .button .btn_icon{ display: inline-block; margin-right: 10px; width: 16px; height: 13px; } .button .btn_icon.compare{ background: url('../img/svg/compare_green.svg'); } .button.black .btn_icon.compare, .button.orange .btn_icon.compare, .button.transparent-gray .btn_icon.compare, .button.transparent-white .btn_icon.compare, .button.transparent-orange .btn_icon.compare{ background: url('../img/svg/compare.svg'); background-size: 16px 13px; } .button.transparent-green .btn_icon.compare{ background: url('../img/svg/compare_green.svg'); background-size: 16px 13px; position: relative; top: 2px; } .button .btn_icon.application{ width: 14px; height: 16px; background: url('../img/svg/application.svg'); } .button .btn_icon.video{ width: 14px; height: 12px; background: url('../img/svg/contacts_video.svg'); } .button .btn_icon.waze{ width: 14px; height: 14px; background: url('../img/svg/contacts_waze.svg'); } .button .btn_icon.cart{ width: 16px; height: 15px; background: url('../img/svg/cart_black.svg'); background-size: 16px 15px; position: relative; top: 2px; } .button.transparent-green{ border: 1px solid #81B225; color: #81B225; } .button.transparent-gray{ border: 1px solid #B8B8B8; color: #B8B8B8; } .button.transparent-white{ border: 1px solid #fff; color: #fff; } .button.transparent-orange{ border: 1px solid #FF4E00; color: #FF4E00; } .button.transparent-black{ border: 1px solid #000; color: #000; } .button.large{ padding: 23px 34px; font-size: 18px; } .button.medium{ padding: 16px 26px; font-size: 16px; } .button.small{ padding: 10px 18px; font-size: 14px; } .button.online_application{ width: 450px; max-width: 100%; } .display-block{ display: block !important; } .fl-r{ float: right !important; } .fl-l{ float: left !important; } .ta-r{ text-align: right !important; } .ta-l{ text-align: left !important; } .ta-c{ text-align: center !important; } .clear{ clear: both; } .w30{ width: 30px; } .w40{ width: 40px; } .w50{ width: 50px; } .w100{ width: 100px; } .w120{ width: 120px; } .w130{ width: 130px; } .w230{ width: 230px !important; } .star{ color: #FF4E00; } .color-green{ color: #81B225 !important; } .color-black{ color: #000 !important; } .link, .regex_link, .text a, .wysiwyg a{ color: #81B225; text-decoration: underline; font-size: 16px; } .checkbox_block .text a { font-size: inherit; } .link:hover, .regex_link:hover, .text a:hover, .wysiwyg a:hover{ cursor: pointer; text-decoration: none; } .no-border{ border: none !important; } h2{ font-size: 26px; color: #E3E3E3; } h3{ font-size: 22px; color: #E3E3E3; } h4{ font-size: 20px; color: #fff; } h5{ font-size: 18px; color: #fff; } h6{ font-size: 16px; color: #fff; } ol{ padding-left: 20px; list-style: none; counter-reset: li; } ol li { counter-increment: li; } ol li::before { content: counter(li) ". "; color: #81B225; display: inline-block; margin-right: 5px; font-weight: 600; } input, select{ outline: none; } .mobile{ display: none !important; } .tablet{ display: none !important; } /* Header */ #header_row{ width: 100%; min-height: 121px; position: relative; z-index: 105; background: #111111;} #header_row .mobile_menu_button{ display: none; } #header_row .logo{ display: inline-block; width: 129px; height: 70px; margin-top: 28px; } #header_row .logo img { width: 129px; height: 70px; } #header_row .top{ display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding: 0px; max-width: calc(100% - 190px); height: 59px; float: right; } /* Sections */ #header_row .top .top_sections{ display: flex; flex-direction: row; align-items: center; padding: 0px; gap: 15px; height: 100%; border-right: 1px solid #B8B8B824; padding-right: 20px; } #header_row .top .top_sections a, #header_row .top .top_sections .active_language{ color: #B8B8B8; text-decoration: none; font-size: 12px; display: inline-block; position: relative; } #header_row .top .top_sections a:hover, #header_row .top .top_sections .active_language:hover{ color: #fff; cursor: pointer; } #header_row .top .top_sections .active_language{ background: url('../img/svg/arrow_gray_down.svg'); background-repeat: no-repeat; padding-right: 13px; background-position: right center; height: 100%; display: flex; align-items: center; } #header_row .top .top_sections .active_language .language_select{ display: none; position: absolute; top: 42px; border: 1px solid #757575; background: #111111; z-index: 999; } #header_row .top .top_sections .active_language:hover .language_select{ display: block; } #header_row .top .top_sections .active_language .language_select a{ padding: 5px 10px; border-bottom: 1px solid #757575; width: calc(100% - 20px); } #header_row .top .top_sections .active_language .language_select a:last-child{ border-bottom: none; } #header_row .top .top_sections a.application{ padding: 10px 12px; color: #090909; background: #FF4E00; border-radius: 41px; } #header_row .top .top_sections a.application:hover{ background: #fff; } /* Socials */ #header_row .top_socials{ display: flex; flex-direction: row; align-items: center; height: 100%; padding: 0px; gap: 4px; padding-left: 20px; padding-right: 20px; border-right: 1px solid #B8B8B824; } #header_row .top_socials .icon-facebook{ width: 32px; height: 33px; background: url('../img/svg/icon-facebook.svg'); } #header_row .top_socials .icon-whatsapp{ width: 32px; height: 33px; background: url('../img/svg/icon-whatsapp.svg'); } #header_row .top_socials .icon-instagram{ width: 32px; height: 33px; background: url('../img/svg/icon-instagram.svg'); } #header_row .top_socials a{ border: none; } #header_row .top_socials a:hover{ opacity: 0.7; } /* Namedays */ #header_row .top_namedays{ padding-left: 20px; color: #B8B8B8; font-size: 12px; width: 280px; display: flex; flex-direction: row; align-items: center; height: 100%; gap: 10px; } #header_row .top_namedays .left{ float: left; display: flex; flex-direction: row; align-items: center; height: 100%; } #header_row .top_namedays .left .icon-gift{ width: 22px; height: 23px; background: url('../img/svg/gift.svg'); } #header_row .top_namedays .first_row{ color: #FF4E00; } #header_row .bottom{ display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding: 0px; max-width: calc(100% - 190px); height: 59px; float: right; position: absolute; top: 59px; right: 0; border-top: 1px solid #B8B8B824; } .mobile_overlay{ display: none; } .top_application_row{ text-align: center; padding: 10px; background: #0b0b0b; } .top_application_row .application_button{ display: inline-block; background: #FF4E00; color: #090909; border-radius: 20px; padding: 10px 12px; min-width: 200px; text-align: center; } /* Menu */ #header_row .menu{ display: flex; flex-direction: row; align-items: center; padding: 0px; gap: 1px; list-style: none; height: 100%; } #header_row .menu li{ font-size: 14px; height: 100%; } #header_row .menu li.active{ background: #fff; } #header_row .menu li.active a{ color: #000; } #header_row .menu li.active .arrow svg{ stroke: #000; fill: #000; } #header_row .menu li:hover{ background: #81B225; } #header_row .menu li a{ text-decoration: none; color: #fff; padding: 0 10px; height: 100%; text-transform: uppercase; display: flex; flex-direction: row; align-items: center; text-align: center; } #header_row .menu li:hover a{ color: #000; cursor: pointer; } #header_row .menu li .arrow{ display: inline-block; width: 12px; height: 8px; margin-left: 10px; display: flex; } #header_row .menu li .arrow svg{ max-width: 100%; max-height: 100%; stroke: #fff; fill: #fff; } #header_row .menu li:hover .arrow svg{ stroke: #000; fill: #000; } #header_row .menu li .icon-discount{ display: inline-block; width: 16px; height: 16px; margin-right: 10px; background: url('../img/svg/discount_orange.svg'); } #header_row .menu li.active:not(.opened) .icon-discount, #header_row .menu li:hover .icon-discount{ background: url('../img/svg/discount_white.svg'); background-size: 16px; } /* Cart block */ #header_row .cart_block{ background-color: #000; width: 120px; height: 100%; position: relative; } #header_row .cart_block a{ display: flex; flex-direction: row; align-items: center; height: 100%; text-decoration: none; position: relative; } #header_row .cart_block .cart_icon{ display: inline-block; width: 26px; height: 28px; margin-right: 10px; background: url('../img/svg/cart_green.svg'); position: relative; margin-left: 20px; } #header_row .cart_block .cart_icon span{ display: inline-block; text-align: center; position: absolute; color: #fff; background-color: #FF4E00; width: 16px; height: 16px; border-radius: 10px; font-size: 12px; line-height: 16px;right: -6px; } #header_row .cart_block .cart_price{ color: #81B225; font-size: 15px; } #header_row .cart_block .items{ position: absolute; background: #000; width: 375px; top: 50px; right: 0; box-shadow: 0px 32px 32px rgba(0, 0, 0, 0.8); border-radius: 4px; z-index: 9999; color: #E3E3E3; padding: 10px; display: none; } #header_row .cart_block:hover .items{ display: block; } #header_row .cart_block .items ul{ display: flex; flex-direction: column; gap: 15px; } #header_row .cart_block .items li{ display: flex; flex-direction: row; gap: 10px; align-items: center; } #header_row .cart_block .items .image{ width: 70px; height: 70px; min-width: 70px; } #header_row .cart_block .items .info{ width: calc(100% - 130px); } #header_row .cart_block .items .info .name{ font-size: 13px; line-height: 1.4; } #header_row .cart_block .items .info .row{ justify-content: space-between; } #header_row .cart_block .items .info .label{ font-size: 11px; color: #757575; } #header_row .cart_block .items .info .content{ font-size: 14px; } #header_row .cart_block .items .total_amount{ text-align: center; color: #FF4E00; } #header_row .cart_block .items .total_amount .bold{ font-size: 24px;; } #header_row .cart_block .items .button{ text-align: center; justify-content: center; font-weight: 600; } #header_row .cart_block .items .button .cart{ top: -1px; } .mobile_menu{ display: none; } .menu_summer_tyres > a::before, .menu_winter_tyres > a::before, .menu_all_season_tyres > a::before, .menu_43 > a::before, .menu_13 > a::before, .menu_41 > a::before, .menu_44 > a::before, .menu_23 > a::before, .menu_21 > a::before, .menu_27 > a::before{ content: ''; display: inline-block; width: 26px; height: 26px; position: absolute; top: 11px; left: 10px; background-size: 26px; } .menu_summer_tyres > a, .menu_winter_tyres > a, .menu_all_season_tyres > a, .menu_43 > a, .menu_13 > a, .menu_41 > a, .menu_44 > a, .menu_23 > a, .menu_21 > a, .menu_27 > a{ padding-left: 40px !important; } .menu_summer_tyres > a::before{ background-image: url('../img/svg/season_summer.svg'); } .menu_winter_tyres > a::before{ background-image: url('../img/svg/season_winter.svg'); } .menu_all_season_tyres > a::before{ background-image: url('../img/svg/summer_all.svg'); } .menu_43 > a::before{ background-image: url('../img/svg/accessories.svg'); } .menu_13 > a::before{ background-image: url('../img/svg/battery.svg'); } .menu_41 > a::before{ background-image: url('../img/svg/tpms.svg'); } .menu_44 > a::before{ background-image: url('../img/svg/pricesheet.svg'); } .menu_23 > a::before{ background-image: url('../img/svg/alignment.svg'); background-size: 44px; width: 44px; height: 44px; top: 2px; left: 0px; } .menu_21 > a::before{ background-image: url('../img/svg/tire-iron.svg'); } .menu_27 > a::before{ background-image: url('../img/svg/air-conditioner.svg'); } .submenu_block{ background: #81B225; margin-top: 21px; position: fixed; left: 0; width: 100vw; } .submenu_block ul{ display: flex; flex-direction: row; text-transform: uppercase; font-size: 15px; font-weight: 600; width: 1180px; max-width: calc(100% - 40px); margin: 0 auto; flex-wrap: wrap; } .submenu_block ul:not(.active){ display: none; } .submenu_block ul li{ padding: 15px 10px; } .submenu_block ul li:hover{ background: #fff; } .submenu_block ul li a{ padding: 15px 10px; text-decoration: none; color: #000; position: relative; } .topButtons .button { margin-right:10px; margin-bottom:10px; } .whiteText { padding-top:50px;margin-top:50px;border-top:1px solid #ccc; } .whiteText p { color:#ffffff !important; } .whiteText p a { color:#81B225 !important; } /* Firstpage search */ .firstpage_search{ background-color: #000; min-height: 370px; } .firstpage_search .search{ padding-top: 60px; padding-bottom: 20px; padding-right: 60px; width: calc(100% - 430px); display: inline-block; } .firstpage_search .search .title{ font-size: 32px; color: #fff; margin-bottom: 20px; } .firstpage_search .search .title .small_text{ color: #B8B8B8; font-size: 15px; margin-left: 10px; } .select_block{ display: inline-block; width: calc(25% - 5px); max-width: 100%; position: relative; height: 60px; border-radius: 4px; } .select_block label{ color: #B8B8B8; font-size: 12px; position: absolute; top: 10px; left: 10px; } .select_block select{ background-color: #111111; background-image: url('../img/svg/arrow_white_down.svg'); background-repeat: no-repeat; border: none; outline: none; width: 100%; color: #81B225; height: 100%; appearance: none; background-position: right 10px center; padding-left: 10px; font-size: 18px; padding-top: 15px; padding-right: 30px; border-radius: 4px; } .firstpage_search .search .button{ height: 60px; vertical-align: top; text-transform: uppercase; font-weight: 600; width: calc(25% - 5px); border-radius: 4px; } .checkbox_block{ display: inline-block; color: #B8B8B8; } .checkbox_block .label{ margin-bottom: 5px; font-size: 14px; } .checkbox_block label{ display: inline-block; position: relative; padding-left: 33px; margin-bottom: 12px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-right: 8px; } .checkbox_block input{ position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkbox_block .checkmark{ position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #fff; border-radius: 4px; } .checkbox_block .text{ position: relative; top: 3px; opacity: 0.5; font-weight: 600; } .checkbox_block label:hover input ~ .checkmark { background-color: #ccc; } .checkbox_block label input:checked ~ .checkmark{ background-color: #81B225; } .checkbox_block label input:checked ~ .text{ color: #81B225; opacity: 1; } .checkbox_block .checkmark:after { content: ""; position: absolute; display: none; } .checkbox_block label input:checked ~ .checkmark:after { display: block; } .checkbox_block label .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid #000; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .select_block.small{ height: 45px; width: 150px; } .select_block.small label{ top: 5px; } .select_block.small select{ font-size: 15px; } .select_block.dark{ background: #000; border: 1px solid #757575; height: 58px; } .select_block.dark select{ background-color: #000; } .checkbox_block.dark .checkmark{ background: #000; border: 1px solid #B8B8B8; } .checkbox_block.dark label:hover input ~ .checkmark{ background: #393939; } .checkbox_block.dark label input:checked ~ .checkmark{ background-color: #81B225; } .search .more_with_arrow{ font-size: 12px; color: #B8B8B8; text-decoration: none; } .search .more_with_arrow span{ width: 10px; height: 6px; display: inline-block; background: url('../img/svg/arrow_gray_down.svg'); margin-left: 5px; position: relative; } .search .more_with_arrow.active span{ top: 0px; transform: rotate(180deg); } .search .link_auto{ text-decoration: underline; font-size: 12px; color: #fff; margin-right: 20px; } .search .link_auto:hover{ text-decoration: none; } .search .link_auto span{ display: inline-block; width: 14px; height: 14px; background: url('../img/svg/car.svg'); margin-left: 5px; position: relative; top: 3px; } .search .search_by_id{ padding: 10px 20px; padding-right: 30px; width: 135px; border: 1px solid #FFFFFF; border-radius: 4px; text-align: right; background-color: #000; background-image: url('../img/svg/search.svg'); background-position: right 10px center; background-repeat: no-repeat; color: #fff; position: relative; top: -8px; } .news_carousel{ width: 370px; height: 370px; float: right; position: relative; } .news_carousel .owl-item{ width: 370px; height: 370px; } .news_item{ position: relative; width: 370px; height: 370px; } .news_item img{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; } .news_item .overlay{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(360deg, #000 0%, rgba(0, 0, 0, 0) 100%); } .news_item .content{ position: absolute; bottom: 50px; padding: 0 20px; } .news_item .gift-tag{ display: inline-block; background: #FF4E00; padding: 5px 8px 7px;; text-transform: uppercase; font-size: 10px; font-weight: 600; color: #fff; } .news_item .gift-tag span{ display: inline-block; width: 12px; height: 13px; background: url('../img/svg/present.svg'); margin-right: 8px; position: relative; top: 2px; } .news_item .discount-tag{ display: inline-block; background: #FF0000; padding: 5px 8px 7px;; text-transform: uppercase; font-size: 10px; font-weight: 600; color: #fff; } .news_item .discount-tag span{ display: inline-block; width: 12px; height: 13px; background: url('../img/svg/discount_white.svg'); margin-right: 8px; position: relative; top: 2px; } .news_item .title{ display: block; width: 100%; font-size: 22px; font-weight: 600; color: #fff; margin: 15px 0px; } .news_item .button{ display: inline-block; color: #B8B8B8; border: 1px solid #B8B8B8; border-radius: 4px; text-decoration: none; font-size: 14px; text-transform: uppercase; padding: 5px 15px !important; height: auto !important; filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.5)); font-weight: 600; } .news_item .button:hover{ color: #fff; border-color: #fff; opacity: 1; } .product_carousel{ margin-bottom: 30px;} .product_carousel .owl-dots, .news_carousel .owl-dots{ position: absolute; bottom: 20px; left: 20px; display: flex; flex-direction: row; gap: 5px; flex-wrap: wrap; } .product_carousel .owl-dots{ left: 0px; bottom: -15px } .product_carousel .owl-dots .owl-dot, .news_carousel .owl-dots .owl-dot{ display: inline-block; width: 12px; height: 2px; background: #fff; opacity: 0.2; } .product_carousel .owl-dots .owl-dot.active, .news_carousel .owl-dots .owl-dot.active{ background: #81B225; opacity: 1; } /* Firstpage */ /* Map section */ .map_section{ gap: 40px; } #riga-map{ width: 770px; height: 399px; max-width: 100%; } .firstpage #riga-map{ max-width: calc(100% - 410px); width: 795px; } #map{ width: 100%; height: 100%; } .map_section .banner{ width: 154px; height: 399px; } .map_section .banner img{ width: 100%; height: 100%; } /* Free section */ .free_section{ margin-top: 70px; justify-content: space-between; width: 100%; align-items: baseline; gap: 20px; } .free_section .free_block{ display: flex; flex-direction: row; gap: 10px; flex: 1 1 0; margin: 0 auto; } .free_section .free_block .icon{ width: 67px; height: 67px; border: 1px solid #E3E3E3; position: relative; } .free_section .free_block .icon span{ display: inline-block; position: absolute; bottom: 0px; left: 0; right: 0; margin: auto; } .free_section .free_block .icon.truck span{ width: 44px; height: 44px; background: url('../img/svg/benefit_delivery.svg'); } .free_section .free_block .icon.tyres span{ width: 29px; height: 28px; background: url('../img/svg/benefit_setup.svg'); } .free_section .free_block .icon.trash span{ width: 21px; height: 33px; background: url('../img/svg/benefit_utilization.svg'); } .free_section .free_block .icon.booking span{ width: 48px; height: 48px; background: url('../img/svg/benefit_booking.svg');bottom:-5px; } .free_section .free_block .content{ display: inline-block; width: calc(100% - 80px); max-width: 240px; position: relative; top: -7px; } .free_section .free_block .content .title{ font-weight: 600; font-size: 18px; color: #81B225; } .free_section .free_block .content .text{ font-size: 14px; color: #E3E3E3; } .free_section.small .free_block{ align-items: center; } .free_section.small .free_block .icon{ width: 28px; height: 28px; } .free_section.small .free_block .icon.truck span{ width: 26px; height: 14px; background-size: 26px 14px; } .free_section.small .free_block .icon.tyres span{ width: 18px; height: 17px; background-size: 18px 17px; } .free_section.small .free_block .icon.trash span{ width: 12px; height: 19px; background-size: 12px 19px; } .free_section.small .free_block .content{ top: 0px; width: calc(100% - 40px); } .free_section.small .free_block .content .title{ font-size: 16px; } /* Product section */ .product_section{ margin-top: 30px; justify-content: space-between; row-gap: 30px; } .dark_block{ position: relative; background: #000; } /*.product_section .dark_block{ width: 210px; height: 202px; padding: 30px; overflow: hidden; }*/ .product_section .dark_block{ width: 310px; height: 202px; padding: 30px; overflow: hidden; } .product_section .dark_block a{ display: block; width: 100%; height: 100%; } .dark_block .title{ font-weight: 600; font-size: 21px; color: #81B225; z-index: 1; position: relative; } .dark_block .text{ width: 110px; font-weight: 600; font-size: 13px; color: #E3E3E3; margin-top: 5px; z-index: 1; position: relative; } .dark_block .link{ font-size: 14px; color: #E3E3E3; text-decoration-line: underline; position: absolute; left: 30px; bottom: 30px; color: #E3E3E3; z-index: 1; } .dark_block .link:hover{ text-decoration: none; } .dark_block .icon_arrow{ background: #81B225; border-radius: 50px; width: 40px; height: 40px; display: inline-block; position: absolute; bottom: 30px; right: 30px; z-index: 1; } .dark_block .icon_arrow span{ display: inline-block; background: url('../img/svg/arrow_swipe_right.svg'); width: 12px; height: 9px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .dark_block img{ position: absolute; z-index: 0; bottom: 0; right: 0; width: auto !important; } .dark_block .link_text{ position: absolute; color: #E3E3E3; z-index: 100; text-decoration: underline; font-size: 14px; bottom: 40px; } .dark_block a:hover .link_text{ text-decoration: none; } /* Service section */ .services_buttons{ margin-top: 30px; justify-content: space-between; } .services_buttons .dark_block{ width: 210px; height: 160px; padding: 30px; } .services_buttons .dark_block a{ display: block; width: 100%; height: 100%; } .right .services_buttons .dark_block{ width: calc(100% - 60px); margin-bottom: 20px; } .services_buttons .dark_block .icon_arrow{ right: unset; left: 30px; } .service_section .owl-nav, .news_carousel .owl-nav{ display: flex !important; justify-content: space-between; position: absolute; bottom: 50%; left: 0; right: 0; transform: translateY(50%); } .service_section .owl-nav button, .news_carousel .owl-nav button{ background: #757575 !important; width: 30px; height: 30px; position: absolute; border-radius: 20px; top: -15px; } .news_carousel .owl-nav button.owl-prev{ left: 20px; } .service_section .owl-nav button.owl-prev{ left: -50px; } .service_section .owl-nav button.owl-next{ right: -50px; } .news_carousel .owl-nav button.owl-next{ right: 20px; } .service_section .owl-nav button span, .news_carousel .owl-nav button span{ display: inline-block; width: 12px; height: 9px; position: absolute; top: 10px; left: 9px; color: transparent; } .service_section .owl-nav button.owl-prev span, .news_carousel .owl-nav button.owl-prev span{ background: url('../img/svg/arrow_swipe_left.svg'); } .service_section .owl-nav button.owl-next span, .news_carousel .owl-nav button.owl-next span{ background: url('../img/svg/arrow_swipe_right.svg'); } .service_list{ display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .service_list .button{ width: 100%; background: transparent; color: #81B225; border: 1px solid #757575; border-radius: 4px; } /* Tyre size list */ .tyreSizesList{ display: block; } .tyreSizesList .tyreDiameters{ display: flex; text-transform: uppercase; font-weight: 600; font-size: 16px; color: #fff; list-style: none; flex-flow: row wrap; width: 100%; gap: 0px; row-gap: 15px; } .tyreSizesList .tyreDiameters li{ padding: 5px 10px; border-bottom: 2px solid #000;} .tyreSizesList .tyreDiameters li.active{ color: #81B225; border-bottom: 2px solid #81B225; } .tyreSizesList .tyreDiameters li:hover{ color: #81B225; cursor: pointer; } .tyreSizesList .tyreSizes{ flex-flow: row wrap; gap: 10px; display: flex; justify-content: space-between; width: 100%; padding-top: 20px; } .tyreSizesList .tyreSizes .col { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: auto; grid-gap: 10px; width: 100%; } .tyreSizesList .tyreSizes .col li { display: block; text-align: center; border: 1px solid #000000; border-radius: 4px; } .tyreSizesList .tyreSizes .col li a{ display: block; color: #fff; font-size: 16px; text-decoration: none; padding: 10px 20px; } .tyreSizesList .tyreSizes .col li:hover a{ color: #81B225; } /* Product items*/ .product_items{ display: block; width: 100%; } /* .product_items ul{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 5px; list-style: none; } */ .product_items ul{ width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 5px; list-style: none; justify-items: center; } /* .product_items ul::after { content: ''; grid-column: 1 / -1; } */ .product_items .item{ width: 230px; background: #fff; padding-left: 0 !important; } .product_items .item::before{ display: none !important; } .product_items .item a{ text-decoration: none !important; position: relative; display: block; overflow: hidden; height: 100%; } .product_items .item a:hover .button{ opacity: 0.8; } .product_items .item img{ width: 100%; height: 230px; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; vertical-align: middle; } /* .product_items .item img{ width: 100%; height: 158px; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; vertical-align: middle; } */ .product_items .item .img_wrapper{ overflow: hidden; position: relative; } .product_items .item a:hover img{ -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); -o-transform:scale(1.2); transform:scale(1.2); } .status{ position: absolute; display: inline-block; font-size: 10px; text-transform: uppercase; font-weight: 600; } .status.new{ background: #81B225; color: #000; font-weight: 600; text-align: center; top: 0; padding: 4px 8px; right: 0; } .statuses{ display: flex; flex-direction: column; position: absolute; bottom: 0px; right: 0px; gap: 2px; } .statuses .status{ position: unset; } .status.discount, .status.sold_out { background: #FF0000; color: #fff; font-weight: 600; right: 0; top: 112px; padding: 4px 8px; } .status.discount { padding-left: 25px; } .status.discount span{ display: inline-block; background: url('../img/svg/discount_white.svg'); width: 13px; height: 13px; position: absolute; left: 6px; } .status.get_today{ background: #FF4E00; color: #fff; font-weight: 600; right: 0; top: 136px; padding: 4px 8px; padding-left: 25px; } .status.get_today span{ display: inline-block; background: url('../img/svg/delivery.svg'); width: 13px; height: 13px; position: absolute; left: 8px; } .status.recommend{ top: 7px; background: #6C25B2; transform: rotate(+29deg); padding: 6px 44px; color: #fff; text-align: center; right: -37px; font-size: 12px; } .status.pms3{ background: url('../img/svg/3pmsf.svg'); width: 30px; height: 30px; background-size: 30px; left: 2px; top: 1px; } .status.studded{ background: url('../img/svg/studded.svg'); width: 40px; height: 38px; background-size: 40px; left: 8px; bottom: 8px; } .big_image .status.pms3{ width: 40px; height: 40px; background-size: 40px; left: 5px; top: 5px; } .big_image .status.studded{ width: 60px; height: 57px; background-size: 60px; left: 15px; bottom: 15px; } .product_items .item .info{ padding: 10px; position: relative; height: calc(100% - 292px); display: flex; gap: 0px;flex-direction: column; } /* .product_items .item .info{ padding: 10px; position: relative; height: calc(100% - 220px); display: flex; flex-wrap: wrap; gap: 0px;flex-direction: column; } */ .product_items .item .info .name_big{ color: #000; font-size: 19px; font-weight: normal; } .product_items .item .info .name{ color: #757575; font-size: 12px; font-weight: 600; margin-top: 5px; } .product_items .item .info .level_icons{ margin-top: auto; } .product_items .item .info .price{ width: 100%; position: relative; top: 6px; } .level_icons{ color: #111111; font-size: 12px; margin-top: 5px; } .level_icons span{ display: inline-block; padding-left: 16px; margin-right: 10px; } .level_icons .level_fuel{ background: url('../img/svg/eu_fuel.svg'); background-repeat: no-repeat; background-size: 12px 12px; background-position: left center; } .level_icons .level_traction{background: url('../img/svg/eu_rain.svg'); background-repeat: no-repeat; background-size: 13px 12px; background-position: left center; } .level_icons .level_sound{ background: url('../img/svg/eu_sound.svg'); background-repeat: no-repeat; background-size: 14px 12px; background-position: left center; } .level_icons .rsc{ margin-right:0;font-weight:bold;float:right; } .additional{ display: block; height: 30px; } .additional .tag{ display: inline-block; color: #111111; font-size: 11px; font-weight: 700; background: #E3E3E3; padding: 3px 8px; margin-top: 10px; text-transform: uppercase; color: #111111; } .additional .tag.wider{ width: 100%; padding-right: 0px; } .additional .tag.inverse { background-color:#ffffff;color:#FF4E00;padding-left:0; } .additional .tag.green { background-color:#81B225;color:#ffffff; } .additional .tag.red { background-color:#FF4E00;color:#ffffff; } .price .active_price{ color: #FF4E00; font-weight: 600; font-size: 20px; position: relative; top: 3px; } .price .old_price{ color: #757575; font-weight: 600; font-size: 12px; text-decoration-line: line-through; position: relative; top: 2px; margin-left: 5px; } .price .price_pcs { color: #757575; display: inline-block;font-size: 15px;position: relative; top: 2px; margin-left: 5px; } .compare_btn{ border: none; outline: none; background-color: #E3E3E3; border-radius: 4px; width: 34px; height: 34px; float: right; display: flex; align-items: center; justify-content: center; } .compare_btn svg{ width: 16px; height: 13px; stroke: #8d8d8d; fill: #8d8d8d; } .compare_btn.active{ background-color: #000; } .compare_btn.active svg{ stroke: #fff; fill: #fff; } .compare_btn:hover{ cursor: pointer; background-color: #BFBCBC; } .product_items .item .button{ background: #81B225; text-align: center; text-transform: uppercase; color: #000; display: block; font-weight: 600; border-radius: 0px; font-size: 16px; } .product_items .item .button .text{ position: relative; left: 12px; transition: left 500ms; } .product_items .item a:hover .button .text{ left: 0; transition: left 500ms; } .product_items .item .button .arrow_right{ width: 12px; height: 9px; background: url('../img/svg/arrow_swipe_right.svg'); margin-left: 10px; position: relative; top: -1px; transition: all 400ms ease-out; visibility: hidden; opacity: 0; display: inline-block; } .product_items .item a:hover .button .arrow_right{ visibility: visible; opacity: 1; transition: all 400ms ease-in; } .product_items .see_more_btn{ display: block; color: #B8B8B8; border: 1px solid #B8B8B8; filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.5)); border-radius: 4px; padding: 15px 34px; text-transform: uppercase; text-align: center; text-decoration: none; margin-top: 20px; font-weight: 600; font-size: 14px; } .product_items .see_more_btn:hover{ color: #fff; border-color: #fff; } .product_items .compare_btn{ position: relative; left: 7px; } .lazyLoader{ padding:20px;text-align:center; } .loading{ width: 16px; height: 16px; background: url('../img/loading.gif'); background-size: 16px; display: inline-block; } .sold_out .text { display:block;color:#ccc;background:#222;padding:30px 10px;text-align:center;font-weight:bold;border:2px solid #ccc;border-radius:2px;margin-bottom:25px;text-transform:uppercase; } /* Media section */ .media_section{ justify-content: space-between; } .media_section .media_block{ width: 370px; } .media_section .media_block:hover{ cursor: pointer; } .media_section .media_block .thumbnail{ height: 275px; position: relative; } .media_section .media_block .thumbnail picture { width: 100%; height: 100%; object-fit: contain; } .media_section .media_block .thumbnail .play_btn{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background-color: #81B225; } .media_section .media_block .thumbnail .play_btn span{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 19px; background: url('../img/svg/play.svg'); } .media_section .media_block .thumbnail .tag { position: absolute; bottom: 0px; left: 0px; background: #111111; padding: 4px 8px; color: #B8B8B8; text-transform: uppercase; font-size: 10px; } .media_section .media_block .name { color:#E3E3E3; font-size: 20px; margin-top: 5px; } .media_section .media_block .all_pictures{ display: none; } /* Cookies */ #cookie { width: 100%; min-height: 30px; background-color: #000; border-top: 2px solid #89be26; position: fixed; bottom: 0; padding: 8px 0; z-index: 110; display: inline-flex; color: #B8B8B8; padding-top: 30px; } #cookie.with_bottom_slider{ bottom: 80px; } #cookie .row{ align-items: flex-start; gap: 30px; } #cookie .row p{ font-size: 14px; } #cookie .image img{ width: 67px; min-width: 67px;} #cookie .checkboxes{ margin-top: 10px; } #cookie .checkboxes.error .checkmark{ border: 1px solid #F00; } #cookie .checkbox_block.dark label input:checked ~ .checkmark{ background: transparent; } #cookie .checkbox_block label .checkmark::after{ border-color: #89be26; } #cookie .checkbox_block label{ font-size: 12px; } #cookie .button{ padding: 10px 26px; font-size: 14px; } #cookie .image svg{ width: 67px; height: 67px; } /* NEW cookie design */ .cookies_overlay { position: fixed; width: 100vw; height: 100vh; display: block; background: #ccc; top: 0; z-index: 106; opacity: 0.6; } #cookiesPolicy { width: calc(100% - 40px); min-height: 30px; background: #E3E3E3; position: fixed; bottom: 0; padding: 30px 20px 10px 20px; z-index: 110; display: inline-flex; color: #111111;max-height:80vh;overflow:auto; } #cookiesPolicy.with_bottom_slider{ bottom: 80px; } #cookiesPolicy .content{ max-width: calc(100% - 65px); } #cookiesPolicy .row { align-items: flex-start; gap: 30px; } #cookiesPolicy .row p, #cookiesPolicy .row .link { font-size: 13px;line-height:22px;text-align:justify; } #cookiesPolicy .image svg { width: 64px; height: 64px; } #cookiesPolicy h5 { color: #81B225; font-weight: 600; font-size: 20px; line-height: 28px; margin-bottom: 10px; } #cookiesPolicy .title{ color: #81B225; font-weight: 600; font-size: 16px; line-height: 24px; margin-bottom: 10px; } #cookiesPolicy .buttons{ display: flex; flex-wrap: wrap; gap: 5px;margin-bottom:20px; } #cookiesPolicy .buttons button { padding: 8px 18px; font-size: 13px; } #cookiesPolicy .checkbox_block { width: 100%; } #cookiesPolicy .checkbox_block .checkmark{ width: 20px;height:20px; } #cookiesPolicy .checkbox_block label .checkmark::after { left: 7px;top: 2px;width: 4px;height: 11px;border-width: 0 2px 2px 0; } #cookiesPolicy .checkbox_block .text{ opacity: 1; top: -2px; } #cookiesPolicy .checkbox_block .text .description{ color: #111111; font-size: 11px; } #cookiesPolicy .checkbox_block label .checkmark::after{ border-color: #000; } #cookiesPolicy .cookiesTable { width:calc(100% - 33px);margin-left:33px;display:none;overflow-x:auto; } #cookiesPolicy .cookiesTable table { border:none;background:#ffffff;color:#333;border-radius:4px;font-size:11px;width:100%; } #cookiesPolicy .cookiesTable th, #cookiesPolicy .cookiesTable td { padding:5px;} #cookiesPolicy .cookiesTable th { font-weight:bold; } #cookiesPolicy .cookiesTable td { border-top:1px solid #cccccc; } #cookiesPolicy .showTable { display:inline-block;font-size:12px;margin-left:28px;padding:5px 22px 5px 5px;color: #111111;margin-bottom:10px;cursor:pointer;position:relative; } #cookiesPolicy .showTable::before { content: '';background: url('../img/svg/arrow_black_down.svg');background-repeat: no-repeat;width: 10px;height: 6px;position: absolute;top: 11px;right: 5px;fill:#000; } #cookiesPolicy .showTable.active::before{ transform: rotate(180deg); } /* Footer */ #footer{ background-color: #090909; margin-top: 50px; position: relative; } #footer .wrapper{ position: relative; z-index: 99; } #footer .bg_pattern{ position: absolute; top: -60px; z-index: 0; max-height: 100%;width:100%;height:100%; } #footer .bg_pattern.left{ left: 0px;background: url('../img/svg/footer_pattern_left.svg'); background-repeat: no-repeat; background-position: left 50px; } #footer .bg_pattern.right{ right: 0px;background: url('../img/svg/footer_pattern_right.svg'); background-repeat: no-repeat; background-position: right 50px; } #footer .bg_pattern img{ width: auto; height: auto; } #footer .info_section{ justify-content: space-between; align-items: flex-start; padding-bottom: 70px; padding-top: 70px; border-bottom: 1px solid #ffffff0f; } #footer .info_section .col{ display: flex; flex-direction: column; gap: 8px; } #footer .info_section .col.requisites{ gap:5px; } #footer .info_section .col .title{ color: #81B225; font-size: 20px; margin-bottom: 10px; } #footer .info_section .col a{ color: #fff; font-size: 14px; text-decoration: underline; } #footer .info_section .col a:hover{ text-decoration: none; color: #81B225; } #footer .info_section .col .text{ color: #fff; font-size: 12px; } /* Contacts */ #footer .info_section .col .contacts{ margin-top: 30px; margin-bottom: 20px; } .contact_row{ display: flex; align-items: center; margin-bottom: 10px; color: #fff; } .contact_row span{ display: inline-block; width: 32px; height: 32px; border: 1px solid #81B225; border-radius: 32px; margin-right: 10px; } .contact_row:hover{ text-decoration: none; } .contact_row.phone span{ background: url('../img/svg/phone.svg'); background-repeat: no-repeat; background-position: center; } .contact_row.email span{ background: url('../img/svg/email.svg'); background-repeat: no-repeat; background-position: center; } #riga-map #map .mapInfo { display:inline-block;width:395px; height:110px;background: url('../img/map_bg.png') no-repeat; } #riga-map #map .mapInfo .serviceInfo { display:inline-block;width:300px;height:55px;margin-left:50px;margin-top:30px;color:#fff; } #riga-map #map .mapInfo .serviceInfo > div { display:inline-block;width:100%;height:22px; } #riga-map #map .mapInfo .serviceInfo .head { height:22px;margin-bottom:6px;font-size:16px; } #riga-map #map .mapInfo .serviceInfo .head .name { font-weight:bold;display:inline-block; } #riga-map #map .mapInfo .serviceInfo .head .hours { display:inline-block;color:#89be26;float:right;font-weight:bold; } #riga-map #map .mapInfo .serviceInfo .head .hours .today { color:#8c8c8c;margin-right:10px;font-size:13px;font-weight:normal; } #riga-map #map .mapInfo .serviceInfo .head .hours .min { vertical-align: super;font-size:11px; } #riga-map #map .mapInfo .serviceInfo .foot a, #riga-map #map .mapInfo .serviceInfo .foot a:hover { color:#fff;text-decoration:none; } #riga-map #map .mapInfo .serviceInfo .foot a:last-child { border-left:1px solid #89be26;margin-left:10px;padding-left:10px; } #riga-map #map .gm-style-iw { width: 395px !important; height: 110px !important;top: 0 !important; left: 0 !important; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: unset !important; color: unset !important; box-shadow: unset !important; position: relative; top: 38px; height: 0px; left: 50px; } .leaflet-popup-close-button { display:none; } /* Socials */ #footer .socials{ display: flex; flex-direction: row; gap: 10px; } #footer .socials .icon-facebook{ width: 32px; height: 33px; background: url(../img/svg/icon-facebook.svg); } #footer .socials .icon-whatsapp{ width: 32px; height: 33px; background: url(../img/svg/icon-whatsapp.svg); } #footer .socials .icon-instagram{ width: 32px; height: 33px; background: url(../img/svg/icon-instagram.svg); } #footer .socials a:hover{ opacity: 0.7; } /* Bottom icons */ #footer .bottom_icons{ justify-content: space-between; position: relative; margin-top: 70px; } #footer .bottom_icons .portals { display: flex; flex-direction: row; gap: 10px; } #footer .bottom_icons .portals a{ display: inline-block; width: 88px; height: 29px; } #footer .bottom_icons .portals a.salidzini{ background: url('../img/salidzini_logo.png'); } #footer .bottom_icons .portals a.altenzo{ background: url('../img/altenzo_logo.png'); } #footer .bottom_icons .portals a.gudriem{ background: url('../img/gudriem_logo.png'); } #footer .bottom_icons .portals a.kurpirkt{ background: url('../img/kurpirkt_logo.png'); } #footer .bottom_icons .logo{ display: inline-block; width: 95px; height: 52px; background: url('../img/svg/logo.svg'); background-size: 95px 52px; position: absolute; left: 0; right: 0; margin: 0 auto; } #footer .bottom_icons .logo img { width: 95px; height: 52px; } #footer .bottom_icons .payments { display: flex; flex-direction: row; gap: 30px; align-items: center; } #footer .bottom_icons .payments svg{ width: 100px; height: 28px; width: 180px; height: 28px; stroke: unset; fill: unset; } #footer .copyright{ text-align: center; font-size: 11px; color: #B8B8B8; padding-top: 70px; padding-bottom: 60px; } #footer .green-line{ width: 230px; height: 3px; background: #81B225; margin: 0 auto; } /* Product search */ .product_search{ background: #000; padding: 30px 0; max-width: 100%; } .product_search.auto_search{ position: relative; width: 100vw; left: calc((100vw - 100%) / 2 * (-1)); max-width: unset; } .product_search.auto_search > div{ width: 1180px; margin: 0 auto; max-width: calc(100% - 40px); } .product_search .row{ justify-content: space-between; } .product_search .row.additional_fields { justify-content: flex-start; } .product_search .select_block{ width: 160px; } .product_search .checkbox_block{ margin-left: 20px; } .product_search .button{ font-weight: 600; border-radius: 4px; text-transform: uppercase; height: 60px; padding: 10px 30px; } .product_search .search_by_id{ color: #E3E3E3; width: 80px; } .search_by_id.error{ border-color: #F00; } .product_search .link_auto { color: #E3E3E3; } .product_search .link_auto span{ background: url('../img/svg/car.svg'); } .search_buttons { padding-bottom: 15px; } .search_buttons a{ text-transform: uppercase; font-size: 16px; color: #fff; text-decoration: none; padding: 10px; font-weight: 600; padding-bottom: 13px; } .search_buttons a.active{ color: #81B225; border-bottom: 2px solid #81B225; } .search_buttons a:hover{ color: #81B225; cursor: pointer; } .item_top_section{ display: flex; flex-direction: row; padding-top: 30px; width: 100%; } .item_top_section .left, .item_top_section .right{ width: 50%; } .breadcrumb{ display: flex; flex-direction: row; gap: 10px; align-items: center; } .breadcrumb li a{ color: #757575; font-size: 11px; text-decoration: none; } .breadcrumb li.arrow{ display: inline-block; width: 5px; height: 7px; background: url('../img/svg/arrow_page_right.svg'); background-size: 5px 7px; position: relative; top: 2px; } .item_top_section .left .description{ color: #B8B8B8; font-size: 14px; } .item_top_section .right{ text-align: right; } .item_top_section .right .row{ align-items: flex-start; justify-content: end; gap: 15px; } .item_top_section .right .description{ color: #B8B8B8; font-size: 14px; width: 360px; font-size: 13px; } .item_top_section .right .icon-human{ width: 88px; height: 113px; background: url('../img/svg/human.svg'); } .item_top_section .right .select_block{ width: 200px; } .active_search_filters{ background: #757575; width: 100%; padding: 10px 0; font-size: 16px; color: #111; z-index: 99999; position: relative; } .active_search_filters.fixed_row{ position: fixed; top: 0px; z-index: 999; } .active_search_filters .wrapper{ display: flex; justify-content: center; gap: 10px; align-items: center; flex-wrap: wrap; max-width: calc(100% - 40px); } .active_search_filters ul{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px; justify-content: center; } .active_search_filters ul li{ background-color: #000; padding: 4px 6px; color: #fff; border-radius: 3px; } .active_search_filters ul li.green{ font-size: 18px; color: #81B225; font-weight: 600; margin-right: 5px; } .active_search_filters ul li .remove{ display: inline-block; width: 10px; height: 10px; background: url('../img/svg/cross_gray.svg'); margin-left: 8px; } .active_search_filters ul li .remove:hover{ cursor: pointer; } .active_search_filters a{ color: #111; text-decoration: underline; } .active_search_filters a:hover{ text-decoration: none; } /* Pagination */ .pagination{ margin-top: 10px; } .pagination ul{ display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 5px; flex-wrap: wrap; } .pagination ul li{ color: #B8B8B8; text-align: center; border: 1px solid #757575; border-radius: 4px; font-size: 13px; width: auto; background: transparent; height: 30px; line-height: 30px; } .pagination ul li:hover{ color: #fff; border-color: #fff; } .pagination ul li:hover a{ color: #fff; border-color: #fff; } .pagination ul li.three_dots{ border: none; line-height: 17px; font-size: 24px; letter-spacing: 1px; color: #B8B8B8 !important; } .pagination ul li.three_dots:hover{ cursor: default; } .pagination ul li span{ display: inline-block; width: 8px; height: 12px; margin: 0 7px; position: relative; } .pagination ul li.disabled{ padding-right: 10px; padding-left: 10px; opacity: 0.3; cursor: default; color: #B8B8B8 !important; border-color: #B8B8B8 !important; } .pagination ul li.first_page span, .pagination ul li.last_page span{ background: url('../img/svg/arrow_page_left_double.svg'); } .pagination ul li.last_page span{ transform: rotate(180deg); top: 3px; } .pagination ul li.first_page span:first-child, .pagination ul li.last_page span:first-child{ position: relative; left: 2px; } .pagination ul li.first_page span:last-child, .pagination ul li.last_page span:last-child{ margin: 0; position: relative; left: -8px; } .pagination ul li.prev_page span, .pagination ul li.next_page span{ background: url('../img/svg/arrow_page_left.svg'); } .pagination ul li.next_page span{ transform: rotate(180deg); top: 3px; } .pagination ul li a{ color: #B8B8B8; padding: 0 10px; text-decoration: none; height: 100%; display: block; } .pagination ul li.active{ background: #81B225; border-color: #81B225; } .pagination ul li.active a{ color: #fff; } /* Product list bottom */ .product_text_section{ gap: 80px; align-items: flex-start; } .product_text_section .left, .product_text_section .right{ width: 50%; } .product_text_section .left .text{ color: #E3E3E3; font-size: 14px; } .product_text_section .links{ display: flex; flex-direction: row; gap: 10px; } .product_text_section .links .col{ display: flex; flex-direction: column; gap: 15px; } .product_text_section .links .col a{ font-size: 13px; color: #fff; text-transform: uppercase; text-decoration: none; border: 1px solid #000000; border-radius: 4px; padding: 7px 6px; } .product_text_section .links .col a:hover{ color: #81B225; } /* Product open */ .product_open{ gap: 40px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-top: 40px } .product_open .big_image{ width: 570px; position: relative; max-width: 100%; } .product_open .big_image img{ width: 100%;; height: auto; } .product_open .big_image .statuses{ top: 0px; } .product_open .small_images{ width: 570px; margin-left: 0 !important; max-width: 100%; } .product_open .small_images .item{ width: 120px; height: 120px; } .product_open .small_images .item:not(.active_img){ opacity: 0.4; } .product_open .small_images .item:hover{ cursor: pointer; opacity: 1; } .product_open .small_images .owl-item{ width: 120px !important; height: 120px; margin: 1px 1px 0px 0px; } .product_open .small_images .owl-dots{ position: absolute; bottom: -20px; left: 0px; display: flex; flex-direction: row; gap: 5px; flex-wrap: wrap; } .product_open .small_images .owl-dots .owl-dot{ display: inline-block; width: 18px; height: 2px; background: #fff; opacity: 0.2; } .product_open .small_images .owl-dots .owl-dot.active{ background: #81B225; opacity: 1; } .product_open .info_block{ display: inline-block; width: calc(100% - 660px); } .product_open .title_green{ color: #81B225; font-size: 32px; font-weight: 600; } .product_open .product_properties{ display: flex; flex-direction: row; gap: 20px; } .product_open .product_properties .property .label{ display: inline-block; margin-right: 10px; color: #B8B8B8; font-size: 14px; } .product_open .product_properties .property .tag{ display: inline-block; color: #000; background-color: #B8B8B8; padding: 4px 8px; font-size: 10px; font-weight: 600; text-transform: uppercase; } .product_open .product_properties .property .tag.green{ background-color: #81B225; } .product_open .info_block .level_icons{ color: #E3E3E3; } .product_open .info_block .level_icons .level_fuel{ background: url('../img/svg/eu_fuel_gray.svg'); background-repeat: no-repeat; background-size: 12px 12px; background-position: left center; } .product_open .info_block .level_icons .level_traction{background: url('../img/svg/eu_rain_gray.svg'); background-repeat: no-repeat; background-size: 13px 12px; background-position: left center; } .product_open .info_block .level_icons .level_sound{ background: url('../img/svg/eu_sound_gray.svg'); background-repeat: no-repeat; background-size: 14px 12px; background-position: left center; } .product_open .description{ color: #E3E3E3; font-size: 16px; line-height: 1.5; } .product_open .description a{ color: #B8B8B8; position: relative; font-size: 14px;border-bottom: 1px solid #B8B8B8;text-decoration:none; padding-bottom: 2px; } .product_open .description a:hover{ border-bottom:none;padding-bottom:3px; } .product_open .price{ margin-bottom: 10px; } .product_open .info_block .price .active_price{ font-size: 32px; display: inline-block; } .product_open .info_block .price .old_price{ display: inline-block; margin-left: 10px; font-size: 15px; } .product_open .info_block .used_tyre_left{ color: #B8B8B8; font-size: 14px; position: relative; top: 13px; } .product_open .info_block .used_tyre_left span{ font-weight: 600; color: #E3E3E3; } .product_open .counter_block{ padding: 5px; padding-right: 20px; padding-left: 10px; display: inline-block; position: relative; color: #757575; border: 1px solid #757575; border-radius: 4px; } .product_open .counter_block .label{ font-size: 12px; } .product_open .counter_block input{ background: transparent; color: #81B225; font-size: 18px; outline: none; border: none; width: 90px; } .product_open .counter_block .icon-up{ display: inline-block; background: url('../img/svg/arrow_count_up.svg'); width: 14px; height: 12px; position: absolute; top: 10px; right: 14px; cursor: pointer; } .product_open .counter_block .icon-down{ display: inline-block; background: url('../img/svg/arrow_count_down.svg'); width: 14px; height: 12px; position: absolute; bottom: 11px; right: 14px; cursor: pointer; } .product_open .complect_block{ color: #E3E3E3; font-size: 14px; width: 100%; flex-wrap: wrap; } .product_open .complect_block .size{ font-weight: 600; } .product_open .complect_block .orange{ font-weight: 600; color: #FF4E00; } .product_open .cart-btn-dark{ background: #000; padding: 10px 18px; font-size: 14px; text-transform: uppercase; color: #81B225; outline: none; border: none; font-weight: 600; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5); border-radius: 4px; border: 1px solid #81B225; border-radius: 4px; } .product_open .cart-btn-dark span{ display: inline-block; background: url('../img/svg/cart_green.svg'); width: 13px; height: 14px; background-size: 13px 14px; margin-right: 10px; position: relative; top: 1px; } .product_open .cart-btn-dark:hover{ cursor: pointer; opacity: 0.8; } .product_open .question_call{ font-size: 14px; color: #E3E3E3; } .product_open .question_call span{ display: inline-block; width: 32px; height: 32px; background: url('../img/svg/phone.svg'); background-repeat: no-repeat; background-position: center; } .product_open .question_call .text{ display: inline-block; position: relative; top: -11px; } .product_open .question_call a{ color: #E3E3E3; text-decoration: underline; } .product_open .question_call a:hover{ text-decoration: none; } .product_open .cart-btn{ background: #81B225; padding: 15px 34px; padding-top: 10px; font-size: 17px; text-transform: uppercase; outline: none; border: none; color: #000; font-weight: 600; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5); border-radius: 4px; width: calc(100% - 188px); } .product_open .cart-btn span:not(.txt_sp){ display: inline-block; background: url('../img/svg/cart_black.svg'); width: 25px; height: 24px; margin-right: 5px; position: relative; top: 4px; } .product_open .cart-btn.added{ background: #fff; color:#000; } .product_open .cart-btn.added span:not(.txt_sp):after{content: ""; display: inline-block; background: url('../img/svg/cart_success.svg'); width: 14px; height: 14px; position: absolute; top: -3px; right: -5px; background-size: 14px; } .product_open .cart-btn:hover{ cursor: pointer; opacity: 0.9; } .product_open .info_block .compare_btn{ width: 52px; height: 52px; color: #fff; } .product_open .storage_list .storage{ display: block; font-size: 14px; margin-bottom: 15px; } .product_open .storage_list .storage .name{ display: inline-block; color: #fff; width: 115px; } .product_open .storage_list .storage .quantity{ display: inline-block; font-weight: 600; width: 70px; color: #fff; } .product_open .storage_list .storage .quantity.wider{ width: auto; } .product_open .storage_list .storage .quantity.green{ color: #81B225; } .product_open .storage_list .storage .quantity.orange{ color: #FF4E00; } .product_open .storage_list .storage .address{ display: inline-block; text-align: right; width: 224px; color: #B8B8B8; } .product_open .storage_list .storage .address a{ color: #B8B8B8; background: url('../img/svg/pin_gray.svg'); background-repeat: no-repeat; background-position: left center; padding-left: 14px; text-decoration: underline; } .product_open .storage_list .storage .phone{ display: inline-block; width: 100px; color: #B8B8B8; text-align: right; } .product_open .storage_list .storage .phone a{ color: #B8B8B8; background: url('../img/svg/phone_gray.svg'); background-repeat: no-repeat; background-position: left center; padding-left: 18px; text-decoration: underline; } .item_promotions{ display: flex; flex-direction: row; justify-content: space-around; } .product_open .storage_list .storage a:hover{ text-decoration: none; } .item_promotions .promotion{ color: #fff; font-size: 16px; font-weight: 600; text-align: center; width: 95px; } .item_promotions .promotion span{ display: block; width: 32px; height: 32px; margin: 0 auto; margin-bottom: 5px; } .item_promotions .promotion.fast_delivery span{ background: url('../img/svg/benefit_delivery.svg'); width: 48px; height: 27px; background-size: 48px; background-position: 0px -20px; } .item_promotions .promotion.free_montage span{ background: url('../img/svg/benefit_setup.svg'); background-size: 32px; } .item_promotions .promotion.manufacturer_warranty span{ background: url('../img/svg/benefit_guarantee.svg'); } .product_open .details{ display: block; width: 100%; } .product_open .details .buttons{ display: flex; flex-direction: row; } .product_open .details .buttons li{ color: #fff; font-size: 16px; text-transform: uppercase; padding: 12px; } .product_open .details .buttons li:hover{ color: #81B225; cursor: pointer; } .product_open .details .buttons li.active{ color: #81B225; border-bottom: 2px solid #81B225; } .product_open .details .block{ background: #000; padding: 30px; } .product_open .details .block.tyre_designations{ display: flex; flex-wrap: wrap; } .product_open .details .title{ color: #81B225; font-size: 18px; margin-bottom: 20px; width: 100%; } .product_open .details .block ul{ color: #fff; width: 400px; max-width: 100%; } .product_open .details .block ul li{ border-bottom: 1px solid #ffffff69; padding: 7px 0px; display: flex; } .product_open .details .block ul li .label{ display: inline-block; width: 200px; } .product_open .details .block ul li .content{ color: #E3E3E3; font-weight: 600; width: calc(100% - 200px); } .product_open .details .block .text_block{ display: inline-block; width: 50%; } .product_open .details .block .subtitle{ color: #E3E3E3; font-size: 16px; font-weight: 600; margin-bottom: 3px; } .product_open .details .block .subtitle span{ color: #81B225; } .product_open .details .block p{ color: #fff; font-size: 13px; } .product_open .details .block .text_block p{ margin-bottom: 20px; line-height: 1.5; } .swipe_arrow{ position: absolute; top: calc(50% - 18px); width: 30px; height: 32px; } .swipe_arrow.left{ right: 8px; transform: rotate(90deg); } .swipe_arrow.right{ left: 8px; transform: rotate(-90deg); } /* EU tyre label */ .eu_label{ background-image: url('../img/eu_label/background.png'); width: 250px; height: 366px; position: relative; color:#000; border: 1px solid #000; display: inline-block; margin-left: 40px; } .eu_label .manufacturer, .eu_label .size, .eu_label .marker, .eu_label .sound_db, .eu_label .sound_level{ position: absolute; } .eu_label .manufacturer{ top: 50px; font-weight: 600; left: 9px; font-size: 14px; } .eu_label .size{ top: 73px; left: 9px; font-size: 12px; } .eu_label .marker{ width: 28px; height: 32px; background: url('../img/eu_label/marker.png') no-repeat; color: #fff; font-size: 20px; font-weight: bold; display: inline-block; text-align: right; line-height: 32px; padding-right: 4px; } .eu_label .marker.level_fuel{left:85px;} .eu_label .marker.level_traction{right: 10px;} .eu_label .marker.letter-A{bottom: 189px;} .eu_label .marker.letter-B{bottom: 162px;} .eu_label .marker.letter-C{bottom: 135px;} .eu_label .marker.letter-D{bottom: 109px;} .eu_label .marker.letter-E{bottom: 82px;} .eu_label .sound_db{ bottom: 36px; left: 103px; font-size: 10px; width: 34px; text-align: right; } .eu_label .sound_db .number{ font-size: 14px; font-weight: 600; margin-right: 2px; } .eu_label .sound_level{ bottom: 2px; left: 116px; font-size: 11px; } .eu_label .sound_level .letter{ margin-right: 1px; } .eu_label .sound_level .letter.bold{ font-weight: 600; font-size: 16px; } /* Usefull tips */ .useful_tips{ flex-direction: row; flex-wrap: wrap; gap: 20px; justify-content: space-between; max-width: 100%; } .useful_tips .useful{ width: calc(50% - 40px); display: flex; } .useful_tips .useful img{ width: 235px; height: 185px; margin-right: 10px; } .useful_tips .useful .info{ color: #fff; } .useful_tips .useful .info .title{ font-weight: 600; font-size: 20px; } .useful_tips .useful .info .text{ font-size: 16px; line-height: 1.4; } .useful_tips .useful .info a{ font-size: 16px; text-decoration: underline; color: #fff; } .useful_tips .useful .info a:hover{ text-decoration: none; } /* Tyre brands */ .tyre_brand_list{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 32px; margin-top: 30px; } .tyre_brand_list li{ width: 170px; } .tyre_brand_list li .img_block{ position: relative; background: #fff; height: 132px; border-radius: 4px; } .tyre_brand_list li .img_block img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 20px); } .tyre_brand_list li .name{ text-align: center; color: #fff; font-size: 16px; margin-top: 5px; } .tyre_brand_info{ display: block; } .tyre_brand_info .img_block{ position: relative; background: #fff; width: 150px; height: 150px; float: left; margin-right: 30px; top: 3px; } .tyre_brand_info .img_block img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 20px); } .tyre_brand_info .text{ font-size: 14px; color: #E3E3E3; line-height: 1.4; display: inline-block; width: calc(100% - 180px); } /* Tyre calculator */ .tyre_calculator form{ position: relative; } .tyre_calculator .top_row img{ float: left; } .tyre_calculator .right_col{ display: inline-block; width: calc(100% - 370px); position: relative; top: -15px; } .tyre_calculator .current_size{ color: #ffffff; font-size: 13px; font-weight: bold; left: 103px; position: relative; } .tyre_calculator .select-fields li{ display: block; margin: 0px; margin-bottom: 10px; width: 100%; } .tyre_calculator .select-fields li::before{ display: none !important; } .tyre_calculator .select-fields li label{ color: #ffffff; font-weight: bold; display: inline-block; font-size: 13px; line-height: 30px; width: 90px; } .tyre_calculator .select-fields select{ background-color: #111111; background-image: url('../img/svg/arrow_white_down.svg'); background-repeat: no-repeat; outline: none; width: 100px; color: #81B225; height: 100%; appearance: none; background-position: right 10px center; padding-left: 10px; font-size: 18px; padding: 10px; padding-right: 30px; border-radius: 4px; border: 1px solid #757575; } .tyre_calculator .tyre_search_tabs{ width: 100%; margin-top: 30px; } .tyre_calculator .tyre_search_tabs th{ text-transform: uppercase; font-size: 16px; color: #fff; text-decoration: none; padding: 10px; font-weight: 600; padding-bottom: 13px; } .tyre_calculator .tyre_search_tabs th.active{ color: #81B225; border-bottom: 2px solid #81B225; } .tyre_calculator .tyre_search_tabs th:hover{ cursor: pointer; color: #81B225; } .tyre_calculator .tyre_search_tabs select{ border: 1px solid #757575; padding-top: 20px; } .tyre_calculator .tyre_search_tabs .tabContent { margin-top: 10px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .tyre_calculator .tyre_search_tabs .button_div{ width: 100%; text-align: center; } .tyre_calculator .tyre_search_tabs .select_block label{ top: 5px; } .tyre_calculator .tyre_calc_results{ width: 100%; margin-top: 20px; } .tyre_calculator .tyre_calc_results th, .tyre_calculator .tyre_calc_results td{ text-align: center; border: 1px solid #757575; } .tyre_calculator .tyre_calc_results th{ font-weight: 600; color: #81B225; } /* Cart */ #cartTable{ margin-top: 30px; width: 100%; } #cartTable thead{ color: #757575; font-size: 11px; } #cartTable th, #cartTable td{ padding: 20px; vertical-align: middle; } #cartTable tbody{ background: #000; color: #E3E3E3; font-size: 16px; } #cartTable tbody tr{ border-bottom: 1px solid #ffffff17; } #cartTable .name_block{ display: flex; flex-direction: row; gap: 10px; align-items: center; } #cartTable .item_name .name a:not(.pair_url){ color: #fff; } #cartTable .item_name .name a.pair_url{ font-weight: 600; } #cartTable .item_name .name .pair_text.text{ font-size: 14px; margin-top:5px; } #cartTable .item_name .name .pair_text.text .size{ font-weight: 600; } #cartTable .total{ font-weight: 600; } #cartTable .counter_block{ padding: 8px; padding-right: 20px; padding-left: 10px; display: inline-block; position: relative; color: #757575; border: 1px solid #757575; border-radius: 4px; } #cartTable .counter_block .item_qty{ background: transparent; color: #81B225; font-size: 18px; outline: none; border: none; width: 40px; } #cartTable .counter_block .icon-up{ display: inline-block; background: url('../img/svg/arrow_count_up.svg'); width: 14px; height: 12px; position: absolute; top: 6px; right: 14px; cursor: pointer; } #cartTable .counter_block .icon-down{ display: inline-block; background: url('../img/svg/arrow_count_down.svg'); width: 14px; height: 12px; position: absolute; bottom: 6px; right: 14px; cursor: pointer; } .remove_btn{ display: inline-block; width: 40px; height: 40px; background-color: #757575; border-radius: 20px; background-image: url('../img/svg/cross_black.svg'); background-size: 10px 9px; background-position: center; background-repeat: no-repeat; } .remove_btn:hover{ cursor: pointer; opacity: 0.8; } #cartTable tfoot{ color: #757575; background: #000; } #cartTable tfoot .disclaimer{ font-size: 11px; vertical-align: top; } #cartTable tfoot .orange{ color: #FF4E00; } #cartTable tfoot .cart_total{ font-weight: 600; font-size: 26px; } .cart_total_bottom{ display: inline-block; color: #FF4E00; margin-left: 20px; } .cart_total_bottom .cart_total{ display: inline-block; font-weight: 600; font-size: 26px; margin-left: 10px; position: relative; top: 3px; } /* Delivery radio buttons */ .cart_delivery{ gap: 20px; flex-wrap: wrap; } .sqare_radio{ display: inline-block; width: 180px; height: 120px; position: relative; } .sqare_radio:hover{ cursor: pointer; } .sqare_radio .border{ position: absolute;; width: 100%; height: 100%; border: 1px dashed #757575; } .sqare_radio input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .sqare_radio .checkmark { position: absolute; top: 5px; left: 5px; height: 23px; width: 23px; background-color: #eee; border-radius: 20px; border: 2px solid #eee; } .sqare_radio .checkmark:after { content: ""; position: absolute; display: none; } .sqare_radio input:checked ~ .checkmark:after { display: block; } .sqare_radio .checkmark:after { width: 13px; height: 13px; background-color: #81B225; border-radius: 10px; top: 5px; left: 5px; } .sqare_radio input:checked ~ .border { border: 2px solid #81B225; } .cart_delivery.error .sqare_radio .border{ border: 1px dashed #F00; } .cart_delivery.error .sqare_radio .checkmark{ border: 2px solid #F00; } .sqare_radio .text{ position: absolute; text-align: center; width: 100%; top: 50%; transform: translateY(-50%); } .sqare_radio .text .title{ color: #fff; font-size: 16px; width: calc(100% - 20px); margin: 0 auto; } .sqare_radio input:checked ~ .text .title { color: #81B225; } .sqare_radio .text .address{ color: #B8B8B8; font-size: 11px; margin-top: 4px; } .delivery_fields{ justify-content: space-between; flex-wrap: wrap; } .input_block{ position: relative; width: 185px; height: 46px; border: 1px solid #757575; border-radius: 4px; font-size: 15px; background-color: #000000; } .delivery_fields .input_block{ width: calc(25% - 10px); } .input_block.half{ width: 50%; } .input_block.error{ border-color: #FF0000; } .textarea_block{ width: 100% !important; height: auto !important; } .input_block .red_dot{ display: inline-block; width: 5px; height: 5px; border-radius: 5px; background-color: #FF0000; position: absolute; top: 1px; right: 1px; } .input_block .loader { display: inline-block; position:absolute; top:11px; right:36px; width: 16px; height: 16px; aspect-ratio: 1; border-radius: 50%; border: 4px solid #81B225; animation: spinOne 0.8s infinite linear alternate, spinTwo 1.6s infinite linear; } @keyframes spinOne { 0% {clip-path: polygon(50% 50%,0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0% )} 12.5% {clip-path: polygon(50% 50%,0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0% )} 25% {clip-path: polygon(50% 50%,0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100% )} 50% {clip-path: polygon(50% 50%,0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100% )} 62.5% {clip-path: polygon(50% 50%,100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100% )} 75% {clip-path: polygon(50% 50%,100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100% )} 100% {clip-path: polygon(50% 50%,50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100% )} } @keyframes spinTwo { 0% {transform:scaleY(1) rotate(0deg)} 49.99%{transform:scaleY(1) rotate(135deg)} 50% {transform:scaleY(-1) rotate(0deg)} 100% {transform:scaleY(-1) rotate(-135deg)} } .input_block .error_text{ position: absolute; bottom: -10px; left: 5px; background: #FF0000; color: #fff; font-size: 11px; font-weight: 600; padding: 1px 6px; } .form-control{ width: calc(100% - 20px); background-color: #111; border: none; outline: none; color: #B8B8B8; padding: 15px 10px;border-radius: 4px; resize: vertical; } textarea.form-control{ padding: 10px; min-height: 70px; } select.form-control{ width: 100%; background-image: url('../img/svg/arrow_white_down.svg'); background-repeat: no-repeat; appearance: none; background-position: right 10px center; } .error_message{ display: inline-block; color: #FF0000; border: 1px solid #FF0000; padding: 15px; font-size: 14px; position: relative; padding-left: 40px; border-radius: 4px; } .error_message.cart_error{ width: calc(100% - 55px); margin-top: 20px; } .error_message::before{ content: ''; position: absolute; width: 18px; height: 15px; background: url('../img/svg/error_icon.svg'); top: 15px; left: 15px; } .error_message.full_width{ width: calc(100% - 60px); } .notification_message{ display: inline-block; color: #fff; border: 1px solid #81B225; padding: 15px; font-size: 14px; position: relative; border-radius: 4px; width: calc(100% - 30px); text-align: center; font-weight: 600; } .client_fields{ gap: 10px; flex-wrap: wrap; } .client_fields .input_block{ width: calc(25% - 10px); } .delivery_price_block{ color: #FF4E00;margin-top:20px; } .delivery_price_block .label{ font-size: 20px; margin-right: 10px; } .delivery_price_block .delivery_price{ display: inline-block; font-size: 24px; font-weight: 600; } .radio_buttons{ gap: 20px; } .radio_button{ display: inline-block; position: relative; } .radio_button:hover{ cursor: pointer; } .radio_button input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .radio_button .checkmark { position: absolute; left: 0px; height: 23px; width: 23px; background-color: #eee; border-radius: 20px; border: 2px solid #eee; } .radio_button .checkmark:after { content: ""; position: absolute; display: none; } .radio_button input:checked ~ .checkmark:after { display: block; } .radio_button .checkmark:after { width: 13px; height: 13px; background-color: #81B225; border-radius: 10px; top: 5px; left: 5px; } .radio_button .label { color: #fff; font-size: 16px; padding-left: 35px; } .radio_button input:checked ~ .label { color: #81B225; } .cart_payments{ gap: 10px; justify-content: space-between; } .cart_payments .sqare_radio{ width: 25%; } .cart_payments .logos{ position: absolute; bottom: 10px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; align-items: center; gap: 10px; } .cart_payments .logos.logos_paysera_bank{ bottom: 15px; } .cart_payments .logos .visa{ display: inline-block; width: 44px; height: 16px; background: url('../img/svg/payment_visa.svg'); background-size: 44px 18px; } .cart_payments .logos .mastercard{ display: inline-block; width: 35px; height: 28px; background: url('../img/svg/payments_mastercard.svg'); background-size: 35px 28px; } .cart_payments .logos .apple{ display: inline-block; width: 50px; height: 30px; background: url('../img/svg/apple_pay.svg'); background-size: 50px 50px;background-position: 0 -9px; } .cart_payments .logos .google{ display: inline-block; width: 50px; height: 30px; background: url('../img/svg/google_pay.svg'); background-size: 50px 50px;background-position: 0 -9px; } .cart_payments .logos .swedbank{ display: inline-block; width: 63px; height: 14px; background: url('../img/svg/payment_swed.svg'); } .cart_payments .logos .seb{ display: inline-block; width: 28px; height: 13px; background: url('../img/svg/payment_seb.svg'); } .cart_payments .logos .citadele{ display: inline-block; width: 62px; height: 11px; background: url('../img/svg/payment_citadele.svg'); } .cart_payments .logos .luminor{ display: inline-block; width: 46px; height: 11px; background: url('../img/svg/payment_luminor.svg'); } .seller_info{ font-size: 13px; text-align: right; } .seller_info .right_block{ display: inline-block; width: 290px; text-align: left;} .seller_info .title{ font-size: 16px; color: #B8B8B8; font-weight: 600; margin-bottom: 10px; } .seller_info ul{ display: flex; flex-direction: column; gap: 5px; } .seller_info ul .label{ display: inline-block; width: 120px; color: #E3E3E3; vertical-align: top; } .seller_info ul .data{ display: inline-block; width: calc(100% - 120px); color: #fff; text-align: right; } .rules_checkboxes .btn{ text-transform: uppercase; background-color: #000; color: #B8B8B8; border: 1px solid #B8B8B8; filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.5)); border-radius: 4px; padding: 10px 18px; } .btn_with_arrow_block .arrow{ background-image: url('../img/svg/arrow_checkbox_white.svg'); width: 9px; height: 12px; display: block; position: relative; left: 7px; } .btn_with_arrow_block{ margin-bottom: 10px; } .rules_checkboxes .btn:hover{ cursor: pointer; opacity: 0.8; } .rules_checkboxes .checkbox_block{ margin-bottom: 5px; width: 100%; } .rules_checkboxes .checkbox_block .text{ color: #fff !important; opacity: 1; } .rules_checkboxes .checkbox_block .text a{ color: #81B225; text-decoration: underline; } .rules_checkboxes .checkbox_block .text a:hover{ text-decoration: none; } .rules_checkboxes .checkbox_block .red_dot{ display: inline-block; background: #FF0000; width: 5px; height: 5px; border-radius: 10px; margin-left: 3px; position: relative; top: -3px; } .rules_checkboxes .checkbox_block.error label{ padding-left: 35px;} .rules_checkboxes .checkbox_block.error .checkmark{ border: 2px solid #F00;width:21px;height:21px; } .cart_success, .success_msg{ display: block; width: 480px; margin: 0 auto; text-align: center; margin-top: 80px; max-width: 100%; } .cart_success img, .success_msg img{ width: 88px; height: 88px; margin-bottom: 20px; } .cart_success .title, .success_msg .title{ font-size: 26px; color: #E3E3E3; font-weight: 600; margin-bottom: 10px; } .cart_success .text, .success_msg .text{ font-size: 14px; color: #E3E3E3; line-height: 1.4; } .contact_form .success_msg{ margin: 0px; margin-bottom: 20px; border: 1px solid #81B225; padding: 20px 0; width: 100%; } /* Search by auto */ .letter_choice{ display: flex; flex-direction: row; flex-wrap: wrap; } .letter_choice li{ text-transform: uppercase; font-size: 16px; color: #fff; padding: 10px 15px; width: 10px; } .letter_choice li.active{ color: #81B225; border-bottom: 2px solid #81B225; } .letter_choice li:hover{ cursor: pointer; color: #81B225; } .car_list{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 32px; margin-top: 30px; } .car_make{ width: 170px; min-width: 170px; } .car_make .img_block{ position: relative; background: #fff; height: 132px; border-radius: 4px; } .car_make .img_block img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 20px); } .car_make .name{ text-align: center; color: #fff; font-size: 16px; margin-top: 5px; } .car_models{ display: flex; flex-direction: row; justify-content: space-between; } .car_models ul{ display: flex; flex-direction: column; gap: 10px; } .car_models ul li a{ font-size: 16px; color: #fff; text-decoration: underline; } .car_models ul li a:hover{ text-decoration: none; } .car_models_details{ display: flex; flex-direction: row; gap: 20px; } .car_models_details ul{ display: flex; flex-direction: column; } .car_models_details ul li{ font-size: 16px; color: #fff; border-bottom: 1px solid #FFFFFF36; padding: 7px 0px; } .car_models_details ul li:last-child{ border-bottom: 0; } .car_models_details ul li .label{ display: inline-block; width: 200px; } .car_models_details ul li .content{ display: inline-block; width: 200px; font-weight: 600; color: #E3E3E3; } .discount_top_section .row{ align-items: flex-start; flex-wrap: nowrap; } .discount_top_section .news_carousel{ width: 760px; } .discount_top_section .news_carousel .owl-item{ width: 370px !important; } .discount_top_section .description{ color: #E3E3E3; font-size: 16px; line-height: 1.4; margin-right: 20px; } #auto_product_search{ display: flex; justify-content: space-between; } #auto_product_search .select_block{ min-height: 60px; height: auto; } #auto_product_search .select_block.dark{ height: 60px; } #auto_product_search .wheel_size_params{ color: white; text-align: center; width: calc(50% - 5px); } #auto_product_search .wheel_size_params .list_title{ font-weight: 600; color: #81B225; } #auto_product_search .wheel_size_params .size_block{ display: block; width: 100%; text-align: center; } #auto_product_search .wheel_size_params .size_block.half{ width: 50%; } #auto_product_search .wheel_size_params li { font-size: 14px; width: 32%; border: 1px solid gray; border-radius: 2px; padding: 5px; margin: 3px; display: inline-block; } /* Main */ .main{ display: flex; flex-direction: row; align-items: flex-start; gap: 30px; color: #E3E3E3; } .main .left{ width: calc(100% - 400px); } .main .left .content{ font-size: 16px; line-height: 1.6; } .main .left .content ul li{ padding-left: 10px; } .main .left .content ul li::before { content: "\2022"; color: #81B225; font-weight: bold; display: inline-block; width: 5px; margin-left: 5px; margin-right: 5px; } .main .left .content a{ color: #81B225; text-decoration: underline; } .main .left .content a:hover{ text-decoration: none; } .main .left .content iframe{ width: 100%; } /* .main .left .content div{ max-width: 100%; } */ .main .right{ width: 370px; display: flex; flex-direction: row; gap: 25px; flex-wrap: wrap; justify-content: space-between; font-size: 14px; } .main .right .banner{ display: inline-block; width: 170px; } .main .right .free_section{ flex-direction: column; align-items: baseline; gap: 25px; } .main .right .requisites{ display: flex; flex-direction: column; gap: 5px; } .main .right .contact_row{ color: #E3E3E3; } .main .right .requisites{ color: #E3E3E3; } .main .right .contact_data .text{ margin-bottom: 10px; } .main.big_gap{ gap: 80px; } .main.big_gap .left{ width: calc(100% - 450px); } /* Services */ .service_buttons a{ display: flex; align-items: center; padding-left: 90px; height: 110px; background: #000; position: relative; text-decoration: none; margin-bottom: 10px; border: 1px solid transparent; } .service_buttons a:hover{ border: 1px solid #81B225; } .button_with_arrow{ display: inline-block; width: 40px; height: 40px; background-color: #81B225; border-radius: 20px; background-image: url('../img/svg/arrow_swipe_right.svg'); background-repeat: no-repeat; background-position: center; transition: left 500ms; } .service_buttons a:hover .button_with_arrow{ left: 40px; transition: left 500ms; } .service_buttons .button_with_arrow{ position: absolute; left: 30px; top: 36px; } .service_buttons .text{ position: relative; left: 0px; transition: left 500ms; } .service_buttons a:hover .text{ left: 10px; transition: left 500ms; } .service_buttons .text .title{ display: block; font-size: 22px; font-weight: 600; color: #81B225; } .service_buttons .text .description{ display: block; font-size: 14px; color: #E3E3E3; } .service_buttons img{ display: inline-block; position: absolute; bottom: 0px; right: 0px; max-width: 80px; max-height: 80px; } .service_buttons.small{ display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap; } .service_buttons.small a{ height: 80px; padding-left: 70px; width: calc(50% - 157px); padding-right: 80px; } .service_buttons.small .button_with_arrow{ width: 30px; height: 30px; left: 20px; top: 25px; } .service_buttons.small a:hover .button_with_arrow{ left: 30px; } .service_buttons.small .title{ font-size: 18px; } .service_buttons.small .description{ font-size: 11px; } .service_buttons.small img { max-width: 50px; max-height: 50px; } /* Text section */ .text_with_image{ display: flex; flex-direction: row; gap: 20px; } .text_with_image .left, .text_with_image .right{ width: 50% !important; gap: 0px; } .text_with_image img{ width: 100%; } .gray_text{ color: #B8B8B8; font-size: 11px; } .dark_gray_text{ color: #757575; font-size: 11px; } .gallery{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 1px; } .gallery .half{ width: calc(50% - 1px); } .gallery .third{ width: calc(33.33% - 1px); } .coolTable { width: 500px;border-collapse:collapse;margin:10px auto; max-width: calc(100vw - 40px); color: #fff; } .coolTable td { border:1px solid #666;padding:5px; } .coolTable td.tbTitle { width:498px;text-align:center;font-size:15px;font-weight:bold;padding:8px 5px; } .coolTable .tbSubTitle td, .coolTable td.tbTitle { background-color:#89be26; color:#fff;font-weight:bold; } .coolTable td.tbLeft { width:310px;font-size:12px; } .coolTable td.tbRight { width:169px;font-size:12px;font-weight:bold; } .coolTable td.tbRight1 { width:79px;font-size:12px;font-weight:bold; } .coolTable td.tbRight2 { width:79px;font-size:12px;font-weight:bold; } .appointment_btn{ display: inline-block; border: none; outline: none; font-size: 18px; color: #000 !important; text-transform: uppercase; font-weight: 600; text-decoration: none !important; border-radius: 4px; background: #FF4E00; text-align: center; padding: 23px 34px;margin:0 auto 30px; } .appointment_btn .icon{ margin-right: 10px; width: 14px; height: 16px; background: url('../img/svg/application.svg'); float: left; position: relative; top: 5px; } .content.wysiwyg{ color: #E3E3E3; } .content.wysiwyg p font, .content.wysiwyg span{ color: #E3E3E3 !important; } .content.wysiwyg img { height: auto !important; } .content.wysiwyg ul { list-style:none; } .content.wysiwyg ul > li { padding-left:20px; } .content.wysiwyg ul > li::before { content: '•'; margin-right:10px;color:#81B225;font-weight:bold; } /* FAQ */ .faq{ list-style: none; width: 100%; } .faq li{ border: 1px solid #757575; border-radius: 4px; color: #81B225; position: relative; margin-bottom: 4px; padding-left: 0 !important; } .faq li.active{ background-color: #000000; border: none; } .faq li::before{ content: '' !important; background: url('../img/svg/arrow_white_down.svg'); background-repeat: no-repeat; width: 12px !important; height: 12px; position: absolute; top: 21px; right: 15px; } .faq li.active::before{ transform: rotate(180deg); } .faq li:hover{ cursor: pointer; } .faq .question{ font-size: 16px; font-weight: 600; padding: 15px 20px; padding-right: 30px; } .faq li.active .question{ border-bottom: 1px solid #ffffff38; margin-bottom: 10px; } .faq .answer{ display: none; color: #E3E3E3; padding: 15px 20px; padding-top: 0; } /* News */ .news_list{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 20px; justify-content: space-between; list-style: none !important; } .news_list li{ width: 370px; max-width: calc(50% - 20px); padding-left: 0px !important; } .news_list li::before{ display: none !important; } .news_list a{ text-decoration: none !important; color: #E3E3E3 !important; } .news_list .img_block{ width: 100%; position: relative; } .news_list .img_block img{ width: 100%; height: 250px; object-fit: cover; } .news_list .img_block .tag{ position: absolute; bottom: 0px; left: 0px; background-color: #000000; color: #B8B8B8; font-size: 10px; font-weight: 600; text-transform: uppercase; padding: 4px 8px; } .news_list .description{ width: 100%; margin-top: 10px; } .news_list .description .date{ color: #757575; font-size: 11px; margin-bottom: 3px; } .news_list .description .title{ color: #E3E3E3; font-size: 20px; margin-bottom: 3px; } .news_list .description .info{ color: #E3E3E3; font-size: 16px; } /* Applications */ #application_times {-moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; column-count: 2; column-gap: 20px; text-align: center; } #application_times li { width: 300px; display: inline-block; position: relative; margin-bottom:1px; max-width: 100%; color: #81B225; text-align: left; padding: 5px 0px; border-bottom: 1px solid #FFFFFF2E; } #application_times li:not(.full):hover{ cursor: pointer; } #application_times li:not(.full):hover button { opacity: 0.8; } #application_times li span.time{ font-size: 16px; width: 40px; display: inline-block; height: 28px; line-height: 30px; margin-left: 15px; } #application_times li div.boxes{ display: inline-block; position: absolute; right: 130px; height: 28px; top: 8px; } #application_times li div.boxes span.box{ border: 6px solid #000; display: inline-block; border-radius: 6px; margin: 8px 4px;} #application_times li div.boxes span.box:first-child{ margin-left:0px; } #application_times li div.boxes span.box:last-child{ margin-right:0px; } #application_times li div.boxes span.box{ border-color:#81B225; cursor: pointer; } #application_times li div.boxes span.box.green, ul#application_times li.empty:hover div.boxes span.gray:first-child, ul#application_times li.empty:hover div.boxes span.red + .gray { border-color:#81B225; box-shadow:1px 1px 0px 0px rgba(0, 0, 0, 0.3); } #application_times li span.button, ul#application_times li button.reserve{ float: right; margin-left: 15px; font-size:14px; text-align:center; padding: 7px 0px; text-transform: uppercase; outline: none; background: none; font-weight: 600; border-radius: 4px; width: 115px; } #application_times li span.button{ color: #757575; border: 1px solid #757575; } #application_times li button.reserve{ color:#81B225; border: 1px solid #81B225; } #application_times li button.reserve:hover, ul#application_times li button.reserve.active{ opacity: 0.8; cursor:pointer;} #application_times li.full div.boxes span.box, #application_times li div.boxes span.box.red{ border-color:#FF0000; } #application_times li.full .time{ color: #757575; } #application_times li.your_time{ background: #81B225; border-radius: 1px; } #application_times li.your_time .time{ color: #fff; font-weight: 600; } #application_times li.your_time button{ background: #fff !important; color: #000; } #application_times li.your_time .box:not(.red){ border-color: #fff !important; position: relative; } #application_times li.your_time .box.green:before{ content: '';position: absolute; left: -2px; top: -4px; width: 2px; height: 5px; border: solid #000; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #application_form .row{ gap: 6px; } #application_form .input_block{ width: calc(33% - 4px); } #application_form .input_block.w-50p{ width: calc(50% - 4px); } .ui-datepicker{ background: #000; border-color: #757575; color: #fff; } .ui-datepicker a:hover{ cursor: pointer; } .ui-datepicker .ui-datepicker-header{ color: #000; background: #fff; border: none; border-radius: 4px; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{ border-color: #81B225; background: #000; color: #fff; border-radius: 4px; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus{ color: #fff; background: #81B225; border-color: #81B225; } .ui-widget-header .ui-state-hover{ background: #81B225; border-color: #81B225; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{ background: #757575; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active{ background: #fff; border-color: #fff; color: #000; } /* SVG */ .svgIcon { stroke: #000000; fill: #000000; max-width: 100%; max-height: 100%; } .svgIcon.white { stroke: #ffffff !important; fill: #ffffff !important; } .svgIcon.green { stroke: #81b225 !important; fill: #81b225 !important; } .svgIcon.oragne { stroke: #ff4e00 !important; fill: #ff4e00 !important; } /* Modal */ .modal { display: none; position: fixed; z-index: 200; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(106, 106, 106, 0.7); } .modal .modal-content { background-color: #111111; margin: 15% auto; padding: 10px; border: 1px solid #888; width: 85%; position: relative; border: none; } .modal .modal-content h4{ font-size: 18px; color: #fff; } #priceModal .modal-content{ max-width: 500px; } .modal table{ width: 100%; } .modal .close { color: #fff; float: right; font-size: 18px; font-weight: bold; outline: none; border: none; position: absolute; background-color: #81b225; border-radius: 20px; background-image: url('../img/svg/cross_black.svg'); width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; top: -24px; right: -6px; } .modal .close:hover, .modal .close:focus { opacity: 0.8; cursor: pointer; } .carousel__button.is-close { color: #fff; float: right; font-size: 18px; font-weight: bold; outline: none; border: none; position: absolute; background-color: #81b225; border-radius: 20px; background-image: url('../img/svg/cross_black.svg'); width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; top: -24px; right: -6px; } .carousel__button.is-close svg { display: none; } .carousel__button.is-close :hover, .carousel__button.is-close :focus { opacity: 0.8; cursor: pointer; } .fancybox__content > .carousel__button.is-close { position: absolute; top: -30px; right: 0; color: var(--fancybox-color, #fff); } .modal table{ border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; } .modal table td{ font-size: 14px; color: #fff; padding: 4px 10px; } .modal table .title_row td{ font-size: 14px; color: #81B225; font-weight: 600; background: #000; } /* Contacts */ .contact_services{ display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .contact_services li{ border: 1px solid #757575; border-radius: 4px; position: relative; } .contact_services li:hover{ cursor: pointer; } .contact_services li::before{ content: '' !important; background: url('../img/svg/arrow_white_down.svg'); background-repeat: no-repeat; width: 12px !important; height: 12px; position: absolute; top: 21px; right: 15px; } .contact_services li.active::before{ transform: rotate(180deg); } .contact_services li.active{ background: #000; border-color: #000; } .contact_services li .title{ font-weight: 600; padding: 15px 25px; } .contact_services li .contact_block{ padding: 15px 25px; border-top: 1px solid #ffffff2e; display: flex; flex-direction: column; gap: 10px; } .contact_services li .more_info{ display: none; } .contact_services li.active .more_info{ display: block; } .contact_services li .video_row{ display: flex; flex-direction: row; gap: 20px; flex-wrap: wrap; align-items: center; } .contact_services li .video_row .text{ width: 150px; } .contact_services li .worktime{ display: flex; flex-direction: row; gap: 20px; flex-wrap: wrap; } .contact_services li .worktime .status{ display: inline-block; width: 13px; height: 13px; border-radius: 10px; position: unset; } .contact_services li .worktime .status.green{ background: #81B225; } .contact_services li .worktime .status.gray{ background: #757575; } /* Compare */ .comparison_open { position: relative; overflow: auto; white-space: nowrap; display: flex; flex-direction: row; } .comparison_open ul{ display: inline-block; vertical-align: text-top; width: 150px; height: 100%; font-size: 14px; color:#fff; min-width: 200px; width: 100%; background: #111; min-width: 240px; } .comparison_open ul.title_row{ width: 250px; } .comparison_open ul.empty_row{ width: 5px; min-width: unset; } .comparison_open ul.empty_row .image_row{ padding-left: 0px; padding-right: 0px; } .comparison_open ul.compare_item{ background: #000; } .comparison_open ul.title_row li{ border-left: 1px solid #ffffff2e; } .comparison_open ul.title_row li.button-height{ height: 59px; } .comparison_open ul:first-child { position: sticky; left: 0; z-index: 9999; } .comparison_open ul li{ border-bottom: 1px solid #ffffff2e; padding: 10px 25px; border-right: 0; min-height: 20px; } .comparison_open ul li:last-child{ margin-bottom: 10px; padding-top: 0px; } .comparison_open ul:last-child li{ border-right: 1px solid #ffffff2e; } .comparison_open ul li.image_row{ height: 135px; position: relative; padding: 25px 30px; border: none; border-bottom: 1px solid #ffffff2e; } .comparison_open ul li img{ height: 94px; width: 120px; margin-bottom: 5px; object-fit: fill; } .comparison_open ul li .button{ width: calc(100% - 35px); text-align: center; } .comparison_open ul li .button.add_to_cart_btn{ padding: 15px 18px; } .comparison_open ul li .button.open_product{ padding: 5px 17px; } .comparison_open .close{ display: inline-block; width: 26px; height: 26px; border-radius: 20px; background: #ffffffd6; text-align: center; position: absolute; left: 115px; top: 25px; } .comparison_open .close::before{ content: ''; width: 13px; height: 15px; background: url('../img/svg/trash.svg'); display: inline-block; position: relative; top: 5px; left: 0px; } .comparison_open .close:hover{ cursor: pointer; background: #FF0000; } .comparison_block { position: fixed; bottom: 20px; z-index: 300; left: 0; right: 0; text-align: center; margin: 0 auto; display: inline-table; padding: 15px 25px; background: #000000; padding: 20px; max-width: calc(100vw - 80px); } .comparison_block > .close{ width: 14px; height: 14px; background-image: url('../img/svg/cross_white.svg'); display: inline-block; position: absolute; top: -20px; right: -20px; background-color: #8e8e8e; border-radius: 10px; padding: 3px; background-repeat: no-repeat; background-position: center; } .comparison_block > .close:hover{ cursor: pointer; background-color: #FF0000; } .comparison_block ul{ overflow: auto; margin-bottom: 10px; display: flex; gap: 10px; max-width: calc(100vw - 80px); } .comparison_block li{ display: inline-block; width: 120px; text-align: left; position: relative; min-width: 120px; } .comparison_block li a{ text-decoration: none; } .comparison_block li .name{ color: #fff; font-size: 13px; } .comparison_block li .manufacturer{ color: #757575; font-size: 12px; font-weight: 600; } .comparison_block li img{ width: 120px; height: 120px; } .comparison_block .button{ width: calc(100% - 49px); font-size: 12px; padding: 8px 24px; } .comparison_block li .close{ display: inline-block; width: 26px; height: 26px; border-radius: 20px; background: #ffffffd6; text-align: center; position: absolute; left: 90px; top: 5px; } .comparison_block li .close::before{ content: ''; width: 13px; height: 15px; background: url('../img/svg/trash.svg'); display: inline-block; position: relative; top: 4px; } .comparison_block li .close:hover{ cursor: pointer; background: #FF0000; } /* Sitemap */ .sitemap_list { list-style: disc; margin-left:10px;list-style:none;margin-top:20px; } .sitemap_list ul{ list-style: disc; margin-top: 10px;padding-left: 30px;list-style:none; } .sitemap_list li{ margin-bottom: 15px;position:relative; } .sitemap_list ul li:before { content:' ';position:absolute;top:-3px;left:-25px;width: 14px;height: 14px;border-bottom:1px solid #ffffff2e; border-left: 1px solid #ffffff2e; } .sitemap_list a { color:#fff; text-decoration: underline; } .sitemap_list a:hover { text-decoration: none; } /* Accessory groups */ .accessory_groups{ flex-direction: row; flex-wrap: wrap; gap: 30px; } .accessory_groups .dark_block{ width: 270px; height: 280px; border: 1px solid transparent; } .accessory_groups .dark_block img{ top: 30px; left: 30px; height: 130px; } .accessory_groups .dark_block .title{ position: absolute; bottom: 30px; left: 30px; width: calc(100% - 90px); line-height: 1.1; } .accessory_groups .dark_block .icon_arrow{ width: 40px; height: 40px; transition: width 500ms, height 500ms; } .accessory_groups .dark_block:hover{ border: 1px solid #81B225; cursor: pointer; } .accessory_groups .dark_block:hover .icon_arrow{ width: 50px; height: 50px; transition: width 500ms, height 500ms; } /* Link columns */ .linkCol { display:flex;flex-direction: row; flex-wrap: wrap;margin:20px 0; } .linkCol li { padding:5px 0; width: calc(100% / 3); } /* Name day */ .name_day_calendar{ text-align: center; } .name_day_calendar h3{ font-weight: 600; font-size: 18px; background: #5b5b5b; color: #fff; } .name_day_calendar h3 .month_title{ padding: 8px 0px; display: inline-block; } .name_day_calendar h3 a{ text-align: center; font-size: 22px; color: #fff; height: 40px; width: 34px; line-height: 34px; background: url('../img/svg/arrow_white_down.svg'); background-repeat: no-repeat; background-color: #6c6c6c; } .name_day_calendar h3 a.nextMonth{ float: right; background-size: 10px 14px; background-position: center; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg);} .name_day_calendar h3 a.prevMonth{ float: left; background-size: 10px 14px; background-position: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .name_day_calendar table{ margin: 20px auto 0; } .name_day_calendar .weekend, .name_day_calendar .holiday { color: #959393; } .name_day_calendar .weekend .day_nr, .name_day_calendar .holiday .day_nr{ color: #f52b2b; } .name_day_calendar thead tr{ border-bottom: 1px solid #1a1a1a; } .name_day_calendar thead th{ color: #fff; text-align: center; width: 100px; font-size: 13px; font-weight: 600; padding: 4px 0; } .name_day_calendar tbody td{ min-height: 90px; border: 1px solid #cecece; padding: 5px 0; text-align: center; } .name_day_calendar tbody .names{ color: #fff; display: block; min-height: 50px; word-wrap: break-word; font-size: 11px; padding: 5px; line-height: 18px; } .name_day_calendar tbody td.today{ border: 2px solid #87bf26; } .name_day_calendar tbody .day_nr{ color: #fff; font-weight: 600; } .name_day_special{ text-align: center; color: #fff; width: 700px; margin: 10px auto; display: block; max-width: 100%; } .name_day_today{ display: inline-block; margin-right: 5px; vertical-align: top; } .name_day_today .today_title{ text-align: center; font-weight: bold; } .name_day_today{ font-weight: bold; font-size: 17px; } .name_day_today .your_name, .name_day_today .get_discount { font-size: 14px; font-weight:normal;color:#959393;display:block; } .name_day_today .your_name { margin-bottom:10px; } .name_day_today .get_discount { margin:10px 0; } .name_day_today .name_day_text{ text-align: center; margin: 5px 0; } #other_words{ display: block; font-size: 13px; line-height: 15px; margin-top: 4px; } .name_day_discount{ display: inline-block; width: 100%; text-align: center; position: relative; font-weight: bold; background-color: #87bf26; color:#000; padding:8px 0; font-size: 14px; line-height:14px; margin-bottom: 10px; } .name_day_discount span.discount_amount{ font-size: 28px;line-height:28px; float:left;margin:0 5px 0 8px; } .name_day_disclaimer { padding: 15px; font-size: 11px; padding-top: 0; line-height: 14px; color: #fff; } .special_date_info{ padding: 10px 0px 10px 20px; display: inline-block; width: 50%; float: left; max-width: calc(100% - 290px); } .special_date_info li{ font-size: 13px;line-height:22px; color: #fff; } .special_date_info li .date{ font-size: 13px; color: #f52b2b; } /* Bottom banner */ .bottom_banner{ position: fixed; bottom: 0; z-index: 200; background: #000; width: 100%; height: 80px; } .bottom_banner #slidingBottom{ display: flex; color: #fff; height: 80px; text-align: left; position: absolute; width: 300%; } .bottom_banner #slidingBottom .banner{ display: inline-block; padding-right: 25px; width: 1055px; height: 80px; position: relative; } .bottom_banner #slidingBottom .banner.size_2{ padding-right: 25px; width: 515px; } .bottom_banner .title{ display: inline-block; font-weight: 600; font-size: 16px; height: 80px; width: calc(100% - 170px); text-align: center; } .bottom_banner .title span{ display: inline-block; position: relative; top: 50%; transform: translateY(-50%); } .bottom_banner .close_banner{ width: 22px; height: 20px; position: absolute; right: 10px; top: -4px; background-size: 20px; z-index: 9999; cursor: pointer; } .bottom_banner .close_banner svg{ fill: #F00; stroke: #F00;filter: drop-shadow(2px 1px 1px rgb(255 255 255)); } .bottom_banner .button{ display: inline-block; vertical-align: top; background-color: #de0710; padding: 8px 15px; font-weight: 600; margin-top: 26px; max-width: 150px; } /* Gallery */ .gallery_list{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 20px; justify-content: space-between; list-style: none !important; } .gallery_list li{ width: 370px; max-width: calc(50% - 20px); padding-left: 0px !important; } /* .gallery_list li::before{ display: none !important; } */ .gallery_list li:hover{ cursor: pointer; } .gallery_list a{ text-decoration: none !important; color: #E3E3E3 !important; } .gallery_list .img_block{ width: 100%; position: relative; } .gallery_list .img_block img{ width: 100%; height: auto; } .gallery_list .img_block .storage_name{ position: absolute; bottom: 0px; left: 0px; background-color: #000000; color: #B8B8B8; font-size: 10px; font-weight: 600; text-transform: uppercase; padding: 4px 8px; } .gallery_list .img_block .play_btn{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background-color: #81B225; } .gallery_list .img_block .play_btn span{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 19px; background: url('../img/svg/play.svg'); } .gallery_list .description{ display: block; color: #E3E3E3; font-size: 20px; } .gallery_list .intro{ color: #757575; font-size: 14px; margin-top: 10px; } .gallery_image_list{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 20px; list-style: none !important; } .gallery_image_list li{ width: 250px; height: 170px; max-width: calc(50% - 20px); padding-left: 0px !important; position: relative; overflow: hidden; } .gallery_image_list li img { width: 100%; height: auto; display: inline-block; position: absolute; top: -100%; left: 0; right: 0; bottom: -100%; margin: auto; } .galleries .gallery_title{ font-size: 26px; color: #E3E3E3; } .galleries .gallery_description{ font-size: 18px; color: #E3E3E3; } .galleries .open_gallery_intro{ font-size: 16px; color: #E3E3E3; } /* SEO section */ .main.seo_section{ margin-top: 60px; } .main.seo_section .left{ width: 270px; } .main.seo_section .left .section_list{ width: 100%; } .main.seo_section .left .section_list li a{ text-transform: uppercase; padding: 15px; padding-right: 40px; background-image: url('../img/svg/arrow_white_down.svg'); background-repeat: no-repeat; background-position: right 15px center; display: block; color: #fff; font-size: 14px; font-weight: 600; border-bottom: 1px solid #ffffff2e; } /* transform: rotate(-90deg); */ .main.seo_section .left .section_list li.active, .main.seo_section .left .section_list li:hover{ background: #fff; } .main.seo_section .left .section_list li:hover a, .main.seo_section .left .section_list li.active a{ color: #000; background-image: url('../img/svg/arrow_right_black.svg'); } .main.seo_section .right{ width: calc(100% - 320px); } .main.seo_section .right .title{ color: #81B225; font-weight: 600; font-size: 22px; margin-bottom: 10px; } .main.seo_section .right img{ height: fit-content; } .main.seo_section .right .tyre_block{ align-items: flex-start; gap: 20px;} .main.seo_section .right .tyre_block .left{ width: 50%; } .main.seo_section .right .tyre_block .left .product_image{ display: none; } .main.seo_section .right .tyre_block .left .text{ color: #E3E3E3; line-height: 1.4; font-size: 16px; } .main.seo_section .right .tyre_block .left .link{ color: #B8B8B8; position: relative; top: 5px; font-size: 14px; text-decoration: underline; } .main.seo_section .right .tyre_block .left .link:hover{ text-decoration: none; } .main.seo_section .right .tyre_block .price_block{ margin-top: 20px; color: #fff; margin-bottom: 10px; } .main.seo_section .right .tyre_block .price_block span{ color: #FF4E00; font-size: 32px; font-weight: 600; } .main.seo_section .right .tyre_block .right{ width: 50%; } .main.seo_section .right .advantages_block .col, .main.seo_section .right .list_block .col{ width: calc(33% - 11px); } .main.seo_section .right .advantages_block{ gap: 20px; align-items: baseline; flex-wrap: wrap; width: 100%; } .main.seo_section .right .advantages_block .col .icon-round_check{ display: inline-block; width: 40px; height: 41px; background: url('../img/svg/round-check.svg'); } .main.seo_section .right .advantages_block .col .number{ font-size: 32px; color: #81B225; font-weight: 600; } .main.seo_section .right .advantages_block .col .title{ font-size: 18px; color: #E3E3E3; font-weight: 600; margin: 10px 0; } .main.seo_section .right .advantages_block .col .text{ font-size: 16px; color: #E3E3E3; } .main.seo_section .right .divider{ height: 1px; width: 100%; background-color: #fff; opacity: 0.2; margin: 30px 0; } .main.seo_section .right .list_block{ gap: 20px; justify-content: space-between; width: 100%; align-items: baseline; } .main.seo_section .right .list_block ul{ display: flex; flex-direction: column; gap: 20px; margin-top: 20px; } .main.seo_section .right .list_block ul a{ color: #fff; text-decoration: underline; } .main.seo_section .right .list_block ul a:hover{ text-decoration: none; } .main.seo_section .right .product_search .row:not(.additional_fields){ flex-wrap: wrap; justify-content: flex-start; gap: 5px !important; } .main.seo_section .right .product_search .row:not(.additional_fields) .select_block { width: 25% !important; } .main.seo_section .right .product_search .row:not(.additional_fields) .button{ min-width: calc(25% - 15px); width: calc(25% - 15px); padding: 10px; } .main.seo_section .right .product_search .row:not(.additional_fields) .checkbox_block { order: 6; margin-left: 0px; margin-right: 20px; } .main.seo_section .right .product_items .item { width: 211px; } .main.seo_section .right .reviews_block{ width: 100%; } .main.seo_section .right .reviews_block ul{ display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 10px; } .main.seo_section .right .reviews_block ul li{ width: 33%; font-weight: 600; color: #E3E3E3; font-size: 16px; } .main.seo_section .right .reviews_block ul li::before{ content: ""; background: #81B225; display: inline-block; margin-right: 5px; width: 5px; height: 5px; border-radius: 5px; position: relative; top: -3px; } .main.seo_section .right .reviews_block .review{ display: flex; gap: 10px; align-items: flex-start; } .main.seo_section .right .reviews_block .review .image{ width: 200px; } .main.seo_section .right .reviews_block .review .text{ width: calc(100% - 200px); } .main.seo_section .right .info_block{ color: #E3E3E3; font-size: 16px; width: 100%; } .main.seo_section .right .info_block.with_image{ display: flex; gap: 20px; justify-content: space-between; } .main.seo_section .right .info_block.with_image img{ width: 330px; } .main.seo_section .right .info_block.with_image img.medium{ width: 220px; } .main.seo_section .right .info_block ul.info_list { display: flex; gap: 30px; margin-top: 20px; flex-wrap: wrap; } .main.seo_section .right .info_block ul.info_list li::before{ content: ""; background: url('../img/svg/info-white.svg'); display: inline-block; margin-right: 5px; width: 24px; height: 25px; position: relative; top: 8px; } .main.seo_section .right .info_block ul.info_list li a{ text-decoration: underline; } .main.seo_section .right .info_block ul.info_list li:hover a{ text-decoration: none; cursor: pointer; } .main.seo_section .right .tyre_brand_list{ justify-content: space-between; } .main.seo_section .right .tyre_brand_list li{ width: 145px; } .main.seo_section .right .criteria_block ul{ display: flex; flex-direction: column; gap: 5px; font-size: 16px; margin-bottom: 10px; } .main.seo_section .right .criteria_block ul li{ padding-left: 20px; line-height: 1.4; position: relative; } .main.seo_section .right .criteria_block ul li::before{ content: ""; background: #81B225; display: inline-block; width: 5px; height: 5px; border-radius: 5px; top: 8px; left: 10px; position: absolute; } .main.seo_section .right .tyre_designations{ display: flex; gap: 20px; } .main.seo_section .right .tyre_designations .left{ width: 250px; } .main.seo_section .right .tyre_designations .size_disclaimer{ display: flex; gap: 15px; color: #B8B8B8; border: 1px solid #B8B8B8; border-radius: 4px; padding: 15px; line-height: 1.4; align-items: center; font-size: 12px; } .main.seo_section .right .tyre_designations .info_icon{ display: inline-block; width: 16px; height: 17px; background: url('../img/svg/icon.svg'); } .main.seo_section .right .tyre_designations .right{ width: auto; } .main.seo_section .right .tyre_designations .disclaimer{ width: calc(100% - 32px); } .main.seo_section .right .tyre_designations .eu_label{ margin-left: 0px; } .main.seo_section .right .tyre_designations .info_block{ font-size: 13px; } .main.seo_section .right .tyre_designations .info_block img{ width: 56px; } .main.seo_section .right .tyre_designations .info_block .title{ margin-bottom: 5px; font-size: 18px; } .main.seo_section .right .two_cols{ gap: 20px; flex-wrap: wrap; width: 100%; } .main.seo_section .right .two_cols .col{ width: calc(50% - 10px); } .main.seo_section .right .product_items{ width: 100%; } .main.seo_section .right .product_items .item .info{ height: calc(100% - 273px); } .main.seo_section .right .product_items .see_more_btn{ width: auto; margin-top: 0px; } .promotion_block{ background: #000; width: 100%; display: flex; justify-content: center; gap: 40px; padding: 30px 0px; } .promotion_block .promotion{ color: #fff; font-size: 16px; font-weight: 600; display: flex; gap: 10px; align-items: center; } .promotion_block .promotion span{ display: block; width: 32px; height: 32px; margin: 0 auto; } .promotion_block .promotion.fast_delivery span{ background: url('../img/svg/benefit_delivery.svg'); width: 44px; height: 44px; position: relative; top: -10px; } .promotion_block .promotion.free_montage span{ background: url('../img/svg/benefit_setup.svg'); background-size: 32px; } .promotion_block .promotion.manufacturer_warranty span{ background: url('../img/svg/benefit_guarantee.svg'); } .leaflet-layer, .leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-control-attribution { filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%); } /*** Popup ***/ #overlay{ position:fixed;top:0px;left:0px; bottom:0px;right:0px; background-color: rgba(89, 89, 89, 0.8); z-index: 110; } #popup { position: fixed; display: inline-block; padding: 15px; background-color: #111111; z-index: 102;border: 1px solid #000;border-radius: 5px;max-height:85%; width: 500px; max-width: calc(100vw - 30px); z-index: 111; } #close_popup { position: absolute; cursor: pointer; top: -20px; right: -3px; background-image: url('../img/svg/cross_black.svg'); background-repeat: no-repeat; background-color: #81b225; background-position: center; border-radius: 20px; width: 20px; height: 20px; } #popup h3 { font-size: 16px; color: #fff; text-align: left;line-height:25px;padding-bottom:10px;margin:0; } /* #popup a:not(.chzn-single, .link) { color:#fff;text-decoration:underline; } */ #popup a:hover { text-decoration:none; } #popup #map { width: 100%; height: 450px; display: inline-block; background-color: #ccc; z-index: 10; max-height: 100%; } .contact_data.under-services{ display: none; } /*** Error page ***/ .error_page { min-height: calc(100vh - 950px); display: flex; align-items: center; justify-content: center; flex-direction: column; } .error_page .error_row { font-size:40px; font-weight: bold; color:#FFF; } .error_page .error_row.red { color:#E10000; } .error_page .error_row_second .important_link { margin-top:40px; } #first_available_spot, #first_available_spot_mobile {border: 1px solid #81b225; font-size: 12px; padding: 2px 5px; border-radius: 3px; color: #81b225; width: calc(50% - 16px); height: 42px; text-align: center; line-height: 42px;} #first_available_spot_mobile { width: calc(100% - 16px); } #first_available_spot.hidden, #first_available_spot_mobile.hidden{ display: none!important; } #first_available_spot .date, #first_available_spot_mobile .date{ font-weight: 600; color: #fff; font-size: 12px; } .section_txt{ font-size: 14px!important; color: #E3E3E3; line-height: 1.4; display: inline-block; } .section_txt ul{ display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; } .section_txt ul li{ padding-left: 20px; position: relative; } .section_txt ul li::before{ content: ""; background: #81B225; display: inline-block; width: 5px; height: 5px; border-radius: 5px; top: 8px; left: 10px; position: absolute; } .readMoreText { padding:10px 0; } .hideText { display:none; } .readMoreBtn, .readLessBtn { color: #B8B8B8; position: relative; top: 5px; font-size: 14px;border-bottom: 1px solid #B8B8B8; padding-bottom: 2px;margin:0 5px;cursor:pointer; } .readMoreBtn:hover, .readLessBtn:hover { border-bottom:none;padding-bottom:3px; } #application_time_error{ border: 1px solid #F00; border-radius: 3px; margin: 5px 0px; display: block; padding: 10px; color: #F00; }