:root {
   --main-color: #3A3A3A;
   --main-font-family:Poppins, Helvetica, Arial, Lucida, sans-serif;
   --base-font-size-unitless:17;
   --base-font-size:17px;
   --foot-font-size:14px;
   --base-line-height:normal;
   --ffd-footer-left-padding:200px;
   --ffd-footer-right-padding:70px;
   --ffd-h1-font-size:4.7rem;
   --ffd-h2-font-size:3.5rem;
   --ffd-h3-font-size:1.2rem;
   --ffd-h4-font-size:1.1rem;
   --ffd-p-font-size:1.0rem;
   --ffd-logo-width:300px;
   --ffd-background-colour:rgb(255, 255, 255);
   --ffd-colour-figure:rgb(255, 119, 164);
   --ffd-colour-secondary-figure:rgb(255, 187, 238);
   --ffd-colour-building:rgb(103, 171, 103);

   --ffd-colour-light-green:rgb(20,186,183);
   --ffd-colour-very-light-green:rgb(30,223,220);
   --ffd-colour-mid-green:rgb(0,84,80);
   --ffd-colour-dark-green:rgb(0,39,37);
   --ffd-colour-blue-green:rgb(46,152,125);
   --ffd-colour-lime-green:rgb(170,205,112);
   --ffd-colour-very-light-grey:rgb(217,248,243);
   --ffd-colour-dark-grey:rgb(102,102,102);
   --ffd-colour-footer-1:rgb(222,250,246);
   --ffd-colour-footer-2:rgb(106,235,216);
   --ffd-colour-footer-3:rgb(20,186,183);
   --ffd-colour-footer-4:rgb(11,172,175);
   --ffd-colour-footer-5:rgb(2,158,167);

   --mobile-padding: 50px;
}
@font-face {
   font-family: Poppins; 
   src: url('/fonts/Poppins-Regular.ttf');
}
@font-face {
   font-family: WorkSans; 
   src: url('/fonts/WorkSans-VariableFont_wght.ttf');
}
html {
   height:100%;
   font-size:var(--base-font-size); /* This sets the font size for use in "rem" units. */
}
body {
   font-family:var(--main-font-family);
   font-size:var(--base-font-size);
   font-weight:normal;
   line-height:var(--base-line-height);
   background-color:var(--main-background-color);
   color:var(--main-color);
   margin:0px;
   height:100%;
}
a.page-selector {
   font-size:0.82rem;
}
div.ffd {
   padding: 0px 0px 0px 0px;
   background-color:var(--ffd-background-colour);
   color:var(--main-color);
}
div.ffd h1 {
   font-size:var(--ffd-h1-font-size);
   clear:both;
}
div.ffd h2 {
   font-size:var(--ffd-h2-font-size);
   clear:none;
}
div.ffd h3 {
   font-size:var(--ffd-h3-font-size);
   clear:both;
}
div.ffd h4, div.ffd h6, div.ffd h4 {
   font-size:var(--ffd-h4-font-size);
   clear:both;
}
div.ffd p, div.ffd li, {
   font-size:var(--ffd-p-font-size);
   font-family:var(--main-font-family);
   clear:both;
}
div.button {
   background-color:var(--ffd-colour-light-green);
   border:none;
   border-radius:30px;
   padding:20px 20px 20px 20px;
   display:inline-block;
   color:white;
}
div.image:hover {
   background-color:var(--ffd-colour-mid-green);
}
div.image a {
   font-size:1.0rem;
}
div.image a:link {
   color:white;
   text-decoration:none;
}
div.image a:visited {
   color:white;
   text-decoration:none;
}
div.image a:hover {
   color:white;
   text-decoration:none;
}
div.image a::after {
   content:'>';
   opacity:0;
   padding:0 0 0 0;
   transition: opacity 100ms, padding 1s;
}
div.image a:hover::after {
   opacity:1;
   padding:0 0 0 10px;
}
div.button:hover {
   background-color:var(--ffd-colour-mid-green);
}
div.button a {
   font-size:1.0rem;
}
div.button a:link {
   color:white;
   text-decoration:none;
}
div.button a:visited {
   color:white;
   text-decoration:none;
}
div.button a:hover {
   color:white;
   text-decoration:none;
}
div.button a::after {
   content:'>';
   opacity:0;
   padding:0 0 0 0;
   transition: opacity 100ms, padding 1s;
}
div.button a:hover::after {
   opacity:1;
   padding:0 0 0 10px;
}
.popup {
  position: relative;
  display: inline-block;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  display: none;
  width: 500px;
  background-color: var(--ffd-colour-very-light-green);
  color: var(--ffd-colour-mid-green);
  text-align: left;
  border-radius: 6px;
  border-style: solid;
  border-color: var(--ffd-colour-mid-green);
  border-width: 5px;
  padding: 8px 0;
  position: absolute;
  /* These figures were found experimentally in order to have this popup appear
   * in the exact place as the image. */
  top: -20px;
  left: -12px;
  z-index: 1;
}
.popup:hover .popuptext {
  display: block;
}
td.button {
   background-color:var(--ffd-colour-light-green);
}
td.button:hover {
   background-color:var(--ffd-colour-mid-green);
}
.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}
.ffd-background-image {
   background-image: url('/images/ffd/doctor-and-clipboard.png');
   background-color: rgb(150,150,150);
   background-size:cover;
   background-blend-mode: lighten;
}
.ffd-background-image-logo {
   background-image: url('/images/ffd/FFD-Heart-Logo-1.png');
   background-color: rgb(150,150,150);
   background-size:cover;
   background-blend-mode: lighten;
}
img.non-mobile-only {
   display:inline;
}
img.mobile-only {
   display:none;
}
img.large-mobile-only {
   display:none;
}
img.medium-mobile-only {
   display:none;
}
/* ADAPTATIONS FOR MOBILE DEVICES */
@media screen and (max-width:411.99px) {
   img.large-mobile-only {
      display:none;
   }
   img.medium-mobile-only {
      display:none;
   }
   img.non-mobile-only {
      display:none;
   }
   img.mobile-only {
      display:inline;
   }
   :root {
      --base-font-size-unitless:10;
      --base-font-size:10px;
      --ffd-h1-font-size:3.0rem;
      --ffd-h2-font-size:2.2rem;
      --ffd-h3-font-size:1.2rem;
      --ffd-h4-font-size:1.1rem;
      --ffd-logo-width:150px;
      --ffd-footer-left-padding:0px;
      --ffd-footer-right-padding:0px;
      --mobile-padding: 0;
      --contact-width: 200px;
      --contact-message-width:350px;
      --contact-message-height:350px;
   }
}
@media screen (min-width:412.00px) and (max-width:602px) {
   img.large-mobile-only {
      display:none;
   }
   img.medium-mobile-only {
      display:none;
   }
   img.non-mobile-only {
      display:none;
   }
   img.mobile-only {
      display:inline;
   }
   :root {
      --base-font-size-unitless:12;
      --base-font-size:12px;
      --ffd-h1-font-size:3.0rem;
      --ffd-h2-font-size:2.2rem;
      --ffd-h3-font-size:1.2rem;
      --ffd-h4-font-size:1.1rem;
      --ffd-logo-width:150px;
      --ffd-footer-left-padding:0px;
      --ffd-footer-right-padding:0px;
      --mobile-padding: 0;
      --contact-width: 200px;
      --contact-message-width:350px;
      --contact-message-height:350px;
   }
}
@media screen and (min-width:602,01px) and (max-width:834px) {
   img.large-mobile-only {
      display:none;
   }
   img.non-mobile-only {
      display:none;
   }
   img.mobile-only {
      display:none;
   }
   img.medium-mobile-only {
      display:inline;
   }
   div.mobile-only {
      display:none;
   }
   div.non-mobile-only {
      display:none;
   }
   div.medium-mobile-only {
      display:flex;
   }
   p.mobile-only {
      display:none;
   }
   p.non-mobile-only {
      display:none;
   }
   p.medium-mobile-only {
      display:block;
   }
   td.mobile-only {
      display:none;
   }
   td.non-mobile-only {
      display:none;
   }
   td.medium-mobile-only {
      display:table-cell;
   }
   tr.mobile-only {
      display:none;
   }
   tr.non-mobile-only {
      display:none;
   }
   tr.medium-mobile-only {
      display:table-row;
   }
   form.mobile-only {
      display:none;
      pointer-events:none;
   }
   form.non-mobile-only {
      display:none;
      pointer-events:none;
   }
   form.medium-mobile-only {
      display:table;
      pointer-events:auto;
   }
   table.mobile-only {
      pointer-events:none;
      display:none;
   }
   table.non-mobile-only {
      pointer-events:none;
      display:none;
   }
   table.medium-mobile-only {
      display:table;
   }
   :root {
      --base-font-size-unitless:13;
      --base-font-size:13px;
      --ffd-h1-font-size:3.8rem;
      --ffd-h2-font-size:3.0rem;
      --ffd-h3-font-size:1.2rem;
      --ffd-h4-font-size:1.1rem;
      --ffd-logo-width:150px;
      --ffd-footer-left-padding:70px;
      --ffd-footer-right-padding:0px;
      --mobile-padding: 0;
      --contact-width: 200px;
      --contact-message-width:500px;
      --contact-message-height:350px;
   }
}
@media screen and (min-width:834,01px) and (max-width:980px) {
   img.non-mobile-only {
      display:none;
   }
   img.large-mobile-only {
      display:inline;
   }
   div.non-mobile-only-block {
      display:none;
   }
   div.large-mobile-only-block {
      display:block;
   }
   div.mobile-only {
      display:none;
   }
   div.non-mobile-only {
      display:none;
   }
   div.medium-mobile-only {
      display:none;
   }
   div.large-mobile-only {
      display:flex;
   }
   p.mobile-only {
      display:none;
   }
   p.non-mobile-only {
      display:none;
   }
   p.medium-mobile-only {
      display:none;
   }
   p.large-mobile-only {
      display:block;
   }
   td.mobile-only {
      display:none;
   }
   td.non-mobile-only {
      display:none;
   }
   td.medium-mobile-only {
      display:none;
   }
   td.large-mobile-only {
      display:table-cell;
   }
   tr.mobile-only {
      display:none;
   }
   tr.non-mobile-only {
      display:none;
   }
   tr.medium-mobile-only {
      display:none;
   }
   tr.large-mobile-only {
      display:table-row;
   }
   form.mobile-only {
      display:none;
      pointer-events:none;
   }
   form.non-mobile-only {
      display:none;
      pointer-events:none;
   }
   form.medium-mobile-only {
      display:none;
      pointer-events:none;
   }
   form.large-mobile-only {
      display:table;
      pointer-events:auto;
   }
   table.mobile-only {
      pointer-events:none;
      display:none;
   }
   table.non-mobile-only {
      pointer-events:none;
      display:none;
   }
   table.medium-mobile-only {
      pointer-events:none;
      display:none;
   }
   table.large-mobile-only {
      display:table;
   }
   table.mobile_heading {
      display:inline;
   }
   :root {
      --base-font-size-unitless:14;
      --base-font-size:14px;
      --ffd-h1-font-size:4.0rem;
      --ffd-h2-font-size:3.5rem;
      --ffd-h3-font-size:1.2rem;
      --ffd-h4-font-size:1.1rem;
      --ffd-logo-width:150px;
      --ffd-footer-left-padding:70px;
      --ffd-footer-right-padding:0px;
      --mobile-padding: 0;
      --contact-width: 200px;
      --contact-message-width:500px;
      --contact-message-height:350px;
   }
}