/* timetracks */
/* ========== */

.widget.timetracks {
	height:66.666vh; /* 2/3rds of window height */
	width:100%;
	background-color:#eeeeee;
	box-shadow:2px 2px 9px rgba(0,0,0,0.2);
	position:relative;
	visibility:hidden;
}

.widget.timetracks .options {
	position:absolute;
	bottom:0;
	right:0;
	z-index:3;
}

.widget.timetracks .details {
	height:50%;
	width:100vh;
	position:absolute;
	top:0;
	left:calc(50% - 50vh);
	overflow:hidden;
}

@media screen and (min-width: 976px) {
	.widget.timetracks .details {
		display:block !important;
	}
}

.widget.timetracks .details .options a {
	width:4em;
	height:4em;
	border:0.5em solid transparent;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
	filter: brightness(0.1);
	-webkit-filter: brightness(0.1);
	display:block;
	float:right;
}

.widget.timetracks .details .options a.close {
	background-image:url(/media/img/main/icons/icon_fullscreen_close.png);
	width:2em;
	height:2em;
	border-width:1.5em;
}

.widget.timetracks .details .options a.next { background-image:url(/media/img/main/icons/slideshow_right.png); }
.widget.timetracks .details .options a.prev { background-image:url(/media/img/main/icons/slideshow_left.png); }
.widget.timetracks .details .options a.first { background-image:url(/media/img/main/icons/slideshow_all_left.png); }
.widget.timetracks .details .options a.last { background-image:url(/media/img/main/icons/slideshow_all_right.png); }
.widget.timetracks .details .options a.inactive {
	opacity:0.2;
	cursor:default;
}

.widget.timetracks .details .pic {
	height:calc( 66.666vh / 2 - 32px);
	width:calc( 66.666vh / 2 - 32px);
	position:absolute;
	top:16px;
	left:16px;
	background-size:cover;
	background-position:center center;
	box-shadow:2px 2px 9px rgba(0,0,0,0.2);
	overflow:hidden;
	background-color:#000000;
}

.widget.timetracks .details .pic.has_video {
	background-image:none !important;
}

.widget.timetracks .details.no_image .pic {
	background-image:none !important;
	background-color:transparent;
	box-shadow:none;
	overflow:visible;
}

.widget.timetracks .details .pic .youtube {
	width:100%;
	height:80%;
	margin-top:10%;
}

.widget.timetracks .details .pic .widget.kkvideo {
	margin-top:21.875%;
}

.widget.timetracks .details .pic .page_number {
    background-image: url("/media/img/main/region_textures/tear_out_top_left.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #222222;
    font-size:1.2vh;
    font-weight: bold;
    height: calc(5.833em - 1.25em);
    left: -1px;
    padding: 1.25em 0.4167em 0 0.8333em;
    position: absolute;
    -webkit-filter:drop-shadow(0 0 4px rgba(0,0,0,0.3));
	filter:drop-shadow(0 0 4px rgba(0,0,0,0.3));
    top: -1px;
    width: calc(5.833em - 1.25em);
    z-index: 1;
}

.widget.timetracks .details:not(.pageone) .pic .page_number {
	background-position: -8em 0;
	color:#ffffff;
}

@media screen and (min-width: 976px) {
	.widget.timetracks .details:not(.pageone).no_image .pic .page_number {
		color:#222222;
		filter:none;
		-webkit-filter:none;
	}
}

.widget.timetracks .details .content {
	padding:16px 16px 16px calc( 66.666vh / 2 );
	width:66.666vh;
}

.widget.timetracks .details .content .actor {
	color:#ffffff;
	padding:0 0.25em;
	font-size:1.6vh;
	font-weight:bold;
	text-transform:uppercase;
	line-height:1.6em;
	margin-bottom:0.2em;
	box-shadow:2px 2px 9px rgba(0,0,0,0.2);
	-webkit-box-decoration-break: clone;
	-o-box-decoration-break: clone;
	box-decoration-break:clone;
	display:inline-block;
}

.widget.timetracks .details .content .actor[data-actor_id='0'] { background-color:#f40f97; }
.widget.timetracks .details .content .actor[data-actor_id='1'] { background-color:#edba13; }
.widget.timetracks .details .content .actor[data-actor_id='2'] { background-color:#0fb4f4; }
.widget.timetracks .details .content .actor[data-actor_id='3'] { background-color:#7bd400; }
.widget.timetracks .details .content .actor[data-actor_id='4'] { background-color:#ae2cf2; }
.widget.timetracks .details .content .actor[data-actor_id='5'] { background-color:#f22c2c; }
.widget.timetracks .details .content .actor[data-actor_id='6'] { background-color:#2c4df2; }
.widget.timetracks .details .content .actor[data-actor_id='7'] { background-color:green; }
.widget.timetracks .details .content .actor[data-actor_id='8'] { background-color:green; }
.widget.timetracks .details .content .actor[data-actor_id='9'] { background-color:green; }

.widget.timetracks .details .content .time,
.widget.timetracks .details .content .event {
	font-size:1.6vh;
	font-weight:bold;
	display:inline-block;
	margin-left:0.5em;
}

.widget.timetracks .details .content .time::before,
.widget.timetracks .details .content .event::before {
	content:" – ";
}

.widget.timetracks .details .content .event::after {
	content:"";
	background-size:contain;
	background-repeat:no-repeat;
	background-position:right center;
	width:1.5em;
	height:1.5em;
	display:inline-block;
	vertical-align:text-bottom;
	background-color:#ffffff;
	border-radius:50%;
	box-shadow:2px 2px 9px rgba(0,0,0,0.2);
	margin-left:0.5em;
}

.widget.timetracks .details .content .event[data-event_id='0']::after { background-image:url(/media/img/main/timetracks/abstimmung.png); }
.widget.timetracks .details .content .event[data-event_id='1']::after { background-image:url(/media/img/main/timetracks/vertragsabschluss.png); }
.widget.timetracks .details .content .event[data-event_id='2']::after { background-image:url(/media/img/main/timetracks/beschluss.png); }
.widget.timetracks .details .content .event[data-event_id='3']::after { background-image:url(/media/img/main/timetracks/verhandlung.png); }
.widget.timetracks .details .content .event[data-event_id='4']::after { background-image:url(/media/img/main/timetracks/personalwechsel.png); }
.widget.timetracks .details .content .event[data-event_id='5']::after { background-image:url(/media/img/main/timetracks/ereignis.png); }
.widget.timetracks .details .content .event[data-event_id='6']::after { background-image:url(/media/img/main/timetracks/mediale_momente.png); }

.widget.timetracks .details.startpage .content .actor,
.widget.timetracks .details.startpage .content .time,
.widget.timetracks .details.startpage .content .event {
	display:none;
}

.widget.timetracks .details .content .title {
	margin-bottom:1vh;
}

.widget.timetracks .details .content .title span {
	color:#222222;
	background-color:#ffffff;
	padding:0 0.25em;;
	font-size:3vh;
	font-weight:bold;
	line-height:1.6em;
	box-shadow:2px 2px 9px rgba(0,0,0,0.2);
	-webkit-box-decoration-break: clone;
	-o-box-decoration-break: clone;
	box-decoration-break:clone;
}

.widget.timetracks .details.startpage .content .title span {
	background-color:#f40f97;
	color:#ffffff;
	font-size:4vh;
}

.widget.timetracks .details .content .text {
	font-size:1.8vh;
	line-height:1.5em;
}

.widget.timetracks .tracks {
	height:50%;
	width:100%;
	position:absolute;
	bottom:0;
	perspective:50vh;
	overflow:hidden;
	border-top:2px solid #ffffff;
	border-bottom:2px solid #ffffff;
}

.widget.timetracks .tracks .space3d {
	position:absolute;
	height:100%;
	width:3000%;
	transform-style: preserve-3d;
	transform:rotateX(15deg) translateX(10vw) translateZ(3vh) translateY(-0.5vh);
	transition:transform 0.5s;
}

.widget.timetracks .tracks[data-step='1'] .space3d { transform:rotateX(15deg) translateX(10vw) translateZ(3vh) translateY(-0.5vh) !important; }

.widget.timetracks .tracks .space3d .column {
	height:100%;
	float:left;
	position:relative;
}

.widget.timetracks.numactors_1 .tracks .space3d .column { width:calc( 66.666vh / 2 / 1 ); }
.widget.timetracks.numactors_2 .tracks .space3d .column { width:calc( 66.666vh / 2 / 2 ); }
.widget.timetracks.numactors_3 .tracks .space3d .column { width:calc( 66.666vh / 2 / 3 ); }
.widget.timetracks.numactors_4 .tracks .space3d .column { width:calc( 66.666vh / 2 / 4 ); }
.widget.timetracks.numactors_5 .tracks .space3d .column { width:calc( 66.666vh / 2 / 5 ); }
.widget.timetracks.numactors_6 .tracks .space3d .column { width:calc( 66.666vh / 2 / 6 ); }
.widget.timetracks.numactors_7 .tracks .space3d .column { width:calc( 66.666vh / 2 / 7 ); }
.widget.timetracks.numactors_8 .tracks .space3d .column { width:calc( 66.666vh / 2 / 8 ); }
.widget.timetracks.numactors_9 .tracks .space3d .column { width:calc( 66.666vh / 2 / 9 ); }
.widget.timetracks.numactors_10 .tracks .space3d .column { width:calc( 66.666vh / 2 / 10 ); }

.widget.timetracks .tracks .space3d .column:nth-child(odd) {
	background-color:rgba(0,0,0,0.05);
}

.widget.timetracks .tracks .space3d .column .time {
	font-size:1.2vh;
	font-weight:bold;
	width:100%;
	text-align:center;
	position:absolute;
	top:0.5em;
	z-index:1;
}

.widget.timetracks .tracks .space3d .column .row {
	width:100%;
	height:0;
	padding-bottom:calc(100% - 0.2vh);
	border-bottom:0.200001vh solid #f7f7f7;
	position:relative;
}

.widget.timetracks .tracks .space3d .column .row::before {
	content:"";
	display:block;
	width:100%;
	height:2px;
	background-color:#999999;
	position:absolute;
	top:calc(50% - 1px);
	left:50%;
}

.widget.timetracks .tracks .space3d .column:last-child .row::before {
	left:0;
	width:50%;
}

.widget.timetracks .tracks .space3d .column .row::after {
	content:"";
	display:block;
	width:12%;
	height:12%;
	border-radius:50%;
	background-color:#ffffff;
	box-shadow:2px 2px 9px rgba(0,0,0,0.2);
	position:absolute;
	left:44%;
	top:44%;
}

.widget.timetracks .tracks .space3d .column .row .event {
	width:40%;
	height:40%;
	border-radius:50%;
	background-color:#ffffff;
	box-shadow:0 2px 9px rgba(0,0,0,0.2);
	position:absolute;
	left:30%;
	top:30%;
	z-index:1;
	background-image:url(/media/img/main/timetracks/ereignis.png);
	background-size:cover;
	cursor:pointer;
	transition: width 0.2s ease,  height 0.2s ease, left 0.2s ease, top 0.2s ease;
}

.widget.timetracks .tracks .space3d .column .row .event.icon_0 { background-image:url(/media/img/main/timetracks/abstimmung.png); }
.widget.timetracks .tracks .space3d .column .row .event.icon_1 { background-image:url(/media/img/main/timetracks/vertragsabschluss.png); }
.widget.timetracks .tracks .space3d .column .row .event.icon_2 { background-image:url(/media/img/main/timetracks/beschluss.png); }
.widget.timetracks .tracks .space3d .column .row .event.icon_3 { background-image:url(/media/img/main/timetracks/verhandlung.png); }
.widget.timetracks .tracks .space3d .column .row .event.icon_4 { background-image:url(/media/img/main/timetracks/personalwechsel.png); }
.widget.timetracks .tracks .space3d .column .row .event.icon_5 { background-image:url(/media/img/main/timetracks/ereignis.png); }
.widget.timetracks .tracks .space3d .column .row .event.icon_6 { background-image:url(/media/img/main/timetracks/mediale_momente.png); }

.widget.timetracks .tracks .space3d .column .row:hover .event:not(.active) {
	width:44%;
	height:44%;
	left:27%;
	top:27%;
}

.widget.timetracks .tracks .space3d .column .row .event.active {
	width:44%;
	height:44%;
	left:calc(27% - 0.2vh);
	top:calc(27% - 0.2vh);
	border:0.4vh solid #ff9306;
}

.widget.timetracks .tracks .space3d .column .row .event.highlight {
	transform:scale(1.4);
}

.widget.timetracks .tracks .space3d .column .row .event.highlight::after,
.widget.timetracks .tracks .space3d .column .row .event.video::after {
	display:block;
	background-color:#ffffff;
	position:absolute;
	bottom:-10%;
	left:85%;
	border-radius:10%;
	font-weight:bold;
	color:#222222;
	padding:0.25em;
	font-size:1.2em;
	box-shadow:0 2px 9px rgba(0,0,0,0.2);
}

.widget.timetracks .tracks .space3d .column .row .event.highlight::after { content:"!"; }
.widget.timetracks .tracks .space3d .column .row .event.video::after { content:"Video"; }

.widget.timetracks .tracks .space3d .column .row .actor {
	position:absolute;
	bottom:0;
	background-color:#f40f97;
	color:#ffffff;
	padding:0 0.25em;
	font-size:1.2vh;
	font-weight:bold;
	text-transform:uppercase;
	line-height:1.6em;
	box-shadow:2px 2px 9px rgba(0,0,0,0.2);
	white-space:nowrap;
	z-index:2;
	transition:left 0.5s;
}

.widget.timetracks .tracks[data-step='1'] .space3d .column .row .actor {
	left:0 !important;
}

.widget.timetracks .tracks .space3d .column .row:nth-child(3) .actor { background-color:#edba13; }
.widget.timetracks .tracks .space3d .column .row:nth-child(4) .actor { background-color:#0fb4f4; }
.widget.timetracks .tracks .space3d .column .row:nth-child(5) .actor { background-color:#7bd400; }
.widget.timetracks .tracks .space3d .column .row:nth-child(6) .actor { background-color:#ae2cf2; }
.widget.timetracks .tracks .space3d .column .row:nth-child(7) .actor { background-color:#f22c2c; }
.widget.timetracks .tracks .space3d .column .row:nth-child(8) .actor { background-color:#2c4df2; }
.widget.timetracks .tracks .space3d .column .row:nth-child(9) .actor { background-color:green; }
.widget.timetracks .tracks .space3d .column .row:nth-child(10) .actor { background-color:green; }
.widget.timetracks .tracks .space3d .column .row:nth-child(11) .actor { background-color:green; }

.widget.timetracks .tracks .fade {
    position:absolute;
    top:0;
    bottom:0;
    z-index:4;
    width:8em;
}	

.widget.timetracks .tracks .fade.left {
    left:0;
    background: linear-gradient(to right, rgba(0,0,0,0.12) 0,rgba(0,0,0,0) 75%);
}

.widget.timetracks .tracks[data-step='1'] .fade.left {
	display:none;
}

.widget.timetracks .tracks .fade.right {
    right:0;
    background: linear-gradient(to left, rgba(0,0,0,0.12) 0,rgba(0,0,0,0) 75%);
}

.widget.timetracks.last_step .tracks .fade.right {
	display:none;
}

.widget.timetracks .tracks .fade .control {
    position:absolute;
    width:5em;
    height:5em;
    top:calc((100% - 5em) / 2);
    cursor:pointer;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(1px 1px 4.5px rgba(0, 0, 0, 0.4));
	-webkit-filter: drop-shadow(1px 1px 4.5px rgba(0, 0, 0, 0.4));
}

.widget.timetracks .tracks .fade.left .control {
    left:10px;
    background-image: url("/media/img/main/icons/slideshow_left.png");
}

.widget.timetracks .tracks .fade.right .control {
    right:10px;
    background-image: url("/media/img/main/icons/slideshow_right.png");
}

.widget.timetracks .tracks .indicator {
	background-color:#222222;
	height:2px;
	position:absolute;
	bottom:0;
	left:0;
	transition:left 0.5s ease, opacity 0.5s ease;
	opacity:1;
}

.widget.timetracks .tracks[data-step='1'] .indicator {
	opacity:0;
}

@media screen and (max-width: 975px) {
	.widget.timetracks {
		height:auto;
	}
	
	.widget.timetracks .options {
		bottom:auto;
		top:0;
	}
	
	.widget.timetracks .mobile_header {
		padding:16px;
		position:relative;
	}
	
	.widget.timetracks .mobile_header .pic {
		height:100%;
		width:50%;
		background-size:cover;
		background-position:center center;
		position:absolute;
		top:0;
		left:0;
	}
	
	.widget.timetracks .mobile_header .pic::after {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		content:"";
		background: linear-gradient(to right, rgba(238,238,238,0) 20%,rgba(238,238,238,1) 100%);
	}
	
	.widget.timetracks .details .pic .page_number {
		font-size:1.2em;
	}
	
	.widget.timetracks .mobile_header .content {
		padding-left:25vw;
		width:calc(75vw - 32px);
		position:relative;
	}
	
	.widget.timetracks .mobile_header .content .title {
		margin-bottom:1vh;
	}
	
	.widget.timetracks .mobile_header .content .title span {
		color:#ffffff;
		background-color:#f40f97;
		padding:0 0.25em;;
		font-size:3vh;
		font-weight:bold;
		line-height:1.6em;
		box-shadow:2px 2px 9px rgba(0,0,0,0.2);
		-webkit-box-decoration-break: clone;
		-o-box-decoration-break: clone;
		box-decoration-break:clone;
	}
	
	.widget.timetracks .mobile_header .content .text {
		font-size:2.4vh;
		line-height:1.5em;
	}
	
	.widget.timetracks .details {
		position:fixed;
		top:0;
		right:0;
		bottom:0;
		left:0;
		width:auto;
		height:auto;
		background-color:#000000;
		z-index:12348; /* same as .fullscreen elements */
		display:none;
	}
	
	.widget.timetracks .details .options a {
		filter: drop-shadow(1px 1px 4.5px rgba(0, 0, 0, 0.4));
		-webkit-filter: drop-shadow(1px 1px 4.5px rgba(0, 0, 0, 0.4));
	}
	
	.widget.timetracks .details .pic {
		top:0;
		left:0;
		width:100vw;
		height:100vw;
	}
	
	.widget.timetracks .details .pic:not(.has_video)::after {
		position:absolute;
		top:0;
		left:0;
		width:100vw;
		height:100vw;
		content:"";
		background: linear-gradient(to bottom, rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%);
		z-index:1;
	} 
	
	.widget.timetracks .details .content {
		position:absolute;
		padding:16px;
		bottom:0;
		z-index:2;
		color:#ffffff;
		width:auto;
	}
	
	.widget.timetracks .details .content .event,
	.widget.timetracks .details .content .time,
	.widget.timetracks .details .content .actor,
	.widget.timetracks .details .content .text {
		font-size:1.8em;
	}
	
	.widget.timetracks .details .content .title span {
		font-size:2.4em;
	}
	
	.widget.timetracks .tracks {
		height:50vh;
		position:relative;
	}
	
	.widget.timetracks .tracks[data-step='1'] .space3d {
		transform:rotateX(15deg) translateX(10vw) translateZ(2.5vh) translateY(-2.5vh) !important;
	}

	.widget.timetracks.numactors_1 .tracks .space3d .column { width:calc( 50vh / 1 ); }
	.widget.timetracks.numactors_2 .tracks .space3d .column { width:calc( 50vh / 2 ); }
	.widget.timetracks.numactors_3 .tracks .space3d .column { width:calc( 50vh / 3 ); }
	.widget.timetracks.numactors_4 .tracks .space3d .column { width:calc( 50vh / 4 ); }
	.widget.timetracks.numactors_5 .tracks .space3d .column { width:calc( 50vh / 5 ); }
	.widget.timetracks.numactors_6 .tracks .space3d .column { width:calc( 50vh / 6 ); }
	.widget.timetracks.numactors_7 .tracks .space3d .column { width:calc( 50vh / 7 ); }
	.widget.timetracks.numactors_8 .tracks .space3d .column { width:calc( 50vh / 8 ); }
	.widget.timetracks.numactors_9 .tracks .space3d .column { width:calc( 50vh / 9 ); }
	.widget.timetracks.numactors_10 .tracks .space3d .column { width:calc( 50vh / 10 ); }
	
	.widget.timetracks .tracks .space3d .column .time {
		font-size:1.6vh;
	}
	
	.widget.timetracks .tracks .space3d .column .row .actor {
		transition:left 1s;
		font-size:1.6vh;
	}
}

@media screen and (max-width: 591px) {
	.widget.timetracks .tracks .space3d .column .time,
	.widget.timetracks .tracks .space3d .column .row .actor {
		font-size:1.8em;
	}
}