#bar {
  position: fixed;
  top: 0px;
  width: 100%;
  max-height: 150px;
}
#logo {
  position: absolute;
  float: left;
  left: 2.62%;
  top: 3.33%;
  width: 60.38%;
  height: 47%;
  z-index: 8;
}
.button {
    cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 15;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.button:hover {
  cursor: pointer;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.button:active {
  cursor: none;
  -webkit-transform: scale(1.4);
  -moz-transform: scale(1.4);
  -ms-transform: scale(1.4);
  -o-transform: scale(1.4);
  transform: scale(1.4);
  opacity: 0.7;
}
.home {
    cursor: pointer;
  position: absolute;
  display: inline-block;
  top: 0%;
  left: 0%;
  background: transparent;
  width: 9.38%;
  height: 11.33%;
}
.home:hover {
  background-color: #FFF300;
  opacity: 0.2;
}
.back {
    cursor: pointer;
  position: absolute;
  top: 0%;
  left: 9.38%;
  display: inline-block;
  background: transparent;
  width: 12%;
  height: 11.33%;
}
.back:hover {
  background-color: #FFF300;
  opacity: 0.2;
}
.friends {
  position: absolute;
  display: inline-block;
  width: 31.44%;
  height: 5.25%;
  left: 65.63%;
  top: 23.75%;
  background-color: transparent;
}
.friends:hover {
  border: 1px solid #19B2FF;
}
.friends.active {
  padding-left: 15%;
  background-color: white;
}
.friends #text {
  border: none;
  display: inline-block;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 82%;
  height: 90%;
  background-color: transparent;
}
.friends #text.active {
  padding-left: 5%;
  background-color: white;
  font-size: 100%;
  border: 1px solid #19B2FF;
}
.fwd {
    cursor: pointer;
    position: absolute;
    bottom: 0%;
    right: 0%;
    display: inline-block;
    background: transparent;
    width: 22%;
    height: 23%;
}
.fwd:hover {
    background-color: #FFF300;
    opacity: 0.2;
}

.box {
    background-color: transparent;
    width: 15.25%;
    height: 7.25%;

    position: absolute;
    display: inline-block;
    top: 57.67%;
}

.left-box {
    left: 26.38%;
}

.right-box {
    left: 54.50%;
}

.left {
    cursor: pointer;

    position:absolute;
    top: 29.58%;
    left: 18.19%;
    width: 29.38%;
    height: 39.33%;

    background-color: #00B201;
    opacity: 0.05;
}

.left:hover {
    background-color: #00B201;
    opacity: 0.4;
}

.right {
    cursor: pointer;

    position:absolute;
    top: 29.58%;
    left: 47.56%;
    width: 29.38%;
    height: 39.33%;

    background-color: #00B201;
    opacity: 0.05;
}

.right:hover {
    background-color: #00B201;
    opacity: 0.4;
}

.bigger{
    background-color: #00B201;
    opacity: 0.4;
}

h5 {
    margin: 0px 0px;
}

p {
    font-family: sans-serif;
    margin: 0px 0px;
}

.answer {
    display: inline-block;
    width: 0%;
    height: 100%;

    font-family: sans-serif;
    font-size: 2em;
    text-align: center;
    vertical-align: middle;
}

.enter {
    display: inline-block;
    background-image: url('../img/enter.png');
    background-size: cover;
    width: 45%;
    height: 65%;
    vertical-align: middle;

}

.number {
    vertical-align: middle;
    display: inline-block;
    width: 45%;
    height: 60%;

    font-size: 2em;
    vertical-align: middle;
}