@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Arapey);
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800);
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");



.utn-featured-articles-container {
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
}

.utn-title-h1 {
  font-weight: 500;
  font-size: 35px;
}
@media screen and (min-width: 500px) {
  .utn-title-h1 {
    font-size: 39px;
  }
}
@media screen and (min-width: 800px) {
  .utn-title-h1 {
    font-size: 42px;
  }
}

.utn-title-h2 {
  font-size: 25px;
  font-weight: 700;
}
@media screen and (min-width: 500px) {
  .utn-title-h2 {
    font-size: 28px;
  }
}
@media screen and (min-width: 800px) {
  .utn-title-h2 {
    font-size: 30px;
  }
}

.utn-title-h3 {
  font-size: 16px;
}

.utn-body-p {
  font-weight: 300;
}

.utn-body-p {
  font-size: 16px;
}

.utn-title-h1, .utn-title-h3, .utn-body-p {
  margin: 0;
  padding: 0;
}

.utn-title-h2 {
  margin-bottom: 10px;
}

.utn-text-margin-0 {
  margin: 0;
}

.utn-button {
  font-weight: 400;
  color: black;
  border: 1.5px solid black;
  border-radius: 3px;
  padding: 15px;
  margin: 15px auto 30px auto;
  max-width: 200px;
  font-size: 12px;
}
@media screen and (min-width: 500px) {
  .utn-button {
    font-size: 12px;
  }
}
@media screen and (min-width: 800px) {
  .utn-button {
    font-size: 14px;
  }
}
.utn-button:hover {
  border: 1.5px solid grey;
}

.utn-text-link {
  color: inherit;
  font-weight: 200;
  font-size: 14px;
}
@media screen and (min-width: 800px) {
  .utn-text-link {
    margin: -10px 0;
  }
}

.utn-button, .utn-text-link {
  text-decoration: none;
  transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.utn-button:hover, .utn-text-link:hover {
  color: grey;
}

.utn-bg-image {
  background-position: center;
  background-size: cover;
}

.utn-display-none {
  display: none;
}
@media screen and (min-width: 500px) {
  .utn-display-none {
    display: block;
  }
}

@media screen and (min-width: 800px) {
  .utn-desktop-no-display {
    display: none;
  }
}

.utn-mobile-no-display {
  display: none;
}
@media screen and (min-width: 800px) {
  .utn-mobile-no-display {
    display: block;
  }
}

.utn-center-text {
  text-align: center;
}

.utn-underline {
  text-decoration: underline;
}

.utn-img {
  background-size: cover;
  background-position: center;
}

/* ------------ UNIQUE CONTENT STARTS HERE ------------  */
.utn-featured-articles-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 10px auto 30px auto;
  max-width: 1200px;
  padding: 0 10px;
}
  .utn-featured-articles-container {
    margin: 40px auto 80px auto;
    padding: 0 20px 0 20px;
  }
  
  .utn-blog-title {
	  color: #000000;
}
@media screen and (min-width: 800px) {
  .utn-featured-articles-container {
    margin: 40px auto 80px auto;
    padding: 0 20px 0 20px;
  }
}

.utn-featured-article-section-title {
  padding: 0 15px 15px 0;
}
@media screen and (min-width: 600px) {
  .utn-featured-article-section-title {
    padding: 0 15px 30px 0;
  }
}

.utn-blog-description, .utn-blog-title {
  padding-bottom: 10px;
}

.utn-blog-title {
  font-weight: 500;
}

.utn-blog-text-link {
  color: #50CB75;
  transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.utn-blog-text-link:hover {
  color: grey;
}

.utn-blog-text {
  background-color: #F4F4F4;
  padding: 20px;
}

.utn-display-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-direction: column;
}

.utn-flex-image {
  flex: 1 1 300px;
  margin: 10px;
  min-height: 300px;
}

.utn-blog-grid__left1-right4 {
  display: flex;
  flex-wrap: wrap;
}

@supports (display: grid) {
  /* --- Content Grid Areas ---  */
  .utn-blog-card-1 {
    grid-area: utn-blog-card-1;
  }

  .utn-blog-card-2 {
    grid-area: utn-blog-card-2;
  }

  .utn-blog-card-3 {
    grid-area: utn-blog-card-3;
  }

  .utn-blog-card-4 {
    grid-area: utn-blog-card-4;
  }

  .utn-blog-card-5 {
    grid-area: utn-blog-card-5;
  }

  /* -- Fallback Styles --  */
  .utn-flex-image {
    margin: 0;
  }
  @media screen and (min-width: 600px) {
    .utn-flex-image {
      width: 100%;
      margin: 0;
    }
  }

  /* --- Left 1 Right 4 ---  */
  .utn-blog-grid__left1-right4 {
    display: grid;
    min-height: 700px;
    grid-gap: 15px;
    grid-template-columns: 1fr;
    grid-template-rows: 300px 300px 300px 300px 300px;
    grid-template-areas: "utn-blog-card-1"  "utn-blog-card-2"  "utn-blog-card-3"  "utn-blog-card-4"  "utn-blog-card-5";
  }
  @media screen and (min-width: 600px) {
    .utn-blog-grid__left1-right4 {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 350px 350px 350px;
      grid-template-areas: "utn-blog-card-1   utn-blog-card-1"  "utn-blog-card-2   utn-blog-card-3"  "utn-blog-card-4   utn-blog-card-5";
    }
  }
  @media screen and (min-width: 1000px) {
    .utn-blog-grid__left1-right4 {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      grid-template-areas: "utn-blog-card-1 utn-blog-card-1  utn-blog-card-2   utn-blog-card-3" "utn-blog-card-1 utn-blog-card-1   utn-blog-card-4   utn-blog-card-5";
    }
  }
}