/*===================================================================*/
/*
/* THEME MOBILE STYLES
/*
/*===================================================================*/
/*===================================================================*/
/* RESPONSIVE NAVIGATION
/*===================================================================*/
/* OVERLAY */
.mobile-overlay, 
.mobile-controls,
.mobile-sidebar { display: none; }

.wrapper, .mobile-sidebar {
	-webkit-transition: -webkit-transform 0s ease-in!important;
	-moz-transition: -webkit-transform 0s ease-in!important;
	-o-transition: -webkit-transform 0s ease-in!important;
	transition: -webkit-transform 0s ease-in!important;
}

@media only screen and (max-width : 768px) {
	.viewport {
		display: -webkit-box;
		display: -ms-box;
		display: box;
		overflow: hidden;
		position: relative;
		-webkit-perspective: 1000;
		-webkit-transform: translateZ(0);
		-webkit-backface-visibility: hidden;
		-webkit-box-orient: horizontal;
		-moz-box-orient: horizontal;
		-ms-box-orient: horizontal;
		box-orient: horizontal; 
	}

	.mobile-sidebar {
		background: #282828;
		display: block;
		overflow: visible;
		position: absolute;
		width: 80%;
	}

	.mobile-sidebar.mobile-sidebar-left {
		left: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		-moz-transform: translate3d(-100%, 0, 0);
		-ms-transform: translate3d(-100%, 0, 0);
		-o-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}

	.mobile-sidebar.mobile-sidebar-right {
		right: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		-moz-transform: translate3d(100%, 0, 0);
		-ms-transform: translate3d(100%, 0, 0);
		-o-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}

	.m-pikabu-left-visible .mobile-sidebar.mobile-sidebar-left, 
	.m-pikabu-right-visible .mobile-sidebar.mobile-sidebar-right {
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	.m-pikabu-left-visible .wrapper.mobile-sidebar-left, 
	.m-pikabu-right-visible .wrapper.mobile-sidebar-right { position: absolute; }

	.wrapper { 
		width: 100%; 
		-webkit-backface-visibility: hidden; 
	}

	@-moz-document url-prefix() { 
		.wrapper {
			float: left;
		} 
	}

	.m-pikabu-left-visible .wrapper {
		-webkit-transform: translate3d(80%, 0, 0);
		-moz-transform: translate3d(80%, 0, 0);
		-ms-transform: translate3d(80%, 0, 0);
		-o-transform: translate3d(80%, 0, 0);
		transform: translate3d(80%, 0, 0);
	}

	.m-pikabu-right-visible .wrapper {
		-webkit-transform: translate3d(-80%, 0, 0);
		-moz-transform: translate3d(-80%, 0, 0);
		-ms-transform: translate3d(-80%, 0, 0);
		-o-transform: translate3d(-80%, 0, 0);
		transform: translate3d(-80%, 0, 0);
	}

	.wrapper, .mobile-sidebar {
		-webkit-transition: -webkit-transform 0.2s ease-in!important;
		-moz-transition: -webkit-transform 0.2s ease-in!important;
		-o-transition: -webkit-transform 0.2s ease-in!important;
		transition: -webkit-transform 0.2s ease-in!important;
	}

	.m-pikabu-left-visible .mobile-overlay, 
	.m-pikabu-right-visible .mobile-overlay {
		cursor: pointer;
		display: block;
		height: 100%;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 9999;
	}

	.m-pikabu-overflow-scrolling .mobile-sidebar { overflow: auto; }

	.m-pikabu-overflow-touch { -webkit-overflow-scrolling: touch; }

	/* HEADER SIDEBAR TOGGLES */
	.mobile-controls { 
		background-color: #FFF;
		border-bottom: 1px solid #ECECEC;
		display: none; 
		height: 45px; 
		line-height: 45px;
		white-space: nowrap;
		width: 100%;
		z-index: 99999;
	}

	.mobile-nav-toggle {
		background: url(../images/sprite.png) no-repeat -47px -27px;
		display: block;
		float: right;
		padding: 0 20px 0 35px;
		position: relative;
		text-align: right;
		height: 44px; 
		line-height: 44px;
	}

	.mobile-nav-toggle:hover { 
		cursor: pointer; 
	}

	/* MOBILE PAGINATION */
	.mobile-pagination {
		position: absolute;
		left: 0;
		top: 0;
	}

	.mobile-pager {
		display: inline-block;
		height: 44px;
		width: 45px;
	}

	.mobile-pager a {
		background: url(../images/sprite.png) no-repeat -30px -528px;
		border-right: 1px solid #ECECEC;
		display: block;
		height: 44px;
		width: 45px;
	}

	.mobile-pager.next a {
		background-position: -79px -528px;
		margin-left: -4px;
	}

	/* OFF-CANVAS NAVIGATION */
	#mobile-nav {
		display: block;
		padding: 0;
		z-index: 999;
		margin: 0px;
	}

	#mobile-nav ul {
		display: block;
	}

	#mobile-nav li {
		border-top: 1px solid #2E2E2E;
		display: block;
		margin: 0 auto;
		width: 85%;
	}

	#mobile-nav li:first-child {
		border-top: none;
	}

	#mobile-nav ul.sub-menu li {
		width: 95%;
		margin-left: 5%;
	}

	#mobile-nav li a {
		color: #8B8B8B!important;
		display: block;
		font-size: 18px;
		font-size: 1.8rem;
		height: 2.5em;
		line-height: 2.5em;
		text-decoration: none;
	}

	#mobile-nav li a:hover {
		color: #FFF!important;
	}

	#mobile-nav li.current-menu-item a {
		cursor: pointer;
	}

	/* OFF-CANVAS SEARCH */
	#mobile-search {
		margin: 0 auto 10px;
		width: 85%;
		padding: 7.5% 0 0;
	}

	#mobile-search input[type="text"] {
		background: #2E2E2E;
		border: none;
		border-radius: 4px;
		margin: 0px;
		cursor: pointer;
		padding: 3px 15px 2px 45%;
		font-size: 14px;
		-webkit-transition: all .2s;
		-moz-transition: all .2s;
		-ms-transition: all .2s;     
		-o-transition: all .2s;
	}

	@-moz-document url-prefix() { 
		#mobile-search input[type="text"] {
			padding: 10px 15px 10px 40%;
		}
	}

	#mobile-search .button {
		display: none;
	}

	#mobile-search input[type="text"]:focus {
		background-position: 107% -630px; 
		color: #FFF;
		padding-left: 15px;
		text-align: left;
	}
}



/*===================================================================*/
/*
/* BEGIN MEDIA QUERIES
/*
/*===================================================================*/
@media only screen and (max-width : 900px) {
	.related-wrap ol li a span {
		display: none;
	}
}

/*===================================================================*/
/* PRIMARY CUT
/*===================================================================*/
@media only screen and (max-width : 768px) {
	
	/* STRUCTURE */
	.row.content {
		margin-top: 0!important;
		padding-top: 0;
	}
	
	.content-left {
		padding-right: 0px;
	}

	/* HEADER */
	header {
		padding: 30px 0;
		text-align: center;
	}

	header .row.title .twelve.columns {
		padding: 0 10px;
	}

	header .row.title {
		border-top: none;
	}

	.search .header-above,
	.archive .header-above,
	.home-template.header-above,	
	body .row.home-template.header-above,
	.header-above, .row.content.title-off.full-media-off, .page-feat-image.title-off.full-media-on {
		margin-top: 0px!important;
	}

	.headroom {
		position: relative;
		top: 0!important;
	}

	/* FOOTER */
	.colophon {
		text-align: center;
	}

	ul.colophon-social {
		display: none;
	}

	#hello-bar {
		display: none!important;
	}
	
	.logo {
		top: 0;
	}

	.site-description {
		display: block;
		margin: 20px 0 0 0;
	}

	.mobile-controls {
		display: block;
	}

	/* HOME TEMPLATE SECTIONS */
	.home-widgets .widget h2 {
		font-size: 33px;
		line-height: 48px;
	} 

	.widget_bean_home_portfolio {
		margin: -75px 0;
	}

	.widget_bean_home_page_content .page-feat-image {
		margin: -75px 0 45px;
	}

	.home-widgets .widget {
		padding: 75px 0;
	}

	.widget_bean_home_page_content_overlay .post-inner {
		padding: 75px 30px;
	}

	.widget_bean_home_page_content_overlay .post-inner p {
		width: 100%;
		padding: 0;
	}
	
	.widget_bean_home_page_content_overlay .row .row {
		padding: 0;
	}
	
	.widget_bean_home_features .columns {
		padding: 7% 0;
	}

	.widget_bean_home_features .columns.col-1,
	.widget_bean_home_features .twelve.columns {
		padding-top: 0;
	}

	.widget_bean_home_features .columns.col-2 {
		border-left: none;
		border-right: none;
	}

	.widget_bean_home_features .columns,
	.widget_bean_home_features .columns.col-2 {
		border-bottom: 1px solid #E5E5E5;
	}
	
	.widget_bean_home_features .columns.col-3,
	.widget_bean_home_features .twelve.columns {
		border-bottom: none;
		padding-bottom: 0px;
	}

	.widget_bean_home_features .columns.col-3 {
		margin-bottom: -20px;
	}

	.widget_bean_home_recent_posts .recent-post-tabs > li {
		display: none;
	}

	.widget_bean_home_recent_posts .recent-post-tabs > li.active {
		display: inline-block;
	}

	.widget_bean_home_testimonials .bean-control-thumbs li img  {
		width: 50px;
	}
	
	/* PORTFOLIO */
	.jp-audio {
		bottom: 0;
		padding: 0;
	}

	/* SINGLE POSTS */	
	section.type-post {
		max-width: 100%;
	}

	blockquote {
		margin-left: 0;
		margin-right: 0;
	}

	/* COMMENTS */
	.comment-wrap,
	.related-wrap {
		padding-left: 0;
	}

	.comments .children {
		margin-left: 0;
	}
	
	.avatar {
		display: none;
	}
	
	.comment-form label {
		position: inherit;
	}

	.comment-form input.eight {
		width: 100%;
	}
	
	p.logged-in-as {
		display: none;
	}

	#respond,
	.single-post article.entry-content {
		padding-left: 0;
	}

	/* CONTACT */
	ul.bean-contactform .button {
		width: 100%;
	}
	
	/* COMING SOON */
	.bean-coming-soon .three.columns.mobile-two {
		font-size: 60px!important;
		margin: 0 auto;
		width: 100%!important;
	}
}


/*===================================================================*/
/* SMALLER SCREENS
/*===================================================================*/
@media only screen and (max-width : 660px) {
	ul.social-sharing  {
		margin-bottom: 0px;
		margin-top: 15px;
		border-top: 1px solid #ECECEC;
	}

div.five.columns.slide { width: 90%;  }

	.single-portfolio ul.entry-meta,
	.single-portfolio .entry-content {
		text-align: left;
	}

	.single-portfolio ul.entry-meta li {
		display: block;
		margin: 0;
	}

	/* FOOTER */
	footer .widgets .widget { 
		margin-bottom: 60px!important;
	}

	footer .widgets .four.columns.last .widget:last-child {
		margin-bottom: 0px!important;
	}
	footer .widgets .footer-col-1,
	footer .widgets .footer-col-2,
	footer .widgets .footer-col-3,
	footer .widgets .four.columns.last {
		width: 100%;
	}

	footer .widgets.thirds .footer-col-2 {
		border: 2px solid #383838;
		border-left: none;
		border-right: none;
	}

	footer .widgets.thirds .columns {
		padding-left:0!important;
		padding-right: 0!important; 
	}

	footer .widgets.thirds .footer-col-1 {
		padding-bottom: 50px!important;
	}
	
	footer .widgets.thirds .footer-col-2 {
		padding-bottom: 50px!important;
		padding-top: 50px!important;
	}

	footer .widgets.thirds .footer-col-3 {
		padding-top: 50px!important;
	}
}


@media only screen and (max-width : 500px) {
	#isotope-container {
		padding: 10px;
	}
}


@media only screen and (max-width : 400px) {
	/* HEADER */
	#mobile-nav li a { 
		font-size: 16px; 
		font-size: 1.6rem; 
	}

	#mobile-search input[type="text"] {
		padding-left: 40%;
	}

	@-moz-document url-prefix() { 
		#mobile-search input[type="text"] {
			padding: 10px 15px 10px 35%;
		}
	}

body .home-slide p { width: 80%;  }


	/* HOME TEMPLATE */
	.home-widgets .widget h2 {
		font-size: 28px;
		line-height: 40px;
	} 

	.home-widgets .widget, .home-widgets .widget p {
		font-size: 20px;
		line-height: 32px;
	}
	
	.recent-post-tabs {
		margin-bottom: 30px!important;
	}
	
	/* BLOG */
	.comment-meta {
		font-size: 15px;
	}

	.comment-form input[type="submit"] {
		width: 100%;
	}

	/* CF7 */
	.wpcf7-form select {
		background-position: 96% 15px;
	}

	.wpcf7-form select:hover {
		background-position: 96% -25px;
	}
}


/*===================================================================*/
/* MUCH SMALLER SCREENS
/*===================================================================*/
@media only screen and (max-width : 320px) {
}




/*===================================================================*/
/*
/* RETINA CSS
/*
/*===================================================================*/
@media all and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 192dpi) {
	.bean-likes,
	.toggle-icon,
	.mobile-pager a,
	.fancybox-close,
	.mobile-nav-toggle,
	#hello-bar .close a,
	.icon.lightbox-play, 
	header input.search,
	ul.post-sharing li a,
	ul.social-sharing li a,
	.singlepost.pagination a {
		background-image: url(../images/retina/sprite@2x.png);
		background-size: 150px 1400px;
	}
	
	a.jp-play span,
	a.jp-pause span,
	.entry-content .mejs-controls .mejs-play button,
	.entry-content .mejs-controls .mejs-pause button,
	.entry-content .mejs-controls .mejs-volume-button button { 
		background-image:url(../images/retina/jplayer@2x.png);
		background-size: 100px 250px; 
	}

	.inner .overlay,
	.grid-item a .overlay,
	.post-thumb a .overlay {
		background-image: url(../images/retina/hover@2x.png);
		background-size: 28px 28px;
	}

	a.lightbox .overlay {
		background-image: url(../images/retina/hover-lightbox@2x.png);
		background-size: 28px 28px;
	}
	
	.fancybox-nav span {
		background-image: url(../images/retina/fancy-nav@2x.png);
		background-size: 18px 131px;
	}

	ul.colophon-social li a {
		background-image: url(../images/retina/social@2x.png);
		background-size: 100px 451px;
	}

	header nav .sub-menu a.sf-with-ul {
		background-image:url(../images/retina/sf-arrow@2x.png);
		background-size: 6px 40px; 
	}
}

/* @3x - IPHONE 6 PLUS AND SIMILAR HD RETINA */
@media screen and (min-device-width : 414px) and (-webkit-device-pixel-ratio: 3) {
	.bean-likes,
	.toggle-icon,
	.mobile-pager a,
	.fancybox-close,
	.mobile-nav-toggle,
	#hello-bar .close a,
	.icon.lightbox-play, 
	header input.search,
	ul.post-sharing li a,
	ul.social-sharing li a,
	.singlepost.pagination a {
		background-image: url(../images/retina/sprite@3x.png);
	}
	
	a.jp-play span,
	a.jp-pause span,
	.entry-content .mejs-controls .mejs-play button,
	.entry-content .mejs-controls .mejs-pause button,
	.entry-content .mejs-controls .mejs-volume-button button { 
		background-image:url(../images/retina/jplayer@3x.png);
	}

	.inner .overlay,
	.grid-item a .overlay,
	.post-thumb a .overlay {
		background-image: url(../images/retina/hover@3x.png);
	}

	a.lightbox .overlay {
		background-image: url(../images/retina/hover-lightbox@3x.png);
	}
	
	.fancybox-nav span {
		background-image: url(../images/retina/fancy-nav@3x.png);
	}

	ul.colophon-social li a {
		background-image: url(../images/retina/social@3x.png);
	}

	header nav .sub-menu a.sf-with-ul {
		background-image:url(../images/retina/sf-arrow@3x.png);
	}
}