@media screen and (min-width: 981px) { #Content { width: 50%; min-width: 800px; padding: 60px 0; } #Content H2 { margin: 0 0 10px 0; font-size: 23px; line-height: 33px; font-weight: 400; text-align: center; } DIV.Step { padding-top: 50px; background: url(/i/icons.210255569.svg#next) no-repeat 50% 15px; background-size: 15px 30px; } DIV.Form > LABEL { display: table; width: 100%; padding: 7px 0; font-size: 18px; line-height: 34px; } DIV.Form > LABEL.I { line-height: 18px; } DIV.Form > LABEL.I > SMALL { display: block; font-size: 12px; line-height: 18px; font-weight: 300; } DIV.Form > LABEL > DIV.Example { margin-top: 10px; margin-left: calc(30% - 5px); font-size: 13px; font-weight: 300; color: #777; } DIV.Form > LABEL U { text-decoration: none; } DIV.Radio { display: table; margin: 0 auto; } DIV.Radio LABEL { display: table-cell; position: relative; line-height: 40px; text-align: center; white-space: nowrap; color: #777; cursor: pointer; } DIV.Radio LABEL:before { display: block; position: absolute; z-index: -1; width: 100%; height: 100%; left: 0; top: 0; background-color: #FFF; outline: 1px solid #CCC; border-right: none; transform: skewX(-11.6deg); content: "";} DIV.Radio LABEL:last-child:before { border-right: 1px solid #CCC; } DIV.Radio INPUT { display: none; } DIV.Radio INPUT:checked + LABEL:before {background-color: #C41230; } DIV.Radio INPUT:checked + LABEL { color: #FFF; } #Ownership LABEL { width: 220px; } DIV.Form > LABEL > DIV.Select { position: relative; float: right; box-sizing: border-box; width: 70%; padding: 0px 10px 0px 7px; line-height: 36px; } DIV.Form > LABEL > DIV.Select:before { position: absolute; display: block; z-index: -1; width: 100%; height: 36px; left: 0; top: 0; background-color: #FFF; border: 1px solid #CCC; transform: skewX(-11.6deg); content: ""; } DIV.Form > LABEL > DIV > SELECT { box-sizing: border-box; width: 100%; height: 36px; padding: 0 8px; font-size: 18px; outline: 0; border: none; background-color: transparent; -moz-appearance: none; -webkit-appearance: none; appearance: none; background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4=) no-repeat center right; } DIV.Form > LABEL I { position: relative; display: block; float: right; width: 70%; font-style: normal; line-height: normal; } DIV.Form > LABEL I:before { position: absolute; display: block; z-index: -1; width: 100%; height: 36px; left: 0; top: 0; background-color: #FFF; border: 1px solid #CCC; transform: skewX(-11.6deg); content: ""; } DIV.Form > LABEL I > INPUT { box-sizing: border-box; width: 100%; height: 38px; padding: 0 40px 0 15px; font-size: 18px; outline: 0; background: none; border: none; vertical-align: middle; } DIV.Form > LABEL > I.Name { width: 25%; margin-right: 10px; } DIV.Form > LABEL > I.Surname { width: calc(45% - 10px); } INPUT[valid="0"][live], INPUT[valid="0"]:not(:focus) { background: url(/i/icons.210255569.svg#overlay-close) no-repeat right 13px center !important; background-size: 14px 14px !important; } INPUT[valid="1"]:not(:focus) { background: url(/i/icons.210255569.svg#check) no-repeat right 10px center; background-size: 18px 18px; } DIV.Check { position: relative; margin: 7px 0 7px 30%; } DIV.Check INPUT { display: none; } DIV.Check INPUT + LABEL { position: relative; float: left; width: 38px; height: 36px; margin-right: 15px; background: none; cursor: pointer; } DIV.Check INPUT + LABEL:before { position: absolute; display: block; z-index: -1; width: 38px; height: 36px; left: 0; top: 0; background-color: #FFF; border: 1px solid #CCC; transform: skewX(-11.6deg); content: ""; } DIV.Check INPUT:checked + LABEL { background: url(/i/icons.210255569.svg#check) no-repeat center; background-size: 23px; } DIV.Check LABEL:last-child { display: inline-block; font-size: 18px; line-height: 40px; } DIV.Agree { margin-top: 20px; } DIV.Agree P { font-size: 13px; line-height: 16px; text-align: justify; } DIV.Form > BUTTON { display: block; margin: 30px auto; } DIV.Form > LABEL.Prefix > I > INPUT { padding-left: 65px; } DIV.Form > LABEL.Prefix > I > SPAN { display: none; position: absolute; left: 15px; top: 8px; font-size: 18px; color: #000; } #OwnerForm > DIV { width: 110px; margin-right: 10px; } #OwnerForm > I { width: calc(70% - 120px); } SPAN.Error { position: relative; float: right; width: 70%; font-size: 13px; line-height: 30px; white-space: nowrap; } DIV.Search > DIV { text-align: center; } DIV.Search > DIV > I { position: relative; display: block; width: 180px; margin: 0 auto; } DIV.Search > DIV > I:before { position: absolute; display: block; z-index: -1; width: 100%; height: 36px; left: 0; top: 0; background-color: #FFF; border: 1px solid #CCC; transform: skewX(-11.6deg); content: ""; } DIV.Search > DIV > I > INPUT { box-sizing: border-box; width: 100%; height: 38px; padding: 0 15px; font-size: 18px; text-align: center; outline: 0; background: none; border: none; vertical-align: middle; } DIV.Search > DIV > I > INPUT:disabled { color: #000; } #Content INPUT[placeholder]:-moz-placeholder { font-size: 15px; font-weight: 300; text-align: center; color: #CCC; } #Content INPUT[placeholder]::-webkit-input-placeholder { font-size: 15px; font-weight: 300; text-align: center; color: #CCC; } DIV.Form > LABEL.File > DIV { position: relative; float: right; box-sizing: border-box; width: 70%; height: 38px; padding: 0px 10px 0px 15px; cursor: pointer; } DIV.Form > LABEL.File > DIV:before { position: absolute; display: block; z-index: -1; width: 100%; height: 36px; left: 0; top: 0; background: #FFF url(/i/icons.210255569.svg#attach) no-repeat 10px center; background-size: 18px 18px; border: 1px solid #CCC; transform: skewX(-11.6deg); content: ""; } DIV.Form > LABEL.File > DIV.L { background: url(/i/loading.133624380.gif) no-repeat right 9px top 8px; background-size: 23px, auto; } DIV.Form > LABEL.File[valid="1"] > DIV {background: url(/i/icons.210255569.svg#check) no-repeat right 10px center; background-size: 18px 18px; } DIV.Form > LABEL.File > DIV > SPAN { position: absolute; left: 36px; top: 8px; font-size: 18px; line-height: normal; } DIV.Form > LABEL.File INPUT[type="file"] {opacity: 0; filter: alpha(opacity=0); cursor: pointer; } DIV.Documents { margin: 10px 0 0 calc(30% - 5px); font-size: 13px; } DIV.Documents UL { margin: 10px 0; font-size: 13px; font-weight: 300; } DIV.Documents UL LI { margin: 5px 0; } DIV.Documents UL LI A:after { display: inline-block; width: 9px; height: 9px; margin: 0 0 -2px 4px; background: url(/i/icons.210255569.svg#newwin) no-repeat center; content: ""; } #ThankYou { position: absolute; left: 50%; top: 45%; transform: translateX(-50%) translateY(-50%); text-align: center; } #ThankYou P { margin-bottom: 20px; } #ThankYou H2 { margin-bottom: 5px; } #ThankYou H2 IMG { display: block; width: 80px; height: 80px; margin: 0 auto; } .Result { text-align: center; } .Result IMG { width: 24px; height: 24px; margin-top: 5px; animation: rotating 2s linear infinite; filter: saturate(0); } .Result H2 { margin: 0 !important; font-size: 20px !important; line-height: 20px !important; font-weight: 700 !important; } } @media screen and (max-width: 980px) { #Content { padding: 60px; } #Content H2 { margin: 0 0 20px 0; font-size: 46px; line-height: 66px; font-weight: 400; text-align: center; } DIV.Step { padding-top: 100px; background: url(/i/icons.210255569.svg#next) no-repeat 50% 30px; background-size: 30px 60px; } DIV.Form > LABEL { display: table; width: 100%; padding: 14px 0; font-size: 36px; line-height: 68px; } DIV.Form > LABEL.I { line-height: 36px; } DIV.Form > LABEL.I > SMALL { display: block; font-size: 24px; line-height: 36px; font-weight: 300; } DIV.Form > LABEL > DIV.Example { margin-top: 20px; margin-left: calc(30% - 10px); font-size: 26px; font-weight: 300; color: #777; } DIV.Form > LABEL U { text-decoration: none; } DIV.Radio { display: table; margin: 0 auto; } DIV.Radio LABEL { display: table-cell; position: relative; margin: 20px auto; line-height: 80px; text-align: center; white-space: nowrap; color: #777; cursor: pointer; } DIV.Radio LABEL:before { display: block; position: absolute; z-index: -1; width: 100%; height: 100%; left: 0; top: 0; background-color: #FFF; outline: 1px solid #CCC; border-right: none; transform: skewX(-11.6deg); content: "";} DIV.Radio LABEL:last-child:before { border-right: 1px solid #CCC; } DIV.Radio INPUT { display: none; } DIV.Radio INPUT:checked + LABEL:before {background-color: #C41230; } DIV.Radio INPUT:checked + LABEL { color: #FFF; } #Ownership LABEL { width: 440px; } DIV.Form > LABEL > DIV.Select { position: relative; float: right; box-sizing: border-box; width: 70%; padding: 0px 20px 0px 14px; line-height: 72px; } DIV.Form > LABEL > DIV.Select:before { position: absolute; display: block; z-index: -1; width: 100%; height: 72px; left: 0; top: 0; background-color: #FFF; border: 1px solid #CCC; transform: skewX(-11.6deg); content: ""; } DIV.Form > LABEL > DIV > SELECT { box-sizing: border-box; width: 100%; height: 72px; padding: 0 16px; font-size: 36px; outline: 0; border: none; background-color: transparent; -moz-appearance: none; -webkit-appearance: none; appearance: none; background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4=) no-repeat center right; } DIV.Form > LABEL I { position: relative; display: block; float: right; width: 70%; font-style: normal; line-height: normal; } DIV.Form > LABEL I:before { position: absolute; display: block; z-index: -1; width: 100%; height: 72px; left: 0; top: 0; background-color: #FFF; border: 1px solid #CCC; transform: skewX(-11.6deg); content: ""; } DIV.Form > LABEL I > INPUT { box-sizing: border-box; width: 100%; height: 76px; padding: 0 80px 0 30px; font-size: 36px; outline: 0; background: none; border: none; vertical-align: middle; } DIV.Form > LABEL > I.Name { width: 25%; margin-right: 20px; } DIV.Form > LABEL > I.Surname { width: calc(45% - 20px); } INPUT[valid="0"][live], INPUT[valid="0"]:not(:focus) { background: url(/i/icons.210255569.svg#overlay-close) no-repeat right 26px center !important; background-size: 28px 28px !important; } INPUT[valid="1"]:not(:focus) { background: url(/i/icons.210255569.svg#check) no-repeat right 20px center; background-size: 36px 36px; } DIV.Check { position: relative; margin: 14px 0 14px 30%; } DIV.Check INPUT { display: none; } DIV.Check INPUT + LABEL { position: relative; float: left; width: 76px; height: 72px; margin-right: 30px; background: none; cursor: pointer; } DIV.Check INPUT + LABEL:before { position: absolute; display: block; z-index: -1; width: 76px; height: 72px; left: 0; top: 0; background-color: #FFF; border: 1px solid #CCC; transform: skewX(-11.6deg); content: ""; } DIV.Check INPUT:checked + LABEL { background: url(/i/icons.210255569.svg#check) no-repeat center; background-size: 46px; } DIV.Check LABEL:last-child { display: inline-block; font-size: 36px; line-height: 80px; } DIV.Agree { margin-top: 40px; } DIV.Agree P { font-size: 26px; line-height: 32px; text-align: justify; } DIV.Form > BUTTON { display: block; margin: 60px auto; } DIV.Form > LABEL.Prefix > I > INPUT { padding-left: 130px; } DIV.Form > LABEL.Prefix > I > SPAN { display: none; position: absolute; left: 30px; top: 16px; font-size: 36px; color: #000; } #OwnerForm > DIV { width: 220px; margin-right: 20px; } #OwnerForm > I { width: calc(70% - 240px); } SPAN.Error { position: relative; float: right; width: 70%; font-size: 26px; line-height: 60px; white-space: nowrap; } DIV.Search > DIV { text-align: center; } DIV.Search > DIV > I { position: relative; display: block; width: 360px; margin: 0 auto; } DIV.Search > DIV > I:before { position: absolute; display: block; z-index: -1; width: 100%; height: 72px; left: 0; top: 0; background-color: #FFF; border: 1px solid #CCC; transform: skewX(-11.6deg); content: ""; } DIV.Search > DIV > I > INPUT { box-sizing: border-box; width: 100%; height: 76px; padding: 0 30px; font-size: 36px; text-align: center; outline: 0; background: none; border: none; vertical-align: middle; } DIV.Search > DIV > I > INPUT:disabled { color: #000; } #Content INPUT[placeholder]:-moz-placeholder { font-size: 30px; font-weight: 300; text-align: center; color: #CCC; } #Content INPUT[placeholder]::-webkit-input-placeholder { font-size: 30px; font-weight: 300; text-align: center; color: #CCC; } DIV.Form > LABEL.File > DIV { position: relative; float: right; box-sizing: border-box; width: 70%; height: 76px; padding: 0px 20px 0 30px; cursor: pointer; } DIV.Form > LABEL.File > DIV:before { position: absolute; display: block; z-index: -1; width: 100%; height: 72px; left: 0; top: 0; background: #FFF url(/i/icons.210255569.svg#attach) no-repeat 20px center; background-size: 36px 36px; border: 1px solid #CCC; transform: skewX(-11.6deg); content: ""; } DIV.Form > LABEL.File > DIV.L { background: url(/i/loading.133624380.gif) no-repeat right 18px top 16px; background-size: 46px, auto; } DIV.Form > LABEL.File[valid="1"] > DIV {background: url(/i/icons.210255569.svg#check) no-repeat right 20px center; background-size: 36px 36px; } DIV.Form > LABEL.File > DIV > SPAN { position: absolute; left: 72px; top: 16px; font-size: 36px; line-height: normal; } DIV.Form > LABEL.File INPUT[type="file"] {opacity: 0; filter: alpha(opacity=0); cursor: pointer; } DIV.Documents { margin: 20px 0 0 calc(30% - 10px); font-size: 26px; } DIV.Documents UL { margin: 20px 0; font-size: 26px; font-weight: 300; } DIV.Documents UL LI { margin: 10px 0; } DIV.Documents UL LI A:after { display: inline-block; width: 18px; height: 18px; margin: 0 0 -4px 8px; background: url(/i/icons.210255569.svg#newwin) no-repeat center; content: ""; } #ThankYou { position: absolute; left: 50%; top: 45%; transform: translateX(-50%) translateY(-50%); text-align: center; } #ThankYou P { margin-bottom: 40px; } #ThankYou H2 { margin-bottom: 10px; } #ThankYou H2 IMG { display: block; width: 160px; height: 160px; margin: 0 auto; } .Result { text-align: center; } .Result IMG { width: 48px; height: 48px; margin-top: 10px; animation: rotating 2s linear infinite; filter: saturate(0); } .Result H2 { margin: 0 !important; font-size: 40px !important; line-height: 40px !important; font-weight: 700 !important; } #DesktopOnly { position: absolute; z-index: 99; box-sizing: border-box; width: 100vw; height: calc(100vh + 150px); left: 0; top: 0; padding: 100px; font-size: 40px; color: #FFF; background: #C41230; } DIV.Form SELECT { color: #000; } INPUT[disabled] { opacity: 1 !important; } #Ownership LABEL { display: block; } DIV.Radio { display: block; margin: 0 auto; text-align: center; outline1: 1px solid red; } DIV.Radio LABEL { display: inline-block; position: relative; line-height: 72px; text-align: center; white-space: nowrap; color: #777; cursor: pointer; } DIV.Form > LABEL { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; margin: 0 !important; padding: 0 !important; } DIV.Form > LABEL > U { order: 1; line-height: 68px; } DIV.Form > LABEL > I { order: 2; width: 100% !important; margin: 0 0 20px 0; } DIV.Form > LABEL > U > SMALL { display: inline; font-size: unset; font-weight: 400; } DIV.Form > LABEL > DIV.Select { order: 2; width: 100% !important; margin: 0 0 20px 0; } DIV.Form > LABEL.File > DIV { order: 2; width: 100%; } DIV.Check { margin: 40px 0 0 0 !important; } DIV.Documents { margin: 40px 0 0 0; } DIV.Documents UL { list-style-position: inside; } SPAN.Error { order: 3; float: none; width: 100%; font-size: 26px; line-height: 32px; white-space: normal; } #OwnerForm > I { order: 3; } I.Surname { order: 3 !important; } #ThankYou { position: relative; left: auto; transform: none; } }