* {
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
}

h1 {
  font-size: 1.7em;
  color: #5d9a0e;
  padding: 0em 1em;
  text-align: center;
  text-shadow: 1.5px 2px 5px rgba(0,0,0,0.3);
}

h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
  color: #5d9a0e;
  font-family: Arvo, Georgia, serif;
  font-weight: 400;
}

h2 {
  font-family: "Fauna One",Georgia, serif;
  font-size: 1.3em;
  font-weight: 400;
  text-align: center;
  padding: .6em;
  margin: 0em;
  text-shadow: 1.5px 2px 5px rgba(0,0,0,0.5);
}

h3 {
  font-family: "Fauna One",Georgia, serif;
  font-size: 1.2em;
  font-weight: 400;
  text-align: center;
}

h4 {
    background-color: #749ee7;
    color: white;
    border-left: solid 6px #e76d16;
    text-align: left;
    box-shadow: 1px 2px 4px rgb(0,0,0,.4);
    padding: .3em;
  }

@media(min-width: 700px){
  h4 {
    text-align: center;
  }
}

h5 {
  font-size: 1em;
  padding: 1.2em 1em 1em;
  margin: 0;
}

main {
  margin: auto;
}

@media(min-width: 580px){     /* Limits width of main content on all pages except <iframe> pages */
  main {
    width: 90%;
    max-width: 1000px;
  }
  body.investment main {
    max-width: 1150px;
  }
}

.width {
  max-width: 1150px;    /* limits width of 'top bar', 'title', 'nav', and 'footer' without reducing width of bg color */
  margin: auto;
}


a:active,
a:visited,
a:link {
  color: #e76d16;
  transition: .3s;
}

main a:hover :not(a.content-box-small) {
  color: #75ce00;
  transition: .3s;
}

ul {
  padding-inline-start: 1.7em;
}

/* ######################################
      FLEXBOX
###################################### */

.flex-container {       /*flex container for 3rds, starting w/ quick links */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 1em;
}

.third {
  flex: 1 220px;
}


.content-box-large {
  flex: 1 425px;
}

.content-box-large.investment {
  flex: 1 375px;
  align-self: flex-start;
}

/* ######################################
      HEADER
###################################### */

.top-bar {
  background-color: #749ee7;
  min-height: 40px;
  color: white;
  padding: 12px;
  text-align: center;
  box-sizing: border-box;
  border-bottom: 2px solid #6C96DF;
  box-shadow: 2px 3px 4px 0px rgba(01,43,116,0.4);
}

.top-bar a:link,
.top-bar a:visited {
  color: white;
}

.top-bar-l {
  padding: 0em 0em .4em 1em;
}

.top-bar-r {}

.icon-top {
  border: solid 1px white;
  padding: 3px 5px;
  color: white;
}

@media (min-width: 600px) {
  .top-bar {
    text-align: left;
    padding-left: 1em;
  }
  .top-bar-l {
    text-align: left;
    float: left;
  }
  .top-bar-r{
    float: right;
    margin: -4px 0px;
  }
  h1 {
    text-align: left;
  }

}

/* ######################################
      NAV BAR
###################################### */

.nav-bar {
  background-color: #749ee7;
  padding-left: 1em;
  text-align: center;
  border-top: 2px solid #6C96DF;
  border-bottom: 2px solid #6C96DF;
  box-shadow: 2px 3px 4px 0px rgba(01,43,116,0.4);
  margin-bottom: 10px;
}

.nav-button {
  display: inline-block;
  margin: 2px;
}


.nav-button a {
  display: block;
  padding: 12px;
  color: white;
}

.nav-button a:hover, a:active {
  color: black;
  background-color: white;
  transition: .8s;
}


@media (min-width: 580px) {
  .nav-bar {
    text-align: left;
  }
}

body.index a.index,   /*  change nav button of active page devined by class of body to :hover state   */
body.leasing a.leasing,
body.sales a.sales,
body.investment a.investment,
body.resources a.resources,
body.contact a.contact  {
  color: black;
  background-color: white;
}

/* ######################################
      BODY
###################################### */

.content-box-large {
  border: solid 1px rgb(0,0,0,.3);
  margin: 1.5em .5em;
  box-shadow: 2px 3px 8px rgb(0,0,0,.5);
}

body.resources .content-box-large {
  margin: .6em .5em;
}

.content-box-large h2 {
  text-shadow: none;
  background-color: #749ee7;
  color: white;
  border-left: solid 6px #e76d16;
  text-align: left;
  box-shadow: 1px 2px 4px rgb(0,0,0,.4)
}

.text-in-box {
  padding: 10px;
}

a.content-box-small,
.content-box-small  {
  color: black;
  border: solid thin rgb(0,0,0,.5);
  text-align: center;
  margin: 1em 8px 0;
  padding: 10px;
  box-shadow: 2px 3px 10px rgba(0,0,0,0.6);
}

.content-box-small:hover {
  box-shadow: 2px 3px 13px rgba(0,0,0,0.8);
  transition: .2s;
}

.button {
  text-align: center;
  margin: 1em;
}

.button a,
input[class="button"]
 {
  font-family: Arvo, Georgia, serif;
  color: white;
  background-color: rgba(0,0,0,.6);
  display: inline-block;              /* this is cancelled later for <input> links under width ? */
  border-radius: 7px;
  padding: 10px 12px;
  box-shadow: 2px 3px 12px 0px rgba(0,0,0,0.5);
  cursor: pointer;
  border-width: 0;
  border-style: none;
  border-image: none;
  min-width: 5.2em;
}

.button a:hover,
input[class="button"]:hover
 {
  background-color: rgba(0,0,0,.4);
  box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.6);
  color: white;
  transition: .2s;
}

@media(max-width: 580px) {
  input[class="button"] {
    display: block;
    width: calc(100% - 2em);
  }
}

/* ######################################
      Real Estate Resources Specific
###################################### */

.button-ky,
.button-in {
  padding: 1em;
  position: relative;
}

.button-ky,
.button-in {
  background-color: rgba(255,255,255,.7);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-blend-mode: screen;
}

.button-ky {    background-image: url('../includes/icon-ky.png');}
.button-in {    background-image: url('../includes/icon-in.png');}

@media (min-width: 750px) {
  .button-ky,
  .button-in {
    background-position: left;
    background-repeat: no-repeat;
    background-blend-mode: normal;

    background-origin: content-box;
  }
  .button-ky {
    background-size: 45px 23px;
  }
  .button-in {
    background-size: 23px 34px;
  }
}

/* ######################################
      FOOTER
###################################### */

.address {
  color: #a7a7a7;
  display: block;
  text-align: center;
  margin: 2em;
  font-size: .8em;
}

.address a:link,
.address a:hover,
.address a:visited,
.address a:active {color:#a7a7a7;}

footer {
  text-align: center;
  background-color: #272424;
  color: #a7a7a7;
  padding: 1em 1.2em 1em;
  background-image: linear-gradient(to bottom, #fff 0, #272424 .8em, #272424 100%);
}

.footer-box-l, .footer-box-c, .footer-box-r {
  padding: .4em;
}

.div-for-footer-float {
  min-height: calc(100vh - 161px);
}

 @media (min-width: 800px) {
   .split-3rds {
     float: left;
     width: 33.3%;
   }

   .footer-box-l,
   .footer-box-c,
   .footer-box-r {
     box-sizing: border-box;
   }

  .footer-box-l {
    text-align: left;
  }

  .footer-box-r {
    text-align: right;
  }
}

body {                    /* Float  */
	display: flex;
	flex-direction: column;
  min-height: 100vh
}

/* ######################################
      IFRAME
###################################### */

.iframe {
  width: 100%;
  max-width: 1400px;
  display: flex;
  overflow: hidden;
}

iframe {
 margin: 0;
 padding: 0;
 width: 100%;
 height: calc(100vh - 140px);
}
iframe.ky {
  min-height: 600px;
}
iframe.in {
  min-height: 500px;
}

/* ######################################
      FORM
###################################### */

legend {display: none;}
label {font-weight: bold;}

fieldset {
  margin: 0;
  padding: 0 .7em 0;
  border: none;
}
.field {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
}



.field div {
   font-weight: bold;     /* remove later  */
   flex: 1 255px;
}
.item {
  margin: .3em .2em .7em;
  width: calc( 100% - 10px);
}

#message {
  height: 5em;
  width: calc(100% - 12px);
  margin: .3em .2em .7em;
}

body.contact h4 {     /*keep h4 header centered all the way down to small on contact page only  */
  text-align: center;
}

/* ######################################
      JS Expanding box on Investments
###################################### */

.expander {
  background: #60d64c;
  padding: .7em;
  box-shadow: 2px 3px 10px rgba(0,0,0,0.6);
  border-color: #29b222;
}

.js:hover {
  box-shadow: 2px 3px 13px rgba(0,0,0,0.8);
  transition: .3s;
}

.js {
  background: #9aec84;
}

.active, .js:hover {
  background: #29b222;
}

.js:after {
      content: '\0271A'; /* Unicode for (+) */
      font-size: 1.3em;
      color: white;
      float: left;
      margin-left: .5em;
      margin-top: -.2em;
}

.active:after {
    content:  '\02212'; /* Unicode for (-) */
    font-size: 2.2em;
    margin-left: .25em;
    margin-top: -.35em;
}

.panel {
  transition: max-height 0.5s ease-out;
}