/* Theme Name: OK Team Classic Theme URI: http://okteamclassic.com Description: Default template of OK Team Classic website Author: Digitalform Author URI: http://digitalform.hu Version: 2.0 */ *{ margin: 0; border: 0; padding: 0; flex-wrap: wrap; text-decoration: none; } *, *:after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; } :root { --color-teal: #567170; --color-teal-light: #769f97; --color-teal-dark: #2a4a47; --color-tan: #d8bf96; --color-dark: #211e1c; --color-sand: #f6f3ef; --color-brown: #af593d; --color-dark-brown: #563b33; --color-silver: #d8d8d8; --color-green: #1b4641; --color-red: #c72358; } @font-face { font-family: 'Source Sans Pro'; src: url("fonts/sourcesanspro-regular.woff2") format('woff2'); font-weight: 400; font-style: normal; font-stretch: normal; font-display: swap; } @font-face { font-family: 'Source Sans Pro'; src: url("fonts/sourcesanspro-italic.woff2") format('woff2'); font-weight: 400; font-style: italic; font-stretch: normal; font-display: swap; } @font-face { font-family: 'Source Sans Pro'; src: url("fonts/sourcesanspro-bold.woff2") format('woff2'); font-weight: 700; font-style: normal; font-stretch: normal; font-display: swap; } @font-face { font-family: 'Source Sans Pro'; src: url("fonts/sourcesanspro-bold-italic.woff2") format('woff2'); font-weight: 700; font-style: italic; font-stretch: normal; font-display: swap; } @font-face { font-family: 'Sangbleu Sunrise'; src: url("fonts/sangbleu-sunrise.woff2") format('woff2'); font-weight: 400; font-style: normal; font-stretch: normal; font-display: swap; } body { font-family: "Source Sans Pro", sans-serif; font-size: 18px; font-weight: 400; color: var(--color-dark); line-height: 30px; background: var(--color-sand); overflow-x: hidden; } body.sidebar_opened, body.rwd_menu__opened { overflow: hidden; } img.alignleft, img.alignright, img.aligncenter, img.alignnone { max-width: 100%; padding: 5px; background: white; border: 1px solid #eee; } img.alignleft { margin: 0 20px 20px 0; float: left; } img.alignright { margin: 0 0 20px 20px; float: right; } img.noborder { padding: 0 !important; -webkit-box-shadow: none; box-shadow: none; } h1, h2, h3, h4, h5 { font-weight: normal; line-height: 100%; } hr { margin: 50px 0; border-top: 5px solid var(--color-dark); clear: both; } button, input { -webkit-appearance: none; -webkit-border-radius: 0; } button, input, select, textarea { font-family: "Source Sans Pro", sans-serif; font-size: 16px; font-weight: 400; outline: none; } textarea { resize: vertical; } #content input[type="checkbox"], #content input[type="radio"] { width: 16px; min-width: 16px; height: 16px; margin: -4px 4px 0 0 !important; padding: 0 !important; text-align: center !important; background-color: #fff; border: 1px solid #d9d9d9; clear: none; cursor: pointer; display: inline-block !important; line-height: 0; outline: 0; vertical-align: middle !important; -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: .05s border-color ease-in-out; transition: .05s border-color ease-in-out; } #content input[type="radio"] { -webkit-border-radius: 50%; border-radius: 50%; } #content input[type="radio"]:checked:before { width: 6px; height: 6px; left: 4px; top: 4px; background: #34a853; position: relative; border-radius: 8px; display: block; text-align: center; content: ''; } #content input[type="checkbox"]:checked:before { width: 6px; height: 6px; left: 4px; top: 4px; background: #34a853; position: relative; display: block; text-align: center; content: ''; } /* ----------------- CLASSES ----------------- */ .red { color: #c72358; } .inner { width: 100%; max-width: 1440px; margin: auto; position: relative; } .inner.inner_800 { max-width: 800px; } .left { float: left; } .right { float: right; } .clear { clear: both; } .hide { display: none !important; } .vertical_middle { top: 50%; position: relative; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .b_r_3 { -webkit-border-radius: 3px; border-radius: 3px; } .b_r_50p { -webkit-border-radius: 50%; border-radius: 50%; } /* Buttons */ .button { height: 60px; padding: 0 30px !important; font-weight: 700; text-decoration: none !important; color: white !important; line-height: 20px; background-color: var(--color-brown); display: inline-flex; align-items: center; align-content: center; justify-content: center; position: relative; cursor: pointer; border-radius: 30px; } .button:hover { background-color: #242526; } .button_40 { height: 40px; padding: 0 15px !important; font-size: 16px; line-height: 40px; } .button_30 { height: 30px; padding: 0 10px !important; font-size: 14px; line-height: 30px; } .button_red { background-color: var(--color-red); } .button_red:hover { background-color: var(--color-dark); } .button_white_hover:hover { color: var(--color-dark) !important; background-color: white !important; } .button:disabled { background: var(--color-silver); cursor: not-allowed; } .button_arrow { height: 20px; padding-right: 30px; font-size: 20px; font-weight: 700; text-decoration: none !important; color: white !important; line-height: 20px; display: inline-flex; position: relative; } .button_arrow:after { width: 20px; height: 20px; right: 0; top: 0; background: url(images/icon_arrow_right.svg) no-repeat right center; background-size: auto 100%; position: absolute; content: ''; } .button_arrow:hover:after { -webkit-animation-name: bounceRight; animation-name: bounceRight; -webkit-animation-duration: 2.3s; animation-duration: 2.3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Font */ .center { text-align: center; } .uppercase { text-transform: uppercase; } .embed_font, .sec_font { font-family: "Sangbleu Sunrise", sans-serif; font-weight: 400; } /* Animation */ .anim, .button, :before, :after { -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .anim_cubic { -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); } /* ----------------------- COOKIE LAW INFO ----------------------- */ #cookie-law-info-bar { width: 100% !important; max-width: 320px !important; padding: 20px !important; text-align: left !important; font-size: 14px !important; line-height: 16px; } #cookie-law-info-bar span { display: block; } #cookie-law-info-bar .cli_action_button { width: 100% !important; height: 40px !important; margin-left: 0 !important; margin-top: 10px; padding: 0 !important; font-size: 15px !important; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 40px !important; background-color: #f15c22 !important; display: block; } #cookie-law-info-bar .cli_action_button:hover { opacity: 0.9; } #cookie-law-info-bar .cli_settings_button { width: 100% !important; height: 40px !important; margin-left: 0 !important; padding: 0 !important; font-size: 15px !important; font-weight: 700; text-transform: uppercase; text-align: center; color: #292929 !important; line-height: 40px !important; background-color: transparent !important; border: 1px solid var(--color-silver) !important; display: block; } #cookie-law-info-bar .cli_settings_button:hover { border-color: #292929 !important; } /* ------------- MODAL ------------- */ .mfp-content .modal_panel { margin: 20px auto; background: white; position: relative; } .modal_added_to_cart { width: 100%; max-width: 600px; padding: 0; } .modal_added_to_cart .modal_header { padding: 15px 80px 15px 20px; font-size: 30px; font-weight: 700; color: white; background: var(--color-teal); } .modal_added_to_cart .modal_entry { padding: 20px; display: flex; } .modal_added_to_cart .modal_entry .thumbnail { width: 150px; padding: 5px; text-align: center; border: 1px solid var(--color-silver); display: flex; align-items: center; } .modal_added_to_cart .modal_entry .thumbnail img { max-width: 140px; max-height: 140px; } .modal_added_to_cart .modal_entry .datas { width: calc(100% - 150px); padding-top: 10px; padding-left: 20px; } .modal_added_to_cart .modal_entry .datas h4 { margin-bottom: 10px; font-size: 25px; font-weight: 700; color: var(--color-dark); } .modal_added_to_cart .modal_entry .datas .price { margin-bottom: 15px; font-size: 20px; color: #8a817a; } .modal_added_to_cart .modal_entry .datas .price del { display: none; } .modal_added_to_cart .modal_entry .datas .button { height: 40px; padding: 0 10px !important; font-size: 16px; } .modal_added_to_cart .fancybox-close-small { width: 40px; height: 40px; right: 10px; top: 10px; background: var(--color-brown); position: absolute; opacity: 100% !important; border-radius: 50%; } .modal_added_to_cart .fancybox-close-small:hover { background: white; } .modal_added_to_cart .fancybox-close-small path { fill: white !important; } .modal_added_to_cart .fancybox-close-small:hover path { fill: var(--color-dark) !important; } /* Search Panel */ .fancybox-content.search_panel { width: 100%; max-width: 600px; } .fancybox-content.search_panel h3 { margin-bottom: 20px; font-size: 30px; font-weight: 700; color: var(--color-dark); } .fancybox-content.search_panel form { height: 60px; background: var(--color-sand); border-radius: 10px; position: relative; } .fancybox-content.search_panel form input[type=text] { width: 100%; height: 100%; padding-left: 60px; background: transparent url(images/icon-search-brown.svg) no-repeat 20px center; background-size: auto 22px; border: 1px solid var(--color-silver); outline: 2px solid transparent; outline-offset: 2px; border-radius: 5px; } .fancybox-content.search_panel form input[type=text]:focus { background-color: white; border-color: white; outline: 3px solid var(--color-brown); outline-offset: 0px; } .fancybox-content.search_panel form input[type=submit] { height: 30px; right: 10px; top: 50%; padding: 0 10px; font-size: 14px; font-weight: 700; text-transform: uppercase; color: white; line-height: normal; background: var(--color-brown); border: none !important; position: absolute; z-index: 2; transform: translateY(-50%); cursor: pointer; border-radius: 5px; } .fancybox-content.search_panel form input[type=submit]:hover { background: var(--color-dark); } /* Contact */ #panel-contact { width: 100%; max-width: 600px; padding: 0 !important; background: var(--color-sand); } #panel-contact .wpcf7-form { padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; } #panel-contact .panel-header { padding: 20px; background: #ffffff; border-bottom: 1px solid var(--color-silver); } #panel-contact .panel-content { padding: 30px 20px; } #panel-contact .panel-content p.intro { margin-bottom: 20px; } /* ---------------- RWD NAV ---------------- */ #rwd_menu { width: 100%; left: 0; top: 100px; bottom: 0; background: rgba(0 0 0 / 50%); position: fixed; z-index: 1000; visibility: hidden; opacity: 0; } #rwd_menu .rwd_menu_wrap { width: 480px; height: 100%; right: -100%; top: 0; background: var(--color-brown); position: absolute; overflow-y: auto; } #rwd_menu .rwd_menu_wrap label { margin-bottom: 10px; font-size: 20px; font-weight: 700; text-transform: uppercase; color: rgba(255 255 255 / 50%); } #rwd_menu .rwd_menu_wrap .rwd_menu_section { padding-left: 50px; padding-right: 50px; } #rwd_menu .rwd_menu_wrap .rwd_menu_section.search { padding: 20px 50px; } #rwd_menu .rwd_menu_wrap .rwd_menu_section.useful_info { padding-top: 50px; padding-bottom: 50px; background: rgba(255 255 255 / 5%); } /* Search Panel */ #rwd_menu .search form { height: 60px; background: var(--color-sand); border-radius: 5px; position: relative; } #rwd_menu .search form input[type=text] { width: 100%; height: 100%; padding-left: 60px; background: transparent url(images/icon-search-brown.svg) no-repeat 20px center; background-size: auto 22px; outline: 2px solid transparent; outline-offset: 2px; border-radius: 5px; } #rwd_menu .search form input[type=text]:focus { outline-color: var(--color-silver-line); } #rwd_menu .search form input[type=submit] { height: 30px; right: 10px; top: 50%; padding: 0 10px; font-size: 14px; font-weight: 700; text-transform: uppercase; color: white; line-height: normal; background: var(--color-brown); border: none !important; position: absolute; z-index: 2; transform: translateY(-50%); cursor: pointer; border-radius: 5px; } #rwd_menu .search form input[type=submit]:hover { background: var(--color-dark); } /* Menu */ #rwd_menu .menu ul li { float: none !important; position: relative; } #rwd_menu .menu ul li.hide_in_rwd { display: none; } #rwd_menu .menu ul li a { color: white; display: block; } /* Primary menu */ #rwd_menu ul.primary_menu { margin-bottom: 30px; list-style: none; } #rwd_menu ul.primary_menu li { border-bottom: 1px solid rgba(255 255 255 / 20%); } #rwd_menu ul.primary_menu li:last-child { border-bottom: none; } #rwd_menu ul.primary_menu li a { padding: 15px 0; font-size: 18px; font-weight: 700; color: white; line-height: 100%; display: block; position: relative; } #rwd_menu ul.primary_menu li a:hover { text-decoration: underline; text-decoration-thickness: 1px; } #rwd_menu ul.primary_menu li.menu-item-has-children > a:after { width: 30px; height: 30px; right: 0; top: calc(50% - 15px); background: url(images/icon_arrow_down_white.svg) no-repeat center; background-size: 16px; border: 1px solid rgba(255 255 255 / 20%); position: absolute; content: ''; -webkit-border-radius: 3px; border-radius: 3px; } #rwd_menu ul.primary_menu li.menu-item-has-children.open > a:after { ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } #rwd_menu ul.primary_menu.categories li a { padding: 20px 0 20px 50px; } #rwd_menu ul.primary_menu.categories li a .icon { width: 40px; height: 40px; left: 0; top: 9px; background: var(--color-dark); position: absolute; display: flex; justify-content: center; align-items: center; border-radius: 50px; } #rwd_menu ul.primary_menu.categories li a .icon img { width: 20px; height: 20px; display: block; filter: invert(100%) sepia(0) saturate(0) hue-rotate(0deg) brightness(300%); } #rwd_menu ul.primary_menu li ul { margin-bottom: 20px; padding: 10px 0; background: rgba(0 0 0 / 20%); display: none; list-style: none; border-radius: 5px; } #rwd_menu ul.primary_menu li ul li { margin: 2px 0; color: var(--color-gold); border-bottom: none !important; } #rwd_menu ul.primary_menu li ul li a { padding: 10px 20px !important; font-size: 17px; font-weight: 400; color: white !important; line-height: 20px; position: relative; } #rwd_menu ul.primary_menu li ul li a:before { width: 6px; height: 6px; left: 10px; top: 21px; background: var(--color-gold); position: absolute; content: ''; -webkit-border-radius: 50%; border-radius: 50%; } /* Secondary menu */ #rwd_menu ul.secondary_menu { margin-bottom: 50px; list-style: none; } #rwd_menu ul.secondary_menu li { margin-bottom: 5px; } #rwd_menu ul.secondary_menu li a { font-size: 18px; font-weight: 700; color: white; } #rwd_menu ul.secondary_menu li a:hover { text-decoration: underline; } /* Language chooser */ #rwd_menu .qtranxs_widget ul { border: 1px solid rgba(255 255 255 / 20%); display: flex; list-style: none; } #rwd_menu .qtranxs_widget ul li { border-right: 1px solid rgba(255 255 255 / 20%); flex-grow: 1; flex-basis: 0; } #rwd_menu .qtranxs_widget ul li:last-child { border-right: none; } #rwd_menu .qtranxs_widget ul li a { height: 60px; font-size: 20px; font-weight: 700; text-transform: uppercase; color: white; display: flex; align-items: center; justify-content: center; } #rwd_menu .qtranxs_widget ul li.active { background: rgba(255 255 255 / 10%); } /* RWD menu is opened */ body.rwd_menu__opened #rwd_menu { visibility: visible; opacity: 100%; } body.rwd_menu__opened #rwd_menu .rwd_menu_wrap { right: 0; } /* ------------------------- WEBSHOP MESSAGE ------------------------- */ #webshop_message { padding: 7px 0; font-size: 13px; color: #333; line-height: 15px; background: #fff5eb; border-bottom: 1px solid #fdb676; } #webshop_message p { margin-bottom: 5px; } #webshop_message p:last-child { margin-bottom: 0; } /* --------------- HEADER --------------- */ #header { position: relative; z-index: 10; box-shadow: 0 5px 10px rgba(0 0 0 / 7%); } /* Header top */ #header .header_top { height: 50px; font-size: 16px; color: #ffffff; background: var(--color-teal-dark); } #header .header_top .header_top_wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; } #header .header_top ul { height: 100%; display: flex; align-items: center; list-style: none; } #header .header_top ul li a { text-decoration: underline; color: #ffffff; } #header .header_top ul li a:hover { text-decoration: none; } #header .header_top ul.menu li { margin-left: 30px; } #header .header_top ul.menu li:first-child { margin-left: 0; } #header .header_top .my_profile { height: 100%; } #header .header_top .my_profile ul li { margin-right: 10px; } #header .header_top .my_profile ul li a { display: flex; align-items: center; } #header .header_top .my_profile ul li a img { width: 30px; height: 30px; margin-right: 10px; border: 2px solid rgba(255 255 255 / 20%); display: block; border-radius: 50%; } /* Header bottom */ #header .header_bottom { height: 100px; background: #ffffff; position: relative; } #header .header_bottom .header_bottom_wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; position: relative; } /* Logo */ #header .header_bottom .logo { width: fit-content; display: flex; position: relative; z-index: 2; } #header .header_bottom .logo img { width: auto; height: 80px !important; display: block; } /* Menu */ #header .header_bottom ul.menu { inset: 0; display: flex; justify-content: center; list-style: none; position: absolute; z-index: 1; } #header .header_bottom ul.menu li { height: 100%; margin: 0 10px; display: flex; align-items: center; position: relative; } #header .header_bottom ul.menu li:before { width: 0; height: 5px; left: 0; bottom: 0; background: var(--color-teal); position: absolute; content: ''; } #header .header_bottom ul.menu li a { font-size: 18px; font-weight: 700; color: var(--color-dark); } #header .header_bottom ul.menu li a:hover { text-decoration: underline; } #header .header_bottom ul.menu li ul { min-width: -webkit-fill-available; left: 0; top: 100%; padding: 20px; background: #ffffff; border: 1px solid var(--color-silver); border-top: none; position: absolute; z-index: 100; visibility: hidden; opacity: 0; } #header .header_bottom ul.menu li ul li { margin-bottom: 10px; } #header .header_bottom ul.menu li ul li:last-child { margin-bottom: 0; } #header .header_bottom ul.menu li ul li:before { display: none; } #header .header_bottom ul.menu li:hover:before { width: 100%; } #header .header_bottom ul.menu li:hover > ul { visibility: visible; opacity: 100%; } /* Cart and Search */ #header .header_bottom .cart_search { display: flex; position: relative; z-index: 2; } /* Search */ #header .header_bottom .open_search_panel { width: 50px; height: 50px; font-size: 0; background: url(images/icon-search-dark.svg) no-repeat center / auto 20px; border: 1px solid var(--color-silver); border-radius: 50%; cursor: pointer; } #header .header_bottom .open_search_panel:hover { background-color: rgba(0 0 0 / 3%); } /* Language chooser */ #header .header_bottom .qtranxs_widget { width: 50px; height: 50px; margin-left: 15px; position: relative; } #header .header_bottom .qtranxs_widget ul.language-chooser { width: 100%; height: 50px; padding-top: 50px; background: #ffffff; border: 1px solid var(--color-silver); position: absolute; border-radius: 25px; list-style: none; overflow: hidden; } #header .header_bottom .qtranxs_widget ul.language-chooser li { width: 100%; height: 50px; border-top: 1px solid var(--color-silver); } #header .header_bottom .qtranxs_widget ul.language-chooser li:first-child { border-top: none; } #header .header_bottom .qtranxs_widget ul.language-chooser li.active { left: 0; top: 0; position: absolute; } #header .header_bottom .qtranxs_widget ul.language-chooser li a { width: 100%; height: 100%; font-size: 16px; font-weight: 700; text-transform: uppercase; color: var(--color-dark); line-height: normal; display: flex; align-items: center; justify-content: center; } #header .header_bottom .qtranxs_widget ul.language-chooser li a:hover { background: rgba(0 0 0 / 3%); } #header .header_bottom .qtranxs_widget ul.language-chooser:hover { height: auto; } /* Search */ #header .hgroup .hgroup_top a.open_search_panel { width: 60px; height: 60px; font-size: 0; background: var(--color-teal) url(images/icon_search_white.svg) no-repeat center; background-size: auto 22px; cursor: pointer; } #header .hgroup .hgroup_top a.open_search_panel:hover { background-color: var(--color-teal-dark); } /* Cart */ #header .header_bottom .ajax_cart { width: 50px; height: 50px; margin-left: 15px; background: var(--color-brown) url(images/icon-cart-white.svg) no-repeat center / auto 20px; border-radius: 50%; position: relative; } #header .header_bottom .ajax_cart .count { min-width: 24px; height: 24px; left: calc(100% - 15px); top: -5px; padding: 0 5px; font-size: 14px; text-align: center; color: #ffffff; line-height: normal; background: var(--color-dark); display: flex; align-items: center; justify-content: center; position: absolute; border-radius: 20px; } /* RWD button */ #header .rwd_button { height: 50px; margin-left: 20px; padding: 2px 20px 0 60px; font-size: 16px; font-weight: 700; color: white; line-height: 100%; background: var(--color-teal-dark); align-items: center; align-items: center; position: relative; border-radius: 25px; cursor: pointer; } #header .rwd_button .burg { width: 30px; height: 2px; left: 20px; top: 50%; margin-right: 10px; background: white; display: block; position: absolute; -webkit-transition: 0.2s; transition: 0.2s; } #header .rwd_button .burg:before, #header .rwd_button .burg:after { width: 30px; height: 2px; background: white; position: absolute; content: ''; -webkit-transition: 0.2s; transition: 0.2s; } #header .rwd_button .burg:before { top: -7px; left: 0; } #header .rwd_button .burg:after { top: 7px; right: 0; } body.rwd_menu__opened #header .rwd_button .burg { background: transparent; } body.rwd_menu__opened #header .rwd_button .burg:before { top: 0; -webkit-transform: rotate(45deg); } body.rwd_menu__opened #header .rwd_button .burg:after { top: 0; -webkit-transform: rotate(-45deg); } /* -------------- SLIDER -------------- */ #slider { height: calc(100vh - 190px); background-color: var(--color-dark); } #slider .slick-list, #slider .slick-track, #slider .slick-slide { height: 100%; } #slider .item { height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } #slider .item .cover { inset: 0; background: rgba(0 0 0 / 30%); position: absolute; } #slider .item .inner { height: 100%; padding-bottom: 100px; display: flex; align-items: end; } #slider .item .inner h2 { width: 100%; margin-left: auto; margin-right: auto; padding-right: 30%; font-size: clamp(2rem, 5vw, 4rem); color: white; line-height: 100%; } #slider .item .inner .action_button { width: 100%; margin-top: 50px; } #slider .slick-dots { right: 50px; top: 50%; position: absolute; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #slider .slick-dots li { margin: 15px 0; } #slider .slick-dots li button { width: 14px; height: 14px; text-indent: -9999px; background: white; cursor: pointer; -webkit-border-radius: 50%; border-radius: 50%; } #slider .slick-dots li.slick-active button { background: #f15c22; } /* ---------------- ABOUT US ---------------- */ #aboutus { padding: 70px 0; } #aboutus h1 { width: 100%; margin-bottom: 50px; padding-bottom: 30px; font-size: clamp(2rem, 5vw, 4rem); border-bottom: 5px solid var(--color-dark); position: relative; } #aboutus .aboutus_wrap { display: flex; justify-content: space-between; } #aboutus .aboutus_wrap .content { -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 50px; column-gap: 50px; } #aboutus .aboutus_wrap .content p { margin-bottom: 20px; } /* Boxes */ #boxes { margin-bottom: 50px; } #boxes .box_wrap { margin-bottom: 100px; display: flex; justify-content: space-between; } #boxes .box_wrap .wrap_left { width: 50%; padding: 50px; display: flex; align-items: center; align-content: center; justify-content: center; } #boxes .box_wrap .wrap_left h2 { width: 100%; margin-bottom: 30px; font-size: clamp(2rem, 5vw, 4rem); line-height: 100%; } #boxes .box_wrap .wrap_left .text { width: 100%; } #boxes .box_wrap .wrap_left .button { margin-top: 30px; } #boxes .box_wrap .wrap_right { width: 50%; background: var(--color-brown); position: relative; } #boxes .box_wrap .wrap_right:before { padding-top: 70%; display: block; content: ''; } #boxes .box_wrap .wrap_right .image { width: 100%; height: 100%; left: 0; top: 0; background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; } #boxes .box_wrap:last-child { margin-bottom: 0; } #boxes .box_wrap:nth-child(2n) .wrap_left { order: 2; } #boxes .box_wrap:nth-child(2n) .wrap_right { order: 1; } /* ------------ NEWS ------------ */ #news { padding: 100px 0; background: white; } #news .title { margin-bottom: 30px; font-size: clamp(2rem, 5vw, 4rem); color: var(--color-dark); line-height: 100%; } .news_wrap { margin-left: -20px; margin-right: -20px; display: flex; } .news_wrap .news { width: calc(33.33333333333% - 40px); margin: 50px 20px 0; } .news_wrap .news:nth-child(-n+3) { margin-top: 0; } .news_wrap .news .thumbnail { margin-bottom: 10px; display: block; position: relative; } .news_wrap .news .thumbnail img { width: 100%; height: auto; display: block; } .news_wrap .news .thumbnail .start_end_date { right: 0; bottom: 30px; padding: 0 10px; font-size: 14px; font-weight: 700; color: var(--color-dark); background: var(--color-yellow); position: absolute; } .news_wrap .news .category { font-size: 15px; font-weight: 700; color: var(--color-dark); } .news_wrap .news h3 { margin-bottom: 0 !important; } .news_wrap .news h3 a { font-size: 30px; font-weight: 700; text-decoration: none !important; color: var(--color-dark) !important; line-height: 120%; } .news_wrap .news h3 a:hover { text-decoration: underline !important; text-decoration-thickness: 1px; } .news_wrap .news .excerpt { margin-top: 15px; padding-top: 15px; font-size: 15px; font-weight: 400 !important; color: var(--color-gray); line-height: 20px; border-top: 1px solid var(--color-silver); } body.home .news_wrap { margin-bottom: 50px; } /* ---------------------- MARKETING TEXT ---------------------- */ #marketing_text { padding-bottom: 50px; background: #ffffff; } /* ------------------------ FLEXIBLE CONTENT ------------------------ */ /* Text Content */ .flexible_content__text_content { margin: 50px 0; } .flexible_content__text_content .has_column { -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 50px; column-gap: 50px; } /* Images */ .flexible_content__images .gallery_wrap { display: flex; } .flexible_content__images .gallery_wrap .image { background-repeat: no-repeat; background-position: center; background-size: cover; flex-grow: 1; flex-basis: 0; } .flexible_content__images .gallery_wrap .image:before { padding-top: 60%; display: block; content: ''; } /* Releated vehicles */ .flexible_content__related_vehicles { margin: 50px 0; } .flexible_content__related_vehicles h2 { width: 100%; } /* --------------------------- ALTERNATIVE FILTER --------------------------- */ .alt_filter { margin-bottom: 30px; padding: 0 20px; border: 1px solid var(--color-silver); } .alt_filter legend { padding: 0 5px; color: #d13939; } .alt_filter h3 { margin-bottom: 10px !important; } .alt_filter h3 span { font-size: 20px !important; } .alt_filter ul { margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 20px !important; } .alt_filter ul li { padding-left: 0 !important; } .alt_filter ul li:before { display: none !important; } .alt_filter ul li select { width: 100%; height: 40px; border: 1px solid #cdcfd3; } .alt_filter .widget_title { display: none; } /* ------------------------ BEFORE CONTENT ------------------------ */ .rank-math-breadcrumb { margin-bottom: 10px; font-size: 14px; } .rank-math-breadcrumb p { margin-bottom: 0 !important; } /* ---------------- CONTENT ---------------- */ #container { padding: 50px 0; display: flex; } body.home #container { padding: 0; display: block; } #content { flex: 1; position: relative; } body.error404 #content, body.single-sparepart #content, body.page-template-types #content, body.page-template-market #content, body.page-template-fullwidth #content, body.post-type-archive-sparepart #content, body.page-template-flexible-content #content { width: 100%; } #content .go_back { margin-bottom: 10px; } #content h1 { margin-bottom: 30px; font-size: clamp(2rem, 5vw, 4rem); line-height: 100%; position: relative; } #content h2 { margin-bottom: 30px; font-size: clamp(1.75rem, 4vw, 3rem); line-height: 100%; } #content h3 { margin-bottom: 20px; font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; line-height: 100%; } #content a { text-decoration: underline; color: var(--color-brown); } #content a:hover { color: var(--color-dark); } #content p { margin-bottom: 30px; } /* List */ #content ul { margin-bottom: 30px; margin-left: 20px; list-style: none; } #content ul li { padding-left: 20px; position: relative; list-style: none; } #content ul li:before { width: 8px; height: 8px; left: 0; top: 10px; background: var(--color-brown); position: absolute; content: ''; border-radius: 50%; } #content ul.nomargin { margin-left: 0; } #content ul.nomargin li { padding-left: 0; } #content ul.nomargin li:before { display: none; } #content ul.list { margin-left: 0 !important; -webkit-column-count: 3; column-count: 3; -webkit-column-gap: 50px; column-gap: 50px; } #content ul.list li { padding: 10px !important; border-bottom: 1px solid var(--color-dark); } #content ul.list li:before { width: 24px; height: 24px; left: auto; top: 0; margin-right: 10px; color: white; line-height: normal; background: var(--color-teal); display: inline-flex; align-items: center; justify-content: center; position: relative; content: '✔'; border-radius: 50%; }#content ul.single_gallery li:before { width: 24px; height: 24px; left: auto; top: 0; margin-right: 10px; color: white; line-height: normal; background: var(--color-teal); display: inline-flex; align-items: center; justify-content: center; position: relative; content: '✔'; border-radius: 50%; } /* Single gallery */ #content ul.single_gallery { margin-left: -10px !important; margin-right: -10px; display: flex; } #content ul.single_gallery li { width: calc(25% - 20px); margin: 20px 10px 0; } #content ul.single_gallery li:nth-child(-n+4) { margin-top: 0; } #content ul.single_gallery li:before { display: none !important; } #content ul.single_gallery li a { padding: 10px; background: #ffffff; outline: 3px solid transparent; outline-offset: 2px; border-radius: 5px; display: block; } #content ul.single_gallery li a:hover { outline-color: var(--color-tan); } #content ul.single_gallery li a img { width: 100%; height: auto; display: block; } /* Vehicle wrap */ #content .vehicle_list_wrap { margin-left: -10px; margin-right: -10px; display: flex; } #content .vehicle_list_wrap .vehicle { width: calc(33.3333333333% - 20px); margin: 50px 10px 0; padding: 10px; text-decoration: none !important; background: white; border: 1px solid var(--color-silver); } #content .vehicle_list_wrap .vehicle:nth-child(-n+3) { margin-top: 0; } #content .vehicle_list_wrap .vehicle .image img { width: 100%; height: auto; display: block; } #content .vehicle_list_wrap .vehicle .entry { padding: 20px 0 10px; } #content .vehicle_list_wrap .vehicle .entry h3 { margin-bottom: 0 !important; font-size: 30px; line-height: 100%; } #content .vehicle_list_wrap .vehicle .entry small { display: block; } /* Vehicle data */ #content .vehicle_data_wrap { margin-bottom: 30px; display: flex; justify-content: space-between; gap: 20px; } #content .vehicle_data_wrap > div { width: calc(50% - 10px); background: white; border: 1px solid var(--color-silver); border-radius: 10px; } #content .vehicle_data_wrap .thumbnail a { padding: 20px; display: block; } #content .vehicle_data_wrap .thumbnail img { width: 100%; height: auto; display: block; } #content .vehicle_data_wrap .vehicle_metas { padding: 30px; } #content .vehicle_data_wrap .vehicle_metas ul { margin-bottom: 0 !important; } #content .vehicle_data_wrap .vehicle_metas ul li { padding: 15px 0; line-height: 16px; border-bottom: 1px solid var(--color-silver); display: flex; } #content .vehicle_data_wrap .vehicle_metas ul li:last-child { border-bottom: none; } #content .vehicle_data_wrap .vehicle_metas ul li .name { width: 50%; min-height: 24px; padding-left: 35px; font-size: 14px; font-weight: 700; line-height: 16px; background-repeat: no-repeat; background-position: left center; background-size: auto 24px; display: flex; align-items: center; } #content .vehicle_data_wrap .vehicle_metas ul li .name.full { width: 100%; display: block; } #content .vehicle_data_wrap .vehicle_metas ul li .value { width: 50%; font-size: 16px; line-height: 20px; display: flex; align-items: center; } #content .vehicle_data_wrap .vehicle_metas ul li .value.full { width: 100%; display: block; } #content .vehicle_data_wrap .vehicle_metas ul li.calendar .name { background-image: url(images/icon_calendar.svg); } #content .vehicle_data_wrap .vehicle_metas ul li.engine_capacity .name { background-image: url(images/icon_engine.svg); } #content .vehicle_data_wrap .vehicle_metas ul li.performance .name { background-image: url(images/icon_performance.svg); } #content .vehicle_data_wrap .vehicle_metas ul li.top_speed .name { background-image: url(images/icon_top_speed.svg); } #content .vehicle_data_wrap .vehicle_metas ul li.consumption .name { background-image: url(images/icon_consumption.svg); } #content .vehicle_data_wrap .vehicle_metas ul li.price .name { background-image: url(images/icon_price.svg); } /* Accordion */ #content .accordions .accordion { margin-bottom: 10px; border: 1px solid var(--color-tan); } #content .accordions .accordion .accordion_header { padding: 10px 20px; font-size: 16px; font-weight: 700; position: relative; cursor: pointer; } #content .accordions .accordion .accordion_header h3 { margin-bottom: 0; } #content .accordions .accordion .accordion_header .icon { width: 30px; height: 30px; right: 10px; top: 50%; font-size: 24px; font-weight: 400; text-align: center; line-height: 30px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #content .accordions .accordion .accordion_header .text { font-size: 12px; right: 10px; top: 50%; position: absolute; opacity: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #content .accordions .accordion .accordion_header:hover .text { right: 0; opacity: 1; } #content .accordions .accordion .accordion_content { padding: 0 20px 20px; font-size: 16px; text-align: left !important; display: none; position: relative; } #content .accordions .accordion .accordion_content h2, #content .accordions .accordion .accordion_content h3 { display: none !important; } #content .accordions .accordion .accordion_content p { margin-bottom: 0 !important; text-align: left !important; } #content .accordions .accordion .accordion_content p:last-child { margin-bottom: 0 !important; } #content .accordions .accordion .accordion_content table.shop_attributes { width: 100%; border-spacing: 0; border-collapse: collapse; } #content .accordions .accordion .accordion_content table.shop_attributes tbody tr th, #content .accordions .accordion .accordion_content table.shop_attributes tbody tr td { padding: 0 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-silver); } #content .accordions .accordion.active { background: white; } /*#content .accordions .accordion:nth-child(1) .accordion_content { display: block; }*/ /* Illustration */ #content .illustration_image { margin-bottom: 30px; display: flex; } #content .illustration_image img { max-width: 100%; } #content .illustration_image .image_wrap { background: white; border: 1px solid var(--color-silver); } #content .illustration_image .image_wrap.has_releated_spare_parts { width: calc(100% - 100px); } #content .illustration_image .dot_navigation { width: 100px; position: relative; } #content .illustration_image .dot_navigation ul { width: 100%; margin-left: 0 !important; margin-bottom: 0 !important; } #content .illustration_image .dot_navigation ul li { width: 100%; padding-left: 0 !important; } #content .illustration_image .dot_navigation ul li:before { display: none !important; } #content .illustration_image .dot_navigation ul li a { width: 30px; height: 30px; margin: 0 auto 10px; font-size: 16px; text-decoration: none !important; color: white !important; background: var(--color-brown); display: flex; align-items: center; justify-content: center; border-radius: 50%; } #content .illustration_wrap .wrap_left { width: 40%; } #content .illustration_wrap .wrap_right { width: 60%; } #content .illustration_wrap .releated_spare_parts article { padding: 20px 0; border-bottom: 1px solid var(--color-silver); display: flex; } #content .illustration_wrap .releated_spare_parts article:nth-child(2n) { background: white; } #content .illustration_wrap .releated_spare_parts article .count { width: 20px; height: 20px; font-size: 14px; color: white; line-height: normal; background: var(--color-brown); display: flex; align-items: center; justify-content: center; border-radius: 50%; } /* Meta */ #content .post_metas { margin-bottom: 50px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; align-content: center; } #content .post_metas .wrap_left { display: flex; align-items: center; align-content: center; } #content .post_metas .wrap_left .category { margin-right: 15px; padding: 2px 10px; font-size: 14px; font-weight: 700; color: white; background: var(--color-brown); border-radius: 3px; } #content .post_metas .wrap_left .reading_time span { margin: 0 10px; font-weight: 700; color: var(--color-gray); } #content .post_metas .wrap_right .share_this_post { padding: 5px 10px; border: 1px solid var(--color-silver); display: flex; align-items: center; border-radius: 3px; } #content .post_metas .wrap_right .share_this_post label { margin-right: 10px; font-weight: 700; } #content .post_metas .wrap_right .share_this_post a { width: 40px; height: 30px; margin-left: 2px; display: flex; align-items: center; justify-content: center; border-radius: 3px; } #content .post_metas .wrap_right .share_this_post a:hover { background: var(--color-tan); } #content .post_metas .wrap_right .share_this_post a img { width: auto; height: 20px; display: block; } #content .post_metas .wrap_right .share_this_post .link_copied { font-weight: 700; } #content .post_metas .wrap_right .share_this_post.active { padding-left: 0; } #content .post_metas .wrap_right .share_this_post.active label, #content .post_metas .wrap_right .share_this_post.active a:not(.copy_to_clipboard) { display: none; } #content .post_metas .wrap_right .share_this_post.active .link_copied { display: block !important; } #content .post_metas .wrap_right .share_this_post.active .copy_to_clipboard { background: transparent !important; cursor: auto; } #content .excerpt { font-weight: 700; } /* Image tag */ #content .mabel-siwc-img-wrapper { margin-bottom: 30px !important; } .mb-siwc-popup { width: 250px !important; } .mb-siwc-popup:after { border-bottom-color: var(--color-dark) !important; } .mb-siwc-popup .siwc-inner-text { text-align: left !important; } .mb-siwc-popup h1 { margin-bottom: 15px !important; padding: 0 !important; font-size: 18px !important; line-height: 20px !important; border-bottom: none !important; } .mb-siwc-popup.siwc-no-thumb h1 { margin: -15px -15px 15px -15px !important; padding: 10px 15px !important; color: white !important; background: var(--color-dark); border-radius: 4px 4px 0 0; } .mb-siwc-popup h2 { margin-bottom: 20px !important; padding-bottom: 0 !important; font-size: 40px !important; color: var(--color-brown) !important; } .mb-siwc-popup .siwc-thumb-wrapper { width: 100% !important; height: 150px !important; border-radius: 4px 4px 0 0 !important; } /* Hero Image */ #content .hero_image { margin: 0 -50px 30px; } #content .hero_image img { width: 100%; height: auto; display: block; } /* Start and End date */ #content .single_start_end_date { margin-bottom: 30px; border: 2px solid var(--color-dark-blue); display: flex; border-radius: 2px; } #content .single_start_end_date .icon { width: 80px; border-right: 1px solid var(--color-dark-blue); display: flex; justify-content: center; align-items: center; } #content .single_start_end_date .icon img { width: auto; height: 30px; display: block; } #content .single_start_end_date .value { width: calc(100% - 80px); } #content .single_start_end_date .value div { padding: 5px 15px; } #content .single_start_end_date .value div:nth-child(2) { border-top: 1px solid var(--color-dark-blue); } /* Search Form */ #content form.aws-search-form { margin-bottom: 50px; display: flex; } #content form.aws-search-form .aws-wrapper { flex: 1; position: relative; } #content form.aws-search-form .aws-wrapper .aws-search-field { padding: 0 0 0 10px !important; font-size: 16px !important; border-radius: 5px 0 0 5px !important; } #content form.aws-search-form .aws-search-btn { width: 50px; height: 50px; background: var(--color-brown) url(images/icon_search_white.svg) no-repeat center; background-size: auto 22px;; border: none !important; border-radius: 0 5px 5px 0 !important; } #content form.aws-search-form .aws-search-btn:hover { background-color: var(--color-dark); } #content form.aws-search-form .aws-search-btn .aws-search-btn_icon { display: none !important; } .aws-search-result { margin-top: 5px !important; border-radius: 5px !important; } .aws-search-result .aws_result_title, .aws-search-result .aws_search_more a { color: var(--color-brown) !important; } /* Contact */ #content .contact_wrap { display: flex; } #content .contact_wrap .wrap_left { width: 50%; padding-right: 100px; } #content .contact_wrap .wrap_left strong.sec_font { font-size: 30px; line-height: 100%; display: block; } #content .contact_wrap .wrap_right { width: 50%; } /* ------------------- FILTER FORM ------------------- */ #filter-form { margin-bottom: 30px; padding: 20px; background: rgba(0 0 0 / 3%); border: 1px solid var(--color-silver); display: flex; gap: 20px; align-items: end; border-radius: 5px; } #filter-form > div { flex: 1; } #filter-form label { width: 100%; font-size: 14px; font-weight: 700; display: block; } #filter-form select { width: 100%; height: 40px; padding-left: 5px; border: 1px solid var(--color-silver); border-radius: 5px; } /* --------------------- EXPLODED VIEW --------------------- */ .exploded_view_wrap { border: 1px solid var(--color-silver); position: relative; z-index: 10; } .exploded_view_wrap img { width: 100%; height: auto; display: block; } .exploded_view_wrap .point { width: 40px; height: 40px; margin-left: -20px; margin-top: -20px; font-size: 13px; font-weight: 700; color: black; background: rgba(175 89 61 / 30%); display: flex; align-items: center; justify-content: center; position: absolute; z-index: 2; border-radius: 50%; cursor: pointer; animation: pulse 2.3s infinite; } .exploded_view_wrap .point:hover { color: white; background: var(--color-brown); } #tooltip { width: 250px; position: absolute; z-index: 10000; border-radius: 5px; visibility: hidden; opacity: 0; box-shadow: 0 10px 20px rgba(0 0 0 / 20%); } #tooltip:after { width: 0; height: 0; left: calc(50% - 10px); top: -20px; border: solid transparent; pointer-events: none; border-color: transparent; border-bottom-color: var(--color-dark); border-width: 10px; position: absolute; content: ''; } #tooltip.is_loading { padding: 20px; font-size: 16px; color: white !important; line-height: 20px !important; background: var(--color-dark); } #tooltip.is_active { visibility: visible; opacity: 100%; } #tooltip p.load_wrapper { margin-bottom: 0 !important; } #tooltip .tooltip_header { padding: 10px 15px; color: white; background: var(--color-dark); border-radius: 5px 5px 0 0; } #tooltip .tooltip_header h3 { margin-bottom: 0 !important; font-size: 14px !important; line-height: 120%; } #tooltip .tooltip_entry { padding: 15px; background: white; border-top: none; border-radius: 0 0 5px 5px; display: flex; } #tooltip .tooltip_entry .thumbnail { margin: -15px -15px 15px -15px; } #tooltip .tooltip_entry .thumbnail img { width: 100% !important; height: auto !important; display: block; } #tooltip .tooltip_entry .price { width: 100%; margin-bottom: 10px; font-size: 30px; } #tooltip .tooltip_entry .action_buttons { display: flex; } #tooltip .tooltip_entry .action_buttons .button { height: 50px; padding: 0 12px !important; font-size: 15px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: auto 20px; } #tooltip .tooltip_entry .action_buttons .button.loading { color: transparent !important; background-color: var(--color-teal) !important; background-image: url(images/icon_check_white.svg); } #tooltip .tooltip_entry .action_buttons .added_to_cart { display: none !important; } #tooltip .tooltip_entry .action_buttons .close_tooltip { width: 50px; height: 50px; margin-left: 10px; text-decoration: none !important; color: var(--color-dark) !important; background: var(--color-sand); border: 1px solid var(--color-tan); display: flex; align-items: center; justify-content: center; border-radius: 50%; } #tooltip .tooltip_entry .action_buttons .close_tooltip:hover { background: var(--color-tan); } @-webkit-keyframes pulse { 0% { box-shadow: 0 0 0 0px rgba(175 89 61 / 50%); } 60% { box-shadow: 0 0 0 10px rgba(175 89 61 / 0%); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0px rgba(175 89 61 / 50%); } 60% { box-shadow: 0 0 0 10px rgba(175 89 61 / 0%); } } /* ---------------- SIDEBAR ---------------- */ #sidebar { width: 300px; margin-left: 50px; } #sidebar .sidebar_inner { background: white; border: 1px solid var(--color-silver); overflow: auto; } #sidebar .close_sidebar_button_wrap { padding: 20px; border-bottom: 2px solid var(--color-silver); } #sidebar .close_sidebar_button_wrap .button { display: flex; } #sidebar .widget { padding: 30px 20px; border-bottom: 1px solid var(--color-silver); } #sidebar .widget:last-child { border-bottom: none; } #sidebar .widget .widget_title { margin-bottom: 10px; font-size: 30px; color: var(--color-brown); line-height: 100%; } #sidebar .widget .toggle-button { width: 100%; } /* List */ #sidebar ul { margin-bottom: 10px; margin-left: 0 !important; list-style: none !important; } #sidebar ul li a { font-size: 16px; color: black; line-height: 20px; display: inline-block; } #sidebar ul li a:hover { text-decoration: underline; } #sidebar ul li.chosen a, #sidebar ul li.current-cat a { font-weight: 700; } #sidebar ul li.has_gradient { position: relative; } #sidebar ul li.has_gradient:after { width: 100%; height: 200%; left: 0; bottom: 0; background: linear-gradient(to bottom, rgba(255 255 255 / 0%) 0%, rgba(255 255 255 / 100%) 100%); position: absolute; content: ''; pointer-events: none; } /* Price filter */ #sidebar .widget.widget_price_filter .price_slider_amount { margin-top: 10px; display: flex; } #sidebar .widget.widget_price_filter .price_slider_amount .price_label { width: 100%; order: 1; } #sidebar .widget.widget_price_filter .price_slider_amount .button { width: 100%; height: 50px; order: 2; } /* Is shop */ #sidebar.is_shop { width: 300px; margin-left: 0; margin-right: 50px; } /* --------------- FOOTER --------------- */ #footer { padding: 70px 0; color: var(--color-sand); background: var(--color-dark-brown); } #footer p { margin-bottom: 30px; line-height: 25px; } #footer p:last-child { margin-bottom: 0; } #footer .footer_wrap { display: flex; } #footer .wrap_left { width: 40%; } /* Logo */ #footer .wrap_left.logo { display: flex; align-content: space-between; } #footer .wrap_left.logo .logo { display: inline-flex; } #footer .wrap_left.logo .logo img { width: auto; height: 120px; display: block; } #footer .wrap_left.logo .copyright { width: 100%; font-size: 14px; } /* Contact */ #footer .wrap_left.contact { padding-right: 100px; display: flex; align-items: space-between; } #footer .wrap_left.contact strong { font-size: 25px; line-height: 100%; display: block; } /* Pages */ #footer .wrap_left.pages { width: 20%; } #footer .wrap_left.pages ul { list-style: none; } #footer .wrap_left.pages ul li { margin-bottom: 10px; } #footer .wrap_left.pages ul li a { font-size: 25px; color: var(--color-sand); line-height: 100%; } #footer .wrap_left.pages ul li a:hover { color: white; text-decoration: underline; text-decoration-thickness: 2px; } /* ----------------- SCROLL UP ----------------- */ #scroll_up { width: 60px; height: 60px; right: 70px; bottom: 50px; text-indent: -9999px; background: var(--color-brown) url(images/icon_arrow_up.svg) no-repeat center; background-size: auto 30px; position: fixed; z-index: 99 !important; border-radius: 3px; } #scroll_up:hover { background-color: var(--color-dark); } /* ------------- FORM ------------- */ .form-row { width: 100%; margin-bottom: 20px; } .form-row-first, .form-row-last { width: calc(50% - 20px); } .form-row-wide, .form-row.address-field { width: 100%; float: none; } .form-row label { margin-bottom: 5px; font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--color-dark); line-height: 100%; display: block; } .form-row br { display: none; } .form-row .required { color: red; } .form-row select, .form-row textarea, .form-row input[type=tel], .form-row input[type=text], .form-row input[type=email], .form-row input[type=password] { width: 100%; height: 50px; padding-left: 10px; background: white; border: 1px solid var(--color-tan); border-radius: 5px; } .form-row select:focus, .form-row textarea:focus, .form-row input[type=tel]:focus, .form-row input[type=text]:focus, .form-row input[type=email]:focus, .form-row input[type=password]:focus { border-color: white; outline: 3px solid var(--color-brown); outline-offset: 0px; border-radius: 2px; } .form-row textarea { height: 150px; padding: 10px; resize: vertical; } /* Password strength */ .form-row .woocommerce-password-strength { padding: 10px; margin-top: 20px; } .form-row .woocommerce-password-strength.bad { color: white; background: #fef6f6; } /* Fieldset */ fieldset { margin-top: 50px; } fieldset legend { margin-bottom: 30px; font-size: 30px; font-weight: 900; color: #162840; } fieldset .form-row { margin-bottom: 10px !important; } fieldset .form-row label { width: 100%; display: block; float: none; } fieldset .form-row input[type=password] { width: 100%; } /* Custom classes */ .select2-choice { height: 50px; line-height: 50px; } .select2-selection--single { height: 40px !important; border: 1px solid var(--color-silver) !important; border-radius: 0 !important; } .select2-selection__rendered { height: 40px !important; line-height: 38px !important; } /* WPCF7 */ .wpcf7-form { padding: 30px; background: rgba(0 0 0 / 2%); border: 1px solid var(--color-silver); display: flex; justify-content: space-between; border-radius: 5px; } .wpcf7-form p:not(p.intro) { margin-bottom: 0 !important; } .wpcf7-form input[type="checkbox"] { width: 20px; height: 20px; margin: -4px 4px 0 0 !important; padding: 0 !important; text-align: center !important; background-color: #fff; border: 1px solid #d9d9d9; clear: none; cursor: pointer; display: inline-block !important; line-height: 0; outline: 0; vertical-align: middle !important; -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: .05s border-color ease-in-out; transition: .05s border-color ease-in-out; } .wpcf7-form input[type="checkbox"]:checked:before { width: 10px; height: 10px; left: 4px; top: 4px; background: var(--color-brown); position: relative; display: block; text-align: center; content: ''; } /* ------------------ KEYFRAMES ------------------ */ @-webkit-keyframes bounceRight { 0%,20%,40% { -webkit-transform: translateX(0); transform: translateX(0); } 10% { -webkit-transform: translateX(1.5625rem); transform: translateX(1.5625rem); } 30% { -webkit-transform: translateX(1.25rem); transform: translateX(1.25rem);} } @keyframes bounceRight { 0%,20%,40% { -webkit-transform:translateX(0); transform: translateX(0); } 10% { -webkit-transform: translateX(1.5625rem); transform: translateX(1.5625rem); } 30% { -webkit-transform: translateX(1.25rem); transform: translateX(1.25rem); } } /* ----------- RWD ----------- */ @media only screen and (max-width: 1600px) { /* DEFAULT */ body { padding: 0; } } @media only screen and (max-width: 1440px) { /* DEFAULT */ .p_l_20 { padding-left: 20px; } .p_r_20 { padding-right: 20px; } /* HEADER: Hgroup */ #header .hgroup .hgroup_top:after { display: none; } #header .hgroup .hgroup_bottom { padding-right: 20px; } /* SLIDER */ #slider { height: auto; } #slider .item:before { padding-top: 50%; display: block; content: ''; } #slider .item .inner h2 { padding-right: 20%; } /* CONTENT: Contact */ #content .contact_wrap .wrap_left { padding-left: 20px; } #content .contact_wrap .wrap_right { padding-right: 20px; } /* SCROLL UP */ #scroll_up { right: 20px; bottom: 20px; } } @media only screen and (max-width: 1280px) { /* DISPLAY: None */ .hide_in_1280 { display: none !important; } /* DISPLAY: Block */ .show_in_1280 { display: block !important; } .show_in_1280_flex { display: flex !important; } /* HEADER */ #header { height: 100px; } /* HEADER: Logo */ #header .logo { height: 80px; } #header .logo img { width: 100px !important; height: 80px !important; } /* HEADER: Menu */ #header .hgroup .hgroup_bottom { height: 100%; } #header .hgroup .hgroup_bottom ul li { margin-left: 30px; position: relative; } #header .hgroup .hgroup_bottom ul li a { font-size: 18px; } /* NEWS */ .news_wrap { margin-left: -10px; margin-right: -10px; } .news_wrap .news { width: calc(33.33333333333% - 20px); margin: 50px 10px 0; } /* CONTENT */ #content { width: 100%; } /* CONTENT: Illustration */ #content .illustration_image .image_wrap.has_releated_spare_parts { width: 100%; } /* SIDEBAR */ #sidebar { width: 100% !important; height: 100%; left: 0; top: 0; margin: 0 !important; background: rgba(0 0 0 / 10%) !important; opacity: 0; visibility: hidden; position: fixed; z-index: 100; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } #sidebar .sidebar_inner { width: 300px; height: 100%; top: 0; left: -100%; border: none; border-right: 1px solid var(--color-silver); position: absolute; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } #sidebar .widget { padding: 30px 20px !important; } body.sidebar_opened #sidebar { opacity: 100%; visibility: visible; } body.sidebar_opened #sidebar .sidebar_inner { left: 0; } /* FOOTER */ #footer { padding: 100px 0; } } @media only screen and (max-width: 960px) { /* DISPLAY: None */ .hide_in_960 { display: none !important; } /* DISPLAY: Block */ .show_in_960 { display: block !important; } .show_in_960_flex { display: flex !important; } /* SLIDER */ #slider .item:before { padding-top: 60%; } #slider .item .inner { padding-bottom: 0; align-items: center; } #slider .item .inner .action_button { margin-top: 30px; } /* ABOUT US */ #aboutus { padding: 50px 0; } #aboutus h1 { margin-bottom: 30px; } /* ABOUT US: Boxes */ #boxes .box_wrap { margin-bottom: 30px; } #boxes .box_wrap .wrap_left { width: 100%; padding: 30px 20px; } #boxes .box_wrap .wrap_left h2 { font-size: 60px; } #boxes .box_wrap .wrap_right { width: 100%; } #boxes .box_wrap .wrap_right:before { padding-top: 50%; } #boxes .box_wrap:nth-child(2n) .wrap_left { order: 1; } #boxes .box_wrap:nth-child(2n) .wrap_right { order: 2; } .news_wrap .news { width: calc(50% - 20px); } .news_wrap .news:nth-child(3) { margin-top: 50px; } body.home .news_wrap .news:nth-child(3) { display: none !important; } /* NEWS */ #news { padding: 50px 0; } /* FLEXIBLE CONTENT: Text Content */ .flexible_content__text_content { margin: 30px 0; } /* FLEXIBLE CONTENT: Releated vehicles */ .flexible_content__related_vehicles { margin: 30px 0; } /* CONTENT */ #container { padding-top: 30px; padding-bottom: 30px; } #content ul.list { -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 40px; column-gap: 40px; } /* CONTENT: Single gallery */ #content ul.single_gallery li { width: calc(33.3333333333% - 20px); } #content ul.single_gallery li:nth-child(4) { margin-top: 20px; } /* CONTENT: Vehicle data */ #content .vehicle_data_wrap .thumbnail { width: 100%; margin-bottom: 30px; } #content .vehicle_data_wrap .vehicle_metas { width: 100%; } /* CONTENT: Meta */ #content .post_metas { display: block; } #content .post_metas .wrap_left { width: 100%; } #content .post_metas .wrap_right .share_this_post { width: max-content; margin: 30px auto 0; } /* CONTENT: Hero Image */ #content .hero_image { margin: 0 0 30px; } /* CONTENT: Contact */ #content .contact_wrap .wrap_left { width: 100%; margin-bottom: 30px; } #content .contact_wrap .wrap_right { width: 100%; padding-left: 20px; } /* FILTER FORM */ #filter-form > div { margin-right: 0; flex: auto; } #filter-form > div:nth-child(1) { margin-right: 5px; } #filter-form > div:nth-child(2) { margin-left: 5px; } #filter-form > div:nth-child(3) { margin-right: 10px; } /* FOOTER */ #footer { padding: 50px 0; } #footer .wrap_left { width: 50% !important; } #footer .wrap_left.logo { width: 100% !important; margin-top: 30px; order: 3; } } @media only screen and (max-width: 768px) { /* DISPLAY: None */ .hide_in_768 { display: none !important; } /* HEADER: Language chooser */ #header .header_bottom .qtranxs_widget { display: none; } /* SLIDER */ #slider .item:before { padding-top: 70%; } #slider .item .inner h2 { font-size: 8vw; } #aboutus .aboutus_wrap .content { -webkit-column-count: 1; column-count: 1; -webkit-column-gap: 0; column-gap: 0; } /* NEWS */ #news .title { font-size: 50px; } .news_wrap .news h3 a { font-size: 20px; } /* FLEXIBLE CONTENT: Text Content */ .flexible_content__text_content .has_column { -webkit-column-count: 1; column-count: 1; -webkit-column-gap: 0; column-gap: 0; } /* FLEXIBLE CONTENT: Images */ .flexible_content__images .gallery_wrap .image { width: 100%; flex-grow: inherit; flex-basis: auto; } .flexible_content__images .gallery_wrap .image:before { padding-top: 50%; } #content ul.list { -webkit-column-count: 1; column-count: 1; -webkit-column-gap: 0; column-gap: 0; } /* CONTENT: Single gallery */ #content ul.single_gallery li { width: calc(50% - 20px); } #content ul.single_gallery li:nth-child(3) { margin-top: 20px; } /* EXPLODED VIEW */ .exploded_view_wrap .point { width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; font-size: 0; } .exploded_view_wrap .point:after { width: 10px; height: 10px; left: 50%; top: 50%; background: white; position: absolute; content: ''; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* FILTER FORM */ #filter-form > div { width: 100%; margin: 0 0 10px !important; flex: none; } /* FOOTER */ #footer .wrap_left { width: 100% !important; } #footer .wrap_left.contact { order: 2; } #footer .wrap_left.pages { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 5px solid rgba(255 255 255 / 20%); order: 1; } } @media only screen and (max-width: 640px) { /* SLIDER */ #slider .item:before { padding-top: 80%; } #slider .item .inner h2 { font-size: 10vw; } /* NEWS */ .news_wrap { margin-left: 0; margin-right: 0; } .news_wrap .news { width: 100%; margin: 50px 0 0; } .news_wrap .news:nth-child(2) { margin-top: 50px; } /* FORM */ .form-row-first, .form-row-last { width: 100%; } } @media only screen and (max-width: 480px) { /* DISPLAY: None */ .hide_in_480 { display: none !important; } /* RWD NAV */ #rwd_menu .rwd_menu_wrap { width: 100%; } #rwd_menu .rwd_menu_wrap .rwd_menu_section { padding-left: 30px; padding-right: 30px; } #rwd_menu .rwd_menu_wrap .rwd_menu_section.search { padding: 20px 30px; } #rwd_menu .rwd_menu_wrap .rwd_menu_section.useful_info { padding-top: 30px; padding-bottom: 30px; } /* ABOUT US: Boxes */ #boxes .box_wrap .wrap_left h2 { font-size: 50px; } /* CONTENT */ #container { padding-top: 20px; padding-bottom: 20px; } /* FORM */ form .button { width: 100%; } }