﻿.your-site-the-best {
	bottom: 0 !important; 
	margin-bottom: 0 !important;;  
	margin-left: 0 !important; 
	left: 0 !important; 
	position: fixed !important; 
	z-index: 120 !important !important; 
	height: 1px !important; 
	border: 0px;
	}

#button_menu_customized {
	width: 50px;
	height: 50px;
	}


7878BEFORE7878.nav-option {
	transform: translateX(50%) translateY(-3vh) !important; 
	display: flex; 
	z-index: 1200 !important;
	/**CENTER DIV VERTICALLY**/
  		position: relative;
  		right: 50%;
  		-webkit-transform: translateX(-50%);
  		-ms-transform: translateX(-50%);
  		transform: translateY(-X0%);
	/**END OF CENTER DIV VERTICALLY**/ 
	}


.nav-option {
	7878transform: translateX(50%) translateY(-3vh) !important;
	transform: translateX(50%) translateY(0vh) !important; 
	display: flex; 
	z-index: 1200 !important;
	/**CENTER DIV VERTICALLY**/
  		position: relative;
  		right: 50%;
  		-webkit-transform: translateX(-50%);
  		-ms-transform: translateX(-50%);
  		transform: translateY(-50%);
	/**END OF CENTER DIV VERTICALLY**/
	}

#btn {
  	position: absolute;
  	width: 50px !important;
  	height: 50px !important;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	cursor: pointer;
  	background: radial-gradient(#480D35 ,#17151d);  
  	border-radius: 50%;
  	border: none;
  	outline: none;
	}

#btn span {
  	position: absolute;
  	width: 27px;
  	height: 4px;
  	top: 50%;
  	left: 50%;
  	BACKGROUND: #E8E8E8;
  	border-radius: 2px;
  	overflow: hidden;
  	transition: all 0.3s linear; 
	}

#btn span::before {/**CLOSE BUTTON**/
  	content: "";
  	position: absolute;
  	width: 0;
  	height: 100%;
  	top: 0;
  	right: 0;
  	666background: gray; background: #CC0000;
  	transition: all 0.3s linear;
	}

#btn span:nth-child(1) {
  animation: span-first-off 0.5s ease-in-out;
  animation-fill-mode: forwards;
}
#btn span:nth-child(2) {
  animation: span-second-off 0.5s ease-in-out;
  animation-fill-mode: forwards;
}
#btn span:nth-child(3) {
  animation: span-third-off 0.5s ease-in-out;
  animation-fill-mode: forwards;
}

#btn.on:hover span::before {
  width: 100%;
  transition: all 0.3s linear;
}
#btn.on span:nth-child(1) {
  animation: span-first-on 0.5s ease-in-out;
  animation-fill-mode: forwards;
}
#btn.on span:nth-child(2) {
  animation: span-second-on 0.5s ease-in-out;
  animation-fill-mode: forwards;
}
#btn.on span:nth-child(3) {
  animation: span-third-on 0.5s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes span-first-on {
  0% {
    transform: translate(-50%, -300%);
  }
  30% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}
@keyframes span-first-off {
  0% {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  30% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -300%);
  }
}
@keyframes span-second-on {
  0% {
    transform: translate(-50%, -50%);
  }
  25% {
    background: gray;
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    transform: translate(-150%, -50%) scale(0);
  }
}
@keyframes span-second-off {
  0% {
    transform: translate(-150%, -50%) scale(0);
  }
  25% {
    background: gray;
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
@keyframes span-third-on {
  0% {
    transform: translate(-50%, 200%);
  }
  30% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(-50%, -50%) rotate(45deg);
  }
}
@keyframes span-third-off {
  0% {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  30% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, 200%);
  }
}






/** BEGINNING OF MEDIA PLAYER INDICATOR SPIN **/
#btn {
	padding: 0px;
  	--border-angle: 0turn;
  	--main-bg: conic-gradient(
      		from var(--border-angle),
      		#213,
      		#112 5%,
      		#112 60%,
      		#213 95%);
  	border: solid 3px transparent; 
  	border-radius: 2em; 
  	--gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent);
  	background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box;
  	background-position: center center;
  	-webkit-animation: bg-spin 3s linear infinite;
          	animation: bg-spin 3s linear infinite; 
		}

@-webkit-keyframes bg-spin {
  	to {
    		--border-angle: 1turn;
  		}
	}



@keyframes bg-spin {
  	to {
    		--border-angle: 1turn;
  		}
	}



#btn:hover {
  	-webkit-animation-play-state: paused;
          	animation-play-state: paused;

  	border: solid 1px transparent;
  	border-radius: 50%;
  	--main-bg: conic-gradient(
      		from var(--border-angle),
      		#7733FF,
      		#BB99FF 5%,
      		#BB99FF 60%,
      		#7733FF 95%); background: #480D35;
	}



@property --border-angle {
  	syntax: "<angle>";
  	inherits: true;
  	initial-value: 0turn;
		}
	}