/* General styles for the modal */



/* 

Styles for the html/body for special modal where we want 3d effects

Note that we need a container wrapping all content on the page for the 

perspective effects (not including the modals and the overlay).

*/

.md-perspective,

.md-perspective body {

	height: 100%;

	overflow: hidden;

}



.md-perspective body  {

	background: #222;

	-webkit-perspective: 600px;

	-moz-perspective: 600px;

	perspective: 600px;

}



.container {

	background: #000000;

	min-height: 100%;

}



.md-modal {

	position: fixed;

	top: 50%;

	left: 50%;

	min-width: 320px;

	height: auto;

	z-index: 2000;

	visibility: hidden;

	-webkit-backface-visibility: hidden;

	-moz-backface-visibility: hidden;

	backface-visibility: hidden;

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

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

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

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

}



.md-show {

	visibility: visible;

}



.md-overlay {

	position: fixed;

	width: 100%;

	height: 100%;

	visibility: hidden;

	top: 0;

	left: 0;

	z-index: 1000;

	opacity: 0;

	background: rgba(0, 0, 0, 0.8);

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	transition: all 0.3s;

}



.md-show ~ .md-overlay {

	opacity: 1;

	visibility: visible;

}



/* Content styles */

.md-content {

	color: #fff;

	background: #000000;

	position: relative;

	border-radius: 3px;

	margin: 0 auto;

}



.md-content h3 {

	margin: 0;

	padding: 0.4em;

	text-align: center;

	font-size: 2.4em;

	font-weight: 300;

	opacity: 0.8;

	background: rgba(0,0,0,0.1);

	border-radius: 3px 3px 0 0;

}



.md-content > div {

	padding: 15px 40px 30px;

	margin: 0;

	font-weight: 300;

	font-size: 1.15em;

}



.md-content > div p {

	margin: 0;

	padding: 10px 0;

}



.md-content > div ul {

	margin: 0;

	padding: 0 0 30px 20px;

}



.md-content > div ul li {

	padding: 5px 0;

}



.md-content button {

	display: block;

	margin: 0 auto;

	font-size: 0.8em;

}





/* Effect 16:  Blur */

.md-show.md-effect-16 ~ .md-overlay {

	background: rgb(0, 0, 0);

}



.md-show.md-effect-16 ~ .container {

	-webkit-filter: blur(3px);

	-moz-filter: blur(3px);

	filter: blur(3px);

}



.md-effect-16 .md-content {

	-webkit-transform: translateY(-5%);

	-moz-transform: translateY(-5%);

	-ms-transform: translateY(-5%);

	transform: translateY(-5%);

	opacity: 0;

}



.md-show.md-effect-16 ~ .container,

.md-effect-16 .md-content {

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	transition: all 0.3s;

}



.md-show.md-effect-16 .md-content {

	-webkit-transform: translateY(0);

	-moz-transform: translateY(0);

	-ms-transform: translateY(0);

	transform: translateY(0);

	opacity: 1;

}