/* * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;

-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
margin: 0;
padding: 0;
-webkit-text-size-adjust: none;
} */

/* Makes sure that everything is 100% height */


/* gets the actual input out of the way;
we're going to style the label instead */

#drawer-toggle {
  display: none;
}

@media screen and (max-width: 768px) {


#drawer-toggle {
display: block;
position: absolute;
opacity: 0;
}

#drawer-toggle-label {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* left: 0px; */

right:-8px;
height:50px;
width: 50px;
display: block;
position: fixed;
background: #ECEDE8;
/* border-radius: 5px; */
border-radius: 0;
    z-index: 999999;
    top: 25%;
}

/* adds our "hamburger" menu icon */

#drawer-toggle-label:before {
  content: "\e905";
  font-family: 'icomoon' !important;
  font-size: 30px;
  color: #a3a3a3;
  line-height: 1em;
  display: block;
  position: absolute;
  height: 100%;
  width: 24px;
  /* background: #8d8d8d; */
  /* left: 13px; */
  /* right: 13px; */
  top: 9px;
  cursor: pointer;
  /* box-shadow: 0 6px 0 #8d8d8d, 0 12px 0 #8d8d8d; */
}



/* drawer menu pane - note the 0px width */

#drawer {
position: fixed;
top: 0;
/* left:-300px; */
right:-300px;
height: 100%;
width: 300px;
background: #ECEDE8;
overflow-x: hidden;
overflow-y: scroll;
padding: 20px;
z-index: 9999999999;
-webkit-overflow-scrolling: touch;

-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
margin: 0;
padding: 4% 3%;
-webkit-text-size-adjust: none;

}

/* actual page content pane */



/* checked styles (menu open state) */

#drawer-toggle:checked ~ #drawer-toggle-label {
height: 100%;
width: calc(100% - 300px);
background: rgba(255,255,255,.9);
top:0;
}

#drawer-toggle:checked ~ #drawer-toggle-label,
#drawer-toggle:checked ~ header {
/* left: 300px; */
right: 300px;
}
#drawer-toggle:checked ~ #drawer-toggle-label::before {
  content: "\e906";
  right: 13px;
}



#drawer-toggle:checked ~ #drawer {
/* left: 0px; */
right:0px;
}

#drawer-toggle:checked ~ #page-content {
/* margin-left: 300px; */
margin-right: 300px;
}

}
/* Responsive MQ */


@media all and (max-width:350px) {

#drawer-toggle:checked ~ #drawer-toggle-label {
height: 100%;
width: 50px;

}

#drawer-toggle:checked ~ #drawer-toggle-label,
#drawer-toggle:checked ~ header {
left: calc(100% - 50px);

}

#drawer-toggle:checked ~ #drawer {
width: calc(100% - 50px);
padding: 20px;
}

#drawer-toggle:checked ~ #page-content {
margin-left: calc(100% - 50px);
}

}