/*!
 * Start Bootstrap - Landing Page v5.0.7 (https://startbootstrap.com/template-overviews/landing-page)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-landing-page/blob/master/LICENSE)
 */

 @font-face {
     font-family: "Bellfort Press Bold";
     src: url("fonts/BellfortPressBold.otf");
 		src: url("fonts/BellfortPress-Bold.eot");
 		src: url("fonts/BellfortPress-Bold.svg");
 		src: url("fonts/BellfortPress-Bold.ttf");
 		src: url("fonts/BellfortPress-Bold.woff");
 }

 @font-face {
     font-family: "Bellfort Press Light";
     src: url("fonts/BellfortPressLight.otf");
 		src: url("fonts/BellfortPress-Light.eot");
 		src: url("fonts/BellfortPress-Light.svg");
 		src: url("fonts/BellfortPress-Light.ttf");
 		src: url("fonts/BellfortPress-Light.woff");
 }

body {
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
  text-rendering: optimizeLegibility;
   -webkit-font-smoothing: subpixel-antialiased;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
  font-weight: 700;
}

h1 {
  font-size: 8.75rem;
}

h2 {
  font-size: 3.75rem;
  font-family: "Bellfort Press Light";
  font-weight: 400;
}

h3 {
  font-size: 3.125rem;
  font-family: "Bellfort Press Light";
  font-weight: 400;
}

h4 {
  font-size: 1.5rem;
  line-height: 2.125rem;
}

h5 {
  font-size: 1.375rem;
  line-height: 2rem;
}

p {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

nav.navbar {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100;
  padding: 0;
}

nav.navbar .row {
  width: 100%;
}

nav.navbar .logo {
  max-width: 100%;
}

header.masthead {
  position: relative;
  background-color: #343a40;
  background: url("../img/bg-hero.jpg") no-repeat center top;
  background-size: cover;
  padding-top: 6rem;
  padding-bottom: 6rem;
  min-height: 50rem;
}

header.masthead h1 {
  font-size: 8.75rem;
  color: #262626;
  font-family: "Bellfort Press Bold";
  line-height: 7.5rem;
}

header.masthead h1 span.small {
  font-size: 7.5rem;
  font-family: "Bellfort Press Light";
  line-height: 6.875rem;
  font-weight: 400;
}

header.masthead h1 span.smaller {
  font-size: 5.625rem;
  font-family: "Bellfort Press Light";
  line-height: 5.625rem;
  font-weight: 400;
  padding-left: 5rem;
}

header.masthead h2.intro {
  font-size: 4.375rem;
  font-family: "Bellfort Press Light";
  line-height: 4.375rem;
  font-weight: 400;
  margin: 0;
}

.accent {
  color: #E42313;
}

header.masthead .label {
    position: absolute;
    top: 0;
    left: 0;
}

@media (min-width: 769px) {
  header.masthead {
    padding-top: 1.5625rem;
    padding-bottom: 19rem;
  }
}

section.textblock {
    background-color: #000;
    padding: 2.5rem 0 5rem 0;
    color: #fff;
}

section.textblock .row.relative {
  position: relative;
  min-height: 12rem;
}

section.textblock .sauce-image {
    min-height: 30rem;
    background-size: auto;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
}

section.textblock .sauce-range-mobile {
  max-width: 100%;
}

section.textblock h4 {
  padding: 1.25rem 0 1.875rem 0;
}

section.textblock #signup {
  background-color: #E42313;
  padding: 0.9375rem 1.875rem;
  margin-top: 2.1875rem;
}

section.textblock #signup h3 {
  margin: 0;
}

section.textblock #signup .button {
    background-color: #6C0E06;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    padding: 0.9375rem 1.5625rem;
    margin-top: 1.75rem;
    display: block;
    font-family: "Bellfort Press Light";
    border: none;
    float: right;
}

.showcase-img {
  min-height: 30rem;
  background-size: cover;
}

.showcase-3 img {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 50%;
}

/* Responsive */

@media only screen and (max-width: 991px) {

    header.masthead h2.intro {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    header.masthead h1 span.smaller {
        font-size: 3.75rem;
        line-height: 3.75rem;
    }

    header.masthead h1 span.small {
        font-size: 4.375rem;
        line-height: 4.375rem;
    }

    header.masthead h1 {
        font-size: 5rem;
        line-height: 5rem;
    }

}

@media only screen and (max-width: 823px) {

    .accent {
      font-size: 3.125rem;
    }

}

@media only screen and (max-width: 420px) {

    header.masthead {
      min-height: 34rem;
    }

    header.masthead h1 span.smaller {
      padding-left: 0;
    }

    section.textblock #signup .button {
      font-size: 1.5rem;
    }

    h3 {
      font-size: 2.25em;
    }

    h4 {
      font-size: 1.3125rem;
      line-height: 1.75rem;
    }

    h5 {
      font-size: 1.125rem;
      line-height: 1.5rem;
    }

    .accent {
      font-size: 2.25rem;
    }

    header.masthead .label img {
      max-width: 100px;
    }

    header.masthead h2.intro {
      text-align: left !important;
      padding-left: 2rem;
    }
}

@media only screen and (max-width: 375px) {

    header.masthead {
      min-height: 75vh;
    }

}

@media only screen and (max-width: 320px) {

    header.masthead h2.intro {
      font-size: 1.65rem;
    }

}