/* === START GENERIC STYLES === */ /* Restricted declaration reset */ * { margin:0; padding:0; } html, body { margin:0 !important; padding:0 !important; border:0 !important; outline:0 !important; } sup { vertical-align: text-top; } .text_navigationname_home { visibility: hidden; } .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} /* === END GENERIC STYLES === */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } #area_toolbar_options input{ color: #363636; } body{ font-family: "proxima-nova",sans-serif; background: #2C5871; } .container{ width: 100%; max-width: 960px; margin: 0px auto; overflow: hidden; box-sizing: border-box; position: relative; } .masthead{ background: #2c5871; position: relative; height: 300px; } .masthead .container{ height: 300px; overflow: visible; z-index: 3; } .masthead .images{ position: absolute; left: 0px; top: 0px; min-height: 310px; width: 100%; overflow: hidden; } .masthead .image{ display: none; min-height: 310px; width: 100%; position: absolute; left: 0px; top: 0px; background: url(/_css/image/masthead.jpg) no-repeat center center; background-size: cover; } .masthead .image-mlf{ background-image: url(/_css/image/masthead-mlf.jpg); } .masthead .image-torview{ background-image: url(/_css/image/masthead-torview.jpg); } .masthead .image-airy-fairy{ background-image: url(/_css/image/masthead-airy-fairy.jpg); } .masthead .image-william-hanson{ background-image: url(/_css/image/masthead-william-hanson.jpg); } .masthead .current-image{ display: block; } .masthead .nav{ min-height: 55px; position: absolute; left: 0px; top: 0px; width: 100%; background: #95c350; overflow: hidden; z-index: 4; box-sizing: border-box; } .masthead .nav .area_nav{ list-style-type: none; padding: 10px 15px 10px 0px; text-align: right; border-top: 1px solid #B5D584; border-top: 1px solid rgba(255,255,255,0.3); font-size: 1.2em; position: relative; } .masthead .nav .area_nav .first_nav_item { display: none; } .masthead .nav .menu-icon{ height: 23px; width: 34px; background: url(/_css/image/icon-burger@1x.png) no-repeat center center; background: url(/_css/image/icon-burger@2x.png) no-repeat center center / 34px 23px; margin: 0px; position: absolute; right: 15px; top: 16px; cursor: pointer; } .masthead .nav .menu-icon span{ position: absolute; left: -99999px; } .masthead .item_navitem a{ display: inline-block; color: #FFFFFF; text-decoration: none; padding: 10px 0px; } .masthead .logo{ position: absolute; left: 0px; top: 0px; } .masthead .logo a{ display: block; padding: 13px; background: url(/_css/image/logo@1x.png) no-repeat center center; background: url(/_css/image/logo@2x.png) no-repeat center center / 120px 29px; height: 29px; width: 125px; } .masthead .logo span{ position: absolute; left: -99999px; } .masthead .strapline{ color: #FFFFFF; font-weight: bold; position: relative; padding-top: 55px; } .strapline p{ margin: 15px; font-size: 1em; } .masthead .strapline .main{ font-size: 2.2em; text-shadow: 0px 0px 5px #363636; margin: 30px 20px 20px; } .contact-form { min-width: 342px; } .contact-form a{ background: #94C547; display: inline-block; padding: 0px 20px; color: #FFFFFF; text-decoration: none; border-radius: 10px; font-size: 1.25em; } .contact-form a span{ display: inline-block; padding-right: 20px; background: url(/_css/image/link-arrow@1x.png) no-repeat right center; background: url(/_css/image/link-arrow@2x.png) no-repeat right center / 9px 13px; } .contact-form{ position: relative; display: inline-block; margin: 0px 15px; } .contact-form p{ margin: 0px; line-height: 50px; } .contact-form .form{ position: absolute; left: 0px; top: 55px; width: 100%; z-index: 10; box-sizing: border-box; color: #5d5d5d; font-weight: normal; font-size: 1em; display: none; padding-bottom: 20px; } .contact-form .form-inner{ background: #FFFFFF; padding: 20px; overflow: hidden; box-shadow: 5px 5px 10px -10px #666666; } .contact-form .form-inner p{ line-height: 1.3; margin-bottom: 20px; font-size: 0.9em; } .contact-form label, .contact-form input{ display: block; box-sizing: border-box; width: 100%; padding: 0px 0px 8px; } .contact-form input{ padding: 10px; border: 1px solid #666666; color: #666666; margin-bottom: 20px; border-radius: 5px; } .contact-form .button{ float: left; width: auto; border: 0px; background: #94C547; text-transform: uppercase; color: #FFFFFF; padding: 10px 30px; margin-bottom: 0px; } .contact-form .form_errors p{ line-height: 1.4; font-size: 1em; } .contact-form .form_errors_errorlist p{ color: #E1577A; } .contact-form .form_errors .item_subheading{ margin-bottom: 0px; } .masthead .examples{ width: 390px; height: 349px; position: absolute; right: 15px; bottom: 0px; display:none; } .masthead .example{ width: 390px; height: 349px; margin: 0px auto; display: none; } .masthead .current-example{ display: block; } .masthead .examples .desktop{ width: 355px; height: 289px; position: absolute; right: 0px; bottom: 60px; background: url(/_css/image/masthead-desktop@1x.png) no-repeat right bottom; background: url(/_css/image/masthead-desktop@2x.png) no-repeat right bottom / 355px 289px; } .masthead .examples .desktop a{ display: block; position: absolute; left: 14px; top: 14px; display: block; width: 327px; height: 194px; overflow: hidden; } .masthead .examples .mobile{ width: 75px; height: 133px; position: absolute; left: 0px; top: 156px; background: url(/_css/image/masthead-mobile@1x.png) no-repeat right center; background: url(/_css/image/masthead-mobile@2x.png) no-repeat right center / 75px 133px; } .masthead .examples .mobile a{ display: block; position: absolute; left: 6px; top: 7px; display: block; width: 63px; height: 102px; border-radius: 5px; overflow: hidden; } .masthead .examples .desktop a img, .masthead .examples .mobile a img{ width: 100%; height: 100%; } .masthead .examples .name{ position: absolute; left: 0px; bottom: 0px; height: 70px; line-height: 70px; width: 100%; text-align: center; color: #FFFFFF; } .masthead .examples .controls{ position: absolute; left: 0px; bottom: 20px; height: 30px; width: 100%; overflow: hidden; list-style-type: none; } .masthead .examples .controls li{ width: 30px; height: 30px; position: absolute; left: 15px; top: 0px; background: url(/_css/image/icon-previous@1x.png) no-repeat center center; background: url(/_css/image/icon-previous@2x.png) no-repeat center center / 30px 30px; cursor: pointer; } .masthead .examples .controls .next{ left: auto; right: 15px; background: url(/_css/image/icon-next@1x.png) no-repeat center center; background: url(/_css/image/icon-next@2x.png) no-repeat center center / 30px 30px; } .masthead .examples .controls li span{ position: absolute; left: -99999px; } .masthead-content{ } .masthead-content, .masthead-content .container{ height: 55px; background: #FFFFFF; } .masthead-content .nav{ background: #95C350; } .features { margin-top: 30px; background: #2c5870; color: #fff; } .feature { margin-bottom: 40px; width: 90%; padding: 0 5%; } .feature h3 { font-size: 29px; } .bios{ padding-top: 30px; background: #FFFFFF; } .bios .bio{ padding-top: 170px; width: 50%; float: left; margin-bottom: 30px; text-align: center; color: #666666; } .bios .bio-amy{ background: url(/_css/image/bio-amy@1x.png) no-repeat center top; background: url(/_css/image/bio-amy@2x.png) no-repeat center top / 150px 150px; } .bios .bio-christopher{ background: url(/_css/image/bio-christopher@1x.png) no-repeat center top; background: url(/_css/image/bio-christopher@2x.png) no-repeat center top / 150px 150px; } .bios .bio-harry{ background: url(/_css/image/bio-harry@1x.png) no-repeat center top; background: url(/_css/image/bio-harry@2x.png) no-repeat center top / 150px 150px; } .bios .bio-matt{ background: url(/_css/image/bio-matt@1x.png) no-repeat center top; background: url(/_css/image/bio-matt@2x.png) no-repeat center top / 150px 150px; } .bios .bio h3{ margin-bottom: 10px; color: #2C5871; } .bios .bio p{ max-width: 180px; margin: 0px auto; } .we-can-help{ background-color: #2c5871; line-height: 70px; text-align: center; color: #FFFFFF; } .services { padding: 0px 15px; background: #FFFFFF; } .services .container{ overflow: hidden; } .services .service{ text-align: center; margin: 15px 0px; color: #FFFFFF; height: 300px; } .services .service .block{ box-sizing: border-box; padding: 40px 10px; position: relative; height: 100%; } .services .new-website .block{ background: #ffc63a url(/_css/image/service-new-website@1x.png) no-repeat center bottom; } .services .redesign .block{ background: #94c547 url(/_css/image/service-redesign@1x.png) no-repeat center bottom; } .services .winning-in-search .block{ background: #e4567a url(/_css/image/service-winning-in-search@1x.png) no-repeat center bottom; } .services .service .block{ background-size: 75% auto; } .services .service .block h3{ font-weight: 400; font-size: 1.4em; text-transform: titlecase; } .service .overlay{ color: #FFFFFF; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; background: rgba(14,48,63,0.8); text-align: left; display: block; opacity: 0; transition: opacity 0.5s; } .service .overlay .text{ -webkit-filter: blur(5px); filter: blur(5px); transition: filter 0.5s; } .services .service .block:hover .overlay{ opacity: 1; } .services .block:hover .overlay .text{ -webkit-filter: blur(0px); filter: blur(0px); } .service .overlay .text{ position: absolute; bottom: 20px; left: 20px; width: 85%; } .service .overlay .quote{ margin-bottom: 10px; font-weight: bold; } .services-contact{ padding: 15px 0px 30px 0px; background: #FFFFFF; font-weight: bold; } .services-contact .container{ overflow: visible; } .services-contact .contact-form{ margin: 0px auto; max-width: 80%; display: block; } .services-contact .contact-form .find-out-button{ margin: 0px 7px; } .services-contact .contact-form .find-out-button a{ width: 100%; box-sizing: border-box; } .middle{ background: #FFFFFF; } .middle .container{ padding: 15px; min-height: 400px; } .side-column .area_nav{ list-style-type: none; padding-bottom: 30px; } .side-column .item_navitem{ margin-bottom: 5px; font-weight: 600; border: 1px solid #2C5871; } .side-column .item_navitem a{ color: #2C5871; display: block; padding: 10px 10px; text-decoration: none; } .side-column .current, .side-column .item_navitem:hover{ background: #2C5871; } .side-column .current a, .side-column .item_navitem:hover a{ color: #FFFFFF; } .side-column .item_navitem .item_navitem{ background: none; font-weight: 400; background: url(/_css/image/link-arrow@1x.png) no-repeat left 3px; background: url(/_css/image/link-arrow@2x.png) no-repeat left 3px / 9px 13px; margin: 0px; } .side-column .item_navitem ul{ padding-bottom: 10px; padding-left: 15px; } .side-column .item_navitem .item_navitem a{ padding: 0px 15px 0px 20px; margin-bottom: 5px; text-decoration: none; } .side-column .item_navitem .item_navitem a:hover{ text-decoration: underline; } .side-column .item_navitem .current a, .side-column .item_navitem .current a:hover{ font-weight: bold; text-decoration: none; } .text_navigationname{ margin-top: 0px; color: #2c5871; } .main-column{ color: #666666; } .item_heading h2, .item_subheading h3{ color: #2c5871; } .item_paragraph a, .item_list a{ color: #666666; text-decoration: underline; } .item_paragraph a:hover, .item_list a:hover{ text-decoration: none; } .item_photo img{ max-width: 100%; height: auto; } .item_gallery{ margin: 0px; margin-bottom: 1em; margin-right: -15px; } .item_gallery .item_photo{ margin: 7px 15px 7px 0px; } .item_contentlink a, .item_file a{ background: #2C5871 url(/_css/image/link.png) no-repeat 5px center; color: #FFFFFF; line-height: 1.3em; padding: 15px 10px 15px 45px; text-decoration: none; } .item_file a{ background-image: url(/_css/image/file.png); } .item_contentlink a:hover, .item_file a:hover{ text-decoration: underline; } .footer{ background-color: #2c5871; color: #FFFFFF; text-align: center; } .footer a{ color: #FFFFFF; text-decoration: none; } .footer a:hover{ text-decoration: underline; } .footer .container{ padding: 20px 15px 40px; } .footer .contact{ overflow: hidden; margin-bottom: 15px; list-style-type: none; width: 100%; font-size: 2em; font-weight: bold; } .footer .copyright{ margin-bottom: 5px; } .footer .copyright a{ text-decoration: underline; } .footer .copyright a:hover{ text-decoration: none; } .footer cite{ font-style: normal; }