@charset "utf-8";
html {
	position: relative;
	min-height: 100%;
}

body
{
	/* margin:0; */

	/* from css-tricks */
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	font-weight: 300;
}

.header-content
{
	width:100%;
	height:100vh;
	overflow: hidden;
}
.header-video-source
{
	/* position: relative;
    left: 50%;
    min-width: 100%;
    min-height: 100vh;
    max-width: inherit;
	transform: translate(-50%, 0); */
	
	position:relative;
	display:block;
	width:100%; 
}

.header-info
{
	position:absolute;	
	top:14%;
	left:50%;
	width:fit-content;
	transform:translate(-50%,-50%);
	color:white;
}

.header-content .logo
{
	height:7rem;
	margin:0 auto;
}

@media screen and (orientation:portrait) 
{
	.header-content
	{
		height:70vh;
	}
	.header-info
	{
		top:55%;
		width:80%;
		width:fit-content;
		width:-moz-fit-content;
	}
	.header-content .logo 
	{
		height: auto;
		width: 90%;
	}
}


.r5-container-bg {
	background-color:rgb(255, 255, 255);
    color: #000;
}

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	/* Set the fixed height of the footer here */
	height: 60px;
	line-height: 60px; /* Vertically center the text there */
	background-color: #f5f5f5;
  }

  .game-subtitle{
	  padding-top: 0;
	  margin-top: 0;
	  font-weight: bold;
  }

.dark
  {
	  background-color: rgb(0, 0, 0, 0.5);
  }

  .bg-nav {
	background-color: rgba(0, 0, 0, 0.8);
  }

  .jumbotron {
	  padding-top: 1rem;
	  padding-bottom: 1rem;
	  margin-bottom: 0;
  }

  h2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .overlay-container{
	position: relative;
    color: rgb(255, 0, 0);
  }

  /* flexbox test */

  .video-container {
	position: relative;
  }
  video {
	height: auto;
	vertical-align: middle;
	width: 100%;
  }
  .overlay-desc {
	background: rgba(0,0,0,0);
	position: absolute;
	top: 1; right: 0; bottom: 0; left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
  }
  .overlay-test {
    position: absolute;  
    left: 50%;
    top: 75%;
    transform: translate(-50%, -50%);
  }

.overlay-title {
	color: white;
	font-size: 3rem;
	text-align: center;
	font-weight: bold;
	margin-bottom: 0;
}

.overlay-subtitle {
	color: #fff;
	font-weight: bold;
	font-size: 1.2rem;
	margin-top: 0;
}

.container-bg-a {
	/* background-color: rgb(233, 241, 252); */
	/* border-style: solid;
	border-color: rgb(240, 240, 240);
	border-width: 0.1rem; */
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.section-header {
	border-bottom-width: 0.1rem;
	border-top-width: 0.1rem;
	border-left-width: 0;
	border-right-width: 0;
	border-style: solid;
	border-color: #e9ecef;
}

@media (max-width: 767.98px) {
	.overlay-title {
		font-size: 1.5rem;
	}
	.overlay-subtitle{
		font-size: 0.9rem;
	}
	.btn {
		margin-bottom: 0.5rem;
	}
}