/*Style for whole hamburger menu block*/
#menuToggle
{
  display: block;
  position: relative;
  top: 60px; /*location of hamburger menu*/
  left: 50px; /*location of hamburger menu*/
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

/*sub menu text */
#menuToggle a
{
  text-decoration: none;
  color: #2e1cd4; /*Color of sub menu text*/
  font-size: 16px;
}

/*sub menu text */
#menuToggle a:hover /* link hover color*/
{
  color: #f07000; /*Color of sub menu text when cursor hovers*/
}

/*hamburger menu checkbox that gets hidden*/
#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide checkbox */
  z-index: 2; /* place checkbox over the hamburger */
  
  -webkit-touch-callout: none;
}

/* hamburger menu icon*/
 #menuToggle span
 {
   display: block;
   width: 33px;
   height: 4px;
   margin-bottom: 5px;
   position: relative;
   
   background: #f07000;/*unchecked hamburger menu color*/
   border-radius: 3px;
   
   z-index: 1;
   
   transform-origin: 4px 0px;
   
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
               background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
               opacity 0.55s ease;
 }

 /* hamburger menu icon*/
#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

/* hamburger menu icon*/
#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #f07000;/*checked hamburger menu color*/
}

/*
 * Hide the middle hamburger menu span when hamburger is an X
 */
 #menuToggle input:checked ~ span:nth-last-child(3)
 {
   opacity: 0;
   transform: rotate(0deg) scale(0.2, 0.2);
 }
 
 /*
  * the last hamburger menu span should go the other direction
  */
 #menuToggle input:checked ~ span:nth-last-child(2)
 {
   transform: rotate(-45deg) translate(0, -1px);
 }
 
/* Make the menu positioned at the top left of the screen */
 #menu
 {
   position: absolute;
   width: 300px;
   margin: -100px 0 0 -50px;
   padding: 5px;/* controls how far buttons and sub-menus are from the sides of whole menu*/
   padding-top: 125px;
   
   background:#e6c692; /* background color of menu*/
   list-style-type: none;
   -webkit-font-smoothing: antialiased;
   /* to stop flickering of text in safari */
   
   transform-origin: 0% 0%;
   transform: translate(-100%, 0);
   
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 }
 
 /*
  * Slide menu in from the left
  */
 #menuToggle input:checked ~ ul
 {
   transform: none;
 }


/* Style the buttons */
.accordion, .buttonRef{
    background-color: #FF9332; /*button background color*/
    border-color: #FF9332;/*button border color*/
    border-width: 2px;
    color:#000000;/*Button text color*/
    cursor: pointer;
    padding: 15px;
    padding-right: 18px;
    width: 100%;
    font-size: 22px;
  }

/*Style button active state*/
.accordion.active, .buttonRef.active{
    background-color: #f07000;/*button active color*/
}

/*Style button hover state*/
.accordion:hover, .buttonRef:hover{
  background-color: #FFA95D;/*button hover color*/
}
 
/*Style button text*/
  .buttonText {
    text-align: left;
    padding: 0px;
    margin: 0px;
    float: left;
  }

  /* Style the accordion/sub-menu panel. Note: hidden by default, shown when button is clicked */
  .panel {
    padding: 0 18px;
    background-color: #FFE9C5;/*background color of sub-menu*/
    display: none;
    overflow: hidden;
  }

  /* Style drop down arrow, which is just two border sides of a box that are rotated */
  .arrow {
    border: solid black;
    border-width: 0px 3px 3px 0px;
    padding: 5px;
    position: absolute;
    right: 15px;
  }
  
  /* Rotate and move drop down arrow so it is pointing down */
  .down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    margin-top: 3px;
  }

  /* Rotate and move drop down arrow so it is pointing up */
  .up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    margin-top: 10px;
  }