/* Import Open Sans and Raleway */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Raleway&display=swap");

:root {
  --figtreeGreen: #6bc758;
  --headerHeight: 100px;
  --standardPadding: 2rem;
  font-family: "Open Sans", sans-serif;
  /* font-size: 13px; */
  font-size: 0.9rem;
  scroll-behavior: smooth;
}

body {
  max-width: 100%;
}

.largeText {
  font-size: larger;
}

body {
  margin: 0;
  color: #404040;
  width: 100vw;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", sans-serif;
  font-weight: lighter;
}

h1 {
  font-size: 40px;
  color: var(--figtreeGreen);
}

h2 {
  color: #999999;
}

h3 {
  color: var(--figtreeGreen);
}

.imageText {
  font-size: 3vw;
  color: white;
  font-weight: lighter;
  max-width: 60%;
  margin: auto;
}

#header {
  background: rgba(255, 255, 255, 0.7);
  position: fixed;
  width: 100vw;
  height: var(--headerHeight);
  box-sizing: border-box;
  z-index: 100;
}

#header > div {
  max-width: 900px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  margin: auto;
}

#header a:link,
#header a:visited {
  font-weight: bold;
  text-decoration: none;
  color: black;
}

#header a:hover,
#header a:active {
  font-weight: bold;
  text-decoration: none;
  color: var(--figtreeGreen);
}

#logos {
  display: flex;
  align-items: center;
  height: var(--headerHeight);
  margin-left: 1rem;
  max-width: calc(100vw - 40px - 3rem);
}

#logos img {
  width: auto;
  height: 90%;
}

#navMenuLarge {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: no-wrap;
  align-items: center;
  margin: 1rem;
  max-width: 30rem;
}
#navMenuLarge > a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.navItem {
  font-size: 1.1rem;
  color: #333;
}
.navItem:hover {
  color: var(--figtreeGreen);
}

#navMenuSmall {
  grid-column: -1;
  display: none;
  margin-right: 1.5rem;
  fill: #454545;
}

#burgerIcon {
  margin-top: 15%;
  margin-right: 15%;
}

.burgerMenu {
  /*display: none;*/
  width: 100vw;
  height: 100vh;
  background-color: var(--figtreeGreen);
  color: white;
}

#burgerMenu {
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-content: center;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #505050;
  text-align: center;
  background-image: url("images/pattern_shapes.jpg");
  background-repeat: repeat;
  /*border: 5px solid var(--figtreeGreen);*/
}

#burgerMenu a * {
  padding: 0;
  font-size: large;
  font-weight: bold;
}

#burgerMenu a {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f0f0f0;
  text-decoration: none;
  border-bottom: 1px solid var(--figtreeGreen);
}

#burgerMenu a:hover {
  background-color: var(--figtreeGreen);
}

#siteContainer {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 7fr 2fr;
  grid-template-areas:
    "header 	header 		header"
    "ticker 	ticker 		ticker"
    ". servicesTitle ."
    "dark1 		services 	dark2"
    ".			about 		."
    ".			process 	."
    "banner 	banner 		banner"
    "team			team 	team"
    "contact 		contact 	contact"
    "footer			footer 		footer";
  justify-content: center;
  text-align: center;
  margin: 0px;
}

.title {
  grid-column-start: 1;
  grid-column-end: -1;
  text-align: center;
}

.darkBackground {
  background-image: url("images/pattern_shapes.jpg");
  background-repeat: repeat;
  color: #d8d8d8;
}

#home {
  grid-area: header;
  height: var(--headerHeight);
}

#ticker {
  grid-area: ticker;
  background-image: url("images/ticker_background.jpg");
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 80vh;
  max-height: 20vw;
  background-size: cover;
  background-repeat: no-repeat;
}

.tickerSectionLinks {
  display: flex;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
}

#about {
  grid-area: about;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-column-gap: 50px;
  padding-top: var(--standardPadding);
  padding-bottom: var(--standardPadding);
}

#aboutContents * {
  text-align: left;
}

.aboutPartners {
  grid-column-start: 1;
  grid-column-end: -1;
  border-top: 1px solid var(--figtreeGreen);
  padding-top: 5%;
  padding-bottom: 5%;
  color: grey;
  background-color: white;
}

.aboutPartners .figtree_logo > img {
  max-width: calc(50vw - 2rem);
}

.figtree_logo > img {
  max-height: 5rem;
}

.aboutPartners > div {
  display: flex;
  align-items: center;
  justify-content: space-around;
  max-width: 35rem;
  margin: auto;
  grid-gap: 1rem;
}

#partnersFortnumLogo img {
  height: 100%;
}

#fortnum_disclaimer_below_logo {
  width: 100%;
  grid-column: 1/3;
  font-size: 0.8rem;
}

#servicesBackground {
  grid-area: services;
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}

#services {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 2rem;
  padding-top: 1rem;
  padding-bottom: var(--standardPadding);
}

#services > header {
  grid-column: 1 / -1;
}

#services > p {
  text-align: left;
  width: 100%;
}

#services > .title {
  border-bottom: 1px solid #ffffff44;
  width: 90%;
  margin: auto;
}

#services > .title > h2 {
  font-size: 2em;
  margin-bottom: 0.4rem;
}

#services > h4 {
  text-align: right;
}

#services i {
  padding-top: 2rem;
  font-weight: light;
  font-size: 3em;
}

#services h2,
#services h4 {
  color: var(--figtreeGreen);
}

#servicesTitle {
  grid-area: servicesTitle;
}

#servicesTitle h2 {
  color: inherit;
}

#process {
  grid-area: process;
  display: grid;
  grid-template-areas:
    "prioritiseTitle prioritiseTitle prioritiseTitle"
    "prioritiseImg minimiseImg maintainImg"
    "prioritise minimise maintain";
  grid-column-gap: 100px;
  align-items: stretch;
  padding-top: 20%;
  padding-bottom: 5%;
}

#process img {
  height: auto;
  width: 40%;
  padding: 10%;
}

#process .textBlock {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

#prioritiseImg {
  grid-area: prioritiseImg;
}

#prioritise {
  grid-area: prioritise;
}

#minimiseImg {
  grid-area: minimiseImg;
}

#minimise {
  grid-area: minimise;
}

#maintainImg {
  grid-area: maintainImg;
}

#maintain {
  grid-area: maintain;
}

#banner {
  grid-area: banner;
  background-image: url("images/banner_image.jpg");
  flex-direction: column;
  justify-content: center;
  height: 80vh;
  max-height: 20vw;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
}

#team {
  grid-area: team;
  /* padding-bottom: var(--standardPadding); */
  padding-bottom: 3rem;
}

#teamGrid {
  --image-size: 12.5rem;
  gap: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: auto;
}
#teamGrid > div {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(2rem + var(--image-size));
}
#teamGrid > div > div:first-child {
  margin-bottom: 1rem;
}
#teamGrid > div > div:last-child {
  height: 3rem;
}

.profilePhoto {
  border-radius: 50%;
  height: var(--image-size);
  width: var(--image-size);
  overflow: hidden;
}

.profilePhoto > img {
  width: var(--image-size);
  height: var(--image-size);
  object-fit: cover;
  object-position: center;
}

#teamPhoto {
  max-width: 100%;
  width: auto;
  height: auto;
}
@media (max-width: 768px) {
  #teamGrid {
    font-size: 0.9rem;
    justify-content: space-around;
    --image-size: 12.5rem;
  }
  #teamGrid > div {
    width: calc(2rem + var(--image-size));
  }
  #teamGrid > div > div:last-child {
    height: calc(3rem * 0.7);
  }
}

#contact {
  grid-area: contact;
  /* display: flex; */
  /* flex-wrap: wrap; */
  justify-content: center;
  align-items: center;
  text-align: left;
}

#contact > #maps {
  padding: 1rem;
  box-sizing: border-box;
}

#contact > #contactTitle {
  margin: 2rem auto;
}
#contact > #contactTitle > h1 {
  text-align: center;
  margin: auto;
}

#contact > #maps {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  grid-gap: 1rem;
  flex-wrap: wrap;
}

#contact > #maps > div {
  min-width: 350px;
}

#contactTitle {
  grid-area: contactTitle;
  display: flex;
  align-items: flex-start;
}

#contactTitle h1 {
  border: 0px;
  margin: 0px;
}

#contact a:link,
#contact a:visited,
#contact a:hover,
#contact a:active {
  font-weight: normal;
  text-decoration: none;
}

#figtreeFinancialContact {
  grid-area: figtreeFinancial;
}

#figtreeMoranContact {
  grid-area: figtreeMoran;
}

.footerContact {
  margin-bottom: 1rem;
  padding: 2rem;
  color: white !important;
  box-sizing: border-box;
}

.footerContact > a {
  color: white;
}

.footerContact iframe {
  border-radius: 0.5rem;
}

.footerContact #contact a:link {
  color: white;
}

.footerLinks {
  grid-area: links;
  display: flex;
  justify-content: space-around;
  align-items: center;
  grid-gap: 1rem;
  margin-top: 2rem;
}

#form {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#formLeft {
  grid-column: 1;
}

#formRight {
  grid-column: 2;
}

#formField {
  border: none;
}

#form input,
#form textarea {
  width: 100%;
  padding: 2px 20px;
  margin: 8px 0;
  background-color: transparent;
  border: 0;
  color: white;
}

label {
  font-size: 10px;
}

.borderClass {
  width: 50%;
  padding: 5px;
}

.borderClass:focus,
.borderClass:hover {
  border: 2px solid grey;
}

#submitButton {
  width: 50%;
  background-color: var(--figtreeGreen);
}

#footer {
  grid-area: footer;
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-areas:
    "back back"
    "logos text"
    "links links";
  /* "tom tom"; */
  text-align: left;
  padding-bottom: 2rem;
}

#backToTopContainer {
  grid-area: back;
  display: flex;
  justify-content: center;
  padding-bottom: 50px;
  padding-top: 10px;
}

#backToTop {
  height: 8px;
  display: flex;
  align-content: center;
  text-align: center;
  padding: 10px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

#backToTopText {
  line-height: 10%;
}

#footer a:link,
#footer a:visited {
  text-decoration: none;
  color: #404040;
  font-size: 0.8rem;
}

#footer a:hover,
#footer a:active {
  text-decoration: none;
  color: #6bc758;
}

#footerLogos {
  grid-area: logos;
}

#footerText {
  grid-area: text;
  border-left: 1px solid black;
  padding-left: 20px;
  font-size: 0.7rem;
}

#siteMaker {
  grid-area: tom;
  text-align: center;
}

/*These divs sit next to the content divs with the patterned background on desktop layout, 
extending that background to the edges of the screen*/
#darkDiv1 {
  grid-area: dark1;
}

#darkDiv2 {
  grid-area: dark2;
}

#darkDiv3 {
  grid-area: dark3;
}

#darkDiv4 {
  grid-area: dark4;
}

@media only screen and (max-width: 1500px) {
  #siteContainer {
    display: grid;
    grid-template-columns: 1fr 7fr 1fr;
  }

  #ticker {
    height: 60vh;
  }
}

@media only screen and (max-width: 768px) {
  :root {
    --headerHeight: 74px;
    --standardPadding: 2rem;
  }

  #logos img {
    width: auto;
    height: var(--headerHeight);
  }

  #navMenuLarge {
    display: none;
  }

  #navMenuSmall {
    grid-column: 2/3;
    display: block;
    display: flex;
    align-items: center;
    justify-content: end;
  }

  .navItem {
    color: white;
  }
  .navItem:hover {
    color: white;
  }

  #logo {
    width: 150px;
    height: auto;
  }

  #siteContainer {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "ticker"
      "servicesTitle"
      "services"
      "about"
      "process"
      "banner"
      "team"
      "contact"
      "footer";
  }

  .footerContact {
    padding: 0;
    padding-top: 1rem;
  }

  .footerLinks {
    flex-direction: column;
  }

  #siteContainer > :not(.image) {
    align-self: flex-end;
    justify-self: center;
  }

  #ticker {
    justify-content: center;
    height: 40vh;
  }

  #about {
    grid-template-columns: 1fr;
    grid-column-gap: 0;
    width: 100vw;
  }

  #aboutContents {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  #servicesBackground {
    padding-bottom: 1rem;
  }

  #fortnum_disclaimer_below_logo {
    grid-column: 1/2;
  }

  #services {
    grid-template-columns: 1fr;
    grid-template-areas:
      "mainTitle"
      "subtitle1"
      "personal"
      "business"
      "bas"
      "smsf"
      "subtitle2"
      "wci"
      "super"
      "insurance"
      "rpc";
    grid-column-gap: 0;
    width: 90vw;
  }

  #services > * {
    justify-self: center;
  }

  #process {
    grid-template-areas:
      "prioritiseTitle"
      "prioritiseImg"
      "prioritise"
      "minimiseImg"
      "minimise"
      "maintainImg"
      "maintain";
    grid-row-gap: 10px;
    padding-top: 5%;
  }

  #process img {
    height: auto;
    width: 100px;
    padding: 1em 10%;
  }

  #team {
    grid-template-columns: 1fr;
    grid-gap: 20px;
    padding-bottom: 20px;
  }

  #team > * {
    justify-self: center;
  }

  #teamPhoto {
    max-width: 70vw;
  }

  #photoContainer {
    display: flex;
    justify-content: center;
  }

  #contact {
    grid-template-columns: 1fr;
    grid-template-areas:
      "contactTitle"
      "figtreeFinancial"
      "figtreeMoran";
    text-align: center;
    width: 100vw;
    padding-top: 2%;
    padding-bottom: 2%;
  }

  #contact > * {
    justify-self: center;
  }

  #contact h1 {
    border: 0px;
    margin: 0px;
  }

  #contactTitle {
    justify-content: center;
    border: 0;
    padding-bottom: 5%;
  }

  #figtreeFinancialContact {
    width: 45%;
  }

  #figtreeMoranContact {
    width: 45%;
  }

  #form {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
  }

  #formLeft,
  #formRight {
    grid-column: 1;
    justify-content: center;
  }

  #footer {
    grid-template-columns: 1fr;
    width: 80vw;
    grid-template-areas:
      "back"
      "logos"
      "text"
      "links";
    align-content: center;
    text-align: center;
  }

  #footer > * {
    justify-self: center;
  }

  #footerText {
    border-left: 0;
    padding-left: 0;
  }

  #darkDiv1,
  #darkDiv2,
  #dark3,
  #dark4 {
    display: none;
  }

  .imageText {
    font-size: 3vw;
  }

  #servicesRight {
    padding-left: 0;
  }

  #services {
    padding: 0px;
    border: 0px;
    margin: 0px;
  }
}

.socials > div a:hover {
  display: block;
  transform: scale(1.1);
}