@charset "UTF-8";

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0px;
  padding: 0px;
  font: inherit;
}

html {
  hanging-punctuation: first last;
  /* Not supported in Chrome */
  font-size: 62.5%;
  height: 100%;
}

body {
  min-height: 100vh;
  position: relative;
  font-family: "Roboto", sans-serif;
  font-style: normal;
  background-color: transparent;
  color: #3278ba;
  max-width: 1350px;
}

/* to balance headings */
h1,
h2,
h3,
p.topic {
  text-wrap: balance;
}

em {
  font-weight: 700;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img,
section,
div {
  border-radius: 3px;
}

/* GENERAL FONT STYLES */
ul,
ol {
  list-style: none;
}

/* QUOTATION MARKS */
q {
  quotes: "\201C""\201D"; /* These are L & R Quotes */
}

/* INSERTS LEFT QUOTE */
q::before {
  padding: 0px 4px 0px 0px;
  content: open-quote;
  font-size: 2.5rem;
  color: #3278ba;
}

/* INSERTS RIGHT QUOTE */
q::after {
  padding: 0px 0px 0px 3px;
  content: close-quote;
  font-size: 2.5rem;
  color: #3278ba;
}

h1,
h2,
h3,
p.topic {
  font-size: 2.2rem;
  font-weight: 300;
}

h2,
h3 {
  color: #3278ba;
}

p {
  font-size: 1.5rem;
  line-height: 2rem;
  overflow-wrap: break-word;
}

li {
  font-size: 1.8rem;
  line-height: 2.1rem;
  padding: 0px 0px 20px 0px;
}

#thispage,
.thispage {
  background-color: #ffffff;
}

/**  FOR MOBILE TEL link issues **/
a[href^="tel"] {
  color: #ffffff;
  text-decoration: none;
}

a:hover[href^="tel"] {
  color: #ffffff;
  text-decoration: none;
}

.no-mobile,
#footerlinks {
  display: none;
}

/* Scroll depending on what user's prefs are */
@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-top: 3rem;
    /* when scrolling to a section it will have a top padding to look better */
  }
}

/** SHOW MOBILE NAV ONLY **/
/** TURN THIS OFF FOR LARGER SCREENS **/
nav#fullsize {
  display: none;
}

/* ACTION BUTTONS */
a.button:link,
a.button:visited,
a.button:hover,
a.button:active {
  display: inline-block;
  text-decoration: none;
  font-size: 1.5rem;
  background-color: #249d2a;
  color: #ffffff;
  padding: 8px 12px 8px 12px;
  border-radius: 4px;
}

a.button:hover {
  background-color: #3278ba;
}

/* MOBILE HAMBURGER MENU STYLES **/
.menu a:link,
.menu a:visited,
.menu a:hover,
.menu a:active {
  color: #ffffff;
  text-decoration: none;
}

#wrapper {
  min-height: 100%;
  position: relative;
  display: grid;
}

main {
  padding-bottom: 150px; /** same as FOOTER HEIGHT **/
}

/** FOR AREAS WITH BACKGROUND IMG **/
.image-container {
  position: relative;
  width: 100%;
}

.image-container img {
  filter: brightness(0.85);
  width: 100%;
  height: auto;
}

header {
  font-size: 2em;
  color: #ffffff;
}

header .brand {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2; /** If Higher, must increase hamburger menu accordingly **/
}

/* LOGO */
#logo {
  color: #ffffff;
  z-index: 10;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 300;
}

/* SUB LOGO HEADING */
#subhead {
  width: 200px;
  padding-top: 10px;
  font-size: clamp(1.4rem, 2.5vw, 2.5rem);
  font-weight: 300;
}

/** ALT HEADER for NON index pages **/
#alt {
  position: relative;
  height: 100px;
  background-color: #3278ba;
  padding: 20px 20px 20px 20px;
}

/** END HEADER STYLES **/

/***********************/
/**   SECTION STYLES **/

h2,
h3 {
  padding: 16px 18px 16px 18px;
}

section p {
  padding: 0px 18px 18px 18px;
}

section ul {
  padding: 10px 18px 10px 18px;
}

section .button {
  margin: 0px 0px 20px 16px;
}

/** HERO SECTION **/
#hero {
  color: #3278ba;
}

#hero p {
  font-weight: 300;
}

/* IMG IN HERO */
#headshot {
  width: 150px;
  height: auto;
  float: right;
  margin-right: 16px;
}
/** END HERO SECTION **/

/** TEXT OVERLAY for BENEFITS SECTION **/
#benefits .text-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  color: #ffffff;
  text-shadow: 2px 2px 2px rgba(50, 120, 186, 0.6);
}

#who h2,
#benefits h2 {
  font-size: 2.5rem;
  color: #ffffff;
}

/** END BENEFITS SECTION **/

/** WHO IS THIS FOR on INDEX **/
/** SHORT-BIO on INDEX !!! **/

#who {
  background-color: #3278ba;
  color: #ffffff;
}

#who li {
  font-weight: 300;
  line-height: 2.4rem;
}

/** END WHO SECTION **/

/** MICHAEL SHORT BIO ON INDEX **/
#short-bio p {
  padding-top: 10px;
  font-size: 1.8rem;
  text-align: center;
  line-height: 2.6rem;
}

#short-bio img {
  width: 100%;
  height: auto;
}

/**  CENTER THE BUTTON **/
#short-bio .center-button p,
#links .center-button p {
  margin: 0px auto 0px auto;
  text-align: center;
}

#short-bio .center-button .button,
#links .center-button .button {
  margin-left: 0px;
}
/** END INDEX SHORT_BIO  SECTION **/

/** TESTIMONIES ON INDEX & TESTIMONIES PAGE **/
.client-testimony {
  color: #3278ba;
  background: linear-gradient(to bottom, #d5e4f3 0%, transparent 100%);
  padding: 30px;
} 

.client-testimony p:first-child {
  font-size: 1.7rem;
  font-style: italic;
  line-height: 2.5rem;
  padding-bottom: 12px;
}

.client-name {
  text-align: right;
  color: #3278ba;
}
/** END TESTIMONY INDEX SECTION **/

/** ABOUT ME PAGE **/
#about img {
  padding-bottom: 18px;
}

#isthisyou p.topic {
  margin-left: 16px;
  margin-right: 16px;
  padding-top: 16px;
  line-height: 2.7rem;
  background-color: #3278ba;
  color: #ffffff;
  border-radius: 3px;
}

#isthisyou img {
  margin-bottom: 18px;
}

/** FOOTER **/

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 150px; /* Height of the footer same as wrapper padding bottom */
  text-align: center;
  padding: 20px 12px 30px 12px;
  background-color: #3278ba;
  color: #ffffff;
}

/***************************/
/***  MAIL FORM STYLES ****/
/* (A) NOTIFICATION */
#notify {
  color: #ff0000;
  font-weight: 500;
  background: #eeeeee;
  padding: 5px;
  margin-bottom: 10px;
}

/* (B) FORM */
#cform {
  width: 100%;
  background-color: transparent;
  padding: 0px 20px 0px 20px;
}

#cform input,
#cform textarea {
  width: 100%;
  padding: 10px 16px;
  resize: none;
  margin-bottom: 10px;
  border: 1px solid #3278ba;
  font-size: 1.3rem;
  border-radius: 3px;
}

/** FOR CONTACT FORMS THROUGHOUT **/
#cform textarea {
  height: 150px;
}

#cform input[type="submit"] {
  border-color: transparent;
  margin-top: 15px;
  margin-bottom: 20px;
  font-size: 1.8rem;
  width: 160px;
  background-color: #249d2a;
  color: #ffffff;
  transition: all 0.5s ease;
  border-radius: 3px;
}

#cform input[type="submit"]:hover {
  background-color: #3278ba;
}

/** MAKE CAPTCHA LOOK NICE **/
.g-recaptcha {
    transform: scale(0.82);
    -webkit-transform: scale(0.82);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}

#notify p {
	padding-top: 16px
	font-size: 1.5rem;
	font-weight: 700;
	color: #3278ba;
}

#t2 {
	padding-top: 20px;
	
}

/**********************************/
/**   CONTAINER & MEDIA QUERIES ***/
/** 770px and larger screens ******/

@media (min-width: 770px) {
  .mobile-only,
  #links {
    display: none; /** TURN OFF MOBILE STYLES **/
  }

  .no-mobile {
    display: block; /** TURN ON LARGE SCREEN STYLES **/
  }

  /** HIDE MOBILE MENU ON LARGER SCREENS **/
  .outer-menu {
    display: none;
  }

  /** DISPLAY INLINE FULLSIZE NAV ON LARGER SCREENS **/
  #fullsize {
    display: block !important;
    position: absolute;
    bottom: 7px;
    right: 28px;
  }

  #fullsize a:link,
  #fullsize a:visited,
  #fullsize a:hover,
  #fullsize a:active {
    /** display: inline-block; **/
    text-decoration: none;
    background-color: #249d2a;
    color: #ffffff;
    padding: 8px 12px 8px 12px;
    margin-left: 4px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  #fullsize a:hover {
    background-color: #ffffff;
    color: #3278ba;
  }

  h2 {
    font-size: clamp(4.5rem, 5vw, 6.5rem);
    font-weight: 300;
  }

  #alt {
    height: 120px; /** MAKE ALT HEADER TALLER **/
  }
  
  /* IMG IN HERO */
#headshot {
  width: 150px;
  height: auto;
  position: absolute;
  top: 5px;
  right: 20px;
}


  /** TURN WRAPPER on INDEX ONLY INTO GRID  **/
  #index #wrapper {
    grid-template-columns: 1fr 1fr 1fr;
  }

  header {
    width: 100%;
    height: 120px;
    grid-column: 1 / 4;
    background-color: #3278ba;
  }

  .brand {
    padding-left: 20px;
  }

  #subhead {
    padding-top: 16px;
    width: 500px;
    font-size: 2.2rem;
  }

  main {
    padding: 20px 20px 170px 20px;
  }

  /** TURN MAIN ON INDEX ONLY INTO GRID **/
  #index main {
    padding: 20px 20px 170px 20px;
    display: grid;
    column-gap: 18px;
    row-gap: 34px;
    grid-column: 1 / 4;
    grid-template-columns: subgrid;
  }

  #hero {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
  }

  #hero h2 {
    font-size: clamp(2.5rem, 3.9vw, 4.8rem);
  }

  #hero p {
    font-size: clamp(1.8rem, 2.3vw, 4.2rem);
    line-height: clamp(2.2rem, 3vw, 4.8rem);
  }

  #mountain {
    padding-top: 60px;
    grid-column: 3 / 4;
  }

  #t1,
  #t2,
  #t3 {
    align-self: center;
  }

  #t1 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  #t2 {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
  }

  #t3 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }

  .client-testimony {
    padding: 30px 16px 30px 16px;
    background: transparent;
    font-family: "Times New Roman", Times, serif;
  }

  .client-testimony p:first-child {
    text-align: center;
    font-size: 2.2rem;
    line-height: clamp(3.4rem, 3vw + 1rem, 4.8rem);
    padding-bottom: 12px;
  }

  #benefits {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
  }

  #benefits .text-overlay {
    top: 10px;
    left: 10px;
  }

  #benefits h2,
  #who h2 {
    font-weight: 500;
    font-size: clamp(2.5rem, 4.3vw, 4.2rem);
  }

  #benefits li {
    line-height: clamp(2.1rem, 3.5vw, 3rem);
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    padding-bottom: clamp(1.8rem, 3.5vw, 3rem);
  }

  #who {
    padding: 20px 20px 20px 20px;
    grid-row: 3 / 4;
    grid-column: 2 / 4;
  }

  #who li {
    line-height: clamp(2.1rem, 3.5vw, 3.2rem);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    padding-bottom: clamp(1.8rem, 3vw, 3rem);
    font-weight: 300;
  }

  #short-bio {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
  }

  #short-bio p {
    padding-top: 20px;
    text-align: left;
    line-height: 3rem;
    font-size: 2.4rem;
    font-weight: 300;
  }

  #short-bio .center-button p {
    text-align: left;
  }

  a.button {
    font-size: clamp(1.8rem, 2vw, 2.2rem) !important;
  }

  #links {
    padding-top: 20px;
    grid-column: 2 / 4;
  }

  /** ABOUT ME PAGE & CONTACT PAGE ***/

  #about,
  #contact,
  #isthisyou {
    position: relative;
  }

  #about p,
  #contact p,
  #isthisyou p {
    font-size: 1.7rem;
    line-height: 2.2rem;
    width: 57%;
    max-width: 65%;
  }

  #about img {
    width: 40%;
    height: auto;
    position: absolute;
    top: 90px;
    right: 10px;
  }

  #isthisyou h3 {
    width: 50%;
    max-width: 65%;
  }

  #isthisyou h3,
  #isthisyou p.topic {
    font-size: 3rem;
  }

  #isthisyou p.topic {
    padding-top: 16px;
    line-height: 3.5rem;
    width: 100%;
    max-width: 100%;
    margin-left: 0px;
  }

  #isthisyou img {
    width: 100%;
    height: auto;
  }

  #cform,
  #cform input[type="submit"] {
    width: 58%;
    max-width: 65%;
  }

  #testimonials-page #testimonials {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(333px, 1fr));
  }

  #testimonials-page #testimonials h2 {
    grid-column: 1 / -1; /** makes an item span the entire grid column **/
  }

  #testimonials-page .client-testimony {
    color: #3278ba;
    background: linear-gradient(to bottom, #d5e4f3 0%, transparent 100%);
  }

  #testimonials-page #testimonials a {
    text-align: center;
    grid-column-start: 2;
  }

  footer {
    text-align: left;
  }

  footer h1,
  footer p {
    padding-left: 20px;
  }

  footer h1 {
    padding-bottom: 8px;
  }

  #footerlinks {
    display: block;
    position: absolute;
    top: 28px;
    right: 38px;
  }

  #footerlinks p {
    padding: 0px 0px 10px 0px;
  }

  #footerlinks a:link,
  #footerlinks a:visited,
  #footerlinks a:hover,
  #footerlinks a:active {
    font-size: 1.6rem !important;
    margin: 0px;
    padding: 2px 4px 2px 4px;
    font-weight: 300;
    color: #ffffff;
    background-color: #249d2a;
  }

  #footerlinks a:hover {
    background-color: #ffffff;
    color: #3278ba;
  }
}

/****** BIGGER SIZE SCREEN CSS  ******/
/** CONTROL TESTIMONY FONT ON INDEX **/
@media (min-width: 945px) {
  .client-testimony {
    padding-left: clamp(20px, 3.8vw, 40px);
    padding-right: clamp(20px, 3.8vw, 40px);
  }
  .client-testimony p:first-child {
    line-height: 3.2rem;
  }
  #testimonials-page .client-testimony {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/** FOR LARGEST SCREEN SWAP TESTIMONIALS ON INDEX **/
@media (min-width: 1074px) {
  #t2 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }

  #t3 {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
  }
}

/** MORE SPACE FOR CLIENT TESTIMONY TEXT **/
@media (min-width: 1074px) {
  .client-testimony p:first-child {
    line-height: 4.8rem;
  }
}