@posiwise/shared-components 0.0.10 → 0.0.11

package/assets/scss/dashboard/_vertical-timeline.scss

@@ -0,0 +1,1261 @@
+@import 'mixins/custom'; // custom mixins
+@import 'layout'; // responsive grid and media queries
+
+#cd-timeline {
+    @include MQ(L) {
+        margin: {
+            bottom: 3em;
+            top: 3em;
+        }
+
+        &::before {
+            left: 50%;
+            margin-left: -2px;
+        }
+    }
+    margin: {
+        bottom: 2em;
+        padding: 2em 0;
+        position: relative;
+        top: 2em;
+    }
+
+    &::before {
+        /* this is the vertical line */
+        background: darken($background, 5%);
+        content: '';
+        height: 100%;
+        left: 18px;
+        position: absolute;
+        top: 0;
+        width: 4px;
+    }
+}
+
+.cd-timeline-block {
+    @include clearfix;
+
+    margin: 2em 0;
+    position: relative;
+
+    @include MQ(L) {
+        margin: 4em 0;
+
+        &:first-child {
+            margin-top: 0;
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    &:first-child {
+        margin-top: 0;
+    }
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.cd-timeline-img {
+    border-radius: 50%;
+    box-shadow: 0 0 0 4px $color-3, inset 0 2px 0 rgba(#000, 0.08), 0 3px 0 4px rgba(#000, 0.05);
+    height: 40px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 40px;
+
+    @include MQ(L) {
+        backface-visibility: hidden;
+        height: 60px;
+        left: 50%;
+
+        /* Force Hardware Acceleration in WebKit */
+        margin-left: -30px;
+        transform: translateZ(0);
+        width: 60px;
+
+        .cssanimations &.is-hidden {
+            visibility: hidden;
+        }
+
+        .cssanimations &.bounce-in {
+            animation: cd-bounce-1 0.6s;
+
+            /* Safari 4.0 - 8.0 */
+            visibility: visible;
+        }
+    }
+
+    img {
+        display: block;
+        height: 24px;
+        left: 50%;
+        margin-left: -12px;
+        margin-top: -12px;
+        position: relative;
+        top: 50%;
+        width: 24px;
+    }
+
+    &.cd-picture {
+        background: $color-6;
+    }
+
+    &.cd-movie {
+        background: $color-2;
+    }
+
+    &.cd-location {
+        background: $color-5;
+    }
+}
+
+@keyframes cd-bounce-1 {
+    0% {
+        /* IE 9 */
+        opacity: 0;
+
+        /* Safari 3-8 */
+        transform: scale(0.5);
+    }
+
+    60% {
+        /* IE 9 */
+        opacity: 1;
+
+        /* Safari 3-8 */
+        transform: scale(1.2);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes cd-bounce-1 {
+    0% {
+        /* IE 9 */
+        opacity: 0;
+        transform: scale(0.5);
+    }
+
+    60% {
+        /* IE 9 */
+        opacity: 1;
+
+        /* Safari 3-8 */
+        transform: scale(1.2);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+.cd-timeline-content {
+    @include border-radius;
+    @include clearfix;
+
+    background: $color-3;
+    box-shadow: 0 3px 0 darken($background, 5%);
+    margin-left: 60px;
+    padding: 1em;
+    position: relative;
+
+    @include MQ(L) {
+        margin-left: 0;
+        padding: 1.6em;
+        width: 45%;
+
+        &::before {
+            border-color: transparent;
+            border-left-color: $color-3;
+            left: 100%;
+            top: 24px;
+        }
+
+        .cd-read-more {
+            float: left;
+        }
+
+        .cd-date {
+            left: 122%;
+            position: absolute;
+            top: 6px;
+            width: 100%;
+        }
+
+        .cd-timeline-block:nth-child(even) & {
+            float: right;
+
+            &::before {
+                border-color: transparent;
+                border-right-color: $color-3;
+                left: auto;
+                right: 100%;
+                top: 24px;
+            }
+
+            .cd-read-more {
+                float: right;
+            }
+
+            .cd-date {
+                left: auto;
+                right: 122%;
+                text-align: right;
+            }
+        }
+
+        .cssanimations &.is-hidden {
+            visibility: hidden;
+        }
+
+        .cssanimations &.bounce-in {
+            animation: cd-bounce-2 0.6s;
+
+            /* Safari 4.0 - 8.0 */
+            visibility: visible;
+        }
+    }
+
+    h2 {
+        color: $color-1;
+    }
+
+    .cd-read-more,
+    .cd-date {
+        display: inline-block;
+    }
+
+    p {
+        line-height: 1.6;
+        margin: 1em 0;
+    }
+
+    .cd-read-more {
+        @include border-radius;
+
+        background: $link;
+        color: $color-3;
+        float: right;
+        padding: 0.8em 1em;
+
+        .no-touch &:hover {
+            background-color: lighten($link, 5%);
+        }
+    }
+
+    .cd-date {
+        float: left;
+        opacity: 0.7;
+        padding: 0.8em 0;
+    }
+
+    &::before {
+        border: 16px solid transparent;
+        border-right: 16px solid $color-3;
+        content: '';
+        height: 0;
+        position: absolute;
+        right: 100%;
+        top: 16px;
+        width: 0;
+    }
+}
+
+@include MQ(L) {
+    /* inverse bounce effect on even content blocks */
+    .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
+        /* Safari 4.0 - 8.0 */
+        animation: cd-bounce-2-inverse 0.6s;
+    }
+}
+
+@keyframes cd-bounce-2 {
+    0% {
+        /* IE 9 */
+        opacity: 0;
+        transform: translateX(-100px);
+    }
+
+    60% {
+        /* IE 9 Safari 3-8 */
+        opacity: 1;
+        transform: translateX(20px);
+    }
+
+    100% {
+        /* IE 9  Safari 3-8 */
+        transform: translateX(0);
+    }
+}
+
+@keyframes cd-bounce-2 {
+    0% {
+        /* IE 9 */
+        opacity: 0;
+        transform: translateX(-100px);
+    }
+
+    60% {
+        /* IE 9 Safari 3-8 */
+        opacity: 1;
+        transform: translateX(20px);
+    }
+
+    100% {
+        /* IE 9 Safari 3-8 */
+        transform: translateX(0);
+    }
+}
+
+@keyframes cd-bounce-2-inverse {
+    0% {
+        /* IE 9 Safari 3-8 */
+        opacity: 0;
+        transform: translateX(100px);
+    }
+
+    60% {
+        /* IE 9 */
+        opacity: 1;
+
+        /* Safari 3-8 IE 9 */
+        transform: translateX(-20px);
+    }
+
+    100% {
+        /* IE 9 Safari 3-8 */
+        transform: translateX(0);
+    }
+}
+
+@keyframes cd-bounce-2-inverse {
+    0% {
+        /* IE 9 Safari 3-8 */
+        opacity: 0;
+        transform: translateX(100px);
+    }
+
+    60% {
+        /* IE 9 Safari 3-8 */
+        opacity: 1;
+        transform: translateX(-20px);
+    }
+
+    100% {
+        /* IE 9 Safari 3-8 */
+        transform: translateX(0);
+    }
+}
+
+/* Timeline */
+
+.timeline {
+    display: block;
+    list-style: none;
+    margin: 0;
+    padding: 10px 0;
+    position: relative;
+}
+
+.timeline::after {
+    clear: both;
+    content: ' ';
+    display: table;
+}
+
+.timeline::before {
+    content: ' ';
+    display: table;
+}
+
+.timeline > li {
+    list-style: none;
+}
+
+.timeline > li:nth-child(even) {
+    clear: left;
+    float: left;
+}
+
+.timeline > li:nth-child(odd) {
+    clear: right;
+    float: right;
+}
+
+.timeline .media {
+    border-bottom: 1px solid rgb(238 238 238);
+    font-size: 13px;
+}
+
+.timeline .media p {
+    font-size: 13px;
+}
+
+.timeline .media:last-child {
+    border-bottom: 0;
+}
+
+.timeline-line + .timeline-item {
+    margin-top: -20px;
+}
+
+.timeline-group {
+    display: block;
+    float: none !important;
+    margin: 20px 0;
+    position: relative;
+    text-align: center;
+    z-index: 1;
+}
+
+.timeline-poster {
+    margin-top: -20px;
+}
+
+.timeline-poster .btn-link {
+    color: rgb(161 170 176);
+}
+
+.timeline-poster .btn-link:active {
+    color: rgb(62 87 113);
+}
+
+.timeline-poster .btn-link:focus {
+    color: rgb(62 87 113);
+}
+
+.timeline-poster .btn-link:hover {
+    color: rgb(62 87 113);
+}
+
+.timeline-poster .btn-link.active {
+    color: rgb(62 87 113);
+}
+
+#timeline.timeline-center .timeline-line {
+    background-color: rgb(221 221 221);
+    bottom: 0;
+    display: inline-block;
+    left: 50%;
+    position: absolute;
+    top: 0;
+    transform: translate(-50%, 0);
+    width: 4px;
+}
+
+#timeline.timeline-center .timeline-item {
+    display: inline-block;
+    padding: 0 50px 35px;
+    position: relative;
+    width: 50%;
+
+    .timeline-year {
+        color: rgb(255 255 255);
+        font-size: 12px;
+        font-weight: 600;
+        position: relative;
+        top: 8px;
+
+        .date-year {
+            line-height: 8px;
+            padding-top: 1px;
+        }
+    }
+}
+
+#timeline.timeline-center .timeline-item:nth-child(even) {
+    padding: 0 35px 50px 0;
+}
+
+#timeline.timeline-center .timeline-item:nth-child(even)::after {
+    border-bottom: 11px solid transparent;
+    border-left: 11px solid rgb(255 255 255);
+    border-top: 11px solid transparent;
+    content: '';
+    height: 0;
+    position: absolute;
+    right: 25px;
+    top: 27px;
+    width: 0;
+    z-index: 1;
+}
+
+#timeline.timeline-center .timeline-item:nth-child(even)::before {
+    border-bottom: 12px solid transparent;
+    border-left: 12px solid rgb(221 221 221);
+    border-top: 12px solid transparent;
+    content: '';
+    height: 0;
+    position: absolute;
+    right: 24px;
+    top: 27px;
+    width: 0;
+    z-index: 1;
+}
+
+#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 {
+    border-bottom: 11px solid transparent;
+    border-right: 11px solid rgb(255 255 255);
+    border-top: 11px solid transparent;
+    content: '';
+    height: 0;
+    left: 25px;
+    position: absolute;
+    top: 27px;
+    width: 0;
+    z-index: 1;
+}
+
+#timeline.timeline-center .timeline-item:nth-child(odd)::before {
+    border-bottom: 12px solid transparent;
+    border-right: 12px solid rgb(221 221 221);
+    border-top: 12px solid transparent;
+    content: '';
+    height: 0;
+    left: 24px;
+    position: absolute;
+    top: 27px;
+    width: 0;
+    z-index: 1;
+}
+
+#timeline.timeline-center .timeline-item:nth-child(odd) > .timeline-badge {
+    left: -20px;
+}
+
+#timeline.timeline-center .timeline-item > .timeline-badge {
+    position: absolute;
+    top: 12px;
+    z-index: 1;
+}
+
+#timeline.timeline-center .timeline-item > .timeline-badge > span {
+    border-radius: 30%;
+    display: inline-block;
+    height: 44px;
+    text-align: center;
+    text-decoration: none;
+    transition: all ease 0.3s;
+    width: 42px;
+}
+
+#timeline.timeline-center .timeline-item > .timeline-badge > span i {
+    color: rgb(255 255 255);
+    display: block;
+    font-size: 1.6rem;
+    line-height: 40px;
+    top: 0;
+}
+
+#timeline.timeline-center .timeline-item > .timeline-badge > span:active {
+    transform: scale(1.1);
+}
+
+#timeline.timeline-center .timeline-item > .timeline-badge > span:focus {
+    transform: scale(1.1);
+}
+
+#timeline.timeline-center .timeline-item > .timeline-badge > span:hover {
+    transform: scale(1.1);
+}
+
+#timeline.timeline-center .timeline-item > .timeline-badge > a.active {
+    transform: scale(1.1);
+}
+
+#timeline.timeline-center .timeline-item > .timeline-panel {
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(221 221 221);
+    border-radius: 4px;
+    position: relative;
+}
+
+#timeline.timeline-center .timeline-item > .timeline-panel:hover .timeline-actions {
+    display: block;
+}
+
+#timeline.timeline-right .timeline-line {
+    background-color: rgb(221 221 221);
+    bottom: 0;
+    display: inline-block;
+    position: absolute;
+    right: 12px;
+    top: 0;
+    transform: translate(-50%, 0);
+    width: 4px;
+}
+
+#timeline.timeline-right .timeline-group {
+    text-align: right;
+}
+
+#timeline.timeline-right .timeline-item {
+    display: inline-block;
+    padding: 0 43px 35px 0;
+    position: relative;
+    width: 100%;
+}
+
+#timeline.timeline-right .timeline-item::after {
+    border-bottom: 11px solid transparent;
+    border-left: 11px solid rgb(255 255 255);
+    border-top: 11px solid transparent;
+    content: '';
+    height: 0;
+    position: absolute;
+    right: 33px;
+    top: 21px;
+    width: 0;
+    z-index: 1;
+}
+
+#timeline.timeline-right .timeline-item::before {
+    border-bottom: 12px solid transparent;
+    border-left: 12px solid rgb(204 204 204);
+    border-top: 12px solid transparent;
+    content: '';
+    height: 0;
+    position: absolute;
+    right: 32px;
+    top: 20px;
+    width: 0;
+    z-index: 1;
+}
+
+#timeline.timeline-right .timeline-item > .timeline-badge {
+    right: -8px;
+}
+
+#timeline.timeline-right .timeline-item > .timeline-badge {
+    position: absolute;
+    top: 12px;
+    z-index: 1;
+}
+
+#timeline.timeline-right .timeline-item > .timeline-badge > span {
+    border-radius: 50%;
+    display: inline-block;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    transition: all ease 0.3s;
+    width: 40px;
+}
+
+#timeline.timeline-right .timeline-item > .timeline-badge > span i {
+    color: rgb(255 255 255);
+    display: block;
+    font-size: 1.6rem;
+    line-height: 40px;
+    top: 0;
+}
+
+#timeline.timeline-right .timeline-item > .timeline-badge > span:active {
+    transform: scale(1.1);
+}
+
+#timeline.timeline-right .timeline-item > .timeline-badge > span:focus {
+    transform: scale(1.1);
+}
+
+#timeline.timeline-right .timeline-item > .timeline-badge > span:hover {
+    transform: scale(1.1);
+}
+
+#timeline.timeline-right .timeline-item > .timeline-badge > a.active {
+    transform: scale(1.1);
+}
+
+#timeline.timeline-right .timeline-item > .timeline-panel {
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(221 221 221);
+    border-radius: 4px;
+    position: relative;
+}
+
+#timeline.timeline-right .timeline-item > .timeline-panel:hover .timeline-actions {
+    display: block;
+}
+
+#timeline.timeline-right .timeline-item.block:nth-child(even)::before {
+    left: auto;
+    right: 8px;
+}
+
+#timeline.timeline-right .timeline-item.block:nth-child(even)::after {
+    left: auto;
+    right: 11px;
+}
+
+#timeline.timeline-right .timeline-item.block:nth-child(odd)::after {
+    right: auto;
+}
+
+#timeline.timeline-left .timeline-line {
+    background-color: rgb(221 221 221);
+    bottom: 0;
+    display: inline-block;
+    left: 12px;
+    position: absolute;
+    top: 0;
+    transform: translate(-50%, 0);
+    width: 4px;
+}
+
+#timeline.timeline-left .timeline-group {
+    text-align: left;
+}
+
+#timeline.timeline-left .timeline-item {
+    display: inline-block;
+    padding: 0 0 35px 43px;
+    position: relative;
+    width: 100%;
+}
+
+#timeline.timeline-left .timeline-item::after {
+    border-bottom: 11px solid transparent;
+    border-right: 11px solid rgb(255 255 255);
+    border-top: 11px solid transparent;
+    content: '';
+    height: 0;
+    left: 33px;
+    position: absolute;
+    top: 21px;
+    width: 0;
+    z-index: 1;
+}
+
+#timeline.timeline-left .timeline-item::before {
+    border-bottom: 12px solid transparent;
+    border-right: 12px solid rgb(221 221 221);
+    border-top: 12px solid transparent;
+    content: '';
+    height: 0;
+    left: 32px;
+    position: absolute;
+    top: 20px;
+    width: 0;
+    z-index: 1;
+}
+
+#timeline.timeline-left .timeline-item > .timeline-badge {
+    left: -8px;
+}
+
+#timeline.timeline-left .timeline-item > .timeline-badge {
+    position: absolute;
+    top: 12px;
+    z-index: 1;
+}
+
+#timeline.timeline-left .timeline-item > .timeline-badge > span {
+    border-radius: 50%;
+    display: inline-block;
+    height: 40px;
+    text-align: center;
+    text-decoration: none;
+    transition: all ease 0.3s;
+    width: 40px;
+}
+
+#timeline.timeline-left .timeline-item > .timeline-badge > span i {
+    color: rgb(255 255 255);
+    display: block;
+    font-size: 1.6rem;
+    line-height: 40px;
+    top: 0;
+}
+
+#timeline.timeline-left .timeline-item > .timeline-badge > span:active {
+    transform: scale(1.1);
+}
+
+#timeline.timeline-left .timeline-item > .timeline-badge > span:focus {
+    transform: scale(1.1);
+}
+
+#timeline.timeline-left .timeline-item > .timeline-badge > span:hover {
+    transform: scale(1.1);
+}
+
+#timeline.timeline-left .timeline-item > .timeline-badge > a.active {
+    transform: scale(1.1);
+}
+
+#timeline.timeline-left .timeline-item > .timeline-panel {
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(221 221 221);
+    border-radius: 4px;
+    position: relative;
+}
+
+#timeline.timeline-left .timeline-item > .timeline-panel:hover .timeline-actions {
+    display: block;
+}
+
+#timeline .timeline-item.block:nth-child(even) {
+    margin-top: 5px;
+    width: 100% !important;
+}
+
+#timeline .timeline-item.block:nth-child(even)::after {
+    border: 0;
+    border-bottom: 11px solid rgb(255 255 255);
+    border-left: 11px solid transparent;
+    border-right: 11px solid transparent;
+    left: 50%;
+    right: auto;
+    top: 8px;
+    transform: translate(-50%, 0);
+}
+
+#timeline .timeline-item.block:nth-child(even)::before {
+    border: 0;
+    border-bottom: 12px solid rgb(221 221 221);
+    border-left: 12px solid transparent;
+    border-right: 12px solid transparent;
+    left: 50%;
+    right: auto;
+    top: 7px;
+    transform: translate(-50%, 0);
+}
+
+#timeline .timeline-item.block:nth-child(even) > .timeline-badge {
+    left: 50%;
+    right: auto;
+    top: -28px;
+    transform: translate(-50%, 0);
+}
+
+#timeline .timeline-item.block:nth-child(odd) {
+    margin-top: 5px;
+    width: 100% !important;
+}
+
+#timeline .timeline-item.block:nth-child(odd)::after {
+    border: 0;
+    border-bottom: 11px solid rgb(255 255 255);
+    border-left: 11px solid transparent;
+    border-right: 11px solid transparent;
+    left: 50%;
+    right: auto;
+    top: -10px;
+    transform: translate(-50%, 0);
+}
+
+#timeline .timeline-item.block:nth-child(odd)::before {
+    border: 0;
+    border-bottom: 12px solid rgb(221 221 221);
+    border-left: 12px solid transparent;
+    border-right: 12px solid transparent;
+    left: 50%;
+    right: auto;
+    top: -11px;
+    transform: translate(-50%, 0);
+}
+
+#timeline .timeline-item.block:nth-child(odd) > .timeline-badge {
+    left: 50%;
+    right: auto;
+    top: -28px;
+    transform: translate(-50%, 0);
+}
+
+.timeline-actions {
+    display: none;
+}
+
+.timeline-content {
+    padding: 15px;
+}
+
+.timeline-footer {
+    background-color: rgb(251 252 252);
+    border-radius: 0 0 5px 5px;
+    border-top: 1px solid rgb(238 238 238);
+    padding: 15px;
+}
+
+.timeline-heading {
+    font-size: 20px;
+    padding: 15px;
+}
+
+.timeline-liveliness {
+    background-color: rgb(251 252 252);
+    border-top: 1px solid rgb(238 238 238);
+    padding: 15px;
+}
+
+.timeline-heading + .timeline-content {
+    padding-top: 0;
+}
+
+.timeline-date {
+    color: rgb(170 170 170);
+    font-size: 14px;
+}
+
+.timeline-embed {
+    height: 0;
+    padding-bottom: 56.25%;
+    padding-top: 25px;
+    position: relative;
+}
+
+.timeline-embed .embed-element {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+
+.timeline-embed embed {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+
+.timeline-embed iframe {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+
+.timeline-embed object {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+
+.timeline-img {
+    display: block;
+    padding: 5px 0;
+}
+
+.timeline-img.first {
+    margin-right: -10px;
+}
+
+.timeline-img.middle {
+    margin-left: -10px;
+    margin-right: -10px;
+}
+
+.timeline-img.last {
+    margin-left: -10px;
+}
+
+.timeline-resume {
+    background-color: rgb(251 252 252);
+    border-top: 1px solid rgb(238 238 238);
+}
+
+.timeline-avatar {
+    margin-right: 10px;
+    margin-top: -2px;
+}
+
+.timeline-title {
+    color: rgb(62 87 113);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.42857;
+    margin: 0;
+    padding: 0;
+    text-decoration: none;
+}
+
+.timeline-title > small {
+    color: rgb(161 170 176);
+    display: block;
+    font-size: 12px;
+    line-height: 1.5;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.wrapkit-content-rtl .timeline-avatar {
+    margin-left: 10px;
+    margin-right: 0;
+}
+
+@media (min-width: 992px) {
+    .timeline-item:nth-child(even) {
+        padding: 0 35px 50px 0;
+    }
+
+    .timeline-item:nth-child(odd) {
+        padding: 0 0 50px 35px;
+    }
+
+    .timeline-item.block {
+        padding-right: 0 !important;
+    }
+}
+
+@media (max-width: 991px) {
+    .timeline {
+        padding-left: 15px;
+    }
+
+    .timeline-line {
+        left: 15px;
+    }
+
+    .timeline-group {
+        display: inline-block;
+        margin-left: -22px;
+    }
+
+    .timeline-item {
+        margin-top: 0 !important;
+        padding-right: 10px;
+        width: 100% !important;
+    }
+
+    .timeline-item:nth-child(even)::after {
+        border: 0;
+        border-bottom: 11px solid transparent;
+        border-right: 11px solid rgb(255 255 255);
+        border-top: 11px solid transparent;
+        left: 40px;
+        top: 21px;
+        transform: translate(0, 0);
+    }
+
+    .timeline-item:nth-child(even)::before {
+        border: 0;
+        border-bottom: 12px solid transparent;
+        border-right: 12px solid rgb(221 221 221);
+        border-top: 12px solid transparent;
+        left: 39px;
+        top: 20px;
+        transform: translate(0, 0);
+    }
+
+    .timeline-item:nth-child(even) > .timeline-badge {
+        left: -20px;
+        right: auto;
+        top: 12px;
+        transform: translate(0, 0);
+    }
+
+    .timeline-item:nth-child(odd)::after {
+        border: 0;
+        border-bottom: 11px solid transparent;
+        border-right: 11px solid rgb(255 255 255);
+        border-top: 11px solid transparent;
+        left: 40px;
+        top: 21px;
+        transform: translate(0, 0);
+    }
+
+    .timeline-item:nth-child(odd)::before {
+        border: 0;
+        border-bottom: 12px solid transparent;
+        border-right: 12px solid rgb(221 221 221);
+        border-top: 12px solid transparent;
+        left: 39px;
+        top: 20px;
+        transform: translate(0, 0);
+    }
+
+    .timeline-item:nth-child(odd) > .timeline-badge {
+        left: -20px;
+        right: auto;
+        top: 12px;
+        transform: translate(0, 0);
+    }
+
+    .timeline-item.block:nth-child(even) {
+        padding-bottom: 0;
+    }
+
+    .timeline-item.block:nth-child(even)::after {
+        border: 0;
+        border-bottom: 11px solid transparent;
+        border-right: 11px solid rgb(255 255 255);
+        border-top: 11px solid transparent;
+        left: 20px;
+        top: 11px;
+        transform: translate(0, 0);
+    }
+
+    .timeline-item.block:nth-child(even)::before {
+        border: 0;
+        border-bottom: 12px solid transparent;
+        border-right: 12px solid rgb(221 221 221);
+        border-top: 12px solid transparent;
+        left: 19px;
+        top: 10px;
+        transform: translate(0, 0);
+    }
+
+    .timeline-item.block:nth-child(even) > .timeline-badge {
+        left: -6px;
+        right: auto;
+        top: 12px;
+        transform: translate(0, 0);
+    }
+
+    .timeline-item.block:nth-child(odd) {
+        padding-bottom: 0;
+    }
+
+    .timeline-item.block:nth-child(odd)::after {
+        border: 0;
+        border-bottom: 11px solid transparent;
+        border-right: 11px solid rgb(255 255 255);
+        border-top: 11px solid transparent;
+        left: 20px;
+        top: 11px;
+        transform: translate(0, 0);
+    }
+
+    .timeline-item.block:nth-child(odd)::before {
+        border: 0;
+        border-bottom: 12px solid transparent;
+        border-right: 12px solid rgb(221 221 221);
+        border-top: 12px solid transparent;
+        left: 19px;
+        top: 10px;
+        transform: translate(0, 0);
+    }
+
+    .timeline-item.block:nth-child(odd) > .timeline-badge {
+        left: -6px;
+        right: auto;
+        top: 12px;
+        transform: translate(0, 0);
+    }
+}
+
+@media (max-width: 991px) {
+    #timeline.timeline-center .timeline {
+        padding: 0;
+    }
+
+    #timeline.timeline-center .timeline .card-block {
+        text-align: left;
+    }
+
+    #timeline.timeline-center .timeline-line {
+        background-color: rgb(221 221 221);
+        bottom: 0;
+        display: inline-block;
+        left: 50%;
+        position: absolute;
+        top: 0;
+        transform: translate(-50%, 0);
+        width: 4px;
+    }
+
+    #timeline.timeline-center .timeline-group {
+        display: block;
+        margin-left: -6px;
+        text-align: center;
+    }
+
+    #timeline.timeline-center .timeline-item {
+        display: block;
+        padding: 20px 0 !important;
+    }
+
+    #timeline.timeline-center .timeline-item:nth-child(even) {
+        clear: both;
+        float: none;
+    }
+
+    #timeline.timeline-center .timeline-item:nth-child(even)::after {
+        display: none;
+    }
+
+    #timeline.timeline-center .timeline-item:nth-child(even)::before {
+        display: none;
+    }
+
+    #timeline.timeline-center .timeline-item:nth-child(odd) {
+        clear: both;
+        float: none;
+    }
+
+    #timeline.timeline-center .timeline-item:nth-child(odd)::after {
+        display: none;
+    }
+
+    #timeline.timeline-center .timeline-item:nth-child(odd)::before {
+        display: none;
+    }
+
+    #timeline.timeline-center .timeline-item > .timeline-badge {
+        left: 47% !important;
+        top: 0 !important;
+    }
+
+    #timeline.timeline-center .timeline-item.block:nth-child(even) {
+        clear: both;
+        float: none;
+    }
+
+    #timeline.timeline-center .timeline-item.block:nth-child(even)::after {
+        display: none;
+    }
+
+    #timeline.timeline-center .timeline-item.block:nth-child(even)::before {
+        display: none;
+    }
+
+    #timeline.timeline-center .timeline-item.block:nth-child(odd) {
+        clear: both;
+        float: none;
+    }
+
+    #timeline.timeline-center .timeline-item.block:nth-child(odd)::after {
+        display: none;
+    }
+
+    #timeline.timeline-center .timeline-item.block:nth-child(odd)::before {
+        display: none;
+    }
+
+    #timeline.timeline-center .timeline-item.timeline-poster > .timeline-badge {
+        display: none;
+    }
+}
+
+@media (max-width: 543px) {
+    .timeline-item > .timeline-badge {
+        left: 44% !important;
+        top: 0 !important;
+    }
+}
+
+.avatar img {
+    border: 0;
+    border-radius: 1000px;
+}