/*
=====================================================================
*   Kreative v1.0 Layout Stylesheet
*   url: styleshout.com
*   09-26-2013
=====================================================================

   TOC:
   a. Common Styles
   b. Header Styles
   c. Intro Section
   d. Services
   e. Postfolio
   f. Journal
   g. About
   h. Map
   i. Contact
   j. Blog Post
   k. Blog Entries
   l. Footer Styles
   m. Media Queries

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


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

/* a. Common Styles

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



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

/* i. Contact

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

#contact {
   padding-top: 108px;
   padding-bottom: 120px;
   color: #707B89;
}


#contact .section-head { margin-bottom: 42px; }
#contact .section-head h2 { color: #ea6000; }
#contact .section-head p.desc,
#contact .intro { color: #57606B; }
#contact p {  }

/* contact form */
#contact form { margin-bottom: 30px; }

#contact label {
   font: 15px/24px opensans-semibold, sans-serif;
   margin: 12px 0;
   color: #57606B;
	display: inline-block;
	float: left;
   width: 22%;
}
#contact input,
#contact textarea,
#contact select {
   padding: 18px 20px;
	color: #555;
	background: #eee;
	margin-bottom: 42px;
	border: 0;
	outline: none;
   font-size: 15px;
   line-height: 24px;
   width: 66%;
}
#contact input:focus,
#contact textarea:focus,
#contact select:focus {
	color: #fff;
	background-color: #ea6000;
}
#contact button.submit {
	font: 18px/30px montserrat-bold, sans-serif;
	text-transform: uppercase;
	letter-spacing: 3px;
	color:#fff;
	background: #ea6000;
   padding: 18px 30px;
	border: none;
   cursor: pointer;
   height: auto;
   display: inline-block;

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;

   margin-left: 22%;
}
#contact button.submit:hover {
	color: #25292D;
	background: #fff;
}
#contact span.required {
	color: #ea6000;
	font-size: 13px;
}

#message-warning, #message-success {
   display: none;
	background: #fff;
	padding: 24px 24px;
	margin-bottom: 36px;
   width: 100%;
   font-weight:bold
}
#message-warning { color: #D72828; }
#message-success { color: #ea6000; }

#message-warning i,
#message-success i {
   margin-right: 10px;
}

#image-loader {
   display: none;
   position: relative;
   left: 18px;
   top: 12px;
}

/* contact sidebar */
#contact aside h3 {
   font: 21px/30px montserrat-bold, sans-serif;
   margin-bottom: 18px;
   color: #ea6000;
}


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

/* j. Blog Post

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

.post {
   background: #f5f5f5 url(../images/patterns/grey.png);
   padding-top: 120px;
   padding-bottom: 90px;
}
.post .entry-header {
   position: relative;
   width: 100%;
}
.post .entry-header h1 {
   font: 45px/60px montserrat-regular, sans-serif;
   color: #313131;
   width: 83.33333%;
   padding-right: 12%;
   float: right;
}
.post .post-meta {
   float: left;
   text-align: right;
   width: 16.66667%;
   color: #bec0c1;
   padding-right: 36px;
   font: 14px/24px opensans-regular, sans-serif;
   margin: 6px 0 6px 0;
}
.post .post-meta a,
.post .post-meta a:visited { color: #B9BBBC; }
.post .post-meta a:hover,
.post .post-meta a:focus { color: #ea6000; }

.post .post-meta .date {
   margin-bottom: 18px;
   display: block;
}
.post .post-meta .date:before,
.post .post-meta .categories:before {
   display: block;
   font: 14px/24px opensans-bold, sans-serif;
   color: #313131;
   text-align: right;
}

.post .post-meta .date:before { content: "Published"; }
.post .post-meta .categories:before { content: "Categories"; }
.post .post-meta .categories a { display: block; }

/* hide sep */
.post .post-meta .categories .sep { display: none; }

/* post image */
.post .post-image {
  margin: 24px 0 36px 0;
  width: 100%;
}

/* post content */
.post .post-content {
   margin-bottom: 24px;
   width: 75%;
}

/* tags */
.post .post-content .tags {
  margin-top: 18px;
  font-family: opensans-light, sans-serif;
}
.post .post-content .tags a { font-family: opensans-bold, sans-serif; }

/* bio */
.post .bio {
   margin-top: 48px;
   padding-top: 29px;
   border-top: 1px solid #E0E0E0;
}
.post .bio .gravatar {
   width: 16.66667%;
   float: left;
   width: 72px;
   height: 72px;
}
.post .bio .gravatar img {
   margin-top: 12px;

   -moz-border-radius: 100% 100% 100% 100%;
	-webkit-border-radius: 100% 100% 100% 100%;
	-khtml-border-radius: 100% 100% 100% 100%;
	border-radius: 100% 100% 100% 100%;
}
.post .bio .about {
   width: 83.33333%;
   float: right;
}
.post .bio .about h5 {
   font: 16px/30px opensans-bold, sans-serif;
   margin-bottom: 6px;
}

/* post-nav */
.post .post-nav {
   margin: 24px 0;
   padding: 30px 0 0 0;
   border-top: 1px solid #E0E0E0;
   font: 16px/30px opensans-light, sans-serif;
}
.post .post-nav li {
   display: inline-block;
   margin: 0;
   padding: 0;
   width: 49%;
   line-height: 30px;
}
.post .post-nav li a { color: #a3a3a3; }
.post .post-nav li a:hover { color: #333; }
.post .post-nav li strong {
   font: 15px/30px opensans-bold, sans-serif;
   text-transform: uppercase;
   color: #ea6000;
   letter-spacing: 1px;
   display: block;
}
.post .post-nav li.next {
   float: right;
   text-align: right;
}
.post .post-nav li.prev {
   float: left;
   text-align: left;
}

/* Comments
/* ------------------------------------------------------------------ */
#comments {
   background: #E6E8EB;
   padding-bottom: 90px;
   padding-top: 101px;
   border-top: 1px solid #E0E3E6;
}
#comments h3 {
   font: 20px/30px opensans-bold, sans-serif;
   margin-bottom: 6px;
   margin-left: 16.66667%;
   color: #313131;
}

/* Comments List */
ol.commentlist {
   border-top: 1px solid #D5D9DC;
	margin: 29px 0 54px 0;
	padding: 0;
   width: 75%;
   margin-left: 16.66667%;
}
.commentlist > li {
   position: relative;
	list-style: none;
	margin: 0;
	padding: 18px 0 17px 0;
	border-bottom: 1px solid #D5D9DC;
}
.commentlist  li .avatar {
   position: absolute;
   left: -40px;
   display: block;

   height: 50px;
   width: 50px;
}
.commentlist li .avatar img {
   margin-top: 6px;
   height: 50px;
   width: 50px;

   -moz-border-radius: 100% 100% 100% 100%;
	-webkit-border-radius: 100% 100% 100% 100%;
	-khtml-border-radius: 100% 100% 100% 100%;
	border-radius: 100% 100% 100% 100%;
}
.commentlist li .comment-info cite {
   font: 15px/30px opensans-bold, sans-serif;
   color: #454545;
}
.commentlist li .comment-info .comment-meta {
   font-size: 12px;
   line-height: 24px;
   display: block;
}
.commentlist li .comment-info .comment-meta .reply {
   font-family: opensans-semibold, sans-serif;
}
.commentlist li .comment-info .comment-meta .sep {
   margin: 0 5px;
   color: #AEB6B7;
}
.commentlist li .comment-text {
	clear: both;
	margin: 24px 0 0 0;
   padding: 0;
   line-height: 24px;
}

/* children */
.commentlist li ul.children {
   margin: 0;
   padding: 18px 0 0 0;
}
.commentlist li ul.children li {
   padding-left:  5% ;
   padding-top: 17px;
   border-top: 1px solid #D5D9DC;
}


/* comment form */
#comments form {
   margin-top: 30px;
   margin-left: 16.66667%;
}
#comments form label {
   font: 14px/24px opensans-bold, sans-serif;
	margin: 12px 0;
   color: #3d4145;
}
#comments form input,
#comments form textarea,
#comments form select {
   padding: 18px 18px;
	color: #3d4145;
	background: #CFD4D8;
	margin-bottom: 24px;
	border: 0;
	outline: none;
   font-size: 15px;
   line-height: 24px;
   width: 60%;
}
#comments form input:focus,
#comments form textarea:focus,
#comments form select:focus {
	color: #fff;
	background-color: #3d4145;
}
#comments form button.submit {
	font: 18px/30px montserrat-bold, sans-serif;
	text-transform: uppercase;
	letter-spacing: 3px;
	color:#fff;
	background: #ea6000;
   padding: 18px 24px;
	border: none;
   cursor: pointer;
   height: auto;
   display: block;
   margin-top: 36px;

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
}
#comments form button.submit:hover { background: #3d4145; }
#comments form span.required {
	color: #ea6000;
	font-size: 13px;
}

/* journal bottom nav */
.journal-bottom-nav {
   margin-top: 36px;
   margin-left: 16.66667%;
   padding-top: 5px;
   border-top: 1px solid #D1D6DB;
}
.bottom-nav {
    margin: 0;
    padding: 12px 0;
    font: 14px/36px opensans-bold, sans-serif;
 }
.bottom-nav li {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 24px;
}
.bottom-nav li i { margin-left: 5px; }
.bottom-nav li a:hover { color: #3d4145; }
.bottom-nav .sep {
   font: 16px/36px opensans-light, sans-serif;
   margin: 0 6px;
   color: #C0C7CE;
}


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

/* k. Blog Entries

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


#blog-entries {
   background: #f5f5f5 url(../images/patterns/grey.png);
   padding-bottom: 48px;
}
#blog-entries .post {
   padding-bottom: 53px;
   border-bottom: 1px solid #E0E0E0;
}
#blog-entries .post .entry-header h1 a,
#blog-entries .post .entry-header h1 a:visited { color: #313131; }
#blog-entries .post .entry-header h1 a:hover,
#blog-entries .post .entry-header h1 a:focus { color: #ea6000; }

#blog-entries .post .post-content p {
  font: 20px/36px opensans-light, sans-serif;
}

/* more link */
#blog-entries .post-content a.more-link {
   font: 14px/30px opensans-bold, sans-serif;
   margin-top: 18px;
   padding: 6px 18px;
   background: #838A91;
   color: #fff;
   display: inline-block;

   -webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;

   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   -khtml-border-radius: 2px;
	border-radius: 2px;
}
#blog-entries .post-content a.more-link:hover { background: #ea6000; }
#blog-entries .post-content a.more-link i { margin-left: 10px; }

/* Pagination */
.pagination { margin: 36px auto 12px auto; }
.pagination ul li {
   display: inline-block;
   margin: 0;
   padding: 0;
}

/* bottom-block */
#bottom-block {
   background: #E6E8EB;
   padding-top: 24px;
   padding-bottom: 30px;
   border-top: 1px solid #E0E0E0;
}
#bottom-block .blog-categories {
   font: 13px/30px opensans-semibold, sans-serif;
   margin: 0;
   padding: 0;
}
#bottom-block .blog-categories li {
   display: inline;
   margin-right: 15px;
}
#bottom-block .blog-categories li.current a { color: #ea6000; }
#bottom-block .blog-categories a { color: #A0A6AB; }
#bottom-block .blog-categories a:hover { color: #5B6167; }

#bottom-block .back-to-top { text-align: right; }
#bottom-block .back-to-top a i { margin-left: 6px; }
#bottom-block .back-to-top a {
   font: 14px/30px opensans-bold, sans-serif;
   color: #ea6000;
}


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

/* l. footer

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


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

/* m. Media Queries

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


/* small screens
--------------------------------------------------------------------- */
@media only screen and (max-width: 836px) {

   /* adjust sections padding top */
   /* intro section
   -------------------------------------------------------------------- */

   /* contact section
   ----------------------------------------------------------------------- */
   #contact label { width: 25%; }
   #contact button.submit { margin-left: 25%; }
   #contact input,
	#contact textarea,
	#contact select { width: 70%; }
   #message-warning, #message-success { width: 95%; }

   /* left clearing */
   .first { clear: none; }
   .m-first { clear: left; }

}