/*---------------------------------------------------------------------------*/
/* General styling for the modal used throughout the frontend to show images */
/*---------------------------------------------------------------------------*/

/**
    General styling of the modal itself.
*/

.modal {
  text-align: center;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.7);
  display: none;
  position: fixed;
  z-index: 16;
}

/** Centers everything in the modal */
.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25rem;
}

  /** Modal content/box */
  .modal div {
    width: 53.325rem;
    height: auto;
    margin: 0 auto;
    background-color: rgb(238,238,238);
    border: 0.0625rem solid rgba(255,255,255,0.1);

    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);

    display: inline-block;
    vertical-align: middle;
    position: relative;
  }

    /** The close button */
    .modal div span {
      color: rgba(255, 255, 255);
      color: rgba(255, 255, 255, 0.8);
      position: absolute;
      top: 0;
      right: 0.75rem;
      font-size: 1.5rem;
      font-weight: bold;
    }

    .modal div span:hover,
    .modal div span:focus {
      color: #aaa;
      text-decoration: none;
      cursor: pointer;
    }

/** Add class to show the modal */
.show-modal {
  display: block!important;
}