:root {

	/* Pick your colors */
	--errie: #141414;
	--charcoal: #282828;
	--battleship: #5a5a5a;
	--gunmetal: #808080;
	--smoke: #F2F2F2;
	--ashes: #F8F8F8;
	--white: #FFFFFF;
	
	
	--lantern: #b1331f;
	--goldegate: #BA4735;
	--cedar: #C05847;
	
	--pumpkin : #D2651D;
	--squash  : #FA7921;
	--sienna: #ff8636;
	
	--limon: #e8b936;
	--saffron: #FAC637;
	--crayon: #ffd562;
	
	
	--olive   : #566E3D;
	--pickle  : #7a965c;
	--pistacio: #9dbd7b;
	
	
	--indigo  : #0C4767;
	--saphire : #225875;
	--starcommand: #0E78B1;

	
	--violet: #3f2765;
	--plum: #5A4181;
	--grape:#755b9e;

	--orange: #fe5214;
	
	
	--text-on-dark-bg : var(--white);
}


a {
	color: var(--indigo);
}

/*BACKGROUND COLOURS*/

.bg-primary {
	background-color : var(--indigo) !important;
}
.bg-secondary {}
.bg-success {
	background-color : var(--olive) !important;
}
.bg-danger {
	background-color : var(--goldegate) !important;
}
.bg-warning {
	background-color : var(--squash) !important;
}
.bg-info {
	background-color : var(--starcommand) !important;
}



.bg-errie,.bg-grey-900 {
	background-color : var(--errie) !important;
}

.bg-charcoal,.bg-grey-800 {
	background-color : var(--charcoal) !important;
}
.bg-battleship, .bg-grey-500 {
	background-color : var(--battleship) !important;
}
.bg-gunmetal,.bg-grey-400 {
	background-color : var(--gunmetal) !important;
}

.bg-ashes,.bg-grey-300 {
	background-color : var(--ashes) !important;
}
.bg-smoke,.bg-grey-100  {
	background-color : var(--smoke) !important;
}



.bg-light {
	background-color : var(--ashes) !important;
}
.bg-dark {
	background-color : var(--charcoal) !important;
}
.bg-white {
	background-color : var(--white) !important;
}









/*NAV BAR*/

.navbar-dark {
	background-color : var(--charcoal) !important;
}


/*BUTTONS*/


.btn-primary {
	color: var(--text-on-dark-bg) !important;
	background-color: var(--orange) !important;
	border-color: var(--orange) !important;
}
.btn-outline-primary {
	color: var(--orange) !important;
	border-color: var(--orange) !important;
}
.btn-primary:hover,.btn-outline-primary:hover {
	color: var(--text-on-dark-bg) !important;
	background-color: var(--saffron) !important;
	border-color: var(--saffron) !important;
}


.btn-danger {
	color: var(--text-on-dark-bg) !important;
	background-color: var(--goldegate) !important;
	border-color: var(--goldegate) !important;
}
.btn-outline-danger {
	color: var(--goldegate) !important;
	border-color: var(--goldegate) !important;
}
.btn-danger:hover,.btn-outline-danger:hover {
	color: var(--text-on-dark-bg) !important;
	background-color: var(--cedar) !important;
	border-color: var(--cedar) !important;
}


/* TEXT */
.text-primary {
	color: var(--indigo) !important;
}
.text-danger {
	color: var(--goldegate) !important;
}
.text-success {
	color: var(--olive) !important;
}
.text-warning {
	color: var(--pumpkin) !important;
}
.text-info {
	color: var(--starcommand) !important;
}

.text-light {
	color: var(--battleship) !important;
}

/* PAGINATION */

.pagination > li > a
{
	background-color: var(--white);
	color: var(--plum);
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
	color: var(--battleship);
	background-color: var(--smoke);
}

.pagination > .active > a
{
	color: var(--text-on-dark-bg);
	background-color: var(--plum) !Important;
	border: solid 1px var(--plum) !Important;
}

.pagination > .active > a:hover
{
	background-color: var(--plum) !Important;
	border: solid 1px var(--plum);
}