:root {
  --white: #ffffff;/* White */
  --black: #555555;/* Black */
  --gray: #e7e7e7;/* Gray */
  --orange: #ffa500; /* Orange */
  --red: #f44336; /* Red */
  --green: #4CAF50;/* Green */
  --blue: #008CBA;/* Blue */
  --purple: #661155;/* Purple */
  --gold: #ffd700;/* Gold */
}

.m8k8ttext-white,.m8k8ttext-hoverwhite:hover{color: var(--white) !important;}
.m8k8ttext-green,.m8k8ttext-hovergreen:hover{color: var(--green) !important;}
.m8k8ttext-blue,.m8k8ttext-hoverblue:hover{color: var(--blue) !important;}
.m8k8ttext-orange,.m8k8ttext-hoverorange:hover{color: var(--orange) !important;}
.m8k8ttext-red,.m8k8ttext-hoverred:hover{color: var(--red) !important;}
.m8k8ttext-gray,.m8k8ttext-hovergray:hover{color: var(--gray) !important;}
.m8k8ttext-black,.m8k8ttext-hoverblack:hover{color: var(--black) !important;}
.m8k8ttext-purple,.m8k8ttext-hoverpurple:hover{color: var(--purple) !important;}
.m8k8ttext-gold,.m8k8ttext-hovergold:hover{color: var(--gold) !important;}

.m8k8tbtn {
	color: var(--white);
	background-color: transparent;
	border: none;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	transition-duration: 0.4s;
}
.m8k8tbtn-white,.m8k8tbtn-hoverwhite:hover{background-color: var(--white) !important;color: var(--black);}
.m8k8tbtn-green,.m8k8tbtn-hovergreen:hover {background-color: var(--green) !important;} 
.m8k8tbtn-blue,.m8k8tbtn-hoverblue:hover {background-color: var(--blue) !important;} 
.m8k8tbtn-orange,.m8k8tbtn-hoverorange:hover {background-color: var(--orange) !important;}
.m8k8tbtn-red,.m8k8tbtn-hoverred:hover {background-color: var(--red) !important;}
.m8k8tbtn-gray,.m8k8tbtn-hovergray:hover {background-color: var(--gray) !important; color: var(--black);} 
.m8k8tbtn-black,.m8k8tbtn-hoverblack:hover {background-color: var(--black) !important;} 
.m8k8tbtn-purple,.m8k8tbtn-hoverpurple:hover {background-color: var(--purple) !important;} 
.m8k8tbtn-gold,.m8k8tbtn-hovergold:hover {color: var(--black) !important;background-color: var(--gold) !important;} 

.m8k8tbg-white{background-color: var(--white) !important;color: var(--black);}
.m8k8tbg-green{background-color: var(--green) !important;} 
.m8k8tbg-blue{background-color: var(--blue) !important;} 
.m8k8tbg-red{background-color: var(--red) !important;}
.m8k8tbg-gray{background-color: var(--gray) !important; color: var(--black);}
.m8k8tbg-black {background-color: var(--black) !important;}
.m8k8tbg-purple {background-color: var(--purple) !important;}
.m8k8tbg-gold {background-color: var(--gold) !important;}

.m8k8tbtn-size1 {font-size: 10px;}
.m8k8tbtn-size2 {font-size: 12px;}
.m8k8tbtn-size3 {font-size: 16px;}
.m8k8tbtn-size4 {font-size: 20px;}
.m8k8tbtn-size5 {font-size: 24px;}

.m8k8tbtn-p0 {padding: 5px 12px;}
.m8k8tbtn-p1 {padding: 10px 24px;}
.m8k8tbtn-p2 {padding: 12px 28px;}
.m8k8tbtn-p3 {padding: 14px 40px;}
.m8k8tbtn-p4 {padding: 32px 16px;}
.m8k8tbtn-p5 {padding: 16px;}

.m8k8tbtn-round1 {border-radius: 2px;}
.m8k8tbtn-round2 {border-radius: 4px;}
.m8k8tbtn-round3 {border-radius: 8px;}
.m8k8tbtn-round4 {border-radius: 12px;}
.m8k8tbtn-round5 {border-radius: 50%;}

.m8k8tbtn-borderwhite {
  border: 2px solid var(--white);
}
.m8k8tbtn-bordergreen {
  border: 2px solid var(--green);
}
.m8k8tbtn-borderblue {
  border: 2px solid var(--blue);
}
.m8k8tbtn-borderred {
  border: 2px solid var(--red);
}
.m8k8tbtn-bordergray {
  border: 2px solid var(--gray);
}
.m8k8tbtn-borderblack {
  border: 2px solid var(--black);
}
.m8k8tbtn-borderpurple {
  border: 2px solid var(--purple);
}
.m8k8tbtn-bordergold {
  border: 2px solid var(--gold);
}

.m8k8tbtn-borderbottomwhite, .m8k8tbtn-hoverborderbottomwhite:hover{
	border-bottom: 3px solid var(--white) !important;
}
.m8k8tbtn-borderbottomgreen, .m8k8tbtn-hoverborderbottomgreen:hover{
  border-bottom: 3px solid var(--green) !important;
}
.m8k8tbtn-borderbottomblue, .m8k8tbtn-hoverborderbottomblue:hover{
  border-bottom: 3px solid var(--blue) !important;
}
.m8k8tbtn-borderbottomred, .m8k8tbtn-hoverborderbottomred:hover{
  border-bottom: 3px solid var(--red) !important;
}
.m8k8tbtn-borderbottomgray, .m8k8tbtn-hoverborderbottomgray:hover {
  border-bottom: 3px solid var(--gray) !important;
}
.m8k8tbtn-borderbottomblack, .m8k8tbtn-hoverborderbottomblack:hover {
  border-bottom: 3px solid var(--black) !important;
}
.m8k8tbtn-borderbottompurple, .m8k8tbtn-hoverborderbottompurple:hover {
  border-bottom: 3px solid var(--purple) !important;
}

.m8k8tbtn-borderbottomgold, .m8k8tbtn-hoverborderbottomgold:hover {
  border-bottom: 3px solid var(--gold) !important;
}


.m8k8tbtn-shadow,.m8k8tbtn-hovershadow:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.m8k8tbtn-shadow-x2,.m8k8tbtn-hovershadow-x2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.m8k8tbtn-pushup {
  text-decoration: none;
  outline: none;
  border: none;
  box-shadow: 0 -9px #999;
}
.m8k8tbtn-pushup:active {
  box-shadow: 0 -5px #666;
  transform: translateY(-4px);
}

.m8k8tbtn-pushdown {
  text-decoration: none;
  outline: none;
  border: none;
  box-shadow: 0 9px #999;
}
.m8k8tbtn-pushdown:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.m8k8tbtn-pushright {
  text-decoration: none;
  outline: none;
  border: none;
  box-shadow: 9px 0 #999;
}
.m8k8tbtn-pushright:active {
  box-shadow: 5px 0 #666;
  transform: translateX(4px);
}
.m8k8tbtn-pushleft {
  text-decoration: none;
  outline: none;
  border: none;
   box-shadow: -9px 0 #999;
}
.m8k8tbtn-pushleft:active {
  box-shadow: -5px 0 #666;
  transform: translateX(-4px);
}