* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', arial;
}


div#overlay { display: none; }

a#toggle {
  position: fixed;
	z-index:9999;
  left: 10px;top: 0;
  width: 40px;
  height: 40px;
  background-color: #000000;
  text-align: center;
  color: white;
  display: none;
  transition: all ease-out 0.3s;
}

a#toggle i {
  position: relative;
      top: 43%;
  transform: translateY(-50%);
}

main#content { padding: 10px; }

#menu {
  text-align: center;
  transition: all ease-out 0.3s;
	    margin-bottom: 30px;
}

#menu a { color: white;font-family: 'HelveticaNeueLTStd-Th', serif;font-weight:bold; }

#menu ul {
  margin: 0;
  padding: 0;
      background-color: #000000;
}

#menu ul li {
  display: inline-block;
  position: relative;
}

#menu ul li > a {
  display: inline-block;
  padding: 10px;font-size:16px;
}

#menu ul li > a > i {
  margin-left: 15px;
  transition: all ease-out 0.3s;
  -webkit-transition: all ease-out 0.1s;
}

#menu ul li ul {
  display: none;
  position: absolute;    z-index: 2;
  top: 38px;
  width: 200px;
  text-align: left;
}
#menu ul li ul li ul {
  display: none;
  position: absolute;
  top: 38px;
  width: 200px;
  text-align: left;	
}

#menu ul li ul li { display: block; }
#menu ul li ul li a { display: block; }

#menu ul li ul li ul li { display: block; }
#menu ul li ul li ul li a { display: block; }

#menu ul li:hover > a { background-color: #333333 }

#menu ul li:hover > a > i { transform: rotateZ(90deg); }
#menu ul li:hover ul {display: block;}

.toggle-panel { display: none; }

@media only screen and (min-width : 769px) {
		/* Closes the Panel on window resize from small to large. */
		/* Important tags aren't always bad otherwise you can close with JS on resize. */
		.scotch-panel-canvas {
				-o-transform: translate3d(0px, 0px, 0px) !important;
				-ms-transform: translate3d(0px, 0px, 0px) !important;
				-moz-transform: translate3d(0px, 0px, 0px) !important;
				-webkit-transform: translate3d(0px, 0px, 0px) !important;
				transform: translate3d(0px, 0px, 0px) !important;
		}
}

@media only screen and (max-width : 768px) {
		.toggle-panel { 
			display: block; 
			position: fixed;
			z-index:9999;
			left: 10px;top: 0;
			width: 40px;
			height: 40px;
			background-color: #000000;
			text-align: center;
			color: white;
			transition: all ease-out 0.3s;
			line-height: 37px;
			font-size: 26px;
		}
		#menu { display: none; }
		#scotch-panel {
			background-color:#000000;
			
		}
		#scotch-panel ul {margin:0;padding:10px 20px;}
		#scotch-panel ul li {list-style:none;padding: 5px 0;}
		#scotch-panel ul li a {
			color:#ffffff;
			font-family: 'HelveticaNeueLTStd-Th', serif;
			font-weight: bold;
		}
		#scotch-panel ul li a:hover {
			color:#cccccc;
		}
}