/*
*
* ==========================================
* SHADOWS
* ==========================================
*
*/

/* List of shadows
*
* Basic Drop Shadow
* Offset Drop Shadow
* Drop Shadow Spread 5px
* One Edge Shadow
* Multi-box Color Shadows
*
*/

/* Basic Drop Shadow */
.shadow1 {
-moz-box-shadow: 0 0 10px;
-webkit-box-shadow: 0 0 10px;
box-shadow: 0 0 10px;
}

/* Offset Drop Shadow */
.shadow2 {
-moz-box-shadow: 5px 5px 10px;
-webkit-box-shadow: 5px 5px 10px;
box-shadow: 5px 5px 10px;
}

/* Drop Shadow Spread 5px */
.shadow3 {
-moz-box-shadow: 0 0 10px 5px;
-webkit-box-shadow: 0 0 10px 5px;
box-shadow: 0 0 10px 5px;
margin: 5px;
}

/* One Edge Shadow */
.shadow4 {
-moz-box-shadow: 0 8px 6px -7px;
-webkit-box-shadow: 0 8px 6px -7px;
box-shadow: 0 8px 6px -7px;
}

/* Multi-box Color Shadows */
.shadow5 {
-moz-box-shadow: 5px 5px 30px 5px red, -5px -5px 30px 5px blue;
-webkit-box-shadow: 5px 5px 30px 5px red, -5px -5px 30px 5px blue;
box-shadow: 5px 5px 30px 5px red, -5px -5px 30px 5px blue;
margin: 40px;
}

/* END SHADOWS */


/*
*
* ==========================================
* SCROLL-BEHAVIOR 
* ==========================================
*
*/

/* Smoothly animates links on page */

.smooth {
  scroll-behavior: smooth;
}

html {
  scroll-behavior: smooth;
}

/* END SCROLL-BEHAVIOR*/


/*
*
* ==========================================
* HR TEXT CONTENT DIVIDERS
* ==========================================
*
*/

/* Gray Divider (default) */
hr.hr-text {
  --bar-color: #999;                 /* single source of truth */
  position: relative;
  border: none;
  height: 35px;
  background: var(--bar-color);      /* bar color */
  color: var(--bar-color);           /* drives ::before text via currentColor */
}

hr.hr-text::before {
  content: attr(data-content);
  display: inline-block;
  background: #fff;                  /* pill background */
  font-weight: bold;
  font-size: 2rem;
  color: currentColor;               /* uses hr’s color */
  border-radius: 30rem;
  padding: 0.2rem 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Blue Divider (preset) */
hr.hr-text-blue {
  --bar-color: #5D85C6;              /* single source of truth */
  position: relative;
  border: none;
  height: 35px;
  background: var(--bar-color);      /* bar color */
  color: var(--bar-color);           /* drives ::before text */
}

hr.hr-text-blue::before {
  content: attr(data-content);
  display: inline-block;
  background: #fff;
  font-weight: bold;
  font-size: 2rem;
  color: currentColor;               /* uses hr’s color */
  border-radius: 30rem;
  padding: 0.2rem 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* END HR TEXT CONTENT DIVIDER */



/*
*
* ==========================================
* DIV CONTENT DIVIDERS
* ==========================================
*
*/

/* Regular Separator */

.separator {
background-color: #BCCCE0; padding: 5px; text-align: center; color: #33334d; font-size: xx-large;
}

/* End Regular Separator*/


/* Gradient Line Divider */
        /* minor cosmetics */
        .gradient-divider-line {
            display: table; 
            font-size: 24px; 
            text-align: center; 
            width: 75%; 					/* divider width */
            margin: 20px auto;					/* spacing above/below */
        }
        .gradient-divider-line div { display: table-cell; position: relative; }
        .gradient-divider-line div:first-child, .gradient-divider-line div:last-child {
            width: 50%;
            top: 13px;						/* adjust vertical align */
            -moz-background-size: 100% 2px; 			/* line width */
            background-size: 100% 2px; 				/* line width */
            background-position: 0 0, 0 100%;
            background-repeat: no-repeat;
        }
        .gradient-divider-line div:first-child {		/* color changes in here */
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#2D3B45));
            background-image: -webkit-linear-gradient(180deg, transparent, #2D3B45);
            background-image: -moz-linear-gradient(180deg, transparent, #2D3B45);
            background-image: -o-linear-gradient(180deg, transparent, #2D3B45);
            background-image: linear-gradient(90deg, transparent, #2D3B45);
        }
        .gradient-divider-line div:nth-child(2) {
            color: #2D3B45; padding: 0px 15px; width: auto; white-space: nowrap;
        }
        .gradient-divider-line div:last-child {			/* color changes in here */
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2D3B45), to(transparent));
            background-image: -webkit-linear-gradient(180deg, #2D3B45, transparent);
            background-image: -moz-linear-gradient(180deg, #2D3B45, transparent);
            background-image: -o-linear-gradient(180deg, #2D3B45, transparent);
            background-image: linear-gradient(90deg, #2D3B45, transparent);
        }

/* End Gradient Line Divider */


/*
*
* ==========================================
* TESTING CARDS FOR FOCUS GROUP
* ==========================================
*
*/

.cardpage {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.cardbody{
	min-height: 450px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cardcontainer{
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	width: 1100px;
}
.card{
	width: 300px;
	background: #e0e5ec;
	padding: 40px 30px;
	margin: 20px 10px;
	border-radius: 1rem;
	box-shadow: 5px 5px 10px rgba(163,177,198,.8),
				-9px -9px 16px 5px rgba(255,255,255,.5);
}
.card h4{
	padding: 10px;
	text-transform: uppercase;
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	margin: 0;
	box-sizing: border-box;
}
.card h5{
	text-align: center;
	color: #9b9b9b;
	font-weight: bold;
	letter-spacing: 1px;
	font-size: 1rem;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.card p{
	color: #696969;
	font-size: 1rem;
	font-weight: bold;
	padding: 10px 0;
	line-height: 1.5rem;
}
.card a{
	display: block;
	padding: 1.2rem;
	text-align: center;
	text-decoration: none;
    	background-color: #e0e5ec; 
    	border-style:hidden;
	color: #2E3B6A
	margin: 10px 0;
	font-size: 1rem;
	font-weight: bold;
	box-shadow: 3px 3px 10px rgba(163,177,198,.8),
				-5px -5px 16px 5px rgba(255,255,255,.5);
	border-radius: 100px;
}
.card a:hover{
	box-shadow:	inset 5px 5px 10px rgba(163,177,198,.4),
			inset	-5px -5px 10px rgba(255,255,255,.4);
	background-color: #e0e5ec; 
}


/*
*
* ==========================================
* PARALLAX
* ==========================================
*
*/

.parallax {
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
  }


/*
*
* ==========================================
* TEXT OVERLAY
* ==========================================
*
*/

/* This allows designers to put text in front of a picture */

/* Image and text go inside this div */
.overlay-content {
  text-align: center;
  position: relative;
}

/* Use this div to lighten an image and put dark text overlayed */
.overlay-lighten {
  opacity: 0.3;
  }
  
/* Use this div to darken an image and put light text overlayed */
.overlay-darken {
filter: brightness(50%);
  }

/* Use this class in a div, h2, or p to center the overlayed text */
.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*
*
* ==========================================
* BUTTON TRANSITIONS 
* ==========================================
*
*/


/* Fade */
.hover-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hover-fade:hover, .hover-fade:focus, .hover-fade:active {
  background-color: #008EE2;
  color: white;
}

/* Fade Red*/
.hover-fade-red {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hover-fade-red:hover, .hover-fade-red:focus, .hover-fade-red:active {
  background-color: #A63446;
  color: white;
}


/* Border Fade */
.hover-border-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 4px 	rgb(255, 255, 255, 0.0), 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
.hover-border-fade:hover, .hover-border-fade:focus, .hover-border-fade:active {
  box-shadow: inset 0 0 0 4px #008EE2, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}



/* Glow */
.hover-glow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hover-glow:hover, .hover-glow:focus, .hover-glow:active {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}


/* Shadow */
.hover-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hover-shadow:hover, .hover-shadow:focus, .hover-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}

/* Underline From Center */
.hover-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hover-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hover-underline-from-center:hover:before, .hover-underline-from-center:focus:before, .hover-underline-from-center:active:before {
  left: 0;
  right: 0;
}



/*
*
* ==========================================
* FLIP CARD WITH TEXT
* ==========================================
*
*/

/* This is a 300px x 300px flip card with the front image defined on the page HTML */

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* Do a horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}


/*
*
* ==========================================
* Columns
* ==========================================
*
*/

/* The property name columns has two values.  The pixel value determines the minimum width of the columns.  When the width is smaller than the minimum, the columns will merge.  The other value determines how many columns there will be if the screen has room enough for the miminum.  Small mobile device screens will likely be rendered as single column content.  */


.col2_200 {
  padding: 15px;
  columns: 200px 2;
  column-fill: balance;
  column-gap: 35px;
  column-rule: 4px dashed #79a5ed;
}

.col2_300 {
  padding: 15px;
  columns: 300px 2;
  column-fill: balance;
  column-gap: 35px;
  column-rule: 4px dashed #79a5ed;
}

.col3_200 {
  padding: 15px;
  columns: 200px 3;
  column-fill: balance;
  column-gap: 35px;
  column-rule: 4px dashed #79a5ed;
}

.col3_300 {
  padding: 15px;
  columns: 300px 3;
  column-fill: balance;
  column-gap: 35px;
  column-rule: 4px dashed #79a5ed;
}

.col4_200 {
  padding: 15px;
  columns: 200px 4;
  column-fill: balance;
  column-gap: 35px;
  column-rule: 4px dashed #79a5ed;
}

.col4_300 {
  padding: 15px;
  columns: 300px 4;
  column-fill: balance;
  column-gap: 35px;
  column-rule: 4px dashed #79a5ed;
}