.gridAreaNews {
  background-color: white;
  max-width: 1366px;
  width: 1366px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: 120px minmax(45vh, min-content) min-content;
  grid-template-columns: 100px repeat(2, 1fr) minmax(100px, min-content);
  grid-gap: 2px;
  grid-template-areas: "head head head head"
 "side-l hero hero side-r"
 "side-l main main side-r"
 "foot foot foot foot"; }
  .gridAreaNews > * {
    background-color: transparent; }
  .gridAreaNews .header {
    grid-area: head;
    align-self: center;
    justify-self: center;
    z-index: 2;
    top: 1%; }
  .gridAreaNews .header img {
    z-index: 1;
    margin: 0 auto;
    min-width: 300px;
    max-width: 400px; }
  .gridAreaNews .sidebar-l {
    grid-area: side-l;
    justify-self: center;
    margin-right: 15%;
    margin-top: 0.5rem; }
  .gridAreaNews .sidebar-r {
    grid-area: side-r; }
  .gridAreaNews .main-content {
    grid-area: main;
    background-color: white;
    height: 100%;
    width: 100%; }
  .gridAreaNews .hero {
    grid-area: hero;
    padding: 0.3rem; }
  .gridAreaNews .heroServices {
    grid-area: hero;
    padding: 0.3rem; }
  .gridAreaNews .footer {
    grid-area: foot;
    margin-top: 10px;
    min-height: 50px;
    margin-top: auto; }

.newsColumnContainer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%; }

h1 {
  text-align: center;
  margin-top: 2em; }

.colNews {
  padding-bottom: 20px;
  color: #424346;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); }

.colNews h3,
.colNews p {
  margin: 0;
  padding: 0 1.179rem; }

.colNews h3 {
  margin: 0.75em 0 0.5em; }

.colNews p {
  margin-bottom: 1.179rem;
  text-align: left;
  font-size: 0.8rem; }

.colNews .btnNews {
  margin-left: 0.353rem; }

.btnNews {
  padding: 8px 15px 6px;
  padding: 0.5rem 0.9rem 0.4rem;
  font-size: 0.7em;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border-radius: 3px;
  background: #212121;
  transition: all 0.275s; }

.btnNews:link,
.btnNews:visited {
  color: #fff;
  margin-left: 1.179rem; }

.btnNews:hover,
.btnNews:focus {
  background: #ffe630;
  color: #000000;
  text-decoration: none; }

.thumbnailNews {
  line-height: 0;
  overflow: hidden; }

.thumbnailNews img {
  transition: all 0.275s; }

.thumbnailNews:hover img,
.thumbnailNews:focus img {
  filter: blur(2px) saturate(0); }

.centerNews {
  margin-top: 2em;
  text-align: center; }

.centerNews a {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.1em;
  transition: all 0.275s; }

.centerNews a:hover,
.centerNews a:focus {
  opacity: 0.8;
  padding-bottom: 2px; }

.flexNews .colNews img {
  width: 100%;
  height: auto; }

.flexNews {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: auto; }

.flexNews .colNews {
  display: flex;
  flex-direction: column;
  flex: 1 1 300px;
  margin: 1em 0.5em; }

.flexNews .colNews .btnNews {
  align-self: flex-start;
  margin-top: auto; }

/* Taken from news.html style */
/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto; }

/* Hide the images by default */
.mySlides {
  display: none; }

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 5rem;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none; }

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px; }

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  text-decoration: none; }

/* Caption text */
.text {
  font-family: "Open Sans Condensed", sans-serif;
  font-weight: 700;
  font-size: 3.243rem;
  /* Computed - 55px */
  letter-spacing: 0.14rem;
  /* Computed - 2px */
  line-height: 3.243rem;
  /* Computed - 55px */
  color: #f2f2f2;
  /* font-size: 15px; */
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  text-shadow: 2px 2px 8px #000; }

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0; }

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease; }

.active,
.dot:hover {
  background-color: #717171; }

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s; }

@-webkit-keyframes fade {
  from {
    opacity: 0.4; }
  to {
    opacity: 1; } }

@keyframes fade {
  from {
    opacity: 0.4; }
  to {
    opacity: 1; } }