/*==========================================================================================
	
Media CSS File
This file contains all styles for responsive layout

==========================================================================================*/



/*----------------------------------------------------*/
/*	1.	> 1280px
/*----------------------------------------------------*/


/*----------------------------------------------------*/
/*	2.	lower that 1280px
/*----------------------------------------------------*/
@media only screen and (max-width: 1280px) {
	
}

/*----------------------------------------------------*/
/*	3.	lower that 1024px
/*----------------------------------------------------*/
@media only screen and (max-width: 1024px) {
	
	.bw-slider-holder.billboard.expand {height:auto;}
	
	.billboard-slider .info h3 {font-size:30px;}
	
	#content.right, .latest-articles-content.right {width:60%;}
	#sidebar {width:40%;}
	
	.posts-grid-holder {width:100%;}
	.posts-grid-holder.right {width:60%;}
	.category-slider-loader {height:auto;}
	
	.posts-grid .article.thumb .article-title {padding:0;}
	.posts-grid .article.thumb .article-title a {font-size:14px;padding:10px 0;}
	
	.posts-grid-holder.inner {width:100%;}
	
	#content.right .related-articles .posts-grid .article {width:100%!important;text-align:center;padding:0;}
	#content.right .related-articles .posts-grid .article .image-wrap {background-color:#f4f4f4;}
	#content.right .related-articles .posts-grid .article .image-wrap img {width:100%;text-align:center;float:none;max-width:450px;}
	
	#content.full .bw-slider-holder.gallery.expand {height:auto;}
	#content.right .bw-slider-holder.gallery.expand {height:auto;}
	
	#footer > .row {padding-left:20px;}
	#footer .bottom {padding-left:20px;padding-right:20px;}
	
	.header-parallax {height:500px;background-size:cover!important;-moz-background-size:cover!important;-webkit-background-size:cover!important;}
	.header-parallax .parallax-title {width:60%;left:20%;}
	
	.posts-list-holder {width:100%;}
	
	.billboard-posts {text-align:center;}
	.billboard-posts .item {float:none;display:inline-block;width:100%;margin:0 0 15px 0!important;padding:0;}
	.billboard-posts .article-date {font-size:18px!important;}
	.billboard-posts .article-title {font-size:25px!important;}
	
	.bw-slider-holder.gallery.expand {height:auto;}
	
}

/*----------------------------------------------------*/
/*	4.	lower that 768px
/*----------------------------------------------------*/
@media only screen and (max-width: 768px) {
	
	#content {width:100%!important;}
	#sidebar {width:100%;padding:10px 20px;}
	.posts-grid-holder {width:100%;}
	.posts-grid-holder.right {width:100%;}
	
	.woocommerce .related ul li.product,
	.woocommerce-page .related ul li.product {
		width:49%!important;
		margin-right:0;
	}
	.woocommerce .related ul li.product:nth-child(2n),
	.woocommerce-page .related ul li.product:nth-child(2n) {
		margin-left:2%;
	}
	
	/* header */
	#header {padding-bottom:0;min-height:50px;}
	#header .header-top {display:none;}
	#header .row-holder {display:none;}
	#header .right-content {display:none!important;}
	#header.versions #logo {height:auto;padding:20px 0;float:left;width:280px;}
	#header .row.for-header {min-height:50px;}
	
	#mobile-toggle {display:block;position:absolute;top:50%;margin-top:-25px;right:12px;width:50px;height:50px;cursor:pointer;}
	#mobile-toggle i {width:30px;height:5px;position:absolute;top:23px;left:10px;background-color:#fff;}
	#mobile-toggle i:after, #mobile-toggle i:before {content:"";width:30px;height:5px;position:absolute;top:-10px;left:0;background-color:#fff;transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;}
	#mobile-toggle i:before {top:10px;}
	
	#header.nav-invert #mobile-toggle i, #header.nav-invert #mobile-toggle i:before, #header.nav-invert #mobile-toggle i:after {background-color:#000;}
	
	body.mobile-visible #mobile-toggle i {background-color:transparent!important;}
	body.mobile-visible #mobile-toggle i:after {top:0;transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);}
	body.mobile-visible #mobile-toggle i:before {top:0;transform:rotate(-45deg);-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);}
	
	#header.nav-invert .header-container {background-color:#f4f4f4;}
	
	#mobile-menu {display:block;position:absolute;top:0;right:0;width:75%;padding:25px 25px 0 25px;overflow-y:scroll;height:100%;background-color:#111;}
	#mobile-menu ul {margin:0;list-style:none;}
	#mobile-menu ul.menu {margin-bottom:45px;}
	#mobile-menu ul.menu ul {margin-left:25px;}
	#mobile-menu ul.menu a {display:block;padding:12px 2px;color:#ccc;}
	#mobile-menu ul.menu > li > a {border-bottom:1px solid #232323;color:#fff;}
	#mobile-menu ul.menu > li:last-child > a {border-bottom:0;}
	body.admin-bar #mobile-menu {padding-top:65px;}
	
	#mobile-menu .search-form {position:relative;width:100%;margin-bottom:28px;}
	#mobile-menu .search-field {width:100%;padding:11px;line-height:17px;}
	#mobile-menu .search-submit {position:absolute;top:0;right:0;color:#fff;height:41px;width:41px;}
	
	.posts-grid-holder .article {width:50%!important;}
	
	#wrapper {position:relative;background-color:#fff;transition:all .7s cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition:all .7s cubic-bezier(0.165, 0.84, 0.44, 1);-webkit-transition:all .7s cubic-bezier(0.165, 0.84, 0.44, 1);}
	#wrapper.overflow {overflow:hidden;}
	
	body.mobile-visible #wrapper {
		-webkit-transform:translateX(-75%);
		-moz-transform:translateX(-75%);
		-ms-transform:translateX(-75%);
		-o-transform:translateX(-75%);
		transform:translateX(-75%);
	}
	
	/* banner */
	.content-module img.aligncenter {padding:0 20px;}
	
	.header-parallax {height:400px;}
	.header-parallax .parallax-title {width:80%;left:10%;}
	.header-parallax .date {font-size:15px;}
	.header-parallax .parallax-title h2 {font-size:20px;}
	
	/* logo mobile version */
	#logo .desktop {display:none;}
	#logo .mobile {display:block;}
	#logo .mobile.plain {color:#fff;text-align:left;padding-left:20px;}
	
	#logo h1 {font-size:25px;text-align:left;padding-left:20px;}
	#logo h2 {display:none;}
	
	#mobile-menu .fa.fa-circle {display:none!important;}
	
	.bw-slider .title h3 {font-size:16px;}
	
	#footer > .row {padding-right:20px;}
	#footer .widget {width:100%;padding-right:0;}
	#footer .widget .bw-widget-slider li {text-align:center;}
	
	#footer .bottom {text-align:center;}
	#footer .bottom p, #bottom-menu {width:100%;float:none!important;display:inline-block;}
	#footer .bw-menu ul li {display:inline-block;float:none;}
	
	#footer .column {width:50%;}
	#footer .widget {padding-right:25px;}
	
}

/*----------------------------------------------------*/
/*	5.	lower that 640px
/*----------------------------------------------------*/

@media only screen and (max-width: 640px) {
	
	.billboard-slider {background-color:#fff;}
	.billboard-slider .info h3 {padding-top:20px;font-size:20px;color:#000;}
	.billboard-slider .info {position:static;padding:0;}
	.billboard-slider .info .read-more a {padding:4px 12px;margin-bottom:10px;white-space:nowrap;color:#000;border:4px solid #000;}
	
	.post-author {padding:20px;}
	.post-author .thumb {left:0;width:100%;text-align:center;}
	.post-author .thumb img {float:none;}
	.post-author .cont {padding:125px 0 0;text-align:center;}
	
	.billboard-posts .article-date {font-size:15px!important;}
	.billboard-posts .article-title {font-size:16px!important;}
	
	#footer .column {width:100%;}
	#footer .widget {padding-right:0;}

}

/*----------------------------------------------------*/
/*	6.	lower that 480px
/*----------------------------------------------------*/
@media only screen and (max-width: 480px) {
	
	.woocommerce .related ul li.product,
	.woocommerce-page .related ul li.product {
		width:100%!important;
		margin-right:0;
	}
	
	.posts-grid-holder .article {width:100%!important;}
	
	.papa-grid .part {width:100%;padding:0!important;}
	
}

/*----------------------------------------------------*/
/*	7.	<= 320px
/*----------------------------------------------------*/