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; } }