/*	--------------------------------------------------
	Reveal Modals
	-------------------------------------------------- */
		
	.reveal-modal-bg { 
		position: fixed; 
		height: 100%;
		width: 100%;
		background: #000;
		background: rgba(0,0,0,.8);
		z-index: 100;
		display: none;
		top: 0;
		left: 0; 
		}
	.half{ float:left; width:49%; }
	.half:last-child{ float:right;}
	.half h2{ font-size:14px!important; text-align:center!important;}
	.half img{ width:100%; margin-top:20px;} 
	.half p{ text-align:left;}
	.reveal-modal {
		visibility: hidden;
		top: 100px; 
		left: 34%;
		margin-left: -300px;
		width: 70%;
		    background:#fff; /*rgba(27, 117, 187, 0.39) url(modal-gloss.png) no-repeat -200px -80px;*/
		position: absolute;
		z-index: 101;
		padding: 30px 40px 34px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-box-shadow: 0 0 10px rgba(0,0,0,.4);
		}
		.reveal-modal h1{ font-size:30px!important;     font-weight: 600;     margin-bottom: 10px;
    padding-bottom: 10px;color:#fff; }
		.reveal-modal p{ font-size:14px!important; font-weight: 400; text-align:justify!important;color:#2B3254; }
		.reveal-modal h2{ float:left; width:100%; text-align:left; color:#193E70; margin:5px 0 20px;color: #061E3E;     font-size: 25px;font-weight:400; text-transform:uppercase;}
		.reveal-modal h4{ float:left; width:100%; text-align:left; color:#2B3254; margin:5px 0 20px; color:#2B3254;      font-size:18px; text-transform:capitalize; font-weight:400;}
		.reveal-modal h3{ float:left; width:100%; text-align:center; color:#2B3254; margin:5px 0 20px; color:#2B3254;      font-size:18px; text-transform:capitalize; font-weight:400;}
		.reveal-modal ul{ margin:0 0 0 25px; padding:0;}
		.reveal-modal ul li{ float:left; width:100%; color:#2B3254; margin-bottom:5px;   font-size: 14px!important; list-style-image:url(../images/star.png);
    font-weight: 400;
    text-align: justify!important;}
	.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
	.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
	.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
	.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}
	
	.reveal-modal .close-reveal-modal {
		font-size: 22px;
		line-height: .5;
		position: absolute;
		top: 8px;
		right: 11px;
		color: #aaa;
		text-shadow: 0 -1px 1px rbga(0,0,0,.6);
		font-weight: bold;
		cursor: pointer;
		} 
	/*
		
	NOTES
	
	Close button entity is ×
	
	Example markup
	
	<div id="myModal" class="reveal-modal">
		<h2>Awesome. I have it.</h2>
		<p class="lead">Your couch.  I it's mine.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
		<a class="close-reveal-modal">&#215;</a>
	</div>
	
	*/























/*********************************** Responsive **************************/


@media all and (min-width:320px) and (max-width:479px){
	
	
	
		
	.reveal-modal-bg { 
		position: fixed; 
		height: 100%;
		width: 100%;
		background: #000;
		background: rgba(0,0,0,.8);
		z-index: 100;
		display: none;
		top: 0;
		left: 0; 
		}
	.half{ float:left; width:100%; }
	.half:last-child{ float:right;}
	.half h2{ font-size:14px!important; text-align:center!important;}
	.half img{ width:100%; margin-top:20px;} 
	.half p{ text-align:left;}
	.reveal-modal {
		    background: #eee url("modal-gloss.png") no-repeat scroll -200px -80px;
    border-radius: 5px;
    left: 1%;
    margin-left: 0;
    padding: 10px 40px 34px;
    position: absolute;
    top: 101px;
    visibility: hidden;
    width: 75%;
    z-index: 101;
		}
		.reveal-modal h1{     font-size: 15px !important;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 10px;
    width: 90%; }
		.reveal-modal p{ font-size:12px!important; font-weight: 400; text-align:justify!important; width:100%; float:left;}
		.reveal-modal h2{     color: #193e70;
    float: left;
    font-size: 15px;
    margin: 5px 0 10px;
    text-align: left;
    width: 90%;}
		.reveal-modal h3{ float:left; width:100%; text-align:left; color:#193E70; margin:5px 0 0px; color:#000000;     font-size: 16px;}
		.reveal-modal ul{ margin:0 0 0 25px; padding:0;}
		.reveal-modal ul li{    color: #2c2a2a;
    float: left;
    font-size: 12px !important;
    font-weight: 400;
    list-style-image: url("../images/star.png");
    margin-bottom: 5px;
    text-align: justify !important;
    width: 85%;}
	.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
	.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
	.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
	.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}
	
	.reveal-modal .close-reveal-modal {
		font-size: 22px;
		line-height: .5;
		position: absolute;
		top: 8px;
		right: 11px;
		color: #aaa;
		text-shadow: 0 -1px 1px rbga(0,0,0,.6);
		font-weight: bold;
		cursor: pointer;
		} 
	
	
}














@media all and (min-width:480px) and (max-width:767px){
	
.reveal-modal-bg { 
		position: fixed; 
		height: 100%;
		width: 100%;
		background: #000;
		background: rgba(0,0,0,.8);
		z-index: 100;
		display: none;
		top: 0;
		left: 0; 
		}
	.half{ float:left; width:100%; }
	.half:last-child{ float:right;}
	.half h2{ font-size:14px!important; text-align:center!important;}
	.half img{ width:100%; margin-top:20px;} 
	.half p{ text-align:left;}
	.reveal-modal {
		    background: #eee url("modal-gloss.png") no-repeat scroll -200px -80px;
    border-radius: 5px;
    left: 1%;
    margin-left: 0;
    padding: 10px 40px 34px;
    position: absolute;
    top: 101px;
    visibility: hidden;
    width: 75%;
    z-index: 101;
		}
		.reveal-modal h1{     font-size: 15px !important;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 10px;
    width: 90%; }
		.reveal-modal p{ font-size:12px!important; font-weight: 400; text-align:justify!important;}
		.reveal-modal h2{     color: #193e70;
    float: left;
    font-size: 15px;
    margin: 5px 0 10px;
    text-align: left;
    width: 90%;}
		.reveal-modal h3{ float:left; width:100%; text-align:left; color:#193E70; margin:5px 0 0px; color:#000000;     font-size: 16px;}
		.reveal-modal ul{ margin:0 0 0 25px; padding:0;}
		.reveal-modal ul li{    color: #2c2a2a;
    float: left;
    font-size: 12px !important;
    font-weight: 400;
    list-style-image: url("../images/star.png");
    margin-bottom: 5px;
    text-align: justify !important;
    width: 85%;}
	.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
	.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
	.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
	.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}
	
	.reveal-modal .close-reveal-modal {
		font-size: 22px;
		line-height: .5;
		position: absolute;
		top: 8px;
		right: 11px;
		color: #aaa;
		text-shadow: 0 -1px 1px rbga(0,0,0,.6);
		font-weight: bold;
		cursor: pointer;
		} 	
}















@media all and (min-width:768px) and (max-width:1024px){
	
	.reveal-modal-bg { 
		position: fixed; 
		height: 100%;
		width: 100%;
		background: #000;
		background: rgba(0,0,0,.8);
		z-index: 100;
		display: none;
		top: 0;
		left: 0; 
		}
	.half{ float:left; width:49%; }
	.half:last-child{ float:right;}
	.half h2{ font-size:14px!important; text-align:center!important;}
	.half img{ width:100%; margin-top:20px;} 
	.half p{ text-align:left;}
	.reveal-modal {
		visibility: hidden;
		top: 100px; 
		left: 48%;
		margin-left: -300px;
		width: 63%;
		background: #eee url(modal-gloss.png) no-repeat -200px -80px;
		position: absolute;
		z-index: 101;
		padding: 30px 40px 34px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-box-shadow: 0 0 10px rgba(0,0,0,.4);
		}
		.reveal-modal h1{ font-size:30px!important;     font-weight: 600;     margin-bottom: 10px;
    padding-bottom: 10px; }
		.reveal-modal p{ font-size:14px!important; font-weight: 400; text-align:justify!important;}
		.reveal-modal h2{ float:left; width:100%; text-align:left; color:#193E70; margin:5px 0 10px; color:#193E70;     font-size: 20px;}
		.reveal-modal h3{ float:left; width:100%; text-align:left; color:#193E70; margin:5px 0 0px; color:#000000;     font-size: 16px;}
		.reveal-modal ul{ margin:0 0 0 25px; padding:0;}
		.reveal-modal ul li{ float:left; width:100%; color:#2C2A2A; margin-bottom:5px;   font-size: 14px!important; list-style-image:url(../images/star.png);
    font-weight: 400;
    text-align: justify!important;}
	.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
	.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
	.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
	.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}
	
	.reveal-modal .close-reveal-modal {
		font-size: 22px;
		line-height: .5;
		position: absolute;
		top: 8px;
		right: 11px;
		color: #aaa;
		text-shadow: 0 -1px 1px rbga(0,0,0,.6);
		font-weight: bold;
		cursor: pointer;
		} 
	
}