///////////////////////////// error page
.error--page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  h1 {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 60px;
  }

  p {
    text-transform: uppercase;
    font-family: sans-serif;
    margin-top: -20px;
    font-size: 22px;
  }

  a {
    display: block;
    margin-top: 20px;
  }
}

//-------------------------About
.about--page {

}

//-------------------------Home
.home--page {
  $paddingSec: 20px;

  .s1 {
    @media (max-width: 768px) {
      margin-bottom: 0 !important;
    }

    .slick-dotted.slick-slider {
      margin-bottom: 0 !important;
    }

    #slides {
      overflow: hidden;
      //margin-top: 60px;
      .slick-dots {
        bottom: 20px;

        li {
          button {
            &:before {
              color: $red;
              font-size: 12px;
            }
          }
        }
      }

      .slide {
        $height: 450px;

        & > .row {
          height: 100%;
          padding: 0 !important;
          margin: 0 !important;
        }

        .img-holder {
          padding: 0 !important;
          margin: 0 !important;
          height: $height;
          overflow: hidden;

          @media (max-width: 992px) {
            height: auto;
          }

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            @media (max-width: 992px) {
              height: auto;
            }
          }
        }

        .txt-holder {
          margin: 0 !important;
          background-color: $theme;
          padding: 36px;
          display: flex;
          align-items: center;
          height: $height;
          @media (max-width: 992px) {
            padding: 20px 10px 30px;
            height: auto;
          }
          .txtBox {

            h2 {
              color: white;
              text-align: justify;
              line-height: 1.3em;

              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              @media (max-width: 992px) {
                font-size: 15px;
              }
            }

            .p2 {
              margin-top: 16px;
              color: #C8C8C8;
              //font-size: 12px;
              font-size: 16px;

              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 5;
              -webkit-box-orient: vertical;
              @media (max-width: 992px) {
                font-size: 13px;
              }
            }

            .bbt {
              width: 100%;
              max-width: 150px;
              margin-top: 24px;
              text-align: center !important;
              font-family: "dubaiL";
              margin-bottom: 24px;
              color: #fff;
              border-color: #fff;
              background-color: transparent;

              @media (max-width: 992px) {
                max-width: 120px;
                span{
                  font-size: 14px;
                }
              }

              &:hover {
                border-color: #cccccc;
                color: #cccccc;
              }
            }
          }
        }
      }
    }
  }

  .event {
    margin-bottom: 35px;

    @media (max-width: 768px) {
      margin-bottom: 20px;
    }

    #slides-event {
      overflow: hidden;
      margin-bottom: 0;
      //margin-top: 60px;
      .slick-dots {
        bottom: 0;
        position: relative !important;

        li {
          button {
            &:before {
              color: red;
              font-size: 12px;
            }
          }
        }
      }

      .slide {

        overflow: hidden;

        & > .row {
          height: 100%;
        }

        .img-holder {
          margin: 0 !important;
          padding: 0 !important;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .txt-holder {
          margin: 0 !important;
          background-color: $theme;
          justify-items: center;
          align-items: center;
          align-content: center;
          display: flex;
          padding: 36px;

          p {
            color: white;
          }

          .p2 {
            margin-top: 16px;
            color: #C8C8C8;
            font-size: 12px;
          }

          .bbt {
            width: 100%;
            max-width: 150px;
            margin-top: 24px;
            text-align: center !important;
            font-family: "dubaiL";
            margin-bottom: 24px;
          }
        }
      }
    }

    img {
      width: 100%;
    }
  }

  .view-time-ago {
    //display: flex;
    //flex-direction: row;
    align-items: center;
    justify-content: space-between;

    p {
      color: #999999;
      margin-left: 10px;
      font-size: 12px;
      font-family: 'sansNum', sans-serif;
    }
  }

  .main-content {
    //padding-left: $paddingSec;

    .s2 {
      //padding-bottom: $paddingSec;
      //margin-top: $paddingSec;

      .big-image-card {
        //margin-top: 16px;

        img {
          width: 100%;
        }

        h2 {
          font-size: 18px;
        }

        p {
          font-size: 14px;
          color: gray;
          margin: 10px 0 5px 0;
        }
      }
    }

    .s3 {
      //margin-top: $paddingSec;
      //margin-top: $paddingSec;

      .newsFile {
        cursor: pointer;

        img {
          width: 100%;
        }

        &:hover {
          .txtBox {
            a {
              h2 {
                color: $red;
              }
            }
          }
        }

        .txtBox {
          position: relative;
          //padding-right: 30px;
          margin-top: 16px;
          margin-bottom: 16px;

          &.first {
            padding-right: 20px !important;
          }

          span {
            display: block;
            padding: 0;
            position: absolute;
            top: -16px;
            right: 0;
            font-size: 32px !important;
            color: $red;
            font-family: 'sansNum', sans-serif;
            @extend %defaultTransition;
          }

          h2 {
            font-size: 18px;
            line-height: 1.3em !important;
            color: $theme;
            @extend %defaultTransition;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
          }

        }
      }
    }

    .s4 {
      //padding-top: $paddingSec;
      //padding-bottom: $paddingSec;
      //margin-top: $paddingSec;

      .big-image-card {
        margin-top: 16px;

        img {
          width: 100%;
        }

        h2 {
          font-size: 18px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }

        p {
          font-size: 14px;
          color: gray;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }

      .small-pics {
        margin-top: 16px;

        img {
          width: 100%;
          padding-bottom: 8px;
        }

        h2 {
          padding-bottom: 5px;
          font-size: 16px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }

    }

    .s5 {
      margin-top: 30px;

      .red-line-border {
        height: 1px;
        background-color: $red;

      }

      .red-title {
        font-size: 18px;
        font-family: dubaiM !important;
      }

      .card-holder {

        border-width: 1px;
        margin-top: 16px;

        img {
          width: 100%;
        }

        span {
          display: inline-block;

        }
      }

      .odd-margin {
        margin-top: 36px;
      }

      .txt-holder {
        color: black;
        padding-right: 40px;
        width: 100%;
        position: relative;
        margin-bottom: 24px;
        display: flex;
        cursor: pointer;
        @media (max-width: 768px) {
          padding: 0;
        }

        &:hover {
          h2 {
            color: $red;
          }
        }

        span {
          padding: 0;
          position: absolute;
          top: -4px;
          right: 4px;
          font-size: 24px;
          color: $red;
          @extend %defaultTransition;
        }

        h2 {
          font-size: 18px;
          line-height: 1.3em !important;
          @extend %defaultTransition;
          margin-right: 10px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }

        i {
          color: $red;
          @extend %defaultTransition;
          font-size: 14px;
          @include transform(translateY(5px));
        }

      }

      .odd-line {

        .button-holder {
          display: flex;
          justify-content: center;
          position: relative;

          .line {
            height: 1px;
            width: 100%;
            background-color: #000000;
            position: absolute;
            left: 0;
            top: 50%;
          }

          .col-12 {
            z-index: 1;

            .button-holder2 {
              margin: 0 10px;
              overflow: hidden;
              z-index: 1;
              display: inline-block;
              text-align: center;

              .btn {
                background: #fff;

                &.btn-active {
                  background: $gray;
                  color: $gray1;
                }

                &:hover {
                  background: $gray;
                }
              }

              @media (max-width: 768px) {
                width: 100%;
                margin: 0;

                .btn {
                  width: 100%;
                }
              }
            }
          }

        }
      }

      //.odd-line {
      //  position: relative;
      //  margin-bottom: 48px;
      //  margin-top: 36px;
      //  .line {
      //    height: 1px;
      //    background-color: #222F3A;
      //  }
      //  .button-holder {
      //    //min-width: 500px;
      //    width: 100%;
      //    //display: flex;
      //    justify-content: space-between;
      //    position: absolute;
      //    top: 0;
      //    left: 50%;
      //    @include transform(translate(-50%, -50%));
      //
      //    .btn {
      //      //width: 100%;
      //      text-align: center;
      //    }
      //  }
      //}

      .archive_holder {
        margin-top: 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        justify-items: center;
        align-content: center;
      }
    }

    .s6 {
      margin-bottom: 16px;
      margin-top: 16px;
      padding-bottom: 16px;

      .link-span {
        color: #000;
        @extend %defaultTransition;

        &:hover {
          cursor: pointer;
          color: $red;
        }
      }

      .big-image-card {
        margin-top: 16px;

        img {
          width: 100%;
        }

        h2 {
          font-size: 18px;
        }

        p {
          font-size: 14px;
          color: gray;
        }
      }

      .small-pics {
        margin-top: 16px;

        img {
          width: 100%;
          padding-bottom: 8px;
        }

        h2 {
          //max-width: 1000px;
          //height: 100px;
          //overflow: hidden;
          //text-overflow: ellipsis;
          //white-space: nowrap;
          padding-bottom: 5px;
          font-size: 16px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }

      .card-holder {
        background-color: rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 1);

        img {
          width: 100%;
        }

        h2 {
          font-size: 18px;
        }
      }

      .sectionStyle {
        padding-bottom: 0;
      }
    }

    .archive {
      text-align: center;
    }
  }

  .side-bar {
    padding-top: $paddingSec;

    .boss {
      margin-top: 52px;

      h2 {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .txtLink {
          font-family: 'dubaiB';
          font-size: 15px;
          color: #000;
        }

        .btn {
          margin-right: auto;
        }
      }

      .title {
        display: inline-block;
        //margin-bottom: 10px;
        font-size: 16px;
        color: #000;
        cursor: pointer;
        @extend %defaultTransition;

        &:hover {
          color: $red;
        }
      }

      .mailLink {
        display: inline-block;
        margin-top: 0;
        font-size: 14px;
        color: gray;
        cursor: pointer;
        @extend %defaultTransition;

        &:hover {
          color: $red;
        }
      }

      .links {
        a {
          display: block;

          &.btn {
            display: inline-block;
            margin-top: 5px;
          }
        }
      }
    }

    .multimedia {
      .media_video {
        margin-top: 40px;
      }
      .media_graphic {
        margin-top: 40px;
      }

      .slide {
        .txtBox {
          position: relative;
          padding-top: 25px;


          .tag {
            display: inline-block;
            background: transparent;
            border: 1px solid rgba($red, 0.6);
            color: rgba($red, 0.8);
            padding: 0 5px;
            @include borderRadius(4px);
            font-size: 11px;
            position: absolute;
            top: 5px;
            right: 0;
          }

          a:not(.btn) {
            font-size: 13px;
            margin-top: 5px;
            color: gray;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            @extend %defaultTransition;

            &:hover {
              color: $red;
            }
          }

          .btns {
            margin-top: 15px;
            //text-align: center;
          }
        }

        img {
          width: 100%;
        }
      }
    }

    .spec-news {
      #slides-spec {
        margin-bottom: 15px;
      }

      .slide {
        img {
          width: 100%;
        }

        a {
          font-size: 13px;
          color: gray;
          margin-top: 10px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          @extend %defaultTransition;


          &:hover {
            color: $red;
            @extend %defaultTransition;
          }
        }
      }
    }

    .latest_news {
      ul {
        li {
          a {
            font-family: "dubaiL" !important;
            font-size: 13px;
            line-height: 1.3em;
            margin-bottom: 15px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            @extend %defaultTransition;
            color: #000;

            i {
              font-size: 8px;
              color: $red;
            }

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

    .links {
      ul {
        li {
          a {
            display: flex;
            align-items: center;

            i {
              display: block;
              color: $red;
              margin-left: 5px;
              font-size: 12px;
            }

            span {
              color: #000;
              @extend %defaultTransition;
              font-family: 'dubaiL', sans-serif;
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              font-size: 13px;

              &:hover {
                cursor: pointer;
                color: $red;
              }
            }
          }
        }
      }
    }

    .slick-dots {
      li {
        width: 0 !important;
      }
    }

    img {
      width: 100%;
    }
  }
}

//-------------------------News
.news_details {
  .s1 {
    .date-jalali {
      font-family: "sansNum", sans-serif !important;
      font-size: 12px;
      color: gray;
    }

    .sharableLinks {
      display: flex;
      margin-bottom: 10px;

      p {
        margin-left: 15px;
      }

      ul {
        li {
          display: inline-block;
          margin-left: 10px;

          i {
            cursor: pointer;
            color: $red;
          }
        }
      }
    }

    .leadTitle {
      padding: 15px 4px;
      background: $sectionBg;
    }

    main {
      .menu-right-details {
        //padding-left: 32px;

        .s1-view-time {
          margin: 20px 0 10px 0;
          display: flex;
          align-items: center;
          @media (max-width: 768px) {
            display: block;
          }

          div {
            display: flex;
            align-items: center;
            @media (max-width: 768px) {
              margin: 5px 0;
            }
          }

          .share-btn {
            span {
              font-size: 17.5px;
            }
          }

          .s1-cat {
            border: 1px solid $red;
            padding: 5px 15px;
            color: $theme;
            margin: 0 5px;
            //width: 100px;
            text-align: center;
            background-color: transparent;
            cursor: pointer;
            border-radius: 4px;
            @extend %defaultTransition;

            &:hover {
              background-color: $red;
              @extend %defaultTransition;
              color: $themeReverse;
            }
          }

          .userName {
            margin: 0 5px;
            color: #666;
          }

          .time {
            margin: 0 5px;
            color: #666;
            font-family: 'sansNum', sans-serif;
            font-size: 14px;
          }
        }

        .sk-editor-field {
          margin-top: 16px;
        }

        h1 {
          margin-top: 0;
        }
      }

      .menu-right-comment {
        padding-top: 30px;

        form {
          flex-direction: column;
          padding-bottom: 10px;
          padding-top: 20px;

          .formRow {
            margin-bottom: 10px;

            p {
              margin-bottom: 10px;
              margin-top: 0;
              color: $red;
            }
          }

          .err-captcha {
            margin-bottom: 10px;
            margin-top: 0;
            color: $red;
          }

          .view-captcha {
            margin-top: 20px;

            .input {
              //padding: 10px !important;
              //margin-bottom: 10px;
              height: 40px !important;
            }

            .new-captcha {
              display: flex;
              justify-content: center;
              align-items: flex-start;
              margin-bottom: 10px;

              .captcha {
                //margin-top: -12px;
                svg {
                  height: 40px;
                }
              }

              button {
                padding: 10px;
                height: 40px;
                @include borderRadius(0);
              }
            }
          }

          .input {
            color: $theme;
            border: 1px solid rgba(#000, 0.5);
            padding: 15px;
            width: 100%;
            box-sizing: border-box;
          }

          textarea {
            resize: vertical;
          }

          .btnSub {
            //padding: 10px 0;
            //margin-bottom: 10px;

            .btn-link {
              background-color: $red;
              padding: 10px 30px;
              color: $themeReverse;
              width: 100%;
              @extend %defaultTransition;
              cursor: pointer;
              border: 1px solid white;

              &:hover {
                @extend %defaultTransition;
                background-color: $themeReverse;
                color: $red;
                border: 1px solid $red;
              }
            }
          }

          .err {
            p {
              margin-top: 3px;
              color: $red;
            }

            input, textarea {
              border: 1px solid $red;
            }
          }
        }

        .view-comment {
          padding: 20px 0;

          .view-comment-item {
            border: 1px solid rgba(#000, 0.2);
            padding: 20px;
            margin-bottom: 10px;

            h4 {
              color: #333333;
              font-family: 'dubaiB', sans-serif;
            }

            span {
              color: #999999;
              font-family: 'sansNum', sans-serif;
              font-size: 12px;
              text-align: left;
            }

            h3 {
              color: #666666;
              margin-top: 5px;
            }

          }
        }
      }

      .view-page-terms {
        margin-bottom: 10px;

        .view-item-terms {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          margin-bottom: 10px;

          .view-title-terms {
            display: flex;
            align-items: center;
            flex-basis: calc(100% - 200px);

            i {
              display: inline-block;
              color: $red;
              margin-left: 10px;
              font-size: 22px;
            }

            p {
              width: 100%;
              margin-bottom: 5px;
            }

            h3 {
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
          }

          .download-btn {
            border: 1px solid $red;
            padding: 5px 15px;
            color: $red;
            margin: 0 5px;
            //width: 100px;
            text-align: center;
            background-color: transparent;
            cursor: pointer;
            border-radius: 4px;
            @extend %defaultTransition;

            &:hover {
              background-color: $red;
              @extend %defaultTransition;
              color: $themeReverse;
            }
          }
        }
      }
    }

    aside {
      .news-box {
        margin-bottom: 10px;
        font-size: 12px !important;
        padding-bottom: 5px;
        cursor: pointer;

        &:hover {
          .title, p, .date-jalali {
            color: $red;
          }
        }

        .view-date-menu-left {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .date-jalali {
            @extend %defaultTransition;
          }
        }

        .title {
          //font-size: 16px;
          color: black;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          @extend %defaultTransition;
        }

        p {
          color: gray;
          padding: 5px 0;
          @extend %defaultTransition;
          font-size: 13px;
        }
      }

      .news-with-img {
        margin-bottom: 5px;
        padding-bottom: 8px;

        .title {
          margin-top: 4px;
          color: #000;
          padding: 5px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          @extend %defaultTransition;
          font-size: 13px;
        }

        border: 1px solid rgba(0, 0, 0, 0.5);

        img {
          width: 100%;

        }

        span {
          color: gray;
          padding: 5px;
        }

        @extend %defaultTransition;

        &:hover {
          p {
            color: $red;
            @extend %defaultTransition;
          }
        }
      }

      .red-num-txt-box {
        margin-bottom: 16px;
        display: flex;
        color: #000;
        border-bottom: 1px solid rgba(#000, 0.3);

        span {
          font-family: "sansNum", sans-serif !important;
          color: $red;
        }

        p {
          margin-right: 5px;
          @extend %defaultTransition;
          margin-bottom: 10px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          font-size: 13px;

          &:hover {
            color: $red;
            cursor: pointer;
          }
        }

        .gray-line {
          background-color: rgba(0, 0, 0, 0.2);
          height: 1px;
          margin-top: 4px;
        }
      }
    }
  }

  .s2 {
    .img-overlay-text {
      position: relative;
      cursor: pointer;

      &:hover {
        .gray-back {
          a {
            color: $red;
          }
        }
      }

      img {
        width: 100%;
      }

      .gray-back {
        width: 84%;
        left: 8%;
        position: absolute;
        bottom: -10px;
        background-color: #ECEBEB;
        font-family: "dubaiL" !important;
        padding: 8px;

        a {
          text-align: center;
          display: block;
          color: black;
          text-decoration: none;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          @extend %defaultTransition;
        }

      }
    }
  }
}

//-------------------------Category
.category {
  $paddingSec: 20px;

  .s1 {
    .top-btns {
      text-align: center;

      .view-link {
        text-align: center;
        display: inline-block;
        margin-left: 15px;
      }
    }
  }

  .main-content {
    .s2 {
      padding-top: $paddingSec;
      padding-bottom: $paddingSec;

      .heronews {
        padding-toptop: $paddingSec;
        padding-bottom: $paddingSec;

        .title-holder {
          margin-top: 24px;

          .view-img {
            display: flex;
            align-items: stretch;

            .image {
              width: 100%;
              align-items: stretch;
              display: flex;
            }

          }

          .title {
            font-family: 'dubaiB', sans-serif;
            margin-bottom: 10px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .paragraph {
            font-family: 'dubaiM', sans-serif;
            margin-bottom: 20px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
          }

          .s1-date {
            color: gray;
            font-size: 14px;
            font-family: 'sansNum', sans-serif;
            margin-left: 5px;
          }
        }
      }

      .list-news {
        padding-toptop: $paddingSec;
        padding-bottom: $paddingSec;

        .line {
          width: 100%;
          height: 1px;
          background: rgba(#000, 0.2);
        }

        .news-card {

          img {
            width: 100%;
          }

          h2 {
            font-size: 20px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }


          .whole-wrapper {
            margin-top: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

          .whole-wrapper-date {
            font-family: 'sansNum', sans-serif;
            font-size: 12px;
            color: gray;
          }

          .whole-wrapper-title {
            @extend %defaultTransition;
            color: gray;

            i {
              @include transform(translateY(2px));
              margin-right: 10px;
            }

            &:hover {
              @extend %defaultTransition;
              color: $red;
            }
          }
        }
      }

      .sectionStyle {
        padding-bottom: 0;
      }

    }

    .s3 {
      padding-top: $paddingSec;
      padding-bottom: $paddingSec;

      .link {
        padding-top: $paddingSec;

        ul {
          width: 100%;
          display: inline-block;

          //flex-direction: row;
          //justify-content: flex-start;
          //align-items: flex-start;

          li {
            margin: 0 5px 10px;
          }
        }
      }
    }

    .s4 {
      padding-top: $paddingSec;
      padding-bottom: $paddingSec;

      .gallery-btn {
        text-align: center;
        @include transform(translateY(65px));
        z-index: 5;

        .view-link {
          text-align: center;
          display: inline-block;
          margin-left: 15px;

        }
      }

      .view-gallery {
        .view-item {
          display: block;
          position: relative;
          overflow: hidden;
          height: 100%;
          @extend %defaultTransition;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .title {
            width: 100%;
            //height: 100%;
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: 1;
            //justify-content: center;
            //display: flex;
            //align-items: center;
            background-color: rgba(#000, 0.6);
            overflow: hidden;
            @include boxSizing(border-box);
            @extend %defaultTransition;

            h5 {
              text-align: center;
              color: white;
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              padding: 0 10px;
            }

            h3 {
              text-align: center;
              color: white;
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              padding: 0 10px;
            }

            //&:hover {
            //  opacity: 1;
            //}

            @media (max-width: 575px) {
              background-color: rgba(#000, 0.6);
              opacity: 1;

              h5 {
                font-size: 16px;
              }
              h3 {
                font-size: 16px;
              }
            }
          }

          &:hover {
            @include transform(scale(1.01));
          }
        }
      }

      .sectionStyle {
        padding-bottom: 0;
      }

      //.items {
      //  padding-bottom: 20px;
      //}

      .favorites {
        .slick-dots {
          li {
            @media (max-width: 768px) {
              width: 10px;
            }
            @media (max-width: 575px) {
              width: 5px;
            }
          }
        }

        .sectionStyle {
          padding-bottom: 15px;
        }
      }

    }

    .s5 {
      padding-top: $paddingSec;
      padding-bottom: $paddingSec;
    }

    .s6 {
      padding-top: $paddingSec;
      padding-bottom: $paddingSec;

      .view-page-terms {
        margin-bottom: 10px;

        .view-item-terms {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          margin-bottom: 10px;

          .view-title-terms {
            display: flex;
            align-items: center;
            flex-basis: calc(100% - 200px);

            i {
              display: inline-block;
              color: $red;
              margin-left: 10px;
              font-size: 22px;
            }

            p {
              width: 100%;
              margin-bottom: 5px;
            }

            h3 {
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
          }

          .download-btn {
            border: 1px solid $red;
            padding: 5px 15px;
            color: $red;
            margin: 0 5px;
            //width: 100px;
            text-align: center;
            background-color: transparent;
            cursor: pointer;
            border-radius: 4px;
            @extend %defaultTransition;

            &:hover {
              background-color: $red;
              @extend %defaultTransition;
              color: $themeReverse;
            }
          }
        }
      }
    }

    .s7 {
      padding-top: $paddingSec;
      padding-bottom: $paddingSec;

      .view-page-survey {
        //width: calc(100% - 50px);
        width: 100%;
        height: auto;
        background-color: #fff;
        padding: 10px 20px;
        margin-bottom: 20px;
        @include borderRadius(10px);
        @include boxShadow(0 3px 15px #999);

        .survey-item1 {
          border-bottom: 2px solid rgba(#000, 0.2);
          padding: 20px 0;

          .about-title {
            padding: 20px 0;
            color: #444444;
          }

          .about-txt {
            color: #666666;
          }
        }

        .survey-item2 {
          padding: 20px 0;

          .el-radio-group {
            direction: ltr;

            .el-radio__input.is-checked .el-radio__inner {
              background: $red;
              border-color: $red;
            }

            .el-radio__input.is-checked + .el-radio__label {
              color: $red;
            }

            .el-radio__label {
              @extend %defaultTransition;

              &:hover {
                color: $red;
              }
            }

            .el-radio__inner {
              @extend %defaultTransition;
              border: 1px solid #666666;
            }

            .el-radio__inner:hover {
              border-color: $red;
            }
          }

          .comment-btn {
            display: flex;
            justify-content: flex-end;

            button {
              &:disabled {
                border-color: #666666;
                background-color: #666666;
                color: white;
                border-radius: 5px;
              }
            }
          }

          .el-checkbox-group {
            direction: ltr;
            text-align: right;

            .el-checkbox {
              margin-right: 0;
              margin-left: 30px;
            }

            .el-checkbox__inner {

              border: 1px solid #666666;
              @extend %defaultTransition;

              &:hover {
                border-color: $red;
              }
            }
          }


          .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
            background-color: $red;
            border-color: $red;
          }

          .el-checkbox__label {
            @extend %defaultTransition;

            &:hover {
              color: $red;
            }
          }

          .el-checkbox__input.is-checked + .el-checkbox__label {
            color: $red;
          }

          .el-progress {
            font-family: 'sansNum', sans-serif;

            .el-progress-bar__inner {
              right: 0;
            }

            .el-progress__text {
              margin-right: 10px;
            }
          }


        }

      }
    }

    .s8 {
      padding-top: $paddingSec;
      padding-bottom: $paddingSec;

      ul {
        //margin-top: 50px;

        li {
          margin-bottom: 25px;

          display: flex;

          i {
            color: $red;
            margin-left: 10px;
            font-size: 18px;
            @include transform(translateY(5px))
          }

          a {
            color: #000;
            //overflow: hidden;
            //display: -webkit-box;
            //-webkit-line-clamp: 1;
            //-webkit-box-orient: vertical;
            @extend %defaultTransition;

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

    .s9 {
      padding-top: $paddingSec;
      padding-bottom: $paddingSec;

      ul {
        //margin-top: 50px;

        li {
          margin-bottom: 25px;

          display: flex;

          i {
            color: $red;
            margin-left: 10px;
            font-size: 18px;
            @include transform(translateY(5px))
          }

          a {
            color: #000;
            //overflow: hidden;
            //display: -webkit-box;
            //-webkit-line-clamp: 1;
            //-webkit-box-orient: vertical;
            @extend %defaultTransition;

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

    .s10 {
      padding-top: $paddingSec;
      padding-bottom: $paddingSec;

      .view-page-newsFile {
        .view-item-newsFile {
          .view-title-newsFile {
            display: flex;
            cursor: pointer;
            align-items: flex-start;
            color: black;
            margin-bottom: 10px;

            span {
              color: $red;
              font-family: 'sansNum', sans-serif;
              margin-left: 10px;
              font-size: 22px;
            }

            h3 {
              @extend %defaultTransition;
            }

            &:hover {
              h3 {
                color: $red;
              }
            }

          }
        }
      }
    }

    .paginate {
      overflow: hidden;

      .el-pagination {
        display: flex;
        justify-content: center;
        direction: ltr !important;
        margin-top: 20px;

        button:hover {
          color: $red !important;
        }

        .el-pager {
          //direction: ltr !important;

          li:hover {
            color: $red !important;
          }

          .active {
            color: $red !important;
            cursor: pointer !important;
          }

        }


      }
    }
  }

  .side-bar {
    .sideBarItem {
      &:first-child {
        margin-top: 32px !important;

        &.galleryPage {
          margin-top: 76px !important;
        }

        .sidebar-line-txt {
          margin-bottom: 23px;
        }
      }
    }

    .managerInfo {
      img {
        width: 100%;
      }

      .txtBox {
        h2 {
          font-size: 16px;
        }

        p {
          font-size: 13px;
        }
      }

      .sectionStyle {
        margin-bottom: 10px;

        .view-title {
          color: $gray1;
          @extend %defaultTransition;

          &:hover {
            color: $red
          }

          .title {
            h4 {
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
        }

      }

    }

    .sidebarLinks {
      ul {
        li {
          margin-bottom: 10px;

          a {
            display: flex;
            align-items: flex-start;

            i {
              display: block;
              color: $red;
              margin-left: 5px;
              font-size: 12px;
              @include transform(translateY(5px));
            }

            span {
              color: #000;
              @extend %defaultTransition;
              font-family: 'dubaiL', sans-serif;
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              font-size: 13px;

              &:hover {
                cursor: pointer;
                color: $red;
              }
            }
          }
        }
      }
    }

    .specNews {
      .slick-dots {
        li {
          width: 0 !important;
        }
      }

      #slides-spec {
        margin-bottom: 5px;
      }

      .slide {
        img {
          width: 100%;
        }

        a {
          font-size: 13px;
          color: gray;
          margin-top: 10px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          @extend %defaultTransition;


          &:hover {
            color: $red;
            @extend %defaultTransition;
          }
        }
      }
    }

    .latestNews {
      ul {
        li {
          a {
            i {
              font-size: 8px;
              color: $red;
            }
          }
        }
      }
    }
  }
}

//-------------------------News File
.news-file-details {

  .s1 {
    .img-hold {
      width: 100%;
    }

    .news_holder {
      font-size: 20px;

      .date {
        margin-top: 10px;
        margin-bottom: 5px;
        align-items: center;
        justify-content: space-between;

        p {
          color: #999999;
          margin-left: 10px;
          font-size: 12px;
          font-family: 'sansNum', sans-serif;
        }
      }

      .s1-title {
        width: 100%;
        margin-top: 0;
        margin-bottom: 20px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        @media (max-width: 768px) {
          font-size: 16px;
        }
      }

      .s1-description {
        width: 100%;
        max-width: 400px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        font-family: 'dubaiM', sans-serif;

        @media (max-width: 768px) {
          display: none;
        }
      }
    }
  }

  .s2 {

    .bigNews {
      h2 {
        font-size: 20px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        @media (max-width: 768px) {
          font-size: 16px;
        }
      }

      .desc {
        margin-top: 15px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        font-size: 16px;

        @media (max-width: 768px) {
          display: none;
        }
      }

      .date {
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        margin-bottom: 5px;

        p {
          color: #999999;
          margin-left: 10px;
          font-size: 12px;
          font-family: 'sansNum', sans-serif;
        }
      }
    }

    .date-n {
      display: inline-block;
      color: gray;
    }

    .view-date {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .but {
        display: inline-block;
        margin-right: 12px;
        color: gray;
        cursor: pointer;
        @extend %defaultTransition;

        &:hover {
          color: $red;
          @extend %defaultTransition;
        }

        i {
          @include transform(translateY(2px));
          margin-right: 5px;
        }

      }
    }

    .s2-title1 {
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;

      @media (max-width: 768px) {
        font-size: 16px;
      }
    }

    //.s2-title2 {
    //  overflow: hidden;
    //  display: -webkit-box;
    //  -webkit-line-clamp: 2;
    //  -webkit-box-orient: vertical;
    //}

    //.small-pics {
    //  img {
    //    width: 100%;
    //  }
    //
    //  h2 {
    //    font-size: 16px;
    //    overflow: hidden;
    //    display: -webkit-box;
    //    -webkit-line-clamp: 2;
    //    -webkit-box-orient: vertical;
    //  }
    //
    //  .view-time-ago {
    //    //display: flex;
    //    //flex-direction: row;
    //    align-items: center;
    //    justify-content: space-between;
    //
    //    p {
    //      color: #999999;
    //      margin-left: 10px;
    //      font-size: 12px;
    //      font-family: 'sansNum', sans-serif;
    //    }
    //  }
    //}

    img {
      width: 100%;
    }
  }

  .paginate {
    overflow: hidden;

    .el-pagination {
      display: flex;
      justify-content: center;
      direction: ltr !important;
      margin-top: 20px;

      button:hover {
        color: $red !important;
      }

      .el-pager {
        //direction: ltr !important;

        li:hover {
          color: $red !important;
        }

        .active {
          color: $red !important;
          cursor: pointer !important;
        }

      }


    }
  }
}

//-------------------------Gallery
.gallery-page {
  padding: 30px 0;

  .gallery-title {
    border-bottom: 2px solid $red;
    display: inline-block;
    margin-bottom: 30px;
  }

  .gallery-side {
    border-bottom: 2px solid $red;
    display: inline-block;
    margin-bottom: 30px;
  }

  .gallery-item {
    margin-bottom: 10px;
    //@include boxShadow(0 4px 10px rgba(#000000, .3));
    @extend %defaultTransition;

    &:hover {
      @include boxShadow(0 3px 10px rgba(#000, 0.17))
    }

    .gallery-img-box {
      display: block;
      overflow: hidden;

      &:hover {
        .gallery-img {
          @include transform(scale(1.05));
        }
      }

      .gallery-img {
        width: 100%;
        @extend %defaultTransition;
      }
    }

    .gallery-detail-item {
      padding: 10px;

      .gallery-detail-title {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 12px;
      }

      .gallery-detail-date {
        color: gray;
        font-family: 'sansNum', sans-serif !important;
        font-size: 10px;
        margin-top: 10px;
      }
    }

  }

  .gallery-item1 {
    //margin-bottom: 10px;
    //@include boxShadow(0 4px 10px rgba(#000000, .3));
    @extend %defaultTransition;

    &:hover {
      @include boxShadow(0 3px 10px rgba(#000, 0.17))
    }

    .gallery-img-box1 {
      display: block;
      overflow: hidden;
      position: relative;

      &:hover {
        .gallery-img1 {
          @include transform(scale(1.05));
        }
      }

      .gallery-img1 {
        width: 100%;
        @extend %defaultTransition;
      }

      .gallery-detail-item1 {
        padding: 10px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: $sectionBg;

        .gallery-detail-title1 {
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          color: $theme;
        }

        .gallery-detail-date1 {
          color: gray;
          font-family: 'sansNum', sans-serif !important;
          font-size: 14px;
          margin-top: 10px;
        }
      }

    }
  }

  .paginate {
    overflow: hidden;

    .el-pagination {
      display: flex;
      justify-content: center;
      direction: ltr !important;
      margin-top: 20px;

      button:hover {
        color: $red !important;
      }

      .el-pager {
        //direction: ltr !important;

        li:hover {
          color: $red !important;
        }

        .active {
          color: $red !important;
          cursor: pointer !important;
        }

      }


    }
  }
}

.gallery-details {

  .view-date {
    display: flex;

    .date {
      margin: 0 2px 0;
      color: gray;
      font-family: 'sansNum', sans-serif !important;
      font-size: 14px;
    }
  }

  .user-info {
    margin-bottom: 20px;
    //display: flex;
    //flex-direction: row;
    //justify-content: space-between;
    //align-items: center;

    span {
      color: gray;
    }

    .date {
      font-family: 'sansNum', sans-serif;
    }

    .item2 {
      text-align: left;

      button {
        padding: 5px 20px;
        @media (max-width: 768px) {
          width: 100%;
          margin-top: 5px;
        }
      }
    }


  }

  .summry-title {
    font-size: 16px;
    font-family: dubaiL !important;
  }

  .title {
    font-family: dubaiL !important;
    font-size: 24px;
  }

  .img-gallery {

  }

  .s2 {
    background-color: black;
    padding-bottom: 80px;
    overflow: hidden;

    h3 {
      color: $themeReverse;
      text-align: center;
      padding: 40px 0;
    }

    #slides {
      .slick-track{
        align-items: stretch;
        display: flex;
      }
      .slide {
        background-color: #111111;
        padding: 50px 0;
        height: 200px;

        .view-txt {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          &:last-child {
            border-right: 1px solid #333;
            @media (max-width: 768px) {
              border: none;
            }
            @media (max-width: 768px) {
              padding: 0 10px;
            }
          }

          .h3 {
            color: $themeReverse;
            text-align: right;
            margin-bottom: 10px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          p {
            color: $themeReverse;
            width: 100%;
            max-width: 500px;
            margin-bottom: 10px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          .date {
            color: gray;

            &:first-child {
              font-family: 'sansNum', sans-serif;
            }

          }
        }

      }
    }
  }

  .el-popover {
    z-index: 2;
  }
}

//-------------------------Graphics
.graphic-page {
  padding: 30px 0;

  .graphic-title {
    border-bottom: 2px solid $red;
    display: inline-block;
    margin-bottom: 30px;
  }

  .graphic-side {
    border-bottom: 2px solid $red;
    display: inline-block;
    margin-bottom: 30px;
  }

  .graphic-item {
    margin-bottom: 10px;
    //@include boxShadow(0 4px 10px rgba(#000000, .3));
    @extend %defaultTransition;

    &:hover {
      @include boxShadow(0 3px 10px rgba(#000, 0.17))
    }

    .graphic-img-box {
      display: block;
      overflow: hidden;

      &:hover {
        .graphic-img {
          @include transform(scale(1.05));
        }
      }

      .graphic-img {
        width: 100%;
        @extend %defaultTransition;
      }
    }


    .graphic-detail-item {
      padding: 10px;

      .graphic-detail-title {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 12px;

      }

      .graphic-detail-date {
        color: gray;
        font-family: 'sansNum', sans-serif !important;
        font-size: 10px;
        margin-top: 10px;
      }
    }

  }

  .graphic-item1 {
    //margin-bottom: 10px;
    //@include boxShadow(0 4px 10px rgba(#000000, .3));
    @extend %defaultTransition;

    &:hover {
      @include boxShadow(0 3px 10px rgba(#000, 0.17))
    }

    .graphic-img-box1 {
      display: block;
      overflow: hidden;
      position: relative;

      &:hover {
        .gallery-img1 {
          @include transform(scale(1.05));
        }
      }

      .graphic-img1 {
        width: 100%;
        @extend %defaultTransition;
      }

      .graphic-detail-item1 {
        padding: 10px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: $sectionBg;

        .graphic-detail-title1 {
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          color: $theme;
        }

        .graphic-detail-date1 {
          color: gray;
          font-family: 'sansNum', sans-serif !important;
          font-size: 10px;
          margin-top: 10px;
        }
      }

    }
  }


  .paginate {
    overflow: hidden;

    .el-pagination {
      display: flex;
      justify-content: center;
      direction: ltr !important;
      margin-top: 20px;

      button:hover {
        color: $red !important;
      }

      .el-pager {
        //direction: ltr !important;

        li:hover {
          color: $red !important;
        }

        .active {
          color: $red !important;
          cursor: pointer !important;
        }

      }


    }
  }
}

.graphic-details {
  .view-date {
    display: flex;

    .date {
      margin: 36px 2px 0;
      color: gray;
      font-family: 'sansNum', sans-serif !important;
      font-size: 14px;
    }
  }

  .summry-title {
    font-size: 16px;
    font-family: dubaiL !important;
  }

  .title {
    font-family: dubaiL !important;
    font-size: 24px;
  }

  .s2 {
    background-color: black;
    padding-bottom: 80px;
    overflow: hidden;

    h3 {
      color: $themeReverse;
      text-align: center;
      padding: 40px 0;
    }

    #slides {
      .slide {
        background-color: #111111;
        padding: 50px 0;

        .view-txt {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          &:last-child {
            border-right: 1px solid #333;
            @media (max-width: 768px) {
              border: none;
            }
            @media (max-width: 768px) {
              padding: 0 10px;
            }
          }

          .h3 {
            color: $themeReverse;
            text-align: right;
            margin-bottom: 10px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          p {
            color: $themeReverse;
            width: 100%;
            max-width: 500px;
            margin-bottom: 10px;
          }

          .date {
            color: gray;

            &:first-child {
              font-family: 'sansNum', sans-serif;
            }

          }
        }

      }
    }
  }
}

//-------------------------Video
.video-page {
  padding: 30px 0;

  .video-title {
    border-bottom: 2px solid $red;
    display: inline-block;
    margin-bottom: 30px;
  }

  .video-side {
    border-bottom: 2px solid $red;
    display: inline-block;
    margin-bottom: 30px;
  }

  .video-item {
    margin-bottom: 10px;
    //@include boxShadow(0 4px 10px rgba(#000000, .3));
    @extend %defaultTransition;

    &:hover {
      @include boxShadow(0 3px 10px rgba(#000, 0.17))
    }

    .video-img-box {
      display: block;
      overflow: hidden;

      &:hover {
        .video-img {
          @include transform(scale(1.05));
        }
      }

      .video-img {
        width: 100%;
        @extend %defaultTransition;
      }
    }


    .video-detail-item {
      padding: 10px;

      .video-detail-title {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 12px;

      }

      .video-detail-date {
        color: gray;
        font-family: 'sansNum', sans-serif !important;
        font-size: 10px;
        margin-top: 10px;
      }
    }

  }

  .video-item1 {
    //margin-bottom: 10px;
    //@include boxShadow(0 4px 10px rgba(#000000, .3));
    @extend %defaultTransition;

    &:hover {
      @include boxShadow(0 3px 10px rgba(#000, 0.17))
    }

    .video-img-box1 {
      display: block;
      overflow: hidden;
      position: relative;

      &:hover {
        .gallery-img1 {
          @include transform(scale(1.05));
        }
      }

      .video-img1 {
        width: 100%;
        @extend %defaultTransition;
      }

      .video-detail-item1 {
        padding: 10px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: $sectionBg;

        .video-detail-title1 {
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          color: $theme;
        }

        .video-detail-date1 {
          color: gray;
          font-family: 'sansNum', sans-serif !important;
          font-size: 14px;
          margin-top: 10px;
        }
      }

    }
  }

  .paginate {
    overflow: hidden;

    .el-pagination {
      display: flex;
      justify-content: center;
      direction: ltr !important;
      margin-top: 20px;

      button:hover {
        color: $red !important;
      }

      .el-pager {
        //direction: ltr !important;

        li:hover {
          color: $red !important;
        }

        .active {
          color: $red !important;
          cursor: pointer !important;
        }

      }


    }
  }
}

.video-details {
  .view-date {
    display: flex;

    .date {
      margin: 36px 2px 0;
      color: gray;
      font-family: 'sansNum', sans-serif !important;
      font-size: 14px;
    }
  }

  .summry-title {
    font-size: 16px;
    font-family: dubaiL !important;
  }

  .title {
    font-family: dubaiL !important;
    font-size: 24px;
  }

  .s2 {
    background-color: black;
    padding-bottom: 80px;
    overflow: hidden;

    h3 {
      color: $themeReverse;
      text-align: center;
      padding: 40px 0;
    }

    #slides {
      .slide {
        background-color: #111111;
        padding: 50px 0;

        .view-txt {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          &:last-child {
            border-right: 1px solid #333;
            @media (max-width: 768px) {
              border: none;
            }
            @media (max-width: 768px) {
              padding: 0 10px;
            }
          }

          .h3 {
            color: $themeReverse;
            text-align: right;
            margin-bottom: 10px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          p {
            color: $themeReverse;
            width: 100%;
            max-width: 500px;
            margin-bottom: 10px;
          }

          .date {
            color: gray;

            &:first-child {
              font-family: 'sansNum', sans-serif;
            }

          }
        }

      }
    }
  }
}

//-------------------------Info
.info--page {

  .title {
    margin-bottom: 20px;
    border-bottom: 2px solid $red;
    display: inline-block;
  }

  img {
    display: block;
    margin-bottom: 20px;
    width: 100%;
  }
}

//--------------------------- contact
.contact-page {
  overflow: hidden;

  .col-left {
    .cover {
      background-color: #f4f4f4;
      border: .5px solid #999999;
      margin-bottom: 20px;

      a {
        &:hover {
          p {
            color: $red;
          }
        }

        img {
          width: 100%;
          border-bottom: 1px solid #666666;
        }

        p {
          margin: 10px;
          font-size: 14px;
          color: black;
          @extend %defaultTransition;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }
    }
  }

  .col-right {
    .s1-right {
      .s1-col1-right {
        .s1-col1-title {
          border-bottom: 1px solid $red;
          display: inline-block;
        }

        .s1-col1-desc {
          color: #666666;
          font-size: 14px;
          margin-top: 15px;
          margin-bottom: 30px;
          width: 100%;
          max-width: 400px
        }

        form {
          flex-direction: column;
          padding-bottom: 10px;

          .formRow {
            margin-bottom: 10px;

            p {
              margin-bottom: 10px;
              margin-top: 0;
              color: $red;
            }
          }

          .view-captcha {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .formRow {
              margin-bottom: 0;
              flex-basis: calc(100% - 220px);

              @media (max-width: 575px) {
                width: 100%;
                flex-basis: 100%;
              }
            }

            .new-captcha {
              width: 220px;
              display: flex;
              align-items: center;

              @media (max-width: 575px) {
                width: 100%;
                justify-content: center;
                margin-top: 10px;
              }

              .captcha {
                display: inline-block;

                svg {
                  height: 50px;
                }
              }

              button {
                padding: 0 15px;
                @include borderRadius(0);
                height: 50px;
              }
            }

            .err-captcha {
              margin-bottom: 10px;
              margin-top: 0;
              color: $red;
            }
          }

          .input {
            background-color: #f2f2f2;
            color: $theme;
            border: 0;
            padding: 15px;
            width: 100%;
            box-sizing: border-box;
          }

          textarea {
            resize: vertical;
          }

          .btnSub {
            padding: 10px 0;
            margin-bottom: 10px;

            .btn-link {
              background-color: $red1;
              padding: 10px 30px;
              color: $themeReverse;
              width: 100%;
              @extend %defaultTransition;
              cursor: pointer;
              border: 1px solid white;

              &:hover {
                @extend %defaultTransition;
                background-color: $themeReverse;
                color: $red;
                border: 1px solid $red;
              }
            }
          }

          .err {
            p {
              margin-top: 3px;
              color: $red;
            }

            input, textarea {
              border: 1px solid $red;
            }
          }
        }
      }

      .s1-col2-right {
        position: relative;
        margin-bottom: 10px;

        .mapouter {
          position: relative;
          text-align: right;
          height: 100%;
          width: 100%;
          z-index: 1;
          padding-top: 20px;
          padding-left: 20px;
          @include boxSizing(border-box);

          @media (max-width: 992px) {
            padding: 0;
          }

          .gmap_canvas {
            overflow: hidden;
            background: transparent !important;
            height: 100%;
            width: 100%;

            #gmap_canvas {
              width: 100%;
              height: 100%;
            }
          }

          .bg-map {
            background-color: $red1;
            width: 200px;
            height: 90%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;

            @media (max-width: 992px) {
              display: none;
            }
          }
        }
      }
    }

    .s2-right {
      padding: 50px 80px;
      @media (max-width: 768px) {
        padding: 10px 0;
      }

      .s2-right-title {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        @media (max-width: 768px) {
          margin-top: 10px;
        }

        i {
          display: flex;
          align-items: center;
          color: $red;
          font-size: 18px;
        }

        h4 {
          margin: 0 5px;
        }
      }

      .s2-right-desc {
        //margin-top: 5px;
        width: 100%;
        max-width: 250px;
        font-size: 16px;
        color: black;
        @extend %defaultTransition;
      }

      .phone {
        font-family: 'sansNum', sans-serif;

        &:hover {
          color: $red;
          @extend %defaultTransition;
        }
      }

      .email {
        &:hover {
          color: $red;
          @extend %defaultTransition;
        }
      }
    }

    .s3-right {
      .s3-right-view-title {
        align-items: center;
        position: relative;


        .br {
          height: 1px;
          width: 83%;
          background-color: $theme;
          position: absolute;
          right: 150px;
          top: 29px;
          @media (max-width: 768px) {
            width: 50%;
          }
        }
      }

      .s3-right-item {
        margin-top: 20px;

        .s3-right-title {
          display: flex;
          color: #000;

          @media (max-width: 768px) {
            margin-bottom: 10px;
          }

          &:hover {
            h1 {
              color: #000;
              @extend %defaultTransition;

            }

            h4 {
              color: $red;
              @extend %defaultTransition;
            }
          }

          p {
            color: $red;
            font-family: 'sansNum', sans-serif !important;
            margin: 0;
            @extend %defaultTransition;
            font-size: $h1 !important;

            @media (max-width: 575px) {
              font-size: 25px !important;
            }
          }

          h4 {
            margin-right: 20px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            @extend %defaultTransition;

            @media (max-width: 768px) {
              margin-top: 10px;
              margin-right: 15px;
            }
          }
        }
      }
    }
  }
}

//--------------------------- Election And LogIn
.election-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;

  .login-row {
    justify-content: center;

    .col-12 {
      display: flex;
      justify-content: center;

      .view-form {
        background-color: #fff;
        width: 500px;
        margin: 60px 0;
        border-radius: 5px;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 20px 10px;
        @include boxShadow(0 5px 20px #999);


        img {
          width: 100px;
          height: 110px;
        }


        form {
          width: 100%;
          max-width: 400px;

          .title {
            text-align: right;
            margin-bottom: 20px;
          }

          .formRow {
            .input {
              border-top: none;
              border-left: none;
              border-right: none;
              width: 100%;
              margin: 10px 0;
              font-size: 15px;
              padding: 10px;
              box-sizing: border-box;

            }
          }

          .btnSub {
            width: 100%;
            margin: 20px 0;

            .btn-link {
              width: 100%;
              padding: 10px 0;
              font-size: 16px;
              font-weight: lighter;
            }
          }
        }
      }
    }
  }

  .line-txt {
    position: relative;
    margin: 30px 0;

    .line {
      height: 1px;
      background-color: rgba(0, 0, 0, 0.2);
    }

    .txt {
      color: #86868A;
      font-size: 24px;
      display: inline-block;
      padding-left: 12px;
      background-color: white;
      position: absolute;
      top: -20px;
    }
  }

  .election-view-item {
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 10px 20px;
    margin-bottom: 20px;
    @include borderRadius(10px);
    @include boxShadow(0 3px 15px #999);

    .election-item1 {
      border-bottom: 2px solid rgba(#000, 0.2);
      padding: 20px 0;

      .about-title {
        padding: 20px 0;
        color: #444444;
      }

      .about-txt {
        color: #666666;
      }
    }

    .election-item2 {
      padding: 20px 0;


      .election-user {
        background-color: #fff;
        padding: 20px;
        margin-bottom: 20px;
        @include borderRadius(10px);
        @include boxShadow(0 3px 15px #999);
        @extend %defaultTransition;

        &.clicked {
          &.exclude {
            opacity: 0.4;
          }

          &.selected {
            @include boxShadow(0 3px 15px green);
          }
        }

        img {
          width: 100%;
          border-radius: 5px;
        }

        .user-name {
          margin: 10px 0;
        }

        .view-btn {
          .selectBTN {
            background: green;
            border-color: green;
            color: white;
            border-radius: 5px;
          }
        }
      }

      .voteBtn {
        background: green;
        border-color: green;

        &:hover {
          background: #fff;
          border-color: green;
          color: green;
        }

        &:disabled {
          background: gray;
          border-color: gray;
          cursor: not-allowed;

          &:hover {
            color: #fff;
            background: gray;
            border-color: gray;
          }
        }
      }

    }

  }

  .el-dialog__wrapper {
    .el-dialog {
      @media (max-width: 1198px) {
        width: 80%;
      }

      .el-dialog__body {
        .img-alert {
          width: 100%;
          border-radius: 5px;
        }

        .user-name {
          margin-bottom: 30px;
        }

        p {
          margin: 5px 0;
        }

        .about {
          color: $red;
        }
      }
    }
  }

  .err {
    p {
      margin-top: 3px;
      color: $red;
    }

    .input, textarea {
      border: 1px solid $red;
    }
  }

}

//--------------------------- services
.services-page {

  .services-view {
    margin-bottom: 20px;
    margin-top: 10px;

    .services-item {
      i {
        color: $red;
        font-size: 18px;
        @extend %defaultTransition;
      }

      span {
        color: #333333;
        margin-right: 5px;
        @extend %defaultTransition;
      }

      &:hover {
        span {
          color: $red;
        }
      }
    }
  }
}

//--------------------------- Form Meeting
.meeting-page {
  .view-form {

    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    form {
      width: 100%;
      max-width: 600px;
      background-color: #fff;
      border-radius: 10px;
      padding: 30px 40px;
      @include boxShadow(0 5px 20px #999);

      .title {
        text-align: right;
        margin-bottom: 20px;
      }

      .formRow {
        margin-bottom: 10px;

        .input {
          width: 100%;
          margin: 10px 0;
          padding: 15px;
          box-sizing: border-box;
          border: 1px solid #ffffff;
          background-color: #f4f4f4;
        }
      }

      .btnSub {
        width: 100%;
        margin: 20px 0;

        .btn-link {
          width: 100%;
          padding: 10px 0;
          font-size: 16px;
          font-weight: lighter;
        }
      }

      .view-captcha {
        display: flex;
        align-items: center;
        //justify-content: space-between;

        .formRow {
          margin-bottom: 0;
          //flex-basis: calc(100% - 220px);
        }

        .new-captcha {
          width: 220px;
          display: flex;
          align-items: center;

          .captcha {
            display: inline-block;

            svg {
              height: 50px;
            }
          }

          button {
            padding: 0 15px;
            @include borderRadius(0);
            height: 50px;
          }
        }

        .err-captcha {
          margin-bottom: 10px;
          margin-top: 0;
          color: $red;
        }
      }

      .err {
        p {
          margin-top: 3px;
          color: $red;
        }

        .input, textarea {
          border: 1px solid $red;
        }
      }
    }
  }
}

//--------------------------- Links
.links-page {
  .links-view {
    margin-bottom: 20px;
    margin-top: 10px;

    .links-item {
      i {
        color: $red;
        font-size: 18px;
        @extend %defaultTransition;
      }

      span {
        color: #333333;
        @extend %defaultTransition;
        margin-right: 5px;
      }

      &:hover {
        span {
          color: $red;
        }
      }
    }
  }

  .line-txt {
    position: relative;
    margin: 30px 0;

    .line {
      height: 1px;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .txt {
      color: #333333;
      font-size: 24px;
      display: inline-block;
      padding-left: 12px;
      background-color: white;
      position: absolute;
      top: -20px;
    }
  }
}

//--------------------------- Archive
.archive-page {

  .news-card {

    img {
      width: 100%;
    }

    h2 {
      font-size: 20px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .whole-wrapper {
      margin-top: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .whole-wrapper-date {
      font-family: 'sansNum', sans-serif;
      font-size: 12px;
      color: gray;
    }

    .whole-wrapper-title {
      @extend %defaultTransition;
      color: gray;

      i {
        @include transform(translateY(2px));
        margin-right: 10px;
      }

      &:hover {
        @extend %defaultTransition;
        color: $red;
      }
    }
  }

  .line-txt {
    position: relative;
    margin: 30px 0;

    .line {
      height: 1px;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .txt {
      color: #333333;
      font-size: 24px;
      display: inline-block;
      padding-left: 12px;
      background-color: white;
      position: absolute;
      top: -20px;
    }
  }

  .paginate {
    overflow: hidden;

    .el-pagination {
      display: flex;
      justify-content: center;
      direction: rtl !important;
      margin-top: 20px;

      button:hover {
        color: $red !important;
      }


    }


    .el-pager {
      direction: rtl !important;

      li:hover {
        color: $red !important;
      }

      .active {
        color: $red !important;
        cursor: pointer !important;
      }

    }


  }
}

//--------------------------- Search results
.search-result {
  padding-top: 150px;

  .results-for {
    margin-bottom: 100px;

    h2 {
      background: $red;
      color: #fff;
      padding: 15px;
    }
  }

  section {
    margin-bottom: 60px;
  }

  .title {
    margin-bottom: 30px;
    display: flex;
    align-items: center;

    h2 {
      cursor: pointer;
      display: flex;
      align-items: center;

      i {
        display: inline-block;
        @extend %defaultTransition;
        margin-left: 5px;

        &.open {
          @include transform(rotateZ(-90deg));
        }
      }

      b {
        $radius: 30px;
        width: $radius;
        height: $radius;
        line-height: $radius;
        text-align: center;
        display: inline-block;
        @include borderRadius(50%);
        background: $red;
        color: #fff;
        font-size: 12px;
        margin-right: 10px;
      }
    }

    p {
      color: $red;
      margin-right: 10px;
    }
  }

  .seeMore {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;

    button {
      text-align: center;
      border: none;
      background: transparent;
      cursor: pointer;

      &:hover {
        span, i {
          color: $red;
        }
      }

      span, i {
        display: block;
        @extend %defaultTransition;
      }

      i {
        margin-top: 5px;

        &.open {
          @include transform(rotateZ(180deg));
        }
      }
    }
  }

  .line {
    border-bottom: 1px solid rgba(#000, 0.3);
    margin-bottom: 20px;
  }

  .news {
    .news-item {
      height: 100%;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      img {
        width: 100%;
        margin-bottom: 10px;
      }

      h2 {
        width: 100%;
        margin-bottom: 15px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: $h5 !important;
        line-height: 1.3em;
      }

      p {
        flex-basis: 100%;
        margin-bottom: 20px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        color: rgba(#000, 0.7);
      }

      a {
        margin-top: auto;
        display: inline-block;
      }
    }
  }

  .pages {
    .pages-item {
      a {
        display: block;
        padding: 20px;
        text-align: center;
        color: $red;
        background: #fff;
        border: 1px solid $red;
        @extend %defaultTransition;

        &:hover {
          background: $red;
          color: #fff;
        }
      }
    }
  }

  .media {
    .media-item {
      height: 100%;
      display: flex;
      flex-direction: column;

      img {
        width: 100%;
        margin-bottom: 5px;
      }

      .txtBox {
        position: relative;
        overflow: hidden;
        flex-basis: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;

        h2 {
          width: 100%;
          margin-top: 27px;
          margin-bottom: 25px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          font-size: $h5 !important;
          line-height: 1.3em;
        }

        a {
          margin-top: auto;
          display: block;
        }

        .tag {
          display: inline-block;
          background: transparent;
          border: 1px solid rgba($red, 0.6);
          color: rgba($red, 0.8);
          padding: 0 5px;
          @include borderRadius(4px);
          font-size: 13px;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
  }
}