.modal
{
	display:	block; /* initially hide the modal window - display it by JS */

	/* Make the modal window fill the screen */
	position:	fixed;
	transform:	translate(0,0);
	width:		auto;
	left:		0;
	right:		0;
	height:		auto;
	top:		0;
	bottom:		0;
	z-index:	990; /* display above everything else */

	background:	#1e2730b3; /* no background, just fill space */

	padding:	20px;	/* create padding for inner window - page under modal window will be still visible */
						/*	Note: I use pixels to show you that this layout is NOT base on some
							percentage counting (e.g. 2% padding + 96% width makes 100% screen width)
						*/
}

.modal h1, .modal h2	{ margin: 0; padding: 0;	} /* reset default style */

.modal.flex-center
{
	/* Make Flex items centered */
	-webkit-box-align:			center;
	-moz-box-align:				center;
	box-align:					center;
	-ms-flex-align:				center;
	flex-align:					center;
	-webkit-align-items:		center;
	-webkit-align-content:		center;
	align-items:				center;
	align-content:				center;

	-webkit-box-pack:			center;
	moz-box-pack:				center;
	box-pack:					center;
	-ms-flex-pack:				center;
	flex-pack:					center;
	-webkit-justify-content:	center;
	justify-content:			center;

}

.modal:target
{												/* when URL contains hash of this element... */
	display:		block;						/* ... then make it visible (fallback for IE9 and older) */
												/* Display as Flexbox */
	display:		-webkit-box !important;		/* iOS6+, Safari 3.1+ */
	display:		-moz-box !important;		/* Firefox 4 - 19 */
	display:		box !important;				/* ostatní (Opera 12 - 14) */
	display:		-ms-flexbox !important;		/* IE10 */
	display:		flexbox !important;			/* ostatní prohlíže?e (?) */
	display:		-webkit-flex !important;	/* iOS7.1+, Safari 6+ */
	display:		flex !important;			/* ostatní prohlíže?e (Firefox 22+, Chrome 21+,IE11, Opera 15+) */
}

.modal .shade
{
	/* shade creates semi-transparent background for modal window to block clicks on page below */
	display:		block;
	/* make the shade fill whole screen as well */
	position:		absolute;
	width:			auto;		left:	0;	right:		0;
	height:			auto;		top:	0;	bottom:		0;
	box-sizing:		border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
	z-index:		995; /* display between modal container and modal window */

	/* make semi-transparent gray background */
	opacity:		0.3;
	background:		#222222;
/*border: 10px solid #F00;*/
}

.modal .inner
{
	/* inner window in the actual modal window with backround, border, etc. */
	box-sizing:		border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
	width:			100%;
	height:			auto;		/* allow to fit content (if smaller)... */
	max-height:		100%;		/* ... but make sure it does not overflow browser window */

	/* allow vertical scrolling if required */
	overflow-x:		hidden;
	overflow-y:		auto;

	position:		relative;	/* allows to use z-index to display over shade but still remain non-absolute layout */
	z-index:		999;

	/* definition of modal window layout */
	background:		#ffffff;
	border:			2px solid #222222;
	border:			10px #000000db solid;
	border-radius:	16px;	/* some nice (modern) round corners */
	padding:		16px;	/* make sure inner elements does not overflow round corners */

	max-width:		500px;
	/* Note:
		*  Scrollbar over round corners may not look good in some browsers
		*  so if you expect the content to be long, you better not use them.
		*/
	margin:			auto;
}

.modal .header		/* allows to position close button to the right */
{
	position:		relative;
}

.modal a.close		/* display close link in top right corner */
{
	position:		absolute;
	top:			0;
	right:			0;
}

.modal .close
{
    position:		absolute;
    top:			0;
    right:			0px;
    background:		url(/css/images/controls.png) no-repeat -25px 0;
    width:			25px;
    height:			25px;
    text-indent:	-9999px;

    border:			0;
    padding:		0;
    margin:			0;
	overflow:		visible;

	cursor:			pointer;
}

.modal .close:hover	{	background-position:-25px -25px;	}