html{
  min-height:100%;/* make sure it is at least as tall as the viewport */
  position:relative;
  margin:0;
}
body {
 height: 100%;
 position: relative;
 font-family: Arial, Helvetica, sans-serif;
 margin:0;
}

.navbar {
    background: rgba(255, 255, 255, 0.8);;
    position: sticky;
    position: -webkit-sticky;
    z-index: 1;
    top: 0;
    height:4.5rem;
}
/* Style the navigation bar links */
.navbar a {
    display: block;
    color: white;
    text-decoration: none;
}
.navbar a.text{
    padding: 1rem 1.3rem;
}
.pad{
    padding: 1rem;
}
img {
    max-width:100%;
    height:auto;
}
.textcenter{
    text-align: center;
}
.center{
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}
.column {
 float: left;
 width: 33%;
}
/* Clear floats after the columns */
.row:after {
 content: "";
 display: table;
 clear: both;
}
.clear { clear: both; height: 7rem; }
/* Footer */

.imagebox {
  position: relative;
  max-width: 55rem;
}
.iframebox {
  position: relative;
  max-width: 75rem;
}

.imagebox:hover .desc {
  opacity: 1;
}

div.desc {
  position: relative;
  bottom: 3.4rem;
  background: -webkit-linear-gradient(transparent, #000) center repeat;
  background: linear-gradient(transparent, #000) center repeat;
  transition: .5s ease;
  opacity: 0;
  color: white;
  font-size: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
  width: auto;
  max-width: 55rem;
  font-family: Arial, Helvetica, sans-serif, serif;
  font-weight: lighter;
}
 
 #menuToggle
 {
   display: block;
   position: relative;
   top: 1.5rem;
   left: 50px;
   
   z-index: 1;
   
   -webkit-user-select: none;
   user-select: none;
 }
 
 #menuToggle a
 {
   text-decoration: none;
   color: #232323;
   
   transition: color 0.3s ease;
 }
 
 #menuToggle a:hover
 {
   color: tomato;
 }
 
 #menuToggle input
 {
  margin-top:1rem;
   display: block;
   width: 4rem;
   height: 2rem;
   position: absolute;
   top: -1rem;
   left: -1rem;
   
   cursor: pointer;
   
   opacity: 0; /* hide this */
   z-index: 2; /* and place it over the hamburger */
   
   -webkit-touch-callout: none;
 }
 #menuToggle span
 {
   display: block;
   width: 33px;
   height: 4px;
   margin-bottom: 5px;
   position: relative;
   
   background: #000000;
   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;
 }
 #menuToggle span:first-child
 {
   transform-origin: 0% 0%;
 }
 #menuToggle span:nth-last-child(2)
 {
   transform-origin: 0% 100%;
 }
 #menuToggle input:checked ~ span
 {
   opacity: 1;
   transform: rotate(45deg) translate(-2px, -1px);
   background: #232323;
 }
 #menuToggle input:checked ~ span:nth-last-child(3)
 {
   opacity: 0;
 }
 #menuToggle input:checked ~ span:nth-last-child(2)
 {
   transform: rotate(-45deg) translate(0, -1px);
 }
 #menu
 {
   position: absolute;
   width: 11.5rem;
   margin: -3.25rem 0 0 -3.125rem;
   padding: 1rem;
   padding-top: 3.25rem;
   padding-bottom:1rem;
   /* top:0;
   bottom:0; */
   min-height: 100vh; 
   background: #ededed;
   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.2s ;
 }
 
 #menuToggle input:checked ~ ul
 {
   transform: none;
 }