@import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@400;800&display=swap');
/*——————————————
Global
———————————————*/
body {
}
/*——————————————
TimeLine CSS
———————————————*/
/* Base */
#content {
margin-top: 50px;
text-align: center;
}
section.timeline-outer {
width: 80%;
margin: 0 auto;
}
h1.header {
font-size: 50px;
line-height: 70px;
}
/* Timeline */
.timeline {
border-left: 2px solid #F68921;
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
color: #333;
margin: 30px 100px;
margin-right:0;
letter-spacing: 0.5px;
position: relative;
line-height: 1.4em;
padding: 20px;
list-style: none;
text-align: left;
}
.timeline h1, .timeline h2, .timeline h3 {
font-size: 1.4em;
}
.timeline .event {
border-bottom: 1px solid rgba(160, 160, 160, 0.2);
padding-bottom: 15px;
margin-bottom: 20px;
position: relative;
}
.timeline .event:last-of-type {
padding-bottom: 0;
margin-bottom: 0;
border: none;
}
.timeline .event:before, .timeline .event:after {
position: absolute;
display: block;
top: 0;
}
.timeline .event:before {
left: -177.5px;
color: #F68921;
content: attr(data-date);
text-align: right;
font-weight: 700;
font-size: 16px;
min-width: 120px;
}
.timeline .event:after {
box-shadow: 0 0 0 2px #F68921;
left: -27px;
background: #FFF;
border-radius: 50%;
height: 11px;
width: 11px;
content: "";
top: 5px;
}
.timeline h2 {
font-family: 'Darker Grotesque', sans-serif;
color:#F68921;
font-size:16px!important;
font-weight:600;
}
.timeline h3 {
font-family: 'Darker Grotesque', sans-serif;
color:#000;
font-size:18px!important;
font-weight:400;
}
.timeline p {
color:#222;
font-size:14px!important;
font-weight:400;
padding-bottom:10px!important;
margin-bottom:0!important;
}
/**/
/*——————————————
Responsive Stuff
———————————————*/
@media (max-width: 945px) {
.timeline .event::before {
left: 0.5px;
top: 20px;
min-width: 0;
font-size: 13px;
}
.timeline h3 {
font-size: 16px;
}
.timeline p {
padding-top: 20px;
}
section.lab h3.card-title {
padding: 5px;
font-size: 16px
}
}
@media all and (max-width : 768px) {
.timeline {
margin:20px 0;
padding: 20px;
}
.timeline .event::before {
left: 0.5px;
top:0;
min-width: 0;
font-size: 14px;
}
.timeline .event:nth-child(1)::before,  .timeline .event:nth-child(3)::before,  .timeline .event:nth-child(5)::before {
top:0;
}
.timeline h2 {
padding-top:30px!important;
}
.timeline h3 {
font-size: 16px;
}
.timeline p {
padding-top:0;
}
}
@media only screen and (min-width : 769px) and (max-width : 900px) {
.timeline {
margin:20px 0;
padding: 20px;
}
.timeline p {
padding-bottom:0 !important;
}
}
/*——————————————
others
———————————————*/
a.portfolio-link {
margin: 0 auto;
display: block;
text-align: center;
}