@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,700");

@font-face {
  font-family: 'font';
  src: url('https://cutx.org/plugins/megamenu/fonts/ionicons.eot');
  src: url('https://cutx.org/plugins/megamenu/fonts/ionicons.eot?#iefix') format('eot'),
    url('https://cutx.org/plugins/megamenu/fonts/ionicons.woff') format('woff'),
    url('https://cutx.org/plugins/megamenu/fonts/ionicons.ttf') format('truetype'),
    url('https://cutx.org/plugins/megamenu/fonts/ionicons') format('svg');
  font-weight: 400;
  font-style: normal;
}

$blue:        #3184cb;
$orange:      #f47920;
$green:       #81bd41;
$red:         #cf202e;
$ease-fast:   300ms ease-in-out;
$breakpoint:  959px; // DEFAULT: 959px

// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
//
// # START DEFAULT STYLES
//
// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
/*
- Name: megamenu.js - style.css
- Version: 1.0
- Latest update: 29.01.2016.
- Author: Mario Loncarek
- Author web site: http://marioloncarek.com
*/


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Screen style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.HeaderRight {
  float: right;
  text-align: inherit !important;
  margin-top: 23px;
  height: auto !important;
  min-width: inherit !important;
}

.menu-container {
    width: 80%;
    margin: 0 auto;
    background: #e9e9e9;
    position: relative;
    z-index: 9999999999999;
}

.menu-mobile {
    display: none;
    padding: 20px;
}

.menu-mobile:after {
    content: "\f0c9";
    // http://fontawesome.io/icon/bars/
    font-family: "FontAwesome";
    font-size: 2.5rem;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}

.menu-dropdown-icon:before {
    content: "\f0d7";
    // http://fontawesome.io/icon/caret-down/
    font-family: "FontAwesome";
    display: none;
    cursor: pointer;
    float: right;
    padding: 1.5em 2em;
    background: #fff;
    color: #333;
}

.menu > ul {
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    box-sizing: border-box;
}

.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table;
}

.menu > ul:after {
    clear: both;
}

.menu > ul > li {
    float: left;
    background: #e9e9e9;
    padding: 0;
    margin: 0;
}

.menu > ul > li a {
    text-decoration: none;
    padding: 1.5em 3em;
    display: block;
}

.menu > ul > li:hover {
    background: #f0f0f0;
}

.menu > ul > li > ul {
    display: none;
    width: 100%;
    background: #f0f0f0;
    padding: 20px;
    position: absolute;
    z-index: 99;
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
    width: 25%;
    background: none;
    float: left;
}

.menu > ul > li > ul > li a {
    color: #777;
    padding: .2em 0;
    width: 95%;
    display: block;
    border-bottom: 1px solid #ccc;
}

.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li > ul > li {
    float: left;
    width: 100%;
    padding: 10px 0;
    margin: 0;
    font-size: .8em;
}

.menu > ul > li > ul > li > ul > li a {
    border: 0;
}

.menu > ul > li > ul.normal-sub {
    width: 300px;
    left: auto;
    padding: 10px 20px;
}

.menu > ul > li > ul.normal-sub > li {
    width: 100%;
}

.menu > ul > li > ul.normal-sub > li a {
    border: 0;
    padding: 1em 0;
}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (max-width: $breakpoint) {
  .menu-container {
      width: 100%;
  }
  .menu-mobile {
      display: block;
  }
  .menu-dropdown-icon:before {
      display: block;
  }
  .menu > ul {
      display: none;
  }
  .menu > ul > li {
      width: 100%;
      float: none;
      display: block;
  }
  .menu > ul > li a {
      padding: 1.5em;
      width: 100%;
      display: block;
  }
  .menu > ul > li > ul {
      position: relative;
  }
  .menu > ul > li > ul.normal-sub {
      width: 100%;
  }
  .menu > ul > li > ul > li {
      float: none;
      width: 100%;
      margin-top: 20px;
  }
  .menu > ul > li > ul > li:first-child {
      margin: 0;
  }
  .menu > ul > li > ul > li > ul {
      position: relative;
  }
  .menu > ul > li > ul > li > ul > li {
      float: none;
  }
  .menu .show-on-mobile {
      display: block;
  }
}
// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
//
// # END DEFAULT STYLES
//
// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

.menu-container {
  width: 100%;
  background: #ccc;
  font-family: Montserrat, "Arial", sans-serif;
  font-weight: 400;

  a {
      color: #333;
  }

  & .mmInvert a {
    color: #fff;
  }

  & .menu > ul > li > ul {

  }

  // & .mmSubHeader {
  //   padding-bottom: 10px;
  //   border-bottom: 1px solid #fff;
  //   width: 90%;
  // }

  & #mmLogo {
    background: #fff;
    display: none;
    &:hover, &:focus {
      background: #fff;
    }
    & a {
      text-align: center;
      padding: 1.5em 1.5em;
    }
    & img {
      max-width: 200px;
    }
  } // end .mmLogo

  & .menu-dropdown-icon {

  }

  & #mmBlue {
    background: $blue;
    // &:hover, &:focus {
    //   background: mix(black, $blue, 25%);
    // }
    & > ul {
      background: $blue;
      & li a:hover, & li a:focus {
        color: mix(black, $blue, 65%);
      }
    }
  }

  & #mmOrange {
    background: $orange;
    // &:hover, &:focus {
    //   background: mix(black, $orange, 25%);
    // }
    & > ul {
      background: $orange;
      & li a:hover, & li a:focus {
        color: mix(black, $orange, 50%);
      }
    }
  }

  & #mmGreen {
    background: $green;
    // &:hover, &:focus {
    //   background: mix(black, $green, 25%);
    // }
    & > ul {
      background: $green;
      & li a:hover, & li a:focus {
        color: mix(black, $green, 50%);
      }
    }
  }

  & #mmRed {
    background: $red;
    // &:hover, &:focus {
    //   background: mix(black, $red, 25%);
    // }
    & > ul {
      background: $red;
      & li a:hover, & li a:focus {
        color: mix(black, $red, 50%);
      }
    }
  }

  & #mmLocations, & #mmInfo {
    & > ul {
      & li a:hover, & li a:focus {
        color: mix(white, #777, 45%);
      }
    }
  }

  // -----------------------------------------
  // # ICONS
  // -----------------------------------------

  // -----------------------------------------
  // # useIt
  & #useIt {
    &:before {
      content: "\f19c";
      // http://fontawesome.io/icon/university/
      font-family: FontAwesome;
      margin-right: 10px;
    }
  }

      // -----------------------------------------
      // ## useIt - sub items
      #secureChecking {
        &:before {
          content: "\f046";
          // http://fontawesome.io/icon/check-square-o/
          font-family: FontAwesome;
        }
      }

      #atmCards {
        &:before {
          content: "\f09d";
          // http://fontawesome.io/icon/credit-card/
          font-family: FontAwesome;
        }
      }

      #digitalBanking {
        &:before {
          content: "\f10b";
          // http://fontawesome.io/icon/mobile/
          font-family: FontAwesome;
          font-size: 20px;
        }
      }

      #digitalBankingResources {
        &:before {
          content: "\f085";
          // http://fontawesome.io/icon/cogs/
          font-family: FontAwesome;
        }
      }

      #cutxPerks {
        &:before {
          content: "\f067";
          // http://fontawesome.io/icon/plus/
          font-family: FontAwesome;
        }
      }



  // -----------------------------------------
  // # getIt
  & #getIt {
    &:before {
      content: "\f25a";
      // http://fontawesome.io/icon/hand-pointer-o/
      font-family: FontAwesome;
      margin-right: 10px;
    }
  }

      // -----------------------------------------
      // ## getIt - subt items
      #homeLoans {
        &:before {
          content: "\f015";
          // http://fontawesome.io/icon/home/
          font-family: FontAwesome;
        }
      }

      #personalLoans {
        &:before {
          content: "\f290";
          // http://fontawesome.io/icon/shopping-bag/
          font-family: FontAwesome;
        }
      }

      #creditCards {
        &:before {
          content: "\f09d";
          // http://fontawesome.io/icon/credit-card/
          font-family: FontAwesome;
        }
      }

      #loanPromotions {
        &:before {
          content: "\f151";
          // http://fontawesome.io/icon/caret-square-o-up/
          font-family: FontAwesome;
        }
      }

      #creditCardPromotions {
        &:before {
          content: "\f005";
          // http://fontawesome.io/icon/star/
          font-family: FontAwesome;
        }
      }

      #buildItRebuildIt {
        &:before {
          content: url('https://cutx.org/uploads/dropdown/menuIcon-buildIt.png');
          position: relative;
        }
        // &:before {
        //   content: "\f135";
        //   // http://fontawesome.io/icon/rocket/
        //   font-family: FontAwesome;
        // }
      }



  // -----------------------------------------
  // # saveIt
  & #saveIt {
    &:before {
      content: "\f0d6";
      // http://fontawesome.io/icon/money/
      font-family: FontAwesome;
      margin-right: 10px;
    }
  }

      // -----------------------------------------
      // ## saveIt - sub items
      #savingsAccounts {
        &:before {
          content: "\f19c";
          // http://fontawesome.io/icon/university/
          font-family: FontAwesome;
        }
      }

      #investments {
        &:before {
          content: "\f201";
          // http://fontawesome.io/icon/line-chart/
          font-family: FontAwesome;
        }
      }



  // -----------------------------------------
  // # driveIt
  & #driveIt {
    &:before {
      content: "\f1b9";
      // http://fontawesome.io/icon/car/
      font-family: FontAwesome;
      margin-right: 10px;
    }
  }

      // -----------------------------------------
      // ## driveIt - sub items
      #autoRefinance {
        &:before {
          content: "\f013";
          // http://fontawesome.io/icon/cog/
          font-family: FontAwesome;
        }
      }

      #autoLoans {
        &:before {
          content: "\f155";
          // http://fontawesome.io/icon/usd/
          font-family: FontAwesome;
        }
      }

      #fairLease {
        &:before {
          content: url('https://cutx.org/uploads/dropdown/menuIcon-fairlease.png');
          background: no-repeat center center;
          position: relative;
          width: 20px;
          height: 15px;
          overflow: visible;
        }
      }

      #autoMarket {
        &:before {
          content: "\f064";
          // http://fontawesome.io/icon/share/
          font-family: FontAwesome;
        }
      }

      #specialAuto {
        &:before {
          content: "\f132";
          // http://fontawesome.io/icon/shield/
          font-family: FontAwesome;
        }
      }



  // -----------------------------------------
  // # Locations
  & #mmLocations {
    & span:before {
      content: "\f041";
      // http://fontawesome.io/icon/map-marker/
      font-family: FontAwesome;
      margin-right: 10px;
    }
  }

  // -----------------------------------------
  // # Info
  & #mmInfo {
    & span:before {
      content: "\f05a";
      // http://fontawesome.io/icon/info-circle/
      font-family: FontAwesome;
      margin-right: 10px;
    }
  }
  
  // -----------------------------------------
  // # Info
  & #mmSearch {
    & span:before {
      content: "\f002";
      // http://fontawesome.io/icon/search/
      font-family: FontAwesome;
      margin-right: 10px;
    }
  }



  // -----------------------------------------
  // # mmLocations, mmInfo
  & .menu > ul > li {
    background: #ccc;
    &:hover, &:focus {
      background: #f0f0f0;
    }
  }


  // -----------------------------------------
  // # Locations
  & .mmCallStore {
    &:before {
      content: "\f095";
      // http://fontawesome.io/icon/phone/
      font-family: FontAwesome;
      margin-right: 10px;
    }
  }

  & .mmDirections {
    &:before {
      content: "\f041";
      // http://fontawesome.io/icon/map-marker/
      font-family: FontAwesome;
      margin-right: 10px;
    }
  }


  // -----------------------------------------
  // # External Links
  & .mmExternal {
    &:before {
      content: "\f08e";
      // http://fontawesome.io/icon/external-link/
      font-family: FontAwesome;
      font-size: 14px;
      float: left;
      margin: 2px 10px 20px 0;
    }
  }


  // -----------------------------------------
  // # External Links Note
  // & .mmNote {
  //   &:after {
  //     content: "NOTE: Links marked with a '\f08e\'/ icon means the link will take you off CUTX.org.";
  //     color: #777;
  //     font-family: sans-serif;
  //     font-size: 11px;
  //     font-weight: normal;
  //     letter-spacing: 1px;
  //     text-align: center;
  //     text-transform: uppercase;
  //     width: 100%;
  //     position: relative;
  //     padding: 2em 0 1em;
  //   }
  // }


  & .mmSubIcon {
    position: relative;
    top: -1px;
    margin: 0 10px 0 0;
    float: left;
    width: 15px;
  }

  & .mmDescription {
    padding: 10px 20px 10px 0;
    line-height: 1.5;
  }

  & .menu-dropdown-icon:before {
    background: rgba(0,0,0,.45);
    color: #fff;
  }

  & .menu-container .menu > ul > li:hover,
  & .menu-container .menu > ul > li:focus {
    background: rgba(0,0,0,.45);
  }

  & .menu-dropdown-icon > a {
    padding: 1.5em;
  }

  & .menu-mobile:after {
    top: -3px;
  }
}


@media only screen and (max-width: $breakpoint) {
  .menu-container {
    & .mmSubHeader {
      border-bottom: 1px solid rgba(0,0,0,.15);
      padding-bottom: 20px !important;
      &:last-child {
        border-bottom: 0;
        padding-bottom: 10px !important;
      }
    }

    & .menu-dropdown-icon {
      border-bottom: 1px solid rgba(250,250,250,.75);
      &:last-child {
        border-bottom: 0;
      }
    }

    & #mmLogo {
      display: block !important;
    }

    & .menu-mobile {
      text-decoration: none;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: .75px;
    }
  }

  // swap menu FontAwesome icons on click
  .mmOpen {
    &:after {
      content: "\f00d";
      // http://fontawesome.io/icon/times/
      font-family: FontAwesome;
      font-size: 2.4rem;
    }
  }

  .mmSubOpen {
    &:before {
      content: "\f0d8";
      // http://fontawesome.io/icon/caret-up/
      font-family: FontAwesome;
    }
  }
}

#inline_content {
  width: 100%;
  // max-width: 300px;
  // height: 100%;
  // max-height: 100px;
  padding: 20px;
  
  & .sc_searchbar3 {
    padding: 10px;
    margin: 0 auto 10px;
    width: 295px;
  }
  
  & .sc_submit3 {
    padding: 10px;
    margin: 0 auto;
    width: 320px;
  }
}