/**
 * @file        /modules/mod_codedesign_responsive_timeline/assets/css/timeline_vertically.css
 * @copyright   Copyright (C) 2006 - 2025 codeDESIGN | Milos Mandic / All rights reserved.
 * @link        https://www.filterverlag.de
 * @author      codeDESIGN | Milos Mandic <milos.mandic@filterverlag.de>
 */

/* codeDESIGN - timeline_vertically.css */
@charset "utf-8";

/* TIMELINE VERTICALLY */
div.timeline_vertically {
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
div.timeline_vertically [class^="col-"],
div.timeline_vertically [class*=" col-"] {
	padding-left: 0px;
	padding-right: 0px;
}



/* TIMELINE BASIC SETTINGS */
.timeline {
	width: 100%;
	list-style: none;
	margin: 30px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}



/* TIMELINE ITEM */
li.timeline_vertically_item {
	padding-left: 40px;
	position: relative;
}
li.timeline_vertically_item:last-child {
	padding-bottom: 0px;
}
/* TIMELINE INFO */
div.timeline_vertically_info {
	font: 600 14px/14px 'Gilroy','Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
	color: var(--ci_color_blue);
	text-transform: uppercase;
	white-space: nowrap;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
	border: none;
}
/* TIMELINE MARKER */
div.timeline_vertically_marker {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	width: 15px;
}
div.timeline_vertically_marker:before {
	background: var(--ci_color_accent_1);
	width: 15px;
	height: 15px;
	content: "";
	display: block;
	position: absolute;
	border: 2px solid transparent;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	top: 4px;
	left: 0px;
	transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
}
div.timeline_vertically_marker:after {
	width: 2px;
	background: var(--ci_color_accent_1);
	content: "";
	display: block;
	position: absolute;
	top: 24px;
	bottom: 0px;
	left: 6px;
}
li.timeline_vertically_item:last-child div.timeline_vertically_marker:after {
	content: none;
}
li.timeline_vertically_item:not(.period):hover div.timeline_vertically_marker:before {
	background: #ffffff;
	border: 2px solid var(--ci_color_accent_1);
}



/* TIMELINE CONTENT */
div.timeline_vertically_content {
	padding: 20px 20px 20px 20px;
	-moz-box-shadow: 3px 5px 30px 0px rgba(36, 36, 36, 0.15);
	-webkit-box-shadow: 3px 5px 30px 0px rgba(36, 36, 36, 0.15);
	box-shadow: 3px 5px 30px 0px rgba(36, 36, 36, 0.15);
	transition-property: all;
	transition-duration: 0.33s;
	transition-timing-function: cubic-bezier(0.4, 0.6, 0.4, 1.0);
	transition-delay: 0s;
	transition-behavior: normal;
	border: none !important;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
div.timeline_vertically_content div:last-child {
	margin: 0px 0px 0px 0px;
}
div.timeline_vertically_content a,
div.timeline_vertically_content a:link,
div.timeline_vertically_content a:visited {
	font-weight: 600;
	color: var(--ci_color_black);
	text-decoration: none;
	position: relative;
	-moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}
div.timeline_vertically_content a:hover {
	color: var(--ci_color_accent_2);
	text-decoration: none !important;
}
div.timeline_vertically_content a:before {
	content: '';
	width: 100%;
	height: 1px;
	position: absolute;
	background: currentColor;
	top: 100%;
	left: 0;
	pointer-events: none;
	transform-origin: 100% 50%;
	transform: scale3d(0, 1, 1);
	transition: transform 0.3s;
}
div.timeline_vertically_content a:hover:before {
	transform-origin: 0% 50%;
	transform: scale3d(1, 1, 1);
}
div.timeline_vertically_content div.timeline_vertically_title {
	font: var(--font-h4-modules);
	color: var(--ci_color_black);
	letter-spacing: 0px;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 15px 0px;
	position: relative;
	border-bottom: var(--border_bottom-headings);
}
@media only screen and (max-width: 768px) {

	div.timeline_vertically_content div.timeline_vertically_title {
 		font: var(--font-h4-modules-mobile);
	}
  
}
div.timeline_vertically_content div.timeline_vertically_title:after {
	background: var(--ci_color_accent_2);
	bottom: -1px;
	content: "";
	height: 1px;
	margin: 0px 0px 0px 0px;
	position: absolute;
	width: 82px;
	transition: all 0.33s ease-in-out;
	-moz-transition: all 0.33s ease-in-out;
	-o-transition: all 0.33s ease-in-out;
	-webkit-transition: all 0.33s ease-in-out;
}
div.timeline_vertically_content div.timeline_vertically_title:hover:after {
	background: var(--project-color-3);
	width: 180px;
}
/* ITEMS DESKTOP RIGHT */
ul.timeline_vertically_centered > li.timeline_vertically_item:nth-child(odd) div.timeline_vertically_title:after {
	left: 0%;
}
/* ITEMS DESKTOP LEFT */
ul.timeline_vertically_centered > li.timeline_vertically_item:nth-child(even) div.timeline_vertically_title:after {
	right: 0%;
}
@media only screen and (max-width: 991px) {
	
	ul.timeline_vertically_centered > li.timeline_vertically_item:nth-child(odd) div.timeline_vertically_title:after, 
	ul.timeline_vertically_centered > li.timeline_vertically_item:nth-child(even) div.timeline_vertically_title:after {
		left: 0% !important;
	}
	
}



/* TIMELINE PERIOD */
.period {
	padding: 0px;
}
.period div.timeline_vertically_info {
	display: none;
}
.period div.timeline_vertically_marker:before {
	background: transparent;
	content: "";
	width: 15px;
	height: auto;
	border: none;
	border-radius: 0px;
	top: 0px;
	bottom: 30px;
	position: absolute;
	border-top: 2px solid var(--ci_color_accent_1);
	border-bottom: 2px solid var(--ci_color_accent_1);
}
.period div.timeline_vertically_marker:after {
	content: "";
	height: 32px;
	top: auto;
}
.period div.timeline_vertically_content {
	padding: 40px 0 70px;
}
.period div.timeline_vertically_title_separator {
	font: var(--font-h3);
	font-weight: 500;
	color: var(--ci_color_black);
	letter-spacing: 0px;
}
@media only screen and (max-width: 991px) {

	.period div.timeline_vertically_title_separator {
		font: var(--font-h3);
		font-weight: 500;
		color: var(--ci_color_black);
		letter-spacing: 0px;
		margin: 0px 0px 20px 0px;
		padding: 0px 0px 15px 0px;
		position: relative;
		border-bottom: var(--border_bottom-headings);
	}
	.period div.timeline_vertically_title_separator:after {
		background: var(--ci_color_accent_1);
		bottom: -1px;
		content: "";
		height: 2px;
		left: 0;
		margin: 0px 0px 0px 0px;
		position: absolute;
		width: 82px;
		transition: all 0.33s ease-in-out;
		-moz-transition: all 0.33s ease-in-out;
		-o-transition: all 0.33s ease-in-out;
		-webkit-transition: all 0.33s ease-in-out;
	}
	.period div.timeline_vertically_title_separator:hover:after {
		background: var(--ci_color_accent_1);
		width: 180px;
	}

}



/* TIMELINE SPLITTED */
@media only screen and (min-width: 768px) {

	div.timeline_vertically_splitted .timeline, 
	ul.timeline_vertically_centered .timeline {
		display: table;
	}
	div.timeline_vertically_splitted li.timeline_vertically_item, 
	ul.timeline_vertically_centered li.timeline_vertically_item {
		display: inline-block;
		margin: 0px 0px 40px 0px;	
		padding: 0px 0px 0px 0px;
	}
	div.timeline_vertically_splitted div.timeline_vertically_info, 
	ul.timeline_vertically_centered div.timeline_vertically_info,  
	div.timeline_vertically_splitted div.timeline_vertically_marker,  
	ul.timeline_vertically_centered div.timeline_vertically_marker,  
	div.timeline_vertically_splitted div.timeline_vertically_content,  
	ul.timeline_vertically_centered div.timeline_vertically_content,  
	div.timeline_vertically_splitted .period div.timeline_vertically_info,  
	ul.timeline_vertically_centered .period div.timeline_vertically_info {
		display: table-cell;
		vertical-align: top;
		padding: 0px 0px 0px 60px;
	}
	div.timeline_vertically_splitted div.timeline_vertically_marker, 
	ul.timeline_vertically_centered div.timeline_vertically_marker {
		position: relative;
	}
	div.timeline_vertically_splitted div.timeline_vertically_info, 
	ul.timeline_vertically_centered div.timeline_vertically_info {
		padding: 4px 30px 0px 0px;
	}
	div.timeline_vertically_splitted div.timeline_vertically_content, 
	ul.timeline_vertically_centered div.timeline_vertically_content {
		margin: 0px 0px 40px 0px;
		padding: 20px 20px 20px 20px;
	}
	div.timeline_vertically_splitted .period div.timeline_vertically_title, 
	ul.timeline_vertically_centered .period div.timeline_vertically_title {
		position: relative;
		left: -45px;
	}

}
@media only screen and (max-width: 768px) {

	div.timeline_vertically_splitted div.timeline_vertically_info, 
	ul.timeline_vertically_centered div.timeline_vertically_info {
		padding: 5px 30px 0px 40px;
	}
	div.timeline_vertically_splitted div.timeline_vertically_content, 
	ul.timeline_vertically_centered div.timeline_vertically_content {
		margin: 0px 0px 40px 40px;
		padding: 20px 20px 20px 20px;
	}

}



/* TIMELINE CENTERED */
@media only screen and (min-width: 992px) {

	ul.timeline_vertically_centered,  
	ul.timeline_vertically_centered li.timeline_vertically_item,  
	ul.timeline_vertically_centered div.timeline_vertically_info,  
	ul.timeline_vertically_centered div.timeline_vertically_marker,  
	ul.timeline_vertically_centered div.timeline_vertically_content {
		display: block;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}
	ul.timeline_vertically_centered li.timeline_vertically_item {
		padding-bottom: 40px;
		overflow: hidden;
	}
	ul.timeline_vertically_centered div.timeline_vertically_marker {
		position: absolute;
		left: 50%;
		margin-left: -7.5px;
	}
	ul.timeline_vertically_centered div.timeline_vertically_info {
		width: 48%;
	} 
	ul.timeline_vertically_centered div.timeline_vertically_content {
		width: 45%;
	}
	/* ITEMS DESKTOP RIGHT */
	ul.timeline_vertically_centered > li.timeline_vertically_item:nth-child(odd) div.timeline_vertically_info {
		float: left;
		text-align: right;
		padding: 5px 0px 0px 5px;
	}
	ul.timeline_vertically_centered > li.timeline_vertically_item:nth-child(odd) div.timeline_vertically_content {
		background: #ffffff;
		float: right;
		text-align: left;
		margin: 20px 30px 0px 0px;
		padding: 20px 20px 20px 20px;
	}	
	ul.timeline_vertically_centered > li.timeline_vertically_item:nth-child(odd) div.timeline_vertically_content div.timeline_vertically_title:after {
		left: 0%;
	}
	/* ITEMS DESKTOP LEFT */
	ul.timeline_vertically_centered > li.timeline_vertically_item:nth-child(even) div.timeline_vertically_info {
		float: right;
		text-align: left;
		padding: 5px 0px 0px 5px;
	}
	ul.timeline_vertically_centered > li.timeline_vertically_item:nth-child(even) div.timeline_vertically_content {
		background: #ffffff;
		float: left;
		text-align: right;
		margin: 20px 0px 0px 30px;
		padding: 30px 30px 30px 20px;
	}
	ul.timeline_vertically_centered > li.timeline_vertically_item:nth-child(even) div.timeline_vertically_content div.timeline_vertically_title:after {
		right: 0%;
	}
	ul.timeline_vertically_centered > li.timeline_vertically_item.period div.timeline_vertically_content {
		width: 100%;
		/* float: none; */
		padding: 0px 0px 0px 0px;
		text-align: center;
	}
	ul.timeline_vertically_centered .period div.timeline_vertically_marker:after {
		height: 30px;
		bottom: 0px;
		top: auto;
	}
	ul.timeline_vertically_centered .period div.timeline_vertically_title {
		left: auto;
	}

}






/* TIMELINE JUMPLINKS / OK FOR UP TO 20 ITEMS */
ul.timeline_years_jumplinks {
	width: 100%;
	list-style: none;
	margin: 0px 0px 60px 0px;
	padding: 0px 0px 0px 0px;
	display: table;
	table-layout: fixed; 
}
ul.timeline_years_jumplinks li {
	display: table-cell;
	text-align: center;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 10px 0px;
}
@media only screen and (max-width: 991px) {
	
	ul.timeline_years_jumplinks li {
		float: left;
		display: inline-block;
		text-align: left;
		margin: 0px 0px 0px 0px;
		padding: 0px 4px 14px 4px;
	}

}



/* TIMELINE JUMPLINKS / SLIDER SWIPER */
div.timeline_years_swiper_slider_items {
	width: 100%;
	margin: 40px 0px 100px 0px;
	padding: 0px 0px 0px 100px;
	position: relative;
}
div.timeline_years_swiper_slider_items div.swiper-slide a,
div.timeline_years_swiper_slider_items div.swiper-slide a:link,
div.timeline_years_swiper_slider_items div.swiper-slide a:visited {
	background: var(--ci_color_accent_2);
	margin: 0px 0px 0px 0px;
	padding: 2px 10px 2px 10px;
	font-weight: 400;
	color: var(--ci_color_white);
	text-decoration: none;
	display: inline-block;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;	
	position: relative;
}
div.timeline_years_swiper_slider_items div.swiper-slide a:hover {
	background: var(--ci_color_accent_2_hover);
	color: var(--ci_color_white);
	text-decoration: none;
}



/* TIMELINE JUMPLINKS / SLIDER SWIPER - SWIPER NAVIGATION */
div.swiper_slide_timeline_vertically_navigation {
	background: transparent;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	position: absolute;
	top: 30px;
	left: 50px;
	z-index: 9;
}
div.timeline_vertically-swiper-button-prev,
div.timeline_vertically-swiper-button-next {
	background: var(--ci_color_accent_2);
	width: 30px;
	height: 30px;
	color: #ffffff;
	position: absolute;
	bottom: 0px;
	overflow: hidden;
	cursor: pointer;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-transition: all 0.33s ease-in-out;
	transition: all 0.33s ease-in-out;
	-moz-transition: all 0.33s ease-in-out;
	-o-transition: all 0.33s ease-in-out;
}
div.timeline_vertically-swiper-button-prev:hover,
div.timeline_vertically-swiper-button-next:hover {
	background: var(--ci_color_accent_0);
	color: #ffffff;
	text-decoration: none;
}
div.timeline_vertically-swiper-button-prev {
	right: 20px;
	-moz-transform: rotate(270deg);  
	-webkit-transform: rotate(270deg);  
	-o-transform: rotate(270deg);  
	-ms-transform: rotate(270deg);
}
div.timeline_vertically-swiper-button-next {
	right: -20px;
	-moz-transform: rotate(90deg);  
	-webkit-transform: rotate(90deg);  
	-o-transform: rotate(90deg);  
	-ms-transform: rotate(90deg);	
}
div.timeline_vertically-swiper-button-prev:before,
div.timeline_vertically-swiper-button-next:before,
div.timeline_vertically-swiper-button-prev:after,
div.timeline_vertically-swiper-button-next:after {
	content: "\f077";
	font-family: 'Font Awesome 6 Pro';
	font-weight: 100;
	font-size: 1.4em;
	display: block;
	position: absolute;
	-moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}
div.timeline_vertically-swiper-button-prev:before,
div.timeline_vertically-swiper-button-next:before {
	margin: 1px 0px 0px 5px;	
}
div.timeline_vertically-swiper-button-prev:after,
div.timeline_vertically-swiper-button-next:after {
	margin: 39px 0px 0px 5px;
}
div.timeline_vertically-swiper-button-prev:hover:before,
div.timeline_vertically-swiper-button-next:hover:before {
	margin: -39px 0px 0px 5px;
}
div.timeline_vertically-swiper-button-prev:hover:after,
div.timeline_vertically-swiper-button-next:hover:after {
	margin: 1px 0px 0px 5px;
}