html,
body,
header,
#intro {
  height: 100%;
}

.introMargin {
  margin-top: 120px;
}

/* Home Background Image */
#intro {
  background: url("/assets/images/intro.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Futsal Services Background Image */
#futsalServices {
  background: url("/assets/images/futsalServicesBg.png") no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* About Us Background Image */
#aboutUs {
  background: url("/assets/images/aboutUsBg.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Coaches Background Image */
#coaches {
  background: url("/assets/images/coachesBg.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Fremantle Wolves Background Image */
#fremantleWolves {
  background: url("/assets/images/fremantleWolvesBg.jpg") no-repeat center
    center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Satin Overlay for Intro Backgroud Image */
.overlay {
  background-color: rgb(0, 0, 0, 0.7);
  backdrop-filter: blur(0px);
}

/* Satin Overlay for Fremantle Wolves Backgroud Image */
.overlay2 {
  background-color: rgb(0, 0, 0, 0.5);
  backdrop-filter: blur(0px);
}

/* Navbar hide transition */
#navbar {
  transition: 0.3s;
}

/* Navbar shadow */
.navbar {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* navbar-links, <h2> and <a> colour */
.navbar-light .nav-item:hover .nav-link,
h2,
a {
  color: #009ad7;
}

/* Image shadow */
#shadow {
  -webkit-box-shadow: 10px 10px 12px 1px rgba(62, 66, 66, 1);
  -moz-box-shadow: 10px 10px 12px 1px rgba(62, 66, 66, 1);
  box-shadow: 10px 10px 12px 1px rgba(62, 66, 66, 1);
}

/* Text colour */
p,
h5,
h6 {
  color: rgb(75, 75, 75);
}

/* <h4> Heading colour */
h4 {
  color: #f7b733;
}

/* Coming soon tooltip for social links in footer  */
.comingSoon {
  position: relative;
  display: inline-block;
}

.comingSoon .comingSoonText {
  visibility: hidden;
  width: 120px;
  background-color: rgb(75, 75, 75);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-family: Arial, Helvetica, sans-serif;

  /* Position for the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.comingSoon:hover .comingSoonText {
  visibility: visible;
}
/* End Coming soon tooltip for social links in footer */

/* Footer */
footer {
  position: absolute;
  width: 100%;
  box-shadow: 8px 4px 8px 4px rgba(0, 0, 0, 0.6),
    20px 6px 20px 6px rgba(0, 0, 0, 0.19);
}

.design {
  filter: grayscale(100%);
}

.design:hover {
  filter: grayscale(0%);
}

/* Footer link color */
a:hover {
  color: #fc4a1a;
  text-decoration: none;
}

/* Icon color */
i {
  color: #fc4a1a;
}

/* Accordion arrows */
.accordion-menu > a {
  display: block;
  position: relative;
}

.accordion-menu > a:after {
  content: "\f078"; /* fa-chevron-down */
  font-family: "FontAwesome";
  position: absolute;
  right: 0;
}

.accordion-menu > a[aria-expanded="true"]:after {
  content: "\f077"; /* fa-chevron-up */
}
/* End Accordion arrows */

/* Bouncing anchor down arrows */
.fa-angle-double-down {
  color: #fc4a1a;
  margin: 8% 0;
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}
/* End Bouncing anchor down arrows */

/* Media Query for Contact number in Navbar */
@media only screen and (max-width: 460px) {
  .navContact {
    font-size: 20px;
  }
}

/* Media Query for Contact number in Navbar */
@media only screen and (max-width: 350px) {
  .navContact {
    font-size: 15px;
  }
}

/* Media Query for carousel indicators */
@media only screen and (max-width: 500px) {
  .hidden {
    display: none;
  }
}

/* Media query for About us images */
@media only screen and (max-width: 767px) {
  .centered {
    text-align: center;
  }

  /* Media query Home Background Image */
  #intro {
    background: url("/assets/images/intro.jpg") center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  /* Media query Futsal Services Background Image */
  #futsalServices {
    background: url("/assets/images/futsalServicesBg.png") center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  /* Media query About Us Background Image */
  #aboutUs {
    background: url("/assets/images/aboutUsBg.png") center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  /* Media query Coaches Background Image */
  #coaches {
    background: url("/assets/images/coachesBg.png") center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  /* Media query Fremantle Wolves Mobile Background Image */
  #fremantleWolves {
    background: url("/assets/images/fremantleWolvesMobileBg.jpg") center
      no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}