@font-face {
	font-family: 'DSDIGI';
	src: url('../fonts/DSDIGI.eot');
	src: local('DSDIGI'),
  url('../fonts/DSDIGI.woff') format('woff'),
  url('../fonts/DSDIGI.ttf') format('truetype');
}

body {
  background: url(../img/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.head {
  background-color: #969696;
  border-color: black;
  border-style: solid;
  border-radius: 0px 0px 0px 15px;
  border-width: 3px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 1);
  height: 8em;
  z-index: 3;
}

.reader {
  height: 1.5em;
  z-index: 2;
}

.footer {
  background-color: #969696;
  border-color: #555555;
  border-style: solid;
  border-width: 5px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 1), 0 -35px 0px 0px #040404, 0px 0px 0px rgba(0, 0, 0, 1), 1px 2px 4px rgba(0, 0, 0, 1);
  height: 4em;
  z-index: 1;
}

.msg {
  background-color: #134c39;
  border-color: #05100c;
  border-style: solid;
  border-width: 5px;
  color: white;
  font-size: 1.5em;
  height: 2em;
}

input {
  width: 100%;
}

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

.pt-34 {
	padding-top: 34rem;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent;
  border-color: transparent;
  color: transparent;
}

/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 160px;
  width: 300px;
  cursor: pointer;
  background-image: url("../img/card.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: -30px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  height: 160px;
  width: 300px;
  background-image: url("../img/card.png");
  background-size: 100% 120%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}