/*** common ***/
html, body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
  background-color:beige;
  color: rgb(6, 106, 117);
}

.cubeshape {
	width: 300px;
	text-align: center;
	margin: 0 auto;
	height: 60px;
  text-transform: uppercase;
	font-family: sans-serif;
}

h1 {
	font-size: 1.5em;
	font-weight: lighter;
}


h1 a {
	    padding: 16px 0px;
}


.cubeshape a {
	color: white;
	text-decoration: none;
	width: 300px;
	position: absolute;
	top: 0;
	left: 0;
}

.container-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 800px;
	text-align: center;
}

/******************/
/**** BUTTON 1 ****/
.toggle-button {
	display: inline-block;
    vertical-align: middle;
}

.cube {

	-webkit-transition: -webkit-transform .33s;
	transition: transform .33s; /* Animate the transform properties */

	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d; 
}


.first_cube,.second_cube {
	 background: #95CDCE;
	height: 60px;
	width: 100%;
    position: relative;
}

.first_cube {
	border-bottom: 4px solid #56A8A9;
	-webkit-transform: translateZ(30px);
	transform: translateZ(30px);
}

.second_cube {
	border-top: 4px solid #56A8A9;
	margin-top: -2px;
	 -webkit-transform: rotateX(-90deg) translateZ(-30px);
	transform: rotateX(-90deg) translateZ(-30px); 

	
}

.cube:hover {
	 -webkit-transform: rotateX(89deg);
	transform: rotateX(89deg); 

}

/******************/
/**** BUTTON 2 ****/

.toggle-button-2 {
	display: inline-block;
	vertical-align: middle;
	padding-top: 16px;
	margin-left: 15px;
}

.cube2 {
	-webkit-transition: -webkit-transform 0.8s;
	transition: transform 0.8s; /* Animate the transform properties */

	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d; 
}


.first_cube2, .second_cube2 {
	background: #EF717A;
	height: 60px;
	width: 100%;
    position: relative;
}

.first_cube2, .second_cube2 {
	position: absolute;
    backface-visibility: hidden;
}

.first_cube2 {
	border-bottom: 4px solid #D95459;
	transform: perspective(600px) rotateX(0);
}

.second_cube2 {
	border-top: 4px solid #D95459;
	margin-top: -2px;
	transform: perspective(600px) rotateX(180deg);
}

.toggle-button-2:hover .cube2 {
	transform: rotateX(180deg);
} 


.toggle-button-2 {
	-webkit-perspective: 600px; 
}

.Signature {
	position: absolute;
	z-index: 100;
	bottom: 20px;
	right: 20px;
	color: black;
	line-height: .2;
	font-size: .7em;
	font-family: Open Sans, sans-serif;
}