#myContact, #myContact2 {
	color: #5ca5ff;
}

#myContact:hover, #myContact2:hover {
	color: gold;
	cursor: pointer;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    overflow: auto; /* Enable scroll if needed */
	margin: 0px;
    padding: 0px;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgb(204,255,204); /* Fallback color */
    background-color: rgba(255,255,204,0.85); /* rgba(204,255,204,0.85); #ccffcc w/ opacity */
}

#myTable {
	display: none;
	width:60%;
	max-width:700px;
	text-align:center;
	margin: auto;
	margin-top: 70px;
	background-color: #ccffcc;
	border-collapse: collapse;
	border: 1px solid blue;
	border-radius: 10px 10px 10px 10px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
}

th {
	text-align:center;
	padding: 0.5em;
	font-size: 1.25em;
	color: #52a0ff;
	background-color: #cce3ff;
	border-radius: 10px 10px 0px 0px;
}

td#staffInfo {
	text-align: center;
	padding: 0.5em 0em 0.25em 0em;
	border-top: 1px solid blue;
}

td#staffGrade {
	text-align: center;
	padding: 0.25em 0em 0.25em 0em;
	border-bottom: 1px solid blue;
}

td.contactInfo {
	text-align: left;
	vertical-align: top;
	font-size: 0.9em;
}

td.contactInfoTop {
	text-align: left;
	vertical-align: top;
	font-size: 0.9em;
	padding-top: 1em;
}

td.contactInfoBottom {
	text-align: left;
	vertical-align: top;
	font-size: 0.9em;
	padding-bottom: 0.5em;
}

td.columnName {
	padding-left: 1.5em;
}

td.columnValue {
	padding-right: 1.5em;
}

td.columnColon {
	padding-left: 0em;
	padding-right: 0.25em;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}

@keyframes zoom {
    from {transform: scale(0.1)} 
    to {transform: scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: darkgrey;
    font-size: 3.5em;
    font-weight: bold;
    transition: 0.3s;
}

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

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}