/**
 * sanloop: Typography
 * 
 * @author H A N D
 * @version 1.0.1
 */

body {
	--font-size--small: 12px;
	--line-height--small: 13.5px;

	--font-size--regular: 15px;
	--line-height--regular: 18px;
	--font-weight--regular: 470;

	--font-size--medium: 22px;
	--line-height--medium: 24px;

	--font-size--large: var( --font-size--medium );
	--line-height--large: var( --line-height--medium );

	--font-size: var( --font-size--regular );
	--line-height: var( --line-height--regular );
	--font-weight: var( --font-weight--regular );
	--color: var( --blue );
}

* {
	font-family: 'Plankton', sans-serif;
	font-size: var( --font-size );
	line-height: var( --line-height );
	font-weight: var( --font-weight );
	color: var( --color );
}

.fs-sm {
	--font-size: var( --font-size--small );
	--line-height: var( --line-height--small );
}

.fs-rg {
	--font-size: var( --font-size--regular );
	--line-height: var( --line-height--regular );
}

.fs-md {
	--font-size: var( --font-size--medium );
	--line-height: var( --line-height--medium );
}

.fs-lg {
	--font-size: var( --font-size--large );
	--line-height: var( --line-height--large );
}



a {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

a[href]:not( [href=""] ),
[data-toggle]:not( [data-toggle=""] ),
[data-trigger]:not( [data-trigger=""] ) {
	text-decoration: underline;
	text-underline-offset: 0.12em;
	text-decoration-thickness: calc( var( --font-weight ) * 0.0001em );

	cursor: pointer;
}

p {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}



.ta-l {
	text-align: left;
}

.ta-c {
	text-align: center;
}

.ta-r {
	text-align: right;
}



.tt-u {
	text-transform: uppercase;
}

.tt-l {
	text-transform: lowercase;
}

.tt-n {
	text-transform: none;
}



.dash {
	margin: 0 0.2em;
}

.slash {
	margin: 0 0.075em;
}

.times {
	margin: 0 0.125em;
}

.unit {
	margin-left: 0.2em;
}



/* ------- @grid md ------- */
@media ( min-width: 700px ) {
	body {
		--font-size--small: 14px;
		--line-height--small: 15px;

		--font-size--regular: 18px;
		--line-height--regular: 20px;

		--font-size--medium: 29px;
		--line-height--medium: 30px;
	}
}



/* ------- @grid lg ------- */
@media ( min-width: 1100px ) {
	body {
		--font-size--large: 39px;
		--line-height--large: 40px;
	}
}



/* ------- @grid xl ------- */
@media ( min-width: 1500px ) {
	body {
		--font-size--large: 49px;
		--line-height--large: 50px;
	}
}