#breeds {
  float: left;
  width: 100%;
}
#breeds h1 {
  color: #485D22;
  text-align: left;
}
#breeds ul.nav {
  border-bottom: #485D22 solid 1px;
  border-top: #485D22 solid 1px;
  float: left;
  width: 100%;
  margin: 1em 0;
}
#breeds ul.nav li {
  width: 100%;
  color: #485D22;
  border: none;
  background: none;
}
#breeds ul.nav li a {
  padding: 1em 1em 1em 0;
}
#breeds ul.nav li:hover {
  background: none;
}
#breeds ul.nav li:hover a {
  color: #485D22;
}
#breeds ul.nav li.active a {
  color: #485D22;
  font-weight: bold;
}
#breeds .breeds {
  float: left;
  width: calc(100% + 25px);
  margin-left: -12.5px;
}
#breeds .breed {
  width: calc(50% - 25px);
  padding-bottom: 50%;
  float: left;
  margin: 0 12.5px 25px;
  position: relative;
}
#breeds .breed img {
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}
#breeds .breed .hover {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(72,93,34,0.1);
  mix-blend-mode: multiply;
  background: rgba(72,93,34,0);
  background: -moz-linear-gradient(top,rgba(72,93,34,0) 40%,#485d22 80%,#485d22 100%);
  background: -webkit-linear-gradient(top,rgba(72,93,34,0) 40%,#485d22 80%,#485d22 100%);
  background: linear-gradient(to bottom,rgba(72,93,34,0) 40%,#485d22 80%,#485d22 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgba(72,93,34,0),endColorstr=#485d22,GradientType=1);
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}
#breeds .breed:hover img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}
#breeds .breed .img-load {
  width: 100%;
  float: left;
  height: 100%;
}
#breeds .breed h2 {
  padding: .5em;
  font-size: 1em;
  color: #FFFFFF;
  width: 100%;
  text-align: center;
  float: left;
  position: absolute;
  bottom: 0;
}
#breeds .detail {
  width: 100%;
  float: left;
}
#breeds .detail .img-load {
  width: 100%;
  position: relative;
  float: left;
  height: 15em;
  background: #eee;
  padding-bottom: 50%;
  margin: 0 25px 25px 0;
}
#breeds .detail h2 {
  font-size: 1.75em;
  color: #485D22;
  float: none;
}
#breeds .detail h3 {
  padding: 1em 0 .25em;
  font-size: 1.25em;
  color: #485D22;
}
#breeds .detail .content {
  line-height: 1.5em;
}
#breeds .detail .content p {
  float: none;
  clear: none;
}
#breeds .detail .breeding-target.desktop {
  display: none;
}
#breeds .detail .breeding-target.mobile {
  display: block;
}
#breeds .detail .breeding-target.mobile th {
  background: #485D22;
  color: #FFFFFF;
  border-left: #FFFFFF solid 2px;
}
#breeds .detail .breeding-target.mobile th:first-child {
  border-left: #485D22 solid 2px;
}
#breeds .detail .breeding-target.mobile th:last-child {
  border-right: #485D22 solid 2px;
}
#breeds .detail .breeding-target.mobile td {
  color: #485D22;
  border: #485D22 solid 2px;
}
#breeds img.desc {
  float: left;
}
@media only screen and (min-width: 568px) {
  #breeds ul.nav li {
    width: 33%;
  }
  #breeds .breed {
    width: calc(33% - 25px);
    padding-bottom: 33%;
  }
  #breeds .detail .breeding-target.mobile {
    display: none;
  }
  #breeds .detail .breeding-target.desktop {
    display: block;
  }
  #breeds .detail .breeding-target.desktop tr:first-child th {
    border-top: #485D22 solid 2px;
  }
  #breeds .detail .breeding-target.desktop th {
    background: #485D22;
    color: #FFFFFF;
    border-top: #FFFFFF solid 2px;
  }
  #breeds .detail .breeding-target.desktop th:last-child {
    border-bottom: #485D22 solid 2px;
  }
  #breeds .detail .breeding-target.desktop td {
    color: #485D22;
    border: #485D22 solid 2px;
    width: 4em;
  }
}
@media only screen and (min-width: 768px) {
  #breeds ul.nav {
    padding: .5em 0;
  }
  #breeds ul.nav li {
    width: 24%;
    display: inline-block;
  }
  #breeds ul.nav li a {
    padding: .5em 0;
  }
  #breeds .breed {
    width: calc(25% - 25px);
    padding-bottom: 25%;
  }
  #breeds .detail .img-load {
    width: calc(40% - 12.5px);
    padding-bottom: 40%;
  }
}
@media only screen and (min-width: 1200px) {
  #breeds .breed {
    width: calc(20% - 25px);
    padding-bottom: 20%;
  }
  #breeds .detail .img-load {
    width: calc(33% - 12.5px);
    padding-bottom: 33%;
  }
}