/* ------------------  Timeline Section ------------------ */

#vertical-timeline {
    position: relative; 
    padding-left: 43px; /* "reserve space" for vertical line */
}
#vertical-timeline::before, .vtl-event::before, .vtl-event::after { position: absolute; } 

/* vertical line */
#vertical-timeline::before {
    content: ""; 
    width: 4px;
    background: #a9a9a9;
    top: 0; bottom: 0; left: 9px;
}

.vtl-event {
    position: relative; 
    padding: 5px; margin-bottom: 10px; border-radius: 5px;
    background: #dfdfdf; /* event box color */
}
.vtl-event p {
    padding: 0; 
    margin: 0;
    font-family: 'Merriweather', serif;
    font-size: 18px;
    color: black;
    font-weight: 400;
}

.vtl-event::before {
    /* triangle*/
    content: "";
    border: 10px solid transparent; 
    border-right-color: #dfdfdf; /* triangle color */
    border-left: 0;
    top: 20%; left: -10px;
}
  
/* dot on vertical line */
.vtl-event::after {
    content: ""; width: 16px; height: 16px; border-radius: 50%;
    border: 4px solid black; /* dot color */
    background: #8a9964; /* dot background color */
    top: 20%; left: -44px;
}

.vtl-event::before {
    /* triangle*/
    content: "";
    border: 10px solid transparent; 
    border-right-color: #dfdfdf; /* triangle color */
    border-left: 0;
    top: 20%; left: -10px;
}


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

/* Small devices (phones) */
@media (max-width: 750px) {
    #vertical-timeline {margin: 40px 0vw;}
}

/* Medium devices (tablets, laptops) */
@media (min-width: 750px) { 
    #vertical-timeline {margin: 40px 10vw;}
}
 
/* Large devices (desktops) */
@media (min-width: 1400px) { 
    #vertical-timeline {margin: 40px 10vw;}
}