body {
	background-attachment: fixed;
}
/********************************************************************/
/*                           MAIN SCREEN                            */
/********************************************************************/
#main {
	height: 100%;
	width: 100%;
	text-align: center;
}
#logo {
	padding-top: 50px;
}

@media (max-height: 899px) {
	#logo IMG {
		width: 300px;
	}
}
#content {
	text-align: left;
	background: #FFF;
	width: 70%;
	margin: auto;
	margin-top: 50px;
	height: auto;
	  max-width: 750px;
}
#content P {
	margin-top: 0;
}
#footer {
	opacity: 0.6;
	color: #FFF;
	width: 750px;
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
}

@media (max-width: 600px) {
	#footer, #description {
		width: 100%;
	}

	#content {
		width: 95%;
	}

	article h3 {
		font-size:90% !important;
	}
}

#footer > A {
	margin-right: 30px;
}
#footer > A:last-child {
	margin-right: 0;
}
HR {
	height: 4px;
	background: #E3B25F;
	border: none;
	border-radius: 4px;
	margin-bottom: 20px;
}

H1 {
  font-size: 36px;
  margin: 0;
  margin-bottom: 20px;
  font-weight: normal;
  background: -webkit-linear-gradient(#6F5425, #C49747);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

H2 {
  font-size: 48px;
  margin: 0;
  margin-top: 20px;
  font-weight: normal;
  background: -webkit-linear-gradient(#6F5425, #C49747);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
H3 {
	font-size: 36px;
	margin: 0;
	margin-top: 20px;
	font-weight: normal;
	color: #E7B05F;
}

@media (max-height: 899px) {
	#logo IMG {
		width: 300px;
	}
	H1 {
		font-size: 18pt;
	}
}

@media (max-height: 768px) {
	#logo {
		margin-top:15px;
		height:242px;
		padding:0;
	}
	#logo IMG {
		width: 200px;
	}
}
@media (max-height: 600px) {
	#logo IMG {
		width: 150px;
	}
	H1 {
		font-size: 16pt;
	}
}

@media (max-width: 360px) {
	H1 {
		font-size: 12pt;
	}
	#footer {
		bottom: 10px;
		font-size: 10pt;
	}
}

@media (max-width: 900px) {
	#content {
		width: 85%;
	}
	article.article-card {
		width:46.6% !important;
	}

}

@media (max-width: 767px) {
	#content {
		width: 100%;
	}
	article.article-card {
		width:96% !important;
		left:0;
		margin:10px 0 0 0;
		padding:0;
	}

}


/********************************************************************/
/*                        ARTICLE STYLES                            */
/********************************************************************/

article {
	width:85%;
	margin:0 auto;
	padding: 0 0 30px 0;
}
article.pestguides p {
	margin: 0px 20px 10px 20px;
	    line-height: 150%;
	    font-size: 95%;
}
article.pestguides h3 {
	margin: 10px 20px 3px 20px;
	line-height: 150%;
	font-size:125%;
}

article h3 {
	font-size:110%;
	margin:0;
}

article h1 {
	text-align:center;
	padding: 20px 0 0 0;
}

article a {
	color: #E7B05F;
	text-decoration:none;
}

article a:hover {
	text-decoration:underline;
}

article .inputtablelabel {
	width: 30%;
  text-align: right;
  padding: 10px 7px 0 0;
  vertical-align: top;
  font-size: 90%;
}

article input, article select {
	height: 40px;
  width: 100%;
  border: 1px solid #ccc;
  font-size:90%;
  padding:3px 5px;
}

article textarea {
	margin-top:10px;
}

article #RequiredFieldValidator1 {
	font-size:11px;
}

article .inputtable span {
	/* display:none; */
	font-size:11px;
}

article .inputtable {
	width:100%;
}

article #btnSend, article #btnCancel, #btnUnsubscribe {
	  font-size: 100%;
  color: #000;
  margin:5px 0;
}

article .inputtable img {
	margin-top:20px
}

article .videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	text-align:center;
}
article .videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

article img {
	width:100%;
	margin: 10px 0 20px;
}

article p.cntr {
	text-align: center;
}

article .btn {
	margin:0 10px;
	max-width:245px !important;
}

article .btn img {
	width:100%;
}




/********************************************************************/
/*               Pest guide image slider styles                     */
/********************************************************************/

article.article-card {
	display: inline-block;
	    width: 30.3%;
	    margin: 10px 2% 0 0;
	    padding: 0;
	    vertical-align: top;
	    left: 2%;
	    position: relative;
}

article.article-card img {
	width: 100%;
	margin:0;
}

article.article-card h4 {
	margin: 5px 0;
	text-align: center;
	font-size: 85%;
}

.slider{
	width: 100%;
	position: relative;
	padding-top: 46.6%;
	margin: 0px auto;
	display: inline-block;
}


/*Last thing remaining is to add transitions*/
.slider>DIV{
	position: absolute;
	left: 0;
	top: 0;
	transition: all 0.5s;
}

.slider>DIV img {
	margin: 0;
	width: 100%;
}

.slider input[name='slide_switch'] {
	display: none;
}

.slider label {
	/*Lets add some spacing for the thumbnails*/
	margin: 5px 2.5px 2.5px 2.5px;
	    float: left;
	    cursor: pointer;
	    transition: all 0.5s;
	    opacity: 0.4;
	    width: 15.8%;
	    left: 4px;
	    position: relative;
}

.slider label img{
	display: block;
	    margin: 0;
	    padding: 0;
}

/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
	border-color: #666;
	visibility: visible;
	opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ div {
	opacity: 0;
	visibility: hidden;
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+div {
	opacity: 1;
	transform: scale(1);
	visibility: visible;
}
/*Clicking on any thumbnail now should activate the image related to it*/
.caption {
    position: absolute;
    text-align: center;
    background-color: rgba(255,255,255,0.7);
    padding: 5px;
    width: 100%;
    bottom:0px;
}

.caption a {
	color:#000;
}

.pestguides {
	width:100%;
	padding:0;
}

.pestguides header {
	text-align:center;
}

.pestguides h1 {
	font-size: 32px;
	margin: 0;
}

.formField {
	position: relative;
	height: 70px;
	width: 100%;
	margin-bottom: 0px;
}

.formField > INPUT.text {
	position: absolute;
	top: 12px;
	left: 55px;
	width: 586px;
	height: 45px;
	padding-left: 20px;
	border: 2px solid #E3B25F;
	z-index: 1;
	font-size: 12pt;
}
.formField > .svgButton {
	position: absolute;
	top: 14px;
	right: 0;
}
.formField > INPUT[type=button] {
	-webkit-appearance: none;
	background: #E3B25F;
	border-left: none;
	border-bottom-right-radius: 15px;
	border-top-right-radius: 15px;
	color: #FFF;
}
.formIcon {
	position: absolute;
	z-index: 2;
	background: #E3B25F;
	border-radius: 100%;
	width: 70px;
	text-align: center;
	padding-top: 12px;
	height: 70px;
}
.formIcon > IMG {
	width: 50px;
	margin-top: 1px;
}
#bbh_email {
	max-width: 74% !important;
	position: relative;
	left: 64px;
	height: 34px;
	top: 18px;
  padding-left: 20px;
}

#bbh_subscribe_button {
	width: 20%;
	float: right;
	position: relative;
	top: 7px;
}

.print-guide-btn {
	background: #e3b25f;
	color: #ffffff;
	font-size: 18px;
	font-weight: lighter;
	font-style: normal;
	height: 56px;
	line-height: 56px;
	width: 50%;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	display: block;
	border-radius: 30px;
	margin: 0 auto;
}

.locationContent {
	margin: auto;
	width: 550px;
}

#location_map {
	width: 100%;
	height: 450px;
	margin-bottom: 20px;
	margin-top: 20px;
}
.locationInput {
	width: 350px;
}
.locationButton {
	width: 100px;
}
#setting_location, #done_setting_location {
	display: none;
}
.country_prompt {
	display: none;
}
@media (max-width: 570px) {
	.locationContent {
		width: 100%;
	}
	.locationInput {
		width: 50%;
	}
}