/* ab-notification */

.ab-notification {
    width: 450px;
    height: auto;
    display: block;
    position: relative;
    margin: 0 auto;
    margin-top: 40px;
    font-size: 20px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 2px 3px 6px rgba(0,0,0,0.23);
    -webkit-transition: transform .6s cubic-bezier(.165, .84, .44, 1);
    transition: transform .6s cubic-bezier(.165, .84, .44, 1);
    animation: pulse .4s forwards;
}

.ab-notification .ab-notification__header {
    color: #fff;
    font-size: inherit;
    font-weight: 100;
    font-family: ;
    font-style: ;
    background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 52 52' width='100%25' height='100%25' version='1.1' viewBox='0 0 52 52' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath fill='%23fff' d='M49.4656715,41.2599487l-20.25-34.4099731C28.5256691,5.6900024,27.3256569,5,25.9956398,5 c-1.3200073,0-2.5299683,0.6900024-3.2099609,1.8499756l-20.25,34.4099731 c-0.710022,1.2000122-0.7200317,2.6400146-0.0300293,3.8500366C3.1856432,46.289978,4.3956652,47,5.7456408,47h40.5100098 c1.3499756,0,2.5599976-0.710022,3.2299805-1.8900146C50.1856422,43.8999634,50.1756325,42.4599609,49.4656715,41.2599487z M23.9363747,19.8552856h3.3808594v3.1870117l-0.7246094,8.9189453H24.660984l-0.7246094-8.9189453V19.8552856z M26.9065895,37.1985474c-0.3540039,0.3623047-0.7768555,0.5439453-1.2675781,0.5439453 c-0.4912109,0-0.9140625-0.1816406-1.2680664-0.5439453c-0.3544922-0.3623047-0.53125-0.7939453-0.53125-1.296875 c0-0.5019531,0.1767578-0.9345703,0.53125-1.296875c0.3540039-0.3623047,0.7768555-0.5439453,1.2680664-0.5439453 c0.4907227,0,0.9135742,0.1816406,1.2675781,0.5439453s0.53125,0.7949219,0.53125,1.296875 C27.4378395,36.4046021,27.2605934,36.8362427,26.9065895,37.1985474z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 32px;
    background-position-x: 24px;
    background-position-y: 24px;
    padding-top: 30px;
    margin-bottom: 0;
    padding-bottom: 30px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-top: 0;
    padding-left: 80px;
    background-color: #E57373;
}

.ab-notification .ab-notification__list {
    margin-top: 40px;
    margin-bottom: 30px;
    color: #616161;
    font-size: 14px;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    background: #ffffff;
    padding: 0;
    margin-top: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.ab-notification .ab-notification__list .ab-notification__entry {
    list-style: none;
    padding-top: 30px;
    background-size: 20px;
    padding: 30px;
    padding-bottom: 10px;
    position: relative;
}

.ab-notification  .ab-notification__list .ab-notification__entry:before {
    content: '';
    width: 10px;
    height: 10px;
    display: inline-block;
    position: absolute;
    left: 13px;
    top: 32px;
    background-color: #E57373;
}

.ab-notification .ab-notification__list .ab-notification__entry + .ab-notification__entry {
    padding-top: 10px;
}

.ab-notification .ab-notification__list .ab-notification__entry:last-of-type {
    padding-bottom: 30px;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@media screen and (max-width: 600px) {
    .ab-notification { width: 80%; }
}