Submit
Path:
~
/
/
proc
/
self
/
root
/
proc
/
self
/
root
/
proc
/
thread-self
/
root
/
home
/
getwphos
/
www
/
jewel
/
honda
/
assets
/
dist
/
css
/
File Content:
style.css
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap"); *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-weight: 400; font-style: normal; font-size: 12px; line-height: 1.5; word-wrap: break-word; } h1 { margin: 0 0 18px; margin-bottom: 18px; color: #292c32; font-size: 52px; line-height: 1.308em; font-weight: 700; } h2 { margin-top: 0; margin-bottom: 24px; color: #292c32; font-size: 38px; line-height: 1.316em; font-weight: 700; } h3 { margin-top: 0; margin-bottom: 12px; color: #292c32; font-size: 24px; line-height: 1.375em; font-weight: 700; } p { margin-bottom: 18px; font-size: 19px; line-height: 29px; } ul { list-style: none; margin: 0; padding: 0; } a { background-color: transparent; -webkit-transition: color 0.3s; transition: color 0.3s; color: #111; } a { text-decoration: none; color: #ffffff; } a:hover { text-decoration: none; } img { max-width: 100%; } /* -------- Utilites -----*/ .section { padding-top: 120px; padding-bottom: 120px; } .section.bg-secondary-1 { padding-top: 90px; padding-bottom: 90px; } .bg-secondary-1 { background-color: #faf6f1; } .button-primary { display: inline-block; padding: 24px 44px; border-radius: 80px; background-color: #111; -webkit-transition: color 0.3s, box-shadow 0.3s, background-color 0.3s, -webkit-transform 0.3s; transition: color 0.3s, transform 0.3s, box-shadow 0.3s, background-color 0.3s, -webkit-transform 0.3s; font-family: Inter, sans-serif; color: #fff; font-size: 17px; line-height: 1.111em; font-weight: 600; text-align: center; } .button-primary:hover { background-color: #6f7278; box-shadow: 0 10px 22px 0 rgba(41, 44, 50, 0.1); -webkit-transform: translate(0, -4px); -ms-transform: translate(0, -4px); transform: translate(0, -4px); color: #fff; } .button-primary.buttons-button-2:hover { background-color: #db2777; color: #ffffff; outline: 0; } .button-secondary { display: inline-block; padding: 24px 44px; border: 1px solid #292c32; border-radius: 80px; background-color: transparent; -webkit-transition: border-color 0.3s, color 0.3s, -webkit-transform 0.3s; transition: border-color 0.3s, color 0.3s, transform 0.3s, -webkit-transform 0.3s; font-family: Inter, sans-serif; color: #111; font-size: 17px; line-height: 1.111em; font-weight: 500; text-align: center; } .button-secondary.buttons-button-3:hover { background-color: #2563eb; } /* 1 ------------- Header ----------------*/ header { border-top: 10px solid #ed1a29; background: #fff; height: 94px; border-bottom: 1px solid #f1f1f1; position: relative; z-index: 101; } header { position: relative; top: 0; left: 0; right: 0; max-height: 100%; min-height: 84px; height: auto; display: flex; flex-direction: column; z-index: 9999999999; } header.open .top-nav { box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.06); height: 100%; position: relative; z-index: 1; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } header.open .menu-toggle > .t::before { content: "Close"; } header .logo { padding: 0px 20px; } header .logo, header .menu-toggle { border-right: 1px solid #eaeaea; } header .logo > img { margin-top: 20px; } header .logo, header .menu-toggle, header .top-menu-right { float: left; height: 84px; margin: 0; } header .menu-toggle { padding: 0 25px; color: #222; cursor: pointer; position: relative; overflow: hidden; } header .menu-toggle > span { display: block; height: 3px; background: #ed1a29; margin-bottom: 5px; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } header .menu-toggle span.l1 { margin-top: 25px; } header .menu-toggle span.l2 { width: 70%; } header .menu-toggle span.l3 { width: 50%; } .open .menu-toggle > span.l1 { -webkit-transform: rotate(45deg) translate(6px, 5px); -moz-transform: rotate(45deg) translate(6px, 5px); -ms-transform: rotate(45deg) translate(6px, 5px); -o-transform: rotate(45deg) translate(6px, 5px); transform: rotate(45deg) translate(6px, 5px); } .open .menu-toggle > span.l2 { width: 100%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .open .menu-toggle > span.l3 { opacity: 0; } header .menu-toggle > .t::before { content: "Menu"; } header .menu-toggle:before { background-color: #f4f4f4; } header .menu-toggle::before { content: ""; opacity: 0; display: block; width: 17px; height: 17px; background: #e8e8e8; position: absolute; left: 0; right: 0; margin: 0 auto; bottom: -10px; top: auto; z-index: 1; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .open .menu-toggle:before { opacity: 1; } header a.logo:hover { color: #ffffff; } .nav-list { display: flex; z-index: 1250; transition: 0.5s; float: left; display: block; } header .nav-list > li { display: inline-block; } header .nav-list > li > a { display: block; padding: 27px 20px; color: #222222; font-size: 18px; text-decoration: none; font-weight: normal; } .nav-list li a { color: #111; padding: 0; } @media only screen and (max-width: 375px) { .menu-toggle { padding-left: 15px; padding-right: 15px; } } @media only screen and (max-width: 600px) { header .logo { padding: 0px 20px; } .nav-list { display: none; } .nav-list li { padding: 15px 0; } .top-header-right a { display: none; } .top-header-right { display: none; } /* .nav { justify-content: space-between; } */ /* .bSocial { display: none; } */ .right-menu .top-search { background: #ffffff !important; color: #222; border-left: 1px solid #f1f1f1; } header .right-menu .top-finder-btn { display: none !important; } } @media only screen and (max-width: 767px) { header .right-menu .top-finder-btn { display: none; } } @media only screen and (max-width: 900px) { .nav-list { display: none; } .nav-list li { padding: 15px 0; } .nav-list li a { color: #fff; padding: 0; font-size: 38px; line-height: 40px; } .top-header-right a { display: none; } .top-header-right { display: none; } } /*------------- Top Menu Right ----------------*/ .top-menu-right { display: flex; align-content: center; align-items: center; padding: 0 20px; } header .top-menu-right > li > a { display: block; padding: 27px 20px; color: #222222; font-size: 18px; text-decoration: none; font-weight: normal; } header .top-menu-right > li:hover > a, header .top-menu-right > li.active > a { color: #ed1a29; font-weight: bold; } header .right-menu { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; float: right; } header .right-menu .mt-lang { color: #bdbdbd; font-size: 16px; padding: 5px 15px; padding-top: 28px; } header .right-menu .mt-lang { padding-top: 0; padding-bottom: 0; } header .right-menu .mt-lang > a { text-decoration: none; color: #bdbdbd; } header .right-menu .mt-lang > a.active { color: #ed1a29; font-weight: bold; } /*----- Right Menu -----*/ .top-social { margin-right: 15px; position: relative; } .top-social .bSocial .btnSocial { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; border: 1px solid #f1f1f1; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08); border-radius: 4px; padding: 9px 20px; cursor: pointer; } .top-social .btnSocial { display: flex; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; border: 1px solid #f1f1f1; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08); border-radius: 4px; padding: 9px 20px; cursor: pointer; } .btnSocial i { width: 24px; height: 24px; margin-right: 5px; background: #ed1a29; display: block; position: relative; overflow: hidden; color: #fff; text-align: center; line-height: 2; border-radius: 50px; } header .right-menu .top-finder-btn { background: #ed1a29; height: 84px; padding: 0 35px; position: relative; overflow: hidden; } header .right-menu .top-finder-btn > img { margin-top: 25px; position: relative; z-index: 1; } header .right-menu .top-finder-btn::before { content: ""; width: 72px; height: 50px; background-image: url("../honda/images/ico-grey.png"); background-position: 0 0; background-repeat: no-repeat; position: absolute; z-index: 0; left: -23px; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } header .right-menu .top-finder-btn:hover::before { left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media only screen and (max-width: 767px) { .bSocialMainMobile { width: 100%; } } @media only screen and (max-width: 1023px) { .top-social { display: none; } } /* --------- header-search ---------- */ header .right-menu .top-search { height: 84px; padding: 0 20px; text-align: center; cursor: pointer; background: #dedede; } header .right-menu .top-search.header-search-trigger svg { margin-top: 30px; } .header-search { display: block; text-align: center; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; position: fixed; top: 94px; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: 900; } .header-search-form { width: 100%; position: absolute; top: 8%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .search-field { background-color: #fff; display: block; border: none; padding: 20px 30px; font-size: 20px; width: calc(100% - 0px); outline: none; } .header-search-form input[type="search"]::-webkit-input-placeholder { color: #ffffff; text-align: center !important; opacity: 1; } .header-search-form input[type="search"]:-moz-placeholder { color: #ffffff; text-align: center !important; opacity: 1; } .header-search-form input[type="search"]::-moz-placeholder { color: #ffffff; text-align: center !important; opacity: 1; } .header-search-form input[type="search"]:-ms-input-placeholder { color: #ffffff; text-align: center !important; opacity: 1; } .header-search-form input[type="search"].placeholder { color: #ffffff; text-align: center !important; opacity: 1; } .header-search-form input[type="search"]:focus { outline: none; } .header-search-form input[type="submit"] { display: none; } .search-wrap { width: 50%; margin: auto; margin-top: auto; position: relative; } body.search-is-visible { overflow: hidden; } .search-is-visible .header-search { opacity: 1; visibility: visible; } .header-overlay-close { position: absolute; display: block; width: 45px; height: 45px; top: 10px; right: 0; margin-left: -23px; font: 0/0 a; text-shadow: none; color: transparent; } .header-overlay-close::before, .header-overlay-close::after { content: ""; position: absolute; display: inline-block; width: 2px; height: 20px; top: 12px; left: 22px; background-color: #ed1a29; } .header-overlay-close::after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .header-overlay-close::before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } @media only screen and (max-width: 360px) { .search-field { font-size: 16px; } } @media only screen and (max-width: 1023px) { .header-search-form { top: 8%; } .search-wrap { width: 80%; margin: auto; background-color: #fff; } } /* ------------- sub menu ------------*/ .bSocialMainMobile { display: none; } /* .mt-products { display: none; } */ header .mt-submenu { position: absolute; top: 100%; background: #f9f9f9; width: 100%; height: 0; opacity: 0; overflow: hidden; transition: all 0.25s ease; } .open .mt-submenu, .openproducts .mt-submenu { height: auto; opacity: 1; } .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } header .mt-submenu ul.mt-menulists { list-style: none; padding: 30px 0; margin: 0; width: 528px; background: #fff; border-bottom: 7px solid #f9f9f9; } header .mt-submenu ul.mt-menulists > li { position: relative; } .mt-mobile_show { display: none; } header .mt-submenu ul.mt-menulists > li > a { display: block; font-size: 28px; padding: 15px 100px; text-decoration: none; color: #222; padding-right: 30px; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } header .mt-submenu ul.mt-menulists > li > a > svg { float: right; margin-top: 10px; transition: 0.3s; } header .mt-submenu ul.mt-menulists > li.sub:not(:hover) > a > svg > path { stroke: #222 !important; } header .mt-submenu ul.mt-menulists > li > ul { list-style: none; padding: 0; margin: 0; } header .mt-submenu ul.mt-menulists > li > ul { position: absolute; left: 100%; top: 0; display: none; } header .mt-submenu ul.mt-menulists > li > ul > li > a { font-size: 26px; padding: 10px 80px; text-decoration: none; color: rgba(34, 34, 34, 0.75); white-space: nowrap; display: block; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } header .mt-submenu ul.mt-menulists > li > ul > li:hover > a { color: #ed1a29; } header .mt-submenu ul.mt-menulists > li:hover > a { font-weight: bold; color: #ed1a29; background: linear-gradient( 90deg, #f2f2f2 0%, rgba(242, 242, 242, 0) 103.79% ); text-indent: 30px; } @media only screen and (max-width: 767px) { header .mt-submenu ul.mt-menulists { width: auto; } } @media only screen and (max-width: 1023x) { header .mt-submenu ul.mt-menulists > li > a { padding: 15px 25px; } } /* header .mt-submenu ul.mt-menulists > li.open > ul, header .mt-submenu ul.mt-menulists > li:hover > ul { display: block; } */ .bSocialMainMobile { width: 50%; } .bSocialMainMobile .bSocial .social > div { overflow: hidden; margin-top: 1px; } .bSocialMainMobile .bSocial .btnSocial { display: -ms-flexbox; display: flex; -ms-flex-pack: end; justify-content: flex-end; background-color: #fff; padding: 16px; } .bSocialMainMobile .bSocial .social { text-align: center; width: 100%; box-sizing: border-box; transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -ms-transition: all 0.25s ease; } .bSocialMainMobile .bSocial .social .btnAccord { background: #fff; padding: 8px 0; font-size: 16px; position: relative; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08); cursor: pointer; } .bSocialMainMobile .bSocial .social .btnAccord i.ico-arrow { position: absolute; right: 9px; top: 50%; transform: translateY(-50%) rotate(180deg); -webkit-transform: translateY(-50%) rotate(180deg); -moz-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); -o-transform: translateY(-50%) rotate(180deg); transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -ms-transition: all 0.25s ease; } .bSocialMainMobile .bSocial .social .accordContent { background: #f9f9f9; padding: 20px; display: none; } .bSocialMainMobile .bSocial .social .accordContent a { display: inline-block; margin: 0 8px; background-color: #ed1a29; border-radius: 100px; padding: 5px 8px; } .accordContent a i { width: 42px; height: 42px; background-position: -24px 0; } @media only screen and (max-width: 600px) { .bSocialMainMobile { display: block; } .bSocialMainMobile { width: 100%; } } @media only screen and (max-width: 767px) { .mt-submenu .mt-menulists ul > li > a { display: none; } header .mt-submenu ul.mt-menulists > li.open > ul, header .mt-submenu ul.mt-menulists > li:hover > ul { display: none; } header .mt-submenu ul.mt-menulists > li > ul { position: static; margin: 0 50px; } header .mt-submenu ul.mt-menulists > li.active > a > svg { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); transition: 0.3s; } } @media only screen and (max-width: 1023px) { header .mt-submenu ul.mt-menulists > li > a { font-size: 20px; padding: 15px 20px; padding-right: 30px; } header .mt-submenu ul.mt-menulists > li > ul > li > a { font-size: 18px; padding: 10px 20px; } } /* ---------------- Products ------------*/ .mt-catalogs > .mt-pcate, .mt-products > .mt-pcate { background: #fff; border-top: 1px solid #f1f1f1; padding: 0 80px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.06); overflow: hidden; position: relative; z-index: 1; } .mt-catalogs > .mt-pcate ul.mt-catelists, .mt-products > .mt-pcate ul.mt-catelists { list-style: none; padding: 0; margin: 0; float: left; } .mt-catalogs > .mt-pcate ul.mt-catelists > li, .mt-products > .mt-pcate ul.mt-catelists > li { display: inline-block; position: relative; } .mt-catalogs > .mt-pcate ul.mt-catelists > li > a, .mt-products > .mt-pcate ul.mt-catelists > li > a { display: block; padding: 25px 25px; font-size: 18px; text-decoration: none; color: #7e7e7e; } .mt-catalogs > .mt-pcate ul.mt-catelists > li:hover > a, .mt-catalogs > .mt-pcate ul.mt-catelists > li.active > a, .mt-products > .mt-pcate ul.mt-catelists > li:hover > a, .mt-products > .mt-pcate ul.mt-catelists > li.active > a { color: #ed1a29; font-weight: bold; } .mt-products > .mt-pcate a.mt-allmodel { float: right; display: block; color: #ed1a29; text-decoration: none; font-size: 18px; padding-top: 25px; } .mt-products > .mt-pcate a.mt-allmodel svg { margin-right: 5px; } .mt-products .mt-h-productlists { padding: 50px 100px; min-height: 500px; } .mt-products .mt-h-productlists > ul > li { float: left; text-align: center; width: 18%; margin-bottom: 20px; padding: 1%; } .mt-products .mt-h-productlists > ul > li a { text-decoration: none; display: block; position: relative; } .mt-products .mt-h-productlists > ul > li a img.mt-new { position: absolute; top: 0; left: 0; z-index: 1; } .mt-products .mt-h-productlists > ul > li a .mt-itempro { max-width: 100%; height: 185px; overflow: hidden; } .mt-products .mt-h-productlists > ul > li a .mt-itempro > img { height: 100%; width: 100%; object-fit: contain; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .mt-products .mt-h-productlists > ul > li .name { font-size: 20px; color: #222; padding-top: 15px; padding-bottom: 20px; height: 50px; } .slogan { font-size: 16px; color: #828282; font-family: ap_hondalight; } .mt-catalogs > .mt-pcate ul.mt-catelists > li.active::before, .mt-products > .mt-pcate ul.mt-catelists > li.active::before, header .mt-menu::before { content: ""; opacity: 0; display: block; width: 17px; height: 17px; background: #e8e8e8; position: absolute; left: 0; right: 0; margin: 0 auto; bottom: -10px; top: auto; z-index: 1; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } header .mt-products > .mt-pcate ul.mt-catelists > li.active::before { background-color: #eee; } .mt-products { background: #f9f9f9; } header.openproducts .mt-products { display: block; } .mt-products { display: none; } .mt-products.hidden-menu { display: none; } .openproducts #btnShowProducts { color: #ed1a29 !important; font-weight: bold !important; } .openproducts .mt-products { display: block; } .openproducts .mt-submenu ul.mt-menulists { display: none; } header .mt-submenu { /* position: initial; */ overflow-y: auto; } /*---------------*/ .mt-catelists { display: flex; } .icon-tab { text-align: center; cursor: pointer; } .icon-tab span.glyphicon { display: block; font-size: 35px; color: #8d98b8; margin: 0px auto; line-height: 65px; transition-duration: 0.25s; } .icon-tab span.glyphicon::before { padding: 2px 6.5px; border-radius: 80%; } .icon-tab.active span.glyphicon { color: white; margin-bottom: 10px; } .icon-tab.active span.glyphicon::before { padding: 15px 19.5px; border-radius: 100%; transition-duration: 0.4s; } .icon-tab.active span.glyphicon::before { background: linear-gradient(to bottom right, #24c6dc, #514a9d); } .icon-label { color: #b3b3b3; font-size: 16px; transition-duration: 0.35s; } .icon-tab.active .icon-label, .icon-tab:hover .icon-label { color: black; } .icon-tab:hover span.glyphicon { margin-bottom: 10px; } @media (max-width: 767px) { .icon-tab span { display: inline !important; vertical-align: middle; } .icon-tab.active span.glyphicon { padding-right: 10px; } .icon-tab:hover span.glyphicon { padding-right: 10px; transition-duration: 0.25s; } } /* ---------------- All Products ------------*/ .mt-pd-menu .mt-products { display: block; } .mt-catalogs > .mt-pcate, .mt-products > .mt-pcate { background: #fff; border-top: 1px solid #f1f1f1; padding: 0 80px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.06); overflow: hidden; position: relative; z-index: 1; } .mt-pd-menu .mt-products > .mt-pcate { background: #222; } .mt-catalogs > .mt-pcate ul.mt-catelists, .mt-products > .mt-pcate ul.mt-catelists { list-style: none; padding: 0; margin: 0; float: left; } .mt-catalogs > .mt-pcate ul.mt-catelists > li, .mt-products > .mt-pcate ul.mt-catelists > li { display: inline-block; position: relative; } .mt-pd-menu .mt-products > .mt-pcate ul.mt-catelists > li > a { padding-top: 15px; padding-bottom: 15px; } .mt-pd-menu .mt-products > .mt-pcate a.mt-allmodel, .mt-pd-menu .mt-products > .mt-pcate ul.mt-catelists > li:hover > a, .mt-pd-menu .mt-products > .mt-pcate ul.mt-catelists > li.active > a { color: #fff; } .mt-catalogs > .mt-pcate ul.mt-catelists > li > a, .mt-products > .mt-pcate ul.mt-catelists > li > a { display: block; padding: 25px 25px; font-size: 18px; text-decoration: none; color: #7e7e7e; } .mt-catalogs > .mt-pcate ul.mt-catelists > li.active::before, .mt-products > .mt-pcate ul.mt-catelists > li.active::before, header .mt-menu::before { content: ""; opacity: 0; display: block; width: 17px; height: 17px; background: #e8e8e8; position: absolute; left: 0; right: 0; margin: 0 auto; bottom: -10px; top: auto; z-index: 1; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .mt-pd-menu .mt-products > .mt-pcate ul.mt-catelists > li.active::before { background: #f4f4f4; } .mt-catalogs > .mt-pcate ul.mt-catelists > li.active::before, .mt-products > .mt-pcate ul.mt-catelists > li.active::before { opacity: 1; } .mt-products > .mt-pcate a.mt-allmodel { float: right; display: block; color: #ed1a29; text-decoration: none; font-size: 18px; padding-top: 25px; } .mt-pd-menu .mt-products > .mt-pcate a.mt-allmodel, .mt-pd-menu .mt-products > .mt-pcate ul.mt-catelists > li:hover > a, .mt-pd-menu .mt-products > .mt-pcate ul.mt-catelists > li.active > a { color: #fff; } .mt-pd-menu .mt-products > .mt-pcate a.mt-allmodel { padding-top: 15px; } .mt-products > .mt-pcate a.mt-allmodel svg { margin-right: 5px; } .mt-catalogs .mt-cateselected, .mt-products > .mt-pcate .mt-cateselected { display: none; } .mt-pd-menu .mt-products .mt-h-productlists { min-height: auto; padding: 15px; } .mt-pd-menu .mt-product-cateslide { padding-left: 40px; padding-right: 40px; } .mt-pd-menu .mt-product-cateslide a { display: block; color: #222; text-decoration: none; padding: 0 20px; } .mt-pd-menu .mt-product-cateslide a .mt-itempro { width: 128px; height: 68px; text-align: center; margin: auto; } .mt-pd-menu .mt-product-cateslide a .mt-itempro img { width: 100%; height: 100%; object-fit: contain; margin: auto; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .mt-pd-menu .mt-product-cateslide a h4 { text-align: center; font-size: 16px; padding-top: 10px; padding-bottom: 5px; max-width: 200px; color: #222222; margin: 0 auto; } .mt-pd-menu .mt-product-cateslide a .mt-new { display: none; } .slick-next, .slick-prev { height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: 0 0; color: transparent; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); border: none; outline: 0; } .mt-pd-menu .mt-product-cateslide .slick-prev::before, .mt-pd-menu .mt-product-cateslide .slick-next::before { color: #222; } header .mt-subfooter { background: #fff; border-top: 2px solid #f9f9f9; border-bottom: 2px solid #f9f9f9; padding: 20px 100px; position: relative; display: flex; justify-content: space-between; align-items: center; align-content: center; } header .mt-subfooter .btn { margin-right: 20px; margin-top: 5px; padding-top: 10px; } header .mt-subfooter::before { content: ""; width: 10px; background: #ed1a29; position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform: skew(55deg); -moz-transform: skew(55deg); -ms-transform: skew(55deg); -o-transform: skew(55deg); transform: skew(55deg); } header .mt-subfooter::after { content: ""; height: 8px; background: #fff; position: absolute; z-index: 1; top: -7px; left: 0; width: calc(50% - 77px); -webkit-transform: skew(55deg); -moz-transform: skew(55deg); -ms-transform: skew(55deg); -o-transform: skew(55deg); transform: skew(55deg); } @media only screen and (max-width: 1023px) { .mt-pd-menu .mt-products { padding-bottom: 15px; } .mt-catalogs > .mt-pcate, .mt-products > .mt-pcate { padding: 0; } .mt-products > .mt-pcate .mt-cateselected { display: block; float: left; padding: 10px 15px; } .mt-catalogs .mt-cateselected select, .mt-shopping .mt-shopbox .mt-scateselect select, .mt-products > .mt-pcate .mt-cateselected select { font-size: 16px; padding: 5px 10px; color: #ed1a29; border: none; font-family: ap_hondabold; } .mt-pd-menu .mt-products > .mt-pcate .mt-cateselected select { color: #fff; background: #222222; } .mt-catalogs > .mt-pcate ul.mt-catelists, .mt-products > .mt-pcate ul.mt-catelists { display: none; } .mt-products > .mt-pcate a.mt-allmodel { padding-right: 10px; } .mt-products > .mt-pcate a.mt-allmodel { font-size: 16px; padding-top: 15px; } } /* ---------------- Hero ------------*/ .mt-hero { position: relative; height: 770px; overflow: hidden; margin-bottom: 100px; } .mt-hero::after { content: ""; height: 156px; width: 60%; background: linear-gradient(123deg, transparent 10%, #fff 10%); position: absolute; bottom: 0; right: 0; z-index: 2; -webkit-transform: skew(-30deg) translate(50px); -moz-transform: skew(-30deg) translate(50px); -ms-transform: skew(-30deg) translate(50px); -o-transform: skew(-30deg) translate(50px); transform: skew(-30deg) translate(50px); } .mt-hero::before { content: ""; height: 145px; width: 60%; background: linear-gradient(123deg, transparent 10%, #ed1a29 10%); position: absolute; bottom: 0px; right: 25px; z-index: 1; -webkit-transform: skew(-30deg) translate(50px); -moz-transform: skew(-30deg) translate(50px); -ms-transform: skew(-30deg) translate(50px); -o-transform: skew(-30deg) translate(50px); transform: skew(-30deg) translate(50px); } .mt-hero > img { width: 100%; height: 100%; object-fit: cover; } .mt-hero .mt-hero-info { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.8); padding: 30px 80px; } .mt-hero .mt-hero-info .mt-hero-price { float: left; color: #fff; font-family: ap_hondalight; } .mt-hero .mt-hero-info .mt-hero-price .mt-top-price { font-size: 24px; } .mt-hero .mt-hero-info .mt-hero-price .mt-top-price strong { font-family: ap_hondabold; max-width: 24vw; display: inline-block; vertical-align: text-top; } .mt-hero .mt-hero-info .mt-hero-price .mt-top-price span { font-family: ap_hondaregular; } .mt-top-price small { font-size: 14px; } .mt-hero .mt-hero-info .mt-hero-price .mt-bottom-price { font-size: 20px; } .mt-hero .mt-hero-info .btnbox { float: right; width: 50%; text-align: right; position: absolute; bottom: 60px; right: 50px; } .mt-hero .mt-hero-info .btnbox .btn { margin-left: 20px; z-index: 3; } .slider-9-nav .item { padding: 5px; margin-top: 10px; margin-bottom: 10px; } @media only screen and (max-width: 599px) { .mt-hero .mt-hero-info .mt-hero-price .mt-top-price { font-size: 18px; } .mt-hero .mt-hero-info .btnbox { padding-top: 25px; padding-bottom: 10px; } } @media only screen and (max-width: 767px) { .mt-hero .mt-hero-info .btnbox { padding: 20px; float: none; width: auto; } .mt-hero .mt-hero-info .btnbox .btn { margin-bottom: 15px; width: calc(100% - 60px); text-align: left; padding-top: 15px; padding-bottom: 15px; color: #fff; background: #ab0000; padding-right: 40px; border-color: #ed1a29; margin-left: 0; margin: auto; margin-bottom: 15px; } .mt-hero .mt-hero-info .btnbox .btn span { display: inline-block; width: calc(100% - 99px); text-align: left; } .mt-hero .mt-hero-info .btnbox .btn::after { width: 90%; -webkit-transform: skew(-20deg) translate(-10px); -moz-transform: skew(-20deg) translate(-10px); -ms-transform: skew(-20deg) translate(-10px); -o-transform: skew(-20deg) translate(-10px); transform: skew(-20deg) translate(-10px); } .mt-hero::after, .mt-hero::before { width: 0; } .mt-hero .mt-hero-info .mt-hero-price .mt-top-price { font-size: 20px; } .mt-pd-color .mt-container { display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center; } } @media only screen and (max-width: 1023px) { .mt-hero { margin-bottom: 0; } .mt-hero { height: auto; } .mt-hero > img { height: auto; float: left; } .mt-hero .mt-hero-info { padding: 0; position: unset; clear: both; } .mt-hero .mt-hero-info .mt-hero-price { float: none; padding: 30px 20px; background: #222222; } .mt-hero .mt-hero-info .mt-hero-price .mt-top-price strong { max-width: unset; } .mt-hero .mt-hero-info .mt-hero-price .mt-bottom-price { font-size: 14px; } .mt-hero .mt-hero-info .btnbox { position: inherit; right: 0; } .mt-hero .mt-hero-info .btnbox { width: 100%; padding: 20px 15px; background: #fff; text-align: center; } .mt-hero::after, .mt-hero::before { width: 0; } .mt-pd-color .mt-container { display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center; } .mt-pd-color.is_acc .mt-slider_color { padding-bottom: 40px; } .mt-slider_color .slick-slide .mt-colorname { font-size: 16px; } .mt-hero .mt-hero-info .btnbox { width: 100%; right: 0; } } @media only screen and (max-width: 1299px) { .mt-top-price { font-size: 20px; } } /* ---------------- Hero Two ------------*/ .mt-hero-bg2 { position: relative; } .mt-hero-bg2 > img { width: 100%; height: auto; object-fit: cover; } /* ---------------- Hero CC ------------*/ .mt-pd-color { position: relative; padding-top: 50px; padding-bottom: 150px; } .mt-pd-color .mt-container { display: flex; } .mt-pd-color::before { content: ""; height: 145px; width: 50%; background: linear-gradient(240deg, transparent 10%, #ed1a29 10%); position: absolute; bottom: 100%; margin-bottom: 5px; left: 18px; z-index: 0; -webkit-transform: skew(40deg) translate(-100px); -moz-transform: skew(40deg) translate(-100px); -ms-transform: skew(40deg) translate(-100px); -o-transform: skew(40deg) translate(-100px); transform: skew(40deg) translate(-100px); } .mt-pd-color::after { content: ""; height: 156px; width: 50%; background: linear-gradient(240deg, transparent 10%, #fff 10%); position: absolute; bottom: 100%; left: 0; z-index: 0; -webkit-transform: skew(40deg) translate(-100px); -moz-transform: skew(40deg) translate(-100px); -ms-transform: skew(40deg) translate(-100px); -o-transform: skew(40deg) translate(-100px); transform: skew(40deg) translate(-100px); } .mt-pd-color > h3 { position: absolute; bottom: 100%; left: 0; z-index: 1; padding: 50px 100px; font-size: 60px; line-height: 60px; margin: 0; } .mt-container, .mt-contriner { max-width: 1750px; margin: auto; } .mt-pd-color.is_acc .mt-colorbox { width: 60%; float: left; } .slider-9 { padding-bottom: 40px; } .slider-9 .flexinfo > .mt-img img { width: 100%; object-fit: contain; height: 100%; margin: auto; } .mt-colorbox .colorname { position: absolute; z-index: 1; bottom: 0px; text-align: center; left: 0; right: 0; font-size: 20px; max-width: 1400px; } .slider-9-nav img { width: 50px !important; height: 54px; margin: 10px; padding: 5px; margin-top: 10px; margin-bottom: 10px; display: block; } .slider-9-nav .slick-slide.slick-current { background: #fff; box-shadow: 2px 2px 8px rgba(75, 67, 67, 0.25); } .mt-pd-color.is_acc .accbox { width: 40%; float: left; } .slide-accbox { max-width: 700px; background: #f9f9f9; margin: auto; padding: 30px; padding-bottom: 50px; } .slide-accbox .accbox-content { text-align: center; padding-top: 15px; } .slide-accbox .accbox-content h3 { color: #ed1a29; font-size: 20px; } .slide-accbox .accbox-content h4 { font-size: 30px; color: #222; max-width: 90%; margin: auto; } .slide-accbox .accbox-content a { margin-top: 20px; display: inline-block; border: 1px solid #ed1a29; border-radius: 4px; padding: 10px 40px; color: #ed1a29; text-decoration: none; font-size: 18px; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } @media only screen and (max-width: 767px) { .mt-pd-color { padding-bottom: 100px; } .mt-pd-color.is_acc .accbox { width: 100%; float: left; } .mt-pd-color.is_acc .accbox { width: 100%; float: left; } } @media only screen and (max-width: 1023px) { .mt-pd-color::before { width: 350px; height: 55px; background: linear-gradient(240deg, transparent 20%, #ed1a29 10%); } .mt-pd-color > h3 { padding: 0px 30px; font-size: 30px; } .mt-pd-color::after { width: 360px; height: 65px; background: linear-gradient(240deg, transparent 20%, #fff 10%); } } /* ---------------- mt-pd-infobox ------------*/ .mt-pd-infobox { background: #222222; color: #fff; position: relative; border-top: 4px solid #ed1a29; } .mt-pd-infobox::before { content: ""; height: 40px; width: 30%; background: linear-gradient(145deg, transparent 10%, #ed1a29 10%); position: absolute; bottom: 100%; right: 15px; } .mt-pd-infobox::after { content: ""; height: 46px; width: 30%; background: linear-gradient(145deg, transparent 10%, #222222 10%); position: absolute; bottom: 100%; right: 0; } .mt-pd-infobox > .mt-container { padding-top: 100px; padding-bottom: 80px; } .flexinfo { display: flex; justify-content: center; align-content: center; align-items: center; } .flexinfo .mt-img { /* width: 60%; */ max-height: 600px; } .slick-slide img { display: block; } .flexinfo > .mt-img img { width: 100%; object-fit: scale-down; height: 100%; } .slick-slide img { display: block; } .flexinfo .mt-ifo { width: 40%; text-align: left; align-self: center; padding-left: 100px; } .flexinfo .mt-ifo h3 { font-size: 30px; color: #ffffff; } .flexinfo .mt-ifo p { font-size: 16px; color: rgba(255, 255, 255, 0.75); } .mt-pd-infobox .sub-slider { background: #000; } .sub-slider .item { width: 170px; height: 170px; padding: 10px 5px; position: relative; } .sub-slider .item.slick-current::before { content: ""; border-top: 3px solid #ed1a29; position: absolute; top: 10px; left: 5px; right: 5px; } .sub-slider .item.slick-current::after { content: ""; display: block; width: 20px; height: 20px; position: absolute; top: 10px; left: 0; right: 0; margin: auto; width: 0px; height: 0px; border-top: 15px solid #ed1a29; border-right: 12px solid transparent; border-left: 12px solid transparent; } .sub-slider .item > img { width: 100%; height: 100%; object-fit: cover; background: #fff; } .product-item-slider { width: 100%; height: 100%; margin: 30px auto 1px; overflow: hidden; } .sub-slider { width: 100%; height: 100%; margin: auto; } .sub-slider .slick-track { height: 85px; } .slick-arrow { position: absolute; top: 50%; z-index: 50; margin-top: -12px; } .slick-prev { left: 0; } .slick-next { right: 0; } .slider-9-nav .item img { width: 54px; height: 54px; object-fit: contain; } .slider-9-nav .slick-slide.slick-current img { background: #fff; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25); } @media only screen and (max-width: 767px) { .mt-pd-infobox::after { height: 18px; background: linear-gradient(145deg, transparent 10%, #222222 10%); } .flexinfo .mt-img { width: 100%; max-height: 600px; } .mt-pd-infobox .flexinfo .mt-ifo { width: 100%; padding-left: 30px; } .mt-pd-color.is_acc .accbox { width: 100%; float: left; } .mt-pd-infobox > .mt-container { padding-top: 0; padding-bottom: 80px; } } @media only screen and (max-width: 1023px) { .flexinfo .mt-img { width: 100%; max-height: 600px; } .mt-pd-color.is_acc .accbox { width: 100%; float: left; } .mt-pd-infobox::after { background: linear-gradient(145deg, transparent 30%, #222222 10%); } .mt-pd-infobox::before { background: linear-gradient(145deg, transparent 30%, #ed1a29 10%); } } @media only screen and (max-width: 1800px) { .mt-pd-infobox::after { background: linear-gradient(145deg, transparent 20%, #222222 10%); } .mt-pd-infobox::before { background: linear-gradient(145deg, transparent 20%, #ed1a29 10%); } } /* ------------- Accourdion ----------------*/ .accordion { padding: 50px 0; padding-bottom: 50px; padding-bottom: 100px; background: #f9f9f9; } .section-title h2 { font-size: 60px; } .accordion-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .accordion-header h2 { margin-right: 24px; color: #ed1a29; font-size: 20px; line-height: 23px; display: flex; justify-content: space-between; } .accordion-container { margin-top: 48px; } .accordion-icon, .accordion-arrow { font-size: 2rem; } .accordion-arrow { margin-left: auto; transition: 0.4s; color: #ed1a29; } .accordion-data { row-gap: 1.5rem; padding-left: 2.7rem; } .accordion-titles { display: flex; justify-content: space-between; } .accordion-close .accordion-data { height: 0; overflow: hidden; } .accordion-open .accordion-data { height: max-content; } .accordion-open .accordion-arrow { transform: rotate(45deg); color: #fe706b; } .accordion-content { margin-bottom: 32px; /* padding: 16px 32px; */ /* border-style: solid; */ /* border-width: 1px; */ /* border-color: none; */ border-radius: 4px; /* transition: transform 350ms ease; */ transition: transform 350ms ease, -webkit-transform 350ms ease; cursor: pointer; background-color: transparent; } .accordion-data { font-family: "DM Sans", sans-serif; color: #808184; font-size: 18px; line-height: 30px; font-weight: 400; font-size: 19px; line-height: 29px; margin: 0; padding: 0; } .accordion-content-info { list-style: none; padding: 0; margin: 0; white-space: normal; } .accordion-content-info > li:not(.mt-headbar):nth-child(2n + 1) { background: transparent; } .accordion-content-info > li { border-bottom: 1px solid #e0e0e0; padding: 15px 30px; font-size: 16px; color: #828282; position: relative; } ul.accordion-content-info > li::before { content: ""; width: 1px; height: 100%; left: 50%; position: absolute; z-index: 1; background: #e0e0e0; } ul.accordion-content-info > li h4 { display: block; text-align: left; float: left; width: 50%; font-size: 16px; } ul.accordion-content-info > li p { float: right; color: #222; text-align: left; width: calc(50% - 30px); padding-left: 30px; font-size: 16px; } /* ---------------- Review ------------*/ .mt-container, .mt-contriner { max-width: 1750px; margin: auto; } .mt-container, .mt-contriner { padding-left: 15px; padding-right: 15px; } .mt-review { background: #f9f9f9; padding: 0px 0; margin: auto; padding-bottom: 100px; padding-top: 100px; } .mt-review h2 { text-align: left; } .mt-review .mt-container > h2 { text-align: left; font-size: 40px; padding: 0 10px; position: relative; } .mt-review .mt-container > h2::before { content: ""; width: 40px; height: 5px; background: #ed1a29; position: absolute; left: 10px; right: 0; bottom: -5px; margin: unset; } .mt-review > h2::before { margin: unset; left: 10px; } .mt-review .mt-reviewtop { display: flex; position: inherit; } .mt-review .mt-reviewtop { position: relative; margin-bottom: 20px; padding: 0 10px; } .mt-review .mt-reviewtop .mt-box { width: 50%; border-top: none; position: relative; } .mt-review .mt-reviewtop .mt-box a { height: 28vw; overflow: hidden; display: block; } .mt-review .mt-reviewtop .mt-box a > img { width: 100%; object-fit: cover; height: 100%; } .mt-review .mt-reviewtop .mt-box .lastlabel { position: absolute; left: 0; bottom: 0; letter-spacing: 3px; margin: 0; } .lastlabel { background: #ed1a29; color: #fff; padding: 0px 20px; display: inline-block; position: relative; font-size: 16px; height: 40px; line-height: 40px; } .lastlabel::before { content: ""; position: absolute; left: 100%; top: 0; bottom: 0; border-bottom: 40px solid #ed1a29; border-right: 60px solid transparent; } .mt-review .mt-reviewtop .txtbox { position: inherit; width: 45%; align-self: center; padding-left: 100px; color: #222; text-shadow: none !important; text-align: left; } .mt-review .mt-reviewtop .txtbox { margin: auto; font-size: 14px; line-height: 14px; padding-top: 40px; transition: all 0.4s ease; } .mt-review .mt-reviewtop .txtbox h4 { font-size: 30px; line-height: 30px; margin-bottom: 20px; margin-top: 15px; } .mt-review .mt-reviewtop .txtbox > * { position: relative; z-index: 1; } .mt-review .mt-reviewtop .txtbox { color: #222; text-shadow: none !important; text-align: left; } .mt-review .mt-reviewtop:hover .txtbox { padding-bottom: 40px; } .mt-review .mt-reviewtop .txtbox p { margin-bottom: 50px; font-size: 20px; line-height: 30px; opacity: 0; font-family: ap_hondalight; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .mt-review .mt-reviewtop .txtbox > * { position: relative; z-index: 1; } .mt-review .btnReadmore { border-color: #ed1a29; color: #ed1a29; } .btnReadmore { display: inline-block; border: 1px solid #fff; padding: 15px 50px; text-decoration: none; color: #fff; border-radius: 3px; font-size: 18px; } .rowseeall { text-align: center; } .rowseeall > a { display: inline-block; text-decoration: none; padding: 15px 40px; border-radius: 5px; border: 1px solid #828282; color: #828282; font-size: 20px; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .rowseeall > a > svg { vertical-align: baseline; margin-right: 5px; } @media only screen and (max-width: 600px) { .mt-pd-infobox .flexinfo { display: flex; flex-direction: column; } .mt-review .mt-reviewtop { display: flex; flex-direction: column; } .mt-review .mt-reviewtop .mt-box { width: 100%; } .mt-review .mt-reviewtop .mt-box a { height: 50vw; } .mt-review .mt-reviewtop .txtbox { width: 100%; } .mt-review .mt-reviewtop .txtbox { width: 100%; padding-left: 30px; } .mt-review .mt-reviewtop:hover .txtbox { padding-bottom: 0; } } @media only screen and (max-width: 767px) { .mt-review .mt-review { padding-top: 30px; } .mt-review h2 { margin-top: 0; font-size: 30px; } .mt-review .mt-reviewtop .mt-box a { height: 50vw; } .mt-review .mt-reviewtop .txtbox { width: 100%; padding-left: 30px; } .mt-review .mt-reviewtop .mt-txtbox h4 { font-size: 20px; margin-bottom: 0; } } @media only screen and (max-width: 1023px) { .mt-review .mt-review { padding-top: 30px; } .flexinfo .mt-ifo { width: 50%; padding-left: 30px; } .mt-review h2 { margin-top: 0; font-size: 30px; } .mt-review .mt-reviewtop .mt-box a { height: 50vw; } .mt-review .mt-reviewtop .txtbox { width: 100%; padding-left: 30px; } .mt-review .mt-reviewtop .mt-txtbox h4 { font-size: 20px; margin-bottom: 0; } } /* ---------------- Footer ------------*/ footer { background: #f2f2f2; } footer .mt-footer { max-width: 1752px; margin: auto; padding: 0 20px; } .mt-footer-top { border-bottom: 1px solid #dbdbdb; display: flex; justify-content: space-between; } footer .mt-footer .mt-footer-top .mt-f-logo { display: block; margin-top: -10px; float: left; line-height: 0; } footer .mt-footer .mt-footer-top .mt-top-f-right, .mt-subfooter .mt-footer-top .mt-top-f-right { background: url("assets/images/i-call-center.svg") no-repeat right top; padding-right: 60px; margin-top: 25px; text-align: right; } footer .mt-top-f-right span { font-size: 16px; } footer .mt-top-f-right p, .mt-subfooter .mt-footer-top .mt-top-f-righ p { color: #ed1a29; font-size: 31px; line-height: 30px; font-weight: bold; } footer .mt-footer-bottom { padding: 50px 0; position: relative; color: #222; display: flex; justify-content: space-between; } footer .mt-footer .mt-footer-bottom::before { content: ""; width: 1px; background: #dbdbdb; position: absolute; left: 75%; top: 0; bottom: 0; } footer .mt-footer .mt-footer-bottom > .mt-footer-left { float: left; width: 75%; } footer .mt-footer .mt-footer-bottom > .mt-footer-left { padding-bottom: 110px; } footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul, footer .mt-footer .mt-footer-bottom > .mt-footer-right > ul { list-style: none; margin: 0; padding: 0; } footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul > li.c1 { width: 30%; } footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul > li:not(.c1) { width: 20%; } footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul > li { float: left; padding-right: 30px; } footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul > li > a { color: #222; font-size: 20px; display: block; padding-bottom: 10px; position: relative; } footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul > li:not(.c4) > a::before { content: ""; position: absolute; width: 12px; height: 2px; background: #ed1a29; left: 0; bottom: 0; } footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul > li > ul { list-style: none; padding: 0; margin: 0; margin-top: 15px; } footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul > li.c1 > ul > li { width: 50%; float: left; } footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul a, footer .mt-footer .mt-footer-bottom > .mt-footer-right > ul a { text-decoration: none; color: rgba(34, 34, 34, 0.75); font-size: 14px; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } footer .mt-footer .mt-footer-bottom > .mt-footer-right { float: right; width: 25%; } footer .mt-footer .mt-footer-bottom > .mt-footer-right > ul { padding-left: 20px; } footer .mt-footer .mt-footer-bottom > .mt-footer-right > ul a { font-size: 18px; color: #222; padding-bottom: 10px; display: block; } .mt-footer-linkl { position: relative; width: 100%; } .mt-footer-linkl .mt-linkbox { position: absolute; bottom: 0; width: calc(75% - 0px); left: 0; border-top: 1px solid #dbdbdb; padding: 30px 15px; padding-top: 10px; } .mt-footer-linkl .mt-f-btnlink { float: left; padding-top: 20px; } .mt-footer-linkl .mt-f-btnlink a { float: left; margin-right: 15px; } .btn.btmt-buynow { color: #222; border-color: #222; } .btn.btmt-buynow::after { background-color: #222; } .btn.btmt-buynow:hover { background-color: #000; border-color: #000; } .btn { display: inline-block; border: 1px solid #ed1a29; background: #fff; border-radius: 3px; font-size: 16px; color: #ed1a29; text-decoration: none; padding: 8px 20px; padding-left: 15px; padding-bottom: 10px; position: relative; overflow: hidden; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .btn > svg { position: relative; z-index: 1; vertical-align: middle; margin-right: 25px; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .btn:hover > svg { margin-right: 5px; } .btn > span { position: relative; z-index: 1; font-weight: bold; text-align: center; } .btn.btmt-buynow::after { background-color: #222; } .btn.btmt-buynow::after, .btn.btmt-compare::after { width: 68px; } .btn::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 48px; background: #ed1a29; z-index: 0; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .btn:hover::after { width: 90%; -webkit-transform: skew(-20deg) translate(-10px); -moz-transform: skew(-20deg) translate(-10px); -ms-transform: skew(-20deg) translate(-10px); -o-transform: skew(-20deg) translate(-10px); transform: skew(-20deg) translate(-10px); } .btn:hover { color: #fff; background: #ab0000; padding-right: 40px; border-color: #ed1a29; } .mt-footer-linkl .mt-fsocial { float: right; text-align: right; padding-right: 15px; padding-top: 10px; } .mt-footer-linkl .mt-fsocial { text-align: right; } footer .mt-footer .mt-fsocial > a { text-decoration: none; font-size: 18px; color: rgba(34, 34, 34, 0.75); display: inline-block; padding: 0 15px; padding-right: 0; padding-top: 10px; } .mt-fsocial .btnSocial { display: flex; margin: 0; margin-top: 10px; } .mt-fsocial .btnSocial i { width: 40px; height: 40px; font-size: 20px; margin-right: 5px; background: #ed1a29; display: block; position: relative; overflow: hidden; color: #fff; text-align: center; line-height: 40px; border-radius: 50px; } .ico-social-36.ico-social-ico-facebook-red { width: 36px; height: 36px; background-position: 0 0; } /*---- Footer Bottom ----*/ footer .mt-fcopyright { background: #dbdbdb; padding: 10px 15px; text-align: center; color: rgba(34, 34, 34, 0.5); margin: 0; font-size: 12px; } @media only screen and (max-width: 1299px) { .mt-footer-linkl .mt-linkbox { position: initial; width: 100%; padding: 10px 0; padding-bottom: 15px; } } @media only screen and (max-width: 1023px) { footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul > li.c1, footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul > li:not(.c1) { width: 58%; padding-right: 2%; } footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul > li.c2, footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul > li.c4 { width: 30%; } footer .mt-footer .mt-footer-bottom > .mt-footer-right > ul { padding-left: 0; } footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul > li > a, footer .mt-footer .mt-footer-bottom > .mt-footer-right > ul a { font-size: 16px; } .mt-footer-linkl .mt-f-btnlink, footer .mt-footer .mt-fsocial { text-align: center; } .mt-footer-linkl .mt-f-btnlink a, .mt-footer-linkl .mt-f-btnlink, footer .mt-footer .mt-fsocial { float: none; } .mt-footer-linkl .mt-f-btnlink, footer .mt-footer .mt-fsocial { text-align: center; } footer .mt-footer .mt-footer-bottom::before { width: 0px; } } @media only screen and (max-width: 767px) { footer .mt-footer-bottom { flex-direction: column; } footer .mt-footer .mt-footer-bottom > .mt-footer-right, footer .mt-footer .mt-footer-bottom > .mt-footer-left { width: 100%; } footer .mt-footer .mt-footer-bottom > .mt-footer-right, footer .mt-footer .mt-footer-bottom > .mt-footer-left { width: 100%; } footer .mt-footer .mt-fsocial { text-align: center; } footer .mt-footer .mt-footer-bottom::before { width: 0px; } footer .mt-footer .mt-footer-bottom > .mt-footer-right { width: 100%; } .mt-footer-linkl .mt-fsocial { text-align: center; display: flex; align-content: center; align-items: center; justify-content: center; flex-direction: column; float: none; } .mt-f-btnlink a { margin-bottom: 10px; } } @media only screen and (max-width: 425px) { footer .mt-footer { padding-left: 15px; padding-right: 15px; } footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul > li.c1, footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul > li.c3 { width: 50%; } footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul > li.c2, footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul > li.c4 { width: 40%; } footer .mt-footer .mt-footer-bottom > .mt-footer-left > ul > li.c1 > ul > li { width: 100%; float: none; } footer .mt-footer .mt-footer-bottom > .mt-footer-right { width: 100%; } .mt-footer-linkl .mt-fsocial { text-align: center; display: flex; align-content: center; align-items: center; justify-content: center; flex-direction: column; } .mt-footer-linkl .mt-f-btnlink a { margin: 0; text-align: left; display: block; margin-bottom: 10px; } .mt-f-btnlink { padding-left: 15px; padding-right: 15px; } } .clearfix { clear: both; } /* ---------------- All Model ------------*/ .mt-product_top { background: url("/assets/images/bg-top-products.jpg") center center no-repeat; background-size: cover; padding: 150px 0; padding-bottom: 30px; border-bottom: 4px solid #ed1a29; position: relative; z-index: 2; /* padding-top: 70px; */ padding-bottom: 0px; } .mt-product_top::before { content: ""; height: 40px; width: 30%; background: linear-gradient(145deg, transparent 10%, #ed1a29 10%); position: absolute; bottom: -4px; right: 15px; } .mt-product_top::after { content: ""; height: 46px; width: 30%; background: linear-gradient(145deg, transparent 10%, #fff 10%); position: absolute; bottom: -5px; right: 0; } .mt-product_top h1 { color: #fff; font-family: ap_hondalight; font-size: 76px; } .all-model.mt-products { display: block; } .mt-pd-menu .mt-productlists { padding: 15px; min-height: auto; } .mt-productlists h2 { font-size: 31px; position: relative; display: block; margin-bottom: 30px; } .mt-productlists h2::before { position: absolute; content: ""; height: 5px; width: 30px; left: 0; top: 100%; background: #ed1a29; } ul.mt-products-group { list-style: none; padding: 0; margin: 0 -15px; } .mt-productlists ul.mt-products-group > li { float: left; padding: 15px; padding-bottom: 35px; } .mt-productlists ul { display: block; } .all-product-list .mt-h-productlists ul li a { text-align: left; } .owl-nav button { position: absolute; top: 50%; background-color: #000; color: #fff; margin: 0; transition: all 0.3s ease-in-out; } .owl-nav button.owl-prev { left: 0; } .owl-nav button.owl-next { right: 0; } .mt-productlists .owl-dots { text-align: center; padding-top: 15px; } .mt-productlists .owl-dots button.owl-dot { width: 15px; height: 15px; border-radius: 50%; display: inline-block; background: #ccc; margin: 0 3px; } .mt-productlists .owl-dots button.owl-dot.active { background-color: #000; } .owl-dots button.owl-dot:focus { outline: none; } .mt-productlists .owl-nav button { outline: none; position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.38) !important; } .mt-productlists span { font-size: 70px; position: relative; top: -5px; } .mt-productlists.owl-nav button:focus { outline: none; } @media only screen and (max-width: 1299px) { .mt-catalogs > .mt-pcate ul.mt-catelists > li > a, .mt-products > .mt-pcate ul.mt-catelists > li > a { padding: 15px 12px; font-size: 15px; } .all-product-list .mt-h-productlists ul li, .mt-products .mt-h-productlists ul li { width: calc(33.33% - 30px); padding: 0 10px; } } @media only screen and (max-width: 1023px) { .mt-product_top::before { background: linear-gradient(145deg, transparent 30%, #ed1a29 10%); } .mt-product_top::after { background: linear-gradient(145deg, transparent 30%, #fff 10%); } .all-model.mt-products .mt-catelists { display: none; } .mt-catalogs > .mt-pcate ul.mt-catelists > li > a, .mt-products > .mt-pcate ul.mt-catelists > li > a { padding: 15px 12px; font-size: 15px; } .mt-products .mt-h-productlists { padding: 50px 20px; } .all-product-list .mt-h-productlists ul li { height: 320px; padding-bottom: 0; } .all-product-list .mt-h-productlists ul li, .mt-products .mt-h-productlists ul li { width: calc(33.33% - 30px); padding: 0 10px; } } @media only screen and (max-width: 767px) { .mt-product_top { padding-top: 50px; } .mt-product_top h1 { font-size: 26px; } .mt-catalogs > .mt-pcate ul.mt-catelists > li > a, .mt-products > .mt-pcate ul.mt-catelists > li > a { padding: 15px 12px; font-size: 15px; } .all-product-list .mt-productlists h2 { margin-top: 20px; } .mt-productlists h2 { font-size: 20px; margin-bottom: 30px; padding-bottom: 20px; } .all-product-list .mt-h-productlists ul li, .mt-products .mt-h-productlists ul li { width: calc(50% - 20px); padding: 0 10px; } } @media only screen and (max-width: 425px) { .mt-product_top::before { background: linear-gradient(145deg, transparent 40%, #ed1a29 10%); } .mt-product_top::after { background: linear-gradient(145deg, transparent 40%, #fff 10%); } .all-product-list .mt-h-productlists ul li, .mt-products .mt-h-productlists ul li { width: calc(100% - 20px); padding: 0 10px; } } @media only screen and (max-width: 550px) { .mt-product_top::before { background: linear-gradient(145deg, transparent 35%, #ed1a29 10%); } .mt-product_top::after { background: linear-gradient(145deg, transparent 35%, #fff 10%); } } /* ---------------- Quikmenu ------------*/ .n_quickmenu { position: fixed; z-index: 999; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .n_quickmenu > ul { list-style: none; padding: 0; margin: 0; width: 80px; display: block; } .n_quickmenu > ul > li { background: #ed1b2f; color: #fff; margin-bottom: 0; font-size: 16px; white-space: nowrap; position: relative; right: 0; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; display: flex; flex-direction: row; align-items: center; height: 80px; width: 253px; padding: 0; } .n_quickmenu > ul > li::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 80px; background: #ed1b2f; } .n_quickmenu > ul > li > a { display: flex; flex-direction: row; align-items: center; width: 100%; height: 100%; text-decoration: none; color: #fff; } .n_quickmenu > ul > li > a > img { vertical-align: middle; width: 80px; max-height: 34px; margin-right: 0px; position: relative; z-index: 1; } .n_quickmenu > ul > li:not(:last-child)::after { content: ""; position: absolute; width: 80px; height: 1px; bottom: 0; left: 0; background: #ff6674; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .n_quickmenu > ul > li:hover { right: 173px; }
Edit
Rename
Chmod
Delete
FILE
FOLDER
Name
Size
Permission
Action
lib
---
0755
style.css
63619 bytes
0644
N4ST4R_ID | Naxtarrr