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

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

/* -------------------------------- 

Main components 

-------------------------------- */
@-webkit-keyframes "cd-bounce-1" {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.5);
	}
	60% {
		opacity: 1;
		-webkit-transform: scale(1.2);
	}
	100% {
		-webkit-transform: scale(1);
	}
}
@-moz-keyframes "cd-bounce-1" {
	0% {
		opacity: 0;
		-moz-transform: scale(0.5);
	}
	60% {
		opacity: 1;
		-moz-transform: scale(1.2);
	}
	100% {
		-moz-transform: scale(1);
	}
}
@keyframes "cd-bounce-1" {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.5);
		-moz-transform: scale(0.5);
		-ms-transform: scale(0.5);
		-o-transform: scale(0.5);
		transform: scale(0.5);
	}
	60% {
		opacity: 1;
		-webkit-transform: scale(1.2);
		-moz-transform: scale(1.2);
		-ms-transform: scale(1.2);
		-o-transform: scale(1.2);
		transform: scale(1.2);
	}
	100% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
/* inverse bounce effect on even content blocks */
@-webkit-keyframes "cd-bounce-2" {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-100px);
	}
	60% {
		opacity: 1;
		-webkit-transform: translateX(20px);
	}
	100% {
		-webkit-transform: translateX(0);
	}
}
@-moz-keyframes "cd-bounce-2" {
	0% {
		opacity: 0;
		-moz-transform: translateX(-100px);
	}
	60% {
		opacity: 1;
		-moz-transform: translateX(20px);
	}
	100% {
		-moz-transform: translateX(0);
	}
}
@keyframes "cd-bounce-2" {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-100px);
		-moz-transform: translateX(-100px);
		-ms-transform: translateX(-100px);
		-o-transform: translateX(-100px);
		transform: translateX(-100px);
	}
	60% {
		opacity: 1;
		-webkit-transform: translateX(20px);
		-moz-transform: translateX(20px);
		-ms-transform: translateX(20px);
		-o-transform: translateX(20px);
		transform: translateX(20px);
	}
	100% {
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}
}
@-webkit-keyframes "cd-bounce-2-inverse" {
	0% {
		opacity: 0;
		-webkit-transform: translateX(100px);
	}
	60% {
		opacity: 1;
		-webkit-transform: translateX(-20px);
	}
	100% {
		-webkit-transform: translateX(0);
	}
}
@-moz-keyframes "cd-bounce-2-inverse" {
	0% {
		opacity: 0;
		-moz-transform: translateX(100px);
	}
	60% {
		opacity: 1;
		-moz-transform: translateX(-20px);
	}
	100% {
		-moz-transform: translateX(0);
	}
}
@keyframes "cd-bounce-2-inverse" {
	0% {
		opacity: 0;
		-webkit-transform: translateX(100px);
		-moz-transform: translateX(100px);
		-ms-transform: translateX(100px);
		-o-transform: translateX(100px);
		transform: translateX(100px);
	}
	60% {
		opacity: 1;
		-webkit-transform: translateX(-20px);
		-moz-transform: translateX(-20px);
		-ms-transform: translateX(-20px);
		-o-transform: translateX(-20px);
		transform: translateX(-20px);
	}
	100% {
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}
}
/* -------------------------------- 

Main Components 

-------------------------------- */
@-webkit-keyframes "cd-enter-right" {
	0% {
		opacity: 0;
		-webkit-transform: translateX(100%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0%);
	}
}
@-moz-keyframes "cd-enter-right" {
	0% {
		opacity: 0;
		-moz-transform: translateX(100%);
	}
	100% {
		opacity: 1;
		-moz-transform: translateX(0%);
	}
}
@keyframes "cd-enter-right" {
	0% {
		opacity: 0;
		-webkit-transform: translateX(100%);
		-moz-transform: translateX(100%);
		-ms-transform: translateX(100%);
		-o-transform: translateX(100%);
		transform: translateX(100%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-ms-transform: translateX(0%);
		-o-transform: translateX(0%);
		transform: translateX(0%);
	}
}
@-webkit-keyframes "cd-enter-left" {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-100%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0%);
	}
}
@-moz-keyframes "cd-enter-left" {
	0% {
		opacity: 0;
		-moz-transform: translateX(-100%);
	}
	100% {
		opacity: 1;
		-moz-transform: translateX(0%);
	}
}
@keyframes "cd-enter-left" {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-ms-transform: translateX(0%);
		-o-transform: translateX(0%);
		transform: translateX(0%);
	}
}
/* -------------------------------- 

Horizontal Timeline with Icon 

-------------------------------- */
@-webkit-keyframes "cd-enter-right" {
	0% {
		opacity: 0;
		-webkit-transform: translateX(100%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0%);
	}
}
@-moz-keyframes "cd-enter-right" {
	0% {
		opacity: 0;
		-moz-transform: translateX(100%);
	}
	100% {
		opacity: 1;
		-moz-transform: translateX(0%);
	}
}
@keyframes "cd-enter-right" {
	0% {
		opacity: 0;
		-webkit-transform: translateX(100%);
		-moz-transform: translateX(100%);
		-ms-transform: translateX(100%);
		-o-transform: translateX(100%);
		transform: translateX(100%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-ms-transform: translateX(0%);
		-o-transform: translateX(0%);
		transform: translateX(0%);
	}
}
@-webkit-keyframes "cd-enter-left" {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-100%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0%);
	}
}
@-moz-keyframes "cd-enter-left" {
	0% {
		opacity: 0;
		-moz-transform: translateX(-100%);
	}
	100% {
		opacity: 1;
		-moz-transform: translateX(0%);
	}
}
@keyframes "cd-enter-left" {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-ms-transform: translateX(0%);
		-o-transform: translateX(0%);
		transform: translateX(0%);
	}
}
.btn-light-primary {
	padding: 4px 25px;
	background-color: $white;
	color: $color_43;
	border-radius: 30px;
	border: $solid 1px $color_410;
	box-shadow: $shadow-3;
	&:hover {
		color: $white;
		background-color: $additional-color-2;
		border: $solid 1px $color_none;
	}
}
.btn.btn-delete {
	background: $color_84;
	color: $white;
	padding: 2px 12px;
	border-radius: 2px;
	box-shadow: none;
}
.btn.btn-edit {
	background: $color_47;
	color: $white;
	padding: 2px 12px;
	border-radius: 2px;
	box-shadow: none;
}
.timeline {
	.timeline-badge.circle1 {
		background: $color_16;
		color: $white;
	}
	.timeline-badge.circle2 {
		background: $color_57;
		color: $white;
	}
	.timeline-badge.circle3 {
		background: $color_391;
		color: $white;
	}
	.timeline-badge.circle4 {
		background: $color_47;
		color: $white;
	}
	div.timeline-badge {
		i {
			vertical-align: $v-align-middle;
		}
		img {
			width: 51px;
			border-radius: 50%;
		}
	}
}
/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
	width: 90%;
	max-width: 1170px;
	margin: $m-0 auto;
	&::after {
		content: '';
		display: table;
		clear: both;
	}
}
#cd-timeline {
	position: $pos-rel;
	padding: 2em 0;
	margin-top: 2em;
	margin-bottom: 2em;
	&::before {
		content: '';
		position: $pos-abs;
		top: 0;
		left: 18px;
		height: 100%;
		width: 3px;
		background: $color_410;
	}
}
.cd-timeline-block {
	position: $pos-rel;
	margin: 2em $m-0;
	&:after {
		content: "";
		display: table;
		clear: both;
	}
	&:first-child {
		margin-top: $m-0;
	}
	&:last-child {
		margin-bottom: $m-0;
	}
	&:nth-child(2n) {
		.cd-timeline-content.bg-primary {
			&::before {
				border-right-color: $color_47;
			}
		}
		.cd-timeline-content.bg-info {
			&::before {
				border-right-color: $additional-color-5;
			}
		}
		.cd-timeline-content.bg-inverse {
			&::before {
				border-right-color: $color_48;
			}
		}
	}
}
.cd-timeline-img {
	position: $pos-abs;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
	img {
		display: block;
		width: 24px;
		height: 24px;
		position: $pos-rel;
		left: 50%;
		top: 50%;
		margin-left: -12px;
		margin-top: -12px;
	}
	img.img_circle {
		display: block;
		width: 100%;
		height: auto;
		position: $pos-rel;
		left: 0%;
		top: 0%;
		margin-left: $m-0;
		margin-top: $m-0;
		border-radius: 50%;
	}
}
.cd-timeline-img.cd-picture {
	background: $color_413;
}
.cd-timeline-img.cd-movie {
	background: $color_414;
}
.cd-timeline-img.cd-location {
	background: $color_415;
}
.cd-timeline-content {
	position: $pos-rel;
	margin-left: $m-60;
	border-radius: 0.25em;
	padding: 1em;
	&:after {
		content: "";
		display: table;
		clear: both;
	}
	h2 {
		color: $color_408;
		font-size: 20px;
	}
	p {
		font-size: 13px;
		margin: 1em 0;
		line-height: 1.6;
	}
	.cd-read-more {
		font-size: 13px;
		display: inline-block;
		float: right;
		padding: .8em 1em;
		background: $color_412;
		color: $white;
		border-radius: 0.25em;
	}
	.cd-date {
		font-size: 13px;
		display: inline-block;
		float: left;
		padding: .8em 0;
		opacity: .7;
	}
	&::before {
		content: '';
		position: $pos-abs;
		top: 16px;
		right: 100%;
		height: 0;
		width: 0;
		border: $b-width-7 $solid $color_none;
		border-right: $b-width-7 $solid $color_93;
	}
}
.no-touch {
	.cd-timeline-content {
		.cd-read-more {
			&:hover {
				background-color: $color_409;
			}
		}
	}
	.cd-horizontal-timeline {
		.events {
			a {
				&:hover {
					&::after {
						background-color: $color_3;
						background-image: $additional-gradient-color-39;
						z-index: 100;
						border: $b-width-3 $solid $color_411;
					}
				}
			}
		}
	}
	.cd-timeline-navigation {
		a {
			&:hover {
				border-color: $color_3;
			}
		}
		a.inactive {
			&:hover {
				border-color: $color_24;
			}
		}
	}
	.cd-horizontal-timeline.cd-icon-horizontal-timeline {
		.events {
			a {
				&:hover {
					&::after {
						background-color: $color_3;
						background-image: $additional-gradient-color-39;
						z-index: 100;
						border: 3px $solid $color_411;
					}
				}
			}
		}
	}
}
.bg-danger {
	background-color: $white !important;
	color: $additional-color-11;
}
.bg-primary {
	background-color: $white !important;
	color: $additional-color-11;
}
.bg-success {
	background-color: $white !important;
	color: $additional-color-11;
}
.bg-info {
	background-color: $white !important;
	color: $additional-color-11;
}
.cd-timeline-content.bg-danger {
	&::before {
		border-left-color: $additional-color-7;
	}
	h2 {
		color: $black;
	}
	.cd-read-more {
		background-color: $additional-color-7;
		color: $white;
		padding: 0.5em 1em;
		text-align: center;
		border-radius: 100px;
		box-shadow: $shadow-3;
		&:hover {
			box-shadow: $shadow-4;
		}
	}
}
.cd-timeline-content.bg-primary {
	h2 {
		color: $black;
	}
	.cd-read-more {
		background-color: $color_47;
		color: $white;
		padding: 0.5em 1em;
		text-align: center;
		border-radius: 100px;
		&:hover {
			box-shadow: $shadow-4;
		}
	}
}
.cd-timeline-content.bg-success {
	&::before {
		border-left-color: $color_391;
	}
	h2 {
		color: $black;
	}
	.cd-read-more {
		background-color: $color_391;
		color: $white;
		padding: 0.5em 1em;
		text-align: center;
		border-radius: 100px;
		&:hover {
			box-shadow: $shadow-4;
		}
	}
}
.cd-timeline-content.bg-info {
	h2 {
		color: $black;
	}
	.cd-read-more {
		background-color: $additional-color-5;
		color: $white;
		padding: 0.5em 1em;
		text-align: center;
		border-radius: 100px;
		&:hover {
			box-shadow: $shadow-4;
		}
	}
}
.cd-timeline-content.bg-warning {
	&::before {
		border-left-color: $color_294;
	}
	h2 {
		color: $white;
	}
	.cd-read-more {
		background-color: $white;
		color: $color_9;
		padding: 0.5em 1em;
		border-radius: 100px;
	}
}
.cd-timeline-content.bg-inverse {
	h2 {
		color: $white;
	}
	.cd-read-more {
		background-color: $white;
		color: $color_9;
		padding: 0.5em 1em;
		border-radius: 100px;
	}
}
ol {
	list-style: none;
}
ul {
	list-style: none;
}
.cd-horizontal-timeline {
	opacity: 0;
	margin: 2em auto;
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	transition: opacity 0.2s;
	&::before {
		content: 'mobile';
		display: none;
	}
	.timeline {
		position: $pos-rel;
		height: 100px;
		width: 90%;
		max-width: 800px;
		margin: 0 auto;
	}
	.events-wrapper {
		position: $pos-rel;
		height: 100%;
		margin: $m-0 $m-40;
		overflow: hidden;
		&::after {
			content: '';
			position: $pos-abs;
			z-index: 2;
			top: 0;
			height: 100%;
			width: 20px;
			right: 0;
			background-image: -webkit-linear-gradient( right , #f8f8f8, rgba(248, 248, 248, 0));
			background-image: $additional-gradient-color-66;
		}
		&::before {
			content: '';
			position: $pos-abs;
			z-index: 2;
			top: 0;
			height: 100%;
			width: 20px;
			left: 0;
			background-image: -webkit-linear-gradient(to right, #f8f8f8, rgba(248, 248, 248, 0));
			background-image: linear-gradient(to right, #f8f8f8, rgba(248, 248, 248, 0));
		}
	}
	.events {
		position: $pos-abs;
		z-index: 1;
		left: 0;
		top: 49px;
		height: 2px;
		background: $color_410;
		-webkit-transition: -webkit-transform 0.4s;
		-moz-transition: -moz-transform 0.4s;
		transition: transform 0.4s;
		a {
			position: $pos-abs;
			bottom: 0;
			z-index: 2;
			text-align: center;
			font-size: 15px;
			padding-bottom: 20px;
			text-transform: uppercase;
			color: $additional-color-6;
			-webkit-transform: translateZ(0);
			-moz-transform: translateZ(0);
			-ms-transform: translateZ(0);
			-o-transform: translateZ(0);
			transform: translateZ(0);
			&::after {
				content: '';
				position: $pos-abs;
				left: 50%;
				right: auto;
				-webkit-transform: translateX(-50%);
				-moz-transform: translateX(-50%);
				-ms-transform: translateX(-50%);
				-o-transform: translateX(-50%);
				transform: translateX(-50%);
				bottom: -7px;
				height: 18px;
				width: 18px;
				border-radius: 50%;
				border: $b-width-3 $solid $color_410;
				background-color: $white;
				-webkit-transition: background-color 0.3s, border-color 0.3s;
				-moz-transition: background-color 0.3s, border-color 0.3s;
				transition: background-color 0.3s, border-color 0.3s;
			}
		}
		a.selected {
			pointer-events: none;
			&::after {
				background-color: $color_3;
				background-image: $additional-gradient-color-39;
				z-index: 100;
				border: 3px $solid $color_411;
			}
		}
		a.older-event {
			&::after {
				border-color: $color_410;
			}
		}
	}
	.filling-line {
		position: $pos-abs;
		z-index: 1;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background-color: $additional-color-2;
		-webkit-transform: scaleX(0);
		-moz-transform: scaleX(0);
		-ms-transform: scaleX(0);
		-o-transform: scaleX(0);
		transform: scaleX(0);
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-ms-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
		-webkit-transition: -webkit-transform 0.3s;
		-moz-transition: -moz-transform 0.3s;
		transition: transform 0.3s;
	}
	.events-content {
		position: $pos-rel;
		width: 100%;
		margin: 2em 0;
		overflow: hidden;
		-webkit-transition: height 0.4s;
		-moz-transition: height 0.4s;
		transition: height 0.4s;
		li {
			position: $pos-abs;
			z-index: 1;
			width: 100%;
			left: 0;
			top: 0;
			-webkit-transform: translateX(-100%);
			-moz-transform: translateX(-100%);
			-ms-transform: translateX(-100%);
			-o-transform: translateX(-100%);
			transform: translateX(-100%);
			padding: 0 5%;
			opacity: 0;
			-webkit-animation-duration: 0.4s;
			-moz-animation-duration: 0.4s;
			animation-duration: 0.4s;
			-webkit-animation-timing-function: ease-in-out;
			-moz-animation-timing-function: ease-in-out;
			animation-timing-function: ease-in-out;
			>* {
				max-width: 800px;
				margin: 0 auto;
			}
			img {
				width: 60px;
				border-radius: 50%;
				display: inline-block;
			}
		}
		li.selected {
			position: $pos-rel;
			z-index: 2;
			opacity: 1;
			-webkit-transform: translateX(0);
			-moz-transform: translateX(0);
			-ms-transform: translateX(0);
			-o-transform: translateX(0);
			transform: translateX(0);
		}
		li.enter-right {
			-webkit-animation-name: cd-enter-right;
			-moz-animation-name: cd-enter-right;
			animation-name: cd-enter-right;
		}
		li.leave-right {
			-webkit-animation-name: cd-enter-right;
			-moz-animation-name: cd-enter-right;
			animation-name: cd-enter-right;
			-webkit-animation-direction: reverse;
			-moz-animation-direction: reverse;
			animation-direction: reverse;
		}
		li.enter-left {
			-webkit-animation-name: cd-enter-left;
			-moz-animation-name: cd-enter-left;
			animation-name: cd-enter-left;
		}
		li.leave-left {
			-webkit-animation-name: cd-enter-left;
			-moz-animation-name: cd-enter-left;
			animation-name: cd-enter-left;
			-webkit-animation-direction: reverse;
			-moz-animation-direction: reverse;
			animation-direction: reverse;
		}
		h2 {
			font-weight: bold;
			font-size: 1.3rem;
			font-weight: 500;
			font-size: 1.1rem;
			line-height: 1.2;
			color: $additional-color-11;
		}
		em {
			display: block;
			font-style: initial;
			margin: $m-10 auto;
			color: $additional-color-6;
			line-height: 1.6;
			&::before {
				content: '- ';
			}
		}
		p {
			font-size: 1rem;
			color: $additional-color-11;
			line-height: 1.6;
		}
	}
}
.cd-horizontal-timeline.loaded {
	opacity: 1;
}
.cd-timeline-navigation {
	a {
		position: $pos-abs;
		z-index: 1;
		top: 68%;
		bottom: auto;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		height: 30px;
		width: 30px;
		border-radius: 50%;
		border: 2px $solid $color_410;
		overflow: hidden;
		color: $color_none;
		text-indent: 100%;
		white-space: nowrap;
		-webkit-transition: border-color 0.3s;
		-moz-transition: border-color 0.3s;
		transition: border-color 0.3s;
		position: $pos-abs;
		z-index: 1;
		top: 68%;
		bottom: auto;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		height: 30px;
		width: 30px;
		border-radius: 50%;
		border: 2px $solid $color_410;
		overflow: hidden;
		color: $color_none;
		text-indent: 100%;
		white-space: nowrap;
		-webkit-transition: border-color 0.3s;
		-moz-transition: border-color 0.3s;
		transition: border-color 0.3s;
		&::after {
			content: '';
			position: $pos-abs;
			height: 16px;
			width: 16px;
			left: 50%;
			top: 50%;
			bottom: auto;
			right: auto;
			-webkit-transform: translateX(-50%) translateY(-50%);
			-moz-transform: translateX(-50%) translateY(-50%);
			-ms-transform: translateX(-50%) translateY(-50%);
			-o-transform: translateX(-50%) translateY(-50%);
			transform: translateX(-50%) translateY(-50%);
			background: url(img/cd-arrow.svg) no-repeat 0 0;
			content: '';
			position: $pos-abs;
			height: 16px;
			width: 16px;
			left: 50%;
			top: 50%;
			bottom: auto;
			right: auto;
			-webkit-transform: translateX(-50%) translateY(-50%);
			-moz-transform: translateX(-50%) translateY(-50%);
			-ms-transform: translateX(-50%) translateY(-50%);
			-o-transform: translateX(-50%) translateY(-50%);
			transform: translateX(-50%) translateY(-50%);
			background: url(img/cd-arrow.svg) no-repeat 0 0;
		}
	}
	a.prev {
		left: 0;
		-webkit-transform: translateY(-50%) rotate(180deg);
		-moz-transform: translateY(-50%) rotate(180deg);
		-ms-transform: translateY(-50%) rotate(180deg);
		-o-transform: translateY(-50%) rotate(180deg);
		transform: translateY(-50%) rotate(180deg);
		left: 0;
		-webkit-transform: translateY(-50%) rotate(180deg);
		-moz-transform: translateY(-50%) rotate(180deg);
		-ms-transform: translateY(-50%) rotate(180deg);
		-o-transform: translateY(-50%) rotate(180deg);
		transform: translateY(-50%) rotate(180deg);
	}
	a.next {
		right: 0;
		right: 0;
	}
	a.inactive {
		cursor: not-allowed;
		cursor: not-allowed;
		&::after {
			background-position: 0 -16px;
			background-position: 0 -16px;
		}
	}
}
.cd-horizontal-timeline.cd-icon-horizontal-timeline {
	opacity: 0;
	margin: 2em auto;
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	transition: opacity 0.2s;
	&::before {
		content: 'mobile';
		display: none;
	}
	.timeline {
		position: $pos-rel;
		height: 193px;
		width: 90%;
		max-width: 800px;
		margin: 0 auto;
	}
	.events-wrapper {
		position: $pos-rel;
		height: 100%;
		margin: $m-0 $m-40;
		overflow: hidden;
		&::after {
			content: '';
			position: $pos-abs;
			z-index: 2;
			top: 0;
			height: 100%;
			width: 20px;
			right: 0;
			background-image: -webkit-linear-gradient( right , #f8f8f8, rgba(248, 248, 248, 0));
			background-image: $additional-gradient-color-66;
		}
		&::before {
			content: '';
			position: $pos-abs;
			z-index: 2;
			top: 0;
			height: 100%;
			width: 20px;
			left: 0;
			background-image: -webkit-linear-gradient( left , #f8f8f8, rgba(248, 248, 248, 0));
			background-image: linear-gradient(to right, #f8f8f8, rgba(248, 248, 248, 0));
		}
	}
	.events {
		position: $pos-abs;
		z-index: 1;
		left: 0;
		top: 110px;
		height: 2px;
		background: $color_410;
		-webkit-transition: -webkit-transform 0.4s;
		-moz-transition: -moz-transform 0.4s;
		transition: transform 0.4s;
		img {
			display: block;
			width: 60px;
		}
		a {
			position: $pos-abs;
			bottom: 0;
			z-index: 2;
			text-align: center;
			font-size: 15px;
			padding-bottom: $p-20;
			text-transform: uppercase;
			color: $additional-color-6;
			-webkit-transform: translateZ(0);
			-moz-transform: translateZ(0);
			-ms-transform: translateZ(0);
			-o-transform: translateZ(0);
			transform: translateZ(0);
			&::after {
				content: '';
				position: $pos-abs;
				left: 50%;
				right: auto;
				-webkit-transform: translateX(-50%);
				-moz-transform: translateX(-50%);
				-ms-transform: translateX(-50%);
				-o-transform: translateX(-50%);
				transform: translateX(-50%);
				bottom: -7px;
				height: 18px;
				width: 18px;
				border-radius: 50%;
				border: $b-width-3 $solid $color_410;
				background-color: $white;
				-webkit-transition: background-color 0.3s, border-color 0.3s;
				-moz-transition: background-color 0.3s, border-color 0.3s;
				transition: background-color 0.3s, border-color 0.3s;
			}
		}
		a.selected {
			pointer-events: none;
			&::after {
				background-color: $color_3;
				background-image: $additional-gradient-color-39;
				z-index: 100;
				border: $b-width-3 $solid $color_411;
			}
		}
		a.older-event {
			&::after {
				border-color: $color_410;
			}
		}
	}
	.filling-line {
		position: $pos-abs;
		z-index: 1;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background-color: $additional-color-2;
		-webkit-transform: scaleX(0);
		-moz-transform: scaleX(0);
		-ms-transform: scaleX(0);
		-o-transform: scaleX(0);
		transform: scaleX(0);
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-ms-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
		-webkit-transition: -webkit-transform 0.3s;
		-moz-transition: -moz-transform 0.3s;
		transition: transform 0.3s;
	}
	.events-content {
		position: $pos-rel;
		width: 100%;
		margin: 2em 0;
		overflow: hidden;
		-webkit-transition: height 0.4s;
		-moz-transition: height 0.4s;
		transition: height 0.4s;
		li {
			position: $pos-abs;
			z-index: 1;
			width: 100%;
			left: 0;
			top: 0;
			-webkit-transform: translateX(-100%);
			-moz-transform: translateX(-100%);
			-ms-transform: translateX(-100%);
			-o-transform: translateX(-100%);
			transform: translateX(-100%);
			padding: 0 5%;
			opacity: 0;
			-webkit-animation-duration: 0.4s;
			-moz-animation-duration: 0.4s;
			animation-duration: 0.4s;
			-webkit-animation-timing-function: ease-in-out;
			-moz-animation-timing-function: ease-in-out;
			animation-timing-function: ease-in-out;
			>* {
				max-width: 800px;
				margin: 0 auto;
			}
		}
		li.selected {
			position: $pos-rel;
			z-index: 2;
			opacity: 1;
			-webkit-transform: translateX(0);
			-moz-transform: translateX(0);
			-ms-transform: translateX(0);
			-o-transform: translateX(0);
			transform: translateX(0);
		}
		li.enter-right {
			-webkit-animation-name: cd-enter-right;
			-moz-animation-name: cd-enter-right;
			animation-name: cd-enter-right;
		}
		li.leave-right {
			-webkit-animation-name: cd-enter-right;
			-moz-animation-name: cd-enter-right;
			animation-name: cd-enter-right;
			-webkit-animation-direction: reverse;
			-moz-animation-direction: reverse;
			animation-direction: reverse;
		}
		li.enter-left {
			-webkit-animation-name: cd-enter-left;
			-moz-animation-name: cd-enter-left;
			animation-name: cd-enter-left;
		}
		li.leave-left {
			-webkit-animation-name: cd-enter-left;
			-moz-animation-name: cd-enter-left;
			animation-name: cd-enter-left;
			-webkit-animation-direction: reverse;
			-moz-animation-direction: reverse;
			animation-direction: reverse;
		}
		h2 {
			font-weight: bold;
			font-size: 1.3rem;
			font-weight: 500;
			line-height: 1.2;
			color: $additional-color-11;
		}
		em {
			display: block;
			font-style: initial;
			margin: 10px auto;
			color: $additional-color-6;
			line-height: 1.6;
			&::before {
				content: '- ';
			}
		}
		p {
			font-size: 1rem;
			color: $additional-color-11;
			line-height: 1.6;
		}
	}
}
.cd-horizontal-timeline.cd-icon-horizontal-timeline.loaded {
	opacity: 1;
}
@media only screen and (min-width: 1170px) {
	#cd-timeline {
		margin-top: 3em;
		margin-bottom: 3em;
		&::before {
			left: 50%;
			margin-left: -2px;
		}
	}
	.cd-timeline-block {
		margin: 4em 0;
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
		&:nth-child(even) {
			.cd-timeline-content {
				float: right;
				&::before {
					top: 24px;
					left: auto;
					right: 100%;
					border-color: $color_none;
					border-right-color: $color_93;
				}
				.cd-read-more {
					float: right;
				}
				.cd-date {
					left: auto;
					right: 132%;
					text-align: right;
				}
			}
		}
	}
	.cd-timeline-img {
		width: 80px;
		height: 80px;
		left: 50%;
		margin-left: -42px;
		-webkit-transform: translateZ(0);
		-webkit-backface-visibility: hidden;
	}
	.cssanimations {
		.cd-timeline-img.is-hidden {
			visibility: hidden;
		}
		.cd-timeline-img.bounce-in {
			visibility: visible;
			-webkit-animation: cd-bounce-1 0.6s;
			-moz-animation: cd-bounce-1 0.6s;
			animation: cd-bounce-1 0.6s;
		}
		.cd-timeline-content.is-hidden {
			visibility: hidden;
		}
		.cd-timeline-content.bounce-in {
			visibility: visible;
			-webkit-animation: cd-bounce-2 0.6s;
			-moz-animation: cd-bounce-2 0.6s;
			animation: cd-bounce-2 0.6s;
		}
		.cd-timeline-block {
			&:nth-child(even) {
				.cd-timeline-content.bounce-in {
					-webkit-animation: cd-bounce-2-inverse 0.6s;
					-moz-animation: cd-bounce-2-inverse 0.6s;
					animation: cd-bounce-2-inverse 0.6s;
				}
			}
		}
	}
	.cd-timeline-content {
		margin-left: 0;
		padding: 1.2em;
		width: 43%;
		&::before {
			top: 24px;
			left: 100%;
			border-color: $color_none;
			border-left-color: $color_93;
		}
		.cd-read-more {
			float: left;
		}
		.cd-date {
			position: $pos-abs;
			width: 100%;
			left: 132%;
			top: 16px;
			font-size: 15px;
			color: $additional-color-11;
			font-weight: 600;
		}
	}
}
@media only screen and (min-width: 1100px) {
	.cd-horizontal-timeline {
		margin: 6em auto;
		&::before {
			content: 'desktop';
		}
	}
	.cd-horizontal-timeline.cd-icon-horizontal-timeline {
		margin: 6em auto;
		&::before {
			content: 'desktop';
		}
	}
}
@media only screen and (min-width: 768px) {
	.cd-horizontal-timeline {
		.events-content {
			h2 {
				font-size: 1.3rem;
				color: $additional-color-11;
			}
			em {
				font-size: 1rem;
				color: $additional-color-6;
			}
			p {
				text-align: $align-justify;
				font-size: 16px;
				margin-top: 15px;
				color: $additional-color-11;
				line-height: 1.7;
			}
		}
	}
	.cd-horizontal-timeline.cd-icon-horizontal-timeline {
		.events-content {
			h2 {
				font-size: 1.3rem;
				color: $additional-color-11;
			}
			em {
				font-size: 1rem;
				color: $additional-color-6;
			}
			p {
				text-align: $align-justify;
				font-size: 16px;
				margin-top: 15px;
				color: $additional-color-11;
				line-height: 1.7;
			}
		}
	}
}
@media (max-width: 992px) {
	.cd-timeline-content.bg-danger {
		&::before {
			border-left-color: $white;
			border-right-color: $additional-color-7;
		}
	}
	.cd-timeline-content.bg-success {
		&::before {
			border-left-color: $white;
			border-right-color: $color_391;
		}
	}
	.cd-timeline-content.bg-warning {
		&::before {
			border-left-color: $white;
			border-right-color: $color_294;
		}
	}
}
@media (min-width: 993px) and (max-width: 1024px) {
	.cd-timeline-content.bg-danger {
		&::before {
			border-left-color: $white;
			border-right-color: $color_125;
		}
	}
	.cd-timeline-content.bg-success {
		&::before {
			border-left-color: $white;
			border-right-color: $color_207;
		}
	}
	.cd-timeline-content.bg-warning {
		&::before {
			border-left-color: $white;
			border-right-color: $color_294;
		}
	}
}