body {
  background-color: #2c2c35;	
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////////////////////// COLORS
//////////////////////////////////////////////////////////*/
.red {
	background-color: red;
}

.white {
	background-color: white;
}

.blue {
	background-color: blue;
}

.orange {
	background-color: orange;
}

.purple {
	background-color: purple;
}

.yellow {
	background-color: yellow;
}

.gray {
	background-color: gray;
}

.green {
	background-color: green;
}

.black {
	background-color: black;
}

.brown {
	background-color: sienna;
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////////////////// CONTAINERS
//////////////////////////////////////////////////////////*/
.section-block {
	height: 0 auto;
	margin: auto;
	max-width: 1200px;
	min-width: 800px;
	min-height: 400px;
	padding: 50px;
	position: relative;
}

.interior-block {
	background-color: rgba(200, 200, 200, 0.70);
	left: 30px;
	right: 30px;
	top: 30px;
	bottom: 30px;
	margin: 0 auto;
	padding: 40px;
	position: absolute;
}

.section-header {
	width: 500px;
	height: 70px;
	float: right;
	text-align: right;
}

.explanation {
	float: right;
	position: absolute;
	opacity: 0;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 20px;
	padding-top: 20px;
	text-align: left;
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////////////////// TYPOGRAPHY
//////////////////////////////////////////////////////////*/
.section-number {
	color: rgba(40, 40, 40, 0.80);
	font-family: Helvetica, sans-serif;
	font-weight: bolder;
	font-size: 40px;
}

.section-name {
	color: rgba(40, 40, 40, 0.80);
	font-family: Helvetica, sans-serif;
	font-weight: bold;
	font-size: 25px;
}

.explanation-text {
	color: rgba(40, 40, 40, 0.80);
	font-family: Helvetica, sans-serif;
	font-weight: bold;
	font-size: 25px;
}

.headline {
	color: white;
	font-family: Helvetica, sans-serif;
	font-weight: bolder;
	font-size: 30px;
	padding-top: 25px;
	text-align: center;
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////////////////////// SHAPES
//////////////////////////////////////////////////////////*/
.small-circle {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

.medium-circle {
	width: 100px;
	height: 100px;
	border-radius: 50%;
}

.large-circle {
	width: 150px;
	height: 150px;
	border-radius: 50%;
}

.extra-large-circle {
	width: 300px;
	height: 300px;
	border-radius: 50%;
}

.small-square {
	width: 100px;
	height: 100px;
}

.medium-square {
	width: 200px;
	height: 200px;
}

.large-square {
	width: 300px;
	height: 300px;
}

.small-rectangle {
	width: 100px;
	height: 150px;
}

.medium-rectangle {
	width: 150px;
	height: 250px;
}

.large-rectangle {
	width: 200px;
	height: 350px;
}

.hole {
	width: 200px;
	height: 100px;
	border-radius: 50%;
	background-color: black;
}

/*//////////////////////////////////////////////////////////
////////////////////////////////////// TRANSITION SECTION #1
//////////////////////////////////////////////////////////*/
.transition-1 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 50px;
	padding-top: 160px;
}

/*///////// EXPLANATION //////////*/
.transition-1:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1.5s;
}

/*//////// SHAPE 1 ////////*/
.transition-1 .shape-1 {
	display: inline-block;
	margin-left: 50px;
}

.transition-1:hover .shape-1 {
	background-color: black;
	margin-left: 900px;
	margin-top: 150px;
	transition: background-color 	0s linear 1.15s,
				margin-left 		0.75s ease-out,
				margin-top			0.5s linear 0.5s;	
}

/*//////// SHAPE 2 ////////*/
.transition-1 .shape-2 {
	margin-left: 855px;
	margin-top: 50px;
}

.transition-1:hover .shape-2 {
	margin-top: -100px;
	transition: all 0.5s linear 0.5s;
}

/*//////////////////////////////////////////////////////////
////////////////////////////////////// TRANSITION SECTION #2
//////////////////////////////////////////////////////////*/
.transition-2 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 160px;
	padding-top: 160px;
}

/*///////// EXPLANATION //////////*/
.transition-2:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1s;
}

/*//////// SHAPE 1 ////////*/
.transition-2 .shape-1 {
	display: inline-block;
	margin-right: 200px;
}

.transition-2:hover .shape-1 {
	margin-left: 205px;
	margin-right: -4px;
	transition: all 0.55s ease-in;
}

/*//////// SHAPE 2 ////////*/
.transition-2 .shape-2 {
	display: inline-block;
}

/*//////// SHAPE 3 ////////*/
.transition-2 .shape-3 {
	display: inline-block;
	margin-left: -4px;
}

/*//////// SHAPE 4 ////////*/
.transition-2 .shape-4 {
	display: inline-block;
	margin-left: -4px;
}

/*//////// SHAPE 5 ////////*/
.transition-2 .shape-5 {
	display: inline-block;
	margin-left: -4px;
}

.transition-2:hover .shape-5 {
	margin-left: 200px;
	transition: all 0.5s ease-out 0.5s;
}

/*//////////////////////////////////////////////////////////
////////////////////////////////////// TRANSITION SECTION #3
//////////////////////////////////////////////////////////*/
.transition-3 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 300px;
	padding-top: 140px;
}

/*///////// EXPLANATION //////////*/
.transition-3:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 2s;
}

/*//////// SHAPE 1 ////////*/
.transition-3 .shape-1 {
	display: inline-block;
	position: absolute;
}

.transition-3:hover .shape-1 {
	margin-left: 420px;
	transition: all 0.75s ease-out 1.25s;
	z-index: 5;
}

/*//////// SHAPE 2 ////////*/
.transition-3 .shape-2 {
	display: inline-block;
	position: absolute;
}

.transition-3:hover .shape-2 {
	margin-left: 440px;
	transition: all 0.75s ease-out 1s;
	z-index: 4;
}

/*//////// SHAPE 3 ////////*/
.transition-3 .shape-3 {
	display: inline-block;
	position: absolute;
}

.transition-3:hover .shape-3 {
	margin-left: 460px;
	transition: all 0.75s ease-out 0.75s;
	z-index: 3;
}

/*//////// SHAPE 4 ////////*/
.transition-3 .shape-4 {
	display: inline-block;
	position: absolute;
}

.transition-3:hover .shape-4 {
	margin-left: 480px;
	transition: all 0.75s ease-out 0.5s;
	z-index: 2;
}

/*//////// SHAPE 5 ////////*/
.transition-3 .shape-5 {
	display: inline-block;
	position: absolute;
}

.transition-3:hover .shape-5 {
	margin-left: 500px;
	transition: all 0.75s ease-out 0.25s;
	z-index: 1;
}

/*//////////////////////////////////////////////////////////
////////////////////////////////////// TRANSITION SECTION #4
//////////////////////////////////////////////////////////*/
.transition-4 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 50px;
	padding-top: 160px;
}

/*///////// EXPLANATION //////////*/
.transition-4:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1s;
}

/*//////// SHAPE 1 ////////*/
.transition-4 .shape-1 {
	display: inline-block;
	margin-left: 100px;
	-webkit-transform: rotate(60deg);
}

.transition-4:hover .shape-1 {
	margin-left: 80px;
	margin-top: 10px;
	transition: all 0.02s ease 0.1s;
}

/*//////// SHAPE 2 ////////*/
.transition-4 .shape-2 {
	margin-left: 155px;
	margin-top: -180px;
	-webkit-transform-origin: 200px 140px;
	transform-origin: 200px 140px;
}

.transition-4:hover .shape-2 {
	margin-left: 700px;
	margin-top: -400px;
	background-color: black;
	-webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all 1s ease;
    transition: all 				1s ease,
    			background-color 	0s linear 0.1s;
}

/*//////////////////////////////////////////////////////////
////////////////////////////////////// TRANSITION SECTION #5
//////////////////////////////////////////////////////////*/
.transition-5 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 45%;
	padding-top: 45px;
}

/*///////// EXPLANATION //////////*/
.transition-5:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1.5s;
}

/*//////// SHAPE 1 ////////*/
.transition-5 .shape-1 {
	display: block;
	position: absolute;
}

/*//////// SHAPE 2 ////////*/
.transition-5 .shape-2 {
	opacity: 0.0;
	position: absolute;
	margin-left: 47px;
	margin-top: 10px;
}

.transition-5:hover .shape-2 {
	opacity: 1.0;
	transition: all 0.35s ease-out 1.25s;
}

/*//////// SHAPE 3 ////////*/
.transition-5 .shape-3 {
	opacity: 0.0;
	position: absolute;
	margin-left: 47px;
	margin-top: 125px;
}

.transition-5:hover .shape-3 {
	opacity: 1.0;
	transition: all 0.35s ease-out 0.75s;
}

/*//////// SHAPE 4 ////////*/
.transition-5 .shape-4 {
	opacity: 0.0;
	position: absolute;
	margin-left: 47px;
	margin-top: 240px;
}

.transition-5:hover .shape-4 {
	opacity: 1.0;
	transition: all 0.35s ease-out 0.25s;
}

/*//////////////////////////////////////////////////////////
////////////////////////////////////// TRANSITION SECTION #6
//////////////////////////////////////////////////////////*/
.transition-6 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 70px;
	padding-top: 375px;
}

/*///////// EXPLANATION //////////*/
.transition-6:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1s;
}

/*//////// SHAPE 1 ////////*/
.transition-6 .shape-1 {
	display: inline-block;
	-webkit-transform-origin: 550px 26px;
	transform-origin: 550px 26px;
}

.transition-6:hover .shape-1 {
	-webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

/*//////// SHAPE 2 ////////*/
.transition-6 .shape-2 {
	display: inline-block;
	margin-left: -4px;
	-webkit-transform-origin: 500px 26px;
	transform-origin: 500px 26px;
}

.transition-6:hover .shape-2 {
	-webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

/*//////// SHAPE 3 ////////*/
.transition-6 .shape-3 {
	display: inline-block;
	margin-left: -4px;
	-webkit-transform-origin: 450px 26px;
	transform-origin: 450px 26px;
}

.transition-6:hover .shape-3 {
	-webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

/*//////// SHAPE 4 ////////*/
.transition-6 .shape-4 {
	display: inline-block;
	margin-left: -4px;
	-webkit-transform-origin: 400px 26px;
	transform-origin: 400px 26px;
}

.transition-6:hover .shape-4 {
	-webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

/*//////// SHAPE 5 ////////*/
.transition-6 .shape-5 {
	display: inline-block;
	margin-left: -4px;
	-webkit-transform-origin: 350px 26px;
	transform-origin: 350px 26px;
}

.transition-6:hover .shape-5 {
	-webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

/*//////////////////////////////////////////////////////////
////////////////////////////////////// TRANSITION SECTION #7
//////////////////////////////////////////////////////////*/
.transition-7 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 70px;
	padding-top: 180px;
}

/*///////// EXPLANATION //////////*/
.transition-7:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1.75s;
}

/*//////// SHAPE 1 ////////*/
.transition-7 .shape-1 {
	display: block;
}

.transition-7:hover .shape-1 {
	margin-left: 404px;
	margin-right: -404px;
	transition: all 0.25s linear;
}

/*//////// SHAPE 2 ////////*/
.transition-7 .shape-2 {
	display: block;
	margin-left: 450px;
	margin-top: -50px;
}

.transition-7:hover .shape-2 {
	margin-left: 600px;
	margin-top: -70px;
	transition: all 0.65s ease-out 0.25s;
}

/*//////// SHAPE 3 ////////*/
.transition-7 .shape-3 {
	display: block;
	margin-left: 494px;
	margin-top: -75px;
}

.transition-7:hover .shape-3 {
	margin-left: 680px;
	margin-top: -100px;
	transition: all 0.85s ease-out 0.25s;
}

/*//////// SHAPE 4 ////////*/
.transition-7 .shape-4 {
	display: block;
	margin-left: 494px;
	margin-top: 0px;
}

.transition-7:hover .shape-4 {
	margin-left: 730px;
	margin-top: 50px;
	transition: all 0.75s ease-out 0.25s;
}

/*//////// SHAPE 5 ////////*/
.transition-7 .shape-5 {
	display: block;
	margin-left: 538px;
	margin-top: -125px;
}

.transition-7:hover .shape-5 {
	margin-left: 800px;
	margin-top: -150px;
	transition: all 0.85s ease-out 0.25s;
}

/*//////// SHAPE 6 ////////*/
.transition-7 .shape-6 {
	display: block;
	margin-left: 538px;
	margin-top: 0px;
}

.transition-7:hover .shape-6 {
	margin-left: 1000px;
	margin-top: 50px;
	transition: all 1.15s ease-out 0.25s;
}

/*//////// SHAPE 7 ////////*/
.transition-7 .shape-7 {
	display: inline-block;
	margin-left: 538px;
	margin-top: 0px;
}

.transition-7:hover .shape-7 {
	margin-left: 900px;
	margin-top: 80px;
	transition: all 1.45s ease-out 0.25s;
}

/*//////////////////////////////////////////////////////////
////////////////////////////////////// TRANSITION SECTION #8
//////////////////////////////////////////////////////////*/
.transition-8 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 70px;
	padding-top: 150px;
}

/*///////// EXPLANATION //////////*/
.transition-8:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 3s;
}

/*//////// SHAPE 1 ////////*/
.transition-8 .shape-1 {
	display: block;
	background: -webkit-radial-gradient(70px 60px, circle, #009900, #000);
	background: radial-gradient(70px 60px, circle, #009900, #000);
	position: relative;
}

.transition-8:hover .shape-1 {
	margin-left: 950px;
	-webkit-transform: rotate(660deg);
	transform: rotate(660deg);
	transition: all 3s ease;
}

/*//////// SHAPE 2 ////////*/
.transition-8 .shape-2 {
	display: block;
	font-family: Helvetica, sans-serif;
	font-size: 30px;
	font-weight: bolder;
	line-height: 50px;
	margin-left: 20px;
	margin-top: 30px;
	position: absolute;
	text-align: center;
	text-decoration: underline;
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg);
}

/*//////////////////////////////////////////////////////////
////////////////////////////////////// TRANSITION SECTION #9
//////////////////////////////////////////////////////////*/
.transition-9 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-top: 95px;
}

/*///////// EXPLANATION //////////*/
.transition-9:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1s;
}

/*//////// SHAPE 1 ////////*/
.transition-9 .shape-1 {
	display: block;
	margin: 0 auto;
	position: relative;
}

.transition-9:hover .shape-1 {
	width: 850px;
	transition: all 1s ease-out;
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #10
//////////////////////////////////////////////////////////*/
.transition-10 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-top: 75px;
}

/*///////// EXPLANATION //////////*/
.transition-10:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 2s;
}

/*//////// SHAPE 1 ////////*/
.transition-10 .shape-1 {
	display: block;
	margin: 0 auto;
	position: relative;
}

/*//////// SHAPE 2 ////////*/
.transition-10 .shape-2 {
	display: block;
	margin-left: 70px;
	margin-top: 70px;
	position: absolute;
}

.transition-10:hover .shape-2 {
	-webkit-transform: rotate(660deg);
	transform: rotate(660deg);
	transition: all 2s linear;
}

/*//////// SHAPE 3 ////////*/
.transition-10 .shape-3 {
	display: block;
	margin-left: 175px;
	margin-top: 70px;
	position: absolute;
}

.transition-10:hover .shape-3 {
	-webkit-transform: rotate(660deg);
	transform: rotate(660deg);
	transition: all 2s linear;
}

/*//////// SHAPE 4 ////////*/
.transition-10 .shape-4 {
	display: block;
	margin-left: 125px;
	margin-top: 140px;
	position: absolute;
}

.transition-10:hover .shape-4 {
	border-bottom-left-radius: 80%;
	border-bottom-right-radius: 80%;
	border-top-left-radius: 15%;
	border-top-right-radius: 15%;
	height: 120px;
	margin-left: 50px;
	width: 200px;
	transition: all 1s ease-in;
}

/*//////// SHAPE 5 ////////*/
.transition-10 .shape-5 {
	display: block;
	height: 30%;
	margin-left: 8px;
	margin-top: 10px;
	position: absolute;
	width: 30%;
}

/*//////// SHAPE 6 ////////*/
.transition-10 .shape-6 {
	display: block;
	height: 30%;
	margin-left: 8px;
	margin-top: 10px;
	position: absolute;
	width: 30%;
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #11
//////////////////////////////////////////////////////////*/
.transition-11 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-top: 55px;
}

/*///////// EXPLANATION //////////*/
.transition-11:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 2.25s;
}

/*//////// SHAPE 1 ////////*/
.transition-11 .shape-1 {
	display: block;
	margin: 0 auto;
	border: 6px solid brown;
}

/*//////// SHAPE 2 ////////*/
.transition-11 .shape-2 {
	display: block;
	margin: 0 auto;
}

.transition-11:hover .shape-2 {
	-webkit-animation: door-open 0.75s ease 0.75s alternate 2;
	animation: door-open 0.75s ease 0.75s alternate 2;
}

@-webkit-keyframes door-open {
	from {
		-webkit-transform: perspective(1000) rotateY(0deg);
		-webkit-transform-origin: 0% 0%;
	}
	to {
		-webkit-transform: perspective(1000) rotateY(90deg);
		-webkit-transform-origin: 0% 0%;
	}
}

/*//////// SHAPE 3 ////////*/
.transition-11 .shape-3 {
	box-shadow: 1px 1px 10px 1px black;
	display: block;
	margin-left: 140px;
	margin-top: 160px;
	position: absolute;
}

.transition-11:hover .shape-3 {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	transition: all 0.75s linear;
}

/*//////// SHAPE 4 ////////*/
.transition-11 .shape-4 {
	display: block;
	margin-left: 5px;
	position: relative;
	top: 20px;
	width: 20%;
	height: 20%;
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #12
//////////////////////////////////////////////////////////*/
.transition-12 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 50%;
	padding-top: 100px;
}

/*///////// EXPLANATION //////////*/
.transition-12:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 3.75s;
}

/*//////// SHAPE 1 ////////*/
.transition-12 .shape-1 {
	display: inline-block;
	position: absolute;
}

.transition-12:hover .shape-1 {
	-webkit-animation: page-flip 0.75s ease 3s forwards;
	animation: page-flip 0.75s ease 3s forwards;
	z-index: 5;
	transition: z-index 3s linear;
}

/*//////// SHAPE 2 ////////*/
.transition-12 .shape-2 {
	display: inline-block;
	position: absolute;
}

.transition-12:hover .shape-2 {
	-webkit-animation: page-flip 0.75s ease 2.25s forwards;
	animation: page-flip 0.75s ease 2.25s forwards;
	z-index: 4;
	transition: z-index 2.25s linear;
}

/*//////// SHAPE 3 ////////*/
.transition-12 .shape-3 {
	display: inline-block;
	position: absolute;
}

.transition-12:hover .shape-3 {
	-webkit-animation: page-flip 0.75s ease 1.5s forwards;
	animation: page-flip 0.75s ease 1.5s forwards;
	z-index: 3;
	transition: z-index 1.5s linear;
}

/*//////// SHAPE 4 ////////*/
.transition-12 .shape-4 {
	display: inline-block;
	position: absolute;
}

.transition-12:hover .shape-4 {
	-webkit-animation: page-flip 0.75s ease 0.75s forwards;
	animation: page-flip 0.75s ease 0.75s forwards;
	z-index: 2;
	transition: z-index 0.75s linear;
}

/*//////// SHAPE 5 ////////*/
.transition-12 .shape-5 {
	display: inline-block;
	position: absolute;
}

.transition-12:hover .shape-5 {
	-webkit-animation: page-flip 0.75s ease forwards;
	animation: page-flip 0.75s ease forwards;
	z-index: 1;
	transition: z-index linear;
}

@-webkit-keyframes page-flip {
	from {
		-webkit-transform: perspective(1200) rotateY(0deg);
		-webkit-transofrm-style: preserve-3d;
		-webkit-transform-origin: 0% 0%;
	}
	to {
		-webkit-transform: perspective(400) rotateY(-180deg);
		-webkit-transform-style: preserve-3d;
		-webkit-transform-origin: 0% 0%;
	}
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #13
//////////////////////////////////////////////////////////*/
.transition-13 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-top: 50px;
}

/*///////// EXPLANATION //////////*/
.transition-13:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1s;
}

/*//////// SHAPE 1 ////////*/
.transition-13 .shape-1 {
	display: block;
	margin: 0 auto;
	position: relative;
}

.transition-13:hover .shape-1 {
	background-color: yellow;
	transition: all 1s ease-out;
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #14
//////////////////////////////////////////////////////////*/
.transition-14 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-top: 70px;
}

/*///////// EXPLANATION //////////*/
.transition-14:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1s;
}

/*//////// SHAPE 1 ////////*/
.transition-14 .shape-1 {
	display: block;
	margin: 0 auto;
	position: relative;
}

.transition-14:hover .shape-1 {
	border-radius: 50%;
	transition: all 0.5s linear;
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #15
//////////////////////////////////////////////////////////*/
.transition-15 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-top: 25%;
}

/*///////// EXPLANATION //////////*/
.transition-15:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 2.25s;
}

/*//////// SHAPE 1 ////////*/
.transition-15 .shape-1 {
	display: block;
	margin: 0 auto;
	position: relative;
}

.transition-15:hover .shape-1 {
	-webkit-animation: bounce 2.5s cubic-bezier(0, 0, 0.35, 1);
}

@-webkit-keyframes bounce {
	0% {
		-webkit-transform: translateY(-230px); 
		-webkit-animation-timing-function: ease-in;
	}

	24% {
		-webkit-transform: translateY(0px);
		-webkit-animation-timing-function: ease-out;
	}

	38% {
		-webkit-transform: translateY(-100px);
		-webkit-animation-timing-function: ease-in;
	}

	55% {
		-webkit-transform: translateY(0px);
		-webkit-animation-timing-function: ease-out;
	}

	65% {
		-webkit-transform: translateY(-52px);
		-webkit-animation-timing-function: ease-in;
	}

	75% {
		-webkit-transform: translateY(0px);
		-webkit-animation-timing-function: ease-out;
	}

	82% {
		-webkit-transform: translateY(-25px);
		-webkit-animation-timing-function: ease-in;
	}
	
	88%{
		-webkit-transform: translateY(0px);
		-webkit-animation-timing-function: ease-out;
	}
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #16
//////////////////////////////////////////////////////////*/
.transition-16 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-top: 70px;
}

/*///////// EXPLANATION //////////*/
.transition-16:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1.25s;
}

/*//////// SHAPE 1 ////////*/
.transition-16 .shape-1 {
	display: block;
	margin: 0 auto;
	width: 0px;
	height: 0px;
	position: relative;
}

.transition-16:hover .shape-1 {
	width: 300px;
	height: 300px;
	transition: all 1s linear;
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #17
//////////////////////////////////////////////////////////*/
.transition-17 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 40px;
	padding-top: 70px;
}

/*///////// EXPLANATION //////////*/
.transition-17:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1.25s;
}

/*//////// SHAPE 1 ////////*/
.transition-17 .shape-1 {
	display: block;
	position: relative;
	background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 100, color-stop(0, #FFFFFF), color-stop(1, #222233));
	background-image: -webkit-radial-gradient(center bottom, ellipse farthest-corner, #FFFFFF 20%, #222233 250%);
}

.transition-17:hover .shape-1 {
	width: 300px;
	height: 300px;
	margin-left: 750px;
	-webkit-transform: rotate(660deg);
	transform: rotate(660deg);
	transition: all 1s ease-in;
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #18
//////////////////////////////////////////////////////////*/
.transition-18 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-top: 50px;
}

/*///////// EXPLANATION //////////*/
.transition-18:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 2.5s;
}

/*//////// SHAPE 1 ////////*/
.transition-18 .shape-1 {
	display: block;
	position: relative;
	margin: 0 auto;
	border: 40px dotted orange;
}

.transition-18:hover .shape-1 {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	transition: all 4s linear;
}

/*//////// SHAPE 2 ////////*/
.transition-18 .shape-2 {
	display: block;
	position: relative;
	margin: 0 auto;
	margin-top: 25%;
	border: 40px dotted orange;
}

.transition-18:hover .shape-2 {
	-webkit-transform: rotate(-700deg);
	transform: rotate(-700deg);
	transition: all 4s linear;
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #19
//////////////////////////////////////////////////////////*/
.transition-19 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 38%;
	padding-top: 120px;
}

/*///////// EXPLANATION //////////*/
.transition-19:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1s;
}

/*//////// SHAPE 1 ////////*/
.transition-19 .shape-1 {
	display: inline-block;
	position: absolute;
	height: 200px;
	width: 350px;
	text-align: center;
	line-height: 200px;
}

/*//////// SHAPE 2 ////////*/
.transition-19 .shape-2 {
	display: inline-block;
	position: absolute;
	height: 200px;
	width: 350px;
}

.transition-19:hover .shape-2 {
	opacity: 0;
	transition: all 3.5s ease-out;
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #20
//////////////////////////////////////////////////////////*/
.transition-20 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 35%;
	padding-top: 100px;
}

/*///////// EXPLANATION //////////*/
.transition-20:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1s;
}

/*//////// SHAPE 1 ////////*/
.transition-20 .shape-1 {
	display: block;
	position: absolute;
}

.transition-20:hover .shape-1 {
	height: 200px;
	transition: all 0.25s ease-out;
}

/*//////// SHAPE 2 ////////*/
.transition-20 .shape-2 {
	display: block;
	position: absolute;
	margin-left: 160px;
}

.transition-20:hover .shape-2 {
	height: 300px;
	transition: all 0.5s ease-out;
}

/*//////// SHAPE 3 ////////*/
.transition-20 .shape-3 {
	display: block;
	position: absolute;
	margin-left: 320px;
}

.transition-20:hover .shape-3 {
	height: 250px;
	transition: all 1s ease-out;
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #21
//////////////////////////////////////////////////////////*/
.transition-21 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 45%;
	padding-top: 70px;
}

/*///////// EXPLANATION //////////*/
.transition-21:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 3.75s;
}

/*//////// SHAPE 1 ////////*/
.transition-21 .shape-1 {
	display: block;
	position: absolute;
	-webkit-transform: rotate(90deg);
}

/*//////// SHAPE 2 ////////*/
.transition-21 .shape-2 {
	display: block;
	position: absolute;
	-webkit-transform: rotate(90deg);
}

.transition-21:hover .shape-2 {
	opacity: 0;
	transition: all 5s linear;
}

/*//////// SHAPE 3////////*/
.transition-21 .shape-3{
	display: block;
	position: absolute;
	-webkit-transform: rotate(90deg);
}

.transition-21:hover .shape-3 {
	opacity: 0;
	transition: all 4s linear;
}

/*//////// SHAPE 4 ////////*/
.transition-21 .shape-4 {
	display: block;
	position: absolute;
	-webkit-transform: rotate(90deg);
}

.transition-21:hover .shape-4 {
	opacity: 0;
	transition: all 3s linear;
}

/*//////// SHAPE 5 ////////*/
.transition-21 .shape-5 {
	display: block;
	position: absolute;
	-webkit-transform: rotate(90deg);
}

.transition-21:hover .shape-5 {
	opacity: 0;
	transition: all 2s linear;
}

/*//////// SHAPE 6 ////////*/
.transition-21 .shape-6 {
	display: block;
	position: absolute;
	-webkit-transform: rotate(90deg);
}

.transition-21:hover .shape-6 {
	opacity: 0;
	transition: all 1s linear;
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #22
//////////////////////////////////////////////////////////*/
.transition-22 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 40%;
	padding-top: 120px;
}

/*///////// EXPLANATION //////////*/
.transition-22:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1.25s;
}

/*//////// SHAPE 1 ////////*/
.transition-22 .shape-1 {
	background-color: rgba(255, 255, 255, 0.0);
	display: block;
	height: 200px;
	line-height: 200px;
	position: absolute;
	text-align: center;
	width: 350px;
}

.transition-22:hover .shape-1 {
	-webkit-animation: scale 10s ease;
}

@-webkit-keyframes scale {
	0% {
		-webkit-transform: scale(1, 1);
	}

	20% {
		-webkit-transform: scale(500, 500);
	}

	25% {
		-webkit-transform: scale(3, 3);
	}

	27% {
		-webkit-transform: scale(1, 1);
	}
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #23
//////////////////////////////////////////////////////////*/
.transition-23 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 40%;
	padding-top: 120px;
}

/*///////// EXPLANATION //////////*/
.transition-23:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in .5s;
}

/*//////// SHAPE 1 ////////*/
.transition-23 .shape-1 {
	border-radius: 8px;
	box-shadow: inset 	0px -16px 0px rgb(130, 130, 147), 
						2px 2px 1px rgb(111, 111, 126);
	display: block;
	height: 150px;
	line-height: 150px;
	position: absolute;
	text-align: center;
	width: 250px;
}

.transition-23 .shape-1:hover {
	margin-top: 20px;
	margin-bottom: -20px;
	box-shadow: inset 	0px -8px 0px rgb(130, 130, 147), 
						2px 2px 1px rgb(111, 111, 126);
	transition: all .2s ease;
}

.transition-23 .shape-1:active {
	margin-top: 26px;
	margin-bottom: -26px;
	box-shadow: inset	0px -4px 0px rgb(130, 130, 147),
						2px 2px 1px rgb(111, 111, 126);
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #24
//////////////////////////////////////////////////////////*/
.transition-24 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 18%;
	padding-top: 175px;
}

/*///////// EXPLANATION //////////*/
.transition-24:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1.25s;
}

/*//////// SHAPE 1 ////////*/
.transition-24 .shape-1 {
	display: inline-block;
	margin: 0 auto;
	position: relative;
}

.transition-24:hover .shape-1 {
	-webkit-transform: scale(1.5, 1.5);
	transition: all 0.25s ease;
}

/*//////// SHAPE 2 ////////*/
.transition-24 .shape-2 {
	display: inline-block;
	margin-left: 80px;
	position: relative;
}

.transition-24:hover .shape-2 {
	-webkit-transform: scale(1.5, 1.5);
	transition: all 0.25s ease 0.25s;
}

/*//////// SHAPE 3 ////////*/
.transition-24 .shape-3 {
	display: inline-block;
	margin-left: 80px;
	position: relative;
}

.transition-24:hover .shape-3 {
	-webkit-transform: scale(1.5, 1.5);
	transition: all 0.25s ease 0.5s;
}

/*//////// SHAPE 4 ////////*/
.transition-24 .shape-4 {
	display: inline-block;
	margin-left: 80px;
	position: relative;
}

.transition-24:hover .shape-4 {
	-webkit-transform: scale(1.5, 1.5);
	transition: all 0.25s ease 0.75s;
}

/*//////// SHAPE 5 ////////*/
.transition-24 .shape-5 {
	display: inline-block;
	margin-left: 80px;
	position: relative;
}

.transition-24:hover .shape-5 {
	-webkit-transform: scale(1.5, 1.5);
	transition: all 0.25s ease 1s;
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #25
//////////////////////////////////////////////////////////*/
.transition-25 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 38%;
	padding-top: 75px;
}

/*///////// EXPLANATION //////////*/
.transition-25:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 0.35s;
}

/*//////// SHAPE 1 ////////*/
.transition-25 .shape-1 {
	display: inline-block;
	margin: 0 auto;
	position: relative;
}

.transition-25:hover .shape-1 {
	margin-left: -8%;
	margin-top: 33%;
	height: 10%;
	width: 60%;
	transition: all 0.5s ease;
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #26
//////////////////////////////////////////////////////////*/
.transition-26 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 38%;
	padding-top: 75px;
}

/*///////// EXPLANATION //////////*/
.transition-26:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1.25s;
}

/*//////// SHAPE 1 ////////*/
.transition-26 .shape-1 {
	display: inline-block;
	margin: 0 auto;
	position: relative;
}

.transition-26:hover .shape-1 {
	box-shadow: inset 0px 0px 200px 100px #FFFFFF;
	transition: all 1.25s linear;
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #27
//////////////////////////////////////////////////////////*/
.transition-27 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 45%;
	padding-top: 50px;
}

/*///////// EXPLANATION //////////*/
.transition-27:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1.25s;
}

/*//////// SHAPE 1 ////////*/
.transition-27 .shape-1 {
	display: inline-block;
	position: absolute;
}

.transition-27:hover .shape-1 {
	-webkit-transform: rotate(90deg);
	-webkit-transform-origin: bottom right;
	transition: all 1.25s ease-in;
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #28
//////////////////////////////////////////////////////////*/
.transition-28 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 40%;
	padding-top: 70px;
}

/*///////// EXPLANATION //////////*/
.transition-28:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1.25s;
}

/*//////// SHAPE 1 ////////*/
.transition-28 .shape-1 {
	display: inline-block;
	position: absolute;
}

/*//////// SHAPE 2 ////////*/
.transition-28 .shape-2 {
	display: inline-block;
	position: absolute;
}

.transition-28:hover .shape-2 {
	-webkit-animation: swap 1.25s alternate forwards;
	z-index: -1;
	transition: all 0s linear .5s;
}

@-webkit-keyframes swap {
	50% {
		margin-left: 300px;
	}
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #29
//////////////////////////////////////////////////////////*/
.transition-29 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 45%;
	padding-top: 150px;
}

/*///////// EXPLANATION //////////*/
.transition-29:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1.25s;
}

/*//////// SHAPE 1 ////////*/
.transition-29 .shape-1 {
	display: inline-block;
	position: absolute;
	margin: 0 auto;
}

.transition-29:hover .shape-1 {
	-webkit-animation: float 3s ease-out infinite;
}

@-webkit-keyframes float {
  50% {
     -webkit-transform: translate(0px, 30px);
  }
}

/*//////////////////////////////////////////////////////////
///////////////////////////////////// TRANSITION SECTION #30
//////////////////////////////////////////////////////////*/
.transition-30 {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-left: 45%;
	padding-top: 70px;
}

/*///////// EXPLANATION //////////*/
.transition-30:hover .explanation {
	opacity: 1;
	transition: all .25s ease-in 1.25s;
}

/*//////// SHAPE 1 ////////*/
.transition-30 .shape-1 {
	display: inline-block;
	position: absolute;
	margin: 0 auto;
	border-radius: 20px;
}

.transition-30:hover .shape-1 {
	-webkit-animation: wobble 3s ease-out infinite;
}

@-webkit-keyframes wobble {
	20% {
		-webkit-transform: skewX(30deg);
		-webkit-transform-origin: bottom;
	}

	40% {
		-webkit-transform: skewX(-30deg);
		-webkit-transform-origin: bottom;
	}

	60% {
		-webkit-transform: skewX(30deg);
		-webkit-transform-origin: bottom;
	}

	80% {
		-webkit-transform: skewX(-30deg);
		-webkit-transform-origin: bottom;
	}
}