* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: 'open sans', 'source sans pro', sans-serif;
  font-size: 19px; 
  font-weight: 400;  
  line-height: 1.5;
  color: #333;
  background-color: #fff; 
}

.deepmhasize.font {
	color:gray;
}

.background-emphasis {
	border: thin solid #C0C0C0;
	background-color: #FFFFCC;
	border-radius: 9px;
	padding: 20px ;
}

/* .numberCircle {
    border-radius: 50%;
    behavior: url(PIE.htc); 
    
    width: 36px;
    height: 36px;
    padding: 8px;

    background: #666;
    border: 2px solid #666;
    color: #fff;
    text-align: center;

    font: 32px Arial, sans-serif;
}
*/

@media screen and (max-width: 860px) {
  body {font-size: 19px}
}

@media screen and (max-width: 650px) {
  body {font-size: 17px}
}


/* ---- Grid ---- */

.row {
  width: 100%;
}
.row:before,.row:after, .header:before, .footer:before, .body:before, .header:after, .body:after, .block:before,  .block:after  { 
  content: '\0020'; 
  display: block; 
  overflow: hidden; 
  visibility: hidden; 
  width: 0; 
  height: 0 !important; 
}
.row:after, .header:after, .footer:after, .body:after, .block:after {
  clear: both; 
  /*margin-bottom: 1.5em;*/
}

.block, .col, .col980 {
  margin: 0 auto;
  width: 100%;
}
.block, .col {
  max-width: 800px;
}
.col980 {
  max-width: 980px;
}
.padded {padding: 0.85em;}

.ph {padding: 0 0.85em;}

.col1-2, .col1-3, .col2-3 {
  float: left;
  padding-right: 0.5em;
  padding-left: 0.5em;
}

/*
.col, .col980, .col1-2, .col1-3, .col2-3 {padding: 0.5em 0.85em}
.header .col {padding-top: 0; padding-bottom: 0}
*/
.col1-2:first-child, .col1-3:first-child, .col2-3:first-child {
  padding-left: 0;  
}

.col1-2:last-child, .col1-3:last-child, .col2-3:last-child {
  padding-right: 0;  
}

.col1-2 {width: 50%;}
.col1-3 {width: 33.33%}
.col2-3 {width: 66.66%}


@media screen and (max-width: 800px) {
  .col980 .col1-2, .col980 .col1-3, .col980 .col2-3, .col980 .col1-2:first-child, .col980 .col1-3:first-child, .col980 .col2-3:first-child,
.col980 .col1-2:last-child, .col980 .col1-3:last-child, .col980 .col2-3:last-child 
 {
    float: none;
    width: 100%;
    padding: 0;
    /*padding: 1em;*/
    margin-bottom: 1em;
  }
}

@media screen and (max-width: 680px) {
  .col1-2, .col1-3, .col2-3, .col1-2:first-child, .col1-3:first-child, .col2-3:first-child,
.col1-2:last-child, .col1-3:last-child, .col2-3:last-child {
    float: none;
    width: 100%;
    padding: 0;
    margin-bottom: 1em;
  }
}


/* ---- Layout ---- */

.header, .footer, .body {
  width: 100%;
}

.header {
  background-color: #f8f8f8;
  border-bottom: 2px solid #e8e8e8;
  height: 60px;
  position: relative;
}

.header-fixed {
  position: fixed;
  opacity: 0.95;
  top: 0;
  z-index: 9;
}

.body {
  margin-top: 0;
}

.header-fixed + .body {
  margin-top: 3em;
}

.footer {
  background-color: #4b2e83;
  font-size: 0.9em;
  color: #ddd;
}

.footer  h2 {
  color: #ddd;
}

.clear {
  display: table;
  clear: both;
  height: 0;
}


/* ---- Top Menu and Logo ---- */

.tmenu {
  float: right;
  font-size: 0.85em;
  line-height: 60px;
  font-weight: 700;
  position: static;
}

#hamburger {
  display: none;
  position: relative;
}

.hamburger-close {
  position: absolute; 
  margin-left: 3.5em;
  font-weight: 400;
  font-size: 0.8em;
}

.tmenu ul {
  list-style: none;
  margin: 0;
  display: block;
  /*margin-right: 1em;*/
}

.tmenu li {
  margin-bottom: 0;
  display: inline-block;
}

.tmenu a, a:visited {
  display: inline-block;
  text-decoration: none;
  color: #4b2e83;
  margin-left: 1em;
}

.tmenu a:hover {   text-decoration: underline; }

.logo, .logo-text {
  position: relative;
  float: left;
}

.logo-text, .logo-text:visited {
  top: 11px;
  line-height: 0.8;
  color: #f16000;
  font-size: 1.25em;
  font-weight: 700;
  text-decoration: none;
}

.logo-text-sub {
  font-size: 0.6em;
  font-weight: 400;
  color: #000;
}

.logo img {
  border: none;
  margin-top: 8px;
}

@media screen and (max-width: 650px) {
  .tmenu {
    font-size: 1em;
    position: absolute;
    background: #ddd;
    z-index:9;
    top: 0;
    right: 0;
    }
    
  .tmenu li, .tmenu a {
    display: block;
    width: 100%;
    padding-right: 1em;
  }
  
  .tmenu ul {display: none;}
  #hamburger {display: block; overflow: hidden}
}


/* ---- Content ---- */

/* 
Typography

styleguide 1
*/
/*
Headers

H1-H4 headers

Markup: 
<h1>Header1</h1>
<h2>Header2</h2>
<h3>Header3</h3>
<h4>Header4</h4>

Styleguide 1.1
*/
h1  {
	color:#f16000;
	
}

h2, h3, h4 {
  color: #4b2e83; 
  
}

h1, h2, h3, h4 {
	line-height:1.2;
}

h2, h3, h4 {
  margin: 1.75em 0 1em 0;
}

h1 {
  margin: 1em 0 0.25em;
  font-size: 1.85em;
  letter-spacing: -0.7px;
  font-weight: 700;
}

h2 {font-size: 1.45em;}
h3 {font-size: 1.2em; /*margin-bottom: 0.3em*/}
h4 {font-size: 1em;}

div > h2, div > h3, div > h4 {
  margin-top: 0;
}
/*
Subheader

Markup: 
<p class="subheader">This is a subheader</p>

Styleguide 1.2
*/
.subheader, .subtitle {
  font-size: 1.25em; 
}

h1  + .subheader, h1  + .subtitle {
  margin-top: 0.5em;
  margin-bottom: 1em;
  font-size: 1.4em;
  font-weight: 600;
  color: #777;
}
/* blog.css  
h1  + .subheader {
  margin-top: -0.5em;
  margin-bottom: 1.8em;
}
*/
h2  + .subheader, h2  + .subtitle {
  margin-top: -0.75em;
  margin-bottom: 1em;
  font-size: 1.2em;
  font-weight: 400;
  color: #333 ;
}

/* blog.css  
h2  + .subheader {
  margin-top: -1em;
}
*/

/*
Paragraph

.accent - paying user's attention
.quote-long - quote without author, or long quote

Markup:
<p class="{{modifier_class}}">At one point scientists believed the brain stopped growing new neural 
pathways as we grew older. While certainly the first years of childhood 
are developmentally dynamic, the latest research shows you can grow new 
pathways at any point in your life.</p> 

styleguide 1.3
*/
p {margin-bottom: 1.5em;}
p:last-child {margin-bottom: 0}
/*
Lists

Markup:
<ol>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>

styleguide 1.5
*/
ol, ul {
  margin-bottom: 1em;
  margin-left: 1.5em;
}

li {margin-bottom: 0.4em}


.accent, .quote, .quote-long {
  line-height: 1.6;
  margin: 1.5em 0;
  padding: 1em 2em;
  font-size: 1em;
  color: #000;
}

.quote-long {
  border-left: 3px solid #ccc;
  background-color: #f8f8f8;
}


.accent {
  border-left: 3px solid #ffd061;
  background-color: #fcf6c8;
}

/*
Quote

Use quote for max 3 lines. The next paragraph (author) is formatted automatically.

Markup:
<p class="quote">At one point scientists believed the brain stopped 
growing new neural pathways as we grew older.</p> 
<p><b>Person</b>, Organization and title </p> 

styleguide 1.4
*/
.quote {
  border-radius: 7px;
  font-family: georgia;
  background-color: #dedede;
  letter-spacing: 0.3px;
  position: relative;
  font-size: 1.2em
}

.quote:after {
  content: '';
  position: absolute;
  display: block;
  bottom: -20px;
  width: 0;
  height: 0;
  border-right: 30px solid #dedede;
  border-left: 0px solid transparent;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.quote+p {
  display: inline-block;
  position: relative;
  font-size: 0.9em;
  top: -24px;
  padding-left: 90px;
  color: #666;
}

@media screen and (max-width: 460px) {
  .quote+p {
    top: -5px;
    padding-left: 2em;
  }
}


/* ---- Media ---- */
img {max-width: 100%}

.img-right, 
.img-left {
  max-width: 35%;
}
.img-right {
  float: right;
  margin: 0 0 1em 1em;
  clear: right;
}
.img-left {
  float: left;
  margin: 0 1em 1em 0;
}
.img-center {
  max-width: 100%;
  margin: 1em auto 1.5em;
  display: block;
  clear: both;
}
.img-round {border-radius: 50%;}
.img-big     {max-width: 50%; width: 50%}
.img-small {max-width: 130px;}
.img-micro {max-width: 80px;}
.img-border {border: 1px solid #ccc;}

@media screen and (max-width: 600px) {
  .img-right, .img-left  {
    float: none;
    display: block;
    text-align: center;
    margin: 0.5em auto 1.5em;
    width: 100%;
    max-width: 100%;
  }
  .img-big     {width: 100%}
  .img-small {max-width: 50%;}
  .img-micro {max-width: 80px;} 
}


/* ---- CTA ---- */
/*
CTA

.cta-primary - primary CTA
.cta-full.cta-primary - 100% width CTA
.cta-mid.cta-primary - .
.cta-small.cta-primary - .

Markup:
<a class="cta  {{modifier_class}}">Click Me</a>

styleguide 3
*/
.cta {
  background-position: 0% 0%;
	padding: 1em 2em;
	display: inline-block;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  font-size: 1em;
  color: #af4600;  
  border: 1px solid #d35400;
  box-shadow: 0 0 5px 0 #d35400;
	background-image: linear-gradient(0, #fee1cd 20%, #fff);
	background-color: #fee1cd;
	background-repeat: repeat;
	background-attachment: scroll;
}

.cta:hover {
  background-color: #fee1cd;
  background-image: none;
 }

.cta-primary, 
.cta-primary:link, 
.cta-primary:visited, 
.cta-primary:focus {
  border: 1px solid #d35400;
  background-color: #f16000;
  color: #fff;
  background-image: linear-gradient(0, #d35400 20%, #f16000);
  box-shadow: 0 0 5px 0 #d35400;
}

.cta-primary:hover {
  background-color: #d35400;
  background-image: none;
  }

.cta-full {
  text-align: center;
  width: 100%;
}

.cta-small {
  padding: 0.25em 0.5em;
  font-size: 0.75em;
  font-weight: 600;
}

.cta-mid {
  padding: 0.45em 1.25em;
  font-size: 0.9em;
  font-weight: 600;
}


/* ---- Utils ---- */

/*.pb-0    {   padding-bottom: 0; }*/
.pb-0    {   padding-bottom: 0;}
.pb-1  {   padding-bottom: 0.85em;}
.mb-0    {   margin-bottom: 0; }
.mb-03  {   margin-bottom: 0.3em; }
.mb-05  {   margin-bottom: 0.5em; }
.mb-1    {   margin-bottom: 1em; }
.mb-2    {   margin-bottom: 2em; }
.mb-3    {   margin-bottom: 3em; }
.mt-0    {   margin-top: 0; }
.mt-05  {   margin-top: 0.5em; }
.mt-1    {   margin-top: 1em; }
.mt-2    {   margin-top: 2em; }
.mt-3    {   margin-top: 3em; }
b            {   font-weight: 700; }
.rad7    {   border-radius: 7px;}
.text-small   {font-size: 0.85em;}
.text-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/*
Utils

.text-small - reduces font size for secondary blocks
.text-center - centers content within block
.padded - adds padding to a block
.pb-0 - padding bottom 0
.pb-1 - padding bottom ~1em
.mb-0 - margin bottom 0
.mb-03 - margin bottom 0.3em
.mb-05 - margin bottom 0.5em
.mb-1 - margin bottom 1em
.mb-2 - margin bottom 2em
.mb-3 - margin bottom 3em
.mt-0 - margin top 0
.mt-03 - margin top 0.3em
.mt-05 - margin top 0.5em
.mt-1 - margin top 1em
.mt-2 - margin top 2em
.mt-3 - margin top 3em

styleguide 5
*/
/*

*/

/* ---- Visuals ---- */
.bg-gray {
  background-color: #efefef;
  color: #212121;
}

.bg-gray h1, .bg-gray h2, .bg-gray h3, .bg-gray h4 {
  color: #333;
}

.bg-attention {
    background-color: #ffd061;
}

.bg-attention h4, .bg-attention h3, .bg-attention h2, .bg-attention h1 {
  color: #333;
}
.bg-attention .subheader , .bg-attention .subtitle {
  color: #444;
}

/* First section on index page */
.orange {  
  font-size: 1.2em;
  line-height: 1.2; 
}
.orange h1 {
  color: #f16000;
}
.orange .text-small {
  font-size: 0.8em;
}


/* --- Forms ---- */

form {
  /*max-width: 550px;*/
  width: 100%;
}

.form-field {
  margin: 1em 0;
}

.form-field label {
  font-weight: 400;
  font-size: 1em;
  display: block;
  margin-bottom: 0.2em;
  vertical-align: top;
  line-height: 1.2;
  cursor: pointer;
}

input, textarea {
  width: 100%;
  font-size: 1.12em;  
  padding: 0.5em;
  font-family: 'open sans', 'sourse sans pro', sans-serif;
  background: #f6f6f6;
  border-radius: 4px;
  border: 2px inset rgb(238, 238, 238);
  border-collapse: separate;
}

textarea {
  height: 180px;
}

label.check {
  margin-left: 2em;
}

label.check input {
  width: 1.2em;
  height: 1.2em;
  top: 0.2em;
  position: relative;
  margin: 0 0.3em 0 -1.8em;
  display: inline-block;
  border: 1px solid rgb(238, 238, 238);
  padding: 0.1em;
}
input:active {background: #fff;}

input:focus, textarea:focus {
  outline: 2px solid #f16000;
}


/*
UI Patterns

styleguide 2
*/ 
/*
Article

Markup:
<h1>How Your Brain Rewires After Injury</h1> 
<p class="subheader">And why it means recovery is possible</p> 
<p>At one point scientists believed the brain stopped growing new 
neural pathways as we grew older. While certainly the first years 
of childhood are developmentally dynamic, the latest research shows 
you can grow new pathways at any point in your life.</p> 

styleguide 2.1
*/

/*
Article Extended

Markup:
<h1>How Your Brain Rewires After Injury</h1>
<p class="subheader">And why it means recovery is possible</p> 
<p><img class="img-right" src="detour-sign.jpg">At one point scientists believed the brain stopped growing new 
neural pathways as we grew older. While certainly the first years 
of childhood are developmentally dynamic, the latest research shows 
you can grow new pathways at any point in your life.</p>
<h2>Your brain is like a city</h2>
<p class="subheader">With roads connecting all the little areas</p>
<p>Here’s an analogy that have used with caregivers and survivors over the last 20 years that many have found helpful: Your brain is like a city, with roads connecting all the little areas. We'll call it Brainville.</p>

styleguide 2.1.1
*/

/*
Quotes

Markup:
<p class="quote">At one point scientists believed the brain stopped 
growing new neural pathways as we grew older.</p>
<p><b>Dr. Jim Lynskey</b>, PT, Ph.D, Stroke Smart magazine</p>

styleguide 2.2
*/

/*
Quote Long

Use quote-long for long (more than 3 lines) quotations and the quotations without author  

Markup:
<p>Stephanie Liou at Stanford University writes:</p> 
<p class="quote-long">Today we recognize that the brain continues to reorganize 
itself by forming new neural connections throughout life. This 
phenomenon, called neuroplasticity, allows the neurons in the brain to 
compensate for injury and adjust their activity in response to new 
situations or changes in their environment.</p> 

styleguide 2.2.1
*/

/*
Accent

Markup:
<p class="accent">Today we recognize that the brain continues to reorganize 
itself by forming new neural connections throughout life.</p>

styleguide 2.2.2
*/

/*
Images

Images are responsive. At `(max-width: 600px)` images are transformed to 
block 

.img-left   - 35% width, float, left-aligned
.img-right  - 35% width, float, right-aligned
.img-center - original size, block, centered

Markup:
<p><img class="{{modifier_class}}" src="detour-sign.jpg">
At one point scientists believed the brain stopped growing new... 
neural pathways as we grew older. While certainly the first years 
of childhood are developmentally dynamic, the latest research shows 
you can grow new pathways at any point in your life.
<b class="clear"></b></p> 

styleguide 2.3
*/

/*
Image modifiers

Applied to `.img-right`, `.img-left`, `.img-center`

.img-big  - 50% width
.img-small  - 130px at wide, 50% at small screen
.img-micro  - 80px width

Markup:
<img class="img-center {{modifier_class}}" src="detour-sign.jpg">

styleguide 2.3.1
*/

/*
Person card

Responsive card

Markup:
<p class="bg-gray padded text-small">
  <img class="img-left img-round img-micro img-border" src="../images/clay.jpg">
Clay has spent the last 20 years helping patients, 
caregivers and speech pathologists with speech & language software. He's 
picked up a lot of tips and tricks along the way and he shares them in 
this free newsletter.</p> 



styleguide 2.4
*/

/* 
Layout 

.block - 100% width block, 800px max-width for the best readability
.col1-2 - 50% width column
.col1-3 - 33% width column
.col2-3 - 66% width column

styleguide 4
*/

/*
Rows and Columns 

This is for backward compatibility, use Blocks instead

styleguide 4.2
*/
/*
Single column layout

<img src="rowcol.png">

Markup:
<div class="row">
  <div class="col">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
	  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
	  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
	  ea commodo consequat.</p>  
  </div>
</div>
<div class="row col">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
	eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
	minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
	ea commodo consequat.</p>  
</div>

styleguide 4.2.1
*/

/*
Two columns 1/2  + 1/2

Markup:
<div class="row col">
  <div class="col1-2">
    <p>At one point scientists believed the brain stopped growing new... neural pathways as we grew older.</p>
  </div> 
  <div class="col1-2">
    <p>At one point scientists believed the brain stopped growing new... neural pathways as we grew older.</p>
  </div> 
</div>

styleguide 4.2.2
*/

/*
Two columns 1/3 + 2/3

Markup:
<div class="row col"> 
  <div class="col1-3"><div class="bg-gray padded text-small">
    <p>At one point scientists believed the brain stopped growing new... neural pathways as we grew older.</p>
  </div></div>
  <div class="col2-3">
    <p>At one point scientists believed the brain stopped growing new... neural pathways as we grew older.</p>
  </div>
</div> 

styleguide 4.2.3
*/

/*
Complex layout 

Markup:
<div class="row col">
  <div class="bg-attention padded">
    <h2>Attention block</h2>
    <p class="subtitle">Lorem ipsum dolor sit amet consectetur</p>
  </div>
</div>
<div class="row col">
  <div class="col1-3">
    <b>Lorem ipsum</b> dolor sit amet, consectetur adipisicing elit, sed do 
	  eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="col1-3">
    <b>Lorem ipsum</b> dolor sit amet, consectetur adipisicing elit, sed do 
	  eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="col1-3">
    <b>Lorem ipsum</b> dolor sit amet, consectetur adipisicing elit, sed do 
	  eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>
<div class="row col">
  <div class="col2-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
	  eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
	  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
	  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
	  ea commodo consequat.</p>
  </div>
  <div class="col1-3 text-small">
    <div class="bg-gray padded">
      <p><a href="#" class="cta cta-primary cta-full">Subscribe</a></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
      eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>
<div class="row col">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
	  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
	  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
	  ea commodo consequat.
</div>

 
styleguide 4.2.4
*/

/*
Complex nested layout

Markup:
<div class="row col">
  <div class="col2-3">
    <div class="row">
      <div class="col1-2">Nested column 1 Nested column 1 Nested column 1 Nested column 1 Nested column 1 Nested column 1</div>
      <div class="col1-2">Nested column 2 Nested column 2 Nested column 2 Nested column 2 Nested column 2 Nested column 2 </div>
    </div>
    <div class="row col">
      <p class="bg-gray padded">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
    </div>
  </div>
  <div class="col1-3 text-small">
    <div class="bg-gray padded">
      <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
    </div>
  </div>
</div>

styleguide 4.2.5
*/

/*
Blocks

Block is a basic building block for a layout. Think of it as of a single column. Block can contain nested blocks and columns
<img src="block.png">

styleguide 4.1
*/
/*
Layout with blocks

Markup:
<div class="block">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
	  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat.</p>
</div><!-- /block -->
<div class="block">
  <div class="col1-2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
	  eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="col1-2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
	  eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div><!-- /block -->

styleguide 4.1.1
*/

/*
Two columns layout

Markup:
<div class="block">
  <div class="col2-3">
    <h2>Lorem ipsum dolor sit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do dolor sit amet, consectetur adipisicing elit, sed do dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do dolor sit amet, consectetur adipisicing elit, sed do dolor sit amet</p>
  </div><!-- / col -->
  <div class="col1-3 text-small">
    <div class="bg-gray padded">
      <p><a href="#" class="cta cta-primary cta-full">Subscribe</a></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do dolor sit amet, consectetur adipisicing elit</p>
    </div>  
  </div><!-- / col -->
</div><!-- block -->
  
styleguide 4.1.2
*/

/*
Complex layout

Markup:
<div class="block">
  <div class="bg-attention padded">
    <h2>Attention block</h2>
    <p class="subtitle">Lorem ipsum dolor sit amet consectetur</p>
  </div>
</div><!-- /block -->
<div class="block">
  <div class="col1-3">
    <b>Lorem ipsum</b> dolor sit amet, consectetur adipisicing elit, sed do 
	  eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="col1-3">
    <b>Lorem ipsum</b> dolor sit amet, consectetur adipisicing elit, sed do 
	  eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="col1-3">
    <b>Lorem ipsum</b> dolor sit amet, consectetur adipisicing elit, sed do 
	  eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div><!-- /block -->
<div class="block">
  <div class="col2-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
	  eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
	  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
	  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
	  ea commodo consequat.</p>
  </div>
  <div class="col1-3 text-small">
    <div class="bg-gray padded">
      <p><a href="#" class="cta cta-primary cta-full">Subscribe</a></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
      eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div><!-- /block -->
<div class="block">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
	  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
	  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
	  ea commodo consequat.
</div><!-- /block -->

 
styleguide 4.1.3
*/




/* ---- Therapy Advisor ---- */

/* custom checkbox */
.therapy-item [type=checkbox] {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid #999;
  background-color: #eee;
  display: inline-block;
  float: left;
  margin-left: 8px;
  margin-top: 0.75em;
}

.therapy-item [type="checkbox"]:checked,
.therapy-item [type="checkbox"]:not(:checked) {
  left: -9999px;
  position: absolute;
}

.therapy-item label {
  display: block;
  padding: 0.75em 0.5em 0.75em 45px;
  cursor: pointer;
  position: relative;
}

.therapy-item [type="checkbox"]:checked + label,
.therapy-item [type="checkbox"]:not(:checked) + label {
}

.therapy-item [type="checkbox"]:checked + label:before,
.therapy-item [type="checkbox"]:not(:checked) + label:before {
  content: '';
  position: absolute;
  top: 12px;
  left: 7px;
  width: 30px;
  height: 30px;
}

.therapy-item [type=checkbox]:checked + label:before {
  background-image: url('../images/check_on.png');
}

.therapy-item [type="checkbox"]:not(:checked) + label:before {
  background-image: url('../images/check_off.png');
}

.therapy-skill {
  margin-bottom: 0.5em;
  /*margin-top: 1.5em;*/
}

.therapy-item {
  /*padding: 0.75em 0.5em 0.75em 45px;*/
  /*cursor: pointer;*/
  border-top: 1px solid #e5e5e5;
}

.therapy-skill + .therapy-item {
  border-top: 1px solid transparent;
}

.therapy-item:hover {
  color: #000;
  background: #f5f5f5;
  box-shadow: 0 0 5px 1px #bbb;
  border-top: 1px solid transparent;
}

.therapy-item:hover .therapy-check {
  /*transform: scale(1.08);*/
}

.therapy-issue {
  font-size: 1em;
  font-weight: 700;
  padding: 0.3em 0;
  display: inline;
}

.th-example {
  display: inline-block;
  position: relative;
  background-color: #ffe361;
  color: #000;
  font-size: 15px;
  padding: 7px;
  line-height: 16px;
  font-weight: 400;
  /*top: -45px;*/
  border-radius: 3px;
  left: 7px;
  top: 1px;
}

.th-example:after {
  content: ' ';
  display: block;
  position: absolute;
  width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 10px solid #ffe361;
  top: 100%;
  left: 8px;
}

.therapy-med {
  font-size: 0.9em;
  color: #666;
  margin-top: -5px;
  margin-bottom: 10px;
  display: none;
}

.therapy-details {
}

.therapy-test {
  font-size: 0.85em;
  margin-top: 0.5em;
  display: none;
}

.therapy-test p {
  margin: 0.5em 0;
}

.right {
  float: right;
  margin: 0 0 1em 1em;
}
/*
@media screen and (max-width: 400px) {
  .right {
    float: none;
    display: block;
    margin: 0.5em 0;
    width: 100%;
    text-align: center;
  }
}
*/

/* ---- Team widget ---- */

.team {
  float: left;
  width: 26%;/*150px;*/
  min-width: 160px;
  margin-bottom: 1em;
  /*margin: 1px 2em 1em 0;*/
  text-align: center;
  padding: 0.3em;
}
.team-img {
  width: 150px;
  height: 150px;
  margin-bottom: 0.5em;
  border: 1px solid #ddd;
  border-radius: 50%;
}
.team-name {
  font-size: 0.8em;
  font-weight: 700;
}

/* ---- Expander ----*/
.hidden {
  display: none;
}

a.expander {
  font-weight: 600;
  font-size: 0.9em;
  border-bottom: 1px dashed;
  text-decoration: none;
}
a.expander:after {
  font-family: FontAwesome;
  content: "\f105";
  display: inline-block;
  padding-left: 4px;
  vertical-align: middle;  
}

/* ---- Accordion widget ---- */
.accordion {
  width: 100%;
}
.accordion-item {
  /*margin-bottom: 1.5em;*/
}
.accordion-item-header {
  border-top: 1px solid #ddd;
  padding: 1em;
  cursor: pointer;
  margin-bottom: 0.5em;
}
.accordion-item:last-child {
  border-bottom: 1px solid #ddd;
}

.accordion-item-header:hover, .accordion-item-header-isselect {
  background-color: #f5f5f5;/*#efefef;*/
}
.accordion-item-header {
  margin: 0;
  line-height: 1;
  -webkit-user-select: none;
  
}
.accordion-item-header p, .accordion-item-header h4 {
  margin: 0 0 0.5em;
  line-height: 1;
  color: #333;
  
}
.accordion-item-header p {
  margin-bottom: 0;
}
.accordion-item-header .fa {
  float: right;
  /*margin-right: 0.5em;*/
  position: relative;
  op: 0.6em;
  transform: translateY(-2px) rotateX(0);
  transition: all 0s;
}
.accordion-item-header:hover .fa {
  transform: translateY(0);
  transition: all 0.3s;
}
.fa.rot.rot {
  transform: translateY(0) rotateX(180deg) ;
    transition: all 0.3s;
}

.accordion-item-body {
  padding-left: 1em;
  margin-top: 1em;
  /*border-bottom: 1px solid #ddd;  */
}

/* ---- Pricing Page ---- */
.pricing-item {
  padding: 0.5em 0;
  border-bottom: 1px solid #ddd;
  /*max-width: 600px;
  width: 66%;*/
}

@media screen and (max-width: 600px) {
  .pricing-item {
    width: 100%;
    max-width: 100%;
  }
}

.pricing-item h3 {
  margin: 0.5em 0; 
  color: #333;
}

.pricing-item p, ul {
  margin-bottom: 0.3em;
}
.pricing-item li {
  margin-bottom: 0;
}

.pricing-price {
  float: right;
  font: 0.9em;
  margin-left: 1em;
  text-align: right;
  line-height: 1.2;
}
.pricing-price-num {
  font-size: 1.85em;
  font-weight: 600;
}
.pricing-tag {
  padding: 0.3em;
  border-radius: 3px;
  font-size: 0.9em;
  font-weight: 400;
}
.black {
  color: #fff;
  background-color: #333;
}
.orange {
  color: #fff;
  background-color: #f16000;
}

/* ---- Reveal Widget ---- */
.reveal {
  display: block;
  height: 160px;
  overflow: hidden;
  position: relative;
  margin-bottom: 1em;
  outline: 1px solid red;
}
.reveal-more {
  position: absolute;
  /*height: 2em;*/
  /*opacity: 0.9;*/
  background-image: linear-gradient( 0deg rgba(255,255,255,0.2),  #ddd 10% );
  bottom: 0;
  z-index:2;
  padding: 0.5em;
}







/* --------------- new Testimonial style ------- */
.q-body {
	margin: 1em auto;
	max-width: 55em;
}
/* narrow layout */
.q-narrow .q-voice {
	border-left: none;
	border-top: none;
}
.q-narrow .q-voice-image {
	float: none;
}
.q-narrow .q-voice-content {
	margin: 0;
}
.q-narrow .q-voice-cite {
	text-align: center;
}
.q-voice {
	margin-bottom: 1em;
	max-width: 45em;
  /* optimal line width */
}
.q-clearfix {
	display: table;
	height: 0;
	clear: both;
}
.q-voice-image {
	padding: 1em;
	text-align: center;
	float: left;
  width: 160px;
}
.q-voice-image img {
	border-radius: 50%;
	border: 1px solid #b2b2b2;
}
.q-voice-image-name {
	font-weight: 600;
}
.q-voice-image-place {
	font-size: 0.8em;
}
.q-voice-content {
	padding: 1em;
	margin-left: 150px;
}
.q-voice-cite {
	font: 400 1.3em georgia;
  line-height: 1.6;
	font-style: italic;
	text-align: left;
}
.q-voice-cite:first-letter {
	padding-left: 1.25em;
}
.q-voice-cite-s {
	font-size: 2.45em;
	font-weight: 600;
	color: #ccc;
	padding-right: 0.15em;
	padding-top: 0.35em;
	line-height: 0;
	float: left;
}
.q-voice-text {
	padding-top: 1em;
}

@media screen and (max-width: 540px) {
  .q-voice {
    border-left: none;
    border-top: none;
  }
  .q-voice-image {
    float: none;
    text-align: center;
    margin: auto;
  }
  .q-voice-content {
    margin: 0;
  }
  .q-voice-cite {
    text-align: center;
  }
}