/* BARRES COLORÉES */
.AP-darkBlue, .AP-lightBlue, .AP-line{ width:7px; height:50px; position:absolute; left:20vw; }
.AP-darkBlue{ background:#175681; }
.AP-lightBlue{ background:#1D9BF0; }
.AP-line{ background:#1D9BF0; top:0; }
.AP-1{ margin-top:-60vh; border-radius:5px 5px 0 0; }
.AP-2{ margin-top:-50vh; }
.AP-3{ margin-top:-40vh; }
.AP-4{ margin-top:-30vh; }
.AP-5{ margin-top:-20vh; }
.AP-6{ margin-top:-10vh; }
.AP-7{ margin-top:-50vh; }

/* CERCLES & TEXTES */
.AP-circle{ width:45px; height:45px; background:#fff; border-radius:50%; border:7px solid #1D9BF0; position:absolute; left:20vw; transform:translate(-18.5px,0); }
.AP-title{ position:absolute; left:30vw; font-size:30px; letter-spacing:2px; }
.AP-title a{ color:#fff; text-decoration:none; line-height:45px; }
.AP-subtitle{ color:#999; font-size:15px; letter-spacing:2px; cursor:default; }
@media(max-width:475px){ .AP-title{ font-size:20px; } .AP-subtitle{ font-size:12px; }}
@media(max-width:370px){ .AP-title{ font-size:15px; left:35vw; } .AP-subtitle{ font-size:9px; }}

.timeline{ position:relative; margin-top:50vh; }
.AP-time-list{ padding-top:50vh; display:grid; grid-auto-rows:100vh; }
.AP-time-wrapper{ position:relative; width:100%; }