body{
    font-family: 'Open Sans', sans-serif;
	height: 100%;
	width: 100%;
	margin: 0 0 0 0; 
	padding: 0 0 0 0;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover {
	text-decoration: underline;
	color: inherit;
}

.navbar {
  height: 80px;
  border: 1px solid lightgray
}

.nav-container {
	width: 100%;
  margin: 10px 60px 0 60px;
}

#logo {
	height: 32px;
	width: 30px;
	float: left;
	margin-top: 0px;
	margin-right: 6px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iMTM5LjkzcHgiIGhlaWdodD0iMTUwLjM0cHgiIHZpZXdCb3g9IjAgMCAxMzkuOTMgMTUwLjM0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMzkuOTMgMTUwLjM0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZGVmcz4KCQk8cmVjdCBpZD0iU1ZHSURfMV8iIHg9Ii03MS42NyIgeT0iLTcwLjY1IiB3aWR0aD0iMjgzLjQ2IiBoZWlnaHQ9IjI5Mi4xNiIvPgoJPC9kZWZzPgoJPGNsaXBQYXRoIGlkPSJTVkdJRF8yXyI+CgkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfMV8iICBvdmVyZmxvdz0idmlzaWJsZSIvPgoJPC9jbGlwUGF0aD4KCTxwYXRoIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiNGRjM4NUMiIGQ9Ik0xMzcuODIsMTA2LjdjLTAuNjctMS44OS0xLjQ2LTMuNzItMi4yMS01LjQyYy0xLjE1LTIuNjEtMi4zNi01LjIyLTMuNTItNy43NQoJCWwtMC4wOS0wLjJjLTEwLjQxLTIyLjU3LTIxLjU4LTQ1LjQ2LTMzLjItNjguMDFsLTAuNDktMC45NmMtMS4xOS0yLjMtMi40MS00LjY4LTMuNjctNy4wMmMtMS40Ny0yLjczLTMuMDktNS42My01LjQtOC4zMgoJCWMtNC45Ni01LjgxLTExLjgtOS0xOS4yOC05Yy03LjQ4LDAtMTQuMzIsMy4yLTE5LjI4LDkuMDFjLTIuMywyLjY5LTMuOTIsNS41OS01LjM5LDguMzJjLTEuMjcsMi4zNi0yLjUxLDQuNzctMy43LDcuMDlsLTAuNDYsMC44OQoJCUMyOS41MSw0Ny44NywxOC4zNCw3MC43NSw3Ljk0LDkzLjMybC0wLjE1LDAuMzNjLTEuMTUsMi40OS0yLjMzLDUuMDYtMy40Niw3LjYyYy0wLjc1LDEuNy0xLjUzLDMuNTMtMi4yMSw1LjQyCgkJYy0xLjk3LDUuNTUtMi41NiwxMC44NS0xLjc5LDE2LjJjMS42LDExLjIxLDkuMTEsMjAuODEsMTkuNiwyNS4wNmMzLjg5LDEuNTgsOC4wMywyLjM4LDEyLjI5LDIuMzhjMS4zMSwwLDIuNjQtMC4wOCwzLjk2LTAuMjMKCQljNS4wNC0wLjU5LDEwLjEzLTIuMywxNS4xMS01LjExYzYuMDktMy40MywxMi4xMS04LjQ2LDE4LjY5LTE1LjY0YzYuNTgsNy4xOCwxMi41OSwxMi4yMSwxOC42OSwxNS42NAoJCWM0Ljk4LDIuOCwxMC4wNiw0LjUyLDE1LjExLDUuMTFjMS4zMiwwLjE1LDIuNjUsMC4yMywzLjk2LDAuMjNjNC4yNiwwLDguMzktMC44LDEyLjI5LTIuMzhjMTAuNDktNC4yNSwxOC0xMy44NiwxOS42LTI1LjA2CgkJQzE0MC4zNywxMTcuNTQsMTM5Ljc5LDExMi4yNCwxMzcuODIsMTA2LjcgTTY5Ljk3LDExNC41M2MtOC4xNC0xMC4zNC0xMy4zNi0xOS45My0xNS4xOS0yNy45OGMtMC43Ny0zLjM4LTAuOTUtNi40OC0wLjUyLTkuMjMKCQljMC4zNy0yLjM3LDEuMTgtNC40OSwyLjQyLTYuMzFjMi44MS00LjEsNy43OC02LjU0LDEzLjMtNi41NGM1LjUxLDAsMTAuNDksMi40NSwxMy4yOSw2LjU1YzEuMjQsMS44MSwyLjA2LDMuOTMsMi40Miw2LjMxCgkJYzAuNDIsMi43NSwwLjI1LDUuODUtMC41Miw5LjIzQzgzLjMzLDk0LjYsNzguMSwxMDQuMTksNjkuOTcsMTE0LjUzIE0xMzAuMSwxMjEuNTRjLTEuMTIsNy44NC02LjM3LDE0LjU1LTEzLjcxLDE3LjUyCgkJYy0zLjYsMS40Ni03LjUzLDEuOTctMTEuNTIsMS41MWMtMy44My0wLjQ0LTcuNTktMS43My0xMS41MS0zLjk0Yy01LjQzLTMuMDUtMTAuOTItNy43NC0xNy4xLTE0LjYyCgkJYzkuODQtMTIuMTUsMTUuOTgtMjMuMzUsMTguMjUtMzMuMzNjMS4wNC00LjU2LDEuMjYtOC44OCwwLjY1LTEyLjgyYy0wLjU5LTMuODEtMS45My03LjI3LTMuOTktMTAuMjgKCQljLTQuNi02LjcxLTEyLjUzLTEwLjcyLTIxLjIyLTEwLjcyYy04LjY4LDAtMTYuNjEsNC4wMS0yMS4yMSwxMC43MmMtMi4wNiwzLjAxLTMuNDEsNi40Ny0zLjk5LDEwLjI4CgkJYy0wLjYxLDMuOTUtMC4zOSw4LjI2LDAuNjUsMTIuODJjMi4yNyw5Ljk4LDguNDIsMjEuMTgsMTguMjYsMzMuMzRjLTYuMTgsNi44OC0xMS42NywxMS41Ni0xNy4wOSwxNC42MgoJCWMtMy45MiwyLjIxLTcuNjgsMy40OS0xMS41MSwzLjk0Yy0zLjk5LDAuNDYtNy45My0wLjA1LTExLjUzLTEuNTFjLTcuMzMtMi45Ny0xMi41OC05LjY5LTEzLjctMTcuNTIKCQljLTAuNTUtMy44My0wLjEzLTcuNTIsMS4zMy0xMS42MmMwLjU0LTEuNTEsMS4xNi0zLDEuOTQtNC43NmMxLjEtMi40OSwyLjI3LTUuMDMsMy40LTcuNDhsMC4xNS0wLjMzCgkJYzEwLjM1LTIyLjQ1LDIxLjQ1LTQ1LjIsMzMuMDEtNjcuNjRsMC40Ni0wLjg5YzEuMTgtMi4yOSwyLjM5LTQuNjUsMy42Mi02Ljk0YzEuMjctMi4zNywyLjU2LTQuNjYsNC4yNC02LjYzCgkJYzMuMTUtMy42OSw3LjI5LTUuNjQsMTEuOTctNS42NGM0LjY4LDAsOC44MiwxLjk1LDExLjk3LDUuNjRjMS42OSwxLjk4LDIuOTcsNC4yNiw0LjI0LDYuNjNjMS4yMiwyLjI3LDIuNDIsNC42MSwzLjU5LDYuODcKCQlsMC40OSwwLjk2YzExLjU2LDIyLjQzLDIyLjY2LDQ1LjE5LDMzLjAxLDY3LjY0bDAuMDksMC4yYzEuMTUsMi40OSwyLjM0LDUuMDcsMy40Niw3LjZjMC43OCwxLjc3LDEuNDEsMy4yNSwxLjk0LDQuNzYKCQlDMTMwLjIzLDExNC4wMSwxMzAuNjUsMTE3LjcxLDEzMC4xLDEyMS41NCIvPgo8L2c+Cjwvc3ZnPgo=);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: contain;
}

.headline {
	font-weight: bold;
}


.main-date {
	font-size: 0.9em;
}
.space	{
	width: 100%;
	height: 100px
}

.container-fluid {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: 80px;
	padding-left: 80px;
	padding-top: 70px;
}

#main-image {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.second-feed {
	height: 250px;
}
.sub-image {
	width: 100%;
	height: 100%;
}
.sub-story {
	padding-bottom: 50px;
}

.main-content {
	height: 500px;
}
.main-title {
	font-size: 1.8em;
	font-weight: bold;
	padding-bottom: 15px;
}
.navbar-toggler {
	float: right;
	position: flex;
	right: 2%;
	border: none;
}
.aspectRatioBox {
	padding-top: calc(2 / 3 * 100%);
	background-size: cover;
	background-position: center;
}
.smallAspectRatioBox {
	padding-top: calc(3 / 4 * 100%);
	padding-bottom: 0;
	background-size: cover;
	background-position: center;
	margin-bottom: 0;
}

.profileImage {
	height: 317px;
	width: 250px;
	padding-bottom: 0;
	background-size: cover;
	background-position: center;
	margin-bottom: 0;
}

/* media queries */
@media only screen and (min-width: 992px) {
	.collapse {
		color:black;
		float: right;
	  }
	  #search-form {
		  padding: 5px 5px 5px 5px;
		  right: 100px;
		  position: absolute;
		  display: inline-flexbox;
		  width: 400px;
		  z-index: 15;
	  }
	  .social-links {
		  float: right !important;
		  font-size: 1.5em;
		  position: relative;
		  top: 0;
	  }
	  
  }

/* media queries */
@media only screen and (max-width: 991px){
    .collapse {
      background-color: white;
	  padding: 50px;
	  left: -340px;
	  position: absolute;
	  display: block;
	  width: 1000px;
	  height: 800px;
	  margin-top: 80px;
	  z-index: 10;
    }
	.nav-link {
		text-align: center;
	}
	.text-input {
		width: 240px;
	}
	#search-form {
		padding: 5px 5px 5px 5px;
		left: 4px;
		position: absolute;
		display: inline-flexbox;
		width: 390px;
		z-index: 15;
	}
	.social-links {
		float: right !important;
		font-size: 1.5em;
		position: relative;
		top: 0;
	}

}

.social-links {
	font-size: 1.5em;
}

  /* media queries */
@media only screen and (max-width: 768px){
	body {
		font-size: 0.8em;
	}
    .collapse {
      background-color: white;
	  padding: 50px;
	  right: 1px;
	  position: absolute;
	  display: block;
	  width: 800px;
	  height: 800px;
	  margin-top: 80px;
	  z-index: 10;
    }
	.nav-link {
		text-align: center;
	}
	.text-input {
		width: 150px;
	}
	#search-form {
		padding: 5px 5px 5px 5px;
		left: 80px;
		position: absolute;
		display: inline-flexbox;
		width: 200px;
		z-index: 15;
	}
	.social-links {
		margin:0 auto;
		float:unset !important;
		position: relative;
		top: -50px;
		display:table;
		margin:0 auto;
	}
	.terms-links {
		display:table;
		margin:0 auto;
	}

  }

  
	/* media queries */
  @media only screen and (max-width: 576px){
	.collapse {
	  background-color: white;
	  padding: 50px 50px 50px 90px;
	  left: -250px;
	  position: absolute;
	  display: block;
	  width: 600px;
	  height: 800px;
	  margin-top: 80px;
	  z-index: 10;
	}
	.nav-link {
		text-align: center;
	}
	.text-input {
		width: 150px;
	}
	#search-form {
		padding: 5px 5px 5px 5px;
		left: 80px;
		position: relative;
		display: inline-flexbox;
		width: 200px;
		z-index: 15;
	}
	.social-links {
		margin:0 auto;
		float:unset !important;
		position: relative;
		top: -55px;
		display:table;
		margin:0 auto;
	}
	.terms-links {
		font-size: 0.8em;
	}
  }
	
.btn-menu {
	border: 1px solid lightgray;
	background-color: white;
}
.btn-hosts {
	border: 1px solid white;
	background-color: black;
	text-align: center;
	width: 50%;
}

.btn-menu:hover {
	border: 1px solid black;
	cursor:pointer;
}
.active {
	border: 1px solid black;
	background-color: #F7F7F7;
	color: black;
}

.hosts {
	position: relative;
	color:white;
	background-color: black;
	width: 100vw;
	height: 740px;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
}

.host {
	margin-right: 3px;
}

.host-info {
	background-color: #222;
	padding: 2px;
	font-size: 0.9em;
	font-weight: bold;
	width: 250px;
	padding-top: 0;
	margin-top: 0;
}
.hosts > div> div>div>a:hover {
	text-decoration: none;
}

.scrollableRow {
    overflow-x: scroll;
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 18px;
    padding-right: 18px;
	scrollbar-width: thin;
	scrollbar-color: yellow;
}