html, body
  max-width: 100%
  overflow-x: hidden

body
  font-family: 'Open Sans', sans-serif
  padding-bottom: 0

a, a:hover
  text-decoration: none

.navbar
  box-shadow: rgba(0,0,0,0.4) 0px 0px 20px
  background-color: white !important

.nav-link
  margin: 0px 18px

.section
  background-color: transparent
  padding: 18px 0px

.container
  ul
    list-style-type: none
  h3
    font-size: 16px
    font-weight: bold
    margin: 18px 0px 0px 0px

.screenshots
  text-align: center
  background-color: #222
  img
    margin: 0.5%
    border-radius: 10px
    border: 3px solid #fff2
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5)
    max-width: 17%

.footer
  color: #888
  background-color: #222
  text-align: center
  font-size: 12px

.jumbotron
  background: linear-gradient(rgba(0,30,200,0.8),rgba(90,30,150,0.5)), url("images/hero-background-filter.jpg")
  box-shadow: rgba(0,0,0,0.5) 0px 0px 20px
  margin: 0
  h1
    max-width: 25rem
    font-weight: bold
    color: white
  p
    max-width: 40rem
    color: white
  .screenshot
    box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px
    padding: 0px 0px 0px 0px
    border-radius: 10px
    border: 2px solid rgba(255, 255, 255, 0.2)
    background-color: transparent
    max-width: 300px
  .store-badges
    margin: 2rem 1rem
    img
      opacity: 0.8
      height: 75px
    img:hover
      opacity: 1.0
  .s1
    padding-bottom: 50px
    padding-left: 50px
  .s2
    position: absolute
    top: 50px
    left: 175px

.feature-header
  text-align: center
  font-weight: bold
  padding: 18px

.align-right
  text-align: right

.vertical-align
  display: flex
  align-items: center

.content
  max-width: 800px
  margin: 18px auto
  padding: 0px 18px
  //padding-left: 120px
  h2, h3, h4
    margin: 27px 0px 9px 0px
  h2, h3
    //margin-left: -120px
  h4
    //margin-left: -60px
    font-size: 16px
    font-weight: bold