* {
    box-sizing: border-box;
}
html {
    background-color: #000000;
    font-family: "Lucida Sans", sans-serif;
}
.tit{
 font-family: Verdana; 
 font-size: 20pt;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 5px;
    margin-bottom: 7px;
    background-color: #ffffff;
    font-size: 25px;
    color: #000000;
//    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 border-radius: 12px;
 width:100%;
 text-align:center;
}
.menu li.withtick {
    padding: 0px;
    margin-bottom: 7px;
    background-color: #ffffff;
    font-size: 25px;
    text-align: left;
    color: #000000;
    border-radius: 12px;
    width:100%;
}
.menu li.date {
    padding: 0px;
    margin-bottom: 2px;
    background-color: #000000;
    color: #ffffff;
    font-size: 15px;
    text-align:center;
}
.menu li:hover {
    background-color: #f1f1f1;
}
.menu li.date:hover {
    background-color: #000000;
}
.menu a{
 text-decoration:none;
 color:black;
}
button {
  background-color: #333;
  color: #c2c2c2;
  padding: 10px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  font-size:18px;
}
button:hover {
  background-color: #444;
  color: #ffffff;
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 0% auto 20% auto; /* 0% from the top, 20% from the bottom and centered */
  border: 1px solid #888;
  width: 100%; /* Could be more or less, depending on screen size */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
//  animation-name: animatetop;
  animation-name: animatezoom;
  animation-duration: 0.4s
}
/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}
.loader {
  position:fixed;
  top:22px;
  left:38px;
  border: 3px solid #ff0000;
  border-radius: 50%;
  border-top: 3px solid #000000;
  width: 21px;
  height: 21px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loaderfs {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: visible;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 20px solid #ff0000;
  border-radius: 50%;
  border-top: 20px solid #000000;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
.fade{
 animation: fade 4s linear;
}
@keyframes fade {
  0%, 100% { opacity: 0 }
}