/* ----  Timeline ---- */
#timeline-wrap {
    margin: 0;
    width: 100%;
    background-color: #dfdfdf;
    padding: 20px;
    border-radius: 10px;
}
    
.timeline {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background-repeat: repeat-x;
    background-size: 315% 4px; /* draws line */
    background-position: center top 56%;
    background-image: -webkit-gradient(linear,left top,right top,color-stop(66%,#000),color-stop(0,transparent));
    background-image: linear-gradient(90deg,#000 66%,transparent 0);
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    transition: height .2s ease-out;
    height: 130px; /* if too small, it adds a scroll bar */
}

.timeline-title {
    font-family: 'Merriweather', serif;
    font-size: 30px;
    color: black;
    font-weight: 600;
    margin: 0;
    padding: 0;
}

.timeline-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    flex-flow: column wrap;
    -webkit-transition: max-width .2s,-webkit-transform .4s ease-out;
    transition: max-width .2s,-webkit-transform .4s ease-out;
    transition: max-width .2s,transform .4s ease-out;
    transition: max-width .2s,transform .4s ease-out,-webkit-transform .4s ease-out;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.timeline-content { 
    margin: 0;
    width: 100%;
}

.timeline-content-card {
    min-height: 200px;
    width: 100%;
    margin: 0;
}

.timeline h4 {
    margin: 0;
}
.timeline-content-title {
    font-family: 'Merriweather', serif;
    font-weight: 600;
    font-size: 20px;
    color: black;
    margin: 0;
}
.timeline-content-date {
    font-family: 'Merriweather', serif;
    font-weight: 600;
    font-size: 18px;
    color: black;
    margin: 0px 0;
    font-style: italic;
}
.timeline-content-card p {
    font-family: 'Merriweather', serif;
    font-weight: 400;
    font-size: 18px;
    color: black;
    margin: 20px 0 0 0;
}

.point-circle {
    width: 30px;
    height: 30px;
    border: solid 4px black;
    border-radius: 50%;
    background-color: #a7d3dc; /* point color */
    margin-bottom: 26px; /* dot in relation to line */
    transition: background-color 0.2s ease;
}
.point-circle:hover, .point-circle-active {
    background-color: var(--pm-blue);
}

.p-timeline-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    flex-wrap: wrap;
    min-width: 60px;
    text-align: center;
    transition: color .2s ease-in-out;
    transition: transform .2s ease;
    margin-top: 16px;
}
.p-timeline-item:hover {
    transform: scale(1.1); 
    transition: transform .2s ease;
}
.p-timeline-item h4 {
    font-family: 'Merriweather', serif;
    font-weight: 600;
    font-size: 16px;
    color: black;
    margin: 3px;
}

.p-timeline-content {
    width: 98%;
    position: absolute;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-1000px);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    padding: 0;
}
.i-is-active.p-timeline-content{
    color: #000;
    height: auto;
    padding: 0;
    float: left;
    width: 98%;
    text-align: left;
    position: relative;
    visibility: visible;
    opacity: 1;
    transform: translateX(0px);
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.i-is-active.p-timeline-item:hover{transform: none;}
.i-is-active .p-timeline-item{transform:scale(1.2);} /* grow on active */

/* ---- Mobile Vertical Timeline ---- */

#vertical-timeline {
    position: relative; 
    padding-left: 43px; /* "reserve space" for vertical line */
    margin: 40px 0vw;
}
#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;
}
p.date {font-weight: 700;}

.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: var(--pm-blue); /* 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) {
    #timeline-wrap {display: none;}
	#timeline_mobile {display: block;}
}

/* Medium devices (tablets, laptops) */
@media (min-width: 750px) { 
    #timeline-wrap {display: block;}
	#timeline_mobile {display: none;}
}
 
/* Large devices (desktops) */
@media (min-width: 1400px) { 
    #timeline-wrap {display: block;}
	#timeline_mobile {display: none;}
}