.timer-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; font-size: 25px; font-weight: 500; position: relative; color: #ffffff; margin: 20px 0; } .stepbox .timer-wrapper { top: 27px; position: absolute; right: 50%; transform: translateX(-170px); margin: 0; } .timer-section { display: -webkit-box; display: -ms-flexbox; display: flex; } .timer { width: 40px; height: 60px; background-color: rgba(0, 0, 0, 0.3); border-radius: 10px; margin: 3px; display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 45px; -webkit-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .timer-blur { background-color: rgba(0, 0, 0, 0.3); -webkit-filter: blur(3px); filter: blur(3px); -webkit-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } @media (max-width: 768px) { .stepbox .timer-wrapper { left: 20px; transform: none; } .timer { width: 26px; height: 40px; margin: 1px; font-size: 20px; line-height: 26px; } } .pop-up--timer { background-color: rgba(0, 0, 0, 0.5); position: fixed; right: 0; left: 0; top: 0; bottom: 0; z-index: 9; padding: 25px 15px; } .popUp--block { animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; background-color: #fff; min-height: 300px; width: 100%; max-width: 650px; margin: auto; padding: 50px 15px; box-sizing: border-box; border-radius: 45px; } .countdown-title { display: block; font-size: 40px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; color: #00AFF0; text-align: center; } .countdown-message { display: block; font-size: 20px; font-weight: 400; color: #141414; text-align: center; } .popUp--block .btn { margin: 0 auto; border: none; }