/*----------------------------------------------------------------------
 
	Content: Theme Mobile CSS 
	Author:  ThemeBeans of http://www.themebeans.com
 
 ----------------------------------------------------------------------*/

@media only screen and (max-width: 1390px) { 
	/* GENERAL LAYOUT */
	.row { max-width: 1020px; }
	
	/* POSTS */
	.format-audio div.jp-progress { width: 58%; }
	.audio-no-feat div.jp-progress { width: 60%!important; }
	div.jp-video.fullwidth, div.jp-video.fullwidth .jp-type-list-parent { width: 100%; }
	.comment #respond { margin-left: 170px; }
	.children #respond { margin-left: 215px; }
	
	/* PORTFOLIO */
	.portfolio-audio div.jp-interface { left: -4%; width: 83%; }
		
	/* WIDGETS */
	.flickr_badge_image img { height: 54px; width: 54px; }
	.bean-dribbble-shots img, .bean-dribbble-shots a { height: 98px; width: 131px; }
}	


@media only screen and (max-width: 1060px) { 
	/* GENERAL LAYOUT */
	.row { max-width: 680px; }
	#header-container .main-menu a { padding: 40px 15px; }
	
	/* POSTS */
	.format-audio div.jp-progress { width: 34%; }
	.audio-no-feat div.jp-progress { width: 39%!important; }
	div.jp-video.fullwidth, div.jp-video.fullwidth .jp-type-list-parent { width: 100%; }
	.comment #respond { margin-left: 113px; }
	.children #respond { margin-left: 158px; }
	
	/* PORTFOLIO */
	.portfolio-audio div.jp-interface { left: -6.5%; width: 87.5%; }
	
	.portfolio-audio  div.jp-audio.fullwidth {
		bottom: 30px;
	}
	.portfolio-audio div.jp-interface {
		border-radius: 0 0 3px 3px;
	}
	.portfolio-audio .jp-toggles,
	.portfolio-audio .jp-volume-bar {
		display: none!important;
	}
	.portfolio-audio div.jp-progress { width: 79.5%; }
	
	/* WIDGETS */
	.flickr_badge_image img { height: 66px; width: 66px; }
	#flickr_badge_image7,
	#flickr_badge_image8,
	#flickr_badge_image9,
	#flickr_badge_image10 { display: none; }
	.bean-dribbble-shots img, .bean-dribbble-shots a { height: 116px; width: 155px; }
	
	.ie  .entry-content-media img {
		max-width: 60%;

	}
}	


@media only screen 
and (max-width: 767px) {
	/* BODY */
	#primary-container {
		padding: 40px 30px;
		width: 100% ;
		overflow: hidden;
		}	
	.error404 #primary-container {
		padding: 20%;
	}
	/*  HEADER */	
	#toTop { display: none!important; }
	
	#header-container p {
		text-align: center;
		}
	#primary-container {
		padding-top: 30px;
		}	
	.branding {
		margin: 35px 0;
		}	
	.logo {
		float: none;
		text-align: center;
		width: 100%;
		}
	.logo img {
		float: none;
		}
	.submit.right {
		float: none;
		}	
	ul.contactform .button {
		width: 100%;
		}
	ul.contactform li.eight {
		width: 100%;
		}
	#footer-container {
		padding: 50px 30px;
		}	
	#footer-container .main-menu li {
		background-color: #FFF;
		display: block;
		margin-bottom: 5px;
		padding: 5px;
		width: 100%;
		-webkit-border-radius: 2px;
		   -moz-border-radius: 2px;
		        border-radius: 2px;
		}	
		
		
/* PORTFOLIO STYLES --------------------------------------------------*/
	.single-portfolio .five.columns.post-head { padding-right: 10px; }
	.single-portfolio .portfolio-audio img,
	.single-portfolio .entry-content-media a,
	.single-portfolio .portfolio-video .video-frame {
		float: none;
		padding-right: 0px;
		}
	.portfolio-audio div.jp-interface { left: -3%; }	
	.portfolio-audio div.jp-progress { width: 88.5%; }
	.portfolio-audio  div.jp-audio.fullwidth { bottom: 60px; }
	.portfolio-audio div.jp-interface { border-radius: 3px; }
					
						
/* BLOG STYLES -----------------------------------------------------*/
	/*  SINGLE POSTS */	
	section.type-post {
		max-width: 100%;
		}	
	.meta-list.single-share {
		margin-bottom: -10px!important;
		}
	.fullwidth .format-audio div.jp-progress {
		width: 71%;
		}
	.audio-no-feat div.jp-progress { width: 68.5%!important; }
	
	/*  COMMENTS */	
	#comments .nine.columns.push-three {
		width: 100%;
		}
	#comments-list {
		padding-bottom: 50px;
		}	
		
	input, textarea { 
		-webkit-border-radius: 0px!important;
		}
		
	.comment-body .ten.columns {
		float: left;
		left: 15px;
		}
	.comment-author {
		margin-top: 25px;
		}	
	.children .comment:first-child .comment-author {
		margin-top: 0px;
		}	
	.children .comment-body p, .children .comment-meta,	
	.children .comment-author cite {
		margin-left: 0px;
		}
	.children #respond,
	.comment #respond {
		margin: 0px 0 30px 5px;
		}
	#commentform #submit,	
	#commentform input[type="text"], 
	#commentform input[type="password"], 
	#commentform input[type="date"], 
	#commentform input[type="datetime"], 
	#commentform input[type="email"], 
	#commentform input[type="number"], 
	#commentform input[type="search"], 
	#commentform input[type="tel"], 
	#commentform input[type="time"], 
	#commentform input[type="url"]  {
		width: 100%;
		}	
	.form-submit input[type="submit"] {
		background-image: none!important;
		padding-right: 15px;
		}	
	.contact-submit .button[type="submit"] {
	 	width: 100%;
	 	}
} 


/*--------------------------------------------------------------------*/
/*	SMALLER SCREENS
/*--------------------------------------------------------------------*/
@media only screen 
and (max-width: 515px) {	
	a.jp-mute span,
	.jp-time-frame,
	div.jp-volume-bar,
	a.jp-mute, a.jp-unmute { 
		display: none!important; 
		}	
	.fullwidth div.jp-progress,
	.audio-no-feat div.jp-progress {
		width: 75%!important;
		}
				
}

@media only screen 
and (max-width: 460px) {
	div.jp-progress {
		width: 76%;
		}
	.bean-quote {
		width: 45%!important;
		} 
	/* PORTFOLIO STYLES */
	.single-portfolio .five.columns.post-head {
		text-align: center;
		}	
	.single-portfolio .pagination {
		display: none!important;
		}		
	.entry-header .pagination {
		display: block!important;
		margin-bottom: 20px;
		margin-top: 20px;
		}	
						
}




/*--------------------------------------------------------------------*/
/*	iPAD/TABLET DEVICES GENERAL 
/*--------------------------------------------------------------------*/	
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
	body { -webkit-text-size-adjust: none; }
	
	.sidebar .widget_search input[type="text"] {
		-webkit-border-radius: 0px!important;	
		}	
	
	#toTop { display: none!important; }		
	
	.post-share {
		opacity: 1!important;
		}	
}
 
		
/*--------------------------------------------------------------------*/
/*	iPAD PORTRAIT
/*--------------------------------------------------------------------*/		
@media only screen 
and (min-device-width : 768px) 
and (orientation : portrait){ 	
}
    
    
/*--------------------------------------------------------------------*/
/*	iPHONE GENERAL / LANDSCAPE
/*--------------------------------------------------------------------*/
@media only screen 
and (max-device-width: 320px)
and (max-device-width : 480px) {
	.post-share {
		opacity: 1!important;
		}	
	#footer-container {
		padding: 50px 0;
	}	
}


/*--------------------------------------------------------------------*/
/*	iPHONE/SMARTPHONE PORTRAIT
/*--------------------------------------------------------------------*/
@media only screen 
and (max-width : 320px)
and (orientation : portrait) {
	.page-template-page-portfolio-php .isotope-item {
		width: 280px;
		}
	.page-template-page-portfolio-php #primary-container {
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 30px;
		}			 
	#primary-container {
		padding-top: 30px;
		}	
	.entry-header .pagination {
		margin-top: 35px;
		}
	.portfolio-audio div.jp-interface { left: -4%; }			
}





/*--------------------------------------------------------------------*/
/*	RESPONSIVE NAVIGATION
/*--------------------------------------------------------------------*/
select#menu-primary {
	display: none;
	height: 0px!important;
	margin-bottom: 0px!important;
	}

#responsive-nav-form form{
	margin-bottom: 0px!important;
	}

#responsive-nav { 
	padding:0px; 
	width: 100%; 
	z-index: 99999; 
	}

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

#responsive-nav form.custom div.custom.dropdown a.current {
	line-height: 45px;
	min-height: 45px;
	padding: 0 38px 0 25px;
	display: block;
	width: auto;
	border-left: none;
	border-right: none;
	color: #1F2124;
	font-weight: bold;
	font-size: 15px;
	background-color: #22272A; 
	}

#responsive-nav form.custom div.custom.dropdown a.selector {
	height: 45px;
 	background: url(../images/mobile-nav.png) no-repeat;
 	background-position-y: 50%;
 	background-position-x: 89%;
 	right: 30px;
 	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: 0px; }

#responsive-nav form.custom div.custom.dropdown ul {
 	background-color: #22272A; 
 	border: none;
 	margin: 0;
 	top: 40px;
 	width: 100%!important;
 	z-index: 99999;
 	-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
 	   -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);	
 	        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
 	}
	
#responsive-nav  form.custom div.custom.dropdown ul li {
	border-bottom: 1px solid #333238;
	cursor: pointer;
	margin: 5px 30px;	
	padding: 6px 0px 13px;
	color: #A2AAB0;
	text-align: left;
	font: bold 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
	-webkit-transition: all 0.1s ease-in-out;    
	   -moz-transition: all 0.1s ease-in-out;
	        transition: all 0.1s ease-in-out;
        }
		
#responsive-nav form.custom div.custom.dropdown ul li:hover { 
	color: #FFF;  
	}

#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;
	margin-bottom: 5px;
	}	





/*--------------------------------------------------------------------*/
/*	RETINA CSS
/*--------------------------------------------------------------------*/
@media all and (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 192dpi) {	
	#toTop,
	.trigger, 
	.pagination a,
	.viewer .close,
	.post-like .like,
	.bean-control-paging li a,
	.search .searchform.search-page input[type="text"] {
		background-image: url(../images/retina/sprite@2x.png);
		background-size: 500px 300px;
		}

	a.jp-play span,
	a.jp-pause span,
	a.jp-mute span,
	a.jp-unmute span { 
		background-image:url(../images/retina/jplayer@2x.png);
		background-size: 30px 123px; 
		}
		
    blockquote{
        background-image: url(../images/retina/blockquote@2x.png) ;
        background-size: 18px 13px;
        }
     
	#responsive-nav form.custom div.custom.dropdown a.selector {
		background-image: url(../images/retina/mobile-nav@2x.png);
		background-size: 24px 16px;
		}	
		
	.sidebar .widget_search input[type="text"] {
	    background-image: url(../images/retina/forms@2x.png);
	    background-size: 38px 129px;
    	}
 					
}