@charset "UTF-8";



div.staggered,
div.blog
{
   width: 100%; 
   margin-right: auto;
   margin-left: auto;
   vertical-align: top;
}

div.staggered
{
   position: relative;
}

div.staggered div.dotBackground
{
  position: absolute;
  z-index: 0;
}

   
div.staggered div.dotBackground.one
{
  width: 44%;
  top: -60px;
  right: 4px;
  height: 90%;     
}

div.staggered div.dotBackground.two
{
  width: 75%;
  left: 6px;
  top: -54px;
  height: 240px;
}


div.blog
{
   padding-top: 60px;
   margin-bottom: 80px;
}

div.blog h1,
div.blog h4
{
   margin-left: 5%;
}

div.blog div.dotBackground
{
   display: none;
}

div.staggered div.post
{
   text-align: left;
   vertical-align: top;
   display: inline-block;
   z-index: 100;
   position: relative;
   margin-bottom: 28px;
}

div.staggered div.post.push
{
   padding-top: 72px;
}
div.staggered div.post.pull
{
   margin-top: -72px;
}

div.staggered p.highlighter span
{
   width: 100%;
   margin-left: 0;
   display: block;
   line-height: 1em;
}

div.staggered p.highlighter span.title
{
   font-family: HN67;
   color: #333333;
   font-size: 16px;
   letter-spacing: 0.09em;
   margin-top: 0.5em;
   margin-bottom: 0.25em;

    max-height: 2.1em;   
    display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;

}

div.staggered p.highlighter span.author
{
  font-family: HN47;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: #888888;
}

div.staggered div.prominent,
div.staggered div.tall
{
   width: 90%;
   margin-left: 5%;
   margin-bottom: 2em;
}
div.staggered div.normal
{
   margin-left: 5%;
   width: 42%
}

div.staggered a div.post div.picContainer, 
div.staggered div.post div.picContainer
{
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%; 
}

div.staggered a div.prominent div.picContainer,
div.staggered div.prominent div.picContainer,
div.staggered a div.tall div.picContainer,
div.staggered div.tall div.picContainer
{
   padding-top: 100%;
}

div.staggered a div.normal div.picContainer,
div.staggered div.normal div.picContainer
{
  padding-top: 150%;
}


div.staggered.secondary
{
  margin-top: 4em;
}





/* Small devices (tablets, netbooks, small laptops, horizontal phone) */
@media (min-width: 767px)
{ 
   
   div.staggered
   {
      width: calc(100% - 102px);
      margin-left: 102px;
   }
   

   div.staggered.secondary
	{
	  margin-top: 12em;
	  margin-left: calc(102px + 2%);
	}

   
   div.staggered div.dotBackground.one
   {
      width: 33%;
      top: 2px;
      right: 5px;
      height: 90%;     
   }

   div.staggered div.dotBackground.two
   {
      width: 56%;
      left: -100px;
      top: -54px;
      height: 600px;
   }

   
   div.blog
   {
      width: calc(100% - 72px);
      margin-left: 72px;
      margin-bottom: 0;
   }
   
   div.blog h1
   {
     margin-left: 2.5%;
   }
   
   div.blog h4
   {
     margin-top: 2em;
     margin-left: 2.5%;
   }
   
   
   div.blog div.dotBackground
   {
     display: block;
     height: 95px;
     width: 40%;
     margin-top: 40px;
     margin-left: -72px;
   }
   
   
	div.staggered div.post
	{
        margin-bottom: 20px;
	}
	
	div.staggered div.post.push,
	div.staggered div.post.pull
	{
	   padding-top: 0;
	   margin-top: 0;
	}
   
   div.staggered p.highlighter span.title
   {
         font-size: 17px;
   }
   
    
   div.staggered p.highlighter span.author
   {
      font-size: 15px;
   }
   
   
   div.staggered a p.highlighter span.title span.titleHighlight
	{
	   background-image: url('../yellow_square_30.png');
	   background-size: 0 0.2em;
	   background-repeat: no-repeat;
	   background-position: 0 0.4em; 
	   transition: background-size 500ms ease-in-out;
	   display: inline;
	   width: auto;
	   
	 }
 
 
	div.staggered a:hover p.highlighter span.title span.titleHighlight
	{
	   background-size: 100% 0.2em;
	}
 
	div.staggered div.prominent
	{
	   width: 46%;
	   margin-left: 0;
	   margin-right: 4%;
	}
	
	div.staggered div.tall
	{
	   width: 29.25%;
	   margin-right: 4%;
	   margin-left: 0;
	}
	
	div.staggered div.normal
	{
	   width: 25%;
	   margin-right: 8%;
	   margin-left: 0;
	}
	
	
	div.staggered a div.prominent div.picContainer,
	div.staggered div.prominent div.picContainer
	{
	   padding-top: 64%;
	}

	div.staggered a div.tall div.picContainer,
	div.staggered div.tall div.picContainer
	{
	   padding-top: 109%;
	}

	div.staggered a div.normal div.picContainer,
	div.staggered div.normal div.picContainer
	{
	   padding-top: 100%;
	}

	

}


/* Large devices (desktops, large laptops, retina laptops) */
@media (min-width: 1199px) 
{ 

   div.staggered p.highlighter span.title
   {
        font-size: 20px;
   
   }
   
   div.staggered p.highlighter span.author
   {
      font-size: 16px;
   }

}


/* Extra-large devices (HDTVs, panorama displays) */
@media (min-width: 1599px) { 



}