body[data-scrollmagicPanes="enabled"] {
  #pinContainer {
    height: 100% !important;
    width: 100% !important;
    overflow: hidden;
  }
  section {
    position: absolute; 
    top: 100%;
    margin-top: 30px;
    &:first-child {
      margin-top: 0;
    }
  }
}

body.js {
		h1 {
			transition: all .5s linear;
		}
	#butwhy {
		h1 {
			opacity: 0;
			transform: translateX(-100vw);
		}
		&.appear h1 {
			opacity: 1;
			transform: translateX(0);
		}
	}
}


section {
  min-height: 100vh;
  width: 100%;
  position: relative;
  //position: -webkit-sticky;
  //position: sticky;
  //overflow-y: auto;
  //top: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: $body-bg;
  padding-bottom: 30px;
  &:first-child {
    padding-bottom: 0;
  }
  &:not(:first-child):before {
    content: "";
    width: 100%;
    height: 30px;
    position: absolute;
    top: -30px;
    right: 0;
    background: linear-gradient(to left bottom, transparent 0%,transparent 49%,$body-bg 50%,$body-bg 100%);
  }
  &.even {
    background: $alternate-bg;
    &:before {
        background: linear-gradient(to left bottom, transparent 0%,transparent 49%,$alternate-bg 50%,$alternate-bg 100%);
    }
  }

  .paragraphs {
    column-count: 2;
    padding: 0 0 3rem;
    margin: 1rem;
    h3, p {
      max-width: 300px;
      font-family: 'Roboto', sans-serif;
    }
    p + h3 {
      margin-top: 50px;
    }
    @media screen and (max-width: $screen-phone) {
      & {
        column-count: unset;
      }
    }
  }

  &#faq {
    .paragraphs {
      column-count: unset;
    }
    ul {
      list-style-type: none;
      li {
        display: block;
        margin: 0 300px 0 0;
        &:nth-child(even) {
          margin: 0 0 0 300px;
        }
        @media screen and (max-width: $screen-phone) {
          & {
            margin: 0 !important;
          }
        }
      }
    }
  }
}