@mixin translate($x: 0, $y: 0, $z: 0) {
    -webkit-transform:translate3d($x, $y, $z);
    -moz-transform:translate($x, $y);
    -ms-transform:translate($x, $y);
    -o-transform:translate($x, $y);
    transform:translate3d($x, $y, $z);
}

@mixin transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) {
    -webkit-transition:$prop $duration $easing $delay;
    -moz-transition:$prop $duration $easing $delay;
    -ms-transition:$prop $duration $easing $delay;
    -o-transition:$prop $duration $easing $delay;
    transition:$prop $duration $easing $delay;
}

@mixin transform($val) {
    -webkit-transform:$val;
    -moz-transform:$val;
    -ms-transform:$val;
    -o-transform:$val;
    transform:$val;
}

.csstransitions.csstransforms {
    overflow-x:hidden;
    
    .deck-container .slide {
        -webkit-transition:-webkit-transform 500ms ease-in-out;
        -moz-transition:-moz-transform 500ms ease-in-out;
        -ms-transition:-ms-transform 500ms ease-in-out;
        -o-transition:-o-transform 500ms ease-in-out;
        transition:transform 500ms ease-in-out;
    }
    
    .deck-container:not(.deck-menu) {
        .slide {
            position: absolute;
            top:0;
            left:0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            //padding:24px 24px;
            
            .slide {
                
                position:relative;
                left: 0;
                top: 0;
                -webkit-transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
                -moz-transition: -moz-transform 500ms ease-in-out, opacity 500ms ease-in-out;
                -ms-transition: -ms-transform 500ms ease-in-out, opacity 500ms ease-in-out;
                -o-transition: -o-transform 500ms ease-in-out, opacity 500ms ease-in-out;
                transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
            }
            
            .deck-next, .deck-after {
                visibility: visible;
                @include translate(200%);
            }
            
            .deck-before, .deck-previous {
                opacity:0.4;
            }
        }
        
        > .deck-previous {
            @include translate(-200%);
        }
        
        > .deck-before {
            @include translate(-400%);
        }
        
        > .deck-next {
            @include translate(200%);
        }
        
        > .deck-after {
            @include translate(400%);
        }
        
        > .deck-before, > .deck-previous {
            .slide {
                visibility:visible;
            }
        }
        
        > .deck-child-current {
            @include transform(none);
        }
    }
}