/*//////////////////////////////////////////////////////////////////// 
//  12 - Media Queries
////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 1366px) and (orientation: landscape) {

  #mobile-site-navigation                 { display: none; }

  .page-hero {
    position: relative;
    min-height: 80vh;
    height: 100vh;
  }

  .page-hero .page-hero__container--40 {
    justify-content: center;
    display: flex;
    flex-direction: column;
    padding: 40px;
  }

  .page-hero .page-hero__infobox {
    align-self: flex-end;
    margin: -40px -40px 0 0;
    z-index: 140;
  }

    
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* max-width 1194 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media only screen and (max-width : 1194px) {

  .page-hero .page-hero__container--40 {
    width: 40%;
    padding: 40px 40px 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .page-hero .page-hero__contactbox {
    width: 350px;
    height: 350px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  .page-hero .page-hero__contactbox p {
    margin-bottom: 0;
  }

  .page-hero .page-hero__infobox {
    z-index: 140;
  }

  nav.page-hero__navigation ul .bubble-menu--item-1 {
    right: 500px;
  }

  nav.page-hero__navigation ul .bubble-menu--item-3 {
    top: 300px;
  }

  .footer {
    padding: 0 40px;
  }

}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* max-width 1033 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media only screen and (max-width : 1133px) {
  
  #mainmenu ul {
    margin: 35px 20px 0 0;
  }

  header .page-header__bar .page-header__logo {
    margin: 39px 0 0 50px;
  }

  .section--right .content__container .content__container--content {
    padding: 200px 0 200px 50px;
  }

  .section--left .content__container .content__container--content {
    padding: 200px 130px 200px 0;
  }

  .content__container.has-no-bubbles .content__container--content {
    padding: 0;
  }

  .content__container.has-no-bubbles,
  footer {
    padding: 0 50px;
  }

}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* max-width 1032 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media only screen and (max-width : 1032px) {

      /* MENU ////////////////////////////////////////////////////////////*/

  #mainmenu { 
    display: none; 
  }
  
  .page__container__bubble-menu { 
    display: none; 
  }

  .mobile-menu { 
    display: block;
    flex-grow: 1;
  }

  .icon-container { 
    width: 30px; 
    cursor: pointer; 
    height: 30px; 
    position: absolute; 
    top: 26px; 
    right: 24px; 
    z-index: 9050; 
  }

  .mobile-menu-wrapper { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background-color: transparent; 
    position: relative; 
    top: 0px; 
  }
  
  .icon-container { 
    width: 25px;
    height: 22px;
  }
  
  .icon-container button {
    background: transparent;
    border: none;
  }

  .icon-container button span {
    left: 0;
  }
  
  .menu-btn { 
    position: relative; 
    width: 25px; 
    height: 22px; 
    cursor: pointer; 
  }
  
  .btn-line { 
    display: block; 
    position: absolute; 
    height: 3px; 
    width: 25px; 
    background-color: #ffffff; 
    border-radius: 2px; 
    transition: all 0.3s ease-in-out; 
  }

  .top__line { top: 0;}
  .mid__line { top: 9px; width: 18px; }
  .btm__line { bottom: 0; }

  .menu-btn.active .btn-line { background-color: #ffffff; }
  .menu-btn.change-color .btn-line { background-color: #2c2c2c; }
  .menu-btn.active .top__line { transform: rotate(45deg); top: 50%; left: 50%; transform-origin: center; transform: translate(-50%, -50%) rotate(45deg); width: 25px; }
  .menu-btn.active .mid__line { opacity: 0; }
  .menu-btn.active .btm__line { transform: rotate(-45deg); bottom: 50%; left: 50%; transform-origin: center; transform: translate(-50%, 50%) rotate(-45deg); width: 25px; }

  .menu-btn:hover .btn-line { width: 28px; }
  .menu-btn:hover .mid__line { width: 20px; }

  .mobile--menu { position: fixed; display: flex; font-size: 7vw; background: var(--theme-color); top: 0; left: 0; width: 100%; height: 0%; opacity: 0; visibility: hidden; -webkit-transition: opacity .35s, visibility .35s, height .35s; transition: opacity .35s, visibility .35s, height .35s; overflow: hidden; z-index: 9000!important; }
  .mobile--menu nav { position: absolute; top: 3%; right: 23.7%; height: 60%; font-size: 8vw; font-weight: 300; }

  .mobile--menu ul { font-family: 'bariol_bold', sans-serif; list-style: none; padding: 0; margin: 0 auto; text-align: center; position: relative; }
  .mobile--menu ul li { display: block; margin: 30px 0; position: relative; }
  .mobile--menu ul li a { line-height: 100%; position: relative; color: var(--menu-text-col); text-decoration: none; transition: opacity .2s cubic-bezier(.47,0,.75,.72); }
  .mobile--menu ul li a:hover { text-decoration: underline; text-underline-offset: 6px; }

  .mobile--menu ul.social-media { height: 0; display: flex; }
  .mobile--menu ul.social-media li { margin-right: 2rem; }
  .mobile--menu ul.social-media li:last-child { margin-right: 0; }

  .mobile--menu.open { opacity: 1; visibility: visible; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }

  .mobile--menu .menu-item-has-children.sub-menu-open > .sub-menu { display: block; }

  .mobile--menu ul.has-hover-within a:hover { opacity: 1; }
  .mobile--menu ul.has-hover-within a { opacity: .2; }

  .mobile--menu ul > li.current_page_item > a,
  .mobile--menu ul > li.current-menu-parent > a,
  .mobile--menu ul > li.current-menu-parent > ul.sub-menu > li.current_page_item > a { text-decoration: underline; text-underline-offset: 10px; }

  /* Reset underline for other items */
  .mobile--menu ul li a,
  .mobile--menu ul li ul.sub-menu li a { text-decoration: none; }

  .mobile--menu .menu-item-has-children > a::after { content: '\e804'; font-family: 'heimat'; font-size: 0.5em; display: inline-block; margin-left: 0.5em; transition: transform 0.3s ease; }
  .mobile--menu .menu-item-has-children > a.active::after { transform: rotate(180deg); }

  .mobile--menu .sub-menu { display: none; padding: 0 30px;  }

  .sub-menu { overflow: hidden; transition: max-height 0.3s ease-out; background-color: rgba(0, 0, 0, 0.05); padding: 0; margin: 0; }

  .sub-menu .menu-link-item { display: block; padding: 10px; font-size: 0.8em; }

  .tooltip-text { z-index: 10000; }

  @keyframes top-1 {
    0% { top: 0; transform: rotate(0); }
    50% { top: 12px; transform: rotate(0); }
    100% { top: 12px; transform: rotate(45deg); }
  }

  @keyframes top-2 {
    0% { top: 12px; transform: rotate(45deg); }
    50% { top: 12px; transform: rotate(0deg); }
    100% { top: 0; transform: rotate(0deg); }
  }

  @keyframes bottom-1 {
    0% { bottom: 0; transform: rotate(0); }
    50% { bottom: 6px; transform: rotate(0); }
    100% { bottom: 6px; transform: rotate(135deg); }
  }

  @keyframes bottom-2 {
    0% { bottom: 6px; transform: rotate(135deg); }
    50% { bottom: 6px; transform: rotate(0); }
    100% { bottom: 0; transform: rotate(0); }
  }

  @keyframes scaled {
    50% { transform: scale(0); }
    100% { transform: scale(0); }
  }

  @keyframes scaled-2 {
    0% { transform: scale(0); }
    50% { transform: scale(0); }
    100% { transform: scale(1); }
  }

  header .page-header__bar .page-header__logo {
    width: 250px;
    margin: 28px 0 0 24px;
  }

  /* PAGE CONTENT /////////////////////////////////////////////////////*/

  section {
    width: 100%!important;
  }

  section .content__container {
    flex-direction: column!important;
  }

  section .content__container--content {
    width: 100%!important;
    order: 1;
  }

  .section--left .content__container .content__container--content,
  .section--right .content__container .content__container--content {
    padding: 0 20px;
  }

  .section--right .content__container {
    margin: 60px 0;
  }

  .section--right .content__container .content__container--bubbles {
    width: 100%!important;
    left: 0;
  }

  .content__container.has-bubbles .content__container--content {
  position: relative;
  }

  .content__container.has-no-bubbles .content__container--content {
    padding: 0 20px;
  }

  .content__container--bubbles-wrapper {
    width: 100%!important;
    height: 400px;
    position: relative;
    order: -1;
  }

  section .content__container--bubbles {
    width: 100%!important;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
  }

  section .content__container--image-bubbles .image-bubble--item img {
    width: 100px;
    height: 100px;
  }

  .content__container--image-bubbles {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    height: 400px;
    gap: 20px;
    position: absolute;
    width: 100%;
    margin: 0 auto;
    left: 0;
    top: 0;
    z-index: 20;
  }

  .image-bubble--item {
    position: relative!important;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
  }

  .image-bubble--item img {
    width: 100%;
    height: auto;
    border-radius: 50%;
  }

  .image-bubble--item-1 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  .image-bubble--item-2 {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
  }

  .image-bubble--item-3 {
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
    align-self: start;
  }

  .page-footer__container {
    padding: 0 40px;
  }

  footer .image-block__svg svg {
    width: 100%!important;
  }

}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* max-width 736 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media only screen and (max-width : 820px) {

  .page-hero {
    height: 100vh;
  }

  .page-hero__container--40,
  .page-hero__container--60 {
    width: 100%!important;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .page-hero .page-hero__contactbox {
    align-self: flex-start;
    margin: 0 0 -90px 100px;
  }

  .page-hero .page-hero__infobox {
    align-self: flex-end;
    margin: 0 80px 0 0;
  }

  .page-hero .content__container--bubbles {
    width: 100%;
  }

}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* max-width 736 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media only screen and (max-width : 736px) {

    .page-hero {
    position: relative;
    min-height: 80vh;
    height: 100vh;
  }

  .page-hero__container--40,
  .page-hero__container--60 {
    width: 100%!important;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .page-hero__container--40 {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
  }

  .page-hero__container--60 {
    z-index: 1;
  }

  .page-hero .page-hero__contactbox,
  .page-hero .page-hero__infobox {
    margin: 0 0 0 0;
  }

  .page-hero .page-hero__contactbox {
    align-self: unset;
    width: 350px;
    height: 350px;
  }

  .page-hero__contactbox p {
    margin-bottom: 0;
  }

  .content__container--bubbles {
    width: 100%;
    left: 0;
    top: 0;
  }

}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* max-width 480 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media only screen and (max-width: 480px) {

  body.logged-in.admin-bar header { top: 46px; }

  /* HEADER //////////////////////////////////////////////////////////*/

  h1 { font-size: clamp(calc(var(--h1) * 0.5), 5vw + 1rem, var(--h1)); }
  h2 { font-size: clamp(calc(var(--h2) * 0.5), 4vw + 0.9rem, var(--h2)); }
  h3 { font-size: clamp(calc(var(--h3) * 0.5), 3vw + 0.8rem, var(--h3)); }
  h4 { font-size: clamp(calc(var(--h4) * 0.5), 2.5vw + 0.7rem, var(--h4)); }
  h5 { font-size: clamp(calc(var(--h5) * 0.5), 2vw + 0.6rem, var(--h5)); }
  h6 { font-size: clamp(calc(var(--h6) * 0.5), 1.5vw + 0.5rem, var(--h6)); }

  h1 { word-break: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }

  .page-hero .page-hero__infobox {
    align-self: unset;
    margin: -30px 0 0 0;
    width: 320px;
    height: 320px;
  }

      /* PAGE CONTENT /////////////////////////////////////////////////////*/

  section {
    width: 100%!important;
  }

  section .content__container {
    flex-direction: column!important;
  }

  section .content__container--content {
    width: 100%!important;
    order: 1;
  }

  .section--left .content__container .content__container--content,
  .section--right .content__container .content__container--content {
    padding: 0 20px;
  }

  .section--right .content__container {
    margin: 60px 0;
  }

  .section--right .content__container .content__container--bubbles {
    width: 100%!important;
    left: 0;
  }

  .content__container.has-bubbles .content__container--content {
  position: relative;
  }

  .content__container.has-no-bubbles .content__container--content {
    padding: 0 20px;
  }

  .content__container--bubbles-wrapper {
    width: 100%!important;
    height: 400px;
    position: relative;
    order: -1;
  }

  section .content__container--bubbles {
    width: 100%!important;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
  }

  .content__container.has-no-bubbles, 
  footer {
    padding: unset;
  }

  section .content__container--image-bubbles .image-bubble--item img {
    width: 100px;
    height: 100px;
  }

  .content__container--image-bubbles {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    height: 400px;
    gap: 20px;
    position: absolute;
    width: 100%;
    margin: 0 auto;
    left: 0;
    top: 0;
    z-index: 20;
  }

  .image-bubble--item {
    position: relative!important;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    left: unset!important;
    top: unset!important;
    right: unset!important;
    bottom: unset!important;
  }

  .image-bubble--item img {
    width: 100%;
    height: auto;
    border-radius: 50%;
  }

  .image-bubble--item-1 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  .image-bubble--item-2 {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
  }

  .image-bubble--item-3 {
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
    align-self: start;
  }

  .page-footer__container {
    padding: 0 40px;
  }

  footer .image-block__svg svg {
    width: 100%!important;
  }

  /* Modal //////////////////////////////////////////////////////////*/

  .md-modal {
    min-width: 370px!important;
  }

  .md-modal.rounded_box .md-content {
    width: 370px;
    height: 370px;
  }

  .md-content p {
    margin-bottom: 0;
  }


  /* FOOTER //////////////////////////////////////////////////////////*/

    footer .is-vertically-aligned-center {
        display: flex;
        justify-content: center;
    }

}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* max-width 380 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media only screen and (max-width: 380px) { 

  .mobile--menu ul li {
    margin: 20px 0;
  }

  .page-hero {
    height: 110vh;
  }

}