$main-max-width: 1200px
$vendor-strip-height: 44px
$video-section-height: 550px

@media screen and (min-width: 1100px)
  #hamburger
    display: none

  ul.global-nav
    display: inline-block

  #docs #vendorStrip #searchBox:before
    top: 15px

  #vendorStrip
    height: $vendor-strip-height
    line-height: $vendor-strip-height

    li
      a.YAH
        &:after
          content: ""
          display: block
          position: absolute
          left: 0
          bottom: 0
          width: 100%
          height: 4px
          background-color: $blue


    #searchBox
      float: right


  #home
    #hero
      #vendorStrip
        display: block

  #docs
    #hero
      h1, h5
        text-align: left

      #vendorStrip
        ul
          float: left

        #searchBox
          float: right
          width: 250px

        #search
          vertical-align: middle

    .flyout-button
      display: none

    .logo
      position: relative
      float: left
      display: block
      width: 180px
      height: 88px
      top: 0
      left: 0
      transform: none
      background-image: url(../images/nav_logo.svg)

    &.flip-nav, &.open-nav
      .logo
        background-image: url(../images/nav_logo2.svg)


  #encyclopedia
    padding: 50px 50px 100px 100px
    clear: both

  #docsToc
    position: relative
    float: left
    padding: 0 20px
    left: 0
    width: 350px
    z-index: auto

    .push-menu-close-button
      display: none

  #docsContent
    width: calc(100% - 400px)

    #editPageButton
      right: -25px

  section, header, footer
    .main-section
      max-width: $main-max-width

  header, #vendorStrip, #encyclopedia, #hero h1, #hero h5, #docs #hero h1, #docs #hero h5,
  #community #hero h1, .gridPage #hero h1, #community #hero h5, .gridPage #hero h5
    padding-left: 100px
    padding-right: 100px

  #vendorStrip
    padding-right: 10px

  #home
    section, header
      .main-section
        max-width: 1000px

  #oceanNodes
    .main-section
      position: relative
      max-width: 830px

      &:nth-child(1)
        max-width: 1000px
        padding-right: 475px

        h3, p
          text-align: left

        .image-wrapper
          position: absolute
          max-width: 48%
          transform: translateY(-50%)

          img
            width: 425px

        //.content
        //	width: 50%


  #video
    height: $video-section-height
    position: relative
    background-position: center center
    background-size: cover



  #talkToUs
    h4
      br
        display: block

    #bigSocial
      div
        width: calc(25% - 18px)

      div + div
        margin-left: 20px
      //
      //div:nth-child(3), div:nth-child(4)
      //	margin-top: 0


  //#home #bigSocial
  //	div
  //		width: calc(33% - 15px)
  //
  //	div:nth-child(3)
  //		margin-top: inherit

  // FOOTER
  footer
    width: 100%
    background-image: url(../images/texture.png)
    background-color: $dark-grey

    .main-section
      padding: 20px 0

    nav
      overflow: hidden
      margin-bottom: 20px
      display: flex
      justify-content: space-between

      a
        width: auto
        float: left
        font-size: 24px
        font-weight: 300
        white-space: nowrap

    .social
      padding: 0
      max-width: 1200px

      div
        float: left

      div:last-child
        float: right

  #search, #wishField
    background-color: transparent
    padding: 10px
    font-size: 16px
    font-weight: 100
    color: white
    border: 1px solid white
    transition: 0.3s

    &:focus
      background-color: $light-grey
      color: $dark-grey

  .social a
    display: inline-block
    background-image: url(../images/social_sprite.svg)
    background-repeat: no-repeat
    background-size: 350px
    width: 50px
    height: 50px
    border-radius: 5px
    margin-right: 10px

    &:hover
      background-color: #fff

    span
      position: absolute
      display: block
      height: 0
      overflow: hidden

  a.twitter
    background-position: 0 0

    &:hover
      background-position: 0 100%

  a.stack-overflow
    background-position: -50px 0

    &:hover
      background-position: -50px 100%

  a.slack
    background-position: -100px 0

    &:hover
      background-position: -100px 100%

  a.github
    background-position: -150px 0

    &:hover
      background-position: -150px 100%

  a.mailing-list
    background-position: -200px 0

    &:hover
      background-position: -200px 100%

  a.calendar
    background-position: -250px 0

    &:hover
      background-position: -250px 100%

  a.youtube
    background-position: -300px 0

    &:hover
      background-position: -300px 100%

  #community, .gridPage
    #hero
      text-align: left

      h1
        padding: 20px 100px

    #tryKubernetes
      width: auto
      background-color: $blue
      padding: 0 20px

  #bigSocial
    div
      width: calc(25% - 18px)


  #home #caseStudiesWrapper
    div
      width: 24%
      min-height: 260px

@media screen and (min-width: 1300px)
  #vendorStrip
    padding-right: 100px

@media screen and (min-width: 456px)
  #vendorStrip
    li + li
      margin-left: 20px