@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
/* ==== Colors ======================== */
:root {
  --white: #ffffff;
  --shadow: 2px 0 10px 0 rgba(0, 0, 0, 0.25);
  --prim-dark: #091440;
  --sec-dark: #263264;
  --sidebar-gradient: linear-gradient(to right, var(--prim-dark), var(--sec-dark)); 
  --mask: #f4f7f9;
  --subtitle: #8997a5;
  --dark-font: #212529;
  --grey-font: #5a6d81;
  --light-blue:#d5edfa;
  --green: #2dd8a3;
  --dark-blue: #2970ff;
  }

/* ==== Styling ======================= */
* {
  /* border: 1px solid red; */
  font-family: 'Source Sans Pro', sans-serif;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  /* pushing footer to bottom */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
div.top {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; /* grows top to push down footer */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
}
/* Sidebar */
aside {
  width: 35%;
  padding-left: 16px;
  min-width: 316px;
  -webkit-box-shadow: var(--shadow);
          box-shadow: var(--shadow);
  background: var(--sidebar-gradient);
  z-index: 1; /* Puts the shadow on top */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.logo-holder {
  margin-top: 336px;
  margin-right: 80px;
}
.logo {
  width: 223px;
  height: 42px;
}
.app-title {
  margin-top: 27px;
  font-size: 34px;
  color: var(--white);
}
main {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
/* Search Section */
section.input {
  /* padding: Top | Right | Bottom | Left */
  padding: 60px 16px 60px 100px;
  min-width: 260px;
  background: var(--mask);
}
.input-title {
  margin-bottom: 16px;
  font-size: 19px;
  color: var(--prim-dark);
}
.subtitle {
  font-size: 13px;
  color: var(--subtitle);
}
/* Search field */
form.address-search {
  margin-top: 12px;
  max-width: 540px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  border-bottom: 2px solid var(--green);
}
form.address-search input {
  width: 100%;
  padding: 10px;
  border: none;
  background: var(--mask);
  font-size: 16px;
  color: var(--dark-font);
}
form.address-search button {
  font-size: 24px;
  padding-right: 10px;
  background: var(--mask);
  color: var(--grey-font);
  border: none;  
}
form.address-search button:hover {
  color: var(--prim-dark);
}
/* Example Buttons */
.examples {
  display: inline-block;
  margin-top: 30px; 
  border-radius: 5px;
  border: solid 2px var(--green);
  overflow: hidden;
  font-size: 0; /* Remove space between buttons */
}
.examples button {
  border: none;
  border-left: solid 2px var(--green);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 3;
  padding: 0 25px;
  color: var(--green);
  background-color: var(--white);
  -webkit-transition: color ease 500ms,
              background-color ease 500ms;
  transition: color ease 500ms,
              background-color ease 500ms;
}
.examples button:first-of-type {
  border-left: none;
}
.examples button:hover {
  color: var(--white);
  background-color: var(--green);
}
.examples button.active {
  color: var(--white);
  background-color: var(--green);
}
/* Results Section */
section.results {
  /* padding: Top | Right | Bottom | Left */
  padding: 40px 16px 75px 100px;
  min-width: 260px;
}
.hidden {
  display: none;
}
.obscured {
  visibility: hidden;
}
h1.result-title {
  font-size: 34px;
  letter-spacing: 1px;
  margin-bottom: 0px;
  color: var(--dark-blue);
  margin-top: 40px
}
h1.result-title:first-of-type {
  margin-top: 0px
}
h3.stat-title {
  font-size: 13px;
  font-weight: bold;
  margin-top: 1.5em;
  margin-bottom: .5em;
  letter-spacing: normal;
  color: var(--subtitle);
}
.results p {
  color: var(--grey-font);
  font-size: 16px;
}
p.stat-subtitle {
  font-size: 11px;
  font-weight: bold;
  margin-top: -.40em;
  margin-bottom: .5em;
  letter-spacing: normal;
  color: var(--subtitle);
}
.addr-holder {
  display: inline-block;
  padding: 10px;
  border-radius: 3px;
  background-color: var(--mask);
}
#ticket-addr {
  font-size: 13px;
  letter-spacing: .5px;
}
/* Link to block explorer */
.block-link {
  display: block;
}
#explore-link, .fa-arrow-right {
  display: inline-block;
  color: var(--dark-blue);
  text-decoration: none;
  font-size: 13px;
  padding: 5px 0;
  margin-bottom: -5px;
}
.fa-arrow-right {
  margin-left: 5px;
  -webkit-transition:  margin-left ease 500ms;
  transition:  margin-left ease 500ms;
}
#explore-link:hover .fa-arrow-right {
  margin-left: 20px;
}
/* result stats */
.result.bold {
  font-weight: bold;
}
.returns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  max-width: 310px;
}
.stat-holder {
  width: 50%;
}
.estimated-roi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  max-width: 310px;
}
/* Footer */
footer {
  -webkit-box-shadow: var(--shadow);
          box-shadow: var(--shadow);
  background-color: var(--dark-blue);
  z-index: 1; /* Stop sidebar casting shadow on footer */
  width: 100%;
  min-width: 260px;
}
footer .footer-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 950px;
  height: 150px;
  margin: auto;
}
.footer-elm-holder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 180px;
  text-decoration: none;
}
img.small-logo, .fab {
  height: 25px;
  padding: 5px;
  color: var(--white);
}
.footer-text {
  font-size: 16px;
  padding: 5px;
  color: var(--light-blue);
  text-decoration: none;
}
.footer-elm-holder .footer-text {
  font-weight: 600;
  color: var(--white);
}

/* ==== Media Queries ================= */
@media screen and (max-width: 920px) {
  /* Lose the 100px padding on contents left */
  section.input, section.results {
    padding-left: 16px;
  }
}
@media screen and (max-width: 840px) {
  /* Switch sidebar to top of screen */
  div.top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
  }
  aside {
    width: 100%;
    min-width: 260px;
    height: 300px;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .logo-holder {
    margin-top: 0px;
    margin-right: 0px;
    padding: 40px 0px;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .logo {
    width: 163px;
    height: 31px;
  }
  .app-title {
    font-size: 28px;
  }
  /* Stack Footer */
  footer .footer-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    height: 320px;
    margin: auto;
    padding: 45px 16px;
  }
}
@media screen and (max-width: 525px) {
  /* Example Buttons */
  .examples {
    width: 100%;
  }
  .examples button {
    width: 50%
  }
  .examples button:first-of-type {
    border-left: none;
    border-bottom: solid 2px var(--green);
  }
  .examples button:nth-of-type(2) {
    border-bottom: solid 2px var(--green);
  }
  .examples button:nth-of-type(3) {
    border-left: none;
  }
}
@media screen and (max-width: 310px) {
  .addr-holder {
    padding: 5px;
  }
  #ticket-addr {
    letter-spacing: 0px;
  }
  .examples button {
    letter-spacing: 0px;
  }
}