/*
 * CSS specifically for product page.
*/


@font-face {
    font-family: 'Sonic';
    src: url('/files/fonts/sonic/sonic-webfont.woff2') format('woff2'),
         url('/files/fonts/sonic/sonic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#info p {
    font-size: 15px;
}
h4 {
    font-size: 15px;
}
#info .specs_highlight {
    display: flex;
	justify-content: center;
}
#info .specs_highlight .highlight_image {
	display: flex;
}
#info .specs_highlight .highlight_image img {
	object-fit: cover;
    max-width: 100%;
    height: auto;
}
#info .specs_highlight div.highlight_text {
	background: #000;
	padding: 3em;
}
#info .specs_highlight div {
	max-width: 50%;
}
#info .specs_highlight div.highlight_text h2 {
	color: #fff;
	font-size: 36px;
	font-family: 'Sonic';
	margin: 0;
}
#info .specs_highlight div.highlight_text h6 {
	margin: 0 0 20px;
	color: #bf0;
	font-size: 14px;
}
#info .specs_highlight div.highlight_text p {
	color: #fff;
	font-size: 11px;
	letter-spacing: 1px;
}
h1.product_title {
    font-size: 3.5rem;
    line-height: 3.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    font-family: 'Sonic';
}
h3.product_price {
    color: #c1db40;
    font-weight: 900;
    font-size: 2em;
    letter-spacing: 1px;
    margin: 0;
}
h3.product_price s {
    color: #000;
    font-size: .75em;
}
h3.product_price span {
    color: #000;
    font-size: 1.5rem;
    letter-spacing: 0px;
}
.big-image img {
    box-shadow: none;
    border: none !important;
}
.small-images img {
    cursor: pointer;
    margin-bottom: 10px;
    border: 1px solid #afd15d;
    height: 85px;
    object-fit: contain;
}
a.buy-now {
    text-align: center;
    margin: auto;
    display: block;
    background: #bf0;
    color: #000;
    font-weight: 900;
    font-size: 1.25em;
    border: 2px solid #bf0;
    border-radius: 10px;
    padding: .25em 0;
    transition: .5s ease;
    max-width: 300px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
a.buy-now:hover {
    background: #000;
    color: #bf0;
}
/* The purchase button, when this market has one. It is the page's primary
   action, so it runs the full width of the product column rather than sitting
   at the same 300px as the dealer-locator link below the list. */
a.buy-now-primary {
    max-width: none;
    width: 100%;
    height: 56px;
    font-size: 1.5em;
    letter-spacing: .02em;
}
a.database-btn {
    text-align: center;
    background: #bf0;
    color: #000;
    font-weight: 900;
    font-size: 1em;
    border: 2px solid #bf0;
    border-radius: 10px;
    transition: .5s ease;
    padding: .5em;
    margin: auto 20px;
    display: block;
}
a.database-btn:hover {
    background: #000;
    color: #bf0;
}
h5 {
    font-weight: 900;
    font-size: 1.25em;
    letter-spacing: 1px;
    margin: 0;
}
hr.border-chartreuse {
    border-top: 3px solid #bf0;
}
#product-tab .nav-link,
.sidebar ul li a {
    color: #000;
}
#product-tab-content h3 {
    font-weight: 900;
    font-size: 1.25em;
    letter-spacing: 1px;
    border-bottom: 3px solid #bf0;
    width: fit-content;
}
.sidebar ul,
#product-tab-content ul {
    padding: 0;
}
.sidebar ul li,
#product-tab-content li {
    list-style-position: inside;
    margin-bottom: 5px;
}
.sidebar ul li {
    list-style: none;
}
.specs-table tr:nth-child(odd) {
    background: #c1c1c1;
}
#specsTable tbody tr:nth-child(-n+3) {
    display: none;
}
.specs-table td {
    border: 1px solid;
    padding: 5px;
}
h5.breadcrumbs {
    font-size: 1em;
    padding-bottom: .35em;
}
h5.breadcrumbs a {
    color: #000;
}
.tab-content a {
    color: #000;
    font-weight: 900;
}
.card button.btn.btn-link {
    background: transparent;
    color: #000;
    text-transform: uppercase;
    text-align: center;
    display: block;
    margin: auto;
    width: 100%;
    text-decoration: none;
}
a#set-store {
    display: block;
    text-align: center;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    font-weight: 700;
    background: #bf0;
    padding: .5rem 0;
    font-size: 1.5rem;
}
.accordion>.card:first-of-type {
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}
.geo-allowed h3 {
    font-size: 1.5rem;
    font-weight: 700;
}
.geo-allowed p.h4 {
    font-size: 1.25em;
    text-transform: uppercase;
    font-weight: 700;
}
.geo-allowed a {
    color: #cce299;
}
.geo-allowed > a {
    text-transform: uppercase;
    font-size: 1rem;
    text-decoration: underline;
}
div#sidebar {
    position: fixed;
    background: #fff;
    border: 1px solid;
    height: 100vh;
    overflow-y: scroll;
    padding: 2em;
    right: 0;
    max-width: 320px;
    width: 100%;
    top: 0;
    z-index: 5;
}
div#sidebar a#close-sidebar {
    font-size: 2rem;
    color: #000;
    border: 2px solid;
    border-radius: 100%;
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    right: calc(-100% + 20px);
    position: relative;
    margin-bottom: 25px;
    text-decoration: none;
}
div#sidebar input {
    width: 100%;
    border: 2px solid #000;
}
div#sidebar .store-item {
  border: 1px solid;
  cursor: pointer;
  margin-bottom: 1rem;
  padding: 0.5rem;
}
div#sidebar .store-item > a {
    color: #cce299;
    text-transform: uppercase;
    font-size: .85rem;
    font-weight: 700;
}
div#sidebar .store-item p a {
    color: #000;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: underline;
}
div#sidebar .store-item h3, div#sidebar .store-item .h3 {
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25rem;
  margin-bottom: 0.5rem;
}

div#sidebar .store-item p.h4 {
  font-size: .8rem;
  line-height: 1.5;
  color: #000;
  word-wrap: break-word;
}

div#sidebar .store-item p.h4 span {
  display: block;
}

#pushdaddy-widget {
  z-index: 3 !important;
}

div#sidebar .store-item .availability {
  text-align: center;
  padding: 5px;
  background: red;
  font-weight: 700;
}

div#sidebar .store-item .availability.stock-in-stock {
  background: #bbff00;
}

div#sidebar a#close-sidebar {
  font-size: 2rem;
  color: #000;
  border: 2px solid;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  right: calc(-100% + 20px);
  position: relative;
  margin-bottom: 25px;
  text-decoration: none; }

@media only screen and (max-width: 576px) {
    .nav-tabs .nav-item {
        width: 100%;
        border: 1px solid;
    }
    .nav-tabs .nav-item .nav-link.active {
        background: #bf0;
    }
	#info .specs_highlight {
		flex-flow: column;
	}
	#info .specs_highlight div {
		max-width: 100%;
	}
	#info .highlight_image {
        order: 1;
    }
	#info .specs_highlight div.highlight_text h2 {
		font-size: 30px;
		text-align: center;
	}
	#info .specs_highlight div.highlight_text h6 {
		text-align: center;
	}
}