:root {
  --gap: 6vw;
  --brand-width: 20vw;
  --menu-height: 9em;
  --border-radius: 1em;
}

@media (min-width: 576px) {
  :root {
    /*--gap: 6vw;*/
  }
}

@media (min-width: 768px) {
  :root {
    --gap: 4vw;
  }
}

@media (min-width: 992px) {
  :root {
    /*--gap: 4vw;*/
  }
}

@media (min-width: 1200px) {
  :root {
    /*--gap: 4vw;*/
  }
}

@media (min-width: 1400px) {
  :root {
    --gap: 2vw;
    --brand-width: 12.5vw;
    --menu-height: 11em;
  }
}

html {
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  text-align: center;
  padding-bottom: var(--gap);
}

p > img {
  max-width: 100%;
}
p > a > img {
  max-width: 100%;
}
section {
  margin-top: 0.1em;
	text-align: center;
}

#mainMenu {
  width: 100%;
  --bs-scroll-height: 100px;
}

#brandTriangle {
    width: var(--brand-width);
}

#mainMenuContainer {
  height: var(--menu-height);
  padding-left: var(--gap);
  padding-right: var(--gap);
  position: sticky;
  top: 0;
  z-index: 1030;
}
  #brandTriangle {
    margin-right: var(--gap);
  }

#mainMenuContainer,
#mainMenuContainer > div {
  display: flex;
  align-items: flex-end;
}

#mainMenuNavbar > ul > li > a {
  margin-left: calc(var(--gap)/2);
}
#mainMenuNavbar > ul > li:first-child > a {
  margin-left: 0;
}

.cta {
  margin-bottom: var(--gap);
  text-align: center;
}
  .cta > div {
    padding-top: var(--gap);
  }
  p {
    padding-bottom: var(--gap);
  }

#services-row {
  padding-top: var(--gap);
  padding-bottom: var(--gap);
}
  #services-row > .col {
    margin-top: calc(var(--gap)*-1 - 1em);
    padding-bottom: calc(2*var(--gap));
  }

#backgroundgroup-bottom > * {
  margin-top: var(--gap);
  padding: var(--gap);
}

#copyright {
  margin-top: var(--gap);
}

#backgroundgroup-bottom > form.row {
  margin-left: 0;
  margin-right: 0;
}


/*footer > div > .row > .col > span {
  position: absolute;
  bottom: var(--gap);
  line-height: 1;
  visibility: visible;
}*/





@media only screen and (max-width: 768px) {
  #first-line {
    margin-top: var(--gap);
    padding: 0;
    --bs-gutter-x: 0;
  }
  #first-line > div {
    margin-bottom: var(--gap);
    padding: var(--gap);
    min-height: 26em;
    height: 30vh;
  }

  #slogan {
    z-index: 1032;
  }

  #first-line-left {
    position: relative;
    z-index: 1033;
  }
  #first-line-right {
    position: relative;
    z-index: 1030;
  }


  .footerMenu {
    padding-top: var(--gap);
    text-align: center;
  }
  .footerMenu > li {
    margin: auto;
  }
  .footerMenu > li > a {
    padding: var(--gap);
    text-align: center;
  }
  #backgroundgroup-top::after,
  #backgroundgroup-bottom::after {
    background-size: cover;
  }
  footer > div > .row > .col {
    text-align: center;
  }
}

@media only screen and (max-width: 500px) {
  #mainMenuContainer {
    height: auto;
  }

  #mainMenuNavbar .mod-menu {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  #mainMenuNavbar .nav-item {
    width: 100%;
    text-align: center;
  }
  .footerMenu > li > a {
    padding: var(--gap) 0.1em;
    text-align: center;
  }
}

@media only screen and (min-width: 768px) {
  #first-line {
    padding: 0;
    --bs-gutter-x: 0;
    column-gap: var(--gap);
    margin-top: var(--gap);
    margin-bottom: var(--gap);
  }
  #first-line > div {
    flex: 0 0 calc(50% - var(--gap)/2);
    width: calc(50% - var(--gap)/2);
    max-width: calc(50% - var(--gap)/2);
    padding: var(--gap);
    min-height: 26em;
    height: 30vh;
  }
  .footerMenu {
    float: right;
    display: block;
    position: absolute;
    bottom: var(--gap);
    right: var(--gap);
    font-size: var(--font-size-small);
  }
  .footerMenu > li {
    list-style-type: none;
  }
  .footerMenu > li > a {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    padding-left: 0em;
    float: right;
  }
  footer > div > .row > .col > img {
    margin-right: var(--gap);
  }
}

    /*
  .footer-logo {
  	text-align: center;
  }
    .footer-logo > a > img {
      max-width: 100%;
      max-height: 100%;
    }


#navbar-bottom-logo {
  position: relative;
  text-align: center;
  margin-top: -2.5em;
  height: 5em;
  z-index: 10000;
}


!* small Smartphones *!
@media only screen and (max-width: 575px) {
  body {
    !* margin-top: 10em; *!
    font-size: 1em;
  }
  section {
    padding-top: 2.5em;
  }
  a.dropdown-item {
    font-size: 0.75em;
  }
  #mainLogo {
    max-width: 90%;
  }
  .mainMenuNavbar {
    !* margin: 0.625em; *!
    !* margin: 0.625em 0 0.625em 0; *!
    !* border: 0.15em solid; *!
    border-top:     0.15em solid;
    border-bottom:  0.15em solid;
  }
  #mainMenu {
    !*width: 50%;*!
    display: inherit;
    !*margin-top: -4em;*!
    !*margin-left: 6em;*!
  }
    #mainMenu > li {
      border-bottom: 0.05em solid;
    }

  .sticky-top.mainMenuNavbar {
    top:0.35em;
  }
  .milkyglass {
    height: 0.35em;
  }
  #brandTriangle > img {
    width: 4em;
  }
    ul.nav > li {
      padding: 0.5em 0em 0.5em 0em;
    }
    ul.nav > li:first-child {
      !*padding: 2em 0em 0.5em 0em;*!
    }
    ul.nav > li:last-child {
      !*padding: 0.5em 0em 1em 0em;*!
    }
  .main_container {
    padding: 1em 1.5em 2em 1.5em;
  }
  figure {
    max-width: 100%;
  }
    figure.pull-right {
      margin: 1rem 1rem 1rem 1rem;
      float: right;
    }
    figure.pull-left {
      margin: 1rem 1rem 1rem 1rem;
      float: left;
    }
      figure > a > img,
      figure > img {
        max-width: 100%;
      }
  .footer-logo {
    margin-top: 1em;
  }
  #footerMenu {
    display: block;
    text-align: center;
    margin-bottom: 0.5em;
  }
  #footerMenu > li {}
  #footerMenu > li > a {
    float: none;
  }
}
!* Smartphones *!
@media only screen and (min-width: 576px) and (max-width: 768px) {
  body {
    !* margin-top: 10em; *!
    font-size: 1em;
  }
  section {
    padding-top: 2.5em;
  }
  a.dropdown-item {
    font-size: 0.75em;
  }
  #mainLogo {
    max-width: 90%;
  }
  .mainMenuNavbar {
    !* margin: 0.625em; *!
    !* margin: 0.625em 0 0.625em 0; *!
    !* border: 0.15em solid; *!
    border-top:     0.15em solid;
    border-bottom:  0.15em solid;
  }
  #mainMenu {
    !*width: 50%;*!
    display: inherit;
    !*margin-top: -4em;*!
    !*margin-left: 6em;*!
  }
    #mainMenu > li {
      border-bottom: 0.05em solid;
    }

  .sticky-top.mainMenuNavbar {
    top:0.35em;
  }
  .milkyglass {
    height: 2em;
  }
  #brandTriangle > img {
    width: 4em;
  }
    ul.nav > li {
      padding: 0.5em 0em 0.5em 0em;
    }
    ul.nav > li:first-child {
      !*padding: 2em 0em 0.5em 0em;*!
    }
    ul.nav > li:last-child {
      !*padding: 0.5em 0em 1em 0em;*!
    }
  .main_container {
    padding: 1em 1.5em 2em 1.5em;
  }
  figure {
    max-width: 100%;
  }
    figure.pull-right {
      margin: 1rem 1rem 1rem 1rem;
      float: right;
    }
    figure.pull-left {
      margin: 1rem 1rem 1rem 1rem;
      float: left;
    }
      figure > a > img,
      figure > img {
        max-width: 100%;
      }
  .footer-logo {
    margin-top: 1em;
  }
  #footerMenu {
    display: block;
    text-align: center;
    margin-bottom: 0.5em;
  }
    #footerMenu > li {}
      #footerMenu > li > a {
        float: none;
      }
}
!* everything without toggled menu *!
@media only screen and (min-width: 768px) {
  #brandTriangle > img {
    position: absolute;
    top: 0.75em;
  }
  .accordion-button {
    font-size: inherit;
  }

  .accordion-body > img {
    width: 40vw !important;
  }
  .accordion-left {
    float: left;
  }
  .accordion-right {
    float: right;
  }
}
!* Tablets *!
@media only screen and (min-width: 768px) and (max-width: 1919px) {
  body {
    !* margin-top: 8em; *!
    font-size: 1.25em;
  }
  a.dropdown-item {
    font-size: 1em;
  }
  #mainLogo {
    max-width: 90%;
  }

  .mainMenuNavbar {
    !* margin: 0.15em; *!
    !* margin: 0.15em 0 0.15em 0; *!
    !* border: 0.15em solid; *!
    border-top:     0.15em solid;
    border-bottom:  0.15em solid;
  }

  .sticky-top.mainMenuNavbar {
    top:0.35em;
  }
  .milkyglass {
    height: 2.5em;
    padding: 0.5em;
  }
  #brandTriangle > img {
    width: 4.5em;
  }

    ul.nav > li {
      padding: 0em .5em 0em .5em;
    }
    ul.nav > li:first-child {
      padding: 0em .5em 0em 0em;
    }
    ul.nav > li:last-child {
      padding: 0em 0em 0em .5em;
    }
  .main_container {
    padding: 1em 1.5em 2em 1.5em;
  }
  figure {
    max-width: 33%;
  }
    figure.pull-right {
      margin: 1rem 0 1rem 1rem;
      float: right;
    }
    figure.pull-left {
      margin: 1rem 1rem 1rem 0;
      float: left;
    }
      figure > a > img,
      figure > img {
        max-width: 100%;
      }
}
!* Full HD *!
@media only screen and (min-width: 1920px) and (max-width: 3839px){
  body {
    font-size: 1.25em;
  }
  a.dropdown-item {
    font-size: 1em;
  }
  #mainLogo {
    max-width: 70%;
  }
  .mainMenuNavbar {
    !* margin: 0.5em; *!
    !* margin: 0.5em 0 0.5em 0; *!
    !* border: 0.15em solid; *!
    border-top:     0.15em solid;
    border-bottom:  0.15em solid;
  }

  .sticky-top.mainMenuNavbar {
    top:0.35em;
  }
  .milkyglass {
    height: 2.5em;
    padding: 0.5em;
  }
  #brandTriangle > img {
    width: 5em;
  }

    ul.nav > li {
      !* float: left; *!
      padding: 0em 2em 0em 2em;
    }
    ul.nav > li:first-child {
      padding: 0em .5em 0em 0em;
    }
    ul.nav > li:last-child {
      padding: 0em 0em 0em .5em;
    }

  .main_container {
    padding: 1em 3em 2em 3em;
  }
  figure {
    max-width: 33%;
  }
    figure.pull-right {
      margin: 1rem 0 1rem 1rem;
      float: right;
    }
    figure.pull-left {
      margin: 1rem 1rem 1rem 0;
      float: left;
    }
      figure > a > img,
      figure > img {
        max-width: 100%;
      }
}
!* 4K *!
@media only screen and (min-width: 3840px) {
  body {
    font-size: 2em;
  }
  a.dropdown-item {
    font-size: 1.5em;
  }
  #mainLogo {
    max-width: 65%;
  }
  .mainMenuNavbar {
    !* margin: 0.5em; *!
    !* margin: 0.5em 0 0.5em 0; *!
    !* border: 0.15em solid; *!
    border-top:     0.15em solid;
    border-bottom:  0.15em solid;
  }

  .sticky-top.mainMenuNavbar {
    top:0.35em;
  }
  .milkyglass {
    height: 2em;
  }
  #brandTriangle > img {
    width: 8em;
  }
    ul.nav > li {
      !* float: left; *!
      padding: 0em 3em 0em 3em;
    }
    ul.nav > li:first-child {
      padding: 0em .5em 0em 0em;
    }
    ul.nav > li:last-child {
      padding: 0em 0em 0em .5em;
    }

  .main_container {
    padding: 1em 12em 2em 12em;
  }
  figure {
    max-width: 33%;
  }
    figure.pull-right {
      margin: 1rem 0 1rem 1rem;
      float: right;
    }
    figure.pull-left {
      margin: 1rem 1rem 1rem 0;
      float: left;
    }
      figure > a > img,
      figure > img {
        max-width: 100%;
      }
}
*/