/*------------------------------------------------------------------
# [Typography]
------------------------------------------------------------------*/

//GOOGLE FONTS

@import url(https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap);

// SUISS INT MONO

@font-face {
	font-family: suisseIntMono;
	src: url('../fonts/SuisseIntlMono-Regular-WebS.eot');
	src: url('../fonts/SuisseIntlMono-Regular-WebS.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/SuisseIntlMono-Regular-WebS.woff2') format('woff2'),
		 url('../fonts/SuisseIntlMono-Regular-WebS.woff') format('woff'),
		 url('../fonts/SuisseIntlMono-Regular-WebS.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: suisseIntMono;
	src: url('../fonts/SuisseIntlMono-Bold-WebS.eot');
	src: url('../fonts/SuisseIntlMono-Bold-WebS.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/SuisseIntlMono-Bold-WebS.woff2') format('woff2'),
		 url('../fonts/SuisseIntlMono-Bold-WebS.woff') format('woff'),
		 url('../fonts/SuisseIntlMono-Bold-WebS.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

//	SUISS INT

@font-face {
	font-family: suisseInt;
	src: url('../fonts/SuisseIntl-Light-WebM.eot');
	src: url('../fonts/SuisseIntl-Light-WebM.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/SuisseIntl-Light-WebM.woff2') format('woff2'),
		 url('../fonts/SuisseIntl-Light-WebM.woff') format('woff'),
		 url('../fonts/SuisseIntl-Light-WebM.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: suisseInt;
	src: url('../fonts/SuisseIntl-Regular-WebM.eot');
	src: url('../fonts/SuisseIntl-Regular-WebM.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/SuisseIntl-Regular-WebM.woff2') format('woff2'),
		 url('../fonts/SuisseIntl-Regular-WebM.woff') format('woff'),
		 url('../fonts/SuisseIntl-Regular-WebM.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: suisseInt;
	src: url('../fonts/SuisseIntl-Medium-WebM.eot');
	src: url('../fonts/SuisseIntl-Medium-WebM.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/SuisseIntl-Medium-WebM.woff2') format('woff2'),
		 url('../fonts/SuisseIntl-Medium-WebM.woff') format('woff'),
		 url('../fonts/SuisseIntl-Medium-WebM.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: suisseInt;
	src: url('../fonts/SuisseIntl-SemiBold-WebM.eot');
	src: url('../fonts/SuisseIntl-SemiBold-WebM.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/SuisseIntl-SemiBold-WebM.woff2') format('woff2'),
		 url('../fonts/SuisseIntl-SemiBold-WebM.woff') format('woff'),
		 url('../fonts/SuisseIntl-SemiBold-WebM.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: suisseInt;
	src: url('../fonts/SuisseIntl-Bold-WebM.eot');
	src: url('../fonts/SuisseIntl-Bold-WebM.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/SuisseIntl-Bold-WebM.woff2') format('woff2'),
		 url('../fonts/SuisseIntl-Bold-WebM.woff') format('woff'),
		 url('../fonts/SuisseIntl-Bold-WebM.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: suisseInt;
	src: url('../fonts/SuisseIntl-Black-WebM.eot');
	src: url('../fonts/SuisseIntl-Black-WebM.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/SuisseIntl-Black-WebM.woff2') format('woff2'),
		 url('../fonts/SuisseIntl-Black-WebM.woff') format('woff'),
		 url('../fonts/SuisseIntl-Black-WebM.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
}

h1,h2,h3,h4,h5 {
	font-weight: bold;
	margin: 0;
	padding: 0;
	position: relative;
}

a,
a:hover,
a:active {
	outline: none;
}

b, strong { 
	font-weight: bold;
}
dfn { font-style: italic; }

pre,
code,
kbd,
samp {
	.font-size(12);
	line-height: @base-line-height;
}

pre {
	white-space: pre;
	//white-space: pre-wrap;
	word-wrap: break-word;
}

sub,
sup {
	.font-size(10);
	position: relative;
	line-height: 0;
	vertical-align: @base-line-height;
}

sup {
	top: -.5em;
}

sub {
	bottom: -.25em;
}

::-moz-selection {
	background-color: lighten(@base-color, 65%);
	color: @base-color;
	text-shadow: none;
}

::selection {
	background-color: lighten(@base-color, 65%);
	color: @base-color;
	text-shadow: none;
}

.title {
	.font-size(28);
	line-height: 30px;
	letter-spacing: 0.5px;
	font-weight: 500;
	overflow: hidden;

	@media @bp_768 {
		.font-size(42);
		line-height: 49px;
	}
}

.subtitle {
	.font-size(12);
	line-height: 16px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-weight: 500;
	padding-bottom: 5px;

	@media @bp_768 {
		.font-size(14);
		line-height: 18px;
		padding-bottom: 10px;
	}
}