/**
 * Add any custom CSS here.
 *
 * This file will be loaded after all theme stylesheets.
 */

@media screen and (min-width: 768px) {
  /* LOGO */
  .site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { width: 55% !important;}
  /* MISC */
  .main-navigation, .woocommerce-active .site-header .site-header-cart { padding-top: 0px; }
  .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a, .site-header-cart .cart-contents { padding-bottom: 10px; }
  /* SECONDARY NAVIGATION */
  .site-header .secondary-navigation { width: 5% !important;}
  /* SEARCH BAR */
  .site-header .site-search { width: 30% !important;}
}

/** reduce the space between top of screen and logo */
header#masthead { padding: 10px; }


/** reduce the space between top of page and header */
.home header#masthead.site-header { margin-bottom: 10px; }


/** customise the on sale ticket */
.onsale {
  background-color: #FFFFFF;
  border-color: #FF0000;
  color: #FF0000;
}

/** hide the focus outline on hyperlinks */
a:focus {
    outline: none;
}

/** Change the product page tabs to horizontal */
.woocommerce-tabs ul.tabs li { /* Assumes there are only two tabs. As each tab is set to half the width tab 3 will move underneath, but you could change the width to 33.3% to stop this */
    float: left;
    padding: 0 15px;
    width: 33.3%;
}

.woocommerce-tabs ul.tabs {
    width: auto;
    float: none;
    margin-right: 0px;
}

.woocommerce-tabs ul.tabs li::after { /* Change right pointing arrow to down pointing arrow */
    content: "\f107";
}

.woocommerce-tabs .panel {
    width: auto;
    float: none;
}