body {
  font-family: 'Nobile', sans-serif;
  background-color: #FFEC38;
}

/* Navigation Bar */
header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 5;
	padding: 0px 0; 
}

@media (min-width: 768px) {
	header {
		padding: 30px 0; 
	} 
}

header .navbar-brand {
	text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 800;
    font-size: 2rem; 
}

header .navbar-brand.absolute {
	position: absolute; 
}

@media (max-width: 991.98px) {
	header .navbar-brand.absolute {
		position: relative; 
	} 
}

header .navbar-brand span {
	color: #fff; 
}

@media (min-width: 768px) {
	header .navbar-brand span {
		color: #ced4da; 
	} 
}

header .navbar {
	background: black !important;
	padding-top: .5rem;
	padding-bottom: .5rem; 
}

@media (min-width: 768px) {
	header .navbar {
        padding-top: 0;
        padding-bottom: 0;
        background: none !important;
        position: relative; 
	} 
}

header .navbar .nav-link {
	padding: 1.7rem 1rem;
	outline: none !important;
	font-size: 1rem;
	color: rgba(0, 0, 0, 0.8) !important; 
}

@media (max-width: 1199.98px) {
	header .navbar .nav-link {
		padding: .5rem 0rem; 
	} 
}

header .navbar .nav-link.active {
	color: #000 !important; 
}

header .navbar .wa {
	background: #189D0E;
	color: #fff !important;
	padding: .5rem; 
	font-size: 1rem;
	line-height: 1;
	
	-webkit-transition: .3s all ease;
	-o-transition: .3s all ease;
	transition: .3s all ease; 
}

header .navbar .wa:hover {
	background: #fff;
	color: #189D0E !important;
	
	-webkit-box-shadow: 2px 0 30px -5px rgba(0, 0, 0, 0.2);
	box-shadow: 2px 0 30px -5px rgba(0, 0, 0, 0.2); }

/* Landing Promo Section */
#landing-promo {
  width: 100%;
  height: 100vh;
}

#landing-promo .container {
  padding-top: 25px;
}

#landing-promo h1 {
  margin: 0 0 10px 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  font-family: 'Corben', cursive;
}

#landing-promo span {
  margin: 0 0 10px 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  font-family: 'Corben', cursive;
}

#landing-promo p {
  margin-top: 20px;
}

#landing-promo bigger {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 50px;
  font-size: 24px;
}

#landing-promo .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@-webkit-keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}