/* 	The Barbershop Responsive Portfolio HTML Template
    Document   : layout.css
    Created on : April, 2013
    Author     : 25Rows - hello@25rows.com
    URI: http://25rows.com
	Version: 1.0
	License: General Public License
	License URI: http://www.gnu.org/licenses/gpl.html
    Description: Main style sheet for the The Barbershop Theme
------------------------------------------------------------------------------------------------------------------
All sections are marked to make it easier to navigate and change the css.

1. Basic Element Styles 
2. Header
3. Feature Styles (Slider)
4. Services Styling
5. Testimonials Styling
6. Photobooth/Portfolio Styling
7. Twitter Feed Styling
8. Meet the Barbers
9. About Styling
10. Ghost Div(Devices)
11. Blog Section Styling
12. Contact section styling
13. Footer Styling
14. Button Styling

*/
/* *** 1. Basic Element Styles *** */
body {
  font-family: 'PT Sans', Helvetica, sans-serif;
  font-size: 14px;
  color: #666;
  margin: 0;
  padding: 0;
}
/* *** Add Market Deco Font  *** */
@font-face {
  font-family: "Market_Deco.ttf";
  src: url("Market_Deco.ttf") format("truetype");
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
a:link {
  text-decoration: none;
  color: #3a3a3a;
}
img {
  max-width: 100% !important;
  vertical-align: middle;
  height: auto;
}
.ra {
  text-align: right;
}
a:active {
  text-decoration: none;
  color: #3a3a3a;
}
a:visited {
  text-decoration: none;
  color: #3a3a3a;
}
a:hover {
  text-decoration: none;
  color: #3a3a3a;
}
/* Heading Styles */
h1.heading {
  font-size: 48px;
  color: #333;
  font-weight: normal;
  text-align: center;
  margin: 0 0 20px 0;
  padding: 0 0 32px 0;
  background: url("../img/heading-splitter.png") 50% 78px no-repeat;
}
h1.heading span {
  font-weight: bold;
}
h1.heading-single {
  font-size: 38px;
  color: #333;
  font-weight: normal;
  text-align: center;
  margin: 20px 0 20px 0;
  padding: 10px 0 37px 0;
  background: url("../img/heading-splitter.png") 50% 78px no-repeat;
}
h1.heading-single span {
  font-weight: bold;
}
.lead {
  color: #888;
  font-size: 24px;
}
/* Padding for anchor Links */
#service,
#photobooth,
#barbers,
#blog,
#hello {
  padding: 20px 0;
}
/* *** Section Styles *** */
section {
  overflow: hidden;
}
.homer {
  position: fixed;
  bottom: 10px;
  right: 10px;
}
/* *** 2. Header *** */
.xshow-bg {
  background: #f2f1e6;
}
header {
  background: url("../img/knocker.png") no-repeat 50% 0;
}
header nav.main {
  font-family: 'Market_Deco.ttf', sans-serif;
  font-size: 18px;
  overflow: hidden;
}
header nav.main ul {
  position: relative;
  margin: 0 auto;
  max-width: 970px;
  overflow: hidden;
}
header nav.main ul li {
  float: left;
  margin: 80px 0;
  border-top: 1px solid #c1bfbf;
  border-bottom: 1px solid #c1bfbf;
  padding: 10px 22px;
}
header nav.main ul li.ign {
  padding: 10px 22px;
  border: none;
  margin: 0;
}
.secondary.two ul {
  background: #333;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  width: 960px;
  padding: 5px;
  text-transform: capitalize;
}
.secondary.two ul li {
  float: left !important;
  margin: 0 4px;
  display: block;
  text-transform: capitalize;
}
.secondary.two ul li a:link {
  color: #fff;
  background: #333;
  padding: 5px;
  text-transform: capitalize;
}
.secondary.two ul li a:active {
  color: #fff;
  background: #333;
  padding: 5px;
}
.secondary.two ul li a:hover {
  color: #fff;
  background: #444;
  padding: 5px;
}
.secondary.two ul li a:visited {
  color: #fff;
  background: #333;
  padding: 5px;
}
.secondary.two ul li.page_item {
  float: left !important;
  margin: 0 4px;
  display: block;
}
.secondary.two ul li.page_item a:link {
  color: #fff;
  background: #333;
  padding: 5px;
}
ul.sub-menu {
  display: none;
}
ul.sub-menu:hover {
  display: block;
}
/* *** 3. Feature Styles (Slider) *** */
.feature {
  font-family: "Market_Deco.ttf";
  background: url("../img/feature-bg.png") no-repeat 50% 0;
  min-height: 566px;
  color: #fff;
  font-size: 12px;
  padding: 15px;
  margin-bottom: 56px;
}
.feature p {
  margin: 0;
}
.feature p.tel {
  text-align: right;
}
.feature .feat-info {
  border-bottom: 1px solid #fff;
  padding-bottom: 10px;
}
.feature .slider {
  position: relative;
  margin: 0 auto;
  width: 580px;
}
/* *** 4. Services Styling *** */
.services {
  text-align: center;
}
.services p {
  padding: 0;
}
.services .lead {
  text-align: center;
  position: relative;
  margin: 0 auto 80px auto;
  width: 820px;
}
.service-icons {
  overflow: hidden;
  margin-bottom: 120px;
}
.service-icons .item {
  text-align: center;
  margin-right: 30px !important;
}
.service-icons .item img {
  margin: 0 0 23px 0;
}
.service-icons .item h2 {
  margin: 0 0 13px 0;
  color: #333;
  font-size: 30px;
}
.service-icons .item p {
  margin: 0;
  font-size: 18px;
  color: #888;
}
/* *** 5. Testimonials Styling *** */
.testimonials {
  background: url("../img/testimonials-bg.png") 0 0 no-repeat;
  margin: 0 0 47px 0;
  padding: 22px 0;
  color: #fff;
  font-size: 18px;
}
.testimonials ul.testi {
  overflow: hidden;
}
.testimonials ul.testi li {
  overflow: hidden;
}
.testimonials h2 {
  text-align: center;
  color: #fff;
  font-size: 36px;
  border-bottom: 1px solid #fff;
  margin: 0;
  padding: 0 0 20px 0;
}
.testimonials img {
  float: left;
  margin: 0 40px 0 0;
  height: auto;
}
.testimonials p.test {
  float: left;
  width: 770px;
  margin: 0;
  padding: 0;
}
.testimonials strong {
  font-weight: normal;
  float: right;
  display: block;
  margin: 0;
  padding: 0;
}
.testimonials span {
  color: #74a0bf;
  font-weight: bold;
}
/* *** 6. Photobooth/Portfolio Styling *** */
.photobooth {
  margin-bottom: 56px;
}
.photobooth .intro {
  margin: 0 0 50px 0;
}
.photobooth .intro p {
  margin: 0;
  padding: 0;
}
.photobooth .eleven strong {
  color: #333;
  font-size: 24px;
  font-style: italic;
  margin-bottom: 13px;
  display: block;
}
.photobooth .eleven p {
  color: #888;
  font-size: 18px;
}
.photobooth .sixteen p {
  color: #888;
  font-size: 18px;
}
.photobooth .five {
  font-size: 24px;
  color: #888;
  margin-top: 0;
  padding-top: 0;
  line-height: 31px;
}
.photobooth .filter-gallery {
  position: relative;
  width: 483px;
  margin: 0 auto 30px auto;
  text-align: center;
}
.photobooth .filter-gallery ul {
  overflow: hidden;
  border-top: 1px solid #c1bfbf;
  border-bottom: 1px solid #c1bfbf;
}
.photobooth .filter-gallery ul li {
  float: left;
  padding: 15px;
}
.photobooth .filter-gallery ul li.current {
  font-weight: bold;
}
.photobooth .gallery ul li {
  background: #000;
  float: left;
  cursor: pointer;
  position: relative;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  background: url("../img/camera-icon.png") 50% 0 no-repeat #000000;
}
.photobooth .gallery ul li p {
  color: #111;
  background: url("../img/heart-icon.png") 50% 0 no-repeat #ffffff;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  width: 313px;
  display: none;
  text-align: center;
  bottom: 0;
  opacity: 0.8;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}
.photobooth .gallery ul li p span {
  margin-top: 20px;
  display: block;
  font-weight: bold;
}
.photobooth .gallery ul li strong {
  color: #fff;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  width: 313px;
  display: none;
  text-align: center;
  bottom: 0;
  opacity: 0.8;
}
.photobooth .gallery ul li img {
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}
.photobooth .gallery ul li:hover {
  background: #000;
  float: left;
  background: url("../img/camera-icon.png") 50% 20% no-repeat #000000;
}
.photobooth .gallery ul li:hover img {
  opacity: 0.3;
}
.photobooth .gallery ul li:hover strong {
  color: #fff;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  width: 313px;
  display: block;
  text-align: center;
  bottom: 50%;
  opacity: 0.8;
}
.photobooth .gallery ul li:hover p {
  color: #111;
  background: url("../img/heart-icon.png") 50% 10px no-repeat #ffffff;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  width: 313px;
  display: block;
  text-align: center;
  bottom: 0;
  opacity: 0.8;
}
.photobooth .gallery ul li:hover p span {
  margin-top: 20px;
  display: block;
}
.photobooth .eleven p {
  color: #888;
  font-size: 18px;
}
.photobooth .eleven p,
.photobooth .sixteen p {
  color: #888;
  font-size: 18px;
}
/* *** 7. Twitter Feed Styling *** */
#tweeter {
  margin: 0 0 85px 0;
  height: 148px;
  background: url("../img/barber-board.png") 0 0 no-repeat;
  color: #666;
  font-size: 20px;
  min-width: 600px;
}
#tweeter #twitter {
  padding: 34px 0 0 210px;
}
#tweeter p {
  margin-top: 35%;
}
/* *** 8. Meet the Barbers *** */
.barbers {
  text-align: center;
  margin-bottom: 38px;
}
.barbers p.intro {
  font-size: 24px;
  color: #888;
  width: 820px;
  position: relative;
  margin: 0 auto 70px auto;
}
.barbers ul {
  overflow: hidden;
}
.barbers ul li {
  margin-right: 0 30px 0 0 !important;
}
.barbers ul li img {
  margin-bottom: 14px;
}
.barbers ul li h2 {
  font-size: 24px;
  color: #333;
  margin: 0 0 5px 0;
}
.barbers ul li strong {
  color: #666;
  font-size: 18px;
  margin-bottom: 9px;
  display: block;
}
.barbers ul li p {
  margin: 0 0 10px 0;
  font-size: 14px;
}
.barbers ul li ul.social2 {
  margin-left: 70px;
}
.barbers ul li ul.social2 li {
  float: left;
  margin: 0 10px;
}
.barbers ul li ul.social2 li img:hover {
  opacity: 0.7;
}
.barbers ul li.columns.five {
  width: 295px;
  margin: 0 17px 0 0;
}
/* *** 9. About Styling *** */
.about {
  margin-bottom: 100px;
}
.about .razor {
  background: url("../img/razor-splitter.png") 0 0 no-repeat;
  height: 65px;
  margin-bottom: 70px;
}
.about .text {
  border-right: 1px solid #ddd;
  padding-right: 34px;
  margin-right: 46px !important;
}
.about .text .short {
  font-size: 24px;
  color: #666;
  margin: 0 0 16px 0;
}
.about .text .long {
  font-size: 18px;
  color: #666;
  margin-top: 0;
}
.about .skills ul li em {
  font-weight: bold;
  font-style: normal;
  color: #666;
  font-size: 16px;
}
.about .skills ul li p {
  position: relative;
  background: #f1f0f0;
  height: 20px;
  margin: 4px 0 17px 0;
}
.about .skills ul li.one p span {
  background: #eaac9e;
  height: 5px;
  padding: 7px 0;
  width: 77%;
  display: block;
}
.about .skills ul li.one p strong {
  position: absolute;
  right: 10px;
  width: 47px;
  border-radius: 50px;
  background: #474646;
  text-align: center;
  color: #fff;
}
.about .skills ul li.two p span {
  background: #eaac9e;
  height: 5px;
  padding: 7px 0;
  width: 67%;
  display: block;
}
.about .skills ul li.two p strong {
  position: absolute;
  right: 20px;
  width: 47px;
  border-radius: 50px;
  background: #474646;
  text-align: center;
  color: #fff;
}
.about .skills ul li.three p span {
  background: #eaac9e;
  height: 5px;
  padding: 7px 0;
  width: 84%;
  display: block;
}
.about .skills ul li.three p strong {
  position: absolute;
  right: 5px;
  width: 47px;
  border-radius: 50px;
  background: #474646;
  text-align: center;
  color: #fff;
}
.about .skills ul li.four p span {
  background: #eaac9e;
  height: 5px;
  padding: 7px 0;
  width: 65%;
  display: block;
}
.about .skills ul li.four p strong {
  position: absolute;
  right: 30px;
  width: 47px;
  border-radius: 50px;
  background: #474646;
  text-align: center;
  color: #fff;
}
.about .skills ul li.five p span {
  background: #eaac9e;
  height: 5px;
  padding: 7px 0;
  width: 80%;
  display: block;
}
.about .skills ul li.five p strong {
  position: absolute;
  right: 15px;
  width: 47px;
  border-radius: 50px;
  background: #474646;
  text-align: center;
  color: #fff;
}
.about .skills ul li.six p span {
  background: #eaac9e;
  height: 5px;
  padding: 7px 0;
  width: 80%;
  display: block;
}
.about .skills ul li.six p strong {
  position: absolute;
  right: 15px;
  width: 47px;
  border-radius: 50px;
  background: #474646;
  text-align: center;
  color: #fff;
}
.about .skills ul li.seven p span {
  background: #eaac9e;
  height: 5px;
  padding: 7px 0;
  width: 80%;
  display: block;
}
.about .skills ul li.seven p strong {
  position: absolute;
  right: 15px;
  width: 47px;
  border-radius: 50px;
  background: #474646;
  text-align: center;
  color: #fff;
}
.about .skills ul span:hover,
.about .skills ul strong:hover,
.about .skills ul span:hover {
  opacity: 0.7;
}
/* *** 10. Ghost Div(Devices) *** */
.ghost {
  background: #242424;
  padding: 30px 0;
  text-align: center;
  margin-bottom: 86px;
}
.ghost h2 {
  color: #fff;
  font-size: 30px;
  margin: 0 0 23px 0;
  font-weight: normal;
}
.ghost h2 span {
  color: #eaac9e;
}
.ghost img {
  position: relative;
  margin: 0 auto;
  width: 706px;
}
/* *** 11. Blog Section Styling *** */
.sin-post {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
  margin-bottom: 30px;
}
#commentform input#submit {
  border: none;
  padding: 5px 10px;
  background: #333;
  border: 1px solid #222;
  color: #fff;
  font-size: 12px;
}
p.comment-form-comment label {
  display: block;
}
p.form-allowed-tags {
  font-size: 11px;
  width: 400px;
}
.post-info {
  font-size: 12px;
  color: #333;
}
.postmetadata {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
ul#catg {
  font-size: 20px;
  font-weight: bold;
}
ul#catg ul li {
  font-size: 14px;
  font-weight: normal;
}
.blog {
  margin-bottom: 45px;
}
.blog ul#blogger {
  text-align: center;
}
.blog ul#blogger li.imag {
  position: relative;
  float: left;
  margin: 19px;
  height: 261px;
}
.blog ul#blogger li.imag .type {
  display: none;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}
.blog ul#blogger li.imag img.pre {
  background: #000;
  margin: 0 0 8px 0;
  cursor: pointer;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}
.blog ul#blogger li.imag img:hover {
  margin: 0 0 8px 0;
  opacity: 0.5;
}
.blog ul#blogger li.imag h2 {
  color: #333;
  font-size: 24px;
  margin: 0 0 2px 0;
}
.blog ul#blogger li.imag p.date {
  color: #888;
  font-size: 14px;
  margin: 0 0 10px 0;
  font-weight: bold;
}
.blog ul#blogger li:hover .type {
  background: #000;
  width: 28px;
  height: 40px;
  border-radius: 150px;
  position: absolute;
  left: 40%;
  top: 15%;
  display: block;
  z-index: 1000001;
  padding: 15px 15px 3px 15px;
  opacity: 0.8;
  cursor: pointer;
}
/* *** 12. Contact section styling *** */
.cover {
  background: #f9f9f9;
}
.hello .lead {
  text-align: center;
  position: relative;
  margin: 0 auto 80px auto;
  width: 820px;
}
.hello .details {
  margin-bottom: 35px;
}
.hello .details h2 {
  margin: 0 0 15px 0;
  font-size: 24px;
  color: #333;
}
.hello .details p {
  font-size: 18px;
  color: #888;
  margin: 0 0 25px 0;
}
.hello .details h3 {
  margin: 0 0 15px 0;
  font-size: 24px;
  color: #333;
}
.hello .details ul {
  font-size: 18px;
  color: #888;
}
.hello .form input,
.hello .form textarea {
  font-size: 14px;
  color: #bc8e83;
  border: 1px solid #f5e1dc;
  background: #fff;
  padding: 10px;
  height: 20px;
  width: 95%;
  margin: 15px 0 0 0;
}
.hello .form textarea {
  height: 120px;
  margin: 15px 0 20px 0;
}
.hello .form button {
  float: right;
  line-height: 0;
}
.hello .form .error {
  color: #bc8e83;
}
.map {
  border: 10px solid #fff;
}
.map .gmnoprint {
  display: none;
  top: 150px !important;
}
.map iframe {
  border: none;
}
.razor2 {
  background: url("../img/razor-splitter.png") 0 0 no-repeat;
  height: 65px;
  margin-bottom: 35px;
}
/* *** 13. Footer Styling *** */
.footer {
  padding: 20px 0;
  background: #242424;
}
.footer p {
  margin: 0;
  padding: 0;
  color: #fff;
}
.footer .text {
  text-align: left;
}
.footer .text p {
  margin-top: 30px;
}
.footer .footer-logo {
  text-align: center;
}
.footer .footer-logo p {
  padding: 55px 0 0 0;
  background: url("../img/small-razor.png") 50% 10px no-repeat;
}
.footer .social-links ul {
  overflow: hidden;
  margin: 30px 0 0 135px;
}
.footer .social-links ul li {
  float: left;
  margin: 0 5px;
  width: 31px;
}
.footer .social-links ul li:hover {
  float: left;
  margin: 0 5px;
  width: 31px;
  opacity: 0.8;
}
/* Sidebar Styling */
.single-sidebar {
  font-family: "Market_Deco.ttf";
  background: url("../img/feature-bg.png") no-repeat 50% 0;
  min-height: 160px;
  color: #fff;
  font-size: 12px;
  padding: 15px;
  margin-bottom: 56px;
}
.single-sidebar h1 {
  color: red;
}
/* *** 14. Button Styling *** */
/* Default btn */
a.btn {
  color: #fff;
}
.btn {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  width: 100px;
  height: 43px;
  border: none;
  background: #eaac9e;
  border-bottom: 4px solid #cf978b;
  line-height: 43px;
  padding: 12px 23px;
}
.btn:hover {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  width: 100px;
  height: 43px;
  border: none;
  background: #cf978b;
  border-bottom: 4px solid #eaac9e;
}
/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
  margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}
.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}
.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}
.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}
a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}
a img.alignnone {
  margin: 5px 20px 20px 0;
}
a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}
a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%;
  /* Image does not overflow the content area */

  padding: 5px 3px 10px;
  text-align: center;
}
.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}
.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}
.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}
.sticky {
  color: #333;
}
.gallery-caption {
  color: #333;
}
.bypostauthor {
  color: #333;
}
.contact-success p {
  border: 1px solid #111;
  padding: 7px 5px;
  background: #333;
  border-radius: 3px;
  color: #fff;
  text-align: center;
}