/*css reset*/html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;color:#555;background:#fff;}/*HTML5display-roleresetforolderbrowsers*/article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1.2;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}

img{overflow:clip;}

html{width:99%;overflow-x:clip;font-family:Arial,Helvetica,sans-serif;font-size:16px;} 
body{height:100%;padding-top:48px;overflow-x:clip;} /*min-width:320px;font:3vw comfortaa,verdana,sans-serif;font-weight:300;*/
a{color:#159;} a:link,a:visited{text-decoration:none;}a:hover,a:active{text-decoration:underline;}
h1{padding:0 1%;font-size:32px;}
h2{padding:0 1%;font-size:28px;}
h3{padding:0 1%;font-size:26px;}
#header{display:flex;position:fixed;flex-wrap:wrap;gap:0 8px;align-items:center;left:0;top:0;height:48px;width:99%;z-index:1;transition: all .4s ease!important;}
#headerText{display:flex;flex:1 0;white-space:nowrap;font-size:32px;overflow:hidden;}
#headerXmple{display:flex;flex:0;height:48px;align-items:center;font-size:32px;}
#headerMenuButton{display:flex;flex:0 0 48px;width:48px;height:48px;align-items:center;justify-content:center;font-size:42px;}
#menu{display:none;flex:0 0 100%;gap:12px;justify-content:flex-end;clear:both;padding:4px 0;line-height:2;font-size:24px;flex-wrap:wrap;}
#menu a{min-width:48px;min-height:48px;}
main{display:inline-block;width:75%;}
#header2{}

#footer{display:flex;gap:0 8px;height:48px;border-top:1px solid #eee;justify-content:center;align-items:center;}
#footer>a{display:flex;flex:0;align-items:center;white-space:nowrap;min-height:48px;font-size:22px;}
#cc{width:80px;height:15px;}
#footer #pp{font-size:16px;}
/*
#footer{padding:8px;border-top:1px solid #eee;text-align:center;vertical-align:baseline;}
#footer>a{min-height:48px;font-size:28px;}
*/
#scaledImage{width:100%;height:100%;}

#fullImage,#fullCanvas{display:none;}
#wallpaper{position:relative;line-height:0;}
#imageText{position:absolute;bottom:4px;right:4px;height:auto;line-height:1.1;text-align:right;background:transparent;font-size:30px;font-weight:bold;}
#imageText>div{display:inline-block;margin-right:4px;padding:1px 6px;border:1px solid #f0faff;}
#imageText>a{display:inline-block;line-height:0;}
#imageText>a>img{width:15px;height:80px;}
#desc{margin:4px;line-height:1.1;font-size:30px;}

.tns{line-height:0;}
.tns>a{display:inline-block;position:relative;width:calc(16.6667% - 2px);margin:1px;aspect-ratio:1/1;}
.tns>a>img{object-fit:cover;object-position:center;width:100%;height:100%;overflow:hidden;}
.tns>a>div{position:absolute;left:4px;bottom:4px;font-size:20px;padding:0 2% 0 2%;line-height:1;}
.tns8>a{width:calc(12.4% - 2px);}
.tns6>a{width:calc(16.6% - 2px);}
.tns5>a{width:calc(19.8% - 2px);}

#tags{display:inline-block;width:85%;}
#setRes{}
#setRes>a>div{display:inline-block;aspect-ratio:8/17;height:16px;background:url("/static/select-button.svg");background-size:contain;}
#downloadButton{margin-right:16px;margin-left:4px;}

#res{display:none;position:fixed;top:0;left:0;width:99%;height:100%;background-color:rgba(0,0,0,0.8);z-index:1;text-align:center;}
#res>table{display:inline-block;margin:4% auto;border:0px solid #ddd;overflow-y:scroll;width:60%;height:90%;color:#159;background:#fff;text-align:center;}
#res th{position:sticky;top:0px;background:#fff;padding:4px;font-weight:bold;}
#res td{padding:4px;}

span.tag>a{margin:2px;line-height:1.5;font-weight:bold;}
span.tag:hover{text-decoration:underline;}

.lightGrey{color:#ccc;}

#colorImage{display:inline-block;position:relative;width:50%;aspect-ratio:1/1;}
#colorImage>div{position:absolute;left:8px;bottom:8px;font-size:20px;padding:1px 4px;}
#colorImage>a>img{width:100%;height:100%;}
#colorValues{display:inline-block;width:40%;margin-left:6px;font-size:24px;line-height:150%;}
.colorSimilar{display:flex;flex-wrap:wrap;width:100%;height:auto;margin:1px;clear:both;font-size:24px;}
.colorSimilar>a{position:relative;flex:1 0 12%;margin:2px;}
.colorSimilar>a>img{width:100%;height:100%;}
.colorSimilar>a>div{position:absolute;left:4%;bottom:4%;font-size:16px;padding:0 2px;}

#nav{display:flex;flex-wrap:wrap;gap:4px;width:100%;margin:4px 0;overflow-x:hidden;line-height:2;align-items:center;justify-content:center;text-align:center;font-size:24px;}
#nav>*{min-width:48px;margin:0 4px;}

/*#nav>a{min-width:48px;min-height:48px;margin:4px 4px;}
#nav>span{min-width:48px;}
*/
#loading-spinner {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.displayHide{display:hide;}
.displayInline{display:inline;}

#adTopResp{height:100px;margin:0;}
#adRightResp{display:inline-block;width:23%;max-height:100%;}
.adMidResp{height:90px;}
#adBottomResp{width:98%;overflow:hidden;}

/* Smartphones ----------- min-height:200px;max-height:300px;*/
@media only screen and (max-width:760px) {
	body{padding-top:52px;}
	#header{height:52px;font-size:26px;} 
	h1{font-size:20px;}
	h2{font-size:20px;}
	h3{font-size:20px;}
	#headerText{height:52px;white-space:normal;margin-right:4px;overflow:hidden;}
	#headerXmple{}
	#headerMenuButton{flex:0 0 48px;}
	
	#menu{display:none;left:auto;right:2%;opacity:0.93;font-size:24px;}
	#menu>div{float:right;}
	#header2{}
	
	main{width:100%;}
	
	#footer>a{padding:8px;font-size:20px;}
	#footer{}
	#imageText{font-size:20px;}	
	#imageText>a>img{width:7.5px;height:40px;}	
	
  #wallpaper{width:100%;left:0;}
	.imageOverlay{font-size:18px;}
	#imageText{position:static;bottom:0;}
	#imageText>div{border:0;}
	
	#res>table{width:90%;}
	#desc{line-height:1.1;font-size:30px;}

	.tns>a{width:calc(33.33% - 8px);margin:4px;}

	#colorValues{font-size:16px;}
	.colorSimilar>a{flex:1 0 22%;margin:4px;}
	.colorTag{font-size:20px;}
	.colorVar{width:24vw;height:24vw;}
	.colorMiniTag{font-size:18px;}
	
	#adRightResp{display:block;width:100%;height:100px;}
	#adTopResp{max-height:100px;margin:4px 0;}
	.adMidResp{margin:4px 0;}
	}