@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);	



.display {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    margin-top: 10em;
}

.slider-box {
    position: relative;
    border: 1px solid white;
    overflow: hidden !important;
    box-shadow: 0 0 0.5em rgba(0,0,0,0.6);
    
    // slides container
    ul {
        position: relative;
        margin: 0;
        padding: 0;
        list-style: none;
        left: 0;
        
        &.animate { transition: left 0.2s linear; }
        
        // slide
        li {
            position: relative;
            display: block;
            float: left;
            background: url($sliderBackground);
            text-align: center;
            // title text
            span {
                font-size: 1.6em;
            }
        }
    }
    
    .slider-btn {
        position: absolute;
        top: 40%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 20%;
        width: 10%;
        background-color: $sliderButtonColor;
        color: white;
        //
        
        &:hover {
            box-shadow: 0 0 0.3em rgba(0,0,0,0.5);
            border-radius: 0.3em;
            i { transform: scale(1.3); }
            
            &.prev i { margin-left: -0.5em; }
            &.next i { margin-left: 0.5em; }
        }
        
        &.prev {  left: 0; }
        
        &.next { right: 0; }
        
        i { transition: all 0.1s linear; }
    }
}