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

* 	[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: 200px; 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/blog/tanjung_tinggi.png); background-size: cover; background-position: center;}


.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: 85px; margin-top: 0px; }

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

	.main-slider{ margin-top: 65px; }

}
@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 */