/*----------------------------------------------------------------------
 
	Content: Mobile Theme CSS 
	Author:  ThemeBeans of http://www.themebeans.com
	
 	TABLE OF CONTENTS:
 
 	01. BODY STYLES
 	02. HEADER STYLES
 	03. POST STYLES
 	04. WIDGET STYLES
 	05. SLIDER STYLES
 	06. SHORTCODE STYLES
 	06. SMALLER SCREENS
 	08. iPAD/TABLET DEVICES GENERAL	
 	09. iPAD/TABLET DEVICES (PORTRAIT)
 	10. iPHONE/SMARTPHONE GENERAL
 	11. iPHONE/SMARTPHONE PORTRAIT
 	12. RESPONSIVE NAVIGATION
 	13. RETINA CSS
 
 ----------------------------------------------------------------------*/
	
	
/*--------------------------------------------------------------------*/
/*	01. BODY STYLES
/*--------------------------------------------------------------------*/
@media only screen 
and (max-width: 767px) { 		 
	#content { 
		margin-left: 0px; 
		margin-bottom: 110px; 
		}
	
	.page-template-default #content { margin-bottom: 10px; }
	
	#top-header { margin-top: 0px; margin-bottom: -30px; }  

	#page-header { padding: 55px 0px 10px 0px; }
	
	.subheader { padding-bottom: 5px; }
	 
	#nav-single { display: none; }
	 
	#toTop { display: none!important; }
	 	
	#main-container {
		background-image: none; 
		width: 100% ;
		overflow: hidden;
		}
	
	#main { 
		margin: 0 0; 
		padding-top: 0;
		max-width: 100%;
		}

	section.type-post {
		max-width: 100%;
		}
	
	#sidebar { display: none; }	 
	 
	.post-share-btn {
		margin: 5px 0;
		width: 100%;
		-webkit-border-radius: 3px;
		   -moz-border-radius: 3px;
		        border-radius: 3px;
		}
		
	
/*--------------------------------------------------------------------*/
/*	02. HEADER STYLES
/*--------------------------------------------------------------------*/
	#top { padding: 15px 0 0 0; }
	
	#header { padding-top: 0 !important; }
	
	#logo_text{ 
		font-size: 32px; 
		text-align: center; width: 100%;
		margin-bottom: 8px;
		}
	
	#logo img {
		float: none;
		margin-right: 0;
		}
	
	#branding {
		width: 100% !important;
		text-align: center;
		margin-bottom: -18px;
		margin-top: 75px;
		background-color: #222;
		float: none;
		padding: 30px 0px;
		}
		
	.branding-tagline {
		margin: 0 auto;
		padding-bottom: 7px;
		float: none;
		color: #848383;
		}
	
	#branding-tagline p { text-align: center; }
	
	#navigation { border-bottom: none; }
	
	#responsive-nav select {
		height: 40px;
		width: 100%;
		position: relative;
		display: block;
		margin-bottom: 0;
		}	


/*--------------------------------------------------------------------*/
/*	03. POST STYLES
/*--------------------------------------------------------------------*/
	h2.entry-title {
		font-size: 38px;
		line-height: 39px;
		}
	
	.single-post #comments {
		padding-left: 0;
		max-width: 100%;
		}
		
	.jp-time-frame { display: none; }	

	.pagination a.inactive, 
	.pagination span.current {	display: none; }
	
	.children {
		list-style-type: none;
		margin-left: 0px;
		}
	
	li.depth-2, 
	li.depth-3, 
	li.depth-4,
	li.depth-5,
	li.depth-6 { margin-left: 70px; }
		
	.format-aside article.entry-content p { text-align: center; }	
	
	#commentform input[type="submit"],	
	.contact-submit .button[type="submit"] { width: 100%; }	
		 
		 
/*--------------------------------------------------------------------*/
/*	05. SLIDER STYLES
/*--------------------------------------------------------------------*/			  			
 	#slider_nav {
 		margin: 0 auto;
 		position: absolute;
 		bottom: -2px;
 		z-index: 15;
 		margin: 0 auto;
 		width: 100%;
 		}
 		
 	#slider_nav ul {
 		background: none;
 		height: 22px;
 		text-align: center;
 		margin: 0 auto;
 		max-width: 100%;
  		position: relative;
  		z-index: 7;
  		}	
 	
 	#slider_nav li {
 		background: none;
 		margin: 0 0 0 0;
  		height: 22px;
 		width: 22px;
 		_height: 22px;
 		vertical-align: top;
 		display: inline-block;
 		zoom: 1;
 		}
 	
 	#slider_nav li a {
 		text-align: left;
		display: inline-block;
		width: 22px;
		height: 22px;
		text-indent: -9999px;
		border: 0;
		margin: 0 2px;
		overflow: hidden;
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		transition: none;
		}
		
 	 #slider_nav li a.activeSlide  { background-position:0 -21px; }

		
	
	
/*--------------------------------------------------------------------*/
/*	06. SHORTCODE STYLES
/*--------------------------------------------------------------------*/			
	.modal { 
		position: fixed; 
		top: 5% !important; 
		right: 5%; 
		left: 5%; 
		bottom: 5%; 
		width: auto; 
		height: auto;
		margin: 0; 
		}
		
	.modal-body { height: 60%; }
	
	.modal-body { 
		max-height: 500px; 
		overflow-y: auto; 
		-webkit-overflow-scrolling: touch; 
		}	
} 


/*--------------------------------------------------------------------*/
/*	07. SMALLER SCREENS
/*--------------------------------------------------------------------*/
@media only screen 
and (max-width: 460px) {		
	blockquote { 
		margin: 40px 0; 
		text-align: center; 
		padding: 0px; 
		font-size: 22px;
		line-height: 30px;
		}

	span.meta-hide { display: none; } /* Hides some post meta so it doesnt overflow */
	
	li.depth-1.parent, 
	li.depth-2.parent, 
	li.depth-3.parent, 
	li.depth-4.parent,
	li.depth-5.parent,
	li.depth-6.parent  { border: none; }
	
	li.depth-2, 
	li.depth-3, 
	li.depth-4,
	li.depth-5,
	li.depth-6  { margin-left: 0px; }
	.author-right p,
	.comment-body .reply,
	.comment-body p {
		font-size: 15px; 
		line-height: 25px;
		}	
}
		
		
/*--------------------------------------------------------------------*/
/*	08. iPAD/TABLET DEVICES GENERAL 
/*--------------------------------------------------------------------*/	
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
	
	body { -webkit-text-size-adjust: none; }
	
	/*Header*/
	#toTop { display: none!important; }
	
	/*Content*/	
	.image-frame img, 
	.attachment .post-box img, 
	.entry-content-media img, 
	.post-thumb img { width: 100%; }
				
	#slider_nav li a img {
		width: 43px;
		height: 43px;
		}
			
	blockquote { 
		margin: 40px 0; 
		text-align: center; 
		padding: 0px; 
		font-size: 22px;
		line-height: 30px;
		}				
}
 	

/*--------------------------------------------------------------------*/
/*	09. iPAD/TABLET DEVICES (PORTRAIT)
/*--------------------------------------------------------------------*/		
@media only screen 
and (min-device-width : 768px) 
and (orientation : portrait){

}
    
    
/*--------------------------------------------------------------------*/
/*	10. iPHONE/SMARTPHONE GENERAL
/*--------------------------------------------------------------------*/
@media only screen 
and (max-device-width: 320px)
and (max-device-width : 480px) {	
 
	h2.entry-title {
		font-size: 30px;
		line-height: 35px;
		}	
	
	.entry-meta p {
		display: none;
	}	
	
	blockquote { 
		margin: 40px 0; 
		text-align: center; 
		padding: 0px; 
		font-size: 22px;
		line-height: 30px;
		}
}



/*--------------------------------------------------------------------*/
/*	11. iPHONE/SMARTPHONE PORTRAIT
/*--------------------------------------------------------------------*/
@media only screen 
and (max-width : 320px)
and (orientation : portrait) {
	
	.bean-dribbble-shots { margin-left: 25px; }
	
	.bean-dribbble-shots img {
		width: 100px;
		height: 100px;
		}
	
}


/*--------------------------------------------------------------------*/
/*	12. RESPONSIVE NAVIGATION
/*--------------------------------------------------------------------*/
#responsive-nav { 
	padding:0px; 
	z-index: 99999; 
	position: fixed; 
	width: 100%; 
	}

#responsive-nav form.custom div.custom.dropdown {
	height: 30px;
 	width: 100% !important;
 	margin-bottom: 40px;
 	}

#responsive-nav form.custom div.custom.dropdown a.current {
	line-height: 45px;
	min-height: 45px;
	padding: 0 38px 0 25px;
	border: solid 1px #161616;
	border-bottom-color: #000;
	border-left: none;
	border-right: none;
	color: #252a2d;
	font-weight: bold;
	font-size: 15px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
		    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	background: -moz-linear-gradient(90deg, #1b1a1e 0%, #1e1f1e 0%, #242524 96.3%, rgb(54, 55, 54) 100%) #161616;
	background: -webkit-gradient(linear, left bottom, left top, from(#1b1a1e), from(#1e1f1e), color-stop(0.963, #242524), to(rgb(54, 55, 54))) #161616;
		}

#responsive-nav form.custom div.custom.dropdown a.selector {
 	width: 100%;
	height: 46px;
 	background: url(../images/mobile-nav-drop.png) no-repeat 50% 50%;
 	border: none;
 	}

#responsive-nav form.custom div.custom.dropdown a.selector:after { 
	content: ""; 
	border: solid 5px; 
	border-color: transparent; 
	left: 50%; 
	top: 50%; 
	margin-top: -2px; 
	margin-left: -5px; 
	}
	
#responsive-nav form.custom div.custom.dropdown:hover a.selector:after, 	
#responsive-nav form.custom div.custom.dropdown ul li.selected:after { content: ""; }

form.custom div.custom.dropdown { margin-top: 30px; }

#responsive-nav form.custom div.custom.dropdown ul {
 	width: 100% !important;
 	margin: 0;
 	top: 45px;
 	background-color: #1b1b1b;
 	border: none;
 	z-index: 99999;
 	padding-bottom: 4px;
 	border-bottom: 1px solid #000;
 	padding-top: 3px;
 	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 	   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 		    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	}
	
#responsive-nav  form.custom div.custom.dropdown ul li {
	cursor: pointer;
	padding: 12px 0px 12px 0px;	
	color: #848383;
	border-bottom: 1px solid #0C0C0E;
	text-align: left;
	margin: 0 10%;
	-webkit-box-shadow: 0 1px 0 #292929;
	   -moz-box-shadow: 0 1px 0 #292929;
		    box-shadow: 0 1px 0 #292929;
	font: bold 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	}
		
#responsive-nav form.custom div.custom.dropdown ul li:hover { 
	color: #fff; 
	background: none; 
	}
	
#responsive-nav form.custom div.custom.dropdown ul li:hover:after { 
	content: ""; 
	color: #8ed3e7; 
	}
	
#responsive-nav form.custom div.custom.dropdown ul li.selected:hover { 
	background: #1a1b1f; 
	color: #fff; 
	}
	
#responsive-nav form.custom div.custom.dropdown ul li.selected:hover:after { 
	color: #000; 
	background: #161616; 
	}

#responsive-nav  form.custom div.custom.dropdown ul li:first-child { display: none; }	

#responsive-nav  form.custom div.custom.dropdown ul li:last-child { 
	border-bottom: none;
	-webkit-box-shadow: none;
	   -moz-box-shadow: none;
		    box-shadow: none;
	}	




/*--------------------------------------------------------------------*/
/*	13. RETINA CSS
/*--------------------------------------------------------------------*/
@media all and (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 192dpi) {		
	#responsive-nav form.custom div.custom.dropdown a.selector {
		background: url(../images/retina/mobile-nav-drop@2x.png) 50% 50% no-repeat ;
		background-size: 70px 22px;
		}

	a.jp-play span,
	div.jp-interface,
	a.jp-pause span,
	a.jp-stop span,
	a.jp-previous span,
	a.jp-next span,
	a.jp-mute span,
	a.jp-unmute span,
	div.jp-play-bar,
	div.jp-volume-bar-value { 
		background-image:url(../images/retina/jp_sprite@2x.png);
		background-size: 59px 278px; 
		}

	div.jp-interface { background-position: 0 -160px; background-repeat: repeat-x;  }
	a.jp-play span { background-position: 3px 7px; background-repeat: no-repeat; display:none;  }
	a.jp-pause span { background-position: 2px -22px; background-repeat: no-repeat;  }
	a.jp-stop span { background-position: 1px -49px; background-repeat: no-repeat;  }
	a.jp-previous span { background-position: -56px -22px; background-repeat: no-repeat;  }
	a.jp-next span { background-position: -56px 0; background-repeat: no-repeat;  }
	a.jp-mute span { background-position: 0 -83px; background-repeat: no-repeat;  }
	a.jp-unmute span { background-position: 0 -110px; background-repeat: no-repeat; display:none;  }
	div.jp-play-bar { background-position: 0px -145px; background-repeat: repeat-x;  }
	div.jp-volume-bar-value { background-position: 0px -145px; background-repeat: repeat-x;  }
}