@font-face {
font-family:'Patua One';
src:url(//thestreetsbarbershop.com/wp-content/themes/TheStreetsBarbershop_WPTheme/fonts/PatuaOne-Regular.woff2) format("woff2"),url(//thestreetsbarbershop.com/wp-content/themes/TheStreetsBarbershop_WPTheme/fonts/PatuaOne-Regular.woff) format("woff");
font-weight:400;
font-style:normal
}
@font-face {
font-family: "FranklinGothic-Medium";
src: url(https://thestreetsbarbershop.com/wp-content/themes/TheStreetsBarbershop_WPTheme/fonts/FranklinGothicMedium.woff) format("woff"), url(https://thestreetsbarbershop.com/wp-content/themes/TheStreetsBarbershop_WPTheme/fonts/FranklinGothicMedium.woff2) format("woff2"); font-weight: normal;
font-style: normal;
}
* {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
outline:none;
}
html {
scroll-behavior: smooth;
}
html,
body {
margin:0;
padding:0;
}
body {
font-family: 'FranklinGothic-Medium', sans-serif;
font-weight:300;
font-size:20px;
line-height:185%;
}
.content-area {
width:100%;
max-width:1200px;
padding:30px;
position:relative;
margin:0 auto;
text-align:center;
}
a {
text-decoration:none;
color:inherit;
transition:all .2s ease;
-moz-transition:all .2s ease;
-webkit-transition:all .2s ease;
-o-transition:all .2s ease;
}
a:hover {
color:#fff;
}
ul {
margin:0;
padding:0;
list-style-type:none;
}
#site-details {
background-color:#000;
color:#fff;
font-size:15px;
text-align:center;
}
#legal-links ul li {
display:inline-block;
border-right:1px solid #fff;
padding:0px 10px;
height:20px;
vertical-align:middle;
line-height:20px;
}
#legal-links ul li:nth-child(2) {
border-right:none;
}
#site-author a {
font-family:"Patua One", cursive;
font-size:16px;
}
#site-author a:hover {
color:#6abc9f;
}
@media all and (max-width:480px) {
#site-details {
line-height:150%;
}
#legal-links ul {
margin-bottom:20px;
}
#legal-links ul li {
display:block;
margin:10px auto;		
height:auto;
border:none;
}
} #home-bg {
width:100%;
height:100%;
display:block;
position:fixed;
background-image:url(//thestreetsbarbershop.com/wp-content/themes/TheStreetsBarbershop_WPTheme/images/home-bg.jpg);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
text-align:center;
}
#div-header {
padding:20px 60px;
position:relative;
}
#tsb-logo {
width:59px;
height:76px;
display:inline-block;
background-image:url(//thestreetsbarbershop.com/wp-content/themes/TheStreetsBarbershop_WPTheme/images/tsb-logo.png);
background-size:100% 100%;
background-repeat:no-repeat;
background-position:center center;
}
#tsb-logo a {
width:100%;
height:100%;
display:block;
}
#primary-nav {
position: absolute;
right:60px;
top:40px;
color:#fff;
}
#primary-nav ul li {
text-transform:uppercase;
display:inline-block;
margin-left:40px;
}
#primary-nav ul li a {
padding:5px 0;
border:none;
transition:border .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
}
#primary-nav ul li a:hover {
border-bottom:2px solid #fff;
}
#home-bg-logo {
width:100%;
max-width:415px; display:block;
margin: 50px auto;
}
.button {
display:inline-block;
color:#fff;
border: 5px solid #fff;
background-color:transparent;
text-align:center;
font-size:30px;
margin:10px auto 40px;
}
.button a {
width:100%;
height:100%;
display:block;
padding:20px 50px;
}
.button a:hover {
color:#222;
background-color:#fff;
}
@media all and (max-width:720px) {
#home-bg-logo {
max-width:300px;
margin: 25px auto;
}
.button {
font-size:24px;
}
html,
body {
min-height:100%;
}
}
p, blockquote { font-weight: 400;
font-size:22px;
}
header {
padding:20px 60px;
position:relative;
background-color:#000;
}
hr {
width:80px;
height:5px;
border:none;
background-color:#000;
margin:-10px auto 30px;
}
blockquote { font-weight:600;
}
footer {
background-color:#000;
color:#fff;
text-align:center;
font-size:15px;
padding:15px;
}
.author {
font-family:"Patua One", cursive;
font-size:17px;
}
.author:hover {
color:#6abc9f;
}
h3 {
margin:30px 0 10px;
} .responsive-menu {
display:none;
background-color:rgba(0,0,0,.8);
text-align:left;
width:100%;
max-width:260px;
height:100%;
position:fixed;
top:0;
right:-260px;
z-index:9999;
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
}
.responsive-menu span {
font-size:26px;
color:rgba(0,0,0,.25);
text-transform:uppercase;
letter-spacing:2px;
font-weight:400;
display:block;
background-color:#fff;
padding:30px 10px 30px 30px;
}
.responsive-menu ul {
margin-top:10px;
}
.responsive-menu ul li {
margin:5px 0;
padding:0;
text-indent:20px;
}
.responsive-menu ul li a {
width:100%;
height:100%;
display:block;
padding:8px 15px;
font-size:19px;
color:#fff;
font-weight:400;
}
.responsive-menu ul li a:hover {
background-color:rgba(255,255,255,0.15);
}
.menu-icon {
width: 50px;
height: 46px;
position: absolute;
top:40px;
right:55px;
display:none;
cursor:pointer;
z-index:9999;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
.menu-icon:hover span {
background-color:#666;
}
.menu-icon span {
display: block;
position: absolute;
height: 7px;
width: 100%;
background: #fff;
border-radius: 7px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.menu-icon span:nth-child(1) {
top: 0px;
}
.menu-icon span:nth-child(2) {
top: 14px;
}
.menu-icon span:nth-child(3) {
top: 28px;
}
.menu-icon.open span:nth-child(1) {
top: 16px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.menu-icon.open span:nth-child(2) {
opacity: 0;
}
.menu-icon.open span:nth-child(3) {
top: 16px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#menuToggle {
display:none;
}
#menuToggle:checked ~ .responsive-menu {
right:0;
top:0;
}
#menuToggle:checked ~ .menu-icon {
position:fixed;
right:270px;
top:10px;
}
#menuToggle:checked ~ .menu-icon span {
background-color:#fff;
}
.dimmer {
width:100%;
height:100%;
display:none;
background-color:rgba(255,255,255,1);
position:fixed;
z-index:9998;
transition-delay:all 2s;
transition:all .5s ease-in-out;
}
@media all and (max-width:1096px) {
nav#primary-nav {
display:none;
}
.menu-icon {
display:block;
}
.responsive-menu {
display:block;
}
#menuToggle:checked ~ .dimmer {
display:block;
background-color:rgba(0,0,0,.7);
}
}
.tin-man-quote:before,
.tin-man-quote:after {
content:'"';
font-size:30px;
}
#social-media-container {
line-height:30px;
vertical-align:middle;
margin-bottom:10px;
}
.social-media-icon {
width:30px;
height:30px;
display:inline-block;
margin:0 3px -7px;
background-size:100%;
background-repeat:no-repeat;
background-position:center center;
}
.facebook {
background-image:url(//thestreetsbarbershop.com/wp-content/themes/TheStreetsBarbershop_WPTheme/images/tinman-facebook.png);
}
.instagram {
background-image:url(//thestreetsbarbershop.com/wp-content/themes/TheStreetsBarbershop_WPTheme/images/tinman-instagram.png);
}
h1 {
border-bottom:5px solid #000;
width:auto;
display:inline-block;
padding-bottom:13px;
}
h1,
h2,
h3,
h4 {
text-transform:uppercase;
}
p a:hover {
color:#666;	
}
#social-media-header-container {
display:inline-block;
position:absolute;
top:41px;
left:140px;
}
.social-media-header {
width:36px;
height:36px;
display:inline-block;
background-size:100% 100%;
background-position:center center;
background-repeat:no-repeat;
margin-right:3px;
}
.instagram-header {
background-image: url(//thestreetsbarbershop.com/wp-content/themes/TheStreetsBarbershop_WPTheme/images/header-instagram.png);
}
.facebook-header {
background-image: url(//thestreetsbarbershop.com/wp-content/themes/TheStreetsBarbershop_WPTheme/images/header-facebook.png);
}
.instagram-black {
background-image: url(//thestreetsbarbershop.com/wp-content/themes/TheStreetsBarbershop_WPTheme/images/instagram-black.png);
}
.facebook-black {
background-image: url(//thestreetsbarbershop.com/wp-content/themes/TheStreetsBarbershop_WPTheme/images/facebook-black.png);
}
.social-media-header a {
width:100%;
height:100%;
display:block;
}
#social-media-contact-container {
display:block;
}
#social-media-contact-container span {
margin-top:-26px;
display:inline-block;
height:36px;
line-height:36px;
vertical-align:middle;
}