/* The Modal (background) */







.modal {







  display: none; /* Hidden by default */







  position: fixed; /* Stay in place */







  z-index: 1; /* Sit on top */







  padding-top: 25px; /* Location of the box */







  left: 0;







  top: 0;







  width: 100%; /* Full width */







  height: 100%; /* Full height */







  overflow: auto; /* Enable scroll if needed */







  background-color: rgb(255,0,0); /* Fallback color */







  background-color: rgba(255,0,0,0.5); /* Black w/ opacity */







}















/* Modal Content */







.modal-content {



  



  font-family:asstt-r;







  position: relative;







  background-color: #ffb3b3;







  margin: auto;







  padding: 0;







  border: 3px solid #960000;







  width: 80%;







  box-shadow: 0 4px 8px 0 rgba(150,0,0,0.25),0 6px 20px 0 rgba(150,0,0,0.20);







  -webkit-animation-name: animatetop;







  -webkit-animation-duration: 0.4s;







  animation-name: animatetop;







  animation-duration: 0.4s







}















/* Add Animation */







@-webkit-keyframes animatetop {







  from {top:-300px; opacity:0} 







  to {top:0; opacity:1}







}















@keyframes animatetop {







  from {top:-300px; opacity:0}







  to {top:0; opacity:1}







}















/* The Close Button */







.close {







  color: #960000;







  float: right;







  font-size: 35px;







  font-weight: bold;



  



  transition-duration:0.5s;







}















.close:hover,







.close:focus {







  color: black;







  text-decoration: none;







  cursor: pointer;



  



  transition-duration:0.5s; 







}















.modal-header {







  padding: 2px 16px;







  background-color: #ffb3b3;







  color: #960000;







}















.modal-body {padding: 2px 16px;}















.modal-footer {







  padding: 2px 16px;







  background-color: #ffb3b3;







  color: #960000;



  



  font-family:asstt-b;







}