index.styl

@import vars
@import basic

html,body
  width: 100%
  height: 100%
  margin: 0
  padding: 0
  font-size: 22px
  font-family: wt011, Helvetica, Arial, sans-serif

h1,h2,h3,h4,h5
  font-weight: 900

nav
  text-shadow: 0 0 2px rgba(0,0,0,.3)
  font-size: 0.9em

.jumbotron
  height: 100%
  max-height: 640px
  margin-bottom: 0
  position: relative
  background: url(img/jumbotron.jpg) center center no-repeat #222
  background-size: cover
  border-radius: 0
  .text-center
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    margin: auto
    height: 210px

.section
  padding: 80px 20px

  .inner
    margin: 0 auto;
    max-width: 1024px


h2
  margin-bottom: 50px

.huge
  font-size: 3em
  font-weight: 900

.section-photos
  padding: 0

.section-photos .inner
  display: flex
  flex-wrap(wrap)
  width: 100%
  max-width:100%

.section-photos .photo
  flex(1 1 auto)
  width: 33%
  height: 270px
  background-color: #000
  background-position: center center
  background-size: cover
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2)
  .mask
    content: " "
    width: 100%
    height: 100%
    display: block
    background: #000
    opacity: 0.5
  &:hover .mask
    opacity: 0

.section-features
  padding-top: 90px
  .icon
    font-size: 90px
    margin-bottom: 40px
  p
    font-size: 0.9em
    color: #555

.section-footer
  a
    color: #9be

.media-preview
  border: 1px solid #ddd
  border-radius: 3px
  background: #444
  width: 100%
  height: 250px
  box-shadow: 0 1px 3px rgba(0,0,0,0.2)

.sep.gap-sm
  margin: 15px 0
.sep.gap
  margin: 30px 0
.sep.gap-lg
  margin: 60px 0
.sep.light
  border-bottom: 1px solid rgba(255,255,255,0.5)
.sep.dark
  border-bottom: 1px solid rgba(0,0,0,0.5)
.sep.light-dark
  border-bottom: 1px solid rgba(0,0,0,0.1)