APO-Epsilon/apo-website

@import 'bourbon'
@import 'neat'
@import "../css/font-awesome.min.css"

body
  font-family: 'FontAwesome', sans-serif
  color: #666

.row
  padding: 10px
  background-color: rgba(225, 225, 225, 0.95)
  border-radius: 7px

.slide
  background-image: url(../img/header-background.jpg)
  background-position: 50% 0
  background-size: cover
  background-attachment: fixed
  background-repeat: repeat-y
  transform: translateZ(-1) scale(1.5)

a:hover
  +transition(all 0.5s $ease-out-circ);

// Header
header
  height: 20em
  width: 100%
  margin: 0

// Navigation
$gold: #b90

#nav
  width: 100%
  // 1000
  display: block
  font-family: 'Open Sans', sans-serif
  font-weight: 400
  position: absolute
  top: 0
  > a
    display: none
  li
    position: relative
    list-style: none
    z-index: 10
    a
      color: #fff
      display: block
      &:active
        background-color: #d80 !important
  span:after
    width: 0
    height: 0
    border: 0.313em solid transparent
    // 5
    border-bottom: none
    border-top-color: $gold
    content: ''
    vertical-align: middle
    display: inline-block
    position: relative
    right: -0.313em
    // 5
  > ul
    height: 2.5em
    background-color: rgba(0, 12, 61, 0.75)
    list-style: none
    margin: 0
    width: 100%
    > li
      width: 20%
      height: 100%
      float: left
      > a
        height: 100%
        font-size: 1em
        line-height: 2.5em
        text-align: center
      &:not(:last-child) > a
        border-right: 1px solid #000c3e
      &:hover > a
        background-color: rgba(0, 12, 62, 1)
    &:not(:hover) > li.active > a
      background-color: rgba(0, 12, 62, 1)
  li
    ul
      background-color: rgba(0, 12, 62, 0.9)
      display: none
      position: absolute
      top: 100%
    &:hover ul
      display: block
      left: 0
      right: 0
    &:not(:first-child):hover ul
      left: -1px
    ul
      a
        font-size: 1em
        border-top: 1px solid $gold
        padding: 0.75em
      li a:hover, &:not(:hover) li.active a
        background-color: $gold
        +transition(all 1.2s $ease-out-circ);
  ul li ul li
    ul li
      display: none
    &:hover ul li
      display: block

// first level

// second level

@media only screen and (max-width: 62.5em)
  #nav
    width: 100%
    margin: 0

@media only screen and (max-width: 40em)
  html
    font-size: 75%
    // 12
  header
    background-size: 100%
    background-attachment: inherit
  #nav
    position: relative
    top: auto
    left: auto
    z-index: 10
    background-color: hsla(49, 89%, 49%, 0.8)
    > a
      width: 3.125em
      // 50
      height: 3.125em
      // 50
      text-align: left
      text-indent: -9999px
      background-color: $gold
      position: relative
      &:before
        position: absolute
        border: 2px solid #fff
        top: 35%
        left: 25%
        right: 25%
        content: ''
      &:after
        position: absolute
        border: 2px solid #fff
        top: 35%
        left: 25%
        right: 25%
        content: ''
        top: 60%
    &:not(:target) > a:first-of-type
      display: block
    &:target
      > a:last-of-type, > ul
        display: block
    > ul
      height: auto
      display: none
      position: absolute
      left: 0
      right: 0
      z-index: 10
    > ul > li
      width: 100%
      float: none
      > a
        height: auto
        text-align: left
        padding: 0 0.833em
        // 20 24
      &:not(:last-child) > a
        border-right: none
        border-bottom: 1px solid #000c3e
    li ul
      position: static
      padding: 1.25em
      // 20
      padding-top: 0
    > ul li ul
      display: none
    &:target > ul
      display: block
  // first level
  // second level

// Footer

footer
  padding-bottom: 10px
  text-align: center
  line-height: 1.5em

// Icon

.icon
  position: relative
  &:before
    -moz-osx-font-smoothing: grayscale
    -webkit-font-smoothing: antialiased
    font-family: FontAwesome
    font-style: normal
    font-weight: normal
  &.circle
    -moz-transition: all 0.2s ease-in-out
    -webkit-transition: all 0.2s ease-in-out
    -o-transition: all 0.2s ease-in-out
    -ms-transition: all 0.2s ease-in-out
    transition: all 0.2s ease-in-out
    border: 0
    border-radius: 100%
    display: inline-block
    font-size: 1.25em
    height: 2.25em
    left: 0
    line-height: 2.25em
    text-align: center
    text-decoration: none
    top: 0
    width: 2.25em
    &:hover
      top: -0.2em
    &.fa-twitter
      background: #70aecd
      color: white
      &:hover
        background: #7fb7d2
    &.fa-facebook
      background: #7490c3
      color: white
      &:hover
        background: #829bc9
    &.fa-google-plus
      background: #db6b67
      color: white
      &:hover
        background: #df7b77
    &.fa-github
      background: #dcad8b
      color: white
      &:hover
        background: #e1b89b
    &.fa-dribbble
      background: #da83ae
      color: white
      &:hover
        background: #df93b8
  &.feature
    cursor: default
    display: block
    margin: 0 0 1.5em 0
    opacity: 0.35
    text-align: center
    &:before
      font-size: 5em
      line-height: 1em
  > .label
    display: none

ul.icons
  cursor: default
  li
    display: inline-block
    line-height: 1em
    padding-left: 0.5em
    &:first-child
      padding-left: 0

form
  select
    width: initial
    display: inline-block
    padding-right: 1.5rem
  label
    width: inherit

.alternate_bg_color:nth-child(even)
  background: #333
  padding: 1em

#organizations
  width: 100%