.timeline{
  margin-top:20px;
  position:relative;
  color: #c8c8c8;
  
}

.timeline:before{
  position:absolute;
  content:'';
  width:4px;
  height:calc(100% + 50px);
background: rgb(138,145,150);
background: -moz-linear-gradient(left, rgba(138,145,150,1) 0%, rgba(122,130,136,1) 60%, rgba(98,105,109,1) 100%);
background: -webkit-linear-gradient(left, rgba(138,145,150,1) 0%,rgba(122,130,136,1) 60%,rgba(98,105,109,1) 100%);
background: linear-gradient(to right, rgba(138,145,150,1) 0%,rgba(122,130,136,1) 60%,rgba(98,105,109,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a9196', endColorstr='#62696d',GradientType=1 );
  left:14px;
  top:5px;
  border-radius:4px;
}

.timeline-month{
  position:relative;
  padding:4px 15px 4px 35px;
  background-color:#444950;
  display:inline-block;
  width:auto;
  border-radius:40px;
  border:1px solid #17191B;
  border-right-color:black;
  margin-bottom:30px;
}

.timeline-month span{
  position:absolute;
  top:-1px;
  left:calc(100% - 10px);
  z-index:-1;
  white-space:nowrap;
  display:inline-block;
  background-color:#111;
  padding:4px 10px 4px 20px;
  border-top-right-radius:40px;
  border-bottom-right-radius:40px;
  border:1px solid black;
  box-sizing:border-box;
}

.timeline-month:before{
  position:absolute;
  content:'';
  width:20px;
  height:20px;
background: rgb(138,145,150);
background: -moz-linear-gradient(top, rgba(138,145,150,1) 0%, rgba(122,130,136,1) 60%, rgba(112,120,125,1) 100%);
background: -webkit-linear-gradient(top, rgba(138,145,150,1) 0%,rgba(122,130,136,1) 60%,rgba(112,120,125,1) 100%);
background: linear-gradient(to bottom, rgba(138,145,150,1) 0%,rgba(122,130,136,1) 60%,rgba(112,120,125,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a9196', endColorstr='#70787d',GradientType=0 );
  border-radius:100%;
  border:1px solid #17191B;
  left:5px;
}

.timeline-section{
  padding-left:35px;
  display:block;
  position:relative;
  margin-bottom:30px;
}

.timeline-date{
  margin-bottom:15px;
  padding:2px 15px;
  background:linear-gradient(#74cae3, #5bc0de 60%, #4ab9db);
  position:relative;
  display:inline-block;
  border-radius:20px;
  border:1px solid #17191B;
  color:#fff;
text-shadow:1px 1px 1px rgba(0,0,0,0.3);
}
.timeline-section:before{
  content:'';
  position:absolute;
  width:30px;
  height:1px;
  background-color:#444950;
  top:12px;
  left:20px;
}

.timeline-section:after{
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  background:linear-gradient(to bottom, rgba(138,145,150,1) 0%,rgba(122,130,136,1) 60%,rgba(112,120,125,1) 100%);
  top:7px;
  left:11px;
  border:1px solid #17191B;
  border-radius:100%;
}

.timeline-section .col-sm-4{
  margin-bottom:15px;
}

.timeline-box{
  position:relative;
  
 background-color:#444950;
  border-radius:15px;
  border-top-left-radius:0px;
  border-bottom-right-radius:0px;
  border:1px solid #17191B;
  transition:all 0.3s ease;
  overflow:hidden;
}

.box-icon{
  position:absolute;
  right:5px;
  top:0px;
}

.box-title{
  padding:5px 15px;
  border-bottom: 1px solid #17191B;
}

.box-title i{
  margin-right:5px;
}

.box-content{
  padding:5px 15px;
  background-color:#17191B;
}

.box-content strong{
  color:#666;
  font-style:italic;
  margin-right:5px;
}

.box-item{
  margin-bottom:5px;
}

.box-footer{
 padding:5px 15px;
  border-top: 1px solid #17191B;
  background-color:#444950;
  text-align:right;
  font-style:italic;
}

/*home-content style*/
.home-content {
    background: #f4f4f4;
    padding: 46px 0 63px;
}

.timeline-home {
    /*overflow: hidden;*/
    margin: 0 0 54px;
}

.timeline-home ul {
    margin: 0 -2px;
    padding: 0;
}

.timeline-home ul:after {
    display: block;
    content: '';
    clear: both;
}

.timeline-home ul li {
    float: left;
    width: 25%;
    padding: 0 2px;
    list-style: none;
    margin-bottom: 4px;
    box-sizing: border-box;
    /*overflow: hidden;*/
}

.timeline-home ul li img {
    width: 100%;
    vertical-align: top;
}

.timeline-home ul li.large {
    width: 66.05%
}

.timeline-home ul li.medium {
    width: 33.95%;

}

.timeline-home .post {
    position: relative;
}

.timeline-home .post:after {
    content: '';
    height: 50%;
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: 100%;
    pointer-events: none;
    background: -linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.timeline-home .post .entry-header {
    position: absolute;
    bottom: 0;
    z-index: 2;
}

.timeline-home .post .category-holder {
    position: absolute;
    top: 10px;
    left: 10px;
}

.timeline-home .post .category {
    font-size: 12px;
    line-height: 15px;
    border-radius: 5px;
    display: inline-block;
    padding: 7px 15px 8px;
    color: #fff;
    margin-right: 3px;
    margin-bottom: 3px;
}

.timeline-home .post .category:focus {
    outline: thin dotted #fff;
    outline-offset: -1px;
}

.timeline-home .post .post-thumbnail {
    display: block;
}

.timeline-home .post .post-thumbnail:focus {
    outline-offset: 1px;
}

.timeline-home .post .entry-title {
    margin-bottom: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

.timeline-home ul li .post .entry-title {
    font-size: 20px;
    line-height: 24px;
}

.timeline-home ul li.large .post .entry-title,
.timeline-home ul li.medium .post .entry-title {
    font-size: 32px;
    line-height: 36px;
}

.timeline-home .post .entry-header {
    padding: 26px 22px 26px 26px;
}

.timeline-home .post .entry-title a {
    color: #ffffff !important;
}

.timeline-home .post .entry-title a:hover {
    color: #06509d;
    text-decoration: none;
}

.timeline-home .post .entry-title a:focus {
    outline: thin dotted #fff;
}

@media only screen and (max-width: 991px) {

    .timeline-home ul li.large,
    .timeline-home ul li.medium {
        width: 100%;
    }

    .timeline-home ul li {
        width: 50%;
    }

    .timeline-home ul li.large .post .entry-title,
    .timeline-home ul li.medium .post .entry-title {
        font-size: 20px;
        line-height: 24px;
    }
}

@media only screen and (max-width: 767px) {


    .timeline-home .post {}

    .timeline-home ul li.large .post .entry-title,
    .timeline-home ul li.medium .post .entry-title {
        font-size: 20px;
        line-height: 24px;
    }

    .timeline-home ul li {
        width: 100%;
    }

    .timeline-home ul li.large,
    .timeline-home ul li.medium {
        width: 100%;
    }

    
}