@import url('https://fonts.googleapis.com/css?family=Montserrat:100|Roboto:100'); @font-face { font-family: sans-thin; src: url("fonts/Sans-Thin.otf"); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background-image: #f1f1f1; } ::-webkit-scrollbar-thumb { background-image: linear-gradient(#0f2027, #203a43, #2c5364); } ::-webkit-scrollbar-thumb:hover { background: #555; } @font-face { font-family: gothamBold; src: url("fonts/Gotham-Bold.otf"); } * { padding: 0; margin: 0; } body { background-color: #F6FBFC; } .main-page { padding: 8px; font-family: sans-thin, sans-serif; color: #858585; text-decoration: none; transition: color 1s; text-align: center; } .main-page:hover { color: #000; } .center-align { text-align: center; } html { height: 100%; } body { height: 100%; position: relative; } input, textarea { background-color: #F6FBFC; } .contact-section { max-width: 650px; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); } .title { text-align: center; font-family: Montserrat, sans-serif; text-transform: uppercase; font-size: 50px; letter-spacing: 10px; margin-bottom: 30px; } .row { margin: 0px 0px; } .row:after { content: ""; display: table; clear: both; } .x-50 { width: 50%; } .x-100 { width: 100%; } .row .col { padding: 0 20px; float: left; box-sizing: border-box; } .contact-form .input-text { display: block; width: 100%; border-width: 0 0 2px 0; border-color: #ffd1dc; font-family: sans-thin; font-size: 18px; line-height: 26px; font-weight: 800; } .contact-form .form-field { position: relative; margin: 32px 0; } .contact-form .input-text:focus { outline: none; } .contact-form .input-text:focus+.label, .contact-form .input-text.not-empty+.label, .contact-form .input-text:focus+.textarea, .contact-form .input-text.not-empty+.textarea { transform: translateY(-24px); } .contact-form .label { position: absolute; left: 20px; bottom: 10px; font-family: sans-thin, serif; text-transform: uppercase; font-size: 18px; line-height: 26px; font-weight: 400; color: #888; cursor: text; transition: transform 0.2s ease-in-out; } .textarea { position: absolute; left: 20px; bottom: 110px; font-family: sans-thin, serif; text-transform: uppercase; font-size: 18px; line-height: 26px; font-weight: 400; color: #888; cursor: text; transition: transform 0.2s ease-in-out; } .contact-form .submit-btn { display: block; position: relative; background-color: #000; color: #fff; font-family: Roboto, sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: 16px; line-height: 24px; padding: 8px 16px; letter-spacing: 5px; text-align: center; border: none; cursor: pointer; left: 50%; transform: translateX(-50%); } .rainbow { color: #000; background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22)); background-image: gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22)); color: transparent; -webkit-background-clip: text; background-clip: text; }