@import url('https://fonts.googleapis.com/css?family=Archivo+Black');


.tab {
  overflow: hidden;
  background-color: #333;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.tab button {
  display: flex;
  justify-content: center;
  background-color: inherit;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 17px;
  width: 33.3333333%;
}

.tab button:hover {
  background-color: #575757;
}

.tab button.active {
  background-color: #444;
}

.tabcontent {
  display: none;
  
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  color: #a6bccb;
}


.tabcontent:first-of-type {
  display: block;
}

/* Random Patch */







html {
	scroll-behavior: smooth;
}

html, body{
    max-width: 100%;
	height:100%
  
}
#wrapper-all{
	min-height: 100%;
    position: relative;
    z-index: 999;
}

.topnav {
  background-color: black;
  overflow: hidden;
  position:fixed;
  top: 0;
  width:100%;
  z-index:1000;
}

.topnav a {
  float: left;
  display: block;
  color: #6b8aa3;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav img {
  float: left;
  text-align: center;
  max-height:53px;
}

.topnav a:hover {
  background-color: #6b8aa3;
  color: black;
}

.topnav a.active {
  background-color: #6b8aa3;
  color: black;
}

.topnav .icon {
  display: none;
}

.logohffmain{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  
}
.content {
	width:90%;
	margin:0 auto;
	padding-top:150px;
}
.short-head .content {
	padding-top:0px !important;
}
.section {
	width:100%;
	margin:0 auto;
	margin-top:75px !important;
	padding:20px;
	-moz-border-radius:10px;  /* for Firefox */
	-webkit-border-radius:10px; /* for Webkit-Browsers */
	border-radius:10px; /* regular */
	background-color: rgba(0,0,0,0.9); 
	border-color: rgba(0,0,0,0.9); 
	color:#a6bccb;
}
.short-head .content .section {
	margin-top:50px !important;
}
.section h1{
	font-family: 'Archivo Black', sans-serif;
}
.staff {
  display: flex; 
	width: 100%;
	margin: 0px;
	padding: 0px;
  align-items: center;
  flex-direction: column; 
	text-align:center;
}
.staff h2 {
	font-size:2rem;
}
.senior {
  align-items: center;
  flex-direction: column; 
}
.senior h2 {
	font-size:3rem;
}
.staff-group {
	display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  align-items: center; 
  margin: 0 auto; 
  text-align: center;
}
.staff-group:last-child:after{
	content:"";
	display:table;
	clear:both;
	
}
.staff-card {
  flex: 0 1 auto;
	float: left;
	padding:10px;
	margin:20px;
	background-color:rgba(153,153,153,.5);
	-moz-border-radius:10px;  /* for Firefox */
	-webkit-border-radius:10px; /* for Webkit-Browsers */
	border-radius:10px; /* regular */
	background-color: rgba(153,153,153,.5); 
	border-color: rgba(153,153,153,.5); 

}
.staff-card img {

}
.staff-card .profile {
}
.staff-card .profile span.name {
	font-weight:bold;
	font-size:1.5rem;
}
.staff-card .profile span.title {
}
#instances
	{
		min-width:50%;
		border: 1px solid #d5e0e7;
		margin: 0 auto;
	}
#instances tr
	{
		border: 1px solid #d5e0e7;
	}
#instances tr:first-of-type
	{
		background-color:#666666;
	}
.jumbotron{
    position: relative;
    z-index:-101;
	padding:0px;
	margin:0px;

  }
  
  #video-background { 
    position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
      z-index: 110;
      min-width:100%;
      min-height:100%;
  }
  .buttonleft{

    margin-right: 60%; 
  }
  .buttonright{
    display: block;
    margin-left: 10px;
    margin-right:10px ; 
  }

  .logonav{
    padding:0px !important;
  }
  li {
    display: inline;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  
  li {
    float: right;
  }
  
  li a {
    display: block;
    padding: 8px;
    }
.aboutus{
  color: white;
  margin-left: auto;
  margin-right: auto;
}

.glitch-wrapper {
  height: 100%;
  display: -webkit-box;
  display: flex;
  	font-family: 'Archivo Black', sans-serif;

}
.glitch {
  font-size: 75px;
  position: relative;
  display: inline-block;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
}
.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #49FC00;
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim-2 5s infinite linear alternate-reverse;
}
.glitch::after {
  left: -2px;
  text-shadow: -2px 0 #b300fc;
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim 4.5s infinite linear alternate-reverse;
}
@-webkit-keyframes glitch-anim {
  0% {
    clip: rect(39px, 9999px, 17px, 0);
  }
  4.166666666666666% {
    clip: rect(44px, 9999px, 114px, 0);
  }
  8.333333333333332% {
    clip: rect(76px, 9999px, 148px, 0);
  }
  12.5% {
    clip: rect(8px, 9999px, 4px, 0);
  }
  16.666666666666664% {
    clip: rect(79px, 9999px, 27px, 0);
  }
  20.833333333333336% {
    clip: rect(101px, 9999px, 89px, 0);
  }
  25% {
    clip: rect(44px, 9999px, 45px, 0);
  }
  29.166666666666668% {
    clip: rect(44px, 9999px, 122px, 0);
  }
  33.33333333333333% {
    clip: rect(41px, 9999px, 25px, 0);
  }
  37.5% {
    clip: rect(135px, 9999px, 105px, 0);
  }
  41.66666666666667% {
    clip: rect(133px, 9999px, 85px, 0);
  }
  45.83333333333333% {
    clip: rect(35px, 9999px, 8px, 0);
  }
  50% {
    clip: rect(20px, 9999px, 98px, 0);
  }
  54.166666666666664% {
    clip: rect(124px, 9999px, 24px, 0);
  }
  58.333333333333336% {
    clip: rect(118px, 9999px, 125px, 0);
  }
  62.5% {
    clip: rect(37px, 9999px, 114px, 0);
  }
  66.66666666666666% {
    clip: rect(127px, 9999px, 72px, 0);
  }
  70.83333333333334% {
    clip: rect(116px, 9999px, 34px, 0);
  }
  75% {
    clip: rect(45px, 9999px, 55px, 0);
  }
  79.16666666666666% {
    clip: rect(54px, 9999px, 54px, 0);
  }
  83.33333333333334% {
    clip: rect(13px, 9999px, 89px, 0);
  }
  87.5% {
    clip: rect(67px, 9999px, 149px, 0);
  }
  91.66666666666666% {
    clip: rect(37px, 9999px, 83px, 0);
  }
  95.83333333333334% {
    clip: rect(138px, 9999px, 125px, 0);
  }
  100% {
    clip: rect(42px, 9999px, 50px, 0);
  }
}
@keyframes glitch-anim {
  0% {
    clip: rect(39px, 9999px, 17px, 0);
  }
  4.166666666666666% {
    clip: rect(44px, 9999px, 114px, 0);
  }
  8.333333333333332% {
    clip: rect(76px, 9999px, 148px, 0);
  }
  12.5% {
    clip: rect(8px, 9999px, 4px, 0);
  }
  16.666666666666664% {
    clip: rect(79px, 9999px, 27px, 0);
  }
  20.833333333333336% {
    clip: rect(101px, 9999px, 89px, 0);
  }
  25% {
    clip: rect(44px, 9999px, 45px, 0);
  }
  29.166666666666668% {
    clip: rect(44px, 9999px, 122px, 0);
  }
  33.33333333333333% {
    clip: rect(41px, 9999px, 25px, 0);
  }
  37.5% {
    clip: rect(135px, 9999px, 105px, 0);
  }
  41.66666666666667% {
    clip: rect(133px, 9999px, 85px, 0);
  }
  45.83333333333333% {
    clip: rect(35px, 9999px, 8px, 0);
  }
  50% {
    clip: rect(20px, 9999px, 98px, 0);
  }
  54.166666666666664% {
    clip: rect(124px, 9999px, 24px, 0);
  }
  58.333333333333336% {
    clip: rect(118px, 9999px, 125px, 0);
  }
  62.5% {
    clip: rect(37px, 9999px, 114px, 0);
  }
  66.66666666666666% {
    clip: rect(127px, 9999px, 72px, 0);
  }
  70.83333333333334% {
    clip: rect(116px, 9999px, 34px, 0);
  }
  75% {
    clip: rect(45px, 9999px, 55px, 0);
  }
  79.16666666666666% {
    clip: rect(54px, 9999px, 54px, 0);
  }
  83.33333333333334% {
    clip: rect(13px, 9999px, 89px, 0);
  }
  87.5% {
    clip: rect(67px, 9999px, 149px, 0);
  }
  91.66666666666666% {
    clip: rect(37px, 9999px, 83px, 0);
  }
  95.83333333333334% {
    clip: rect(138px, 9999px, 125px, 0);
  }
  100% {
    clip: rect(42px, 9999px, 50px, 0);
  }
}
@-webkit-keyframes glitch-anim-2 {
  6.666666666666667% {
    clip: rect(56px, 9999px, 115px, 0);
  }
  10% {
    clip: rect(147px, 9999px, 14px, 0);
  }
  13.333333333333334% {
    clip: rect(85px, 9999px, 68px, 0);
  }
  16.666666666666664% {
    clip: rect(65px, 9999px, 113px, 0);
  }
  20% {
    clip: rect(13px, 9999px, 147px, 0);
  }
  23.333333333333332% {
    clip: rect(118px, 9999px, 93px, 0);
  }
  26.666666666666668% {
    clip: rect(98px, 9999px, 76px, 0);
  }
  30% {
    clip: rect(136px, 9999px, 36px, 0);
  }
  33.33333333333333% {
    clip: rect(113px, 9999px, 126px, 0);
  }
  36.666666666666664% {
    clip: rect(64px, 9999px, 88px, 0);
  }
  40% {
    clip: rect(25px, 9999px, 137px, 0);
  }
  43.333333333333336% {
    clip: rect(84px, 9999px, 20px, 0);
  }
  46.666666666666664% {
    clip: rect(146px, 9999px, 91px, 0);
  }
  50% {
    clip: rect(55px, 9999px, 11px, 0);
  }
  53.333333333333336% {
    clip: rect(37px, 9999px, 112px, 0);
  }
  56.666666666666664% {
    clip: rect(52px, 9999px, 73px, 0);
  }
  60% {
    clip: rect(146px, 9999px, 136px, 0);
  }
  63.33333333333333% {
    clip: rect(23px, 9999px, 20px, 0);
  }
  66.66666666666666% {
    clip: rect(104px, 9999px, 146px, 0);
  }
  70% {
    clip: rect(20px, 9999px, 76px, 0);
  }
  73.33333333333333% {
    clip: rect(83px, 9999px, 0px, 0);
  }
  76.66666666666667% {
    clip: rect(8px, 9999px, 64px, 0);
  }
  80% {
    clip: rect(128px, 9999px, 83px, 0);
  }
  83.33333333333334% {
    clip: rect(124px, 9999px, 52px, 0);
  }
  86.66666666666667% {
    clip: rect(54px, 9999px, 100px, 0);
  }
  90% {
    clip: rect(51px, 9999px, 110px, 0);
  }
  93.33333333333333% {
    clip: rect(91px, 9999px, 102px, 0);
  }
  96.66666666666667% {
    clip: rect(71px, 9999px, 108px, 0);
  }
  100% {
    clip: rect(11px, 9999px, 134px, 0);
  }
}
@keyframes glitch-anim-2 {
  6.666666666666667% {
    clip: rect(56px, 9999px, 115px, 0);
  }
  10% {
    clip: rect(147px, 9999px, 14px, 0);
  }
  13.333333333333334% {
    clip: rect(85px, 9999px, 68px, 0);
  }
  16.666666666666664% {
    clip: rect(65px, 9999px, 113px, 0);
  }
  20% {
    clip: rect(13px, 9999px, 147px, 0);
  }
  23.333333333333332% {
    clip: rect(118px, 9999px, 93px, 0);
  }
  26.666666666666668% {
    clip: rect(98px, 9999px, 76px, 0);
  }
  30% {
    clip: rect(136px, 9999px, 36px, 0);
  }
  33.33333333333333% {
    clip: rect(113px, 9999px, 126px, 0);
  }
  36.666666666666664% {
    clip: rect(64px, 9999px, 88px, 0);
  }
  40% {
    clip: rect(25px, 9999px, 137px, 0);
  }
  43.333333333333336% {
    clip: rect(84px, 9999px, 20px, 0);
  }
  46.666666666666664% {
    clip: rect(146px, 9999px, 91px, 0);
  }
  50% {
    clip: rect(55px, 9999px, 11px, 0);
  }
  53.333333333333336% {
    clip: rect(37px, 9999px, 112px, 0);
  }
  56.666666666666664% {
    clip: rect(52px, 9999px, 73px, 0);
  }
  60% {
    clip: rect(146px, 9999px, 136px, 0);
  }
  63.33333333333333% {
    clip: rect(23px, 9999px, 20px, 0);
  }
  66.66666666666666% {
    clip: rect(104px, 9999px, 146px, 0);
  }
  70% {
    clip: rect(20px, 9999px, 76px, 0);
  }
  73.33333333333333% {
    clip: rect(83px, 9999px, 0px, 0);
  }
  76.66666666666667% {
    clip: rect(8px, 9999px, 64px, 0);
  }
  80% {
    clip: rect(128px, 9999px, 83px, 0);
  }
  83.33333333333334% {
    clip: rect(124px, 9999px, 52px, 0);
  }
  86.66666666666667% {
    clip: rect(54px, 9999px, 100px, 0);
  }
  90% {
    clip: rect(51px, 9999px, 110px, 0);
  }
  93.33333333333333% {
    clip: rect(91px, 9999px, 102px, 0);
  }
  96.66666666666667% {
    clip: rect(71px, 9999px, 108px, 0);
  }
  100% {
    clip: rect(11px, 9999px, 134px, 0);
  }
}




@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav img {
	float: none;
  }
}