@charset "UTF-8";


article.bio
{
   width: 100%;
   margin-bottom: 2em;
}

article.bio img.landscape
{
   display: block;
   width: 100%;
   float: none;
   margin-bottom: 1.5em;
}


article.bio div.mainTitle,
article.bio div.edged
{
   margin: 0;
   padding: 0;
   margin-left: -0.5px;
   padding-left: 30px;
   border-left: 12px solid #FFDF00;
   width: calc(100% - 60px);
}


article.bio div.edged
{
   padding-bottom: 1em;
   margin-bottom: 2em;
}

article.bio div.edged p
{
   padding-top: 1em;
   width: 97%;
   margin-left: 0;
   margin-bottom: 0.75em;
}


article.bio h1.credentials
{
   font-family: HN57;
   color: #424242;
   font-size: 36px;
   display: block;
   line-height: 1.1em;
}


article.bio h1.credentials span
{
   font-family: HN37;
   color: #525252;
   font-size: 28px;
   display: inline;
   line-height: 1.1em;
   white-space: nowrap;
}

article.bio h2.job
{
   font-family: HN47;
   color: #525252;
   font-size: 32px;
   display: block;
   line-height: 1.1em;
}



article.bio div.quote.smallScreen
{
   float: none; 
   width: 90%;
   margin-left: 4.5%;
   margin-right: 3.5%;
   margin-top: 0.5em;
   margin-bottom: 3em;
   font-family: HN57;
}

article.bio div.quote.smallScreen img
{
   width: 22%;
   max-width: 100px;
   display: block;
   float: left;
}

article.bio div.quote.smallScreen p
{
   width: 68%;
   color: #424242;
   margin-top: 0;
   margin-left: 8%;
   float: left;
   line-height: 1.75em;
}

article.bio div.quote.wideScreen
{
   display: none;
}


@media (min-width: 767px)
{
    article.bio img.landscape
    {
       float: left;
       width: 80%;
       margin: 0;
    }
    
    
    article.bio div.edged
	{
      float: left; 
      width: 60%;
      margin-top: 1.5em;
	}
	
	
    
    article.bio div.mainTitle
    {
       border: none;
       margin: 0;
       padding: 0;
       float: left;
       width: 42%;
       margin-left: 5%;
       margin-top: 2em;
    }

}

@media (min-width: 1049px)
{
    article.bio div.quote.smallScreen
    {
       display: none;
    }
    
    article.bio img.landscape
    {
       float: left;
       width: 60%;
    }
    
	article.bio div.quote.wideScreen
	{
	   display: block;
	   float: right; 
	   width: 28%;
	   margin-right: 5%;
	   margin-top: 0;
	   margin-bottom: 0;
	   border-left: none;
	   font-family: HN57;
	   padding: 0;
	}

	article.bio div.quote.wideScreen p
	{
	   color: #424242;
	   margin-top: 1em;
	   width: 98%;
	   margin-left: 0;
       float: none;
       display: block;
       line-height: 1.65em;
	}
	
	article.bio div.quote.wideScreen img
	{
	  float: none;
	  width: 84px;	
	}
}