compiled.scss

@charset "utf-8";

//  Create a compiled.SCSS file for all sub-themes
//  which imports the respective parent theme's compiled.scss
//  in the cascade AND extends it. This way we ALWAYS have an UP-TO-DATE compiled.CSS imported
//  which includes all finc styles plus all subsequent customizations.
//  [I.e.: finc's compiled.scss imports bootstrap3/scss/compiled.scss and
//  the house-specific branches such as fid_adlr then import finc/scss/compiled.scss
// 0. NOTE TO DEVELOPERS
//    Do NOT EDIT compiled.CSS -- all CSS files should be generated from SCSS files
// 1. KEY VARIABLES and MIXINS
//    Define or re-define KEY VARIABLES and MIXINS in this file (see 1.1 ff below) OR import your own
@import 'customVariables';
@import 'customMixins';
// 1.1 FONTS
// ++ USE EITHER
// ++ ++ font-size: ($font-size-base * 1.5)
// ++ OR
// ++ ++ use the em-calculator function, like so: font-size: em(14)
// 1.2 DO NOT define site-specific colours in finc's SCSS files
//    - this must be done in your site-specific themes
// 2. For Media queries use:
//    Extra small screen / phone: '$screen-xs-max' (=767px);
//    Small screen / tablet: '$screen-sm-min' (=768px);
//    Medium screen / desktop: '$screen-md-min' (=992px) and
//    Large screen / wide desktop: '$screen-lg-min' (=1200px);
//    The MAXimum ranges are defined as the next higher element minus 1px, so:
//    '$screen-xs-max' = $screen-sm-min - 1 etc
//    you can use '$screen-xs-max', '$screen-sm-max' and '$screen-md-max'
// 3. Import finc's compiled.scss to have the variables and mixins defined above applied to it
@import '../../fid/scss/compiled';

// 4. Customize further -- pls. comment and explain
//    PLEASE ORGANIZE YOUR CSS ACCORDING TO THIS GENERAL RULE - keep exceptions to a minimum
//    *, html, body
//    h1, h2, h3, h4, h5, h6,
//    p,
//    address, blockquote, pre,
//    ul, ol, li, dl, dt, dd,
//    table, caption, tr, th, td,
//    form, fieldset, legend, label, select, input, textarea,
//    div,
//    img,
//    a,
//    strong, em, abbr, q, cite, code, kbd, var,
//    span,
//    #id,
//    .class
//    Frequently used classes
//    Custom areas of the theme

//    IDs and classes come last and should (if possible) be ordered according
//    to their appearance on the page, e.g. header, breadcrumbs, main ...

//    Please sort selectors alphabetically, like so
//    .foo {
//       border: 1px solid red;
//       margin-left: 1em;
//       padding: 0 ($grid-gutter-width / 2);
//       width: auto;
//    }
//

// HTML

// BODY
body {
  background-color: $white;
  // set default to OPEN SANS
  font-family: $font-family-sans-serif;
  overflow: hidden;
}

// HEADINGS
h1,
h2,
h3,
h4,
h5 {
  color: $black;
  // set headings to UBUNTU MONO
  font-family: $font-family-monospace;
}

// ++ h1
h1 {
  font-size: em(63px);
  font-weight: bold;
  letter-spacing: em(4.2px);
  line-height: em(69px);
}

// ++ h2
h2 {
  font-size: em(43px);
  font-weight: bold;
  letter-spacing: em(2.87px);
  line-height: em(53px);
}

// ++ h3
h3 {
  font-size: em(30px);
  font-weight: bold;
  line-height: em(34px);
}

// ++ h4
h4 {
  font-size: em(24px);
  font-weight: bold;
  letter-spacing: em(1px);
  text-transform: uppercase;
}

// ++ h5
h5 {
  font-size: em(18px);
  font-weight: bold;
  letter-spacing: em(2px);
  text-transform: uppercase;
}

// HEADINGS - END

// Paragraphs
// ++ p {}
// Paragraphs - END

// LISTS
// ++ ul,
ul {
  list-style-type: none;
  padding-left: 0;
  li {
    color: $asphalt;
  }
}
// ++ ol {}
// ++ li {}
// ++ dl {}
// ++ dt {}
// ++ dd {}
// LISTS - END

// TABLES
table {
  border: 0;
  margin-top: 20px;
  width: 100%;
}

// ++ caption {}
// ++ tr {}
// ++ th {}
// ++ td {}
// TABLES - END

// FORMS
// ++ Fieldsets
// ++ Legend elements
// ++ label {}
// ++ input {}
// ++ Select {}
select {
  height: 60px;
  min-width: 100px;
}
// ++ textarea {}
input,
textarea {
  //border-color: $silver;
  //border-radius: 5px;
}

form input:invalid, form textarea:invalid {
  margin-right: 0;
}

.hidden-lg-only {
  @media (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
    display: none !important;
  }
}
.hidden-sm-lg {
  @media (min-width: $screen-sm-min) and (max-width: $screen-lg-max) {
    display: none !important;
  }
}
.hidden-xl {
  @media (min-width: $screen-xl-min) {
    display: none !important;
  }
}

// FORMS - END

// IMAGES
// img {}
// IMAGES - END

// LINKS
a {
  color: $black;
  outline: none;
  text-decoration: none;
  &:focus {
    outline: none;
  }
  &:hover {
    text-decoration: none;
  }
}

// LINKS - END

// TEXT DECORATION
// strong {}
// em {}
// TEXT DECORATION - END

// Sizing
.flex-box-20 {
  flex-basis: $pagination-flexbox-basis-20-percent;
}
.flex-box-40 {
  flex-basis: calc(2 * #{$pagination-flexbox-basis-20-percent});
}
.flex-box-60 {
  flex-basis: calc(3 * #{$pagination-flexbox-basis-20-percent});
}
.flex-box-80 {
  flex-basis: calc(4 * #{$pagination-flexbox-basis-20-percent});
}
.flex-column-default {
  display: -webkit-flex;
  -webkit-flex-direction: column;
  display: flex;
  flex-direction: column;
}
.flex-column-reverse {
  display: -webkit-flex;
  -webkit-flex-direction: column-reverse;
  display: flex;
  flex-direction: column-reverse;
}
// Sizing - END


// CLASSES (Elements that are used in several places)
// ++ HELPER Classes
.large-text {
  font-size: em(24px);
  line-height: em(45px);
}

.large-text.light {
  color: $asphalt;
}

.small-text {
  color: $asphalt;
  font-size: em(16px);
}

// FIXME: Check for more elegant way to apply colors
.error-color {
  color: $brand-danger;
}

.highlighter-color {
  color: $violet;
}

.primary {
  color: $azure;
}

.secondary {
  color: $seafoam;
}

.warning-color {
  color: $amber;
}

.white {
  color: $white;
}

// ++ HELPER Classes - END

// ++ ALERTS
.alert-danger {
  background: $amber;
  border: $amber;
  color: $black;
  &:hover {
    color: $black;
  }
}

.alert-info, .savedLists.alert.alert-info, .alert-success {
  border: 3px solid $asphalt-dark;
  border-radius: 0;
  color: $state-info-text;
  &:hover,
  &:focus {
    color: $state-info-text;
  }
  a {
    color: $state-info-text;
  }
}
// ++ ALERTS - END

// ++ BUTTONS
.btn-lg {
  @include large-btn;
  &:hover,
  &:focus {
    outline: none;
  }
}

.btn-getitbox {
  @include result-list-btn-getitbox;
  padding: 17px;

  @media screen and (max-width: $screen-xs-max) {

  }
}

// ++ BUTTONS - END

// ICONS
.icon {
  min-width: 30px;
  vertical-align: bottom;
  @media screen and (max-width: $screen-md-max) {
    font-size: $font-size-h3;
    font-weight: 500;
    min-width: 35px;
  }
}
.icon.icon-settings {
  font-size: $font-size-large;
}

.btn-primary .icon {
  float: right;
  font-size: calc(#{$font-size-base} * 1.5);
}
// ICONS - END

// ++ DROPDOWNS
.dropdown-menu {
  @include basic-dropdown-menu;
}

.dropdown-menu-parent {
  // needed for nested dropdown - hack for js of bootstrap 3
  @extend .dropdown-menu;
  @media screen and (max-width: $screen-xs-max) {
    width: 100%;
    .searchForm {
      max-width: $screen-md-max;
      width: 100%;
      .form-control {
        max-width: $screen-md-max;
        width: 100%;
      }
    }
  }
}
// ++ DROPDOWNS - END

// ++ MODALS
// ++ MODALS - END

// PAGE ELEMENTS (Top --> Down) ++
// ++ HEADER
// ++++ Header width reset.
header {
  background-position: right top;
  background-repeat: no-repeat;

  &.collapse:not(.in), &.collapsing {
    display: block;
  }

  @media screen and (max-width: $screen-xs-max) {
    margin-bottom: $content-bottom-padding;
  }

  @media screen and (max-width: $screen-md-max) {
    &.collapse:not(.in), &.collapsing {
      min-height: $navbar-header-height;
    }
  }

  @media screen and (min-width: $screen-lg-min) {
    background-image: url('../images/header-bg-lg.png');
  }
}

header,
.navbar,
.breadcrumbs {
  background-color: transparent;
  border: 0;
  // FIXME: REMOVE, when 15639 has been merged to finc
  width: auto;

  .menubar {
    @include noselect;
    box-sizing: border-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: -webkit-box;
    display: inline-flex;
    justify-content: flex-end;
    padding-right: 10px;
    width: 100%;
    z-index: z-index(menubar, 0);

    // ++++++  disable transitions for menu
    .collapsed, &.collapsed {
      transition: none !important;
      transition-delay: $transition-delay !important;
      transition-duration: $transition-duration !important;
    }

    .collapsing, &.collapsing {
      background: transparent;
      height: auto !important;
      transition: none !important;
      transition-delay: $transition-delay !important;
      transition-duration: $transition-duration !important;
    }

    .collapse, &.collapse {
      transition: none !important;
      transition-delay: $transition-delay !important;
      transition-duration: $transition-duration !important;
    }

    .collapse.in, &.collapse.in {
      transition: none !important;
      transition-delay: $transition-delay !important;
      transition-duration: $transition-duration !important;
    }

    .fill-flex {
      flex-grow: 2;
      flex-shrink: 1;
    }
    .language {
      .dropdown-menu {
        @include basic-dropdown-menu;
        left: 10px;
        min-width: 100px;
        @media (max-width: $mobile-navigation-menu-breakpoint) {
          @include shift-main-menu-entries-to-navigation-overlay;
          top: calc(#{$navbar-header-height} + 4 * #{$line-height-submenu} + 2 * #{$content-top-padding});
        }
        @media (min-width:$screen-sm-min) and (max-width:$screen-md-max) {
          left: calc(#{$logo-max-width} / 2 + #{$navbar-margin-left});
          top: calc(#{$navbar-header-height} + 5 * #{$line-height-submenu} + 5 * #{$navbar-default-padding});
          .btn {
            font-size: calc(#{$font-size-menu-sm} - 15px);
          }
        }
        @media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
          border: 2px solid $asphalt;
          left: 0;
          letter-spacing: 2.87px;
          top: 64px;
        }
        li > a {
          padding: 3px 5px;
          text-align: left;
          @media (max-width: $mobile-navigation-menu-breakpoint) {
            padding: 0;
          }
          @media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
            font-family: $font-family-monospace;
            font-size: $font-size-menu-lg;
            padding: 0 $navbar-default-padding;
          }
        }
      }
    }
    .register .navbar-header-link {
      @media (max-width: $mobile-navigation-menu-breakpoint) {
        @include shift-main-menu-entries-to-navigation-overlay;
        top: calc(#{$navbar-header-height} + 5 * #{$line-height-submenu} + #{$content-top-padding});
        :hover {
          background: $seafoam;
        }
      }
      @media (min-width:$screen-sm-min) and (max-width:$screen-md-max) {
        font-size: calc(#{$font-size-menu-sm} - 15px);
        left: calc(#{$logo-max-width} / 2 + #{$navbar-margin-left});
        top: calc(#{$navbar-header-height} + 6 * #{$line-height-submenu} + 5 * #{$navbar-default-padding});
      }
    }
  }

  // override finc display block
  .collapse.in {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: -webkit-box;
    display: inline-flex;
  }
  .collapsing, &.collapsing {
    transition-duration: $transition-duration !important;
    transition: unset  !important;
  }
}

.header-menu-collapse {
  @extend .navbar-header;
  @media (min-width: $screen-lg-min) {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: -webkit-box;
    display: inline-flex;
    &.collapse.in {
      &#submenu {
        position: absolute;
        z-index: z-index(navigation-overlay, 0);
      }
      .submenu-collapse {
        position: absolute;
        top: $navbar-header-height-home-sm;
      }
    }
  }

  &.collapse:not(.in) {
    .submenu-collapse {
      background: $white;
      height: 0;
      padding: 0;
      visibility: hidden;
      width: 0;
    }
  }

  &.collapse.in, &.collapsing {
    .submenu-collapse {
      @include navigation-overlay;
      @media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
        position: absolute;
      }
    }
  }
}

//// Define header navbar on mobile
.header-menu-collapse.collapsing {
  padding: 0;

  .submenu-collapse {
    @media (max-width: $screen-sm-max) {
      background-color: $white;
      padding: 0;
    }
  }
}

//// Display different icons after open or close of submenues
header.collapse.in .menubar .text-close, .dropdown.sbox-dd:not(.open) .text-close, .language:not(.open) .icon.icon-chevron-up {
  display: none;
}

header.collapse:not(.in) .menubar .text-open, header.collapsing .text-open, .dropdown.sbox-dd.open .text-open, .language.open .icon.icon-chevron-down {
  display: none;
}

#submenuToggler {
  @media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
    min-width: 125px;
  }
}

.navbar-header {
  flex-shrink: 0;
  // position of navbar-brand Logo on top left
  .navbar-brand {
    border: 0;
    left: 0;
    outline: none;
    position: absolute;
    top: 31px;
    z-index: z-index(navbar-brand, 1);
  }

  @media screen and (max-width: $screen-md-max) {
    background-color: $white;
    height: $navbar-header-height;
    padding: 30px 0 20px;

    .navbar-toggle {
      color: $brand-primary;
      // for middle-alignment
      padding: 0;
    }

    &:not(.collapse) {
      display: -webkit-inline-flex;
      display: -ms-inline-flexbox;
      display: -webkit-box;
      display: inline-flex;
    }
  }
}

.navbar-header-link {
  @extend .navbar-toggle;
  display: inherit;
  margin-right: 0;
  z-index: z-index(navbar-header-link, 0);
  @media screen and (min-width: $screen-lg-min) {
    @include default-navbar-link-font;
  }
}

// ++++ Banner, Logo and home link
.banner {
  width: 100%;
  z-index: z-index(banner, 0);

  @media screen and (max-width: $screen-xs-min) {
    margin-left: 0;
    margin-right: 0;
  }

  &.container {
    padding-left: 0;
    padding-right: 0;

    @media screen and (min-width: $screen-lg-min) {
      border-radius: 0;
      padding-left: $navbar-default-padding;
      padding-top: $navbar-default-padding;
    }

    // Logo position
    .navbar-brand {
      margin-left: $navbar-margin-left;
      z-index: z-index(navbar-brand, 0);
    }

    // Menu toggler position
    .navbar-toggle {
      margin-right: em(5px);
      padding-left: em(15px);
      @media screen and (min-width: $screen-sm-min) {
        padding-left: em(25px);
      }
      @media screen and (min-width: $screen-lg-min) {
        padding-left: em(10px);
      }
      @media screen and (min-width: $screen-xl-min) {
        margin-right: em(6px);
        padding-left: em(3px);
      }
    }
  }
}

.navbar-brand {
  // DEFINE BG IMAGE
  // $screen-xs-max = 767px
  // Fallback image IE & Co
  background: url('../images/logo.png') no-repeat;
  // SVG (modern browsers), linear-gradient used to pick out browsers that support SVG
  background: url('../images/logo.svg') no-repeat, linear-gradient(transparent, transparent);
  background-size: contain;
  color: transparent;
  min-height: em(56px); // FIX for Safari + Android Stock Browser
  min-width: 180px; // FIX for Safari + Android Stock Browser - ATTN! might kill visibility in IE11
  max-width: $logo-max-width;

  // 768px and up
  @media screen and (min-width: $screen-sm-min) {
    // Fallback image IE & Co
    background: url('../images/logo.png') no-repeat;
    // SVG (modern browsers), linear-gradient used to pick out browsers that support SVG
    background: url('../images/logo.svg') no-repeat, linear-gradient(transparent, transparent);
    background-size: contain;
    display: inline-block !important; // FIX for Safari + Android Stock Browser - ATTN! might kill visibility in IE11
  }

  // 992px and up
  @media screen and (min-width: $screen-lg-min) {
    // Fallback image IE & Co
    background: url('../images/logo.png') no-repeat;
    // SVG (modern browsers), linear-gradient used to pick out browsers that support SVG
    background: url('../images/logo.svg') no-repeat, linear-gradient(transparent, transparent);
    display: inline-block !important; // FIX for Safari + Android Stock Browser - ATTN! might kill visibility in IE11
    // Collapsed navbar height in fid_adlr = 134px
    height: em(134px);
    min-height: em(134px); // FIX for Safari + Android Stock Browser
    min-width: em(266px) !important; // FIX for Safari + Android Stock Browser - ATTN! might kill visibility in IE11
  }

  // hide home link for non-visually impaired to show logo only
  a,
  &:hover,
  &:focus {
    color: transparent;
  }
}
// ++++ Logo and home link - END

// ++++++ basic default (non start page)
body:not(.template-name-home) {
  header {
    @media screen and (max-width: $screen-md-max) {
      margin-bottom: calc(#{$navbar-header-height} + #{$search-input-height-fixed} + 35px);
    }

    .headline, .home-links {
      display: none;
    }

    @media screen and (min-width: $screen-lg-min) {
      background-image: url('../images/header-bg-lg-mirror-stretched.png');
      background-position: 100% 70%;
      height: $default-header-height-lg; // needed for background image effect
    }

    // ++++++  Navbar in affix mode
    .navbar.affix:not(.search) {
      border: 0;

      @media screen and (min-width: $screen-lg-min) {
        @include default-background-lg;
        height: em($navbar-header-height-affix-lg);
      }
    }
    // ++++++  Navbar in affix mode - END

    .navbar.affix-top {
      position: fixed;
    }

    .search {
      // always use fixed search on default sites
      @include fixed-navbar-search;

      &.affix-top {
        .searchbox {
          @media screen and (min-width: $screen-sm-min) {
            background: $azure;
          }
          @media screen and (min-width: $screen-lg-min) {
            height: 130px;
          }
          @media screen and (min-width: 1200px) and (max-width: 1250px) {
            background: transparent;
          }
        }
      }
    }
    // search (box) and elements in affix mode - END
  }
}
// ++++++ basic default - END

// ++++ Start Page
.template-name-home {
  .main {
    @include default-background;
    @media screen and (max-width: $screen-xs-max) {
      background-image: url('../images/header-bg-xs.png');
      background-position: 100% 0px;
      background-size: auto;
    }

    @media screen and (min-width: $screen-sm-min) {
      background-image: url('../images/header-bg-sm.png');
      background-position: 100% #{$navbar-header-height-home-sm};
      min-height: em($navbar-header-height-home-sm);
    }

    @media screen and (min-width: $screen-md-min) {
      background-image: url('../images/header-bg-md.png');
    }

    @media screen and (min-width: $screen-lg-min) {
      background-image: url('../images/header-bg-lg.png'),
      url('../images/background-shape-left.svg'),
      url('../images/background-shape-right.svg');
      background-position: 100% -#{$navbar-header-height-home-sm},
      center left,
      bottom right;
      background-repeat: no-repeat;
    }
  }
  header {
    .affix-top {
      position: relative; // ignore affix header on start page
      .menubar {
        @media screen and (max-width: $screen-md-max) {
          background: $white;
          padding-right: 10px;
          position: fixed; // but not for mobile devices
        }
      }
    }
    .affix {
      position: relative; // ignore affix header on start page
      .menubar {
        @media screen and (max-width: $screen-md-max) {
          background: $white;
          padding-right: 10px;
          position: fixed; // but not for mobile devices
        }
      }
    }
    @media screen and (min-width: $screen-lg-min) {
      .container.navbar {
        padding-right: em(20px);
      }
    }
  }
  .home-text {
    border: 0;
    color: $brand-secondary;

    .home-links {
      display: block;
      position: relative;
      top: calc(#{$home-text-box-height-lg} - 25px);
    }

    &.container {
      margin-left: 0;
      padding-left: 0;
      @media screen and (max-width: $screen-xs-max) {
        height: $home-text-box-height-xs;
        padding-bottom: $home-text-bottom-padding-xs;
        padding-top: $home-text-top-padding-xs;
        .home-links {
          display: none;
        }
      }

      @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
        height: $home-text-box-height-sm;
        padding-bottom: $home-text-bottom-padding-sm;
        padding-top: $home-text-top-padding-sm;
        .home-links {
          display: none;
        }
      }

      @media screen and (min-width: $screen-lg-min) {
        height: $home-text-box-height-lg;
        margin-left: $home-text-left-margin-lg;
        padding-bottom: $home-text-bottom-padding-lg;
        padding-top: $home-text-top-padding-lg;
      }
    }

    @media screen and (max-width: $screen-xs-max) {
      // Add correct data for font-size, letter-spacing, lineheight, texttransform
      @include default-headings-font(26px, 1.7px, 36px, none);
      margin-right: 5%;
      max-width: calc(#{$screen-xs-max} / 2);
    }

    @media screen and (min-width: $screen-sm-min) {
      // $font-size, $letter-spacing, $lineheight, $texttransform
      @include default-headings-font(40px, 3.27px, 50px, none);
      margin-bottom: 70px;
      margin-right: 0;
      margin-top: calc(#{$navbar-header-height} + 50px);
      padding-left: 0;
      padding-right: 0;
      text-align: left;
      width: 85%;
    }

    @media screen and (min-width: $screen-md-min) {
      // $font-size, $letter-spacing, $lineheight, $texttransform
      width: 80%;
    }

    @media screen and (min-width: $screen-lg-min) {
      // $font-size, $letter-spacing, $lineheight, $texttransform
      @include default-headings-font(63px, 4.27px, 69px, none);
      margin-top: $navbar-header-height;
      text-align: right;
    }
  }

  .search.container.navbar {
    position: absolute;
    @media screen and (max-width: $screen-xs-max) {
      // $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
      @include searchbox-toggler-and-content-styles(none, block, false, false, 'mobile');
      padding-right: 0;
      top: $home-text-box-height-xs;
      width: 100%;
    }

    @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
      // $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
      @include searchbox-toggler-and-content-styles(none, none, true, false, 'desktop');
      top: $home-text-box-height-sm;
      width: 100%;
    }

    @media screen and (min-width: $screen-lg-min) {
      // $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
      @include searchbox-toggler-and-content-styles(none, none, true, false, 'desktop');
      left: 15%;
      top: $home-text-box-height-lg;
    }
  }
}
// ++++ Start Page - END

// ++++ SEARCH BOX
.search.container {
  background-color: transparent;
  border: 0;
  padding-top: 0;
  z-index: z-index(search, 0);

  @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
    padding-left: $search-padding-sm-md;
    padding-right: $search-padding-sm-md;
  }

  &.collapse.in {
    display: inherit;
  }

  &.collapsing {
    display: none;
    transition: none !important;
  }

  .sbox-dd-menu {
    background-color: transparent;
    border: 0;
    margin-top: 0;
    z-index: z-index(sbox-dd-menu, 0);
    @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
      width: $search-panel-width-xs-md;
    }
  }

  .searchbox {
    // Outer Box
    background-color: $brand-primary;
    height: em($search-form-height-xs);
    padding: 30px 20px;

    @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
      height: em($search-form-height-sm);
      max-width: unset;
      padding: 35px 20px 55px 50px;
      width: $search-form-width-sm;
    }

    @media screen and (min-width: $screen-lg-min) {
      height: em($search-form-height-lg);
      padding: 55px 20px 55px 50px;
      width: $search-form-width-home-lg;
    }

    @media screen and (min-width: $screen-xl-min) {
      padding: 55px 20px 55px 50px;
      width: $search-form-width-home-xl;
    }
    // Outer Box - END
  }

  .searchForm {
    display: inline-block;
    ul.dropdown-menu-parent > li {
      width: 100%;
    }

    @media screen and (max-width: $screen-xs-max) {
      .navbar-left {
        margin-bottom: 0;
      }
      label {
        font: $font-family-sans-serif;
        min-width: 90%;