/*
 Theme Name:   Empire Storefront Child
 Theme URI:    http://empiretriclub.com
 Description:  Storefront child theme for Empire Triathlon Club
 Author:       Jean Kim
 Author URI:   http://jeanyoungkim.com
 Template:     storefront
 Version:      1.0.0
*/

/*
  red: #b71234;
  gray: #333333
*/

@font-face {
  font-family: Breuer; 
  src: url('fonts/Breuer/BreuerText-Bold.ttf'); 
  font-weight: 700; 
}

@font-face {
  font-family: Breuer; 
  src: url('fonts/Breuer/BreuerText-Medium.ttf'); 
  font-weight: 600; 
}

@font-face {
  font-family: Breuer; 
  src: url('fonts/Breuer/BreuerText-Regular.ttf'); 
  font-weight: 400; 
}

body * {
  font-family: Breuer, Helvetica, Arial, sans-serif;
}


/*-------------------PAGE------------------*/

#page {
  background-color: white;
}

#page, footer, #sponsors {
  margin: 0 auto;
  max-width: 1100px;
}

@media (min-width: 1400px) {
  #page, footer, #sponsors {
    margin: 0 auto;
    max-width: 1400px;
  }
}

body.custom-background {
  background-position: top !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}

/*------------------HEADER-----------------*/

#call-to-join {
  text-align: center;
  padding: 0.5em;
  background-color: #333333;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('images/spraypaint.jpg');
  color: #222;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.7em;
}

#call-to-join span {
  color: #b71234;
  border: 3px solid #b71234;
  padding: 0.2em 0.5em;
  text-transform: uppercase;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

#call-to-join:hover span {
  background-color: #b71234;
  color: white;
}

#fft {
  text-align: center;
  padding: 0.1em 0;
  background-color: #b71234;
  color: white;
  text-transform: uppercase;
  font-size: 1.4em;
  font-weight: 700;
  background:
    -webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
    -webkit-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
    -webkit-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
    -webkit-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
    -webkit-linear-gradient(left, #1b1b1b 10px, transparent 10px),
    -webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
  background:
    linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
    linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
    linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
    linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
  background-color: #131313;
  background-size: 20px 20px;
}

#masthead {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

#masthead * {
  font-weight: 600;
}

a {
  outline: none !important;
}

p.site-description {
  display: none;
}

.site-header .site-logo-link img {
  height: auto;
  max-width: 100%;
  max-height: none;
  float: left;
  display: inline-block;
  width: 50%;
}

@media screen and (min-width: 768px) and (max-width: 864px) {
  .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {
    padding: 0 0.5em 0 0.5em; /* Removed extra padding on main menu on tablet */
  }
}

@media screen and (min-width: 768px) {

  .woocommerce-active .site-header .secondary-navigation {
    float: right;
    margin-right: 1%;
    width: 20%;
    margin-bottom: 10px; /* make header smaller */
  }

  .woocommerce-active .site-header .site-logo-link {
    width: 70%;
    margin-bottom: 0; /* make header smaller */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .site-header .site-logo-link img {
    width: 35%;
  }

  p.site-description {
    display: inline-block;
    color: white;
    font-weight: 400;
    line-height: 1.2;
    margin: 15px 0 0 20px;
    width: 55%;
  }

}

/*------------------HOME---------------------*/

.empire-homepage #masthead {
  margin-bottom: 0;
  padding-top: 2%;
}

#featured-carousel {
  margin: 0;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

#featured-carousel .carousel-item {
  background-size: cover;
  background-position: center center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
          align-content: flex-start;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 35em;
}

#featured-carousel .carousel-item::after {
  content:'';
  background-image: url('images/tornpaper.png');
  height: 6em;
  min-height: 60px;
  position: absolute;
  bottom: 0;
  z-index: 5;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  /* fixes display issue in firefox */
  display: inherit; 
}

#gradient {
    position:absolute;
    z-index:2;
    right:0; 
    bottom:0; 
    left:0;
    height: 200px;
    background-image: url('images/tornpaper.png');
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(80%,rgba(0,0,0,1)));
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 80%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}

#featured-carousel .carousel-item .carousel-item-content {
  width: 80%;
}

.owl-item {
  text-align: right;
}

.owl-item:nth-child(2n) {
  text-align: left;
}

.carousel-item h1 {
  font-size: 3.5em;
  font-weight: 700;
  line-height: 0.8;
  text-transform: uppercase;
  display: inline-block;
}

.carousel-item p {
  font-size: 1.5em;
  line-height: 1.1;
}

.carousel-item h1,
.carousel-item p {
  color: #fff;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
}

.carousel-item-content {
  max-width: 64.141em;
  margin: 0 auto;
}

.border {
  padding: 4px;
  border: 4px solid rgba(163, 16, 46, 0.9);
}

.background {
  background-color: rgba(163, 16, 46, 0.9);
  padding: 4%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.background:hover {
  background-color: #a3102e;
}

#buckets .product {
  margin: 0 1.9%;
}

.bucket {
  padding: 20px;
}

.bucket h1 {
  padding: 20px 0;
  margin: 0;
}

.bucket-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 20em;
}

ul.products li.product .bucket img {
  margin: 0;
}

/*--------------Archives------------------*/

/*-------------In the News----------------*/

.post-type-archive-etc_news .content-area,
.post-type-archive-etc_member_discounts .content-area {
  width: 100%;
  float: right;
  margin-right: 0;
  margin-left: 0;
}

/*------------Member Discounts------------*/

#member-discounts {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

#member-discounts .etc_member_discounts {
  margin: 1em 2%;
  padding-bottom: 0;
  width: 46%;
}

#member-discounts .hentry .wp-post-image {
  max-height: 5em;
  width: auto;
}

/*---------------CALENDAR---------------*/
.mv-daynames-table {
  background: #333;
}

/*---------------Footer-------------------*/

#sponsors {
  background-color: white;
  overflow: hidden;
}

#sponsors-banner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 25px auto 35px auto;
}

#sponsors li {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 50px;
  list-style: none;
  margin: 0 20px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  /* ensures that flex children aren't wider than the parent */
  min-width: 1px;
}

#sponsors li:first-child {
  margin-left: 0;
}

#sponsors li:last-child {
  margin-right: 0;
}

#sponsors li img {
  max-height: 100%;
  margin: 0 auto;
}

.site-footer {
  background-color: #333333;
  color: white;
}

.site-footer * {
  font-weight: 400;
}

.site-footer h3 {
  font-size: 16px;
}

.site-footer a {
  font-size: 12px;
  font-weight: 200;
}

.site-footer input[type="submit"] {
  background-color: #b71234;
  display: block;
  width: 100%;
}

.site-footer input[type="submit"]:hover {
  background-color: #9d1531;
}

/*----------------Mobile---------------*/

.main-navigation ul li a:before,
.widget_recent_entries ul li:before, 
.widget_pages ul li:before, 
.widget_categories ul li:before, 
.widget_archive ul li:before, 
.widget_recent_comments ul li:before, 
.widget_nav_menu ul li:before, 
.widget_links ul li:before {
  display: none !important; /* hide paper icons on menu items */
}

/*--------------------Phone--------------------*/
@media screen and (max-width: 568px) {

  .woocommerce-active .site-header .secondary-navigation {
    display: inline-block;
    float: right;
    margin: 0;
  }

  .woocommerce-active .site-header .secondary-navigation ul {
    list-style: none;
  }

  #sponsors-banner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  #sponsors h5 {
    text-align: center;
  }

  #sponsors li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: auto;
    max-width: 40%;
    margin: 20px auto;
  }

  #sponsors li:first-child {
    margin-left: auto;
  }

  #sponsors li:last-child {
    margin-right: auto;
  }

  .bucket-image {
    height: 20em;
  }

  #member-discounts {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  #member-discounts .etc_member_discounts {
    display: block;
    margin: 20px auto;
    width: 100%;
  }

  .responsive-table th,
  .responsive-table thead {
    display: none;
  }

  .responsive-table tr {
    border-bottom: 1px solid lightgray;
  }

  .responsive-table td {
    display: block;
    text-align: left !important;
  }

  .responsive-table td:before {
    content: attr(data-th)": ";
    color: #000;
    font-weight: bold;
  }

}

/*----------------Overrides & Extras----------------*/

/* reduce left margin of carets on main menu items */
.main-navigation ul.menu > li.menu-item-has-children > a:after, .main-navigation ul.menu > li.page_item_has_children > a:after, .main-navigation ul.nav-menu > li.menu-item-has-children > a:after, .main-navigation ul.nav-menu > li.page_item_has_children > a:after {
  margin-left: 0.5em;
}

/* move page headers close to the breadcrumbs */
.woocommerce-breadcrumb {
  margin-bottom: 2em;
}

/* move page content closer to page header */
.hentry .entry-header {
  margin-bottom: 1.5em;
}

/* make sidebar links red */
.widget-area .widget a {
  color: #b71234;
}

table {
 border-collapse: collapse;
}

.small-table {
  margin: 0 auto;
  width: auto;
}

/*----------Mad Spraypaint Up In The Club----------*/

.right-sidebar .widget-area,
#buckets .product {
  border: 10px solid #333333;
  border-image-source: url('images/spraypaint_swatch.svg');
  border-image-slice: 30 30;
  border-image-repeat: repeat;
  border-width: 10px;
}

.right-sidebar .widget-area {
  padding: 1.5%;
}

.spraypaint-border {
  border-image-source: url('images/spraypaint_swatch.svg');
  border-image-slice: 30 30;
  border-image-repeat: repeat;
  border-width: 10px;
  padding: 1% 1.5%;
}

.spraypaint-border * {
  margin: 0;
}

/*----------Empire Color Buttons----------*/

.button-green {
  background-color: #B6BF00;
}

.button-green:hover {
  background-color: #a3ab00;
}

/*----Storefront Pricing Columns----*/
.storefront-pricing-column p+h4 {
  margin: 0;
}

/***********custom-css************/
.main-navigation ul li a, .site-title a, ul.menu li a, .site-branding h1 a, .site-footer .storefront-handheld-footer-bar a:not(.button), button.menu-toggle, button.menu-toggle:hover, .handheld-navigation .dropdown-toggle {
    color: #d5d9db !important;
}
.main-navigation ul li a:hover, .main-navigation ul li:hover > a, .site-title a:hover, a.cart-contents:hover, .site-header-cart .widget_shopping_cart a:hover, .site-header-cart:hover > li > a, .site-header ul.menu li.current-menu-item > a {
    color: #ffffff !important;
}
button, input[type="button"], input[type="reset"], input[type="submit"], .button, .widget a.button {
    color: #ffffff !important;
}
div#sponsors h5 {
    font-weight: bold !important;
}
h1.entry-title {
    font-weight: bold;
}
.entry-content a {
    font-weight: 600 !important;
}
nav.woocommerce-breadcrumb {
    background-color: #f8f8f8;
    padding: 1.41575em 99em;
    margin-left: -99em;
    margin-right: -99em;
}
.storefront-breadcrumb {padding: 0px !important;}
@media (min-width: 768px){
.storefront-breadcrumb {padding: 0px !important;margin: 0 !important;}
}

/**21-Feb**/
.site-header .site-logo-link {float: left;}
.secondary-navigation .menu a{color: #9aa0a7 !important;}
/***********custom-css************/