.slidePageInFromLeft{
  animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards;
  -webkit-animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards;
  -moz-animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards;
  -ms-animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards;
  -o-animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards;
  }
.openpage{ 
  animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;
  -webkit-animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;
  -moz-animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;
  -ms-animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;
  -o-animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;
}
.slidePageBackLeft{
  opacity:1; 
  left:0;
  animation: slidePageBackLeft .8s ease-out 1 normal forwards;
  -webkit-animation: slidePageBackLeft .8s ease-out 1 normal forwards;
  -moz-animation: slidePageBackLeft .8s ease-out 1 normal forwards;
  -ms-animation: slidePageBackLeft .8s ease-out 1 normal forwards;
  -ms-animation: slidePageBackLeft .8s ease-out 1 normal forwards;
}
.slidePageLeft{
  opacity:1;
  transform: rotateY(0) translateZ(0) ;
  -webkit-transform: rotateY(0) translateZ(0) ; 
  -moz-transform: rotateY(0) translateZ(0) ; 
  -ms-transform: rotateY(0) translateZ(0) ; 
  -o-transform: rotateY(0) translateZ(0) ;  
  animation:slidePageLeft .8s ease-out 1 normal forwards;
  -webkit-animation:slidePageLeft .8s ease-out 1 normal forwards;
  -moz-animation:slidePageLeft .8s ease-out 1 normal forwards;
  -ms-animation:slidePageLeft .8s ease-out 1 normal forwards;
  -o-animation:slidePageLeft .8s ease-out 1 normal forwards;
}


.fadeOutback{
  animation: fadeOutBack 0.3s ease-out 1 normal forwards;
  -webkit-animation: fadeOutBack 0.3s ease-out 1 normal forwards;
  -moz-animation: fadeOutBack 0.3s ease-out 1 normal forwards;
  -ms-animation: fadeOutBack 0.3s ease-out 1 normal forwards;
  -o-animation: fadeOutBack 0.3s ease-out 1 normal forwards;
}


.fadeInForward{
  opacity:0;
  transform: translateZ(-5em) scale(0.75);
  -webkit-transform: translateZ(-5em) scale(0.75);
  -moz-transform: translateZ(-5em) scale(0.75);
  -ms-transform: translateZ(-5em) scale(0.75);
  -o-transform: translateZ(-5em) scale(0.75);
  animation: fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards;
  -webkit-animation: fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards;
  -moz-animation: fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards;
  -ms-animation: fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards;
  -o-animation: fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards;
}

@keyframes fadeOutBack{
  0%{transform: translateX(-2em) scale(1); -moz-transform: translateX(-2em) scale(1); -webkit-transform: translateX(-2em) scale(1); -ms-transform: translateX(-2em) scale(1); -o-transform: translateX(-2em) scale(1); opacity:1;}
  70% {transform: translateZ(-5em) scale(0.6); -webkit-transform: translateZ(-5em) scale(0.6); -moz-transform: translateZ(-5em) scale(0.6); -ms-transform: translateZ(-5em) scale(0.6); -o-transform: translateZ(-5em) scale(0.6); opacity:0.5;}
  95% {transform: translateZ(-5em) scale(0.6); -webkit-transform: translateZ(-5em) scale(0.6); -moz-transform: translateZ(-5em) scale(0.6); -ms-transform: translateZ(-5em) scale(0.6); -o-transform: translateZ(-5em) scale(0.6); opacity:0.5;}
  100% {transform: translateZ(-5em) scale(0); -webkit-transform: translateZ(-5em) scale(0); -moz-transform: translateZ(-5em) scale(0); -ms-transform: translateZ(-5em) scale(0); -o-transform: translateZ(-5em) scale(0); opacity:0;}
}

@keyframes fadeInForward{
  0%{transform: translateZ(-5em) scale(0); -webkit-transform: translateZ(-5em) scale(0); -moz-transform: translateZ(-5em) scale(0); -ms-transform: translateZ(-5em) scale(0); -o-transform: translateZ(-5em) scale(0); opacity:0;}
  100% {transform: translateZ(0) scale(1); -webkit-transform: translateZ(0) scale(1); -moz-transform: translateZ(0) scale(1); -ms-transform: translateZ(0) scale(1); -o-transform: translateZ(0) scale(1); opacity:1; }
}

@keyframes rotatePageInFromRight{
  0% {transform:rotateY(-90deg) translateZ(5em); -webkit-transform:rotateY(-90deg) translateZ(5em); -moz-transform:rotateY(-90deg) translateZ(5em); -ms-transform:rotateY(-90deg) translateZ(5em); -o-transform:rotateY(-90deg) translateZ(5em);opacity:0}
  30%{opacity:1}
  100%{transform: rotateY(0deg) translateZ(0) ; -webkit-transform: rotateY(0deg) translateZ(0) ; -moz-transform: rotateY(0deg) translateZ(0) ; -ms-transform: rotateY(0deg) translateZ(0) ; -o-transform: rotateY(0deg) translateZ(0) ; opacity:1}
}

@keyframes slidePageLeft{
  0%{left:0; transform: rotateY(0deg) translateZ(0) ; -webkit-transform: rotateY(0deg) translateZ(0) ; -moz-transform: rotateY(0deg) translateZ(0) ; -ms-transform: rotateY(0deg) translateZ(0) ; -o-transform: rotateY(0deg) translateZ(0) ; opacity:1}
  70%{opacity:1;}
  100%{opacity:0; left:-150%; transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg);}
}

@keyframes slidePageInFromLeft{
  0%{opacity:0; }
  30%{opacity:1}
  100%{opacity:1; left:0;}
}

@keyframes slidePageBackLeft{
  0%{opacity:1; left:0; transform: scale(0.95); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95);}
  10%{transform: scale(0.9); -moz-transform: scale(0.9); -webkit-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9);}
  70%{opacity:1;}
  100%{opacity:0; left:-150%;}
}


#tiles{
	position:relative}


.tile{
	margin:0px 13px 13px 0px;
	height:120px;
	width:120px;
	color:#fff;
	border:3px solid transparent;
	cursor:pointer;}


.tile-body{
	position:relative;
	height:100%;
	padding:10px;
	vertical-align:middle;}


.tile-body h3, .tile-body h4{
	line-height:inherit;
	margin-bottom:5px;}


.tile i{
	display:block;}
	
.tile img{
max-width:100%;}


.tile i.med{
	font-size:50px;
	padding-top:20px;}
	
.tile.large-y i.med{
	padding-top:80px;}
	
.tile i.large{
	font-size:100px;
	padding-top:60px;}


.tile i > span{
	font-family: 'Open Sans';}

.tile p.bottom{
	position:absolute;
	bottom:0;
	left:5px;
	margin:0px;}	



	


	
	
.tile:hover{
	border:3px solid rgba(0, 0, 0, 0.2);}
	
	
.tile.large-x{
	width:258px;}
	
.tile.large-y{
	height:258px;}
	
	
.tile-page{
  width:100%;
  height:100%;
  color:white;
  text-align:center;
  position:absolute;
  right:0;
  top:0 !important;
  opacity:0;
  -webkit-transform-origin: 100% 0%;
  -moz-transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  -o-transform-origin: 100% 0%; 
  transform-origin: 100% 0%;
  
  -moz-transform:rotateY(-90deg) translateZ(5em);
  -webkit-transform:rotateY(-90deg) translateZ(5em);
  -o-transform:rotateY(-90deg) translateZ(5em);
  -ms-transform:rotateY(-90deg) translateZ(5em);
  transform:rotateY(-90deg) translateZ(5em);
  z-index:999;
}


.tile-page h2{
	margin:25px 0px 0px 0px;
	font-size:44px;}
	
.tile-page .close-button{	
    cursor: pointer;
    position: absolute;
    right: 2em;
    top: 2em;}