.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
/* Add a black background color to the top navigation */
.topnav {
	background-color: #333;
	overflow: hidden;
	border-radius: 4px;
	
  }
  .seal{
	width: 620px;
	height: 420px;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
	  
	float: left;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
	border-radius: 4px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
	background-color: #ddd;
	color: black;
	
  }
  
  /* Add a color to the active/current link */
  .topnav a.active {
	background-color: #04AA6D;
	color: white;
  }
.topnav a.split {
  float: right;
}
  table {
	margin-left: auto;
	margin-right: auto;
	width: 25%;
	font-size: 24;
  }
  body {
    background-color: #202225;
    text-align: center;
	font-size: 18px;
	color: white;
}
.center {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	font-size: 24;
}
.staff {
	clear: both;
	display: inline-block;
	width: 100%;
	background-color: #202225;
	/* [disabled]min-width: 400px;
*/
	padding-bottom: 35px;
	padding-top: 0px;
	margin-top: -5px;
	margin-bottom: 0px;
}
.thumbnail {
	width: 23%;
	text-align: center;
	float: left;
	margin-top: 35px;
	background-color: #202225;
	padding-bottom: 20px;
	margin-left: 1%;
	margin-right: 1%;
	border-radius: 3px;
	padding-top: 20px;
	border-bottom: 4px solid #6DC7D0;
}
.thumbnail:hover{
	transform: translateY();
}
.staff .thumbnail h4 {
	margin-top: 5px;
	margin-bottom: 5px;
	color: #202225;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
}
.staff .thumbnail p {
	margin: 0;
	color: #202225;
	text-align: left;
	padding-left: 20px;
}
.cards {
	width: 50%;
	height: auto;
	max-width: 80px;
	max-height: 200px;
	opacity: 0.8;
}
.gallery .thumbnail .tag {
	color: #FFFFFF;
	padding-bottom: 5px;
	padding-top: 4px;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
}
img {
	border-radius: 25%;
  }

  .zoom {
	 
border-radius: 25%;
	transition: transform .1s; /* Animation */
	margin: 0 auto;
  }
  
  .zoom:hover {
	transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }
.invite-pix{
	width: 70px;
	  height: 70px;
	border-radius: 25%;
	transition: transform .1s; /* Animation */
	margin: 0 auto;
}
.invite-pix:hover {
	transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }

.footer {
	width: 100%;
	position: fixed;
	left: 1;
	right: 1;
	bottom: 0;
	background-color: #04AA6D;
	overflow: hidden;
	border-radius: 1px;
	
  }
.footer a {
	
	float: center;
	color: rgb(230, 220, 87);
	text-align: center;
	padding: 10px 10px ;
	text-decoration: none;
	font-size: 17px;
	
}
.footer a:hover {
	background-color: #ddd;
	color: black;
	
  }
/*.footer {
    position: fixed;
    left: 1;
	right: 1;
    bottom: 0;
    width: 100%;
    background-color: #04AA6D;
    color: white;
    text-align: left;
  }*/
a:link {
color: rgb(230, 220, 87);
background-color: transparent;
text-decoration: none;
}

a:visited {
color: rgb(241, 160, 174);
background-color: transparent;
text-decoration: none;
}

a:hover {
color: rgb(182, 59, 59);
background-color: transparent;
text-decoration: underline;
}

a:active {
color: rgb(218, 218, 69);
background-color: transparent;
text-decoration: underline;
}
.img {
	height: 350px;
	width: 350px;
}


@media (max-width : 384px ){
	.bg  {
		width: 350px;
		height: 300px;
	}
}