/* COMPACT WIDTH (Hide logo) */
@media only screen and (max-width: 460px) {

	.back-home {
		width: 35%;
		padding-left: 1.8%;
	}
	.header-logo {
		left: -75px;
	}
	.header-sig {
		width: 100%;
		height: auto;
		aspect-ratio: 7/2;
		margin-left: 0;
	}
	.header-title h2 {
		left: 37%;
		font-size: 1em;
		letter-spacing: -.5px;
		bottom: 3px;
	}
	.back-top h2 span {
		margin-right: 1px;
	}

}


/* EXTRA COMPACT WIDTH (Shrink sig) */
@media only screen and (max-width: 340px) {

	:root {
		--gallery-item_basis: 160px;
	}
	[data-theme='small'] {
		--gallery-item_basis: 80px;
	}
	[data-theme='medium'] {
		--gallery-item_basis: 160px;
	}
	[data-theme='large'] {
		--gallery-item_basis: 260px;
	}
	#toggle_radio {
		right: calc(6% + 22px);
		transform: scale(.8);
		margin-right: -10px;
	}
	.menu-button {
		right: 3%;
	}
	.expand-button-toggle:checked ~ .gallery-content .gallery-item, 
	.expand-button-toggle:checked ~ .gallery-content.full span {
		margin: 0 0 0 1px;
	}
	.back-home {
		width: 40%;
		padding-left: 1.8%;
	}
	.header-title h2 {
		left: 42%;
		font-size:.8em;
	}
	.gallery-item, 
	.gallery-content.full span {
		flex: 1 0 160px;
		flex-basis: var(--gallery-item_basis);
		max-width: 98%;
	}
}


/* ULTRA COMPACT WIDTH (Hide sub title, shrink gallery images) */
@media only screen and (max-width: 280px) {

	.back-home {
		width: 50%;
	}
	.header-title h2 {
		display: none;
	}
	.expand-button-toggle:checked ~ .gallery-content .gallery-item, 
	.expand-button-toggle:checked ~ .gallery-content.full span {
		margin: 0;
	}
	.gallery-item, 
	.gallery-content.full span {
		flex: 1 0 160px;
		flex-basis: var(--gallery-item_basis);
		max-width: 100%;
	}
}


/* CONDENSED HEIGHT MENU (Expand and shrink menu) */
@media only screen and (max-height: 26em) {

	/* MENU BOX on CONDENSED MOBILE */

	.menu-box {
		padding: 0 0px 10px 10px;
		
		border-left: 2px solid var(--blue_menubox_bevel_light);
		border-bottom: 2px solid var(--blue_menubox_bevel_light);
		border-right: 2px solid var(--blue_menubox_bevel_light);
		border-bottom-right-radius: 10px;
		
		box-shadow: -2px 2px 9px var(--blue_menubox_shadow), 0px 2px 3px var(--blue_menubox_shadow);
	}
	#menu-button-toggle:checked ~ .menu-box {
		height: 82%;
		width: 21em;
		right: -1em;
		margin-right: 1em;
		direction: rtl;
	}
	.menu-box-inset {
		height: 100%;
		width:  100%;
		margin-top: 0;
		padding-top: 0;

		border-bottom: 1px solid var(--blue_menubox_bevel_light);
		border-left: 1px solid var(--blue_menubox_bevel_light);
		border-radius: 4px;
	}
	.menu-box ul {
		display: inline-block;
		vertical-align: top;
		direction: ltr;
		top: 5%;
		right: 20px;
		padding: 1% 0;
		font-size: .9em;
	}
	.menu-item {
		height: 8%;
	}
	.menu-box li:hover .arrow, 
	.selected .arrow {
		left:  -7px;
		margin-top: 19%;
		border: 7px solid black;
		border-color: transparent transparent var(--blue_text_mid) var(--blue_text_mid);
		border-radius: 2px;
		box-shadow: -2px 1px 2px var(--blue_menubox_shadow);
		transform-origin: 0 0;
		transform: rotate(-135deg);
	}
}


/* ULTRA CONDENSED HEIGHT MENU (Shrink more) */
@media only screen and (max-height: 15em) {

	/* MENU BOX on ULTRA CONDENSED MOBILE */

	#menu-button-toggle:checked ~ .menu-box {
		width: 15em;
	}
	.menu-box ul {
		top: 4px;
		font-size: .6em;
		margin-bottom: 5%;
		margin-left: 1.5em;
	}
	.menu-item {
		height: 6%;
	}
	.menu-box li:hover .arrow, 
	.selected .arrow {
		left:  -4px;
		margin-top: 19%;
		border: 5px solid black;
		border-color: transparent transparent var(--blue_text_mid) var(--blue_text_mid);
		border-radius: 2px;
		box-shadow: -2px 1px 2px var(--blue_menubox_shadow);
		transform-origin: 0 0;
		transform: rotate(-135deg);
	}
}


/* CONDENSED HEIGHT + ULTRA COMPACT WIDTH (Single column) */
@media only screen and (max-height: 26em) and (max-width: 20em) and (min-height: 15.1em) {

	/* MENU BOX on ULTRA COMPACT WIDTH */

	#menu-button-toggle:checked ~ .menu-box {
		width: 9em;
	}
	.menu-item {
		height: 4.5%;
	}
	.menu-box ul {
		font-size: .7em;
		padding: 0;
	}
}


/* ULTRA CONDENSED HEIGHT + ULTRA COMPACT WIDTH (Single column) */
@media only screen and (max-height: 15em) and (max-width: 15.1em) {

	/* MENU BOX on ULTRA COMPACT WIDTH */

	#menu-button-toggle:checked ~ .menu-box {
		width: 7em;
	}
	.menu-item {
		height: 5%;
	}
	.menu-box ul {
		font-size: .5em;
		padding: 0;
	}
}


/* END */