*{box-sizing: border-box;}
body
{
	background-color: #444;
	font-family: 'Roboto', sans-serif;
}

@import '_animate.scss';
@import '_media.scss';

.timeLine
{
	position: relative;
	padding: 70px 0px;
	text-align: center;
	width: 100%;
	overflow: hidden;
	.row
	{
		.lineHeader
		{
			&:before {
				position: absolute;
				top: 0;
				margin: auto;			
				content: "\f102";
				font-family: FontAwesome;
				color: #DDD;
				font-size: 36px;
				margin-left: -10px;
			}
			&:after {
				content: '';
				width: 3px;
				position: absolute;
				top: 35px;
				bottom: 35px;
				left: 50%;
				border-radius: 50px;
				background-color: #DDD;
			}
		}
		.lineFooter
		{
			&:before {
				position: absolute;		
				bottom: 0;
				margin: auto;
				content: "\f103";
				font-family: FontAwesome;
				color: #DDD;
				font-size: 36px;
				margin-left: -10px;
			}
		}
		.item
		{
			visibility: hidden;
			float: left;
			margin-bottom: 2%;
			padding: 0px;
			clear: left;
			&:before
			{
				content: '';
				width: 15px;
				height: 15px;
				border: 3px solid #000000;
				background-color: white;
				border-radius: 50%;
				position: absolute;
				right: -9px;
				top: 10px;
			}
			&:after
			{
				content: '';
				height: 1px;
				width: 5%;
				position: absolute;
				background-color: #DDD;
				top: 16px;
				right: 8px;
			}

			.caption
			{
				margin: auto;
				width: 85%;
				background: #F0F0F0;
				min-height: 200px;
				// max-height: 1000px;
				position: relative;
				color: #333;
				border: 1px solid #aaa;
				box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.5);
				.star
				{
					width: 50px;
					padding: 5px 0px;
					font-weight: bold;
					line-height: 15px;
					position: absolute;
					z-index: 999;
					top: -10px;
					left: 20px;
					background-color: rgba(139,0,0,0.8);
					color: white;
					box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.5);
					span
					{
						display: inline-block;
					}
					&:before
					{
						content: '';
						position: absolute;
						top: 0px;
						left: -10px;
						z-index: 2;
						border-right: 10px solid rgb(94, 8, 8);
						border-bottom: 0px solid transparent;
						border-top: 10px solid transparent;
					}
				}
				.image
				{
					position: relative;
					img
					{
						width: 100%;
						min-height: 200px;	
						max-height: 400px;
					}
					video
					{
						width: 100%;
						height: 100%;
						position: relative;
					}
					.controll
					{
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0px;
						top: 0px;
						background-color: rgba(0,0,0,0.3);
						color: rgba(255,255,255,0.7);
						display: flex;
						align-items: center;
						justify-content: center;

					}
					.title
					{
						background-color: rgba(139,0,0,1);
						padding: 0px 20px;
						position: absolute;
						z-index: 999;
						left: -10px;
						bottom: 10px;
						display: inline-block;
						opacity: 0;
						color: white;
						box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.5);
						&:before
							{
								content: '';
								position: absolute;
								bottom: -10px;
								left: 0px;
								z-index: 2;
								border-left: 10px solid transparent;
								border-bottom: 0px solid transparent;
								border-top: 10px solid rgb(94, 0, 0);
							}
					}
				}
			}
			.textContent
			{
				padding: 15px 10px;
				p
				{
					text-justify: justify;
					text-align: left;
					padding: 0px 10px;
					border-left: 5px solid rgb(94, 8, 8);
					border-radius: 3px;
				}
			}		
		}
		.pull-right
		{
			float: right;
			margin-bottom: 0%;
			margin-top: 3%;
			clear: right;
			&:before
			{
				content: '';
				width: 15px;
				height: 15px;
				border: 3px solid darkred;
				background-color: white;
				border-radius: 50%;
				position: absolute;
				left: -6px;
				top: 14px;
			}
			&:after
			{
				content: '';
				height: 1px;
				width: 5%;
				position: absolute;
				background-color: #DDD;
				top: 21px;
				left: 12px;
			}
		}
	}
}

@include screen(xs)
{
	.timeLine
	{
		.row
		{
			.item
			{
				margin-bottom: 4%;
				&:before
				{
					display: none;	
				}
				&:after
				{
					display: none;
				}		
			}
			.pull-right
			{
				margin-top: 0%;
				&:before
				{
					display: none;
				}
				&:after
				{
					display: none;		
				}
			}
		}
	}
}
@include screen(sm)
{
	.timeLine
	{
		.row
		{
			.item
			{
				margin-bottom: 4%;
				&:before
				{
					display: none;	
				}
				&:after
				{
					display: none;
				}		
			}
			.pull-right
			{
				margin-top: 0%;
				&:before
				{
					display: none;
				}
				&:after
				{
					display: none;		
				}
			}
		}
	}
}

// .timeLine
// {
// 	position: relative;
// 	padding: 50px 0px;
// 	text-align: center;
// 	.container
// 	{
// 		&:after
// 		{
// 			content: '';
// 			display: table;
// 			clear: both;
// 		}
// 		.lineHeader
// 		{
// 			&:before {
// 				position: absolute;
// 				top: 0;
// 				margin: auto;			
// 				content: "\f102";
// 				font-family: FontAwesome;
// 				color: #DDD;
// 				font-size: 36px;
// 				margin-left: -10px;
// 			}
// 			&:after {
// 				content: '';
// 				width: 3px;
// 				position: absolute;
// 				top: 35px;
// 				bottom: 35px;
// 				left: 50%;
// 				border-radius: 50px;
// 				background-color: #DDD;
// 			}
// 		}
// 		.lineFooter
// 		{
// 			&:before {
// 				position: absolute;		
// 				bottom: 0;
// 				margin: auto;
// 				content: "\f103";
// 				font-family: FontAwesome;
// 				color: #DDD;
// 				font-size: 36px;
// 				margin-left: -10px;
// 			}
// 		}
// 		.item
// 		{
// 			width: 50%;
// 			float: left;
// 			position: relative;
// 			margin-bottom: 50px;
// 			&:before
// 			{
// 				content: '';
// 				width: 10px;
// 				height: 10px;
// 				border: 2px solid darkred;
// 				background-color: white;
// 				border-radius: 50%;
// 				position: absolute;
// 				right: -6px;
// 				top: 0;
// 			}
// 			&:after
// 			{
// 				content: '';
// 				height: 1px;
// 				width: 5%;
// 				position: absolute;
// 				background-color: #DDD;
// 				top: 5px;
// 				right: 10px;
// 			}
// 			.caption
// 			{
// 				margin: auto;
// 				width: 85%;
// 				background: #555;
// 				height: 200px;
// 			}
			
// 		}
// 		.pull-right
// 		{
// 			float: right;
// 			margin-top: 5%;
// 			&:before
// 					{
// 						content: '';
// 						width: 10px;
// 						height: 10px;
// 						border: 2px solid darkred;
// 						background-color: white;
// 						border-radius: 50%;
// 						position: absolute;
// 						left: -6px;
// 						top: 0;
// 					}
// 					&:after
// 					{
// 						content: '';
// 						height: 1px;
// 						width: 5%;
// 						position: absolute;
// 						background-color: #DDD;
// 						top: 6px;
// 						left: 12px;
// 					}
// 		}
// 	}
// }