/* GENERAL */
body {
  font-family: "Helvetica", sans-serif;
  font-size: 18px;
  color: seashell;
  background-color: black;
  opacity: 0.9;
  text-align: center;
  overflow-x: hidden;
}

p {
  font-size: 1.4rem;
  font-family: 'raleway', cursive;
  line-height: 2.1;
  margin: 0;
}

h2 {
  font-family: 'raleway', cursive;
  font-weight: bold;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  margin-bottom: 15px;
}

h3 {
  font-family: 'raleway', cursive;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.8;
  margin: 0;
}

h4 {
  font-family: 'raleway', cursive;
  margin: 10px 0 15px;
}

h5 {
  font-family: 'raleway', cursive;
  font-weight: bold;
}

.container {
  padding: 2rem 1rem;
}

.container-fluid {
  border-radius: 3px;
  margin: 0 3rem;
}

/* NAVBAR */

header nav.navbar {
  opacity: 0.95;
}

header .navbar-inverse {
  padding: 0 20px 0 10px;
  border-bottom: 1px solid seashell;
  margin: 0;
}

header a.navbar-brand {
  padding: 0 0 0 10px;
  margin: 8px 0;
}

header .navbar-brand img {
  height: 50px;
}

header .navbar-collapse {
  padding: 0 15px;
}

header .navbar-collapse a {
  font-family: 'Neucha', cursive;
  font-weight: bold;
  color: white!important;
  text-decoration: none;
  line-height: 1.6;
  padding: 19px;
}

header ul.navbar-default {
  background-color: white;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  margin: 0;
  display: none;
}

header .navbar-default a {
  background-color: transparent!important;
}

header .navbar-default img {
  width: 20px;
  margin: 10px;
}

header .navbar-default .mobile-list a {
  font-size: 2rem;
  font-family: 'Neucha', cursive;
  font-weight: bold;
  line-height: 2!important;
  color: black!important;
  text-decoration: ;
  text-align: center;
}

header #nav-toggle {
  position: unset;
  display: -webkit-inline-box;
  padding: 23px 35px 23px 0;
}

header #nav-toggle span,
header #nav-toggle span:before,
header #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: black;
  position: absolute;
  display: block;
  content: '';
}

header #nav-toggle span:before {
  top: -10px;
}

header #nav-toggle span:after {
  bottom: -10px;
}

header #nav-toggle span,
header #nav-toggle span:before,
header #nav-toggle span:after {
  transition: all 500ms ease-in-out;
}

header #nav-toggle.active span {
  background-color: transparent;
}

header #nav-toggle.active span:before,
header #nav-toggle.active span:after {
  top: 0;
}

header #nav-toggle.active span:before {
  transform: rotate(45deg);
}

header #nav-toggle.active span:after {
  transform: rotate(-45deg);
}

header .back-to-index {
  background-color: #154854;
  height: 100%;
  position: fixed;
  right: 0px;
  z-index: 2;
  border-radius: 0;
  border: 0;
}

/* The side navigation menu */
.sidenav {
  background-color: #154854;
  border-left: 1px solid white;
  font-family: monospace;
  height: 100%;
  overflow-x: hidden;
  padding-top: 60px;
  position: fixed;
  right: 0;
  text-shadow: -1.2px -1.2px 0 #F0AC0F, 1.2px -1.2px 0 #F0AC0F, -1.2px 1.2px 0 #F0AC0F, 1.2px 1.2px 0 #F0AC0F;
  top: 67px;
  transition: 0.5s;
  width: 0;
  z-index: 3;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.sidenav .navbar-header {
  text-align: center;
  width: 100%;
}

.sidenav .navbar-header a {
  padding-right: 0;
  padding-left: 0;
}

.sidenav .navbar-header img {
  width: 25px;
  margin: 0 15px 3px 0;
}

.sidenav .navbar-bottom {
  display: block;
  position: absolute;
  width: 100%;
  bottom: 67px;
  padding-top: 10px;
  border-top: 3px solid white;
}

.sidenav .navbar-bottom a {
  padding: 20px 0;
}

.sidenav .navbar-bottom p {
  margin-top: 10px;
}

.sidenav .navbar-bottom img {
  width: 30%;
  padding-top: 10px;
}

.closed-nav {
  background-color: #154854;
  border-top: 1px solid white;
  border-left: 1px solid white;
  bottom: 0;
  cursor: pointer;
  float: right;
  font-weight: bold;
  height: 100px;
  opacity: 0.8;
  position: fixed;
  right: 0;
  text-align: center;
  width: 90px;
  z-index: 2;
}

.closed-nav span {
  color: white;
  display: block;
  font-family: monospace;
  font-size: 70px;
  line-height: 1.25;
}

/* MISSION */

#mission {
  margin-top: 67px;
}

#mission h2 {
  padding: 10px 0 0;
}

#mission h4 {
  padding: 0 20px 10px 20px;
}

#mission .container-fluid {
  background-image: url("../images/mission_background.jpg");
  background-size: cover;
  background-position: center;
  padding: 21% 0;
}

#mission .black-background {
  background-color: black;
  opacity: 0.8;
  border-top: 1px solid seashell;
  border-bottom: 1px solid seashell;
}

/* FEATURED */
#featured h4 {
  margin: 10px auto 0 auto;
}

#featured img {
  opacity: 0.92;
  width: 90%;
  border-radius: 7px;
  border: 1px solid seashell;
}

#featured .item {
  padding: 10px;
}

#featured .item h4 {
  height: 38px;
  margin: 10px auto;
}

/* LOCATIONS */
#locations {
  line-height: 3rem;
}

#locations h2 {
  margin-top: 0;
}

#locations .container-fluid {
  background-image: url("../images/locations_background.jpg");
  background-size: cover;
  background-position: center;
  padding: 5rem 0 10rem 0;
}

#locations .box {
  background-color: black;
  opacity: 0.8;
  padding: 20px;
  border: 1px solid seashell;
  border-radius: 7px;
  line-height: 2;
}

/* CONTACT */

#contact h5 {
  padding: 0;
  margin: 20px 0;
}

/* FOOTER */

footer h5 {
  font-weight: normal;
  text-align: left;
  padding-left: 20px;
}

@media only screen and (max-width: 1440px) {
  p {
    font-size: 1.5rem;
  }
}

@media only screen and (max-width: 1024px) {
  #locations .pre-box {
    padding: 15px 0;
  }
}

@media only screen and (max-width: 767px) {
  .container-fluid {
    margin: 0;
  }

  header nav.navbar {
    opacity: 0.9;
    padding: 0;
    border: 0;
  }

  header .navbar-header a.navbar-brand {
    width: 100%;
    margin: 8px 0;
    padding: 0;
  }

  header .navbar-header img {
    margin: 0 auto;
  }

  header .navbar-default {
    display: block!important;
  }

  .sidenav {
    top: 119px;
  }

  .sidenav .navbar-bottom {
    bottom: 117px;
  }

  #mission {
    margin-top: 120px;
  }

  #mission .container-fluid {
    padding: 15rem 0;
  }
}

@media only screen and (max-width: 480px) {
  #featured h4 {
    height: 38px;
  }

  footer h5 {
    padding-left: 10px
  }
}