#demo {width:95%; max-width:1100px; margin:0 auto; position:relative; z-index:100;}

#cssplay_menuform { display: none; }

.cssplay_ipHide {position:absolute; left:-9999px; display:none;}
#cssplay_resetlabel {display:none;}
#cssplay_menutoggle {display:none;}

#cssplay_menuwrap {width:100%; max-width:1100px; position:relative; margin:0 auto 0 auto; height:35px; background:#fff;}
#cssplay_menu {padding:0; margin:0; list-style:none; width:100%; text-align:center;}
#cssplay_menu li {display:block; display:inline-block; text-align:left; cursor:pointer;}

#cssplay_menu li.selected {color:#000; font:normal 14px/40px 'latomedium', arial, sans-serif; padding:0 0px 0 40px; background-color:rgba(235,226,224,0.95);}

#cssplay_menu li > a {display:block; font:normal 14px/40px 'latomedium', arial, sans-serif; color:#000; text-decoration:none; padding:0 25px 0 25px; border-radius:5px 5px 5px 5px;}
#cssplay_menu li > span {display:block; font:normal 14px/40px 'latomedium', arial, sans-serif; padding:0 25px 0 25px; border-radius:5px 5px 5px 5px; position:relative; cursor:pointer;}
#cssplay_menu li > span:before {content:""; display:block; width:6px; height:6px; border:2px solid #666;  border-color:transparent #666 #666 transparent; border-width:0 2px 2px 0; position:absolute; left:10px; top:13px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transition:0.5s;
-webkit-transition:0.5s;
}
#cssplay_menu li > span label {display:block; position:absolute; left:0; top:0; width:100%; height:100%; cursor:pointer;}
#cssplay_menu li > span label.cssplay_opensub {}
#cssplay_menu li > span label.cssplay_closesub {display:none;}
#cssplay_menu li > a:hover,
#cssplay_menu li > span:hover {background-color:rgba(235,226,224,0.95);}

#cssplay_menu li div {width:100%; max-height:0; overflow:hidden; position:absolute; left:0; top:40px; background:rgba(235,226,224,0.95); text-align:center; border-radius:5px;}
#cssplay_menu li div dl {padding:0; margin:0; width:20%; min-width:250px; margin:0.5%; display:inline-block; vertical-align:top; text-align:left;}
#cssplay_menu li div dl dt label {display:block; font:normal 14px/35px arial; background:rgba(161,118,97,1); color:#fff; padding:0 10px; border-radius:5px 5px 5px 5px;}
#cssplay_menu li div dl dd {padding:0; margin:0;}
#cssplay_menu li div dl dd a {display:block; font:normal 14px/35px arial; color:#000; text-decoration:none; padding:0 10px; border-bottom:1px solid rgb(192,156,134); color:rgb(92,56,34);}
#cssplay_menu li div dl dd a:hover {background:rgb(192,156,134); color:#fff;}

#cssplay_menu input[id*="cssplay_div"]:checked + span {background:rgba(235,226,224,0.95);}
#cssplay_menu input[id*="cssplay_div"]:checked + span:before {top:17px;
transform:rotate(-135deg); 
-webkit-transform:rotate(-135deg); 
}

#cssplay_menu input[id*="cssplay_div"]:checked + span label.cssplay_closesub {display:block;}
#cssplay_menu input[id*="cssplay_div"]:checked ~ div {max-height:800px; padding:20px 0;
transition:0.5s;
-webkit-transition:0.5s;
}


@media only screen and (max-width: 840px) {
#demo {position:static;}

#cssplay_menuform { display: block; }

#cssplay_menuwrap {width:180px; position:fixed; left:-180px; top:0; margin:0; height:100%; background:#fff; overflow:hidden; z-index:500020; -webkit-transform: translate3d(0, 0, 0);
transition:0.5s 0.5s;
-webkit-transition:0.5s 0.5s;
} 
#cssplay_menu {padding:0; margin:0; list-style:none; width:180px; height:100%; overflow-x:hidden; overflow-y:auto;
-webkit-overflow-scrolling: touch;
}
#cssplay_menu li {width:150px;}
#cssplay_menu li div {width:100%; max-height:0; overflow:hidden; position:static; border-radius:0;
transition:0.5s;
-webkit-transition:0.5s;
}
#cssplay_menu li div dl {padding:0; margin:0; width:100%; margin:0;}
#cssplay_menu li div dl dt label {width:160px; margin-left:20px; border-radius:0px; cursor:pointer; position:relative; text-indent:20px;}
#cssplay_menu li div dl dt label:before {content:""; display:block; width:6px; height:6px; border:2px solid #fff; border-color:transparent #fff #fff transparent; border-width:0 2px 2px 0; position:absolute; left:10px; top:11px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transition:0.5s;
-webkit-transition:0.5s;
}
#cssplay_menu li div dl dd  {max-height:0px; overflow:hidden; width:160px; padding-left:20px;
transition:0.5s;
-webkit-transition:0.5s;
}
#cssplay_menu li div dl dd a {padding-left:30px;}

#cssplay_menutoggle {display:block; position:fixed; right:20px; top:35px; z-index:500000;}
#cssplay_menutoggle label {display:block; top:-10px; width:30px; height:10px; border:4px solid #333; border-width:4px 0; position:relative; cursor:pointer;}
#cssplay_menutoggle label:before {content:""; display:block; width:30px; height:4px; background:#333; position:absolute;left:0; top:3px;}

#cssplay_menuToggle:checked ~ #cssplay_menuwrap {left:0; box-shadow:0 0 5px rgba(0,0,0,0.5);
transition:0.5s;
-webkit-transition:0.5s;
}
#cssplay_menuToggle:checked ~ #cssplay_resetlabel {display:block; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.1); z-index:500010; cursor:pointer;}
#cssplay_menu input[id*="cssplay_div"]:checked + span label.cssplay_closesub {display:none;}

#cssplay_menu input[id*="cssplay_div"]:checked + label + div {max-height:800px; padding:0;
transition:0.5s;
-webkit-transition:0.5s;
}
#cssplay_menu input[id*="cssplay_div"]:checked + span:before {top:13px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}

#cssplay_menu input[id*="cssplay_sub"]:checked ~ dd {max-height:300px;
transition:0.5s;
-webkit-transition:0.5s;
}

#cssplay_menu input[id*="cssplay_sub"]:checked ~ dt label:before {top:15px;
transform:rotate(-135deg); 
-webkit-transform:rotate(-135deg); 
} 
}