body.kind-page {
  background-color: #e5e9f2;
  position: relative;

  .wrapper {
    display: flex;
    padding: 0;
    margin: 0;
    width: 100%;
    justify-content: space-between;
    position: relative;

    .content-section {
      flex: 60%;
      max-width: 60%;
      order: 2;
      padding: 0;
      position: relative;
      padding-left: 1rem;
      padding-right: 1rem;

      .content {
        background: #e5e9f2;
        padding-top: 1.5rem;

        .read-area {
          background-color: #f9fafc;

          .hero-area {
            margin-top: 3rem;
            width: 100%;
            height: 400px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
          }

          .page-content {
            width: 100%;
            position: relative;
            top: -4.5rem;
            padding: 15px;

            .author-profile {
              position: relative;
              align-content: center;
              text-align: center;

              .author-name {
                margin-top: 0px;
              }

              img {
                height: 120px;
                width: 120px;
                -o-object-fit: cover;
                object-fit: cover;
                background-color: #f9fafc;
                padding: 5px;
              }
              p {
                color: #8392a5;
              }
            }

            .title {
              text-align: center;
            }
            .tags {
              text-align: center;
            }

            .post-content {
              padding: 15px;

              h1,
              h2 {
                margin-top: 1.4rem;
              }

              h3,
              h4,
              h5,
              h6 {
                margin-top: 1.3rem;
              }

              blockquote {
                border-left: 4px solid #248aaa;
                background-color: #248baa15;
                padding: 0.3rem;
                padding-left: 1rem;

                & > p {
                  color: #3c4858;
                  margin-top: 0.5rem;
                  margin-bottom: 0.5rem;
                }
              }
            }

            .next-prev-navigator {
              padding-left: 1rem !important;
              padding-right: 1rem !important;

              .next-article {
                text-align: right;
              }

              .next-prev-text {
                white-space: break-spaces;
              }
            }
          }
        }
      }
    }

    .toc-section {
      flex: 20%;
      order: 3;
      max-width: 20%;
      transition: all ease-out 0.5s;

      .toc-holder {
        position: sticky;
        top: 4.5rem;
        padding-top: 1rem;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f9fafc;
        margin-right: 0.5rem;
        transition: all ease-out 0.3s;

        .toc {
          position: relative;
          padding-top: 0px;
          transition: all ease-out 0.3s;

          nav {
            padding-top: 0px;
            margin-top: 0px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            transition: all ease-out 0.3s;

            ul {
              list-style: none;
              padding-left: 0.5rem;
              margin-bottom: 0rem;
              width: 100%;
            }

            .nav-link {
              padding: 0;
              padding-left: 0.5rem;
              transition: all ease-out 0.3s;
              color: #1c2d41;

              &:hover,
              &:focus,
              &.active {
                padding-left: 1rem;
                padding-right: 0.5rem;
                background-color: #248aaa;
                color: #f9f9f9;
                transition: all ease-out 0.3s;
              }
            }
          }
        }
      }
    }

    .disquss {
      padding: 10px;
    }

    .share-buttons {
      @include brand-background();
      .btn {
        border: none !important;
      }
    }
  }

  .btn-improve-page {
    text-align: right;
  }

  #scroll-to-top {
    position: fixed;
    bottom: 0rem;
    right: 1rem;
    color: #248aaa;
    font-size: 24pt;
    z-index: 900000;
    visibility: hidden;

    &:hover {
      color: #2098d1;
    }
    &.show {
      visibility: visible;
    }

    i {
      box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
      background-color: #f9f9f9;
      border-radius: 50%;
    }
  }

  @include media('<=ultra-large') {
    .content-section {
      flex: 65%;
      max-width: 65%;
    }
    .content-section .container {
      max-width: 100%;
    }
  }

  @include media('<=large') {
    .container {
      max-width: 100%;
    }

    .wrapper {
      padding-left: 0px;
      padding-right: 0px;

      .content-section {
        padding: 0;
        flex: 60%;
        max-width: 100%;
        order: 2;
        overflow: hidden;

        .content {
          overflow: hidden;

          .read-area {
            .hero-area {
              height: 300px;
              margin-top: 1rem;
            }

            .page-content {
              padding: 0px;
            }
          }
        }
      }
      .toc-section {
        display: none;
      }

      .share-buttons {
        max-width: 48%;
      }

      .btn-improve-page {
        margin-right: 1rem;
        max-width: 48%;
      }

      #disqus_thread,
      .dsq-brlink {
        padding: 5px;
      }
    }
  }

  @include media('<=small') {
    .wrapper {
      padding: 0px;
      display: flex;
      flex-direction: column;

      .content-section {
        padding: 0;
        flex: 100%;
        max-width: 100%;
        order: 3;

        .content {
          .read-area {
            .hero-area {
              height: 200px;
              margin-top: 1rem;
            }

            .page-content {
              padding: 0px;
              .next-prev-navigator {
                .previous-article {
                  text-align: center;
                  margin: 5px;

                  a {
                    width: 100%;
                  }
                }
                .next-article {
                  text-align: center;
                  margin: 5px;
                  a {
                    width: 100%;
                  }
                }
              }
            }
          }
        }
      }
      .share-buttons {
        max-width: 100%;
      }

      .btn-improve-page {
        text-align: start;
        max-width: 100%;
      }

      #scroll-to-top {
        right: 0.5rem;
      }

      #disqus_thread,
      .dsq-brlink {
        padding: 5px;
      }
    }
  }
}