body {
  background-color: #f1eee9;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
li,
a {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
}

a,
a:visited,
a:focus {
  text-decoration: none !important;
}

#imgScrollContainer{
  -webkit-transition: opacity .25s ease;
     -moz-transition: opacity .25s ease;
      -ms-transition: opacity .25s ease;
       -o-transition: opacity .25s ease;
          transition: opacity .25s ease;
}

#imgScrollContainer *,
canvas:focus,
canvas:active {
  outline: none;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

section {
  height: 100vh;
}

/* menu header */
.header ul li {
  position: fixed;
  z-index: 200;
}

.header ul li a,
.header ul li a:hover,
.header ul li a:active,
.header ul li a:focus,
.header ul li a:visited {
  font-family: "Work Sans", sans-serif;
  font-size: 15px;
  color: #ac9e8b;
  letter-spacing: 1.61px;
  line-height: 33.24px;
  text-decoration: none;
  display: inline-block;
}

body.faded .header ul li a span {
  background: #f1eee9;
  padding: 2px 4px;
}

.header .logo {
  top: 0;
  left: 0;
}

.header .logo a {
  padding-top: 30px;
  padding-left: 40px;
}

body.faded .header .logo a {
  padding-left: 36px;
}

.header .about {
  top: 0;
  right: 0;
}

.header .about a {
  padding-top: 30px;
  padding-right: 40px;
}

body.faded .header .about a {
  padding-right: 36px;
}

.header .readAll {
  bottom: 0;
  left: 0;
}

.header .readAll a {
  padding-bottom: 30px;
  padding-left: 40px;
}

body.faded .header .readAll a {
  padding-left: 36px;
}

.header .capture {
  bottom: 0;
  right: 0;
}

.header .capture a {
  padding-bottom: 30px;
  padding-right: 40px;
}

body.faded .header .capture a {
  padding-right: 36px;
}

@media only screen and (max-width: 599px) {
  .header ul li a,
  .header ul li a:hover,
  .header ul li a:active,
  .header ul li a:focus,
  .header ul li a:visited {
    font-size: 11px;
    color: #ac9e8b;
    letter-spacing: 0.98px;
    line-height: 13.55px;
  }
  .header .logo a {
    padding-top: 20px;
    padding-left: 20px;
  }

  .header .about a {
    padding-top: 20px;
    padding-right: 20px;
  }

  .header .readAll a {
    padding-bottom: 20px;
    padding-left: 20px;
  }

  .header .capture a {
    padding-bottom: 20px;
    padding-right: 20px;
  }

  body.faded .header .logo a {
    padding-left: 16px;
  }

  body.faded .header .about a {
    padding-right: 16px;
  }

  body.faded .header .readAll a {
    padding-left: 16px;
  }

  body.faded .header .capture a {
    padding-right: 16px;
  }
}

/* section main */
#main {
  background-color: #f1eee9;
}

#main h1 {
  font-family: 'Vollkorn', serif;
  font-size: 42px;
  color: #737270;
  letter-spacing: -0.05px;
  text-align: center;
  line-height: 44.5px;
  width: 100%;
  position: absolute;
  z-index: 100;
  /*top: 90px;*/
  top: 10%;
  font-style: italic;
  font-weight: 400;
  margin: 0;
}

#main #instructions {
  position: absolute;
  z-index: 100;
  bottom: 10px;
  bottom: 5%;
  width: 100%;
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: center;
  /*-webkit-transition: all .25s ease;
     -moz-transition: all .25s ease;
      -ms-transition: all .25s ease;
       -o-transition: all .25s ease;
          transition: all .25s ease;*/
}

#main #instructions.preview-instructions {
  /*width: 200px !important;*/
  height: 100%;
  top: 50%;
  right: 50%;
  bottom: 50% !important;
  left: 50%;
  transform: translate(-50%, -50%);
}

#main #instructions p {
  font-family: 'Vollkorn', serif;
  font-size: 18px;
  color: #737270;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 18px;
  margin: 3px 0 0 0;
  font-style: italic;
}

/* section about */
#about {
  padding: 0;
  margin: 0;
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #b7b4b0;
  min-height: 100vh;
  height: 100%;
}

.aboutContainer {
  max-width: 400px;
}

/*@media only screen and (min-width: 1030px) and (max-width: 1800px) {*/
  /*#main #instructions img {*/
    /*width: 160px;*/
  /*}*/
/*}*/

@media only screen and (max-width: 599px) {
  #main h1 {
    font-size: 22px;
    color: #737270;
    letter-spacing: 0.39px;
    text-align: center;
    line-height: 23px;
    top: 15%;
  }

  #main #instructions img {
    margin-right: 15px;
  }

  #about {
    padding: 0 50px 0 50px;
  }

  #main #instructions {
    bottom: 10%;
  }
}

#about .headline {
  width: 100%;
  margin: 20px 0 20px 0;
}

#about .headline .lineInner {
  width: 60px;
  height: 2px;
  background-color: #000000;
  margin: 0 auto;
}

#about p {
  font-family: 'Vollkorn', serif;
  font-size: 28px;
  color: #ffffff;
  letter-spacing: -0.8px;
  text-align: center;
  line-height: 39px;
  font-style: italic;
}

.icon {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: 30px;
  margin-top: 40px;
}

@media only screen and (max-width: 599px) {
  #about p {
    font-size: 21px;
    line-height: 22px;
    letter-spacing: -0.41;
    margin-bottom: 10px;
  }

  #about .sponsors {
    margin-top: 25px;
  }

  .sponsors img {
    width: 5rem;
  }
  .icon {
    margin-bottom: 25px;
    /*margin-top: 1000px;*/
  }
}

.sponsors {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: row;
  align-items: baseline;
  justify-content: space-around;
  margin-top: 50px;
  margin-bottom: 120px;
}

p.bold {
  font-weight: bold;
  font-style: normal !important;
  font-size: 35.1px;
  line-height: 39px;
  letter-spacing: 0.16px;
}

.icon img {
  -ms-flex-item-align: center;
  align-self: center;
}

@media only screen and (max-width: 599px) {
  .icon img {
    width: 6rem;
  }
  p.bold {
    font-size: 19px;
    letter-spacing: -0.41;
    text-align: center;
    line-height: 20px;
  }
}

/* section comments */
.container #comments {
  padding: 5rem 20vw 0 20vw;
  margin: 0;
  height: auto;
}

.scrollContainer {
  max-width: 1500px;
  height: 100vh;
  margin: auto;
}

.post {
  background: #ffffff;
  -webkit-box-shadow: 1px 3px 11px 1px rgba(206, 206, 206, 0.5);
  box-shadow: 1px 3px 11px 1px rgba(206, 206, 206, 0.5);
  width: 440px;
}

.post p.quote,
.post p.hashTag {
  font-family: 'Vollkorn', serif;
  font-size: 15px;
  color: #737270;
  letter-spacing: 0.06px;
  text-align: center;
  line-height: 17px;
  font-style: italic;
  overflow-wrap: break-word;
  font-weight: 400;
  widows: 1;
}

.post p.author {
  font-family: "Work Sans", sans-serif;
  font-size: 18.43px;
  color: #ac9e8b;
  letter-spacing: 5.44px;
  line-height: 27.64px;
  text-align: center;
  margin-top: 10px;
  text-transform: uppercase;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in-element {
  -webkit-animation: fadein 1.4s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1.4s; /* Firefox < 16 */
  -ms-animation: fadein 1.4s; /* Internet Explorer */
  -o-animation: fadein 1.4s; /* Opera < 12.1 */
  animation: fadein 1.4s;
  opacity: 1;
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Internet Explorer */
@-ms-keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fade-out-element {
  -webkit-animation: fadeout 1.4s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadeout 1.4s; /* Firefox < 16 */
  -ms-animation: fadeout 1.4s; /* Internet Explorer */
  -o-animation: fadeout 1.4s; /* Opera < 12.1 */
  animation: fadeout 1.4s;
  opacity: 0;
}

.hidden {
  opacity: 0;
}

#masonry {
  display: flex;
  justify-content: center;
  flex-flow: wrap;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-width: 400px;
  -moz-column-width: 400px;
  column-width: 400px;
  -webkit-column-gap: 5rem;
  -moz-column-gap: 5rem;
  column-gap: 5rem;
}

#masonry div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 45%;
  /*width: 100%;*/
  display: inline-block;
  /*margin: 0 5rem 5rem 0;*/
  margin: 0 0 5rem 0;
  text-align: center;
  background: #ffffff;
  -webkit-box-shadow: 1px 3px 11px 1px rgba(206, 206, 206, 0.5);
  box-shadow: 1px 3px 11px 1px rgba(206, 206, 206, 0.5);
  padding: 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#masonry div:nth-child(odd) {
  margin: 0 5rem 5rem 0;
}

@media only screen and (min-width: 769px) and (max-width: 1491px) {
  .container #comments {
    padding: 5rem 5rem 0 5rem;
  }
  #masonry {
    -webkit-column-width: 264px;
    -moz-column-width: 264px;
    column-width: 264px;
  }
  #masonry div {
    width: 43%;
    margin: 0 0 5rem 0;
    padding: 30px;
  }
  
}

@media only screen and (max-width: 768px) {
  .container #comments {
    padding: 5rem 45px 0 45px;
  }
  #masonry {
    display: block;
  }
  #masonry div {
    width: 100%;
    margin: 0 1rem 3rem 0 !important;
    padding: 22px;
  }
}

.post p.large {
  font-size: 57.43px;
  letter-spacing: 0.14px;
  text-align: center;
  line-height: 66px;
}

.post p.medium {
  font-size: 31.32px;
  letter-spacing: -0.67px;
  line-height: 36.85px;
}

.post p.small {
  font-size: 25px;
  line-height: 30px;
  letter-spacing: -0.3px;
}

@media only screen and (max-width: 599px) {
  .post p.large {
    font-size: 29px;
    letter-spacing: 0.07px;
    line-height: 27px;
  }
  .post p.medium {
    font-size: 20px;
    letter-spacing: -0.38px;
    line-height: 23px;
  }
  .post p.small {
    font-size: 17px;
    letter-spacing: -0.42px;
    line-height: 20px;
  }
  .post p.author {
    font-size: 10px;
    letter-spacing: 2.95px;
    line-height: 15px;
  }
  #masonry{
      -webkit-column-count: 1;
      -moz-column-count: 1;
      column-count: 1;
      max-width: 90vw;
  }
}

body.sectionTwo .header ul a {
  color: #ffffff;
}

img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 100vh;
  z-index: 5000;
  visibility: hidden;
  display: none;
  margin: auto;
}

.overlay .overlay-header{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 50px;
  background-color: rgba(255,255,255,0.9);
  padding-bottom: 8px;
}

.show {
  visibility: initial !important;
  padding: 0;
  margin: 0;
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.screenshotContainer {
  max-width: 1000px;
  background: #FFF;
  border: 7px solid #ffffff;
  box-shadow: 6px 3px 27px 3px rgba(185, 183, 183, 0.5);
  /* border-radius: 32.9px; */
  position: relative;
}

.screenshot img {
  width: 100%;
  height: auto;
}

.desktop {
  visibility: initial;
  display: initial;
}

.touch {
  visibility: hidden;
  display: none;
}

/* for-phone-only */
@media only screen and (max-width: 599px) {
  .touch {
    position: absolute;
    visibility: initial;
    display: initial;
    text-decoration: none;
    font-family: "Work Sans", sans-serif;
    color: #797876;
    font-size: 35px;
    text-align: center;
  }

  .desktop {
    visibility: hidden;
    display: none;
  }

  .screenshotContainer {
    width: 100% !important;
    height: 100% !important;
    border: none;
    z-index: -1;
  }

  .screenshot {
    z-index: -1;
  }

  .screenshot img {
    z-index: -1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    width: 100vw;
    height: 100vh;
  }

  .overlay {
    height: 100%;
  }

  .touch {
    z-index: 10;
    /*background-color: #fff;*/
  }

  .overlay .touch p {
    line-height: 35px;
    font-size: 18px;
    text-align: left;
    padding-left: 18px;
    width: 100%;
    /*background-color: #fff;*/
    padding-top: 10px;
    padding-bottom: 1em;
    margin: 0;
  }
}

.overlay p {
  text-align: center;
}

.closeButton {
  position: absolute;
  top: 0;
  right: 0;
  /*margin: 13px 18px 0 0;*/
  margin: 5px 18px 0 0;
}

.closeButton span {
  text-decoration: none;
  font-family: "Work Sans", sans-serif;
  color: #797876;
  font-size: 35px;
  display: block;
  cursor: pointer;
}

.button p {
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  color: #797876;
  letter-spacing: 1.7px;
  line-height: 20px;
  text-transform: uppercase;
  text-align: left;
  padding-left: 15px;
}

.noScroll {
  overflow: hidden;
}

/* @media only screen and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  #about {
    height: 100%;
  }
} */

/* @media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
} */

/* for-desktop-up */
/* @media only screen and (min-width: 1200px) {
  #instructions{
    height: 100%;
  }
  #instructions img{
    position: absolute;
    top: 40%;
  }
} */