body{
    margin: 0;
    font-family: sans-serif;
    background: 
    url(../images/openserve-background.jpg)
    no-repeat center fixed;
    background-size: cover;
    color: #fff;
    padding: 2em;
}

.article-link{
    text-decoration: none;
    color: #0b5803;
    display: inline-block;
    font-weight: bold;
    font-size: 1.2em;

}

.article-link:hover{
    color: #ccc;
}

.vuma-bg{
    margin: 0;
    font-family: sans-serif;
    background: 
    url(../images/vumatel-background.jpg)
    no-repeat center fixed;
    background-size: cover;
    color: #fff;
    padding: 2em;
}

body::before{
    content: '';
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: fixed;
}

*{
    margin: 0;
    padding: 0;
}

h1{
    margin: 0.3em;
    font-size: 3em;
}

h2{
    margin-bottom: 0.5em;
}

.title{
    text-align: center;
}

.title p{
    color: #0e8030;
    font-size: 1.3em;
    letter-spacing: 2px;
}

.title .vuma{
    color: #b810b8;
    font-size: 1.3em;
    letter-spacing: 2px;
}

.timeline{
    margin: 5em auto;
    max-width: 34.15em;
}

.checkpoint{
    max-width: 34em;
    padding-top: 2em;
    padding-bottom: 2em;
    position: relative;
}

.checkpoint div{
    border: 2px solid #888;
    border-radius: 1em;
    padding: 1.5em;
}

.checkpoint p{
    line-height: 27px;
    color: #ccc;
}

.checkpoint:nth-child(odd){
    border-left: 3px solid #888;
    padding-left: 3em;
    transform: translateX(17em);
}

.checkpoint:nth-child(even){
    border-right: 3px solid #888;
    padding-right: 3em;
    transform: translateX(-17em);
}

.checkpoint:nth-child(odd)::before,
.checkpoint:nth-child(even)::before{
    content: '';
    background: #888;
    width: 3em;
    height: 3px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.checkpoint:nth-child(odd)::before{
    left: 0;
}

.checkpoint:nth-child(even)::before{
    right: 0;
}

.checkpoint:nth-child(odd) div::before,
.checkpoint:nth-child(even) div::before{
    content: '';
    background: #dbc4c4;
    box-shadow: 0 0 0.5em #099605;
    width: 0.8em;
    height: 0.8em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    transition: .3s;
    animation: checkpoint 3s infinite;
}

/* Dots Animation */
@keyframes checkpoint{
    0%{
        box-shadow: 0 0 0.5em #099605;
    }
    50%{
        box-shadow: 0 0 1em #099605;
    }
}

.checkpoint:nth-child(odd) div::before{
    left: -0.5em;
}

.checkpoint:nth-child(even) div::before{
    right: -0.5em;
}


p, small{
    color: #8f8f8f;
}

.bp{
    font-size: 0.9rem;
    line-height: 23px;
}

.by { margin: 0; }

.skewed{
    width: 45em;
    color: #f1f1f1;
    display: flex;
    background: #111;
    margin: 2em 0;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
}


/* Responsive Design */
@media screen and (max-width: 1150px){
    .timeline{
        width: 80vw;
    }
    .timeline .checkpoint{
        width: 100%;
        transform: none;
        padding-left: 0;
        padding-right: 0;
        border: none;
    }
    .timeline .checkpoint::before{
        width: 3px;
        height: 4em;
        top: -2em;
        left: 50%;
        transform: translateX(-50%);
    }
    .timeline .checkpoint div::before{
        top: -0.5em;
        left: 50%;
        transform: translateX(-50%);
    }
}