body {
  background: #e2e1e0;
  text-align: center;
}

.header {
  height: 80px;
  
}

.card {
  background: #fff;
  border-radius: 2px;
  display: inline-block;
  height: 300px;
  margin: 1rem;
  position: relative;
  width: 300px;
}

.card-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    
}

.card-1:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

}

img {
  height: 300px;
  width: 300px;
}

#monitoring:hover {
  cursor: pointer;
  background-image: url("../img/BMS_monitoring_bg.png");
}

#easywc:hover {
  cursor: pointer;
  background-image: url("../img/easywc_bg.png");
}
#muvideck:hover {
  cursor: pointer;
  background-image: url("../img/muvideck_bg.png");
}

#muvideck:hover {
  cursor: pointer;
  background-image: url("../img/muvideck_bg.png");
}

#teamvortex:hover {
  cursor: pointer;
  background-image: url("../img/lottery_bg.png");
}

#photo:hover {
  cursor: pointer;
  background-image: url("../img/photo_bg.png");
}
#smartorder:hover {
  cursor: pointer;
  background-image: url("../img/smartorder_bg.png");
}

.inactive {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */
}
.invalid {
  border: 2px solid red !important;
  
}