.st_teaser {

    position: relative;
    
    display: block;
    width: 100%;
    height: 280px;
    min-height: 5em;
    max-width: 188px;
    
    margin-top: 1em;
    margin-bottom: 2em;

    .st_teaser_info_before {

        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
        
        display: block;
        width: auto;
        padding: 10px;
        
        color: #f00;
        font-weight: bold;
    }

    .st_teaser_info_after {

        position: absolute;
        
        display: block;
        width: auto;
        padding: 10px;
        
        border: 1px solid #ccc;
        background-color: #eee;
        color: #f00;
    }

    .st_teaser_slider {

        position: relative;
        overflow: hidden;
        
        width: 100%;
        height: 100%;
        
        margin-left: auto;
        margin-right: auto;

        .st_teaser_slider_nav_btn {

            position: absolute;
            top: 37%;
            z-index: 5;
            
            width: 40px;
            height: 40px;
            
            background-size: 25px;
            cursor: pointer;
            
            .transition(all .5s ease);
        }

        .st_teaser_slider_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 .st_teaser_slider_next_arrow {

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

            .st_teaser_slider_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;
                }
            }
        }

        .st_teaser_slider_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 .st_teaser_slider_prev_arrow {

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

            .st_teaser_slider_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;
                }
            }
        }

        .st_teaser_slider_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);

            .st_teaser_slider_show {

                position: absolute;
                top: 0;
                left: 0;
                
                width: 1000px;
                height: 400px;
                min-width: 170px;
                
                padding-top: 25px;
                
                .transition(all 2s ease);

                .st_teaser_box {

                    overflow: hidden;
                    display: inline-block;
                    
                    width: 282px;
                    max-width: 640px;
                    min-width: 170px;
                    
                    height: 75%;
                    max-height: 233px;
                    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);
                    }

                    .st_teaser_box_cover {

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

                        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;
                        
                        a {
                            
                            margin: 0;
                        }
                    }

                    p {
                        
                        overflow: hidden;
                        
                        height: 30%;
                        margin-top: 0;
                        margin-bottom: 0;
                        padding: 5px 10px;
                        
                        text-overflow: ellipsis;
                    }
                    
                    a {
                        
                        margin: 10px;
                    }
                }
            }
        }
    }

    .st_teaser_slider_bar {

        position: relative;
        
        width: 100%;
        height: 2px;
        
        .box-shadow(0 0 1px #ccc);
        .transition(all .3s ease);

        .st_teaser_slider_bar_line {

            position: absolute;
            left: 0;
            bottom: 0;
            
            height: 2px;
            
            background-color: #f00;
            
            .transition(all .3s ease);
        }
    }
}