@font-face {
   font-family: MoonFlower;
   src: url(fonts/MoonFlower.ttf);
}

 
/* this removes the scroll bars START  */
html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
    display: none;  
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background:black;
}
/* this removes the scroll bars END  */

body { overflow:hidden; background-color: black;
    /* font-family: "Tw Cen MT", Tw Cen MT, sans-serif;  */ 
    font-family: MoonFlower;
}
p {font-family: MoonFlower;}

.fullscreen-bg__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
#menubutton { background-color: darkgray; width:50px; height:50px; position:fixed; top:0px; left:0px;}



.foot {

}

.loadingscreen {
    background-image: url("images/loading2.jpg");background-size:100% 100%;  background-repeat: no-repeat;
    height:100%;
    width:100%;
    position:fixed;
    z-index: 19;
    top:0px; left:0px;
}

.treeinfopanel {
    border-top: 1px solid #999999;
    position:fixed;
    left:31%;
    width: 69%;
    z-index: 10;
   
      height: 100%;
    font-size:35px;
    color: white;
    background: #FFF;

text-align:center;  text-align:-moz-center; 
   align:center;
   
    

    border-top-left-radius:25%;
    border-top-right-radius:25%; 
    bottom: -100%;
    background-image: url("images/fence1.gif"); background-size: cover;
    overflow:scroll;
}

.treeimagepanel {
    border-top: 1px solid #999999;
    position:fixed;
    left:31%;
    width: 69%;
    z-index: 10;
   
      height: 100%;
    font-size:25px;
    color: white;
    background: #FFF;
   

text-align:center;  text-align:-moz-center; 
   align:center;
   
    

    border-top-left-radius:25%;
    border-top-right-radius:25%; 
    bottom: -100%;
 background-color: black; background-size: cover;
    overflow:scroll;
}

#treeinfopanel {

}

.emailpanel {
    border-top: 1px solid #999999;
    position:fixed;
    left:31%;
    width: 69%;
    z-index: 10;  
    
    height: 100%;
    font-size:30px;
    color: black;
    background: #FFF;text-align:center;  text-align:-moz-center; 
   align:center;

    border-top-left-radius:25%;
    border-top-right-radius:25%; 
    bottom: -100%;
    background-image: url("images/something3.gif"); background-size: cover;
    overflow:scroll;
}
#headerforemailpanel {
    outline:none;  background-color: transparent; color:white; border:none;
}
.enterscreen {
    background-color: black;
    border-top: 1px solid #999999;
    position:fixed;
    width: 100%;
    z-index: 20;
    text-align:center;
    height: 100%;
    font-size:18px;
    color: #000;
    background: #FFF;
   
    justify-content: center;  
    border-top-left-radius:25px;
    border-top-right-radius:25px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    bottom: -100%;
    background-image: url("video/videoframe.jpg"); background-size: cover;
}
.aboutscreen {
    border-top: 1px solid #999999;
    position:fixed;
    width: 100%;
    z-index: 21;
    text-align:center;
    height: 100%;
    font-size:25px;
    color: #FFF;
    background: #000;
    
    justify-content: center; 
    border-top-left-radius:25px;
    border-top-right-radius:25px;
    right: 0;
    left: 0;
    margin-right: 0px;
    margin-left: 0px;
    bottom: -100%;
    color:white;
    background-image: url("images/backabout2.gif"); background-size: cover; /* background image for about page! can be gif*/
    background-color: rgba(0,0,0,0.12);
    overflow: scroll;
}

.slide-up
{
    bottom: 0px !important; 
}

.slide-down
{
    bottom: -100% !important;
}

#buttonmenu {
  position: fixed;
 z-index: 10000; overflow:
}

#aboutcontenttext {      text-align:center;     width:90%;     padding:6%;     margin-right: 10%;
    margin-left: 0;}
/* #aboutcontentvideo {     float:right;     width:40%;     padding:3%; } */



@media all and (max-width: 767px) {
    body { background-color: black;}

    .menu {  min-width: 100%; overflow-x:hidden; padding:1%;}
    .menu li { width: 89%; }
    .treeinfopanel {         position:fixed;     left:0%;     min-width: 100%; }
    .treeimagepanel {         position:fixed;     left:0%;     min-width: 100%; }
    .emailpanel {         position:fixed;     left:0%;     min-width: 100%; }
    #menutogglebutton {min-width: 100%;}
    #aboutcontenttext { float:none; width: 94%;
        padding: 3%;     }

    #aboutcontentvideo {   float:none;       width: 94%;
        padding: 3%;     }
}

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}
 
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}
 
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}
 
.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}












.menu {overflow:scroll; height:100vh; width:30%;position:fixed;z-index:10; bottom: -100%;background-color : rgba(0, 0, 0, 0.0);}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu li {
    padding: 5px;
    margin-bottom: 7px;
    background-color : rgba(0, 0, 0, 0.0);
     background-image:url("images/menu1.png");  background-size:100% 100%;
    /* background-color : rgba(0, 0, 0, 0.5); border-style: solid;border-color: white;border-width: 5px; */
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.0), 0 1px 2px rgba(0,0,0,0.0);
    text-align: center;
    font-size: 24px;
    
}

.menu li:hover {     background-color: #999999; }
.menu li.active { background-color: darkgray; color:white; }
.menu li:visited { background-color: yellow;}

#menutogglebutton {
       list-style-type: none;
     
    background-color :black;
    color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    text-align: center;
    font-size: 20px;
    position: fixed;
    bottom: 0%; left: 0;
    width:30%;
         padding: 8px;
    margin-bottom: 7px;
    z-index: 12;
}

#menutogglebutton li:hover {  background-color: darkgray; }
.entermenubutton { color:lightgray; text-shadow: 2px 2px 0px black;}
.entermenubutton:hover { color: darkgray;}
.entermenubutton:active { text-shadow: -1px -1px 11px lightgray;}

.closebutton:hover {opacity: 0.5; }