.overlay{ display: none; position: fixed; top: 0; left: 0; width:100%; height: 100%; z-index: 95; background: #559dbf; opacity: .65; } .close-popup, .close-filter{ width: 40px; height: 40px; position: absolute; top: 10px; right: 10px; border: none; border-radius: 50%; background: url("../img/close-ico.png") center no-repeat transparent; &:hover{ background: url("../img/close-ico.png") center no-repeat #ddf5f8; } &:active{ background: url("../img/close-ico.png") center no-repeat #ddf5f8; } } .popup{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; max-width: 365px; z-index: 99; background: #fff; display: none; .popup-container{ background: #fff; padding: 20px 80px 50px 30px; position: relative; } .registration-popup-link, .authorization-popup-link{ color: #ffc971; position: relative; display: inline-block; padding: 10px 10px 10px 40px; font-size: 16px; border: none; background: transparent; &:before{ width: 30px; height: 30px; position: absolute; top: 0; left: 0; content: ""; } } .registration-popup-link:before{ background: url("../img/registration-ico.png") center no-repeat; } .authorization-popup-link:before{ background: url("../img/enter-ico.png") center no-repeat; top: 5px; } label{ font-weight: 400; } .forgot-pasword-link{ color: #ffc971; margin-left: 30px; } &.mobile-menu{ right: -15px; width: 250px; min-height: 100vh; .flex-wrap{ min-height: 83vh; display: flex; flex-direction: column; } .language{ margin-bottom: 15%; } .popup-container{ flex: 1 1 100%; padding: 20px 40px 20px 10px; } .mobile-menu-footer{ padding: 10px 40px 0 5px; } } } .form-tittle{ color: #95d7e0; font-size: 20px; font-weight: bold; text-transform: uppercase; text-align: center; margin: 20px 0; } .authorization-popup{ .btn-default{ width: 80%; margin-top: 30px; } } .authorization-form, .registration-form{ margin-top: 20px; } a.open-popup{ border: none; background: transparent; }