@import url(//db.onlinewebfonts.com/c/1f93201f913435bced6341fbb33e0d06?family=DINNextLTW04-UltraLight);
.container {
  max-width: 1200px;
  margin: auto;
  padding: .5rem;
}

.product-container {
  max-width: 1150px;
  margin: auto;
}

.header-text {
  font-size: 5vh;
}

.sub-header-text {
  font-size: 3vh;
}

.pd-t-half {
  padding-top: .5rem;
}

.pd-b-half {
  padding-bottom: .5rem;
}

.pd-t-1 {
  padding-top: 1rem;
}

.pd-t-2 {
  padding-top: 2rem;
}

.pd-t-3 {
  padding-top: 3rem;
}

.pd-b-1 {
  padding-bottom: 1rem;
}

.pd-b-2 {
  padding-bottom: 2rem;
}

.pd-b-3 {
  padding-bottom: 3rem;
}

.pd-l-1 {
  padding-left: 1rem;
}

.pd-l-2 {
  padding-left: 2rem;
}

.pd-l-3 {
  padding-left: 3rem;
}

.pd-r-1 {
  padding-right: 1rem;
}

.pd-r-2 {
  padding-right: 2rem;
}

.pd-r-3 {
  padding-right: 3rem;
}

.mg-b-1 {
  margin-bottom: 1rem;
}

.mg-b-2 {
  margin-bottom: 2rem;
}

.mg-t-2 {
  margin-top: 2rem;
}

.top-border {
  border-top: 1px solid black;
}

.product-line-background {
  border: 1px solid grey;
}

.copyright {
  display: block;
  background: #D3D7D8;
  text-align: center;
  bottom: 0;
}

a {
  color: inherit;
}

.btn-product {
  background: #dcdcdc;
  border: none;
  border-radius: 5px;
  padding: .5rem .2rem;
  bottom: 0;
  outline: none;
  font-size: larger;
  transition: all .5s ease;
  padding: .5rem;
  color: black;
  cursor: pointer;
  width: 100%;
}

.btn-product:hover {
  transition: all .5s ease;
  background: red;
  color: white;
  font-size: larger;
}

.image-holder {
  width: 100%;
}

.image-holder-footer {
  width: 50%;
}

.text-underline {
  border-bottom: solid 2px red;
  padding-bottom: .5rem;
}

.detail-title {
  padding-bottom: .5rem;
}

.product-template {
  border-top: red 2px solid;
  background-color: #fafafa;
  padding: .5rem;
  transition: all .5s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-template:hover {
  transition: all 1s ease;
  box-shadow: 1px 8px 20px grey;
}

.product-template-item {
  background: #F6FAFB;
  padding: 1rem;
}

.product-template-title {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.link-underline {
  border-bottom: dotted 1px black;
  padding: .5rem;
}

.link-underline:hover {
  transition: all .2s ease-in;
  background: red;
  color: white;
  padding-left: 2rem;
}

.link-underline:last-child {
  border-bottom: none;
}

.input-field {
  border: none;
  background: white;
  border-radius: 5px;
  padding: .5rem 1rem;
}

.input-field:focus {
  outline: none;
}

button:focus {
  outline: none;
}

.cap {
  text-transform: capitalize;
}

@font-face {
  font-family: "DINNextLTW04-UltraLight";
  src: url("//db.onlinewebfonts.com/t/1f93201f913435bced6341fbb33e0d06.eot");
  src: url("//db.onlinewebfonts.com/t/1f93201f913435bced6341fbb33e0d06.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/1f93201f913435bced6341fbb33e0d06.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/1f93201f913435bced6341fbb33e0d06.woff") format("woff"), url("//db.onlinewebfonts.com/t/1f93201f913435bced6341fbb33e0d06.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/1f93201f913435bced6341fbb33e0d06.svg#DINNextLTW04-UltraLight") format("svg");
}

* {
  font-family: 'DINNextLTW04-UltraLight', sans-serif;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body a {
  text-decoration: none;
}

#phone-btn {
  text-align: center;
}

.call-btn {
  background: #dcdcdc;
  border: none;
  border-radius: 5px;
  padding: .5rem .2rem;
  bottom: 0;
  outline: none;
  font-size: 1.1vw;
  transition: all .5s ease;
  padding: .5rem;
  color: black;
  font-weight: bold;
  cursor: pointer;
}

.call-btn:hover {
  transition: all .5s ease;
  background: red;
  color: white;
  font-size: 1.2vw;
  font-weight: bolder;
}

hr {
  padding: 0 !important;
}

hr:nth-of-type(2) {
  position: relative;
  top: -2rem;
  z-index: -1;
}

#nav-contact {
  background: #D0D4D1;
  padding: .1rem 1rem;
}

#nav-contact ul {
  display: flex;
  list-style: none;
  justify-content: space-between;
}

#nav-contact ul a {
  text-decoration: none;
  font-weight: bolder;
}

nav {
  background: #ecf0f1;
}

nav #hamburger {
  display: none;
}

nav #navbar {
  font-weight: bolder;
  font-size: larger;
  display: grid;
  grid-template-columns: 2fr 3fr;
  height: 70px;
  margin: 0;
}

nav #navbar-brand {
  justify-self: left;
  display: flex;
  align-items: center;
}

nav #navbar-brand img {
  height: 65px;
}

nav #navbar-content {
  display: grid;
  grid-template-columns: 1fr;
  align-content: space-evenly;
}

nav #navbar-content ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  text-align: center;
}

nav #navbar-content ul a {
  font-weight: bold;
  color: black;
  transition: all .2s linear;
}

nav #navbar-content ul a:hover {
  transition: all .2s linear;
  color: red;
  font-weight: bolder;
}

#title-content-image {
  background: url("../img/spraybooth-title.jpg") no-repeat center center/cover, url("../img/spraybooth-title.webp") no-repeat center center/cover;
  opacity: .7;
  height: 80vh;
}

#title-content-text {
  padding-top: 50vh;
  display: grid;
  grid-template-columns: 3fr 2fr;
  color: white;
}

#title-content-text .transparent-background {
  background: rgba(0, 0, 0, 0.6);
  padding: .4rem;
}

#product img {
  width: 30vw;
  max-width: 400px;
  min-width: 300px;
  max-height: 300px;
  border-radius: 2px;
  opacity: .7;
}

#product-line {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: .5rem;
}

#product-line #automotive {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1rem;
  transition: all .5s linear;
}

#product-line #automotive:hover {
  background: #ecf0f1;
  transition: all .2s ease;
}

#product-line #truck {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1rem;
  transition: all .5s linear;
}

#product-line #truck:hover {
  background: #ecf0f1;
  transition: all .2s ease;
}

#product-line #mixing-room {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1rem;
  transition: all .5s linear;
}

#product-line #mixing-room #holder {
  background: url("../img/mixing-room-spraybooth.jpg") no-repeat left center/cover;
  width: 30vw;
  min-height: 230px;
  max-height: 600px;
  max-width: 400px;
  min-width: 300px;
  border-radius: 2px;
  opacity: .7;
}

#product-line #mixing-room:hover {
  background: #ecf0f1;
  transition: all .2s ease;
}

#product-line #prep-station {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1rem;
  transition: all .5s linear;
}

#product-line #prep-station #holder {
  background: url("../img/prep-station-index.jpg") no-repeat left center/cover;
  width: 30vw;
  min-height: 230px;
  max-height: 600px;
  max-width: 400px;
  min-width: 300px;
  border-radius: 2px;
  opacity: .7;
}

#product-line #prep-station:hover {
  background: #ecf0f1;
  transition: all .2s ease;
}

#product-line #open-face {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1rem;
  transition: all .5s linear;
}

#product-line #open-face #holder {
  background: url("../img/open-face.webp") no-repeat left center/cover;
  width: 30vw;
  min-height: 230px;
  max-height: 600px;
  max-width: 400px;
  min-width: 300px;
  border-radius: 2px;
  opacity: .7;
}

#product-line #open-face:hover {
  background: #ecf0f1;
  transition: all .2s ease;
}

#two-column {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 1rem;
  margin-top: 1rem;
}

#two-column #detail-column {
  position: sticky;
  position: -webkit-sticky;
  top: 1rem;
}

#two-column #detail-column .side-bar-justify {
  text-align: justify;
}

#two-column #main-column .pic-holder {
  height: 50vh;
}

#two-column #main-column .pic-holder-auto {
  background: url(../img/automotive.jpg) no-repeat center center/cover;
}

#two-column #main-column .pic-holder-truck {
  background: url(../img/truck-booth.jpg) no-repeat center center/cover;
}

#two-column #main-column .pic-holder-mixing-room {
  background: url(../img/mixing-room.jpg) no-repeat center center/cover;
}

#two-column #main-column .pic-holder-prep-station {
  background: url(../img/prep-station.jpg) no-repeat center center/cover;
}

#two-column #main-column .pic-holder-open-face {
  background: url(../img/open-face.jpg) no-repeat center center/cover;
}

#two-column #main-column .pic-content {
  height: 50vh;
  background: white;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(42, 75, 89, 0.9) 100%);
}

#two-column #main-column .pic-text {
  height: 47vh;
  padding: 1rem;
  color: white;
  display: flex;
  align-items: flex-end;
}

#two-column #main-column .pic-text span {
  font-weight: bold;
  font-size: 70px;
}

#two-column #main-column #about {
  color: black;
  font-weight: normal;
  text-align: justify;
}

#two-column #main-column #product-line {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

footer {
  margin-top: 1rem;
  background: #ecf0f1;
  height: auto;
}

footer #footer-content {
  padding: 1rem 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

#two-column-product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-top: 1rem;
}

.product {
  max-width: 100%;
}

#four-column-sizing {
  display: grid;
  grid-template-columns: 1fr repeat(3, 2fr);
  grid-gap: 1rem;
  text-align: center;
  margin: auto;
}

#four-column-sizing:first-child {
  grid-gap: 0rem;
}

#four-column-sizing div {
  text-align: left;
}

#four-column-sizing div:first-child {
  margin: auto;
  text-align: center;
}

#three-column-dim {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: .1rem;
  text-align: left;
}

.img-wireframe {
  object-fit: cover;
  width: 100%;
  background-color: #F6FAFB;
  border-top: 2px solid red;
}

.img-wireframe-no-border {
  object-fit: cover;
  width: 100%;
  max-width: 50%;
}

@media only screen and (max-width: 1045px) {
  #two-column {
    display: flex;
    flex-direction: column-reverse;
  }
  #two-column #detail-column {
    padding: 0 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-column-gap: 1rem;
    grid-row-gap: 0px;
  }
  #two-column #detail-column .div1 {
    grid-area: 1 / 1 / 2 / 4;
  }
  #two-column #detail-column .div2 {
    grid-area: 2 / 1 / 3 / 2;
  }
  #two-column #detail-column .div3 {
    grid-area: 2 / 2 / 3 / 3;
  }
  #two-column #detail-column .div4 {
    grid-area: 2 / 3 / 3 / 4;
  }
  #two-column #detail-column .div5 {
    grid-area: 3 / 1 / 4 / 4;
  }
  #two-column #automotive-about, #two-column #automotive-product-line {
    padding: 0 1rem;
  }
}

@media only screen and (max-width: 768px) {
  #two-column #detail-column {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-column-gap: 1rem;
    grid-row-gap: 0px;
  }
  #two-column #detail-column .div1 {
    grid-area: 1 / 1 / 2 / 3;
  }
  #two-column #detail-column .div2 {
    grid-area: 2 / 1 / 3 / 2;
  }
  #two-column #detail-column .div3 {
    grid-area: 2 / 2 / 3 / 3;
  }
  #two-column #detail-column .div4 {
    grid-area: 3 / 1 / 4 / 3;
  }
  #two-column #detail-column .div5 {
    grid-area: 4 / 1 / 5 / 3;
  }
  footer {
    padding: 0 1rem;
  }
}

@media only screen and (max-width: 600px) {
  #two-column #main-column #automotive-product-line {
    grid-template-columns: 1fr;
    padding: 0 4rem;
  }
  nav {
    display: inline;
  }
  nav #navbar {
    height: auto;
    display: flex;
    flex-direction: column;
    background: #ecf0f1;
  }
  nav #mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  nav #navbar-content {
    display: none;
  }
  nav #navbar-content ul {
    flex-direction: column;
    text-align: center;
    padding-bottom: .5rem;
    background: #ddd;
  }
  nav #navbar-content ul li {
    background: #fafafa;
    margin: 0 .7rem;
    margin-bottom: .5rem;
    padding: .5rem 0;
    border-radius: 5px;
  }
  nav #navbar-content ul li:first-child {
    margin-top: 1.2rem;
  }
  #title-content-text {
    display: block;
  }
  #about-us {
    padding: 1rem 1rem;
  }
  #product {
    margin: 0 1rem;
  }
  #product-line #automotive,
  #product-line #truck,
  #product-line #mixing-room,
  #product-line #open-face,
  #product-line #prep-station {
    display: flex;
    flex-direction: column;
    background-color: #ecf0f1;
    border: none;
  }
  #product-line #automotive #holder,
  #product-line #truck #holder,
  #product-line #mixing-room #holder,
  #product-line #open-face #holder,
  #product-line #prep-station #holder {
    width: 100%;
    height: auto;
  }
  #product-line #automotive div:nth-child(2),
  #product-line #truck div:nth-child(2),
  #product-line #mixing-room div:nth-child(2),
  #product-line #open-face div:nth-child(2),
  #product-line #prep-station div:nth-child(2) {
    padding: 0 1rem;
    padding-bottom: 1rem;
  }
  #product-line #automotive picture,
  #product-line #truck picture,
  #product-line #mixing-room picture,
  #product-line #open-face picture,
  #product-line #prep-station picture {
    width: 100%;
    height: auto;
    margin: auto;
  }
  #product-line #automotive picture source,
  #product-line #truck picture source,
  #product-line #mixing-room picture source,
  #product-line #open-face picture source,
  #product-line #prep-station picture source {
    width: 100%;
    height: auto;
  }
  #product-line #automotive picture img,
  #product-line #truck picture img,
  #product-line #mixing-room picture img,
  #product-line #open-face picture img,
  #product-line #prep-station picture img {
    width: 100%;
    height: auto;
  }
  #hamburger {
    display: block !important;
  }
  footer #footer-content {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-gap: 1rem;
  }
  footer #footer-content .div1 {
    grid-area: 2 / 1 / 3 / 3;
  }
  footer #footer-content .div2 {
    grid-area: 1 / 1 / 2 / 2;
  }
  footer #footer-content .div3 {
    grid-area: 1 / 2 / 2 / 3;
  }
  .icon {
    margin: 20px;
  }
  .nav-icon-2 {
    width: 35px;
    height: 30px;
    margin: 10px 10px;
    position: relative;
    cursor: pointer;
    display: inline-block;
  }
  .nav-icon-2 span {
    background-color: black;
    position: absolute;
    border-radius: 2px;
    transition: 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  }
  .nav-icon-2 span:nth-child(1) {
    width: 100%;
    height: 4px;
    display: block;
    top: 0px;
    left: 0px;
  }
  .nav-icon-2 span:nth-child(2) {
    width: 100%;
    height: 4px;
    display: block;
    top: 13px;
    left: 0px;
  }
  .nav-icon-2 span:nth-child(3) {
    width: 100%;
    height: 4px;
    display: block;
    bottom: 0px;
    left: 0px;
  }
  .nav-icon-2:not(.open):hover span:nth-child(1) {
    width: 100%;
    height: 4px;
    display: block;
    top: -2px;
    left: 0px;
    transition: 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  }
  .nav-icon-2:not(.open):hover span:nth-child(2) {
    width: 100%;
    height: 4px;
    display: block;
    top: 13px;
    left: 0px;
    transition: 0.4s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  }
  .nav-icon-2:not(.open):hover span:nth-child(3) {
    width: 100%;
    height: 4px;
    display: block;
    bottom: -2px;
    left: 0px;
    transition: 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  }
  .nav-icon-2.open span:nth-child(1) {
    left: 3px;
    top: 12px;
    width: 30px;
    transition: 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4);
    transform: rotate(90deg);
    transition-delay: 150ms;
  }
  .nav-icon-2.open span:nth-child(2) {
    left: 2px;
    top: 20px;
    width: 20px;
    transition: 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4);
    transform: rotate(45deg);
    transition-delay: 50ms;
  }
  .nav-icon-2.open span:nth-child(3) {
    left: 14px;
    top: 20px;
    width: 20px;
    transition: 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4);
    transform: rotate(-45deg);
    transition-delay: 100ms;
  }
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 2fr;
  grid-template-rows: auto auto auto auto;
  gap: 0px 2%;
}

.light {
  grid-area: 1 / 2 / 2 / 5;
  border-bottom: red solid 2px;
}

.fan {
  grid-area: 2 / 2 / 3 / 5;
  border-bottom: red solid 2px;
}

.filter {
  grid-area: 3 / 2 / 4 / 5;
  border-bottom: red solid 2px;
}

.title-kit {
  grid-area: 1 / 1 / 5 / 2;
  margin: auto;
  text-align: center;
}

.door {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr;
  gap: 0px 0px;
  grid-template-areas: "."
 ".";
  grid-area: 4 / 2 / 5 / 3;
}

.door div:first-child {
  margin: auto 0;
}

.curtain {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr;
  gap: 0px 0px;
  grid-template-areas: "."
 ".";
  grid-area: 4 / 2 / 5 / 3;
}

.curtain div:first-child {
  margin: auto 0;
}

.manometer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr;
  gap: 0px 0px;
  grid-template-areas: "."
 ".";
  grid-area: 4 / 3 / 5 / 4;
}

.manometer div:first-child {
  margin: auto 0;
}

.hardware {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr;
  gap: 0px 0px;
  grid-template-areas: "."
 ".";
  grid-area: 4 / 4 / 5 / 5;
}

.hardware div:first-child {
  margin: auto 0;
}

.light-small {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr;
  gap: 0px 0px;
  grid-template-areas: "."
 ".";
  grid-area: 1 / 2 / 2 / 3;
  margin-bottom: 1rem;
}

.light-small div:first-child {
  margin: auto 0;
}

.light-medium {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr;
  gap: 0px 0px;
  grid-template-areas: "."
 ".";
  grid-area: 1 / 3 / 2 / 4;
  block-size: auto;
  margin-bottom: 1rem;
}

.light-large {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr;
  gap: 0px 0px;
  grid-template-areas: "."
 ".";
  grid-area: 1 / 4 / 2 / 5;
  block-size: auto;
  margin-bottom: 1rem;
}

.fan-small {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr;
  gap: 0px 0px;
  grid-template-areas: "."
 ".";
  grid-area: 2 / 2 / 3 / 3;
  block-size: auto;
  margin-bottom: 1rem;
}

.fan-small div:first-child {
  margin: auto 0;
}

.fan-medium {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr;
  gap: 0px 0px;
  grid-template-areas: "."
 ".";
  grid-area: 2 / 3 / 3 / 4;
  margin-bottom: 1rem;
}

.fan-large {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr;
  gap: 0px 0px;
  grid-template-areas: "."
 ".";
  grid-area: 2 / 4 / 3 / 5;
  margin-bottom: 1rem;
}

.filter-small {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr;
  gap: 0px 0px;
  grid-template-areas: "."
 ".";
  grid-area: 3 / 2 / 4 / 3;
  margin-bottom: 1rem;
}

.filter-small div:first-child {
  margin: auto 0;
}

.filter-medium {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr;
  gap: 0px 0px;
  grid-template-areas: "."
 ".";
  grid-area: 3 / 3 / 4 / 4;
  margin-bottom: 1rem;
}

.filter-large {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr;
  gap: 0px 0px;
  grid-template-areas: "."
 ".";
  grid-area: 3 / 4 / 4 / 5;
  margin-bottom: 1rem;
}

#optional-description {
  display: grid;
  grid-template-columns: 1fr repeat(3, 2fr);
  grid-gap: 1rem;
  text-align: center;
  margin: auto;
}

#optional-description {
  display: grid;
  grid-template-columns: 1fr 3fr 3fr;
  grid-template-rows: auto auto;
  gap: 0;
  grid-template-areas: "tt drive-thru powder-coating"
 "tt duct-kit dry-chem";
}

#optional-description h2 {
  text-align: left;
}

.drive-thru {
  grid-area: drive-thru;
  border-right: solid red 1px;
  border-bottom: solid red 1px;
  padding: 1rem;
  margin-left: 1rem;
}

.powder-coating {
  grid-area: powder-coating;
  border-left: solid red 1px;
  border-bottom: solid red 1px;
  padding: 1rem;
}

.duct-kit {
  grid-area: duct-kit;
  border-right: solid red 1px;
  border-top: solid red 1px;
  padding: 1rem;
  margin-left: 1rem;
}

.dry-chem {
  grid-area: dry-chem;
  border-left: solid red 1px;
  border-top: solid red 1px;
  padding: 1rem;
}

.tt-optional {
  grid-area: tt;
  margin: auto;
}

.optional-flex {
  display: flex;
  justify-content: space-evenly;
}

.optional-flex-text {
  margin: auto;
  text-align: left;
  text-justify: inter-word;
  margin-right: 1rem;
  font-size: large;
}

#notes {
  position: relative;
  top: -4rem;
  display: inline;
  z-index: -1;
}

.price-pill span {
  font-size: 150%;
  display: inline;
  border: 1px solid #0077ED;
  color: black;
  border-radius: 10px;
  padding: .4rem;
  display: inline-block;
}

.spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.spinner::after {
  content: '';
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #34495e;
  animation: loader 1.0s infinite ease-in-out;
}

@keyframes loader {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}

.loader-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #F6FAFB;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

#three-column-sizing {
  display: grid;
  grid-template-columns: 1fr 3fr 3fr;
  grid-template-rows: 1fr;
  gap: 1rem;
  grid-template-areas: "sizing-title-single sizing-img-single sizing-dim-single";
}

.sizing-title-single {
  grid-area: sizing-title-single;
  margin: auto;
  font-size: larger;
}

.sizing-img-single {
  grid-area: sizing-img-single;
  max-width: 100%;
  padding-bottom: 2rem;
}

.sizing-dim-single {
  grid-area: sizing-dim-single;
  padding-bottom: 2rem;
}

.sizing-dim-single .sizing-dim-layout {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 3fr;
  gap: 0px 0px;
  grid-template-areas: "."
 ".";
}

.sizing-dim-single .sizing-dim-layout > div:first-child {
  margin: auto 0;
}

.sizing-dim-single .sizing-dim-layout .dim-lengths {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: larger;
  padding-left: .5rem;
}

#kit-single {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 2fr;
  grid-template-rows: auto auto;
  gap: 2% 0;
  grid-template-areas: "kit-title-single light-single fan-single filter-single"
 "kit-title-single door-single manometer-single hardware-single";
}

.kit-title-single {
  grid-area: kit-title-single;
}

.light-single {
  grid-area: light-single;
  border-bottom: red solid 2px;
  padding: 0 1% 2%;
}

.fan-single {
  grid-area: fan-single;
  border-bottom: red solid 2px;
  padding: 0 1% 2%;
}

.filter-single {
  grid-area: filter-single;
  border-bottom: red solid 2px;
  padding: 0 1% 2%;
}

.door-single {
  grid-area: door-single;
  padding: 0 1%;
}

.manometer-single {
  grid-area: manometer-single;
  padding: 0 1%;
}

.hardware-single {
  grid-area: hardware-single;
  padding: 0 1%;
}

#optional-single {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 2fr;
  grid-template-rows: auto;
  gap: 2%;
  grid-template-areas: "optional-title-single powder-single duct-single dry-single";
}

.optional-title-single {
  grid-area: optional-title-single;
  margin: auto;
  text-align: center;
}

.powder-single {
  grid-area: powder-single;
}

.duct-single {
  grid-area: duct-single;
}

.dry-single {
  grid-area: dry-single;
}

.img-wireframe-no-border-single {
  float: left;
  width: 60%;
  background: #F6FAFB;
  margin-right: .5rem;
}

.optional-title-cards {
  border-bottom: solid red 2px;
  text-transform: capitalize;
  padding-bottom: .5rem;
}

#open-face-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 2fr;
  grid-template-rows: auto auto;
  gap: 0px 2%;
  grid-template-areas: "a b c d"
 "a e e e";
}

.a {
  grid-area: a;
  margin: auto;
  text-align: center;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0% 2%;
  grid-template-areas: "e-1 e-2";
  grid-area: e;
  border-top: 2px solid red;
  padding-top: 1rem;
  height: fit-content;
}

.e-1 {
  grid-area: e-1;
  height: fit-content;
}

.e-2 {
  grid-area: e-2;
  height: fit-content;
}

#form-container {
  width: 60%;
  height: auto;
  margin: auto;
  padding: 1rem;
  margin-top: 1rem;
}

#form-container form #input-form {
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#form-container form #input-form > input {
  width: 44%;
}

#form-container form select {
  width: 100%;
}

#form-container form textarea {
  box-sizing: border-box;
  width: 100%;
  resize: none;
}

#form-container form #form-category-radio {
  border: none;
}

.border-box {
  box-sizing: border-box;
}

.form-design {
  padding: .5rem 1rem;
  border-radius: 5px;
  border: 1.5px solid grey;
  outline: 0;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 1rem;
}

.form-design:focus {
  outline: none !important;
  border: 1px solid blue;
  box-shadow: 0 0 10px #719ECE;
}

#form-sub-categories {
  display: flex;
  justify-content: space-between;
}

#btm-form {
  display: flex;
  justify-content: space-between;
}

.full-width {
  width: 100%;
}