/* Toggle functionality */
#islbtoggle {
	display:none;
}

/* hides the white bounding box behind the hamburger menu when the burger is over dark color #333333*/
#islbtoggle:checked ~ .islbtoggle-container .islbbutton-bkgd-box {
}

/* HAMBURGER MENU WHEN CLICKED MAKES AN X */
/* this is the top hamburger bar being rotated to 45 deg when the menu is clicked */
#islbtoggle:checked ~ .islbtoggle-container .islbbutton-toggle:before {
  transform: scale(.8) rotate(45deg);
  top: 10px;
  background-color: #ffffff;

}

/* this is the bottom hamburger bar being rotated to -45 deg when the menu is clicked */
#islbtoggle:checked ~ .islbtoggle-container .islbbutton-toggle:after {
  transform:  scale(.8) rotate(-45deg);
  top: 10px;
  background-color: #ffffff;
}

/*  this is the center hamburger bar being hidden */
#islbtoggle:checked ~ .islbtoggle-container .islbbutton-toggle-center {
  transform: scale(0);
}


/*  When the hamburger menu button is clicked, its a checkbox so it's "CHECKED" */
/*  On mobile, we need to set the main-menu width to full width and on desktop views */
/*  it will be set to see just the menu icons */

#islbtoggle:checked ~ .main-menu
{
 	visibility:visible; 
	width:px;}

/*  When the hamburger menu is clicked ON MOBILE ONLY  */
/*  display the menu section titles ex "My Office", "business_name", "client_name" */

#islbtoggle:checked ~ .main-menu .nav-title
{
	}

/*  This is a fancy piece of CSS that will overlay the remaining "non-menu" space with a div that has an ONCLICK */
/*  function that hides the nav menu when clicked off ON MOBILE ONLY */

#islbtoggle:checked ~ .toggle-click
{

	  position: fixed;
	  top: 0;
	  left: 0;
	  height: 100%;
	  width:100%;
	  z-index: 152;
	  overflow:hidden;";

}


/* Toggle button */
.islbbutton-toggle {
  position: fixed;
  display: inline-block;
  top:10px;
  left:10px;
  width: 30px;
  height: 25px;
  background-color: transparent;
  cursor: pointer;
  z-index:155;
}

.islbbutton-bkgd-box {
  position: fixed;
  display: inline-block;
  top:0px;
  left:5px;
  width: 45px;
  height: 50px;
  background-color: #333333;
  cursor: pointer;
  z-index:153;
}



/* this is the hamburger menu center line (but its really at the top) */
 
.islbbutton-toggle-center {
  position: absolute;
  display: inline-block;
  width: 30px;
  height: 3px;
  background-color: ;
  cursor: pointer;
  transition: 0.6s;
  left:0;
}


/* this bit of css makes a shadow box around the hamburger menu button */
.islbbutton-toggle:hover {
}

/* this is the hamburger menu top (which is really in the middle) and bottom lines */
.islbbutton-toggle:before, .islbbutton-toggle:after {
  position: absolute;
  content: '';
  right: 0px;
  width: 100%;
  height: 3px;
  background-color: ; /* color */
  transition: 0.6s;
}

/* positioning the top line at the center of the hamburger menu */
.islbbutton-toggle:before {
  top: 10px;	
}

/* positioning the bottom line of the hamburger menu */
.islbbutton-toggle:after {
  top: 20px;
}