.mb-lps--slides {

    position: relative;

    display: block;
    width: 100%;
    height: 350px;
    min-height: 5em;
    margin: 1em auto;

    margin-top: 1em;
    margin-bottom: 2em;

    .mb-lps--slides-info-before {

        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;

        display: block;
        width: auto;
        padding: 10px;

        color: #f00;
        font-weight: bold;
    }

    .mb-lps--slides-info-after {

        position: absolute;

        display: block;
        width: auto;
        padding: 10px;

        border: 1px solid #ccc;
        background-color: #eee;
        color: #f00;
    }

    .mb-lps--slides-container {

        position: relative;
        overflow: hidden;

        width: 100%;
        height: 100%;

        margin-left: auto;
        margin-right: auto;

        .mb-lps--slides-nav-btn {

            position: absolute;
            top: 37%;
            z-index: 5;

            width: 40px;
            height: 40px;

            background-size: 25px;
            cursor: pointer;

            .transition(all .5s ease);
        }

        .mb-lps--slides-next {

            position: absolute;
            top: 40%;
            right: 0;
            z-index: 1;

            display: block;
            width: 36px;
            height: 72px;

            background-color:rgba(0,0,0,.05);
            border-bottom-left-radius: 36px;
            border-top-left-radius: 36px;

            .box-shadow(-1px 0px 2px rgba(0, 0, 0, 0.5));

            &:hover, 
                &:focus {

                background-color: rgba(255,255,255,1);
            }

            &:hover .mb-lps--slides-next-arrow {

                border-right: 5px solid rgba(0,0,0,1); 
                border-bottom: 5px solid rgba(0,0,0,1);
            }

            .mb-lps--slides-next-arrow {

                position: absolute;
                top: 35%;
                right: 8px;
                width: 15px;
                height: 15px;
                margin:0;
                border-right: 5px solid rgba(0,0,0,.5); 
                border-bottom: 5px solid rgba(0,0,0,.5);

                .rotate(-45deg);

                &:hover, 
                    &:focus {

                    border-right: 5px solid rgba(0,0,0,1); 
                    border-bottom: 5px solid rgba(0,0,0,1);
                    opacity: .5;
                }
            }
        }

        .mb-lps--slides-prev {

            position: absolute;
            top: 40%;
            left: 0;
            z-index: 1;

            display: block;
            width: 36px;
            height: 72px;

            background-color: rgba(0,0,0,.05);
            border-bottom-right-radius: 36px;
            border-top-right-radius: 36px;

            .box-shadow(1px 0px 2px rgba(0, 0, 0, .5));

            &:hover, 
                &:focus {
                background-color:rgba(255,255,255,1);
            }

            &:hover .mb-lps--slides-prev-arrow {

                border-right: 5px solid rgba(0,0,0,1); 
                border-bottom: 5px solid rgba(0,0,0,1);
            }

            .mb-lps--slides-prev-arrow {

                position: absolute;
                top: 35%;
                left: 8px;

                width: 15px;
                height: 15px;

                margin: 0;

                border-right: 5px solid rgba(0,0,0,.5); 
                border-bottom: 5px solid rgba(0,0,0,.5);

                .rotate(135deg);

                &:hover, 
                    &:focus {

                    border-right: 5px solid rgba(0,0,0,1); 
                    border-bottom: 5px solid rgba(0,0,0,1);
                    opacity: .5;
                }
            }
        }

        .mb-lps--slides-inner {

            position: relative;
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
            background-color: rgba(155,155,155,.2);

            .box-shadow-double(1px 1px 3px #ccc inset, -1px -1px 3px #ccc inset);

            .mb-lps--slides-show {

                position: absolute;
                top: 0;
                left: 0;

                width: 1000px;
                height: 400px;
                min-width: 170px;

                padding-top: 25px;

                .transition(all 2s ease);

                .mb-lps--slides-slide {

                    overflow: hidden;
                    display: inline-block;
                    float: left;

                    height: 75%;
                    min-height: 300px;
                    min-width: 170px;

                    margin:10px;
                    background-color: rgba(255,255,255,.5);

                    .box-shadow(0 0 3px #777);

                    &:hover {

                        .box-shadow-double(0 0 3px #777, 0 1px 3px #777);
                    }

                    .mb-lps--slides-cover {

                        display: block;
                        /*height: 40%;*/
                        margin: 0;

                        &._16_9 {

                            .aspect-ratio();
                        }

                        &:not(._16_9) {

                            height: 40%;
                        }

                        img {

                            width: 100%;
                            height: 100%;
                        }
                    }

                    h3 {

                        overflow: hidden;

                        height: 10%;
                        margin-top: 0;
                        margin-bottom: 0;
                        padding: 5px 10px;

                        text-overflow: ellipsis;
                        white-space: nowrap;

                        &.align-center {
                            
                            text-align: center;
                        }

                        a {

                            margin: 0;
                        }
                    }

                    p {

                        overflow: hidden;

                        height: 30%;
                        margin-top: 0;
                        margin-bottom: 0;
                        padding: 5px 10px;

                        text-overflow: ellipsis;
                        
                        &.align-center {
                            
                            text-align: center;
                        }
                        
                        &.align-justify {
                            
                            text-align: center;
                        }
                        
                        &.align-right {
                            
                            text-align: center;
                        }
                    }

                    a {

                        margin: 10px;
                    }
                }
            }
        }
    }

    .mb-lps--slides-bar {

        position: relative;

        width: 100%;
        height: 2px;

        .box-shadow(0 0 1px #ccc);
        .transition(all .3s ease);

        &-line {

            position: absolute;
            left: 0;
            bottom: 0;

            height: 2px;

            background-color: #f00;

            .transition(all .3s ease);
        }
    }
}