html, body{
	font-family: 'Montserrat', sans-serif;
	height: 100%;
	margin: 0; /* Optional: Remove default body margin */
	padding: 0; /* Optional: Remove default body padding */
	scroll-behavior: smooth;
	background-color: #000;
}

.header-container{
	position: relative;
	float: left;
	width: 100%;
	background-color: #000;
}
.header-logo{
	font-size: 200%;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
}

.container{
	position: relative;
	float: left;
	width: 100%;
	height: 40%;
	min-height: 560px;
	color: #FFF;
	background-color: rgba(0, 0, 0, 0.8);
}
.bottom-gradient{
	z-index: 0;
	position: absolute;
	bottom: 0;
	height: 400px;
	width: 100%;
	background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
}
.title-call-to-action{
	position: relative;
	float: left;
	width: 100%;
	height: 50%;
}
/*.watch_button_wrap{
	position: absolute;
	bottom: 20%;
	width: 100%;
	color: #FFF;
	text-decoration: none;
}*/
.watch_button{
	position: relative;
	float: left;
	background-color: red;
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
	padding: 20px;
	border-radius: 10px;
}
.watch_description{
	position: absolute;
	bottom: 0;
	width: 80%;
	margin: 0 5% 0 5%;
}
.watch_description p{
	background-color: #000;
}

.title-list-container-wrap{
	position: relative;
	float: left;
	width: 100%;
	height: 50%;
	z-index: 1;
}
.title-list-container{
	position: relative;
	float: left;
	width: 100%;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	scroll-snap-type: x mandatory;
}
.title-container, .title-container-movie{
	word-wrap: break-word;
	width: 20%;
	border-radius: 10px;
	padding: 15px;
	margin-left: 2.5px;
	background-color: rgba(0, 000, 0, 0.85);
	color: #FFF;
	text-decoration: none;
	display: inline-block;
	scroll-snap-align: start;
	scroll-margin-left: 20px;
}
h3 {
  text-wrap: balance;
  font-size: 100%;
}
.title-container:hover{
	background-color: #000;
	cursor: pointer;
}
.title-container img{
	width: 100%;
	text-align: left;
	margin-bottom: -15px;
}
.title-container p{
	margin-top: -15px;
}
.title-img{
	width: 100%;
	height: 150px;
}

/*.container:hover{
	background-image: url('../img/logo.jpg');
	background-color: #000;
	background-position: center;
	background-repeat: no-repeat;
}*/

.video-container{
	position: relative;
	float: left;
	width: 70%;
	height: 100%;
	background-color: rgba(0, 000, 0, 0.7);
	z-index: 1;
}

/*.video-container iframe{
	aspect-ratio: 16 / 9;
	height: auto;
	max-height: 560px;
}*/

.season-container{
	position: relative;
	float: left;
	width: 100%;
	border-bottom: 1px solid #FFF;
}
.season-block{
	position: relative;
	float: left;
	padding: 0 10px 0 10px;
	background-color: rgba(139, 0, 0, 0.7);
	height: 50px;
	min-width: 50px;
	font-weight: bold;
	border-left:1px solid #FFF;
	border-top:1px solid #FFF;
	border-right:1px solid #FFF;
}
.season-block:hover{
	background-color: rgba(255, 0, 0, 0.7);
	cursor: pointer;
}
.season-block p{
	text-align: center;
}

.thumbnail-container{
	position: relative;
	float: left;
	width: 30%;
	height: 100%;
	overflow-y: scroll;
	background-color: rgba(0, 001, 0, 0.7);
	z-index: 1;
}

.thumbnail{
	position: relative;
	float: left;
	padding: 10px;
	width: 93%;
	height: 100px;
	border-bottom: 1px solid #FFF;
}
.thumbnail:hover{
	background-color: RED;
	cursor: pointer;
}
.thumbnail_active{
	background-color: RED;
}

.thumbnail_img{
	position: relative;
	display: flex;
	float: left;
	padding-left: 15px;
	width: 120px;
	height: inherit;
}
.thumbnail-title{
	position: relative;
	display: flex;
	float: left;
	padding-left: 15px;
	width: 45%;
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
}

.popmsg{
	padding: 10%;
	border: 20px solid #FFF;
	position: fixed;
	top: 20%;
	left: 0;
	background-color: GREEN;
	z-index: 10;
	display: none;
	'border-top-width',
	'border-right-width',
	'border-bottom-width',
	'border-left-width'
		Value:          <border-width> | inherit
		Initial:        medium
		Applies to:     all elements
		Inherited:      no
		Percentages:    N/A
		Media:          visual
		Computed value: absolute length; '0' if the border style is 'none' or 'hidden'
}

.popmsgclose{
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
}

/* Mobile */
@media (max-width: 1280px){
	
	body{
		font-size: 150%;
		width: 100%;
	}
	
	.container{
		position: relative;
		float: left;
		width: 100%;
		height: inherit;
	}
	
	.video-container{
		width: 100%;
		height: 30%;
	}
	
	.thumbnail-container{
		width: inherit;
		height: 60%;
		overflow-x: hidden;
	}
	.thumbnail{
		width: 100%;
		height: 100%;
	}
	
	.thumbnail_img{
		width: 30%;
		min-width: 200px;
		height: 20%;
		min-height: 150px;
	}
	
	.thumbnail-title{
		width: 45%;
		height: 70%;
	}
	
    .season-block{
       width: 30%; 
       height: 15%;
    }
	
	.title-container-wrap{
		overflow-wrap: break-word;
	}
	.title-img{
		width: 100%;
		min-height: 100px;
	}
	.watch_button{
		/*font-size: 50px;*/
	}
	.popmsg{
		position: absolute;
	}
}