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

#panel-btn{
  display: inline-block;
  position: relative;
width: 100px;
height:100px;
	background:rgba(73,41,31,1);
  z-index:5000;
}
#panel-btn:hover{
	background:rgba(73,41,31,0.5);
}
#panel-btn-icon{
  z-index:2000;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  width: 70%;
  height: 2px;
  margin: auto;
  background: rgba(255,255,255,1);
  transition: .3s;
}
#panel-btn-icon:before, #panel-btn-icon:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,1);
  transition: .5s;
}
#panel-btn-icon:before{
  margin-top: -12px;
}
#panel-btn-icon:after{
  margin-top: 10px;
}
#panel-btn .close{
  background: transparent;
}
#panel-btn .close:before, #panel-btn .close:after{
  margin-top: 0;
}
#panel-btn .close:before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
#panel-btn .close:after{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

@media screen and (max-width: 860px) {
#panel-btn{ width: 100px; height: 100px; }
#panel-btn-icon:before{ margin-top: -22px;}
#panel-btn-icon:after{ margin-top: 18px;}
}

@media screen and (max-width: 640px) {
#panel-btn{ width: 80px; height: 80px;}
#panel-btn-icon:before{ margin-top: -16px;}
#panel-btn-icon:after{ margin-top: 14px;}
}
@media screen and (max-width: 480px) {
#panel-btn{ width: 60px; height: 60px;}
#panel-btn-icon:before{ margin-top: -14px;}
#panel-btn-icon:after{ margin-top: 12px;}
}
@media screen and (max-width: 360px) {
#panel-btn{ width: 50px; height: 50px;}
#panel-btn-icon:before{ margin-top: -12px;}
#panel-btn-icon:after{ margin-top: 10px;}
}