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

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

// Site Colors
//@coral:             #f06f60;
@coral:             #f60076; // JMP pink 9/25
//@dark-blue:         #19375b;
@dark-blue:         #00779e; // JMP blue 9/25
@light-steel-blue:  #a7c3e6;
@teal:              #159bbc;
@text:              #333;

// Women's Event
@pink:              #c80a87;

// Typography
@font-size:         16px;
@line-height:       1.5;
@baseline:          @font-size * @line-height;

@maven:             'Maven Pro', sans-serif;
@oswald:            'Oswald', sans-serif;

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

html,
body {
  width: 100%;
}

div.preview-notice {
  display: none;
}
body.is-preview div.preview-notice {
  display: flex;
  gap: 1rem 2rem;
  background-image: none;
  padding: 10px;
  justify-content: space-between;
  font-size: 1rem;
  
  p {
  font-size: 1rem;
  }
}
body:after {
  display: none;
}

html {
  font-family: @maven;
  font-size: @font-size;
  color: @text;
}
input,
textarea,
select,
button {
  font-size: inherit;
  font-family: inherit;
}

// headers

h1, h2, h3 {
  color: @coral;
  font-family: @oswald;
}
h1 {
  font-size: 40px;
}
h4, h5, h6 {
  color: @black;
  font-family: @oswald;
}

// links & buttons

a {
  color: @coral;
  font-weight: bold;
}
a.button,
button {
  background: @coral;
  color: @white;
  .border-radius(0);
  // border: 2px solid #f89d93;
  border: 2px solid #cf2667; // JMP
  font-family: @oswald;

  &.blue {
    background: @dark-blue;
  }
  &.pink {
    background: #f60076;
  }
  &.aqua {
    background: #00779e;
  }
}
.formrow.submit button,
.form-item.submit button {
  margin-bottom: 0.75rem;
  margin-right: 1rem;
  padding: 15px 30px;
  font-size: 1.25rem;
}
button:disabled,
.button:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}


// utility classes

.blue-box {
  padding: 20px;
  margin-bottom: 1.5rem;
  background: @dark-blue;
  color: @white;

  h1,h2,h3,h4 {
    color: @white;
  }

  > :last-child {
    margin-bottom: 0;
  }
}

.uline {
  text-decoration: underline;
}
.rtl {
  direction: rtl;
}

// fix for vanilla bug
body.flexbox-forms .formrow.date-picker label {
  white-space: normal;
}

/* ===============================================
   VANILLA THEME OVERRIDES
   =============================================== */

//  calendar

.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;
  border: 2px solid #f89d93;
  font-family: @oswald;
  font-size: @font-size;
  text-align: center;
  font-weight: bold;
  line-height: 1;
  background: @coral;
  .border-radius(0);
  box-shadow: none;
}
.atc-style-blue .atcb-item,
.atc-style-blue .atcb-item-link {
  margin: 0;
}

/***** TOOPTIPSY *****/

.tooltipsy:empty {
  display: none !important;
}
.tooltipsy {
  padding: 5px 10px;
  max-width: 300px;
  color: @white;
  background-color: @dark-blue;
}

// utility classes

.flex-two-cols {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.fullwidth() {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

// address2 on non-flexbox forms

body.no-flexbox-forms #address2 {
  margin-left: 120px;
}

// top labels

body.no-flexbox-forms .formrow.top-label {

  label {
  float: none;
  width: auto;
  }
}

// wide textareas
body.flexbox-forms textarea.wide {
  max-width: none;
}

// rsvp guests checkbox
body.flexbox-forms-v2 .form-item.checkbox.guest-register-checkbox > label {
  font-weight: bold;
  font-size: 1.2rem;
}

@media @medium-screen-up {}

@media @small-screen-only {}

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

/***** TOP ALERT *****/

#top-alert,
#red-alert {
  background: @teal;
  color: @white;
  font-size: 18px;

  .sizer {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;

    div.alert-text {
      padding-left: 20px;
      background: left center no-repeat;
      vertical-align: middle;
      flex-grow: 1;

      p {
        margin: 0;

        a {
          color: @white;
          text-decoration: underline;
        }
      }
    }
    div.close {
      flex-shrink: 1;
      justify-content: center;
      margin: 0 0 0 5%;
      white-space: nowrap;

      a {
        color: @white;
        text-decoration: none;
        cursor: pointer;

        i {
          color: @teal;
          background-color: @white;
          display: inline-block;
          .border-radius(100px);
          font-size: 14px;
          line-height: 20px;
          width: 20px;
          text-align: center;
        }
      }
      span {
        text-transform: uppercase;
        font-size: .8em;
      }
    }
  }
}

#red-alert {
  // background: #b84646;
  background: #4da9e7; // JMP
}

@media @small-screen-only {

  #top-alert,
  #red-alert {
    padding: 0 10px;
    font-size: 14px;
  }
}
// end #top-alert


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

#top {
  background-color: @dark-blue;

  .signup {

    h4 {
      font-size: 24px;
      margin-bottom: .25rem;
      // color: @light-steel-blue;
      color: @white; // JMP
      font-weight: normal;
    }
    
    input {
      .border-radius(0);
      box-shadow: none;
      height: 35px;
      border: 0;
    }

    input[name="email"] {
      width: 230px;
    }
    input[name="zip"] {
      width: 130px;
      margin-right: 10px;
    }
    button {
      width: 90px;
      height: 35px;
      text-transform: uppercase;
    }
  }
  .misc {

    a {
      font-weight: normal;
    }
  }
}

@media @medium-screen-up {

  body.layout-no-top-tools #top {

    .logo {
      float: none;
      width: 377px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  #top {
    padding: 35px 0 25px;
    .contain-floats();

    .sizer {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      //width: 545px;
      //float: left;
    }

    .user-login { // used on main and cp
      text-align: center;
      font-size: 16px;

      ul {
        margin: 0;
        list-style: none;
        list-style-image: none;
        // color: @light-steel-blue;
        color: @white; // JMP

        li {
          display: inline-block;
          margin: 0 1rem 0 0;

          &:last-child {
            margin-right: 0;
          }
        }
        a {
          // color: @light-steel-blue;
          color: @white; // JMP
          text-decoration: underline;
          font-weight: normal;
        }
      }
    }

    .desktop-wrapper {
      //width: 635px;
      //float: left;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .signup {
        //width: 275px;
        padding-right: 40px;
        border-right: 1px solid @light-steel-blue;
      }

      .misc {
        //width: 340px;
        padding-left: 40px;

        .events {
          display: flex;
          justify-content: space-between;
          margin-bottom: .5rem;
          font-size: 16px;

          a {
            // color: @light-steel-blue;
            color: @white; // JMP
            text-decoration: underline;
            text-align: center;
          }

        }

        .donate-btn {
          margin-bottom: .5rem;
          position: relative;

          a.button {
            padding: 15px 35px;
            text-transform: uppercase;
            font-size: 28px !important;
          }

          .dropdown {
            width: 100%;
            position: absolute;
            left: 0;
            top: 64px;
            z-index: 9999;
            background: @coral;
            border: 1px solid #f89d93;

            ul {
              margin: 0;

               li {
                margin: 0;
                border-bottom: 1px solid #f89d93;

                &:last-child {
                  border: 0;
                }

                a {
                  padding: 5px 10px;
                  display: block;
                  color: @white;
                  text-decoration: none;
                }
              }
            }
          }
        }

      }
    }
  }
}

@media @small-screen-only {

  #top {
    padding: 10px;

    .mobile-wrapper {
      display: table;
      width: 100%;

      .logo {
        display: table-cell;
        width: 80%;
        vertical-align: middle;
      }
      #menu-toggle {
        display: table-cell;
        width: 20%;
        vertical-align: middle;
        text-align: right;
        font-size: 24px;

        a {
          color: @white;
        }
      }
    }
  }
}

/***** TOP NAV *****/

#topnav {
  font-family: @oswald;
}

@media @medium-screen-up {

  #topnav {
    height: 60px;
    background: @coral;

    > .sizer {

      > ul {
        display: flex;

        > li {
          flex: 1 1 auto;
          text-align: center;
          background-image: url(/images/topnav_divider.png);
          background-position: right center;
          background-repeat: no-repeat;
          position: relative;

          > a {
            color: @white;
            font-size: 22px;
            line-height: 60px;
            text-decoration: none;
            display: block;
            white-space: nowrap;
            font-weight: normal;
          }

          &:last-of-type {
            background-image: none;

          }
          &:nth-last-of-type(2) {
            background-image: none;
          }
          &:hover {
            // background-color: #d35345;
            background-color: #cf2667; // JMP
            background-image: none;
          }
        }
      } // top ul

      .level2 {
        //min-width: 220px;
        width: 100%;
        min-width: 200px;
        position: absolute;
        top: 60px; // adjust as needed
        left: -9999px;
        display: none; // fix for iOS
        z-index: 99999;

        > ul {
          background: @dark-blue;

          > li {
            line-height: 1.2;
            text-align: left;

            > a {
              color: @white;
              display: block;
              padding: 10px;
              text-decoration: none;
              text-transform: none;
              font-weight: normal;

              &:hover {
                background: @coral;
                color: @white;
              }
            }
          }
        }
      }

      > ul > li:hover .level2 {
        left: 0;
        display: block; // fix for iOS
      }

      ul ul ul {
        display: none;
      }
    }
  }
}
@media @small-screen-only {

  #topnav {
    > .sizer {

      > 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: @coral;
            text-align: left;
            height: auto;
            line-height: 1;
            font-size: 16px;
            font-weight: bold;
            .border-radius(0);
            padding: 10px;

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

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

        > ul {

          > li {

            > a {
              display: block;
              line-height: 1;
              padding: 8px 10px 8px 25px;
              color: @white;
              background: @gray;
              border-top: 1px solid #fff;
              border-bottom: none;
              text-decoration: none;
              font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
            }
          }
        }
      }
      ul ul ul {
        display: none;
      }
    }
  }
}
// end #topnav

/***** SEARCH ******/

#search {
  position: relative;
  z-index: 10;
  background: @coral;
  padding: 10px 0;


  &.reveal {
    display: block;
  }

  .sizer {
    padding: 0 100px;
  }

  form {
    display: flex;
    align-items: center;

    span {
      margin-right: 20px;
      flex: 0 0 auto;
      color: @white;
    }

    input[name="keywords"] {
      height: 40px;
      width: auto;
      flex: 1 0 auto;
      margin-right: 20px;
      max-width: none;
    }
    button {
      height: 40px;
      flex: 0 1 auto;
      background-color: @dark-blue;
    }
  }
}

@media @small-screen-only {

  #search {

    .sizer {
      padding: 10px;
    }

    span {
      display: none;
    }
  }
}


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

#middle {
  .contain-floats();
}

@media @medium-screen-up {

  .is-form #middle {
    padding: 25px 0;

    #content {
      padding: 0;
    }
  }
  .is-home #middle {

    #content {
      padding: 0;
    }
  }
  .is-story #middle,
  .is-form.journal-form #middle,
  .is-form.layout-show-sidebar #middle {
    padding: 25px 0;

    .container {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
    }

    #content {
      width: 67%;
      //float: left;
      //margin-right: 3%;
    }

    #sidebar {
      width: 30%;
      //float: left;
    }
  }
  .layout-no-sidebar #middle,
  .is-story.layout-no-sidebar #middle {

    #content {
      width: 100%;
      float: none;
      margin: 0;
      padding: 0;
    }
  }
}
@media @small-screen-only {

  #middle {
    padding: 10px;

    #content {
      width: auto;
      //float: none;
      margin: 0 0 2rem;

    }
    #sidebar {
      width: 100%;
      //float: none;
    }
  }
}


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

.bc-wrapper {
  font-size: 18px;
  font-weight: bold;
  color: @coral;
}

@media @medium-screen-up {}
@media @small-screen-only {}

/***** PAGE TOOLS *****/

.pt-wrapper {
  font-size: 18px;
  font-weight: bold;
  color: @coral;

  ul.pt-list {

    li {
      padding: 5px 10px;
      height: auto;
      .border-radius(3px);

      a {
        color: @white;
        font-size: @font-size;

        .fa {
          color: @white !important;
          font-size: 100% !important;
        }
      }
    }

    li.email {
      background: @dark-blue;
      color: @white;
      padding: 5px 10px;
    }
    li.print {
      background: @dark-blue;
      color: @white;
      padding: 5px 10px;
    }
    li.fb-share {
      background: @facebook-blue;
      color: @white;
      //margin-right: 15px !important;
    }
    li.tw-share {
      background: @twitter-blue;
      color: @white;
    }
  }
}

@media @medium-screen-up {}
@media @small-screen-only {}

/***** SIDEBAR *****/

#sidebar,
body.cp-home .sidebar {
  background: #f7f7f7;

  .box {

    h2 {
      font-size: 30px;
      margin: 0;
      line-height: 1;
      padding: 25px;
      border-bottom: 2px solid #d9d9d9;
    }

    .list-box,
    .eb-loader,
    .padded {
      padding: 25px 25px 0;
      margin: 0;

      .listed-item {

        h3.title {
          font-size: 18px;
          color: @dark-blue;
        }
      }
    }

  }

  .ads {

    .listed-item {
      padding: 0 25px;
    }
  }
}

@media @medium-screen-up {}
@media @small-screen-only {}

/***** GLOBAL STORIES *****/

#global-stories {}

@media @medium-screen-up {

  #global-stories {

    .listed-item {

      .display-wrapper {
        flex-direction: column;

        .img {
          max-width: none;
          margin: 0 0 .25rem;
        }
      }
    }
  }
}
@media @small-screen-only {

  #global-stories {
    padding: 10px;
  }
}

/***** SIGNUP *****/

#signup {
  background-color: @dark-blue;
  text-align: center;
  color: @white;
  font-size: 18px;

  h4 {
    color: @white;
    font-size: 50px;
    margin-bottom: 0;
  }
}
@media @medium-screen-up {

  #signup {
    padding: 60px 0 40px;
    margin-top: 40px;
    position: relative;

    .bg-image {
      height: 86px;
      width: 100%;
      background: url(/images/logo_signup.png) no-repeat center top;
      position: absolute;
      left: 0;
      top: -43px;
    }

    form {

      input {
        height: 50px;
        width: 350px;
      }
      button {
        height: 50px;
        line-height: 46px;
        padding: 0 30px;
        text-transform: uppercase;
      }
    }
  }
}
@media @small-screen-only {

  #signup {
    padding: 10px 20px;

    form {

      input,
      button {
        width: 100%;
        margin-bottom: 5px;
      }
      button {
        height: auto;
        max-width: 300px;
      }
    }
  }
}


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

#bottom {

  .logo {

    img {
      margin-bottom: .5rem;
    }
  }
  .donate {
    margin-bottom: 1.5rem;

    a.button {
      text-transform: uppercase;
      font-size: 28px;
    }
  }
  .social {
    display: flex;
    justify-content: space-between;
    margin-bottom: .75rem;

    a {
      font-size: 3rem;
      color: @dark-blue;
    }
  }
  .security {
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      margin: 0 10px;
    }
  }

  .contact {

    h4 {
      font-size: 22px;
      color: @coral;
    }
    .fa {
      padding-right: .5rem;
    }
  }
  .links {
    padding-top: 1rem;
    border-top: 1px solid #d9d9d9;
    margin-bottom: 3rem;

    li {
      margin-bottom: .5rem;

      a {
        color: @dark-blue;
        font-weight: normal;
      }
    }
  }

  .nav-list {
    color: @dark-blue;
    margin-bottom: .5rem;

    a {
      color: @dark-blue;
      font-weight: normal;
    }
  }
}

@media @medium-screen-up {

  #bottom {
    padding: 20px 0;

    .column-1 {
      width: 66%;
      margin-right: 8%;
    }
    .column-2 {
      width: 26%;
    }
  }
}
@media @small-screen-only {

  #bottom {
    padding: 10px;
  }
}

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

body.is-home {

  .subfeatures {
    background: #f7f7f7;
    padding: 30px 0;

    .listed-item {

      h3.title {
        font-size: 28px;
        color: @dark-blue;
      }
      .readmore a {
        color: @dark-blue;
        font-weight: bold;

        i {
          color: @coral;
        }
      }
    }

    .info {

      .logo {

        img {
          margin-bottom: .5rem;
        }
      }
      .rsvp,
      .donate {
        margin-bottom: 1rem;

        a.button {
          padding: 10px;
        }
      }
      .social {
        display: flex;
        justify-content: space-between;

        a {
          font-size: 1.5rem;
        }
      }
    } // .info
  }
  
  .text-scroll {}
  
  .dollars {
    background-color: #f7f7f7;
    font-size: 18px;
    text-align: center;

    h2 {
      font-size: 40px;
      color: @dark-blue;
    }
  }
  
  .facts {
    background-color: @white;
    
    h2 {
      font-size: 40px;
      color: @dark-blue;
      text-align: center;
    }

  }
}

@media @medium-screen-up {

  body.is-home {

    #middle {

      > .sizer {
        max-width: 100%;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
      }
    }

    .slideshow {

      .listed-item {
        display: block;
        height: 450px;
        margin: 0;
        position: relative;
        margin: 0;
        background-size: cover;
        background-position: center;

        .overlay {
          height: 450px;
          background: linear-gradient(transparent, rgba(0,0,0,0.5));
        }

        .wrap {
          width: 100%;
          position: absolute;
          left: 0;
          bottom: 50px;

          .inner {
            max-width: 960px;
            margin: 0 auto;
          }
        }

        .txt {
          width: 100%;
        }

        h3.title {
          margin-bottom: .5rem;
          color: @white;
          font-size: 40px;
          text-align: center;
          text-shadow: 0 0 2px rgba(66,66,66,0.4);

          a {
            text-decoration: none;
          }
        }
        .teaser {
          margin-bottom: .5rem;
          color: @white;
          font-size: 20px;
          text-align: center;
          text-shadow: 0 0 1px rgba(33,33,33,0.8);
        }
        .readmore {
          text-align: center;
        }
        &.blue {

          h3.title,
          .teaser {
            color: @dark-blue;

            span {
              color: @coral;
            }
          }
        }
      }

      .owl-dots {
        position: absolute;
        width: 100%;
        bottom: 10px;

        .owl-dot {

          span {
            height: 14px;
            width: 14px;
            background: rgba(255,255,255,0.7);
          }

          &.active span {
            background: @white;
          }
        }
      }

      .owl-nav {
        position: absolute;
        width: 100%;
        top: 48%;
        left: 0;
        margin: 0;

        .owl-next {
          position: absolute;
          right: -100px;
          font-size: 3rem;
          padding: 20px 10px;
          color: @white;
          background:  none;
          border-radius: 0;
        }
        .owl-prev {
          position: absolute;
          left: -100px;
          font-size: 3rem;
          padding: 20px 10px;
          color: @white;
          background: none;
          border-radius: 0;
        }
      }

    }
    .slideshow:hover .owl-nav .owl-next {
      right: 20px;
    }
    .slideshow:hover .owl-nav .owl-prev {
      left: 20px;
    }

  }

  .subfeatures {

    .info {

      .wrapper {
        width: 176px;
      }
      .donate {
        display: none;
      }
    }
  }

  .global-stories {
    padding: 40px 0;
  }

  .text-scroll {
    width: 960px;
    padding: 50px 0;
    height: 550px;
    margin: 0 auto;
    background-color: #f7f7f7;
    margin-bottom: 2rem;

    .scroll-wrapper {
      padding: 0 50px;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .scroll-content {
      width: 860px;
      height: 450px;
      font-size: 28px;
      position: absolute;
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
      -webkit-animation: scroll-up 30s linear infinite;
      animation: scroll-up 30s linear infinite;
    }
  }
  .vid {
    padding: 0 150px !important;
  }

  .dollars {
    padding: 30px 0;

    .container {
      padding-left: 100px;
      padding-right: 100px;
    }
  }
  
  .facts {
    padding: 30px 0;
  }

}

@media @small-screen-only {

  body.is-home {

    #middle {
      padding: 0;

      > .sizer .sizer {
        padding: 10px;
      }
    }

    .slideshow {

      .listed-item {
        display: block;
        height: 350px;
        margin: 0;
        position: relative;
        margin: 0;
        background-size: cover;
        background-position: center;

        .overlay {
          height: 350px;
          background: linear-gradient(transparent, rgba(0,0,0,0.5));
        }
        .wrap {
          width: 100%;
          padding: 10px;
          position: absolute;
          left: 0;
          bottom: 10px;

          .inner {
            width: 100%;
            margin: 0 auto;
          }
        }

        h3.title {
          margin-bottom: .5rem;
          color: @white;
          font-size: 24px;
          text-align: center;
          text-shadow: 0 0 2px rgba(66,66,66,0.4);

          a {
            text-decoration: none;
          }
        }
        .teaser {
          margin-bottom: .5rem;
          color: @white;
          font-size: 14px;
          text-align: center;
          text-shadow: 0 0 1px rgba(33,33,33,0.8);
        }
        .readmore {
          text-align: center;
        }
        &.blue {

          h3.title,
          .teaser {
            color: @dark-blue;

            span {
              color: @coral;
            }
          }
        }
      }


      .owl-dots {
        display: none;
      }

      .owl-nav {
        display: none;
      }

    }

    .subfeatures {

      .info {

        .logo {
          display: none;
        }
      }
    }

    .dollars {
      padding: 10px;
      
      .container {
        padding: 0;
      }
    }
    
    .facts {
      padding: 10px;
    }
  }
}

/* ===============================================
   STANDARD SLIDER
   =============================================== */

@media @medium-screen-up {

  .slideshow-standard {

    .listed-item {
      display: block;
      height: 450px;
      margin: 0;
      position: relative;
      margin: 0;
      background-size: cover;
      background-position: center;

      .overlay {
        height: 450px;
        background: linear-gradient(transparent, rgba(0,0,0,0.5));
      }

      .wrap {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 50px;

        .inner {
          max-width: 960px;
          margin: 0 auto;
        }
      }

      .txt {
        width: 100%;
      }

      h3.title {
        margin-bottom: .5rem;
        color: @white;
        font-size: 40px;
        text-align: center;
        text-shadow: 0 0 2px rgba(66,66,66,0.4);

        a {
          text-decoration: none;
        }
      }
      .teaser {
        margin-bottom: .5rem;
        color: @white;
        font-size: 20px;
        text-align: center;
        text-shadow: 0 0 1px rgba(33,33,33,0.8);
      }
      .readmore {
        text-align: center;
      }
      &.blue {

        h3.title,
        .teaser {
          color: @dark-blue;

          span {
            color: @coral;
          }
        }
      }
    }

    .owl-dots {
      position: absolute;
      width: 100%;
      bottom: 10px;

      .owl-dot {

        span {
          height: 14px;
          width: 14px;
          background: rgba(255,255,255,0.7);
        }

        &.active span {
          background: @white;
        }
      }
    }

    .owl-nav {
      position: absolute;
      width: 100%;
      top: 48%;
      left: 0;
      margin: 0;

      .owl-next {
        position: absolute;
        right: -100px;
        font-size: 3rem;
        padding: 20px 10px;
        color: @white;
        background:  none;
        border-radius: 0;
      }
      .owl-prev {
        position: absolute;
        left: -100px;
        font-size: 3rem;
        padding: 20px 10px;
        color: @white;
        background: none;
        border-radius: 0;
      }
    }

  }
  .slideshow:hover .owl-nav .owl-next {
    right: 20px;
  }
  .slideshow:hover .owl-nav .owl-prev {
    left: 20px;
  }
}

@media @small-screen-only {

  .slideshow-standard {

    .listed-item {
      display: block;
      height: 350px;
      margin: 0;
      position: relative;
      margin: 0;
      background-size: cover;
      background-position: center;

      .overlay {
        height: 350px;
        background: linear-gradient(transparent, rgba(0,0,0,0.5));
      }
      .wrap {
        width: 100%;
        padding: 10px;
        position: absolute;
        left: 0;
        bottom: 10px;

        .inner {
          width: 100%;
          margin: 0 auto;
        }
      }

      h3.title {
        margin-bottom: .5rem;
        color: @white;
        font-size: 24px;
        text-align: center;
        text-shadow: 0 0 2px rgba(66,66,66,0.4);

        a {
          text-decoration: none;
        }
      }
      .teaser {
        margin-bottom: .5rem;
        color: @white;
        font-size: 14px;
        text-align: center;
        text-shadow: 0 0 1px rgba(33,33,33,0.8);
      }
      .readmore {
        text-align: center;
      }
      &.blue {

        h3.title,
        .teaser {
          color: @dark-blue;

          span {
            color: @coral;
          }
        }
      }
    }

    .owl-dots {
      display: none;
    }

    .owl-nav {
      display: none;
    }

  }
}

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

@media @medium-screen-up {

  body.category-archive {

    .archive-list {

      .listed-item {

        .img {
          max-width: 150px;
        }
      }
    }
  }
}

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

.event-listing {

  &.screen-event-details {

    .pt-wrapper {
      display: none;
    }
  }

  .tmpl-event-details {

    .event-info-summary {

      table th {
        color: @dark-blue;
        border-right: 1px solid @gray;
      }
    }

    .buttons-wrapper {
      display: flex;
      margin-bottom: 1.5rem;

      > div {
        margin-right: 10px;

        &.fb-share a {
          background: @facebook-blue;
          color: @white;
        }
        &.tw-share a {
          background: @twitter-blue;
          color: @white;
        }
      }

      .button {
        padding: 5px 10px;
        border: 0;
        font-size: 16px;
        height: 30px;
        text-align: center;
        .border-radius(0);
        color: @white;
      }

      .register {

        .button {
          //padding: 0 10px;
          border: 0;
          font-size: 16px;
          height: 30px;
          text-align: center;
          .border-radius(0);
        }
      }
    }

    .column-2 .related {

      h4 {
        font-size: 20px;
        color: #e0ebec;
        padding: 10px 25px;
        margin: 0;
        background-color: @dark-blue;
      }

      .events-wrapper {
        padding: 25px;
        background-color: #f6faff;
      }
    }
  }

  .tmpl-event-search,
  .tmpl-event-calendar,
  .tmpl-event-form {

    .title-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    form {

      .categories {
        display: flex;

        .label {
          flex: 0 0 33.333%;
          max-width: 200px;
          padding-right: 1rem;
          margin-bottom: 0;
        }
        .block-grid {
          flex: 0 0 66.667%;
          max-width: 66.667%;
          font-size: 1.1rem;
        }
      }
    }

    .search-results {

      .event-item {
        display: flex;

/*
        .dt {
          margin-right: 30px;

          span {
            padding: 5px 20px;
            display: block;
            text-align: center;
            font-weight: bold;
            font-size: 20px;
            color: @white;
            background-color: @teal;
          }
        }

        h3.title {
          margin-bottom: @baseline/4;
        }
        .location,
        .date {
          font-style: italic;
        }
*/
        .dt {
          flex: 0 0 7%;
          max-width: 7%;
          margin-right: 3%;

          span {
            padding: 5px 20px;
            display: block;
            text-align: center;
            font-weight: bold;
            font-size: 20px;
            color: @white;
            background-color: @dark-blue;
          }
          span.month {
            //font-size: 30px;
          }
          span.day {
            //font-size: 40px;
          }
        }

        .info {
          flex: 0 0 75%;
          max-width: 75%;
          padding-right: 50px;

          h3.title {
            margin-bottom: @baseline/4;
            //font-size: 30px;
            //color: @text;
          }
        }

        .deets {
          flex: 0 0 15%;
          max-width: 15%;
          margin-top: 2rem;

          .tm {
            margin-bottom: .5rem;
          }
        }

      }
    }

    .cal-next-prev {
      padding: 10px;
      background: @dark-blue;
      align-items: center;

      h2 {
        margin: 0;
        color: @white;
      }
      a {
        color: @white;
      }
    }
    .cal-header {
      padding: 5px 0;
      background: @teal;
      color: @white;
      text-align: center;
      font-weight: bold;
    }
    .cal-event {
      line-height: 1.3;
      font-size: .75rem;
      background: transparent !important;
      border: 0 !important;
      border-bottom: 1px solid @light-gray !important;
      padding: 0 0 .5rem !important;
      margin-bottom: .5rem !important;

      &:last-of-type {
        border: 0 !important;
      }

      a {
        font-weight: normal;
        color: @dark-blue;
      }
    }
  }
}

@media @small-screen-only {

  .event-listing {

    .tmpl-event-search .search-results {

      .event-item {
        flex-direction: column;

        .dt {
          flex: 1 0 auto;
          max-width: none;
          width: auto;
          margin-right: 0;
          background-color: @dark-blue;
          margin-bottom: .75rem;

          span {
            padding: 5px;
            display: inline-block;
            text-align: left;
            font-weight: bold;
            font-size: 1rem !important;
            color: @white;
            background-color: @dark-blue;
          }
        }

        .info {
          flex: 1 0 auto;
          max-width: none;
          width: auto;
          padding-right: 50px;

          h3.title {
            margin-bottom: @baseline/4;
          }
        }

        .deets {
          flex: 1 0 auto;
          max-width: none;
          width: auto;
          margin-top: 0;

          .tm {
            margin-bottom: .5rem;
          }
        }
      }
    }
  }
}

/* ===============================================
   REUSED COMPONENTS
   =============================================== */

.global-stories {

  .listed-item {

    h3.title {
      font-size: 28px;
    }

    .readmore a {
      font-weight: bold;
      color: @dark-blue;

      i {
        color: @coral;
      }
    }
  }
}

/* ===============================================
   DESKTOP ONLY
   =============================================== */

@media @medium-screen-up {

  .page-container {
    //min-width: 1220px;
  }

  .sizer {
    max-width: 1180px;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ===============================================
   TABLET PORTRAIT ONLY
   =============================================== */

@media @medium-screen-only {

  .sizer {
    padding-left: 10px;
    padding-right: 10px;
  }

  #top {

    .logo {
      margin-right: 20px;
    }

    .desktop-wrapper {

      .signup {
        padding-right: 20px;

        h4 {
          font-size: 16px;
        }

        input[name="email"] {
          width: 160px;
        }
        input[name="zip"] {
          width: 70px;
        }
        button {
          width: 80px;
        }
      }

      .misc {
        padding-left: 20px;

        .events,
        .user-login {
          font-size: 13px;
        }

        .donate-btn {

          a.button {
            padding: 10px 20px;
            font-size: 18px !important;
          }
        }
      }
    }
  }

  #topnav {

    >.sizer {

      > ul {

        > li {

          > a {
            font-size: 16px;
          }
        }
      }
    }
  }

  #bottom .security {
    justify-content: space-between;

    img {
      margin: 0;
    }
  }
}
/* ===============================================
   MOBILE ONLY
   =============================================== */

@media @small-screen-only {

  .bc-wrapper,
  .pt-wrapper .email,
  .pt-wrapper .print,
  .pt-wrapper .share,
  .pt-wrapper .plusone,
  #sidebar {
    display: none;
  }

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

    p {
      display: none;
    }
  }
}

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

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

/* ===============================================
   ANIMATIONS
   =============================================== */

// homepage text scroll

@-webkit-keyframes scroll-up {
  0%   { -webkit-transform: translateY(100%); }
  100% { -webkit-transform: translateY(-100%); }
}
@keyframes scroll-up {
  0% {
    -webkit-transform: translateY(100%); /* Browser bug fix */
    transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%); /* Browser bug fix */
    transform: translateY(-100%);
  }
}

/* ===============================================
   COMMUNITY PETITIONS
   =============================================== */

body.community-petition-form {

  .petition-progress {

    .value {
      background-color: @dark-blue;
    }
  }

  .circle-stats {
    display: flex;
    align-items: center;
    align-content: center;
    line-height: 1.2;

    span.count {
      font-size: 2rem;
      font-weight: bold;
      font-family: @oswald;
    }
    span.goal {
      font-size: 1.4rem;
      font-weight: bold;
      font-family: @oswald;
    }

    > div {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      height: 8rem;
      width: 8rem;
      .border-radius(1000px);
      margin-right: 2rem;

      &.raw-count {
        background-color: @teal;
        color: @text;
      }

      &.pct-count {
        background-color: @text;
        color: @white;
        text-align: center;
      }
    }
  }

  #community-petition-sign {

    .formrow.text {

      label {
        display: none;
      }

      input {
        padding-top: .5rem;
        padding-bottom: .5rem;
        width: 100%;
      }
    }

    .formrow.submit {
      padding-left: 0;
      margin-top: 0;

      button {
        padding-top: .5rem;
        padding-bottom: .5rem;
        width: 100%;
      }
    }
  }

  .tmpl-community-petition-search {

    .two-columns {

      .column-1 {
        width: 60%;
        margin-right: 5%;
      }
      .column-2 {
        width: 35%;

        .formrow.submit {
          padding-left: 0;
        }
      }
    }

    .add-petition {
      border: 1px solid #c0c0c0;
      padding: 10px 10px 0;
      border-radius: 5px;
      background-clip: padding-box;
    }
  }
}

/* ===============================================
   PROFILE MANAGER
   =============================================== */

body.profile-form {

  .tabs-wrapper.profile-nav {

    ul.tabs {
      margin-bottom: 1.5rem;
      border-bottom: 2px solid @dark-blue;

      li {
        background-color: @dark-blue;
        color: @white;

        a {
          color: @white;
        }

        &.active {
          background-color: @coral;
        }
      }
    }
  }

}

/* ===============================================
   CONTRIBUTION FORM
   =============================================== */

body.layout-show-button-amounts form#contribution-form .amounts .simple-amount,
body.layout-show-button-amounts form#contribution-form .amounts .label-amount {

  input[name="amount"] {
    position: absolute;
    left: -9999px;
  }

  label {
    background-color: @teal;
    display: block;
    color: @white;
    padding: 10px 0;
    font-size: 20px;
    text-align: center;
    width: 80px;
    .border-radius;
    cursor: pointer;
  }
  input[name="amount"]:checked ~ label,
  input[name="amount"]:checked ~ .label-wrapper label {
    background-color: @coral;
  }
}
body.layout-show-button-amounts form#contribution-form .amounts .simple-amount-other {
  width: auto;
}
form#contribution-form .amounts .label-amount {

  .label-wrapper {
    margin-left: 0;
  }
  div.label {
    margin-left: 2em;
    width: auto;
  }
}
form#contribution-form #dedicate-fields {
  display: block;
}
/* ===============================================
   MAIN CONTACT US FORM
   =============================================== */

body#story-3932 {

  .story-content {

    iframe {
      width: 100%;
      height: 400px;
      margin-bottom: 1.5rem;
    }

    input#subject,
    textarea#message {
      width: 350px;
      max-width: 100%;
    }
  }
}

/* ===============================================
   DIRECTORIES
   =============================================== */

body.directory-listing {

  p.addr {

    span {
      display: block;
    }
  }
}


/* ===============================================
   PAC CONTRIBUTION FORMS
   =============================================== */

body.pac-contribution-form {

  form#contribution-form {

    .amounts {
      display: block;

      label {
        width: 70%;
      }
    }
  }
}

/* ===============================================
   SEARCH FORM
   =============================================== */

.pinned-search-wrapper {
  background: #f7f7f7;
  padding: 20px;
  margin-bottom: 1.5rem;

  .pinned-search-item {
    margin: 0 0 1.5rem;
    display: flex;

    .icon {
      padding-right: 1rem;
    }
  }
}

/* ===============================================
   COMMUNITY POST
   =============================================== */

/***** REGION NAV *****/

#cp-region-nav {
  background: @coral;
  font-family: @oswald;

  ul {
    display: flex;
    justify-content: center;

    li {
      flex: 0 0 auto;
      text-align: center;
      background-image: url(/images/topnav_divider_short.png);
      background-position: right center;
      background-repeat: no-repeat;
      position: relative;

      a {
        padding: 0 10px;
        color: @white;
        font-size: 22px;
        line-height: 48px;
        text-decoration: none;
        display: block;
        white-space: nowrap;
        font-weight: normal;
      }

      &:last-of-type {
        background-image: none;
      }
      &:hover {
        background-color: #d35345;
        background-image: none;
      }
    }
  }
}
@media @small-screen-only {

  #cp-region-nav {
    padding: 10px 0;

    ul li a {
      font-size: 14px;
      line-height: 18px;
    }
  }
}

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

body.communitypost #top {

  .container {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    width: 100%;

    .fed-logo {}

    .signup {}

    .add-event {

      a.button {
        //padding: 15px 35px;
        padding: .75rem;
        font-size: 1.25rem;
        width: 200px;
        font-weight: normal;
        text-transform: uppercase;
      }
      
      .donate-btn {
        margin-bottom: .5rem;
        position: relative;

        a.button {
          padding: .75rem;
          //text-transform: uppercase;
          //font-size: 28px !important;
        }

        .dropdown {
          width: 100%;
          position: absolute;
          left: 0;
          top: 50px;
          z-index: 9999;
          background: @coral;
          border: 1px solid #f89d93;

          ul {
            margin: 0;

             li {
              margin: 0;
              border-bottom: 1px solid #f89d93;

              &:last-child {
                border: 0;
              }

              a {
                padding: 5px 10px;
                display: block;
                color: @white;
                text-decoration: none;
                font-weight: normal;
              }
            }
          }
        }
      }
    }
  }
}
@media @small-screen-only {

  body.communitypost #top {

    .container {

      .signup,
      .add-event {
        display: none;
      }

      .fed-logo {
        flex: 1 0 80%;
        max-width: 80%;
      }
      #menu-toggle {
        flex: 1 0 20%;
        max-width: 20%;
        text-align: right;
        font-size: 24px;

        a {
          color: @white;
        }
      }
    }
  }
}
@media @md-only {

  body.communitypost #top {
  
    .fed-logo {
      max-width: 33%;
    }
  
    .signup {
      //display: none;
      
      input[name="email"] {
        width: 180px;
      }
      input[name="zip"] {
        width: 80px;
      }
    }
  }
}

/***** TITLE WRAPPER *****/

@media @small-screen-only {

  body.journal-form .title-tools .top-wrapper {
    flex-direction: column;
    align-items: flex-start;

    h1.page-title  {
      margin-bottom: .75rem;
    }
  }
}

/***** SECTION COVER *****/

body.cp-home {

  .story-content > div {
    margin-bottom: 1.5rem;
  }

  .features {

    .main {

      .heading {
        background: #2c2c2c;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 10px;

        h2,
        a {
          color: @white;
          margin: 0;
        }
      }
    }
  }

  .help-line {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: @coral;
    color: @white;

    > * {
      padding: 0 30px;
    }

    .callout {

      h2 {
        margin: 0;
        color: @white;
        text-transform: uppercase;
        font-size: 60px;
        font-style: italic;
        letter-spacing: 2px;
      }
      
      a {
        color: @white;
      }
    }
    .info {
      text-align: center;

      p {
        margin: 0;
        font-size: 1.25rem;

        &.num {
          font-size: 1.75rem;
          font-weight: bold;
        }
      }
    }
  }

  .posts-sidebar {

    .posts {

      .img {
        display: none;
      }
    }

    .sidebar {

      .signup {
        padding: 25px;
        background: @dark-blue;

        h4 {
          color: @light-steel-blue;
          font-size: 20px;
          margin: 0 0 .5rem;
        }

        input {
          height: 30px;
          display: block;
        }

        .row1 {
          margin-bottom: .5rem;

          input {
            width: 100%;
          }
        }
        .row2 {
          display: flex;
          justify-content: space-between;

          input {
            width: 60%;
          }
          button {
            width: 30%;
          }
        }
      }
    }
  }

  .more-news {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: @dark-blue;
    color: @white;

    > * {
      padding: 0 30px;
    }

    .callout {
      text-align: center;

      * {
        margin: 0;
      }
    }

    h2 {
      color: @white;
      text-transform: uppercase;
      font-size: 40px;
    }
    .button {
      padding: 15px 50px;
      text-transform: uppercase;
    }
  }

}

@media @medium-screen-up {

  body.cp-home {

    .features {
      display: flex;

      .main {
        flex: 0 0 70%;
        max-width: 70%;
        margin-right: 5%;

        &.only {
          flex: 1 0 100%;
          max-width: 100%;
          margin-right: 0;
        }

        .listed-item {
          margin: 0;

          .display-wrapper {
            position: relative;
          }
          .txt {
            //position: absolute;
            //left: 0;
            //bottom: 0;
            padding: 20px 50px;
            .rgba(@dark-blue, 0.5);
            color: @white;

            h3.title {
              color: @white;
            }
            .readmore a {
              color: @white;
            }
          }
          .img {
            margin: 0;

            img {
              display: block;
              width: 100%;
            }
          }
        }
      }
      .subs {
        flex: 0 0 25%;
        max-width: 25%;

        .listed-item {

          h3.title {
            font-size: 1rem;
            color: @text;
          }
        }
      }
    }
    .help-line {}
    .posts-sidebar {
      .contain-floats();

      .posts {
        float: left;
        width: 67%;
        margin-right: 3%;

        .listed-item {

          h3.title {
            font-size: 1.25rem;
            color: @dark-blue;
          }
        }
      }
      .sidebar {
        float: left;
        width: 30%;
      }
    }
    .more-news {}
  }
}
@media @small-screen-only {

  body.cp-home {
  
    .features .main {
      margin-bottom: 1.5rem;
    }
  
    .features .main .listed-item {
      margin-bottom: 0;
    }
    .features .main .listed-item .img img {
      display: block;
    }

    .help-line {
      flex-direction: column;
      padding: 10px;

      > * {
        padding: 0;
      }

      .callout {

        h2 {
          font-size: 24px;
          letter-spacing: normal;
          text-align: center;
        }
      }
    }
    .more-news {
      flex-direction: column;
      padding: 10px;

      > * {
        padding: 0;
        text-align: center;
      }
      .callout {
        margin-bottom: .75rem;
      }
    }
  }
}

/***** JOURNAL FORM *****/

body.communitypost-happening .tmpl-journal-form {

  form {

    .tags {
      display: flex;

      .label {
        flex: 0 0 33.333%;
        max-width: 200px;
        padding-right: 1rem;
        margin-bottom: 0;
      }
      .block-grid {
        flex: 0 0 66.667%;
        max-width: 66.667%;
      }
    }
  }
}
body.journal-form {

  .journal-item {

    .post-wrapper {

      .post-info {
        border-left: 0;
        padding: 0;
      }
    }
    .footer {

      .tags {
        margin-bottom: .5rem;
      }
    }
  }
}

/***** JOURNAL SIDEBAR *****/

body.communitypost-happening {

  #sidebar {

    .sb-box {
      padding: 10px 15px;
      margin-bottom: 15px;
      border-bottom: 2px solid #d9d9d9;

      h2 {
        margin: 0 0 .5rem;
      }

      ul {
        margin: 0;
        padding: 0;

        li {
          margin: 4px 0 4px 1.25rem;
          color: @dark-blue;

          a {
            color: @dark-blue;
          }
        }
      }

      .listed-item {
        margin-bottom: .75rem;

        h3.title {
          font-size: 1rem;
        }
      }
    }
    .sb-box:nth-child(4) {
      border-bottom: 0;
      margin-bottom: 0;
    }

    .sb-happening {

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


body.sacredconversation #top {

  .container {
    display: flex;
    align-items: center;

    .logo {
      flex: 0 0 377px;
    }

    .saccon-logo {
      padding: 0 30px;
    }

    .mishkin-logo {
      flex: 0 0 231px;
    }
  }
}
@media @small-screen-only {

  body.sacredconversation #top {

    .container {
      flex-direction: column;

      .saccon-logo,
      .mishkin-logo,
      .logo {
        flex: 0 0 100%;
        max-width: 100%;
      }
      .logo,
      .saccon-logo {
        padding: 0 0 1rem;
      }
    }
  }
}

/* ===============================================
   HIGH HOLY DAYS EVENTS
   =============================================== */

body.hh2019 {

  .tmpl-event-details {

    .two-columns {

      .column-1 {

        .description {

          p {
            margin-bottom: 1.5rem;
          }
        }
        .event-info-summary {

          table {
            margin: 0;
          }
        }
        .buttons {
          padding-bottom: 1.5rem;
          border-bottom: 1px solid @light-gray;
        }
      }
    }

    #messages .event_rsvped_yes {
      color: @coral;
      font-weight: bold;
    }
  }

  .tmpl-event-rsvp {

    .guest {
      margin-bottom: 1.5rem;
    }

    .cap-notice {
      color: @dark-blue;
      font-weight: bold;
      font-size: 1.25rem;
    }

    .date-picker {

      button {
        display: none;
      }
      input {
        max-width: 300px;
        .border-radius(3px);
      }
    }
  }

  // from latest vanilla.css (/8/29/19)
  .tmpl-event-rsvp .two-columns .column-1 {
    width: 64%;
    margin-right: 6%;
  }
  .tmpl-event-rsvp .two-columns .column-2 {
    width: 30%;
  }
  .tmpl-event-rsvp .two-columns .column-2 .box {
    border: 1px solid #c0c0c0;
    padding: 10px 10px 0;
    border-radius: 5px;
    background-clip: padding-box;
  }
}

/* ===============================================
   BLACKBAUD
   =============================================== */

body.blackbaud-integration {

  .formrow.multiple {

    > .fieldset {
      flex: 0 0 66.667%;
      max-width: 300px;
    }
  }

  &.contribution-form {

    textarea#additional-comment {
      height: 60px;
      min-height: 0;
    }
  }
}

/* ===============================================
   COVID-19
   =============================================== */

// modified wrapper; see category.tmpl for parameter specifications
body.covid19 {

  #top {

    .misc {

      .events,
      .user-login,
      .donate-btn .dropdown,
      .donate-btn i.fa {
        display: none !important;
      }

    }
  }

  #sidebar {
    //visibility: hidden;
    display: block;
  }

  #bottom {
    padding-bottom: 40px;
  }

  #bottom-alert {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 5px 0;
    background: @coral;
    color: @white;
    text-align: center;

    p {
      margin: 0;
    }

    a {
      color: @white;
    }
  }
}

// section landing page
body.covid19.section-landing {

  #middle {

    .hero {
      background-image: url(/images/covid_landing_banner.jpg);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;

      .text-overlay {
        max-width: 960px;
        padding: 20px 30px;
        background-color: rgba(0,0,0,0.25);
        border-radius: 5px;
        color: @white;

        h2 {
          margin-bottom: 0;
        }
      }
    }

    .section-intro {
      padding: 2rem 0 .5rem;
      background-color: @dark-blue;
      color: @white;

      .sizer {
        display: flex;
        justify-content: space-between;
      }
      .img {
        margin-bottom: 0;
        width: 40%;
      }
      .txt {
        width: 60%;
        padding-left: 60px;
      }
    }

    .button-bar {
      padding: 20px 0;
      background-color: @coral;

      .btns {
        display: flex;
        justify-content: space-between;

        a.button {
          border-color: @white;
        }
      }
    }

    .sections {
      padding-top: 2rem;
      padding-bottom: 2rem;

      .listed-item {

        .media {
          margin-bottom: .5rem;
        }
      }
    }

    .updates {
      padding: 2rem 0 .5rem;
    }

    .here-to-help {
      margin-top: 2em;
      margin-bottom: 2em;
      display: flex;

      .img {
        width: 40%;
        margin: 0;

        img {
          display: block;
        }
      }

      .help-content {
        width: 60%;
        padding: 20px 40px;
        background: @dark-blue;
        color: @white;

        h2 {
          color: @white;
        }
      }
    }

    .zebra {
      background-color: @lightest-gray;
    }
  }
}

@media @medium-screen-up {

  body.covid19 {

    #top {

      .sizer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .mobile-wrapper {

          .logo {
            width: auto;
            float: none;
          }
        }
        .desktop-wrapper {
          width: auto;
          float: none;

          .signup {
            width: auto;
            //padding-right: 0;
            //border-right: 0;
          }
        }
      }
    }

    #topnav > .sizer > ul > li:nth-last-of-type(2) {
      background-image: url(/images/topnav_divider.png);
    }

    #bottom-alert {
      padding: 10px 0;
    }
  }

  body.covid19.section-landing {

    #middle {
      padding-top: 0;

      > .sizer {
        max-width: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
      }

      .hero {
        min-height: 450px;
        padding: 30px 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .text-overlay {

          h2 {
            font-size: 3rem;
            color: @white;
          }
          h3 {
            font-size: 2rem;
            color: @white;
          }
        }
      }

      .slideshow {

        .listed-item {
          display: block;
          height: 450px;
          margin: 0;
          position: relative;
          margin: 0;
          background-size: cover;
          background-position: center;

          .overlay {
            height: 450px;
            background: linear-gradient(transparent, rgba(0,0,0,0.5));
          }

          .wrap {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 50px;

            .inner {
              max-width: 960px;
              margin: 0 auto;
            }
          }

          .txt {
            width: 100%;
          }

          h3.title {
            margin-bottom: .5rem;
            color: @white;
            font-size: 40px;
            text-align: center;
            text-shadow: 0 0 2px rgba(66,66,66,0.4);

            a {
              text-decoration: none;
            }
          }
          .teaser {
            margin-bottom: .5rem;
            color: @white;
            font-size: 20px;
            text-align: center;
            text-shadow: 0 0 1px rgba(33,33,33,0.8);
          }
          .readmore {
            text-align: center;
          }
          &.blue {

            h3.title,
            .teaser {
              color: @dark-blue;

              span {
                color: @coral;
              }
            }
          }
        }

        .owl-dots {
          position: absolute;
          width: 100%;
          bottom: 10px;

          .owl-dot {

            span {
              height: 14px;
              width: 14px;
              background: rgba(255,255,255,0.7);
            }

            &.active span {
              background: @white;
            }
          }
        }

        .owl-nav {
          position: absolute;
          width: 100%;
          top: 48%;
          left: 0;
          margin: 0;

          .owl-next {
            position: absolute;
            right: -100px;
            font-size: 3rem;
            padding: 20px 10px;
            color: @white;
            background:  none;
            border-radius: 0;
          }
          .owl-prev {
            position: absolute;
            left: -100px;
            font-size: 3rem;
            padding: 20px 10px;
            color: @white;
            background: none;
            border-radius: 0;
          }
        }

      }
      .slideshow:hover .owl-nav .owl-next {
        right: 20px;
      }
      .slideshow:hover .owl-nav .owl-prev {
        left: 20px;
      }

      .section-intro {

        h2 {
          font-size: 3rem;
        }
        h3 {
          font-size: 2rem;
        }
      }

      .here-to-help {

        .help-content {

          h2 {
            font-size: 2rem;
            color: @white;
          }
        }
      }
    }
  }
}

@media @small-screen-only {

  body.covid19 {

    #sidebar {
      display: block !important;
    }
  }

  body.covid19.section-landing {

    #middle {
      padding: 0;

      .sections,
      .updates,
      .here-to-help {
        padding-left: 10px;
        padding-right: 10px;
      }

      .hero {
        padding: 60px 10px;

        .text-overlay {

          h2 {
            font-size: 2rem;
            color: @white;
          }
          h3 {
            font-size: 1.5rem;
            color: @white;
          }
        }
      }

      .slideshow {

        .listed-item {
          display: block;
          height: 350px;
          margin: 0;
          position: relative;
          margin: 0;
          background-size: cover;
          background-position: center;

          .wrap {
            width: 100%;
            padding: 10px;
            position: absolute;
            left: 0;
            bottom: 10px;

            .inner {
              width: 100%;
              margin: 0 auto;
            }
          }

          h3.title {
            margin-bottom: .5rem;
            color: @white;
            font-size: 24px;
            text-align: center;
            text-shadow: 0 0 2px rgba(66,66,66,0.4);

            a {
              text-decoration: none;
            }
          }
          .teaser {
            margin-bottom: .5rem;
            color: @white;
            font-size: 14px;
            text-align: center;
            text-shadow: 0 0 1px rgba(33,33,33,0.8);
          }
          .readmore {
            text-align: center;
          }
          &.blue {

            h3.title,
            .teaser {
              color: @dark-blue;

              span {
                color: @coral;
              }
            }
          }
        }


        .owl-dots {
          display: none;
        }

        .owl-nav {
          display: none;
        }

      }

      .section-intro {
        padding-left: 10px;
        padding-right: 10px;

        .sizer {
          flex-direction: column;
        }

        .img,
        .txt {
          width: 100%;
          margin: 0 0 1rem;
          padding: 0;
        }

        h2 {
          font-size: 2rem;
        }
        h3 {
          font-size: 1.5rem;
        }
      }

      .button-bar {
        padding-left: 10px;
        padding-right: 10px;

        .btns {
          flex-direction: column;

          a.button {
            margin-bottom: 1.5rem;

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }

      .here-to-help {
        flex-direction: column;

        .img {
          width: 100%;
        }

        .help-content {
          width: 100%;

          h2 {
            font-size: 2rem;
            color: @white;
          }
        }
      }

    }
  }
}

/* ===============================================
   YOM HASHOAH 2020
   =============================================== */

@shoah-gray:  #bbcfcd;
@shoah-blue:  #007ac3;
@shoah-green:   #3f5c58;

body.yomhashoah2020 {

  h1,
  h2,
  h3 {
    color: @shoah-green;
  }
  a {
    color: @shoah-green;
  }
  a.button {
    color: @white;
  }

  #top-alert {
    background-color: @coral;
    font-size: 125%;
    font-weight: bold;
  }

  #top {
    background: @white;

    > .sizer {
      display: block;
    }

    .shoah-logos {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      > div {
        padding-right: 50px;

        &:last-child {
          padding-right: 0;
        }
      }
    }
  }

  #bottom {
    text-align: center;

    h2 {
      text-transform: uppercase;
    }

    .shoah-partners {
      border-bottom: 2px solid @shoah-green;
      padding: 1rem 0;
    }
    .shoah-credits {
      padding: 1rem 0;
    }

    .bottom-logos {
      display: flex;
      justify-content: space-between;
      align-items: center;

      > div {
        flex-grow: 0;
      }
    }
  }
}

// section landing page
body.yomhashoah2020.section-landing {

  #middle {

    .sizer {
      padding-left: 10px;
      padding-right: 10px;
    }

    h2 {
      text-align: center;
    }

    .hero {
      background-image: url(/images/shoah_hero_candles.jpg);
      background-repeat: no-repeat;
      background-position: top left;
      background-size: cover;

      .text-overlay {
        max-width: 960px;
        padding: 20px 30px;
        background-color: rgba(0,0,0,0.25);
        border-radius: 5px;
        color: @white;

        h2 {
          margin-bottom: 0;
          text-align: center;
        }
        h3 {
          margin-bottom: 0;
          text-align: center;
        }
      }
    }

    .sponsors {
      padding-top: 2rem;
      padding-bottom:2rem;
      background-color: @shoah-green;
      color: @white;

      p {
        font-size: 1.25rem;
        text-align: center;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .introduction {
      background-color: @shoah-gray;
      padding-top: 2rem;
      padding-bottom: 2rem;
      font-size: 1.25rem;
      text-align: center;

      p:last-child {
        margin-bottom: 0;
      }
    }

    .films {
      padding-top: 2rem;
      padding-bottom: 2rem;

      .sizer > h3 {
        text-align: center;
      }
    }

    .other-ways {
      padding-top: 2rem;
      padding-bottom: 2rem;
      background-color: @shoah-gray;
    }

  }
}

// letter
body.yomhashoah2020.letter {

  .sigs {

    img {
      display: block;
      float: left;
      margin-right: 2rem;
    }
  }
}

@media @medium-screen-up {

  body.yomhashoah2020 {}

  body.yomhashoah2020.section-landing {

    #middle {
      padding-top: 0;

      > .sizer {
        max-width: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
      }

      h2 {
        font-size: 3rem;
      }

      .hero {
        min-height: 450px;
        padding: 30px 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .text-overlay {

          h2 {
            font-size: 3rem;
            color: @white;
          }
          h3 {
            font-size: 2rem;
            color: @white;
          }
        }
      }

      .other-ways {

        .img {
          float: right;
          margin: 1rem 0 0 1rem;
        }
      }
    }
  }
}

@media @small-screen-only {

  body.yomhashoah2020 {

    #top {

      .shoah-logos {
        flex-wrap: wrap;

        > div {
          padding-right: 0;
          padding-bottom: 1rem;
          width: 45%;
        }
      }
    }

    #bottom {

      .bottom-logos {
        flex-direction: column;

        > div {
          margin-bottom: .5rem;
        }
      }
    }
  }

  body.yomhashoah2020.section-landing {

    #middle {
      padding: 0;

      > .sizer {
        padding-left: 0;
        padding-right: 0;
      }

      h2 {
        font-size: 2rem;
      }

      .hero {
        padding: 60px 10px;

        .text-overlay {

          h2 {
            font-size: 2rem;
            color: @white;
          }
          h3 {
            font-size: 1.5rem;
            color: @white;
          }
        }
      }
    }
  }
}
/* ===============================================
   YOM HASHOAH 2020
   =============================================== */

@shoah-gray:  #bbcfcd;
@shoah-blue:  #007ac3;
@shoah-green:   #3f5c58;

body.yomhashoah {

  h1,
  h2,
  h3 {
    color: @shoah-green;
  }
  a {
    color: @shoah-green;
  }
  a.button {
    color: @white;
  }

  #top-alert {
    background-color: @coral;
    font-size: 125%;
    font-weight: bold;
  }

  #top {
    background: @white;

    > .sizer {
      display: block;
    }

    .shoah-logos {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      > div {
        padding-right: 50px;

        &:last-child {
          padding-right: 0;
        }
      }
    }
  }

  #bottom {
    text-align: center;

    h2 {
      text-transform: uppercase;
    }

    .shoah-partners {
      border-bottom: 2px solid @shoah-green;
      padding: 1rem 0;
    }
    .shoah-credits {
      padding: 1rem 0;
    }

    .bottom-logos {
      display: flex;
      justify-content: space-between;
      align-items: center;

      > div {
        flex-grow: 0;
      }
    }
  }
}

// section landing page
body.yomhashoah.section-landing {

  #middle {

    .sizer {
      padding-left: 10px;
      padding-right: 10px;
    }

    h2 {
      text-align: center;
    }

    .hero {
      //background-image: url(/images/shoah_hero_candles.jpg);
      background-repeat: no-repeat;
      background-position: top left;
      background-size: cover;

      .text-overlay {
        max-width: 960px;
        padding: 20px 30px;
        background-color: rgba(0,0,0,0.25);
        border-radius: 5px;
        color: @white;

        h2 {
          margin-bottom: 0;
          text-align: center;
        }
        h3 {
          margin-bottom: 0;
          text-align: center;
        }
      }
    }

    .sponsors {
      padding-top: 2rem;
      padding-bottom:2rem;
      background-color: @shoah-green;
      color: @white;

      p {
        font-size: 1.25rem;
        text-align: center;

        &:last-child {
          margin-bottom: 0;
        }
      }
      a {
        color: @white;
      }
    }

    .introduction {
      background-color: @shoah-gray;
      padding-top: 2rem;
      padding-bottom: 2rem;
      font-size: 1.25rem;
      text-align: center;

      p:last-child {
        margin-bottom: 0;
      }
    }

    .films {
      padding-top: 2rem;
      padding-bottom: 2rem;

      .sizer > h3 {
        text-align: center;
      }
    }

    .other-ways {
      padding-top: 2rem;
      padding-bottom: 2rem;
      background-color: @shoah-gray;
    }

  }
}

// letter
body.yomhashoah.letter {

  .sigs {

    img {
      display: block;
      float: left;
      margin-right: 2rem;
    }
  }
}

@media @medium-screen-up {

  body.yomhashoah {}

  body.yomhashoah.section-landing {

    #middle {
      padding-top: 0;

      > .sizer {
        max-width: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
      }

      h2 {
        font-size: 3rem;
      }

      .hero {
        min-height: 450px;
        padding: 30px 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .text-overlay {

          h2 {
            font-size: 3rem;
            color: @white;
          }
          h3 {
            font-size: 2rem;
            color: @white;
          }
        }
      }

      .other-ways {

        .img {
          float: right;
          margin: 1rem 0 0 1rem;
        }
      }
    }
  }
}

@media @small-screen-only {

  body.yomhashoah {

    #top {

      .shoah-logos {
        flex-wrap: wrap;

        > div {
          padding-right: 0;
          padding-bottom: 1rem;
          width: 45%;
        }
      }
    }

    #bottom {

      .bottom-logos {
        flex-direction: column;

        > div {
          margin-bottom: .5rem;
        }
      }
    }
  }

  body.yomhashoah.section-landing {

    #middle {
      padding: 0;

      > .sizer {
        padding-left: 0;
        padding-right: 0;
      }

      h2 {
        font-size: 2rem;
      }

      .hero {
        padding: 60px 10px;

        .text-overlay {

          h2 {
            font-size: 2rem;
            color: @white;
          }
          h3 {
            font-size: 1.5rem;
            color: @white;
          }
        }
      }
    }
  }
}

body#story-7851 {
  background-color: #bbcfcd;
  
  .vid {
    margin: 2rem 0;
  }
  
  .embed-wrapper {
    margin-bottom: 1.5rem;
  }
  
  .instructions {
    font-weight: bold;
  
    h2 {
      color: @white;
    }
    
    img {
      width: 25px;
      height: auto;
      vertical-align: middle;
    }
  }

  .live-logo {
    margin: 2rem 0;
  
    .img {
      max-width: 300px;
      height: auto;
    }
  }
}

  

/* ===============================================
   KRISTALLNACHT 2020
   =============================================== */

@kn-dark-green:  #00353c;
@kn-yellow:    #ffcd37;
@kn-gray:      #373637;

body.kristallnacht {

  h1,
  h2,
  h3 {
    color: @kn-dark-green;
    //color: @shoah-green;
  }
  a {
    color: @kn-dark-green;
    //color: @shoah-green;
  }
  a.button {
    color: @white;
  }
  
  .film-video {
  
    .media {
      margin-bottom: .25rem;
    }
  
    .fullscreen-info {
      font-style: italic;
      font-size: .9rem;
      text-align: right;
    }
  }

  #top-alert {
    background-color: @coral;
    font-size: 125%;
    font-weight: bold;
  }

  #top {
    padding: 10px 0;
    background: @kn-dark-green;
    color: @white;
    
    > .sizer {
      display: block;
    }
    
    .container {
      font-size: 2.5rem;
      font-size: clamp(1rem, 4vw, 3rem);
      font-weight: bold;
      text-transform: uppercase;
      text-align: center;
    }
  }

  #bottom {
    text-align: center;

    h2 {
      text-transform: uppercase;
    }

    .shoah-partners {
      //border-bottom: 2px solid @shoah-green;
      padding: 1rem 0;
    }
    .shoah-credits {
      padding: 1rem 0;
    }

    .bottom-logos {
    
      h2 {
        font-size: 2rem;
        text-transform: uppercase;
        text-align: center;
      }
    
      .logo-row {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1.5rem;

        > div {
          flex-grow: 0;
          padding: 0 20px;
        }
      }
    }
  }
}

// section landing page
body.kristallnacht.section-landing {

  #middle {

    .sizer {
      padding-left: 10px;
      padding-right: 10px;
    }
    
    .alternate-top {
      padding: 10px 0;
      background: @kn-dark-green;
      color: #ffcd37;
    
      > .sizer {
        display: block;
      }
    
      .container {
        display: block;
        font-size: 2.5rem;
        font-size: clamp(1rem, 4vw, 3rem);
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
      }
    }
    
    .hero1 {
      background-image: url(/images/kristallnacht-hero-slider.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .img {
        margin: 0 3rem 0 0;
        
        img {
          display: block;
        }
      }

      .text-overlay {
        //max-width: 960px;
        padding: 20px 30px;
        background-color: rgba(0,0,0,0.35);
        border-radius: 5px;
        color: @white;
        
        h1 {
          margin-bottom: 0;
          font-size: 2.5rem;
          font-size: clamp(2rem, 4vw, 4rem);
          color: #f9a325;  // #c93? #f90?
        }

        h2 {
          margin-bottom: 0;
          font-size: 2rem;
          font-size: clamp(1.5rem, 3.5vw, 2.5rem);
          color: @white;
          text-align: left;
          font-style: italic;
        }
        h3 {
          margin-bottom: 0;
          font-size: 1.5rem;
          font-size: clamp(1.25rem, 3vw, 2rem);
          color: @white;
        }
      }
    }
    
    @media @medium-screen-up {
    
      .hero1 {
        padding-top: 30px;
        //min-height: 450px;
        //padding: 30px 0;
        //display: flex;
        //justify-content: center;
        //align-items: center;
        
        .img {
          margin-right: 15%;
        
          img {
            height: 400px;
            width: auto;
          }
        }
        
        .text-overlay {
          letter-spacing: 2px;
        }
      }

    }
    
    @media @small-screen-only {
    
      .hero1 {
        padding: 60px 10px;
        
        .container {
          flex-direction: column;
        }

        .img {
          display: none;
        
          img {
            height: 200px;
            width: auto;
          }
        }
        
        .text-overlay {}
      }
    }
      


    .hero1-blurb {
      padding-top: 2rem;
      padding-bottom: calc(2rem + 86px); // for filmstrip divider
      text-align: center;
      background-color: @kn-dark-green;
      background-image: url(/images/filmstrip_divider.png);
      background-repeat: repeat-x;
      background-position: left bottom;
      color: @white;
      
      h3 {
        font-size: 2rem;
        //color: #f9a325;
        color: @white;
      }
      
      a {
        display: inline-block;
        padding: 10px 20px;
        background-color: @white;
        color: @kn-dark-green;
        font-size: 1.5rem;
        //color: #f9a325;
        text-transform: uppercase;
      }

      p {
        font-size: 1.25rem;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    
    @media @medium-screen-up {
      
      .hero1-blurb {
        
        .sizer {
          //padding-left: 10%;
          //padding-right: 10%;
        }
      }
    }

    
    .hero2 {
      background-image: url(/images/shoah_hero_candles.jpg);
      background-repeat: no-repeat;
      background-position: top left;
      background-size: cover;

      .text-overlay {
        max-width: 960px;
        padding: 20px 30px;
        background-color: rgba(0,0,0,0.25);
        border-radius: 5px;
        color: @white;
        
        p.dt {
          color: @white;
          font-size: 1.5rem;
        }
        p.closing {
          color: @white;
          font-size: 1.5rem;
          text-transform: uppercase;
          font-weight: bold;
        }
        
        h2 {
          font-size: 2rem;
          text-align: left;
          
          .intro {
            color: @white;
          }
          
          .title {
            color: #92e0d4;
            font-size: 3rem;
            font-style: italic;
          }
          
          .tagline {
            color: #ffcd37;
            font-style: italic;
          }
        
        }
      }
    }

    .hero2-blurb {
      padding-top: 2rem;
      padding-bottom: 2rem;
      text-align: center;
      
      h3 {
        font-size: 2rem;
        color: #f90;
      }
      
      a {
        font-size: 1.5rem;
        color: #92e0d4;
        text-transform: uppercase;
      }

      p {
        font-size: 1.25rem;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    
    .hero3 {
      background-image: url(/images/bg_rope.jpg);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      border-top: 4px solid #b38b21;
      border-bottom: 4px solid #b38b21;

      .text-overlay {
        max-width: 960px;
        padding: 20px 30px;
        //background-color: rgba(0,0,0,0.25);
        color: @white;
        border-radius: 5px;
        font-size: 1.5rem;
        text-align: center;
        
        h3.white {
          font-size: 1.75rem;
          color: @white;
        }
        h3.tan {
          font-size: 2.25rem;
          text-shadow: 1px 1px 1px #000;
          color: #b38b21;
          font-style: italic;
          text-transform: uppercase;
        }
        a {
          padding: 5px 10px;
          display: inline-block;
          background-color: #b38b21;
          color: @white;
          text-transform: uppercase;
        }
      }
    }
    
    .introduction {
      padding-top: 2rem;
      padding-bottom: 2rem;
      background-color: @kn-gray;
      color: @white;
      font-size: 1.25rem;
      text-align: center;
      
      h2 {
        font-size: 2.5rem;
        font-size: clamp(1.75rem, 4vw, 3.25rem);
        text-transform: uppercase;
        color: @kn-yellow;
      }

      h3 {
        font-size: 2rem;
        font-size: clamp(1.5rem, 3vw, 2.5rem);
        //color: #f9a325;
        color: @white;
      }
      
      a {
        display: inline-block;
        padding: 10px 20px;
        background-color: @kn-yellow;
        color: @kn-gray;
        font-size: 1.5rem;
        //color: #f9a325;
        text-transform: uppercase;
      }

      p {
        font-size: 1.25rem;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .films {
      padding-top: 2rem;
      padding-bottom: calc(2rem + 86px); // for filmstrip divider
      background-image: url(/images/filmstrip_divider.png);
      background-repeat: repeat-x;
      background-position: left bottom;

      .sizer > h2 {
        text-align: center;
        font-size: 2.5rem;
      }
    }
    
    .more-info {
      padding-top: 2rem;
      padding-bottom: 2rem;
      background-color: @kn-dark-green;
      color: @white;
      font-size: 1.25rem;
      text-align: center;
      
      p {
        margin: 0;
      }
      
      a {
        color: @white;
        font-weight: bold;
        
        &.uc {
          text-transform: uppercase;
        }
      }
    }
    
    .other-ways {
      padding-top: 2rem;
      padding-bottom: 2rem;
      background-color: @shoah-gray;
    }

  }
}

// letter
body.kristallnacht.letter {

  .sigs {

    img {
      display: block;
      float: left;
      margin-right: 2rem;
    }
  }
}

@media @medium-screen-up {

  body.kristallnacht {}

  body.kristallnacht.section-landing {

    #middle {
      padding-top: 0;

      > .sizer {
        max-width: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
      }

      .hero2 {
        min-height: 450px;
        padding: 30px 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .text-overlay {}
      }

      .hero3 {
        min-height: 450px;
        padding: 30px 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .text-overlay {}
      }

      .other-ways {

        .img {
          float: right;
          margin: 1rem 0 0 1rem;
        }
      }
    }
  }
}

@media @small-screen-only {

  body.kristallnacht {

    #top {

      .shoah-logos {
        //flex-wrap: wrap;
        justify-content: space-between;

        > div {
          width: 30.5%;
          padding: 0;
        }
      }
    }

    #bottom {

      .bottom-logos {
        flex-direction: column;

        > div {
          margin-bottom: .5rem;
        }
      }
    }
  }

  body.kristallnacht.section-landing {

    #middle {
      padding: 0;

      > .sizer {
        padding-left: 0;
        padding-right: 0;
      }

      h2 {
        font-size: 2rem;
      }

      .hero2 {
        padding: 60px 10px;

        .text-overlay {}
      }
      
      .hero3 {
        padding: 60px 10px;

        .text-overlay {}
      }
    }
  }
}

/* ===============================================
   KRISTALLNACHT 2021
   =============================================== */

body.kristallnacht.simple-2021-landing {
  background-color: @kn-dark-green;
  
  .logos {
    margin-bottom: 3rem;
    
    .flex-container {
      justify-content: center;
      align-items: flex-end;
      
      > .img {
        max-width: 225px;
        margin: 0 2rem;
      }
    }
  }
  
  .vid {
    padding: 0 !important;
  }

  .embed-wrapper {
    margin-bottom: 1.5rem;
  }
  
  .instructions {
    font-weight: bold;
    color: @white;
  
    h2 {
      color: @white;
    }
    
    img {
      width: 25px;
      height: auto;
      vertical-align: middle;
    }
  }
}

/* ===============================================
   SUNSHINE 2021
   =============================================== */
   
@sunshine-yellow: #f7f387;

body.sunshinestream.simple-2021-landing {
  background: @sunshine-yellow url(/images/sunshine2021/sunshine_bg.jpg) no-repeat bottom center;
  min-height: 100vh;
  
  .logos {
    margin-bottom: 3rem;
    
    .flex-container {
      justify-content: center;
      align-items: flex-end;
      
      > .img {
        max-width: 225px;
        margin: 0 2rem;
      }
    }
  }
  
  .vid {
    padding: 0 !important;
  }

  .embed-wrapper {
    margin-bottom: 1.5rem;
  }
  
  .instructions {
    font-weight: bold;
    color: @black;
  
    h2 {
      color: @black;
    }
    
    img {
      width: 25px;
      height: auto;
      vertical-align: middle;
    }
  }
}
body.pledge-sunshine.pledge-card-form {

  .tmpl-subscribe-form {
  
    h2 {
      background-color: #ca0b89;
    }
    
    .hilite {
      background: #fdd4ef;
      
      &.darker {
        background: #fdd4ef;
      }
    }
    
    .buttons {
      margin-bottom: 1rem;
      display: flex;
      flex-direction: column;
      
      button {
        max-width: 300px;
        margin-bottom: .5rem;
        background-color: #ca0b89;
        border-color: @white;
      }
      
    }
    button[type="submit"] {
      background-color: #ca0b89;
      border-color: #ca0b89;
    }
  }
}

/* ===============================================
   GIVING TUESDAY MAY 2020
   =============================================== */

body#story-7186 {

  #contact-us-form {

    label {
      display: block;
      max-width: 300px;
    }
  }

  #tc-bottom {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 2px solid @dark-blue;
  }
}

/* ===============================================
   BAR MITZVAH CONTRIBUTE
   =============================================== */

body#story-7266 {
  //.vertical-gradient(#c0c0c0, #07245e);
  background-image: linear-gradient(to bottom, #c0c0c0, #07245e);

  #top-alert,
  #red-alert,
  #top,
  #topnav {
    display: none;
  }
  #content {
    padding: 0 30px 30px;
    background-color: @white;
  }
}

/* ===============================================
   DELIVERY RSVPS WITHOUT DELIVERY
   =============================================== */

body#story-7247,
body#story-7249 {

  #content {
  
    .fieldset.delivery-address,
    .formrow.delivery-instructions {
      display: none;
    }
  }
}

/* ===============================================
   40 DAYS 40 NIGHTS AUGUST 2020
   =============================================== */
   
@forty-tan:     #ebe9da;
@forty-light-blue:  #5390e1;
@forty-txt:     #142035;

// WRAPPER

body.fortydays {

  #topnav {}

  #middle {
    background-color: @forty-tan;
    color: @forty-txt;
    
    #content {
      margin-bottom: 0;
    }
  }
  
  #banner {
    background: #11243a;
    border-top: 1px solid @coral;
    
    img {
      display: block;
      margin: 0 auto;
    }
  }
  
  #sidebar {
    background: #e4e2d3;
    
    h2 {
      color: @dark-blue;
      font-size: 24px;
      text-transform: uppercase;
      text-align: center;
      border-bottom: 0;
      padding-top: 0;
      padding-bottom: 0;
    }
    
    > .events {
      padding-top: 55px;
      background: url(/images/40days/bg_sidebar_events.png) no-repeat top center;
      
      h3.title {
        font-weight: normal !important;
      }
      p.date {
        font-size: 14px;
      }
    }
  }

  #bottom {
    background-color: @dark-blue;
    color: @white;
    
    a {
      color: @white;
    }
    
    .container {
    
      .logo {
        margin-bottom: 1.5rem;
      }
      
      .addr-links {
        margin-bottom: 1.5rem;
        font-size: 14px;
        
        .nav-list {
          color: @white;
        }
      }
      
      .donate-social {
      
        .donate a.button {
          font-weight: normal;
        }
        
        .social a {
          font-size: 2rem;
        }
      }
    }
  }
  
  #forty-signup {
    background-color: @dark-blue;
    color: @white;
    
    .sizer {
      padding-left: 10px;
      padding-right: 10px;
    }
    
    h2 {
      color: @white;
      font-size: 32px;
      font-weight: normal;
      text-transform: uppercase;
      margin-bottom: .75rem;
    }
    p {
      margin-bottom: .75rem;
    }
    
    input {
      height: 50px;
      box-shadow: none;
      .border-radius(0);
      max-width: none;
    }
    input[name="email"] {
      width: 100%;
    }
    input[name="zip"] {
      width: 65%;
      margin-right: 5%;
    }
    button {
      height: 50px;
      width: 30%;
      text-transform: uppercase;
    }
  }
  
  // overrides
  
  h1.page-title {
    color: @dark-blue;
    text-transform: uppercase;
    font-weight: normal;
  }
}

@media @medium-screen-up {

  body.fortydays {
  
    #topnav {
      background: @dark-blue;
      
      > .sizer > ul > li {
      
        &:hover {
          background-color: transparent;
          background-image: url(/images/topnav_divider.png);
        }
        &:nth-last-of-type(1) {
          background-image: none !important;
        }
        &:nth-last-of-type(2) {
          background-image: url(/images/topnav_divider.png);
        }
      }
    }

    #forty-signup {
      padding: 40px 0;
      
      .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .img {
          width: 47%;
        }
        .form-wrapper {
          width: 47%;
        }
      }
    }  
  }
}

@media @large-screen-up {
  
  body.fortydays {
  
    #bottom {
    
      .container {
        display: flex;
        justify-content: space-between;
        
        .logo {
          max-width: 270px;
        }
        
        .addr-links {
          padding: 0 40px;
        }
      }
    }

  }
}

@media @medium-screen-only {

  body.fortydays {
  
    #bottom {
    
      .container {
        
        .donate-social {
        
          .social {
            max-width: 50%;
          }
        }
      }
    }
  }
}

@media @small-screen-only {

  body.fortydays {
  
    #forty-signup {
      padding: 20px 0;
    }
  }
}

// LANDING

body.fortydays.landing-page {

  #middle {
    padding: 0;
    
    .sizer {
      padding: 0 10px;
    }
    > .sizer {
      max-width: none;
      padding: 0;
    }
    
    
    // overrides
    
    button,
    a.button {
      background: @coral;
      border: 0;
      color: @white;
      font-weight: normal;
      text-transform: uppercase;
    }
    
    // main boxes
    
    .hero {
      background-color: @dark-blue;
      color: @white;
      
      h1 {
        color: @white;
        text-transform: uppercase;
      }
    }
    
    .about {
    
      h2 {
        color: @dark-blue;
        text-align: center;
        font-size: 36px;
        font-weight: normal;
        text-transform: uppercase;
        
        span {
          font-weight: 600;
        }
      }
      
      .btns {
        text-align: center;
      }
    }    
    .events {
      background-color: @dark-blue;
      color: @white;
      
      .heading-group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        
        
        h3 {
          margin-bottom: 0;
          color: @white;
          text-transform: uppercase;
          font-size: 1.75rem;
        }
        a.button {
          border: 2px solid @coral;
          background: transparent;
          color: @coral;
        }
      }
      
      .event-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
      
        .eb-item {
          padding-right: 40px;
      
          p.date {
            color: @forty-light-blue;
          }
          h3.title {
            font-size: 1.5rem;
            font-weight: normal;
            color: @white;
          }
        }  
        
        .readmore a {
          white-space: nowrap;
          color: @white;
        }
      }          
    }
    
    .wisdom {
    
      h2 {
        color: @dark-blue;
        text-align: center;
        font-size: 36px;
        font-weight: normal;
        text-transform: uppercase;
      }
      
      .quote {
      
        .img img {
          display: block;
          margin: 0 auto .5rem;
        }
      }   
    }
    
    .sponsors {
      background: @white;
      color: @dark-blue;
      
      p {
        text-align: center;
      }
      .flex-block-grid {
        align-items: center;
      }
    }
        
    .partners {      
      background-color: @dark-blue;
      color: @white;
      
      h2 {
        color: @white;
        text-align: center;
        font-size: 36px;
        font-weight: normal;
        text-transform: uppercase;
      }
      p {
        text-align: center;
      }
      
      .partner-list {
      
        ul {
          margin: 0;
          padding: 0;
          list-style: none;
        }
        li {
          margin: 0 0 .5rem;
          padding: 0;
        }
        li::before { 
          
          content: "\2022";   
          color: @coral;  
          display: inline-block;  
          width: 1em; 
          margin-left: -0.9em; 
          font-weight: bold; 
          font-size:1.1rem; 
        }
      }
    }
  }
}

@media @medium-screen-up {

  body.fortydays.landing-page {
  
    #middle {
      
      .hero,
      .events,
      .wisdom,
      .sponsors,
      .partners {
        padding: 40px 0;
      }
      
      .hero {
        
        .wrapper {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      
        .txt {
          padding-right: 30px;
        }
      
        h1 {
          line-height: 1.2;
          font-size: 4em;
          white-space: nowrap;
          
          span {
            display: block;
            
            &.line-1 {
              font-size: 60%;
              font-weight: normal;
            }
            &.line-3 {
              font-weight: normal;
            }
          }
        }
      }
      
      .about {
        background-image: url(/images/40days/bg_about_top.png), url(/images/40days/bg_about_bottom.png);
        background-repeat: no-repeat, no-repeat;
        background-position: center top 40px, center bottom 50px;
        padding-top: 130px;
        padding-bottom: 100px;
      
        .sizer {
        }
        
        .flex-block-grid {
          padding-left: 10%;
          padding-right: 10%;
        }
      }
      
      .events {
      
      
      }
      
      .wisdom {
      
        .heading-group {
          display: flex;
          margin-bottom: 30px;
      
          .left-bg {
            background-image: url(/images/40days/bg_wisdom_left.png);
            background-repeat: no-repeat;
            background-position: right center;
            flex-grow: 1;
          }
          h2 {
            padding: 0 20px;
            margin-bottom: 0;
          }
          .right-bg {
            background-image: url(/images/40days/bg_wisdom_right.png);
            background-repeat: no-repeat;
            background-position: left center;
            flex-grow: 1;
          }
        }
      }
      
      .sponsors {
      
        p {
          padding-left: 20%;
          padding-right: 20%;
        }
      }
      
      .partners {
        background-image: url(/images/40days/bg_partners_bottom.png);
        background-repeat: no-repeat;
        background-position: bottom 40px center;
        padding-bottom: 80px;

        .heading-group {
          display: flex;
          margin-bottom: 30px;
      
          .left-bg {
            background-image: url(/images/40days/bg_partners_left.png);
            background-repeat: no-repeat;
            background-position: right center;
            flex-grow: 1;
          }
          h2 {
            padding: 0 20px;
            margin-bottom: 0;
          }
          .right-bg {
            background-image: url(/images/40days/bg_partners_right.png);
            background-repeat: no-repeat;
            background-position: left center;
            flex-grow: 1;
          }
        }
        
        p {
          padding-left: 20%;
          padding-right: 20%;
          margin-bottom: 3rem;
        }
      }
    }
  }
}

@media @large-screen-up {

  body.fortydays.landing-page {
  
    #middle {
    
      .events {
      
        .display-wrapper {
          display: flex;
          
          .bg-symbols {
            background-image: url(/images/40days/calendar_symbols.png);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
            width: 30%;
            margin-right: 5%;
          }
          .event-list {
            width: 65%;
          }
        }
      }
    }
  }
}

@media @small-screen-only {

  body.fortydays.landing-page {

    #middle {
      
      .hero,
      .about,
      .events,
      .wisdom,
      .sponsors,
      .partners {
        padding: 20px 0;
      }
    }
  }
}

// EVENTS

body.fortydays-events {

  .tmpl-event-search {
  
    div.sponsor {
      font-style: italic;
    }
  }
}

/* ===============================================
   DIGITAL ASSETS
   =============================================== */

body#story-7348 {

  .listed-item.button {
    background-color: @dark-blue;
    border-color: @dark-blue;
    color: @white;
    
    a {
      color: @white;
    }
  }
}

/* ===============================================
   WOMEN'S EVENT 2021, 2023
   =============================================== */

body.give-pledge-womens-event,
body.pledge-twe2023 {

  // wrapper
  
  .page-container {
    max-width: 768px;
    margin: 0 auto;
  }

  #top,
  #middle,
  #bottom {
    padding: 0;
  }
  
  .sizer {
    padding: 0 10px;
  }

  #top {
    background-color: transparent;
    
    > .sizer {
      padding: 0;
    }
    
    img {
      display: block;
    }
  }
  
  #banner,
  #thanks {
    
    > .sizer {
      padding: 0;
    }

    img {
      display: block;
    }
  }
  
  #middle {
    padding: 20px 0;
    
    h1, h2, h3, h4 {
      line-height: 1.2;
      margin-bottom: 1.2rem;
    }
    p, li {
      line-height: 1.2;
      margin-bottom: 1.2rem;
    }
  }
  
  #bottom  {
    padding: 20px 0 10px;
  
    .container {
  
      > div {
        margin-bottom: 1.5rem;
      }
    
      .disclaimer {
        text-transform: uppercase;
        font-size: .8rem;
      }
    }
  }
  
  // form
  
  .tmpl-subscribe-form {
  
    h1 {
      color: @black !important;
      font-size: 28px;
    }
  
    h2 {
      font-weight: bold;
      text-transform: uppercase;
      color: @white;
      background-color: @pink;
      padding: 5px 10px;
    }
    
    h3 {
      font-weight: bold;
      text-transform: uppercase;
      color: @black;
    }
    
    .hilite {
      background: lighten(@pink, 50%);
      padding: 10px;
      margin-bottom: 1.5rem;
      
      &.darker {
        background: lighten(@pink, 40%);
      }
      
      .hdr {
        //font-weight: bold;
        
        em {
          font-size: 1.2em;
        }
      }
      
      .expl {
        font-size: .9em;
      }
    }
    
    .giving-history {
      margin-bottom: 1.5rem;
    
      .past-giving {
        display: flex;
      
        .yr {
          margin-right: 10px;
          font-weight: bold;
        }
      }
    }
    
    .form-item {
      max-width: none;
    }
    
    button[type="submit"] {
      padding: 15px 30px;
      font-size: 200%;
      background-color: @pink;
      border-color: @pink;
      background-clip: border-box;
    }
  }
}

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

  body.give-pledge-womens-event,
  body.pledge-twe2023 {

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


.form-item {

  input.text {
    box-shadow: none;
  }

  .input-group {
    display: flex;
    align-items: center;
    
    .input-prepend {
      //margin-right: .25rem;
      height: 2rem;
      min-height: 25px;
      background: @white;
      line-height: 2rem;
      padding: 0 .25rem;
      border: 1px solid #aaa;
      border-right-width: 0;
      border-radius: 3px 0 0 3px;
    }
    input.text {
      border-left-width: 0;
      border-radius: 0 3px 3px 0;
      //max-width: 90%;
      flex-shrink: 1;
      min-width: 0;
    }
  }
}

// survey
#story-7477 {

  #thanks .container img:first-child {
    display: none;
  }
}

/* ===============================================
   MAJOR DONOR PROSPECT EVENT NOV 2023 - PLEDGE CARD
   =============================================== */

body.pledge-event {

  // wrapper
  
  .page-container {
    max-width: 768px;
    margin: 0 auto;
  }

  #top,
  #middle,
  #bottom {
    padding: 0;
  }
  
  .sizer {
    padding: 0 10px;
  }

  #top {
    background-color: transparent;
    
    > .sizer {
      padding: 0;
    }
    
    img {
      display: block;
    }
  }
  
  #banner,
  #thanks {
    
    > .sizer {
      padding: 0;
    }

    img {
      display: block;
    }
  }
  
  #middle {
    padding: 20px 0;
    
    h1, h2, h3, h4 {
      line-height: 1.2;
      margin-bottom: 1.2rem;
    }
    p, li {
      line-height: 1.2;
      margin-bottom: 1.2rem;
    }
  }
  
  #bottom  {
    padding: 20px 0 10px;
  
    .container {
  
      > div {
        margin-bottom: 1.5rem;
      }
    
      .disclaimer {
        text-transform: uppercase;
        font-size: .8rem;
      }
    }
  }
  
  // form
  
  .tmpl-subscribe-form {
  
    h1 {
      color: @black !important;
      font-size: 28px;
    }
  
    h2 {
      font-weight: bold;
      text-transform: uppercase;
      color: @white;
      background-color: @dark-blue;
      padding: 5px 10px;
    }
    
    h3 {
      font-weight: bold;
      text-transform: uppercase;
      color: @black;
    }
    
    .hilite {
      background: @lightest-gray;
      padding: 10px;
      margin-bottom: 1.5rem;
      
      &.darker {
        background: @lightest-gray;
      }
      
      .hdr {
        //font-weight: bold;
        
        em {
          font-size: 1.2em;
        }
      }
      
      .expl {
        font-size: .9em;
      }
    }
    
    .giving-history {
      margin-bottom: 1.5rem;
    
      .past-giving {
        display: flex;
      
        .yr {
          margin-right: 10px;
          font-weight: bold;
        }
      }
    }
    
    .form-item {
      max-width: none;
    }
    
    button[type="submit"] {
      padding: 15px 30px;
      font-size: 200%;
      background-color: @dark-blue;
      border-color: @dark-blue;
      background-clip: border-box;
    }
  }
}

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

  body.pledge-event {

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

/* ===============================================
   SUMMIT DIVISION 2024 -- PLEDGE CARD
   =============================================== */

body.pledge-summit {
  @summit-brown: #82785c;
  @summit-straw: #fbf9e7;
  
  background: @summit-straw;

  // wrapper
  
  .page-container {
    max-width: 768px;
    margin: 0 auto;
  }

  #top,
  #middle,
  #bottom {
    padding: 0;
  }
  
  .sizer {
    padding: 0 10px;
  }

  #top {
    background-color: transparent;
    
    > .sizer {
      padding: 0;
    }
    
    .logo {
      margin-right: 0;
    }
    
    img {
      display: block;
    }
  }
  
  #banner,
  #thanks {
    
    > .sizer {
      padding: 0;
    }

    img {
      display: block;
    }
  }
  
  #middle {
    padding: 20px 0;
    
    h1, h2, h3, h4 {
      line-height: 1.2;
      margin-bottom: 1.2rem;
    }
    p, li {
      line-height: 1.2;
      margin-bottom: 1.2rem;
    }
  }
  
  #bottom  {
    padding: 20px 0 10px;
  
    .container {
  
      > div {
        margin-bottom: 1.5rem;
      }
    
      .disclaimer {
        text-transform: uppercase;
        font-size: .8rem;
      }
    }
  }
  
  // form
  
  .tmpl-subscribe-form {
  
    h1 {
      color: @summit-brown !important;
      font-size: 28px;
    }
  
    h2 {
      font-weight: bold;
      text-transform: uppercase;
      color: @white;
      background-color: @summit-brown;
      padding: 5px 10px;
    }
    
    h3 {
      font-weight: bold;
      text-transform: uppercase;
      color: @summit-brown;
    }
    
    .hilite {
      background: @lightest-gray;
      padding: 10px;
      margin-bottom: 1.5rem;
      
      &.darker {
        background: @lightest-gray;
      }
      
      .hdr {
        //font-weight: bold;
        
        em {
          font-size: 1.2em;
        }
      }
      
      .expl {
        font-size: .9em;
      }
    }
    
    .giving-history {
      margin-bottom: 1.5rem;
      gap: 1.5rem 1rem;
    
      .past-giving {
        display: flex;
      
        .yr {
          margin-right: 10px;
          font-weight: bold;
        }
      }
    }
    
    .form-item {
      max-width: none;
    }
    
    button[type="submit"] {
      padding: 15px 30px;
      font-size: 200%;
      background-color: @summit-brown;
      border-color: @summit-brown;
      background-clip: border-box;
    }
  }
}

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

  body.pledge-summit {

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

.form-item {

  input.text {
    box-shadow: none;
  }

  .input-group {
    display: flex;
    align-items: center;
    
    .input-prepend {
      //margin-right: .25rem;
      height: 2rem;
      min-height: 25px;
      background: @white;
      line-height: 2rem;
      padding: 0 .25rem;
      border: 1px solid #aaa;
      border-right-width: 0;
      border-radius: 3px 0 0 3px;
    }
    input.text {
      border-left-width: 0;
      border-radius: 0 3px 3px 0;
      //max-width: 90%;
      flex-shrink: 1;
      min-width: 0;
    }
  }
}

// survey
#story-7477 {

  #thanks .container img:first-child {
    display: none;
  }
}

/* ===============================================
   PLEDGE CARD
   =============================================== */

body.pledge-card-form {

  // wrapper
  
  .page-container {
    max-width: 768px;
    margin: 0 auto;
  }

  #top,
  #middle,
  #bottom {
    padding: 0;
  }
  
  .sizer {
    padding: 0 10px;
  }

  #top {
    background-color: transparent;
    
    > .sizer {
      padding: 0;
    }
    
    img {
      display: block;
    }
  }
  
  #banner,
  #thanks,
  .extra-bottom-image {
    
    > .sizer {
      padding: 0;
    }

    img {
      display: block;
    }
  }
  
  #middle {
    padding: 20px 0;
    
    h1, h2, h3, h4 {
      line-height: 1.2;
      margin-bottom: 1.2rem;
    }
    p, li {
      line-height: 1.2;
      margin-bottom: 1.2rem;
    }
  }
  
  #bottom  {
    padding: 20px 0 10px;
  
    .container {
  
      > div {
        margin-bottom: 1.5rem;
      }
    
      .disclaimer {
        text-transform: uppercase;
        font-size: .8rem;
      }
    }
  }
  
  // form
  
  .tmpl-subscribe-form {
  
    h1 {
      color: @black !important;
      font-size: 26px;
    }
  
    h2 {
      font-weight: bold;
      text-transform: uppercase;
      color: @white;
      background-color: @dark-blue;
      padding: 5px 10px;
    }
    
    h3 {
      font-weight: bold;
      text-transform: uppercase;
      color: @black;
    }
    
    .hilite {
      background: @lightest-gray;
      padding: 10px;
      margin-bottom: 1.5rem;
      
      &.darker {
        background: @lightest-gray;
      }
      
      .hdr {
        //font-weight: bold;
        
        em {
          font-size: 1.2em;
        }
      }
      
      .expl {
        font-size: .9em;
      }
    }
    
    .giving-history {
      margin-bottom: 1.5rem;
    
      .past-giving {
        display: flex;
      
        .yr {
          margin-right: 10px;
          font-weight: bold;
        }
      }
    }
    
    .form-item {
      max-width: none;
    }
    
    button[type="submit"] {
      padding: 15px 30px;
      font-size: 200%;
      //background-color: @dark-blue;
      //border-color: @dark-blue;
      background-clip: border-box;
    }
  }
}

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

  body.pledge-card-form {

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

/* ===============================================
   FLEXBOX FORMS V2 (copied from vanilla 10/8/2020)
   =============================================== */
body.flexbox-forms-v2 .form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  max-width: 400px;
}
body.flexbox-forms-v2 .form-item > label {
  font-weight: bold;
  margin-bottom: .25rem;
}
body.flexbox-forms-v2 .form-item.checkbox,
body.flexbox-forms-v2 .form-item.radio {
  flex-direction: row;
}
body.flexbox-forms-v2 .form-item.checkbox > label,
body.flexbox-forms-v2 .form-item.radio > label {
  font-weight: normal;
  font-size: 1rem;
  margin-left: 0.5rem;
  order: 99;
}
body.flexbox-forms-v2 .form-row {
  margin-bottom: 1rem;
  max-width: 400px;
}
body.flexbox-forms-v2 .form-row .form-item {
  margin-bottom: 0;
}
body.flexbox-forms-v2 input.text,
body.flexbox-forms-v2 textarea,
body.flexbox-forms-v2 select,
body.flexbox-forms-v2 select[multiple] {
  margin: 0;
  padding: 3px 5px;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 3px;
  background-clip: padding-box;
}
body.flexbox-forms-v2 input.text:focus,
body.flexbox-forms-v2 textarea:focus,
body.flexbox-forms-v2 select:focus,
body.flexbox-forms-v2 select[multiple]:focus {
  background-color: #f9f9f9;
  border: 1px solid #aaa !important;
  outline: none;
}
body.flexbox-forms-v2 input.text,
body.flexbox-forms-v2 select {
  height: 2rem;
  min-height: 25px;
}
body.flexbox-forms-v2 select[multiple] {
  height: auto;
  min-height: 25px;
}
body.flexbox-forms-v2 textarea {
  min-height: 150px;
}
body.flexbox-forms-v2 input[type="radio"],
body.flexbox-forms-v2 input[type="checkbox"] {
  margin: 3px;
  vertical-align: middle;
}
body.flexbox-forms-v2 .radio-group .radio-group-horz {
  display: flex;
  padding: 3px 5px;
  border: 1px solid #aaa;
  border-radius: 3px;
  background-clip: padding-box;
}
body.flexbox-forms-v2 .radio-group .radio-group-horz .radio-item {
  display: flex;
  flex-direction: row;
  margin-right: 2rem;
}
body.flexbox-forms-v2 .radio-group .radio-group-horz .radio-item:last-child {
  margin-right: 0;
}
body.flexbox-forms-v2 .radio-group .radio-group-horz .radio-item > label {
  margin-left: 0.5rem;
  order: 99;
}
body.flexbox-forms-v2 .radio-group .radio-group-vert {
  display: flex;
  flex-direction: column;
  padding: 3px 5px;
  border: 1px solid #aaa;
  border-radius: 3px;
  background-clip: padding-box;
}
body.flexbox-forms-v2 .radio-group .radio-group-vert .radio-item {
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: row;
}
body.flexbox-forms-v2 .radio-group .radio-group-vert .radio-item:last-child {
  margin-bottom: 0;
}
body.flexbox-forms-v2 .radio-group .radio-group-vert .radio-item > label {
  margin-left: 0.5rem;
  order: 99;
}
body.flexbox-forms-v2 .checkbox-group .checkbox-group-horz {
  display: flex;
  padding: 3px 5px;
  border: 1px solid #aaa;
  border-radius: 3px;
  background-clip: padding-box;
}
body.flexbox-forms-v2 .checkbox-group .checkbox-group-horz .checkbox-item {
  display: flex;
  flex-direction: row;
  margin-right: 2rem;
}
body.flexbox-forms-v2 .checkbox-group .checkbox-group-horz .checkbox-item:last-child {
  margin-right: 0;
}
body.flexbox-forms-v2 .checkbox-group .checkbox-group-horz .checkbox-item > label {
  margin-left: 0.5rem;
  order: 99;
}
body.flexbox-forms-v2 .checkbox-group .checkbox-group-vert {
  display: flex;
  flex-direction: column;
  padding: 3px 5px;
  border: 1px solid #aaa;
  border-radius: 3px;
  background-clip: padding-box;
}
body.flexbox-forms-v2 .checkbox-group .checkbox-group-vert .checkbox-item {
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: row;
}
body.flexbox-forms-v2 .checkbox-group .checkbox-group-vert .checkbox-item:last-child {
  margin-bottom: 0;
}
body.flexbox-forms-v2 .checkbox-group .checkbox-group-vert .checkbox-item > label {
  margin-left: 0.5rem;
  order: 99;
}
body.flexbox-forms-v2 #address1 + #address2 {
  margin-top: 0.25rem;
}
body.flexbox-forms-v2 .form-item.date-picker input.text {
  width: calc(100% - 30px);
  border-radius: 3px 0 0 3px;
  background-clip: padding-box;
}
body.flexbox-forms-v2 .form-item.date-picker button.trigger {
  height: 2rem;
  width: 30px;
  padding: 4px 8px;
  font-size: 14px;
  color: #fff;
  border-radius: 0 3px 3px 0;
  background-clip: padding-box;
}
body.flexbox-forms-v2 .form-item.simple-multiple {
  display: flex;
  flex-direction: row;
  align-items: center;
}
body.flexbox-forms-v2 .form-item.simple-multiple > * {
  margin-right: 1rem;
}
body.flexbox-forms-v2 .form-item.submit {
  max-width: none;
}
body.flexbox-forms-v2 .form-item.submit .button-wrapper {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
}
body.flexbox-forms-v2 .form-item.submit .button-wrapper button {
  margin-right: 2rem;
}
body.flexbox-forms-v2 .form-item.submit .button-wrapper button:last-child {
  margin-right: 0;
}
body.flexbox-forms-v2 .form-item.submit .button-wrapper button.secondary {
  margin-left: 2rem;
}
body.flexbox-forms-v2 .form-row.expires {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
body.flexbox-forms-v2 .form-row.expires > div {
  width: 48%;
}
body.flexbox-forms-v2 .form-row.expires.with-code {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
body.flexbox-forms-v2 .form-row.expires.with-code > div {
  width: 30.5%;
}
@media screen and (min-width: 640px) {
  body.flexbox-forms-v2 .form-row.two-up,
  body.flexbox-forms-v2 .form-row.first-last {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  }
  body.flexbox-forms-v2 .form-row.two-up > div,
  body.flexbox-forms-v2 .form-row.first-last > div {
  width: 48%;
  }
  body.flexbox-forms-v2 .form-row.three-up,
  body.flexbox-forms-v2 .form-row.city-state-zip {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  }
  body.flexbox-forms-v2 .form-row.three-up > div,
  body.flexbox-forms-v2 .form-row.city-state-zip > div {
  width: 30.5%;
  }
  body.flexbox-forms-v2 .form-row.multiple-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  }
  body.flexbox-forms-v2 .form-row.multiple-inline > div {
  margin-right: 1rem;
  }
}

/* ===============================================
   PACESETTER EVENT 2020
   =============================================== */
   
@pacesetter-blue: #353d74;
@pacesetter-gold: #cdb87e;
   
body.pacesetter {
  min-height: 100vh;
  background-image: url(/images/pacesetter/bg_pacesetter.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  
  #top {
    background: transparent;
    
    .sizer {
      display: block;
    }
    
    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  
  #welcome-bar {
    min-height: 86px;
    background-image: url(/images/pacesetter/bg_gold_bar.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    font-family: @oswald;
    color: @pacesetter-blue;

    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 86px;
    }
    
    .welcome {
      font-size: 36px;
      font-weight: bold;
    }
    .help {
      font-size: 36px;
    }
  }
  
  #content {
    width: 100% !important;
    margin: 0 !important;
  }
  
  #bottom {
    color: @white;
    text-align: center;
    
    .container {
      margin-top: 4rem;
      padding-top: 1rem;
      border-top: 2px solid @white;
    }
    
    a {
      color: @white;
    }
    
    .nav-list {
      color: @white;
      justify-content: center;
    }
  }
}

@media @small-screen-only {

  body.pacesetter {
  
    #top .container {
    
      .pacesetter-logo {
        margin-right: 5%;
      }
      .jm-logo {
        margin-left: 5%;
      }
    }
    
    #welcome-bar {
    
      .container {
        padding: 10px 20px;
        flex-direction: column;
        line-height: 1.5;
        text-align: center;
      }  
      
      .welcome,
      .help {
        font-size: 24px;
      }  
    }  
  }
}

body.pacesetter-landing {

  .story-content {
    color: @white;
  }

  .chat {
    
    iframe {
      width: 100%;
      height: 400px;
    }
  }
  
  .embed-wrapper {
    margin-bottom: 1.5rem;
  }
  
  .instructions {
    font-size: 1.5rem;
    text-align: center;
  }
  .fullscreen-info {
    font-style: italic;
    font-size: 1.5rem;
    text-align: center;
  }

}

@media @small-screen-only {

  body.pacesetter-landing {
  
    .instructions,
    .fullscreen-info {
      font-size: 1.25rem;
    }
  }
}

body.pacesetter-guests {

  .btn-wrapper {
    max-width: 800px;
    margin: 0 auto;
    
    a {
      text-decoration:  none;
    }
  }
  
  .btn {
    border: 4px solid #bebecd;
    .border-radius(5px);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    
    .step-num {
      flex: 0 1 auto;
      background-color: @pacesetter-gold;
      color: @pacesetter-blue;
      height: 4rem;
      width: 4rem;
      line-height: 4rem;
      font-size: 2rem;
      text-align: center;
      .border-radius(100px);
    }
    .step-desc {
      flex: 1 1 80%;
      padding: 0 4rem;
      font-size: 2rem;
      color: @white;
      
      strong {
        font-size: 2.5rem;
      }
    }
    .arrow {
      flex: 0 1 auto;
    }
  }
}
@media @small-screen-only {

  body.pacesetter-guests {
  
    .btn {
    
      .step-num {
        height: 3rem;
        width: 3rem;
        line-height: 3rem;
      }
    
      .step-desc {
        font-size: 1rem;
        padding: 0 2rem;
        
        strong {
          font-size: 1.25rem;
        }
      }
    }
  }
}

body.pledge-pacesetter {

  .tmpl-subscribe-form {
  
    button[type="submit"] {
      padding: 15px 30px;
      font-size: 200%;
      background-color: @dark-blue;
      border-color: @dark-blue;
      background-clip: border-box;
    }
  }
}

/* ===============================================
   10 DAYS OF COMMUNITY  FEBRUARY 2021
   =============================================== */

body.tendays {

  h1,
  h2,
  h3 {
    color: @dark-blue;
  }
  a {
    color: @dark-blue;
  }
  a.button {
    color: @white;
  }

  #top-alert,
  #red-alert {
    display: none;
  }

  #top {
    background: @white;
    padding: 0;

    > .sizer {
      display: block;
    }

    .shoah-logos {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      > div {
        padding-right: 50px;

        &:last-child {
          padding-right: 0;
        }
      }
    }
  }

  #bottom {
    text-align: center;

    h2 {
      text-transform: uppercase;
    }

    .shoah-partners {
      border-bottom: 2px solid @shoah-green;
      padding: 1rem 0;
    }
    .shoah-credits {
      padding: 1rem 0;
    }

    .bottom-logos {
      display: flex;
      justify-content: center;
      align-items: center;

      > div {
        flex-grow: 0;
      }
    }
  }
}

// section landing page
body.tendays.section-landing {

  #middle {

    .sizer {
      padding-left: 10px;
      padding-right: 10px;
    }

    h2 {
      text-align: center;
    }

    .hero {
      background-image: url(/images/shoah_hero_candles.jpg);
      background-repeat: no-repeat;
      background-position: top left;
      background-size: cover;

      .text-overlay {
        max-width: 960px;
        padding: 20px 30px;
        background-color: rgba(0,0,0,0.25);
        border-radius: 5px;
        color: @white;

        h2 {
          margin-bottom: 0;
          text-align: center;
        }
        h3 {
          margin-bottom: 0;
          text-align: center;
        }
      }
    }

    .sponsors {
      padding-top: 2rem;
      padding-bottom:2rem;
      background-color: @shoah-green;
      color: @white;

      p {
        font-size: 1.25rem;
        text-align: center;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .introduction {
      background-color: @shoah-gray;
      padding-top: 2rem;
      padding-bottom: 2rem;
      font-size: 1.25rem;
      text-align: center;

      p:last-child {
        margin-bottom: 0;
      }
    }

    .films {
      padding-top: 2rem;
      padding-bottom: 2rem;

      .sizer > h3 {
        text-align: center;
      }
    }

    .other-ways {
      padding-top: 2rem;
      padding-bottom: 2rem;
      background-color: lighten(#bcd4e6, 10%);
      color: @dark-blue;
    }

  }
}

// letter
body.tendays.letter {

  .sigs {

    img {
      display: block;
      float: left;
      margin-right: 2rem;
    }
  }
}

@media @medium-screen-up {

  body.tendays {}

  body.tendays.section-landing {

    #middle {
      padding-top: 0;

      > .sizer {
        max-width: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
      }

      h2 {
        font-size: 3rem;
      }

      .hero {
        min-height: 450px;
        padding: 30px 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .text-overlay {

          h2 {
            font-size: 3rem;
            color: @white;
          }
          h3 {
            font-size: 2rem;
            color: @white;
          }
        }
      }

      .other-ways {

        .img {
          float: right;
          margin: 1rem 0 0 1rem;
        }
      }
    }
  }
}

@media @small-screen-only {

  body.tendays {

    #top {

      .shoah-logos {
        flex-wrap: wrap;

        > div {
          padding-right: 0;
          //padding-bottom: 1rem;
          //width: 45%;
        }
      }
    }

    #bottom {

      .bottom-logos {
        flex-direction: column;

        > div {
          margin-bottom: .5rem;
        }
      }
    }
  }

  body.tendays.section-landing {

    #middle {
      padding: 0;

      > .sizer {
        padding-left: 0;
        padding-right: 0;
      }

      h2 {
        font-size: 2rem;
      }

      .hero {
        padding: 60px 10px;

        .text-overlay {

          h2 {
            font-size: 2rem;
            color: @white;
          }
          h3 {
            font-size: 1.5rem;
            color: @white;
          }
        }
      }
    }
  }
}

/* ===============================================
   MAIN EVENT RSVP/PLEDGE FEBRUARY 2021
   =============================================== */

body#story-7675.pac-contribution-form form#contribution-form .amounts label,
body#story-7753.pac-contribution-form form#contribution-form .amounts label,
body#story-7778.pac-contribution-form form#contribution-form .amounts label {
  width: auto;
  margin-right: 3rem;
}

//// PLEDGE CARD

body.pledge-tme {


  .tmpl-subscribe-form {
  
    button[type="submit"] {
      background-color: @dark-blue;
      border-color: @dark-blue;
    }
  }
}

/* ===============================================
   MAIN EVENT PROGRAM  MARCH 2021
   =============================================== */
   
body.tme {
  min-height: 100vh;
  background-image: url(/images/tme/tme_2021_bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  
  .page-container {
    background-image: url(/images/tme/tme_2021_gold.png);
    background-repeat: no-repeat;
    background-position: top center;
  }       
  
  #top {
    background: transparent;
    padding: 37px 0 50px;
    
    .sizer {
      display: block;
    }
    
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  
  #content {
    width: 100% !important;
    margin: 0 !important;
    color: @white;
  }
  
  #gmjf-logo {
    margin: 2rem 0;
    text-align: center;
  }
  
  #bottom {
    color: @white;
    text-align: center;
    margin-top: 2rem;
    
    .container {
      padding-top: 1rem;
      border-top: 2px solid @white;
    }
    
    a {
      color: @white;
    }
    
    .nav-list {
      color: @white;
      justify-content: center;
    }
  }
}

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

  body.tme {
  
    .page-container {
      background-image: none;
    }
  }
}

body.tme-checkin {

  .intro {
    color: @white;
    text-align: center;
  
    h1 {
      color: @white;
      font-family: TimesNewRoman, 'Times New Roman', Times, Baskerville, Georgia, serif;
      font-size: 4rem;
      text-transform: uppercase;
      font-weight: normal;
    }
    
    p {
      font-size: 1.5rem;
    }
  }
  .sub-form-wrapper {
    display: flex;
    justify-content: center;
  }
  
  #subscribe-form {
    width: 300px;
    margin: 0 auto;
    color: @white;
  
    .formrow {
      flex-direction: column;
      
      .label-wrapper,
      .input-wrapper {
        flex: 0 0 auto;
        max-width: none;
      }
    }
    
    label {
      color: @white;
    }
    
    input {
      height: 35px;
    }
    
    span.req {
      color: @white;
    }
    
    button {
      border-color: #dfbc66;
      background-color: #dfbc66;
      text-transform: uppercase;
      width: 100%;
    }
  }
}

body.tme-placeholder {

  .story-content {
    color: @white;
    text-align: center;
    font-size: 2rem;
  }
}

body.tme-live {

  .story-content {
    color: @white;
  }
  
  .video-chat {
    display: flex;
    font-size: 1.25rem;
  }
  
  .vid-embed {
    flex-shrink: 0;
    width: 75%;
    margin-right: 0%;
  }

  .chat {
    flex-shrink: 0;
    width: 25%;
    
    iframe {
      margin-bottom: 1.5rem;
    }
    
    h3 {
      font-size: 2rem;
      color: @white;
      text-align: center;
    }
  }
  
  .embed-wrapper {
    margin-bottom: 1.5rem;
  }
  
  .instructions {
  
    h2 {
      color: @white;
    }
    
    img {
      width: 25px;
      height: auto;
      vertical-align: middle;
    }
  }
  
}

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

  body.tme-live {
  
    .video-chat {
      flex-direction: column;
    }
    .vid-embed {
      width: 100%;
      margin:  0 0 1.5rem;
    }
    .chat {
      width: 100%;
      
      iframe {
        width: 100%;
      }
      
      h3 {
        text-align: left;
      }
    }
  }
}

@media @small-screen-only {

  body.tme-live {}
}


/* ===============================================
   RT 22930 MARCH 2021
   =============================================== */

body.gift.screen-contribution-form {

  .pt-wrapper {
    display: none;
  }
}

body.gift #contribution-form .two-columns {
  display: flex;
  flex-direction: column;
  
  .column-1 {
    margin-right: 0;
  }
  .column-2 {
    order: -1;
    margin-bottom: 1.5rem;
  }
}

.formrow.email-type .fieldset,
.formrow.email-type .fieldset .formrow,
.formrow.address-home-or-business .fieldset,
.formrow.address-home-or-business  .fieldset .formrow,
.formrow .input-wrapper .fieldset,
 .formrow .input-wrapper .fieldset .child-formrow{
  margin-bottom: 0;
}

/* ===============================================
   UNSTOPPABLE VIDEO
   =============================================== */

body.unstoppable {

  &.video-landing {
  
    background-color: #bbcfcd;
  
    .vid {
      margin: 2rem 0;
    }
  
    .embed-wrapper {
      margin-bottom: 1.5rem;
    }
  
    .instructions {
      font-weight: bold;
  
      h2 {
        color: @white;
      }
    
      img {
        width: 25px;
        height: auto;
        vertical-align: middle;
      }
    }

    .live-logo {
      margin: 2rem 0;
  
      .img {
        max-width: 300px;
        height: auto;
      }
    }
  }
}

/* ===============================================
   GENERIC LIVE STREAM SECTION COVER
   =============================================== */

body.live-stream.section-landing {
  background-color: #02284f;
  color: @white;
  
  .vid {
    //margin: 2rem 0;
  }
  
  .embed-wrapper {
    margin-bottom: 1.5rem;
  }
  
  .instructions {
    font-weight: bold;
    
    .bigger {
      font-size: 1.25em;
    }
  
    h2 {
      color: @white;
    }
    
    img {
      width: 25px;
      height: auto;
      vertical-align: middle;
    }
  }

  .live-logo {
    //margin: 2rem 0;
  
    .img {
      margin-bottom: 0;
      max-width: 860px;
      height: auto;
    }
  }
}

/* ===============================================
   PACESETTER 2022 RSVP
   =============================================== */

body#story-8279,
body#story-8328 {

  .formrow.guest-register-checkbox {
    padding: 10px;
    background-color: @lightest-gray;
  }
}

body#story-8484 .story-content {
  color: @white;
  
  #messages {
    color: @text;
  }
  
  h1,h2,h3 {
    color: @white;
  }
  
  span.req {
    color: @white;
  }
}

  

/* ===============================================
   PACESETTER 2022 PLEDGE
   =============================================== */

body.pledge-pacesetter {

  .extra-bottom-image {
    margin-bottom: 1rem;
  }

}

/* ===============================================
   PACESETTER 2022 VIDEO LANDING
   =============================================== */

body#story-8485 {

  .important-msg {
    padding: 1rem 2rem;
    border: 1px solid @white;
    text-align: center;
    
    :last-child {
      margin-bottom: 0;
    }
  }
}

/* ===============================================
   BRIAN SCHWARTZ 2022
   =============================================== */

body#story-8482 {

  fieldset.guests h2:last-of-type {
    display: none;
  }
}

/* ===============================================
   ISRAELI DIVISION 2022
   =============================================== */

body#story-8539 {

  .slideshow {
    background-color: #f7f7f7;
    
    .listed-item {
      max-width: 1920px;
      margin: 0 auto;
    }
  }

  .global-stories {
  
    .listed-item {
    
      .display-wrapper {
        flex-direction: column-reverse;
      }
    }
  }
}
@media @small-screen-only {

  body#story-8539 {
  
    .slideshow {
    
      .listed-item {
        height: 200px;
      }
    }
  }
}

/* ===============================================
   ANNUAL MEETING 2022
   =============================================== */

body.annualmeeting {
  background: url(/images/2022/2022_annual_mtg_bg.jpg) center;
  color: @white;
  
  .logo {
    text-align: center;
    margin-bottom: 3rem;
    
    img {
      max-width: 400px;
      height: auto;
    }
  }
  
  h1 {
    color: @white;
  }
  
  .story-content {
    max-width: 898px;
    margin: 0 auto;
  }
}

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

body.bing-search {

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

/* ===============================================
   GOOGLE SEARCH
   =============================================== */

.gsc-control-cse {
  padding: 0 !important;
  font-family: @maven !important;
  font-size: 1rem !important;

  .gs-spelling,
  .gs-result .gs-title, .gs-result .gs-title * {
    font-family: @maven !important;
    font-size: 1.25rem !important;
  }
  .gsc-result-info,
  .gsc-table-result,
  .gs-fileFormat,
  .gs-fileFormatType {
    font-family: @maven !important;
    font-size: 1rem !important;
  }
  table {
    margin-bottom: 0 !important;
  }
  td {
    padding: 0 !important;
  }
  
  form {
    margin-bottom: 3rem !important;
  }
  
  .gsc-input-box {
    margin-right: 2rem !important;
  
    table {
      margin: 0;
    }
    
    input {
      background-image: none !important;
      margin: 0 !important;
      padding-inline: .75rem !important;
      height: calc(2rem - 2px) !important;
      margin-right: 2rem !important;
    }
  }
  .gsc-search-button {
  
    button {
      height: 2rem;
    }
  }
    
}
/* ===============================================
   ISRAEL 75 READY-TO-GO
   =============================================== */

#story-9149 {

  .i75-banner {
    margin-bottom: 3rem;
    padding: 2rem 0;
    background-image: url(/israel75miami/images/top-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  
    img {
      display: block;
      margin: 0 auto;
    }
  }
  
  .links {
    margin-bottom: 3rem;
  
    h3.title {
      text-align: center;
    }
  }
  
  .i75-video {}
}

/* ===============================================
   ISRAEL 75 MIAMI EVENTS
   =============================================== */

#story-9207 #content {

  h1 {
    text-align: center;
  }
  
  .intro-text {
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
  }
  
  .featured-event {
    margin-bottom: 3rem;
    
    .card-media .media {
      margin-bottom: 0;
    }
  }
  
  .eb-item {
  
    h3.title {
      margin-bottom: .25rem;
    }
    p.date {
      font-weight: bold;
    }
    p.location:empty {
      display: none;
    }
  }
}



/* ===============================================
   ISRAEL 76 MIAMI EVENTS
   =============================================== */

#story-9973 #content {

  h1 {
    text-align: center;
  }
  
  .intro-text {
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
  }
  
  .featured-event {
    margin-bottom: 3rem;
    
    .card-media .media {
      margin-bottom: 0;
    }
  }
  
  .eb-item {
  
    h3.title {
      margin-bottom: .25rem;
    }
    p.date {
      font-weight: bold;
    }
    p.location:empty {
      display: none;
    }
  }
}



/* ===============================================
   IMAGE SLIDER DEMO
   =============================================== */

body.homepage.image-slider-demo-overlay {

  .vanilla-slider {
  
  }
  
  .vanilla-slider .card {
  
    .card-media .img {
      margin-bottom: 0;
    }
  
    .card-content {
      align-self: flex-end;
      justify-self: center;
      max-width: 800px;
      margin: 0 auto 1.5rem;
      padding: 1rem 2rem;
      text-align: center;
      background-color: hsla(0, 0%, 75%, 0.8);
      border-radius: .5rem;
      
      :last-child {
        margin-bottom: 0;
      }
    }
    
    a:not(.button) {
      color: @dark-blue;
      text-decoration: underline;
    }
  }
}

/* ===============================================
   RT 24758
   =============================================== */
   
#story-9568 {

  #content .global-stories .readmore a {
    color: @coral;
  }
}

/* ===============================================
   RT 24786
   =============================================== */
   
#story-9610 {

  #tc-form-bottom {
  
    h3 {
      color: @dark-blue;
    }
    
    .formrow {
      padding: 10px;
      background-color: @lightest-gray;
    }
  }
}
#story-9729 {

  #tc-form-bottom {
  
    h3 {
      color: @dark-blue;
    }
    
    .formrow {
      padding: 10px;
      background-color: @lightest-gray;
    }
  }
}
#story-9735 {

  #tc-form-bottom {
  
    h3 {
      color: @dark-blue;
    }
    
    .formrow {
      padding: 10px;
      background-color: @lightest-gray;
    }
  }
}

/* ===============================================
   RABBI SOLIDARITY MISSION  NOVEMBER 2023
   =============================================== */

body.rabbisolidaritymission {

  h1,
  h2,
  h3 {
    color: @dark-blue;
  }
  a {
    color: @dark-blue;
  }
  a.button {
    color: @white;
  }

  #top-alert,
  #red-alert {
    display: none;
  }
  
  .bc-wrapper,
  .pt-wrapper {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
  }
}

// section landing page
body.rabbisolidaritymission.section-landing {

  #middle {

    .sizer {
      padding-left: 10px;
      padding-right: 10px;
    }

    h2 {
      text-align: center;
    }

    .hero {
      background-image: url(/images/shoah_hero_candles.jpg);
      background-repeat: no-repeat;
      background-position: top left;
      background-size: cover;

      .text-overlay {
        max-width: 960px;
        padding: 20px 30px;
        background-color: rgba(0,0,0,0.25);
        border-radius: 5px;
        color: @white;

        h2 {
          margin-bottom: 0;
          text-align: center;
        }
        h3 {
          margin-bottom: 0;
          text-align: center;
        }
      }
    }

    .sponsors {
      padding-top: 2rem;
      padding-bottom:2rem;
      background-color: @shoah-green;
      color: @white;

      p {
        font-size: 1.25rem;
        text-align: center;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .introduction {
      background-color: @shoah-gray;
      padding-top: 2rem;
      padding-bottom: 2rem;
      font-size: 1.25rem;
      text-align: center;

      p:last-child {
        margin-bottom: 0;
      }
    }

    .films {
      padding-top: 2rem;
      padding-bottom: 2rem;

      .sizer > h3 {
        text-align: center;
      }
    }

    .other-ways {
      padding-top: 2rem;
      padding-bottom: 2rem;
      background-color: lighten(#bcd4e6, 10%);
      color: @dark-blue;
    }

  }
}

@media @medium-screen-up {

  body.rabbisolidaritymission {}

  body.rabbisolidaritymission.section-landing {

    #middle {

      > .sizer {
        max-width: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
      }

      h2 {
        font-size: 3rem;
      }

      .hero {
        min-height: 450px;
        padding: 30px 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .text-overlay {

          h2 {
            font-size: 3rem;
            color: @white;
          }
          h3 {
            font-size: 2rem;
            color: @white;
          }
        }
      }

      .other-ways {

        .img {
          float: right;
          margin: 1rem 0 0 1rem;
        }
      }
    }
  }
}

@media @small-screen-only {

  body.rabbisolidaritymission.section-landing {

    #middle {

      > .sizer {
        padding-left: 0;
        padding-right: 0;
      }

      h2 {
        font-size: 2rem;
      }

      .hero {
        padding: 60px 10px;

        .text-overlay {

          h2 {
            font-size: 2rem;
            color: @white;
          }
          h3 {
            font-size: 1.5rem;
            color: @white;
          }
        }
      }
    }
  }
}

/* ===============================================
   Guest Info
   =============================================== */
   
.guest-info .guest {
  padding-left: 10px;
  border-left: 1px solid #ccc;
  margin-bottom: 3rem;
}
.guest-info .guest-group-hdr {
  font-weight: bold;
  font-style: italic;
}

/* ===============================================
   ELI MORRISON SUNSHINE FUND
   =============================================== */

#story-9332 #middle {
  background-color: #c2cdcf;
  color: #223a72;
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
  
  h1,h2,h3 {
    font-family: sweet-sans-pro, sans-serif;
    color: #a57d35;
  }
  
  form button {
    background-color: #a57d35;
    border: 2px solid @white;
    font-family: sweet-sans-pro, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
  }
  
  .amounts .simple-amount input[name="amount"]:checked ~ label {
    background-color: #a57d35 !important;
  }
  .amounts .simple-amount label {
    background-color: #4771ad;
    width: 80%;
  }
}

/* ===============================================
   SOCIAL MEDIA PAGE
   =============================================== */

#story-6296 .story-content {

  .auto-block-grid {
    margin-bottom: 1.5rem;
    gap: 1rem 2rem;
  
    .listed-item {
      max-width: 200px;
    
      .display-wrapper {
        flex-direction: column;
      }
      .img {
        margin: 0 0 .75rem;
        width: 100%;
        max-width: none;
      }
    }
  }
}

/* ===============================================
   REVISED PLEDGE FORM JUN 2024
   =============================================== */

#story-9736 .story-content {

  .formrow {
    max-width: none;
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
  }

  .formrow.text,
  .formrow.select,
  .formrow.textarea,
  .formrow.multi,
  .formrow.radio-group-horz,
  .formrow.radio-group-vert {
    max-width: none;
    width: 100%;
    border: 1px solid @lighter-gray;
    border-radius: .25rem;
    padding: .25rem .5rem;
    
    .label-wrapper {
      max-width: none;
      padding: 0;
    }
    
    label {
      font-weight: normal;
      color: @dark-gray;
      //padding-inline: .5rem;
    }
    
    .input-wrapper {
      max-width: none;
      padding: 0;
    }
    
    input.text,
    textarea,
    select,
    select[multiple] {
      border: 0;
      width: 100%;
      max-width: none;
      box-shadow: none;
      padding: .25rem;
      height: 2rem;
      
      &:focus {
        background-color: #f8f8f8;
        border: 0 !important;
      }
    }
    select {
      -webkit-appearance: none;
      appearance: none;
      padding-inline: .25rem;
      background-image:
        linear-gradient(45deg, transparent 50%, gray 50%),
        linear-gradient(135deg, gray 50%, transparent 50%);
      background-position:
        calc(100% - 20px) center,
        calc(100% - 15px) center;
      background-size:
        5px 5px,
        5px 5px;
      background-repeat: no-repeat;
    }
    
  }
  
  .formrow.radio {
    flex-direction: row;
  }
  
  .formrow.amount-other {
    border: 0;
  }
  
  .formrow.multi .input-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: baseline;
    gap: 1rem 2rem;
  }
  
  .formrow.submit {
  
    button {
      align-self: flex-start;
    }
  }    
}

/* ===============================================
   RT #25260
   =============================================== */

#story-10094 {

  .tmpl-pac-contribution-form #contribution-form .column-1 {
    display: none;
  }
}

/* ===============================================
   RT 25372
   =============================================== */

#story-3502 #middle {

  .results {
    margin-bottom: 1.5rem;
    padding-top: 0;
    border-top: 0;
  }
}

/* ===============================================
   RT 25543
   =============================================== */

#story-10428 {

  #middle {
    background-color: @black;
    color: #f7d574;
    
    
    h1,h2,h3,
    span.req {
      color: #f7d574;
    }
    a:not(.button) {
      color: #f7d574;
    }
  }
  
  #content .intro {
    text-align: center;
  }

  #content form {
    max-width: 500px;
    margin: 0 auto;
    
    .leftcell,
    .rightcell {
      width: 100%;
      margin: 0;
      float: none;
    }
    
    fieldset.message,
    fieldset.attending_lunch {
      margin: 0;
    }
    button {
      background-color: #f7d574;
      border-color: #f7d574;
      color: @black;
    }
  }
}