#slider-wrapper *{
    box-sizing: border-box;
}

#slider-wrapper p {
    font-size: 2rem;
}
#slider-wrapper > div {
    border-radius: 5px;
    width: 340px;
    height: 220px;
    background: #ddd;
    position: absolute;
    top: 50%;
    left: 50%;
    /*transition: transform 1s, background-color 0.3s;*/
    transition: 1s;
    padding: 10px;
    background: white;
    color: #333;
    border: 2px solid #ddd;
    display: grid;
    grid-template-rows: 50px 1fr;
    align-items: center;
    -webkit-box-reflect: below 3px linear-gradient(transparent,transparent,#0005);
}

#slider-wrapper > div.active {
    transform: translate(-50%,-40%);
    background: #13b66f;
    color: white;
    border: 2px solid #13b66f;
}

/*#slider-wrapper div.active:hover {
    background: #13b66f;
    color: white;
}*/

#slider-wrapper > div.prev, #slider-wrapper div.prev-hide {
    transform: scale(0.8) translate(0%, -50%) perspective(800px) rotateY(-20deg);
    opacity: 0.5;
    transform-origin: center;
    left: 5%;

}

#slider-wrapper > div.after, #slider-wrapper div.after-hide {
    transform: scale(0.8) translate(0%, -50%) perspective(800px) rotateY(20deg);
    opacity: 0.5;
    transform-origin: center;
    left: 64%;
}

@keyframes hide{
    0%{ opacity: 1; }
    100%{opacity: 0; visibility: hidden;}
}



#slider-wrapper > div.prev-hide, #slider-wrapper > div.after-hide {
    visibility: hidden;
    opacity: 0;
    /*animation: hide 1s forwards;*/
}

#slider-wrapper button, #slider-wrapper > i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 35px;
    cursor: pointer;
}

#slider-wrapper > i {
    color: #13b66f;
    font-size: 3rem;
}

#slider-wrapper .prev-btn{
    left: 10px;
}

#slider-wrapper .after-btn {
    right: 10px;
}

#slider-wrapper {
    position: relative;
    text-align: center;
    /*grid-column: 2/3;*/
    height: 400px;
}

#slider-wrapper > div .slide-content{
    font-family: 'Open Sans', sans-serif;
}