@charset "UTF-8";
/* CSS Document */
/* MODAL BOX CSS3 & HTML5, NO JS REQUIRED */

.modal {
	display:none; /*DISPLAY PROPERTY NOT COMPATIBLE WITH TRANSITIONS */
	position: fixed;
	font-family: Arial, Helvetica, sans-serif; /* WONT NEED THIS IN MOST CASES */
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8); /* TRANSPARENT BLACK BACKROUND COVERS WHOLE PAGE */
	z-index: 99999; /* ENSURES MODAL IS ON TOP */
	pointer-events: none; /* EVENTS INNACTIVE UNTIL TARGETED */
}

.modal:target {
	display:block; /*DISPLAY PROPERTY NOT COMPATIBLE WITH TRANSITIONS */
	/* opacity:1; /* MAKES MODAL VISIBLE */
	pointer-events: auto; /* REACTIVATE EVENTS WHEN TARGETED */
}

/* SET THE PROPERTIES OF THE VISIBLE CONTENT BOX */
.modal_content {
	max-width: 640px; /* SET SIZE OF CONTENT BOX */
	position: relative;
	margin: 10% auto; /* 10% FROM TOP & CENTERED */
	padding: .5em;
	border-radius: 10px;
	background: #fff;
	-webkit-animation-name: fadein;
    -webkit-animation-duration: 0.4s;
    animation-name: fadein;
    animation-duration: 0.75s
}

.modal_inside { padding:1.5em;}
	
/* Add Animation */
@-webkit-keyframes fadein {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes fadein {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
	

/* NOT REQUIRED - SET THE PROPERTIES OF THE OPEN & CLOSE BUTTONS */
.open {
	padding:.5em; 
	margin:1em .5em 1em 0em; 
	background-color: #CCC; 
	border: 1px solid #666; 
	border-radius: 10px;
	text-decoration: none;
	font: 1em lighter;
	}
	
.close {
	margin:0em; 
	background-color: #CCC; 
	border: 1px solid #666;
	border-radius: 25%;
	border-radius: 10px;
	text-decoration: none;
	font: 2em lighter arial, helvetica, sans-serif;
	padding:0em .3em .2em .3em;
	color:#666;
	float:right;
	}


/* ==== RESPONSIVE PAGE STYLES ==== */

/* MID SIZE (TABLETS) */
@media only screen
	and (min-width : 641px) 
	and (max-width : 960px)
{
	.modal_content {margin: 10% 1em;}
}

/* SMALL SIZE (PHONES) */
@media only screen 
	and (min-width : 320px) 
	and (max-width : 640px) 
{
	.modal_content {margin: 10% 1em;}
}