@charset "utf-8";
/* CSS Document */

#Menu {position: absolute; z-index: 10; width: 2%; padding: 1%;}
#Menu IMG {width: 100%; cursor: pointer;}

#MenuShow {
	position: absolute;
	z-index: 10;
	margin: 1% 0 0 1px;
	padding-left: 12px;
	display: block;
	background: rgba(53,63,73,1.00);
	color:#fff;
	width: 25%;
	height: 0;
	overflow: hidden;
	transition: width 0s, height 0.8s;
	font-size: 0.8rem;
	}

#MenuShow NAV {width: 90%; margin: 6px; padding: 6px 0; cursor: pointer;}
#MenuShow IMG {width: 100%; cursor: pointer;}
#MenuShow .icon {width: 10%; padding: 1%; float: right;}
#MenuShow .row {display: table-row;}
#MenuShow .cell {
	border:0 transparent solid;
	border-width: 6px;
	background-clip: padding-box;
	display: table-cell; width: 45%; border-bottom: 1px solid rgba(255,255,255,0.50); margin: 0 6px;}
#MenuShow .blank {
	border:0 transparent solid;
	border-width: 6px;
	background-clip: padding-box;
	display: table-cell; width: 50%; margin: 0 6px;}
#MenuShow .row:first-of-type {margin-top: 24px;}

#submenu {float: left; margin: 12px; height: 1rem; padding: 1%; background: rgba(76,87,104,1.0);}
#submenu IMG {display: block; margin: auto; cursor: pointer; height: 1.6rem;}

#SubShow {
	left: 20%;
	position: absolute;
	z-index: 15;
	display: block;
	background: rgba(66,77,94,1.00);
	color:#fff;
	width: 20%;
	padding: 0 12px;
	height: 0;
	overflow: hidden;
	transition: width 0s, height 0.4s;
	font-size: 0.8rem;
	}
	
#SubShow NAV {width: 90%; margin: 4px; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.50); cursor: pointer;}
#SubShow NAV:first-of-type {margin-top: 24px;}
#SubShow DIV {width: 10%; padding: 1%; float: right;}
#SubShow IMG {width: 100%; cursor: pointer;}

#LocalMenu {display: flex}
#LocalMenu NAV {padding: 0 12px; display: inline;}
#LocalMenu NAV:last-of-type {border-right: 1px solid #666; display: inline;}
#LocalMenu A {font-size: 0.8rem; border: 0;}
#LocalMenu A:hover {background: rgba(76,87,104,0.2);}

/* Desktops and laptops. iPad portrait ----------- */
@media only screen 
and (min-width: 1025px)
and (max-width : 1279px) {
	

}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px)
and (max-device-width: 1024px) {

#Menu {width: 3%; padding: 2%;}

#MenuShow {width: 35%; font-size: 0.8rem;}

#SubShow {
	left: 38px;
	display: block;
	width: 40%;
	font-size: 0.8rem;
	}
	
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (max-device-width : 767px) {

#Menu {width: 5%; padding: 2%;}

#MenuShow {width: 90%; font-size: 0.7rem;}

#MenuShow NAV {margin: 4px; padding: 3px 0;}
#MenuShow .cell {width: 48%; margin: 0 4px;}
#MenuShow .blank {margin: 0 4px;}
#MenuShow .row:first-of-type {margin-top: 18px;}

#submenu {margin: 8px; padding: 6px; height: 1rem;}
#submenu IMG {height: 1rem; max-height: 24px;}

#SubShow {
	left: 2%;
	display: block;
	width: 60%;
	font-size: 0.6rem;
	}

#SubShow NAV {padding: 1px 0;}
#SubShow NAV:first-of-type {margin-top: 18px;}
#SubShow DIV {width: 10%; padding: 1%; float: right;}
#SubShow IMG {width: 100%; cursor: pointer;}
}