.webpanel{
	position: relative;
	width: 100%;
	height: 100%;
	top: 0;
	padding: 30px 15px;
}
.csstransitions .webpanel{
	transition: all 0.5s ease-out 0s;
}
.webpanel.panel-left{
	z-index: 1;
	position: fixed;
	left: -100%;
	text-align: center;
}
.webpanel.panel-left.shy{
	left: -50%;
}
.webpanel.panel-right{
	left: 0%;
	top: 60%;
	height: auto;
	min-height: 100%;
}
.webpanel.panel-right.shy{
	top: -100%;
}

.webpanel.panel-left.navOpen{
	left: 0%;
}
.webpanel.panel-right.navOpen{
	left: 0%;
}

.webpanel.main{
	z-index: 1;
	left: 0;
	position: absolute;
}
.webpanel.main.navOpen{
	left: 0%;
}
.webpanel.main.index{
	height: 60%;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.webpanel{
		position: absolute;
		width: 50%;
		height: 100%;
		top: 0;
		padding: 30px 40px;
	}
	.csstransitions .webpanel{
		transition: all 0.5s ease-out 0s;
	}
	.webpanel.panel-left{
		z-index: 1;
		position: fixed;
		left: 0;
		text-align: center;
	}
	.webpanel.panel-left.shy{
		left: -50%;
	}
	.webpanel.panel-right{
		top: 0%;
		left: 50%;
		height: auto;
		min-height: 100%;
	}
	.webpanel.panel-right.shy{
		top: -100%;
	}
	
	.webpanel.panel-left.navOpen{
		left: 50%;
	}
	.webpanel.panel-right.navOpen{
		left: 75%;
	}
	.webpanel.main.index{
		height: 100%;
	}
	
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}