@font-face {
  font-family: futura;
}
@font-face {
  font-family: futura;
}
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  float:inherit;
}

.scene {
  position: relative;
  height: 100%;
  z-index: 50;
  overflow: hidden;
  border: thin;
  
}

a{
		color: #FF0000;
text-decoration:overline;

}


a:visited {
	color: #FF0000;
	text-decoration: none;
}


.scene {
  position: relative;
  height: 100%;
  z-index: 50;
  overflow: hidden;
}


.content {
  position: absolute;
  width: 200rem;
  height: 127.5rem;
  left: calc(50% - 100rem);
  top: calc(50% - 63.75rem);
  will-change: top, left;
  z-index: 100;
  will-change: transform;
}

.block {
  position: absolute;
}
.block:nth-child(1) {/*web*/
	top: 15rem;
	color: #FF0000;
	left: 85rem;
}
.block:nth-child(1) .sec-img {
  margin-left: 2rem;
  margin-top: -5rem;
}
.block:nth-child(1) .link {
  bottom: 5rem;
	color: #FF0000;
  left: 3rem;
}
.block:nth-child(1) .sec-info {
  bottom: 3.5rem;
	color: #FF0000;
  left: 3rem;
}
.block:nth-child(2) {/*identität*/
  top: 35rem;
  left: 135rem;
}
.block:nth-child(2) .sec-img {
  margin-left: -10rem;
  margin-top: -12rem;
}
.block:nth-child(2) .link {
	color: #FF0000;
	top: 4rem;
	left: 4rem;
}
.block:nth-child(2) .sec-info {
	color: #FF0000;
	top: 2.5rem;
	left: 4rem;
}
.block:nth-child(3) {/*schmerz*/
  top: 70rem;
  left: 150rem;
}
.block:nth-child(3) .sec-img {
  margin-right: 5rem;
  margin-top: 3rem;
}
.block:nth-child(3) .link {
	color: #FF0000;
	top: 3rem;
	left: 4rem;
}
.block:nth-child(3) .sec-info {
	color: #FF0000;
	top: 6rem;
	left: 4rem;
}
.block:nth-child(4) {/*trivonum*/
  top: 35rem;
  left: 10rem;
}

.block:nth-child(4) .sec-img {
  display: block;
  margin-left: -10rem;
  margin-top: -30rem;
}
.block:nth-child(4) .link {
	color: #FF0000;
	top: 3rem;
	right: 5rem;
}
.block:nth-child(4) .sec-info {
	color: #FF0000;
	top: 6rem;
	right: 5rem;
}
.block:nth-child(5) {/*audewe*/
	top: 0rem;
	left: 25rem;
}
.block:nth-child(5) .sec-img {
  margin-left: -20rem;
  margin-top: 5rem;
}
.block:nth-child(5) .link {
	color: #FF0000;
	bottom: 4rem;
	right: 3rem;
}
.block:nth-child(5) .sec-info {
	color: #FF0000;
	bottom: 9rem;
	right: 5rem;
}

.block:nth-child(6) {/*ngj*/
	top: 80rem;
	left: 70rem;
}
.block:nth-child(6) .sec-img {
  margin-left: 3rem;
  margin-top: 12rem;
}
.block:nth-child(6) .link {
	color: #FF0000;
	top: 8rem;
	left: -6rem;
}
.block:nth-child(6) .sec-info {
	color: #FF0000;
	bottom: 10rem;
	right: 60rem;
	
	}
.block img {
	position: relative;
	opacity: 0.3;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.5s 0.3s;
	transition: opacity 0.3s, transform 0.5s 0.3s;
	will-change: transform;
	background-image: url(.../img/Mock_Up_duo.jpg);
}
.block .prime-img {
  z-index: 50;
  width: 35rem;
}
.block .sec-img {
  vertical-align: top;
  z-index: 100;
  width: 20rem;
}
.block .link {
	position: absolute;
	z-index: 200;
	color: #000;
	font-family: Metropolis;
	font-size: 3rem;
	line-height: 1;
	cursor: pointer;
}
.block .sec-info {
	position: absolute;
	z-index: 400;
	color: #FF0000;
	font-size: 1.5rem;
	line-height: 1;
	font-family: futura;
	-webkit-transform: rotateX(90deg);
	transform: rotateX(90deg);
	opacity: 0;
	-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.53, 0.11, 0.76, 1.38), opacity 0.3s 0.5s;
	transition: transform 0.5s cubic-bezier(0.53, 0.11, 0.76, 1.38), opacity 0.3s 0.5s;
	will-change: transform;
	-webkit-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}
.block:hover img {
  opacity: 1;
  -webkit-transform: scale(1.3);
      -ms-transform: scale(1.3);
          transform: scale(1.3);
}
.block:hover .sec-info {
  opacity: 1;
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
  -webkit-transition: -webkit-transform 0.5s 0.3s cubic-bezier(0.53, 0.11, 0.76, 1.38), opacity 0.3s;
          transition: transform 0.5s 0.3s cubic-bezier(0.53, 0.11, 0.76, 1.38), opacity 0.3s;
}