@media screen and (min-width: 981px) { H1 + A { display: block; position: absolute; left: 80px; top: 60px; padding: 5px 0 5px 36px; text-decoration: none; line-height: 1.04; font-size: 15px; font-weight: 500; background: url(/i/icons.210255569.svg#mass-search) no-repeat center left; background-size: 33px 33px; } H1 + P { text-align: center; } #Order { width: calc(100% + 70px); margin: 0 -30px 30px -40px; font-size: 15px; } #Order THEAD TR { border-bottom: 1px solid #CCC; } #Order TBODY TR { border-top: 1px solid #CCC; } #Order THEAD TD { padding: 10px 20px 10px 0; color: #777; font-weight: 300; vertical-align: bottom; } #Order TBODY TD { padding: 10px 20px 10px 0; cursor: pointer; } #Order TD { position: relative; max-width: 150px; padding: 0; white-space: nowrap; } #Order TBODY TD:not(:last-child) A { display: block; margin: -10px 0; padding: 10px 0 10px 0; text-decoration: none; color: #000; } #Order TD:first-child { min-width: 20px; border-top: 1px solid transparent; } #Order TD:first-child SPAN { display: block; text-align: right; color: #999; } #Order TD:nth-child(5) { width: 75%; } #Order TD:nth-child(5) SPAN { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #Order TD:nth-child(6) { text-align: right; } #Order TD:nth-child(8) { padding: 0 30px 0 50px; } #Order THEAD TD:nth-child(8) { padding-bottom: 10px; text-align: center; } #Order TBODY TD:nth-child(8) { vertical-align: middle; } #Order TD LABEL { position: relative; display: block; width: 90px; height: 38px; margin: 0; line-height: 38px; background: #FFF; border-radius: 5px; text-align: center; cursor: pointer; } #Order TD:nth-child(7), #Order THEAD TD:nth-child(9) { padding-right: 0; text-align: right; } #Order TBODY TD:nth-child(9) { padding: 0; font-weight: 500; text-align: right; } #Order TD:last-child { padding: 0; border-top: 1px solid transparent; } #Order TBODY TD:last-child A { visibility: hidden; display: block; width: 30px; padding: 10px 0; text-align: right; background: url(/i/icons.210255569.svg#overlay-close) no-repeat center right; background-size: 10px; } #Order TBODY TR:hover TD:last-child A { visibility: visible; } #Order 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: ""; } #Order 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: ""; } #Order TBODY TR:hover { background-color: #FFF; border-color: transparent; } #Order TBODY TR:hover + TR { border-color: transparent; } #Order TBODY TR:hover TD:first-child:before { visibility: visible; } #Order TBODY TR:hover TD:last-child:before { visibility: visible; } #Order TBODY TR:hover LABEL:before { visibility: visible; } #Order TBODY TR:hover LABEL:after { visibility: visible; } #Order TBODY TR:hover LABEL { background: #C41230; color: #FFF; } #Order TBODY TR.Fixed { background-color: #FFF; border-color: transparent; } #Order TBODY TR.Fixed + TR { border-color: transparent; } #Order TBODY TR.Fixed TD:first-child:before { visibility: visible; } #Order TBODY TR.Fixed TD:last-child:before { visibility: visible; } #Order TBODY TR.Fixed LABEL:before { visibility: visible; } #Order TBODY TR.Fixed LABEL:after { visibility: visible; } #Order TBODY TR.Fixed LABEL { background: #C41230; color: #FFF; } #Order TFOOT TD { padding: 10px 0; border-top: 1px solid #CCC; } #Total { text-align: right; } #Total DIV { display: block; margin-left: 5px; font-size: 20px; font-weight: 500; color: #C41230; } #Total DIV SUP { position: absolute; right: -10px; } #Total SPAN { display: block; margin: -2px 0 4px 0; font-weight: 500; } #Total EM { display: block; font-size: 14px; line-height: 15px; font-style: normal; } #Total EM SUP { font-size: 16px; font-weight: 500; color: #C41230; } DIV.Reg { text-align: center; } DIV.Reg DIV { margin-bottom: 5px; font-size: 18px; font-weight: 500; } DIV.Reg SMALL { display: block; margin-bottom: 30px; font-size: 14px; } #QuickForm { width: 36%; margin: 0 auto; text-align: center; } #QuickForm H3 { margin-bottom: 20px; font-size: 18px; font-weight: 500; } #QuickForm LABEL { display: block; height1: 36px; margin-bottom: 20px; text-align: center; background-color: #FFF; border: 1px solid #CCC; transform: skewX(-11.6deg); } #QuickForm INPUT { width: 90%; height: 34px; font-size: 18px; text-align: center; border: none; outline: none; transform: skewX(11.6deg); } #QuickForm TEXTAREA { width: 90%; max-width: 90%; height1: 54px; padding: 10px 0; font-size: 18px; text-align: center; border: none; outline: none; transform: skewX(11.6deg); text-align: left; } #QuickForm SMALL { display: block; margin: -15px 0 20px 0; color: #999; } #Content *[placeholder]:-moz-placeholder { font-size: 15px !important; text-align: center; color: #CCC; } #Content *[placeholder]::-webkit-input-placeholder { font-size: 15px !important; text-align: center; color: #CCC; } DIV.Next { text-align: center; } #DeliveryForm { display: flex; margin: 70px -25px 40px -25px; justify-content: space-between; } #DeliveryForm DIV { position: relative; flex-basis: 50%; margin: 0 25px; } #DeliveryForm H3 { position: absolute; left: 0; top: -40px; font-size: 18px; font-weight: 500; } #DeliveryForm LABEL { display: flex; margin-top: 10px; align-items: center; justify-content: space-between; } #DeliveryForm LABEL:nth-of-type(1) { margin-top: 0; } #DeliveryForm H4 { font-size: 14px; font-weight: 400; color: #555; } #DeliveryForm H4 SMALL { display: block; } #DeliveryForm INPUT { display: block; box-sizing: border-box; width: 60%; height: 30px; padding: 0 10px; font-size: 14px; border: 1px solid #CCC; border-radius: 5px; outline: none; } #DeliveryForm SELECT { display: block; box-sizing: border-box; width: 60%; height: 30px; padding: 0 10px; font-size: 14px; border: 1px solid #CCC; border-radius: 5px; outline: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; background: #FFF url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4=) no-repeat center right 5px; } #DeliveryForm TEXTAREA { display: block; box-sizing: border-box; width: 100%; height: 100%; padding: 10px; margin: 0; font-size: 14px; border: 1px solid #CCC; border-radius: 5px; resize: none; outline: none; } #ThankYou { position: absolute; left: 50%; top: 45%; transform: translateX(-50%) translateY(-50%); text-align: center; } #ThankYou H2 { margin-bottom: 5px; margin: 0 0 10px 0; font-size: 23px; line-height: 33px; font-weight: 500; } #ThankYou H2 IMG { display: block; width: 80px; height: 80px; margin: 0 auto; } } @media screen and (max-width: 980px) { #Content { padding: 60px 0 80px 0; } #Content H1 { margin-bottom: 60px; } #Order { width: 100%; } #Order TR { position: relative; padding: 40px; border-top: 1px solid #999; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; } #Order TD { position: relative; outline1: 1px solid red; } #Order TD:nth-child(1) { order: 1; position: absolute; left: 30px; top: -19px; font-size: 30px; padding: 0 10px; background: #F2F2F2; color: #999; } #Order TD:nth-child(2) { order: 4; } #Order TD:nth-child(3) { order: 3; } #Order TD:nth-child(4) { order: 6; flex-basis: 100%; height: 10px; border-top1: 1px solid red; } #Order TD:nth-child(5) { order: 2; flex-basis: 100%; margin-bottom: 15px; } #Order TD:nth-child(6) { order: 5; flex-grow: 1; text-align: right; } #Order TD:nth-child(7) { order: 7; flex-basis: 39%; font-size: 34px; text-align: left; white-space: nowrap; } #Order TD:nth-child(8) { order: 8; flex-basis: 22%; font-size: 36px; font-weight: 700; text-align: center; } #Order TD:nth-child(9) { order: 9; flex-basis: 39%; font-size: 34px; font-weight: 500; text-align: right; white-space: nowrap; } #Order TD:nth-child(10) { display: none; } #Order TD A { display: block; font-size: 34px; color: #000 !important; text-decoration: none; } #Order TD:nth-child(2) A { font-size: 28px; color: #666 !important; } #Order TD:nth-child(3) A { font-size: 28px; color: #666 !important; padding-right: .3em; } #Order TD:nth-child(3) A:empty { padding-right: 0; } #Order TD:nth-child(5) A { font-size: 34px; } #Order TD:nth-child(6) A { font-size: 28px; font-weight: 300; color: #666 !important; } #Order TD:nth-child(6) A:before { content: "в наявності "; } #Order TD:nth-child(7):not(.R):after { content: " грн"; font-size: 30px; } #Order TD:nth-child(9):not(.R):after { content: " грн"; font-size: 30px; font-weight: 500; } #Order TD:nth-child(8):before { content: "\d7"; position: absolute; left: 0; top: -2px; font-size: 36px; color: #BBB; transform: translateX(-50%); } #Order TD:nth-child(8):after { content: "="; position: absolute; right: 0; top: -2px; font-size: 36px; color: #BBB; transform: translateX(50%); } #Order TD:nth-child(8) LABEL { color: #C41230; } #Total { margin-bottom: 0 !important; font-size: 30px; text-align: center; border: none !important; } #Total DIV { display: inline; font-size: 45px; font-weight: 500; color: #C41230; } #Total DIV.R { display: block; } #Total SMALL { font-size: 80%; } #Total SUP { display: none; } #Total SPAN { font-weight: 500; } #Total EM { display: block; font-style: normal; color: #C41230; } #Total EM BR { display: none; } .Reg { margin: 0 40px 40px 40px; font-size: 32px; line-height: 1.25; text-align: center; } .Reg SMALL { display: block; margin: 20px 0; } #QuickForm { width: 680px; margin: 0 auto; text-align: center; } #QuickForm H3 { margin-bottom: 20px; font-size: 36px; font-weight: 500; } #QuickForm LABEL { display: block; margin-bottom: 20px; text-align: center; background-color: #FFF; border: 1px solid #CCC; transform: skewX(-11.6deg); } #QuickForm INPUT { width: 90%; height: 58px; font-size: 30px; text-align: center; border: none; outline: none; transform: skewX(11.6deg); } #QuickForm TEXTAREA { width: 90%; max-width: 90%; padding: 10px 0; font-size: 18px; text-align: center; border: none; outline: none; transform: skewX(11.6deg); text-align: left; } #QuickForm SMALL { display: block; margin: -15px 0 20px 0; color: #999; } DIV.Next { text-align: center; } #DeliveryForm { box-sizing: border-box; width: 100%; margin-bottom: 80px; padding: 0 40px; text-align: center; } #DeliveryForm DIV { margin-top: 40px; } #DeliveryForm H3 { margin-bottom: 20px; font-size: 34px; font-weight: 500; } #DeliveryForm LABEL { display: block; width: 100%; margin-top: 30px; } #DeliveryForm H4 { margin-bottom: 8px; font-size: 26px; font-weight: 400; color: #777; } #DeliveryForm INPUT { display: block; box-sizing: border-box; width: 100%; height: 70px; padding: 0 20px; font-size: 30px; border: 1px solid #CCC; border-radius: 5px; outline: none; -moz-appearance: none; -webkit-appearance: none; } #DeliveryForm SELECT { display: block; box-sizing: border-box; width: 100%; height: 70px; padding: 0 20px; font-size: 30px; border: 1px solid #CCC; border-radius: 5px; outline: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; background: #FFF url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4=) no-repeat center right 5px; } #DeliveryForm TEXTAREA { display: block; box-sizing: border-box; width: 100%; height: 200px; padding: 20px; margin: 0; font-size: 30px; border: 1px solid #CCC; border-radius: 5px; resize: none; outline: none; -moz-appearance: none; -webkit-appearance: none; } #ThankYou { position: absolute; width: 700px; left: 50%; top: 45%; transform: translateX(-50%) translateY(-50%); text-align: center; } #ThankYou H2 { margin-bottom: 5px; margin: 0 0 10px 0; font-size: 40px; line-height: 64px; font-weight: 500; } #ThankYou H2 IMG { display: block; width: 100px; margin: 0 auto; } #ThankYou P { font-size: 30px; } }