﻿
/** DO NOT DELETE OR REMOVE ** customize scrollbar width, as well as thumb and track color INCLUDING FIREFOX **/
7878html {
	77scrollbar-width: auto;
	77scrollbar-width: thin;
	scrollbar-width: thin !IMPORTANT;
	scrollbar-color:  #3d3d29 #160410;
}


7878html 7878.button-group {
	scrollbar-width: thin !IMPORTANT;
	scrollbar-color:  #160410 #160410;
}

/** END OF DO NOT DELETE OR REMOVE ** customize scrollbar width, as well as thumb and track color INCLUDING FIREFOX **/









/***************************************************************************/



button {
	user-select: none !important;
	}


.container_btnNAV {
	WIDTH: 100%; 
	display: flex;
	justify-content: space-around;
	}



.button-group {
	height: 75px;
	overflow-x: auto;
	overflow-y: hidden !important;
  	-webkit-overflow-scrolling: touch;

	}









.container_btnNAV .button {
	position: relative;
	top: 0;
	left: 0;
	width: auto;
	height: 35px;
	margin: 0;
	justify-content: center;  
	align-items: center; 
	FONT-SIZE: 13PX; 
	}

	
.container_btnNAV .button a { 
	position: relative;/** IMPORTANT DO NOT REMOVE OR UPDATE OR CHANGE **/
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 0.05) !important;
	box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 30px; 
	padding: 18px;
	letter-spacing: 1px;
	text-decoration: none;
	overflow: hidden;
	color: #fff;
	font-weight: 400px; FONT-WEIGHT: BOLD; 
	z-index: 1;
	transition: 0.5s;
	backdrop-filter: blur(15px);
	}

.container_btnNAV .button:hover a {
	letter-spacing: 1px; 
	}

.container_btnNAV .button a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent) !important;
	transform: skewX(45deg) translate(0);
	transition: 0.5s;
	filter: blur(0px);
}
.container_btnNAV .button:hover a::before {
	transform: skewX(45deg) translate(200px);
}
.container_btnNAV .button::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translatex(-50%);
	bottom: -5px;bottom: 6px;
	width: 30px;
	height: 10px;
	background: #f00;
	border-radius: 10px;
	transition: 0.5s;
	transition-delay: 0.5; 
}
.container_btnNAV .button:hover::before /*lightup button*/ {
	bottom: 0;
	height: 50%;
	width: 80%;
	border-radius: 30px; 
}

.container_btnNAV .button::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translatex(-50%);
	top: -5px;  top: 6px;
	width: 30px;
	height: 10px;
	background: #f00;
	border-radius: 10px;
	transition: 0.5s;
	transition-delay: 0.5; 
}
.container_btnNAV .button:hover::after /*lightup button*/ {
	top: 0;
	height: 50%;
	width: 80%;
	border-radius: 30px; 
}
.container_btnNAV .button:nth-child(1)::before, /*chnage 1*/
.container_btnNAV .button:nth-child(1)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
}
.container_btnNAV .button:nth-child(2)::before, /* 2*/
.container_btnNAV .button:nth-child(2)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
}
.container_btnNAV .button:nth-child(3)::before, /* 3*/
.container_btnNAV .button:nth-child(3)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
}

.container_btnNAV .button:nth-child(4)::before, /* 4*/
.container_btnNAV .button:nth-child(4)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(5)::before, /* 5*/
.container_btnNAV .button:nth-child(5)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(6)::before, /* 6*/
.container_btnNAV .button:nth-child(6)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(7)::before, /* 7*/
.container_btnNAV .button:nth-child(7)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(8)::before, /* 8*/
.container_btnNAV .button:nth-child(8)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(9)::before, /* 9*/
.container_btnNAV .button:nth-child(9)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(10)::before, /* 10*/
.container_btnNAV .button:nth-child(10)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(11)::before, /* 11*/
.container_btnNAV .button:nth-child(11)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(12)::before, /* 12*/
.container_btnNAV .button:nth-child(12)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(13)::before, /* 13*/
.container_btnNAV .button:nth-child(13)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(14)::before, /* 14*/
.container_btnNAV .button:nth-child(14)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(15)::before, /* 15*/
.container_btnNAV .button:nth-child(15)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(16)::before, /* 16*/
.container_btnNAV .button:nth-child(16)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(17)::before, /* 17*/
.container_btnNAV .button:nth-child(17)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(8)::before, /* 18*/
.container_btnNAV .button:nth-child(18)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(19)::before, /* 19*/
.container_btnNAV .button:nth-child(19)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(20)::before, /* 20*/
.container_btnNAV .button:nth-child(20)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(21)::before, /* 21*/
.container_btnNAV .button:nth-child(21)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(22)::before, /* 22*/
.container_btnNAV .button:nth-child(22)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(23)::before, /* 23*/
.container_btnNAV .button:nth-child(23)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(24)::before, /* 24*/
.container_btnNAV .button:nth-child(24)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(25)::before, /* 25*/
.container_btnNAV .button:nth-child(25)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(26)::before, /* 26*/
.container_btnNAV .button:nth-child(26)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}

.container_btnNAV .button:nth-child(27)::before, /* 27*/
.container_btnNAV .button:nth-child(27)::after {
	background: radial-gradient(#480D35 ,#17151d);
	/** box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff; **/
 
	box-shadow: 0 0 3px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff,
		0 0 300px #2db2ff;
	}



/***************************************************************************/




/**REMOVE BROWSER DEFAUL BUTTON FORMAT **/
button {
  /* cross-platform styles */
  font: inherit;
  color: currentColor;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 6px 8px;
  background: none;
  /* Safari-only styles */
  cursor: pointer;
  text-align: center;
  user-select: none;
  appearance: none;
}
/**END OF REMOVE BROWSER DEFAUL BUTTON FORMAT **/




.button {
	border: 0px;
	}