@charset "UTF-8";
/* Swyft - By LightCMS */

/* Fonts
------------------------------------------------------------*/
/*original - @import url(https://fonts.googleapis.com/css?family=Kaushan+Script|Oxygen:400,700,300);
Note: Removed to add Proxima Nova from 'Hitch' template*/

/* PROXIMA NOVA FONT
------------------------------------------------------------ */

@font-face {
    font-family: 'Proxima Nova';
    src: url('fonts/proxima-nova-webfont.eot');
    src: url('fonts/proxima-nova-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/proxima-nova-webfont.woff') format('woff'),
        url('fonts/proxima-nova-webfont.ttf') format('truetype'),
        url('fonts/proxima-nova-webfont.svg#proxima_nova_rgregular') format('svg');
    font-style: normal !important;
    font-weight: normal !important; 
}

@font-face {
    font-family: 'Proxima Nova Italic';
    src: url('fonts/proxima-nova-italic-webfont.eot');
    src: url('fonts/proxima-nova-italic-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/proxima-nova-italic-webfont.woff') format('woff'),
        url('fonts/proxima-nova-italic-webfont.ttf') format('truetype'),
        url('fonts/proxima-nova-italic-webfont.svg#proxima_novaregular_italic') format('svg');
    font-style: normal !important;
    font-weight: normal !important;
}

@font-face {
    font-family: 'Proxima Nova Semibold';
    src: url('fonts/proxima-nova-semibold-webfont.eot');
    src: url('fonts/proxima-nova-semibold-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/proxima-nova-semibold-webfont.woff') format('woff'),
        url('fonts/proxima-nova-semibold-webfont.ttf') format('truetype'),
        url('fonts/proxima-nova-semibold-webfont.svg#proxima_novasemibold') format('svg');
    font-style: normal !important;
    font-weight: normal !important; 
}

@font-face {
    font-family: 'Proxima Nova Bold Italic';
    src: url('fonts/proxima-nova-bold-italic-webfont.eot');
    src: url('fonts/proxima-nova-bold-italic-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/proxima-nova-bold-italic-webfont.woff') format('woff'),
        url('fonts/proxima-nova-bold-italic-webfont.ttf') format('truetype'),
        url('fonts/proxima-nova-bold-italic-webfont.svg#proxima_nova_rgbold_italic') format('svg');
    font-style: normal !important;
    font-weight: normal !important; 
}

@font-face {
    font-family: 'Proxima Nova Semibold Italic';
    src: url('fonts/proxima-nova-semibold-italic-webfont.eot');
    src: url('fonts/proxima-nova-semibold-italic-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/proxima-nova-semibold-italic-webfont.woff') format('woff'),
        url('fonts/proxima-nova-semibold-italic-webfont.ttf') format('truetype'),
        url('fonts/proxima-nova-semibold-italic-webfont.svg#proxima_novasemibold_italic') format('svg');
    font-style: normal !important;
    font-weight: normal !important; 
}

@font-face {
    font-family: 'Proxima Nova Bold';
    src: url('fonts/proxima-nova-bold-webfont.eot');
    src: url('fonts/proxima-nova-bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/proxima-nova-bold-webfont.woff') format('woff'),
        url('fonts/proxima-nova-bold-webfont.ttf') format('truetype'),
        url('fonts/proxima-nova-bold-webfont.svg#proxima_nova_rgbold') format('svg');
    font-style: normal !important;
    font-weight: normal !important; 
}

@font-face {
    font-family: 'Proxima Nova Light';
    src: url('fonts/proximanova-light.eot');
    src: url('fonts/proximanova-light.eot') format('embedded-opentype'),
         url('fonts/proximanova-light.woff') format('woff'),
         url('fonts/proximanova-light.ttf') format('truetype'),
         url('fonts/proximanova-light.svg#ProximaNovaLight') format('svg');
}

@font-face {
    font-family: 'Proxima Nova Light Italic';
    src: url('fonts/proximanova-lightitalic.eot');
    src: url('fonts/proximanova-lightitalic.eot') format('embedded-opentype'),
         url('fonts/proximanova-lightitalic.woff') format('woff'),
         url('fonts/proximanova-lightitalic.ttf') format('truetype'),
         url('fonts/proximanova-lightitalic.svg#ProximaNovaLightItalic') format('svg');
}




strong, b { font-weight: 700; font-style: normal; color: inherit; }

em, i { font-style: italic; }

/* Reset
----------------------------------------------------------*/
html, body, div, span, applet, object, iframe, p, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, form, label, h1, h2, h3, h4, h5, h6, hr { list-style: none; margin: 0; padding: 0; outline: 0; text-decoration: none; }

html { 
  height: 100%; 
  /*original - font-family: "Oxygen", sans-serif;*/
  font-family: 'Proxima Nova', 'Open Sans','Gill Sans MT', 'Gill Sans', Corbel, Arial, sans-serif;
  font-weight: normal; 
  font-size: 16px; 
  color: #545454; 
  line-height: 1.5; 
  cursor: default; 
}

body { 
  /* original - background: url(../../images/bg.png) no-repeat center top fixed; 
  background-size: cover;*/ 
  /* Make bg same color as footer so that shallow pages extend bg color beyond where footer ends
  background-color: #cacdcf;*/
  background-color: #fff;
  font-size: 1em; 
  min-height: 100%; 
}

input, button, select, textarea { 
  /*font-family: "Oxygen", sans-serif !important; */
  font-family: 'Proxima Nova Light', sans-serif !important;
}

input, select, textarea { text-rendering: optimizeLegibility; border-radius: 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

input:focus, select:focus, textarea:focus { outline: none; border: none; }

embed, iframe { max-width: 100%; }

label { cursor: auto; }

.lcms_AdminView a, .lcms_AdminView a:hover { text-shadow: inherit; }

.body article, .body aside, .body details, .body div.wrapper, .body figcaption, .body figure, .body footer, .body form, .body header, .body hgroup, .body nav, .body section { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.actions img { display: inline; }

.body ul, .body li, .body a, .body table, .body th, .body tr, .body thead, .body tbody, .body tr, .body td { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

audio:not([controls]) { display: none; }

/* page links
----------------------------------------------------------*/
a { 
  display: inline-block; 
  
  /*color: #ff3800;
  font-weight: bold;*/
  color: #53b044; /* #68c028 is too weak of a green for a font */
  font-weight: normal;

  text-decoration: none; 
  cursor: pointer; 
  -webkit-transition: all 0.2s ease; 
  -moz-transition: all 0.2s ease; 
  transition: all 0.2s ease; 
}

a:hover, a:active, a:link:hover, a:visited:hover { 
  outline: 0; 
  /*color: #680000; */
  text-decoration: underline; 
}

sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

img { max-width: 100%; width: auto; height: auto; border: 0; vertical-align: middle; -ms-interpolation-mode: bicubic; }

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: middle; }

button, input { line-height: normal; *overflow: visible; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] { cursor: pointer; }

input[type="search"] { -webkit-appearance: textfield; }

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

textarea { overflow: auto; vertical-align: top; }

.regionName { display: none !important; }

.clear, article::after, .columns::after, .contents .element hr::before, body.login-page .loginElement div p:nth-child(3)::before { content: ""; display: table; clear: both; }

.text { font-size: 18px; }

/* Animations
----------------------------------------------------------*/
@-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); }
  100% { opacity: 1; -webkit-transform: none; } }
@-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -moz-transform: translate3d(-2000px, 0, 0); }
  100% { opacity: 1; -moz-transform: none; } }
@keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); -moz-transform: translate3d(-2000px, 0, 0); -ms-transform: translate3d(-2000px, 0, 0); -o-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); }
  100% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } }
@-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); }
  100% { opacity: 1; -webkit-transform: none; } }
@-moz-keyframes fadeInRightBig { 0% { opacity: 0; -moz-transform: translate3d(2000px, 0, 0); }
  100% { opacity: 1; -moz-transform: none; } }
@keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); -moz-transform: translate3d(2000px, 0, 0); -ms-transform: translate3d(2000px, 0, 0); -o-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); }
  100% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } }
@-webkit-keyframes loginAnimation { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-moz-keyframes loginAnimation { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes loginAnimation { 0% { opacity: 0; }
  100% { opacity: 1; } }

/* Extensions
----------------------------------------------------------*/

.secondaryFontExt, 
.contents .element .blogsElement .blogList .postInfo, 
header article .search input, 
.mobileNav .search input, 
.detail-page .contents article .blogBack, 
.detail-page .contents article .eventBack, 
.detail-page.dynamic-searchresults .element .searchResults li em { 
  font-weight: 700; 
  font-size: 14px; 
  /*text-transform: uppercase; */
}

.secondaryFontLabelExt,.detail-page .contents article .comments .note, .eventsElement, .element .shoppingCartContainer .shoppingCart table.cartItems td.cartDiscount, .productListingElement .productUnavailable, .productDetailElement .productDetailUnavailable { 
  font-weight: 700; 
  font-size: 14px; 
  text-transform: uppercase;
  color: #8c9aa5; 
}

/* Wrapper
----------------------------------------------------------*/
.wrapper { 
  background-color: #fff;
  /*background-color: #f9f7f2;*/
}

/* Section Styling
----------------------------------------------------------*/
section { position: relative; }
section.special { background-color: #420000; background: -webkit-gradient(linear, left top, right top, from(#420000), to(#680000)); background: -webkit-linear-gradient(left, #420000, #680000); background: -moz-linear-gradient(left, #420000, #680000); background: -ms-linear-gradient(left, #420000, #680000); background: -o-linear-gradient(left, #420000, #680000); }

/* Single column, max-width 1440
Note: Custom single column */
section.single-column { 
  background-color: #fff;
  padding: 80px 0;
}

/* Single column for Quick Links, max-width 1440
Note: Custom single column Quick Links */
section.quick-links-panel { 
  background-color: #787c80;
  padding: 80px 0;
}

article { 
  display: block; 
  /*max-width: 1024px; 
  Note: Let articles expand to 1440px*/
  max-width: 1440px;
  width: auto; 
  margin: 0 auto; 
  /*padding: 75px 1.5rem;
  Note: Keep padding same as homepage*/ 
  padding: 0 5%;
  position: relative;
}

/* Removed because makes empty articles takeup space
@media screen and (max-width: 768px) { article { padding: 3.125rem 1.5rem; } }*/

/* Headings
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 { 
  font-weight: 700; 
  line-height: 1.25; 
  /*color: #a30000;*/
  color: #003f6d;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { 
  font-weight: 900; 
  color: #53b044; 
}
h1:hover a, 
h1 a:hover, 
h2:hover a, 
h2 a:hover, 
h3:hover a, 
h3 a:hover, 
h4:hover a, 
h4 a:hover, 
h5:hover a, 
h5 a:hover, 
h6:hover a, 
h6 a:hover { 
	color: #53b044 !important; 
}

/*h1, h2 { text-transform: uppercase; }
Note: Don't like everything uppercase*/

h2.h2-looks-like-h1 {
	font-size: 48px !important;
}

h1, .title { font-size: 48px; }

h2 { font-size: 36px; }

h3 { font-size: 24px; }

h4, h5, h6 { font-size: 18px; }

@media screen and (max-width: 768px) { 
  h2.h2-looks-like-h1 {
		font-size: 40px !important;
	}

  h1, .title { font-size: 32px; }
  h2 { font-size: 24px; }
  h3, h4, h5, h6 { font-size: 18px; } }
  
/* Buttons
----------------------------------------------------------*/
a.bttn, a.bttnWarm, .bttnWarm, header article.hero .textElement .button, header article.hero .loginElement .button, .detail-page .contents article .comments .submitComment, .form_container .submitButton, .EviteElement .EviteButton, .element .shoppingCartContainer .shoppingCart table.cartItems .cartCheckoutButton, .productListingElement .productAddToCart, .productListingElement .productSelectOptions, .productDetailElement .productDetailAddToCartContainer .productDetailAddToCart, body.login-page .loginElement .button, .donationElement a.button, .bttn, .donationElement a.button { max-width: 500px; box-sizing: border-box; margin: 0 0 0 0; padding: 20px 22px !important; border: none !important; border-radius: 2px !important; background-color: #00a5bb; font-size: 18px !important; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 18px !important; letter-spacing: 3px; color: #ffffff; text-shadow: none; }
@media screen and (max-width: 640px) { 
  a.bttn, a.bttnWarm, .bttnWarm, header article.hero .textElement .button, 
  header article.hero .loginElement .button, .detail-page .contents article .comments .submitComment, 
  .form_container .submitButton, .EviteElement .EviteButton, .element .shoppingCartContainer .shoppingCart table.cartItems .cartCheckoutButton, 
  .productListingElement .productAddToCart, .productListingElement .productSelectOptions, 
  .productDetailElement .productDetailAddToCartContainer .productDetailAddToCart, body.login-page .loginElement .button, 
  .donationElement a.button, .bttn, .donationElement a.button { 
    display: block; 
    max-width: 100%; 
    width: 100%; 
    font-size: 18px !important; 
    margin: 0 auto; 
  } 

  h2.h2-looks-like-h1 {
		font-size: 32px !important;
	}
}

a.bttn:hover, .bttnWarm:hover, header article.hero .textElement .button:hover, header article.hero .loginElement .button:hover, .detail-page .contents article .comments .submitComment:hover, .form_container .submitButton:hover, .EviteElement .EviteButton:hover, .element .shoppingCartContainer .shoppingCart table.cartItems .cartCheckoutButton:hover, .productListingElement .productAddToCart:hover, .productListingElement .productSelectOptions:hover, .productDetailElement .productDetailAddToCartContainer .productDetailAddToCart:hover, body.login-page .loginElement .button:hover, .donationElement a.button:hover, .bttn:hover, .donationElement a.button:hover { color: #ffffff; background-color: #004564; text-decoration: none; }

a.bttnWarm, .bttnWarm { background-color: #ff3800; }

a.bttnWarm:hover, .bttnWarm:hover { color: #ffffff; background-color: #680000; text-decoration: none; }

/* Simple Columns
----------------------------------------------------------*/
.columns { clear: both; }
.columns .left, .columns .right { float: left; width: 70%; }
.columns .left h1, .columns .left h2, .columns .left h3, .columns .left h4, .columns .left h5, .columns .left h6 { font-size: 36px; margin: 0 0 30px; }
.columns .right { width: 22%; margin: 0 0 0 8%; font-size: 13px; }
.columns .right h1, .columns .right h2, .columns .right h3, .columns .right h4, .columns .right h5, .columns .right h6 { font-size: 16px; margin: 0 0 30px; }
.columns.equal .left, .columns.equal .right { width: 43.3945%; }
.columns.equal .right { margin: 0 0 0 13.211%; }
.columns.equal .right h1, .columns.equal .right h2, .columns.equal .right h3, .columns.equal .right h4, .columns.equal .right h5, .columns.equal .right h6 { font-size: 36px; margin: 0 0 30px; }

.columns .thirds { 
  float: left; 

  /*width: 29.29%;
  Note: Make last column fit in its container properly*/
  width: 30%;

  margin: 0 5% 0 0; 
}

/* Pad top of section container */
section.single-column-title { 
  padding: 80px 0 0 0;
}
.single-column-title {
  text-align: center;
}

.columns .thirds:last-child { margin: 0 0 0 0; }

/* Single column banner panel
--------------------------------------------------------------------------- */
/*section.banner-column-panel {
    background-color: #fff;
    padding: 80px 0;
}
.banner-column-wrapper {
	padding: 20px 20px 10px 20px;
	background: url(../../images/light-gray-bg.jpg) center center / cover no-repeat;
}
.banner-column {
	height: auto;
}
.banner-column h2 {
	margin-bottom: 30px;
}
p.banner-column-callout {
	width: 66%;
	font-size: 25px;
	line-height: 30px;
  margin-bottom: 25px !important;
}
.banner-column h2 {
	width: 66%;
}
.banner-column .image-float {
    position: absolute;
    top: -220px;
    right: 0;
    max-width: 500px;
}
.banner-column > p > a > span.arrow-left-circle-green {
	position: relative;
	display: inline-block;
	width: 25px;
	height: 25px; 
	padding-left: 5px;
	background: url(../../images/arrow-left-circle-green.png) no-repeat 0 0px;
}
.banner-column > p.font-light.relative-position {
  margin: 16px 0;
}

@media screen and (min-width: 650px) and (max-width: 829px) {
    .banner-column .image-float { max-width: 400px; top: -180px; }
}
@media screen and (min-width: 550px) and (max-width: 649px) {
	.banner-column .image-float { max-width: 300px; top: -120px; }
}
@media screen and (min-width: 480px) and (max-width: 549px) {
	.banner-column .image-float { max-width: 200px; top: -75px; }
}
@media screen and (max-width: 479px) {
	.banner-column .image-float { width: 0px; height: 0px; }
	.banner-column-wrapper { text-align: center; }
	.banner-column h2 { width: 100%; }
	p.banner-column-callout { width: 100%; }
}*/
/* --------------------------------------------------------------------------- */

@media screen and (max-width: 768px) { 
  
  /* Move this breakpoint to max-width: 640px;
  .columns .left, 
  .columns .right, 
  .columns.equal .left, 
  .columns.equal .right { 
    float: none; 
    width: 100%; 
    margin: 0 0 0; 
    overflow: auto; 
  } */

  .columns .thirds h1, 
  .columns .thirds h2, 
  .columns .thirds .title { 
    font-size: 24px; 
  }

  .columns .thirds h3, 
  .columns .thirds h4, 
  .columns .thirds h5, 
  .columns .thirds h6 { 
    font-size: 18px; 
  } 
}
@media screen and (max-width: 640px) {
  .columns .left, 
  .columns .right, 
  .columns.equal .left, 
  .columns.equal .right { 
    float: none; 
    width: 100%; 
    margin: 0; 
    overflow: auto; 
  } 
  .columns .thirds {
		width: 100%;
	}
}

/* Body Content
----------------------------------------------------------*/
.contents { 
  /* min-height: 350px; 
  Orig error? Removed because makes inside template main section render wrong*/
  background-color: #f9f7f2;
  /*background-color: #fff;*/
}

.contents-white {
  background-color: #fff;
}

/* Custom Text Element and Blog Element treatment
----------------------------------------------------------*/
.contents input:not(.bttn):not(.submitComment), .contents select, .contents textarea { font-weight: 700; text-rendering: optimizeLegibility; border-radius: 2px; font-size: 14px; border: 1px solid #d0d0d0; padding: 15px; }
.contents input:focus:not(.bttn):not(.submitComment), .contents select:focus, .contents textarea:focus { outline: none; border: 1px solid #004564; }

.contents p { 
  /*margin: 0 0 1.875rem; 
  Note: Too much space between */
  margin: 0 0 1rem;
}


.contents p:last-child { margin: 0 0 0 0; }
.contents pre { white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; }

.contents .element { 
  /*margin: 0 0 75px 0; 
  Orig error? Makes inside template main section render wrong*/
  margin: 75px 0;
}

.contents .element:only-child { margin: 0 0 0 0; }
.contents .element hr { clear: both; height: 0; margin: 0 0 2rem 0; border: none; border-bottom: 4px solid #ff3800; }
.contents .element hr:last-child { margin: 0 0 0; }
.contents .element .textElement ul, .contents .element .textElement ol { margin: 0 0 2rem; padding-left: 20px; }
.contents .element .textElement ul li { position: relative; padding-left: 5px; list-style: square; }
.contents .element .textElement ol { list-style-type: decimal; }
.contents .element .textElement ol li { list-style: inside decimal; }
.contents .element .textElement ol ol, .contents .element .textElement ol ul { margin: 0 0 0 20px !important; }
.contents .element .textElement ol ol li, .contents .element .textElement ol ul li { list-style: inside lower-alpha !important; }
.contents .element .textElement table tbody th { padding: 0.625rem; background-color: #006b89; color: #ffffff; }
.contents .element .textElement table tbody td { padding: 0.625rem; }
.contents .element blockquote, .contents .element .blockquote { float: right; width: 26.367%; margin: 0 0 2rem 2.5rem; padding: 0 0; font-size: 48px; line-height: 1.2; text-transform: none; color: #ff3800; }
.contents .element blockquote.blockquoteLeft, .contents .element .blockquoteLeft { float: left; width: 26.367%; margin: 0 2rem 2.5rem 0; padding: 0 0; font-size: 48px; line-height: 1.2; text-transform: none; color: #ff3800; }
.contents .element blockquote:first-child, .contents .element .blockquote:first-child, .contents .element blockquote.blockquoteLeft:first-child, .contents .element .blockquoteLeft:first-child, .contents .element blockquote:last-child, .contents .element .blockquote:last-child, .contents .element blockquote.blockquoteLeft:last-child, .contents .element .blockquoteLeft:last-child { float: none; width: 80%; margin: 2rem auto; }
@media screen and (max-width: 640px) { .contents .element blockquote, .contents .element .blockquote, .contents .element blockquote.blockquoteLeft, .contents .element .blockquoteLeft { float: none; width: 80%; margin: 2rem auto; font-size: 32px; } }
.contents .element .blogsElement .blogList ul li { position: relative; margin: 0 0 120px; }
.contents .element .blogsElement .blogList ul li:last-child { margin: 0 0 0 0; }
.contents .element .blogsElement .blogList .postFeaturedImage { margin: 0 0 1.5625rem 0; }
.contents .element .blogsElement .blogList .postFeaturedImage a { display: block; }
.contents .element .blogsElement .blogList .postFeaturedImage + .postThumb { display: none; }
.contents .element .blogsElement .blogList .postThumb { float: left; display: block; margin: 0 0; }
.contents .element .blogsElement .blogList .postThumb a { display: block; width: 125px; }
.contents .element .blogsElement .blogList .postThumb + .postContent { margin: 0 0 0 9.375rem; }
.contents .element .blogsElement .blogList .postFeaturedImage + .postThumb + .postContent { margin: 0 auto 1rem; }
.contents .element .blogsElement .blogList .postContent .postTitle { max-width: 900px; margin: 0 auto 1rem; text-align: left; }
.contents .element .blogsElement .blogList .postContent .postBody { max-width: 800px; margin: 0 auto; }
.contents .element .blogsElement .blogList .postContent .readMore { display: block; margin: 0 0 0; font-size: 16px; font-weight: 700; text-transform: none; text-align: left; }
.contents .element .blogsElement .blogList .postInfo { display: block; padding: 13px 0 0 0; color: #8c9aa5; }
.contents .element .blogsElement .blogList .postInfo .postDate { font-style: normal; }
.contents .element .blogsElement .blogList .postInfo em { font-style: normal; }
.contents .element .blogsElement .blogList .postInfo em a { margin: 0 .2rem; color: #8c9aa5; }
.contents .element .blogsElement .blogList .postInfo em a:hover { color: #555555; }
.contents .element .blogsElement .blogList div.pagination ul { margin: 4.6875rem 0 0 !important; border: none; }
.contents .element .blogsElement .blogList div.pagination ul li { border: none; }
.contents .element .blogsElement .blogList div.pagination ul li.current, .contents .element .blogsElement .blogList div.pagination ul li.selected { font-weight: 700; color: #ffffff; background-color: #004564; border-radius: 2px; }
.contents .element .blogsElement .blogList div.pagination ul li:hover:not(.current) a { color: #004564; }
.contents .element .blogsElement .blogList .rss { display: none; }
.contents .element .blogsElement .blogList.archive .postInfo { margin: 0 0 0 0; text-align: left; background: none; }
.contents .element .blogsElement .blogList.archive ul li { margin: 0 0 60px; }
.contents .element .blogsElement .blogList.archive ul li .postArchiveGroup { padding: 1rem 0 0; }
.contents .element .blogsElement .blogList.archive ul li .postArchiveGroup li { margin: 0 0 2rem 1rem; }
.contents .element .blogsElement .blogList.archive ul li .postArchiveGroup .postTitle { font-size: 18px; }
.contents .columns .thirds h1, .contents .columns .thirds h2, .contents .columns .thirds .title, .contents .columns.equal .left h1, .contents .columns.equal .left h2, .contents .columns.equal .left .title, .contents .columns.equal .right h1, .contents .columns.equal .right h2, .contents .columns.equal .right .title { background-color: #ffffff; margin: 0 0 10px; padding: 0; font-size: 36px; line-height: 1; text-align: center; }
.contents .columns .thirds .container, .contents .columns.equal .left .container, .contents .columns.equal .right .container { margin: 75px 0 0 0; }
.contents .columns .thirds .container h1, .contents .columns .thirds .container h2, .contents .columns .thirds .container .title, .contents .columns.equal .left .container h1, .contents .columns.equal .left .container h2, .contents .columns.equal .left .container .title, .contents .columns.equal .right .container h1, .contents .columns.equal .right .container h2, .contents .columns.equal .right .container .title { margin: 0; padding: 25px 25px 10px 25px; }
.contents .columns .thirds .container ~ .element, .contents .columns.equal .left .container ~ .element, .contents .columns.equal .right .container ~ .element { margin: 0 0 75px; padding: 0 25px 25px 25px; }
.contents .columns .thirds .element, .contents .columns.equal .left .element, .contents .columns.equal .right .element { margin: 75px 0; padding: 25px; background-color: #ffffff; }
@media screen and (max-width: 640px) { .contents .columns .thirds .element, .contents .columns.equal .left .element, .contents .columns.equal .right .element { margin: 0 0 75px; } }

/* Margin bottom for header <h> styles */
.contents .columns .quarters .element h3,
.contents .columns .quarters .element h4,
.contents .columns .quarters .element h5,
.contents .columns .quarters .element h6,
.contents .columns .thirds .element h3, 
.contents .columns .thirds .element h4, 
.contents .columns .thirds .element h5, 
.contents .columns .thirds .element h6, 
.contents .columns.equal .left .element h3, 
.contents .columns.equal .left .element h4, 
.contents .columns.equal .left .element h5, 
.contents .columns.equal .left .element h6, 
.contents .columns.equal .right .element h3, 
.contents .columns.equal .right .element h4, 
.contents .columns.equal .right .element h5, 
.contents .columns.equal .right .element h6 { 
  margin: 0 0 1.125rem; 
  line-height: 1; 
  text-align: left; 
}

.contents .columns .thirds .element h3, .contents .columns.equal .left .element h3, .contents .columns.equal .right .element h3 { text-align: center; }
.contents .columns.equal .left h1, .contents .columns.equal .left h2, .contents .columns.equal .left .title, .contents .columns.equal .right h1, .contents .columns.equal .right h2, .contents .columns.equal .right .title { margin: 0 0 1rem; padding: 0; font-size: 24px; text-align: left; text-transform: none; }

/* Changed h3 to be 20px; was 16px */
.contents .columns.equal .left h3, 
.contents .columns.equal .right h3 { 
  /* margin: 0 0 0.5rem !important; add more space */
  margin: 0 0 1rem !important;
  padding: 0; 
  font-size: 20px; 
  line-height: 1; 
  text-align: left; 
}

.contents .columns.equal .left h4, 
.contents .columns.equal .left h5, 
.contents .columns.equal .left h6, 
.contents .columns.equal .right h4, 
.contents .columns.equal .right h5, 
.contents .columns.equal .right h6 { 
  margin: 0 0 0.5rem !important; 
  padding: 0; 
  /* font-size: 16px; Too small because body font size is 16px */
  font-size: 18px; 
  line-height: 1; 
  text-align: left; 
}

.contents .columns.equal .left .element, 
.contents .columns.equal .right .element { 
  /*min-height: 150px; 
  border-left: 4px solid #ff3800; 
  border-right: 4px solid #ff3800; 
  Note: Don't like right & left borders on half columns*/
  font-size: 16px; 
}

.contents .columns.equal .left .container, .contents .columns.equal .right .container { border-left: 4px solid #ff3800; border-right: 4px solid #ff3800; }
.contents .columns.equal .left .blogsElement .blogList ul li, .contents .columns.equal .right .blogsElement .blogList ul li { position: relative; margin: 0; }
.contents .columns.equal .left .blogsElement .blogList ul li:last-child, .contents .columns.equal .right .blogsElement .blogList ul li:last-child { margin: 0 0 0 0; }
.contents .columns.equal .left .blogsElement .blogList .postFeaturedImage, .contents .columns.equal .right .blogsElement .blogList .postFeaturedImage { position: absolute; left: -25px; top: -229px; display: block; max-width: 117%; width: 450px; height: auto; margin: 0; }
.contents .columns.equal .left .blogsElement .blogList .postFeaturedImage + .postThumb, .contents .columns.equal .right .blogsElement .blogList .postFeaturedImage + .postThumb { display: none; }
.contents .columns.equal .left .blogsElement .blogList .postFeaturedImage + .postContent, .contents .columns.equal .left .blogsElement .blogList .postFeaturedImage + .postThumb + .postContent, .contents .columns.equal .right .blogsElement .blogList .postFeaturedImage + .postContent, .contents .columns.equal .right .blogsElement .blogList .postFeaturedImage + .postThumb + .postContent { margin: 200px 0 0 0; }
.contents .columns.equal .left .blogsElement .blogList .postThumb, .contents .columns.equal .right .blogsElement .blogList .postThumb { position: absolute; left: -29px; top: -25px; display: block; width: auto; height: auto; margin: 0; }
@media screen and (max-width: 640px) { .contents .columns.equal .left .blogsElement .blogList .postThumb, .contents .columns.equal .right .blogsElement .blogList .postThumb { width: 50px; } }
.contents .columns.equal .left .blogsElement .blogList .postThumb a, .contents .columns.equal .right .blogsElement .blogList .postThumb a { display: block; width: auto; border: none; }
.contents .columns.equal .left .blogsElement .blogList .postThumb + .postContent, .contents .columns.equal .right .blogsElement .blogList .postThumb + .postContent { margin: 0 0 0 155px; }
@media screen and (max-width: 640px) { .contents .columns.equal .left .blogsElement .blogList .postThumb + .postContent, .contents .columns.equal .right .blogsElement .blogList .postThumb + .postContent { margin: 0 0 0 50px; } }
.contents .columns.equal .left .blogsElement .blogList .postContent .postTitle, .contents .columns.equal .right .blogsElement .blogList .postContent .postTitle { max-width: auto; margin: 0 0 1rem; padding: 0; font-size: 24px; text-align: left; text-transform: none; }
.contents .columns.equal .left .blogsElement .blogList .postContent .postBody, .contents .columns.equal .right .blogsElement .blogList .postContent .postBody { max-width: 800px; margin: 0 auto; }
.contents .columns.equal .left .blogsElement .blogList .postContent .readMore, .contents .columns.equal .right .blogsElement .blogList .postContent .readMore { display: inline; margin: 0; text-transform: none; text-align: inherit; }
.contents .columns.equal .left .blogsElement .blogList .postInfo, .contents .columns.equal .right .blogsElement .blogList .postInfo { display: none; }
@media screen and (max-width: 768px) { .contents .columns .thirds h1, .contents .columns .thirds h2, .contents .columns .thirds .title { font-size: 24px; }
  .contents .columns .thirds h3, .contents .columns .thirds h4, .contents .columns .thirds h5, .contents .columns .thirds h6 { font-size: 18px; } }
@media screen and (max-width: 640px) { .contents .columns .thirds:first-child .element { margin: 4.6875rem 0; }
  .contents .columns .thirds .container { margin: 0 0; }
  .contents .columns .thirds:first-child .container { margin: 4.6875rem 0; }
  .contents .columns.equal .left .element { margin: 4.6875rem 0; } }
.contents .container .title { margin: 0 0 1rem; }
.contents .container + .element { margin: 0 0 75px 0; }
.contents .container + .element:only-child { margin: 0 0 75px; }
.contents .element + .container { margin: 0 0 1rem; }

/* Header
----------------------------------------------------------*/
header article { max-width: 100%; width: auto; padding: 0 0 0 0 !important; }
header article.nav { 
  position: relative; 
  /*min-height: 80px; 
  Note: Make navigation 60px; also see height in 'nav {}' style*/
  height: 60px; 
  /* keep nav bg wht */
  background: #fff;
}
@media screen and (max-width: 640px) { header article.nav { min-height: 60px; } }

/* 2 branding logos, this one's for mobile*/
#branding{ display: none;}

header article h1.branding { 
  display: block; 
  float: left; 
  max-width: 45%; 
  width: auto; 

  /*Note: Added following to make navigation 60px; also see height in 'nav {}' style*/
  height: 60px;
  position: relative;
  top: -10px;
}

/* changed above <h1> to <div> in header.inc and added this new style */
#brandingDesktop {
    display: block;
    float: left;
    max-width: 45%;
    width: 248px;
    height: 60px;
    position: relative;
    top: 8px;
}


@media screen and (max-width: 768px) { header article h1.branding { max-width: 90%; } }
header article h1.branding a { width: auto; padding: 0 85px; font-family: "Kaushan Script", cursive; font-size: 48px; line-height: 70px; color: #004564; text-transform: none; }
header article h1.branding a:hover { color: #002d49 !important; text-decoration: none; }
@media screen and (max-width: 768px) { header article h1.branding a { padding: 0 0 0 1.5rem; font-size: 32px; line-height: 60px; } }

/* @media screen and (max-width: 768px) 
Note: Change break point - see other 960px break point for displaying mobile menu. */
/* @media screen and (max-width: 960px) {
Note: Change break point - see other 1100px break point for displaying mobile menu. */
@media screen and (max-width: 1100px) {  
  header article .desktopNav { display: none; } 
  
  /* old branding */
  /*#branding { display: block; }*/ /* show mobile branding logo */
  
  /* New branding */
  #branding {
		display: block;
		max-width: 45%;
		width: 248px;
		height: 60px;
		position: relative;
		top: 8px;
		text-align: center;
	}

}

header article .globalMenu { 
  display: block; 

  /*float: right; 
  margin: 0 80px 0 0; 
  Note: move to left */
  float: left;
  /* After repositioning logo in same div holding navigation, this margin isn't needed
  margin: 0 0 0 230px;*/
  margin: 0;

  padding: 0 0 0 0; 
  line-height: 1; 
}

header article .globalMenu > li { 
  display: inline-block; 
  position: relative; 
  /*line-height: 80px;
  Note: Removed so that dropdowns aren't soooo deep;
  Also see ul.level2 > li > a {height: XXX px}*/ 
  line-height: normal;
  margin: 0; 
}

header article .globalMenu > li > a { 
  display: block; 
  margin: 0; 
  padding: 0 15px; 
  /*font-size: 16px;*/
  font-size: 14px;
  /* Menu text isn't bold, so if we make it bold here 
  entire menu moves when font changes to bold.
  font-weight: 700;*/
  font-weight: normal;
  line-height: 80px; 

  /*color: #006b89;
  Note: Set font color to default (black)*/

  /*text-transform: uppercase; 
  text-align: center; */
  text-align: right;
}

header article .globalMenu > li > a:hover, header article .globalMenu > li:hover > a { color: #004564; text-decoration: none; }

header article .globalMenu > li.selectedPage > a, 
header article .globalMenu > li > a.selectedPageRoot, 
header article .globalMenu > li > a.selectedPage { 
  color: #ffffff; 
  /*background-color: #006b89;*/ 
  background-color: #7bc34b;
  cursor: default; 
}

header article .search { 
  /* orig --
  position: absolute; 
  top: 50%; 
  right: 0; 
  margin: 0; */
  
  /* Trying to position search component */
  position: relative;
  top: 29px;
  float: right;
  margin-right: 30px;
  
  -webkit-transform: translate(0, -50%); 
  -moz-transform: translate(0, -50%); 
  -ms-transform: translate(0, -50%); 
  -o-transform: translate(0, -50%); 
  transform: translate(0, -50%); 
}

header article .search label { display: none; }
header article .search input { width: 125px; padding: .5rem 1.2rem .5rem .5rem; border: 1px solid #efefef; border-radius: 2px !important; color: #006b89; }
header article .search .searchButton { position: absolute; top: 7px; right: 5px; background: transparent url("../images/searchIcon.png") no-repeat scroll center top; background-size: 15px 15px; height: 19px; width: 19px; border: none; text-indent: -9999px; margin-top: 4px; }

header article.hero .feature { 
  /*background-color: #420000; 
  background: -webkit-gradient(linear, left top, right top, from(#420000), to(#680000)); 
  background: -webkit-linear-gradient(left, #420000, #680000); 
  background: -moz-linear-gradient(left, #420000, #680000); 
  background: -ms-linear-gradient(left, #420000, #680000); 
  background: -o-linear-gradient(left, #420000, #680000); 
  Note: Homepage banner container, make white bg in case bg shows on certain devices*/
  background-color: #fff; 
}

header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer { width: 100% !important; overflow: hidden; max-height: 450px !important; }
header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer a { display: block; }
header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer a .sldw_caption_hover h1:hover, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer a .sldw_caption_hover h2:hover, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer a .sldw_caption_hover h3:hover, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer a .sldw_caption_hover h4:hover, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer a .sldw_caption_hover h5:hover, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer a .sldw_caption_hover h6:hover { text-decoration: underline; }
header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer img { width: 100% !important; }
header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover { position: static; max-width: 800px; margin: 0 auto; padding: 0 1.5rem; background: none; }
header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h1, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h2, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h3, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h4, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h5, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h6, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h1, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h2, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h3, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h4, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h5, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h6 { position: absolute; top: 50%; padding: 0; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); font-size: 48px; color: #ffffff; text-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25); text-transform: uppercase; }
header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h1:hover, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h2:hover, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h3:hover, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h4:hover, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h5:hover, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h6:hover, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h1:hover, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h2:hover, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h3:hover, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h4:hover, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h5:hover, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h6:hover { background: none !important; }
@media screen and (max-width: 768px) { header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h1, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h2, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h3, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h4, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h5, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h6, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h1, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h2, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h3, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h4, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h5, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h6 { font-size: 40px; } }
@media screen and (max-width: 640px) { header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h1, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h2, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h3, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h4, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h5, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption h6, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h1, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h2, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h3, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h4, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h5, header article.hero .feature .SlideShowContainer .SlideShow .SlideShowImage .captionContainer .sldw_caption_hover h6 { font-size: 32px; } }
header article.hero .feature .imageElement { position: relative; width: 100% !important; overflow: hidden; max-height: 450px !important; }
header article.hero .feature .imageElement img { width: 100% !important; }
header article.hero .feature .imageElement .imgDescription { position: absolute; max-width: 1024px; width: 95%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
@media screen and (max-width: 768px) { header article.hero .feature .imageElement .imgDescription { max-width: 90%; left: 1.5rem; -webkit-transform: translate(0%, -50%); -moz-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); transform: translate(0%, -50%); box-sizing: border-box; } }
@media screen and (max-width: 768px) { header article.hero .feature .imageElement { overflow: hidden; min-height: 175px; } }
@media screen and (max-width: 640px) { header article.hero .feature .imageElement { overflow: hidden; min-height: 125px; } }
header article.hero .container { max-width: 1024px; margin: 0 auto .5rem; padding: 4.6875rem 0 0 0; }
header article.hero .container ~ .element .textElement, header article.hero .container ~ .element .loginElement { padding: 0 0 4.6875rem 0; }

/* Video styling */
header article.hero .textElement, 
header article.hero .loginElement { 
  /*max-width: 1024px;*/
  margin: 0 auto 1.5rem; 
  /*padding: 4.6875rem 0;*/
  padding: 0;
}

/* Video styling */
header article.hero .textElement:last-child, 
header article.hero .loginElement:last-child { 
  /*margin: 0 auto 0;*/
  margin: 0;
}

/* Video styling */
header article.hero h1, 
header article.hero h2, 
header article.hero .title { 
  /*text-align: left;*/
  text-align: center; 
  color: #ffffff; 
  /* original
  text-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25); */
  text-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.45);
}
header article.hero p { text-align: left; color: #ffffff; font-size: 18px; font-weight: 700; text-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25); }
@media screen and (max-width: 640px) { header article.hero a.bttn, header article.hero a.bttnWarm, header article.hero .bttnWarm, header article.hero .textElement .button, header article.hero .loginElement .button, header .detail-page .contents article.hero .comments .submitComment, .detail-page .contents header article.hero .comments .submitComment, header article.hero .form_container .submitButton, .form_container header article.hero .submitButton, header article.hero .EviteElement .EviteButton, .EviteElement header article.hero .EviteButton, header article.hero .element .shoppingCartContainer .shoppingCart table.cartItems .cartCheckoutButton, .element .shoppingCartContainer .shoppingCart table.cartItems header article.hero .cartCheckoutButton, header article.hero .productListingElement .productAddToCart, .productListingElement header article.hero .productAddToCart, header article.hero .productListingElement .productSelectOptions, .productListingElement header article.hero .productSelectOptions, header article.hero .productDetailElement .productDetailAddToCartContainer .productDetailAddToCart, .productDetailElement .productDetailAddToCartContainer header article.hero .productDetailAddToCart, body.login-page .loginElement header article.hero .button, header article.hero .donationElement a.button, .donationElement header article.hero a.button { max-width: 95%; width: 95%; } }

@media screen and (max-width: 900px) { html body#body.bloghco-home article#header.hero { background-size: auto 100% !important; } }


/* Mobile Nav
----------------------------------------------------------*/

/* Stop 2 scrollbars showing when mobile menu is displayed.
a. In 'scripts.js' line 33 $("body").toggleClass('scroll'); was here but no class in CSS. 
b. Adding 'scroll' class to hide scrollbars on body when mobile menu is in use*/
.scroll {
  overflow: hidden;
}

.nav-icon { display: none; 
  /*position: fixed; 
  top: 40px;
  Note: Reposition in header*/
  position: relative;
  float: right;
  top: 30px;

  width: 25px; 
  height: 20px; 
   
  right: 0;
  /* Raise above the text (over video)
  z-index: 99; */
  z-index: 200;
  cursor: pointer; 
  background-color: rgba(255, 255, 255, 0.6); 
  padding: 20px; -webkit-transform: translate(-50%, -50%); 

  -moz-transform: translate(-50%, -50%); 
  -ms-transform: translate(-50%, -50%); 
  -o-transform: translate(-50%, -50%); 
  transform: translate(-50%, -50%); 
}

/* @media screen and (max-width: 768px)
Note: Change break point - see other 960px break point for displaying menu.  */
/* @media screen and (max-width: 960px) { 
Note: Change break point - see other 1100px break point for displaying mobile menu. */
@media screen and (max-width: 1100px) { 
  .nav-icon { display: block; } 
}

@media screen and (max-width: 640px) { .nav-icon { top: 30px; } }
.nav-icon.open .burger { background: none; }
.nav-icon.open .burger::before, .nav-icon.open .burger::after { top: 0; background-color: #004564; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.nav-icon.open .burger::after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.nav-icon:hover:not(.open) .burger::before { top: -10px; }
.nav-icon:hover:not(.open) .burger::after { top: 10px; }
.nav-icon .burger, .nav-icon .burger::before, .nav-icon .burger::after { width: 25px; height: 4px; background: #006b89; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.nav-icon .burger { position: relative; margin: 8px auto 0; }
.nav-icon .burger::before, .nav-icon .burger::after { content: ""; position: absolute; }
.nav-icon .burger::before { top: -8px; }
.nav-icon .burger::after { top: 8px; }

.mobileNav { 
  display: none; 
  position: fixed; 
  top: 0px; 
  right: -100%; 
  bottom: 0; 
  height: 100%; 
  width: 100%; 
  overflow: auto; 
  /* Raise above the text (over video) 
  z-index: 11; */
  z-index: 150;
  margin: 0 0 0; 
  padding: 0 0 0; 
  box-sizing: border-box; 
  background-color: #ffffff; 
  -webkit-transition: all 0.45s ease-in-out; 
  -moz-transition: all 0.45s ease-in-out; 
  transition: all 0.45s ease-in-out; 
}

/* Show mobile nav at 960px 
/* @media screen and (max-width: 768px) { .mobileNav { display: block; } } */
/* Show mobile nav at 1100px
@media screen and (max-width: 960px) { .mobileNav { display: block; } } */
@media screen and (max-width: 1100px) { .mobileNav { display: block; } }

@media screen and (max-width: 480px) { .mobileNav { right: -125%; } }
.mobileNav.open { right: 0px; }
.mobileNav.open ul { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-duration: 0.85s; -moz-animation-duration: 0.85s; animation-duration: 0.85s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInRightBig; -moz-animation-name: fadeInRightBig; animation-name: fadeInRightBig; }
.mobileNav .globalMenu { float: none; max-width: 50%; margin: 40px 0 0 50%; padding: 40px; font-size: 16px; }
@media screen and (max-width: 480px) { .mobileNav .globalMenu { max-width: 90%; margin: 40px 0 0 10%; } }
.mobileNav .globalMenu > li { display: block; }

.mobileNav .globalMenu > li a { 
  display: block; 
  box-sizing: border-box; margin: 0 0 0.625rem; 
  padding: .875rem 1rem .875rem 0; 
  font-size: 16px; 
  text-align: right; 
  font-weight: 700; 
  line-height: 1.3; 
  color: #00a5bb; 
  text-transform: uppercase; 
  text-decoration: none; 
  border-right: 4px solid #00a5bb; 
}

.mobileNav .globalMenu > li ul { margin: 0 1.25rem 0 0; }
.mobileNav .globalMenu > li ul li { text-align: right; }
.mobileNav .globalMenu > li ul li a { font-size: 14px; text-transform: none; border-right: none; color: #8c9aa5; }
.mobileNav .globalMenu > li ul li.selectedPage > a, .mobileNav .globalMenu > li ul li > a.selectedPageRoot, .mobileNav .globalMenu > li ul li > a.selectedPage { border-right: none; }

.mobileNav .globalMenu li.selectedPage > a, 
.mobileNav .globalMenu li > a.selectedPageRoot, 
.mobileNav .globalMenu li > a.selectedPage { 
  color: #7bc34b; 
  border-right: 4px solid #7bc34b; 
}

.mobileNav .search { float: none; text-align: right; margin: 0 40px 0 0; padding: 0 0 40px; }
.mobileNav .search input { max-width: 200px; width: 100%; padding: .5rem; border: 1px solid #efefef; border-radius: 2px !important; color: #006b89; }
.mobileNav .search .searchButton { display: none; }
.mobileNav .shoppingCartStatus { position: static; top: inherit; right: inherit; text-align: right; margin: 0 2.5rem 2.5rem 0; -webkit-transform: translate(0%, 0%); -moz-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); -o-transform: translate(0%, 0%); transform: translate(0%, 0%); }
.mobileNav .shoppingCartStatus a.cart-full { position: relative; background-color: #000000; border-radius: 3px; }

/* Footer - Social media links 
------------------------------------------------------------*/
section.social-media-column {
  background: #b0b4b7;
}
.home-page footer article.social-media-column, footer article.social-media-column {
    /*padding: 0;*/
    /*padding: 5px 1.5rem;*/
    padding: 5px 5%;
}
.social-media-column p.social-media {
  /*padding: 5px 0;*/
  color: #323232;
}
.social-media-column p.social-media img {
  cursor: pointer;
}

/* Footer
----------------------------------------------------------*/
footer { 
  font-size: 14px; 
  /*color: #004564;*/
  color: #777a7c; 
  background: #cacdcf; /* custom */
}

footer .columns .thirds .element { padding: 0 0 40px; background-color: transparent; }
footer .columns .thirds h1, footer .columns .thirds h2, footer .columns .thirds h3, footer .columns .thirds h4, footer .columns .thirds h5, footer .columns .thirds h6, footer .columns .thirds .title { font-size: 18px !important; color: #004564 !important; background-color: none !important; margin: 0; padding: 0; line-height: 1; text-align: left; }
footer a { color: #00a5bb; }
footer a:hover, footer a:link:hover, footer a:visited:hover { color: #002d49; }
footer p { font-size: 14px; }
footer .copyright { display: block; float: left; width: auto; margin: 0 0 0 0; padding: 0 0 0 0; }
footer .loginout { display: block; float: right; width: auto; height: auto; margin: 0 0 0 16px; }
footer .socialMedia { margin: 0 0 40px; }
footer .socialMedia li { display: inline; float: none; margin: 0 1.5rem 0 0; width: auto; height: auto; }
@media screen and (max-width: 768px) { footer .socialMedia li { display: block; float: left; width: 25%; margin: 0 0; }
  footer .socialMedia li a { display: block; width: 100%; margin: 0 0 1.25rem; } }
@media screen and (max-width: 640px) { footer .socialMedia li { width: 50%; } }
footer .socialMedia a, footer .socialMedia span { display: inline-block; text-align: left; direction: ltr; width: inherit; height: inherit; background: none; text-indent: 0px; }
@media screen and (max-width: 860px) { footer .copyright, footer .loginout, footer .socialMedia { float: none; margin: 0 0 1.5rem; } }

/* Footer - fifths columns 
-----------------------------------------------------------------*/
footer .columns .fifths .element { 
  padding: 0 0 40px; 
  background-color: transparent; 
}
footer .columns .fifths h1, 
footer .columns .fifths h2, 
footer .columns .fifths h3, 
footer .columns .fifths h4, 
footer .columns .fifths h5, 
footer .columns .fifths h6, 
footer .columns .fifths .title { 
  font-size: 18px !important; 
  color: #777a7c !important; 
  background-color: none !important; 
  margin-bottom: 10px; 
  padding: 0; 
  line-height: 1; 
  text-align: left; 
}
footer .columns .fifths p a {
  margin-bottom: 5px;
  text-decoration: none;
  color: #777a7c !important;
}
footer .columns .fifths {
    float: left;
    width: 19%;
    margin: 0 1% 0 0;
}
footer .columns .fifths p:last-child {
  margin-bottom: 25px;
}

/* Footer - footerquarters columns 
-----------------------------------------------------------------*/
footer .columns .quarters .element { 
  padding: 0 0 40px; 
  background-color: transparent; 
}
footer .columns .footerquarters h1, 
footer .columns .footerquarters h2, 
footer .columns .footerquarters h3, 
footer .columns .footerquarters h4, 
footer .columns .footerquarters h5, 
footer .columns .footerquarters h6, 
footer .columns .footerquarters .title { 
  font-size: 18px !important; 
  color: #777a7c !important; 
  background-color: none !important; 
  margin-bottom: 10px; 
  padding: 0; 
  line-height: 1; 
  text-align: left; 
}
footer .columns .footerquarters p a {
  margin-bottom: 5px;
  text-decoration: none;
  color: #777a7c !important;
}
footer .columns .footerquarters {
    float: left;
    width: 24%;
    margin: 0 1% 0 0;
}
footer .columns .footerquarters p:last-child {
  margin-bottom: 25px;
}


/* Privacy, terms of use etc. */
footer .text-align-right a {
	text-decoration: none;
    color: #777a7c !important;
}
footer .text-align-right a:hover {
	text-decoration: none;
}
.footer-hr {
	border-top: 1px solid #9fa2a4;
	padding-top: 10px;
}

@media screen and (min-width: 651px) and (max-width: 950px) { 
  footer .columns .fifths {
    width: 19%;
  }
}
@media screen and (min-width: 499px) and (max-width: 650px) { 
  footer .columns .fifths {
    width: 170px;
  }
}
@media screen and (max-width: 500px) {
  footer .columns .fifths { 
    float: none; 
    width: 100%; 
    margin: 0; 
    overflow: auto; 
  } 
}

/* h and titles */
@media screen and (max-width: 768px) { 
  footer .columns .fifths h1, 
  footer .columns .fifths h2, 
  footer .columns .fifths .title { 
    font-size: 24px; 
  }
  footer .columns .fifths h3, 
  footer .columns .fifths h4, 
  footer .columns .fifths h5, 
  footer .columns .fifths h6 { 
    font-size: 18px; 
  } 
}

/* Home page custom
----------------------------------------------------------*/
.home-page header.hero .container { max-width: 800px; margin: 0 auto .5rem; padding: 4.6875rem 0 0 0; }
.home-page header.hero .container ~ .element .textElement { padding: 0 0 4.6875rem 0; }
.home-page header.hero .textElement { max-width: 800px; margin: 0 auto 1.5rem; padding: 4.6875rem 0; }
.home-page header.hero .textElement:last-child { margin: 0 auto 0; }
.home-page .contents { min-height: inherit; }

.home-page article { 
  /*padding: 0 1.5rem;*/ 
  padding: 0 5%;
}

.home-page article.special { max-width: 1440px; /*padding: 1.5rem;*/ } /* other containers in site is 5% padding which is almost exactly 1.5rem - ah, screw it*/
/*.home-page article.special { max-width: 800px; padding: 0 1.5rem; }*/
.home-page article.special h1, .home-page article.special h2, .home-page article.special .title { font-size: 48px; }
@media screen and (max-width: 768px) { 
  .home-page article.special h1, 
  .home-page article.special h2, 
  .home-page article.special 
  .title { 
    font-size: 40px; 
  } 
  .home-page article.special .element {
    padding: 55px 0 !important;
  }
}
@media screen and (max-width: 640px) { .home-page article.special h1, .home-page article.special h2, .home-page article.special .title { font-size: 32px; } }
.home-page article.special h1, .home-page article.special h2, .home-page article.special h3, .home-page article.special h4, .home-page article.special h5, .home-page article.special h6, .home-page article.special p, .home-page article.special span { color: #ffffff; }
.home-page article.special .element { /*max-width: 500px;*/ margin: 0; padding: 75px 0; }

.home-page footer article, footer article { 
  /*padding: 75px 1.5rem; */
  /*padding: 35px 1.5rem; */
  padding: 35px 5%;
}

/* Single value classes 
--------------------------------------------------*/
.orange-nomadix {
  color: #ee8428 !important;
}
.asterisk {
  font-style: italic; 
  color: #949e9e;
}
.font-light {
	font-family: 'Proxima Nova Light';
}
.font-weight-100 {
	font-weight: 100;
}
.p-large-font {
  font-size: 18px;
  padding-bottom: 1rem;
}
.p-large-font-nopad {
  font-size: 18px;
}
.p-largest-font-nopad {
  font-size: 22px;
}
.mouse-cursor {
	cursor: pointer;
}
.relative-position {
	position: relative;
}
.text-align-right {
  text-align: right !important;
}
.text-align-center {
  text-align: center !important;
}
.text-align-left {
  text-align: left !important;
}
.margin-bottom-half-rem {
  margin-bottom: 0.5rem !important;
}
.margin-bottom-one-rem {
  margin-bottom: 1.0rem !important;
}
.margin-bottom-two-rem {
  margin-bottom: 2.0rem !important;
}
.margin-bottom-three-rem {
  margin-bottom: 3.0rem !important;
}
.margin-bottom-four-rem {
  margin-bottom: 4.0rem !important;
}
.margin-bottom-five-rem {
  margin-bottom: 5.0rem !important;
}
.margin-top-half-rem {
  margin-top: 0.5rem !important;
}
.margin-top-one-rem {
  margin-top: 1.0rem !important;
}
.margin-top-two-rem {
  margin-top: 2.0rem !important;
}
.margin-top-three-rem {
  margin-top: 3.0rem !important;
}
.margin-bottom-15 {
  margin-bottom: 15px;
}
.margin-bottom-25 {
  margin-bottom: 25px;
}
.padding-bottom-20 {
  padding-bottom: 20px;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.clearfix:after {
    content: " ";
    display: block;
    clear: both;
}

/* Widths */
.width-85-percent {
  width: 85%;
}

/* Green arrow icon */
.arrow-left-circle-bg {
  background: url(../images/arrow-left-circle-green.png) no-repeat left;
  padding-left: 35px;
}

/* Nomadix button with white arrow SVG */
.arrow-button {
	color: #fff; 
	display: inline-block; 
	padding: 0.6rem 1rem 0.6rem 3rem; 
	background: url(../images/arrow-left-circle-white.svg) 1rem center/25px 25px no-repeat #7bc34b;
  border-radius: 5px;
}

/* Single column, max-width 1440
Note: Custom single column 
--------------------------------------------------*/
.home-page article.single-column { 
  max-width: 1440px; 
  padding: 0 5%; 
}
.home-page article.single-column .element { 
  margin: 0; 
}

/* one-third, two-thirds columns
Note:  Img & text styles for custom code inside 'single-column'*/
a.arrow-left-circle-green::before {
	content: url(../images/arrow-left-circle-green.png);
	vertical-align: -35%;
	padding-right: 3px;
}
.max-width-1440 {
	height:100%;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto; /*centers this inner div*/
}
.display-inline-block {
	display: inline-block;	
}


/* Inside page columns
----------------------------------------------------------*/
.sec-page .contents-white .columns .two-thirds-first {
  width: 62%;
  float: left;
}
.sec-page .contents-white .columns .one-third-last {
  width: 30%;
  float: left;
  margin: 0 0 0 8%;
}
.sec-page .contents-white .columns .two-thirds-last {
  width: 62%;
  float: left;
  margin: 0 0 0 8%;
}
.sec-page .contents-white .columns .one-third-first {
  width: 30%;
  float: left;
}

.sec-page .contents .columns.equal .left {
    width: 46%;
}
.sec-page .contents .columns.equal .right {
    width: 46%;
    margin: 0 0 0 8%;
}

.sec-page .contents .columns .quarters {
  width: 23.5%;
  float: left;
  margin: 0 0 0 2%;
}

.sec-page .contents .columns .quarters:first-child {
  margin: 0;
}

/* Put space above (none below) single column title */
.sec-page .single-column-title .element {
	padding-top: 75px;
}

/* Problem with <section> inheriting inner element's margin, reason is margin collapse,
   see explaination @ http://stackoverflow.com/questions/1394724/css-margin-top-when-parents-got-no-border/1394795#1394795.
   Solution is must use padding instead of margins so that <section> doesn't inherit the top margin of the element*/
.sec-page #contents #article .main .element,
.sec-page #detailSection.contents .element,
.sec-page #formSection.contents-white .columns .element {
	padding: 75px 0;
	margin: 0px;
}

/* For containers with white backgrounds, remove top margin so 
   sections will now only have bottom margin so 75px will seperate 
   containers vertically. Different from colored sections where space 
   between containers is 75px+75px=150px because of the colored bg.*/
.sec-page #docsSection.contents-white .element,
.sec-page #detailWhtSection.contents.contents-white .element {
	margin: 0 0 75px;
}

/* Titles above columns */
.sec-page #detailSection.contents .single-column-title .element {
	padding-bottom: 0;
}

.sec-page .contents-white .columns .element,
.sec-page .contents-white .thirds-single-column .element,
.sec-page .contents-white .columns .two-thirds-first .element,
.sec-page .contents-white .columns .one-third-last .element,
.sec-page .contents-white .columns .two-thirds-last .element,
.sec-page .contents-white .columns .one-third-first .element {    
  margin: 75px 0;
}

.sec-page .contents .columns .quarters .element,
.sec-page .contents .columns .thirds .element, 
.sec-page .contents .columns.equal .left .element, 
.sec-page .contents .columns.equal .right .element { 
  /*margin: 0 0 75px 0; 
  Orig error? */
  margin: 75px 0;
  background-color: #ffffff; 
}

/* For columns on white background, remove padding so content will go edge to edge */
.sec-page .contents.contents-white .columns .quarters .element,
.sec-page .contents.contents-white .columns .thirds .element,
.sec-page .contents.contents-white .columns.equal .right .element,
.sec-page .contents.contents-white .columns.equal .left .element {
	padding: 0
}

/* Section with colored backgrounds */
.sec-page #contents #article .columns .element,
.sec-page #detailSection.contents .columns .quarters .element,
.sec-page #detailSection.contents .columns .thirds .element,
.sec-page #detailSection.contents .columns.equal .left .element, 
.sec-page #detailSection.contents .columns.equal .right .element {
	background: transparent;
}

/* Detail section with white background,
   remove unneeded padding from element. */
.sec-page #detailWhtSection.contents.contents-white .quarters .element,
.sec-page #detailWhtSection.contents.contents-white .thirds .element,
.sec-page #detailWhtSection.contents.contents-white .columns.equal .element {
   padding: 0
}

/* 4 COLUMN ONLY - break @ 886px */
@media screen and (max-width: 868px) {
  .sec-page .contents .columns .quarters {
    float: none;
    width: 100%;
    margin: 0;
    overflow: auto;
  }

  .sec-page #contents #article .columns .quarters:nth-child(2) .element,
  .sec-page #contents #article .columns .quarters:nth-child(3) .element,
  .sec-page #contents #article .columns .quarters:nth-child(4) .element,
  .sec-page #detailSection.contents .columns .quarters:nth-child(2) .element,
  .sec-page #detailSection.contents .columns .quarters:nth-child(3) .element,
  .sec-page #detailSection.contents .columns .quarters:nth-child(4) .element {
    padding-top: 0;
  }

  .sec-page #extraWhtSection #articleExtraWht .columns .quarters:nth-child(2) .element,
  .sec-page #extraWhtSection #articleExtraWht .columns .quarters:nth-child(3) .element,
  .sec-page #extraWhtSection #articleExtraWht .columns .quarters:nth-child(4) .element {
  	margin: 0 0 75px 0;
  }
}

@media screen and (max-width: 640px){
  .sec-page .contents-white .columns .one-third-last,
  .sec-page .contents-white .columns .two-thirds-last {
		width: 100%;
		float: none;
    margin: 0;
	}

  .sec-page .contents-white .thirds-single-column {
    padding: 0;
  }

  .sec-page .single-column-title .element {
	  padding-top: 55px;
  }

  .sec-page .contents-white .columns .two-thirds-first,
  .sec-page .contents-white .columns .one-third-first {
    width: 100%;
		float: none;
  }

  .sec-page .contents .columns.equal .left,
  .sec-page .contents .columns.equal .right {
    float: none;
    width: 100%;
    margin: 0;
    overflow: auto;
  }

  .sec-page #extraWhtSection #articleExtraWht .columns .quarters:nth-child(2) .element,
  .sec-page #extraWhtSection #articleExtraWht .columns .quarters:nth-child(3) .element,
  .sec-page #extraWhtSection #articleExtraWht .columns .quarters:nth-child(4) .element,
  .sec-page .contents .columns.equal .left .element, 
  .sec-page .contents .columns.equal .right .element,
  .sec-page .contents-white .columns .two-thirds-first .element, 
  .sec-page .contents-white .columns .one-third-last .element,
  .sec-page .contents-white .columns .one-third-first .element,
  .sec-page .contents-white .columns .two-thirds-last .element,
  .sec-page .contents .columns .thirds .element,
  .sec-page .contents .columns .quarters .element {
    margin: 55px 0 0;
  }

  .sec-page .contents .main .element,
  .sec-page .contents-white .columns .element,
  .sec-page .contents-white .thirds-single-column .element {
    margin: 55px 0;
  }

  .sec-page #extraWhtSection #articleExtraWht .columns .quarters:last-child .element,
  .sec-page .contents .columns.equal .right .element,
  .sec-page .contents-white .columns .one-third-last .element,
  .sec-page .contents-white .columns .two-thirds-last .element,
  .sec-page .contents .columns .thirds:last-child .element,
  .sec-page .contents .columns .quarters:last-child .element {
    margin-bottom: 55px;
  }

  .sec-page .contents .columns .thirds { 
    float: none; 
    width: 100%; 
    margin: 0; 
    overflow: auto; 
  } 

  /* using padding so margin values don't bubble up to <section>*/
  .sec-page #contents #article .main .element,
  .sec-page #detailSection.contents .element,
  .sec-page #formSection.contents-white .columns .element {
    padding: 55px 0; 
  }

  /* Stacked "white" sections need only bottom margins
     to stack correctly under other white sections */
  .sec-page #detailWhtSection.contents.contents-white .element {
    margin: 0 0 55px;
  }

  /* No top-padding so space between containers isn't doubled when foldered on narrow displays */
  .sec-page #contents #article .columns .thirds:nth-child(2) .element,
  .sec-page #contents #article .columns .thirds:nth-child(3) .element,
  .sec-page #contents #article .columns.equal .right .element,
  .sec-page #detailSection.contents .columns .thirds:nth-child(2) .element,
  .sec-page #detailSection.contents .columns .thirds:nth-child(3) .element,
  .sec-page #detailSection.contents .columns.equal .right .element {
  	padding: 0 0 55px; 
  }
}

@media screen and (min-width: 641px) and (max-width: 768px) {
  .contents .element,
  .sec-page .contents-white .columns .element,
  .sec-page .contents-white .thirds-single-column .element,
  .sec-page .contents-white .columns .two-thirds-first .element,
  .sec-page .contents-white .columns .one-third-last .element,
  .sec-page .contents-white .columns .two-thirds-last .element,
  .sec-page .contents-white .columns .one-third-first .element,
  .sec-page .contents .columns .quarters .element,
  .sec-page .contents .columns .thirds .element, 
  .sec-page .contents .columns.equal .left .element,
  .sec-page .contents .columns.equal .right .element {    
    margin: 55px 0;
  }

  .sec-page .contents-white .thirds-single-column {
    padding: 0;
  }

  .sec-page .single-column-title .element {
	  padding-top: 55px;
  }

  .sec-page #contents #article .main .element,
  .sec-page #detailSection.contents .element,
  .sec-page #formSection.contents-white .columns .element {
    padding: 55px 0; /* using padding so margin values don't bubble up to <section>*/
  }

  /* Stacked "white" sections need only bottom margins
     to stack correctly under other white sections */
  .sec-page #extraWhtSection #articleExtraWht .columns .quarters:nth-child(2) .element,
  .sec-page #extraWhtSection #articleExtraWht .columns .quarters:nth-child(3) .element,
  .sec-page #extraWhtSection #articleExtraWht .columns .quarters:nth-child(4) .element,
  .sec-page #detailWhtSection.contents.contents-white .element {
    margin: 0 0 55px;
  }
}

.sec-page .special { min-height: inherit; }

.sec-page .special article { 
  max-width: 100%; 
  width: 100%; 
  margin: 0 0 0 0;
  padding: 0 0 0 0; 
}

.sec-page .special h1, .sec-page .special h2, .sec-page .special h3, .sec-page .special h4, .sec-page .special h5, .sec-page .special h6, .sec-page .special .title, .sec-page .special p { margin: 0 0 1rem; color: #ffffff; text-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25); }
.sec-page .special h1:last-child, .sec-page .special h2:last-child, .sec-page .special h3:last-child, .sec-page .special h4:last-child, .sec-page .special h5:last-child, .sec-page .special h6:last-child, .sec-page .special .title:last-child, .sec-page .special p:last-child { margin: 0 0 0 0; }
.sec-page .special .element { margin: 0 0 0 0; padding: 0 0 0 0; }
/* Removed because stops hand-coded html in 'speical' container not to stretch edge to edge...
.sec-page .special .textElement { max-width: 1024px; width: 95%; margin: 0 auto; padding: 75px 0; }*/
.sec-page .special .imageElement { position: relative; }
.sec-page .special .imageElement img { width: 100%; }
.sec-page .special .imageElement .imgDescription { position: absolute; max-width: 1024px; width: 95%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
@media screen and (max-width: 640px) { .sec-page .special .imageElement { overflow: hidden; }
  .sec-page .special .imageElement img { max-width: none !important; width: auto !important; height: 100% !important; min-height: 150px; } }
.sec-page .main.sidebar-nav, .sec-page .side.sidebar-nav { float: left; width: 68.3593%; }
.sec-page .main.sidebar-nav .columns .thirds { width: 45.7142%; margin: 0 8.5716% 0 0; }
.sec-page .main.sidebar-nav .columns .thirds:nth-child(2) { margin: 0 0 0; }
.sec-page .main.sidebar-nav .columns .thirds:last-child { width: 100%; margin: 0 0 0 0; }
@media screen and (max-width: 640px) { .sec-page .main.sidebar-nav .columns .thirds { width: 100%; margin: 0 0 8.5716% 0; } }
.sec-page .main.sidebar-nav .columns.equal .element { min-height: inherit !important; margin: 0 0; }
.sec-page .main.sidebar-nav .columns.equal .left, .sec-page .main.sidebar-nav .columns.equal .right { width: 100%; margin: 0 0; }
.sec-page .main.sidebar-nav .columns.equal .left .element { margin: 0 0 4.6875rem; }
.sec-page .main.sidebar-nav .columns.equal .blogsElement .blogList .postFeaturedImage { position: inherit; left: inherit; top: inherit; max-width: 117%; width: 700px; margin: -29px 0 0 -25px; }

@media screen and (max-width: 768px) { 
  .sec-page .main.sidebar-nav .columns.equal .blogsElement .blogList .postFeaturedImage { 
    width: 720px; 
  } 
}

@media screen and (max-width: 640px) { .sec-page .main.sidebar-nav .columns.equal .blogsElement .blogList .postFeaturedImage { max-width: none; width: 312px; } }
.sec-page .main.sidebar-nav .columns.equal .blogsElement .blogList .postFeaturedImage a { display: block; width: 100%; outline: none; }
.sec-page .main.sidebar-nav .columns.equal .blogsElement .blogList .postFeaturedImage + .postContent, .sec-page .main.sidebar-nav .columns.equal .blogsElement .blogList .postFeaturedImage + .postThumb + .postContent { margin: 25px 0 0 0; }
.sec-page .main.sidebar-nav .columns.equal .blogsElement .blogList .postThumb { display: none; }
.sec-page .main.sidebar-nav .columns.equal .blogsElement .blogList .postContent .postTitle { max-width: auto; margin: 0 0 1rem; padding: 0; font-size: 24px; text-align: left; text-transform: none; }
.sec-page .main.sidebar-nav .columns.equal .blogsElement .blogList .postContent .postBody { max-width: 800px; margin: 0 auto; }
.sec-page .main.sidebar-nav .columns.equal .blogsElement .blogList .postContent .readMore { display: inline; margin: 0; text-transform: none; text-align: inherit; }
.sec-page .main.sidebar-nav .columns.equal .blogsElement .blogList .postInfo { display: none; }
.sec-page .side.sidebar-nav { width: 24.4140%; margin: 0 0 0 5.586%; font-size: 14px; }
.sec-page .side.sidebar-nav a { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; transition: none !important; }
.sec-page .side.sidebar-nav h1 a, .sec-page .side.sidebar-nav h2 a, .sec-page .side.sidebar-nav h3 a, .sec-page .side.sidebar-nav h4 a, .sec-page .side.sidebar-nav h5 a, .sec-page .side.sidebar-nav h6 a { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; transition: none !important; }
.sec-page .side.sidebar-nav h1, .sec-page .side.sidebar-nav .title { font-size: 24px; }
.sec-page .side.sidebar-nav h2 { font-size: 20px; }
.sec-page .side.sidebar-nav h3, .sec-page .side.sidebar-nav h4, .sec-page .side.sidebar-nav h5, .sec-page .side.sidebar-nav h6 { font-size: 18px; }
.sec-page .side.sidebar-nav .globalMenu { margin: 0 0 70px; font-size: 14px; }
.sec-page .side.sidebar-nav .globalMenu > li { margin: 0 0 0.3125rem; }
.sec-page .side.sidebar-nav .globalMenu > li a { display: block; width: 100%; padding: 0.4375rem 0 0.4375rem 1rem; box-sizing: border-box; color: #00a5bb; font-weight: 700; text-transform: uppercase; border-left: 4px solid #00a5bb; -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; transition: none !important; }
.sec-page .side.sidebar-nav .globalMenu li > a:hover { color: #004564; text-decoration: none; border-left: 4px solid #004564; }
.sec-page .side.sidebar-nav .globalMenu li.selectedPage > a, .sec-page .side.sidebar-nav .globalMenu li > a.selectedPageRoot, .sec-page .side.sidebar-nav .globalMenu li > a.selectedPage { color: #004564; border-left: 4px solid #004564; }
.sec-page .side.sidebar-nav .globalMenu li.selectedPage > a:hover, .sec-page .side.sidebar-nav .globalMenu li > a.selectedPageRoot:hover, .sec-page .side.sidebar-nav .globalMenu li > a.selectedPage:hover { color: #002d49; }
.sec-page .side.sidebar-nav .globalMenu ul { margin: 0.3125rem 0 0.3125rem 1rem; }
.sec-page .side.sidebar-nav .globalMenu ul li a { border-left: none; color: #8c9aa5; text-transform: none; }
.sec-page .side.sidebar-nav .globalMenu ul li a:hover { border-left: none; }
.sec-page .side.sidebar-nav .globalMenu ul li.selectedPage > a, .sec-page .side.sidebar-nav .globalMenu ul li > a.selectedPageRoot, .sec-page .side.sidebar-nav .globalMenu ul li > a.selectedPage { border-left: none; }
@media screen and (max-width: 768px) { .sec-page .side.sidebar-nav .globalMenu { display: none; } }
.sec-page .side.sidebar-nav .element { margin: 0 0 2.8125rem; }
@media screen and (max-width: 768px) { .sec-page .main.sidebar-nav, .sec-page .side.sidebar-nav { float: none; width: 100%; margin: 0 0 1.5rem; }
  .sec-page .side.sidebar-nav { margin: 0 0 0 0; } }

/* Detail page
----------------------------------------------------------*/
.detail-page .secondaryNav { display: none; }
.detail-page .hero { display: none; }
.detail-page .contents article .postFeaturedImage { margin: 0 auto 4.6875rem; }
.detail-page .contents article .postFeaturedImage + h1, .detail-page .contents article .postFeaturedImage + h2, .detail-page .contents article .postFeaturedImage + h3, .detail-page .contents article .postFeaturedImage + h4, .detail-page .contents article .postFeaturedImage + h5, .detail-page .contents article .postFeaturedImage + h6, .detail-page .contents article .postFeaturedImage + .title { max-width: 800px; margin: 0 auto 1rem; text-align: left; }
.detail-page .contents article h1, .detail-page .contents article h2, .detail-page .contents article h3, .detail-page .contents article h4, .detail-page .contents article h5, .detail-page .contents article h6, .detail-page .contents article .title { max-width: 800px; margin: 0 auto 1rem; text-align: left; }
.detail-page .contents article .blogsElement { max-width: 800px; margin: 0 auto; }
.detail-page .contents article .postBody { max-width: 800px; margin: 0 auto 2.5rem; }
.detail-page .contents article .postBody p::after { display: none; clear: none; }
.detail-page .contents article .postBody img { float: left; max-width: 1200px; margin: 0 0 1.5rem 50%; -webkit-transform: translate(-50%, 0%); -moz-transform: translate(-50%, 0%); transform: translate(-50%, 0%); }
@media screen and (max-width: 1200px) { .detail-page .contents article .postBody img { max-width: 100%; } }
.detail-page .contents article .postInfo { max-width: 800px; margin: 0 auto; padding: 0 0; font-weight: 700; text-align: left; text-transform: uppercase; color: #8c9aa5; }
.detail-page .contents article .postInfo .postViewInfo { margin: 0 0 0; padding: 0 0 0; border: none; font-size: 14px; text-align: left; }
.detail-page .contents article .postInfo .postViewInfo a { text-decoration: none; }
.detail-page .contents article .postInfo .postViewInfo span { display: none; }
.detail-page .contents article .postInfo .postViewInfo .postViewTags { display: block; }
.detail-page .contents article .blogBack, .detail-page .contents article .eventBack { text-align: center; margin: 4.6875rem auto; text-transform: uppercase; }
.detail-page .contents article .comments { max-width: 800px; margin: 0 auto; }
.detail-page .contents article .comments h1, .detail-page .contents article .comments h2, .detail-page .contents article .comments h3, .detail-page .contents article .comments h4, .detail-page .contents article .comments h5, .detail-page .contents article .comments h6 { margin: 0 auto 1rem; }
.detail-page .contents article .comments a#commentsForm { display: none; height: 0; margin: 0; padding: 0; line-height: 0; }
.detail-page .contents article .comments dl { margin: 0 0 1.5rem; font-size: 16px; }
.detail-page .contents article .comments dl dt { padding: 15px 15px 0 15px; background-color: #ffffff; font-weight: 700; border: none; text-transform: uppercase; }
.detail-page .contents article .comments dl dd { padding: 8px 15px 15px 15px; background-color: #ffffff; }
.detail-page .contents article .comments dl dd p.commentDate { padding: 8px 0 0 0; font-weight: 700; text-transform: uppercase; font-style: normal; color: #8c9aa5; }
.detail-page .contents article .comments dl dt.alternate, .detail-page .contents article .comments dl dd.alternate { background-color: #f7f7f7; }
.detail-page .contents article .comments label { font-weight: 700; font-size: 14px; text-transform: uppercase; }
.detail-page .contents article .comments input:not(.submitComment), .detail-page .contents article .comments textarea { width: 100%; resize: none; }
.detail-page .contents article .comments img { vertical-align: inherit; }
.detail-page .contents article .event { max-width: 800px; margin: 0 auto; }
.detail-page.dynamic-searchresults .element { max-width: 800px; margin: 0 auto; text-align: left; }
.detail-page.dynamic-searchresults .element .searchResults { max-width: 800px; margin: 0 auto; }
.detail-page.dynamic-searchresults .element .searchResults li { margin: 0 0 60px; padding: 0; }
.detail-page.dynamic-searchresults .element .searchResults li:last-child { margin: 0 0 0; }
.detail-page.dynamic-searchresults .element .searchResults li .searchTerm { background-color: #d0d0d0; }
.detail-page.dynamic-searchresults .element .searchResults li em { display: block; padding: 13px 0 0 0; color: #8c9aa5; text-align: left; font-style: normal; font-weight: 400; }
.detail-page.dynamic-searchresults .element #pagination { margin: 120px auto !important; }

/* Photo Gallery
----------------------------------------------------------*/
.photoGalleryElement .thumbShadow img { border: none; box-shadow: none; }
.photoGalleryElement .thumbnail .thumbContents { border: none; }
.photoGalleryElement .sldw_next a, .photoGalleryElement .sldw_prev a { width: 60px; height: 80px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.photoGalleryElement .sldw_next a { background: transparent url("../images/arrow.png") no-repeat scroll 0px 0px; }
.photoGalleryElement .sldw_next a:hover { background: transparent url("../images/arrow_hover.png") no-repeat scroll 0px 0px; }
.photoGalleryElement .sldw_prev a { background: transparent url("../images/arrow_left.png") no-repeat scroll 0px 0px; }
.photoGalleryElement .sldw_prev a:hover { background: transparent url("../images/arrow_left_hover.png") no-repeat scroll 0px 0px; }
.photoGalleryElement .sldw_caption h3 { font-size: 14px; text-transform: uppercase; }

/* Forms
----------------------------------------------------------*/
.form_container { margin: 0 auto 60px auto !important; }
.form_container .formHeader { margin: 0 0 1.2rem; padding: 0 0 0 0; }
.form_container .fieldItemInner, .form_container .submitButtonContainer { padding: 0 0 0 0 !important; }
.form_container .fieldItemInner .fieldTitle { margin: 0 0 .2rem; line-height: 1; }
.form_container .fieldItemInner .fieldTitle .req { color: #ff3800; }
.form_container .fieldItemInner .fieldTitle .uni { font-size: 14px; color: #d0d0d0; }
.form_container .fieldItemInner .title { font-size: 18px; line-height: 1; }
.form_container .fieldItemInner p.fieldRow { display: block; padding: 0 0 0 0; width: 100%; }
.form_container .fieldItemInner .fieldBlock { margin: 0 0 0; width: 100%; }
.form_container .fieldSelected { border: 1px solid #d0d0d0 !important; background-color: transparent !important; }
.form_container .type-sectionbreak { margin: 0 0 2.5rem; border: none; border-top: 4px solid #ff3800; }
.form_container .type-sectionbreak .fieldItemInner { display: none; }
.form_container .textField, .form_container select { padding: 10px !important; border: 1px solid #d0d0d0; }
.form_container .textField { -webkit-appearance: none; }
.form_container input[type="file"].textField { border: none; }
.form_container .choice-option { display: inline-block !important; padding: 8px !important; margin: 0 25px 0 0 !important; }
.form_container .choice-option input { margin: -7px 10px 0 0; }
.form_container .choice-option label { padding: 0 0 0 0 !important; font-size: 14px; text-transform: uppercase; }
.form_container .fieldNote, .form_container .fieldName, .form_container .fieldInstructions { font-weight: 400; font-size: 14px !important; text-transform: uppercase; color: #8c9aa5 !important; }
.form_container .fieldNote { margin: .5rem 0 0; }
.form_container .fieldInstructions { margin: 0 0 1.2rem; padding: 0; }
.form_container .submitButton { border: none !important; border-radius: 2px; }
.form_container .type-text input, .form_container .type-address input, .form_container .type-email input, .form_container .type-website input, .form_container .type-number input, .form_container .type-captcha input, .form_container .type-fileupload input, .form_container .type-paragraph textarea, .form_container .type-name input, .form_container .type-time select { box-sizing: border-box; width: 100% !important; }
.form_container .fieldBlock { padding: 0 0 0 0 !important; }
.form_container .type-name .fieldBlock { width: 48% !important; margin: 0 4% 0 0; }
.form_container .type-name .fieldBlock:last-child { margin: 0 0 0 0; }
.form_container .type-name .fieldName { display: none; }
.form_container .type-date input, .form_container .type-phone input, .form_container .type-time input { width: 70% !important; }
.form_container .type-date .fieldBlock, .form_container .type-phone .fieldBlock, .form_container .type-time .fieldBlock { width: 20% !important; }
.form_container .type-address .fieldRow:nth-child(3) .fieldBlock { width: 33%; }
.form_container .type-address .fieldRow:nth-child(3) .fieldBlock input, .form_container .type-address .fieldRow:nth-child(3) .fieldBlock select { width: 90% !important; }
.form_container .fieldSelected { background: transparent !important; border-color: transparent !important; }
@media screen and (max-width: 640px) { .form_container .fieldItem .fieldBlock { float: none; }
  .form_container .type-name .fieldBlock { width: 100% !important; margin: 0 0 4% 0; }
  .form_container .type-name .fieldBlock:last-child { margin: 0 0 0 0; }
  .form_container .type-date input, .form_container .type-phone input, .form_container .type-time input { width: 100% !important; }
  .form_container .type-date .fieldBlock, .form_container .type-phone .fieldBlock, .form_container .type-time .fieldBlock { width: 100% !important; }
  .form_container .type-address .fieldRow:nth-child(3) .fieldBlock { width: 100%; }
  .form_container .type-address .fieldRow:nth-child(3) .fieldBlock input { width: 80% !important; }
  .form_container .type-address .fieldRow:nth-child(3) .fieldBlock select { width: 100% !important; } }
.form_container .errorSummary { margin: 0 0 1.2rem; padding: .8rem; font-size: 14px; text-transform: uppercase; font-weight: 700; }
.form_container .fieldItemError { padding: 1rem 1rem 0 !important; margin: 0 0 1.2rem; background-color: #D0CCE3; }

/* confirmation popup
----------------------------------------------------------*/
.confirmation-content { box-sizing: border-box; padding: 60px; background: #ffffff !important; border: none; }

.confirmation-content-message { position: relative; margin: 0; padding: 0; }

.confirmation-content-message p { font-size: 18px; line-height: 1; margin-bottom: 20px; color: #545454; text-align: center; }

.confirmation-content-message p a { font-size: 18px; line-height: 1; color: #ff3800; }

/*Evite
----------------------------------------------------------*/
.EviteElement label { font-weight: 700; font-size: 14px !important; text-transform: uppercase; color: #d0d0d0 !important; }
.EviteElement p img { margin: 0 0 .75rem; }
.EviteElement .EviteButton { display: block; margin: 0 0 .5rem; border: none; border-radius: 2px; }
@media screen and (max-width: 640px) { .EviteElement input, .EviteElement textarea { max-width: 100%; width: 100%; -webkit-appearance: none; } }

/* Calendar
----------------------------------------------------------*/
.eventsElement .calendarTitle td { background-color: #006b89; }
.eventsElement .calendarTitle td.calendarNextPrevious a { color: #ffffff !important; }
.eventsElement .calendarTitle td.calendarNextPrevious a:hover { color: #002d49 !important; }
.eventsElement .calendarDayHeader { background-color: #004564; }
.eventsElement .eventsList ul li { margin: 0 0 1rem; }
.eventsElement .eventsList .eventDate { padding: 0 0 1rem; font-size: 12px; font-weight: 400; color: #8c9aa5; }

.event .eventDate { padding: 0 0 1rem; font-size: 12px; font-weight: 400; color: #8c9aa5; }
.event .eventDescription p { margin: 0 0 1rem; }

/* Shopping Cart
----------------------------------------------------------*/
.shoppingCartStatus { position: absolute; top: 0; right: 0; z-index: 99; line-height: 1; -webkit-transform: translate(-50%, 50%); -moz-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); -o-transform: translate(-50%, 50%); transform: translate(-50%, 50%); }
.shoppingCartStatus a.cart-full { box-sizing: border-box; margin: -1px 0 0 0; padding: 0px 30px 0 0 !important; border: none !important; border-radius: 2px; font-size: 14px; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 1; letter-spacing: .5px; color: #ffffff; background-color: #00a5bb; }
.shoppingCartStatus a.cart-full:hover { color: #ffffff; background-color: #002d49; text-decoration: none; }
.shoppingCartStatus a strong { display: inline-block; margin: 0 30px 0 0; padding: 13px 30px; color: #ffffff; background-color: #006b89; border-bottom-left-radius: 2px; border-top-left-radius: 2px; }
.shoppingCartStatus a span { display: block; position: absolute; z-index: 1; top: 18%; left: 85px; padding: 7px 9px; font-size: 12px; line-height: 1; background-color: #ffffff; color: #006b89; border-radius: 2px; }

@media screen and (max-width: 768px) { .hero .shoppingCartStatus { display: none; } }
.element .shoppingCart .cartItemsCount { display: none; }
.element .shoppingCartContainer .shoppingCart a.cartContinueShopping { display: none; }
.element .shoppingCartContainer .shoppingCart table.cartItems thead tr th { background-color: #006b89; color: #ffffff; }
.element .shoppingCartContainer .shoppingCart table.cartItems tbody td.cartQuantity input { width: 50px; }
@media screen and (max-width: 640px) { .element .shoppingCartContainer .shoppingCart table.cartItems tbody tr { border-bottom: 1px solid #e8eaec; }
  .element .shoppingCartContainer .shoppingCart table.cartItems tbody tr td { display: block !important; box-sizing: border-box; float: left; padding: 20px 12px !important; border-bottom: none; vertical-align: middle; }
  .element .shoppingCartContainer .shoppingCart table.cartItems tbody tr td.cartImage { width: 25%; }
  .element .shoppingCartContainer .shoppingCart table.cartItems tbody tr td.cartImage img { max-width: 150px; max-height: 150px; width: 100%; }
  .element .shoppingCartContainer .shoppingCart table.cartItems tbody tr td.cartDescription { width: 45%; }
  .element .shoppingCartContainer .shoppingCart table.cartItems tbody tr td.cartQuantity { width: 15%; }
  .element .shoppingCartContainer .shoppingCart table.cartItems tbody tr td.cartTotal { width: 15%; line-height: 39px; } }
.element .shoppingCartContainer .shoppingCart table.cartItems td.cartDiscount a.applyCode { padding: 0 !important; font-size: 16px; background: none; border: none; color: #ff3800; font-weight: bold; text-decoration: none; text-transform: capitalize; }
.element .shoppingCartContainer .shoppingCart table.cartItems td.cartDiscount a.applyCode:hover { outline: 0; color: #a30000; }
.element .shoppingCartContainer .shoppingCart table.cartItems .cartCheckoutButton { margin: 1.5rem 0 0; background-image: none; }
.element .shoppingCartContainer .shoppingCart table.cartItems .cartCheckoutButton input { margin: 0; padding: 0; text-transform: uppercase; text-align: center; }
@media screen and (max-width: 640px) { .element .shoppingCartContainer .shoppingCart table.cartItems .cartCheckoutButton input { display: inline-block; } }
.element .shoppingCartContainer .shoppingCart table.cartItems .cartSubtotalLabel { color: #8c9aa5; }
.element .shoppingCartContainer .shoppingCart table.cartItems .cartSubtotalPrice { color: #002d49; }
@media screen and (max-width: 640px) { .element .shoppingCartContainer .shoppingCart table.cartItems thead, .element .shoppingCartContainer .shoppingCart table.cartItems tbody tr td.cartPrice, .element .shoppingCartContainer .shoppingCart table.cartItems td.cartDiscount { display: none !important; } }

/* Product Listing
----------------------------------------------------------*/
.productListingElement .productListing li { margin: 0 0 4.375rem; border-bottom: 4px solid #ff3800; }
.productListingElement .productListing li:last-child { margin: 0 0 0; border-bottom: none; }
.productListingElement .productListing li span.productImageContainer { padding: 0 2.5rem 4.375rem 0; }
@media screen and (max-width: 640px) { .productListingElement .productListing li span.productImageContainer { padding: 0 0 3.125rem 0; }
  .productListingElement .productListing li span.productImageContainer img { width: 100%; } }
.productListingElement .productListing li h4.productType, .productListingElement .productListing li h4.productVendor { font-size: 12px; line-height: 12px; color: #8c9aa5; padding: 0 0 0.625rem; }
.productListingElement .productListing li h4.productType { padding: 0.625rem 0; }
@media screen and (max-width: 768px) { .productListingElement .productListing li span.productPriceContainer { margin: 0 0 4.375rem; } }
.productListingElement .productListing .productTitle a { display: inline; }
.productListingElement .productListing .productPrice { display: inline-block; }
.productListingElement .productListing.productListingGrid li.product { margin: 0 10% 10% 0; padding: 0; border-bottom: none; }
.productListingElement .productListing.productListingGrid li.product:nth-child(even) { margin: 0 0 10%; }
.productListingElement .productListing.productListingGrid li.product span.productImageContainer { float: none; margin: 0 0 1.5rem; padding: 0 0 0; }
.productListingElement .productListing.productListingGrid li.product span.productImageContainer a { width: 100%; }
.productListingElement .productListing.productListingGrid li.product img { width: 100%; }
@media screen and (max-width: 640px) { .productListingElement .productListing.productListingGrid li.product { float: none; width: 100%; margin: 0px 0px 3.125rem !important; padding: 0px 0px; }
  .productListingElement .productListing.productListingGrid li.product:last-child { margin: 0 0 !important; }
  .productListingElement .productListing.productListingGrid li.product span.productPriceContainer { margin: 0 0 0; } }
.productListingElement .productListing.tagList li.tag { border-bottom: none; }
.productListingElement .productListing.tagList li.tag a { border: 1px solid #d0d0d0; font: 700 0.625rem/1 "Oxygen", sans-serif; color: #00a5bb; letter-spacing: 2px; text-transform: uppercase; }
.productListingElement .productListing.tagList li.tag span.tagCount { background: #00a5bb; display: inline-block; font: 700 0.625rem/1 "Oxygen", sans-serif; color: white; }
.productListingElement .productUnavailable { display: block; }
.productListingElement .productAddToCart { padding: 1.125rem 1.25rem !important; font-size: 14px !important; line-height: 14px !important; letter-spacing: 2px; color: #ffffff !important; }
.productListingElement .productSelectOptions { display: block; color: #ffffff !important; }

.main.sidebar-nav .productListingElement .productListing li span.productImageContainer { margin: 0 0 2.5rem; padding: 0 0; }
.main.sidebar-nav .productListingElement .productListing li span.productPriceContainer { margin: 0 0 4.375rem; }
@media screen and (max-width: 640px) { .main.sidebar-nav .productListingElement .productListing li span.productPriceContainer { margin: 0 0 0; } }

/* Product Details
----------------------------------------------------------*/
.productDetailElement { max-width: 1000px; width: 100%; margin: 0 auto; }
.productDetailElement .productDetailImageContainer { width: 32%; padding: 0 4% 50% 0; }
@media screen and (max-width: 640px) { .productDetailElement .productDetailImageContainer { float: none; width: 100%; padding: 0 0 0 0; }
  .productDetailElement .productDetailImageContainer::after { content: ""; display: table; clear: both; } }
.productDetailElement .productDetailImageContainer .productDetailImageList { float: none; width: 100%; }
@media screen and (max-width: 640px) { .productDetailElement .productDetailImageContainer .productDetailImageList { float: none; width: 100%; padding: 40px 0; } }
.productDetailElement .productDetailImageContainer .productDetailImageList .productDetailImage { float: none; width: inherit; }
.productDetailElement .productDetailTitle { width: 100%; margin: 45px 0 0.5rem !important; font-size: 36px; text-align: left !important; }
.productDetailElement .productDetailTitle > a { display: block; margin: 0 0 .5rem; }
.productDetailElement .productDetailType, .productDetailElement .productDetailVendor { margin: 0 0 !important; padding: 0 0 0.625rem !important; text-align: left !important; font-size: 12px; line-height: 12px; color: #8c9aa5; font-weight: 400; }
.productDetailElement .productDetailType { padding: 0.625rem 0 !important; }
.productDetailElement .productDetailUnavailable { display: block; margin: 0 0 .25em; padding: 0px !important; }
.productDetailElement p.productDetailPriceContainer { width: 64%; }
.productDetailElement p.productDetailPriceContainer .productDetailPrice { color: #000000; }
.productDetailElement p.productDetailPriceContainer::after { display: none; }
.productDetailElement .productDetailAddToCartContainer { width: 64%; margin: 0 0 2.8125rem; padding: 2.8125rem 0; border-top: 4px solid #ff3800; border-bottom: 4px solid #ff3800; }
@media screen and (max-width: 640px) { .productDetailElement .productDetailAddToCartContainer { float: none; width: 100%; padding: 40px 0; } }
.productDetailElement .productDetailDescriptionContainer { width: 64%; }
@media screen and (max-width: 640px) { .productDetailElement .productDetailDescriptionContainer { float: none; width: 100%; padding: 40px 0; } }
.productDetailElement .productDetailDescriptionContainer .productDetailDescriptionTitle { margin: 0 0 10px; text-align: left; }
.productDetailElement div.productDetailTags { clear: none; float: left; width: 64%; margin: 2.8125rem 0 0 0; }
.productDetailElement div.productDetailTags ul li a { border: 1px solid #d0d0d0; font: 700 0.625rem/1 "Oxygen", sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #00a5bb; }

/* Login Page
----------------------------------------------------------*/
body.login-page { position: relative; }
body.login-page .wrapper { background-color: transparent; }
body.login-page .loginElement { max-width: 640px; width: 100%; background-color: transparent; box-sizing: border-box; margin: 10% auto 0; border: none !important; border-radius: 2px; box-shadow: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-duration: 0.7s; -moz-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: loginAnimation; -moz-animation-name: loginAnimation; animation-name: loginAnimation; }
body.login-page .loginElement .title { margin: 0 0 2.5rem; font-family: "Kaushan Script", cursive; font-size: 48px; color: #004564; text-transform: none; border-top-left-radius: 3px; border-top-right-radius: 3px; text-align: center; }
body.login-page .loginElement label { font-size: 14px; text-transform: uppercase; color: #00a5bb; font-weight: 700; }
body.login-page .loginElement div::after { content: ""; display: table; clear: both; }
body.login-page .loginElement div + div, body.login-page .loginElement div + span + div { padding: 30px; }
body.login-page .loginElement div:nth-child(2) { background-color: #f9f7f2; }
body.login-page .loginElement div p { margin: 0 0 1rem 0; }
body.login-page .loginElement div p input[type=text], body.login-page .loginElement div p input[type=password] { box-sizing: border-box; width: 100%; }
body.login-page .loginElement div p:nth-child(1), body.login-page .loginElement div p:nth-child(2) { float: left; width: 44%; margin: 0 12% 1rem 0; }
body.login-page .loginElement div p:nth-child(2) { margin: 0 0 1rem; }
body.login-page .loginElement div p:nth-child(3) { text-align: center; }
body.login-page .loginElement div p:nth-child(4), body.login-page .loginElement div p:nth-child(5) { text-align: center; }
body.login-page .loginElement .button { -moz-appearance: none; -webkit-appearance: none; border: none; border-radius: 2px; margin: 0 0 0 0; }
body.login-page .loginElement .forgot { margin: 1rem 0 0 0; }
body.login-page .loginElement .forgot a { font-size: 14px; }
body.login-page .loginElement input:not(.bttn):not(.submitComment), body.login-page .loginElement select, body.login-page .loginElement textarea { font-weight: 700; text-rendering: optimizeLegibility; border-radius: 2px; border: 1px solid #d0d0d0; padding: 15px; }
body.login-page .loginElement input:focus:not(.bttn):not(.submitComment), body.login-page .loginElement select:focus, body.login-page .loginElement textarea:focus { outline: none; border: 1px solid #004564; }
body.login-page .loginElement .error { display: block; padding: 20px 30px 0 30px; background-color: #f9f7f2; }
body.login-page .loginElement .error + div { background-color: #f9f7f2; }

/* Donations */
/* Sitemap and 404
----------------------------------------------------------*/
body.dynamic-sitemap .wrapper .contents, body.dynamic-404 .wrapper .contents { padding: 80px 0 0 0; }
body.dynamic-sitemap .wrapper .contents article, body.dynamic-404 .wrapper .contents article { max-width: 730px; text-align: left; }
body.dynamic-sitemap .wrapper .contents article h1, body.dynamic-404 .wrapper .contents article h1 { text-align: left; }
body.dynamic-sitemap .wrapper .contents ul.globalMenu ul, body.dynamic-404 .wrapper .contents ul.globalMenu ul { margin: 0 0 0 2rem; }
body.dynamic-sitemap .wrapper .contents.special, body.dynamic-404 .wrapper .contents.special { padding: 0 0; }
@media screen and (min-width: 1340px) { body.dynamic-sitemap .wrapper, body.dynamic-404 .wrapper { padding: 0 50px 120px; } }

/* LightCMS Theme adjustments
------------------------------------------------------------ */
.lcms_fancybox-title span, .lcms_fancybox-title p, .lcms_fancybox-title h1, .lcms_fancybox-title h2, .lcms_fancybox-title h3, .lcms_fancybox-title h4, .lcms_fancybox-title h5, .lcms_fancybox-title h6 { color: #ffffff; }

/* LIGHT CMS ADMIN SPECIFIC REWRITES 
------------------------------------------------------------ */
.lcms_AdminView .nav-icon { top: 100px; }
.lcms_AdminView .columns .left .actions + .element, .lcms_AdminView .columns .right .actions + .element, .lcms_AdminView .columns .thirds .actions + .element, .lcms_AdminView .columns.equal .left .actions + .element, .lcms_AdminView .columns.equal .right .actions + .element, .lcms_AdminView .columns.equal .thirds .actions + .element { margin: 0 0 4.6875rem; }
.lcms_AdminView .columns .left .container, .lcms_AdminView .columns .right .container, .lcms_AdminView .columns .thirds .container, .lcms_AdminView .columns.equal .left .container, .lcms_AdminView .columns.equal .right .container, .lcms_AdminView .columns.equal .thirds .container { margin: 0 0 0; }
.lcms_AdminView .productListingElement .productTitle a { display: block; margin: 0 0 .5rem; }
.lcms_AdminView .productListingElement .productTitle a + a { display: inline; margin: 0; }
.lcms_AdminView .productListingElement .productTitle a img { max-width: 16px; }

.admin .nav-icon { top: 100px; }

.lcms_pagebar { top: 130px; }

/* <textEditor> */
.bttn, .donationElement a.button { content: ""; }

.bttnWarm { content: ""; }

.blockquote { content: ""; }

.blockquoteLeft { content: ""; }

/* </textEditor> */

/* Navigation: 'Hitch' CSS for 'Hitch' navigation in header.inc */

.width {
	margin: 0 auto; 
	/*max-width: 1020px; 
  Note: Removed so main top menu stretches to fill browser width*/
	position: relative;
	width: 100%; 
  display: inline-block;
} 


/* NAVIGATION
------------------------------------------------------------ */ 

nav {
	/* original - background: rgba(255, 255, 255, .92);*/
  background: #fff;

	/*position: absolute;*/
  position: fixed;
	top: auto;
	left: 0;
	right: 0;
	z-index: 9999;
	text-align: center;

	/*min-height: 60px;
  Note: Make navigation height 60px; also see height in 'header article.nav {}'*/
  height: 60px;

	border-bottom: 1px solid rgba(175, 175, 175, .3);

	-webkit-transition: all .35s ease-in-out; 
	   -moz-transition: all .35s ease-in-out; 
	     -o-transition: all .35s ease-in-out; 
	    -ms-transition: all .35s ease-in-out; 
	        transition: all .35s ease-in-out;
}

/* after scroll nav fixes itself to top */
nav.fixed {
  position: fixed;
  top: 0;

  -webkit-animation: slidedown .75s ease-in-out;
  animation: slidedown .75s ease-in-out;
}
		
.admin nav {
  position: relative !important;

  -webkit-animation: none;
  animation: none;
}

nav ul li {
  display: inline-block;
  /*font-family: 'Proxima Nova Semibold', sans-serif;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 1px;*/
  font-family: 'Proxima Nova Light', sans-serif;
  font-size: 14px;
  
  color: #000;
  position: relative;
}

nav ul a {
  color: #000;
  display: block;
  padding: 15px 30px 10px;
  border-bottom: 3px solid transparent;

  /*Note: Added height so container and bottom border fit in shallow header menu*/
  height: 58px;
}

/*New: adjust height of level3 elements without moving other levels*/
.level3 > li > a {
  /*height: 15px;*/
  height: auto;
}
			
nav ul a:hover,
nav ul li:hover a {
  color: #000;

  /*border-bottom: 3px solid rgba(175, 175, 175, .3);
  Note: Change bottom border to nomadix green*/
  border-bottom: 3px solid rgba(104, 192, 40, 1);
}				
		
nav ul .selectedPage a,
nav ul .selectedParent a,
nav ul .selectedPageRoot a {
  color: #0086a7;
}
	

/* level 2 */

/* New! Added so level 2 dropdown menu isn't sooo deep */
ul.level2 > li > a {
  /*height: 15px - if menu text wraps we can't have a fixed height*/
  height: auto;
}

nav li:hover ul.level2, 
nav li:focus ul.level2 {
  display: block;

    -webkit-animation: fadein .55s;
        animation: fadein .55s;
}
		
nav .level2 {
  display: none;
  position: absolute;
  text-align: left;
  z-index: 9999;
  /*background: rgba(240, 240, 240, .92);
  Note: Changed bg color of level 2 dropdown to wht*/
  background: rgba(255, 255, 255, 1);

  /*border-top: 3px solid rgba(175, 175, 175, .3);
  Note: Change bottom border to nomadix green*/
  border-top: 3px solid rgba(104, 192, 40, 1);

  border-bottom: 1px solid rgba(175, 175, 175, .3);
  top: 58px;
  left: 0;
  padding: 0;
  /*Widen menu dropdown so 'Bandwidth Management appliances' wrap to 2nd lines*/
  width: 190px;
}
nav .level2 li {
  display: block;
  padding: 0;
  font-size: 14px;
  /* Add some line space */
  line-height: 20px;
  text-transform: none;
}

nav .level2 a {
  color: #000 !important;
  padding: 0;

  /*padding: 10px 30px;
  Note: Changed padding so dropdown menu is more compact*/
  padding: 10px 15px;

  border-bottom: 1px !important;
}

/* Breadcrumb, make 'level 2' selected page and selected page parent 
   nomadix green with wht text */
nav .level2 > .selectedPage > a,
nav .level2 > .selectedPageParent > a {
  background: #7bc34b;
  color: #fff !important;
}

/* incorrectly selection targets all links in level 3, active or not ...
nav .level2 li:hover > a, - orig*/
nav .level2 > li:hover > a,

nav .level2 a:hover

/* incorrectly selection targets all links in level 3, active or not ...
nav .level2 .selectedPage a, - orig
nav .level2 > .selectedPage > a, - modified & seperated, see above */

/* incorrectly selection targets all links in level 3, active or not ...
nav .level2 .selectedPageParent a - orig
nav .level2 > .selectedPageParent > a - modified & seperated, see above*/ {
  /*color: #0086a7 !important;
  background: rgba(175, 175, 175, .3);
  Note: Change colors of hover menu items*/
  color: #003f6d !important;

  /*background: rgba(104, 192, 40, .35);
  make this a soild color */
  background: #cae9b4;

  /*New - Remove underline*/
  text-decoration: none;
}

/* level 3 */
nav ul.level2 li:hover ul.level3, 
nav ul.level2 li:focus ul.level3 {
  display: block !important;

  -webkit-animation: fadein .55s;
          animation: fadein .55s;
}

nav .level3 {
  display: none;
  position: absolute;
  
  /*background: rgba(175, 175, 175, .9);
  Note: Dropdown bg wht*/
  /* Instead of white, make menu same color parent hover. 
  Shows users parent & children menus in the same color
  background: rgba(255, 255, 255, 1);*/
  background: #cae9b4;

  border: 1px solid rgba(175, 175, 175, .3);
  z-index: 999;

  /*top: 0;
  left: 199px; 
  Note: Reposition dropdown*/
  top: -1px;
  left: 190px;

  width: 180px;
}

nav .level3 li {
  display: block;
}

/* Breadcrumb - make selected page and parent nomadix green with wht text */
nav .level3 .selectedPage a,
nav .level3 .selectedPageParent a {
  background: #7bc34b;
  color: #fff !important;
}

nav .level3 li:hover a,
nav .level3 a:hover
/* moved above
nav .level3 .selectedPage a,
nav .level3 .selectedPageParent a*/
 {
  /*color: #0086a7 !important;
  background: rgba(175, 175, 175, .9) !important;
  Note: Change colors to match level 2*/
  /*color: #003f6d !important;*/
  color: #fff !important;

  /*background: rgba(104, 192, 40, 0.35) !important;
  make this a soild color */
  /* background: #cae9b4; 
  change hover color to darker than level 3 bg */
  background: #7bc346;
}

/* Partner login button ------------------------------------*/
/* Partner Login: normal state & transition*/
.partner-login {
  /*DIDNT WORK -force item to align properly*/
  /*left: 750px;
  margin-left: 12px;*/

  /* try float to position login */
  position: relative;
  float: right;
  top: 13px;
  margin-right: 15px;
  
	/*display: inline;*/ /*illegal to use this display with float - div width same as content*/
	border: 1px solid #68c028;
	padding: 5px 10px 1px 25px;
	background-repeat: no-repeat;
	background-position: 7px 2px;
	background-size: 11%;
	background-color: #fff;
	background-image: url('../images/icon-partner-login-green.png');
	color: #68c028;
	
	-webkit-transition: background-color 300ms linear, background-image 300ms linear, color 300ms linear;
	-moz-transition: background-color 300ms linear, background-image 300ms linear, color 300ms linear;
	-o-transition: background-color 300ms linear, background-image 300ms linear, color 300ms linear;
	-ms-transition: background-color 300ms linear, background-image 300ms linear, color 300ms linear;
	transition: background-color 300ms linear, background-image 300ms linear, color 300ms linear;
}

/* Partner Login: hover state & transition*/
.partner-login:hover {
	cursor: pointer;
	background-color: #68c028;
	background-image: url('../images/icon-partner-login-wht.png');
	color: #fff;
	
	-webkit-transition: background-color 300ms linear, background-image 300ms linear, color 300ms linear;
	-moz-transition: background-color 300ms linear, background-image 300ms linear, color 300ms linear;
	-o-transition: background-color 300ms linear, background-image 300ms linear, color 300ms linear;
	-ms-transition: background-color 300ms linear, background-image 300ms linear, color 300ms linear;
	transition: background-color 300ms linear, background-image 300ms linear, color 300ms linear;
}

.partner-login-mobile {
  position: relative;
  float: right;
  margin-right: 40px;
	border: 1px solid #68c028;
	padding: 5px 10px 1px 25px;
	background-repeat: no-repeat;
	background-position: 7px 2px;
	background-size: 11%;
	background-color: #fff;
	background-image: url('../images/icon-partner-login-green.png');
	color: #68c028;
}

.partner-login-wrapper {
  width: 100%;
  margin: 0 0 15px 0;
}

/* navigation responsive ------------------------------------ */	
@media screen and (max-width: 768px) {	
  
  nav::before {
    /* background: url(images/sprite.png) no-repeat 0 0; */ /* Unknown image, unknown usage - 03272019*/
    cursor: pointer;
    z-index: 99999;
    height: 25px;
    width: 25px;
    display: block;
    content: "";
    margin: 20px auto 0;
  }
			
  nav.fixed {
      -webkit-animation: none;
          animation: none;
  }
							
  nav ul {
    position: fixed;
    display: none;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    margin: 0;
    background: rgba(44,44,44, .98);
    float: none;
    text-align: center;
    padding-top: 12%;
    overflow: auto;
    z-index: 99999;

    -webkit-transition: all 0.55s ease-in-out; 
        -moz-transition: all 0.55s ease-in-out; 
          -o-transition: all 0.55s ease-in-out; 
        -ms-transition: all 0.55s ease-in-out; 
            transition: all 0.55s ease-in-out;
  }			
  nav ul.active {
    display: block;
    cursor: default;

      -webkit-animation: fadein .55s;
          animation: fadein .55s;
  }
					
  nav.fixed ul {
    top: 60px !important;
  }
					
  nav ul::before {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    background: #efefef;
    width: 33px;
    height: 33px;
    padding: 0;
    text-align: center;
    content: "x";
    color: #29292b;
    border-radius: 20px;
    font: bold 25px/30px 'Proxima Nova Semibold', sans-serif;
    cursor: pointer;
    
    -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
            box-sizing: border-box;
  }

  nav.fixed ul::before {
    display: none;
  }
					
  nav ul li {
    display: block;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 0;
  }
  
  nav ul a {
    padding: 10px 0;
    font-size: 20px;
    font-weight: 600;
    color: #fff !important;
    border-bottom: 0 !important;
  }
				
  /* level 2 / 3 */										
  nav .level2,
  nav .level3 {
    position: static;
    margin: 0;
    background-color: transparent;
    padding: 0;	
    width: 100%;
    min-width: 100% !important;
    display: block !important;
    left: auto !important;
    right: auto !important;
    border: none;

      -webkit-animation: none;
          animation: none
  }

  nav .level2::before, 
  nav .level3::before {
    display: none;
  }

  nav .level3 {
    padding-bottom: 0 !important;
  }
						
  nav .level2 li,
  nav .level3 li {
    border-bottom: 0;
    margin-right: 0 !important;
    display: block !important;
  }
					
  nav .level2 a,
  nav .level3 a {
    color: #fff !important;
    font-size: 15px;
    font-weight: 500;
    opacity: .7;
  }
  nav .level2 a:hover,
  nav .level3 a:hover {
    border-bottom: 0 !important;
  }
  
  nav .level3 a {
    font-size: 90%;
    opacity: .3 !important;
  }
  
  nav .level4 {
    display: none !important;
  }
}

/* Navigation: end */