@charset "utf-8";

/*******************************************/
/* Fonts */
/*******************************************/

@font-face {
	font-family: 'HsFontRegular';
	src: url('webfonts/proximanovaregular.woff') format('woff');
}

@font-face {
	font-family: 'HsFontSemiBold';
	src: url('webfonts/proximanovasemibold.woff') format('woff');
}

@font-face {
	font-family: 'HsFontBold';
	src: url('webfonts/proximanovabold.woff') format('woff');
}

/*******************************************/
/* Variables */
/*******************************************/

:root {
	--red : #B60002;
	--green: #89BE06;
	--blue: #374759;
	--orange: #FF6600;
	--yellow :#FCB813;
	--grey: #ABABAF;
}

/*******************************************/
/* Colors */
/*******************************************/

.red {
	color: var(--red);
}

.green {
	color: var(--green);
}

.blue {
	color: var(--blue);
}

.orange {
	color: var(--orange);
}

.yellow {
	color: var(--yellow);
}

.grey {
	color: var(--grey);
}

/*******************************************/
/* Backgrounds */
/*******************************************/

.red-bg {
	background-color: var(--red);
}

.green-bg {
	background-color: var(--green);
}

.blue-bg {
	background-color: var(--blue);
}

.orange-bg {
	background-color: var(--orange);
}

.yellow-bg {
	background-color: var(--yellow);
}

.grey-bg {
	background-color: var(--grey);
}

/*******************************************/
/* Hovers */
/*******************************************/

.red-hover:hover {
	color: var(--red);
}

.green-hover:hover {
	color: var(--green);
}

.blue-hover:hover {
	color: var(--blue);
}

.orange-hover:hover {
	color: var(--orange);
}

.yellow-hover:hover {
	color: var(--yellow);
}

.grey-hover:hover {
	color: var(--grey);
}