/* PRODUCTS PAGE */
.content-products{
  height: 100%;
}
.content-products .row{
  margin: 0 !important;
  padding: 5% 10%;
  padding-top:7%;
}
.guitar-col{
  height: 65vh;
  padding: 2em;
  padding-top: 4em;
  text-align: center;
}
.products-svg{
  display: inline-block;
  height: 100%;
}
.products-svg g{
  fill: none;
  stroke: var(--black);
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:10;
  stroke-width:20px;
  transition: 0.2s ease-in-out;
}
.products-svg:hover g{
  stroke: var(--red);
}
#pickups-svg g{
  stroke-width:18px;
}
.products-page-headings{
  font-size: 3.5vh;
}
.products-page-labels{
  color: var(--black);
  font-family: 'montserrat', serif;
  font-size: 2vh;
  margin-top: 1em;
  transition: 0.2s ease-in-out;
}
.products-page-link:hover{
  text-decoration: none;
}
.products-page-link:hover .products-page-labels{
  color: var(--red);
}

/* BACK LINK */
.back-link{
  color: var(--black);
  transition: 0.2s ease-in-out;
}
.arrow-icon{
  display: inline-block;
  width: 0.8em;
}
.back-link:hover{
  color: var(--red);
  text-decoration: none;
}
#back-svg g{
  fill:none;
  stroke: var(--black);
  stroke-linecap:square;
  stroke-linejoin:bevel;
  stroke-width:12px;
  transition: 0.2s ease-in-out;
}
.back-link:hover #back-svg g{
  stroke: var(--red);
}

/*GUITAR LIST PAGE*/
#list-loading-text{
  color: var(--grey);
  height: 5em;
  margin-bottom: 2em;
  margin-top: 7em;
  text-align: center;
  width: 100%;
}
#list-heading{
  margin-bottom: 1em;
}
#list-model-description{
  margin-bottom: 3em;
  max-height: 5em;
  overflow: hidden;
  position: relative;
}
.gradient{
  background-image: linear-gradient(to bottom, transparent, var(--white));
  bottom: 1em;
  height: 1em;
  left: 0;
  padding-top:4em;
  position: absolute;
  width: 100%;
}
.read-more{
  background-color: var(--white);
  bottom: 0;
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}
.read-more a{
  color: var(--black);
  transition: 0.2s ease-in-out;
}
.read-more a:hover{
  color: var(--red);
  text-decoration: none;
}

/* GUITAR CARDS */
#forward-svg g{
  fill:none;
  stroke: var(--black);
  stroke-linecap:square;
  stroke-linejoin:bevel;
  stroke-width:12px;
  transition: 0.2s ease-in-out;
}
.indiv-button:hover #forward-svg g{
  stroke: var(--red);
}
.content-list{
  height: inherit;
  padding: 5% 15%;
  padding-bottom: 10em;
  padding-top:10%;
}
.card{
  border-radius: 0;
  margin-bottom: 2em;
}
.card-buttons{
  margin-top: 1em;
}
.play-icon{
  display: inline-block;
  width: 0.8em;
}
.audio-timestamp{
  color: var(--grey);
  font-size: 90%;
  margin-left: 1em;
}
.button-container{
  float: right;
  margin-bottom: 1em;
  margin-right: 1em;
}
.indiv-button{
  color: var(--black);
  margin-left: 1em;
  transition: 0.2s ease-in-out;
}
.indiv-button:hover{
  color: var(--red);
  text-decoration: none;
}
.list-icon{
  display: inline-block;
  width: 1.2em;
}
.icon-svg g{
  fill: var(--black);
  transition: 0.2s ease-in-out;
}
.icon-pause{
  fill:none;
  stroke:var(--black);
  stroke-linecap:round;
  stroke-miterlimit:10;
  stroke-width:8px;
}
.indiv-button:hover .icon-svg g{
  fill: var(--red);
  stroke:var(--red);
}
.available-note{
  color: var(--green);
  margin-right: 1em;
}
.not-available-note{
  color: var(--grey);
  margin-right: 1em;
}


/* PICKUPS */
.content-pickups{
  padding: 4em;
  padding-top: 10%;
}
#models-title{
  margin-bottom: 1em;
  margin-top: 1em;
}


/* INDIVIDUAL BUY NOW PAGE */
.content-indiv{
  padding: 12%;
}
#indiv-back-link-container{
  margin-bottom: 1em;
}
#indiv-contain-img{
  display: inline-block;
  width: 100%;
}
#indiv-button-contianer{
  display: inline-block;
  width: 50%;
}
#view-images{
  backdrop-filter: blur(10px);
  background-color: rgba(38, 39, 48, 0.8);
  display: none;
  height: 100%;
  left: 0;
  padding: 1em;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 5;
}

#view-img-contain{
  display: inline-block;
  height: 100%;
  max-width: 100%;
}
#indiv-img-close{
  cursor: pointer;
  margin-right: 1em;
  padding: 1em;
  position: absolute;
  right: 0;
  top: 0;
}
#indiv-img-close-svg{
  width: 1em;
}
#indiv-img-close-svg g{
  fill:none;
  stroke: var(--offwhite);
  stroke-miterlimit:10;
  stroke-width:4px;
  transition: 0.2s ease-in-out;
}
#indiv-img-close:hover #indiv-img-close-svg g{
  stroke: var(--red);
}
#indiv-img{
  cursor: -moz-zoom-in;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}
.view-image-button{
  color: var(--offwhite);
  cursor: pointer;
  padding: 1em;
  position: absolute;
  top: 50%;
  transition: 0.2s ease-in-out;
}
#view-img-prev{
  left: 3em;
}
#view-img-next{
  right: 3em;
}
.view-image-button:hover{
  color: var(--red);
  cursor: pointer;
}
.indiv-page-button{
  border: 2px solid var(--black);
  color: var(--black);
  display: block;
  margin-top: 1em;
  padding: 1em 1em;
  text-align: center;
  transition: 0.2s ease-in-out;
}
.indiv-page-button:hover{
  color: var(--red);
  border: 2px solid var(--red);
  text-decoration: none;
}
.indiv-page-button:hover .icon-svg g{
  fill: var(--red);
}
#paypal-icon{
  display: inline-block;
  width: 1.5em;
}
#indiv-features-list{
  color: var(--grey);
  list-style-position: inside;
}
#indiv-thumbnails{
  scroll-behavior: smooth;
  overflow-x: scroll;
  margin-bottom: 2em;
}
.thumbnail-link{
  border: 0px solid var(--red);

  display: inline-block;
  height: 3em;
  margin-bottom: 0.5em;
  margin-right: 0.5em;
  margin-top: 0.5em;
  transition: 0.2s ease-in-out;
  width: 3em;
}
.thumbnail-link:hover{
  border: 2px solid var(--red);
  cursor: pointer;
}
.thumbnail-active{
  border: 2px solid var(--red);
  cursor: default;
  pointer-events: none;
}
.thumbnail-img{
  display: inline-block;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  width: 100%;
}
.indiv-type-header{
  margin-bottom: 0.5em;
}