/************************************************************************************
MOBILE NAVIGATION
*************************************************************************************/
/* ensure #nav is visible on desktop version */
body:not(.mobile_menu_active) #main-nav {
	display: block !important;
}
body:not(.mobile_menu_active) #menu-icon span {
	display: none;
}

/* change max-width to trigger mobile menu (#headerwrap added to override Themify Styling output css) */
/************************************************************************************
HEADER
*************************************************************************************/
/* reset absolute elements to static */
.mobile_menu_active .social-widget,
.mobile_menu_active #site-logo,
.mobile_menu_active #site-description  {
	position: static;
}
.mobile_menu_active #site-logo {
	padding: 16px 0;
}

/************************************************************************************
MOBILE NAV BUTTON
*************************************************************************************/
.mobile_menu_active #menu-icon,
.mobile_menu_active #menu-icon-close {
	position: absolute;
	display: block;
	color: #7f7f7f;
	text-decoration: none;
}
.mobile_menu_active #menu-icon {
	top: 20px;
	right: 3%;
	font-size: 1.25em;
}
.mobile_menu_active #menu-icon-close {
	top: 0;
	left: 0;
	font-size: 1.2em;
	background-color: #00BECE;
	padding: 16px;
}
.mobile_menu_active #menu-icon-close:after {
	content: "\f054";
	font-family: FontAwesome;
	color: #20272F;
}

/************************************************************************************
MENU PANEL
*************************************************************************************/
/* Mobile Menu Styles */
.mobile_menu_active .sidemenu {
	transition: all .2s ease-in-out;
	height: 100%;
	width: 210px;
	padding: 50px 25px;
	background-color: #252D35;
	color: #999;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	-ms-scroll-chaining: none;
	display: block;
	position: fixed;
	top: 0;
	z-index: 111;
}
.mobile_menu_active #mobile-menu {
	right: -300px;
}
.mobile_menu_active #mobile-menu.sidemenu-on {
	right: 0;
}
.mobile_menu_active.sidemenu-active {
	position: relative;
}
.mobile_menu_active.sidemenu-active,
.mobile_menu_active.sidemenu-active #headerwrap {
	left: 0;
	transition: left .2s ease-in-out;
}
.mobile_menu_active.sidemenu-right,
.mobile_menu_active.sidemenu-right #headerwrap {
	left: -260px;
}
.mobile_menu_active.sidemenu-left,
.mobile_menu_active.sidemenu-left #headerwrap {
	left: 260px;
}
.mobile_menu_active.admin-bar .sidemenu {
	top: 32px;
}
.mobile_menu_active.admin-bar #main-nav-wrap {
	margin-bottom: 90px;
}

/* main nav */
.mobile_menu_active #main-nav {
	position: static;
	padding: 0;
	margin: 15px 0 90px;
	width: 100%;
	height: auto;
	background: none;
	text-align: left;
}
.mobile_menu_active #main-nav li {
	float: none;
	display: block;
	padding: 0;
}

/* menu link */
.mobile_menu_active #main-nav a,
.mobile_menu_active #main-nav ul a {
	font: inherit;
	width: auto;
	display: block;
	border: none;
	padding: 10px 0;
	padding-left: 8px;
	margin: 0;
	color: #ccc;
	background: none;
	border-bottom: solid 1px rgba(0,0,0,.4);
}

/* sub level menu link */
.mobile_menu_active #main-nav ul a {
	padding-left: 8px;
}

/* menu hover */
.mobile_menu_active #main-nav a:hover,
.mobile_menu_active #main-nav ul a:hover {
	box-shadow: none;
	color: #fff;
	background-color: #000;
}

/* sub-menu icon */
.mobile_menu_active #main-nav .menu-item-has-children > a:after,
.mobile_menu_active #main-nav ul .menu-item-has-children > a:after {
	display: none;
}

/* current link */
.mobile_menu_active #main-nav .current_page_item > a,
.mobile_menu_active #main-nav .current-menu-item > a {
	color: #fff;
}

/* sub level */
.mobile_menu_active #main-nav ul {
	position: static;
	display: block;
	margin: 0;
	border: none;
	padding: 0 0 0 1em;
	background: none;
}
.mobile_menu_active #main-nav ul li {
	border: none;
}
.mobile_menu_active #main-nav ul:after,
.mobile_menu_active #main-nav ul:before {
	border: none;
}

/*
SEARCH FORM
================================================ */
.mobile_menu_active #searchform-wrap {
	margin: 30px 0 0;
	position: static;
}
.mobile_menu_active #headerwrap #searchform {
	position: relative;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
	float: none;
	clear: both;
	margin: 0 0 1em;
	padding: 0;
	width: auto;
}
.mobile_menu_active #headerwrap #searchform #s  {
	position: static;
	width: 100%;
	float: none;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
	background-color: rgba(255,255,255,.1);
	color: #eee;
	border: none;
}
.mobile_menu_active #headerwrap #searchform #s:focus,
.mobile_menu_active #headerwrap #searchform #s:hover,
.mobile_menu_active #headerwrap #searchform .icon-search:hover + #s {
	background-color: rgba(255,255,255,.2);
	color: #fff;
	width: 100%;
	border: none;
}
.mobile_menu_active #headerwrap #searchform .icon-search:before {
	padding: 0;
	right: 10px;
	top: auto;
	bottom: 6px;
}
.mobile_menu_active #main-nav .sub-arrow {
	display: none !important;
}

@media screen and (max-width: 1500px) {

	/************************************************************************************
	STRUCTURE
	*************************************************************************************/
	#pagewrap {
		max-width: 100%;
	}

	.footer-inner,
	.header-inner {
		padding: 0 3%; /* left/right padding space */
	}

	/* content */
	#content {
	    padding-left: 3%;
	    padding-right: 3%;
	}
	.sidebar-none.full_width #content {
		padding: 0;
		width: auto;
	}

	/************************************************************************************
	PAGE
	*************************************************************************************/
	.page-title {
		font-size: 300%;
		line-height: 100%;
	}

	/************************************************************************************
	POST
	*************************************************************************************/
	.loops-wrapper.list-post .post-title {
		font-size: 1.65em;
	}
	.loops-wrapper.list-post .post-meta .post-stats {
		font-size: .85em;
	}

	/************************************************************************************
	EVENT
	*************************************************************************************/
	.loops-wrapper.event.grid4 .post-date,
	.loops-wrapper.event.grid3 .post-date {
		text-align: left;
	}
	.loops-wrapper.event.grid4 .location:before,
	.loops-wrapper.event.grid3 .location:before {
		margin-left: 0;
	}
	.loops-wrapper.event.grid2 .post-share {
	    padding-top: 0;
	}
	.loops-wrapper.event.grid3 .post-stats {
		margin-top: 0;
	}

	/************************************************************************************
	GALLERY
	*************************************************************************************/
	.loops-wrapper.gallery.grid3 .post-stats {
		margin-top: 0;
	}

	/************************************************************************************
	VIDEO
	*************************************************************************************/
	.loops-wrapper.video.grid3 .post-stats {
		margin-top: 0;
	}
}

@media screen and (max-width: 880px) {

	/************************************************************************************
	STRUCTURE
	*************************************************************************************/
	/* single column layout */
	.sidebar-none.full_width .themify_builder_row,
	.footer-inner,
	.header-inner {
		padding-left: 4%; /* left/right padding space */
		padding-right: 4%; /* left/right padding space */
	}
	#content,
	#sidebar {
		padding-left: 4%; /* left/right padding space */
		padding-right: 4%; /* left/right padding space */
		width: 100%;
		float: none;
	}
	#content {
		margin-top: 0; /* reset margin top */
	}

	/************************************************************************************
	SHARE BOX
	*************************************************************************************/
	.post-share .social-share {
		right: .03em;
	}

	/************************************************************************************
	POST
	*************************************************************************************/
	.post-meta .post-author,
	.post-meta .post-date {
		font-size: .85em;
	}
	.post-meta {
	    margin: 20px 0 ;
	}

	/* slider post layout */
	.loops-wrapper.slider .post-content {
		position: static;
		background-color: #000;
		padding-top: 10px;
		padding-bottom: 5px;
	}
	.loops-wrapper.slider .post-meta {
		position: static;
	}

	/************************************************************************************
	EVENTS
	*************************************************************************************/
	.loops-wrapper.event.grid3 .post-stats {
		margin-top: 0;
	}
	.single .event-post .event-single-details,
	.single .event-post .event-map {
		height: 250px;

	}
	.single .event-post .event-single-details {
		min-height:250px;
	}


	/************************************************************************************
	GALLERY
	*************************************************************************************/
	.loops-wrapper.gallery.grid3 .post-stats {
		margin-top: 0;
	}
}

@media screen and (max-width: 760px) {

	/************************************************************************************
	HEADER
	*************************************************************************************/
	/* site description */
	.mobile_menu_active #site-description {
		display: none;
	}

	/************************************************************************************
	POST
	*************************************************************************************/
	.loops-wrapper.list-post .post-title {
		font-size: 1.8em;
	    line-height: 1.2em;
	    margin-bottom: 10px;
	}
	/* list large image */
	.loops-wrapper.list-large-image .post-image {
		float: none;
		margin-right: 0;
	}

	/************************************************************************************
	VIDEO POST TYPE
	*************************************************************************************/
	.loops-wrapper.video.slider .post-content {
		position: static;
		background-color: #000;
	}
	.loops-wrapper.event.slider .event-info-wrap {
		font-size: .8em;
		line-height: 1.2em;
	}
	/* video slider pager */
	.loops-wrapper.video.slider .carousel-pager {
		margin: 0 26px;
	}
	.loops-wrapper.video.slider .carousel-nav-wrap .carousel-prev,
	.loops-wrapper.video.slider .carousel-nav-wrap .carousel-next {
		width: 24px;
	}

	/************************************************************************************
	PAGE
	*************************************************************************************/
	.page-title {
		font-size: 280%;
		line-height: 110%;
	}
}

@media screen and (max-width: 760px) {

	/************************************************************************************
	POST
	*************************************************************************************/
	.shortcode.loops-wrapper.grid4 .post,
	.shortcode.loops-wrapper.grid3 .post,
	.shortcode.loops-wrapper.grid2 .post,
	.shortcode.loops-wrapper.list-post .post,
	.module.loops-wrapper.grid2 .post,
	.module.loops-wrapper.grid3 .post,
	.module.loops-wrapper.grid4 .post,
	.module.loops-wrapper.grid2-thumb .post,
	.loops-wrapper.grid4 .post,
	.loops-wrapper.grid3 .post,
	.loops-wrapper.grid2 .post,
	.loops-wrapper.list-post .post {
		width: 100%;
		margin-left: 0;
		float: none;
	}
	.loops-wrapper.list-post .post-image,
	.loops-wrapper.list-post .post-content {
		float: none;
		position: static;
		width: 100%;
	}
	.loops-wrapper .meta-right {
	    float: right !important;
	}
	.loops-wrapper.grid4 .post-share,
	.loops-wrapper.grid3 .post-share {
	    margin-top: 0;
	}
	.loops-wrapper.grid4 .author-avatar {
	    height: 50px;
	    width: 50px;
	}
	.loops-wrapper.grid2 .post-meta .post-date,
	.loops-wrapper.grid2 .post-meta .post-author {
	    font-size: 0.85em;
	}
	.loops-wrapper.grid2 .meta-right {
	    padding-top: 0;
	}

	/************************************************************************************
	VIDEO POST TYPE
	*************************************************************************************/
	.loops-wrapper.video.list-post .post-image:before {
		width: 40px;
		height: 30px;
		top: 50%;
		left: 50%;
		margin-top: -20px;
		margin-left: -15px;
		font-size: 1.85em;
	}
	.loops-wrapper.video .location:before  {
		margin: 0 10px 0 20px !important;
	}
	.loops-wrapper.video.slider .post-stats,
	.loops-wrapper.video.list-post .post-stats,
	.loops-wrapper.video.grid2 .post-stats,
	.loops-wrapper.video.grid3 .post-stats,
	.loops-wrapper.video.grid4 .post-stats {
		margin-top: 10px;
	}

	/************************************************************************************
	PAGE
	*************************************************************************************/
	.page-title {
		font-size: 260%;
		line-height: 105%;
	}

	/************************************************************************************
	EVENT POST TYPE
	*************************************************************************************/
	.loops-wrapper.event.slider .post-stats,
	.loops-wrapper.event.list-post .post-stats,
	.loops-wrapper.event.grid2 .post-stats,
	.loops-wrapper.event.grid3 .post-stats,
	.loops-wrapper.event.grid4 .post-stats {
		margin-top: 10px;
	}

	/* single event */
	.single-event .event-post .event-single-wrap {
		position: static;
		margin-bottom: 20px;
		height: auto;
	}
	.single-event .event-post .event-map {
		width: 100%;
		margin-bottom: 80px;
	}
	.single-event .event-post .event-single-details .post-date {
		display: block;
	}
	.single-event .event-post .event-single-details {
		min-height: 0;
		height: auto ;
	}
	.single-event .event-post .post-content {
		padding-top: 0;
	}

	/************************************************************************************
	GALLERY POST TYPE
	*************************************************************************************/
	.loops-wrapper.gallery .location:before  {
		margin: 0 10px 0 20px !important;
	}
	.loops-wrapper.gallery.slider .post-stats,
	.loops-wrapper.gallery.list-post .post-stats,
	.loops-wrapper.gallery.grid2 .post-stats,
	.loops-wrapper.gallery.grid3 .post-stats,
	.loops-wrapper.gallery.grid4 .post-stats {
		margin-top: 10px;
	}

	/************************************************************************************
	POS STATS
	*************************************************************************************/
	.post-stats .stats-views i:before,
	.post-stats .stats-comments i:before,
	.post-stats .stats-likes i:before {
		font-size: .85em !important;
	}
	.loops-wrapper .post-stats {
		font-size: 1em !important;
	}

	/* share grid4 back to normal size*/
	.loops-wrapper.grid4 .facebook-share .share span:after,
	.loops-wrapper.grid4 .pinterest-share .share span:after,
	.loops-wrapper.grid4 .googleplus-share .share span:after,
	.loops-wrapper.grid4 .twitter-share .share span:after {
	    font-size: 2em;
	    margin-bottom: 6px;
	}
	.loops-wrapper.grid4 .post-share .sharrre {
	   margin: 6px 12px;
	}
	.loops-wrapper.grid4 .sharrre .count {
	    font-size: 1em !important;
	}
	.loops-wrapper.grid4 .post-share .social-share {
	    right: 0.03em;
	}

	/*
	FULL SECTION STYLES
	================================================ */
	/* section headings */
	.sidebar-none.full_width .col-full .module-text h2:first-of-type {
		font-size: 1.6em;
		padding-left: 0;
		padding-right: 0;
	}
	.sidebar-none.full_width .col-full .module-text h2:first-of-type {
		font-size: 1.4em;
		padding-left: 0;
		padding-right: 0;
	}
	.sidebar-none.full_width .col-full .module-text h3:first-of-type {
		font-size: 1.1em;
		padding-left: 0;
		padding-right: 0;
	}

}

@media screen and (max-width: 680px) {

	/************************************************************************************
	STRUCTURE
	*************************************************************************************/
	.sidebar1 #pagewrap,
	#pagewrap {
		padding-top: 110px; /* for fixed header */
	}

	/************************************************************************************
	GRID
	*************************************************************************************/
	.col4-1,
	.col4-2, .col2-1,
	.col4-3,
	.col3-1,
	.col3-2	 {
		margin-left: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/************************************************************************************
	HEADER
	*************************************************************************************/
	.mobile_menu_active #headerwrap.fixed-header {
		margin-top: -50px;
	}
	.mobile_menu_active #menu-icon {
		top: 18px;
	}
	.mobile_menu_active .fixed-header #menu-icon {
		top: 20px;
	}

	/* site logo */
	.mobile_menu_active #site-logo {
		width: auto;
		padding: 19px 0;
		font-size: 1.65em;
		line-height: 100%;
	}
	/* prevent logo img extend the fixed header on mobile */
	.has-fixed-header #headerwrap #site-logo img {
		width: auto;
		max-height: 40px;
	}

	/* social widget */
	.mobile_menu_active .social-widget {
		position: static;
		float: none;
		padding: 0;
	}

	/************************************************************************************
	POST
	*************************************************************************************/
	/* post content */
	.post-content {
		overflow: visible !important; /* prevent from hidden */
	}
	.loops-wrapper .post-meta {
		padding: 10px 0 !important;
	}
	.loops-wrapper .post-title {
	    font-size: 1.5em !important;
	}
	.loops-wrapper.grid2 .post-meta .post-stats {
		padding: 0;
	}

	/* slider post layout */
	.loops-wrapper.slider .post-category-wrap {
		display: none;
	}
	.loops-wrapper.slider .post-title {
		font-size: 1.1em !important;
	}

	/************************************************************************************
	VIDEO POST TYPE
	*************************************************************************************/
	#body .video-post .post-image a:before {
		width: 50px;
		height: 40px;
		top: 50%;
		left: 50%;
		margin-top: -26px;
		margin-left: -35px;
		font-size: 1.85em;
		padding: 12px 0 0 26px;
	}

	/************************************************************************************
	GALLERY POST TYPE
	*************************************************************************************/
	.sidebar-none.full_width .col-full .loops-wrapper.event.slider .post-title {
		font-size: 2em;
	}

	/************************************************************************************
	GALLERY POST TYPE
	*************************************************************************************/
	.loops-wrapper.slider .event-post .day:before,
	.loops-wrapper.slider .event-post .location:before {
		margin: 0 5px;
		font-size: 1em;
	}
	/* turn masonry gallery to 2 columns */
	.gallery-wrapper .item {
		width: 50% !important;
	}

	/************************************************************************************
	POST NAV
	*************************************************************************************/
	.post-nav .prev,
	.post-nav .next {
		display: block;
		width: 100%;
		clear: both;
		margin-bottom: 10px;
	}

	/************************************************************************************
	PAGE
	*************************************************************************************/
	.page-title {
		font-size: 180%;
		line-height: 105%;
	}

	/************************************************************************************
	COMMENTS
	*************************************************************************************/
	.commentlist {
		padding-left: 0;
	}
	.commentlist .commententry {
		clear: left;
	}
	.commentlist .avatar {
		float: left;
		width: 40px;
		height: 40px;
		margin: 0 10px 10px 0;
	}

	/************************************************************************************
	FOOTER
	*************************************************************************************/
	#footer-logo {
		position: static;
	}
	.footer-nav {
		padding: 0;
	}

}

/* WordPress Breaking Points */
@media screen and (max-width: 782px) {
	.admin-bar .sidemenu,
	.admin-bar #headerwrap.fixed-header {
		top: 46px;
	}
}
@media screen and (max-width: 600px) {
	.admin-bar.sidemenu-active {
		position: static;
	}
	.admin-bar.sidemenu-active.mobile-menu-visible {
		position: relative;
		top: -46px;
	}
	.admin-bar .sidemenu,
	.admin-bar #headerwrap.fixed-header,
	.admin-bar #headerwrap.fixed-header .sidemenu {
		top: 0;
	}
}