body.view-overlay footer.main,
  body.view-overlay header.main {
    display: none;
  }
  
  body.view-overlay .module-contact {
    display: none;
  }
  
  .module-contact .intro-copy .wysiwyg {
    margin-bottom: 2.4em;
  }
  
  .module-contact .form-wrap {
    display: flex;
    flex-flow: column nowrap;
    gap: calc(80 * var(--px)) 0;
  }
  
  .module-contact .form-row-1 {
    display: flex;
    flex-flow: row nowrap;
    gap: 0 var(--page-padding-left);
    width: 100%;
  }
  
  .module-contact .form-row-1 .form-list--data {
    width: calc(402 * var(--px));
    flex-shrink: 0;
  }
  
  .module-contact .form-row-1 .form-list--message {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
  }
  
  .module-contact .form-row-1 .form-list--message li.textarea {
    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
  }
  
  .module-contact .form-row-1 .form-list--message li.textarea > div,
  .module-contact .form-row-1 .form-list--message li.textarea > div > span {
    flex-grow: 1;
    display: flex;
  }
  
  .module-contact .form-row-1 .form-list--message li.textarea textarea {
    flex-grow: 1;
  }
  
  .module-contact .form-row-2 .form-list--submit {
    display: flex;
    flex-flow: row nowrap;
    gap: 0 var(--page-padding-left);
  }
  
  
  
  
  
  
  
  #contact-overlay {
    position: fixed;
    inset: 0;
    display: block;
    z-index: 1000;
    color: var(--base-color-white);
    visibility: hidden;
    transition: 750ms var(--ttf-7);
    transition-property: visibility;
    overflow: hidden;
  }
  
  #contact-overlay.shown {
    visibility: visible;
  }
  
  #contact-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--base-color-black);
    z-index: 1;
    opacity: 0;
    transition: 750ms var(--ttf-7);
    transition-property: opacity;
  }
  
  #contact-overlay.shown::after {
    opacity: 0.8;
  }
  
  #contact-overlay > .inner {
    position: absolute;
    z-index: 2;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    background: var(--base-color-green);
    --padding-right: var(--page-padding-right);
    transition: 750ms var(--ttf-7);
    transition-property: opacity, transform;
    transition-delay: 0ms, 750ms;
    opacity: 0;
    transform: translateX(10vw);
    width: calc(1320 * var(--px));
  }
  
  #contact-overlay.shown > .inner {
    opacity: 1;
    transform: none;
    transition-delay: 0ms, 0ms;
  }
  
  #contact-overlay > .inner > .wrap {
    padding-inline: var(--page-padding-left) calc(138 * var(--px));
    padding-block: max(92px, calc(100 * var(--px))) max(35px, var(--padding-right));
    min-height: 100%;
    box-sizing: border-box;
    transition: 750ms var(--ttf-7) 50ms;
    transition-property: opacity, transform;
    transition-delay: 0ms, 750ms;
    opacity: 0;
    transform: translateX(10vw);
  }
  
  #contact-overlay.shown > .inner > .wrap {
    opacity: 1;
    transform: none;
    transition-delay: 0ms, 0ms;
  }
  
  #contact-overlay .overlay-header {
    position: fixed;
    top: var(--padding-right);
    right: var(--padding-right);
    z-index: 20;
  }
  







  @media (max-width: 900px) {
    
    .module-contact .form-row-1 {
      flex-flow: column nowrap;
      gap: var(--page-padding-left);
    }
    
    .module-contact .form-row-1 .form-list--data {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      width: 100%;
      gap: var(--page-padding-left);
    }
    
  }
  
  





  @media (max-width: 700px) {
    
    .module-contact .form-row-1 .form-list--data {
      display: flex;
      flex-flow: column nowrap;
      gap: var(--page-padding-left);
    }
    
    .module-contact .form-row-2 .form-list--submit {
      flex-flow: column nowrap;
      gap: var(--page-padding-left);
    }
    
  }
    






  @media (max-width: 500px) {
    
    #contact-overlay > .inner {
      width: 100%;
    }
    
    #contact-overlay > .inner > .wrap {
      padding-inline: 15px;
    }
    
    .module-contact .form-row-2 .form-list--submit {
      gap: 25px;
    }
    
  }