/* Eventually replace this with Tailwind */

/* FONT WEIGHT */
.font-hairline	{
	font-weight: 100;
}
.font-thin	{
	font-weight: 200;
}
.font-light	{
	font-weight: 300;
}
.font-normal	{
	font-weight: 400;
}
.font-medium	{
	font-weight: 500;
}
.font-semibold	{
	font-weight: 600;
}
.font-bold	{
	font-weight: 700;
}
.font-extrabold	{
	font-weight: 800;
}
.font-black	{
	font-weight: 900;
}

.leading-3{	line-height: .75rem;}
.leading-4{	line-height: 1rem;}
.leading-5{	line-height: 1.25rem;}
.leading-6{	line-height: 1.5rem;}
.leading-7{	line-height: 1.75rem;}
.leading-8{	line-height: 2rem;}
.leading-9{	line-height: 2.25rem;}
.leading-10	{line-height: 2.5rem;}
.leading-none	{line-height: 1;}
.leading-tight{	line-height: 1.25;}
.leading-snug{	line-height: 1.375;}
.leading-normal{	line-height: 1.5;}
.leading-relaxed{	line-height: 1.625;}
.leading-loose{	line-height: 2;}

/* Font Size */

.text-xs	{font-size: 0.75rem;}
.text-sm	{font-size: 0.875rem;}
.text-base	{font-size: 1rem;}
.text-lg	{font-size: 1.125rem;}
.text-xl	{font-size: 1.25rem;}
.text-2xl	{font-size: 1.5rem;}
.text-3xl	{font-size: 1.875rem;}
.text-4xl	{font-size: 2.25rem;}
.text-5xl	{font-size: 3rem;}
.text-6xl	{font-size: 4rem;}

/* Alignment */

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

.text-gray-60{
	color: #6f6f6f;
}

.bg-purple-30{
	background-color: #d4bbff;
}

.bg-gray-10{
	background-color: #f4f4f4;
}

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

.flex{
	display: flex;
}

.inline-block{
	display: inline-block;
}

.relative{
	position: relative;
}

.grid-container{
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.bt-gray-40{
	border-top: solid 1px #a8a8a8;
}


.pt-4{
	padding-top: 1rem;
}

.pt-8{
	padding-top: 2rem;
}

.pb-4{
	padding-bottom: 1rem;
}

.pb-8{
	padding-bottom: 2rem;
}

.pb-20{
	padding-bottom: 5rem;
}

.mb-2{
	margin-bottom: 0.5rem;
}


.mb-4{
	margin-bottom: 1rem;
}

.mb-6{
	margin-bottom: 1.5rem;
}

.mb-8{
	margin-bottom: 2rem;
}

.mt-8{
	margin-top: 2rem;
}

.mb-16{
	margin-bottom: 4rem;
}

.mb-24{
	margin-bottom: 6rem;
}

@media only screen and (max-width: 1200px){
	.grid-container{
		max-width: calc(100vw - 64px);
	}
}


.grid-row{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-left: -16px;
	margin-right: -16px;
}

.overflow-hidden{
	overflow: hidden;
}

[class*='grid-col']{
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: 16px;
	padding-left: 16px;
}




.grid-col-offset-1\/4{
	margin-left: 25%;
}

.grid-col-1\/4{
	flex: 0 0 25%;
    max-width: 25%;
}

.grid-col-2\/4{
	flex: 0 0 50%;
    max-width: 50%;
}

.grid-col-3\/4{
	flex: 0 0 75%;
    max-width: 75%;
}

/* TEMPORARY */

@media only screen and (min-width: 800px){
	.md\:grid-col-offset-1\/4{
		margin-left: 25%;
	}
}

@media only screen and (max-width: 800px){
	.grid-col-1\/4,
	.grid-col-2\/4,
	.grid-col-3\/4{
		flex: 0 0 100%;
		max-width: 100%;
	}
	.grid-col-sm-2\/4{
		flex: 0 0 50%;
		max-width: 50%;
	}
	.sm\:hidden{
		display: none;
	}
}



.bx--btn--primary svg{
	fill: white;
	width: 16px;
	margin-left: auto;
	margin-right: 0;
	position: absolute;
	right: 16px;
}