// 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: 116px;
$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: 768px) {
  @import "size";

  #hamburger {
    display: none;
  }

  .td-home {
    #viewDocs,
    #tryKubernetes {
      display: inline-block;
    }
  }

  #vendorStrip {
    display: block;
    text-align: center;

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

  #oceanNodes, .td-home .k8s-overview {
    h3 {
      text-align: left;
      margin-bottom: 18px;
    }

    main,
    .main-section {
      position: relative;
      clear: both;
      display: table;

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

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

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

        .image-wrapper {
          right: 0;
          text-align: right;
        }
      }

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

        .image-wrapper {
          left: 0;
          text-align: left;
        }
      }

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

        h3,
        p {
          text-align: center;
        }

        .image-wrapper {
          position: relative;
          display: block;
          float: none;
          text-align: center;
          max-width: 100%;
          transform: none;
        }

        .content {
          display: block;
        }
      }

      img {
        width: 100%;
      }
    }
  }

  #video {
    height: $video-section-height;
    display: block;
    height: 500px;

    & > .light-text {
      display: block;
      float: right;
      text-align: left;
      margin-right: 5%;
    }
  }

  #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(4) {
        margin-left: 20px;
      }

      a {
        display: inline-block;
        color: $primary;
        font-weight: 400;
        text-decoration: none;
      }
    }
  }

  .td-home #caseStudiesWrapper {
    div {
      width: 48%;
    }
  }
}