/**
 * CONTENTS
 *
 * BASE
 *
 * UTILITIES
 * Colors 
 * Background colors
 * Borders
 *
 * COMPONENTS
 * Buttons
 * Navigation
 * Slide
 * Featured page banner
 * Card
 * List Tab
  *
 * CONTENT
 * Cart
 * Payment Method
 * Footer
 * 
 * FORMS
 * Custom form
 *
 * MEDIA QUERY
 * (min-width: 320px) and (max-width: 480px)
 * (min-width: 481px) and (max-width: 767px)
 * (min-width: 768px) and (max-width: 1024px) and (orientation: landscape)
 * (min-width: 768px) and (max-width: 1024px)
 * (min-width: 1025px) and (max-width: 1280px)
 * (min-width: 1281px)
 * 
 */


/**
*   BASE
*/

body{
   color: #202020;
   font-size: 17px;
   overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
   font-weight: bold;
}

a {
   color: #faab27;
}

a:hover{
   color: #faab27;
   text-decoration: none;
}

/**
*   UTILITIES
*/


/*------------------------------------*\
  #Colors
\*------------------------------------*/

.color-white   {color: #fff;}
.color-blue    {color: #8eb8c9;}
.color-purple  {color: #882299;}
.color-black   {color: #202020;}
.color-orange  {color: #faab27;}
.color-gray    {color: #f0f0f0;}


/*------------------------------------*\
  #Background colors
\*------------------------------------*/

.bg-blue    {background-color:#8eb8c9;}
.bg-purple  {background-color:#882299;}
.bg-orange  {background-color:#faab27;}
.bg-gray    {background-color:#f0f0f0;}


/*------------------------------------*\
  #Borders
\*------------------------------------*/

.border-underline {
   width: 100%;
   height: 2px;
   background-color: #882299;
   display: block;
   margin-bottom: 20px;
   margin-top: 10px;
}

/**
*   COMPONENTS
*/

/*------------------------------------*\
  #Buttons
\*------------------------------------*/

.btn {
   border-radius: unset !important;
   white-space: nowrap;
}

.btn.focus,
.btn:focus {
   outline: 0;
   box-shadow: none;
}

.btn-black {
   color:#fff;      
   border-color: #4b4b4b;
   background-color: #4b4b4b;
   position:relative;
   outline:none;
}

.btn-black:hover {   
   color: #fff;
   border-color: #4b4b4b;
   background-color: #4b4b4b;   
   text-decoration: none;
}

.btn-orange {
   color:#fff;      
   border-color: #faab27;
   background-color: #faab27;
   position:relative;
   outline:none;
}

.btn-orange:hover {   
   color: #fff;
   border-color: #faab27;
   background-color: #faab27;   
   text-decoration: none;
}


/*------------------------------------*\
  #Navigation
\*------------------------------------*/

.top-nav {
   padding: 5px 0;
   font-size: 14px;
   background-color: #bebebe;
}

.top-nav,
.top-nav a {
   color: #fff;
}
.top-nav .top-cart-box {
   margin-top: 4px;
}

.logo {
   width: 150px;
}

.navbar {   
   margin-bottom: 0;
   background: #fff;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
}

.navbar-light .navbar-nav .nav-link {
   color: #9c9c9c;
}

.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link {
   color: #faab27;
}

.navbar-light .navbar-nav li {
   position: relative;
   padding-top: 5px;
   font-size: 16px;
}

.navbar-light .navbar-nav li:before {
   position: absolute;
   top: -10px;
   height: 4px;
   width: 60px;
   left: 50%;
   content: '';
   transform: translateX(-50%);
}

.navbar .navbar-nav {
   width: 100%;
   margin-top: 25px;
}

.navbar-light .navbar-nav .dropdown-menu li {
   padding: 0 5px 5px 10px;
   min-width: 12rem;
   width: 15rem;
}

.nav-item {
   display: block;
   position: relative;
}

.c-button:active, .c-button:focus {
   outline: none;
}
.c-button.is-clicked {
   box-shadow: 0 3px 10px rgba(0,0,0,.23),0 3px 10px rgba(0,0,0,.16);
}

.c-offcanvas {
   left: 0;
   padding: 1rem;
}

.js-offcanvas a {
   color: #000;
   outline: 0;
}

.c-offcanvas--overlay {
   z-index: 40;
}


/*------------------------------------*\
  #Slide
\*------------------------------------*/

.carousel-item {
   height: 50vh;
   background: no-repeat center center scroll;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

.carousel-caption{
   color: #00328F;
}


/*------------------------------------*\
  #Featured page banner
\*------------------------------------*/
.featured-page-banner {
   height: 64vh;
   background: no-repeat center center scroll;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   color: #fff;
}

.featured-page-banner h1 {
   color: #fff;
}

/*------------------------------------*\
  #Card
\*------------------------------------*/
.card .card-custom-image {
   width: 100%;
   height: 160px;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}

a .card-custom-image {
   cursor: pointer;
}

.card .card-button-textonly
{
   -webkit-appearance: unset;
   border: unset;
   background: none;
}

/*------------------------------------*\
  #List Tab
\*------------------------------------*/
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
   background-color: transparent;
   border-color: transparent transparent #f3f3f3;
   border-bottom: 2px solid !important;
   font-size: 16px;
   font-weight: bold;
}
.nav-tabs .nav-link {
   border: 1px solid transparent;
   border-top-left-radius: .25rem;
   border-top-right-radius: .25rem;
   color: #b7b7b7;
   font-size: 16px;
   padding: .5rem;
}


/**
*   CONTENT
*/

/*------------------------------------*\
  #Cart
\*------------------------------------*/
.quantity .inc-btn, .quantity .dec-btn {
   -webkit-user-select: none;
   -o-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.quantity .inc-btn, .quantity .dec-btn {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   line-height: 26px;
   border: 1px solid #999;
   text-align: center;
   cursor: pointer;
}

.quantity input {
   width: 30px;
   height: 30px;
   border: none;
   text-align: center;
   color: #333;
   font-weight: 400;
   line-height: 30px;
   outline: none;
}

.cart-order-detail-display {
   overflow: hidden;
   background: #f6f6f6;
   margin: 44px 0 0 0;
   padding: 51px 60px 43px;
}

.cart-order-detail-display .list-unstyled.block {
   overflow: hidden;
   padding: 21px 0 0 2px;
   margin: 0 0 67px;
}

.cart-order-detail-display .list-unstyled.block li {
   margin: 0 0 10px;
   padding: 0 0 9px;
   border-style: solid;
   border-width: 0 0 1px;
   border-color: #cccccc;
}

.cart-order-detail-display .list-unstyled.block li:after {
   display: block;
   content: ' ';
   clear: both;
}

.cart-order-detail-display .list-unstyled.block .title {
   font-size: 16px;
   line-height: 18px;
   display: block;
   margin: 0 0 11px;
   text-transform: uppercase;
   color: #868686;
}

.cart-order-detail-display .list-unstyled.block span {
   font-size: 14px;
   line-height: 16px;
   display: block;
   font-weight: 700;
   margin: 0 0 3px;
   color: #868686;
}

/*------------------------------------*\
  #Payment Method
\*------------------------------------*/
.add-payment-method {
   color: #000;
   padding: 4.75rem 1.5rem;
   text-align: center;
}

.card-add-payment-method {
   border-style: dashed;
}

.add-payment-method:hover {
   color: #000;
   background-color: #e5e5e5;    
}


/*------------------------------------*\
  #Footer
\*------------------------------------*/
.copyright {
   font-size: 14px;
}

/**
*   FORMS
*/

/*------------------------------------*\
  #Custom form
\*------------------------------------*/

.custom-form .form-row {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin-right: -5px;
   margin-left: -5px;
}

.custom-form .form-row div[class*=" col-"],
.custom-form .form-row div[class^=col-] {
   margin: 0;
}

.custom-form .form-row>.col, .form-row>[class*=col-] {
   padding-right: 5px;
   padding-left: 5px;
}

.custom-form input,
.custom-form textarea{
   color: #646464;
   width: 100%;
   border: 1px solid rgba(0,0,0,.1);
   margin-bottom: 10px;
   box-shadow: none;
   font: 300 16px Heebo,sans-serif;
   -webkit-transition: ease-out .2s;
   transition: ease-out .2s;
   padding: 15px 20px;
}

.custom-form select {
   color: #646464;
   width: 100%;
   height: auto;
   border: 1px solid rgba(0,0,0,.1);
   margin-bottom: 10px;
   box-shadow: none;
   font: 300 16px Heebo,sans-serif;
   -webkit-transition: ease-out .2s;
   transition: ease-out .2s;
   padding: 15px 20px;
}

.custom-form .form-submit {
   color: #fff;
}


@media (min-width: 320px) and (max-width: 480px) {  

   ul.dropdown-menu.show{
      position: relative !important;
      transform: translate3d(0px, 0px, 0px) !important;
      left: 1rem !important;
      border: none;
   }

   .nav-item {
      text-align: left;
      margin: 0;
   }

   .dropdown-menu li a {
      padding: 10px !important;
   }

   .carousel-item {
      height: 30vh;      
      background: no-repeat left center scroll;
      background-size: cover;
   }
}

@media (min-width: 481px) and (max-width: 767px) {

   ul.dropdown-menu.show{
      position: relative !important;
      transform: translate3d(0px, 0px, 0px) !important;
      left: 1rem !important;
      border: none;
   }

   .nav-item {
      text-align: left;
      margin: 0;
   }

   .dropdown-menu li a {
      padding: 10px !important;
   }

   .carousel-item {
      background: no-repeat left center scroll;
      background-size: cover;
   }

}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

   ul.dropdown-menu.show{
      position: relative !important;
      transform: translate3d(0px, 0px, 0px) !important;
      left: 1rem !important;
      border: none;
   }

   .nav-item {
      text-align: left;
      margin: 0;
   }

   .dropdown-menu li a {
      padding: 10px !important;
   }

   .carousel-item {
      background: no-repeat left center scroll;
      background-size: cover;
   }
}

@media (min-width: 768px) and (max-width: 1024px) {
   ul.dropdown-menu.show{
      position: relative !important;
      transform: translate3d(0px, 0px, 0px) !important;
      left: 0.2rem !important;
      border: none;
   }

   .nav-item {
      text-align: left;
      margin: 0;
   }

   .carousel-item {
      background: no-repeat left center scroll;
      background-size: cover;
   }
}

@media (min-width: 1025px) and (max-width: 1280px) {
   .dropdown:hover > .dropdown-menu {
      display: block;
      margin-top: -5px;
   }

   .dropdown > .dropdown-toggle:active {
      pointer-events: none;
   }

   .carousel-item {
      background: no-repeat left center scroll;
      background-size: cover;
   }
}

@media (min-width: 1281px) {
   .dropdown:hover > .dropdown-menu {
      display: block;
      margin-top: -5px;
   }

   .dropdown > .dropdown-toggle:active {
      /*Without this, clicking will make it sticky*/
      pointer-events: none;
   }
}