/*======================================================== DARK LAYOUT =========================================================*/ /* Timeline */ .timeline { position: relative; display: block; margin: 0; padding: 10px 0; list-style: none; } .timeline:after { display: table; clear: both; content: ' '; } .timeline:before { display: table; content: ' '; } .timeline > li { list-style: none; } .timeline > li:nth-child(even) { float: left; clear: left; } .timeline > li:nth-child(odd) { float: right; clear: right; } .timeline .media { font-size: 13px; border-bottom: 1px solid #eee; } .timeline .media p { font-size: 13px; } .timeline .media:last-child { border-bottom: 0; } .timeline-line + .timeline-item { margin-top: -20px; } .timeline-group { position: relative; z-index: 1; display: block; float: none !important; margin: 20px 0; text-align: center; } .timeline-poster { margin-top: -20px; } .timeline-poster .btn-link { color: #a1aab0; } .timeline-poster .btn-link:active { color: #3e5771; } .timeline-poster .btn-link:focus { color: #3e5771; } .timeline-poster .btn-link:hover { color: #3e5771; } .timeline-poster .btn-link.active { color: #3e5771; } #timeline.timeline-center .timeline-line { position: absolute; top: 0; bottom: 0; left: 50%; display: inline-block; width: 2px; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); background-color: #ddd; } #timeline.timeline-center .timeline-item { position: relative; display: inline-block; width: 50%; padding: 0 50px 35px; } #timeline.timeline-center .timeline-item:nth-child(even) { padding: 0 35px 50px 0; } #timeline.timeline-center .timeline-item:nth-child(even):after { position: absolute; z-index: 1; top: 10px; top: 20px; right: 19px; right: 25px; width: 0; height: 0; content: ''; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid #ccc; border-left: 11px solid #fff; } #timeline.timeline-center .timeline-item:nth-child(even):before { position: absolute; z-index: 1; top: 20px; right: 24px; width: 0; height: 0; content: ''; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid #ccc; } #timeline.timeline-center .timeline-item:nth-child(even) > .timeline-badge { right: -20px; } #timeline.timeline-center .timeline-item:nth-child(odd) { padding: 0 0 50px 35px; } #timeline.timeline-center .timeline-item:nth-child(odd):after { position: absolute; z-index: 1; top: 10px; top: 20px; left: 19px; left: 25px; width: 0; height: 0; content: ''; border-top: 12px solid transparent; border-right: 12px solid #ccc; border-right: 11px solid #fff; border-bottom: 12px solid transparent; } #timeline.timeline-center .timeline-item:nth-child(odd):before { position: absolute; z-index: 1; top: 20px; left: 24px; width: 0; height: 0; content: ''; border-top: 12px solid transparent; border-right: 12px solid #ccc; border-bottom: 12px solid transparent; } #timeline.timeline-center .timeline-item:nth-child(odd) > .timeline-badge { left: -20px; } #timeline.timeline-center .timeline-item > .timeline-badge { position: absolute; z-index: 1; top: 12px; } #timeline.timeline-center .timeline-item > .timeline-badge > span { display: inline-block; width: 40px; height: 40px; -webkit-transition: all ease .3s; -moz-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; text-align: center; text-decoration: none; border-radius: 50%; } #timeline.timeline-center .timeline-item > .timeline-badge > span i { font-size: 1.6rem; line-height: 40px; top: 0; display: block; color: #fff; } #timeline.timeline-center .timeline-item > .timeline-badge > span:active { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #timeline.timeline-center .timeline-item > .timeline-badge > span:focus { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #timeline.timeline-center .timeline-item > .timeline-badge > span:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #timeline.timeline-center .timeline-item > .timeline-badge > a.active { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #timeline.timeline-center .timeline-item > .timeline-panel { position: relative; border: 1px solid #ddd; border-radius: 4px; background-color: #fff; } #timeline.timeline-center .timeline-item > .timeline-panel:hover .timeline-actions { display: block; } #timeline.timeline-right .timeline-line { position: absolute; top: 0; right: 12px; bottom: 0; display: inline-block; width: 2px; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); background-color: #ddd; } #timeline.timeline-right .timeline-group { text-align: right; } #timeline.timeline-right .timeline-item { position: relative; display: inline-block; width: 100%; padding: 0 43px 35px 0; } #timeline.timeline-right .timeline-item:after { position: absolute; z-index: 1; top: 21px; right: 33px; width: 0; height: 0; content: ''; border-top: 11px solid #f8f8f8; border-bottom: 11px solid #f8f8f8; border-left: 11px solid #fff; } #timeline.timeline-right .timeline-item:before { position: absolute; z-index: 1; top: 20px; right: 32px; width: 0; height: 0; content: ''; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid #ccc; } #timeline.timeline-right .timeline-item > .timeline-badge { right: -8px; } #timeline.timeline-right .timeline-item > .timeline-badge { position: absolute; z-index: 1; top: 12px; } #timeline.timeline-right .timeline-item > .timeline-badge > span { display: inline-block; width: 40px; height: 40px; -webkit-transition: all ease .3s; -moz-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; text-align: center; text-decoration: none; border-radius: 50%; } #timeline.timeline-right .timeline-item > .timeline-badge > span i { font-size: 1.6rem; line-height: 40px; top: 0; display: block; color: #fff; } #timeline.timeline-right .timeline-item > .timeline-badge > span:active { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #timeline.timeline-right .timeline-item > .timeline-badge > span:focus { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #timeline.timeline-right .timeline-item > .timeline-badge > span:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #timeline.timeline-right .timeline-item > .timeline-badge > a.active { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #timeline.timeline-right .timeline-item > .timeline-panel { position: relative; border: 1px solid #ddd; border-radius: 4px; background-color: #fff; } #timeline.timeline-right .timeline-item > .timeline-panel:hover .timeline-actions { display: block; } #timeline.timeline-right .timeline-item.block:nth-child(even):before { right: 8px; left: auto; } #timeline.timeline-right .timeline-item.block:nth-child(even):after { right: 11px; left: auto; } #timeline.timeline-right .timeline-item.block:nth-child(odd):after { right: 8px; right: auto; } #timeline.timeline-left .timeline-line { position: absolute; top: 0; bottom: 0; left: 12px; display: inline-block; width: 2px; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); background-color: #ddd; } #timeline.timeline-left .timeline-group { text-align: left; } #timeline.timeline-left .timeline-item { position: relative; display: inline-block; width: 100%; padding: 0 0 35px 43px; } #timeline.timeline-left .timeline-item:after { position: absolute; z-index: 1; top: 21px; left: 33px; width: 0; height: 0; content: ''; border-top: 11px solid #f8f8f8; border-right: 11px solid #fff; border-bottom: 11px solid #f8f8f8; } #timeline.timeline-left .timeline-item:before { position: absolute; z-index: 1; top: 20px; left: 32px; width: 0; height: 0; content: ''; border-top: 12px solid transparent; border-right: 12px solid #ccc; border-bottom: 12px solid transparent; } #timeline.timeline-left .timeline-item > .timeline-badge { left: -8px; } #timeline.timeline-left .timeline-item > .timeline-badge { position: absolute; z-index: 1; top: 12px; } #timeline.timeline-left .timeline-item > .timeline-badge > span { display: inline-block; width: 40px; height: 40px; -webkit-transition: all ease .3s; -moz-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; text-align: center; text-decoration: none; border-radius: 50%; } #timeline.timeline-left .timeline-item > .timeline-badge > span i { font-size: 1.6rem; line-height: 40px; top: 0; display: block; color: #fff; } #timeline.timeline-left .timeline-item > .timeline-badge > span:active { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #timeline.timeline-left .timeline-item > .timeline-badge > span:focus { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #timeline.timeline-left .timeline-item > .timeline-badge > span:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #timeline.timeline-left .timeline-item > .timeline-badge > a.active { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #timeline.timeline-left .timeline-item > .timeline-panel { position: relative; border: 1px solid #ddd; border-radius: 4px; background-color: #fff; } #timeline.timeline-left .timeline-item > .timeline-panel:hover .timeline-actions { display: block; } #timeline .timeline-item.block:nth-child(even) { width: 100% !important; margin-top: 5px; } #timeline .timeline-item.block:nth-child(even):after { top: -11px; top: -10px; right: auto; left: 50%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); border: 0; border: 0; border-right: 12px solid transparent; border-right: 11px solid #f8f8f8; border-bottom: 12px solid #ccc; border-bottom: 11px solid #fff; border-left: 12px solid transparent; border-left: 11px solid #f8f8f8; } #timeline .timeline-item.block:nth-child(even):before { top: -11px; right: auto; left: 50%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); border: 0; border-right: 12px solid transparent; border-bottom: 12px solid #ccc; border-left: 12px solid transparent; } #timeline .timeline-item.block:nth-child(even) > .timeline-badge { top: -28px; right: auto; left: 50%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); } #timeline .timeline-item.block:nth-child(odd) { width: 100% !important; margin-top: 5px; } #timeline .timeline-item.block:nth-child(odd):after { top: -11px; top: -10px; right: auto; left: 50%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); border: 0; border: 0; border-right: 12px solid transparent; border-right: 11px solid #f8f8f8; border-bottom: 12px solid #ccc; border-bottom: 11px solid #fff; border-left: 12px solid transparent; border-left: 11px solid #f8f8f8; } #timeline .timeline-item.block:nth-child(odd):before { top: -11px; right: auto; left: 50%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); border: 0; border-right: 12px solid transparent; border-bottom: 12px solid #ccc; border-left: 12px solid transparent; } #timeline .timeline-item.block:nth-child(odd) > .timeline-badge { top: -28px; right: auto; left: 50%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); } .timeline-actions { display: none; } .timeline-content { padding: 15px; } .timeline-footer { padding: 15px; border-top: 1px solid #eee; border-radius: 0 0 5px 5px; background-color: #fbfcfc; } .timeline-heading { font-size: 20px; padding: 15px; } .timeline-liveliness { padding: 15px; border-top: 1px solid #eee; background-color: #fbfcfc; } .timeline-heading + .timeline-content { padding-top: 0; } .timeline-date { font-size: 14px; color: #aaa; } .timeline-embed { position: relative; height: 0; padding-top: 25px; padding-bottom: 56.25%; } .timeline-embed .embed-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .timeline-embed embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .timeline-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .timeline-embed object { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .timeline-img { display: block; padding: 5px 0; } .timeline-img.first { margin-right: -10px; } .timeline-img.middle { margin-right: -10px; margin-left: -10px; } .timeline-img.last { margin-left: -10px; } .timeline-resume { border-top: 1px solid #eee; background-color: #fbfcfc; } .timeline-avatar { margin-top: -2px; margin-right: 10px; } .timeline-title { font-size: 14px; font-weight: 600; line-height: 1.42857; margin: 0; padding: 0; text-decoration: none; color: #3e5771; } .timeline-title > small { font-size: 12px; line-height: 1.5; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #a1aab0; } .wrapkit-content-rtl .timeline-avatar { margin-right: 0; margin-left: 10px; } @media (min-width: 992px) { .timeline-item:nth-child(even) { padding: 0 35px 50px 0; } .timeline-item:nth-child(odd) { padding: 0 0 50px 35px; } } @media (max-width: 991.98px) { .timeline { padding-left: 15px; } .timeline-line { left: 15px; } .timeline-group { display: inline-block; margin-left: -22px; } .timeline-item { width: 100% !important; margin-top: 0 !important; padding-right: 10px; } .timeline-item:nth-child(even):after { top: 10px; top: 21px; left: 19px; left: 40px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); border: 0; border-top: 12px solid transparent; border-top: 11px solid #f8f8f8; border-right: 12px solid #ccc; border-right: 11px solid #fff; border-bottom: 12px solid transparent; border-bottom: 11px solid #f8f8f8; } .timeline-item:nth-child(even):before { top: 20px; left: 39px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); border: 0; border-top: 12px solid transparent; border-right: 12px solid #ccc; border-bottom: 12px solid transparent; } .timeline-item:nth-child(even) > .timeline-badge { top: 12px; right: auto; left: -20px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .timeline-item:nth-child(odd):after { top: 10px; top: 21px; left: 19px; left: 40px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); border: 0; border-top: 12px solid transparent; border-top: 11px solid #f8f8f8; border-right: 12px solid #ccc; border-right: 11px solid #fff; border-bottom: 12px solid transparent; border-bottom: 11px solid #f8f8f8; } .timeline-item:nth-child(odd):before { top: 20px; left: 39px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); border: 0; border-top: 12px solid transparent; border-right: 12px solid #ccc; border-bottom: 12px solid transparent; } .timeline-item:nth-child(odd) > .timeline-badge { top: 12px; right: auto; left: -20px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .timeline-item.block:nth-child(even) { padding-bottom: 0; } .timeline-item.block:nth-child(even):after { top: 10px; top: 11px; left: 19px; left: 20px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); border: 0; border-top: 12px solid transparent; border-top: 11px solid #f8f8f8; border-right: 12px solid #ccc; border-right: 11px solid #fff; border-bottom: 12px solid transparent; border-bottom: 11px solid #f8f8f8; } .timeline-item.block:nth-child(even):before { top: 10px; left: 19px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); border: 0; border-top: 12px solid transparent; border-right: 12px solid #ccc; border-bottom: 12px solid transparent; } .timeline-item.block:nth-child(even) > .timeline-badge { top: 12px; right: auto; left: -6px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .timeline-item.block:nth-child(odd) { padding-bottom: 0; } .timeline-item.block:nth-child(odd):after { top: 10px; top: 11px; left: 19px; left: 20px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); border: 0; border-top: 12px solid transparent; border-top: 11px solid #f8f8f8; border-right: 12px solid #ccc; border-right: 11px solid #fff; border-bottom: 12px solid transparent; border-bottom: 11px solid #f8f8f8; } .timeline-item.block:nth-child(odd):before { top: 10px; left: 19px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); border: 0; border-top: 12px solid transparent; border-right: 12px solid #ccc; border-bottom: 12px solid transparent; } .timeline-item.block:nth-child(odd) > .timeline-badge { top: 12px; right: auto; left: -6px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } @media (max-width: 991.98px) { #timeline.timeline-wrapper .timeline { padding: 0; } #timeline.timeline-wrapper .timeline .card-body { text-align: left; } #timeline.timeline-wrapper .timeline-line { position: absolute; top: 0; bottom: 0; left: 50%; display: inline-block; width: 2px; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); background-color: #ddd; } #timeline.timeline-wrapper .timeline-group { display: block; margin-left: -6px; text-align: center; } #timeline.timeline-wrapper .timeline-item { display: block; padding: 20px 0 20px !important; } #timeline.timeline-wrapper .timeline-item:nth-child(even) { float: none; clear: both; } #timeline.timeline-wrapper .timeline-item:nth-child(even):after { display: none; } #timeline.timeline-wrapper .timeline-item:nth-child(even):before { display: none; } #timeline.timeline-wrapper .timeline-item:nth-child(odd) { float: none; clear: both; } #timeline.timeline-wrapper .timeline-item:nth-child(odd):after { display: none; } #timeline.timeline-wrapper .timeline-item:nth-child(odd):before { display: none; } #timeline.timeline-wrapper .timeline-item > .timeline-badge { top: 0 !important; left: 45% !important; } #timeline.timeline-wrapper .timeline-item.block:nth-child(even) { float: none; clear: both; } #timeline.timeline-wrapper .timeline-item.block:nth-child(even):after { display: none; } #timeline.timeline-wrapper .timeline-item.block:nth-child(even):before { display: none; } #timeline.timeline-wrapper .timeline-item.block:nth-child(odd) { float: none; clear: both; } #timeline.timeline-wrapper .timeline-item.block:nth-child(odd):after { display: none; } #timeline.timeline-wrapper .timeline-item.block:nth-child(odd):before { display: none; } #timeline.timeline-wrapper .timeline-item.timeline-poster > .timeline-badge { display: none; } } @media (max-width: 575.98px) { .timeline-item > .timeline-badge { top: 0 !important; left: 44% !important; } }