body > main {
  padding: 30px 0 40px;
}

#section1 {
  min-height: 700px;
}

  #section1 > section {
    max-width: 540px;
    width: 100%;
  }

#slideshow {
  margin: 0 25px 0 0;
}

  #slideshow article {
    max-width: 540px;
    height: 700px;
    padding-bottom: 150px;
  }

  #slideshow .article-content a {
    font-size: 30px;
  }

#section1 aside {
  max-width: 540px;
  width: 100%;
}

  #section1 aside header article {
    max-width: 255px;
    height: 335px;
  }

  #section1 aside footer article {
    max-width: 540px;
    height: 335px;
  }

  #section1 aside article a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  #section1 aside article p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

.section-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 11px 0 20px;
  background: #fff;
  border-bottom: 1px solid rgba(100, 100, 100, 0.3);
}

  .section-header h3 {
    font-family: TatishviliMetal;
    font-size: 16px;
    font-weight: bold;
    color: #1a1a1a;
  }

#section2 {
  margin: 30px 0 0;
}

#topic-wrapper {
  width: 100%;
  padding: 16px;
  border-radius: 3px;
  background: #fff;
}

  #topic-wrapper label {
    font-family: TatishviliMetal;
    font-size: 16px;
    font-weight: bold;
    color: #2c2c2c;
  }

  #topic-wrapper .tag {
    display: inline-block;
    position: relative;
    top: initial;
    left: initial;
  }

#topic-aligner {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 0 14px 0 16px;
  overflow: hidden;
  white-space: nowrap;
}

#topic-scroller {
  width: 1300px;
}

#topic-wrapper .tag {
  margin: 0 8px 0 0;
  cursor: pointer;
}

  #topic-wrapper .tag.active {
    background: #f0f0f0;
    border: 1px solid #f0f0f0;
    color: #9d9d9d;
  }

#topic-wrapper button {
  position: relative;
  width: 30px;
  height: 30px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25px 25px;
  border: 1px solid rgba(100, 100, 100, 0.3);
}

#topic-search {
  background-image: url(../images/icons/search-black.svg);
  border-radius: 3px;
  margin: 0 10px;
}

#topic-wrapper button#slider-left {
  background-image: url(../images/icons/arrow-left.svg);
  background-size: 8px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

#topic-wrapper button#slider-right {
  background-image: url(../images/icons/arrow-right.svg);
  background-size: 8px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

#topic-articles {
  position: relative;
  margin: 30px 0 0;
  padding: 0 0 15px;
  overflow: hidden;
}

  #topic-articles article {
    display: inline-block;
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
    max-width: unset;
    min-width: 255px;
    height: 335px;
    margin: 0 30px 0 0;
  }

    #topic-articles article a,
    .transparent-article a {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }

/* 



*/
#section3 {
  position: relative;
  width: 100%;
  margin: 30px 0 0;
  padding: 0 285px 0 0;
  min-height: 750px;
}

  #section3 aside {
    position: absolute;
    top: 0;
    right: 0;
    width: 255px;
    height: 750px;
  }

    #section3 aside button {
      position: static;
    }

#popular,
#library {
  width: 100%;
}

#popular-articles {
  position: relative;
  overflow: hidden;
}

#popular-articles-aligner {
  margin: 0 0 15px;
  background: #fff;
}

.popular-item {
  -webkit-box-flex: 0;
  -ms-flex: 0;
  flex: 0;
  position: relative;
  max-width: unset;
  min-width: 275px;
  height: 335px;
  padding: 0 0 48px;
  border-radius: 0;
  background: #fff;
}

  .popular-item:nth-of-type(even) {
    border-left: 1px solid rgba(100, 100, 100, 0.2);
    border-right: 1px solid rgba(100, 100, 100, 0.2);
  }

  .popular-item img {
    max-width: 100%;
    width: 100%;
    max-height: 134px;
    -o-object-fit: cover;
    object-fit: cover;
  }

  .popular-item h3 {
    margin: 45px 0;
    padding: 0 5px 0 15px;
  }

  .popular-item img + h3 {
    margin: 5px 0;
  }

  .popular-item a {
    font-family: TatishviliMetal;
    font-size: 22px;
    font-weight: bold;
    color: #2c2c2c;
    text-decoration: none;
  }

  .popular-item footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 48px;
    padding: 0 15px 0 30px;
    border-top: 1px solid rgba(100, 100, 100, 0.2);
  }

    .popular-item footer::before {
      /*content: " ";*/
      position: absolute;
      top: 50%;
      left: 10px;
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      transform: translate(0, -50%);
      width: 14px;
      height: 14px;
      background-size: 100% 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url(/assets/images/icons/clock-gray.svg);
    }

  .popular-item .date {
    color: #9d9d9d;
  }

#library {
  height: 345px;
  margin: 15px 0 0;
  background: -webkit-gradient( linear, left top, left bottom, from(#f0f0f0), color-stop(50%, #f0f0f0), color-stop(50%, #f0f0f0), color-stop(50%, white), to(white) );
  background: -webkit-linear-gradient(top, #f0f0f0 0%, #f0f0f0 50%, #f0f0f0 50%, white 50%, white 100%);
  background: -o-linear-gradient(top, #f0f0f0 0%, #f0f0f0 50%, #f0f0f0 50%, white 50%, white 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), color-stop(50%, #f0f0f0), color-stop(50%, #f0f0f0), color-stop(50%, white), to(white));
  background: linear-gradient(to bottom, #f0f0f0 0%, #f0f0f0 50%, #f0f0f0 50%, white 50%, white 100%);
}

#library-aligner {
  position: relative;
  overflow: hidden;
}

#library-scroller {
  position: relative;
}

#library-aligner .transparent-article {
  min-width: 240px;
  margin: 0 17px;
}

#library .section-header {
  margin: 0 0 20px;
  background: transparent;
  border-bottom: 0;
}

.file-img-wrapper img {
  width: 55px;
  height: 65px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#news-wrapper {
  position: relative;
  height: calc(100% - 40px);
  overflow: hidden;
}

.news {
  padding: 14px 28px 20px;
  font-family: TatishviliMetal;
  background: #fff;
  border-bottom: 1px solid rgba(100, 100, 100, 0.2);
}

  .news h3 {
    margin: 0 0 11px;
    font-size: 20px;
    font-weight: bold;
    color: #2c2c2c;
  }

  .news a {
    text-decoration: none;
    color: #2c2c2c;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .news footer {
    position: relative;
    padding: 0 0 0 20px;
  }

    .news footer::before {
      content: "";
      position: absolute;
      top: 46%;
      left: 0;
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      transform: translate(0, -50%);
      width: 12px;
      height: 12px;
      background-image: url(../images/icons/clock-gray.svg);
      background-size: contain;
      background-position: center;
    }

    .news footer .date {
      font-size: 14px;
      font-weight: bold;
      color: #9d9d9d;
    }

#section4 {
  margin: 30px 0 0;
  border-radius: 3px;
  overflow: hidden;
}

  #section4 .section-header {
    position: relative;
  }

    #section4 .section-header .tag {
      top: 50%;
      left: unset;
      right: 15px;
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      transform: translate(0, -50%);
    }

@media (max-width: 1024px) {
  #section1 {
    min-height: 583px;
  }

  #slideshow article {
    max-width: 450px;
    height: 583px;
    padding-bottom: 100px;
  }

  .article-content p {
    display: none;
  }

  #section1 aside {
    max-width: 450px;
  }

    #section1 aside header article {
      max-width: 210px;
      height: 279px;
    }

    #section1 aside footer article {
      height: 279px;
    }

  #topic-articles article {
    min-width: 210px;
    height: 281px;
  }

  #section3 {
    padding: 0 245px 0 0;
  }

    #section3 aside {
      width: 210px;
    }
}

@media (max-width: 768px) {
  #section1 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

    #section1 > section,
    #section1 aside {
      max-width: 100%;
    }

    #section1 #slideshow {
      max-width: 100%;
      margin: 0;
    }

  #slideshow article {
    max-width: 100%;
    height: 890px;
  }

  #section1 aside article {
    margin: 30px 0 0;
  }

  #section1 aside header article {
    max-width: 330px;
    height: 427px;
  }

    #section1 aside header article:nth-of-type(1) {
      margin-right: 15px;
    }

    #section1 aside header article:nth-of-type(2) {
      margin-left: 15px;
    }

  #section1 aside footer article {
    max-width: 100%;
    height: 428px;
  }

  #topic-articles article {
    min-width: 330px;
    height: 427px;
  }

  #section3 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
  }

  #popular .popular-item {
    min-width: 350px !important;
    height: 410px;
  }

  #library {
    height: 490px;
  }

    #library .section-header {
      margin: 0 0 70px;
    }

    #library .transparent-article {
      min-width: 355px;
      height: 389px;
      margin: 0;
    }

  .transparent-article > div {
    width: 161px;
    height: 205px;
  }

  #section3 aside {
    position: static;
    margin: 30px 0 0;
    width: 100%;
    height: 490px;
  }
}

@media (max-width: 500px) {
  article {
    max-width: 100% !important;
    height: 440px !important;
    padding-bottom: 45px !important;
  }

  #section1 aside header {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

    #section1 aside header article:nth-of-type(1),
    #section1 aside header article:nth-of-type(2) {
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
    }

  #section1 aside footer article {
    max-width: 100%;
    height: 200px !important;
  }

  #topic-wrapper {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  #topic-aligner {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    order: 1;
    min-width: 100%;
    margin: 15px 0 0;
  }

  #topic-articles article {
    min-width: 320px;
  }
}