@charset "utf-8";
/* CSS Document */

/*
Articulat CF Normal
font-family: "articulat-cf", sans-serif;
font-weight: 400;
font-style: normal;

Articulat CF Normal Oblique
font-family: "articulat-cf", sans-serif;
font-weight: 400;
font-style: italic;

Articulat CF Demi Bold
font-family: "articulat-cf", sans-serif;
font-weight: 700;
font-style: normal;

Articulat CF Demi Bold Oblique
font-family: "articulat-cf", sans-serif;
font-weight: 700;
font-style: italic;

Articulat CF Heavy
font-family: "articulat-heavy-cf", sans-serif;
font-weight: 900;
font-style: normal;

Articulat CF Heavy Oblique
font-family: "articulat-heavy-cf", sans-serif;
font-weight: 900;
font-style: italic;
*/

body {font-family: "articulat-cf", sans-serif; font-weight: 500; font-style: normal;}
b {font-family: "articulat-cf", sans-serif; font-weight: 900; font-style: normal;}


h2.left-column{font-family: "articulat-cf", sans-serif; font-weight: 900; font-size:16px; font-style: normal;}
h1.right-column{font-family: "articulat-cf", sans-serif; font-weight: 900; font-size:20px; font-style: normal;}
h2.right-column{font-family: "articulat-cf", sans-serif; font-weight: 900; font-size:20px; font-style: normal;}
ul.right-column{font-family: "articulat-cf", sans-serif; font-weight: 500; font-size:16px; font-style: normal;padding:0 0 0 18px}
ul.right-column li{margin-bottom:8px}
p.right-column{font-family: "articulat-cf", sans-serif; font-weight: 500; font-size:16px; font-style: normal;}

.project-card {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.project-card img {
  display: block;
  width: 100%;
  height: auto;
}

/* Overlay background */
.project-card .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center; /* center vertically + horizontally */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Text animation */
.project-card .overlay-text {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;

  transform: translateY(-100%); /* start above view */
  transition: transform 0.4s ease;
}

/* Hover state */
.project-card:hover .overlay {
  opacity: 1;
}

.project-card:hover .overlay-text {
  transform: translateY(0); /* end centered */
}

@media (min-width: 576px) {

}

@media (min-width: 768px) {

}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {

}