#mainsite, #block-mainnav-mobile, .fxmenu-touch { transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;  }
body.showmenu #wrapper, body.hidemenu #wrapper {position:fixed; top:0; left:0; bottom:0; right:0;}

a.flexMenuToggle {border:1px solid #1C1C1C; background-color: #333;    color: #FFFFFF !important;    display: inline-block !important;     font-size: 18px;    height: 30px;    left: 240px;    line-height: 30px;    position: absolute;    text-align: center;    top: 19px;    width: 30px;  	border-radius:5px;}	
	
span.flexMenuToggle  {    background:#000;	background-color:rgba(0,0,0,0.1);    bottom: 0;	cursor:pointer;    display: none;     position: absolute;    top: 0;    width: 100%;    z-index: 1000;}	
body.showmenu span.flexMenuToggle { display:block}

.touch-btnBack { box-shadow: 0 -1px 0 0 #1C1C1C inset, 0 -2px 0 0 #4E4E4E inset; -webkit-box-shadow: 0 -1px 0 0 #1C1C1C inset, 0 -2px 0 0 #4E4E4E inset;-moz-box-shadow: 0 -1px 0 0 #1C1C1C inset, 0 -2px 0 0 #4E4E4E inset; display:block; text-align:center; line-height:40px; text-transform:uppercase; color:#fff !important; font-weight:bold; position:relative;}
.touch-btnBack:after {    background: url(img/glyphicons-halflings.png) no-repeat scroll -429px -69px #FFFFFF;    border-radius: 20px 20px 20px 20px;    box-shadow: 0 0 3px #000000;    content: "";    height: 20px;    position: absolute;    left: 10px;    top: 10px;    width: 20px;}

/* mainsite */
#mainsite { position:relative; left:0;   z-index: 1001;
box-shadow:0 -11px 10px rgba(0, 0, 0, 0.9); -webkit-box-shadow:0 -11px 10px rgba(0, 0, 0, 0.9);-moz-box-shadow:0 -11px 10px rgba(0, 0, 0, 0.9);
transform: translateX(0);	-webkit-transform: translateX(0);	-moz-transform: translateX(0);	-ms-transform: translateX(0); }
body.showmenu #mainsite {  transform: translateX(280px);-webkit-transform: translateX(280px); -moz-transform: translateX(280px); -ms-transform: translateX(280px);}
body.showmenu.hidemenu #mainsite {transform: translateX(0);	-webkit-transform: translateX(0);	-moz-transform: translateX(0);	-ms-transform: translateX(0);}

/* block-mainnav */
#block-mainnav-mobile {width:280px; display:none;  position: absolute  !important; margin:0 !important; padding:0 !important; top:0;  background:url(img/bg_menu.png); left:0; top:0; bottom:0; -moz-box-sizing:border-box;     -webkit-box-sizing:border-box;    box-sizing:border-box;}
body.showmenu #block-mainnav-mobile  { display:block;}
#block-mainnav-mobile > div , #block-mainnav-mobile  div.position-menu  {   position: absolute  !important;  margin:0 !important; padding:0 !important; top:0;  left:0; right:0; top:0; bottom:0;  overflow: hidden; }
 

/*fxmenu-touch*/
.fxmenu-touch {  -webkit-overflow-scrolling: touch; overflow-scrolling: touch; -o-overflow-scrolling: touch; -ms-overflow-scrolling: touch;    position:absolute; top:0; bottom:0; left:0; right:0; margin:0; transform: translateX(0);	-webkit-transform: translateX(0);	-moz-transform: translateX(0);	-ms-transform: translateX(0);}
body.showmenu  #block-mainnav-mobile   .fxmenu-touch { overflow:auto; /*fix bug to top iphone*/}

#block-mainnav-mobile  ul.fxmenu-touch { padding-top:40px;}
ul.fxmenu-touch:before { content:"Main Menu"; position:absolute; top:0; left:0; right:0; font-size:18px; color:#fff; text-transform:uppercase; height:40px; text-align:center; line-height:40px;  box-shadow: 0 -1px 0 0 #1C1C1C inset, 0 -2px 0 0 #4E4E4E inset; }

.fx-subitem.fxmenu-touch {  transform: translateX(280px);	-webkit-transform: translateX(280px);	-moz-transform: translateX(280px);	-ms-transform: translateX(280px);  }
.fxmenu-touch.show-item  { transform: translateX(-280px);	-webkit-transform: translateX(-280px);	-moz-transform: translateX(-280px);	-ms-transform: translateX(-280px); }
.fxmenu-touch.show { transform: translateX(0);	-webkit-transform: translateX(0);	-moz-transform: translateX(0);	-ms-transform: translateX(0); }
.fxmenu-touch.show.show-item { transform: translateX(-280px);	-webkit-transform: translateX(-280px);	-moz-transform: translateX(-280px);	-ms-transform: translateX(-280px); }


/*item*/
#block-mainnav-mobile ul li {  width:auto !important; list-style-type:none; box-shadow: 0 -1px 0 0 #1C1C1C inset, 0 -2px 0 0 #4E4E4E inset; -webkit-box-shadow: 0 -1px 0 0 #1C1C1C inset, 0 -2px 0 0 #4E4E4E inset;-moz-box-shadow: 0 -1px 0 0 #1C1C1C inset, 0 -2px 0 0 #4E4E4E inset;}
#block-mainnav-mobile ul li .level1, #block-mainnav-mobile  ul li .levelsub  { display:block;  color: #999; text-shadow:-1px -1px rgba(0, 0, 0, 0.8);  line-height: 20px;     padding:15px 10px; font-size: 16px;  }
#block-mainnav-mobile ul li.active .level1, #block-mainnav-mobile  ul li.active > .levelsub   { background-color:rgba(0,0,0,0.3);   }

#block-mainnav-mobile ul li > .iconImage { padding-left:60px; position:relative;}
#block-mainnav-mobile ul li > .iconImage img.icon  { position:absolute; top:7px; left:10px; max-width:40px; max-height:36px; }
#block-mainnav-mobile ul li > .fx-desc { line-height:18px; padding-top:7px; padding-bottom:7px;}
#block-mainnav-mobile ul li > .fx-desc .fx-desc { font-size:92%; font-weight:normal; display:block;}


#block-mainnav-mobile .container { background:none !important;  width: auto !important;}	
#block-mainnav-mobile  ul { margin:0; padding:0;  }
#block-mainnav-mobile .position  { color:#fff; padding:10px;}
#block-mainnav-mobile .jv-module { color:#333;}
#block-mainnav-mobile div.themecolor { text-align:center}
#block-mainnav-mobile div.themecolor a {   float: none;   display:inline-block;	    margin: 10px !important;}

#block-mainnav-mobile .hide-item > ul {display: none;}
#block-mainnav-mobile ul li .group-title.levelsub , #block-mainnav-mobile  ul  .jv-module h3.title-module {	color:#000;	   padding:0 0 0 15px !important;	   line-height:40px; font-size:16px;	     text-shadow: -1px -1px rgba(255, 255, 255, 0.5);
  background-color: #ababab !important;  background-repeat: repeat-x!important;  background-position:0 0;  background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#ababab))!important;  background-image: -moz-linear-gradient(top, #ffffff, #ababab)!important;  background-image: -ms-linear-gradient(top, #ffffff, #ababab)!important;  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ababab))!important;  background-image: -webkit-linear-gradient(top, #ffffff, #ababab)!important;  background-image: -o-linear-gradient(top, #ffffff, #ababab)!important;  background-image: linear-gradient(top, #ffffff, #ababab)!important;  }

/*iconsubmenu*/
#block-mainnav-mobile ul li.hasChild .iconsubmenu {    cursor: pointer;  position: absolute;   width: 80px;    z-index: 10;  height:50px; right:0;  z-index: 10; -webkit-tap-highlight-color: none; }
#block-mainnav-mobile ul li.hasChild .iconsubmenu:after { content:""; position: absolute; top:50%; margin-top:-10px; right:10px; width:20px; height:20px; border-radius:20px;    background: #fff url(img/glyphicons-halflings.png) no-repeat -453px -69px ; 
box-shadow: 0 0 3px #000;}
#block-mainnav-mobile ul li.hasChild.li-group-title  > .iconsubmenu { height:40px;}
#block-mainnav-mobile ul li.hasChild.li-group-title  > .iconsubmenu:after { background-position:-430px -93px; }
#block-mainnav-mobile ul li.hasChild.li-group-title.hide-item > .iconsubmenu:after{ background-position:-404px -93px}