html,
body {
  width: 100%;
  height: 100vh;
  display: flex;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  /* color: #e6e6e8; */
  color: #f8f8ff;
  font-family: 'Fira Sans', sans-serif;
  font-size: 16px;
}

body a {
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
}

*,
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}

#welcome {
  padding: 3% 12% 10%;
  /* border: 5px solid red; */
}

.clp-contact {
  background: #030303;
  font-family: 'Fjalla One', sans-serif;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 120px 0 20px 0;
  font-size: 1.7rem;
  color: #fff;
  margin: 0;
}

.clp-copyright {
  background: #030303;
  font-family: 'Fira Sans', sans-serif;
  letter-spacing: 0px;
  text-align: center;
  text-transform: none;
  padding: 40px 0 10px 0;
  font-weight: normal;
  font-size: 1.5rem;
  color: #fff;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
}

/* NAVBAR  */
.navbar-brand {
  font-family: 'Oswald', sans-serif;
  font-size: 1.5rem !important;
  font-weight: 400;
  color: #c90100 !important;
  letter-spacing: 2px;
  line-height: 1.5;
  padding: 0 1rem;
  margin: 4px 0;
  text-align: left;
  text-shadow: 2px 2px 3px #000, 0 0 1px #0e0e0e, 0 0 3px #000;
}

.navbar-custom {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  background-color: rgba(0, 0, 0, 0.3) !important;
  /* padding-right: 3rem; */
}

.navbar-custom a {
  color: #c90100;
  text-decoration: none;
}

.navbar-custom a:hover {
  color: #bfc1c2 !important;
}

.navbar {
  margin: 0;
  padding: 0.25rem 1rem;
}

ul {
  padding-right: 50px;
}

.navbar li {
  font-size: 1rem;
}

.nav-link {
  padding: .5rem .5rem;
}

.nav-link:focus, .nav-link:hover {
  color: #bfc1c2;
}

.navbarDropdown {
  background-color: rgba(0, 0, 0, .5) !important;
}

.nav-item active {
  background-color: rgba(0, 0, 0, .5);
}

.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .show>.nav-link {
  font-family: 'Fira Sans', sans-serif;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
}

.navbar-dark .navbar-nav .nav-link {
  /* color: rgba(255, 255, 255, .5); */
  font-family: 'Fira Sans', sans-serif;
  color: #acacac;
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
  text-shadow: 2px 2px 3px #000, 0 0 1px #0e0e0e, 0 0 3px #000;
}

.navbar-dark .navbar-nav .nav-link:hover {
  /* color: rgba(255,255,255,.55); */
  color: #fff;
}

.navbar-dark .navbar-toggler {
  color: transparent;
  border-color: transparent;
}

.nav-link:focus, .nav-link:hover {
  color: #bfc1c2;
  text-decoration: underline;
  text-underline-offset: 0.5rem;
}

.box-shadow-menu {
  position: relative;
  padding-left: 1.25em;
  font-size: .875rem !important;
  text-transform: uppercase;
  color: #f8f8ff !important;
}

.box-shadow-menu a {
  text-decoration: none !important;
}

.box-shadow-menu:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1em;
  height: 0.15em;
  background: silver;
  box-shadow:
    0 0.25em 0 0 silver,
    0 0.5em 0 0 silver;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
}

/* drop-down menu override */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: .5rem 0;
  margin: .125rem 0 0;
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
  text-align: left;
  list-style: none;
  background-color: rgba(0, 0, 0, .4);
  background-clip: padding-box;
  border: 1px solid rgba(172, 172, 172, .5);
  border-radius: .25rem;
}

.dropdown-item {
  padding: .25rem 1rem;
  background-color: rgba(0, 0, 0, .4) !important;
  font-weight: 400;
  font-size: 1rem;
  text-decoration: none;
  background-color: transparent;
  border: 0;
}

.dropdown-menu a:hover {
  background-color: rgba(0, 0, 0, .4);
  color: #c0c0c0;
}

.dropdown-menu a {
  color: #fff;
}

/* GOOD - 3 image hero */
.hero-image {
  min-height: 450px;
  background: url(../images/otto212-header-1.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.3);
  margin-top: 0;
  max-width: 100%;
  height: auto;
  position: relative;
}

.banner-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.banner-info h1 {
  font-family: 'Oswald', sans-serif;
  font-size: 3rem;
  font-weight: 400;
  color: #fff;
  font-style: italic;
  letter-spacing: 1px;
  text-shadow: 5px 5px 10px #000, 0 0 20px #0e0e0e, 0 0 40px #000;
}

.about-info h1 {
  font-size: 4rem;
  margin: 0 0 0 0;
  padding-bottom: 20px;
  color: #bf0e00;
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-style: italic;
  text-shadow: -2px 1px 2px #000000;
}

.about-info h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  line-height: 2.5rem;
  color: #333;
  text-align: center;
  font-size: 2.75rem;
  letter-spacing: 0;
  padding: 1rem 0 2.5rem;
}

.about-info h3 {
  font-size: 1.75rem;
  color: #2e2e9b;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  padding: 1rem 0 0;
}

.about-info h4 {
  font-size: 2rem;
  margin: 15px 0 15px 0;
  color: #636262;
}

.about-info p {
  color: #354230;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 500;
  text-align: left;
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: 0;
}

.about-info a {
  text-decoration: none;
  color: #2e2e9b;
  font-weight: bold;
}

.about-info a:hover {
  text-decoration: none;
  color: #c90100;
  font-weight: bold;
}

#otto {
  color: #1c2841;
  font-family: 'Fira Sans', sans-serif;
  text-align: left;
  font-size: 1.125rem;
  text-transform: lowercase;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 10px;
  cursor: pointer;
}

#sample-section {
  padding: 8% 0 8%;
  background-color: #676d7d;
  background-color: #5e687f;
}

/* Footer */
.clp-title h3 {
  font-family: 'Playfair Display', serif;
  text-transform: none;
  font-size: 1.25rem;
  color: #253529;
  line-height: 1.5;
  font-weight: 700;
}

.clp-title h4 {
  margin-bottom: 0.5rem;
  text-transform: none;
  color: #708090;
  line-height: 1.4;
  padding-bottom: 0;
  font-weight: 400;
}

.clp-title p {
  text-transform: none;
  line-height: 1.2;
  color: #555;
  font-weight: 400;
  font-style: normal;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2rem;
  /* Set the fixed height of the footer here */
  line-height: 2rem;
  /* Vertically center the text there */
  /* background-color: #7f7f8c; */
}

#clp-em a {
  color: #fff;
  color: #000;
  text-decoration: none;
  font-weight: bold;
}

#clp-em a:hover {
  color: #c90100;
  /* text-decoration: underline !important; */
}

footer .main-footer {
  padding: 1% 0;
  background: #100c08;
  background: #f0f0f0;
  /* border: 5px solid red; */
}

footer ul {
  padding-left: 0;
  list-style: none;
}

.footer-copyright {
  background: #1a1a1a;
  /* background: #100c08; */
  padding: 0.5rem 0 1rem;
}

.footer-copyright .logo {
  display: inherit;
}

.footer-copyright nav {
  float: right;
  margin-top: 5px;
}

.footer-copyright nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-copyright nav ul li {
  border-left: 1px solid #505050;
  display: inline-block;
  line-height: 12px;
  margin: 0;
  padding: 0 8px;
}

.footer-copyright nav ul li a {
  color: #969696;
}

.footer-copyright nav ul li:first-child {
  border: medium none;
  padding-left: 0;
}

.footer-copyright p {
  color: #969696;
  margin: 2px 0 0;
}

/* Footer Top */
.footer-top {
  background: #252525;
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 3px solid #222;
}

/* Footer transparent */
footer.transparent .footer-top, footer.transparent .main-footer {
  background: transparent;
}

footer.transparent .footer-copyright {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3);
}

/* Footer light */
footer.light .footer-top {
  background: #f9f9f9;
}

footer.light .main-footer {
  background: #f9f9f9;
}

footer.light .footer-copyright {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);
}

/* Footer 4 */
.footer- .logo {
  display: inline-block;
}

.show_nmfd {
  background-color: #5e687f;
  /* background-color: #676d7d; */
  text-align: center;
}

.credit-title h5 {
  font-family: 'Playfair Display', serif;
  /* font-family: 'Fira Sans', sans-serif; */
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.5;
  color: #fff;
  letter-spacing: 0;
  padding: 0.75rem 0 1.5rem;
  margin-bottom: 0.25rem;
}

.nmfd-vid {
  padding-top: 50px;
  padding-bottom: 120px;
  text-align: center;
}

.nmfd-vid h1 {
  color: #c90100;
  font-family: 'Oswald', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  padding-top: 80px;
  padding-bottom: 40px;
  font-style: italic;
  font-size: 3.3rem;
  margin: 0 auto;
  text-shadow:
    2px 2px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.nmfd-vid h2 {
  color: #fff;
  font-family: 'Fira Sans', sans-serif;
  font-size: 2.5rem;
  letter-spacing: 1px;
  font-style: italic;
  font-weight: 400;
  margin: 0 auto;
  padding-bottom: 30px;
  text-shadow: -2px 1px 2px #000000;
}

.nmfd-vid h3 {
  color: #d30000;
  font-family: 'Oswald', sans-serif;
  text-transform: none;
  letter-spacing: 1px;
  padding: 30px 0;
  font-style: normal;
  font-size: 2.5rem;
  text-shadow: none;
}

.nmfd-vid h4 {
  color: #c90100;
  font-family: 'Fira Sans', sans-serif;
  font-size: 3rem;
  letter-spacing: 1px;
  font-weight: 600;
  margin: 0 auto;
  padding-bottom: 30px;
  text-shadow:
    2px 2px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.nmfd-vid p {
  color: #fff;
  font-family: 'Fira Sans', sans-serif;
  font-size: 5rem;
  font-weight: bold;
  letter-spacing: 1px;
  padding-top: 10px;
  padding-bottom: 80px;
}

/* --BEGIN media queries-- */
/* Large devices (less than 1400px)*/
@media screen and (max-width: 1399.98px) {
  .hero-image {
    min-height: 450px;
  }

  .about-info h2 {
    font-weight: 900;
    line-height: 2.5rem;
    font-size: 2.5rem;
    padding: 1rem 0 2rem;
  }

  .about-info h3 {
    font-size: 1.5rem;
    font-weight: 600;
    padding: .75rem 0 0;
  }

  .about-info p {
    font-weight: 500;
    font-size: 1.25rem;
  }

  .banner-info h1 {
    font-size: 3rem;
    letter-spacing: 1px;
    text-shadow: 3px 3px 5px #000, 0 0 10px #0e0e0e, 0 0 20px #000;
  }
}

/* Large devices (less than 1200px)*/
@media screen and (max-width: 1199.98px) {
  .hero-image {
    min-height: 400px;
  }

  .banner-info h1 {
    font-size: 2.5rem;
    letter-spacing: 1px;
    text-shadow: 3px 3px 5px #000, 0 0 10px #0e0e0e, 0 0 20px #000;
  }

  .about-info h2 {
    font-weight: 900;
    line-height: 2.5rem;
    font-size: 2.25rem;
    padding: 1rem 0 1.5rem;
  }

  .about-info h3 {
    font-size: 1.5rem;
    font-weight: 600;
    padding: .75rem 0 0;
  }

  .about-info p {
    font-weight: 500;
    font-size: 1.25rem;
  }
}

/* Medium devices (less than 992px)*/
@media screen and (max-width: 991.98px) {
  .banner {
    min-height: 445px;
  }

  .hero-image {
    min-height: 300px;
  }

  .banner-info h1 {
    font-size: 2.25rem;
    letter-spacing: 1px;
    text-shadow: 3px 3px 5px #000, 0 0 10px #0e0e0e, 0 0 20px #000;
  }

  .about-info h2 {
    font-weight: 900;
    line-height: 2.5rem;
    font-size: 2.125rem;
    padding: 1rem 0 1.25rem;
  }

  .about-info h3 {
    font-size: 1.5rem;
    font-weight: 600;
    padding: .75rem 0 0;
  }

  .about-info p {
    font-weight: 500;
    font-size: 1.25rem;
  }

  #otto {
    font-size: 1.25rem;
    color: #000;
  }

  .nmfd-vid h1 {
    font-size: 3.3rem;
  }

  .nmfd-vid h2 {
    font-size: 2.3rem;
  }

  .clp-contact {
    font-size: 1.4rem;
    padding: 50px 0 20px 0;
  }
}

/* Small devices (less than 768px)*/
@media screen and (max-width: 767.98px) {
  .hero-image {
    min-height: 300px;
  }

  .banner-info h1 {
    font-size: 1.75rem;
    letter-spacing: 1px;
    text-shadow: 3px 3px 5px #000, 0 0 10px #0e0e0e, 0 0 20px #000;
  }

  .nmfd-vid h3 {
    letter-spacing: 1px;
    padding: 20px 0;
    font-size: 1.9rem;
  }

  .about-info h2 {
    font-weight: 900;
    line-height: 2rem;
    font-size: 1.75rem;
    padding: 1rem 0 1rem;
  }

  .about-info h3 {
    font-size: 1.25rem;
    font-weight: 600;
    padding: .75rem 0 0;
  }

  .about-info p {
    font-weight: 500;
    line-height: 1.3;
    font-size: 1.125rem;
  }

  #otto {
    font-size: 1rem;
    color: #000;
  }

  .nmfd-vid h1 {
    font-size: 3rem;
  }

  .nmfd-vid h2 {
    font-size: 2rem;
  }

  .clp-contact {
    font-size: 1.4rem;
    padding: 50px 0 20px 0;
  }
}

/* Small devices (less than 576px)*/
@media screen and (max-width: 575.98px) {
  .hero-image {
    min-height: 250px;
  }

  .banner-info h1 {
    font-size: 1.75rem;
    letter-spacing: 1px;
    text-shadow: 3px 3px 5px #000, 0 0 10px #0e0e0e, 0 0 20px #000;
  }

  .nmfd-vid {
    padding-top: 30px;
    padding-bottom: 50px;
  }

  .nmfd-vid h1 {
    font-size: 2.5rem;
  }

  .nmfd-vid h2 {
    font-size: 1.9rem;
  }

  .about-info h2 {
    font-weight: 900;
    font-size: 1.5rem;
    padding: 1rem 0 .5rem;
  }

  .about-info h3 {
    font-size: 1.125rem;
    font-weight: 600;
    padding: .75rem 0 0;
  }

  .about-info p {
    font-weight: 500;
    line-height: 1.3;
    font-size: 1rem;
  }

  #otto {
    font-size: .875rem;
  }

  .footer p {
    font-size: 14px;
  }

  .footer {
    padding: 1.5rem 0 0 !important;
  }
}

/* portrait e-readers (Nook/Kindle), smaller tablets @ 480 */
@media screen and (max-width: 479.98px) {
  .hero-image {
    min-height: 225px;
  }

  .banner-info h1 {
    font-size: 1.25rem;
    letter-spacing: 1px;
    padding: 0 2rem;
    0 text-shadow: 3px 3px 5px #000, 0 0 10px #0e0e0e, 0 0 20px #000;
  }

  .about-info h2 {
    font-weight: 900;
    font-size: 1.5rem;
    padding: 1rem 0 .5rem;
  }

  .about-info h3 {
    font-size: 1.125rem;
    font-weight: 600;
    padding: .75rem 0 0;
  }

  .about-info p {
    font-weight: 500;
    font-size: 1rem;
  }

  #otto {
    font-size: .875rem;
  }

  .footer {
    padding: 1.25rem 0;
  }

  .footer p {
    font-size: 14px;
    font-family: 'Fira Sans', sans-serif;
    color: #ffffff;
  }

  #otto {
    font-size: 1.1rem;
    margin-bottom: 10px;
  }

  .nmfd-vid {
    padding-top: 30px;
    padding-bottom: 50px;
    text-align: center;
  }

  .nmfd-vid h1 {
    font-size: 1.7rem;
  }

  .nmfd-vid h2 {
    font-size: 1.3rem;
  }

  .clp-contact {
    font-size: 1rem;
    padding: 30px 0 20px 0;
  }
}

/* smartphones, iPhone, portrait 480x320 phones */
@media screen and (min-width: 0px) and (max-width:320px) {
  .hero-image {
    min-height: 200px;
  }

  .banner-info h1 {
    font-size: 1rem;
    letter-spacing: 1px;
    padding: 0 1rem;
    0 text-shadow: 3px 3px 5px #000, 0 0 10px #0e0e0e, 0 0 20px #000;
  }

  .about-info h2 {
    font-weight: 900;
    font-size: 1.5rem;
    padding: 1rem 0 .25rem;
  }

  .about-info h3 {
    font-size: 1rem;
    font-weight: 600;
    padding: .5rem 0 0;
  }

  .about-info p {
    font-weight: 500;
    font-size: .875rem;
  }

  #otto {
    font-size: .75rem;
  }

  .footer {
    padding: 1.25rem 0;
  }

  .clp-title h3 {
    font-size: 1.125rem;
  }
}