body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

body {
	background-color: #3B4045;
}

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.loadingScreenElem[hidden] {
	display: none !important;
}

/*******************************************************************
					C3 logo loading animation
 *******************************************************************/
 #loadingLogoWrap {
	margin-top: 7.5vh;
	display: flex;
	justify-content: center;
}

#loadingLogo {
	display: block;
	overflow: visible;
	width: auto;
	height: 22.5vh;
	max-width: 90vw;
}

#loadingLogo .maskC1,
#loadingLogo .maskC3,
#loadingLogo .maskB,
#loadingLogo .specularB,
#loadingLogo .specularA {
	transform-origin: 256px 198px;
}

@keyframes loadingMaskCHide {
	0%, 100% {transform: translateX(512px);}
}

@keyframes loadingMaskC1Rotate {
	0% {transform: rotate(-180deg);}
	9%, 100% {transform: rotate(0deg);}
}

#loadingLogo .maskC1 {
	animation: loadingMaskCHide 0.5s linear, loadingMaskC1Rotate 1.5s cubic-bezier(0.41,0.42,0.66,0.72) 0.5s forwards;
}

@keyframes loadingMaskC3Rotate {
	0%, 8.99999%  {transform: translateX(512px) rotate(-130deg);}
	9% {transform: translateX(0) rotate(-130deg);}
	100% {transform: translateX(0) rotate(0deg);}
}

#loadingLogo .maskC3 {
	animation: loadingMaskCHide 0.5s linear, loadingMaskC3Rotate 1.5s cubic-bezier(0.14,0.97,0.32,0.97) 0.5s forwards;
}

@keyframes loadingMaskRotate {
	from {transform: rotate(-301deg); -moz-transform: rotate(0deg);}
	to {transform: rotate(0deg);}
}

#loadingLogo .maskB {
	animation: loadingMaskCHide 0.5s linear, loadingMaskRotate 1.5s cubic-bezier(0.16,0.97,0.16,0.97) 0.5s forwards;
}

#loadingLogo .specularB {
	animation: loadingMaskRotate 1.5s cubic-bezier(0.16,0.97,0.16,0.97) 0.5s forwards;
}

@keyframes loadingSpecularAFade {
	0%, 83% {opacity: 0;}
	100% {opacity: 1;}
}

#loadingLogo .specularA {
	opacity: 0;
	animation: loadingSpecularAFade 1.75s cubic-bezier(0.16,0.97,0.16,0.97) 0.5s forwards;
}

@keyframes loadingBaseFadeIn {
	0%, 25% {opacity: 0;}
	to {opacity: 1;}
}

#loadingLogoBase {
	animation: loadingBaseFadeIn 1.5s cubic-bezier(0.16,0.97,0.16,0.97) forwards;
}

@keyframes loadingTriangleHide {
	0%, 100% {opacity: 0;}
}

@keyframes loadingTriangleRotate {
	0%, 42.85% {transform: rotate(0deg) scale(0); opacity: 0;}
	100% {transform: rotate(360deg) scale(1); opacity: 1;}
}

#loadingLogo .triangle {
	transform-origin: 375.964px 198px;
	animation: loadingTriangleHide 0.5s linear, loadingTriangleRotate 1.75s cubic-bezier(0.15,0.95,0.22,1) 0.5s forwards;
}

@keyframes loadingLetteringHide {
	from, to { opacity: 0; fill: #f85753 }
}

@keyframes loadingLetteringMove {
	from {opacity: 0; }
	to { transform: translate(0,0);	opacity: 1;}
}

@keyframes loadingLetteringBurn {
	from { fill: #f85753 }
}

#loadingLogo .c1,
#loadingLogo .o1,
#loadingLogo .n1,
#loadingLogo .s1,
#loadingLogo .t1,
#loadingLogo .r1,
#loadingLogo .u1,
#loadingLogo .c2,
#loadingLogo .t2,
#loadingLogo .number3,
#loadingLogo .beta {
	animation:  loadingLetteringHide 1.9s linear, loadingLetteringMove 0.25s cubic-bezier(0.1,1,0.32,1) 1.9s forwards, loadingLetteringBurn 0.25s linear 1.9s forwards;
}

/* tracking: 80px, offsetY: 100px */
#loadingLogo .c1 {
	transform: translate( calc(80px * -4.5) , 100px );
}

#loadingLogo .o1 {
	transform: translate( calc(80px * -3.5) , 100px );
}

#loadingLogo .n1 {
	transform: translate( calc(80px * -2.5) , 100px );
}

#loadingLogo .s1 {
	transform: translate( calc(80px * -1.5) , 100px );
}

#loadingLogo .t1 {
	transform: translate( calc(80px * -0.5) , 100px );
}

#loadingLogo .r1 {
	transform: translate( calc(80px * 0.5) , 100px );
}

#loadingLogo .u1 {
	transform: translate( calc(80px * 1.5) , 100px );
}

#loadingLogo .c2 {
	transform: translate( calc(80px * 2.5) , 100px );
}

#loadingLogo .t2 {
	transform: translate( calc(80px * 3.5) , 100px );
}

#loadingLogo .number3 {
	transform: translate( calc(80px * 4.5) , 100px );
}

/*******************************************************************
						Illustration
 *******************************************************************/

#loadingIllustrationWrap {
	display: flex;
	justify-content: center;
}

#loadingIllustration {
	width: auto;
	height: 32.5vh;
	max-width: 90vw;
	margin-top: 7.5vh;
	animation: loaderFadeIn 1s;
}

/*******************************************************************
						Loading dots
 *******************************************************************/
 
 @keyframes loadingDotsMove1 {
	from {transform: translateY(-1.5vh) scale(0.5);}
	to {transform: translateY(1.5vh) scale(0.5);}
}

@keyframes loadingDotsMove2 {
	from {transform: translateY(-1.5vh) scale(0.675);}
	to {transform: translateY(1.5vh) scale(0.675);}
}

@keyframes loadingDotsMove3 {
	from {transform: translateY(-1.5vh) scale(0.825);}
	to {transform: translateY(1.5vh) scale(0.825);}
}

@keyframes loadingDotsMove4 {
	from {transform: translateY(-1.5vh) scale(0.925);}
	to {transform: translateY(1.5vh) scale(0.925);}
}

@keyframes loadingDotsMove5 {
	from {transform: translateY(-1.5vh) scale(1);}
	to {transform: translateY(1.5vh) scale(1);}
}

#loadingDotsWrap .dot1 {
	animation: loadingDotsMove1 0.3s ease-in-out alternate infinite, loaderFadeIn 1s;
}

#loadingDotsWrap .dot2 {
	animation: loadingDotsMove2 0.3199998s ease-in-out alternate infinite, loaderFadeIn 1s;
}

#loadingDotsWrap .dot3 {
	animation: loadingDotsMove3 0.3428574s ease-in-out alternate infinite, loaderFadeIn 1s;
}

#loadingDotsWrap .dot4 {
	animation: loadingDotsMove4 0.369231s ease-in-out alternate infinite, loaderFadeIn 1s;
}

#loadingDotsWrap .dot5 {
	animation: loadingDotsMove5 0.4000002s ease-in-out alternate infinite, loaderFadeIn 1s;
}

#loadingDotsWrap .dot6 {
	animation: loadingDotsMove4 0.4363632s ease-in-out alternate infinite, loaderFadeIn 1s;
}

#loadingDotsWrap .dot7 {
	animation: loadingDotsMove3 0.48s ease-in-out alternate infinite, loaderFadeIn 1s;
}

#loadingDotsWrap .dot8 {
	animation: loadingDotsMove2 0.5333334s ease-in-out alternate infinite, loaderFadeIn 1s;
}

#loadingDotsWrap .dot9 {
	animation: loadingDotsMove1 0.6s ease-in-out alternate infinite, loaderFadeIn 1s;
}

#loadingDotsWrap2 {
	display: flex;
	justify-content: center;
}

#loadingDotsWrap {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: 18vh;
	height: 5vh;
	max-width: 90vw;
	max-height: 25vw;
	margin-top: 6vh;
}

#loadingDotsWrap .dot {
	display: inline-block;
	width: 1.125vh;
	height: 1.125vh;
	border-radius: 50%;
	background: #29f3d0;
}

/*******************************************************************
						Loading text
 *******************************************************************/
#loadingMessage, .jsdisabledmessage {
	font-size: calc(10px + 1vh);
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
	text-align: center;
	animation: loaderFadeIn 1s;
}

#loadingMessage {
	color: #eef5fc;
	margin: 2vh 2em;
	word-wrap: break-word;
}

#loadingMessage li {
	text-align: left;	/* only used when an error occurs */
}

.jsdisabledmessage {
	margin: 55px auto 10px auto;
	color: #eee;
}

/* remain invisible for first 500ms, so loader never appears if
   loading very quickly */
@keyframes loaderFadeIn {
	0% {
		opacity: 0;
	}
	
	50% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

/*******************************************************************
				Responsive changes for small screens
 *******************************************************************/
@media screen and (max-width: 400px), screen and (max-height: 500px) {
	
	#loadingLogo {
		max-width: 80vw;
		height: 50vh;
	}
	
	#loadingIllustrationWrap {
		display: none;
	}
	
	#loadingDotsWrap {
		width: 26vh;
		height: 14.5vh;
	}

	#loadingDotsWrap .dot {
		width: 2vh;
		height: 2vh;
	}
}


/*******************************************************************
					Noscript content styling
 *******************************************************************/
.noscriptcontent {
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}

.noscriptcontent > div {
	width: 100%;
	min-width: 100%;
}

.noscriptcontent > div:last-child {
	order: 1;
}

.noscriptcontent span.jsdisabledmessage {
	font-weight: 500;
	display: inline-block;
	padding: 20px;
	font-size: 1.2rem;
	background: #f9dc72;
	color: #78672a;
	margin: 0 auto;
	border-radius: 3px;
}

.noscriptcontent > div:first-child {
	order: 2;
}

.noscriptcontent a {
	color: #28f0d2;
}

.noscriptcontent ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	list-style: none;
}

.noscriptcontent ul li {
	margin: 0;
	padding: 0;
}

.noscriptcontent ul li:after {
	content: '-';
	margin: 0 7px;
	margin-left: 3px;
}

.noscriptcontent ul li:last-child:after {
	display: none;
}

.noscriptcontent .noscriptinner{
	max-width: 650px;
	text-align: left;
	margin: 0 auto;
}