.docs.page {
  padding: 69px $tiny $xl;
  text-align: left;
  @media screen and (min-width: $mobile) {
    padding: 157px $medium $xl;
  }

  .sidebar {
    @media screen and (min-width: $tablet) {
      @neat-span-columns 6 24;
    }
  }

	.docs-nav {
		display: none;

    @media screen and (min-width: $tablet) {
      display: block;
    }

    @media screen and (min-width: $desktop) {
      position: fixed;
      top: 158px;
      bottom: 0;
      overflow-y: auto;
      padding-right: 1em;
    }

    &.mobile {
      display: block;
      position: relative;

      @media screen and (min-width: $tablet) {
        display: none;
      }

      &:after {
        content: " ";
        position: absolute;
        top: 7px;
        right: 20px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid $grey;
        z-index: 3;
      }

      select {
        border: none;
        border-radius: $borderRadius !important;
        cursor: pointer;
        margin: -$medium auto $medium auto;
        width: 100%;
        position: relative;
        padding: 14px 20px;
        z-index: 2;
        outline: none;
        box-shadow: none;
        -webkit-appearance: none;
        -webkit-border-radius: 100px;
      }
    }

    .nav-link,
    .subnav-link {
      display: block;
      font-weight: $regular;
      color: $grey;
      line-height: 32px;
      text-decoration: none;
      text-transform: capitalize;
      transition: color .2s ease;

      &.active {
        color: $darkGreen;
        font-weight: $bold;
      }

      &:hover {
        color: $darkGreen;
      }
    }
  }

  .nav-subsections {
    margin: $tiny 0;
    padding: 0 0 0 $tiny;
    border-left: 2px solid $lightestGrey;
    list-style-type: none;

    li {
      margin: 0;
      padding: 0;
    }

    .subnav-link {
      font-size: 14px;
    }
  }

  .docs-content {
    font-size: 18px;
    line-height: 28px;

    .edit-this-page {
      float: right;
    }

    #pencil {
      fill: #7CA511;
    }

    @media screen and (min-width: $tablet) {
      @neat-span-columns 17 24;
      @neat-shift 1 24;
    }

    @media screen and (min-width: $desktop) {
      @neat-shift 7 24;
    }


    h2:not(:first-child) {
      margin-top: $large;
    }

    a {
			text-decoration: none;
			color: $darkGreen;
		}

		iframe {
			width: 100%;
		}

    img {
 			max-width: 100%;
 			height: auto;
 		}

    table {
      background: #f7f7f7;
      border-radius: $borderRadius;
    }

    code {
      background: $lightestGrey;
      border-radius: 2px;
      padding: 2px 6px;
      white-space: nowrap;
    }

    pre > code {
      background: initial;
      padding: initial;
      white-space: inherit;
    }
	}

	h1,
	h2 {
		font-size: 36px;
		line-height: 48px;

		&.intro-headline {
			padding: 0 $small;
			margin-bottom: 86px;
		}
	}

  h2 {
    font-size: $small;
  }

	h3 {
		color: $grey;
		font-size: 12px;
		font-weight: $semibold;
		text-transform: uppercase;
		letter-spacing: 1.5px;
		margin-top: $medium;
    margin-bottom: $small;


		&:after {
			content: ' ';
			width: $small;
			height: 2px;
			background: $darkGreen;
		    display: block;
		    margin-top: 5px;
		}

		&.inverse {
			color: white;
		}
	}

	table {
		width: 100%;
		text-align: left;
		margin: 34px 0 $medium 0;

		th,
		td {
			padding: $micro;
		}

		th {
			font-size: 18px;
			font-weight: $bold;
		}

		tbody tr {
			&:nth-child(odd) {
				background: #fdfdfd;
			}
		}

		td {
			font-size: 14px;
		}
	}
}