@charset "utf-8";

@media (hover: none) {  /* Touch devices  */

.link {
	background-color:hsla(0,0%,0%,0.2);
	width:100%;
	height:100%;
  	text-align:center;
  	transition-duration: 200ms;
	color: var(--accent);
	opacity: 1;
	filter: none;
		text-shadow: 4px 0 2px rgba(255,23,0,0.50),0 4px 2px rgba(0,44,255,0.5),-3px 2px 2px rgba(12,255,12,0.5);
}

	.GalleryContainer {
		width: 100%;
	}
	

}

@media (max-width: 2000px) /*    big screens */
{
	summary p {
		font-size: 100%;
	}
	
		.thumb a {  
	/*font-size: 100%;*/
	}
	
	.GalleryContainer {
		width: 100%;
	}
	
	
}


@media (max-width: 1200px) /**/
{
	
	:root {
	--spacing: 12px;
	}
	
	summary p {
		font-size: 85%;
	}
	
	.thumbs {
		/*	grid-template-rows: minmax(18vw, 33vh);*/
		grid-gap: 12px;
		margin: 0px 12px 0px 12px;
		grid-template-columns: 1fr 1fr 1fr;
			grid-auto-rows:  32vw;
	}
	
		.thumb a {  
	/*font-size: 130%;*/
	}
	
	
	
	.smokeFX {
		top: 25vw;
		transform: scale(.75);
	}
	
}


@media (max-width: 900px) 
{
	
		 
	summary p {
		font-size: 70%;
		padding: 0px 11px 0px 11px ;
		box-sizing: content-box;
	}
	.thumbs {
			/*grid-template-rows: minmax(18vw, 25vh);*/
	}
	
	
		.thumb a {  
	/*font-size: 100%;*/
	}
	
	.link {
	background-color:hsla(0,0%,0%,0.2);
	width:100%;
	height:100%;
  	text-align:center;
  	transition-duration: 200ms;
	color: var(--accent);
	opacity: 1;
	filter: none;
		text-shadow: 4px 0 2px rgba(255,23,0,0.50),0 4px 2px rgba(0,44,255,0.5),-3px 2px 2px rgba(12,255,12,0.5);
}
	
	
	
	.smokeFX {
		top: 25vw;
		left:-4vw;
		transform: scale(.6);
	}
	
	
	
}

@media (max-width:600px) /* on narrower than this */	
{
	
	:root {
	--spacing: 7px;
	}
	
	
	body {
		background-image: url(graphics/table_top5B_mini.jpg);
	}
	#emptiness{
		background-image: url(graphics/table_top5A.jpg);
	}
	.apa i{
		font-size: 70%;
		}
	
/* BASIC */
body {
	
}
	footer {
		background-image: url("graphics/table_bottom4_mini.jpg");
		height: 48vw;
	}
	
	summary {
	align-items: baseline;
	min-height: 20px;
		padding: 0px;
	}

	summary p {
		font-size: 66%;
	}
	
	
/* GALLERY */
	
	.thumb {  
		--tfs: 1.2;
	}
	
	
	.thumbs {
		grid-template-columns: 1fr ;
		/*grid-template-rows: 35vw ;*/
		grid-auto-rows:  35vw;
			grid-gap: 7px;  /* 11 16 */
	margin: 0px 11px 0px 11px;
	}	
	
	.thumbs img {   /* logo on thumbnails  */
	
		max-width: 45%;
	} 
	
	.link {
	background-color:hsla(0,0%,0%,0.2);
	width:100%;
	height:100%;
  	text-align:center;
  	transition-duration: 200ms;
	color: var(--accent);
	opacity: 1;
	filter: none;
		text-shadow: 4px 0 2px rgba(255,23,0,0.50),0 4px 2px rgba(0,44,255,0.5),-3px 2px 2px rgba(12,255,12,0.5);
}
	.link:hover{
	filter: none;
}
	.apa {   /* the hover selector */
			background-size: 105% 33vw;
		background-repeat: no-repeat;
		background-position: center;
}
	.apa:hover {
		background-image: url('graphics/frame8.png');
		background-size: 100% 33vw;
	}

/* HEADER STUFF */	
	
		li a, li a:link, li a:visited, li a:active { 
			font-size: 100%;
		}
	
	.apa {
			justify-content: center;
	}

	.Vlogo {
	width: 55vw;
	min-width: 180px;
	max-width: 270px;	
	}

	summary {   /* hide some summary text */
	font-size: 104%;
	}
	summary i {
	display:none;
	}
	
	span.show {
	display: none;
}
	span.hide {
	display: inline;
}
	/* TOP STUUFF */
	
	nav {
	height: auto;
grid-template-columns: 5px 1fr 5px;
grid-template-rows: 100px auto auto;
}	

	.logo { grid-area: 1 / 2 / 2 / 3; 
		
		justify-content: center;
		
		}
menu { grid-area: 3 / 2 / 4 / 3; 
		justify-content: center;
	align-items: center;
	/* min-height: 65px;
	height: 10vw; */
	margin-top: 0px;
	margin-bottom: 30px;
	top: -18px;
}
	
summary { grid-area: 2 / 2 / 3 / 3;

	} 
		
	.smokeFX {
		top: 34vw;
		left: -3vw;
		transform: scale(.6);
	}
	
	.card{
	height: 21.2vw;
	width: 33.1vw;
	border-radius: 11px;
	top: 23.9vw;
	border: thin solid transparent;
	left: 34%;
	}
		
	
		label {
		transform: scale(.6);
	}
	
	
}/**/
	

										 /* mobile landscape */
	
	@media (max-width: 900px) and (hover: none) and (orientation: landscape)
{ 
 .thumb {
			--tfs: .7;
	}
	.thumbs {
	
		/* grid-template-rows: 23vw ; */
		grid-auto-rows:  23vw;
	}
		
}	



@media (max-width:400px) {/**/
	
	.thumbs {
	grid-gap: 7px;  /* 16 */
	margin: 0px 7px 0px 7px;
	}
	
	.thumb a {  
/*	font-size: 100%;*/
	}
	
		.apa i{
		font-size: 60%;
		}
	
	.smokeFX {
		top: 33vw;
		left: -5vw;
		transform: scale(.4);
	}
	
	
	
}/**/
	
	@media (min-width:600px) {/* on everything bigger than the pop */
			
		.logo {
padding-left: 16px;
	padding-top: 5px;
	}
		menu { 
		padding-right: 16px;
			padding-top: 9px;
		}
		/*summary { 
		min-height: 180px;
	} */
	
	summary {  
		margin: auto 0px;
	}	
		
}



@media (min-width: 600px) and (hover: none) and (orientation: portrait) {  /* ipad portrait */
  	.apa i{
		font-size: 70%;
		}
	
	.cover {
	min-height: 133vw;
	}
	
	.debug .ipad_P {
	display: block;
}
	
	.thumbs {
		grid-template-columns: 1fr 1fr 1fr ;
		grid-template-rows: 47vw;
		grid-auto-rows:  47vw;
		--tfs: .85;
		grid-gap: 9px;  /* 11 16 */
		}	
	.thumbs img {   /* logo on thumbnails  */
	
		max-width: 70%;
	} 
	
	summary { 
		height: 50vw;       
	}  
	
	label {
		transform: scale(.7);
	}
	
}



@media (min-width: 500px) and (hover: none) and (orientation: landscape) {  /* ipad landscape AND phone Landscape */
 
		.apa i{
		font-size: 60%;
		}
	
	.cover {
	min-height: 75vw;
	}
	
	.debug .ipad_L {
	display: block;
}
	
	.thumbs {
		grid-template-columns: 1fr 1fr 1fr 1fr ; 
		grid-template-rows: 40vw;
		grid-auto-rows:  40vw;
		--tfs: .8;
		grid-gap: 9px;  /* 11 16 */
		}	
	.thumbs img {   /* logo on thumbnails  */
	
		max-width: 65%;
	} 
	
		label {
		transform: scale(.7);
	}
}


@media (min-width: 500px) and (max-width: 600px) and (hover: none) and (orientation: landscape) {  /* ipad landscape AND phone Landscape */
  
	.thumbs img {   /* logo on thumbnails  */
	
		max-width: 80%;
	} 
	
	label {
		transform: scale(.5);
	}
}