@charset "utf-8";
/* CSS Document */

/* The sidepanel menu */
.sidepanel {
  height:100%; /* Specify a height */
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:0; /* 0 width - change this with JavaScript */
  position:fixed; /* Stay in place */
  z-index:1; /* Stay on top */
  top:190px;
  left:0;
  background-color:#FFFFFF;
  overflow-x:hidden; /* Disable horizontal scroll */
  padding-top:0; /* Place content from the top */
  transition:0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

/* The sidepanel links */
.sidepanel a { width:100%; padding:0.5em 0; display:flex; flex-wrap:wrap; justify-content:center; text-decoration:none; font-size:25px; color:#9B907C; transition:0.3s; }

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover { color:#000000; }

/* Position and style the close button (top right corner) */
.sidepanel .closebtn { position:absolute; top:0; right:25px; font-size:36px; margin-left:50px; }
a.closeBTN { background-color:rgba(155,144,124); color:#FFFFFF; padding:0.5em 1em; }

/* Style the button that is used to open the sidepanel */
.openbtn { font-size: 20px; cursor:pointer; background-color:#FFFFFF; color:#9B907C; padding:10px 15px; border:none; }
	.openbtn:hover { background-color:#FFFFFF; }

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
	@media only screen and (max-width:800px) {
		.sidepanel { top:0; }
			.sidepanel a { padding:1em 0; }
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.sidepanel { top:0; }
	.sidepanel a { padding:1em 0; }
	
	@media only screen and (orientation:landscape) {
		.sidepanel a { padding:0; }
		.sidepanel a:first-child { padding-top:0.5em; }
		a.closeBTN { padding:0.5em 0; }
		.openbtn { font-size:1.75em; }
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {

}