.nav-menu {
  position: absolute;
  top: 5%;
  right: 5%;
  z-index: 2;
  cursor: pointer;
}

.nav-menu span {
  font-size: 30px;
  color: #fff;
}

.nav-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  z-index: 9998;
}

.nav-container {
  position: fixed;
  z-index: 999;
  background: #fff;
  width: 320px;
  height: 100%;
  right: -100%;
}

.close-button {
  float: right;
  padding: 20px;
  cursor: pointer;
  vertical-align: text-bottom;
}

.close-button span {
  transform: translatey(1px);
}

.navigation {
  padding: 0;
  list-style-type: none;
}

.navigation a {
  display: inline-block;
  width: 100%;
  padding: 12px 20px;
  color: #202121;
  font-weight: bold;
  font-size: 18px;
  transition: 200ms;
}

.navigation a:not(last-child) {
  border-bottom: 1px solid #e6eaea;
}

.navigation a:hover,
.navigation a:focus {
  text-decoration: none;
  color: #f16876;
}

.dropdown-container {
  position: relative;
}

.dropdown-container .caret {
  display: inline-block;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 6px dashed;
  border-top: 4px solid\9;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  transition: 300ms;
  color: #f16876;
}

.caret.open {
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.dropdown-nav {
  display: none;
  padding-left: 20px;
}

.dropdown-nav li {
  list-style-type: none;
}

.dropdown-nav a {
  font-weight: 400;
}

.parallax-slider {
  position: relative;
}

.slider-wrapper {
  white-space: nowrap;
  overflow: hidden;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.slide {
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center center;
  display: inline-block;
  width: 100%;
  height: 600px;
  flex-shrink: 0;
  transition: 0.9s ease-in-out transform;
  backface-visibility: hidden;
}

.slide-dynamic {
  background-size: 100% auto !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

.slide-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translatex(-50%);
}

.slide-indicator ol {
  display: inline-block;
}

.slide-indicator li {
  display: inline-block;
  height: 15px;
  width: 15px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.slide-indicator li:hover {
  background: #ff9235;
}

.slide-indicator li.active {
  background: #ff9235;
}

.slide::before {
  content: '';
  display: inline-block;
  height: 50%;
}

.content {
  display: inline-block;
  width: 100%;
  max-height: 100%;
  vertical-align: middle;
  white-space: normal;
  color: #fff;
  transform: translate(-5px);
}

.caption {
  padding: 20px;
  transition: 0.4s;
  background: #00283bc2;
  border-radius: 5px;
  transition-delay: 0.8s;
  opacity: 0;
  transform: translatey(200%);
}

.caption h1 {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}

.caption p {
  font-size: 16px;
  font-weight: lighter;
}

.slide-active .caption {
  transform: translatey(0);
  opacity: 1;
}

.home {
  height: 1000px;
  position: relative;
}

.slide1 {
  background: url("../images/banner-1.jpg") top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0px -150px;
}

.slide2 {
  background: url("../images/banner-2.jpg") top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0px -150px;
}

.slide3 {
  background: url("../images/banner-3.jpg") top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0px -150px;

}

.slide4 {
  background: url("../images/banner-4.jpg") top center;
  background-repeat: no-repeat;
  background-position: 0px -150px;
  background-size: cover;
}

/*.slide5 {
  background: url("../images/banner-5.jpg") top center;
  background-position: 0px -100px;
  background-repeat: no-repeat;
  background-size: cover;
}*/

/* Dynamic slider overrides for all screen sizes */
@media (min-width: 1236px) {
  .slide-dynamic {
    height: 700px !important;
    background-size: 100% auto !important;
    background-position: center center !important;
  }
}

@media (max-width: 1235px) {
  .slide {
    height: 450px;
  }

  .slide-dynamic {
    height: 450px !important;
    background-size: 100% auto !important;
    background-position: center center !important;
  }
}

@media (max-width: 1149px) {
  .slide {
    height: 450px;
    background-position: 0px -100px;
  }

  .slide-dynamic {
    height: 450px !important;
    background-size: 100% auto !important;
    background-position: center center !important;
  }
}

@media (max-width: 1049px) {
  .slide {
    height: 400px;
    background-position: 0px -100px;
  }

  .slide-dynamic {
    height: 400px !important;
    background-size: 100% auto !important;
    background-position: center center !important;
  }
}

@media (max-width: 950px) {
  .slide {
    height: 300px;
    background-position: 0px -100px;
  }

  .slide-dynamic {
    height: 300px !important;
    background-size: 100% auto !important;
    background-position: center center !important;
  }
}

@media (max-width: 949px) and (min-width: 768px) {
  .slide {
    background-position: 0px -100px;
  }

  .slide-dynamic {
    background-size: 100% auto !important;
    background-position: center center !important;
  }
}

@media (max-width: 767px) and (min-width: 660px) {
  .slide {
    background-position: 0px -50px;
  }
}

@media (max-width: 660px) and (min-width: 560px) {
  .slide {
    height: 250px;
    background-size: 100%;
    background-position: 0px -50px;
  }
}

@media (max-width: 559px) and (min-width: 470px) {
  .slide {
    height: 250px;
    background-size: 100%;
    background-position: 0px 0px;
  }
}

@media (max-width: 469px) and (min-width: 370px) {
  .slide {
    height: 200px;
    background-size: 100%;
    background-position: 0px 0px;
  }
}

@media (max-width: 369px) and (min-width: 320px) {
  .slide {
    height: 200px;
    background-size: cover;
    background-position: 0px 0px;
  }
}