/*  
Theme Name: Metro
Theme URI: http://themify.me/themes/metro
Version: 1.0.5
Description: Created by <a href="http://www.themify.me">Themify</a>.
Author: Themify
Author URI: http://www.themify.me
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Copyright: (c) 2013 Themify.

---------

DO NOT EDIT THIS FILE.

If you need to overwrite the CSS styling, create a new custom_style.css 
in the theme folder and it will automatically load in the <head>.

*/

/************************************************************************************
RESET
*************************************************************************************/


/************************************************************************************
PAGE
*************************************************************************************/
/* page title */
.page-title {
	font-size: 2.5em;
	margin: 0 0 25px;
}

/* author page */
.author-bio {
	margin: 0 0 30px;
}
.author-bio .author-avatar {
	float: left;
	margin: 0 15px 0 0;
}
.author-bio .author-avatar img {
	background: #fff;
	padding: 4px;
}
.author-bio .author-name {
	margin: 0 0 5px;
	padding: 0;
	font-size: 1.6em;
}
.author-posts-by {
	margin: 0 0 20px;
	padding: 10px 0 0;
	font-size: 1.4em;
	text-transform: uppercase;
}

/************************************************************************************
CATEGORY SECTIONS
*************************************************************************************/
.category-section {
	clear: both;
	margin-bottom: 30px;
}
.category-section-title {
	font-size: 120%;
	text-transform: uppercase;
	margin: 0 0 20px;
}

/************************************************************************************
LOOPS WRAPPER
*************************************************************************************/
.grid3 .loops-wrapper,
.grid2 .loops-wrapper {
	margin-left: -10px;
	overflow: visible !important;
}
.grid3.sidebar-left .loops-wrapper,
.grid2.sidebar-left .loops-wrapper {
	margin-left: 0;
	margin-right: -10px;
}

/************************************************************************************
POST
*************************************************************************************/
.post {
	background-color: #f26522; /* default color */
	position: relative;
	margin-bottom: 10px;
}

/* post content */
.post-content {
	min-width: 120px;
}

/* post inner */
.post-inner {
	position: relative;
	padding: 30px 4.5%;
}

/* post date */
.post-date,
.shortcode .post-date {
	color: rgba(255,255,255,.7);
}

/* post title */
.post-title {
	font-size: 2em;
	line-height: 1em;
	margin: 0 0 10px;
}
.post-title a {
	text-decoration: none;
}

/* post image */
.post-image {
	position: relative;
	max-width: 100%;
	margin: 0;
}
.post-image img {
	vertical-align: bottom;
}
.post-image.left {
	float: left;
	margin-right: 15px;
}
.post-image.right {
	float: right;
	margin-left: 15px;
}

/* lightbox zoom image */
.post-image .lightbox {
	position: relative;
	display: inline-block;
	zoom:1;
	*display:inline;
	max-width: 100%;
}
.post-image .lightbox .zoom {
	width: 40px;
	height: 40px;
	background: url(images/icon-zoom.png) no-repeat center center;
	margin: -20px 0 0 -20px;
	position: absolute;
	top: 50%;
	left: 50%;
}
.post-image .lightbox:hover .zoom {
	background-color: #000;
}

/* post meta */
.post-meta {
	font-size: .85em;
	font-weight: 300;
	margin-bottom: 8px;
	color: #eee;
	color: rgba(255, 255, 255, .4);
}
.post-meta a {
	color: #fff;
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
}
.post-meta .separator {
	margin: 0 3px;
}


/* list post */
.list-post .loops-wrapper {
	margin-left: 0;
}
.list-post {
	position: relative;
}

/* more link */
.more-link {
	font-size: .95em;
	font-weight: 300;
	background: #FFF;
	color: #000;
	padding: 4px 20px;
	margin: 20px 0;
	text-decoration: none;
	display: table;
}
.more-link:hover {
	color: #FFF;
	text-decoration: none;
	background: #333;
}

/* grid3 post */
.grid3 .post {
	width: 326px;
	float: left;
	margin-left: 10px;
	position: relative;
}
.grid3.sidebar1 .post {
	width: 214px;
}

.grid3 .post-inner {
	padding: 15px 6.1% 8px;
}
.grid3 .post-title {
	font-size: 1.4em;
	line-height: 1.4em;
	margin: 0 0 10px;
	padding: 0;
}
.grid3 .post-meta {
	margin-top: -5px;
}

/* grid2 post */
.grid2 .post {
	width: 494px;
	float: left;
	margin-left: 10px;
	position: relative;
}
.grid2.sidebar1 .post {
	width: 326px;
}
.grid2 .post-inner {
	padding: 15px 6.1% 8px;
}
.grid2 .post-title {
	font-size: 1.5em;
	line-height: 1.3em;
	margin: 0 0 10px;
	padding: 0;
}
.grid2 .post-meta {
	margin-top: -5px;
}


/************************************************************************************
HOME TILES
*************************************************************************************/
.tile-wrapper {
	margin-left: -10px;
	overflow: visible !important;
}
.tile {
	font-size: .95em;
	position: relative;
	float: left;
	margin: 0 0 0 10px;
	overflow: hidden;
}
.tile.default {
	background-color: #36acb0; /* default color */
}
.tile .tile-title {
	
	font-size: 1.5em;
	margin: 0 0 10px;
	font-weight: 700;
}
.tile .tile-inner {
	padding: 10px;
	width:220px;
}

.tile.gallery {
	margin: 0 0 10px 10px !important;
	background: none !important;
}

/* single tile */
.tile-single {
	overflow: hidden;
}
.tile-single .tile-post:first-child {
	margin-left: 0;
}

/* tile sizes */
.tile.small {
	width: 188px;
	height: 116px;
}
.tile.medium {
	width: 326px;
	height: 158px;
}
.tile.large {
	width: 326px;
	height: 326px;
}

/* tile image */
.tile.image {
	overflow: visible; /* for flip animation */
}
.tile.image .tile-overlay a {
	display: block;
	width: 100%;
	height: 100%;
	margin-left: -20px;
	margin-top: -15px;
	padding: 15px 20px;
	text-decoration: none;
}
.tile.image .tile-overlay a:hover {
	text-decoration: none;
}
.tile.image .tile-inner {
	height: 100%;
}

/* tile button */
.tile.button a {
	display: block;
	height: 100%;
	width: 100%;
	text-decoration: none;
}
.tile.button .button-icon {
	text-align: center;
	line-height: 158px; /* same height as tile height to center image */
}
.tile.button.large .button-icon {
	text-align: center;
	line-height: 326px; /* same height as tile height to center image */
}
.tile.button .button-icon img {
	vertical-align: middle;
	padding-bottom: 10px;
}
.tile.button .button-title {
	position: absolute;
	bottom: 10px;
	left: 15px;
	line-height: 1.3em;
	font-size: 1.2em;
	padding-right: 5px;
}

/* map tile */
.tile.map {
	overflow: visible; /* for flip animation */
}
.tile .map-container {
	margin: 0;
	border: none !important;
}

/* tile overlay */
.tile-overlay {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #36acb0; /* default color */
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	/*opacity: 0;*/

	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}
.portfolio-post .tile-overlay {
	/*opacity: 0;*/
}
.tile-overlay:hover {
	opacity: 1;
}

/* tile [list_posts] shortcode */
.tile .shortcode.list-posts .post {
	margin-bottom: 15px;
}
.tile .shortcode.list-posts .post-title {
	font-size: 120%;
}
.tile .shortcode.list-posts .post-image {
	margin: 2px 12px 0 0;
}

/* tile [twitter] shortcode */
.tile .shortcode.twitter-list .twitter-timestamp a {
	color: rgba(255,255,255,.7);
	text-decoration: none;
}
.tile .shortcode.twitter-list .follow-user a {
	text-decoration: none;
}

/* tile [flickr] shortcode */
.tile .shortcode.flickr .flickr_badge_image img {
	margin-right: 10px;
	margin-bottom: 10px;
	float: left;
}
.tile.medium .shortcode.flickr .flickr_badge_image img {
	margin-right: 8px;
	margin-bottom: 3px;
	width: 48px;
	height: 48px;
}
.tile.small .shortcode.flickr .flickr_badge_image img {
	margin-right: 3px;
	margin-bottom: 3px;
	width: 36px;
	height: 36px;
}

/* tile-overlay flip transition */
.tile-post.image .tile-flip-wrapper,
.tile-post.map .tile-flip-wrapper,
.portfolio-post .tile-flip-wrapper {	
	-webkit-perspective: 500;
	-webkit-transform-style: preserve-3d;
	perspective: 600px;
	transform-style: preserve-3d;
}
.tile-post.image .tile-flip,
.tile-post.map .tile-flip,
.portfolio-post .tile-flip {
	-webkit-transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 1s;
	transform-style: preserve-3d;
	transition: -webkit-transform 1s;
	transition: transform 1s;
}
.tile-post.image .tile-flip,
.tile-post.map .tile-flip {
	position: absolute;
	height: 116px;
	width: 326px; /* tile large and medium */
}
.tile-post.small .tile-flip {
	width: 189px;
}
.tile-post.large .tile-flip {
	height: 326px;
}
.tile-post.image .side,
.tile-post.map .side,
.portfolio-post .side{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
}

.tile-post.image .front,
.tile-post.map .front,
.portfolio-post .front{
	position: relative;
	z-index: 50;
}
.tile-post.image .back,
.tile-post.map .back,
.portfolio-post .back{
	position: absolute;
	z-index: 10;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}
.tile-flipped {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}
.tile-flipped .back {
	z-index: 999 !important;
}

/* Portfolio Flip Animation */
.portfolio-post {
	overflow: visible; /* for flip animation */
}

body.sidebar1 .grid3 .portfolio-post .tile-flip {
	height: 158px;
	width: 214px;
}

body.sidebar-none .grid3 .portfolio-post .tile-flip,
body.sidebar1 .grid2 .portfolio-post .tile-flip {
	height: 158px;
	width: 326px;
}

body.sidebar-none .grid3 .portfolio-post,
body.sidebar-none .grid3 .portfolio-post .slideshow-wrap,
body.sidebar1 .grid2 .portfolio-post,
body.sidebar1 .grid2 .portfolio-post .slideshow-wrap {
	width: 326px;
}

body.sidebar-none .grid2 .portfolio-post .slideshow-wrap,
body.sidebar-none .grid2 .portfolio-post,
body.sidebar-none .grid2 .portfolio-post .tile-flip {
	width: 494px;
}

body.sidebar1 .grid3 .portfolio-post,
body.sidebar1 .grid3 .portfolio-post .slideshow-wrap {
	width: 214px;
}

body.sidebar1.archive .list-post .portfolio-post,
body.sidebar1.archive .list-post .portfolio-post .slideshow-wrap {
	width: 662px;
}