html,
body {
	height: 90%;
}
body {
  background: #000;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
img {
  position: absolute;
  line-height: 60px;
  text-align: right;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  display: block;
  outline: none;
/*  opacity: 0.8; */
}
img:hover {
  background: transparent;
  cursor: pointer;
}
.wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 60%;
  max-height: 90%;
}
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.scene {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
#topm1 img{
  top: -20%;
  left: 0;
  width: 25.254022%;
}
#topm2 img {
  top: -20%;
  left: 25.254022%;
  width: 11.2%;
}
#topm3 img {
  top: -20%;
  left: 36.325148%;
  width: 12.785774%;
}
#topm4 img {
  top:  -20%;
  right: 36.071126%;
  width: 14.9%;
}
#topm5 img {
  top: -20%;
  right: 0%;
  width: 36.071126%;
}

.figure1:after{position:absolute;top:60%;left:6%;}
#topm1:hover:after{content:url(../img/top_m_logo_10s.png);}
.figure2:after{position:absolute;top:40%;left:22%;}
#topm2:hover:after{content:url(../img/top_m_logo_95s.png);}
.figure3:after{position:absolute;top:18%;left:38%;}
#topm3:hover:after{content:url(../img/top_m_logo_00s.png);}
.figure4:after{position:absolute;top:8%;right:42%;}
#topm4:hover:after{content:url(../img/top_m_logo_05s.png);}
.figure5:after{position:absolute;top:30%;right:10%;}
#topm5:hover:after{content:url(../img/top_m_logo_15s.png);}

#toplinkred{
	padding:0;
	background:transparent;
	position:fixed;
	left:30px;
	bottom:94px;
	z-index:19;
	cursor:default
}
.toplinkred {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #e4e4e4;
    cursor: pointer;
    display: inline-block;
    margin: 0;
}
.toplinkred:hover {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #000000;
    cursor: pointer;
    display: inline-block;
    margin: 0;
}
/*#toplinkgraffitired{
	padding:0;
	background:transparent;
	position:fixed;
	left:30px;
	bottom:50px;
	z-index:19;
	cursor:default
}
.toplinkgraffitired {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ff0000;
    cursor: pointer;
    display: inline-block;
    margin: 0;
}
.toplinkgraffitired:hover  {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #000000;
    cursor: pointer;
    display: inline-block;
    margin: 0;
}*/

@media (max-width: 768px) {

body {
   padding: 0;
}
.wrapper {
  width: 100%;
  padding-bottom: 60%;
  max-height: 90%;
}
#topm1 img{
  top: -20%;
  left: 0;
  width: 25.254022%;
}
#topm2 img {
  top: -20%;
  left: 25.254022%;
  width: 11.2%;
}
#topm3 img {
  top: -20%;
  left: 36.325148%;
  width: 12.785774%;
}
#topm4 img {
  top:  -20%;
  right: 36.071126%;
  width: 14.9%;
}
#topm5 img {
  top: -20%;
  right: 0%;
  width: 36.071126%;
}
.figure1:after{position:absolute;top:60%;left:6%;}
#topm1:hover:after{content:url(../img/top_m_logo_10s.png);}
.figure2:after{position:absolute;top:40%;left:5%;}
#topm2:hover:after{content:url(../img/top_m_logo_95s.png);}
.figure3:after{position:absolute;top:18%;left:10%;}
#topm3:hover:after{content:url(../img/top_m_logo_00s.png);}
.figure4:after{position:absolute;top:8%;right:42%;}
#topm4:hover:after{content:url(../img/top_m_logo_05s.png);}
.figure5:after{position:absolute;top:30%;right:5%;}
#topm5:hover:after{content:url(../img/top_m_logo_15s.png);}
}