#container {
	height:100%;
	border-collapse:collapse;
	display : table;
}

@media screen and  (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
.sidenav{
	list-style-type: none;
	margin: 0;
	padding: 0px;
	overflow: hidden;
	background-color: var(--win-bg-color);
	max-width: 100%;
	width: 100%;
	height:30px;
	//position: fixed;
	overflow: hidden;
} 

.sidenav img{
	float: left;
	max-width: 0%;
	display:none;
	height: auto;
	//object-fit: cover;
}

li{
	display: inline;
	float: left;
	//width: 60px
}

li a{
	display: block;
	padding: 32px 16px;
	background-color: rgb(0,0,0);
	text-decoration: none;
	text-align: center;
}

li a:hover{
	background-color: var(--main-bg-color);
	font-style: italic;
}

li p{
	display: block;
	padding: 0px 16px;
	background-color: rgb(0,0,0);
	text-decoration: none;
	text-align: center;
}

.foot {
	display : none;
	//vertical-align : bottom;
	//float:right;
	//height : 0px;
}
}
@media screen and  (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media screen and  (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }

@media screen and  (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ 

.sidenav{
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: var(--win-bg-color);
	max-width: 10%;
	width:auto;
	height:100%;
	position: fixed;
	overflow: auto;
} 

.sidenav img{
	display:list-item;
	max-width: 100%;
	height: auto;
	object-fit: cover;
}

li{
	display: block;
	float: none;
	//width: 60px
}

li a{
	display: block;
	padding: 0px 16px;
	background-color: rgb(0,0,0);
	text-decoration: none;
	text-align: center;
}

li a:hover{
	background-color: var(--main-bg-color);
	font-style: italic;
}

li p{
	display: block;
	padding: 0px 16px;
	background-color: rgb(0,0,0);
	text-decoration: none;
	text-align: center;
}
.foot {
	font-size: xx-small;
	//float:none;
	display : table-row;
	vertical-align : text-bottom;
	height : 0px;
}
}


@media screen and  (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media screen and  (min-width:1281px) { /* hi-res laptops and desktops */ }