body {
	background: #002f57;
	padding: 0;
	margin: 0;
}

.container{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-family: sans-serif;
	background: #c8ebfa;
	background: -webkit-linear-gradient(-180deg, #fff, #00a4e8, #002f57);
	background: -o-linear-gradient(-180deg, #fff, #00a4e8, #002f57);
	background: -moz-linear-gradient(-180deg, #fff, #00a4e8, #002f57);
	background: linear-gradient(-180deg, #fff, #00a4e8, #002f57);
}

.grid-container {
  columns: 5 200px;
  column-gap: 1.5rem;
  width: 90%;
  margin: 0 auto;
}
.grid-container div {
  margin: 0 1.5rem 1.5rem 0;
  display: inline-block;
  width: 100%;
  border: solid 2px #002f57;
  padding: 5px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  transition: all 0.25s ease-in-out;
  color:#ffffff;
}
.grid-container div:hover img {
  filter: grayscale(0);
}
.grid-container div:hover {
  border-color: #00a4e8;
  cursor:pointer;
}
.grid-container div img {
  width: 100%;
  filter: grayscale(100%);
  border-radius: 5px;
  transition: all 0.25s ease-in-out;
}
.grid-container div p {
  margin: 5px 0;
  padding: 0;
  text-align: center;
  font-style: italic;
}
.info{
    cursor:pointer;
	position: absolute;
	top: 5px;
	right: 5px;
	line-height: 16px;
	font-size: 13px;
	letter-spacing: 1px;
	font-family: arial;
	font-weight: normal;
}

.footer {
    line-height: 16px;
    font-size: 13px;
    letter-spacing: 1px;
    font-family: arial;
    font-weight: normal;
    color: #fff;
    position: fixed;
    bottom: 0px;
    background: #0000004d;
    width: 100%;
    text-align: center;
    padding: 10px;
    margin: 0;
}
.footer a{color:#fff !important;}



.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 50px; /* 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(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}


 /* Modal Header */
.modal-header {
  padding: 2px 16px;
  background-color: #00aee8;
  color: white;
  font-size: 13px;
}
.modal  #thankyou {display:none;}

.modal .close{position:absolute; right:10px;font-size:25px;cursor:pointer;}
/* Modal Body */
.modal-body {padding: 2px 16px;}

/* Modal Footer */
.modal-footer {
  padding: 2px 16px;
  background-color: #00aee8;
  color: white;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  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-duration: 0.4s
}

/* Add Animation */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
} 


/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

.form{
	
	    border: 2px solid #5bcaf6;
    padding: 10px;
    width:80%;
}

.form input {
    width: 150px;
    padding: 8px;
    margin: 5px;
    text-align: center;
}
.form label{display:none;}
.table table {
    min-width: 600px;
    max-width: 100%;
    color: #fff;
    text-align: center;
    border: 1px solid #fff;
    margin-top: 13px;
    font-size: 11px;
}
.table table a { color: #fff !important;}
ul.menu {min-width:600px;}
.menu li {
    float: left;
    min-width: 120px;
    text-align: center;
    border: 2px solid #000;
    padding: 5px;
    list-style: none;
    border-right: 0px;
}
.menu li:last-child {border-right: 2px solid #000;}
.menu li a {
    color: #000;
    text-decoration: none;
    font-weight:bold;
    font-size:100%;
}

.content-view {
    width: 70%;
    min-width: 80%;
    margin: 0 auto;
    border: 1px solid #000;
    padding: 20px;
    background: #ffffff1c;
    box-shadow: 6px 6px 5px 3px #00000059;
    border-radius: 10px;
    margin-bottom:100px;
}

.header {
    font-size: 32px;
    text-align: center;
    font-family: serif;
    margin: 25px 10px;
    letter-spacing: 3px;
}