@charset "UTF-8";
/*------------------------------------------------------------------------------
Useful Mixins
------------------------------------------------------------------------------ */
/*
 * Create a centered isosceles triangle.
 */
/*------------------------------------------------------------------------------
CLEAR THE DECKS
------------------------------------------------------------------------------ */
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  text-decoration: none;
}

body {
  line-height: 1;
  /* set line-height multiplier to be used with font size*/
}

ol, ul {
  list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
}

q {
  quotes: "“" "”" "‘" "’";
}

blockquote:before, q:before {
  content: open-quote;
}

blockquote:after, q:after {
  content: close-quote;
}

ol li {
  list-style-type: decimal;
  margin-left: 25px;
}

ul li {
  list-style-type: disc;
  margin-left: 20px;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

sub {
  vertical-align: sub;
  font-size: smaller;
}

div, aside, nav, header, section, footer {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*--------------
Instead of floats (doesn't collapse the parent like floats)
display: inline-block;
margin-left: -4px; or PREFERRED: set parent to font-size: 0 or display: inline-table
vertical-align: top;


font-family: "Playfair Display", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;

font-family: "Roboto", sans-serif;
font-weight: 700;
font-style: normal;
----------------*/
/*------------------------------------------------------------------------------
WEB.FONTS from FONTS.COM
------------------------------------------------------------------------------*/
h1 {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

h2, h3, h4, h5, h6 {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

p, li, td, label {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

i, em, caption {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: italic;
}

b, strong {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

/*------------------------------------------------------------------------------
Basic Highsite Styles and Variables
------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------
HIGHSITE HTML PREFERENCES
------------------------------------------------------------------------------*/


h1, h2, h3, h4, h5, h6, p {
  margin-bottom: .6em;
}

/* h1, h2, h3 { letter-spacing: -.05em; } */
h2, h3, h4, h5, h6 {
  word-spacing: 0.25px;
  color: #036936;
}

h1, h2, h3 {
  line-height: 1.25em;
}

h4, h5, h6 {
  line-height: 1.25em;
}

p, a, li, td {
  line-height: 1.5em;
  color: #555555;
}

/* initial sizes—use /xm_client/editor.css for special TinyMCE editor styling*/
h1 {
  font-size: 5.0em;
  color: #fff;
}

h2 {
  font-size: 2.0em;
}

h3 {
  font-size: 1.8em;
}

h4 {
  font-size: 1.4em;
  margin-bottom: .3em;
  color: #fff;
}

h5 {
  font-size: 1.4em;
}

h6 {
  font-size: 1.2em;
}

p, td {
  font-size: 1.2em;
}

a, i, em, b, strong, span, li, q {
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
}

a:link, a:visited {
  color: #46818e;
}
a:hover {
  color: #cccccc;
}

/*------------------------------------------------------------------------------
STICKY FOOTER
--------------------------------------------------------------------------------*/
/*
    OR
*/
/*------------------------------------------------------------------------------
FOOTER
--------------------------------------------------------------------------------*/
footer {
  position: relative;
  height: 260px;
  /* same as footer height */
  clear: both;
  color: #555555;
  background: white;
  /*url(/xm_client/images/footer-trade-bar.jpg) repeat-x top */
  margin: 75px 0 0 0;
  max-height: 300px;
  /* width is 100% because footer is a block element */
}
footer p {
  display: inline;
}
footer .content {
  position: relative;
  margin: 0 auto;
  width: 60%;
  overflow: auto;
  min-height: 100px;
}

/* Use this to set the styling in the TinyMCE footer editor to match the actual footer */
/*------------------------------------------------------------------------------
SITE-WIDE BODY & DIVS
------------------------------------------------------------------------------*/
body {
  margin: 0;
}

.container {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  /* remove if adding clearfix for the absolutely positioned element */
}

.arrowgif {
  margin-left: 30px;
}
@media (max-width: 600px) {
  .arrowgif {
    /* needs to be 769, 768 won't show "Menu" */
    display: none;
  }
}

/*------------------------------------------------------------------------------
DIVS -- HOME
------------------------------------------------------------------------------*/
.hero {
  /*.on_landing { */
  position: relative;
  left: 0px;
  right: 0px;
  height: 1000px;
  text-align: center;
  width: 100%;
  padding: 0 10%;
  background-repeat: no-repeat;
  background-image: url(/xm_client/client_images/WisePlanningHero-2560.jpg);
  background-size: cover;
  background-position: center center;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  /* works with row or column */
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

h1 {
  color: #fff;
  font-size: 4em;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  font-family: "Playfair Display", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}

@media (max-width: 768px) {
  h1 {
    font-size: 3em;
  }

  h2 {
    font-size: 1.66em;
  }

  p {
    font-size: 1.2em;
  }

  .hero h1 {
    font-size: 2.5em;
  }
}
@media (max-width: 320px) {
  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.33em;
  }

  p {
    font-size: 1.0em;
  }

  .hero {
    height: 500px;
  }

  .hero h1 {
    font-size: 2.0em;
  }
}
header {
  position: fixed;
  z-index: 3;
  height: 80px;
  background-color: #007935;
  opacity: .75;
  top: 0;
  width: 100%;
  left: 0;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
@media (max-width: 320px) {
  header {
    height: 65px;
  }
}
header.opaque {
  opacity: 1;
}

.logo {
  position: relative;
  width: 300px;
  left: 20px;
}
@media (max-width: 320px) {
  .logo {
    width: 200px;
  }
}

/* ------------- level 1 ------------ */
.level1 {
  position: relative;
  background: none;
}
@media (min-width: 769px) {
  .level1 {
    margin: 4em auto 5em;
    width: 70%;
  }
}
@media (max-width: 768px) {
  .level1 {
    margin: 3em auto 3.5em;
    width: 75%;
  }
}
@media (max-width: 320px) {
  .level1 {
    margin: 1.5em auto 2em;
    width: 90%;
  }
}

/* ------------- level 2 ------------ */
.level2 {
  position: relative;
  left: 0px;
  right: 0px;
  height: 500px;
  text-align: center;
  width: 100%;
  padding: 0 10%;
  background-repeat: no-repeat;
  background-image: url(/xm_client/client_images/Services-2000x878-web.jpg);
  background-size: cover;
  background-position: center center;
  /* level 2 table */
}
@media (max-width: 768px) {
  .level2 {
    height: 400px;
  }
}
@media (max-width: 664px) {
  .level2 {
    height: 500px;
  }
}
.level2 h1 {
  top: 8%;
}
.level2 p {
  margin: 0;
  line-height: 0;
}
.level2 table {
  width: 100%;
  table-layout: fixed;
}
.level2 td {
  text-align: center;
  /*border: 1px dotted #fff;*/
  color: #fff;
  padding: 20px;
}
.level2 img {
  width: 100%;
}
.level2 .centerthis {
  position: absolute;
  top: 30%;
  left: 10%;
  right: 10%;
  z-index: 2;
}
.level2 .centerthis img {
  max-width: 200px;
}
.level2 .centerthis td {
  max-width: 260px;
  font-size: 1em;
}
.level2 .centerthis td .centerthis img {
  max-width: 150px;
}
.level2 .centerthis td h4 {
  height: 56px;
}
@media (max-width: 768px) {
  .level2 .centerthis td {
    font-size: .8em;
  }
  .level2 .centerthis td h4 {
    height: auto;
  }
}
@media (max-width: 664px) {
  .level2 .centerthis td {
    display: block;
    margin: 0 auto 10px;
    padding: 0;
  }
  .level2 .centerthis td img {
    max-height: 50px;
    width: auto;
  }
  .level2 .level2 h1 {
    top: 4%;
  }
  .level2 .level2 td {
    padding: 10px;
  }
  .level2 .centerthis {
    top: 25%;
  }
  .level2 .centerthis table, .level2 thead, .level2 tbody, .level2 th, .level2 td, .level2 tr {
    display: block;
  }
  .level2 .centerthis td {
    font-size: .8em;
    padding: 0 auto;
  }
  .level2 .centerthis img {
    max-width: 80px;
  }
}

/* ------------- level 3 ------------ */
.level3 {
  display: none;
}

.level3 p {
  margin: 0;
}

/* ------------- level 4 ------------ */
.level4 {
  position: relative;
  margin: 40px auto;
  background: none;
  width: 70%;
}

.level4 h1 {
  color: #086d76;
}

address {
  width: 200px;
  margin: 20px 0 20px 0;
}

/*------------------------------------------------------------------------------
DIVS -- SUB
------------------------------------------------------------------------------*/
.subpage .banner_image {
  /*.on_landing */
  position: relative;
  left: 0px;
  right: 0px;
  height: 300px;
  text-align: center;
  width: 100%;
  background-repeat: no-repeat;
  background-image: url(/xm_client/client_images/Services-Banner.jpg);
  background-size: cover;
  background-position: center center;
}
@media (max-width: 320px) {
  .subpage .banner_image {
    height: 200px;
  }
}
@media (max-width: 320px) {
  .subpage .banner_image {
    height: 150px;
  }
}
.subpage .banner_image h1 {
  position: relative;
  margin-right: auto;
  margin-left: auto;
  top: 50%;
  font-family: "Playfair Display", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: italic;
  color: #fff;
}
@media (max-width: 320px) {
  .subpage .banner_image h1 {
    top: 60%;
  }
}
.subpage .main_col {
  position: relative;
  margin: 70px auto;
  width: 70%;
}
@media (max-width: 320px) {
  .subpage .main_col {
    margin: 35px auto;
    width: 90%;
  }
}
.subpage .main_col img {
  margin: 10px 0;
}
.subpage .main_col ul li {
  margin-left: 40px;
  font-family: "Playfair Display", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
  color: #555555;
  font-size: 1.2em;
}
@media (max-width: 320px) {
  .subpage .main_col ul li {
    font-size: 1.0em;
    width: 90%;
  }
}
@media (max-width: 320px) {
  .subpage .main_col table {
    display: none;
  }
}

.subpage.Maproom .banner_image {
  display: none;
}
.subpage.Maproom .main_col {
  margin-top: 200px;
}

/*------------------------------------------------------------------------------
HORIZONTAL MENU
------------------------------------------------------------------------------*/
/*CONTROLS ALL LISTS*/
#menu-button {
  position: fixed;
  right: 5%;
  color: #fff;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-style: normal;
  font-size: 20px;
  top: 2%;
  cursor: pointer;
  border: 1px solid #999;
}
@media (min-width: 769px) {
  #menu-button {
    /* needs to be 769, 768 won't show "Menu" */
    display: none;
  }
}
@media (max-width: 320px) {
  #menu-button {
    top: 3.5%;
  }
}

nav {
  position: fixed;
  z-index: 3;
  color: #fff;
  top: 0;
  right: 0;
  background: none;
  width: 100%;
  /*height: $nav-height;*/
}
nav #menuh {
  position: fixed;
  left: -110%;
  background: white;
  background: white;
  padding: 10px;
  top: 80px;
  bottom: 0;
  z-index: 10;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  /*----- BELOW THREE DIVS CONTROL ALL LIST ITEMS -----*/
  /*CONTROLS SECOND-LEVEL LIST ITEMS OR FLY-DOWNS*/
}
@media (max-width: 320px) {
  nav #menuh {
    top: 65px;
  }
}
@media (orientation: landscape) {
  nav #menuh {
    overflow-y: auto;
  }
}
nav #menuh.open {
  left: 0;
}
nav #menuh li {
  list-style-type: none;
}
nav #menuh li {
  float: left;
  margin: 0;
  list-style: none;
}
@media (max-width: 768px) {
  nav #menuh li {
    float: none;
    margin: 20px;
  }
}
nav #menuh li a {
  display: block;
  font-size: 20px;
  line-height: 16px;
  text-transform: capitalize;
  letter-spacing: .05em;
  color: #fff;
  text-decoration: none;
}
@media (max-width: 768px) {
  nav #menuh li a {
    color: #007935;
  }
}
nav #menuh li a:hover {
  color: #5e9877;
}
nav #menuh li a .current_top_menu_item {
  color: #a68338;
}
nav #menuh ul {
  float: left;
  padding: 0;
  list-style: none;
  width: 180px;
  /* can be anything AFAIK, but it has to be there*/
  left: -999em;
  position: absolute;
}
nav #menuh ul li {
  float: left;
  margin: 0;
  padding: 0;
  /*CONTROLS THIRD-AND ABOVE LEVEL LIST ITEMS*/
}
nav #menuh ul li a {
  display: block;
  padding: 3px 30px 3px 10px;
  background-color: #c51653;
  width: 140px;
  /* master width minus left & right padding */
  border-top: 1px solid #fff;
}
nav #menuh ul li a:hover {
  color: white;
  background-color: #8c1030;
}
nav #menuh ul li ul {
  position: absolute;
  margin: 0 0 0 0;
  padding: 0;
  left: -999em;
  z-index: 1;
}
nav #menuh ul li ul li ul {
  margin: -22px 0 0 180px;
  /* the -top px vertically positions the right flyout */
  /*...and the left margin is ul-li-a horiz spacing+width+1/0 */
}
nav #menuh ul li ul li ul li a {
  background-color: #e5cc78;
}
nav #menuh ul li ul li ul li a:hover {
  color: white;
  background-color: #c8990d;
}

.opaque #menuh {
  opacity: .75;
}

@media (min-width: 769px) {
  nav #menuh {
    float: right;
    margin: 20px;
    min-width: 225px;
    list-style: none;
    position: static;
    padding: 0;
    bottom: initial;
    background: none;
  }
}
/* lists nested under hovered list items */
#menuh li:hover ul ul, #menuh li:hover ul ul ul, #menuh li:hover ul ul ul ul {
  left: -999em;
}

#menuh li:hover ul, #menuh li li:hover ul, #menuh li li li:hover ul, #menuh li li li li:hover ul {
  left: auto;
}

.home nav {
  margin: 0 0 0 0;
}
.home nav #menuh li a {
  padding: 7px 15px 6px 10px;
}

.subpage nav {
  margin: 0 0 0 0;
}
.subpage nav #menuh li a {
  padding: 7px 15px 7px 10px;
}

/*------------------------------------------------------------------------------
FOOTER MENU
------------------------------------------------------------------------------*/
/* ----- footer menu --- */
.footer_menu {
  float: left;
  min-height: 100px;
  width: 850px;
  margin: 30px 0 0 0;
}

.menu2 {
  display: inline;
  width: 850px;
}
.menu2 li {
  float: left;
  margin: 0;
  list-style: none;
}
.menu2 li.top a {
  text-transform: uppercase;
  color: #555555;
  font-weight: bold;
}
.menu2 li a {
  display: block;
  font-size: 13px;
  line-height: 18px;
}
.menu2 li a:hover {
  color: #aaaaaa;
}
.menu2 li ul {
  position: relative;
  left: 0;
  list-style: none;
}
.menu2 ul {
  float: left;
  margin: 0;
  padding: 0;
  width: 140px;
}
.menu2 ul li a {
  display: block;
  text-transform: capitalize !important;
  text-align: left;
  padding: 0;
  width: 100px;
  line-height: 15px;
  margin: 5px 0 0 0;
  font-weight: normal !important;
}
.menu2 ul li a:hover {
  color: #999999;
}

/*------------------------------------------------------------------------------
HIGHSITE ONLY -- keep at end of file
------------------------------------------------------------------------------*/
.error_page h1 {
  margin: 40px 0 10px 40px;
}

.error_page p {
  margin: 10px 40px;
}

p.edit_link_block {
  background: none;
}

p.edit_link_block a.edit_link {
  color: #9a4446;
  font-weight: normal;
  font-size: 9px;
  text-decoration: none;
  text-shadow: 0px 8px 0px white;
}

p.edit_link_block a.edit_link:hover {
  text-decoration: underline;
}

.multidiv {
  /* for separating multiple sections */
  position: relative;
  margin: 0 0 20px 0;
  border-bottom: 2px dotted #999;
  padding-bottom: 20px;
}

/*------------------------------------------------------------------------------
INSTA-SEARCH
------------------------------------------------------------------------------*/
#is_search {
  display: inline-block;
}

#search_response {
  box-shadow: 0 0  10px #bbb;
}
#search_response li p {
  font-size: 15px;
  line-height: 20px;
}
#search_response li h5 {
  font-size: 16px;
}
#search_response li h3 {
  font-size: 18px;
}

input#is_search_text {
  width: 200px;
  height: 20px;
}

/* add to head jQuery
$('input[type=submit]').addClass('button');
$('input[type=submit]').val('Go');
*/
/*------------------------------------------------------------------------------
BLOG
------------------------------------------------------------------------------*/
.blog .container {
  position: relative;
  margin: 0 auto;
  width: 960px;
  padding-bottom: 40px;
  background: #fff;
  overflow: hidden;
}
.blog section#intro {
  height: 120px;
  margin: 0 0 20px 0;
}
.blog section#intro header {
  position: relative;
  top: -6px;
  /* edit */
  left: 80px;
  font-family: "futura-pt";
  font-size: 60px;
  color: #00326d;
  letter-spacing: .3em;
}
.blog section#intro header span {
  color: #bbb;
}
.blog section#intro header span + span {
  color: #629b00;
}
.blog section#intro .logo {
  top: -18px;
  left: 80px;
}
.blog section#intro ul#menuh {
  top: -10px;
  right: 50px;
}
.blog .left_column {
  float: left;
  width: 620px;
  margin: 0 0 0 80px;
  /* padding-bottom: 80px; */
}
.blog .left_column p {
  color: #777;
  font-family: "kepler-std-semicondensed";
  font-size: 18px;
  margin-bottom: 6px;
}
.blog .left_column h1 {
  font-family: "kepler-std-semicondensed";
  font-size: 30px;
  margin: 15px 0 20px 0;
  letter-spacing: 0em;
  color: #6A7C8A;
  line-height: 1.0em;
}
.blog .left_column h3 {
  margin: 12px 0 6px 0;
}
.blog .left_column ul, .blog .left_column ol {
  margin: 0 0 12px 20px;
}
.blog .right_column {
  float: left;
  width: 230px;
  margin: 0 0 0 50px;
  /* padding-bottom: 80px; */
}
.blog .right_column img {
  margin-bottom: 40px;
  width: 220px;
}
.blog .listings {
  margin-bottom: 40px;
  width: 220px;
}
.blog .listings h6 {
  font-size: 18px;
  font-family: "futura-pt";
  font-weight: normal;
  letter-spacing: .1em;
  color: #00326d;
}
.blog .listings p.category {
  font-weight: bold;
  margin: 5px 0 0 0;
  color: #777;
  cursor: pointer;
}
.blog .listings ul {
  list-style: none;
  margin-bottom: 10px;
}
.blog .listings ul li {
  margin: 0 0 8px 0;
}
.blog .listings p.category + ul {
  display: none;
  margin-bottom: 5px;
  margin-left: 15px;
}
.blog .listings p.category + ul {
  display: none;
  margin-bottom: 5px;
  margin-left: 15px;
}
.blog .listings h6 + ul {
  margin-left: 0px;
  margin-top: 5px;
}
.blog .arrows {
  font-size: 12px;
  color: #ccc;
  cursor: pointer;
}
.blog #disqus_thread {
  float: left;
  width: 620px;
  margin: 20px 0;
}
.blog .meta {
  display: none;
  /* at least for this site */
  background: beige;
  padding: 5px 12px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
.blog .meta p {
  font: 12px/18px Verdana;
}