css

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900);

:root{
  --orange-darkest: rgba(255,125,0,1);
  --orange-dark: rgba(255,134,0,0.5);
  --orange-light: rgba(255,165,0,0.5);

  --blue-darkest: #433a3f;
  --blue-dark: #5b7c99;
  --blue-light: #246374;
  --blue-lightest: #b5c1ca;

  --blue-grey-light: #acbacd;
  --blue-grey-dark: #808994;
  --blue-grey-darkest: #5a6475;

  --grey-dark: rgb(190, 190, 190);
  --grey-darkest: rgb(100, 100, 100);

  --shade-background: var(--grey-darkest);
  --box-shadow--hover-color: #f5e7cb;
  --box-shadow-color: var(--blue-grey-dark);
  --box-shadow-light-color: var(--blue-grey-light);
  --card-background: var(--grey-dark);
  --column-shadow-color: var(--blue-lightest);
  --column-text-color: var(--blue-grey-dark);
}

html,
body {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  height: 100%;
  width: 100%;
  background: var(--shade-background);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

.column
{
  float: left;
  width: 30.00%;
  padding: 10px;
  height: 70px;
  box-shadow: 0 2px 5px 0 var(--column-shadow-color),0 2px 10px 0 var(--column-shadow-color);
  background-color: #FFFFFF;
  color: var(--column-text-color);
}

.wrapper {
  display: table;
  height: 100%;
  width: 100%;
}

.container-fostrap {
  display: table-cell;
  padding: 1em;
  text-align: center;
  vertical-align: middle;
}
.fostrap-logo {
  width: 300px;
  margin-bottom:15px
}
h1.heading {
  color: #fff;
  font-size: 1.15em;
  font-weight: 900;
  margin: 0 0 0.5em;
  color: #505050;
}
@media (min-width: 450px) {
  h1.heading {
    font-size: 3.55em;
  }
}
@media (min-width: 760px) {
  h1.heading {
    font-size: 3.05em;
  }
}
@media (min-width: 900px) {
  h1.heading {
    font-size: 3.25em;
    margin: 0 0 0.3em;
  }
}
.card {
  display: block;
  margin-left: 60px;
  margin-right: 60px;
  margin-bottom: 60px;
  line-height: 1.42857143;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 5px 0 var(--box-shadow-color),0 2px 10px 0 var(--box-shadow-light-color);
  transition: box-shadow .25s;

}
.card:hover {
  box-shadow: 0 8px 17px 0 var(--box-shadow--hover-color),0 2px 10px 0 var(--box-shadow-light-color);
}
.img-card {
  width: 100%;
  height:200px;
  border-top-left-radius:2px;
  border-top-right-radius:2px;
  display:block;
    overflow: hidden;
}
.img-card img{
  width: 100%;
  height: 200px;
  object-fit:cover;
  transition: all .25s ease;
}
.card-content {
  padding:30px;
  text-align:left;
  color: white;
  background-color: var(--card-background)
}
.card-title {
  margin-top:0px;
  font-weight: 700;
  color: white;
  font-size: 1.65em;
}
.card-title a {
  color: white;
  text-decoration: none !important;
}
.card-read-more {
  border-top: 1px solid #D4D4D4;
  color: white;
  background-color: var(--card-background)
}
.card-read-more a {
  text-decoration: none !important;
  padding:10px;
  font-weight:400;
  color: white;
  text-transform: uppercase
}
.cp-text{ color: rgba(255,255,255,.7); text-shadow: 0 1px rgba(255, 255, 255, 0.1);}