/*  Desktop  */

div#desktop {padding:.75rem; border:1px solid #0002; border-radius:.25rem; max-width:36rem; margin:1.5rem auto;}
div#desktop {background-color:#80bfff; background-color:#1e90ffd0; background-color:#1e90ff;}
div#desktop {box-shadow:0px 1px 1px 0 rgba(0,0,0,.25); transition:.5s;}
div#desktop:hover {box-shadow:0px 1px 4px 1px rgba(0,0,0,.25);}

div#desktop div.group {position:relative;}
div#desktop div.group.hidden {display:none;}
/*div#desktop div.group > div {position:relative;}*/
div#desktop div.group div.ghead {cursor:pointer; user-select:none; padding:1rem 0; /* z-index:2; */}
div#desktop div.group div.gbody {display:none; z-index:1;}
div#desktop div.group.active div.gbody {display:block;}

div#desktop div.group .item {display:inline-block; min-width:5rem; border-radius:.25rem; position:relative;}
div#desktop div.group .item {text-align:center; padding:.5rem; text-decoration:none; color:#000;}
div#desktop div.group .item::before {content:''; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; border-radius:inherit; transition:.1s;}
div#desktop div.group .item:hover::before {/*background-color:#50a8ef33;*/ background-color:#0001;}

div#desktop div.group .item div.icon {font-size:2rem;}
div#desktop div.group .item div.label {font-size:.75rem; user-select:none;}


/*  mobile(sm), tablet(md), laptop(lg), desktop(xl)  */
@media screen and (min-width:24rem/* 576px */) {
	div#desktop {text-align:center;}
	div#desktop div.group {margin:1rem 0;}
	/*div#desktop div.group div.ghead,*/
	/*div#desktop div.group div.gbody {margin-top:1rem}*/

	div#desktop div.group div.gbody a.item div.miniframe:hover,
	div#desktop div.group div.gbody a.item:hover div.miniframe {display:block;}
}

/*  mobile(xs)  */
@media screen and (max-width:24rem/* 575px */) {
	div#desktop {text-align:left;}
	div#desktop div.group {margin:1rem 0;}
	div#desktop div.group div.ghead {padding:0;}
	/*div#desktop div.group div.gbody {margin-top:1rem}*/
	div#desktop div.group div.gbody .item {display:block; text-align:left;}
	div#desktop div.group div.gbody .item div.icon {font-size:1rem; display:inline-block;}
	div#desktop div.group div.gbody .item div.label {font-size:1rem; display:inline-block;}
}


/*  Mini-frame  */

div#desktop div.group a.item {position:relative;}
div#desktop div.group a.item:hover {z-index:10;}
div#desktop div.group a.item::after {position:absolute; top:-50%; right:0; left:0; width:100%; height:200%; background:linear-gradient(to bottom,#00000000,#00000008,#00000000); z-index:-1;}
div#desktop div.group a.item:hover::after {content:'';}
div#desktop div.group a.item div.miniframe {display:none; position:absolute; box-shadow: 0px 0px 8px rgba(0,0,0,.25);}
div#desktop div.group a.item div.miniframe {background-color:#fff; padding:.5rem; height:20rem; width:36rem; box-sizing:border-box; border:1px solid #0001;}
div#desktop div.group a.item div.miniframe.tall {height:32rem; width:20rem;}
div#desktop div.group a.item div.miniframe:before,
div#desktop div.group a.item div.miniframe::after {position:absolute; content:''; border:.75rem solid #00000001; /*border-radius:50%;*/}

/* Position: default */
div#desktop div.group a.item div.miniframe.def {left:20%; top:calc(100% + .75rem); animation:fade-in-up 0.25s ease;}
div#desktop div.group a.item div.miniframe.def:before {left:1.5rem; transform:translateX(-50%); bottom:calc(100% + 2px); border-bottom-color:#999;}
div#desktop div.group a.item div.miniframe.def::after {left:1.5rem; transform:translateX(-50%); bottom:100%; border-bottom-color:#fff;}

/* Position: horizontally flipped */
div#desktop div.group a.item div.miniframe.flip-x {right:20%; top:calc(100% + .75rem); animation:fade-in-up 0.25s ease;}
div#desktop div.group a.item div.miniframe.flip-x:before,
div#desktop div.group a.item div.miniframe.flip-x::after {left:auto; bottom:auto;}
div#desktop div.group a.item div.miniframe.flip-x:before {right:1.5rem; transform:translateX(50%); bottom:calc(100% + 2px); border-bottom-color:#999;}
div#desktop div.group a.item div.miniframe.flip-x::after {right:1.5rem; transform:translateX(50%); bottom:100%; border-bottom-color:#fff;}
/*div#desktop div.group a.item div.miniframe.flip-x:before {content:'flip-x';}*/

/* Position: vertically flipped */
div#desktop div.group a.item div.miniframe.flip-y {left:20%; bottom:calc(100% + .75rem); animation:fade-in-down 0.25s ease;}
div#desktop div.group a.item div.miniframe.flip-y:before,
div#desktop div.group a.item div.miniframe.flip-y::after {left:auto; bottom:auto;}
div#desktop div.group a.item div.miniframe.flip-y:before {left:1.5rem; transform:translateX(-50%); top:calc(100% + 2px); border-top-color:#999;}
div#desktop div.group a.item div.miniframe.flip-y::after {left:1.5rem; transform:translateX(-50%); top:100%; border-top-color:#fff;}
/*div#desktop div.group a.item div.miniframe.flip-y:before {content:'flip-y';}*/

/* Position: horizontally flipped and vertically flipped */
div#desktop div.group a.item div.miniframe.flip-x-y {right:20%; bottom:calc(100% + .75rem); animation:fade-in-down 0.25s ease;}
div#desktop div.group a.item div.miniframe.flip-x-y:before,
div#desktop div.group a.item div.miniframe.flip-x-y::after {left:auto; bottom:auto;}
div#desktop div.group a.item div.miniframe.flip-x-y:before {right:1.5rem; transform:translateX(50%); top:calc(100% + 2px); border-top-color:#999;}
div#desktop div.group a.item div.miniframe.flip-x-y::after {right:1.5rem; transform:translateX(50%); top:100%; border-top-color:#fff;}
/*div#desktop div.group a.item div.miniframe.flip-x-y:before {content:'flip-x-y';}*/

div#desktop div.group a.item div.miniframe div.mfbox {width:100%; height:100%; position:relative; border:1px solid #000; padding:0;}
div#desktop div.group a.item div.miniframe div.mfbox div.section {width:50%; height:100%; float:left;}
div#desktop div.group a.item div.miniframe.tall div.mfbox div.section {width:100%; height:50%; float:none; /*display:block;*/}
div#desktop div.group a.item div.miniframe div.mfbox div.preview,
div#desktop div.group a.item div.miniframe div.mfbox div.desc {display:inline-block; height:100%; width:100%; box-sizing:border-box; border:.5px solid #000;}
div#desktop div.group a.item div.miniframe div.mfbox div.desc {text-align:center; overflow:hidden; padding:1.5rem 1.25rem; position:relative;}
div#desktop div.group a.item div.miniframe div.mfbox div.desc::after {content:''; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(to bottom,#0000 85%,#fff);}
div#desktop div.group a.item div.miniframe div.mfbox div.preview iframe {height:200%; width:200%; transform:scale(.5) translate(-50%,-50%); box-sizing:border-box;}


@keyframes fade-in-down {
	from 	{opacity:0; transform:translateY(-2rem);}
	to 		{opacity:1; transform:translateY(0);}
}
@keyframes fade-in-up {
	from 	{opacity:0; transform:translateY(2rem);}
	to 		{opacity:1; transform:translateY(0);}
}