/*
 * Return the rem of a pixel's value
 *
 * Sample: pxToRem(50)
 * Result: 3.125rem
 */
/*
 * Return the percent ratio from width and height
 *
 * Sample: ratio(16, 9)
 * Result: 56.25%
 */
/*
 * Return the rem of a pixel's value
 *
 * Sample: pxToRem(50)
 * Result: 3.125rem
 */
/*
 * Return the percent ratio from width and height
 *
 * Sample: ratio(16, 9)
 * Result: 56.25%
 */
.popin-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1002; }
  .popin-overlay .overlay {
    z-index: 0; }
  .popin-overlay .popin {
    background-color: white;
    position: relative; }
    @media screen and (min-width: 50rem) {
      .popin-overlay .popin {
        border-radius: 0.3125rem; } }
    .popin-overlay .popin.fullscreen {
      bottom: 0;
      left: 0;
      position: fixed;
      right: 0;
      top: 0;
      max-height: 100%;
      overflow-y: auto; }
    .popin-overlay .popin.fitcontent {
      position: relative;
      display: inline-block;
      max-height: 100%;
      overflow-y: auto;
      box-sizing: border-box; }
      @media screen and (min-width: 50rem) {
        .popin-overlay .popin.fitcontent {
          max-height: 90%; } }
    .popin-overlay .popin > div {
      height: 100%; }
    .popin-overlay .popin--with-margins {
      margin: 0 1.25rem;
      border-radius: 0.3125rem; }
    .popin-overlay .popin--default {
      padding: 2.5rem; }
      @media screen and (max-width: 49.9375rem) {
        .popin-overlay .popin--default {
          padding: 2rem 1rem; } }
    .popin-overlay .popin .close {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
      cursor: pointer;
      padding: 2.5rem; }
      .popin-overlay .popin .close svg {
        width: 1.25rem;
        height: 1.25rem; }
      @media screen and (max-width: 49.9375rem) {
        .popin-overlay .popin .close {
          padding: 2rem 1rem; } }
    .popin-overlay .popin--narrow {
      padding: 2rem; }
      .popin-overlay .popin--narrow .close {
        padding: 1rem; }
        @media screen and (max-width: 49.9375rem) {
          .popin-overlay .popin--narrow .close {
            padding: 0.5rem; } }
    .popin-overlay .popin--with-overflow {
      padding: 2.5rem;
      overflow: visible; }
      @media screen and (max-width: 49.9375rem) {
        .popin-overlay .popin--with-overflow {
          padding: 2rem 1rem; } }
    .popin-overlay .popin.fitcontent.popin--with-overflow {
      overflow: visible; }