
/*
* Styles for Timeline
*/

.timeline { list-style: none; position: relative; max-width: 1200px; padding: 20px; margin: 0 auto; }
.timeline:after { content: ""; position: absolute; top: 0; left: 50%; margin-left: -1px; background-color: rgba(0, 0, 0, 0.2); height: 100%; width: 2px; border-radius: 2px; display: block; }
.timeline:before, .time-line:after{ content: ""; position: absolute; top: -8px; left: 50%; margin-left: -4px; background-color: rgba(0, 0, 0, 0.3); height: 8px; width: 8px; border-radius: 100%; display: block; }
.time-line:after{top:auto; bottom:72px;}
.timeline .timeline-row { padding-left: 50%; position: relative; z-index: 10; }
.timeline .timeline-row .timeline-time { position: absolute; right: 50%; top: 31px; text-align: right; margin-right: 40px; font-size: 16px; line-height: 1.3; font-weight: 600; }
.timeline .timeline-row .timeline-time small { display: block; color: #999; text-transform: uppercase; opacity: 0.75; font-size: 11px; font-weight: 400; }
.timeline .timeline-row .timeline-icon { position: absolute; top: 30px; left: 50%; margin-left: -20px; width: 40px; height: 40px; border-radius: 50%; background-color: white; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); overflow: hidden; padding: 3px; color: white; font-size: 14px; z-index: 100; }
.timeline .timeline-row .timeline-icon > div { border-radius: 50%; line-height: 34px; font-size: 16px; }
.timeline .timeline-row .timeline-content { margin-left: 40px; position: relative; background-color: #fff; }
.timeline .timeline-row .timeline-content:after { content: ""; position: absolute; top: 48px; left: -41px; height: 2px; width: 40px; background-color: rgba(0, 0, 0, 0.2); z-index: -1; }
.timeline .timeline-row .timeline-content .panel-body { padding: 30px 30px 17px; position: relative; z-index: 10; box-sizing:border-box;}
.timeline .timeline-row .timeline-content img { margin-bottom: 15px; }
.timeline .timeline-content .post-img img{margin-bottom:0;}
.timeline .timeline-row .timeline-content .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; margin-bottom: 15px; overflow: hidden; }
.timeline .timeline-row .timeline-content .video-container iframe, .timeline .timeline-row .timeline-content .video-container object, .timeline .timeline-row .timeline-content .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.timeline .timeline-row:nth-child(odd) { padding-left: 0; padding-right: 50%;}
.timeline .timeline-row:nth-child(odd) .timeline-time { right: auto; left: 50%; text-align: left; margin-right: 0; margin-left: 40px;}
.timeline .timeline-row:nth-child(odd) .timeline-content { margin-right: 40px; margin-left: 0;}
.timeline .timeline-row:nth-child(odd) .timeline-content:after { left: auto; right: -41px;}
.timeline.animated .timeline-row .timeline-content { opacity: 0; left: 20px; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; transition: all 0.8s; }
.timeline.animated .timeline-row:nth-child(odd) .timeline-content { left: -20px;}
.timeline.animated .timeline-row.active .timeline-content { opacity: 1; left: 0; }
.timeline.animated .timeline-row.active:nth-child(odd) .timeline-content { left: 0;}
.timeline-time{color:#F64747;}
.blog-timeline .timeline-time .fa{margin-right:5px;}
.blog-timeline .post-content, .blog-timeline .post-footer{padding-right:0 !important; padding-left:0 !important;}
.blog-timeline .post-img, .blog-timeline .post-video, .blog-timeline .no-media{margin-bottom:15px !important;}
.timeline-content .post-audio{padding:0 0 20px;}
.timeline-content .post.audio{margin-top:0;}
.time-line { background-attachment:fixed; }
 @media (max-width: 768px) {
.timeline { padding: 15px 10px; }
.timeline:after { left: 28px; }
.timeline .timeline-row { padding-left: 0; margin-bottom: 16px; }
.timeline .timeline-row .timeline-time { position: relative; right: auto; top: 0; text-align: left; margin: 0 0 6px 56px; }
.timeline .timeline-row .timeline-time strong { display: inline-block; margin-right: 10px; }
.timeline .timeline-row .timeline-icon { top: 52px; left: -2px; margin-left: 0; }

.timeline .timeline-row .timeline-content { margin-left: 56px; left:0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); position: relative; }
.timeline .timeline-row .timeline-content:after { right: auto !important; left: -40px !important; top: 32px; }
.timeline .timeline-row:nth-child(odd){padding-right: 0;}
.timeline .timeline-row:nth-child(odd) .timeline-time {position:relative; right:auto; left:auto; top:0; text-align:left; margin:0 0 6px 56px;}
.timeline .timeline-row:nth-child(odd) .timeline-content {margin-right: 0; margin-left: 55px;}
.timeline.animated .timeline-row:nth-child(odd) .timeline-content, .timeline.animated .timeline-row .timeline-content {left: 0px;}
.timeline.animated .timeline-row.active:nth-child(odd) .timeline-content {left: 0;}
.timeline:before, .time-line:after{left:24px; margin-left:0;}

}
