//	=================
//    	Imports
//	=================

@import '../../base/color_variables';   	// Color Variables
@import '../../base/fonticons';   			// Fonticons Variables
@import '../../base/urls';   				// URLS Variables
@import '../../base/utilities_variables';  // Utilities Variables

.modern-timeline {
	list-style: none;
	position: $pos-rel;
	padding: $p-50 $p-0 $p-50;
	margin: $m-0;
	&:before {
		position: $pos-abs;
		background: $light-gray;
		bottom: 0;
		left: 50%;
		top: 0;
		content: "";
		width: 3px;
		margin-left: -1.5px;
	}
	>li {
		margin-bottom: $m-50;
		position: $pos-rel;
		&:after {
			display: table;
			content: "";
			clear: both;
		}
		&:before {
			display: table;
			content: "";
		}
		>.modern-timeline-badge {
			position: $pos-abs;
			background: $white;
			border: $b-width-3 $solid $light-gray;
			border-radius: 100%;
			height: 20px;
			width: 20px;
			margin-left: -10px;
			text-align: center;
			z-index: 1;
			left: 50%;
			top: 32px;
		}
		>.modern-timeline-panel {
			position: $pos-rel;
			border: $b-width-1 $solid $light-gray;
			background: $white;
			border-radius: .1875rem;
			box-shadow: 0 0 60px 0 rgba(0, 0, 0, .07);
			transition: .3s ease-in-out;
			float: left;
			width: 46%;
			&:before {
				position: $pos-abs;
				background: $light-gray;
				right: -37px;
				top: 40px;
				transition: .3s ease-in-out;
				content: " ";
				width: 37px;
				height: 3px;
				display: block;
			}
			.modern-timeline-preview {
				img {
					width: 100%;
				}
			}
			* {
				&:last-child {
					margin-bottom: 0;
				}
			}
			.modern-timeline-body {
				padding: 40px 45px;
				h4 {
					color: $additional-color-5;
					margin-bottom: 20px;
					font-size: 1.125rem;
				}
				p {
					color: $additional-color-11;
					margin-bottom: 25px;
					a {
						color: $black;
					}
				}
			}
		}
		&:nth-child(even) {
			>.modern-timeline-panel {
				&:before {
					right: auto;
					left: -37px;
					width: 37px;
				}
				border: $b-width-1 $solid $light-gray;
				float: $align-right;
			}
		}
	}
}
.modern-timeline-top {
	&:before {
		background: $light-gray;
		position: $pos-abs;
		height: 3px;
		width: 50px;
		display: block;
		content: "";
		bottom: 0;
		left: 50%;
		margin-left: -25px;
		top: 0;
	}
}
.modern-timeline-bottom {
	&:before {
		background: $light-gray;
		position: $pos-abs;
		height: 3px;
		width: 50px;
		display: block;
		content: "";
		bottom: 0;
		left: 50%;
		margin-left: -25px;
	}
}
@media (max-width: 767px) {
	ul.modern-timeline {
		>li {
			>.modern-timeline-panel {
				border: $b-width-1 $solid $light-gray;
				float: $align-right;
				width: 100%;
			}
			>.modern-timeline-badge {
				display: none;
			}
		}
	}
	.modern-timeline {
		>li {
			>.modern-timeline-panel {
				&:before {
					display: none;
				}
			}
		}
	}
}