.visual-timeline {
	position:relative;
}

.visual-timeline:after {
	content:"";
	display:block;
	top:0;
	left:50px;
	width:5px;
	background:#000;
	height:100%;
	position:absolute;
	z-index:0;
}

.timeline-entry {
    position: relative;
    margin: 0 0 8vh 0;
	display:grid;
	grid-template-columns:150px 300px 1fr;
	align-items:center;
}

.timeline-entry h2 {
	width:100px;
	height:100px;
	border-radius:100%;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#000;
	color:#fff;
	font-size:1rem;
	align-self:center;
	z-index:1;
	transform:scale(.7);
	transition:1s ease;
	opacity:0;
}

.timeline-entry:first-child h2 {
	align-self:start;
	opacity:1;
	transform:scale(1);
}
.timeline-entry:last-child h2 {
	align-self:end;
}

.timeline-entry.timeline-active h2 {
	opacity:1;
	transform:scale(1);
	transition:1s ease;
}

.timeline-entry img {
	border-radius:10px;
	max-width:100%;
	width:100%;
	height:auto;
	ratio:1/1;
	opacity:0;
	transform:translateX(1rem);
	transition:1s .5s ease;	
}

.timeline-entry.timeline-active img {
	opacity:1;
	transform:translateX(0);
	transition:1s .25s ease;
}


.timeline-entry p {
    display: block;
	opacity:0;
	transform:translateX(1rem);
	transition:1s .7s ease;
	padding:2rem;
	align-self:center;
}
.timeline-entry.timeline-active p {
    display: block;
	opacity:1;
	transform:translateX(0);
	transition:1s .5s ease;
}

.timeline {
    display: flex;
    align-items: center;
}

.dots {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.dot {
    width: 20px;
    height: 20px;
    border: 2px solid #000;
    border-radius: 50%;
    background-color: #fff;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.dot:hover {
    background-color: #f0f0f0;
}



/* ======================================= */
@media only screen and (max-width : 1280px) {
/* ======================================= */






.visual-timeline:after {
	left:35px;
}

.timeline-entry {
	grid-template-columns:100px 1fr;
	align-items:center;
	margin-bottom:5vh;
}
.timeline-entry img {
	max-width:300px;
	width:100%;
	height:auto;
}
.timeline-entry h2 {
	width:70px;
	height:70px;
	font-size:13px !Important;
	left:0px;
}
.timeline-entry p {
	grid-column:span 2;
	padding-left:100px;
}




}