@font-face {
    font-family: 'Product Sans';
    src: url('./font/Product Sans Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  :root{
      --yellow:#FCB03F;
      --grey:#707070;
      --black:#050505;
      --marginpercent:18%;
      --margin:390px;
      --pname-fs:max(1.3vw,29px);
      --pname-fh:max(1.1vw,17px);

  }
  .margin390{
    margin: 0px min(var(--margin),var(--marginpercent));
  }
  .current{
    border: 7px solid #fcb03f;
  }
  *{
      margin: 0px;
      box-sizing: border-box;
      font-family: Product Sans;
    }

    a,
    a:hover,
    a:visited,
    .underline{
        font-family: "Product Sans";
        -webkit-text-decoration: none;
        text-decoration: none;
        background-image: linear-gradient(to top, var(--yellow), var(--yellow));
        background-position: 100% 100%;
        background-size: 100% 25%;
        background-repeat: no-repeat;
        color: inherit;
        -webkit-transition: background-size .15s ease-out;
        transition: background-size .15s ease-out;
        outline: none;
    }
    a:hover{
      background-size:100% 100%;
    }
    a.whitea{
        color: white;
    }
    a.nobg{
        background: none;
    }
  .pname{
font-weight: bold;
font-size: var(--pname-fs);
line-height: var(--pname-fh);
color: #000;

}
.pcard{
  margin: 0 5% !important;
}
.pcard:hover{
  border-width: 3px;
  border-color: var(--yellow);
  border-style: solid;
}
.pcard:hover a{
  background-size: 100% 100%;
}
    .prodtitle{
        font-family: "Product Sans";
font-weight: bold;
font-size: 52px;
line-height: 29px;
text-align: center;
color: #000;

    }
    .proddesc{
width: auto;
font-family: "Product Sans";
font-weight: normal;
font-size: 24px;
line-height: 32px;
text-align: center;
color: #929292;

    }
    .prod{
  font-weight: bold;
  font-size: 68px;
  line-height: 56px;
  text-align: center;
  color: #fcb03f;

    }

    .prod-col1,.prod-col2{
      position: relative;
      min-height:540px;
       }

    .prod-col1::before {
      content: "";
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      background-image:
      linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.76) 100%),
      url('../images/rebars.png');
      background-size: cover;
      background-repeat: no-repeat;
      filter: grayscale(100%);
    }
    .prod-col2::before {
      content: "";
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      background-image:
      linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.76) 100%),
      url('../images/gasses.png');
      background-size: cover;
      background-repeat: no-repeat;
      filter: grayscale(100%);
    }

  @media (max-width: 40em) {
    :root{
        --margin:36px;
    }
    .proddesc{
      width: 317px;
    }
  .prod{
    font-size: 33px;
  line-height: 28px;
  }
  .current a{
    padding: 5px;
    background-color: var(--yellow);
    border: solid 2px var(--yellow);
    border-radius: 22px;
  }
  .current ~div a {
    padding: 5px;
    background-size: 0px;
    background-color: none;
    border: solid 2px var(--yellow);
    border-radius: 22px;
  }
  }