:root {
  --main-color: #4EC3C4;;
--boder-color: #4EC3C4;
  --link-color: #333;
}

/* IMAGES */

.image-1-1 {
  aspect-ratio: 1/1;
  width:100%;
  height: auto;
}
.image-2-1 {
  aspect-ratio: 2/1;
  width:100%;
  height: auto;
}
.image-3-2 {
  aspect-ratio: 3/2;
  width:100%;
  height: auto;
}
.image-4-1 {
  aspect-ratio: 4/1;
  width:100%;
  height: auto;
}
.image-4-5 {
  aspect-ratio: 4/5;
  width:100%;
  height: auto;
}
.image-16-9 {
  aspect-ratio: 16/9;
  width:100%;
  height: auto;
}

.image-9-18 {
  aspect-ratio: 9/18;
  width:100%;
  height: auto;
}

.image-21-9 {
  aspect-ratio: 21/9;
  width:100%;
  height: auto;
}

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

.navbar-text {
  color: black;
}

.navbar-nav {
  > li > a {
    color: var(--link-color) !important;

    &:hover,
    &:focus {
      color: var(--main-color) !important;
      background-color: transparent !important;
    }
  }
  > .active > a {
    &,
    &:hover,
    &:focus {
      color: var(--main-color) !important;
      background-color: transparent !important;
    }
  }
  > .disabled > a {
    &,
    &:hover,
    &:focus {
      color: grey !important;
      background-color: red;
    }
  }

  /* // Dropdown menu items
  // Remove background color from open dropdown */

  > .open > a {
    &,
    &:hover,
    &:focus {
      color: var(--link-color);;
      background-color: transparent !important;
    }
  }
}

.navbar-nav {
  width: 100%;
  border-top:1px solid #eee;
  margin-top: 10px;
  text-align: center;
  > li {
    float: none;
    display: inline-block;
  }
}

.logo-box {
  display: flex;
  background-color: black;
}

.logo-centered {
  width: 200px;
  height: 200px;
  margin: auto;
  padding: 30px;
}

.h2-head {
  font-family: forma-djr-deck, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 5px;
  color: #1A1A1A;
  line-height:1.2em;
  font-size:50px;
  padding: 70px 0px 5px 0px;
  text-transform: uppercase;
}

@media (max-width: 1200px) {
.h2-head {
  font-family: forma-djr-deck, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 5px;
  color: #1A1A1A;
  line-height:1.2em;
  font-size:32px;
  padding: 70px 0px 5px 0px;
  text-transform: uppercase;
  font-display: optional;
}
}
.h2-subhead {
  font-family: forma-djr-deck, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 2px;
  color: #999;
  line-height:1.2em;
  font-size:20px;
  padding: 5px 0px 70px 0px;
}
@media (max-width: 1200px) {
.h2-subhead {
  font-family: forma-djr-deck, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
  color: #999;
  line-height:1.2em;
  font-size:16px;
  padding: 5px 0px 70px 0px;
}
}

.intro-text {
  font-family: din-2014, sans-serif !important;
  font-weight: 200 !important;
  font-style: normal !important;
  color: black !important;
  font-size:24px !important;
  line-height: 1.6em !important;
}
@media (max-width: 1200px) {
.intro-text {
  font-family: din-2014, sans-serif !important;
  font-weight: 200 !important;
  font-style: normal !important;
  color: black !important;
  font: size 20px !important;
  line-height: 1.4em !important;
}
}

.or-divider-thin {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 8px;
margin: 40px 0px 40px 0px;
}
.or-divider-thin::before{
content: '';
height: 1px;
background: black;
flex: 1;
margin: 0 .25em 0 0;
}
.or-divider-thin::after{
content: '';
height: 1px;
background: black;
flex: 1;
margin: 0 0 0 .25em;
}

.form-label {
  font-family: din-2014, sans-serif !important;
  font-weight: 200 !important;
  font-style: normal !important;
  color: black !important;
  font: size 16px !important;
  float: left;
}

.btn-success {
  background-color: var(--main-color);
}

.form-button {
  margin-top: 15px;
  float: left;
}