// $Id: swirl_site.less 24101 2017-01-05 19:53:08Z efolley $

@import "/assets/less/colors.less";
@import "/assets/less/fonts.less";
@import "/assets/less/mixins.less";

// BREAKPOINTS
@small-screen-only:     ~"screen and (max-width: 639px)";
@medium-screen-up:      ~"screen and (min-width: 640px)";
@medium-screen-only:    ~"screen and (min-width: 640px) and (max-width: 1023px)";
@large-screen-up:       ~"screen and (min-width: 1024px)";
@large-screen-only:    ~"screen and (min-width: 1024px) and (max-width: 1199px)";
@xlarge-screen-up:       ~"screen and (min-width: 1200px)";

@sm-only:                   ~"screen and (max-width: 639px)";
@md-only:                   ~"screen and (min-width: 640px) and (max-width: 1023px)";
@lg-only:                   ~"screen and (min-width: 1024px) and (max-width: 1279px)";
@xl-only:                   ~"screen and (min-width: 1280px) and (max-width: 1535px)";
@xxl-only:                  ~"screen and (min-width: 1536px) and (max-width: 1919px)";
@xxxl-up:                   ~"screen and (min-width: 1920px)";

@sm-md:                     ~"screen and (max-width: 1023px)";
@sm-lg:                     ~"screen and (max-width: 1279px)";
@sm-xl:                     ~"screen and (max-width: 1535px)";
@sm-xxl:                    ~"screen and (max-width: 1919px)";

@md-up:                     ~"screen and (min-width: 640px)";
@md-lg:                     ~"screen and (min-width: 640px) and (max-width: 1279px)";
@md-xl:                     ~"screen and (min-width: 640px) and (max-width: 1535px)";
@md-xxl:                    ~"screen and (min-width: 640px) and (max-width: 1919px)";

@lg-up:                     ~"screen and (min-width: 1024px)";
@lg-xl:                     ~"screen and (min-width: 1024px) and (max-width: 1535px)";
@lg-xxl:                    ~"screen and (min-width: 1024px) and (max-width: 1919px)";

@xl-up:                     ~"screen and (min-width: 1280px)";
@xl-xxl:                    ~"screen and (min-width: 1280px) and (max-width: 1919px)";

@xxl-up:                     ~"screen and (min-width: 1536px)";

// SITE COLORS
@red:                   #ff5859;
@blue:                  #2f7de1;
@teal:                  #00adbb;

:root {
  // grays
  --white:             #fff;
  --near-white:        #f8f8f8;
  --lightest-gray:     #e0e0e0;
  --lighter-gray:      #c0c0c0;
  --light-gray:        #a0a0a0;
  --gray:              #808080;
  --dark-gray:         #606060;
  --darker-gray:       #404040;
  --darkest-gray:      #202020;
  --near-black:        #101010;
  --black:             #000;
  --text-color:        var(--darkest-gray);
}

// TYPOGRAPHY
@fira:                  'Fira Sans', sans-serif;
@font-size:             14px;
@line-height:           1.5;
@baseline:              @font-size * @line-height;

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

div.preview-notice {
  display: none;
}
body:after {
  display: none;
}

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

h1, h2, h3 {
  color: @blue;
}
h4, h5, h6 {
  color: @blue;
}
h1 {
  font-size: 36px;
}
h2 {
  font-size: 26px;
}
h3 {
  font-size: 20px;
}

a {
  color: @red;
}

button,
a.button {
  color: @white;
  background: @red;
  border-color: @red;
  border-radius: 0;
  text-transform: uppercase;
}
body.is-form #content form {

  button {
    font-size: 30px;
    padding: 10px 20px;
  }
}
span.req {
  color: @red;
}
.captcha-wrapper {
  margin-bottom: 0.75rem;
}

body.button-amounts form#contribution-form .amounts .simple-amount label {
  margin-left: 0;
  background: @red;
}
body.button-amounts form#contribution-form .amounts .simple-amount input[name="amount"]:checked ~ label {
  background: @teal;
}
body.button-amounts form#contribution-form .amounts .simple-amount-other label {
  float: left;
  margin-left: .5rem;
}
.formrow.top-label label {
  width: auto;
  float: none;
  padding-right: 0;
  margin-bottom: .5rem;
}
form#contribution-form .amounts .radio.label-amount {

  div.label {
    width: auto;
  }
}

form#contribution-form #dedicate-fields {
  display: block;
}

body.article {

  #content {

    h2,
    h3 {
      margin-bottom: 0;
    }
  }
}

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

.sizer {
  padding: 0 10px;
}
@media @medium-screen-up {

  .sizer {
    max-width: 1200px;
    margin: 0 auto;
    //padding: 0 10px;
    .contain-floats();
  }
}

// TOP ALERT

#top-alert {
  background: @red;
  color: @white;
  font-size: 16px;

  .sizer {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 10px 10px 60px;
    background: url(/images/icon_bell.png) 10px center no-repeat;

    div.alert-text {
      flex-grow: 1;

      p {
        margin: 0;

        span {
          font-weight: bold;
          text-transform: uppercase;
        }

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

      a {
        color: @red;
        background-color: @white;
        text-decoration: none;
        display: block;
        .border-radius(100px);
        font-size: 16px;
        line-height: 20px;
        width: 20px;
        text-align: center;
      }
    }
  }
}

@media @small-screen-only {

  #top-alert {
    padding: 0 10px;
    font-size: 14px;
    line-height: 1.4;
  }
} // end #top-alert

// TOP

#top {
  background: @blue;

  .container {
    display: flex;
  }

  .logo {}

  .widgets {

    .signup-donate {}

    .quick-nav {}
  }
}

@media @medium-screen-up {

  #top {
    padding: 20px 0;

    .logo {
      flex: 0 0 40%;
      max-width: 40%;
    }

    .widgets-wrapper {
      flex: 0 0 60%;
      max-width: 60%;

      .widgets {
        float: right;
      }

      .signup-donate {
        .contain-floats;
        margin-bottom: 2rem;

        form {
          float: right;

          div {
            color: @white;
            margin-bottom: .5rem;
          }

          input {
            height: 36px;
            width: 150px;
            border-color: @white;
            .box-shadow(none);
          }
          input[name="email"] {
            width: 200px;
          }
          input[name="zip"] {
            width: 100px;
          }
          button {
            height: 36px;
            border-color: @white;
          }

          .button {
            margin-left: 30px;
            height:36px;
            line-height: 26px;
            border-color: @white;
          }
        }
      }

      .quick-nav {

        ul {
          //float: right;
          margin-bottom: 0;

          li {
            padding-right: 30px;

            &:after {
              padding: 0;
            }
          }
          a {
            color: @white;
          }
        }
      }
    }
  }
}

@media @medium-screen-only {

  #top {

    .widgets {

      .signup-donate {

        form {

          .button {
            display: none;
          }
        }
      }
    }
  }
}

@media @small-screen-only {

  #top {
    padding: 10px;

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

      .logo {
        flex: 0 0 80%;
        max-width: 80%;
      }
      #menu-toggle {
        flex: 0 0 20%;
        max-width: 20%;
        text-align: right;

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

      .widgets {
        display: none;
      }
    }
    .quick-nav {

      .nav-list {
        margin: 0;

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

// SEARCH

#search {
  display: none;
  padding: 10px 0;
  background-color: @teal;

  form {

    input {
      height: 36px;
    }

    button {
      background: transparent;
      border: 0;
      height: 36px;
      font-size: 1.5rem;
    }
  }
}
@media @medium-screen-up {

  #search {

    form {
      //float: right;
      margin-left: 659px;

      span {
        display: inline-block;
        font-size: 16px;
        line-height: 36px;
        vertical-align: middle;
        margin-right: 20px;
        color: @white;
        font-style: italic;
      }

      input {
        width: 250px;
      }
    }
  }
}
@media @small-screen-only {

  #search {
    padding: 10px;

    span {
      display: none;
    }
    form {
      width: 100%;

      input {
        width: 75%;
      }
      button {
        width: 20%;
      }
    }
  }
} // end #search

// BANNER

#banner {
  background-image: url(/images/banner330_default.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
body.is-home #banner,
body.section-landing #banner {
  background-image: url(/images/banner550_home.jpg);
}
body.event-listing.screen-event-calendar #banner {
  background-image: url(/images/banner330_calendar.jpg);
}

@media @medium-screen-up {

  #banner {
    height: 330px;
  }
  body.is-home #banner,
  body.section-landing #banner {
    height: 535px;
  }
}
@media @small-screen-only {

  #banner {
    height: 150px;
  }
  body.is-home #banner {
    //height: 240px;
    margin-bottom: 20px;
  }
} // end #banner

// TOP NAV


// MIDDLE

#middle {
  padding: 30px 0;

  .bc-wrapper,
  .pt-wrapper {
    display: none;
  }
}
body.is-home #middle {
  padding: 0;
}

@media @small-screen-only {

  #middle {
    padding: 20px 10px;
  }
}// end #middle

// CONTENT

#content {}

@media @medium-screen-up {

  #content {
    width: 70%;
    float: left;
  }
  #sidebar {
    width: 27.4%;
    padding-right: 2.4%;
    border-right: 1px solid @gray;
    margin-right: 2.4%;
    float: left;
  }

  body.layout-no-sidebar {

    #content {
      width: 100%;
      margin: 0;
      float: none;
    }
    #sidebar {
      display: none;
    }
  }
}

// SIDEBAR

// BOTTOM

#bottom {
  background: @blue;
  color: @white;
  padding: 20px 0;

  a {
    color: @white;
  }

  .social {

    li {
      padding: 0 20px;

      &:after {
        padding: 0;
      }
    }

  }
}

#credits {
  padding: 20px 0;
  text-align: center;

  a {
    color: @black;
  }
}


/* ===============================================
   TOP NAVIGATION
   =============================================== */

#topnav {

}
@media @medium-screen-up {

  #topnav {

    .primary-nav {
      background: @teal;

      ul {
        display: flex;
        justify-content: space-between;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 10px;
        .contain-floats();

        > li {

          > a {
            display: block;
            padding: 10px;
            line-height: 1.2;
            color: @white;
            font-size: 18px;
            font-weight: bold;
            text-transform: uppercase;
            text-decoration: none;
            transition: 1s ease;
            text-align: center;

            &:hover {
              background: @red;
              transform: scale(1.2);
            }
          }
          &.active > a {
            background: @red;
            transform: scale(1.2);
          }
        }
      }
    }
    .secondary-nav {
      //background: #4579bd;
      background: @blue;
      border-top: 3px solid @white;

      > div {
        display: none;
      }

      ul {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 10px;
        .contain-floats();

        > li {
          display: inline-block;
          position: relative;

          > a {
            display: block;
            padding: 20px;
            color: @white;
            text-decoration: none;
          }
        }
      }
    }
  }
}
@media @small-screen-only {

  #topnav {

    .primary-nav {

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

            i {
              display: none;
            }
          }
        }
      }
      .level2 {

        > ul {

          > li {

            > a {
              display: block;
              color: @white;
              background: @teal;
              font-size: 16px;
              .border-radius(0);
              padding: 5px 10px 5px 20px;
              line-height: 1;
            }
          }
        }
      }
    }
    .secondary-nav {
      display: none;
      padding: 5px 10px;
      background: @blue;
      color: @white;

      ul {
        text-align: center;

        li {
          display: inline-block;
          font-size: 14px;
          padding: 0 .75rem;

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

/*
      }
      .level3 {
        width: 200px;
        background: #4579bd;
        position: absolute;
        top: 60px;
        left: -9999px;
        display: none;
        z-index: 9999;

        > ul {

          > li {

            > a {
              display: block;
              padding: 5px 10px;
              color: @white;

            }
          }
        }
      }
      .level2 > ul > li:hover .level3 {
        left: 0;
        display: block;
      }
      > ul > li:not(.active) .level2 {
        display: none;
      }
    }
  }
}
*/
/* ===============================================
   HOMEPAGE
   =============================================== */

body.is-home {

  #content {

    .subfeatures {
      margin-bottom: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid @lighter-gray;
      border-bottom: 1px solid @lighter-gray;

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

    .vid {
      margin-bottom: 1.5rem;

      .flex-container {

        .video {
          border: 2px solid @blue;
        }
        .blurb {

          h2 {
            margin: .25rem;
          }
        }
      }
    }
    
    .events-wrapper {
      margin-bottom: 1.5rem;
      padding-top: 1.5rem;
      //border-top: 1px solid @lighter-gray;
      //border-bottom: 1px solid @lighter-gray;
    
      h2 {
        text-align: center;
      }
      
      .btns {
        text-align: center;
      }
    }

    .partners {
      margin-bottom: 1.5rem;

      h2 {
        text-align: center;
        margin-bottom: .25rem;
      }
    }
  }
}

@media @medium-screen-up {

  body.is-home {

    #content {

      .subfeatures {}

      .vid {

        .flex-container {

          .video {
            flex: 0 0 67%;
            max-width: 67%;
          }
          .blurb {
            flex: 0 0 33%;
            max-width: 33%;
            padding-left: 3%;
          }
        }
      }

      .partners {

        .owl-carousel {

          .listed-item {
            width: 185px;
          }
        }
      }
    }
  }
}

@media @small-screen-only {

  body.is-home {

    #content {

      .subfeatures {

        .img {
          width: 215px;
          margin-left: auto;
          margin-right: auto;
        }
      }

      .vid {

        .flex-container {
          flex-direction: column;
        }
      }
      .partners {
        display: none;
      }
    }
  }
}

/* ===============================================
   PHOTO GALLERY
   =============================================== */

body.photo-gallery {

  .pg-top {

    .img-wrapper {
      background: transparent;

      .img {
        border: 0;

        img {
          display: block;
          margin: 0 auto;
        }
      }
    }
  }
  .pg-thumbs {

    .pg-thumb,
    .pg-thumb.pg-current {
      background: transparent;
    }
  }
}

/* ===============================================
   MAIL FORM ENHANCEMENTS
   =============================================== */

body#story-551 {

  form h2 {
    margin: 1.5rem 0;
  }

  .formrow.which-is-your-primary-home-address,
  .formrow.how-did-you-hear-about-us {
    margin-top: 1.5rem;
  }
}

/* ===============================================
   PAC FORMS
   =============================================== */
   
body.pac-contribution-form {

  form#contribution-form .amounts {
    flex-direction: column;
    
    .formrow {
      margin-bottom: 0;
    
      label {
        width: 70%;
        margin-right: 5%;
      }
    }
  }
}

/* ===============================================
   MARTY'S SHABBAT MESSAGE
   =============================================== */

body#story-779 {

  .archive-list {
  
    .listed-item {
    
      h3.title {
        margin-bottom: 0;
      }
      .teaser {
        margin-bottom: 0;
      }
    }
  }
}

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

.event-listing {
  
  .tmpl-event-search {
  
    .search-results {

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

        &:last-child {
          border: 0;
        }

        .dt {
          margin-right: 30px;
          line-height: 1;

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

        h3.title {
          margin-bottom: @baseline/4;
        }
        .location,
        .date {
          font-style: italic;
        }
      }
    }
  }

  .tmpl-event-details {

    .event-info-summary {

      table th {
        //color: @darkBlue;
        border-right: 1px solid @gray;
      }
    }

    .buttons-wrapper {
      display: flex;

      > div {
        margin-right: 10px;
      }

      .register {

        .button {
          padding: 0 10px;
          border: 0;
          font-family: @fira;
          font-size: 16px;
          line-height: 28px;
          height: 28px;
          text-align: center;
          .border-radius(4px);
        }
      }
    }

    .atc-style-blue .atcb-link,
    .atc-style-blue .atcb-link:hover,
    .atc-style-blue .atcb-link:active,
    .atc-style-blue .atcb-link:focus {
      padding: 0 10px;
      font-family: @fira;
      font-size: 16px;
      text-align: center;
      font-weight: bold;
      height: 28px;
      line-height: 28px;
      background: @red;
      color: @white;
      .border-radius(4px);
      box-shadow: none;
    }

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

    .column-2 .related {

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

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

/* ===============================================
   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: @fira;
      font-size: @font-size;
      line-height: @line-height;
      
      h2 {
        color: @blue;
        font-family: @fira;
        font-size: 1.25rem;
        font-weight: bold;
        
        a {
          color: @blue;
        }
      }
      
      .bcs-caption {
        line-height: @line-height;
      }
    }
  }
}

/* ===============================================
   RT 25204
   =============================================== */

fieldset.tribute-gift {
  
  .formrow.anonymous-gift {
    display: none;
  }
}
.formrow.pledge-payment label {
  font-weight: bold;
  color: @teal;
}

/* ===============================================
   FILM FESTIVAL /filmfestival/
   =============================================== */


body.filmfestival {

  .lp-slider {
    max-width: 1700px;
    padding-inline: 100px;
    margin-inline: auto;
    
    .media {
      margin-block-end: 0;
    }
  }

}
@media @sm-md {

  body.filmfestival {
  
    .lp-slider {
      padding-inline: 0;
    }
  }
}

//// default theme overrides

.owl-carousel .owl-nav {
    position: absolute;
    width: 100%;
    top: calc(50% - 2.5rem);
    left: 0;
    margin: 0;
    
    .owl-next {
        position: absolute;
        right: 1.5rem;
        top: 0;
        font-size: 3rem;
        line-height: 3rem;
        padding: 1rem;
        margin: 0;
        color: var(--white);
        background: var(--dark-gray);
        border-radius: .5rem;

        &:hover {
            color: var(--white);
            background: var(--lighter-gray);
        }
    }
    .owl-prev {
        position: absolute;
        left: 1.5rem;
        top: 0;
        font-size: 3rem;
        line-height: 3rem;
        padding: 1rem;
        margin: 0;
        color: var(--white);
        background: var(--dark-gray);
        border-radius: .5rem;

        &:hover {
            color: var(--white);
            background: var(--lighter-gray);
        }
    }
    
    .media.img {
        margin: 0;
    }
}

@media @lg-up {

    .owl-carousel .owl-nav {
    
        .owl-next {
            right: -5rem;
        }
        .owl-prev {
            left: -5rem;
        }
    }
}
@media @sm-md {
    
    .owl-carousel .owl-nav {
        display: none;
    }
}