.st-bubble-box {

    position: relative;
    z-index: 90;
    clear: both;
    margin: 0 auto;
    background-color: #fff;

    .border-radius(10px);
    .box-shadow(0 0 8px rgba(0,0,0,.3));

    .box-sizing();

    .st-ribbon {

        position: relative;
        left: -15px;
        top: 30px;

        /*float: left;*/
        z-index: 100;

        background-color: @mb;

        .box-shadow(0 0 4px rgba(0,0,0,.55));
        .box-sizing();

        h2 {

            font-size: 30px;
            color: #fff;
            padding: 15px;
            margin: 0;
            text-align: center;
            text-shadow: 1px 1px 2px rgba(0,0,0,.2);
        }
    }

    .st-ribbon-l {

        position: relative;
        top: 15px;
        left: -28px;
        z-index: -1;
        height: 0;
        width: 0;
        border-style: solid;
        border-width: 14px;
        border-color: transparent @mb-lighter transparent transparent;
    }

    /*    .triangle-r {
    
            border-style: solid;
            border-width: 15px;
            height: 0;
            width: 0;
            position: relative;
            left: 350px;
            top: 35px;
            border-color: transparent transparent transparent #7d90a3;
            z-index: -1;
        }*/

    .info {

        position: relative;
        padding: 25px 35px;

        h2 {

            font-size: 20px;
        }

        ul {

            /*padding-left: 20px;*/

            /*border-left: 3px solid @gray-lighter;*/

            li {

                margin-bottom: 1em;
                padding-left: 1em;
                border-left: 3px solid @mb-lighter;
            }
        }

        p {

            padding-top: 10px;
            font-size: 14px;
            line-height: 22px;

            a {

                display: block;
                padding: 1em 2em;

                border: 2px solid @mb;

                text-align: center;
                text-decoration: none;
                color: @mb;

                .border-radius(5px);
                .transition(all .3s ease);

                &:hover, &:focus {

                    background-color: @mb;
                    color: #fff;
                    .transition(all .3s ease);
                }
            }
        }

        .st-fa-i {
            position: absolute;
            top: 8px;
            right: 0;

            padding: .7em 4em;
            color: @mb-rgb-4;
        }
    }
}

.st-premium-box {

    margin: 50px auto 0 auto;
    .box-sizing();

    .st-premium-tips {

        position: relative;
        top: -5px;
        left: 15px;
        z-index: 80;

        ul {

            li {

                float: left;

                margin: 7px -14px;
                background-color: #7f9db9;
                text-align: right;

                .rotate(-45deg);

                a {

                    display: block;
                    padding: 0 5px 0 40px;
                    color: #fff;
                    text-decoration: none;
                    font-size: .7rem;

                    .transition(all .2s ease);

                    /*                    &:hover {
                    
                                            padding: 5px 5px 5px 50px;
                                            .transition(all .2s ease);
                                        }*/
                }
            }

            li.l1 {

                background-color: @mb-rgb-9;

                &:hover {

                    background-color: @mb-rgb-10;
                }
            }

            li.l2 {

                background-color: @mb-rgb-8;

                &:hover {

                    background-color: @mb-rgb-10;
                }
            }

            li.l3 {

                background-color: @mb-rgb-7;

                &:hover {

                    background-color: @mb-rgb-10;
                }
            }

            li.l4 {

                background-color: @mb-rgb-6;

                &:hover {

                    background-color: @mb-rgb-10;
                }
            }

            li.l5 {

                background-color: @mb-rgb-5;

                &:hover {

                    background-color: @mb-rgb-10;
                }
            }

            li.l6 {

                background-color: @mb-rgb-4;

                &:hover {

                    background-color: @mb-rgb-10;
                }
            }
        }
    }
}

.melibu-ab-premium {

    content: ""; 
    visibility: hidden;
    display: none;
    position: fixed;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;

    z-index: 99999999;

    background: rgba(0,0,0,.6);

    .transition(all .2s ease);
    .box-sizing();

    .melibu-premium {

        overflow: hidden;

        display: flex;
        align-items: center;
        justify-content: left;

        position: fixed; 
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 11;

        width: 70%;
        min-width: 540px;
        height: 350px;
        max-height: 350px;

        margin: auto;	

        background-color: #fff;

        .box-shadow-double(0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24));
    }

    .icon {

        position: relative;
        display: block;
        font-size: 2rem;
        margin-right: 20px;

        .transition(all .2s ease-out);
    }

    .active {

        fill: #E74C3C;
    }

    .big {

        width: 64px;
        height: 64px;
        font-size: 3rem;
    }

    .left-side {

        display: flex;
        align-items: center;
        justify-content: center;

        height: 70%;
        width: 25%;

        ul {

            width: 100%;

            li {

                display: flex;

                padding-left: 20px;
                padding-top: 10px;
                padding-bottom: 10px;

                line-height: 33px;
                color: rgba(0,0,0,.5);
                font-weight: 500;

                cursor: pointer;

                .transition(all 1s ease-out);

                &:hover {

                    color: rgba(0,0,0,1);

                    .transition(all .2s ease-in-out);
                }

                &:hover > .icon {

                    color: rgba(0,0,0,1);
                }
            }

            li.active {

                color: @mb;
                .transition(all 1s ease);

                &:hover > .icon {

                    color: @mb;
                }
            }
        }
    }

    #border {

        height: 288px;
        width: 1px;
        background-color: rgba(0,0,0,.2);

        #line.one {

            width: 5px;
            height: 54px;
            margin-left: -2px;
            margin-top: 25px;

            background-color: @mb;

            .transition(all .4s ease-in-out);
        }

        #line.two {

            width: 5px;
            height: 54px;
            background-color: #E74C3C;
            margin-left: -2px;
            margin-top: 85px;

            background-color: @mb;

            .transition(all .4s ease-in-out);
        }

        #line.three {

            width: 5px;
            height: 54px;
            margin-left: -2px;
            margin-top: 144px;

            background-color: @mb;

            .transition(all .4s ease-in-out);
        }

        #line.four {

            width: 5px;
            height: 54px;
            margin-left: -2px;
            margin-top: 203px;

            background-color: @mb;

            .transition(all .4s ease-in-out);
        }
    }

    #right-side {

        overflow: hidden;

        width: 75%;
        height: 300px;

        #first, 
        #second, 
        #third, 
        #fourth {

            position: absolute;

            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            width: 75%;
            height: 300px;
            margin-top: -350px;

            .opacity(0);
            .transition(all .6s ease-in-out);

            h1 {

                font-weight: 800;
                color: #000;	
            }

            p {

                color: #000;
                font-weight: 500;
                padding-left: 30px;
                padding-right: 30px;
                margin: 0;
            }

            ol {

                padding-left: 30px;
                padding-right: 30px;
                margin: 0;
            }
        }

        #first.active, 
        #second.active, 
        #third.active, 
        #fourth.active {

            margin-top: 0;
            .opacity(1);
            .transition(all .6s ease-in-out);
        }
    }
}

.melibu-ab-docu {

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: left;

    position: relative; 
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 11;

    width: 100%;
    height: 420px;

    margin: 10px auto;	

    background-color: #fff;

    .box-shadow-double(0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24));
    .box-sizing();

    .st-present {

        background: #f4f4f4;
        font: 13px "Courier 10 Pitch",Courier,monospace;
        line-height: 1.5;
        margin-bottom: 1.625em;
        padding: .75em 1.625em;
    }

    .st-icon {

        display: block;
        font-size: 1rem;
        width: 40px;

        .transition(all .2s ease-out);
        
        .dashicons {
            
            font-size: 2.3rem;
        }
    }

    .st-active {

        fill: #E74C3C;
    }

    .st-big {

        width: 64px;
        height: 64px;
        font-size: 3rem;
    }

    .left-side {

        position: relative;
        display: block;
        width: 24%;

        .box-sizing();

        ul {

            width: 100%;

            li {

                display: flex;

                padding-left: 20px;
                padding-top: 10px;
                padding-bottom: 10px;

                line-height: 33px;
                color: rgba(0,0,0,.5);
                font-weight: 500;
                font-size: .7rem;
                cursor: pointer;

                .transition(all 1s ease-out);

                &:hover {

                    color: rgba(0,0,0,1);

                    .transition(all .2s ease-in-out);
                }

                &:hover > .icon {

                    color: rgba(0,0,0,1);
                }
            }

            li.st-active {

                color: @mb;
                .transition(all 1s ease);

                &:hover > .icon {

                    color: @mb;
                }
            }
        }
    }

    .border {

        width: 5px;
        height: 410px;
        background-color: rgba(0,0,0,.2);

        .box-sizing();

        .line.one {

            width: 5px;
            height: 54px;
            margin-top: 0;

            background-color: @mb;

            .transition(all .4s ease-in-out);
        }

        .line.two {

            width: 5px;
            height: 54px;
            background-color: #E74C3C;
            margin-top: 56px;

            background-color: @mb;

            .transition(all .4s ease-in-out);
        }

        .line.three {

            width: 5px;
            height: 54px;
            margin-top: 114px;

            background-color: @mb;

            .transition(all .4s ease-in-out);
        }

        .line.four {

            width: 5px;
            height: 54px;
            margin-top: 176px;

            background-color: @mb;

            .transition(all .4s ease-in-out);
        }

        .line.five {

            width: 5px;
            height: 54px;
            margin-top: 236px;

            background-color: @mb;

            .transition(all .4s ease-in-out);
        }

        .line.six {

            width: 5px;
            height: 54px;
            margin-top: 296px;

            background-color: @mb;

            .transition(all .4s ease-in-out);
        }

        .line.seven {

            width: 5px;
            height: 54px;
            margin-top: 356px;

            background-color: @mb;

            .transition(all .4s ease-in-out);
        }
    }

    .right-side {

        overflow-x: auto;
        overflow-y: auto;
        position: relative;

        display: block;
        width: 75%;
        height: 100%;

        .box-sizing();

        ul {

            width: 100%;
            list-style: square;
            padding-left: 20px;
        }

        .first, 
        .second, 
        .third, 
        .fourth,
        .fifth,
        .sixth,
        .seventh {

            position: absolute;
            top: -2000px;
            padding: 3em;

            .opacity(0);
            .transition(all .6s ease-in-out);

            h1 {

                font-weight: 800;
                color: #000;	
            }

            p {

                color: #000;
                font-weight: 500;
            }

            img {

                width: 100%;
            }

            ol {

                padding-left: 30px;
                padding-right: 30px;
                margin: 0;
            }
        }

        .first.active, 
        .second.active, 
        .third.active, 
        .fourth.active,
        .fifth.active,
        .sixth.active,
        .seventh.active {

            top: 0;

            .opacity(1);
            .transition(all .6s ease-in-out);
        }
    }
}

@media only screen and(min-width: 768px) {
    
    .melibu-ab-docu {

        .st-icon {

            font-size: 2rem;
            margin-right: 10px;
        }
        
        .left-side {
            
            width: 24%;
        }
    }
}