/**
 * (en) Design of progress bar elements
 * (de) Standardformatierungen von Elementen der Forschrittsanzeige
 *
 * @copyright			Copyright 2017, crossbase mediasolution GmbH
 * @version				1.0
 */

@media screen {

	.progress-wrapper {
		padding: 20px 0 40px 0;
		margin: 0 0 12px 0;
	}

	ol.progress-track {
		display: table;
		list-style-type: none;
		margin: 0;
		table-layout: fixed;
		width: 100%;
	}
	ol.progress-track li {
		display: table-cell;
		position: relative;
		text-align: center;
		margin: 0;
	}
	ol.progress-track li.progress-done {
		border-top: 6px solid #1d374a;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	ol.progress-track li.progress-done.progress-current .icon-wrap {
		background: #1d374a;
		color: #fff;
	}

	ol.progress-track li.progress-done.progress-current .progress-text {
		color: #1d374a;
	}

	ol.progress-track li.progress-done .icon-wrap {
		background: #fff;
		color: #000000;
		border: 6px solid #1d374a;
	}

	ol.progress-track li.progress-done a {
		position: static;
	}

	ol.progress-track li.progress-done a .icon-wrap {
		background: #fff;
		color: #001489;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	ol.progress-track li.progress-done a .icon-wrap:hover {
		background: #1d374a;
		color: #fff;
	}

	/*li.progress-done a .progress-text::after {
		content: '';
		background: #1d374a;
		width: 0;
		height: 2px;
		position: absolute;
		left: 0;
		bottom: 3px;
		-webkit-transition: width 0.3s ease;
		transition: width 0.3s ease;;
	}

	li.progress-done a .progress-text:hover::after {
		width: 100%;
	}*/
		
	ol.progress-track li .icon-wrap {
		font-family: 'Univers LT Bold', ​cnRegular, ​sans-serif;
		border-radius: 50%;
		top: -24px;
		color: #fff;
		display: block;
		height: 32px;
		margin: 0 auto;
		left: 0;
		right: 0;
		position: absolute;
		width: 32px;
		line-height: 34px;
	}

	ol.progress-track li .progress-text {
		font-family: 'Univers LT Bold', ​cnRegular, ​sans-serif;
		position: relative;
		top: 20px;
	}

	ol.progress-track li.progress-todo {
		border-top: 6px solid #ededed;
		color: black;
	}

	ol.progress-track li.progress-todo .icon-wrap {
		border: 6px solid #ededed;
		color: #ededed;
		background: #fff;
	}

	ol.progress-track li.progress-todo .progress-text {
		color: #ededed;
	}

	ol.progress-track li.progress-current::before {
		background: #1d374a;
		content: "";
		height: 6px;
		position: absolute;
		right: -3px;
		top: -10px;
		transform: rotate(45deg);
		width: 16px;
		z-index: 1;
	}
	ol.progress-track li.progress-current::after {
		background: #1d374a;
		content: "";
		height: 6px;
		position: absolute;
		right: -3px;
		top: -2px;
		transform: rotate(-45deg);
		width: 16px;
		z-index: 1;
	}	
	
	ol.progress-track li.progress-todo::before,
	ol.progress-track li.progress-todo::after {
		background: #f1f1f1;
	}

}

/*------------------------------------------------------------------------------------------------------*/
/* (en) Media Query 560 */
/* (de) Media Query 560 */
/*------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 560px) {

	.progress-wrapper {
		padding: 20px 0 0;
		margin: 0 0 -8px 0;
	}

	ol.progress-track {
		display: block;
	}
	
	ol.progress-track li {
		display: block;
		padding: 20px 0;
	}
	
	ol.progress-track li .progress-text {
		top: 0;
	}
	
}