/*  Fonts  */

@font-face {
  font-family: 'Josefin Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Josefin Slab'), local('JosefinSlab'), url(http://themes.googleusercontent.com/static/fonts/josefinslab/v4/46aYWdgz-1oFX11flmyEfXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}


/* General menu container Style */

.menu_container{
	position:absolute;
	top: 10vw ;
	bottom : 10vw ;
	left : 5vw ;
	width : 30vw;
        overflow-y : auto ;
    overflow-x : hidden ;
}


.menu_placeholder{
	position: absolute;
        width:98%;
	top:50%;
	height:50%;
        margin: auto;
        background: transparent ;
        overflow: visible;
        border: none;
}

.menu_content{
        position: absolute;
        width:100%;
        top:-70%;
        margin: auto;
        padding: 2vw 2vw 2vw 2vw;
}


/* Specific Li style*/

.menu_bmenu{
    padding: 0;
    margin: auto;
    position: relative;
    line-height:2.5vw;
}

.menu_bmenu_item{
        display: block;
	width : 99%;
	padding: 0vw 0vw;
	margin: 0vw;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    
        text-align: center;
	background: rgba(255,255,255,0.4);
	-webkit-transform: skew(-20deg);
	-moz-transform: skew(-20deg);
	-o-transform: skew(-20deg);
	-ms-transform: skew(-20deg);
	transform: skew(-20deg);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

.menu_bmenu_item a span{
        font-size: 1.5vw;
        text-overflow:ellipsis;
	width : 99%;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(89,22,20,0.3);
	color: #581514;
        font-weight: bolder ; 
        vertical-align: middle;
        
}

.menu_bmenu:hover div {
	background: rgba(88,22,22,0.2);
	-webkit-transform: skew(0deg);
	-moz-transform: skew(0deg);
	-o-transform: skew(0deg);
	-ms-transform: skew(0deg);
	transform: skew(0deg);
}

.menu_bmenu:hover a span {
	color: transparent;
	text-shadow: 0px 0px 10px #fff;
}

.menu_bmenu:hover .menu_bmenu_item:hover{
	background: transparent;
        color:#fff; 
        font-size: 2vw; 
        font-weight: bolder ; 
        text-shadow: 0px 0px 10px rgba(0,0,0,1);
}

.menu_bmenu_item:hover a span{
	text-shadow: 1px 1px 10px rgba(89,22,20,0.6);
	color: #fff;
}