/*  ----------------------------------------------------------------  */
/*  --------------------------- GENERAL ----------------------------  */
/*  ----------------------------------------------------------------  */


html {scroll-behavior: smooth;}

h1
{
color:var(--colour1);
font-size: clamp(30px, 2.5vw, 48px);
margin-bottom: 0;
}


p1
{
Font-size:3vw;
Position:relative:
Line-height; 75%;
color:var(--colour1);
}


p7
{
Text-align:center;
color:var(--colour1);
font-weight:normal;
Text-align:left;
Font-size:1.5vw;
padding: 0px 0px 10px 10px; 
Float:left;
}





.center  
{
position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
margin:auto;
}





.fade
{
border:0px solid yellow;

opacity:0.0;
-webkit-animation: fade 1s; /*Safari and Chrome*/
-webkit-animation-delay: 0.5s;
-webkit-animation-iteration-count: 1;  /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;  /* Safari and Chrome */

animation: fade 1s;
animation-delay: 0.5s;
animation-iteration-count: 1;  
animation-fill-mode: forwards;  
}
@-webkit-keyframes fade {from {opacity:0.0;} to {opacity:1.0;}}
@keyframes fade {from {opacity:0.0;} to {opacity:1.0;}}



.DelayfadeOut
{
opacity: 1;
animation: dissolve 3s;
animation-delay: 8s;
animation-fill-mode: forwards;
}
@keyframes dissolve 
{from {opacity: 1;}to{opacity:0;}}

















/*  ----------------------------------------------------------------  */
/*  ------------------------- SEARCH BAR ---------------------------  */
/*  ----------------------------------------------------------------  */

.searchbox
{
position:fixed; 
left: 50px;
top: 18px;
height: 50px;
width: 0px;
transition:0.5s;
Z-index:21;
border: 0px solid red;
}


#spyGlass
{

width: 20px;
padding:8px 9px;
z-index:22;
};
#spyGlass:hover {background-color:var(--colour1);}


#searchContainer 
{
display:none;

position:relative;
top: -37px;
width:300px;
Height:0px;
float: left; 
transition:0.5s;
border: 0px solid yellow;
}


#searchContainer  button 
{
  float: left;
  height:34px;
  padding: 8px 9px;
  background: #ddd;
  border: none;
opacity:0.5;
  cursor: pointer;
}
#searchContainer  button img{width:18px}
#searchContainer  button:hover {background: #ccc;}


.searchbox input[type=search] 
{
  width:263px;
  height:34px;
  padding: 6px;
  margin-left:1px;  
  font-size: 17px;
  
  border: 1px solid #ccc;
}


#movieIndex 
{
display: flex;
flex-wrap: wrap;
position: relative; 
left:0px;
top:-17px;
Width:260px;
margin-bottom: -10px;

list-style-type: none;
background-color: #444444;
visibility: hidden; 
overflow:hidden;
z-index: 30;
border:0px solid yellow;
}


#movieIndex li a 
{
font-family: "Century Gothic","Apple Gothic",AppleGothic,"URW Gothic L","AvantGarde",Futura,sans-serif;
margin-top: -1px; /* Prevent double borders */
background-color: #444444;
padding: 10px;
text-decoration: none;
font-size: 17px;
color: white;
display: block
}
#movieIndex li a.header {background-color: #e2e2e2;cursor: default;}
#movieIndex li a:hover:not(.header) {background-color: grey;}



/* --------------------------  */	  
/* --- MOBILE SEARCH BAR ---  */	  
/* --------------------------  */
@media screen and (max-width: 600px) 
{
.searchbox{top: 80px;left: 7px; width: calc(100% - 68px);}
#spyGlass{visibility:hidden}
#searchContainer {position:absolute; top:0px; display:block;width: 75%;}
#searchContainer button { height:39px; width:38px;}
#searchContainer button img{width: 20px}
.searchbox input[type=search] {position:relative; top: -39px; opacity:0.5;margin-left: 42px;height: 40px; width:calc(133.333% - 42px)}
#movieIndex {top:-60px;width: calc(100% - 40px)}
}
/*  -------------------------- end search bar ----------------------  */
/*  ----------------------------------------------------------------  */





















/*  ----------------------------------------------------------------  */
/*  ---------------------------- MENU ------------------------------  */
/*  ----------------------------------------------------------------  */

#MENU 
{

background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.5));
transition: 0.5s;
height:20px;
Width:100%;
Position:fixed;
left:0px;
top: 0px;

Padding: 50px 0px 0px 0px;
list-style-type: none;
transition: 0.5s;
z-index: 20;
border:0px  solid yellow;
}

#MENU  li 
{
position:relative;
top:calc(100% - 130px);
left: 150px;
float:left; 
Padding: 3px 0 4px 0;
margin:80px 3px;
border:0px  solid red;
cursor:pointer;
}

#MENU  li a 
{
font-size:8px;
padding:5px;
color:var(--colour1);

letter-spacing:5px;
font-weight:normal;
width:100%;
height:auto;
text-decoration: none;

padding: 8px 15px 10px 15px;
background: var(--colour3);
border:0px  solid green;
transition: 0.3s
}

#MENU li a:hover:not(.active) {color: #f1f1f1;background-color:var(--colour1);}
#MENU li a.active {color:white;}
#MENU li a.active:hover{cursor:default}


/* --------------------------  */	  
/* ------ MOBILE MENU ------  */	  
/* --------------------------  */

@media screen and (max-width: 600px) 
{
#MENU{height: 80px;background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1));}
#MENU li{display:none}
}

/* ---------------------------  */


/*  ----------------------------- end menu -------------------------  */
/*  ----------------------------------------------------------------  */















/*  ----------------------------------------------------------------  */
/*  -------------------------- AUX MENU ----------------------------  */
/*  ----------------------------------------------------------------  */

.rowBtn
{color:rgb(300 150 00);letter-spacing:1px;font-size:12px;}


/*  ----------- aux menu -----------  */
#auxMenu
{
float:left;
min-width:200px;
position: relative;
left: 160px;
top:-22px;
overflow: auto;
border:0px solid red;
}
#auxMenu:hover{}
#auxMenu:hover .more-content {display: block;}

#auxMenu a
{
font-size:8px;
Padding:10px 20px;
color:var(--colour1);
letter-spacing:5px;
Border:1px solid rgb(40 40 40);
}
#auxMenu a:hover:not(.active) {color: #f1f1f1;background-color:var(--colour1);}
#auxMenu a.active {color:grey;}



.more 
{
width:40px;
background-color: none;
cursor: pointer;
z-index:10;
}

.more-content 
{
background-color: rgb(50 50 50);

z-index: 10;
display: none;
border:1px solid var(--colour4);
Overflow:scroll;

}

.more-content a 
{

color:var(--colour1);
padding: 12px 16px;
text-decoration: none;
display: block;
z-index:10;
}
.more-content a:hover:not(.active) {background-color: rgb(70 70 70); color: white;cursor:pointer;}
.more-content a.active {color:rgb(70, 100, 70);cursor:default}

#submenu a
{
font-size:15px;

letter-spacing:0px;
Border:1px solid rgb(40 40 40);
}

#modebtns a
{
display:none;
letter-spacing:1px; 
font-size:10px;
color:white;
opacity: 0.7;
} 

/* --------------------------  */	  
/* ---- MOBILE AUX MENU -----  */	  
/* --------------------------  */

@media screen and (max-width: 630px) 
{
	#auxMenu
	{
Left: 10px;
Top: 20px;		
	float: right; 
	
	height: 40px; 
	z-index: 99999; 
	overscroll-behavior-block: contain; 
	}
#auxMenu:hover{height:calc(100dvh - 85px);justify-content: center;}
#auxMenu a{font-size:16px; padding:30px 20px;}
#arrowMenu{padding-left:75px;}
.more {width:65px; position: fixed; top:90px; right: 0px;z-index: 30;}
.more-content {margin-top: 50px; width:90%}

}


/*  ---- responsive --------
-------menu switching ---  */

/*- Large Screen -*/
#auxbtns {display:none} 
#modebtns {display:none}
.homebtn {display:none}

/*- Smaller Screen-*/
@media screen and (max-width: 1050px) 
{
.homebtn {display:block}
#menu3 {display:none}
#menu4 {display:none}
#submenu {display:none}
#auxbtns {display:block}
#aux0 {display:none}
#aux1 {display:none}
#aux2 {display:none}
#aux3 {display:block}
#aux4 {display:block}
}

/*- iPad Size-*/
@media screen and (max-width: 800px) 
{
#menu2 {display:none}
#aux2 {display:block}
}

/*- mobile phone -*/
@media screen and (max-width: 630px) 
{
#roleMenu {display:none}
#menu0 {display:none}
#menu1 {display:none}
#menu2 {display:none}
#aux0 {display:block}
#aux1 {display:block}
#aux2 {display:block}
#modebtns {display:block}
}

/*  ------------------------- end  aux menu ------------------------  */
/*  ----------------------------------------------------------------  */






























/*  ----------- reel select -----------  */
#roleMenu
{
position: fixed;
top:28px;
left:90px;
z-index:100;
border:0px solid red;
}

.rolebtn 
{
font-size:12px;
letter-spacing:1px;
color:white;
Opacity: 0.4;
Padding:10px;
font-weight:bold;
width: 20px;
background-color: none;
cursor: pointer;
Z-index:10;
border:0px solid red;
}

.roles 
{font-size:12px; padding:2px; width:80px; margin:5px 5px; border:none;}

#roleMenu:hover{width: 150px;}
#roleMenu:hover .more-content {display: block;}

/*  ----------- end role menu -----------  */








/*  ------------- logo ------------  */
#logo
{
position:fixed; 
right: 60px; 
top:20px; 
width:200px;
height: auto; 
opacity:0.2; 
z-index:20;
transition:0.5s;
border:0px solid red;
}
@media screen and (max-width: 600px) 
{
#logo
{width:190px;opacity:1;right:50px;top:10px;}
}

/*  -------------------------------  */



.homebtn img
{
position: fixed; 
top:22px;
right:30px;
Width:20px;
opacity:0.2;
}
.homebtn img:hover {opacity:1.0;}
@media screen and (max-width: 630px) {.homebtn img {top:20px; left:20px; width:15px}}



#screenWrapper  /* to stop scrolling in portrait mode  */
{
width:100%;
overflow-x:hidden;
position:relative;
}







#screen
{
margin: 0;
position: relative;
top:-22px;
left:50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border:0px solid green;
overflow: hidden;
aspect-ratio:16 / 9;
}
#screen img{position:relative; top: 0px; width:33.33%;float:left;transition:1s;}

/* --- MOBILE SCRREN ---  */	  
@media screen and (max-width: 600px) 
{
#screen{margin-top: 50px;}
}
/* --------------------  */	  


#rack
{
Position:fixed;
width:309%;
left: -100%;
border:0px solid red;
Opacity:0.5;
Overflow:hidden;
}







/*  --------------- 1.2. TITLE & INFO ------------------  */


#clusterBox
{
margin: 0;
position: relative;

Width:70%;
Max-width: 420px;
height: 280px;
left:7%;
Border: 0px solid yellow;
Z-index: 2;
}



#infoCluster
{
Display:block;
Position:relative;
Left: 0px;
bottom: 0px;
width:100%; 
Max-width: 420px;
border: 0px solid red;
Z-index: 2;
}

#TITLE
{color:var( --titleColour);opacity: 0.8;z-index:4; margin-top: 0;}

#INFO
{
Position:relative;
opacity:0.7;
color:white; 
font-size: clamp(14px, 1vw, 20px);
margin-top: 0;
border:0px solid blue;
}





.switch
{
margin-top: 20px;
list-style-type: none;
transition: 0.5s;
z-index: 100;
border:0px  solid yellow;
}


.switch li
{
position:relative;
float:left; 
margin:0px 10px 0px 0px;
}


.switch li p
{
width: 80px; 
background-color:white; 
border-radius: 4px;
z-index: 999;
cursor: pointer;
color: black; 
font-weight:normal;
text-align:center;
font-size:20px;
padding:5px;
letter-spacing:3px;
}
.switch li:hover{opacity:0.7}




#switch2{background-color:rgb(60 60 60); color:white}

	  
/*  -----------------------------------------------  */










#mutebtn
{
position:relative;
top:-80px;
left:calc(100% - 50px);
width:22px;
opacity:0.3;
Z-index:2;
}
#mutebtn:hover{opacity:1.0}

#topBtn {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 30px;
  z-index: 9999;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #333;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#topBtn:hover {
  background-color: #555;
}






#movie
{width:100%}









/*  ----------------------------------------------------  */	  
/*  ----------------------------------------------------  */	  
/*  ----------------------------------------------------  */	  
/*  ----------------------------------------------------  */	  
/*  ------------------ GRID AND CARDS ------------------  */	  
/*  ----------------------------------------------------  */	  
/*  ----------------------------------------------------  */	  
/*  ----------------------------------------------------  */	  
/*  ----------------------------------------------------  */

#imgGrid
{
Margin-top:-390px;
width:100%;
Border:0px solid blue;
Float:left;
}





.titleDivide
{
Position:relative;
Float:left;
width: 100%;
Height: 50px;
border:0px solid red;
Display:none;
}

#arrowD{margin-left:10px;width:15px;}
	  





.title
{
position:relative; top: 20px;
overflow:hidden;
color:var(--colour1);
font-weight:bold;
Font-size:18px;
border:0px solid red;
Padding:0px 10px 5px 10px;
}




#titleIcon 
{
display:none;
vertical-align: -10px;  /* move down */
margin-right: 6px;
}


.moreCat
{
float:right;
Padding: 10px 30px;
font-size: 10px;
color:var(--colour1);
text-decoration: none;
border:0px  solid yellow;
}
.moreCat:visited {color:rgb(00 190 00);}
.moreCat:hover {cursor: pointer}


.catBtn
{
Position:relative;

left:calc(100% - 140px);
Top:10px;
font-size: 10px;
color:rgb(00 190 00);
text-decoration: none;
border:0px  solid yellow;

}
.catBtn:visited {color:rgb(00 190 00);}
.catBtn:hover {color:white;}



/*  ------------------------------------  */
/*  ------- MOVIE CARD ELEMENTS --------  */
/*  ------------------------------------  */

.movieBtn 
{

position: relative;
width: calc(25% - 11px);
margin:5px;
Display:inline;
Float:left;
  opacity: 1;    
  transition: .5s ease;
  border:0px solid red;
}
.movieBtn:hover{transform-origin: center;
  transform: scale(1.5) translateX(5%);opacity: 1; overflow: hidden; z-index:10;}
.movieBtn:hover .ibox {opacity: 1;}.poster {opacity: 1;} 
.movieBtn:hover .poster {opacity: 1;} 
.movieBtn:hover .arrow {visibility: visible;} 



.poster 
{
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.8;
  z-index: 5;
}


.playArrow
{

position:absolute;
top:10px;
Left: 0px;
width: 50px;
}


.ibox {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 30%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgb(40, 50, 40, 0.7);
}



.titleSmall
{
  position: absolute;
  top: 50%;
  left: 50%;
  color:var(--colour2);
  font-size: 1vw;
  letter-spacing:2px;
  text-decoration:none;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 0;
}


.titleEnlarge
{
  position: absolute;
  top:-65%;
  left: 50%;
  color: white;
  font-size:1.2vw;
  background-color:var(--colour1);
  padding: 3px 10px;
  letter-spacing:2px;
  text-align: center;
  text-decoration:none;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}





.infoText
{
  position:absolute;
  top: 5px;
  left: 50px;
  width: 55%;
  font-size:0.7vw;
  font-style:normal;
  color: white;
  text-align: left; 
  border:0px solid red;
}







.seriesText {
  position: absolute;
  bottom: 10px;
  right: 2.3vw;
  width: 6vw;

  font-size: 0.7vw;
  text-align: center;
  color:var(--colour1);
  background-color: rgb(20 30 20);
  padding: 2px 10px;
  border-radius: 18px;
  border: 1px solid white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.arrow {
 
  position: absolute; 
  bottom: 10px;
  right: 10px;
  transition: opacity 0.3s ease;
  visibility :hidden;
  z-index: 99999;
}
.arrow:hover{opacity:0.3}
.arrow img {width: 1.3vw;}


.seriesMore .arrow:hover ~ .seriesText {opacity: 1;}






.icons
{
position:absolute; 
top:5px;
right:10px;
Float:right;
z-index:9999;
}
.icons img{width: 1.2vw; }





/*  ---- Double column version ----  */

@media screen and (max-width: 800px) 
{
#imgGrid
{
margin-top:-390px;}
.titleSmall{font-size: 2.5vw;}
.titleEnlarge{font-size: 3vw;}
.seriesText {
  position: absolute;
  bottom: 10px;
  right: 6.5vw;
  width: 20vw;
font-size: 2vw;}
.unit a {width: calc(50% - 12px);}
.movieBtn {width: calc(50% - 15px);}
.movieBtn:hover{
  transform: scale(1.2)}
.arrow{right: 20px}
.arrow img {width: 3vw;}
.infoText{left: 30px;top:0px;width:80%;Font-size: 2vw;}
.icons{display:none;}
.playArrow{display:none;}
p7{Font-size:2.5vw; padding:3px 0px 5px 5px;}
.box{width:calc(50% - 7px)}
}
/*  -------------------------------  */




@media screen and (max-width: 1024px) 
{
#iconAW{display:none;}
.arrow img {position:relative; left: 15px;top: 5px;width: 20px}

.seriesText {right: 25px}
}


/*  ----------------------  end Movie card grid ----------------------  */
/*  ------------------------------------------------------------------  */
/*  ------------------------------------------------------------------  */
/*  ------------------------------------------------------------------  */







##page-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


#page-wrapper::after {
    content: "";
    display: block;
    clear: both;
}








/*  ----------------------------------------------------------------  */
/*  --------------------------- FOOTER -----------------------------  */
/*  ----------------------------------------------------------------  */


#footer
{
Position: relative;
top: 5px;
clear: both;
width:100%;
Height:200px
padding: 20px;
background-color:var(--colour4);
Overflow:hidden;
}




.socialMedia{width:200px; margin:20px;}
.socialMedia a
{
  text-decoration: none;
  object-fit:none;
  padding:5px;
  Z-index:20; 
}
.socialMedia a img{width:25px;}
.socialMedia a img:hover{opacity:0.5;}




#footerlist
{
padding:15px 20px 20px 0px;
margin:auto;
width: 500px;
Margin-top: 100px;
border:0px solid red;
}

spacer{color:white;font-size:9px;}

#footerlist a 
{
font-size:9px; 
letter-spacing:1px; 
padding:5px; 
text-decoration: none; 
color: white; 
border:0px solid yellow;
}
#footerlist a:hover {color: grey; text-align: center;}



/* --------------------------  */	  
/* ----- MOBILE FOOTER ------  */	  
/* --------------------------  */

@media screen and (max-width: 600px) 
{
	#footerlist 
	{
	position:relative;
	bottom: 20px;
	align:center;
	padding:30px 0px 20px 0px; 
	
	opacity: 0.4; 
	width:40%; 
	margin:auto; 
	text-align:center;
	}

	#footerlist a 
	{
	display: block; 
	padding:5px 0;
	font-size:3vw;
	letter-spacing: 2px;
	}
	spacer {visibility:hidden;}
}
/*  -------------------------- end footer --------------------------  */
/*  ----------------------------------------------------------------  */









#backArrow
{
position:fixed; 
left: 42px; 
top: 50px; 
z-index:9999;
transition: 0.3s;
}
#backArrow:hover{opacity:0.7;}






#black
{
display:none;
position:fixed;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
Height:100%;
Width:100%;
transition: 0.3s;
Background:black;
Z-index;1;
}
.hideBlack{opacity:0}

.dissolve
{
opacity: 1;
animation: dissolve 2s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
@keyframes dissolve 
{from {opacity: 1;}to{opacity:0;}}






/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  --------------------------------- MODAL -------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */

.modal 
{
display: none;
position: fixed; 
left:0px;
top:0px;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
Z-index:30;
overscroll-behavior-block: contain;
}

.modal-content 
{
background-color: black;
position:absolute;
top:30px;
left:50%;
padding: 10px;
width: 40%;
min-width: 500px;
color:white;
transform: translate(-50%, 0%);
z-index: 20;
}




#modalImg{opacity: 0.5;}
.imgWrapper 
{
position: relative;
width: 100%;
z-index:0;
}

.playModal 
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
cursor: pointer;
z-index:2;
}
.playModal:hover {opacity: 0.7;}




.close 
{
Position:absolute;
top:0px;
right:10px;
color: #aaaaaa; 
float: right;
font-size: 28px;
font-weight: bold;
z-index: 20;
}
.close:hover,
.close:focus {color: #000;text-decoration: none;cursor: pointer;}



.modalIcons
{
position:fixed;
left:50px;
top:20px;
height:45px;
border:0px solid yellow;
}
.modalIcons img{width:30px; padding:10px;}



#modalTitle
{
position:fixed;
top:30px;
left: 60px;
color:var(--colour1);
font-weight:bold;
font-size: 40px;
}



.playText
{top:-100px;left: 45px;}




#modalInfo
{
color:white;
font-size: 20px;
margin:0px 20px;
}


#seriesTitle
{
display:none;
margin: -105px 20px 20px 18px;
color:var(--colour1);
Font-size: 20px;
}

moreSeries
{
display:block;
width:100%;
}

.mre{margin-left: 8px;}

.flexBox 
{
position:relative;
top: -50px;
display: flex; 
width:100%;
justify-content: left;
border:0px solid yellow;
}

.box
{
display:flex;
align-items:center;
gap:10px;
width:calc(100% - 10px);
margin:4px 0;
padding:6px;
border:1px solid black;
background-color:rgb(40 40 40);
opacity: 0.8;
}
.box:hover {opacity:1.0;cursor:pointer}

.seriesThumb
{
Width:200px;
Float:left;
Margin:8px 12px 10px 8px;
Border:2px solid rgb(150 170 150);
}





/*  ------- MOBILE MODAL -----------  */
@media screen and (max-width: 600px) 
{
.playText{left:10px}
#modalInfo{font-size: 15px;}
#seriesTitle{font-size: 15px;}
.modal-content {width:80%; min-width: 200px;left:10px; transform: translate(0%, 0%);}
#modalTitle{left:23px;font-size: 8vw}
.modalIcons{position: fixed; left:10px; top:15px;}
.modalIcons img{width:30px; padding: 0px 0px 0px 10px;}
#modalLogo{display:none}
.seriesThumb{width:40%}
.mre{font-size: 10px}
}
/*  --------------------------------  */

/*  ------------------------------ end modal ------------------------------  */
/*  -----------------------------------------------------------------------  */