body {
  background-image: url("bg.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  padding-top: 20px;
  font-size: 16px;
}
h1 {
  margin-top: 0.5em;
  margin-bottom: 0.2em;
}
.grid,
.grid2,
.grid3,
.grid4,
.grid5,
.grid6,
.grid7,
.grid8,
.grid9,
.grid10,
.grid11,
.grid12 {
  margin: 0 auto 20px auto;
}
.grid ul,
.grid2 ul,
.grid3 ul,
.grid4 ul,
.grid5 ul,
.grid6 ul,
.grid7 ul,
.grid8 ul,
.grid9 ul,
.grid10 ul,
.grid11 ul
.grid12 ul {
  list-style: none;
  position: relative;
}
.grid ul:after,
.grid2 ul:after,
.grid3 ul:after,
.grid4 ul:after,
.grid5 ul:after,
.grid6 ul:after,
.grid7 ul:after,
.grid8 ul:after,
.grid9 ul:after,
.grid10 ul:after,
.grid11 ul:after,
.grid12 ul:after {
  content: ' ';
  display: block;
  position: absolute;
  width: 2px;
  height: 100%;
  left: 20px;
  top: -10px;
  background: #000;
}
.grid ul li,
.grid2 ul li,
.grid3 ul li,
.grid4 ul li,
.grid5 ul li,
.grid6 ul li,
.grid7 ul li,
.grid8 ul li,
.grid9 ul li,
.grid10 ul li,
.grid11 ul li,
.grid12 ul li {
  position: relative;
}
.grid ul li:after,
.grid2 ul li:after,
.grid3 ul li:after,
.grid4 ul li:after,
.grid5 ul li:after,
.grid6 ul li:after,
.grid7 ul li:after,
.grid8 ul li:after,
.grid9 ul li:after,
.grid10 ul li:after,
.grid11 ul li:after,
.grid12 ul li:after {
  content: ' ';
  display: block;
  width: 20px;
  height: 2px;
  position: absolute;
  background: #000;
  left: -20px;
  top: 50%;
}
.grid ul li a,
.grid2 ul li a,
.grid3 ul li a,
.grid4 ul li a,
.grid5 ul li a,
.grid6 ul li a,
.grid7 ul li a,
.grid8 ul li a,
.grid9 ul li a,
.grid10 ul li a,
.grid11 ul li a,
.grid12 ul li a {
  display: block;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.4);
  color: #000;
  border-radius: 5px;
  background: #fff;
  padding: 0.3em;
  margin: 5px 0;
  text-align: center;
}
.grid .item,
.grid2 .item,
.grid3 .item,
.grid4 .item,
.grid5 .item,
.grid6 .item,
.grid7 .item,
.grid8 .item,
.grid9 .item,
.grid10 .item,
.grid11 .item,
.grid12 .item {
  width: 220px;
  margin-bottom: 1em;
}
.grid .item h3,
.grid2 .item h3,
.grid3 .item h3,
.grid4 .item h3,
.grid5 .item h3,
.grid6 .item h3,
.grid7 .item h3,
.grid8 .item h3,
.grid9 .item h3,
.grid10 .item h3,
.grid11 .item h3,
.grid12 .item h3 {
  width: 100%;
}
.grid .item h3 a,
.grid2 .item h3 a,
.grid3 .item h3 a,
.grid4 .item h3 a,
.grid5 .item h3 a,
.grid6 .item h3 a,
.grid7 .item h3 a,
.grid8 .item h3 a,
.grid9 .item h3 a,
.grid10 .item h3 a,
.grid11 .item h3 a,
.grid12 .item h3 a {
  display: block;
  text-align: center;
  background: #fff;
  color: #8b0000;
  border-radius: 5px;
  padding: 0.5em;
  border: 2px solid #f00;
  box-shadow: 1px 1px 2px rbga(#000, 0.8);
}
.grid .item h3 a:hover,
.grid2 .item h3 a:hover,
.grid3 .item h3 a:hover,
.grid4 .item h3 a:hover,
.grid5 .item h3 a:hover,
.grid6 .item h3 a:hover,
.grid7 .item h3 a:hover,
.grid8 .item h3 a:hover,
.grid9 .item h3 a:hover,
.grid10 .item h3 a:hover,
.grid11 .item h3 a:hover,
.grid12 .item h3 a:hover {
  text-decoration: none;
  color: #6f0000;
}
.grid.nocats .item,
.grid2.nocats .item,
.grid3.nocats .item,
.grid4.nocats .item,
.grid5.nocats .item,
.grid6.nocats .item,
.grid7.nocats .item,
.grid8.nocats .item,
.grid9.nocats .item,
.grid10.nocats .item,
.grid11.nocats .item,
.grid12.nocats .item {
  margin-bottom: 0;
}
.grid.nocats .item h3,
.grid2.nocats .item h3,
.grid3.nocats .item h3,
.grid4.nocats .item h3,
.grid5.nocats .item h3,
.grid6.nocats .item h3,
.grid7.nocats .item h3,
.grid8.nocats .item h3,
.grid9.nocats .item h3,
.grid10.nocats .item h3,
.grid11.nocats .item h3,
.grid12.nocats .item h3 {
  margin-bottom: 0;
  font-size: 1em;
}
.footer {
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: 40px;
  border-top: 1px solid #eee;
}
.jumbotron {
  background: none !important;
  text-align: center;
  background-color: transparent;
}
.jumbotron .btn {
  padding: 14px 24px;
  font-size: 21px;
}
h2 {
  font-size: 1.5em;
  position: relative;
}
h2:after {
  display: block;
  content: ' ';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  top: 100%;
  background: #f00;
}
h2 a {
  font-weight: 900;
  text-transform: uppercase;
  background: #f00;
  color: #fff;
  padding: 0.5em;
  border-radius: 5px;
  box-shadow: 0px 5px 0px #900;
}
h2 a:hover {
  text-decoration: none;
  color: #f2f2f2;
}
.nav-justified {
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.nav-justified > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 0;
  font-weight: bold;
  color: #777;
  text-align: center;
  background-color: #e5e5e5;
  background-image: gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
  background-image: linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e5e5e5 100%);
  background-repeat: repeat-x;
  border-bottom: 1px solid #d5d5d5;
}
.nav-justified > li:first-child > a {
  border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
  border-bottom: 0;
  border-radius: 0 0 5px 5px;
}
.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
  background-color: #ddd;
  background-image: none;
  box-shadow: inset 0 3px 7px rgba(0,0,0,0.15);
}
@media (min-width: 768px) {
  .nav-justified {
    max-height: 52px;
  }
  .nav-justified > li > a {
    border-right: 1px solid #d5d5d5;
    border-left: 1px solid #fff;
  }
  .nav-justified > li:first-child > a {
    border-left: 0;
    border-radius: 5px 0 0 5px;
  }
  .nav-justified > li:last-child > a {
    border-right: 0;
    border-radius: 0 5px 5px 0;
  }
}
@media screen and (min-width: 768px) {
  .footer {
    padding-right: 0;
    padding-left: 0;
  }
}
