/*
 * 
 * global element styles
 * header styles
 * lists
 * global sections (header, banner, cta, etc)
 * homepage
 * about
 * products
 * who we serve
 * benefits
 * success stories
 * forms
 * 
 * helpers
 * media queries
 * 
 */




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

html,
button,
input,
select,
textarea {
    color: #636363;
}

html,
body {
    width: 100%;
    height: 100%;
}

html {
    font-size: 62.5%;
    /*background: #f5f5f5;*/
    /* hack for typekit on Mac */
    -webkit-font-smoothing: antialiased;
}

body {
	color: #353535; 
    font-family: "myriad-pro-n4", "myriad-pro", sans-serif;
    font-size: 16px;
	font-style: normal; 
	font-weight: 400; 
	line-height: 24px;
}

/* headers */
h1 {
	font-family: 'myriad-pro-n3', 'myriad-pro'; 
	font-weight: 300; 
	font-size: 44px; 
	font-style: normal; 
	color: #353535; 
	line-height: 58px; 
	margin: 0; 
	padding: 10px 0px 5px;
}

h2 {
	font-family: 'myriad-pro-n3', 'myriad-pro'; 
	font-weight: 300; 
	font-size: 30px; 
	font-style: normal; 
	color: #353535; 
	line-height: 41px; 
	margin: 0; 
	padding: 10px 0px 5px;
}

h3, 
.callout {
	font-family: 'myriad-pro-n4', 'myriad-pro'; 
	font-weight: 400; 
	font-size: 22px; 
	font-style: normal; 
	color: #353535; 
	line-height: 33px; 
	margin: 0; 
	padding: 10px 0px 5px;
}



h3 p {margin-bottom: 0px;}

a {text-decoration: none; color: #149095;}
/*a.standout {font-family: 'myriad-pro-n6', 'myriad-pro'; font-weight: 600; font-size: 18px;}*/
a:hover {text-decoration: underline}


/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    color:#fff;
    background: #00457C;
    text-shadow: none;
}

::selection {
    color:#fff;
    background: #00457C;
    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 images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

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

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

textarea {
    resize: vertical;
}



/*
 * global header styles
 */
#siteNav {margin-top: 0px;}

#site-header {
	padding-top: 15px;
	padding-bottom: 9px;
}
#site-header a:hover {text-decoration: none;}




#banner {background-color: #30b1b6;}
#banner, #banner h1 {
	color: #ffffff;
}


#main-conversion-wrapper {
	padding-top: 16px;
}
#main-conversion-button {
	float: right;
	width: auto;
	padding: 8px 18px 10px 18px;
	margin: 0;
	font-size: 18px;
	line-height: 21px;
	padding: 10px 12px 10px 12px;
}

#main-conversion-button:hover {
	background-color: #aa5555;
}

/*
.logo1 {font-family: 'granjon-n7', 'granjon'; font-weight: 700; font-size: 35px; font-style: normal; color: #24538a;}
.logo2 {font-family: 'myriad-pro-n3', 'myriad-pro'; font-weight: 300; font-size: 35px; font-style: normal; color: #6f6f6f;}
*/

.callout {line-height: 29px;}
.teaser {font-family: 'myriad-pro-n4', 'myriad-pro'; font-weight: 400; font-size: 18px; font-style: normal; color: #353535; line-height: 27px; margin: 0px 0px 0px 0px; padding: 10px 0px 5px 0px;}


/* skinning classes */
/** call-to-action (cta) background/foreground - light red / white */

.skin_cta1_bg { background-color: rgb(235, 91, 98); }
.skin_cta1_text { 
	color: rgb(255, 255, 255); 
	text-decoration: none;
}

	.skin_cta1:hover {
		background-color: rgb(195, 77, 83);
		color: rgb(255, 255, 255);
		text-decoration: none;
	}
	.skin_cta1_bg:hover { background-color: rgb(195, 77, 83); }
	.skin_cta1_text:hover { 
		color: rgb(255, 255, 255);
		text-decoration: none;
	}
.nav-back { margin: auto; }
.nav-back a:before, .nav-back a.skin_cta1:before { border-width: 0; display: none; }
.nav-back a.skin_cta1,
.nav-back a.skin_cta1:hover {
	background-color: transparent;
	padding: 0;
	text-decoration: none;
}
.nav-back a.skin_cta1:hover {
	color: rgb(20, 144, 149);
	text-decoration: underline;
}
	
/* progression buttons and indicators */
.contact-back {
    background-color: #f7f7f7;
}
.button,
.button:hover {
	background-color: #30b1b6;
}
.button { position: relative; }
.button-right:after,
.button-left:after,
.indicator:after {
    border-color: transparent transparent transparent #30b1b6;
    border-style: solid;
    border-width: 21px 0 21px 21px;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: -21px;
    top: 0;
    width: 0;
	-moz-transition: background .35s ease-in-out, border .35s ease-in-out;
	-webkit-transition: background .35s ease-in-out, border .35s ease-in-out;
	-o-transition: background .35s ease-in-out, border .35s ease-in-out;
	-ms-transition: background .35s ease-in-out, border .35s ease-in-out;
	transition: background .35s ease-in-out, border .35s ease-in-out;
}
.indicator:after {
	 border-color: transparent transparent transparent #30b1b6;
}
.button-left:after {
    border-color: transparent #30b1b6 transparent transparent;
    border-width: 21px 21px 21px 0;
    left: -21px;
}
.button-right:hover:after { border-color: transparent transparent transparent #30b1b6; }
.button-left:hover:after { border-color: transparent #30b1b6 transparent transparent; }

.translucent50 {background: url(/files/img/translucent-white-50.png);}

.panel_open, .panel_bevel, .panel_variable_bevel, .panel_repeat, .panel_variable_open, .panel_variable_close, .panel_close {background-color: #ffffff;}
.panel_bevel, .panel_variable_open, .panel_variable_bevel {padding-top: 10px;}
.panel_repeat, .panel_close, .panel_variable_close {padding-bottom: 10px;}

.panel_bevel, .panel_open {border-color: #e2e2e2; border-style: solid; border-width: 1px 1px 0px 1px;}
.panel_repeat, .panel_variable_open, .panel_variable_bevel, .panel_variable_close {border-color: #e2e2e2; border-style: solid; border-width: 0px 1px 0px 1px;}
.panel_close {border-color: #e2e2e2; border-style: solid; border-width: 0px 1px 1px 1px;}





/*  buttons */
.button, button[type="submit"] {
    border: 0 none;
    cursor: pointer;
    display: inline-block;
    font-size: 1.8rem;
    margin: 25px 0;
    text-decoration: none;
}
.button:hover, button[type="submit"]:hover {
    border: medium none;
}

.black-button, .red-button, .turquoise-button {
	display: inline-block;
	text-align: center;
	padding: 8px 0px 10px 0px;
	margin: 5px 0px 5px 0px;
	font-size: 20px;
	color: #ffffff;
}
.black-button:hover, .red-button:hover, .turquoise-button:hover {text-decoration: none;}

.black-button {background-color: #353535;}
.red-button {background-color: #fa3d2f;}
.turquoise-button {background-color: #30b1b6;}



/* lists */
.linklist {list-style-type: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
.linklist li {margin: 0px 0px 0px 0px; padding: 5px 0px 5px 0px; text-align: center;}

.lefty {float: left;}
.righty {float: right;}

/* homepage structure */
.container > .extended {margin: 0 auto; max-width: 1600px; overflow: hidden;}




/* products and subjects */
#to-all-products-fix {padding-top: 13px;}
#sidebar_products-by-subject {padding: 13px 10px 0px 10px; border-style: solid; border-width: 0px 1px 0px 0px; border-color: #dddddd; width: 85%;}
#sidebar_products-by-subject div:first-child {}
#sidebar_products-by-subject ul {list-style-type: none; padding-left: 0px;}
#sidebar_products-by-subject ul li {padding-top: 5px; padding-bottom: 5px;}
#sidebar_products-by-subject ul li a {color: #646464;}
#sidebar_products-by-subject h3 a {color: #353535;}

.video-inner {
    padding: 32px 10px;
}

/*
    ========================================
        ::Contact Page
    ========================================
*/

div.field input[type="text"], div.field input[type="email"], div.field input[type="tel"], textarea {
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.17) inset;*/
}

div.field {
	/*outline: 1px solid rgb(231, 231, 231);*/
}
div.field label.hasValue {
	opacity: 0.5;
}
div.field label.hasBlur {
    opacity: 0;
}
.no-opacity div.field label.hasBlur {
    display: none;
}
div.field label.valid {
	display: none;
}
div.field textarea {
	min-height: 200px;
}
div.field.radio {
	outline: none;
}

.form-intro {
    display: none;
}
.contact-panel {
    display: block;
}
.js .form-intro {
    display: block;
}
.js .contact-panel {
    display: none;
}
.js .radio-group div.radio label {
    left: 20px;
}
#contact .form-intro .button {
    float: left;
}

.contact-image {
	max-width: 100%;
}


.form-intro,
.contact-panel {
	/*transition: all 0.5s ease-in-out;*/
}

.contact-panel {
	margin-left: -100%;
}


#notFound h1 {
    color: rgb(99, 99, 99);
    font-family: "myriad-pro-n3","myriad-pro",sans-serif;
    font-size: 52px;
    font-style: normal;
    font-weight: 300;
    margin: 1.5em 0;
}


/* request information form */

/* typography changes */
#requestInformationForm .inner p {
	padding: 0;
	margin: 0 0 32px 0;
}
#requestInformationForm .form-intro .button {
	float: left;
	margin: 40px 25px 40px 0;
}


/*
#freeTrial .button:hover {
    background: none repeat scroll 0 0 rgb(135,38,99);
    border: medium none;
}
#freeTrial .button-right:hover:after {
    border-color: transparent transparent transparent rgb(135,38,99);
}
#freeTrial .button-left:hover:after {
    border-color: transparent rgb(135,38,99) transparent transparent;
}
*/

.panels {
	display: none;
	/*min-height: 300px;*/
	/* foundation overwrites */
	background: none;
	border: none;
	padding: 0;
}
	.inner-space {
		padding: 0 10px;
	}
	.panels.current {
		display: block;
	}

#contactUs .status .removed {
	display: none;
}
#contactUs .status .status-group {
}
	#contactUs .status .button-left {
		float: left;
	}
	#contactUs .status .button.disabled {
		background: rgb(137,137,137);
		border: none;
	}
	#contactUs .status .button-left.disabled:after {
	    border-color: transparent rgb(137,137,137) transparent transparent;
	    border-width: 21px 21px 21px 0;
	}
	#contactUs .status .button-right.disabled:after {
	    border-color: transparent transparent transparent rgb(137,137,137);
	    border-width: 21px 0 21px 21px;
	}
	#contactUs .status-group .note {
		clear: both;
		padding-top: 10px;
		text-align: right;
		font-size: 0.9em;
	}
		#contactUs .status-group .note.highlight {
			color: rgb(255, 46, 46);
		}
.progress {
	height: auto;
	margin-top: 20px;
	padding: 0;
	position: relative;
	width: 100%;
}
	.progress .indicator {
		position: relative;
		width: 0;
		height: 32px;
		line-height: 27px;
		padding: 3px;
		background: rgb(48, 177, 182);
		color: rgb(245,245,245);
		text-align: right;
		-moz-transition: width 0.5s ease-in-out;
		-webkit-transition: width 0.5s ease-in-out;
		-o-transition: width 0.5s ease-in-out;
		-ms-transition: width 0.5s ease-in-out;
		transition: width 0.5s ease-in-out;
	}

	.progress span {
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		line-height: 40px;
		color: rgb(223,223,223);
		font-size: 0.9em;
	}
.submitForm {
	float: right;
}



/* 'responsive' form fields */
.field-stack div.field {
	width: 100%;
}

/* IE fallback */
.lt-ie9 div.success-grid-img span {
	display: none;
}

.lt-ie9 .field-stack {
	display: block;
	position: relative;
	width: 100%;
}
	.lt-ie9 .field-stack div.field {
		display: block;
		width: 49%;
		margin-top: 40px;
		margin-right: 2%;
		float: left;
		clear: left;
	}

	.lt-ie9 .field-stack div.field.n2 {
		clear: none;
		margin-right: 0;
	}
	.lt-ie9 .field-stack div.radio,
	.lt-ie9 .field-stack div.checkbox, 
	.lt-ie9 .field-stack div.radio.n2,
	.lt-ie9 .field-stack div.checkbox.n2 {
		margin-top: 0;
	}
	.lt-ie9 .field-stack div.field:nth-of-type(2n) {
		margin-right: 0;
		clear: none;
	}
.lt-ie9 .sub-menu li {
	float: left;
}
.lt-ie9 .sub-menu {
	margin-top: 0;
}

@media screen and (max-width: 480px) {
	.field-stack div.field {
		width: 100%;
	} 
    .hide-controls {
        display: none;
    } 
}
@media screen and (min-width: 481px) {
	#contactPanel {
		position: absolute;
		top: -2.75em;
		right: 1em;
		width: auto;
		z-index: 1;
		box-shadow: 2px 2px 8px rgb(57,57,57);
	}
	.push-label .results.active {
		top: auto;
		right: 10px;
		width: auto;
		overflow: auto;
	}
	.field-stack div.field {
		width: 49%;
		margin-right: 2%;
		float: left;
		clear: left;
	}
	.field-stack div.field:nth-of-type(2),
	.field-stack div.field.single:nth-of-type(2),
	.field-stack div.field.n2 {
		/*margin-top: 32px;*/
		clear: none;
	}
	.field-stack div.radio:nth-of-type(2),
	.field-stack div.checkbox:nth-of-type(2),
	.field-stack div.radio.n2,
	.field-stack div.checkbox.n2 {
		margin-top: 0;
	}
	.field-stack div.field:nth-of-type(2n) {
		margin-right: 0;
		clear: none;
	}
	
	.field-stack div.field.suppress-margin {
		margin-top: 0;
	}
	.field-stack div.field.textarea textarea {
		height: 92px;
	}
	
}

/* form variance by breakpoint */
@media screen and (min-width: 481px) and (max-width: 719px) {
	div.field.multiline input[type=text] {
		height: 60px;
	}
	.push-label div.field.multiline label.hasValue {
		top: -65px;
	}	
	.push-label div.field.multiline.active {
		margin-top: 40px;
	}
}

#requestInformationForm {
	padding-top: 40px;
}


/* success stories */
#success-stories_ea .nav-back.active {
	display: block;
}



/* End Bill's (and others') "main-health" content */

/* Begin Bill's (and others') "responsive-health" content */

/* 6-col */
@media screen and (min-width: 321px) and (max-width: 480px) {

}

/* 9-col */
@media screen and (min-width: 481px) and (max-width: 720px) {

	.panel_variable_open, .panel_variable_bevel {border-width: 1px 1px 0px 1px}
	.panel_variable_close {border-width: 0px 1px 1px 1px}

}

/* 9-col, 12-col, 16-col */
@media only screen and (min-width: 481px) { /* 481 and over */
/*
	#main-conversion-button {
		float: right;
		width: auto;
		padding: 8px 18px 10px 18px;
		margin: 5px 0px 5px 0px;
	}
*/
}

/* 12-col, 16-col */
@media only screen and (min-width: 721px) { /* 721 and over */

	#siteNav {margin-top: 11px;}

	.panel_bevel, .panel_variable_bevel {
		background-image: url(/files/img/bg-panel-bevel.png); background-repeat: no-repeat; background-position: top right;
		background-color: transparent;
		border-color: #e2e2e2; border-style: solid; border-width: 0px 0px 0px 1px;
		/*padding-top: 15px;*/
	}
	.panel_repeat, .panel_variable_open, .panel_variable_close {
		background-image: url(/files/img/bg-panel-repeat.png); background-repeat: repeat-y; background-position: right;
		background-color: transparent;
		border-color: #e2e2e2; border-style: solid; border-width: 0px 0px 0px 1px;
	}
	.panel_close {
		background-image: url(/files/img/bg-panel-repeat.png); background-repeat: repeat-y; background-position: right;
		background-color: transparent;
		border-color: #e2e2e2; border-style: solid; border-width: 0px 0px 1px 1px;
	}
	.panel_variable_bevel {margin: 40px 0px 0px 0px;}
}

/* tablet size and under */
@media only screen and (max-width: 768px) {
	.hide_tablet { display: none; }
}

/* is the following closing-brace an error? -WME */
}

/* 12-col */
@media only screen and (min-width: 961px) {

}




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

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.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: h5bp.com/p
 */

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

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}


.clear {clear:both; margin: 0; padding:0; border:0; height:0 width:0;}
.cleared {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 */
}

/* video-api health specific tweaks */


.video-image-fluid {
	width: 80% !important;
}
.mini .video-image-fluid {
    margin: 6px 7px !important;
    width: 70% !important;
}
.button-cta { text-decoration: none !important; }