html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important}

/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
	color: #222;
	line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
	resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body.logged-in{margin-top:32px;}


/*================== UNIVERSAL FONT STUFF ======================*/

html {
	font-size: 14px;
	color: #0b3642;
	font-family: "pragmatica", helvetica, arial, sans-serif;
	}
@media screen and (min-width: 1600px) {
	html {
		font-size: 18px;
	} 
}

strong {font-weight: 700;}
.strong {font-weight: 700;}

.center {text-align: center;}
.center div {margin: 0 auto;}
.trialcenter {margin: 180px;}

.white {color: #ffffff;}
.green {color: #19953f;}
.blue {color: #25acd2;}
.gold {color: #b7985b;}
.gray {color: #eaeaea;}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  margin: 0;
  line-height: 1.3em;}

h1 {font-size: 3.75em; font-family: "pragmatica", helvetica, arial, sans-serif; font-weight: 300; color: #19953f; margin-bottom: 30px;}
h2 {font-size: 2.5em; font-family: "pragmatica", helvetica, arial, sans-serif; font-weight: 400; color: #19953f;}
h3 {font-size: 2.25em; font-family: "pragmatica-condensed", helvetica, arial, sans-serif; font-weight: 400; color: #ffffff;}
h4 {font-size: 2em; font-family: "pragmatica-condensed", helvetica, arial, sans-serif; font-weight: 400;}
h5 {font-size: 1.45em; font-family: "pragmatica-condensed", helvetica, arial, sans-serif; font-weight: 400; margin-bottom: .6em;}
h6 {font-size: 2.25em; font-family: "pragmatica-condensed", helvetica, arial, sans-serif; font-weight: 400; color: #2f3230;}


p {margin: 0 0 1em 0; line-height: 1.6em;}

a:link, a:visited {text-decoration: none;color: #19953f;}	
a:hover, a:active {text-decoration: underline;}	   

.fineprint {
  font-size: .75em;
  color: #eaeaea;}
  
.fineprint a:link {
	color: #eaeaea;
}  


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


a.tos {color: #0b3642; text-decoration: underline;}


iframe#tickers-frame {
    width: 1px; min-width: 100%;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 3px solid #19953f;
    margin: 2em 0;
    padding: 0;
}

/*================== #SPLASH STUFF ======================*/


img#logo {
	max-width: 295px;
	}
@media screen and (min-width: 680px) {
	img#logo {
		max-width: 100%;
		}	}



#splash {
	overflow: auto;
	min-height: 80vh;
	background-color: #f7f7f7;
	background-image: url('../img/compSS-hero.png');
	background-position: center top;
	background-size: cover;
	padding-bottom: 24px;
	}
	
	#splash2 {
	overflow: auto;
	background-color: #f7f7f7;
	background-image: url('../img/splash2.png');
	background-position: center bottom;
	background-size: cover;
	padding-bottom: 50px;
	}

#splash-ty {
	overflow: auto;
	min-height: 80vh;
	background-color: #f7f7f7;
	background-image: url('../img/compSS-hero.png');
	background-position: center top;
	background-size: cover;
	}



#header {
	width: 100%;
	padding: 18px 0;
	background: #2d3035;
	overflow: auto;
	}


#intro {
	margin-top: 5vh;
	}
@media screen and (min-width: 1000px) {
	#intro {
		margin-top: 10vh;
		}	}
	@media screen and (min-width: 1600px) {
		#intro {
			margin-top: 10vh;
			}	}

#thankyou p{
	font-size: 1.175em;
	}
	

#thankyou {
	margin-top: 10vh;
	}  
	@media screen and (min-width: 1000px) {
		#thankyou {
			margin-top: 20vh;
			}	}
			
#thankyou2 {
	margin-top: 5vh;
	}  
	@media screen and (min-width: 1000px) {
		#thankyou2 {
			margin-top: 20vh;
			}	}

 
#contactinfo {
	border-top: 3px solid #25acd2;
	margin-top: 2vh;
	padding-top: 2vh;
	}
@media screen and (min-width: 680px) {
	#contactinfo {
		margin-top: 7vh;
		}	}
	@media screen and (min-width: 1000px) {
		#contactinfo {
			margin-top: 25vh;
			}	}
		@media screen and (min-width: 1600px) {
			#contactinfo {
				margin-top: 30vh;
				}	}

.white a{
	color:#fff;
	text-decoration: underline;
}
 
.bigger {
	font-size: 1.500em;
}

/*============== SALESFORCE STUFF =============*/

.salesforce {
	margin-top: 20px;
	font-size: 1.25em;
	}

h4.xspacing {
	margin-bottom: 1em;}
@media screen and (min-width: 680px) {
	h4.xspacing {
		margin-bottom: 2em;
		}	}

.offering {
	padding: 12px 0 18px 0;
	}
@media screen and (min-width: 1000px) {
	.offering {
		padding: 60px 0 36px 0;
		}	}

.blue-top {
	border-top: 3px solid #20a9ce;
	padding-top: 24px;
	}

#form-container {
    background-color: #fff;
    border: 1px solid #2f3230;
    width: 100%;
    padding: 18px 0;
    margin: 0px 0 50px 0;
}

#form-wrap {
    width: 90%;
    margin: 16px 5%;
}

#bottom-container {
	background-color: rgba(37,55,69,0.80);
	width: 100%;
	padding: 55px 0px 55px 0px;
	margin: 0 0 0 0;
	}

p.disclosure {
	font-size: 11px;
	color: #484848;
	font-weight: normal;
	margin-top: 0;
	}

.field-wrap {
	padding: 6px 0px;
	}

label {
	font-size: 1em;
	width: 100%;
	margin-bottom: 6px;
	}

input[type='text'], input[type='email'], textarea, select {
	background: #ffffff;
	width: 100%;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
	-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
	border: none;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.6) inset, 0px 1px 1px rgba(255,255,255,0.3);
	padding: 12px 9px;
	font-size: 1em;
	}

input.form-button {
	width: 100%;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
	-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
	border: none;
	background: #ea9816;
	color: #ffffff;
	font-size: 1.5em;
	font-weight: bold;
	text-shadow: 0px -1px 1px rgba(0,0,0,0.6);
	padding: 9px 0px 9px;
	cursor: pointer;
	}

.error {
	font-size: 14px;
	margin: 3px 0px 0px;
	color: #d90000;
	}

.Accept_Terms span.description {
    display: block;
    line-height: 1.5em;
    font-size: 10px;
    margin-left: 3em;
    color: #616260 !important;
    font-weight: normal;
}


/*================== #ROW STUFF ======================*/


#row1 {
	color: #eaeaea;
	background-color: #253745;
	overflow: auto;
	padding: 6vh 0;
	font-size: .95em;
	}

#row1 p {
	padding-top: 1em;
	padding-bottom: 1em;
	}

#row1 h2 {
	padding-bottom: 1em;
	}
	
#row1new {
	color: #1a1d1d;
	background-color: #f4f4f4;
	overflow: auto;
	padding: 6vh 0;
	font-size: .95em;
	}

#row1new p {
	padding-top: 1em;
	padding-bottom: 1em;
	}

#row1new h2 {
	padding-bottom: 1em;
	}

ul {
	list-style-image: url("../img/bullet_compss.png");
	line-height: 24px;
	padding-left: 25px;
	}

ul li {
	margin-bottom: 19px;
	font-size: 16px;
	}

ul.no_bullet {
	list-style: none !important;
	padding: 0;
	margin: 0;
	}
@media screen and (min-width: 680px) {
	ul.no_bullet {
		padding: 5vh 0;
		}	}




ul.no_bullet li {
	overflow: auto;
	padding-left: 75px;
	padding-top: 3px;
	margin-bottom: 2vh;
	box-sizing: border-box;
	}
@media screen and (min-width: 680px) {
	ul.no_bullet li {
		min-height: 200px;
		}	}


li.customization {background: url("../img/customization.png") no-repeat top left; background-size: 46px 62px;}
li.compliance {background: url("../img/compliance.png") no-repeat top left; background-size: 54px 57px;}
li.customer {background: url("../img/cust-serv.png") no-repeat top left; background-size: 54px 57px;}
li.consensus {background: url("../img/consensus.png") no-repeat top left; background-size: 46px 43px;}
li.outsourced {background: url("../img/outsourced.png") no-repeat top left; background-size: 58px 44px;}
li.quality {background: url("../img/quality.png") no-repeat top left; background-size: 47px 47px;}




#row2 {
	clear: both;
	overflow: auto;
	background: #eaeaea;
	background-image: url('../img/CompSS_spread.jpg');
	padding: 60px 0 30px 0;
	font-size: .95em;
	}


#row3 {
	clear: both;
	overflow: auto;
	background: #fff;
	padding: 3vh 0;
	font-size: 16px;
	}

#quality {
	margin-bottom: 9vh;
	}
@media screen and (min-width: 680px) {
	#quality {
		margin-bottom: 0;
		}	}
	
	
#samples{
		display: block !important;
	    padding-top: 2em;
	    display: flex;
	    flex-direction: column;
}


#samples-large {
	display:none;
	
}

@media screen and (min-width: 1000px) {
	
	#samples-large {
		display: block !important;
		border-top: 3px solid #19953f;
	    margin: 2em 0;
	    padding-top: 2em;
	    display: flex;
	    flex-direction: column;
}
}

#samples-small {
		border-top: 3px solid #19953f !important;
	    margin: 2em 0;
	    padding-top: 2em;
	    display: flex;
	    flex-direction: column;
	
}

@media screen and (min-width: 1000px) {
	
	#samples-small {
		display: none !important;
}

}

/*================== #BOTTOM STUFF ======================*/

#bottom {
	clear: both;
	overflow: auto;
	background: #f7f5f0;
	background-image: url('../img/CompSS_bottom-bg.jpg');
	background-position: center top;
	background-size: cover;
	}


#bottom h4{
	padding-top: 2vh;
	}
@media screen and (min-width: 1600px) {
	#bottom h4 {
		padding-top: 5vh;
		}	}

a.button:link, a.button:visited, a.button:hover, a.button:active {
	display: block;
	text-align: center;
	width: 100%;
	background: #19953f;
	border-radius: 3px;
	color: #ffffff;
	border-bottom: 3px solid #0e5524;
	font-weight: 400;
	text-shadow: 0px -1px 1px rgba(0,0,0,0.6);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
    padding: .7em 0;
    font-size: 1.125em;
	}
	
a.button-white:link, a.button-white:visited, a.button-white:hover, a.button-white:active {
	display: block;
	text-align: center;
	width: 100%;
	background: #19953f;
	border-radius: 3px;
	color: #ffffff;
	border-bottom: 3px solid #0e5524;
	font-weight: 400;
	text-shadow: 0px -1px 1px rgba(0,0,0,0.6);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
    padding: .7em 0;
    font-size: 1.125em;
	}

a.button2:link, a.button2:visited, a.button2:hover, a.button2:active {
    display: block;
    text-align: center;
    width: 100%;
    background: #fff;
    border: 2px solid #2d3035;
    border-radius: 10px;
    color: #19953f;
    font-weight: 400;
    text-decoration: none;
    padding: 15px 0px 15px 0px;
    font-size: 1.325em;
    margin-top: 25px;
    margin-bottom: 75px;
}

.button-small {
	font-size: 80%;
	font-weight: 100;
	color: #787878;
	}

#bottom-wrap {
	width: 85%;
	}

#bottom-wrap p {
	font-size: 1.33em;
	}




/*================== #FOOTER STUFF =======================*/

  #footer {
  clear: both;
  overflow: auto;
  background: #2d3035;
  padding-top: 12px;}

#footer p {
  font-size: .75em;}

#footer a{
  text-decoration: underline;
  color: #fff;
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
	display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
	visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *	  `contenteditable` attribute is included anywhere else in the document.
 *	  Otherwise it causes space to appear at the top and bottom of elements
 *	  that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *	  `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.clearfix:after {
	clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
	/* Style adjustments for viewports that meet the condition */
}

@media print,
	   (-webkit-min-device-pixel-ratio: 1.25),
	   (min-resolution: 1.25dppx),
	   (min-resolution: 120dpi) {
	/* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
	*,
	*:before,
	*:after,
	*:first-letter,
	*:first-line {
		background: transparent !important;
		color: #000 !important; /* Black prints faster:
								   http://www.sanbeiji.com/archives/953 */
		box-shadow: none !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	/*
	 * Don't show links that are fragment identifiers,
	 * or use the `javascript:` pseudo protocol
	 */

	a[href^="#"]:after,
	a[href^="javascript:"]:after {
		content: "";
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	/*
	 * Printing Tables:
	 * http://css-discuss.incutio.com/wiki/Printing_Tables
	 */

	thead {
		display: table-header-group;
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}