/* * Section styling */
 :root {
    /* Default Color */
    /* Card theme is used to apply color coding to each card */
     --card-theme: #158DBD;
}
 .section--flip-cards {
    /* Basic styling */
     padding: 3.5em 0;
     position: relative;
}
 .section__intro {
    /* Basic styling */
     text-align: center;
}
 .section__intro-body {
     padding-top: 2em;
     padding-bottom: 2em;
}
 .flip-cards-grid--col-2 .flip-cards-grid__item {
    /* Size items */
     min-width: calc(100%/2 - 2em);
     width: calc(100%/2 - 2em);
     max-width: calc(100%/2 - 2em);
}
.flip-cards-grid--col-3 .flip-cards-grid__item {
    /* Size items */
     min-width: calc(100%/3 - 2em);
     width: calc(100%/3 - 2em);
     max-width: calc(100%/3 - 2em);
}
 .flip-cards-grid--col-4 .flip-cards-grid__item {
    /* Size items */
     min-width: calc(100%/4 - 2em);
     width: calc(100%/4 - 2em);
     max-width: calc(100%/4 - 2em);
}
/* * Content styling */
/* Cards */
 .card-icon{
     width: 150px;
     margin-top: 8%;
}
 .flip-card__flipper {
    /* Basic styling */
    /* Removoed, and added to card faces, causing flips in certain browsers background-color: #fff;
     */
     padding: 0;
}
 .flip-card__front, .flip-card__back {
     border: 2px solid #00aec7;
}
 .flip-card__front:hover, .flip-card__back:hover {
     Grow shadow on interact -webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.09), 0px 8px 20px 10px rgba(0, 0, 0, 0.03);
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.09), 0px 8px 20px 10px rgba(0, 0, 0, 0.03);
}
/* Cards: Front */
 .flip-card__front {
    /* Basic styling */
     text-align: center;
}
 .flip-card__title {
    /* Basic styling */
     font-weight: bold;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: #fff;
     padding: 1em;
     margin: 0;
     font-size: 1.25rem;
     border-radius: 0 0 9px 9px;
     color: #004ea8;
}
 .flip-card__learn-more {
    /* Basic styling */
     color: #F18A21;
     display: block;
     position: absolute;
     bottom: 20px;
     left: 50%;
     -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     transform: translateX(-50%);
     width: 100%;
     text-align: center;
}
 .flip-card__summary {
     padding: 0 10px;
}
/* Card: Back */
 .flip-card__back-title {
    /* Basic styling */
     font-size: 18px;
     text-align: center;
}
 .flip-card__details {
     display:none;
}
 .flip-card__details ul {
    /* Kill UA styles in prep for custom bullets */
     padding: 0;
     list-style: none;
}
 .flip-card__details li {
    /* Make room for custom bullets */
     padding-left: 1.5em;
    /* Anchor custom bullets to self */
     position: relative;
    /* Add space between list items */
     margin-top: 0.33em;
     font-size: 16px;
}
 .flip-card__details li::before {
    /* Render custom bullets */
     content: "\f058";
    /* Basic styling */
     color: var(--card-theme);
     font-family: "Font Awesome 5 Free";
     font-weight: 400;
    /* Anchor to parent */
     position: absolute;
     top: 0;
     left: 0;
}
 .section__title {
     font-size: 3.5rem;
}
 .flip-card__subtitle {
     font-weight: 500;
}
 .flip-cards-grid__item {
     margin: .5em;
}
 .flip-card__image {
     background-size: cover;
     background-position: 60% 50%;
     height: 100%;
     width: 100%;
}
/* * Hover effect */
 .flip-card__learn-more, .flip-card__back-title {
    /* Hide by defualt These items are used during the hover and aren't needed on touch devices */
     display: none;
}
 .flip-card__flipper {
    /* Set up internal grid */
     display: -ms-grid;
     display: grid;
}
 .flip-card__flipper > .flip-card__front {
     -ms-grid-row: 1;
     -ms-grid-row-span: 1;
     -ms-grid-column: 1;
     -ms-grid-column-span: 1;
     grid-area: 1 / 1 / 2 / 2;
     background-color: #fff;
     padding: 0;
}
.flip-card__flipper > .flip-card__back {
    /* Lay the front and back on top of each other by putting them in the same grid cells so that they overlay each other without taking either of them out of the document flow ensuring the cards will always be tall enough */
     -ms-grid-row: 1;
     -ms-grid-row-span: 1;
     -ms-grid-column: 1;
     -ms-grid-column-span: 1;
     grid-area: 1 / 1 / 2 / 2;
     background-color: #f5f5f5;
     padding: 1.5em;
}
.flip-card__back {
    /* Visually hide the back by defualt */
     opacity: 0;
}
.flip-card__front, .flip-card__back {
    /* Animate the transition */
     -webkit-transition: opacity 0.25s cubic-bezier(0.37, 0, 0.45, 0.99);
     -o-transition: opacity 0.25s cubic-bezier(0.37, 0, 0.45, 0.99);
     transition: opacity 0.25s cubic-bezier(0.37, 0, 0.45, 0.99);
}
.flip-card.is-flipped .flip-card__front, .flip-card.is-flipped .flip-card__front {
    /* Hide the front */
     opacity: 0;
}
.flip-card.is-flipped .flip-card__back, .flip-card.is-flipped .flip-card__back {
    /* Show the back */
     opacity: 1;
}
.flip-card__details * {
    overflow-wrap: anywhere;
}
.flip-card__back-title {
    /* Show these elements as they're part of the hover and needed on non-touch devices */
     display: block;
     margin-bottom: 1em;
}
.flip-card__details {
     display:block;
     font-size: 16px;
}
.flip-card__back {
     position: relative;
}
.flip-card__button-group {
     position: absolute;
     text-align: center;
     bottom: 1em;
     left: 50%;
     -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     transform: translateX(-50%);
     width: 100%;
}
.flip-card {
     -webkit-perspective: 1000px;
     perspective: 1000px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     cursor: pointer;
     border-radius: 9px;
     flex-wrap:wrap;
}
/* flip the pane when clicked */
.flip-card.is-flipped .flip-card__flipper, .flip-card.hover .flip-card__flipper {
     -webkit-transform: rotateY(180deg);
     transform: rotateY(180deg);
}
.flip-card, .flip-card__front, .flip-card__back, .flip-card__image, .flip-card__flipper {
     border-radius: 9px;
}
/* flip speed goes here */
.flip-card__flipper {
     -webkit-transition: 0.6s;
     -o-transition: 0.6s;
     transition: 0.6s;
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
     position: relative;
     width:100%;
}
/* hide back of pane during swap */
.flip-card__front, .flip-card__back {
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
    /* position: absolute;
     top: 0;
     left: 0;
     */
}
/* front pane, placed above back */
 .flip-card__front {
     z-index: 2;
    /* for firefox 31 */
     -webkit-transform: rotateY(0deg);
     transform: rotateY(0deg);
}
/* back, initially hidden pane */
.flip-card__back {
     -webkit-transform: rotateY(180deg);
     transform: rotateY(180deg);
}
/* * Grid */
.flip-cards-grid__item {
     margin: .5em;
}

.flip-cards-grid__item.intro-text {
     padding-left: 1.5em;
}

 @media(max-width: 1137px) {
     .section--flip-cards {
         padding-top: 0;
    }
     .flip-cards-grid {
         -ms-flex-wrap: wrap-reverse;
         flex-wrap: wrap-reverse;
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
    }
     .card-icon{
         width: 100px;
         margin-top: 5%;
    }
    .flip-cards-grid__item,
    .flip-cards-grid--col-2 .flip-cards-grid__item,
    .flip-cards-grid--col-3 .flip-cards-grid__item,
    .flip-cards-grid--col-4 .flip-cards-grid__item{
         min-width: calc(100% - 2em) !important;
         width: calc(100% - 2em) !important;
         max-width: calc(100% - 2em) !important;
         margin: 1em !important;
         min-height:210px;
    }
    .flip-cards-grid__item.intro-text {
         width: 100% !important;
         max-width: 720px;
         padding: 0;
         margin: 1em 0;
         text-align: center;
    }
  }

  @media (max-width:980px){
    .flip-cards-grid__item,
    .flip-cards-grid--col-2 .flip-cards-grid__item,
    .flip-cards-grid--col-3 .flip-cards-grid__item,
    .flip-cards-grid--col-4 .flip-cards-grid__item{
         min-width: calc(100%) !important;
         width: calc(100%) !important;
         max-width: calc(100%) !important;
         margin: 1em !important;
    }
  } 

  @media(max-width: 820px) {
     .card-icon{
         margin-top: 3%;
    }
  }
 .flip-cards-grid {
    /* Kick off the grid */
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
    -ms-flex-wrap:wrap;
        flex-wrap:wrap;
}

.container-wrap {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding-left: 3em;
    padding-right: 3em;
    float: none !important;
    position: relative;
    width: 100%;
    z-index: 2;
}

.flip-card__details p {
    font-size: 14px;
}

  /* Internet Explorer */
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     button.button {
         display: inline-block;
    }
     button.button>* {
         display: inline-block;
    }
     .flip-card.is-flipped .flip-card__back {
         display: block;
    }
     .flip-card.is-flipped .flip-card__flipper {
         -webkit-transform: rotateY(0deg);
         transform: rotateY(0deg);
    }
     .flip-card__back {
         -webkit-transform: rotateY(0deg);
         transform: rotateY(0deg);
    }
}