/*
* Site stylesheet
* Open Source Software from SAS Institute Inc.
* sassoftware.github.io
* Site styles based on Barebones V3 ©2019 Steve Cochran (https://github.com/acahir/Barebones)
* Barebones based on Skeleton by Dave Gamache (https://github.com/dhg/Skeleton)
*/

/* Fonts
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@font-face {
	font-family: Anova;
	src: url("https://www.sas.com/includes/fonts/sas/Anova-Regular.woff2") format("woff2"),
		 url("https://www.sas.com/includes/fonts/sas/Anova-Bold.woff2") format("woff2"),
		 url("https://www.sas.com/includes/fonts/sas/Anova-Light.woff2") format("woff2"),
}

/* Variables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {

	--theme-hue: #0766D1;							/* SAS blue */
	--accent-hue: #4398F9;							/* SAS medium blue */
	--darker-hue: #032954;							/* SAS midnight blue */
	--lighter-hue: #C4DEFD;						/* SAS light blue */
	--gray-hue: #7E889A;							/* SAS slate */

	--text-color-richer: #032954;					/* SAS midnight blue */
	--text-color-normal: black;					/* SAS black */
	--text-color-softer: #7E889A;					/* SAS slate */
	--text-color-inverted: white;					/* SAS white */

	--button-primary-color: #0766D1;				/* SAS blue */
	--button-primary-accent: #4398F9;				/* SAS light blue*/
	--button-inverted-color: white;				/* SAS white */
	--button-inverted-accent: #4398F9;				/* SAS slate*/

	--border-color: #0766D1;						/* SAS blue */
	--border-color-softer: #C4DEFD;				/* SAS light blue */
	--border-color-richer: #032954;				/* SAS midnight blue */
	
	--background-color: white;						/* SAS white */
	--background-color-softer: #C4DEFD;			/* SAS light blue */
	--code-background: white;						/* SAS white */
	--image-border: #7E889A;						/* SAS slate */
}

/* Base HTML styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

html { font-family: Anova, sans-serif; }
@media (min-width: 1100px) {
	html { font-size: 69%; }
}
@media (max-width: 1101px) {
	html { font-size: 59%; }
}

body { font-weight: normal; color: var(--text-color-normal); background-color: var(--background-color); }
@media (min-width: 1100px) {
	body { font-size: 1.6rem; line-height: 1.6; }
}
@media (max-width: 1101px) {
	body { font-size: 1.6rem; line-height: 1.6; }
}

img { height: auto; }
@media (min-width: 1100px) {
	img { width: 100%; display:block; margin: 0 auto;} 
}
@media (max-width: 1101px) {
	img { width: 100%; display:block; margin: 5rem auto 7rem auto;}
}

pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
	margin-bottom: 2.5rem;
}

input,
textarea,
select,
fieldset {
	margin-bottom: 1.5rem;
}

hr {
	margin-top: 3rem;
	margin-bottom: 3rem;
	border-width: 0;
	border-top: 1px solid var(--border-color-softer);
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 2rem; font-weight: normal; }
h1 { font-size: 4.8rem; line-height: 1.2; font-weight: bolder; }
h2 { font-size: 3.1rem; line-height: 1.25; letter-spacing: -.05rem; }
h3 { font-size: 2.6rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.2rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 2.0rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.7rem; line-height: 1.6; margin-bottom: 0.6rem; font-weight: bold;}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.grid-container {
	position: relative;
	max-width: 1150px;
	margin: 0 auto;
	padding: 0px 60px;
	text-align: left;
	display: grid;
	grid-gap: 55px;
	gap: 55px;
	grid-template-columns: minmax(200px, 1fr);
}

/* Defines grid activation */
@media (min-width: 1100px) {
	.grid-container {
		grid-template-columns: repeat(3, 1fr);
		padding: 0rem 5rem;
	}
	
	/* basic grids */
	.grid-container.fifths {
		grid-template-columns: repeat(5, 1fr);
	}
	.grid-container.quarters {
		grid-template-columns: repeat(4, 1fr);
	}
	.grid-container.thirds {
		grid-template-columns: repeat(3, 1fr);
	}
	.grid-container.halves {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-container.full {
		grid-template-columns: 1fr;
	}
	
}

/* Section styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.hero {
	background-color: var(--theme-hue);
	text-align: center;
	color: var(--text-color-inverted);
	margin: 5rem 0rem 10rem 0rem;
	padding: 5rem 8rem 4rem 8rem;
	border-radius: .5rem; 
}
.header {
	padding: 5.5rem 3.5rem 2.5rem 3.5rem;
	text-align: center;
	color: var(--theme-hue);
	padding: 4rem 8rem 4rem 8rem;
	margin: 0rem 0rem 15rem 0rem;
}
.footer {
	background-color: var(--theme-hue);
	font-size: 1.3rem;
	text-align: center;
	color: white;
	padding: 4rem 0 1rem 0;
	margin: 8rem 0 0 0;
}
.divider {
	text-align: center;
	color: var(--text-color-inverted);
	margin: 15rem 0rem;
	padding: 0rem;
}
.inverted {
	color: white;
	border-radius: .5rem;
	padding: 4rem;
	box-sizing: border-box;
}
.inverted-blue {
	background-color: var(--theme-hue);
}
.inverted-light {
	background-color: var(--accent-hue);
}
.inverted-dark {
	background-color: var(--darker-hue);
}
.inverted-gray {
	background-color: var(--gray-hue);
}
.boxed {
	border: 1px solid var(--border-color-softer);
	border-radius: .5rem;
	padding: 2rem;
	box-sizing: border-box;
}
.carded {
	border: 1px solid var(--border-color);
	border-radius: .5rem;
	padding: 5.5rem 3.5rem 2.5rem 3.5rem;
	background-color: var(--background-color);
	box-sizing: border-box;
	box-shadow: 1.7rem 1.7rem .1rem 0 var(--background-color-softer);
}
.bleed {
	background-color: var(--theme-hue);
	color: var(--text-color-inverted);
	padding: 10rem 5rem;
	margin: 0 auto;
}
.band {	
	text-align: center;
	margin: 15rem 0rem;
	padding: 7rem 9rem 3rem 9rem;
}
.blue-band {
	background-color: var(--theme-hue);
	color: var(--text-color-inverted);
}
.dark-band {
	background-color: var(--darker-hue);
	color: var(--text-color-inverted);
}
.gray-band {
	background-color: var(--gray-hue);
	color: var(--text-color-inverted);
}
.transparent-band {
	background-color: var(--background-color); 
	color: var(--text-color-normal);
}
.carded-band {
	background-color: var(--background-color);
	color: var(--text-color-normal);
	border: 1px solid var(--border-color);
	border-radius: .5rem;
	padding: 5.5rem 3.5rem 2.5rem 3.5rem;
	margin: 15rem 6.5rem;
	box-sizing: border-box;
	box-shadow: 1.7rem 1.7rem .1rem 0 var(--background-color-softer);
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */

a {
	color: var(--theme-hue);
	text-decoration: none;
}
a:hover {
	color: var(--accent-hue);
	text-decoration: none;
}
.bleed a:link,
.bleed a:visited {
	color: var(--text-color-inverted);
}
.band a:link,
.band a:visited,
.inverted a:link,
.inverted a:visited {
	color: var(--text-color-inverted);
	text-decoration: underline;
	display: inline-block;
}
.band a:hover,
.band a:active,
.inverted a:hover,
.inverted a:active {
	text-decoration: underline;
}
.header a:link,
.header a:visited,
.footer a:link,
.footer a:visited {
	color: var(--text-color-inverted);
	text-decoration: underline;
	display: inline-block;
}
.header a:hover,
.header a:active,
.footer a:hover,
.footer a:active {
	text-decoration: underline;
}

/* Shapes
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.shapes {
	margin: auto auto;
}
.shape {
	float: left;
}
.circle {
	width: 5rem;
	height: 5rem;
	border-radius: 5rem;
	background-color: var(--theme-hue);
	margin: 0 1rem 0 0;
}
.circle-dark {
	width: 5rem;
	height: 5rem;
	border-radius: 5rem;
	background-color: var(--darker-hue);
	margin: 0 1rem 0 0;
}
.circle-gray {
	width: 5rem;
	height: 5rem;
	border-radius: 5rem;
	background-color: var(--gray-hue);
	margin: 0 1rem 0 0;	
}
.circle-transparent {
	width: 5rem;
	height: 5rem;
	border-radius: 5rem;
	border: .01rem solid var(--theme-hue);
	background-color: var(--background-color);
	margin: 0 1rem 0 0;	
}
.semicircle-up {
	width: 10rem;
	height: 5rem;
	border-radius: 0 0 5rem 5rem;
	background-color: var(--theme-hue);
	margin: 0 1rem 0 0;
}
.semicircle-down {
	width: 10rem;
	height: 5rem;
	border-radius: 5rem 5rem 0 0;
	background-color: var(--theme-hue);
	margin: 0 1rem 0 0;
}
.semicircle-up-dark {
	width: 10rem;
	height: 5rem;
	border-radius: 5rem 5rem 0 0;
	background-color: var(--darker-hue);
	margin: 0 1rem 0 0;
}
.semicircle-down-dark {
	width: 10rem;
	height: 5rem;
	border-radius: 5rem 5rem 0 0;
	background-color: var(--darker-hue);
	margin: 0 1rem 0 0;
}
.blade {
	width: 10rem;
	height: 5rem;
	border-radius: 0 5rem 0 5rem;
	background-color: var(--theme-hue);
	margin: 0 1rem 0 0;
}
.blade-dark {
	width: 10rem;
	height: 5rem;
	border-radius: 0 5rem 0 5rem;
	background-color: var(--darker-hue);
	margin: 0 1rem 0 0;
}
.blade-reverse {
	width: 10rem;
	height: 5rem;
	border-radius: 5rem 0 5rem 0;
	background-color: var(--theme-hue);
	margin: 0 1rem 0 0;
}
.blade-reverse-light {
	width: 10rem;
	height: 5rem;
	border-radius: 5rem 0 5rem 0;
	background-color: var(--accent-hue);
	margin: 0 1rem 0 0;
}
.quartercircle-left {
	width: 5rem;
	height: 5rem;
	border-radius: 0 0 0 5rem;
	background-color: var(--accent-hue);
	margin: 0 1rem 0 0;
}
.quartercircle-right {
	width: 5rem;
	height: 5rem;
	border-radius: 5rem 0 0 0;
	background-color: var(--theme-hue);
	margin: 0 1rem 0 0;
}
.quartercircle-right-light {
	width: 5rem;
	height: 5rem;
	border-radius: 5rem 0 0 0;
	background-color: var(--accent-hue);
	margin: 0 1rem 0 0;
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

button,
.button {
  margin-bottom: 1.5rem;
}
.grid-container .button {
	margin-right: 2rem;
}
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	display: inline-block;
	height: 37px;
	padding: 0 26px;
	color: var(--theme-hue);
	text-align: center;
	font-size: 83%;
	font-weight: normal;
	line-height: 37px;
	letter-spacing: .12rem;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	background-color: transparent;
	border-radius: 20px;
	border: 1px solid var(--border-color);
	cursor: pointer;
	box-sizing: border-box; 
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
	color: var(--accent-hue);
	border-color: var(--accent-hue);
	outline: 0; 
}
.button.button-classic,
button.button-classic,
input[type="submit"].button-classic,
input[type="reset"].button-classic,
input[type="button"].button-classic {
  color: var(--text-color-inverted);
  background-color: var(--button-primary-color);
  border-color: var(--button-primary-color); 
  text-decoration: none !important;
}
.button.button-classic:hover,
button.button-classic:hover,
input[type="submit"].button-classic:hover,
input[type="reset"].button-classic:hover,
input[type="button"].button-classic:hover,
.button.button-classic:focus,
button.button-classic:focus,
input[type="submit"].button-classic:focus,
input[type="reset"].button-classic:focus,
input[type="button"].button-classic:focus {
  color: var(--text-color-inverted);
  background-color: var(--button-primary-accent);
  border-color: var(--button-primary-accent); 
}
.button.button-inverted,
button.button-inverted,
input[type="submit"].button-inverted,
input[type="reset"].button-inverted,
input[type="button"].button-inverted {
color: var(--text-color-inverted);
background-color: transparent;
border-color: var(--button-inverted-color); 
text-decoration: none !important;
}
.button.button-inverted:hover,
button.button-inverted:hover,
input[type="submit"].button-inverted:hover,
input[type="reset"].button-inverted:hover,
input[type="button"].button-inverted:hover,
.button.button-inverted:focus,
button.button-inverted:focus,
input[type="submit"].button-inverted:focus,
input[type="reset"].button-inverted:focus,
input[type="button"].button-inverted:focus {
color: var(--text-color-inverted);
background-color: var(--button-inverted-accent);
border-color: var(--button-inverted-accent); 
text-decoration: none !important;
}
.button.button-clear,
button.button-clear,
input[type="submit"].button-clear,
input[type="reset"].button-clear,
input[type="button"].button-clear {
color: var(--button-primary-color);
background-color: var(--background-color);
border-color: transparent; 
text-decoration: none !important;
}
.button.button-clear:hover,
button.button-clear:hover,
input[type="submit"].button-clear:hover,
input[type="reset"].button-clear:hover,
input[type="button"].button-clear:hover,
.button.button-clear:focus,
button.button-clear:focus,
input[type="submit"].button-clear:focus,
input[type="reset"].button-clear:focus,
input[type="button"].button-clear:focus {
color: var(--button-primary-color);
background-color: var(--background-color);
border-color: var(--button-primary-color); 
text-decoration: none !important;
}
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: var(--background-color);
  border: 1px solid var(--border-color-softer);
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="button"],
input[type="submit"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid var(--theme-hue);
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: bold; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */

ul {
	list-style: circle inside;
}
ol {
	list-style: decimal inside;
}
ol, ul {
	padding-left: 0rem;
	margin-top: 0rem;
}
ul ul, ul ol, ol ol, ol ul {
	font-size: 100%;
	margin: 1rem 0rem 1rem 3rem;
	color: var(--text-color-softer);
}
li {
	margin-bottom: 0.5rem;
}
.footer li {
	margin: 0rem 1rem 0rem 1rem;
	display: inline-block;
}

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */

code {
	padding: .2rem .5rem;
	margin: 0 .2rem;
	font-size: 90%;
	white-space: nowrap;
	background: var(--code-background);
	border: 1px solid var(--border-color-softer);
	border-radius: 4px; 
}

pre > code {
	display: block;
	padding: 1rem 1.5rem;
	white-space: pre; 
	overflow: auto; 
}

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */

th,
td {
	padding: 12px 15px;
	text-align: left;
	border-bottom: 1px solid var(--border-color-softer); 
}

th:first-child,
td:first-child {
	padding-left: 0; 
}

th:last-child,
td:last-child {
	padding-right: 0; 
}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.u-max-width {
	max-width: 100%;
	box-sizing: border-box; 
}
.u-full-width {
	width: 100%;
	box-sizing: border-box; 
}
.u-three-quarter-width {
	width: 75%;
	box-sizing: border-box;
}
.u-half-width {
	width: 50%;
	box-sizing: border-box; 
}
.u-quarter-width {
	width: 25%;
	box-sizing: border-box; 
}
.u-pull-right {
	float: right; 
}
.u-pull-left {
	float: left; 
}
.u-align-left {
	text-align: left; 
}
.u-align-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.u-align-right {
	text-align: right; 
}
.u-embiggen {
	font-size: 2.1rem;
	font-weight: lighter;
}
.u-monospace {
	font-family: monospace;
	font-size: 85%;
}
.u-badge {
	color: white;
	background-color: var(--theme-hue);
	letter-spacing: .15rem;
	text-transform: uppercase;
	font-size: 50%;
	font-weight: bolder;
	border: 1px solid var(--theme-hue);
	border-radius: .35rem;
	padding: 1rem 1rem .7rem 1rem;
	display: inline-block;
}
.u-img-hero {
	max-width: 80%;
}
.u-hiding { 
	position: relative;
}
@media (max-width: 1101px) {
	.u-hiding {
		display: none;
	}
}
.u-img-border {
	border: 0.2rem solid var(--image-border); 
	border-radius: 0.5rem;
}
.u-img-divider {
	width: auto;
	display: block; 
	margin: 0 auto; 
}

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; 
}

/* Media queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Larger than mobile (this is the default point at which grid becomes active) */
@media (min-width: 1100px) {}
@media (max-width: 1101px) {}