.timeline {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* fixed line holder */
.timeline .timeline_line {
    margin-top:10px;
    margin-bottom:10px;
    width: 790px;
}

/* full (including months that are not shown) line holder */
.timeline .t_line_holder {
    height:80px;
    background:url('../img/line.jpg') repeat-x 0 39px;
}

/* 2 months are stored in one view */
.timeline .t_line_view {
    width: 790px;
    height:20px;
}



/* holder for 1 month (constist of nodes and month caption) - we use borders to separate months thats why it has width 2px less then 50% */
.timeline .t_line_m {
    margin-top:35px;
    height:10px;
    border-left:1px solid #545454;
    border-right:1px solid #545454;
    width:393px;
}

/* month on the right side - has left set at 459 so border would overlap border from first element (to evade duplicated borders) */
.timeline .t_line_m.right {
    left:394px;
    width:394px;
}

/* month caption */
.timeline h4.t_line_month {
    margin:-30px 0 0;
    color:#545454;
}


/* node on the timeline */
.timeline a.t_line_node {
    text-decoration:none;
    padding:38px 0 4px;
    height:10px;
    font-size:12px;
    top:-25px;
    background:url('../img/dot.png') no-repeat center 24px;
    color:#141817;
}
.timeline a.t_line_node:hover {
    background:url('../img/dot-rollover.png') no-repeat center 24px;
}
.timeline a.t_line_node.active {
    background:url('../img/dot-selected.png') no-repeat center 24px;
}

/* node description */
.timeline .t_node_desc {
    background: rgba(26,134,172,0.9);
    top:0;
    color:#fff;
    padding:1px 5px;
}

/* descriptions on right side go from right to left */
.timeline .t_line_m.right .t_node_desc {
    right:0;
}

/* line arrow left */
.timeline #t_line_left {
    cursor:pointer;
    left:-30px;
    top:30px;
    width:14px;
    height:19px;
    background:url('../img/arrow.png') no-repeat left top;
}

.timeline #t_line_left:hover {
    background:url('../img/arrow.png') no-repeat left bottom;
}

/* line arrow right */
.timeline #t_line_right {
    cursor:pointer;
    right:-30px;
    top:30px;
    width:14px;
    height:19px;
    background:url('../img/arrow.png') no-repeat right top;
}

.timeline #t_line_right:hover {
    background:url('../img/arrow.png') no-repeat right bottom;
}



.image_roll_zoom {
    top: 100%;
    left: 0;
    width:100%;
    height:100%;
    position:absolute;
    background:url(../img/zoomIn.png) no-repeat center center;
    -webkit-transition: top .2s ease;
    transition: top .2s ease;
}
.image_roll_glass {
    opacity:0;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:url('../img/glass.png') repeat;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
}
.image_rollover_bottom:hover .image_roll_glass {
    opacity: 1;
}
.image_rollover_bottom:hover .image_roll_zoom {
    top: 0;
}
/* items container */
.timelineLight .timeline_items {
    padding:10px 0;
}
.timeline .item a.con_borderImage > img {
    position: absolute;
    top: 0;
    left: 0;
}

/* single item (margines set from javascript) */
.timelineLight .item {
    height:380px;
    text-align:center;
    background:url('../img/background-white.jpg') repeat;
    color:#545454;
    box-shadow: -3px 1px 6px rgba(0,0,0,0.4);
    width:200px;
}
.timelineLight .item.item_node_hover {
    box-shadow: 0px 0px 10px rgba(0,0,0,0.9);
}
/* ----- content - non-plugin elements ----- */
.timelineLight .item img {
    position: relative;
    width:200px;
}
.timelineLight .item > img {
    border-bottom: 5px solid #1a86ac;
}

.timelineLight .con_borderImage {
    display: block !important;
    position: relative !important;
    width: 100%;
    height: 125px;
    border-bottom:5px solid #1a86ac;
}

.timelineLight .item > span{
    display:block;
    margin:0px 20px 10px;
    height:135px;
}
.timelineLight .item > h2 {
    padding-top: 15px;
    text-transform: uppercase;
}
.timelineLight .item .read_more {
    padding:2px 8px 2px 10px;
    font-size:16px;
    float:right;
    color:#ffffff;
    background: rgba(0,0,0,0.35);
    cursor:pointer;
}
.timelineLight .item .read_more:hover {
    background:rgb(26,134,172);
}
/* ----------------------------------------- */

/* item details (margines set from javascript) */
.timelineLight .item_open {
    height:380px;
    background:url('../img/background.jpg') repeat;
    position:relative;
    color:#545454;
    z-index:2;
    box-shadow: 0px 0px 6px rgba(0,0,0,0.4);
    width:490px;

}

/* item details content wrapper (used for animation - shuld have same width as .item_open) */
.timelineLight .item_open_cwrapper {
    width:490px;
    height:100%;
}

.timelineLight .item_open_content {
    width:100%;
    height:100%;
    position:relative;
}


/* ----- content - non-plugin elements ----- */
.timelineLight .timeline_open_content {
    padding:20px;
}

.timelineLight .item_open h2 {
    margin-top:10px;
    padding-top:0;
    font-size:28px;
}
.timelineLight .item_open .t_close {
    position:absolute;
    top:10px;
    right:10px;
    padding:2px 8px 2px 10px;
    font-size:17px;
    color:#ffffff;
    background: rgba(0,0,0,0.25);
    cursor:pointer;
    z-index:2;
}
.timelineLight .item_open .t_close:hover {
    background:rgb(26,134,172);
}
/* ----------------------------------------- */

/* left/right controles */
.timelineControls1 .t_controles {
    margin:10px auto;
    text-align:center;
}
.timelineControls1 .t_left,
.timelineControls1 .t_right {
    display:inline-block;
    height:50px;
    width:29px;
    margin:10px;
    cursor:pointer;
}
.timelineControls1 .t_left,
.timelineControls1 .t_left:hover:active {
    background: url('../img/big-arrow.png') no-repeat left top;
}
.timelineControls1 .t_left:hover {
    background: url('../img/big-arrow.png') no-repeat left bottom;
}

.timelineControls1 .t_right,
.timelineControls1 .t_right:hover:active{
    background: url('../img/big-arrow.png') no-repeat right top;
}
.timelineControls1 .t_right:hover {
    background: url('../img/big-arrow.png') no-repeat right bottom;
}

.timelineLight .item .post_date {
    background: #dd5555;
    color: #ffffff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 5px;
    text-align: center;
    font-size: 20px;
    line-height: 18px;
    margin: -34px 18px 0 0;
    float: right;
    position: relative;
    z-index: 2;
}

.timelineLight .item .post_date span {
    display: block;
    width: auto;
    height: auto;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 12px;
    margin: 0;
}
/* -----------------------------------
 TIMELINE FLAT BLOG
 ---------------------------------- */
.timelineFlat .item,
.timelineFlat .item_open {
    height: 338px;
}

.timelineFlat .item .post_date {
    background: #dd5555;
    color: #ffffff;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    padding: 15px;
    text-align: center;
    font-size: 24px;
    line-height: 24px;
    margin: -34px 18px 0 0;
    float: right;
    position: relative;
    z-index: 2;
}

.timelineFlat .item .post_date span {
    display: block;
    width: auto;
    height: auto;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 12px;
    margin: 0;
}
.timelineFlat .con_borderImage {
    display: block !important;
    position: relative !important;
    width: 100%;
    height: 160px;
}

/* -----------------------------------
 TIMELINE FLAT BASE DESIGN
 ---------------------------------- */
.timeline_items_wrapper {
    position: relative;
    width: 100%;
    margin: 10px 0;
}

/* items container */
.timelineFlat .timeline_items {
    padding:0;
}

/* single item (margines set from javascript) */
.timelineFlat .item {
    width:410px;
    background:#eaeaea;
    color:#777777;
    font-size:14px;
    line-height:14px;
    position: relative;
}
.timelineFlat .item.item_node_hover:before {
    content: "";
    position: absolute;
    height: 4px;
    background: #dd5555;
    width: 100%;
    z-index: 2;
    top:0;
    left:0;
}
.timelineFlat .item.item_node_hover:after {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    z-index: 2;
    top:0;
    left:50%;
    margin: 4px 0 0 -6px;
    border: 6px solid transparent;
    border-top: 6px solid #dd5555;

}
/* ----- content - non-plugin elements ----- */
.timelineFlat .item img {
    width:410px;
}

.timelineFlat .item h2 {
    padding: 20px 20px 10px;
    margin: 0;
    font-size:12px;
    line-height:12px;
    color: #dd5555;

}
.timelineFlat .item span{
    display:block;
    margin:0px 20px 10px;
    height:75px;
}
.timelineFlat .item .read_more {
    padding:10px;
    font-size:12px;
    line-height:12px;
    float:left;
    color:#ffffff;
    cursor:pointer;
    margin: 0 20px 20px;
    border-radius: 3px;
    background:#dd5555;
    transition:background-color 300ms;
    -webkit-transition: background-color 300ms;
}
.timelineFlat .item .read_more:hover {
    background:#f75f5f;
}
/* ----------------------------------------- */

/* item details (margines set from javascript) */
.timelineFlat .item_open {
    width:410px;
    background:#eaeaea;
    position:relative;
    color:#777777;
    z-index:2;

}

.timelineFlat .item_open h2 {
    margin:0;
    padding:20px 20px 0;
    font-size:16px;
    line-height:1;
    color: #dd5555;
}

/* item details content wrapper (used for animation - shuld have same width as .item_open) */
.timelineFlat .item_open_cwrapper {
    width:410px;
    height:100%;
}

.timelineFlat .item_open_content {
    width:100%;
    height:100%;
    position:relative;
}

/* ----- content - non-plugin elements ----- */
.timeline .timeline_open_content {
    padding:20px;
}
.timeline .mCSB_container {
    margin-right: 16px;
}
.timeline .mCS-light-thin > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar  {
    background: #dd5555;
}
.timeline .mCS-light-thin > .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    color:#f75f5f;
}
.timeline .mCS-light-thin > .mCSB_scrollTools .mCSB_draggerRail {
    background: #aaaaaa;
}
.timeline .mCustomScrollBox > .mCSB_scrollTools {
    width: 8px;
}
.timelineFlat .item_open .t_close {
    position:absolute;
    top:20px;
    right:16px;
    padding:0 2px 2px 2px;
    width: 12px;
    height: 12px;
    font-size:16px;
    line-height: 12px;
    color: #dd5555;
    cursor:pointer;
    z-index:2;
    text-align: center;
    transition:color 300ms;
    -webkit-transition: color 300ms;
}
.timelineFlat .item_open .t_close:hover {
    color:#f75f5f;
}
/* ----------------------------------------- */

/* left/right controles */
.timelineControls2 .t_controles {
    margin:0;
}

.timelineTouch.timelineControls2 .t_left,
.timelineTouch.timelineControls2 .t_right {
    display: none;
}

.timelineControls2:hover .t_left,
.timelineControls2:hover .t_right {
    opacity: 1;
    filter: alpha(opacity=100);
}

.timelineControls2 .t_left,
.timelineControls2 .t_right {
    position: absolute;
    display:block;
    height:100%;
    width:75px;
    margin:0;
    cursor:pointer;
    top:0;
    z-index: 10;
    opacity: 0;
    filter: alpha(opacity=0);
    transition:background-color 300ms, opacity 300ms;
    -webkit-transition: background-color 300ms, opacity 300ms;
}
.timelineControls2 .t_left,
.timelineControls2 .t_left:hover:active {
    left:0;
    background: rgba(255,255,255, 0.5) url('../img/blck-arrow-left.png') no-repeat center center;
}
.timelineControls2 .t_left:hover {
    background: rgba(255,255,255, 0.7) url('../img/blck-arrow-left.png') no-repeat center center;
}

.timelineControls2 .t_right,
.timelineControls2 .t_right:hover:active{
    right:0;
    background: rgba(255,255,255, 0.5) url('../img/blck-arrow-right.png') no-repeat center center;
}
.timelineControls2 .t_right:hover {
    background: rgba(255,255,255, 0.7) url('../img/blck-arrow-right.png') no-repeat center center;
}

a.image_rollover_bottom,
a.image_rollover_right,
a.image_rollover_top,
a.image_rollover_left
{
    margin:0;
    display:block;
    position:relative;
    overflow:hidden;
}

a.image_rollover_bottom img,
a.image_rollover_right img,
a.image_rollover_top img,
a.image_rollover_left img {
    display:block;
}



.timelineLight .item img {
    height: 125px;
}
.timelineFlat .item img {
    height: 160px;
}
.timeline-popup {
    position: relative;
    padding: 0;
    width: auto;
    max-width: 800px;
    margin: 20px auto;
    color: #FFF;
    font-size: 17px;
}
.timeline-popup > img {
    display: block;
    margin: 0 0 20px;
}
.timeline-popup button.mfp-close {
    top: -44px;
    color: #FFF;
}
.timeline-popup-date {
    position: absolute;
    top: -44px;
    left: 0;
    line-height: 44px;
    font-size: 20px;
}

.timelineLight .timeline_open_content-wrapper {
    max-height: 148px;
}

.timelineFlat .timeline_open_content-wrapper {
    max-height: 261px;
}
.timeline-popup-wrapper {
    max-height: 148px;
}