/*Important: cannot add margin to .floatingMenu.floatingMenu due to 
the dragging effect is depend on offsetTop & offsetLeft 
which is depend on the distance between top/left with the element + margin
*/
.floatingMenu.floatingMenu{position: fixed; width: 15vw; height: 15vw; min-width: 90px; min-height: 90px; max-width: 110px; max-height: 110px; z-index:9000;touch-action: none;}
.floatingMenu.floatingMenu button{
	background: none;
    border: none;
}
.floatingMenu.floatingMenu #btnClose {
    top: 0;
    right: 0;
    position: absolute;
    z-index: 2;
    color: white;
    filter: drop-shadow(0px 0px 1px black);
}
.floatingMenu.floatingMenu .main {
    position: absolute;width:100%; height: 100%; z-index: 1; padding: 10px;
}
.floatingMenu.floatingMenu .main img{width:100%; height: auto;}
.floatingMenu.floatingMenu ul {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    padding: 0;
}
.floatingMenu.floatingMenu ul li {
    position: absolute;
    max-width:70px; 
    min-width: 60px;
    width: 14vw;
    height: auto;
    transform: scale(0.2);
    object-fit: contain;
    filter: drop-shadow(0px 0px 3px dimgray);
    list-style: none;
}
.floatingMenu.floatingMenu ul li:hover{
	z-index: 1;
}
.floatingMenu.floatingMenu ul li:hover img {
    filter: drop-shadow(0px 0px 6px crimson);
    transform: scale(1.2) rotate(-15deg);
}
.floatingMenu.floatingMenu ul li img{width:100%; height: 100%; padding: 4px;}

.floatingMenu.floatingMenu ul li:nth-child(1),
.floatingMenu.floatingMenu.off:not(.nohover) ul li:nth-child(1){
	transition: opacity .2s,transform .2s;	
}
.floatingMenu.floatingMenu ul li:nth-child(2),
.floatingMenu.floatingMenu.off:not(.nohover) ul li:nth-child(2){
	transition: opacity .3s,transform .3s;
}
.floatingMenu.floatingMenu ul li:nth-child(3),
.floatingMenu.floatingMenu.off:not(.nohover) ul li:nth-child(3){
	transition: opacity .4s,transform .4s;
}
.floatingMenu.floatingMenu ul li:nth-child(4),
.floatingMenu.floatingMenu.off:not(.nohover) ul li:nth-child(4){
	transition: opacity .5s,transform .5s;
}
.floatingMenu.floatingMenu ul li:nth-child(5),
.floatingMenu.floatingMenu.off:not(.nohover) ul li:nth-child(5){
	transition: opacity .6s,transform .6s;
}
.floatingMenu.floatingMenu ul li:nth-child(6),
.floatingMenu.floatingMenu.off:not(.nohover) ul li:nth-child(6){
	transition: opacity .7s,transform .7s;
}

@media(hover: hover){
	.floatingMenu.floatingMenu:not(.nohover):hover .main img{
		filter: brightness(0.7);
		transform: scale(0.95);
	}
	.floatingMenu.floatingMenu:not(.nohover):hover ul li:nth-child(1){
		transform: scale3d(1,1,1) rotate(-360deg) translate(0%, -120%);
	    transition: opacity .2s,transform .2s;
	}
	
	.floatingMenu.floatingMenu:not(.nohover):hover ul li:nth-child(2){
		transform: scale3d(1,1,1) rotate(-360deg) translate(-90%, -90%);
	    transition: opacity .3s,transform .3s;
	}
	
	.floatingMenu.floatingMenu:not(.nohover):hover ul li:nth-child(3){
		transform: scale3d(1,1,1) rotate(-360deg) translate(-120%, -0%);
	    transition: opacity .4s,transform .4s;
	}
	
	.floatingMenu.floatingMenu:not(.nohover):hover ul li:nth-child(4){
		transform: scale3d(1,1,1) rotate(-360deg) translate(-90%, 90%);
	    transition: opacity .5s,transform .5s;
	}
	
	.floatingMenu.floatingMenu:not(.nohover):hover ul li:nth-child(5){
		transform: scale3d(1,1,1) rotate(-360deg) translate(-0%, 120%);
	    transition: opacity .6s,transform .6s;
	}
	
	.floatingMenu.floatingMenu:not(.nohover):hover ul li:nth-child(6){
		transform: scale3d(1,1,1) rotate(-360deg) translate(90%, 90%);
	    transition: opacity .7s,transform .7s;
	}
}
@media (hover: none){
	/*Replace hover transition with .on*/
	.floatingMenu.floatingMenu.on:not(.nohover) .main img{
		filter: brightness(0.7);
		transform: scale(0.95);
	}

	.floatingMenu.floatingMenu.on:not(.nohover) ul li:nth-child(1){
		transform: scale3d(1,1,1) rotate(-360deg) translate(0%, -120%);
	    transition: opacity .2s,transform .2s;
	}
	.floatingMenu.floatingMenu.on:not(.nohover) ul li:nth-child(2){
		transform: scale3d(1,1,1) rotate(-360deg) translate(-90%, -90%);
	    transition: opacity .3s,transform .3s;
	}
	.floatingMenu.floatingMenu.on:not(.nohover) ul li:nth-child(3){
		transform: scale3d(1,1,1) rotate(-360deg) translate(-120%, -0%);
	    transition: opacity .4s,transform .4s;
	}
	.floatingMenu.floatingMenu.on:not(.nohover) ul li:nth-child(4){
		transform: scale3d(1,1,1) rotate(-360deg) translate(-90%, 90%);
	    transition: opacity .5s,transform .5s;
	}
	.floatingMenu.floatingMenu.on:not(.nohover) ul li:nth-child(5){
		transform: scale3d(1,1,1) rotate(-360deg) translate(-0%, 120%);
	    transition: opacity .6s,transform .6s;
	}
	.floatingMenu.floatingMenu.on:not(.nohover) ul li:nth-child(6){
		transform: scale3d(1,1,1) rotate(-360deg) translate(90%, 90%);
	    transition: opacity .7s,transform .7s;
	}
}

@media (max-width: 768px){
	.floatingMenu.floatingMenu{width:90px; height:90px;}
	.floatingMenu.floatingMenu ul li{width:60px;}
}

/* The animation code */
@keyframes hide-bottom-right {
  to {transform: translate(50%, 50%) scale(0.85);}
}
@keyframes hide-bottom-left {
  to {transform: translate(-50%, 50%) scale(0.85);}
}
@keyframes hide-top-right {
  to {transform: translate(50%, -50%) scale(0.85);}
}
@keyframes hide-top-left {
  to {transform: translate(-50%, -50%) scale(0.85);}
}

@keyframes hide-left{
	to {transform: translateX(-50%) scale(0.85);}
}
@keyframes hide-right{
	to {transform: translateX(50%) scale(0.85);}
}
@keyframes hide-top{
	to {transform: translateY(-50%) scale(0.85);}
}
@keyframes hide-bottom{
	to {transform: translateY(50%) scale(0.85);}
}

.noclose #btnClose{display:none;}

.s_hide.bottom,
.s_hide.top,
.s_hide.right,
.s_hide.left{
	animation-fill-mode: forwards;
  	animation-duration: .5s;
}

.s_hide.right{animation-name: hide-right;}
.s_hide.left{animation-name: hide-left;}
.s_hide.top{animation-name: hide-top;}
.s_hide.bottom{animation-name: hide-bottom;}

/* hide at corner*/
.s_hide.bottom.right{animation-name: hide-bottom-right;}
.s_hide.bottom.left{animation-name: hide-bottom-left;}
.s_hide.top.right{animation-name: hide-top-right;}
.s_hide.top.left{animation-name: hide-top-left;}

/*Custom Filter Effect for floating Menu*/
.floatingMenu.floatingMenu.s_hide{filter: grayscale(1);}
.floatingMenu.floatingMenu:not(.s_hide){filter: grayscale(0) drop-shadow(0px 0px 3px dimgray);}