#hero {
}

#hero .primary-content {
  padding-bottom: 20px;
}

#hero h1 {
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #D26;
  margin-bottom: 0.1em;
}

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


/* ---- big ol buttons ---- */

.hero-masonry .button {
  display: block;
  font-size: 1.3em;
  line-height: 1.2em;
  position: relative;
  padding-left: 50px;
  background: #D26;
}

.hero-masonry .button:hover { background: #A2C; }

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

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

.hero-masonry {
  border-radius: 10px;
  padding: 10px 1%;
  margin-bottom: 20px;
}

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

.hero-item,
.hero-masonry .grid-sizer {
  width: 46.9%; /* juse a lil under  47 */
 　line-height: 2em;
  margin: 10px 1%;
  float: left;
  border-radius: 1px;
  font-size:11px;
}

.hero-item p{
background-size:cover;
height:10em
}

.hero-item h2{
font-size:5px
}


/* necessary for proper sizing with margins */
.hero-masonry .grid-sizer {
  position: absolute;
}

.hero-item.texty {
  background: #D8D6D2;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  border-width:1px;
  border-style:solid;
  border-color:white;
}


.hero-item.has-title,
.hero-item.w2 {
  width: 96%;
    background-color: rgba(255, 255, 255, 0.5);
  border-width:1px;
}

.hero-item.has-example {
}

.hero-item.has-example a {
  font-size: 13px;
  font-weight: bold;
  background: #D26;
  color: white;
  display: block;
  border-radius: 10px 10px 8px 8px;
}

.hero-item.has-example a:hover {
  background: #A2C;
  color: white;
}

.hero-item.has-example img {
  display: block;
  max-width: 100%;
  border-radius: 8px 8px 0 0;
}

.hero-item.has-example .example-title {
  padding: 5px 10px;
  margin: 0;
}

/* enough width for 4 columns */
@media screen and ( min-width: 720px ) {

  .hero-item,
  .hero-masonry .grid-sizer {
    width: 22.5%;
  }

  .hero-item.has-title,
  .hero-item.w2 {
    width: 46.9%; /* just a lil under 47 */
  }

}

/* ---- desktop ---- */

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

  #hero h1 {
    font-size: 50px;
  }
  
    #hero h2 {
    font-size: 15px;
  }

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

  /* just a little under 71.5 */
  .hero-item.has-title {
    width: 71.4%;
  }

  /* buttons */

  .big-ol-buttons .button {
    font-size: 1.6em;
    padding-left: 86px;
    min-height: 94px;
  }

  .big-ol-buttons .icon {
    font-size: 56px;
    left: 18px;
    top: 16px;
  }

}