#info       {position:fixed;top:0;left:100%;width:100%;height:100%;z-index:1;opacity:0;visibility:hidden;transition:0.2s;}

#gallery    {position:relative;float:left;width:100%;}


.first      {position:relative !important;float:left;left:5%;clear: both !important;}
.left       {float:left;left:5%;}
.right      {float:left;left:5%;}
.center     {float:left;left:5%;}
.narrow     {width:90%;}
.normal     {width:90%;}
.wide       {width:90%;}


#toggle	    {display:block;position:fixed;top:0.5rem;right:0.5rem;width:60px;height:60px;z-index:3;opacity:0;cursor:pointer;}
#menu	    {position:fixed;top:0.5rem;right:0.5rem;width:60px;height:60px;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#131313;}

#menu div			{position:absolute;width:60%;height:4px;border-radius:2px;background-color:#ffa500ff;transition:0.4s;}
#menu div:before	{content:'';position:absolute;width:100%;height:4px;border-radius:2px;background-color:#ffa500ff;top:-10px;left:0;transition:0.4s;}
#menu div:after	    {content:'';position:absolute;width:100%;height:4px;border-radius:2px;background-color:#ffa500ff;top:10px;left:0;transition:0.4s;}

#toggle:checked + #menu             {background:white;}
#toggle:checked + #menu>div		    {transform:rotate(135deg);}
#toggle:checked:hover + #menu>div	{transform:rotate(225deg);}
#toggle:checked + #menu>div:before, #toggle:checked + #menu>div:after   {top:0;transform:rotate(90deg);}

#toggle:checked ~ #info		{visibility:visible;opacity:1;}
#toggle:checked ~ #info		{transform:translateX(-100%);}


#photo  {position:relative;float:left;top:0;left:0;width:100%;clear:both;margin:0 4% 4% 0;}