body,html{
    margin:0
}
.demon_popup{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:auto;
    font-family:sans-serif;
    display:none;
    z-index:9999
}
.demon_popup.active{
    display:block
}
.demon_overflow{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:rgba(0,0,0,.7)
}
.demon_popup_body{
    position:absolute;
    top:10%;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    max-width:850px;
    padding:20px 20px 90px;
    background:linear-gradient(135deg,#3c72b5 0,#7b9fcc 100%) 0 0;
    box-sizing:border-box;
    border:5px solid #ddd;
    min-height:415px
}
.demon_popup_title{
    width:100%;
    text-align:center;
    font-size:28px;
    color:#fff;
    margin:0
}
.demon_popup_body img{
    position:absolute;
    left:35px;
    top:100px;
    width:100%;
    max-width:250px;
    height:220px;
    object-fit:contain
}
.demon_popup_body p{
    padding-left:270px;
    font-size:23px;
    line-height:1.3;
    margin:0;
    padding-top:30px;
    color:#fff
}
.demon_popup_body p span{
    color:#de455c;
    white-space:nowrap;
    font-size:34px;
    font-weight:700
}
.demon_popup_body p:first-of-type{
    padding-top:58px
}
.demon_popup_body a:last-of-type{
    position:absolute;
    left:50%;
    margin-left:-200px;
    bottom:20px;
    height:60px;
    background:transparent linear-gradient(to bottom,#de455c 0,#de455c 13%,#c01f37 76%,#c01f37 100%) repeat scroll 0 0;
    color:#e0e2e6;
    text-transform:uppercase;
    display:flex;
    justify-content:center;
    align-items:center;
    width:400px;
    font-size:26px;
    font-weight:900;
    border-radius:10px;
    text-decoration:none;
    box-shadow:0 0 25px rgba(0,0,0,.8)
}
.demon_popup_body a:last-of-type:hover{
    -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-name:pulse;
    animation-name:pulse
}
.demon_close{
    position:absolute;
    top:20px;
    right:20px;
    width:30px;
    height:30px;
    display:block;
    cursor:pointer
}
.demon_close:after{
    content:"";
    width:40px;
    height:4px;
    background-color:#de455c;
    transform:rotate(45deg);
    position:absolute;
    top:13px;
    left:-5px
}
.demon_close:before{
    content:"";
    width:40px;
    height:4px;
    background-color:#de455c;
    transform:rotate(-45deg);
    position:absolute;
    top:13px;
    left:-5px
}
@-webkit-keyframes fadeIn{
    from{
        opacity:0
    }
    to{
        opacity:1
    }
}
@keyframes fadeIn{
    from{
        opacity:0
    }
    to{
        opacity:1
    }
}
.demon_popup.active .demon_popup_body{
    -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-name:fadeIn;
    animation-name:fadeIn
}
@-webkit-keyframes pulse{
    from{
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
    }
    50%{
        -webkit-transform:scale3d(1.05,1.05,1.05);
        transform:scale3d(1.05,1.05,1.05)
    }
    to{
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
    }
}
@keyframes pulse{
    from{
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
    }
    50%{
        -webkit-transform:scale3d(1.05,1.05,1.05);
        transform:scale3d(1.05,1.05,1.05)
    }
    to{
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
    }
}

@media (max-width: 768px) {
.demon_popup_body img {
	position: static;
	display: block;
	max-width: none;
}
.demon_popup_body p {
	padding-left: 0;
}
.demon_popup_body a:last-of-type {
	width: 300px;
	margin-left: -150px;
}
}