.episodeWrap{
  margin-top: 5em
}
#wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
#container-mas{
  width: 100%;
  position: relative;
}
.item {
  margin: 0.5%;
  width: 32%;
  overflow: hidden;
  border-radius: 15px;
}
.item img {
  width: 100%;
}
.item a .overlay{
  opacity: 0
}
.item a:hover .overlay{
  opacity: 1;
}
.item a .overlay p{
  color: #000;
}
.item a .overlay p.readEpi{
  background: #a17623;
  color: #fff;
  bottom: 0;
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 1rem;
  box-shadow: 0px 3px 6px #00000099;
}
.item .overlay{
  background: #51318f99;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s 0.2s ease-in;

}

.epimodal .modal-dialog{
  max-width: 640px;
}
.epimodal .modal-header .close{
  right: 5px;
  top: -5px;
  font-size: 3.5rem;
  color: #51318f;
}
.epimodal .modal-content .modal-body{
  margin-bottom: 0;
  padding-bottom: 0;
}
.epimodal .modal-body .modal-title{
  margin-top: 1rem;
}

.epimodal .modal-body .penname{
  text-align: right;
  font-size: 1em;
  color: #999;
}
.epimodal .modal-content .modal-footer button{
  background-color: #51318f;
}

.navigation{
  text-align: center;
  margin-top: 3em;
}

.navigation a{
  background: #51318f;
  display: block;
  width: 80%;
  margin: auto;
  color: #fff;
  font-size: 1rem;
  padding: 0.25rem;
}

.navigation a:hover{
  opacity: 0.6;
  text-decoration: none;
}

#infscr-loading{
  text-align: center;
  margin-top: 2rem;
}
#infscr-loading em{
  color: #898989;
}

@media (max-width: 767px) {

  .item {
    margin: 0.5%;
    width: 48%;
    overflow: hidden;
    border-radius: 5px;
  }

  .epimodal .modal-header .close{
    color: #51318f !important;
    top: -0.75rem !important;
    right: 0.15rem !important;
  }
  .epimodal .modal-title{
    color: #000;
    font-weight: normal !important;
    font-size: 1.1em;
  }
  .epimodal .modal-body .penname{
    font-size: 0.95rem;
  }
  .navigation{
    margin-top: 2em;
  }
  .navigation a{
    width: 95%;
  }
}