/* Archetype Basic Styles: */
*, *::before, *::after {box-sizing: border-box;}

html
{
  height:100%;
  overflow-x:auto;
  overflow-y: scroll;
  line-height: 1.5;
  font-size: 62.5%; /*Enables use of rem values like 1.4rem = 14px */
}

body {padding:0;margin:0;font-size: 1.4rem; /* =14px */}
main,section,article {display:block;/*for old ie*/}
a, a:hover, a:visited {} a:hover {}
img {max-width:100%;}

/* CKEditor requires these styles */
.text-align-left {text-align:left;}
.text-align-center {text-align:center;}
.text-align-right {text-align:right;}
.text-align-justify {text-align:justify;}

/* Image alignment  */
.align-left {float:left;margin:0 15px 15px 0;}
.align-right{float:right; margin:0 0 15px 15px;}
.align-center{text-align:center;}

/* Utilities */
.clear{clear:both;/*REQUIRED*/}

/* Archetype Modules */
.slide
{
  /* REFERENCE STYLES: It's expected that these values will be overriden locally */
  background-size:contain;
  background-repeat: no-repeat;
  background-position: top center;
  height:450px;
  /*
  Slide show ratio:
  Solves the issue of the slide show not resizing correctly on responsive views.
  */
  height:calc(100vw * (450 / 1280) ); /* h/w ratio for slide image */
  /*On larger screens the height goes out of wack using the ratio above, 
  so limit this with a max-height*/
  max-height: 450px;
}

/* Phone 2 module */
/* REQUIRES: .phone class wrapper
<div class="phone">{archetype: name="phone_number_2" type="module"}</div>
*/
.phone a {display:none;}
.phone span {}

/* Mobile "to top" button */
#go_top
{
  opacity:.5;
  display: none;
  background: rgba(0,0,0,.4);
  border-radius: 4px;
  bottom: 10px;
  height: 36px;
  position: fixed;
  right: 10px;
  width: 36px;
  outline: none;
  z-index: 100;
}

#go_top:before
{
  border: 2px solid #fff;
  border-width: 5px 5px 0 0;
  content: '';
  display: block;
  height: 11px;
  position: relative;
  top: 13px;
  transform: rotate(-45deg);
  width: 11px;
  left: 11px;
}

/* Flexible columns */
/* These need to be fairly early in the document, so they can be overriden */
.flex_columns
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  vertical-align: top;
}

.flex_row
{
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row; /*This is redundant here, but shows the intention*/
}

.flex_column
{
  -ms-flex-item-align: stretch;
  align-self: stretch;
  -webkit-box-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  vertical-align: top;
}

.flex_column-shrink
{
  -webkit-box-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

/* Basic 2 column (grid based) layout */
.layout-grid-2-columns {
  display: grid;
  grid-template: "main_column side_column" auto / 1fr minmax(280px, 340px);
  grid-gap: 40px;
}

/* Common flex column widths */
.flex_column_w50 {flex-basis:50%;}
.flex_column_w33 {flex-basis:calc(100% / 3);}
.flex_column_w25 {flex-basis:calc(100% / 4);}

@media (max-width: 1024px),(max-device-width: 1024px){
  .flex_columns .flex_columns /*Columns inside columns should convert from rows in a wider screen*/
  {flex-direction: column;-webkit-flex-direction: column;}

  .flex_columns .flex_row.flex_columns
  {flex-direction: row;-webkit-flex-direction: row;}
}

@media (max-width: 800px),(max-device-width: 800px){
  .layout-grid-2-columns {
    grid-template: "main_column"
      "side_column" auto / auto;

  }
  /* Image alignment  */
  .align-left,.align-right,.align-center
  {float:none;margin: 15px auto;display:block;}

  /* Phone 2 module */
  .phone a {display:inline;}
  .phone span {display:none;}
  .flex_columns
  {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .flex_column {}
  .flex_column_w50,.flex_column_w33,.flex_column_w25 {flex-basis:auto;}
  .flex_row
  {
    -webkit-flex-direction: row;
    flex-direction: row;
  }

  img.align-left {
    float: none;
    display: block;
    margin: 10px auto;
  }

  img {max-width:100%;height:auto;}
  #go_top {display: block;}
}

/* NAVIGATION */
nav {width:100%;position:relative;/*Required for dropdown positioning*/}
nav .at-minimal_toolbar {/*position navbar editing toolbar*/}
nav ul 
{
  margin:0;list-style-type:none;padding:0;
  display:flex;display:-webkit-flex;
  height:auto;
  align-items: stretch;-webkit-align-items: stretch;
  flex-flow: row wrap; -webkit-flex-flow: row wrap; /* Safari 6.1+ */
  flex:1 1 auto;-webkit-flex: 1 1 auto;
  align-self: stretch;
}

nav li
{
  display: inline-block;
  flex: 1 1 auto;-webkit-flex: 1 1 auto;
  align-self: stretch;-webkit-align-self: stretch;
  width: auto;
}
nav a {display:block;/*Not in :hover state, as it can cause odd behavior on elements that hide/show*/}
nav a,nav a:visited,nav a:hover
{
  outline: none;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

nav a:hover
,nav li:hover > a /*keep hovered item highlighted when hovering over menu below*/
{}

/* SELECTED NAV */
nav .selected_nav > a,nav .selected_nav > a:hover {} 

/*Dropdown menu item styles*/
nav ul ul a,nav ul ul a:visited,nav ul ul a:hover 
{padding: 0 10px;line-height:2.5;text-align:left;display:block;}
nav ul ul a:hover{}

/* VERTICAL NAV */
nav.nav_vertical {}
nav.nav_vertical .at-minimal_toolbar {top:0;}
nav.nav_vertical ul {flex-flow:column;-webkit-box-orient: vertical;-webkit-box-direction: normal;}
nav.nav_vertical ul li
{
  display:block;
  float:none;
  clear:both;
  text-align:left;
}

nav.nav_vertical {height:auto;flex-direction: column;}
nav.nav_vertical a,nav.nav_vertical a:visited,nav.nav_vertical a:hover
{text-align:left;}

/*Navbar in footer*/
footer nav {}
footer nav.nav_vertical .at-minimal_toolbar {right:0;}
footer nav ul {}
footer nav a,footer nav a:visited,footer nav a:hover
,footer nav .selected_nav > a,footer nav .selected_nav > a:visited,footer nav .selected_nav > a:hover
{}

footer nav a:hover
,footer nav .selected_nav > a
,footer nav .selected_nav > a:visited
,footer nav .selected_nav > a:hover 
{}

/* MOBILE NAV */

.mobile-top-nav-show
,.mobile-top-nav-hide
{
  cursor:pointer;
  color:inherit;
  position: relative;
  font-size: 28px;/*Makes "menu" icon fit better*/
  line-height: 1;
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.mobile_top_nav_hide::before
,.mobile_top_nav_show::before
{}

nav.fontawesome .mobile-top-nav-hide::before
,nav.fontawesome .mobile-top-nav-show::before
{
  content:' \f0c9';font-family:"FontAwesome";
}

.mobile-top-nav-hide::before {}
nav.fontawesome .mobile-top-nav-hide::before {content:' \f00d';font-family:"FontAwesome";}

.mobile-top-nav-hide::after
,.mobile-top-nav-show::after
{
  content: "Close";
  display: block;
  font-size: 10px;
}

.mobile-top-nav-show::after {content: "Menu";}

.mobile-top-nav-hide,.mobile-top-nav-show {
  text-align: center;
  display:none;}

/** DROPDOWN NAV **/
/* remove all the bullets, borders and padding from the default list styling */
nav ul {padding:0;margin:0;list-style-type:none;}
nav ul ul {display:none;text-align:left;z-index:1000;}
/* float to make it horizontal and a relative positon to control the dropdown menu positon */
nav li {float:left;position:relative;white-space:nowrap;}
nav ul ul li {float:none;display:block;}
/* style the links for the top level */
nav li:last-child a {}
/* style the second level background */
nav li.has_submenu > a:after {
  content:' \25BE';padding-left:5px;opacity:.4;
}

nav.fontawesome li.has_submenu > a:after {content:' \f078';font-family:"FontAwesome";}

nav li.has_submenu a {}

/* hide the sub levels */
nav ul ul {position:absolute;top:100%;left:0; width:auto;min-width:100%;}
nav ul li:last-child ul {left:auto;right:0;}
/* MENU ACTIONS */
/* make the second level visible when hover on first level list OR link */
nav ul li:hover ul,
nav ul a:hover ul{display:block;}

@media (max-width: 800px),(max-device-width: 800px){

  nav.mobile-nav a,
  nav.mobile-nav a:visited {font-size:1em;}
  nav.mobile-nav ul {}
  nav.mobile-nav ul ul {width: 100%;position: static;}
  nav.mobile-nav ul ul li a
  ,nav.mobile-nav ul ul li a:visited 
  ,nav.mobile-nav ul ul li a:hover 
  {padding-left:20px;background: #4D4D4D;white-space: normal;}

  nav li.has_submenu > a::after {right: 10px;position: absolute;}

  body > header nav ul.navbar_dropdown_menu_ul
  {
    position: absolute;
    width:100vw;
    z-index:100; /*ensure it's above close elements*/
    top: 100%; /*At bottom of open/close*/
    left: 0;
  }

  /*nav in main */
  main nav ul li {flex-wrap: wrap;}
  main nav a, main nav a:hover, main nav a:visited {}
  /*MOBILE NAV*/
  nav.mobile-nav {/*Enables full display of "menu" button*/}
  nav.mobile-nav li {display:block;float:none;position:static;white-space:normal;width:100%;}

  nav.mobile-nav a,nav.mobile-nav a:visited, nav.mobile-nav a:hover
  {
    padding:6px 8px;
    display:block;
    background:#333;
    color:#fff;
    font-size:1.4rem;
    line-height:2;
    text-align:left;
  }

  nav.mobile-nav .selected_nav > a
  ,nav.mobile-nav .selected_nav > a:hover
  {background:#ccc;color:black;}

  nav.mobile-nav ul {display:none;}
  nav.mobile-nav-open ul {display:block;position: absolute;width: 100vw;z-index: 100;}
  .mobile-top-nav-show {display:flex;}
  .mobile-nav-open .mobile-top-nav-hide {display:flex;}
  .mobile-nav-open .mobile-top-nav-show {display:none;}

  nav.mobile-nav a {border-bottom: 1px solid rgba(0,0,0,.5);}
  nav.mobile-nav a:hover,nav.mobile-nav li:hover > a {background:#414141;color:#fff;}
}


/* TABS */
.tabs.clearafter::after{display:none;/*Fix this hack from form.2.css, no longer needed.*/}

.tabs:empty {display:none;} /* Used if there are no tabs, or one tab */

.tabs 
{
  /*OLD BROWSERS*/
  float:left;
  width:220px;
  /*END OLD BROSWERS*/
  padding:0;
  margin:0;
  display:flex;display:-webkit-flex;
  height:auto;
  align-items: stretch;-webkit-align-items: stretch;
  flex-flow: row wrap; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap;

  flex:1 1 auto;-webkit-flex: 1 1 auto;
  align-self: stretch;
}

.tabs > .tab
{
  /*OLD BROWSERS*/
  display: inline-block;
  /*END OLD BROSWERS*/
  flex: 1 1 100%;-webkit-flex: 1 1 100%;
  align-self: stretch;-webkit-align-self: stretch;
  width: auto;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tabs_content 
{
  /*OLD BROWSERS*/
  float:left;
  width:75%;
  /*END OLD BROSWERS*/
  width:-moz-calc(100% - 330px);width:-webkit-calc(100% - 330px);
  width:calc(100% - 230px);
  background:none;
  border:none;
  overflow:visible;
  padding: 0 0 0 20px;
}

.tab a,.tab a:visited,.tab a:hover,.tab_selected a,.tab_selected a:visited
{
  color:#000;
  display:block;
  height:auto;
  position:relative;
}

.tab a,.tab a:visited,.tab a:hover,.tab_selected a,.tab_selected a:visited
{
  background: rgba(0,0,0,.1);
  margin-bottom: 5px;
  text-decoration: none;
  padding: .7rem 1.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
}
.tab a:hover {background:#666;}

/* EXTRA FEATURES */
.tab .item_count
{
  font-style: italic;
  opacity: 0.5;
  font-size: 0.7em;
  position:absolute;
  right:10px;
  top: 10px;
  line-height: normal;
}

.tab_category_group_heading {}

/** HORIZONTAL TABS **/
.tabs_h .tab {flex: 0 1 auto;-webkit-flex: 0 1 auto;}
.tabs_h .tab a,.tabs_h .tab a:visited,.tabs_h .tab a:hover,.tabs_h .tab_selected a,.tabs_h .tab_selected a:visited
{margin-bottom:0px;margin-right:5px;}

.tabs_h .tab a:hover {}

/** SELECTED TAB **/
.tab_selected a,.tab_selected a:hover,.tab_selected a:visited
{background:rgba(0,0,0,.3);}

/** SELECTED TAB : HORIZONTAL **/
.tabs_h .tab_selected a,.tabs_h .tab_selected a:visited,.tabs_h .tab_selected a:hover
{border-bottom:none;}


/** HORIZONTAL TABS **/
.tabs_h .tabs_content,.tabs_h .tabs
{float:none;width:auto;}
.tabs_h .tabs {border-bottom:1px solid #ccc;margin-bottom:10px;}
.tabs_h .tab,.tabs_h .tab_selected
{display:inline-block;}

.tabs_h .tabs {padding-bottom:0;}
.tabs_h .tabs_content {padding:0;}

.tabs_h .tab a
,.tabs_h .tab a:visited
,.tabs_h .tab a:hover
,.tabs_h .tab_selected a
,.tabs_h .tab_selected a:visited
{
  text-decoration:none;
}

/* Utilities */
.mobile-only {display:none;}
.non-mobile-only {}

@media (max-width:800px),(max-device-width: 800px){
  .mobile-only {display:initial;}
  .non-mobile-only {display:none;}
  .tabs {}
  .tabs_content {}

  /** Flexible columns **/
  .tabs 
  {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    justify-content: flex-start;
    vertical-align: top;
    margin:0;
    padding:0;
    flex-wrap: wrap;
    list-style:none;
  }

  .tabs .tab
  {
    float:left;
    align-self: stretch;-webkit-align-self: stretch;
    flex: 1 1 auto;-webkit-flex: 1 1 auto;
    min-height: 100%;
    vertical-align: top;
    padding:5px;
    text-align:center;
    margin:0;padding:0;
  }

  .tabs 
  {
    float:none;
    width:100%;
    padding:0;
  }

  .tabs .tab {display:inline-block;}

  .tabs_content 
  {
    float:none;
    width:100%;
    padding: 12px;
  }

  .tabs_h .tab a,.tabs_h .tab a:visited,.tabs_h .tab a:hover
  {margin:3px;}
}

/* MEMBER STYLES */
#member_login_status {}
#admin_login_status {}