/*
#222222 - black
#FBAA32 - yellow
#E33625 - red
*/

@font-face {
  font-family: 'din';
  src: url('fonts/din_condensed_bold.woff2') format('woff2'),
       url('fonts/din_condensed_bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'zviro';
  src: url('fonts/zviro_demo1.woff2') format('woff2'),
       url('fonts/zviro_demo1.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AlternateGotNo3D';
  src: url('fonts/AlternateGotNo3D.ttf') format('truetype');
  font-display: swap;
}

BODY {
  margin: 0;
  padding: 0;
  background: #222222;
  color: #FFFFFF;
  font-family: 'AlternateGotNo3D', sans-serif;
  font-size: 20px;
  line-height: 1.2;
}

IMG {
  border: 0;
  max-width: 100%;
  height: auto;
}

A {
  text-decoration: none;
  transition: all 0.2s;
}

.site-width {
  width: 1000px;
  margin: 0 auto;

  @media (max-width: 1050px) { & { width: 96%; } }
}

.site-width:after,
.cf:after {
  content: "";
  display: table;
  clear: both;
}

HEADER { height: 4.5rem; }

.logo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  height: 9rem;
  width: auto;
}

#hero {
  background: url(../images/hero.webp) no-repeat center;
  background-size: cover;

  @media (min-width: 1600px) { & { max-width: auto; width: 100%; } }
}

#hero:before {
  content: "";
  display: block;
  padding-top: 45.375%;
}

@media (max-width: 1050px) { #hero:before { padding-top: 69vw; } }
@media (max-width: 600px) { #hero:before { padding-top: 87.750vw; } }

.ribbon {
  padding: 0.65em 0 0.3em;
  background: #FBAA32;
  font-family: din;
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
}

.ribbon.bigger { padding: 0.42em 0 0.12em; font-size: 3rem; }

@media only screen and (max-width: 1050px) {
  .ribbon, .ribbon.bigger { padding-left: 2%; padding-right: 2%; }
}

#trim, #sheet, #cornerboard {
  background: url(../images/dots.webp) no-repeat center top;
  background-color: #E33625;
  background-size: cover;
  position: relative;
}

#sheet { background-color: transparent; overflow: hidden; }

#trim .site-width, #cornerboard .site-width {
  width: 1214px;
  position: relative;

  @media (max-width: 1230px) { & { width: 96%; } }
}

#sheet .site-width {
  width: 1160px;

  @media (max-width: 1350px) { & { width: 96%; } }
}

#trim-image, #cornerboard-image {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-110%);
  z-index: 5;
  width: 34.375rem;

  @media (max-width: 750px) { & {
    position: static;
    transform: none;
    display: block;
    margin: 0 auto;
    max-width: 80%;
  } }
}

#sheet-image {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 5;
  width: 47.25rem;

  @media (min-width: 1600px) { & { left: 52.2855%; right: auto; } }

  @media (max-width: 1280px) { & { left: 50%; } }

  @media (max-width: 750px) { & { position: relative; left: 2%; bottom: -1rem; } }
}

#trim .text { width: 36.1%; margin-left: 63.9%; }

#cornerboard .text { width: 45%; margin-left: 55%; }

#trim .text, #cornerboard .text {
  padding: 2.5rem 0;

  @media (max-width: 1050px) { & { width: 50%; margin-left: 50%; } }

  @media (max-width: 750px) { & { width: 100%; margin-left: 0; } }
}

#sheet .text {
  padding: 2.5rem 0;

  @media (max-width: 750px) { & { width: 100%; } }
}

#sheet .text > DIV {
  width: 38%;

  @media (max-width: 750px) { & { width: 100%; } }
}

#trim-table, #cornerboard-table {
  position: absolute;
  bottom: 2.5rem;
  right: 35.5%;
  z-index: 6;
  width: 17.875rem;
  height: auto;

  @media (max-width: 1050px) { & { position: static; margin: 0 0 2.5rem 50%; } }

  @media (max-width: 750px) { & { margin-left: 0; } }
}

#cornerboard-table { right: 45%; width: 11.9375rem; }

#sheet-table {
  position: absolute;
  right: 40%;
  bottom: 2.5rem;
  z-index: 6;
  width: 17.375rem;
  height: auto;
  
  @media (min-width: 1600px) { & { left: 46%; right: auto; } }

  @media (max-width: 1350px) { & { left: 36%; right: auto; } }

  @media (max-width: 1280px) { & { left: 40%; } }

  @media (max-width: 750px) { & { position: static; } }
}

H2.razor {
  margin: 0;
  color: #FBAA32;
  font-family: zviro;
  font-weight: 400;
  font-size: 200%;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
}

H2.razor:before {
  content: "";
  display: inline-block;
  background: url(../images/star.svg) no-repeat center;
  background-size: contain;
  height: 1.25rem;
  width: 1.25rem;
  margin: 0 0.15em 0.1em;
}

H1.title {
  margin: 0;
  font-family: din;
  font-weight: 400;
  font-size: 410%;
  line-height: 1;
  text-transform: uppercase;
}

UL {
  margin: 0 0 0 4%;
  list-style-type: none;

  @media (max-width: 750px) { & { margin-left: 1%; } }
}

#sheet UL { margin-left: 1%; }

UL LI { padding: 0.4em 0; }

UL LI:before {
  content: "";
  display: inline-block;
  background: url(../images/star.svg) no-repeat center;
  background-size: contain;
  height: 0.7em;
  width: 0.7em;
  margin-left: -1.4em;
  margin-right: 0.7em;
}

A.button {
  margin-left: 6%;
  display: inline-block;
  border: 0.1875rem solid #FBAA32;
  border-radius: 0.5625rem;
  padding: 0.65em 0.65em 0.3em 0.7em;
  color: #FFFFFF;
  font-family: din;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  @media (max-width: 750px) { & { margin-left: 2%; } }
}

#sheet A.button { margin-left: 4%; }

A.button:hover { background: #FBAA32; }

#edge .site-width {
  box-sizing: border-box;
  padding: 3em 5% 5em;
  text-align: center;
}

#edge IMG {
  height: 8.5625rem;
  width: auto;
  margin: 1.25rem 2.3337%;

  @media (max-width: 800px) { & { margin: 1.25rem 5.9259%; } }
}

#dist-toggle { display: none; }
LABEL[for="dist-toggle"] { display: block; cursor: pointer; }

#dist-toggle + LABEL + #distribution { display: none; }
#dist-toggle:checked + LABEL + #distribution { display: flex; }

#dist-toggle + LABEL[for="dist-toggle"]:after {
  content: "\2192";
  display: inline-block;
  vertical-align: middle;
  font-size: 50%;
  margin-left: 0.5em;
  width: 1em;
}

#dist-toggle:checked + LABEL[for="dist-toggle"]:after {
  content: "\2193";
}

#distribution .site-width {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3.125rem 0;

  @media (max-width: 600px) { & { flex-direction: column-reverse; } }
}

#dist-map {
  width: auto;
  height: 19.4375rem;

  @media (max-width: 600px) { & { height: auto; } }
}

#dist-text {
  width: 42.9%;
  color: #FBAA32;
  font-family: din;
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;

  @media (max-width: 600px) { & { width: 100%; margin-bottom: 2em; } }
}

#dist-text IMG { margin-top: 0.5em; }

#contact {
  padding: 2em 0 6.875rem;
  background-color: #E33625;
  color: #FBAA32;
  font-family: 'din';
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
}

#contact H2 {
  margin: 0.15em 0 1em;
  color: #FFFFFF;
  font-family: 'zviro';
  font-weight: normal;
  font-size: 200%;
  line-height: 1;
  letter-spacing: 0.15em;

  @media (max-width: 480px) { & { font-size: 190%; } }
}

#contact-form {
  width: 86.6%; margin: 0 auto;

  @media (max-width: 750px) { & { width: 100%; } }
}

#contact-form INPUT[name="username"] { position: absolute; left: -999999999px; }

#contact-form INPUT,
#contact-form TEXTAREA {
  width: 100%;
  margin: 0 0 2em;
  outline: 0;
  border: 0.1875rem solid #FBAA32;
  border-radius: 0.5625rem;
  box-sizing: border-box;
  padding: 0.77em 0.75em 0.46em;
  background: transparent;
  color: #FFFFFF;
  font-family: 'din';
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 0.03em;
  -webkit-appearance: none;
  appearance: none;
}

#contact-form TEXTAREA { height: 6.3em; }

#contact-form .col3 {
  display: flex; justify-content: space-between;

  @media (max-width: 600px) { & { flex-direction: column; } }
}

#contact-form .col3 INPUT {
  width: 32%;

  @media (max-width: 600px) { & { width: 100%; } }
}

#contact-form :-ms-input-placeholder { color: #FFFFFF; text-transform: uppercase; }
#contact-form ::placeholder { color: #FFFFFF; text-transform: uppercase; opacity: 1; }
#contact-form :focus::placeholder { color: transparent; opacity: 0; }

#contact-form .alert:-ms-input-placeholder { color: #FBAA32; }
#contact-form .alert::placeholder { color: #FBAA32; }
#contact-form .alert { border-color: #FFFFFF; }

#contact-form .checkboxes {
  margin-bottom: 2rem;
  text-align: left;
  color: #FFFFFF;
  font-size: 1.25rem;
  letter-spacing: 0;
}

#contact-form .checkboxes INPUT[type="checkbox"] { display: none; }

#contact-form .checkboxes INPUT[type="checkbox"] + LABEL {
  display: inline-block;
  margin: 0 0 0 1em;

  @media (max-width: 600px) { & { width: 100%; margin: 0.25em 0; } }
}

#contact-form .checkboxes INPUT[type="checkbox"] + LABEL:before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 0.125rem solid #FFFFFF;
  border-radius: 0.125rem;
  box-sizing: border-box;
  margin-right: 0.4em;
  background: transparent;
  cursor: pointer;
}

#contact-form .checkboxes INPUT[type="checkbox"]:checked + LABEL:before {
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E33625' d='M9 21.035l-9-8.638 2.791-2.87 6.156 5.874 12.21-12.436 2.843 2.817z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

#contact-form BUTTON {
  outline: 0;
  border: 0.1875rem solid #FBAA32;
  border-radius: 0.5625rem;
  box-sizing: border-box;
  padding: 0.41em 1.4em 0.06em 1.5em;
  background: transparent;
  color: #FFFFFF;
  font-family: 'din';
  font-size: 1.25rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  -webkit-appearance: none;
  transition: all 0.2s;
  appearance: none;
}

#contact-form BUTTON:hover { background: #FBAA32; }

#contact-form BUTTON:disabled {
  pointer-events: none;
  background: #A0A0A0;
  color: #D8D8D8;
}

#contact-form BUTTON.loader {
  background: #A0A0A0; color: #D8D8D8; pointer-events: none; position: relative;
  border-color: #D8D8D8;
}

#contact-form BUTTON.loader:before {
  --loader-size: 1.25rem;
  content: "";
  position: absolute;
  top: 0.375rem;
  left: calc(50% - (var(--loader-size) / 2));
  border: 0.1875rem solid #FFFFFF;
  border-top-color: #E33625;
  border-radius: 50%;
  width: var(--loader-size);
  height: var(--loader-size);
  animation: spin 1s linear infinite;
  box-sizing: border-box;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#contact-form-messages {
  margin-top: 1em;
  min-height: 1.12em;
  font-size: 90%;
}

FOOTER {
  padding: 7.8125rem 0 3em;
  font-weight: bold;
  font-size: 1.5625rem;
  line-height: 1.2;
  text-align: center;
  position: relative;
}

FOOTER .logo { height: 13rem; transform: translate(-50%,-50%); }

FOOTER .site-width {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  margin-bottom: 2rem;

  @media (max-width: 550px) { & { flex-direction: column; text-align: center; } }
}

FOOTER .site-width IMG {
  width: 14.625rem;
  height: auto;
  margin-left: auto;

  @media (max-width: 550px) { & { margin: 1.5em auto 0; } }
}

FOOTER A { color: #FFFFFF; }