/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
b { font-weight: bolder; }
/* coming soon styles */
.coming-soon-page .header {
  position: relative;
  width: 100%;
  height: 80px;
}
.coming-soon-page .header .logo {
  position: relative;
  z-index: 1;
  height: 60px;
  background-color: white;
  padding: 10px;
}
@media screen and (min-width: 700px) {
  .coming-soon-page .header .logo {
    height: 100px;
    padding: 20px;
  }
}
.coming-soon-page .spacer {
  height: 20px;
}
.coming-soon-page .chunk {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin: auto;
}
.coming-soon-page .chunk .winter {
  align-self: flex-start;
  width: 55%;
  padding-bottom: 10%;
}
.coming-soon-page .chunk .fitness {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55%;
}
.coming-soon-page .chunk .coming-soon-text {
  position: absolute;
  left: 40%;
  font-size: 10vw;
  margin-top: 5%;
}
@media screen and (min-width: 1200px) {
  .coming-soon-page .chunk .coming-soon-text {
    font-size: 120px;
  }
}
.coming-soon-page .chunk .description-text {
  position: absolute;
  width: 39%;
  padding: 0 3%;
  right: 0;
  top: 35%;
  font-size: 2vw;
}
@media screen and (min-width: 1200px) {
  .coming-soon-page .chunk .description-text {
    font-size: 16px;
  }
}
.coming-soon-page .chunk .insta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}
.coming-soon-page .chunk .insta .left-line,
.coming-soon-page .chunk .insta .right-line {
  border-top: 1px solid #999;
  width: 47%;
  height: 0;
}
.coming-soon-page .chunk .insta .icon-holder {
  height: 24px;
  width: 24px;
  padding: 8px;
}
.coming-soon-page .chunk .insta .icon-holder svg {
  width: 24px;
  height: 24px;
}
.coming-soon-page .chunk .left {
  float: left;
  width: 47%;
}
.coming-soon-page .chunk .right {
  float: right;
  width: 47%;
}
.coming-soon-page .chunk .left img,
.coming-soon-page .chunk .right img {
  width: 100%;
}
.coming-soon-page .chunk .cta {
  position: absolute;
  padding: 5px 20px;
  font-size: 16px;
  color: black;
  background-color: white;
  line-height: 28px;
}
.coming-soon-page .chunk .cta.kat {
  text-align: right;
  top: 50px;
  padding-left: 0;
}
.coming-soon-page .chunk .cta.kim {
  bottom: 40px;
  text-align: left;
  right: 0;
  padding-right: 0;
}
.coming-soon-page .chunk .cta .follow {
  font-weight: bold;
}
@media screen and (min-width: 700px) {
  .coming-soon-page .chunk {
    max-width: 1200px;
  }
}
.footer-holder {
  padding: 15px 0;
  background-color: #eee;
  color: black;
  width: 100%;
}
.footer {
  width: 100%;
  display: grid;
  max-width: 1000px;
  margin: auto;
  grid-template: 1fr 1fr 1fr 1fr / 1fr;
}
.footer .social-icons,
.footer .logo-holder,
.footer .about-contact,
.footer .copyright {
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.footer .social-icons {
  order: 1;
}
.footer .logo-holder {
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer .logo-holder .logo {
  height: 30px;
}
.footer .about-contact {
  order: 2;
}
.footer .about-contact .spacer {
  display: inline-block;
  width: 15px;
}
.footer .copyright {
  order: 3;
}
@media screen and (min-width: 600px) {
  .footer {
    grid-template: 1fr 1fr / 1fr 1fr 1fr;
  }
  .footer .social-icons,
  .footer .logo-holder,
  .footer .about-contact,
  .footer .copyright {
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .footer .social-icons {
    grid-area: 1 / 1 / 2 / 2;
  }
  .footer .logo-holder {
    grid-area: 1 / 2 / 2 / 3;
  }
  .footer .logo-holder .logo {
    height: 30px;
  }
  .footer .about-contact {
    grid-area: 1 / 3 / 2 / 4;
  }
  .footer .about-contact .spacer {
    display: inline-block;
    width: 15px;
  }
  .footer .copyright {
    grid-area: 2 / 2 / 3 / 3;
  }
}
a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  -moz-transition: color 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: color 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transition: color 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: color 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  color: #000 !important;
  font-weight: 600;
}
a:hover {
  text-decoration: underline;
}
a.no-bold {
  font-weight: normal;
}
a.no-link-style {
  font-weight: normal;
}
a.no-link-style:hover {
  text-decoration: none;
}
html body div,
html body span,
html body applet,
html body object,
html body iframe,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body p,
html body blockquote,
html body pre,
html body a,
html body abbr,
html body acronym,
html body address,
html body big,
html body cite,
html body code,
html body del,
html body dfn,
html body em,
html body img,
html body ins,
html body kbd,
html body q,
html body s,
html body samp,
html body small,
html body strike,
html body strong,
html body sub,
html body sup,
html body tt,
html body var,
html body b,
html body u,
html body i,
html body center,
html body dl,
html body dt,
html body dd,
html body ol,
html body ul,
html body li,
html body fieldset,
html body form,
html body label,
html body legend,
html body table,
html body caption,
html body tbody,
html body tfoot,
html body thead,
html body tr,
html body th,
html body td,
html body article,
html body aside,
html body canvas,
html body details,
html body embed,
html body figure,
html body figcaption,
html body footer,
html body header,
html body hgroup,
html body main,
html body menu,
html body nav,
html body output,
html body ruby,
html body section,
html body summary,
html body time,
html body mark,
html body audio,
html body video {
  font-family: 'futura-pt';
  color: #111;
}
html body div.title,
html body span.title,
html body applet.title,
html body object.title,
html body iframe.title,
html body h1.title,
html body h2.title,
html body h3.title,
html body h4.title,
html body h5.title,
html body h6.title,
html body p.title,
html body blockquote.title,
html body pre.title,
html body a.title,
html body abbr.title,
html body acronym.title,
html body address.title,
html body big.title,
html body cite.title,
html body code.title,
html body del.title,
html body dfn.title,
html body em.title,
html body img.title,
html body ins.title,
html body kbd.title,
html body q.title,
html body s.title,
html body samp.title,
html body small.title,
html body strike.title,
html body strong.title,
html body sub.title,
html body sup.title,
html body tt.title,
html body var.title,
html body b.title,
html body u.title,
html body i.title,
html body center.title,
html body dl.title,
html body dt.title,
html body dd.title,
html body ol.title,
html body ul.title,
html body li.title,
html body fieldset.title,
html body form.title,
html body label.title,
html body legend.title,
html body table.title,
html body caption.title,
html body tbody.title,
html body tfoot.title,
html body thead.title,
html body tr.title,
html body th.title,
html body td.title,
html body article.title,
html body aside.title,
html body canvas.title,
html body details.title,
html body embed.title,
html body figure.title,
html body figcaption.title,
html body footer.title,
html body header.title,
html body hgroup.title,
html body main.title,
html body menu.title,
html body nav.title,
html body output.title,
html body ruby.title,
html body section.title,
html body summary.title,
html body time.title,
html body mark.title,
html body audio.title,
html body video.title {
  font-family: 'adobe-caslon-pro';
  font-weight: normal;
}
html body div.title.bold,
html body span.title.bold,
html body applet.title.bold,
html body object.title.bold,
html body iframe.title.bold,
html body h1.title.bold,
html body h2.title.bold,
html body h3.title.bold,
html body h4.title.bold,
html body h5.title.bold,
html body h6.title.bold,
html body p.title.bold,
html body blockquote.title.bold,
html body pre.title.bold,
html body a.title.bold,
html body abbr.title.bold,
html body acronym.title.bold,
html body address.title.bold,
html body big.title.bold,
html body cite.title.bold,
html body code.title.bold,
html body del.title.bold,
html body dfn.title.bold,
html body em.title.bold,
html body img.title.bold,
html body ins.title.bold,
html body kbd.title.bold,
html body q.title.bold,
html body s.title.bold,
html body samp.title.bold,
html body small.title.bold,
html body strike.title.bold,
html body strong.title.bold,
html body sub.title.bold,
html body sup.title.bold,
html body tt.title.bold,
html body var.title.bold,
html body b.title.bold,
html body u.title.bold,
html body i.title.bold,
html body center.title.bold,
html body dl.title.bold,
html body dt.title.bold,
html body dd.title.bold,
html body ol.title.bold,
html body ul.title.bold,
html body li.title.bold,
html body fieldset.title.bold,
html body form.title.bold,
html body label.title.bold,
html body legend.title.bold,
html body table.title.bold,
html body caption.title.bold,
html body tbody.title.bold,
html body tfoot.title.bold,
html body thead.title.bold,
html body tr.title.bold,
html body th.title.bold,
html body td.title.bold,
html body article.title.bold,
html body aside.title.bold,
html body canvas.title.bold,
html body details.title.bold,
html body embed.title.bold,
html body figure.title.bold,
html body figcaption.title.bold,
html body footer.title.bold,
html body header.title.bold,
html body hgroup.title.bold,
html body main.title.bold,
html body menu.title.bold,
html body nav.title.bold,
html body output.title.bold,
html body ruby.title.bold,
html body section.title.bold,
html body summary.title.bold,
html body time.title.bold,
html body mark.title.bold,
html body audio.title.bold,
html body video.title.bold {
  font-weight: bolder;
}
body {
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
}
h2 {
  font-weight: 600;
  font-size: 44px;
  margin: 1rem;
}
.primary {
  font-size: 32px;
}
.bold {
  font-weight: 600;
}
.black {
  color: black;
}
.home {
  width: 100%;
}
.home .load-more {
  width: 100%;
  color: white;
  background-color: black;
  height: 40px;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+/Edge */
  user-select: none;
  /* Standard */
  cursor: pointer;
}
@media screen and (min-width: 700px) {
  .home .load-more {
    width: calc(100% - 10px);
  }
}
.post-body {
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.post-body img {
  width: 100%;
  padding: 5px 0;
}
.post-body p,
.post-body div {
  width: 100%;
  line-height: calc(18px * 1.5);
  font-size: 18px;
}
.post-body p {
  padding: 10px;
}
.post-body .center {
  text-align: center;
}
.post-body .title {
  font-weight: bold;
  padding-top: 45px;
}
.post-body .spc-10 {
  padding-top: 10px;
}
.post-body .pad-10 {
  padding-top: 10px;
}
.post-body .pad-20 {
  padding-top: 20px;
}
.post-body .pad-30 {
  padding-top: 30px;
}
.post-body .pad-40 {
  padding-top: 40px;
}
@media screen and (min-width: 700px) {
  .post-body {
    width: 100%;
  }
  .post-body img {
    width: calc(100% - 30px);
    padding: 15px;
  }
  .post-body img.left {
    width: calc(50% - 30px);
  }
  .post-body img.right {
    width: calc(50% - 30px);
  }
  .post-body img.half {
    width: calc(50% - 30px);
  }
  .post-body img.third {
    width: calc(33.33% - 30px);
  }
  .post-body img.quarter {
    width: calc(25% - 30px);
  }
  .post-body p {
    width: 700px;
  }
  .post-body p.full {
    width: 100%;
  }
}
@media screen and (min-width: 1000px) {
  .post-body {
    width: 1000px;
  }
}
/*
z-indexes:

#everything {
  1
  .header:   10
  .menu:     7
  .blackout: 5
*/
/*** HEADER STYLES ***/
.header-container {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 40px;
}
@media screen and (min-width: 700px) {
  .header-container {
    height: 80px;
  }
}
.header {
  background-color: white;
  height: 40px;
  width: 100%;
  text-align: center;
  position: relative;
}
.header .container {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header .icon-container {
  justify-content: space-between;
}
.header .logo-holder {
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 0 20px;
}
.header .logo {
  height: 20px;
}
.header .icon {
  z-index: 1;
  color: #000;
  margin: -5px;
}
@media screen and (min-width: 600px) {
  .header {
    height: 80px;
  }
  .header .icon-container {
    justify-content: flex-end;
  }
  .header .logo-holder {
    height: 80px;
  }
  .header .icon:last-child {
    margin-right: 20px;
  }
}
.shifted-for-header {
  min-height: calc(100vh - 40px - 104px);
  margin: auto;
  margin-top: 40px;
}
@media screen and (min-width: 600px) {
  .shifted-for-header {
    margin-top: 80px;
    min-height: calc(100vh - 80px - 104px);
  }
}
@media screen and (min-width: 1000px) {
  .shifted-for-header {
    min-height: calc(100vh - 80px - 60px);
  }
}
/*** END HEADER STYLES ***/
.blackout {
  position: fixed;
  top: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
}
.search {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search .container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.search .prompt {
  font-size: 12px;
  color: white;
  text-align: center;
}
.search input {
  position: relative;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 20px 0;
  width: 100%;
  max-width: 700px;
  text-align: center;
  font-size: 72px;
  color: white;
}
.search input:focus {
  outline: none;
}
#everything {
  position: relative;
  z-index: 1;
}
#everything #main {
  position: relative;
}
#screen-sizer {
  position: absolute;
  left: -10000px;
  top: -10000px;
  width: 100vw;
  height: 100vh;
}
#window-sizer {
  position: absolute;
  left: -10000px;
  top: -10000px;
  width: 100%;
}
.social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.social-icons .icon {
  margin: 6px;
  height: 24px;
  width: 24px;
}
.social-icons .icon svg {
  fill: #000;
  height: 24px;
  width: 24px;
}
.social-icons .icon img {
  height: 24px;
  width: 24px;
}
.menu {
  position: fixed;
  top: 40px;
  right: 0;
  z-index: 7;
  background-color: #f9f9f9;
  height: calc(100% - 40px);
  width: 100%;
  box-sizing: border-box;
  padding: 40px 35px;
}
.menu a {
  display: inline-block;
  color: black;
  line-height: 36px;
  height: 36px;
  font-weight: bold;
}
.menu .social-icons {
  position: absolute;
  bottom: 35px;
}
.menu .close {
  position: absolute;
  top: 40px;
  right: 45px;
  color: #000;
}
@media screen and (min-width: 700px) {
  .menu {
    height: calc(100% - 80px);
    width: 600px;
    top: 80px;
  }
}
.filter-header {
  font-size: 32px;
  padding: 10px;
}
.filter-page {
  display: grid;
  grid-auto-flow: row;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  padding: 10px;
  /* React doesn't want to let me do this inline so here we are... */
}
.filter-page.c1 {
  grid-template-columns: repeat(1, 1fr);
}
.filter-page.c2 {
  grid-template-columns: repeat(2, 1fr);
}
.filter-page.c3 {
  grid-template-columns: repeat(3, 1fr);
}
.filter-page.c4 {
  grid-template-columns: repeat(4, 1fr);
}
.filter-page.c5 {
  grid-template-columns: repeat(5, 1fr);
}
.filter-page.c6 {
  grid-template-columns: repeat(6, 1fr);
}
.filter-page.c7 {
  grid-template-columns: repeat(7, 1fr);
}
.filter-page.c8 {
  grid-template-columns: repeat(8, 1fr);
}
.filter-page .filter-post {
  padding: 10px 0;
  margin-left: 10px;
}
.filter-page .filter-post .image-holder {
  overflow: hidden;
  position: relative;
}
.filter-page .filter-post .link {
  font-size: 18px;
}
.filter-page .filter-post .text {
  padding-top: 10px;
}
.not-found {
  display: block;
  text-align: center;
  color: black;
  font-size: 32px;
  line-height: 60px;
  padding: 20px;
}
.shop-page {
  display: flex;
  justify-content: center;
  box-sizing: content-box;
  padding: 5px;
}
.shop-page .holder-holder {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
}
.shop-page .holder {
  padding: 0 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shop-page .holder a {
  padding-bottom: 10px;
}
.shop-page .holder a img {
  background-color: #F6F6F6;
  padding: 9px;
  border: 1px solid #E4E4E4;
}
.related-posts {
  margin: auto;
  margin-top: 30px;
}
.related-posts .posts-holder {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 10px;
  padding: 10px;
}
.related-posts .posts-holder.mobile {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.related-posts .title {
  font-size: 18px;
  margin: auto;
  width: 100%;
  max-width: 1000px;
}
.related-posts .title > div {
  padding: 5px;
}
.shop-the-post {
  overflow: hidden;
  display: grid;
  grid-auto-flow: column;
  margin: 45px auto 0;
}
.shop-the-post .slidey-holder {
  height: 100%;
  align-items: center;
  overflow: hidden;
}
.shop-the-post .slidey-bit {
  transition: transform 0.5s ease-out;
  height: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 5px;
}
.shop-the-post .image-holder {
  overflow: hidden;
}
.shop-the-post .image-holder a {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
}
.shop-the-post .image-holder .meta {
  transition: opacity 0.3s ease-out;
  position: absolute;
  z-index: 1;
  width: 100%;
  bottom: 0;
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.4);
  height: 40px;
}
.shop-the-post .image-holder .meta > div {
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  color: black;
}
.shop-the-post .image-holder .meta > div.brand {
  font-weight: 600;
}
.shop-the-post .image-holder:hover .meta {
  opacity: 1;
}
.shop-the-post .spiky-boi {
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  z-index: 1;
  width: 20px;
  margin: 0 5px;
  height: 100%;
  color: #999;
}
.shop-the-post .spiky-boi:hover {
  background-color: rgba(0, 0, 0, 0.12);
}
.insta-name {
  display: flex;
  width: 60px;
  align-items: center;
  justify-content: center;
}
#disqus_thread {
  max-width: 1000px;
  margin: auto;
  padding: 20px;
}
.tag-component {
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 30px auto 0;
}
.tag-component .tag {
  margin: 5px;
}
.test-page {
  width: 100%;
  background-color: #ccc;
  display: flex;
  flex-wrap: wrap;
}
.test-page .container {
  background-color: white;
  margin: auto;
  padding-top: 30px;
  border: 1px solid #666;
  overflow: hidden;
}
.error h2 {
  text-align: center;
  padding-top: 10px;
}
.error img {
  display: block;
  width: 100%;
  max-width: 500px;
  margin: auto;
}
.small-image-link.center,
.big-image-link.center {
  margin: auto;
}
.small-image-link {
  z-index: 0;
  display: grid;
  grid-template: 1fr 15px 15px 80px 80px / 20px 1fr 2px 1fr 20px;
  margin: 20px 0;
}
.small-image-link .title {
  font-size: 32px;
  margin: 10px 0 -5px 0;
}
.small-image-link.smaller {
  grid-template: 1fr 15px 15px 60px 60px / 10px 1fr 2px 1fr 10px;
}
.small-image-link.smaller .title {
  font-size: 24px;
  margin: 5px 0 -5px 0;
}
.small-image-link.smaller.extra-small {
  font-size: 14px;
}
.small-image-link.smaller.extra-small .title {
  font-size: 20px;
  margin: 5px 0 -5px 0;
}
.small-image-link.right {
  margin-left: auto;
}
.small-image-link .image-holder {
  z-index: 0;
  grid-area: 1 / 1 / 5 / 6;
}
.small-image-link .one-pokey-boi {
  z-index: 2;
  grid-area: 2 / 3 / 4 / 4;
  background-color: black;
}
.small-image-link .text-holder-holder {
  z-index: 1;
  grid-area: 3 / 2 / 6 / 5;
  background-color: white;
  text-align: center;
  padding-top: 20px;
}
.small-image-link .text-holder-holder .text-holder {
  height: 100%;
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}
.big-image-link {
  width: 100%;
  min-height: 300px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template: 1fr 15px 15px 90px 90px / 20px 1fr 2px 1fr 20px;
}
.big-image-link .title {
  margin: 15px 0 0 0;
  font-size: 44px;
}
.big-image-link.smaller .title {
  font-size: 32px;
}
.big-image-link.smaller .text-holder-holder .text-holder {
  padding: 30px 20px;
}
.big-image-link .image-holder {
  z-index: 0;
  grid-area: 1 / 1 / span 4 / span 5;
}
.big-image-link .one-pokey-boi {
  z-index: 2;
  grid-area: 2 / 3 / span 2 / span 1;
  background-color: black;
}
.big-image-link .text-holder-holder {
  z-index: 1;
  grid-area: 3 / 1 / 6 / 6;
  background-color: transparent;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.big-image-link .text-holder-holder .text-holder {
  height: 100%;
  width: 100%;
  padding: 30px 20px;
  box-sizing: border-box;
  max-width: 840px;
  background-color: white;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}
.side-by-side {
  display: grid;
  grid-template: 2fr 1fr 2fr / 0 1fr 15px 1fr 0;
  padding: 15px;
  max-width: 1120px;
  margin: auto;
}
.side-by-side .image-a {
  grid-area: 1 / 1 / span 2 / span 2;
}
.side-by-side .text-a {
  grid-area: 1 / 4 / span 1 / span 1;
}
.side-by-side .image-b {
  grid-area: 2 / 4 / span 2 / span 2;
}
.side-by-side .text-b {
  grid-area: 3 / 2 / span 1 / span 1;
}
.side-by-side .title {
  font-size: 32px;
}
.side-by-side .text-a,
.side-by-side .text-b {
  display: flex;
  align-items: center;
}
.side-by-side .text-a .subtext,
.side-by-side .text-b .subtext {
  display: flex;
  flex-direction: column;
}
.side-by-side .text-a .title,
.side-by-side .text-b .title {
  margin: 2rem 0 1rem 0;
}
.side-by-side .text-a .pokey-read-more,
.side-by-side .text-b .pokey-read-more {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.side-by-side .text-a .one-pokey-boi,
.side-by-side .text-b .one-pokey-boi {
  z-index: 1;
  width: 60px;
  height: 0;
  border: 1px solid #111;
  margin: 0 20px;
}
.side-by-side .text-a .subtext {
  justify-content: flex-start;
}
.side-by-side .text-a .subtext > * {
  text-align: left;
}
.side-by-side .text-a .subtext .pokey-read-more {
  margin-left: -80px;
  justify-content: flex-start;
}
.side-by-side .text-b .subtext {
  justify-content: flex-end;
}
.side-by-side .text-b .subtext > * {
  text-align: right;
}
.side-by-side .text-b .subtext .pokey-read-more {
  margin-right: -80px;
  justify-content: flex-end;
}
@media screen and (min-width: 1000px) {
  .side-by-side {
    grid-template: 1fr 1fr 1fr / 40px 1fr 40px 1fr 40px;
    padding: 40px;
  }
  .side-by-side .title {
    font-size: 44px;
  }
  .side-by-side .text-a .one-pokey-boi,
  .side-by-side .text-b .one-pokey-boi {
    width: 80px;
  }
  .side-by-side .text-a .subtext .pokey-read-more {
    margin-left: -100px;
  }
  .side-by-side .text-b .subtext .pokey-read-more {
    margin-right: -100px;
  }
}
.about {
  font-size: 18px;
}
.about .about-side-by-side {
  margin: auto;
}
.about .about-side-by-side .kim-text,
.about .about-side-by-side .kathleen-text {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
}
.about .about-side-by-side .kim-text .big,
.about .about-side-by-side .kathleen-text .big {
  font-size: 32px;
}
.about .summary p {
  max-width: 760px;
  font-size: 24px;
  margin: 30px auto;
  text-align: center;
}
.about .summary .solo-pokey-boi {
  height: 50px;
  width: 2px;
  background-color: black;
  margin: 10px auto;
}
.about .summary .contact {
  margin: 10px auto 30px auto;
  text-align: center;
}
@media screen and (min-width: 800px) {
  .about .about-side-by-side {
    margin: auto;
    display: grid;
    grid-template: 1fr 1fr 1fr / 1fr 80px 1fr;
  }
  .about .about-side-by-side .kathleen-image {
    grid-area: 1 / 1 / span 2 / span 2;
    z-index: 1;
  }
  .about .about-side-by-side .kathleen-text {
    grid-area: 1 / 3 / span 1 / span 1;
  }
  .about .about-side-by-side .kim-image {
    grid-area: 2 / 2 / span 2 / span 2;
  }
  .about .about-side-by-side .kim-text {
    grid-area: 3 / 1 / span 1 / span 1;
  }
  .about .about-side-by-side .kim-text,
  .about .about-side-by-side .kathleen-text {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
  }
  .about .about-side-by-side .kim-text .big,
  .about .about-side-by-side .kathleen-text .big {
    font-size: 32px;
  }
  .about .summary p {
    max-width: 760px;
    font-size: 24px;
    margin: 30px auto;
    text-align: center;
  }
  .about .summary .solo-pokey-boi {
    height: 50px;
    width: 2px;
    background-color: black;
    margin: 10px auto;
  }
  .about .summary .contact {
    margin: 10px auto 30px auto;
    text-align: center;
  }
}