body {
    transition: all 0.3s ease-in-out;
}

.container {
    /*display: flex;
    height: 100vh;*/
}

#transSite, #transSite_Left	{
	background:#000;
	z-index:15;
	position:fixed;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	opacity:0.5;
	display:none;
}
#transSite.open, #transSite_Left.open	{
	display:block !important;
}

.panel {
	/*
    width: 0;
    height: 100%;
    background-color: #f2f2f2;
    transition: width 0.3s ease-in-out;
    overflow-y: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1;
    box-shadow: -5px 0px 5px 0px rgba(0,0,0,0.2);
	*/
	width: 0;
    height: 100%;
    background-color: #f2f2f2;
    transition: width 0.3s ease-in-out;
    overflow-y: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 20;
    box-shadow: -10px 0px 5px -4px rgba(0,0,0,0.55);
	-webkit-box-shadow: -10px 0px 5px -4px rgba(0,0,0,0.55);
	-moz-box-shadow: -10px 0px 5px -4px rgba(0,0,0,0.55);
}
.panel_Left {
	width: 0;
    height: 100%;
    background-color: #f2f2f2;
    transition: width 0.3s ease-in-out;
    overflow-y: auto;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 20;
	box-shadow: 10px 0px 5px -4px rgba(0,0,0,0.55);
	-webkit-box-shadow: 10px 0px 5px -4px rgba(0,0,0,0.55);
	-moz-box-shadow: 10px 0px 5px -4px rgba(0,0,0,0.55);
}

.panel p {
    padding: 20px;
}

@media screen and (min-width: 950px) {
	.panel.open, .panel_Left.open {
		width: 50%;
	}
}
@media screen and (max-width: 949px) {
	.panel.open, .panel_Left.open {
		width: 80%;
	}
}
#page.open {
	transition: all 0.3s ease-in-out;
    margin-right: 50%;
}
