@import url('./header.css');
@import url('./footer.css');
@import url('./sliders.custom.css');
@import url('common-style.css');

.article-section {
  width: 100%;
}

.article-section .article-img img {
    width: 100%;
}

.article-section .article-header-container {
  background: linear-gradient(#B10416 96%, transparent 4%) no-repeat;
  background: -webkit-linear-gradient(#B10416 96%, transparent 4%) no-repeat;
  background: -moz-linear-gradient(#B10416 96%, transparent 4%) no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.article-section .article-header-container .article-header {
  padding-top: 50px;
  color: #000;
}
.article-section .article-content .title h1,
.article-section .article-content h1.title {
    text-align:right;
    font-size: 300%;
    font-family: 'FbForma-medium';
    max-width: 100%;
    margin: 0 auto;
    line-height: 1;
    color: #000;
}

.article-section .article-header-container .article-header .date {
  text-align: center;
  margin: 20px 0 30px 0;
  color:#fff;
}

.article-section .article-header-container .article-header .article-img img {
  max-width: 100%;
}

.article-section .article-content {
  width: 70vw;
  max-width: 70vw;
  margin: 0 auto 100px auto;
  color:#000;
}

.article-section .article-content h2.sub-title {
  font-size: 180%;
  line-height: 1;
  font-family: 'FbForma-medium';
  margin: 25px 0;
}

.article-section .article-content .text {
  font-size: 110%;
  line-height: 1.8;
}

.article-section .article-content .text img {
    max-width: 100% !important;
    height: auto !important;
    margin: 15px 0;
}

.article-content h2 a,
.article-content h2 a:hover,
.article-content h2 a:visited,
.article-content h2 a:link,
.article-content h2 a:active,
.article-content .text a,
.article-content .text a:hover,
.article-content .text a:link,
.article-content .text a:visited,
.article-content .text a:active {
    color: #000;
}

.article-header .date a,
.article-header .date a:hover,
.article-header .date a:visited,
.article-header .date a:link,
.article-header .date a:active,
.article-header .date {
    color: #fff;
}

.more-article-section {
  width: 90vw;
  max-width: 90vw;
  margin: 0 auto;
}

.more-article-section .articles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 30px;
}

.more-article-section .more-articles {
  margin: 30px 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .article-section .article-content {
    width: 90vw;
    max-width: 90vw;
  }

  .more-article-section .articles-grid {
    grid-template-columns: 1fr;
    grid-row-gap: 35px;
  }

  .article-section .article-content {
    margin-bottom: 50px;
  }
    .text img,
    .article-img img {
        max-width: 90%;
    }
    .text iframe {
        max-width: 90%;
    }
    #mediaplayer {
        display: inline-block;
    }
}

/* IE10+ CSS styles */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .article-section .article-header-container {
    display: block;
  }

  .more-article-section .articles-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .common-article {
    width: 32%;
    margin-bottom: 30px;
  }

  .common-article .article-img {
    height: 20vw;
  }
  

}

/* IE10+ CSS styles in small screens */
@media screen and (max-width: 1024px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .common-article {
    width: 100%;
  }

  .common-article .article-img {
    height: 55vw;
  }
}