@import url("https://fonts.googleapis.com/css?family=Roboto:100,400");*{margin:0;padding:0;box-sizing:border-box;}
*:before, *:after{box-sizing:inherit;-webkit-font-smoothing:antialiased;}
h1{margin-bottom:20px;padding-bottom:4px;border-bottom:1px solid #ddd;font-size:32px;font-weight:100;color:#626262;}
p{margin-bottom:8px;}
a{color:#2196f3;}
input:focus{}
input[type="text"]{width:400px;padding:8px 12px;}
.button{margin-bottom:4px;padding:8px 12px;border:1px solid #75B9E1;border-radius:3px;background:#4FA0D0;cursor:pointer;font-family:inherit;text-transform:uppercase;color:#fff;}
.button:focus{outline:none;}
.button--warning{border:1px solid #FFB039;background:#ff9800;}
.button--success{border:1px solid #71E6AB;background:#4AD890;}
.button--error{border:1px solid #F578A4;background:#EF5289;}
.popup{visibility:hidden;-webkit-transition:visibility 0ms linear 0.3s;transition:visibility 0ms linear 0.3s;}
.popup--visible{visibility:visible;-webkit-transition:visibility 0ms;transition:visibility 0ms;}
.popup--visible .popup__background{opacity:1;}
.popup__content{position:fixed;top:50%;left:50%;z-index:10001;min-width:400px;padding:25px 50px;background:#fff;border:1px solid #ddd;border-radius:3px;text-align:center;-webkit-animation:hide-popup 0.3s forwards;animation:hide-popup 0.3s forwards;}
.popup--visible .popup__content{-webkit-animation:show-popup 0.3s forwards;animation:show-popup 0.3s forwards;}
.popup--icon .popup__content{padding-top:130px;}
.popup--icon .popup__content:before, .popup--icon .popup__content:after{position:absolute;top:25px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:block;height:90px;width:90px;}
.popup--icon .popup__content:before{content:'';border:3px solid currentColor;border-radius:50%;-webkit-transform:translateX(-50%) scale(1, 0);transform:translateX(-50%) scale(1, 0);opacity:0;}
.popup--icon .popup__content:after{content:'\2713';line-height:90px;font-size:45px;-webkit-transform:translateX(-50%) scale(0);transform:translateX(-50%) scale(0);opacity:0;}
.popup--visible.popup--icon .popup__content:before{-webkit-animation:show-icon-cirlce 0.3s forwards 0.15s;animation:show-icon-cirlce 0.3s forwards 0.15s;}
.popup--visible.popup--icon .popup__content:after{-webkit-animation:show-icon 0.3s forwards 0.3s;animation:show-icon 0.3s forwards 0.3s;}
.-question.popup--icon .popup__content:before{border-color:#ff9800;}
.-question.popup--icon .popup__content:after{content:'?';color:#ff9800;}
.-success.popup--icon .popup__content:before{border-color:#4AD890;}
.-success.popup--icon .popup__content:after{content:'\2713';color:#4AD890;}
.-error.popup--icon .popup__content:before{border-color:#EF5289;}
.-error.popup--icon .popup__content:after{content:'\2717';color:#EF5289;}
.popup__content__title{margin-bottom:10px;font-size:28px;font-weight:100;color:#626262;}
@-webkit-keyframes show-popup{0%{-webkit-transform:translate(-50%, -50%) scale(0.7);transform:translate(-50%, -50%) scale(0.7);opacity:0;}
45%{-webkit-transform:translate(-50%, -50%) scale(1.05);transform:translate(-50%, -50%) scale(1.05);opacity:1;}
80%{-webkit-transform:translate(-50%, -50%) scale(0.95);transform:translate(-50%, -50%) scale(0.95);}
100%{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);}
}
@keyframes show-popup{0%{-webkit-transform:translate(-50%, -50%) scale(0.7);transform:translate(-50%, -50%) scale(0.7);opacity:0;}
45%{-webkit-transform:translate(-50%, -50%) scale(1.05);transform:translate(-50%, -50%) scale(1.05);opacity:1;}
80%{-webkit-transform:translate(-50%, -50%) scale(0.95);transform:translate(-50%, -50%) scale(0.95);}
100%{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);}
}
@-webkit-keyframes hide-popup{0%{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:1;}
100%{-webkit-transform:translate(-50%, -50%) scale(0.5);transform:translate(-50%, -50%) scale(0.5);opacity:0;}
}
@keyframes hide-popup{0%{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:1;}
100%{-webkit-transform:translate(-50%, -50%) scale(0.5);transform:translate(-50%, -50%) scale(0.5);opacity:0;}
}
@-webkit-keyframes show-icon{0%{-webkit-transform:translateX(-50%) scale(0);transform:translateX(-50%) scale(0);opacity:0;}
100%{-webkit-transform:translateX(-50%) scale(1);transform:translateX(-50%) scale(1);opacity:1;}
}
@keyframes show-icon{0%{-webkit-transform:translateX(-50%) scale(0);transform:translateX(-50%) scale(0);opacity:0;}
100%{-webkit-transform:translateX(-50%) scale(1);transform:translateX(-50%) scale(1);opacity:1;}
}
@-webkit-keyframes show-icon-cirlce{0%{-webkit-transform:translateX(-50%) scale(1, 0);transform:translateX(-50%) scale(1, 0);opacity:0;}
100%{-webkit-transform:translateX(-50%) scale(1, 1);transform:translateX(-50%) scale(1, 1);opacity:1;}
}
@keyframes show-icon-cirlce{0%{-webkit-transform:translateX(-50%) scale(1, 0);transform:translateX(-50%) scale(1, 0);opacity:0;}
100%{-webkit-transform:translateX(-50%) scale(1, 1);transform:translateX(-50%) scale(1, 1);opacity:1;}
}