/* ==========================================================================
Base colors
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. Variables for colors
 *  2.
 *  3. 
 *  4.
 *  5.
 *  6.
 *  7.
 *  8.
 *  9.
 *  10. 
 *  11.
 *  12.
 *  13.
 *  14.
 *  15.
 *  16.
 *  17.
 *  18.
 *  19.
 *  20.
 *  21.
 *  22.
 *  23.
 *  24.
 */
/* 1. Variables for colors
   ========================================================================== */
/* ==========================================================================
Base Mixins
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. Variables for colors
 *  2.
 *  3. 
 *  4.
 *  5.
 *  6.
 *  7.
 *  8.
 *  9.
 *  10. 
 *  11.
 *  12.
 *  13.
 *  14.
 *  15.
 *  16.
 *  17.
 *  18.
 *  19.
 *  20.
 *  21.
 *  22.
 *  23.
 *  24.
 */
/* 1. Mixins
   ========================================================================== */
/*when used ALLWAYS use in this order 
       @include phones {
                bottom: 117px;
            }

            @include tablets {
                bottom: 190px;
            }

            @include desktops {
                bottom: 300px;
            }
*/
/* ==========================================================================
Base colors
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. Variables for colors
 *  2.
 *  3. 
 *  4.
 *  5.
 *  6.
 *  7.
 *  8.
 *  9.
 *  10. 
 *  11.
 *  12.
 *  13.
 *  14.
 *  15.
 *  16.
 *  17.
 *  18.
 *  19.
 *  20.
 *  21.
 *  22.
 *  23.
 *  24.
 */
/* 1. Variables for colors
   ========================================================================== */
/* ==========================================================================
Base utility
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. Variables for font-family 
 *  2. Other variables
 *  3. Animations
 *  4. Shadows
 *  5.
 *  6.
 *  7.
 *  8.
 *  9.
 *  10. 
 *  11.
 *  12.
 *  13.
 *  14.
 *  15.
 *  16.
 *  17.
 *  18.
 *  19.
 *  20.
 *  21.
 *  22.
 *  23.
 *  24.
 */
/* 1. Variables for font-family
   ========================================================================== */
/* 2. Other variables
   ========================================================================== */
/*sizes*/
/*input, select*/
/*Buttons*/
/*$button-min-width: 50px;*/
/*$button-max-width: 130px;*/
/*$button-min-width-small: $input-select-height;*/ /*same as $button-min-height*/
/*$button-background-color: $blue;*/
/* 3. animations
   ========================================================================== */
/*Buttons*/
/* ==========================================================================
Base large menu
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. vars
 *  2. base-large-menu-wrapper
 *  3. drop-down
 *  4. base-large-menu-checkout-wrapper
 *  5.
 *  6.
 *  7.
 *  8.
 *  9.
 *  10. 
 *  11.
 *  12.
 *  13.
 *  14.
 *  15.
 *  16.
 *  17.
 *  18.
 *  19.
 *  20.
 *  21.
 *  22.
 *  23.
 *  24.
 */
/* 1. vars
   ========================================================================== */
/*set the size, will also effect the center menu margin*/
/*set the size, will also effect the sub menu margin*/
/* 2. base-large-menu-wrapper
   ========================================================================== */
.base-large-menu-wrapper .base-top-menu {
  background: #0077aa;
  min-height: 25px;
  position: fixed;
  width: 100%;
  z-index: 5;
  /*.shopping-wish-cart-count {
          ul {
              margin-bottom: 0;
          }
      }*/
}
@media only screen and (max-width: 767px) {
  .base-large-menu-wrapper .base-top-menu {
    height: 60px;
  }
}
.base-large-menu-wrapper .base-top-menu ul {
  padding: 0;
  text-align: right;
  margin-bottom: 7px;
}
.base-large-menu-wrapper .base-top-menu ul li {
  display: inline;
  padding-left: 25px;
  background-image: url("../../graphics/arrow-blue-down.png");
  background-position: right 0 center;
  background-repeat: no-repeat;
  margin-left: 15px;
  padding-right: 18px;
  margin-right: 18px;
}
.base-large-menu-wrapper .base-top-menu ul li a {
  color: #80cff1;
}
.base-large-menu-wrapper .base-top-menu ul li a:hover {
  color: #80cff1;
}
.base-large-menu-wrapper .base-top-menu ul .select-list select {
  float: right;
  width: auto;
  height: 20px;
  border: 0;
  padding-right: 20px;
}
.base-large-menu-wrapper .base-center-menu {
  padding-top: 17px;
  position: fixed;
  min-height: 70px;
  background: #009fe3;
  margin-top: 25px;
  width: 100%;
  z-index: 5;
}
.base-large-menu-wrapper .base-center-menu img {
  /*width: 100%;*/
  max-width: 100%;
}
.base-large-menu-wrapper .base-center-menu p {
  color: #edf2f3;
  font-size: 1.429em;
  padding-top: 3px;
}
.base-large-menu-wrapper .base-sub-menu {
  width: 100%;
  position: fixed;
  background: #009fe3;
  min-height: 45px;
  margin-top: calc( 70px + 25px);
  margin-top: -webkit-calc( 70px + 25px);
  margin-top: -moz-calc( 70px + 25px);
  z-index: 4;
}
.base-large-menu-wrapper .base-sub-menu ul.menu-items {
  padding: 0;
  display: inline-block;
  margin-left: -10px;
}
.base-large-menu-wrapper .base-sub-menu ul.menu-items li {
  display: inline;
  padding: 4px 0px 4px 0px;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.base-large-menu-wrapper .base-sub-menu ul.menu-items li a {
  padding: 4px 20px 4px 10px;
  font-size: 1.286em;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.base-large-menu-wrapper .base-sub-menu ul.menu-items li:hover {
  background-color: #0077aa;
}
.base-large-menu-wrapper .base-sub-menu ul.menu-items li.has-child {
  background-image: url("../graphics/arrow-white-down.png");
  background-position: right 5px center;
  background-repeat: no-repeat;
}
.base-large-menu-wrapper .base-sub-menu ul.menu-items li.is-active {
  background-color: #0077aa;
}
@media only screen and (max-width: 767px) {
  .base-large-menu-wrapper {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .base-large-menu-wrapper {
    display: none;
  }
}
@media only screen and (min-width: 992px) {
  .base-large-menu-wrapper {
    display: block;
  }
}

/* 3. drop-down
   ========================================================================== */
.dropdown-menu {
  width: 100%;
  left: 0;
  right: 0;
  border-radius: 0;
  margin: 0;
  margin-top: 9px;
  border: none;
  height: 400px;
  padding: 25px 0;
}
.dropdown-menu ul {
  padding: 0;
  height: 300px;
  overflow-y: auto;
}
.dropdown-menu ul li {
  padding: 0 !important;
  display: list-item !important;
}
.dropdown-menu ul li a {
  color: #000000 !important;
}
.dropdown-menu ul li:hover {
  background-color: transparent !important;
  color: #000000 !important;
}
.dropdown-menu .menu-sub-links-wrapper {
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px 0;
}
.dropdown-menu .menu-sub-links-wrapper .border {
  border-bottom: 1px solid #009fe3;
  margin: 0 15px 15px 15px;
}
.dropdown-menu .menu-sub-links-wrapper a {
  color: #009fe3 !important;
}

/* 3. base-large-menu-checkout-wrapper
   ========================================================================== */
/*This it used for the header in the checkout flow*/
.base-large-menu-checkout-wrapper {
  display: block;
}
@media only screen and (max-width: 767px) {
  .base-large-menu-checkout-wrapper p {
    font-size: 0.8em !important;
  }
}
@media only screen and (max-width: 767px) {
  .base-large-menu-checkout-wrapper img {
    max-height: 25px !important;
  }
}
.base-large-menu-checkout-wrapper .base-center-menu {
  margin-top: 0;
}

@media screen and (min-width: 992px) {
  .header {
    display: none;
  }
}
.page-content-wrapper {
  padding-top: 139px;
}
@media only screen and (max-width: 767px) {
  .page-content-wrapper {
    padding-top: 8px !important;
  }
}
@media only screen and (min-width: 768px) {
  .page-content-wrapper {
    padding-top: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .page-content-wrapper {
    padding-top: 139px;
  }
}