@charset "utf-8";
/* CSS Document */

.timeview{
	width:100%;
	height:70%;
	position:relative;
	background:#000;

}
	.timeview .bottom{
		position:absolute;
		left:0;
		bottom:0;
		background:rgba(0,0,0,.5);
		width:100%;
		height:80px;
		z-index:9;
	}
	.timeview .slide{
		width:100%;
		height:100%;
		position:absolute;
		left:0;
		top:0;
		display:none;
	}
		.timeview .slide iframe{
			width:100%;
			height:100%;
		}
		.timeview .slide .image{
			width:100%;
			height:100%;
			overflow:hidden !important;
			position:relative;
		}
			.timeview .slide .image img{
				position:absolute;
				left:0;
				top:0;
				width:100%;
				height:100%;
				min-height: 0;
				min-width: 0;
				
				object-fit: cover;
				-webkit-backface-visibility: hidden;
				
			}

.timeview .slide.active .image img{
	animation-name: slide_active_img;
	animation-duration: 6s;
	animation-timing-function: linear;
}

.anim_pause{
	-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
	animation-play-state: paused;
}
.anim_resume{
	-webkit-animation-play-state: running;
	animation-play-state: running;
}

@keyframes slide_active_img {
	0%   {
		opacity:0;
	}
	5% {
		opacity:1;
	}
	95%  {
		
		opacity:1;
	}
	100% {
		opacity:0;
		-ms-transform: scale(1.1, 1.1); /* IE 9 */
		-webkit-transform: scale(1.1, 1.1); /* Safari */
		transform: scale(1.1, 1.1);
	}

}
@keyframes slide_active_text {
	10%   {
		opacity:0;
	}
	20% {
		opacity:1;
	}
	80%  {
		
		opacity:1;
	}
	90% {
		opacity:0;
	}

}
			
			
	.timeview .slide .text-container{
		display:flex;
		position:absolute;
		right:100px;
		bottom:0;
		height:calc( 100% - 80px );
		width:450px;
		max-width:50%;
		align-items:center;
	}
		.timeview .slide.active .text-container .text {
			animation-name: slide_active_text;
			animation-duration: 6s;
			animation-timing-function: linear;
			opacity:0;
			text-shadow:1px 1px 5px rgba(0,0,0,.5);
		}
		.timeview .slide .text-container .text *{
			color:#fff;
		}
		.timeview .slide .text-container .text p{
			font-family: 'Campton-Bold';
			font-size:16pt;
			line-height:26pt;
		}
		.timeview .slide .text-container .text h3{
			font-family: 'Campton-Light';
			font-size:11pt;
			margin-bottom:20px;
		}
		.timeview .slide .text-container .text h2{
			font-size:16pt;
		}
		.timeview .slide .text-container .text a{
			font-size:10pt;
			background:#09c;
			padding:5px 10px;
		}
		.timeview .slide .text-container .text a:hover{
			background:#ec437e;
		}
			.timeview .slide .text-container .text a i{
				margin-left:8px;
				font-size:11pt;
			}

@media (max-width: 576px) {
	.timeview .slide .text-container{
		right:30px;
		top:auto;
		height:auto;
		bottom:100px;
		align-items:bottom;
	}
	.timeview .slide .text-container .text p{
		font-size:10pt;
		line-height:11pt;
	}
	.timeview .slide .text-container .text h3{
		font-size:13pt;
		margin-bottom:5px;
	}
	.timeview .slide .text-container .text h2{
		
			font-size:14pt;
		}
	.timeview .slide .text-container .text a{
		font-size:10pt;
	}
}
@media (min-width: 768px) {
	.timeview .slide .text-container .text p{
		font-size:14pt;
		line-height:20pt;
	}
	.timeview .slide .text-container .text h3{
		font-size:10pt;
		margin-bottom:10px;
	}
	.timeview .slide .text-container .text h2{
		
			font-size:14pt;
		}
	.timeview .slide .text-container .text a{
		font-size:8pt;
	}
}
@media (min-width: 992px) {
	.timeview .slide .text-container .text p{
		font-size:14pt;
		line-height:18pt;
	}
	.timeview .slide .text-container .text h3{
		font-size:13pt;
		margin-bottom:15px;
	}
	.timeview .slide .text-container .text h2{
			
			font-size:17pt;
		}
	.timeview .slide .text-container .text a{
		font-size:10pt;
	}
	.timeview .slide .text-container .text a i{
		font-size:11pt;
	}
}
@media (min-width: 1200px) {
	
}			
			
			
			
	.timeview .timeline{
		position:absolute;
		left:150px;
		bottom:20px;
		width: calc(100% - 250px);
		height: 20px;
	}
		.timeview .timeline .point{
			display:none;
			position:absolute;
			width:10px;
			height:10px;
			border-radius:5px;
			border:solid 1px #fff;
			-webkit-transition:border .5s;
			cursor:pointer;
		}
		.timeview .timeline .point.active{
			border:solid 1px #00a3d1;
			background:#00a3d1;
		}
		.timeview .timeline .point.current{
			background:#00a3d1;
		}
			.timeview .timeline .point.current:after{
				content:" ";
				position:absolute;
				left:-6px;
				top:-6px;
				width:20px;
				height:20px;
				border-radius:14px;
				border:solid 1px #00a3d1;
			}
		.timeview .timeline .point .title{
			opacity:0;
			position:absolute;
			font-size:80%;
			left:0;
			top:-30px;
			left:-125px;
			text-align:center;
			width:250px;
			color:#00a3d1;
		}
		.timeview .timeline .line{
			position:absolute;
			height:1px;
			background:#fff;
			top:4px;
			padding: 0;
		}
			.timeview .timeline .line .inner{
				position:absolute;
				left:0;
				top:0;
				width:0;
				height:1px;
				background:#00a3d1;
			}

	
@media (min-width:992px) {
	.timeline{
		left:250px;
		bottom:22px;
	}
	.timeview .timeline .point{
		display:block;
	}
	.timeline .line{
		height:1px;
		background:#fff;
	}
	.timeline-play,
	.timeline-pause{
		left:50px;
		bottom:22px;
		font-size: 12pt;
	}
}



.timeline-play,
.timeline-pause{
	position:absolute;
	left:50px;
	bottom:25px;
	color:#fff;
	cursor:pointer;
	font-size:10pt;
}
.timeline-play svg,
.timeline-play i,
.timeline-pause svg,
.timeline-pause i{
	font-size:80%;
	margin-left:5px;
}

.timeline-play{
	display:none;
}