:root {
  --bs-link-color: #eb7100 !important;
  --bs-link-hover-color: #eb7100 !important;
  --bs-nav-link-color: #eb7100 !important;
  --bs-nav-link-hover-color: #eb7100 !important;
  --bs-nav-link-font-size: 20px;
  --bs-btn-active-bg: #eb7100 !important;
  --bs-btn-disabled-bg: #eb7100 !important;
  --font-family-freight-sansbold: "Freight-SansBold", Helvetica;
  --font-family-freight-sanslight_italic: "Freight-SansLight Italic", Helvetica;
  --font-family-freight-sansmedium: "Freight-SansMedium", Helvetica;
  --font-family-glamor-bold: "Glamor-Bold", Helvetica;
  --font-family-inter: "Inter", Helvetica;
  --font-family-poppins: "Poppins", Helvetica;
  --masala: #3b3b3b;
  --stack: #8c8c8c;
  --tan-hide: #f89852;
  --mango-tango: #ff9245;
  --tan: #ffc093;
}

@font-face {
  font-family: "Freight-SansMedium";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/Freight Sans Medium.otf") format("opentype");
}
@font-face {
  font-family: "Freight-SansLight Italic";
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/Freight Sans Light Italic.otf") format("opentype");
}
@font-face {
  font-family: "Freight-SansBold";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/Freight Sans Bold.otf") format("opentype");
}
@font-face {
  font-family: "Glamor-Bold";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/Glamor-Bold.otf") format("opentype");
}

#header {
  box-shadow: 0px 4px 30px #a4804526;
}

img {
  pointer-events: none;
}

img#logo {
  width: 135px;
}
.navbar {
  --bs-navbar-padding-y: 1.35rem !important;
  font-family: var(--font-family-freight-sansmedium);
}
.navbar > .container {
  max-width: 992px;
}
#body {
  max-width: 1200px;
}

.display-1, .display-2, .display-3, .display-4 {
  font-family: var(--font-family-poppins);
  color: var(--masala);
}
.display-1 {
  font-size: 5.5rem !important;
}
.display-2 {
  font-size: 2.5rem !important;
}
.display-3 {
  font-size: 1.6rem !important;
}
.display-4 {
  font-family: var(--font-family-freight-sansmedium);
  font-size: 1.4rem !important;
}
.display-4 > .fw-bold {
  font-family: var(--font-family-freight-sansbold);
}

input.form-control {
  font-family: var(--font-family-freight-sansmedium);
  color: var(--stack);
  border: 1px solid black;
  border-radius: 1.25em;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

input.form-control:focus {
  color: var(--stack);
}

input.form-check-input {
  background-color: rgba(0, 0, 0, 0.25) !important;
  border-color: black !important;
}

#circle {
  color: var(--stack);
  float: right;
  margin-top: -45px;
  margin-right: 20px;
}

label.form-check-label {
  font-family: var(--font-family-freight-sanslight_italic);
  line-height: 1em;
}

label > a {
  text-decoration: none !important;
  color: inherit !important;
}

a:hover {
  color: inherit;
}

form > button {
  --bs-btn-bg: var(--tan-hide) !important;
  --bs-btn-hover-bg: var(--tan-hide) !important;
  --bs-btn-color: white !important;
  --bs-btn-border-radius: 1.25em !important;
  --bs-btn-font-size: 2.25em !important;
  text-decoration: none !important;
  text-transform: uppercase;
  font-weight: 500 !important;
}

.btn-link:hover, .btn:active {
  color: white !important;
}

#how-it-works {
  background-color: var(--mango-tango);
  border-radius: 80px;
}

#what-you-get {
  background-color: var(--tan);
  border-radius: 0 0 80px 80px;
}

h1 {
  font-family: var(--font-family-poppins);
}

h3 {
  font-family: var(--font-family-freight-sansmedium);
}

#what-you-get > ul {
  font-family: var(--font-family-freight-sansmedium);
  max-width: 960px;
  margin: auto;
}

#what-you-get > ul > li > img {
  width: 125px;
}

#what-you-get > ul > li > h6 {
  font-family: var(--font-family-poppins);
  font-weight: 600;
}

#summary {
  color: white;
}

#as-featured-on > h1 {
  color: var(--tan-hide);
}

#as-featured-on li {
  background: url(../images/orange/as_featured_on.png) no-repeat;
  min-width: 203px;
  margin: 10px;
}

#as-featured-on .fox_networks {height: 90px; background-position: center -73px;}
#as-featured-on .star_tribune {height: 30px; background-position: center -197px;}
#as-featured-on .tech_times {height: 21px; background-position: center -228px;}
#as-featured-on .bay_area {height: 33px; background-position: center -251px;}
#as-featured-on .daily_motion {height: 37px; background-position: center -286px;}
#as-featured-on .lifewire {height: 91px; background-position: center -323px;}
#as-featured-on li.popsugar {background: url(../images/orange/popsugar.png) no-repeat; height:51px; background-position: center 0px;}

#reviews > ul > li > img {
  width: 350px;
}

a.btn-link {
  --bs-btn-bg: var(--tan-hide) !important;
  --bs-btn-hover-bg: var(--tan-hide) !important;
  --bs-btn-color: white !important;
  --bs-btn-border-radius: 1.25em !important;
  --bs-btn-font-size: 1.25em !important;
  font-family: var(--font-family-freight-sansmedium);
  text-decoration: none !important;
  font-weight: 500 !important;
}

#footer {
  background-color: var(--tan-hide);
  color: white !important;
  font-size: 1rem !important;
}

#footer a, #footer a:hover {
  color: inherit;
  text-decoration: none !important;
}

@media (max-width: 576px) {
  .display-1 {
    font-size: 2.25rem !important;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .display-2 {
    font-size: 1.5rem !important;
  }
  .display-3 {
    font-size: 1rem !important;
  }
  .display-4 {
    font-size: 1rem !important;
  }
  input.form-control {
    min-height: calc(1.5em + .5rem + 2px);
    padding: 0.25rem 0.5rem;
  }
  #circle {
    margin-top: -39px;
    margin-right: 10px;
  }
}

@media (max-width: 768px) {
  .navbar {
    --bs-nav-link-font-size: 16px;
  }
  img#logo {
    width: 100px;
  }
}

@media (min-width: 768px) {
  form#landing {
    margin-top: -110px;
  }
}

@media (max-width: 992px) {
  .navbar {
    --bs-navbar-padding-x: 1.35rem !important;
    --bs-navbar-padding-y: 0.5rem !important;
  }
  img#hero {
    width: 350px;
  }
  .display-1 {
    font-size: 3rem !important;
    line-height: 1;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .display-4 {
    font-size: 1.15rem !important;
  }
  input.form-control {
    min-height: initial;
    padding: 0.375rem 0.75rem;
  }
  label.form-check-label {
    font-size: 14px;
    line-height: 14px;
  }
  form > button {
    --bs-btn-border-radius: 1.25em !important;
    --bs-btn-font-size: 1.25em !important;
  }
  #circle {
    margin-top: -40px;
    margin-right: 15px;
  }
  #how-it-works {
    border-radius: 50px;
  }
  h1 {
    font-size: 2.5rem !important;
    font-weight: 600 !important;
  }
  #video {
    max-width: 540px !important;
  }
  #what-you-get > ul {
    font-size: 1rem !important;
  }
  #what-you-get {
    border-radius: 0 0 50px 50px;
    margin-top: -40px;
  }
  #what-you-get > h1 {
    padding-top: 70px;
  }
  #what-you-get > ul > li > img {
    width: 100px;
  }
  #reviews > ul > li > img {
    width: 325px;
  }
  a.btn-link {
    --bs-btn-border-radius: 1.25em !important;
    --bs-btn-font-size: 1.25em !important;
    font-weight: 500 !important;
  }
}

@media (min-width: 992px) {
  form#landing {
    margin-top: -215px;
  }
  h1 {
    font-size: 3.5rem !important;
    font-weight: 600 !important;
  }
  #video {
    max-width: 660px !important;
  }
  #what-you-get > ul {
    font-size: 1.25rem !important;
  }
  #what-you-get {
    border-radius: 0 0 80px 80px;
    margin-top: -70px;
  }
  #what-you-get > h1 {
    padding-top: 100px;
  }
}
