/*=-=-=-=-=-=-=-=-=-=
=-=-=-=CSS3 Transitions=
=-=-=-=-=-=-=-=-=-=-=-=*/
	

	* {
		margin: 0;
		padding: 0;
		list-style-type: none;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	section {
		display:inline-block;
		position: absolute;
		top:50%;
		left:25%;

	}

		li {
			display: inline-block;
			background-color: white;
			margin: 0.5vw;
			padding: 0.5vw 1vw;
			border: 5px solid black;
			font-size: 3vw;
			font-weight: black;
		}

			li:hover {
				background-color: yellow;
				cursor: pointer;
			}

	#transition-one {
		transition: transform 5s; 
			-moz-transition: transform 5s; /* MOZILLA FIREFOX */
			-ms-transition: transform 5s; /* MICROSOFT INTERNET EXPLORER */
			-o-transition: transform 5s; /* OPERA */
			-webkit-transition: transform 5s; /* SAFARI,CHROME,OPERA */
	}

		#transition-one:hover {
			transform: translateX(100vw);
		}

	#transition-two {
		transition: transform 5s;
			-moz-transition: transform 5s; /* MOZILLA FIREFOX */
			-ms-transition: transform 5s; /* MICROSOFT INTERNET EXPLORER */
			-o-transition: transform 5s; /* OPERA */
			-webkit-transition: transform 5s; /* SAFARI,CHROME,OPERA */
	}

		#transition-two:hover {
			transform: translateY(100vh);
		}

	#transition-three {
		transition: transform 5s;
			-moz-transition: transform 5s; /* MOZILLA FIREFOX */
			-ms-transition: transform 5s; /* MICROSOFT INTERNET EXPLORER */
			-o-transition: transform 5s; /* OPERA */
			-webkit-transition: transform 5s; /* SAFARI,CHROME,OPERA */
	}

		#transition-three:hover {
			transform: translate(100vw, 100vh);
		}

	#transition-four {
		transition: transform 5s;
			-moz-transition: transform 5s; /* MOZILLA FIREFOX */
			-ms-transition: transform 5s; /* MICROSOFT INTERNET EXPLORER */
			-o-transition: transform 5s; /* OPERA */
			-webkit-transition: transform 5s; /* SAFARI,CHROME,OPERA */
	}
		#transition-four:hover {
			transform: rotate(720deg);
		}

	#transition-five {
		transition: transform 5s;
			-moz-transition: transform 5s; /* MOZILLA FIREFOX */
			-ms-transition: transform 5s; /* MICROSOFT INTERNET EXPLORER */
			-o-transition: transform 5s; /* OPERA */
			-webkit-transition: transform 5s; /* SAFARI,CHROME,OPERA */
	}

		#transition-five:hover {
			transform: scale(10);
		}

	#transition-six {
		transition: transform 5s;
			-moz-transition: transform 5s; /* MOZILLA FIREFOX */
			-ms-transition: transform 5s; /* MICROSOFT INTERNET EXPLORER */
			-o-transition: transform 5s; /* OPERA */
			-webkit-transition: transform 5s; /* SAFARI,CHROME,OPERA */
	}

		#transition-six:hover {
			transform: skew(10deg,20deg);
		}