@default-diff:  12px;
@default-width: 100%;
@default-min: 10%;

.container {
    width: 100%;
    height: 900px;
    background-color: #fff;
    padding: 50px 80px;
    
    .card-stack {
        width: 500px;
        height: 250px;
        position: absolute;
        margin: 20px auto;

        .buttons {
            display: none;
            position: absolute;
            background: rgba(0, 0, 0, 0.46);
            border: 2px solid rgba(255, 255, 255, 0.7);
            border-radius: 50%;
            width: 35px;
            height: 35px;
            left: 0;
            top: 55%;
            color: rgba(255, 255, 255, 0.7);
            text-align: center;
            line-height: 35px;
            text-decoration: none;
            font-size: 22px;
            z-index: 100;
            outline: none;
            transition:all 0.2s ease;
            &:hover{
                transform: scale(1.3,1.3);
            }
        }

        .prev {
            left: 15px;
            right: auto;
        }

        .next {
            left: auto;
            right: 15px;
        }

        .carousel .buttons:hover {
            color: #C01313 ;
            background: #fff;
        }
        
        .card-list {
            width: 300px;

            li {
                transition: all 100ms ease-in-out;
                border-radius: 2px;
                position: absolute;
                list-style: none;
                height: 300px;
                -webkit-box-shadow: 0 2px 15px 1px rgba(225, 225, 225, 0.5);
                box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.5);    
                left: 0;
                right: 0;
                margin: 0 auto;
                padding-top: 20px;
                text-align: center;
                background-size:cover;

                &:nth-child(1) {
                    top: (@default-diff * 2);
                    width: @default-width - @default-min * 4;
                    /* animation: scaleCard 100ms; */
                }
                &:nth-child(2) {
                    top: (@default-diff * 3);
                    width: @default-width - @default-min * 3;
                }
                &:nth-child(3) {
                    top: (@default-diff * 4);
                    width: @default-width - @default-min * 2;
                }
                &:nth-child(4) {
                    top: (@default-diff * 5);
                    width: @default-width - @default-min * 1;
                }
                &:nth-child(5) {
                    top: (@default-diff * 6);
                    width: @default-width - @default-min * 0;
                }
            }

        }
			
				&:hover {
				> .buttons.prev {
					display: block;
					animation: bounceInLeft 200ms; 
				}

				> .buttons.next {
					display: block;
					animation: bounceInRight 200ms; 
				}
			}
    }
}

.transformThis {
    animation: scaleDown 500ms;
}

.transformPrev {
    animation: scaleUp 100ms;
		display: none;
}

@keyframes scaleUp {
    0% {transform: scale(1.2) translateY(50px); opacity: 0; }
    20% {transform: scale(1.15) translateY(40px); opacity: 0.10;}
    40% {transform: scale(1.10) translateY(30px); opacity: 0.20;}
    60% {transform: scale(1.05) translateY(20px); opacity: 0.40;}
    80% {transform: scale(1.01) translateY(10px); opacity: 0.80;}
    100% {transform: scale(1) translateY(0); opacity: 1;}
}

@keyframes scaleDown {
    0% {transform: scale(1) translateY(0); opacity: 1; }
    20% {transform: scale(1.01) translateY(20px); opacity: 0.80;}
    40% {transform: scale(1.05) translateY(40px); opacity: 0.40;}
    60% {transform: scale(1.10) translateY(60px); opacity: 0.20;}
    80% {transform: scale(1.15) translateY(80px); opacity: 0.10;}
    100% {transform: scale(1.2) translateY(100px); opacity: 0;}
}

@keyframes scaleCard {
    0%   {top:5px;}
    100% {top:24px;}    
}

@keyframes bounceInLeft {
  0% { opacity: 0; transform: translateX(40px); } 
  // 60% { opacity: 1; transform: translateX(20px); } 
  // 80% { transform: translateX(20px); } 
  100% { transform: translateX(0); } 
}

@keyframes bounceInRight {
  0% { opacity: 0; transform: translateX(-40px); } 
  // 60% { opacity: 1; transform: translateX(-20px); } 
  // 80% { transform: translateX(20px); } 
  100% { transform: translateX(0); } 
}

var $card = $('.card');
var lastCard = $(".card-list .card").length - 1;

$('.next').click(function(){ 
	var prependList = function() {
		if( $('.card').hasClass('activeNow') ) {
			var $slicedCard = $('.card').slice(lastCard).removeClass('transformThis activeNow');
			$('ul').prepend($slicedCard);
		}
	}
	$('li').last().removeClass('transformPrev').addClass('transformThis').prev().addClass('activeNow');
	setTimeout(function(){prependList(); }, 150);
});

$('.prev').click(function() {
	var appendToList = function() {
		if( $('.card').hasClass('activeNow') ) {
			var $slicedCard = $('.card').slice(0, 1).addClass('transformPrev');
			$('.card-list').append($slicedCard);
		}}
	
			$('li').removeClass('transformPrev').last().addClass('activeNow').prevAll().removeClass('activeNow');
	setTimeout(function(){appendToList();}, 150);
});