:root {
  /*
    blue-gray
    #6F8BA4
    rgb(111, 139, 164)

    blue
    #223a66
    rgb(34, 58, 102)

    blue-dark
    #152440
    rgb(21, 36, 64)

    red
    #e12454
    rgb(225, 36, 84)

    very light blue
    #13B1CD
    rgb(19, 177, 205)

    blue-semi-dark
    #002A6A
    rgb(0, 42, 106)

    blue-white
    #F4F9FC
    rgb(244, 249 ,252)
  */
  --primary: rgb(225, 36, 84);
  --secondary: rgb(0, 42, 106);
  --tertiary: rgb(0, 0, 0);
  --quaternary: rgb(0, 0, 0);
  --quinary: rgb(0, 0, 0);
  --senary: rgb(0, 0, 0);

  --secondary-50: rgb(224, 229, 237);
  --secondary-100: rgb(179, 191, 210);
  --secondary-200: rgb(128, 149, 181);
  --secondary-300: rgb(77, 106, 151);
  --secondary-400: rgb(38, 74, 128);
  --secondary-600: rgb(0, 37, 98);
  --secondary-800: rgb(0, 25, 77);

  --primary-dark: rgb(44, 52, 77);
  --secondary-dark: rgb(0, 76, 43);
  --tertiary-dark: rgb(0, 0, 0);
  --quaternary-dark: rgb(0, 0, 0);
  --quinary-dark: rgb(0, 0, 0);
  --senary-dark: rgb(0, 0, 0);

  --primary-light: rgb(0, 0, 0);
  --secondary-light: rgb(0, 0, 0);
  --tertiary-light: rgb(0, 0, 0);
  --quaternary-light: rgb(0, 0, 0);
  --quinary-light: rgb(0, 0, 0);
  --senary-light: rgb(0, 0, 0);

  --background: rgb(255, 255, 255);

  --black: rgb(0, 0, 0);
  --white: rgb(255, 255, 255);

  --gray-192: rgb(192, 192, 192);

  --black-25: rgba(0, 0, 0, 0.25);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-75: rgba(0, 0, 0, 0.75);

  --default-transition: all 0.1s linear;
}

footer {
  background-color: var(--secondary-800);
  color: var(--secondary-50);
  padding-bottom: 5vmin;
  padding-top: 2vmin;
  text-align: center;
}

html {
  font-size: 2vmin;
}

body {
  background-color: var(--background);
  font-family: 'Karla', sans-serif;
}

.hdls-brand {
  margin-right: 1vw;
  max-height: 5vmin;
}

.hdls-brand-nest {
  align-items: center;
  display: flex;
}

.hdls-btn-touch {
  background-color: var(--secondary);
  border-radius: 1rem;
  color: var(--white);
  cursor: default;
  display: inline-block;
  font-weight: 600;
  padding: 0.25rem 1rem 0.25rem 1rem;
  user-select: none;
  transition: var(--default-transition);
}

.hdls-btn-touch:hover {
  background-color: var(--secondary-400);
}

.hdls-contact-contact {
  color: var(--secondary);
  font-size: 2rem;
  margin-bottom: 10vmin;
  text-align: center;
}

.hdls-contact-meeting {
  color: var(--secondary);
  font-size: 1rem;
  margin-bottom: 10vmin;
  text-align: center;
}

.hdls-contact-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 5vmin;
  margin-top: 10vmin;
  text-align: center;
}

.hdls-hamburger {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255,255,255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.hdls-hamburger-nest:focus {
  box-shadow: none;
}

.hdls-img-rounded {
  border-radius: 1vmin;
}

.hdls-motto-btn {
  margin-bottom: 10vmin;
  margin-top: 3vmin;
}

.hdls-motto-description {
  font-size: 1rem;
  text-align: justify;
}

.hdls-motto-label {
  color: var(--gray-192);
}

.hdls-motto-nest {
  padding: 10vh 0 10vh 0;
}

.hdls-motto-value {
  font-size: 3rem;
  font-weight: 600;
}

.hdls-nav {
  background: var(--secondary-800);
  background: linear-gradient(180deg, var(--secondary-800) 0%, var(--secondary-600) 50%, var(--secondary) 100%);
  color: var(--white);
}

.hdls-nav a {
  color: var(--white);
}

.hdls-nav-link {
  color: var(--white);
  transition: var(--default-transition);
}

.hdls-nav-link:hover {
  color: var(--secondary-200);
}

.hdls-solution-description {
  background-color: var(--secondary-50);
  min-height: 22vmin;
  text-align: justify;
}

.hdls-solution-icon {
  background-color: var(--primary);
  box-shadow: 0 0 0 4vmin var(--secondary-50);
  border-radius: 50%;
  color: var(--white);
  font-size: 6vmin;
  max-height: 20vmin;
  max-width: 20vmin;
  min-height: 20vmin;
  min-width: 20vmin;
  padding: 4vmin;
}

.hdls-solution-icon-nest {
  background: var(--secondary-50);
  background: linear-gradient(180deg, var(--white) 0%, var(--white) 50%, var(--secondary-50) 50.001%, var(--secondary-50) 100%);
  padding-bottom: 5vmin;
  padding-top: 5vmin;
  text-align: center;
}

.hdls-solution-long-description-nest {
  margin-top: 10vmin;
}

.hdls-solution-long-description {
  background-color: var(--secondary-50);
  border-radius: 1vmin;
  padding: 2vmin;
  text-align: justify;
}

.hdls-solution-more {
  background-color: var(--secondary-50);
  border-radius: 0 0 1vmin 1vmin;
  padding-bottom: 2.5vmin;
  text-align: center;
}

.hdls-solution-more-btn {
  background-color: var(--secondary);
  border-radius: 1vmin;
  color: var(--white);
  cursor: default;
  display: inline-block;
  min-width: 20vmin;
  padding: 1vmin 2vmin;
  transition: var(--default-transition);
  user-select: none;
}

.hdls-solution-more-btn:hover {
  background-color: var(--primary);
}

.hdls-solution-persona {
  background-color: var(--secondary-50);
  color: var(--secondary);
  font-size: 1.5rem;
  font-weight: 600;
  min-height: 12vmin;
  padding-bottom: 2.5vmin;
  text-align: center;
}

.hdls-solution-row {
  margin-left: 0.1vmin;
  margin-right: 0.1vmin;
}

.hdls-solution-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 5vmin;
  margin-top: 10vmin;
  text-align: center;
}

.hdls-team-link {
  font-size: 2rem;
  margin-top: 2vmin;
  text-align: center;
}

.hdls-team-name {
  font-weight: 600;
  margin-top: 2vmin;
  text-align: center;
}

.hdls-team-position {
  margin-top: 1vmin;
  text-align: center;
}

.hdls-team-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 5vmin;
  margin-top: 10vmin;
  text-align: center;
}

.hdls-title {
  font-family: 'Spectral', serif;
}

.hdls-value-background {
  background: var(--secondary-50);
  background: linear-gradient(180deg, var(--white) 0%, var(--white) 10%, var(--secondary-50) 10.001%, var(--secondary-50) 95%, var(--white) 95.001%, var(--white) 90%);
}

.hdls-value-description {
  margin-bottom: 10vmin;
  margin-top: 5vmin;
  text-align: justify;
}

.hdls-value-row {
  margin-bottom: 10vmin;
  margin-top: 10vmin;
}

.hdls-value-title {
  font-size: 2rem;
  font-weight: 600;
  margin-top: 5vmin;
}

#contact {
  background-color: var(--secondary-50);
}

#team {
  background: var(--secondary-50);
  background: linear-gradient(180deg, var(--white) 0%, var(--white) 55%, var(--secondary-50) 55.001%, var(--secondary-50) 100%);
}

/** -xs- **/
@media (max-width: 576px) {


}

/** -sm- **/
@media (max-width: 768px) {

}

/** -md- **/
@media (max-width: 992px) {

  footer {
    background-color: var(--white);
    color: var(--black);
  }

  .hdls-motto-btn {
    margin-bottom: 3vmin;
    margin-top: 1vmin;
  }

  .hdls-value-background {
    background: var(--white);
  }

  #contact {
    background-color: var(--white);
  }

  #team {
    background: var(--white);
  }

}

/** -lg **/
@media (max-width: 1200px) {

}