/* ------------------------------ */
/* GENERAL */
/* ------------------------------ */

	/* Project Full name is not a link */
		li.projectFullName.disabled,
		li.projectFullName.disabled a {
			cursor: default !important;
		}
		li.projectFullName.disabled a:after {
			opacity: 0;
		}
		li.projectFullName.disabled:active,
		li.projectFullName.disabled a:active {
			opacity: 1 !important;
		}


		.htmlLandingpageProject .acc .panel > p {
			max-width: 80%;
		}

/* ------------------------------ */
/* CUSTOMERLANDING > STAGE */
/* ------------------------------ */

	/* Stage Teaser */

	.landingpage .home-stage {
		height: 38vh;
		width: 100vw;	
		position: relative;
		overflow: hidden;
		background-color: var(--brandPrimary);
	}
	.landingpage .home-stage .body-wrapper {	
		margin: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		-ms-transform: translate(-50%, calc(-50%));
		transform: translate(-50%, calc(-50%));
		z-index: 10;
		
	}
	.landingpage .body-wrapper .teaser {
  		display: flex;
  		justify-content: center;
  		align-items: center;		
  		flex-direction: column;		
	}

/* ------------------------------ */
/* siegmund.design > STAGE */
/* ------------------------------ */

	/* Stage Teaser */

	.home .home-stage {
		height: 54vh;
		min-height: 24rem;
		width: 100vw;	
		position: relative;
		overflow: hidden;
		background-color: var(--b96);
	}
	.home .home-stage .body-wrapper {	
		margin: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		-ms-transform: translate(-50%, calc(-50%));
		transform: translate(-50%, calc(-50%));
		z-index: 10;
		
	}
	.home .body-wrapper .teaser {
  		display: flex;
  		justify-content: center;
  		align-items: center;		
  		flex-direction: column;		
	}	


/* ------------------------------ */
/* PROJECTLANDING > STAGE */
/* ------------------------------ */

	.customerLogo {
	  	background-repeat: no-repeat;
	  	background-size: 40rem;
	  	background-position: center;	
	  	width: 100%;
	  	height: 40rem;	
	}
	.landingpage.stage .customerLogo {
		max-height: 4rem;
		background-size: contain;
	}	
	.landingpage.stage {
		background-color: var(--brandPrimary);
		padding: var(--sp600);
		/*margin-top:  var(--sp700);*/
	}
	.landingpage.stage h1 {
		margin-top:  var(--sp100);
		width:  100%;
		text-align: center;
	}
	.landingpage.stage h1.light {
		color:  var(--n100);
	}
	.landingpage.stage h1.dark {
		color:  var(--n20);
	}

/* ------------------------------ */
/* APP CARDS */
/* ------------------------------ */
	
	/* Addons */
		.appCard .img .addon.waterfox {
			background-image: url("../resources/thumbnails/addons/Type=waterfox.svg");
		}			


	/* ------------------------------ */
	#archivedProjects .card-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		flex-wrap: wrap;
		row-gap: var(--sp400);	
		column-gap: var(--sp400);		
		overflow: visible !important;
	}
	#archivedProjects .card-wrapper .img {
		overflow: hidden !important;
		/*background-color: var(--brandSecondary);
		width: calc(100% - (var(--sp100)*2));	*/	
	}
	#archivedProjects .card-wrapper .img img {
		height: 100%;
		object-fit: cover;
		/*filter: grayscale(100%);*/
		
	}
	#archivedProjects .card-wrapper .appCard-wrapper {
		flex: 0 0 calc((100% - 16rem)/5);
		padding: var(--sp100);
		padding-bottom: var(--sp200);
		position: relative;
		border: 2px solid rgba(0, 0, 0, 0);
	}	
	/* ------------------------------ */


	.landingpage .card-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		flex-wrap: wrap;
		row-gap: var(--sp400);	
		column-gap: var(--sp400);		
		overflow: visible !important;
	}
	.landingpage .card-wrapper .appCard-wrapper {
		flex: 0 0 calc((100% - 16rem)/5);
		/**/padding: var(--sp100);
		padding-bottom: var(--sp200);
		position: relative;
		border: 2px solid rgba(0, 0, 0, 0);
		
	}

	.panel .landingpage {
		padding-left: ;
		padding-right: ;
	}
	.appCard .img {
		height: 12rem;
		background-color: var(--n90);
		position: relative;
		overflow: visible !important;
	}
	.appCard .content {
		margin-top: var(--sp200);
		position: relative;
		height: 100%;
		/*
		padding-left: var(--sp100);
		padding-right: var(--sp100);
		padding-bottom: var(--sp200);
		*/
	}
	.appCard .img div {	
		/*width: calc(100% - (var(--sp100)*2));*/
		background-color: var(--n90);
		width: 100%;	
	}
	.appCard .img {
		/*padding-left: var(--sp100);
		padding-right: var(--sp100);
		padding-top: var(--sp100);		
		width: calc(100% - (var(--sp100)*2));*/
		background-color: #fff;
	}

	.appCard .content p, .appCard .content h4 {
		color: var(--n20);
		margin: 0;
	}
	.appCard .content p {
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden; 		
	}
	.appCard .content p.sub, 
	.appCard .content time {
		color: var(--n60);

		font-family: 'Barlow', sans-serif;
		font-size: 1.8rem;
		font-weight: 400;
		line-height: 3.2rem;
		margin: 0;		
	}	
	.appCard .content h4 {
		margin-bottom: var(--sp50);
	}

	/* Hover */
	.appCard-wrapper {
		-webkit-transition: all var(--a100) ease-in-out;
		transition: all var(--a100) ease-in-out;
	}	
	.appCard-wrapper:hover {
		border: 2px solid var(--n20) !important;
		cursor: pointer;
	}

	/* Disabled */
	.appCard-wrapper.disabled:hover {
		cursor: default;
		border: 2px solid rgba(0,0,0,0) !important;		
	}
	.appCard-wrapper.disabled .options {
		display:  none;
	}


	/* Thumbnail  */
	.appCard .img .thumbnail {
		width:  100%;
		height:  100%;
	  	background-repeat: no-repeat;
	  	background-size: 8rem;
	  	background-position: center;	
	}	

	/* Addon  */
	.appCard .img .addon {
		width: 4rem;
		height: 4rem;
		border-radius: 100%;
		background-color: var(--n100);
		position: absolute;
		bottom: 12px;
		right: 12px;
		box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.13);
	  	background-repeat: no-repeat;
	  	background-size: 2.8rem;
	  	background-position: center;					
	}			

	/* Current  */
	.appCard-wrapper.current .appCard .img:after {
		content: "NEW";
		position: absolute;
		bottom: 12px;
		left: 12px;
		padding: 12px;
		background-color: var(--n20);
		line-height:  0 !important;
		font-family: 'Barlow Semi Condensed', sans-serif;
		font-size: 1.4rem;
		font-weight:  600;
		color: var(--n100);
		box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.13);
	}

	/* Favourite  
	.appCard-wrapper.favourite .appCard .img:after {
		content: "Favourite";
		position: absolute;
		bottom: 12px;
		left: 12px;
		padding: 12px;
		background-color: var(--sb100);
		line-height:  0 !important;
		font-family: 'Barlow Semi Condensed', sans-serif;
		font-size: 1.4rem;
		font-weight:  600;
		color: var(--n100);
		box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.13);
	} */
	/* Selfmade */
	.appCard-wrapper.selfmade .img {
		background-color: var(--b96);
	}

	/* Label  */
	.appCard-wrapper .options p.label  {
		font-family: 'Barlow', sans-serif;
		font-size: 1.4rem;
		font-weight: 400;
		line-height: 2.2rem;
		margin: 0;	
		color:  var(--n100);
		position: absolute;
		top: var(--sp200);
		left: var(--sp200);
		width:  75%;
		max-height:  4.8rem;
		overflow: hidden;
	}

	/* Options  */
	.appCard-wrapper .options {		
		top: 0;
		left: 0;		
		position: absolute;
		width:  100%;
		height:  100%;
		opacity: 1;
		overflow:  hidden;
	}

	.appCard-wrapper .options .appCardMenu {
		width: 4rem;
		height: 4rem;
		background-color: ;		
	  	background-repeat: no-repeat;
	  	background-size: 4rem;
	  	background-position: center;					
		float:  right;
		margin-top: 0rem;
		margin-right: 0rem;
		position: relative;
		z-index: 99;
	}
	.appCard-wrapper .options .appCardMenu.open {
		background-image: url("../resources/ic/ic_more_n20.svg");
		border: 0px solid var(--n20);
		-webkit-transition: all var(--a100) ease-in-out;
		transition: all var(--a100) ease-in-out;
	}
	.appCard-wrapper .options .appCardMenu.open:hover {
		background-image: url("../resources/ic/ic_more_white.svg");
		background-color: var(--n20);
		/* border: 0px solid var(--n20);
		transform: scale(1.2) translateX(-4px) */
	}
	.appCard-wrapper .options .appCardMenu.close {
		background-image: url("../resources/ic/ic_cross_white.svg");
		border: 0px solid var(--b84);
		transform: scale(0.75);
	}
	
	.appCard-wrapper .options .appCardMenu:hover {
		cursor: pointer;
	}
	.appCard-wrapper .options .flyout {
		width:  100%;
		height:  100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: var(--b84);
		color: var(--n100);
		display: none;
		z-index: 98;
		outline: 0px solid var(--b84);
		padding-top:  10rem;
	}	
	.appCard-wrapper .options .flyout a {
		margin-left: var(--sp200);
		margin-right: var(--sp200);
		margin-bottom: var(--sp100);	
		display: block;
		width:  auto;
		color: var(--n100);
		background-color: var(--b84);
	}
	.appCard-wrapper .options .flyout a:after {
		background-color: var(--n100);
	}

/* ------------------------------ */
/* PROJECT */
/* ------------------------------ */
	.project .img {
		background-color: var(--brandSecondary);
	}
	/*
	.project .img, .panel .img {
		background-color: var(--brandSecondary);
	}
	*/	

/* ------------------------------ */
/* PRIMARY BUTTON */
/* ------------------------------ */
	
	/*
	.btn-primary-wrapper .btn-state-a p:after, .btn-primary-wrapper.fixed .btn-state-a:after, .btn-primary-wrapper.gallery-btn .btn-state-a:after {
		background-image: url("../resources/ic/ic_arrow_right_n20.svg");
	}
	.btn-primary-wrapper.download .btn-state-a p:after {
		background-image: url("../resources/ic/ic_download_n20.svg");
	}
	*/


/* ------------------------------ */
/* BACKGROUNDS */
/* ------------------------------ */

	.bgCustom01 {background-color: var(--brandPrimary) !important;}
	.bgCustom02 {background-color: var(--brandSecondary) !important;}	


/* ------------------------------------------------------------ */
/* ------------------------------ */
/* RESPONSIVE */
/* ------------------------------ */
/* < 640 ------------------------------------------------------------ */
	@media screen and (max-width: 640px) {

		/*Landingpage*/
		#archivedProjects .card-wrapper .appCard-wrapper,
		.landingpage .card-wrapper .appCard-wrapper {
			flex: 0 0 calc((100% - 4rem)/1);
		}

	}
/* 640 ------------------------------------------------------------ */
	@media (max-width:767px) and (min-width:640px) {	

		/*Landingpage*/
		#archivedProjects .card-wrapper .appCard-wrapper,
		.landingpage .card-wrapper .appCard-wrapper {
			flex: 0 0 calc((100% - 11rem)/2);
		}

	}
/* 768 ------------------------------------------------------------ */
	@media (max-width:1023px) and (min-width:768px) {

		/*Landingpage*/
		#archivedProjects .card-wrapper .appCard-wrapper,
		.landingpage .card-wrapper .appCard-wrapper {
			flex: 0 0 calc((100% - 11rem)/2);	
		}									

	}
/* 1024 ------------------------------------------------------------ */
	@media (max-width:1279px) and (min-width:1024px) {

		/*Landingpage*/
		.landingpage .card-wrapper .appCard-wrapper {
			flex: 0 0 calc((100% - 18rem)/3);
		}	
		#archivedProjects .card-wrapper .appCard-wrapper {
			flex: 0 0 calc((100% - 18rem)/3);			
		}

	}	
/* 1280 ------------------------------------------------------------ */
	@media (max-width:1919px) and (min-width:1280px) {

		/*Landingpage*/		
		.landingpage .card-wrapper .appCard-wrapper {
			flex: 0 0 calc((100% - 25rem)/4);
		}	
		#archivedProjects .card-wrapper .appCard-wrapper {
			flex: 0 0 calc((100% - 18rem)/3);			
		}			

	}
/* 1440 ------------------------------------------------------------ */
	@media (max-width:1919px) and (min-width:1440px) {

		/*Landingpage*/
		.landingpage .card-wrapper .appCard-wrapper {
			flex: 0 0 calc((100% - 25rem)/4);
		}
		#archivedProjects .card-wrapper .appCard-wrapper {
			flex: 0 0 calc((100% - 18rem)/3);
		}			

	}	
/* 1920 ------------------------------------------------------------ */
	@media (max-width:2559px) and (min-width:1920px) {

		/*Landingpage*/
		.landingpage .card-wrapper .appCard-wrapper {
			flex: 0 0 calc((100% - 32rem)/5);
		}
		#archivedProjects .card-wrapper .appCard-wrapper {
			flex: 0 0 calc((100% - 25rem)/4);			
		}			

	}
/* > 2560 ------------------------------------------------------------ */
	@media screen and (min-width: 2560px) {

		/*Landingpage*/
		.landingpage .card-wrapper .appCard-wrapper {
			flex: 0 0 calc((100% - 40rem)/6);
		}
		#archivedProjects .card-wrapper .appCard-wrapper {
			flex: 0 0 calc((100% - 32rem)/5);			
		}		

	}