.issueList h1 {
  padding: 30px 0;
}

.collection {
  display: grid;
  grid-template-columns: 270px auto;
}

.collection h3 {
  font-family: Tyrs, Arial, Helvetica, sans-serif;
  color: #000;
  font-size: 1.5rem;
  margin: 0;
  padding: 0 20px;
}

.collection .packshot {
  grid-row-start: 1;
  grid-row-end: 3;
}

.collection .packshot img {
  width: 240px;
  margin: 0 auto;
}

.collection .inner {
  padding: 0 20px;
}

.text {
  font-family: "Work Sans", sans-serif;
}

.issues {
  display: grid;
  grid-column-gap: 20px;
  grid-template-columns: 50% auto;
  width: 100%;
}

.issue {
  display: grid;
  grid-template-columns: 190px auto;
}

.issueRelated {
  padding-right: 30px;
}

.issueRelated h3, .issuesHeading h3 {
  font-family: Tyrs, Arial, Helvetica, sans-serif;
  color: #000;
}

.issueRelated a {
  color: #E40521;
  text-decoration: underline;
}

.issuesHeading {
  padding-bottom: 15px;
}

.issue .content {
  grid-row-start: 2;
  grid-row-end: 4;
}

.issue .packshot {
  width: 100%;
  grid-row-start: 1;
  grid-row-end: 3;
}

.issue .packshot img {
  width: 80%;
}

.issue h3 {
  font-family: Tyrs, Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  color: #000;
}

.issue .actions span {
  font-size: 16pt;
  display: block;
}

.issue .actions .button {
  margin: 0;
  font-family: Tyrs, Arial, Helvetica, sans-serif;
  background: #E40521;
  color: #fff;
}

.purchase {
  display: flex;
  flex-direction: row;
}

.purchase .address {
  width: 45%;
  margin: 30px 0;
}
.purchase .address h3 {
  margin: 15px 0;
}

.formItem label {
  font-family: "Work Sans", sans-serif;
}

.purchase label {
  width: 140px;
}

.purchase input, .purchaseItem input, input.order {
  font-family: "Work Sans", sans-serif;
  border: 1px solid #000;
  background: #fff;
  padding: 2px 5px;
}

input.order {
  padding: 7px 5px;
}

.order.price {
  font-family: Tyrs, Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  color: #000;
}

.actions {
  margin: 30px 0;
}

.purchaseItems {
  width: 100%;
  font-family: "Work Sans", sans-serif;
  font-size: 10pt;
}
.purchaseItem {
  display: grid;
  grid-template-columns: auto 15% 12% 12% 12% 10%;
  border-bottom: 1px solid #bbb;
  padding: 10px 0;
}

.purchaseItemSummary {
  display: grid;
  grid-template-columns: auto 15% 15% 15% 15%;
  border-bottom: 1px solid #bbb;
  padding: 10px 0;
}

.paymentChoice {
  margin-bottom: 25px;
  font-size: 12pt;
}

.paymentChoice div {
  padding: 2px 0;
}

.requiredLabel input {
  border: 2px solid #000;
}
.requiredLabel label, label.required {
  font-weight: bold;
}
.requiredLabel label:after, label.required:after {
  content: '*';
}

.formItem select, .delivery select {
  border: 1px solid #000;
  background: #fff;
  width: 190px;
  padding: 4px 0px;
}

.button {
  padding: 7px 20px;
  margin: 2px 10px;
  font-size: 16pt;
  font-family: Tyrs, Arial, Helvetica, sans-serif;
}

a.button, a.button:hover {
  text-decoration: none;
}

.button.red {
  background: #E40521;
  color: #fff;
}

.button.outlined {
  border: 1px solid #E40521;
  color: #E40521;
}

.center {
  text-align: center;
}

.page.empty {
  min-height: 300px;
}

#purchase_save {
  display: none;
}

.right {
  text-align: right;
}

.formItem ul {
  list-style: none;
  margin: -10px 0 0 0;
  padding: 0 0 10px 0;
}

.formItem li {
  font-family: "Work Sans", sans-serif;
  font-size: 9pt;
  color: #E40521;
  text-align: center;
}

.terms label {
  display: inline;
}

.terms li {
  margin: 7px 0;
  text-align: left;
}

.address div {
  font-family: "Work Sans", sans-serif;
  border-bottom: 1px solid #dddddd;
}

.address strong {
  display: inline-block;
  width: 150px;
}

.hidden {
  display: none;
}

.page.archive {
  padding: 5px 0;
}

.marginTop {
  margin-top: 20px;
}

.page.archive h4 {
  font-size: 13pt;
  margin: 0;
}

.page.archive div {
  margin: 0;
  padding: 0;
}

.page ul {
  font-family: "Work Sans", sans-serif;
  list-style: inherit;
}

.page ol {
  font-family: "Work Sans", sans-serif;
  list-style-type: decimal;
}

.flexWrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flexItem {
  flex: 0 45%;
  padding: 20px 0;
}

.flexItemWide {
  flex: 0 99%;
  padding: 20px 0;
}

.flexItemNarrow {
  flex: 0 24%;
  padding: 20px 0;
}

.video {
  padding: 20px;
}

.video iframe {
  width: 420px;
  height: 280px;
}

a.buy {
  display: inline-block;
  border: 1px solid #000;
  padding: 1px 3px;
}

.buy:hover {
  text-decoration: none;
}

.currentIssues a {
  display: block;
  padding: 1px 0;
  font-size: 13px;
}

.currentIssues div.img {
  width: 50%;
  margin: 0 auto;
}

.currentIssues img {
  width: 100%;
}

.archiveLink {
  font-family: Tyrs, Arial, Helvetica, sans-serif !important;
}

.pagePadding {
  margin: 25px 0;
}

.collectionOrder h5 {
  font-family: Tyrs, Arial, Helvetica, sans-serif;
}

.collectionOrder {
  line-height: 30px;
  color: #000 !important;
}

.collectionOrder label {
  width:360px;
}

.collectionOrder .button {
  margin: 0;
  font-family: Tyrs, Arial, Helvetica, sans-serif;
  background: #E40521;
  color: #fff;
}

.collectionOrder select {
  line-height: 25pt;
  height: 25pt;
  border: 1px solid #000;
  background: none;
  outline: none;
}

.hideMe {
  display: none;
}

.additionalInfo {
  display: none;
}

.hideMe:checked ~ .additionalInfo {
  display: block;
}

.hideMe:checked ~ label {
  display: none;
}

.readMore {
  text-decoration: underline;
  color: #E40521;
}

.issueTitle {
  font-family: Tyrs, Arial, Helvetica, sans-serif;
  color: #000;
  font-size: 1.1rem;
}

.archiveList {
  padding: 0 0 15px 0;
  display: grid;
  grid-template-columns: 90px auto;
  grid-gap: 5px;
}

.archiveList a {
  display: block;
  color: rgb(112, 112, 112) !important;
}

.archiveList a:first-child {
  grid-row-start: 1;
  grid-row-end: 6;
}

.archiveList img {
  max-height: 100px;
}

.modalBox {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  min-width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modalBox .inner {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: auto;
  max-width: 100%;
  text-align: center;
  overflow: hidden;
}

.modalBox .close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.modalBox .close:hover,
.modalBox .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

@media screen and (max-width:820px) {
  .purchase .address {
    width: 100%;
  }
  .flexItem, .flexItemNarrow, .flexItemWide {
    flex: 0 100%;
    padding: 2px;
  }
  .video iframe {
    width: 100%;
    margin: 25px auto;
    height: auto;
  }
  .collection {
    display: grid;
    grid-template-columns: auto;
  }

  .collection h3 {
    font-family: Tyrs, Arial, Helvetica, sans-serif;
    color: #000;
    font-size: 1.5rem;
  }

  .collection .packshot img {
    width: 180px;
    margin: 20px auto;
  }

  .collection .inner {
    padding: 0;
    width: 90%;
  }

  .collection h3 {
    padding: 0;
  }
  .collection .packshot {
    grid-row-start: 2;
    grid-row-end: 3;
    text-align: center;
  }

  .issues {
    display: grid;
    grid-column-gap: 0;
    grid-template-columns: auto;
    width: 100%;
  }

  .issue {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .issueRelated {
    padding-right: 0;
  }

  .issue .content {
    width: 100%;
  }

  .issue .packshot {
    width: 100%;
    flex: 0 0;
    margin: 20px 0;
    display: block;
    text-align: center;
  }
  .issue .packshot img {
    width: 150px;
    margin: 20px 0;
  }
  .purchase {
    display: flex;
    flex-direction: column;
  }
  .purchase .address {
    width: 100%;
    margin: 15px 0;
  }
  .actions a {
    display: block;
    margin: 10px auto;
  }
  .formItem ul {
    margin: 10px 0;
    text-align: left;
  }

  .purchase em {
    font-family: "Work Sans", sans-serif;
  }

  .purchaseItem {
    grid-template-columns: auto 35%;
    padding: 10px 0;
  }
  .line2 {
    grid-column-start: 2;
    grid-column-end: 3;
  }
  .line3 {
    grid-column-start: 2;
    grid-column-end: 3;
  }

  .purchaseItemSummary {
    grid-template-columns: auto 30% 30%;
    padding: 10px 0;
  }
  .hideMobile {
    display: none;
  }
  .rightMobile {
    text-align: right;
  }

  .archiveList {
    padding: 0 0 15px 0;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 5px;
  }

  .archiveList a:first-child {
    grid-row-start: 1;
    grid-row-end: 1;
  }

  .archiveList img {
    max-height: 130px;
  }

  .modalBox .inner img {
    max-width: 100%;
  }
}