.phaseIcon, #scrollNav li.active .scrollNavDot
{
-webkit-transition: all .75s cubic-bezier(.23,1,.32,1);
-moz-transition: all .75s cubic-bezier(.23,1,.32,1);
-ms-transition: all .75s cubic-bezier(.23,1,.32,1);
-o-transition: all .75s cubic-bezier(.23,1,.32,1);
transition: all .75s cubic-bezier(.23,1,.32,1);
}


/*GENERAL*/
body {font-size: 18px !important}
#main {background-image: linear-gradient(to left top, #66788eb5, #697b918a, #dcdcdc, #efefef, #fff);}
#footer {padding-bottom: 70px}
h1 {font-size: 4em !important}
video {max-width: 100%}
.ce_player {margin-top: 3%}
.ce_player audio {width: 100%}

/*MAIN ICONS*/
.phaseIcon {max-width: 200px; margin: 0 auto}

/*PHASE*/
#teaserText > div, .textElement {width: 65%; margin-left: 17.5%}

.quoteBox .blockQuoteInner {background-color: #efefef; font-size: 16px !important; border: 2px solid #a40f30 !important; border-radius: 25px; padding: 15px; color: #464646 !important; margin-top: 3%}
.quoteBox .blockQuoteInner p {text-align: left !important}
.quoteBox .LineBefore, .quoteBox .LineAfter {border-top: 3px dotted #a40f30 !important}
.quoteBox blockquote figure {position: relative}
.quoteBox blockquote figcaption {position: absolute; bottom: 2px; right: 10px;font-size: 10px;line-height: 1.6em;color: #fff;font-style: normal;font-weight: normal;text-shadow: 2px 2px 5px rgba(0,0,0,0.4)}

/*PHASE 0*/
#phase0 .pg_slideStartInner {height: auto !important; display: flex}
#phase0 .pg_slideNav {bottom: 60%;background-color: #fff;box-shadow: 2px 2px 5px rgba(0,0,0,0.6);width: 60px;height: 60px;border-radius: 50%;display: flex !important;justify-content: center;align-items: center;}
#phase0 .pg_slideNav.left {right: 11% !important}
#phase0 .pgSlide {box-shadow: 2px 2px 5px rgba(0,0,0,0.4);background-color: #fff;}
#phase0 .pgSlide p {padding: 0 20px}
#phase0 .pgSlide {overflow: hidden}
#phase0 .pg_slideStartFrame {height: auto !important}

/*PHASE 1*/
.quoteBox blockquote {text-align: right !important;font-weight: normal !important;}

/*PHASE 3*/
#phase3 .pg_sTTextInner {min-height: 100vh}
#phase3 .ce_player {margin: 6% 0; text-align: center}


/*PHASE 4*/
/*#phase4 .pg_sTTextInner {background-color: rgba(0,0,0,0)}*/
#phase4 .cationPicture figure {position: relative}
#phase4 .cationPicture figure .copy {position: absolute;bottom: 35px;right: 15px; color: #fff; text-shadow: 2px 2px 5px rgba(0,0,0,0.4)}

/*--------------------------------------------*/
/*------- GENERAL --> SCROLL NAVIGATION -------------*/
/*--------------------------------------------*/
#scrollNav {position: fixed; left: 0; top: 20%; z-index: 3; padding-left: 10px}
#scrollNav li {position: absolute;list-style-type: none;width: auto;padding-top: 13px;height: 60px;z-index: 999999999;left: 0;padding-left: 25px;}
#scrollNav li a {text-decoration: none; color: #fff; box-shadow: 2px 2px 5px rgba(0,0,0,0.6)}
#scrollNav .scrollNavDot {box-shadow: 2px 2px 5px rgba(0,0,0,0.6)}
#scrollNav .scrollNavDot i {text-shadow: 2px 2px 5px rgba(0,0,0,0.6)}
#scrollNav #nav0 {top: 0}
#scrollNav #nav1 {top: 67px;}
#scrollNav #nav2 {top: 134px;}
#scrollNav #nav3 {top: 202px;}
#scrollNav #nav4 {top: 269px;}
#scrollNav #nav5 {top: 336px;}
#scrollNav .scrollNavDot {width: 50px; height: 50px; border-radius: 50%; text-align: center; border: 3px solid; display: block; padding: 0; background-color: rgba(255,255,255,0.4); cursor: pointer;display: flex;
justify-content: center;align-items: center;}
#scrollNav .scrollNavDot i {padding: 0}
#scrollNav .scrollNavDesc {cursor: pointer;z-index: -1;position: absolute;top: 10px;left: -350px;opacity: 0;background-color: #fff;color: #000;padding: 10px;width: 500px;font-size: 16px;padding: 10px 10px 10px 60px;border-radius: 50px;-webkit-box-shadow: 0 0.1rem 2rem 0 rgb(34 36 43 / 40%);box-shadow: 0 0.1rem 2rem 0 rgb(34 36 43 / 40%)}

#scrollNav .scrollNavDesc.active {left: -37px;opacity: 1;margin-left: 60px;padding-left: 80px;}     
#scrollNav .scrollNavDesc:before {/* content: ""; */width: 20px;height: 20px;position: absolute;top: 10px;left: -7px;transform: rotate(45deg);background-color: #ee1c25;z-index: -1}
#scrollNav li.activated {width: 400px}
#scrollNav li.active .scrollNavDot {transform: scale(1.4)}


/* ---------------------------------------------- */
/* ----- Headpic ------ */
/* ---------------------------------------------- */
body.awszPage .backpic .innerInside {background-color: rgba(0,0,0,0); color: #fff;text-shadow: 2px 2px 10px rgba(0,0,0,0.5);font-size: 3em;font-weight: bold;right: 6%;bottom: 0}
body.awszPage .backpic .innerInside p {background-color: rgba(255,255,255,0.6);padding: 25px;line-height: 1.2em;}

/* ---------------------------------------------- */
/* ----- MEDIABREAK ------ */
/* ---------------------------------------------- */
@media (max-width: 880px)
{
	.inside {width: 90% !important}
	.visibleRow {overflow: hidden !important}
	
	body.awszPage .backpic .innerInside {font-size: 2em}
	h1 {font-size: 1.6em !important}
	
	#awsz2 .quoteBox blockquote {margin: 0}
	
	#teaserText > div, .textElement {width: 100%; margin-left: 0}

	#scrollNav {bottom: 0%; top: initial; padding-left: 0; padding-bottom: 10px; width: 100%; left: 0; background-color: #fff}
	#scrollNav ul {display: flex; overflow: visible; padding-left: 0 !important; justify-content: center}
	#scrollNav ul li {position: initial; transform: scale(0.8); padding-left: 0}
	#scrollNav .scrollNavDesc {display: none !important}
	#scrollNav .scrollNavDot {box-shadow: none}
	#scrollNav li.activated {width: auto !important} 
	
	.pg_slideStartInner > div:nth-child(1) {margin-left: 0px !important}
	#phase0  .pg_slideNav.left {right: 5% !important; bottom: 80% !important}
	.pg_slideNav.right {bottom: 72% !important}
	
	.pg_sTTextInner {width: 90% !important; margin-left: 5% !important}
	
	
}