/* BOX SIZING */
  html {box-sizing:border-box; font-size:14px}
  *, *:before, *:after {box-sizing:inherit}

  body {
  margin: 0; padding:0;
  font-family: "League Spartan", Arial, Helvetica, sans-serif;
  }


/* NAV */
  
  .topnav {
    overflow: hidden;
    background-color: #777;

  }

  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    height:102px;
    background-color:transparent;
  }

  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

  .topnav a.active {
    background-color: #777;
    color: white;
  }

  .topnav .icon {
    display: none;
  }

  .fa {padding-top:25px;}
  
/* STRUCTURE */

  main {padding:0 1rem 0 1rem; max-width:50rem; margin:0 auto 6.25rem auto;}

  section {width:100%; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; }

  section div {color:white; background-color:oklch(0.459 0.184 6.94); width:12rem; margin:0.4rem 0; padding:1.5rem 1rem 1rem 1rem; text-align:center; border-radius:1rem; text-align:center; }

  footer {background-color:#777; color:white; padding:1rem; position:relative; width:100%; bottom:0;}

/* NAV TEST */

  #myLinks a:first-child {margin-right:20px;}
  #myLinks a {padding-top:20px; padding-bottom:20px; }
  #myLinks a:not(:first-child) {padding-top:40px;}

/* .topnav a {display:flex; flex-direction:column;justify-items:center;}*/

  i {display:block;  }

/* TYPE */
  .topnav h1 {display:none;}
  h2 {color:oklch(0.459 0.184 6.94); font-size:1.5rem;}
  h3 {color:#777; margin-top:2.5rem; font-size:1.5rem;}
  h4 {color:oklch(0.459 0.184 6.94); margin:2.5rem 0 1rem 0; font-size:1.25rem;}
  h5 {font-size:1rem; margin:.5rem 0;}
  strong {color:black; font-weight:600;}
  footer p {font-size:smaller;}
  li { margin:.5rem 0;}
  hr {margin:2rem 0;}

/* Maroon boxes */
  section div h5, section div p:first-child {font-size:1.9rem; line-height:2.0rem; margin:0; font-weight:600;}

  section div p:nth-child(2) {font-size:larger;font-weight:650; margin:0 0 .5rem 0;}

  section div p {margin:.375rem;}

/* logo */
  img[src="images/OccupiedFlooringLogo2024Rev.png"]{width:200px;}

/* Head image box */
  .headImage {height:12rem; width:100%; background-repeat:no-repeat; background-size:cover; overflow:hidden; background-position:center bottom;}


/* Over 500px width, font-size 16px */
@media screen and (min-width: 500px) {
  html {font-size:16px;}
}

/* Under 800px width — nav hidden, only hamberger shows */
  @media screen and (max-width: 800px) {

    /* Hides row navigation */
    .topnav a:not(:first-child) {display: none;}

    /* Controls icon when nav hidden */
    .topnav a.icon {
      float: right;
      display: block;
      height:102px;
    }
    /* Controls dropdown links */
    #myLinks a:not(:first-child) {
      padding-top:10px;
      padding-bottom:10px;
      height:40px;
      color:white;
      background-color:black;
    }
    /* Controls dropdown hover */
    #myLinks a:not(:first-child):hover {
      color:white;
      background-color:#444;
    }

    /* Space between last menu item and bottom of menu */
    #myLinks a:last-child {padding-bottom:40px;}

}

/* Javascript to turn nav on and off */
  @media screen and (max-width: 800px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }

/* FORMS */
  input, textarea {display:block; width:100%;}

  input, textarea, select, button {margin-bottom:.5rem; border:.06rem solid #aaa; padding:.5rem; border-radius:.25rem;}

  textarea {margin-bottom:1rem;}

  .hilight {font-size:small; color:oklch(0.459 0.184 6.94); margin-top:0;}

  button[type=submit] {background-color:oklch(0.459 0.184 6.94); color:white;}

  button[type=submit]:hover, button[type=submit]:focus, button[type=submit]:active {background-color:#333; color:white;}

  button[type=reset]:hover, button[type=submit]:focus, button[type=submit]:active {background-color:#ccc; }  

  /* LINKS */

p.connect {line-height:1.5;}
.connect a:link, .connect a:visited {font-weight:700; text-decoration:none; color:oklch(0.459 0.184 6.94);}
.connect a:hover, .connect a:focus, .connect a:active {color:oklch(0.5237 0.184 253.59);}

/* PROCESS PAGE */
.process h4 {color:white; margin-top:0; margin-bottom:1rem;}
.process h5 {padding-bottom:1rem;}
.process h6 {font-size:1.5rem; margin:1rem 0 0 0;}
.process div p {font-size:.5rem;}
.process div {width:100%; padding:2rem;}
.process div p {font-size:1rem;}
.process ul {text-align:left; padding-left:3rem;}

.phase {background-color:#ddd; color:black; margin:1rem 0; padding:.8rem 1rem 1rem 1rem; width:100%;}