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

* 	[Master Stylesheet]
	
	Template Name 	:  Buildwall
	Version    		:  1.0
	Author     		:  W3Engineers Ltd.
	Author URI 		:  https://themeforest.net/user/w3engineers 

====================================================

	TOC
	
	1. PRIMARY STYLES
		RESPONSIVE 
	2. COMMON STYLES
		GO TOP
		RESPONSIVE 
	3. MENU STYLING
		TOP MENU 
		MENU BOTTOM 
		LOGO 
		MENU RIGHT AREA 
		MAIN MENU 
		DROPDOWN 
		DROPDOWN MULTI LEVEL 
		DROPDOWN HOVER EFFECT 
		NAV ICON 
		SEARCH AREA 
		CART AREA 
		RESPONSIVE  
	4. SLIDER STYLING
		RESPONSIVE
	5. BLOG STYLING
		BLOG POST FULL WIDTH 
		NO IMAGE 
		NO DESC 
		LIST PAGINATION 
		RESPONSIVE 
	6. FOOTER SECTION STYLING
		CONTACT AREA
		MAIN FOOTER
		SOCIAL ICONS
		RESPONSIVE 


====================================================


/* ---------------------------------
1. PRIMARY STYLES
--------------------------------- */

/* common/primary-styles.css */


/* ---------------------------------
2. COMMON STYLES
--------------------------------- */

/* common/primary-styles.css */


/* ---------------------------------
3. MENU STYLING
--------------------------------- */

/* common/primary-styles.css */


/* ---------------------------------
4. SLIDER STYLING
--------------------------------- */

.main-slider{ height: 350px; margin-top: 130px; position: relative; color: #fff; }

.main-slider .slider-bg{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; z-index: -1; }

.main-slider .slider-bg:after{ content:''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; 
	background: rgba(0,0,0,.5); }

.main-slider .blog-bg-1{ background-image: url(../images/slider-4-1920x600.jpg); }


.main-slider .desc{ margin-top: 15px; }

.main-slider .desc i{ margin: 0 10px; position: relative; bottom: -2px; } 


/* RESPONSIVE */

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

	.main-slider{ height: 300px; margin-top: 100px; }

}
@media only screen and (max-width: 479px) {
	
	.main-slider{ margin-top: 120px; }
	
}
@media only screen and (max-width: 359px) {
	.main-slider{ margin-top: 130px; }
}


/* ---------------------------------
5. BLOG STYLING
--------------------------------- */

.blog-list .grid{ margin: -15px; }

.blog-list .grid-item{ width: 33.3333%; padding: 15px; }
.blog-list .grid-item-2{ width: 66.6666% }


.blog-list{ padding-bottom: 40px; }

.blog-list .blog-post{ box-shadow: 2px 6px 50px rgba(0,0,0,.1); }

.blog-list .blog-post .blog-img{ display: block; }

.blog-list .blog-post .blog-info{ padding: 30px 25px 5px; }

.blog-list .blog-post .date{ margin-top: 10px; color: #666; }

.blog-list .blog-post .date i{ margin-right: 10px; }

.blog-list .blog-post .read-more-btn{ height: 40px; line-height: 38px; width: 40px; text-align: center; border-radius: 30px; 
	float: right; margin-top: -20px; border: 1px solid #ccc; }

.blog-list .blog-post .read-more-btn:focus,
.blog-list .blog-post .read-more-btn:hover{ border-color: #ffcc00; background: #ffcc00; color: #000; }

.blog-list .blog-post .name{ padding: 20px 0; margin: 22px 50px 0 0; border-top: 1px solid #ddd; }


/* BLOG POST FULL WIDTH */

.blog-list .full-width{ overflow: hidden; position: relative; }

.blog-list .full-width .blog-img{ width: 50%; position: absolute; top: 0; bottom: 0; left: 0; overflow: hidden; 
	-webkit-transform: translateX(-15px); transform: translateX(-15px); }

.blog-list .full-width .blog-img img{ height: 100%; width: auto; } 
	
.blog-list .full-width .blog-info{ width: 50%; float: right; padding-left: 15px; }


/* NO IMAGE */

.blog-list .no-img{ background: #333; color: #ddd; }

.blog-list .no-img p{ color: #aaa; }

.blog-list .no-img .date{ color: #aaa; }


/* NO DESC */

.blog-list .no-desc{ padding: 30px 40px; position: relative; text-align: center; z-index: 1;
	background: #ffcc00; background-size: cover; background-image: url(../images/blog-6-600x400.jpg); }

.blog-list .no-desc:after{ content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 1; z-index: -1;
	background: #ffcc00; }

.blog-list .no-desc .title{ line-height: 1.35; margin-bottom: 10px; }

.blog-list .no-desc .title a:focus,
.blog-list .no-desc .title a:hover{ color: #444; }

.blog-list .no-desc .date{ color: #555; }


/* LIST PAGINATION */

.blog-list .list-footer{ text-align: center; margin: 50px 0 50px; }

.blog-list .list-footer li > a{ padding: 0 5px; font-size: 1.1em; }


/* RESPONSIVE */
@media only screen and (max-width: 992px) {
	
	.blog-list .grid-item,
	.blog-list .grid-item-2{ width: 50% }
	
	/* BLOG POST FULL WIDTH */

	.blog-list .full-width{ overflow: hidden; position: relative; }

	.blog-list .full-width .blog-img{ width: 100%; position: static;
		-webkit-transform: translateX(0px); transform: translateX(0px); }

	.blog-list .full-width .blog-img img{ height: auto; width: 100%; } 
	
	.blog-list .blog-post .blog-info,
	.blog-list .full-width .blog-info{ width: 100%; float: none; padding: 20px 20px 5px; }
	
}
@media only screen and (max-width: 767px) {

	/* LIST PAGINATION */

	.blog-list .list-footer{ margin: 50px 0 10px; }
	
}
@media only screen and (max-width: 479px) {
	
	.blog-list .grid-item,
	.blog-list .grid-item-2{ width: 100% }
	
}


/* ---------------------------------
6. FOOTER SECTION STYLING
--------------------------------- */

/* common/footer-styles.css */