@media #{$media-min-481} {
  .footer-widgets {
    .box {
      column-count: 2;
    }
  }
}

@media #{$media-min-840} {
  .footer-widgets {
    .box {
      column-count: 3;
    }
  }
}

@media #{$media-min-1024} {

  .main {
    padding: 0;
  }
  
  .toggle-social,
  .toggle-nav {
    display: none;
  }

  .sub-menu {
    display: initial;
  }

  #site-header {
    .box {
      position: relative;
    }
    .social-list {
      left: initial;
      opacity: 1;
      right: 0;
      visibility: visible;
    }
  }

  .primary-nav-box {
    bottom: initial;
    display: inline-flex;
		height: $fixed-nav-1024-height;
		opacity: initial;
		overflow: initial;
    position: sticky;
    right: initial;
    top: 0;
		visibility: initial;
		width: 100%;
		z-index: 9900;
	}

  .primary-nav {
    height: initial;
    overflow: initial;
    ul {
      display: flex;
      flex-direction: row;
      height: initial;
      overflow: initial;
      li {
        cursor: pointer;
        display: inline-flex;
        position: relative;
        &:before {
          background: rgba(255, 255, 255, 0.3);
          border-radius: 100%;
          content: '';
          display: block;
          height: 0;
          left: 50%;
          opacity: 0;
          position: absolute;
          top: 50%;
          transition: all linear 0.2s;
          visibility: hidden;
          width: 0;
        }
        .toggle-nav-element {
          color: $shark;
          display: inline-block;
          font-size: 1.2rem;
          font-weight: bold;
          height: $fixed-nav-1024-height;
          line-height: $fixed-nav-1024-height;
          padding: 0 8px 0 4px;
          transition:  all linear 0.2s;
          width: 8px;
        }
        > a {
          border: 0;
          color: $shark;
          position: relative;
          z-index: +1;
          height: $fixed-nav-1024-height;
          line-height: $fixed-nav-1024-height;
          &:hover {
            border: 0;
          }
        }
        > ul {
          background: $white;
          box-shadow: $box-shadow-level-2;
          flex-direction: column;
          opacity: 0;
          position: absolute;
          top: calc(100% + 8px);
          transition:  all linear 0.2s;
          visibility: hidden;
          &:before {
            content: '';
            display: block;
            height: 8px;
            position: absolute;
            top: -8px;
            width: 100%;
          }
          li {
            background: initial;
            border-radius: 0;
            box-shadow: none;
            margin-right: initial;
            .toggle-nav-element,
            a {
              height: 32px;
              line-height: 32px;
            }
            &:before {
              background: rgba(0, 0, 0, 0.1);
            }
            &:hover {
              &:before {
                border-radius: 0;
              }
            }
            .toggle-nav-element {
              color: $shark;
            }
            > ul {
              left: calc(100% + 4px);
              top: 4px;
              &:before,
              &:after {
                content: '';
                display: block;
                position: absolute;
              }
              &:before {
                height: 4px;
                top: -4px;
                width: 100%;
              }
              &:after {
                height: 100%;
                left: -4px;
                width: 4px;
              }
            }
          }
        }
        &:hover {
          &:before {
            border-radius: 0;
            height: 100%;
            left: 0;
            opacity: 1;
            top: 0;
            visibility: visible;
            width: 100%;
          }
          > ul {
            opacity: 1;
            visibility: visible;
          }
        }
      }
    }
  }

  .sidebar-active {
		float: left;
		margin-right: 24px;
		width: calc(100% - 272px);
	}

  .sidebar-widget {
    float: left;
    width: 248px;
  }

  .footer-widgets {
    .box {
      column-count: 4;
    }
  }

  .list-comments {
    .depth-2,
    .depth-3,
    .depth-4,
    .depth-5 {
      padding-left: 8px;
    }
  }

  #respond {
    .form-submit {
      text-align: right;
    }
    #submit {
      margin-top: 40px;
    }
  }

}