/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
@import "vars.css";

body{
  font-family: 'Nunito', sans-serif;
}
header{
  color: white;
  padding-bottom: 100px;
  margin-bottom: -100px;
}
.top-bar{
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  height: 80px;
}
.logo img{
  height: 100%;
  width: auto;
}
.version{
  line-height: 50px;
}

.intro-text{
  padding: 120px 0;
  text-align: center;
}
h1,h2{
  margin: 0;
}

main{
  margin-bottom: -50px;
}
.card-image-with-bg{
  position: relative;
  height: 200px;
}
.card-image-with-bg .img-bg{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.card-image-with-bg .img {
  display: block;
  border-radius: 2px 2px 0 0;
  position: relative;
  object-fit: contain;
  width: 70%;
  height: 70%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
img.disabled{
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  opacity: 80%;
}
footer{
  padding-top: 65px;
  padding-bottom: 35px;
}
.copyrights{
  text-align: center;
  font-size: 0.8rem;
}
.card-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-content {
  height: 142px; /* this looks good on all sizes, with two- and three- line descriptions */
  overflow: hidden;
  text-overflow: ellipsis;
}

.runai-pink {
  background-color: #DF1995;
}

.runai-blue {
  background-color: #00263E;
}

@media only screen and (min-width: 0) {
  .card-content p {
    font-size: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .card-content p {
    font-size: 85%; /* or stuff will wrapp to more than 3-lines in some cases */
  }
}
@media only screen and (min-width: 1200px) {
  .card-content p {
    font-size: 100%;
  }
}