.btn-rule, .btn-rule:focus {
	transition: all .15s ease; 
	border-radius: 20px;
	color: #FFF;
	padding: 5px 15px;
}

.btn-rule:hover {
	transform: translateY(4px);
	-webkit-transform: translateY(4px);
	color: #FFF;
}
.btn-rule .fas {
	color: #feda02;
	padding-right: 5px;
}


.dropdown-bg {
	border-radius: 15px;
	border: none;
	color: #FFF;
	
}

.dropdown-bg a, .dropdown-bg a:hover  {
	color: #FFF;
}


/* ================= PINK ================== */

.btn-pink, .btn-pink:focus {
	background-color: #f47d8f;
	box-shadow: 0px 8px 0px 0px #c1505d;
	-webkit-box-shadow: 0px 8px 0px 0px #c1505d;
	-moz-box-shadow: 0px 8px 0px 0px #c1505d;
}

.btn-pink:hover {
	box-shadow: 0px 4px 0px 0px #c1505d;
	-webkit-box-shadow: 0px 4px 0px 0px #c1505d;
	-moz-box-shadow: 0px 4px 0px 0px #c1505d;
}


.dropdown-bg-pink {
	
	background-color: #f47d8f;
	box-shadow: 0px 8px 0px -1px #c1505d;
	-webkit-box-shadow: 0px 8px 0px -1px #c1505d;
	-moz-box-shadow: 0px 8px 0px -1px #c1505d;
	
}
	
.dropdown-bg-pink .dropdown-item:focus, 
.dropdown-bg-pink .dropdown-item:hover {
	background-color: #c1505d;
}

.dropdown-bg-pink .dropdown-divider {
	border-top: 1px solid #c1505d;
}





/* ================= TEAL ================== */

.btn-teal, .btn-teal:focus {
	background-color: #19c8b9;
	box-shadow: 0px 8px 0px 0px #2daca1;
	-webkit-box-shadow: 0px 8px 0px 0px #2daca1;
	-moz-box-shadow: 0px 8px 0px 0px #2daca1;
}

.btn-teal:hover {
	box-shadow: 0px 4px 0px 0px #2daca1;
	-webkit-box-shadow: 0px 4px 0px 0px #2daca1;
	-moz-box-shadow: 0px 4px 0px 0px #2daca1;
}


.dropdown-bg-teal {
	
	background-color: #19c8b9;
	box-shadow: 0px 8px 0px -1px #2daca1;
	-webkit-box-shadow: 0px 8px 0px -1px #2daca1;
	-moz-box-shadow: 0px 8px 0px -1px #2daca1;
	
}
	
.dropdown-bg-teal .dropdown-item:focus, 
.dropdown-bg-teal .dropdown-item:hover {
	background-color: #2daca1;
}

.dropdown-bg-teal .dropdown-divider {
	border-top: 1px solid #2daca1;
}


/* ================= RED ================== */

.btn-red, .btn-red:focus {
	background-color: #eb7373;
	box-shadow: 0px 8px 0px 0px #b64444;
	-webkit-box-shadow: 0px 8px 0px 0px #b64444;
	-moz-box-shadow: 0px 8px 0px 0px #b64444;
}

.btn-red:hover {
	box-shadow: 0px 4px 0px 0px #b64444;
	-webkit-box-shadow: 0px 4px 0px 0px #b64444;
	-moz-box-shadow: 0px 4px 0px 0px #b64444;
}


.dropdown-bg-red {
	
	background-color: #eb7373;
	box-shadow: 0px 8px 0px -1px #b64444;
	-webkit-box-shadow: 0px 8px 0px -1px #b64444;
	-moz-box-shadow: 0px 8px 0px -1px #b64444;
	
}
	
.dropdown-bg-red .dropdown-item:focus, 
.dropdown-bg-red .dropdown-item:hover {
	background-color: #b64444;
}

.dropdown-bg-red .dropdown-divider {
	border-top: 1px solid #b64444;
}


/* ================= Blue ================== */



.btn-blue, .btn-blue:focus {
	background-color: #5fa0d7;
	box-shadow: 0px 8px 0px 0px #2b5a82;
	-webkit-box-shadow: 0px 8px 0px 0px #2b5a82;
	-moz-box-shadow: 0px 8px 0px 0px #2b5a82;
	
}

.btn-blue:hover {
	box-shadow: 0px 4px 0px 0px #2b5a82;
	-webkit-box-shadow: 0px 4px 0px 0px #2b5a82;
	-moz-box-shadow: 0px 4px 0px 0px #2b5a82;
	
}
/* ================= Yellow ================== */

.btn-yellow, .btn-yellow:focus {
		color: #908200;
	background-color: #f0df3e;
	box-shadow: 0px 8px 0px 0px #908200;
	-webkit-box-shadow: 0px 8px 0px 0px #908200;
	-moz-box-shadow: 0px 8px 0px 0px #908200;
}

.btn-yellow:hover {
	color: #908200;
	box-shadow: 0px 4px 0px 0px #908200;
	-webkit-box-shadow: 0px 4px 0px 0px #908200;
	-moz-box-shadow: 0px 4px 0px 0px #908200;
}
	
/* ================= Black ================== */
.btn-black, .btn-black:focus {
		color: #FFFFFF;
	/* LIGHT 3d3d3d DARK 222222 MIDDLE 262626 */
	background-color: #3d3d3d;
	box-shadow: 0px 8px 0px 0px #262626;
	-webkit-box-shadow: 0px 8px 0px 0px #262626;
	-moz-box-shadow: 0px 8px 0px 0px #262626;
}

.btn-black:hover {
	color: #FFFFFF;
	box-shadow: 0px 4px 0px 0px #262626;
	-webkit-box-shadow: 0px 4px 0px 0px #262626;
	-moz-box-shadow: 0px 4px 0px 0px #262626;
}

.dropdown-bg-black {
	
	background-color: #3d3d3d;
	box-shadow: 0px 8px 0px -1px #262626;
	-webkit-box-shadow: 0px 8px 0px -1px #262626;
	-moz-box-shadow: 0px 8px 0px -1px #262626;
	
}
	
.dropdown-bg-black .dropdown-item:focus, 
.dropdown-bg-black .dropdown-item:hover {
	background-color: #262626;
}

.dropdown-bg-black .dropdown-divider {
	border-top: 1px solid #262626;
}




/* ================= BROWN ================== */



.btn-brown, .btn-brown:focus {
	background-color: #827157;
	box-shadow: 0px 8px 0px 0px #5d4a2c;
	-webkit-box-shadow: 0px 8px 0px 0px #5d4a2c;
	-moz-box-shadow: 0px 8px 0px 0px #5d4a2c;
	
}

.btn-brown:hover {
	box-shadow: 0px 4px 0px 0px #5d4a2c;
	-webkit-box-shadow: 0px 4px 0px 0px #5d4a2c;
	-moz-box-shadow: 0px 4px 0px 0px #5d4a2c;
	
}


.dropdown-bg-brown {
	background-color: #827157;
	box-shadow: 0px 8px 0px -1px #5d4a2c;
	-webkit-box-shadow: 0px 8px 0px -1px #5d4a2c;
	-moz-box-shadow: 0px 8px 0px -1px #5d4a2c;
	
}
	
.dropdown-bg-brown .dropdown-item:focus, 
.dropdown-bg-brown .dropdown-item:hover {
	background-color: #5d4a2c;
}

.dropdown-bg-brown .dropdown-divider {
	border-top: 1px solid #5d4a2c;
}
	

/* ================= LIGHT BROWN ================== */

.btn-light-brown, .btn-light-brown:focus {
	background-color: #B6A893;
	box-shadow: 0px 8px 0px 0px #827157;
}

.btn-light-brown:hover {
	box-shadow: 0px 4px 0px 0px #827157;
}

.btn-light-brown .fas {
	color: #827157;
	padding-right: 5px;
}




/* ================= Cream ================== */

.btn-cream, .btn-cream:focus {
	background-color: #f3efd6;
	box-shadow: 0px 8px 0px 0px #d7c480;
	color: #827157;
}

.btn-cream:hover {
	box-shadow: 0px 4px 0px 0px #d7c480;
	color: #827157;
}

.btn-cream .fas {
	color: #827157;
	padding-right: 5px;
}











.btn-rule.btn-sm {
	padding: 2px 8px!important;
}