/**
 * contact-modal.css
 * 
 * Index
 * 
 * - Positioning wrappers: ensure the modal stays within the inner-wrapper of the site
 * - Button positioning and styling: determines where the question mark sits and its size
 * - Modal positioning and styling
 * - Modal content styling
 * 
 */

/*-----------------------------------------------------------------------
# Positioning wrappers
------------------------------------------------------------------------*/

.sticky-contact {
  position: relative;
  margin: 0 auto;
  max-width: 1280px;
}

.sticky-wrapper {
  position: absolute;
  right: 0;
  top: 0;
  width:78px;
}

/*-----------------------------------------------------------------------
# Button positioning and styling
------------------------------------------------------------------------*/

.sticky-icon {
  position: fixed;
  width: 78px;
  bottom: 40px;
  z-index: 9999;
}

/*-----------------------------------------------------------------------
# Modal positioning and styling
------------------------------------------------------------------------*/

.sticky-contact .menu-container {
  position: fixed;
}

.sticky-expanded-content {
  width: 388px;
  height: 152px;
  bottom: 100px;
  margin-left: -360px;
  text-align: center;
}

/*-----------------------------------------------------------------------
# Modal content styling
------------------------------------------------------------------------*/

.sticky-contact p { 
  margin: 32px 0 16px 0;
  font: 1.5rem "HelveticaNeue-Thin", "Helvetica Neue Thin", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}