/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

This stylesheet can be used for any page that uses JavaScript modals.

Use this document in conjunction with js-modal-alert.js for the scripts that open and close the modal.

This set of code is a very modified version of the methods used in "Create a Modal With HTML, CSS & JavaScript" by Brad Traversy at https://www.youtube.com/watch?v=6ophW7Ask_0.

You can also visit Brad’s simplemodal CodePen at https://codepen.io/bradtraversy/pen/zEOrPp to play around with Brad's code on a live page in real time.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ======================================
  Modal Window Styles
========================================= */

/* The entire modal overlay including its transparent background. */
.alert-modal-overlay {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

/* Just the content window within the modal. */
.alert-content-window {
  background-color: #f4f4f4;
  border-radius: 10px;
  margin: 15% auto;
  padding: 10px;
  height: auto;
  width: 75%;
  box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);

  /* This animation will initiate when a modal-overlay's display property is changed to "display: block" in the openjsModal1() JavaScript function (when the user clicks the #js-modal-trigger object). */
  animation-name: modalopen; /* This assigns the @keyframes animation with the name "modalopen" (shown below) to .alert-content-window. */
  animation-duration: 0.75s;
  /* animation-timing-function: ease-in-out; */
  animation-timing-function: cubic-bezier(0.68, -0.75, 0.165, 1.05);
}

/* === .alert-content-window animation === */
@keyframes modalopen {
  from {
    opacity: 0;
    margin-top: -50%;
  }
  to {
    opacity: 1;
    margin-top: 15%;
  }
}

/* Callout panel with teal background that matches card-color-0. */
.alert-panel {
  background: #eaf4f5;
  background-color: #26757d;
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  border-radius: 6px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 10px;
  text-align: center;
}

/* White text for better visibility on teal background. */
.alert-panel,
.alert-panel p,
.alert-panel li {
  color: #fff;
  font-size: 1.35em;
}

/* Make links inside teal card-panels light gray and underlined. */
.alert-panel a {
  color: #ddd;
  font-size: 1.35em;
  text-decoration: underline;
}

/* Make links inside teal card-panels turn darker gray when interacted with. */
.alert-panel a:hover,
.alert-panel a:focus,
.alert-panel a:active {
  color: #bbb;
}

/* White disc for bullet points in lists to work with teal background. */
.alert-panel ul {
  list-style: disc;
}

/* White numerals for ordered lists to work with teal background. */
.alert-panel ol {
  list-style: decimal;
}

/* Remove extra margin-bottom for final line of text. */
.alert-panel p:last-child,
.alert-panel ul:last-child,
.alert-panel ol:last-child {
  margin-bottom: 0;
}

/* The close button within the modal content window. */
.alert-close-btn {
  background-color: #26757d;
  border-radius: 5px;
  color: #fff;
  display: block;
  font-size: 1.3em;
  margin: 0.2em auto;
}

.alert-close-btn:hover,
.alert-close-btn:focus {
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

/* The title in the modal content window. */
.alert-title {
  color: #007073;
  font-size: 2.5em;
  margin-top: 20px;
  margin-left: 6.5%;
}

/* === For smartphone only === */
@media only screen and (max-width: 599px) {

  .alert-content-window {
    width: 95%;
  }

} /* End of smartphone media query) */

/*  === For tablet portrait only ===  */
@media only screen and (min-width: 600px) and (max-width: 899px) {

  .alert-content-window {
    width: 95%;
  }

}  /* End of tablet portrait media query */

/* For  === tablet landscape only ===  */
@media only screen and (min-width: 900px) and (max-width: 1199px) {

  .alert-content-window {
    width: 78%;
  }

} /* End of tablet landscape media query */

/*  === For desktop up ===  */
@media only screen and (min-width: 1200px) {

  .alert-content-window {
    width: 65%;
  }

} /* End of desktop media query */