// $Id: site.less 24153 2017-06-19 17:52:21Z efolley $

@import "/assets/less/base.less";

// Site Colors

@blue:        #069;
@darkBlue:      #236d92;
@darkerBlue:    #00539b;
@lightBlue:     #3cf;
@yellow:      #ffcd36;
@red:         #cb2027;
//@orange:      #facc2e;
@orange:        #ffcc00;
@oliveGreen:    #aec656;
@brightGreen:     #28e515;
@pink:        #ff0084;
@purple:      #b600ff;
@customGray:    #d0e8f6;
@textColor:     #333;

// 2022 Refresh

@dark-blue-2022:  #25408f;
@light-blue-2022:   #e8f4fc;
//@orange-2022:     #f59d27;
@orange-2022:     @orange;

// Typography
@fontSize:      16px;
@lineHeight:    1.4;
@baseline:      @fontSize * @lineHeight;

@lucida:      "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;

/* ===============================================
   GLOBAL ELEMENTS
   =============================================== */

div.preview-notice {
  display: none;
}

body:after {
  display: none;
}

html,
button,
input,
select,
textarea {
  font-family: @lucida;
  font-size: 12px;
  color: @textColor;
}
html {
  font-size: @fontSize;
  line-height: @lineHeight;
}

.sizer {
  .contain-floats();
}

h1, h2, h3 {
  color: @dark-blue-2022;
}
h1 {
  text-transform: uppercase;
}
h3 {
  font-size: 1.2rem;
}
h4, h5, h6 {
  color: @black;
}

.hp-leadin-title {
  font-size: 1.25rem;
  color: @textColor;
}

a {
  //color: @darkBlue;
  color: #3366cc;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

// color utilities
.black,
button.black,
a.button.black {
  color: @black;
}
.white,
button.white,
a.button.white {
  color: @white;
}
.blue,
button.blue,
a.button.blue {
  color: @blue;
}
.dark-blue,
button.dark-blue,
a.button.dark-blue {
  color: @darkBlue;
}
.darker-blue,
button.darker-blue,
a.button.darker-blue {
  color: @darkerBlue;
}
.light-blue,
button.light-blue,
a.button.light-blue {
  color: @lightBlue;
}
.red,
button.red,
a.button.red {
  color: @red;
}
.orange,
button.orange,
a.button.orange {
  color: @orange;
}
.yellow,
button.yellow,
a.button.yellow {
  color: @yellow;
}
.olive-green,
button.olive-green,
a.button.olive-green {
  color: @oliveGreen;
}
.bright-green,
button.bright-green,
a.button.bright-green {
  color: @brightGreen;
}
.pink,
button.pink,
a.button.pink {
  color: @pink;
}
.purple,
button.purple,
a.button.purple {
  color: @purple;
}
.custom-gray,
button.custom-gray,
a.button.custom-gray {
  color: @customGray;
}
.bg-black,
button.bg-black,
a.button.bg-black {
  background-color: @black;
}
.bg-white,
button.bg-white,
a.button.bg-white {
  background-color: @white;
}
.bg-blue,
button.bg-blue,
a.button.bg-blue {
  background-color: @blue;
}
.bg-dark-blue,
button.bg-dark-blue,
a.button.bg-dark-blue {
  background-color: @darkBlue;
}
.bg-darker-blue,
button.bg-darker-blue,
a.button.bg-darker-blue {
  background-color: @darkerBlue;
}
.bg-light-blue,
button.bg-light-blue,
a.button.bg-light-blue {
  background-color: @lightBlue;
}
.bg-red,
button.bg-red,
a.button.bg-red {
  background-color: @red;
}
.bg-orange,
button.bg-orange,
a.button.bg-orange {
  background-color: @orange;
}
.bg-yellow,
button.bg-yellow,
a.button.bg-yellow {
  background-color: @yellow;
}
.bg-olive-green,
button.bg-olive-green,
a.button.bg-olive-green {
  background-color: @oliveGreen;
}
.bg-bright-green,
button.bg-bright-green,
a.button.bg-bright-green {
  background-color: @brightGreen;
}
.bg-pink,
button.bg-pink,
a.button.bg-pink {
  background-color: @pink;
}
.bg-purple,
button.bg-purple,
a.button.bg-purple {
  background-color: @purple;
}
.bg-custom-gray,
button.bg-custom-gray,
a.button.bg-custom-gray {
  background-color: @customGray;
}

// faux headers
.h1 {
  font-size: 2rem;
  font-weight: bold;
}
.h2 {
  font-size: 1.5rem;
  font-weight: bold;
}
.h3 {
  font-size: 1.2rem;
  font-weight: bold;
}

// override vanilla inherit
h1 span a,
h2 span a,
h3 span a,
h4 span a,
h5 span a,
h6 span a {
  color: #3366cc;
}
button,
a.button {
  background-color: @darkerBlue;
  color: @white;
  text-transform: uppercase;
  border-radius: 0;
}
body.is-form #content button[type="submit"],
body.is-form #content a.button {
  height: auto;
  padding: 10px 20px;
  font-size: 18px;
}

blockquote {
  margin: 0 20px;
}
.callout {
  .contain-floats();
  font-size: 17px;
  padding: 10px;
  background: #d9edf8;
  margin-bottom: @baseline;
  //text-align: center;

  :last-child {
    margin-bottom: 0;
  }
}
.centered {
  text-align: center;
}
span.centered {
  display: block;
}
.block-grid.centered {

  .listed-item {

    .img img {
      margin: 0 auto;
    }
  }
}
.listed-item h3.title {
  text-transform: uppercase;
}

.pt-wrapper {

  .email a {
    background: #c1272d;
    color: @white;
    border-radius: 3px;
  }
  .print a {
    background: @darkGray;
    color: @white;
    border-radius: 3px;
  }
  .fa,
  .fa-solid,
  .fa-brands {
    color: @white !important;
  }

  &.pt-bottom {

    .email a,
    .print a {
      padding: 0 8px;
      height: 28px;
      line-height: 28px;
      font-size: 14px;
    }
  }
  &.pt-top {

    .email a,
    .print a {
      padding: 0 6px;
      height: 20px;
      line-height: 20px;
      font-size: 11px;
    }
  }
}
.blog-post-wrapper {
  .contain-floats();
}
p.tags {
  font-size: 14px;
}

#content .img.align-right,
#content .img.align-left {
  max-width: 50%;
}
p.back-to {
  text-align: center;
  clear: both;
}

.contrib-info {
  margin-bottom: 1.5rem;

  .bio {
    font-style: italic;
  }
  .img {
    margin-bottom: .5em;
  }
}
#content .contrib-info {
  padding-top: 1.5rem;
  border-top: 1px solid #c0c0c0;

  h2 {
    font-size: 18px;
  }
}
#sidebar .contrib-info {
  background: #d9edf8;
  padding: 10px 15px;
  font-size: 13px;

  .img {
    max-width: 50%;
  }
}

.accordion .accordion-tab {
  background: @darkBlue;
  color: @white;
}

.captcha-wrapper {
  margin-bottom: .75rem;
}

// contribution form text labels

form#contribution-form div.label-amount div.label-wrapper div.label {
  width: auto;
  float: none;
}

/***** PAGINATION *****/

.pagination {

  ul {

    li {
      height: 30px;
      line-height: 30px;

      span,
      a {
        padding: 0;
      }

      &.page-num {
        padding: 0 5px;
        width: auto;
        white-space: nowrap;

        &:hover {
          background: none;
        }
      }
    }
  }
}

/***** SIMPLE SHARE LINKS *****/

.share-wrapper-simple {
  margin-bottom: 1rem;

  ul {
    margin: 0;
    list-style: none;

    li {
      display: inline-block;
      margin: 0 5px 0 0;

      &.share-print,
      &.share-email {
        background: @lightGray;
      }
      &.share-fb {
        background: @facebookBlue;
      }
      &.share-tw {
        background: @twitterBlue;
      }
      &.share-pin {
        background: @pinterestRed;
      }
      &.share-wa {
        background: #25d366;
      }

      a {
        display: block;
        height: 28px;
        width: 28px;
        line-height: 28px;
        font-size: 16px;
        color: @white;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
      }
    }
  }

  &.sw-bottom {

    ul {

      li {

        a {
          height: 28px;
          width: 28px;
          line-height: 28px;
          font-size: 16px;
        }
      }
    }
  }
}

@media only screen and (min-width: 641px) {

  body {
    //background: url(/images/bg_background_mid_v2.jpg) 50% 121px no-repeat, #e2f1fb url(/images/bg_background_cont_v2.jpg) 0 121px repeat-x;
    //background-color: @light-blue-2022;
  }
  body.is-form {
    //background: url(/images/bg_background_mid_v2.jpg) 50% 121px no-repeat, #e2f1fb url(/images/bg_background_cont_v2.jpg) 0 121px repeat-x;
  }
}

@media only screen and (max-width: 640px) {

  body {
    //background: #e2f1fb;
    //background-color: @light-blue-2022;
  }

  iframe {
    max-width: 100% !important;
  }

}

// smaller grids for mobile

@media only screen and (max-width: 640px) {

  .block-grid-sm {
    .contain-floats();
  }
  .block-grid-sm > div {
    float: left;
  }
  .block-grid-sm > div:nth-of-type(n) {
    clear: none !important;
  }
  .block-grid-sm.two-up-sm > div {
    margin-right: 6%;
    width: 47%;

    &:nth-of-type(2n) {
      margin-right: 0 !important;
    }
    &:nth-of-type(2n+1) {
      clear: left !important;
    }
  }
  .block-grid-sm.three-up-sm > div {
    margin-right: 4.25%;
    width: 30.5%;

    &:nth-of-type(3n) {
      margin-right: 0 !important;
    }
    &:nth-of-type(3n+1) {
      clear: left !important;
    }
  }
  .block-grid-sm.four-up-sm > div {
    margin-right: 3.3333%;
    width: 22.5%;

    &:nth-of-type(4n) {
      margin-right: 0 !important;
    }
    &:nth-of-type(4n+1) {
      clear: left !important;
    }
  }
  .block-grid-sm.five-up-sm > div {
    margin-right: 2.5%;
    width: 18%;

    &:nth-of-type(5n) {
      margin-right: 0 !important;
    }
    &:nth-of-type(5n+1) {
      clear: left !important;
    }
  }
  .block-grid-sm.six-up-sm > div {
    margin-right: 2%;
    width: 15%;

    &:nth-of-type(6n) {
      margin-right: 0 !important;
    }
    &:nth-of-type(6n+1) {
      clear: left !important;
    }
  }
  .block-grid-sm.seven-up-sm > div {
    margin-right: 1.2857%;
    width: 13%;

    &:nth-of-type(7n) {
      margin-right: 0 !important;
    }
    &:nth-of-type(7n+1) {
      clear: left !important;
    }
  }

}


/* ===============================================
   MAIN STRUCTURE
   =============================================== */

/***** STICKY TOP *****/

#sticky-top {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 5000;
}
@media only screen and (min-width: 641px) {

  body {
    padding-top: 121px;
  }
  #sticky-top {
    height: 121px;
  }
}
@media only screen and (max-width: 640px) {

  body {
    padding-top: 150px;
  }
  #sticky-top {
    height: 150px;
  }
}


/***** TOP BAR *****/

#top-bar {
	height: 40px;
	background: @dark-blue-2022;

	.sizer {
	  padding: 8px 0;
	}

	.g-translate {
	  float: left;
	}
  #google_translate_element {
    height: 30px;
    overflow: hidden;
    margin-top: -5px;

    .goog-te-gadget,
    .goog-te-combo {
      font-family: @lucida;
      white-space: nowrap;
      font-size: 14px;
      border-radius: 3px;
    }
  }

  .signup-link {
    float: right;
    margin-right: 20px;

    h2 {
      margin: 0;
      font-size: 14px;
      font-weight: normal;
      line-height: 24px;
      font-weight: bold;
    }

    a {
      color: @white;
      font-weight: normal;
    }
  }
  .search {
    float: right;
    margin: 0 16px 0 0;

    form {
      height: 24px;
      vertical-align: middle;

      div.formrow {
        height: 24px;
        margin: 0;
        vertical-align: middle;
      }

      input#top-search {
        width: 200px;
        height: 24px;
        border: 0;
        padding: 0 5px;
      }
      input#top-search::placeholder {
        font-weight: bold;
      }
    }
    button {
      height: 24px;
      background: transparent;
      color: @white;
      font-size: 16px;
    }
    a.button {
      background-color: #3cf;
      height: 24px;
      line-height: 24px;
      padding: 0 10px;
      font-size: 12px;
    }
  }
  .social {
    float: right;
    list-style: none;
    margin: 0 16px 0 0;

    li {
      display: inline-block;
      margin: 0 5px;
      line-height: 24px;
    }
    .fa,
    .fa-solid,
    .fa-brands {
      font-size: 18px;
      line-height: 24px;
      color: @white;
    }
  }

  div.login {
    float: right;
    margin: 0 16px 0 0;
    color: @white;

    a {
      color: @white;
      font-size: 14px;
    }
  }

  .more-menu {
    float: right;
    position: relative;

    .sd-trigger {
      color: @white;
      text-transform: uppercase;
      font-weight: bold;
      font-size: 16px;
      line-height: 24px;
      text-decoration: none;
    }
    .sd-menu {
      position: absolute;
      top: 100%;
      right: 0;
      display: none;
      border: 1px solid @gray;
      background: @white;

      a {
        display: block;
        padding: 5px 10px;
        color: @darkBlue;
        white-space: nowrap;
      }
    }
  }
}

@media only screen and (min-width: 641px) {

  #top-bar {

    .more-menu {
      display: none;
    }
  }
}
@media only screen and (max-width: 640px) {

  #top-bar {

    .sizer {
      padding: 8px 10px;
    }

    #google_translate_element {

      .goog-te-gadget,
      .goog-te-combo {
        width: 100px;
      }
    }

    .social {

      li:nth-of-type(1n + 4) {
        display: none;
      }

    }
    .search {
      //display: none;
    }

    .signup-link {
      display: none;
    }

    .login {
      display: none;
    }
  }
}

/***** TOP BAR *****/

#top-bar-v2 {
	height: 40px;
	background: @dark-blue-2022;

	.sizer {
	  padding: 8px 0;
	}
	
	.container {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.group-1,
	.group-2 {
	  display: flex;
	  align-items: center;
	  
	  > *:not(:last-child) {
	    margin-right: 1.5rem;
	  }
	}

	.g-translate {
	  //float: left;
	}
  #google_translate_element {
    height: 30px;
    overflow: hidden;
    margin-top: -5px;

    .goog-te-gadget,
    .goog-te-combo {
      font-family: @lucida;
      white-space: nowrap;
      font-size: 14px;
      border-radius: 3px;
    }
  }

  .signup-link {
    //float: right;
    //margin-right: 20px;

    h2 {
      margin: 0;
      font-size: 14px;
      font-weight: normal;
      line-height: 24px;
      font-weight: bold;
    }

    a {
      color: @white;
      font-weight: normal;
    }
  }
  .search {
    //float: right;
    //margin: 0 16px 0 0;

    form {
      height: 24px;
      vertical-align: middle;

      div.formrow {
        height: 24px;
        margin: 0;
        vertical-align: middle;
      }

      input#top-search {
        width: 200px;
        height: 24px;
        border: 0;
        padding: 0 5px;
      }
      input#top-search::placeholder {
        font-weight: bold;
      }
    }
    button {
      height: 24px;
      background: transparent;
      color: @white;
      font-size: 16px;
    }
    a.button {
      background-color: #3cf;
      height: 24px;
      line-height: 24px;
      padding: 0 10px;
      font-size: 12px;
    }
  }
  .social {
    //float: right;
    list-style: none;
    //margin: 0 16px 0 0;
    margin-bottom: 0;

    li {
      display: inline-block;
      margin: 0 5px;
      line-height: 24px;
    }
    .fa,
    .fa-solid,
    .fa-brands {
      font-size: 18px;
      line-height: 24px;
      color: @white;
    }
  }

  div.login {
    //float: right;
    //margin: 0 16px 0 0;
    color: @white;

    a {
      color: @white;
      font-size: 14px;
    }
  }

  .more-menu {
    // float: right;
    position: relative;

    .sd-trigger {
      color: @white;
      text-transform: uppercase;
      font-weight: bold;
      font-size: 16px;
      line-height: 24px;
      text-decoration: none;
    }
    .sd-menu {
      position: absolute;
      top: 100%;
      right: 0;
      display: none;
      border: 1px solid @gray;
      background: @white;

      a {
        display: block;
        padding: 5px 10px;
        color: @darkBlue;
        white-space: nowrap;
      }
    }
  }
}

@media only screen and (min-width: 641px) {

  #top-bar-v2 {

    .more-menu {
      display: none;
    }
  }
}
@media only screen and (max-width: 640px) {

  #top-bar-v2 {

    .sizer {
      padding: 8px 10px;
    }

    .group-1,
    .group-2 {
    
      > *:not(:last-child) {
        margin-right: 1rem;
      }
    }

    #google_translate_element {

      .goog-te-gadget,
      .goog-te-combo {
        width: 100px;
      }
    }

    .social {

      li:nth-of-type(1n + 4) {
        display: none;
      }

    }
    .search {
      //display: none;
    }

    .signup-link {
      display: none;
    }

    .login {
      display: none;
    }
  }
}

/***** TOP *****/

#top {}

@media only screen and (min-width: 641px) {

  #top {
    background: @white;

    .logo {
      padding: 10px 30px 10px 0;
      width: 230px;
      height: 81px;
      float: left;
    }
  }

}
@media only screen and (max-width: 640px) {

  #top {
    background: @white;

    .mobile-wrapper {
      display: flex;
      align-items: center;
      width: 100%;

      .logo {
        padding-right: 10%;
      }
      #menu-toggle {
        font-size: 24px;
        white-space: nowrap;

        a {
          color: @darkBlue;
          text-decoration: none;
        }

        span {
          font-size: 80%;
          line-height: 24px;
        }
      }
    }

  }
}

/***** TOPNAV *****/

#topnav {}

@media only screen and (min-width: 641px) {

  #topnav {
    height: 81px;
    margin: 0 auto;
    width: 752px;
    float: left;

    > ul {
      margin: 0;
      list-style: none;
      display: table;
      width: 752px;

      > li {
        margin: 0;
        position: relative;
        display: table-cell;

        > a {
          padding: 0 5px;
          display: block;
          //color: @blue;
          color: @dark-blue-2022;
          line-height: 81px;
          text-decoration: none;
          text-transform: uppercase;
          font-size: 13px;
          font-weight: bold;
          text-align: center;
          white-space: nowrap;
        }
        &:hover {
          //background: url(/images/bg_topnav_active.jpg) repeat-x;
          //background-size: contain;
          background-color: @lightBlue;

          > a {
            color: @white;
          }
        }
      }

      > li.topnav7 {
        //background: url(/images/bg_topnav7.jpg) repeat-x;
        //background-size: contain;
        background-color: @orange-2022;

        > a {
          color: @white;
        }
      }
    }

    .level2 {
      position: absolute;
      top: 81px;
      left: -999em;
      background: #ebeceb;
      z-index: 99999;

      > ul {
        margin: 0;
        list-style: none;

        > li {
        
          &.header {
            padding: 5px 10px;
            font-size: 14px;
            font-weight: bold;
          }

          > a {
            width: 200px;
            padding: 5px 10px;
            display: block;
            line-height: 1;
            //color: @blue;
            color: @dark-blue-2022;
            font-size: 14px;
            font-weight: normal;
            text-decoration: none;
          }
          &:hover {
            background: @lightBlue;

            a {
              color: @white;
            }
          }
        }
      }
    }
    > ul > li:hover .level2 {
      left: 0;
      z-index: 99999;
    }
  }
}
@media only screen and (max-width: 640px) {

  #topnav {

    > ul {
      display: none;
      float: none;
      width: 100%;
      .contain-floats;

      > li {
        float: none;
        margin: 0;
        width: 100%;
        height: auto;
        display: block;
        border-top: 1px solid @white;
        
        > a {
          display: block;
          width: 100%;
          color: @white;
          background: @darkBlue;
          text-align: left;
          height: auto;
          line-height: 1;
          font-size: 16px;
          font-weight: bold;
          border-radius: 0;
          padding: 10px;

          i {
            display: none;
          }
        }
        > div.subnav {
          float: right;
          padding: 6px 10px;
          color: @white;
          width: auto;
          background: none;

          i {
            font-size: 16px;
          }
        }
      }
    }
    .level2 {
      display: none;

      > ul {

        > li {

          &.header {
            background: @darkBlue;
            color: @white;
            line-height: 1;
            padding: 8px 10px 8px 15px;
            border-top: 1px solid #fff;
            font-style: italic;
          }

          > a {
            display: block;
            line-height: 1;
            padding: 8px 10px 8px 25px;
            color: @white;
            background: @darkBlue;
            border-top: 1px solid #fff;
            border-bottom: none;
            text-decoration: none;
          }
        }
      }
    }
    ul ul ul {
      display: none;
    }
    
    .topnav2 .level2,
    .topnav2 .subnav {
      //display: none !important;
    }
  }
}

/***** HILITE *****/

#hilite {}

@media only screen and (min-width: 641px) {

  #hilite	{
    height: 114px;
    margin: 0 0 10px;
    
    > .sizer {
      background: url(/images/hilite_bg_default.jpg) no-repeat;
      background-size: cover;
    }

    h2	{
      color: #fff;
      font-size: 51px;
      font-family: Cambria, Georgia, serif;
      font-weight: normal;
      line-height: 114px;
      margin: 0;
      padding: 0 15px;
      text-transform: uppercase;
    }
  }
}
@media only screen and (max-width: 640px) {

  #hilite {
    display: none;
  }
}


/***** BREADCRUMBS *****/

#breadcrumbs {
  margin-bottom: 0;

  .sizer {
    border-top: 1px solid #ccc;
    //color: @white;
    padding: 10px 0;

    a	{
      color: #33ccff;
    }
  }
}
@media only screen and (max-width: 640px) {

  #breadcrumbs {

    .sizer {
      color: @darkBlue;
      border-top: 0;

      a {
        color: @darkBlue;
      }
    }
  }
}


/***** MIDDLE *****/

#middle {}

@media only screen and (min-width: 641px) {

  #middle,
  body.events.is-form #middle {
    padding-bottom: 10px;

    #content {
      width: 640px;
      //padding: 10px 30px;
      //background: #f8fbfe;
      margin-right: 22px;
      float: left;
    }
    #sidebar {
      width: 320px;
      float: left;
    }
  }

  body.is-form #middle,
  body.layout-no-sidebar #middle,
  body.events.layout-no-sidebar #middle {

    #content {
      //background: #f8fbfe;
      width: 100%;
      float: none;
      //padding: 10px 30px;
    }
  }
  body.is-home #middle {

    #content {
      width: 100%;
      padding: 0;
      float: none;
      background: transparent;
    }
  }
}
@media only screen and (max-width: 640px) {

  #middle {
  
    .search {
      padding: 10px;
      margin-bottom: 10px;
      background-color: @darkBlue;
      
      a.button {
        background-color: @lightBlue;
      }
        
      /*
      .formrow {
        margin-bottom: 0;
        display: flex;
        justify-content: space-between;
        
        &::after {
          display: none;
        }
      }
      input {
        height: 25px;
        width: 85%;
      }
      button {
        background-color: @yellow;
      }
      */
    }

    #sidebar {
      max-width: 320px;
      margin: 0 auto;
    }
  }
}

/***** BOTTOM *****/

#bottom {
  padding: 30px 0;
  background: #093254 url(/images/bg_bottom_form.jpg) repeat-x;
  color: @white;

  .tools {
    margin-bottom: @baseline * 2;

    h2 {
      color: @white;
      text-transform: uppercase;
    }
    h3 {
      color: @white;
      font-size: 1rem;
    }
    form {
      margin-bottom: @baseline;

      input {
        width: 100%;
        height: 30px;
        margin-bottom: @baseline/2;
        border: 0;
        text-align: center;
      }
      button {
        width: 100%;
        height: 30px;
        background: @lightBlue;
      }
    }

    .connected {

      ul {
        margin-bottom: @baseline;

        li {
          display: inline-block;
          margin: 0 0 5px 0;


          .fa,
          .fa-solid,
          .fa-brands {
            font-size: 1.25rem;
            height: 24px;
            width: 24px;
            line-height: 24px;
            background: @white;
            text-align: center;
          }
        }
      }
    }

    .contribute {

      p {
        font-size: 1rem;
      }

      a.button {
        width: 100%;
        height: auto;
        background-color: @yellow;
        padding: 20px;
        text-align: center;
        text-transform: uppercase;
        font-weight: bold;
      }
    }
  }

  .info {

    a {
      color: #6cf;
    }
    .nav-list {
      display: flex;
      flex-flow: row wrap;
      margin-bottom: @baseline/2;

      li {
        margin: 0;
        padding: 0;
        border: 0;
        line-height: @lineHeight;

        &:after {
          content: '|';
          padding: 0 8px;
        }
      }
      li:last-child:after {
        content: '';
        padding: 0;
      }
    }
    p {
      margin-bottom: @baseline/2;
    }
  }
}

@media only screen and (min-width: 641px) {
}
@media only screen and (max-width: 640px) {

  #bottom {

    .tools {

      .get {
        display: none;
      }
    }
  }
}

/***** BOTTOM-V2 *****/

#bottom-v2 {
  padding: 3rem 0;
  background: @dark-blue-2022;
  color: @white;
  
  .ours {
    margin-bottom: 2rem;
  }
  
  .actions {
    margin-bottom: 2rem;
    
    h2 {
      color: @orange-2022;
      text-transform: uppercase;
      text-align: center;
    }
    
    > div {
      padding: 0 1rem;
    }
    
    .search {
    
      form {
        margin-bottom: 1.5rem;

        input {
          width: 100%;
          height: 30px;
          margin-bottom: @baseline/2;
          border: 0;
          text-align: center;
        }
        button {
          width: 100%;
          height: 30px;
          background: @lightBlue;
        }
      }
      
      a.button {
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        background: #3cf;
        font-size: 12px;
        margin-bottom: @baseline;
        text-align: center;
      }
      
      h3 {
        color: @white;
        margin-bottom: .25rem;
      }
      
      ul {
        margin-bottom: @baseline;

        li {
          display: inline-block;
          margin: 0 0 5px 0;


          .fa,
          .fa-solid,
          .fa-brands {
            font-size: 1.25rem;
            height: 24px;
            width: 24px;
            line-height: 24px;
            background: @white;
            text-align: center;
          }
        }
      }
    }
    
    .contribute {
      text-align: center;

      .button {
        height: 2.5rem;
        line-height: 2.5;
        padding: 0 1rem;
        background: @orange-2022;
      }
    }
    
    .connected {

      form {
        margin-bottom: 1.5rem;

        input {
          width: 100%;
          height: 30px;
          margin-bottom: @baseline/2;
          border: 0;
          text-align: center;
        }
        button {
          width: 100%;
          height: 30px;
          background: @lightBlue;
        }
      }
      
      .vc-link {
        text-align: center;
        
        img {
          display: inline-block;
        }
      }
    }
  
  }

  .info {

    a {
      color: #6cf;
    }
    .nav-list {
      display: flex;
      flex-flow: row wrap;
      margin-bottom: @baseline/2;

      li {
        margin: 0;
        padding: 0;
        border: 0;
        line-height: @lineHeight;

        &:after {
          content: '|';
          padding: 0 8px;
        }
      }
      li:last-child:after {
        content: '';
        padding: 0;
      }
    }
    p {
      margin-bottom: @baseline/2;
    }
  }
}


/****** SIDEBAR BOXES ******/

#sidebar,
body.is-home .sidebar {

  > div {
    margin-bottom: @baseline/2;
  }

  .tags {
    display: none; // rt21410
    padding: 10px 15px;
    background: @white;
    font-size: 14px;

    > p {
      margin: 0;
    }
  }

  .social-icons {
    padding: 10px 15px;
    .contain-floats();

    ul {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;

      li {
        text-align: center;
        margin-bottom: 0;
        display: block;
      }
    }
  }

  .azm {

    .listed-item {
      margin-bottom: 0;
    }
  }

  .vci {
    height: 146px;
    padding-top: 63px;
    background: url(/images/bg_sidebar_login.png) no-repeat;

    p {
      text-align: center;
      color: @white;
      margin-bottom: @baseline/2;

      &:last-child {
        margin-bottom: 0;
        font-size: 12px;
      }

      a {
        color: @white;
        text-decoration: underline;
      }
    }
  }

  .contribute {
    padding: 20px;
    //background-color: #f7a800;
    background-color: @orange;

    h2 {
      font-size: 40px;
      text-align: center;
      text-transform: uppercase;
    }
    form {
      text-align: center;

      input {
        display: inline-block;
        width: 200px;
        height: 30px;
        margin-bottom: 20px;
        font-size: 18px;
        padding-left: 10px;
      }
      button {
        display: inline-block;
        clear: both;
        font-size: 18px;
        font-weight: bold;
        padding: 5px 10px;
        background: #369;
        color: @white;
      }
    }
  }

  .calendar {
    background: #d0e8f6;
    padding: 10px;

    h2 {
      color: @textColor;
      font-size: 18px;
      text-transform: uppercase;
    }

    #events,
    #events-type {

      .listeditem {
        display: flex;
        flex-direction: row;
        margin-bottom: 1rem;

        h3.title {
          margin: 0;
          font-size: 14px;
        }

        .dt {
          padding-right: 20px;

          .month {
            padding: 4px 10px;
            text-align: center;
            font-size: 10px;
            color: @white;
            background: #333;
            display: block;
          }
          .day {
            padding: 2px 10px;
            text-align: center;
            font-size: 1rem;
            color: @white;
            background: #aec656;
            display: block;
          }
        }
      }
    }
  }

  .feeds {
    background: #d0e8f6;
    padding: 10px;

    ul.tabs {
      font-size: 14px;
      margin-bottom: @baseline/2;

      li {
        background: #b8cae8;
        color: @darkBlue;
        padding: 5px;
        margin-left: 3px;
        border-radius: 0;

        &.active {
          background: @darkBlue;
          color: @white;
        }
      }

      &.border {
        border-bottom: 1px solid @darkBlue;

        li {
          border: 0;
          bottom: 0;
        }
      }
    }
    .archive-box {

      .listed-item {

        h3.title {
          margin-bottom: 0;
          font-size: 14px;
          text-transform: none;
        }
        p.date {
          font-size: 14px;
          margin-bottom: .25rem;
        }
      }
    }
  }

  .signup {
    background: #275eaa;
    padding: 10px;

    h2 {
      color: @white;
      text-align: center;
      font-size: 16px;
    }

    form {
      text-align: center;

      input {
        width: 65%;
        border: 0;
        height: 25px;
        padding-left: 10px;
      }
      button {
        width: 30%;
        background: #cf0a2c;
      }
    }
  }

  .ad1,
  .ad2,
  .ad3 {
    display: none;
  }
  
  .hp-signup-v2 {
    padding: 20px;
    background-color: @darkerBlue;
    color: @white;
    
    h2 {
      font-size: 1.2rem;
      text-align: center;
      text-transform: uppercase;
      //color: #f7a800;
      color: @orange;
    }
    
    input {
      width: 100%;
      height: 40px;
      margin-bottom: 20px;
      font-size: 18px;
      padding-left: 10px;
    }
    button {
      width: 100%;
      height: 40px;
      font-size: 18px;
      font-weight: bold;
      padding: 0 1rem;
      //background: #f7a800;
      background: @orange;
      color: @darkerBlue;
    }
  }
  
  .sidebar-about,
  .sidebar-programs {
  
    img {
      width: 100%;
    }
    
    h2 {
      margin: 0;
      font-size: 2.5rem;
      text-transform: uppercase;
      color: @white;
      text-shadow: 0px 0px 6px rgba(0,0,0,0.75);
    }
    
    a {
      text-decoration: none;
    }
  }
}

/* ===============================================
   BACK TO TOP
   =============================================== */

#back-to-top {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 99999;
  height: auto;
  width: 60px;

  a {
    display: block;
    height: auto;
    width: 60px;
    padding: 5px;
    text-align: center;
    color: @white;
    font-size: 10px;
    text-decoration: none;
    background-color: @lightBlue;

    i {
      color: @white;
      font-weight: bold;
      line-height: 1;
      font-size: 2rem;
    }
  }

}

/* ===============================================
   HOMEPAGE
   =============================================== */

body.is-home {

  .bottom {

    .subfeatures {

      .listed-item {
        background: @white;
        
        .img {
          //width: 50%;
        }

        h3.title {
          font-size: 26px;
          text-transform: uppercase;
          font-weight: normal;
          color: @textColor;
        }
      }
    }
  }
}

@media only screen and (min-width: 641px) {

  body.is-home {
    //background: url(/images/bg_background_mid_v2.jpg) 50% 121px no-repeat, #e2f1fb url(/images/bg_background_cont_v2.jpg) 0 121px repeat-x;

    #middle {}

    .slideshow {

      .listed-item {
        margin-bottom: 0;

        .media {
          margin-bottom: 0;
        }
      }
    }

    .bottom {

      .column-1 {
        width: 640px;
        //width: auto;
        margin-right: 22px;
        //margin-right: 0;
        //float: none;
      }
      .column-2 {
        width: 320px;
        //display: none;
      }

      .subfeatures {

        .listed-item {
          padding: 10px;
          display: block;

          .img {
            //width: 200px;
            width: 50%;
            margin-right: 3%;
            float: left;
          }
          .readmore {
            //display: none;
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 640px) {

  body.is-home {

    #middle > .sizer {
      padding-top: 0;
    }

    .slideshow {

      .listed-item {
        margin-bottom: 0;
      }
    }
    .bottom {

      .subfeatures {

        .listed-item {

          h3.title {
            margin: 0 0 @baseline/6;
          }
          .txt {
            padding: 10px;
          }
          .teaser {
            margin-bottom: @baseline/6;
          }
          .readmore {
            margin-bottom: 0;
          }
        }
      }

      .sidebar {
        max-width: 320px;
        margin: 0 auto;
      }
    }
  }
}

/* ===============================================
   CATEGORY ARCHIVES
   =============================================== */

@media only screen and (min-width: 641px) {

  body.category-archive {

    .archive-list {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;

      .listed-item {
        display: block;
        flex-basis: 23%;

        .img {
          width: 100%;
          margin: 0 0 6px;

          img {
            width: 100%;
          }
        }
        .date {
          font-size: 14px;
          margin-bottom: 6px;
        }
        h3.title {
          font-size: 14px;
          text-transform: none;
        }
        .source {
          display: none;
        }
      }
    }
  }
}
@media only screen and (max-width: 640px) {

  body.category-archive {

    .archive-list {

      .listed-item {
        flex-flow: column nowrap;

        .img {
          width: 100%;
          margin: 0 0 6px;

          img {
            width: 100%;
          }
        }
        .date {
          font-size: 14px;
          margin-bottom: 6px;
        }
        h3.title {
          font-size: 14px;
          text-transform: none;
        }
      }
    }
  }
}

/* ===============================================
   ARCHIVE BOXES
   =============================================== */

#content .archive-box {

  &.block-grid {

    .listed-item {
      flex-direction: column;

      .img {
        width: 100%;
        margin: 0 0 6px;

        img {
          width: 100%;
        }
      }
      .date {
        font-size: 14px;
        margin-bottom: 6px;
      }
      h3.title {
        font-size: 14px;
        text-transform: none;
      }
      .source {
        display: none;
      }
    }
  }
}


/* ===============================================
   BLOG CAROUSEL
   =============================================== */

.recent-blog-carousel-wrapper {
  margin-bottom: @baseline;
}
.recent-blog-carousel {

  .listed-item {
    flex-direction: column;
    padding: 0 5px;
    margin: 0;

    .img {
      margin-bottom: 4px;
    }
    h3.title {
      text-align: center;
      font-size: 12px;
      font-weight: normal;
      margin: 0;
    }
  }
  .owl-dots {
    display: none;
  }

  &.owl-theme .owl-nav [class*='owl-'] {
    background: @darkBlue;
    border-radius: 0;
    font-weight: bold;
  }
}

@media only screen and (min-width: 641px) {

  .recent-blog-carousel {
    padding: 10px 0;
    background: @lightestGray;
  }
}
@media only screen and (max-width: 640px) {
}


/* ===============================================
   EVENTS
   =============================================== */

.event-listing {

  .tmpl-event-details {

    h1 {
      text-transform: none;
    }

    .map-wrapper {
      width: 100%;
      height: 300px;
    }

    .two-columns {

      .column-1 {

        .event-info-summary {

        }
      }
    }
  }
}

@media only screen and (min-width: 641px) {

  .event-listing {

    &.screen-event-details #content {
      background: transparent !important;
      padding: 0 !important;

      > .pt-wrapper {
        display: none;
      }
    }

    .tmpl-event-search {

      .top-wrapper {
        display: flex;

        > form {
          width: 60%;
        }
        > div {
          text-align: center;
          width: 40%;
        }

      }

      .event-item {
        display: flex;
        padding-bottom: .5rem;
        margin-bottom: .5rem;
        border-bottom: 1px solid @gray;

        .img {
          flex: 0 0 300px;
          width: 300px;
          margin-right: 30px;

          .img-wrapper {
            width: 300px;
            max-height: 200px;
            overflow: hidden;

            img {
              width: 300px;
              height: auto;
            }
          }
        }

        .info {
          flex-grow: 1;

          h4 {
            font-size: 18px;
            margin-bottom: .25rem;
            color: @darkBlue;
          }
          p {
            margin-bottom: .25rem;

            &.dt {
              font-weight: bold;
            }
          }
        }
      }
    }

    .tmpl-event-details {

      .two-columns {

        .column-1 {
          width: 632px;
          margin-right: 30px;
          padding: 20px;
          background: @white;

          .map-wrapper iframe {
            width: 100%;
            height: 300px;
          }

          .event-info-summary {

            .when-wrapper {
              display: flex;

              .e-date {
                margin-right: 10px;
              }
            }
          }

          .atc-style-blue a.atcb-link {
            padding: 5px;
            width: auto;
            height: auto;
            font-family: @lucida;
            font-size: .9rem;
            font-weight: normal;
            text-transform: none;
          }


          .button-wrapper {
            display: flex;

            > div {
              margin-right: 10px;
            }
            a.button {
              padding: 5px;
              width: auto;
              height: 28px;
              font-family: @lucida;
              font-size: 1rem;
              font-weight: bold;
              text-transform: none;
            }
          }
        }

        #sidebar {

          .event-image {
            border: 0;
            padding: 0;

            .img {
              margin: 0;
            }

            img {
              width: 100%;
            }
          }

          .actions,
          .replies {
            border: 0;
            background: @white;
            border-radius: 0;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 640px) {

  .event-listing {

    .tmpl-event-search {

      .top-wrapper {

        form {
          margin-bottom: 1rem;
        }
      }

      .event-item {
        padding-bottom: .5rem;
        margin-bottom: .5rem;
        border-bottom: 1px solid @gray;

        .img {
          margin-bottom: .25rem;

          img {
            width: 100%;
          }
        }
        .info {

          h4 {
            font-size: 18px;
            margin-bottom: .25rem;
            color: @darkBlue;
          }
          p {
            margin-bottom: .25rem;

            &.dt {
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}

// action box on non-event-listings
body.events {

  #sidebar .event-actions {
    padding: 10px 10px 0;
    background: @white;
  }
}

/* ===============================================
   CONTRIBUTE FORM
   =============================================== */

#contribution-form {

  .formrow.submit {
    //background: url(/images/godaddy_seal.png) top right no-repeat;
    margin-bottom: 0;
  }

  .security-logos {
    display: flex;
    align-items: center;

    img {
      margin-right: 50px;
      //max-height: 50px;
    }
  }
}

.contribution-form.thanks {

  .intro {
    backgroud: @gray;

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

// fancy button amounts on all contribution forms
body.contribution-form #contribution-form {

  div.simple-amount {
    width: auto;
    margin-right: 10px;

    input[name="amount"] {
      position: absolute;
      left: -9999px;
    }
    label {
      margin-left: 0;
      background: @darkBlue;
      color: @white;
      padding: 8px 0;
      font-size: 20px;
      text-align: center;
      width: 80px;
      border-radius: 0;
    }

    input[name="amount"]:checked ~ label {
      background: @yellow;
    }
  }
  div.simple-amount-other {
    clear: both;
    margin-top: 10px;
    width: auto;
    float: none;

    input[name="amount_other"] {
      width: 100px;
    }
  }
}

body.pac-contribution-form {

  form#contribution-form {

    .like-formrow {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      margin-bottom: .75rem;

      .label-wrapper {
        flex: 0 0 70%;
        padding-right: 20px;

        label {
          width: auto;
          max-width: 100%;
        }
      }
      .input-wrapper {
        flex: 0 0 auto;
      }
    }

    div[class*="from-name"] {
      padding-bottom: .5rem;
      border-bottom: 1px solid @lighterGray;
    }

  }
}



@media only screen and (min-width: 641px) {}
@media only screen and (max-width: 640px) {}

/* kinda global, but putting it here */

.addtocalendar {
  width: 100%;
}
.atc-style-blue .atcb-link,
.atc-style-blue .atcb-link:hover,
.atc-style-blue .atcb-link:active,
.atc-style-blue .atcb-link:focus {
  padding: 5px 10px;
  text-align: center;
  font-weight: bold;
  line-height: 1;
  background: @darkerBlue;
  color: @white;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  text-transform: uppercase;
  font-size: 16px;
}
.atc-style-blue .atcb-item,
.atc-style-blue .atcb-item-link {
  margin: 0 !important;
}

/* ===============================================
   COMMENTS
   =============================================== */

#comment-formatting-help {
  display: none;
}

#comments {

  .comment {

    .meta {

      span:last-child {
        display: none;
      }
    }
  }
}



/* ===============================================
   SPLASH PAGE DEFAULT OVERRIDES
   =============================================== */

  .mfp-iframe-holder .mfp-content {
    max-width: 960px;
    height: 600px;
  }
  .mfp-wrap {
    z-index: 6000;
  }


/* ===============================================
   MAILING YOU WANT SPLASH PAGE
   =============================================== */

body.splash-mailing-you-want {}

@media only screen and (min-width: 641px) {

  body.is-form.splash-mailing-you-want {
    width: 960px;
    height: 600px;
    background: none;
    margin: 0;
    padding: 0;

    .page-container {
      min-width: 0;
    }
    #sticky-top,
    #messages {
      display: none;
    }

    #middle {
      width: 960px;
      height: 600px;
      background: none;
      margin: 0;
      padding: 0;

      .sizer {
        width: auto;
      }

      #content {
        width: 960px;
        height: 600px;
        margin: 0;
        padding: 0;
        background: url(/images/splash_mailing_you_want.jpg) no-repeat;

        .intro {
          display: none;
        }

        form {
          padding-top: 400px;
          padding-left: 500px;

          .fieldset {
            width: 270px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
          }

          label {
            display: none;
          }
          .formrow {
            width: 125px;
          }

          input {
            width: 125px;
            height: 25px;
            border-radius: 0;
            box-shadow: none;
            border: 0;
          }
          .formrow.submit {
            padding: 0;
            margin-top: 0;

            button {
              width: 125px;
              height: 25px;
              padding: 0;
              line-height: 25px;
            }
            p {
              display: none;
            }
          }
        }
        .listed-item {
          margin: 0;
        }
      }
    }
  }
}

@media only screen and (max-width: 640px) {

  body.splash-mailing-you-want {}
}

/* ===============================================
   GIVING TUESDAY 2017 SPLASH PAGE
   =============================================== */

body.splash-giving-tuesday-2017 {}

@media only screen and (min-width: 641px) {

  body.is-story.splash-giving-tuesday-2017 {
    width: 960px;
    height: 600px;
    background: none;
    margin: 0;
    padding: 0;

    .page-container {
      min-width: 0;
    }
    #sticky-top,
    #messages,
    p.credit {
      display: none;
    }

    #middle {
      width: 960px;
      height: 600px;
      background: none;
      margin: 0;
      padding: 0;

      .sizer {
        width: auto;
      }

      #content {
        width: 960px;
        height: 600px;
        margin: 0;
        padding: 0;

        .listed-item {
          margin: 0;

          > * {
            margin: 0 !important;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 640px) {

  body.splash-giving-tuesday-2017 {}
}

/* ===============================================
   BALFOUR SPLASH PAGE
   =============================================== */

#story-1114 {
  height: 600px !important;
  overflow: hidden !important;
  padding-top: 0;
}

#story-1114,
#story-1114 #content {
  background: none;
}

#story-1114 .page-container {
  min-width: 0;
}

#story-1114 #sticky-top,
#story-1114 #hilite,
#story-1114 #messages,
#story-1114 #bottom,
#story-1114 .intro,
#story-1114 .pt-wrapper,
#story-1114 form label,
#story-1114 .submit p  {
  display: none;
}

#story-1114 #container {
  min-width: 0;
}

#story-1114 #middle {
  margin: 0 auto;
  width: 960px;
  height: 600px;
}

#story-1114 #content {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;

  width: 960px;
  height: 600px;
  padding: 0;
  margin: 0;
  background: url(/images/bg_splash_01.jpg) no-repeat !important;
  position: relative;
}

#story-1114 .formrow {
  margin: 0;
}
#story-1114 input {
  padding: 0 5px;
  height: 23px;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;

}
#story-1114 input#first-name {
  position: absolute;
  top: 398px;
  left: 500px;
  width: 123px;
}
#story-1114 input#last-name {
  position: absolute;
  top: 398px;
  left: 630px;
  width: 123px;
}

#story-1114 input#email {
  position: absolute;
  top: 430px;
  left: 500px;
  width: 123px;
}

body#story-1114.is-form #content form button {
  padding: 0 10px;
  margin: 0;
  border: 0;
  position: absolute;
  top: 430px;
  left: 630px;
  height: 25px;
  width: 123px;
  background: #ff000c;
  color: #fff;
  vertical-align: middle;
  line-height: 1;
  text-transform: uppercase;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  font-size: 12px;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;

  float: none;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: top;
  *zoom: 1;
  *display: inline;
}

/* ===============================================
   E-CARDS
   =============================================== */

body#story-4275 {

  .list-box {
  
    .listed-item {
    
      .img {
        flex-shrink: 0;
        width: 48%;
        margin-right: 4%;
      }
      
      .txt {}
      
    }
  }
}
@media only screen and (max-width: 640px) {

  body#story-4275 {
  
    .list-box {
    
      .listed-item {
        flex-direction: column;
        
        .img {
          width: auto;
          margin: 0 0 10px;
        }
        
        h3.title {
          margin-bottom: 10px;
        }
      }
    }
  }
}

/* ===============================================
   RECIPE AND PROGRAMS SEARCH
   =============================================== */

body#story-4330,
body#story-4524 {

  .tmpl-directory-search-form {
  
    button.reset {
      background-color: @gray;
      margin-left: 4rem;
    }
  
    .results {
    
      .listed-item {
        flex-direction: column;
        
        .img {
          margin-bottom: .5rem;
        }
        
        h3.title {
          font-size: 1rem;
          margin-bottom: 0;
        }
        p {
          margin-bottom: 0;
        }
      }
    }
  }
}

/* ===============================================
   DESKTOP MISC
   =============================================== */

@media only screen and (min-width: 641px) {

  .page-container {
    min-width: 1024px;
  }

  .sizer {
    width: 982px;
    margin: 0 auto;
  }

  body.is-form .intro {
    //background: #d0e8f6;
    //margin: -10px -30px 20px;
    //padding: 10px 30px;
  }
}

/* ===============================================
   MOBILE MISC
   =============================================== */

@media only screen and (max-width: 640px) {

  .sizer {
    padding: 10px;
  }

  .pt-wrapper .print,
  .pt-wrapper .share,
  .pt-wrapper .plusone {
    display: none;
  }
  .pt-wrapper > ul.pt-list > li {
    margin-right: 5px;
  }
  .pt-wrapper > ul.pt-list > li.tweet-share {
    margin-right: 5px;
  }
  .pt-wrapper .email {
    margin-right: 0;
  }

  .preview-notice {
    background: #c00;
    padding: 5px 10px;
    min-height: 0;

    p {
      display: none;
    }
  }

  .img.align-right,
  .img.align-left {
    max-width: 50%;
  }
}

@media only screen and (max-width: 320px) {

  #content input.text,
  #content select,
  #content textarea {
    width: 175px;
  }
}

/* ===============================================
   HOMEPAGE 2022 REFRESH
   =============================================== */

body.hp-2022 {}

//// HERO

body.hp-2022 .hero {
  padding-bottom: 2rem;
}

//// PORTALS

body.hp-2022 .portals {
  padding: 2rem 0;
}

@media @md-up {

  body.hp-2022 .portals {
    position: relative;
    z-index: 10;
    display: flex;
    column-gap: 2rem;
    justify-content: space-between;

    > div {
      margin-bottom: 0;

      &:last-child {
        margin-right: 0;
      }
    }
  }
}
@media @sm-only {

  body.hp-2022 .portals {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  
    > div {
      flex-basis: 49%;
    }
  
    .listed-item {
      margin-bottom: 0;
    }
  }
}

//// FEATURED PROGRAMS AKA FEATURES

body.hp-2022 .featured-programs {
  padding: 2rem 0;
  
  > h2 {
    padding: .5rem;
    text-align: center;
    margin-left: 15%;
    margin-right: 15%;
    color: @white;
    background-color: @dark-blue-2022;
    text-transform: uppercase;
  }

  .list-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 1.5rem;
    
    .item-1 {
      margin-bottom: 1.5rem;
      width: 100%;
      align-items: center;
      
      .img {
        margin-bottom: 0;
        width: 60%;
        max-width: 60%;
        flex-grow: 1;
        flex-shrink: 0;
        margin-right: 4%;
        
        img {
          width: 100%;
          height: auto;
        }
      }
      
      .txt h3.title {
        .hp-leadin-title;
        text-transform: none;
      }
    }
    
    .item-gt1 {
      width: 30%;
      flex-direction: column;
      
      .img {
        //grid-area: overlay;
        margin: 0 0 .75rem;
        max-width: 100%;
      }
      .txt {
        //grid-area: overlay;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        
        h3.title {
          .hp-leadin-title;
          margin: 0;
          text-transform: none;
        }
      }
      
      .teaser {
        //display: none;
      }
    }
  }
}

@media @sm-only {

  body.hp-2022 .featured-programs {

    .list-box {
      flex-direction: column;
      
      .listed-item {
        flex-direction: column;
        width: 100%;
        
        .img,
        img {
          width: 100%;
          max-width: 100%;
          margin: 0;
        }
      }
      
      .item-1 .img {
        margin-bottom: .5rem;
      }
    }
  }
}

//// FEATURED ACTIVITIES

body.hp-2022 .featured-activities {
  padding: 2rem 0;
  
  > h2 {
    padding: .5rem;
    text-align: center;
    margin-left: 15%;
    margin-right: 15%;
    color: @white;
    background-color: @dark-blue-2022;
    text-transform: uppercase;
  }

  .list-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
    .item-1 {
      width: 100%;
      align-items: center;
      
      .img {
        margin-bottom: 0;
        width: 60%;
        max-width: 60%;
        flex-grow: 1;
        flex-shrink: 0;
        margin-right: 4%;
        
        img {
          width: 100%;
          height: auto;
        }
      }
      .txt h3.title {
        .hp-leadin-title;
        text-transform: none;
      }
    }
    
    .item-gt1 {
      width: 30%;
      flex-direction: column;
      
      .img {
        margin: 0 0 .75rem;
        max-width: 100%;
      }
      .txt {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        
        h3.title {
          margin: 0;
          text-transform: none;
          .hp-leadin-title;
        }
      }
      
      .teaser {
        //display: none;
      }
    }
  }
}
@media screen and (max-width: 639px) {

  body.hp-2022 .featured-activities {

    .list-box {
      flex-direction: column;
      
      .listed-item {
        flex-direction: column;
        width: 100%;
        
        .img,
        img {
          width: 100%;
          max-width: 100%;
          margin: 0;
        }
      }
      
      .item-1 .img {
        margin-bottom: .5rem;
      }
    }
  }
}

//// BOTTOM CALLOUTS

body.hp-2022 .bottom-callouts {
  padding: 2rem 0;

}

//// SLIDESHOW

body.hp-2022 .slideshow {
  padding: 2rem 0;
}

//// MIDDLE CALLOUTS

body.hp-2022 .middle-callouts {
  padding: 2rem 0;
  
  .grid-block-grid {
    //padding: 0 3rem;
    column-gap: 2rem;
  }
  
  .hp-search {
    background-image: url(/images/search_bg_450x300_blank.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;

    form {
      text-align: center;
      padding-top: 75px;

      input {
        display: inline-block;
        min-width: 200px;
        width: 60%;
        height: 40px;
        font-size: 18px;
        padding-left: 10px;
      }
      button {
        display: inline-block;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: bold;
        padding: 0 1rem;
        background: #369;
        color: @white;
      }
    }
    a.button {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-weight: bold;
      padding: 0 1rem;
      background: #3cf;
      color: @white;
    }
   }
   
  .hp-signup-v2 {
    padding: 20px;
    background-color: @darkerBlue;
    color: @white;
    
    h2 {
      font-size: 1.75rem;
      text-align: center;
      text-transform: uppercase;
      color: #f7a800;
    }
    
    input {
      width: 100%;
      height: 40px;
      margin-bottom: 20px;
      font-size: 18px;
      padding-left: 10px;
    }
    button {
      width: 100%;
      height: 40px;
      font-size: 18px;
      font-weight: bold;
      padding: 0 1rem;
      background: #f7a800;
      color: @darkerBlue;
    }
  }
     
  .contribute {
    padding: 20px;
    background-color: #f7a800;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .contribute-inner {
      width: 100%;
    }

    h3 {
      font-size: 1.75rem;
      text-align: center;
      text-transform: uppercase;
    }
    form {
      text-align: center;

      input {
        display: inline-block;
        min-width: 200px;
        width: 60%;
        height: 40px;
        margin-bottom: 20px;
        font-size: 18px;
        padding-left: 10px;
      }
      button {
        display: inline-block;
        min-width: 200px;
        width: 60%;
        height: 40px;
        clear: both;
        font-size: 18px;
        font-weight: bold;
        padding: 0 1rem;
        background: #369;
        color: @white;
      }
    }
  }
}

@media screen and (max-width: 639px) {

  body.hp-2022 .middle-callouts {

    .grid-block-grid {
      padding: 0;
      row-gap: 2rem;
    }
  }
}


//// FEATURED ARTICLES AKA FEATURES RESOURCES

body.hp-2022 .featured-articles {
  margin-bottom: 1.5rem;
  
  > h2 {
    padding: .5rem;
    text-align: center;
    margin-left: 15%;
    margin-right: 15%;
    color: @white;
    background-color: @dark-blue-2022;
    text-transform: uppercase;
  }
  
  .list-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
    .item-1 {
      width: 100%;
      align-items: center;
      
      .img {
        margin-bottom: 0;
        width: 60%;
        max-width: 60%;
        flex-grow: 1;
        flex-shrink: 0;
        margin-right: 4%;
        
        img {
          width: 100%;
          height: auto;
        }
      }
      .txt h3.title {
        font-size: 1.1rem;
        text-transform: none;
      }
    }
    
    .item-gt1 {
      width: 30%;
      flex-direction: column;
      
      .img {
        margin: 0 0 .75rem;
        max-width: 100%;
      }
      .txt {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        
        h3.title {
          margin: 0;
          text-transform: none;
          font-size: 1rem;
        }
      }
      
      .teaser {
        //display: none;
      }
    }
  }
}
@media screen and (max-width: 639px) {

  body.hp-2022 .featured-articles {

    .list-box {
      flex-direction: column;
      
      .listed-item {
        flex-direction: column;
        width: 100%;
        
        .img,
        img {
          width: 100%;
          max-width: 100%;
          margin: 0;
        }
      }
      
      .item-1 .img {
        margin-bottom: .5rem;
      }
    }
  }
}


//// RSS FEEDS

.rss-box {

  .rss-box-item {
    flex-direction: column;
    
    .date {
      margin-bottom: .25rem;
    }
    .title {
      margin-bottom: 0;
      text-transform: none;
    }
  }
}

/* ===============================================
   BING SEARCH
   =============================================== */

body.bing-search {

  .bing-search-wrapper {
    margin: 2rem 0;
    min-height: 300px;
    background-color: #f8fbfe;
    
    .bcs-container-searchbox {
      background-color: @white;
    }
    
    #bcs-results-div {
      font-family: @lucida;
      font-size: @fontSize;
      line-height: @lineHeight;
      
      h2 {
        color: @darkerBlue;
        font-family: @lucida;
        font-size: 1.25rem;
        font-weight: bold;
      }
      
      .bcs-caption {
        line-height: @lineHeight;
      }
    }
  }
}

/* ===============================================
   TAG CLOUD
   =============================================== */

.tags-v2 {
  padding: 20px;
  background-color: #d9edf8;
  //color: @white;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  .top-tier {
    font-size: 24px;
    //margin-bottom: .75rem;
  }
  .mid-tier {
    font-size: 18px;
    //margin-bottom: .75rem;
  }
  .lower-tier {
    font-size: 14px;
    //margin-bottom: 1.5rem;
  }
  
  h3 {
    font-size: 1.75rem;
    text-align: center;
    text-transform: uppercase;
    //color: @white;
  }
  
  .buttons {
    margin-top: 1.5rem;
  }
  
  a:not(.button) {
    line-height: 30px;
    display: inline-block;
    padding: 0 .5rem;
    //color: @white;
    font-weight: bold;
    text-decoration: underline;
  }
  a.button {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    padding: 0 1rem;
    background: #25408f;
    color: @white;
  }
}
.bing-search .tags-v2 {

  .buttons {
    display: none;
  }
}