/* Super Panel: www.menucool.com/ui/super-panel */


/*---- panel ----*/

#left-menu{
  width: 24.2616%;
  float:left;
}

#panel1{
  width: 100%;
  float:left;  
}
.page-content {
  float: right;
  width: 74.68354%;
}

@media (max-width: 450px) {
	#left-menu{
	  width: 0%;
	  float:left;
	}
	
	.page-content {
	  float: right;
	  width: 100%;
	}

	#panel1 {
		position:fixed;
		z-index:9000;
		top:0;bottom:0;
		right:auto;left:0;
		width:250px;
		height:100%;
		overflow:auto;
		background:#eff9fb;
		padding-top:20px;
		padding-left:15px;
		box-sizing:border-box;
		box-shadow:-4px 0 18px rgba(0,0,0,0.2);
		visibility:hidden; 
	}
	
	#panel-button{
		height: 30px;
		width: 35px;
		padding-top:4px;
		padding-left:7px;
		margin-right:5px;
		float:left;
		background: linear-gradient(#539417, #498214);
		color:white;
        border-radius: 5px;
	}
    
    #panel-button:hover{
        background: linear-gradient(#539417, #539417);
	}
	
	#panel1 input.text-input{
		width:200px;
	}
}

/*---- transparent layer ---- Available when the option transparentLayer is true in pane-panel.js */
@media (max-width: 450px) {
	.transparent-layer {
		position:fixed;
		top:0;left:0;right:0;bottom:0;
		width:100%;height:100%;
		background-color:rgba(0,0,0,0.4);
		display:none;
		-webkit-transition:opacity 0.3s;
		transition:opacity 0.3s;
	}
}

/*---- panel button ----*/
.panel-button{
    -ms-user-select:none;
    -mos-user-select:none;
    -webkit-user-select:none;
    -o-user-select:none;
    user-select:none;
	
	cursor: pointer;
	font-size:21px;
   
}
/*
.panel-button   
{
    /*position:fixed; margin:12px 0 0 12px; top:0; left:0;*
    display:block;float:left;position:relative;
	margin:0px 0px 0;
    
    background-color:red;

    height:3px;
    width:24px;
    border-style:solid;
    border-color:#f5fdfe;
    border-top-width:18px;
    border-bottom-width:18px;
    border-left-width:8px;
    border-right-width:8px;
	box-sizing:content-box;
	cursor: pointer;
    
}


.panel-button:before, .panel-button:after {
    background-color:red;
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    width: 24px;
    height: 3px;
    display:block;
    transition:all .2s linear;
}
.panel-button:after {
    top: 8px;
}

    
.panel-button.active {
    background-color:black;
}
.panel-button.active:before {
    transform: rotate(45deg);
    top:0;
}
.panel-button.active:after {
    transform: rotate(-45deg);
    top:0;
}

*/