body 
{
/*  -------MASTER FONT ---  */

 font-family: 
"Century Gothic",
"Apple Gothic",
"Helvetica Neue",/*  ---- Safari ---  */
"URW Gothic L",
"Avant Garde",
sans-serif;
/*  ----------------------  */

background-color: black;
}









p1
{
color:#F0F0F0;
font-weight:normal;
text-align:right;
font-size:12px;
line-height:100%;
padding:-30px 0px 0px 0px;
}






p2
{
color:white;
opacity:0.7;
text-align:left;
font-size:12px;
font-style: normal;
}





p3
{
color:grey;
text-align:left;
font-size:12px;
}

p4
{
color:white;
font-weight:normal;
font-size:9px;
padding:0px 0px 9px 0px;
letter-spacing:1px;
}

p5
{
Color:var(--Active);
font-weight:normal;
text-align:center;
font-size:15px;
line-height:100%;
}


p6
{
color:white;
Font-weight:bold;
text-align:center;
font-size:25px;
line-height: 1.8;}
}







p03
{
font-family: "Century Gothic","Apple Gothic",AppleGothic,"URW Gothic L","Avant Garde",Futura,sans-serif;
margin: 0px;
Color:white;
text-align:left;
font-weight:normal;
font-size:20px;
}


p04
{
font-family: "Century Gothic","Apple Gothic",AppleGothic,"URW Gothic L","Avant Garde",Futura,sans-serif;
Color:var(--Active);
text-align:left;
font-weight:normal;
font-size:14px;
padding:0px 0px 0px 0px;
letter-spacing:0px;

}

p05
{
font-family: "Century Gothic","Apple Gothic",AppleGothic,"URW Gothic L","Avant Garde",Futura,sans-serif;
color:var(--Active);

text-align:left;
font-weight:normal;
font-size:11px;

letter-spacing:0px;
}







h2
{
text-decoration: none;
color:grey;
font-weight:normal;
font-size:25px;
padding:0px 0px 0px 0px;
opacity:0.5;
text-align:center;
}












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





#subs{position:relative}











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

#spy
{
Position:relative;
top:-25px;
Left: 360px;
width: 20px;
opacity:1.0;
background-color:rgb(60,100, 65);
padding:8px 9px;
opacity:1.0;
Z-index:100;
}
#spy:hover {opacity:0.7;}


.searchbox input[type=search] 
{border: 1px solid #ccc;}
.searchbox{position:fixed; top:20px;left: 350px;visibility:hidden;}

.searchbox input[type=search] 
{
  width:255px;
  height:34px;
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.searchbox .search-container button 
{
  float: left;
  height:34px;
  padding: 8px 9px;
  margin-top: 8px;
  margin-right: 1px;
  background: #ddd;
  border: none;
  cursor: pointer;
Z-index:99;
}
.searchbox .search-container button img{width:18px}
.searchbox .search-container {float: left; padding-left: 8px; opacity:0.5;}
.searchbox .search-container button:hover {background: #ccc;}


/*  ------------- mobile search bar-------------  */
@media screen and (max-width: 600px) {

#searchB{visibility:visible;}

.topBar{height:127px}

.searchbox {top:65px; left:0px; width: 100%}
.searchbox .search-container 
{float: none; padding-right: 0px;top: 40px}
.searchbox a, .searchbox input[type=search] 
{
float: none;
display: block;
text-align: left;
width: calc(98% - 54px);
height:54px;
margin:   0 2% 0 2%;
padding: 14px;
}

.searchbox .search-container button{width:54px; height:54px; margin:0px;}
.searchbox .search-container button img{width:24px}
.searchbox a {left:30px;}
#spy{display:none}
}
/*  ------------------------------------------  */

/*  -------------------------- end search bar ----------------------  */
/*  ----------------------------------------------------------------  */











#movieIndex 
{
position: fixed; 
left:317px;
top:50px;
width:333px;
height: 380px;

list-style-type: none;
visibility: hidden; 
overflow:hidden;
z-index: 9999;
border:0px solid yellow;
}
@media screen and (max-width: 600px) {#movieIndex {left: 0px;top:105px;width:96%;}}


#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: 17
px;
color: white;
display: block
}
#movieIndex li a.header {background-color: #e2e2e2;cursor: default;}
#movieIndex li a:hover:not(.header) {background-color: grey;}





/*  ------------- logo ------------  */
.mattlogo
{position:fixed; right:45px; top: 10px;transition:0.5s;}
@media screen and (max-width: 600px) {.mattlogo
{Width:120px;opacity:0.1;top:10px;Right:35px;}}
/*  -------------------------------  */








/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}


.btn.active {
  background-color: #666;
  color: white;
}
















#screen
{
margin: 0;
position: relative;
top:-110px;
left:50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border:0px solid green;
Margin-top:100px;
background-color: black;
width: calc(100% - 10px);
overflow: hidden;
}
@media screen and (max-width: 600px) {#screen{top:20px}}



#rack
{
position:relative;
Width:900px;
border:0px solid red;
Opacity:0.7;

}

#rack img{float:left}
#screen img{position:relative; top: 0px; width:33.33%;transition:1s;}








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


#titleinfo
{position:fixed; top: 55%; width: 100%;min- width:290px; border:0px solid yellow;}

#TITLE
{position:relative; top: -10px;color:var( --titleColour);opacity: 0.8;z-index:4;}

#credit
{position:relative; top: -30px;}

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




#mutebtn{position:relative;left:calc(100% - 40px);top:50px; opacity:0.3;z-index:20;}
#mutebtn:hover{opacity:1.0}
@media screen and (max-width: 600px)
 {#mutebtn {visibility:hidden;}}

















/*  ----------------------------------------------------  */	  
/*  ----------------------------------------------------  */	  
/*  ----------------------------------------------------  */	  
/*  ----------------------------------------------------  */	  
/*  ------------------ GRID AND CLONES -----------------  */	  
/*  ----------------------------------------------------  */	  
/*  ----------------------------------------------------  */	  
/*  ----------------------------------------------------  */	  
/*  ----------------------------------------------------  */



#imgGrid
{

width:100%;
margin-top:-210px;
border:1px solid blue;
}
@media screen and (max-width: 600px) {#imgGrid{margin-top:-110px}}





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

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





.title
{
overflow:hidden;


color: rgb(00 190 00);
font-weight:bold;
Font-size:25px;
padding: 0px 0px 10px 20px;
Margin-bottom: -10px;
border:0px solid red;
}


#title1
{position:relative;margin-top:- 10px;}
#title2
{margin:0px 0px 0px 20px;}




.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;}



/*  ------------------------------------  */
/*  ----------- CLONE ELEMENTS----------  */
/*  ------------------------------------  */



.movieBtn 
{
position: relative;
width: calc(25% - 15px);
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(9%); -3%;opacity: 1; overflow: hidden; z-index:9997;}
.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: 20px;
width: 20px;
}


.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: white;
  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:green;
  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: green;
  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; }



p7
{
color:rgb(100 200 100);
font-weight:normal;
Text-align:left;
Font-size:1vw;
padding: 0px 0px 10px 10px; 
Float:left;
}



.box
{
display: none;
Width:calc(25% - 10px);
Float:left;
Margin:2px;
border:1px solid black;
Background-color:rgb(40 50 40);

}

.seriesCard
{
}

.seriesThumb
{
Width:calc(100% - 20px);

Margin:10px 12px 10px 8px;
Border:2px solid rgb(150 170 150);
}
.seriesThumb:hover {opacity:0.7;}





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

@media screen and (max-width: 800px) 
{
.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;}
}










/*  ---------------------- end clone elements ----------------------  */
/*  ----------------------------------------------------------------  */






/*  ---------------------- MODAL ----------------------  */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  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.4); /* Black w/ opacity */
Z-index:999999;
}

/* Modal Content */
.modal-content {position:fixed;top:50%;left:50%;
  background-color: rgb(80 85 80);
  margin: auto;
  padding: 5px;
  border: 1px solid #888;
  width: 68%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

/* The Close Button */
.close {
  Color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
/*  -------------------- end modal ----------------  */








#morepage
{
}

#nextpage{width:calc(100% - 30px)}


#belowContent{display:none;position:absolute; width:100%;}