// TEXT
//$h1-font-size: 60px
//$h1-line-height: 80px
//
//$h2-font-size: 42px
//$h2-line-height: 60px
//
//$h3-font-size: 26px
//$h3-line-height: 32px
//
//$h4-font-size: 26px
//$h4-line-height: 40px
//
//$h5-font-size: 18px
//$h5-line-height: 36px
//
//$p-font-size: 20px
//$p-line-height: 28px


// header
$full-width-paddingX: 20px

$main-width: 100%
$main-max-width: 100%

$header-height: 80px

$logo-width: 180px

$nav-buttons-margin-left: 30px

$hamburger-size: 50px


// main nav
$main-nav-padding: 140px 0 30px
$main-nav-h5-margin-bottom: 1em
$main-nav-h3-margin-bottom: 0.6em
$nav-box-width: 20%
$nav-box-sibling-margin-left: calc(20% / 3)
$main-nav-main-sibling-margin-top: 60px
$main-nav-left-button-size: 50px
$main-nav-left-button-font-size: 18px


// hero
$hero-padding-top: 80px
$headline-wrapper-margin-bottom: 40px
$quickstart-button-padding: 0 50px
$vendor-strip-font-size: 16px

//video
$video-section-height: 400px

//features
$features-h3-margin-bottom: 40px
$feature-box-margin-bottom: 60px
$feature-box-div-margin-bottom: 0
$feature-box-div-width: 45%



////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////

@media screen and (min-width: 750px)
  @import "size"

  p
    font-size: 16px
    line-height: 24px
    letter-spacing: 0.1px

  h1
    font-size: 36px
    line-height: 44px

  h3
    font-size: 28px
    line-height: 36px

  h4
    font-size: 24px
    line-height: 40px



  #home
    #viewDocs, #tryKubernetes
      display: inline-block

  #vendorStrip
    display: block
    text-align: center

    img
      max-height: 24px
      vertical-align: middle
      margin: 0 30px

  #docs
    #vendorStrip
      li
        a
          font-size: 1em
          font-weight: normal

        li + li
          margin-left: 60px


  #oceanNodes
    h3
      text-align: left
      margin-bottom: 18px

    main, .main-section
      position: relative
      clear: both
      display: table
      height: 160px

      .content
        display: table-cell
        position: relative
        vertical-align: middle

      .image-wrapper
        position: absolute
        top: 50%
        max-width: 25%
        max-height: 100%
        transform: translateY(-50%)

      &:nth-child(odd)
        padding-right: 210px

        .image-wrapper
          right: 0

      &:nth-child(even)
        padding-left: 210px

        .image-wrapper
          left: 0

      &:nth-child(1)
        padding-right: 0

        h3, p
          text-align: center

        .image-wrapper
          position: relative
          display: block
          float: none
          max-width: 100%
          transform: none

        .content
          display: block

      img
        width: 100%


  #video
    height: $video-section-height
    display: block

    & > .light-text
      display: block

  #mobileShowVideoButton
    display: none

  #features
    padding-bottom: 60px

    .feature-box
      margin-bottom: 30px

      &:last-child
        margin-bottom: 0

    h3
      margin-bottom: $features-h3-margin-bottom

    .feature-box
      & > div
        width: $feature-box-div-width
        margin-bottom: $feature-box-div-margin-bottom

  #talkToUs
    #bigSocial
      div
        width: calc(50% - 15px)

      div + div
        margin-top: 0

      div:nth-child(2)
        margin-left: 20px

      div:nth-child(3)

      div:nth-child(4)
        margin-left: 20px

      a
        display: inline-block
        color: $blue
        font-weight: 400
        text-decoration: none

  // FOOTER
  footer
    nav
      text-align: center

      a
        width: 30%
        padding: 0 20px

    .social
      text-align: center

      div
        display: inline-block

      div:last-child
        display: block
        margin: 0

      span
        display: inline-block
        margin-right: 10px

      input
        text-align: left



  #home #caseStudiesWrapper
    div
      width: 48%