body {
  font-size: 2.3vmax;
}
p {
  clear: both;
  margin: 50px;
  line-height: 5vh;
}
.hidden {
  visibility: hidden;
}
.grey {
  color: grey;
}
#matrix td:nth-of-type(even),
#matrix thead tr:nth-of-type(odd),
#matrix tbody tr:nth-of-type(even),
#matrix th:nth-of-type(odd) {
  background: rgba(245,245,245,0.5);
}
#matrix-div {
  position: absolute;
  width: 800px;
  left: 8%;
  top: 120px;
}
#matrix, #matrix th, #matrix td {
  border-color: #EEEEEE;
  vertical-align: middle;
  text-align: center;
  padding: 0;
  border-radius: 7px;
}
#matrix td,
#matrix th {
  width: 100px;
}
#matrix img {
  margin-top: -10%;
  height: 110%;
}
.friends-selected {
  background: #4cae4c !important;
  color: white;
  font-size: 12px;
  line-height: 50px;
}
.friends-header-hover {
  background: #4cae4c !important;
  color: #4cae4c;
}
.friends-hover {
  background: #c9e8c9 !important;
  color: #3c8b3c;
  font-size: 12px;
  line-height: 50px;
}
.not-friends-selected {
  background: #5bc0de !important;
  color: white;
  font-size: 12px;
  line-height: 50px;
}
.not-friends-header-hover {
  background: #5bc0de !important;
  color: #5bc0de;
}
.not-friends-hover {
  background: #b0e0ef !important;
  color: #337ab7;
  font-size: 12px;
  line-height: 50px;
}
.neutral-hover {
  background: #ffbb33 !important;
  color: #ff8800;
}
.fixed-position-below {
  position: absolute;
  width: 90%;
  top: 80%;
  left: 50%;
  margin-left: -45%;
  text-align: center;
}
.fixed-position-mid {
  position: absolute;
  width: 90%;
  top: 35%;
  left: 50%;
  margin-left: -45%;
  text-align: center;
}
.fixed-position-mid-below {
  position: absolute;
  width: 90%;
  top: 55%;
  left: 50%;
  margin-left: -45%;
  text-align: center;
}
.fixed-position-above {
  position: absolute;
  width: 90%;
  top: 10%;
  left: 50%;
  margin-left: -45%;
  text-align: center;
}
.fixed-position-upper-left {
  position: absolute;
  float: left;
  top: 0;
  left: 0;
}
.fixed-position-upper-right {
  position: absolute;
  float: right;
  top: 0;
  right: 0;
}
.zero-space-top {
  margin-top: 0;
  padding-top: 0;
}
.margin-top {
  margin-top: 50px;
}
.player-example {
  height: 280px;
  height: 37vh;
  margin: 5px;
}
.left-img {
  float: left;
  margin: 0 50px 50px 0;
}
.right-img {
  float: right;
  margin: 0 0 50px 50px;
}
.center-img {
  margin: -250px auto 0 auto;
  margin: -38vh auto 0 auto;
}
.img-div {
  width: 150px;
  height: 150px;
  width: 25vmin;
  height: 25vmin;
}
.small-img-div {
  width: 100px;
  height: 100px;
}
.img-text {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 20px;
  line-height: 30px;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  background: rgba(255,255,255,0.5);
}
.image-cropper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid grey;
}
img {
  display: inline;
  margin: -5% -100% 0 -100%;
  height: 105%;
  width: auto;
}
.unknown-friend {
  width: 100%;
  height: 100%;
  margin: auto;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background-color: #5bc0de;
  box-shadow: inset 0 0 0 5px white;
}
.unknown-friend p {
  margin: 0;
  font-size: 200%;
  color: white;
}
.friends-img-div {
  margin-top: 40px;
  padding: 5px;
  width: 400px;
  width: 70vmin;
  height: auto;
  border-top: 1px solid #DDDDDD;
}
#friend-text {
  margin: -23px 0 0 0;
  font-size: 15px;
  line-height: 15px;
  color: #999999;
}
.friend-img {
  text-align: center;
  margin: 8px;
  width: 60px;
  height: 60px;
  width: 9vmin;
  height: 9vmin;
}
.slider {
  position: absolute;
  width: 800px;
  height: 20px;
  margin-left: -400px;
  width: 50vw;
  height: 5vw;
  margin-left: -25vw;
  left: 50%;
  top: 70%;
}
.slider-div {
  position: absolute;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  width: 50vw;
  margin-left: -25vw;
  height: 24px;
  border-radius: 5px;
}
.slider-div .left-num {
  position: absolute;
  left: 0%;
}
.slider-div .right-num {
  position: absolute;
  right: 0%;
}
.slider-inner-div {
  position: absolute;
  width: 70%;
  left: 30%;
}
.slider .slider-selection {
  background: #5bc0de;
}
.slider .tooltip {
  font-size: 18px;
}
.bar-div {
  position: absolute;
  vertical-align: center;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  width: 50vw;
  margin-left: -25vw;
  height: 24px;
  border-radius: 5px;
}
.middle {
  position: absolute;
  top: 60%;
}
.lower {
  position: absolute;
  top: 80%;
}
.submit-btn {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translateX(-50%);
}
textarea {
  font-size: 18px;
}
.survey {
  font-size: 23px;
  font-weight: 300;
}