.container { padding: 15px 30px; } .card { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); border-radius: 6px; color: rgba(0, 0, 0, 0.87); background: #fff; } .card-raised { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); } .page-title { margin-top: 40px; } @media (min-width: 1200px) { .container { width: 100%; } } @media (min-width: 992px) { .container { width: 100%; } } @media (min-width: 768px) { .container { width: 100%; } } .container { height: 100%; position: relative; z-index: 1; } .card { position: relative; padding: 20px; display: flex; flex-direction: column; align-items: center; margin-top: 90px; top: -90px; -webkit-animation-name: card; -moz-animation-name: card; -o-animation-name: card; animation-name: card; -webkit-animation-duration: 600ms; -moz-animation-duration: 600ms; -o-animation-duration: 600ms; animation-duration: 600ms; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes card { from { top: -40px; } to { top: 0; } } @keyframes card { from { top: -40px; } to { top: 0; } } .card-header { position: relative; overflow: hidden; top: -40px; width: 100%; padding: 25px; border-radius: 3px; background: linear-gradient(60deg, #ec407a, #d81b60); box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4); display: flex; flex-direction: column; align-items: center; } .card-header h4 { font-weight: 400; color: #fff; margin-bottom: 25px; margin-top: 5px; } .social-btns i { font-size: 21px; color: #fff; } .social-btns button { margin: 0 8px; } .tip { margin-top: -20px; } .form-row, .card-form, .mat-form-field { width: 100%; } .card-form { padding: 5px; } .form-row { position: relative; display: flex; align-items: center; margin-top: 13px; } .form-row i { position: relative; top: -5px; margin-right: 15px; color: #555; } .card-footer { margin: 10px; } .card-footer button { color: #e91e63; } .btn span.icon { background: url(img/b2access_small.png) no-repeat; float: left; width: 45px; height: 25px; } span.iconmedium { background: url(img/b2access_medium.png) no-repeat; float: left; width: 100px; height: 56px; } .b2access-button{ margin-top: 10px; width: fit-content; }