/**
 * RubyTabs Main Styles
 * @package         RubyTabs
 * @author          HaiBach
 * @link            http://haibach.net/rubytabs
 * @version         1.5
 */


/**
 * BASIC STYLE
 *  + Class ready -> element already loaded
 *  + Pagination like Viewport : similar CSS
 */
.rt01,
.rt01ie7 .rt01pag           { position: relative; 	font-family: 'Roboto', sans-serif;font-size:14px; text-align: left; }

.rt01viewport               { position: relative; }
.rt01none                   { display: none !important; }
.rt01noclip                 { overflow: visible !important; }
.rt01ghost, .rt01hide       { visibility: hidden !important; }
.rt01wfit > *               { width: 100% !important; }
.rt01hfit > *               { height: 100% !important; }
.rt01mask                   { overflow: hidden; }

.rt01init .rt01slide.rt01sleep {
    display: none;
}
.rt01canvas {
    /* Version 1.4 - 15/09/2016 : Fixed size of the slide in layout Carousel */
    -webkit-transform : translate(0, 0);
            transform : translate(0, 0);
}
.rt01no-transform .rt01canvas {
    position: relative;
}
.rt01slide {
    overflow: hidden;
    width: 100%;
}
.rt01slide.rt01sleep {
    /* Ver 1.4 - 16/09/2016 : propertity unnecessary */
    /*height: 100%;*/
}
.rt01slide.rt01no-loaded {
    min-height: 150px;
}
.rt01no-transform .rt01slide.rt01cur {
    position: relative;
}
.rt01slide.rt01deactived, .rt01pagitem, .rt01outside .rt01pagitem {
    display: block;
    position: absolute;
    left: 0; top: 0;
}











/**
 * BOX-SIZING
 */
.rt01viewport, .rt01canvas, .rt01pagitem, .rt01pagmark-item {
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
}
.rt01slide {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}











/**
 * OVERLAY GHOST : SUPPORT SWIPE GESTURES WHEN PREVENT BY ELEMENT OTHERS
 *  + Support prevent Video iframe + Map iframe are active
 */
.rt01overlay-ghost {
    display: none;
}
.rt01grabbing .rt01overlay-ghost {
    position: absolute;
    display: block;
    width: 100%; height: 100%;
    left: 0; top: 0;
    z-index: 99999;
}











/**
 * HEIGHT TYPE
 */
/* Slide in Height Fixed always == hCode */
.rt01height-fixed > .rt01viewport > .rt01canvas,
.rt01height-fixed > .rt01viewport > .rt01canvas > .rt01slide,
.rt01height-fixed > .rt01viewport > .rt01canvas > .rt01slide > .rt01imgback-wrap {
    height: 100%;
}

/* Image background: smooth move when have top value */
.rt01height-fixed .rt01slide > .rt01imgback-wrap {
    -webkit-transition: top .2s;
       -moz-transition: top .2s;
            transition: top .2s;
}











/**
 * NAVIGATION
 */
.rt01nav-next, .rt01nav-prev, .rt01playpause {
    cursor: pointer;
    z-index: 99999;
}
.rt01nav-prev, .rt01nav-next {
    position: absolute;
    display: block;
    width: 50px; height: 50px;
    top: 50%; margin-top: -25px;
    opacity: .5;
    background-image: url(imgs/icon-nav.svg);
    background-repeat: no-repeat;
    text-indent: -9999px;
    cursor: pointer;
}
.rt01no-transform .rt01nav-prev, .rt01no-transform .rt01nav-next {
    background-image: url(imgs/icon-nav.png);
}
.rt01nav-prev {
    left: 0;
    background-position: 0 0;
}
.rt01nav-next {
    right: 0;
    background-position: -50px 0;
}
.rt01nav-prev:hover, .rt01nav-next:hover {
    opacity: 1;
}
.rt01nav-prev.rt01deactived, .rt01nav-next.rt01deactived {
    visibility: hidden;
    cursor: inherit;
}

/* NAVIGATION STYLE DARK */
.rt01nav-dark .rt01nav-prev, .rt01nav-dark .rt01nav-next {
    background-image: url(imgs/icon-nav-dark.svg);
}
.rt01nav-dark.rt01no-transform .rt01nav-prev, .rt01nav-dark.rt01no-transform .rt01nav-next {
    background-image: url(imgs/icon-nav-dark.png);
}











/**
 * PAGINATION
 *  + Resetup 'width' property for each type : Tabs no need width = 100%
 */

/**
 * PAGINATION CORE
 */
.rt01pag {
    overflow: hidden;
    z-index: 3;
}
.rt01paginner {
    position: relative;
}
.rt01pagitem {
    cursor: pointer;
}

/* Tabs Horizontal */
.rt01pag.rt01pag-hor.rt01pag-begin {
    margin-bottom: 20px;
}
.rt01pag.rt01pag-hor.rt01pag-end {
    margin-top: 20px;
}

/* Tabs Vertical */
.rt01pag.rt01pag-ver.rt01pag-begin {
    float: left;
}
.rt01pag.rt01pag-ver.rt01pag-end {
    position: absolute;
    right: 0; top: 0;
}
.rt01pag.rt01pag-ver.rt01pag-begin {
    margin-right: 30px;
}
.rt01pag.rt01pag-ver.rt01pag-end {
    margin-left: 30px;
}



/**
 * PAGINATION TYPE : TABS
 */
.rt01tabs .rt01pagitem {
	font-family: 'Roboto', sans-serif;
    padding-bottom: 5px;
    color: #bbb;
    white-space: nowrap;
	font-size: 14px;
}
.rt01tabs .rt01pagitem.rt01cur {
    color: #111;
}

/* Tabs Horizontal */
.rt01tabs.rt01pag-hor .rt01pagitem {
    padding: 15px 22px;
    text-align: center;
}

/* Tabs Vertical */
.rt01tabs.rt01pag-ver .rt01pagitem {
    padding: 15px 20px;
}

/* Pagination Tabs Outside */
.rt01tabs.rt01pag-ver.rt01pag-end.rt01outside {
    position: static;
}



/**
 * PAGINATION TYPE : LIST
 */
.rt01list .rt01pagitem {
    position: static;
    display: inline-block;
}



/**
 * PAGINATION TYPE : THUMBNAIL
 */
.rt01thumbnail .rt01pagitem {
    width: 100px; height: 70px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
}
.rt01thumbnail.rt01pag-hor .rt01pagitem {
    margin-left: 8px; margin-right: 8px;
}
.rt01thumbnail.rt01pag-hor .rt01pagitem.rt01first {
    margin-left: 0;
}
.rt01thumbnail.rt01pag-hor .rt01pagitem.rt01last {
    margin-right: 0;
}

.rt01thumbnail.rt01pag-ver .rt01pagitem {
    margin-top: 5px; margin-bottom: 5px;
}
.rt01thumbnail.rt01pag-ver .rt01pagitem.rt01first {
    margin-top: 0;
}
.rt01thumbnail.rt01pag-ver .rt01pagitem.rt01last {
    margin-bottom: 0;
}

.rt01thumbwrap {
    overflow: hidden;
    width: 100%; height: 100%;
    border: 4px solid #fff;
    border-radius: 3px;

    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
.rt01thumbwrap img {
    position: relative;
    max-width: none !important;
    -webkit-transform: translateZ(0);               /* chrome image fix */
}
.rt01pagitem .rt01thumbwrap img {
    opacity: 1;
    -webkit-transition: -webkit-transform .15s, opacity .15s;
            transition:         transform .15s, opacity .15s;
}


/* Thumbnail Item actived */
.rt01pagitem.rt01cur {
    border-color: rgba(0,0,0,.75);
}
.rt01pagitem.rt01cur .rt01thumbwrap {
    background-color: #333;
}
.rt01pagitem.rt01cur .rt01thumbwrap img {
    opacity: .2;
    -webkit-transform: perspective(400px) translateZ(200px);
            transform: perspective(400px) translateZ(200px);
}
.rt01no-opacity .rt01pagitem.rt01cur {
    border-color: #000;
}


@media only screen and (max-width: 767px) {
    .rt01thumbnail .rt01pagitem {
        width: 60px; height: 40px;
        margin-left: 3px; margin-right: 3px;
    }
    .rt01thumbnail.rt01pag-hor .rt01pagitem {
        margin-left: 3px; margin-right: 3px;
    }
    .rt01thumbnail.rt01pag-ver .rt01pagitem {
        margin-top: 3px; margin-bottom: 3px;
    }
    .rt01thumbwrap {
        border-width: 2px;
    }
}






/**
 * PAGINATION ARROW
 */
.rt01pag {
    position: relative;
}
.rt01pagarrow-item {
    position: absolute;
    background-color: rgba(255,255,255,0); /* Fixed IE khong tap dc tren item */
    cursor: pointer;
    opacity: 0;
    z-index: -1;
    -webkit-transition: opacity .2s;
            transition: opacity .2s;
}
.rt01pagarrow-item.rt01actived {
    opacity: 1;
    z-index: 99999;
}
.rt01pag-hor .rt01pagarrow-item         { top: 0; width: 25px; height: 100%; }
.rt01pag-hor .rt01pagarrow-left         { left: 0; }
.rt01pag-hor .rt01pagarrow-right        { right: 0; }
.rt01pag-ver .rt01pagarrow-item         { left: 0; width: 100%; height: 15px; }
.rt01pag-ver .rt01pagarrow-left         { top: 0; }
.rt01pag-ver .rt01pagarrow-right        { bottom: 0; }

.rt01pagarrow-icon {
    position: absolute;
    left: 50%; top: 50%;
    margin-top: -5px; margin-left: -5px;
    width: 0; height: 0;
    border: 5px solid transparent;
    opacity: .7;
}
.rt01pagarrow-item:hover .rt01pagarrow-icon {
    opacity: 1;
}
.rt01pag-hor .rt01pagarrow-left .rt01pagarrow-icon {
    margin-left: -3px;
    border-left-width: 0;
    border-right-color: #000;
}
.rt01pag-hor .rt01pagarrow-right .rt01pagarrow-icon {
    margin-left: -1px;
    border-right-width: 0;
    border-left-color: #000;
}
.rt01pag-ver .rt01pagarrow-left .rt01pagarrow-icon {
    margin-top: -3px;
    border-top-width: 0;
    border-bottom-color: #000;
}
.rt01pag-ver .rt01pagarrow-right .rt01pagarrow-icon {
    margin-top: -1px;
    border-bottom-width: 0;
    border-top-color: #000;
}

/* FIXED OLD BROWSER */
.rt01no-opacity .rt01pagarrow-icon {
    display: none;
}
.rt01no-opacity .rt01pagarrow-item.rt01actived {
    display: block;
}






/**
 * PAGINATION MARK
 */
.rt01pagmark-item {
    position: absolute;
    background-color: #010101;

    -webkit-transition: -webkit-transform .2s, width .2s, height .2s;
            transition:         transform .2s, width .2s, height .2s;
}
.rt01pag-hor > .rt01pagmark > .rt01pagmark-item { height: 4px; }
.rt01pag-ver > .rt01pagmark {
    position: absolute;
    top: 0; right: 0;
    height: 100%;
}
.rt01pag-ver > .rt01pagmark > .rt01pagmark-item { width: 4px; }











/**
 * CAPTION
 */
.rt01capinner {
    position: relative;
}
.rt01cap-last {
    visibility: hidden;
    position: absolute;
    left: 0; top: 0;
}

/* Clearfix for caption : Get correct size */
.rt01cap-last:after, .rt01cap-cur:after {
    content: " ";
    display: table;
    clear: both;
}
.rt01cap-last, .rt01cap-cur {
    *zoom: 1;
}











/**
 * ICON LOADER
 */

/**
 * LOADER DEFAULT
 */
.rt01loader {
    position: absolute;
    width: 48px; height: 48px;
    left: 50%; top: 50%;
    margin-left: -24px; margin-top: -24px;
}
.rt01loader:before {
    position: absolute;
    display: block;
    content: "";

    width: 100%; height: 100%;
    border-radius: 50%;
    border: 8px solid #fff;
    box-sizing: border-box;
}
.rt01loader-circular {
    position: absolute;
    width: 100%; height: 100%;

    -webkit-animation: rt01LoaderRotate 2s linear infinite;
            animation: rt01LoaderRotate 2s linear infinite;
}
.rt01loader-path {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
    stroke-linecap: round;

    -webkit-animation: rt01loaderDash 1s ease-in-out infinite, rt01loaderColor 4s ease-in-out infinite;
            animation: rt01loaderDash 1s ease-in-out infinite, rt01loaderColor 4s ease-in-out infinite;
}

@-webkit-keyframes rt01LoaderRotate {
    0%   { -webkit-transform: rotate(0); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes rt01LoaderRotate {
    0%   { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes rt01loaderDash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124;
    }
}
@keyframes rt01loaderDash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124;
    }
}

@-webkit-keyframes rt01loaderColor {
    0%, 100% { stroke: #010101; }
    15%      { stroke: #ffaa00; }
    30%      { stroke: #c9c900; }
    45%      { stroke: #00cc00; }
    60%      { stroke: #00ccff; }
    75%      { stroke: #9900ff; }
    90%      { stroke: #ff00cc; }
}
@keyframes rt01loaderColor {
    0%, 100% { stroke: #010101; }
    15%      { stroke: #ffaa00; }
    30%      { stroke: #c9c900; }
    45%      { stroke: #00cc00; }
    60%      { stroke: #00ccff; }
    75%      { stroke: #9900ff; }
    90%      { stroke: #ff00cc; }
}


/**
 * LOADER SIZE SMALL
 */
.rt01loader-small {
    width: 26px; height: 26px;
    margin-left: -13px; margin-top: -13px;
}
.rt01loader-small:before {
    border-width: 7px;
}


/**
 * LOADER FALLBACK
 */
.rt01loader-old {
    width: 70px; height: 32px;
    margin-left: -35px; margin-top: -16px;
    background-color: #fff;
    text-align: center;
    font-size: 12px;
    line-height: 32px;
}











/**
 * TIMER
 */
/* Timer Line */
.rt01timer-line {
    position: relative;
    overflow: hidden;
    width: 100%; height: 3px;
    background-color: rgba(0,0,0,0.1);
}
.rt01timer-line > .rt01timeritem {
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
    background-color: #999;
    background-color: rgba(0,0,0,0.5);
}

/* Timer Arc */
.rt01timer-arc { width: 40px; height: 40px; }











/**
 * GRAB CURSOR
 */
.rt01grab, .slide-as-pag .rt01grab .rt01cur {
    cursor: url(../ruby/imgs/grab.cur), auto;       /* Browser IE9-11 - url included folder css */
    cursor: url(imgs/grab.cur) 8 6, auto;           /* Browser Modern + Old */
}
.rt01grabbing, .rt01grabbing .rt01pagitem,
.slide-as-pag .rt01grabbing .rt01cur {
    cursor: url(../ruby/imgs/grabbing.cur), auto;   /* Browser IE9-11 */
    cursor: url(imgs/grabbing.cur) 8 6, auto;       /* Browser Modern + Old */
}











/**
 * IMAGE
 *  + Remove attribute max-width on image
 */
.rt01imgback {
    position: relative;
    left: 0; top: 0;
    display: block;
    max-width: none !important;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    /* Ver 1.4 - 22/09/2016 : fixed in line effect, Video iframe, browser Chrome update wrong position */
    transform: translateZ(0);
}

/* Clone image in type position 'tile' */
.rt01imgclone {
    position: absolute !important;
}










/**
 * VIDEO BACKGROUND
 */
.rt01videoback {
    display: block;
    position: relative;
}
.rt01videoposter {
    overflow: hidden;
    display: block;
    position: absolute;
    left: 0; top: 0;
}
.rt01slide.rt01cur > .rt01videoback-wrap > .rt01videoposter {
    visibility: hidden;
}

/* Setup for Math effect */
.rt01fx-back .rt01videoposter,
.rt01fx-front .rt01videoposter {
    position: relative;
}











/**
 * LAYOUT
 */
/* LAYOUT DOT */
.rt01layout-dot > .rt01viewport > .rt01canvas > .rt01deactived          { visibility: hidden; }
.rt01layout-dot > .rt01viewport > .rt01canvas > .rt01slide.rt01cur      { z-index: 2; }

/* Setup 'z-index' property for fixed grabbing + fxRun */
.rt01slide.rt01cur.rt01css-prev,
.rt01slide.rt01cur.rt01css-next {
    position: relative;
}

.rt01layout-dot > .rt01viewport > .rt01canvas > .rt01slide.rt01css-prev {
    visibility: visible;
    z-index: 1;
}
.rt01layout-dot > .rt01viewport > .rt01canvas > .rt01slide.rt01css-next {
    visibility: visible;
    z-index: 2;
}











/**
 * EFFECT - CORE
 */
/* CSS EFFECT */
.rt01css-mask {
    overflow: hidden;
}


/* MATH EFFECT */
.rt01fx-overlay {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    z-index: 99999;
}
.rt01fx-front-wrap {
    position: relative;
}
.rt01math-mask > .rt01fx-front {
    overflow: hidden;
}

.rt01layout-dot .rt01fx-front           { position: absolute; }
.rt01fx-front .rt01imgback-wrap         { overflow: hidden; position: absolute; left: 0; }
.rt01fx-front .rt01imgback-wrap > img   { left: 0; }

.rt01fx-back                            { position: absolute; overflow: hidden; width: 100%; }
.rt01fx-back .rt01imgback-wrap,
.rt01fx-back .rt01imgback-wrap > img    { left: 0; }


/* Fixed in height-fixed */
.rt01height-fixed .rt01fx-back,
.rt01height-fixed .rt01imgback-wrap     { height: 100%; }

/* Remove button open video when running effect */
.rt01fx-overlay .rt01btn-play           { display: none; }



/* 3D EFFECT */
.rt01fx-3d > .rt01viewport > .rt01canvas {
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
}











/**
 * VIDEO IFRAME
 */
.rt01video {
    position: relative;
    display: inline-block;
}
.rt01video.rt01imgback-wrap {
    display: block;
}
.rt01video > .rt01video-item {
    display: block;
    position: absolute;
    left: 0; top: 0;
    margin: 0; padding: 0;
}
.rt01video img {
    display: block;
}
.rt01video .rt01loader {
    visibility: hidden;
}


/* Button play */
.rt01btn-play {
    display: block;
    position: absolute;
    width: 70px; height: 50px;
    left: 50%; top: 50%;
    margin-left: -35px; margin-top: -25px;

    background-image: url(imgs/icon-video-play.svg);
    background-repeat: no-repeat;;
    cursor: pointer !important;
    opacity: 1;

    -webkit-transition: opacity .15s;
            transition: opacity .15s;
}
.rt01no-transform .rt01btn-play {
    background-image: url(imgs/icon-video-play.png);
}
.rt01btn-play:hover             { opacity: .5; }
.rt01youtube .rt01btn-play      { background-position: 0 0; }
.rt01vimeo   .rt01btn-play      { background-position: -70px 0; }


/* Button close */
.rt01btn-close {
    display: none;
    position: absolute;
    visibility: hidden;
    width: 30px; height: 30px;
    right: 10px; top: 10px;
    border-radius: 50%;
    background-color: #333;
    cursor: pointer;
    opacity: 0;
}
.rt01video:hover > .rt01btn-close,
.rt01video-ready > .rt01btn-close.rt01hover {
    opacity: 1;
}
.rt01btn-close:hover {
    background-color: #fff;
}


/* Video init */
.rt01video-init                         { background-color: #000; }
.rt01video-init > img,
.rt01video-init > .rt01btn-play,
.rt01video-init > .rt01video-item       { visibility: hidden; }
.rt01video-init > .rt01loader           { visibility: visible; }

/* Video ready */
.rt01video-ready > img,
.rt01video-ready > .rt01btn-play        { visibility: hidden; }
.rt01video-ready > .rt01btn-close       { visibility: visible; }

/* Video khong co Image preview */
.rt01no-preview .rt01video-item         { position: relative; }

/* Fixed trong Browser cu */
.rt01no-transform .rt01deactived .rt01video-ready > img { visibility: visible; }
.rt01no-transform .rt01deactived .rt01video-ready > .rt01video-item { visibility: hidden; }










/**
 * HOTSPOT BASIC
 *  + Hidden hotspot at begin
 */
.rt01hotspot {
    position: relative;
}
.rt01hspoint {
    width: 16px; height: 16px;
    background-color: #fff;
    border: 6px solid rgba(0,0,0,.75);
    border-radius: 50%;
    cursor: pointer;

    -webkit-animation: rt01wave 2s ease infinite;
            animation: rt01wave 2s ease infinite;
}

@-webkit-keyframes rt01wave {
    0%, 100% {
        -webkit-transform: perspective(800px) translateZ(0);
    }
    25%, 75% {
        -webkit-transform: perspective(800px) translateZ(-100px);
    }
    50% {
        -webkit-transform: perspective(800px) translateZ(100px);
    }
}

@keyframes rt01wave {
    0%, 100% {
        transform: perspective(800px) translateZ(0);
    }
    25%, 75% {
        transform: perspective(800px) translateZ(-100px);
    }
    50% {
        transform: perspective(800px) translateZ(100px);
    }
}



/* Style Hotspot Item */
.rt01hsitem {
    position: absolute;
    left: 0; top: 0;

    visibility: hidden;
    padding: 5px 10px;
    background-color: #fff;
    border: 1px solid #444;
    border-radius: 4px;
}
.rt01hsitem.rt01widthfixed {
    white-space: normal;
}
.rt01hotspot.rt01actived .rt01hsitem            { visibility: visible; }

.rt01slide.rt01deactived .rt01hotspot,
.rt01slide.rt01deactived .rt01hsitem            { visibility: hidden; }


/* Style Arrow of Item */
.rt01hsitem:after {
    content: '';
    display: block;
    position: absolute;
    width: 8px; height: 8px;
    background-color: #fff;
    border: 1px solid #444;
    border-radius: 50%;
}

.rt01hs-top     .rt01hsitem:after               { bottom: -6px; }
.rt01hs-bottom  .rt01hsitem:after               { top   : -6px; }
.rt01hs-left    .rt01hsitem:after               { right : -5px; }
.rt01hs-right   .rt01hsitem:after               { left  : -6px; }

.rt01hs-top    .rt01hsitem:after,
.rt01hs-bottom .rt01hsitem:after                { left  : 50%; margin-left: -5px; }
.rt01hs-left   .rt01hsitem:after,
.rt01hs-right  .rt01hsitem:after                { top   : 50%; margin-top: -5px; }














/**
 * LAYER BASIC
 */
.rt01layer {
    position: absolute;
    left: 0; top: 0;
}
.rt01layeritem {
    display: block;
    margin: 0 !important;
    white-space: nowrap;
}

[data-layer-animate],
.rt01slide.rt01deactived > .rt01layer {
    visibility: hidden;
}
.rt01layerghost {
    visibility: hidden;
}


/* Layer nested */
.rt01layeritem .rt01layer {
    position: relative;
    display: inline-block;
}











/**
 * SHADOW
 */
.rt01shadow {
    position: absolute;
    left: 0; top: 100%;
}
.rt01shadow > img { display: block; width: 100%; height: auto; }











/**
 * OHTERS
 */
/* Tablist outside */
.rt01outside.rt01tabs.rt01pag-ver.rt01pag-begin { float: none; }

/* Android native --> fixed imageback not active overflow:hidden */
.rt01androidnative.rt01layout-line .rt01imgback-wrap { -webkit-transform: translatez(0); }

/* Firefox: fixed smooth edge, checked in version 30 */
.rt01firefox .ruby-animated { outline: 1px solid transparent; }

/* Fixed font ugly in safari 5.1 window */
.rt01, .rt01pag, .rt01cap { -webkit-font-smoothing: antialiased; }

/* Fixed ie mobile not swipe by conflict with scroll page */
/*.rt01mobile .rt01swipe-on  { -ms-touch-action: pan-y; }*/

/* Fixed 'tap-highlight' on mobile -- IE not resolved */
.rt01viewport, .rt01pag { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* Style cursor on class Swipe Prevent */
.rt01swipe-prevent { cursor: auto; }

/* API Remote */
.rt01api { cursor: pointer; }

















































/**
 * RUBYTABS CUSTOM STYLES
 */

/**
 * TABS STYLE
============================================================================= */

/**
 * STYLE FLAT & FLATBOX
----------------------------------------------------------------------------- */
.rt01flatbox > .rt01tabs {
    margin-bottom: 0;
}
.rt01flat > .rt01tabs .rt01pagitem.rt01cur,
.rt01flatbox > .rt01tabs .rt01pagitem.rt01cur {
    background-color: #010101;
    color: #fff;
}


/* FLAT HORIZONTAL */
.rt01flat > .rt01tabs.rt01pag-hor.rt01pag-begin,
.rt01flatbox > .rt01tabs.rt01pag-hor.rt01pag-begin {
    border-bottom: 2px solid #010101;
}
.rt01flat > .rt01tabs.rt01pag-hor.rt01pag-end,
.rt01flatbox > .rt01tabs.rt01pag-hor.rt01pag-end {
    border-top: 2px solid #010101;
}

.rt01flatbox > .rt01tabs.rt01pag-hor {
    margin-top: 0; margin-bottom: 0;
}
.rt01flatbox.rt01pag-hor > .rt01viewport {
    padding: 20px;
    border: solid #e5e5e5;
    background-color: #fff;
}
.rt01flatbox.rt01pag-hor.rt01pag-begin > .rt01viewport {
    border-width: 0 1px 1px 1px;
}
.rt01flatbox.rt01pag-hor.rt01pag-end > .rt01viewport {
    border-width: 1px 1px 0 1px;
}


/* FLAT VERTICAL */
.rt01flat > .rt01tabs.rt01pag-ver .rt01pagitem,
.rt01flatbox > .rt01tabs.rt01pag-ver .rt01pagitem {
    padding: 16px 20px 14px 20px;
    border-bottom: 1px dotted #ddd;
}
.rt01flat > .rt01tabs.rt01pag-ver .rt01pagitem.rt01cur,
.rt01flatbox > .rt01tabs.rt01pag-ver .rt01pagitem.rt01cur {
    margin-top: -1px;
    border-bottom-color: #010101;
}

.rt01flatbox > .rt01tabs.rt01pag-ver {
    margin-left: 0; margin-right: 0;
}
.rt01flatbox.rt01pag-ver > .rt01viewport {
    padding: 25px;
    border: solid #e5e5e5;
}
.rt01flatbox.rt01pag-ver.rt01pag-begin > .rt01viewport {
    border-width: 1px 1px 1px 0;
}
.rt01flatbox.rt01pag-ver.rt01pag-end > .rt01viewport {
    border-width: 1px 0 1px 1px;
}
.rt01flat > .rt01pag-ver.rt01pag-begin {
    border-right: 2px solid #010101;
}
.rt01flat > .rt01pag-ver.rt01pag-end {
    border-left: 2px solid #010101;
}
.rt01flatbox.rt01pag-ver.rt01pag-begin > .rt01viewport {
    border-left: 2px solid #010101;
}
.rt01flatbox.rt01pag-ver.rt01pag-end > .rt01viewport {
    border-right: 2px solid #010101;
}





/**
 * STYLE ROUND
----------------------------------------------------------------------------- */
.rt01round > .rt01tabs .rt01pagitem {
    background-color: #f0f0f0;
}
.rt01round > .rt01tabs .rt01pagitem.rt01cur {
    background-color: #010101; color: #fff;
}


/* ROUND HORIZONTAL */
.rt01round > .rt01pag-hor .rt01pagitem:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.rt01round > .rt01pag-hor .rt01pagitem:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.rt01round.rt01pag-hor > .rt01tabs .rt01pagitem {
    margin-right: 0;
}


/* ROUND VERTICAL */
.rt01round > .rt01tabs.rt01pag-ver .rt01pagitem:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.rt01round > .rt01tabs.rt01pag-ver .rt01pagitem:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}


/* ROUND VERTICAL OUTSIDE */
.rt01round.rt01pag-ver.rt01outside.rt01pag-begin > .rt01viewport {
    padding-left: 0;
}
.rt01round.rt01pag-ver.rt01outside.rt01pag-end > .rt01viewport {
    padding-right: 0;
}





/**
 * STYLE OUTLINE
----------------------------------------------------------------------------- */
.rt01outline > .rt01tabs .rt01pagitem.rt01cur:before,
.rt01outline > .rt01tabs .rt01pagitem.rt01cur:after {
    content: '';
    display: block;
    position: absolute;
    background-color: #010101;
}
.rt01outline > .rt01tabs.rt01pag-hor .rt01pagitem.rt01cur,
.rt01outline > .rt01tabs.rt01pag-ver .rt01pagitem.rt01cur {
    border-color: #010101;
    z-index: 2;
}


/* OUTLINE HORIZONTAL */
.rt01outline > .rt01tabs.rt01pag-hor .rt01pagitem {
    margin-left: 5px; margin-right: 5px;
    border: solid #e5e5e5;
}
.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur         { padding-top: 12px; }
.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-end   .rt01pagitem.rt01cur         { padding-bottom: 12px; }
.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem                 { border-width: 1px 1px 0 1px; }
.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-end   .rt01pagitem                 { border-width: 0 1px 1px 1px; }
.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur         { border-top-width: 4px; }
.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-end   .rt01pagitem.rt01cur         { border-bottom-width: 4px; }

.rt01outline > .rt01tabs.rt01pag-hor .rt01pagitem.rt01cur:before,
.rt01outline > .rt01tabs.rt01pag-hor .rt01pagitem.rt01cur:after                 { width: 20000px; height: 1px; }
.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur:before  { bottom: 0; right: 100%; }
.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur:after   { bottom: 0; left: 100%; }
.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-end   .rt01pagitem.rt01cur:before  { top: 0; right: 100%; }
.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-end   .rt01pagitem.rt01cur:after   { top: 0; left: 100%; }


/* OUTLINE VERTICAL */
.rt01outline > .rt01tabs.rt01pag-ver .rt01pagitem {
    margin-top: 3px; margin-bottom: 3px;
    border: solid #e5e5e5;
}
.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-begin .rt01pagitem.rt01cur         { padding-left: 17px; }
.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-end   .rt01pagitem.rt01cur         { padding-right: 17px; }
.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-begin .rt01pagitem                 { border-width: 1px 0 1px 1px; }
.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-end   .rt01pagitem                 { border-width: 1px 1px 1px 0; }
.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-begin .rt01pagitem.rt01cur         { border-left-width: 4px; }
.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-end   .rt01pagitem.rt01cur         { border-right-width: 4px; }

.rt01outline > .rt01tabs.rt01pag-ver .rt01pagitem.rt01cur:before,
.rt01outline > .rt01tabs.rt01pag-ver .rt01pagitem.rt01cur:after                 { width: 1px; height: 20000px; }
.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-begin .rt01pagitem.rt01cur:before  { right: 0; bottom: 100%; }
.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-begin .rt01pagitem.rt01cur:after   { right: 0; top: 100%; }
.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-end   .rt01pagitem.rt01cur:before  { left: 0; bottom: 100%; }
.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-end   .rt01pagitem.rt01cur:after   { left: 0; top: 100%; }


/* OUTLINE VERTICAL OUTSIDE */
.rt01outline.rt01pag-ver.rt01outside.rt01pag-begin > .rt01viewport              { padding-left: 0; }
.rt01outline.rt01pag-ver.rt01outside.rt01pag-end   > .rt01viewport              { padding-right: 0; }






/**
 * STYLE UNDERLINE
----------------------------------------------------------------------------- */
.rt01underline > .rt01tabs .rt01pagitem {
    padding: 18px 0;
}


/* UNDERLINE HORIZONTAL */
.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-begin {
   /* border-bottom: 1px solid #e5e5e5;*/
}
.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01paginner {
    top: 1px;
}

.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-end {
    border-top: 1px solid #e5e5e5;
}
.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-end .rt01paginner {
    bottom: 1px;
}

.rt01underline > .rt01tabs.rt01pag-hor .rt01pagitem {
    margin: 0 15px;
}
.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur {
    padding-bottom: 14px;
    border-bottom: 4px solid #010101;
}
.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-end .rt01pagitem.rt01cur {
    padding-top: 14px;
    border-top: 4px solid #010101;
}


/* UNDERLINE VERTICAL */
.rt01underline > .rt01tabs.rt01pag-ver.rt01pag-begin {
    margin-right: 50px;
}
.rt01underline > .rt01tabs.rt01pag-ver.rt01pag-end {
    margin-left: 50px;
}
.rt01underline > .rt01tabs.rt01pag-ver .rt01pagitem {
    border-bottom: 1px dotted #ddd;
}
.rt01underline > .rt01tabs.rt01pag-ver .rt01pagitem.rt01cur {
    padding-bottom: 14px;
    border-bottom: 4px solid #010101;
}






/**
 * TABLIST SIZE
============================================================================= */

/**
 * SIZE DEFAULT - view reference
----------------------------------------------------------------------------- */
/* Basic */
/*.rt01tabs.rt01pag-hor .rt01pagitem                                                     { padding: 10px 15px; }
.rt01tabs.rt01pag-ver .rt01pagitem                                                     { padding: 10px 20px 10px 0; }*/

/* FLAT */
/*.rt01flat    > .rt01tabs.rt01pag-ver .rt01pagitem,
.rt01flatbox > .rt01tabs.rt01pag-ver .rt01pagitem                                       { padding: 11px 20px 9px 20px; }*/

/* Round */
/*.rt01round > .rt01tabs.rt01pag-ver .rt01pagitem                                          { padding: 10px 20px; }*/

/* Outline */
/*.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-begin    .rt01pagitem.rt01cur                  { padding-top: 7px; }
.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-end .rt01pagitem.rt01cur                  { padding-bottom: 7px; }

.rt01outline > .rt01tabs.rt01pag-ver .rt01pagitem                                       { padding: 10px 20px; }
.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-begin    .rt01pagitem.rt01cur                  { padding-left: 17px; }
.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-end .rt01pagitem.rt01cur                  { padding-right: 17px; }*/

/* Underline */
/*.rt01underline > .rt01tabs.rt01pag-hor .rt01pagitem                                     { padding: 12px 0; }
.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-begin    .rt01pagitem.rt01cur                { padding-bottom: 8px; }
.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-end .rt01pagitem.rt01cur                { padding-top: 8px; }

.rt01underline > .rt01tabs.rt01pag-ver .rt01pagitem                                     { padding: 12px 0; }
.rt01underline > .rt01tabs.rt01pag-ver .rt01pagitem.rt01cur                              { padding-bottom: 8px; }*/



/**
 * SIZE LARGE
----------------------------------------------------------------------------- */
/* Basic */
.rt01size-l > .rt01tabs.rt01pag-hor .rt01pagitem                                       { padding: 20px 32px; }
.rt01size-l > .rt01tabs.rt01pag-ver .rt01pagitem                                       { padding: 20px 36px 20px 0; }

/* FLAT */
.rt01size-l.rt01flat    > .rt01tabs.rt01pag-ver .rt01pagitem,
.rt01size-l.rt01flatbox > .rt01tabs.rt01pag-ver .rt01pagitem                           { padding: 21px 36px 19px 36px; }

/* Round */
.rt01size-l.rt01round > .rt01tabs.rt01pag-ver .rt01pagitem                              { padding: 20px 36px; }

/* Outline */
.rt01size-l.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur     { padding-top: 17px; }
.rt01size-l.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-end   .rt01pagitem.rt01cur     { padding-bottom: 17px; }

.rt01size-l.rt01outline > .rt01tabs.rt01pag-ver .rt01pagitem                           { padding: 20px 36px; }
.rt01size-l.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-begin .rt01pagitem.rt01cur     { padding-left: 33px; }
.rt01size-l.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-end   .rt01pagitem.rt01cur     { padding-right: 33px; }

/* Underline */
.rt01size-l.rt01underline > .rt01tabs .rt01pagitem                                     { padding: 22px 0; }
.rt01size-l.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur   { padding-bottom: 18px; }
.rt01size-l.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-end   .rt01pagitem.rt01cur   { padding-top: 18px; }

.rt01size-l.rt01underline > .rt01tabs.rt01pag-ver .rt01pagitem.rt01cur                 { padding-bottom: 18px; }




/**
 * SIZE SMALL
----------------------------------------------------------------------------- */
/* Basic */
.rt01size-s > .rt01tabs.rt01pag-hor .rt01pagitem                                        { padding: 8px 12px; }
.rt01size-s > .rt01tabs.rt01pag-ver .rt01pagitem                                        { padding: 8px 15px 8px 0; }

/* FLAT */
.rt01size-s.rt01flat    > .rt01tabs.rt01pag-ver .rt01pagitem,
.rt01size-s.rt01flatbox > .rt01tabs.rt01pag-ver .rt01pagitem                            { padding: 9px 15px 7px 15px; }

/* Round */
.rt01size-s.rt01round > .rt01tabs.rt01pag-ver .rt01pagitem                               { padding: 8px 15px; }

/* Outline */
.rt01size-s.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur      { padding-top: 5px; }
.rt01size-s.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-end   .rt01pagitem.rt01cur      { padding-bottom: 5px; }

.rt01size-s.rt01outline > .rt01tabs.rt01pag-ver .rt01pagitem                            { padding: 8px 15px; }
.rt01size-s.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-begin .rt01pagitem.rt01cur      { padding-left: 12px; }
.rt01size-s.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-end   .rt01pagitem.rt01cur      { padding-right: 12px; }

/* Underline */
.rt01size-s.rt01underline > .rt01tabs .rt01pagitem                                      { padding: 10px 0; }
.rt01size-s.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur    { padding-bottom: 6px; }
.rt01size-s.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-end   .rt01pagitem.rt01cur    { padding-top: 6px; }

.rt01size-s.rt01underline > .rt01tabs.rt01pag-ver .rt01pagitem.rt01cur                  { padding-bottom: 6px; }








/**
 * TIMER STYLE
============================================================================= */
/* BASIC */
.rt01ss-control {
    position: absolute;
    z-index: 99999;
}


/**
 * PLAYPAUSE BUTTON
----------------------------------------------------------------------------- */
.rt01playpause {
    position: absolute;
    width: 26px; height: 26px;
    background: transparent url(imgs/icon-playpause.svg) no-repeat -12px -12px;
    text-indent: -99999px;
}
.rt01no-transform .rt01playpause {
    background-image: url(imgs/icon-playpause.png);
}
.rt01playpause.rt01actived {
    background-position: -60px -12px;
}


/**
 * TIMER ARC TOP
----------------------------------------------------------------------------- */
.rt01timer-arcTop .rt01ss-control {
    top: 0; right: 0;
    width: 40px; height: 40px;
}
.rt01timer-arcTop .rt01playpause {
    left: 7px; top: 7px;
}
.rt01timer-arcTop .rt01timer {
    position: absolute;
}

/* Fallback for old browser */
.rt01timer-arcTop.rt01no-transform .rt01timer.rt01timer-line {
    background-color: #e5e5e5
}



/**
 * TIMER BAR TOP
----------------------------------------------------------------------------- */
.rt01timer-lineTop .rt01ss-control {
    top: 10px; right: 10px;
    width: 40px; height: 40px;
}
.rt01timer-lineTop .rt01playpause {
    left: 7px; top: 7px;
}
.rt01timer-lineTop .rt01timer {
    position: absolute;
}



/**
 * TIMER LINE BOTTOM
----------------------------------------------------------------------------- */
.rt01timer-lineBottom .rt01ss-control {
    position: relative;
}
.rt01timer-lineBottom .rt01playpause {
    right: 4px; bottom: 4px;
}







/**
 * FLICKR
============================================================================= */
.rt01flickr-info {
    padding: 10px;
    background-color: rgba(0,0,0,.5);
    border-radius: 4px;
    color: #999;
}
a.rt01flickr-photo-title {
    display: block;
    margin-bottom: 5px;
    color: #fff;
    font-size: 18px;
}

a.rt01flickr-album-title, a.rt01flickr-author {
    display: inline-block;
    opacity: 0.5;
    color: #fff;
    font-size: 12px;
}
a.rt01flickr-album-title:hover, a.rt01flickr-author:hover {
    opacity: 1;
}







/**
 * BULLET STYLE
============================================================================= */

/**
 * BULLET CORE
----------------------------------------------------------------------------- */
.rt01pag-bullet > .rt01pag.rt01bullet {
    margin: 0;
}
.rt01bullet {
    padding-top: 10px; padding-bottom: 10px;
}
.rt01bullet .rt01pagitem {
    display: block;
    float: left;
    width: 8px; height: 8px;
    margin-left: 6px; margin-right: 6px;

    background-color: #333;
    background-color: rgba(0,0,0,0.3);
    border-radius: 100%;
    text-indent: -99999px;
}
.rt01bullet .rt01pagitem:hover, .rt01bullet .rt01pagitem.rt01cur {
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
}


/**
 * BULLET FLAT
----------------------------------------------------------------------------- */
.rt01bulletflat .rt01pag {
    padding-left: 10px; padding-right: 10px;
    background-color: #010101;
}
.rt01bulletflat .rt01viewport {
    padding: 20px;
    background-color: #fff;
    border: solid #e5e5e5;
    border-width: 0 1px 1px 1px;
}