* {
  	box-sizing: boder-box;
	}

html,body {   
	color: #000000;
	margin: 0;
        padding: 0;
        border: 0;   
        outline: 0;
	box-sizing: border-box;
	clear: both;  
        }

body {
	width: 100%;
	height: auto;
  	font-family: "Alegreya Sans SC", sans-serif;
  	margin: 0;
  	background: #EFF2F6;
	box-sizing: border-box;
	clear: both;
	}

#main {
  	position: relative;
  	z-index: 20;
  	background: #EFF2F6;
  	transition: transform 0.6s ease; 
	}

@media (min-width: 640px) {
  	#main {
    		padding: 1em; 
  		}
	}

.fake-section {
  	background: #eee;
  	height: 300px; 
	}

.tiles-a {
  	width: 100%;
  	position: relative;
  	overflow: hidden;
	box-sizing: border-box;
	clear: both;
	background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E") !important;
	}

.tiles-a ul {
  	margin: 0;
  	padding: 0;
	}

.tiles-a li {
  	list-style: none; 
	}

@media (min-width: 640px) {
  	.tiles-a li {
    		float: left;
    		width: 33.33%; 
  		}
	}



/* SMALLER TABLET screens */   /* SMALLER TABLET */
@media screen and (max-width: 480px) {
  	.tiles-a li {
  		padding-bottom: 15px;   
  		}
	}





@media only screen and (min-width : 320px) and (max-width : 480px) {/* Mobile portrait */
  	.tiles-a .modal li {
  		padding-bottom: 15px;   
  		}
	}





@media only screen and (min-width : 480px) and (max-width : 595px) {/* Mobile landscape */
  	.tiles-a li {
  		padding-bottom: 15px; 
  		}
	}





@media only screen and (min-width : 595px) and (max-width : 690px) {/* Small tablet portrait */
  	.tiles-a li {
  		padding-bottom: 15px; 
  		}
	}





@media only screen and (min-width : 690px) and (max-width : 769px) {/* Tablet portrait */
  	.tiles-a li {
  		padding-bottom: 15px;    
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture) --- SMALLER TABLET */
@media only screen and (min-width : 769px) and (max-width : 800px) {/* Small tablet landscape */
	.tiles-a li {
  		padding-bottom: 15px;  
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture --- SMALLER TABLET */
@media only screen and (min-width : 800px) and (max-width : 1024px) {/* Small tablet landscape */
  	.tiles-a li {
  		padding-bottom: 15px;     
  		}
	}





@media only screen and (min-width : 1024px) and (max-width : 1224px) {/* Tablet landscape */
  	.tiles-a li {
  		padding-bottom: 15px; 
  		}
	}






/* Desktops and laptops */  /* SMALL DESKTOP */
@media only screen 
and (min-width : 1224px) {
  	.tiles-a li {
  		  padding-bottom: 15px;    
		} 
	}










.tiles-a a {
  	margin: 1em;
  	display: block;
  	background: #222;
  	padding-top: 73%;
  	height: 0;
	}

#aside {
  	position: fixed;
  	top: 0;
  	right: 0;
  	/** width: 60%; **/
 	height: 100%;
  	background: #eee;
  	overflow-y: scroll;
  	z-index: 10;  
	}





/* SMALLER TABLET screens */   /* SMALLER TABLET */
@media screen and (max-width: 480px) {
  	#aside {
  		width: 74%;    
  		}
	}





@media only screen and (min-width : 320px) and (max-width : 480px) {/* Mobile portrait */
  	#aside {
  		width: 74%;  
  		}
	}





@media only screen and (min-width : 480px) and (max-width : 595px) {/* Mobile landscape */
  	#aside {
  		width: -72%;   
  		}
	}





@media only screen and (min-width : 595px) and (max-width : 690px) {/* Small tablet portrait */
  	#aside {
  		width: 70%;   
  		}
	}





@media only screen and (min-width : 690px) and (max-width : 769px) {/* Tablet portrait */
  	#aside {
  		width: 68%;  
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture) --- SMALLER TABLET */
@media only screen and (min-width : 769px) and (max-width : 800px) {/* Small tablet landscape */
	#aside {
  		width: 66%;   
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture --- SMALLER TABLET */
@media only screen and (min-width : 800px) and (max-width : 1024px) {/* Small tablet landscape */
  	#aside {
  		width: 64%;   
  		}
	}





@media only screen and (min-width : 1024px) and (max-width : 1224px) {/* Tablet landscape */
  	#aside {
  		width: 62%;  
  		}
	}






/* Desktops and laptops */  /* SMALL DESKTOP */
@media only screen 
and (min-width : 1224px) {
  	#aside {
  		width: 60%; 
		} 
	}











#aside img {
  	width: 100%;
  	height: auto;
  	vertical-align: top;
	}

#close-button:hover {
  	transform: rotate(15deg) !important;
	transition: 300ms ease all;
	}

#aside .wrapper {
  	padding: 1em; 
	}

#aside .close {
 	width: 25px;
  	display: block;
  	position: absolute;
  	top: 1em;
  	right: 1em;
  	7878background-color: rgba(0, 0, 0, 0.5);
  	border-radius: 50%; 
	}

.show-detail {
  	overflow: hidden;
	}

.show-detail #main {
  	/** transform: translateX(-60%); **/
	}



/* SMALLER TABLET screens */   /* SMALLER TABLET */
@media screen and (max-width: 480px) {
  	.show-detail #main {
  		transform: translateX(-74%);   
  		}
	}





@media only screen and (min-width : 320px) and (max-width : 480px) {/* Mobile portrait */
  	.show-detail #main {
  		transform: translateX(-74%);  
  		}
	}





@media only screen and (min-width : 480px) and (max-width : 595px) {/* Mobile landscape */
  	.show-detail #main {
  		transform: translateX(-72%);  
  		}
	}





@media only screen and (min-width : 595px) and (max-width : 690px) {/* Small tablet portrait */
  	.show-detail #main {
  		transform: translateX(-70%);  
  		}
	}





@media only screen and (min-width : 690px) and (max-width : 769px) {/* Tablet portrait */
  	.show-detail #main {
  		transform: translateX(-68%);  
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture) --- SMALLER TABLET */
@media only screen and (min-width : 769px) and (max-width : 800px) {/* Small tablet landscape */
	.show-detail #main {
  		transform: translateX(-66%);  
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture --- SMALLER TABLET */
@media only screen and (min-width : 800px) and (max-width : 1024px) {/* Small tablet landscape */
  	.show-detail #main {
  		transform: translateX(-64%);  
  		}
	}





@media only screen and (min-width : 1024px) and (max-width : 1224px) {/* Tablet landscape */
  	.show-detail #main {
  		transform: translateX(-62%);  
  		}
	}






/* Desktops and laptops */  /* SMALL DESKTOP */
@media only screen 
and (min-width : 1224px) {
  	.show-detail #main {
  		transform: translateX(-60%);  
		} 
	}










.visually-hidden {
  	position: absolute;
  	overflow: hidden;
  	clip: rect(0 0 0 0);
  	height: 1px;
  	width: 1px;
  	margin: -1px;
  	padding: 0;
  	border: 0; 
	}

/** COPYRIGHT STYLING **/
.copyrighted-content-categories-canvas-standalone { 
	width: 100%; 
  	font-size: 0.7em;
  	color: #000; 
	bottom: 0; 
	margin-bottom: 0px; 
	right: 0; 
	margin-right: 12px; 
  	font-style: normal; 
	}

.footer-bottom-rights {
	float: right; 
	margin-right: 12px;
  	}
/** END OF COPYRIGHT STYLING **/







#the_Header {  
	z-index: 1 !important;
	position: absolute;
	width: 200px;
	height: 27px;
	top: 0;
	margin-top: 0px;
  	text-align: center;
	border: 0px;     
	box-sizing: border-box;  
	clear: both;   
	/**CENTER HORIZONTALLY**/
  		text-align: center;
  		margin: auto;  
  		position: absolute;
  		left:0;
  		right: 0;
  		top: 0;
	/**END OF CENTER HORIZONTALLY**/


	}

.first-of-all {
  	display: inline-block;
	height: 27px;
	border: 0px;
	}






video {
	width: 100%;
	height: 100vh;
	background: radial-gradient(#480D35 ,#17151d);
	box-sizing: border-box;  
	clear: both;     
	}
a { 
	text-decoration: none !important;
	}

#content-title {
  	font-weight: 900;
  	7878font-size: clamp(0.6rem, 1.3vw, 1rem);    7878font-size: clamp(1rem, 1vw, 1.3rem);  
	margin-top: 0px;
	border: 0px; 
	width: 100%;  
	}







/* SMALLER TABLET screens */   /* SMALLER TABLET */
@media screen and (max-width: 480px) {
  	#content-title {
  		  font-size: 15px;  
  		}
	}





@media only screen and (min-width : 320px) and (max-width : 480px) {/* Mobile portrait */
  	#content-title {
  		  font-size: 15px;    
  		}
	}





@media only screen and (min-width : 480px) and (max-width : 595px) {/* Mobile landscape */
  	#content-title {
  		  font-size: 15px; 
  		}
	}





@media only screen and (min-width : 595px) and (max-width : 690px) {/* Small tablet portrait */
  	#content-title {
  		  font-size: 12px;     
  		}
	}





@media only screen and (min-width : 690px) and (max-width : 769px) {/* Tablet portrait */
  	#content-title {
  		  font-size: 12px;    
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture) --- SMALLER TABLET */
@media only screen and (min-width : 769px) and (max-width : 800px) {/* Small tablet landscape */
	#content-title {
  		  font-size: 13px;    
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture --- SMALLER TABLET */
@media only screen and (min-width : 800px) and (max-width : 1024px) {/* Small tablet landscape */
  	#content-title {
  		  font-size: 14px;     
  		}
	}





@media only screen and (min-width : 1024px) and (max-width : 1224px) {/* Tablet landscape */
  	#content-title {
  		  font-size: 15px;  
  		}
	}






/* Desktops and laptops */  /* SMALL DESKTOP */
@media only screen 
and (min-width : 1224px) {
  	#content-title {
  		  font-size: 16px;     
		} 
	}










/* VIDEO PLAYBACK TIME MARKER */
#play-time-marker {
	font-size: 9pt;
	color: #FFFFFF;
	width: auto;
	height: auto;
	11float: right !important;
	right: 0 !important; 
	margin-right: 5px;
	bottom: 0;
	77margin-bottom: 5px; 
	777position: absolute !important;
  	background: rgba(44, 62, 80, 0.6); background: rgb(44, 62, 80);
	border: 1px solid #333;
	border-radius: 5px;
	11padding: 2px;
	11padding-top: 3px;
	border-left: 1px solid rgb(27,121,51);
	border-right: 1px solid rgb(27,121,51);  transform: translateX(5px) translateY(-45px) !important;  display: inline-block; 44position: absolute; z-index: 1;
	}
/* END OF VIDEO PLAYBACK TIME MARKER */