/* removed these to accommodate older existing tables: table, caption, tbody, tfoot, thead, tr, th, td - also removed sup & sub */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
}
/* tds have a 1px padding by default - reset from above */
td {padding: 0;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
/* remember to define focus styles */
:focus {outline: 0;}
/* remember to highlight inserts somehow */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}



/* ------------------------------------------------------- */
/* ------ ABOVE is the RESET - BELOW is the REBUILD ------ */
/* ------------------------------------------------------- */

blockquote {
    padding: 18px;
    margin: 18px 0px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-bottom-color: #aaa;
}

hr {border: 0; background: #eee; color: #eee; height: 2px; margin: 18px 0;}

ul {list-style-type: disc;}
ul ul {list-style-type: circle;}
ul ul ul {list-style-type: square;}
ul ul ul ul {list-style-type: circle;}
ol {list-style-type: decimal;}
ol ol {list-style-type: lower-alpha;}
ol ol ol {list-style-type: decimal;}
ol ol ol ol {list-style-type: lower-alpha;}
ul, ol {margin: 18px 0 18px 40px;}
ul ul, ul ol, ol ol, ol ul {margin: 6px 0 6px 40px;}

/* prevents a 15px space at the bottom of single articles - blog separators are reset later */
span.article_separator {display: none;}

/* joomla structure protection */
table.contentpaneopen {width: 100%;}
.contentpaneopen td {padding: 0;}

/* tables in content */
.contentpaneopen table {margin: 0px 0px 18px 0px;}
.contentpaneopen table td, #tinymce table td {padding: 9px; border: 1px solid #ddd; vertical-align: top;}
.contentpaneopen table th, #tinymce table th {background: #ddd; color: #333; border: 1px solid #ddd; padding: 9px 0;}
/* borderless option */
.contentpaneopen table.borderless td {border: 0; padding: 0;}
#tinymce table.borderless td {border: 1px dotted #e0e0e0; padding: 0;}

/* old form protection */
#formContainer table {border-collapse: separate;}
#formContainer table td {font-size: 13px;}



/* --------------------------------------------- */
/* ------ TYPOGRAPHY --------------------------- */
/* --------------------------------------------- */

body, #tinymce td, #content-padding, input {
    font: 24px 'Roboto', Arial, Helvetica, sans-serif;
    line-height: 1.6em;
    color: #4A4A4A;
}

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

h1, h2, h3, h4, h5, h6, td.contentheading {}
h1, td.contentheading {
    font-size: 150%;
    line-height: 1.6em;
    padding: 0 0 20px 0;
}

h2 {
    font-size: 28px;
    line-height: 1.6em;
    margin-bottom: 1em;
}

h3 {
    font-size: 20px;
    line-height: 1.6em;
    margin-bottom: 1em;
}

h4 {
    text-transform: uppercase;
    font-size: 150%;
    line-height: 1.6em;
    margin-bottom: 1em;
}

h5 {
    text-transform: uppercase;
    font-size: 28px;
    line-height: 1.6em;
    margin-bottom: 1em;
}

h6 {
  text-transform: uppercase;
    font-size: 20px;
    line-height: 1.6em;
    margin-bottom: 1em;
}

h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child,
ul:first-child, ol:first-child {margin-top: 0px;}

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

a:hover, a:active {
text-decoration: none;
}



/* ---------------------------------- */
/* ------ MISC TOOLS ---------------- */
/* ---------------------------------- */

.clarence {clear: both !important;}
.spacey {margin: 0px 3px;} /* often wraps |s in link lists or small info */
.hidden {display: none !important;}
.float-left {float: left !important;}
.float-right {float: right !important;}
.no-float {float: none !important;}
.no-margin {margin: 0 !important;}
.no-left-margin {margin-left: 0 !important;}
.no-right-margin {margin-right: 0 !important;}
.no-top-margin {margin-top: 0 !important;}
.no-bottom-margin {margin-bottom: 0 !important;}
.v-margin-10 {margin-top: 10px !important; margin-bottom: 10px !important;}
.v-margin-20 {margin-top: 20px !important; margin-bottom: 20px !important;}
.h-margin-10 {margin-left: 10px !important; margin-right: 10px !important;}
.h-margin-20 {margin-left: 20px !important; margin-right: 20px !important;}
.top-margin-10 {margin-top: 10px !important;}
.top-margin-20 {margin-top: 20px !important;}
.bottom-margin-10 {margin-bottom: 10px !important;}
.bottom-margin-20 {margin-bottom: 20px !important;}
/* '.home' on the default menu item + '.hide-on-home' on the module */
body.home .hide-on-home {display: none !important;}
/* putting a class of 'full-width' on a menu item will hide the right-bar
    on that page. There's another mention of this class in the Breakpoints section */
.full-width .side-bar {display: none;}
.full-width #content-wrap.r-mid #content-padding {width: 100%;}


/* ----------------------------------- */
/* ------ LAYOUT --------------------- */
/* ----------------------------------- */

/* #bkg is the body - refer to it with this id to avoid inheritance by tinymce */
#bkg {background: white;}
.site-width {padding: 40px 20px;margin: 0 auto;max-width: 1420px;position: relative;}

#header .site-width {min-height: 49px;}

.mc-logo-link {overflow: hidden;float: left; margin: 0;position: absolute; top: 50%; -ms-transform: translate(0,-50%); transform: translate(0,-50%);}
.mc-logo-link img {max-width: 100%; height: auto;}

.featured-content {
    color: white;
    position: relative;
}
.featured-content .site-width {
    padding: 3.5em 20px;
}
.featured-content h3 {
  font-size: 160%;
  margin: 0 0 .8em;
}
.featured-content p {
    margin: .8em 0;
    font-size: 110%;
}
.featured-content h6 {
  margin: 0;
  padding: 0;
  text-align: center;
}
.featured-content h6 a {
  display: inline-block;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 140%;
  border-top: 2px solid rgba(255, 255, 255, 0.5);
  padding: 25px 30px;
  margin-top: .8em;
  border-radius: 4px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0px 6px 70px rgba(0, 0, 0, 0.5), 0px 3px 15px rgba(0, 0, 0, 0.3);
  background: #4a4a4a;
  transition: 0.3s;
}
.featured-content h6 a:hover, .featured-content h6 a:active {
    opacity: 1;
    transition: 0.15s;
    transform: scale(1.2);
    box-shadow: 0px 36px 140px rgba(0, 0, 0, 0.3), 0px 20px 160px rgba(0, 0, 0, 0.2);
    border-bottom-color: rgba(0,0,0,0.45);
}

/*
for containing floats */
.site-width:after {
  content: "";
  display: block;
  clear: both;
}

#component-wrap {min-height: 400px;}
#content-wrap.r-mid #content-padding {width: 960px; float: left;}
#content-padding {}

#right-bar, .side-bar {float: right;width: 380px;clear: right;}

#footer {color: #4a4a4a;background: #4a4a4a;font-size: 18px;}


/* Remove default padding, margin, and list-style from header, right-bar and footer lists */
#header ul, #right-bar ul, #footer ul {margin: 0 ; padding: 0; list-style: none;}

/* nivo slider main module - needs width for proper image resizing in Firefox */
.moduletable.slider-width {width: 100%;}

/**** Fix for Nivo Slider with links on the img tag in IE ****/
.nivoSlider a.nivo-imageLink{background: white; filter: alpha(opacity=0); opacity: 0;}

/****************/
/* --- PBMC --- */
/****************/
#pbmc-wrap {padding: 20px 0 0; text-align: center;}
#pbmc {font-size: 11px; line-height: 30px; height: 30px; display: block; width: 170px; margin: 0 auto; text-decoration: none !important;}
.icon-mc-logomark:before, .icon-mc-wordmark:before {font-size: 16px; line-height: 26px; position: relative; top: 4px; left: 1px;}
.icon-mc-wordmark:before {left: 2px;}
.mc-brand-container {display: none;}
#pbmc {color: rgba(0,0,0,0.3);}
#pbmc:hover {color: rgba(255,255,255,0.7);}


/*** Sidebar Styling and Modules ***/
.side-bar h3 {
  font-size: 20px;
  line-height: 1.6em;
  color: #50778F;
  margin: 0 0 10px;
  padding: 0 0 6px;
  text-transform: none;
  border-bottom: 1px solid #CEDAE1;
}
#right-bar .moduletable {margin-top: 30px;}
#right-bar .moduletable:first-child {margin-top: 0}
#right-bar {font-size: 70%;/* line-height: 1.6em; */}

div.login-search.side-bar {margin-bottom: 30px;}

/* Button List & Right-Bar Login Button */
.mc-button-list li a, .side-bar a#mcSimpleLogin {
  background: #4a4a4a;
  line-height: 16px;
  text-decoration: none;
  color: white;
  display: block;
  padding: 17px 0;
  text-align: center;
  border-radius: 3px;
}
.mc-button-list li a {margin-bottom: 1px}
.mc-button-list li a:hover, .side-bar a#mcSimpleLogin:hover {opacity: 0.8;}
.side-bar a#mcSimpleLogin {margin-bottom: 40px;}


/* ----------------------------------- */
/* ------ HEADER STUFF --------------- */
/* ----------------------------------- */

#header {
    background: white;
    height: 200px;
    position: fixed;
    top: 0;
    transition: top .3s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%;
    z-index: 90;
    padding: 0;
    padding-bottom: 60px;
    box-shadow: 0 3px 20px 0 rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,.6);
}

#header .site-width {height: 100%;padding: 0 20px;}

#header.nav-up {
    top: -260px;
    box-shadow: none;
    transition: top .3s ease-in-out, box-shadow .6s ease-in-out;
}

#bkg {padding-top: 220px;}

#search-login-bar {
  background: #150c66;
  background: #ddd;
  position: absolute;
  width: 100%;
  height: 60px;
  left: 0;
  bottom: 0px;
}

#search-login-bar .site-width {padding: 10px 20px;height: auto;}

#header #search-login-bar .bar-search {float: left;}
#header #search-login-bar .site-search input {
  float: left;
  height: 40px;
  width: 240px;
  border: 0;
  padding: 0 10px;
  margin: 0;
  line-height: auto;
  font-size: 60%;
  background: rgba(255,255,255,.2);
  color: white;
  border-radius: 3px 0 0 3px;
}

#header #search-login-bar .site-search a {
  float: left;
  font-size: 60%;
  display: inline-block;
  height: 40px;
  background: rgba(255,255,255,.3);
  color: rgba(255,255,255,.8);
  line-height: 41px;
  padding: 0 10px;
  border-radius: 0 3px 3px 0;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  }

#header #search-login-bar .bar-login {float: right;}

#header #search-login-bar #cta-join {
  font-size: 60%;
  display: inline-block;
  height: 40px;
  background: rgba(255,255,255,.3);
  color: rgba(255,255,255,.8);
  line-height: 41px;
  padding: 0 10px;
  border-radius: 3px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  }

#header #search-login-bar #mcSimpleLogin {
  font-size: 60%;
  display: inline-block;
  height: 40px;
  background: #2bc2f2;
  color: #fff;
  line-height: 41px;
  padding: 0 20px;
  border-radius: 3px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  margin-left: 10px;
}

#header #search-login-bar #mcSimpleLogin:hover,
#header #search-login-bar #cta-join:hover,
#header #search-login-bar .site-search a:hover {opacity: .8;}



/* Searches in the Sidebar
-------------------------------------------------- */

.side-bar .moduletable.mc-search div.mc-search {margin-top: 0;} /* because of collapsing margins, this is almost certainly not needed */
.side-bar .moduletable.mc-search.member-search {margin-top: 6px;} /* because of collapsing margins, this is almost certainly not needed */

.side-bar .moduletable.mc-search div.mc-search {
  position: relative;
  height: 30px
}
.side-bar .mc-search input.inputbox {
  border: none;
  display: block;
  background: #F1F1F1;
  color: rgba(0,0,0,0.2);
  width: 73.64%; /* ~ 162/220 rounded because of a wierd sub-pixel */;
  height: 20px;
  padding: 5px 2.272727272727%;
  font-size: 12px;
  border-radius: 3px 0 0 3px;
  margin: 0;
}

.side-bar .mc-search a.button.mc-search {
  background: #4a4a4a;
  color: white;
  border-radius: 0 3px 3px 0;
  display: block;
  position: absolute;
  top: 0; right: 0;
  height: 30px;
  line-height: 30px;
  width: 21.818181818182%; /* 48/220 */
  text-align: center;
  text-decoration: none;
  font-size: 12px;
}

.side-bar .mc-search a.button.mc-search:hover {opacity: 0.8;}


/* --- sponsor banners --- */
.bannergroup {width: 100%;}
.banneritem {width: 100%;}
.banneritem img {max-width: 100%; height: auto;}


/* --- simple menu --- */
/* put this class on a menu to achieve a clean, 1-level, horizontal menu */
.simple-menu {margin: 0; list-style: none; float: left;}
.simple-menu li:first-child {border: none;}
.simple-menu li {
    margin: 0; list-style: none; float: left;
    border-left: 1px solid #555;
    padding: 0px 10px;
    line-height: 16px;
}
.simple-menu li:first-child {}
.simple-menu li a {text-decoration: none; color: #555; color:}
.simple-menu li a:hover, .simple-menu li a:active, .simple-menu li a:focus {color: #333;}

/* --- social network menu --- */
.socnets {
  overflow: hidden;
  float: right;
  font-size: 16px;
}
.socnets ul {margin: 0; padding: 0; list-style: none;}
.socnets li {margin-left: 0.25em; float: left; list-style: none;}
.socnets li:first-child {margin-left: 0;}
.socnets a {
  font-size: 1em; /* 1em is 16px for the icon-font */
  /* just playing with basing this off the font size
  it's pretty cool - change the font-size and these values all play nicely */
  width: 1em;
  height: 1em;
  line-height: 1em;
  padding: 0.5em;
  border-radius: 50%;
  transition: 0.2s;
  display: block;
  color: #85A0B1;
  text-decoration: none;
  background: #808080;
}
.socnets a span {text-transform: lowercase;}
.socnets a span {width: 1em; overflow: hidden; display: block; height: 1em;}
.socnets a span:before {width: 1em; height: 1em; display: block}

/* Social Color */
.socnets .color li a.facebook {background: #4862A3; color: white;} /* Facebook */
.socnets .color li a.twitter {background: #55ACEE; color: white;} /* Twitter */
.socnets .color li a.wordpress {background: #0085BE; color: white;} /* Wordpress */
.socnets .color li a.youtube {background: #FF2A27; color: white;} /* YouTube */
.socnets .color li a.youtube2 {background: #FF2A27; color: white;} /* YouTube (alt logo) */
.socnets .color li a.vimeo {background: #44BBFF; color: white;} /*Vimeo*/
.socnets .color li a.googleplus {background: #DD4B39; color: white;} /* Google Plus */
.socnets .color li a.instagram {background: #634D40; color: white;} /* Instagram */
.socnets .color li a.rss {background: #FF9900; color: white;} /* Feed */
.socnets .color li a.pinterest {background: #CB2127; color: white;} /* Pinterest */
.socnets .color li a.flickr {background: #FE0084; color: white;} /* Flickr */
.socnets .color li a.linkedin {background: #0077b5; color: white;} /* LinkedIn */
.socnets .color li a.linkedin2 {background: #0077b5; color: white;} /* LinkedIn (alt logo) */

/* Social Icon */
.socnets .icon a {background: none;}
.socnets .color.icon li a {background: none;}
.socnets .color.icon li a.facebook {color: #4862A3;} /* Facebook */
.socnets .color.icon li a.twitter {color: #55ACEE;} /* Twitter */
.socnets .color.icon li a.wordpress {color: #0085BE;} /* Wordpress */
.socnets .color.icon li a.youtube {color: #FF2A27;} /* YouTube */
.socnets .color.icon li a.youtube2 {color: #FF2A27;} /* YouTube (alt logo) */
.socnets .color.icon li a.vimeo {color: #44BBFF;} /*Vimeo*/
.socnets .color.icon li a.googleplus {color: #DD4B39;} /* Google Plus */
.socnets .color.icon li a.instagram {color: #634D40;} /* Instagram */
.socnets .color.icon li a.rss {color: #FF9900;} /* Feed */
.socnets .color.icon li a.pinterest {color: #CB2127;} /* Pinterest */
.socnets .color.icon li a.flickr {color: #FE0084;} /* Flickr */
.socnets .color.icon li a.linkedin {color: #0077b5;} /* LinkedIn */
.socnets .color.icon li a.linkedin2 {color: #0077b5;} /* LinkedIn (alt logo) */

.socnets .rounded-sq a {border-radius: 3px;}

.socnets a:hover {background: #444; color: #fff;}


#RTT {color: #4a4a4a; text-decoration: none; float: right; clear: right; margin-top: 30px;}
#RTT span {font-size: 16px; position: relative; top: 3px; left: 1px}

.footer-info {float: left; max-width: 75%;}

/* ----------------------------------------- */
/* ------ FIXES and PREVENTIONS ------------ */
/* ----------------------------------------- */

html {-webkit-tap-highlight-color: white;}
#menu-toggle-x, #menu-toggle {-webkit-tap-highlight-color: rgba(0,0,0,0);}

/* its easy to end up with unwanted paragraphs after working in an online editor */
/* zeroing out these ps helps deal with the most common occurrences of that */
#header p {margin: 0;}
#footer p {margin: 0;}

#site-top .site-width,
#over-content .site-width,
#under-content .site-width {padding: 10px; text-align: center;}

#site-top .site-width *,
#over-content .site-width *,
#under-content .site-width * {margin: 0;}

/***Table protection**/
.scroll-indicator .table-wrapper {
  overflow: scroll;
  position: relative;
  background: white;
  border: 1px solid #ccc;
}
.scroll-indicator {
  padding-bottom: 15px;
  background: #333 url(/jmc-assets/misc/scroll-indicator.png) 95% bottom no-repeat;
  position: relative;
}
div.table-wrapper > table {margin: 0; background: transparent;}
div.table-wrapper table table {margin: 0}


/* Large Image Protection */
.img-wrapper { display: inline-block;}
div#component-wrap img {max-width: 100%; height: auto;}
div#component-wrap .slider-wrapper img {max-width: none;}


/* ----------------------------------------- */
/* ------ HORIZONTAL MENU with SUBS -------- */
/* ----------------------------------------- */

/* ------------------------ */
/* --- essential styles --- */
/* ------------------------ */
ul.resp-menu {background: none;}
.resp-menu, .resp-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 99;
}

.resp-menu ul,
#header.nav-up .resp-menu li:hover ul {
    position: absolute;
    top: -999em;
    /* left offset of submenus need to match (see below) */
    width: 300px;
}

.resp-menu ul li {width: 100%;}
.resp-menu li:hover {
    /* fixes IE7 'sticky bug' */
    visibility: inherit;
}
.resp-menu li:hover li {display: block;}
.resp-menu li {
    float: left;
    position: relative;
    z-index: 99;
}
.resp-menu a, .resp-menu .separator {
    display: block;
    position: relative;
}
.resp-menu li:hover ul {
    left: 20px;
    top: 45px; /* match top ul list item height */
    z-index: 99989;
}

.resp-menu>li:last-child:hover ul { /* makes the last submenu turn the other way */
    left: auto;
    right: 20px;
}

ul.resp-menu li:hover li ul {top: -999em;}
ul.resp-menu li li:hover ul {
    left: 220px; /* match ul width */
    top: 0;
}

ul.no-kids {display: none;}

/* Round sub-nav and padding */
#primary-menu .resp-menu ul {padding: 0 0; border-radius: 0px; box-shadow: 0 2px 9px rgba(0,0,0,0.2);}
#primary-menu .resp-menu ul li:hover ul {top: -7px;}
/* ------------------- */
/* --- custom skin --- */
/* ------------------- */
#primary-menu {}
ul.resp-menu {float: right;clear: right;position: absolute;right: 0;top: 50%;-ms-transform: translate(0,-50%);transform: translate(0,-50%);}
#primary-menu ul.resp-menu {right: 0px;}
/* 1st level */
.resp-menu > li {padding: 15px 0;}
.resp-menu > li:first-child > a, .resp-menu > li:first-child > .separator {border: 0;}
.resp-menu li > a, .resp-menu li > .separator {
    text-decoration:none;
    padding: 0px 20px;
    height: 16px;
    border: 0;
    line-height: 16px;
    color: #4A4A4A;
    font-size: 20px;
}

.resp-menu > li.active > a {}
.resp-menu > li:hover > a, .resp-menu > li:hover > .separator {color: blue;}
.resp-menu > li.active > a, .resp-menu > li.active > .separator {}

/* 2nd level */
#primary-menu .resp-menu ul {background: red}

#primary-menu .resp-menu > li.parent:hover ul::before {
  /* this character on the next line sometimes gets converted into a string of nonsense
    - if that happens rebuild the line to read: content: "\25b2" */
    content: "\25b2";
  font-size: 14px;
  color: #4a4a4a; color: #07b1ef;
  transform: scale(2,1);
  position: absolute;
  left: 10px;
  top: -20px;
}

/* border radius on second level */
#primary-menu .resp-menu > li.parent:hover ul {border-radius: 4px;}
#primary-menu .resp-menu > li.parent:hover ul li:first-child a {border-radius: 4px 4px 0 0;}
#primary-menu .resp-menu > li.parent:hover ul li:last-child a {border-radius: 0 0 4px 4px;}

#primary-menu .resp-menu > li.parent:last-child:hover ul::before {
  left: auto;
  right: 30px;
}

.resp-menu li li > a, .resp-menu li li > .separator {
    font-size: 18px;
    height: auto;
    line-height: 1.2em;
    min-height: 16px;
    padding: 12px 12px;
    text-shadow: none;
    background: none; /* set on ul */
    font-weight: normal;
    text-transform: none;
    border: 0;
    border-bottom: 1px solid red;
    text-align: left;
}

.resp-menu li li:last-child > a, .resp-menu li li:last-child > .separator {border: 0;}

#primary-menu .resp-menu li li:hover > a,
#primary-menu .resp-menu li li:hover > .separator {color: white;}

.resp-menu li li.active > a,
.resp-menu li li.active > .separator {text-decoration: underline;}

/* 3rd level - NOT APPLICABLE */
#primary-menu .resp-menu ul ul, .resp-menu ul ul {display: none !important;}



/*******************/
/* Off Screen Menu */
/*******************/
.mobile-menu {
    background: rgba(0,0,0,0.95);
    background: #000;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    display: none;
    margin: 0;
    padding: 0;
    z-index: 8;
}

a#menu-toggle-x {
    left: auto;
    top: 84px;
    right: 3.90625%;
    background: none;
    z-index: 9;
    position: fixed;
    height: 32px;
    width: 32px;
    display: none;
    fill: white;
    cursor: pointer;}
body.show-mobile a#menu-toggle-x {display: block;}

body.show-mobile > .mobile-menu {display: block;}

.site-container {
    min-width: 100%;
    min-height: 100%;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    }


a#menu-toggle {display: none; z-index: 2;cursor: pointer; }

body.show-mobile > .site-container {
    overflow-y: hidden;
    position:fixed;
    background: rgba(33,33,33,0.8);
    z-index: 7;
}

.login-search-menu {padding: 50px 0 20px; width: 56%}
.login-search-menu a#mcSimpleLogin {
  float: none;
  width: auto;
  margin: 0 20px 20px;
  font-size: 14px;
  color: white;
  }
.login-search-menu a#mcSimpleLogin:after {font-size: 32px; float: right; margin-top: 8px; margin-right: 1px; color: white;}

.login-search-menu .moduletable.mc-search {background: #222;}
.login-search-menu .moduletable.mc-search {float: none; width: auto; margin: 0 20px 2px; border: 0; height: 49px; line-height: 49px;}
.login-search-menu .moduletable.mc-search:after {font-size: 32px; top: 8px; right: 8px; color: rgba(255,255,255,0.7);}
.login-search-menu .mc-search input.inputbox {width: 80%; height: 39px; line-height: 39px; font-size: 13px; color: rgba(255,255,255,0.7);}

.mobile-menu ul.resp-menu {margin: 0 15% 0 0; float: none; width: auto; position: relative; top: 80px; -ms-transform: none; transform: none;}
.mobile-menu ul.resp-menu li {float: none; width: auto; display: block;}
.mobile-menu ul.resp-menu li ul {
  position: static;
  display: block;
  width: auto
}

.mobile-menu ul.resp-menu li li li {border: 0; padding-left: 20px;}

.mobile-menu ul.resp-menu li a, .mobile-menu ul.resp-menu li .separator {
  font-size: 24px;
  line-height: 1.2em;
  padding: 10px 30px !important;
  height: auto;
  background: none;
  color: #c0c0c0;
  color: #808080;
  text-decoration: none;
  border: 0;
}
.mobile-menu ul.resp-menu > li > a, .mobile-menu ul.resp-menu > li > .separator {color: #FFDF8F; font-weight: bold;}
.mobile-menu ul.resp-menu > li {margin-bottom: 30px;}

.mobile-menu ul.resp-menu li li li a:before, .mobile-menu ul.resp-menu li li li .separator:before {
  content: "\00BB  "
}

.mobile-menu ul.resp-menu li:hover a, .mobile-menu ul.resp-menu li:hover .separator {background: none;}

/*** Fix to remove extra padding if only two modules in login-search position ***/
.mobile-menu-top.modules-2 ~ .mobile-menu ul.resp-menu {padding-top: 210px;}

/*** Fix to remove extra padding if only a login button exists with no searches ***/
.mobile-menu-top.modules-1 ~ .mobile-menu ul.resp-menu {padding-top: 140px;}



/* ------------------------- */
/* ------ SEARCH PAGE ------ */
/* ------------------------- */
#mc-search-form .mc-button:hover {background: #333; color: white;}
.mc-result .highlight {background: #ff9; padding: 0px 5px;} /* text highlight on search terms in results */



/* ----------------------------------------- */
/* ------ LOGIN PAGE ----------------------- */
/* ----------------------------------------- */
/* precede with #content-padding to ensure we don't affect the login module */
#content-padding #form-login {max-width: 500px; margin: 0 auto; position: relative; overflow: hidden;}
#content-padding #form-login label {font-weight: bold; color: #4a4a4a;}
#content-padding #form-login input.inputbox {
    width: 92%;
    border: 1px solid #c4c4c4;
    border-radius: 3px;
    background: white;
    padding: 6px;
    color: #a4a4a4;
}
#content-padding #form-login input.inputbox:focus {border-color: #a4a4a4; color: #4a4a4a; box-shadow: none;}
#content-padding #form-login #form-login-remember label {font-size: 14px; font-weight: normal; color: #4a4a4a;}

#content-padding #form-login #modlgn_remember {width: auto; border: 0;}
#content-padding #form-login #modlgn_remember:focus {background: #4a4a4a; color: white; box-shadow: none;}

#content-padding #form-login input.button {
  border: 0;
  background: #4a4a4a;
  color: white;
  border-radius: 3px;
  padding: 7px;
  width: 50%;

  -webkit-appearance: none;     /* for iOS */
  -webkit-border-radius: 3px;   /* for iOS */
}

#content-padding #form-login input.button:hover {cursor: pointer; opacity: 0.8;}

#content-padding #form-login .forgot-username,
#content-padding #form-login .forgot-password {
  font-size: 0.8em;
  display: inline-block;
  margin-top: 40px;
  float: left;
}

#content-padding #form-login .forgot-username {margin-left: 20px;}



/* -------------------------------------------------- */
/* ------ GENERAL ARTICLE STYLES -------------------- */
/* -------------------------------------------------- */
/* some of these styles apply to the various article-related layouts like blogs but they cascade from here */

/* for front-end editing */
#editor-xtd-buttons a {color: #4a4a4a;}

/* logged-in admin edit tooltip - this is the tooltip itself, the button is in the next section */
div.tool-tip {z-index: 99999;}
div.tip-top {z-index: 99999;}
div.tip-text {
    font-size: 11px;
    color: #ddd;
    background: #333;
    border: 2px solid #555;
    border-top-width: 1px;
    padding: 6px 9px 9px 9px;
    z-index: 99999;
    box-shadow: 0px 3px 18px rgba(0,0,0,0.35);
}
div.tip-title {
    font-size: 11px;
    color: white;
    font-weight: bold;
    background: #333;
    border: 2px solid #555;
    border-bottom-width: 1px;
    padding: 9px 9px 6px 9px;
    z-index: 99999;
    box-shadow: 0px 3px 18px rgba(0,0,0,0.35);
}

/* article icons, pdf, print, email */
table.contentpaneopen td.buttonheading div.content-wrapper {width: 20px !important;}
.buttonheading a img {display: none;}
.buttonheading a {display: block; width: 16px; height: 16px; margin-left: 2px; opacity: 0.5;}
.buttonheading a:hover, .buttonheading a:focus {opacity: 1;}
.buttonheading a[title=PDF] {background: url(/jmc-assets/icons/article-1.png) 0 -100px;}
.buttonheading a[title=PDF]:hover {background-position: 0 0;}
.buttonheading a[title=Print] {background: url(/jmc-assets/icons/article-1.png) -100px -100px;}
.buttonheading a[title=Print]:hover {background-position: -100px 0;}
.buttonheading a[title=Email] {background: url(/jmc-assets/icons/article-1.png) -200px -100px;}
.buttonheading a[title=Email]:hover {background-position: -200px 0;}
/* admin edit button */
.buttonheading .hasTip a {background: url(/jmc-assets/icons/article-1.png) -300px -100px;}
.buttonheading .hasTip a:hover {background-position: -300px 0;}

/* article title if enabled */
td.contentheading {font-weight: bold; font-size: 16px;}
td.contentheading a {}

 /* written by */
.contentpaneopen span.small {font-size: 11px; color: #666;}
/* publish date */
td.createdate {font-size: 11px; color: #999; height: 36px;}
/* edit date */
td.modifydate {font-size: 11px; color: #999;}

/* 'read more' links */
.readon {
    display: inline-block;
    color: white;
    margin-top: 9px;
    padding: 3px 9px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 12px;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.7);
    background: #666;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.readon:hover, .readon:active {
    /* important allows for the default state to be reset without affecting this hover */
    background: #333 !important;
}

/* 'more articles' list at the bottom */
div.blog_more {margin: 18px 0;} /* entire section */
div.blog_more strong {} /* heading */
div.blog_more ul {margin: 0 40px 0;}

/* prev and next links at the bottom of single articles */
/* not the same as the blog - the blog nav lacks hooks to style */
.contentpaneopen table.pagenav th {background: transparent; border: 0;} /* prev and next are both in th's */
.contentpaneopen table.pagenav td {border: 0;} /* prevent inheritance - this td is just used for spacing */
.contentpaneopen .pagenav a {text-decoration: none;}



/* ---------------------------------------------- */
/* ------ CATEGORY BLOG & FRONT PAGE ------------ */
/* ---------------------------------------------- */

div.componentheading {display: none}
#community-wrap div.componentheading {display: block;}

/* columned article headings */
td.article_column td.contentheading {font-size: 14px; margin-bottom: 19px;}

/* leftmost blog column */
td.article_column {padding: 0;}

/* other blog columns */
td.article_column.column_separator {padding: 0 0 0 18px;}

/* horizontal blog separators - bottom stripe on all blog articles, even lead */
.blog span.article_separator {display: block; height: 2px; background: #ddd; margin: 18px 0;}
/* columned blog article separators can be specified here if needed */
.blog table span.article_separator {}



/* ---------------------------------------------- */
/* ------ CATEGORY LIST ------------------------- */
/* ---------------------------------------------- */
td.sectiontableheader {text-align: left; padding: 5px; width: auto;}
td.sectiontableheader a img {margin-left: 10px; position: relative; top: 2px;}
tr.sectiontableentry1 a, tr.sectiontableentry2 a {}
td.contentdescription {width: 100%;} /* Needed to fill the available space in IE8 */



/* ---------------------------------------------- */
/* ------ POLL RESULTS PAGE --------------------- */
/* ---------------------------------------------- */
/* without #poll, some of these apply to the module also */
#poll {width: 100%;}
#poll #id {width: auto !important; margin: 0 0 20px 20px;}
#poll .pollstableborder {width: 100%; border-bottom: 1px solid #ccc;}
#poll .pollstableborder td {padding: 9px !important;}
.pollstableborder th {padding-bottom: 18px;}
.pollstableborder th img {display: none;}
.pollstableborder {width: auto;}
.smalldark {font-size: 85%;} /* info at the bottom */

/* !NOTE! - multiple pages use these layout elements */
/* changing them here will also cause changes on the CatList page */
/* Polls use .sectiontableentry0 & 1, while CatList uses 1 & 2 */
.sectiontableentry0 td, .sectiontableentry1 td, .sectiontableentry2 td {
    border: 0 !important;
    background: none !important;
    font-size: 100% !important;
    text-align: left !important;
    vertical-align: middle !important;
    padding: 9px !important;
    font-weight: normal !important;
}
.sectiontableentry0 td, .sectiontableentry2 td {background: #eee !important;}



/* ---------------------------------------------- */
/* ------ ARCHIVE LIST -------------------------- */
/* ---------------------------------------------- */
#archive-list {margin: 18px 0 0 0;}
#archive-list li {padding: 18px;}
#archive-list li.row1 {}
#archive-list li.row2 {background: #eee;}
#archive-list h4 {}
#archive-list .metadata {margin: 9px 0 0; font-size: 11px; font-weight: normal; color: #666;}
#archive-list .metadata span.created-date {}
#archive-list .metadata span.author {float: right;}
#archive-list div.intro {margin-top: 9px;}



/* ------------------------ */
/* --- CC BOARD STYLING --- */
/* ------------------------ */
td.ccbheaderrow table.ccbnormaltable td {padding: 5px;} /* tds containing the menu and user info */
td.ccbtopleftgray, td.ccbtopmiddlegray, td.ccbtoprightgray {background: #4a4a4a !important;}
td.ccbleftbody, td.ccbheaderrow, td.ccbrightbody, td.ccbbotleft,
td.ccbbotmiddle, td.ccbbotright, td.ccbdatacolumn, td.ccbpostarea,
tr.ccbfrmrowheader, tr.ccbboardsummary {background: #eee !important;}
.bbcode_quote {border-color: #ddd; background: #fff;}
div.bbcode_quote_head {color: #aaa;}
div.bbcode_quote_body {color: #555;}
a.ovalbuttongray {
  background: #4a4a4a; /* - */
  display: block;
  float: left;
  font: inherit;
  line-height: inherit; /* - */
  height: auto; /* - */
  color: white;
  padding: 0 7px;
  text-decoration: none;
  margin-right: 10px;
  border-radius: 3px;
  font-size: inherit; line-height: 2em; /* - */
  }
a:link.ovalbuttongray {color: white;}
a.ovalbuttongray:hover, a.ovalbuttongray:active {color: white; opacity: 0.8;}
a.ovalbuttongray span {
  background: none;
  display: normal;
  color: inherit;
  padding: 0;
  }
a.ovalbuttongray:hover span {
  color: inherit;
  background: none;
  }
a.squarebutton {
  background: #aaa; /* - */
  display: block;
  float: right;
  font: inherit;
  line-height: inherit; /* - */
  height: auto; /* - */
  padding: 0 7px;
  margin-left: 4px;
  text-decoration: none;
  color: white;
  }
a:link.squarebutton {color: white;}
a:hover.squarebutton, a:active.squarebutton {color: white; opacity: 0.7;}
a.squarebutton span {
  background: none;
  display: normal;
  color: inherit;
  padding: 0;
  }
a.squarebutton:hover span {color: white; background: none;}

/* -------------------------------------------- */
/* --- MEMBER LANDING, 'MY NAME IS' STICKER --- */
/* -------------------------------------------- */
#my-name-is {
height: 262px;
position: relative; border-radius: 4px; overflow: hidden; margin: 0 0 10px 0;
background: url(/jmc-assets/misc/new-my-name-is.png) right top no-repeat;/* default black suit */
/*  background: url(/jmc-assets/misc/my-name-is-blue-polo.png) right no-repeat; /* blue polo shirt */
/*  background: url(/jmc-assets/misc/my-name-is-female.png) right no-repeat; /* female suit */
/*  background: url(/jmc-assets/misc/my-name-is-gray-t.png) right no-repeat; /* gray t-shirt */
/*  background: url(/jmc-assets/misc/my-name-is-medical.png) right no-repeat; /* medical lab coat */
/*  background: url(/jmc-assets/misc/my-name-is-tan-sweater.png) right no-repeat; /* tan sweater */
/*  background: url(/jmc-assets/misc/my-name-is-worker.png) right no-repeat; /* general worker */
}
#my-name-is:before, #my-name-is:after {
  position: absolute;
  left: auto;
  right: 11px;
  width: 354px;
  color: white;
  text-align: center;
  font-family: Arial, sans-serif;
}
#my-name-is:before {
  content: "HELLO";
  top: 20px;
  font-size: 45px;
  font-weight: bold;
  line-height: 45px;
}
#my-name-is:after {
  content: 'my name is';
  top: 70px;
  font-size: 18px;
  font-weight: normal;
  line-height: 18px;
}
#my-name-is .info {
  position: absolute; right: 11px; top: 105px;
  width: 354px; height: 120px; overflow: hidden; text-align: center;
  background: white;
}
#my-name-is h2 {
  font-size: 30px; color: #555; margin: 0;
}
#my-name-is h3 {
  font-size: 16px; color: #666; margin: 10px 0 0; line-height: 20px;
}
#my-name-is h4 {
  font-size: 16px; color: #666; margin: 0; padding: 0;
  position: absolute; bottom: 0; left: 0; width: 100%; text-align: center;
}
#my-name-is h2, #my-name-is h3, #my-name-is h4 {font-family: 'Comic Sans MS', cursive, sans-serif;}

#profile-update-message {
  position: absolute; left: 0px; bottom: 4px; margin: 0; padding: 5px 10px;
  font-size: 12px; color: #999; border-radius: 0 4px 4px 0; background: rgba(0,0,0,0.8);
  line-height: 18px;
}
#profile-update-message a:link {color: white;}
#profile-update-message a:hover, #profile-update-message a:active {color: white;}

/* ----------------------------------- */
/* --- MEMBER LANDING, QUICK LINKS --- */
/* ----------------------------------- */
.member-landing-quick-links {
  border-radius: 4px;
  margin: 0 0 10px 0; padding: 10px 5px;
  background: #eee;
}
.member-landing-quick-links ul {margin: 0; padding: 0; list-style: none; overflow: hidden;}
.member-landing-quick-links ul li {float: left; border-left: 1px solid #bbb; padding: 0px 5px;}
.member-landing-quick-links ul li:first-child {border: 0;}



/* -------------------------- */
/* --- HOME PAGE TEMPLATE --- */
/* -------------------------- */
.home-template-01 {}
.home-main {
  border-bottom: 1px solid #a4a4a4;
  padding-bottom: 23px;
}
.home-sub {
  width: 47.881355932203%;
  float: left;
  margin: 40px 0 0;
}
.home-sub:nth-child(odd) {margin-right: 4.237288135593%; clear: left;}

.homev2-template-01 {display: table;}
.homev2-main {}
.home-subv2 {
    display: table-cell;
}
.home-subv2:first-child {}
.sub-modulesv2 .padv2 {}
.sub-modulesv2 .home-subv2:first-child .padv2 {}



/* ----------------------- */
/* --- CALENDAR MODULE --- */
/* ----------------------- */
#right-bar span.multiday, #right-bar .mod_events_latest_date {font-size: 14px; line-height: 1.6em}
#right-bar .event-list-cat {font-size: 14px; line-height: 1.6em}



/* ---------------------- */
/* --- DIY H6 BUTTONS --- */
/* ---------------------- */
h6 a, .button-grid a {
  background: #4a4a4a;
  color: white;
  font-weight: normal;
  font-size: 14px;
  text-decoration: none;
  padding: 8px;
  border-radius: 3px;
  display: block;
  text-align: center;
  /* max-width: 364px; */
  margin: 0 auto;
  text-decoration: none;
}
.home-sub h6 a {max-width: none}
.button-grid a {
  margin: 10px auto;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
h6 a:hover, h6 a:active, .button-grid a:hover {opacity: 0.8;}

/* Grid Layout */
.grid-layout, .button-grid, .mc-columns .content-wrapper {
  -webkit-columns: 216px 3;
  -moz-columns: 216px 3;
  columns: 216px 3;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  margin-bottom: 20px;
}

.grid-layout img, .mc-columns .content-wrapper img {float: left; margin: 0 10px 10px 0; display: block;}

.grid-box, .button-grid p, ul.button-grid li {
  display: inline-block;
  width: 100%;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin: 0;
}

table.grid-table td {border: 0; padding: 0;}
blockquote.button-grid, blockquote.grid-layout {margin: 0; padding: 0; border: 0; background: none;}
ul.button-grid, ul.button-grid li {margin: 0; list-style: none; padding: 0}


/* Floats */
.mc-image-left, .mc-image-left-large {float: left; margin: 0 13px 10px 0; clear: left;}
.mc-image-right, .mc-image-right-large {float: right; margin: 0 0 10px 13px; clear: right;}



/* ------------------- */
/* --- BREAKPOINTS --- */
/* ------------------- */

/*
Baseline is Tablet Landscape */
#phone-portrait, #phone-landscape, #tablet-portrait, #tablet-landscape {
  display: none; position: absolute; top: -100%; left: -100%; height: 1px; width: 1px;
}

#tablet-landscape {display: block;}

@media screen and (max-width: 1410px) {
  #content-wrap.r-mid #content-padding {width: auto; float: none;}
  #right-bar {float: none; width: auto;}
  .home-sub,
  .side-bar .moduletable {
    width: 47.881355932203%;
    float: left;
    margin: 100px 0 0;
    padding: 0;
    background: none;
  }
  .home-sub:nth-child(odd),
  .side-bar .moduletable:nth-child(odd) {margin-right: 4.237288135593%; clear: left;}
  #right-bar.side-bar .moduletable {margin-top: 30px}
  #right-bar {font-size: 14px;}
}

@media screen and (min-width: 1000px) {
  .full-width .home-sub {width: auto; max-width: 47.881355932203%;}
}

@media screen and (max-width: 1220px) {
    .resp-menu li > a, .resp-menu li > .separator {font-size: 15px;}
}

/*
Tablet Portrait */
@media screen and (max-width: 1140px) {
  a[href*="task=edit"] {display: none;} /* the front-end edit button */
  #primary-nav-container, #tablet-landscape, .login-search, #primary-menu {display: none;}
  #tablet-portrait {display: block;}
  .mc-logo-link {max-width: 75%;}

  a#menu-toggle {
    height: 32px;
    width: 32px;
    background: none;
    position: absolute;
    top: 50%;
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
    right: 20px;
    display: block;
    text-decoration: none;
  }

  a#menu-toggle-x {
    left: auto;
    top: 84px;
    right: 20px;
    background: none;
    z-index: 9;
    position: fixed;
    height: 32px;
    width: 32px;
    fill: white;
    cursor: pointer;
  }

  body.show-mobile > a#menu-toggle-x {display: block;}
  .site-width {padding: 30px 20px; width: auto;}

/*
  #featured-content {background-size: auto 310px; font-size: 18px; line-height: 24px;}
  #featured-content .site-width {height: 310px; padding: 0;}
  #featured-content h3 {font-size: 24px; line-height: 32px; padding: 30px 30px 20px;}
  #featured-content h6 {bottom: 30px;}
  #featured-content p {padding: 0 30px; height: 130px; overflow: hidden;}
*/

  .mobile-menu-top {min-height: 48px;}
  .mobile-menu-top.modules-0 ~ .mobile-menu ul.resp-menu {padding-top: 70px;}

}

/* Just for the Hero Text */
/*
@media screen and (max-width: 780px){
  #featured-content {font-size: 15px; line-height: 20px;}
}
*/

/* 6 Plus Landscape */
@media screen and (max-width: 736px){
    .login-search-menu a#mcSimpleLogin,
    .login-search-menu .moduletable.mc-search {height: 30px; line-height: 30px; margin: 0 20px 2px 20px;}
    .login-search-menu a#mcSimpleLogin {margin-bottom: 10px;}
    .login-search-menu .mc-search input.inputbox {height: 20px; line-height: 20px}
    .login-search-menu a#mcSimpleLogin:after {margin-right: 5px}
    .login-search-menu a#mcSimpleLogin:after,
    .login-search-menu .moduletable.mc-search:after {font-size: 16px;}
    .mobile-menu ul.resp-menu {/* padding-top: 180px; */}
    .mobile-menu-top.modules-2 ~ .mobile-menu ul.resp-menu {padding-top: 160px;}
    .mobile-menu-top.modules-1 ~ .mobile-menu ul.resp-menu {padding-top: 120px;}
}

/* Phone Landscape */
@media screen and (max-width: 650px) {
  #tablet-portrait {display: none;}
  #phone-landscape {display: block}

    #header {
        height: 120px;
        padding-bottom: 110px;
    }
    #header.nav-up {
        top: -230px;
    }
    #bkg {
        padding-top: 230px;
    }
    .mc-logo-link img {
      height: auto;
      max-width: 200px;
    }
    #search-login-bar {
        height: 110px;
    }
    #header #search-login-bar .bar-search {
        width: 100%;
        float: none;
        height: 40px;
    }
    #header #search-login-bar .site-search input {
        height: 40px;
        width: 80%;
        padding: 0;
        text-indent: 10px;
    }
    #header #search-login-bar .site-search a {
        height: 40px;
        width: 20%;
        padding: 0;
        text-align: center;
    }
    #header #search-login-bar .bar-login {
        float: none;
        height: 40px;
        margin-top: 10px;
    }
    #header #search-login-bar #cta-join {
        height: 40px;
        width: 50%;
        text-align: center;
        padding: 0;
        border-radius: 3px 0 0 3px
    }
    #header #search-login-bar #mcSimpleLogin {
        height: 40px;
        margin-left: 0;
        width: 50%;
        text-align: center;
        padding: 0;
        border-radius: 0 3px 3px 0;
    }

  .site-width {padding-left: 10px !important; padding-right: 10px !important;}
  #menu-toggle {right: 10px !important;}

/*   #featured-content {background-size: auto 280px; font-size: 18px; line-height: 20px;}
  #featured-content .site-width {height: 280px;}
  #featured-content h3 {font-size: 20px; line-height: 24px;}
  #featured-content h6 {bottom: 20px;}
  #featured-content h6 a {font-size: 18px; height: 40px; line-height: 40px;}
  #featured-content p {height: 170px; overflow: hidden;} */

  a#menu-toggle, a#menu-toggle-x {right: 20px; top: 50%; -ms-transform: translate(0,-50%); transform: translate(0,-50%);}
  a#menu-toggle-x {-ms-transform: none; transform: none;}

  .login-search-menu a#mcSimpleLogin, .login-search-menu .moduletable.mc-search {margin-left: 10px; margin-right: 10px;}

  .login-search-menu {width: 78.125%; padding-bottom: 8px;}
  .mobile-menu-top.modules-2 ~ .mobile-menu ul.resp-menu {padding-top: 150px;}
  .mobile-menu-top.modules-1 ~ .mobile-menu ul.resp-menu {padding-top: 110px;}
  .login-search-menu .mc-search input.inputbox {width: 75%}


  .mobile-menu ul.resp-menu li a, .mobile-menu ul.resp-menu li .separator {padding: 2px 10px;}
  #right-bar .moduletable {float: none; width: auto; margin-right: 0;}
  .footer-info, .socnets, #RTT {float: none; text-align: center; margin: 0 0 20px 0; display: block; max-width: none}
  .socnets li {display: inline-block; float: none; margin: 0 4px;}
  #RTT {margin: 0;}

  .sub-modules div.home-sub {float: none; width: auto; margin-right: 0;}

  /***Member Landing Page***/
  #profile-update-message {
    width: 97%;
    border-radius: 4px;
    bottom: -32px;
    padding-left: 1.5%; padding-right: 1.5%;
  }
  #my-name-is {
    background-image: none;
    background-position: center 20px;
    background-repeat: no-repeat;
    border-radius: 3px;
    padding-top: 100px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 36px;
    overflow: visible;
  }
  #my-name-is:before, #my-name-is:after {
    left: 0;
    right: auto;
    width: 100%;
  }
  #my-name-is .info {
    width: auto;
    background: white;
    position: static;
    text-align: center;
    height: auto;
    padding-top: 5px;
    border-width: 1px;
    border-style: solid;
  }
  #my-name-is h3 {margin-bottom: 20px;}
  #my-name-is h4 {position: relative; margin-bottom: 5px;}
  .member-landing-quick-links ul li {border: 0;}

  /* Fix for filter box in Category List layout */
  table.contentpane td input.inputbox[name="filter"] {width: 40%}

  .mc-image-left, .mc-image-right {max-width: 40% !important;}
  .mc-image-left-large, .mc-image-right-large {display: block; float: none; margin: 10px 0; width: auto;}
}



/* Just for the Hero Text */
/* @media screen and (max-width: 475px){
  #featured-content {font-size: 15px; line-height: 18px;}
} */

/* Just for the Hero Text */
/* @media screen and (max-width: 400px){
  #featured-content {font-size: 13px; line-height: 16px;}
}
 */



/* ------------------- */
/* --- MC FORM CSS--- */
/* ------------------- */


.ngdialog.ngdialog-theme-default .ngdialog-content {font-size: .8em;}
.gen-button, .alt-button {
  font-size: .7em !important;
  line-height: 2em !important;
  padding: 0 20px !important;
  height: auto !important;
}
.gen-button:hover {
  color: inherit !important;
  background: #e2e2e2;
}
#form-view fieldset legend{
  font-size: 1.2em;
  margin: 0;
}
#form-view fieldset legend h2{
  font-size: 1.2em;
  margin: 0;
}
span.green{
  color: green;
}
.white{
  background: #fff !important;
}
.clearfix{
  clear: both;
}
.red{
  color: red;
}
.green{
  color: green;
}
#form-view .lead{
  font-size: inherit;
}
#form-view .title{
  font-size: inherit;
}
#form-view p.low{
  font-size: 0.7em;
  line-height: 1.4em;
}
#form-view .form-view-error,
#form-view .lead,
#form-view .title {
  font-size: .7em;
  line-height: 1.4em;
}
#form-view .layout-element{
  margin: 20px 0;
  position: relative;
}
#form-view label{
  font-weight: bold;
}
#form-view input[ type="text"],
#form-view input[ type="password" ],
#form-view input[ type="email" ],
#form-view input[ type="url" ],
#form-view select,
#form-view textarea{
  font-size: .7em;
  line-height: 1.4em;
  height: 36px;
}
#form-view ul.options-list input {
  top: 10px;
}
#form-view .name-element select {
  font-size: .7em !important;
  height: 39px !important;
}
@media screen and (max-width: 400px){
  #form-view .name-element select {
    font-size: .7em !important;
    height: 36px !important;
  }
}
#form-view select{
  height: 36px;
}
#form-view select[ multiple ]{
  height: 100px;
}
#form-view  .summary-section .row{
  height: 50px;
}
#form-view  .summary-section .row.tall-1{
  height: 100px;
}
#form-view  .summary-section .row.tall-2{
  height: 150px;
}
#form-view  .summary-section .row.tall-3{
  height: 200px;
}
#form-view  .summary-section .row.tall-4{
  height: 250px;
}
#form-view  .summary-section .row.tall-5{
  height: 300px;
}
#form-view  .summary-section .row.med-1{
  height: 30px;
}
#form-view  .summary-section .row.med-2{
  height: 60px;
}
#form-view  .summary-section .row.med-3{
  height: 90px;
}
#form-view  .summary-section .row.med-4{
  height: 120px;
}
#form-view  .summary-section .row.med-5{
  height: 150px;
}
#form-view .toggle-actions{
  font-size: 12px;
  text-decoration: none;
  color:#428bca;
}
#form-view .toggle-actions:hover{
  text-decoration: underline;
  color: #2a6496;
}
.upload-msg {
    font-size: .7em;
}
.upload-msg p {
    font-size: .7em;
}
#summary-section .section-row .section-title{
  font-size: 18px;
}




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DANGEROUS STUFF TO CHANGE UP THERE ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* vvvvvvvvvvv            STYLING AND COLOR CHANGES CAN ALL BE FOUND BELOW            vvvvvvvvvvv */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */


#header {background: #d8d7d7;}



/* FEATURED CONTENT 1
-------------------------------------------------- */


#featured-content {
  background-position: center -490px;
    background-position: center 50%;
  background-repeat: no-repeat;
  background-color: #E6E6E6;
  background-image: url(/assets/featured-content/fc-01.jpg);
  background-size: 2600px auto;
  background-size: cover;
    background-attachment: scroll;
    min-height: 550px;
  }
#featured-content .color-overlay {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.27) 15%, rgba(21, 12, 97, 0));
}
#featured-content h3 {}
#featured-content p {}
#featured-content h6 {}
#featured-content h6 a {background: #4a4a4a;}
#featured-content h6 a:hover, #featured-content h6 a:active {}

@media screen and (max-width: 870px) {
  #featured-content {
    background-size: 370vw;
    background-position: 80% 40%;
  }
}


/* FEATURED CONTENT 2
-------------------------------------------------- */


#featured-content-2 {
  background-color: #E6E6E6;
  background-image: url(/assets/featured-content/echo.jpg);
  background-repeat: no-repeat;
  background-size: 3000px auto;
  background-attachment: fixed;
  background-position: center 0px;
}
#featured-content-2 .color-overlay {
  background-image: linear-gradient(to bottom, rgba(0, 26, 58, 0.68) 10%, rgba(0, 26, 58, 0.86));
}
#featured-content-2 h6 a {background: rgb(43, 194, 242);}

@media screen and (max-width: 1230px) {
  #featured-content-2 {
    background-position: center 100%;
  }
}




  /* FEATURED CONTENT 3
-------------------------------------------------- */


#featured-content-3 {
  background-color: #000;
  background-image: url(/assets/featured-content/delta.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
#featured-content-3 .color-overlay {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 30%, rgb(255, 255, 255));
}
#featured-content-3 h6 a {background: rgba(174, 0, 3, 1.00);}
#featured-content-3 h3 {color: rgba(0, 0, 0, 0.75);}
#featured-content-3 p {color: rgba(0, 0, 0, 0.75);}


  /* FEATURED CONTENT 4
-------------------------------------------------- */


#featured-content-4 {
  background-color: #000;
  background-image: url(/assets/featured-content/bravo.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
#featured-content-4 .color-overlay {
  background-image: linear-gradient(180deg, #000000c4 30%, rgba(0, 0, 0, 0.75));
}
#featured-content-4 h6 a {background: rgba(174, 0, 3, 1.00);}
#featured-content-4 h3 {color: rgb(255, 255, 255);}
#featured-content-4 p {color: rgb(255, 255, 255);}


/* FEATURED CONTENT 5
-------------------------------------------------- */



#featured-content-5 {
  background-color: #E6E6E6;
  background-image: url(https://ard.memberclicks.net/assets/site/circuits.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
#featured-content-5 .color-overlay {
  background-image: linear-gradient(to bottom, rgba(174, 0, 3, 1.00), rgba(174, 0, 3, 1.00));
}
#featured-content-5 h6 a {background: #5c74cc;}





/* FEATURED CONTENT 6
-------------------------------------------------- */


#featured-content-6 {
  background-color: #E6E6E6;
  background-image: url(/assets/featured-content/charlie.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

#featured-content-6 h3 {color: #4A4A4A}

#featured-content-6 .color-overlay {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.37) 50%, rgb(255, 255, 255));
}
#featured-content-6 h6 a {background: #053569; color: #ddd;}




/*
Mobile devices start around this size and most will ignore the fixed background-attachment of featured contents' background images so we need to reposition them here - I'm going ahead and changing the background-attachment to scroll so we can see the positioning and design it. You may even need a smaller @media query for phones - always check when you're designing. */
@media screen and (max-width: 1140px) {
    .featured-content {background-attachment: scroll !important;}
}
@media screen and (max-width: 600px) {
  #featured-content-2 { background-position: center 100%; background-size: cover; }
  #featured-content-5 { background-size: cover; }
}




/* SPONSORS AREA
-------------------------------------------------- */
#sponsors-area ul {
  list-style-type: none;
  float: left;
  width: 100%;
  margin: 0 auto 40px;
  padding: 0;
}

#sponsors-area ul li {
  float: left;
  margin-left: 5%;
  width: 21.25%;
  text-align: center;
  transition: .1s;
}

#sponsors-area ul li:hover {
  transform: scale(1.1);
}

#sponsors-area ul li img {
  width: 90%;
}

#sponsors-area ul li:first-child {
  margin-left: 0;
}


@media screen and (max-width: 900px) {
  #sponsors-area ul li {
    margin-left: 4%;
    width: 48%;
    height: 200px;
    overflow: hidden;
  }
  #sponsors-area ul li img {
    position: relative;
    top: 50%;
    -ms-transform: translate(0,-50%); transform: translate(0,-50%);
  }
  #sponsors-area ul li:hover {
    transform: none;
  }
  #sponsors-area ul li:nth-child(3) {
    clear: left;
    margin-left: 0;
  }
}




/* GENERAL
-------------------------------------------------- */
a                               {color: #479F45;}

/* menu in side with class of mc.-button-list */
.mc-button-list li a            {background-color: #096197;color: #fff; text-transform: uppercase;}

/* menu icon that appears in the header (note: uses FILL because it's coloring an SVG path) */
#header a.hamburger-menu svg {fill: #333;}

/* H6 A - the DIY buttons in content */
h6 a, .button-grid a            {background-color: #096197; color: #fff;}
h1                              {color: #ba7553;}
h2                              {color: #4a4a4a;}
.side-bar h3                 {color: #4a4a4a;border-color: #d1d1d1;} /* module titles */
.home-main                      {border-color: #d1d1d1;} /* divline in home page layout */
/* CC BOARD - horizontal bars */
td.ccbtopleftgray,
td.ccbtopmiddlegray,
td.ccbtoprightgray              {background: #4a4a4a !important;}

#my-name-is                     {background-color: #096197;}
#my-name-is .info               {border-color: #096197;}


/* SIDE MENU at BREAKPOINTS
-------------------------------------------------- */
/* the X that closes the sliding menu */
.mobile-menu                    {background: #096197;}  /* the background of the big mobile menu */
a#menu-toggle-x                 {fill: #479F45;}           /* the X that closes that menu */

/* menu items in sliding menu */
.mobile-menu a, .mobile-menu .separator               {color: rgba(255,255,255,.65) !important;} /* all but top level */
.mobile-menu ul.resp-menu > li > a,
.mobile-menu ul.resp-menu > li > .separator           {color: rgba(255,255,255,1) !important;} /* top level */

/* login button */
.login-search-menu a#mcSimpleLogin                    {background-color: #063C77;}


/* LOGIN BUTTONS & SEARCHES - colors
-------------------------------------------------- */
#search-login-bar                                     {background: #ddd;}
#header #search-login-bar .site-search input          {background: rgba(177, 177, 177, 0.23); color: white;}
#header #search-login-bar .site-search a              {background: #096197; color: #fff;}
#header #search-login-bar #cta-join                   {background: #096197; color: rgb(255, 255, 255);}
#header #search-login-bar #mcSimpleLogin              {background: #096197; color: #fff;}

/* HEADER MENU - top level text
-------------------------------------------------- */
.resp-menu > li:hover > a, .resp-menu > li:hover > .separator {color: #063C77;} /* hover color */

/* HEADER MENU - 2nd level background - these need to be the SAME COLOR
-------------------------------------------------- */
#primary-menu .resp-menu li.parent:hover ul:before      {color:         #096197;}
#primary-menu .resp-menu ul                             {background:    #096197;} /* a SLIGHTLY darker version of this should be used for the next 2 colors below */

/* HEADER MENU - 2nd level border and hover background color - these need to be the SAME COLOR
-------------------------------------------------- */
#primary-menu .resp-menu ul li:hover a                  {background: #065382;}
.resp-menu li li > a, .resp-menu li li > .separator     {border-color: #065382;}

/* HEADER MENU - 2nd level text color
-------------------------------------------------- */
#primary-menu .resp-menu li li > a,
#primary-menu .resp-menu li li > .separator           {color: white;color: rgb(255, 255, 255);} /* normal */
#primary-menu .resp-menu li li:hover > a,
#primary-menu .resp-menu li li:hover > .separator     {color: white;} /* hover */

/* FOOTER
-------------------------------------------------- */
#footer                     {background: #EFECE6;}
.footer-info                {color: #4a4a4a;}

/* SOCIAL NETWORK MENU - classes that can go on the MENU are:
.rounded-sq (rounded square instead of a circle)
.color      (use this and remove all colors below to get the brand colors on the background)
.icon       (displays just the icon with no circle if you unset the background here)
-------------------------------------------------- */
.socnets a                  {background: #EFECE6;color: #479F45; font-size: 22px;}
#footer .socnets a:hover    {background: #EFECE6;color: #2d712c;}

/* BACK TO TOP + ARROW
-------------------------------------------------- */
#RTT                        {color: #4a4a4a;} /* words */
#RTT span                   {color: #AF9872;} /* arrow */
#RTT:hover                  {color: #AF9872;} /* words hover */
#RTT:hover span             {color: #7d6b4c;} /* arrow hover */

/* POWERED BY MEMBERCLICKS
-------------------------------------------------- */
#pbmc                       {color: #479F45;}
#pbmc:hover                 {color: #AF9872;}





/* CALENDAR STYLES
-------------------------------------------------- */
.mc-event-details .event-time-separator {
    display: none;
}
.mc-event-details .event-time-separator.dash {
    display: inline;
}
.mc-event-details .event-start-date:after,
.mc-event-details .event-stop-date:after {
    content: '';
    display: block
}

li.ev_td_li .event-list-item {margin: 10px 0}





/* HIDING THE CONTENT AREA ON THE HOME PAGE SO IT CAN BE NOTHING BUT HERO SECTIONS
  heroes on heroes on heroes
-------------------------------------------------- */
body.home #content-wrap {display: none;}




/* THE END...
-------------------------------------------------- */


#bkg {padding-top: 184px;}

/* GFA CUSTOM EDITS
-------------------------------------------------- */
.mc-search {display: none;}

#header {
    background: white;
    height: 100px;
    position: fixed;
    top: 0;
    transition: top .3s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%;
    z-index: 90;
    padding: 0;
    padding-bottom:;
    box-shadow: none;
}
#search-login-bar {
  background: #150c66;
  background: #ddd;
  position: absolute;
  width: 100%;
  height: 60px;
  left: 0;
  bottom: 0px;
}

#search-login-bar {
  background: #150c66;
  background: #ddd;
  position: absolute;
  width: 100%;
  height: 60px;
  left: 0;
  bottom: 0px;
  display: none;
}
#bkg {padding-top: 100px;}

ul.resp-menu {background: none;}
.resp-menu, .resp-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 99;
    font-size: 14px;
    text-transform: uppercase;
}

#footer {
  border: 40px solid #4a4a4a;
  border-image: url(https://gfas.memberclicks.net/assets/site/footer-image.png) 10% round;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
}

/* MAKE CONTENT FULL WIDTH
-------------------------------------------------- */
/*div.content-wrapper {width: 1420px !important;}*/

/* MOVED COMMUNITY WINDOW DOWN TO ACCOMODATE MAIN NAV
-------------------------------------------------- */
#community-wrap {
	display: inline-block;
	width: 100%;

	/* display: inline-block + width: 100% was
	   used to cope with uncleared floats that
	   often is present in various Joomla! templates.

	   Without it, contents within #community-wrap
	   may get pulled down to the line where the
	   uncleared float element ends.

	   The css property combination above inherits
	   the width of the parent container IRRESPECTIVE
	   of the padding value of the parent container.

	   Therefore, if you are experiencing issues where
	   #community-wrap appears wider than the width
	   provided by its parent container, you may either:

	   - Add margin-left & margin-right
	     with the value taken from the
	     padding value of the parent container.

       - Replace display: inline-block;
         with    display: block;
         (If you are certain uncleared floats won't appear)

       - Set a fixed width (Usually parent width - parent padding)
	*/

	position: relative;
	text-align: left;
	min-height: 450px;
	min-width: 650px;
	margin: 0 0 30px;
	top: 100px;
}