/* DEV - START */

body.dev {
	
}

/* DEV - ENDE */

body.overflow {
    overflow: hidden;
    position: relative;
    position: fixed; /* iOS quick & dirty body scroll fix*/
}


/* ---------------------------------------------------------- */
/* BASIC VIEW LAYOUT - START
/* ---------------------------------------------------------- */

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: #1D1B23;
}

#wrapper-body {
	position: absolute;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

section > * {
/* transition: all 0.4s ease-in-out; */

/* Let's enforce some hardware acceleration */
/* -webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden; */
}

section > .wrapper-inner {
	padding: 40px 170px;
}


/** SECTION | FULL HEIGHT **/

	.section-full-height {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.section-full-height > .wrapper-inner {
		flex: 1 1 auto;
	}


/* ---------------------------------------------------------- */
/* FOOTER - START
/* ---------------------------------------------------------- */

footer {
	
}

#page-footer {
	position: absolute;
	right: 150px;
	bottom: 40px;
}

#page-footer ul {
	display: flex;
}

#page-footer ul > li {
	margin-right: 20px;
}

#page-footer ul > li:last-child {
	margin-right: 0px;
}


#page-footer .item-1 {
	position: relative;
	z-index: 0;
	display: block;
	width: 100px;
	overflow: hidden;
	text-indent: -9999px;
}

#page-footer .item-1:after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: url("/images/logo/midweeks.svg") no-repeat center / contain;
}


/* ---------------------------------------------------------- */
/* MAIN NAV - START
/* ---------------------------------------------------------- */

#mainNav-surface {
	position: fixed;
	z-index: 98;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: none;
	background-color: rgba(29,27,35,0.2);
/* 	-webkit-backdrop-filter: blur(10px); */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.run.openNav #mainNav-surface {
/* 	background-color: rgba(29,27,35,0); */
}
	
#mainNav-content {
	position: fixed;
	z-index: 99;
	top: 16px;
	bottom: 16px;
	left: 16px;
	right: 16px;
/* 	background-color: rgba(29,27,35,1); */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

#mainNav-content:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: calc(100vw * 2/3 - 16px);
	background-image: linear-gradient(180deg,rgba(212,165,106,0.9) 0%, rgba(224,180,136,0.9) 100%);
	background: url("/images/placeholder-3.jpg") no-repeat center / cover;
}

/* #mainNav-content > .wrapper-inner:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 17%;
	bottom: 17%;
	background: url("/images/logo/wag-logo-symbol-white.svg") no-repeat center / contain;
	mix-blend-mode: soft-light;
	opacity: 0.1;
} */


#mainNav-content:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(100vw * 1/3 - 16px);
	right: 0;
/* 	background-color: rgba(29,27,35,0.9); */
	background-color: rgba(255,255,255,0.9);
/* 	background: rgba(29,27,35,0.9) url("/images/logo/wag-logo-multicolor.svg") no-repeat center top 60px / 120px; */
}


#mainNav-content.init,
#mainNav-content.init > .wrapper-inner  {
	opacity: 0;
}

#mainNav-content > .wrapper-inner {
	display: flex;
	justify-content: center;
	height: 100%;
	margin-left: calc(100vw * 1/3 - 16px);
	opacity: 1;
}

#trigger-closeMainNav {
	position: absolute;
	z-index: 2;
	top: 20px;
	right: 20px;
	cursor: pointer;
	color: black;
}

#mainNav-content ul {
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 1;
}

#mainNav-content ul > li {
/* 	border: 1px solid red; */
	padding: 8px 0px;
}

#mainNav-content ul a {
	position: relative;
	display: inline-block;	
}

#mainNav-content ul li:hover a:after {
	content: "";
	position: absolute;
	left: -16px;
	right: -16px;
	top: -8px;;
	bottom: -8px;
	border: 1px solid var(--yim_accent_primary);
	border-radius: 20px;
}

	/** OPEN NAV TRANSITION **/
	
	.run.openNav #mainNav-surface {
		animation-name: openNav-transition-mainNavSurface;
		animation-duration: 1000ms;
		animation-delay: 0s; 
		animation-fill-mode: both;
	}
	
	.run.closeNav #mainNav-surface {
		animation-name: closeNav-transition-mainNavSurface;
		animation-duration: 1000ms;
		animation-delay: 0s; 
		animation-fill-mode: forwards;
	}
	
		@keyframes openNav-transition-mainNavSurface {
			0% {
				background-color: rgba(29,27,35,0);
			}
			100%   {
				background-color: rgba(29,27,35,0.2);
			}
		}
		
		@keyframes closeNav-transition-mainNavSurface {
			0% {
				background-color: rgba(29,27,35,0.8);
			}
			100%   { 
				background-color: rgba(29,27,35,0);
			}
		}
	
	.run.openNav #mainNav-content {
		animation-name: openNav-transition-mainNavContent;
		animation-duration: 1000ms;
		animation-delay: 0s; 
		animation-fill-mode: forwards;
	}
	
	.run.openNav #mainNav-content:after {
		animation-name: openNav-transition-mainNavContent1;
		animation-duration: 1000ms;
		animation-delay: 0s; 
		animation-fill-mode: forwards;	
	}

	.run.openNav #mainNav-content:before {
		animation-name: openNav-transition-mainNavContent2;
		animation-duration: 1000ms;
		animation-delay: 0s; 
		animation-fill-mode: forwards;	
	}
	
	.run.openNav #mainNav-content > .wrapper-inner {
		animation-name: openNav-transition-mainNavContent3;
		animation-duration: 1000ms;
		animation-delay: 500ms; 
		animation-fill-mode: both;		
	}
	
	.run.closeNav #mainNav-content {
		animation-name: closeNav-transition-mainNavContent;
		animation-duration: 1000ms;
		animation-delay: 0s; 
		animation-fill-mode: forwards;
	}
	
	.run.closeScene #mainNav-content {
		animation-name: closeNav-transition-mainNavContent;
		animation-duration: 400ms;
		animation-delay: 0s; 
		animation-fill-mode: forwards;
	}
	
/* 		@keyframes openNav-transition-mainNavContent {
			0% {
				opacity: 0;
				bottom: 100%;
			}
			100%   { 
				opacity: 1;
				bottom: 16px;
			}
		} */
	
		@keyframes closeNav-transition-mainNavContent {
			0% {
				opacity: 1;
				bottom: 16px;
			}
			100%   { 
				opacity: 0;
				bottom: 100%;
			}
		}


		@keyframes openNav-transition-mainNavContent1 {
			0% {
				opacity: 0;
				left: calc(100vw * 1/3 - 16px);
			}
			100%   { 
				opacity: 1;
				left: 0;
			}
		}

		@keyframes openNav-transition-mainNavContent2 {
			0% {
				opacity: 0;
				right: calc(100vw * 2/3 - 16px);
			}
			100%   { 
				opacity: 1;
				right: 0;
			}
		}

		@keyframes openNav-transition-mainNavContent3 {
			0% {
				transform: translateX(-100px);
				opacity: 0;
			}
			100%   {
				transform: translateX(0px);
				opacity: 1;
			}
		}

/* ---------------------------------------------------------- */
/* APPOINTMENT SCHEDULER - START
/* ---------------------------------------------------------- */

#appointmentScheduler-surface {
	position: fixed;
	z-index: 99;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: none;
/* 	background-color: rgba(29,27,35,0.2); */
/* 	-webkit-backdrop-filter: blur(10px); */
}

.run.openForm #appointmentScheduler-surface {
	background-color: rgba(29,27,35,0);
}
	
#appointmentScheduler-content {
	position: fixed;
	z-index: 99;
	top: 16px;
	bottom: 16px;
	left: 16px;
	right: 16px;
/* 	background-color: rgba(29,27,35,1); */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

#appointmentScheduler-content:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: calc(100vw * 2/3 - 16px);
	background: url("/images/placeholder-3.jpg") no-repeat center / cover;
	/* background-image: linear-gradient(180deg,rgba(212,165,106,0.9) 0%, rgba(224,180,136,0.9) 100%); */
	
}

/* #appointmentScheduler-content > .wrapper-inner:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 17%;
	bottom: 17%;
	background: url("/images/logo/wag-logo-symbol-white.svg") no-repeat center / contain;
	mix-blend-mode: soft-light;
	opacity: 0.1;
} */


#appointmentScheduler-content:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(100vw * 1/3 - 16px);
	right: 0;
	background-color: rgba(255,255,255,0.9);
	/* background: rgba(29,27,35,0.9) url("/images/logo/wag-logo-multicolor.svg") no-repeat center top 60px / 120px; */
}


#appointmentScheduler-content.init,
#appointmentScheduler-content.init > .wrapper-inner  {
	opacity: 0;
}

#appointmentScheduler-content > .wrapper-inner {
	display: flex;
	justify-content: center;
	height: 100%;
	margin-left: calc(100vw * 1/3 - 16px);
	opacity: 1;
}

#trigger-closeAppointmentScheduler {
	position: absolute;
	z-index: 2;
	top: 20px;
	right: 20px;
	cursor: pointer;
	color: black;
}

#appointmentScheduler-content .appointmentScheduler {
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 1;
	overflow: hidden;
	width: calc(100% / (5/3));
}

	/** OPEN FORM TRANSITION **/
	
	.run.openForm #appointmentScheduler-surface {
		animation-name: openForm-transition-appointmentSchedulerSurface;
		animation-duration: 1000ms;
		animation-delay: 0s; 
		animation-fill-mode: forwards;
	}
	
	.run.closeForm #appointmentScheduler-surface {
		animation-name: closeForm-transition-appointmentSchedulerSurface;
		animation-duration: 1000ms;
		animation-delay: 0s; 
		animation-fill-mode: forwards;
	}
	
		@keyframes openForm-transition-appointmentSchedulerSurface {
			0% {
				background-color: rgba(29,27,35,0);
			}
			100%   {
				background-color: rgba(29,27,35,0.8);
			}
		}
		
		@keyframes closeForm-transition-appointmentSchedulerSurface {
			0% {
				background-color: rgba(29,27,35,0.8);
			}
			100%   { 
				background-color: rgba(29,27,35,0);
			}
		}
	
	.run.openForm #appointmentScheduler-content {
		animation-name: openForm-transition-appointmentSchedulerContent;
		animation-duration: 1000ms;
		animation-delay: 0s; 
		animation-fill-mode: forwards;
	}
	
	.run.openForm #appointmentScheduler-content:after {
		animation-name: openForm-transition-appointmentSchedulerContent1;
		animation-duration: 1000ms;
		animation-delay: 0s; 
		animation-fill-mode: forwards;	
	}

	.run.openForm #appointmentScheduler-content:before {
		animation-name: openForm-transition-appointmentSchedulerContent2;
		animation-duration: 1000ms;
		animation-delay: 0s; 
		animation-fill-mode: forwards;	
	}
	
	.run.openForm #appointmentScheduler-content > .wrapper-inner {
		animation-name: openForm-transition-appointmentSchedulerContent3;
		animation-duration: 1000ms;
		animation-delay: 500ms; 
		animation-fill-mode: both;		
	}
	
	.run.closeForm #appointmentScheduler-content {
		animation-name: closeForm-transition-appointmentSchedulerContent;
		animation-duration: 1000ms;
		animation-delay: 0s; 
		animation-fill-mode: forwards;
	}
	
	.run.closeScene #appointmentScheduler-content {
		animation-name: closeForm-transition-appointmentSchedulerContent;
		animation-duration: 400ms;
		animation-delay: 0s; 
		animation-fill-mode: forwards;
	}
	
/* 		@keyframes openForm-transition-appointmentSchedulerContent {
			0% {
				opacity: 0;
				bottom: 100%;
			}
			100%   { 
				opacity: 1;
				bottom: 16px;
			}
		} */
	
		@keyframes closeForm-transition-appointmentSchedulerContent {
			0% {
				opacity: 1;
				bottom: 16px;
			}
			100%   { 
				opacity: 0;
				bottom: 100%;
			}
		}


		@keyframes openForm-transition-appointmentSchedulerContent1 {
			0% {
				opacity: 0;
				left: calc(100vw * 1/3 - 16px);
			}
			100%   { 
				opacity: 1;
				left: 0;
			}
		}

		@keyframes openForm-transition-appointmentSchedulerContent2 {
			0% {
				opacity: 0;
				right: calc(100vw * 2/3 - 16px);
			}
			100%   { 
				opacity: 1;
				right: 0;
			}
		}

		@keyframes openForm-transition-appointmentSchedulerContent3 {
			0% {
				transform: translateX(-100px);
				opacity: 0;
			}
			100%   { 
				transform: translateX(0px);
				opacity: 1;
			}
		}


	
/*** MAIN NAV & APPOINTMENT SCHEDULER ***/
			
	#mainNav-content,
	#appointmentScheduler-content {
		top: 8px;
		bottom: 8px;
		left: 8px;
		right: 8px;
		border-radius: 20px;
		overflow: hidden;
	}
	
	#mainNav-content:after,
	#appointmentScheduler-content:after {
		right: calc(100vw * 3/4 - 8px);
	}
	
	#mainNav-content:before,
	#appointmentScheduler-content:before {
		left: calc(100vw * 1/4 - 8px);
		background-position: center top 16px;
	}
		
	#mainNav-content > .wrapper-inner,
	#appointmentScheduler-content > .wrapper-inner {

		margin-left: calc(100vw * 1/4 - 8px);

	}
	
	#appointmentScheduler-content .form-fields {
		width: calc(100% / (4/3));
	}

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

	#appointmentScheduler-content > .wrapper-inner {
		margin-left: 0px;
	}

	#appointmentScheduler-content:after {
		right: 100%;
	}

	#appointmentScheduler-content .appointmentScheduler {
		width: calc(100% / (5/5));
	}
	
	#appointmentScheduler-content:before {
		left: 0;
	}
	
}
	
		/** OPEN NAV TRANSITION **/
		
			@keyframes openNav-transition-mainNavContent1 {
				0% {
					opacity: 0;
					left: calc(100vw * 1/4 - 8px);
				}
				100%   { 
					opacity: 1;
					left: 0;
				}
			}
	
			@keyframes openNav-transition-mainNavContent2 {
				0% {
					opacity: 0;
					right: calc(100vw * 3/4 - 8px);
				}
				100%   { 
					opacity: 1;
					right: 0;
				}
			}
		
			
			@keyframes openForm-transition-appointmentSchedulerContent1 {
				0% {
					opacity: 0;
					left: calc(100vw * 1/4 - 8px);
				}
				100%   { 
					opacity: 1;
					left: 0;
				}
			}
			
			@keyframes openForm-transition-appointmentSchedulerContent2 {
				0% {
					opacity: 0;
					right: calc(100vw * 3/4 - 8px);
				}
				100%   { 
					opacity: 1;
					right: 0;
				}
			}


/* ---------------------------------------------------------- */
/* CTA - START
/* ---------------------------------------------------------- */

.cta {
	position: relative;
	display: inline-block;
	padding: 8px 24px;
	z-index: auto;
	cursor: pointer;
}

.cta_primary:after {
	content: "";
	position: absolute;
	z-index: 0;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background-color: rgba(255,255,255,0.1);
/* 	mix-blend-mode: soft-light; */
	box-shadow: 0 4px 10px 3px rgba(0,0,0,0.15);
	transition: all ease-in-out 0.2s;
}

.cta_primary:hover:after {
	background-color: rgba(169,123,255,1);
	box-shadow: 0 4px 10px 3px rgba(0,0,0,0.05);
	z-index: -1;
}

.cta_primary:before {
	content: "";
	position: absolute;
	left: -8px;
	right: -8px;
	top: -8px;
	bottom: -8px;
	border-radius: 100px;
	border: 1px solid rgba(255,255,255,0.1);
	mix-blend-mode: soft-light;
}

.cta_plus_icon {
	padding-right: 54px;
	background-image: url("/images/icons/arrow-head/right.svg");
	background-position: right 20px center;
	background-repeat: no-repeat;
	background-size: 14px;
}

/* ---------------------------------------------------------- */
/* SECTIONS - START
/* ---------------------------------------------------------- */

#wrapper-body > section {
	position: relative;
	/* z-index: 0; */
}

/** SECTION | 1 **/

#section-1 {
	background: rgb(60,56,72);
	background: linear-gradient(180deg, rgba(60,56,72,1) 0%, rgba(29,27,35,1) 100%);
}

#section-1 > .wrapper-inner {
	display: flex;
	flex: 1 1 auto;
	padding-bottom: 140px;
}

#section-1 > .wrapper-inner .block {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: flex-start;
}

/** MAIN CONTENT **/

#section-1 .block-main_content {
	position: relative;
	flex-basis: 100%;
	margin-right: 5em;
}

	/*** PAGE BUILDUP ***/
	#section-1 .block-main_content *,
	#section-1 .nav-main_prev_next {
		transition-property: all;
		transition-duration: 600ms;
		transition-timing-function: ease-in-out;
		transition-delay: 0s;
		opacity: 1;
		/* border: 1px solid green; */
	}
	
	#section-1 .block-main_content .hide,
	#section-1 .nav-main_prev_next.hide {
		transition-property: all;
		transition-duration: 600ms;
		transition-timing-function: ease-in-out;
		transition-delay: 0s;
		opacity: 0; /* muss 0 sein */
		pointer-events: none;
		/* border: 1px solid red; */
	}
	
	#section-1 .block-main_content:after {
		transition-property: all;
		transition-duration: 400ms;
		transition-timing-function: ease-in-out;
		transition-delay: 0s;
	}

	.view-home #section-1 .block-main_content.hide:after,
	.view-about #section-1 .block-main_content.hide:after {
		transition-property: all;
		transition-duration: 400ms;
		transition-timing-function: ease-in-out;
		transition-delay: 0s;
		opacity: 0;
	}

	/*** MAIN CONTENT | HOME ***/

	.view-home #section-1 {		
/* 		background: #4C3870; */
		/*background-image:
			radial-gradient(at center calc(100% + 1000px), rgba(255,255,255,0.1), rgba(255,255,255,0.0)),
			radial-gradient(at 80% top, rgba(133,93,117,0.8) 0%, rgba(133,93,117,0.0) 100%),
			linear-gradient(180deg, #32384E 0%, #44474F 45%, #6B7681 100%);*/

			background: 
			-webkit-radial-gradient(top right, rgba(143, 255, 246, 0.15), rgba(103, 119, 174, 0.0)),
			linear-gradient(270deg, rgba(55, 40, 82, 1) 0%, rgba(135, 121, 160, 1) 100%);

			background: 
			-moz-radial-gradient(top right, rgba(143, 255, 246, 0.15), rgba(103, 119, 174, 0.0)),
			-moz-linear-gradient(270deg, rgba(55, 40, 82, 1) 0%, rgba(135, 121, 160, 1) 100%);

			background: 
			radial-gradient(to bottom left, rgba(143, 255, 246, 0.15), rgba(103, 119, 174, 0.0)),
			linear-gradient(270deg, rgba(55, 40, 82, 1) 0%, rgba(135, 121, 160, 1) 100%);


			/* Created with https://www.css-gradient.com */
			/*background: rgba(11, 198, 186, 1.0);
			background: -webkit-radial-gradient(top right, rgba(11, 198, 186, 1.0), rgba(103, 119, 174, 1.0));
			background: -moz-radial-gradient(top right, rgba(11, 198, 186, 1.0), rgba(103, 119, 174, 1.0));
			background: radial-gradient(to bottom left, rgba(11, 198, 186, 1.0), rgba(103, 119, 174, 1.0));	
			*/
	}

	.view-home #section-1 .block-main_content {
		padding-left: 14%;
		padding-right: 14%;
	}

	.view-home #section-1 .block-main_content .cta {
		margin-top: 20px;
	}

	.view-home #section-1 .block-main_content > span,
	.view-home #section-1 .block-main_content h1 {
		position: relative;
		z-index: 1;
		color: white;
	}
	
	.view-home #section-1 .block-main_content:after {
		content: "";
		position: absolute;
		/* z-index: -1; */
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: url("/images/logo/midweeks.svg") no-repeat left center / contain;
/* 		mix-blend-mode: soft-light; */
		opacity: 0.3;
	}
	
	/*** MAIN CONTENT | TERMS OF USE ***/
		
		.view-terms_of_use #section-1 {
			
		}
		
		.view-terms_of_use #section-1 > .wrapper-inner {
			flex-direction: column;
		}
		
		#section-1 > .wrapper-inner > .block5050 {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
		}
		
		section > .wrapper-inner > .block5050 > .block {
			flex-basis: 50%;
			align-self: flex-start;
		}
		
		ul.list {
			
		}
		
		.block ul.list > li {
			margin-bottom: 8px;
		}
		
		.divider {
			position: relative;
			width: 100%;
			height: 20px;
			padding: 80px 0;
		}
		
		.divider:after {
			content: "";
			position: absolute;
			top: calc(50% - 0.5px);
			bottom: calc(50% - 0.5px);
			left: 0;
			right: 0;
			height: 1px;
			background-color: white;
			mix-blend-mode: soft-light;
		}
		
			/**** SECTION 2 ****/
	
	
	
			/**** SECTION 3 ****/
			
	
	
			/**** SECTION4 ****/
	
	
	
	
	h1 ~ p {
		margin-top: 40px;
	}
	
	p ~ h2, p ~ h3 {
		margin-top: 40px;
	}
	
	h2 ~ p, h3 ~ p {
		margin-top: 8px; 
	}
	
	.block h2:first-child {
		margin-top: 80px;
	}	
	
	h1 ~ .cta, p ~ .cta {
		margin-top: 20px;
	}

	/*** MAIN CONTENT | ABOUT ***/
	
	.view-about #section-1 {
/* 		background: rgb(248,100,56); */
		/*background: linear-gradient(180deg, rgba(248,100,56,1) 0%, rgba(214,65,41,1) 100%);*/

/*
		background: 
		linear-gradient(245deg, #1D1B23 0%, #2F2C38 40%, rgba(60,56,72,0) 40%),
		-webkit-linear-gradient(270deg, rgba(55, 40, 82, 1) 0%, rgba(135, 121, 160, 1) 100%);		
		
		background: 
		linear-gradient(245deg, #1D1B23 0%, #2F2C38 40%, rgba(60,56,72,0) 40%),
		-moz-linear-gradient(270deg, rgba(55, 40, 82, 1) 0%, rgba(135, 121, 160, 1) 100%);

		background: 
		linear-gradient(245deg, #1D1B23 0%, #2F2C38 40%, rgba(60,56,72,0) 40%),
		linear-gradient(270deg, rgba(55, 40, 82, 1) 0%, rgba(135, 121, 160, 1) 100%);	
*/

		background: 
		-webkit-radial-gradient(top right, rgba(143, 255, 246, 0.15), rgba(103, 119, 174, 0.0)),
		linear-gradient(270deg, rgba(55, 40, 82, 1) 0%, rgba(135, 121, 160, 1) 100%);
		
		background: 
		-moz-radial-gradient(top right, rgba(143, 255, 246, 0.15), rgba(103, 119, 174, 0.0)),
		-moz-linear-gradient(270deg, rgba(55, 40, 82, 1) 0%, rgba(135, 121, 160, 1) 100%);
		
		background: 
		radial-gradient(to bottom left, rgba(143, 255, 246, 0.15), rgba(103, 119, 174, 0.0)),
		linear-gradient(270deg, rgba(55, 40, 82, 1) 0%, rgba(135, 121, 160, 1) 100%);
	}
	
	.view-about #section-1 .block-main_content {
		padding-left: 14%;
		margin-right: 5em;
	}
	
	.view-about #section-1 .block-main_content > span,
	.view-about #section-1 .block-main_content h1 {
		position: relative;
		z-index: 1;
		color: white;
	}
	
	.view-about #section-1 .block-main_content .indicator-scroll_down {
		position: relative;
		display: inline-block;
		margin-top: 1em;
		padding-left: 2.5em;
	}
	
	.view-about #section-1 .block-main_content .indicator-scroll_down:after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 2em;
		background: url("/images/icons/arrow-head/down.svg") no-repeat center / contain;
	}
	
	.view-about #section-1 .block-main_content .indicator-scroll_down.runGroupe {
		animation-name: indicator-scroll_down-move_up_down;
		animation-duration: 1400ms;
		animation-delay: 0; 
		animation-iteration-count: 6;
	}
	
	@keyframes indicator-scroll_down-move_up_down {
		0% {
			transform: translateY(0px);
		}
		50%   { 
			transform: translateY(16px);
		}
		100% {
			transform: translateY(0px);
		}
	}	
	
	
	p ~ p {
		margin: 8px 0px;
	}
	
	/* .view-about #section-1 .block-main_content:after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: url("/images/logo/dy.svg") no-repeat left center / contain;
		mix-blend-mode: soft-light;
		opacity: 0.3;
	} */

/**** SECTION 2 ****/
		
		#about #section-2 {
			background: rgba(255,255,255,1);
			/* background: linear-gradient(180deg, rgba(60,56,72,1) 0%, rgba(29,27,35,1) 100%); */
		}
		
		#about #section-2 > .wrapper-inner {
			display: flex;
			flex: 1 1 auto;
			justify-content: center;
		}
		
		#about #section-2 > .wrapper-inner .block {
			display: flex;
			justify-content: center;
			flex-direction: column;	
		}
		
		/**** QUICK & DIRTY FIX - START ****/
		
		#about #section-2 > .wrapper-inner .block,
		#about #section-2 > .wrapper-inner .block *,
		#about #section-3 > .wrapper-inner .block,
		#about #section-3 > .wrapper-inner .block *
		 {
			opacity: 1 !important;
		}
		
		/**** QUICK & DIRTY FIX - END ****/
		
		#about #section-2 .block-main_content {
			position: relative;
			flex-basis: 100%;
			max-width: 680px;
		}

		#about #section-2 > .wrapper-inner:after {
			content: "";
			position: absolute;
			top: 17%;
			bottom: 17%;
			left: 0;
			right: 0;
/* 			background: url("/images/logo/midweeks.svg") no-repeat center / calc(100% / 1.65); */
/* 			mix-blend-mode: soft-light; */
			opacity: 0.3;
		}

		/**** SECTION 3 ****/

		#about #section-3 {

		}
		
		#about #section-3 > .wrapper-inner {
			display: flex;
			flex: 1 1 auto;
			background: url("/images/placeholder-4.jpg") no-repeat center top / cover;
		}
		
		#about #section-3 > .wrapper-inner .block {
			display: flex;
			justify-content: center;
			flex-direction: column;	
		}
		
		#about #section-3 .block-main_content {
			position: relative;
			flex-basis: 50%;
			margin-right: 5em;
		}

		#about #section-3 .block-main_content h1 {
			align-self: center;
		}

		#about #section-2 .block-main_content.hide,
		#about #section-3 .block-main_content.hide,
		#about #section-4 .block-main_content.hide {
			opacity: 0;
		}
		
		#about #section-2.runSectionAnimation .block-main_content .groupe1,
		#about #section-3.runSectionAnimation .block-main_content .groupe1,
		#about #section-4.runSectionAnimation .block-main_content .groupe1 {
			transition: all 400ms ease-in-out;
			opacity: 1;
		}

		#about #section-2.runSectionAnimation .block-main_content .groupe1.hide,
		#about #section-3.runSectionAnimation .block-main_content .groupe1.hide,
		#about #section-4.runSectionAnimation .block-main_content .groupe1.hide {
			transition: all 400ms ease-in-out;
			opacity: 0;
		}

	
		@media only screen and (max-width: 800px) { 
			.view-about #section-1 .block-main_content {
				margin-right: 0;
				padding: 0px 2em;
			}
			
			#about #section-3 .block-main_content {
				flex-basis: 100%;
				margin-right: 0;
			}
		}

		/**** SECTION4 ****/

		.view-about #section-4 {
			/* background: rgb(248,100,56); */
			/* background: linear-gradient(180deg, rgba(248,100,56,1) 0%, rgba(214,65,41,1) 100%); */
			background-image: linear-gradient(285deg, #1D1B23 0%, #2F2C38 50%, rgba(60,56,72,0) 50%), linear-gradient(180deg, rgba(248,100,56,1) 0%, rgba(214,65,41,1) 100%);		
		}		
		
		.view-about #section-4 > .wrapper-inner {
			display: flex;
			justify-content: center;
		}
		
		
		.view-about #section-4 .block-main_content {
			display: flex;
			flex-direction: column;
			flex: 1 1 100%;
			max-width: 860px;
		}
		
			/**** ROWS ****/
			.view-about #section-4 .row {
				display: flex;
				flex: 1 1 auto;
			}
			
			/**** COLUMNS ****/
			
			.view-about #section-4 .col {
				align-self: center;
			}
			
			.view-about #section-4 .col-1 {
				flex-basis: 80%;
			}

			.view-about #section-4 .col-2 {
				flex-basis: 330px;
				flex-shrink: 0;
				text-align: right;
			}

/** NAV MAIN PREV & NEXT **/

#section-1 .nav-main_prev_next {
	flex-basis: 160px;
	flex-shrink: 0;
} 

#section-1 .nav-main_prev_next > ul {
	display: flex;
	justify-content: center;
}

#section-1 .nav-main_prev_next .trigger {
	position: relative;
	display: block;
	height: 64px;
	width: 64px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

#section-1 .nav-main_prev_next .trigger > a {
	position: relative;
	/* z-index: 1; */
	display: block;
	text-align: center;
	flex: 1 1 auto;
}

#section-1 .nav-main_prev_next span {
	position: absolute;
	display: block;
	text-indent: -9999px;
}

#section-1 .trigger-prev {
	margin-right: 16px;
}

#section-1 .nav-main_prev_next .trigger-prev > a {
	background: url("/images/icons/arrow-head/left.svg") no-repeat center / 48px;
}

#section-1 .nav-main_prev_next .trigger-next > a {
	background: url("/images/icons/arrow-head/right.svg") no-repeat center / 48px;
}

#section-1 .nav-main_prev_next .trigger-next:after {
	border-color: white;
}

	/** DONUT CHART **/
	.circle-chart {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	/**
	 * 1. The `reverse` animation direction plays the animation backwards
	 *    which makes it start at the stroke offset 100 which means displaying
	 *    no stroke at all and animating it to the value defined in the SVG
	 *    via the inline `stroke-dashoffset` attribute.
	 * 2. Rotate by -90 degree to make the starting point of the
	 *    stroke the top of the circle.
	 * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
	 *    and Edge, use the transform attribute directly on the SVG element as a
	 * .  workaround (https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart/#part-4-internet-explorer-strikes-back).
	 */
	.circle-chart__circle {
		/*animation: circle-chart-fill 4s reverse;*/ /* 1 */ 
		transform: rotate(-90deg); /* 2, 3 */
		transform-origin: center; /* 4 */
		mix-blend-mode: soft-light;
		stroke: rgba(255,255,255,0.2);
		stroke-dasharray: 100 100;
		/* fill: black; */
		transition: all 400ms ease-in-out;
	}

	.nav-main_prev_next .trigger:hover .circle-chart__circle {
		transition: all 400ms ease-in-out;
		stroke: var(--yim_accent_primary);
	}
	
	/**
	 * 1. Rotate by -90 degree to make the starting point of the
	 *    stroke the top of the circle.
	 * 2. Scaling mirrors the circle to make the stroke move right
	 *    to mark a positive chart value.
	 * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
	 *    and Edge, use the transform attribute directly on the SVG element as a
	 * .  workaround (https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart/#part-4-internet-explorer-strikes-back).
	 */
	.circle-chart__circle--negative {
	  transform: rotate(-90deg) scale(1,-1); /* 1, 2, 3 */
	}
	
	.groupe2 .circle-chart__circle {
		stroke-dasharray: 0 100;
	}
	
	.runGroupe .groupe2 .circle-chart__circle {
		/*animation: circle-chart-fill 4s reverse;*/
		animation-name: circle-chart-fill;
		animation-duration: 2000ms;
		animation-delay: calc(600ms - 600ms * 1/25); 
		animation-fill-mode: forwards;
	}	
	
	@keyframes circle-chart-fill {
		0% {
			stroke-dasharray: 0 100;
		}
		100%   { 
			stroke-dasharray: 100 100;
		}
	}


/* ---------------------------------------------------------- */
/* MAIN NAV - START
/* ---------------------------------------------------------- */

/** TRIGGER MAIN NAV **/

#trigger-mainnav {
	position: relative;
	display: block;
	height: 32px;
	width: 32px;
	min-height: 32px;
	margin: 20px 0px 0px 40px;
	cursor: pointer;
}

#trigger-mainnav:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: url("/images/icons/burger.svg") no-repeat center / 32px;
}

/* ---------------------------------------------------------- */
/* OVERLAY PROJECT DETAILS - START
/* ---------------------------------------------------------- */

.disableBodyScrolling {
	overflow: hidden;	
}

.overlay-surface {
	position: fixed;
	z-index: 100;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(29,27,35,0.8);
}

.run.openOverlay .overlay-surface {
	background-color: rgba(29,27,35,0);
}

.overlay-content {
	position: fixed;
	z-index: 100;
	top: 16px;
	bottom: 16px;
	left: 16px;
	right: 16px;
	background-color: rgba(29,27,35,1);
	background-image: linear-gradient(180deg, #3C3848 0%, #1D1B23 100%);
}

.overlay-content > .wrapper-inner {
	overflow: auto;
	height: calc(100% - 80px);
	padding: 40px;
}

	/** OVERLAY CLOSE BUTTON **/
	
	.trigger-closeOverlay {
		position: absolute;
		top: 16px;
		right: 16px
	}

	/** OPEN OVERLAY TRANSITION **/

	.run.openOverlay .overlay-surface {
		animation-name: openOverlay-transition-overlaySurface;
		animation-duration: 1000ms;
		animation-delay: 0s; 
		animation-fill-mode: forwards;
	}

	.run.closeOverlay .overlay-surface {
		animation-name: closeOverlay-transition-overlaySurface;
		animation-duration: 1000ms;
		animation-delay: 0s; 
		animation-fill-mode: forwards;
	}

		@keyframes openOverlay-transition-overlaySurface {
			0% {
				background-color: rgba(29,27,35,0);
			}
			100%   { 
				background-color: rgba(29,27,35,0.8);
			}
		}
		
		@keyframes closeOverlay-transition-overlaySurface {
			0% {
				background-color: rgba(29,27,35,0.8);
			}
			100%   { 
				background-color: rgba(29,27,35,0);
			}
		}
	
	.run.openOverlay .overlay-content {
		animation-name: openOverlay-transition-overlayContent;
		animation-duration: 1000ms;
		animation-delay: 0s; 
		animation-fill-mode: forwards;
	}	

	.run.closeOverlay .overlay-content {
		animation-name: closeOverlay-transition-overlayContent;
		animation-duration: 1000ms;
		animation-delay: 0s; 
		animation-fill-mode: forwards;
	}
	
		@keyframes openOverlay-transition-overlayContent {
			0% {
				top: 100%;
			}
			100%   { 
				top: 16px;
			}
		}
	
		@keyframes closeOverlay-transition-overlayContent {
			0% {
				top: 16px;
			}
			100%   { 
				top: 100%;
			}
		}

/* ---------------------------------------------------------- */
/* PORTFOLIO DETAILS - START
/* ---------------------------------------------------------- */


.overlay-content .section-hero {
	background-color: red;
	background-image: url("/images/projects/00-ui-ux/flight_booking-portal/Flight_Booking_Portal-Seat_Reservation_View-teaser.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: calc(100vh / 1.65);
}

.overlay-content .section-hero .wrapper-inner {
	display: flex;
	height: 100%;
	justify-content: center;
	align-items: center;
}

.overlay-content .section-hero .wrapper-inner > h1 {
	flex: 0 0 auto;
}


	/** PROJECT| FLIGHT BOOKING **/

	


		/*** SECTION | HERO ***/







/* ---------------------------------------------------------- */
/* PAGE TRANSITION - START
/* ---------------------------------------------------------- */

#scene-transition {
	position: fixed;
	z-index: 100;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	/* pointer-events: none; */
}

#scene-transition > div {
	position: absolute;
	/* top: 0;
	bottom: 0; */
	left: 0;
	right: 0;
}

#scene-transition .overlay-1 {
	z-index: 0;	
}

#scene-transition .overlay-2 {
	z-index: 1;
	background: rgba(29,27,35,1);
}

#scene-transition .overlay-3 {
	z-index: 2;
	position: absolute;
	/* z-index: -1; */
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: url("/images/logo/midweeks.svg") no-repeat center / 128px;
/* 	mix-blend-mode: soft-light;	 */
	opacity: 1;
}

.run .trigger-changepage {
	pointer-events: none;
}

	/** OPEN SCENE **/
	
	#scene-transition {
		top: 0;
		bottom: 0;
	}
	
	.run.openScene #scene-transition > div {
		top: 0;
		bottom: 0;
	}
	
	.run.openScene #scene-transition .overlay-1 {
		animation-name: openScene-transitionPageDefault-overlay1;
		animation-duration: 1000ms;
		animation-delay: 1.2s; 
		animation-fill-mode: forwards;
	}
	
	.run.openScene #scene-transition .overlay-2 {
		/* top: 0;
		background: rgba(29,27,35,0.85); */
		animation-name: openScene-transitionPageDefault-overlay2;
		animation-duration: 1000ms;
		animation-delay: 1s; 
		animation-fill-mode: forwards;
		/* display: none; */
	}
	
	.run.openScene #scene-transition .overlay-3 {
		animation-name: openScene-transitionPageDefault-overlay3;
		animation-duration: 600ms;
		animation-delay: 1s; 
		animation-fill-mode: forwards;	
	}
	
	@keyframes openScene-transitionPageDefault-overlay1 {
		0% {
			top: 0;
			background: rgba(29,27,35,0); 
		}
		100%   { 
			top: 100%;
			background: rgba(29,27,35,0.85);
		}
	}
	
	@keyframes openScene-transitionPageDefault-overlay2 {
		0% {
			top: 0;
			background: rgba(29,27,35,1); 
		}
		100%   { 
			top: 100%;
			background: rgba(29,27,35,0.8);
		}
	}
	
	@keyframes openScene-transitionPageDefault-overlay3 {
		0% {
			opacity: 1;
		}
		100%   { 
			opacity: 0;
		}
	}

		/*** Portfolio ***/
		.view-portfolio #section-1 .col.hide:first-child:before,
		.view-portfolio #section-1 .col.hide:after {
			top: 100%;	
		}
		.view-portfolio #section-1 .col.runGroupe:first-child:before,
		.view-portfolio #section-1 .col.runGroupe:after {
			transition-property: all;
			transition-duration: 1000ms;
			transition-timing-function: ease-in-out;
			transition-delay: 0ms;
			top: 0;
		}

		.view-portfolio #section-1 .col.runGroupe:first-child:after {
			transition-delay: 1200ms;
		}

		.view-portfolio #section-1 .col.runGroupe  {
			animation-name: col-flash;
			animation-duration: 5000ms;
			animation-delay: 0s; 
			animation-fill-mode: forwards;				
		}

		@keyframes col-flash {
			0% {
				background-color: rgba(255,255,255,0);
			}
			33% {
				background-color: rgba(255,255,255,0.025);
			}
			100%   { 
				background-color: rgba(255,255,255,0);
			}
		}	
	
		
		.view-portfolio #section-1 .col > h2.hide:before {
			right: 100%;		
		}
		
		.view-portfolio #section-1 .col > h2.runGroupe:before  {
			transition-property: all;
			transition-duration: 1000ms;
			transition-timing-function: ease-in-out;
			transition-delay: 0ms;
			right: 0;
		}

		.view-portfolio #section-1 .col > h2.runGroupe:after {
			transition-property: all;
			transition-duration: 400ms;
			transition-timing-function: ease-in-out;
			transition-delay: 600ms;			
		}

		.view-portfolio #section-1 .col-1 > h2.hide:after {
			right: 100%;		
		}
		
		.view-portfolio #section-1 .col-1 > h2.runGroupe:after  {
			right: 66%;
		}

		.view-portfolio #section-1 .col-2 > h2.hide:after {
			left: 33%;
			right: 67%;		
		}
		
		.view-portfolio #section-1 .col-2 > h2.runGroupe:after  {
			/* left: 33% */
			right: 33%;
		}

		.view-portfolio #section-1 .col-3 > h2.hide:after {
			left: 66%;
			right: 34%;
		}
		
		.view-portfolio #section-1 .col-3 > h2.runGroupe:after  {
			right: 0;
		}
		

	/** CLOSE SCENE **/
	
	.run.closeScene #scene-transition > div {
		top: 100%;
		bottom: 0;
	}
	
	.run.closeScene #scene-transition .overlay-1 {
		/* top: 0;
		background: rgba(29,27,35,0.85); */
		animation-name: closeScene-transitionPageDefault-overlay1;
		animation-duration: 1000ms;
		animation-delay: 0s; 
		animation-fill-mode: forwards;
	}
	
	.run.closeScene #scene-transition .overlay-2 {
		/* top: 0;
		background: rgba(29,27,35,0.85); */
		animation-name: closeScene-transitionPageDefault-overlay2;
		animation-duration: 1000ms;
		animation-delay: 0.2s; 
		animation-fill-mode: forwards;	
	}
	
	.run.closeScene #scene-transition .overlay-3 {
		position: absolute;
		/* z-index: -1; */
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: url("/images/logo/midweeks.svg") no-repeat center / 128px;
/* 		mix-blend-mode: soft-light; */
		opacity: 0;
		animation-name: closeScene-transitionPageDefault-overlay3;
		animation-duration: 1000ms;
		animation-delay: 0.2s; 
		animation-fill-mode: forwards;	
	}
	
	@keyframes closeScene-transitionPageDefault-overlay1 {
		from {
			top: 100%;
			background: rgba(29,27,35,0); 
		}
		to   { 
			top: 0;
			background: rgba(29,27,35,0.85);
		}
	}
	
	@keyframes closeScene-transitionPageDefault-overlay2 {
		0% {
			top: 100%;
			background: rgba(29,27,35,0.8); 
		}
		100%   { 
			top: 0;
			bottom: 0;
			background: rgba(29,27,35,1);
		}
	}
	
	@keyframes closeScene-transitionPageDefault-overlay3 {
		0% {
			opacity: 0;
		}
		100%   { 
			opacity: 1;
		}
	}
	


	
@media only screen and (max-width: 800px) {
	#section-1 > .wrapper-inner .block.nav-main_prev_next {
		position: absolute;
		top: 2.5em;
		right: 2.5em;
	}
	
	#section-1 > .wrapper-inner {
		padding: 2em;
	}
	
	#section-1 .block-main_content {
		margin-right: 0;
	}
	
	.view-home #section-1 .block-main_content {
		padding: 0px 2em;
	}
	
	.view-portfolio #section-1 .block-main_content {
		display: flex;
		flex-direction: column;
		flex: 1 1 100%;
		align-items: center;
	}
	
	#about #section-2 .block-main_content {
		margin-right: 0;	
	}
	
	#about #section-2 > .wrapper-inner {
		padding: 4em 4em;
	}
	
	#about #section-3 > .wrapper-inner {
		padding: 0px 4em;
	}
	
	.view-about #section-4 > .wrapper-inner {
		padding: 0px 4em;
	}
	
	.view-about #section-4 .row {
		flex-direction: column;
		justify-content: center;
	}
	
	.view-about #section-4 .col-1,
	.view-about #section-4 .col-2 {
		flex-basis: auto;
	}
	
	.view-about #section-4 .col-1,
	.view-about #section-4 .col-2 {
		text-align: left;
		align-self: normal;
	}

	.view-about #section-4 .row-3 .col-1,
	.view-about #section-4 .row-3 .col-2 {
		align-self: end;
	}
	
	#page-footer {
		position: relative;
		right: auto;
		bottom: auto;
	}
	
	#page-footer > .wrapper-inner {
		display: flex;
		justify-content: center;
		padding: 2em;
	}
}