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

* 	[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 DETAILS
		BLOG QUOTO
		BLOG FOOTER
		BLOG AUTHOR
		RELATED POST
		RESPONSIVE
	6. BLOG COMMENT
		LEAVE REPLY AREA
		RESPONSIVE
	7. SIDEBAR STYLING
		SUBSCRIBE SECTION
		CATEGORIES
		RELATED POST
		TAGS
		RESPONSIVE
	8. 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,.3); }

.main-slider .blog-bg-1{ background-image: url(../images/slider-6-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-details a{ color: #fcb545; }

.blog-details a:hover{ color: #fcb545; }

.blog-details a:active{ color: #fcb545; }

.blog-details a:focus{ color: #fcb545; }

.blog-details{ padding-bottom: 50px; }

.blog-details .details-area{ padding-top: 20px; }

.blog-details .details-area .title{ margin-bottom: 30px; }


/* BLOG DETAILS */

.blog-details .single-post .date{ margin: 30px 0 10px; color: #666; }

.blog-details .blog-desc .first-letter { float: left; font-size: 75px; line-height: 60px; font-weight: 600; padding: 4px 8px 0 3px; }


/* BLOG QUOTO */

.blog-details .blog-desc .quoto{ padding: 10px 10px; line-height: 1.6; }

.blog-details .blog-desc .quoto .start-icon { display: inline-block; margin-right: 15px; color: #aaa; }

.blog-details .blog-desc .quoto .end-icon { display: inline-block; margin-left: 15px; color: #aaa;
	-webkit-transform: rotate(180deg); transform: rotate(180deg); }


/* BLOG FOOTER */

.blog-details .blog-footer{ padding: 5px 20px; background: #ffcc00; color: #000; }

.blog-details .blog-footer ul.icons > li > a { padding: 0; padding-left: 15px; line-height: 30px; }


/* BLOG AUTHOR */

.blog-details .blog-author{ margin: 30px 0 25px; }

.blog-details .blog-author .author-image{ float: left; width: 100px; height: 100px; border-radius: 100px; overflow: hidden;
	margin-top: 10px; }

.blog-details .blog-author .author-info{ margin-left: 120px; }

.blog-details .blog-author .icons > li > a{ padding-right: 10px; }


/* RELATED POST */

.blog-details .related-item{ max-width: 500px; }

.blog-details .related-item .blog-image{ display: block; }

.blog-details .related-item{ margin-bottom: 30px; box-shadow: 1px 3px 50px rgba(0,0,0,.12); }

.blog-details .related-item .blog-info{ padding: 25px 20px 30px; }

.blog-details .related-item-area .category{ margin-bottom: 5px; color: #666; }

.blog-details .related-item-area .date{ margin-top: 10px; color: #666; }

.blog-details .related-text{ max-width: 100%; }

.blog-details .sumber-img{ font-size: 11px; position: absolute; left: 0; margin-left: 15px; background: #fff; padding: 10px; opacity: 0.8;}

.blog-details .sumber-text{ font-size: 12px;}


/* RESPONSIVE */

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

	.blog-details{ padding-bottom: 0px; }

	/* BLOG QUOTO */
	.blog-details .blog-desc .quoto{ padding: 0px 10px; }

	/* 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 15px 5px; }

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

	/* BLOG AUTHOR */
	.blog-details .blog-author .author-image{ float: none; margin-top: 0px; }
	.blog-details .blog-author .author-info{ margin-left: 0px; margin-top: 20px; }

}



/* ---------------------------------
6. BLOG COMMENT
--------------------------------- */

.blog-details .comment{ margin-bottom: 30px; }

.blog-details .comment .date{ margin: 10px 0 10px; color: #666; }

.blog-details .comment .author-image{ float: left; width: 100px; height: 100px; border-radius: 100px; overflow: hidden; margin-top: 10px; }

.blog-details .comment .author-info{ margin-left: 120px; }

.blog-details .author-info{ position: relative; }

.blog-details .author-info .reply-btn{ position: absolute; padding: 5px 12px; top: 10px; right: 20px; border-radius: 5px;
	font-size: .95em; background: #ffcc00; }

.blog-details .author-info .reply-btn:focus,
.blog-details .author-info .reply-btn:hover{ background: #444; color: #fff; }


.blog-details .author-info i{ margin-right: 7px; }


/* LEAVE REPLY AREA */

.blog-details .leave-reply-area{ padding-bottom: 0; }

.blog-details .leave-reply input,
.blog-details .leave-reply textarea,
.blog-details .leave-reply button{ width: 100%; max-width: 100%; margin-bottom: 20px; border: 1px solid #ccc; }

.blog-details .leave-reply input{ height: 45px; padding: 0 20px;}

.blog-details .leave-reply textarea{ padding: 20px; margin-bottom: 17px; }

.blog-details .leave-reply button { margin-bottom: 50px; text-align: center; height: 50px; border-radius: 2px;
	border: 2px solid #ffcc00;  background: #ffcc00; color: #000; }

.blog-details .leave-reply button:focus,
.blog-details .leave-reply button:hover{ background: none; color: #222; }


/* RESPONSIVE */

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

	.blog-details .sidebar .sidebar-section{ margin-bottom: 30px; }

}

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

	.blog-details .comment .author-image{ float: none; margin-top: 0px; }
	.blog-details .comment .author-info{ margin-left: 0px; margin-top: 15px; }
	.blog-details .author-info .reply-btn{ position: static; margin-top: 15px; }

}


/* ---------------------------------
7. SIDEBAR STYLING
--------------------------------- */

.blog-details .sidebar .sidebar-section{ margin-bottom: 50px; }

.blog-details .sidebar .sidebar-section .title{ margin-bottom: 25px; }

.blog-details .sidebar .sidebar-section li > a{ padding-right: 10px; }


/* SUBSCRIBE SECTION */

.blog-details .sidebar .subscribe-form{ position: relative; height: 45px }

.blog-details .sidebar .subscribe-form input{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 45px;
	padding: 0 120px 0 20px ; border-radius: 2px; border: 1px solid #aaa; background: none; }

.blog-details .sidebar .subscribe-form input:focus{ border-color: #ffcc00; }

.sidebar .subscribe-form button{ position: absolute; top: 0; bottom: 0; right: 0; width: 120px; text-align: center; color: #666; }

.blog-details .sidebar .subscribe-form button:focus,
.blog-details .sidebar .subscribe-form button:hover{ color: #000; }


/* CATEGORIES */

.blog-details .sidebar .categories li{ display: block; }

.blog-details .sidebar .categories li > a{ display: block; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed #ddd; }


/* RELATED POST */

.blog-details .sidebar .related-post-area .title{ margin-bottom: 15px; }

.blog-details .sidebar .related-post{ position: relative; margin-top: 15px; }

.blog-details .sidebar .related-post .left-area{ width: 100px; position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; }

.blog-details .sidebar .related-post .left-area img{ height: 100%; width: auto; }

.blog-details .sidebar .related-post .right-area{ padding-left: 115px; min-height: 90px; }

.blog-details .sidebar .related-post .right-area .date{ margin-top: 5px; color: #666; }


/* TAGS */

.blog-details .sidebar .tags .title{ margin-bottom: 20px; }

.blog-details .sidebar .tags li > a{ padding: 7px 15px; margin: 10px 4px 0px 0; border: 1px solid #ffcc00; }

.blog-details .sidebar .tags li > a:focus,
.blog-details .sidebar .tags li > a:hover{ background: #ffcc00; color: #000; }


/* RESPONSIVE */

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

	.blog-details .sidebar .related-post .left-area{ width: 80px; }

	.blog-details .sidebar .related-post .right-area{ padding-left: 95px; min-height: 80px; }

}

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

	/* SUBSCRIBE SECTION */
	.blog-details .sidebar .subscribe-form input{ padding: 0 95px 0 15px; }

	.blog-details .sidebar .subscribe-form button{ width: 95px; }

}

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

	.blog-details .sidebar .related-post .left-area{ position: static; width: 80px; height: 80px; margin-bottom: 15px; }

	.blog-details .sidebar .related-post .right-area{ padding-left: 0px; min-height: auto; }

}

/* ---------------------------------
8. FOOTER SECTION STYLING
--------------------------------- */

/* common/footer-styles.css */