a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/*****************************************************************************
 * 1) TAGS
 *****************************************************************************/
body {
  padding-top: 4.5rem;
  padding-bottom: 6rem;
  background-color: #fff;
  background-size: 100%;
  font-family: "open_sanssemibold", sans-serif;
  color: #1b72c1;
}

a {
  color: #000;
}

a:hover {
  text-decoration: none;
  cursor: pointer;
}

#continue-shopping {
  color: #ee1d19;
  font-size: 85%;
}

/* FONTS */
@font-face {
  font-family: "open_sansregular";
  src: url("https://static.smoother.us/fonts/OpenSans-Regular-webfont.eot");
  src: url("https://static.smoother.us/fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
       url("https://static.smoother.us/fonts/OpenSans-Regular-webfont.woff") format("woff"),
       url("https://static.smoother.us/fonts/OpenSans-Regular-webfont.ttf") format("truetype"),
       url("https://static.smoother.us/fonts/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "open_sanssemibold";
  src: url("https://static.smoother.us/fonts/OpenSans-Semibold-webfont.eot");
  src: url("https://static.smoother.us/fonts/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"),
       url("https://static.smoother.us/fonts/OpenSans-Semibold-webfont.woff") format("woff"),
       url("https://static.smoother.us/fonts/OpenSans-Semibold-webfont.ttf") format("truetype"),
       url("https://static.smoother.us/fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "open_sansbold";
  src: url("https://static.smoother.us/fonts/OpenSans-Bold-webfont.eot");
  src: url("https://static.smoother.us/fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"),
       url("https://static.smoother.us/fonts/OpenSans-Bold-webfont.woff") format("woff"),
       url("https://static.smoother.us/fonts/OpenSans-Bold-webfont.ttf") format("truetype"),
       url("https://static.smoother.us/fonts/OpenSans-Bold-webfont.svg#open_sansbold") format("svg");
  font-weight: normal;
  font-style: normal;
}

/*****************************************************************************
 * 2) CLASSES
 *****************************************************************************/
.regular {
  font-family: "open_sansregular", sans-serif;
}

.bold {
  font-family: "open_sansbold", sans-serif;
}

.no-display {
  display: none;
}

.padding {
  padding: 24px 12px;
}

.bmargin {
  margin-bottom: 12px;
}

.bmargin24 {
  margin-bottom: 24px;
}

.bg-dark {
  background-color: #1b72c1 !important;
}

hr.white {
  background-color: white;
  margin: 24px 0;
}

.navbar {
  padding: 0 0.3rem;
}

.navbar-brand > img {
  height: 30px;
}

.powered-by {
  height: 20px;
}

.shop-item {
  color: #000;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  font-size: 85%;
}

.shop-item:hover {
  cursor: pointer;
  text-decoration: none;
  color: #000;
}

.shop-item img {
  width: 100%;
  border: none;
  margin-bottom: 0.4rem;
  cursor: pointer;
}

/* Cart */

.cart {
  margin: 0 12px 0 16px;
}

.cart > img {
  height: 20px;
}

.size-selected {
  background-color: #000 !important;
  color: #ee1d19 !important;
}

.btn-default {
  background-color: #ee1d19;
  color: #fff;
}

.btn-primary {
  background-color: #ee1d19;
  border: 1px solid #fff;
  color: #fff;
}

.btn-selected {
  background-color: #000;
  border: 2px solid #000;
  color: #fff;
}

.close-cart {
  display: block;
  clear: both;
  overflow: auto;
  padding: 12px;
  cursor: pointer;
}

.close-cart > img {
  height: 24px;
}

.cart-item {
  overflow: auto;
  background-color: #e0e0e0;
}

.cart-item-img {
  border-top: 1px solid #000;
  width: 20%;
  height: 125px;
  float: left;
}

.cart-item-detail {
  border-top: 1px solid #000;
  float: right;
  width: 80%;
  height: 125px;
  padding: 16px;
  color: #000;
  font-size: 80%;
  line-height: 1.2;
}

.cart-item-detail > .item-name {
  color: #000;
  font-size: 120%;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

/* End Cart */

.btn-outline {
  border: 1px solid #fff;
  background-color: #e4e4e4;
  color: #000;
  font-size: 125%;
  min-width: 44px;
  margin: 6px 6px 0 0;
}

.bottom-nav {
  color: #fff;
  font-size: 65%;
  cursor: pointer;
  opacity: 0.4;
  padding: 0.6rem;
  line-height: 1;
}

.bottom-nav:hover {
  color: #fff;
}

.bottom-nav > img {
  height: 24px;
  display: block;
  margin: auto;
  margin-bottom: 0.4rem;
}

.bottom-nav-active {
  opacity: 1;
}

/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
  background-color: white;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #ee1d19;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

.order-detail {
  border: 1px solid #ee1d19;
}

.order-code {
  display: block;
  background-color: #ee1d19;
  color: #fff;
  font-size: 250%;
  text-align: center;
  padding: 24px;
}

.order-status {
  display: block;
  background-color: #fff;
  color: #ee1d19;
  font-size: 125%;
  font-weight: bold;
  text-align: center;
  padding: 1.5rem;
}

.order-status-ready {
  color: #929292;
}

.order-status-picked-up {
  color: #9a9a9a;
}

.close {
  color: #000;
  opacity: 1;
}

.btn-checkout {
  background-color: #ee1d19;
  color: #fff;
}

.btn-light {
  background-color: #ee1d19;
  color: #fff;
}

.back-btn,
.back-btn-checkout {
  background-color: #fff;
  color: #000;
  padding: 10px;
  border-radius: 7px;
}

.btn-light.disabled,
.btn-light:disabled {
  background-color: #dcdcdc;
  border-color: #fff;
  color: #000;
}

/*****************************************************************************
 * 3) IDS
 *****************************************************************************/
#logo-vertical {
  padding: 0.4rem;
}

#logo-vertical > img {
  height: 13px;
  margin: auto;
}

#parallax-graphic {
  max-width: 100%;
  height: auto;
  display: block;
}

#shop-btn {
  cursor: pointer;
  margin: 0 5px 0 0;
}

#shop-detail {
  min-height: 80vh;
  color: #000;
  margin-top: 22px;
}

#item-detail > .col > img {
  width: 65%;
  margin: auto;
  margin-bottom: 1.4rem;
  display: block;
}

#item-title,
#item-cost {
  font-size: 125%;
  line-height: 1;
  text-transform: uppercase;
}

#item-description {
  font-size: 90%;
}

#selected-item-qty {
  width: 44px;
  font-size: 175%;
  margin: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#cart-preview {
  background-color: #e0e0e0;
  padding-bottom: 3rem;
  max-height: 80vh;
  overflow-y: scroll;
}

#add-to-cart {
  border-radius: 0;
  margin-top: 36px;
  padding: 16px;
  font-size: 100%;
}

#checkout,
#stripe-submit {
  border: none;
  border-radius: 0;
  background-color: #ee1d19;
  color: #fff;
  padding: 16px;
  font-size: 100%;
}

#cart-subtotal {
  border-top: 1px solid #000;
  clear: both;
}

#cart-subtotal-amount,
#cart-number-of-items {
  color: #000;
}

/* CatAndNat(?!?) Edits */

#can-logo {
  padding: 10px;
  max-width: 30%;
  height: auto;
  display: block;
  margin: auto;
}

#can-logo-white {
  padding: 10px;
  width: 70px;
  height: auto;
  display: block;
}