/******************************************
Section | Header Interior
******************************************/
/**************************************************
Stylesheet: Defaults Stylesheet
**************************************************/
/**************************************************
Stylesheet: Mixins Stylesheet
**************************************************/
/*******************
FONT MIXINS (size, color, weight, line-height)
********************/
/*********************
Column split into X columns
@include column-count(3);
*********************/
/*********************
Column split with px gap
@include column-gap(40px);
*********************/
/*********************
Column split style
@include column-rule-style(solid);
*********************/
/*********************
Column split border
@include column-rule(1px solid #ededed);
*********************/
/*********************
Background gradient 2 color
@include background-gradient($gray, #000);
*********************/
/*********************
Background gradient 3 color
@include accordion-gradient($gray, #000, #666);
*********************/
/*********************
Transform duration by X seconds
@include transition(1.5s);
*********************/
/*********************
Transform Rotate element by x degrees
@include rotate(180);
*********************/
/*********************
Creates a 6px arrow with pure css
@include arrow(#000);
*********************/
/*********************
Clip 10px corner off the bottom right corner
@include cornerclip(#000);
*********************/
/*********************
Clip 3px corner off the bottom right corner
@include cornerclipsmall(#000);
*********************/
/*********************
Clip 10px corner off the top right corner
@include cornercliptop(#000);
*********************/
/*********************
Clip 10px corner off the top left corner
@include cornercliptopleft(#000);
*********************/
section.blue-column-callouts .inner {
  max-width: 1151px;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: -95px auto 0 auto; }

section.blue-column-callouts .blue-column {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(50% - 80px);
  position: relative;
  margin: 0 40px;
  padding-bottom: 80px; }
  section.blue-column-callouts .blue-column:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, #265CA6 0%, #053685 100%);
    box-shadow: 0px 86px 34px rgba(0, 0, 0, 0.03), 0px 48px 29px rgba(0, 0, 0, 0.09), 0px 21px 21px rgba(0, 0, 0, 0.16), 0px 5px 12px rgba(0, 0, 0, 0.18), 0px 0px 0px rgba(0, 0, 0, 0.18); }
  section.blue-column-callouts .blue-column:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: radial-gradient(105.63% 106.47% at 0% 0%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0.2;
    z-index: 1;
    box-shadow: inset -5px -5px 250px rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(12.5px);
    /* Note: backdrop-filter has minimal browser support */ }
  section.blue-column-callouts .blue-column .blue-column-contents {
    position: relative;
    z-index: 5;
    padding: 48px 39px 60px 45px; }

section.blue-column-callouts h2 {
  font-family: "proxima-nova-condensed", sans-serif;
  font-display: swap;
  font-size: 40px;
  color: #ffffff;
  font-weight: 600;
  line-height: 49px;
  letter-spacing: 0.05em;
  padding: 0px 0 15px 0; }

section.blue-column-callouts p {
  color: #ffffff;
  max-width: 400px;
  margin-bottom: 0; }

section.blue-column-callouts a.btn {
  margin: -5px 0 0 0;
  padding-left: 63px;
  padding-right: 63px; }

section.blue-column-callouts .button-icon {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: absolute;
  bottom: -55px;
  left: 0;
  padding: 0px 53px 0px 38px;
  height: 100px; }
  section.blue-column-callouts .button-icon img {
    max-height: 100px;
    width: auto; }

@media only screen and (max-width: 1100px) {
  section.blue-column-callouts .blue-column {
    flex-basis: calc(50% - 40px);
    margin: 0 15px; } }

@media only screen and (max-width: 900px) {
  section.blue-column-callouts .inner {
    flex-direction: column; }
  section.blue-column-callouts .blue-column {
    flex: 0 0 100%;
    margin: 15px 30px; } }

@media only screen and (max-width: 600px) {
  section.blue-column-callouts .button-icon {
    flex-wrap: wrap;
    height: 130px;
    justify-content: center; }
    section.blue-column-callouts .button-icon img {
      order: 1;
      padding: 0; }
    section.blue-column-callouts .button-icon a {
      order: 2; }
  section.blue-column-callouts .blue-column .blue-column-contents {
    padding: 48px 39px 100px 45px; } }