/* MIXINS */
@import url("https://fonts.googleapis.com/css?family=Montserrat|Montserrat+Alternates&display=swap");
body {
  /*font-family: 'Montserrat', sans-serif;*/
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: #808079;
  background-color: #ffffff;
  padding: 0px;
  margin: 0px;
}

.nav-menu li {
  display: inline-block;
}

/* Variables */
/* Variables for Hero */
/* remember to update the javascript as well */
/* the height of the sliding window */
/* how high the text animates 0vh is all the way to the top 100vh is to not show at all */
@-webkit-keyframes throb {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}
/* Standard syntax */
@keyframes throb {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}
@-webkit-keyframes hero_logo {
  0% {
    right: 5vw;
  }
  45% {
    right: 5vw;
  }
  50% {
    right: 70vw;
  }
  80% {
    right: 70vw;
  }
  100% {
    right: 5vw;
  }
}
/* Standard syntax */
@keyframes hero_logo {
  0% {
    right: 5vw;
  }
  45% {
    right: 5vw;
  }
  50% {
    right: 70vw;
  }
  95% {
    right: 70vw;
  }
  100% {
    right: 5vw;
  }
}
@-webkit-keyframes hero_fade {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  45% {
    opacity: 0;
    transform: scale(1.1);
  }
  50% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
/* Standard syntax */
@keyframes hero_fade {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  45% {
    opacity: 0;
    transform: scale(1.1);
  }
  50% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
#heroContain {
  width: 100%;
  height: 60vh;
  overflow: hidden;
  position: relative;
}

#homePageHero {
  background-image: url("/../images/hero1-min.jpg");
  width: 100%;
  height: 60vh;
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  margin-top: 0px;
  background-color: #000000;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation-name: throb;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 7s;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-iteration-count: infinite;
  /* Safari 4.0 - 8.0 */
  animation-name: throb;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

#heroOverlay {
  background-image: url("/../images/hero2-min.jpg");
  width: 100%;
  height: 60vh;
  position: absolute;
  z-index: 2;
  top: 0px;
  left: 0px;
  margin-top: 0px;
  background-color: #000000;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation-name: hero_fade;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 14s;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-iteration-count: infinite;
  /* Safari 4.0 - 8.0 */
  animation-name: hero_fade;
  animation-duration: 14s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  opacity: 0;
}

#heroLogo {
  position: absolute;
  z-index: 3;
  right: 5vw;
  top: 0px;
  background-image: url("/../images/logo.png");
  width: 20vw;
  height: 60vh;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: 0px 25vh;
  -webkit-animation-name: hero_logo;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 14s;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-iteration-count: infinite;
  /* Safari 4.0 - 8.0 */
  animation-name: hero_logo;
  animation-duration: 14s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@media screen and (max-width: 950px) {
  #heroLogo {
    width: 30vw;
    background-position: 0px 20vh;
  }

  #homePageHero, #heroContain, #heroOverlay {
    height: 40vh;
    background-attachment: unset;
  }
}
.joe-contain {
  width: 80vw;
  margin: auto;
  padding: 70px 0px;
}

.footerBar {
  background-image: url("/../images/hero3-min.jpg");
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
  height: 30vh;
}

footer {
  background-color: #000000;
}

/*# sourceMappingURL=public.css.map */