/*
// ##########################
// ##  Fortschrittsbalken  ##
// ##########################
*/

	.portal-progress {
		display: block;
		height: 10px;
		width: 100%;
		position: relative;
		background-color: #efefef;
		border-radius: 5px;
		margin: 5px 0 5px 0;
	}

	.portal-progress span {
		position: absolute;
		height: 10px;
		content: '';
		display: block;
		top: 0;
		bottom: 0;
		left: 0;
		background-color: #3475B4;
		border-radius: 5px;
		overflow: hidden;
	}

	.portal-progress.goal-20:before {
		width: 20%;
	}
	.portal-progress.goal-40:before {
		width: 40%;
	}
	.portal-progress.goal-60:before {
		width: 60%;
	}
	.portal-progress.goal-80:before {
		width: 80%;
	}
	.portal-progress.goal-100:before {
		width: 100%;
	}

/**
 * The "shine" element
 */

.portal-progress span:after {
	content: ' ';
	position: absolute;
	width: 150px;
	height: 50px;
	animation: slide 1.3s linear infinite;
	text-shadow: 2px 2px 4px #000000;

	top: -20px;
	opacity: 0.3;
}

@keyframes slide {
  from {
    left: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  }
  to {
    left: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  }
}



/* Active state */

.portal-progress span:active:after {
  opacity: 0;
}