@charset utf-8;
/*--
	Theme Name: theme1556
	Theme URI: http://template-help.com/
	Description: A theme for Wordpress 3.1+ from Template-Help.com Collection
	Author: Template_Help.com 
	Author URL: http://www.Template-Help.com/ 
--*/

@import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap');
/* General
---------------------------------------- */
*, h1,h2,h3,h4,h5,p,a,div,input,select{
/*	font-family: 'Comfortaa', sans-serif; */
	font-family: 'Lato', sans-serif;
	color: #112949;

}
#post-author{display:none}
nav.oldernewer{display:none}
div.author{display:none}
.sf-menu a{color:#162a4b !important !important}

html,
body {
	width:1018px;
	max-width:100%;
	/* NO min-width here.  This used to be `min-width:600px`, which by spec
	   beats max-width:100%, so on any viewport under 600px html/body were
	   forced to 600px and `margin:0 auto` centred that oversized box --
	   clipping real content off BOTH edges, with the left overflow
	   unreachable by scrolling.  Every phone in portrait hit this.
	   Side effect of the old value: the @media (max-width: 320/360/411)
	   blocks that used to live at the bottom of this file could never fire
	   in a real browser, so they were never debugged; they have been removed
	   and replaced with the tested phone block at the end of this file. */
	min-width:0;
	box-sizing:border-box;
	position:relative;
	display:flex-box;
	margin: 0 auto;
	word-wrap:break-word;
	/*overflow-x:auto;*/
	}
body{
	background-color: #f1eee9;
	background-position:50% 0;
	background-repeat:repeat-x;
	font: 100%/1.375em Arial, Helvetica, sans-serif;
	position:relative;
}

#main {
	max-width:90%;
	font-size:.75em;
	max-width:100%;
	position:relative;
	display:block;
	margin: 0 auto;
}

#main-box {
	/*width:1018px;*/
	max-width:100%;
	position:relative;
	display:flex-box;
	margin: 0 auto;
}
	#main-box .mb_tail {
		background-position:0 0;
		background-repeat:repeat-y;
	}
	#main-box .mb_top {
		background-position:0 0;
		background-repeat:no-repeat;
	}
	#main-box .mb_bot {
		background-position:0 bottom;
		background-repeat:no-repeat;
		min-height: 550px;
	}
	


/* List styling */
dl dt {
	background:url(images/list-arrow.gif) no-repeat 0 3px;
	padding:0 0 3px 32px;
	margin-bottom:.2em;
	font-size:18px;
	line-height:1.2em;
	color:#191919;
	}
dl dd {
	padding:0 0 0 32px;
	margin:0 0 1.5em 0;
	}




/* Header
---------------------------------------- */
#header {
	height:209px;
	position:relative;
	z-index:99;
	margin-bottom:27px;
	position:relative;
	max-width:80%;
	}
body.home #header {
	margin-bottom:30px;
}	

/* Logo */
.logo {
	position:absolute;
	left:10px;
	top:12px;
	}
	.logo h1,
	.logo h2 {
		font-size:5.833em;
		line-height:1.2em;
		margin:-28px 0 0 0;
		letter-spacing:-2px;
		}
		.logo h1 a,
		.logo h2 a {
			text-decoration:none;
			padding: 0 0 0 63px;
			background-position:0 17px;
			background-repeat:no-repeat;
			}
.logo .tagline {
	text-transform:uppercase;
	font-family: 'Arapey', serif;
	letter-spacing: 3px;
	margin:0;
	padding: 0 0 0 86px;
	display:none;
	}


/* Header widget */
#widget-header {
	position:absolute;
	right:0;
	top:59px;
	z-index:1;
	width:312px;
}
	.widget-header {
		font-size:20px;
		line-height:22px;
		font-style:italic;
		font-family: 'Arapey', serif;
		text-align:right;
		}

/* Social Networks */
#widget-header .social-networks {
	list-style-type:none;
	padding:0;
	margin:0;
	border:none;
	}
	#widget-header .social-networks li {
		float:left;
		border:none;
		padding:0;
		margin:0 0 0 5px;
		background:none;
		list-style-type:none;
		height:30px;
		}
		#widget-header .social-networks li a {
			text-decoration:none;
			float:left;
			height:30px;
			display:block;
			}
		#widget-header .social-networks li a:hover {
			color:red;
			}

/* EasyTooltip */
.tooltip {
	background: none repeat scroll 0 0 #252525;
	border: 1px solid #000000;
	color: #EEEEEE;
	display: none;
	font-size: 11px;
	line-height:1.2em;
	margin: 13px 0 0;
	padding: 5px;
	z-index:99;
}




/* Request a quote */
#widget_my_requestquotewidget {
	width:100%;
	overflow:hidden;
	}
	
	.top-box {
		background:#eee;
		border:1px solid #dbdbdb;
		padding:20px;
		margin-bottom:20px;
		overflow:hidden;
		zoom:1;
		position:relative;
		min-height:80px;
		}
	.box-button {
		float:right;
		background:#dbdbdb;
		font-size:21px;
		color:#fff;
		text-decoration:none;
		padding:10px;
		position:absolute;
		right:30px;
		top:50%;
		margin-top:-25px;
		}
	.box-text {
		float:left;
		width:75%;
		}



/* Slider
---------------------------------------- */
#slider-wrapper {
	height:448px;
	overflow:hidden;
	position:relative;
	margin-bottom:32px;
	}
#slider {
	position:relative;
	width:950px;
	height:448px;
	background:url(images/loading.gif) no-repeat 50% 50% #fff;
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
#slider a {
	border:0;
	display:block;
}


/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:60;
	display:none;
}
/* The slices in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:50;
	height:100%;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
}
/* Caption styles */
.nivo-caption {
	position:absolute;
	right:0px;
	top:119px;
	opacity:1; /* Overridden by captionOpacity setting */
	width:482px;
	height:186px;
	z-index:89;
	text-align:right;
	background-position:0 0;
	background-repeat:no-repeat;
	filter:none !important;
}
.nivo-caption .nivo-caption-inner {
	padding:38px 35px 0 0;
	margin:0;
	filter:none !important;
}
	.nivo-caption h2 {
		font-size:55px;
		line-height:35px;
		letter-spacing: -1px;
		filter:none !important;
		padding:0 0 20px 0;
	}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
  display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav {
	width:49px;
	height:25px;
	position:absolute;
	right:39px;
	top: 258px;
	background-position:0 0;
	background-repeat:no-repeat;
	z-index: 99;
}
.nivo-directionNav a {
	z-index:99;
	cursor:pointer;
	width:25px;
	height:0;
	padding-top: 25px;
	overflow:hidden;
	background-repeat:no-repeat;
	position:absolute;
	top: 0;
	
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
}
.nivo-prevNav {
	left:0;
	background-position:8px 7px;
}
.nivo-nextNav {
	right:0;
	background-position:9px 7px;
}

.nivo-nextNav:hover {
	background-position:11px 7px;
	}

.nivo-prevNav:hover {
	background-position:6px 7px;
	}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
	position:absolute;
	width:950px;
	height:20px;
	left:0;
	bottom:-20px;
	text-align:center;
}
.nivo-controlNav a {
	position:relative;
	z-index:99;
	cursor:pointer;
	display:inline-block !important;
}
.nivo-controlNav a.active {
	font-weight:bold;
}

#slider .nivo-controlNav img {
	display:inline; /* Unhide the thumbnails */
	position:relative;
	margin-right:10px;
	width:120px;
	height:auto;
}









/* Navigations
---------------------------------------- */

/* Primary navigation */
nav.primary {
	position:relative;
	z-index:2;
	max-width:100%;
	display:inline-block;
}

/* Essential styles for dropdown menu */
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-menu {
	line-height:	1.0;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
	padding:0;
	margin: 0;
	font-style:normal;
	font-family:Arial, Helvetica, sans-serif;
	background:none;
}
.sf-menu a {
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			1px;
	top:			71px; /* match top ul list item height */
	z-index:		99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			168px; /* match ul width */
	top:			-1px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			168px; /* match ul width */
	top:			-1px;
}


/* Our skin for dropdown menu */
.sf-menu {
	margin:175px 0 0 4px;
	float:left;
	height:60px;
	background-position:0 0;
	background-repeat:no-repeat;
	width:1010px;
}
.sf-menu a {
	text-decoration:none;
}
.sf-menu > li {
	background-position:0 0;
	background-repeat:no-repeat;
	padding-left: 2px;
}
.sf-menu > li:first-child {
	background:none;
	padding: 0;
}
	.sf-menu > li > a {


	font-family: 'Montserrat';
	font-size: 18px;
	font-weight: 500;
	font-style: normal;
	list-style: none;

		line-height:22px;
		width:110px;
		text-align:center;
		padding-top:21px;
	}
	.sf-menu > li > a:hover,
	.sf-menu > li.sfHover > a,
	.sf-menu > li.current-menu-item > a {
		text-decoration:underline;
	}
.sf-menu li ul {
	width:100%;
	background-position:0 bottom;
	background-repeat:no-repeat;
	
	box-shadow:inset 0 0 5px rgba(255,255,255,.5);
	-moz-box-shadow:inset 0 0 5px rgba(255,255,255,.5);
	-webkit-box-shadow:inset 0 0 5px rgba(255,255,255,.5);
}
	.sf-menu li li {
		font-size:12px;
	}
	.sf-menu li li a {
		text-transform:uppercase;
		height:37px;
		line-height: 35px;
		background-position:0 -37px;
		background-repeat:no-repeat;
		text-align:center;
		margin-bottom: -2px;
	}
	.sf-menu li li a:hover,
	.sf-menu li li.sfHover > a,
	.sf-menu li li.current-menu-item > a {
		background-position:0 0;
	}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .sf-menu li.current-menu-item > a {
	outline:		0;
}

/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url(images/arrows-ffffff.png) no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			.8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url(images/shadow.png) no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}




/* Top search */
#top-search {
	position:absolute;
	right:0;
	top:15px;
	}
	#top-search .input-search {
		width:160px;
		margin-right:10px;
		}
	#top-search #submit {
		width:50px;
		cursor:pointer;
		padding-left:0;
		padding-right:0;
		}





/* Content
---------------------------------------- */
.primary_content_wrap {
	position:relative;
	z-index:1;
	padding-bottom:8px;
	}
	

#content.left {
	float:right !important;
	}
#content.vert-line {
	background-position:right 0;
}
#content.vert-line.alt {
	background-position:left 0;
}	

#home-content {
	margin: 0 0 40px 0;
	padding-bottom: 33px;
	border-bottom:0px!important;
}	
	
.right-area h2 {
	font-size:25px;
	line-height:55px;
	text-transform:uppercase;
	background-position:0 0;
	background-repeat:repeat-y;
	padding-left: 26px;
	margin-bottom: 1px;
	
	box-shadow:inset 0 0 5px rgba(255,255,255,.5);
	-moz-box-shadow:inset 0 0 5px rgba(255,255,255,.5);
	-webkit-box-shadow:inset 0 0 5px rgba(255,255,255,.5);
}	


/* Page */
.page {
	
	}
	#page-content {
		
	}
	#page-meta {
		
	}




/* Comments
---------------------------------------- */
h3#comments {
	padding-top:45px;
	margin: 45px 0 44px 0;
	font-size:38px;
	letter-spacing: -1px;
	text-transform:none;
	}
.commentlist {
	list-style-type:none;
	padding:0;
	margin:-10px 0 0 0;
	}
	li.comment {
		list-style-type:none;
		overflow:hidden;
		margin:0;
		padding: 0;
		background:none;
		font-style:normal;
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
	}
		.odd {
			
		}
		.even {
			
		}
			li.comment .comment-body {
				padding:15px 30px 25px 106px;
				position:relative;
				zoom:1;
				margin-top:10px;
				}
		.author-comment {
			
		}
		.comment-author {
			padding:0;
			}
		.comment-text {
			
		}
		.comment-meta {
			font-style:italic;
			font-size:16px;
			font-family: 'Arapey', serif;
			float: right;
		}
			.comment-meta a {
				text-decoration:none;
			}
			li.comment .avatar {
				float:none;
				margin:0;
				position:absolute;
				left:20px;
				top:20px;
				vertical-align:top;
				overflow:hidden;
				}
				li.comment .avatar {
					display:block;
					vertical-align:top;
					overflow:hidden;
					}
				
				.commentlist ul.children {
					margin:0 0 0 40px;
					}
					.commentlist ul.children li.comment {
						
						}
				
				.reply {
					float: right;
					margin-left: 34px;
					}
					.reply a {
						display:inline-block;
						font-family: 'Arapey', serif;
						font-size:16px;
						font-style:italic;
						text-decoration:none;
						}
					.reply a:hover {
						text-decoration:underline;
						}
				
				
		.waiting-for-approval {
			
		}
	#trackbacks {
		
	}
		li.trackback {
			
		}
	p#no-comments {
		
	}
	#comments-form {
		
	}
	
	.allowed_tags {
		background:#eee;
		padding:15px;
		font-size:11px;
		font-family:"Courier New", Courier, monospace;
		color:#666;
		}
		.allowed_tags strong {
			font-family:Tahoma, Geneva, sans-serif;
			}
		#respond {
			padding:45px 0 0 0;
			margin-top: 45px;
		}
			#respond h3 {
				font-size:38px;
				text-transform:none;
				letter-spacing: -1px;
			}
		.cancel-comment-reply a {
			text-decoration:underline;
		}
		.cancel-comment-reply a:hover {
			text-decoration:none;
		}





/* Post
---------------------------------------- */
.post {
	
}
	.postContent {
		
	}
	.post-excerpt {
		
	}


.post-holder {
	margin-bottom:47px;
	position:relative;
	overflow:hidden;
	padding-bottom: 38px;
	border-bottom:0px!important;
	}

/* Post header */
.post-holder .entry-header {
	overflow: hidden;
	margin-bottom: 19px;
}
.post-holder .entry-header .comments-link {
	padding-top: 24px;
	display: none;
}
.post-holder .entry-header h2 {
	margin-bottom:-11px;
	font-size:15px;
	text-transform:uppercase;
	letter-spacing: 0;
	padding-top: 5px;
	}
	.post-holder .entry-header h2 a {
		text-decoration:none;
	}
.post-holder.single-post {
	margin-bottom:30px;
	overflow:hidden;
	width:100%;
	border: none;
	padding: 0;
	}
	
a[rel="author"]	{
	text-decoration:none;
	text-transform:capitalize;
}
a[rel="author"]:hover {
	text-decoration:underline;
}

.comments-link {
	text-transform:capitalize;
	text-decoration:none;
}
a.comments-link:hover {
	text-decoration:underline;
}

/* Featured thumbnail */
.featured-thumbnail {
	float:left;
	margin:5px 20px 10px 0;
}
	.featured-thumbnail .img-wrap {
		float:left;
		}
	.featured-thumbnail .img-wrap:hover {
		}
	.featured-thumbnail.no-hover .img-wrap:hover {

		}
		.featured-thumbnail img {
			float:left;
			}
	
	/* Small thumbnail */
	.featured-thumbnail.small img {
		padding:4px;
		}
	
	/* Large thumbnail */
	.featured-thumbnail.large {
		margin-right:0;
		float:none;
		overflow:hidden;
		margin-bottom:1.5em;
		}
	.featured-thumbnail.large .img-wrap {
		float:none;
		display:block;
		overflow:hidden;
		}

	.f-thumb-wrap {
		overflow:hidden;
		width:100%;
		height:220px;
		}
	
	/* Thumbnail with prettyphoto */
	.featured-thumbnail .image-wrap[rel="prettyphoto"] {
		background:url(images/magnify.png) no-repeat 50% 50%;
		display:block;
		float:left;
		position:relative;
		overflow: hidden;
		}
		.featured-thumbnail .image-wrap[rel="prettyphoto"] img {
			-webkit-transition: all .2s ease-in-out;
			-moz-transition: all .2s ease-in-out;
			-o-transition: all .2s ease-in-out;
			}
		.featured-thumbnail .image-wrap[rel="prettyphoto"]:hover .zoom-icon {
			top: 0;
			}
			
	.featured-thumbnail.single-portfolio .image-wrap .zoom-icon {
		width:631px;
		height:449px;
		top: -270px;
	}		

/* Post content */
.post-content {
	
}
	.post-content .excerpt {
		margin-bottom:1.5em;
		}
	.pagination {
		
	}
		.pagination a {
			display:inline-block;
			padding:0 5px;
			background:#eee;
			}

/* Post footer */
.post-holder footer {
	clear:both;
	padding:5px 0 0 0;
	}
.post-holder.single-post footer {
	margin-top:20px;
	}
		

/* Meta information for post */
.post-meta {
	width:100%;
	overflow:hidden;
	margin-bottom:1em;
	}
	time.date {
		width:38px;
		height:33px;
		overflow: hidden;
		padding-top: 15px;
		background-position:0 0;
		background-repeat:no-repeat;
		float: left;
		font-size:16px;
		line-height: 1.2em;
		font-family: 'Arapey', serif;
		text-align:center;
		text-transform:lowercase;
		margin-right: 20px;		
	}
		time.date .day {
			display: block;
			margin-bottom: -9px;
		}
	
	.post-navigation {
		
	}
	
p.gravatar {
	float:left;
	margin-right:20px;
	}


/* Post edit link */
.post-edit-link {
	display:block;
	position:absolute;
	right:0;
	top:0;
	padding:2px 7px;
	background:#000;
	color:#fff;
	font-size:10px;
	text-transform:uppercase;
	text-decoration:none;
	border-radius:3px;
	}
.post-edit-link:hover {
	background:#666;
	}


/* Image styling */
.alignleft {
	float:left;
	margin:0 20px 10px 0;
	}
.alignright {
	float:right;
	margin:0 0 10px 20px;
	}
.aligncenter {
	text-align:center;
	margin:0 auto;
	}
article .post-content img {
	max-width:710px;
	}

.frame {
	padding:7px;
	background:#fff;
	border:1px solid #dbdbdb;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	text-align:center;
	}
.frame img.alignleft,
.frame img.alignright{
	margin:0;
	padding:0;
	border:none;
	}



/* Page Navigaton (wp-pagenavi) */
.wp-pagenavi {
	clear: both;
	overflow:hidden;
	text-align:center;
}
.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	border:none;
	padding:0;
	font-style:italic;
	margin:0 7px;
	display:inline-block;
	font-family: 'Arapey', serif;
	font-size:16px;
}
.wp-pagenavi span.current {
	font-weight: bold;
}
.wp-pagenavi .pages {
	float:right;
	border:none;
	color:#999;
	}
.wp-pagenavi .nextpostslink {
	margin-left: 40px;
}
.wp-pagenavi .previouspostslink {
	margin-right: 40px;
}


/* Older and newer navigation */
nav.oldernewer {
	width:100%;
	overflow:hidden;
	margin-bottom:1.5em;
}
	.older {
		float:left;
	}
	.newer {
		float:right;
	}



/* Author
---------------------------------------- */
#post-author {
	overflow:hidden;
	padding:20px;
	margin-bottom:2em;
	}
	#post-author h3 {
		font-size:38px;
		text-transform:none;
		letter-spacing: -1px;
	}
	#post-author h3 a:hover {
		text-decoration:none;
	}
#author-link {
	margin-top:1.5em;
	}
	#author-link a {
		text-decoration:underline;
	}
	#author-link a:hover {
		text-decoration:none;
	}
	#post-author .gravatar {
		margin:0 20px 0 0;
		}
#author-description {
	overflow:hidden;
	}

/* Recent author posts */
#recent-author-posts {
	margin-bottom:3em;
}

#recent-author-posts h3,
#recent-author-comments h3 {
	font-size:38px;
	text-transform:none;
	letter-spacing: -1px;
} 



.author-info {
	width:100%;
	overflow:hidden;
	margin-bottom:3em;
	padding-bottom:2em;
}
	.author-info .avatar {
		margin:0 20px 0 0;
		}
		.author-info .avatar img {
			float:left;
			}

.author-meta {
	margin-bottom:20px;
	overflow:hidden;
	width:100%;
	}
	.author-meta p.gravatar {
		margin:0;
		}




/* 404
---------------------------------------- */
#error404 {
	padding:30px 0 100px 0;
}
	.error404-num {
		font-size:280px;
		line-height:1.2em;
		font-family: 'Arapey', serif;
		top: -34px;
		position:relative;	
		}
	#error404 hgroup {
		margin:0 0 2em 0;
		padding-top:50px;
		}
		#error404 hgroup h1 {
			font-size:3em;
			margin-bottom:.2em;
			}
	#error404 #searchform .searching {
		width:89px;
	}		





/* Portfolio
---------------------------------------- */
.latestwork {
	width:100%;
	overflow:hidden;
	list-style-type:none;
	padding:0;
	margin:0;
	}
	.latestwork li {
		float:left;
		margin-right:20px;
		}


/* Gallery */
.header-title {
	margin-bottom:2.5em;
	}
	.header-title h1 {
		margin-bottom:.1em;
		font-size:38px;
		line-height:30px;
		letter-spacing: -1px;
		}
	.header-title .page-desc {
		font-size:.91em;
		}



/* Default layout 3 columns */
#gallery {
	
	}
	#gallery .portfolio {
		width:100%;
		overflow:hidden;
		list-style-type:none;
		padding:0;
		margin:0;
		}
		#gallery .portfolio li {
			display:-moz-inline-box;
			display:inline-block;
			zoom:1;
			vertical-align:top; 
			width:310px;
			margin:0 7px 40px 0;
			position:relative;
			background:none;
			padding:0;
			font-family:Arial, Helvetica, sans-serif;
			font-size:12px;
			font-style:normal;
			}
		.ie9 #gallery .portfolio li {
			margin-right: 6px;
		}
		* + html #gallery .portfolio li {
			display:inline;
			}
		#gallery .portfolio li.nomargin {
			margin-right:0 !important;
			}
			#gallery .portfolio li span.image-border {
				display:block;
				height:222px;
				width:310px;
				position:relative;
				}
			#gallery .portfolio li a.image-wrap {
				display:block;
				overflow:hidden;
				height:222px;
				width:310px;
				position:relative;
				background:#f5f5f5 url(images/loading-folio.gif) 50% 50% no-repeat;
				-webkit-transition: all .2s ease-in-out;
				-moz-transition: all .2s ease-in-out;
				-o-transition: all .2s ease-in-out;
				}
			#gallery .portfolio li a.image-wrap:hover {
				
				}
				#gallery .portfolio li a.image-wrap img {
					float:left;
					}
			#gallery .portfolio h3 {
				font-style:italic;
				text-transform:none;
				font-size:16px;
			}
			#gallery .portfolio .folio-desc {
				margin-bottom:0;
				padding:1.5em 0 0 .5em;
				}
			#gallery .portfolio p.excerpt {
				padding:0;
				margin-bottom: 0;
				}
			
			.zoom-icon {
				display:block;
				position:absolute;
				left:5px;
				top:-152px;
				width:290px;
				height:150px;
				background:url(images/magnify.png) 50% 50% no-repeat;
				cursor:pointer;
				-webkit-transition: all .2s ease-in-out;
				-moz-transition: all .2s ease-in-out;
				-o-transition: all .2s ease-in-out;
				}
			#gallery .portfolio li a.image-wrap:hover .zoom-icon {
				top:5px;
				}


/* 1 column portfolio*/
#gallery.one_column .portfolio li {
	width:100%;
	margin-right:0;
	margin-left:0;
	}
	#gallery.one_column .portfolio li span.image-border {
		width:631px;
		height:449px;
		float:left;
		}
	#gallery.one_column .portfolio li a.image-wrap {
		width:631px;
		height:449px;
		}
	#gallery.one_column .zoom-icon {
		top:-270px;
		width:631px;
		height:449px;
		}
		#gallery.one_column .folio-desc {
			float:left;
			padding:0 0 3px 2px;
			margin:0 0 0 28px;
			overflow:hidden;
			width:289px;
			}
		#gallery.one_column .excerpt {
			margin-bottom: 35px;
		}	

/* 2 columns portfolio*/
#gallery.two_columns .portfolio li {
	width:470px;
	margin-right:7px;
	}
.ie9 #gallery.two_columns .portfolio li {
	margin-right: 6px;
	}	
	#gallery.two_columns .portfolio li span.image-border {
		width:470px;
		height:335px;
		}
	#gallery.two_columns .portfolio li a.image-wrap {
		width:470px;
		height:335px;
		}
	#gallery.two_columns .zoom-icon {
		top:-252px;
		width:470px;
		height:335px;
		}

/* 4 columns portfolio*/
#gallery.four_columns .portfolio li {
	width:230px;
	margin-right:7px;
	}
.ie9 #gallery.four_columns .portfolio li {
	margin-right:6px;
}	
	#gallery.four_columns .portfolio li span.image-border {
		width:230px;
		height:165px;
		}
	#gallery.four_columns .portfolio li a.image-wrap {
		width:230px;
		height:165px;
		}
	#gallery.four_columns .zoom-icon {
		top:-152px;
		width:230px;
		height:165px;
		}







/* Sidebar
---------------------------------------- */
#sidebar {
	
}
	#widget-sidebar {
		
	}
		.widget {
			margin-top:50px;
			padding-top: 50px;
		}
		#sidebar .widget:first-child {
			border: none;
			padding: 0;
			margin:0;			
		}
			.widget h3 {
				font-size:38px;
				text-transform:none;
				line-height:30px;
				margin-bottom: 34px;
			}
	

/* Calendar */
#calendar_wrap {
	padding:0;
	}
	#wp-calendar {
		width:100%;
		}
		#wp-calendar caption {
			text-align:center;
			font-family: 'Arapey', serif;
			font-style:italic;
			}
		#wp-calendar td {
			text-align:center;
			padding:4px 0;
			border:none;
			}
		#wp-calendar caption {
			font-size:16px;
			padding:4px 0;
			margin-bottom:5px;
			}
		#wp-calendar thead th {
			padding:7px 0;
			font-size:14px;
			text-align:center;
			}
		#wp-calendar #prev {
			text-align:left;
			}
		#wp-calendar #next {
			text-align:right;
			}



/* FAQs
---------------------------------------- */
.faq_list {
	
	}
	.faq_list dt {
		position:relative;
		padding:0 0 5px 28px;
		font-size:15px;
		font-weight:normal;
		margin:0;
		background:none;
		}
	.faq_list span.marker {
		display:block;
		position:absolute;
		left:0;
		top:0;
		font-size:15px;
		font-weight:bold;
		}
	.faq_list dd {
		padding:0 0 0 28px;
		position:relative;
		margin:0 0 2em 0;
		}
		.faq_list dd .marker {
			top:3px;
			}



/* Custom widgets
---------------------------------------- */


/* Recent Comments */
ul.recentcomments {
	padding:0;
	margin:0;
	}
	ul.recentcomments li {
		padding:25px 0 25px 0;
		margin:0;
		border-bottom:none;
		background:none;
		overflow:hidden;
		list-style-type:none;
		}
	ul.recentcomments li:first-child {
		padding-top:0;
		border-top:none;
		}
		ul.recentcomments li img {
			float:left;
			margin:0 12px 0 0;
			}
		ul.recentcomments .comment-body {
			padding:15px 0 0 0;
			}
			ul.recentcomments .comment-body a {
				text-decoration:none;
				}
			ul.recentcomments .comment-body a:hover {
				text-decoration:underline;
				}
		ul.recentcomments li h4 {
			margin-bottom:.1em;
			}
			ul.recentcomments li h4 a {
				text-decoration:none;
				}
		ul.recentcomments li small {
			font-size:11px;
			}

/* Posts Type widget */
.post_list {
	list-style-type:none;
	padding:0;
	margin:0;
	}
	.post_list li {
		overflow:hidden;
		padding-top:1.5em;
		padding-bottom:1.5em;
		margin:0;
		}
	.post_list li:first-child {
		border:none;
		padding-top:0;
		}
		.post_list li img {
			float:left;
			margin:0 14px 0 0;
			}
			

/* Banners */
.post_list.banners_custom_posts {
	margin-bottom:4px;
	overflow: hidden;
}
.post_list.banners_custom_posts li {
	border: none;
	width:315px;
	float: left;
	margin:0 -1px 0 0;
	padding:0;
	background-position:0 0;
	background-repeat:repeat-y;
	height: 160px;
	font-style:normal;
	font-family:Arial, Helvetice, sans-serif;
	font-size:12px;
	
	box-shadow:inset 0 0 5px rgba(255,255,255,.5);
	-moz-box-shadow:inset 0 0 5px rgba(255,255,255,.5);
	-webkit-box-shadow:inset 0 0 5px rgba(255,255,255,.5);
}
	.post_list.banners_custom_posts li .inner {
		padding: 34px 35px 38px 122px;
		position:relative;
	}
	.post_list.banners_custom_posts img {
		position:absolute;
		left: 22px;
		top: 33px;
		
		box-shadow:0 1px 2px rgba(0,0,0,.4);
		-moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
		-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
	}
	.post_list.banners_custom_posts .post-title {
		font-size:38px;
		line-height: 1.2em;
		font-family: 'Arapey', serif;
		text-decoration:none;
		margin: -10px 0 15px 0;
		display: inline-block;
	}
	.post_list.banners_custom_posts .post_content {
		overflow: hidden;
		line-height:20px;	
		display: none;
	}
	.post_list.banners_custom_posts .button {
		position:absolute;
		left: 22px;
		top: 143px;
		display: none;
	}
			

/* Popular posts */
.popular-posts {
	list-style-type:none;
	padding:0;
	margin:0;
	}
	.popular-posts li {
		overflow:hidden;
		margin:23px 0 0 0;
		padding: 23px 0 0 0;
		background-position:0 34px;
		background-repeat:no-repeat;
		font-style:normal;
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		}
	.popular-posts li:first-child {
		border: none;
		padding:0;
		margin:0;
		background-position:0 9px;
	}	
		.popular-posts li h5 {
			font-size:16px;
			line-height:20px;
			margin-bottom:.4em;
			font-family: 'Arapey', serif;
			font-weight:normal;
			font-style:italic;
			padding:0 10px 0 14px;
			}
			.popular-posts li h5 a {
				text-decoration: none;
			}
		.popular-posts li .excerpt {
			margin-bottom:.8em;
			}
		.popular-posts li .author a {
			text-decoration:none;
			text-transform:capitalize;
		}
		.popular-posts li .author a:hover {
			text-decoration:underline;
		}


/* Post Cycle */
.post_cycle {
	padding:0;
	margin:0;
	}
#post-cycle .cycle_item {
	display:none;
	}
#post-cycle .cycle_item:first {
	display:block;
	}


/* Folio Cycle */
.folio_cycle {
	list-style-type:none;
	padding:0;
	margin:0;
	width:100%;
	overflow:hidden;
	}
	.folio_cycle .folio_item {
		overflow:hidden;
		display:none;
		}
	.folio_cycle .folio_item:first {
		display:block;
		}
		.folio_cycle .folio_item figure.thumbnail {
			width:270px;
			overflow:hidden;
			}
#folio-controls {
	text-align:center;
	overflow:hidden;
	}
	#folio-controls ul {
		list-style-type:none;
		margin:0;
		padding:0;
		}
		#folio-controls ul li {
			padding:0 5px 0 0;
			display:inline;
			margin: 0;
			background:none;
			}
			#folio-controls ul li a {
				display:inline-block;
				text-decoration:none;
				width:8px;
				height:8px;
				background:#000;
				font-size:0;
				line-height:0;
				}
			#folio-controls ul li a:hover {
				background:#999;
				}


/* Testimonials */
.testimonials {
	padding:0;
	margin:0;
	}
	.testimonials div.testi_item {
		padding:1.5em;
		margin-bottom:2em;
		margin-right:5px;
		}
		.name-testi {
			padding:0 0 0 2.2em;
			text-align:right;
			font-weight:bold;
			display:block;
			}
			.name-testi a {
				font-weight:normal;
				}
		.testimonials .thumb {
			float:left;
			margin-right:20px;
			}
		.testimonials div.testi_item blockquote {
			border:none;
			padding:15px 0 15px 30px;
			margin:0;
			}
			.testimonials div.testi_item blockquote a {
				text-decoration:none;
				display:block;
				}

/* Misc for Cycle widgets */
#testi-cycle .testi_item {
	display:none;
	}
#testi-cycle .testi_item:first {
	display:block;
	}
#testi-controls {
	text-align:center;
	overflow:hidden;
	}
	#testi-controls ul {
		list-style-type:none;
		margin:0;
		padding:0;
		}
		#testi-controls ul li {
			padding:0;
			margin:0 2px 0 0;
			display:inline-block;
			background:none;
			}
		* + html #testi-controls ul li {
			display:inline;
			zoom:1;
			}


/* Recent Posts */
.latestpost {
	list-style-type:none;
	margin:0;
	padding:0;
	}
	.latestpost li {
		margin:0 0 0 0;
		padding:21px 36px 34px 24px;
		list-style-type:none;
		background-position:0 0;
		background-repeat:repeat-x;
		font-style:normal;
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		}
	.latestpost li.last {
		padding-bottom: 0;
	}	
		.latestpost li h4 {
			margin-bottom:13px;
			font-size:15px;
			line-height:20px;
			text-transform:uppercase;
			font-style:normal;
			padding-top: 7px;
			}
			.latestpost li h4 a {
				text-decoration:none;
			}
		.latestpost li .excerpt {
			margin-bottom:10px;
			}
		.latestpost li .link {
			font-style:italic;
			font-family: 'Arapey', serif;
			font-size:16px;
			text-decoration:none;
			padding-right: 13px;
			background-position:right 50%;
			background-repeat:no-repeat;
		}
		.latestpost li .link:hover {
			text-decoration:underline;
		}


/* Twitter widget */
.twitter_update_list {
	overflow:hidden;
	}
.twitter ul li {
	list-style-type:none;
	margin:0 0 15px 0;
	padding:0 0 0 37px;
	font-family:Arial, Helvetica, sans-serif;
	font-style:normal;
	font-size:12px;
	}
	.twitter ul li .twitt-body {
		padding:0 0 5px 0;
		}
	.twitter ul li .twitt-body a {
		font-weight:bold;
		}
	.twitter ul li a.timesince {
		font-size:11px;
		}
.twitter .profileLink {
	
	}


/* Flickr widget */
.flickrImages {
	overflow:hidden;
	position:relative;
}
.flickrImages a {
	float:left;
	display:block;
	width:75px;
	height:75px;
	background:#000;
	margin:0 1px 1px 0;
	}
.flickrImages a img {
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
}
.flickrImages a:hover img {
	opacity:.5;
}
.widget_my_flickrwidget a.link {
	display:inline-block;
	float:none;
	width:auto;
	height:auto;
	margin:12px 0 0 0;
	background:none;
	font-style:italic;
	font-family: 'Arapey', serif;
	font-size:16px;
	text-decoration:none;
	padding-right: 13px;
	background-position:right 50%;
	background-repeat:no-repeat;
	}
.widget_my_flickrwidget a.link:hover {
	text-decoration:underline;
}
.flickrImages h3.widget {
	margin-bottom: 34px !important;
}	

/* Banner widget */
.banners-holder {
	list-style-type:none;
	padding:0;
	margin:0;
	}
	.banners-holder li {
		list-style-type:none;
		float:left;
		margin:0 3px 3px 0;
		padding:0;
		background:none;
		}
		.banners-holder li img {
			vertical-align:top;
			float:left;
			}



/* Testimonials
---------------------------------------- */

/* Testimonials list */
article.testimonial {
	padding:30px 30px 30px 235px;
	width:auto;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	font-size:14px;
	line-height:1.5em;
	font-weight:normal;
	margin-bottom:35px;
	border: none;
	}
	article.testimonial .testi-pic {
		position:absolute;
		left:20px;
		top:20px;
		}
	.name-testi {
		display:block;
		text-align:right;
		font-style:normal;
		font-size:16px;
		font-style:italic;
		font-family: 'Arapey', serif;
		line-height:1.2em;
		}
		.name-testi a {
			text-decoration:none;
			}
		.name-testi a:hover {
			text-decoration:underline;
			}


/* Single Testimonial */
blockquote.testi-single {
	font-family:Georgia, "Times New Roman", Times, serif;
	border:none;
	padding:30px 30px 30px 235px;
	width:auto;
	background:url(images/quotes.png) no-repeat 170px 20px #f7f7f6;
	font-size:14px;
	line-height:1.5em;
	font-style:italic;
	margin:0 0 2em 0;
	position:relative;
	}
	blockquote.testi-single p {
		margin:0 0 1em 0;
		padding:0;
		}
		.testi-pic {
			position:absolute;
			left:20px;
			top:20px;
			}
			.testi-pic img {
				box-shadow:0 1px 2px rgba(0,0,0,.4);
				-moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
				-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
				}





/* Shortcodes
---------------------------------------- */

/* Recent Posts */
.recent-posts {
	margin:0;
	padding:0;
	width:100%;
	overflow:hidden;
	border:none;
	}
	.recent-posts li {
		margin:0 0 20px 0;
		padding:0;
		border:none;
		}
		.recent-posts li img.thumb {
			float:left;
			margin:0 20px 0 0;
			}
		.recent-posts li h5 {
			font-size:1em;
			margin-bottom:0;
			}
		.recent-posts li .excerpt {
			margin-bottom:1.5em;
			}
		.recent-posts li span.meta {
			display:block;
			margin-bottom:.5em;
			font-size:10px;
			text-transform:uppercase;
			}



/* Services */
.recent-posts.services {
	list-style-type:none;
	padding:1.5em 0 0 0;
	margin:0 0 -30px 0;
	overflow:hidden;
	}
	.recent-posts.services li {
		float:left;
		width:300px;
		margin:0 20px 30px 0;
		background:none;
		padding:0;
		}
	.recent-posts.services li:nth-child(2n) {
		margin-right:0;
		}
	.recent-posts.services li.nomargin{
		margin-right:0;
		}
		.recent-posts.services li img.thumb {
			margin-right:3px;
			}
		.recent-posts.services li h3 {
			padding-top:8px;
			}
			.recent-posts.services li h3 a {
				color:#191919;
				}




/* Tags */
.tags-cloud a, .tagcloud a {
	display:inline-block;
	padding:2px 7px;
	border-radius:3px;
	text-decoration:none;
	margin:0 1px 4px 0;
	font-size:11px !important;
	box-shadow:1px 1px 0 rgba(0, 0, 0, .2);
	line-height:1.5em;
	vertical-align:top;
	}


/* Recent Comments */
.recent-comments {
	list-style-type:none;
	padding:0;
	margin:0;
	}
	.recent-comments li {
		padding:0;
		margin:0;
		border:none;
		padding-bottom:.5em;
		}


/* Footer
---------------------------------------- */
#footer {
	padding:35px 0 40px 0;
	/* was a hard width:1010px, which made the footer the widest box on the
	   page and set document scrollWidth to 1010 at every viewport <=1024. */
	width:auto;
	max-width:100%;
	box-sizing:border-box;
	margin: 0 auto;
}

	/* Footer navigation */
	nav.footer {
		float:left;
		padding-left: 5px;
	}
		nav.footer ul {
			margin:0;
			padding:0;
			}
			nav.footer ul li {
				list-style-type:none;
				float:left;
				padding:0 15px 0 0;
				margin:0;
				background:none;
				}
				nav.footer ul li a:hover {
					text-decoration:underline !important;
				}
				nav.footer ul li.current-menu-item a {
					text-decoration:none !important;
				}
	
	/* Copyright */
	#copyright {
		font-size:20px;
		font-family: 'Arapey', serif;
		font-style:italic;
		}
		#copyright a {
			text-decoration:none;
		}
		#copyright a:hover {
			text-decoration:underline;
		}
	
	/* Footer text */
	#footer-text {
		float: right;
		padding-right: 5px;
		}
	


/* Misc
---------------------------------------- */
.button {
	display:inline-block;
	padding:0 15px;
	line-height:36px;
	height:36px;
	background-position:0 0;
	background-repeat:repeat-x;
	text-decoration:none;
	font-size:13px;
	text-transform:uppercase;
	font-weight:bold;
	
	box-shadow:0 1px 2px rgba(0,0,0,.6);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,.6);
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,.6);
	}
.button.top-indent {
	margin-top: 30px;
}	
	
	
.vert-line,
.vert-line_right {
	background-position:0 0;
	background-repeat:repeat-y;
}
	body.home .vert-line p {
		margin-bottom:36px;
	}
.vert-line_right {
	background-position:right 0;
}	
		
.no-results #searchform .searching {
	width:500px;
}

ul.list-style-1 li {
	background:none;
	padding:0 0 0 19px;
	margin: 0;
}
	ul.list-style-1 li h4 {
		background-position:0 7px;
		background-repeat:no-repeat;
		padding-left: 14px;
	}

ul.list-style-2 {
	padding-left: 40px;
}	
	
ul.activity-list li {
	font-family:Arial, Helvetica, sans-serif;
	background:none;
	font-style:normal;
	font-size:12px;
	padding: 0 0 0 42px;
	margin: 0 0 14px 0;
	position:relative;
}
	ul.activity-list li span {
		font-size:16px;
		font-style:italic;
		font-family: 'Arapey', serif;
		width:42px;
		position:absolute;
		left: 0;
		top: 0;
	}


/* Tabs */
.tabs {
    margin: 1px 0 20px 0;
}

.tabs .tab-wrapper {
    border: 1px solid #dddddd;
    border-radius: 0 5px 5px 5px;
    -moz-border-radius: 0 5px 5px 5px;
    -webkit-border-radius: 0 5px 5px 5px;
    margin: -1px 0 0 0;
}

.tabs .tab-menu ul {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

.tabs .tab-menu li {
    display: inline;
    float: left;
    margin: 0;
    padding: 0;
}

.tabs .tab-menu a {
    background-color: #fafafa;
    border: 1px solid #dddddd;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    color: #aaaaaa;
    display: block;
    font-size: 12px;
    letter-spacing: 1px;
    margin: 0 2px 0 0;
    padding: 8px 20px;
}

.tabs .tab-menu a:hover {
    background-color: #f2f2f2;
    color: #666666;
}

.tabs .tab-menu a.active {
    background-color: #ffffff;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#fafafa');
    background: -moz-linear-gradient(bottom , #fafafa 0px, #f6f6f6 90%) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear,left bottom,left top, color-stop(0, #fafafa),color-stop(90%, #f6f6f6));
    border-bottom: none;
    color: #666666;
    padding: 8px 20px 9px 20px;
}

.tabs .tab {
	background-color: #fafafa;
	border-radius: 0 5px 5px 5px;
    -moz-border-radius: 0 5px 5px 5px;
    -webkit-border-radius: 0 5px 5px 5px;
    padding: 20px;
}





/* Toggle */
.toggle {
    padding: 0 0 2px 0;
}
.toggle .trigger {
	background-color: #f5f5f5;
	background: -moz-linear-gradient(bottom, #F2F2F2 0px, #ffffff 100%);
	background: -webkit-gradient(linear,left bottom,left top, color-stop(0, #f2f2f2),color-stop(1, #ffffff));
	border: 1px solid #dddddd;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	color: #666666;
	display: block;
	padding: 10px 12px 10px 40px;
	position: relative;
	text-decoration:none;
	height:1%;
	}

.toggle .trigger span {
	background: url(includes/images/toggle.png) 0 0 no-repeat;
	display: block;
	position: absolute;
	top: 9px;
	left: 10px;
	text-indent: -9999px;
	width: 22px;
	height: 20px;
	}

.toggle .trigger:hover,
.toggle .active {
	background:#191919;
	color:#fff;
	}
.toggle .active span {
	background-position: 0 -20px;
	}

.toggle .box {
	background-color: #fafafa;
	border: 1px solid #dddddd;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 20px;
	}



/* Dropcap */
.dropcap {
	display:block;
	float:left;
	font-size:4em;
	line-height:1em;
	margin:0 10px 0 0;
	text-transform:uppercase;
	}

.widget-area {
	
}

.hr, hr {
	height:1px;
	overflow:hidden;
	font-size:0;
	line-height:0;
	margin:40px 5px;
	}
.grid_1 .hr, .grid_2 .hr, .grid_3 .hr, .grid_4 .hr, .grid_5 .hr, .grid_6 .hr, .grid_7 .hr, .grid_8 .hr, .grid_9 .hr, .grid_10 .hr, .grid_11 .hr, .grid_12 .hr, .grid_13 .hr, .grid_14 .hr, .grid_15 .hr, .grid_16 .hr, .grid_17 .hr, .grid_18 .hr, .grid_19 .hr, .grid_20 .hr, .grid_21 .hr, .grid_22 .hr, .grid_23 .hr, .grid_24 .hr {
	margin-left:0;
	margin-right:0;
	}
.spacer {
	height:50px;
	overflow:hidden;
	font-size:0;
	line-height:0;
	}

/* Address */
.address {
	overflow:hidden;
	width:100%;
	margin:0;
	padding:0;
	}
.address dt {
	float:left;
	width:165px;
	margin-right:20px;
	padding:0 0 0 55px;
	background:none;
	font-size:1em;
	line-height:18px;
	background:url(images/address-icon1.png) no-repeat 0 3px;
	}
.address dd {
	float:left;
	width:217px;
	padding:0 0 0 53px;
	background:url(images/address-icon2.png) no-repeat 0 3px;
	}
	.address dd ul {
		list-style-type:none;
		padding:0;
		margin:0;
		}
		.address dd ul li {
			background:none;
			padding:0;
			margin: 0;
			font-family:Arial, Helvetica, sans-serif;
			font-size:12px;
			line-height: 1.5em;
			text-transform:none;
			font-style:normal;
			}
	.address dd span {
		float:left;
		width:100px;
		}
		.address dd a {
			font-style:italic;
			text-decoration:underline;
			}
		.address dd a:hover {
			text-decoration:none;
			}





/* VIDEO */
.video-wrap {
	margin-bottom: 10px;
	position:relative;
	zoom:1;
	}
	.video-wrap object {
		position:relative;
		z-index:2;
		}
	.video-bg {
		background-color:black;
		position:absolute;
		left:0;
		top:0;
		z-index:1;
		}

/* AUDIO */
.audio-wrapper {
   margin-bottom:1.5em;
}
.audio-desc {
	font-size:.91em;
	color:#999;
	padding:.5em 0 0 0;
	}
.audiojs audio { position: absolute; left: -1px; }
.audiojs { width: 460px; height: 36px; background: #404040; overflow: hidden; font-family: monospace; font-size: 12px;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444));
	background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%);
	-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
	-o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); }
.audiojs .play-pause { width: 25px; height: 40px; padding: 4px 6px; margin: 0px; float: left; overflow: hidden; border-right: 1px solid #000; }
.audiojs p { display: none; width: 25px; height: 40px; margin: 0px; cursor: pointer; }
.audiojs .play { display: block; }
.audiojs .scrubber { position: relative; float: left; width: 280px; background: #5a5a5a; height: 14px; margin: 10px; border-top: 1px solid #3f3f3f; border-left: 0px; border-bottom: 0px; overflow: hidden; }
.audiojs .progress { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #ccc; z-index: 1;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc));
	background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 100%); }
.audiojs .loaded { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #000;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222));
	background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%); }
.audiojs .time { float: left; height: 36px; line-height: 36px; margin: 0px 0px 0px 6px; padding: 0px 6px 0px 12px; border-left: 1px solid #000; color: #ddd; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); } 
.audiojs .time em { padding: 0px 2px 0px 0px; color: #f9f9f9; font-style: normal; }
.audiojs .time strong { padding: 0px 0px 0px 2px; font-weight: normal; }
.audiojs .error-message { float: left; display: none; margin: 0px 10px; height: 36px; width: 400px; overflow: hidden; line-height: 36px; white-space: nowrap; color: #fff;
	text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; }
.audiojs .error-message a { color: #eee; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #999; white-space: wrap; }

.audiojs .play { background: url(js/audiojs/player-graphics.gif) -2px -1px no-repeat; }
.audiojs .loading { background: url(js/audiojs/player-graphics.gif) -2px -31px no-repeat; }
.audiojs .error { background: url(js/audiojs/player-graphics.gif) -2px -61px no-repeat; }
.audiojs .pause { background: url(js/audiojs/player-graphics.gif) -2px -91px no-repeat; }

.playing .play, .playing .loading, .playing .error { display: none; }
.playing .pause { display: block; }

.loading .play, .loading .pause, .loading .error { display: none; }
.loading .loading { display: block; }

.error .time, .error .play, .error .pause, .error .scrubber, .error .loading { display: none; }
.error .error { display: block; }
.error .play-pause p { cursor: auto; }
.error .error-message { display: block; }



/* Alert boxes
---------------------------------------- */
.alert-box, .wpcf7-response-output {
	padding:20px 20px 20px 90px !important;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	font-size:.91em;
	line-height:1.4em;
	border:1px solid #dbdbdb;
	font-family:Arial, Helvetica, sans-serif;
	margin-bottom:15px;
	}
	.error-box, .wpcf7-mail-sent-ng {
		border-color:#ff9999;
		color:#c31b00;
		background:url(images/icons/alert/icon-error.png) no-repeat 20px 50% #ffcccc;
		}
	.attention-box, .wpcf7-validation-errors, .wpcf7-spam-blocked {
		border-color:#e6c555;
		color:#9e660d;
		background:url(images/icons/alert/icon-note.png) no-repeat 20px 50% #fdebae;
		}
	.notice-box {
		border-color:#68a2cf;
		color:#2e6093;
		background:url(images/icons/alert/icon-info.png) no-repeat 20px 50% #bfe4f9;
		}
	.approved-box, .wpcf7-mail-sent-ok {
		border-color:#a3c159;
		color:#5e6f33;
		background:url(images/icons/alert/icon-download.png) no-repeat 20px 50% #ccff99;
		}
	


/* Forms
---------------------------------------- */

/* Form defaults */
input, select, textarea { 
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	border:1px solid #dbdbdb;
	vertical-align:middle;
	font-weight:normal;
	outline:none;
}
input[type="text"], textarea {
	border:none;
	padding:11px;
	border-radius:5px;
	}
input[type="submit"], input[type="reset"] {
	position:relative;
	display:inline-block;
	line-height:36px;
	height:36px;
	background-position:0 0;
	background-repeat:repeat-x;
	text-decoration:none;
	font-size:13px;
	text-transform:uppercase;
	font-weight:bold;
	box-shadow:0 1px 2px rgba(0,0,0,.6);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,.6);
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,.6);
	
	cursor:pointer;
	margin-right:12px;
	}


/* Comment form */
#commentform a {
	text-decoration:underline;
	}
#commentform a:hover {
	text-decoration:none;
}	
	#commentform p.field {
		margin-bottom:10px;
		}
		#commentform small {
			color:#8b8b8b;
			}
	#commentform label {
		display:block;
		}
	#commentform input[type="text"] {
		width:278px;
		padding-left: 15px;
		padding-right: 15px;
		}
	#commentform textarea {
		width:460px;
		max-width:460px;
		min-width:460px;
		height:150px;
		min-height:150px;
		overflow:auto;
		}




/* Contact form */
.wpcf7-form p.field {
	margin-bottom:9px;
	overflow:hidden;
	vertical-align:top;
	width:380px;
	position:relative;
	}
.wpcf7-form p.field label {
	float:left;
	width:69px;
	padding-top:6px;
	}
.wpcf7-form p.field input {
	float:left;
	width:262px;
	}
	.wpcf7-form p.field small {
		color:red;
		}
.wpcf7-form textarea {
	float:left;
	width:262px;
	max-width:262px;
	min-width:262px;
	height:225px;
	min-height:225px;
	overflow:auto;
	margin-bottom:17px;
	resize:none;
	}
.wpcf7-form .submit-wrap {
	padding:0 0 0 69px;
	margin:0;
	}
	span.wpcf7-form-control-wrap {
		display:block;
		}
	.wpcf7-not-valid-tip {
		width:272px !important;
		position:absolute;
		left:69px !important;
		top:0 !important;
		padding:6px 0 6px 10px !important;
		background:#f3b7b7 !important;
		color:red !important;
		border:1px solid red !important;
		border-radius: 5px;
		}





/* Sidebar search form */
#searchform {
	
	}
#searchform .searching {
		width:168px;
		margin-right:10px;
		}
#searchform .submit {
	margin-right: 0;
}
#sidebar #searchform .searching {
}




/* Fluid Columns */
.one_half{ width:48%; }
.one_third{ width:30.66%; }
.two_third{ width:65.33%; }
.one_fourth{ width:22%; }
.three_fourth{ width:74%; }
.one_fifth{ width:16.8%; }
.two_fifth{ width:37.6%; }
.three_fifth{ width:58.4%; }
.four_fifth{ width:79.2%; }
.one_sixth{ width:13.33%; }
.five_sixth{ width:82.67%; }
.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth{ position:relative; margin-right:4%; float:left; }
.last { margin-right:0 !important; clear:right; }


.fleft { float:left;}
.fright { float:right;}
.clear { clear:both;}

.wrapper { 
	width:100%;
	overflow:hidden;
}
.extra-wrap {
	overflow:hidden;
	}


/* Clear Floated Elements */
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}
/* .feelabel{
	width:100%;
	text-align:center;
	display:inline-block !important;
	float:left;
}

#feetext{
	float:left;
	display:inline-block;
	left:0px;
	font-weight:800;
 */
}
input[type="checkbox"]:before{
	clear:both;
}

/* Scoped from `.formcontainer.err > .error, .error` to `label.error`
   (2026-08-20).
   -----------------------------------------------------------------------
   `.error` is jQuery Validate's errorClass, and it is put on TWO different
   kinds of element: the generated/reused error-message <label>, and the
   invalid input/select/textarea itself.  As a bare class selector this rule
   therefore resized the FIELDS as well as the messages.  On desktop -- where
   none of the @media blocks below pin field widths with !important -- every
   field that failed validation jumped from its normal width to 98% of #form
   and re-flowed the form into what looked like a phone layout (measured at
   1280px: #namefirst 274.84px -> 897.86px, left 358.48 -> 191.06).  That is
   the "why do the field widths change to a mobile view on validation errors"
   report.  The 98% span was only ever wanted for the message labels.
   The `.formcontainer.err > .error` half was already dead: .formcontainer was
   removed from index.php earlier today. */
label.error{
	/* text-align was :left, which only lined up with the field while the field
	   was ALSO being blown out to 98% by this rule.  Now that the fields keep
	   their real (centred) width, a left-aligned full-width message sat at the
	   far left of the form, nowhere near the field it described.  #donationbox
	   label.error and label[for=agreeterms].error still override this to left,
	   because those two blocks are left-aligned. */
	text-align:center;
	position:relative;
	width:98%;
	min-width:98%;
	max-width:98%;
	display:inline-block;
	margin:0 auto !important;
}
/* Also scoped: this was for the <ol>/<li> summary list that used to live in
   .formcontainer.  margin-left:-500px on any stray list inside an element
   jQuery Validate happened to flag would drag it off-canvas. */
label.error li, label.error ul{
	padding-left:0px;
	float:left;
	margin-left:-500px;
}
/* White on the new #2a4b9b nav bar (see ul#topnav below) -- 8.2:1.  Black on
   that bar was 3.1:1, and the inline `#topnav a:hover{color:#db3833}` in
   index.php never applied anyway (this rule's !important + ID beat it), so
   hover is underline-only. */
#topnav >li a{
	color:#ffffff !important;
}


/* Always remember to compress your live stylesheet and keep an uncompressed backup */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#main{
	background-color:white;
	border-radius:0px 0px 6px 6px;
	box-shadow:1px 1px 5px rgba(44,44,44,0.8);
	overflow-x:hidden;
}
br,hr{
	clear:both;
}
ul#topnav{
	/*max-width:110%;*/
	/* Was rgb(214,222,49) / #eeee00 (acid yellow-green, off-brand).  #2a4b9b is
	   the logo navy #12155a taken up in lightness and saturation at the same
	   hue family (~226deg), so it reads as a sibling of the navy rather than a
	   new hue, but is bright enough not to merge into the header block.  The
	   2px navy border ties the bar back to the logo. */
	background:#2a4b9b;
	border:2px solid #12155a;
}
#main #form{
	position:relative;
	display:block;
	width:90%;
	margin:5px auto;
	padding:0px;
	margin:0 auto;
	text-align:center;
}
#main > ul#topnav{
	position:relative;
	background-size:contain;
	max-width:90% !important;
}

input[type="submit"], 
#submit.submitbutton.final,
.final{
	position:relative;
	display:block;
	width:30%;
	left:33.3%;
	
}
input{
	display:flex-box;
	position:relative;
	max-width:30%;
	width:30%;
}
input, select{
	margin:5px !important;
}
select{
	padding:9px 3px;
	border-radius:6px;
	background:#f4f4f4;
}
input > .required.small,
#emp_zip, #zip{
	max-width:150px;
	width:150PX;
}
select.required.ccexpyear, select.required.ccexpmonth{
	display:inline-block;
	position:relative;
	max-width:125px !important;
	min-width:125px !important;
	float:left;
}
 input[type="submit"]{
	 max-width:100%;
	 text-align:center;
 }
b.cen{
	text-align:center;
}


.whole{
	left:0;
	display:flex-box;
	max-width:90%;
	width:90%;
	text-align:center;
	height:200px;
	min-width:90%;
}
.whole > .left,.whole >.right{
	position:relative;
	display:inline-block;
	width:45%;
	max-width:45%;
	min-width:45%;
	text-align:center;
	vertical-align:top;
	background-size:contain;
	
}
.left{
	float:left;
}

.right{
	float:right;
	text-align:center;
}

.left .downpayment{
	text-align:left;
	float:left;
	margin-left:0px !important;
}
.left input, .right input, .left select, .right select{
	position:relative;
	width:120%;
	min-width:250px;
}

#footer{
	text-align:center !important;
}
#copyright, #footer-text{
	text-align:center !important;
	/* was FLOAT:RIGHT + padding-right:100px + margin-left:-5%, which fought
	   the text-align:center on the same rule (and the inline text-align on
	   the markup) and pushed the footer text past the right edge. */
	float:none;
	width:auto;
	max-width:100%;
	box-sizing:border-box;
	padding-right:0;
	margin-left:0;
}

.dbox{
	align:center;
	text-align:center;
	border:1px solid black;
	max-width:500px;
	width:60%;
	margin:0 auto;
}

.downpayment{
		display:inline;
		float:none;
		clear:none;
}
#creditcard{
	text-align:center;
	clear:none;
	float:none;
	margin:0 auto;
	max-width:80%;
}
#terms{
	display:flex-box;
	text-align: justify;
	max-width: 75%;
}
#terms >*{
	display:inline !important;
}
#terms > em.emterms{
	clear:none;
	
}

/* Was `border:1px inset black !important` -- a heavy black inset border, and
   (with !important) the winner over css/style.css's error rule.  It also added
   1px of border where the clean state of these text inputs has none, so the
   error state nudged every field 2px wider / 1px off-position.  Only the
   border COLOUR is set now: <select> already has a 1px solid #DDD border and
   simply recolours to amber, text inputs still have no border, and the amber
   ring they get instead is an inset box-shadow (css/style.css) which occupies
   no layout space at all.  Net effect: error state == clean state geometry. */
select.required.error{
	border-color:#c98a00 !important;
}
/*---------------------------------------------------------*/
/*---------------------------------------------------------*/
/*---------------------------------------------------------*/
/*---------------------------------------------------------*/
/*---------------------------------------------------------*/
/*---------------------------------------------------------*/
/* The @media (max-width: 320px) and @media (max-width: 411px) blocks that
   used to sit here have been deleted (2026-08-20).  Because html/body carried
   min-width:600px, neither block could ever fire in a real browser, so
   nothing in them was ever debugged.  What they actually contained:

     - `.mb_top, .mb_bot, .mb_tail, #main, #main-box, *{ max-width:320px }`
       and `... *{ overflow:visible; max-width:411px; margin:0 auto;
       float:none }` -- universal-selector rules.  The `#main` in the second
       selector was the damaging one: it beat `#main{overflow-x:hidden}` on
       source order, so on phones #main stopped clipping and every
       overflowing legacy box (the 1010px footer, the 800px header) escaped
       into the document, which is where documentElement.scrollWidth = 830
       at a 375px viewport came from.
     - `#form{ width:60% }`, `.downpayment{ width:90% }`,
       `*{ font-size-adjust{70%;} }` (malformed, parsed to nothing) -- all
       inert here: higher-specificity rules elsewhere already win.
     - `#white{ margin-left:-70px }`, `#main-box`, `.mb_*` -- selectors for
       markup that does not exist in this tenant's index.php at all.

   Replaced by the single tested phone block at the end of this file. */

@media only screen and (max-width: 1024px) {
	.tagline{
		display:none;
	}
	#white{
		padding-left:5px;
		width:80%;
		overflow:hidden;
	}
	.mb_bot, #white{
		position:relative;
		max-width:800px;
	}
	.left,.right{
	width:100% !important;
	max-width:100%;
	min-width:100%;
	float:none;
	}
	#main > #form form{
		position:relative;
		max-width:90%;
		background-size:contain;
	}

#copyright{
	/* was font-size:8px; float:left; margin-left:20% -- illegible, and the
	   20% left margin pushed the footer text off the right edge. */
	font-size:12px;
	float:none;
	width:auto;
	max-width:100%;
	box-sizing:border-box;
	margin-left:0;
}

.left input, .right input, .left select, .right select{
	max-width:90%;
	min-width:50%;
	float:left;
	position:relative;
}
   html,body {
    width:600px;
	width:90%;
  }
  input[type="submit"], 
#submit.submitbutton.final,
.final{
	position:relative;
	display:block;
	width:100%;
	left:0px;
}
  
  b.cen{
	  float:left;
	  padding-left:5px;
  }
input#downpayment{
	margin-left:0% !important;
}
  input[type="submit"]{
	  width:100% !important;
	  margin:0 auto;
  }
 
	#main, #main-box,.primary{
		position:relative;
	  display:flex-box;
	  width:90%;
	}
	.primary{
		
	}
	.mb_bot, #main-box{
		margin-left:auto;
		position:relative;
		display:inline-block;
		width:90%;
	}
	#page-content{
		display:block;
		position:relative;
		max-width:100%;
		padding:0px;
	}
	#content,.mb_bot{
		display:flex-box;
		position:relative;
		
	}
	ul#topnav{
		position:relative;
		/* min-width:90% resolved against a shrink-to-fit inline-block parent
		   (nav.primary), which browsers size from a provisional width -- it
		   came out ~724px regardless of viewport. */
		min-width:0;
		width:100%;
		max-width:100%;
		box-sizing:border-box;
	}
	#header{
		position:relative;
		/* was min-width:100%; max-width:150%; width:800px -- an 800px-wide
		   header inside a ~290px parent on a phone, clipping the logo. */
		min-width:0;
		max-width:100%;
		width:auto;
		box-sizing:border-box;
	}
	#form,form{
	text-align:center;
	display:inline-flex;
	max-width:75% !important;
	margin:5px auto;
}
form > input, form >select,input,select{
	width:98% !important;
	max-width:100% !important;
	margin-bottom:10px;
	margin:5px;
	
}
#header{
	font-size:8px !important;
}
#text-2{
	display:none;
}
.downpayment{
		max-width:90% !important;
		width:90% !important;
	}
}





@media only screen and (max-width: 600px) {
.left,.right{
	width:100% !important;
	max-width:100%;
	min-width:100%;
	float:none;
}
#copyright{
	/* was font-size:8px; float:left; margin-left:20% -- illegible, and the
	   20% left margin pushed the footer text off the right edge. */
	font-size:12px;
	float:none;
	width:auto;
	max-width:100%;
	box-sizing:border-box;
	margin-left:0;
}

.left input, .right input, .left select, .right select{
	max-width:90%;
	min-width:50%;
	float:left;
	position:relative;
}
   html,body {
    width:600px;
	width:90%;
  }
  input[type="submit"], 
#submit.submitbutton.final,
.final{
	position:relative;
	display:block;
	width:100%;
	left:0px;
}
  
  b.cen{
	  float:left;
	  padding-left:5px;
  }
input#downpayment{
	margin-left:0% !important;
}
  input[type="submit"]{
	  width:100% !important;
	  margin:0 auto;
  }
 
	#main, #main-box,.primary{
		position:relative;
	  display:flex-box;
	  max-width:90%;
	}
	.primary{
		
	}
	.mb_bot, #main-box{
		margin-left:auto;
		position:relative;
		display:inline-block;
		width:80%;
	}
	#page-content{
		display:block;
		position:relative;
		max-width:100%;
		padding:0px;
	}
	#content,.mb_bot{
		display:flex-box;
		position:relative;
		
	}
	ul#topnav{
		position:relative;
		min-width:0;
		width:100%;
		max-width:100%;
		box-sizing:border-box;
	}
	#header{
		position:relative;
		min-width:0;
		max-width:100%;
		width:auto;
		box-sizing:border-box;
	}
	#form,form{
	text-align:center;
	display:inline-flex;
	max-width:75% !important;
	margin:5px auto;
}
form > input, form >select,input,select{
	width:98% !important;
	max-width:100% !important;
	margin-bottom:10px;
	margin:5px;
	
}
#header{
	font-size:8px !important;
}
#text-2{
	display:none;
}
.downpayment{
		max-width:90% !important;
		width:90% !important;
	}
}

/* The @media (max-width: 360px) block that used to sit here is gone too
   (2026-08-20).  Same story -- it could never fire.  It held
   `#main-box{ width:360px; margin-left:-20% }`, a hard width plus a negative
   margin on a selector that does not exist in this tenant's markup, and
   duplicates of the #copyright centring / .downpayment width rules that are
   now handled in the base rules above. */


/*=========================================================================
  Phone widths (2026-08-20).
  ------------------------------------------------------------------------
  This is the first block in this file's history that has actually been
  rendered below 600px -- html/body's old min-width:600px made everything
  below that width unreachable.  Every rule here was added in response to a
  measured overflow or an unreadable render at 320/360/375/390/411/414/428/
  500/568/599, in both the clean and the jQuery-Validate error state, and is
  deliberately narrow in scope: it only overrides geometry the older
  @media (max-width: 1024px) / (max-width: 600px) blocks above got wrong
  once they were finally allowed to run.
=========================================================================*/
@media only screen and (max-width: 600px) {

	/* The blocks above set html,body{width:90%}.  On a 320px phone that
	   throws away 32px to gutters the map background cannot even be seen
	   through, because #main paints white over the full width anyway. */
	html, body {
		width:100% !important;
		max-width:100% !important;
		min-width:0 !important;
	}

	/* ...and #main{width:90%} on top of body{width:90%} compounded to 81%
	   of the viewport. */
	#main, nav.primary, .primary {
		width:100% !important;
		max-width:100% !important;
		box-sizing:border-box;
	}

	/* Belt and braces: the old 411px block used to knock this out. Keeping
	   it means a future stray fixed-width legacy box gets clipped rather
	   than dragging the whole document wider than the viewport. */
	#main {
		overflow-x:hidden;
	}

	#form, #main #form {
		width:100% !important;
		max-width:100% !important;
		padding:0 6px !important;
		margin:0 auto !important;
		box-sizing:border-box;
	}

	/* input/select carry width:98% !important from the 1024/600 blocks AND
	   margin:5px !important from the base rules, i.e. 98% + 10px, which
	   overflowed the form by ~10px at every phone width.  content-box made
	   it worse for anything with padding. */
	#form input[type="text"],
	#form input[type="password"],
	#form select,
	#form input[type="submit"] {
		box-sizing:border-box !important;
		width:calc(100% - 10px) !important;
		max-width:calc(100% - 10px) !important;
		min-width:0 !important;
	}
	/* ...but the donation box lays its own fields out in flex rows and sets
	   their margins to 0, so they must stay at a true 100% of their column. */
	#donationbox input[type="text"],
	#donationbox select {
		width:100% !important;
		max-width:100% !important;
	}

	/* The width/min-width/max-width:98% block above is scoped to label.error
	   as of 2026-08-20, so it no longer reaches the fields at all; this is now
	   only belt-and-braces (box-sizing) plus the min-width release for the
	   message labels, which the label.error rule immediately below relies on. */
	.error {
		box-sizing:border-box !important;
		min-width:0 !important;
	}
	label.error {
		width:auto !important;
		max-width:100% !important;
	}

	/* #header is a fixed 209px tall with an absolutely-positioned .logo
	   inside it; at phone widths the logo is far shorter than that and the
	   dead space pushed the form below the fold. */
	#header {
		height:auto !important;
		min-height:0 !important;
		margin-bottom:10px;
		/* the 1024/600 blocks force font-size:8px !important here, which is
		   what the nav link inherits -- unreadable on a phone. */
		font-size:13px !important;
	}
	.logo {
		position:static !important;
		left:auto !important;
		top:auto !important;
		padding:10px 0 0 10px;
	}
	.logo img {
		max-width:100% !important;
		height:auto !important;
	}
	/* empty, absolutely positioned, 312px wide, hanging off the right edge
	   of #header -- its only child (#text-2) is display:none here. */
	#widget-header {
		display:none !important;
	}

	/* .sf-menu (= ul#topnav) carries margin:175px 0 0 4px; height:60px;
	   float:left; width:1010px from the theme skin.  The 175px top margin
	   existed only to clear the absolutely-positioned .logo -- now that the
	   logo is in normal flow above it, it is a 175px blank gap.  The 4px
	   left margin was pushing the nav bar 4px past the right edge. */
	ul#topnav, ul#topnav.sf-menu {
		margin:0 !important;
		height:auto !important;
		float:none !important;
		width:100% !important;
		max-width:100% !important;
		box-sizing:border-box !important;
	}
	/* .sf-menu li is float:left.  With the ul no longer 60px tall the floats
	   were no longer contained, so the yellow bar collapsed to its 4px of
	   border and "Home" rendered underneath it. */
	ul#topnav > li, ul#topnav.sf-menu > li {
		float:none !important;
		display:inline-block !important;
		vertical-align:middle;
	}
	#topnav > li a {
		font-size:14px !important;
		line-height:1.6;
		padding:6px 10px;
		display:inline-block;
		width:auto !important;
	}

	h1 {
		font-size:1.5em;
		line-height:1.25;
		padding:0 6px;
	}
	.formhead {
		padding:0 6px;
	}

	#footer, #copyright, #footer-text {
		width:auto !important;
		max-width:100% !important;
		float:none !important;
		padding-left:5px;
		padding-right:5px;
		margin-left:0 !important;
		margin-right:0 !important;
		box-sizing:border-box;
	}

	/* reCAPTCHA renders a fixed 304px iframe; give it somewhere to go
	   rather than letting it push the form wider at 320px. */
	.g-recaptcha {
		display:block;
		max-width:100%;
		overflow-x:auto;
	}
}


/*=========================================================================
  Tablet / small-desktop widths, 601-1024px (2026-08-21).
  ------------------------------------------------------------------------
  Fixes the visible "snap" when a desktop window is dragged through the
  600/601px boundary.  Measured before this block existed:

      viewport   600     601     768     1024    1025
      body       600     541     691     922     1018
      #form      600     365     466     622     916

  i.e. one pixel wider viewport made the form 235px NARROWER.  Cause is
  three percentage rules in the @media (max-width:1024px) block above
  compounding on top of each other -- html,body{width:90%} x
  #main{width:90%} x #form{max-width:75% !important} = 0.6075 x viewport --
  where the phone block above (<=600px) had already been reset to a
  full-width, 100%-of-parent chain.  Nothing below 601px could see the
  compounding, so it only shows up as a one-pixel cliff.

  Fix: continue the phone block's chain upward instead of switching to
  percentages of percentages, and cap the form with a fixed content measure
  rather than a percentage:

      body    = min(viewport, 1018px)   (1018px is the base html,body width,
                                         so this matches >1024px exactly)
      #main   = 100% of body
      #form   = 100% of #main, max 720px, centred

  Result is monotonic: the form is full-bleed from 320px up to 720px, then
  holds a 720px measure to 1024px.  It still steps up to 916px at 1025px,
  but that is the pre-existing legacy breakpoint where the fields stop being
  forced to one-per-row (input{width:98%}) and the desktop multi-column flex
  layout takes over, so the box widening there reads as the layout change it
  is -- not as a shrink.  See the report note; widening this band's form to
  916px to erase that step was tried and rejected, it makes the stacked
  fields ~894px wide at 1024px.

  The field rule is the same calc(100% - 10px) the phone block uses: the
  1024px block sets input{width:98% !important} AND margin:5px, i.e. 98%
  + 10px, which left #form with 5px of internal horizontal overflow at every
  width in this band (scrollWidth - clientWidth = 5 before this block).
=========================================================================*/
/* Lower bound is 600.02px, not 601px, on purpose: viewport widths are
   fractional at most browser zoom levels, and a 600.5px viewport matches
   neither (max-width:600px) nor (min-width:601px) -- it would fall through to
   the compounded legacy rules and snap exactly as before, just in a half-pixel
   window.  Same .02px trick Bootstrap uses for its breakpoint edges. */
@media only screen and (min-width:600.02px) and (max-width:1024px) {

	html, body {
		width:1018px !important;
		max-width:100% !important;
		min-width:0 !important;
	}

	#main, #main-box, nav.primary, .primary {
		width:100% !important;
		max-width:100% !important;
		box-sizing:border-box;
	}

	/* #main #form (2 ids) is needed to outrank the base #main #form{width:90%} */
	#form, #main #form {
		width:100% !important;
		max-width:720px !important;
		margin:0 auto !important;
		padding:0 6px !important;
		box-sizing:border-box !important;
	}

	#form input[type="text"],
	#form input[type="password"],
	#form select,
	#form input[type="submit"] {
		box-sizing:border-box !important;
		width:calc(100% - 10px) !important;
		max-width:calc(100% - 10px) !important;
		min-width:0 !important;
	}
	/* ...but the donation box lays its own fields out in flex rows with
	   margin:0, so they must stay at a true 100% of their column. */
	#donationbox input[type="text"],
	#donationbox select {
		width:100% !important;
		max-width:100% !important;
	}
}


/*=========================================================================
  reCAPTCHA at extreme narrow widths (2026-08-21).
  ------------------------------------------------------------------------
  Google renders the v2 checkbox as a hard 304px x 78px box
  (.g-recaptcha > div[style="width:304px;height:78px"] > div > iframe) and
  does not reflow it at any width.  The form gives .g-recaptcha
  (viewport - 12px) of room, so the widget outgrows its own container below
  a ~316px viewport: 268px of room at 280px (a folded Galaxy Fold), 288px at
  300px.  The document itself does not overflow -- #main{overflow-x:hidden}
  from the phone block clips it -- so the visible symptom is the checkbox
  running under the right edge of the form, plus a horizontal scrollbar on
  .g-recaptcha from that block's overflow-x:auto.

  transform:scale() on the fixed-size child is the only lever: the widget's
  own width is set inline by Google's script, and its contents are in a
  cross-origin iframe that cannot be restyled.  Scale is paint-only, so the
  304px layout box stays 304px -- hence overflow:hidden on the container to
  drop the now-pointless scrollbar, and an explicit height so the 78px box
  does not leave (78 - 78*scale) px of dead space under the scaled widget.
  transform-origin is left top, not centre: the box is a block, so its left
  edge already sits at the container's left edge and it overhangs only to
  the right; scaling about its own centre would move the left edge inward
  and still leave the right edge overhanging.

  Verified at 280px and 300px: the widget fits, and the checkbox still
  takes a real click through the transform (Playwright frameLocator ->
  .recaptcha-checkbox-border, checkbox ends up checked).

  NOTE FOR TEST AUTHORS -- the transform does NOT break click hit-testing.
  This was re-investigated 2026-08-21 after a report that the hit-target had
  drifted from the visual checkbox at <=315px.  It has not.  Measured:

    - Chromium composes this ancestor transform into the page-space rect of
      elements inside the cross-origin iframe correctly and exactly:
      at 280px the iframe box reads 258.4px (304 * 0.85) and
      .recaptcha-checkbox-border reads 23.8px (28 * 0.85).  Geometry is
      stable from the moment the iframe attaches -- sampled at
      t=0/50/150/300/700ms, zero movement.
    - reCAPTCHA swallows the FIRST click when it lands too soon (~170ms)
      after the widget attaches, and binds for real shortly after.  A plain
      re-click always takes.  This reproduces IDENTICALLY at 768px and
      1024px, where no transform applies at all -- and was actually worse at
      1024px -- so it is not transform-related.
    - click({force:true}), which bypasses hit-testing entirely, fails in the
      same way at the same moment (0/3 at both 280px and 1024px).  A real
      hit-test misalignment could not behave that way.

  So: a test that clicks immediately after waitForSelector on the iframe
  will see aria-checked stay "false" at ANY width.  Let the widget settle
  (~300-450ms after load) or retry the click -- do not "fix" it in CSS.
  A real user cannot tap within 170ms of the widget painting, and it sits
  ~2800px down the form at these widths, so this is a harness artifact and
  not a user-facing bug.
=========================================================================*/
@media only screen and (max-width:315px) {
	.g-recaptcha {
		overflow:hidden;
		height:67px;	/* 78 * 0.85 */
	}
	.g-recaptcha > div {
		transform:scale(0.85);		/* 304 -> 258.4, fits 268px of room */
		transform-origin:left top;
	}
}

/* Below ~272px there is less than 258px of room, so step down again. */
@media only screen and (max-width:272px) {
	.g-recaptcha {
		height:57px;	/* 78 * 0.72 */
	}
	.g-recaptcha > div {
		transform:scale(0.72);		/* 304 -> 218.9 */
	}
}