/*
// Slick Navbar Toggle Button (#sntb)
// --------------------------------------------------
// Slick navbar-toggle button styles based on imgix.com site

// Local variables
//
// Which are meant to be used only in this module. »Global« variables are stored
// in /assets/less/customerName/variables.less
*/

/* Slick Navbar Toggle Button (sntb) background colors */
/*
@sntb-background-color: rgba(33,43,50,0.9);
@sntb-close-background-color: rgba(23,30,35,0.8);
@sntb-scroll-background-color: rgba(7,119,152,0.95);
//** Slick Navbar Toggle Button bar colors
@sntb-bars-background-color: #e1eaf1;
@sntb-close-bars-background-color: #e1eaf1;
@sntb-scroll-bars-background-color: #e1eaf1;
//** Slick Navbar Toggle Button border
@sntb-border: none;
@sntb-border-radius: 4px;
@sntb-scroll-border-bottom: solid 2px rgba(33,43,50,0.5);
*/

/* Slick Navbar Toggle Button (sntb) background colors */
/*
@sntb-background-color: transparent;
@sntb-close-background-color: transparent;
@sntb-scroll-background-color: rgba(7,119,152,0.8);
// Slick Navbar Toggle Button bar colors
@sntb-bars-background-color: #888;
@sntb-close-bars-background-color: #888;
@sntb-scroll-bars-background-color: #e1eaf1;
// Slick Navbar Toggle Button border
@sntb-border: 1px solid transparent;
@sntb-border-radius: 4px;
@sntb-scroll-border-bottom: solid 2px rgba(33,43,50,0.4);
*/

/* Slick Navbar Toggle Button Styles */
#sntb {
  display: none;
  margin: 5px 15px;
  width: 48px;
  height: 42px;
  padding: 0;
  /*background-color: @sntb-background-color;*/
  background-color: transparent;
  /*border: @sntb-border;*/
  border: 1px solid transparent;
  border-color: transparent;
  /*border-radius: @sntb-border-radius;*/
  border-radius: 4px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: .4s ease-out;
  -o-transition: .4s ease-out;
  transition: .4s ease-out;
  z-index: 999;
}
#sntb:hover {
  background-color: #fff;
}

@media (max-width: 991px) {
  #sntb {
    display: block;
  }
}

#sntb-bars, #sntb-bars:before, #sntb-bars:after {
  width: 36px;
  height: 6px;
  /*background-color: @sntb-bars-background-color;*/
  background-color: #333;
  display: block;
  margin-top: 0;
  margin-left: 6px;
  position: relative;
  -webkit-transition: .3s ease-out;
  -o-transition: .3s ease-out;
  transition: .3s ease-out;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 120%;
  transform-origin: 50% 100%;
  border-radius: 1px;
}
#sntb-bars:before {
  margin: 0;
  content: ' ';
  display: block;
  position: absolute;
  top: -12px;
  -ms-transform-origin: 100% 0;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  right: 0;
}
#sntb-bars:after {
  margin: 0;
  content: ' ';
  display: block;
  position: absolute;
  top: 12px;
  -ms-transform-origin: 100% 0;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  right: 0;
}

/* #sntb.close-button */
#sntb.close-button {
  /*background-color: @sntb-close-background-color;*/
  -webkit-transition: .2s ease-out;
  -o-transition: .2s ease-out;
  transition: .2s ease-out;
}

/* #sntb.close-button #sntb-bars */
#sntb.close-button #sntb-bars {
  background-color: transparent;
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  width: 26px;
  margin-left: 14px;
  height: 4px;
}
#sntb.close-button #sntb-bars:before {
  /*background-color: @sntb-close-bars-background-color;*/
  background-color: #333;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 10px;
  height: 4px;
  width: 28px;
  right: 0;
}
#sntb.close-button #sntb-bars:after {
  /*background-color: @sntb-close-bars-background-color;*/
  background-color: #333;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: -10px;
  height: 4px;
  width: 28px;
  right: 3px;
}

/* #sntb.scrollup */
#sntb.scrollup {
  position: fixed;
  right: 0;
  /*background-color: @sntb-scroll-background-color;*/
  background-color: #02A0DD;
  opacity: 0.8;
  -webkit-transition: .3s ease-out;
  -o-transition: .3s ease-out;
  transition: .3s ease-out;
  margin-right: 0;
  /*border-radius: @sntb-border-radius;*/
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius:0;
  /*border-bottom: @sntb-scroll-border-bottom;*/
  border-bottom: solid 2px rgba(33,43,50,0.4);
}

/* #sntb.scrollup #sntb-bars */
#sntb.scrollup #sntb-bars, #sntb.scrollup #sntb-bars:before, #sntb.scrollup #sntb-bars:after {
  /*background-color: @sntb-scroll-bars-background-color;*/
  background-color: #e1eaf1;
  -webkit-transition: .2s ease-out;
  -o-transition: .2s ease-out;
  transition: .2s ease-out;
  border-radius: 1px;
}
#sntb.scrollup #sntb-bars {
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  width: 22px;
  margin-left: 15px;
  /*margin-top: 18px;*/
  height: 4px;
}
#sntb.scrollup #sntb-bars:before {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0;
  right: -1px;
  height: 4px;
  width: 14px;
}
#sntb.scrollup #sntb-bars:after {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: -1px;
  right: 0;
  height: 4px;
  width: 16px;
}
