.btn-container {
	width: 1180px;
	height: 280px;
	margin: 0 auto;
	text-align: center;
	position: relative;	
}

/* General button */

.btn {
	width: 260px;
	border: none;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: #e30d2b;
	cursor: pointer;
	padding: 10px 20px;
	display: block;
	margin: 15px 30px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.btn:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.btn:active { background: #55b7f3; }


/* Standard Button */

.btn-standard {
	font-family: 'bebas_neueregular', Arial; 
	text-transform: uppercase;
	font-size: 30px;
	font-weight: 300;
	border: 3px solid #fff;
	color: #fff;
}

.btn-standard:hover, .btn-standard:active {
	color: #FFFFFF;
	background: #b8b0b1;
}

.btn-small {
	font-size: 20px;
}


/* Button 3D Flip */

.wrapper {
	display: inline-block;
	vertical-align:top;
}

.wrapper.kanye:hover, .selected .wrapper.kanye.active {
	background-image: url('../img/quote_kanye.gif');
	background-position: bottom center;
	background-repeat: no-repeat;
	height: 280px;
}

.wrapper.creativedirector:hover, .selected .wrapper.creativedirector.active {
	background-image: url('../img/quote_creativedirector.gif');
	background-position: center 90px;
	background-repeat: no-repeat;
	height: 280px;
}

.selected .wrapper:hover  {
	background: none;
}

.text {
	width: 160px;
}

.text p {
	font-family: 'ballparkweiner', Arial;
	font-size: 40px;
	line-height: 40px;
	color: #000000; 	
	padding: 0;
	margin: 25px 0 0 0;
}

.text p.response { 
	font-family: Helvetica, Arial;
	font-size: 15px;
	line-height: 18px;
	text-align: center;
	margin-top: 80px;
	padding: 20px 20px;
	border-left: 2px solid #e71c38;
	border-right: 2px solid #e71c38;
	background-image: url('../img/response_bg.png');
	background-position: top center;
	background-repeat: no-repeat;
	display: none;
} 

.selected .text, .selected .wrapper.text:hover {
	background-image: url('../img/response_bg.png');
	background-position: bottom center;
	background-repeat: no-repeat;
}


/* Button 8g */
.btn-quote {
	font-family: 'bebas_neueregular', Arial; 
	text-transform: uppercase;
	font-weight: 100;
	font-size: 30px;	
	color: #FFFFFF;
	background: #e30d2b;
	border: 2px solid #FFFFFF;
}

.btn-quote:hover {
	background: #b8b0b1;
}

.btn-quote:after,
.btn-quote:before {
	text-transform: uppercase;
	color: #FFFFFF;
	font-family: 'bebas_neueregular', Arial; 
	text-transform: uppercase;
	font-weight: 300;
	font-size: 30px;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	line-height: 55px;
}

.btn-quote:after {
	top: -100%;
	background: #78cc79;
	-webkit-transform-origin: 0% 100%;
	-webkit-transform: rotateX(90deg);
	-moz-transform-origin: 0% 100%;
	-moz-transform: rotateX(90deg);
	-ms-transform-origin: 0% 100%;
	-ms-transform: rotateX(90deg);
	transform-origin: 0% 100%;
	transform: rotateX(90deg);
}

.btn-quote:before {
	top: 100%;
	background: #b8b0b1;
	-webkit-transform-origin: 0% 0%;
	-webkit-transform: rotateX(-90deg);
	-moz-transform-origin: 0% 0%;
	-moz-transform: rotateX(-90deg);
	-ms-transform-origin: 0% 0%;
	-ms-transform: rotateX(-90deg);
	transform-origin: 0% 0%;
	transform: rotateX(-90deg);
}

.btn-quote.btn-success3d {
	background: #78cc79;
	-webkit-transform-origin: 50% 100%;
	-webkit-transform: rotateX(-90deg) translateY(100%);
	-moz-transform-origin: 50% 100%;
	-moz-transform: rotateX(-90deg) translateY(100%);
	-ms-transform-origin: 50% 100%;
	-ms-transform: rotateX(-90deg) translateY(100%);
	transform-origin: 50% 100%;
	transform: rotateX(-90deg) translateY(100%);
}

.btn-quote.btn-error3d  {
	background: #b8b0b1;
	-webkit-transform-origin: 50% 0%;
	-webkit-transform: rotateX(90deg) translateY(-100%);
	-moz-transform-origin: 50% 0%;
	-moz-transform: rotateX(90deg) translateY(-100%);
	-ms-transform-origin: 50% 0%;
	-ms-transform: rotateX(90deg) translateY(-100%);
	transform-origin: 50% 0%;
	transform: rotateX(90deg) translateY(-100%);
}

/* Selected Style */
.selected .wrapper .btn-quote { background: #b8b0b1; pointer-events: none; cursor: default; }
.selected .wrapper.text p.response {  display: block; }


/* Button Flip Text */

.kanye .btn-quote:before, .kanye .btn-quote:after  {
	content: 'Kanye';
}

.creativedirector .btn-quote:before, .creativedirector .btn-quote:after  {
	content: 'Creative Director';
}