/* ------------------------
*   General
------------------------*/
body {
	font-family: $px-font-family;
	font-size: $px-base-font;
	color: $px-body-color;
	font-weight: 500;
	line-height: 1.7;
	font-smoothing: antialiased;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: $px-theme;
	@include px-hover {
		color: darken($px-theme, 8%);
		text-decoration: none;
	}
}

.h1, 
.h2, 
.h3, 
.h4, 
.h5, 
.h6, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
  	color: $px-dark;
	font-weight: 700;
  	.white-color & {
		color: $px-white;
  	}
}

.display-1,
.display-2,
.display-3,
.display-4 {
	color: $px-dark;
	font-weight: 700;
	.white-color & {
		color: $px-white;
	}
}

/* ----------------------
*   Typo
-------------------------*/
.font-alt {
	font-family: $px-font-family-alt;   
}

.display-1 {
	font-weight: 700;
	line-height: 1;
}

.display-2 {
	font-weight: 700;
	line-height: 1;
}

.display-3 {
	font-weight: 700;
	line-height: 1;
}

.display-4 {
	font-weight: 700;
	line-height: 1;
}

.lead {
	font-weight: 400;
	line-height: 1.5;

	@include down-md {
		font-size: 1.08rem;
	}
}

.font-small {
	font-size: .85rem;
	line-height: 1rem;
}

.font-1 {
	font-size: 1rem;
}

.font-2 {
	font-size: 1.1rem;
}

.font-3 {
	font-size: 1.3rem;
}

.font-4 {
	font-size: 1.4rem;
}


@include down-xl {
	legend {
		font-size: calc(1.275rem + 0.3vw);
	  }
	  h1,
	  .h1 {
		font-size: calc(1.375rem + 1.5vw);
	  }
	  h2,
	  .h2 {
		font-size: calc(1.325rem + 0.9vw);
	  }
	  h3,
	  .h3 {
		font-size: calc(1.3rem + 0.6vw);
	  }
	  h4,
	  .h4 {
		font-size: calc(1.275rem + 0.3vw);
	  }
	  .display-1 {
		font-size: calc(1.725rem + 5.7vw);
	  }
	  .display-2 {
		font-size: calc(1.675rem + 5.1vw);
	  }
	  .display-3 {
		font-size: calc(1.575rem + 3.9vw);
	  }
	  .display-4 {
		font-size: calc(1.475rem + 2.7vw);
	  }
	  .close {
		font-size: calc(1.275rem + 0.3vw);
	  }
}

/* Font wight
--------------------*/
@for $i from 1 through 9 {
	.font-w-#{$i * 100} {
		font-weight: #{$i * 100}
	}
}

/* Letter spacing
-------------------------------*/
@for $i from 1 through 10 {
	.letter-spacing-#{$i} {
		letter-spacing: #{$i}px;
	}
}

.lh-normal {
	line-height: normal;
}