/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
#overlay {
	display: none;
	position: fixed;
	top: 150px;
	left: 50%; 
	margin-left: -400px;
	background: white;
	width: 800px;
	/*padding: 40px;*/
	border-radius: 5px;
	background-image: url('../images/overlay-bg.jpg');
	background-position: bottom right;
	background-size: 85%;
	background-repeat: no-repeat;
}
#overlay .overlay-content {
	padding: 40px;
}
#overlay h3 {
	font-family: Oswald,sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 0;
}
#overlay h2 {
	font-weight: 700;
	color: #ab2328;
	margin-top: 0;
	font-size: 42px;
	font-size: 2.333rem;
	max-width: 400px;
}
#overlay p.description {
	font-weight: bold;
	font-size: 22px;
	max-width: 200px;
}
#overlay p.button-container {
	margin-bottom: 10px;
}
#overlay p.learn-more-container {
	text-align: center;	
	max-width: 191px;
	margin: 0;
}
#overlay a.learn-more {
	text-transform: uppercase;
	font-weight: bold;
	color: #004976;
}

#overlay .top-close {
	position:absolute;
	background:#474244;
	color:#ffffff;
	display:block;
	width:35px;
	height:35px;
	top:-16px;
	right:-16px;
	cursor:pointer;
	line-height:26px;
	border:4px solid white;
	text-align:center;
	font-size:32px;
	text-decoration:none;
	border-radius:50%;
	opacity: .8;
	-moz-transition: all .2s;
	-webkit-transition: all .2s;
	transition: all .2s;
}
	#overlay .top-close:hover {
		opacity: 1;
	}

#overlay .no-thanks {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 10px;
	cursor: pointer;
	color: #ffffff;
}

@media screen and (max-width:840px) {
	#overlay {
		margin-left: 4%;
		width: 92%;
		left: 0;
		top: 0;
		max-height: 92%;
		margin-top: 4%;
		padding-bottom: 300px;
		background-size: 130%;
	}
	#overlay .overlay-content {
		border-radius: 5px 5px 0 0;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.8+0,0.9+90,1+100,0+100 */
		background: -moz-linear-gradient(top,  rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.9) 90%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.9) 90%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.9) 90%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
	}	
	#overlay .top-close {
		right: 10px;
		top: 10px;
	}
	#overlay .no-thanks {
		display: none;
	}
	#overlay p.description, #overlay p.learn-more-container {
		max-width: 100%;
	}
	#overlay p a {
		font-size: 18px;
		width: auto;
		display: block;
		margin: 0 0 5px 0;
	}
}

@media screen and (max-height:700px) {
	#overlay {
		background-position-y: 120%;
	}
}