/*--Slide in Side Menu--*/
.sidenav {
  height:100%;
  width:0;
  position:fixed;
  z-index:1000;
  top:0;
  left:0;
  background-color:var(--body_color);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 15px;
  box-shadow: 0px 2px 8px 1px rgba(0,0,0,0.2); 

  
}


.sidenav .closebtn {
  position:absolute;
  top: 2px;
  left:20px;
  font-size: 34px;
  font-weight:regular;
  color:var(--primary_textcolor);
 
}

.closebtn:hover{
	background:none;
}



/*-----------------------Mobile Menu Collapsible div------------------------------*/


.menucollapsible {
  background:none;
  color: var(--primary_textcolor);
  cursor: pointer;
  padding:16px 20px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  font-family:'Roboto','Noto Sans TC', sans-serif;
  overflow:hidden;
  
}

button.menucollapsible {
	letter-spacing:0.1em;
}


.active, .menucollapsible:hover {
  background-color:none;
}

.menucollapsible:after {
  content: '\002B';
  color:var(--primary_textcolor);
  font-weight:bold;
  float: right;
  margin-right: 15px;

}

.active:after {
  content: "\2212";
}

.menucontent {
  padding:0;
  max-height:0;
  overflow:hidden;
  color:var(--primary_textcolor);
  transition: max-height 0.2s ease-out;
  border-bottom:1px solid var(--primary_textcolor);
  
 
}



.menucontent ul li{
	text-align:left;
	list-style:none;
}


.mobile-menu-contact a:link   {color:var(--primary_textcolor); font-size:16px;}
.mobile-menu-contact a:visited{color:var(--primary_textcolor); font-size:16px;}



.mobile-menu-contact{
  color:var(--Primary_textcolor);
  padding:16px 20px;
  width: 100%;
  border: none;
  text-align: left;
  overflow:hidden;
  outline: none;
  font-size: 16px;
  font-family:'Roboto','Noto Sans TC', sans-serif;
  

}

.mobile-menu-contact img{		
	width:45px;
	margin:0 auto;
	
	
}