/*
 * Shell Energy Transitions Challenge
 * Author: Neat projects <ties@expertees.nl>
 *
 * Main CSS styles
 *
 * Shell color palette:
 * Yellow 100%: #FBCE07
 * Red 100%: 	#DD1D21
 * Dark blue: 	#003C88
 * Dark green: 	#008443
 * Light green: #BED50F
 * Oragne: 		#EB8705;
 * Brown: 		#743410;
 * Text grey:	#404040;
 * Greys drk-li:#595959, #7F7F7F, #A6A6A6, #D9D9D9, #F7F7F7
 */
* {
	outline:none;
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
    -webkit-user-select: none;
}

svg { max-height: 200%; }

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"] {
    -webkit-user-select:text;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
	
	::-webkit-input-placeholder {
    	color:rgba(117, 117, 117, 0.5);
	}
	::-moz-placeholder {
		color:rgba(117, 117, 117, 0.5);
	}

input[ng-disabled="true"]{
	-webkit-text-fill-color:#404040;
	opacity: 1;
}


[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
	display: none !important;
}


label { cursor: pointer; }

html, body {
	width:100%;
	height:100%;	
	overflow:hidden;
}

.hide{
	opacity: 0;
}

/* Main container positioning */
.main-wrapper {
	height:100%;
	width:100%;
	overflow:hidden;
}


.header-container {
	overflow:hidden;
	height:80px;
	position:absolute;
	top:0;
	width:100%;
	z-index:100;
}

.main-nav-container {
	position:absolute;
	top:80px;
	width:100%;
	overflow:hidden;
	z-index:98;
}
 
.main-container {
	position:absolute;
	top:80px;
	bottom:0px;	
	overflow:hidden;
	width:100%;
}

main{
	width:100%;
	height:100%;
}


/* Admin */
iframe.admin-frame {
	position:absolute;
	top:0px;
	right:0px;
	left:0px;
	bottom:0px;
	border:none;
	width:100%;
	height:100%;
}

/* Content CSS */

	header.main {
		background-color:#FBCE07;
		height:80px;
		color:#DD1D21;
		display:flex;
		display:-webkit-flex;
		display:-ms-flex;
		-webkit-justify-content:space-between;
		-ms-justify-content:space-between;
		justify-content:space-between;
		padding:0px;
	}


		header.main h1.logo {
			overflow:hidden;
			margin:0px;
			width:80px;
			min-width: 80px;
			height:80px;
			text-indent:100%;
			white-space:nowrap;
			background:url(../img/shell_pecten.svg) no-repeat center;
			background-color: #fff;
			background-size: 64px;
		}

		header.main .title {
			display:flex;
			display:-webkit-flex;
			display:-ms-flex;
		    align-items:center;
		    -webkit-align-items:center;
		    -ms-align-items:center;
		    flex-grow: 1;
            -webkit-flex-grow: 1;
            padding-left:60px;
		}

		header.main .round-data {
			font-weight: bold;
			width: 300px;
			display:flex;
			display:-webkit-flex;
			display:-ms-flex;
			justify-content:center;
		    -webkit-justify-content:center;
		    -ms-justify-content:center;
		    align-items:center;
		    -webkit-align-items:center;
		    -ms-align-items:center;
		    text-align: center;
		}
			header.main .round-data .round-number {
				width: 40%;
				line-height: 26px;
			}
			header.main .round-data .round-number span.label {
				font-size: 14px;
				display: block;
				text-transform: uppercase;
			}
			header.main .round-data .round-number span.round-current {
				font-size: 34px;
				padding-right: 2px;
			}
			header.main .round-data .round-number span.round-total {
				font-size: 20px;
				letter-spacing: 4px;

			}

			header.main .round-data .clock{
				position: relative;
				width: 60%;
				font-size: 50px;
			}
			header.main .round-data time::before{
				content:url(../img/icon_timer.svg);
				position:absolute;
				left:0px;
				top:-18px;
			}


	header.main .game-id {
		width:160px;
		height:80px;
		display:flex;
		display:-webkit-flex;
		display:-ms-flex;
		font-size:18px;
		font-weight:bold;
	}
		header.main .game-id > div {
			width:100%;
			text-align:center;
			display:flex;
			display:-webkit-flex;
			display:-ms-flex;
			justify-content:center;
		    -webkit-justify-content:center;
		    -ms-justify-content:center;
			flex-direction:column;
			-webkit-flex-direction:column;
			-ms-flex-direction:column;
			align-items:center;
		    -webkit-align-items:center;
		    -ms-align-items:center;
		}

		header.main .game-id > .label {
			color:#404040;
			text-transform:uppercase;
		}

		header.main .game-id > .id {
			background-color:#DD1D21;
			color:#FFF;
			word-wrap: break-word;
			overflow: hidden;
		}
			header.main .game-id > .id p{
				margin: 0;
			}
				header.main .game-id > .id p.id{
					margin-top: 5px;
				}







/* main menu */

	nav.menu {
		width:100%;
		background-color: #fff;
		overflow: hidden;
		display:flex;
		display:-webkit-flex;
		display:-ms-flex;
		-webkit-justify-content:space-between;
		-ms-justify-content:space-between;
		justify-content:space-between;
		padding:0px;
		border-bottom: 1px solid #D9D9D9;
	}

		nav.menu > ul {
			margin:0px;
			padding:0px;
			height:59px;
			list-style:none;
			display: inline-block;
			font-size:0px;
		}

			nav.menu > ul > li {
				margin:0px;
				padding:0px;
				border-right:1px solid #D9D9D9;
				overflow:hidden;
				background:#FFF;
				display: inline-block;
			}

				nav.menu > ul > li > a, 
				nav.menu > ul > li > p {
					height:59px;
					padding-left: 20px;
					padding-right: 20px;
					display:table-cell;
					text-align:center;
					vertical-align:middle;
					font-size:16px;
				}

				nav.menu > ul > li > p span {
					font-weight: bold;
					font-size:16px;
				}


				nav.menu > ul > li .btn {
					height:59px;
					padding-left: 10px;
					padding-right: 10px;
					display:table-cell;
					white-space:nowrap;
					background-size: 30px 30px;
					background-color:#FFF;
					background-repeat:no-repeat;
					background-position:center;
					color: #404040;
				    font-size: 16px;
				    font-weight: normal;
				}

					.btn.btn-expand {
						background-image:url(../img/icon_expand.svg);
						background-position:7% 50% !important;
						width: 170px;
						padding-left: 50px !important;
						text-align: start !important;
					}

					.btn.btn-refresh {
						background-image:url(../img/icon_refresh.svg);
						background-position:7% 50% !important;
						width: 140px;
						padding-left: 50px !important;
						text-align: start !important;
					}



					nav.menu > ul > li > a:active {
						background:#c3c3c3;
					}

				nav.menu > ul > li.active {
					color:#DD1D21; /* blue: #0A549E; */
				}



/* Start */
.content-start {
	overflow:hidden;
	height:100%;
}

	.start-menu {
		margin:0px;
		padding:0px;
		overflow:auto;
		position:absolute;
		top:50%;
		width:100%;
		transform:translateY(-50%);
	}

	.start-menu > ul.options-list {
		margin:0px auto;
		padding:0px 20px;
		overflow:hidden;
		list-style:none;
		flex-wrap: wrap;
		-ms-flex-wrap:wrap;
		display:flex;
		display:-webkit-flex;
		display:-ms-flex;
		justify-content:center;
		-webkit-justify-content:center;
		-ms-justify-content:center;
	}

		.start-menu > ul.options-list li a {
			overflow:hidden;
		}

			.start-menu > ul.options-list li a.disabled > article {
				opacity:0.5;
			}



		.start-menu > ul.options-list.start {
			justify-content:flex-start;
			-webkit-justify-content:flex-start;
			-ms-justify-content:flex-start;
		}

		.start-menu ul.options-list > li {
			width:50%;
			width:calc(50% - 40px);
			margin:20px;
		}

		.start-menu ul.options-list > li:last-child:nth-child(2) {
			margin-left:40px;
		}


	article.start-option {
		border:1px solid #D9D9D9;
		height: 100%;
		background:#FFF;
		padding:20px;
		display:flex;
		display:-webkit-flex;
		display:-ms-flex;
		justify-content:center;
		-webkit-justify-content:center;
		-ms-justify-content:center;
		flex-direction:column;
		-webkit-flex-direction:column;
		-ms-flex-direction:column;
		min-height: 200px;
		padding: 20px;
	}

	.content-start article.start-option {
		min-height:256px;
	}


		article.start-option h1 {
			padding: 20px;
			text-align:center;
			vertical-align: middle;
			margin:0px;
			font-size:25px;
			font-weight:bold;
			color:#DD1D21;
		}


			article.start-option h1 span.explanation {
				font-size:16px;
				font-weight:bold;
				color:#404040;
				line-height: 14px;
			}



	article.start-option.video h1 {
		padding:0px 20px 30px 20px;
	}


	article.start-option.video  .btn-group {
		width:100%;
		overflow:hidden;
		font-size:0;
	}
		article.start-option.video .btn-group .btn {
			width:100%;
			margin:0px;
			margin-top: 20px;
			padding:10px 0px;
			display:inline-block;
		}

		article.start-option.video .btn-group .btn.play {
			background: #D9D9D9;
    		color: #404040;
		}




	article.start-option.documents {
		justify-content:flex-start;
		-webkit-justify-content:flex-start;
	}

		article.start-option.documents h1 {
			padding:0px 20px;
			padding-bottom:10px;
		}


		.document-list-container {
			display:flex;
			display:-webkit-flex;
			justify-content:space-between;
			-webkit-justify-content:space-between;
		}


		ul.document-list {
			margin:0px;
			padding:0px;
			list-style:none;
			width:50%;
		}

			ul.document-list li {
				font-size:0px;
			}

			ul.document-list li a {
				display:inline-block;
				text-transform:uppercase;
				padding:5px;
				padding-left:30px;
				background-image:url(../img/icon_pdf.svg);
				background-size:15px;
				background-position:5px 5px;
				background-repeat:no-repeat;
				text-decoration:underline;
				font-size:16px;
			}

		article.start-option.documents .btn-group .btn {
			width: 100%;
		    margin: 0px;
		    margin-top:10px;
		    padding: 10px 0px;
		    display: inline-block;
		}





/* Setup */

.stepper span.player-amount-label {
	padding-right:30px;
	background-image:url(../img/icon_player_dark.svg);
	background-repeat:no-repeat;
	background-position:right;
	background-size:20px;
	display:inline-block;
	margin-right:10px;
}

.content-setup{
	width:100%;
	height:100%;	
	text-align: center;
}
.content-setup .header-btn-container {
	position: absolute;
	display: block;
	top: 20px;
	left: 20px;
	right: 20px;
	height: 60px;
	display:flex;
	display:-webkit-flex;
	display:-ms-flex;
	-webkit-justify-content:space-between;
	-ms-justify-content:space-between;
	justify-content:space-between;
}


/*
.content-setup .footer-btn-container {
	position: absolute;
	display: block;
	bottom: 0px;
	left: 20px;
	right: 20px;
	height: 60px;
}
	.content-setup .footer-btn-container .btn-group{
		display:flex;
		display:-webkit-flex;
		display:-ms-flex;
		-webkit-justify-content:space-between;
		-ms-justify-content:space-between;
		justify-content:space-between;
	}
	.footer-btn-container .btn.demo {
		background:#D9D9D9;
		color:#404040; 
	}

	.footer-btn-container .btn.start {
		width: 70%;
		display: inline-block;
	}
*/
.btn-group.start-buttons {
	margin-top:20px;
}

	.btn-group.start-buttons .btn.start {
		flex-grow:2;
		-webkit-flex-grow:2;
		width:200%;
	}
	.btn-group.start-buttons .btn.demo {
		background:#D9D9D9;
		color:#404040; 
	}



.setup-form-container {
	position: absolute;
	left: 20px;
	right: 20px;
	height:100%;
	top: 100px;
	bottom: 80px;
	overflow:auto;
	display:flex;
	display:-webkit-flex;
	display:-ms-flex;
	justify-content:center;
	-webkit-justify-content:center;
	-ms-justify-content:center;
}

	section.step {
		padding-right:0px;
		height:100%;
		overflow:hidden;
		min-width: 50%;
	}

		section.step h2 {
			font-size:20px;
			text-transform:uppercase;
			margin:0px;
			padding:20px;
			font-weight:bold;
			text-align:left;
		}

		section.step form {
			background:#FFF;
			border:1px solid #D9D9D9;
			padding:20px 40px;
			text-align:left;
			margin-bottom:20px;
			max-height:75%;
			overflow:scroll;
			-webkit-overflow-scrolling:touch;
		}

		section.step .btn-group {
			text-align:left;
			display:flex;
			display:-webkit-flex;
			display:-ms-flex;
		}

			section.step .btn-group .btn {
				width:100%;
			}

				section.step .btn-group .btn:nth-child(2) {
					margin-left:10px;
				}

		section.step form.money-form {
			max-height:80%;
			margin-bottom: 0;
		}



	section.step.players {
		height:auto;
		position:absolute;
		bottom:20px;
		top:0px;
		left:10px;
		right:10px;
	}


		menu.game-settings {
			margin:10px 0px;
			padding:10px 0px;
		}

			menu.game-settings form {
				padding:0px;
				border:none;
				margin-bottom:0px;
				background:transparent;
			}
				menu.game-settings form fieldset {
					margin-bottom:0px;
				}

			form .row.checkbox {
				height:35px;
				line-height:30px;
				overflow:hidden;
			}

			form .row.checkbox label {
				display:inline-block;
				padding:0px 10px;
				width:auto;
				overflow:hidden;
				padding-top:2px;
			}

			form .row.checkbox input {
				display:inline-block;

			}

			form .row.checkbox input[type=checkbox]:checked {
				background-color: #FFFFFF;
			}


	/*
		section.step.players .btn-group {
			position:absolute;
			bottom:180px;
			width:100%;
		}
*/


	.setup-form-container .table-container table {
		height:420px;
	}

	.setup-form-container .table-container table th.column-fixed-width {
		width: calc(85% / 3);
	}

	.setup-form-container .table-container table th img.country-flag{
		max-width: 80px;
		max-height: 40px;
		display: inline-block;
		vertical-align: middle;
		margin-right: 20px;
	}

	.setup-form-container .table-container table th p{
		display: inline-block;
		vertical-align: middle;
	}

	.setup-form-container .table-container table tbody tr{
		height: 100%;
	}

	.setup-form-container .table-container table td{
		background: transparent;
	}

		.setup-form-container .table-container table ul{
			padding: 0;
		    margin: 0;
			list-style: none;
			display:flex;
			display:-webkit-flex;
			display:-ms-flex;
			justify-content:flex-start;
		    -webkit-justify-content:flex-start;
		    -ms-justify-content:flex-start;
		    align-items:center;
		    -webkit-align-items:center;
		    -ms-align-items:center;
		    text-align: center;
		}

			.setup-form-container .table-container table ul.player-list {
				flex-wrap: wrap;
			}
				.setup-form-container .table-container table ul.player-list li {
					margin-top: 10px;
					background-color: #ffffff;
				}
				.setup-form-container .table-container table ul.player-list li.last {
					background-color: #FBCE07;
				}

				.setup-form-container .table-container table ul.player-list .player-number{
					position: absolute;
					top: 10px;
					font-size: 11px;
					margin: 0;
					display: block;
					width: 100%;
					height: 22px;
					text-align: center;
					color: #D9D9D9;
				}
					.setup-form-container .table-container table ul.player-list .icon-block.industry .player-number{
						top:15px;
					}
					.setup-form-container .table-container table ul.player-list .icon-block.energy_provider .player-number{
						top:5px;
					}
				.setup-form-container .table-container table ul.player-list .card-number{
					position: absolute;
					left: 0;
					top: 0;
					margin: 0;
					display: inline-block;
					font-size: 11px;
					width: 15px;
					height: 15px;
					background-color: #FBCE07;
					padding-top: 2px;
				}
				.setup-form-container .table-container table ul.player-list .icon-block{
					position: absolute;
					left: 0;
					top: 5px;
					bottom: 0;
					right: 0;
					margin: 0;
					display: block;
				}

	.setup-form-container .name-container{
		height: 100%;
	}

/* Dashboard selection */
.content-dashboardselection{
	text-align: center;
}
	.content-dashboardselection h1{
		padding-top: 20px;

	}

/* Presenter screen */
.content-presenter{
	position: absolute;
	text-align: center;
	height: 100%;
	width:100%;
}

	.content-presenter h1{
		position: absolute;
    	top: 10px;
    	width: 100%;
    	text-align: center;
	}

	.full-screen-overlay{
		position: absolute;
		width:100%;
		height:100%;
		padding: 100px;
		display:flex;
		display:-webkit-flex;
		display:-ms-flex;
		-webkit-justify-content:center;
		-ms-justify-content:center;
		justify-content:center;
		align-items:center;
		-webkit-align-items:center;
		-ms-align-items:center;
		color: #F7F7F7;
		font-size: 30px;
		z-index: 97;
		background: url(../img/icon_cross.svg) no-repeat right 20px top 20px;
		background-color: rgba(0,0,0,0.8);
	}
		.full-screen-overlay .overlay-timer{
			position: absolute;
			top: 30px;
			right: 80px;
			font-size: 30px;
		}

	.content-presenter h2{
		font-size: 50px;
		font-weight: normal;
		text-transform: uppercase;
	}

	.presenter-container{
		position: absolute;
		text-align: left;
		width:100%;
		height:100%;
		flex-direction: column;
		display:flex;
		display:-webkit-flex;
		display:-ms-flex;
		-webkit-justify-content:center;
		-ms-justify-content:center;
		justify-content:center;
		align-items:center;
		-webkit-align-items:center;
		-ms-align-items:center;
	}
		.presenter-container h3{
			margin-top: 0;
			margin-bottom: 10px;
		}

		.control-container{
			position: absolute;
			right: 0px;
			top:100px;
			width: 50%;
			text-align: center;
			min-width: 385px;
			z-index: 10;
		}

			.round-controller {
				position: relative;
				width: 100%;
				display:flex;
				display:-webkit-flex;
				display:-ms-flex;
				justify-content:center;
			    -webkit-justify-content:center;
			    -ms-justify-content:center;
			    align-items:center;
			    -webkit-align-items:center;
			    -ms-align-items:center;
			    text-align: center;
			}
				.round-controller button{
					width: 150px;
   					height: 150px;
   					text-align: center;
				}

					.round-controller button label{
						display: block;
						font-size: 16px;
						position: relative;
						bottom: -55px;
					}

			.confirm-container {
				position:relative;
			 	margin-top: 50px;
			 	display: block;
			 	width:100%;
			  	z-index:99;
			  	text-align: center;
			}

				.confirm-container nav.menu{
					background: transparent;
				}

				nav.confirm {
					padding: 10px;
					border:none;
					overflow: inherit;
					
				}
					nav.confirm > ul{
						width: 100%;
					}

					nav.confirm > ul > li{
						border:none;
						background-color: #FBCE07;
						margin-right: 20px;
					}
						nav.confirm > ul > li.no-bg{
							background-color: none;
						}
						nav.confirm > ul > li > p {
							color: #DD1D21;
							font-weight: bold;
							text-transform: uppercase;
							font-size: 20px;
						}
						nav.confirm > ul > li > a {
							font-weight: bold;
							text-transform: uppercase;
							font-size: 24px;
							width: 50%;
						}

		.game-info{
			position:relative;
		 	display: block;
		 	width: 100%;
		 	height: 350px;
		}
			.game-info ul.table-list{
				width:100%;
				margin-top: 20px;
				padding-left: 0;
				flex-direction: column;
				display:flex;
				display:-webkit-flex;
				display:-ms-flex;
				-webkit-justify-content:center;
				-ms-justify-content:center;
				justify-content:center;
				align-items:center;
				-webkit-align-items:center;
				-ms-align-items:center;
				overflow: auto;
			}

			.game-info .chart-wrapper {
				height: 170px;
				width: 100%;
				max-width: 330px;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			    -webkit-transform: translateX(-50%);
			} 

		menu.game-timeline{
			margin-top: 0;
			position:absolute;
			left: 0px;
			top: 100px;
			width: 50%;
			text-align: center;
			min-width: 450px;
		}

			menu.game-timeline ul.table-list{
				width:100%;
				height: 100%;
				margin-top: 0;
				padding-left: 0;
				flex-direction: column;
				display:flex;
				display:-webkit-flex;
				display:-ms-flex;
				-webkit-justify-content:center;
				-ms-justify-content:center;
				justify-content:center;
				align-items:center;
				-webkit-align-items:center;
				-ms-align-items:center;
				overflow: visible;
			}
				ul.table-list li{
					list-style:none;
				}

				.btn-list span{
					display: inline-block;
					text-align: center;
					vertical-align: middle;
				}

				.btn-list .col1{
					width: 200px;
					margin-right: 20px;
					text-align: right;
				}
				.btn-list .col2{
					width: 150px;
					text-align: left;
				}

			menu.game-timeline h3{
				position: relative;
				padding-left: 5px;
				width: 100%;
			}
				menu.game-timeline li.btn {
					position: relative;
					display:block;
					padding:0px;
					cursor:pointer;
				}
					.btn-list{
						padding: 0px;
						margin-bottom: 10px;
					}
					.btn-list .number{
						margin-left: 10px;
						margin-right: 10px; 
						width: 35px;
						text-align: right;
					}
					.btn-list .round-name{
						width: 140px;
						text-align: left;
					}
					.btn-list .round-number{
						width: 50px;
						text-align: center;
					}
					.btn-list .time{
						width: 70px;
						text-align: center;
					}
					.btn-list .game-play{
						width: 60px;
						text-align: center;
					}
						.btn-list .icn-game-play{
							position: absolute;
							content:url(../img/icon_play_grey.svg);
							width: 15px;
							top: 5px;
						}

			.btn.reopen{
				padding: 15px 52px;
			}


/* Dashboard */

.content-dashboard {
	width: 100%;
	height: 100%;
}
	.content-dashboard table{
		margin: 20px;
		height: 93%;
		height: calc(100% - 40px);
		width: 95%;
	}

	.content-dashboard table td{
		padding: 5px;
	}

	.content-dashboard table th.column-fixed-width{
		width: calc(85% / 3);
	}

	.content-dashboard table .industry-container{
			display:flex;
			display:-webkit-flex;
			display:-ms-flex;
			justify-content:center;
		    -webkit-justify-content:center;
		    -ms-justify-content:center;
		    align-items:center;
		    -webkit-align-items:center;
		    -ms-align-items:center;
		    text-align: center;
			text-align: center;
			height: 100%;
			margin-bottom: 5px;
		}

		.content-dashboard table ul{
			padding: 0;
		    margin: 0;
			list-style: none;
			display:flex;
			display:-webkit-flex;
			display:-ms-flex;
			justify-content:center;
		    -webkit-justify-content:center;
		    -ms-justify-content:center;
		    align-items:center;
		    -webkit-align-items:center;
		    -ms-align-items:center;
		    text-align: center;
		}

			.content-dashboard table ul.player-list {
				flex-wrap: nowrap;
			}

			.content-dashboard table ul.industry-list {
				flex-wrap: wrap;
				-ms-flex-wrap:wrap;
				max-height: 241px;
				overflow: hidden;
			}

	.content-dashboard table .government-container {
		padding: 0;
	    margin: 0;
		list-style: none;
		display:flex;
		display:-webkit-flex;
		display:-ms-flex;
		justify-content:center;
	    -webkit-justify-content:center;
	    -ms-justify-content:center;
	    align-items:center;
	    -webkit-align-items:center;
	    -ms-align-items:center;
	    text-align: center;
	}

	.content-dashboard table .government-container .government-img {
		list-style: none;
		display:flex;
		display:-webkit-flex;
		display:-ms-flex;
		justify-content:center;
	    -webkit-justify-content:center;
	    -ms-justify-content:center;
	    align-items:center;
	    -webkit-align-items:center;
	    -ms-align-items:center;
	    text-align: center;
	}



/* Evaluation */

.content-evaluation {
	width: 100%;
	height: 100%;
}
	.content-evaluation .content{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 20px;
	}

	.content-evaluation .content article.message-container{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 60%;
		overflow: hidden;
		display:flex;
		display:-webkit-flex;
		display:-ms-flex;
		justify-content:center;
	    -webkit-justify-content:center;
	    -ms-justify-content:center;
	    align-items:center;
	    -webkit-align-items:center;
	    -ms-align-items:center;
	}
		.content-evaluation .content article.message-container .image-container{
			position: relative;
			height: 100%;
			width: auto;
			width: 60%;
			overflow: hidden;
			display: inline-block;
			background-repeat: no-repeat;
		}

		.content-evaluation .content article.message-container .description-container{
			position: relative;
			margin-left: 20px;
			height: 100%;
			width: 36%;
			overflow: hidden;
			display: inline-block;
		}
	.content-evaluation .content .data-container{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 37%;
		display:flex;
		display:-webkit-flex;
		display:-ms-flex;
		justify-content:center;
	    -webkit-justify-content:center;
	    -ms-justify-content:center;
	    align-items:center;
	    -webkit-align-items:center;
	    -ms-align-items:center;
	    text-align: center;
	    padding-left: 10px;
    	padding-right: 10px;
	}
		.content-evaluation .content .data-container .chart-area{
			display:flex;
			display:-webkit-flex;
			display:-ms-flex;
			justify-content:center;
		    -webkit-justify-content:center;
		    -ms-justify-content:center;
		    align-items:center;
		    -webkit-align-items:center;
		    -ms-align-items:center;
		    text-align: center;
			height: 100%;
			width: 100%;
		}
		



/* General classes */
.content-conference {
	width:100%;
	height:100%;	
	flex-direction: column;
	display:flex;
	display:-webkit-flex;
	display:-ms-flex;
	-webkit-justify-content:flex-start;
	justify-content:flex-start;
	align-items:center;
	-webkit-align-items:center;
	-ms-align-items:center;
	text-align: center;
}

.content-intro, .content-market, .content-productionmarket, .content-awards, .content-outtro, .content-counting, .content-viewcontainer{
	width:100%;
	height:100%;	
	flex-direction: column;
	display:flex;
	display:-webkit-flex;
	display:-ms-flex;
	-webkit-justify-content:center;
	-ms-justify-content:center;
	justify-content:center;
	align-items:center;
	-webkit-align-items:center;
	-ms-align-items:center;
	text-align: center;
}

.content-conference h2, .content-intro h2, .content-market h2, .content-productionmarket h2, .content-awards h2, .content-outtro h2, .content-viewcontainer h2{
	font-size: 50px;
	font-weight: normal;
	text-transform: uppercase;
}

	.instructions{
		position: relative;
		font-size: 30px;
		width: 80%;
	}
		.instructions h1{
			position: relative;
			margin-bottom: 40px;
		}

		.instructions ol li{
			margin-top: 30px;
		}

.content-outtro .content {
	width:80%;
	height:80%;	
}
	.content-outtro .content img {
		width:100%;
		height:100%;	
	}


.price-container{
	flex-direction: column;
	display:flex;
	display:-webkit-flex;
	display:-ms-flex;
	justify-content:center;
    -webkit-justify-content:center;
    -ms-justify-content:center;
    align-items:center;
    -webkit-align-items:center;
    -ms-align-items:center;
    text-align: center;
	height: 100%;
	width: 36%;
	margin-left: 20px;
}
	.price-container .blue-energy,
	.price-container .green-energy{
		padding-left: 20px;
		display:flex;
		display:-webkit-flex;
		display:-ms-flex;
		justify-content:center;
	    -webkit-justify-content:center;
	    -ms-justify-content:center;
	    align-items:center;
	    -webkit-align-items:center;
	    -ms-align-items:center;
	    text-align: center;
		height: 100%;
	}


/* Market screens */

.full-screen-msg{
	position: absolute;
	width:100%;
	height:100%;
	z-index: 20;
	background-color: rgba(0,0,0,0.7);
}
	.full-screen-msg h1{
		position: absolute;
	 	top: 40%;
	 	transform: translateY(-50%);
		width: 100%;
		text-align: center;
	 	color: #DD1D21;
		font-size: 100px;
	 	font-weight: bold;
		text-transform: uppercase;
	}

.content-market .content{
	width:100%;
	height:100%;
	padding-left: 20px;
 	padding-right: 20px;
	flex-direction: column;
	display:flex;
	display:-webkit-flex;
	display:-ms-flex;
	-webkit-justify-content:center;
	-ms-justify-content:center;
	justify-content:center;
	align-items:center;
	-webkit-align-items:center;
	-ms-align-items:center;
	text-align: center;
}
	.content-market .content nav.menu{
		position: absolute;
		width: auto;
		left: 10px;
		top: 10px;
	}
		.content-market nav.menu > ul {
			height: auto;
		}
			.content-market .content nav.menu > ul > li{
				display: block;
				padding: 10px;
				margin: 2px;
			}
	.content-market .content .selection-container {
		height: 36%;
		overflow: hidden;
	}
		.content-market .content .selection-container table th{
			padding-top: 20px;
		}

		.content-market .content .selection-container table td.column-fixed-width {
			width: 10%;
		}
		.content-market .content .selection-container table td.column-fixed-width h3 {
			margin:0px;
		}


	.content-market .content .divider-container-down{
		display: none;
		height: 10%;
		width: 100%;
		background: url(../img/icon_arrow.svg) no-repeat center;	
	}

		.content-market .content .input-container .divider-container-right{
			height: 100%;
			width: 12%;
			background: url(../img/icon_arrow_right.svg) no-repeat center;
			
		}

	.content-market .content .input-container{
		width:100%;
		height: 50%;
		display:flex;
		display:-webkit-flex;
		display:-ms-flex;
		-webkit-justify-content:center;
		-ms-justify-content:center;
		justify-content:center;
		align-items:center;
		-webkit-align-items:center;
		-ms-align-items:center;
		text-align: center;
	}
		.content-market .content .input-container .price-container,
		.content-market .content .input-container .data-container{
			margin-left: 0;
			width: 25%;
		}
		.content-market .content .input-container .trade-container{
			margin-left: 20px;
			width: 65%;
			height: 100%;
			flex-direction: column;
			display:flex;
			display:-webkit-flex;
			display:-ms-flex;
			-webkit-justify-content:center;
			-ms-justify-content:center;
			justify-content:center;
			align-items:center;
			-webkit-align-items:center;
			-ms-align-items:center;
			text-align: center;
		}
			.content-market .content .input-container .title{
				height: 20%;
				display:flex;
				display:-webkit-flex;
				display:-ms-flex;
				-webkit-justify-content:center;
				-ms-justify-content:center;
				justify-content:center;
				align-items:center;
				-webkit-align-items:center;
				-ms-align-items:center;
				text-align: center;
				max-height: 30px;
			}

			.content-market .content .input-container .trade-container div{
				height: 100%;
				width: 100%;
				padding-left: 20px;
				padding-right: 10px;
				flex-direction: row;
				display:flex;
				display:-webkit-flex;
				display:-ms-flex;
				-webkit-justify-content:flex-start;
				justify-content:flex-start;
				align-items:center;
				-webkit-align-items:center;
				-ms-align-items:center;
				text-align: center;
				overflow: hidden;
			}
				.content-market .content .input-container .trade-container .multiply{
					width: 90px;
				}
				.content-market .content .input-container .trade-container .description{
					width: 90px;
					text-align: center;
				}
			
		.content-market .content .input-container .pay-container{
			width: 30%;
			height: 100%;
			margin-left: 20px;
			flex-direction: column;
			display:flex;
			display:-webkit-flex;
			display:-ms-flex;
			-webkit-justify-content:center;
			-ms-justify-content:center;
			justify-content:center;
			align-items:center;
			-webkit-align-items:center;
			-ms-align-items:center;
			text-align: center;
			max-height: 300px;
		}

			.content-market .content .input-container .pay-container .title{
				height: 20%;
				display:block;
				text-align: center;
				max-height: 30px;
			}

			.pay-container .amount{
				width: 100%;
				height: 81%;
			}
				.pay-container .amount p{
					margin-bottom:0;
				}

			.pay-container .button{
				width: 100%;
				margin-top: 20px;
			}

/* Production market */
.input-container .data-container{
	flex-direction: column;
	display:flex;
	display:-webkit-flex;
	display:-ms-flex;
	justify-content:center;
    -webkit-justify-content:center;
    -ms-justify-content:center;
    align-items:center;
    -webkit-align-items:center;
    -ms-align-items:center;
    text-align: center;
	height: 100%;
	width: 36%;
	margin-left: 20px;
}
	.input-container .data-container div{
		padding-left: 20px;
		display:flex;
		display:-webkit-flex;
		display:-ms-flex;
		justify-content:center;
	    -webkit-justify-content:center;
	    -ms-justify-content:center;
	    align-items:center;
	    -webkit-align-items:center;
	    -ms-align-items:center;
	    text-align: center;
		height: 100%;
		width: 100%;
	}

/* Taxes */
.content-taxes {
	width: 100%;
	height: 100%;
}
	.content-taxes .content{
		text-align: center;
		width:100%;
		height:100%;
	}

		.content-taxes .content table ul{
			padding: 0;
		    margin: 0;
			list-style: none;
			display:flex;
			display:-webkit-flex;
			display:-ms-flex;
			justify-content:center;
		    -webkit-justify-content:center;
		    -ms-justify-content:center;
		    align-items:center;
		    -webkit-align-items:center;
		    -ms-align-items:center;
		    text-align: center;
		    flex-wrap: wrap;
		    -ms-flex-wrap:wrap;
		}

		.content-taxes .content table ul li{
			padding: 0;
			margin: 0;
		}

	.content-taxes table{
		margin: 20px;
		height: 70%;
		height: calc(80% - 40px);
		width: 95%;
	}

	.content-taxes table th.column-fixed-width{
		width: calc(95%/3);
	}

/*Counting */

.counting-form-container {
	height:100%;
	width: 100%;
	display:flex;
	display:-webkit-flex;
	display:-ms-flex;
	justify-content:center;
	-webkit-justify-content:center;
	-ms-justify-content:center;
}

/* Awards */
.content-awards .content {
	width: 100%;
	height: 100%;
}
	.content-awards .content table{
		width: 100%;
		height: 80%;
		margin-top: 50px;
	}

		.content-awards .content .selection-container{
			padding: 40px;
			padding-top: 10px;
			width: 100%;
			height: 100%;
			max-height: 100%;
			max-width: 100%;
			text-align: center;
			overflow: scroll;
		}
			.content-awards .content .selection-container .chart-wrapper {
			    position: absolute;
			    width: 950px;
			    height: 630px;
			    overflow: hidden;
			    left: 50%;
			    transform: translateX(-50%) translateY(-35%);
			    -webkit-transform: translateX(-50%) translateY(-35%);
			    top:50%;
			}
				.content-awards .content .selection-container .chart-wrapper .chart{
					width: 950px;
			    	height: 630px;
				}


			.content-awards .content .selection-container .chart-wrapper chart-legend {
 				font-size: 24px;
 			}

			.content-awards .content .selection-container table th, 
			.content-awards .content .selection-container table td{
				padding-top: 3px;
				padding-bottom: 2px;
				padding-right: 8px;
				padding-left: 8px;
			}

			.content-awards .content .selection-container h1{
				text-align: left;
				width: 65%;
				max-height: 70px;
				overflow: hidden;
				text-overflow: ellipsis;
			}

	.content-awards .content .selection-container h2.green-energy {
	    position: absolute;
	    width: 500px;
	    right: 0px;
	    top: 0px;
	    text-align: right;
	    margin: 0px;
	    font-weight:bold;
 	}


	.content-awards .content nav.menu{
		position: absolute;
		right: 10px;
		top: 0px;
		width: auto;
		height: 60px;
		background-color: #f7f7f7;
		border: none;
	}
		.content-awards nav.menu > ul {
			height: 60px;
			border: none;
		}
			.content-awards .content nav.menu > ul > li {
				display: inline-block;
				padding: 10px;
				margin: 0;
				width: 60px;
				height: 60px;
				border: none;
				margin-right:5px;
			}

			.content-awards .content nav.menu > ul > li > p.btn-label{
				font-size: 40px;
				font-weight: bold;
				padding: 0;
				height: 50px;
				width: 40px;
				text-align: center;
				margin-top:-2px;
				position: absolute; 
				margin-bottom: 0;
			}

.footer-container {
	overflow:hidden;
	position:absolute;
	z-index:10000;
	bottom:10px;
	width:100%;
	text-align:right;
	pointer-events:none;

}
	.footer-container  footer {
		overflow:hidden;
		height:80px;
		padding:20px;
		font-weight:bold;
		color:rgba(0,0,0,0.3);
	}