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

	.sidepanel  {
	  width: 0;
	  position: fixed;
	  z-index: 101;
	  height: 100vh;
	  top: 0;
	  left: 0;
	  background-color: #111;
	  overflow-x: hidden;
	  transition: 0.5s;
	  padding-top: 60px;

	}

	.sidepanel a {
	  padding: 8px 8px 8px 32px;
	  text-decoration: none;
	  font-size: 25px;
	  color: #818181;
	  display: block;
	  transition: 0.3s;
	}

	.sidepanel a:hover {
	  color: #f1f1f1;
	}

	.sidepanel .closebtn {
	  position: absolute;
	  top: 0;
	  right: 25px;
	  font-size: 36px;
	}

	.openbtn {
	  font-size: 20px;
	  cursor: pointer;
	  background-color: #111;
	  color: white;
	  padding: 10px 15px;
	  border: none;
		position: absolute;
		top: 0;
		right: 0;
		margin: 20px;

	}

	.openbtn:hover {
	  background-color:#444;
	}


	/*menu colleps*/
	.collapsible {
	  background-color: #777;
	  color: white;
	  cursor: pointer;
	  padding: 18px;
	  width: 100%;
	  border: none;
	  text-align: left;
	  outline: none;
	  font-size: 15px;
	}
			
.collapsible {
    background-color: transparent;
    color: #7e7e7e;
    cursor: pointer;
    padding: 0;
    width: -webkit-fill-available;
    border: none;
    text-align: left;
    outline: none;
    font-size: 25px;
    margin: 10px 32px 0px 30px;
}		

	.active, .collapsible:hover {
	  background-color: transparent;
	  color: white;
	}

	.collapsible:after {
	  content: '\002B';
	  color: #7e7e7e;
	  font-weight: 300;
	  float: right;
	  margin-left: 5px;
		font-size: 36px;
		
	}
			button.collapsible:hover, .collapsible:after {
    color: white;
}
			.collapsible.active:after {
	  content: "\2212";
	}

	.content {
	  padding: 0 18px;
	  max-height: 0;
	  overflow: hidden;
	  transition: max-height 0.2s ease-out;
	  background-color: #f1f1f1;
	}