* {
	margin: 0;
	padding: 0;
}

body{
	position: fixed;
	display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	background: #eeeeee;

	font-size: 16px;
	font-family: 'Open Sans';

	color: #333;
}

/* [4] Popup background - window
==========================================*/
#POPUP{
	display: none;
	position: fixed;
		top: 50%;
		left: 50%;
		min-width: 50%;
		max-width: 50%;
		min-height: 30%;
		max-height: 50%;

	// flex properties
	flex-direction: column;
	justify-content: space-between;

	border-radius: 5px;

	background: #fff;
	color: #34495e;

	box-shadow: -10px 10px 0 rgba(26, 33, 40, .8);

	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);

	z-index: 101;

	&.active{
		display: flex;
	}


	& > .header{
		display: block;
		position: relative;
			width: calc( 100% - 2*1em );

		padding: 1em;

		border-radius: 5px 5px 0 0;
		border-bottom: 2px solid #ecf0f1;

		font-size: 1.1em;
		font-weight: bold;
	}

	& > .body{
		display: block;
		position: relative;
			width: calc( 100% - 2*1em );

		padding: 1em;

		b, strong{
			color: #5630ed;
		}
	}

	& > .footer{
		display: flex;
		position: relative;
			width: calc( 100% - 2*1em );

		padding: 1em;

		background-color: #ecf0f1;

		border-radius: 0 0 5px 5px;

		// flex props.
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-end;

		& button{
			left: auto;
			margin: 0 1em;
			-webkit-transform: none;
			transform: none;
		}

	}
}


#POPUP-BG{
	display: none;
	position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	background: #29333f;
	background: rgba(41, 51, 63, .8);

	z-index: 100;
}

#POPUP.active ~ #POPUP-BG{
	display: block;
}