/*
 * Shell Energy Transitions Challenge
 * Author: Neat projects <pim@expertees.nl>
 *
 * Main CSS styles
 *
 * Shell color palette:
 * Yellow 100%: #FBCE07; = rgba(251, 206, 7, 1)
 * Red 100%: 	#DD1D21; = rgba(221, 29, 33, 1)
 * Dark blue: 	#003C88;
 * Dark green: 	#008443;
 * Light green: #BED50F;
 * Orange: 		#EB8705;
 * Brown: 		#743410;
 * Text grey:	#404040;
 * Greys drk-li:#595959, #7F7F7F, #A6A6A6, #D9D9D9, #F7F7F7
 * Countryclrs: #FFD300, #007E47, #F49600 = rgba(255, 211, 0, 1), rgba(0, 126, 71, 1), 'rgba(244, 150, 0, 1)'
 */


body, a {
	font-family:'Futura';
	color:#404040;
	font-size:16px;
	font-weight: normal;
}

.main-wrapper{
	background-color: #F7F7F7;
}

a {
	text-decoration: none;
}

h1 {
 	font-size: 30px;
 	text-transform: uppercase;
 	font-weight: normal;
 }
 h1.title{
 	height: 80px;
 	text-overflow: ellipsis;
 	overflow: hidden;
 	margin: 0;
 }

h2 {
 	font-size: 18px;
 	font-weight: bold;
 }

h3 {
	text-transform: uppercase;
}

.link {
	text-decoration: underline;
	color: #DD1D21;
	cursor: auto;
}

/* != semantic ;) */
.blue {
	color: #003C88;
}

.green {
	color: #008443;
}

.red {
	color: #DD1D21;
}



.loading {
	pointer-events:none;
}
	.loading::after {
		display:block;
		width:100%;
		height:100%;
		position:absolute;
		content:"";
		background:url(../img/loading.svg);
		background-repeat:no-repeat;
		background-size:50px;
		background-position:center;
		background-color:rgba(0,0,0,0.6);
	}

.saving {
	pointer-events:none;
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	background:url(../img/icon_check_green.svg);
	background-repeat:no-repeat;
	background-size:200px;
	background-position:center;
	background-color:rgba(255,255,255,0.7);
	z-index: 90;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
}
	

.btn {
	font-weight:bold;
	font-size:20px;
	color:#DD1D21;
	background-color:#FBCE07;
	text-transform:uppercase;
	text-align:center;
	border:none;
	cursor:pointer;
	padding: 15px 30px;
}
	.btn.disabled {
		opacity:0.3;
	}



.btn.btn-close {
	background-color:#000;
	color:#FFF;
	padding:20px 10px;
}




.icon {
	display:inline-block;
	width:20px;
	height:20px;
	text-indent:100%;
	overflow:hidden;
	white-space:nowrap;
	background-size:100%;
	background-position:center;
	background-repeat:no-repeat;
}

	.icon.loading-icon {
		background-image:url(../img/loading_dark.svg);
	}



/* Menu */

article[disabled="disabled"]{
	opacity: 0.3;
}

nav.menu[disabled="disabled"]{
	opacity: 0.3;
}

button[disabled="disabled"], select[disabled="disabled"]{
	opacity: 0.3;
}

/* Presenter (game control) */
ul.table-list li p {
	font-weight: bold;
	text-transform: none;
	text-align:left;
	margin-top: 5px;
	margin-bottom: 0px;
	font-size: 16px;
}


/* != semantic ;) */
a.btn-list {
	font-weight:normal;
	text-transform: capitalize;
	color:#404040;
	text-align:left;
	border:1px solid #D9D9D9;
	cursor:pointer;
	background-color:#FFFFFF;
	padding: 5px;
}
	li.btn {
		background: transparent;
		list-style: none;
	}

	li.header p span.col1, li.header p span.col2{
		text-transform: uppercase;
	}

	li.header span{
		border-bottom:1px solid #D9D9D9;
	}

	li.btn a{
		background-color:#FFFFFF;
	}
	li.btn a.active{
		color:#DD1D21;
		background-color:#FBCE07;
	}
		a.btn-list span.round-name{
			font-weight: bold;
		}
		a.played{
			opacity: 0.5;
		}





.round-controller button{
	background-color:#FBCE07;
	background-size: 70px;
}
    .btn-play { 
		background-image:url(../img/icon_play.svg);
	 }
    .btn-pause { 
		background-image:url(../img/icon_pause.svg);
	 }
    .btn-next { 
		background-image:url(../img/icon_next.svg);
	 }
	.btn [disabled="disabled"]{
		opacity: 0.3;
	}

/* forms */
form fieldset {
	border:none;
	padding:0px;
	margin:0px;
	margin-bottom:20px;
}

	form fieldset ul,
	form fieldset ul li {
		margin:0px;
		padding:0px;
		margin-bottom:20px;
		list-style:none;
	}


	form .btn-group {
		overflow:hidden;
	}
		form .btn-group .btn {
			float:right;
		}


	form label {
		display:block;
		font-weight:bold;
		color:#404040;
		text-transform:uppercase;
		margin-bottom:0px;
		width:100%;
	}



form.money-form fieldset {
	background:#FFF;
	border:1px solid #D9D9D9;
	padding:20px;
	max-height:600px;
	min-height:400px;
	overflow:auto;
    -webkit-overflow-scrolling:touch;
}



input,
select {
	border:none;
	border-bottom:1px solid #7f7f7f;
	padding:10px 0px;
	display:block;
	width:100%;
	max-width:350px;
	border-radius:0px;
}


input[type=checkbox] {
	appearance:none;
	-webkit-appearance:none;
	display:block;
	width:30px;
	height:30px;
	border:1px solid #444;
}

input[type=checkbox]:checked {
	background-image:url(../img/icon_check.svg);
	background-size:25px;
	background-repeat:no-repeat;
	background-position:center;
}


select {
	-webkit-appearance:none;
	appearance:none;
	background-color:#FFF;
	background-image:url(/img/icon_arrow.svg);
	background-repeat:no-repeat;
	background-position:calc(100% - 10px) center;
	background-size:20px;
}




/* Setup */

.stepper {
	display:flex;
	display:-webkit-flex;
	display:-ms-flex;
	justify-content:flex-start;
	-webkit-justify-content:flex-start;
	-ms-justify-content:flex-start;
	overflow: hidden;
	height: 50px;
}

	.stepper .btn {
		padding:10px;
		padding-top:5px;
		width:50px;
		height:50px;
		color:#444444;
		font-size:40px;
		font-weight:normal;
		line-height:15px;
	}

	.stepper input {
		border:1px solid #D9D9D9;
		text-align:center;
		font-weight:bold;
		width:50px;
	}

	.stepper span{
		padding: 20px;
	}





.player-row {
	display:flex;
	display:-webkit-flex;
	display:-ms-flex;
	-webkit-justify-content:flex-start;
	-ms-justify-content:flex-start;
	justify-content:flex-start;
	align-items:center;
	-webkit-align-items:center;
	-ms-align-items:center;
	text-align: center;
}

	.player-row label {
		text-align:left;
		width:60px;
	}

	.player-row input {
		width:200px;
	}

	.player-row .icon-label {
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
		width: 60%;
		text-align: left;
	}

	.player-row .country-name {
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
		width: 50%;
		text-align: left;
	}




.icon-label {
	display:inline-block;
	padding:15px;
	padding-left:46px;
	background-size:30px 30px;
	background-repeat:no-repeat;
	background-position-y: center;
}
.icon-block {
	display:block;
	padding-top:35px;
	background-size:30px 30px;
	background-repeat:no-repeat;
	background-position-x: center;
	width: 80px;
}

	.icon-label.player { 
		background-image:url(../img/icon_player_dark.svg);
		margin-left: 10px;
		margin-top: 5px;
		padding-left: 40px;
		width: inherit;
	 }


	.icon-label.consumer, .icon-block.consumer { background-image:url(../img/icon_consumer.svg); }
    .icon-label.industry, .icon-block.industry { background-image:url(../img/icon_industry.svg); }
    .icon-label.energy_provider, .icon-block.energy_provider { background-image:url(../img/icon_energyprovider.svg); }
    .icon-label.government, .icon-block.government { background-image:url(../img/icon_government.svg); }
    .icon-label.ngo, .icon-block.ngo { background-image:url(../img/icon_ngo.svg); }



.player-amount {
	display:block;
	padding-top:35px;
	background-size:30px 30px;
	background-repeat:no-repeat;
	background-position-x: center;
	width: 80px;
}
	.player-1{ background-image: url(../img/icon_1player_dark.svg); }
	.player-2{ background-image: url(../img/icon_2player_dark.svg); background-size:60px 30px; }
	.player-3{ background-image: url(../img/icon_3player_dark.svg); background-size:80px 30px;}

.btn-block {
	display:block;
	background-size: contain;
	background-repeat:no-repeat;
	background-position: center;
	width: 40px;
	height: 40px;
    background-color: transparent;
    border: none;
    margin-right: 20px;
}


/* general */
 table {

 }
 	table tr.header-row{
 		height: 50px;
 	}
	table th{
		font-weight: bold;
		text-transform: uppercase;
		border-left: 1px solid #D9D9D9;
	}
	table th:nth-child(1){
		border-left: none;
	}

	table td.header-col{
		background-color: transparent;
		font-weight: bold;
		text-transform: uppercase;
		width: 15%;
	}

	table td{
		text-align: center;
		background-color: #ffffff;
		border-top: 1px solid #D9D9D9;
		border-left: 1px solid #D9D9D9;
	}


	.step.players table td {
		vertical-align:top;
	}


	table td:nth-child(1){
		border-left: none;
	}

p.player-name{
	overflow: hidden;
	max-height: 38px;
	height: 38px;
	width: 100%;
	padding-left: 5px;
	padding-right: 5px;
	text-overflow: ellipsis;
	position: relative;
	margin: 0;
	margin-top: 5px;
}

	p sup{
		font-weight: normal;
		font-size: 0.6em;
	}

li.player-item{
	list-style: none;
	padding: 3px;
}

li.player-card{
	position: relative;
	width: 80px;
	height: 100px;
	margin: 5px;
	padding: 5px;
	display: inline-block;
	border: 1px solid #D9D9D9;
}

	li.player-card .icon-block p{
		margin: 0;
	}

	article.player{
		display:inline-block;
	}

		article.player .player-img{
			position: relative;
			width: 25px;
			height: 30px;
			display:inline-block;
		}

			article.player .player-img .player-icon{
				position: absolute;
				height: 40px;
				width: 25px;
				display:inline-block;
				margin: 0px;
				padding: 0;
				bottom: 0;
				left: 0px;
			}

				article.player .player-img .player-icon img{
					position: absolute;
					bottom: 0px;
					left:0px;
				}
				
				article.player .player-img .player-icon p{
					position: absolute;
					bottom: -20px;
					left: 0px;
					width: 100%;
					text-align: center;
					z-index: 2;
				}


/* consumer */
li.consumer-item{
	width: 80px;
}
	article.consumer{
		display:block;
	}

		article.consumer .consumer-img{
			position: relative;
			height: 120px;
			width: 80px;
			display:inline-block;
		}

			article.consumer .consumer-img .player-icon{
				position: absolute;
				height: 40px;
				width: 25px;
				display:inline-block;
				margin: 0px;
				padding: 0;
				bottom: 0;
				left: 13px;
			}

				article.consumer .consumer-img .player-icon img{
					position: absolute;
					bottom: 0px;
					left:0px;
				}
				
				article.consumer .consumer-img .player-icon p{
					position: absolute;
					bottom: -20px;
					left: 9px;
					z-index: 2;
					color: #F7F7F7;
				}

			article.consumer .consumer-img .player-chart{
				position: absolute;
				width: 30px;
				margin: 0;
				padding: 0;
				display:block;
				bottom: 0;
				right: 13px;
			}
				article.consumer .consumer-img .player-chart p {
					font-weight: bold;
					font-size: 20px;
					position: absolute;
					z-index: 2;
					padding: 0;
					margin: 0;
					width: 100%;
				}

				article.consumer .consumer-img .player-chart canvas {
					position: absolute;
					background-color: #BED50F;
					width: 25px;
					bottom: 0;
					left: 3px;
					height:0px;
					overflow: hidden;
				}

/* Industry */

p.industry-price{
	font-weight: bold;
	font-size: 50px;
	text-align: center;
	padding-left: 10px;
}

li.industry-item{
	width: 80px;
	height: 70px;
}
	article.industry{
	    
	}
		article.industry .player-icon{
			position: relative;
			display:inline-block;
			margin: 0px;
			width: 40px;
			height: 31px;
		}

			article.industry .player-icon img{
				position: absolute;
				bottom: 0px;
				left:0px;
			}
			
			article.industry .player-icon p{
				position: absolute;
				bottom: -18px;
				left: 15px;
				z-index: 2;
				color: #F7F7F7;
			}

		article.industry .player-name{
			position: relative;
			margin: 0;
		}

/* Government */

article.government{
	position: relative;
}
	article.government .government-img .player-chart{
		text-align: center;
	}

		article.government .government-img .player-chart table{
			text-align: right;
			padding: 0;
			margin: 0;
			width: 10px;
		}
			article.government .government-img .player-chart table th.chart-label{
				border-bottom: 0px;
				border-right: 1px solid #7F7F7F;
				height: 25px;
				vertical-align: top;
			}
				article.government .government-img .player-chart table th.chart-label p{
					margin: 0;
					padding: 0;
					padding-right: 3px;
				}
			article.government .government-img .player-chart table td{
				border: none;
				padding: 0;
				margin: 0;
				height: 25px;
			}
				article.government .government-img .player-chart table td.chart-total{
					padding-left: 5px;
					font-weight: bold;
				}

				article.government .government-img .player-chart td canvas {
					height: 40px;
				}

				article.government .government-img .player-chart td.chart-industry{
					border-right: 1px solid #7F7F7F;
				}
				article.government .government-img .player-chart td.chart-industry canvas{
					background-color: #7F7F7F;
					right: 0px;
				}
				article.government .government-img .player-chart td.chart{
					border-right: 1px solid #7F7F7F;
				}
				article.government .government-img .player-chart td.chart-qol canvas{
					background-color: #BED50F;
					left: 0px;
				}

		article.industry .player-name{
			position: relative;
			margin: 0;
		}


/* Evaluation */

article.message-container{

}

	article.message-container .image-container background {
		background-color: #D9D9D9;
		-webkit-animation-duration: 3s;
		animation-duration: 3s;
		display:block;
		width:100%;
		height:100%;
		background-size:cover;
		background-repeat:no-repeat;
	}

	article.message-container .description-container{
		background-color: #fff;
		padding: 20px;
		text-align: left;
	}
		article.message-container .description-container h2{
			font-size: 24px;
			text-transform: none;
			font-weight: bold;
			margin-top: 5px;
		}
		article.message-container .description-container h3{
			margin-top: 0;
			margin-bottom: 10px;
		}

		article.message-container .description-container p.injection{
			font-size: 20px;
			padding-bottom: 10px;
			position: relative;
			font-weight: bold;
			margin: 0;
		}

		article.message-container .description-container p span{
			position: absolute;
			right: 0px;
		}

		article.message-container .description-container p.year{
			font-weight: bold;
			font-size: 50px;
			margin: 0;
		}
		article.message-container .description-container p.blue-energy{
			color: #003C88;
		}
		article.message-container .description-container p.effect{
			color: #DD1D21;
		}


.content-evaluation .data-container{

}
	.content-evaluation .data-container .chart-area{
		position: relative;
		background-color: #D9D9D9;
		padding: 20px;
	}
		.content-evaluation .data-container .chart-area .pie-chart-holder{
			position: relative;
			display: block;
			max-height: 200px;
			max-width: 200px;
		}
			.content-evaluation .data-container .chart-area .pie-chart-holder .chart-pie{
				position: relative;
				width: 100%;
				height: 100%;
			}
		
		.content-evaluation .data-container .chart-area .chart-label{
			max-width: 200px;
		}
			.content-evaluation .data-container .chart-area .chart-holder{
				position: relative;
				display: block;
				width: 100%;
				height: 100%;
			}
				.content-evaluation .data-container .chart-area .chart-holder .chart-container{
					position: relative;
					width: 100%;
					max-width: 250px;
					height: 100%;
					margin: 0;
				}
		.content-evaluation .data-container .chart-area .bar-chart-holder{
			position: relative;
			display: block;
			max-height: 100%;
			max-width: 200px;
		}
			.content-evaluation .data-container .chart-area .chart-bar{
				position: relative;
				min-width: 160px;
				height: 100%;
				max-width: 100%;
				max-height: 100%;
			}
			.content-evaluation .data-container .chart-area .bar-chart-holder .chart-container{
				position: relative;
				width: 100%;
				height: 100%;
				margin: 0;
			}
			.content-evaluation .data-container .chart-area .bar-chart-holder p.bar-names{
				position: relative;
				display: block;
				width: 100%;
				text-align: center;
				margin: 0;
				font-size: 20px;
				font-weight: bold;
				margin-top: 10px;
			}
				.content-evaluation .data-container .chart-area .bar-chart-holder p.bar-names span{
					padding-right: 16px;
					padding-left: 16px;
				}
		.content-evaluation .data-container .chart-area p.label{
			font-size: 50px;
			font-weight: bold;
			margin: 0;
		}


.content-conference {
	background:url(../img/img_conference_setup.svg);
	background-repeat:no-repeat;
	background-size: 900px 650px;
	background-position:center;
}
/*
.content-counting {
	background:url(../img/img_count_money.png);
	background-repeat:no-repeat;
	background-size: 350px;
	background-position:center;
}
*/
.content-counting.no-img{
	background: transparent;
}


/* Countdown popup */
.ngdialog-content {
	overflow:hidden;
	position:absolute;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	display:flex;
	display:-webkit-flex;
	display:-ms-flex;
	align-items:center;
	-webkit-align-items:center;
	-ms-align-items:center;
	justify-content:center;
	-webkit-justify-content:center;
	background:rgba(255,255,255,0.5);
	pointer-events:none;
}


	.count-warning > span {
		font-weight:bold;
		color:#DD1D21;
		display:block;
		width:500px;
		text-align:center;
		font-size:30px;
		text-transform:uppercase;
	}

		.count-warning > span.seconds {
			font-size:200px;
		}





/* Energy price markup */
.price-container{
	padding: 0px;
	width: 100%;
}
	.price-container p.price{
		padding: 20px;
		font-size: 50px;
		font-weight: bold;
	}
	.price-container h3.label{
		width: 50%;
	}
	.price-container .blue-energy{
		background-color: #003C88;
		color: #fff;
		width: 100%;
	}
	.price-container .green-energy{
		background-color: #008443;
		color: #fff;
		width: 100%;
	}



/* Trade markup */

.selection-container table [disabled="disabled"], .selection-container table .disabled{
	opacity: 0.3;
}

.selection-container table.selectable .column-fixed-width th:hover{
	background-color: #D9D9D9;
}
.selection-container table.selectable .selected, 
.selection-container table.selectable th.selected:hover{
  	background-color: #FBCE07;
}
.selection-container table.fixed-height{
  	height: 200px;
}
	.selection-container table.selectable tr.fixed-height{
	  	height: 150px;
	}
		.selection-container table.selectable th p{
			text-overflow: ellipsis;
		    overflow-wrap: break-word;
		}
	.input-container .trade-container .blue-energy{
		background-color: #003C88;
		color: #fff;
	}
	.input-container .trade-container .green-energy{
		background-color: #008443;
		color: #fff;
	}
	.input-container .trade-container input{
		color: #404040;
		width: 20%;
		padding: 15px;
		font-weight: bold;
		border-bottom: none;
		border-right: 1px solid #D9D9D9;
		border-left: 1px solid #D9D9D9;
		text-align: center;
		font-size: 30px;
	}
	.input-container .trade-container select{
		color: #404040;
		width: 100%;
		padding: 15px;
		font-weight: bold;
		border-bottom: none;
		border-right: 1px solid #D9D9D9;
		border-left: 1px solid #D9D9D9;
		text-align: center;
		font-size: 25px;
	}
	.input-container .trade-container button.trade{
		background-color: #fff;
		font-weight: bold;
		color: #404040;
		font-size: 30px;
	}
	.input-container .trade-container button.ng-click-active{
		background-color: #FBCE07;
	}
	.input-container .trade-container button[disabled="disabled"]{
		background-color: #fff;
		color: #A6A6A6;
	}
	.input-container .subtotal{
		font-size: 50px;
		vertical-align: middle;
		line-height: 1.9em;
	}
	.input-container .trade-container p.multiply{
		font-size: 25px;
		font-weight: bold;
		margin-right: 10px;
	}
	.input-container .trade-container p.price, .input-container .pay-container p.price{
		font-size: 30px;
		font-weight: bold;
		margin-left: 10px;
	}

	.input-container .pay-container .amount{
		background-color: #FBCE07;
		font-size: 25px;
	}
	.input-container .btn.pay{
		width: 100%;
	}
	.input-container .pay-container button.ng-click-active{
		background-color: #fff;
	}
	.input-container .pay-container [disabled="disabled"]{
		background-color: #fff;
		color: #A6A6A6;
	}
	
/* Production market */
.content-market .content nav.menu li a:hover{
	background-color: #fff;
}
.content-market .content nav.menu li{
	background-color: #FBCE07;
}

.input-container .data-container{
	padding: 0px;
	width: 100%;
}
	.input-container .data-container p.price{
		padding: 20px;
		font-size: 50px;
		font-weight: bold;
	}
	.input-container .data-container h3.label{
		width: 50%;
	}
	.input-container .qol{
		background-color: #BED50F;
	}
	.input-container .energy-efficiency{
		background-color: #FBCE07;
	}
	.input-container .income{
		background-color: #EB8705;
	}
	.input-container .blue-energy{
		background-color: #003C88;
		color: #fff;
	}
	.input-container .green-energy{
		background-color: #008443;
		color: #fff;
	}
	.input-container .relocate{
		background-color: #EB8705;
	}

/* Awards */
.content-awards .content nav.menu li a:hover{
	background-color: #fff;
}
.content-awards .content nav.menu li{
	background-color: #FBCE07;
	vertical-align: top;
}
	.content-awards .content table p{
		font-size: 20px;
		font-weight: bold;
		margin: 0;
	}
		.content-awards .content table tr.row0 td{
			background-color: #BED50F;
		}
			.content-awards .content table tr.row0 td p{
				font-size: 30px;
			}
		.content-awards .content table tr.row1 td{
			background-color: #D8E66F;
		}
			.content-awards .content table tr.row1 td p{
				font-size: 27px;
			}
		.content-awards .content table tr.row2 td{
			background-color: #E5EE9F;
		}
			.content-awards .content table tr.row2 td p{
				font-size: 24px;
			}
		.content-awards .content table tr.row3 td{
			background-color: #F2F7CF;
		}


/* Outtro */
.content-outtro a{
	text-decoration: underline;
}


.ngdialog.connection .ngdialog-content {
	background:transparent;
	pointer-events:auto;
}

.ngdialog.connection .ngdialog-overlay {
	pointer-events:none;
}

	.ngdialog.connection article {
		background:#FFF;
		border-radius:20px;
		padding:20px;
		text-align:center;
	}

	.ngdialog.connection article h2 {
		margin:0px;
		padding:0px;
		text-transform:uppercase;
		color:#DD1D21;
	}

	.ngdialog.connection article a {
		font-weight:bold;
		text-decoration:underline;
	}

		.ngdialog.connection article .loading-icon {
			position:absolute;
			margin-top:0px;
			margin-left:10px;
		}




menu.popup-close {
	padding:0px;
	margin:0px;
	position:absolute;
	z-index:1000;
	right:20px;
	top:20px;
	overflow:hidden;
}



.video .ngdialog-overlay {
	background:#000;
	pointer-events:none;
}


.video .ngdialog-content {
	background:transparent;
	pointer-events:auto;
}

	.video-popup {
		display: block;
	    position: absolute;
	    top: 0px;
	    left: 0px;
	    bottom: 0px;
	    right: 0px;
	}




/* homescreen settings */
.aaths-container {
	position: absolute;
	padding:10px;
	padding-left:10px;
	height:80px;
	background:rgba(255,255,255,0.7);
	width:100%;
	z-index:1000;
	bottom:0px;
	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;
}

	.aaths-close {
		font-weight:normal;
		font-size:30px;
		line-height:27px;
		width:30px;
		height:30px;
		text-align: center;
		color:#fff;
		background:#2c3e50;
		border-radius: 50%;
	}

	.aaths-instructions {
		flex:1;
		-webkit-flex:1;
		text-align:center;
	}