#signup { width: 600px; height: auto; padding: 20px; background: #fff; margin: 80px auto; position: relative; min-height: 300px; } #fieldsets { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; overflow: hidden; } input[type=text], input[type=email], input[type=password], input[type=tel], textarea { display: block; -webkit-appearance: none; -moz-appearance: none; width: 100%; box-sizing: border-box; border: 1px solid #ddd; padding: 8px; margin-bottom: 8px; position: relative; &:focus { outline: none; border: 1px solid darken(#2cbab2,10%); } } input[type=radio]{ margin: 6px; display: inline-block; } fieldset { border: none; position: absolute; left: -640px; width: 600px; padding: 10px 0; transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; opacity: 0; &.current { left: 20px; opacity: 1; } &.next { left: 640px; } } input[type=submit] { display: none; border: none; } #section-tabs { font-size: 0.8em; height: 50px; position: relative; margin-top: -50px; margin-bottom: 50px; padding: 0; font-weight: bold; list-style: none; text-transform: uppercase; li { color: #a7a7a7; span { color: #bababa; } cursor: not-allowed; &.active { color: #444; cursor: pointer; } border-left: 1px solid #aaa; text-decoration: none; padding: 0 6px; float: left; width: 25%; box-sizing: border-box; text-align: center; font-weight: bold; line-height: 30px; background: #ddd; position: relative; &:after { content: ""; display: block; margin-left: 0; position: absolute; left: 0; top: 0; } &.current { opacity: 1; background: #fff; z-index: 999; border-left: none; &:after { border: 15px solid transparent; border-left: 15px solid #2cbab2; } } } } .error { color: #bf2424; display: block; } input.error, textarea.error { border-color: #bf2424; &:focus { border-color: #bf2424; } } label.error { margin-bottom: 20px; } input.valid { color: green; } label.valid { position: absolute; right: 20px; } input+.valid, textarea+.valid { display: none; } .valid+.valid { display: inline; position: absolute; right: 10px; margin-top: -36px; color: green; } .btn { border: none; padding: 8px; background: #2cbab2; cursor: pointer; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; &:hover { background: darken(#2cbab2, 6%); } color: #fff; position: absolute; bottom: 20px; right: 20px; font-family: 'Merriweather Sans', sans-serif; }