@charset "UTF-8";
.read-more-card-label:after, #basic-post-grid .card-grid-card:after {
  content: "Lue lisää";
  font-size: 0.8824em;
  background: #359f41;
  padding: 4px 8px 4px 8px;
  z-index: 1000;
  transition: all 1s;
  opacity: 0;
  pointer-events: none;
  text-decoration: none !important;
  font-weight: bold;
  color: #fff !important;
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 4px 0 0 0;
}
.read-more-card-label:hover:after, #basic-post-grid .card-grid-card:hover:after {
  opacity: 1;
}

.cards-grid {
  width: 100%;
  display: grid;
  grid-template: 1fr/1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 32px;
  margin-bottom: 32px;
}
@media only screen and (min-width: 1921px) {
  .cards-grid {
    grid-template: 1fr/1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}
@media only screen and (max-width: 640px) {
  .cards-grid {
    grid-column: span 1;
    grid-gap: 8px;
  }
}
.cards-grid.first-two-cards-big .card-grid-card:nth-child(1),
.cards-grid.first-two-cards-big .card-grid-card:nth-child(2) {
  grid-row: span 1;
  grid-column: span 3;
}
@media only screen and (max-width: 640px) {
  .cards-grid.first-two-cards-big .card-grid-card:nth-child(1),
  .cards-grid.first-two-cards-big .card-grid-card:nth-child(2) {
    grid-column: span 6;
  }
}
@media only screen and (min-width: 1921px) {
  .cards-grid.first-two-cards-big .card-grid-card:nth-child(1),
  .cards-grid.first-two-cards-big .card-grid-card:nth-child(2),
  .cards-grid.first-two-cards-big .card-grid-card:nth-child(3) {
    grid-column: span 4;
  }
}
.cards-grid .card-grid-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.02);
  background: #fff;
  width: 100%;
  grid-row: span 1;
  grid-column: span 3;
  padding: 0;
  margin: 0;
}
@media only screen and (max-width: 640px) {
  .cards-grid .card-grid-card {
    grid-column: span 6;
  }
  .cards-grid .card-grid-card a {
    display: grid;
    grid-template: 1fr/100px 1fr;
    padding: 10px;
  }
  .cards-grid .card-grid-card a .image-holder {
    float: left;
    height: 100px;
    grid-row: span 1;
    grid-column: span 1;
  }
  .cards-grid .card-grid-card a .image-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cards-grid .card-grid-card a .text-holder {
    float: left;
    grid-row: span 1;
    grid-column: span 1;
    padding: 5px 0 0px 0px;
    box-sizing: border-box;
    width: 100%;
  }
  .cards-grid .card-grid-card a .text-holder p {
    padding-left: 10px;
    margin: 0;
    padding-bottom: 0;
  }
  .cards-grid .card-grid-card a .text-holder :nth-child(3) {
    display: none;
  }
  .cards-grid .card-grid-card a .text-holder h2 {
    padding-left: 10px;
  }
}
@media only screen and (min-width: 800px) {
  .cards-grid .card-grid-card {
    grid-column: span 2;
  }
}
@media only screen and (min-width: 1921px) {
  .cards-grid .card-grid-card {
    grid-column: span 3;
  }
}
.cards-grid .card-grid-card:hover {
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
}
.cards-grid .card-grid-card.hidden {
  display: none;
}
.cards-grid .card-grid-card .image-holder {
  padding: 0;
  margin: 0;
}
.cards-grid .card-grid-card .image-holder img {
  width: 100%;
  display: block;
}
.cards-grid .card-grid-card .text-holder {
  padding: 25px;
}
.cards-grid .card-grid-card .text-holder h2 {
  font-size: 17px !important;
  line-height: 22px !important;
  text-transform: none;
  margin: 0 0 10px 0 !important;
  color: #060606;
}
@media only screen and (max-width: 640px) {
  .cards-grid .card-grid-card .text-holder h2 {
    font-size: 16px !important;
    line-height: 20px !important;
  }
}
@media only screen and (max-width: 480px) {
  .cards-grid .card-grid-card .text-holder h2 {
    font-size: 15px !important;
    line-height: 19px !important;
  }
}
@media only screen and (max-width: 380px) {
  .cards-grid .card-grid-card .text-holder h2 {
    font-size: 14px !important;
    line-height: 18px !important;
  }
}
.cards-grid .card-grid-card .text-holder p {
  font-size: 15px !important;
  line-height: 19px !important;
  text-transform: none;
  margin: 0 0 10px 0 !important;
  color: #48535e;
}
.cards-grid .card-grid-card .text-holder p .read-more {
  color: #fff;
}
@media only screen and (max-width: 480px) {
  .cards-grid .card-grid-card .text-holder p {
    font-size: 14px !important;
    line-height: 18px !important;
  }
}
@media only screen and (max-width: 380px) {
  .cards-grid .card-grid-card .text-holder p {
    font-size: 13px !important;
    line-height: 16px !important;
  }
}
.cards-grid .card-grid-card .text-holder p.tapahtuma-date {
  text-transform: uppercase;
  font-weight: 100;
  color: #565c60;
}
.cards-grid .card-grid-card .text-holder p.card-info {
  text-transform: uppercase;
  font-weight: 100;
  color: #565c60;
}
.cards-grid a:hover {
  text-decoration: none !important;
}
.cards-grid a:hover .read-more {
  text-decoration: underline !important;
  font-weight: bold;
  color: #34861d !important;
}
.cards-grid .card-grid-card-span-1 {
  grid-row: span 1;
  grid-column: span 1;
}
.cards-grid.cards-grid-3-columns {
  grid-template: 1fr/1fr 1fr 1fr;
}
@media only screen and (max-width: 880px) {
  .cards-grid.cards-grid-3-columns {
    grid-template: 1fr/1fr 1fr;
  }
}
@media only screen and (max-width: 520px) {
  .cards-grid.cards-grid-3-columns {
    grid-template: 1fr/1fr;
  }
}
.cards-grid.cards-grid-2-columns {
  grid-template: 1fr/1fr 1fr;
}

.card-grid-card a {
  height: 100%;
  width: 100%;
  display: inline-block;
  box-sizing: border-box;
}

.card-grid-card-big a .socool-block-text p {
  color: #fff;
}
.card-grid-card-big a .socool-block-text h1, .card-grid-card-big a .socool-block-text h2, .card-grid-card-big a .socool-block-text h3, .card-grid-card-big a .socool-block-text h4, .card-grid-card-big a .socool-block-text h5, .card-grid-card-big a .socool-block-text h6 {
  color: #fff;
}

#basic-post-grid {
  width: 100%;
  display: grid;
  grid-template: 1fr/1fr 1fr 1fr;
  grid-gap: 32px;
  margin-bottom: 32px;
}
@media only screen and (max-width: 799px) {
  #basic-post-grid {
    grid-gap: 16px;
    margin-bottom: 16px;
    grid-template: 1fr/1fr;
  }
  #basic-post-grid .card-grid-card:hover {
    box-shadow: none;
  }
  #basic-post-grid .card-grid-card a {
    display: grid;
    grid-template: 1fr/100px 1fr;
  }
  #basic-post-grid .card-grid-card a .image-holder {
    float: left;
    height: 100px;
    grid-row: span 1;
    grid-column: span 1;
  }
  #basic-post-grid .card-grid-card a .image-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #basic-post-grid .card-grid-card a .text-holder {
    float: left;
    grid-row: span 1;
    grid-column: span 1;
    padding: 5px 0 0 20px;
  }
  #basic-post-grid .card-grid-card a .text-holder p {
    display: none;
  }
}
#basic-post-grid .card-grid-card {
  position: relative;
  overflow: hidden;
  /* box-shadow: 0 0 14px rgba(0, 0, 0, 0.02); */
  background: #fff;
  width: 100%;
  grid-row: span 1;
  grid-column: span 1;
  padding: 0;
  margin: 0;
}
@media only screen and (min-width: 800px) {
  #basic-post-grid .card-grid-card:hover {
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
  }
}
#basic-post-grid .card-grid-card .image-holder {
  padding: 0;
  margin: 0;
}
#basic-post-grid .card-grid-card .image-holder img {
  width: 100%;
}
#basic-post-grid .card-grid-card .text-holder {
  padding: 25px;
}
#basic-post-grid .card-grid-card .text-holder h2 {
  font-size: 1em !important;
  line-height: 1.5 !important;
  text-transform: none;
  margin: 0 0 10px 0 !important;
  color: #060606;
}
#basic-post-grid .card-grid-card .text-holder p {
  font-size: 0.9em !important;
  line-height: 1.3 !important;
  text-transform: none;
  margin: 0 0 10px 0 !important;
  color: #48535e;
}
#basic-post-grid a:hover {
  text-decoration: none !important;
}
#basic-post-grid a:hover .text-holder p .read-more {
  transition: all 1s;
  opacity: 1;
}
#basic-post-grid .card-grid-card-span-1 {
  grid-row: span 1;
  grid-column: span 1;
}
#basic-post-grid.cards-grid-3-columns {
  grid-template: 1fr/1fr 1fr 1fr;
}
#basic-post-grid.cards-grid-2-columns {
  grid-template: 1fr/1fr 1fr;
}

@media only screen and (max-width: 799px) {
  .mobile-small-card, #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(4),
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(5),
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(6), #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(3),
  #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(4),
  #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(5), .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(4),
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(5),
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(6), .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(2),
  .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(3),
  .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(4), .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(1),
  .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(2),
  .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(3), .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(3),
  .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(4),
  .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(5) {
    grid-gap: 4px;
    grid-template: 1fr/1fr;
    margin-left: -16px;
    border-radius: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 16px;
  }
  .mobile-small-card.card-grid-card:hover, #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:hover:nth-child(4),
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:hover:nth-child(5),
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:hover:nth-child(6), #front-top-cards.grid-2-med-3-small .card-grid-card:hover:nth-child(3),
  #front-top-cards.grid-2-med-3-small .card-grid-card:hover:nth-child(4),
  #front-top-cards.grid-2-med-3-small .card-grid-card:hover:nth-child(5), .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:hover:nth-child(4),
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:hover:nth-child(5),
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:hover:nth-child(6), .front-bottom-cards.grid-1-big-3-small .card-grid-card:hover:nth-child(2),
  .front-bottom-cards.grid-1-big-3-small .card-grid-card:hover:nth-child(3),
  .front-bottom-cards.grid-1-big-3-small .card-grid-card:hover:nth-child(4), .front-bottom-cards.grid-3-small-2-med .card-grid-card:hover:nth-child(1),
  .front-bottom-cards.grid-3-small-2-med .card-grid-card:hover:nth-child(2),
  .front-bottom-cards.grid-3-small-2-med .card-grid-card:hover:nth-child(3), .front-bottom-cards.grid-2-med-3-small .card-grid-card:hover:nth-child(3),
  .front-bottom-cards.grid-2-med-3-small .card-grid-card:hover:nth-child(4),
  .front-bottom-cards.grid-2-med-3-small .card-grid-card:hover:nth-child(5) {
    box-shadow: none;
  }
  .mobile-small-card.card-grid-card a, #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(4) a,
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(5) a,
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(6) a, #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(3) a,
  #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(4) a,
  #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(5) a, .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(4) a,
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(5) a,
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(6) a, .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(2) a,
  .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(3) a,
  .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(4) a, .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(1) a,
  .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(2) a,
  .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(3) a, .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(3) a,
  .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(4) a,
  .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(5) a {
    display: grid;
    grid-template: 1fr/100px 1fr;
  }
  .mobile-small-card.card-grid-card a .image-holder, #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(4) a .image-holder,
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(5) a .image-holder,
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(6) a .image-holder, #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(3) a .image-holder,
  #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(4) a .image-holder,
  #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(5) a .image-holder, .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(4) a .image-holder,
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(5) a .image-holder,
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(6) a .image-holder, .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(2) a .image-holder,
  .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(3) a .image-holder,
  .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(4) a .image-holder, .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(1) a .image-holder,
  .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(2) a .image-holder,
  .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(3) a .image-holder, .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(3) a .image-holder,
  .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(4) a .image-holder,
  .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(5) a .image-holder {
    float: left;
    height: 100px;
    grid-row: span 1;
    grid-column: span 1;
  }
  .mobile-small-card.card-grid-card a .image-holder img, #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(4) a .image-holder img,
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(5) a .image-holder img,
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(6) a .image-holder img, #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(3) a .image-holder img,
  #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(4) a .image-holder img,
  #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(5) a .image-holder img, .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(4) a .image-holder img,
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(5) a .image-holder img,
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(6) a .image-holder img, .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(2) a .image-holder img,
  .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(3) a .image-holder img,
  .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(4) a .image-holder img, .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(1) a .image-holder img,
  .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(2) a .image-holder img,
  .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(3) a .image-holder img, .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(3) a .image-holder img,
  .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(4) a .image-holder img,
  .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(5) a .image-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .mobile-small-card.card-grid-card a .text-holder, #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(4) a .text-holder,
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(5) a .text-holder,
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(6) a .text-holder, #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(3) a .text-holder,
  #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(4) a .text-holder,
  #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(5) a .text-holder, .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(4) a .text-holder,
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(5) a .text-holder,
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(6) a .text-holder, .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(2) a .text-holder,
  .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(3) a .text-holder,
  .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(4) a .text-holder, .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(1) a .text-holder,
  .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(2) a .text-holder,
  .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(3) a .text-holder, .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(3) a .text-holder,
  .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(4) a .text-holder,
  .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(5) a .text-holder {
    float: left;
    grid-row: span 1;
    grid-column: span 1;
    padding: 5px 0 20px 0px;
    box-sizing: border-box;
    width: 100%;
  }
  .mobile-small-card.card-grid-card a .text-holder h2, #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(4) a .text-holder h2,
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(5) a .text-holder h2,
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(6) a .text-holder h2, #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(3) a .text-holder h2,
  #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(4) a .text-holder h2,
  #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(5) a .text-holder h2, .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(4) a .text-holder h2,
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(5) a .text-holder h2,
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(6) a .text-holder h2, .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(2) a .text-holder h2,
  .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(3) a .text-holder h2,
  .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(4) a .text-holder h2, .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(1) a .text-holder h2,
  .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(2) a .text-holder h2,
  .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(3) a .text-holder h2, .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(3) a .text-holder h2,
  .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(4) a .text-holder h2,
  .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(5) a .text-holder h2 {
    padding-left: 20px;
  }
  .mobile-small-card.card-grid-card a .text-holder p, #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(4) a .text-holder p,
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(5) a .text-holder p,
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(6) a .text-holder p, #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(3) a .text-holder p,
  #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(4) a .text-holder p,
  #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(5) a .text-holder p, .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(4) a .text-holder p,
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(5) a .text-holder p,
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(6) a .text-holder p, .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(2) a .text-holder p,
  .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(3) a .text-holder p,
  .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(4) a .text-holder p, .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(1) a .text-holder p,
  .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(2) a .text-holder p,
  .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(3) a .text-holder p, .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(3) a .text-holder p,
  .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(4) a .text-holder p,
  .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(5) a .text-holder p {
    padding-left: 20px;
  }
}

.front-bottom-cards {
  width: 100%;
  display: grid;
  grid-template: 1fr/1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 32px;
  margin-bottom: 32px;
}
@media only screen and (max-width: 1000px) {
  .front-bottom-cards {
    grid-gap: 20px;
  }
}
@media only screen and (max-width: 799px) {
  .front-bottom-cards {
    grid-template: 1fr/1fr 1fr !important;
    grid-gap: 4px;
    margin-bottom: 16px;
  }
  .front-bottom-cards .card-grid-card {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    grid-row: span 1 !important;
    grid-column: span 2 !important;
  }
}
.front-bottom-cards .card-grid-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.02);
  background: #fff;
  width: 100%;
  grid-row: span 1;
  grid-column: span 1;
  padding: 0;
  margin: 0;
  border-radius: 4px;
}
.front-bottom-cards .card-grid-card:after {
  content: "Lue lisää";
  font-size: 0.8824em;
  background: #359f41;
  color: #000;
  padding: 4px 8px 4px 8px;
  z-index: 1000;
  transition: all 1s;
  opacity: 0;
  pointer-events: none;
  text-decoration: none !important;
  font-weight: bold;
  color: #fff !important;
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 4px 0 0 0;
}
.front-bottom-cards .card-grid-card.socool-block .socool-block-text {
  box-sizing: border-box;
  padding: 30px;
}
.front-bottom-cards .card-grid-card.socool-block .socool-block-text h1, .front-bottom-cards .card-grid-card.socool-block .socool-block-text h2, .front-bottom-cards .card-grid-card.socool-block .socool-block-text h3, .front-bottom-cards .card-grid-card.socool-block .socool-block-text h4, .front-bottom-cards .card-grid-card.socool-block .socool-block-text h5, .front-bottom-cards .card-grid-card.socool-block .socool-block-text h6, .front-bottom-cards .card-grid-card.socool-block .socool-block-text p {
  text-align: center;
}
.front-bottom-cards .card-grid-card:hover {
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
}
.front-bottom-cards .card-grid-card .image-holder {
  padding: 0;
  margin: 0;
}
.front-bottom-cards .card-grid-card .image-holder img {
  width: 100%;
}
.front-bottom-cards .card-grid-card .text-holder {
  padding: 25px;
}
.front-bottom-cards .card-grid-card .text-holder h2 {
  font-size: 17px !important;
  line-height: 22px !important;
  text-transform: none;
  margin: 0 0 10px 0 !important;
  color: #060606;
}
.front-bottom-cards .card-grid-card .text-holder p {
  font-size: 15px !important;
  line-height: 19px !important;
  text-transform: none;
  margin: 0 0 10px 0 !important;
  color: #48535e;
}
.front-bottom-cards .card-grid-card .text-holder p .read-more {
  color: #fff;
}
.front-bottom-cards .card-grid-card:hover:after {
  opacity: 1;
}
.front-bottom-cards a:hover {
  text-decoration: none !important;
}
.front-bottom-cards a:hover .read-more {
  text-decoration: underline !important;
  font-weight: bold;
  color: #34861d !important;
}
.front-bottom-cards .card-grid-card {
  grid-row: span 1;
  grid-column: span 2;
}
.front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(1) {
  grid-column: span 3;
}
.front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(2) {
  grid-column: span 3;
}
@media screen and (max-width: 799px) {
  .front-bottom-cards.grid-2-med-3-small .card-grid-card:nth-child(2) {
    margin-bottom: 16px !important;
  }
}
.front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(4) {
  grid-column: span 3;
}
@media screen and (max-width: 799px) {
  .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(4) {
    margin-top: 16px !important;
  }
}
.front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(5) {
  grid-column: span 3;
}
@media screen and (max-width: 799px) {
  .front-bottom-cards.grid-3-small-2-med .card-grid-card:nth-child(5) {
    margin-bottom: 16px !important;
  }
}
.front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(1) {
  grid-column: span 6;
}
@media screen and (max-width: 799px) {
  .front-bottom-cards.grid-1-big-3-small .card-grid-card:nth-child(1) {
    margin-bottom: 16px !important;
  }
}
.front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(1) {
  grid-column: span 6;
}
@media screen and (max-width: 799px) {
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(1) {
    margin-bottom: 16px !important;
  }
}
.front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(2) {
  grid-column: span 3;
}
@media screen and (max-width: 799px) {
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(2) {
    margin-bottom: 16px !important;
  }
}
.front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(3) {
  grid-column: span 3;
}
@media screen and (max-width: 799px) {
  .front-bottom-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(3) {
    margin-bottom: 16px !important;
  }
}
.front-bottom-cards.grid-2-big-2-med .card-grid-card:nth-child(1),
.front-bottom-cards.grid-2-big-2-med .card-grid-card:nth-child(2) {
  grid-column: span 6;
}
@media screen and (max-width: 799px) {
  .front-bottom-cards.grid-2-big-2-med .card-grid-card:nth-child(1),
  .front-bottom-cards.grid-2-big-2-med .card-grid-card:nth-child(2) {
    margin-bottom: 16px !important;
  }
}
.front-bottom-cards.grid-2-big-2-med .card-grid-card:nth-child(3),
.front-bottom-cards.grid-2-big-2-med .card-grid-card:nth-child(4) {
  grid-column: span 3;
}
@media screen and (max-width: 799px) {
  .front-bottom-cards.grid-2-big-2-med .card-grid-card:nth-child(3),
  .front-bottom-cards.grid-2-big-2-med .card-grid-card:nth-child(4) {
    margin-bottom: 16px !important;
  }
}
.front-bottom-cards.grid-2-med-2-med .card-grid-card {
  grid-column: span 3;
}

#front-top-cards-container {
  padding-bottom: 10px;
  padding-top: 33px;
  display: block;
  float: left;
  width: 100%;
}

#front-top-cards {
  width: 100%;
  display: grid;
  grid-template: 1fr/1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 32px;
  margin-bottom: 32px;
}
@media only screen and (max-width: 1000px) {
  #front-top-cards {
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 799px) {
  #front-top-cards {
    margin-bottom: 16px;
    grid-gap: 16px;
    grid-template: 1fr/1fr 1fr !important;
  }
  #front-top-cards .card-grid-card {
    grid-row: span 1 !important;
    grid-column: span 2 !important;
  }
}
#front-top-cards .card-grid-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.02);
  background: #fff;
  width: 100%;
  grid-row: span 1;
  grid-column: span 1;
  padding: 0;
  margin: 0;
  border-radius: 4px;
}
#front-top-cards .card-grid-card:hover {
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
}
#front-top-cards .card-grid-card .image-holder {
  padding: 0;
  margin: 0;
}
#front-top-cards .card-grid-card .image-holder img {
  width: 100%;
}
#front-top-cards .card-grid-card .text-holder {
  padding: 25px;
}
#front-top-cards .card-grid-card .text-holder h2 {
  font-size: 17px !important;
  line-height: 22px !important;
  text-transform: none;
  margin: 0 0 10px 0 !important;
  color: #060606;
}
#front-top-cards .card-grid-card .text-holder p {
  font-size: 15px !important;
  line-height: 19px !important;
  text-transform: none;
  margin: 0 0 10px 0 !important;
  color: #48535e;
}
#front-top-cards .card-grid-card .text-holder p .read-more {
  color: #fff;
}
#front-top-cards a:hover {
  text-decoration: none !important;
}
#front-top-cards a:hover .read-more {
  text-decoration: underline !important;
  font-weight: bold;
  color: #34861d !important;
}
#front-top-cards .card-grid-card {
  grid-row: span 1;
  grid-column: span 2;
}
#front-top-cards .card-grid-card:not(.no-read-more):after {
  content: "Lue lisää";
  font-size: 0.8824em;
  background: #359f41;
  padding: 4px 8px 4px 8px;
  z-index: 1000;
  transition: all 1s;
  opacity: 0;
  pointer-events: none;
  text-decoration: none !important;
  font-weight: bold;
  color: #fff !important;
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 4px 0 0 0;
}
#front-top-cards .card-grid-card:hover:after {
  opacity: 1;
}
#front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(1) {
  grid-column: span 3;
}
#front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(2) {
  grid-column: span 3;
}
@media screen and (max-width: 799px) {
  #front-top-cards.grid-2-med-3-small .card-grid-card:nth-child(2) {
    margin-bottom: 16px !important;
  }
}
#front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(1) {
  grid-column: span 6;
}
@media screen and (max-width: 799px) {
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(1) {
    margin-bottom: 16px !important;
  }
}
#front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(2) {
  grid-column: span 3;
}
@media screen and (max-width: 799px) {
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(2) {
    margin-bottom: 16px !important;
  }
}
#front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(3) {
  grid-column: span 3;
}
@media screen and (max-width: 799px) {
  #front-top-cards.grid-1-big-2-med-3-small .card-grid-card:nth-child(3) {
    margin-bottom: 16px !important;
  }
}
#front-top-cards.grid-2-big-2-med .card-grid-card:nth-child(1),
#front-top-cards.grid-2-big-2-med .card-grid-card:nth-child(2) {
  grid-column: span 6;
}
@media screen and (max-width: 799px) {
  #front-top-cards.grid-2-big-2-med .card-grid-card:nth-child(1),
  #front-top-cards.grid-2-big-2-med .card-grid-card:nth-child(2) {
    margin-bottom: 16px !important;
  }
}
#front-top-cards.grid-2-big-2-med .card-grid-card:nth-child(3),
#front-top-cards.grid-2-big-2-med .card-grid-card:nth-child(4) {
  grid-column: span 3;
}
@media screen and (max-width: 799px) {
  #front-top-cards.grid-2-big-2-med .card-grid-card:nth-child(3),
  #front-top-cards.grid-2-big-2-med .card-grid-card:nth-child(4) {
    margin-bottom: 16px !important;
  }
}/*# sourceMappingURL=cards-grid.css.map */