.rotator when (@widget-rotator) {
    position   : relative;
    overflow   : hidden;
    background : #fff;

    // -- Description
    .slide-description {
        padding : @padding-large-vertical @padding-large-horizontal;
        color   : #FFF;
        .rgba(#000; 0.5);
    }

    img {
        width : 100%;

        & ~ .slide-description {
            position : absolute;
            right    : 0;
            bottom   : 0;
            left     : 0;
        }
    }
}

.slider{
    height : 627px;
}
.slider-vert {
    height : 750px;
    img {

    }
}

    .slide, .slide-vert {
        position   : absolute;
        top        : 0;
        left       : 0;
        width      : 100%;
        height     : 100%;
        list-style : none;
        >img {
            display: none;
        }

        & > a.generator-links:not(:first-child), & > a.tpopup:not(:first-child) {
            position : absolute;
            top      : 10px;
            left     : 10px;
        }
        .slide-overlay {
            margin: 9rem 0 4rem;
            padding: 2em 5%;
            .rgba(#fff; 50%);
            .border-radius(10px);
            span.title {
                display: block;
                margin-bottom: 0.3em;
                text-transform: uppercase;
                font-weight: 300;
                font-size: 2.3em;

            }
        }
    }

    // -- Pager
    .cycle-pager {
        position    : absolute;
        top         : 5px;
        right       : 0;
        z-index     : 20;
        text-align  : center;
        font-size   : 0;
        line-height : 0;

        > * {
            .inline-block;
            cursor     : pointer;
            margin     : 0 3px;
            color      : @primary-color;
            background : #FFF;
            .border-radius(14px);
            .icon-size(10px; true);

            &:hover {
                background : darken(@primary-bg, 10%);
            }

            &.cycle-pager-active {
                cursor     : default;
                color      : @primary-color;
                background : @primary-bg;
            }
        }
    }

    .next, .prev {
        position: absolute;
        z-index: 101;
        padding: 0 8px;
        text-align: center;
        font-size: 36px;
        font-family: 'flexkit-icons';
        cursor: pointer;
        .border-radius(0.3em);

    }
    .slider {
        .next, .prev {
            top: 46%;
            background: @brand-primary-second;
            color: #fff;
            &:hover {
                background: darken(@brand-primary-second, 5%);
            }
        }
        .next {
            right: 1%;
            &::before {
                content: "\e0c6";
            }
        }
        .prev {
            left: 1%;
            &::before {
                content: "\e0c5";
            }
        }
    }
    .slider-vert {
        .next, .prev {
            left:48%;
            color: #000;
            .rgba(#fff; 50%);

            //&:hover {
            //    background: darken(@brand-primary-second, 5%);
            //}
        }
        .next {
            top: 1em;
            &::before {
                content: "\e0c4";
            }
        }
        .prev {
            bottom: 1em;
            &::before {
                content: "\e0c1";
            }
        }
    }
    #custom-pager {
        position: absolute;
        left:1%;
        top:28%;
        z-index: 101;
        a{
            display: block;
            padding: 5px 13px;
            margin-bottom: 4px;
            color: #000;
            text-decoration: none;
            .rgba(#fff; 50%);
            .border-radius(50em);
        }
    }




    [class*="cycle-"].action-button {
        background : @primary-bg;
        color      : @primary-color;
        position   : absolute;
        top        : 50%;
        z-index    : 20;
        cursor     : pointer;
        margin-top : -@slider-button-size / 2 - @padding-large-vertical;
        padding    : @padding-large-vertical;
        .box-sizing(content-box);
        .icon-size(@slider-button-size; true);
        .transition();

        &:hover {
            background : darken(@primary-bg, 10%);
            color      : @primary-color;
        }

        &::before {
            font-family : @font-family-icons;
        }

        &.cycle-prev {
            left : -@slider-button-size * 3;

            &::before {
                content : "\e0c5";
            }
        }

        &.cycle-next {
            right : -@slider-button-size * 3;

            &::before {
                content : "\e0c6";
            }
        }
    }

    &:hover .action-button {
        &.cycle-prev {
            left : 10px;
        }

        &.cycle-next {
            right : 10px;
        }

    }
