/*  ONLOAD POPUP   */



	#modalOverlay {
			position: fixed;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 99999;
			height: 100%;
			width: 100%;

	}
.modalPopup {
			position: absolute;
			top: 150px;
			left: 20%;
			border-radius: 8px;
			transform: translate(-50%, -50%);
			background: #fff;
			width: 320px;
			height: 380px;
			padding: 0px 5px;
			-webkit-box-shadow: 0 2px 10px 3px rgba(0,0,0,.2);
			-moz-box-shadow: 0 2px 10px 3px rgba(0,0,0,.2);
			box-shadow: 5px 5px 15px 0 rgba(0,0,0,.7);
		}
		
			
.modalContent 
	{
		height: 240px;
		padding: 1em;
/* 		margin: 0 auto -10px; */
		background-image: url("img/popup/july4.jpg");
		background-size: 285px;
		background-repeat: no-repeat;
		background-position: center; /* Center the image */
		
}

.modalContent h1 {
	margin: 0 10px 5px;
	font-size: 2em;
	text-align: center;
	color: #55bb55;
}

.modalContent h2 {
	margin: auto 10px;
	font-size: 1.4em;
	text-align: center;
	color: #55bb55;
}


.modalContent h4 {
	margin: 20px 0 0;
	font-size: 1.2em;
	line-height: 1.1em;
	text-align: center;
/* 	background-color: rgba(255, 255, 255, .7); */
	}
	
	.modalContent h5 {
	margin: 0 0 10px;
	font-size: 1.1em;
	line-height: 1.2em;
	text-align: center;

	}
	
.modalContent h3 {
	margin:  -22px 0 12px;
	font-size: .9em;
	line-height: 1em;
	text-align: center;	
	}
	
.modalContent p {
	margin: 0;
	font-size: 1.1em;
	line-height: 1.2em;
	text-align: center;

	}
	
	p.modalContentDetails {
	margin: 0 auto 16px;


	text-align: center;
	
	}
	


	.myCenteredButton {
		margin-top: 18px;
		display: flex;
		justify-content: center;
	}	

	#button {}
	
.buttonStyle {
		border: transparent;
		border-radius: 5px;
		background: #6d6d6d;
		color: #eee !important;
		cursor: pointer;
		font-weight: bold;
		font-size: 14px;
		text-transform: uppercase;
		padding: 6px 25px;
		text-decoration: none;
		background: -moz-linear-gradient(top, #6d6d6d 0%, #1e1e1e 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d6d6d), color-stop(100%,#1e1e1e));
		background: -webkit-linear-gradient(top, #6d6d6d 0%,#1e1e1e 100%);
		background: -o-linear-gradient(top, #6d6d6d 0%,#1e1e1e 100%);
		background: -ms-linear-gradient(top, #6d6d6d 0%,#1e1e1e 100%);
		background: linear-gradient(to bottom, #6d6d6d 0%,#1e1e1e 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6d6d', endColorstr='#1e1e1e',GradientType=0 );
	/*	-webkit-box-shadow: 0 2px 4px 0 #999;
		box-shadow: 0 2px 4px 0 #999; */
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-ms-transition: all 1s ease;
		-o-transition: all 1s ease;
		transition: all 1s ease;
	}
	.buttonStyle:hover {
		background: #1e1e1e;
		color: #fff;
		background: -moz-linear-gradient(top, #1e1e1e 0%, #6d6d6d 100%, #6d6d6d 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e1e1e), color-stop(100%,#6d6d6d), color-stop(100%,#6d6d6d));
		background: -webkit-linear-gradient(top, #1e1e1e 0%,#6d6d6d 100%,#6d6d6d 100%);
		background: -o-linear-gradient(top, #1e1e1e 0%,#6d6d6d 100%,#6d6d6d 100%);
		background: -ms-linear-gradient(top, #1e1e1e 0%,#6d6d6d 100%,#6d6d6d 100%);
		background: linear-gradient(to bottom, #1e1e1e 0%,#6d6d6d 100%,#6d6d6d 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e1e1e', endColorstr='#6d6d6d',GradientType=0 );
	}
.returnToProfile {text-align: center; margin:3em;}
.returnToProfile a, .returnToProfile a:visited {color: #ddd;}
.returnToProfile a:hover {color: #fff;}



@media only screen and (max-width : 1200px) {
	
.modalPopup {
/* 			top: 60%; */
			left: 21%;
			width: 320px;
			padding: 5px;
		}
			
		.modalContent {padding: 1em;}
		
		.modalContent h1 {
			margin: auto;
		  margin-bottom: .2em;
		  font-size: 1.3em;
		  text-align: center;
		}
	
	}
	
	

@media only screen and (max-width : 900px) {
	
		.modalPopup {
	
				left: 230px;
				padding: 0 0 10px;

	
			}
			
			.modalContent {padding: 1em;}
	
	.modalContent h1 {
		margin: auto;
		margin-bottom: .2em;
		font-size: 1.3em;
		text-align: center;
	}
	
}
	
	
	
@media only screen and (max-width : 680px) {
	
	.modalPopup 
		{
		left: 100px;
		width: 300px;
		padding: 0 0 20px;
		}
			
	.modalContent 
		{
		padding: 1.5em;
		}
	
	.modalContent h1 
		{
		margin: auto;
		margin-bottom: .2em;
		font-size: 1.3em;
		text-align: center;
		}
	
	.modalContent h3 
		{
		margin:  -22px 0 12px;
		font-size: .8em;
		line-height: 1em;
		text-align: center;	
		}	
		
	.modalContent h4 
		{
		font-size: 1.2em;
		}
	}
		
		
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 480px) {
/* Styles */

	.modalPopup {	
		top: 100px;
		left: 30px;
		width: 280px;
		padding: 2px;
		}
			
	.modalContent {
		padding: .8em;
		}
	
	.modalContent h1 {
		margin: auto;
		margin-bottom: .2em;
		font-size: 1.15em;
		text-align: center;
		}
		
}