/* The actual ruv-timeline (the vertical ruler) */
.ruv-timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.ruv-timeline-start,
.ruv-timeline-end {
    text-align: center;
    z-index: 100;
}

.ruv-timeline-start .ruv-timeline-start-title,
.ruv-timeline-end .ruv-timeline-end-title {
    background:#FFF;
    color:#000;
    font-weight:bold;
    max-width: 200px;
    margin:0 auto;
    font-size:18px;
    padding:8px;
    border-radius:8px;
}
  
/* The actual ruv-timeline (the vertical ruler) */
.ruv-timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: white;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}

/* ruv-ruv-timeline-container around ruv-timeline-content */
.ruv-timeline .ruv-timeline-container {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

/* The circles on the ruv-timeline */
.ruv-timeline .ruv-timeline-container::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: white;
    border: 4px solid #ccc;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}

/* Place the ruv-ruv-timeline-container to the left */
.ruv-timeline .left {
    left: -81px;
}

/* Place the ruv-ruv-timeline-container to the right */
.ruv-timeline .right {
    left: 50%;
}

/* Add arrows to the left ruv-ruv-timeline-container (pointing right) */
.ruv-timeline .left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}

/* Add arrows to the right ruv-ruv-timeline-container (pointing left) */
.ruv-timeline .right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
}

/* Fix the circle for ruv-containers on the right side */
.ruv-timeline .right::after {
    left: -16px;
}

/* The actual ruv-timeline-content */
.ruv-timeline .ruv-timeline-content {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 6px;
}

.ruv-timeline .ruv-timeline-content h3 {
    width:100%;
    float:left;
    margin-bottom:8px;
}

.ruv-timeline .ruv-timeline-content .ruv-timeline-content-wrapper {
    float:left;
    width:100%;
}  

.ruv-timeline .ruv-timeline-content p {
    width:100%;
    clear:both;
}

.ruv-timeline .ruv-timeline-content p a {
    clear:both;
    width:100%;
}

.ruv-timeline .ruv-timeline-content p a::before {
    font-family: 'Fontawesome';
    content:'\f14c';
    margin-left:4px;
    margin-right:4px;
}

.ruv-timeline .ruv-timeline-content .ruv-timeline-date-wrapper {
    float:left;
    width:100%;
    margin-bottom:8px;
}

.ruv-timeline .ruv-timeline-content .ruv-timeline-date {
    float:left;
    padding-left:6px;
    padding-right:6px;
    padding-bottom:4px;
    padding-top:4px;
    border-radius:8px;
    background:#EFEFEF;
    text-align: center;
    clear:both;
    font-weight:bold;
    font-size:14px;
}

.ruv-timeline .ruv-timeline-content .ruv-timeline-img-wrapper {
    position: relative;
    margin-bottom:10px;
}

.ruv-timeline .ruv-timeline-content .ruv-timeline-img-wrapper .ruv-timeline-img {
    width:100%;
    border-radius: 8px 8px 0px 0px;
}

.ruv-timeline .ruv-timeline-content .ruv-timeline-img-wrapper .ruv-timeline-date-wrapper {
    position: absolute;
    top:10px;
    left:10px;
    float:none;
    width:auto;
}

/* Media queries - Responsive ruv-timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
    /* Place the timelime to the left */
    .ruv-timeline::after {
        left: 1px;
    }

    .ruv-timeline .ruv-timeline-content {
        left:35px;
    }

    /* Full-width ruv-containers */
    .ruv-timeline .ruv-timeline-container.right {
        width: 100%;
        padding-left: 0px;
        padding-right: 25px;
    }

    /* Make sure that all arrows are pointing leftwards */
    .ruv-timeline .ruv-timeline-container.right::before,
    .ruv-timeline .ruv-timeline-container.left::before {
        left: 25px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

    .ruv-timeline .ruv-timeline-container.left {
        width: 100%;
        padding-left: 0px;
        padding-right: 25px;
        left:0;
    }

    .ruv-timeline .ruv-timeline-container.left::after{
        left:-15px;
    }

    /* Make sure all circles are at the same spot */
    /* .ruv-timeline .left::after, .right::after {
        left: 15px;
    } */

    /* Make all right ruv-containers behave like the left ones */
    .ruv-timeline .right {
        left: 0px;
    }

    .ruv-timeline-start,
    .ruv-timeline-end {
        text-align: left;
    }

    .ruv-timeline-start .ruv-timeline-start-title, 
    .ruv-timeline-end .ruv-timeline-end-title {
        margin-left:-10px;
    }
}