/* Theme Name: Gabris Tree Care Author: AndrayV Author URI: http://www.andrayv.com/ License URI: http://www.andrayv.com Description: Gabris Tree Care theme Version: 1.0 */ /* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html -------------------------------------------------------------- */ 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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } :focus {/* remember to define focus styles! */ outline: 0; } body { background: #fff; line-height: 1; } ol, ul { list-style: none; } table {/* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } a img { border: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; word-wrap: break-word; } /* ------------------------------------------------------------------- */ body { margin: 0; padding: 0; font: 400 normal 17px 'Open Sans', Arial, sans-serif; color: #252525; letter-spacing: 0.01em; background-color: #ececec; position: relative;} p {margin: 0; padding: 0; line-height: 1.6em;} li {line-height: 1.8em;} a {text-decoration: none; font-weight: 700; color: #252525; } strong {font-weight: bold;} em {font-style: italic;} body.home h1 {color: #4c964f; font: 400 normal 22px 'Sorts Mill Goudy', serif; margin: 40px 0; text-transform: uppercase;} h1 {color: #4c964f; font: 400 normal 22px 'Sorts Mill Goudy', serif; margin: 10px 0; text-transform: uppercase;} table {width: 100%;} table thead td, table thead th {font-weight: 700;} table th {text-align: left; } table thead {background-color: #aaaaaa;} table tr:nth-child(even) {background-color: #dddddd;} img {max-width: 100%; height: auto;} .alignleft {float: left; margin: 0 30px 15px 0;} .alignright {float: right; margin: 0 0 15px 30px;} .aligncenter {float: none; margin: 0 auto; text-align: center;} img.aligncenter {display: block;} .clear {clear: both;} br.clear {line-height: 0; height: 0; display: none;} .readmore {font-weight: bold;} iframe {max-width: 100% !important; margin-bottom: 30px; } .white, .white p, .white a {color: #FFFFFF;} .thumb {width: 200px; height: auto; padding: 0 20px;} .insurance-info {clear: both; border-top: 2px solid #FFFFFF; padding: 20px 0; color: #FFFFFF; } #cboxCurrent {display: none !important;} /*main layout*/ .content-width {width: 1260px; margin: 0 auto; position: relative;} #wrapper {overflow: hidden; padding-bottom: 50px;} /*header*/ #site-title {display: none;} #mobile-header, #smaller-header {display: none; position: fixed;} #mobile-header, #smaller-header {width: 100%; z-index: 999; top: 0;} #header {position: relative; background-color: #4c964f; width: 100%; z-index: 999; display: block;} #header #header-bg {position: absolute; z-index: 2; background: url(images/header-bg.jpg) no-repeat center center; background-size: 100%; top: 0; bottom: 0; left: 0; right: 0; box-shadow: 0 0 10px 0 #000000; -webkit-box-shadow: 0 0 10px 0 #000000; -moz-box-shadow: 0 0 10px 0 #000000; -o-box-shadow: 0 0 10px 0 #000000; -ms-box-shadow: 0 0 10px 0 #000000; } #header #logo {width: auto; max-width: 40%; height: auto; display: inline-block; vertical-align: middle; padding: 1% 4% 0.7%; position: relative; z-index: 3; } #header #logo span#crest, #header #logo span#title {display: inline-block; vertical-align: middle; } #header #logo span#crest {width: 18%; margin-right: 5%; } #header #logo span#title {width: 75%; } #header #logo p {line-height: 0;} #header p {display: inline-block;} #header #phone {width: 58%; display: inline-block;} #header #email {width: 15%; display: inline-block;} #header #menu-icon {width: 15%; display: inline-block; } #header #phone img {width: auto; height: 34px; display: inline-block; vertical-align: middle; margin-right: 15px; } #header #phone a strong { display: inline-block; font: 700 33px 'Sorts Mill Goudy', serif; color: #4c964f; text-transform: uppercase; vertical-align: middle;} #header #email img {width: auto; height: 34px; display: inline-block; vertical-align: middle;} #header #menu-icon img {width: auto; height: 34px; display: inline-block; vertical-align: middle;} #header div.header-menu {vertical-align: middle; position: relative; z-index: 3; display: inline-block; right: 0; width: 49%; text-align: right; } #smaller-header #header-bg {position: absolute; opacity: 0.95; z-index: 2; background: url(images/header-bg.jpg) no-repeat center center; background-size: 100%; top: 0; bottom: 0; left: 0; right: 0; box-shadow: 0 0 8px -2px #000000; -webkit-box-shadow: 0 0 8px -2px #000000; -moz-box-shadow: 0 0 8px -2px #000000; -o-box-shadow: 0 0 8px -2px #000000; -ms-box-shadow: 0 0 8px -2px #000000; } #smaller-header #logo {width: auto; max-width: 35%; height: auto; display: inline-block; vertical-align: middle; padding: 1% 15% 0.7% 4%; position: relative; z-index: 3; } #smaller-header #logo span#crest, #smaller-header #logo span#title {display: inline-block; vertical-align: middle; } #smaller-header #logo span#crest {width: 10%; margin-right: 5%; } #smaller-header #logo span#title {width: 60%; } #smaller-header #logo p {line-height: 0;} #smaller-header p {display: inline-block;} #smaller-header #phone {width: 58%; display: inline-block;} #smaller-header #email {width: 15%; display: inline-block;} #smaller-header #menu-icon {width: 15%; display: inline-block; } #smaller-header #phone img {width: auto; height: 24px; display: inline-block; vertical-align: middle; margin-right: 15px; } #smaller-header #phone a strong { display: inline-block; font: 700 33px 'Sorts Mill Goudy', serif; color: #4c964f; text-transform: uppercase; vertical-align: middle;} #smaller-header #email img {width: auto; height: 24px; display: inline-block; vertical-align: middle;} #smaller-header #menu-icon img {width: auto; height: 24px; display: inline-block; vertical-align: middle;} #smaller-header div.header-menu {vertical-align: middle; position: relative; z-index: 3; display: inline-block; right: 0; width: 40%; text-align: right; } #mobile-header #header-bg {position: absolute; opacity: 0.95; z-index: 2; background: url(images/header-bg.jpg) no-repeat center center; background-size: 100%; top: 0; bottom: 0; left: 0; right: 0; box-shadow: 0 0 8px -2px #000000; -webkit-box-shadow: 0 0 8px -2px #000000; -moz-box-shadow: 0 0 8px -2px #000000; -o-box-shadow: 0 0 8px -2px #000000; -ms-box-shadow: 0 0 8px -2px #000000; } #mobile-header #logo {width: auto; max-width: 45%; height: auto; display: inline-block; vertical-align: middle; padding: 1.1% 15% 0.4% 4%; position: relative; z-index: 3; } #mobile-header #logo span#crest, #mobile-header #logo span#title {display: inline-block; vertical-align: middle; } #mobile-header #logo span#crest {width: 15%; margin-right: 5%; } #mobile-header #logo span#title {width: 78%; } #mobile-header #logo p {line-height: 0;} #mobile-header p {display: inline-block;} #mobile-header #phone {width: 30%; display: inline-block;} #mobile-header #email {width: 30%; display: inline-block;} #mobile-header #menu-icon {width: 30%; display: inline-block; } #mobile-header #phone img {width: auto; height: 24px; display: inline-block; vertical-align: middle; } #mobile-header #phone a strong { display: none;} #mobile-header #email img {width: auto; height: 24px; display: inline-block; vertical-align: middle;} #mobile-header #menu-icon img {width: auto; height: 24px; display: inline-block; vertical-align: middle;} #mobile-header div.header-menu {vertical-align: middle; position: relative; z-index: 3; display: inline-block; right: 0; width: 30%; text-align: right; } #main-menu {position: relative; z-index: 9999;} #main-menu .navigation {display: none;} #main-menu div.navigation {float: none; clear: none; position: absolute; background-color: #ececec; padding: 10px; top: 17px; right: 0; border-bottom: 10px solid #4c964f; border-top: 10px solid #4c964f; box-shadow: 0 3.5px 15px -6px #000000; -webkit-box-shadow: 0 3.5px 15px -4px #000000; -moz-box-shadow: 0 3.5px 15px -6px #000000; -o-box-shadow: 0 3.5px 15px -6px #000000; } #main-menu div.navigation a { color: #4c964f; display: block; margin: 5px 0; padding: 10px 30px;} #main-menu div.navigation ul li {display: block; margin: 5px 0;} #main-menu ul {text-align: center;} #main-menu ul li {display: inline; margin: 0 55px; text-transform: uppercase; line-height: 1em; } #main-menu ul li:first-of-type {margin: 0 55px 0 0;} #main-menu ul li a {font: 600 normal 16px 'Sorts Mill Goudy', serif; color: #4c964f; } #main-menu ul li a:hover, #main-menu ul li.current-menu-item a, #header-contact a:hover img, #copyright a:hover, form.wpcf7-form input.wpcf7-submit:hover, #main-menu ul li.current-post-ancestor a, #main-menu ul li.current-page-ancestor a, #main-menu ul li.current-menu-parent a, #main-menu ul li.current-post-parent a {opacity: 0.7; } /* banner */ #banner {position: relative; z-index: 1; clear: both; } #banner li {line-height: 0;} #banner .metaslider .caption-wrap {bottom: -106px; background: none; background-color: #4c964f; opacity: 1; position: absolute; width: 100%;} #banner .metaslider .caption { line-height: 1em; padding:12px 0; color: #FFFFFF; font: 400 normal 28px 'Sorts Mill Goudy', serif; text-align: center; letter-spacing: 0.05em; word-spacing: 0.1em; width: 100%; box-shadow: 0px 0px 8px -4px #000000; -o-box-shadow: 0px 0px 8px -4px #000000; -webkit-box-shadow: 0px 0px 8px -2px #000000; -moz-box-shadow: 0px 0px 8px -4px #000000; } /* content */ body.home #content {text-align: justify; position: relative; z-index: 2; padding: 120px 0 50px; overflow: auto; clear: both; } #content {text-align: justify; position: relative; z-index: 2; padding: 50px 0 50px; overflow: auto; clear: both; } #content h1 {font-size: 40px; font-weight: 500; margin-bottom: 40px; text-transform: uppercase; text-align: left;} #content h2 {font-size: 20px; font-weight: 600; margin-bottom: 10px; } #content ul li {list-style-type: disc; margin-left: 15px;} div#what-we-do {text-align: center;} div#what-we-do h1 {text-align: left;} div#what-we-do div.page {width: 27%; margin: 0 3% 3%; display: inline-block; position: relative; line-height: 0; font-size: 20px; box-shadow: 0px 0px 10px -5px #000000; -o-box-shadow: 0px 0px 10px -5px #000000; -webkit-box-shadow: 0px 0px 10px -5px #000000; -moz-box-shadow: 0px 0px 10px -5px #000000; } div#what-we-do div.page span.title {display: block; position: absolute; width: 100%; text-align: center; bottom: 0; left: 0; z-index: 2; } div#what-we-do div.page span.title span.title-bg {position: absolute; width: 100%; height: 100%; background-color: #bce3bd; opacity: 0.8; left: 0; bottom: 0; z-index: 2;} div#what-we-do div.page span.title span.title-text {position: relative; text-transform: uppercase; left: 0; bottom: 0; padding: 15px 0; text-align: center; width: 100%; z-index: 3; display: block; line-height: 1em; font-weight: 600; font-size: 20px;} #testimonials {margin: 50px auto; display: block; position: relative; text-align: center; } .testimony { width: 43%; color: #235625; font: 400 normal 22px 'Sorts Mill Goudy', serif; line-height: normal; line-height: 2em; position: relative; display: inline-block; margin: 0 2.4% 45px; vertical-align: top; text-align: justify; } .table-star {width: 25px; height: auto; margin-bottom: 15px;} a .all-testimonials-link {text-align: center; margin-bottom: 50px; background-color: #4c964f; font: 400 normal 30px 'Sorts Mill Goudy', serif; color: white; width: 95%; padding: 10px 2.5%; height: 100%;} #phone-contact, #form-contact {background-color: #4c964f; width: 100%; padding: 10px 0 7px; text-align: center; margin-bottom: 8px;} #content #phone-contact p { font: 400 normal 30px 'Sorts Mill Goudy', serif; text-align: center;} #phone-contact a {font: 700 normal 30px 'Open Sans', sans-serif; word-break: keep-all;} #form-contact, #about-banner {box-shadow: 0px 0px 10px -5px #000000; -o-box-shadow: 0px 0px 10px -5px #000000; -webkit-box-shadow: 0px 0px 10px -5px #000000; -moz-box-shadow: 0px 0px 10px -5px #000000;} #about-us {margin-top: 75px;} #about-banner, #about-img {line-height: 0; margin: 100px 0;} #about-banner img, #about-img img {width: 100% } /* gallery */ body.home #content div.gallery .gallery-caption { border: none; margin: 0 auto; position: absolute; bottom: 0; left: 0; text-align: left; text-transform: uppercase; font-size: 20px; font-weight: 600; width: 100px; padding: 20px 20px 23px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.7+0,0.7+59,0.56+73,0+100 */ background: -moz-linear-gradient(left, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 59%, rgba(255,255,255,0.56) 73%, rgba(255,255,255,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 59%,rgba(255,255,255,0.56) 73%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 59%,rgba(255,255,255,0.56) 73%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */ } body.home #content div.gallery {text-align: center;} body.home #content div.gallery .gallery-item {float: none; display: inline-block; width: 41%; min-width: 120px; margin: 10px 4% 40px; vertical-align: top; line-height: 0; position: relative; box-shadow: 0px 0px 10px -5px #000000; -o-box-shadow: 0px 0px 10px -5px #000000; -webkit-box-shadow: 0px 0px 10px -5px #000000; -moz-box-shadow: 0px 0px 10px -5px #000000; } img.checkatrade {box-shadow: 0px 0px 10px -5px #000000; -o-box-shadow: 0px 0px 10px -5px #000000; -webkit-box-shadow: 0px 0px 10px -5px #000000; -moz-box-shadow: 0px 0px 10px -5px #000000; } div#content div.gallery img {border: none;} a.bark-widget {margin: 40px auto 25px;} #footer {background-color: #4c964f;} #turf {background: url(images/footer-turf.png) repeat-x; background-size: 100%; height: 36px; width: 100%;} #footer a {color: #FFFFFF; font-weight: 400;} #footer li {list-style: none; color: #FFFFFF; font-weight: 400;} #footer div.widget {display: inline-block; padding: 40px 0 30px; vertical-align: top; height: 100%;} #footer div.first {width: 30%; margin-right: 10%;} #footer div.last {width: 24%; } #footer div.last a {margin-bottom: 15px; } #footer div.last img {width: 27px; height: auto; margin-right: 15px; } #footer div.last strong { font: 400 normal 40px 'Sorts Mill Goudy', serif;} #footer div.last a.mailto-link { font: 400 normal 19px 'Sorts Mill Goudy', serif;} #footer div.middle {width: 25%; margin-right: 10%; height: 100%; position: relative;} #footer div.middle p {margin-bottom: 20px;} #footer h3 {font: 600 18px 'Open Sans', Arial, serif; color: #FFFFFF; text-transform: uppercase; letter-spacing: 0.1em; text-align: left; border-bottom: solid 1px #FFFFFF; padding-bottom: 5px; margin-bottom: 15px;} #footer form.wpcf7-form textarea { line-height: 1em; padding: 5px 8px; } #footer form.wpcf7-form select { padding: 9.7px 15px; } #footer form.wpcf7-form input { padding: 9.7px 15px; width: 90%;} #footer form.wpcf7-form input.wpcf7-submit { padding: 9.7px 15px; width: 100%; margin-top: -15px;} #copyright {text-align: center; margin-top: 50px;} #copyright img {width: 150px; margin: 30px auto;} #form-contact div.wpcf7 {width: 100%; display: inline-block;} #content #form-contact h2 {margin: 30px 0;} #form-contact .thumbnail { line-height: 0; box-shadow: 1px 1px 5px -4px #000000; -webkit-box-shadow: 1px 1px 5px -3px #000000; -moz-box-shadow: 1px 1px 5px -4px #000000; -o-box-shadow: 1px 1px 5px -4px #000000; width: 32%; margin-bottom: 0; display: inline-block; vertical-align: top; } #form-contact .right-column {margin: 0 10px;} #form-contact form.wpcf7-form .column br {display: none;} #form-contact .column {width: 48%; margin-bottom: 0; display: inline-block; vertical-align: top;} form.wpcf7-form {margin: 0 auto; position: relative; z-index: 2; } form.wpcf7-form input, form.wpcf7-form textarea, form.wpcf7-form select {width: 95%; padding: 17px 2.5%; margin: 0 auto 10px; background-color: #baf1bc; color: #252525; font: 400 normal 15px 'Open Sans', Arial, sans-serif; text-align: left; border: none; box-shadow: 1px 1px 5px -4px #000000; -webkit-box-shadow: 1px 1px 5px -3px #000000; -moz-box-shadow: 1px 1px 5px -4px #000000; -o-box-shadow: 1px 1px 5px -4px #000000; border-radius: 30px; } form.wpcf7-form textarea {line-height: 1.5em;} form.wpcf7-form select {padding: 15.7px 15px; width: 100%;} form.wpcf7-form option {padding: 0 15px; background-color: #baf1bc; color: #252525; font: 400 normal 15px 'Open Sans', Arial, sans-serif; text-align: left; border: none;} form.wpcf7-form input.wpcf7-submit, .button {background-color: #235625; color: #baf1bc; text-transform: uppercase; font-size: 22px; font-weight: 700; margin-top: 0; width: 100%; position: relative; z-index: 5; cursor: pointer; float: none; text-align: center; padding: 10px 2.5%; margin-bottom: 0; } .button {font-size: 13px; clear: both; margin-top: 40px; display: block; width: 72px;} div.wpcf7 img.ajax-loader {display: block; margin: 0 auto; position: absolute; bottom: 28px; right: 2px;} span.wpcf7-not-valid-tip { background-color: #ff7373; color: #fff; display: block; font-size: 0.8em; line-height: 1em; padding: 2px; position: absolute; top: -29px; left: 0; } form.wpcf7-form input.wpcf7-not-valid, form.wpcf7-form textarea.wpcf7-not-valid, form.wpcf7-form select.wpcf7-not-valid {border: 1px solid #ff7373;} /*cookie bar*/ body #cookie-law-info-bar { line-height: 1.2em; position: relative !important; bottom: 0 !important; } /*MEDIA QUERIES*/ @media screen and (max-width: 1300px) { .content-width {width: 94%; margin-left: 3%; } #main-menu ul li { margin: 0 3%;} #header #logo { max-width: 45%;} #header div.header-menu { width: 40%; } #header #logo span#crest {width: 21%; margin-right: 5%; } #header #logo span#title {width: 70%; } #header #phone img {width: auto; height: 24px; display: inline-block; vertical-align: middle; margin-right: 15px; } #header #phone a strong { display: inline-block; font: 700 25px 'Sorts Mill Goudy', serif; color: #4c964f; text-transform: uppercase; vertical-align: middle;} #header #email img {width: auto; height: 24px; display: inline-block; vertical-align: middle;} #header #menu-icon img {width: auto; height: 24px; display: inline-block; vertical-align: middle;} #smaller-header #logo { max-width: 35%;} #smaller-header div.header-menu { width: 40%; } #smaller-header #logo span#crest {width: 10%; margin-right: 5%; } #smaller-header #logo span#title {width: 60%; } #smaller-header #phone img {width: auto; height: 24px; display: inline-block; vertical-align: middle; margin-right: 15px; } #smaller-header #phone a strong { display: inline-block; font: 700 25px 'Sorts Mill Goudy', serif; color: #4c964f; text-transform: uppercase; vertical-align: middle;} #smaller-header #email img {width: auto; height: 24px; display: inline-block; vertical-align: middle;} #smaller-header #menu-icon img {width: auto; height: 24px; display: inline-block; vertical-align: middle;} #banner .metaslider .caption-wrap { bottom: -79px; } #banner .metaslider .caption { line-height: 1.2em; padding: 13px 20% 13px; font-size: 22px; width: 60%; } body.home #content { padding: 90px 0 50px; } #content { padding: 30px 0 50px; } div#what-we-do div.page {width: 25%;} div#what-we-do div.page span.title {padding: 0 2%; width: 96%;} div#what-we-do div.page span.title span.title-text { font-size: 21px;} #form-contact .column {width: 46%;} #turf { height: 27px; } #footer div.middle { width: 20%;} #footer div.last { width: 28%; } #footer div.last strong {font-size: 35px;} } @media screen and (max-width: 950px) { #footer div.last strong {display: block;} } @media screen and (max-width: 820px) { .alignleft, .alignright{ max-width: 50%;} #content { padding: 90px 0 50px; } #header{display: none;} #mobile-header {display: block;} #mobile-header #logo {width: 510px; max-width: 510px; padding: 8px 0 3px 5%;} #mobile-header #logo span#crest {width: 100px; height: auto; display: inline-block; } #mobile-header #logo span#title {width: 285px; } #mobile-header #phone img {width: auto; height: 24px; display: inline-block; vertical-align: middle; } #mobile-header #phone a strong { display: none; } #mobile-header #email img {width: auto; height: 24px; display: inline-block; vertical-align: middle;} #mobile-header #menu-icon img {width: auto; height: 24px; display: inline-block; vertical-align: middle;} #mobile-header #header-bg {background-size: 150%;} #mobile-header div.header-menu { position: absolute; z-index: 3; display: inline-block; right: 5%; width: 23%; text-align: right; top: 30%;} #main-menu div.navigation {width: 150%;} #banner { margin-top: 70px; width: 150%; margin-left: -25%; } #content h1 { font-size: 35px;} #content #whatwedo, #content #aboutus {float: none; width: 100%; margin: 0;} #content #aboutus img {margin-bottom: 0;} #form-contact div.wpcf7 {width: 100%;} #content #form-contact .thumbnail {width:60%; display: block; margin: 20px auto;} div#what-we-do div.page {width: 42%; margin-bottom: 30px;} #phone-contact a {display: block; } .testimony { width: 100%; margin-right: 0; margin-left: 0;} #about-us { margin-top: 45px; } #about-banner { line-height: 0; width: 150%; margin: 50px 0 50px -50%; } #turf { background-size: 140%; height: 22px; } #footer div.first, #footer div.middle, #footer div.last, #footer h3 { text-align: center; width: 100%; margin-right: 0;} #footer div.last strong {display: inline-block;} } @media screen and (max-width: 600px) { #mobile-header {margin-top: 22px;} #site-title {display: block; background-color: #4c964f; color: #eeeeee; font: 700 15px 'Sorts Mill Goudy', serif; text-align: center; letter-spacing: 0.7em; text-transform: uppercase; margin-bottom: 30px; line-height: 1em; padding: 6px 5% 1px; position: fixed; top: 0; left: 0; right: 0; z-index: 998;} #mobile-header #logo span#title {display: none; } #mobile-header #header-bg { background-size: 250%;} #banner {margin-top: 90px;} #mobile-header div.header-menu { width: 30%;} #content #phone-contact p, #content #phone-contact a {font-size: 25px;} body.home #content div.gallery .gallery-caption { font-size: 17px; width: 79px; padding: 12px 8px 12px; } a .all-testimonials-link {font: 400 normal 22px 'Sorts Mill Goudy',serif;} } @media screen and (max-width: 480px) { body { font: 400 normal 18px 'Open Sans', Arial, sans-serif; } #site-title {letter-spacing: 0.25em;} #mobile-header #logo span#crest {width: 75px; } #mobile-header div.header-menu { width: 50%; top: 12px;} #main-menu div.navigation { top: 11px; } #banner {margin-top: 75px;} body.home #content {padding-top: 65px;} #content h1 {font-size: 28px; margin-bottom: 20px;} #content p {text-align: left;} .alignleft, .alignright{float: none; margin: 0 auto 15px; display: block; max-width: 100%;} .alignleft img, .alignright img {width: 100%; height: auto; margin-bottom: 15px;} #banner .metaslider .caption { font-size: 22px;} #banner .metaslider .caption-wrap { bottom: -69px;} .testimony { font: 400 normal 22px 'Sorts Mill Goudy', serif; } div#what-we-do div.page span.title span.title-text { font-size: 20px;} #content #form-contact .column {float: none; width: 100%;} #form-contact .right-column { margin: 0; } #content #form-contact .thumbnail { width: 100%; } #turf { background-size: 200%; height: 15px; } #copyright a {width: 90%;} } @media screen and (max-width: 450px) { div#what-we-do div.page { width: 94%; margin: 0 3% 5%;} body.home #content div#before-afters div.gallery .gallery-item {width: 90%; margin: 10px 5% 20px;} } @media screen and (max-width: 330px) { #site-title {letter-spacing: 0.1em;} #banner .metaslider .caption { font-size: 19px;} #banner .metaslider .caption-wrap { bottom: -65px;} }