
/* ---------------------------------
1. PRIMARY STYLES
--------------------------------- */





/* ---------------------------------
2. COMMONS FOR PAGE DESIGN
--------------------------------- */


.section{ padding: 70px 0 40px; }

.section .heading{ padding-bottom: 70px; }

.center-text{ text-align: center; } 

.color-white{ color: #fff; }

.display-table{ display: table; height: 100%; width: 100%; }

.display-table-cell{ display: table-cell; vertical-align: middle; }

.card{ background: transparent; border: 0; }

.no-side-padding{ padding-right: 0px; padding-left: 0px; }

.no-left-padding{ padding-left: 0px; }

.no-right-padding{ padding-right: 0px; }

.icon{ font-size: 2em; }


.left-area{ float: left;  }

.right-area{ float: right;  }

.width-60{ width:60%; }

.width-50{ width: 50%; }


::-webkit-input-placeholder { font-size: .9em; letter-spacing: 1px; }

::-moz-placeholder { font-size: .9em; letter-spacing: 1px; }

:-ms-input-placeholder { font-size: .9em; letter-spacing: 1px;  }

:-moz-placeholder { font-size: .9em; letter-spacing: 1px;  }

input:focus,
textarea:focus{ border-color: #FFAD4D!important; }


 
 
/* ---------------------------------
4. SINGLE POST
--------------------------------- */

.blog-area{ padding: 370px 0 50px; }

.blog-posts .single-post{ margin-bottom: 60px; }

.single-post .icons{ overflow: hidden; line-height: 30px; margin: 30px 0 10px; }

.single-post .icons .caegory-btn{ padding: 0 20px; height: 30px; line-height: 30px; }

.single-post .icons ul.social-icons{ color: #666; }

.single-post .icons ul.social-icons > li > a{ padding-left: 15px; }

.single-post .icons ul.social-icons > li > a > i{ margin-right: 10px; }

.single-post .title{ margin: 20px 0 15px; }

.single-post .date{ color: #999; }

.single-post .desc{ margin: 30px 0; }
	
.single-post .quoto{ padding: 30px 40px; position: relative; }

.single-post .quoto i{ margin-right: 10px; position: absolute; top: 10px; left: 10px; font-size: 1.4em; 
	color: #FFAD4D; }


/* POST AUTHOR */

.blog-posts .post-author{ margin: 30px 0; margin-left: 20px; padding: 40px 30px; position: relative; 
	box-shadow: 0px 5px 40px rgba(0,0,0,.2); }

.post-author .author-image{ height: 120px; width: 120px; position: absolute; left: 0px; top: 50%; 
	margin-top: -60px; border-radius: 2px; overflow: hidden; }

.post-author .author-info{ margin-left: 100px; }

.post-author .name{ margin-bottom: 15px; }

.post-author .social-icons{ margin-top: 15px; color: #888; }

.post-author .social-icons > li > a{ padding-right: 15px; }


/* COMMENTS AREA */

.comments-area{ margin: 50px 0; }

.comments-area .author-image{ height: 70px; width: 70px; border-radius: 100px; overflow: hidden; float: left; }

.comments-area .comment-info{ margin-left: 90px; }

.comments-area .title{ margin-bottom: 30px; }

.comments-area .comment{ margin-bottom: 30px; }

.comments-area .date{ margin: 5px 0 15px; color: #888; }


/* LEAVE COMMENT */

.leave-comment-area{ margin: 50px 0; }

.leave-comment-area .title{ margin-bottom: 30px; }

.leave-comment input,
.leave-comment textarea{ width: 100%; margin-bottom: 30px; border: 0; outline: 0; border-bottom: 1px solid #aaa; }

.leave-comment input{ padding: 10px 0px; }

.leave-comment textarea{ padding: 10px 0px; }


/* ---------------------------------
5. SIDEBAR STYLING
--------------------------------- */

.sidebar-section{ margin-bottom: 50px; }

.sidebar-section .title{ margin-bottom: 30px; }

.sidebar-area img{ max-width: 600px; }


/* ABOUT AUTHOR */

.about-author{ margin-top: 30px; padding: 0 30px 30px; box-shadow: 0px 10px 40px rgba(0,0,0,.2); }

.about-author .author-image{ max-width: 150px; margin: 0px auto 20px; transform: translateY(-30px); 
	border-radius: 3px; overflow: hidden; box-shadow: 0px 0px 30px rgba(0,0,0,.1); }

.about-author .social-icons > li{ margin: 0 10px; color: #888; font-size: 1.05em; }

.about-author .author-name{ margin: 20px 0; }

.about-author .signature-image{ margin: 20px auto 0; max-width: 120px; }

.about-author .read-more-link{ margin: 20px 0; font-size: .9em; letter-spacing: 2px; position: relative; 
	overflow: hidden; color: #FFAD4D; }

.about-author .read-more-link:after{ content:''; position: absolute; bottom: 0px; left: 0; right: 0; 
	height: 1px; transition: all .2s; background: #FFAD4D; }

.about-author .read-more-link:hover:after{ transform: translateX(100%); }


/* SEARCH AREA */

.src-area{ line-height: 50px; position: relative;  }

.src-area input{ display: block; width: 100%; padding: 0 50px 0 20px; border: 0; outline: 0; 
	border-bottom: 1px solid #bbb;  }

.src-area .src-btn{ position: absolute; top: 0; right: 20px; height: 50px; }

	
/* NEWSLETTER AREA */

.newsletter-area{ padding: 30px; background :#29333C; }

.newsletter-area .title{ margin: 0; color: #fff; }

.newsletter-area .email-input{ width: 100%; margin: 15px 0; border: 0; padding: 10px 20px; background: #fff; }


/* CATEGORY AREA */

.category-area .category{ position: relative; margin-bottom: 20px; }

.category .name{ position: absolute; bottom: 0; left: 0; right: 0; padding: 7px 20px; background: #FFAD4D; color: #fff; }


/* LATEST POSTS */

.latest-post{ overflow: hidden; margin-bottom: 20px; }

.latest-post .l-post-image{ width: 80px; float: left; }

.latest-post .post-info{ margin-left: 100px; }

.latest-post .category-btn{ padding: 5px 10px; margin-bottom: 5px; }

.latest-post .date{ margin-top: 5px; color: #888; }
	

/* ADVERTISEMENT AREA */

.advertisement-img{ position: relative; }

.advertisement-img .discover-btn{ position: absolute; bottom: 30px; padding: 15px 0; width: 200px; 
	left: 50%; margin-left: -100px; border-color: #fff; color: #fff; }

.advertisement-img .discover-btn:hover{ border-color: #FFAD4D; }


/* INSTAGRAM */
	
.instagram-area{ overflow: hidden; }

.instagram-area .instagram-img > li{ width: 30%; float: left; margin: 0 5px 5px 0; }

	
/* TAGS */

.tags-area .tags{ overflow: hidden; }

.tags-area .tags > li{ float: left; margin: 0 5px 5px 0; }

.tags-area .tags > li > a{ padding: 10px 15px; }

