.ova-road-map {
	direction: ltr;
	
	h3,p {
		margin: 0;
	}

    .road-map-wrapper {
    	padding: 120px 0;

    	.timeline-column {

    		.timeline-item-left {
    			display: flex;
    			flex-wrap: nowrap;
    			justify-content: space-between;
    			position: relative;
    			&.active {
    				.timeline-info:before {
						width: 35px;
						height: 35px;
					}
					.timeline-info:after {
						width: 23px;
						height: 23px;
					}
					.timeline-image:before {
						background-color: var(--primary);
					}
					.timeline-image {
						border-top-color: var(--primary);
					}
				}
    			@media screen and (max-width: 1170px) {
    				flex-direction: column;
    			}

    			&:before {
		    		position: absolute;
		    		content: "";
		    		height: 100%;
		    		width: 0;
				    left: 50%;
		    		bottom: 0;
		    		border-left: 1px solid var(--light);
		    		@media screen and (max-width: 1170px) {
		    			left: 0;
		    		}
		    	}

		    	&:first-child {
		    		&:before {
		    			height: 125%;
		    			@media screen and (max-width: 1170px) {
			    			height: 115%;
			    		}
		    		}
		    		&:after {
		    			position: absolute;
			    		content: "";
			    		height: 11px;
			    		width: 11px;
			    		top: -92px;
					    left: 50%;
					    border-radius: 50%;
					    transform: translateX(-50%);
			    		background-color: var(--light);
			    		z-index: 9;
			    		@media screen and (max-width: 1170px) {
			    			left: 0;
			    		}
			    		@media screen and (max-width: 600px) {
			    			content: none;
			    		}
		    		}
		    	}

		    	&:not(:last-child) {
		    		padding-bottom: 90px;
		    	}

		    	&:last-child {
		    		&:before {
			    		height: 140%;
			    		top: 0;
			    	}
		    	}

		    	&:not(:first-child) {
		    		&:before {
			    		height: 128%;
			    		top: 0;
			    	}
		    	}

		    	.timeline-image {
		    		width: 50%;
		    		padding-top: 16px;
		    		border-top: 1px solid var(--light);
		    		position: relative;
	    			@media screen and (max-width: 1170px) {
	    				width: 100%;
	    				padding-left: 55px;
	    			}
		    		img {
		    			display: block;
		    			width: 490px;
		    			height: 253px;
		    			object-fit: cover;
		    			object-position: center;
		    		}

		    		&:before {
		    			position: absolute;
		    			content: "";
		    			top: 0;
		    			left: 505px;
		    			width: 1px;
		    			height: 100%;
		    			background-color: var(--light);
		    			@media screen and (max-width: 1170px) {
		    				left: 560px;
		    			}
		    			@media screen and (max-width: 600px) {
		    				left: 0;
		    				content: none;
		    			}
		    		}
		    	}

    			.timeline-info {
    				width: 50%;
    				position: relative;
    				@media screen and (max-width: 1170px) {
	    				width: 100%;
	    				padding-top: 20px;
	    			}
					.content-info {
						margin-left: 55px;
						background-color: #fff;

						.date {
	    					text-align: left;
	    					font-weight: 600;
							font-size: 14px;
							color: var(--primary);
	    				}

	    				.timeline-content {
	    					.title {
	    						font-size: 40px;
	    						font-weight: 800;
	    						line-height: 1.2;
	    					}
	    					.desc {
	    						margin-top: 35px;
	    						text-align: left;
	    						font-weight: 500;
	    					}
	    				}
					}

    				&:before {
						position: absolute;
						z-index: 1;
					    content: "";
					    left: 0;
					    top: 0;
					    transform: translate(-50%,-50%);
						width: 23px;
						height: 23px;
						background-color: var(--primary);
						border-radius: 50%;

					}

					&:after {
						position: absolute;
						z-index: 1;
					    content: "";
					    background-color: #fff;
					    border-radius: 50%;
					    left: 0;
					    top: 0;
					    transform: translate(-50%,-50%);
					    width: 11px;
					    height: 11px;
					}
    			}

    		}

    		.timeline-item-right {
    			display: flex;
    			flex-wrap: nowrap;
    			justify-content: space-between;
    			position: relative;
    			&.active {
    				.timeline-info:before {
						width: 35px;
						height: 35px;
					}
					.timeline-info:after {
						width: 23px;
						height: 23px;
					}
					.timeline-image:before {
						background-color: var(--primary);
					}
					.timeline-image {
						border-top-color: var(--primary);
					}
				}
    			@media screen and (max-width: 1170px) {
    				flex-direction: column-reverse;
    			}
    			&:before {
		    		position: absolute;
		    		content: "";
		    		height: 100%;
		    		width: 0;
				    left: 50%;
		    		bottom: 0;
		    		border-left: 1px solid var(--light);
		    		@media screen and (max-width: 1170px) {
		    			left: 0;
		    		}
		    	}

		    	&:not(:last-child) {
		    		padding-bottom: 90px;
		    	}

		    	&:last-child {
		    		&:before {
			    		height: 140%;
			    		top: 0;
			    	}
			    	&:after {
		    			position: absolute;
			    		content: "";
			    		height: 11px;
			    		width: 11px;
			    		bottom: -70px;
					    left: 50%;
					    border-radius: 50%;
					    transform: translateX(-50%);
			    		background-color: var(--light);
			    		z-index: 9;
			    		@media screen and (max-width: 1170px) {
			    			left: 0;
			    		}
			    		@media screen and (max-width: 600px) {
			    			content: none;
			    		}
		    		}
		    	}

		    	&:not(:first-child) {
		    		&:before {
			    		height: 125%;
			    		top: 0;
			    		@media screen and (max-width: 1170px) {
			    			height: 114%;
			    		}
			    	}
		    	}

		    	.timeline-image {
			    		width: 50%;
			    		padding-top: 16px;
			    		border-top: 1px solid var(--light);
			    		position: relative;
			    		@media screen and (max-width: 1170px) {
		    				width: 100%;
		    				padding-left: 55px;
		    			}
			    		img {
			    			margin-left: auto;
			    			display: block;
			    			width: 490px;
			    			height: 253px;
			    			object-fit: cover;
			    			object-position: center;
			    			@media screen and (max-width: 1170px) {
			    				margin-left: 0;
			    			}
			    		}

			    		&:before {
			    			position: absolute;
			    			content: "";
			    			top: 0;
			    			right: 505px;
			    			width: 1px;
			    			height: 100%;
			    			background-color: var(--light);
			    			@media screen and (max-width: 1170px) {
			    				right: unset;
			    				left: 560px;
			    			}
			    			@media screen and (max-width: 600px) {
		    				left: 0;
		    				content: none;
		    			}
			    		}
			    	}

    			.timeline-info {
    				width: 50%;
    				position: relative;
    				@media screen and (max-width: 1170px) {
	    				width: 100%;
	    				padding-top: 20px;
	    			}
    				.content-info {
    					margin-right: 55px;
    					@media screen and (max-width: 1170px) {
		    				margin-right: unset;
		    				margin-left: 55px;
		    			}
		    			@media screen and (max-width: 600px) {
		    				content: none;
		    			}
						.date {
	    					text-align: right;
	    					font-weight: 600;
							font-size: 14px;
							color: var(--primary);
							@media screen and (max-width: 1170px) {
			    				text-align: left;
			    			}
	    				}

	    				.timeline-content {

	    					.title {
	    						text-align: right;
	    						font-size: 40px;
	    						font-weight: 800;
	    						line-height: 1.2;
	    						@media screen and (max-width: 1170px) {
				    				text-align: left;
				    			}
	    					}
	    					.desc {
	    						margin-top: 35px;
	    						text-align: right;
	    						font-weight: 500;
	    						@media screen and (max-width: 1170px) {
				    				text-align: left;
				    			}
	    					}
	    				}
    				}

    				&:before {
						position: absolute;
						z-index: 1;
					    content: "";
					    right: 0;
					    top: 0;
					    transform: translate(50%,-50%);
						width: 23px;
						height: 23px;
						background-color: var(--primary);
						border-radius: 50%;
						@media screen and (max-width: 1170px) {
							right: unset;
		    				left: 0;
		    				transform: translate(-50%,-50%);
		    			}
					}

					&:after {
						position: absolute;
						z-index: 1;
					    content: "";
					    background-color: #fff;
					    border-radius: 50%;
					    right: 0;
					    top: 0;
					    transform: translate(50%,-50%);
					    width: 11px;
					    height: 11px;
					    @media screen and (max-width: 1170px) {
							right: unset;
		    				left: 0;
		    				transform: translate(-50%,-50%);
		    			}
					}
    			}
    		}
    	}
    }
}

.ova-invisible {
	visibility: hidden;
}