html, body
  background: $primary linear-gradient(0deg, rgba($primary,1) 0%, rgba(color.adjust($primary, $lightness: 10%),1) 100%) no-repeat
  font: 400 1em $baseType
  height: 100%

a
  font: 300 1em $baseType
  color: $secondary
  text-decoration: underline
  //@include object-transitions(0.1s)

svg.icons
  width: 25px
  fill: $secondary

#notifications
  perspective: 1000px
  position: fixed
  z-index: 2000
  height: 55px
  width: 100%
  display: block
  align-items: center
  justify-content: center
  padding: 0 
  margin-top: -55px
  #notifyMessage
    margin: 0 auto
    //ks-easing( "out-back" );
    transition: all 0.6s cubic-bezier(.83,.05,.28,1.0)
    //padding-top -125px
    height: 50px
    width: 500px
    display: flex
    align-items: center
    justify-content: center
    opacity: 1
    transform-style: preserve-3d
    transform: rotateX(-120deg)
    transform-origin: 50% 0
    #notify-good, #notify-lame, #notify-working
      display: block
    #notify-working-box
      -webkit-animation: spin 2s linear infinite
      -moz-animation: spin 2s linear infinite
      animation: spin 2s linear infinite
    @-moz-keyframes spin 
      100%
        -moz-transform: rotate(360deg)
    @-webkit-keyframes spin 
      100%
        -webkit-transform: rotate(360deg)
    @keyframes spin 
      100%
        -webkit-transform: rotate(360deg)
        transform: rotate(360deg)
        
    .notify-icon
      background: $black
      padding: 8px 5px 5px 5px
      border-radius: 5px 0 0 5px
      height: 30px
      width: 30px
      text-align: center
      border: 2px solid $white
    p
      color: $white
      background: color.adjust($primary, $lightness: -60%)
      width: 400px
      height: 28px
      padding: 15px 0 0 5px
      border-radius: 0 5px 5px 0
      border: 2px solid $white
      text-align: center
      
    .icons
      fill: $white

.notify-close
  transform-style: preserve-3d
  transform: rotateX(-120deg)

.notify-open
  transform-style: preserve-3d
  transform: rotateX(0deg)
.blog-container
  width: 100%

.main-container
  margin: 0 auto
  z-index: 10
  position: relative
  height: 100%

  section
    header
      width: 100%
      max-width: 900px
      margin: 10px auto
      background: $white
      height: 50px
      border-radius: 5px

      #wrapper
        padding: 5px

        #left, #right
          width: 49.7%
          display: inline-block
          vertical-align: top
          min-height: 60px

          #the-logo
            width: 29px

        #right
          text-align: right
          color: $white

            // word-break: break-all;
          #dash-menu
            text-align: right
            a
              button
                border-radius: 50px
                svg
                  @include object-transitions(0.1s)
                  width: 40px
                  height: 20px
                  fill: $white
              &:hover
                button
                  background: $primary
                svg
                  fill: $secondary
              
                

/* Mozilla based browsers */
::-moz-selection
  background-color: $highlight
  color: $white

/* Works in Safari */
::selection
  background-color: $highlight
  color: $white

/* Works in Opera */
::-o-selection
  background-color: $highlight
  color: $white

::-ms-selection
  background-color: $highlight
  color: $white

/* Works in Internet Explorer */
::-webkit-selection
  background-color: $highlight
  color: $white


//Responsive
@media only screen and (max-width: 901px)
  .main-container
    padding: 10px

@media only screen and (max-width: 800px)
  .main-container
    section
      header
        #wrapper
          #left, #right
            display: inline-block

@media only screen and (max-width: 480px)
  .main-container
    section
      header
        #wrapper
          #left
            width: 30%

          #right
            width: 70%
