.ova-history {
	p {
		margin: 0;
	}
	.wp-item {
		display: flex;
		&:hover{
			.wp-year .dot span{
				&.dot2{
					background: #fff;
				}
				
			}
		}
		@media (max-width: 991px) {
			flex-direction: column-reverse;
		}
		&:first-child{
			.wp-content{
				position: relative;
				&:before{
					content: '';
					width: 1px;
					height: 60px;
					background: #e5e5e5;
					display: inline-block;
					position: absolute;
					right: -1px;
					top: -57px;
					@media(max-width: 991px){
						display: none;
					}
				}
				&:after{
					content: '';
					width: 10px;
					height: 10px;
					background: #e5e5e5;
					display: inline-block;
					position: absolute;
					right: -5px;
					border-radius: 50%;
					top: -67px;
					@media(max-width: 991px){
						display: none;
					}
				}
			}
		
		}
		&:last-child{
			&:nth-child(odd){
				.wp-content{
					&:before{
						left: unset;
						right: -1px;
					}
					&:after{
						left: unset;
						right: -5px;
					}
				}
			}
			.wp-content{
				position: relative;

				&:before{
					content: '';
					width: 1px;
					height: 60px;
					background: #e5e5e5;
					display: inline-block;
					position: absolute;
					left: -1px;
					bottom: -27px;
					@media(max-width: 991px){
						display: none;
					}
				}
				&:after{
					content: '';
					width: 10px;
					height: 10px;
					background: #e5e5e5;
					display: inline-block;
					position: absolute;
					left: -5px;
					border-radius: 50%;
					bottom: -37px;
					@media(max-width: 991px){
						display: none;
					}
				}
			}

			
		}
		&:not(:last-child) {
			.wp-content {
				padding-bottom: 85px;
				
			}
		}
		&.active{
			&:nth-child(odd), &:nth-child(even){
				.wp-content {
					.content{
						transform: translate(0);
						opacity: 1;
					}
				}
				.wp-year {
					.year, .title, .desc {
						transform: translate(0);
						opacity: 1;
					}
				}
			}

		}
		&:nth-child(odd){
			.wp-content {
				.content{
					transform: translate(-300px, 0);
					opacity: 0;
					transition: 0.5s;
					text-align: right;
					@media(max-width: 991px){
						text-align: left;
					}
				}
			}
			.wp-year {
				.year, .title, .desc {
					transform: translate(300px, 0);
					opacity: 0;
					transition: 0.5s;
				}
			}
		}

		&:nth-child(even){
			.wp-content {
				.content{
					transform: translate(300px, 0);
					opacity: 0;
					transition: 0.5s;
				}
			}
			.wp-year {
				.year, .title, .desc {
					transform: translate(-300px, 0);
					opacity: 0;
					transition: 0.5s;
				}
			}
		}
		&:nth-child(even) {
			flex-direction: row-reverse;
			@media (max-width: 991px) {
				flex-direction: column-reverse;
			}
			.wp-content {
				padding-right: 0px;
				padding-left: 70px;
				border: none;
				@media (max-width: 991px) {
					padding: 0px;
					padding-bottom: 60px;
				}
				.title {
					p {
						&:after {
							left: unset;
							right: 100%;
							transform: rotateY(180deg) translateY(-50%);
							@media (max-width: 991px) {
								display: none;
							}
						}
					}
				}
			}
			.wp-year {
				flex-direction: row-reverse;
				padding-left: 0;
				padding-right: 70px;
				border-right: 1px solid #e5e5e5;
				text-align: right;
				@media (max-width: 991px) {
					padding: 0px;
					border: none;
					text-align: left;
				}
				.dot{
					.dot1{
						left: unset;
						right: -15px;
						
					}
					.dot2{
						left: unset;
						right: -6.5px;
					}
					.dot4{
						left: unset;
						right: -3.5px;
					}
				}

				.year {
					margin-top: -6px;
					@media (max-width: 991px) {
						float: unset;
					}
				}

			}
		}
		//end even

		.wp-content {
			flex-basis: calc(50%);
			padding-right: 70px;
			border-right: 1px solid #e5e5e5;
			transition: 0.5s;
			@media (max-width: 991px) {
				padding: 0px;
				border: none;
			}
			
			.content {
				.ova-media {
					overflow: hidden;
					margin-bottom: 23px;
					img {
						transition: 0.8s;
					}
				}
			}
		}
		.wp-year {
			flex-basis: calc(50%);
			padding-left: 70px;
			border: none;
			position: relative;
			transition: 0.5s;

			@media (max-width: 991px) {
				padding: 0px;
				margin-bottom: 20px;
			}

			.dot{
				@media(max-width: 991px){
					display: none;
				}
				span{
					display: inline-block;
					position: absolute;
				}
				.dot1{
					border: 1px solid #e5e5e5;
					width: 30px;
					height: 30px;
					border-radius: 50%;
					top: 0px;
					left: -15px;
					z-index: 1;
					background: #fff;
					transition: 0.4s;
				}
				.dot2{
					width: 13px;
					height: 13px;
					border-radius: 50%;
					top: 8.5px;
					left: -6.5px;
					z-index: 2;
					transition: 0.4s;
				}

				.dot4{
					background: #fff;
					width: 7px;
					height: 7px;
					border-radius: 50%;
					top: 11.5px;
					left: -3.5px;
					z-index: 3;
				}
			}

			.title {
				h3 {
					margin: 0 0 19px 0;
					font-size: 24px;
					line-height: 1.2;
					color: #202b5d;
					font-weight: 600;
					position: relative;
				}
			}

			.year {
				font-size: 22px;
				line-height: 1.2;
				font-weight: 600;
				margin-bottom: 3px;
				margin-top: -6px;
			}
			.desc {
					p {
						font-size: 17px;
						line-height: 26px;
						color: #62718d;
					}
				}

		}
	}
}