#onboarding-collect-email { background: rgb(17, 209, 166); .scroll-content { margin-top: 0; height: 101%; } .scroll { height: 100%; } #success-image { margin-top: 4rem; height: 10rem; } .col { margin-top: 1rem; margin-bottom: 1rem; } .collect-overlay { animation-name: opacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: .2s; animation-delay: .8s; animation-fill-mode: forwards; opacity: 0; button { position: absolute; right: 11px; } } .collect-overlay{ top:-1px; } #collect-email { opacity: 1; background: #fff; color: rgb(108, 108, 108); height: 14rem; animation-name: topBottom; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: .4s; animation-delay: 1s; position: absolute; bottom: -14rem; animation-fill-mode: forwards; z-index: 5; margin-top: 0; width: 100%; form { label { background: rgba(200, 200, 200, 0.20); height: 3rem; margin-top:0; i { position: absolute; right: 3%; top: 1rem; } } } #news-updates{ padding-top:0; .list{ max-width: 310px; text-align: center; width: 100%; @include center-block(); label{ display: inline-block; margin-top: 0; padding-bottom: 1rem; .checkbox{ left:0; margin-left:0; } .item-content{ margin-left: 12%; position: relative; font-size:.8rem; } } } } } .item { border: none; label{ background: none; } .checkbox input:before, .checkbox .checkbox-icon:before { border-radius: 50% !important; background: none; border-width: 2px; padding: .9rem; position: relative; left: -7px; top: -8px; } .checkbox input:checked:after, input:checked + .checkbox-icon:after { border-color: rgb(19, 229, 182); top:20%; left:11%; } .item-content { width: 90%; margin-left: 10%; } } .item-checkbox .checkbox { margin-left: 10%; top: 55%; } .checkbox input:before, .checkbox .checkbox-icon:before{ border-color:$soft-blue; } .checkbox input:checked:before, .checkbox input:checked + .checkbox-icon:before { border-color: rgb(19, 229, 182); } } @media (min-width: 1000px){ #onboarding-collect-email{ #collect-email{ p, form{ max-width: 600px; @include center-block(); } form{ margin-top:.5rem; } } } } @keyframes topBottom { 0% { bottom: -100%; } 100% { bottom: 0; } } @keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } }