#dash-index-content
  width: 100%
  height: 100%
  margin: 0 auto

  #dash-index
    width: 100%
    height: 100%
    z-index: 10
    position: relative

    #dash-index-wrapper
      width: 100%
      height: 100%
      margin: 0 auto

      .dash-init, .dash-restore
        width: 100%
        height: 100%
        display: flex
        align-items: center
        justify-content: center
        color: $primary
      
        form
          background: $white
          padding: 15px
          width: 300px
          border-radius: 5px
          text-align: center
          #the-logo
            width: 40px
            margin: 20px
          
          input
            width: 290px
            margin: 0 0 10px 0
            height: 30px
  
          button
            width: 300px
          div
            background: $primary
            color: $white
            border-radius: 3px
            padding: 5px
            label
              display: block 
              padding: 5px
              color: $tertiary
      .dash-restore
          display: none
          visibility: hidden

      #dash-login
        width: 100%
        height: 100%
        margin: 0 auto
        display: flex
        align-items: center
        justify-content: center

        #dash-form, #dash-reset
          width: 300px
          padding: 0.75em
          background: $white
          border-radius: 5px
          color: $white
          text-align: center
          #the-logo
            width: 40px
            margin: 20px

          input
            width: 290px
            margin: 0 0 10px 0
            height: 30px

          button
            width: 300px

      #dash-menu
        padding: 10px
        width: 90%
        max-width: 900px
        margin: 50px auto

        a
          display: inline-block
          vertical-align: top
          background: color.adjust($primary, $lightness: -60%)
          width: 30%
          padding: 5px
          border-radius: 3px
          color: $white
          margin: 0 10px 10px 0

          &:hover
            background: color.adjust($primary, $lightness: -60%)

          svg
            display: inline-block
            vertical-align: top
            fill: $white

          label
            display: inline-block
            margin-top: 5px
            width: 85%
            text-align: center
            cursor: pointer

      #dash-recent
        width: 100%
        max-width: 900px
        height: 100%
        padding: 5px 0 0 0
        margin: 0 auto

        #recent-list
          //padding: 5px
          position: relative

          .recent-header
            height: 50px
            margin-top: 5px
            .index-header-left
              vertical-align: top
              display: inline-block
              width: 50%
              color: $white
              font-size: 3em
            .index-header-right
              width: 50%
              text-align: right
              vertical-align: top
              display: inline-block
              right: 10px
              color: $white
              a
                button
                  border-radius: 3px
                  margin-left: 10px
                  svg
                    @include object-transitions(0.1s)
                    width: 40px
                    height: 20px
                    fill: $white

          a.post-link
            font-size: 1.5em
            font-weight: 300
            display: inline-block
            border-radius: 3px
            vertical-align: top
            text-decoration: none
            position: relative

            label
              font-size: 1.4em
              font-weight: 700
              color: $white
              padding: 5px
              vertical-align: top
              display: inline-block
              word-wrap: break-word
              width: 100%
              text-align: center
              position: relative
              top: 35%
              @include text-drop-shadow($black, 1, 2px, 2px, 0)

            div#options
              width: 100%
              position: absolute
              bottom: 0
              border-radius: 0 0 3px 3px
              //background-opacity($black, .35)
              background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%)

              #option-left
                display: inline-block
                vertical-align: top
                width: 50%
                position: relative
                background: none
                button
                  border-radius: 3px
                  background: $primary
                  margin: 0 0 10px 10px
                  svg
                    //@include object-transitions(0.1s)
                    width: 40px
                    height: 20px
                    fill: $secondary
                .item-options
                  border-radius: 3px
                  margin: 5px
                  display: inline-block
                button[data-active='false']
                  background: $primary
                  svg
                    fill: $secondary
                  
                button[data-active='true']
                  background: $tertiary
                  svg
                    fill: $primary
              #option-right
                display: inline-block
                width: 50%
                text-align: right
                span
                  font-weight: bold
                  display: block
                  background: $white
                  color: $primary
                  border-radius: 3px
                  font-size: .6em
                  text-align: center
                  position: relative
                  padding: 5px
                  float: right
                  margin: 0 10px 0 0
                  bottom: -15px
                  

          a:nth-child(3)
            width: 100%
            margin-bottom: 20px
            height: 500px

          a:nth-child(4), a:nth-child(6)
            width: 48.6%
            height: 350px
            margin: 0 10px 20px 0
          
          a:nth-child(5), a:nth-child(7)
            width: 48.6%
            height: 350px
            margin: 0 0 20px 10px

//Reponsive
@media only screen and (max-width: 768px)
  #dash-index-content
    #dash-index
      #dash-index-wrapper
        #dash-recent
          #recent-list
            a:nth-child(4), a:nth-child(6)
              width: 48.9%

@media only screen and (max-width: 640px)
  #dash-index-content
    #dash-index
      #dash-index-wrapper
        #dash-recent
          #recent-list
            a:nth-child(4), a:nth-child(6)
              width: 48.5%

@media only screen and (max-width: 480px)
  #dash-index-content
    #dash-index
      #dash-index-wrapper
        #dash-recent
          #recent-list
            .recent-header
              h3
                width: 40%

              .index-menu
                width: 60%

            a:nth-child(3), a:nth-child(4), a:nth-child(5), a:nth-child(6), a:nth-child(7)
              width: 100%
              margin: 15px 0 0 0
              height: 400px
