.success {
    position: relative;

    width: 420px;
    min-height: 95px;

    background: #0b0b0b;

    border: 1px solid rgba(87,255,59,.25);
    border-radius: 8px;

    overflow: hidden;

    box-sizing: border-box;

    box-shadow:
        0 0 12px rgba(87,255,59,.15);

    padding: 12px;
}

/* TŁO SR */

.success::after{
    content:"";

    position:absolute;

    right:90px;
    top:50%;
    
    width:120px ;
    height:120px;

    transform:translateY(-50%);
    background:url('https://filipiak.xaa.pl/sr/public/images/sr2.png') center center no-repeat;
    background-size:contain;

    opacity:.08;

    filter:
        brightness(110%)
        blur(0.5px);

    pointer-events:none;
}

/* IKONA */

.success_img{
    position:absolute;

    left:15px;
    top:15px;
}

.success_img::after{
    content:"";

    position:absolute;

    width:12px;
    height:12px;

    border-radius:50%;

    background:#57ff3b;

    opacity:0;

    animation:launchFlash 2s forwards;
    animation-delay:8s;
}

.sr-envelope{
    position:absolute;

    left:0;
    top:0;

    font-size:42px;

    color:#57ff3b;

    text-shadow:
        0 0 10px rgba(87,255,59,.9),
        0 0 20px rgba(87,255,59,.5);
    
    animation:envelopeFly 8s ease forwards;
}

.sr-plane{
    position:absolute;

    left:0;
    top:0;

    font-size:42px;

    color:#57ff3b;

    opacity:0;

    text-shadow:
        0 0 10px rgba(87,255,59,.9),
        0 0 20px rgba(87,255,59,.5);

    animation:
        planeAppear .2s forwards,
        planeFly 2s linear forwards;

    animation-delay:
        8s,
        8s;
}

/* TYTUŁ */

.success_title{
    position:absolute;

    left:85px;
    top:8px;

    color:#57ff3b;

    font-size:18px;
    font-weight:700;

    text-transform:uppercase;

    text-shadow:none;
}

/* TEKST */

.success_text{
    position:absolute;

    left:85px;
    top:44px;

    width:220px;

    color:#d7d7d7;

    font-size:12px;

    line-height:1.4;

    text-shadow:none;
}

/* X */

.success_x{
    position:absolute;

    right:6px;
    top:6px;

    color:#8a8a8a;

    font-size:18px;

    cursor:pointer;
}

.success_x:hover{
    color:#ffffff;
}

/* SAVAGE ROUTINE */

.success_brand{
    position:absolute;

    right:20px;
    top:32px;

    text-align:right;

    font-weight:800;

    line-height:1;
}

.success_brand .white{
    color:#ffffff;
    display:block;
}

.success_brand .orange{
    color:#ff5806;
    display:block;
}

/* PASEK */

.success_progress{
    position:absolute;

    left:15px;
    right:15px;
    bottom:8px;

    height:4px;

    background:#1a1a1a;

    border-radius:20px;

    overflow:hidden;
}

.success_progress_bar{
    width:100%;
    height:100%;

    background:#57ff3b;

    animation:notifyBar 10s linear forwards;
}

/* LICZNIK */

.success_timer{
    position:absolute;

    right:15px;
    bottom:14px;
    opacity:.8;
    font-size:10px;

    color:#888;
}

.success_timer span{
    color:#57ff3b;
}

@keyframes notifyBar{
    from{
        width:100%;
    }
    to{
        width:0%;
    }
}

@keyframes planeAppear{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

@keyframes launchFlash{

    0%,89%{
        opacity:0;
    }

    90%{
        opacity:1;
        transform:scale(3);
    }

    100%{
        opacity:0;
        transform:scale(0);
    }
}

@keyframes envelopeFly{

    0%{
        transform:rotate(0deg);
    }

    10%{
        transform:rotate(-8deg);
    }

    20%{
        transform:rotate(8deg);
    }

    30%{
        transform:rotate(-10deg);
    }

    40%{
        transform:rotate(10deg);
    }

    50%{
        transform:rotate(-14deg);
    }

    60%{
        transform:rotate(14deg);
    }

    70%{
        transform:rotate(-18deg);
    }

    75%{
        transform:rotate(18deg);
    }

    80%{
        transform:rotate(-24deg) scale(1.15);
    }

    85%{
        transform:rotate(24deg) scale(1.2);
    }

    90%{
        transform:rotate(-28deg) scale(1.25);
    }

    95%{
        transform:rotate(360deg) scale(1.35);
        opacity:1;
    }

    100%{
        transform:rotate(360deg) scale(.2);
        opacity:0;
    }
}

@keyframes planeFly{

    from{
        transform:
            translate(0,0)
            rotate(0deg)
            scale(.8);
    }

    to{
        transform:
            translate(180px,-50px)
            rotate(-20deg)
            scale(.9);
    }

}


.error{
    position:relative;

    width:420px;
    min-height:95px;

    background:#0b0b0b;

    border:1px solid rgba(255,77,77,.25);
    border-radius:8px;

    overflow:hidden;

    box-sizing:border-box;

    box-shadow:
        0 0 12px rgba(255,77,77,.15);

    padding:12px;
}

/* SR TŁO */

.error::after{
    content:"";

    position:absolute;

    right:90px;
    top:50%;

    width:120px;
    height:120px;

    transform:translateY(-50%);

    background:url('https://filipiak.xaa.pl/sr/public/images/sr2.png') center center no-repeat;
    background-size:contain;

    opacity:.08;

    filter:
        brightness(110%)
        blur(.5px);

    pointer-events:none;
}

/* IKONA */

.error_img{
    position:absolute;

    left:15px;
    top:15px;

    width:50px;
    height:50px;
}

.error-envelope{
    position:absolute;

    left:0;
    top:0;

    font-size:42px;

    color:#ff4d4d;

    text-shadow:
        0 0 10px rgba(255,77,77,.9),
        0 0 20px rgba(255,77,77,.5);

    animation:errorEnvelope 10s ease forwards;
}

.error-fail{
    position:absolute;

    left:24px;
    top:24px;

    font-size:20px;

    color:#ff4d4d;

    opacity:0;

    text-shadow:
        0 0 10px rgba(255,77,77,.9);

    animation:errorFail 10s forwards;
}

.error-plane{

    position:absolute;

    left:0;
    top:0;

    font-size:42px;

    color:#ff4d4d;

    opacity:0;

    animation:
        planeAppear .2s forwards,
        planeCrash 3s linear forwards;

    animation-delay:
        5s,
        5s;
}

/* TYTUŁ */

.error_title{
    position:absolute;

    left:85px;
    top:8px;

    color:#ff4d4d;

    font-size:18px;
    font-weight:700;

    text-transform:uppercase;
}

/* TEKST */

.error_text{
    position:absolute;

    left:85px;
    top:44px;

    width:220px;

    color:#d7d7d7;

    font-size:12px;

    line-height:1.4;
}

/* X */

.error_x{
    position:absolute;

    right:6px;
    top:6px;

    color:#8a8a8a;

    font-size:18px;

    cursor:pointer;
}

.error_x:hover{
    color:#ffffff;
}

/* BRAND */

.error_brand{
    position:absolute;

    right:20px;
    top:32px;

    text-align:right;

    font-weight:800;

    line-height:1;
}

.error_brand .white{
    display:block;
    color:#ffffff;
}

.error_brand .orange{
    display:block;
    color:#ff5806;
}

/* PROGRESS */

.error_progress{
    position:absolute;

    left:15px;
    right:15px;
    bottom:8px;

    height:4px;

    background:#1a1a1a;

    border-radius:20px;

    overflow:hidden;
}

.error_progress_bar{
    width:100%;
    height:100%;

    background:#ff4d4d;

    animation:notifyBar 10s linear forwards;
}

/* TIMER */

.error_timer{
    position:absolute;

    right:15px;
    bottom:14px;

    font-size:10px;

    opacity:.8;

    color:#888;
}

.error_timer span{
    color:#ff4d4d;
}

/* PROGRESS */

@keyframes notifyBar{

    from{
        width:100%;
    }

    to{
        width:0%;
    }

}

/* KOPERTA */

@keyframes errorEnvelope{

    0%{
        opacity:1;
        transform:rotate(0deg);
    }

    5%{
        transform:rotate(-6deg);
    }

    10%{
        transform:rotate(6deg);
    }

    15%{
        transform:rotate(-8deg);
    }

    20%{
        transform:rotate(8deg);
    }

    25%{
        transform:rotate(-10deg);
    }

    30%{
        transform:rotate(10deg);
    }

    35%{
        transform:rotate(-12deg);
    }

    40%{
        transform:rotate(12deg);
    }

    45%{
        opacity:1;

        transform:
            rotate(-18deg)
            scale(1.15);
    }

    /* zamiana w samolot */

    50%{
        opacity:0;

        transform:
            rotate(720deg)
            scale(.1);
    }

    100%{
        opacity:0;

        transform:
            rotate(720deg)
            scale(.1);
    }
}


@keyframes planeCrash{

    0%{
        transform:
            translate(0,0)
            rotate(0deg);
    }

    20%{
        transform:
            translate(35px,-8px)
            rotate(-5deg);
    }

    40%{
        transform:
            translate(70px,-15px)
            rotate(-10deg);
    }

    60%{
        transform:
            translate(100px,-25px)
            rotate(-12deg);
    }

    80%{
        transform:
            translate(130px,-35px)
            rotate(-15deg);
    }

    100%{
        opacity:0;

        transform:
            translate(160px,-40px)
            rotate(-18deg);
    }
}

.error-boom{

    position:absolute;

    left:145px;
    top:-55px;

    font-size:50px;

    color:#ff4d4d;

    opacity:0;

    text-shadow:
        0 0 10px rgba(255,77,77,.9),
        0 0 20px rgba(255,77,77,.9),
        0 0 40px rgba(255,77,77,.8),
        0 0 70px rgba(255,77,77,.6);

    animation:errorBoom .8s forwards;

    animation-delay:8.8s;
}

@keyframes errorBoom{

    0%{
        opacity:0;
        transform:scale(.2);
    }

    30%{
        opacity:1;
        transform:scale(1.8);
    }

    100%{
        opacity:0;
        transform:scale(3);
    }
}