.tt-timeline--wrapper {
	position: relative;
	z-index: 1;
}

.tt-timeline {
	overflow-x: hidden;
	position: relative;

	&__icon {
		height: 52px;
		width: 52px;
		line-height: 52px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		margin-bottom: 15px;
	}

	&__content {
		background-color: #181818;
		padding: 30px 20px 65px 20px;
		border-radius: 3px;
		//margin-bottom: 58px;
		position: relative;


	}

	&__title--container {
		margin-top: -35px;
		overflow-y: auto;
		position: relative;
	}

	.tt-timeline__title-wrapper {
		display: inline-block;
		padding: 10px 20px 10px 45px;
		width: 80%;
		margin: 0 0 0 -20px;
		-webkit-transform: skew(20deg);
		-moz-transform: skew(20deg);
		-o-transform: skew(20deg);
		background: red;
		overflow: hidden;
		position: relative;

		&:before {
			content: '';
			background: linear-gradient(96.49deg, #0082F8 0%, #3C10F2 101.82%);
			position: absolute;
			top: -30px;
			left: -30px;
			right: -30px;
			bottom: -30px;
			-webkit-transform: skew(-20deg);
			-moz-transform: skew(-20deg);
			-o-transform: skew(-20deg);
		}


	}

	.shape-wrapper {
		position: relative;

		&:after {
			content: "";
			position: absolute;
			left: 0;
			bottom: -20px;
			width: 0;
			height: 0;
			border-top: 0 solid transparent;
			border-bottom: 27px solid transparent;
			border-right: 45px solid #3C10F2;
			z-index: 2;
		}
	}


	&__title {
		color: #fff;
		font-size: 18px;
		letter-spacing: 0.01em;
		font-weight: 600;
		margin-bottom: 5px;
		transform: skew(-20deg);
	}

	&__date {
		color: #fff;
		font-size: 16px;
		margin-bottom: 0;
		display: block;
		transform: skew(-20deg);
		margin-left: -8px;
	}

	&__description {
		color: rgba(255, 255, 255, 0.5);
		margin-bottom: 0;
	}

	&__year-wrapper {
		padding-left: 30px;
	}

	&__bubble {
		height: 26px;
		width: 26px;
		background: linear-gradient(96.49deg, #0082F8 0%, #3C10F2 101.82%);
		display: inline-block;
		border-radius: 50%;
		position: relative;
		margin-top: 40px;
		margin-bottom: 18px;

		&:before {
			content: '';
			position: absolute;
			border: 20px solid rgba(2, 56, 247, 0.3);
			left: -7px;
			top: -7px;
			border-radius: 50%;
		}
	}

	&__year {
		font-size: 20px;
		color: #fff;
	}

	&__border {
		height: 2px;
		width: 100%;
		background-color: rgba(255, 255, 255, 0.2);
		position: absolute;
		bottom: 71px;
		z-index: -1;

		&:after, &:before {
			content: '';
			position: absolute;
			height: 20px;
			width: 20px;
			background-color: #181818;
			border-radius: 50%;
			top: -10px;
		}

		&:after {
			left: 0;
		}

		&:before {
			right: 0;
		}
	}
}