/* container
======================================================================================================================================================================================================== */
body > .systemofadown-wrapper
{
    position: fixed; bottom: 40px; left: 10px; display: none; float: left; width: auto; height: auto; margin: 0; padding: 0;
    opacity: 0; visibility: hidden;
    will-change: auto;
    transition: opacity 0.2s ease 0s, visibility 0.2s ease 0s;
}

body > .systemofadown-wrapper.show {display: block; opacity: 1; visibility: visible;}










/* content
======================================================================================================================================================================================================== */
body > .systemofadown-wrapper > .systemofadown
{
    position: relative; display: block; float: left; margin: 0; padding: 15px 50px 15px 15px; max-width: calc(100vw - 40px);
    background: linear-gradient(to bottom left, rgba(255,255,255,1), rgba(225,225,225,1));
    border-width: 2px; border-style: solid; border-color: rgba(200,0,0,1);
    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.1);
    will-change: auto;
    transition: transform 0.2s ease 0s;
}

body > .systemofadown-wrapper > .systemofadown.min {transform: translate3d(calc(-100% + 95px),0,0);}
body > .systemofadown-wrapper > .systemofadown.max {transform: translate3d(0,0,0);}










/* text
======================================================================================================================================================================================================== */
body > .systemofadown-wrapper > .systemofadown p
{
    z-index: 2;
    position: relative; display: block; float: left; width: auto; height: auto; margin: 0; padding: 0 55px 0 0; width: auto;
    text-transform: uppercase;
    font-weight: 600; font-size: 14px; line-height: 1.5em;
    color: rgba(0,0,0,1);
}

/* exclamation point */
body > .systemofadown-wrapper > .systemofadown p::after
{
    transform: translate3d(0,-50%,0) scale(1);
    position: absolute; top: 50%; right: 0; display: block; float: right; width: 40px; height: 40px; margin: 0; padding: 0; box-sizing: border-box; content: "\f12a";
    text-align: center;
    font-family: var(--fa); font-family: 700; font-size: 20px; line-height: 40px;
    color: rgba(255,255,255,1);
    background-color: rgba(200,0,0,1);
    border-radius: 20px;
    will-change: auto;
    animation: excPulseAni 2s ease infinite 0s;
}

@keyframes excPulseAni
{
    0% {transform: translate3d(0,-50%,0) scale(1);}
    50% {transform: translate3d(0,-50%,0) scale(1.6);}
    100% {transform: translate3d(0,-50%,0) scale(1);}
}










/* close
======================================================================================================================================================================================================== */
body > .systemofadown-wrapper > .systemofadown a.close-system-down
{
    z-index: 1;
    transform: translate3d(0,-50%,0);
    position: absolute; top: calc(50% - 1px); right: 6px; display: block; float: right; width: 41px; height: 41px; margin: 0; padding: 0;
    color: rgba(150,150,150,1);
    will-change: auto;
    transition: transform 0.2s ease 0s, color 0.2s ease 0s;
}

body > .systemofadown-wrapper > .systemofadown a.close-system-down:hover {cursor: pointer; color: rgba(50,50,50,1);}

/* arrow icon */
body > .systemofadown-wrapper > .systemofadown a.close-system-down::before
{
    z-index: 1;
    transform-origin: center center;
    position: relative; display: block; float: left; width: 100%; height: 100%; margin: 0; padding: 0; box-sizing: border-box; content: "\f067";
    text-align: center;
    font-family: var(--fa); font-weight: 700; font-size: 2.3rem; line-height: 4.1rem;
}

body > .systemofadown-wrapper > .systemofadown a.close-system-down.min::before {transform: rotate(0deg);}
body > .systemofadown-wrapper > .systemofadown a.close-system-down.max::before {transform: rotate(45deg);}

/* sliding background */
body > .systemofadown-wrapper > .systemofadown a.close-system-down::after
{
    z-index: -1;
    transform: scaleX(0); transform-origin: right center;
    position: absolute; top: 0; left: 0; display: block; float: left; width: 100%; height: 100%; margin: 0; padding: 0; box-sizing: border-box;
    background-color: green;
    opacity: 0;
    will-change: auto;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}
body > .systemofadown-wrapper > .systemofadown a.close-system-down:hover::after {transform: scaleX(1); opacity: 1;}