* { outline: none; } .tb { display: table; width:100%; } .td { display: table-cell; } ::placeholder { color: #ccc; } ::-moz-placeholder { color: #ccc; opacity: 1; } ::-webkit-input-placeholder { color: #ccc; } #cover { max-width: 400px; margin-top: 8px; } #ntf-area { width: 70px; height: 42px; margin: 0 auto; background-color: #fff; border-radius: 30px; transition: 0.5s cubic-bezier(0, 1.28, 0.29, 1.18) width; } #ntf-area.active { background-color: #e7e5e5; width: 300px; } #ntf-btn, #f-msg { font-size: 22px; color: #2d8fb6; font-weight: bold; text-align: center; line-height: 1; padding: 10px; cursor: pointer; transition: 0.6s ease transform; } #ntf-btn { transform: scale(1); } #ntf-btn.inactive { transform: scale(0); } #ntf-area.active #ntf-btn { display: none; } #ntf-form-cover.active { display: block; } #ntf-form-cover { padding: 10px; padding-top:8px; display: none; } #td-inp { padding-left: 10px; } #email-inp { width: 100%; color: #2d8fb6; border-radius: 5px; } #td-pre { width: 1px; white-space: pre; padding-left: 10px; } #submit-btn { color: #fff; padding: 3px 6px; background-color: #ef9437; border-radius: 40px; transform: scale(0); transition: 0.4s cubic-bezier(0, 0.73, 0.35, 1.22) transform, 0.2s ease color; width: 50px; } #email-inp, #submit-btn { font-size: 13px; font-weight: bold; /*line-height: 1;*/ border: 0; height:25px; } #submit-btn.active { transform: scale(1); } #submit-btn.active.valid { color: #fff; cursor: pointer; }