time {
    font-family: 'Fredoka One',
        cursive,
        Arial;
}

.aboutpage-feedback-area {
    background: #f9f9ff !important;
}

/*-------- Start Skillbar Style  -------------*/
.single-skill p {
    margin-top: 30px;
    margin-bottom: 5px;
    text-align: right;
}

.sb_progress {
    height: 14px !important;
    border-radius: 12px;
    border: 3px solid rgb(105, 97, 97);
}

.sb_bar {
    height: 8px !important;
    border-radius: 12px;
}

/*--------  End Skillbar Style  -------------*/
.timeline ul li {
    background-color: #76dac9;
    position: relative;
    margin: 0 auto;
    width: 4px;
    padding-bottom: 40px;
    list-style-type: none;
}

.timeline ul li:last-child {
    padding-bottom: 7px;
}

.timeline ul li:before {
    content: '';
    background: #8490ff;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border: 5px solid #eee;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.timeline ul li .hidden {
    opacity: 0.8;
}

.timeline ul li .content {
    background-color: white !important;
    box-shadow: 0px 10px 27px 3px rgba(204, 204, 204, 0.2);
    position: relative;
    top: 7px;
    width: 360px;
    padding: 30px;
}

.timeline ul li .content:hover {
    -webkit-box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
}

.timeline ul li .content h4 {
    padding-bottom: 10px;
    text-align: center;
}

.timeline ul li .content p {
    text-align: center;
    margin-bottom: 5px;
}

.timeline ul li .content p b {
    color: #222;
}

.timeline ul li:nth-child(odd) .content {
    left: 50px;
}

.timeline ul li:nth-child(odd) .content:before {
    left: -38px;
}

.timeline ul li:nth-child(even) .content {
    left: calc(-360px - 45px);
}

.timeline ul li:nth-child(even) .content:before {
    right: -38px;
}

 /*  ----- Media Queries -----  */

@media screen and (max-width: 1020px) {
    .timeline ul li .content {
        width: 31vw;
    }

    .timeline ul li:nth-child(even) .content {
        left: calc(-41vw - 45px);
    }
}

@media screen and (max-width: 700px) {
    .timeline ul li {
        margin-left: 20px;
    }

    .timeline ul li .content {
        width: calc(100vw - 100px);
    }

    .timeline ul li .content h2 {
        text-align: initial;
    }

    .timeline ul li:nth-child(even) .content {
        left: 45px;
    }

    .timeline ul li:nth-child(even) .content:before {
        left: -33px;
    }
    
    
}

@media screen and (max-width: 600px) {

    .timeline ul li {
        margin-left: 5px;
    }

    .timeline ul li .content {
        width: calc(70vw - 100px);
    }

    .timeline ul li .content h2 {
        text-align: initial;
    }

    .timeline ul li:nth-child(even) .content {
        left: 25px;
    }

    .timeline ul li:nth-child(even) .content:before {
        left: -43px;
    }
}