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


.box.workcobox {
}

.workco {
  position: absolute;
  padding-bottom: 76px;
  width: 120px;
  text-align: left;
  margin: auto;
  right: 0;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* card fronts and backs */
.cardfront,
.cardback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}


.cardfront {
  background-color: #fff; background-color: var(--bg-color);
  border: 3px solid  #f04939;
  border: 3px solid var(--accent-color);
  color:  #f04939;
  color: var(--accent-color);
}

.cardback {
  background-color: #f04939;
  background-color: var(--accent-color);
  border: 3px solid  #f04939;
  border: 3px solid var(--accent-color);
  color: #fff; color: var(--bg-color);
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
}

/* card text */
.cardtext {
  display: inline-block;
  position: absolute;
  font-size: 17px;
  top: 0;
  left: 5px;
  margin: 5px auto;
  height: 20px;
  font-family: "Roboto", sans-serif;
  line-height: 16px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .5px;
}

/* hover effect */
.box.workcobox:hover .cardfront {
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
}

.box.workcobox:hover .cardback {
  -webkit-transform: rotateX(0);
          transform: rotateX(0);