@import 'reset.css';
@import 'text.css';

@cta: #F35039;
@dark: #1F1F1F;
@grey: #F4F4F4;
@mid: #BDC3C7;
@light: #F9FBFD;
@white: #FFFFFF;
@secondary: #1F38E8;
@base: #1F72F2;
@muted: #AFAFAF;

@heading-font: 'PT Sans', serif;
@body-font: Arial, serif;
@font-face{font-family:'FontHandwritten';src:url('fonts/desyrel.ttf');}

.hor-inner-shadow (@spread: 11px)
{
	-webkit-box-shadow: 
	inset 0px @spread @spread*0.72 -@spread*0.95 rgba(0, 0, 0, 0.125),
	inset 0px -@spread @spread*0.72 -@spread*0.95 rgba(0, 0, 0, 0.125);
	-moz-box-shadow: 
	inset 0px @spread @spread*0.72 -@spread*0.95 rgba(0, 0, 0, 0.125),
	inset 0px -@spread @spread*0.72 -@spread*0.95 rgba(0, 0, 0, 0.125);
	box-shadow: 
	inset 0px @spread @spread*0.72 -@spread*0.95 rgba(0, 0, 0, 0.125),
	inset 0px -@spread @spread*0.72 -@spread*0.95 rgba(0, 0, 0, 0.125);
}

.text-shadow()
{
	text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}

.drop-shadow ()
{
	-webkit-box-shadow: 0 4px 3px -2px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 4px 3px -2px rgba(0,0,0,0.4);
	box-shadow: 0 4px 3px -2px rgba(0,0,0,0.4);
}

.greyscale ()
{
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter: gray;
	-webkit-filter: grayscale(100%);
	filter:alpha(opacity=60);
	opacity:0.6;
}

.rounded-corners (@radius: 3px) 
{
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.ease (@prop: all, @duration: 0.3s, @type: linear)
{
	-webkit-transition: @prop @duration @type;
    -moz-transition: @prop @duration @type;
    -o-transition: @prop @duration @type;
    -ms-transition: @prop @duration @type;
    transition: @prop @duration @type;
}

.reflect (@length: 50%, @opacity: 0.2)
{
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(@length, transparent), to(rgba(255,255,255,@opacity)));
}


.highlight { color: @base; font-weight: bold; }
.oopsididitagain { display: none; }
.align-center { text-align: center; margin: 0 auto; }
.align-right { text-align: right; }
.inline { display: inline; }

blockquote 
{
	font-family: Georgia, serif;
	font-size: 1.25em;
	font-style: italic;
	width: 600px;
	margin: 2em auto 0.5em;
	padding: 0.25em 40px;
	line-height: 1.45;
	position: relative;
	color: @dark;

	&:before 
	{
		display: block;
		content: "\201C";
		font-size: 6em;
		position: absolute;
		left: -20px;
		top: -0.25em;
		padding-right: 20px;
		color: @muted;
	}

	p { margin-bottom: 0.5em; z-index: 0; }

	ul li
	{
		font-size: 0.75em;
		color: @dark;
		text-align: right;
		list-style: none !important;

		&:before
		{
			content: "- ";
		}
	}
}

/* COMMON STYLES */
*, *:before, *:after 
{
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: 
	border-box; 
	box-sizing: border-box;
}

body 
{
	font-family: Arial;
	font-size: 1.0em;

	a 
	{
		color: @cta;
		font-size: 1em;
		text-decoration: none;

		&:hover { text-decoration: underline; }
		img { border: 0; }
	}

	h1, h2, h3, h4, h5, h6 { font-family: @heading-font; }
}

section 
{
	padding-top: 3em;
	padding-bottom: 3em;
	width: 100%;

	h2 
	{ 
		font-size: 2.5em; 

		h3 { font-size: 1.375em; }

		strong { color: @base; }
	}

	&.blue 
	{
		background-color: @base;
		.hor-inner-shadow;
	}

	&.grey
	{
		background-color: @grey;
	}

	&.light
	{
		background-color: @light;
		.hor-inner-shadow;
	}

	&.white
	{
		background-color: @white;
	}

	&.dark
	{
		background-color: @dark;
	}
}

/* LARGE SCREENS */
@media only screen and (min-width: 0px) 
{
	#header 
	{
		margin: 2em 0 1em;
		position: relative;

		#logo
		{
			margin-top: -0.40em;
		}

		#top-nav 
		{
			ul 
			{ 
				float: right; 

				li { float: left; }
			}

			#menu 
			{
				margin-top: 0.5em;
				margin-right: 10px;

				li 
				{ 
					margin-left: 35px; 
					position: relative;

					a 
					{
						color: @dark;
						display: block; 
						font-family: @heading-font;
						font-size: 1.063em;
						text-decoration: none;

						&.active, &:hover, &:focus { color: @cta; }
					}

					&:hover
					{
						> ul { display: block; }
					} 

					ul
					{
						display: none;
						.drop-shadow;
						left: -5px;
						padding-top: 0.5em;
						position: absolute; 
						.rounded-corners;

						li 
						{ 
							background-color: rgba(255,255,255,0.85); 
							
							font-size: 0.875em; 
							float: left; 
							margin-left: 0; 
							width: 150px; 

							a 
							{ 
								border-bottom: 1px solid #dfdfdf;
								.ease(0.2s); 
								padding: 5px; 

								&:hover, &.active { background-color: @secondary; border-bottom: 1px solid @base; color: @white; }
							}
						}
					}
				}
			}

			#login
			{
				margin-left: 30px;

				a { text-decoration: none; }
				li { margin-left: 5px; }
			}
		}
	}

	section#mini-header
	{
		padding-top: 0em; 
		padding-bottom: 0em;

		h1 { color: @white; font-size: 2.125em; margin: 0.25em 0; }
	}
	
	section#blog-body
	{
		#blog-index 
		{
			div.blog-item 
			{
				clear: both; 
				min-height: 146px;
				padding-top: 3em;

				&:first-child { padding-top: 0; }

				div.thumb 
				{
					height: 190px;
					margin: 0;
					margin-right: 13px;
					min-height: 146px;
					width: 146px;
					float: left;
				}

				div.entry 
				{
					
					
					float: right;
					width: 73%;
					
					h3 
					{
						color: @dark;
						font-family: @heading-font;
						font-size: 2em;
						letter-spacing: -1px;
						line-height: 1em;
						margin-bottom: 0.25em;

						a 
						{
							color: #000;
							text-decoration: none;
							font-weight: normal;
							letter-spacing: -1px;

							&:hover { color: @cta; }
						}
					}

					.blog-details { color: #7F8C8D; font-size: 0.875em; margin-bottom: 0.5em; }

					div.snippet 
					{
						line-height: 1.5;

						a 
						{
							text-transform: uppercase;
							font-size: 0.75em;
							font-weight: bold !important;
							color: #ff3d1f;
						}
					}
				}
				
				div.border
				{ 
					padding-bottom: 3em;
					padding: 130px;
					border-bottom: 1px solid #efefef; 
				}
			}

			nav.pagination {
				a.next {
					float: left;
				}
				a.prev {
					float: right;
				}
			}
			.or { padding-right: 0; } .box { width: 15em; font-size: 100%; }

		}
	}
	
	section#industry-app-catalog-body
	{
		#blog-index 
		{
			div.blog-item 
			{
				clear: both; 
				min-height: 130px;
				padding-top: 3em;

				&:first-child { padding-top: 0; }

				div.thumb 
				{
					height: 200px;
					margin: 0;
					margin-top: 5px;
					margin-right: 13px;
					min-height: 146px;
					width: 146px;
					float: left;
				}

				div.entry 
				{
					border-bottom: 1px solid #efefef;
					padding-bottom: 3em;
					padding-right: 20px;

					h3 
					{
						color: @dark;
						font-family: @heading-font;
						font-size: 2em;
						letter-spacing: -1px;
						line-height: 1em;
						margin-bottom: 0.25em;

						a 
						{
							color: #000;
							text-decoration: none;
							font-weight: normal;
							letter-spacing: -1px;

							&:hover { color: @cta; }
						}
					}

					.blog-details { color: #7F8C8D; font-size: 0.875em; margin-bottom: 0.5em; }

					div.snippet 
					{
						line-height: 1.5;

						a 
						{
							text-transform: uppercase;
							font-size: 0.75em;
							font-weight: bold !important;
							color: #ff3d1f;
						}
					}
				}
			}

			nav.pagination {
				a.next {
					float: left;
				}
				a.prev {
					float: right;
				}
			}
		}
	}

	section#article-body
	{
		#blog-entry 
		{
			padding-right: 20px;

			h2 
			{
				color: #030303; 
				font-family: @heading-font;			
				font-size: 2.25em;
				font-weight: normal;
				letter-spacing: -1px;
				line-height: 1.125em;
				margin-bottom: 0.25em;
			}

			.cta-block { margin: 3em 0 3em; }

			#sharing
			{
				text-align: center;

				li
				{

					display: inline-block;

					text-indent: -99999px;
					margin-left: 10px;


					a
					{
						background-image: url('../images/social_sprites.png');
						background-repeat: no-repeat;
						display: block;
						height: 60px;
						width: 185px;
						&#facebook { background-position: 0 0; }
						&#twitter { background-position: 0 -60px; }
						&#google { background-position: 0 -120px; }
					}

				}
			}

			#feature-image 
			{ 
				text-align: center; 
				margin: 1em auto 2em;  

				img { max-width: 600px; height: auto; }
			}

			#blog-details 
			{
				color: #7F8C8C;
				font-size: 0.875em;
				margin-bottom: 2em;
			}

			#blog-content 
			{
				ul { margin-bottom: 2.25em; }
				li { margin-bottom: 0.5em; }
				ul li { list-style: disc; }
				ol li { list-style: decimal; }
				p { margin-bottom: 1.75em; line-height: 1.75em; }
			}	

			#comments
			{
				padding: 2em 0;
			}
		}
	}
	
	section#catalog-body
	{
		
		#blog-entry 
		{
			padding-right: 20px;
			sub { color: #333 }

			h2 
			{
				color: #030303; 
				font-family: @heading-font;			
				font-size: 2.25em;
				font-weight: normal;
				letter-spacing: -1px;
				line-height: 1.125em;
				margin-bottom: 0.25em;
			}
			
			ol {
			  color: #ccc;
			  list-style-type: none;
			}
			 
			ol li {
			  position: relative;
			  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
			  margin: 0 20px 10px 60px;
			}
			
			li p {
			  font: 14px/1.5 Helvetica, sans-serif;
			  padding-left: 5px;
			  color: #555;
			}
			
			.cta-block { margin: 3em 0 3em; }
		
			#logo-image
			{ width: 20%; float:left; }
			
			#blog-heading
			{ width: 78%; float:right; padding-top: 20px; }
			
			#feature-image 
			{ 
				text-align: center; 
				margin: 1em auto 2em;  

				img { max-width: 600px; height: auto; }
			}

			#blog-details 
			{
				color: #7F8C8C;
				font-size: 0.875em;
				margin-bottom: 2em;
			}

			#blog-content 
			{
				padding-top: 170px;
				ul { margin-bottom: 2.25em; }
				li { margin-bottom: 0.5em; }
				ul li { list-style: disc; }
				ol li { list-style: decimal; }
				p { margin-bottom: 1.75em; line-height: 1.75em; }
			}	

		}
	}

	
	#blog-sidebar 
	{
		a { color: @dark; }

		#categories 
		{
			ul
			{
				min-height: 3em;

				li 
				{ 
					float: left; 
					margin: 0 3px 3px 0; 
					list-style: none; 
					line-height: 0; 

					a
					{
						border: 0;
						display: block;
						background: @dark;
						border-radius: 5px;
						color: @white;
						padding: 0.875em 10px;
						font-size: 0.75em;
						height: 20px;
					}
				}
			}
		}

		#search
		{
			padding-top: 2em;

			#search-field { padding: 6px; width: 205px; }
		}

		#socialmedia 
		{
			.social-icon
			{
				float: left;
				font-size: 0.875em;
				font-weight: bold;
				height: 90px;
				line-height: 1em;
				text-align: center;
				text-transform: uppercase;
				width: 100px;

				img 
				{
					padding-bottom: 1em;
				}

				p { margin-top: 0.375em; }
			}
		}

		#search-form 
		{
			clear: both;
			height: 2.5em;
			margin-bottom: 3em;
			width: 298px;
			margin-left: auto;
			margin-right: auto;

			div.input 
			{
				background: #fff;
				border: 1px solid #858988;
				box-shadow: 0 0 2px rgba(0,0,0,0.5);
				width: 210px;
				display: inline;
				float: left;
				margin-right: 8px;

				input 
				{
					background: none;
					border: none;
					color: #888;
					padding: 6px 8px;
					font-size: 0.875em;
					outline: none;
				}		
			}

			div.error {
				font-family: @heading-font;
				font-size: 10px;
				font-weight: bold;
				color: #f00;
				opacity: 0;
			}
		}

		.module 
		{
			clear: both;
			display: block;
			padding-top: 2em;

			&:first-child { padding-top: 0; }

			h4 
			{
				background: #1f72f2;
				color: #fff;
				font-family: @heading-font;
				font-size: 1.125em;
				margin-bottom: 13px;
				padding: 0.625em;
			}

			ul 
			{
				li 
				{
					margin-bottom: 8px;
					margin-left: 5px;
				}
			}
		}
	}
	
	#contact-sidebar
	{ 
		padding-left: 20px;

		h4 { color: @cta; font-size: 0.875em; font-weight: normal; }
		ul 
		{				
			li 
			{ 
				margin-left: 0; 
				margin-bottom: 0.5em;
				
				a { color: @dark; }
				i { width: 18px; display: inline-block; }
			}
		}

		.module
		{
			border-bottom: 1px solid #ddd;
			border-top: 1px solid @white;
			font-size: 0.875em;
			padding-top: 1.5em;

			&:last-child { border-bottom: none; }
		}
	}

	section#default-body
	{
		padding-top: 3em;
		padding-bottom: 3em;
	}

	section#home-body
	{
		padding-top: 0;
		padding-bottom: 0;

		section 
		{
			padding: 4em 0;

			h3
			{
				font-size: 3.25em;
				font-weight: normal;
				line-height: 1em;
				letter-spacing: -1px;
				margin: 0;
				padding: 0;

				p { margin-bottom: 0; }
			}

			h4
			{
				font-size: 1.75em;
				font-weight: normal;
				line-height: 1.125em;
				margin-top: 0.25em;
				padding: 0 120px;
				text-align: center;
			}

			&.blue 
			{
				h3 
				{
					color: @white;
					text-shadow: 0 1px 1px rgba(51,51,51,0.75);
				}

				h4
				{
					color: @white;		
					text-shadow: 0 1px 1px rgba(51,51,51,0.75);
				}
			}

			&.grey,
			&.light
			{
				h3 
				{
					color: @dark;
					strong { color: @base; }
				}

				h4
				{
					color: @dark;		
					font-size: 1.875em;
					text-shadow: 0 1px 1px rgba(51,51,51,0.75);
				}
			}

			&.white
			{
				h3 
				{
					color: @dark;
					font-size: 3.75em;

					strong { color: @base; }
				}

				h4
				{
					color: @dark;		
					font-size: 1.875em;
					text-shadow: 0 1px 1px rgba(51,51,51,0.75);
				}
			}
			
			&#home-feature
			{
				padding: 2em 0;

				/* background: transparent url('../images/feature_bg.jpg') repeat-x center top; */

				
				#paperless-left 
				{
					text-align: center;

					h1 
					{
						color: @white;
						font-size: 2.5em;
						font-weight: normal;
						line-height: 1em;
						letter-spacing: -1px;
						margin: 0;
						padding: 0;
						text-shadow: 0 1px 1px rgba(51,51,51,0.75);
					}

					h2
					{
						color: @white;		
						font-size: 1.25em;
						font-weight: normal;
						line-height: 1em;
						margin-top: -0.5em;
						padding: 0;
						text-align: center;
						text-shadow: 0 1px 1px rgba(51,51,51,0.75);
					}
					
					#sign-up 
					{
						text-align: center;

						#sign-up-input 
						{
							background: @white;
							border: 1px solid #5f3991;
							box-shadow: 0 1px 1px rgba(51,51,51,0.75);
							float: left;
							padding: 9px 0.938em;
							width: 65%;

							.parsley-error-list 
							{ 
								font-size: 0.875em; 
								font-weight: bold; 
								position: absolute;
								margin-top: 1em;
								margin-left: 0;

								li { color: @light; margin-left: 0; }
							}

							input 
							{
								border: 0;
								color: @dark;
								font-size: 1em;
								margin: 0;
								outline: none;
								padding: 0;
								width: 100%;
								
								&::-webkit-input-placeholder,
								&:-moz-placeholder,
								&::-moz-placeholder,
								&:-ms-input-placeholder 
								{  
									color: @muted;  
								}
							}
						}

						#sign-up-button
						{
							float: left;
							padding-left: 0.625em;
						}
					}

					#video-container 
					{
						margin: 2em auto;
						text-align: center;
					}
				}

				#paperless-right 
				{ 
					position: relative;
					padding-top: 0.75em;
					padding-left: 10px; 

					img { position: absolute; margin-left: -50px; } 
				}
			}

			&#quote
			{
				padding: 1em 0;

				blockquote
				{
					margin: 1em auto 0.25em;
					width: 650px;

					p
					{
						color: @light;
					}

					ul
					{
						li
						{
							color: @muted;
							font-size: 0.75em;
						}
						
					}
				}
			}

			&#quotes 
			{ 
				padding: 0.25em 0 0em;
				min-height: 160px;

				blockquote
				{
					font-size: 1.125em;
					margin: 1em auto 0.25em;
					width: 570px;
				}

				#stores
				{
					text-align: right;
					margin-top: 5em;
				}
			}

			&#partners 
			{ 
				padding: 2em 0 2em;

				.company 
				{ 
					float: left; 

					span
					{
						display: table-cell;
						height: 3.125em;
						padding: 55px 0 25px 20px;
						vertical-align: middle;
					}
				}

				#partner-description { margin-bottom: 0.5em; }
			}

			&#business-mobile 
			{
				text-align: center;

				#mobile-features
				{
					padding-top: 3em;

					.feature  
					{
						img
						{
							display: block;
							margin: 0 auto 1em auto;
						}

						h5 
						{
							text-align: center;
							font-size: 1.25em;
							margin-bottom: 1em;
							margin-top: 0.5em;
						}

						&.arrow 
						{
							background: url('../images/icoArrow.png') no-repeat right 15px;
						}

						.text 
						{
							font-size: 1em;
							text-align: center;
						}
						p { font-size: 0.813em; }
					}
					#see-all-button { padding-top: 3em; }
				}
			}

			&#mobile-forms-120815
			{
				text-align: center;

				#form-features
				{
					padding: 2em 0;

					h4 { font-size: 1.125em; font-weight: bold; margin: 0 0 0.25em 0; padding: 0; line-height: 1em; }
					li { margin-left: 0; }
					p { font-size: 0.813em; }
					ul li { margin-bottom: 2em; }

					#col-1
					{
						text-align: right;

						h4, p { text-align: left; }

						.icon { float: right; padding-left: 10px; }
					}

					#col-3
					{
						text-align: left;

						h4, p { text-align: left; }
						.icon { float: left; padding-right: 10px; margin-right: 10px; }

					}
					.icon { width: 54px; height: auto; }
				}

				#app-store-buttons
				{
					padding: 2em 0 2em;
				}
			}
			
			&#mobile-forms
			{
				text-align: center;

				#form-features
				{
					padding: 2em 0;

					h4 { font-size: 1.125em; font-weight: bold; margin: 0 0 0.25em 0; padding: 0; line-height: 1em; }
					li { margin-left: 0; }
					p { font-size: 0.813em; }
					ul li { margin-bottom: 2em; }

					#col-1
					{
						text-align: right;

						h4, p { text-align: left; }

						.icon { float: right; padding-left: 5px;  }
					}

					#col-2
					{ width: auto; padding: 5em 4em 1em 8em; }

					#col-3
					{
						text-align: left;

						h4, p { text-align: left; width: 300px;}
						.icon { float: left;  width: auto; padding-right: 20px;  }

					}
					.icon { width: 34px; height: auto; }
				}

				#app-store-buttons
				{
					padding: 2em 0 2em;
				}
			}

			&#cloud-integration
			{
				background: url(../images/clouds.png) no-repeat top center @base;
				text-align: center;

				#video-container { margin-top: 3em; }
				#get-started-button { margin-top: 3em; }
			}

			&#web-portal
			{
				text-align: center;

				#portal 
				{
					height: 550px;
					margin-top: 3em;
					position: relative;
					width: inherit;
					background: url(../images/portal.jpg) no-repeat 188px 55px;

					.image 
					{
						height: 379px;
						left: 178px;
						margin: auto;
						position: absolute;
						top: 56px;
						width: 584px;
						z-index: 200;
					}

					.features 
					{
						height: inherit;
						width: inherit;
						z-index: 400;

						&> .feature 
						{
							height: auto;
							position: absolute;
							width: 280px;

							&> .text { font-size: 0.875em; width: 270px; text-align: left; }

							&> h5 
							{
								font-size: 1.25em;
								margin-bottom: 0.5em;
								text-align: left;
							}

							.icon 
							{
								float: left;
								height: 90px;
								margin-right: 0.5em;
							}
							&:nth-child(1) { top: 0px; left: 76px; }
							&:nth-child(2) { top: 0px; right: 21px; width: 300px; }
							&:nth-child(3) { top: 173px; right: -62px; width: 245px; }
							&:nth-child(4) { top: 245px; left: -12px; width: 240px; }
							&:nth-child(5) { top: 425px; left: 140px; width: 320px; }
							&:nth-child(6) { top: 430px; right: 100px; }
						}
					}
				}

				#portal-cta
				{
					padding-top: 2em;
				}
			}

			&#testimonials
			{
				text-align: center;

				#testimonial-list
				{
					padding-top: 3em;

					.bubble 
					{
						background: url(../images/bgBubble.png) no-repeat center top;
						height: 267px;
						margin: 0 auto 22px auto;
						position: relative;
						width: 260px;

						div { float: left; }
						
						div[class*="Quote"] 
						{
							position: absolute;
							font-family: "PT Sans", sans-serif;
							font-size: 100px;
							text-align: center;
							color: #eee;
							width: 3.125em;
						}
						.openQuote { top: 0px; left: 0px; }
						.closeQuote { bottom: 0px; right: 0px; }
						.text {
							font-size: 1.0em;
							height: auto;
							line-height: 1.2em;
							margin: 38px 3.125em 0 3.125em;
							width: 160px;
						}
					}

					.photo
					{
						text-align: center;
						
						h4 
						{
							color: @dark;
							font-size: 1.125em;
							font-weight: bold;
							line-height: 1em;
							margin: 0;
						}

						h5 
						{
							color: @dark;
							font-family: Arial;
							font-size: 0.938em;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
	
	section#sales-body
	{
		h2 { line-height: 1.125em; }
		h3 { font-size: 1.75em; }

		padding-top: 0;
		padding-bottom: 0;

		section
		{
			
			&#sales-contact
			{

				#contact-form-container
				{
					h5 { margin: 0.5em 0; }

					input[type="text"],
					input[type="url"],
					input[type="email"]
					{
						font-size: 0.875em;
						min-height: 2.75em;
						padding-left: 20px;
						padding-right: 20px;
						width: 100%;

						&.parsley-error { border: 1px solid #990000; }
						&.parsley-success { border: 1px solid #009900; }
					}

					label { display: block; padding-top: 1.5em; font-size: 0.875em;  }

					select 
					{
						color: @dark;
						font-size: 0.875em;
						outline: none;
						padding: 10px;
						width: 100%;
					}

					textarea
					{
						min-height: 9.5em;
						max-height: 15em;
						padding: 0.675em 20px;
						resize: vertical;
						width: 100%;
					}

					.parsley-error-list 
					{ 
						font-size: 0.875em; 
						font-weight: bold; 

						li { color: #990000; margin-left: 0; }
					}

					#form-buttons { padding-top: 1em; padding-right: 10px; }

					#reset-button { margin-right: 10px; }
				}
			}

			&#sales-integration
			{
				h2 { color: @white; text-align: center; line-height: 1em; margin-bottom: 0; }
				h3 { color: @mid; font-size: 1.5em; text-align: center; line-height: 1em; margin-bottom: 1.5em; }
				
				p { color: @light; }

				ul
				{
					&#integration-icons
					{
						margin-top: 1em;

						li
						{
							float: left;
							margin-bottom: 1em;

							&.icon
							{
								a
								{
									display: block;
									width: 155px;
									padding: 10px 0;
									overflow: hidden;
									text-align: center;
									border: 1px solid @dark;
									-moz-transition: background-color .2s, color .2s;
									-webkit-transition: background-color .2s, color .2s;
									-o-transition: background-color .2s, color .2s;
									transition: background-color .2s, color .2s;

									&:hover
									{
										background: @base;
										border-radius: 8px;
										text-decoration: none;
										cursor: default;
									}
								}
							}
						}
					}
				}
			}

			&#sales-portal
			{
				h2 { text-align: center; margin-bottom: 1em; }

				#lead-image
				{
					text-align: center;
					margin-bottom: 2em;
				}
			}

			&#sales-testimonial
			{
				blockquote { margin: 0 auto; }
				ul { margin-bottom: 0; }
			}

			&#sales-lead
			{
				#stores
				{
					text-align: center;
					margin-top: 2em;
				}

				#cta-button
				{
					margin: 3em 0;
					text-align: center;
				}
				
				#laptop-image
				{
					margin-top: 2em;
					text-align: center;
				}
			}

			&#sales-feature-left
			{
				.feature-left
				{
					margin-left: 20px;
				}
				
				.feature-right
				{
					margin-top: 3em;
					text-align: center;
				}
			}

			&#sales-video
			{
				h2 { color: @white; text-align: center; line-height: 1em; margin-bottom: 0.25em; }
				h3 { color: @light; font-size: 1.5em; text-align: center; line-height: 1em; margin-bottom: 1.5em; }
				
				p { color: @light; }

				#cta { margin-top: 1em; text-align: center; }
			}

			&#sales-demo
			{
				background: transparent url('../images/sales_texture.jpg') repeat-x 0 0;
				text-align: center;
				
				h3 
				{ 
					color: @white; 
					font-size: 1.75em; 
					.text-shadow;
				}

				.button { .drop-shadow; }

				#disclaimer
				{
					clear: both;
					margin: 1em 0 0;

					p
					{
						color: @light;
						margin-bottom: 0;
					}
				}

				#demo-signup
				{
					text-align: center;

					#sign-up-input 
					{
						background: @white;
						border: 1px solid @mid;
						.drop-shadow;
						float: left;
						padding: 9px 0.938em;
						width: 65%;

						.parsley-error-list 
						{ 
							font-size: 0.875em; 
							font-weight: bold; 
							position: absolute;
							margin-top: 1em;
							margin-left: 0;

							li { color: @light; margin-left: 0; }
						}

						input 
						{
							border: 0;
							color: @dark;
							font-size: 1em;
							margin: 0;
							outline: none;
							padding: 0;
							width: 100%;

							&::-webkit-input-placeholder,
							&:-moz-placeholder,
							&::-moz-placeholder,
							&:-ms-input-placeholder 
							{  
								color: @muted;  
							}
						}
					}

					#sign-up-button
					{
						float: left;
						padding-left: 0.625em;
					}
				}
			}
		}
	}

	section#breadcrumbs
	{
		font-size: 0.875em;
		padding: 0.25em 0; 

		nav
		{
			ul
			{
				margin: 0;
				padding: 0.5em 0 2em;

				li { 
					float: left; 
					margin-left: 0; 

					a {
						color: @muted;
						&.active { color: @dark; font-weight: bold; }
					}
				}
			}
		}	
	}

	section#archive-body
	{
		#archive-index
		{
			.archive-item
			{
				margin-bottom: 0.5em;

				.thumb
				{
					height: 30px;
				}
				.entry
				{
					h4 { font-size: 1.125em; font-weight: normal; margin-bottom: 0; }

					p.archive-details { font-size: 0.813em; color: @muted; margin-bottom: 0; }
				}
				
			}
		}
	}
	
	section#industry-archive-body
	{
		#archive-index
		{
			.archive-item
			{
				margin-bottom: 1.3em;

				.thumb
				{
					height: 30px; margin-right: 8px; padding-top: 0.5em;
				}
				.entry
				{
					
					h4 { font-size: 1.125em; font-weight: bold; margin-bottom: 0; color: #666666; }

					p.archive-details { font-size: 0.813em; color: @muted; margin-bottom: 0; padding-left: 6em;}
				}
				
			}
		}
	}

	section#search-body
	{
		h2 { font-size: 2.125em; font-weight: normal; letter-spacing: -1px; line-height: 1em; }

		#search-results
		{
			padding-top: 1em;

			.search-item
			{
				margin-bottom: 0.5em;

				.thumb { height: 30px; }
				.entry
				{
					h4 { font-size: 1.125em; font-weight: bold; margin-bottom: 0; }
					p.search-details { font-size: 0.813em; color: @muted; margin-bottom: 0; }
				}
			}
		}
	}
	
	section#about-us-body
	{
		padding-top: 0.1em;
		h3 { margin: 0; }
		
		#paragraph {
			h3 { color: @base; }
			}
			
		span { color: #332222; font-weight: bold; padding-left: 0.3em; }
		#photoid {  
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			}
	
	}


	section#tour-body
	{
		padding-top: 3em;
		padding-bottom: 3em;

		h2 
		{ 
			font-size: 3em; 
			font-weight: normal; 
			margin-top: 0; 
			margin-bottom: 1em;
			line-height: 1em;
		}

		#feature-video { padding-bottom: 3em; }

		.video-thumbnail { padding-bottom: 1em; }
		.video-text 
		{ 
			background-color: #EDEDED; 
			font-size: 0.875em; 
			padding: 5px 10px 20px 10px; 

			h4 
			{ 
				margin-bottom: 0.5em; 

				strong { color: @base; font-weight: bold; }
			}
		}

		.feature
		{
			padding-top: 3em;
			padding-bottom: 3em;
			border-top: 1px solid #EDEDED;
		}
	}

	section#tour-imagine-body
	{
		h2 { margin-bottom: 1em; }
		h3 { font-size: 1.75em; }

		.section
		{
			border-bottom: 1px solid #EDEDED;
			margin-bottom: 2em; 
			padding-bottom: 1em;
		}

		#imagine_video
		{
			border: 1px solid #dfdfdf;
			padding: 0;
			margin-bottom: 6em;
		}
	}

	section#tour-how-it-works-body
	{
		h2 { margin-bottom: 2em; }
		h3 { font-size: 1.75em; }

		.section
		{
			border-bottom: 1px solid #EDEDED;
			margin-bottom: 2em; 
			padding-bottom: 1em;
		}

		#how-it-works-video
		{
			border: 1px solid #dfdfdf;
			padding: 0;
			margin-bottom: 6em;
		}
	}
	
	section#features-app-body
	{
		a { color: @cta; }
	}

	section#features-portal-body
	{
		a { color: @cta; }

		#main-image { text-align: center; }
	}
	
	section#features-scheduler-body
	{
		a { color: @cta; }
		h3 { color: @base; font-size: 1.3em; }
		#image { padding-top: .7em; align: center; }
	}

	section#features-form-builder-body
	{
		#image { float: left; width: 33%; height: 100%; }
		#sub { float: right; width: 67%; text-align: left; }
	}
	
	section#features-resources-library-body, section#features-photo-streaming-body, #features-email-tracking-body, #features-advanced-drawing-body, #features-card-payments-body, #features-workflows-events-body
	{
		.sub { margin-top: 3em; }
		span { color: @base; }
	}

	section#features-integrations-body
	{
		a { color: @cta; }
		
		#partners 
		{ 
			.column-box { width:350px; display:inline-block; padding-right: 3em; }
			
			#box1 { float:left; }
			#box2 { float:right; }
			
			img { padding: 1em; border:1px solid #CCC; }

			h3 { padding-top:1em; font-size: 1.5em; font-weight: bold; }

			p { color: #7F8C8C; font-size: 1em; }
			
			ul { font-size: 0.813em; text-align: left; }
		}

	}
	
	section#xero-body
	{
		padding-bottom: 3em; 
		padding-top: 3em; 
		
		h2 { font-size: 3.25em; line-height: 1em; margin-bottom: 0.25em; }
		h3 { font-size: 1.313em; color: #7F8C8C; font-weight: normal; text-align: left; }
		h4 { font-size: 2em; font-weight: bold; text-align: center; margin-top: 1em; }
		.highlight { font-style: italic; } 
		
		#paragraph
		{
			text-align: left;
			padding-top: 1em; 
			padding-bottom: 0.3em;
			.highlight { font-weight: normal; font-style: normal; } 
			
			h4 { font-size: 1.5em; color: @base; text-align: left; margin-bottom: 0.41em; }
			p { font-size: 0.98em; font-weight: normal; color: #333333; margin-bottom: 0.9em; }
		
		}
		
		#button, #logo 
		{ 
			padding-top: 3em; padding-bottom: 2em; text-align: center; 
			p { font-size: 0.98em; font-weight: normal; color: #7F8C8C; text-align: center; }
		}
		
		
	}
	
	section#integrations-xero-body
	{
		padding-bottom: 0;
		padding-top: 0;

		section 
		{ 
			padding-bottom: 3em; 
			padding-top: 3em; 
			
			h2 { font-size: 3.25em; line-height: 1em; margin-bottom: 0.25em; }
			h3 { font-size: 1.313em; color: #7F8C8C; font-weight: normal; text-align: left; }

			&#container1
			{	
				#partners 
				{ 
					margin-top: 1em; 
					
					#formitize-img { width:473px; float:left; display:inline-block; padding-top: 30px; }
					#xero-img { margin-left:200px; }
				}
			}
			
			&#container2 
			{
				text-align: left;

				h4 { font-size: 25px; margin:0; padding: 0.7em 0 0 0; }
				h3 { font-size: 20px; color: black; font-weight: bold;  }

				#mobile-features
				{					
					#vid { text-align: left; padding: 6em 1em 3em 4em; }
					
					.feature  
					{
						width: 170px;
						img
						{
							display: block;
							margin: 0 auto 1em auto;
						}

						h5 
						{
							text-align: center;
							font-size: 1.25em;
							margin-bottom: 1em;
							margin-top: 0.5em;
						}

						.text 
						{
							font-size: 1em;
							text-align: center;
						}
						
						p { font-size: 0.813em; text-align: left; }
						
					}
					
				}
				
				#app-store-buttons
				{ width: 380px; padding-top: 1em; }
				
				
			}

			&#container3
			{
				h2 { font-weight: normal; font-size: 3em; }
				h3 { font-size: 1.5em; font-weight: bold; color: #333;  }
				
				#column-box
				{
					.question
					{
						padding-left: 20px;
						padding-right: 20px;
						
						p { color: #7F8C8C; font-size: 1em; }
						
						ul { font-size: 0.813em; text-align: left; }
					}
				}

				#question-cta { text-align: center; padding-top: 2em; }
			}
			
			&#business-mobile 
			{
				text-align: center;
				
				h3 { text-align: center; } 

				#mobile-features
				{
					padding-top: 3em;

					.feature  
					{
						img
						{
							display: block;
							margin: 0 auto 1em auto;
						}

						h5 
						{
							text-align: center;
							font-size: 1.25em;
							margin-bottom: 1em;
							margin-top: 0.5em;
						}

						&.arrow 
						{
							background: url('../images/icoArrow.png') no-repeat right 15px;
						}

						.text 
						{
							font-size: 1em;
							text-align: center;
						}
						p { font-size: 0.813em; }
						
					}
					#see-all-button { padding-top: 3em; }
				}
			}
		
		}
	}


	section#footer-bottom
	{
		padding-top: 0;
		padding-bottom: 0;
	}

	section.features
	{
		

		h2 
		{ 
			font-size: 2.5em; 
			font-weight: normal; 
			margin-top: 0; 
			margin-bottom: 1em;
			line-height: 1em;
		}

		.section { padding-top: 2em; padding-bottom: 2em; border-bottom: 1px solid #EDEDED;}

		#features-menu
		{
			ul
			{
				li
				{
					font-size: 0.875em;
					line-height: 2.5em;
					margin-left: 0;
					margin-right: 20px;

					a 
					{ 
						color: @dark;
						text-decoration: none; 
						padding-left: 10px;

						.ease(0.2s);

						&.active
						{
							background-color: @base;
							display: block;
							color: @white;

							&:hover { color: @light; }
						}

						&:hover { color: @cta; margin-left: 5px; }
					}

					i { display: inline-block; font-size: 1em; padding-right: 5px; text-align: center; width: 20px; }
				}
			}
		}

		&#overview-body
		{
			#main-image { text-align: center; }
		}

		#cta { text-align: center; padding-top: 3em; }
	}

	section#pricing-body
	{
		padding-bottom: 0;
		padding-top: 0;

		section 
		{ 
			padding-bottom: 3em; 
			padding-top: 3em; 

			&#quote-container
			{
				h2 { font-size: 2em; font-weight: normal; }
				#quote li { float: left; }
				
				#logos
				{
					margin-top: 2em; 
					text-align: center;

					.company 
					{ 
						img 
						{		
							display: inline;
							padding-left: 20px;
							padding-right: 20px;
							vertical-align: middle;
							.greyscale;
						}
					}
				}
				
			}

			&#price-container
			{
				h3 { text-align: center; }
				h2 { font-size: 3.25em; line-height: 1em; margin-bottom: 0.25em; }
				h4 { font-size: 1.28em; font-weight: normal; text-align: center; margin-top: 2em; }
				.font1 { font-size: 1.313em; color: #7F8C8C; font-weight: normal; }
				
				#price-detail 
				{ 
					padding-top: 1em; 
					
					span { font-size: 1.33em; color: #0033CC; }
					
					#question { font-weight: normal; font-size: 1.3em; margin-left: 1.5em; margin-top: 1em; color: #1F72F2}
					#answer { /* float: right; padding-right: 17em; margin-top: -2.52em; */ color: #0033CC; margin-top: 0.5em; margin-left: 1.8em; font-weight: bold; }
					
					p#price 
					{ 
						color: #33485E; 
						font-family: @body-font; 
						font-size: 5em;
						font-weight: bold; 
						line-height: 1em;
						text-align: center;
						margin-bottom: 0;

						sup { font-size: 0.688em; }
					}

					p#terms { color: #33485E; font-size: 1.125em; font-weight: normal; text-align: right; padding-right: 2em; }

					p#price-cta { text-align: left; margin-top: 0.95em; padding-left: 3.5em; }

					p#price-cta2 { text-align: center; margin-top: 1em; padding-right: 1.8em; }
				}

				#condition { font-size: 0.875em; text-align: center; color: #7F8C8C; margin-top: 2em; margin-bottom: 0; }
				
				/* pricing table */	
				.CSSTableGenerator {
					
					margin-left: 10em; margin-top: 21em; padding-right:0px;
					width:65%; 
					box-shadow: 10px 10px 5px #888888;
					border:1px solid #000000;
					border-top: -5em;
					box-sizing: border-box;
					
					-moz-border-radius-bottomleft:0px;
					-webkit-border-bottom-left-radius:0px;
					border-bottom-left-radius:0px;
					
					-moz-border-radius-bottomright:0px;
					-webkit-border-bottom-right-radius:0px;
					border-bottom-right-radius:0px;
					
					-moz-border-radius-topright:0px;
					-webkit-border-top-right-radius:0px;
					border-top-right-radius:0px;
					
					-moz-border-radius-topleft:0px;
					-webkit-border-top-left-radius:0px;
					border-top-left-radius:0px;
				}.CSSTableGenerator table{
					border-collapse: collapse;
						border-spacing: 0;
					width:100%;
					height:100%;
					margin:0px;padding:0px;
					
				}.CSSTableGenerator tr:last-child td:last-child {
					-moz-border-radius-bottomright:0px;
					-webkit-border-bottom-right-radius:0px;
					border-bottom-right-radius:0px;
				}
				.CSSTableGenerator table tr:first-child td:first-child {
					-moz-border-radius-topleft:0px;
					-webkit-border-top-left-radius:0px;
					border-top-left-radius:0px;
				}
				.CSSTableGenerator table tr:first-child td:last-child {
					-moz-border-radius-topright:0px;
					-webkit-border-top-right-radius:0px;
					border-top-right-radius:0px;
				}.CSSTableGenerator tr:last-child td:first-child{
					-moz-border-radius-bottomleft:0px;
					-webkit-border-bottom-left-radius:0px;
					border-bottom-left-radius:0px;
				}.CSSTableGenerator tr:hover td{
					
				}
				.CSSTableGenerator tr:nth-child(odd){ background-color:#e5e5e5; }
				.CSSTableGenerator tr:nth-child(even)    { background-color:#ffffff; }.CSSTableGenerator td{
					vertical-align:middle;
					
					
					border:1px solid #000000;
					border-width:0px 1px 1px 0px;
					text-align:left;
					padding:7px;
					font-size:12px;
					font-family:Arial;
					font-weight:normal;
					color:#000000;
				}.CSSTableGenerator tr:last-child td{
					border-width:0px 1px 0px 0px;
				}.CSSTableGenerator tr td:last-child{
					border-width:0px 0px 1px 0px;
				}.CSSTableGenerator tr:last-child td:last-child{
					border-width:0px 0px 0px 0px;
				}
				.CSSTableGenerator tr:first-child td{
						background:-o-linear-gradient(bottom, #0066CC 5%, #000000 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0066CC), color-stop(1, #000000) );
					background:-moz-linear-gradient( center top, #0066CC 5%, #000000 100% );
					filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0066CC", endColorstr="#000000");	background: -o-linear-gradient(top,#0066CC,000000);

					background-color:#0066CC;
					border:0px solid #000000;
					text-align:center;
					border-width:0px 0px 1px 1px;
					font-size:16px;
					font-family:Arial;
					font-weight:bold;
					color:#ffffff;
				}
				.CSSTableGenerator tr:first-child:hover td{
					background:-o-linear-gradient(bottom, #0066CC 5%, #000000 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0066CC), color-stop(1, #000000) );
					background:-moz-linear-gradient( center top, #0066CC 5%, #000000 100% );
					filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0066CC", endColorstr="#000000");	background: -o-linear-gradient(top,#0066CC,000000);

					background-color:#0066CC;
				}
				.CSSTableGenerator tr:first-child td:first-child{
					border-width:0px 0px 1px 0px;
				}
				.CSSTableGenerator tr:first-child td:last-child{
					border-width:0px 0px 1px 1px;
				}
			}

			&#questions-container
			{
				h2 { font-weight: normal; font-size: 3em; }
				
				#questions
				{
					padding-top: 2em;

					.question
					{
						padding-left: 20px;
						padding-right: 20px;

						h3 { font-size: 1.5em; font-weight: bold; }

						p { color: #7F8C8C; font-size: 1em; }
					}
				}

				#question-cta { text-align: center; padding-top: 2em; }
			}
			
			&#features-container 
			{
				text-align: center;

				#mobile-features
				{
					padding-top: 1em;

					.feature  
					{
						img
						{
							display: block;
							margin: 0 auto 1em auto;
						}

						h5 
						{
							text-align: center;
							font-size: 1.25em;
							margin-bottom: 1em;
							margin-top: 0.5em;
						}

						.text 
						{
							font-size: 1em;
							text-align: center;
						}
						p { font-size: 0.813em; }
						
					}
				}
			}

			&#calculator-container
			{
				text-align: center;
			}
		}
	}

	/* Footer */
	footer {
		background-color: @dark;
		color: @light;
		padding-top: 3em;
		padding-bottom: 3em;

		a { 
			color: @muted; 
			text-decoration: none; 
			&:hover, &:focus { color: @white; }
		}
		h5 { color: @white; font-weight: bold; }
		li { 
			color: @muted; font-size: 0.983em; margin-left: 0; 
			#seeall { color: #ff3300; font-weight: bold;  }
		}
		#about { font-size: 0.913em; }
		#email, #get-started { color: #fff; font-size: 1.5em; text-align: center; }
		#links { padding-top: 2em; }
		#nonlink { color: #C5D3CE; }
		
		#social
		{
			img { margin-right: 10px; }
			li { margin-bottom: 0.5em; }
		}

		#sign-up 
		{
			text-align: center;

			#sign-up-input 
			{
				background: @white;
				border: 1px solid #5f3991;
				box-shadow: 0 1px 1px rgba(51,51,51,0.75);
				float: left;
				padding: 9px 0.938em;
				width: 67%;

				.parsley-error-list 
				{ 
					font-size: 0.875em; 
					font-weight: bold; 
					position: absolute;
					margin-top: 1em;
					margin-left: 0;

					li { color: @cta; margin-left: 0; }
				}

				input 
				{
					border: 0;
					color: @dark;
					font-size: 1em;
					margin: 0;
					outline: none;
					padding: 0;
					text-align: left;
					width: 100%;
					
					&::-webkit-input-placeholder,
					&:-moz-placeholder,
					&::-moz-placeholder,
					&:-ms-input-placeholder 
					{  
						color: @muted;  
					}
				}
			}

			#sign-up-button
			{
				float: left;
				padding-left: 0.625em;
			}
		}
	}

	#copyright
	{
		color: @white;
		font-size: 0.75em;
		padding-top: 1.5em;

		#policies
		{
			text-align: right;
			a 
			{ 
				color: @white;
				text-decoration: none; 

				&:hover { text-decoration: underline; }
			}
		}
	}

	&#pricing-body
	{
		padding-top: 3em; 
		padding-bottom: 3em;

		h2 { font-size: 3em; line-height: 1.25em; text-align: center; } 		
		#calculator { 
			margin-top: 2em;

			div { text-align: center; } 
		}
		#pricing { margin-top: 2em; }

		table#pricing-table
		{
			width: 100%;

			tr
			{
				&#description
				{
					span { text-align: left; }
				}

				&#price
				{
					#per-month { font-size: 2em; display: inline; }
				}

				th,
				td
				{ 
					text-align: center;
					width: 100/3%;

					span { display: block; padding: 5px; } 
				}
				th { background-image: url(../images/inspector.jpg); height: 240px; }
			}
		}
	}
	
	section#success-body
	{
		h2 { font-size: 2.5em; font-weight: normal; line-height: 1.25em; }
		h3 { font-size: 1.75em; font-weight: normal; margin-top: 1em; }
		
		#signoff { clear: both; margin-top: 2em; text-align: center; }
		
		.cta-block
		{
			margin: 2em 0;

			#connect
			{
				padding-bottom: 2.5em;
				
				#connect-buttons
				{
					margin: 0 auto;
					width: 375px;

					.button-container 
					{
						float: left;
						margin: 0 10px;
					}
				}
			}
		}
	}

	section#success-more-body
	{
		padding-top: 3em;
		padding-bottom: 3em;

		h2 { font-size: 2.5em; font-weight: normal; line-height: 1.25em; }
		h3 { font-size: 1.75em; font-weight: normal; margin-top: 1em; }

		#more-form-container
		{
			input[type="text"],
			input[type="url"],
			input[type="email"]
			{
				font-size: 0.875em;
				min-height: 2.75em;
				padding-left: 20px;
				padding-right: 20px;
				width: 100%;

				&.parsley-error { border: 1px solid #990000; }
				&.parsley-success { border: 1px solid #009900; }
			}

			form { margin-top: 2em; }

			label { display: block; padding-top: 1.5em; font-weight: bold; font-size: 0.875em;  }

			select 
			{
				color: @dark;
				font-size: 0.875em;
				outline: none;
				padding: 10px;
				width: 100%;
			}

			textarea
			{
				min-height: 9.5em;
				max-height: 15em;
				padding: 0.675em 20px;
				resize: vertical;
				width: 100%;
			}

			.parsley-error-list 
			{ 
				font-size: 0.875em; 
				font-weight: bold; 

				li { color: #990000; margin-left: 0; }
			}

			#form-buttons { padding-top: 1em; padding-right: 10px; }

			#reset-button { margin-right: 10px; margin-bottom: 3em;}

			#connect-buttons
			{
				margin: 0 auto;
				width: 375px;

				.button-container 
				{
					float: left;
					margin: 0 10px;
				}
			}

			.cta-block { margin-top: 0.5em; margin-bottom: 1.5em; text-align: center; }
		}
	}

	section#contact-body 
	{
		padding-top: 3em;
		padding-bottom: 3em;

		h2 { font-size: 2.5em; font-weight: normal; line-height: 1.25em; }

		.linebreak
		{
			border-top: 1px solid #EDEDED;
			margin-top: 2em; 
			padding-top: 1em;
		}

		#faddress
		{		
			padding-top: 2.5em; 
			padding-left: 1em;
			margin: 4em 0 0 1em;
			
			#address
			{
				padding-right: 1em;
				width:265px;
				float:left;
				display:inline-block;
				text-align: right;
				span { color: #7F8C8C; font-size: 0.85em; }
			}
			
			#map-canvas 
			{
				margin-top: 1em;
				margin-left:10px;
				
				-webkit-border-radius: 20px;
				-moz-border-radius: 20px;
				border-radius: 20px;
			}
		}

		#contact-form-container
		{
			h5 { margin: 0.5em 0; }

			input[type="text"],
			input[type="url"],
			input[type="email"]
			{
				font-size: 0.875em;
				min-height: 2.75em;
				padding-left: 20px;
				padding-right: 20px;
				width: 100%;

				&.parsley-error { border: 1px solid #990000; }
				&.parsley-success { border: 1px solid #009900; }
			}

			label { display: block; padding-top: 1.5em; font-size: 0.875em;  }

			select 
			{
				color: @dark;
				font-size: 0.875em;
				outline: none;
				padding: 10px;
				width: 100%;
			}

			textarea
			{
				min-height: 9.5em;
				max-height: 15em;
				padding: 0.675em 20px;
				resize: vertical;
				width: 100%;
			}

			.parsley-error-list 
			{ 
				font-size: 0.875em; 
				font-weight: bold; 

				li { color: #990000; margin-left: 0; }
			}

			#form-buttons { padding-top: 1em; padding-right: 10px; }

			#reset-button { margin-right: 10px; }
		}

		#sidebar 
		{ 
			padding-left: 20px;

			h4 { color: @cta; font-size: 0.875em; font-weight: normal; }
			ul 
			{				
				li 
				{ 
					margin-left: 0; 
					margin-bottom: 0.5em;
					
					a { color: @dark; }
					i { width: 18px; display: inline-block; }
				}
			}

			.module
			{
				border-bottom: 1px solid #ddd;
				border-top: 1px solid @white;
				font-size: 0.875em;
				padding-top: 1.5em;

				&:last-child { border-bottom: none; }
			}
		}
	}
}

#free-trial-form-test3
{
	text-align: center;
	
	.uploadb
	{ font-size: 15px; }
	
	.base-color
	{ color: @base; }
	
	#main-container
	{ padding-bottom: 2em; text-align: center; width: 920px; padding-left: 8em; }
	
	.or
	{ 
		width: 2em; 
		padding-right: 3em;
		float: left;
		padding-top: 3em;
		font-weight:bold;
	}

	.box
	{ width: 17.5em; text-align: center; }
	
	#files
	{ position:fixed;top:-100px; }
	
	.file
	{
		padding-top: 1.5em;
		padding-bottom: 1.5em;
	}
	
	#content
	{
		margin-top: 1em;
		text-align: justify;
	}
		
	#button { padding-top: 0.5em; display: none; }
	
	#loadingmessage { display: none; }
	
	#info 
	{ 
		display: none;
		padding-top: 1em; padding-bottom: 1em;		
		margin: 2em 0 1.5em 6em; 
		width: 800px;
		background: #fbfbfa;
	}

	.row
	{
		padding-right: 2em;
	}
	
	#msgconfirm { padding-top: 2em; }
}

.fileupload
{
	padding-top: 0.40em; padding-bottom: 1em;

	#upload-file
	{
		border : solid 0px #000000;
		border-radius : 3px;
		moz-border-radius : 3px;
		font-size : 12px;
		color : #ffffff;
		padding : 3px 5px;
		background : #5f6166;
		background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5f6166), color-stop(100%,#00060a));
		background : -moz-linear-gradient(top, #5f6166 0%, #00060a 100%);
		background : -webkit-linear-gradient(top, #5f6166 0%, #00060a 100%);
		background : -o-linear-gradient(top, #5f6166 0%, #00060a 100%);
		background : -ms-linear-gradient(top, #5f6166 0%, #00060a 100%);
		background : linear-gradient(top, #5f6166 0%, #00060a 100%);
		filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#5f6166', endColorstr='#00060a',GradientType=0 );
	
	}
	
	#loadingmessage
	{ display:none; margin-top: 1.5em; color: #999; font-size : 12px; font-weight: bold; }
	
	#msgconfirm
	{ color: #FF0000; margin-top: 1em; }
}

.button
{
	background: @light;
	border: none;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	color: @dark;
	cursor: pointer;
	display: inline-block;
	font-family: @heading-font;
	font-size: 1.125em;
	font-weight: 700;
	padding: 0.5em 30px;
	transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	text-decoration: none;

	.ease;

	&.small
	{
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		font-size: 0.875em;
		font-weight: 400;
		padding: 0.5em 20px;
	}

	&.large
	{
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		font-size: 1.25em;
		padding: 0.75em 40px;
	}

	&:hover, &:focus
	{
		background: none repeat scroll 0 0 @dark;
		color: @light;
		text-decoration: none;
	}

	&.light
	{
		background: none repeat scroll 0 0 @grey;
		&:hover, &:focus
		{
			background: none repeat scroll 0 0 @dark;
			color: @grey;
		}
	}

	&.dark
	{
		background: none repeat scroll 0 0 @dark;
		&:hover, &:focus
		{
			background: none repeat scroll 0 0 @light;
			color: @dark;
		}
	}

	&.cta
	{
		background: none repeat scroll 0 0 @cta;
		color: @white !important;
		&:hover, &:focus
		{
			background: none repeat scroll 0 0 @dark;
			color: @light;
		}
	}
	
	&.green
	{
		background: none repeat scroll 0 0 #009900;
		color: @white !important;
		&:hover, &:focus
		{
			background: none repeat scroll 0 0 @dark;
			color: @light;
		}
	}

	
	&.secondary
	{
		background: none repeat scroll 0 0 @secondary;
		color: @white;
		&:hover, &:focus
		{
			background: none repeat scroll 0 0 @dark;
			color: @light;
		}
	}

	&.block { width: 100%; }

	&.center { text-align: center; }
}

/* Mobile site overrides */
@media only screen and (min-width: 760px) and (max-width: 980px) {
	#header {	
		padding-bottom: 2.5em; 

		#logo {
			text-align: center;
			margin-top: 1.25em;
			margin-bottom: 9px;
		}
		nav { 
			padding-top: 2.188em; 
			#top-nav {				
				width: 282px;
				margin: auto;
				
				#menu {
					margin: 0 auto;
					margin-top: 2em !important;;
					float: none;
					
					li {
						display: inline;
						float: left;
						margin: 0 0.469em !important;
						
						a { 
							font-size: 0.938em;
							letter-spacing: 0px;
						}
					}
				}
			}			
			#login { display: none; }
		}
	}
	#mini-header {
		> div { margin-left: 0.625em; }
	}
	#breadcrumbs {
		nav { margin-left: 0.625em; }
	}	
	.body { 
		clear: both; 
		
		#home-feature { 
			min-height: 45em !important; 
			
			#paperless-right { display: none; }
			#sign-up-input, #sign-up-button { float: none !important; display: inline-block !important	; }
		}
		#partners {
			> div {
				text-align: center;
			}
			.company { 
				float: none !important;
				display: inline-block !important;
			}
		}
		#free-trial-form-test3
		{
			h4 { display: none; }
			#main-container
			{ 
				width: 100% !important; padding-left: 0; text-align: center !important; float: right;
				.or { display: none; }
				.box { width: 90% !important;  }
			}
		}
		#business-mobile {
			#mobile-features {
				.feature {
					background: none !important;
				}
			}
		}
		#form-features 
		{
			#col-1, #col-3 {
				display: none;
			}
		}
		#web-portal {
			#portal {
				height: auto !important;
				padding-top: 14.125em;
				background: url(../images/mgtPortal_mobile.png) no-repeat center 1.875em !important;
				
				> .features {
					> div {
						margin: auto;
						margin-bottom: 1.438em;
						width: 300px !important;
						position: initial !important;
						top: 0 !important;
						left: 0 !important;
						right: 0 !important;
						bottom: 0 !important;
						
						.icon {
							display: inline;
							float: none !important;
						}
						
						h5 {
							text-align: center !important;
							font-size: 1.125em;
							font-weight: bold;
						}
						.text { width: 100% !important; text-align: center !important; }
					}
				}
			}
		}		
	}
	#features-overview-body, #features-app-body, #features-portal-body, #features-reporting-body, #features-feature-list-body, #features-scheduler-body, #features-form-builder, #features-resources-library-body, #features-photo-streaming-body, #features-email-tracking-body, #features-advanced-drawing-body, #features-card-payments-body, #features-convert-to-job-body, #features-workflows-events-body {
		padding-left: 0.625em;
		padding-right: 0.625em;
		
		nav#features-menu {
			ul > li {
				display: none;
				margin-right: 0 !important;
			}
		}		
		.omega, h2, #main-image {
			text-align: center !important;
		}
	}	
	#contact-body {
		padding-left: 0.625em;
		padding-right: 0.625em;

		#contact-form {
			.dropdown { margin: 0 !important; }
			.labels {
				> div:nth-child(even) { margin-left: 0 !important; }
			}
			#form-buttons { text-align: center !important; padding-right: 0 !important; }
		}	
		#sidebar { 
			margin: 0 !important; 
			
			ul > li, h4 { text-align: center; }
		}
	}
	#tour-body, #tour-imagine-body {
		padding-left: 0.625em;
		padding-right: 0.625em;
		
		nav#features-menu {
			ul > li {
				display: none;
				margin-right: 0 !important;
			}
		}
		
	}	
	#features-integrations-body
	{
		padding-top: 1em;
		width: 100% !important; height: 185em;  
		#free-trial-form-test3 { display: none; }
		
	}
	#integrations-xero-body
	{
		#partners
		{ 
			width: 100% !important; 
			img { width: 90% !important; height: auto; }
		}
		vid { width: 90% !important; height: auto; }
		
	}
	#industry-app-catalog-body, #article-body, #archive-body {
		#blog-sidebar {
			h4 { text-align: center; }
			#socialmedia {
				width: 300px;
				margin: auto;
			}
			#tweets, #facebook {
				iframe {
					width: 100% !important;					
				}
			}
		}
	}
	#blog-body, #article-body, #archive-body {
		padding-left: 0.625em;
		padding-right: 0.625em;
	
		#blog-sidebar {
			h4 { text-align: center; }
			#socialmedia {
				width: 300px;
				margin: auto;
			}
			#tweets, #facebook {
				iframe {
					width: 100% !important;					
				}
			}
		}
	}
	#archive-body {
		#archive-index {
			.archive-item {
				.entry {
					text-align: center;
					margin-bottom: 1.5em;
				}
			}
		}
	}
	footer {
		#about {
			padding: 0 3.125em;
			h1, p {
				text-align: center; 
			}
		}
		#links {
			> ul {
				> li, #support { display: none;	}
				> li:last-child { 
					display: list-item; 
					
					#contact-details {
						text-align: center; 
						
						#social {
							li {
								margin: 0.625em auto;
								width: 100px;
								text-align: left;
							}
						}
					}
				}
			}
		}
	}
	#copyright {
		text-align: center !important;
		
		div { text-align: center !important; }
	}
}

@media only screen and (max-width: 960px) {		
	#mini-header {
		clear: both;
		
		h1 { 
			margin-bottom: 0 !important; 
		}
	}
	#blogindex {
		margin: 25px 0.625em 0 0.625em;
		
		.blogItem {
			margin-bottom: 0.938em !important;
			
			.thumb { float: left; }			
			h3 { letter-spacing: -1px; }
		}
	}
	
	#blogEntry {
		margin: 0 0.625em 25px 0.625em !important;
		
		h3 { display: none; }
		.blogDetails { margin-top: 1.25em !important; }
	}
	
	#contact-body {
		padding-left: 0.625em;
		padding-right: 0.625em;

		#contact-form {
			.dropdown { margin: 0 !important; }
			.labels {
				> div:nth-child(even) { margin-left: 0 !important; }
			}
			.fileupload { display: none; }
			#form-buttons { text-align: center !important; padding-right: 0 !important; }
		}	
		#sidebar { 
			margin: 0 !important; 
			
			ul > li, h4 { text-align: center; }
		}
	}
	
	
	#free-trial-form-test3
	{
		h4 { display: none; }
		#main-container
		{ 
			width: 100% !important; padding-left: 0; text-align: center !important; float: right;
			.or { display: none; }
			.box { width: 90% !important;  }
		}
	}
	
	#sidebar {
		margin: 0 0.625em;
		
		#socialmedia {
			margin: auto;
			width: 300px;
		}
		#searchForm {
			width: 297px;
			margin: 0 auto 47px auto;
		}
		#categories 
		{
			text-align: center !important;
		}
	}
}

@media only screen and (min-width: 201px) and (max-width: 760px) 
{
	#header 
	{
		padding-bottom: 2.5em;
		
		#logo { text-align: center; padding-top: 0.125em; width: 100%; }

		#top-nav 
		{
			padding-top: 1em;
			padding-bottom: 2em;
			position: relative;
			text-align: left;
			width: 264px;
			margin: auto;

			ul { float: none; display: block; }

			#login { display: none; padding-top: 0.125em; }

			#menu 
			{ 
				margin: 0.5em 0 !important;

				li 
				{
					float: left;
					font-size: 1.25em;
					margin: 0 0.469em;
					position: relative;

					a 
					{ 
						font-size: 0.875em;

						&.active 
						{ 
							color: @cta; 

							&:active, &:hover, &:focus { color: @cta; }
						} 
					}
					&:last-child { display: none; }
				}
			}
		}
	}

	section
	{
		&#home-body 
		{
			clear: both;

			section
			{
				&#partners { display: none; }

				&#quotes
				{ display: none; }
				
				&#quote
				{
					blockquote
					{
						width: 90%;
					}
				}
				
				&#reports-module
				{
					h3 { font-size: 200%; }	
					h4 { display: none; }		
					width: auto !important; 
					img { width: 100% !important; height: auto; }
				}

				&#home-feature
				{
					#paperless-left
					{
						h2 { display: none; }

						#sign-up
						{
							#sign-up-button { clear: both; float: none !important; margin: auto; padding-top: 1em; }
							#sign-up-input { margin: 0 auto; float: none !important; width: 80% !important; }
						} 

						&#quote
						{
							blockquote
							{
								width: 90%;
							}
						}
					}
					#paperless-right { display: none; }
				}

				&#business-mobile
				{
					h3, h4 { display: none; }

					#mobile-features 
					{
						padding-top: 0;

						.feature
						{
							margin-bottom: 3em;
							&.arrow { background: none !important; }
						}
					}

					.text
					{
						width: 80%;
						margin: 0 auto;
					}
				}

				&#mobile-forms
				{
					h3, h4 { display: none; }
					#col-1, #col-3 { display: none; }

					#app-store-buttons
					{
						padding-top: 0;
						a { display: block; padding-top: 0.5em; }
					}
					#form-features { padding-top: 0; }
				}

				&#cloud-integration	
				{
					h4 
					{ 
						display: none; 
					}

					#map { display: none; }
				}

				&#web-portal
				{
					h3 { font-size: 200%; }	
					h4 { display: none; }
					
					#portal
					{
						height: auto !important;
						padding-top: 14.125em;
						background: url(../images/mgtPortal_mobile.png) no-repeat center 1.875em !important;
						
						> .features {
							> div {
								margin: auto;
								margin-bottom: 1.438em;
								width: 300px !important;
								position: initial !important;
								top: 0 !important;
								left: 0 !important;
								right: 0 !important;
								bottom: 0 !important;
								
								.icon {
									display: inline;
									float: none !important;
								}
								
								h5 {
									text-align: center !important;
									font-size: 1.125em;
									font-weight: bold;
								}
								.text { width: 90% !important; text-align: center !important; }
							}
						}						
					}
					
				}

				&#testimonials
				{
					h3, h4 { display: none; }

					#testimonial-list 
					{ 
						padding-top: 0; 
						.testimonial 
						{ 
							padding-top: 2em; 

							&:nth-child(1) { padding-top: 0; }
							&:nth-child(2), &:nth-child(3) { display: none; }
						}
					}
				}
			}
		}
	}
	
	#free-trial-form-test3
	{
		width: 95% !important; height: 450px; 
		h4 { display: none; }
		#main-container
		{ 
			width: 100% !important; padding-left: 0; text-align: center !important; float: right;
			.or { display: none; }
			.box { width: 90% !important;  }
			
		}
		#content { display: none; } 
		
	}
	
	#features-overview-body, #features-app-body, #features-portal-body, #features-reporting-body, #features-scheduler-body, #features-feature-list-body, #features-feature-list-body , #features-form-builder, #features-resources-library-body, #features-photo-streaming-body, #features-email-tracking-body, #features-advanced-drawing-body, #features-card-payments-body, #features-convert-to-job-body, #features-workflows-events-body, #features-integrations-body {
		nav#features-menu {
			ul > li {
				display: none;
				margin-right: 0 !important;
			}
		}		
		.omega, h2 {
			text-align: center !important;
		}		
		#main-image img {
			width: 100%; 
			height: auto;
		}
		img {
			width: 100%; 
			height: auto;
		}
	}	
	#about-us-body { 
		img {
			width: auto;
		} 
	}
	#features-integrations-body
	{
		width: 100% !important; height: 185em; text-align: right; 
		.section { width: 100% !important; height: auto; border: 0px; }
		#partners
		{
			#box1, #box2 { width: 100% !important; padding-bottom: 2em; text-align: left; }
			img { width: 90% !important; height: auto; float: left; text-align: left; }
		}
	}
	#integrations-xero-body
	{
		h4 { display: none; }
		#partners
		{ 
			width: 100% !important; 
			img { display: none; }
		}
		#vid 
		{ 
			img { width: auto; }
			iframe { text-align: center; width: 100% !important; height: auto; } 
		}
		#app-store-buttons, #main-container
		{ position: relative; left: -5em; }
	}
	#contact-body {
		padding: 0 !important;
		
		#contact-form {
			.dropdown { margin: 0 !important; }
			.labels > div:nth-child(even) { margin-left: 0 !important; }
			.textarea { margin-right: 0 !important; }
			.fileupload { display: none; }
			#form-buttons { text-align: center !important; padding-right: 0 !important; }
		}
		#faddress
		{
			#address { width: 100% !important; }
			#map-canvas { width: 90% !important; height: auto; }
		}
		#sidebar { 			
			ul > li, h4 { text-align: center; }
		}
	}
	.fileupload{ display: none; }
	#tour-body, #tour-imagine-body {
		padding-left: 0.625em;
		padding-right: 0.625em;
		
		nav#features-menu {
			ul > li {
				display: none;
				margin-right: 0 !important;
			}
		}
		
	}
	#pricing-body
	{
		width: 90%;
		#price-container
		{
			width: 100% !important; 
			.CSSTableGenerator
			{ 
				width: 90% !important; 
				margin-left: 1em !important; margin-top: 1em !important; padding-right:0px; 
				box-shadow: 0 0 0 #888888 !important;
			}
		}
		 #free-trial-form-test3
		{
			width: 95% !important; height: 500px; 
			h4 { display: none; }
			#main-container
			{ 
				width: 100% !important; padding-right: 3em; text-align: left !important; 
				.or { display: none; }
				.box { width: 10em !important; padding-right: 5em; text-align: center !important; position: relative; left: -5em; }
				
				
			}
			#content { display: none; } 
			
		}
	}
	#blog-body, #article-body, #archive-body {
		#blog-sidebar {
			h4 { text-align: center; }
			#socialmedia {
				width: 300px;
				margin: auto;
			}
			#tweets, #facebook {
				iframe {
					width: 100% !important;					
				}
			}
		}
	}
	#socialmedia 
	{ 
		width: 100% !important; 
		social-icon { width: 80%; }
	}
	#archive-body {
		#archive-index {
			.archive-item {
				.entry {
					text-align: center;
					margin-bottom: 1.5em;
				}
			}
		}
	}

	footer 	
	{ 
		text-align: center;
		
		#about 
		{ 
			font-size: 0.913em; 
			margin: 0 auto; 
			width: 80%; 

			#sign-up { display: none; }
		}
		#email, #get-started { display: none; } 

		#links
		{
			ul
			{
				li 
				{ 
					display: none; 
					
					&#contact
					{
						display: block;

						#support { display: none; }
						#contact-details ul li { display: block; }
					}
				}
			}
		}

		#social
		{
			margin: 0 auto;
			text-align: left;
			width: 110px;
			
			img {
					width: auto;
				}

			li { 
				padding-bottom: 0.5em; 

				&:last-child { display: block; padding-bottom: 0; }
			}
		}
	}
	#copyright {
		text-align: center !important;
		
		div { text-align: center !important; }
	}	
}