.page.magazinearchive .content {
  width: 100%;
  height: auto;
  background: #fff;
  max-width: 1600px;
  margin: auto;
  padding-top: 160px;
  padding-bottom: 100px;
  margin-bottom: 100px;
}
@media only screen and (max-width: 620px) {
  .page.magazinearchive .content {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media only screen and (min-width: 769px) {
  .page.magazinearchive .content {
    padding-top: 200px;
  }
}
@media only screen and (min-width: 1025px) {
  .page.magazinearchive .content {
    padding-top: 295px;
  }
}
.page.magazinearchive .content div[role="year-archive"] {
  position: relative;
  margin-top: 80px;
}
@media only screen and (min-width: 1025px) {
  .page.magazinearchive .content div[role="year-archive"] {
    margin-top: 210px;
  }
}
.page.magazinearchive .content div[role="year-archive"]:first-child {
  margin-top: 0px;
}
.page.magazinearchive .content div[role="year-archive"] h3 {
  width: 100%;
  z-index: 0;
  color: #f4f4f4;
  position: absolute;
  font-size: 180px;
  text-align: center;
  pointer-events: none;
  will-change: transform;
  top: -60px;
}
@media only screen and (min-width: 1025px) {
  .page.magazinearchive .content div[role="year-archive"] h3 {
    top: -120px;
  }
}
.page.magazinearchive .content div[role="year-archive"] menu {
  width: 100%;
  clear: both;
  z-index: 1;
  display: table;
  margin-bottom: 20px;
  text-align: center;
}
.page.magazinearchive .content div[role="year-archive"] menu button {
  width: calc(50% - 20px);
  display: inline-block;
  padding: 10px;
  position: relative;
  border: 1px solid #f4f4f4;
  margin-right: 20px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 769px) {
  .page.magazinearchive .content div[role="year-archive"] menu button {
    padding: 20px;
  }
}
@media only screen and (max-width: 1280px) {
  .page.magazinearchive .content div[role="year-archive"] menu button:nth-child(even) {
    margin-right: 0px;
  }
}
@media only screen and (min-width: 1280px) {
  .page.magazinearchive .content div[role="year-archive"] menu button {
    width: calc(25% - 30px);
    margin-right: 40px;
    margin-bottom: 40px;
  }
}
@media only screen and (min-width: 1280px) {
  .page.magazinearchive .content div[role="year-archive"] menu button {
    will-change: border;
    -webkit-transition: border 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: border 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: border 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -ms-transition: border 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    transition: border 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .page.magazinearchive .content div[role="year-archive"] menu button img {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    will-change: transform;
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: -moz-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: -o-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -ms-transition: -ms-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .page.magazinearchive .content div[role="year-archive"] menu button h2 {
    will-change: transform;
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: -moz-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: -o-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -ms-transition: -ms-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .page.magazinearchive .content div[role="year-archive"] menu button:hover {
    border: 1px solid #dcdcdc;
  }
  .page.magazinearchive .content div[role="year-archive"] menu button:hover h2 {
    -webkit-transform: translateY(-4px);
    -moz-transform: translateY(-4px);
    -o-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  .page.magazinearchive .content div[role="year-archive"] menu button:hover img {
    -webkit-transform: scale(0.99, 0.99);
    -moz-transform: scale(0.99, 0.99);
    -o-transform: scale(0.99, 0.99);
    -ms-transform: scale(0.99, 0.99);
    transform: scale(0.99, 0.99);
  }
}
.page.magazinearchive .content div[role="year-archive"] menu button:last-child {
  clear: right;
  margin-right: 0px;
}
.page.magazinearchive .content div[role="year-archive"] menu button img {
  width: 100%;
  height: auto;
}
.page.magazinearchive .content div[role="year-archive"] menu button h2 {
  text-align: center;
  margin-top: 10px;
}
@media only screen and (min-width: 769px) {
  .page.magazinearchive .content div[role="year-archive"] menu button h2 {
    margin-top: 20px;
    padding-bottom: 10px;
  }
}
.page.magazinearchive .content div[role="year-archive"] menu icon {
  display: block;
  width: 40px;
  height: 40px;
  background: #fff;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  position: absolute;
  z-index: 2;
  left: 0px;
  bottom: 70px;
  right: 0px;
  margin: auto;
}
@media only screen and (min-width: 769px) {
  .page.magazinearchive .content div[role="year-archive"] menu icon {
    left: auto;
    bottom: auto;
    right: 40px;
    top: 40px;
  }
}
#magazine-archive-details {
  overflow-y: auto;
}
#magazine-archive-details.show {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
#magazine-archive-details div[content-outer],
.magazineissue {
  margin: auto;
  max-width: 500px;
  width: 100%;
  background: #fff;
  margin-top: 100px;
  padding: 0px 10px;
  padding-bottom: 50px;
}
#magazine-archive-details div[content-outer] .top,
.magazineissue .top {
  position: relative;
  display: table;
  width: 100%;
}
#magazine-archive-details div[content-outer] .top h3,
.magazineissue .top h3 {
  font-size: 200px;
  width: 100%;
  text-align: center;
  color: #f4f4f4;
}
#magazine-archive-details div[content-outer] .top h1,
.magazineissue .top h1 {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #3b3b3b;
}
#magazine-archive-details div[content-outer] section.outlined-box,
.magazineissue section.outlined-box {
  margin-top: 50px;
  padding: 30px 20px 10px 20px;
}
@media only screen and (min-width: 769px) {
  #magazine-archive-details div[content-outer] section.outlined-box,
  .magazineissue section.outlined-box {
    padding: 50px 40px 20px 40px;
  }
}
@media only screen and (min-width: 769px) {
  #magazine-archive-details div[content-outer] section.outlined-box[role="complete-download"],
  .magazineissue section.outlined-box[role="complete-download"] {
    padding: 50px 40px 40px 40px;
  }
}
#magazine-archive-details div[content-outer] section.outlined-box[role="complete-download"] .issue-button,
.magazineissue section.outlined-box[role="complete-download"] .issue-button {
  border: none;
  background: #3b3b3b;
  -webkit-border-radius: 25px;
  border-radius: 25px;
}
#magazine-archive-details div[content-outer] section.outlined-box[role="complete-download"] .issue-button h3,
.magazineissue section.outlined-box[role="complete-download"] .issue-button h3 {
  color: #dddede;
}
#magazine-archive-details div[content-outer] section.outlined-box[role="complete-download"] .issue-button div[right] line,
.magazineissue section.outlined-box[role="complete-download"] .issue-button div[right] line {
  background: #6f6f6f;
}
#magazine-archive-details div[content-outer] section.outlined-box[role="complete-download"] .issue-button div[right] svg *,
.magazineissue section.outlined-box[role="complete-download"] .issue-button div[right] svg * {
  fill: #dddede;
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-part,
.magazineissue section.outlined-box .issue-part {
  overflow: hidden;
  width: 100%;
  height: 50px;
  border: 1px solid #e8e8e8;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  margin-bottom: 20px;
  will-change: height;
  -webkit-transition: height 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: height 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: height 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -ms-transition: height 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: height 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
@media only screen and (min-width: 769px) {
  #magazine-archive-details div[content-outer] section.outlined-box .issue-part,
  .magazineissue section.outlined-box .issue-part {
    margin-bottom: 30px;
  }
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-part.expanded .issue-content,
.magazineissue section.outlined-box .issue-part.expanded .issue-content {
  border-top: 1px solid #e8e8e8;
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-part.expanded .issue-button button,
.magazineissue section.outlined-box .issue-part.expanded .issue-button button {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-part .issue-content,
.magazineissue section.outlined-box .issue-part .issue-content {
  border-top: 1px solid transparent;
  text-align: center;
  padding: 30px 0px;
  will-change: border-top;
  -webkit-transition: border-top 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: border-top 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: border-top 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -ms-transition: border-top 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: border-top 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  color: #3b3b3b;
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-part .issue-content strong,
.magazineissue section.outlined-box .issue-part .issue-content strong {
  margin-bottom: 10px;
  display: block;
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-part .issue-content p,
.magazineissue section.outlined-box .issue-part .issue-content p {
  white-space: pre;
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-button,
.magazineissue section.outlined-box .issue-button {
  padding: 10px 20px;
  height: 50px;
  width: 100%;
  line-height: 30px;
  clear: both;
  display: block;
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-button h3,
.magazineissue section.outlined-box .issue-button h3 {
  padding-left: 10px;
  float: left;
  color: #6f6f6f;
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-button div[right],
.magazineissue section.outlined-box .issue-button div[right] {
  float: right;
  margin-top: 5px;
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-button div[right] > *,
.magazineissue section.outlined-box .issue-button div[right] > * {
  float: left;
  display: block;
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-button div[right] > *:last-child,
.magazineissue section.outlined-box .issue-button div[right] > *:last-child {
  clear: right;
  margin-right: 0px;
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-button div[right] a,
.magazineissue section.outlined-box .issue-button div[right] a {
  position: relative;
  width: 20px;
  height: 20px;
  margin-right: 15px;
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-button div[right] a:after,
.magazineissue section.outlined-box .issue-button div[right] a:after {
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-button div[right] a svg:nth-child(2),
.magazineissue section.outlined-box .issue-button div[right] a svg:nth-child(2) {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 2px;
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
}
@media only screen and (min-width: 1025px) {
  #magazine-archive-details div[content-outer] section.outlined-box .issue-button div[right] a svg,
  .magazineissue section.outlined-box .issue-button div[right] a svg {
    will-change: transform;
  }
  #magazine-archive-details div[content-outer] section.outlined-box .issue-button div[right] a:hover svg,
  .magazineissue section.outlined-box .issue-button div[right] a:hover svg {
    -webkit-animation: animateToDown 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -moz-animation: animateToDown 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -o-animation: animateToDown 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -ms-animation: animateToDown 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    animation: animateToDown 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  }
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-button div[right] a svg,
.magazineissue section.outlined-box .issue-button div[right] a svg {
  width: 15px;
  height: 13px;
  display: block;
  margin-top: 3px;
  margin-left: 3px;
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-button div[right] a svg *,
.magazineissue section.outlined-box .issue-button div[right] a svg * {
  fill: #6f6f6f;
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-button div[right] line,
.magazineissue section.outlined-box .issue-button div[right] line {
  width: 1px;
  height: 14px;
  -webkit-transform: translateY(3px);
  -moz-transform: translateY(3px);
  -o-transform: translateY(3px);
  -ms-transform: translateY(3px);
  transform: translateY(3px);
  background: #e8e8e8;
  margin-right: 10px;
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-button div[right] button,
.magazineissue section.outlined-box .issue-button div[right] button {
  position: relative;
  width: 20px;
  height: 20px;
  overflow: hidden;
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-button div[right] button:after,
.magazineissue section.outlined-box .issue-button div[right] button:after {
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
}
@media only screen and (min-width: 1025px) {
  #magazine-archive-details div[content-outer] section.outlined-box .issue-button div[right] button svg,
  .magazineissue section.outlined-box .issue-button div[right] button svg {
    will-change: transform;
  }
  #magazine-archive-details div[content-outer] section.outlined-box .issue-button div[right] button:hover svg,
  .magazineissue section.outlined-box .issue-button div[right] button:hover svg {
    -webkit-animation: animateToDown 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -moz-animation: animateToDown 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -o-animation: animateToDown 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -ms-animation: animateToDown 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    animation: animateToDown 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  }
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-button div[right] button svg,
.magazineissue section.outlined-box .issue-button div[right] button svg {
  width: 10px;
  height: 7px;
}
#magazine-archive-details div[content-outer] section.outlined-box .issue-button div[right] button svg *,
.magazineissue section.outlined-box .issue-button div[right] button svg * {
  fill: #6f6f6f;
}