/* Archetype Basic Styles: */

:root {
  --max-content-width: 1240px;
  --max-content-secondary-width: 1640px;
}

*, *::before, *::after {box-sizing: border-box;}
html {font-size: 62.5%; /*Enables use of rem values like 1.4rem = 14px */}
body {padding:0;margin:0;line-height: 1.5;font-size: 1.4rem;/* =14px */}
a, a:hover, a:visited {} a:hover {}
img {max-width:100%;height:auto;}

/* 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;}

/* CKEditor 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;}
/* START: Archetype site elements */
/** Form Validation **/
.at-form .at-validation_error_alert_wrapper {width:100%;}
.at-form .at-validation_error_alert {clear:both;width:100%;display:block;
background:#BE1111;color:#fff!important;padding:2px 10px;border-radius:4px;line-height: normal;}
.at-form .error{box-shadow:0px 0px 4px rgba(255, 0, 0, 0.6);color:#f00;}
.at-form label.error{color:#BE1111;box-shadow: none;font-size:12px;font-weight:normal;padding:3px;}
.at-form label.error::before {width:18px;text-align: center;display: inline-block;}

.at-message-notice
,.at-message-success
,.at-message-error
,.at-message-info
,.at-message-note
{
  position: relative;
  padding: 10px 10px 10px 40px;
  background: #fff9ca;
  color: #000;
  border: 1px solid rgba(0,0,0,.1);
  margin: 20px 0;
}
.at-message-notice :first-child
,.at-message-success :first-child
,.at-message-error :first-child
,.at-message-info :first-child
,.at-message-note :first-child
{
  margin-top:0; 
}

.at-message-notice :last-child
,.at-message-success :last-child
,.at-message-error :last-child
,.at-message-info :last-child
,.at-message-note :last-child
{
  margin-bottom:0; 
}

.at-message-success {background: #d9ffd9;}
.at-message-error {background: #ffeded;}
.at-message-info {background: #E5F2F8;}
.at-message-note {background: #F1F1F1;}

.at-message-notice::before
,.at-message-success::before
,.at-message-error::before
,.at-message-info::before
,.at-message-note::before
{
  color: rgb(179, 162, 30); 
  font-family:"FontAwesome";
  position: absolute;
  left:10px;
}

.at-message-notice::before {content: "\f071";}
.at-message-success::before {content: "\f00c";color:#009b00;}
.at-message-error::before {content: "\f06a";color:#f00;}
.at-message-info::before {content: "\f06a";color:#1d79a4;}
.at-message-note::before {content: "\f06a";color:#717171;}

[class*="at-message-"] button.right {float:right;}

.at-fa-close::before {display:none;/*only show 1 set of icons*/}
.at-fa-close::after
{
  font-family:"FontAwesome";
  content: '\f00d';
  font-style: normal;
}

/* END: Archetype site elements */

/* 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 by default*/
  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;
}

.flex > *
{
  -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;
}

/* Common flex column widths */
.flex-w50 {flex-basis:50%;}
.flex-w33 {flex-basis:calc(100% / 3);}
.flex-w25 {flex-basis:calc(100% / 4);}

.flex-shrink
{
  -webkit-box-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

/* Basic 2 column (grid based) layout */
.layout-columns-2 {
  display: grid;
  grid-template: "main right" auto / 1fr minmax(280px, 340px);
  grid-gap: 40px;
}

/* Basic 3 column (grid based) layout */
.layout-columns-3 {
  display: grid;
  grid-template: "left main right" auto / minmax(120px, 200px) 1fr minmax(280px, 300px);
  grid-gap: 20px;
}

.column-main {grid-area:main;padding: 0 20px;}
.column-left {grid-area:left;}
.column-right {grid-area:right;}

@media (max-width: 1024px),(max-device-width: 1024px){
  .flex .flex /*Columns inside columns should convert from rows in a wider screen*/
  {flex-direction: column;-webkit-flex-direction: column;}

  .flex .flex-row.flex-columns
  {flex-direction: row;-webkit-flex-direction: row;}
}

@media (max-width: 800px),(max-device-width: 800px){
  /* MOBILE */
  .layout-columns-2 {
    grid-template: "main"
      "right" auto / auto;
  }

  .layout-columns-3 {
    grid-template: "main"
      "left"
      "right"
      auto / auto;
  }
  /* Image alignment  */
  .align-left,.align-right,.align-center  {float:none;margin: 15px auto;display:block;}

  .flex
  {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .flex-w50,.flex-w33,.flex-w25 {flex-basis:auto;}
  .flex-row
  {
    -webkit-flex-direction: row;
    flex-direction: row;
  }

  img.align-left {
    float: none;
    display: block;
    margin: 10px 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 .nav-selected > a,nav .nav-selected > 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;/*admin*/}
nav.nav-vertical ul {flex-flow:column;-webkit-box-orient: vertical;-webkit-box-direction: normal;}
nav.nav-vertical ul li {display:block;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 .nav-selected > a,footer nav .nav-selected > a:visited,footer nav .nav-selected > a:hover
{}

footer nav a:hover
,footer nav .nav-selected > a
,footer nav .nav-selected > a:visited
,footer nav .nav-selected > a:hover 
{}

/* MOBILE NAV */

.nav-mobile-top-show,.nav-mobile-top-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;
  align-items: center;
}

.nav-mobile-top-hide::after,.nav-mobile-top-show::after {
  content: "Close";
  display: block;
  font-size: 10px;
}

.nav-mobile-top-show::after {content: "Menu";}
.nav-mobile-top-hide,.nav-mobile-top-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;}
nav li {position:relative;white-space:nowrap;}
nav ul ul li {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.nav-has-submenu > a:after {content:' \f078';font-family:"FontAwesome";}
nav li.nav-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){


  /*MOBILE NAV*/
  nav.nav-mobile a,
  nav.nav-mobile a:visited {font-size:1em;}
  nav.nav-mobile ul {}

  nav.nav-mobile ul ul {width: 100%;position: static;}
  nav.nav-mobile ul ul li a
  ,nav.nav-mobile ul ul li a:visited 
  ,nav.nav-mobile ul ul li a:hover 
  {padding-left:20px;background: #4D4D4D;white-space: normal;}

  nav li.nav-has-submenu > a::after {right: 10px;position: absolute;}

  nav.nav-mobile ul
  {
    z-index:100; /*ensure it's above close elements*/
    left: 0;
    width: 100vw;
    position: fixed;
    top: 0;
    overflow: auto;
    bottom: 0;
    overscroll-behavior: contain;
  }
  nav.nav-mobile ul ul {position:static;overflow:visible;height:auto;}
  /*nav in main */
  main nav ul li {flex-wrap: wrap;}
  main nav a, main nav a:hover, main nav a:visited {}

  nav.nav-mobile {}
  nav.nav-mobile li {display:block;float:none;position:static;white-space:normal;width:100%;}

  nav.nav-mobile a,nav.nav-mobile a:visited, nav.nav-mobile a:hover
  {
    padding:6px 8px;
    display:block;
    background:#333;
    color:#fff;
    font-size:1.4rem;
    line-height:2;
    text-align:left;
  }

  nav.nav-mobile .nav-selected > a
  ,nav.nav-mobile .nav-selected > a:hover
  {background:#ccc;color:black;}

  nav.nav-mobile ul {display:none;}
  nav.nav-mobile-open ul {display:block;}
  .nav-mobile-top-show {display:flex;}
  .nav-mobile-open .nav-mobile-top-hide {
    display: flex;
    position: fixed;
    z-index: 1000;
    right: 0;
    width: 6rem;
    background: rgba(0,0,0,.7);
    height: 6rem;
    top: 0;
  }
  .nav-mobile-open .nav-mobile-top-show {display:none;}

  nav.nav-mobile a {border-bottom: 1px solid rgba(0,0,0,.5);}
  nav.nav-mobile a:hover,nav.nav-mobile li:hover > a {background:#414141;color:#fff;}
}

/* TABS */
.tabs-wrapper {display:grid;grid-template-columns: minmax(200px, 20%) 1fr;grid-gap:12px;}
.tabs-labels:empty {display:none;} /* Used if there are no tabs, or one tab */
.tabs-labels {display:flex;flex-direction: column;
  margin:0;list-style-type:none;padding:0; grid-gap: 5px;gap:5px;}
.tabs-labels li {
  flex: 0 1 auto;
  align-self: stretch;-webkit-align-self: stretch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabs-content {}
.tabs-labels a,.tabs-labels a:visited,.tabs-labels a:hover,
.tab-selected a,.tab-selected a:visited,.tab-selected a:hover
{
  display:block;
  color:#000;
  position:relative;
  background: rgba(0,0,0,.1);
  text-decoration: none;
  padding: .7rem 1.5rem;
}
.tabs-wrapper > .tabs-labels a:hover {background:#666;}

/* EXTRA FEATURES */
.tab .item-count
{
  font-style: italic;
  opacity: 0.5;
  font-size: 0.7em;
  position:absolute;
  right:10px;
  top: 0;
  transform: translateY(50%);
  line-height: normal;
}
/** SELECTED TAB **/
.tab-selected a,.tab-selected a:hover, .tab-selected a:visited
{background:rgba(0,0,0,.3);}

/** HORIZONTAL TABS **/
.tabs-wrapper.tabs-horizontal {grid-template-columns:1fr;}
.tabs-wrapper.tabs-horizontal .tabs-labels {flex-direction: row;}
.tabs-wrapper.tabs-horizontal .tabs-labels a,
.tabs-wrapper.tabs-horizontal .tabs-labels a:visited,
.tabs-wrapper.tabs-horizontal .tabs-labels a:hover
{text-align: center;}
@media (max-width:800px),(max-device-width: 800px){
  .tabs-wrapper {grid-template-columns:1fr;}
  .tabs-labels {flex-flow: row wrap;}
  .tabs-labels a,.tabs-labels a:visited,.tabs-labels a:hover {
    text-align: center;
  }
}

/* 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;}
}

/* MEMBER STYLES */
#member_login_status {}
#admin_login_status {}
