.cp_arrows {
    margin: 1em auto;
    position: absolute; 
    bottom: 0; 
    left: 30px;
}
.cp_arrows span {
    position: relative;
    display: inline-block;
    width: 2.1em;
    height: 2.1em;
    margin-right: 0.1em;
    margin-left: 0.1em;
}
.cp_arrows span::after {
    position: absolute;
    top: -0.5em;
    left: -2;
    width: 3.1em;
    height: 3.1em;
    content: '';
    border: 2px solid #ecd0ba;
    border-radius: 50%;
    background: #4aabec;
}
.cp_arrows [class*='cp_arrow'] {
    position: relative;
    display: inline-block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    vertical-align: middle;
    color: #ffffff;
    z-index: 99;
}
.cp_arrows [class*='cp_arrow'] {
    top: -1.45em;
    left: -0.65em;
    width: 0;
    height: 0;
    margin: 1.8em;
    border-width: 10px;
    border-style: solid;
    border-bottom-color: transparent;
    border-left-color: transparent;
}
.cp_arrows [class*='cp_arrow']:before {
    position: absolute;
    top: -4.5px;
    right: 0;
    width: 11px;
    height: 6px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: right top;
            transform-origin: right top;
    -webkit-box-shadow: inset 0 0 0 32px;
            box-shadow: inset 0 0 0 32px;
}
.cp_arrows .cp_arrow_down {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
}

.slidein {
    animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
.slideout {
    animation: slideOut 0.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;  
}

@keyframes slideIn {
    0% {
        transform: translateY(80%);
        opacity: 0;
        overflow: hidden;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
        overflow: hidden;
    }
}

@keyframes slideOut {
    0% {
        transform: translateY(0%);
        opacity: 1;
        overflow: hidden;
    }    
    100% {
        transform: translateY(80%);
        opacity: 0;
        overflow: hidden;
    }
}