/* Resets */
  *{box-sizing:border-box;}

  html, body{-webkit-text-size-adjust: none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
  a{text-decoration:none;transition:0.2s all;}
  a *:not(svg):not(path){transition:0.2s all;}
  
  img{max-width:100%;height:auto;}
  
  h1,h2,h3,h4,h5,h6,
  .h1,.h2,.h3,.h4,.h5,.h6{margin-bottom:1rem;margin-top:1rem;line-height:120%;word-break: break-word}
  h1 *,h2 *,h3 *,h4 *,h5 *,h6 *{line-height:100%;}
  
  p, ul, ol{margin:1rem 0;}
  
  hr{background-color:rgba(0,0,0,0.1);border:none;height:1px;margin:2em auto;}
  hr.spacer{background-color:transparent;}
  
  input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea{background-color:transparent;border-radius:0;-webkit-appearance: none;-moz-appearance:none;}
  input, textarea{background-color:transparent;border:1px solid;color:inherit;font:inherit;padding:0.5rem 0.75rem;}
  input[type="submit"]{border:none;cursor:pointer;transition:0.2s all;padding:calc( 0.5rem + 1px ) calc( 0.75rem + 1px );}
  
  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
  textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus,
  select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus
  {
    -webkit-background-clip: text;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232300;
  }
  
  .mode-dark input:-webkit-autofill, .mode-dark input:-webkit-autofill:hover, .mode-dark input:-webkit-autofill:focus,
  .mode-dark textarea:-webkit-autofill, .mode-dark textarea:-webkit-autofill:hover, .mode-dark textarea:-webkit-autofill:focus,
  .mode-dark select:-webkit-autofill, .mode-dark select:-webkit-autofill:hover, .mode-dark select:-webkit-autofill:focus
  {-webkit-text-fill-color: #ffffff;}
  
  ::-webkit-file-upload-button {border-radius:5px;font-size:inherit;-webkit-appearance: none;padding:0.2em 0.5em;}
  ::-webkit-input-placeholder {color: inherit;opacity:0.7;}
  ::-moz-placeholder {color: inherit;opacity:0.7;}
  :-ms-input-placeholder {color: inherit;opacity:0.7;}
  :-moz-placeholder {color: inherit;opacity:0.7;}
  
  select{border:1px solid;color:inherit;font:inherit;height:calc( 2.5rem + 2px );padding:0.5rem 0.75rem;}
  select[multiple]{padding:0;height:auto;}
  select[multiple] option{padding:0.5rem 0.75rem;margin:-0.3rem 0;}
  select[multiple] option:first-child{margin-top:0;}
  select[multiple] option:last-child{margin-bottom:0;}
  
  .select-container{display:inline-block;overflow: hidden;position:relative;}
  .select-container:before{border: 6px solid transparent;border-top-color: transparent;border-top-color: currentColor;content: '';position: absolute;right:0.75rem;top: 1.25em;}
  .select-container select{cursor:pointer;padding-right: 1.5rem;position:relative;}
  .select-container select::-ms-expand{display: none;}
  
  .hide,
  .screen-reader-text{display:none!important;}
    
/* Layout */
  #container{background-color:#fff;box-shadow:0 0 5px rgba(0,0,0,0.15);display:flex;flex-direction:column;margin:0 auto;max-width:100%;min-height:100vh;position:relative;}
  #main{background-color:#fff;flex-direction:column;flex: 1 0 auto;justify-content: stretch;opacity:1;overflow:hidden;position:relative;z-index:2;}
  #main > h3{position:relative;}
  
  /* Not sure about these. maybe use native classes and remove */
  .wrapper{margin:0 auto;max-width:var(--wp--style--global--wide-size);padding:0 var(--wp--style--root--padding-right) 0 var(--wp--style--root--padding-left);position:relative;width:100%;}
  .wrapper--wide{max-width:var(--wp--style--global--content-size);}
  .wrapper--tight{max-width:calc(var(--wp--style--global--content-size) * .75);}
  
  .flex-split{display:flex;justify-content:space-between;flex-wrap:wrap;}
  .flex-split__item{flex:0 1 auto;}
  .flex-split__item--flow{flex:100;}/* for something that SHOULD wrap like a p or h*/
  .flex-split__item:first-child{padding-right:30px;}
  
  /* Item Grid */
    .grid{display: flex;flex-wrap:wrap;gap:40px;}
    .grid__item{flex:1;min-width:184px;}
  
    .grid--top{align-items: flex-start;}
    .grid--center{align-items: center;}
    .grid--bottom{align-items: flex-end;}
  
    .grid__item--top{align-self: flex-start;}
    .grid__item--center{align-self: center;}
    .grid__item--bottom{align-self: flex-end;}
  
    /* fix width of items by item or container */
      .grid__item--half,
      .grid--halves .grid__item{flex: 0 0 50%;}
      .grid__item--third,
      .grid--thirds .grid__item{flex: 0 0 33.3333%;}
      .grid__item--fourth,
      .grid--fourths .grid__item{flex: 0 0 25%;}
      .grid__item--fifth,
      .grid--fifths .grid__item{flex: 0 0 20%;}
    
    /* loners center */
      .grid--centered{justify-content: center;}
  
    /* loners spread */
      .grid--spaced{justify-content: space-between;}
    
    @media (max-width: 979px) {
      .grid{gap:30px;}
      .grid--979-fulls .grid__item{flex: 0 0 100% !important;}
      .grid--979-halves .grid__item{flex: 0 0 50% !important;}
      .grid--979-thirds .grid__item{flex: 0 0 33.3333% !important;}
        
      .grid__item--979-full{flex: 0 0 100% !important;}
      .grid__item--979-half{flex: 0 0 50% !important;}
      .grid__item--979-third{flex: 0 0 33.3333% !important;}
    }
    @media (max-width: 767px) {
      .grid{gap:20px;}
      .grid--767-fulls .grid__item{flex: 0 0 100% !important;}
      .grid--767-halves .grid__item{flex: 0 0 50% !important;}
      .grid--767-thirds .grid__item{flex: 0 0 33.3333% !important;}
      
      .grid__item--767-full{flex: 0 0 100% !important;}
      .grid__item--767-half{flex: 0 0 50% !important;}
      .grid__item--767-third{flex: 0 0 33.3333% !important;}
    }
    @media (max-width: 480px) {
      .grid__item{flex: 0 0 100% !important;}
      .grid--480-fulls .grid__item{flex: 0 0 100% !important;}
      .grid--480-halves .grid__item{flex: 0 0 50% !important;}
      .grid--480-thirds .grid__item{flex: 0 0 33.3333% !important;}
      
      .grid__item--480-full{flex: 0 0 100% !important;}
      .grid__item--480-half{flex: 0 0 50% !important;}
      .grid__item--480-third{flex: 0 0 33.3333% !important;}
    }
  
  .center-text{text-align:center;}
  .left-text{text-align:left;}
  .right-text{text-align:right;}
  
  /* Visibility */
    .visible-phone {display: none !important;}
    .visible-tablet {display: none !important;}
    .hidden-desktop {display: none !important;}
    @media (min-width: 768px) and (max-width: 979px) {
      .visible-tablet,
      .hidden-desktop {display: block !important;}
      .hidden-tablet,
      .visible-desktop {display: none !important ;}
    }
    @media (max-width: 767px) {
      .visible-phone,
      .hidden-desktop {display: block !important;}
      .hidden-phone,
      .visible-desktop {display: none !important;}
    }

/* Common Elements */  
  .embed-container{float:none;position: relative;padding-bottom: 56.25%;/* 16/9 ratio */height: 0;overflow: hidden;}
  .embed-container iframe,
  .embed-container object,
  .embed-container embed{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index:0;}
  
  .pagination .nav-links{text-align:center;}
  .pagination .nav-links > *{padding:0.5rem;}
  
/* Header */
  .navbar{z-index:100;padding:5px 0;transition:all 0.5s;}
  .navbar--fixed{position:sticky;top:0;}
  .navbar h1{font-size:1rem;margin:0;}
  .navbar__wrapper{align-items:stretch;display:flex;flex-direction:row;justify-content:space-between;margin:0 auto;}
  .navbar__area{display:flex;flex:auto;align-items:center;}
  .navbar__area--left{text-align:left;justify-content: flex-start;}
  .navbar__area--right{text-align:right;justify-content: flex-end;white-space: nowrap;}
  
  .navbar__logo{margin-bottom:auto;margin-top:auto;}
  .navbar__logo svg{display:block;}
  
  .navbar__menu{display:inline-block;list-style-type:none;margin:0;padding:0;margin-bottom:auto;margin-top:auto;padding:0;white-space:nowrap;}
  .navbar__menu a{display:inline-block;padding:0.5rem;}
  .navbar__menu .btn{margin-left:0.5em;}
  .navbar__menu > li{display:inline-block;}
  
/* WP Admin Bar Fix */
  .admin-bar .navbar--fixed{top:32px;}
  @media (max-width: 782px) {.admin-bar .navbar--fixed{top:46px;}}
  @media (max-width: 600px) {.admin-bar .navbar--scrolled{top:0;}}
  
/* Footer */
  #footer{position:relative;z-index:1;}
  
/* Template issue fix */
  #template-pre-content{flex:0 0 auto;}
  #template-post-content{flex:0 0 auto;}

/* Modal */
  .mfp-container{display:flex;}
  .mfp-container:before{display:none;}
  .mfp-content{margin:auto!important;}
  .mfp-content figcaption{margin-top:0;}
  .mfp-container .modal{margin:auto;}
  .modal .closebutton{position:absolute;top:0.5rem;right:0.5rem;font-size:32px;text-align:center;width:54px;z-index:99;}