body {
	background-image: url("../images/background-linework1-03.png");
	background-repeat: no-repeat;
	background-color: yellow;
	font-family: 'Oswald', sans-serif;
	font-size: 1.5vw;
	font-weight: lighter;
	margin: 0px;
	padding: 0px;
	margin-left: 8px;
	margin-right: 8px;
	/*background-size: viewport.width*/

}

p {
	padding: 25px;
	margin: 0px;
}

a {
	color: black;
}

a:hover {
	text-decoration: none;
	color: red;
}

.mars:hover {
	color: blue;
}



h1 {
	font-size: 2vw;
	font-weight: lighter;
	margin-left: 15px;
}

.center_h1 {
	text-align: center;
	font-size: 4vw;
}

div {
	/*margin: -4px;*/
	/*padding: -4px;*/
}

img {
	margin: 0px;
}

#nameplate_home {
	/*margin: 0px;*/
	/*padding: 0px;*/
	position: absolute;
	display: inline-block;
	margin-top: 8px;
	height: 92px;
}

.nameplate {
	/*margin: 0px;*/
	/*padding: 0px;*/
	/*position: absolute;*/
	/*display: inline-block;*/
	margin-top: 8px;
	height: 92px;
}

.foot {
	margin-top: 8px;
	margin-bottom: 8px;
}

#geiringer1 {
	/*display: inline-block;*/
}
#back_arrow {
	display: inline-block;
	float: right;
	margin-right: 20px;
}

.gallery {
	margin-top: 20px;
	/*margin-right: 8px;*/
	display: grid;
	/*width: viewport-width;*/
	/*max-width: width;*/
	grid-gap: 20px;
	grid-template-columns: 24vw 24vw 24vw 24vw;
	grid-template-rows: 60vh 60vh 60vh 60vh 60vh 60vh 60vh 60vh;
	/*box-sizing: border-box;*/
	overflow: hidden;

}

.g_item {
	box-sizing: border-box;
	width: 100%;
	margin: 0px;
	overflow: hidden;
	object-fit: cover;
}

.g_image {
	width: 100%;
	height: 100%;
	margin: 0px;
	overflow: hidden;
	object-fit: cover;
}

.g_album {
	box-sizing: border-box;
	width: 100%;
	margin: 0px;
	overflow: hidden;
	object-fit: cover;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}

.g_album-cover {
	height: 100%;
	margin: 0px;
	overflow: hidden;
	object-fit: cover;
	z-index: 1;
	position: absolute;
}

.g_album-cover:hover {
	opacity: 0;
}

.g_album-back {
	height: 100%;
	margin: 0px;
	overflow: hidden;
	object-fit: cover;
	z-index: 0;
	position: absolute;
}




/*SCRIPT2 PINBALL GENERATION*/

#pinball_button {
	position: absolute;
	top: 1050px;
	left:1100px;
	/*z-index: -100;*/
	/*background-color: white;*/
}



/*BUTTON 1-BIO*/

#button1 {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	visibility: visible;
	display: inline-block;
	margin-top: 142px;
	margin-left: 1150px;
	margin-right: 50px;
	

	transition: transform ease-in 0.7s;
	transform-origin: 50% 50%;
	transition-delay: 0.2s;
	z-index: 2;
}

#button1:hover {
	/*transform: matrix(8, 0, 0, 8, -700, 200);*/
	/*-ms-transform: matrix(8, 0, 0, 8, -700, 200);*/
    /*-webkit-transform: matrix(8, 0, 0, 8, -700, 200);*/
	transform-origin: 50% 50%;
} 

#bi1 {
	position: absolute;
	-webkit-clip-path: circle(16px at center);
	clip-path: circle(16px at center);
	transition: opacity ease-in 0.3s;
	opacity: 0;
}

#bi1:hover {
	opacity: 1;
}

#b1: {
	position: absolute;
}

/*BUTTON 2-PLANTERS*/

#button2 {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	visibility: visible;
	display: inline-block;
	margin-left: 1000px;
	margin-top: 150px;

	transition: transform ease-in 0.5s;
	transform-origin: 50% 50%;
	transition-delay: 0.2s;
	z-index: 1;
}

#button2:hover {
	transform-origin: 50% 50%;
}

#bi2 {
	position: absolute;
	-webkit-clip-path: circle(60px at center);
	clip-path: circle(60px at center);
	transition: opacity ease-in 0.3s;
	opacity: 0;
}

#b2: {
	position: absolute;
}



/*BUTTON 2_5-MS1*/

#button2_5 {
	position: absolute;
	top: 500px;
	left: 120px;
	display: inline-block;

	transition: transform ease-in 0.5s;
	transform-origin: 34px 55px;
	transition-delay: 0.2s;
}

#button2_5:hover {
	transform: rotate(-120deg);
	-ms-transform: rotate(-120deg); /* IE 9 */
    -webkit-transform: rotate(-120deg); /* Safari */
	transform-origin: 34px 55px;
}

#bi2_5 {
	position: absolute;
}


/*BUTTON 2_6-MS2*/

#button2_6 {
	position: absolute;
	top: 150px;
	left: 180px;
	display: inline-block;

	transition: transform ease-in 0.5s;
	transform-origin: 5px 10px;
	transition-delay: 0.2s;
}

#button2_6:hover {
	transform: scale(1.5);
	-ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari */
	transform-origin: 5px 10px;
}

#bi2_6 {
	position: absolute;
}


/*BUTTON 2_7-OBJECT ALCHEMY*/

#button2_7 {
	position: absolute;
	top: 170px;
	left: 250px;
	display: inline-block;

	transition: transform ease-in 2s;
	transform-origin: 125px 125px;
	transition-delay: 0.2s;
	z-index: 0;
}

#button2_7:hover {
	transform: rotate(2520deg);
	-ms-transform: rotate(2520deg); /* IE 9 */
    -webkit-transform: rotate(2520deg); /* Safari */
	transform-origin: 125px 125px;
}

#bi2_7 {
	position: absolute;
}


/*BUTTON 2_8-THESEUS*/

#button2_8 {
	position: absolute;
	top: 275px;
	left: 625px;
	display: inline-block;
	transform: scale(1.3);

	transition: transform ease-in 5s;
	transform-origin: 300px 300px;
	transition-delay: 0.2s;
	z-index: 0;
}

#button2_8:hover {
	transform: scale(1.5);
	/*transform: rotate(2520deg);*/
	/*-ms-transform: rotate(2520deg); /* IE 9 */
    /*-webkit-transform: rotate(2520deg); /* Safari */
	transform-origin: 300px 300px;

}

#bi2_8 {
	position: absolute;
}


/*BUTTON 3-SCULPTURE*/

#button3 {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	visibility: visible;
	display: inline-block;
	margin-left: 1242px;
	margin-top: 60px;
	margin-right: 200px;

	transition: transform ease-in 0.5s;
	transform-origin: 50% 50%;
	transition-delay: 0.2s;
}

#button3:hover {
	-ms-transform: matrix(10, 0, 0, 10, 50, 300); /* IE 9 */
    -webkit-transform: matrix(10, 0, 0, 10, 50, 300); /* Safari */ 
	transform-origin: 50% 50%;
}

#bi3 {
	position: absolute;
	-webkit-clip-path: circle(13px at center);
	clip-path: circle(13px at center);
	transition: opacity ease-in 0.3s;
	opacity: 0;
}

#bi3:hover {
	opacity: 1;
}

#b3: {
	position: absolute;
}

/*BUTTON 4-LATTICE*/

#button4 {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	visibility: visible;
	display: inline-block;
	margin-left: 300px;
	margin-top: 150px;
	margin-right: 900px;

	transition: transform ease-in 0.5s;
	transform-origin: 50% 50%;
	transition-delay: 0.2s;
}

#button4:hover {
	-ms-transform: matrix(4, 0, 0, 4, 300, -200); /* IE 9 */
    -webkit-transform: matrix(4, 0, 0, 4, 300, -200); /* Safari */
	transform-origin: 50% 50%;
}

#bi4 {
	position: absolute;
	-webkit-clip-path: polygon(30% 0, 100% 30%, 70% 100%, 0 70%);
	clip-path: polygon(30% 0, 100% 30%, 70% 100%, 0 70%);
	transition: opacity ease-in 0.3s;
	opacity: 0;
}

#bi4:hover {
	opacity: 1;
}

#b4: {
	position: absolute;
}

/*BUTTON 5-ARCH*/

#button5 {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	visibility: visible;
	display: inline-block;
	margin-left: 900px;
	margin-top: 20px;

	transition: transform ease-in 0.5s;
	transform-origin: 50% 50%;
	transition-delay: 0.2s;
}

#button5:hover {
	-ms-transform: matrix(3.27, 0, 0, 3.27, -250, -300); /* IE 9 */
    -webkit-transform: matrix(3.27, 0, 0, 3.27, -250, -300); /* Safari */
	transform-origin: 50% 50%;
}

#bi5 {
	position: absolute;
	-webkit-clip-path: circle(40px at center);
	clip-path: circle(40px at center);
	transition: opacity ease-in 0.3s;
	opacity: 0;
}

#bi5:hover {
	opacity: 1;
}

#b5: {
	position: absolute;
}

/*BUTTON 6-BAKU*/

#button6 {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	visibility: visible;
	display: inline-block;
	margin-left: 520px;
	margin-top: 150px;
	margin-right: 900px;

	transition: transform ease-in 0.5s;
	transform-origin: 50% 50%;
	transition-delay: 0.2s;
}

#button6:hover {
	-ms-transform: matrix(4, 0, 0, 3, 25, 270); /* IE 9 */
    -webkit-transform: matrix(4, 0, 0, 3, 25, 270); /* Safari */
	transform-origin: 50% 50%;
}

#bi6 {
	position: absolute;
	-webkit-clip-path: circle(20px at center);
	clip-path: circle(20px at center);
	transition: opacity ease-in 0.3s;
	opacity: 0;
}

#bi6:hover {
	opacity: 1;
}

#b6: {
	position: absolute;
}

/*BUTTON 7-CERAMIC*/

#button7 {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	visibility: visible;
	display: inline-block;
	margin-left: 420px;
	margin-top: 92px;
	margin-right: 900px;

	transition: transform ease-in 0.5s;
	transform-origin: 50% 50%;
	transition-delay: 0.2s;
}

#button7:hover {
	-ms-transform: matrix(3, 0, 0, 3, 25, 256); /* IE 9 */
    -webkit-transform: matrix(3, 0, 0, 3, 25, 256); /* Safari */
	transform-origin: 50% 50%;
}

#bi7 {
	position: absolute;
	-webkit-clip-path: circle(12px at center);
	clip-path: circle(12px at center);
	transition: opacity ease-in 0.3s;
	opacity: 0;
}

#bi7:hover {
	opacity: 1;
}

#b7: {
	position: absolute;
}

/*BUTTON 7.5 RUN AWAY!!!!*/

#button7H {
	/*position: -webkit-sticky;*/
	position: relative;
	top: 0px;
	visibility: visible;
	display: inline-block;
	margin-left: 1300px;
	margin-top: 200px;

	transition: transform ease-in 1s;
	transform-origin: 50% 50%;
	transition-delay: 0.1s;

}

#button7H:hover {
	transform: matrix(2.5, 0, 0, 2.5, -2000, -700);
	-ms-transform: matrix(2.5, 0, 0, 2.5, -2000, -700); /* IE 9 */
    -webkit-transform: matrix(2.5, 0, 0, 2.5, -2000, -700); /* Safari */
	transform-origin: 50% 50%;
}

#b7H: {
	position: absolute;
}

/*BUTTON 8-MODULON*/

#button8 {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	visibility: visible;
	display: inline-block;
	margin-left: 710px;
	margin-top: 410px;
	/*margin-right: 900px;*/

	transition: transform ease-in 0.5s;
	transform-origin: 50% 50%;
	transition-delay: 0.2s;
}

#button8:hover {
	-ms-transform: matrix(9, 0, 0, 9, 300, -350); /* IE 9 */
    -webkit-transform: matrix(9, 0, 0, 9, 300, -350); /* Safari */
	transform-origin: 50% 50%;
}

#bi8 {
	position: absolute;
	-webkit-clip-path: polygon(0% 20%, 20% 100%, 100% 80%, 80% 0%);
	clip-path: polygon(0% 20%, 20% 100%, 100% 80%, 80% 0%);
	transition: opacity ease-in 0.3s;
	opacity: 0;
}

#bi8:hover {
	opacity: 1;
}

#b8: {
	position: absolute;
}

/*BUTTON 9-GRASSHOPPER*/

#button9 {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	visibility: visible;
	display: inline-block;
	margin-left: 1280px;
	margin-top: 0px;
	margin-right: 300px;

	transition: transform 1s;
	transform-origin: 50% 50%;
	transition-delay: 0.2s;
}

#button9:hover {
	-ms-transform: matrix(4, 0, 0, 4, -600, 30); /* IE 9 */
    -webkit-transform: matrix(4, 0, 0, 4, -600, 30); /* Safari */
	transform-origin: 50% 50%;
}

#bi9 {
	position: absolute;
	-webkit-clip-path: polygon(0% 100%, 17% 0%, 95% 65%);
	clip-path: polygon(0% 100%, 17% 0%, 95% 65%);
	transition: opacity ease-in 0.3s;
	opacity: 0;
}

#bi9:hover {
	opacity: 1;
}

#b9: {
	position: absolute;
}


/*SCRIPT1 TORUS-ROTATION*/

#torus_holder {
	position: absolute;
	top: 1600px;
	left:120px;
	z-index: -100;
	/*background-color: white;*/
}




/*BUTTON 10-MARSVILLE*/

#button10 {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	visibility: visible;
	display: inline-block;
	margin-left: 100px;
	margin-top: 32px;
	margin-right: 1400px;

	transition: transform 1s;
	transform-origin: 50% 50%;
	transition-delay: 0.2s;
}

#button10:hover {
	/*transform: matrix(2.3, 0, 0, 2.3, 828, 365);*/
	-ms-transform: matrix(2.3, 0, 0, 2.3, 828, 355); /* IE 9 */
    -webkit-transform: matrix(2.3, 0, 0, 2.3, 828, 355); /* Safari */
	transform-origin: 50% 50%;
}

#bi10 {
	position: absolute;
	-webkit-clip-path: circle(70px at center);
	clip-path: circle(70px at center);
	transition: opacity ease-in 0.3s;
	opacity: 0;
}

#bi10:hover {
	opacity: 1;
}

#b10: {
	position: absolute;
}

/*BUTTON 11-AUBREYSPY*/

#button11 {
	position: relative;
	top: 0px;
	visibility: visible;
	display: inline-block;
	margin-left: 508px;
	margin-top: 226px;
	opacity: 0;
}

#button11:hover {
	opacity: 1;
}

#b11: {
	position: absolute;
}

/*BUTTON 12-BOWLMOR*/

#button12 {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	visibility: visible;
	display: inline-block;
	margin-top: 60px;
	margin-left: 543px;
	margin-right: 0px;
	

	transition: transform 1s;
	transform-origin: 50% 50%;
	transition-delay: 0.2s;
}

#button12:hover {
	/*transform: matrix(8, 0, 0, 8, -200, 300);*/
	-ms-transform: matrix(8, 0, 0, 8, -385, -90); /* IE 9 */
    -webkit-transform: matrix(8, 0, 0, 8, -385, -90); /* Safari */
	transform-origin: 50% 50%;
}

#bi12 {
	position: absolute;
	-webkit-clip-path: circle(14px at center);
	clip-path: circle(14px at center);
	transition: opacity ease-in 0.3s;
	opacity: 0;
}

#bi12:hover {
	opacity: 1;
}

#b12: {
	position: absolute;
}

/*BUTTON 13-DYMAXMARS*/

#button13 {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	visibility: visible;
	display: inline-block;
	margin-top: 85px;
	margin-left: 900px;
	margin-right: 500px;
	

	transition: transform 1s;
	transform-origin: 50% 50%;
	transition-delay: 0.2s;
}

#button13:hover {
	/*transform: matrix(8, 0, 0, 8, -400, 500);*/
	-ms-transform: matrix(8, 0, 0, 8, -400, 500); /* IE 9 */
    -webkit-transform: matrix(8, 0, 0, 8, -400, 500); /* Safari */
	transform-origin: 50% 50%;
}

#bi13 {
	position: absolute;
	-webkit-clip-path: circle(18px at center);
	clip-path: circle(18px at center);
	transition: opacity ease-in 0.3s;
	opacity: 0;
}

#bi13:hover {
	opacity: 1;
}

#b13: {
	position: absolute;
}


/*BUTTON 14-FIGURE*/

#button14 {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	visibility: visible;
	display: inline-block;
	margin-left: 828px;
	margin-top: 550px;
	/*margin-right: 900px;*/

	transition: transform 1s;
	transform-origin: 50% 50%;
	transition-delay: 0.2s;
}

#button14:hover {
	-ms-transform: matrix(8, 0, 0, 8, -400, 500); /* IE 9 */
    -webkit-transform: matrix(8, 0, 0, 8, -400, 500); /* Safari */
	transform-origin: 50% 50%;
}

#bi14 {
	position: absolute;
	-webkit-clip-path: polygon(0% 0%, 15% 55%, 100% 100%, 85% 45%);
	clip-path: polygon(0% 0%, 15% 55%, 100% 100%, 85% 45%);
	transition: opacity ease-in 0.3s;
	opacity: 0;
}

#bi14:hover {
	opacity: 1;
}

#b14: {
	position: absolute;
}