/*
	Theme Name: Instagram Theatre
	Author: Chris Rivers
	Version: Production
	Description: A Simple Wordpress Theme

	Wordpress Plugin
	--------------------------
	Build Version : 	Production
	Author : 			xxcriversxx@gmail.com
	Website :			http://chrisriversdesign.com
	
	00 : MEDIA QUERIES - Common breakpoints	
	
	A note regarding - MEDIA QUERIES
	--------------------------------
	Skip to the bottom of the stylesheet, all media queries and breakpoints are in this stylesheet. 
	This is now based on a mobile first approach and there's more flexibility and convenience in using 
	inline declarations because there's only one stylesheet to maintain.
*/

/*========= 
   Instagram Theatre 
====================*/
/* Rules 
----------------*/
a:hover { text-decoration:none; }

/* Main Content
----------------------*/
.main-content {
	padding-left:288px;
}

/* Default Theme Style */
.page-template-default .main-content .photo-nav { display:none; }
	
/* Main Style */
.main-content .photo-nav { margin-top:322px; position:relative; }
.main-content .photo-nav a {
	cursor:pointer;
	display:inline-block;
	height:48px; 
	position:absolute;
	width:48px; 
}

.main-content .photo-nav a.prev {
	background:url("images/prev.png") no-repeat;
}

.main-content .photo-nav a.next {
	background:url("images/next.png") no-repeat;
	right:0;
}

/* Plugin CSS 
-------------------------*/
.instagram-photo {
	display: inline-block;
    height: 195px;
	margin:10px;
    width: 195px;
	overflow:hidden;
	position:relative;
}

.instagram-photo .instagram-hover-cover {
	background:#111;
	bottom:0;
	overflow:hidden;
	position:absolute;
	z-index:1000;
}

.instagram-photo img {
	top: 50%;
	height: 100%;
	left: 50%;
	min-width: 100%;
	max-width: inherit;
	position: absolute;
	transition: 0.4s all ease;
	transform: scale(1.05) translate(-50%, -50%);
	transform-origin: 0 0;
	width:auto;
	-webkit-backface-visibility: hidden;
	-webkit-transform: scale(1.05) translate(-50%, -50%); 
	-moz-transform: scale(1.05) translate(-50%, -50%); 
	-ms-transform: scale(1.05) translate(-50%, -50%); 
	-o-transform: scale(1.05) translate(-50%, -50%); 
}

.instagram-photo .instagram-hover-cover h3 { color:#fff; line-height: 20px; margin:15px 17px 0 17px; text-transform:capitalize; }
.instagram-photo .instagram-hover-cover em { display:inline-block; font-size:11px; font-style:normal; height: 14px; margin: 0 17px; text-transform:uppercase; }
.instagram-photo .instagram-hover-cover p { color:#D7D7D7; line-height:17px; margin: -1px 17px 0 17px; }

.instagram-theatre {
	padding-bottom: 62px;
	top: 61px;
	width: auto;
	z-index: 99;
}

#seachInstagramLoadMoreContainer {
	text-align:center;
}

.instagram-theatre.list .instagram-photo {
	display:block !important;
	position: relative;
	height:auto;
	width: 620px;
}

.instagram-theatre.list .instagram-photo img { 
	top: auto;
	height: auto;
	left: auto;
	min-width: auto;
	max-width: inherit;
	position: static;
	transform: scale(1);
	transform-origin: 0 0;
	width:100%;
	-webkit-transform: scale(1); 
	-moz-transform: scale(1); 
	-ms-transform: scale(1); 
	-o-transform: scale(1); 
}

/* User List */
.instagram-user-all {
    background: none repeat scroll 0 0 transparent;
	display: inline-block;
	float: left;
	height: 228px;
	padding: 19px 17px;
}

.instagram-user-all img {
	margin-right:15px;
}

.instagram-user-all .instagram-username {
	color: #FFFFFF;
	display: block;
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 3px;
	margin-top: 5px;
}
.instagram-user-all .instagram-username:hover { color:#2E6F8F; cursor:pointer; }

.instagram-user-all .instagram-fullname {
	color:#666;
}

/* Responsive Mobile
-----------------------------*/
/* Tablets */
@media screen and (max-width: 1249px) {
 	.instagram-theatre {
		width: 433px !important;
	}
	
	.instagram-theatre.list .instagram-photo {
		width:400px;
	}
}

/* iPad */
@media screen and (max-width: 833px) {
	.sidebar-nav, .photo-nav, .customization-bar {
		display: none;
	}
	
	.caption-container {
		margin: 0 auto;
		right: auto;
		width:auto;
	}
	
	.instagram-theatre {
		margin: -120px auto 0;
		position: static;
		width: 433px !important;
	}
	
	.instagram-theatre.list .instagram-photo {
		width:400px;
	}
}

/* iPhone */
@media screen and (max-width: 480px) {
	.instagram-theatre {
		margin-left: 12px;
		width: 213px !important;
	}
	
	.instagram-theatre.list .instagram-photo { width:200px; }
	.instagram-theatre.list .instagram-photo .instagram-hover-cover { display:none !important; }
}