/* UPDATED: 15 august 2018 */
.header-left {
	padding-top:40px;
	width:20%;
	min-height:100vh;
	overflow:hidden;
	float:left;
position:fixed;}
#headertop,
#headernav {width:100%;}

/* DESKTOP VIEW IS ACTIVE */
.desktopview .header-left {
	}

/* MOBILE VIEW IS ACTIVE */
.mobileview .header-left{
	max-width:100%;
	width:100%;
	overflow:visible;
height:auto;
float:none;
position:relative;
min-height:auto;
display:block;}
.mobileview .header-left #headertop{}
.mobileview .header-left #headernav{
	position:absolute;
	position:fixed;
	z-index:99999;
	left:-110%;
	height:100%;
	background:rgba(17,17,17,.95);
	-webkit-transition:left .45s ease-in-out;
	-moz-transition:left .45s ease-in-out;
	transition:left .45s ease-in-out;
	top:90px;}
.mobileview .header-left.open #headernav{
	left:0%;}

/* content widths */
.header-left ~ #contents,
.header-left ~ #footer {width:80%;float:right;}
.header-left.open ~ #contents,
.header-left.open ~ #footer {}
.desktopview #contents,
.desktopview #footer {}
.mobileview #contents,
.mobileview #footer {width:100%;clear:both;display:block;}
.mobileview #contents {}
.mobileview #footer {}

/*change width if screen is narrow*/
@media only screen and (max-width: 1279px) {
	.header-left {width: 25%}
	.desktopview #contents, .desktopview #footer {width: 75%;}
}

/*change height if screen is to low*/
@media only screen and (max-height: 779px) {
	.desktopview .header-left {position:absolute!important;height:100%!important;}
}
x.lessheight .header-left {position:absolute!important;height:100%!important;}
@media only screen and (max-width: 900px) {
	.mobileview .header-left.scrolled #headernav{top:69px!important;}
}
@media only screen and (max-width: 420px) {
	.mobileview .header-left #headernav{top:69px!important;}
}