@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button,
#side-navigation,
#side-navigation ul,
#side-navigation ul li,
#side-navigation ul li a,
#side-navigation #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;/**/
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after,
#side-navigation:after,
#side-navigation > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu, 
#cssmenu ul, 
#cssmenu ul li, 
#cssmenu ul li a, 
#cssmenu #menu-button{
  /*height: 45px;*/
}
#cssmenu #menu-button, 
#side-navigation #menu-button {
  /**/display: none;
}
#cssmenu {
  	z-index: 1000;
  	box-shadow: 0px 0px 9px rgba(0,0,0,0.65);
	background-color: #5a3708;
	background: -webkit-linear-gradient(#a9895b, #714f21, #5a3708); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#a9895b, #714f21, #5a3708); /*  f6e8c8; f0e2c3For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#a9895b, #714f21, #5a3708); /*For Firefox 3.6 to 15 */
	background: linear-gradient(#a9895b, #714f21, #5a3708);/*  Standard syntax (must be last) */
}
#cssmenu > ul > li {
  float: left;
}
 #side-navigation {
  	z-index: 1000;
	background-color: #66451b;
	position: relative;
	/*margin: auto;*/
}
#cssmenu ul ul li a, 
#cssmenu ul ul ul li a, 
#side-navigation ul li a, 
#side-navigation ul ul li a{
  /*padding: 25px;,*/
  line-height: 1.15em;
}
#cssmenu.align-center > ul {/* not explicitly in tutorial */
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul > li {
  /* float: right; */
}

#cssmenu > ul > li > a, 
#side-navigation > ul > li > a {
  /*border: 1px solid red;*/padding: 17px;  
  letter-spacing: 1px;
  text-decoration: none;
  color: #dddddd;
  /*font-weight: 700; text-transform: uppercase;*/
  -webkit-transition: color .25s ease;
     -moz-transition: color .25s ease;
          transition: color .25s ease;
}
#cssmenu > ul > li > a {
  font-size: 18px;
}
#side-navigation > ul > li > a {
   /*15px 17px 15px 17px;*/
  font-size: 14px;
}
#side-navigation ul ul li{
	/*padding: 20px;*/
}
#cssmenu > ul > li:hover > a,
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover, 
#side-navigation > ul > li:hover > a,
#side-navigation ul ul li:hover > a,
#side-navigation ul li a:hover {  /* change color of all link texts on hover. */
  color: #ffffff;
}
#cssmenu > ul > li.has-sub > a, 
#side-navigation > ul > li.has-sub > a {
  padding-right: 30px;
}
/* --- end first checkpoint in the tutorial --- */
#cssmenu ul > li.has-sub > a:after, 
#side-navigation  ul > li.has-sub > a:after {/* This selector places a minus sign after items with subitems  */
  position: absolute;
  top: 25px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
  -webkit-transition: background .25s ease;
     -moz-transition: background .25s ease;
          transition: background .25s ease;  
}
#cssmenu > ul > li.has-sub:hover > a:after,
#cssmenu > ul > li.has-sub > a:hover:after,
#side-navigation > ul > li.has-sub:hover > a:after,
#side-navigation > ul > li.has-sub > a:hover:after { /* now change the color of the minus on hover;  */
  background: #fff;
}
#cssmenu ul > li.has-sub > a:before,
#side-navigation ul > li.has-sub > a:before { /* now add a vertical line to the minus sign */
  position: absolute;
  /*top: 19px;*/
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  /*border: 1px solid red;*/
  background: #dddddd;
  content: ' ';
  -webkit-transition: all .25s ease;  /* these transitions allow you to  */
     -moz-transition: all .25s ease;  /* move smoothly from one property */
      -ms-transition: all .25s ease;  /* to the next.  Taking about a  */
       -o-transition: all .25s ease;  /* quarter of a second to complete. */
          transition: all .25s ease;
}
/* now add a vertical line to the minus sign */
/**/
#cssmenu ul > li.has-sub > a:before { 
  top: 22px;
  right: 14px;
}
/* now add a vertical line to the minus sign */
/**/
 #side-navigation ul > li.has-sub > a:before { 
  top: 9px;
  right: 14px;
}

#cssmenu ul > li.has-sub:hover > a:before,
#cssmenu ul > li.has-sub > a:hover:before { /* on hover collapse the vertical line. */
  top: 27px;  /* makes it look as though the vertical line collapses into the minus because */
  height: 0;  /* if did not have this, the transition would take place 23px above the minus. */
}   /*  */
#side-navigation ul > li.has-sub:hover > a:before,
#side-navigation ul > li.has-sub > a:hover:before { /* on hover collapse the vertical line. */
  top: 27px;  /* makes it look as though the vertical line collapses into the minus because */
  height: 0;  /* if did not have this, the transition would take place 23px above the minus. */
}   /*  */
#cssmenu ul ul, 
#side-navigation ul ul {  /* now hide the main menu, so that can work on the submenus. */
  position: absolute;  /* Position the submenu items absolutely off  */
  left: -9999px;       /* the left side of page. */
}
#cssmenu li:hover > ul, 
#side-navigation li:hover > ul  {  /* Make sure the list items reappear on hover. Originally it was floated to left. */
  left: auto;
}
#cssmenu ul ul ul, 
#side-navigation ul ul { /* push the second submenu items over to the left so that we can see them. */
  margin-left: 100%; /* push the 2nd submenu items to 100% of the left margin, in other words, on the right hand border. */
  top: 0;
}
#cssmenu ul ul li, 
#side-navigation ul ul li { /* gently ease the 2nd submenu items. */
  /*height: 0;*/
  -webkit-transition: height .25s ease;
     -moz-transition: height .25s ease;
          transition: height .25s ease;
}

#cssmenu li:hover > ul > li  { /* make the 2nd submenu items their normal height on hover. */
  height: 35px;
}
#side-navigation li:hover > ul > li  { /* make the 2nd submenu items their normal height on hover. */

}
#cssmenu ul ul{
  background-color: #66451b;
}
/* second submenu styling */
#cssmenu ul ul li a, 
#side-navigation ul li a,
#side-navigation ul ul li a { /* style the menu items */
  padding: 10px; /* 11px and the padding. */
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);  /* give the bottom a nice border*/
  font-size: 12px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 400;
  background: #66451b;
}
#cssmenu ul ul li a, 
#side-navigation ul ul li a { /* style the menu items */
  width: 270px;  /* fix the width */
}
#side-navigation ul ul li a { /* style the menu items */
  padding: 10px 0 10px 20px;
}
#cssmenu ul ul li.has-sub,
#cssmenu ul ul li.has-sub ul li{
  height: auto;
  /*line-height: 1.25em;
  padding: 15px 0 15px 20px;*/
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a,
#side-navigation ul ul li:last-child > a,
#side-navigation ul ul li.last-item > a {  /* take off the bottom border for the last item in the list. */
  border-bottom: 0;
}
/* next four selectors will position the submenu item indicators correctly */
/* the menu script allows for the use of different indicators for parent/child submenus. */
#cssmenu ul ul li.has-sub > a:after, 
#side-navigation ul li.has-sub > a:after { /* this is the horizontal line */
  top: 16px;
  right: 11px;
  background: #dddddd;
}
#cssmenu ul ul li.has-sub > a:after { /* this is the horizontal line */
  top: 16px;
}
#side-navigation ul li.has-sub > a:after { /* this is the horizontal line */
  top: 15px;
}
#cssmenu ul ul > li.has-sub:hover > a:after,
#cssmenu ul ul > li.has-sub > a:hover:after,
#side-navigation ul > li.has-sub:hover > a:after,
#side-navigation ul > li.has-sub > a:hover:after {
  background: #fff;
}

#cssmenu ul ul li.has-sub > a:before,
#side-navigation ul li.has-sub > a:before { /* this is the vertical line */
  right: 14px;
  background: #dddddd; /* make the color match the text for the vertical and horizontal lines. */
}
#cssmenu ul ul li.has-sub > a:before { /* this is the vertical line */
  top: 13px;
}
#side-navigation ul li.has-sub > a:before { /* this is the vertical line */
  top: 12px;
}
#cssmenu ul ul > li.has-sub:hover > a:before,
#side-navigation ul > li.has-sub:hover > a:before {
  top: 17px;
  height: 0;
}
/* end styling for the submenu indicators */

/* work on the small screen styling.  if the .small-screen class were removed, 
   once the breaking point was met, the entire menu would be hidden and we would
   not see it because the jQuery plugin does not use media queries. */
#cssmenu.small-screen {
  width: 100%;
  background-color: #5a3708;
}

#cssmenu.small-screen #menu-button.menu-opened {
  border-bottom: 1px solid #5a3708;
  background: -webkit-linear-gradient(#a9895b, #714f21, #5a3708); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#a9895b, #714f21, #5a3708); /*  f6e8c8; f0e2c3For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#a9895b, #714f21, #5a3708); /*For Firefox 3.6 to 15 */
  background: linear-gradient(#a9895b, #714f21, #5a3708);/*  Standard syntax (must be last) */
}

#cssmenu.small-screen ul {
  width: 100%;
  display: none;
}

#cssmenu.small-screen ul li {
  width: 100%;
  border-top: 1px solid rgba(120, 120, 120, 0.2);
}

#cssmenu.small-screen ul ul li,
#cssmenu.small-screen li:hover > ul > li {
  height: auto;
}

#cssmenu.small-screen ul li a,
#cssmenu.small-screen ul ul li a {
  width: 100%;
  border-bottom: 0;
}

#cssmenu.small-screen > ul > li {
  float: none;
}

#cssmenu.small-screen ul ul,
#cssmenu.small-screen ul ul ul {/* Here up: Remove floats to change the horizontal
	menu bar to a vertical one.  Also remove the hover display effects. */
  position: relative;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: left;
}
#cssmenu.small-screen ul ul li a { /* create indentation visual to aid the vertical menu display. */
  padding-left: 25px;
}

#cssmenu.small-screen ul ul ul li a {
  padding-left: 35px;
}

#cssmenu.small-screen > ul > li.has-sub > a:after,
#cssmenu.small-screen > ul > li.has-sub > a:before,
#cssmenu.small-screen ul ul > li.has-sub > a:after,
#cssmenu.small-screen ul ul > li.has-sub > a:before { /* Hide the submenu indicators */
  display: none;
}
#cssmenu.small-screen #menu-button { /* Access the menu button to click on for the small-screen. */
  display: block;
  padding: 17px;
  color: #dddddd;
  cursor: pointer;
  font-size: 18px;/*14px*/
  /*text-transform: uppercase;*/
  font-weight: 600;/*700*/
}
#cssmenu.small-screen #menu-button:after { /* Menu button icon, border creates the top and bottom line */
  position: absolute;
  top: 22px;
  right: 17px;
  display: block;
  height: 4px;
  width: 20px;
  border-top: 2px solid #dddddd;
  border-bottom: 2px solid #dddddd;
  content: '';
}

#cssmenu.small-screen #menu-button:before {/* Menu button icon, create the middle line */
  position: absolute;
  top: 16px;
  right: 17px;
  display: block;
  height: 2px;
  width: 20px;
  background: #dddddd;
  content: '';
}
#cssmenu.small-screen #menu-button.menu-opened:after { 
/* When the menu has been accessed, change the three lines to an X.  
	Need to remove the top & bottom borders. Create a line that is 
	rotated 45 degrees to the left. */
  top: 23px;
  border: 0;
  height: 2px;
  width: 15px;
  background: #ffffff;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#cssmenu.small-screen #menu-button.menu-opened:before {
/* When the menu has been accessed, change the three lines to an X.  
	Need to remove the top & bottom borders. Create a line that is 
	rotated 45 degrees to the right. */
  top: 23px;
  background: #ffffff;
  width: 15px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#cssmenu.small-screen .submenu-button {
/* working on the submenu button items so that the submenus can be accessed.
	Creates a block to the right where we will add a cross. */
  position: absolute;
  z-index: 99;
  right: 0;
  top: 0;
  display: block;
  border-left: 1px solid rgba(120, 120, 120, 0.2);
  height: 38px;/*46px*/
  width: 46px;
  cursor: pointer;
}
#cssmenu.small-screen ul li a {
  font-size: 18px;/*18px*/
  padding: 10px 14px 10px 16px;
}
#cssmenu.small-screen ul ul li a {
  font-size: 16px;/*12px*/
  padding: 8px 40px 8px 40px;
}
#cssmenu.small-screen ul ul ul li a {
  font-size: 14px;/*10px*/
  padding: 5px 70px 5px 70px;
}
#cssmenu.small-screen ul.open {
  background-color: #66451b;
}
#cssmenu.small-screen ul ul .submenu-button {
/* working on the submenu button items so that the submenus can be accessed.
	Creates a block to the right where we will add a plus-sign.
	If the button is a sub-submenu item, them make it smaller. */
  min-height: 36px;	
  height:  auto; /*36px;34px*/
  width: 40px;
}
#cssmenu.small-screen .submenu-button.submenu-opened {
/* Once the menu is open, jQuery plugin will add the class submenu-opened.
	the background color changes to reflect this. */
  background: #66451b;
}
#cssmenu.small-screen .submenu-button:after {
/* Now add the minus sign to indicate that there is a submenu item.
	Adding the minus sign to the submenu item by manipulating the height and 
	width of the element.  This element will be displayed as a block and it is
	absolutely positioned. */
  position: absolute;
  top: 17px; /*22px*/
  right: 19px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: ''; /* this will insert content into the html file. */
}

#cssmenu.small-screen ul ul .submenu-button:after {
  top: 17px;
  right: 16px;
}

#cssmenu.small-screen .submenu-button.submenu-opened:after {
  background: #ffffff;
}

#cssmenu.small-screen .submenu-button:before {
/* Now add the plus sign to indicate that there is a submenu item.
	Adding a vertical bar to the dash created above by manipulating the height and 
	width of the element.  This element will be displayed as a block and it is
	absolutely positioned. */
  position: absolute;
  top: 14px; /*19px*/
  right: 22px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
}

#cssmenu.small-screen ul ul .submenu-button:before {
  top: 14px;
  right: 19px;
}

#cssmenu.small-screen .submenu-button.submenu-opened:before {
  display: none;
}/* End modifying the menu for the small screen. */