/*----------------------------------------------------------------------------------- */
/* Timeline Drop By: kickdrop.me
/*----------------------------------------------------------------------------------- */ .timeline { list-style: none; position: relative; max-width: 1200px; padding: 20px; margin: 0 auto; overflow: hidden; box-sizing: content-box; } .timeline:after { content: ""; position: absolute; top: 0; left: 50%; margin-left: -2px; background-color: rgba(0, 0, 0, 0.2); height: 100%; width: 4px; border-radius: 2px; display: block; } .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: #CCCCCC; text-transform: uppercase; opacity: 0.75; font-size: 11px; font-weight: 400; } .timeline .timeline-row .timeline-icon { position: absolute; top: 29px; left: 50%; margin-left: -21px; width: 36px; height: 36px; 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; box-sizing: content-box; } .timeline .timeline-row .timeline-icon > div { border-radius: 50%; height: 36px; width: 36px; } .timeline .timeline-row .timeline-content { margin-left: 40px; position: relative; } .timeline .timeline-row .timeline-content:after { content: ""; position: absolute; top: 48px; left: -35px; height: 4px; width: 40px; background-color: rgba(0, 0, 0, 0.2); z-index: -1; } .timeline .timeline-row .timeline-content .panel-body { position: relative; z-index: 10; } .timeline .timeline-row .timeline-content h2 { font-size: 22px; margin-bottom: 12px; margin-top: 0; line-height: 1.2; } .timeline .timeline-row .timeline-content p { margin-bottom: 15px; } .timeline .timeline-row .timeline-content img { } .timeline .timeline-row .timeline-content blockquote { border-color: #eeeeee; } .timeline .timeline-row .timeline-content blockquote footer, .timeline .timeline-row .timeline-content blockquote small, .timeline .timeline-row .timeline-content blockquote .small, .timeline .timeline-row .timeline-content blockquote.blockquote-reverse footer, .timeline .timeline-row .timeline-content blockquote.blockquote-reverse small, .timeline .timeline-row .timeline-content blockquote.blockquote-reverse .small { color: #999999; } .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: -35px; } .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; } @media (max-width: 767px) { .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: 53px; left: -3px; margin-left: 0; } .timeline .timeline-row .timeline-content { margin-left: 56px; position: relative; } .timeline .timeline-row .timeline-content:after { right: auto !important; left: -20px !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 { left: 20px; } .timeline.animated .timeline-row.active:nth-child(odd) .timeline-content { left: 0; }
} /* if force one column */ .timeline.onecol { padding: 15px 10px; } .timeline.onecol:after { left: 28px; } .timeline.onecol .timeline-row { padding-left: 0; margin-bottom: 16px; } .timeline.onecol .timeline-row .timeline-time { position: relative; right: auto; top: 0; text-align: left; margin: 0 0 6px 56px; } .timeline.onecol .timeline-row .timeline-time strong { display: inline-block; margin-right: 10px; } .timeline.onecol .timeline-row .timeline-icon { top: 52px; left: -2px; margin-left: 0; } .timeline.onecol .timeline-row .timeline-content { margin-left: 56px; position: relative; } .timeline.onecol .timeline-row .timeline-content:after { right: auto !important; left: -20px !important; top: 32px; } .timeline.onecol .timeline-row:nth-child(odd) { padding-right: 0; } .timeline.onecol .timeline-row:nth-child(odd) .timeline-time { position: relative; right: auto; left: auto; top: 0; text-align: left; margin: 0 0 6px 56px; } .timeline.onecol .timeline-row:nth-child(odd) .timeline-content { margin-right: 0; margin-left: 55px; } .timeline.onecol.animated .timeline-row:nth-child(odd) .timeline-content { left: 20px; } .timeline.onecol.animated .timeline-row.active:nth-child(odd) .timeline-content { left: 0; }