@charset "UTF-8";

/******** default columns and shared styles for blocks template *****************/

article.blocks
{
  width: 100%;
}

article.blocks section
{
  margin: 0;
  padding: 0;
  position:relative;
}

article.blocks div.dotDeco, article.blocks div.dotDeco2
{
   background-image: url('../dot-background.png');
   background-repeat: repeat;
   z-index: 0;
}




article.blocks div.column1,
article.blocks div.column2
{
   width: 100%;
   float: none;
   vertical-align: top;
   box-sizing: border-box;
}

article.blocks div.textContent,
article.blocks div.constrainedContent
{
   width: calc(100% - 48px);
   margin-left: 24px;
}

@media (min-width: 720px) { 
	
	article.blocks div.column1
	{
	   width: 44%;
	   float: left;
	}

	article.blocks div.column2
	{
	   width: 54%;
	   float: right;
	}


	article.blocks div.column2.narrow
	{
	   width: 32%;
	   float: right;
	}

	article.blocks div.column1.wide
	{
	   width: 64%;
	   float: left;
	}
	
    article.blocks div.textContent,
	article.blocks div.column1 div.textContent,
	article.blocks div.column1 div.constrainedContent
	{
	   margin-left: 68px;
	   width: calc(100% - 100px);
	}
			
	article.blocks div.column2 div.textContent,
	article.blocks div.column2 div.contrainedContent
	{
	   margin-left: 0;
	   width: calc(100% - 68px);
	}

}

@media (min-width: 1280px) { 

	article.blocks div.column1
	{
	   width: 38%;
	   float: left;
	}

	article.blocks div.column2
	{
	   width: 58%;
	   float: right;
	}
	
	article.blocks div.column2.narrow
	{
	   width: 38%;
	   float: right;
	}

	article.blocks div.column1.wide
	{
	   width: 58%;
	   float: left;
	}
	
	article.blocks div.textContent,
	article.blocks div.constrainedContent,
	article.blocks div.column1 div.textContent,
	article.blocks div.column1 div.constrainedContent
	{
	   margin-left: 102px;
	   width: calc(100% - 140px);
	}
	
				
	article.blocks div.column2 div.textContent,
	article.blocks div.column2 div.constrainedContent
	{
	   margin-left: 0;
	   width: calc(100% - 164px);
	}

}

article.blocks h1
{
   font-family: HN57;
   font-weight: normal;
   letter-spacing: 0.075em;
}

article.blocks p,
article.blocks ul,
article.blocks ol
{
   font-size: 17px;
}

article.blocks ul, 
article.blocks ol
{
  padding: 0;
  padding-left: 20px;
  margin-bottom: 2em;
  margin-top: -1.2em;  
}

article.blocks ul li,
article.blocks ol li
{
   margin-bottom: 0.5em;
}


article.blocks p.narrative span.italic
{
  font-family: HN47;
  font-size: inherit;
  font-style: italic;
  font-weight: normal;
  color: inherit;
}


article.blocks p.narrative span.intro
{
   font-size: 16px;
   font-family: din-2014;
   font-style: italic;
   font-weight: 600;
   letter-spacing: 0.07em;
   line-height: 1.75em;
}


article.blocks p.byline
{
   font-family: din-2014;
   font-weight: bold; 
   line-height: 20px;
   font-size: 18px; 
   margin-top: 1em;
   margin-left: 0;
   margin-bottom: 2em;
   letter-spacing: 0.075em;
   position: relative;
   z-index: 100;
}

article.blocks p.byline span.datestamp,
article.blocks p.byline span.contributors
{
   font-family: HN57;
   color: #646464;
   display: block;
   margin: 0;
   margin-top: 0.25em;
   font-weight: normal;
   font-size: 17px;
}

article.blocks p.byline span.datestamp
{
   color: #888888;
}

article.blocks p.credit,
article.blocks span.credit
{
   font-family: HN37;
   font-weight: normal;
   font-style: italic;
   color: #555555;
   font-size: 13px;
   line-height: 1.2em;
   padding-top: 0.2em;
}

@media (min-width: 720px) { 

	article.blocks p.credit,
	article.blocks span.credit
	{
	  font-size: 16px;
	}
}

article.blocks span.subheader,
article.blocks span.lineheader
{
   font-family: din-2014;
   font-weight: 600;   
}
article.blocks span.subheader
{
   display: block;
   margin-bottom: 1em;
   font-size: 104%;
}
article.blocks span.lineheader
{
   display: inline;
   font-size: 100%;
}

article.blocks span.subheader span.big
{
   font-size: 120%;
   border-bottom: 1px solid;
   font-weight: 900;
}

article.blocks span.leadin
{
   display: block;
   margin-bottom: 0.1em;
   font-weight: 600;
}

article.blocks span.highlighter
{
   font-size: 18px;
   font-family: din-2014, sans-serif;
   color: #333333;
   font-weight: bold;
   margin-bottom: 0.25em;
   width: auto;
   display: block;
}

article.blocks span.highlighter a.highlight
{
   background-image: url('../yellow_square_30.png');
   background-size: 0 0.5em;
   background-repeat: no-repeat;
   background-position: 0 0.4em; 
   transition: background-size 500ms ease-in-out;
   display: inline;
   width: auto;  
   color: #333333;
 }


article.blocks span.highlighter a.highlight
{
   cursor: pointer;
}
 


article.blocks span.highlighter:hover a.highlight
{
   background-size: 100% 0.5em;
}