/* ==========================================
   EXPERIENCE
========================================== */

.timeline{

    position:relative;

    max-width:850px;

    margin:70px auto 0;

}

.timeline::before{

    content:"";

    position:absolute;

    left:20px;

    top:0;

    width:3px;

    height:100%;

    background:rgba(255,45,85,.3);

}

.timeline-item{

    position:relative;

    padding-left:70px;

    margin-bottom:60px;

}

.timeline-dot{

    position:absolute;

    left:10px;

    top:20px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:var(--clr-primary);

    border:4px solid var(--clr-bg);

    box-shadow:0 0 20px rgba(255,45,85,.5);

}

.timeline-content{

    padding:30px;

    transition:.35s;

}

.timeline-content:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-red-lg);

}

.timeline-date{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(255,45,85,.15);

    color:var(--clr-primary);

    margin-bottom:18px;

    font-weight:600;

}

.timeline-content h3{

    font-size:1.6rem;

    margin-bottom:8px;

}

.timeline-content h4{

    color:var(--clr-text-light);

    margin-bottom:18px;

}

.timeline-content p{

    color:var(--clr-text);

    line-height:1.8;

}

@media(max-width:768px){

    .timeline{

        margin-left:15px;

    }

    .timeline-item{

        padding-left:55px;

    }

}