/*Blue Global Style Sheet*/
/*Blue replaces most default browser styling and provides useful CSS classes for designing responsive layouts for all devices.*/

/*
How Blue CSS Works
-------------------
There are three files you need to utilize. Attach them in order to your document. 

1) Definitions (_blue-definitions.css): Root CSS variables that define colors used in the Global Styles. You can create your own version of this file to control all global color styles.

2) Blue Global (_blue-global.css): The base global style sheet. It removes most browser default styling and provides a baseline for all elements. It also provides additional styling options you can utilize. 

3) Style Guide (_blue-style-guide.css): A style guide with brand colors and overrides for anything in Blue Global. An example is provided with useful color schemes. 
*/


/*
DOM | HTML & Body
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/


/*Box Sizing for All*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%; 
  overflow: auto; 
  margin:0px;
  padding:0px;
  color: rgb(0, 0, 0, .87);
  
  font-size: 1rem;
  line-height: 1.2px;
  /*Default Font Family*/
  font-family: Helvetica, Arial, sans-serif;
}

body {
  font-family: Verdana;
  font-size: 1rem; 
  line-height: 1.2rem;
  margin:0px;
  padding:0px;
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow: auto;
  overflow-y: scroll; 
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
}

body::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}


/*
Basic Elements
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

/*
Blue Media Queries
-------------------

Blue uses a mobile first design system with common break points for larger screens. 

The Default is for Small Screens that are less than 768px

Medium Screens
@media screen and (min-width:768px){}

Large Screens
@media screen and (min-width:1200px){}
*/


/*Headings*/

/*h1 | 32px - 48px - 64px*/
h1 {
 font-family: Minion;
 font-weight: 100;
 /* 3 times the body text */
 font-size: 2rem; 
 line-height: 2.12rem;
 margin: 0rem;
 
}
@media screen and (min-width:768px){
  h1{
    font-size: 3rem;
    line-height: 3.6rem; 
  }
}
@media screen and (min-width:1200px){
  h1{
    font-size: 4rem;
    line-height: 4.8rem; 
  }
}

/*h2 | 24px - 32px - 48px*/
h2 {
  font-family: Minion;
  font-weight: 200;
  /* 2 times the body text */
  font-size: 1.5rem; 
  line-height: 1.8rem;
  margin: 0rem;
  
  
}
@media screen and (min-width:768px){
  h2{
    font-size: 2rem;
    line-height: 2.4rem; 
  }
}
@media screen and (min-width:1200px){
  h2{
    font-size: 3rem;
    line-height: 3.6rem; 
  }
}

/*h3 | 18px - 24px - 32px*/
h3 {
  font-family: Minion;
  font-weight: 600;
  /* 1 ½ times the body text */
  font-size: 1.125rem;
  line-height: 1.35rem;
  margin: 0rem;
  
  
}
@media screen and (min-width:768px){
  h3{
    font-size: 1.5rem;
    line-height: 1.8rem; 
  }
}
@media screen and (min-width:1200px){
  h3{
    font-size: 2rem;
    line-height: 2.4rem; 
  }
}


/*h4 | 16px - 18px - 20px*/
h4 {
  font-family: Minion;
  font-weight: 300;
  font-size: 1rem; 
  line-height: 1.2rem;
  margin: 0rem;
  
  
}
@media screen and (min-width:768px){
  h4{
    font-size: 1.125rem;
    line-height: 1.35rem; 
  }
}
@media screen and (min-width:1200px){
  h4{
    font-size: 1.25rem;
    line-height: 1.5rem; 
  }
}

/*h5 | 14px - 16px - 18px*/
h5 {
  font-family: Minion;
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.05rem;
  margin: 0rem;
  
  
}
@media screen and (min-width:768px){
  h5{
    font-size: 1rem;
    line-height: 1.2rem; 
  }
}
@media screen and (min-width:1200px){
  h5{
    font-size: 1.125rem;
    line-height: 1.35rem; 
  }
}

/*h6 | 12px - 14px - 16px*/
h6 {
  font-family: Minion;
  font-weight: 600;
  font-size: .75rem;
  line-height: .9rem;
  margin: 0rem;
  
  
}
@media screen and (min-width:768px){
  h6{
    font-size: .875rem;
    line-height: 1.05rem; 
  }
}
@media screen and (min-width:1200px){
  h6{
    font-size: 1rem;
    line-height: 1.2rem; 
  }
}

/*Body | 16px - 18px - 20px*/
p {
 font-family: Verdana;
 font-size: 1rem;
 line-height: 1.5rem;
 margin: .5rem 0rem 0rem 0rem;
 
 
}
@media screen and (min-width:768px){
  p{
    font-size: 1.125rem;
    line-height: 1.16875rem; 
  }
}
@media screen and (min-width:1200px){
  p{
    font-size: 1.25rem;
    line-height: 1.875rem; 
  }
}

/*Functional | 12px - 14px - 16px*/
figcaption {
  font-family: Verdana;
  /* ¾ of the body text */
  font-size: clamp(.75rem, .875rem, 1rem);  
  line-height: clamp(1.125rem, 1.3125rem, 1.5rem);
  margin: 1rem 0rem 0rem 0rem;
  
  
}
@media screen and (min-width:768px){
  figcaption{
    font-size: .875rem;
    line-height: 1.3125rem; 
  }
}
@media screen and (min-width:1200px){
  figcaption{
    font-size: 1rem;
    line-height: 1.5rem; 
  }
}


section{
  width:100%;
  height:auto;
  display: block;
}

div{ 
  display:block; 
  /*width: auto;*/
}

hr{ 
  color: rgba(220, 220, 220, 0.87);
  margin-bottom: 1rem;
}

a{
  color: rgba(0, 0, 0, 0.87);
  text-decoration: none;
  cursor: pointer;
  padding:0px;
  margin:0px;
}

/*
a:hover{
  opacity: .8;
}

a:focus{
  opacity: .5;
}

a:active{
  opacity: 1.0;
}
*/

img{
  width:100%;
  height:auto;
}


button {
 border: none;
 padding: .5rem 1rem;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 cursor: pointer;
 font-size: 1rem;
 line-height: 1.5rem; 
 width: max-content;
 -webkit-user-select: none; /* Safari */
 -ms-user-select: none; /* IE 10 and IE 11 */
 user-select: none; /* Standard syntax */
}
/*
button:hover{
  opacity: .8;
}
button:focus{
  opacity: .5;
}*/

label{
  font-family: Verdana;
  font-size: .75rem;
  line-height: 1.125rem;
  color: rgb(0, 0, 0, .60);
}
@media screen and (min-width:768px){
  label{
    font-size: .875rem;
    line-height: 1.3125rem; 
  }
}
@media screen and (min-width:1200px){
  label{
    font-size: 1rem;
    line-height: 1.5rem; 
  }
}


/*Inputs*/

/*
Input Types
------------

button
checkbox
color
date	
datetime-local	
email	
file	
hidden	
image	
month	
number	
password	
radio	
range	
reset	
search	
submit	
tel	
text	
time
url
week
*/

input{
  border: 0;
  outline: none;
  color: rgb(0, 0, 0, .87);
}
@media screen and (min-width:768px){
  input{
    font-size: 1.125rem;
    line-height: 1.16875rem; 
  }
}
@media screen and (min-width:1200px){
  input{
    font-size: 1.25rem;
    line-height: 1.875rem; 
  }
}

input[type=text], input[type=email], input[type=password], input[type=search] {
  width: 100%;
}

/*
input[type=text] {
  font-size: 1rem;
  line-height: 1.5rem;
  width: 100%;
  
  box-sizing: border-box;
}
@media screen and (min-width:768px){
  input[type=text]{
    font-size: 1.125rem;
    line-height: 1.16875rem; 
  }
}
@media screen and (min-width:1200px){
  input[type=text]{
    font-size: 1.25rem;
    line-height: 1.875rem; 
  }
}
*/

/*
input[type=text]:focus {
  border: .25rem solid #4B8BF1;
  border: .25rem solid var(--denotative-info);
}*/

textarea {
  font-size: 1rem;
  line-height: 1.5rem;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  color: color: rgb(0, 0, 0, .87);
  resize: none;
  border: 0;
  outline: none;
}
@media screen and (min-width:768px){
  input[type=textarea]{
    font-size: 1.125rem;
    line-height: 1.16875rem; 
  }
}
@media screen and (min-width:1200px){
  input[type=textarea]{
    font-size: 1.25rem;
    line-height: 1.875rem; 
  }
}

input[type=textarea]:focus {
  border: .25rem solid #4B8BF1;
  border: .25rem solid var(--denotative-info);
}


select {
  -webkit-appearance: none; /*No Default Styling*/
  font-size: 1rem;
  line-height: 1.5rem;
  width: 100%;
  border: 0;
  outline: none;
  color: color: rgb(0, 0, 0, .87);
}
/*
select:focus {
  border: .25rem solid #4B8BF1;
  border: .25rem solid  var(--denotative-info);
}*/

/*Checkbox */
.checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
  background-color: var(--denotative-info);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



/* Radio */
.radio {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.radiomark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio:hover input ~ .radiomark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio input:checked ~ .radiomark {
  background-color: #2196F3;
  background-color: var(--denotative-info);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiomark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio input:checked ~ .radiomark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio .radiomark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}


/*LISTS*/
ul{
  list-style-type: none;
  padding: 0;
  margin-top: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  color: color: rgb(0, 0, 0, .87);
}
ul li{
  /*padding:.5rem;*/
  vertical-align: middle;
}
@media screen and (min-width:768px){
  ul{
    font-size: 1.125rem;
    line-height: 1.16875rem; 
  }
}
@media screen and (min-width:1200px){
  ul{
    font-size: 1.25rem;
    line-height: 1.875rem; 
  }
}


ol{
  padding: 0;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  width: 100%;
  list-style-position: inside;
  box-sizing: border-box;
  color: color: rgb(0, 0, 0, .87);
}
ol li{
  /*padding:.5rem;*/
  vertical-align: middle;
}
@media screen and (min-width:768px){
  ol{
    font-size: 1.125rem;
    line-height: 1.16875rem; 
  }
}
@media screen and (min-width:1200px){
  ol{
    font-size: 1.25rem;
    line-height: 1.875rem; 
  }
}
/*
ol li:hover {
  color: rgb(0, 0, 0, .60);
}
*/

/*Tables*/
table{
  border-collapse: collapse;
  background-color: rgba(255, 255, 255, 0.9);
  background-color: var(--input-light);
  width: 100%;
}
table td, table th {
  border: 1px solid rgba(219, 226, 231, 0.9);
  border: 1px solid var(--input-light-alt);
  padding: 1rem;
}

.table-highlight-even tr:nth-child(even){
  background-color: rgba(219, 226, 231, 0.9);
  background: var(--input-light-alt); 
}

.table-highlight-odd tr:nth-child(odd){
  background-color: rgba(219, 226, 231, 0.9);
  background: var(--input-light-alt); 
}

table th{
  text-align: left;
}

/*
Blue Elements
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/


/*
Copy 
----

Blue uses a mobile First Type System

Set Defaults for Small Screens
@media screen and (min-width:768px){}

Scale Up
@media screen and (min-width:1200px){}
/*

/*
Line Height: 
1:1.2 Ratio for Headings
1:1.5 Ratio for Body & Small Text
*/

/*
Pixel Reference for Fonts
Mobile - Desktop - Big Screens

Pull Copy
Really Big Text | 64px - 96px - 128px
Big Text | 48px - 64px - 96px

Standard Copy
Title | 32px - 48px - 64px
Heading | 24px - 32px - 40px
Big Body | 18px - 24px - 32px
Body | 16px - 18px - 20px
Secondary | 14px - 16px - 18px 
Functional | 12px - 14px - 16px
Tiny Text | 10px - 12px - 14px

Hierarchical 
h1 | 32px - 48px - 64px
h2 | 24px - 32px - 48px 
h3 | 18px - 24px - 32px 
h4 | 16px - 18px - 20px
h5 | 14px - 16px - 18px
h6 | 12px - 14px - 16px

*/

/*
Pixel and Rem Equivalents
16px = 1rem by default in most browsers

128px = 8rem
96px = 6rem
64px = 4rem
48px = 3rem
40px = 2.5rem
32px = 2rem
24px = 1.5rem
20px = 1.25rem
18px = 1.125rem
16px = 1rem
14px = .875rem
12px = .75rem
10px = .625rem
*/

/*Really Big Text | 64px - 96px - 128px*/
.really-big-text{
  font-family: Helvetica;
  font-size:4rem;
  line-height: 5.16rem;
  font-weight: 600;
  
  
}
@media screen and (min-width:768px){
  .really-big-text{
    font-size:6rem;
    line-height: 7.2rem;
  }
}
@media screen and (min-width:1200px){
  .really-big-text{
    font-size:8rem;
    line-height: 9.6rem;
  }
}


/*Big Text | 48px - 64px - 96px*/
.big-text{
  font-family: Helvetica;
  font-size: 3rem;
  line-height: 3.6rem;
  font-weight: 400;
  overflow-wrap: break-word;
}
@media screen and (min-width:768px){
  .big-text{
    font-size: 4rem;
    line-height: 4.8rem; 
  }
}
@media screen and (min-width:1200px){
  .big-text{
    font-size: 6rem;
    line-height: 7.2rem; 
  }
}


/*Title | 32px - 48px - 64px*/
.title{
  font-family: Minion;
  font-size: 2rem; 
  line-height: 2.4rem;
  
  
}
@media screen and (min-width:768px){
  .title{
    font-size: 3rem;
    line-height: 3.6rem; 
  }
}
@media screen and (min-width:1200px){
  .title{
    font-size: 4rem;
    line-height: 4.8rem; 
  }
}


/*Heading | 24px - 32px - 40px*/
.heading{
  font-family: Minion;
  font-size: 1.5rem;
  line-height: 1.8rem;
  
  
}
@media screen and (min-width:768px){
  .heading{
    font-size: 2rem;
    line-height: 2.4rem; 
  }
}
@media screen and (min-width:1200px){
  .heading{
    font-size: 2.5rem;
    line-height: 3rem; 
  }
}


/*Big Body | 18px - 24px - 32px*/
.big-body{
  font-family: Verdana;
  font-size: 1.125rem;
  line-height: 1.6875rem;
  
  
}
@media screen and (min-width:768px){
  .big-body{
    font-size: 1.5rem;
    line-height: 2.25rem; 
  }
}
@media screen and (min-width:1200px){
  .big-body{
    font-size: 2rem;
    line-height: 3rem; 
  }
}


/*Body | 16px - 18px - 20px*/
.body{
  font-family: Verdana;
  font-size: 1rem;
  line-height: 1.5rem;
}
@media screen and (min-width:768px){
  .body{
    font-size: 1.125rem;
    line-height: 1.6875rem; 
  }
}
@media screen and (min-width:1200px){
  .body{
    font-size: 1.25rem;
    line-height: 1.875rem; 
  }
}


/*Secondary | 14px - 16px - 18px*/
.secondary{
  font-family: Verdana;
  font-size: .875rem; 
  line-height: 1.3125rem;
  
  
}
@media screen and (min-width:768px){
  .secondary{
    font-size: 1rem;
    line-height: 1.55rem; 
  }
}
@media screen and (min-width:1200px){
  .secondary{
    font-size: 1.125rem;
    line-height: 1.6875rem; 
  }
}

 
/*Functional | 12px - 14px - 16px*/
.functional{
  font-family: Verdana;
  font-size: .75rem;
  line-height: 1.125rem;
  
  
}
@media screen and (min-width:768px){
  .functional{
    font-size: .875rem;
    line-height: 1.3125rem; 
  }
}
@media screen and (min-width:1200px){
  .functional{
    font-size: 1rem;
    line-height: 1.5rem; 
  }
}

/*Tiny Text | 10px - 12px - 14px*/
.tiny-text{
  font-family: Verdana;
  /*why are we doing this here? is this a mistake left over?*/
  font-size: clamp(.625rem, .75rem, .875rem);  
  line-height: clamp(.9375rem, 1.125rem, 1.3125rem);
  
  
}
@media screen and (min-width:768px){
  .tiny-text{
    font-size: .75rem;
    line-height: 1.125rem; 
  }
}
@media screen and (min-width:1200px){
  .tiny-text{
    font-size: .875rem;
    line-height: 1.3125rem; 
  }
}


/*Buttons*/
/*
3 Sizes
button-small
button
button-large
*/
.button {
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  
  font-size: 1rem;
  line-height: 1.5rem;
  padding: .5rem 1rem;
  
  width: auto; 
  
  -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
  
}

.button-small{
 border: none;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 cursor: pointer;
  
  font-size: 0.75rem; 
  line-height: .9rem;
  padding: .75rem .75rem;
  
  width: auto; 
  
  -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
  
}

.button-big{
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  
  padding: 1rem 2rem;
  font-size: 1rem;
  line-height: 1.5rem;
  
  width: auto; 
  
  -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
  
}

/*There may be a good way to improve this in the future*/
/*
.button:hover, .button-big:hover, .button-small:hover{
  opacity: .8;
}
.button:focus, .button-big:focus, .button-small:focus{
  opacity: .5;
}
.button:active, .button-big:active, .button-small:active{
  opacity: 1.0;
}
*/


/*
Blue Containers
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/


/*Full Screen Container*/
.full-screen{
 display: block;
 overflow: auto;
 min-width: 100vw;
 min-height: 100vh;
 position: relative;
}

/*Full Width & Height*/
.full{
  display: block;
  overflow: auto;
  width: 100%;
  height: 100%;
  position: relative;
}

/*Full Width Variable Height Container*/
.full-width{
  display: block;
  overflow: auto;
  width: 100%;
  height: auto;
  position: relative;
}

/*Auto Containers*/
.auto{
  width: auto;
  height: auto;
}

.auto-width{
  width: auto;
}

.auto-height{
  height: auto;
}

/*Split View*/
.split-1-1{
  display: grid;
  grid-template-columns: 50% 50%;
  position: relative;
}
.split-1-3{
  display: grid;
  grid-template-columns: 33% 67%;
  position: relative;
}
.split-3-1{
  display: grid;
  grid-template-columns: 67% 33%;
  position: relative;
}
@media screen and (max-width:768px){
  .split-r{
    grid-template-columns: 100%;
  }
}



/*Scroll*/
.flow-scroll{ 
  overflow: scroll; 
  
}
.flow-scroll-h{ 
  overflow-x: scroll; 
  overflow-y: hidden;
}
.flow-scroll-v{ 
  overflow-y: scroll; 
  overflow-x: hidden;
}
.flow-auto{overflow: auto;}
.flow-hidden{overflow: hidden;}
.flow-clip{overflow: clip;}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}




/*
Grid Containers
----------------

Mobile First Grid Design
Specify the grid units desired for mobile
Optionally attach responsiveness to scale UP for larger screens
*/
.grid-6{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: .25rem;
  padding: 0px;
}
.grid-5{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: .25rem;
  padding: 0px;
}
.grid-4{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: .25rem;
  padding: 0px;
}
.grid-3{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap:.25rem;
  padding: 0px;
}
.grid-2{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: .25rem;
  padding: 0px;
}
.grid-1{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: .25rem;
  padding: 0px;
}

/*Scale UP for larger screens*/
/*Not used--responsiveness is now specific. can use this for an image grid of something auto*/
/*
@media screen and (min-width:768px){
  .grid-2--r{
    grid-template-columns: 1fr;
  }
  .grid-3--r{
    grid-template-columns: 1fr 1fr;
  }
  .grid-4--r{
    grid-template-columns: 1fr 1fr 1fr;
  }
  .grid-5--r{
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .grid-6--r{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}*/
@media screen and (min-width:768px){
  .grid-2-r{
    grid-template-columns: 1fr 1fr;
  }
  .grid-3-r{
    grid-template-columns: 1fr 1fr 1fr;
  }
  .grid-4-r{
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .grid-5-r{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
  .grid-6-r{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}



/*
Blue Animations
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/


/*Animations*/

/*Blink*/
.animate-blink {
  animation: Blink 3s infinite;
}
@keyframes Blink {
  0% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  }
}

/*Flicker*/
.animate-flicker {
  animation: FlickerAnimation 1s infinite;
}
@keyframes FlickerAnimation {
  0%   { opacity:.9; }
  50%  { opacity:.1; }
  100% { opacity:.9; }
}



/*
Blue Colors
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/


/*Blend Modes*/
.blend-normal{mix-blend-mode: normal;}
.blend-multiply{mix-blend-mode: multiply;}
.blend-screen{mix-blend-mode: screen;}
.blend-overlay{mix-blend-mode: overlay;}
.blend-darken{mix-blend-mode: darken;}
.blend-lighten{mix-blend-mode: lighten;}
.blend-color-dodge{mix-blend-mode: color-dodge;}
.blend-color-burn{mix-blend-mode: color-burn;}
.blend-hard-light{mix-blend-mode: hard-light;}
.blend-soft-light{mix-blend-mode: soft-light;}
.blend-difference{mix-blend-mode: difference;}
.blend-exclusion{mix-blend-mode: exclusion;}
.blend-hue{mix-blend-mode: hue;}
.blend-saturation{mix-blend-mode: saturation;}
.blend-color{mix-blend-mode: color;}
.blend-luminosity{mix-blend-mode: luminosity;}
.blend-plus-darker{mix-blend-mode: plus-darker;}
.blend-plus-lighter{mix-blend-mode: plus-lighter;}

/*
Brand Colors
Using these is purely optional. You can override them with your own brand colors. 
*/
.brand-primary{
  color: #4B8BF1;
  color: var(--brand-primary);
}
.brand-secondary{
  color: #03D5AB;
  color: var(--brand-secondary);
}
.brand-tertiary{
  color: #313A51;
  color: var(--brand-tertiary);
}

.brand-primary-bg{
 background-color: #4B8BF1;
 background-color: var(--brand-primary);
}
.brand-secondary-bg{
  background-color: #03D5AB;
  background-color: var(--brand-secondary);
}
.brand-tertiary-bg{
 background-color: #313A51;
 background-color: var(--brand-tertiary);
}

/*denotative Colors*/
.denotative-success{
  color: #03D5AB;
  color: var(--denotative-success);
}
.denotative-failure{
  color: #C82E41;
  color: var(--denotative-failure);
}
.denotative-info{
  color: #4B8BF1;
  color: var(--denotative-info);
}
.denotative-warning{
  color: #F1C178;
  color: var(--denotative-warning);
}

.denotative-success-bg{
  background: #03D5AB;
  background: var(--denotative-success);
}
.denotative-failure-bg{
  background: #C82E41;
  background: var(--denotative-failure);
}
.denotative-info-bg{
  background: #4B8BF1;
  background: var(--denotative-info);
}
.denotative-warning-bg{
  background: #FABD24;
  background: var(--denotative-warning);
}

/*Neutral*/
.neutral-light-1{
  color: rgb(255, 255, 255);
  color: var(--neutral-light-1);
}
.neutral-light-2{
  color: rgb(241, 244, 248);
  color: var(--neutral-light-2);
}
.neutral-light-3{
  color: rgb(219, 226, 231);
  color: var(--neutral-light-3);
}

.neutral-light-1-bg{
  background: rgb(255, 255, 255);
  background: var(--neutral-light-1);
}
.neutral-light-2-bg{
  background: rgb(241, 244, 248);
  background: var(--neutral-light-2);
}
.neutral-light-3-bg{
  background: rgb(219, 226, 231);
  background: var(--neutral-light-3);
}

.child_neutral-light-1-bg > *{ 
  background: rgb(255, 255, 255);
  background: var(--neutral-light-1); 
}
.child_neutral-light-2-bg > *{ 
  background: rgb(241, 244, 248);
  background: var(--neutral-light-2);
}
.child_neutral-light-3-bg > *{ 
  background: rgb(219, 226, 231);
  background: var(--neutral-light-3);
}




.neutral-gray-1{
  color: rgb(149, 161, 172);
  color: var(--neutral-gray-1);
}
.neutral--gray-2{
  color: rgb(90, 103, 113);
  color: var(--neutral-gray-2);
}
.neutral--gray-3{
  color: rgb(66, 78, 90);
  color: var(--neutral-gray-3);
}

.neutral-gray-1-bg{
  background: rgb(149, 161, 172);
  background: var(--neutral-gray-1);
}
.neutral-gray-2-bg{
  background: rgb(90, 103, 113);
  background: var(--neutral-gray-2);
}
.neutral-gray-3-bg{
  background: rgb(66, 78, 90);
  background: var(--neutral-gray-3);
}

.child_neutral-gray-1-bg > *{ 
  background: rgb(149, 161, 172);
  background: var(--neutral-gray-1);
}
.child_neutral-gray-2-bg > *{ 
  background: rgb(90, 103, 113);
  background: var(--neutral-gray-2);
}
.child_neutral-gray-3-bg > *{ 
 background: rgb(66, 78, 90);
 background: var(--neutral-gray-3);
}



.neutral-dark-1{
  color: rgb(32, 38, 45);
  color: var(--neutral-dark-1);
}
.neutral-dark-2{
  color: rgb(22, 27, 31);
  color: var(--neutral-dark-2);
}
.neutral-dark-3{
  color: rgb(0, 0, 0);
  color: var(--neutral-dark-3);
}

/* other dark black rgb(9, 15, 19);*/
.neutral-dark-1-bg{
  background: rgb(32, 38, 45);
  background: var(--neutral-dark-1);
}
.neutral-dark-2-bg{
  background: rgb(22, 27, 31);
  background: var(--neutral-dark-2);
}
.neutral-dark-3-bg{
  background: rgb(0, 0, 0);
  background: var(--neutral-dark-3);
}

.child_neutral-dark-1-bg > *{ 
  background: rgb(32, 38, 45);
  background: var(--neutral-dark-1);
}
.child_neutral-dark-2-bg > *{ 
  background: rgb(22, 27, 31);
  background: var(--neutral-dark-2);
}
.child_neutral-dark-3-bg > *{ 
  background: rgb(0, 0, 0);
  background: var(--neutral-dark-3);
}


/*Copy Colors*/
.copy-light{ 
  color: rgba(255, 255, 255, 0.87); 
  color: var(--copy-light);
}
.copy-light-medium{ 
  color: rgba(255, 255, 255, 0.6); 
  color: var(--copy-light-medium);
}
.copy-light-hc{ 
  color: white;
  color: var(--copy-light-hc);
}

.copy-dark{ 
  color: rgb(0, 0, 0, .87);
  color: var(--copy-dark);
}
.copy-dark-medium{
  color: rgb(0, 0, 0, .60);
  color: var(--copy-dark-medium);
}
.copy-dark-hc{
  color: black;
  color: var(--copy-dark-hc);
}


/*Inputs*/
.input-light-bg{
  background: rgba(255, 255, 255, 0.9);
  background: var(--input-light);
}
.input-light-alt-bg{
  background: rgba(219, 226, 231, 0.9);
  background: var(--input-light-alt);
}
.input-dark-bg{
  background: rgba(22, 27, 31, 0.9);
  background: var(--input-dark);
}
.input-dark-alt-bg{
  background: rgba(48, 55, 65, 0.9);
  background: var(--input-dark-alt);
}

.child_input-light-bg > *{ 
  background: rgba(255, 255, 255, 0.9);
  background: var(--input-light);
}
.child_input-light-alt-bg > *{ 
   background: rgba(219, 226, 231, 0.9);
   background: var(--input-light-alt);
}
.child_input-dark-bg > *{ 
  background: rgba(22, 27, 31, 0.9);
  background: var(--input-dark);
}
.child_input-dark-alt-bg > *{ 
  background: rgba(48, 55, 65, 0.9);
  background: var(--input-dark-alt);
}

/*Elevations*/ 
.elevation-light-1-bg{ 
  background-color: #FFFFFF;
  background-color: var(--elevation-light-1);
  box-shadow: 0px 1px 3px 0px rgba(0,0,0, 0.15);
  box-shadow: var(--elevation-light-1-shadow);
}
.elevation-light-2-bg{
  background-color: #FFFFFF;
  background-color: var(--elevation-light-2);
  box-shadow: 0px 2px 7px 0px rgba(0,0,0, 0.20);
  box-shadow: var(--elevation-light-2-shadow);
}
.elevation-light-3-bg{
  background-color: #FFFFFF;
  background-color: var(--elevation-light-3);
  box-shadow:  0px 3px 10px 0px rgba(0,0,0, 0.20);
  box-shadow: var(--elevation-light-3-shadow);
}
.elevation-dark-1-bg{ 
  background-color: #090F13;
  background-color: var(--elevation-dark-1);
  box-shadow:   0px 1px 3px 0px rgba(0,0,0, 0.15);
  box-shadow: var(--elevation-dark-2-shadow);
}
.elevation-dark-2-bg{ 
  background-color: #161b1f;
  background-color: var(--elevation-dark-2);
  box-shadow:   0px 2px 7px 0px rgba(0,0,0, 0.20);
  box-shadow: var(--elevation-dark-2--shadow);
}
.elevation-dark-3-bg{ 
  background-color: #20252A;
  background-color: var(--elevation-dark-3);
  box-shadow:  0px 3px 10px 0px rgba(0,0,0, 0.20);
  box-shadow: var(--elevation-dark-3--shadow);
}

 /*Icon Colors*/
.icon-light{
  color: rgba(255,255,255, 0.90);
  color: var(--icon-light);
}
.icon-light-bg{
  background-color: rgba(255,255,255, 0.90);
  background-color: var(--icon-light);
}

.icon-gray{
  color: rgba(149,161,172, 0.90);
  color: var(--icon-gray);
}
.icon-gray-bg{
  background-color: rgba(149,161,172, 0.90);
  background-color: var(--icon-gray);
}

.icon-dark{
  color: rgba(0,0,0, 0.90);
  color: var(--icon-dark);
}
.icon-dark-bg{
  background-color: rgba(0,0,0, 0.90);
  background-color: var(--icon-dark);
}

.icon-light-hc{
  color: #FFFFFF;
  color: var(--icon-light-hc);
}
.icon-light-hc-bg{
  background-color: #FFFFFF;
  background-color: var(--icon-light-hc);
}

.icon-gray-hc{
  color: #C4C4C4;
  color: var(--icon-gray-hc);
}
.icon-gray-hc-bg{
  background-color: #C4C4C4;
  background-color: var(--icon-gray-hc);
}

.icon-dark-hc{
  color: #000000;
  color: var(--icon-dark-hc);
}
.icon-dark-hc-bg{
  background-color: #000000;
  background-color: var(--icon-dark-hc);
}


/*Transparent*/
.transparent-light-1-bg{
  background-color: rgba(255, 255, 255, 0.37);
  background-color: var(--transparent-light-1);
}
.transparent-light-2-bg{
  background-color: rgba(255, 255, 255, 0.67);
  background-color: var(--transparent-light-2);
}
.transparent-light-3-bg{
  background-color: rgba(255, 255, 255, 0.97);
  background-color: var(--transparent-light-3);
}
.transparent-gray-1-bg{
  background-color: rgba(128,128,128,0.3);
  background-color: var(--transparent-gray-1);
}
.transparent-gray-2-bg{
  background-color: rgba(128,128,128,0.6);
  background-color: var(--transparent-gray-2);
}
.transparent-gray-3-bg{
  background-color: rgba(128,128,128,0.9);
  background-color: var(--transparent-gray-3);
}
.transparent-dark-1-bg{
  background-color: rgba(0,0,0,0.3);
  background-color: var(--transparent-dark-1);
}
.transparent-dark-2-bg{
  background-color: rgba(0,0,0,0.6);
  background-color: var(--transparent-dark-2);
}
.transparent-dark-3-bg{
  background-color: rgba(0,0,0,0.9);
  background-color: var(--transparent-dark-3);
}





/*
Blue Placement
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

/*Padding*/
/*Margin*/

/*Positioning*/
/*Alignment*/

/*Margins*/

/*Even Margins*/
.margin-halfx{margin:.5rem;}
.margin-1x{margin:1rem;}
.margin-2x{margin:2rem;}
.margin-3x{margin:3rem;}
.margin-4x{margin:4rem;}
.margin-6x{margin:6rem;}
.margin-8x{margin:8rem;}

.margin-auto{margin: auto;}

/*Center*/
.margin-v-center{
  margin-top: auto; 
  margin-bottom: auto;
}
.margin-h-center{
  margin-left: auto;
  margin-right: auto;
}

/*Horizontal*/
.margin-h-halfx{
  margin-left: .5rem;
  margin-right: .5rem;
}
.margin-h-1x{
  margin-left: 1rem;
  margin-right: 1rem;
}
.margin-h-2x{
  margin-left: 2rem;
  margin-right: 2rem;
}
.margin-h-3x{
  margin-left: 3rem;
  margin-right: 3rem;
}
.margin-h-4x{
  margin-left: 4rem;
  margin-right: 4rem;
}
.margin-h-6x{
  margin-left: 6rem;
  margin-right: 6rem;
}
.margin-h-8x{
  margin-left: 8rem;
  margin-right: 8rem;
}

/*Vertical*/
.margin-v-halfx{
  margin-top: .5rem;
  margin-bottom: .5rem;
}
.margin-v-1x{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.margin-v-2x{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.margin-v-3x{
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.margin-v-4x{
  margin-top: 4rem;
  margin-bottom: 4rem;
}
.margin-v-6x{
  margin-top: 6rem;
  margin-bottom: 6rem;
}
.margin-v-8x{
  margin-top: 8rem;
  margin-bottom: 8rem;
}

/*Specific*/
.margin-top-halfx{margin-top:.5rem;}
.margin-top-1x{margin-top:1rem;}
.margin-top-2x{margin-top:2rem;}
.margin-top-3x{margin-top:3rem;}
.margin-top-4x{margin-top:4rem;}
.margin-top-6x{margin-top:6rem;}
.margin-top-8x{margin-top:8rem;}

.margin-bottom-halfx{margin-bottom:.5rem;}
.margin-bottom-1x{margin-bottom:1rem;}
.margin-bottom-2x{margin-bottom:2rem;}
.margin-bottom-3x{margin-botom:3rem;}
.margin-bottom-4x{margin-bottom:4rem;}
.margin-bottom-6x{margin-bottom:6rem;}
.margin-bottom-8x{margin-bottom:8rem;}

.margin-left-halfx{margin-left:.5rem;}
.margin-left-1x{margin-left:1rem;}
.margin-left-2x{margin-left:2rem;}
.margin-left-3x{margin-left:3rem;}
.margin-left-4x{margin-left:4rem;}
.margin-left-6x{margin-left:6rem;}
.margin-left-8x{margin-left:8rem;}

.margin-right-halfx{margin-right:.5rem;}
.margin-right-1x{margin-right:1rem;}
.margin-right-2x{margin-right:2rem;}
.margin-right-3x{margin-right:3rem;}
.margin-right-4x{margin-right:4rem;}
.margin-right-6x{margin-right:6rem;}
.margin-right-8x{margin-right:8rem;}


/*Padding*/

/*Vertical*/
.pad-halfx{padding:.5rem;}
.pad-1x{padding:1rem;}
.pad-2x{padding:2rem;}
.pad-3x{padding:3rem;}
.pad-4x{padding:4rem;}
.pad-6x{padding:6rem;}
.pad-8x{padding:8rem;}

/*Horizontal*/
.pad-h-halfx{
  padding-left: .5rem;
  padding-right: .5rem;
}
.pad-h-1x{
  padding-left: 1rem;
  padding-right: 1rem;
}
.pad-h-2x{
  padding-left: 2rem;
  padding-right: 2rem;
}
.pad-h-3x{
  padding-left: 3rem;
  padding-right: 3rem;
}
.pad-h-4x{
  padding-left: 4rem;
  padding-right: 4rem;
}
.pad-h-6x{
  padding-left: 6rem;
  padding-right: 6rem;
}
.pad-h-8x{
  padding-left: 8rem;
  padding-right: 8rem;
}

/*Vertical*/
.pad-v-halfx{
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.pad-v-1x{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.pad-v-2x{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pad-v-3x{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.pad-v-4x{
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.pad-v-6x{
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.pad-v-8x{
  padding-top: 8rem;
  padding-bottom: 8rem;
}

/*Specific*/
.pad-top-halfx{padding-top:.5rem;}
.pad-top-1x{padding-top:1rem;}
.pad-top-2x{padding-top:2rem;}
.pad-top-3x{padding-top:3rem;}
.pad-top-4x{padding-top:4rem;}
.pad-top-6x{padding-top:6rem;}
.pad-top-8x{padding-top:8rem;}

.pad-bottom-halfx{padding-bottom:.5rem;}
.pad-bottom-1x{padding-bottom:1rem;}
.pad-bottom-2x{padding-bottom:2rem;}
.pad-bottom-3x{padding-botom:3rem;}
.pad-bottom-4x{padding-bottom:4rem;}
.pad-bottom-6x{padding-bottom:6rem;}
.pad-bottom-8x{padding-bottom:8rem;}

.pad-left-halfx{padding-left:.5rem;}
.pad-left-1x{padding-left:1rem;}
.pad-left-2x{padding-left:2rem;}
.pad-left-3x{padding-left:3rem;}
.pad-left-4x{padding-left:4rem;}
.pad-left-6x{padding-left:6rem;}
.pad-left-8x{padding-left:8rem;}

.pad-right-halfx{padding-right:.5rem;}
.pad-right-1x{padding-right:1rem;}
.pad-right-2x{padding-right:2rem;}
.pad-right-3x{padding-right:3rem;}
.pad-right-4x{padding-right:4rem;}
.pad-right-6x{padding-right:6rem;}
.pad-right-8x{padding-right:8rem;}


/*Margins for Child Elements*/
/*Margin*/
.child_margin-halfx > * {margin: .5rem;}
.child_margin-1x > * {margin: 1rem;}
.child_margin-2x > * {margin: 2rem;}
.child_margin-3x > * {margin: 3rem;}
.child_margin-4x > * {margin: 4rem;}
.child_margin-6x > * {margin: 6rem;}
.child_margin-8x > * {margin: 8rem;}


/*Vertical Margins*/
.child_margin-v-halfx > * { margin-top: .5rem;}
.child_margin-v-halfx > *:first-child {margin-top: 0rem;}

.child_margin-v-1x > * { margin-top: 1rem;}
.child_margin-v-1x > *:first-child {margin-top: 0rem;}

.child_margin-v-2x > * { margin-top: 2rem;}
.child_margin-v-2x > *:first-child {margin-top: 0rem;}

.child_margin-v-3x > * { margin-top: 3rem;}
.child_margin-v-3x > *:first-child {margin-top: 0rem;}

.child_margin-v-4x > * { margin-top: 4rem;}
.child_margin-v-4x > *:first-child {margin-top: 0rem;}

.child_margin-v-6x > * { margin-top: 6rem;}
.child_margin-v-6x > *:first-child {margin-top: 0rem;}

.child_margin-v-8x > * { margin-top: 8rem;}
.child_margin-v-8x > *:first-child {margin-top: 0rem;}

/*Horizontal Margins*/
.child_margin-h-halfx > * { margin-right: .5rem;}
.child_margin-h-halfx > *:last-child {margin-right: 0rem;}

.child_margin-h-1x > * { margin-right: 1rem;}
.child_margin-h-1x > *:last-child {margin-right: 0rem;}

.child_margin-h-2x > * { margin-right: 2rem;}
.child_margin-h-2x > *:last-child {margin-right: 0rem;}

.child_margin-h-3x > * { margin-right: 3rem;}
.child_margin-h-3x > *:last-child {margin-right: 0rem;}

.child_margin-h-4x > * { margin-right: 4rem;}
.child_margin-h-4x > *:last-child {margin-right: 0rem;}

.child_margin-h-6x > * { margin-right: 6rem;}
.child_margin-h-6x > *:last-child {margin-right: 6rem;}

.child_margin-h-8x > * { margin-right: 8rem;}
.child_margin-h-8x > *:last-child {margin-right: 0rem;}


/*Padding for Child Elements*/
/*Pad*/
.child_pad-halfx > * {padding: .5rem;}
.child_pad-1x > * {padding: 1rem;}
.child_pad-2x > * {padding: 2rem;}
.child_pad-3x > * {padding: 3rem;}
.child_pad-4x > * {padding: 4rem;}
.child_pad-6x > * {padding: 6rem;}
.child_pad-8x > * {padding: 8rem;}

/*Vertical Pad*/
.child_pad-v-halfx > * { padding-top: .5rem;}
.child_pad-v-halfx > *:first-child {padding-top: 0rem;}

.child_pad-v-1x > * { padding-top: 1rem;}
.child_pad-v-1x > *:first-child {padding-top: 0rem;}

.child_pad-v-2x > * {padding-top: 2rem;}
.child_pad-v-2x > *:first-child {padding-top: 0rem;}

.child_pad-v-3x > * {padding-top: 3rem;}
.child_pad-v-3x > *:first-child {padding-top: 0rem;}

.child_pad-v-4x > * {padding-top: 4rem;}
.child_pad-v-4x > *:first-child {padding-top: 0rem;}

.child_pad-v-6x > * {padding-top: 6rem;}
.child_pad-v-6x > *:first-child {padding-top: 0rem;}

.child_pad-v-8x > * {padding-top: 8rem;}
.child_pad-v-8x > *:first-child {padding-top: 0rem;}

/*Horizontal Pad*/
.child_pad-h-halfx > * {padding-right: .5rem;}
.child_pad-h-halfx > *:last-child {padding-right: 0rem;}

.child_pad-h-1x > * {padding-right: 1rem;}
.child_pad-h-1x > *:last-child {margin-right: 0rem;}

.child_pad-h-2x > * { padding-right: 2rem;}
.child_pad-h-2x > *:last-child {padding-right: 0rem;}

.child_pad-h-3x > * { padding-right: 3rem;}
.child_pad-h-3x > *:last-child {padding-right: 0rem;}

.child_pad-h-4x > * { padding-right: 4rem;}
.child_pad-h-4x > *:last-child {padding-right: 0rem;}

.child_pad-h-6x > * { padding-right: 6rem;}
.child_pad-h-6x > *:last-child {padding-right: 6rem;}

.child_pad-h-8x > * { padding-right: 8rem;}
.child_pad-h-8x > *:last-child {padding-right: 0rem;}



/*Position*/
.pos-top-left{
  position: absolute;
  top: 0;
  left: 0;
}
.pos-top-center{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0%);
}
.pos-top-right{
  position: absolute;
  top: 0;
  right: 0;
}

.pos-left{
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(0%,-50%);
}
.pos-center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pos-right{
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(0%,-50%);
}

.pos-bottom-left{
  position: absolute;
  bottom: 0;
  left: 0;
}
.pos-bottom-center{
 position: absolute;
 left: 50%;
 bottom: 0;
 transform: translate(-50%,0%);
}
.pos-bottom-right{
  position: absolute;
  bottom: 0;
  right: 0;
}

.align-left{text-align: left;}
.align-right{text-align: right;}
.align-center{text-align: center;}
.align-justify{text-align: justify;}

/*Floats*/
.float-left{float:left;}
.float-right{float:right;}

/*Fix Floats*/
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


/*Max width Constraints*/
.constrain-small{
  max-width: 600px;
}
.constrain{
  max-width: 960px;
}
.constrain-big{
  max-width: 1200px;
}


/*
Blue Styles
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/


/*Element FX*/

/*Need to add other states eventually*/

/*Hover Colors*/
/*Colors*/
.hover-primary:hover{
  color: #4B8BF1;
  color: var(--brand-primary);
}
.hover-secondary:hover{
  color: #03D5AB;
  color: var(--brand-secondary);
}
.hover-tertiary:hover{
  color: #313A51;
  color: var(--brand-tertiary);
}

.hover-info:hover{
  color: #4B8BF1;
  color: var(--denotative-info);
}
.hover-warning:hover{
  color: #F1C178;
  color: var(--denotative-warning);
}
.hover-success:hover{
  color: #03D5AB;
  color: var(--denotative-success);
}
.hover-failure:hover{
  color: #C82E41;
  color: var(--denotative-failure);
}

/*Copy Colors*/
.hover-copy-light:hover{
  color: rgba(255, 255, 255, 0.9);
  color: var(--copy-light);
}
.hover-copy-light-medium:hover{
  color: rgba(219, 226, 231, 0.9);
  color: var(--copy-light-medium);
}

.hover-copy-dark:hover{
  color: rgba(22, 27, 31, 0.9);
  color: var(--copy-dark);
}
.hover-copy-dark-medium:hover{
  color: rgba(48, 55, 65, 0.9);
  color: var(--copy-dark-medium);
}

/*Backgrounds*/
.hover-primary-bg:hover{
  background-color: #4B8BF1;
  background-color: var(--brand-primary);
}
.hover-secondary-bg:hover{
  background-color: #03D5AB;
  background-color: var(--brand-secondary);
}
.hover-tertiary-bg:hover{
  background-color: #313A51;
  background-color: var(--brand-tertiary);
}

.hover-info-bg:hover{
  background-color: #4B8BF1;
  background-color: var(--denotative-info);
}
.hover-warning-bg:hover{
  background-color: #F1C178;
  background-color: var(--denotative-warning);
}
.hover-success-bg:hover{
  background-color: #03D5AB;
  background-color: var(--denotative-success);
}
.hover-failure-bg:hover{
  background-color: #C82E41;
  background-color: var(--denotative-failure);
}

.hover-input-light-bg:hover{
  background-color: rgba(255, 255, 255, 0.9);
  background-color: var(--input-light);
}
.hover-input-light-alt-bg:hover{
  background-color: rgba(219, 226, 231, 0.9);
  background-color: var(--input-light-alt);
}

.hover-input-dark-bg:hover{
  background-color: rgba(22, 27, 31, 0.9);
  background-color: var(--input-dark);
}
.hover-input-dark-alt-bg:hover{
  background-color: rgba(48, 55, 65, 0.9);
  background-color: var(--input-dark-alt);
}


/*Hover Opacity FX*/
.hover-opacity:hover{
  opacity: .3;
}


/*Children - Hover - Table Rows*/
/*Color*/
.child_hover-info tr:hover{
  color: #4B8BF1;
  color: var(--denotative-info);
}
.child_hover-warning tr:hover{
  color: #F1C178;
  color: var(--denotative-warning);
}
.child_hover-success tr:hover{
  color: #03D5AB;
  color: var(--denotative-success);
}
.child_hover-failure tr:hover{
  color: #C82E41;
  color: var(--denotative-failure);
}

.child_hover-primary tr:hover{
  color: #4B8BF1;
  color: var(--brand-primary);
}
.child_hover-secondary tr:hover{
  color: #03D5AB; 
  color: var(--brand-secondary);
}
.child_hover-tertiary tr:hover{
  color: #313A51; 
  color: var(--brand-tertiary);
}

.child_hover-copy-light tr:hover{
  color: rgba(255, 255, 255, 0.9);
  color: var(--copy-light);
}
.child_hover-copy-light-medium tr:hover{
  color: rgba(219, 226, 231, 0.9);
  color: var(--copy-light-medium);
}

.child_hover-copy-dark tr:hover{
  color: rgba(22, 27, 31, 0.9);
  color: var(--copy-dark);
}
.child_hover-copy-dark-medium tr:hover{
  color: rgba(48, 55, 65, 0.9);
  color: var(--copy-dark-medium);
}


/*Backgrounds*/
.child_hover-info-bg tr:hover{
  background: #4B8BF1;
  background: var(--denotative-info);
}
.child_hover-warning-bg tr:hover{
  background: #F1C178;
  background: var(--denotative-warning);
}
.child_hover-success-bg tr:hover{
  background: #03D5AB;
  background: var(--denotative-success);
}
.child_hover-failure-bg tr:hover{
  background: #C82E41;
  background: var(--denotative-failure);
}

.child_hover-primary-bg tr:hover{
  background: #4B8BF1;
  background: var(--brand-primary);
}
.child_hover-secondary-bg tr:hover{
  background: #03D5AB; 
  background: var(--brand-secondary);
}
.child_hover-tertiary-bg tr:hover{
  background: #313A51; 
  background: var(--brand-tertiary);
}

.child_hover-input-light-bg tr:hover{
  background-color: rgba(255, 255, 255, 0.9);
  background-color: var(--input-light);
}
.child_hover-input-light-alt-bg tr:hover{
  background-color: rgba(219, 226, 231, 0.9);
  background-color: var(--input-light-alt);
}
.child_hover-input-dark-bg tr:hover{
  background-color: rgba(22, 27, 31, 0.9);
  background-color: var(--input-dark);
}
.child_hover-input-dark-alt-bg tr:hover{
  background-color: rgba(48, 55, 65, 0.9);
  background-color: var(--input-dark-alt);
}

/*Children - Hover - List Items*/
/*Color*/
.child_hover-info li:hover{
  color: #4B8BF1;
  color: var(--denotative-info);
}
.child_hover-warning li:hover{
  color: #F1C178;
  color: var(--denotative-warning);
}
.child_hover-success li:hover{
  color: #03D5AB;
  color: var(--denotative-success);
}
.child_hover-failure li:hover{
  color: #C82E41;
  color: var(--denotative-failure);
}

.child_hover-primary li:hover{
  color: #4B8BF1;
  color: var(--brand-primary);
}
.child_hover-secondary li:hover{
  color: #03D5AB; 
  color: var(--brand-secondary);
}
.child_hover-tertiary li:hover{
  color: #313A51; 
  color: var(--brand-tertiary);
}

.child_hover-copy-light li:hover{
  color: rgba(255, 255, 255, 0.9);
  color: var(--copy-light);
}
.child_hover-copy-light-medium li:hover{
  color: rgba(219, 226, 231, 0.9);
  color: var(--copy-light-medium);
}

.child_hover-copy-dark li:hover{
  color: rgba(22, 27, 31, 0.9);
  color: var(--copy-dark);
}
.child_hover-copy-dark-medium li:hover{
  color: rgba(48, 55, 65, 0.9);
  color: var(--copy-dark-medium);
}


/*Backgrounds*/
.child_hover-info-bg li:hover{
  background: #4B8BF1;
  background: var(--denotative-info);
}
.child_hover-warning-bg li:hover{
  background: #F1C178;
  background: var(--denotative-warning);
}
.child_hover-success-bg li:hover{
  background: #03D5AB;
  background: var(--denotative-success);
}
.child_hover-failure-bg li:hover{
  background: #C82E41;
  background: var(--denotative-failure);
}

.child_hover-primary-bg li:hover{
  background: #4B8BF1;
  background: var(--brand-primary);
}
.child_hover-secondary-bg li:hover{
  background: #03D5AB; 
  background: var(--brand-secondary);
}
.child_hover-tertiary-bg li:hover{
  background: #313A51; 
  background: var(--brand-tertiary);
}

.child_hover-input-light tr:hover{
  color: rgba(255, 255, 255, 0.9);
  color: var(--input-light);
}
.child_hover-input-light-alt tr:hover{
  color: rgba(219, 226, 231, 0.9);
  color: var(--input-light-alt);
}
.child_hover-input-dark tr:hover{
  color: rgba(22, 27, 31, 0.9);
  color: var(--input-dark);
}
.child_hover-input-dark-alt tr:hover{
  color: rgba(48, 55, 65, 0.9);
  color: var(--input-dark-alt);
}


/*Shapes*/
.shape-circle{
 border-radius: 50%;
}

.shape-pill{
  border-radius: 128px;
}

/*Backgrounds*/
.bg-center{
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}
.bg-top{
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg-bottom{
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg-left{
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg-right{
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
}


/*Display*/
.display-none{
  display:none;
}
.display-block{
  display:block;
}
.display-inline{
  display:inline;
}
.display-inline-block{
  display:inline-block;
}


/*Media Queries for Responsive Views*/
.respond-show-block-1{display: block;}
.respond-show-inline-1{display: inline-block;}
.respond-hide-1{display: none;}


@media screen and (min-width:768px){
  .respond-show-block-2{display: block;}
  .respond-show-inline-2{display: inline-block;}
  .respond-hide-2{display: none;}
}
@media screen and (min-width:1200px){
  .respond-show-block-3{display: block;}
  .respond-show-inline-3{display: inline-block;}
  .respond-hide-3{display: none;}
}



/*Font Weights*/
.font-thin{font-weight: 100;}
.font-extra-light{font-weight: 200;}
.font-light{font-weight: 300;}
.font-normal{font-weight: 400;}
.font-medium{font-weight: 500;}
.font-semi-bold{font-weight: 600;}
.font-bold{font-weight: 700;}
.font-extra-bold{font-weight: 800;}
.font-black{font-weight: 900;}
.font-extra-black{font-weight: 950;}

/*Font Styles*/
.font-normal{font-style: normal}
.font-italic{font-style: italic}




/*Borders*/
.border-outline{
  border: 4px solid rgba(219, 226, 231, 0.9);
  border: 4px solid var(--input-light-alt);
}
.border-underline{
  border: 0;
  border-bottom: 4px solid rgba(219, 226, 231, 0.9);
  border-bottom: 4px solid  var(--input-light-alt);
}


.border-top{
  border: 0;
  border-top: 4px solid rgba(219, 226, 231, 0.9);
  border-top: 4px solid  var(--input-light-alt);
}
.border-bottom{
  border: 0;
  border-bottom: 4px solid rgba(219, 226, 231, 0.9);
  border-bottom: 4px solid  var(--input-light-alt);
}
.border-right{
  border: 0;
  border-right: 4px solid rgba(219, 226, 231, 0.9);
  border-right: 4px solid  var(--input-light-alt);
}
.border-left{
  border: 0;
  border-left: 4px solid rgba(219, 226, 231, 0.9);
  border-left: 4px solid  var(--input-light-alt);
}

.border-none{
  border: 0;
  border-width: 0;
}

/*Rounding for Elements*/
.rounded-halfx{border-radius: 4px;}
.rounded-1x{border-radius: 8px;}
.rounded-2x{border-radius: 16px;}
.rounded-3x{border-radius: 24px;}
.rounded-4x{border-radius: 32px;}
.rounded-6x{border-radius: 48px;}
.rounded-8x{border-radius: 64px;}
.rounded-16x{border-radius: 128px;}


.child_rounded-halfx > * { border-radius: 4px;}
.child_rounded-1x  > *  {border-radius: 8px;}
.child_rounded-2x  > *  {border-radius: 16px;}
.child_rounded-3x  > *  {border-radius: 24px;}
.child_rounded-4x  > *  {border-radius: 32px;}
.child_rounded-6x  > *  {border-radius: 48px;}
.child_rounded-8x  > *  {border-radius: 64px;}
.child_rounded-16x  > *  {border-radius: 128px;}


/*Selection*/
.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

/*Override Examples*/
.brand-override{
  color: var(--brand-override);
}
.override-me{
  color: red;
}