/* ---------------------------------------- MODAL ---------------------------------------- */

/* The Modal (background) */
#billyModal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 200; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
  animation: fadein .25s;
}

	@keyframes night {
	  0% {
	  	  left: 50%;
  			top: 50%;
	    width:0%;
	    height:0%;
	    background-color: rgba(0,0,0,0.0);
	  }
	  100% {
	  	  left: 0;
  			top: 0;
	    width:100%;
	    height:100%;
	    background-color: rgba(0,0,0,0.8);
	  }
	}

/* Modal Content/Box */
#billyModalBox{
  background-color: #fefefe;
  margin: 10% auto; /* X% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 40%; /* Could be more or less, depending on screen size */
  border-radius: .50rem;
  animation: fadein .5s;
  font-size:150%;
}

	@keyframes rise {
	  0% {
	    margin: 100% auto; /* X% from the top and centered */
	  }
	  100% {
	    margin: 10% auto; /* X% from the top and centered */
	  }
	}

	@keyframes shake {
	  10%, 90% {
	    transform: translate3d(-1px, 0, 0);
	  }
	  20%, 80% {
	    transform: translate3d(2px, 0, 0);
	  }
	  30%, 50%, 70% {
	    transform: translate3d(-4px, 0, 0);
	  }
	  40%, 60% {
	    transform: translate3d(4px, 0, 0);
	  }
	}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}