/* /////////////////////////////////////////////////////// */
/* CSS Code for the insertion of the Mobile (Hamburger) Menu */
/* The CSS was borrowed from "https://freefrontend.com/css-sliding-menus/". */
/* However, I did modify the CSS so that it would work */
/* with my web pages, which uses a different master CSS file. */

/* reset */
/* * {
  margin: 0;
  padding: 0;
} */

/* #wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
} */

label { cursor: pointer; }
label:focus { outline: none; }

.menu {
  position: absolute; z-index: 1;
  top: 0;
  left: 0;
  background: #C6F7BD;
  /* background: #77dd77; */
  border-right: 1px solid black;
  width: 200px;
  height: 100%;
  transform: translate3d(-200px, 0, 0); /* Create the menu off to the left */
  transition: transform 0.35s;
}
/* Set the position and space for the hamburger */
.menu label.menu-toggle {
  position: absolute;
  right: -60px;
  width: 60px;
  height: 60px;
  line-height: 0px;
  display: block;
  padding: 0;
  text-indent: -9999px;
  background: #C6F7BD url(../images/menu-alt-512.png) 50% 50%/25px 25px no-repeat;
}
/* Added to eliminate the ul marker */
.menu ul { list-style-type: none; } 
/* Determines the position of the black arrow. */
.menu ul li > label {  background: url(../images/icon-arrow-right-b-128.png) 95% 50%/16px 16px no-repeat; }
.menu ul li a, .menu ul li label {
  display: block;
  text-align: left;
  padding: 0 5px; /* Top/Bot  Rt/Lt */
  line-height: 40px;
  text-decoration: none;
  font-weight: bold;
  color: #0000FF; /* Font color for menu item */
}
/* set the link and label hover color */
.menu ul li a:hover, .menu ul li label:hover { color: #0000FF; }
/* hide inputs */          
.menu-checkbox { display: none; }
/* hide navigation icon for sublabels */    
.menu .menu label.menu-toggle { background: none; }
/* fade in checked menu */    
.menu-checkbox:checked + .menu { transform: translate3d(0, 0, 0); }

/* CSS Arrows - Use <p>Right arrow: <i class="arrow right"></i></p> */
.arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; }
.ar_right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.ar_left { transform: rotate(135deg); -webkit-transform: rotate(135deg); }
.ar_up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }
.ar_down { transform: rotate(45deg); -webkit-transform: rotate(45deg); }

/* All below, not really needed */
#info {
  display: table;
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  width: 100%;
}
#info #info-content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  font-size: 12px;
}
#info #info-content h1 {
  color: #fff;
  border: 3px solid #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
  font-size: 22px;
  font-weight: normal;
  padding: 20px;
  margin: 10px;
  display: inline-block;
}
#info #info-content h1 strong {
  display: block;
  font-size: 26px;
}