/* TILE CONTAINER SETTINGS */
.tile-container {
	width:100%;
	height:100%;
	position:absolute;
}
.tile-container h2 {
	color:white;
	font-size:22px;
	margin:5px 0;
	padding:0;
	font-weight:300;
}
.tile-container.transition {
  -webkit-transition:.4s ease;
  -moz-transition:.4s ease;
  -ms-transition:.4s ease;
  -o-transition:.4s ease;
  transition:.4 ease;
}

.tile {
	text-decoration:none;
}

/* TILE SIZES */
.small {
	width:116px;
	/*height:116px;*/
	height:113px;
	margin-bottom:10px;
	overflow:hidden;
	position:relative;
	display:inline-block;
}

.small.odd-tile {
	margin-right: 6px;
}

.medium {
	width:242px;
	height:116px;
	margin-bottom:10px;
	overflow:hidden;
	position:relative;
}
.large {
	width:242px;
	height:242px;
	/*height: 239px;*/
	margin-bottom:10px;
	overflow:hidden;
	position:relative;
}

/* Responsive tiles for right sidebar */
.sidebar .medium, .sidebar .large {
	width:100%;
}

.sidebar .small {
	width: 47%;
}

.sidebar .small.odd-tile {
	margin-right: 4%;
}

/* TILE MSG SETTINGS */
.tile-msg {
	position:absolute;
	top:0;
	left:0;
}
.tile-msg div {
	text-align:center;
	color:white;
	font-family:'Roboto', Arial, Helvetica, sans-serif;
	font-weight:300;
	font-size:14px;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.tile-msg div.vertical {
	-webkit-transform: rotate(90);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    transform: rotate(90deg);
	white-space:nowrap;
    top:25%;
}

.small h2 {
	font-size: 12px;
	display: inline;
}

.medium h2 {
	font-size:15px;
}

/* TILE IMAGE SETTINGS */
.tile-img {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
}
.tile-img div {
	text-align:center;
	color:white;
	font-family:'Roboto', Arial, Helvetica, sans-serif;
	font-weight:300;
	
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-49%);
	-ms-transform: translateY(-49%);
	transform: translateY(-49%);
}

.tile-img img {
	width:100%;
}

/* TILE SETTINGS */
.tile .right .tile-msg {
	width:30%;
	height:100%;
	left:-30%;
}
.tile .left .tile-msg {
	width:30%;
	height:100%;
	left:100%;
}
.tile .down .tile-msg {
	width:100%;
	height:40%;
	top:-40%;
}
.tile .up .tile-msg {
	width:100%;
	height:40%;
	top:100%;
}
/* SPECIALIZED TILE SETTINGS */
.tile .small.up .tile-msg {
	width:100%;
	height:25%;
	top:100%;
}
.tile .small.down .tile-msg {
	width:100%;
	height:25%;
	top:-25%;
}

/** TILE ANIMATION POSITIONING **/

/* SMALL TILES */
.tile .small.up:hover .tile-container {
	margin-top:-25%;
}
.tile .small.down:hover .tile-container {
	margin-top:25%;
}
.tile .small.left:hover .tile-container {
	margin-left:-30%;
}
.tile .small.right:hover .tile-container {
	margin-left:30%;
}

/* MEDIUM TILES */
.tile .medium.right:hover .tile-container {
	margin-left:30%;
}
.tile .medium.left:hover .tile-container {
	margin-left:-30%;
}
.tile .medium.down:hover .tile-container {
	margin-top:20%;
}
.tile .medium.up:hover .tile-container {
	margin-top:-20%;
}

/* LARGE TILES */
.tile .large.up:hover .tile-container {
	margin-top:-40%;
}
.tile .large.down:hover .tile-container {
	margin-top:40%;
}
.tile .large.left:hover .tile-container {
	margin-left:-30%;
}
.tile .large.right:hover .tile-container {
	margin-left:30%;
}