/* 
	Author: Orqa Design
	Author URI: http://orqadesign.com/
	Description: 2017 Website for Frankie D.I.4.Y (Does it for you)
	Version: 1.0
	License: For use by Frankie D.I.4.Y (Does it for you) Only
 	*/

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }/* HTML5 display-role reset for older browsers */
@font-face { font-family: "museoslabw01-100regular"; src: url('/fonts/font-thin.woff2') format('woff2'), url('/fonts/font-thin.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: "museo_slab500"; src: url('/fonts/font-bold.woff2') format('woff2'), url('/fonts/font-bold.woff') format('woff'); font-weight: normal; font-style: normal; }
body { font-family: "museoslabw01-100regular", sans-serif; font-size: 16px; line-height: 30px; color: #3d3e40; background-color: #dbd9da; width: 100%; margin: 0px; padding: 0px; }
.inner { width: 80%; margin: auto; }
b { font-family: 'museo_slab500', sans-serif; }
.header { background-color: #5a5b5d; }
.bar { background-color: #3d3e40; display: inline-block; width: 100%; }
.left { float: left; }
.handyman { color: #dbd9da;
font-family: 'museo_slab500', sans-serif;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;}
.right { float: right; }
.call { color: #dbd9da; font-family: 'museo_slab500', sans-serif; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; }
.call .fa { color: #7f9051; }
.logo { padding-bottom: 30px; padding-top: 30px; }
.about { padding-top: 60px; padding-bottom: 60px; display: block; width: 100%; }
h1 { font-size: 19px; line-height: 30px; font-family: 'museo_slab500', sans-serif; text-transform: uppercase; margin-bottom: 20px; letter-spacing: 1px; }
a:hover { color: #7f9051; }
img.toolstop { float: right; margin-top: -200px; }
.services { font-family: 'museo_slab500', sans-serif; background-color: #7f9051; color: #fff; font-size: 18px; line-height: 30px; display: inline-block; width: 100%; padding-top: 50px; padding-bottom: 50px; }
.services h2 { font-size: 24px; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 2px; font-family: 'museo_slab500', sans-serif; }
.servicelist { width: calc(100% / 3); float: left; display: block; }
.team img { float: left;
width: 100%;}
.teamimg {width: 20%;}
.teamtext {float: left;
width: 70%;
margin-left: 2%;}
.team span { display: block; margin-left: 20px; width: 70%; float: left; margin-top: 10px; }
.team { padding-top: 80px; padding-bottom: 100px; display: inline-block; width: 100%; }
.quote { background-color: #5a5b5d; font-size: 18px; line-height: 30px; display: inline-block; width: 100%; color: #fff; padding-top: 80px; }
.quote .inner { width: 51%; }
.quotemark { color: #8b8a88; font-size: 150px; font-family: arial; display: block; float: left; height: 50px; font-style: italic; margin-right: 10px; }
.largequote { font-size: 22px; line-height: 30px; }
.quotewrapper { text-align: left; margin-top: -50px; float: left; margin-left: 20px; font-family: 'museo_slab500', sans-serif; }
.fullwidthimage img { width: 100%; height: auto; }
.fullwidthimage h2 { font-size: 36px; color: #fff; line-height: 36px; letter-spacing: 2px; font-family: 'museo_slab500', sans-serif; margin-top: -67px; margin-bottom: 20px; text-transform: uppercase; }
.fullwidthimage { margin-top: -15px; }
.skills { background-color: #7f9051; color: #fff; font-size: 16px; line-height: 36px; padding-top: 30px; padding-bottom: 30px; text-transform: uppercase; letter-spacing: 2px; font-family: 'museo_slab500', sans-serif; }
ul { list-style-type: none; }
li { width: 100%; display: block; margin-top: 10px; margin-bottom: 20px; font-family: 'museo_slab500', sans-serif; }
ul > li:before { content: ""; color: #fff; font: normal normal normal 14px/1 FontAwesome; padding-right: 20px; font-size: 24px; margin-bottom: 20px; display: block; float: left; margin-top: 5px; }
.action { font-size: 18px; line-height: 30px; text-align: center; padding-top: 40px; padding-bottom: 100px; }
.callbig { text-align: center; color: #7f9051; letter-spacing: 2px; font-size: 26px; font-family: 'museo_slab500', sans-serif; }
.footer { display: inline-block; width: 100%; padding-bottom: 40px; }
.tel { font-size: 30px; line-height: 30px; color: #5b5b5d; letter-spacing: 2px; }
.email a { font-family: 'museo_slab500', sans-serif; color: #5b5b5d; letter-spacing: 2px; font-size: 18px; text-decoration: none; }
.tel {margin-top: 10px;}
.tel .fa { color: #7f9051; }
.social { font-size: 18px; line-height: 30px; text-align: right; margin-top: -140px; width: 400px; }
.social .fa { color: #7f9051; font-size: 30px; margin-top: 10px; }
.copyright { font-family: 'museo_slab500', sans-serif; font-size: 10px; line-height: 12px; display: block; margin-top: 10px; }
.copyright a { text-decoration: none; color: #5b5b5d; }
.insurance { font-family: 'museo_slab500', sans-serif; background-color: #5b5b5d; font-size: 14px; letter-spacing: 2px; text-align: center; color: #fff; padding-top: 5px; padding-bottom: 5px; }
.insurance .fa { color: #7f9051; }

.servicelist ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

.servicelist ol li {display: list-item;}

img.toolsheader {margin-top: 30px;
position: absolute;
z-index: 100;
top: 0;
right: 0;
width: 70%;}

.logo-refs {text-align: center;
width: 300px;
margin: auto;}
.logo-refs img {margin: 10px;}

 @media only screen and (max-width:1726px) {
}
.quote .inner { width: 80%; }
}
 @media only screen and (max-width:1520px) {
h1 { width: 60%; }
img.toolstop { margin-top: -230px; }
.team span { width: 80%; }
}
 @media only screen and (max-width:1361px) {
.abouttext { width: 60%; display: block; }
img.toolstop { margin-top: -290px; }
h1 { width: 70%; }
.teamimg {width: 30%;}
.teamtext {float: left;
width: 60%;
margin-left: 5%;}

.social {width: 300px;}

}
@media only screen and (max-width:1166px) {
.fullwidthimage { width: 100%; overflow: hidden; }
.fullwidthimage img { width: 120%; height: auto; }
.abouttext { width: 70%; }
}
 @media only screen and (max-width:1100px) {
img.toolstop { margin-top: -320px; }
.quote .inner { width: 95%; }
.teamimg {width: 40%;}
.teamtext {float: left;
width: 50%;
margin-left: 8%;}
.social {width: 220px; line-height: 18px;}
}
@media only screen and (max-width:970px) {
.services { font-size: 15px; }
}
 @media only screen and (max-width:930px) {
.inner { width: 90%; }
.quote .inner { width: 90%; }
.quotemark { float: none; text-align: center; }
.quotewrapper { text-align: center; margin-top: -30px; float: none; margin-left: 0px; padding-bottom: 40px; }
.teamimg {width: 45%;}
.teamtext {float: left;
width:45%;
margin-left: 5%;}
}
 @media only screen and (max-width:767px) {
img.toolstop { margin-top: 0px; float: none; text-align: center; margin-top: 20px; }
.abouttext, h1, p { width: 100%; text-align: center; }
.servicelist { width: 100%; }
.team span { width: 100%; text-align: center; margin: 0px; margin-top: 20px; }
.team img { float: none; }
.fullwidthimage img { width: 150%; height: auto; }
ul > li::before { float: none; text-align: center; }
.skills { text-align: center; }
.fullwidthimage h2 { text-align: center; }
.footer .right { float: none; width: 100%; text-align: center; display: block; padding-bottom: 5px; }
.footer .left { float: none; width: 100%; text-align: center; display: block; padding-bottom: 30px; }
.services { font-size: 18px; }
.teamimg {width: 100%;}
.teamtext {width: 100%; margin-left: 0%;}
.social {margin-top: 0px; line-height: 30px;}
}
 @media only screen and (max-width:580px) {
.logo img { width: 100%; height: auto; }
.fullwidthimage img { width: 200%; }
.fullwidthimage h2 { margin-top: -100px; }
.skills {margin-top: -2px;}
}

 @media only screen and (max-width:450px) {
.bar .right { float: none; width: 100%; text-align: center; display: block; padding-bottom: 5px; }
.bar  .left { float: none; width: 100%; text-align: center; display: block; }
img.toolsheader {margin-top: 65px}
.logo {width: 90%;
margin: auto;
padding-top: 50px;
padding-bottom: 20px;}
.about {
 padding-bottom: 30px;   padding-top: 30px;}
 .team img {width: 100%;}

.services {padding-bottom: 30px;}
.team {padding-bottom: 50px;padding-top: 50px;}
.teamtext {margin-top: 20px;}

}

 @media only screen and (max-width:400px) {
.right { float: none; width: 100%; text-align: center; display: block; padding-bottom: 5px; }
.left { float: none; width: 100%; text-align: center; display: block; }

.copyright { line-height: 12px; }
}