@charset "utf-8";

@font-face {
    font-family: 'lucida_handwritingitalic';
    src: url('lucida/lucida_handwriting_italic-webfont.eot');
    src: url('lucida/lucida_handwriting_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('lucida/lucida_handwriting_italic-webfont.woff2') format('woff2'),
         url('lucida/lucida_handwriting_italic-webfont.woff') format('woff'),
         url('lucida/lucida_handwriting_italic-webfont.ttf') format('truetype'),
         url('lucida/lucida_handwriting_italic-webfont.svg#lucida_handwritingitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
  margin: 0;
  padding: 0;
}

a, a:hover {
  color: #333;
  text-decoration: none;
  outline: none;
}

a:hover {
  color: #555;
}

html, body {
  font-family: 'Lato', sans-serif;
  color: #555;
}

.clearer{
  height: 1px;
  overflow: hidden;
  margin-top: -1px;
  clear: both
}


a.ding:after {
	content: '^';
	position: absolute;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    left: 80%;
    top: 3px
}

/*  ***         *******************************         ***  *
                    Site container
*************************************************************/
#wrapper {
  position: relative;
  width: 1200px;
  margin: 30px auto
}

.logo {
  position: relative;
  margin: 0 auto;
  width: 1200px;
  line-height: 0;
  text-align: center
}

.logo a:before {
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute
}

.logo img {
	width: 80%
}

.top_section {
	width: 100%;
	text-align: center;
	color: #a793bf;
	font-weight: normal;
	font-size: 20pt;
	margin: 30px 0;
	line-height: 32pt
}

header {
  position: relative
}

article {
  position: relative;
  width: 96%;
  height: auto;
  margin: 90px auto 0px;
  background: none;
}

article p {
  line-height: 1.3rem;
  margin-bottom: 15px;
}

article h1 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    color: #222;
}

article h2 {
    margin: 25px 0 10px 0;
    font-size: 1.2rem;
    color: #444;
}

article.treatment h1 {
  line-height: .8rem;
  margin: 30px 0 15px;
}

.selfreflections {
  font-family: 'lucida_handwritingitalic';
  font-size: 1rem;
  color: #8064a2;
  font-weight: normal;
  padding-right: 5px
}

.selfreflections:after {
  content: ' ';
}

article img {
  width: auto;
  height: auto;
  padding: 5px;
  border: 0 solid #82c0cf;
  position: relative;
  background: #fff;
}

article .nobg {
  background: transparent;
}

article .imgleft {
  margin: 5px 25px 5px 0;
  float: left;
}

article .imgright {
  margin: 5px 0 5px 25px;
  float: right;
}

article li {
  line-height: 1.7rem;
  margin-left: 20px;
  list-style: none /*disc outside*/
}

footer {
  text-align: center;
  line-height: 1.3rem;
  font-size: .95rem;
  font-family: 'Source Serif Pro', serif
}

footer a:hover {
  color: #555
}

footer div {
  display: inline
}

footer {
	position: relative;
	margin-top: 110px
}

footer div {
	line-height: 17pt
}

footer > div > p:first-of-type,
footer > div > p:last-of-type {
	margin-top: 20px
}

footer >.social > p > strong > a {
	color: #8064a2
}

footer >.social > p > strong > a:hover {
	color: #538488
}

/*
nav select {
  display: none;
}
*/

/*  ***       ***************         ***  *
**        services
**  ***       ***************         ***  */
.onethird_col {
  position: relative;
  float: left;
  width: 33.33333333333333%;
}


/*  ***       ***************         ***  *
**        fees
**  ***       ***************         ***  */
#fees {
  position: relative;
  width: 80%;
  margin: 50px auto 0;
}

#fees td, #fees th {
  width: 25%;
  padding: 5px;
}

#fees th {
  color: #fff;
}

/*  ***       ***************         ***  *
**        fees
**  ***       ***************         ***  */
#map_canvas {
	position: relative;
	float: right;
	width: 580px;
	height: 300px;
	border: 1px solid #3ab3b3;
	margin-top: -210px
}

.map_wrapper {
	position: relative;
	float: right;
	padding: 0 0 25px 25px
}

.body_contact h2 {
	margin-top: 50px
}

/*  ***       ***************         ***  *
**        contact form
**  ***       ***************         ***  */
#contact {
  margin-top: 35px;
  font-size: .9rem;
}

.row {
  position: relative;
  margin-bottom: 10px;
  width: 100%;
  float: left;
}

.coll {
  position: relative;
  width: 180px;
  float: left;
  margin-right: 20px;
  text-align: right;
}

.colr {
  position: relative;
  width: 250px;
  float: left;
}

.f_req {
  background: #ff5656;
  color: #fff;
  padding: 2px 10px;
  margin: 5px 0;
  width: 150px;;
  font-size: 10px;
  width: 290px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

/* input fields */
input, textarea, select {
  border: 1px solid #6eaebe;
  padding: 4px 5px;
  width: 300px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: box-shadow 300ms ease;
  -moz-transition: box-shadow 300ms ease;
  -o-transition: box-shadow 300ms ease;
  -ms-transition: box-shadow 300ms ease;
  transition: box-shadow 300ms ease;
  background-color: #f4f4f4;
}

input:focus, textarea:focus, select:focus {border: 1px solid #296f83;}
input:hover, textarea:hover, select:hover {border: 1px solid #6eaebe; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); }

.btn-go {
  background-color: #296f83;
  cursor: pointer;
  color: #b0e1ee;
  padding: 7px 15px;
  width: auto;
  margin-left: 200px;
}

/*  ***                 *******************************
            resources
*********************************               ***  */
#young .row_lighter {
  background: #fff;
}

#young .row_darker {
  background: #c7f7c7;
}

#young table {
  margin-top: 0px;
  border: 1px solid #a7d8a7;
}

#young th {
  padding: 10px 5px;
  text-align: left;
  background: #fff;
  color: #3d7801;
  border-bottom: 1px solid #a7d8a7;
}

#young td {
  padding: 5px;
  border-right: 1px solid #a7d8a7
}

#young td:last-child {
  border: 0;
}

/*  ***     regular page        ***  */
.row_lighter {
  background: #fff;
}

.row_darker {
  background: #e5dfec;
}

table {
  margin-top: 0px;
  border: 1px solid #b2a1c7;
  font-size: 11pt
}

th {
  padding: 10px 5px;
  text-align: left;
  background: #8064a2;
  color: #fff;
  border-bottom: 1px solid #afced6;
}

td {
  padding: 5px;
  border-right: 1px solid #afced6
}

td:last-child {
  border: 0;
}

.h2res {
  padding-top: 10px;
}

tr:nth-of-type(odd) {
  background: #eee;
}

/*  ***       ***************         ***  *
**        backgrounds
**  ***       ***************         ***  */
.abg_1 {
  background: url('../images/layout/abg_1.jpg') right bottom no-repeat;
}

.ybg_1 {
  /*background: url('../images/layout/ybg_1.png') right bottom no-repeat;*/
}

.abg_2 {
  background: url('../images/layout/abg_2.jpg') right bottom no-repeat;
}

.ybg_2 {
  /*background: url('../images/layout/ybg_2.png') right bottom no-repeat;*/
}

.abg_3,
.abg_31,
.ybg_31,
.abg_32 {
  background: url('../images/layout/abg_3.png') right bottom no-repeat;
}

.ybg_32 {
  background: url('../images/layout/ybg_32.png') right bottom no-repeat;
}

.abg_4 {
  background: url('../images/layout/abg_4.png') right bottom no-repeat;
}

.ybg_4 {
  background: url('../images/layout/ybg_4.png') right bottom no-repeat;
}

.abg_5 {
  background: url('../images/layout/abg_5.png') right bottom no-repeat;
}

.ybg_5 {
  background: url('../images/layout/ybg_5.png') right bottom no-repeat;
}

.abg_6 {
  background: url('../images/layout/abg_6.png') right bottom no-repeat;
}

.ybg_6 {
  background: url('../images/layout/ybg_6.png') right bottom no-repeat;
}

.opinions {
	margin: 45px 45px 15px 35px
}

/**
  *  contact button
  */

#book_it {
	color: #fff;
	margin: 25px auto;
	display: inline-block;
	background: red;
	padding: 10px 20px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 0 5px 0 rgba(50,50,50,.5);
	box-shadow: 0 0 5px 0 rgba(50,50,50,.5);
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8064a2+0,8a6eb2+50,70588e+52,775e99+100 */
	background: #8064a2; /* Old browsers */
	background: -moz-linear-gradient(top, #8064a2 0%, #8a6eb2 50%, #70588e 52%, #775e99 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #8064a2 0%,#8a6eb2 50%,#70588e 52%,#775e99 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #8064a2 0%,#8a6eb2 50%,#70588e 52%,#775e99 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8064a2', endColorstr='#775e99',GradientType=0 ); /* IE6-9 */
	-webkit-transition: all 250ms ease-in-out;
	-moz-transition: all 250ms ease-in-out;
	-ms-transition: all 250ms ease-in-out;
	-o-transition: all 250ms ease-in-out;
	transition: all 250ms ease-in-out;
}

#book_it:hover {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#695387+0,7e66a5+50,624d7c+52,665387+100 */
	background: #695387; /* Old browsers */
	background: -moz-linear-gradient(top, #695387 0%, #7e66a5 50%, #624d7c 52%, #665387 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #695387 0%,#7e66a5 50%,#624d7c 52%,#665387 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #695387 0%,#7e66a5 50%,#624d7c 52%,#665387 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#695387', endColorstr='#665387',GradientType=0 ); /* IE6-9 */
}

/* --------------------------------------------
   < fixes for big view only
-------------------------------------------- */

@media (min-width: 1025px) {
  article .fix3 {
    margin-right: 30px;
  }

	.logo p:nth-of-type(1) {
		top: 75px;
		right: 60px;
	}

	.logo p:nth-of-type(2) {
		top: 115px;
		right: 5px;
	}
}

/* --------------------------------------------
   < 1024px viewport
-------------------------------------------- */

@media (max-width: 1024px) {
    #wrapper {
      margin: 25px auto 20px;
      width: 990px;
    }

    #wrapper {
      float: none;
      width: inherit;
      font-size: 1rem;
    }

    .logo {
      margin: 0px auto 10px;
      width: 100%;
      text-align: center
    }

	.logo p:nth-of-type(1), .logo p:nth-of-type(2) {
		width: 90%;
		text-align: center;
		margin: 25px auto 0;
		height: 40px;
		display: inline-block;
		position: relative
	}

	.logo p:nth-of-type(2) {

	}

	a.ding:after {
		content: ''
	}

    article {
      margin: 20px auto 0px;
    }

    article li {
      line-height: 1.5rem;
      margin-left: 30px;
    }

    article h1 {
        font-size: 1.3rem;
    }

    .onethird_col {
      position: relative;
      float: left;
      width: 50%;
      padding-bottom: 25px;
      border-bottom: 1px dashed #ccc;
    }

    article img {
      width: 25%;
      height: 25%;
    }

    article .imgleft {
      margin: 5px 20px 5px 0;
      float: left;
    }

    article .imgright {
      margin: 5px 0 5px 20px;
      float: right;
    }

    article .imgfix {
      width: 40%;
      height: 40%;
    }

    footer {
      font-size: .8rem;
    }

    footer div {
      display: block;
    }

    table {
      font-size: 10pt
    }

}

@media (max-width: 925px) {
	#map_canvas {
	  width: 380px;
	  height: 250px
	}
}

@media (max-width: 720px) {
	#map_canvas {
	  width: 100%;
	  height: 250px;
	  margin: 5px 0 25px 0
	}

	.map_wrapper {
		width: 100%;
		position: static
	}

	.top_section {
		font-size: 1.1em;
		line-height: 1.5em
	}

}
/* --------------------------------------------
   < 600px viewport
-------------------------------------------- */
@media (max-width: 600px) {

    #wrapper {
      float: none;
      width: inherit;
      font-size: 1rem;
      margin: 20px auto;
    }

    article {
      margin: 15px auto 0px;

    }

    article li {
      line-height: 1.5rem;
      margin-left: 30px;
    }

    article h1 {
        font-size: 1.2rem;
    }

    .logo {
      width: 100%
    }

    .logo img {
      width: 85%
    }

	.logo p:nth-of-type(1) {
		font-size: 1.5rem
	}

	.logo p:nth-of-type(2) {
		font-size: 1.2rem;
		margin-top: 0;
		height: 5px
	}

    article img {
      width: 40%;
      height: 40%
    }

    article .imgleft {
      margin: 5px 20px 5px 0;
      float: left
    }

    article .imgright {
      margin: 5px 0 5px 20px;
      float: right
    }

    article .imgfix {
      width: 30%;
      height: 30%
    }

    article .fix2 {
      width: 50%;
      height: 50%
    }

    .coll {
      position: relative;
      width: 100%;
      float: left;
      margin-right: 20px;
      text-align: left
    }

    .colr {
      position: relative;
      width: 100%;
      float: left
    }

    input, textarea, select {
      width: 100%
    }

    .btn-go {
      margin-left: 0
    }

    .f_req {
      width: 60%
    }

    footer {
      font-size: .8rem;
      line-height: 1.3rem
    }

    footer a:hover::before, footer a:hover::after {
      content: ""
    }

    .onethird_col {
      width: 100%;
      padding-bottom: 0px;
      border-bottom: none
    }



	#young table, #young thead, #young tbody, #young th, #young td, #young tr, table, thead, tbody, th, td, tr {
		display: block
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	tr th {
		position: absolute;
		top: -9999px;
		left: -9999px
	}

	tr { border-bottom: 1px solid #bbb; }

	td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 40%
	}

	td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 33%;
		padding-right: 10px;
		white-space: nowrap
	}

	/*
	Label the data
	*/
	.tab_resources td:nth-of-type(1):before { content: "Title"; text-align: right }
	.tab_resources td:nth-of-type(2):before { content: "Description"; text-align: right }
	.tab_resources td:nth-of-type(3):before { content: "Type"; text-align: right }
	.tab_resources td:nth-of-type(4):before { content: "" }

	.tab_fees td:nth-of-type(1):before { content: "Service"; text-align: right }
	.tab_fees td:nth-of-type(2):before { content: "Fee"; text-align: right }
	.tab_fees td:nth-of-type(3):before { content: "Rebate"; text-align: right }
	.tab_fees td:nth-of-type(4):before { content: "Out of Pocket"; text-align: right }

/*      select menu, an option dropped for now
  nav ul     { display: none; }
  nav select { display: inline-block; width: 90%; margin-left: 5%; padding: 10px; background: #eee; border: 1px solid #ddd; font-size: 14pt; }
*/

}

/* --------------------------------------------
   < 600px viewport
-------------------------------------------- */
@media (max-width: 350px) {

article .imgfix {
  width: auto;
  height: auto
}

article img {
  width: 70%;
  height: 70%;
  display: block;
  clear: both
}

article .imgleft {
  margin: 10px 15%;
  float: left
}

article .imgright {
  margin: 10px 15%;
  float: left
}

article .fix2 {
  width: 80%;
  height: 80%;
  margin: 10px 10%
}

}