@import url('http://fonts.cdnfonts.com/css/atkinson-hyperlegible');

@font-face {
  font-family: "roboto-light";
  font-display: swap;
  src: url("/assetts/static/fonts/RobotoMono-Light.ttf");
}

@font-face {
  font-family: "roboto-medium";
  font-display: swap;
  src: url("/assetts/static/fonts/RobotoMono-Medium.ttf");
}

html,
body {
  height: 100%;
  margin: 0;
  background-color: #fff;
  color: black;
  font-family: 'roboto', sans-serif; /*'Atkinson Hyperlegible', sans-serif;*/
  padding-top: 25px;

}

/* align Main-Top-Content*/
#main-top-container{
    top: 0;
    left: 0;
    background-color: rgba(6, 7, 8, 0.5);
}

/* darken video and setup Text Overlay as flex*/
#video-overlay-container{
    top: 12.5px;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(6, 7, 8, 0.75);
    color: rgba(255, 255, 255, 1);
    display: flex;
}

/* make Image Container the size and width of main top content*/
#image-vid-container {
  position: relative;
  height: 100%;
  width: 100%;
}

/* align Top Video in the center of main top content*/
#image-vid{
  color: transparent;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* resize Top Video to fit main top content*/
@media (max-width: 768px) {
  #image-vid {
    min-width: 100%;
  }
}

/* resize Top Video to fit main top content*/
@media (min-width: 768px) {
  #image-vid {
    min-width: 100%;
  }
}

.jumbotron{
  /* background-image: linear-gradient(130deg, #025f64, #008e90 );   */
  background-image: linear-gradient(130deg, #3a010275, #ff000875 );
  color: #fff;
}

#hms-navbar {
    background-color: white;
}

#hmssvg{
  width: 150px;
}

#team-statistics .card-body{
  height: 250px;
  color: 	#fff;
  background-color: #c4090f;
}

.footer{
  background-image: linear-gradient(130deg, #9b070c, #f10c12 );
  color: #fff;
  font-size: 10pt;
}

.footer-list{
  background-color: transparent !important;
  color: #fff;
  border: none;
  padding-left: 0px;
  padding-top: 5px;
  padding-bottom: 0px;
}

.footer-social{
  color:#fff;
  opacity:1;
  padding-left: 2rem;
  padding-bottom: 0rem;
}

.footer .fa {
  font-size:1.5rem;
}

.footer a:hover {
  opacity:0.5;
  color:#fff;
  text-decoration: none;
}


.intro {
  font-size:16px;
  margin:0 auto;
}
.intro p {
  margin-bottom:0;
}

.people {
  padding:50px 0;
  cursor: pointer;
}
.item {
  margin-bottom:30px;
}

.item .box {
  text-align:center;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  height:400px;
  position:relative;
  overflow:hidden;
}

.item .cover {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  /* background-color:#008e909f; */
  background-color:#f10c129f;
  transition:opacity 0.15s ease-in;
  opacity:0;
  padding-top:80px;
  color:#fff;
}

.item:hover .cover {
  opacity:1;
}

.item .name {
  font-weight:bold;
  margin-bottom:8px;
}

.item .title {
  text-transform:uppercase;
  font-weight:bold;
  color:#fff;
  letter-spacing:2px;
  font-size:28px;
  margin-bottom:20px;
}

.social {
  font-size:36px;
  color:#fff;
  opacity:1;
  padding: 1rem;
}
 
.social:hover {
  opacity:0.5;
  color:#fff;
}