body {
	background-color: #f5f5f5;
	color: #44464a;
	font: 12px/18px bariol_bold;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-text-size-adjust: none;
	text-rendering: optimizelegibility;
	-webkit-font-smoothing: antialiased;
	-moz-tap-highlight-color:rgba(0,0,0,0);
	-moz-text-size-adjust: none;
	-moz-font-smoothing: antialiased;
	tap-highlight-color:rgba(0,0,0,0);
	text-size-adjust: none;
	font-smoothing: antialiased;
}

a {text-decoration: none;}

span {display: block;}
.sprite {
	background: url(../img/sprite.png) no-repeat;
	background-size: 350px 26px;
}


.container .tiles {
	width: 320px;
	margin: 100px auto 0;
}
.outer {
	position: relative;
	-webkit-perspective: 1100;
	-webkit-transition: all .2s ease-in-out;
	-moz-perspective: 1100;
	-moz-transition: all .2s ease-in-out;
	perspective: 1100;
	transition: all .2s ease-in-out;
}
.social .outer {
	-webkit-perspective: 200;
	-webkit-transition: all .2s ease-in-out;
	-moz-perspective: 200;
	-moz-transition: all .2s ease-in-out;
	perspective: 200;
	transition: all .2s ease-in-out;
}
div.inner {
	width: 100%;
	height: 100%;
	position: absolute;
}
.square,
.tile,
.banner {
	width: 100%;
}
.tiles > li:first-child div {
	border-radius: 8px 8px 0 0;
}
.square {
	height: 220px;
	border-top: 1px solid #f5f5f5;
	position: relative;
	z-index: 1;
}
.badge {
	width: 56px;
	height: 61px;
	background-size: 168px 114px;
	background: url(../img/Slice.png) 0 0;
	margin: 38px auto 9px;
}
.square p.largetype {
	color: #939699;
	text-align: center;
	padding: 0 20px 20px;
	font-size: 28px;
	line-height: 38px;
}
.square h2 {
	text-align: center;
	font-size: 32px;
	margin-top: 30px;
	margin-bottom: 25px;
}
.square p.smalltype {
	color: #939699;
	text-align: center;
	padding: 0 20px;
	font-size: 16px;
	line-height: 30px;
}
.square p.smalltype em {
	color: #2fa5a7;
}
.tile {
	height: 55px;
	margin-bottom: 1px;
	font-size: 33px;
	color: #fff;
	text-align: center;
	line-height: 55px;
}
.back.hidden {
	display: none;
}
.front,
.back {
	width: 100%;
	height: 100%;
	position: absolute;
}
.front {
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
	backface-visibility: visible;
}
.back {
	-webkit-backface-visibility: hidden;
	-webkit-transform: rotateY(180deg);
	-moz-backface-visibility: hidden;
	-moz-transform: rotateY(180deg);
	backface-visibility: hidden;
	transform: rotateY(180deg);
}
.closeflip {
	width: 25px;
	height: 25px;
	background-color: #ffffff;
	border: 3px solid #ff7771;
	border-radius: 50px;
	color: #44464a;
	position: absolute;
	top: -15px;
	right: -15px;
	line-height: 20px;
	text-align: center;
	font-size: 23px;
	cursor: pointer;
	z-index: 9;
	display: none;
}
.closeflip.show {
	-webkit-transform-origin: center;
	-webkit-transform: scale(1);
	-webkit-animation: show .4s ease-in-out;
	-moz-transform-origin: center;
	-moz-transform: scale(1);
	-moz-animation: show .4s ease-in-out;
	transform-origin: center;
	transform: scale(1);
	animation: show .4s ease-in-out;
}
@-webkit-keyframes show {
	0% {
	-webkit-transform: scale(0);
	}
	40% {
	-webkit-transform: scale(1.3);
	}
	70% {
	-webkit-transform: scale(.8);
	}
	100% {
	-webkit-transform: scale(1);
	}
}
@-moz-keyframes show {
	0% {
	-moz-transform: scale(0);
	}
	40% {
	-moz-transform: scale(1.3);
	}
	70% {
	-moz-transform: scale(.8);
	}
	100% {
	-moz-transform: scale(1);
	}
}
@keyframes show {
	0% {
	transform: scale(0);
	}
	40% {
	transform: scale(1.3);
	}
	70% {
	transform: scale(.8);
	}
	100% {
	transform: scale(1);
	}
}
.closeflip.shrink {
	-webkit-transform-origin: center;
	-webkit-transform: scale(0);
	-webkit-animation: shrink .3s ease-in;
	-moz-transform-origin: center;
	-moz-transform: scale(0);
	-moz-animation: shrink .3s ease-in;
	transform-origin: center;
	transform: scale(0);
	animation: shrink .3s ease-in;
}
@-webkit-keyframes shrink {
	0% {
	-webkit-transform: scale(1);
	}
	60% {
	-webkit-transform: scale(1.3);
	}
	100% {
	-webkit-transform: scale(0);
	}
}
@-moz-keyframes shrink {
	0% {
	-moz-transform: scale(1);
	}
	60% {
	-moz-transform: scale(1.3);
	}
	100% {
	-moz-transform: scale(0);
	}
}
@keyframes shrink {
	0% {
	transform: scale(1);
	}
	60% {
	transform: scale(1.3);
	}
	100% {
	transform: scale(0);
	}
}
.square .back {
	background-color: #ededed;
	-moz-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.05);
	-webkit-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.05);
}
.tile .back {
	background-color: #44464a;
}
.banner {
	height: 80px;
	font-size: 17px;
	color: #fff;
	text-align: center;
	border-top: 1px solid #f5f5f5;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
.banner p {
	margin-top: 14px;
}
.banner a {
	color: #ce0700;
	font-size: 26px;
	line-height: 39px;
}
.banner a:hover {
	color: #fff;
}
.contact {
	height: 62px;
	color: #fff;
	border-top: 1px solid #f5f5f5;
	margin: 0 auto;
	position: relative;
	z-index: 0;
}
.contact .social li {
	width: 63px;
	height: 55px;
	display: inline-block;
	margin-right: 1px;
	margin-left: 0;
	cursor: pointer;
	float: left;
}
.social li .inner {
	background-color: #a8aaad;
}
.social li.twitter .inner {
	background-position: 20px 16px;
}
.social li.dribbble .inner {
	background-position: -303px 16px;
}
.social li.instagram .inner {
	background-position: -62px 16px;
}
.social li.mail .inner {
	background-position: -141px 16px;
}
.social li.flip .inner {
	width: 64px;
	margin-right: 0;
	background-color:  #2fa5a7;
	background-position: -223px 16px;
}
.contact .social li a {
	display: block;
	width: 100%;
	height: 100%;
}








.flipleft {
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: right center;
	-webkit-transform: rotateY(0deg);
	-webkit-animation: flipleft .8s ease-in-out;
	-moz-transform-style: preserve-3d;
	-moz-transform-origin: right center;
	-moz-transform: rotateY(0deg);
	-moz-animation: flipleft .8s ease-in-out;
	transform-style: preserve-3d;
	transform-origin: right center;
	transform: rotateY(0deg);
	animation: flipleft .8s ease-in-out;
}
@-webkit-keyframes flipleft {
	0% {
	-webkit-transform: rotateY(-100deg);
	background-color: #889bc1;
	}
	70% {
	-webkit-transform: rotateY(30deg);
	background-color: #d5ddec;
	}
	100% {
	-webkit-transform: rotateY(0deg);
	background-color: #b7c4dd;
	}
}
@-moz-keyframes flipleft {
	0% {
	-moz-transform: rotateY(-100deg);
	background-color: #889bc1;
	}
	70% {
	-moz-transform: rotateY(30deg);
	background-color: #d5ddec;
	}
	100% {
	-moz-transform: rotateY(0deg);
	background-color: #b7c4dd;
	}
}
@keyframes flipleft {
	0% {
	transform: rotateY(-100deg);
	background-color: #889bc1;
	}
	70% {
	transform: rotateY(30deg);
	background-color: #d5ddec;
	}
	100% {
	transform: rotateY(0deg);
	background-color: #b7c4dd;
	}
}

.flipright {
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: left center;
	-webkit-transform: rotateY(0deg);
	-webkit-animation: flipright .8s ease-in-out;
	-moz-transform-style: preserve-3d;
	-moz-transform-origin: left center;
	-moz-transform: rotateY(0deg);
	-moz-animation: flipright .8s ease-in-out;
	transform-style: preserve-3d;
	transform-origin: left center;
	transform: rotateY(0deg);
	animation: flipright .8s ease-in-out;
}
@-webkit-keyframes flipright {
	0% {
	-webkit-transform: rotateY(100deg);
	background-color: #889bc1;
	}
	70% {
	-webkit-transform: rotateY(-30deg);
	background-color: #d5ddec;
	}
	100% {
	-webkit-transform: rotateY(0deg);
	background-color: #b7c4dd;
	}
}
@-moz-keyframes flipright {
	0% {
	-moz-transform: rotateY(100deg);
	background-color: #889bc1;
	}
	70% {
	-moz-transform: rotateY(-30deg);
	background-color: #d5ddec;
	}
	100% {
	-moz-transform: rotateY(0deg);
	background-color: #b7c4dd;
	}
}
@keyframes flipright {
	0% {
	transform: rotateY(100deg);
	background-color: #889bc1;
	}
	70% {
	transform: rotateY(-30deg);
	background-color: #d5ddec;
	}
	100% {
	transform: rotateY(0deg);
	background-color: #b7c4dd;
	}
}
.square .flipup {
	background-color: #ededed;
	-moz-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.05);
	-webkit-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.05);
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: bottom center;
	-webkit-transform: rotateX(0deg);
	-webkit-animation: flipup 1.2s ease-in-out;
	-moz-backface-visibility: hidden;
	-moz-transform-style: preserve-3d;
	-moz-transform-origin: bottom center;
	-moz-transform: rotateX(0deg);
	-moz-animation: flipup 1.2s ease-in-out;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	transform-origin: bottom center;
	transform: rotateX(0deg);
	animation: flipup 1.2s ease-in-out;
}
@-webkit-keyframes flipup {
		0% {
		-webkit-transform: rotateX(100deg);
		background-color: #f8f8f8;
		}
		55% {
		-webkit-transform: rotateX(-30deg);
		background-color: #dcdcdc;
		}
		70% {
		-webkit-transform: rotateX(15deg);
		background-color: #f7f7f7;
		}
		85% {
		-webkit-transform: rotateX(-10deg);
		background-color: #e6e6e6;
		}
		100% {
		-webkit-transform: rotateX(0deg);
		background-color: #ededed;
		}
}
@-moz-keyframes flipup {
		0% {
		-moz-transform: rotateX(100deg);
		background-color: #f8f8f8;
		}
		55% {
		-moz-transform: rotateX(-30deg);
		background-color: #dcdcdc;
		}
		70% {
		-moz-transform: rotateX(15deg);
		background-color: #f7f7f7;
		}
		85% {
		-moz-transform: rotateX(-10deg);
		background-color: #e6e6e6;
		}
		100% {
		-moz-transform: rotateX(0deg);
		background-color: #ededed;
		}
}
@keyframes flipup {
		0% {
		transform: rotateX(100deg);
		background-color: #f8f8f8;
		}
		55% {
		transform: rotateX(-30deg);
		background-color: #dcdcdc;
		}
		70% {
		transform: rotateX(15deg);
		background-color: #f7f7f7;
		}
		85% {
		transform: rotateX(-10deg);
		background-color: #e6e6e6;
		}
		100% {
		transform: rotateX(0deg);
		background-color: #ededed;
		}
}


.tile .flipdown {
	background-color: #44464a;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: top center;
	-webkit-transform: rotateX(0deg);
	-webkit-animation: tileflipdown 1.1s ease-in-out;
	-moz-backface-visibility: hidden;
	-moz-transform-style: preserve-3d;
	-moz-transform-origin: top center;
	-moz-transform: rotateX(0deg);
	-moz-animation: tileflipdown 1.1s ease-in-out;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	transform-origin: top center;
	transform: rotateX(0deg);
	animation: tileflipdown 1.1s ease-in-out;
}
@-webkit-keyframes tileflipdown {
	0% {
	-webkit-transform: rotateX(-100deg);
	background-color: #232528;
	}
	45% {
	-webkit-transform: rotateX(40deg);
	background-color: #626469;
	}
	60% {
	-webkit-transform: rotateX(-30deg);
	background-color: #313337;
	}
	80% {
	-webkit-transform: rotateX(20deg);
	background-color: #53565b;
	}
	100% {
	-webkit-transform: rotateX(0deg);
	background-color: #44464a;
	}
}
@-moz-keyframes tileflipdown {
	0% {
	-moz-transform: rotateX(-100deg);
	background-color: #232528;
	}
	45% {
	-moz-transform: rotateX(40deg);
	background-color: #626469;
	}
	60% {
	-moz-transform: rotateX(-30deg);
	background-color: #313337;
	}
	80% {
	-moz-transform: rotateX(20deg);
	background-color: #53565b;
	}
	100% {
	-moz-transform: rotateX(0deg);
	background-color: #44464a;
	}
}
@keyframes tileflipdown {
	0% {
	transform: rotateX(-100deg);
	background-color: #232528;
	}
	45% {
	transform: rotateX(40deg);
	background-color: #626469;
	}
	60% {
	transform: rotateX(-30deg);
	background-color: #313337;
	}
	80% {
	transform: rotateX(20deg);
	background-color: #53565b;
	}
	100% {
	transform: rotateX(0deg);
	background-color: #44464a;
	}
}


.social li.twitter .inner.push,
.social li.dribbble .inner.push,
.social li.instagram .inner.push,
.social li.mail .inner.push {
	background-color: #939699;
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: top center;
	-webkit-transform: rotateX(-20deg);
	-webkit-animation: pushdown .2s cubic-bezier(0.075, 0.82, 0.165, 1);
	-moz-transform-style: preserve-3d;
	-moz-transform-origin: top center;
	-moz-transform: rotateX(-20deg);
	-moz-animation: pushdown .2s cubic-bezier(0.075, 0.82, 0.165, 1);
	transform-style: preserve-3d;
	transform-origin: top center;
	transform: rotateX(-20deg);
	animation: pushdown .2s cubic-bezier(0.075, 0.82, 0.165, 1);
	
}
@-webkit-keyframes pushdown {
	0% {
	-webkit-transform: rotateX(0deg);
	background-color: #a8aaad;
	}
	100% {
	-webkit-transform: rotateX(-20deg);
	background-color: #939699;
	}
}
@-moz-keyframes pushdown {
	0% {
	-moz-transform: rotateX(0deg);
	background-color: #a8aaad;
	}
	100% {
	-moz-transform: rotateX(-20deg);
	background-color: #939699;
	}
}
@keyframes pushdown {
	0% {
	transform: rotateX(0deg);
	background-color: #a8aaad;
	}
	100% {
	transform: rotateX(-20deg);
	background-color: #939699;
	}
}

.social li.twitter .inner.release,
.social li.dribbble .inner.release,
.social li.instagram .inner.release,
.social li.mail .inner.release {
	background-color: #a8aaad;
	position: relative;
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: top center;
	-webkit-transform: rotateX(0deg);
	-webkit-animation: release 1s ease-out;
	-moz-transform-style: preserve-3d;
	-moz-transform-origin: top center;
	-moz-transform: rotateX(0deg);
	-moz-animation: release 1s ease-out;
	transform-style: preserve-3d;
	transform-origin: top center;
	transform: rotateX(0deg);
	animation: release 1s ease-out;
}
@-webkit-keyframes release {
	0% {
	-webkit-transform: rotateX(-20deg);
	background-color: #939699;
	}
	25% {
	-webkit-transform: rotateX(15deg);
	background-color: #bdbec0;
	}
	48% {
	-webkit-transform: rotateX(-12deg);
	background-color: #9d9fa2;
	}
	68% {
	-webkit-transform: rotateX(9deg);
	background-color: #afb1b3;
	}
	80% {
	-webkit-transform: rotateX(-5deg);
	background-color: #9fa1a4;
	}
	100% {
	-webkit-transform: rotateX(0deg);
	background-color: #a8aaad;
	}
}
@-moz-keyframes release {
	0% {
	-moz-transform: rotateX(-20deg);
	background-color: #939699;
	}
	25% {
	-moz-transform: rotateX(15deg);
	background-color: #bdbec0;
	}
	48% {
	-moz-transform: rotateX(-12deg);
	background-color: #9d9fa2;
	}
	68% {
	-moz-transform: rotateX(9deg);
	background-color: #afb1b3;
	}
	80% {
	-moz-transform: rotateX(-5deg);
	background-color: #9fa1a4;
	}
	100% {
	-moz-transform: rotateX(0deg);
	background-color: #a8aaad;
	}
}
@keyframes release {
	0% {
	transform: rotateX(-20deg);
	background-color: #939699;
	}
	25% {
	transform: rotateX(15deg);
	background-color: #bdbec0;
	}
	48% {
	transform: rotateX(-12deg);
	background-color: #9d9fa2;
	}
	68% {
	transform: rotateX(9deg);
	background-color: #afb1b3;
	}
	80% {
	transform: rotateX(-5deg);
	background-color: #9fa1a4;
	}
	100% {
	transform: rotateX(0deg);
	background-color: #a8aaad;
	}
}
.social li.flip .inner.push {
	background-color: #278587;
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: top center;
	-webkit-transform: rotateX(-20deg);
	-webkit-animation: flip-down .2s cubic-bezier(0.075, 0.82, 0.165, 1);
	-moz-transform-style: preserve-3d;
	-moz-transform-origin: top center;
	-moz-transform: rotateX(-20deg);
	-moz-animation: flip-down .2s cubic-bezier(0.075, 0.82, 0.165, 1);
	transform-style: preserve-3d;
	transform-origin: top center;
	transform: rotateX(-20deg);
	animation: flip-down .2s cubic-bezier(0.075, 0.82, 0.165, 1);
	
}
@-webkit-keyframes flip-down {
	0% {
	-webkit-transform: rotateX(0deg);
	background-color: #2fa5a7;
	}
	100% {
	-webkit-transform: rotateX(-20deg);
	background-color: #278587;
	}
}
@-moz-keyframes flip-down {
	0% {
	-moz-transform: rotateX(0deg);
	background-color: #2fa5a7;
	}
	100% {
	-moz-transform: rotateX(-20deg);
	background-color: #278587;
	}
}
@keyframes flip-down {
	0% {
	transform: rotateX(0deg);
	background-color: #2fa5a7;
	}
	100% {
	transform: rotateX(-20deg);
	background-color: #278587;
	}
}

.social li.flip .inner.release {
	background-color: #2fa5a7;
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: top center;
	-webkit-transform: rotateX(0deg);
	-webkit-animation: flip-release .8s ease-out;
	-moz-transform-style: preserve-3d;
	-moz-transform-origin: top center;
	-moz-transform: rotateX(0deg);
	-moz-animation: flip-release .8s ease-out;
	transform-style: preserve-3d;
	transform-origin: top center;
	transform: rotateX(0deg);
	animation: flip-release .8s ease-out;
}
@-webkit-keyframes flip-release {
	0% {
	-webkit-transform: rotateX(-20deg);
	background-color: #278587;
	}
	25% {
	-webkit-transform: rotateX(15deg);
	background-color: #38b7b9;
	}
	48% {
	-webkit-transform: rotateX(-12deg);
	background-color: #2b9698;
	}
	68% {
	-webkit-transform: rotateX(9deg);
	background-color: #31adaf;
	}
	80% {
	-webkit-transform: rotateX(-5deg);
	background-color: #2d9d9f;
	}
	100% {
	-webkit-transform: rotateX(0deg);
	background-color: #2fa5a7;
	}
}
@-moz-keyframes flip-release {
	0% {
	-moz-transform: rotateX(-20deg);
	background-color: #278587;
	}
	25% {
	-moz-transform: rotateX(15deg);
	background-color: #38b7b9;
	}
	48% {
	-moz-transform: rotateX(-12deg);
	background-color: #2b9698;
	}
	68% {
	-moz-transform: rotateX(9deg);
	background-color: #31adaf;
	}
	80% {
	-moz-transform: rotateX(-5deg);
	background-color: #2d9d9f;
	}
	100% {
	-moz-transform: rotateX(0deg);
	background-color: #2fa5a7;
	}
}
@keyframes flip-release {
	0% {
	transform: rotateX(-20deg);
	background-color: #278587;
	}
	25% {
	transform: rotateX(15deg);
	background-color: #38b7b9;
	}
	48% {
	transform: rotateX(-12deg);
	background-color: #2b9698;
	}
	68% {
	transform: rotateX(9deg);
	background-color: #31adaf;
	}
	80% {
	transform: rotateX(-5deg);
	background-color: #2d9d9f;
	}
	100% {
	transform: rotateX(0deg);
	background-color: #2fa5a7;
	}
}
.social li.dribbble .inner,
.social li.dribbble .inner.push,
.social li.dribbble .inner.release   {
	border-radius: 0 0 0 8px;
}
.social li.flip .inner,
.social li.flip .inner.push,
.social li.flip .inner.release   {
	border-radius: 0 0 8px 0;
}

.contact .slidedown {
	-webkit-transform-origin: top center;
	-webkit-transform: translate3d(0,0,0);
	-webkit-animation: slidedown .3s cubic-bezier(0.23, 1, 0.32, 1);
	-moz-transform-origin: top center;
	-moz-transform: translate3d(0,0,0);
	-moz-animation: slidedown .3s cubic-bezier(0.23, 1, 0.32, 1);
	transform-origin: top center;
	transform: translate3d(0,0,0);
	animation: slidedown .3s cubic-bezier(0.23, 1, 0.32, 1);
}
@-webkit-keyframes slidedown {
	0% {-webkit-transform: translate3d(0,-100%,0);}
	100% {-webkit-transform: translate3d(0,0,0);}
}
@-moz-keyframes slidedown {
	0% {-moz-transform: translate3d(0,-100%,0);}
	100% {-moz-transform: translate3d(0,0,0);}
}
@keyframes slidedown {
	0% {transform: translate3d(0,-100%,0);}
	100% {transform: translate3d(0,0,0);}
}


.banner .slideleft {
	background-color: #ff7772;
	-webkit-transform-origin: top center;
	-webkit-transform: translate3d(0,0,0);
	-webkit-animation: slideleft .6s ease-in-out;
	-moz-transform-origin: top center;
	-moz-transform: translate3d(0,0,0);
	-moz-animation: slideleft .8s ease-in-out;
	transform-origin: top center;
	transform: translate3d(0,0,0);
	animation: slideleft .8s ease-in-out;
}
@-webkit-keyframes slideleft {
	0% {-webkit-transform: translate3d(-100%,0,0);}
	60% {-webkit-transform: translate3d(30px,0,0);}
	80% {-webkit-transform: translate3d(-15px,0,0);}
	100% {-webkit-transform: translate3d(0,0,0);}
}
@-moz-keyframes slideleft {
	0% {-moz-transform: translate3d(-100%,0,0);}
	60% {-moz-transform: translate3d(30px,0,0);}
	80% {-moz-transform: translate3d(-15px,0,0);}
	100% {-moz-transform: translate3d(0,0,0);}
}
@keyframes slideleft {
	0% {transform: translate3d(-100%,0,0);}
	60% {transform: translate3d(30px,0,0);}
	80% {transform: translate3d(-15px,0,0);}
	100% {transform: translate3d(0,0,0);}
}


.contact .slideup {
	-webkit-transform-origin: top center;
	-webkit-transform: translate3d(0,0,0);
	-webkit-animation: slideup .4s ease-in-out;
	-moz-transform-origin: top center;
	-moz-transform: translate3d(0,0,0);
	-moz-animation: slideup .4s ease-in-out;
	transform-origin: top center;
	transform: translate3d(0,0,0);
	animation: slideup .4s ease-in-out;
}
@-webkit-keyframes slideup {
	0% {-webkit-transform: translate3d(0,100%,0);}
	100% {-webkit-transform: translate3d(0,0,0);}
}
@-moz-keyframes slideup {
	0% {-moz-transform: translate3d(0,100%,0);}
	100% {-moz-transform: translate3d(0,0,0);}
}
@keyframes slideup {
	0% {transform: translate3d(0,100%,0);}
	100% {transform: translate3d(0,0,0);}
}

.tiles .outer.rotate {
	-webkit-perspective: 700;
	-moz-perspective: 700;
}
.tiles .outer.rotate .inner {
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: center;
	-webkit-transform: rotateY(180deg);
	-webkit-animation: rotate .8s ease-in-out;
	-moz-transform-style: preserve-3d;
	-moz-transform-origin: center;
	-moz-transform: rotateY(180deg);
	-moz-animation: rotate .8s ease-in-out;
	transform-style: preserve-3d;
	transform-origin: center;
	transform: rotateY(180deg);
	animation: rotate .8s ease-in-out;
}
@-webkit-keyframes rotate {
	0% {-webkit-transform: rotateY(0deg);}
	20% {-webkit-transform: rotateY(-20deg);}
	40% {-webkit-transform: rotateY(-25deg);}
	80% {-webkit-transform: rotateY(200deg);}
	100% {-webkit-transform: rotateY(180deg);}
}
@-moz-keyframes rotate {
	0% {-moz-transform: rotateY(0deg);}
	20% {-moz-transform: rotateY(-20deg);}
	40% {-moz-transform: rotateY(-25deg);}
	80% {-moz-transform: rotateY(200deg);}
	100% {-moz-transform: rotateY(180deg);}
}
@keyframes rotate {
	0% {transform: rotateY(0deg);}
	20% {transform: rotateY(-20deg);}
	40% {transform: rotateY(-25deg);}
	80% {transform: rotateY(200deg);}
	100% {transform: rotateY(180deg);}
}
.tiles .outer.unrotate .inner {
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: center;
	-webkit-transform: rotateY(0deg);
	-webkit-animation: unrotate .8s ease-in-out;
	-moz-transform-style: preserve-3d;
	-moz-transform-origin: center;
	-moz-transform: rotateY(0deg);
	-moz-animation: unrotate .8s ease-in-out;
	transform-style: preserve-3d;
	transform-origin: center;
	transform: rotateY(0deg);
	animation: unrotate .8s ease-in-out;
}
@-webkit-keyframes unrotate {
	0% {-webkit-transform: rotateY(180deg);}
	20% {-webkit-transform: rotateY(200deg);}
	40% {-webkit-transform: rotateY(210deg);}
	80% {-webkit-transform: rotateY(-20deg);}
	100% {-webkit-transform: rotateY(0deg);}
}
@-moz-keyframes unrotate {
	0% {-moz-transform: rotateY(180deg);}
	20% {-moz-transform: rotateY(200deg);}
	40% {-moz-transform: rotateY(210deg);}
	80% {-moz-transform: rotateY(-20deg);}
	100% {-moz-transform: rotateY(0deg);}
}
@keyframes unrotate {
	0% {transform: rotateY(180deg);}
	20% {transform: rotateY(200deg);}
	40% {transform: rotateY(210deg);}
	80% {transform: rotateY(-20deg);}
	100% {transform: rotateY(0deg);}
}






@media only screen and (max-width: 500px) {
	.container .tiles {
		width: 260px;
		margin: 20px auto;
	}
	.square {
		height: 180px;
		margin-top: 1px;
	}
	.badge {
		width: 45px;
		height: 50px;
		margin-top: 33px;
		background: url(../img/Slice.png) 0 -64px;
		margin-bottom: 7px;
	}
	.square p.largetype {
		padding: 0 30px 20px;
		font-size: 20px;
		line-height: 29px;
	}
	.square h2 {
		font-size: 25px;
		margin-top: 19px;
		margin-bottom: 13px;
	}
	.square p.smalltype {
		text-align: center;
		padding: 0 20px;
		font-size: 14px;
		line-height: 28px;
	}
	.tile {
		height: 45px;
		font-size: 27px;
		line-height: 45px;
	}
	.banner {
		height: 80px;
		font-size: 15px;
		color: #fff;
		text-align: center;
		border-top: 1px solid #f5f5f5;
		overflow: hidden;
		position: relative;
		z-index: 1;
	}
	.banner p {
		margin-top: 15px;
	}
	.banner a {
		font-size: 24px;
		line-height: 40px;
	}
	.contact {
		height: 50px;
	}
	.contact .social li {
		width: 51px;
		height: 50px;
	}
	.social li.dribbble .inner {
		background-position: -309px 13px;
	}
	.social li.twitter .inner {
		background-position: 14px 13px;
	}
	.social li.instagram .inner {
		background-position: -68px 13px;
	}
	.social li.mail .inner {
		background-position: -147px 13px;
	}
	.social li.flip .inner {
		background-position: -227px 13px;
		width: 52px;
	}
}


/*--------RETINA GRAPHICS---------*/

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
	.sprite {
		background-image: url(../img/sprite@2x.png);
		background-size: 350px 26px;
	}
	.badge {
		background-image: url(../img/Slice@2x.png);
		background-size: 168px 114px;
	}
}