.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

img {
    max-width: 100%;
}

.key-point {
   padding: 30px;
   height: auto;
}

div[class^=grid-] > p {
   margin-top: 0;
}

main header {
  margin-top: 50px;
  text-align: center;
}
main header h1 {
  font-size: 42px;
  margin-bottom: 3px;
}
main header h2 {
  font-size: 30px;
  margin: 0 0 40px;
}

h3 {
  margin-bottom: 20px;
}

#masthead h1, #masthead h2 {
  margin: 0;
  text-shadow: 1px 1px 2px #fff, 0 0 1em #fff, 0 0 0.2em #fff;
}

#masthead .hgroup {
  background:rgba(255,255,255,.8);
  padding: 70px 0;
}

#moreinfo {
  margin-top: 40px;
}

#moreinfo .grid-4 a {
    display: block;
    width: 258px;
    background: #FFFFFF;
    border: 1px solid #D7D9E8;
    border-radius: 6px;
    box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset;
    padding: 15px 20px 10px;
}

.grids  {width:960px;}
.grid-1 {width: 60px;}
.grid-2 {width:140px;}
.grid-3 {width:220px;}
.grid-4 {width:300px;}
.grid-5 {width:380px;}
.grid-6 {width:460px;}
.grid-7 {width:540px;}
.grid-8 {width:620px;}
.grid-9 {width:700px;}
.grid-10{width:780px;}
.grid-11{width:860px;}
.grid-12{width:940px;}
div[class^=grid-] {
  float:left;
  margin:0 0 0 20px;
}


#map {
  width:100%;
  height:200px;
}

#eventphotos img {
  height: 160px;
  margin: 10px 2px;
  border: 5px #fff solid;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, .5);
}
#eventphotos {
  height: 200px;
  overflow: hidden;
  text-align: center;
}

#keyholders ul {margin: 0; padding: 0;}
#keyholders li {
  display: block;
  float: left;
  width: 114px;
  height: 114px;
  margin: 0px 10px 10px 10px;
}
#keyholders li img {
  border-radius: 100%;
  background-clip: padding-box;
  background-color: white;
  width: 100%;
  height: auto;
}


/* Copied from Mozilla.org sheet, should be add to the main sheet at some point. */

#site-title {
    font-size: 4.5em;
    letter-spacing: -3px;
    margin: 0px 0px 0.15em;
    transition: font-size 0s ease 0s, letter-spacing 0.5s ease-out 0s;
}

#site-description {
    color: #777;
}

#masthead {
    margin: 0px;
    position: relative;
    text-align: center;
    padding: 0;
    background: rgba(0,0,0,.4) center center url(../images/bg_masthead.jpg);
    background-size:cover;
}


#wrap { /* from OneMozilla */
  margin: 0 auto;
  position: relative;
  -moz-transition: padding, width .5s ease-out;
  -ms-transition: padding, width .5s ease-out;
  -o-transition: padding, width .5s ease-out;
  -webkit-transition: padding, width .5s ease-out;
  transition: padding, width .5s ease-out;
  width: 960px; /* was 1000px here */
}


#eqm {padding: 0;}

#eqm li {
  display: block; float:left;
  width: 100px; height: 2em;
  padding-top: 100px;
  background: no-repeat top;
  background-size: 100%;
  margin: 5px 15px;
  text-align: center;
}

/* RWD */

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

  #masthead .hgroup {
   padding: 20px 0;
  }
  #masthead h1 {
    font-size: 50px;
  }

  h3 {font-size: 22px;}

  .grids {
    margin: 0 auto;
    width: 611px;
  }

  .grid-4,
  .grid-6 {
    width: 285px;
  }

  .grid-12 {
    width: 591px;
  }

  #wrap { width: 100%; }
  main {padding: 0 20px;}

  #keyholders li {
    width: 64px;
    height: 64px;
    margin: 0 14.5px 10px;
  }

  #moreinfo .grid-4 a {
    width: 238px;
    margin: 10px auto 0 auto;
  }

  #footer .grid-text {
    text-align: left;
  }
  #eqm li {
    font-size: .85em;
    width: 80px; height: 2em;
    padding-top: 80px;
  }
}

@media only screen and (max-width:650px) {
  #intro header {
    display: none;
  }

  #intro {margin-top: 1em;}

  h3 {
    text-align: center;
  }
  main header h1 {font-size: 30px;}
  main header h2, h2, h3 {font-size: 20px;}

  .grids {
    width: 100%;
  }
  div[class^="grid-"] {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
  }

  #keyholders li {
    width: 64px;
    height: 64px;
    margin: 0 14.5px 10px;
  }

  #moreinfo .grid-4 a {
    width: 238px;
    margin: 10px auto 0;
  }

  #eqm {width: 330px; margin: 0 auto;}
}
@media only screen and (max-width:430px) {
  #eqm {width: 220px;}
}
@media only screen and (max-width:250px) {
  #eqm {width: 110px;}
}