html {
  /* To make use of full height of page*/
  min-height: 100%;
  margin: 0;
  background: #485563;
  background: -webkit-linear-gradient(to top, #29323c, #485563);
  background: linear-gradient(to top, #29323c, #485563);
  background-repeat: no-repeat;
  background-size: cover;
}

body {
  min-height: 100%;
  margin: 0;
  background: none;
}

.card {
  /*box-shadow: 0 0 5px 0px rgba(0,0,0,0.2);*/
  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);
  border-radius: 2px;
}
.card:hover {
  /*box-shadow: 0 0 10px 0px rgba(0,0,0,0.4);*/
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card:hover a.mainlink {
  color: #fff !important;
}

.card span i {
  opacity: .55;
}

.card:hover span i {
  opacity: .80;
}

.card-title {
  font-family: 'Varela Round', sans-serif !important;
}

.card:hover i {
  text-shadow: 1px 1px 2px #444;
}

.header {
  padding-top: 10px;
  text-align: right;
}

.header .btn-dark  {
  opacity: .7;
}

.error {
  text-align: center;
  color: #fff;
}

input[type='password'].form-control {
  color: #fff !important;
  border: #6c757d;
  background-color: #3D4855;
}