/*========= Breakpoints ==========*/
/*** XD ***/
/*** SM ***/
/*** MD ***/
/*** LG ***/
/*========= Color Variables ==========*/
/* Color Palette used for All Components page */
@import "https://fonts.googleapis.com/css?family=Open+Sans";
.color-prim-one {
  background-color: #040F81;
  color: #FFFFFF;
}

.color-prim-two {
  background-color: #072665;
  color: #FFFFFF;
}

.text-prim-two {
  color: #072665 !important;
}

.color-sec-one {
  background-color: #6c7ca0;
  color: #FFFFFF;
}

.color-sec-two {
  background-color: #FF8100;
  color: #000000;
}

.color-sec-three {
  background-color: #52B9E9;
  color: #000000;
}

.color-sec-four {
  background-color: #ec4454;
  color: #000000;
}

.color-sec-five {
  background-color: #ec4454;
  color: #FFFFFF;
}

.color-sec-six {
  background-color: #072665;
  color: #FFFFFF;
}

.color-sec-seven {
  background-color: #006FE6;
  color: #FFFFFF;
}

.color-white {
  background-color: #FFFFFF;
  color: #000000;
}

.color-black {
  background-color: #000000;
  color: #FFFFFF;
}

.color-grey-one {
  background-color: #494c4e;
  color: #FFFFFF;
}

.color-grey-two {
  background-color: #F9FAFB;
  color: #000000;
}

.color-grey-three {
  background-color: #F2F3F5;
  color: #000000;
}

.color-grey-four {
  background-color: #E6EAF0;
  color: #000000;
}

.color-grey-five {
  background-color: #D3D9E3;
  color: #000000;
}

.color-grey-six {
  background-color: #B9C2D0;
  color: #000000;
}

.color-grey-seven {
  background-color: #7C8695;
  color: #000000;
}

.color-grey-eight {
  background-color: #72777A;
  color: #000000;
}

.color-grey-nine {
  background-color: #565A5C;
  color: #FFFFFF;
}

.color-neutral-one {
  background-color: #494C4E;
  color: #FFFFFF;
}

.color-neutral-two {
  background-color: #B5BDC2;
  color: #000000;
}

.color-neutral-three {
  background-color: #F8F9FA;
  color: #000000;
}

.color-neutral-four {
  background-color: #F7F7F7;
  color: #000000;
}

.color-gradient-one {
  background: -webkit-linear-gradient(#FFFFFF, #F9FAFB);
  background: linear-gradient(#FFFFFF, #F9FAFB);
}

.color-gradient-two {
  background: -webkit-linear-gradient(#F9FAFB, #F2F3F5);
  background: linear-gradient(#F9FAFB, #F2F3F5);
}

.color-gradient-three {
  background: -webkit-linear-gradient(#F9FAFB, #E6EAF0);
  background: linear-gradient(#F9FAFB, #E6EAF0);
}

.color-gradient-four {
  background: -webkit-linear-gradient(#B9C2D0, #72777A);
  background: linear-gradient(#B9C2D0, #72777A);
}

/*========= Fonts ==========*/
/* Font family for course */
/* font sizing converted to rem - worked off of https://snook.ca/archives/html_and_css/font-size-with-rem */
/*========= Mixins ==========*/
/*========= Flexbox ==========*/
/*========= Bootstrap Resets ==========*/
.card-header {
  background-color: #F9FAFB;
}

/*========= Default CSS Values ==========*/
/* Setting default colour font family and size/scale */
html,
body {
  color: #494c4e;
  font-family: "Open Sans", sans-serif;
  font-size: 85%;
}

/* Setting font family and size/scale for tablet and bigger (desktop) */
@media screen and (min-width: 768px) {
  html,
  body {
    font-size: 1rem;
  }
}

/* Setting max width of container-fluid */
.container-fluid {
  margin: 0 auto;
  max-width: 1200px;
}

/* Code snippets - allows text to wrap and avoids horizontal scroll bar */
pre, pre.card {
  margin-top: 1.25rem;
  word-break: break-all;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

pre code, pre.card code {
  white-space: pre-wrap;
  padding: 1.25rem;
}

/* Hides the source backgroung image for elements using the backgroundimage.js script */
.bg-img-wrapper {
  background-size: cover;
}

.bg-img-wrapper img:first-child {
  display: none;
}

/*========= Blockquotes ==========*/
/* Regular Blockquote */
blockquote, blockquote p {
  font-size: 1.188rem;
  line-height: 1.75rem;
  font-family: "Open Sans Bold", sans-serif;
  font-weight: 700;
  font-style: italic;
}

blockquote p, blockquote p p {
  margin-bottom: 0;
  padding-bottom: 10px;
}

blockquote footer, blockquote p footer {
  margin: 0;
  padding: 10px;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  font-style: normal;
  border-top: 1px solid #000000;
  text-align: left;
  padding-left: 0;
}

blockquote footer cite, blockquote p footer cite {
  font-style: normal;
}

blockquote footer.dash:before, blockquote p footer.dash:before {
  content: "\2014";
  padding-right: 3px;
}

/* Large Blockquote */
.blockquote-lg, .blockquote-lg p {
  font-size: 2.25rem;
  line-height: 2.875rem;
}

.blockquote-lg footer, .blockquote-lg p footer {
  font-size: 1rem;
  line-height: 1.5rem;
}

/* Image Blockquote */
.blockquote-img {
  padding: 45px;
  background-repeat: no-repeat;
  background-size: cover;
}

.blockquote-img blockquote {
  padding: 45px;
}

/*========= Headings ==========*/
h1,
.h1 {
  color: #040F81;
  font-weight: bold;
  font-family: "Helvetica Neue Bold", sans-serif;
  font-size: 2.5rem;
  line-height: 3rem;
}

@media screen and (max-width: 768px) {
  h1,
  .h1 {
    font-size: 2.25rem;
    line-height: 2.6rem;
  }
}

h2,
.h2 {
  color: #072665;
  font-weight: bold;
  font-family: "Helvetica Neue Medium", sans-serif;
  font-size: 1.875rem;
  line-height: 2.25rem;
}

h3,
.h3 {
  color: #040F81;
  font-weight: bold;
  font-family: "Helvetica Neue Bold", sans-serif;
  font-size: 1.625rem;
  line-height: 2.125rem;
}

h4,
.h4 {
  color: #040F81;
  font-weight: bold;
  font-family: "Helvetica Neue Bold", sans-serif;
  font-size: 1.313rem;
  line-height: 1.875rem;
}

h5,
.h5 {
  color: #040F81;
  font-weight: bold;
  font-family: "Helvetica Neue Bold", sans-serif;
  font-size: 1.188rem;
  line-height: 1.75rem;
}

.card-title-26 {
  color: #040F81;
  margin-bottom: .75rem;
  font-size: 1.625rem !important;
  line-height: 2.25rem !important;
}

.card-title-24 {
  color: #040F81;
  margin-bottom: .75rem;
  font-size: 1.5rem !important;
  line-height: 1.75rem !important;
}

.card-title-21 {
  color: #040F81;
  margin-bottom: .75rem;
  font-size: 1.313rem !important;
  line-height: 1.75rem !important;
}

.card-title-19 {
  color: #040F81;
  margin-bottom: .75rem;
  font-size: 1.188rem !important;
  line-height: 1.625rem !important;
}

/*========= Links ==========*/
a {
  color: #ec4454;
  text-decoration: none;
}

a:hover, a:focus, a:active {
  color: #072665;
  border-bottom: 1px solid #072665;
  text-decoration: none;
}

a.new-window::after, a.download::after {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 0.35rem;
}

a.new-window::after {
  content: "\f35d";
}

a.download::after {
  content: "\f019";
}

/*========= Lists ==========*/
ul, ol {
  counter-reset: item;
}

ul li, ol li {
  padding-bottom: 15px;
}

ul ul, ol ul {
  list-style: none;
}

ul ul li:before, ol ul li:before {
  content: "\2022";
  margin-left: -20px;
  margin-right: 14px;
}

ul ol li:before, ol ol li:before {
  content: "";
  margin-right: 25px;
}

ul {
  list-style: none;
}

ul li:before {
  content: "\2022";
  margin-left: -22px;
  margin-right: 12px;
}

li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Box Number List */
ol.box-number {
  counter-reset: li;
  padding-left: 48px;
}

ol.box-number li {
  list-style: none;
  padding-bottom: 12px;
  position: relative;
}

ol.box-number li:before {
  background-color: #000000;
  border-radius: 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  content: counter(li);
  counter-increment: li;
  font-size: 1rem;
  font-weight: bold;
  left: -48px;
  margin: 4px 8px 0 0;
  padding: 4px;
  position: absolute;
  text-align: center;
  top: -8px;
  width: 32px;
}

ol.box-number ol {
  counter-reset: list;
  padding-top: 16px;
  margin-left: 30px;
}

ol.box-number ol li:before {
  content: counter(list, lower-alpha);
  counter-increment: list;
}

ol.box-number ul {
  margin-left: 30px;
  padding-top: 16px;
}

ol.box-number ul li:before {
  background-color: transparent;
  color: #000000;
  content: "\2022";
  counter-increment: list;
  font-size: 1.5rem;
  left: -48px;
  margin-top: 0;
}

/* Icon List */
ul.list-icon {
  list-style-type: none;
  margin-left: 20px;
}

ul.list-icon li {
  padding-bottom: 12px;
  position: relative;
}

ul.list-icon span:before {
  font-size: 1.875rem;
  margin-left: -60px;
  position: absolute;
  top: -2px;
}

ul.list-icon.list-check span:before {
  color: #52B9E9;
}

ul.list-icon.list-cross span:before {
  color: #ec4454;
}

/* Box Alpha List */
ol.box-alpha {
  counter-reset: letter;
  padding-left: 48px;
}

ol.box-alpha li {
  list-style: none;
  padding-bottom: 12px;
  position: relative;
}

ol.box-alpha li:before {
  background-color: #000000;
  border-radius: 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  content: counter(letter, lower-alpha);
  counter-increment: letter;
  font-size: 1rem;
  font-weight: bold;
  left: -48px;
  margin: 4px 8px 0 0;
  padding: 4px;
  position: absolute;
  text-align: center;
  top: -8px;
  width: 32px;
}

ol.box-alpha ol {
  counter-reset: list;
  padding-top: 16px;
  margin-left: 30px;
}

ol.box-alpha ol li:before {
  content: counter(list, lower-roman);
  counter-increment: list;
}

ol.box-alpha ul {
  padding-top: 16px;
  margin-left: 30px;
}

ol.box-alpha ul li:before {
  background-color: transparent;
  color: #000000;
  content: "\2022";
  counter-increment: list;
  font-size: 1.5rem;
  left: -48px;
  margin-top: 0;
}

/* Step List */
ol.list-step {
  counter-reset: li;
  list-style-type: none;
  padding: 0 0 0 16px;
}

ol.list-step li:before {
  content: "Step " counter(li);
  counter-increment: li;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
}

ol.list-step p {
  padding-left: 16px;
}

/* Large Number List - for Learning Objectives */
ol.large-number {
  counter-reset: item;
}

ol.large-number li {
  list-style: none;
  position: relative;
}

ol.large-number li:before {
  content: counter(item) "." " ";
  counter-increment: item;
  color: #072665;
  left: -38px;
  position: absolute;
  top: -12px;
  font-family: "Lato Bold", sans-serif;
  font-size: 1.875rem;
  font-weight: bold;
}

ol.large-number ol, ol.large-number ul {
  counter-reset: list;
  padding-top: 16px;
}

ol.large-number ol li:before, ol.large-number ul li:before {
  color: #072665;
  counter-increment: list;
  left: -25px;
  top: 5px;
  font-size: 1.5rem;
  line-height: 1rem;
  font-weight: 400;
}

ol.large-number ul li:before {
  left: -3px;
  top: 6px;
}

ol.large-number ol {
  margin-left: 20px;
}

ol.large-number ol li:before {
  content: counter(list, lower-alpha) ". ";
}

ol.large-number ul {
  margin-left: 20px;
}

ol.large-number ul li:before {
  content: "\2022";
}

/* Lower alpha list*/
ol.lower-alpha {
  list-style-type: lower-alpha;
}

/* Colors for list markers */
/* Colors for background of element --used for box-number, box-list*/
ol.bg-colour-one li:before,
ul.bg-colour-one li:before {
  background-color: #6c7ca0;
}

ol.bg-colour-one span:before,
ul.bg-colour-one span:before {
  background-color: #6c7ca0;
}

/* Colors for text of element --used for dics ul, fa icons */
ol.text-colour-one li:before,
ul.text-colour-one li:before {
  color: #6c7ca0;
}

ol.text-colour-one span:before,
ul.text-colour-one span:before {
  color: #6c7ca0;
}

/*========= Text Elements ==========*/
/* Styling for text elements, for example <p>, <span>, <em> and <strong>. */
.underline {
  border-bottom: 1px solid #000000;
}

p {
  /* Add any custom formatting to the P tag here. */
  font-size: 1.188rem;
  line-height: 1.75rem;
}

.lead {
  /* Part of Bootstrap 4. Lead text can be used to begin a topic and would draw learner attention to a critical point, or could be an attention catching fact.*/
  color: #072665;
  font-size: 1.313rem;
  line-height: 1.75rem;
}

.emphasis {
  /* Custom visual styling for paragraph to be highlighted/emphasised to learner in addition to or instead of <em>. */
  font-family: "Open Sans Bold", sans-serif;
  font-weight: bold;
  color: #072665;
  font-size: 1.313rem;
  line-height: 1.875rem;
}

.instruction {
  /* Add visual styling to Instruction Text for Interactive elements - for example Accordions, Flip Cards and Tabs. */
  font-weight: bold;
  font-family: "Open Sans Bold", sans-serif;
  line-height: 1.75rem;
}

ol, ul {
  font-size: 1.188rem;
}

/*========= Banners ==========*/
.overlay-content {
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  text-align: center;
  overflow: hidden;
}

.overlay-content h1,
.overlay-content h2,
.overlay-content h3,
.overlay-content h4,
.overlay-content h5,
.overlay-content h6 {
  font-size: 2.5rem;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 15px;
}

.overlay-content p {
  color: #FFFFFF;
  text-align: center;
}

.overlay-content .card-body {
  background-color: transparent;
  border: 0;
}

.overlay-content .card-body p {
  color: #FFFFFF;
}

.overlay-content.bg-darkness,
.overlay-content .bg-darkness {
  background-color: rgba(86, 90, 92, 0.9);
}

.intro-flex {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  height: 200px;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.overlay-intro h1,
.overlay-intro h2,
.overlay-intro h3,
.overlay-intro h4,
.overlay-intro h5,
.overlay-intro h6 {
  font-size: 2.5rem;
  color: #FFFFFF;
  text-shadow: 2px 2px 2px #B5BDC2;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .overlay-intro h1,
  .overlay-intro h2,
  .overlay-intro h3,
  .overlay-intro h4,
  .overlay-intro h5,
  .overlay-intro h6 {
    padding-left: 15px;
  }
}

.overlay-intro p {
  color: #FFFFFF;
  text-align: center;
}

.overlay-intro .card-body {
  background-color: transparent;
  border: 0;
}

.overlay-intro .card-body p {
  color: #FFFFFF;
}

.overlay-intro.bg-darkness,
.overlay-intro .bg-darkness {
  background-color: rgba(86, 90, 92, 0.9);
}

.intersect-wrapper {
  overflow: hidden;
}

.intersect-wrapper .intersect-content {
  background: #FFFFFF;
  margin: 15% auto auto;
  padding: 30px 0px 15px;
  overflow: hidden;
}

hr {
  margin: 30px 0;
  border-top: 1px solid #B5BDC2;
}

/*========= Callouts ==========*/
.card-standard {
  padding: 20px;
  border: 2px solid #6c7ca0;
  background-color: #F8F9FA;
  margin: 10px 0;
}

.card-standard .card-body h2,
.card-standard .card-body h3,
.card-standard .card-body h4,
.card-standard .card-body h5,
.card-standard .card-body h6 {
  color: #040F81;
  margin-bottom: .75rem;
  font-size: 1.625rem;
  line-height: 2.25rem;
}

.card-standard .card-body p {
  color: #040F81;
}

.card-alt {
  padding: 20px;
  border: 1px solid #B5BDC2;
  background-color: #F7F7F7;
  margin: 10px 0;
}

.card-alt .card-body h2,
.card-alt .card-body h3,
.card-alt .card-body h4,
.card-alt .card-body h5,
.card-alt .card-body h6 {
  color: #040F81;
  margin-bottom: .75rem;
  font-size: 1.625rem;
  line-height: 2.25rem;
}

.card-alt .card-body p {
  color: #040F81;
}

.card-graphic {
  border: 2px solid #6c7ca0;
  background-color: #F8F9FA;
  margin: 10px 0;
  padding: 20px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -webkit-box;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  display: flex;
}

.card-graphic .card-body {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -webkit-box;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
}

.card-graphic .card-body h2,
.card-graphic .card-body h3,
.card-graphic .card-body h4,
.card-graphic .card-body h5,
.card-graphic .card-body h6 {
  color: #040F81;
  margin-bottom: .75rem;
  font-size: 1.313rem;
  line-height: 1.75rem;
}

.card-graphic .card-body p {
  color: #212529;
}

.card-graphic .card-body .card-icon {
  margin-right: 20px;
  -webkit-order: 0;
  -ms-flex-order: 0;
  -webkit-box-ordinal-group: 1;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  -webkit-box-flex: 0;
  flex: 0 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  -ms-grid-row-align: auto;
  align-self: auto;
  padding: 10px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.card-graphic .card-body .card-icon img {
  margin-right: 10px;
}

.card-graphic .card-body .card-icon .fa, .card-graphic .card-body .card-icon .fas {
  font-size: 3.125rem;
  min-width: 80px;
  text-align: center;
}

.card-graphic .card-body .card-text p {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

@media screen and (max-width: 768px) {
  .card-graphic .card-body .card-icon {
    display: none;
  }
}

/*========= Figures ==========*/
figure {
  margin: 0 auto 10px;
  display: inline-block;
}

figure figcaption {
  font-style: normal;
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: left;
}

figure img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border: 0;
}

figure.float-left {
  margin-right: 20px;
}

figure.float-right {
  margin-left: 20px;
}

.img-200 {
  max-width: 200px;
}

.img-300 {
  max-width: 250px;
}

.img-400 {
  max-width: 400px;
}

.img-500 {
  max-width: 500px;
}

.img-600 {
  max-width: 100%;
}

@media screen and (min-width: 554px) {
  figure {
    margin-bottom: 0;
  }
  .img-200 {
    max-width: 20%;
  }
  .img-300 {
    max-width: 30%;
  }
  .img-400 {
    max-width: 50%;
  }
  .img-500 {
    max-width: 60%;
  }
  .img-600 {
    max-width: 66%;
  }
}

@media screen and (min-width: 768px) {
  .img-300 {
    max-width: 300px;
  }
  .img-400 {
    max-width: 400px;
  }
  .img-500 {
    max-width: 500px;
  }
  .img-600 {
    max-width: 550px;
  }
}

@media screen and (min-width: 992px) {
  .img-600 {
    max-width: 600px;
  }
}

/*========= Footers ==========*/
footer {
  padding: 30px 10px;
  margin-top: 30px;
  text-align: right;
}

footer img {
  max-height: 125px;
}

/*========= Icons ==========*/
.i-sm {
  height: 1.875rem !important;
  width: auto !important;
}

.i-md {
  height: 2.8125rem !important;
  width: auto !important;
}

.i-lg {
  height: 3.75rem !important;
  width: auto !important;
}

.i-xl {
  height: 5rem !important;
  width: auto !important;
}

.i-xxxl {
  height: 7rem !important;
  width: auto !important;
}

/*========= Images ==========*/
.flip-r {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 30px !important;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

/*========= Jumbotrons ==========*/
.jumbotron {
  padding: 30px;
  background-color: #6c7ca0;
  color: #FFFFFF;
}

.jumbotron h1,
.jumbotron h2,
.jumbotron h3,
.jumbotron h4,
.jumbotron h5,
.jumbotron h6,
.jumbotron p,
.jumbotron ul,
.jumbotron ol,
.jumbotron ol.large-number li::before,
.jumbotron a {
  color: #FFFFFF;
}

.jumbotron a:hover,
.jumbotron a:focus,
.jumbotron a:active {
  color: #FFFFFF;
  text-decoration: underline;
}

.jumbotron .icon {
  fill: #FFFFFF;
  stroke: #FFFFFF;
}

/*========= Panels ==========*/
/* Two Column Panels */
.two-col-panels h2,
.two-col-panels h3,
.two-col-panels h4,
.two-col-panels h5, .stacked-panels h2,
.stacked-panels h3,
.stacked-panels h4,
.stacked-panels h5 {
  color: #072665;
}

.two-col-panels .card-body, .stacked-panels .card-body {
  border: 1px solid #B5BDC2;
}

/* Stacked Panels */
.stacked-panels .card {
  margin: 10px 0;
}

/*========= Tables ==========*/
.table-responsive,
.table {
  overflow-y: hidden;
  border: 0;
}

.table-responsive th, .table-responsive td,
.table th,
.table td {
  border: 0;
}

.table-responsive thead th, .table-responsive thead td,
.table thead th,
.table thead td {
  background-color: #F8F9FA;
  border-bottom: 0;
  font-family: "Open Sans Bold", sans-serif;
  font-weight: bold;
  font-size: 1.25rem;
}

.table-responsive caption,
.table caption {
  vertical-align: middle;
  min-height: 20px;
  text-align: center;
  font-weight: bold;
}

.table-bordered {
  border: 1px solid #B5BDC2;
  border-radius: 5px;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #B5BDC2;
}

.table-bordered thead th, .table-bordered thead td {
  border-bottom: 1px solid #B5BDC2;
}

.table-bordered tr:first-child td {
  border-top: 0;
}

.table-bordered tr td:first-child {
  border-left: 0;
}

.table-bordered tr td:last-child {
  border-right: 0;
}

.table-bordered tr:first-child th {
  border-top: 0;
}

.table-bordered tr th:first-child {
  border-left: 0;
}

.table-bordered tr th:last-child {
  border-right: 0;
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
  border: 0;
}

/*========= Timelines ==========*/
.timeline {
  list-style: none;
  padding-left: 0;
  position: relative;
  margin-left: 0;
}

.timeline:before {
  background-color: #D3D9E3;
  bottom: 0;
  content: " ";
  left: 40px;
  margin-left: -1px;
  position: absolute;
  top: 0;
  width: 2px;
}

.timeline > li {
  margin-bottom: 30px;
  position: relative;
  padding: 0;
}

.timeline > li:before, .timeline > li:after {
  border-left-width: 0;
  content: " ";
  display: table;
  right: auto;
}

.timeline > li:before {
  border-right-width: 15px;
  left: -15px;
}

.timeline > li:after {
  border-right-width: 14px;
  clear: both;
  left: -14px;
}

.timeline > li:last-child {
  padding-bottom: 0;
}

.timeline .timeline-badge {
  background-color: #6c7ca0;
  border-radius: 15px;
  height: 15px;
  left: 33px;
  line-height: 50px;
  margin-left: 0;
  position: absolute;
  top: 34px;
  text-align: center;
  width: 15px;
  z-index: 100;
}

.timeline .timeline-panel {
  background-color: #F9FAFB;
  border: 1px solid #D3D9E3;
  border-radius: 5px;
  float: right;
  padding: 20px;
  position: relative;
  width: calc(100% - 90px);
}

.timeline .timeline-panel:before, .timeline .timeline-panel:after {
  content: " ";
  display: inline-block;
  position: absolute;
}

.timeline .timeline-panel:before {
  border-top: 15px solid transparent;
  border-right: 15px solid #D3D9E3;
  border-bottom: 15px solid transparent;
  border-left: 0 solid #D3D9E3;
  left: -15px;
  right: auto;
  top: 26px;
}

.timeline .timeline-panel:after {
  border-top: 14px solid transparent;
  border-left: 0 solid #F9FAFB;
  border-right: 14px solid #F9FAFB;
  border-bottom: 14px solid transparent;
  left: -14px;
  right: auto;
  top: 27px;
}

.timeline .timeline-heading h2:first-child,
.timeline .timeline-heading h3:first-child,
.timeline .timeline-heading h4:first-child,
.timeline .timeline-heading h5:first-child,
.timeline .timeline-heading h6:first-child {
  margin-top: 0px;
}

.timeline .timeline-body p:last-child,
.timeline .timeline-body ol:last-child,
.timeline .timeline-body ul:last-child,
.timeline .timeline-body ol:last-child li:last-child,
.timeline .timeline-body ul:last-child li:last-child {
  margin-bottom: 0px;
}

.timeline .timeline-heading > h2,
.timeline .timeline-heading > h3 {
  color: #040F81;
}

@media screen and (min-width: 768px) {
  .timeline-alt:before {
    left: 50%;
  }
  .timeline-alt .timeline-badge {
    left: 50%;
    margin-left: -8px;
    top: 35px;
  }
  .timeline-alt .timeline-panel {
    float: left;
    width: 46%;
  }
  .timeline-alt .timeline-panel:before, .timeline-alt .timeline-panel:after {
    border-right-width: 0;
    left: auto;
  }
  .timeline-alt .timeline-panel:before {
    border-left-width: 15px;
    right: -15px;
  }
  .timeline-alt .timeline-panel:after {
    border-left-width: 14px;
    right: -14px;
  }
  .timeline-alt li:nth-child(even) .timeline-panel {
    float: right;
  }
  .timeline-alt li:nth-child(even) .timeline-panel:before, .timeline-alt li:nth-child(even) .timeline-panel:after {
    border-left-width: 0;
    right: auto;
  }
  .timeline-alt li:nth-child(even) .timeline-panel:before {
    border-right-width: 15px;
    left: -15px;
  }
  .timeline-alt li:nth-child(even) .timeline-panel:after {
    border-right-width: 14px;
    left: -14px;
  }
}

/** Videos **/
.embed-responsive {
  margin-bottom: 15px;
}

.video-wrapper {
  margin: 15px auto;
  padding: 30px;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-wrapper .video-text {
  font-size: 1rem;
}

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

/*========= Accordions ==========*/
/* Accordion: Standard */
.accordion {
  margin-top: 10px;
  padding: 0;
  border: 1px solid #D3D9E3;
  border-radius: 5px 5px 0 0;
  /* Accordion: Numbered */
}

.accordion .card {
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
}

.accordion .card .card-title {
  margin: 0;
}

.accordion .card .card-title button {
  padding: 20px;
  margin: 0;
  background-color: #FFFFFF;
  border: 1px solid #D3D9E3;
  color: #ec4454;
  padding-left: 65px;
  font-size: 1.25rem;
}

.accordion .card .card-title button:hover, .accordion .card .card-title button:focus {
  background-color: #072665;
  border-color: #072665;
  color: #FFFFFF;
}

.accordion .card .card-title button:hover::after, .accordion .card .card-title button:focus::after {
  color: #FFFFFF;
}

.accordion .card .card-title button:active, .accordion .card .card-title button:active:hover, .accordion .card .card-title button:active:focus {
  background-color: #072665;
  border-color: #072665;
  color: #FFFFFF;
}

.accordion .card .card-title button:active::after, .accordion .card .card-title button:active:hover::after, .accordion .card .card-title button:active:focus::after {
  color: #FFFFFF;
}

.accordion .card .card-title button:disabled, .accordion .card .card-title button[aria-expanded="true"] {
  background-color: #072665;
  border-color: #072665;
  color: #FFFFFF;
}

.accordion .card .card-title button:disabled::after, .accordion .card .card-title button[aria-expanded="true"]::after {
  color: #FFFFFF;
}

.accordion .card .card-title button::after {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 24px;
  left: 1.875rem;
  color: #000000;
}

.accordion .card .card-title button[aria-expanded="true"]:after {
  content: "\f107";
}

.accordion .card .card-title button[aria-expanded="false"]:after {
  content: "\f105";
}

.accordion .card .card-header {
  border: none;
  padding: 0;
}

.accordion .card .card-header button {
  width: 100%;
  text-align: left;
}

.accordion .card-body {
  border: 1px solid #D3D9E3;
  background-color: #F8F9FA;
}

.accordion.accordion-num {
  counter-reset: accordion;
}

.accordion.accordion-num .card-title button {
  padding: 20px;
  margin: 0;
  background-color: #FFFFFF;
  border: 1px solid #D3D9E3;
  color: #ec4454;
  padding-left: 85px;
  font-size: 1.25rem;
}

.accordion.accordion-num .card-title button:hover, .accordion.accordion-num .card-title button:focus {
  background-color: transparent;
  border-color: transparent;
  color: #072665;
}

.accordion.accordion-num .card-title button:hover::before, .accordion.accordion-num .card-title button:focus::before {
  background-color: #072665;
  border-color: #072665;
  height: auto;
}

.accordion.accordion-num .card-title button:hover::after, .accordion.accordion-num .card-title button:focus::after {
  color: #000000;
}

.accordion.accordion-num .card-title button:active, .accordion.accordion-num .card-title button:active:hover, .accordion.accordion-num .card-title button:active:focus {
  background: #072665;
  border: 1px solid #072665;
  color: #FFFFFF;
}

.accordion.accordion-num .card-title button:active::before, .accordion.accordion-num .card-title button:active:hover::before, .accordion.accordion-num .card-title button:active:focus::before {
  background-color: #072665;
  border-color: #072665;
  height: auto;
}

.accordion.accordion-num .card-title button:active::after, .accordion.accordion-num .card-title button:active:hover::after, .accordion.accordion-num .card-title button:active:focus::after {
  color: #000000;
}

.accordion.accordion-num .card-title button:disabled, .accordion.accordion-num .card-title button[aria-expanded="true"] {
  background-color: #072665;
  border-color: #072665;
  color: #FFFFFF;
}

.accordion.accordion-num .card-title button:disabled::after, .accordion.accordion-num .card-title button[aria-expanded="true"]::after {
  color: #FFFFFF;
}

.accordion.accordion-num .card-title button:before {
  background: #ec4454;
  border: 1px solid #ec4454;
  color: #FFFFFF;
  counter-increment: accordion;
  content: counter(accordion);
  padding: 20px;
  height: auto;
  position: absolute;
  top: -0;
  margin-left: -90px;
}

.accordion.accordion-num .card-title button::after {
  left: 4rem;
}

.accordion.accordion-num .card-title .collapsed:before {
  height: 100% !important;
  background: #ec4454 !important;
  border: 1px solid #ec4454 !important;
}

.accordion.accordion-num .card-title .acc-num:before {
  height: auto;
  background: #072665;
  border: 0;
}

/*========= Buttons ==========*/
button {
  /* Default Button and Primary Button - this can be split up if necessary */
  /* Secondary Button */
}

button.btn, button.btn-primary {
  padding: 0.625rem 0.9375rem;
  background-color: #ec4454;
  border: 0;
  color: #FFFFFF;
}

button.btn:hover, button.btn:focus, button.btn-primary:hover, button.btn-primary:focus {
  background-color: #072665;
  color: #FFFFFF;
}

button.btn:active, button.btn:active:hover, button.btn:active:focus, button.btn-primary:active, button.btn-primary:active:hover, button.btn-primary:active:focus {
  background-color: #072665;
  color: #FFFFFF;
}

button.btn:disabled, button.btn[aria-expanded="true"], button.btn-primary:disabled, button.btn-primary[aria-expanded="true"] {
  background-color: rgba(0, 112, 185, 0.5);
  color: #FFFFFF;
}

button.btn:disabled:hover, button.btn[aria-expanded="true"]:hover, button.btn-primary:disabled:hover, button.btn-primary[aria-expanded="true"]:hover {
  background-color: rgba(0, 112, 185, 0.5);
  color: #FFFFFF;
}

button.btn-secondary {
  background-color: #F9FAFB;
  border: 1px solid #D3D9E3;
  color: #000000;
}

button.btn-secondary:hover, button.btn-secondary:focus {
  background-color: rgba(0, 0, 0, 0.8);
  border-color: rgba(0, 0, 0, 0.8);
  color: #FFFFFF;
}

button.btn-secondary:active, button.btn-secondary:active:hover, button.btn-secondary:active:focus {
  background-color: rgba(249, 250, 251, 0.9);
  color: #000000;
}

button.btn-secondary:disabled, button.btn-secondary[aria-expanded="true"] {
  background-color: rgba(249, 250, 251, 0.75);
  border-color: rgba(211, 217, 227, 0.95);
  color: rgba(0, 0, 0, 0.75);
}

button.btn-secondary:disabled:hover, button.btn-secondary[aria-expanded="true"]:hover {
  background-color: rgba(249, 250, 251, 0.95);
  color: rgba(0, 0, 0, 0.75);
}

.btn-reveal {
  float: right;
}

.btn-quick-assess {
  display: block;
  padding-right: 5px;
  margin-top: 15px;
  margin-bottom: 15px;
}

/*========= Flipcards ==========*/
.flip-card-set .flip-card {
  display: -ms-grid;
  display: grid;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  vertical-align: top;
  padding-top: 1rem;
}

.flip-card-set .flip-card .flip-card-content {
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  cursor: pointer;
  display: -ms-grid;
  display: grid;
  grid-template: 1fr / 1fr;
  grid-template-areas: "frontAndBack";
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: 0.7s ease-out;
  transition: 0.7s ease-out;
  width: 100%;
}

.flip-card-set .flip-card .flip-card-content .flip-card-front, .flip-card-set .flip-card .flip-card-content .flip-card-back {
  border-radius: 5px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  grid-area: frontAndBack;
  overflow-y: hidden;
  padding: 1.25rem;
}

.flip-card-set .flip-card .flip-card-content .flip-card-front img, .flip-card-set .flip-card .flip-card-content .flip-card-back img {
  width: 100%;
}

.flip-card-set .flip-card .flip-card-content.apply-flip {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.flip-card-set .flip-card .flip-card-content.apply-flip .flip-card-front {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

.flip-card-set .flip-card .flip-card-content.apply-flip .flip-card-back {
  background-color: #FFFFFF;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.flip-card-set .flip-card .flip-card-content .flip-card-front, .flip-card-set .flip-card .flip-card-content.apply-flip .flip-card-back {
  -webkit-animation: stayvisible 0.7s both;
          animation: stayvisible 0.7s both;
  visibility: visible;
}

.flip-card-set .flip-card .flip-card-content .flip-card-back, .flip-card-set .flip-card .flip-card-content.apply-flip .flip-card-front {
  -webkit-animation: stayvisible 0.7s both;
          animation: stayvisible 0.7s both;
  visibility: hidden;
}

.flip-card-set .flip-card .flip-card-front {
  background-color: #F7F7F7;
  border: 0;
  box-shadow: 1px 3px 7px 0 rgba(0, 0, 0, 0.2);
}

/*========= Interest Cards ==========*/
.image-box {
  position: relative;
  margin: auto;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.image-box img {
  max-width: 100%;
  /*transition: all 0.3s;*/
  display: block;
  width: 100%;
  height: auto;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.image-box:hover img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

/*========= Modals ==========*/
/*========= Popovers ==========*/
.popover.top, .popover.right, .popover.bottom, .popover.left, .popover-body.top, .popover-body.right, .popover-body.bottom, .popover-body.left {
  background-color: #565A5C;
  color: #FFFFFF;
  font-size: 1rem;
  border-right-color: #565A5C;
  border-radius: 6px;
}

.popover.bs-popover-top > .arrow:after, .popover-body.bs-popover-top > .arrow:after {
  border-top-color: #565A5C !important;
}

.popover.bs-popover-right > .arrow:after, .popover-body.bs-popover-right > .arrow:after {
  border-right-color: #565A5C;
}

.popover.bs-popover-bottom > .arrow:after, .popover-body.bs-popover-bottom > .arrow:after {
  border-bottom-color: #565A5C;
}

.popover.bs-popover-left > .arrow:after, .popover-body.bs-popover-left > .arrow:after {
  border-left-color: #565A5C;
}

a .popovers-link:hover {
  cursor: pointer;
}

.popover-body {
  vertical-align: middle;
  text-align: center;
  background-color: #565A5C;
  color: #FFFFFF;
  font-size: 1rem;
  width: auto;
}

/*========= Quick Assessments ==========*/
.quick-assess {
  border: 1px solid #072665;
  border-radius: 5px;
  border-top: 20px solid #072665;
  padding: 20px;
}

.quick-assess legend {
  border-bottom: 1px solid #B5BDC2;
}

/* Quick Assessment Color Palette */
/* 
 * please check color contrast at http://webaim.org/resources/contrastchecker/ */
/* Quick Assessment Color Palette */
/* 
  * please check color contrast at http://webaim.org/resources/contrastchecker/ */
/* Optional: angle gradient background */
.angle-gradient {
  /* angle-gradient background */
  background: -webkit-linear-gradient(290deg, #6c7ca0 50%, #6c7ca0 50%, #ec4454 50%, #52B9E9 99%, #52B9E9 100%);
  background: -webkit-linear-gradient(290deg, #6c7ca0 50%, #6c7ca0 50%, #52B9E9 50%, #52B9E9 99%, #52B9E9 100%);
  background: linear-gradient(160deg, #6c7ca0 50%, #6c7ca0 50%, #52B9E9 50%, #52B9E9 99%, #52B9E9 100%);
}

.fa-check {
  color: #52B9E9;
}

.fa-times {
  color: red;
}

/* Screen: Small, Medium, Large, Extra Large */
@media (min-width: 554px) {
  .well-alt {
    padding-right: 50px;
  }
}

button.disabled {
  pointer-events: none;
}

.ans-symbol {
  font-size: 1.5rem;
  min-width: 25px;
  text-align: center;
  display: inline-block;
}

@media screen and (max-width: 768px) {
  .ans-symbol {
    font-size: 1.25rem;
    min-width: 20px;
  }
}

.line-md {
  line-height: 40px;
}

.line-lg {
  line-height: 50px;
}

/* Input Type: radio button,  checkbox */
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
  margin-left: 0;
}

/* CSS Radio Button https://codepen.io/triss90/pen/XNEdRe */
.radio {
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 15px;
}

.radio label {
  display: inline-block;
  padding-left: 0;
  margin-left: 55px;
}

@media screen and (max-width: 768px) {
  .radio label {
    margin-left: 40px;
  }
}

.radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

.radio input[type="radio"] + .radio-label:before {
  content: '';
  display: inline-block;
  position: relative;
  width: 1.4em;
  height: 1.4em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
  background: #F9FAFB;
  border-radius: 100%;
  border: 1px solid #adbac8;
  margin-left: -55px;
  margin-right: 0px;
}

@media screen and (max-width: 768px) {
  .radio input[type="radio"] + .radio-label:before {
    margin-left: -45px;
    margin-right: 5px;
  }
}

.radio input[type="radio"]:checked + .radio-label:before {
  background-color: #040F81;
  box-shadow: inset 0 0 0 4px #F9FAFB;
}

.radio input[type="radio"]:focus + .radio-label:before {
  border-color: #040F81;
}

.radio input[type="radio"]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 4px #F9FAFB;
  border-color: #cbd4dc;
}

.radio input[type="radio"] + .radio-label:empty:before {
  margin-right: 0;
}

/* CSS Checkbox */
.checkbox {
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 15px;
}

.checkbox label {
  display: inline-block;
  padding-left: 0;
  margin-left: 40px;
}

.checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

.checkbox input[type="checkbox"] + .checkbox-label:before {
  content: '';
  display: inline-block;
  position: relative;
  width: 1.4em;
  height: 1.4em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
  background: #F9FAFB;
  border: 1px solid #adbac8;
  margin-left: -55px;
  margin-right: 0px;
}

@media screen and (max-width: 768px) {
  .checkbox input[type="checkbox"] + .checkbox-label:before {
    margin-left: -45px;
    margin-right: 5px;
  }
}

.checkbox input[type="checkbox"]:checked + .checkbox-label:before {
  background-color: #040F81;
  box-shadow: inset 0 0 0 4px #F9FAFB;
}

.checkbox input[type="checkbox"]:focus + .checkbox-label:before {
  border-color: #040F81;
}

.checkbox input[type="checkbox"]:disabled + .checkbox-label:before {
  box-shadow: inset 0 0 0 4px #F9FAFB;
  border-color: #cbd4dc;
}

.checkbox input[type="checkbox"] + .checkbox-label:empty:before {
  margin-right: 0;
}

/* Fill in the Blank */
.form-control {
  display: inline-block;
  width: auto;
  font-size: inherit;
}

.form-control:focus {
  border-color: #040F81;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #96a0aa;
}

/* Select Box */
/*========= Tabs ==========*/
.tab-row {
  border: 1px solid #D3D9E3;
  border-radius: 5px;
}

.tab-pane {
  padding-top: 15px;
  padding-bottom: 15px;
}

.list-group-item {
  background-color: #F7F7F7;
  border-color: #B5BDC2;
}

.list-group-item.active {
  background-color: #ec4454;
  border-color: #ec4454;
}

.list-group-item:hover, .list-group-item:focus {
  background-color: #ec4454;
  border-color: #ec4454;
  color: #FFFFFF;
}

.list-group-item:hover::after, .list-group-item:focus::after {
  color: #FFFFFF;
}

.list-group-item:first-child {
  border-top-right-radius: 0;
}

.list-group-item:last-child {
  border-bottom-right-radius: 0;
}

/*** Horizontal Tabs ***/
@media screen and (min-width: 768px) {
  .list-group.flex-md-row .list-group-item:first-child {
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .list-group.flex-md-row .list-group-item:last-child {
    margin-bottom: -1px;
    border-top-right-radius: .25rem;
    border-bottom-left-radius: 0;
  }
}

/* Graphic Tabs */
.graphic-tabs {
  border: 2px solid #B3B2B3;
  padding: 20px;
  border-right: 1px solid #E0E0E0;
}

.graphic-tabs h4,
.graphic-tabs h3 {
  margin: 15px 0;
}

.graphic-tabs .graphic-tab.list-group-item {
  border: none !important;
}

.graphic-tabs .graphic-tab.active {
  background-color: #F2F4F6;
  border-color: #B3B2B3;
  color: #006FBF;
  text-decoration: underline;
  text-align: center;
}

.graphic-tabs .graphic-tab.active h4,
.graphic-tabs .graphic-tab.active h3 {
  color: #006FBF;
  text-decoration: underline;
  margin: 15px 0;
  text-align: center;
}

.graphic-tabs .content-graphic-tabs {
  background-color: #F2F4F6;
  padding: 20px 30px;
}

.graphic-tabs .content-graphic-tabs hr {
  margin: 0;
}

@media (max-width: 768px) {
  .hidden-sm {
    display: none !important;
  }
}

/*========= Tooltips ==========*/
.tooltips-link {
  border-bottom: 1px dotted #000000;
  text-decoration: none;
}

/*========= WheelNav ==========*/
.wheel-size {
  display: block;
  max-width: 100%;
  height: auto;
}

.intro-page-banner {
  background-color: #F8F9FA;
}

@media screen and (max-width: 768px) {
  .intro-page-body {
    padding: 1.25rem;
  }
}

/*========= Columns ==========*/
/*========= Flexbox ==========*/
.flex-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -webkit-box;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 200px;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -ms-flex-pack: space-between;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
}

.content-flex-start {
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -webkit-box-pack: start;
          justify-content: flex-start;
  -ms-flex-pack: flex-start;
}

.items-flex-start {
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  -ms-align-items: flex-start;
  -ms-flex-align: flex-start;
  -webkit-box-align: start;
          align-items: flex-start;
}

.items-stretch {
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  -ms-flex-align: stretch;
  -webkit-box-align: stretch;
          align-items: stretch;
}

.items-center {
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
}

.space-between {
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -ms-flex-pack: space-between;
}

.no-wrap {
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

/*========= Grid ==========*/
/*========= Width ==========*/
.height-400 {
  height: 400px;
}

.height-300 {
  height: 300px;
}

.height-200 {
  height: 200px;
}

.height-100 {
  height: 100px;
}

.height-80 {
  height: 80px;
}

.height-60 {
  height: 60px;
}

.height-50 {
  height: 50px;
}

.height-auto {
  height: auto;
}

/*========= Margin ==========*/
/*========= Padding ==========*/
/*========= Width ==========*/
/*========= HTML Editor Mode ==========*/
/* switched .mce-content-body to *[contenteditable="true"] {} so we are 'editor agnostic' */
*[contenteditable="true"] {
  /* Displays the hidden background image so it can be swapper out in the editor */
  /* Expands Accordions so content can be accessed in the editor */
}

*[contenteditable="true"] .bg-img-wrapper img:first-child {
  display: block;
  max-width: 100%;
}

*[contenteditable="true"] .bg-img-wrapper {
  background-size: cover;
}

*[contenteditable="true"] .accordion .collapse:not(.show) {
  display: block;
}

/*========= Media Query for Print ==========*/
@media print {
  .accordion .collapse:not(.show) {
    display: block;
  }
}