body {
	margin: 0;
	padding: 0;
}

.middle_of_page {
	position: relative;
	line-height: 36px;
	width: 70%;
	text-align: center;
	height: auto;
	margin: 0 auto;
	transform: translateY(25vh);
	background-color: darkblue;
	color: white;
	font-size: 18px;

}

#transition-one {
	transition: transform 5s; /*take 5 sec to transform*/
		-moz-transition: transform 5s;
		-ms-transition: transform 5s;
		-o-transition: transform 5s;
		-webkit-transition: transform 5s;

}
	#transition-one:hover {
		transform: translateX(100vw); /*move div to right on hover*/
			-moz-transition: translateX(100vw);
			-ms-transition: translateX(100vw);
			-o-transition: translateX(100vw);
			-webkit-transition: translateX(100vw);
	}

#transition-two {
	transition: transform 5s; /*take 5 sec to transform*/
}
	#transition-two:hover {
		transform: translateY(100vh); /*move div down on hover*/
	}

#transition-three {
	transition: transform 5s; /*take 5 sec to transform*/
}
	#transition-three:hover {
		transform: translate(100vw, 100vh); /*move div to right and down on hover - diagonally*/
	}

#transition-four {
	transition: transform 5s; /*take 5 sec to transform*/
}
	#transition-four:hover {
		transform: rotate(720deg); /*spin div in circle to right two times*/
	}

#transition-five {
	transition: transform 5s; /*take 5 sec to transform*/
}
	#transition-five:hover {
		transform: scale(10); /*div get bigger by 10 -- coming towards screen*/
	}

#transition-six {
	transition: transform 5s; /*take 5 sec to transform*/
}
	#transition-six:hover {
		transform: skew(10deg,20deg);/*see-saw down on right and warp text*/
		/*transform: skew(-10deg,-20deg); */
	}