/*
* 
* ==========================================================
* ARTICLES.SCSS
* ==========================================================
*
* Articles page CSS.
*
*/
@keyframes sb-fade-in {
  0% {
    opacity: 0; }
  90% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.sb-articles-nav .sb-scroll-area, .sb-articles-list-nav .sb-scroll-area {
  padding-right: 0;
  max-height: 100%; }
  .sb-articles-nav .sb-scroll-area::-webkit-scrollbar-track, .sb-articles-list-nav .sb-scroll-area::-webkit-scrollbar-track {
    background: #fff; }

.sb-articles-cnt {
  display: flex;
  max-width: 980px;
  margin: auto;
  justify-content: space-between; }
  .sb-articles-cnt .sb-articles-body {
    flex: 1;
    max-width: 730px;
    min-width: 30%; }

.sb-articles-nav {
  flex-shrink: 0;
  max-width: 205px;
  padding-left: 30px;
  margin: 40px 15px 40px 0;
  position: -webkit-sticky;
  position: sticky;
  top: 30px;
  max-height: calc(100vh - var(--offset, 100px)); }
  .sb-articles-nav a {
    display: block;
    text-decoration: none;
    color: #566069;
    padding: 5px 0 5px 15px;
    font-size: 13px;
    line-height: 23px;
    letter-spacing: .3px;
    border-left: 2px solid #80808030;
    transition: all 0.4s;
    opacity: 0.7; }
    .sb-articles-nav a:hover, .sb-articles-nav a.sb-active {
      opacity: 1;
      color: #24272a; }
    .sb-articles-nav a.sb-active {
      border-color: #24272a; }
  .sb-articles-nav .sb-nav-sub {
    padding-left: 30px; }
  .sb-articles-nav.sb-active .sb-scroll-area {
    display: block; }
  .sb-articles-nav:empty {
    display: none; }

.sb-articles-nav-mobile-btn {
  display: none;
  font-size: 14px;
  letter-spacing: .3px;
  color: #566069; }
  .sb-articles-nav-mobile-btn i {
    position: absolute;
    right: 15px;
    top: 16px; }

.sb-articles-parent-categories-cnt .sb-grid > div {
  border-radius: 4px;
  border: 1px solid #d4d4d4;
  padding: 10px; }

.sb-articles-page .sb-articles-header {
  background: #081A27;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 300px;
  padding: 0 15px;
  letter-spacing: .3px; }
  .sb-articles-page .sb-articles-header h1 {
    font-size: 30px;
    margin: 0 0 30px 0;
    color: #fff;
    font-weight: 500; }
  .sb-articles-page .sb-articles-header > div {
    max-width: 950px;
    width: 100%; }
.sb-articles-page.sb-articles-category-cnt .sb-articles-header, .sb-articles-page.sb-article-cnt .sb-articles-header {
  height: auto;
  padding: 40px 15px; }
  .sb-articles-page.sb-articles-category-cnt .sb-articles-header h1, .sb-articles-page.sb-article-cnt .sb-articles-header h1 {
    display: none; }
  .sb-articles-page.sb-articles-category-cnt .sb-articles-header > div, .sb-articles-page.sb-article-cnt .sb-articles-header > div {
    width: 100%; }
.sb-articles-page.sb-articles-cnt-large .sb-articles-cnt {
  max-width: 1100px; }
.sb-articles-page.sb-articles-cnt-large .sb-articles-header > div {
  max-width: 1070px; }
.sb-articles-page.sb-articles-cnt-large .sb-articles-body > div {
  max-width: 1070px; }
.sb-articles-page .sb-articles-body {
  padding: 40px 15px;
  font-size: 14px;
  line-height: 25px;
  color: #24272a; }
  .sb-articles-page .sb-articles-body h1, .sb-articles-page .sb-articles-body h2, .sb-articles-page .sb-articles-body h3 {
    font-weight: 500; }
  .sb-articles-page .sb-articles-body h1, .sb-articles-page .sb-articles-body h2 {
    letter-spacing: .3px;
    margin: 25px 0 10px 0;
    transition: all 0.4s;
    color: #24272a;
    font-size: 20px;
    line-height: 32px; }
  .sb-articles-page .sb-articles-body h1 {
    font-size: 23px;
    line-height: 36px; }
  .sb-articles-page .sb-articles-body h3 {
    font-size: 17px;
    line-height: 30px;
    margin: 15px 0 5px 0; }
  .sb-articles-page .sb-articles-body p {
    font-weight: 400;
    font-size: 14px;
    line-height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #24272a;
    margin: 10px 0;
    letter-spacing: .3px; }
  .sb-articles-page .sb-articles-body .sb-grid > a {
    min-width: 0;
    display: block;
    text-decoration: none;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #d4d4d4;
    transition: all 0.4s; }
    .sb-articles-page .sb-articles-body .sb-grid > a:hover {
      border-color: #028be5;
      box-shadow: 0 0 5px rgba(39, 156, 255, 0.2); }
      .sb-articles-page .sb-articles-body .sb-grid > a:hover h2 {
        color: #028be5; }
  .sb-articles-page .sb-articles-body .sb-grid img {
    max-width: 100%;
    border-radius: 6px; }
  .sb-articles-page .sb-articles-body .sb-grid p {
    height: 50px;
    margin: 10px 0 0 0; }
  .sb-articles-page .sb-articles-body .sb-content ul li {
    font-size: 14px;
    line-height: 30px; }
  .sb-articles-page .sb-articles-body .sb-parent-category-box, .sb-articles-page .sb-articles-body .sb-grid > a {
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; }
    .sb-articles-page .sb-articles-body .sb-parent-category-box img, .sb-articles-page .sb-articles-body .sb-grid > a img {
      position: absolute;
      left: 20px;
      top: 20px;
      width: 50px;
      height: 50px; }
  .sb-articles-page .sb-articles-body .sb-parent-category-box {
    padding: 0 0 40px 0; }
    .sb-articles-page .sb-articles-body .sb-parent-category-box h1 {
      font-size: 30px;
      line-height: 35px; }
    .sb-articles-page .sb-articles-body .sb-parent-category-box p {
      max-width: 800px;
      font-size: 15px;
      margin-top: 10px; }
    .sb-articles-page .sb-articles-body .sb-parent-category-box img {
      left: 0;
      top: 30px;
      border-radius: 4px; }
      .sb-articles-page .sb-articles-body .sb-parent-category-box img + div {
        margin-left: 80px; }
  .sb-articles-page .sb-articles-body .sb-btn-text {
    font-size: 14px; }
  .sb-articles-page .sb-articles-body > div {
    max-width: 950px;
    margin: auto; }
.sb-articles-page .sb-subcategories .sb-subcategory-box, .sb-articles-page .sb-search-results {
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #d4d4d4; }
  .sb-articles-page .sb-subcategories .sb-subcategory-box + div, .sb-articles-page .sb-search-results + div {
    margin-top: 30px; }
.sb-articles-page .sb-subcategory-title {
  display: block;
  text-decoration: none;
  padding-bottom: 30px;
  margin: 20px;
  border-bottom: 1px solid #d4d4d4;
  transition: all 0.4s; }
  .sb-articles-page .sb-subcategory-title p {
    color: #566069; }
    .sb-articles-page .sb-subcategory-title p:empty {
      display: none; }
  .sb-articles-page .sb-subcategory-title:hover h2 {
    color: #028be5; }
.sb-articles-page .sb-subcategory-articles > a, .sb-articles-page .sb-search-results > a {
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.4s;
  display: block;
  padding: 20px 40px 20px 20px;
  color: #24272a;
  position: relative;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: .3px; }
  .sb-articles-page .sb-subcategory-articles > a:before, .sb-articles-page .sb-search-results > a:before {
    right: 20px;
    left: auto;
    top: 2px;
    position: absolute;
    font-size: 10px;
    line-height: 60px; }
  .sb-articles-page .sb-subcategory-articles > a:hover, .sb-articles-page .sb-search-results > a:hover {
    color: #028be5;
    background-color: #028be50f; }
.sb-articles-page .sb-breadcrumbs {
  margin-bottom: 30px; }
  .sb-articles-page .sb-breadcrumbs a {
    text-decoration: none;
    font-size: 13px;
    line-height: 20px;
    color: #566069;
    letter-spacing: .3px;
    transition: all 0.4s; }
    .sb-articles-page .sb-breadcrumbs a:hover {
      color: #24272a; }
  .sb-articles-page .sb-breadcrumbs a:not([href]) {
    opacity: 0.7; }
  .sb-articles-page .sb-breadcrumbs i {
    color: #566069;
    margin: 0 10px;
    font-size: 8px; }
  .sb-articles-page .sb-breadcrumbs + div {
    margin-top: 30px; }
.sb-articles-page .sb-article .sb-title {
  font-size: 30px;
  line-height: 35px;
  margin-top: 30px;
  color: #24272a; }
  .sb-articles-page .sb-article .sb-title:first-child {
    margin-top: 0; }
.sb-articles-page h2.sb-articles-search-title {
  color: #566069;
  margin-bottom: 40px; }
  .sb-articles-page h2.sb-articles-search-title span {
    color: #24272a; }
.sb-articles-page .sb-search-results > a h3 {
  transition: all 0.4s; }
.sb-articles-page .sb-search-results > a:hover h3 {
  color: #028be5; }

.sb-rating-ext > * {
  animation: sb-fade-in 3s; }

.sb-rating-ext {
  justify-content: center; }
  .sb-rating-ext .sb-rating {
    padding-top: 0;
    margin-top: 0;
    border: none; }
  .sb-rating-ext.sb-lang-nav-cnt {
    justify-content: space-between; }

.sb-lang-nav {
  margin-top: -22px;
  height: 45px; }
  .sb-lang-nav ul {
    top: auto;
    bottom: 35px;
    margin-left: -11px; }
    .sb-lang-nav ul li {
      padding: 6px 12px;
      background: none !important; }
      .sb-lang-nav ul li a {
        display: flex;
        align-items: center;
        text-decoration: none; }
    .sb-lang-nav ul:empty {
      display: none !important; }
  .sb-lang-nav p {
    margin: 0 !important;
    padding-top: 15px;
    display: flex;
    align-items: center;
    font-weight: 500 !important;
    color: #566069 !important; }
    .sb-lang-nav p:after {
      transform: rotate(180deg);
      line-height: 62px; }
  .sb-lang-nav img {
    border-radius: 3px;
    width: 25px;
    height: 15px;
    display: block;
    margin-right: 10px; }
  .sb-lang-nav:hover ul {
    display: block; }

/*
 * -----------------------------------------------------------
 * RTL
 * -----------------------------------------------------------
 *
*/
.sb-articles-page.sb-rtl .sb-articles-body .sb-grid img + h2, .sb-articles-page.sb-rtl .sb-articles-body .sb-grid img + h2 + p {
  margin-left: 0;
  margin-right: 65px; }
.sb-articles-page.sb-rtl .sb-articles-body .sb-parent-category-box img, .sb-articles-page.sb-rtl .sb-articles-body .sb-grid > a img {
  right: 20px;
  left: auto; }
.sb-articles-page.sb-rtl .sb-articles-body .sb-parent-category-box img {
  left: auto;
  right: 0; }
  .sb-articles-page.sb-rtl .sb-articles-body .sb-parent-category-box img + div {
    margin-left: 0;
    margin-right: 80px; }
.sb-articles-page.sb-rtl .sb-subcategory-articles > a:before {
  content: "\74";
  left: 20px;
  right: auto;
  top: 0; }

.sb-read-more-cnt .sb-btn {
  min-width: 250px; }

.sb-articles-list-nav {
  max-width: 205px;
  padding-right: 30px;
  margin: 40px 0 40px 15px;
  position: -webkit-sticky;
  position: sticky;
  top: 30px;
  max-height: calc(100vh - var(--offset, 100px));
  max-width: 205px;
  min-width: 205px; }

.sb-articles-list-nav .sb-title {
  font-weight: 500;
  font-size: 18px;
  margin: 0 0 15px 0; }

.sb-articles-list-nav .sb-scroll-area > div > div > a {
  display: block;
  text-decoration: none;
  padding: 10px 0;
  color: #566069;
  font-size: 13px;
  line-height: 23px;
  letter-spacing: .3px;
  padding: 5px 15px 5px 0;
  transition: all 0.4s; }
  .sb-articles-list-nav .sb-scroll-area > div > div > a:hover {
    color: #028be5; }

.sb-articles-list-nav .sb-articles-nav .sb-scroll-area {
  max-height: 100%; }

.sb-articles-list-nav .sb-scroll-area > div + div {
  margin-top: 30px; }

.sb-articles-list-nav a.sb-active {
  font-weight: 500;
  color: #24272a !important; }

/*
 * -----------------------------------------------------------
 * RESPONSIVE
 * -----------------------------------------------------------
 *
*/
@media (max-width: 768px) {
  .sb-articles-page .sb-articles-header > div {
    min-width: 0;
    width: 100%; }

  .sb-read-more-cnt .sb-btn {
    min-width: 0; }

  .sb-articles-cnt {
    flex-direction: column-reverse; }

  .sb-articles-nav {
    flex-direction: column-reverse;
    border: 1px solid #d4d4d4;
    display: block;
    position: relative;
    margin: 15px;
    padding: 15px;
    max-height: none;
    max-width: none;
    border-radius: 4px;
    margin-bottom: 15px; }
    .sb-articles-nav .sb-articles-nav-mobile-btn {
      display: block; }
    .sb-articles-nav > div:last-child {
      display: none; }
    .sb-articles-nav .sb-scroll-area {
      overflow: auto;
      margin: 15px 0 0 -16px; }
      .sb-articles-nav .sb-scroll-area a {
        opacity: 1;
        border-left: none !important; } }

/*# sourceMappingURL=articles.css.map */
