@charset "utf-8";
/* CSS Document */

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99; /* Sit on top of slider as well*/
    padding-top: 120px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
	background-color: #fefefe;
	margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 42%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

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

/* The Close Button */

.close, .onloadclose {
	
	line-height:25px;
	position:absolute;
	right:15px;
	text-align:center;
	top:15px;
	width:24px;
	text-decoration:none;
	font-weight:bold;
	-webkit-border-radius:12px;
	-moz-border-radius:12px;
	border-radius:12px;
	font-size:30px;
	/*-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow:1px 1px 3px #000;*/
}

.close:hover, .close:focus, .onloadclose:hover, .onloadclose:focus { background:linear-gradient(to bottom, #ff6a00 0%, #eb610a 100%) repeat scroll 0 0 transparent;color:#FFFFFF;}


.modal-header {
    padding: 2px 16px;
    /*background: linear-gradient(to bottom, #902215 0%, #bb0000 100%) repeat scroll 0 0 transparent;*/
    /*color: white;*/
	border:hidden !important;
}

.modal-header img {
	width: 25%;
	margin: 10px auto;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
	font-size:18px;
	padding: 1px 16px;
    background: linear-gradient(to bottom, #ff6a00 0%, #eb610a 100%) repeat scroll 0 0 transparent;
    color: white;
	border-radius: 5px;
}

/* unvisited link */
.modal-footer a:link {color: white;}
/* visited link */
.modal-footer a:visited {color: white;}
/* mouse over link */
.modal-footer a:hover {
	color: white;
	font-weight:bold;
}
/* selected link */
.modal-footer a:active {color: white;}


.modal-backdrop {z-index:98;}

@media only screen 
and (min-device-width : 320px) 
and (max-width : 560px)	{
	.modal-content {width: 85%;}
	.modal-body {padding: 0px 7px;}
	.modal-header img {width: 21%;margin: 4px auto;}
	.close, .onloadclose {line-height: 4px;}
	.modal-footer {font-size: 12px;}
}	
	
@media only screen 
and (min-width:570px)
and (max-width:769px){	
	.modal-content {width:70%;}
}

@media only screen 
and (max-device-width : 285px) {
	.modal-content {margin: 0px 0px 0px 30px;width:55%}
	.modal-header img {width: 40%;}
	.close, .onloadclose {line-height: 18px;}
	.modal-body {font-size: 0.65em;}
}
/*@media only screen and (max-width: 480px){
	.modal {
    margin-top:120px;

	}*/

/*@media screen and (min-width: 1480px){
	.modal {padding-top: 120px;} /* Location of the box
	
}*/