/******************************
*
*  RoyalSlider Default Skin
*
*    1. Arrows
*    2. Bullets
*    6. Play/close video button
*    7. Preloader
*
*  Sprite: 'rs-default.png'
*  Feel free to edit anything
*  If you don't some part - just delete it
*
******************************/

.rsBlue {
    width: 100%;
}


/* Background */
.rsBlue,
.rsBlue .rsOverflow,
.rsBlue .rsSlide,
.rsBlue .rsVideoFrameHolder,
.rsBlue .rsThumbs {
    background: #1A1A1A;
    color: white;
}


/***************
*
*  1. Arrows
*
****************/

.rsBlue .rsArrow {
    height: 100%;
    width: 72px;
    position: absolute;
    display: block;
    cursor: pointer;
    z-index: 21;
}

.rsBlue.rsVer .rsArrowLeft { top: 0; left: 0; }
.rsBlue.rsVer .rsArrowRight { bottom: 0;  left: 0; }

.rsBlue.rsHor .rsArrowLeft { left: 0; top: 0; }
.rsBlue.rsHor .rsArrowRight { right: 0; top:0; }

.rsBlue .rsArrowIcn {
    top: 50%;
    left: 50%;
    position: absolute;
    cursor: pointer;
}

.rsBlue .rsArrowIcn::before,
.rsBlue .rsArrowIcn:before {
    font-family: 'blue-mic-icons';
    color: white;
    line-height: 1em;
}

.rsBlue.rsHor .rsArrowLeft .rsArrowIcn::before,
.rsBlue.rsHor .rsArrowLeft .rsArrowIcn:before {
    content: '←' !important;
}
.rsBlue.rsHor .rsArrowRight .rsArrowIcn::before,
.rsBlue.rsHor .rsArrowRight .rsArrowIcn:before {
    content: '→' !important;
}

@media screen and (max-width: 767px) { /* xs */

    .rsBlue .rsArrowIcn {
        width: 56px;
        height: 56px;
        margin-top: -28px;
        margin-left: -28px;
    }

    .rsBlue .rsArrowIcn::before,
    .rsBlue .rsArrowIcn:before {
        font-size: 56px;
    }

}

@media screen and (min-width: 768px) { /* sm */

    .rsBlue .rsArrowIcn {
        width: 56px;
        height: 56px;
        margin-top: -28px;
        margin-left: -28px;
    }

    .rsBlue .rsArrowIcn::before,
    .rsBlue .rsArrowIcn:before {
        font-size: 56px;
    }

}

@media screen and (min-width: 992px) { /* md */

    .rsBlue .rsArrow {
        width: 100px;
    }

    .rsBlue .rsArrowIcn {
        width: 78px;
        height: 78px;
        margin-top: -39px;
        margin-left: -39px;
    }

    .rsBlue .rsArrowIcn::before,
    .rsBlue .rsArrowIcn:before {
        font-size: 78px;
    }

}

@media screen and (min-width: 1200px) { /* lg */



}

/***************
*
*  2. Bullets
*
****************/

.rsBlue .rsBullets {
    position: absolute;
    z-index: 35;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    margin: 0 auto;
    line-height: 16px;
    overflow: hidden;
}
.rsBlue .rsBullet {
    cursor: pointer;
    width: 16px;
    height: 16px;
    display: inline-block;
    padding: 0;
    margin-left: 24px;
}
.rsBlue .rsBullet span {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #777;
    background: white;
}
.rsBlue .rsBullet.rsNavSelected span {
    background-color: #1c3f94;
}

@media screen and (max-width: 767px) { /* xs */

    .rsBlue .rsBullets {
        bottom: 1em;
        text-align: center;
    }

    .rsBlue .rsBullet:first-child {
        margin-left: 0;
    }

}

@media screen and (min-width: 768px) { /* sm */

    .rsBlue .rsBullets {
        bottom: 3em;
        padding-right: 3em;
        text-align: right;
    }

}

@media screen and (min-width: 992px) { /* md */



}

@media screen and (min-width: 1200px) { /* lg */



}

/***************
*
*  6. Play/close video button
*
****************/

.rsBlue .rsPlayBtn {
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.rsBlue .rsPlayBtnIcon {

}
.rsBlue .rsPlayBtn:hover .rsPlayBtnIcon {

}
.rsBlue .rsBtnCenterer {
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.rsBlue .rsCloseVideoBtn {
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    z-index: 500;
    position: absolute;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);

}
.rsBlue .rsCloseVideoBtn.rsiOSBtn {
    top: -38px;
    right: -6px;
}

.rsBlue .rsCloseVideoIcn {
    margin: 6px;
    width: 32px;
    height: 32px;
    background: url('../img/layout/royal-slider-sprites.png') -64px 0;
    background-color: #000;
    background-color: rgba(0,0,0,0.75);
    *background-color: #000;
}
.rsBlue .rsCloseVideoIcn:hover {
    background-color: rgba(0,0,0,0.9);
}



/***************
*
*  7. Preloader
*
****************/

.rsBlue .rsPreloader {
    width:20px;
    height:20px;
    background-image:url(../img/layout/royal-slider-preloader.gif);

    left:50%;
    top:50%;
    margin-left:-10px;
    margin-top:-10px;
}