body, html {
  height: 100%;
  margin: 0;
   background-color: hsl(32 37% 94%);
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  position: relative;
  max-width: 800px; /* Maximum width */
  margin: 0 auto; /* Center it */
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-family:  "Times New Roman", Times, serif;
   font-size: 12px;
  color: grey;
  text-align: justify;
}


.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}
  	
.text {
 
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}






#table1{

    border-spacing: 50px 50px;

    color: hsl(0 0% 0% / 0.7);

  width: 80%;

  height: 50%;

  text-align:left;

  display: flex;

 }

 



#table2{

  border-spacing: 50px 50px;

   top: 75%;

    position: absolute;

  width: 100%;

}

/* Button used to open the contact form - fixed at the bottom of the page */

.open-button {

  background-color: #555;

  color: white;

  padding: 16px 20px;

  border: none;

  cursor: pointer;

  opacity: 0.8;

  position: fixed;

  bottom: 23px;

  right: 28px;

  width: 280px;

}

.tooltip {

  position: relative;

  display: inline-block;

  border-bottom: 1px dotted black;

}



.tooltip .tooltiptext {

  visibility: hidden;

  width: 120px;

  background-color: black;

  color: #fff;

  text-align: center;

  border-radius: 6px;

  padding: 5px 0;



  /* Position the tooltip */

  position: absolute;

  z-index: 1;

}



.tooltip:hover .tooltiptext {

  visibility: visible;

}

/* The popup form - hidden by default */

.form-popup {

  display: none;

  position: fixed;

  bottom: 0;

  right: 15px;

  border: 3px solid #f1f1f1;

  z-index: 9;

}



/* Add styles to the form container */

.form-container {

  max-width: 300px;

  padding: 10px;

  background-color: white;

}



/* Full-width input fields */

.form-container input[type=text], .form-container input[type=password] {

  width: 100%;

  padding: 15px;

  margin: 5px 0 22px 0;

  border: none;

  background: #f1f1f1;

}



/* When the inputs get focus, do something */

.form-container input[type=text]:focus, .form-container input[type=password]:focus {

  background-color: #ddd;

  outline: none;

}



/* Set a style for the submit/login button */

.form-container .btn {

  background-color: #04AA6D;

  color: white;

  padding: 16px 20px;

  border: none;

  cursor: pointer;

  width: 100%;

  margin-bottom:10px;

  opacity: 0.8;

}



/* Add a red background color to the cancel button */

.form-container .cancel {

  background-color: grey;

}



/* Add some hover effects to buttons */

.form-container .btn:hover, .open-button:hover {

  opacity: 1;

}

.center{

	margin-left: auto;

	margin-right: auto;

	 border-spacing: 15px;

	 background-color: black;

	 opacity: .8;

	 	 top: 50%;

  }