/*! Modals v10.1.2 | (c) 2017 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/modals */
button.custom-button,
button.custom-button:hover {
  margin: 0 auto;
  cursor: pointer;
  appearance: none;
  background: #000;
  border: none;
  color: #ffff04;
}

.modal {
  background-color: #000;
  border: .0725em solid #000;
  border-radius: .0725em;
  box-shadow: 0 .25em .5em rgba(0, 0, 0, .3);
  display: none;
  max-width: 100%;
  padding: .5em 1em;
  visibility: hidden;
  z-index: 10
}

@media (min-width:40em) {
  .modal {
    max-width: 98%
  }
}

.modal.active {
  display: block;
  height: 100%;
  left: 0;
  max-height: 100%;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;
  visibility: visible;
  -webkit-overflow-scrolling: touch
}

@media (min-width:30em) {
  .modal.active {
    height: auto;
    left: 3%;
    margin-left: auto;
    margin-right: auto;
    right: 3%;
    top: 10px
  }
}

@media (min-width:40em) {
  .modal.active {
    left: 8%;
    right: 8%
  }

  .modal.active.modal-medium {
    width: 35em
  }

  .modal.active.modal-small {
    width: 25em
  }
}

.modal:focus {
  outline: none
}

.modal-bg {
  background-color: #272727;
  bottom: 0;
  position: fixed;
  left: 0;
  opacity: .9;
  right: 0;
  top: 0;
  z-index: 9
}

.close {
  color: gray;
  cursor: pointer;
  float: right;
  font-weight: 700;
  font-size: 1.5em;
  text-decoration: none
}

.close:hover {
  color: #5a5a5a;
  cursor: pointer
}

@media (max-width: 600px) {
  .modal.active video {
    max-width: 100% !important;
  }
  .modal.active button {
    font-size: 12px;
}