qompile

<!DOCTYPE html><html><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Order Form Demo</title> <link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700,300italic,400italic,500italic,700italic|Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic|Source+Code+Pro:300,400,500,600,700,900" rel="stylesheet"> <link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67439/basic.css" rel="stylesheet" data-populated="true"> <link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67439/data-buttons.css" rel="stylesheet" data-populated="true"> <style> /* FullWidth Template */ .fullwidth, .fullwidth body { padding: 0; max-width: 100%; } .fullwidth > .wrap { padding: 0; margin: 0; max-width: none; } .fullwidth > .wrap [data-theme] { padding: 1.5em 1.5em 3em 1.5em; } .fullwidth > .wrap .wrap { margin: 0 auto; padding: 0; max-width: 850px; } [data-button] { display: block !important; margin: 1em auto !important; } h2 { text-align: center !important; } /* Form Styles */ form, form * { box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; } form { font-size: 10pt; line-height: 1.4; font-weight: 400; font-family: 'Open Sans', sans-serif; -webkit-text-size-adjust: 100%; margin: 0; padding: 0; transition: opacity .3s ease-in-out; } form:after { content: ''; display: block; clear: both; } form fieldset { border: none; padding: 0; } form select, form .split-input > input, form .split-input > select, form input, form textarea { float: left; margin: 0 0 2% 0; margin-bottom: 2%; padding: 5px 8px; width: 49%; height: 40px; outline: none; border: 1px solid rgba(255,255,255,.7); border-radius: 2px; background: rgba(255,255,255,.5); box-shadow: rgba(0,0,0,.15) 0 1px 0; color: rgba(0,0,0,.7); font-weight: 400; font-size: 12pt; transition: all .2s ease-in-out; -webkit-appearance: none; appearance: none; -moz-appearance: none; font-family: 'Source Sans Pro', sans-serif; } form select:focus, form .split-input > *:focus, form input:focus { outline: none; border-color: orange; box-shadow: #fc0 0 0 3px; } form select, form .split-input select { color: rgba(0,0,0,.5); background: rgba(255,255,255,.5); padding-right: 1.5em; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAjElEQVR4Ae2QxbkCARDGMlsB2sxe1ovCKR0uuOTh9jL3fH+Gu/DPP236dG+8Pm1IGTJmdMONGZJCQs78xstJAOJGVU6wJmd2lWRGzg5BcYVqRkHAoepS0aHGAz3KV/mao6ryT5qSQCmY6YsdD5QoCZQoCZSoG1bpGle5Rii3NI6v8jVO0Cwv+OefT2IBOYykNaMbWusAAAAASUVORK5CYII=') !important; background-repeat: no-repeat !important; background-position: calc(100% - .5em) 50% !important; background-size: 12px !important; text-indent: 0.01px; text-overflow: ''; } form select:active, form .split-input select:active { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABBklEQVR4Ae3PQY7TQBCG0VfNLLgGd2SBhO207SBxuZgzcAsWIxfbHiuTFsnsyCd505Kf/gof1P8NPaHfX3z26rFe/IlfX7N6yT2kcFfFa9TYPuWYJw8Vc6yxyTCp7l9ULTIuIOo+3eVkWVSIDQg1x3+mMlZVthAlTyYSIZuvfWkLlpjt0ELIasq4AbUvaVEb9qKpRN3HkILDr8eXWLPa34NEMeegs4g4O7UMsTmWszHjBpRWJ4fiwrGiGt87Datqpw9RzIbri7RHdSFYDOKwKONscqwDRS4xvF3kbJJ96OqBukf1IVhzAOJshDuhKJb8Tvww2d0oNp1K/iS+2elDj/eEntCH9BdocplPRQvKAQAAAABJRU5ErkJggg=='); } form select::-ms-expand { display: none; } form textarea { min-height: 5em; } form select[class=three-quarters], form input[class=three-quarters], form textarea[class=three-quarters] { width: 74%; } form select[class=quarter], form input[class=quarter], form textarea[class=quarter] { margin-left: 2% !important; width: 24%; } form .split-input > select[class=three-quarters], form .split-input > input[class=three-quarters], form .split-input > textarea[class=three-quarters] { width: 73%; } form .split-input > select[class=quarter], form .split-input > input[class=quarter], form .split-input > textarea[class=quarter] { margin-left: 4% !important; width: 23%; } form .split-input { float: left; width: 49%; margin-bottom: 2%; } form .split-input > input, form .split-input > select { margin-bottom: 0; width: 48%; } form .split-input input:nth-child(even), form .split-input select:nth-child(even) { margin-left: 2%; } form select:nth-child(even), form input:nth-child(even), form .split-input:nth-child(even) { margin-left: 2%; } form .tooltip-inner { padding: 7px; border-radius: 2px; color: #fff; font-weight: 300; font-size: 12pt; } form [type=number]::-webkit-inner-spin-button, form [type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } form [data-button] { width: auto; padding: .5em .75em; font-size: 18pt; font-weight: 700; font-style: italic; display: block; margin: 1em auto .5em auto; } form .lockit { position: relative; } form .lockit:after { content: ''; display: block; width: 20px; height: 24px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAACACAQAAABXPgRLAAAC10lEQVR4AczYBZIbMRBA0b8UTpYdZmZmJkPBMjMzg3ntvrniE0TSTBvqHcD1PSW1JIw6znCHDyQYZZEtDkiXHLDFIqMk+MAdzhi0YdRQzzW+MksSsUgyy1euUV9zIbTzhRUKiIcCK3yhvWZCuEQPKSSgFD1cqnoIEXo5QkI6opdI1UI4zk/SiJI0PzlehRCus4QoW+J6RUOo4wtHCPqO+EJdhUI4ST9SRv2crEAIzcwjZTZPc5lDaGcNqYA12ssYQivrSIWs01qmEM6wjFTQMmf0Q6CRMaTCxmnUD4kiVRBVDuERUiWPFENoZh8JoEiSHTZLdkhSRALYp1kvxH8A7tLHK67TykmaSk7SynVe0ceu/4BUCuGe5385wWNO/udc8JgJz+96TyGEJq/D4Rx3DXbcZc7rMNkUPuQF4ijLZxoMbmjgM1nE0YuQITSy4rwqbhr8cNN5xazQGC7kIeJklfaAd/1VxMnDUCGOy3KDFkMwtLDhtoWECKGTHGKV5KIhOC6SRKxydAYP+aSyELU2lE/BQ1y2yCFDeAy5bO0BQ2gjg1hk6FAJ6XD6rbZgIU8Qq4RBBwnE6kmAEBqIOizAiFpIxGFjidLgH9LMlP3iY9DDOGIxRbN/yBWHqftWNeStw+nhin/IE+tJKMdF1ZCL5KynuSf+IZ+tb4k7NKqGNLJjfYf87B9iX+rTBl1M25e7f0g3YtGjHtKDWHTbQ/yvtzH1kJj/tdceMohY/FUP+YtYDJYjJKoeEv3Xvn1bIRBDQQDc3q4BfBWY6JwiSoccz+GZt6ncZDJfHwgBAQEBAQEBAQEBAQEBWXzkmX1xO2R8cdDq4ZDq4pzjk32zSpfmSC5fKZc0D065fG1+tF+3V6TL9gfSJe1PQFoQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBCQrwgICAjID31N2qSk+/KUbHbkNUUFcs65wAAAAABJRU5ErkJggg==') no-repeat; background-size: 20px 24px; background-position: middle bottom; position: absolute; bottom: .25em; right: 0; } /* Theme Support */ [data-theme=default] form select, [data-theme=default] form .split-input > input, [data-theme=default] form .split-input > select, [data-theme=default] form input { border: 1px solid rgba(255,255,255,.7) !important; background: rgba(255,255,255,.5) !important; box-shadow: rgba(0,0,0,.15) 0 1px 0 !important; color: rgba(0,0,0,.7) !important; } [data-theme=default] form select:focus, [data-theme=default] form .split-input > *:focus, [data-theme=default] form input:focus { border-color: orange !important; box-shadow: #fc0 0 0 3px !important; } [data-theme=code] form select, [data-theme=code] form .split-input > input, [data-theme=code] form .split-input > select, [data-theme=code] form input { border: 1px solid rgba(0,0,0,.25); border-radius: 2px; background: #002b36; box-shadow: rgba(0,0,0,.15) 0 1px 0; color: #eee8d5; } [data-theme=code] form select, [data-theme=code] form .split-input > select { color: rgba(255,255,255,.3); } [data-theme=code] form select:focus, [data-theme=code] form .split-input > *:focus, [data-theme=code] form input:focus { border-color: #2aa198; box-shadow: #2aa198 0 0 3px; } [data-theme=dark] form select, [data-theme=dark] form .split-input > input, [data-theme=dark] form .split-input > select, [data-theme=dark] form input { border: 1px solid rgba(0,0,0,.25); border-radius: 2px; background: rgba(0,0,0,.3); box-shadow: rgba(0,0,0,.15) 0 1px 0; color: rgba(255,255,255,.8); } [data-theme=dark] form select, [data-theme=dark] form .split-input > select { color: rgba(255,255,255,.3); } [data-theme=dark] form select:focus, [data-theme=dark] form .split-input > *:focus, [data-theme=dark] form input:focus { border-color: #6c71c4; box-shadow: #6c71c4 0 0 3px; } </style> <style>@media(min-width:1px) and (max-width:101px){[data-formeleloffsetWidth450at1="0"] .split-input,[data-formeleloffsetWidth450at1="0"] .split-input>*,[data-formeleloffsetWidth450at1="0"] input,[data-formeleloffsetWidth450at1="0"] select{width:100%}[data-formeleloffsetWidth450at1="0"] .split-input{margin-bottom:0}[data-formeleloffsetWidth450at1="0"] .split-input>input,[data-formeleloffsetWidth450at1="0"] .split-input>select{margin-bottom:2%;width:100%}[data-formeleloffsetWidth450at1="0"] .split-input:nth-child(2n),[data-formeleloffsetWidth450at1="0"] input:nth-child(2n),[data-formeleloffsetWidth450at1="0"] select:nth-child(2n){margin-left:0}[data-formeleloffsetWidth450at1="0"] .lockit:after{display:none}[data-formeleloffsetWidth450at1="0"] .split-input>input[class=three-quarters],[data-formeleloffsetWidth450at1="0"] .split-input>select[class=three-quarters],[data-formeleloffsetWidth450at1="0"] .split-input>textarea[class=three-quarters]{width:74%}[data-formeleloffsetWidth450at1="0"] .split-input>input[class=quarter],[data-formeleloffsetWidth450at1="0"] .split-input>select[class=quarter],[data-formeleloffsetWidth450at1="0"] .split-input>textarea[class=quarter]{margin-left:2%!important;width:24%}[data-formeleloffsetWidth450at1="1"] .split-input,[data-formeleloffsetWidth450at1="1"] .split-input>*,[data-formeleloffsetWidth450at1="1"] input,[data-formeleloffsetWidth450at1="1"] select{width:100%}[data-formeleloffsetWidth450at1="1"] .split-input{margin-bottom:0}[data-formeleloffsetWidth450at1="1"] .split-input>input,[data-formeleloffsetWidth450at1="1"] .split-input>select{margin-bottom:2%;width:100%}[data-formeleloffsetWidth450at1="1"] .split-input:nth-child(2n),[data-formeleloffsetWidth450at1="1"] input:nth-child(2n),[data-formeleloffsetWidth450at1="1"] select:nth-child(2n){margin-left:0}[data-formeleloffsetWidth450at1="1"] .lockit:after{display:none}[data-formeleloffsetWidth450at1="1"] .split-input>input[class=three-quarters],[data-formeleloffsetWidth450at1="1"] .split-input>select[class=three-quarters],[data-formeleloffsetWidth450at1="1"] .split-input>textarea[class=three-quarters]{width:74%}[data-formeleloffsetWidth450at1="1"] .split-input>input[class=quarter],[data-formeleloffsetWidth450at1="1"] .split-input>select[class=quarter],[data-formeleloffsetWidth450at1="1"] .split-input>textarea[class=quarter]{margin-left:2%!important;width:24%}[data-formeleloffsetWidth450at1="2"] .split-input,[data-formeleloffsetWidth450at1="2"] .split-input>*,[data-formeleloffsetWidth450at1="2"] input,[data-formeleloffsetWidth450at1="2"] select{width:100%}[data-formeleloffsetWidth450at1="2"] .split-input{margin-bottom:0}[data-formeleloffsetWidth450at1="2"] .split-input>input,[data-formeleloffsetWidth450at1="2"] .split-input>select{margin-bottom:2%;width:100%}[data-formeleloffsetWidth450at1="2"] .split-input:nth-child(2n),[data-formeleloffsetWidth450at1="2"] input:nth-child(2n),[data-formeleloffsetWidth450at1="2"] select:nth-child(2n){margin-left:0}[data-formeleloffsetWidth450at1="2"] .lockit:after{display:none}[data-formeleloffsetWidth450at1="2"] .split-input>input[class=three-quarters],[data-formeleloffsetWidth450at1="2"] .split-input>select[class=three-quarters],[data-formeleloffsetWidth450at1="2"] .split-input>textarea[class=three-quarters]{width:74%}[data-formeleloffsetWidth450at1="2"] .split-input>input[class=quarter],[data-formeleloffsetWidth450at1="2"] .split-input>select[class=quarter],[data-formeleloffsetWidth450at1="2"] .split-input>textarea[class=quarter]{margin-left:2%!important;width:24%}}@media(min-width:101px) and (max-width:201px){[data-formeleloffsetWidth450at101="0"] .split-input,[data-formeleloffsetWidth450at101="0"] .split-input>*,[data-formeleloffsetWidth450at101="0"] input,[data-formeleloffsetWidth450at101="0"] select{width:100%}[data-formeleloffsetWidth450at101="0"] .split-input{margin-bottom:0}[data-formeleloffsetWidth450at101="0"] .split-input>input,[data-formeleloffsetWidth450at101="0"] .split-input>select{margin-bottom:2%;width:100%}[data-formeleloffsetWidth450at101="0"] .split-input:nth-child(2n),[data-formeleloffsetWidth450at101="0"] input:nth-child(2n),[data-formeleloffsetWidth450at101="0"] select:nth-child(2n){margin-left:0}[data-formeleloffsetWidth450at101="0"] .lockit:after{display:none}[data-formeleloffsetWidth450at101="0"] .split-input>input[class=three-quarters],[data-formeleloffsetWidth450at101="0"] .split-input>select[class=three-quarters],[data-formeleloffsetWidth450at101="0"] .split-input>textarea[class=three-quarters]{width:74%}[data-formeleloffsetWidth450at101="0"] .split-input>input[class=quarter],[data-formeleloffsetWidth450at101="0"] .split-input>select[class=quarter],[data-formeleloffsetWidth450at101="0"] .split-input>textarea[class=quarter]{margin-left:2%!important;width:24%}[data-formeleloffsetWidth450at101="1"] .split-input,[data-formeleloffsetWidth450at101="1"] .split-input>*,[data-formeleloffsetWidth450at101="1"] input,[data-formeleloffsetWidth450at101="1"] select{width:100%}[data-formeleloffsetWidth450at101="1"] .split-input{margin-bottom:0}[data-formeleloffsetWidth450at101="1"] .split-input>input,[data-formeleloffsetWidth450at101="1"] .split-input>select{margin-bottom:2%;width:100%}[data-formeleloffsetWidth450at101="1"] .split-input:nth-child(2n),[data-formeleloffsetWidth450at101="1"] input:nth-child(2n),[data-formeleloffsetWidth450at101="1"] select:nth-child(2n){margin-left:0}[data-formeleloffsetWidth450at101="1"] .lockit:after{display:none}[data-formeleloffsetWidth450at101="1"] .split-input>input[class=three-quarters],[data-formeleloffsetWidth450at101="1"] .split-input>select[class=three-quarters],[data-formeleloffsetWidth450at101="1"] .split-input>textarea[class=three-quarters]{width:74%}[data-formeleloffsetWidth450at101="1"] .split-input>input[class=quarter],[data-formeleloffsetWidth450at101="1"] .split-input>select[class=quarter],[data-formeleloffsetWidth450at101="1"] .split-input>textarea[class=quarter]{margin-left:2%!important;width:24%}[data-formeleloffsetWidth450at101="2"] .split-input,[data-formeleloffsetWidth450at101="2"] .split-input>*,[data-formeleloffsetWidth450at101="2"] input,[data-formeleloffsetWidth450at101="2"] select{width:100%}[data-formeleloffsetWidth450at101="2"] .split-input{margin-bottom:0}[data-formeleloffsetWidth450at101="2"] .split-input>input,[data-formeleloffsetWidth450at101="2"] .split-input>select{margin-bottom:2%;width:100%}[data-formeleloffsetWidth450at101="2"] .split-input:nth-child(2n),[data-formeleloffsetWidth450at101="2"] input:nth-child(2n),[data-formeleloffsetWidth450at101="2"] select:nth-child(2n){margin-left:0}[data-formeleloffsetWidth450at101="2"] .lockit:after{display:none}[data-formeleloffsetWidth450at101="2"] .split-input>input[class=three-quarters],[data-formeleloffsetWidth450at101="2"] .split-input>select[class=three-quarters],[data-formeleloffsetWidth450at101="2"] .split-input>textarea[class=three-quarters]{width:74%}[data-formeleloffsetWidth450at101="2"] .split-input>input[class=quarter],[data-formeleloffsetWidth450at101="2"] .split-input>select[class=quarter],[data-formeleloffsetWidth450at101="2"] .split-input>textarea[class=quarter]{margin-left:2%!important;width:24%}}@media(min-width:201px) and (max-width:301px){[data-formeleloffsetWidth450at201="0"] .split-input,[data-formeleloffsetWidth450at201="0"] .split-input>*,[data-formeleloffsetWidth450at201="0"] input,[data-formeleloffsetWidth450at201="0"] select{width:100%}[data-formeleloffsetWidth450at201="0"] .split-input{margin-bottom:0}[data-formeleloffsetWidth450at201="0"] .split-input>input,[data-formeleloffsetWidth450at201="0"] .split-input>select{margin-bottom:2%;width:100%}[data-formeleloffsetWidth450at201="0"] .split-input:nth-child(2n),[data-formeleloffsetWidth450at201="0"] input:nth-child(2n),[data-formeleloffsetWidth450at201="0"] select:nth-child(2n){margin-left:0}[data-formeleloffsetWidth450at201="0"] .lockit:after{display:none}[data-formeleloffsetWidth450at201="0"] .split-input>input[class=three-quarters],[data-formeleloffsetWidth450at201="0"] .split-input>select[class=three-quarters],[data-formeleloffsetWidth450at201="0"] .split-input>textarea[class=three-quarters]{width:74%}[data-formeleloffsetWidth450at201="0"] .split-input>input[class=quarter],[data-formeleloffsetWidth450at201="0"] .split-input>select[class=quarter],[data-formeleloffsetWidth450at201="0"] .split-input>textarea[class=quarter]{margin-left:2%!important;width:24%}[data-formeleloffsetWidth450at201="1"] .split-input,[data-formeleloffsetWidth450at201="1"] .split-input>*,[data-formeleloffsetWidth450at201="1"] input,[data-formeleloffsetWidth450at201="1"] select{width:100%}[data-formeleloffsetWidth450at201="1"] .split-input{margin-bottom:0}[data-formeleloffsetWidth450at201="1"] .split-input>input,[data-formeleloffsetWidth450at201="1"] .split-input>select{margin-bottom:2%;width:100%}[data-formeleloffsetWidth450at201="1"] .split-input:nth-child(2n),[data-formeleloffsetWidth450at201="1"] input:nth-child(2n),[data-formeleloffsetWidth450at201="1"] select:nth-child(2n){margin-left:0}[data-formeleloffsetWidth450at201="1"] .lockit:after{display:none}[data-formeleloffsetWidth450at201="1"] .split-input>input[class=three-quarters],[data-formeleloffsetWidth450at201="1"] .split-input>select[class=three-quarters],[data-formeleloffsetWidth450at201="1"] .split-input>textarea[class=three-quarters]{width:74%}[data-formeleloffsetWidth450at201="1"] .split-input>input[class=quarter],[data-formeleloffsetWidth450at201="1"] .split-input>select[class=quarter],[data-formeleloffsetWidth450at201="1"] .split-input>textarea[class=quarter]{margin-left:2%!important;width:24%}[data-formeleloffsetWidth450at201="2"] .split-input,[data-formeleloffsetWidth450at201="2"] .split-input>*,[data-formeleloffsetWidth450at201="2"] input,[data-formeleloffsetWidth450at201="2"] select{width:100%}[data-formeleloffsetWidth450at201="2"] .split-input{margin-bottom:0}[data-formeleloffsetWidth450at201="2"] .split-input>input,[data-formeleloffsetWidth450at201="2"] .split-input>select{margin-bottom:2%;width:100%}[data-formeleloffsetWidth450at201="2"] .split-input:nth-child(2n),[data-formeleloffsetWidth450at201="2"] input:nth-child(2n),[data-formeleloffsetWidth450at201="2"] select:nth-child(2n){margin-left:0}[data-formeleloffsetWidth450at201="2"] .lockit:after{display:none}[data-formeleloffsetWidth450at201="2"] .split-input>input[class=three-quarters],[data-formeleloffsetWidth450at201="2"] .split-input>select[class=three-quarters],[data-formeleloffsetWidth450at201="2"] .split-input>textarea[class=three-quarters]{width:74%}[data-formeleloffsetWidth450at201="2"] .split-input>input[class=quarter],[data-formeleloffsetWidth450at201="2"] .split-input>select[class=quarter],[data-formeleloffsetWidth450at201="2"] .split-input>textarea[class=quarter]{margin-left:2%!important;width:24%}}@media(min-width:301px) and (max-width:401px){[data-formeleloffsetWidth450at301="0"] .split-input,[data-formeleloffsetWidth450at301="0"] .split-input>*,[data-formeleloffsetWidth450at301="0"] input,[data-formeleloffsetWidth450at301="0"] select{width:100%}[data-formeleloffsetWidth450at301="0"] .split-input{margin-bottom:0}[data-formeleloffsetWidth450at301="0"] .split-input>input,[data-formeleloffsetWidth450at301="0"] .split-input>select{margin-bottom:2%;width:100%}[data-formeleloffsetWidth450at301="0"] .split-input:nth-child(2n),[data-formeleloffsetWidth450at301="0"] input:nth-child(2n),[data-formeleloffsetWidth450at301="0"] select:nth-child(2n){margin-left:0}[data-formeleloffsetWidth450at301="0"] .lockit:after{display:none}[data-formeleloffsetWidth450at301="0"] .split-input>input[class=three-quarters],[data-formeleloffsetWidth450at301="0"] .split-input>select[class=three-quarters],[data-formeleloffsetWidth450at301="0"] .split-input>textarea[class=three-quarters]{width:74%}[data-formeleloffsetWidth450at301="0"] .split-input>input[class=quarter],[data-formeleloffsetWidth450at301="0"] .split-input>select[class=quarter],[data-formeleloffsetWidth450at301="0"] .split-input>textarea[class=quarter]{margin-left:2%!important;width:24%}[data-formeleloffsetWidth450at301="1"] .split-input,[data-formeleloffsetWidth450at301="1"] .split-input>*,[data-formeleloffsetWidth450at301="1"] input,[data-formeleloffsetWidth450at301="1"] select{width:100%}[data-formeleloffsetWidth450at301="1"] .split-input{margin-bottom:0}[data-formeleloffsetWidth450at301="1"] .split-input>input,[data-formeleloffsetWidth450at301="1"] .split-input>select{margin-bottom:2%;width:100%}[data-formeleloffsetWidth450at301="1"] .split-input:nth-child(2n),[data-formeleloffsetWidth450at301="1"] input:nth-child(2n),[data-formeleloffsetWidth450at301="1"] select:nth-child(2n){margin-left:0}[data-formeleloffsetWidth450at301="1"] .lockit:after{display:none}[data-formeleloffsetWidth450at301="1"] .split-input>input[class=three-quarters],[data-formeleloffsetWidth450at301="1"] .split-input>select[class=three-quarters],[data-formeleloffsetWidth450at301="1"] .split-input>textarea[class=three-quarters]{width:74%}[data-formeleloffsetWidth450at301="1"] .split-input>input[class=quarter],[data-formeleloffsetWidth450at301="1"] .split-input>select[class=quarter],[data-formeleloffsetWidth450at301="1"] .split-input>textarea[class=quarter]{margin-left:2%!important;width:24%}[data-formeleloffsetWidth450at301="2"] .split-input,[data-formeleloffsetWidth450at301="2"] .split-input>*,[data-formeleloffsetWidth450at301="2"] input,[data-formeleloffsetWidth450at301="2"] select{width:100%}[data-formeleloffsetWidth450at301="2"] .split-input{margin-bottom:0}[data-formeleloffsetWidth450at301="2"] .split-input>input,[data-formeleloffsetWidth450at301="2"] .split-input>select{margin-bottom:2%;width:100%}[data-formeleloffsetWidth450at301="2"] .split-input:nth-child(2n),[data-formeleloffsetWidth450at301="2"] input:nth-child(2n),[data-formeleloffsetWidth450at301="2"] select:nth-child(2n){margin-left:0}[data-formeleloffsetWidth450at301="2"] .lockit:after{display:none}[data-formeleloffsetWidth450at301="2"] .split-input>input[class=three-quarters],[data-formeleloffsetWidth450at301="2"] .split-input>select[class=three-quarters],[data-formeleloffsetWidth450at301="2"] .split-input>textarea[class=three-quarters]{width:74%}[data-formeleloffsetWidth450at301="2"] .split-input>input[class=quarter],[data-formeleloffsetWidth450at301="2"] .split-input>select[class=quarter],[data-formeleloffsetWidth450at301="2"] .split-input>textarea[class=quarter]{margin-left:2%!important;width:24%}}@media(min-width:401px) and (max-width:501px){[data-formeleloffsetWidth450at401="0"] .split-input,[data-formeleloffsetWidth450at401="0"] .split-input>*,[data-formeleloffsetWidth450at401="0"] input,[data-formeleloffsetWidth450at401="0"] select{width:100%}[data-formeleloffsetWidth450at401="0"] .split-input{margin-bottom:0}[data-formeleloffsetWidth450at401="0"] .split-input>input,[data-formeleloffsetWidth450at401="0"] .split-input>select{margin-bottom:2%;width:100%}[data-formeleloffsetWidth450at401="0"] .split-input:nth-child(2n),[data-formeleloffsetWidth450at401="0"] input:nth-child(2n),[data-formeleloffsetWidth450at401="0"] select:nth-child(2n){margin-left:0}[data-formeleloffsetWidth450at401="0"] .lockit:after{display:none}[data-formeleloffsetWidth450at401="0"] .split-input>input[class=three-quarters],[data-formeleloffsetWidth450at401="0"] .split-input>select[class=three-quarters],[data-formeleloffsetWidth450at401="0"] .split-input>textarea[class=three-quarters]{width:74%}[data-formeleloffsetWidth450at401="0"] .split-input>input[class=quarter],[data-formeleloffsetWidth450at401="0"] .split-input>select[class=quarter],[data-formeleloffsetWidth450at401="0"] .split-input>textarea[class=quarter]{margin-left:2%!important;width:24%}[data-formeleloffsetWidth450at401="1"] .split-input,[data-formeleloffsetWidth450at401="1"] .split-input>*,[data-formeleloffsetWidth450at401="1"] input,[data-formeleloffsetWidth450at401="1"] select{width:100%}[data-formeleloffsetWidth450at401="1"] .split-input{margin-bottom:0}[data-formeleloffsetWidth450at401="1"] .split-input>input,[data-formeleloffsetWidth450at401="1"] .split-input>select{margin-bottom:2%;width:100%}[data-formeleloffsetWidth450at401="1"] .split-input:nth-child(2n),[data-formeleloffsetWidth450at401="1"] input:nth-child(2n),[data-formeleloffsetWidth450at401="1"] select:nth-child(2n){margin-left:0}[data-formeleloffsetWidth450at401="1"] .lockit:after{display:none}[data-formeleloffsetWidth450at401="1"] .split-input>input[class=three-quarters],[data-formeleloffsetWidth450at401="1"] .split-input>select[class=three-quarters],[data-formeleloffsetWidth450at401="1"] .split-input>textarea[class=three-quarters]{width:74%}[data-formeleloffsetWidth450at401="1"] .split-input>input[class=quarter],[data-formeleloffsetWidth450at401="1"] .split-input>select[class=quarter],[data-formeleloffsetWidth450at401="1"] .split-input>textarea[class=quarter]{margin-left:2%!important;width:24%}[data-formeleloffsetWidth450at401="2"] .split-input,[data-formeleloffsetWidth450at401="2"] .split-input>*,[data-formeleloffsetWidth450at401="2"] input,[data-formeleloffsetWidth450at401="2"] select{width:100%}[data-formeleloffsetWidth450at401="2"] .split-input{margin-bottom:0}[data-formeleloffsetWidth450at401="2"] .split-input>input,[data-formeleloffsetWidth450at401="2"] .split-input>select{margin-bottom:2%;width:100%}[data-formeleloffsetWidth450at401="2"] .split-input:nth-child(2n),[data-formeleloffsetWidth450at401="2"] input:nth-child(2n),[data-formeleloffsetWidth450at401="2"] select:nth-child(2n){margin-left:0}[data-formeleloffsetWidth450at401="2"] .lockit:after{display:none}[data-formeleloffsetWidth450at401="2"] .split-input>input[class=three-quarters],[data-formeleloffsetWidth450at401="2"] .split-input>select[class=three-quarters],[data-formeleloffsetWidth450at401="2"] .split-input>textarea[class=three-quarters]{width:74%}[data-formeleloffsetWidth450at401="2"] .split-input>input[class=quarter],[data-formeleloffsetWidth450at401="2"] .split-input>select[class=quarter],[data-formeleloffsetWidth450at401="2"] .split-input>textarea[class=quarter]{margin-left:2%!important;width:24%}}</style></head><body class="fullwidth"> <section class="wrap"> <section data-theme=""> <section class="wrap"> <h1>Self-Responsive Order Form</h1> <h2>With Responsive Styles Powered by Element Queries</h2> <h2>Default Theme</h2> <form data-formeleloffsetwidth450at1="0" data-formeleloffsetwidth450at101="0" data-formeleloffsetwidth450at201="0" data-formeleloffsetwidth450at301="0" data-formeleloffsetwidth450at401="0"> <h3>Billing Information</h3> <fieldset id="billingAddress"> <input type="text" name="cc_first_name" id="firstName" placeholder="First Name" autocorrect="off"> <input type="text" name="cc_last_name" id="lastName" placeholder="Last Name" autocorrect="off"> <input type="text" name="cc_street1" id="address" class="three-quarters" placeholder="Street" autocorrect="off"> <input type="text" name="cc_street2" id="address2" class="quarter" placeholder="Apt/Suite" autocorrect="off"> <input type="text" name="cc_city" id="city" placeholder="City" autocorrect="off"> <input type="text" name="cc_state" id="region" placeholder="State/Province" autocorrect="off"> <input type="text" name="cc_postal_code" id="postal" placeholder="Zip Code" autocorrect="off"> <select name="cc_country" id="country" x-autocompletetype="country"> <option value="United States">US / United States</option> <option value="Canada">Canada</option> <option value="Other">Other</option> </select> </fieldset> <h3 class="lockit">Credit Card Information</h3> <fieldset id="cardInfo"> <input type="tel" min="1" name="cc_number" id="cc-number" placeholder="Card Number" autocorrect="off"> <div class="split-input"> <select name="cc_card_type" id="cardType" class="three-quarters"> <option value="">Card Type</option> <option value="Visa">Visa</option> <option value="Mastercard">Mastercard</option> <option value="American Express">American Express</option> </select> <input type="tel" name="cvv" id="cc-csc" min="1" placeholder="CVV" autocorrect="off" class="quarter"> </div> <select name="cc_exp_month" id="expMonth"> <option value="">Expiration Month</option> <option value="01">01 January</option> <option value="02">02 February</option> <option value="03">03 March</option> <option value="04">04 April</option> <option value="05">05 May</option> <option value="06">06 June</option> <option value="07">07 July</option> <option value="08">08 August</option> <option value="09">09 September</option> <option value="10">10 October</option> <option value="11">11 November</option> <option value="12">12 December</option> </select> <select id="expYear" name="cc_exp_year"> <option value="">Expiration Year</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> <option value="2024">2024</option> <option value="2025">2025</option> <option value="2026">2026</option> </select> </fieldset> <button data-button="">Complete My Order!</button> </form> </section> </section> <section data-theme="dark"> <section class="wrap"> <h2>Dark Theme</h2> <form data-formeleloffsetwidth450at1="1" data-formeleloffsetwidth450at101="1" data-formeleloffsetwidth450at201="1" data-formeleloffsetwidth450at301="1" data-formeleloffsetwidth450at401="1"> <h3>Billing Information</h3> <fieldset id="billingAddress"> <input type="text" name="cc_first_name" id="firstName" placeholder="First Name" autocorrect="off"> <input type="text" name="cc_last_name" id="lastName" placeholder="Last Name" autocorrect="off"> <input type="text" name="cc_street1" id="address" class="three-quarters" placeholder="Street" autocorrect="off"> <input type="text" name="cc_street2" id="address2" class="quarter" placeholder="Apt/Suite" autocorrect="off"> <input type="text" name="cc_city" id="city" placeholder="City" autocorrect="off"> <input type="text" name="cc_state" id="region" placeholder="State/Province" autocorrect="off"> <input type="text" name="cc_postal_code" id="postal" placeholder="Zip Code" autocorrect="off"> <select name="cc_country" id="country" x-autocompletetype="country"> <option value="United States">US / United States</option> <option value="Canada">Canada</option> <option value="Other">Other</option> </select> </fieldset> <h3 class="lockit">Credit Card Information</h3> <fieldset id="cardInfo"> <input type="tel" min="1" name="cc_number" id="cc-number" placeholder="Card Number" autocorrect="off"> <div class="split-input"> <select name="cc_card_type" id="cardType" class="three-quarters"> <option value="">Card Type</option> <option value="Visa">Visa</option> <option value="Mastercard">Mastercard</option> <option value="American Express">American Express</option> </select> <input type="tel" name="cvv" id="cc-csc" min="1" placeholder="CVV" autocorrect="off" class="quarter"> </div> <select name="cc_exp_month" id="expMonth"> <option value="">Expiration Month</option> <option value="01">01 January</option> <option value="02">02 February</option> <option value="03">03 March</option> <option value="04">04 April</option> <option value="05">05 May</option> <option value="06">06 June</option> <option value="07">07 July</option> <option value="08">08 August</option> <option value="09">09 September</option> <option value="10">10 October</option> <option value="11">11 November</option> <option value="12">12 December</option> </select> <select id="expYear" name="cc_exp_year"> <option value="">Expiration Year</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> <option value="2024">2024</option> <option value="2025">2025</option> <option value="2026">2026</option> </select> </fieldset> <button data-button="blue">Complete My Order!</button> </form> </section> </section> <section data-theme="code"> <section class="wrap"> <h2>Code Theme</h2> <form data-formeleloffsetwidth450at1="2" data-formeleloffsetwidth450at101="2" data-formeleloffsetwidth450at201="2" data-formeleloffsetwidth450at301="2" data-formeleloffsetwidth450at401="2"> <h3>Billing Information</h3> <fieldset id="billingAddress"> <input type="text" name="cc_first_name" id="firstName" placeholder="First Name" autocorrect="off"> <input type="text" name="cc_last_name" id="lastName" placeholder="Last Name" autocorrect="off"> <input type="text" name="cc_street1" id="address" class="three-quarters" placeholder="Street" autocorrect="off"> <input type="text" name="cc_street2" id="address2" class="quarter" placeholder="Apt/Suite" autocorrect="off"> <input type="text" name="cc_city" id="city" placeholder="City" autocorrect="off"> <input type="text" name="cc_state" id="region" placeholder="State/Province" autocorrect="off"> <input type="text" name="cc_postal_code" id="postal" placeholder="Zip Code" autocorrect="off"> <select name="cc_country" id="country" x-autocompletetype="country"> <option value="United States">US / United States</option> <option value="Canada">Canada</option> <option value="Other">Other</option> </select> </fieldset> <h3 class="lockit">Credit Card Information</h3> <fieldset id="cardInfo"> <input type="tel" min="1" name="cc_number" id="cc-number" placeholder="Card Number" autocorrect="off"> <div class="split-input"> <select name="cc_card_type" id="cardType" class="three-quarters"> <option value="">Card Type</option> <option value="Visa">Visa</option> <option value="Mastercard">Mastercard</option> <option value="American Express">American Express</option> </select> <input type="tel" name="cvv" id="cc-csc" min="1" placeholder="CVV" autocorrect="off" class="quarter"> </div> <select name="cc_exp_month" id="expMonth"> <option value="">Expiration Month</option> <option value="01">01 January</option> <option value="02">02 February</option> <option value="03">03 March</option> <option value="04">04 April</option> <option value="05">05 May</option> <option value="06">06 June</option> <option value="07">07 July</option> <option value="08">08 August</option> <option value="09">09 September</option> <option value="10">10 October</option> <option value="11">11 November</option> <option value="12">12 December</option> </select> <select id="expYear" name="cc_exp_year"> <option value="">Expiration Year</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> <option value="2024">2024</option> <option value="2025">2025</option> <option value="2026">2026</option> </select> </fieldset> <button data-button="blue">Complete My Order!</button> </form> </section> </section> </section> </body></html>