@font-face {
    font-family: 'Karma';
    src: url('../fonts/karma-bold-webfont.woff2') format('woff2'),
         url('../fonts/karma-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato-light-webfont.woff2') format('woff2'),
         url('../fonts/lato-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
  font-family: 'Lato';
  background-color: #2a2227;
  color: #fae8d0;
  font-size: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Karma';
  font-weight: 800 !important;
}

.features li {
  list-style-image: url('../img/perk_bullet_icon.png');
}

.features li {
  padding-bottom: 10px;
}

.img-fluid {
  width: 100%;
  height: 100%;
}

a {
  color: #e94144;
}

a:hover {
  color: #f3dc7f;
}

.divider {
  height: 8px;
  background-image: url('../img/divider.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-top: -10px;
}

.sub-titles {
  color: #f3dc7f;
}

.description {
  text-indent: 30px;
  line-height: 30px;

  margin-bottom: 60px;
}

.underline-title {
  margin-top: 50px;
  text-transform: uppercase;
  color: #e94144;
  letter-spacing: 2px;

  background-image: 
         linear-gradient(187deg,#e94144,#e94144),
         linear-gradient(184deg,#e94144 30%, #e94144 50%),
         linear-gradient(185deg,#e94144 30%,#e94144 50%),
         linear-gradient(184deg,#e94144 33%,#ee6f44 38%),
         linear-gradient(187deg,#ee6f44,#f3dc7f),
         linear-gradient(187deg,#f3dc7f,#f3dc7f);
    background-position: 
          0px 0px, 0px 9%, 0px 20%, 0px 30%, 0px 60%, 0px 100%;
    background-size: 2000px 9.7%, 2000px 11%, 2000px 10%, 2000px 30%, 2000px 30%, 2000px 30%, 2000px 40%;
    background-repeat: no-repeat;
    color: transparent;
    -webkit-background-clip: text;
}

/** Parallax */
.pixelated {
  image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -o-crisp-edges;            /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated; /* Chrome */
  image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
  -ms-interpolation-mode: nearest-neighbor;   /* IE8+  */
}

header.masthead .fixed-background {
  background-image: url('../img/fixed-mobile.png');
  background-color: #2a2227;

  height: 600px;
  z-index: -100;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  background-position: center top;
  background-repeat: repeat-x;
  background-attachment: scroll;

  bottom: 0px;
  left: 0px;
  
  width: 100%;
  position: absolute;
}

.btn-xl {
  text-transform: uppercase;
  padding: 1.5rem 3rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
}

.bg-black {
  z-index: 1000;
  background-color: #000 !important;
}

.bg-secondary {
  background-color: #231a1c !important;
}

.rounded-pill {
  border-radius: 5rem;
}

#mainNav {
  font-family: 'Karma', serif;
  font-weight: 700;
  margin-bottom: 0;
  text-transform: uppercase;
  background-color: #231a1c;
  border-bottom: 2px solid #83645b;

  padding-top: 13px;
  padding-bottom: 3px;

  visibility: visible;
}

#mainNav .navbar-toggler {
  font-size: 14px;
  padding: 11px;
  color: #fae8d0;
  border: 1px solid #fae8d0;
}

#mainNav .navbar-brand {
  font-weight: 700;
}

#mainNav a {
  color: #fae8d0;
}

#mainNav a:hover {
  color: #f3dc7f;
}

#mainNav img {
  
}

#mainLogo {
  display: none;
}

#mainLogo.logo-fade {
  opacity: 0.0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

#mainNav .navbar-nav .nav-item {
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}

#mainNav .navbar-nav .nav-item:hover {
  color: fade(white, 80%);
  outline: none;
  background-color: transparent;
}

#mainNav .navbar-nav .nav-item:active, #mainNav .navbar-nav .nav-item:focus {
  outline: none;
  background-color: transparent;
}

@media (min-width: 992px) {

  .video-embed {
    padding: 100px;
  }

  #mainNav .navbar-nav .nav-item {
    margin-left: 5px;
  }

  #mainLogo {
    display: inline-block;
  }

  #mainNav img {
    position: absolute;
    top: 4px;
  }

  #mainNav {
    opacity: 0.0;
    -webkit-transition: background 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s;
    -moz-transition: background 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s;
    transition: background 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s, opacity 0.3s ease-in-out;
    letter-spacing: 1px;
    border-bottom: none;
    background: transparent;

    visibility: hidden;

  }
  #mainNav.navbar-shrink {
    opacity: 1.0;
    padding-top: 13px;
    padding-bottom: 3px;
    background: #252627;
    border-bottom: 2px solid #83645b;

    visibility: visible;
  }
  #mainNav .nav-link.active {
    outline: none;
    color: #f3dc7f;
  }
  #mainNav .nav-link.active:hover {
    color: #fae8d0;
  }
}

.btn-circle {
  font-size: 26px;
  width: 55px;
  height: 55px;
  margin-top: 15px;
  line-height: 45px;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
  color: #fae8d0;
  border: 2px solid #fae8d0;
  border-radius: 100% !important;
  background: transparent;
}

.btn-circle:focus, .btn-circle:hover {
  color: #fae8d0;
  outline: none;
  background: rgba(255, 255, 255, 0.1);
}

.steam-banner-tab {
  background-image: url('../img/steam-banner-tab.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 370px;
  height: 66px;

  color: #2a2227; 
  font-weight: 700;

  position: absolute;
  top: 0px;
  right: 0px;

  text-align: center;
  vertical-align: middle;

  z-index: 100;
}

#switch {
  left: 10px;
  right: auto;   
}

@media (max-width:992px) {
    .steam-banner-tab {
      top: 64px;
      left: 50%;
      transform: translateX(-50%);
  }

    #switch {
      left: 50%;
      right: 0%;
      top: 128px;
  }
}


.steam-banner-tab a {
   color: #2a2227;
}

#switch a {
   color: red;
}

.steam-banner-tab a:hover {
   color: #2a2227;
}

.steam-banner {
  background-image: url('../img/steam-banner.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 364px;
  height: 82px;

  color: #2a2227; 
  font-weight: 700;

  text-align: center;
}

.steam-banner a {
   color: #2a2227;
}

.steam-banner a:hover {
   color: #2a2227;
}

.arrow-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-bottom: 10px;
}

.arrow-container .fade {
  opacity: 0.0;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

.scroll-arrow {
  margin: 0 auto; 
}

.scroll-text {
  font-family: 'Karma', serif;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}

.scroll-arrow a svg {
  stroke: #2a2227;
  stroke-width: 10;
}

.scroll-arrow a {
  color: #fae8d0;
}

.scroll-arrow a:hover {
  text-decoration: none;
}

.scroll-arrow a span {
  display: none;
 
  padding-top: 7px;
  margin-bottom: 7px;
  text-shadow: black 0px 0px 1px;

  -webkit-transition: background 0.2s ease-in-out;
  -moz-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
}

.scroll-arrow a:hover span {
  display: block;

  background-color: #2a2227;
}

.scroll-arrow a:hover i {
  display: none;
}

header.masthead {
  height: 600px;
  position: relative;
}

@media (min-width:768px) {
  header.masthead .fixed-background {
    height: 750px;
    background-position: center bottom;
  }

  header.masthead {
    height: 750px;
  }
}

@media (min-width:1024px) {
  header.masthead .fixed-background {
    background-image: url('../img/fixed.png');
    background-position: center bottom;

    height: 900px;
  }

  header.masthead {
    height: 900px;
  }
}

@media (min-width:1400px) {
  header.masthead .fixed-background {
    height: 1100px;
  }

  header.masthead {
    height: 1100px;
  }
}

@media (min-width:2560px) {
  header.masthead .fixed-background {
    height: 1500px;
  }

  header.masthead {
    height: 1500px;
  }
}

header.masthead .masthead-content {
  z-index: 1;
  position: relative;
}

header.masthead .masthead-content .masthead-heading {
  font-size: 4rem;
}

header.masthead .masthead-content .masthead-subheading {
  font-size: 2rem;
}

@media (min-width: 992px) {
  header.masthead {
    padding-top: calc(10rem + 55px);
    padding-bottom: 10rem;
  }
  header.masthead .masthead-content .masthead-heading {
    font-size: 6rem;
  }
  header.masthead .masthead-content .masthead-subheading {
    font-size: 4rem;
  }
}

.outline-form-control {
  background-color: #383034;
  color: #fae8d0 !important;
  border-color: #fae8d0;
  max-width: 185px;
}

::placeholder { color:#fae8d0 !important; };
::placeholder:focus { color:#2a2227 !important; }

.outline-form-control:focus, .outline-form-control:active {
  background-color: #fae8d0;
  color: #2a2227 !important;
  border-color: #fae8d0;

  box-shadow: 0 0 0 0.2rem rgba(250, 232, 208, 0.5) !important;
}

.bg-primary {
  background-color: #231a1c !important;
}

.btn-outline-primary {
  background-color: transparent;
  border-color: #fae8d0;
  color: #fae8d0;
}

.btn-outline-primary:active, .btn-outline-primary:focus, .btn-outline-primary:hover {
  background-color: #fae8d0 !important;
  border-color: #fae8d0 !important;
  color: #2a2227 !important;
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
  background-color: #bd0760 !important;
  border-color: #bd0760 !important;
}

.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(250, 232, 208, 0.5) !important;
}

.btn-secondary {
  background-color: #ff6a00;
  border-color: #ff6a00;

}

.btn-outline-secondary {
  background-color: transparent;
  border-color: #e94144;
  color: #e94144;
  font-size: 20px;
  font-weight: 700;
}

.btn-outline-secondary:active, .btn-outline-secondary:focus, .btn-outline-secondary:hover {
  background-color: #e94144 !important;
  border-color: #e94144 !important;
  color: #2a2227 !important;
}

.btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover {
  background-color: #cc5500 !important;
  border-color: #cc5500 !important;
}

.btn-secondary:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 106, 0, 0.5);
}