a,
p,
span {
	font-family: Satoshi !important;
}

.regular {
	font-family: Satoshi !important;
}

.light {
	font-family: Satoshi-light !important;
}

.bold {
	font-family: Satoshi-bold !important;
}

.semibold {
	font-family: Satoshi-semibold !important;
}

.xxl {
	font-size: 80pt;
}

.xl {
	font-size: 40pt;
}

.l {
	font-size: 18pt;
}

.m {
	font-size: 15pt;
}

.s {
	font-size: 12pt;
}

.xs {
	font-size: 9pt;
}

.xxs {
	font-size: 8pt;
}

.orange {
	color: #E55F42;
}



@font-face {
	font-family: "Satoshi-light";
	src: url("../fonts/Satoshi-Light.otf") format("truetype");
}

@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-Regular.otf") format("truetype");
}


@font-face {
	font-family: "Satoshi-bold";
	src: url("../fonts/Satoshi-Bold.otf") format("truetype");
}

@font-face {
	font-family: "Satoshi-semibold";
	src: url("../fonts/Satoshi-SemiBold.otf") format("truetype");
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 1200px) {
	.xxl {
		font-size: 60pt;

	}

	.xl {
		font-size: 30pt;
	}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 800px) {
	.xxl {
		font-size: 45pt;
	}
	.xl{
		font-size: 40px;
	}

	.l{
		font-size: 15pt;
	}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 700px) {
	.xxl {
		font-size: 35pt;
	}
	.xl{
		font-size: 20pt;
	}
	
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 600px) {
	.xxl {
		font-size: 35pt;
	}
	.xl{
		font-size: 20pt;
	}
}