.Timeline {
    overflow: hidden;
    position: relative;
    margin-bottom: 2em
}
.Timeline>h4 {
    max-width: 4em;
    margin: 0 auto 1em;
    padding: 0.25em 0.5em;
    clear: both;
    text-align: center;
    font-weight: 300;
    border-radius: 0.25em
}
.Timeline .Timeline-yearEvents {
    padding: 0;
    list-style: outside none;
    overflow: hidden
}
.Timeline .Timeline-yearEvents>li {
    padding: 2%;
    border-radius: 8px;
    margin: 0 0 1em 1em;
    position: relative
}
.Timeline .Timeline-yearEvents>li:last-child {
    margin-bottom: 1.75em
}
.Timeline .Timeline-yearEvents>li:before {
    content: "";
    position: absolute;
    left: -0.75em;
    top: 0.5em;
    z-index: 100
}
.Timeline--light {
    background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #222), color-stop(0.9%, #222), color-stop(1%, transparent));
    background-image: -webkit-linear-gradient(left, #222 0%, #222 0.9%, transparent 1%);
    background-image: -moz-linear-gradient(left, #222 0%, #222 0.9%, transparent 1%);
    background-image: linear-gradient(left, #222222 0%, #222222 0.9%, transparent 1%)
}
.Timeline--light .Timeline-yearEvents>li {
    color: #222;
    background-color: #ddd
}
.Timeline--light .Timeline-yearEvents>li:before {
    border-left: 6px solid transparent;
    border-right: 6px solid #ddd;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent
}
.Timeline--light>h4 {
    color: #222;
    background-color: #ddd;
    border: 0.35em solid #222
}

.Timeline--dark {
    background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ddd), color-stop(0.9%, #ddd), color-stop(1%, transparent));
    background-image: -webkit-linear-gradient(left, #ddd 0%, #ddd 0.9%, transparent 1%);
    background-image: -moz-linear-gradient(left, #ddd 0%, #ddd 0.9%, transparent 1%);
    background-image: linear-gradient(left, #dddddd 0%, #dddddd 0.9%, transparent 1%)
}
.Timeline--dark .Timeline-yearEvents>li {
    color: #ddd;
    background-color: #333
}
.Timeline--dark .Timeline-yearEvents>li:before {
    border-left: 6px solid transparent;
    border-right: 6px solid #333;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent
}
.Timeline--dark>h4 {
    color: #ddd;
    background-color: #87929D;
    border: 0.35em solid #ddd
}

.Timeline--kkk {
    background: #DDD;
    background: linear-gradient(180deg, #DDD, #DDD, #DDD);
    background-position: 1%;
    background-repeat: repeat-y;
    background-size: 1px auto;
}
.Timeline--kkk .Timeline-yearEvents>li {
	font-size: 16px;
    color: #ddd;
    background-color: #87929D;
}
.Timeline--kkk .Timeline-yearEvents>li:before {
    border-left: 6px solid transparent;
    border-right: 6px solid #87929D;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent
}
.Timeline--kkk>h4 {
    color: #333;
    background-color: #E8F0F7;
    font-weight: 700;
}


@media only screen and (min-width: 45em) {
    .Timeline--light {
        background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, transparent), color-stop(49.59%, transparent), color-stop(49.6%, #222), color-stop(49.9%, #222), color-stop(50%, transparent));
        background-image: -webkit-linear-gradient(left, transparent 0%, transparent 49.59%, #222 49.6%, #222 49.9%, transparent 50%);
        background-image: -moz-linear-gradient(left, transparent 0%, transparent 49.59%, #222 49.6%, #222 49.9%, transparent 50%);
        background-image: linear-gradient(left, transparent 0%, transparent 49.59%, #222222 49.6%, #222222 49.9%, transparent 50%)
    }
    .Timeline--light .Timeline-yearEvents>li:nth-of-type(odd):before {
        content: "";
        left: auto;
        right: -0.75em;
        border-left: 6px solid #ddd;
        border-right: 6px solid transparent;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent
    }
    .Timeline--dark {
        background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, transparent), color-stop(49.59%, transparent), color-stop(49.6%, #ddd), color-stop(49.9%, #ddd), color-stop(50%, transparent));
        background-image: -webkit-linear-gradient(left, transparent 0%, transparent 49.59%, #ddd 49.6%, #ddd 49.9%, transparent 50%);
        background-image: -moz-linear-gradient(left, transparent 0%, transparent 49.59%, #ddd 49.6%, #ddd 49.9%, transparent 50%);
        background-image: linear-gradient(left, transparent 0%, transparent 49.59%, #dddddd 49.6%, #dddddd 49.9%, transparent 50%)
    }
    .Timeline--dark .Timeline-yearEvents>li:nth-of-type(odd):before {
        content: "";
        left: auto;
        right: -0.75em;
        border-left: 6px solid #333;
        border-right: 6px solid transparent;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent
    }
    .Timeline--kkk {
        background: #DDD;
        background: linear-gradient(180deg, #DDD, #DDD, #DDD);
        background-position: 50%;
        background-repeat: repeat-y;
        background-size: 2px auto;
    }
    .Timeline--kkk .Timeline-yearEvents>li:nth-of-type(odd):not(.right):before {
        content: "";
        left: auto;
        right: -0.75em;
        border-left: 6px solid #87929D;
        border-right: 6px solid transparent;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent
    }
    .Timeline .Timeline-yearEvents>li {
        width: 44%;
        margin: 0 0 1em 0
    }
    .Timeline .Timeline-yearEvents>li:nth-of-type(odd) {
        float: left
    }
    .Timeline .Timeline-yearEvents>li:nth-of-type(even), .Timeline .Timeline-yearEvents>li.right {
        float: right;
        margin-top: 2%
    }
    .Timeline .Timeline-yearEvents>li:nth-of-type(2n+1) {
        clear: both
    }
	
    .Timeline .Timeline-yearEvents>li.force-right {
        float: right;
        margin-top: 2%
    }

}