body{
background: #8da567 url( .././images/top_navy4.png) repeat-x;
cursor: url('.././images/bee.cur'), auto;
	 height:100%;
	width:100%;

}

html{
  height:100%;
}

a {
cursor: url('.././images/bee.cur'), auto;
}

html{
  min-height:100%;
}

.container_menu {
 	margin: 0 auto  ;
        width: 1100px;
        height:480px;
       /*  border: solid #000 2px;  */  
        display: block;
        align:top;
	}

.container{
     align:top;
     margin: -150px auto 0px auto ;
     width:325px;
	padding:0 0 0 20px;
 /** border: solid #000 2px; color: black;  **/

}
.container_inside {
               margin: 0px auto 0px auto ;
               width:220px;
            /**border: solid #000 3px; color: red;  **/
      }

@font-face{
    font-family: 'MyWebFont';
    src: url(.././images/fonts/main_font.ttf) format('truetype');
	 
    }
 
@font-face{
    font-family: 'backtoblack';
    src: url(.././images/fonts/backtoblack.ttf) format('truetype');
    }

.index {
	opacity:0.8;
	width:195px;
	position: absolute ; 
	-webkit-transition: all .4s ease-in-out;
  	-moz-transition: all .4s ease-in-out;
  	-o-transition: all .4s ease-in-out;
  	transition: all .4s ease-in-out;
	}
.index:hover {
	opacity:1;
	width:197px;
	}


.hex {
        fill:#FFFF1A ;
        stroke:#804000;
        stroke-width:5;
        opacity:0.8;
        font-size:19px ;
        display: inline-block;
    	-webkit-transition: all .5s ease-in-out;
  	-moz-transition: all .5s ease-in-out;
  	-o-transition: all .5s ease-in-out;
  	transition: all .5s ease-in-out;
       }

.hex:hover {
        fill:#FEEB01;
         opacity: 1;
         stroke-width:7;
         font-size:22px ;
            }
.hex:active  {
               transform: rotateY(-180deg);
                transition: .3s;
                }

text {
            letter-spacing:1.5px;
            stroke-width:2;
            color :black;
                  }
#shade	{box-shadow: 5px 5px 18px #222;}