body {
  background: #bb9b6a url("images/tile.gif");
  color: #000000;
  margin: 0;
  padding: 0;
  /*zoom: 125%;*/
}

body.answers {
  background: #333333;
  color: #CCCCCC;
}

p {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13.5px;
  font-weight: bold;
}

p.small {
  font-size: 11.5px;
}

a {
  font-weight: bold;
}

a,
a:visited {
  color: #003300;
}

a:active,
a:hover {
  color: #cbcb65;
}

#lyrLogo {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 363px;
  height: 363px;
  background: url("images/logo.gif") no-repeat;
}

#lyrText {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#lyr0 {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
}

#lyr1 {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
}

#lyr2 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
}

#lyr3 {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
}

.link A {
  display: block;
  width: 100%;
  height: 100%;
}

.lang {
  background: url("images/lang.gif") no-repeat;
}

.en:hover {
  background: url("images/en.gif") no-repeat;
}

.es:hover {
  background: url("images/es.gif") no-repeat;
}

.de:hover {
  background: url("images/de.gif") no-repeat;
}

.ru:hover {
  background: url("images/ru.gif") no-repeat;
}

.sr:hover {
  background: url("images/sr.gif") no-repeat;
}

#lyrContainer {
  position: absolute;
  width: 582px;
  height: 415px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#lyrSlide {
  position: absolute;
  width: 501px;
  height: 316px;
  top: 86px;
  left: 28px;
}

#lyrLogoMain {
  position: absolute;
  width: 108px;
  height: 108px;
  top: 14px;
  left: 474px;
  background: url("images/logo-off.gif") no-repeat;
}

#lyrLogoMain:hover {
  background: url("images/logo-on.gif") no-repeat;
}

#lyrRoll {
  position: absolute;
  width: 446px;
  height: 45px;
  left: 28px;
  top: 42px;
}

#lyrBack {
  position: absolute;
  width: 28px;
  height: 56px;
  left: 0px;
  top: 86px;
  background: url("images/nazad-off.gif") no-repeat;
}

#lyrBack:hover {
  background: url("images/nazad-on.gif") no-repeat;
}

#lyrForward {
  position: absolute;
  width: 28px;
  height: 56px;
  left: 529px;
  top: 313px;
  background: url("images/napred-off.gif") no-repeat;
}

#lyrForward:hover {
  background: url("images/napred-on.gif") no-repeat;
}

#lyrStatus {
  position: absolute;
  width: 44px;
  height: 44px;
  left: 11px;
  top: 370px;
}

#lyrAnswer {
  position: absolute;
  opacity: 0;
  width: 476px;
  height: 207px;
  left: 41px;
  top: 136px;
}

#lyrForm {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#lyrControls {
  position: absolute;
  top: 180px;
  right: 70px;
  /*top: 373px;
  right: 66px;*/
}

span.material-icons {
  opacity: 0.5;
  padding: 0 4px;
  font-size: 58px;
  /*padding: 0 24px;
  font-size: 24px;*/
}

.material-icons:hover {
  opacity: 1;
  color: #003300;
  cursor: pointer;
}