/* ---- primary-content ---- */

.primary-content {
	margin-left: 5px;
	margin-right: 5px;
}

@media screen and ( min-width: 960px ) {
  .primary-content {
		margin-left: 10%;
		margin-right: 10%;
  }
}

/* ---- button ---- */
.hero-masonry .button {
  display: block;
  border: none;
  padding: 0.8em 1.0em;
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.3);
  cursor: pointer;
  border-radius: 7px;  
  font-size: 1.3em;
  line-height: 1.2em;
  position: relative;
  padding-left: 27px;
  background: #0059b3;
}

.hero-masonry .button:active {
  background: #0059b3;
  color: white;
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.6);  
}

.hero-masonry .button:hover {
  background: #dc6900;
  color: white;
}

.hero-masonry .button .icon {
  font-size: 30px;
  position: absolute;
  left: 9px;
  top: 9px;
}


/* ---- hero masonry ---- */
#hero {
  border-bottom:6px solid;display:block;position:relative;overflow:hidden;padding:0 0 0 0;
}

#hero .primary-content {
  <!--padding-top: 70px;-->
  padding-bottom: 5px;
}

/* ---- h1, h2, h3 font sizes are controled by @media tags -- */
#hero h1 {
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #b4230f;
  margin-bottom: 12px;
  margin: 0px;
}

#hero h2 {
	font-weight: 700;  
	letter-spacing: -0.01em;
	color: #b4230f;
	margin: 0px;
	padding: 0px;	
}

#hero h3 {
	font-weight: 650;  
	letter-spacing: -0.01em;
	color: #b4230f;
	margin: 0px;
	padding: 0px;	
}

#hero h4 {
	font-weight: 600;  
	letter-spacing: -0.01em;
	color: #b4230f;
	margin: 0px;
	padding: 0px;	
}

#hero h5 {
	font-weight: 550;  
	letter-spacing: -0.01em;
	color: #b4230f;
	margin: 0px;
	padding: 0px;	
}

#hero h6 {
	font-weight: 500;  
	letter-spacing: -0.01em;
	color: #b4230f;
	margin: 0px;
	padding: 0px;	
}

#hero .tagline {
  font-size: 24px;
  margin: 1em 0 1.2em 0;
  line-height: 1.2; 
}

@media screen and ( min-width: 960px ) {
  .tagline {
    font-size: 1.8em;
  }
}

.hero-item p {
  color: #404041;
  font-weight: 500; 
}

/* 	background gray padding */
.hero-item.texty {
	background: #fff;
	border: 1px solid #cecece;
}

/*
.hero-item.texty {
  background: #D8D6D2;
  padding: 10px;  
}
*/

#hero .hero-type {
	font-size: 9pt;
	font-weight: 800;
	text-transform: uppercase;
	color: #5a5a5a;
	letter-spacing: 0.01em;	
	position: absolute;
	right: 12px;
	top: 12px;
}

#hero .hero-type-white {
	font-size: 9pt;
	font-weight: 800;
	text-transform: uppercase;
	color: #f2f2f2;
	letter-spacing: 0.01em;	
	position: absolute;
	right: 12px;
	top: 12px;
}


#hero .hero-url {
	font-size: 11pt;
	font-weight: 700;
	color: #0a3ea8;
	position: absolute;
	right: 20px;
	top: 75%;
	margin: 0px 0px 30px;
}
#hero .fa-arrow-alt-right {
	font-size: 28pt;
	font-weight: 700;
	color: #dc6900;
	text-shadow: -1px 0 #f4f4f4, 0 1px #f4f4f4, 1px 0 #f4f4f4, 0 -1px #f4f4f4;
}

#hero .white-arrow .fa-arrow-alt-right {
	font-size: 28pt;
	font-weight: 700;
	color: #f2f2f2;
	text-shadow: -1px 0 #f4f4f4, 0 1px #f4f4f4, 1px 0 #f4f4f4, 0 -1px #f4f4f4;
}

/* ---- hero masonry ---- */

.hero-masonry {
  background: #fff;
  padding: 10px 1%;
  margin-bottom: 10px;
}

.hero-masonry:after {
  content: '';
  display: block;
  clear: both;
}

.hero-item,
.hero-masonry .grid-sizer {
	width: 46.9%; /* juse a lil under  47 */
	margin: 10px 1%; /* margin: 1% 1%; */
	float: left;
}
 
/* necessary for proper sizing with margins */
.hero-masonry .grid-sizer {
  position: absolute;
}

/* can change for proper sizing h3=h1+h1 / h4=h2+h2 / h4=h3+h1 / h4=h1+h1+h1 / h5=h4+h1 / h5=h2+h2+h1 / h5=h3+h1+h1 / h5=h1+h1+h1+h1 */
.hero-masonry .hero-item.h1 { height: 154px; }
.hero-masonry .hero-item.h2 { height: 240px; }
.hero-masonry .hero-item.h3 { height: 328px; }
.hero-masonry .hero-item.h4 { height: 500px; }
.hero-masonry .hero-item.h5 { height: 672px; }

.hero-masonry .hero-item.w1p4 { width:  22%; }
.hero-masonry .hero-item.w2p4 { width:  47%; }
.hero-masonry .hero-item.w4p4 { width:  96%; }

.hero-masonry .hero-item.w1p3 { width:  23%; }
.hero-masonry .hero-item.w2p3 { width:  54%; }
.hero-masonry .hero-item.w1p3 { width:  96%; }

.hero-item.has-title,
.hero-item.w2 {
  width: 96%;
}


/* enough width for 4 columns */
@media screen and ( min-width: 720px ) {
	.hero-masonry {
	  padding: 15px 1%;
	}
	.hero-item,
	.hero-masonry .grid-sizer {
		width: 22.5%;		
	}
		.hero-item.has-title,
		.hero-item.w2 {
		width: 46.9%; /* just a lil under 47 */
	}
}

@media screen and (min-width: 1400px){
	#hero h2 {
		font-size: 46px;
	}
	#hero h3 {
		font-size: 28px;	
	}
	.hero-item p {
	  font-size: 20px;  
	}		
}
@media screen and (max-width: 1399px){
	#hero h2 {
		font-size: 42px;
	}
	#hero h3 {
		font-size: 22px;	
	}	
	.hero-item p {
	  font-size: 16px;  
	}	
}

@media screen and ( min-width: 992px ) {

  #hero h1 { font-size: 74px; }
  #hero .tagline { font-size: 32px; }

  /* just a little under 71.5 */
  .hero-item.has-title {
    width: 71.4%;
  }
	#hero .hero-masonry .button {
	  font-size: 1.2em;
	  padding-left: 17px;
	}
}

@media screen and ( max-width: 991px ) {
	#hero h1 { font-size: 66px; }
	#hero h2 {
		font-size: 36px;
	}
	#hero h3 {
		font-size: 22px;	
	}
}

@media screen and (max-width: 768px){
	#hero h1 {
		font-size: 46px;	
		margin: 0;
		padding:2px 0px 2px;
	}
	#hero h2 {
		font-size: 24px;	
		margin: 0;
		padding:0px 0px 2px 0px;
	}
	#hero h3 {
		font-size: 18px;	
		margin: 0;
		padding:0px 0px 2px 0px;
	}	  	
	#hero .hero-type .hero-type-white{
		font-size: 8pt;
		font-weight: 700;		
	}
	.hero-item p {
	  font-size: 14px;  
	}		
}

@media screen and (max-width: 414px){
	#hero h1 {
		font-size: 38px;	
	}
	#hero h2 {
		font-size: 20px;
	}
	#hero h3 {
		font-size: 16px;	
		margin: 0;
		padding:0px 0px 2px 0px;
	}	  	
	#hero .hero-type .hero-type-white{
		font-size: 7pt;
		font-weight: 700;		
	}
	#hero .hero-masonry .button {
	  font-size: 1.0em;
	}	

}