
#rs-demo-id {
}

.hades.tparrows {
    cursor: pointer;
    background: rgba(0, 0, 0, 0.25);
    width: 100px;
    height: 100px;
    position: absolute;
    display: block;
    z-index: 100;
}

.hades.tparrows:before {
    font-family: "revicons";
    font-size: 30px;
    color: rgba(255, 255, 255, 1);
    display: block;
    line-height: 100px;
    text-align: center;
    transition: background 0.3s, color 0.3s;
}

.hades.tparrows.tp-leftarrow:before {
    content: "\e824";
}

.hades.tparrows.tp-rightarrow:before {
    content: "\e825";
}

.hades.tparrows:hover:before {
    color: rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 1);
}

.hades .tp-arr-allwrapper {
    position: absolute;
    left: 100%;
    top: 0px;
    background: #888;
    width: 100px;
    height: 100px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0.0;
    -khtml-opacity: 0.0;
    opacity: 0.0;
    -webkit-transform: rotatey(-90deg);
    transform: rotatey(-90deg);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
}

.hades.tp-rightarrow .tp-arr-allwrapper {
    left: auto;
    right: 100%;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: rotatey(90deg);
    transform: rotatey(90deg);
}

.hades:hover .tp-arr-allwrapper {
    -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    -webkit-transform: rotatey(0deg);
    transform: rotatey(0deg);

}

.hades .tp-arr-iwrapper {
}

.hades .tp-arr-imgholder {
    background-size: cover;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.hades .tp-arr-titleholder {
}

.hades .tp-arr-subtitleholder {
}

.ares.tp-bullets {
}

.ares.tp-bullets:before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    padding: 10px;
    margin-left: -10px;
    margin-top: -10px;
    box-sizing: content-box;
}

.ares .tp-bullet {
    width: 13px;
    height: 13px;
    position: absolute;
    background: rgba(229, 229, 229, 1);
    border-radius: 50%;
    cursor: pointer;
    box-sizing: content-box;
}

.ares .tp-bullet:hover,
.ares .tp-bullet.selected {
    background: rgba(255, 255, 255, 1);
}

.ares .tp-bullet-title {
    position: absolute;
    color: 136, 136, 136;
    font-size: 12px;
    padding: 0px 10px;
    font-weight: 600;
    right: 27px;
    top: -4px;
    background: rgba(255, 255, 255, 0.75);
    visibility: hidden;
    transform: translatex(-20px);
    -webkit-transform: translatex(-20px);
    transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
    line-height: 20px;
    white-space: nowrap;
}

.ares .tp-bullet-title:after {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.75);
    content: " ";
    position: absolute;
    right: -10px;
    top: 0px;
}

.ares .tp-bullet:hover .tp-bullet-title {
    visibility: visible;
    transform: translatex(0px);
    -webkit-transform: translatex(0px);
}

.ares .tp-bullet.selected:hover .tp-bullet-title {
    background: rgba(255, 255, 255, 1);
}

.ares .tp-bullet.selected:hover .tp-bullet-title:after {
    border-color: transparent transparent transparent rgba(255, 255, 255, 1);
}

.ares.tp-bullets:hover .tp-bullet-title {
    visibility: hidden;

}

.ares.tp-bullets:hover .tp-bullet:hover .tp-bullet-title {
    visibility: visible;
    transform: translateX(0px) translatey(0px);
    -webkit-transform: translateX(0px) translatey(0px);
}


/* VERTICAL */
.ares.nav-dir-vertical.nav-pos-hor-left .tp-bullet-title {
    right: auto;
    left: 27px;
    transform: translatex(20px);
    -webkit-transform: translatex(20px);
}

.ares.nav-dir-vertical.nav-pos-hor-left .tp-bullet-title:after {
    border-width: 10px 10px 10px 0 !important;
    border-color: transparent rgba(255, 255, 255, 0.75) transparent transparent;
    right: auto !important;
    left: -10px !important;
}

.ares.nav-dir-vertical.nav-pos-hor-left .tp-bullet.selected:hover .tp-bullet-title:after {
    border-color: transparent rgba(255, 255, 255, 1) transparent transparent !important;
}


/* HORIZONTAL BOTTOM && CENTER */
.ares.nav-dir-horizontal.nav-pos-ver-center .tp-bullet-title,
.ares.nav-dir-horizontal.nav-pos-ver-bottom .tp-bullet-title {
    top: -35px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-10px);
    -webkit-transform: translateX(-50%) translateY(-10px);
}

.ares.nav-dir-horizontal.nav-pos-ver-center .tp-bullet-title:after,
.ares.nav-dir-horizontal.nav-pos-ver-bottom .tp-bullet-title:after {
    border-width: 10px 10px 0px 10px;
    border-color: rgba(255, 255, 255, 0.75) transparent transparent transparent;
    right: auto;
    left: 50%;
    margin-left: -10px;
    top: auto;
    bottom: -10px;

}

.ares.nav-dir-horizontal.nav-pos-ver-center .tp-bullet.selected:hover .tp-bullet-title:after,
.ares.nav-dir-horizontal.nav-pos-ver-bottom .tp-bullet.selected:hover .tp-bullet-title:after {
    border-color: rgba(255, 255, 255, 1) transparent transparent transparent;
}

.ares.nav-dir-horizontal.nav-pos-ver-center .tp-bullet:hover .tp-bullet-title,
.ares.nav-dir-horizontal.nav-pos-ver-bottom .tp-bullet:hover .tp-bullet-title {
    transform: translateX(-50%) translatey(0px);
    -webkit-transform: translateX(-50%) translatey(0px);
}


/* HORIZONTAL TOP */
.ares.nav-dir-horizontal.nav-pos-ver-top .tp-bullet-title {
    top: 25px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(10px);
    -webkit-transform: translateX(-50%) translateY(10px);
}

.ares.nav-dir-horizontal.nav-pos-ver-top .tp-bullet-title:after {
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent rgba(255, 255, 255, 0.75) transparent;
    right: auto;
    left: 50%;
    margin-left: -10px;
    bottom: auto;
    top: -10px;

}

.ares.nav-dir-horizontal.nav-pos-ver-top .tp-bullet.selected:hover .tp-bullet-title:after {
    border-color: transparent transparent rgba(255, 255, 255, 1) transparent;
}

.ares.nav-dir-horizontal.nav-pos-ver-top .tp-bullet:hover .tp-bullet-title {
    transform: translateX(-50%) translatey(0px);
    -webkit-transform: translateX(-50%) translatey(0px);
}
