html {
  font-size: 62.5%;
}

@media screen and (max-width: 991.98px) {
	html {
		font-size: 59%;
	}
}

@media screen and (max-width: 767.98px) {
	html {
		font-size: 56%;
	}
}

@media screen and (max-width: 575.98px) {
	html {
		font-size: 52%;
	}
}

:root {
	/* ==========================================================================
	Colors
	========================================================================== */
	--color-1: #170E00;
	--color-1_hover: #3E3D3C;
	
	--color-1p: #CBB7DD;
	--color-1p_hover: #DCCCEA;
	
	--color-1b: #B7D5DD;
	--color-1b_hover: #AADDEA;
	
	--color-1y: #DDCCB7;
	--color-1y_hover: #E7D3BB;
	
	/* ==========================================================================
	Fonts
	========================================================================== */
	--font-color-1: #170E00;
	--font-color-2: #5B5449;
	
	--font-color-1p: #2D1E3E;
	--font-color-2p: #594A6B;
	
	--font-color-1b: #1A3C40;
	--font-color-2b: #4A6568;
	
	--font-color-1y: #2B2521;
	--font-color-2y: #594D45;
	
	/* ==========================================================================
	Backgrounds
	========================================================================== */
	--bg-1: #E3F7FC;
	--bg-1-border: #9EC6D1;
	--bg-2: #2B2521;
	--bg-3: #ccc;
	
	--bg-1p: #F0E3FC;
	--bg-1p-border: #B99ED1;
	--bg-2p: #2D1E3E;
	
	--bg-1b: #E3F7FC;
	--bg-1b-border: #9EC6D1;
	--bg-2b: #1A3C40;
	
	--bg-1y: #FEF8F1;
	--bg-1y-border: #D6C2A8;
	--bg-2y: #2B2521;
	
	/* ==========================================================================
	Whites
	========================================================================== */
	--white-1: #ffffff;
	--white-2: #eeeeee;
	--white-3: #dddddd;
	--white-4: #cccccc;
	--white-5: #bbbbbb;
	--white-6: #aaaaaa;
	
	/* ==========================================================================
	Blacks
	========================================================================== */
	--black-1: #000000;
	--black-2: #111111;
	--black-3: #222222;
	--black-4: #333333;
	--black-5: #444444;
	--black-6: #555555;
	--black-7: #666666;
	--black-8: #777777;
	
	/* ==========================================================================
	Woocommerce
	========================================================================== */
	--woo-star: #F59E0B;
	
	/* ==========================================================================
	Activity Colors
	========================================================================== */
	--alert-success: #28a745;
	--alert-success_hover: #218838;
	--alert-success-bg: #d4edda;
	--alert-success-border: #c3e6cb;
	
	--alert-warning: #856404;
	--alert-warning_hover: #6a5003;
	--alert-warning-bg: #fff3cd;
	--alert-warning-border: #ffeeba;
	
	--alert-danger: #c82333;
	--alert-danger_hover: #a51c2a;
	--alert-danger-bg: #f8d7da;
	--alert-danger-border: #f5c6cb;
	
	--alert-info: #0d6efd;
	--alert-info_hover: #0b5ed7;
	--alert-info-bg: #cfe2ff;
	--alert-info-border: #b6d4fe;
	
	/* ==========================================================================
	Shadows
	========================================================================== */
	--shadow-1: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
	
	/* ==========================================================================
	Radius
	========================================================================== */
	--radius-1: 0.2rem;
	--radius-2: 0.4rem;
	--radius-3: .8rem;
	--radius-4: 1.6rem;
	--radius-5: 3.2rem;
	--radius-6: 4rem;
	--radius-7: 8rem;
	--radius-8: 16rem;
	--radius-9: 32rem;
	--radius-full: 9999px;
}

@media (max-width: 992px) {
	:root {
		--radius-9: 24rem;
		--radius-8: 12rem;
		--radius-7: 6rem;
		--radius-6: 3.6rem;
	}
}

@media (max-width: 768px) {
	:root {
		--radius-4: 1.4rem;
		--radius-5: 2.4rem;
		--radius-6: 3.2rem;
		--radius-7: 6rem;
		--radius-8: 8rem;
		--radius-9: 16rem;
	}
}

@media (max-width: 576px) {
	:root {
		--radius-2: 0.3rem;
		--radius-3: .6rem;
		--radius-4: 1rem;
		--radius-5: 2rem;
		--radius-6: 2.6rem;
		--radius-7: 4.2rem;
		--radius-8: 6rem;
		--radius-9: 12rem;
	}
}