/* ////////////////////////// Scroll */

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.grid-scroll-wrapper { max-width: 1200px; position: relative; margin: 0 auto; }	
.grid-scroll-wrapper:not(:last-child) { margin-bottom: 30px; }	

.grid-scroll { overflow-x: scroll; }	

.scroll-list { grid-gap: 0px; display: inline-flex; align-items: stretch; width: 100%; /*Before Load*/ overflow: hidden; /*Before Load*/ opacity: 0; }	
.grid-scroll .scroll-list { width: auto; /*Aftr Load*/ overflow: visible; /*Aftr Load*/ opacity: 1; animation: fadeIn 0.5s; }
.scroll-list > * { width: 200px; margin-right: 10px; flex-shrink: 0; }	
.scroll-list > *:last-child { margin-right: 100px; display: block; }	

.grid-scroll-arrow { width: 40px; height: 40px; background: #dd4400; position: absolute; top: 50%; transform: translateY(-50%); border-radius: 0px; cursor: pointer; z-index: 9; }
.grid-scroll-arrow-prev { right: 40px; }
.grid-scroll-arrow-next { right: 0; }
.grid-scroll-arrow svg { fill: #ffffff; width: 40px; height: 40px; display: block; }

.grid-scroll-header { position: absolute; right: 0; height: 100%; width: 80px; background: rgba(245,245,245,0.85); z-index: 90; }
.grid-scroll-content { flex: 1; }
	
.grid-scroll { -ms-overflow-style: none;  /* Internet Explorer 10+ */ scrollbar-width: none;  /* Firefox */ }
.grid-scroll::-webkit-scrollbar {  display: none;  /* Safari and Chrome */ }

/* ////////////////////////// Framework */

section {
	padding: 30px 0;
}
	section h1 { font-weight: bold;
	}
	section > article + * {
		margin-top: 30px;
	}
	section > article p {
		max-width: 800px;
	}

.page-row-advert {
	background: #ffffff;
	padding: 30px 0;
	min-height: 100px;
}

.columns { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 40px; }
.columns:not(:last-child) { margin-bottom: 30px; }

	@media screen and (max-width: 1000px) {
		.columns { grid-template-columns: 1fr; grid-gap: 20px; }
	}


.media-video { width: 100%; padding-bottom: 50%; position: relative; }		
.media-video iframe { position: absolute; width: 100%; height: 100%; }		
.media-images { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-gap: 15px; }		
.media-images .image img { width: 100%; height: 100%; object-fit: cover; }

	@media screen and (max-width: 600px) {
		.media-images { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }		
	}

/* ////////////////////////// Hero */

article + .page-hero {
	margin-top: 30px;
}

.page-hero { background: #202020; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 40px; align-items: center; }
.page-hero * { color: #ffffff; }
.page-hero img { width: 100%; height: 100%; aspect-ratio: 6 / 4; object-fit: cover; }
.page-hero article { padding: 30px; }

	@media screen and (max-width: 1000px) {
		.page-hero { grid-template-columns: 1fr; grid-gap: 0px; }
		.page-hero img { width: 100%; height: auto; aspect-ratio: 6 / 4; object-fit: cover; }
		.page-hero article { padding: 20px; }
	}

	@media screen and (max-width: 600px) {
		.page-hero article { padding: 15px; }
	}

/* ////////////////////////// List */

.wide-grid-list { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 15px; }

	@media screen and (max-width: 1000px) {
		.wide-grid-list { grid-template-columns: repeat(3, 1fr); grid-gap: 15px; }
	}

	@media screen and (max-width: 600px) {
		.wide-grid-list { grid-template-columns: repeat(2, 1fr); grid-gap: 15px; }
	}

.column-grid-list { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 15px; }

	@media screen and (max-width: 1000px) {
		.column-grid-list { grid-template-columns: repeat(3, 1fr); grid-gap: 15px; }
	}

	@media screen and (max-width: 600px) {
		.column-grid-list { grid-template-columns: repeat(2, 1fr); grid-gap: 15px; }
	}

/* ////////////////////////// Cards */

.card-generic { background: #ffffff; display: flex; align-items: stretch; }	
.card-generic a { display: flex; flex-flow: column; align-items: stretch; display: block; width: 100%; }	
.card-generic img { width: 100%; height: auto; aspect-ratio: 6 / 4; object-fit: cover; }	
.card-generic img.square-image { aspect-ratio: 1 / 1; }
.card-generic a > span { padding: 10px; display: flex; flex-direction: column; flex: 1; }	
.card-generic a > span:not(:last-child) { margin-bottom: 6px; }	
.card-generic .title { display: block; color: #dd4400; font-size: 16px; font-weight: bold; }	
.card-generic .summary { display: block; font-size: 14px; margin-top: 6px; color: #666666; }
.card-generic .small { display: block; font-size: 14px; margin-top: 6px; color: #888888; }	
.card-generic a .no-image { padding: 0px; display: block; width: 100%; aspect-ratio: 6 / 4; background: #202020; }

.card-nav { background: #ffffff; width: 110px; }	
.card-nav a { display: block; }	
.card-nav.active a { background: #dd4400; }	
.card-nav.active a * { color: #ffffff; }	
.card-nav a > span { padding: 10px; display: flex; flex-direction: column; flex: 1; }	
.card-nav img { width: 100%; height: auto; aspect-ratio: 6 / 4; object-fit: cover; }	
.card-nav a > span:not(:last-child) { margin-bottom: 6px; }	
.card-nav .title { display: block; color: #dd4400; font-size: 16px; font-weight: bold; }	
.card-nav .small { display: block; font-size: 14px; margin-top: 6px; color: #888888; }	




.card-character {
	display: flex;
	flex-direction: column;
	position: relative;
}	
	.card-character .link {
		display: block;
	}	
	.card-character .link:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(0.55turn, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.5));
	}	
	.card-character img {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}	
	.card-character .link > span {
		padding: 10px;
		position: absolute;
		bottom: 0;
		left: 0;
	}	
	.card-character .title {
		display: block;
		color: #ffffff;
		font-size: 16px;
		font-weight: bold;
	}	
	.card-character .small {
		margin-top: 2px;
		display: block;
		font-size: 14px;
		color: #ffffff;
	}	
.card-character .link > .no-image {
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background: #202020;
	position: static;
	padding: 0 0 100% 0;
}

.grid-box-series {
	width: 120px;
	background: #202020;
	margin-right: 10px;
	padding: 10px;
	position: relative;
	border-radius: 6px;
}	
.grid-box-series img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	left: 0;
	top: 0;
	opacity: 0.5;
	z-index: 1;
	border-radius: 6px;
}	
.grid-box-series .title {
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
	position: relative;
	z-index: 2;
}	
.grid-box-series .date {
    display: block;
    color: #ffffff;
    font-size: 14px;
	position: relative;
	z-index: 2;
}


/* ////////////////////////// List Headings */

.card-episode + .list-heading,
.columns + .list-heading {
	border-top: 1px dashed #555555;
	padding-top: 20px;
}

.list-heading {
    font-size: 18px;
	padding-bottom: 20px;
}
.list-heading a {
    font-size: 18px;
    font-weight: bold;
    color: #dd4400;
}

h5 {
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 15px 0;
	padding: 0;
}

/* ////////////////////////// Exisiting Changes */


.card-list .card-episode {
	padding:15px;
	background: #ffffff;
}

.card-list .card-episode:not(:last-child) {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: none;
}

.section-ad { display: flex; align-items: center; justify-content: center; position: relative; }
.section-ad:before { content: ''; z-index: -1; background: #ffffff; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(100vw - 30px); }

.section-ad .section-ad-desktop { width:728px !important; height:90px !important; background: #efefef; margin: 0 auto; display: block !important; }
.section-ad .section-ad-mobile { width:336px !important; height:280px !important; background: #efefef; margin: 0 auto; display: none !important; }

.section-ad .section-ad-desktop ins { width:728px !important; height:90px !important; display: block !important; }
.section-ad .section-ad-mobile ins { width:336px !important; height:280px !important; display: block !important; }

@media screen and (max-width: 800px) {
	.section-ad .section-ad-desktop { display: none !important; }
	.section-ad .section-ad-mobile { display: block !important; }

}