/***************** GENERAL CONFIG *****************/
*,
body,
html{
  margin:0;
  padding:0;
  white-space:nowrap;
  position:absolute;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  overflow:hidden;
}
html,
body{
    width:100%;
    height:100%;
    background:black;
}
#whole{
  height:100%;
  width:100%;
  background:url('museum1.jpg');
  background-repeat:no-repeat;
}
#ipad{
  top:10px;
  left:150px;
  width:600px;
  height:405px;
  background:url('white.png');
  background-size:100%;
  -webkit-animation: rotatipad 4s infinite alternate;
  animation: rotatipad 4s infinite alternate;
}
@keyframes rotatipad{
  from{left:150px;top:10px;}
  25%{left:150px;top:50px}
  50%{left:250px;top:100px;}
  to{left:250px;top:10px;}
}
@-webkit-keyframes rotatipad{
  from{left:150px;top:10px;}
  25%{left:150px;top:50px}
  50%{left:250px;top:100px;}
  to{left:250px;top:10px;}
}
#screen{
  background:rgba(0,50,100,0.25);
  width:81%;
  margin-left:10%;
  height:91%;
  margin-top:3%;

}
/********** Questbox ***************/
.questbox{
  height:20%;
  width:30%;
  background:rgba(255,255,255,0.7);
}
.questbox h2{
  top:10%;
  font-size:90%;
  text-align:center;
  width:100%;
  font-style:italic;
}
.questbox hr{
  margin-top:10px;
  top:50px;
}
.questbox p{
  top:40%;
  width:100%;
  font-size:130%;
}
.questbox .find{
  left:7%;
}
.questbox .scanit{
  left:47%;
}
.questbox .findsquare{
  width:14%;
  opacity:0.8;
  top:45%;
  left:29%;
}

/********** Focus square ***********/

.focus{
  left:65%;
  top:22%;
  width:6%;
  height:8%;
  border-radius:3px;
  -webkit-animation: fadefade 2s linear infinite alternate;
  animation: fadefade 2s linear infinite alternate;
}
@keyframes fadefade{
  from{opacity:1;}
  50%{opacity:0;}
  to{opacity:1;}
}
@-webkit-keyframes fadefade{
  from{opacity:1;}
  50%{opacity:0;}
  to{opacity:1;}
}