@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
* {

  padding: 0;
  border: 0;
  outline: 0;
}





body{
    background-color: gray;
   
}



#header, #footer {
    height: 100px;
}


#header {
    position: relative;
}




#logo {
    height: 100%;
    width: 100px;
 background: url(logo.png) no-repeat center center;
 background-size: contain;
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
}


#reset .cardFunction {
    height: 100%;
    width: 100px;
 background: url(reset.png) no-repeat center center;
 background-size: contain;
 position: absolute;
 right: 0;
}




#body {
    height: 700px;
}

















table {
  margin: auto;
  background: url("card1.jpg");
     background-repeat: no-repeat;
    background-size: 100%;
   
}
  

th {
  height: 105px;
 
}




#card {
  height: 750px;
  width: 500px; 
  padding: 11px 9px 155px 12px;
  border-spacing: 5px;
}


#card td:hover {
  -moz-box-shadow: inset 0 0 35px #BBB;
  -webkit-box-shadow: inset 0 0 35px #BBB;
  box-shadow: inset 0 0 35px #BBB;
  -moz-transition-duration: 0.25s;
  -o-transition-duration: 0.25s;
  -webkit-transition-duration: 0.25s;
  transition-duration: 0.25s;
}
#card .dabbedRed {
  background: #0b1bff8c;
}


@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}