html * {max-height:1000000px;} html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1.2; } article,aside,details,figcaption,figure,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } INPUT:-webkit-autofill, INPUT:-webkit-autofill:hover, INPUT:-webkit-autofill:focus, INPUT:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; } INPUT[type=number] { -moz-appearance: textfield; } INPUT[type=number]::-webkit-inner-spin-button, INPUT[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } @font-face { font-family: 'HN'; src: url(/css/fonts/HelveticaNeue-Bold.95337886.eot); src: url(/css/fonts/HelveticaNeue-Bold.95337886.eot?#iefix) format('embedded-opentype'), url(/css/fonts/HelveticaNeue-Bold.95337886.woff) format('woff'), url(/css/fonts/HelveticaNeue-Bold.95337886.ttf) format('truetype'), url(/css/fonts/HelveticaNeue-Bold.95337886.svg#HelveticaNeue-Bold) format('svg'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'HN'; src: url(/css/fonts/HelveticaNeue-Roman.95337886.eot); src: url(/css/fonts/HelveticaNeue-Roman.95337886.eot?#iefix) format('embedded-opentype'), url(/css/fonts/HelveticaNeue-Roman.95337886.woff) format('woff'), url(/css/fonts/HelveticaNeue-Roman.95337886.ttf) format('truetype'), url(/css/fonts/HelveticaNeue-Roman.95337886.svg#HelveticaNeue-Roman) format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'HN'; src: url(/css/fonts/HelveticaNeue-Light.95337887.eot); src: url(/css/fonts/HelveticaNeue-Light.95337887.eot?#iefix) format('embedded-opentype'), url(/css/fonts/HelveticaNeue-Light.95337887.woff) format('woff'), url(/css/fonts/HelveticaNeue-Light.95337887.ttf) format('truetype'), url(/css/fonts/HelveticaNeue-Light.95337887.svg#HelveticaNeue-Light) format('svg'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'HN'; src: url(/css/fonts/HelveticaNeue-Medium.95337887.eot); src: url(/css/fonts/HelveticaNeue-Medium.95337887.eot?#iefix) format('embedded-opentype'), url(/css/fonts/HelveticaNeue-Medium.95337887.woff) format('woff'), url(/css/fonts/HelveticaNeue-Medium.95337887.ttf) format('truetype'), url(/css/fonts/HelveticaNeue-Medium.95337887.svg#HelveticaNeue-Medium) format('svg'); font-weight: 500; font-style: normal; font-display: swap; } #Content A { color: #C41230; } .Red { color: #C41230; } .Grey { color: #777; } @keyframes rotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @media screen and (min-width: 981px) { HTML { height: 100%; } BODY { width: 100%; height: 100%; background: #F2F2F2; font: 16px HN, Helvetica, Arial, sans-serif; } INPUT, TEXTAREA, BUTTON { font-family: HN, Helvetica, Arial, sans-serif; } H1 { margin-bottom: 20px; text-align: center; font-weight: 700; font-size: 30px; } SMALL { font-size: 85%; } .Mobile { display: none !important; } BUTTON.T { position: relative; font-weight: 500; font-size: 17px; line-height: 20px; margin: 10px 0; padding: 8px 30px; color: #FFF; outline: none; border: none; background: none; cursor: pointer; } BUTTON.T:before { position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 100%; background: #C41230; transform: skewX(-11.6deg); content: ""; } BUTTON.T:active:before { background: #D91434; } BUTTON.T:disabled:before { background: #CCC; color: #F2F2F2; } #Header { display: flex; justify-content: center; align-items: center; align-content: space-between; flex-wrap: wrap; } #Header { position: relative; width: 100%; min-width: 940px; height: 145px; padding: 0 30px; border-bottom: 60px solid #222; box-sizing: border-box; } #Header:before { content: ""; height: 85px; } #Header:after { content: ""; height: 60px; } #Header DIV:first-child { flex-basis: 31%; } #Header DIV:first-child A IMG { width: 180px; height: 46px; margin: 0; } #Header DIV { flex-basis: 22%; white-space: nowrap; color: #666; } #Header DIV IMG { float: left; width: 32px; height: 32px; margin: 3px 9px 0 0; transition: 500ms; transition-delay: 0ms; } #Header DIV IMG { float: left; width: 32px; height: 32px; margin: 3px 9px 0 0; transition: 500ms; transition-delay: 0ms; } #Header DIV B { font-weight: 500; color: #000; } #Header DIV A { color: #C41230; text-decoration: none; } #Header DIV A[href^="tel"] { color: #000; } #Header DIV:nth-child(2) { flex-basis: 25%; } #Header I { font-style: normal; color: #666; } #Header DIV IMG.R { transform: rotateY(360deg); transition: none; } #Header NAV { display: flex; justify-content: space-between; align-items: center; padding: 0 50px 0 30px; white-space: nowrap; } #Header NAV { position: absolute; box-sizing: border-box; z-index: 9; left: 0; bottom: -60px; width: 200px; height: 60px; overflow: hidden; transition: 300ms; transition-delay: 50ms; } #Header NAV:before { height: 18px; margin-right: 10px; padding-left: 32px; line-height: 16px; color: #FFF; background: url(/i/icons.210255569.svg#menu) no-repeat center left; background-size: 27px 18px; content: "меню"; } #Header NAV:after { position: absolute; z-index: -2; width: 100%; height: 60px; left: -8px; background: #A50F28; transform: skewX(-11.6deg); content: ""; } #Header NAV A { position: relative; display: block; height: 60px; margin: 0 10px; color: #FFF; font-size: 16px; font-weight: 500; line-height: 60px; text-decoration: none; opacity: 0; transition: 300ms; transition-delay: 0ms; } #Header NAV A.A { color: #000; } #Header NAV.O, #Header NAV:hover { width: calc(100% - 50px); transition-delay: 200ms; } #Header NAV.O A, #Header NAV:hover A { opacity: 1; transition-delay: 300ms; } @media screen and (max-width: 1200px) { #Header NAV A { font-size: 15px; } } #Header SPAN { margin-right: 5px; font-size: 13px; white-space: nowrap; line-height: 1; text-align: right; text-transform: uppercase; color: #FFF; } #Header FORM { position: relative; width: 34%; margin-left: 10px; } #Header FORM:before { position: absolute; display: block; content: ""; width: 100%; height: 36px; background: #FFF; transform: skewX(-11.6deg); } #Header INPUT { position: relative; box-sizing: border-box; width: calc(100% - 10px); height: 36px; margin: 0 5px; padding: 0 5px; font-weight: 700; font-size: 20px; outline: none; border: none; background: none; } #Header INPUT:focus:valid { background: url(/i/icons.210255569.svg#search-reset) no-repeat right center; background-size: 30px 30px; } #Header INPUT:placeholder-shown { font-size: 18px; } #Header INPUT::-webkit-input-placeholder { font-weight: 300; font-style: italic; } #Header INPUT::-moz-placeholder { font-weight: 300; font-style: italic; } #Header INPUT:-ms-input-placeholder { font-weight: 300; font-style: italic; } #Header INPUT:-moz-placeholder { font-weight: 300; font-style: italic; } #Header INPUT:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 50px #FFF !important; } #Header INPUT:invalid { box-shadow: none; } #Header BUTTON[type=submit] { position: absolute; display: block; right: -47px; top: 0; width: 48px; height: 36px; background-color: #C41230; outline: none; border: none; transform: skewX(-11.6deg); cursor: pointer; } #Header BUTTON IMG { width: 24px; height: 24px; margin-top: 2px; transform: skewX(11.6deg); } #Header BUTTON:active IMG { transform: skewX(11.6deg) scale(.85); } #Header U { position: absolute; right: 0; top: 85px; width: 56px; height: 60px; background: url(/i/icons.210255569.svg#search-white) no-repeat center; background-size: 24px; opacity: 0; transition: .3s; } #Header U.O { opacity: .8; cursor: pointer; } #Header U.O:hover { opacity: 1; } #Content { position: relative; z-index: 3; box-sizing: border-box; width: 100%; max-width: 1500px; min-height: calc(100% - 145px); padding: 60px 80px; margin: 0 auto; } #Footer { padding: 60px; font-size: 16px; background: #222; color: #CCC; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } #Footer > * { opacity: .5; margin-right: 50px; transition: 300ms; filter: grayscale(1); outline1: 1px solid #FFF; } #Footer:hover > * { opacity: 1; filter: none; } #Footer A { color: #FFF; } #Footer A:hover { color: #C41230; } #Footer NAV H4 { margin-bottom: 10px; color: #999; } #Footer NAV A { display: inline-block; margin-bottom: 7px; white-space: nowrap; } #MainBrands { display: flex; justify-content: center; align-items: center; } #MainBrands A IMG { width: 140px; margin: 0 20px; } #MainBrands A:nth-child(2) IMG { width:120px; } #Contacts { display: flex; flex-direction: column; margin-right: 0; flex-grow: 9; } #Contacts IMG { width: 200px; height: 52px; margin-bottom: 30px; align-self: flex-end; } #Contacts DIV { margin-bottom: 10px; text-align: right; white-space: nowrap; } #Contacts DIV A { display: inline-block; margin-left: 5px; } #Contacts DIV.Social { height: 24px; display: flex; justify-content: flex-end; margin: 15px 0 0 0; } #Contacts DIV.Social A IMG { display: block; width: 24px; height: 24px; margin-left: 20px; opacity: .5; filter: brightness(999); } #Contacts DIV.Social A:hover IMG { opacity: 1; filter: none; } #LatestSearches { flex-basis: 100%; margin: 20px 0 0 0; line-height: 1.5; } #LatestSearches H4 { position: relative; margin-bottom: 5px; color: #999; } #LatestSearches H4 SPAN { position: relative; display: inline-block; z-index: 2; padding-right: 10px; background: #222; } #LatestSearches H4:after { position: absolute; z-index: 1; width: 100%; height1: 1px; right: 0; top: .7em; margin-left: 10px; border-top: 1px dashed #999; content: ""; } #LatestSearches A.NotFound { color: #999; } #Footer.NotLoggedIn { flex-wrap: nowrap; } #Footer.NotLoggedIn NAV { flex-basis: 25%; } #Footer.NotLoggedIn #Contacts { flex-basis: 25%; flex-grow: 0; } } @media screen and (max-width: 980px) { BODY { background: #F2F2F2; font: 28px HN, Helvetica, Arial, sans-serif; } INPUT, TEXTAREA, BUTTON { font-family: HN, Helvetica, Arial, sans-serif; } #Content A { color: #C41230; } H1 { margin-bottom: 40px; text-align: center; font-size: 40px; font-weight: 700; } .Desktop { display: none !important; } BUTTON.T { position: relative; font-size: 32px; line-height: 44px; font-weight: 500; margin: 20px 0; padding: 12px 30px 16px 30px; color: #FFF; outline: none; border: none; background: none; cursor: pointer; } BUTTON.T:before { position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 100%; background: #C41230; transform: skewX(-11.6deg); content: ""; } BUTTON.T:active:before { background: #D91434; } BUTTON.T:disabled:before { background: #CCC; color: #F2F2F2; } #Header > DIV { display: none; } #Header { position: fixed; z-index: 999; width: 100%; height: 130px; top: 0; background: #FFF; border-bottom: 100px solid #222; display: flex; justify-content: space-between; align-items: center; } #Header DIV:first-child { display: block; flex-basis: 280px; } #Header DIV:first-child A IMG { display: block; box-sizing: border-box; width: 250px; margin: 35px 20px 35px 30px; } #Header SPAN { display: none; margin-right: 30px; flex-direction: row-reverse; justify-content: flex-end; align-items: center; text-align: right; text-transform: lowercase; line-height: 1; } #Header SPAN IMG { width: 102px; margin: -9px 30px 0 12px; } #Header SPAN EM { display: block; position: absolute; bottom: 100%; } #Cart { display: none; flex-basis: 63%; text-align: right; } #Cart B { display: none; } #Cart BR { display: none; } #Cart A { display: flex; justify-content: flex-end; align-items: center; font-size: 1.2em; font-weight: 500; text-decoration: none; color: #000; } #Cart IMG { width: 70px; margin: 0 30px 0 15px; order: 1; transition: 500ms; transition-delay: 0ms; } #Cart I { font-style: normal; } #Cart IMG.R { transform: rotateY(360deg); transition: none; } #Header B { position: absolute; width: 100px; height: 100px; left: 0; bottom: -100px; background: #C41230 url(/i/icons.210255569.svg#menu) no-repeat center; background-size: 50px; } #Header B:before { position: absolute; z-index: -1; width: 100px; height: 100px; right: -10px; content: ""; background: #C41230; transform: skewX(-11.6deg); } #Header B.Active { background: #C41230 url(/i/icons.210255569.svg#menu-close) no-repeat center; background-size: 38px; } #Header NAV { display: none; box-sizing: border-box; position: absolute; z-index: 9; width: 100%; height: calc(100vh - 100px); top: calc(100% + 100px); left: 0; padding: 50px 70px; background: #C41230; } #Header NAV A { display: block; color: #FFF; font-size: 40px; line-height: 65px; font-weight: 500; text-decoration: none; } #Header NAV H3 { margin: 45px 0 15px 0; font-size: 40px; font-weight: 300; color: #FFF; } #CallManager { margin-top: 50px; font-size: 36px; font-weight: 300; color: #FFF; } #CallManager IMG { float: left; width: 100px; height: 100px; margin-right: 20px; filter: invert(1) brightness(9); } #CallManager DIV { font-weight: 500; } #Header FORM { position: absolute; width: calc(100% - 220px); left: 125px; bottom: -85px; } #Header FORM:before { position: absolute; display: block; content: ""; width: 100%; height: 70px; background: #FFF; transform: skewX(-11.6deg); } #Header INPUT { position: relative; box-sizing: border-box; width: calc(100% - 10px); height: 70px; margin: 0 5px; padding: 0 15px; font-size: 40px; font-weight: 700; outline: none; border: none; background: none; } #Header INPUT:focus:valid { background: url(/i/icons.210255569.svg#search-reset) no-repeat right center; background-size: 64px 64px; } #Header INPUT::placeholder { font-size: 36px; font-weight: 300; font-style: italic; color: #666; } #Header BUTTON[type=submit] { position: absolute; display: block; right: -80px; top: 0; width: 80px; height: 70px; background: #C41230; outline: none; border: none; transform: skewX(-11.6deg); } #Header BUTTON IMG { width: 39px; height: 39px; margin-top: 2px; transform: skewX(11.6deg); } #Header BUTTON:active IMG { transform: skewX(11.6deg) scale(.85); } #Content { position: relative; box-sizing: border-box; width: 100%; min-height: calc(100vh - 230px); margin-top: 230px; } #Footer { position: relative; box-sizing: border-box; width: 100%; padding: 60px; font-size: 1.1em; background: #222; color: #CCC; display: flex; flex-direction: column; } #Footer > * { opacity: .5; } #Footer A { color: #FFF; } #Footer A:hover { color: #C41230; } #Footer NAV { display: none; } #MainBrands { display: flex !important; justify-content: space-between; align-items: center; margin-bottom: 30px; } #MainBrands A IMG { width: 180px; filter: grayscale(1); } #MainBrands A IMG:hover { filter: none; } #MainBrands A:nth-child(2) IMG { width: 150px; } #Contacts { order: 2; } #Contacts > IMG { display: none; } #Contacts DIV { line-height: 1.5; white-space: nowrap; } #Contacts DIV A { position: relative; float: right; color: #FFF; } #Contacts DIV A[href^="tel"] { text-decoration: none; } #Contacts DIV.Social { height: 48px; display: flex; justify-content: center; margin: 40px 0 0 0; } #Contacts DIV.Social A IMG { display: block; width: 48px; height: 48px; margin: 0 24px; opacity: .5; filter: brightness(999); } #Contacts DIV.Social A:hover IMG { opacity: 1; } #LatestSearches { order: 1; flex-basis: 100%; margin: 0 0 40px 0; padding: 0 0 40px 0; line-height: 1.5; overflow-wrap: break-word; border-bottom: 1px dashed #FFF; } #LatestSearches H4 { display: inline-block; color: #999; } #LatestSearches H4:after { content: ":"; } #LatestSearches A.NotFound { color: #999; } } @media screen and (min-width: 981px) { .Overlay { position: fixed; z-index: 10000; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.75); } .Modal { position: fixed; z-index: 10001; width: 480px; height: 240px; left: 50%; top: 50%; margin-left: -240px; margin-top: -120px; transform: skewX(-11.6deg); background-color: #FFF; animation: showModal 300ms; } .Modal:before { display: block; position: absolute; left: 0; top: -38px; width: 100%; height: 38px; background: #A50F28; content: ""; } .Modal > DIV { box-sizing: border-box; height: 278px; margin-top: -38px; transform: skewX(11.6deg) translateZ(0); display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .Modal U { position: absolute; width: 30px; height: 30px; right: -19px; top: 4px; background: url(/i/icons.210255569.svg#qua-close) no-repeat center; background-size: 26px; cursor: pointer; } .Modal H3 { width: 100%; margin: 0 0 30px 74px; font-weight: 300; font-style: italic; font-size: 16px; line-height: 38px; color: #FFF; } .Modal H3 SPAN { font-weight: 500; } .Modal H3 SPAN A { color: #FFF; text-decoration: none; } .Buttons { box-sizing: border-box; width: 100%; margin-left: -38px; padding: 10px 30px 30px 30px; text-align: center; } .Buttons BUTTON { width: 130px; margin: 0; padding-left: 0; padding-right: 0; } .Buttons BUTTON:first-child { float: left; } .Buttons BUTTON:last-child { float: right; } .Buttons BUTTON:only-child { display: block; float: none; margin: 0 auto; } .Buttons BUTTON[type=reset]:before { background: #444; } .Buttons BUTTON[type=reset]:active:before { background: #222; } .Buttons BUTTON[disabled]:before { background: #999; } @keyframes showModal { 0% { transform: scale(0.7) skewX(-11.6deg); } 45% { transform: scale(1.05) skewX(-11.6deg); } 100% { transform: scale(1.0) skewX(-11.6deg); } } .Modal EM.Error { color: #C41230; } .Input { text-align: center; } .Input LABEL { position: relative; display: block; width: 200px; margin: 10px auto 7px auto; border: 1px solid #999; transform: skewX(-11.6deg); } .Input LABEL:before { position: absolute; z-index: 9; width: 40px; height: 36px; top: 0; left: 0; color: #C41230; font-weight: 300; font-size: 24px; line-height: 34px; text-align: center; content: "–"; cursor: pointer; transform: skewX(11.6deg); } .Input LABEL:after { position: absolute; z-index: 9; width: 40px; height: 36px; top: -1px; right: 0; color: #C41230; font-weight: 300; font-size: 24px; line-height: 34px; text-align: center; content: "+"; cursor: pointer; transform: skewX(11.6deg); } .Input INPUT { width: 100%; font-weight: 500; font-size: 22px; line-height: 36px; text-align: center; margin: 0; padding: 0; outline: none; border: none; background: none; transform: skewX(11.6deg); } .Input LABEL.Minus:before { top: 1px; } .Input LABEL.Plus:after { top: 0; } .Price { font-size: 24px; font-weight: 500; } .Price SPAN { font-size: 15px; } .LP LABEL { position: relative; display: block; width: 333px; margin: 15px auto; padding: 0 10px; border: 1px solid #999; } .LP LABEL:first-child { transform: translateX(5px) skewX(-11.6deg); } .LP LABEL:last-child { transform: translateX(-5px) skewX(-11.6deg); } .LP LABEL INPUT { width: 100%; font-size: 18px; line-height: 36px; text-align: center; margin: 0; padding: 0; outline: none; border: none; background: none; transform: skewX(11.6deg); } .LP INPUT::-webkit-input-placeholder { font-weight: 300; } .LP INPUT::-moz-placeholder { font-weight: 300; } .LP INPUT:-ms-input-placeholder { font-weight: 300; } .LP INPUT:-moz-placeholder { font-weight: 300; } .LP .Err { position: absolute; left: calc(50% + 12px); top: 60px; color: #C41230; white-space: nowrap; font-style: italic; transform: translateX(-50%); } .LP A { position: absolute; bottom: -25px; right: 33px; font-weight: 300; font-style: italic; font-size: 14px; color: #FFF; border-bottom: 1px dotted #FFF; cursor: pointer; opacity: .75; } .LP A:hover { opacity: 1; } } @media screen and (max-width: 980px) { .Overlay { position: fixed; z-index: 10000; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.75); } .Modal { position: fixed; z-index: 10001; width: 680px; height: 400px; left: 50%; top: 50%; margin-left: -340px; margin-top: -200px; background-color: #FFF; animation: showModal 300ms; } .Modal:before { display: block; position: absolute; left: 0; top: -64px; width: 100%; height: 64px; background: #A50F28; content: ""; } .Modal > DIV { box-sizing: border-box; height: 464px; margin-top: -64px; transform: translateZ(0); display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .Modal U { position: absolute; width: 64px; height: 64px; right: -4px; top: 0; background: url(/i/icons.210255569.svg#qua-close) no-repeat center; background-size: 48px; cursor: pointer; } .Modal H3 { width: 100%; margin: 0 0 30px 34px; font-weight: 300; font-size: 30px; line-height: 64px; color: #FFF; } .Modal H3 SPAN { font-weight: 500; } .Modal H3 SPAN A { color: #FFF; text-decoration: none; } .Buttons { box-sizing: border-box; width: 100%; padding: 20px 30px 30px 30px; text-align: center; } .Buttons BUTTON { width: 220px; margin: 0; padding: 9px 0 11px 0; } .Buttons BUTTON:first-child { float: left; } .Buttons BUTTON:last-child { float: right; } .Buttons BUTTON:only-child { display: block; float: none; margin: 0 auto; } .Buttons BUTTON[type=reset]:before { background: #444; } .Buttons BUTTON[type=reset]:active:before { background: #222; } .Buttons BUTTON[disabled]:before { background: #999; } @keyframes showModal { 0% { transform: scale(0.7); } 45% { transform: scale(1.05); } 100% { transform: scale(1.0); } } .Modal EM.Error { color: #C41230; } .Input { text-align: center; } .Input LABEL { position: relative; display: block; width: 320px; margin: 20px auto 14px auto; border: 1px solid #999; transform: skewX(-11.6deg); } .Input LABEL:before { position: absolute; z-index: 9; width: 64px; height: 58px; top: 0; left: 0; color: #C41230; font-size: 48px; line-height: 54px; font-weight: 300; text-align: center; content: "–"; cursor: pointer; transform: skewX(11.6deg); } .Input LABEL:after { position: absolute; z-index: 9; width: 64px; height: 58px; top: -2px; right: 0; color: #C41230; font-size: 48px; line-height: 54px; font-weight: 300; text-align: center; content: "+"; cursor: pointer; transform: skewX(11.6deg); } .Input INPUT { width: 100%; font-size: 40px; line-height: 60px; font-weight: 500; text-align: center; margin: 0; padding: 0; outline: none; border: none; background: none; transform: skewX(11.6deg); } .Input LABEL.Minus:before { top: 2px; } .Input LABEL.Plus:after { top: 0; } .Price { font-size: 40px; font-weight: 500; } .Price SMALL { font-size: 36px; } .Price SPAN { font-size: 30px; } .LP LABEL { position: relative; display: block; width: 500px; margin: 25px auto; padding: 0 10px; border: 1px solid #999; } .LP LABEL:first-child { transform: skewX(-11.6deg); } .LP LABEL:last-child { transform: skewX(-11.6deg); } .LP LABEL INPUT { width: 100%; font-size: 34px; line-height: 60px; text-align: center; margin: 0; padding: 0; outline: none; border: none; background: none; transform: skewX(11.6deg); } .LP INPUT::-webkit-input-placeholder { font-weight: 300; } .LP INPUT::-moz-placeholder { font-weight: 300; } .LP INPUT:-ms-input-placeholder { font-weight: 300; } .LP INPUT:-moz-placeholder { font-weight: 300; } .LP .Err { position: absolute; left: 50%; top: 90px; color: #C41230; white-space: nowrap; font-style: italic; transform: translateX(-50%); } .LP A { position: absolute; top: calc(100% + 10px); right: -4px; font-size: 28px; color: #FFF; border-bottom: 1px dotted #FFF; cursor: pointer; opacity: .75; } .LP A:hover { opacity: 1; } } @media screen and (min-width: 981px) { #Welcome { margin: 20px 0; padding: 25px 30px 25px 130px; line-height: 1.5; background: #FFF url(/i/icons.210255569.svg#lock) no-repeat 45px center; background-size: 48px 56px; } #Welcome A, #Welcome B { font-weight: 500; color: #C41230; } .List { width: calc(100% + 30px); margin-left: -30px; font-size: 15px; } .List THEAD TR { border-bottom: 1px solid #CCC; } .List TBODY TR { border-top: 1px solid #CCC; } .List THEAD TD { padding: 10px 20px 10px 0; color: #777; font-weight: 300; vertical-align: bottom; } .List TD { position: relative; max-width: 250px; white-space: nowrap; cursor: pointer; } .List TD:not(:last-child) A { display: block; padding: 10px 20px 10px 0; text-decoration: none; color: #000 !important; } .List TD:last-child { position: absolute; } @supports (-moz-appearance:none) { .List TR { position: relative; } .List TD:last-child { top: 0; height: 100%; } } .List TD:first-child { padding: 0; border-top: 1px solid transparent; } .List TD:first-child A { display: block; z-index: 3; width: 30px; padding: 10px 0; opacity: .3; } .List TD:first-child A.F { background: url(/i/icons.210255569.svg#foto) no-repeat left 11px; background-size: 14px 13px; } .List TBODY TR TD:first-child A:hover { opacity: .9; } .List TD:nth-child(4) { width: 80%; text-align: left !important; } .List TD:nth-child(4) SPAN { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .List TD.Q { text-align: right; } .List TD:nth-last-child(3) { text-align: right; } .List TD:nth-last-child(2), .List TD:nth-last-child(2) A { padding-right: 0; text-align: right; } .List TD:nth-last-child(2) A IMG { width: 11px; height: 13px; } .List TD:nth-last-child(2).Action A { color: #C41230 !important; } .List TD:last-child { padding: 0; } .List TR TD:last-child A { visibility: hidden; display: block; padding: 10px 0px 10px 30px; background: url(/i/icons.210255569.svg#buy) no-repeat 15px center; background-size: 15px; box-sizing: border-box; } .List TR[notsupplied] TD:last-child A { background-image: none; } .List TD:last-child A.O { visibility: visible; background-image: url(/i/icons.210255569.svg#check); background-size: 12px; color: #C41230; font-size: 14px; font-weight: 500; } .List TBODY TR TD:first-child:before { visibility: hidden; position: absolute; z-index: -1; width: 20px; height: 100%; left: -16px; top: 0; background: #FFF; cursor: pointer; transform: skewX(-11.6deg); content: ""; } .List TBODY TR TD:last-child:before { visibility: hidden; position: absolute; z-index: -1; width: 20px; height: 100%; right: -16px; top: 0; background: #FFF; cursor: pointer; transform: skewX(-11.6deg); content: ""; } .List TBODY TR:hover { background-color: #FFF; border-color: transparent; } .List TBODY TR:hover + TR { border-color: transparent; } .List TBODY TR:hover TD:first-child:before { visibility: visible; } .List TBODY TR:hover TD:last-child:before { visibility: visible; } .List TBODY TR:hover TD:last-child { background: #FFF; } .List TBODY TR:hover TD:last-child A { visibility: visible; } .List TBODY TR.Fixed { background-color: #FFF; border-color: transparent; } .List TBODY TR.Fixed + TR { border-color: transparent; } .List TBODY TR.Fixed TD:first-child:before { visibility: visible; } .List TBODY TR.Fixed TD:last-child:before { visibility: visible; } .List TBODY TR.Fixed TD:last-child A { visibility: visible; } .List TBODY TR.Cur { background-color: #FFF; border-color: transparent; } .List TBODY TR.Cur + TR { border-color: transparent; } .List TBODY TR.Cur TD:first-child:before { visibility: visible; background: #FFF; } .List TBODY TR.Cur TD:last-child:before { visibility: visible; background: #FFF; } .List TBODY TR.Cur TD:last-child { background: #FFF; } #Preview { position: absolute; left: 38px; background: #FFF; padding: 12px; transform: translateY(calc(-100% - 143px)) rotate(-11.6deg); transform-origin: left bottom; opacity: 0; transition: 300ms opacity; } #Preview IMG { display: block; max-width: 167px; max-height: 167px; filter: grayscale(1); } #Preview.A { opacity: 1; } } @media screen and (max-width: 980px) { #Welcome { margin: 30px; font-size: 32px; } #Welcome A, #Welcome B { color: #C41230; font-weight: 400; } #Welcome BR { display: none; } #Welcome A:first-child:before { display: inline-block; width: 28px; height: 33px; margin: 0 10px -2px 0; background: url(/i/icons.210255569.svg#lock) no-repeat center; content: ""; } .List { width: 100%; font-size: 30px; } .List TR { display: block; position: relative; padding: 30px; border-top: 1px solid #CCC; display: flex; flex-wrap: wrap; justify-content: space-between; } .List THEAD TR { border: none; } .List TD:first-child, .List TD:last-child { display: none; } .List TD:nth-child(2) { order: 4; flex-grow: 9; } .List TD:nth-child(3) { order: 3; } .List TD:nth-child(4) { order: 1; flex-basis: 100%; padding: 0 180px 10px 0; } .List TD:nth-last-child(3) { order: 5; text-align: right; } .List TD:nth-last-child(2) { order: 2; position: absolute; right: 30px; top: 30px; font-weight: 500; } .List TD:nth-last-child(2).Action A { color: #C41230 !important; } .List A { display: block; font-size: 34px; color: #000 !important; text-decoration: none; } .List TD:nth-child(2) A { font-size: 28px; color: #666 !important; } .List TD:nth-child(3) A { font-size: 28px; color: #666 !important; padding-right: .3em; } .List TD:nth-child(3) A:empty { padding-right: 0; } .List TD:nth-last-child(3) A { font-size: 28px; color: #666 !important; } .List TD:nth-last-child(2) A IMG { width: 28px; height: 34px; } .List THEAD TR.Mobile TD A { color: #999 !important; } .List TBODY TR.Cur { background: #DDD; } SECTION[rel="InKits"] .List TD:nth-child(5), SECTION[rel="KitConsist"] .List TD:nth-child(5), SECTION[rel="Divided"] .List TD:nth-child(5) { order: 4; flex-grow: 999; } SECTION[rel="InKits"] .List TD:nth-child(5) A, SECTION[rel="KitConsist"] .List TD:nth-child(5) A, SECTION[rel="Divided"] .List TD:nth-child(5) A { font-size: 28px; color: #999 !important; } SECTION[rel="InKits"] .List TD:nth-child(5) A:before, SECTION[rel="KitConsist"] .List TD:nth-child(5) A:before, SECTION[rel="Divided"] .List TD:nth-child(5) A:before { content: "×"; margin: 0 5px 0 2px; } #Preview { display: none; } } .flex-container a:hover, .flex-slider a:hover { outline: none; } .slides, .slides > li, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; } .flex-pauseplay span { text-transform: capitalize; } .flexslider { margin: 0; padding: 0; } .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } .flexslider .slides img { width: 100%; display: block; } .flexslider .slides:after { content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .flexslider .slides { display: block; } * html .flexslider .slides { height: 1%; } .no-js .flexslider .slides > li:first-child { display: block; } .flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; zoom: 1; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); } .flexslider .slides { zoom: 1; } .flexslider .slides img { height: auto; -moz-user-select: none; } .flex-viewport { max-height: 2000px; } .loading .flex-viewport { max-height: 300px; } @-moz-document url-prefix() { .loading .flex-viewport { max-height: none; } } .carousel li { margin-right: 5px; } .flex-direction-nav { *height: 0; } .flex-direction-nav a { text-decoration: none; display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0, 0, 0, 0.8); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .flex-direction-nav a:before { font-family: "flexslider-icon"; font-size: 40px; display: inline-block; content: '\f001'; color: rgba(0, 0, 0, 0.8); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); } .flex-direction-nav a.flex-next:before { content: '\f002'; } .flex-direction-nav .flex-prev { left: -50px; } .flex-direction-nav .flex-next { right: -50px; text-align: right; } .flexslider:hover .flex-direction-nav .flex-prev { opacity: 0.7; left: 10px; } .flexslider:hover .flex-direction-nav .flex-prev:hover { opacity: 1; } .flexslider:hover .flex-direction-nav .flex-next { opacity: 0.7; right: 10px; } .flexslider:hover .flex-direction-nav .flex-next:hover { opacity: 1; } .flex-direction-nav .flex-disabled { opacity: 0!important; filter: alpha(opacity=0); cursor: default; z-index: -1; } .flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; } .flex-pauseplay a:before { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; } .flex-pauseplay a:hover { opacity: 1; } .flex-pauseplay a.flex-play:before { content: '\f003'; } .flex-control-nav { width: 100%; position: absolute; bottom: -40px; text-align: center; } .flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; *display: inline; } .flex-control-paging li a { width: 11px; height: 11px; display: block; background: #666; background: rgba(0, 0, 0, 0.5); cursor: pointer; text-indent: -9999px; -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .flex-control-paging li a:hover { background: #333; background: rgba(0, 0, 0, 0.7); } .flex-control-paging li a.flex-active { background: #000; background: rgba(0, 0, 0, 0.9); cursor: default; } .flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden; } .flex-control-thumbs li { width: 25%; float: left; margin: 0; } .flex-control-thumbs img { width: 100%; height: auto; display: block; opacity: .7; cursor: pointer; -moz-user-select: none; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .flex-control-thumbs img:hover { opacity: 1; } .flex-control-thumbs .flex-active { opacity: 1; cursor: default; } @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 10px; } .flex-direction-nav .flex-next { opacity: 1; right: 10px; } } @charset "UTF-8"; @media screen and (min-width: 981px) { SECTION:first-child { position: relative; min-height: 377px; margin-left: 377px; display: flex; flex-direction: column; justify-content: space-between; } #Info { display: flex; width: 100%; margin-bottom: 15px; border-bottom: 1px solid #CCC; } #Info H2 { position: relative; padding: 10px 20px; font-weight: 700; white-space: nowrap; line-height: 1.3; } #Info H2 I { display: block; font-size: 12px; font-weight: 400; font-style: normal; color: #666; } #Info H2:after { position: absolute; width: 0; height: 100%; top: 0; right: 0; border-right: 1px solid #CCC; transform: skewX(-11.6deg); content: ""; } #Info H2:first-child { display: none; } #Info H2:nth-child(2) { padding-left: 0; } #Info H2:nth-child(3) { flex-basis: 100%; } #Info H2 IMG { position: absolute; right: 20px; top: 50%; transform: translateY(-50%) scale(.45); transform-origin: center right; max-height: 72px; } #Info H2 A { color: #000; text-decoration: none; } #Info H2 A:hover { color: #C41230; } #Info DIV { min-width: 45px; background: url(/i/icons.210255569.svg#back) no-repeat center; background-size: 21px; cursor: pointer; content: ""; } ARTICLE H1 { text-align: left; flex-grow: 9; padding-right: 70px; } ARTICLE H1.Sale { position: relative; padding-left: 72px; } ARTICLE H1.Sale:before { position: absolute; width: 65px; height: 55px; left: 0; background: url(/i/icons.210255569.svg#sale); transform: rotate(39deg); content: ""; } #Buy { display: inline-flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } #Locked { margin-bottom: 5px; color: #C41230; } #Locked:before { display: inline-block; width: 13px; height: 16px; margin-right: 5px; background: url(/i/icons.210255569.svg#lock) no-repeat; content: ""; } #Price { font-size: 30px; font-weight: 700; color: #C41230; } #Price SPAN { font-size: 16px; font-weight: 500; } #Price I { font-style: normal; } #Package { line-height: 27px; color: #666; } #Package SPAN { color: #C41230; } #Buy BUTTON { order: 9; } #OldNumber { margin-bottom: 10px; } #OldNumber A { text-decoration: none; font-weight: 500; } #Weight { position: absolute; top: 75px; right: 0; font-size: 14px; filter: grayscale(1); opacity: .5; transition: 300ms; } #Weight:before { display: inline-block; width: 9px; height: 15px; margin: 0 5px -2px 0; background: url(/i/icons.210255569.svg#weight) no-repeat; content: ""; } #Weight:hover { filter: grayscale(0); opacity: 1; } #NotAvailable { font-size: 14px; font-weight: 300; color: #999; } #NotSupplied { font-size: 21px; } #NotSupplied:before { position: relative; content: "× "; font-size: 30px; color: #C41230; vertical-align: -2px; } #Tabs { display: flex; margin-top: 20px; } #Tabs A { min-width: 90px; padding: 10px 20px; font-size: 15px; line-height: 15px; color: #C41230; transform: skewX(-11.6deg); cursor: pointer; border: 1px solid #CCC; border-bottom: 1px solid transparent; border-right: none; user-select: none; text-decoration: none; } #Tabs A:last-child { border-right: 1px solid #CCC; } #Tabs A.Active { color: #222 !important; border-bottom: 1px solid #F2F2F2; font-weight: 500; } HR { height: 0; margin: -1px 0 20px 0; border-top: 1px solid #CCC; } SECTION { display: none; } SECTION.Active { display: block; } SECTION.Loading { position: relative; height: 100px; } SECTION.Loading:before { position: absolute; left: calc(50% - 15px); top: calc(50% - 15px); width: 30px; height: 30px; background: url(/i/icons.210255569.svg#gear); filter: grayscale(1); opacity: .5; animation: rotating 2s linear infinite; content: ""; } SECTION[rel="Replacements"] #OldNumbers { position: relative; margin: 30px 0 10px 0; line-height: 1.5; font-size: 15px; } SECTION[rel="Replacements"] #OldNumbers I { position: absolute; display: block; top: 2px; left: -25px; width: 17px; height: 17px; font-style: normal; line-height: normal; background: url(/i/inf.svg) no-repeat center; background-size: 17px; cursor: pointer; } SECTION[rel="Replacements"] #OldNumbers I:hover:after { position: absolute; width: 300px; left: 25px; padding: 10px 14px; font-size: 13px; background: #CCC; content: attr(comment); border-radius: 3px; } SECTION[rel="Replacements"] #OldNumbers A { text-decoration: none; color: #000; } SECTION[rel="Replacements"] #OldNumbers A:hover { color: #C41230; } SECTION[rel="Replacements"] #OldNumbers A.Cur { color: #C41230; } SECTION[rel="Replacements"] DIV.NotFound { color: #666; } SECTION[rel="Applicability"] UL { list-style: none; font-size: 15px; } SECTION[rel="Applicability"] H2 { position: relative; padding: 9px 0 7px 0; font-size: 21px; font-weight: 700; margin-top: 30px; text-transform: uppercase; } SECTION[rel="Applicability"] H2 IMG { position: absolute; right: 0; top: 0; transform: scale(.5); transform-origin: center right; filter: grayscale(1); } SECTION[rel="Applicability"] H2 IMG.CSAG { top: -7px; transform: scale(.45); } SECTION[rel="Applicability"] H2 IMG.CSCE { top: -5px; } SECTION[rel="Applicability"] H2 IMG.NHAG { top: -11px; transform: scale(.45); } SECTION[rel="Applicability"] H3 { position: relative; padding: 9px 0 7px 0; font-size: 17px; cursor: pointer; } SECTION[rel="Applicability"] H3 B:after { content: " /"; } SECTION[rel="Applicability"] H3:before { position: absolute; left: -16px; margin-top: -2px; content: "+"; } SECTION[rel="Applicability"] H3.Active:before { content: "–"; } SECTION[rel="Applicability"] H3:hover { color: #C41230; } SECTION[rel="Applicability"] H4 { padding: 8px 0; font-weight: 500; color: #999; } SECTION[rel="Applicability"] UL.Groups { margin-bottom: 30px; } SECTION[rel="Applicability"] UL.Groups > LI { border-top: 1px solid #CCC; } SECTION[rel="Applicability"] UL.Series { display: none; } SECTION[rel="Applicability"] UL.Models > LI { position: relative; padding: 9px 0 7px 0; border-top: 1px dashed #CCC; background: url(/i/icons.210255569.svg#arr-down) no-repeat right 14px; background-size: 10px 10px; cursor: pointer; } SECTION[rel="Applicability"] UL.Models > LI:hover { color: #C41230; } SECTION[rel="Applicability"] UL.Models > LI.Opened { background-image: url(/i/icons.210255569.svg#dash); } SECTION[rel="Applicability"] UL.Models > LI.Loading { background: none; } SECTION[rel="Applicability"] UL.Models > LI.Loading:before {position: absolute; right: 0; top: 11px; width: 11px; height: 11px; animation: rotating 2s linear infinite; background: url(/i/icons.210255569.svg#gear); filter: grayscale(1); opacity: .5; content: ""; } SECTION[rel="Applicability"] UL.Models > LI:not(.Opened) > UL { display: none; } SECTION[rel="Applicability"] UL.Schemas { display: grid; width: 100%; margin: 15px 0 10px 0; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 20px; list-style: none; } SECTION[rel="Applicability"] UL.Schemas LI { position: relative; background: #FFF; } SECTION[rel="Applicability"] UL.Schemas LI IMG { display: block; box-sizing: border-box; width: 100%; border: 10px solid #FFF; } SECTION[rel="AddlInfo"] .Spec { width: 100%; } SECTION[rel="AddlInfo"] .Spec TR { border-top: 1px dashed #CCC; } SECTION[rel="AddlInfo"] .Spec TR:first-child { border: none; } SECTION[rel="AddlInfo"] .Spec TD { padding: 8px 0; } SECTION[rel="AddlInfo"] .Spec TD:first-child { box-sizing: border-box; width: 377px; padding-right: 20px; } SECTION[rel="Stock"] .Remains { width: 100%; font-size: 15px; } SECTION[rel="Stock"] .Remains THEAD TD { font-weight: 300; color: #777; border-bottom: 1px solid #CCC; border-top: none; } SECTION[rel="Stock"] .Remains TBODY TR { border-top: 1px solid #CCC; } SECTION[rel="Stock"] .Remains TD { position: relative; padding: 10px 0; cursor: pointer; } SECTION[rel="Stock"] .Remains TD:last-child { text-align: right; } SECTION[rel="Stock"] .Remains TD A { display: block; margin: -10px 0; padding: 10px 0; text-decoration: none; color: #000 !important; } SECTION[rel="Stock"] .Remains TBODY TR TD:first-child:before { visibility: hidden; position: absolute; z-index: -1; width: 20px; height: calc(100% + 1px); left: -16px; top: -1px; background: #FFF; cursor: pointer; transform: skewX(-11.6deg); content: ""; } SECTION[rel="Stock"] .Remains TBODY TR TD:last-child:before { visibility: hidden; position: absolute; z-index: -1; width: 20px; height: calc(100% + 1px); right: -16px; top: -1px; background: #FFF; cursor: pointer; transform: skewX(-11.6deg); content: ""; } SECTION[rel="Stock"] .Remains TBODY TR:hover { background-color: #FFF; border-color: transparent; } SECTION[rel="Stock"] .Remains TBODY TR:hover + TR { border-color: transparent; } SECTION[rel="Stock"] .Remains TBODY TR:hover TD:first-child:before { visibility: visible; } SECTION[rel="Stock"] .Remains TBODY TR:hover TD:last-child:before { visibility: visible; } SECTION[rel="History"] .History { width: 100%; font-size: 15px; } SECTION[rel="History"] .History TBODY TR { border-top: 1px solid #CCC; } SECTION[rel="History"] .History TD { position: relative; padding: 10px 0 10px 40px; text-align: right; } SECTION[rel="History"] .History TD:first-child { padding-left: 0; text-align: left; } SECTION[rel="History"] .History THEAD TD { color: #777; font-weight: 300; } SECTION[rel="History"] .History TBODY TR TD:first-child:before { visibility: hidden; position: absolute; z-index: -1; width: 20px; height: calc(100% + 1px); left: -16px; top: -1px; background: #FFF; cursor: pointer; transform: skewX(-11.6deg); content: ""; } SECTION[rel="History"] .History TBODY TR TD:last-child:before { visibility: hidden; position: absolute; z-index: -1; width: 20px; height: calc(100% + 1px); right: -16px; top: -1px; background: #FFF; cursor: pointer; transform: skewX(-11.6deg); content: ""; } SECTION[rel="History"] .History TBODY TR:hover { background-color: #FFF; border-color: transparent; } SECTION[rel="History"] .History TBODY TR:hover + TR { border-color: transparent; } SECTION[rel="History"] .History TBODY TR:hover TD:first-child:before { visibility: visible; } SECTION[rel="History"] .History TBODY TR:hover TD:last-child:before { visibility: visible; } FIGURE.S { position: absolute; width: 335px; height: 335px; top: 0; left: -377px; } FIGURE.S:empty { background: url(/i/icons.210255569.svg#nofoto) no-repeat center; background-size: 200px; } FIGURE.S IMG { filter1: grayscale(1); border-radius: 20px; transition: 300ms; cursor: zoom-in; max-height: 335px; max-width: 335px; } FIGURE.S IMG:hover { filter1: grayscale(0); } FIGURE.S .flex-control-nav { bottom: -33px !important; } FIGURE.S .flex-control-nav LI { margin: 0 4px !important;} FIGURE.S .flex-control-nav A { width: 28px !important; height: 24px !important; background: none !important; border-radius: 0 !important; transform: skewX(-11.6deg); box-shadow: none !important; } FIGURE.S .flex-control-nav A:after { position: absolute; display: block; width: 100%; height: 6px; top: 9px; background: #AAA; content: ""; } FIGURE.S .flex-control-nav A.flex-active:after { background: #C41230; } FIGURE.S UL.slides > LI { display: flex !important; width: 335px; height: 335px; justify-content: center; align-items: center; } .Overlay { display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.88); flex-direction: column; } .Overlay U { display: block; position: absolute; width: 25px; height: 25px; top: 30px; right: 30px; background: url(/i/icons.210255569.svg#overlay-close); cursor: pointer; } .Overlay FIGURE { width: calc(100% - 180px); height: calc(100% - 90px); max-width: 1005px; max-height: 1005px; margin: 30px 0 80px 0; } .Overlay FIGURE DIV.flex-viewport { width: 100%; height: 100%; } .Overlay FIGURE .flex-control-nav { position: absolute; width: auto; bottom: 20px; left: 50%; transform: translateX(-50%); line-height: 18px; } .Overlay FIGURE .flex-control-nav A { width: 50px; height: 7px; background: #C41230 !important; border-radius: 0; transform: skewX(-11.6deg); box-shadow: none; } .Overlay FIGURE A.flex-active { background: #FFF !important; } .Overlay FIGURE .flex-direction-nav A { width: 30px; height: 50px; margin-top: -50px; opacity: 1; } .Overlay FIGURE .flex-direction-nav A:before { display: block; width: 25px; height: 50px; color: #C41230; text-shadow: none; content: ""; } .Overlay FIGURE .flex-prev { left: 30px; } .Overlay FIGURE .flex-next { right: 30px; } .Overlay FIGURE .flex-prev:before { background: url(/i/icons.210255569.svg#back); transform: scaleX(.75); } .Overlay FIGURE .flex-next:before { background: url(/i/icons.210255569.svg#back); transform: scaleX(-.75); } .Overlay FIGURE UL { width: 100%; height: 100%; } .Overlay FIGURE UL.slides LI { position: relative; display: flex !important; width: 100%; height: 100%; justify-content: center; align-items: center; } .Overlay FIGURE UL.slides LI IMG { max-width: 100%; max-height: 100%; border-radius: 5px; } .Overlay H2 { height: 50px; margin-top: 20px; color: #FFF; font-size: 27px; max-width: calc(100% - 180px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .Overlay H2 A { color: #C41230; text-decoration: none; font-size: 28px; } .Overlay H2 A:hover { text-decoration: underline; } .Overlay FIGURE.A { height: calc(100% - 170px); margin-top: 0; } .Overlay FIGURE.A UL.slides LI { flex-direction: column; } .Overlay FIGURE.A UL.slides LI H3 { width: 100%; padding-top: 15px; color: #FFF; font-size: 20px; font-weight: 500; } .Overlay FIGURE.A UL.slides LI H3 A { color: #C41230; font-size: 15px; float: right; text-decoration: none; } .Overlay FIGURE.A UL.slides LI H3 A:after { display: inline-block; width: 11px; height: 11px; margin-left: 5px; background: url(/i/icons.210255569.svg#newwin); filter: invert(18%) sepia(83%) saturate(4550%) hue-rotate(341deg) brightness(77%) contrast(99%); content: ""; } .Overlay FIGURE.A UL.slides LI H3 A:hover { text-decoration: underline; } .Overlay FIGURE.A UL.slides LI H4 { width: 100%; text-align: left; font-size: 14px; font-weight: 400; color: #999; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .Overlay FIGURE.A SVG { border-radius: 5px; background-color: #FFF; } } @media screen and (max-width: 980px) { #Content { padding: 0; } SECTION:first-child { display: block; width: 100%; overflow-x: hidden; } #Info { display: flex; width: 100%; border-bottom: 1px solid #CCC; } #Info H2:first-child { display: none; } #Info H2 { position: relative; padding: 20px 30px; font-size: 32px; font-weight: 700; white-space: nowrap; } #Info H2 I { display: block; font-size: 24px; font-weight: 400; font-style: normal; color: #666; } #Info H2:after { position: absolute; width: 0; height: 100%; top: 0; right: 0; border-right: 1px solid #CCC; transform: skewX(-11.6deg); content: ""; } #Info H2:nth-child(3) { flex-basis: 100%; } #Info H2 A { color: #000; text-decoration: none; } #Info DIV { min-width: 115px; background: url(/i/icons.210255569.svg#back) no-repeat center; background-size: 56px; cursor: pointer; content: ""; } ARTICLE H1 { margin: 0; padding: 30px; min-height: 90px; font-size: 40px; font-weight: 700; text-align: left; } ARTICLE H1.Sale { position: relative; padding-left: 160px; } ARTICLE H1.Sale:before { position: absolute; width: 120px; height: 100px; left: 15px; background: url(/i/icons.210255569.svg#sale); transform: rotate(-27deg); content: ""; } #Buy { padding: 30px; } #Locked { margin-bottom: 15px; font-size: 32px; line-height: 1.25; } #Locked:before { display: inline-block; width: 28px; height: 33px; margin: 0 10px -2px 0; background: url(/i/icons.210255569.svg#lock) no-repeat center; content: ""; } #Price { margin-top: -10px; font-size: 48px; font-weight: 700; color: #C41230; } #Price SMALL { font-size: 80%; } #Price SPAN { font-size: 32px; font-weight: 500; } #Price I { font-size: 42px; font-weight: 700; font-style: normal; } #Package { margin-top: 10px; line-height: 27px; color: #666; } #Package SPAN { font-weight: 500; color: #C41230; } #Action { font-size: 36px; } #Buy BUTTON { display: block; margin-top: 5px; margin-bottom: 0; float: right; } #OldNumber { margin: 0 30px; } #OldNumber A { text-decoration: none; font-weight: 500; } #Weight { display: none; } #NotAvailable { padding: 0 30px; font-size1: 14px; font-weight: 300; color: #999; } #NotSupplied:before { position: relative; content: "× "; font-size: 40px; color: #C41230; vertical-align: -2px; } HR { display: none; } #Tabs { max-width: 100%; overflow-x: scroll; display: flex; margin-top: 30px; white-space: nowrap; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } #Tabs::-webkit-scrollbar { display: none; } #Tabs A { flex-basis: 50%; padding: 25px 40px; font-size: 34px; line-height: 1; color: #C41230; cursor: pointer; border: 1px solid #CCC; border-left: none; user-select: none; transform: skewX(-11.6deg); text-decoration: none; } #Tabs A DIV { transform: skewX(11.6deg); } #Tabs A:first-child { padding-left: 30px; } #Tabs A:last-child { border-right: none; } #Tabs A:only-child { flex-basis: 100%; } #Tabs A.Active { color: #222 !important;border-bottom: 1px solid #F2F2F2; font-weight: 500; } SECTION { display: none; } SECTION.Active { display: block; } SECTION[rel="Replacements"] DIV.NotFound { color: #666; margin: 30px; font-size: 32px; } SECTION[rel="Stock"] { padding: 30px; } SECTION.Loading { position: relative; height: 200px; } SECTION.Loading:before { position: absolute; left: calc(50% - 30px); top: calc(50% - 30px); width: 60px; height: 60px; background: url(/i/icons.210255569.svg#gear); filter: grayscale(1); opacity: .5; animation: rotating 2s linear infinite; content: ""; } #OldNumbers { position: relative; margin: 30px; line-height: 1.5; font-size: 30px; } #OldNumbers A { text-decoration: none; color: #000; } #OldNumbers A.Cur { color: #C41230; } FIGURE.S { visibility: hidden; margin: 30px 0 0 0; position: relative; width: 100%; } FIGURE.S[many] { margin-bottom: 40px; } FIGURE.S:empty { margin: 0; } FIGURE.S IMG { border-radius: 20px; transition: 300ms; cursor: zoom-in; width: 780px; max-height1: 580px; aspect-ratio1: .5; } FIGURE.S .flex-control-nav { bottom: -60px !important;} FIGURE.S .flex-control-nav A { width: 40px !important; height: 40px !important; background: none !important; border-radius: 0 !important; transform: skewX(-11.6deg); box-shadow: none !important; } FIGURE.S .flex-control-nav A:after { position: absolute; display: block; width: 100%; height: 9px; top: 15px; background: #AAA; content: ""; } FIGURE.S .flex-control-nav A.flex-active:after { background: #C41230; } FIGURE.S UL.slides > LI { display: flex !important; width: 770px; justify-content: center; align-items: center; } .Remains { width: 100%; font-size: 32px; } .Remains THEAD { display: none; } .Remains TBODY TR:not(:first-child) { border-top: 1px solid #CCC; } .Remains TD { position: relative; padding: 20px 0; } .Remains TD:last-child { text-align: right; } .Remains TD A { display: block; margin: -20px 0; padding: 20px 0; text-decoration: none; color: #000 !important; } SECTION[rel="Applicability"] { padding: 0 30px 15px 30px; } SECTION[rel="Applicability"] H2 { margin: 50px 0 30px 0; text-align: center; } SECTION[rel="Applicability"] H3 { position: relative; } SECTION[rel="Applicability"] H3 B { display: block; font-size: 16px; font-weight: 500; color: #999; } SECTION[rel="Applicability"] H3:after { float: right; font-size: 36px; font-weight: 400; margin-top: -18px; color: #777; content: "+"; } SECTION[rel="Applicability"] H3.Active:after { content: "–"; } SECTION[rel="Applicability"] H4 { margin: 15px 0; color: #999; text-align: center; } SECTION[rel="Applicability"] UL { list-style: none; font-size: 30px; } SECTION[rel="Applicability"] UL.Groups > LI { padding: 15px 0; border-top: 1px solid #999; } SECTION[rel="Applicability"] UL.Series { display: none; } SECTION[rel="Applicability"] UL.Models > LI { position: relative; padding: 15px 40px 15px 0; font-size: 24px; background: url(/i/icons.210255569.svg#arr-down) no-repeat right 32px; background-size: 22px 22px; border-top: 1px solid #CCC; } SECTION[rel="Applicability"] UL.Models > LI B { display: block; font-size: 30px; } SECTION[rel="Applicability"] UL.Models > LI.Opened { background-image: url(/i/icons.210255569.svg#dash); } SECTION[rel="Applicability"] UL.Models > LI.Loading { background: none; } SECTION[rel="Applicability"] UL.Models > LI.Loading:before {position: absolute; right: 0; top: 30px; width: 22px; height: 22px; animation: rotating 2s linear infinite; background: url(/i/icons.210255569.svg#gear); filter: grayscale(1); opacity: .5; content: ""; } SECTION[rel="Applicability"] UL.Models > LI:not(.Opened) > UL { display: none; } .Schemas { display: grid; width: calc(100% + 40px); margin: 20px 0; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-gap: 30px; list-style: none; } .Schemas LI { position: relative; background: #FFF; } .Schemas LI A { text-decoration: none; } .Schemas LI IMG { display: block; box-sizing: border-box; width: 100%; border: 20px solid #FFF; } .Overlay { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; background: rgba(0, 0, 0, 0.88); padding: 30px; } .Overlay U { display: block; position: absolute; width: 45px; height: 45px; top: 30px; right: 30px; background: url(/i/icons.210255569.svg#overlay-close); } .Overlay H2 { margin-bottom: 20px; padding-right: 90px; color: #FFF; font-size: 34px; } .Overlay H2 A { display: block; color: #C41230; font-size: 48px; text-decoration: none; } .Overlay FIGURE { width: 100%; outline1: 1px solid rgba(255, 255, 255, 0.25); } .Overlay FIGURE .flex-viewport { width: 100%; height: 100%; } .Overlay FIGURE .flex-control-nav { position: absolute; width: 100%; bottom: 30px; left: 50%; transform: translateX(-50%); line-height: 18px; outline1: 1px solid red; } .Overlay FIGURE .flex-control-nav A { width: 50px; height: 7px; background: #C41230 !important; border-radius: 0; transform: skewX(-11.6deg); box-shadow: none; } .Overlay FIGURE A.flex-active { background: #FFF !important; } .Overlay FIGURE .flex-direction-nav { display: none; } .Overlay FIGURE UL.slides LI { flex-direction: column; } .Overlay FIGURE UL.slides LI H3 { display: flex; flex-direction: column; margin-top: 15px; font-size: 30px; font-weight: 500; } .Overlay FIGURE UL.slides LI H3 SPAN { order: 2; color: #FFF; } .Overlay FIGURE UL.slides LI H3 A { order: 1; color: #C41230; text-decoration: none; margin-bottom: 5px; } .Overlay FIGURE UL.slides LI H3 A:after { display: inline-block; width: 22px; height: 22px; margin-left: 10px; background: url(/i/icons.210255569.svg#newwin) no-repeat center; content: ""; } .Overlay FIGURE UL.slides LI H4 { font-weight: 400; font-size: 20px; color: #999; } .Overlay FIGURE SVG { border-radius: 5px; background-color: #FFF; } SECTION[rel="AddlInfo"] .Spec { box-sizing: border-box; width: calc(100% - 60px); margin: 30px; } SECTION[rel="AddlInfo"] .Spec TR { border-top: 1px dashed #CCC; } SECTION[rel="AddlInfo"] .Spec TR:first-child { border: none; } SECTION[rel="AddlInfo"] .Spec TD { padding: 12px 0; } SECTION[rel="AddlInfo"] .Spec TD:first-child { padding-right: 20px; } }