@charset "utf-8";

/* Variables */
:root {
	/* Brand Colors */
	--brand-primary: #333A56;
	--brand-accent: #FCBB15;
	
	/* Base Colors */
	--gray-50: #FEFEFE;
	--gray-100: #F7F5E6;
	--gray-200: #E8E8E8;
	--gray-600: #636363;
	--gray-900: #2A3047;
	
	/* Background Colors */
	--background-primary: var(--gray-100);
	--background-secondary: var(--gray-200);
	--background-tertiary: var(--gray-50);
	--background-blue: #3A4263;

	/* Text */
	--text-primary: var(--gray-900);
	--text-secondary: var(--gray-600);
	--text-alt: var(--gray-50);
	
	/* Components */
	--button-bg: var(--brand-primary);
	--button-text: var(--text-alt);
	--card-bg: var(--background-primary);
  }

/* Global */

* { 
	margin: 0;
	padding: 0;	
}

/* DOM */

html {
	font-size: 16px;
	font-family: 'Source Sans 3', sans-serif;
	color: var(--text-primary);
}

body {
	background-color: var(--background-primary);
	min-height: 100vh;
	font-size: 1rem;
	line-height: 1.5;
}

nav {
	list-style: none;
}

a {
	color: inherit;
	text-decoration:none;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
p { font-size: 1rem; }
small { font-size: 0.875rem; }

h1, h2 { font-weight: 700; line-height: 1.1; }
h3, h4 { font-weight: 600; line-height: 1.2; }
h5, h6 { font-weight: 500; line-height: 1.3; }
p { font-weight: 400; line-height: 1.5; }
small { line-height: 1.4; }
article p { line-height: 1.6; }

t1 {
	font-size: 90%;
}

t2 {
	font-size: 100%;
	color: var(--text-primary);
	transition: color .8s ease-in-out;
}

::placeholder {
    color: var(--text-alt);
    opacity: 1;
  }

:-ms-input-placeholder {
color: var(--text-alt);
}

::-ms-input-placeholder {
color: var(--text-alt);
}

/* Classes */

.flex {
	display: flex;
}

.flex-wrap {
	display: flex;
	flex-wrap: wrap;
}

.center {
	justify-content: center;
	align-items: center;
}

.column {
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.flex-start {
	width: 100%;
	justify-content: flex-start;
	align-items: flex-start;
}

.hidden {
	display: none !important;
}

.no-transition {
	transition: none !important;
}

.nooverflow {
	overflow: hidden;
}

.no-underline a{
	text-decoration: none;
}

/* Media Queries */

@media (min-width: 2560px) {
	html {
		font-size: 18px;
	}
}

@media (min-width: 1920px) {
	html {
		font-size: 18px;
	}
}

@media (min-width: 1160px) {
	body {
		overflow-x: hidden;
	}
}

@media (max-width: 767px) {
	html {
		font-size: 15px;
	}
}

@media (max-width: 319px) {
	html {
		font-size: 15px;
	}
}