/* fonts */

@font-face { 
    font-family: TedNextBold;
    src: url('./../style/fonts/TedNext-Bold.eot');
    src: url('./../style/fonts/TedNext-Bold.eot?#iefix') format('embedded-opentype'),
         url("./../style/fonts/TedNext-Bold.otf") format("opentype"), 
         url("./../style/fonts/TedNext-Bold.ttf") format("embedded-opentype");
  }

  @font-face {
    font-family: TedNextBoldItalic;
    src: url('./../style/fonts/TedNext-BoldItalic.eot');
    src: url('./../style/fonts/TedNext-BoldItalic.eot?#iefix') format('embedded-opentype'),
         url("./../style/fonts/TedNext-BoldItalic.otf") format("opentype"), 
         url("./../style/fonts/TedNext-BoldItalic.ttf") format("embedded-opentype");
  }

  @font-face {
    font-family: TedNextCondensed;
    src: url('./../style/fonts/TedNext-Condensed.eot');
    src: url('./../style/fonts/TedNext-Condensed.eot?#iefix') format('embedded-opentype'),
         url("./../style/fonts/TedNext-Condensed.otf") format("opentype"), 
         url("./../style/fonts/TedNext-Condensed.ttf") format("embedded-opentype");
  }

  @font-face {
    font-family: TedNextCondensedBold;
    src: url('./../style/fonts/TedNext-CondensedBold.eot');
    src: url('./../style/fonts/TedNext-CondensedBold.eot?#iefix') format('embedded-opentype'),
         url("./../style/fonts/TedNext-CondensedBold.otf") format("opentype"), 
         url("./../style/fonts/TedNext-CondensedBold.ttf") format("embedded-opentype");
  }

  @font-face {
    font-family: TedNextItalic;
    src: url('./../style/fonts/TedNext-Italic.eot');
    src: url('./../style/fonts/TedNext-Italic.eot?#iefix') format('embedded-opentype'),
         url("./../style/fonts/TedNext-Italic.otf") format("opentype"), 
         url("./../style/fonts/TedNext-Italic.ttf") format("embedded-opentype");
  }

  @font-face {
    font-family: TedNextLight;
    src: url('./../style/fonts/TedNext-Light.eot');
    src: url('./../style/fonts/TedNext-Light.eot?#iefix') format('embedded-opentype'),
         url("./../style/fonts/TedNext-Light.otf") format("opentype"), 
         url("./../style/fonts/TedNext-Light.ttf") format("embedded-opentype");
     font-weight: normal;
	font-style: normal;
  }

  @font-face {
    font-family: TedNextLightItalic;
    src: url('./../style/fonts/TedNext-LightItalic.eot');
    src: url('./../style/fonts/TedNext-LightItalic.eot?#iefix') format('embedded-opentype'),
         url("./../style/fonts/TedNext-LightItalic.otf") format("opentype"), 
         url("./../style/fonts/TedNext-LightItalic.ttf") format("embedded-opentype");
  }

  @font-face { 
    font-family: TedNextMedium;
    src: url('./../style/fonts/TedNext-Medium.eot');
    src: url('./../style/fonts/TedNext-Medium.eot?#iefix') format('embedded-opentype'),
         url("./../style/fonts/TedNext-Medium.otf") format("opentype"), 
         url("./../style/fonts/TedNext-Medium.ttf") format("embedded-opentype");
  }

  @font-face {
    font-family: TedNext;
    src: url('./../style/fonts/TedNext-Regular.eot');
    src: url('./../style/fonts/TedNext-Regular.eot?#iefix') format('embedded-opentype'), 
         url("./../style/fonts/TedNext-Regular.otf") format("opentype"), 
         url("./../style/fonts/TedNext-Regular.ttf") format("embedded-opentype");
    font-weight: normal;
	font-style: normal;
  }

  @font-face {
    font-family: TedNextSemiBold;
    src: url('./../style/fonts/TedNext-SemiBold.eot');
    src: url('./../style/fonts/TedNext-SemiBold.eot?#iefix') format('embedded-opentype'),
         url("./../style/fonts/TedNext-SemiBold.otf") format("opentype"), 
         url("./../style/fonts/TedNext-SemiBold.ttf") format("embedded-opentype");

  }

  @font-face {
    font-family: TedNextSemiBoldItalic;
    src: url('./../style/fonts/TedNext-SemiBoldItalic.eot');
    src: url('./../style/fonts/TedNext-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
         url("./../style/fonts/TedNext-SemiBoldItalic.otf") format("opentype"), 
         url("./../style/fonts/TedNext-SemiBoldItalic.ttf") format("embedded-opentype");
  }

/* make transparent link selection, adjust last value opacity 0 to 1.0 */
* {
	-webkit-tap-highlight-color: rgba(0,0,0,0); 
}
  

/* reset */
h1,
h2,
h3 {
	margin: 0;
	padding: 0;  
}
  

/* document */
html {
  height: 100%; 
  touch-action: manipulation;
}

body{
	margin: 0;
	padding: 0;
	color: #fff;
	background: #383838;
	font-family: TedNext;
	font-size: 11pt;
	min-height: 100%;
	height: 100%;
	width:100%;
	overflow: hidden;
	touch-action: none;
	-webkit-touch-callout: none;
	-webkit-text-size-adjust: none;
	-webkit-user-select: none;
	-webkit-user-select: none;  /* Chrome all / Safari all */
  	-moz-user-select: none;     /* Firefox all */
  	-ms-user-select: none;      /* IE 10+ */
  	user-select: none;          /* Likely future */   
}


body > .wrapper {
	position: relative;
	display: block;
	width: 1280px;
	height: 800px;
	left: 0%;
	top: 0%;
	background: #000;
	overflow: hidden;
}

@media (min-width: 1280px)  { 
	body > .wrapper {
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
}

body > .wrapper > video {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* updateing */
#dialog_updating {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #000;
	display: flex;
	align-items: center;
}

	#dialog_updating label {
		display: block;
		width: 100%;
		text-align: center;
		font-size: 60pt;
		font-family: TedNextSemiBold;
		animation-name: dialogUpdatingLabel;	
		animation-duration: 1500ms;		
		animation-fill-mode: both;
		animation-direction: alternate;
		animation-iteration-count: infinite;
		line-height: 40pt;
	}

	
	#dialog_updating label small {
		font-size: 20pt;
		color: #9c9c9c
	}

	/* animate */
	@keyframes dialogUpdatingLabel {
		0% { 
			transform: scale(.9);
		}
		100% {			
			transform: scale(1.1);
		}
	}


/* logo */
.logo {
	position: absolute;
	top: 0px;
	left: 0;
	pointer-events: none;
	opacity:1;
	transition: opacity 350ms ease-in-out;
	will-change: opacity;
}

	.logo.off {
		opacity:0;	
	}

/* footer */
.wrapper > .footer {
	position: absolute;
	bottom: 0px;
	right: 0px;
	pointer-events: none;
}


/* header */
header  {
	position: absolute;
	top: 0px;
	right: -10%;
	width: 50%;
	height: 64px;
	background: rgba(0,0,0,.6);
	opacity:1;
	transition: opacity 350ms ease-in-out, margin-top 350ms ease-in-out;
	will-change: opacity, margin-top;
}

	header.off {
		opacity:0;	
	}

	header.scrollup {
		margin-top: -84px;
	}

	/* timer box */
	header .timerbox {
		position: absolute;
		width: 236px;
		top: 0px;
		left: -210px;
		height: 84px;
		margin-top: 0px;
		transition: margin-top 250ms ease-in-out;
		will-change: margin-top;
	}

		header .timerbox.off {
			margin-top: -84px;
		}

	header .timerbox div {
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;		
		color: #ee2e24;
		width: 222px;
		height: 84px;
		line-height: 75px;
		font-size: 25pt;
		font-family: TedNextBold;
	}

	/* label */
	header label {
		position:relative;
		margin-top: 14px;
		display: block;
		font-family: TedNextSemiBold;
		font-size: 17pt;
		text-align: center;
		margin-right: 60px;	
		margin-left: -10%;	
		height: auto;
	}

		header span {
			display: inline-block;
			overflow: hidden;
		}

			header span:first-child {
				max-width: 250px;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			header span:nth-child(2)  {
				margin: 0 5px;
				line-height: 32px
			}	

	
	/* nav */
	nav  {
		position: absolute;
		top: 11px;
		right: 16px;
		opacity: 1;	
		transition: opacity 250ms;
		will-change: opacity;
	}

	nav a.navtigger {
		display: block;
	}

		nav.off a.navtigger {
			opacity: 0;
			pointer-events: none;
		}

		nav a.navtigger img {
			pointer-events: none;
		}


	nav ul {
		position: absolute;
		top: 53px;
		width: 343px;
		right: -363px;
		transition: right 250ms;
		will-change: right;	
	}

		nav ul.open {
			right: -20px;
		}

		nav ul  {
			margin: 0px;
			padding: 0px;
			width: 343px;		
			list-style: none;
		}

			nav ul li {
				height: 72px;
				margin-top: 4px;
				background: rgba(0,0,0,.6);
				text-align: center;
				line-height: 72px;			
			}

				nav ul li a {
					display: block;
					font-family: TedNextSemiBold;
					font-size: 15pt;
					color: #fff;
					text-decoration: none;
					width: 100%;
					height: 100%;
				}



/* global */

	/* next */
	a.next {
		position: absolute;
		display: block;
		right: 150px;
		bottom: 10px;
		width: 160.5px;
		height: 63px;
		background: url(../img/questions/next.png);
		background-repeat: no-repeat;
		background-size: 160.5px 63px;
		background-position: center; 
		text-align: center;
		font-family: TedNextBoldItalic;
		color: #fff;
		text-decoration: none;
		line-height: 55px;
		font-size: 22pt;
		display: block;
	}	
		
		a.next.large {
			background: url(../img/questions/next_large.png);
			background-repeat: no-repeat;
			background-size: 206px 46px;
			background-position: center; 
			letter-spacing: .5pt;
			width: 206px;
			font-size: 18pt;
			line-height: 65px;
		}

/* 		a.next:active {
			transform: scale(1.15);
		} */

/* question */
.question {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: block;
	background: #000;
	transition: opacity 350ms ease-in-out, transform 350ms ease-in-out;
	will-change: opacity, transform;
	opacity: 0;
	transform: scale(2);
}	
	
	.question.load {
		opacity: 1;	
		transform: scale(1);	
	}	

	.question.fadetoblack {
		opacity: 1;	
		transform: scale(1);
	}

	.question.fadetoblack:after {
		position: absolute;
		top: 0px;
		left: 0px;
		content: ' ';
		background: #000;
		width: 100%;
		height: 100%;
		opacity: 0;	
		transition: opacity 250ms ease-in-out;
		will-change: opacity;	
	}	

		.question.fadetoblack.load:after {
			opacity: 0;	
		}	

		.question.fadetoblack:after {
			opacity: 1;		
		}


	/* buttons */
	.question .buttons {
		position: absolute;
		bottom: 97px;
		margin: 0 25px;
		width: calc(100% - 50px);
		display: flex;	
		justify-content: space-between;
	}
	
		.question .buttons a {
			position : relative;
			flex-grow: 1;
			flex-basis: 0;
			text-decoration:none;
			font-family: TedNextSemiBold;
			font-size: 20pt;
			color: #fff;
			border: 4px solid #ee2e24;
			border-radius: 8px;
			height: 65px;
			line-height: 65px;
			text-align:center;
			padding: 0 14px;
			margin: 0 37px;
			background: #000;	
			user-select: none;
			-webkit-touch-callout: none; 
    		-webkit-user-select: none;
		}		

			/* text sizes */
			.question .buttons.mediumfont a { font-size: 17pt; }

			/* fonts */
			.question .buttons:not(.large) a.fontsize_19 { font-size: 19pt; }
			.question .buttons:not(.large) a.fontsize_18 { font-size: 18pt; }
			.question .buttons:not(.large) a.fontsize_17 { font-size: 17pt; }
			.question .buttons:not(.large) a.fontsize_16 { font-size: 16pt; }
			.question .buttons:not(.large) a.fontsize_15 { font-size: 15pt; }

			/* sub */
			.question .buttons sub {
				font-size: 11pt;
				vertical-align: -webkit-baseline-middle;
				font-size: 9pt;
			}

			/* animate from */
			.question.animate .buttons a{
				transition: border 250ms, transform 150ms;
				will-change: border, transform;
			}

			/* animate to */
			.question.answer .buttons a {
				border-color: #9b9b9b  
			}


			/* images buttons */

				/* animate from */
				.question.animate .buttons.images a{
					transition: border 250ms, background 250ms, transform 150ms;
					will-change: transform;
				}

				/* animate to */
				.question.answer .buttons.images a {
					background: #9b9b9b  
				}	
		

		/* correct */
		.question.answer .buttons a.correct {
			border: 4px solid #00b5d1;
		}

			.question .buttons a.correct:before{
				 position: absolute;
				 content: ' ';
				 top: -20px;
				 right: -30px;
				 display: block;			
				 height: 60px;
				 width: 60px;
				 border-radius: 30px;
				 background: #00b5d1;
				 transform: scale(0); 				 
			}

				/* animate from */
				.question.animate .buttons a.correct:before {
					transition: transform 250ms; 
					will-change: transform;
				}

				/* animate to */
				.question.answer .buttons a.correct:before,
				.question.answer .buttons a.correct:after {
					transform: scale(1);   
				}		

				/* images buttons */ 
				.question.animate.answer .buttons.images a.correct {
					transition: border 250ms, background 250ms, transform 150ms; 
					will-change: transform;
				}

				/* animate to */
				.question.answer .buttons.images a.correct {
					background: #00b5d1;
				}	

			/* checkmark */
			.question .buttons a.correct:after{
				 position: absolute;
				 content: ' ';
				 top: -20px;
				 right: -31px;
				 display: block;			
				 height: 60px;
				 width: 60px;
				 background: url(../img/questions/correct.png);
				 background-repeat: no-repeat;
				 background-position: center;
				 background-size: 57px 37px;
				 transform: scale(0); 
				 transition: top 250ms, right 250ms, transform 150ms;
				 will-change: transform;
			}

				/* animate from */
				.question.animate .buttons a.correct:after {
					transition: transform 250ms;
					will-change: transform; 
				}

				/* animate to */
				.question.answer .buttons a.correct:after {
					transform: scale(1); 
					top: -25px;
					right: -38px;  
				}	

		/* incorrect */
		.question.answer .buttons a.incorrect {
		 	border-color: #ee2e24;
		}

			.question.answer .buttons.images a.incorrect {
				background: #ee2e24;
			}

			.question .buttons a.incorrect:before{
				 position: absolute;
				 content: ' ';
				 top: -20px;
				 right: -30px;
				 display: block;			
				 height: 60px;
				 width: 60px;
				 border-radius: 30px;
				 background: #ee2e24 url(../img/questions/incorrect.png);			
				 background-repeat: no-repeat;
				 background-position: center;
				 background-size: 30px 30px;   
				 transform: scale(0);      		 
			}

				/* animate from */
				.question.animate .buttons a.incorrect:before{
					opacity : 0;		  		 
					transition: opacity 250ms, transform 150ms;
					will-change: transform;
				}

				/* animate to */
				.question.answer .buttons a.incorrect:before {
					opacity : 1; 
					transform: scale(1);   
				}



		/* images */
		.question .buttons.images a {
			background: #ee2e24;
			border-radius: 20px;
			height: auto;
			width: 295px;
			padding: 0;
			margin: 0 50px;
			line-height: 40px;
			font-size: 22pt;
			padding-bottom: 7px;
		}	
			.question .buttons.images a img {
				width: 100%;
				height: auto;
				pointer-events: none;
				border-top-left-radius: 18px;
				border-top-right-radius: 18px;
			}

			.question .buttons.images a.fontsize_21 { font-size: 21pt; }
			.question .buttons.images a.fontsize_20 { font-size: 20pt; }
			.question .buttons.images a.fontsize_19 { font-size: 19pt; }
			.question .buttons.images a.fontsize_18 { font-size: 18pt; }

		/* multiplechoice */
		.question .buttons.large a {
			border-radius: 20px;
			width: 260px;
			height: 260px;
			padding: 0;
			margin: 0 50px;
			line-height: 40px;
			font-size: 40pt;
			line-height:  1.2em;
			padding: 0 20px;
			display: flex;
			justify-content: center;
			flex-direction: column;
			text-align: center;
		}	

			/* fonts */
			.question .buttons.large a.fontsize_24 { font-size: 24pt; }
			.question .buttons.large a.fontsize_28 { font-size: 28pt; }
			.question .buttons.large a.fontsize_32 { font-size: 32pt; }
			.question .buttons.large a.fontsize_36 { font-size: 36pt; }


	/* hint */
	.question .hint {
		position: absolute;
		display: block;
		box-sizing: border-box;
		bottom: 28px;
		left: 65px;
		width: 88px;
		text-align: center;		
		border: 2px solid #919191;
		border-radius: 8px;	
		text-decoration:none;		
		font-family: TedNextSemiBold;
		color: #919191;
		letter-spacing: 1.9pt;
		font-size: 15pt;
		padding: 5px 0;
	}	

	/* available on */
	.question .availableon {
		display: none;
	}

	/* next */
	.question .next {
		opacity: 0;
		pointer-events: none;
		right: auto;
		left: 50%;
		margin-left: -80px;
		transition: opacity 250ms;
		will-change: transform;
		pointer-events: none;
	}

		.question.animate .next {
			
			transition-delay: 1s;
			pointer-events: none;
		}

		.question.animate.answer .next {
			opacity: 1;
			pointer-events: all;
		}

	/* message */
	.question.answer .message  {
		position: absolute;
		color: #ffffff;
		font-size: 85pt;
		font-family: TedNextBoldItalic;
		top:50%;
		left: 50%;
		width: 100%;
		text-align: center;
		transform: translate(-50%,-50%);	
		animation-name: SectionQuestionMessage;	
		animation-duration: 1s;		
		animation-fill-mode: forwards;
	}

		.question:not(.answer) .message  {
			display: none;
		}

		.question.answer:not(.correct) .message {
			display: none;
		}	

		/* animate */
		@keyframes SectionQuestionMessage {
			0% { 
				transform: translate(-50%,-50%) scale(.5);
				opacity: 0;
			}
			20% {
				opacity: 1;
			}
			70% {
				opacity: 1;
			}
			100% {			
				transform: translate(-50%,-50%) scale(1.5);
				opacity: 0;
			}
		}

		/* message */
		.question.answer .message .message_correct {
			font-family: TedNextBoldItalic;
			font-size: 120pt;
			margin-top: -5px;
			display: inline-block;
			text-shadow: 5px 5px 15px rgba(0, 0, 0, 0.6);
		}

		/* main points */
		.question.answer .message .message_correct_points_main {
			 display: inline-block;
			 font-family: TedNextBold;
			 width: 223px;
			 height: 223px;
			 font-size: 36pt;
			 text-align: center;
			 text-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5215686274509804);	
			 letter-spacing: 1px;	
			 display: none;			 
		}

			.question.answer .message .message_correct_points_main span {
				display: block;
				font-size: 120pt;
				width: 223px;
				text-align: center;
				margin-bottom: -30px;
			}


		/* bonus */
		.question.answer .message .message_correct_points_bonus {
			 display: inline-block;
			 font-family: TedNextBold;
			 width: 223px;
			 height: 223px;
			 font-size: 35pt;
			 text-align: center;
			 text-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5215686274509804);	
			 letter-spacing: 1px;	
			 display: none;
		}

			.question.answer .message .message_correct_points_bonus > span {
				position: relative;
				display: block;
				font-size: 100pt;
				width: 223px;
				letter-spacing: -10pt;
				text-align: center;
				margin-bottom: -30px;
				margin-left: -70px;
			}

			.question.answer .message .message_correct_points_bonus > span span.bonus {
				position: absolute;
				display: block;
				top: 75px;
				right: -90px;
				letter-spacing: normal;
				line-height: 23pt;
				font-size: 22pt;
				text-align: left;
				color: #ffffff
			}

			.question.answer .message .message_correct_points_bonus > span span.bonus span {
				display: inline-block;
				margin-left: 5px;
			}


			.question.answer .message .message_correct_points_bonus > span  {	
				margin-left: -68px;
			}

			.question.answer .message .message_correct_points_bonus.onedigit > span span.bonus {	
				right: -50px;
			}

	

	/* content */
	.question .content {
		position: relative;
		display: block;
		width: 100%;
		height: calc(100% - 200px);
		display: flex;
		align-items: center;
		flex-direction: column;
	}	
		
		/* label */
		.question .content label {	
			position: relative;
			bottom: 0px;	
			display: block;
			flex: 1;
			font-family: TedNext;
			font-size: 24.5pt;
			color: #fff;
			pointer-events: none;
			text-align: center;
			width: 100%;		
			line-height: 1.4em;	
			margin-top: 24px;
			padding: 0 150px;
			opacity: 1;
			box-sizing: border-box;
		}

			.question .content label strong {
				font-family: TedNextBold;
				font-weight: normal;
			}	

			/* animate from */
			.question.animate .content label {
				transition: opacity 200ms;
				will-change: transform;
			}

			/* animate to */
			.question.answer label {
				opacity: 0;
			}

		/* wrapper */
		.question.image .content .wrapper {
			position: relative;
			display: block;
			width: 100%;
			height: 100%;
			overflow: hidden;			
		}
		
		/* image */
		.question .content:not(.multiplechoice) .wrapper img {
			position: absolute;
			left: 50%;
			top:0%;
			margin:auto;
			width: 100%;
			height: auto;
			transform: translateX(-50%);
		}

		/* full view */
		.question.fullview .content {
			height: calc(100% - 170px);
		}

			.question.fullview .content label {
				margin-top: 5px;
			}

			.question.fullview .content .wrapper img {
				width: auto;
				height: 100%;
			}	
		
			/* blur */
			.question:not(.answer).blur .content img {
				filter: blur(25px);
			}

			/* animate from */
			.question.animate.image .content:not(.multiplechoice)  {
				transition: height 250ms, width 250ms;
				will-change: transform;
			}

			.question.answer.image .content:not(.multiplechoice) {
				height: calc(100% - 50px);				
			}		
				
			.question.answer.image .content:not(.multiplechoice) img {
				position: absolute;
				display: block;
				width: 840px;
				height: auto;
				top: 15%;
				left: 50%;
				transform: translateX(-50%);
			} 

				/* full view */
				.question.fullview.answer.image .content:not(.multiplechoice) img {
					top: 0%;
					width: auto;
					height: 100%;
					max-height: 580px;
					transform: translateX(-50%);
				}

				/* animate from */
				.question.animate.answer.image .content:not(.multiplechoice) .wrapper img {
					transition: all 250ms;
					will-change: transform;
				}

		/* multiplechoice images */
		.question.image .content.multiplechoice label {
			margin-bottom: 30px			
		}

		.question.image .content.multiplechoice .wrapper {
			display: flex;	
			align-items: center;
			justify-content: center;
			margin-bottom: 30px;
		}
			/* images */
			.question.image .content.multiplechoice .wrapper img {
				display: block;
				width: 100px;
				position: relative;
				width: 285px;
				height: auto;
				border: 4px solid #ee2e24;
				border-radius: 8px;
				margin: auto 35px 0;
			}


	/* multiplechoice */

		/* buttons */
		.question.multiplechoice .buttons {
			bottom: 100px;
		}		

		/* content */
		.question.multiplechoice .content {
			height: 40%;
		}

			.question.multiplechoice .content label {
				position: absolute;
			}
	



/* hint */
section.hint {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	transition: opacity 250ms ease-in-out;
	will-change: opacity;
}

	/* label */
	section.hint label {
		position: absolute;
		top: 130px;
		transform: translate(-50%,-50%);
		left: 50%;
		width: 720px;		
		min-height: 157px;
		height: auto;
		color: #ee2e24;
		font-size: 24pt;
		font-family: TedNextSemiBoldItalic;
		background: url(../img/hint/label.png);	
		background-size: 100% 100%;		
		background-position: center center; 
		background-repeat:   no-repeat;
		display: flex;	
		align-items: center;
		justify-content: center;
		margin-top: -250px;
		opacity: 0;
		transition: opacity 350ms ease-in-out, margin-top 350ms ease-in-out, transform 350ms ease-in-out;
		will-change: transform;
	}

		section.hint.loaded label {
			margin-top: 0px;
			transform: translate(-50%,-50%) scale(0);		
		}		

		section.hint.load label {
			margin-top: 0px;
			opacity: 1;	
			transform: translate(-50%,-50%) scale(1);	
		}

		section.hint label strong {
			font-family: TedNextBoldItalic;
			font-weight: normal;
		}

		section.hint label div {
			width: 460px;
			margin: 35px 0px
		}

	/* available on */
	section.hint .availableon {
		display: none;
	}			

	/* image */
	section.hint img {
		position: absolute;
		top: 59%;
		left: 50%;
		transform: translate(-50%,-50%) scale(.5);	
		margin-top: 550px;
		opacity: 0;
		transition: opacity 350ms ease-in-out, margin-top 350ms ease-in-out, transform 350ms ease-in-out;
		will-change: transform;
	}

		section.hint.loaded img {
			margin-top: 0px;
			transform: translate(-50%,-50%) scale(0);		
		}

		section.hint.load img {
			margin-top: 0px;
			opacity: 1;
			transform: translate(-50%,-50%) scale(.5);				
		}

	/* next */
	section.hint a.next {
		right: auto;
		left: 50%;
		margin-left: -80px;
		opacity: 0;
		transition: opacity 350ms ease-in-out;
		will-change: opacity;
	}	

		section.hint.load a.next {
			opacity: 1;	
		}


/* start */
section.start {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	transition: opacity 250ms ease-in-out;
	will-change: opacity;
	opacity: 0;
}	
	
	section.start.load {
		opacity: 1;		
	}

	section.start img {
		display: block;
		width: 100%;
		height: 100%;
	}

	/* next */
	section.start a.next {
		left: auto;
		right: 73px;
		bottom: 55px;
		background: url(../img/start/button.png);
		background-repeat: no-repeat;
		background-size: 275px 107px;
		background-position: center; 
		letter-spacing: .5pt;
		width: 275px;
		height: 107px;
		font-size: 37pt;
		line-height: 95px;
		color:#ffffff;
		transition: opacity 350ms;
		will-change: opacity;
		opacity: 0;
		pointer-events: none;
	}	

	section.view.start a.next {
		opacity: 1;
		pointer-events: all;
	}



/* entry form */
section.entryform {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #000;
	transition: opacity 350ms ease-in-out, transform 350ms ease-in-out;
	will-change: opacity, transform;
	opacity: 0;
	transform: scale(2);
}	
	
	section.entryform.load {
		opacity: 1;	
		transform: scale(1);	
	}	
	
	/* label */
	section.entryform label {
		position: absolute;
		top: 148px;
		width: 100%;
		font-family: TedNextBoldItalic;
		color: #ee2e24;
		font-size: 70pt;
		text-align: center;
		line-height: 30pt;
		transition: top 150ms 50ms;
		will-change: top;
	}
		
		body.commandhouse section.entryform label {
			top: 88px;
		}

		section.entryform.keyboard label {
			top: -100px;
		}

			body.commandhouse section.entryform.keyboard label {
				top: -160px;
			}

		section.entryform label img {
			display: inline-block;
		}

	/* message */
	section.entryform .message {
		position: absolute;
		top: 244px;
		width: 100%;
		font-family: TedNext;
		color: #ffffff;
		font-size: 22pt;
		text-align: center;
		line-height: 1.5em;
		transition: top 150ms 50ms;
		will-change: top;
	}

		body.commandhouse section.entryform .message {
			top: 184px;
		}

		section.entryform.keyboard .message {
			top: 12px;
		}

			body.commandhouse section.entryform.keyboard .message {
				top: -12px
			}

			body.commandhouse section.entryform .message sub {				
				position:absolute;
				display: inline-block;
				top: 9px;		
			}

		section.entryform .message sub {
			font-size: 11pt;
			vertical-align: -webkit-baseline-middle;
			font-size: 9pt;
		}

		section.entryform .message strong {
			font-family: TedNextBold;
			font-weight: normal;
		}
	

	/* form */
	section.entryform form {
		position: absolute;
		top: 412px;
		width: 100%;
		text-align: center;
		transition: top 150ms 50ms;
	}

		section.entryform.keyboard form {
			position: absolute;
			top: 180px;
			width: 100%;
			text-align: center;
		}
		

		section.entryform form input {
			width: 564px;
			border: 3px solid #ee2e24;
			border-radius: 20px;
			box-sizing: border-box;
			margin: 0 9px 22px;
			height: 68px;
			line-height: 68px;
			font-family: TedNext;
			color: #747474;
			font-size: 22pt;
			padding: 15px;
		}

			section.entryform form input:focus {
				outline: none;
			}

			::-webkit-input-placeholder {
				font-family: TedNext;
				color: #747474;
				font-size: 22pt;
				line-height: 68px;
			}
		

	/* alert */
	section.entryform #section_entryform_alert {
		position: absolute;
		bottom: 60px;
		width: 100%;
		font-family: TedNextBold;
		color: #ee2e24;
		font-size: 22pt;
		text-align: center;
		pointer-events: none;
		opacity: 0;
		transition: opacity 350ms ease-in-out;
		will-change: opacity;
	}

		body.commandhouse section.entryform #section_entryform_alert {
			bottom: 90px;
		}

		section.entryform #section_entryform_alert.on {
			opacity: 1;
		}

	/* privacy policy */
	section.entryform .privacypolicy {
		position: absolute;
		bottom: -82px;
		text-align: left;
		left: 150px;
		width: 860px;
		font-size: 11pt;
		color: #d8d8d8;
		line-height: 1.3em;
		margin: 0;
		padding: 0;
		transition: bottom 150ms 50ms;
		will-change: bottom;
	}

		section.entryform.keyboard .privacypolicy {
			bottom: -59px;
		}

		section.entryform .privacypolicy a {
			font-family: TedNextBold;
			color: #ffffff;
		}

		section.entryform .privacypolicy input[type="checkbox"] {
			position: absolute;
			left: -70px;
			top: 5px;
			right: auto;
			width: 45px;
			height: 45px;
			border: 3px solid #ee2e24;
			background: #fff;
			border-radius: 10px;		
			-webkit-appearance:none;
			-moz-appearance:none;	
		}

		section.entryform .privacypolicy input[type="checkbox"]:checked::after {
		  position: absolute;
		  content: '';
		  top:9px;
		  left:4px;	  
		  width: 32px;
		  height: 21px;
		  background:url(../img/entryform/checkmark.png);
		  background-size:contain;
		  background-repeat: none;
		  border-radius:2px;
		}

		
	/* footer */
	section.entryform .footer {
		position: absolute;
		bottom: 10px;
		width: 100%;
		font-size: 11pt;
		font-family: TedNext;
		color: #d8d8d8;
		line-height: 1.3em;
		box-sizing: border-box;
		padding: 0 70px;
	}

		section.entryform a {
			font-family: TedNext;
			color: #ffffff;
		}

	/* next */
	section.entryform button.next {
		position: absolute;
		border: none;
		text-align: center;
		font-family: TedNextBoldItalic;
		color: #fff;		
		bottom: -90px;
		right: 70px;
		background: url(../img/entryform/button.png);
		background-repeat: no-repeat;
		background-size: 190px 75px;
		background-position: 0px 4px; 
		width: 190px;
		height: 75px;
		font-size: 26pt;
		line-height: 0px;
		box-sizing: border-box;
		margin: 0;
		transition: bottom 150ms 50ms;
		will-change: bottom;
	}

		section.entryform button.next:focus {
			outline: none;
		}

		section.entryform.keyboard button.next {
			bottom: -64px;
		}


/* instructions */
section.instructions {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}	

	/* label */
	section.instructions label {
		position: absolute;
		top: 130px;
		transform: translate(-50%,-50%);
		left: 50%;
		width: 836px;		
		height: 183px;
		color: #ee2e24;
		font-size: 25.5pt;
		font-family: TedNextSemiBoldItalic;
		background: url(../img/instructions/label.png);
		background-size: 100% 100%;		
		background-position: center center; 
		background-repeat:   no-repeat;
		display: flex;	
		align-items: center;
		justify-content: center;
		margin-top: -250px;
		opacity: 0;
		transition: opacity 350ms ease-in-out, margin-top 350ms ease-in-out, transform 350ms ease-in-out;
		will-change: opacity, margin-top, transform;
	}

		section.instructions.loaded label {
			margin-top: 0px;
			transform: translate(-50%,-50%) scale(0);		
		}		

		section.instructions.load label {
			margin-top: 0px;
			opacity: 1;	
			transform: translate(-50%,-50%) scale(1);	
		}

		section.instructions label strong {
			font-family: TedNextBoldItalic;
			font-weight: normal;
		}

		section.instructions label sub {
			font-size: 11pt;
			vertical-align: -webkit-baseline-middle;
			font-size: 9pt;
		}

		section.instructions label div {
			width: 650px;
			margin: 0px 0px;
			text-align:center;
		}
			

	/* images */

		/* video */
		section.instructions img.circle {
			position: absolute;
			top: 62%;
			left: 50%;
			transform: translate(-50%,-50%) scale(.5);
			border: 10px solid #ee2e24;
			border-radius: 50%;
			box-shadow: -1px 4px 20px 4px rgba(0, 0, 0, 0.6);
			margin-top: 550px;
			opacity: 1;
			overflow: hidden;
			width: 943px;
			height: 943px;
			transition: opacity 350ms ease-in-out, margin-top 350ms ease-in-out, transform 350ms ease-in-out;
			will-change: opacity, margin-top, transform;
		}

			section.instructions.loaded img.circle {
				margin-top: 0px;
				transform: translate(-50%,-50%) scale(0);		
			}

			section.instructions.load img.circle {
				margin-top: 0px;
				opacity: 1;
				transform: translate(-50%,-50%) scale(.5);
			}

		/* icons */
		section.instructions .icons {
			position: absolute;
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			justify-content: center;
			width: 100%;
			top: 350px;
			text-align: center;
			margin-top: 550px;
			opacity: 0;
			transition: opacity 350ms ease-in-out, margin-top 350ms ease-in-out, transform 350ms ease-in-out;
			will-change: opacity, margin-top, transform;
		}

			section.instructions.loaded .icons {
				margin-top: 0px;
				transform: scale(0);		
			}

			section.instructions.load .icons {
				margin-top: 0px;
				opacity: 1;
				transform: scale(1);	
			}


			section.instructions .icons img {
				width: auto;
				height: 225px;
				margin: 0 40px;
			}

	/* next */
	section.instructions a.next {
		bottom: 60px;
		right: 100px;
		background: url(../img/instructions/button.png);
		background-repeat: no-repeat;
		background-size: 190px 75px;
		background-position: center;
		width: 190px;
		height: 75px;
		font-size: 26pt;
		line-height: 65px;
		opacity: 1;
		transition: opacity 350ms ease-in-out;
		will-change: opacity;
	}
		section.instructions.loaded:not(.load) #section_instructions_1 + a.next,
		section.instructions.loaded:not(.load) #section_instructions_2 + a.next {
			display: none;
		}

		section.instructions.loaded:not(.load) #section_instructions_3 + a.next {
			opacity: 0;
		}


/* ready to play */
section.readytoplay {
	position: absolute;
	height: 100%;
	width: 100%;
	color: #fff;
	padding: 98px 90px;
	box-sizing: border-box;
}

	/* user score */
	section.readytoplay .area {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		color: #ffffff;	
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		opacity: 0;
		transition: opacity 350ms ease-in-out, margin-top 350ms ease-in-out, transform 350ms ease-in-out;
		transform: scale(0);
		will-change: opacity, margin-top, transform;	
	}

		section.readytoplay.load .area {
			opacity: 1;
			transform: scale(1);		
		}
	
		section.readytoplay .area p {
			position: relative;
			width: 100%;			
			padding: 0; 
			margin: 0;
			font-family: TedNextLight;
			font-size: 30pt;
			margin-bottom: 300px;
		}

			section.readytoplay .area p .bigger {
				display: block;
				font-size: 70pt;
				margin-left: 40px;
			}

		/* next */
		section.readytoplay .area p a.next {
			left: 50%;
			margin-left: -246.5px;
			right: auto;
			bottom: -205px;
			background: url(../img/readytoplay/button.png);
			background-repeat: no-repeat;
			background-size: 493px 126px;
			background-position: center; 
			letter-spacing: .5pt;
			width: 493px;
			height: 126px;
			font-size: 44pt;
			line-height: 110px;
		}	

/* countdown */
section.countdown {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	transition: opacity 50ms ease-in-out;
	opacity: 0;
	will-change: opacity;
}
	
	section.countdown.load {
		opacity: 1;		
	}	

	section.countdown label {
		position: absolute;
		color: #ffffff;
		font-size: 85pt;
		font-family: TedNextBoldItalic;
		top:50%;
		left: 50%;
		width: 100%;
		text-align: center;
		transform: translate(-50%,-50%);	
		animation-name: SectionCountdownLabel;	
		animation-duration: 1s;		
		animation-timing-function: ease-in-out;
		animation-fill-mode: forwards;
	}

	/* scroll */
	@keyframes SectionCountdownLabel {
		0% { 
			transform: translate(-50%,-50%) scale(.5);
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {			
			transform: translate(-50%,-50%) scale(3);
			opacity: 0;
		}
	}


/* round */
section.round {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

	/* label */
	section.round label {
		position: absolute;
		top: 48%;
		transform: translate(-50%,-50%) scale(0);
		left: 50%;
		width: 771px;		
		min-height: 195px;
		height: 195px;
		color: #ee2e24;
		font-size: 68pt;
		padding-top: 25px;
		font-family: TedNextSemiBoldItalic;
		background: url(../img/round/label.png);	
		background-size: 100% 100%;		
		background-position: center center; 
		background-repeat:   no-repeat;
		display: flex;	
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		opacity: 0;
		transition: opacity 350ms ease-in-out, margin-top 350ms ease-in-out, transform 350ms ease-in-out;
		will-change: opacity, margin-top, transform;
	}

		section.round.load label {
			opacity: 1;	
			transform: translate(-50%,-50%) scale(1);	
		}

		section.round label span {
			position: absolute;
			top: 3px;
			left: 0px;
			left: 50%;
			transform: translateX(-50%);
			color: #ffffff;
			font-size: 26pt;
			font-family: TedNextBoldItalic;
		}

		section.round label strong {
			font-family: TedNextBoldItalic;
			font-weight: normal;
		}



/* bonusround */
section.bonusround {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

	/* label */
	section.bonusround label {
		position: absolute;
		top: 50%;
		transform: translate(-50%,-50%) scale(0);
		left: 50%;
		width: 720px;		
		min-height: 157px;
		height: auto;
		color: #ee2e24;
		font-size: 64pt;
		font-family: TedNextSemiBoldItalic;
		background: url(../img/hint/label.png);	
		background-size: 100% 100%;		
		background-position: center center; 
		background-repeat:   no-repeat;
		display: flex;	
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 350ms ease-in-out, margin-top 350ms ease-in-out, transform 350ms ease-in-out;
		will-change: opacity, margin-top, transform;
	}

		section.bonusround.load label {
			opacity: 1;	
			transform: translate(-50%,-50%) scale(1);	
		}

		section.bonusround label strong {
			font-family: TedNextBoldItalic;
			font-weight: normal;
		}


/* leaderboard */
section.leaderboard {
	position: absolute;
	height: 100%;
	width: 100%;
	color: #fff;
	padding: 98px 90px;
	box-sizing: border-box;
	transition: opacity 250ms ease-in-out;
	will-change: opacity;
	opacity: 0;
}
	
	section.leaderboard.load {
		opacity: 1;		
	}	

	/* top scores */
	section.leaderboard .topscores {
		position: absolute;
		width: 365px;
		height: 100%;		
		top: 0px;
		left: 0px;
		background: #ee2e24;
	}

		section.leaderboard .topscores h1 {
			font-family: TedNextBoldItalic;
			color: #ffffff;
			font-size: 40pt;
			margin: 0;
			padding: 0;
			width: 100%;
			display: block;
			text-align: center;
			margin: 0;
			padding: 0;
			margin-top: 70px;
		}

		section.leaderboard .topscores .area  {
			position: relative;
			height:70%;
			width: 260px;
			overflow-y: scroll;
			font-family: TedNextLight;
			font-size: 15pt;
			margin-top: 35px;
			margin-left: 48px;
			padding-right: 30px;
		}

			section.leaderboard .topscores .area::-webkit-scrollbar {
				-webkit-appearance: none;
			}

			section.leaderboard .topscores .area::-webkit-scrollbar:vertical {
				width: 4px;
			}

			section.leaderboard .topscores .area::-webkit-scrollbar:horizontal {
				height: 4px;
			}

			section.leaderboard .topscores .area::-webkit-scrollbar-thumb {
				background-color: rgb(255, 255, 255);
				border-radius: 10px;
			}

			section.leaderboard .topscores .area::-webkit-scrollbar-track {
				border-radius: 10px;  
				background-color: #ffffff1c; 
			}

		section.leaderboard .topscores .area ol {
			padding: 0;
			margin: 0;
			color: #ffffff;
			counter-reset: item;
    		list-style-type: none;
					
		}

		section.leaderboard .topscores .area li  {
			display: block; 
			position: relative;	
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			width: 100%;
		}

		section.leaderboard .topscores .area li span:nth-child(1) {
			font-family: TedNextBold;
			flex:0 0 auto;
			width: 40px;
		}

		section.leaderboard .topscores .area li span:nth-child(2) {
			width: auto;			
			overflow: hidden;
			display: block;
			flex:0 1 auto;
			white-space: nowrap; 
			overflow: hidden;
			text-overflow: ellipsis;
			margin-right: 10px;
		}

		section.leaderboard .topscores .area li span:nth-child(3) {
			flex:0 0 auto;
			text-align: right;
			flex-shrink: 0;
			flex-grow: 1;
		}

	/* user score */
	section.leaderboard .userscore {
		width: 930px;
		height: 100%;
		overflow: hidden;
		position: absolute;
		top: -50px;
		left: 365px;
		color: #ffffff;
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: center;
	}

		body.commandhouse section.leaderboard .userscore {
			top: -70px;
		}
	
		section.leaderboard .userscore p {
			position: relative;
			width: 100%;			
			padding: 0; 
			margin: 0;
			font-family: TedNextSemiBold;
			font-size: 20.5pt;
			line-height: 1.7em;
		}

		section.leaderboard .userscore p strong {
			font-weight: normal; 
			font-family: TedNextBold;
		}

		section.leaderboard .userscore p .bigger {
			display: block;
			font-size: 28pt;		
			margin-top: 30px;
		}

		#section_leaderboard_points {
			display: block;
			font-family: TedNextBoldItalic;
			font-size: 69pt;
			margin-top: 0px;
			margin-bottom: 10px;
		}

	/* next */
	section.leaderboard .userscore p a.next {
		left: 50%;
		margin-left: -103px;
		right: auto;
		bottom: -120px;
	}


/* content */
section.content {
	position: absolute;
	top: 0px;
	left: 0px;
	background: #fff;
	height: 100%;
	width: 100%;
	color: #000;
	padding: 94px 84px 98px 94px;
	box-sizing: border-box;
	transition: opacity 250ms ease-in-out;
	will-change: opacity;
	opacity: 0;
}	
	
	section.content.load {
		opacity: 1;		
	}	
	
	section.content h1 {
		font-family: TedNextBoldItalic;
		color: #ee2e24;
		font-size: 38pt;
		margin: 0;
		padding: 0;
		margin-bottom: 5px;
	}


	section.content div.area {
		background: #fff;
		height: 90%;
		width: 100%;
		color: #000;
		box-sizing: border-box;
		overflow-y: scroll;
		line-height: 1.5em;
		padding-right: 10px;
	}

		section.content div.area::-webkit-scrollbar {
			-webkit-appearance: none;
		}

		section.content div.area::-webkit-scrollbar:vertical {
			width: 4px;
		}

		section.content div.area::-webkit-scrollbar:horizontal {
			height: 4px;
		}

		section.content div.area::-webkit-scrollbar-thumb {
			background-color: rgb(167, 167, 167);
			border-radius: 10px;
		}

		section.content div.area::-webkit-scrollbar-track {
			border-radius: 10px;  
			background-color: #4a4a4a1c; 
		}

	/* next */
	section.content a.next {
		bottom: 12px;
		right: auto;
		left: 50%;
		margin-left: -80px;
	}





/* idle timer */
section.idletimer {
	position: absolute;
	height: 100%;
	width: 100%;
	color: #fff;
	padding: 98px 90px;
	box-sizing: border-box;
}

	/* user score */
	section.idletimer .area {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		color: #ffffff;	
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		opacity: 0;
		transition: opacity 350ms ease-in-out, margin-top 350ms ease-in-out, transform 350ms ease-in-out;
		will-change: opacity;
		transform: scale(0);	
	}

		section.idletimer.load .area {
			opacity: 1;
			transform: scale(1);		
		}
	
		section.idletimer .area p {
			position: relative;
			width: 100%;			
			padding: 0; 
			margin: 0;
			font-family: TedNextSemiBold;
			font-size: 30pt;
			line-height: 1.3em;
		}

		section.idletimer .area p .bigger {
			display: block;
			font-size: 51pt;
			margin-top: -30px;
		}

	/* next */
	section.idletimer .area p a.next {
		left: 50%;
		margin-left: -168px;
		right: auto;
		bottom: -160px;
		background: url(../img/idletimer/button.png);
		background-repeat: no-repeat;
		background-size: 343px 75px;
		background-position: center; 
		letter-spacing: .5pt;
		width: 343px;
		height: 75px;
		font-size: 26pt;
		line-height: 65px;
	}




	


/* scoring */
section.scoring {
	position: absolute;
	top: 0px;
	left: 0px;
	background: #000;
	height: 100%;
	width: 100%;
	color: #fff;
	padding: 98px 90px;
	box-sizing: border-box;
	transition: opacity 250ms ease-in-out;
	will-change: opacity;
	opacity: 0;
}	
	
	section.scoring.load {
		opacity: 1;		
	}
	
	section.scoring h1 {
		font-family: TedNextBoldItalic;
		color: #ee2e24;
		font-size: 40pt;
		margin: 0;
		padding: 0;
		margin-top: 70px;
	}

		body.commandhouse section.scoring h1 {
			margin-top: -25px;
		}

	section.scoring hr {
		border:none;
		border-top: 1px solid #ee2e24;
		margin: 32px 0;
		width: 710px;
	}


	section.scoring div.points {
		margin-top: 28px;
		font-family: TedNext;
	}

	section.scoring div.points div {
		margin-bottom: 10px;
	}

		section.scoring div.points div label {
			width: 550px;
			font-size: 23pt;
			margin: 0;
			padding: 0;
		}

			section.scoring div.points div label:nth-child(2) {
				position: absolute;
				left: 640px;
			}

			section.scoring div.points div label strong {
				font-family: TedNextBold;
				font-weight: normal;
			}

	/* next */
	section.scoring a.next {
		bottom: 65px;
		right: 90px;		
	}


/* Top Scores */
section.topscores {
	position: absolute;
	height: 100%;
	width: 100%;
	color: #fff;
	padding: 98px 90px;
	box-sizing: border-box;
	transition: opacity 250ms ease-in-out;
	will-change: opacity;
	opacity: 0;
	background: #000;

}
	
	section.topscores.load {
		opacity: 1;		
	}	

	/* top scores */
	section.topscores .center {
		position: absolute;
		width: 365px;
		height: 100%;		
		top: 30px;
		left: 90px;
	}

		section.topscores .center h1 {
			font-family: TedNextBoldItalic;
			color: #ffffff;
			font-size: 38pt;
			margin: 0;
			padding: 0;
			width: 100%;
			display: block;
			text-align: center;
			margin: 0;
			padding: 0;
			margin-top: 70px;
			margin-left: -15px;
		}

		section.topscores .center .area  {
			position: relative;
			height:60%;
			width: 460px;
			font-family: TedNextLight;
			font-size: 17pt;
			margin-top: 30px;
			margin-left: 40px;
			column-count: 1;
    		column-gap: 100px;    		
		}

		section.topscores .center .break  {
			position: absolute;
			top: 0px;
			margin-top: -5px;
			left: 112%;
			width: 1px;
			height: 100%;
			border-left: 1px solid #ee2e24;
		}

		section.topscores .center ol {
			padding: 0;
			margin: 0;
			color: #ffffff;
			counter-reset: item;
    		list-style-type: none;  		
    	}

		section.topscores .center li  {
			display: block; 
			position: relative;	
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			width: 100%;
		}

		section.topscores .center li span:nth-child(1) {
			font-family: TedNextBold;
			flex:0 0 auto;
			width: 60px;
		}

		section.topscores .center li span:nth-child(2) {
			width: auto;			
			overflow: hidden;
			display: block;
			flex:0 1 auto;
			white-space: nowrap; 
			overflow: hidden;
			text-overflow: ellipsis;
			margin-right: 10px;
		}

		section.topscores .center li span:nth-child(3) {
			flex:0 0 auto;
			text-align: right;
			flex-shrink: 0;
			flex-grow: 1;
		}

	/* next */
	section.topscores a.next {
		bottom: 12px;
		right: auto;
		left: 50%;
		margin-left: -80px;
	}		


/* network error */
section.networkerror {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #000000e6;
	display: flex;
	align-items: center;
	transition: opacity 250ms ease-in-out;
	will-change: opacity;
	opacity: 1;
}	
	
	section.networkerror.load {
		opacity: 1;		
	}

	section.networkerror label {
		display: block;
		width: 100%;
		text-align: center;
		font-size: 60pt;
		font-family: TedNextSemiBold;
		animation-name: networkErrorLabel;	
		animation-duration: 1500ms;		
		animation-fill-mode: both;
		animation-direction: alternate;
		animation-iteration-count: infinite;
		line-height: 40pt;
	}

	
	section.networkerror label small {
		display: block;
		margin-top: 50px;
		font-size: 20pt;
		color: #9c9c9c;
		line-height: 25pt;
	}

	/* animate */
	@keyframes networkErrorLabel {
		0% { 
			transform: scale(.9);
		}
		100% {			
			transform: scale(1.1);
		}
	}