html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
object{ outline: 0; }
strong, b, strong *, b * { font-weight: bold; }
em, i, em *, i * { font-style: normal !important; }
a:focus, input:focus{ outline-style: none; }
textarea{ outline: none; }
*{ box-sizing: border-box; font-family: 'Mtrp', sans-serif; }

body{  color: #000000; font-size: 14px; line-height: 21px; background: #FAF9F9; padding: 0; }

/* Grid */
.grid{ display: grid; grid-gap: 32px; }
.grid.grid-2{ grid-template-columns: 1fr 1fr; }
.grid.grid-3{ grid-template-columns: 1fr 1fr 1fr; }
.grid.grid-4{ grid-template-columns: 1fr 1fr 1fr 1fr; }
.grid.grid-3-9{ grid-template-columns: 3fr 9fr; }
.grid.grid-7-5{ grid-template-columns: 7fr 5fr; }

/* Margin */
.mb-1{ margin-bottom: 8px; }
.mb-2{ margin-bottom: 16px; }
.mb-3{ margin-bottom: 32px; }
.mb-4{ margin-bottom: 64px; }

.mt-1{ margin-top: 8px; }
.mt-2{ margin-top: 16px; }
.mt-3{ margin-top: 32px; }
.mt-4{ margin-top: 64px; }

/* Layout elements */
.main-body{ background: #FAF9F9; }
.width{ max-width: 1240px; margin: auto; padding: 0 20px; }
.width.medium{ max-width: 960px; }


/* Generic */
img{ display: block; width: 100%; }
button{ background: none; border: none; outline: none; font-family: 'Mtrp', sans-serif; cursor: pointer; }
a{ color: inherit; text-decoration: none; }

.caps{ text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.black-bg{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10; display: none; }

.element-template{ display: none; } /* used for dialogs */

.link{ color: #1782b5; }
	.link:hover{ text-decoration: underline; }

/* Form elements */
.field{ border: #DBDBDB 1px solid; font-size: 14px; padding: 13px; font-family: 'Mtrp', sans-serif; font-weight: 400; background: #fff; border-radius: 3px; box-sizing: border-box; }
	.field:focus{ border-color: #aeb0b5; }
	.field.select{ position: relative; padding: 0; }
		.field.select .caret{ border-left: #ddd 1px solid; position: absolute; top: 0; right: 0; height: 100%; width: 20px; color: #979797; display: flex; align-items: center; justify-content: center; font-size: 12px;  }
	.field select{ display: block; bottom: 0; margin: 0; font-family: 'avenir', sans-serif; outline: none; background: transparent; border: 0; font-size: 14px; appearance: none; -webkit-appearance: none; width: 100%; padding: 14px 14px 12px 14px; line-height: 1; padding-right: 40px; position: relative; z-index: 1; font-family: 'Mtrp', sans-serif; }
	.field select.loading{ opacity: .5; }
.checkbox input[type="checkbox"], .radio input[type="radio"]{ margin-right: 6px; }



.input label{ display: block; width: 100%; color: #808080; font-weight: 500; line-height: 1.4; }
.input .field{ display: block; width: 100%; }
	.input.checkbox label{ font-weight: 400; }
	.input.checkbox{ display: flex; align-items: flex-start; line-height: 1; }
	.input.checkbox input[type="checkbox"]{ margin-top: 6px; position: relative; top: -3px; }

.form-tip{ margin-top: 16px; }

/* Quantity editor */
.edit-quantity{ border: #DBDBDB 1px solid; border-radius: 3px; display: flex; }
	.edit-quantity .plus, .edit-quantity .minus{ font-size: 10px; padding: 0 8px; display: flex; align-items: center; justify-content: center; color: #A9A9A9; }
	.edit-quantity .plus:hover, .edit-quantity .minus:hover{ background: #e8e8e8; color: #fff; cursor: pointer;  }
	.edit-quantity .plus{ border-left: #DBDBDB 1px solid; }
	.edit-quantity .field{ border: 0; width: 40px; text-align: center; }
	.edit-quantity .minus{ border-right: #DBDBDB 1px solid; }

/* Colored text */
.green{ color: #3BB43A; }
.red{ color: #E23535; }

.btn{ font-size: 14px; line-height: 1; display: flex; align-items: stretch; transition: .3s; cursor: pointer; border-radius: 4px; overflow: hidden; padding: 0; }
	.btn:hover{ transform: translateY(-2px); box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1); }
	
	.btn.orange{ color: #fff; background: #F6A223; }
	.btn.outlined{ background: #fff; border: #DBDBDB 1px solid; }
	.btn.outlined-orange{ background: #fff; border: #F6A223 1px solid; color: #F6A223; }
		.btn.outlined-orange:hover{ background: #F6A223; color: #fff; }
	
	.btn .label{ padding: 14px 14px; text-align: center; flex-grow: 1; }
		.btn .label i{ margin-right: 5px; }
	.btn .icon{ width: 36px; text-align: center; display: flex; justify-content: center; align-items: center; font-size: 12px; }
		.btn.orange .icon{ border-right: rgba(255,255,255,0.2) 1px solid; }
		.btn.outlined .icon{ border-right: #DBDBDB 1px solid; }
		.btn.outlined-orange .icon{ border-right: #F6A223 1px solid; }

	.btn[disabled]{ opacity: .5; cursor: not-allowed; }

.box{ background: #fff; border: #EAEAEA 1px solid; border-radius: 3px; }

.content-box{ background: #fff; border: #EAEAEA 1px solid; border-radius: 3px; margin: auto; }
	.content-box.medium{ max-width: 640px; }
	.content-box .heading{ padding: 16px 32px; border-bottom: #EAEAEA 1px solid; }
		.content-box .heading .title{ font-size: 18px; font-weight: 500; }
	.content-box .inner{ padding: 32px; }
	.content-box .actions{ padding: 16px 32px; border-top: #EAEAEA 1px solid; }

.content-box .input{ margin-top: 24px; }
	.content-box .grid .input{ margin-top: 0; }
	.content-box .input:first-child{ margin-top: 0; }

/* Header */
header{ background: #fff; box-shadow: 0 4px 15px 0 rgba(0,0,0,0.05); position: relative; z-index: 1; }
	header .primary .width{ display: flex; padding: 20px; align-items: center; }
		header .logo{ width: 120px; display: block; }
		header .search{ border: #DBDBDB 1px solid; border-radius: 3px; display: flex; margin-left: 52px; overflow: hidden; }
			header .search .field{ border: 0; width: 360px; }
			header .search button{ background: none; border: none; font-size: 14px; border-left: #DBDBDB 1px solid; padding: 0 15px; }
				header .search button:hover{ background: #eee; }
		header .right{ margin-left: auto; display: flex; }
			header .right .cart{ margin-left: 20px; border-left: #F8F8F8 1px solid; padding-left: 20px; cursor: pointer; }
				header .right .cart:hover{ opacity: .8; }
				header .right i{ font-size: 12px; margin-right: 4px; }
				header .right .cart .label{ font-weight: 600; }
				header .right .cart .no{ background: #E23535; color: #fff; padding: 8px 13px 7px 13px; border-radius: 30px; margin-left: 5px; }
					.cart-empty header .right .cart .no{ display: none; }
			header .right a{ color: inherit; text-decoration: none; }
	header .secondary{ border-top: #F8F8F8 1px solid; }
		header .secondary .width{ display: flex; }
		header .secondary .left, header .secondary .right{ display: flex; }
		header .secondary .right{ margin-left: auto; }
			header .secondary .item{ padding: 20px 0 18px 0; line-height: 1; margin-left: 40px; color: #808080; text-decoration: none; border-bottom: transparent 2px solid; font-weight: 500; }
				header .secondary .item:hover{ color: #000; }
				header .secondary .item.active{ border-bottom-color: #E23535; color: #E23535; }
				header .secondary .item:first-child{ margin-left: 0; }

/* Main */
main{ padding: 42px 0; }

/* Footer */
footer{ background: #212121; padding: 64px 0; color: #e7e7e7; }
	footer .logo{ width: 120px; display: block; }
	footer a{ color: #fff; opacity: .9; text-decoration: none; }
		footer a:hover{ opacity: 1; text-decoration: none; text-decoration: underline; }
	footer h3{ color: #F6A223; font-size: 12px; }
	footer li{ margin-top: 10px; }
	footer li:first-child{ margin-top: 0; }
	footer ul{ margin-top: 10px; }
	footer ul.second{ margin-top: 10px; padding-top: 10px; border-top: rgba(255,255,255,0.12) 1px solid; }
		footer .second i{ font-size: 12px; margin-right: 4px; }
	footer .social{ margin-top: 32px; display: flex; }
	footer .social a{ width: 32px; height: 32px; border: rgba(255,255,255,0.8) 1px solid; border-radius: 100px; text-align: center; display: flex; align-items: center; justify-content: center; margin-right: 10px; text-decoration: none; }
	footer .social a:hover{ background: #fff; color: #212121; }

/* List product */
.list-product{ padding: 32px; background: #fff; border-radius: 4px; border: #EAEAEA 1px solid; transition: .3s; box-shadow: 0 4px 15px 0 rgba(0,0,0,0); position: relative; }
	.list-product .rare-label{ position: absolute; top: 0; left: 32px; background: #E23535; color: #fff; text-transform: uppercase; padding: 6px 10px; line-height: 1; font-size: 10px; border-radius: 0 0 3px 3px; }
	.list-product .inner{ display: flex; align-items: flex-start; }
	.list-product .img{ width: 80px; }
	.list-product .info{ padding-left: 16px; width: calc(100% - 80px); }
	.list-product .top{ display: flex; font-size: 24px; line-height: 30px; width: 100%; }
		.list-product .top .price{ margin-left: auto; }
	.list-product .bottom{ margin-top: 8px; display: grid; grid-template-columns: 3fr 3fr 2fr; grid-gap: 16px; color: #A9A9A9; align-items: end; }
		.list-product .bottom li{ margin-top: 4px; }
		.list-product.narrow .bottom{ grid-template-columns: 3fr 2fr; grid-gap: 0 16px; }
			.list-product.narrow .bottom ul:first-child{ grid-column: 1 / span 2; }
		.list-product .bottom ul{ font-size: 12px; }
		.list-product .btn{ font-size: 13px; }
	.list-product:hover{ box-shadow: 0 4px 15px 0 rgba(0,0,0,0.1); }
	.list-product:hover .btn.outlined{ background: #FFB443; color: #fff; border-color: #FFB443; }
	.list-product:hover .btn.outlined .icon{ border-right-color: rgba(255,255,255,0.2); }


.empty{ padding: 32px; background: #fff; border-radius: 4px; border: #EAEAEA 1px solid; transition: .3s; box-shadow: 0 4px 15px 0 rgba(0,0,0,0); position: relative; }
	.empty .title{ font-size: 24px; font-weight: 500; }
	.empty p{ margin-top: 16px; }

.page-heading{ display: flex; width: 100%; align-items: flex-end; }
	.page-heading .title{ font-size: 30px; line-height: 36px; font-weight: 500; }
	.page-heading .subtitle{ font-size: 16px; line-height: 24px; font-weight: 400; margin-top: 6px; }
	.page-heading .actions{ margin-left: auto; display: flex; align-items: center; }
	.page-heading .actions label{ margin-right: 10px; }

.home-vehicle-search{ background: #E23535; color: #fff; padding: 32px 0; align-items: center; }
	.vehicle-search .title{ font-weight: 600; font-size: 18px; }
	.vehicle-search .intro .secondary{ font-size: 14px; line-height: 21px; margin-top: 8px; }
	.vehicle-search .btn{ width: 100%; }

.header-vehicle-search{ overflow: hidden; max-height: 0; transition: .6s; }
	.header-vehicle-search .inner{ background: #232323; color: #fff; padding: 32px 0; align-items: center; overflow: hidden; }
	.header-vehicle-search.visible{ max-height: 200px; }


.item-list{ display: grid; grid-gap: 16px; grid-template-columns: 1fr; }

.filter-box{ padding: 24px 32px; background: #F0F0F0; border-radius: 3px; }
	.filter-box .caps{ font-size: 12px; }
	.filter-box ul{ margin-top: 16px; }
	.filter-box li{ margin-top: 8px; }
	.filter-box a{ color: #808080; }
		.filter-box a:hover{ color: #000; }
	.filter-box .active{ font-weight: 600; color: #000; }

.filter-box .vehicle-search{ margin-top: 16px; }
	.filter-box .vehicle-search .width{ width: auto; padding: 0; }
	.filter-box .vehicle-search .title{ display: none; }
	.filter-box .vehicle-search .grid.grid-3-9{ grid-template-columns: 1fr; }
	.filter-box .vehicle-search .grid.grid-4{ grid-template-columns: 1fr; grid-gap: 8px; }
	.filter-box .vehicle-search .intro{ display: none; }
	.filter-box .field select{ padding: 12px 30px 10px 12px; font-size: 13px; }

.pagination{ display: flex; align-items: center; }
.pagination .pages{ border: #EAEAEA 1px solid; background: #fff; display: flex; margin-left: auto; align-items: center; }
	.pagination .pages .page{ font-size: 14px; line-height: 1; padding: 10px 14px 8px 14px; border-left: #EAEAEA 1px solid; }
	.pagination .pages .page:first-child{ border-left: 0; }
	.pagination .pages .page:hover{ background: #eee; }
	.pagination .pages .page.current{ background: #dadada; cursor: default; color: #fff; }
	.pagination .pages i{ font-size: 13px; }


.product-main .caps{ color: #A9A9A9; margin-bottom: 2px; font-size: 12px; }

.product-info{ padding-left: 60px; }
	.product-info .title{ font-size: 30px; line-height: 42px; font-weight: 500; }
	.product-info .subtitle{ color: #5E5E5E; margin-top: 6px; }
	.product-info .code{ color: #A9A9A9; margin-top: 6px; }
	.product-info .shipping-price{ display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin: 42px 0; }
		.product-info .shipping-price .shipping .caps{ font-size: 12px; color: #A9A9A9; margin-bottom: 2px; }
		.product-info .shipping-price .shipping .cost{ font-weight: 500; }
		.product-info .shipping-price .price{ font-weight: 100; font-size: 48px; text-align: right; border-left: #ddd 1px solid; }
			.product-info .shipping-price .price sup{ font-size: 24px; font-weight: 400; font-family: 'Mtrp', sans-serif; }
	.product-info .extra-item{ margin-top: 16px; background: #F0F0F0; padding: 16px 16px; border-radius: 3px; color: #A9A9A9; }
	.product-info .extra-item strong{ font-weight: 600; }
	.product-info .extra-item .black{ color: #000; }

	.product-info .submit{ display: grid; grid-template-columns: 100px 1fr; align-items: end; grid-gap: 32px; }
	.product-info .submit .caps{ font-size: 12px; color: #A9A9A9; margin-bottom: 6px; }
	.product-info .btn{ width: 100%; }

	.product-info .edit-quantity{ width: 100%; }
	.product-info .edit-quantity .plus, .product-info .edit-quantity .minus{ width: 25px; }
	.product-info .edit-quantity .field{ width: calc(100% - 50px); }

.specs-table{ display: grid; grid-template-columns: 1fr 2fr; }
	.specs-table .label{ color: #A9A9A9; border-top: #DBDBDB 1px solid; padding: 8px 0; }
	.specs-table .value{ border-top: #DBDBDB 1px solid; padding: 8px 0; }
	.specs-table .label:nth-child(1), .specs-table .value:nth-child(2){ border-top: 0; }


.float-box{  display: none; }
	.float-box .box{ position: absolute; z-index: 11; background: #fff; box-shadow: 0 4px 15px 0 rgba(0,0,0,0.05); padding: 0; border: 0; }
	.float-box.visible{ display: block; }
	.float-box .inner{ padding: 24px 32px; border: #ddd 1px solid; border-top: #E23535 3px solid; }
	.float-box .top{ display: flex; }
		.float-box .top .close{ margin-left: auto; color: #ccc; cursor: pointer; }
			.float-box .top .close:hover{ color: #000; }
		.float-box .top .title{ font-weight: 600; }


.dialog-open{ overflow: hidden; }
	.dialog{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10; padding: 32px; }
	.dialog .box{ max-width: 640px; margin: auto; }
	.dialog .heading{ display: flex; padding: 16px 24px; border-bottom: #EAEAEA 1px solid; }
	.dialog .heading .close{ margin-left: auto; color: #ccc; cursor: pointer; }
			.dialog .heading .close:hover{ color: #000; }
		.dialog .heading .title{ font-weight: 600; }
	.dialog .inner{ padding: 24px 32px; }
	.dialog .actions{ padding: 16px 24px; border-top: #EAEAEA 1px solid; display: flex; }
		.dialog .actions .btn{ width: auto; }


.mini-cart .box{ top: 70px; right: calc(50vw - 600px); min-width: 460px; }
	@media (max-width: 1240px){ .mini-cart .box{ right: 20px; } }
	.mini-cart .empty-message{ opacity: .4; margin-top: 16px; display: none; }
		.cart-empty .mini-cart .empty-message{ display: block; }

.mini-cart-grid{ display: grid; grid-template-columns: 2fr 1fr; align-items: center; }
	.mini-cart-grid > div{ border-top: #eee 1px solid; padding: 16px 0; }
	.mini-cart-grid .heading{ color: #A9A9A9; font-size: 10px; border-top: 0; padding: 0 0 4px 0; }
	.mini-cart-grid .prod{ display: grid; grid-template-columns: 40px 1fr; grid-gap: 16px; }
	.mini-cart-grid .primary{ font-weight: 600; }
	.mini-cart-grid .label{ color: #A9A9A9; }
	.mini-cart-grid .edit-quantity{ width: 94px; margin-left: auto; }
	.mini-cart-grid .right{ text-align: right; }

.catalog-box .box{ top: 136px; right: calc(50vw - 600px); width: 100%; max-width: 1200px; }
	@media (max-width: 1240px){ .catalog-box .box{ right: 20px; width: calc(100% - 40px); } }

.mini-cart-actions{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 32px; }
	.cart-empty .mini-cart-actions{ display: none; }

.catalog-cols{ column-count: 3; column-gap: 32px; line-height: 30px; }
	.catalog-cols a{ color: #808080; }
	.catalog-cols a:hover{ color: #E23535; text-decoration: underline; }

.page-content p{ margin-top: 24px; }
.page-content ul, .page-content ol{ margin-top: 24px; padding-left: 36px; }
.page-content ul li{ list-style-type: disc; }
.page-content ol li{ list-style-type: decimal; }