@import url('https://fonts.googleapis.com/css2?family=Gravitas+One&family=Rubik:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gravitas+One&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,531;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,531;1,600;1,700;1,800;1,900&family=Rubik:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
  font-family: Raleway;
  line-height: 1.5;
  color: #000;
  background-color: #fff;
  overflow-x: hidden;
}

h1 {
  font-family: rubik;
  color: #000;
}

h2 {
  font-family: rubik;
  color: #000;
}

h3 {
  font-family: rubik;
  color: #000;
}

/* HEADER */
.full-nav {
  border-radius: 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.70);
}

header nav a,
header i,
.navmenu a {
  color: #fff;
  transition: 1s ease;
}

.main a {
  transition: color 0.25s ease-in;
}

.navmenu a.navorange, .navorange {
  color: #FFCA66;
}

.deals {
  background-color: #AC0201;
  text-shadow: none;
  border-radius: 50px;
  color: #fff;
}

.mobile-icons {
  color: #fff;
}

/* MOBILE NAVIGATION */
.navmenu {
  position: fixed;
  top: 0;
  left: -50%;
  width: 50%;
  background-color: rgba(0, 0, 0, 0.70);
  color: #fff;
  transition: left 0.5s;
}

.navmenu.open {
  left: 0;
}

a.deals-mobile {
  background-color: #AC0201;
  text-shadow: none;
  border-radius: 50px;
  color: #fff;
}

/* HERO */
.slider img {
  display: block;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.first-class {
  width: 1000px;
  height: 250px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hero h1 {
  color: #ffffff;
  text-shadow: 1px 1px 1px #0d1f37;
  margin-left: 0;
  margin-right: 0;
  margin-top: 80px;
  margin-bottom: 20px;
}

.hero h2 {
  text-shadow: 1px 1px 1px #0d1f37;
}

.button a {
  transition: 0.5s ease;
}

.button a:hover {
  background-color: #000;
}

.book {
  background-color: #AC0201;
  color: #fff;
  border-radius: 50px;
}

.hero i.fa-angle-double-down,
.about i.fa-angle-double-down,
.intro-specials i.fa-angle-double-down,
.instructors i.fa-angle-double-down,
.programs i.fa-angle-double-down {
  color: #000;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  cursor: pointer;
}

/* REVIEW */
.testimonial {
  position: relative;
}

.review-1,
.review-2,
.review-3,
.review-4,
.review-5,
.review-6 {
  color: #000;
}

.testimonial-1,
.testimonial-2,
.testimonial-3,
.testimonial-4,
.testimonial-5,
.testimonial-6 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  min-height: 100vh;
}

/* ABOUT */
.about {
  background-image: url(head-instructor.jpg);
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.about h2,
.about p {
  color: #fff;
}

.about-train-at-budo {
  background-color: rgba(0, 0, 0, 0.70);
  border-radius: 20px;
}

/* INSTRUCTORS */
.instructors {
  background-image: url(teaching-adult-class.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  min-height: 100vh;
}

.slick-arrow {
  font-weight: bold;
}

.instructors p,
.instructors h2 {
  color: #fff;
}

.instructors-slider {
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.70);
}

.slider-nav img {
  padding-left: 10px;
  width: 250px;
  margin:auto;
}

/* PROGRAMS */
.programs {
  background-image: url(belts.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  min-height: 100vh;
}

.programs p,
.programs h2 {
  color: #fff;
}

.programs-slider,
.program-description {
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.70);
}

.program-description {
  width: 700px;
}

.programs-slider {
  width: 400px;
}

.slider-nav-programs img {
  padding-left: 10px;
}

/* INTRO.SPECIALS */
.intro-specials {
  background-image: url(heads.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  min-height: 100vh;
}

.special {
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.70);
}

.special h1,
.special h2 {
  color: #fff;
}

.button {
  transition: 0.5s ease;
}

.kids-signup {
  background-color: #AC0201;
  color: #fff;
  border-radius: 50px;
}

a.kids-signup {
  color: #fff;
}

/* FOOTER */
.footer {
  background-image: url(feet-mats.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  min-height: 100vh;
}

.email-specials p,
.email-specials a,
.email-specials i,
.contact p,
.contact a,
.contact i,
.budo-location p,
.budo-location a,
.budo-location i {
  color: #fff;
}

.map {
  width: 600px;
}

.map-m {
  width: 350px;
}

.map-small {
  width: 300px;
}

.contact,
.budo-location {
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.70);
}

.copyright {
  color: #fff;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* FREE CLASS & THANK YOU PAGE */
.widget {
  color: #fff;
}

.freeclass,
.thankyou {
  background-image: url(class-instruction-gi.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  min-height: 100vh;
}

.freeclass h2 {
  color: #fff;
}

.freeclass-container {
  background-color: rgba(0, 0, 0, 0.70);
  border-radius: 20px;
}

.thankyou-container {
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.70);
  border-radius: 20px;
}

/* RESPONSIVE */
@media (max-width: 1475px) {
  nav.main a {
    font-size: 14px;
  }
}

@media (min-width: 1221px) {
  nav.navmenu,
  .mobile-icons {
    display: none;
  }
}

@media (max-width: 630px) {
  .logo img {
    width: 128px;
  }
}

@media (max-width: 1220px) {
  nav.main {
    display: none;
  }
}

@media (max-width: 60em) {
  nav.main {
    display: none;
  }

}

@media (min-width: 30em) {
  .program-description-mobile {
    display: none;
  }

}

@media (max-width: 30em) {
  .program-description,
  .map,
  .map-m {
    display: none;
  }

  .hamburger i {
    font-size: 24px;
  }

}

@media (min-width: 30em) {
  .hamburger i {
    font-size: 36px;
  }

}

/* HEIGHTS */
@media (max-height: 730px) {
  
  .navmenu a {
    margin-bottom: 10px;
  }

}

@media (max-height: 320px) {
  .hero i {
  display: none;
  }
}