/*         prevents highlighting blocks       */
div {
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */}







/*  --- COLOUR PALETTE ---  */
:root 
{
--Active: rgb(150, 300, 150);	/*  ------Active text colour -  */
--TxtColour:  rgb(0, 150, 0);	/*  ----- TEXT COLOUR---------  */
}
/*  ----------------------  */





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

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

background-color: #333333;
}

a:link, a:visited {color: grey;}










p4	/* --- bottom right links ---- */
{
color:white;
font-weight:normal;
text-align:left;
font-size:9px;
padding:0px 0px 9px 0px;
letter-spacing:1px;
}




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









/* ------------------ OBSOLETE ANIMATION ----------------------- */
/* ----- NO LONGER BEING USED but might be useful to keep ------ */

.delayfadeOut 
{
opacity: 1;
animation: delayfadeOut 1s 3s forwards;
}
@keyframes delayfadeOut 
{
from { opacity: 1; }
to   { opacity: 0; }
}

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














/*  -----------------------------------------------------  */
/*  --------------------- MOBILE ------------------------  */
/*  -----------------------------------------------------  */
.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#mobile{display:none;position:fixed;top:calc(50% + 0px);}
#full{display:block}
@media screen and (max-width: 600px) {#mobile {display:block}}
@media screen and (max-width: 600px) {#full {display:none}}


#introImages
{}
#introImages img{width:1280px;left:-1280px; opacity:0.7;transition:1s;}

/*  ------------------- end mobile ----------------------  */
/*  -----------------------------------------------------  */









/*  -------------------------------------------------------------------  */
/*  --------------------------- LOGOs X3 ------------------------------  */
/*  -------------------------------------------------------------------  */
/*  - 1. logo_Top   	  small top of page common to both --------  */
/*  - 2. logo_Horizontal  Large horizontal (computer screen only) -  */
/*  ---- logoRatio        horizontal class to  keep proportions ---  */
/*  - 3. logo_mobile      Large logo for mobile  ------------------  */



#logo_Top
{
position: fixed; 
right: 40px; 
top:25px; 
width:130px;
height: auto;
opacity:0.0;
z-index:20;
transition: 0.3s;
visibily:visible
}



/*  ------ HORIZONTAL --------  */
#logo_Horizontal 
{
width: 40vw;
display: flex;
gap: 14.5%;
border:0px solid yellow;
}
@media screen and (max-width: 800px) 
{#logo_Horizontal  {top:0px;width: 100%;}}



.logoRatio	/* -- horizontal class --  */
{
position: absolute; 
left:calc(50% - 268px); 
top:calc(50% - 38px);
opacity: 0.25;
Width: 70%;
max-width: 685px;
display: flex;
border:0px solid red;
}
.logoRatio img{width:98%; height: auto}

@media screen and (max-width: 980px) 
{.logoRatio 
{
left:calc(50% - 27.5vw);
top:calc(50% - 4vw); 
}
}
/*  --------------------------  */



#logo_mobile
{
position: fixed;
left:16%;
width:68%;
z-index: -1
}


/*  ---------------------------- end logos ----------------------------  */
/*  -------------------------------------------------------------------  */






#hamburger
{
position:fixed;
top: 5px;
right: 1%;
color: white;
font-size:20px;
cursor:pointer;
z-index: 15;
Opacity:0.7;
}
#hamburger:hover {opacity:1.0;}
@media screen and (max-width: 600px) {#hamburger {font-size:40px;padding: 8px 20px;}}








.movie
{
position: fixed;
left: 50%;
top:50%;
width: 100vw;
height: 100vh;
object-fit: cover;
transform: translate(-50%, -50%);
opacity: 0.5;
z-index: -999;
animation: slideInLeft 0.3s;
}










#mute
{
position:absolute;
left:1%;
opacity:0.3;
z-index:20;
}
#mute:hover{opacity:1.0}
@media screen and (max-width: 600px) {#mute {visibility:hidden;}}






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

#MENU 
{
Height:0px;
width: 588px;
Position:fixed;
left:calc(50% - 297px);
overflow-x: hidden;
overflow-y: hidden;
list-style-type: none;
transition: 0.5s;
z-index: 100;
border:0px  solid yellow;

}
@media screen and (max-width: 600px) {#MENU {top: 60px;width:96%;left:2%;}}



#MENU li 
{
position:relative;
top:calc(100% - 44px);
float:left; 
width: 194px;
padding-top: 12px;
padding-bottom:12px;
border:0px  solid red;
}
@media screen and (max-width: 600px) {#MENU li  {top:0px;width: 100%;}}



#MENU li a 
{
font-size:20px;
letter-spacing:5px;
Font-weight:normal;
text-decoration: none;
color: white;
border:0px  solid green;
transition: 0.3s
}
@media screen and (max-width: 600px) {#MENU li a {color: var( --Active);font-size:25px;}}

#MENU li:hover:not(.active) {background-color:var(--TxtColour);};
#MENU li a.active {color: var( --Active);border:0px solid yellow;}


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






/* ------------------------------------------------- */
/* -------------------- FOOTER --------------------- */
/* ------------------------------------------------- */
#footer
{
display: block;
position: fixed;
left: 0px;
bottom: 0px;
width:100%;
height: calc(15%);
padding: 0px 1px;
overflow-x: hidden;
overflow-y: hidden;
 transition: 0.5s;
z-index:10;
border:0px  solid red;
background-color:var(--footerColour);
text-decoration: none;
}



.socialfixed{width:118px;border:0px solid red}
.socialfixed a
{
Position:relative;
Bottom: -160px;
Left:20px;
text-decoration: none;
object-fit:none;
padding:2px;
Opacity:0.7
}
.socialfixed a img{width:20px;}
.socialfixed a img:hover{opacity:0.5;}
@media screen and (max-width: 600px) {.socialfixed{display:none;}}




#footerRight
{
position:absolute;
bottom:calc(10% - 5px);
right:2%; 
width: 425px; 
float: right;
z-index:4;
border:0px  solid yellow;
}

#footerRight li {display: inline;} 
#footerRight li a { padding:5px;text-decoration: none;color: white;} 
#footerRight li a:hover {color: grey;}

@media screen and (max-width: 600px) {#footerRight {display:none}}



#shareIcons
{
position:relative;
top:80%;
Left:1%;
opacity: 0.6;
float: left;
z-index:3;
}
#shareIcons img{width: 20px;margin:3px;}
#shareIcons img:hover {opacity: 0.4;}
#shareIcons a{text-decoration:none;}

@media screen and (max-width: 600px) {#shareIcons{display:none}}


/* ----------------- end footer -------------------- */
/* ------------------------------------------------- */

















/* ------------------------------------------------- */
/* --------------- Playing Mode -------------------- */
/* ------------------------------------------------- */


#vidicons
{
display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
position:fixed;

bottom: 40px;
Margin-right:20px;
visibility:hidden;
z-index:10;
transition: 0.5s;
border:0px solid yellow;
}
#vidicons img {opacity: 0.6;}
#vidicons img:hover {opacity: 1;}



.btn 
{
display: flex;
align-items: right;
cursor: pointer;
}


.btnTxt 
{
position: absolute;
left: calc(50% - 55px);
transform: translateX(-50%);
margin-right: 5px;
background: #222;
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s;
}
.btn:hover .btnTxt {opacity: 1;visibility: visible;}





.playbutton
{
cursor: pointer;
position: fixed; 
left: calc(50% - 30px);
top: calc(50% - 30px);
border:0px solid yellow;
}
.playbutton img{width: 6.2vw;max-width:60px;transition: filter 0.3s ease;}
.playbutton img:hover {filter: brightness(1.3);}
@media screen and (max-width: 980px){.playbutton {left: calc(50% - 3.1vw);top:calc(50% - 3.1vw);}}
@media screen and (max-width: 600px){.playbutton {z-index:9;top: calc(75% + 0px);}}







.playbuttonSD		/* ---- MOBILE ---- */

{
Width:50%;
cursor: pointer;
position: fixed; 
left: calc(50% - 30px);
top: calc(50% - 30px);
}
.playbuttonSD img{transition: filter 0.3s ease;}
.playbuttonSD img:hover {filter: brightness(1.3);}
@media screen and (max-width: 600px) {.playbuttonSD {z-index:9;top: calc(75% + 0px);}}


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