$max-width: 1200px $site-margin: 40px $section-margin: 80px

$mobile: 'max-width: 600px' $tablet: 'max-width: 768px' $desktop: 'min-width: 1001px'

$nav-breakpoint: 'max-width: 1000px'

html

overflow-x: hidden
&.mobile-menu-open
  overflow-y: hidden
body
  font-family: 'Open Sans', sans-serif
  font-weight: 400
  font-size: 16px
  overflow-x: hidden
  em
    font-style: italic
  #accordion
    a
      color: $blue !important
  a
    text-decoration: none
    color: $blue
  .page-content
    display: flex
    align-items: center
    flex-direction: column
    background-color: $white
    margin-bottom: $site-margin
    @media screen and ($tablet)
      margin-bottom: $site-margin/2
    .margin
      max-width: $max-width + 80px
      width: 100%
    .wrapper
      &.page
        margin-bottom: $section-margin
        img
          position: relative
          left: 50%
          transform: translateX(-50%)
          max-width: 100%
          height: auto
        p
          font-size: 15px
          color: $dark-grey
          line-height: 2
          margin-bottom: $site-margin*0.75
      &.single-post
        img
          position: relative
          left: 50%
          transform: translateX(-50%)
          max-width: 100%
          height: auto
        p
          font-size: 15px
          color: $dark-grey
          line-height: 2
          margin-bottom: $site-margin*0.75
      // width: 100%
      max-width: $max-width
      margin-left: $site-margin
      margin-right: $site-margin
      margin-top: $section-margin
      margin-bottom: 0
      @media screen and ($tablet)
        margin-top: $section-margin/2
      @media screen and ($mobile)
        margin-left: $site-margin/2
        margin-right: $site-margin/2
        margin-top: $section-margin/2
        margin-bottom: 0
      &.home-content
        font-size: 25px
        @media screen and ($tablet)
          font-size: 20px
        @media screen and ($mobile)
          font-size: 18px
        color: $dark-grey
        line-height: 1.7
        font-weight: 300
        hyphens: auto
  .dark-section
    width: 100%
    height: auto
    display: flex
    justify-content: center
    align-items: center
    background-color: $white
    color: $black
    .wrapper
      display: flex
      flex-direction: row
      @media screen and ($nav-breakpoint)
        display: block
        flex-direction: column
      justify-content: space-between
      h3
        &:first-of-type
          margin-top: 0
      .col
        padding: $section-margin/2 $section-margin/2.5
        @media screen and ($tablet)
          padding: $section-margin/2 $section-margin/3
        @media screen and ($mobile)
          padding: $section-margin/2 $section-margin/4
        // border: 1px solid red
        -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16)
        -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16)
        box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16)
        margin-right: $site-margin/2
        @media screen and ($nav-breakpoint)
          margin-right: 0
          margin-bottom: $site-margin/2
          &:last-of-type
            margin-bottom: 0
        // @media screen and ($mobile)
        //   margin-bottom: $site-margin/2
        flex-basis: 100%
        flex-grow: 1
        &:last-of-type
          margin-right: 0
        p
          font-weight: 300
          font-size: 14px
          line-height: 2
          margin-top: 15px
          margin-bottom: 30px
          text-align: justify