/* Glogbal css */
.container {
  max-width: $container;
  padding-left: $space / 2;
  padding-right: $space / 2;
  margin: 0 auto;
  &.fullwidth,
  &.fullwidth-no-gap {
    max-width: 100%;
  }
  &.fullwidth-no-gap {
    padding-left: 0;
    padding-right: 0;
  }
  &.responsive {
    @media(max-width: $break-md - 0.02) {
      max-width: 780px;

    }
    @media(max-width: $break-sm - 0.02) {
      max-width: 580px;
    }
    @media( max-width: $break-xs - 0.02 ) {
      max-width: 400px;
    }
  }
}

.pagination {
  text-align: center;
  margin-top: 64px;
  .nav-links {
    display: inline-flex;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 2px;
    .page-numbers {
      font-weight: 600;
      font-size: 13px;
      line-height: 45px;
      text-align: center;
      text-decoration: none;
      min-width: 45px;
      &:not(:last-child) {
        border-right: 1px solid #E7E5E4;
      }
      &:first-child {
        border-radius: 2px 0px 0px 2px;
      }
      &:last-child {
        border-radius: 0px 2px 2px 0px;
      }
      &.current, &:hover {
        color: #FFFFFF;
        background: $main-color;
        svg {
          fill: #FFFFFF;
        }
      }
      &.prev, &.next {
        padding: 0 16px;
        svg {
          display: inline-block;
          vertical-align: middle;
          margin-top: -2px;
        }
      }
      &.prev svg {
        margin-right: 4px;
      }
      &.next svg {
        margin-left: 4px;
      }
      @media(max-width: $break-xs - 0.02) {
        line-height: 35px;
        min-width: 35px;
        &.prev, &.next {
          font-size: 0;
          min-width: 35px;
          padding: 0;
          svg {
            margin: -2px 0 0 0;
          }
        }
      }

    }
  }
  @media(max-width: $break-sm - 0.02) {
    margin-top: 48px;
  }

}

.site-content {
  background: #f8f7f5;
  .content-area {
    padding: 96px 0;
    &.has-sidebar {
      &.left-sidebar .container {
        flex-direction: row-reverse;
      }
      .container {
        display: flex;
        justify-content: space-between;
      }
      .site-main {
        width: calc(69.5% - 64px);
        @media( max-width: $break-lg - 0.02 ) {
          width: calc(69.5% - 48px);
        }
      }
      .widget-area {
        width: 30.5%;
      }
      @media( max-width: $break-md - 0.02 ) {
        &.left-sidebar .container,
        .container {
          flex-direction: column;
        }
        .site-main,
        .widget-area {
          width: 100%;
        }
        .widget-area {
          max-width: 400px;
          margin: 96px auto 0;
        }
      }
      @media(max-width: $break-sm - 0.02) {
        .widget-area {
          margin-top: 64px;
        }
      }
    }
    @media(max-width: $break-sm - 0.02) {
      padding: 64px 0;
    }
  }

}

a.__btn {
  display: inline-block;
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  color: #FF2D09;
  background: #FFEAE6;
  padding: 8px 16px;
  border-radius: 4px;
  -webkit-transition: all .3s;
  transition: all .3s;
  &:hover {
    color: #FFFFFF;
    background: #FF2D09;
  }
}

body .__btn-back-list {
  display: inline-block;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  color: #FFFFFF;
  background: #00798E;
  margin-bottom: 40px;
  padding: 8px 12px;
  border-radius: 4px;
  &:hover {
    background: darken(#00798E, 5%);
  }
  svg {
    margin-right: 4px;
  }
  .mobile-label {
    display: none;
  }

  @media(max-width: 960px - 0.02) {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1000;
    margin-bottom: 0;
  }

  @media(max-width: $break-sm - 0.02) {
    top: 11.5px;
    font-size: 13px;
    padding: 6px 8px;
    .desktop-label {
      display: none;
    }
    .mobile-label {
      display: inline-block;
    }
  }

}

.__social_share {
  .__label {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    line-height: 24px;
  }
  .__social_list {
    display: inline-flex;
    vertical-align: middle;
    a {
      display: inline-block;
      vertical-align: middle;
      line-height: 1;
      margin-left: 12px;
      &:hover {
        opacity: .85;
      }
    }
  }
}

#__toc-content {
  background: #FFFFFF;
  margin-bottom: 72px;
  padding: 32px 40px;
  border: 0.5px solid #DDDDDD;
  border-radius: 8px;
  -webkit-box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.05);
  .__toc {
    .__title {
      font-size: 16px;
      line-height: 150%;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #00798E;
      margin-bottom: 24px;
    }
    ul {
      margin-bottom: 0;
      li {
        font-size: 16px;
        line-height: 28px;
         padding-left: 0;
         &:last-child {
           margin-bottom: 0;
         }
         &:before {
           display: none;
         }
         a {
           display: inline-block;
           background: #FFFFFF;
           margin-left: -2px;
           padding: 0 2px;
           -webkit-box-shadow: 0px 1px 0px #00798E;
           box-shadow: 0px 1px 0px #00798E;
           &:after {
             content: "";
             display: inline-block;
             width: 10.67px;
             height: 10.67px;
             background-image: url(../images/arrow-right.svg);
             margin-left: 12.67px;
           }
           &:hover {
             background: #F1F8F9;
           }
         }
       }
    }
  }
  @media(max-width: $break-sm - 0.02) {
    margin-bottom: 48px;
    padding: 20px 16px;
    .__toc {
      .__title {
        font-size: 14px;
        margin-bottom: 16px;
      }
      ul li {
        font-size: 13px;
        line-height: 18px;
      }
    }

  }
}

.socials-offical-color {
  &.facebook {
    background: #3b5999; 
  }
  &.messenger {
    background: #0084ff;
  }
  &.twitter {
    background: #000000;
  }
  &.linkedin {
    background: #0077B5;
  }
  &.skype {
    background: #00AFF0;
  }
  &.dropbox {
    background: #007ee5;
  }
  &.wordpress {
    background: #21759b;
  }
  &.vimeo {
    background: #1ab7ea;
  }
  &.tumblr {
    background: #34465d;
  }
  &.google {
    background: #dd4b39;
  }
  &.pinterest {
    background: #bd081c;
  }
  &.youtube {
    background: #cd201f;
  }
  &.whatsapp {
    background: #25D366;
  }
  &.wechat {
    background: #09b83e;
  }
  &.slack {
    background: #3aaf85;
  }
  &.instagram {
    background: #e4405f;
  }
  &.dribbble {
    background: #ea4c89;
  }
  &.flickr {
    background: #ff0084;
  }
  &.behance {
    background: #131418;
  }
  &.mail {
    background: #e8e60b;
  }
}