// Porto Experience Timeline
section.exp-timeline {
	width: calc(100% - 30px);
	margin: side-values(0 0 0 30px);
	padding: 0;
	&:after {
		content: none;
	}
	.timeline-bar {
		position: absolute;
		width: 3px;
		#{$left}: -30px;
		z-index: 0;
		background-color: var(--porto-dark-color, $color-dark);
	}
	.timeline-box {
		border: 0 !important;
		margin: 15px 0 !important;
		width: 100%;
		margin: 0;
		padding: 0;
		box-shadow: 0px 12px 90px -10px rgba(171, 191, 216, .6) !important;
		&.right {
			max-width: 100%;
			display: flex;
			flex-wrap: wrap;
			&:before {
				top: 50%;
				#{$left}: -32.5px;
				transform: translateY(-50%);
				background-color: var(--porto-dark-color, $color-dark) !important;
				box-shadow: 0 0 0 3px #ecf1f7, 0 0 0 6px var(--porto-dark-color, $color-dark) !important;
			}
			&:after {
				top: 50%;
				background: var(--porto-primary-color);
				border: none;
				transform: translateY(-50%) rotate(45deg);
				#{$left}: -7px
			}
		}
		.experience-info, .experience-description {
			padding: 40px;
		}
		.experience-info {
			p {
				opacity: 0.5;
				text-transform: uppercase;
				font-size: 11px;
			}
			.from, .to {
				width: 50%;
				float: $left;
				text-transform: uppercase;
				font-size: 12px;
				line-height: 1.3;
			}
			.from > span, .to > span {
				display: block;
				text-transform: none;
				font-size: 16px;
			}
			.company {
				font-size: 18px;
				> span {
					display: block;
					opacity: 0.5;
					text-transform: uppercase;
					font-size: 11px;
				}
			}
		}
	}
}

@media (max-width: 767px) {
	section.exp-timeline {
		width: 100%;
		margin: 0;
		.timeline-bar {
			display: none;
		}
		.timeline-box {
			&:before, &:after {
				display: none !important;
			}
		}
	}
}

@media (max-width: 575px) {
	section.exp-timeline {
		.experience-info,
		.experience-description {
			width: 100%;
		}
	}
}

.vc_porto_experience_timeline_item:after {
	content: '';
	display: table;
	clear: both;
}