Timeline First V3

Take off the left section

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.4.1/slick-theme.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.4.1/slick.min.js"></script>
<body style="background-image: url('http://images5.alphacoders.com/379/379350.jpg');">
    <div class="container" style="background-color:white;">
        <!-- Course Benmark Navigation Menu -->
        <div class="container nav-benchmark " style="background-color:white; height:200px;">
            <div class="row">
                <br>
                	<h3><b> Monitor Progress</b>: Algebra 1 </h3>

                <br>
                <div class="col-lg-1">
                    <img src="http://www.bigideaslearning.com/for-reviewers/tx/hstx_alg1.png" width="60">
                    <br>	<a id="change-course" href="#"> change course</a> 
                </div>
                <div class="col-lg-2">
                    <div class="tl-box">
                        <div class="tl-top"> <i class="fa fa-pencil-square-o"></i>

                        </div>
                        <div class="tl-bot"> <i class="fa fa-circle-o"></i>

                        </div>
                        <div class="tl-right"><span class="tl-text">Progression </br> Benchmark </span>

                        </div>
                    </div>
                </div>
                <div class="col-lg-1">
                    <div class="vertical-line"></div>
                </div>
                <div class="border-center">
                    <div class="slide">
                        <div class="col-lg-2">
                            <div class="tl-box">
                                <div class="tl-top"> <i class="fa fa-pencil-square-o"></i>

                                </div>
                                <div...

CSS

/* Slick Settings */
 .slick-next {
    right: -50px;
    top: 30px;
    width:35px;
    height:35px;
}
.slick-prev {
    left: 300px;
    top: 30px;
    width:35px;
    height:35px;
}
.slick-next:before {
    font-family: FontAwesome;
    content:"\f105";
    color:black;
    border: 1px solid black;
    background-color: white;
    width:35px;
    height:35px;
    padding: 5px;
    display:table;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    z-index: 99;
}
.slick-prev:before {
    font-family: FontAwesome;
    content:"\f104";
    color:black;
    background-color: white;
    border: 1px solid black;
    width:35px;
    height:35px;
    padding: 5px;
    display:table;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    z-index: 99;
}
/*Background Border*/
 .border-center {
    width: 90%;
    position: relative;
    padding-left: 50px;
}
.border-center .slide {
    left: 50px;
}
.slide:before {
    content:'';
    position: absolute;
    border-bottom: 2px #3498db dashed;
    z-index: 0;
    top: 50%;
    margin-top:-2px;
    right: 10%;
    left: 40%;
    width: 59%;
    /*<--- HR Line*/
}
/*Timeline*/
 .tl-box {
    background: white;
    border:1px solid black;
    width:199px;
    height:80px;
    position: relative;
}
.tl-box .tl-top {
    width:45px;
    height:39px;
    border-right:1px solid black;
    border-bottom:1px solid black;
    text-align:center;
    font-size:15px;
    color:#4e90cb;
    line-height: 39px;
}
.tl-box .tl-bot {
    width:45px;
    height:40px;
    border-right:1px solid black;
    text-align:center;
    font-size:15px;
    color:#4e90cb;
    line-height: 40px;
}
.tl-box .tl-right {
    width:194px;
    text-align:left;
    position: absolute;
    top: 50%;
    left: calc(50% + 60px);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform:...

JavaScript

// Benchmark nav-menu settings 
$('.slide').slick({

    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: true,
    infinite: false,
    swipe: true,
    focusOnSelect:true,
    dots:true,

});

$('.tl-box').click(function() {
    $(this).css('border', 'orange 3px solid');
  });