.generic-form { margin: 2rem 0; @extend %clearfix; fieldset { padding: 0; border: none; width: 100%; position: relative; } input[type=email] { width: 210px; @include fontsize(18); background-color: #fff; border: 2px solid darken(#efefef, 10); border-radius: 5px; height: 2.2rem; padding: 4px 4px 4px 8px; margin-right: .5rem; @include breakpoint(omega){ width: 92%; } @include breakpoint(alpha){ width: 96%; } } label { display: block; visibility: hidden; width: 0; height: 0; } .btn-hollow { @include fontsize(16); display: inline-block; padding: 10px 15px; margin-bottom: 0; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; color: #ddd; border: 0; border-radius: 5px; font-weight: bold; transition: all 0.2s ease; background: $orange; &:hover { color: white; } } } .flex { display: flex; .btn, .btn-hollow { flex-basis: 10%; } } form fieldset { margin: 1rem 0; padding: 0; border: none; width: 100%; position: relative; } form fieldset label { position: absolute; -webkit-transform: translate3d(10px, 100%); -moz-transform: translate3d(10px, 100%); -ms-transform: translate3d(10px, 100%); -o-transform: translate3d(10px, 100%); transform: translate3d(10px, 100%); @include fontsize(14); @include fancy_sans; color: lighten($body_font_color, 25); line-height: 14px; top: .7rem; left: .75rem; z-index: 1; } input, .textarea-rounded textarea { border: 1px solid #dedddd; border-radius: 4px; padding: 2.2rem 0 .75rem .75rem; width: 96%; @include fontsize(24); @include fancy_sans; } .btn { @include fontsize(15); display: inline-block; border-radius: 4px; -webkit-appearance: none; text-decoration: none; cursor: pointer; background: $link_color; color: #fff; border: 1px solid $link_color; padding: 7px 14px; white-space: nowrap; &:hover { background: $link_color; border: 1px solid $link_color; } } .newsletter-subscribe { margin: 3rem 0; fieldset { margin: 0; } }