.popup{position:fixed;top:0;left:0;bottom:0;right:0;opacity:0;visibility:hidden;z-index:100;-moz-transition:all .4s ease;-webkit-transition:all .4s ease;transition:all .4s ease}.popup.active{opacity:1;visibility:visible}.popup .wrapper{position:absolute;top:0;left:0;bottom:0;right:auto;width:100%;max-width:460px;background:var(--white);padding:20px;box-sizing:border-box;z-index:1;-moz-transition:all .4s ease;-webkit-transition:all .4s ease;transition:all .4s ease}.popup .wrapper:before{content:" ";position:absolute;top:0;left:100%;bottom:auto;right:auto;height:100vh;width:100vw;background:rgba(0,0,0,0.2);z-index:-1;pointer-events:none}.popup .wrapper .close{position:absolute;top:10px;left:auto;bottom:auto;right:10px;width:42px;height:42px;line-height:42px;text-align:center;cursor:pointer}.popup .wrapper .close:after{content:"close";font-family:Material Icons Outlined;font-size:20px}.popup .wrapper>.title{margin-top:40px;padding-bottom:60px;font-size:30px;font-weight:bold;color:var(--text);text-align:center;border-bottom:1px solid var(--light)}@media (max-width: 768px){.popup .wrapper{padding:10px}.popup .wrapper>.title{margin-top:30px;font-size:20px;padding-bottom:20px}}