/* If navbar has a contextual bg we make menu links white*/
.navbar[class*='bg-'] .navbar-brand,
.navbar[class*='bg-'] .nav > li > a,
.navbar[class*='bg-'] .nav > li.open > a {
  color: #fff;
}
.navbar.bg-primary {
  background-color: #56a9f6 !important;
  color: #f5f8fd;
}
.navbar.bg-primary.navbar .nav > li.open > a,
.navbar.bg-primary.navbar .nav > li:hover > a,
.navbar.bg-primary.navbar .nav > li:focus > a,
.navbar.bg-primary.navbar .nav > li.active > a,
.navbar.bg-primary.navbar .nav > li > a:hover,
.navbar.bg-primary.navbar .nav > li > a:focus {
  color: #FFF;
  background-color: #3e9df4;
}
.navbar.bg-primary.navbar .nav > li.dropdown.open .dropdown-menu {

}
.navbar.bg-primary.navbar .nav > li.dropdown.open .dropdown-menu:after {

}
.navbar.bg-primary.navbar .nav > li.dropdown.open .dropdown-menu:after {
 
}
.navbar.bg-success {
  background-color: #70ca63 !important;
  color: #fcfefb;
}
.navbar.bg-success.navbar .nav > li.open > a,
.navbar.bg-success.navbar .nav > li:hover > a,
.navbar.bg-success.navbar .nav > li:focus > a,
.navbar.bg-success.navbar .nav > li.active > a,
.navbar.bg-success.navbar .nav > li > a:hover,
.navbar.bg-success.navbar .nav > li > a:focus {
  color: #FFF;
  background-color: #5bc24c;
}
.navbar.bg-success.navbar .nav > li.dropdown.open .dropdown-menu {
  border-top-color: #70ca63;
}
.navbar.bg-success.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #70ca63;
}
.navbar.bg-success.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #70ca63;
}
.navbar.bg-info {
  background-color: #3bafda !important;
  color: #e7f5fa;
}
.navbar.bg-info.navbar .nav > li.open > a,
.navbar.bg-info.navbar .nav > li:hover > a,
.navbar.bg-info.navbar .nav > li:focus > a,
.navbar.bg-info.navbar .nav > li.active > a,
.navbar.bg-info.navbar .nav > li > a:hover,
.navbar.bg-info.navbar .nav > li > a:focus {
  color: #FFF;
  background-color: #27a2cf;
}
.navbar.bg-info.navbar .nav > li.dropdown.open .dropdown-menu {
  border-top-color: #3bafda;
}
.navbar.bg-info.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #3bafda;
}
.navbar.bg-info.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #3bafda;
}
.navbar.bg-warning {
  background-color: #f48f19 !important;
  color: #ffffff;
}
.navbar.bg-warning.navbar .nav > li.open > a,
.navbar.bg-warning.navbar .nav > li:hover > a,
.navbar.bg-warning.navbar .nav > li:focus > a,
.navbar.bg-warning.navbar .nav > li.active > a,
.navbar.bg-warning.navbar .nav > li > a:hover,
.navbar.bg-warning.navbar .nav > li > a:focus {
  color: #FFF;
  background-color: #f08508;
}
.navbar.bg-warning.navbar .nav > li.dropdown.open .dropdown-menu {
  border-top-color: #f6bb42;
}
.navbar.bg-warning.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #f6bb42;
}
.navbar.bg-warning.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #f6bb42;
}
.navbar.bg-danger {
  background-color: #e9573f !important;
  color: #fef7f6;
}
.navbar.bg-danger.navbar .nav > li.open > a,
.navbar.bg-danger.navbar .nav > li:hover > a,
.navbar.bg-danger.navbar .nav > li:focus > a,
.navbar.bg-danger.navbar .nav > li.active > a,
.navbar.bg-danger.navbar .nav > li > a:hover,
.navbar.bg-danger.navbar .nav > li > a:focus {
  color: #FFF;
  background-color: #e63f24;
}
.navbar.bg-danger.navbar .nav > li.dropdown.open .dropdown-menu {
  border-top-color: #e9573f;
}
.navbar.bg-danger.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #e9573f;
}
.navbar.bg-danger.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #e9573f;
}
.navbar.bg-alert {
  background-color: #b26edf !important;
  color: #ffffff;
}
.navbar.bg-alert.navbar .nav > li.open > a,
.navbar.bg-alert.navbar .nav > li:hover > a,
.navbar.bg-alert.navbar .nav > li:focus > a,
.navbar.bg-alert.navbar .nav > li.active > a,
.navbar.bg-alert.navbar .nav > li > a:hover,
.navbar.bg-alert.navbar .nav > li > a:focus {
  color: #FFF;
  background-color: #a95bdc;
}
.navbar.bg-alert.navbar .nav > li.dropdown.open .dropdown-menu {
  border-top-color: #967adc;
}
.navbar.bg-alert.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #967adc;
}
.navbar.bg-alert.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #967adc;
}
.navbar.bg-system {
  background-color: #72be49 !important;
  color: #cef1e8;
}
.navbar.bg-estimate {
  background-color: #f4d23d !important;
  color: #cef1e8;
}

.navbar.bg-system.navbar .nav > li.open > a,
.navbar.bg-system.navbar .nav > li:hover > a,
.navbar.bg-system.navbar .nav > li:focus > a,
.navbar.bg-system.navbar .nav > li.active > a,
.navbar.bg-system.navbar .nav > li > a:hover,
.navbar.bg-system.navbar .nav > li > a:focus {
  color: #FFF;
  background-color: #71b54f;
}

.navbar.bg-estimate.navbar .nav > li.open > a,
.navbar.bg-estimate.navbar .nav > li:hover > a,
.navbar.bg-estimate.navbar .nav > li:focus > a,
.navbar.bg-estimate.navbar .nav > li.active > a,
.navbar.bg-estimate.navbar .nav > li > a:hover,
.navbar.bg-estimate.navbar .nav > li > a:focus {
  color: #FFF;
  background-color: #f2cb1f;
}


.navbar.bg-system.navbar .nav > li.dropdown.open .dropdown-menu {
  border-top-color: #72be49;
}

.navbar.bg-estimate.navbar .nav > li.dropdown.open .dropdown-menu {
  border-top-color: #f4d23d;
}

.navbar.bg-system.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #72be49;
}
.navbar.bg-system.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #72be49;
}
.navbar.bg-dark {
  background-color: #3b3f4f !important;
  color: #9fa4b7;
}
.navbar.bg-dark.navbar .nav > li.open > a,
.navbar.bg-dark.navbar .nav > li:hover > a,
.navbar.bg-dark.navbar .nav > li:focus > a,
.navbar.bg-dark.navbar .nav > li.active > a,
.navbar.bg-dark.navbar .nav > li > a:hover,
.navbar.bg-dark.navbar .nav > li > a:focus {
  color: #FFF;
  background-color: #2e313d;
}
.navbar.bg-dark.navbar .nav > li.dropdown.open .dropdown-menu {
  border-top-color: #3b3f4f;
}
.navbar.bg-dark.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #3b3f4f;
}
.navbar.bg-dark.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #3b3f4f;
}
.navbar.bg-light {
  color: #666;
  background-color: #FFF !important;
  border-bottom: 1px solid #E2E2E2;
}
.navbar.bg-light .navbar-branding {
  background-color: #FFF !important;
  border-bottom: 1px solid #E6E6E6;
}
.navbar.bg-light .navbar-form.navbar-search input {
  border-color: #EEE;
}
.navbar.bg-light .navbar-form.navbar-search input:focus {
  background-color: #fafafa;
  border-color: #f0f0f0;
}
.navbar.bg-light .navbar-brand,
.navbar.bg-light .nav > li > a,
.navbar.bg-light .nav > li.open > a {
  color: #666;
}
.navbar.bg-light #toggle_sidemenu_l,
.navbar.bg-light #toggle_sidemenu_l:hover,
.navbar.bg-light #toggle_sidemenu_l:focus {
  color: #666;
}
.navbar.bg-light.navbar .nav > li.open > a,
.navbar.bg-light.navbar .nav > li:hover > a,
.navbar.bg-light.navbar .nav > li:focus > a,
.navbar.bg-light.navbar .nav > li.active > a,
.navbar.bg-light.navbar .nav > li > a:hover,
.navbar.bg-light.navbar .nav > li > a:focus {
  color: #222;
  background-color: #f7f7f7;
}
.navbar.bg-light.navbar .nav > li.dropdown.open .dropdown-menu {
  border-top-color: #999;
}
.navbar.bg-light.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #999;
}
.navbar.bg-light.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #999;
}
/* Modify whitespace for user menu dropdown - Firefox alignment bug fix */
.navbar .navbar-right > li:last-child > .dropdown-menu > li > a {
  white-space: inherit;
}
@media (max-width: 1100px) {
  .navbar .navbar-right:last-child {
    margin-right: 5px;
  }
  .navbar .navbar-right > li:last-child > a > img {
    margin-right: 5px !important;
  }
  .navbar .navbar-right > li:last-child > a > span {
    display: none;
  }
  .navbar .navbar-right > li:last-child > a > span.caret {
    display: inline-block;
  }
  .navbar-form.navbar-search {
    padding: 21px 6px 19px;
    margin: 0;
    cursor: pointer;
    width: auto;
    float: left;
  }
  .navbar-form.navbar-search .form-group {
    margin: 0 !important;
  }
  .navbar-form.navbar-search:after {
    content: "\f02e";
    position: relative;
    font: normal normal 16px octicons;
    line-height: 1;
    display: inline-block;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .navbar-form.navbar-search input {
    opacity: 0;
    z-index: -1;
    visibility: hidden;
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: 60px;
    margin: 0;
    font-size: 24px;
    color: #AAA;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #EEE;
    text-align: center;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .navbar-form.navbar-search input:focus,
  .navbar.bg-light .navbar-form.navbar-search input:focus {
    background-color: #FFF;
  }
  .navbar-form.navbar-search.search-open input {
    top: 0;
    opacity: 1;
    visibility: visible;
    z-index: 1040;
  }
  .navbar-form.navbar-search .search-remove {
    display: none;
    z-index: 1040;
    position: absolute;
    color: #AAA;
    top: 0;
    right: 0;
    height: 60px;
    line-height: 59px;
    padding-left: 15px;
    padding-right: 25px;
  }
  .navbar-form.navbar-search .search-remove:after {
    position: relative;
    content: "\e014";
    font-family: 'Glyphicons Halflings';
    text-align: center;
    font-size: 20px;
  }
  .navbar-form.navbar-search.search-open .search-remove:hover {
    color: #ee7f6d;
  }
}
@media (max-width: 599px) {
  .sb-l-m .navbar > .navbar-right,
  .navbar .navbar-nav > li.dropdown {
    position: static !important;
  }
  .navbar .navbar-right:last-child {
    margin-right: 0;
  }
  .navbar-left .dropdown-menu,
  .navbar-right .dropdown-menu,
  .navbar-left .open .dropdown-menu,
  .navbar-right .open .dropdown-menu {
    z-index: 1000;
    margin-top: 0 !important;
    float: left;
    position: absolute;
    top: 100%;
    left: -1px;
    min-width: 101%;
    list-style: none;
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-clip: padding-box;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  }
  #user-status + .btn-group .multiselect-container.dropdown-menu,
  #user-role + .btn-group .multiselect-container.dropdown-menu {
    top: 34px !important;
    position: absolute !important;
    right: 0;
    left: auto;
  }
}
/* ==============================================
   Content Trays
     A. Trays
     B. Tray Sizes
     C. Tray Bin
     D. Tray Navigation
     E. Tray Hover Settings
=================================================
   A. Content Trays
================================================= */
/*tray table layout*/
#content.table-layout {
  padding: 0;
}
#content.table-layout > div,
#content.table-layout > section {
  padding: 25px 20px 50px;
}
/*trays*/
.tray-left,
.tray-right {
  position: relative;
  width: 250px;
  min-height: 100%;
  border-right: 1px solid #DDD;
  background: #f2f2f2;
  padding: 15px;
}
/*Right tray*/
.tray-right {
  border-left: 1px solid #DDD;
  border-right: 0;
}
/*Top tray*/
.tray-top {
  position: relative;
  width: 100%;
  min-height: 200px;
  border-bottom: 1px solid #DDD;
  background: #f2f2f2;
  padding: 15px;
}
/*===============================================
   B. Tray Sizes
================================================= */
.tray200 {
  width: 200px;
}
.tray225 {
  width: 225px;
}
.tray250 {
  width: 250px;
}
.tray250 {
  width: 270px;
}
.tray290 {
  width: 290px;
}
.tray320 {
  width: 320px;
}
.tray350 {
  width: 350px;
}
.tray400 {
  width: 400px;
}
/*===============================================
   C. Tray Bin
================================================= */
/*a dashed bin great for organizing buttons and links*/
.tray-bin {
  padding: 7px;
  border: 1px dashed #CCC;
  background: #eee;
  min-height: 65px;
  margin-bottom: 20px;
}
/*If navbar has a contextual bg we make menu links white*/
.tray-bin div[class*='col-'] {
  padding-left: 5px;
  padding-right: 5px;
}
/*traybin divider text. Used primarily in li navs*/
.tray-bin .nav-label {
  text-align: center;
  font-size: 12px;
  color: #999999;
  padding-left: 5px;
  margin-top: 20px;
  margin-bottom: 10px;
}
/*===============================================
   D. Tray Navigation
================================================= */
/* item link */
ul.tray-nav li a {
  width: 100%;
  padding: 11px 15px 11px 30px;
  color: #999;
  font-size: 13px;
  background: #f2f2f2;
  border-top: 1px solid #DDD;
}
/* item icon */
ul.tray-nav li a .fa {
  padding-right: 18px;
}
/* active item  */
ul.tray-nav li.active a {
  color: #666;
  background: #fbfbfb;
  transition: all 0.3s ease;
}
/* active item icon */
ul.tray-nav li.active a .fa {
  
}
/*Tray nav style option - Arrow*/
/* active item bottom border */
ul.tray-nav.tray-nav-arrow li.active:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
  top: 1px;
  left: 0;
  border-bottom: 1px solid #DDD;
}
ul.tray-nav.tray-nav-arrow li.active a:before,
ul.tray-nav.tray-nav-arrow li.active a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border-left: 20px solid;
  border-left-color: #fbfbfb;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  transition: all 0.3s ease;
}
ul.tray-nav.tray-nav-arrow li.active a:before {
  border-left-color: #888;
}
/* item hover */
ul.tray-nav.tray-nav-arrow li:hover a:after {
  border-left-color: #f8f8f8;
}
/*settings for arrows when used on a right aligned tray (.tray-right)*/
/* active item bottom border */
.tray-right ul.tray-nav.tray-nav-arrow li.active:before {
  width: 100%;
  left: auto;
  right: 0;
}
.tray-right ul.tray-nav.tray-nav-arrow li.active a:before,
.tray-right ul.tray-nav.tray-nav-arrow li.active a:after {
  left: auto;
  right: 100%;
  border-right: 20px solid;
  border-left-color: transparent;
  border-right-color: #fbfbfb;
}
.tray-right ul.tray-nav.tray-nav-arrow li.active a:before {
  border-left-color: transparent;
  border-right-color: #888;
}
/* item hover */
.tray-right ul.tray-nav.tray-nav-arrow li:hover a:after {
  border-left-color: transparent;
  border-right-color: #f8f8f8;
}
/*Tray nav style option - Bordered*/
.tray-nav.tray-nav-border li {
  position: relative;
}
.tray-nav.tray-nav-border li a {
  font-size: 14px;
  padding: 12px 15px 12px 30px;
}
.tray-nav.tray-nav-border li:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #CCC;
}
.tray-nav.tray-nav-border li.active:after {

}
.tray-nav.tray-nav-border li:hover:after {
  background: #999;
}
/*modifcation for right side trays (.tray-right)*/
.tray-right .tray-nav.tray-nav-border li:after {
  left: 0;
  right: auto;
}
/*border skin contextuals*/
.tray-nav.tray-nav-border li.active.nav-primary:after {
 
}
.tray-nav.tray-nav-border li.active.nav-success:after {
  background: #70ca63;
}
.tray-nav.tray-nav-border li.active.nav-info:after {
  background: #3bafda;
}
.tray-nav.tray-nav-border li.active.nav-warning:after {
  background: #f6bb42;
}
.tray-nav.tray-nav-border li.active.nav-danger:after {
  background: #e9573f;
}
.tray-nav.tray-nav-border li.active.nav-alert:after {
  background: #967adc;
}
.tray-nav.tray-nav-border li.active.nav-system:after {
  background: #37bc9b;
}
.tray-nav.tray-nav-border li.active.nav-dark:after {
  background: #3b3f4f;
}
/*===============================================
   E. Tray Hover Settings

   At <1000 window width javascript will add a 
   "tray-rescale" class to the document body. This
   will shift the menu over out of sight and
   expand it only when the user hovers over the 
   portion that's still visible
================================================= */
body.tray-rescale .tray-left,
body.tray-rescale .tray-right {
  position: fixed;
  z-index: 1;
  opacity: 0.5;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
body.tray-rescale .tray-left,
body.tray-rescale .tray-right {
  right: -275px;
}
body.tray-rescale .tray-left {
  border-left: 1px solid #DDD;
}
/* adjust center tray to fill window width add needed
 padding to offset the partially hidden tray */
body.tray-rescale .tray-center {
  width: 100%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  padding-right: 58px !important;
}
body.tray-rescale .tray-top + .tray-center {
  padding-right: inherit !important;
}
/* adjust depending on tray size */
body.tray-rescale .tray.tray200 {
  right: -155px;
}
body.tray-rescale .tray.tray225 {
  right: -180px;
}
body.tray-rescale .tray.tray250 {
  right: -205px;
}
body.tray-rescale .tray.tray270 {
  right: -225px;
}
body.tray-rescale .tray.tray290 {
  right: -245px;
}
body.tray-rescale .tray.tray320 {
  right: -275px;
}
body.tray-rescale .tray.tray350 {
  right: -305px;
}
body.tray-rescale .tray.tray400 {
  right: -355px;
}
/* on hover open the menus */
body.tray-rescale .tray-left:hover,
body.tray-rescale .tray-right:hover {
  opacity: 1;
  z-index: 999;
}
body.tray-rescale .tray-left:hover,
body.tray-rescale .tray-right:hover {
  right: 0px;
}
/* adjust any bootstrap affix settings if they exist */
body.tray-rescale .tray .tray-nav.affix,
body.tray-rescale .tray .affix-pane.affix {
  top: auto;
}
/* Disable completely on resolutions <600 */
@media (max-width: 600px) {
  body.tray-rescale .tray-left,
  body.tray-rescale .tray-right {
    display: none;
  }
  body.tray-rescale .tray-center {
    padding-right: 13px !important;
  }
  body.tray-rescale #content.table-layout > div,
  body.tray-rescale #content.table-layout > section {
    padding: 10px 13px 40px !important;
  }
}
/* ==============================================
   LEFT SIDEBAR
    A. Default Open State
    B. Sidebar User Area
    C. Left Sidebar Minified
    D. Nano Sidebar Scroller Settings
    E. Sidebar Skins - Default Dark Skin
    F. Sidebar Skins - Light Skin
=================================================
  A. Default Open State
================================================= */
/* Sidebar Left Container */
#sidebar_left {
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 230px;
  min-height: 100%;
  padding-bottom: 40px;
  background-color: #30363e;
}
/* Sidebar Left Menu */
.sidebar-menu {
  padding-bottom: 20px;
}
/* Top Level Menu Items */
.sidebar-menu > li {
  margin: 0;
}
.sidebar-menu > li:first-child {
  padding-top: 4px;
}
/* all menu Links */
.sidebar-menu > li a {
  color: #fff;
}
/* Top level menu Links */
.sidebar-menu > li > a {
  padding: 0;
  line-height: 35px;
  height: 35px;
  overflow: hidden;
}
/* Top Level Menu Icon */
.sidebar-menu > li > a > span:nth-child(1) {
  float: left;
  top: 0;
  line-height: 35px;
  width: 38px;
  font-size: 13px;
  text-align: center;
  padding-left: 13px;
}
/* Top Level Menu Title */
.sidebar-menu > li > a > span:nth-child(2) {
  font-weight: 600;
  padding-left: 6px;
}
/* Menu Item - Tray, used to hold badges and such */
.sidebar-menu li > a > .sidebar-title-tray {
  position: absolute;
  right: 10px;
  top: -2px;
}
.sidebar-menu li > a > .sidebar-title-tray .label {
  padding: .0em .5em .2em;
  font-size: 11px;
}
/* Menu item title caret */
.sidebar-menu li > a > span.caret {
  position: absolute;
  top: 45%;
  right: 13px;
  border-top: 5px solid;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
/* Open Menu Item Caret - we simply flip the carets border */
.sidebar-menu li > a.menu-open > span.caret {
  border-top: 0;
  border-bottom: 5px solid;
}
/* Sub Level Menu  */
.sidebar-menu > li > ul {
  clear: both;
  display: none;
  width: 230px;
  height: auto;
  background-color: #282d33;
}
.sidebar-menu li > a.menu-open + ul {
  display: block;
}
/* Sub Level Menu Items */
.sidebar-menu > li > ul > li > a {
  color: #d1d1d1;
  padding: 11px 20px 11px 30px;
}
/* Sub Level Menu first and last items */
.sidebar-menu > li > ul > li:first-child > a {
  padding-top: 14px;
}
.sidebar-menu > li > ul > li:last-child > a {
  padding-bottom: 17px;
}
/* Sub Level Menu Item Icon */
.sidebar-menu > li > ul > li > a > span:nth-child(1) {
  margin-right: 10px;
  font-size: 11px;
}
/* Sub Level Menu Item Label */
.sidebar-menu > li > ul > li > a > span.label {
  float: right;
  line-height: 17px;
}
/* Multi Level Menu (submenu inside a submenu and so on) */
.sidebar-menu > li > ul > li ul {
  clear: both;
  display: none;
  width: 230px;
  height: auto;
  background-color: #22262c;
}
/* Multi Level Menu items */
.sidebar-menu > li > ul > li > ul li a {
  padding: 9px 20px 9px 50px;
}
.sidebar-menu > li > ul > li > ul li:last-child a {
  padding-bottom: 13px;
}
/* Multi Level Menu item label */
.sidebar-menu > li > ul > li > ul li a .label.label-xs {
  float: right;
  line-height: 17px;
}
/* Top Menu item active border */
.sidebar-menu > li > a.menu-open:after,
.sidebar-menu > li.active > a:after,
.sidebar-menu > li:hover > a:after,
.sidebar-menu > li:focus > a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: #AAA;
}
/* Sub-Menu Menu item active border */
.sidebar-menu > li > ul > li > a.menu-open:after,
.sidebar-menu > li > ul > li.active > a:after,
.sidebar-menu > li > ul > li:hover > a:after,
.sidebar-menu > li > ul > li:focus > a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: #AAA;
}
/* Multi-Menu childen active/hover border */
.sidebar-menu > li > ul > li > ul > li.active > a:after,
.sidebar-menu > li > ul > li > ul > li:hover > a:after,
.sidebar-menu > li > ul > li > ul > li:focus > a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 5%;
  height: 90%;
  width: 3px;
  background: #999;
}
/* Sidebar labels */
.sidebar-menu .sidebar-label {
  text-transform: uppercase;
  color: #70829a;
  font-weight: 600;
  padding-left: 18px;
  padding-bottom: 3px;
  font-size: 12px;
}
/* Sidebar pProjects */
/* Sidebar stats */
.sidebar-menu .sidebar-stat .progress {
  clear: both;
  background-color: #26292e;
}
.sidebar-menu .sidebar-stat > a {
  height: auto;
  overflow: visible;
}
/*===============================================
  B. Sidebar User Area
================================================= */
/* User Area Menu - A slide down user menu */
.user-menu {
  display: none;
  position: relative;
  left: 0;
  top: 0;
  height: 130px;
  width: 100%;
  padding: 10px;
  background-color: #282d33;
}
.user-menu a {
  position: relative;
  display: block;
  padding: 12px 5px 12px;
  margin-bottom: 3px;
  transition: all 0.2s ease;
}
.user-menu a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
/* menu icon */
.user-menu a span {
  font-size: 24px;
  transition: all 0.3s ease;
}
.user-menu a:hover span {
  color: #3078d7;
}
/* menu title */
.user-menu a h5 {
  display: none;
}
.user-divider {
  height: 4px;
  width: 100%;
  background-color: #e5e5e5;
  border-bottom: 1px solid #CCC;
}
/*====================================================
  C. Left Sidebar Minified
====================================================== */
/* Sidebar Minified Button */
.sidebar-toggle-mini {
  width: 35px;
  height: 32px;
  padding: 7px 0;
}
.sidebar-toggle-mini a {
  position: absolute;
  right: 0;
  display: block;
  text-align: center;
  padding: 6px 6px 5px;
  border: 1px solid #444;
  border-radius: 2px 0 0 2px;
  background-color: #26292e;
}
.sidebar-toggle-mini:hover span {
  color: #DDD;
  transition: all ease-in-out 0.3s;
}
.sidebar-toggle-mini span {
  position: relative;
  color: #888;
  font-size: 16px;
  transform: rotate(180deg);
}
/* active state */
/* Sidebar Minified State */
body.sb-l-m #sidebar_left {
  z-index: 1028;
  overflow: visible;
  width: 60px;
  height: 100%;
  left: 0;
  background-color: #30363e;
}
body.sb-l-m #sidebar_left:before {
  width: 60px;
}
body.sb-l-m .sidebar-header {
  display: none;
}
body.sb-l-m #sidebar_left .sidebar-label,
body.sb-l-m #sidebar_left .sidebar-title-tray,
body.sb-l-m #sidebar_left .sidebar-title,
body.sb-l-m #sidebar_left .caret {
  display: none;
}
body.sb-l-m #sidebar_left .sidebar-proj,
body.sb-l-m #sidebar_left .sidebar-stat {
  display: none;
}
/* Icon container */
body.sb-l-m .sidebar-menu > li {
  padding: 7px 0;
}
body.sb-l-m .sidebar-menu > li:hover {
	background-color:#282d33;
	border-top:1px solid #222;
	border-bottom:1px solid #222;
	padding: 6px 0;
}

body.sb-l-m .sidebar-menu > li > a {
  overflow: visible;
}
/* Icon */
body.sb-l-m .sidebar-menu > li > a > span:nth-child(1) {
  color: #ccc;
  left: -1px;
  width: 60px;
  font-size: 18px;
  padding-left: 0;
}
/* Active icon */
body.sb-l-m .sidebar-menu > li.active > a > span:nth-child(1) {
  color: #2f87c1;
}
/* Item title */
body.sb-l-m .sidebar-menu > li > a > .sidebar-title {
  position: fixed;
  left: 60px;
  top: 60px;
  width: 220px;
  height: 49px;
  line-height: 44px;
  font-size: 14px;
  padding-left: 15px;
  border-left: 1px solid #222;
  background-color: #282d33;
}
/* Convert submenus to visible only on hover */
body.sb-l-m .sidebar-menu > li > a.menu-open + ul {
  display: none;
}
body.sb-l-m .sidebar-menu > li:hover > a + ul,
body.sb-l-m .sidebar-menu > li:hover > a > .sidebar-title {
  display: block !important;
}
/* Sub-Menus title caret etc */
body.sb-l-m .sidebar-menu > li > ul li a > .caret {
  display: block !important;
}
/* Sub-Menus */
body.sb-l-m .sidebar-menu > li > ul {
  position: fixed;
  left: 60px;
  top: 102px;
  width: 220px;
  height: 100%;
  border-left: 1px solid #222;
   border-top: 1px solid #222;
  padding-bottom: 7px;
  overflow: hidden;
}
body.sb-l-m .sidebar-menu > li > ul > li ul {
  width: 220px;
}
/* catch overflow of multi-level submenus */
body.sb-l-m .sidebar-menu > li > ul > li {
  overflow: hidden;
}
/* first level menu item padding */
body.sb-l-m .sidebar-menu li > ul > li > a {
  padding: 10px 20px 9px 20px;
}
/* multi level menu item padding */
body.sb-l-m .sidebar-menu li > ul > li > ul > li a {
  padding: 8px 20px 8px 35px;
}
/* related page container modifications */
body.sb-l-m #content_wrapper {
  margin-left: 60px;
}
/* If sidebar is hidden and minified */
body.sb-l-c.sb-l-m #content_wrapper {
  margin-left: 0;
}
/* Navbar Branding Mini mode */
body.sb-l-m .navbar-branding {
  width: 60px;
}
body.sb-l-m .navbar-brand {
  display: none;
}
/*===============================================
  D. Nano Sidebar Scroller Settings (Core Plugin)
================================================= */
#sidebar_left.affix.nano .tooltip {
  z-index: 9999 !important;
}
/* If the sidebar is minified we disable nanoscroll via css
 * otherwise nano scroll hides popout menus and the scroll is
 * needed to see submenus with many items */
body.sb-l-m #sidebar_left.nano {
  position: fixed;
}
body.sb-l-m #sidebar_left.nano > .nano-content {
  overflow: visible;
  right: 0 !important;
}
/*=======================================================
  E. Sidebar Skins - Default Dark Skin 
========================================================= */
/* Top Level Menu Item - BG color:hover */
.sidebar-menu > li > a:hover,
.sidebar-menu > li > a:focus,
.sidebar-menu > li > a:active {
  background-color: transparent;
}
/* Top Level Item - Border Color:hover */
.sidebar-menu > li:hover > a:after,
.sidebar-menu > li:focus > a:after {
  background: transparent;
}
/* Top Level Active Menu Item - BG Color */
.sidebar-menu > li.active > a {
  background-color: transparent;
}
/* Top Level Active Menu Item - Icon Color */
.sidebar-menu > li.active > a > span:nth-child(1) {
  color: #22262c;
}
/* Top Level Active Item - Border Color */
.sidebar-menu > li.active > a:after,
.sidebar-menu > li > a.menu-open:after {
  background: transparent;
}
/* Sub-Menu Item - BG Color */
.sidebar-menu > li > ul {
  background-color: #282d33;
}
/* Sub-Menu Item - BG Color:hover */
.sidebar-menu > li > ul > li > a:hover,
.sidebar-menu > li > ul > li > a:focus {
  background-color: #22262c;
}
/* Sub-Menu Item - Border Color:hover */
.sidebar-menu > li > ul > li:hover > a:after,
.sidebar-menu > li > ul > li:focus > a:after {
  background: #22262c;
}
/* Sub-Menu Active Item - BG Color */
.sidebar-menu > li > ul > li.active > a {
  background-color: transparent;
}
/* Sub-Menu Active Item - Icon Color */
.sidebar-menu > li > ul > li.active > a > span:nth-child(1),
.sidebar-menu > li > ul > li > a.menu-open > span:nth-child(1) {
 
}
/* Sub-Menu Active Item - Border Color */
.sidebar-menu > li > ul > li.active > a:after,
.sidebar-menu > li > ul > li > a.menu-open:after {
 
}
/* Multi-Menu Item - BG Color */
.sidebar-menu > li > ul > li ul {
  background-color: #22262c;
}
/* Multi-level Item - BG Color:hover */
.sidebar-menu > li > ul > li > ul > li > a:hover,
.sidebar-menu > li > ul > li > ul > li > a:focus {
  background-color: transparent;
}
/* Multi-level Active Item - Border Color:hover */
.sidebar-menu > li > ul > li > ul > li:hover > a:after,
.sidebar-menu > li > ul > li > ul > li:focus > a:after {
  background: #967adc;
}
/* Multi-level Active Item - BG Color */
.sidebar-menu > li > ul > li > ul > li.active > a {
  background: transparent;
}
/* Multi-level Active Item - Icon Color */
.sidebar-menu > li > ul > li > ul > li.active > a > span:nth-child(1),
.sidebar-menu > li > ul > li > ul > li > a.menu-open > span:nth-child(1) {
  color: #ffffff;
}
/* Multi-level Active Item - Border Color */
.sidebar-menu > li > ul > li > ul > li.active > a:after {
  background: #967adc;
}
/* Top Level Menu Item - Label Color */
.sidebar-menu .sidebar-label {
  color: #70829a;
}
/* Top Level Menu Item - Link Color */
.sidebar-menu > li a {
  color: #ffffff;
}
/* Menu item Caret */
.sidebar-menu li > a > span.caret {
  color: #ffffff;
}
/* Open Menu item Caret */
.sidebar-menu li > a.menu-open > span.caret {
  
}
/* Usermenu - BG Color */
.user-menu {
  background-color: #282d33;
}
/* Usermenu - Item Icon Color */
.user-menu a span {
  color: #dddddd;
}
/* Usermenu - BG Color:hover */
.user-menu a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
/* Usermenu - Item Icon Color:hover */
.user-menu a:hover span {
 
}
/*=======================================================
  F. Sidebar Skins - Light Skin
     Applied via class to "#sidebar" 
     eg: <aside id="sidebar_left" class="sidebar-light">
========================================================= */
#sidebar_left.sidebar-light {
  color: #666;
  background-color: #fafafa;
  border-right: 1px solid #DDD;
  font-family: "Roboto";
}
#sidebar_left.sidebar-light .sidebar-menu .sidebar-label {
  color: #AAA;
  font-size: 11px;
  font-weight: 500;
}
#sidebar_left.sidebar-light .sidebar-menu li > a > span.caret {
  color: #BBB;
}
#sidebar_left.sidebar-light .sidebar-menu li > a.menu-open > span.caret {
  color: #999;
}
#sidebar_left.sidebar-light .sidebar-menu > li a {
  color: #888;
}
#sidebar_left.sidebar-light .sidebar-menu > li > a:hover,
#sidebar_left.sidebar-light .sidebar-menu > li > a:focus,
#sidebar_left.sidebar-light .sidebar-menu > li > a:active {
  background-color: transparent;
}
#sidebar_left.sidebar-light .sidebar-menu > li > a > span:nth-child(1) {
  color: #888;
}
#sidebar_left.sidebar-light .sidebar-menu > li > a > span:nth-child(2) {
  color: #555;
  font-weight: 500;
  letter-spacing: 0.4px;
}
#sidebar_left.sidebar-light .sidebar-menu > li.active > a > span:nth-child(1) {
;
}
#sidebar_left.sidebar-light .sidebar-menu > li > ul {
  background-color: #f2f2f2;
  box-shadow: 0 1px 0 #e5e5e5 inset, 0 -1px 0 #e5e5e5 inset;
}
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > a:hover,
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > a:focus {
  background-color: transparent;
}
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li.active > a > span:nth-child(1),
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > a.menu-open > span:nth-child(1) {

}
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li ul {
  background-color: #eaeaea;
  box-shadow: 0 1px 0 #d9d9d9 inset, 0 -1px 0 #d9d9d9 inset;
}
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > ul > li > a:hover,
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > ul > li > a:focus {
  background-color: transparent;
}
#sidebar_left.sidebar-light .sidebar-menu > li > a.menu-open:after,
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > a.menu-open:after {
  background: transparent;
}
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > a.menu-open:after,
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > ul > li > a.menu-open:after {
  background: #3bafda;
}
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > ul > li.active > a:after,
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > ul > li:hover > a:after,
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > ul > li:focus > a:after {
  background: #f6bb42;
}
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li.active > a > span.caret {
  color: #AAA;
}
#sidebar_left.sidebar-light .sidebar-menu .sidebar-stat .progress {
  background-color: #ddd;
}
#sidebar_left.sidebar-light .sidebar-toggle-mini a {
  background-color: #f7f7f7;
  border-color: #eaeaea;
}
#sidebar_left.sidebar-light.light {
  background-color: #fff;
}
#sidebar_left.sidebar-light.light .sidebar-menu > li > ul {
  background-color: #fbfbfb;
}
#sidebar_left.sidebar-light.light .sidebar-menu > li > ul > li ul {
  background-color: #f5f5f5;
}
#sidebar_left.sidebar-light .user-menu {
  background-color: #f2f2f2;
  box-shadow: 0 -1px 0 #e6e6e6 inset;
}
#sidebar_left.sidebar-light .user-menu a span {
  color: #777;
}
/* minified version of light sidebar */
body.sb-l-m #sidebar_left.sidebar-light {
  background-color: #FAFAFA;
}
body.sb-l-m #sidebar_left.sidebar-light.light {
  background-color: #FFF;
}
body.sb-l-m #sidebar_left.sidebar-light .sidebar-menu > li > a > .sidebar-title,
body.sb-l-m #sidebar_left.sidebar-light .sidebar-menu > li > ul {
  border: 1px solid #DDD;
  border-top: 0;
  background-color: #f8f8f8;
  left: 59px;
  box-shadow: none;
}
body.sb-l-m #sidebar_left.sidebar-light .sidebar-menu > li > a > .sidebar-title {
  border-top: 1px solid #DDD;
}
@media (max-width: 900px) {
  /* Sidebar Minified State */
  body.sb-l-m #sidebar_left {
    width: 45px;
  }
  body.sb-l-m #sidebar_left:before {
    width: 45px;
  }
  /* Menu item icon */
  body.sb-l-m .sidebar-menu > li > a > span:nth-child(1) {
    left: -1px;
    width: 45px;
    font-size: 18px;
  }
  /* menu item title */
  body.sb-l-m .sidebar-menu > li > a > .sidebar-title {
    position: fixed;
    left: 45px;
    top: 58px;
    width: 220px;
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    padding-left: 15px;
    border-left: 1px solid #222;
    background-color: #282d33;
  }
  /* Sub-Menus */
  body.sb-l-m .sidebar-menu > li > ul {
    position: fixed;
    left: 45px;
    top: 95px;
    width: 220px;
    height: 100%;
    border-left: 1px solid #222;
    padding-bottom: 7px;
    overflow: hidden;
  }
  
  .accordion-toggle:hover {background:red}
  body.sb-l-m .sidebar-menu > li > ul > li ul {
    width: 180px;
  }
  /* first level menu item padding */
  body.sb-l-m .sidebar-menu li > ul > li > a {
    padding: 8px 20px 8px 20px;
  }
  /* multi level menu item padding */
  body.sb-l-m .sidebar-menu li > ul > li > ul > li a {
    padding: 8px 20px 8px 35px;
  }
  /* related page container modifications */
  body.sb-l-m #content_wrapper {
    margin-left: 45px;
  }
  /* If sidebar is hidden and minified */
  body.sb-l-c.sb-l-m #content_wrapper {
    margin-left: 0;
  }
  /* Navbar brand minified (hide logo) */
  body.sb-l-o .navbar-brand,
  body.sb-l-m .navbar-brand {
    display: none;
  }
  /* Navbar branding minified */
  body.sb-l-o .navbar-branding,
  body.sb-l-m .navbar-branding {
    max-width: 45px;
    margin-right: 5px;
  }
  /* Navbar branding Toggle icon sidebar open */
  body.sb-l-o .navbar #toggle_sidemenu_l {
    transform: rotate(90deg);
  }
  /* Navbar branding toggle icon minified */
  body.sb-l-o.sb-l-m .navbar #toggle_sidemenu_l {
    transform: rotate(0deg);
  }
  /* Navbar branding toggle icon minified */
  body.sb-l-o .navbar #toggle_sidemenu_l,
  body.sb-l-m .navbar #toggle_sidemenu_l {
    width: 45px;
  }
  /* hide sidebar user menu button when the sidebar is
    collapsed. As it's not accessible in this mode*/
  .sb-l-o .navbar .sidebar-menu-toggle,
  .sb-l-c .navbar .sidebar-menu-toggle {
    margin-left: 10px;
    display: none;
  }
  #toggle_sidemenu_r {
    margin-top: 4px;
  }
}
/* ==============================================
   Right Sidebar
     A. Default Closed State
     B. Sidebar Right Panel Menu
     C. Nano Sidebar Scroller Settings
=================================================
  A. Default Closed State
================================================= */
#sidebar_right {
  position: fixed;
  width: 300px;
  height: 100%;
  top: 60px;
  right: -300px;
  border-left: 1px solid #ddd;
  background: #f8f8f8;
}
#sidebar_right .sidebar-right-header {
  width: 100%;
  height: 59px;
  padding: 4px 10px 4px 20px;
}
#sidebar_right .sidebar_right_content a:hover {
  text-decoration: none;
}
/*===============================================
   B. Sidebar Right Panel Menu
================================================= */
.title-divider {
  border-bottom: 1px solid #e8e8e8;
  padding: 0 5px 9px 5px;
}
#sidebar_right .panel {
  -webkit-box-shadow: none;
  box-shadow: none;
}
#sidebar_right .panel-heading {
  height: 51px;
  min-height: 51px;
  overflow: hidden;
}
#sidebar_right .panel-tabs li a {
  padding: 17px 18px;
  border-right: 1px solid transparent;
}
#sidebar_right .panel-tabs li:first-child a {
  border-left: 1px solid transparent;
}
/*===============================================
  C. Nano Sidebar Scroller Settings
================================================= */
#sidebar_right.nano > .nano-pane {
  background: rgba(0, 0, 0, 0.07);
}
#sidebar_right.nano > .nano-pane > .nano-slider {
  background: #444;
  background: #CCC;
}
/* ==============================================
    Sidebar Actions
     A. Sidebar Left Toggle
     B. Sidebar Right Toggle
     C. Left Sidebar Minified Helper
     D. Mobile Menu Modifications
=================================================
  A. Sidebar Left Toggle
================================================= */
/*left sidebar open*/
.sb-l-o #sidebar_left {
  left: 0;
  overflow: hidden;
}
.sb-l-o #content_wrapper {
  margin-left: 230px;
}
/*left sidebar closed*/
.sb-l-c #sidebar_left {
  left: -230px;
  overflow: hidden;
}
.sb-l-c #content_wrapper {
  margin-left: 0;
}
/*adjust navbar branding when closed*/
.sb-l-c .navbar-branding {
  width: 60px;
}
.sb-l-c .navbar-brand {
  display: none;
}
/*====================================================
  B. Sidebar Right Toggle
====================================================== */
/*Sidebar Right Open */
.sb-r-o #sidebar_right {
  right: 0;
}
.sb-r-o #content_wrapper {
  margin-right: 300px;
}
/*Sidebar Right Closed*/
.sb-r-c #sidebar_right {
  right: -300px;
}
.sb-r-c #content_wrapper {
  margin-right: 0;
}
/*====================================================
  C. Left Sidebar Minified Helper
====================================================== */
.sb-l-c.sb-l-m #sidebar_left {
  left: -60px;
}
/*hide sidebar user menu button when the sidebar is
collapsed. As it's not accessible in this mode*/
.sb-l-m .navbar .sidebar-menu-toggle,
.sb-l-c .navbar .sidebar-menu-toggle {
  margin-left: 10px;
  display: none;
}
/*===============================================
  D. Mobile Menu Modifications
================================================= */
/* At less than 1100px we collapse any open sidebars via 
Media Queries. Theme Javscript will also add a a
".mobile-view" class so that you can do any needed 
manipulation using an html class aswell */
@media (max-width: 1100px) {
  /* Sidebar Left Open/Default */
  #content_wrapper,
  .sb-l-o #content_wrapper {
    margin-left: 0;
    left: 0px;
  }
  /* Sidebar Left Minified */
  .sb-l-m #content_wrapper {
    left: 0;
  }
  /* Sidebar Left Closed */
  .sb-l-c #content_wrapper {
    margin-left: 0;
    left: 0;
  }
  /* Sidebar Right Open */
  .sb-r-o #content_wrapper {
    margin-right: 0;
    left: -300px;
  }
}
/* ==============================================
   Topbar
     A. Topbar Menu
     B. Topbar DropMenu
=================================================
  A. Topbar Menu
================================================= */
#topbar {
  z-index: 2;
  position: relative;
  width: 100%;
  min-height: 43px;
  padding: 6px 21px;
  background: #fafafa;
  border-bottom: 1px solid #e0e0e0;
}
.topbar-right {
  float: right;
}
.breadcrumb {
  float: left;
  position: relative;
  padding: 2px 25px 0 0;
  margin-bottom: 0;
  font-size: 14px;
  border-radius: 0;
  background-color: transparent;
}
.breadcrumb > li {
  color: #888;
  font-size: 12px;
}
.breadcrumb > li.crumb-active > a {
  color: #555;
  font-size: 17px;
}
/*Toggle sidemenu button*/
#toggle_sidemenu_r i.fa,
#toggle_sidemenu_r span.glyphicon,
#toggle_sidemenu_r span.glyphicons {
  margin-top: 2px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
/* toggle sidemenu button (when menu is open) */
body.sb-r-o #toggle_sidemenu_r i.fa,
body.sb-r-o #toggle_sidemenu_r span.glyphicon,
body.sb-r-o #toggle_sidemenu_r span.glyphicons {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
  color: #999;
}
/*toggle right sidebar badge
*/
.badge.badge-hero {
  position: relative;
  top: -12px;
  margin-left: -10px;
  padding: 2px 5px;
  font-size: 11px;
}
/*===============================================
   B. Topbar Dropmenu
================================================= */
#topbar-dropmenu {
  z-index: 9999;
  overflow: hidden;
  display: none;
  position: relative;
  padding: 17px 20px 10px;
  height: auto;
  width: 100%;
  background: url("../../../img/patterns/topbar-bg4.jpg") repeat -60px top;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4) inset;
}
#topbar-dropmenu:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
}
.topbar-menu .metro-tile {
  opacity: 0;
  display: block;
  height: 60px;
  position: relative;
  padding: 15px 5px 0;
  margin-bottom: 8px;
  border-radius: 4px;
  text-align: center;
  background: rgba(255, 255, 255, 0.25) !important;
  transition: background 0.2s ease;
}
.topbar-menu .metro-tile:hover,
.topbar-menu .metro-tile:focus,
.topbar-menu .metro-tile:active {
  color: #fff;
  background: rgba(255, 255, 255, 0.4) !important;
}
.topbar-menu .metro-icon {
  font-size: 44px;
}
.topbar-menu .metro-title {
  position: absolute;
  bottom: 0;
  left: 10px;
  font-size: 28px;
  font-weight: 600;
}
/* topbar menu modal */
.metro-modal {
  cursor: pointer;
  position: fixed;
  display: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.6);
}
@media (max-width: 700px) {
  #topbar .breadcrumb {
    padding-top: 3px;
    padding-left: 2px;
  }
  #topbar .breadcrumb .crumb-active {
    display: none;
  }
  #topbar .breadcrumb > li.crumb-active + li:before {
    display: none;
  }
}
@media (max-width: 900px) {
  body.sb-l-m #topbar.affix,
  body.sb-l-o.sb-l-m #topbar.affix {
    margin-left: 45px;
    width: auto;
  }
  body.sb-l-o #topbar.affix {
    margin-left: 230px;
    width: 100%;
  }
}
/* ================================================
   PAGES - In Order
      A. UI Animations Page
	  B. FAQ Page
	  C. Gallery.html
	  D. Calendar.html
	  E. Message Pages
	  F. Editors.html
	  G. External Pages
	  H. Invoice.html
	  I. Timeline.html
	  J. Map Pages
	  K. Profile.html
	  L. Error Pages

 * This file is reserved for changes done on
 * a per-page basis. To create independent
 * page layouts an additional class was added 
 * to the pages body. For example ui-animations.html
 * has an extra body class of ".ui-animations-page"
 
 * Note: Pages not listed here were made using
 * 100% reusable styles placed in theme.css
=================================================
  A. UI Animations Page
================================================= */
body.ui-animations-page #mac_wire {
  margin-top: 2.5%;
  margin-left: 3.5%;
  position: fixed;
  max-width: 440px;
}
body.ui-animations-page.svg-fill #mac_wire svg path:first-child {
  fill-opacity: 1;
  fill: #ccc;
  stroke: #999;
  stroke-width: 1px;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}
body.ui-animations-page.svg-fill #mac_wire svg path:last-child {
  fill-opacity: 1;
  fill: #555;
  stroke: #555;
  stroke-width: 3px;
  -webkit-transition: all ease 1s;
  transition: all ease 1s;
}
body.ui-animations-page .tray-center:after {
  opacity: 0;
  position: fixed;
  content: "\f04b";
  font-family: "FontAwesome";
  font-size: 46px;
  color: #3bafda;
  bottom: 10px;
  padding-left: 20px;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
body.ui-animations-page.animation-running .tray-center:after {
  opacity: 0.75;
}
body.ui-animations-page.animation-running .btn.btn-alt {
  opacity: 0.5;
}
body.ui-animations-page.animation-running .btn.btn-alt.item-checked {
  opacity: 1;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
/*===============================================
  B. FAQ Page
================================================= */
body.faq-page .input-group-merge {
  display: block;
}
body.faq-page .input-group-merge .input-group-addon {
  position: absolute;
  top: 10px;
  left: 13px;
  border: 0;
  background: transparent;
  z-index: 3;
  font-size: 18px;
}
body.faq-page .input-group-merge .input-group-addon + input.form-control {
  display: block;
  float: none;
  padding-left: 60px;
}
body.faq-page #icon-filter {
  
}
/*===============================================
  C. Gallery Page
================================================= */
body.gallery-page #mix-container {
  padding: 15px;
  text-align: justify;
  font-size: 0.1px;
}
body.gallery-page #mix-container:after {
  content: "";
  display: inline-block;
  width: 100%;
}
body.gallery-page #mix-container .mix,
body.gallery-page #mix-container .gap {
  display: none;
  vertical-align: top;
  width: 23.5%;
  margin-bottom: 20px;
}
body.gallery-page #mix-container .gap {
  display: inline-block;
}
body.gallery-page #mix-container .mix .panel {
  margin: 0;
}
body.gallery-page #mix-container .mix .panel img {
  cursor: pointer;
}
body.gallery-page .fail-message {
  display: none;
  text-align: center;
  font-size: 22px;
  color: #999;
  margin-top: 50px;
}
body.gallery-page .fail .fail-message {
  display: block;
}
@media (max-width: 1350px) {
  body.gallery-page #mix-container .mix,
  body.gallery-page #mix-container .gap {
    width: 31.5%;
  }
}
@media (max-width: 750px) {
  body.gallery-page #mix-container .mix,
  body.gallery-page #mix-container .gap {
    width: 48%;
  }
}
/*===============================================
  D. Calendar Page
================================================= */
body.calendar-page .fc-title-clone {
  font-size: 20px;
  text-align: center;
  margin: 8px 0 10px;
  padding-bottom: 15px;
  border-bottom: 1px solid #E7E7E7;
}
body.calendar-page .tray-left .ui-datepicker {
  background: none;
  margin: 0;
  border: 0;
}
body.calendar-page .tray-left .ui-datepicker-header {
  display: none;
}
body.calendar-page .tray-left .ui-datepicker td {
  padding: 8px 5px;
}
body.calendar-page .tray-left .ui-datepicker td span,
body.calendar-page .tray-left .ui-datepicker td a {
  background: #DDD;
  padding: .30em .20em;
}
body.calendar-page .tray-left #compose-event-btn {
  cursor: pointer;
  position: relative;
  top: 1px;
  padding-left: 8px;
  color: #888;
  font-size: 16px;
}
body.calendar-page .tray-center .fc-toolbar .fc-center h2 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 400;
}
@media (max-width: 900px) {
  body.calendar-page .fc-toolbar .fc-center {
    margin-top: 20px;
    margin-bottom: 10px;
  }
}
/*===============================================
  E. Messages Page
================================================= */
body.messages-page .nav-messages li a {
  color: #AAA;
}
body.messages-page .nav-messages li.active a,
body.messages-page .nav-messages li:hover a,
body.messages-page .nav-messages li:focus a {
  color: #666;
}
body.messages-page .compose-btn {
  font-weight: 600;
  margin-top: 2px;
  margin-bottom: 12px;
  padding: 11px 15px;
}
@media (max-width: 1020px) {
  body.messages-page.tray-rescale #content.table-layout .tray-center {
    padding-right: 65px !important;
  }
  /* creates a mini message tray, expands it on user hover */
  body.messages-page .message-tray {
    height: 175px;
    overflow: hidden;
    -webkit-transition: height 0.5s ease;
    transition: height 0.5s ease;
  }
  /* set to the height of your message menu */
  body.messages-page .message-tray:hover {
    height: 665px;
  }
}
@media (max-width: 600px) {
  body.messages-page.tray-rescale #content.table-layout .tray-center {
    padding: 0px !important;
  }
}
/*===============================================
  F. Editors Page
================================================= */
body.editors-page .panel .panel-heading {
  border-bottom-color: #CCC;
}
/*===============================================
  G. External Pages - login, register,
  screenlock, coming-soon, forgotpw
================================================= */
body.external-page {
  min-height: 0;
  overflow: auto;
}
body.external-page #main {
  overflow: hidden;
  background: url("../../../img/patterns/backgrounds/1.jpg") repeat top center;
}
body.external-page #main:before {
  display: none;
}
body.external-page #canvas-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
body.external-page #content .admin-form {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  margin-top: 8%;
}
body.external-page #content .panel {
  box-shadow: 0 1px 40px 0 rgba(0, 0, 0, 0.3);
}
body.external-page #content .panel-heading {
  padding: 32px 10px 15px;
}
body.external-page .login-links {
  font-size: 15px;
  color: #DDD;
}
body.external-page .login-links a {
  color: #DDD;
  font-weight: 300;
}
body.external-page .login-links a.active {
  color: #FFF;
  font-weight: 600;
}
body.external-page .login-links a:hover,
body.external-page .login-links a:focus {
  color: #FFF;
  text-decoration: none;
}
/*===============================================
  H. Invoice.html
================================================= */
body.invoice-page #invoice-info {
  margin-bottom: 15px;
}
body.invoice-page .table-condensed tbody tr td:last-child {
  text-align: right;
  padding-right: 15px;
}
body.invoice-page #invoice-summary {
  margin: 0;
}
body.invoice-page #invoice-summary thead th:first-child {
  text-align: right;
  width: 200px;
  padding-right: 55px;
}
body.invoice-page #invoice-summary thead th:last-child {
  width: 50px;
  font-weight: 400;
}
body.invoice-page #invoice-summary tbody tr td {
  border-top: 0;
}
body.invoice-page #invoice-summary tbody tr td:first-child {
  text-align: right;
  width: 200px;
  padding-right: 55px;
}
body.invoice-page #invoice-summary tbody tr:last-child td {
  background: #fafafa;
  border-top: 1px solid #EEE;
  border-bottom: 1px solid #EEE;
  height: 24px;
  line-height: 24px;
}
body.invoice-page .invoice-buttons {
  position: absolute;
  left: 15px;
  bottom: 10px;
}
/*===============================================
  I. Timeline.html
================================================= */
body.timeline-page #main {
  min-height: 400px;
}
body.timeline-page #content {
  padding: 8px 35px 50px 35px;
}
#timeline {
  position: relative;
}
/* Timeline Spine */
#timeline:after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  margin-left: -2px;
  height: 100%;
  content: "";
  background: #ddd;
}
/* Timeline Date Button/Label */
.timeline-divider {
  position: relative;
  margin: 10px 0 45px;
  z-index: 3;
}
.timeline-divider .divider-label {
  position: relative;
  width: 110px;
  margin: 0 auto;
  padding: 5px;
  text-align: center;
  border: 1px solid #DDD;
  color: #777;
  font-weight: 600;
  background: #FFF;
}
.timeline-divider .divider-label:before {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  left: 0;
  top: 100%;
  background: #4a89dc;
}
/* Timeline Content Panels */
#timeline .panel {
  position: relative;
  z-index: 11;
  overflow: visible;
  margin-bottom: 30px;
}
/* Timeline Panel Arrows */
#timeline .panel:before,
#timeline .panel:after {
  content: "";
  z-index: 2;
  position: absolute;
  top: 10px;
  left: 99.8%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent #fafafa;
}
#timeline .panel:after {
  z-index: 1;
  border-left-color: #666;
}
#timeline .right-column .panel:before,
#timeline .right-column .panel:after {
  top: 10px;
  right: 99.8%;
  left: auto;
  border-width: 8px 12px 8px 0;
  border-color: transparent #fafafa transparent transparent;
}
#timeline .right-column .panel:after {
  border-right-color: #666;
}
/* Timeline Panel Positioning */
#timeline > .row > .left-column .timeline-item {
  padding-right: 30px;
}
#timeline > .row > .right-column .timeline-item {
  padding-left: 30px;
}
#timeline > .row > .right-column {
  margin-top: 80px;
}
#timeline .ui-sortable-disabled .panel {
  cursor: auto;
}
/* Timeline Responsive Styles */
@media (max-width: 770px) {
  #timeline > .row > .left-column .panel {
    margin-right: 0;
  }
  #timeline > .row > .right-column .panel {
    margin-left: 0;
  }
  #timeline > .row .panel:before {
    display: none;
  }
  #timeline > .row .panel:after {
    display: none;
  }
}
#timeline .tab-content {
  min-height: 0;
}
/* form creation styles */
#timeline .map {
  width: 100%;
  height: 275px;
}
#timeline-image-form .fileupload-preview {
  text-align: center;
}
#timeline-image-form .fileupload-preview img {
  max-height: 200px;
}
/* JQuery sortable placeholder */
#timeline .ui-sortable {
  min-height: 150px;
  min-width: 300px;
}
.timeline-icon {
  z-index: 1;
  position: absolute;
  right: -18px;
  width: 38px;
  height: 38px;
  line-height: 38px;
  font-size: 20px;
  color: #FFF;
  text-align: center;
  border-radius: 50%;
  background: #eeeeee;
  box-shadow: 0 0 0 5px #eeeeee;
}
.right-column .timeline-icon {
  right: auto;
  left: -18px;
}
/* SINGLE TIMELINE */
#timeline.timeline-single {
  margin-left: 6%;
  max-width: 750px;
}
#timeline.timeline-single:after {
  left: 0;
}
#timeline.timeline-single > .row > .col-sm-6 {
  width: 100%;
  padding-left: 65px;
}
#timeline.timeline-single > .row > .right-column {
  margin-top: 0;
}
#timeline.timeline-single > .row > .right-column .timeline-item,
#timeline.timeline-single > .row > .left-column .timeline-item {
  padding-left: 0;
  padding-right: 0;
}
#timeline.timeline-single .timeline-divider .divider-label {
  margin-left: -55px;
}
#timeline.timeline-single .timeline-icon {
  left: -8px;
  right: auto;
}
/* Timeline Panel Arrows */
#timeline.timeline-single .panel:before,
#timeline.timeline-single .panel:after {
  right: 99.8%;
  left: auto;
  border-width: 8px 12px 8px 0;
  border-color: transparent #fafafa transparent transparent;
}
#timeline.timeline-single .panel:after {
  border-right-color: #666;
}
/*===============================================
  J. Map Pages - Full, Vector
================================================= */
.maps-vector-page #content_wrapper {
  min-height: 0;
}
.expanding-header {
  z-index: 999;
  position: absolute;
  top: 20px;
  left: 30px;
  width: 550px;
  height: 43px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  transition: all 0.2s ease-in-out;
}
.expanding-header.collapsed {
  width: 48px;
}
.expanding-header .map-header-icon {
  cursor: pointer;
  width: 47px;
  padding: 10px 13px;
  color: #FFF;
  font-size: 22px;
  float: left;
  margin-right: 10px;
}
.expanding-header .flag-sm {
  cursor: pointer;
}
.maps-page .expanding-header,
.map-full-page .expanding-header {
  top: 24px;
  left: 90px;
}
.maps-page .expanding-header input.form-control {
  min-width: 250px;
}
/*===============================================
  K. Profile.html
================================================= */
body.profile-page .profile-settings-btn {
  position: absolute;
  right: 20px;
  top: 20px;
}
body.profile-page .profile-settings-icon {
  z-index: 1;
  position: absolute;
  right: 13px;
  top: 7px;
}
body.profile-page #content .tab-block .nav-tabs > li > a {
  padding: 9px 35px;
}
/*===============================================
  L. Error Pages - 404, 500 (plus alt pages)
================================================= */
body.error-page {
  min-height: 0;
  overflow: hidden;
}
body.error-page #main:before {
  background: #F5F5F5;
}
body.error-page #return-arrow {
  top: 75px;
  padding-top: 0;
}
body.error-page .error-title {
  font-size: 140px;
  font-weight: 800;
  color: #4a89dc;
  text-align: center;
  padding-top: 60px;
  margin-bottom: 20px;
  line-height: 120px;
}
body.error-page .error-subtitle {
  font-weight: 400;
  text-align: center;
  font-size: 40px;
  color: #AAA;
  margin-bottom: 80px;
}
body.error-page .mid-section {
  position: relative;
  width: 100%;
  height: 215px;
  background: #FFF;
  border-top: 1px solid #E6E6E6;
  border-bottom: 1px solid #E6E6E6;
}
body.error-page .mid-content {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  padding: 50px 20px 35px;
}
body.error-page .mid-content input {
  color: #AAA;
  height: 55px;
  border-radius: 1px;
  padding: 10px 20px;
  border: 0;
  font-size: 16px;
  border: 1px solid #EEE;
  border-left: 5px solid #4a89dc;
  background: #FBFBFB;
}
body.error-page .error-page.alt .error-title {
  padding-top: 110px;
}
body.error-page #search-widget {
  background: #f1f1f1;
}
body.error-page .error-icon {
  font-size: 80px;
  position: relative;
  top: -10px;
}
body.error-page .error-text {
  font-size: 120px;
  text-align: center;
  text-shadow: 0 2px #FFF;
  color: #888;
  width: 100%;
}
/*===============================================
  Animate Settings
================================================= */
/* used in conjuction with "data-animate" 
 * attr to create a delayed page animation
 * read docs for more info on proper use*/
.animated-delay,
.animated-waypoint {
  opacity: 0;
}
.sparkline-delay {
  position: absolute;
  bottom: 0;
  width: 40px;
  height: 35px;
  line-height: 24px;
}
.animated.animated-short {
  -webkit-animation-duration: 0.6s !important;
  animation-duration: 0.6s !important;
}
.animated.animated-shorter {
  -webkit-animation-duration: 0.3s !important;
  animation-duration: 0.3s !important;
}
.animated.animated-long {
  -webkit-animation-duration: 1.4s !important;
  animation-duration: 1.4s !important;
}
.animated.animated-longer {
  -webkit-animation-duration: 2s !important;
  animation-duration: 2s !important;
}
/*===============================================
  XII. ANIMATE.CSS
=================================================

Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2014 Daniel Eden

*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
@-webkit-keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}
@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}
@-webkit-keyframes shake {
  0%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shake {
  0%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: none;
    transform: none;
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes wobble {
  0% {
    -webkit-transform: none;
    transform: none;
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}
@-webkit-keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}
@-webkit-keyframes bounceInDown {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bounceInDown {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bounceInLeft {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bounceInRight {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}
@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}
@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}
@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}


@media all and (max-width: 600px) {  
	.metro-title {font-size:12px}
}

.select2-single {
	width:100%
}

.numberCircle {
  border-radius: 50%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  width: 20px;
  height: 20px;
  padding: 2px;
  background: transparent;
  border: 2px solid #666;
  color: #666;
  text-align: center;
  font: 10px Arial, sans-serif;
  float:left;
  
}

.numberCircleNo {
  border-radius: 50%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  width: 20px;
  height: 20px;
  padding: 2px;
  background: transparent;
  border: 2px solid transparent;
  color: #666;
  text-align: center;
  font: 10px Arial, sans-serif;
  float:left;
}

.matOrderBox {
	background-color:#fafafa;
	width:100%;
	height:49px;
	position:fixed;
	top:60px;
	z-index:1000;
	border-bottom:1px solid #e0e0e0
}

.matOrderBoxRight {
	width:390px;
	float:right;
	padding-top:10px
}