/******** FONTS********/
#titleHeader p {
  color: #192147;
  font-family: "Barlow", sans-serif;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  border: none;
}
#title h1 {
  color: #192147;
  text-align: center;
  font-family: "Barlow", sans-serif;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  border-bottom: 2px solid black;
}
#introduction h1,
#framework h1 {
  color: #192147;
  text-align: center;
  font-family: "Barlow", sans-serif;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  align-self: stretch;
  padding-bottom: 0.75rem;
}
#introduction p {
  align-self: stretch;
  color: #242424;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1rem;
}
#introduction a,
#rdsdefinition a {
  color: #fbfbfb;
  font-family: "Barlow Condensed";
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.80681rem; /* 206.494% */
  letter-spacing: 0.02406rem;
  text-transform: uppercase;
  text-decoration: none;
  margin: 0 auto;
}
#rdsdefinition a {
  font-size: 1.25rem;
}
#rdsdefinition p {
  color: var(--darkpurple);
  font-family: "Montserrat", sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.frameworkCardContents h2 {
  color: #242424;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: left;
}
.frameworkCardContents p {
  color: #242424;
  font-family: Montserrat;
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
#framework a {
  color: #192147;
  font-family: "Barlow Condensed";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 120% */
  letter-spacing: 0.02rem;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding-top: 0.5rem;
}
#contributorsDisclaimerText {
  color: #242424;
  font-family: "Montserrat", sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
/******** BUTTONS********/
#frameworkButton,
#quickReferenceButton,
.frameworkCardButton {
  display: block;
  padding: 0.5rem 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: #5f3c9b;
  margin: 0 auto;
  text-align: center;
}
.frameworkCardButton {
  background: #ccd0e6;
}
/*********  MAIN  *********/
main {
  width: 17rem;
  margin: 0 auto;
}
/* ***** TITLE SECTION ****** */
#title {
  width: 100%;
  text-align: center;
}
#titleHeader {
  display: flex;
  justify-content: space-around;
  margin: 2.52rem auto;
}

/* ***** INTRODUCTION SECTION ****** */
#introduction {
  margin: 2.5rem auto;
  background: #ccd0e6;
  width: 100%;
  padding: 1.5rem 0;
}
#frameworkImg {
  width: 100%;
  margin: 1.5rem auto;
}
/* ***** FRAMEWORK SECTION ****** */
#framework {
  width: 100%;
  margin: 2.5rem auto 0 auto;
}
.frameworkCard {
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.15);
  display: block;
  padding: 0 0 1.5rem 0;
  margin-bottom: 1.5rem;
}
.frameworkBar {
  margin-bottom: 1.5rem;
  width: 100%;
  display: flex;
}
.blue {
  background: #273995;
}
.green {
  background: #3b8165;
}
.purple {
  background: #542e94;
}
.yellow {
  background: #e5a53b;
}
.blue,
.green,
.purple,
.yellow {
  height: 1.25rem;
  flex: 1;
}
.frameworkCardContents {
  width: 90%;
  padding-left: 1rem;
}
.actions {
  margin-bottom: 1.5rem;
}

.combinationContainer {
  margin: 0 auto;
  padding: 0;
}
.col-xxl-6 {
  width: 100%;
}
/* ***** RDS DEFINITION SECTION ****** */
#rdsdefinition {
  width: 16.25rem;
  margin: 0 auto 2rem auto;
}

/* ***** DISCLAIMER SECTION ****** */
#contributorsImg {
  width: 100%;
}
#contributorsDisclaimerText {
  margin-top: 1.5rem;
}
#disclaimer {
  margin: 1.5rem auto;
}
/* ***** DONATING SECTION ****** */
#donating {
  margin-bottom: 2.5rem;
}
#giving-content-container h1 {
  text-align: center;
}
/************BEGIN MEDIA QUERRIES  **************/
@media only screen and (min-width: 576px) {
  main {
    width: 30.625rem;
  }
  #titleHeader {
    width: 15rem;
  }
  #introduction .container-fluid {
    max-width: 16rem;
  }
  .frameworkCard {
    width: 75%;
    margin: 0 auto;
  }
  #rdsdefinition,
  #disclaimer {
    width: 21.875rem;
    margin: 1.5rem auto;
  }
  #rdsdefinition {
    margin-bottom: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  main {
    width: 43.25rem;
  }
  #title h1 {
    width: 30rem;
    margin: 0 auto;
  }

  #introduction .container-fluid {
    max-width: 30rem;
  }

  #introduction p {
    line-height: 1.25rem;
  }

  .combinationContainer {
    padding: 0 1rem;
  }
  .frameworkCard {
    width: 100%;
    /* height: auto; */
  }
  .objective,
  .actions,
  .frameworkTitle {
    min-height: 3rem;
  }
  #rdsdefinition,
  #disclaimer {
    width: 100%;
  }
  #frameworkButton {
    width: 45%;
  }
  #cardThree.actions {
    padding-bottom: 5rem;
  }

  /******** FONTS********/
  #titleHeader p,
  #rdsdefinition a,
  #framework a,
  .frameworkCardContents a {
    font-size: 1.5rem;
  }
  #title h1 {
    font-size: 2.625rem;
  }
  #introduction h1,
  #framework h1 {
    font-size: 3rem;
  }
  #framework h1 {
    width: 35rem;
    margin: 0 auto;
  }
  #introduction p,
  #introduction a,
  .frameworkCardContents h2,
  #rdsdefinition p,
  #contributorsDisclaimerText {
    font-size: 1rem;
  }
  .frameworkCardContents p {
    font-size: 0.75rem;
  }
}
@media only screen and (min-width: 992px) {
  main {
    width: 58rem;
  }
  #title h1 {
    width: 50rem;
  }
  #framework h1 {
    width: 55rem;
  }
  .frameworkCard {
    width: 23rem;
  }
  .combinationContainer {
    padding: 0 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  main {
    width: 70.6rem;
  }
  #introduction .container-fluid {
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .v-align {
    margin: 4.375rem 0;
  }

  #introduction .container-fluid h1,
  #introduction .container-fluid p {
    text-align: left;
  }

  #introduction a {
    max-width: 20rem;
    margin: 0;
  }

  .frameworkCard {
    width: 100%;
    margin: 0 auto 1.5rem;
  }

  #title h1,
  #framework h1 {
    width: 56rem;
  }
  #introduction #quickReferenceButton,
  #rdsdefinition #frameworkButton {
    margin-left: 0 !important;
    margin-right: auto;
  }
  /******** FONTS********/
  #titleHeader p,
  #rdsdefinition a,
  #framework a,
  .frameworkCardContents a {
    font-size: 1.5rem;
  }
  #title h1,
  #introduction h1,
  #framework h1 {
    font-size: 3rem;
  }
  #introduction p,
  #introduction a,
  .frameworkCardContents h2,
  #rdsdefinition p,
  #contributorsDisclaimerText {
    font-size: 1rem;
  }
  .frameworkCardContents p {
    font-size: 0.75rem;
  }
}
/****************************  BREAKPOINT 1400  ****************************/
@media only screen and (min-width: 1400px) {
  main {
    width: 83.5rem;
  }
  .combinationContainer {
    margin-top: 3.5rem;
  }
  .combinationContainer .col-xxl-6 {
    width: 50%;
    padding: 0 1.5rem;
  }
  #rdsdefinition {
    width: 100%;
    margin: 0 0 2.5rem 0;
  }
  #rdsdefinition p {
    margin-bottom: 1.5rem;
  }
  .frameworkCard {
    width: 100%;
    height: 100%;
  }
  #frameworkButton {
    width: 100%;
    padding: 1.25rem;
  }
  #contributorsDisclaimerText {
    position: relative;
    z-index: 2;
    width: 210%;
    margin-top:7rem;
    padding: 1rem 0;
  }
  #donating {
    margin: 0 auto;
  }
  #giving {
    min-width: 38rem;
    margin: 0 auto;
  }
  #asterisk {
    padding: 1rem;
    margin: 1rem 0 0 0;
    max-width: 100%;
    font-size: 0.9rem; /* Slightly smaller font to prevent overflow */
  }
  #check-modal .modal-dialog,
#daf-modal .modal-dialog {
  position: fixed !important;
  top: 25% !important;
  left: 74% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}
}
/****************************  BREAKPOINT 1920  ****************************/
@media only screen and (min-width: 1920px) {
  /******** FONTS********/
  #titleHeader p {
    font-size: 2rem;
  }
  #title h1,
  #introduction h1,
  #framework h1 {
    font-size: 3.75rem;
  }
  #introduction p,
  .frameworkCardContents h2,
  #rdsdefinition p,
  #contributorsDisclaimerText {
    font-size: 1.5rem !important;
    line-height: normal;
  }
  #introduction a {
    font-size: 1.5rem;
  }
  #giving-content-container p {
    font-size: 1.5rem;
  }

  /* LAYOUT */
  main {
    width: 102rem;
  }
  #introduction a {
    max-width: 25rem;
    padding: 1.2rem;
  }
  #introduction p {
    margin-left: 0;
  }
  .frameworkCardContents p {
    font-size: 0.75rem;
  }
  #introduction .row .col-xl-6:first-child {
    width: 60%;
  }
  #introduction .row .col-xl-6:last-child {
    width: 40%;
    padding: 0;
    margin-left: 6rem;
  }
  #titleHeader {
    width: 26rem;
  }
  #titleHeader img {
    height: 2.5rem;
  }
  #title h1 {
    width: 70rem;
  }
  #framework h1 {
    width: 70rem;
  }
  #framework .container,
  #framework .container .row {
    width: 100%;
  }
  .combinationContainer {
    margin-top: 3.5rem;
    padding: 0;
  }
  #donating {
    margin-top: 3.5rem;
    margin-left: 3.5rem;
  }
}