/* Parallax effect */

body { 
    width: 100% ;
    background-image: url("background_alt.png");
    height: auto; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}




.grid-container {

  margin: auto;
  display: grid;
  grid-template-columns: 600;
   grid-template-rows: auto;
  gap: 50px;
  grid-template-areas:
    "intro"
    "findings1"
    "findings2"
    "findings3"
    "findings4"
    "redflags"
    "facilityapp"
    "footer";
}

.intro { grid-area: intro; 
background-color: #EEEEEE;  
padding: 20px;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.8), 
  0 3px 6px rgba(0, 0, 0, 0.8);
}


.findings1 {
  display: grid;
  text-align: center;
  justify-items: center; 
  word-wrap: normal;
  grid-template-columns:  600 ;
  grid-template-rows: min-content ;
  gap: 0 ;
  padding: 20px;
  grid-template-areas:
    "findings-text"
    "findings-cdc"
    "findings-fig"
    "findings-more";
  grid-area: findings1;
}

.findings2 {
  display: grid;
  text-align: center;
  justify-items: center; 
  word-wrap: normal;
  grid-template-columns:  600 ;
  grid-template-rows: auto ;
  gap: 0 ;
  padding: 20px;
  grid-template-areas:
    "findings-text"
    "findings-cdc"
    "findings-fig";
  grid-area: findings2;
}

.findings3 {
  display: grid;
  text-align: center;
  justify-items: center;
  word-wrap: normal;
  grid-template-columns:  600 ;
  grid-template-rows: min-content ;
  gap: 0 ;
  padding: 20px;
  grid-template-areas:
    "findings-text"
    "findings-cdc"
    "findings-fig"
    "findings-more";
  grid-area: findings3;
}


.findings4 {
  display: grid;
  text-align: center;
  justify-items: center; 
  word-wrap: normal;
  grid-template-columns:  600 ;
  grid-template-rows: min-content ;
  gap: 0 ;
  padding: 20px;
  grid-template-areas:
    "findings-text"
    "findings-cdc"
    "findings-fig"
    "findings-more";
  grid-area: findings4;
}



.findings-text { grid-area: findings-text; line-height: 1; }

.findings-cdc { grid-area: findings-cdc; }

.findings-more { grid-area: findings-more; }

.findings-fig { grid-area: findings-fig; }

.redflags {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.3fr 1.7fr;
  gap: 0px 20px;
  grid-template-areas:
    "redflags-text redflags-text redflags-text"
    "redflags-card1 redflags-card2 redflags-card3";
  grid-area: redflags;
}

.redflags-text { grid-area: redflags-text; }

.redflags-card1 { 
  grid-area: redflags-card1; 
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  background-color: rgba(216, 96, 24, 0.5) ;
  padding: 5px;
  line-height: 1.5;
}

.card-content-title {
  text-align: center;
}


.card-content {
  display: grid;
  text-align: left;
  background-color: white;
  margin: 5px;
  padding: 5px;
  color: #EEEEEE;
}


.redflags-card2 { 
  grid-area: redflags-card2; 
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  background-color: rgba(216, 96, 24, 0.5) ;
  padding: 5px;
  line-height: 1.5;
}

.redflags-card3 { 
  grid-area: redflags-card3; 
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  background-color: rgba(216, 96, 24, 0.5) ;
  padding: 5px;
  line-height: 1.5;
  
}

.facilityapp {
  display: grid;
  grid-template-columns: min-content;
  grid-template-rows: min-content;
  gap: 0px 0px;
  grid-template-areas:
    "facility-app-text facility-app-text facility-app-text"
    "facilityapp-app facilityapp-app facilityapp-app";
  grid-area: facilityapp;
}

.facility-app-text { grid-area: facility-app-text; }

.facilityapp-app { grid-area: facilityapp-app; }

.footer { grid-area: footer; }


/* slide up cards */

.newsCard {
  position: relative;
  width: auto;
  height: auto;
  margin: auto auto ;
  padding-bottom: 2rem;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.moreCaption {
  position: absolute;
  text-align: left;
  top: auto;
  bottom: 0;
  opacity: .4;
  left: 0;
  width: 60%;
  height: 55%;
  background-color: #833A0F;
  margin-bottom: 0;
  padding: 0 15px 0;
  box-shadow: 6px -3px rgba(0, 0, 0, 0.16), 6px -3px rgba(0, 0, 0, 0.23);
  -webkit-transform: translateY(90%);
          transform: translateY(90%);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: opacity 0.1s 0.3s, -webkit-transform 0.4s;
  transition: opacity 0.1s 0.3s, -webkit-transform 0.4s;
  transition: transform 0.4s, opacity 0.1s 0.3s;
  transition: transform 0.4s, opacity 0.1s 0.3s, -webkit-transform 0.4s;
}

.moreCaption-title {
  margin-top: 0;
  color: #fff ;
}

.moreCaption-content {
  margin: 0;
  color: #fff ;
}



.moreCaption-link {
  color: #fff;
  text-decoration: underline;
  opacity: .6;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.15s;
          transition-duration: 0.15s;
  -webkit-transition-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
          transition-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
}
.moreCaption-link:hover {
  opacity: 0.65;
}

.more-Slide-up:hover .moreCaption {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-transition: opacity 0.1s, -webkit-transform 0.4s;
  transition: opacity 0.1s, -webkit-transform 0.4s;
  transition: transform 0.4s, opacity 0.1s;
  transition: transform 0.4s, opacity 0.1s, -webkit-transform 0.4s;
}





/* Text */


html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  font-family: Arial, Helvetica, sans-serif;
}

h2 {
  font-size: 2.5rem;
  font-family: Arial, Helvetica, sans-serif;
}

p {
  font-size: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
}


p2{
  font-size: 3rem;
  font-family: Arial, Helvetica, sans-serif;
  justify-content: center;
}

.emphasistext {
  padding-top: 5rem !important;
  padding-bottom: 2rem;
  align-items: center;
}


.caption {
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  white-space: normal;
  color: rgba(255, 255, 255, 0.4);
}

.text-small {
  font-size: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
}

.text-med {
  font-size: 2rem;
  font-family: Arial, Helvetica, sans-serif;
}

.text-med-large {
  font-size: 5rem;
  font-family: Arial, Helvetica, sans-serif;
}

.text-large {
  font-size: 7rem;
  font-family: "Arial #1D252C", Gadget, sans-serif;
}

.text-largest {
  font-size: 10rem;
  font-family: "Arial #1D252C", Gadget, sans-serif;

}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-darkorange {
  color: #833A0F !important;
}

.text-orange {
  color: #D86018 !important;
}

.text-dark {
  color: #1D252C !important;
}

.text-white {
  color: #EEEEEE !important;
}

.text-shadow {
  text-shadow:  0 2px 14px rgba(0, 0, 0, 1)  !important;
}