@font-face {
  font-family: 'ITC American Typewriter';
  src: url('https://db.onlinewebfonts.com/t/bf9940413066bf65037e293ebc4c068e.eot'); /* IE9*/
  src: url('https://db.onlinewebfonts.com/t/bf9940413066bf65037e293ebc4c068e.eot?#iefix')
      format('embedded-opentype'),
    url('https://db.onlinewebfonts.com/t/bf9940413066bf65037e293ebc4c068e.woff2')
      format('woff2'),
    url('https://db.onlinewebfonts.com/t/bf9940413066bf65037e293ebc4c068e.woff')
      format('woff'),
    url('https://db.onlinewebfonts.com/t/bf9940413066bf65037e293ebc4c068e.ttf')
      format('truetype'),
    url('https://db.onlinewebfonts.com/t/bf9940413066bf65037e293ebc4c068e.svg#ITC American Typewriter')
      format('svg'); /* iOS 4.1- */
}

body {
  font-family: 'American Typewriter', 'ITC American Typewriter', 'Courier New',
    Courier, monospace;
  color: #4f555d;
}

a {
  color: #272f38;
  outline: none;
  text-decoration: none;
}

a:hover {
  color: #272f38;
}

a:focus {
  box-shadow: 0 0 0 0.1rem #ffffff4f;
}

a:visited {
  color: #272f38;
  outline: none;
  text-decoration: none;
}

p {
  color: #4f555d;
  line-height: 1.64em;
}

.navbar {
  padding: 1em 2em;
  background: #24282c;
}
.navbar .navbar-brand {
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  padding-top: 0.1rem;
}

.navbar-brand:hover {
  color: #ffffff4f;
}

.navbar > a,
.navbar-brand:visited,
.navbar > a:visited,
.navbar .btn.btn-link,
.navbar .btn.btn-link:focus,
.navbar .btn.btn-link:active {
  color: #fff;
  letter-spacing: 0.025em;
}

.navbar > a:hover,
.navbar .btn.btn-link:hover,
.navbar .btn.btn-link:focus,
.navbar .btn.btn-link:hover {
  color: #ffffffad;
  border-bottom-color: #ffffffad;
}

.navbar .btn.active {
  border-bottom-color: #ffffffad;
}

.navbar .dropdown {
  margin-right: 0.5rem;
}

.navbar .btn {
  margin: 0;
  padding: 0.25rem 0.5rem;
}

ul.menu li {
  padding: 0.6rem 0;
  margin: 0;
}

ul.menu li a {
  padding: 0.6rem;
}

ul.menu li:hover {
  background: rgba(211, 211, 211, 0.25);
}

.menu {
  padding: 0;
  border-radius: 0;
  transform: translateY(0.8rem);
}

.dropdown .menu {
  animation: 0.17s ease-in 1;
}

.btn {
  border: 0.05rem solid #24282c;
  border-radius: 0.1rem;
  color: #24282c;
}

.btn:focus {
  box-shadow: 0 0 0 0.1rem rgba(0, 0, 0, 0);
}

.btn.outline {
  background: transparent;
  border-color: #ffffff4f;
  color: #ffffffad;
}

.btn.outline:hover {
  background: transparent;
  border-color: #ffffffad;
  color: #fff;
}

.btn.outline:hover {
  background: transparent;
  border-color: #fff;
}

@keyframes slider-lg {
  0%,
  10% {
    background-image: var(--hero-image-1);
  }
  25%,
  35% {
    background-image: var(--hero-image-2);
  }
  50%,
  60% {
    background-image: var(--hero-image-3);
  }
  75%,
  85% {
    background-image: var(--hero-image-4);
  }
  100% {
    background-image: var(--hero-image-1);
  }
}

#hero-tall {
  height: calc(100vh - 7.5rem);
  min-height: 28.5rem;
  background: #24282c center center no-repeat;
  background-size: cover;
  -webkit-animation: slider-lg ease-out 20s both infinite;
  -moz-animation: slider-lg ease-out 20s both infinite;
  -o-animation: slider-lg ease-out 20s both infinite;
  animation: slider-lg ease-out 20s both infinite;
  z-index: 0;
}

#hero-tall img {
  width: 1px;
  height: auto;
  display: none;
}

#hero-regular {
  height: calc(100vh - 15rem);
  min-height: 27rem;
  background: #4f555d center center no-repeat;
  background-color: var(--main-color, #4f555d);
  background-size: cover;
  display: flex;
}

#hero-regular h1,
#title h2 {
  font-family: 'Helvetica Nueve', Helvetica, Arial, sans-serif;
  font-weight: bold;
}

#hero-regular h1 {
  color: #fff;
  font-size: 3.6rem;
  letter-spacing: -0.1em;
  align-self: flex-end;
  text-transform: lowercase;
  margin: 0 auto;
  line-height: 0.6em;
}

#title {
  overflow-y: hidden;
}

#title h2 {
  font-size: 6.7rem;
  text-transform: uppercase;
  margin: 0;
  font-weight: bold;
  padding: 0;
  line-height: 0.7em;
  letter-spacing: -0.1em;
  color: var(--main-color, #4f555d);
}

#content,
#gallery {
  margin: 5rem auto;
}

#bottom-menu {
  padding: 1rem 2rem;
}

.btn.btn-link {
  color: #4f555d;
}

.btn.btn-link:hover {
  color: #4f555d;
  border-bottom-color: #272f38;
}

footer {
  border-top: 1px solid #65656510;
  margin: 0 0 3rem;
  padding: 3rem 2rem 0;
}

.container.grid-lg {
  max-width: 1200px;
}

.grid-md,
.grid-lg,
.grid-xl {
  padding: 0 2rem;
}

a.figure {
  margin-bottom: 0.8rem;
  display: block;
}

a.figure:hover {
  filter: brightness(75%) saturate(105%);
  transition: 0.35s ease-in-out;
}

.modal-container,
.modal-container .modal-body {
  padding: 0;
}

#following-image {
  height: 20rem;
  width: 100%;
  background: center center no-repeat;
  background-size: cover;
  background-color: var(--main-color, #4f555d);
}

.modal.active .modal-overlay,
.modal:target .modal-overlay {
  background: #272f38de;
}

.modal.modal-sm .modal-container {
  padding: 0;
}

.modal-container .modal-header {
  border-bottom: 1px solid lightgray;
}

.modal-container .modal-body {
  padding: 0.4rem 0.8rem;
}

.modal-container .accordion .accordion-header {
  padding: 0.6rem 0 0.2rem;
  border-top: 1px solid rgba(211, 211, 211, 0.5);
  color: #24282c;
}

.modal-container .accordion:first-of-type .accordion-header {
  border-top: none;
}

.modal-header .btn {
  font-size: 1.2rem;
}

.modal-container .accordion ul {
  margin: 0;
}

.modal-container .modal-footer {
  text-align: unset;
}

.img-100 {
  width: 100%;
  height: auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
  width: 100%;
}
table.table-striped tbody tr:nth-of-type(odd) {
  background: #f7f8f9;
}
table tbody tr.active,
table.table-striped tbody tr.active {
  background: #eef0f3;
}
table tbody tr:hover {
  background: #eef0f3;
}
table.table-scroll {
  display: block;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  white-space: nowrap;
}
table td,
table th {
  border-bottom: 0.05rem solid #dadee4;
  padding: 0.6rem 0.4rem;
}
table th {
  border-bottom-width: 0.1rem;
}

@media screen and (max-width: 479px) {
  #hero-tall {
    height: calc(100vh - 14rem);
    min-height: 10rem;
  }

  #hero-regular {
    min-height: 10rem;
  }

  #hero-regular h1 {
    font-size: 2.4rem;
    letter-spacing: -0.05em;
    margin: 0 auto;
  }

  #title h2 {
    font-size: 4.1rem;
    line-height: 0.7em;
  }

  #content,
  #gallery {
    margin: 2rem auto;
  }

  #following-image {
    height: 10rem;
  }

  .navbar {
    padding: 1em;
    background: #24282c;
  }
}