"box grid"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/alexgibson/pen/eZNJRP?depth=everything&order=popularity&page=56&q=pack&show_forks=false" /> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <style class="cp-pen-styles">@-ms-viewport { width: device-width } @-o-viewport { width: device-width } /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 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: 700 } dfn { font-style: italic } h1 { font-size: 2em; margin: .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: -.5em } sub { bottom: -.25em } img { border: 0 } svg:not(:root) { overflow: hidden } figure { margin: 1em 40px } hr { 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; box-sizing: content-box } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none } fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em } legend { border: 0; padding: 0 } textarea { overflow: auto } optgroup { font-weight: 700 } table { border-collapse: collapse; border-spacing: 0 } td, th { padding: 0 } .form-linear .cell { position: relative; width: auto; height: 70px; margin: 0; padding: 15px 10px 0; display: block; background: #FFF; border-bottom: 1px solid #F8F8F8; clear: left; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } .form-linear .cell:nth-of-type(1) { border-top: 1px solid #F8F8F8 } .form-linear .cell[type=textarea] { height: auto; padding-bottom: 15px } .form-linear .cell[type=wysiwyg] { height: auto; padding-bottom: 15px } .form-linear .cell[type=wysiwyg] .redactor-box { margin: 25px 0 0 0 } .form-linear .cell[type=wysiwyg] .redactor-toolbar { background: #F9F9F9; box-shadow: none; -webkit-transition: background-color .5s ease-in-out; transition: background-color .5s ease-in-out } .form-linear .cell[type=wysiwyg] .redactor-toolbar li a:hover { color: #FFF; background: #00A5EF } .form-linear .cell[type=wysiwyg] .redactor-toolbar li a.redactor-act, .form-linear .cell[type=wysiwyg] .redactor-toolbar li a:active { color: #FFF; background: #62718A } .form-linear .cell[type=wysiwyg] .redactor-editor { background: #FDFDFD; font-family: inherit; font-size: 16px; line-height: inherit; color: #777; border: none } .form-linear .cell[type=wysiwyg] .redactor-placeholder:after { color: #D5D5D5!important } .form-linear .cell[type=simplecheck]>label { left: 33px; height: auto; white-space: normal; text-overflow: initial } .form-linear .cell[type=inline-file-uploader] { height: auto; padding-bottom: 15px } .form-linear .cell[type=multi-input] { height: auto; padding-bottom: 15px } .form-linear .cell>label { position: absolute; top: 15px; left: 10px; right: 10px; height: 15px; overflow: hidden; font-size: 12px; line-height: 15px; font-weight: 600; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; color: #62718A; -webkit-transition-property: top, color; transition-property: top, color; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } .form-linear .cell>.counter.warn { color: #F8CA2F } .form-linear .cell>.counter.over { color: #E25E5B } .form-linear input[type=color], .form-linear input[type=date], .form-linear input[type=datetime], .form-linear input[type=datetime-local], .form-linear input[type=email], .form-linear input[type=month], .form-linear input[type=password], .form-linear input[type=tel], .form-linear input[type=text], .form-linear input[type=time], .form-linear input[type=url], .form-linear input[type=week], .form-linear input[type=number], .form-linear input[type=search], .form-linear textarea { position: relative; width: 100%; margin: 20px 0 0 0; padding: 0; height: 25px; font-size: 16px; font-weight: 400; line-height: 25px; color: #00A5EF; background: 0 0; border: none; border-radius: 0; border-bottom: 1px solid transparent; -webkit-transition-property: color, border-bottom-color; transition-property: color, border-bottom-color; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } .form-linear input[type=color]:focus, .form-linear input[type=date]:focus, .form-linear input[type=datetime]:focus, .form-linear input[type=datetime-local]:focus, .form-linear input[type=email]:focus, .form-linear input[type=month]:focus, .form-linear input[type=password]:focus, .form-linear input[type=tel]:focus, .form-linear input[type=text]:focus, .form-linear input[type=time]:focus, .form-linear input[type=url]:focus, .form-linear input[type=week]:focus, .form-linear input[type=number]:focus, .form-linear input[type=search]:focus, .form-linear textarea:focus { outline: 0; box-shadow: none } .form-linear textarea { position: relative; width: 100%; margin: 20px 0 0 0; padding: 20px; height: auto; min-height: 80px; max-height: 200px; font-size: 16px; font-weight: 400; line-height: 20px; color: #777; background: #FDFDFD; border: none; border-radius: 0; border-bottom: 1px dotted transparent; -webkit-transition-property: color, height; transition-property: color, height; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; resize: vertical; overflow-y: scroll } .form-linear textarea:focus { outline: 0; box-shadow: none } .form-linear select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; border: 1px solid transparent; opacity: 0 } .form-linear.no-js-2 select { position: relative; height: 30px; margin: 20px 0 0 0; height: 25px; opacity: 1 } .form-linear .cell[type=select] .ui-surrogate { position: relative; width: 100%; height: 30px; margin: 20px 0 0 0; height: 25px; font-size: 16px; font-weight: 400; line-height: 25px; color: #00A5EF } .form-linear .cell[type=select]:after { position: absolute; bottom: 15px; right: 20px; width: 16px; height: 10px; content: ""; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMjQgMTUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGc+PHBhdGggZmlsbD0iIzgzOEQ5QyIgZD0iTTExLjk5OTg2MDIsMTQuMTQ0MjAwMyBDMTEuODU1ODYwMiwxNC4xNDQyMDAzIDExLjcxODg2MDIsMTQuMDgyMjAwMyAxMS42MjM4NjAyLDEzLjk3MzIwMDMgTDAuMTIzODYwMjE3LDAuODMwMjAwMzA3IEMtMC4wNTgxMzk3ODMyLDAuNjIxMjAwMzA3IC0wLjAzNzEzOTc4MzIsMC4zMDYyMDAzMDcgMC4xNzA4NjAyMTcsMC4xMjQyMDAzMDcgQzAuMzc3ODYwMjE3LC0wLjA1Nzc5OTY5MzEgMC42OTI4NjAyMTcsLTAuMDM3Nzk5NjkzMSAwLjg3NTg2MDIxNywwLjE3MTIwMDMwNyBMMTEuOTk5ODYwMiwxMi44ODQyMDAzIEwyMy4xMjM4NjAyLDAuMTcxMjAwMzA3IEMyMy4zMDU4NjAyLC0wLjAzNzc5OTY5MzEgMjMuNjIwODYwMiwtMC4wNTc3OTk2OTMxIDIzLjgyODg2MDIsMC4xMjQyMDAzMDcgQzI0LjAzNjg2MDIsMC4zMDYyMDAzMDcgMjQuMDU3ODYwMiwwLjYyMTIwMDMwNyAyMy44NzU4NjAyLDAuODMwMjAwMzA3IEwxMi4zNzU4NjAyLDEzLjk3MzIwMDMgQzEyLjI4MDg2MDIsMTQuMDgyMjAwMyAxMi4xNDM4NjAyLDE0LjE0NDIwMDMgMTEuOTk5ODYwMiwxNC4xNDQyMDAzIj48L3BhdGg+PC9nPjwvc3ZnPg==); background-size: 16px 10px } .form-linear .cell.month-year-cell select.month { width: 60% } .form-linear .cell.month-year-cell select.year { width: 38%; left: 62% } .form-linear.no-js-2 .cell.month-year-cell select.year { float: right; left: 0 } .form-linear::-webkit-input-placeholder { color: #D5D5D5; font-size: 16px; font-weight: 400; line-height: inherit } .form-linear::-moz-placeholder { color: #D5D5D5; font-size: 16px; font-weight: 400; line-height: inherit } .form-linear:-ms-input-placeholder { color: #D5D5D5; font-size: 16px; font-weight: 400; line-height: inherit } .form-linear input[type=checkbox] { -webkit-appearance: checkbox; -moz-appearance: checkbox; -ms-appearance: checkbox; -o-appearance: checkbox; appearance: checkbox } .form-linear input[type=radio] { -webkit-appearance: radio; -moz-appearance: radio; -ms-appearance: radio; -o-appearance: radio; appearance: radio } .form-linear .toggle-switch { position: relative; font-size: 32px; margin-top: 4px } .form-linear .toggle-switch input[type=checkbox] { position: absolute; left: -9999px } .form-linear .toggle-switch .ui-surrogate { position: relative; width: 1.625em; height: 1em; margin: 0; padding: 0; display: inline-block; vertical-align: middle; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; background: #E8E8E8; border-radius: 999px; cursor: pointer; -webkit-transition: background .3s ease; transition: background .3s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .form-linear .toggle-switch .ui-surrogate:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #FFF; border: .08em solid transparent; background-clip: content-box; border-radius: inherit; content: ""; -webkit-transition: all .3s ease; transition: all .3s ease; -webkit-transform: scale(1); transform: scale(1) } .form-linear .toggle-switch .ui-surrogate:after { position: absolute; left: 0; width: .84em; height: .84em; margin: .08em; display: block; background: #FFF; border-radius: inherit; content: ""; box-shadow: 0 .08em .16em rgba(0, 0, 0, .4); -webkit-transition: left .3s ease; transition: left .3s ease } .form-linear .toggle-switch input[type=checkbox]:checked+.ui-surrogate { background: #00A5EF } .form-linear .toggle-switch input[type=checkbox]:checked+.ui-surrogate:before { -webkit-transform: scale(0); transform: scale(0) } .form-linear .toggle-switch input[type=checkbox]:checked+.ui-surrogate:after { left: .625em } .form-linear .toggle-switch .ui-label { margin-left: 5px; display: inline-block; font-size: 16px; color: #00A5EF; vertical-align: middle } .form-linear label+.toggle-switch { font-size: 24px; margin-top: 20px } .form-linear .cell[type=inline-file-uploader] .files { position: relative; width: 100%; margin: 30px 0 0 0; height: auto } .form-linear .cell[type=multi-input] .multi-input { position: relative; width: 100%; margin: 25px 0 0 0; height: auto } .form-linear .cell[type=multi-input] .multi-input .wrapper { position: relative; display: block; margin: 0 0 10px 0 } .form-linear .cell[type=multi-input] .multi-input.inline .wrapper { display: inline-block; margin-right: 10px } .form-linear .cell[type=multi-input] .multi-input input { position: absolute; top: 0; left: 0; width: 18px; height: 18px; opacity: 0; z-index: 2; cursor: pointer } .form-linear .cell[type=multi-input] .multi-input .ui-surrogate { position: absolute; width: 18px; height: 18px; z-index: 1; margin: 0; padding: 0; background: #FFF; border: 2px solid #DFDFDF; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .form-linear .cell[type=multi-input] .multi-input .ui-surrogate:after { position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; background: #00A5EF; opacity: 0; -webkit-transition: opacity .3 ease; transition: opacity .3 ease; content: "" } .form-linear .cell[type=multi-input] .multi-input input[type=radio]+.ui-surrogate { border-radius: 50% } .form-linear .cell[type=multi-input] .multi-input input[type=radio]+.ui-surrogate:after { border-radius: 50% } .form-linear .cell[type=multi-input] .multi-input input[type=checkbox]:checked+.ui-surrogate:after, .form-linear .cell[type=multi-input] .multi-input input[type=radio]:checked+.ui-surrogate:after { opacity: 1 } .form-linear .cell[type=multi-input] .multi-input .ui-label { padding-left: 28px; display: inline-block; font-size: 16px; vertical-align: top } .form-linear .cell>span { position: absolute; bottom: 0; left: 0; right: 10px; height: 0; padding: 0 10px; overflow: hidden; font-size: 12px; font-weight: 600; line-height: 19px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; color: red; opacity: 0; -webkit-transition-property: height, opacity; transition-property: height, opacity; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } .form-linear .cell>label:after { position: absolute; right: 0; font-size: 10px; line-height: 12px; font-weight: 400; vertical-align: top; text-transform: none; color: #CCC; content: "Optional" } .form-linear .cell.as-switch>label:after, .form-linear .cell.is-required>label:after, .form-linear .cell[as-switch]>label:after, .form-linear .cell[is-required]>label:after { content: initial } .form-linear .cell.is-focused, .form-linear .cell[is-focused] { background-color: rgba(0, 165, 239, .06) } .form-linear .cell.is-focused input[type=color], .form-linear .cell.is-focused input[type=date], .form-linear .cell.is-focused input[type=datetime], .form-linear .cell.is-focused input[type=datetime-local], .form-linear .cell.is-focused input[type=email], .form-linear .cell.is-focused input[type=month], .form-linear .cell.is-focused input[type=password], .form-linear .cell.is-focused input[type=tel], .form-linear .cell.is-focused input[type=text], .form-linear .cell.is-focused input[type=time], .form-linear .cell.is-focused input[type=url], .form-linear .cell.is-focused input[type=week], .form-linear .cell.is-focused input[type=number], .form-linear .cell.is-focused input[type=search], .form-linear .cell.is-focused textarea, .form-linear .cell[is-focused] input[type=color], .form-linear .cell[is-focused] input[type=date], .form-linear .cell[is-focused] input[type=datetime], .form-linear .cell[is-focused] input[type=datetime-local], .form-linear .cell[is-focused] input[type=email], .form-linear .cell[is-focused] input[type=month], .form-linear .cell[is-focused] input[type=password], .form-linear .cell[is-focused] input[type=tel], .form-linear .cell[is-focused] input[type=text], .form-linear .cell[is-focused] input[type=time], .form-linear .cell[is-focused] input[type=url], .form-linear .cell[is-focused] input[type=week], .form-linear .cell[is-focused] input[type=number], .form-linear .cell[is-focused] input[type=search], .form-linear .cell[is-focused] textarea { color: #414A52; border-bottom-color: rgba(0, 0, 0, .2) } .form-linear .cell.is-focused textarea, .form-linear .cell[is-focused] textarea { color: #414A52; background: #FFF } .form-linear .cell.is-focused[type=wysiwyg] .redactor-toolbar, .form-linear .cell[is-focused][type=wysiwyg] .redactor-toolbar { background: #ececec } .form-linear .cell.is-focused[type=wysiwyg] .redactor-editor, .form-linear .cell[is-focused][type=wysiwyg] .redactor-editor { background: #FFF } .form-linear .cell.is-invalid, .form-linear .cell[is-invalid] { padding-top: 2px; background-color: #fef7f7 } .form-linear .cell.is-invalid>label, .form-linear .cell[is-invalid]>label { top: 5px } .form-linear .cell.is-invalid input[type=color], .form-linear .cell.is-invalid input[type=date], .form-linear .cell.is-invalid input[type=datetime], .form-linear .cell.is-invalid input[type=datetime-local], .form-linear .cell.is-invalid input[type=email], .form-linear .cell.is-invalid input[type=month], .form-linear .cell.is-invalid input[type=password], .form-linear .cell.is-invalid input[type=tel], .form-linear .cell.is-invalid input[type=text], .form-linear .cell.is-invalid input[type=time], .form-linear .cell.is-invalid input[type=url], .form-linear .cell.is-invalid input[type=week], .form-linear .cell.is-invalid input[type=number], .form-linear .cell.is-invalid input[type=search], .form-linear .cell.is-invalid textarea, .form-linear .cell[is-invalid] input[type=color], .form-linear .cell[is-invalid] input[type=date], .form-linear .cell[is-invalid] input[type=datetime], .form-linear .cell[is-invalid] input[type=datetime-local], .form-linear .cell[is-invalid] input[type=email], .form-linear .cell[is-invalid] input[type=month], .form-linear .cell[is-invalid] input[type=password], .form-linear .cell[is-invalid] input[type=tel], .form-linear .cell[is-invalid] input[type=text], .form-linear .cell[is-invalid] input[type=time], .form-linear .cell[is-invalid] input[type=url], .form-linear .cell[is-invalid] input[type=week], .form-linear .cell[is-invalid] input[type=number], .form-linear .cell[is-invalid] input[type=search], .form-linear .cell[is-invalid] textarea { color: #414A52 } .form-linear .cell.is-invalid:before, .form-linear .cell[is-invalid]:before { border-color: #E25E5B } .form-linear .cell.is-invalid>span, .form-linear .cell[is-invalid]>span { height: 20px; opacity: 1 } .form-linear .cell.is-invalid[type=textarea], .form-linear .cell.is-invalid[type=wysiwyg], .form-linear .cell[is-invalid][type=textarea], .form-linear .cell[is-invalid][type=wysiwyg] { padding-bottom: 28px } .form-linear input[type=color]:-moz-ui-invalid, .form-linear input[type=color]:invalid, .form-linear input[type=date]:-moz-ui-invalid, .form-linear input[type=date]:invalid, .form-linear input[type=datetime]:-moz-ui-invalid, .form-linear input[type=datetime]:invalid, .form-linear input[type=datetime-local]:-moz-ui-invalid, .form-linear input[type=datetime-local]:invalid, .form-linear input[type=email]:-moz-ui-invalid, .form-linear input[type=email]:invalid, .form-linear input[type=month]:-moz-ui-invalid, .form-linear input[type=month]:invalid, .form-linear input[type=password]:-moz-ui-invalid, .form-linear input[type=password]:invalid, .form-linear input[type=tel]:-moz-ui-invalid, .form-linear input[type=tel]:invalid, .form-linear input[type=text]:-moz-ui-invalid, .form-linear input[type=text]:invalid, .form-linear input[type=time]:-moz-ui-invalid, .form-linear input[type=time]:invalid, .form-linear input[type=url]:-moz-ui-invalid, .form-linear input[type=url]:invalid, .form-linear input[type=week]:-moz-ui-invalid, .form-linear input[type=week]:invalid, .form-linear input[type=number]:-moz-ui-invalid, .form-linear input[type=number]:invalid, .form-linear input[type=search]:-moz-ui-invalid, .form-linear input[type=search]:invalid, .form-linear textarea:-moz-ui-invalid, .form-linear textarea:invalid { border: none!important; outline: 0!important; box-shadow: none!important } .form-polyvalent .cell { position: relative; width: auto; height: 70px; margin: 0; padding: 15px 10px 0; display: block; background: #FFF; border: 1px solid #D2D2D2; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } .form-polyvalent .cell[type=textarea] { height: auto; padding-bottom: 15px } .form-polyvalent .cell>label { position: absolute; top: 15px; left: 10px; right: 10px; height: 15px; overflow: hidden; font-size: 12px; line-height: 15px; font-weight: 600; text-align: left; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; color: #62718A; -webkit-transition-property: top, color; transition-property: top, color; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } .form-polyvalent .cell+.cell { margin-top: -1px } .form-polyvalent input[type=color], .form-polyvalent input[type=date], .form-polyvalent input[type=datetime], .form-polyvalent input[type=datetime-local], .form-polyvalent input[type=email], .form-polyvalent input[type=month], .form-polyvalent input[type=password], .form-polyvalent input[type=tel], .form-polyvalent input[type=text], .form-polyvalent input[type=time], .form-polyvalent input[type=url], .form-polyvalent input[type=week], .form-polyvalent input[type=number], .form-polyvalent input[type=search], .form-polyvalent textarea { position: relative; width: 100%; margin: 20px 0 0 0; padding: 0; height: 25px; font-size: 16px; font-weight: 400; line-height: 25px; text-align: left; color: #00A5EF; background: 0 0; border: none; border-radius: 0; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } .form-polyvalent input[type=color]:focus, .form-polyvalent input[type=date]:focus, .form-polyvalent input[type=datetime]:focus, .form-polyvalent input[type=datetime-local]:focus, .form-polyvalent input[type=email]:focus, .form-polyvalent input[type=month]:focus, .form-polyvalent input[type=password]:focus, .form-polyvalent input[type=tel]:focus, .form-polyvalent input[type=text]:focus, .form-polyvalent input[type=time]:focus, .form-polyvalent input[type=url]:focus, .form-polyvalent input[type=week]:focus, .form-polyvalent input[type=number]:focus, .form-polyvalent input[type=search]:focus, .form-polyvalent textarea:focus { outline: 0; box-shadow: none } .form-polyvalent textarea { position: relative; width: 100%; margin: 20px 0 0 0; padding: 0; height: auto; min-height: 80px; max-height: 200px; font-size: 16px; font-weight: 400; line-height: 20px; text-align: left; color: #777; background: #FDFDFD; border: none; border-radius: 0; -webkit-transition-property: color, height; transition-property: color, height; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; resize: vertical; overflow-y: scroll } .form-polyvalent textarea:focus { outline: 0; box-shadow: none } .form-polyvalent select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; border: 1px solid transparent; opacity: 0 } .form-polyvalent .cell[type=select] .ui-surrogate { position: relative; width: 100%; height: 30px; margin: 20px 0 0 0; height: 25px; font-size: 16px; font-weight: 400; line-height: 25px; color: #00A5EF } .form-polyvalent .cell[type=select]:after { position: absolute; bottom: 15px; right: 20px; width: 16px; height: 10px; content: ""; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMjQgMTUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGc+PHBhdGggZmlsbD0iIzgzOEQ5QyIgZD0iTTExLjk5OTg2MDIsMTQuMTQ0MjAwMyBDMTEuODU1ODYwMiwxNC4xNDQyMDAzIDExLjcxODg2MDIsMTQuMDgyMjAwMyAxMS42MjM4NjAyLDEzLjk3MzIwMDMgTDAuMTIzODYwMjE3LDAuODMwMjAwMzA3IEMtMC4wNTgxMzk3ODMyLDAuNjIxMjAwMzA3IC0wLjAzNzEzOTc4MzIsMC4zMDYyMDAzMDcgMC4xNzA4NjAyMTcsMC4xMjQyMDAzMDcgQzAuMzc3ODYwMjE3LC0wLjA1Nzc5OTY5MzEgMC42OTI4NjAyMTcsLTAuMDM3Nzk5NjkzMSAwLjg3NTg2MDIxNywwLjE3MTIwMDMwNyBMMTEuOTk5ODYwMiwxMi44ODQyMDAzIEwyMy4xMjM4NjAyLDAuMTcxMjAwMzA3IEMyMy4zMDU4NjAyLC0wLjAzNzc5OTY5MzEgMjMuNjIwODYwMiwtMC4wNTc3OTk2OTMxIDIzLjgyODg2MDIsMC4xMjQyMDAzMDcgQzI0LjAzNjg2MDIsMC4zMDYyMDAzMDcgMjQuMDU3ODYwMiwwLjYyMTIwMDMwNyAyMy44NzU4NjAyLDAuODMwMjAwMzA3IEwxMi4zNzU4NjAyLDEzLjk3MzIwMDMgQzEyLjI4MDg2MDIsMTQuMDgyMjAwMyAxMi4xNDM4NjAyLDE0LjE0NDIwMDMgMTEuOTk5ODYwMiwxNC4xNDQyMDAzIj48L3BhdGg+PC9nPjwvc3ZnPg==); background-size: 16px 10px } .form-polyvalent input[type=checkbox] { -webkit-appearance: checkbox; -moz-appearance: checkbox; -ms-appearance: checkbox; -o-appearance: checkbox; appearance: checkbox } .form-polyvalent input[type=radio] { -webkit-appearance: radio; -moz-appearance: radio; -ms-appearance: radio; -o-appearance: radio; appearance: radio } .form-polyvalent::-webkit-input-placeholder { color: #D5D5D5; font-size: 16px; font-weight: 400; line-height: inherit; text-align: left } .form-polyvalent::-moz-placeholder { color: #D5D5D5; font-size: 16px; font-weight: 400; line-height: inherit; text-align: left } .form-polyvalent:-ms-input-placeholder { color: #D5D5D5; font-size: 16px; font-weight: 400; line-height: inherit; text-align: left } .form-polyvalent .cell>span { position: absolute; bottom: 0; left: 0; right: 10px; height: 0; padding: 0 10px; overflow: hidden; font-size: 12px; font-weight: 600; line-height: 19px; text-align: left; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; color: red; opacity: 0; -webkit-transition-property: height, opacity; transition-property: height, opacity; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } .form-polyvalent .cell>label:after { position: absolute; right: 0; font-size: 10px; line-height: 12px; font-weight: 400; vertical-align: top; text-transform: none; color: #CCC; content: "Optional" } .form-polyvalent .cell.as-switch>label:after, .form-polyvalent .cell.is-required>label:after, .form-polyvalent .cell[as-switch]>label:after, .form-polyvalent .cell[is-required]>label:after { content: initial } .form-polyvalent .cell.is-focused, .form-polyvalent .cell[is-focused] { background-color: #F8F8F8 } .form-polyvalent .cell.is-focused>label, .form-polyvalent .cell[is-focused]>label { color: #00A5EF } .form-polyvalent .cell.is-focused input[type=color], .form-polyvalent .cell.is-focused input[type=date], .form-polyvalent .cell.is-focused input[type=datetime], .form-polyvalent .cell.is-focused input[type=datetime-local], .form-polyvalent .cell.is-focused input[type=email], .form-polyvalent .cell.is-focused input[type=month], .form-polyvalent .cell.is-focused input[type=password], .form-polyvalent .cell.is-focused input[type=tel], .form-polyvalent .cell.is-focused input[type=text], .form-polyvalent .cell.is-focused input[type=time], .form-polyvalent .cell.is-focused input[type=url], .form-polyvalent .cell.is-focused input[type=week], .form-polyvalent .cell.is-focused input[type=number], .form-polyvalent .cell.is-focused input[type=search], .form-polyvalent .cell.is-focused textarea, .form-polyvalent .cell[is-focused] input[type=color], .form-polyvalent .cell[is-focused] input[type=date], .form-polyvalent .cell[is-focused] input[type=datetime], .form-polyvalent .cell[is-focused] input[type=datetime-local], .form-polyvalent .cell[is-focused] input[type=email], .form-polyvalent .cell[is-focused] input[type=month], .form-polyvalent .cell[is-focused] input[type=password], .form-polyvalent .cell[is-focused] input[type=tel], .form-polyvalent .cell[is-focused] input[type=text], .form-polyvalent .cell[is-focused] input[type=time], .form-polyvalent .cell[is-focused] input[type=url], .form-polyvalent .cell[is-focused] input[type=week], .form-polyvalent .cell[is-focused] input[type=number], .form-polyvalent .cell[is-focused] input[type=search], .form-polyvalent .cell[is-focused] textarea { color: #414A52 } .form-polyvalent .cell.is-focused textarea, .form-polyvalent .cell[is-focused] textarea { color: #414A52; background: #FFF } .form-polyvalent .cell.is-focused[type=wysiwyg] .redactor-toolbar, .form-polyvalent .cell[is-focused][type=wysiwyg] .redactor-toolbar { background: #ececec } .form-polyvalent .cell.is-focused[type=wysiwyg] .redactor-editor, .form-polyvalent .cell[is-focused][type=wysiwyg] .redactor-editor { background: #FFF } .form-polyvalent .cell.is-invalid, .form-polyvalent .cell[is-invalid] { padding-top: 2px; background-color: #fef7f7 } .form-polyvalent .cell.is-invalid>label, .form-polyvalent .cell[is-invalid]>label { top: 5px } .form-polyvalent .cell.is-invalid input[type=color], .form-polyvalent .cell.is-invalid input[type=date], .form-polyvalent .cell.is-invalid input[type=datetime], .form-polyvalent .cell.is-invalid input[type=datetime-local], .form-polyvalent .cell.is-invalid input[type=email], .form-polyvalent .cell.is-invalid input[type=month], .form-polyvalent .cell.is-invalid input[type=password], .form-polyvalent .cell.is-invalid input[type=tel], .form-polyvalent .cell.is-invalid input[type=text], .form-polyvalent .cell.is-invalid input[type=time], .form-polyvalent .cell.is-invalid input[type=url], .form-polyvalent .cell.is-invalid input[type=week], .form-polyvalent .cell.is-invalid input[type=number], .form-polyvalent .cell.is-invalid input[type=search], .form-polyvalent .cell.is-invalid textarea, .form-polyvalent .cell[is-invalid] input[type=color], .form-polyvalent .cell[is-invalid] input[type=date], .form-polyvalent .cell[is-invalid] input[type=datetime], .form-polyvalent .cell[is-invalid] input[type=datetime-local], .form-polyvalent .cell[is-invalid] input[type=email], .form-polyvalent .cell[is-invalid] input[type=month], .form-polyvalent .cell[is-invalid] input[type=password], .form-polyvalent .cell[is-invalid] input[type=tel], .form-polyvalent .cell[is-invalid] input[type=text], .form-polyvalent .cell[is-invalid] input[type=time], .form-polyvalent .cell[is-invalid] input[type=url], .form-polyvalent .cell[is-invalid] input[type=week], .form-polyvalent .cell[is-invalid] input[type=number], .form-polyvalent .cell[is-invalid] input[type=search], .form-polyvalent .cell[is-invalid] textarea { color: #414A52 } .form-polyvalent .cell.is-invalid:before, .form-polyvalent .cell[is-invalid]:before { border-color: #E25E5B } .form-polyvalent .cell.is-invalid>span, .form-polyvalent .cell[is-invalid]>span { height: 20px; opacity: 1 } .form-polyvalent .cell.is-invalid[type=textarea], .form-polyvalent .cell.is-invalid[type=wysiwyg], .form-polyvalent .cell[is-invalid][type=textarea], .form-polyvalent .cell[is-invalid][type=wysiwyg] { padding-bottom: 28px } .form-polyvalent input[type=color]:-moz-ui-invalid, .form-polyvalent input[type=color]:invalid, .form-polyvalent input[type=date]:-moz-ui-invalid, .form-polyvalent input[type=date]:invalid, .form-polyvalent input[type=datetime]:-moz-ui-invalid, .form-polyvalent input[type=datetime]:invalid, .form-polyvalent input[type=datetime-local]:-moz-ui-invalid, .form-polyvalent input[type=datetime-local]:invalid, .form-polyvalent input[type=email]:-moz-ui-invalid, .form-polyvalent input[type=email]:invalid, .form-polyvalent input[type=month]:-moz-ui-invalid, .form-polyvalent input[type=month]:invalid, .form-polyvalent input[type=password]:-moz-ui-invalid, .form-polyvalent input[type=password]:invalid, .form-polyvalent input[type=tel]:-moz-ui-invalid, .form-polyvalent input[type=tel]:invalid, .form-polyvalent input[type=text]:-moz-ui-invalid, .form-polyvalent input[type=text]:invalid, .form-polyvalent input[type=time]:-moz-ui-invalid, .form-polyvalent input[type=time]:invalid, .form-polyvalent input[type=url]:-moz-ui-invalid, .form-polyvalent input[type=url]:invalid, .form-polyvalent input[type=week]:-moz-ui-invalid, .form-polyvalent input[type=week]:invalid, .form-polyvalent input[type=number]:-moz-ui-invalid, .form-polyvalent input[type=number]:invalid, .form-polyvalent input[type=search]:-moz-ui-invalid, .form-polyvalent input[type=search]:invalid, .form-polyvalent textarea:-moz-ui-invalid, .form-polyvalent textarea:invalid { border: none!important; outline: 0!important; box-shadow: none!important } .form-polyvalent .autocomplete-wrapper { position: relative } .form-polyvalent .autocomplete-input { overflow: hidden } .form-polyvalent .autocomplete-list { position: absolute; top: 100%!important; left: 0!important; width: auto; min-width: 100%; max-height: 400px; overflow-y: scroll; z-index: 9999; margin: 2px 0 0; padding: 0; display: block; list-style-type: none; text-align: left; background: #FFF; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .25) } .form-polyvalent .autocomplete-list .autocomplete-list-content { max-height: 400px; overflow-y: scroll } .form-polyvalent .autocomplete-list .autocomplete-list-content>.create { padding: 15px 10px; white-space: nowrap; color: #A7A7A7 } .form-polyvalent .autocomplete-list .autocomplete-list-content>.create.active { background-color: rgba(0, 165, 239, .1) } .form-polyvalent .autocomplete-list .autocomplete-list-content>.create:hover { background-color: rgba(120, 120, 120, .1) } .form-polyvalent .autocomplete-list .autocomplete-option, .form-polyvalent .autocomplete-list .item { position: relative; padding: 15px 10px; white-space: nowrap; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; cursor: pointer } .form-polyvalent .autocomplete-list .autocomplete-option.selected, .form-polyvalent .autocomplete-list .item.selected { color: #00A5EF } .form-polyvalent .autocomplete-list .autocomplete-option.active, .form-polyvalent .autocomplete-list .item.active { background-color: rgba(0, 165, 239, .1) } .form-polyvalent .autocomplete-list .autocomplete-option:hover, .form-polyvalent .autocomplete-list .item:hover { background-color: rgba(120, 120, 120, .1) } .form-polyvalent .autocomplete-list .autocomplete-option span.highlight, .form-polyvalent .autocomplete-list .item span.highlight { font-weight: bolder } .form-polyvalent .actions .btn { width: 100%; text-align: center } .form-polyvalent .actions .error { color: red; margin: 10px auto; text-align: left } .form-polyvalent .actions .error:empty { display: none } .form-polyvalent .inputs+.actions { margin-top: 10px } .form-polyvalent.horizontal .inputs { margin: 0; padding: 0 } .form-polyvalent.horizontal .inputs+.actions { margin-top: 5px } .ctrl-star-rating { height: 16px } .ctrl-star-rating>a { text-decoration: none; color: inherit } .star-rating { width: auto; height: 16px; margin-right: 5px; float: left; font-size: 90% } .star-rating .i { position: relative; margin-right: 1px; float: left; height: 16px; width: 16px; background-repeat: no-repeat; background-size: 16px 16px } .star-rating .i.star-rating-highlight { background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2234%22%20height%3D%2228%22%20viewBox%3D%220%200%2034%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M22.513%208.995S33.907%2010.465%2034%2010.74c.09.274-8.18%207.25-8.18%207.25s1.93%209.82%201.655%2010.005C27.2%2028.178%2017%2023.497%2017%2023.497s-10.2%204.68-10.475%204.498C6.25%2027.81%208.18%2017.99%208.18%2017.99S-.09%2011.014%200%2010.74c.093-.276%2011.487-1.745%2011.487-1.745S16.724%200%2017.092%200c.367%200%205.42%208.995%205.42%208.995z%22%20fill%3D%22%23EB6148%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") } .star-rating .i.star-rating-half { background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2236%22%20height%3D%2230%22%20viewBox%3D%220%200%2036%2030%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20stroke-width%3D%222%22%3E%3Cg%3E%3Cpath%20d%3D%22M23.513%209.995S34.907%2011.465%2035%2011.74c.09.274-8.18%207.25-8.18%207.25s1.93%209.82%201.655%2010.005C28.2%2029.178%2018%2024.497%2018%2024.497s-10.2%204.68-10.475%204.498C7.25%2028.81%209.18%2018.99%209.18%2018.99S.91%2012.014%201%2011.74c.093-.276%2011.487-1.745%2011.487-1.745S17.724%201%2018.092%201c.367%200%205.42%208.995%205.42%208.995z%22%20stroke%3D%22%2362718A%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M18%2024.497s-10.2%204.68-10.475%204.498C7.25%2028.81%209.18%2018.99%209.18%2018.99S.91%2012.014%201%2011.74c.093-.276%2011.487-1.745%2011.487-1.745S17.724%201%2018.092%201C18.46%201%2018%2024.497%2018%2024.497z%22%20stroke%3D%22%23EB6148%22%20fill%3D%22%23EB6148%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") } .star-rating .i.star-rating-normal { background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2236%22%20height%3D%2230%22%20viewBox%3D%220%200%2036%2030%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M23.513%209.995S34.907%2011.465%2035%2011.74c.09.274-8.18%207.25-8.18%207.25s1.93%209.82%201.655%2010.005C28.2%2029.178%2018%2024.497%2018%2024.497s-10.2%204.68-10.475%204.498C7.25%2028.81%209.18%2018.99%209.18%2018.99S.91%2012.014%201%2011.74c.093-.276%2011.487-1.745%2011.487-1.745S17.724%201%2018.092%201c.367%200%205.42%208.995%205.42%208.995z%22%20stroke%3D%22%2362718A%22%20stroke-width%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") } .count-rating { height: 14px; padding-top: 2px; float: left; font-size: 14px; line-height: 14px } .count-rating span { text-decoration: underline } .ctrl-fap-poweredby { position: relative; display: inline-block } .ctrl-fap-poweredby a { color: inherit; text-decoration: none } .ctrl-fap-poweredby span { display: inline-block; height: 28px; margin-right: 1px; font-size: 12px; font-weight: 300; text-align: inherit; line-height: 28px; vertical-align: top } .ctrl-fap-poweredby strong { width: 116px; height: 28px; display: inline-block; overflow: hidden; text-indent: -9999px; text-align: left; vertical-align: top; background-position: top left; background-repeat: no-repeat; background-size: 100% 100% } .ctrl-fap-poweredby.light { color: #FFF } .ctrl-fap-poweredby.light strong { background-image: url(../common/images/powered-by-plentific/small-text-icon-light-dd17d884f9.svg) } .ctrl-fap-poweredby.dark { color: #32383D } .ctrl-fap-poweredby.dark strong { background-image: url(../common/images/powered-by-plentific/small-text-icon-dark-b0864cc69c.svg) } * { box-sizing: border-box } html { position: relative } body { position: relative; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; color: #3B3A3C; background: #EAECEE } a>svg { pointer-events: none } a[name].shifted { position: relative; top: -40px; display: block; width: 0; height: 0 } .screen--fap .page-block { padding: 20px 10px } .screen--fap .b-maxwidth { max-width: 960px; margin: 0 auto } .screen--fap .b-box { position: relative; margin-bottom: 20px; padding: 20px 15px; background: #FFF; border: 1px solid #DFDFDF; border-radius: 3px } .screen--fap .b-box+.b-box { margin-top: 20px } .screen--fap .b-title { margin: 0 auto 15px; padding: 0; font-family: "Droid Sans", sans-serif; font-size: 24px; line-height: 1.1em; font-weight: 400 } .screen--fap .b-title .count { font-size: .6em; opacity: .6; vertical-align: top } .screen--fap .b-title a { text-decoration: none; color: inherit } .screen--fap .b-title a:hover { text-decoration: underline } .screen--fap .b-subtitle { margin: 0 auto; padding: 0; font-family: "Droid Sans", sans-serif; font-size: 16px; line-height: 1.1em; font-weight: 400 } .screen--fap .b-title+.b-subtitle { margin-top: -15px } .screen--fap .b-more { position: absolute; cursor: pointer; right: 15px } .screen--fap .b-instructions { max-width: 520px; margin: 20px auto; text-align: center } .screen--fap .b-instructions .title { margin: 0 auto 10px; font-size: 24px; line-height: 1.2em; font-weight: 300 } .screen--fap .b-instructions p { margin: 0 auto; font-size: 14px; line-height: 1.2em; color: #A7A7A7 } .screen--fap .b-instructions p+p { margin-top: .25em } .screen--fap .b-actions { margin: 20px auto; text-align: center } .screen--fap .b-actions .btn--fill, .screen--fap .b-actions .btn--outline { width: 100%; margin: 0 auto } .screen--fap .b-instructions+.b-actions { margin-top: 30px } .screen--fap .wysiwyg { font-size: 14px!important; line-height: 1.2em; color: inherit!important } .screen--fap .wysiwyg h1, .screen--fap .wysiwyg h2, .screen--fap .wysiwyg h3, .screen--fap .wysiwyg h4, .screen--fap .wysiwyg h5, .screen--fap .wysiwyg h6 { font-size: 14px!important; line-height: 1.2em; font-weight: 700; color: inherit!important } .screen--fap .wysiwyg li, .screen--fap .wysiwyg p, .screen--fap .wysiwyg td, .screen--fap .wysiwyg th { font-size: 14px!important; line-height: 1.2em; font-weight: 400; color: inherit!important } .screen--fap .wysiwyg a { color: inherit; text-decoration: underline } .screen--fap .wysiwyg>:first-child { margin-top: 0 } .screen--fap .wysiwyg>:last-child { margin-bottom: 0 } .btn--fill { width: auto; margin: 0; padding: 11px 20px; display: inline-block; font-size: 14px; font-weight: 600; line-height: 24px; text-decoration: none; text-align: center; background-color: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; outline: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-font-smoothing: inherit; -webkit-transition-property: color, background-color, border-color; transition-property: color, background-color, border-color; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; color: #FFF; background-color: #5C1862 } .btn--fill:active, .btn--fill:hover { text-decoration: none; box-shadow: none } .btn--fill:hover { color: #FFF; background-color: #4a134e } .btn--fill:active { color: #FFF; background-color: #370e3b } .btn--fill.alt-color { color: #FFF; background-color: #D64521 } .btn--fill.alt-color:hover { color: #FFF; background-color: #ab371a } .btn--fill.alt-color:active { color: #FFF; background-color: #802914 } .btn--outline { width: auto; margin: 0; padding: 11px 20px; display: inline-block; font-size: 14px; font-weight: 600; line-height: 24px; text-decoration: none; text-align: center; background-color: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; outline: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-font-smoothing: inherit; -webkit-transition-property: color, background-color, border-color; transition-property: color, background-color, border-color; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; color: #5C1862; border-color: #5C1862; background-color: #ded1e0 } .btn--outline:active, .btn--outline:hover { text-decoration: none; box-shadow: none } .btn--outline:hover { color: #531658; border-color: #531658; background-color: #d6c5d8 } .btn--outline:active { color: #4a134e; border-color: #4a134e; background-color: #cebad0 } .btn--outline.alt-color { color: #D64521; border-color: #D64521; background-color: #f7dad3 } .btn--outline.alt-color:hover { color: #c13e1e; border-color: #c13e1e; background-color: #f5d1c8 } .btn--outline.alt-color:active { color: #ab371a; border-color: #ab371a; background-color: #f3c7bc } .btn--outline.no-fill { background: 0 0 } .btn--outline.large { padding-top: 22px; padding-bottom: 22px; font-size: 16px; text-transform: uppercase } .btn--fill-negative { width: auto; margin: 0; padding: 11px 20px; display: inline-block; font-size: 14px; font-weight: 600; line-height: 24px; text-decoration: none; text-align: center; background-color: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; outline: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-font-smoothing: inherit; -webkit-transition-property: color, background-color, border-color; transition-property: color, background-color, border-color; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; color: #FFF; background-color: rgba(255, 255, 255, .2) } .btn--fill-negative:active, .btn--fill-negative:hover { text-decoration: none; box-shadow: none } .btn--fill-negative:hover { background-color: rgba(255, 255, 255, .3) } .btn--fill-negative:active { background-color: rgba(255, 255, 255, .4) } .btn--outline-negative { width: auto; margin: 0; padding: 11px 20px; display: inline-block; font-size: 14px; font-weight: 600; line-height: 24px; text-decoration: none; text-align: center; background-color: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; outline: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-font-smoothing: inherit; -webkit-transition-property: color, background-color, border-color; transition-property: color, background-color, border-color; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; color: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .4) } .btn--outline-negative:active, .btn--outline-negative:hover { text-decoration: none; box-shadow: none } .btn--outline-negative:hover { color: rgba(255, 255, 255, .8); background-color: rgba(255, 255, 255, .1) } .btn--outline-negative:active { color: rgba(255, 255, 255, .9); background-color: rgba(255, 255, 255, .15) } .ctrl-fap-pagination { margin: 20px auto; position: relative; text-align: center } .ctrl-fap-pagination ul { margin: 0 auto; padding: 0 } .ctrl-fap-pagination li { margin: 0; padding: 0; display: inline-block } .ctrl-fap-pagination li.prev { margin-right: 10px } .ctrl-fap-pagination li.next { margin-left: 10px } .ctrl-fap-pagination li.hide { display: none } .ctrl-fap-pagination a { min-width: 30px; padding: 0 5px; display: block; font-size: 14px; font-weight: 400; line-height: 30px; text-decoration: none; color: #414A52; background: 0 0; border: 1px solid transparent; border-radius: 3px; -webkit-transition: all .25s ease; transition: all .25s ease } .ctrl-fap-pagination a:hover { color: #5C1862; background: #FFF; border-color: #D2D2D2 } .ctrl-fap-pagination .first a, .ctrl-fap-pagination .last a, .ctrl-fap-pagination .next a, .ctrl-fap-pagination .prev a { background: #FFF; border-color: #DFDFDF } .ctrl-fap-pagination .curr a { color: #5C1862; font-weight: 700 } .ctrl-fap-review { position: relative } .ctrl-fap-review .avatar { position: absolute; top: 0; left: 0; width: 36px; height: 36px; border-radius: 50% } .ctrl-fap-review .avatar img { width: 100%; height: 100%; border-radius: 50% } .ctrl-fap-review .author { width: 100%; margin: 0 0 5px 46px; display: block; font-size: 14px; font-weight: 600; line-height: 1em; color: #32383D; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal } .ctrl-fap-review .rating { margin-left: 46px } .ctrl-fap-review .text { margin: 15px 0 0; display: block; font-size: 14px; font-weight: 400; line-height: 1.2em; color: #414A52 } .ctrl-fap-review .text em { display: block; margin-top: 4px; color: #A3A7AB } .ctrl-fap-review .more { display: block; margin-top: 5px; text-decoration: none; color: #5C1862 } .ctrl-fap-review .more:hover { text-decoration: underline; color: #120514 } .ctrl-fap-breadcrumb { position: relative; display: inline-block; font-size: 14px; font-weight: 400; line-height: 1em; color: #414A52 } .ctrl-fap-breadcrumb div { position: relative; display: inline-block } .ctrl-fap-breadcrumb div.breadcrumb-item { padding-left: 18px } .ctrl-fap-breadcrumb div.breadcrumb-item:before { position: absolute; left: -1px; width: 18px; height: 100%; text-align: center; content: " › " } .ctrl-fap-breadcrumb a { display: inline-block; color: inherit; text-decoration: none } .ctrl-fap-breadcrumb a:hover { text-decoration: underline } .ctrl-category-services { position: relative } .ctrl-category-services .icon { position: absolute; top: 0; left: 0; width: 32px; height: 32px; color: #5C1862 } .ctrl-category-services img { width: 100%; height: 100%; display: block } .ctrl-category-services h6 { margin: 0; padding: 0 0 0 50px; font-size: 14px; font-weight: 600; line-height: 1em; color: #32383D } .ctrl-category-services h6 strong { font-weight: inherit } .ctrl-category-services h6 a { color: inherit; text-decoration: none } .ctrl-category-services h6 a:hover { text-decoration: underline } .ctrl-category-services ul { margin: 5px 0 20px; padding: 0 0 0 50px; list-style-type: none } .ctrl-category-services li { display: inline; font-size: 14px; font-weight: 300; line-height: 1em; color: #414A52 } .ctrl-category-services li+li:before { margin: 0 8px 0 5px; content: "•" } .js-readmore { position: relative; padding-bottom: 30px; -webkit-transition: max-height 1s ease-in-out; transition: max-height 1s ease-in-out; overflow: hidden } .js-readmore:after { position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 30px; content: ""; background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0, #fff 25px, #fff 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 25px, #fff 100%) } .js-readmore.collapsed:after { height: 50px } .js-readmore .toggle { position: absolute; bottom: 0; left: 0; z-index: 2; display: inline-block; font-size: 12px; line-height: 20px; color: #5C1862; cursor: pointer } .js-readmore .toggle:hover { text-decoration: underline } .page-header-search { position: relative; text-align: center } .page-header-search .h-content { position: relative; max-width: 960px; margin: 0 auto } .page-header-search .search-form { width: 100%; margin: 0 auto; text-align: left } .page-header-search .search-form .actions button { width: 100%; height: 70px; margin: 0; padding: 18px 20px; display: inline-block; font-size: 16px; font-weight: 600; line-height: 32px; text-decoration: none; text-align: center; vertical-align: top; color: #FFF; background-color: #D64521; border: 1px solid transparent; border-radius: 0; cursor: pointer; outline: 0; box-shadow: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-font-smoothing: inherit; -webkit-transition-property: color, background-color, border-color; transition-property: color, background-color, border-color; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } .page-header-search .search-form .actions button:hover { text-decoration: none; background-color: #c13e1e } .page-header-search .search-form .actions button:active { background-color: #ab371a } .page-header-search .powered { padding-top: 20px; text-align: center } .on-plentific .page-header-search .powered { visibility: hidden } .page-index .page-header-search { padding: 30px 10px; background-position: top left, 50% 50%; background-color: #bebebe; background-size: cover, cover } .page-index .page-header-search h1 { position: relative; margin: 0 auto 5px; padding: 0; font-size: 24px; line-height: 1.1em; font-weight: 600; color: #FFF; text-shadow: 0 2px 4px rgba(0, 0, 0, .25) } .page-index .page-header-search h2 { position: relative; margin: 0 auto 20px; padding: 0; font-size: 18px; line-height: 1.1em; font-weight: 400; color: #FFF; text-shadow: 0 2px 4px rgba(0, 0, 0, .25) } .page-index .page-header-search .search-form .cell { border-color: transparent } .page-list .page-header-search, .page-sitemap .page-header-search { padding: 10px; background: #F8F8F8 } .page-list .page-header-search h1, .page-list .page-header-search h2, .page-sitemap .page-header-search h1, .page-sitemap .page-header-search h2 { display: none } .list.alphabetical-index { margin: 20px 0 0 } .list.alphabetical-index a { margin: 0; padding: 2px; display: inline-block; font-size: 12px; line-height: 1.2em; color: inherit; text-decoration: none } .list.alphabetical-index a:hover { text-decoration: underline } .list.alphabetical-grouped { position: relative; margin: 20px 0 0; padding: 0; list-style-type: none } .list.alphabetical-grouped .group { position: relative; margin-bottom: 20px; padding-left: 30px } .list.alphabetical-grouped .letter { position: absolute; top: 0; left: 0; font-size: 14px; line-height: 1em; font-weight: 600; color: #5C1862 } .list.alphabetical-grouped a { display: block; margin: 0 0 10px 0; font-size: 14px; line-height: 1em; font-weight: 400; color: inherit; text-decoration: none } .list.alphabetical-grouped a:hover { text-decoration: underline } .list.alphabetical-multicolumn { position: relative; margin: 20px 0 0; padding: 0; list-style-type: none } .list.alphabetical-multicolumn a { display: block; margin: 0 0 10px 0; font-size: 14px; line-height: 1em; font-weight: 400; color: inherit; text-decoration: none } .list.alphabetical-multicolumn a:hover { text-decoration: underline } .a-z-index .selected-letter { color: #5C1862; font-size: 24px } .a-z-index .alphabetical-index { text-align: center; color: #5C1862 } .a-z-index .alphabetical-grouped { font-size: 14px; font-weight: 400; line-height: 1em } .list.inline-links { margin: 10px 0 } .list.inline-links a { margin: 0; font-size: 10px; line-height: 1em; color: inherit; text-decoration: none } .list.inline-links a:hover .category-name { text-decoration: underline } .list.inline-links a:after { content: " -" } .list.inline-links a:last-child:after { content: ""; padding-left: 0 } .list.tiles { position: relative; margin: 0; padding: 0; display: block; list-style: none } .list.tiles:after, .list.tiles:before { content: " "; display: table } .list.tiles:after { clear: both } .list.tiles .tile { position: relative; width: 32%; height: 100px; margin: .5%; padding: 10px; display: block; float: left; text-align: center; background: #FFF; border: 1px solid #E8E8E8; border-radius: 2px; cursor: pointer; -webkit-transition: background .2s ease-in-out; transition: background .2s ease-in-out } .list.tiles .tile:hover { background: rgba(92, 24, 98, .1); border-color: rgba(92, 24, 98, .5) } .list.tiles .tile.pre-selected, .list.tiles .tile.selected { background: rgba(92, 24, 98, .1); border-color: rgba(92, 24, 98, .5) } .list.tiles a { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .list.tiles .icon { position: absolute; top: 10px; left: 50%; width: 32px; height: 32px; margin: 0 0 0 -16px; color: #5C1862 } .list.tiles img { width: 100%; height: 100%; display: block } .list.tiles .label { position: absolute; top: 52px; left: 0; right: 0; padding: 0 5px; display: inline-block; font-size: 12px; font-weight: 400; line-height: 13px; text-align: center; color: #414A52 } .list.tiles .tile:hover .label { color: #5C1862 } .list.cards-circle { width: 100%; margin: -10px 0 0; padding: 0; list-style-type: none } .list.cards-circle:after, .list.cards-circle:before { content: " "; display: table } .list.cards-circle:after { clear: both } .list.cards-circle .card { width: 50%; margin: 0; padding: 10px; display: block; float: left; text-align: center; vertical-align: top } .list.cards-circle .avatar { position: relative; width: 80px; height: 80px; margin: 0 auto 10px; border-radius: 50% } .list.cards-circle .avatar img { width: 100%; height: 100%; border-radius: 50% } .list.cards-circle .avatar svg { position: absolute; top: 20%; left: 20%; width: 60%; height: 60%; fill: currentColor; background: rgba(248, 202, 47, .5) } .list.cards-circle .text { display: block; font-size: 14px; line-height: 1.4em } .list.cards-circle .text strong { display: block; font-weight: 600; color: #32383D; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal } .list.cards-circle .text span { display: block; font-weight: 400; color: #A3A7AB; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal } .list.cards-circle a { text-decoration: none } .list.cards-covers { width: 100%; margin: 0; padding: 0; list-style-type: none } .list.cards-covers:after, .list.cards-covers:before { content: " "; display: table } .list.cards-covers:after { clear: both } .list.cards-covers>li { position: relative } .list.cards-covers .project-info { position: absolute; top: 10px; left: 10px; color: #FFF } .list.cards-covers .project-info .title { margin: 0 0 10px; font-size: 18px; line-height: 1.1em; font-weight: 600; color: inherit } .list.cards-covers .project-info .text { color: inherit; margin: 0 0 5px; font-size: 14px; line-height: 1.1em; font-weight: 400 } .page-index .g-row { width: 100% } .page-index .g-column.aside { width: 100% } .page-index .g-column.main { width: 100% } .page-list .g-row { width: 100% } .page-list .g-column.aside { width: 100% } .page-list .g-column.main { width: 100% } .fap-results-top { padding: 15px 10px 0; margin-bottom: -10px } .fap-results-top .b-maxwidth { position: relative } .fap-results-top .results-top-breadcrumb { display: none } .fap-results-top .results-top-title { margin: 0 auto 10px; font-size: 18px; font-weight: 400; line-height: 1.1em } .fap-results-top .results-top-powered { display: none } .on-plentific .fap-results-top .results-top-powered { display: none } .fap-results-top .results-top-sort { position: relative; display: block; width: 100%; height: 42px; text-align: left } .fap-results-top .results-top-sort span { font-size: 16px; font-weight: 400; line-height: 42px; vertical-align: middle } .fap-results-top .results-top-sort span.ui-surrogate { display: none } .fap-results-top .results-top-sort select { vertical-align: middle } .fap-results-top .results-top-sort button { vertical-align: middle } .fap-results-top .results-top-sort.js-is-available { padding: 0 15px; background: #FFF; border: 1px solid #DFDFDF; border-radius: 3px } .fap-results-top .results-top-sort.js-is-available span { display: inline-block } .fap-results-top .results-top-sort.js-is-available span.label { color: #5D646A } .fap-results-top .results-top-sort.js-is-available span.ui-surrogate { font-weight: 600 } .fap-results-top .results-top-sort.js-is-available select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; border: none; opacity: 0 } .fap-results-top .results-top-sort.js-is-available button { display: none } .fap-results-top .results-top-sort.js-is-available:after { position: absolute; top: 50%; right: 10px; border-style: solid; border-width: 5px; border-color: transparent; border-top-color: currentColor; margin-top: -2px; content: "" } .fap-results-top .results-average-rating { display: none } .fap-results-top .results-average-rating .ctrl-star-rating { display: inline-block } .fap-results-top .results-average-rating .label { display: inline-block; font-size: 12px; line-height: 16px; vertical-align: text-top; color: #5D646A } .fap-results-related-category-description strong { display: inline-block } .fap-results-related-category-description p { font-size: 12px; line-height: 1.25em } .fap-results-list .featured-items { height: 244px; width: 100% } .fap-results-list .featured-items:after, .fap-results-list .featured-items:before { content: " "; display: table } .fap-results-list .featured-items:after { clear: both } .fap-results-list .featured-items .gutter { margin-right: 3.5% } .fap-results-list .featured-items li { border-radius: 3px; border: 1px solid #DFDFDF; position: relative; width: 31%; height: 228px; overflow: hidden; text-align: center; float: left; background: #fff } .fap-results-list .featured-items li .logo-wrapper { width: 160px; height: 80px; line-height: 80px; margin: 20px auto 10px auto } .fap-results-list .featured-items li .logo-wrapper .logo { max-width: 100%; max-height: 100%; vertical-align: middle } .fap-results-list .featured-items li .logo-wrapper .placeholder .label { display: none } .fap-results-list .featured-items li .company-name { padding: 0; margin: 0 auto; font-size: 16px; height: 32px; width: 180px; overflow: hidden } .fap-results-list .featured-items li .company-name a { color: #32383D } .fap-results-list .featured-items li .verified-badge { padding: 0; margin: 0 auto; color: #00A5EF; height: 18px; font-size: 13px } .fap-results-list .featured-items li .verified-badge .badge { vertical-align: bottom; height: 16px } .fap-results-list .featured-items li .verified-badge span { display: inline-block } .fap-results-list .post-a-job-block { padding: 27px 15px; text-align: center; line-height: normal; margin-bottom: 20px; position: relative; border-radius: 3px; color: #fff; background-color: #ADC4D9 } .fap-results-list .post-a-job-block:after, .fap-results-list .post-a-job-block:before { content: " "; display: table } .fap-results-list .post-a-job-block:after { clear: both } .fap-results-list .post-a-job-block h2 { font-size: 16px; padding: 0; margin: 0 0 10px 0 } .fap-results-list .post-a-job-block p { font-size: 14px; padding: 0; margin: 0 0 27px 0 } .fap-results-list .post-a-job-block .btn--fill { width: 100% } .fap-results-list .list { margin: 0; margin-bottom: 10px; padding: 0; list-style-type: none } .fap-results-list .item { margin-bottom: 10px } .fap-results-list .pict .photo { display: block; width: 100% } .fap-results-list .pict .logo { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute } .fap-results-list .pict .placeholder { height: 100%; padding-top: 20px; text-align: center } .fap-results-list .pict .placeholder .icon { width: 42px; height: 42px; margin: 0 auto; color: #5C1862 } .fap-results-list .pict .placeholder img { width: 100%; height: 100%; display: block } .fap-results-list .pict .placeholder .label { margin: 10px auto 0; padding: 0 5px; display: inline-block; font-size: 11px; font-weight: 400; line-height: 13px; text-align: center; color: #414A52 } .fap-results-list .main { margin-bottom: 20px } .fap-results-list .main .company-name { display: block; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.2em; color: #32383D } .fap-results-list .main .company-name a { color: inherit } .fap-results-list .main .company-subdetails { display: block; margin: 5px 0 0 0; font-size: 12px; font-weight: 400; font-style: italic; line-height: 1.2em; color: #5D646A } .fap-results-list .main .rating-badge { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .fap-results-list .main .verified { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .fap-results-list .main .verified .verified-badge { display: inline-block; width: 24px; height: 24px; margin: 4px 4px 4px 8px } .fap-results-list .main .verified a { font-size: 12px; color: inherit } .fap-results-list .ctrl-star-rating { margin: 5px 0; display: inline-block } .fap-results-list .summary { width: 100%; margin-top: 10px; display: block } .fap-results-list .summary .abstract { width: 100%; margin: 0 auto 10px; padding: 0; font-size: 12px; font-weight: 400; line-height: 1.2em; text-align: left; color: #5D646A } .fap-results-list .summary .basics { margin: 0 auto; padding: 0; display: block; list-style-type: none } .fap-results-list .summary .basics:after, .fap-results-list .summary .basics:before { content: " "; display: table } .fap-results-list .summary .basics:after { clear: both } .fap-results-list .summary .basics:first-child { margin-top: 20px } .fap-results-list .summary li { width: 33%; float: left; padding-top: 40px; display: block; text-align: center; vertical-align: top; background-position: 50% 10px; background-repeat: no-repeat; background-size: 20px 20px } .fap-results-list .summary li.years { background-image: url(../business_partner/images/find-a-pro/summary/years@2x-c57fe905e2.png) } .fap-results-list .summary li.projects { background-image: url(../business_partner/images/find-a-pro/summary/projects@2x-1b6d163cf5.png) } .fap-results-list .summary li.avgcost { background-image: url(../business_partner/images/find-a-pro/summary/avgcost@2x-e4bbe60479.png) } .fap-results-list .summary li.na { opacity: .5 } .fap-results-list .summary span { display: block; font-size: 12px; font-weight: 400; line-height: 1.25em; color: #5D646A } .fap-results-list .summary span.evid { font-weight: 700; color: #32383D } .fap-results-list .ctrl-star-rating+.summary { margin-top: 0 } .fap-results-list .actions { margin: 0 } .fap-results-list .by-location { margin-top: 10px; text-decoration: none; color: #62718A; font-size: 15px } .page-detail .g-row { width: 100% } .page-detail .g-column.aside { width: 100% } .page-detail .g-column.main { width: 100% } .detail-top-breadcrumb { position: relative } .detail-top-breadcrumb .ctrl-fap-breadcrumb { display: none } .detail-top-breadcrumb .back-to-search { color: #3B3A3C; text-decoration: none } .detail-top-breadcrumb .back-to-search .icon { display: inline-block; width: 14px; height: 14px; vertical-align: middle } .detail-top-breadcrumb .back-to-search svg { fill: currentColor } .detail-top-breadcrumb .back-to-search svg path { fill: currentColor } .detail-top-breadcrumb .back-to-search .text { font-size: 14px; font-weight: 600; line-height: 18px; color: inherit; text-decoration: none } .detail-top-breadcrumb .back-to-search:hover .text { text-decoration: underline } .detail-top-header { position: relative; margin: 15px auto 20px; padding: 20px; text-align: left; background-color: #D7D7D7 } .detail-top-header .detail-top-main { color: #FFF } .detail-top-header .detail-top-main .wrapper { position: relative; text-align: center } .detail-top-header .detail-top-main .logo { position: relative; width: 80px; height: 80px; margin: 0 auto 20px; background: #FFF; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .25) } .detail-top-header .detail-top-main .logo img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; max-height: 100% } .detail-top-header .detail-top-main .logo .placeholder .text { display: none } .detail-top-header .detail-top-main .company { margin: 0; padding: 0; font-size: 16px; font-weight: 600; line-height: 1em } .detail-top-header .detail-top-main .company a { text-decoration: none; color: inherit } .detail-top-header .detail-top-main .address { font-size: 14px; font-weight: 400; line-height: 1em; margin-top: 10px } .detail-top-header .detail-top-main .rating { display: none } .detail-top-header .detail-top-main .verified-badge { position: relative; top: 3px; left: 5px; display: inline-block } .detail-top-header .detail-top-main .verified-badge svg { vertical-align: bottom } .detail-top-header .detail-top-main .stats { margin: 5px; display: inline-block; padding: 0 0 0 30px; font-size: 16px; font-weight: 300; line-height: 1em; text-align: left; background-position: 0 0; background-repeat: no-repeat; background-size: 16px 16px } .detail-top-header .detail-top-main .stats.years { background-image: url(../business_partner/images/find-a-pro/summary/years_light-c1048fc317.svg) } .detail-top-header .detail-top-main .stats.projects { background-image: url(../business_partner/images/find-a-pro/summary/projects_light-33aff4789e.svg) } .detail-top-header .detail-top-main .stats .evid { font-weight: 600 } .detail-top-header .detail-top-main .stats a { color: inherit; text-decoration: none } .detail-top-header .detail-top-main .stats a:hover { text-decoration: underline } .detail-top-header .detail-top-navigation { display: none } .detail-sidebar-contact { position: relative; margin-bottom: 20px } .detail-sidebar-contact .card-contact .primary { background: #D64521 } .detail-sidebar-contact .card-contact .primary:hover { background-color: #ab371a } .detail-sidebar-contact .card-contact .primary:active { background-color: #802914 } .detail-sidebar-contact .card-summary { position: relative; margin-top: 20px; padding: 25px 10px; text-align: center; background: #FFF; border: 1px solid #DFDFDF; border-radius: 3px } .detail-sidebar-contact .card-summary .company { margin: 0; padding: 0; color: #32383D; font-size: 16px; font-weight: 400; line-height: 1.25em } .detail-sidebar-contact .card-summary .rating { margin: 10px auto -5px; text-align: center } .detail-sidebar-contact .card-summary .rating .ctrl-star-rating { display: inline-block } .detail-sidebar-contact .card-summary .basics { margin: 20px auto 0; padding: 0; display: inline-block; list-style-type: none } .detail-sidebar-contact .card-summary li { margin: 0; padding: 0 0 0 30px; font-size: 16px; font-weight: 300; line-height: 1em; text-align: left; background-position: 0 0; background-repeat: no-repeat; background-size: 16px 16px } .detail-sidebar-contact .card-summary li.years { background-image: url(../business_partner/images/find-a-pro/summary/years@2x-c57fe905e2.png) } .detail-sidebar-contact .card-summary li.projects { background-image: url(../business_partner/images/find-a-pro/summary/projects@2x-1b6d163cf5.png) } .detail-sidebar-contact .card-summary li.avgcost { background-image: url(../business_partner/images/find-a-pro/summary/avgcost@2x-e4bbe60479.png) } .detail-sidebar-contact .card-summary li.verified { background-image: url(../business_partner/images/find-a-pro/summary/verified@2x-8db7efb024.png) } .detail-sidebar-contact .card-summary li+li { margin-top: 10px } .detail-sidebar-contact .card-summary li .evid { font-weight: 600 } .detail-sidebar-contact .card-summary li a { color: inherit; text-decoration: none } .detail-sidebar-contact .card-summary li a:hover { text-decoration: underline } .detail-sidebar-contact .card-links { display: none } .detail-sidebar-contact .card-links .website { display: block; font-size: 14px; line-height: 20px; color: #5C1862; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all } .detail-sidebar-contact .card-links .socials { margin: 0 auto; text-align: center } .detail-sidebar-contact .card-links .socials a { position: relative; width: 32px; height: 32px; margin: 0 3px; padding: 4px; display: inline-block; text-decoration: none; vertical-align: top; background: #D2D2D2; border-radius: 50% } .detail-sidebar-contact .card-links .socials a:hover { background: #A7A7A7 } .detail-sidebar-contact .card-links .socials a svg { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; fill: #FFF } .detail-sidebar-contact .card-links .socials a svg path { fill: #FFF } .detail-sidebar-contact .card-links .website+.socials { margin-top: 15px } .detail-sidebar-contact .card-location { position: relative; width: 100%; padding: 70px 20px 20px; text-align: center; overflow: hidden; background: #FFF; border: 1px solid #DFDFDF; border-top: none; border-radius: 0 0 3px 3px } .detail-sidebar-contact .card-location .map { position: absolute; top: -40px; left: 50%; z-index: 1; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .detail-sidebar-contact .card-location .address { position: relative; z-index: 2; margin: 0 auto; padding: 5px 10px; display: inline-block; font-size: 12px; line-height: 20px; background: #FFF; border-radius: 3px } .detail-sidebar-social { margin-bottom: 20px; text-align: center } .detail-sidebar-social>.text { margin: 0 auto 10px; display: block; font-size: 12px; line-height: 20px; font-weight: 400; color: #5D646A } .detail-sidebar-social>.button { height: 20px; display: inline-block; vertical-align: top } .badge-plaque { display: inline-block } .badge-plaque .badge-socket { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .badge-plaque .badge-socket .badge-icon { height: 36px; width: 36px } .badge-plaque .badge-plaque-text { margin: 2px 8px; display: inline-block } .badge-plaque .badge-plaque-text .badge-title { font-size: 1.1em; font-weight: 600; padding: 2px; text-align: center } .badge-plaque .badge-plaque-text .badge-subtitle { font-size: .7em; padding: 2px; text-align: center } .badge-info { display: inline-block } .badge-info ul { margin: 2px; padding: 0; list-style-type: none } .badge-info ul li { font-size: .8em; font-weight: 600; padding: 2px } .badge-info ul li:before { font-size: 1.1em; color: orange; padding: 0 7px 0 0; content: '>' } .sidebar-verified { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .sidebar-verified div { margin: 5px auto } .sidebar-verified div p { margin: 0; font-size: 14px; text-align: center; width: 180px } .sidebar-verified div h4 { margin: 0; text-align: center; width: 180px } .sidebar-verified div a { font-size: 11px; color: #5C1862 } .page-detail.overview .fap-detail-overview-services .services-list { margin: 20px 0 0; padding: 0; list-style-type: none } .page-detail.overview .fap-detail-overview-services .services-list .item { display: block; min-height: 32px; margin-bottom: 15px } .page-detail.overview .fap-detail-overview-reviews .fap-featured-reviews { margin: 0; padding: 0; list-style-type: none } .page-detail.overview .fap-detail-overview-reviews .fap-featured-reviews>li { margin: 0 0 10px; padding: 0 0 20px; border-bottom: 1px solid #F8F8F8 } .page-detail.overview .fap-detail-overview-reviews .actions { margin: 20px auto 10px; text-align: center } .page-detail.overview .fap-detail-overview-reviews .actions a { margin: 0 auto } .page-detail.services .fap-detail-services-list .services-list { margin: 20px 0 0; padding: 0; list-style-type: none } .page-detail.services .fap-detail-services-list .services-list .item { display: block; min-height: 32px; margin-bottom: 15px } .page-detail.services .fap-detail-seo-related ul { margin: 10px 0 0; padding: 0; list-style-type: none } .page-detail.services .fap-detail-seo-related li { margin-bottom: 0 } .page-detail.services .fap-detail-seo-related .seo-link { margin: 0; padding: 0; font-size: 14px; line-height: 1.2em; font-weight: 300; color: #414A52 } .page-detail.services .fap-detail-seo-related .seo-link a { color: inherit; text-decoration: none } .page-detail.services .fap-detail-seo-related .seo-link a:hover { text-decoration: underline } .page-detail.projects .fap-projects-list { margin: 0; padding: 0; list-style-type: none } .page-detail.projects .fap-projects-list>li { position: relative; margin: 30px auto; padding: 0 0 30px 0; overflow: hidden; border-bottom: 1px solid #F8F8F8 } .page-detail.projects .fap-projects-list>li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none } .page-detail.projects .fap-projects-list .preview { margin-bottom: 20px } .page-detail.projects .fap-projects-list .preview img { display: block } .page-detail.projects .fap-projects-list .preview .actions { position: absolute; margin: 0; padding: 0; list-style-type: none; display: none } .page-detail.projects .fap-projects-list .preview .actions .picts { top: 140px; left: 10px } .page-detail.projects .fap-projects-list .preview .actions .favs { top: 10px; right: 10px } .page-detail.projects .fap-projects-list .preview .actions .share { top: 140px; right: 10px } .page-detail.projects .fap-projects-list .details .title { margin: 0 auto; font-size: 18px; font-weight: 600; line-height: 1.2em; color: #32383D } .page-detail.projects .fap-projects-list .details .title a { color: inherit } .page-detail.projects .fap-projects-list .details .address { margin: 5px auto; font-size: 14px; font-weight: 400; line-height: 1.2em; color: #32383D } .page-detail.projects .fap-projects-list .details .text { margin: 10px auto; font-size: 14px; font-weight: 300; line-height: 1.2em; color: #32383D; max-height: 4.8em; overflow: hidden } .page-detail.projects .fap-projects-list .details .text a { color: inherit; text-decoration: none } .page-detail.projects .fap-projects-list .details .text>:first-child { margin-top: 0 } .page-detail.projects .fap-projects-list .details .text>:last-child { margin-bottom: 0 } .page-detail.projects .fap-projects-list .details .more { margin: 20px auto 0; font-size: 14px; line-height: 1.2em; color: #32383D } .page-detail.projects.single .description { margin-top: 20px } .page-detail.projects.single .gallery { margin: 20px -10px 0; padding: 0; list-style-type: none } .page-detail.projects.single .gallery:after, .page-detail.projects.single .gallery:before { content: " "; display: table } .page-detail.projects.single .gallery:after { clear: both } .page-detail.projects.single .gallery>li { width: 50%; padding: 3px; display: block; float: left } .page-detail.projects.single .gallery>li img { display: block; width: 100%; height: auto } .page-detail.branches .fap-branches-list { margin: 0; padding: 0; list-style-type: none } .page-detail.branches .fap-branches-list>li { position: relative; margin: 20px auto; padding: 0 0 30px 0; overflow: hidden; border-bottom: 1px solid #F8F8F8 } .page-detail.branches .fap-branches-list>li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none } .page-detail.branches .fap-branches-list .preview { margin-bottom: 20px } .page-detail.branches .fap-branches-list .details .name { margin: 0 auto; font-size: 18px; font-weight: 600; line-height: 1.2em; color: #32383D } .page-detail.branches .fap-branches-list .details .address { margin: 5px auto; font-size: 14px; font-weight: 400; line-height: 1.2em; color: #32383D } .page-detail.branches .fap-branches-list .details .text { margin: 10px auto; font-size: 14px; font-weight: 400; line-height: 1.2em; color: #32383D } .page-detail.branches .fap-branches-list .details .text a { color: inherit; text-decoration: none } .page-detail.branches .fap-branches-list+.b-title { margin-top: 20px; padding-top: 20px; border-top: 1px solid #F8F8F8 } .page-detail.team .fap-team-member .avatar { position: relative; margin: 10px auto 20px; width: 100px; height: 100px; border-radius: 50% } .page-detail.team .fap-team-member .avatar img { width: 100%; height: 100%; border-radius: 50% } .page-detail.team .fap-team-member .details { text-align: center } .page-detail.team .fap-team-member .details .text { margin: 10px auto 0; font-size: 14px; font-weight: 300; line-height: 1.2em; color: #5D646A } .page-detail.team .fap-team-member .details .text a { color: inherit; text-decoration: none } .page-detail.team .fap-team-member .details .text+.text { margin-top: 5px } .page-detail.team .fap-team-member .socials { margin: 10px auto 20px 0; text-align: left } .page-detail.team .fap-team-member .socials a { position: relative; width: 32px; height: 32px; margin: 0; padding: 2px; display: inline-block; text-decoration: none; vertical-align: top; color: #D2D2D2 } .page-detail.team .fap-team-member .socials a:hover { color: #A7A7A7 } .page-detail.team .fap-team-member .socials a svg { display: block; width: 100%; height: 100%; fill: currentColor } .page-detail.team .fap-team-member .socials a svg path { fill: currentColor } .page-detail.reviews.list .fap-reviews-list { margin: 20px 0 0 0; padding: 0; list-style-type: none } .page-detail.reviews.list .fap-reviews-list>li { margin: 30px auto; padding: 0 0 30px; border-bottom: 1px solid #F8F8F8 } .page-detail.reviews.write .back-button { display: inline-block; margin-bottom: 10px } .page-detail.reviews.write .write-review-form { margin-top: 30px } .page-detail.reviews.write .write-review-form textarea#id_review { min-height: 118px } .page-detail.reviews.write .write-review-form .rating-cell select { display: none } .page-detail.reviews.write .write-review-form.no-js .rating-cell select { display: block } .page-detail.reviews.write .write-review-form .ctrl-star-rating { display: block; position: relative; height: 25px; margin: 20px 0 0 0 } .page-detail.reviews.write .write-review-form .ctrl-star-rating .rating-description-box { font-size: 15px } .page-detail.reviews.write .write-review-form .ctrl-star-rating .rating-value { margin-left: 5px; margin-right: 5px; font-family: monospace; line-height: 1em } .page-detail.reviews.write .write-review-form.no-js .ctrl-star-rating { display: none } .page-detail.reviews.write .success-confirmation { text-align: center; max-width: 305px; margin: 85px auto } .page-detail.reviews.write .success-confirmation .description { font-size: 18px; font-weight: 300; line-height: 1em } .page-detail.reviews.write .success-confirmation .btn--fill { margin-top: 50px } .fap-detail-main-claim { position: relative; text-align: center; margin-bottom: 20px; margin-top: 20px } .fap-detail-main-claim a[class^=btn] { margin-top: 20px } .fap-detail-sidebar-awards { position: relative; margin-bottom: 20px } .fap-detail-sidebar-awards ul { margin: 10px auto 0; padding: 0; list-style-type: none; text-align: center } .fap-detail-sidebar-awards li { display: inline-block; width: 50%; border: 5px solid transparent } .fap-detail-sidebar-awards img { max-width: 100% } .fap-detail-sidebar-claim { position: relative; text-align: center; margin-bottom: 20px } .fap-detail-sidebar-claim a[class^=btn] { margin-top: 20px } .fap-detail-sidebar-featured { position: relative; text-align: center } .fap-detail-sidebar-featured .title { display: block; margin: 5px auto 0; font-size: 24px; font-weight: 600; line-height: 1em } .fap-detail-sidebar-featured .text { margin: 10px 0; font-size: 14px; font-weight: 400; line-height: 1.4em } .fap-detail-sidebar-featured .b-box { text-align: left } .fap-detail-sidebar-featured .b-box .logo-wrapper { text-align: center; margin: -20px -15px 20px -15px; position: absolute; width: 75px; height: 75px } .fap-detail-sidebar-featured .b-box .logo-wrapper .logo { margin: 10px auto 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .fap-detail-sidebar-featured .b-box .main { padding-left: 75px } .fap-detail-sidebar-featured .b-box .main .company-name { display: block; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.2em; color: #32383D } .fap-detail-sidebar-featured .b-box .main .company-name a { color: inherit } .fap-detail-sidebar-featured .b-box .main .company-address { display: block; margin: 5px 0 0 0; font-size: 12px; font-weight: 400; line-height: 1.2em; color: #5D646A } .fap-detail-sidebar-featured .b-box .main .ctrl-star-rating { margin: 5px 0 0 0 } .fap-detail-sidebar-featured .b-box .main .count-rating span { font-size: 12px; font-weight: 400; color: #5D646A; text-decoration: none } /*! * baguetteBox.js * @author feimosi * @version 1.3.2 * @url https://github.com/feimosi/baguetteBox.js */ #baguetteBox-overlay { display: none; opacity: 0; position: fixed; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000000; background-color: #222; background-color: rgba(0, 0, 0, .8); -webkit-transition: opacity .5s ease; transition: opacity .5s ease } #baguetteBox-overlay.visible { opacity: 1 } #baguetteBox-overlay .full-image { display: inline-block; position: relative; width: 100%; height: 100%; text-align: center } #baguetteBox-overlay .full-image figure { display: inline; margin: 0; height: 100% } #baguetteBox-overlay .full-image img { display: inline-block; width: auto; height: auto; max-height: 100%; max-width: 100%; vertical-align: middle; box-shadow: 0 0 8px rgba(0, 0, 0, .6) } #baguetteBox-overlay .full-image figcaption { display: block; position: absolute; bottom: 0; width: 100%; text-align: center; line-height: 1.8; color: #ccc; background-color: #000; background-color: rgba(0, 0, 0, .6); font-family: sans-serif } #baguetteBox-overlay .full-image:before { content: ""; display: inline-block; height: 50%; width: 1px; margin-right: -1px } #baguetteBox-slider { position: absolute; left: 0; top: 0; height: 100%; width: 100%; white-space: nowrap; -webkit-transition: left .4s ease, -webkit-transform .4s ease; transition: left .4s ease, transform .4s ease } #baguetteBox-slider.bounce-from-right { -webkit-animation: bounceFromRight .4s ease-out; animation: bounceFromRight .4s ease-out } #baguetteBox-slider.bounce-from-left { -webkit-animation: bounceFromLeft .4s ease-out; animation: bounceFromLeft .4s ease-out } .baguetteBox-button#next-button, .baguetteBox-button#previous-button { top: 50%; top: calc(50% - 30px); width: 44px; height: 60px } .baguetteBox-button { position: absolute; cursor: pointer; outline: 0; padding: 0; margin: 0; border: 0; border-radius: 15%; background-color: #323232; background-color: rgba(50, 50, 50, .5); color: #ddd; font: 1.6em sans-serif; -webkit-transition: background-color .4s ease; transition: background-color .4s ease } .baguetteBox-button:hover { background-color: rgba(50, 50, 50, .9) } .baguetteBox-button#next-button { right: 2% } .baguetteBox-button#previous-button { left: 2% } .baguetteBox-button#close-button { top: 20px; right: 2%; right: calc(2% + 6px); width: 30px; height: 30px } .baguetteBox-button svg { position: absolute; left: 0; top: 0 } .spinner { width: 40px; height: 40px; display: inline-block; position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -20px } .double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #fff; opacity: .6; position: absolute; top: 0; left: 0; -webkit-animation: bounce 2s infinite ease-in-out; animation: bounce 2s infinite ease-in-out } .double-bounce2 { -webkit-animation-delay: -1s; animation-delay: -1s } .page-enquiry .g-row { width: 100% } .page-enquiry .g-column.aside { width: 100% } .page-enquiry .g-column.main { width: 100% } .page-enquiry h3 { margin-bottom: 20px; font-size: 18px; font-weight: 400; line-height: 1em; color: #414A52 } .page-enquiry .company-box:after, .page-enquiry .company-box:before { content: " "; display: table } .page-enquiry .company-box:after { clear: both } .page-enquiry .company-logo { float: left; padding: 10px; width: 33%; height: auto } .page-enquiry .company-logo img { max-width: 100% } .page-enquiry .company-logo svg { width: 100%; height: 100%; fill: currentColor } .page-enquiry .company-logo svg path { fill: currentColor } .page-enquiry .company-info { padding: 10px; width: 66%; float: right } .page-enquiry .company-info h5 { margin-top: 0; margin-bottom: 10px; font-size: 16px } .page-enquiry .company-info a { color: inherit; text-decoration: none } .page-enquiry .company-info a.hover, .page-enquiry .company-info a:hover { text-decoration: underline } .page-enquiry .enquiry-form-box .wrapper, .page-enquiry .partners-box .wrapper, .page-enquiry .success-msg-box .wrapper { padding: 20px } .page-enquiry .partners-box>.wrapper { background-color: #fff } .page-enquiry .partners-box h3 { text-align: center } .page-enquiry .enquiry-form-box>.wrapper { background-color: #FFF } .page-enquiry .enquiry-form-box h3 { margin-left: 10px } .page-enquiry .enquiry-form-box .agreement-box { margin: 0 auto; text-align: center; padding: 20px } .page-enquiry .enquiry-form-box .agreement-box.is-invalid { background-color: #fef7f7 } .page-enquiry .enquiry-form-box .agreement-box .inner-label { margin-left: 7px; line-height: 1.3em; font-size: 14px } .page-enquiry .enquiry-form-box .agreement-box .inner-label a { color: inherit } .page-enquiry.job-enquiry-form { margin-top: 10px; margin-bottom: 10px } .page-enquiry .success-msg-box { text-align: center } .page-enquiry .success-msg-box>.wrapper_outer { background-color: #fff } .page-enquiry .success-msg-box>.wrapper_outer>.wrapper { max-width: 335px; margin: 0 auto; padding-top: 110px; padding-bottom: 110px } .page-enquiry .success-msg-box a.btn--fill { width: 155px } .page-enquiry .success-msg-box .description { font-size: 18px; font-weight: 300; line-height: 1em } .page-enquiry .success-msg-box .subtitle { margin: 50px 0; font-size: 12px; font-weight: 300; line-height: 1em; color: #414A52 } .page-enquiry .actions { text-align: center } .page-enquiry .actions button { width: 155px } .page-enquiry .checkbox-input__label { color: #62718A } .page-enquiry .errors { margin-top: 5px; display: block; font-size: 12px; font-weight: 600; line-height: 20px; text-transform: uppercase; white-space: nowrap; color: red } .page-enquiry .powered { text-align: center; margin: 40px auto 10px } .on-plentific .page-enquiry .powered { visibility: hidden } .page-verified .page-block { text-align: center } .page-verified .badge { margin: 20px auto } .page-verified .main-title { margin: 0 auto 40px; font-family: "Droid Sans", sans-serif; font-size: 24px; font-weight: 600; line-height: 1em; color: #62718A } .page-verified .b-box { max-width: 400px; margin: 0 auto } .page-verified .b-box p { text-align: left; font-size: 16px; font-weight: 400; line-height: 1.5em; color: #62718A } .fap-apply-signup { padding: 20px 10px } .fap-apply-signup .b-page-title { text-align: center; margin: 0 auto 15px; padding: 0; display: block; font-size: 24px; font-weight: 700; line-height: 1.1em } .fap-apply-signup .auth-dialog { max-width: 480px; margin: 0 auto } .fap-apply-signup .auth-dialog .profile { display: block; text-align: right; padding-bottom: 10px; font-size: 11px; line-height: 1.2em; color: #FA7455; cursor: pointer; text-decoration: none } .fap-apply-signup .auth-dialog .view-profile { color: #FA7455; cursor: pointer; text-decoration: none; margin-left: 20px } .fap-apply-signup .auth-dialog .category-item { margin-top: 25px } .fap-apply-signup .auth-dialog .logout-button { position: absolute; right: 10px; font-size: .8em; text-align: right; line-height: 1.2em; color: #FA7455; cursor: pointer; text-decoration: none } .fap-apply-signup .auth-dialog label { max-width: 480px; pointer-events: none } .fap-apply-signup .auth-dialog .terms { position: relative; margin: 20px auto; padding: 0 20px } .fap-apply-signup .auth-dialog .terms+.terms { margin-top: -5px } .fap-apply-signup .auth-dialog .terms input[type=checkbox] { position: absolute; left: 20px } .fap-apply-signup .auth-dialog .terms span { display: block; font-size: 13px } .fap-apply-signup .auth-dialog .terms input[type=checkbox]+span { padding-left: 25px; text-align: left } .fap-apply-signup .auth-dialog .terms a { color: inherit; text-decoration: underline } .fap-apply-signup .auth-dialog .terms .agree { margin-top: 5px; padding-left: 25px; display: block; font-size: 12px; font-weight: 600; line-height: 20px; text-align: left; text-transform: uppercase; white-space: nowrap; color: #E25E5B; display: none } .fap-apply-signup .auth-dialog .terms[is-invalid] .agree { display: block } .fap-apply-signup .auth-dialog .buttons .btn { width: 100%; text-align: center } .fap-apply-signup .auth-dialog .buttons .btn+.btn { margin-top: 5px } .fap-apply-signup .auth-dialog .or { position: relative; margin: 15px auto; height: 15px; font-size: 12px; line-height: 15px; text-align: center; text-transform: uppercase; color: #A3A7AB } .fap-apply-signup .auth-dialog .or:after, .fap-apply-signup .auth-dialog .or:before { position: absolute; top: 50%; content: ""; height: 1px; background: #E8E8E8 } .fap-apply-signup .auth-dialog .or:before { left: 0; right: 58% } .fap-apply-signup .auth-dialog .or:after { left: 58%; right: 0 } .fap-apply-signup .auth-dialog .extra { margin-top: 25px; padding-top: 15px; border-top: 1px solid #E8E8E8 } .fap-apply-signup .auth-dialog .extra p { margin: 10px auto; font-size: 13px; line-height: 1.2em; color: #A7A7A7 } .fap-apply-signup .auth-dialog .extra p a { color: #00A5EF } .fap-apply-signup .actions .error { display: table; padding-bottom: 10px } .fap-apply-signup .call { text-align: center; margin: 0 auto 15px; font-size: 14px; line-height: 1.2em; font-weight: 600 } .fap-apply-signup .call a { display: block; color: #00A5EF; font-size: 24px; font-weight: 300; line-height: 1.4em } .fap-apply-signup .call span { display: block; font-size: 11px; line-height: 1.2em; color: #A3A7AB } .fap-apply-signup #isPartner { padding: 40px; background-color: #fff; text-align: center; line-height: 1 } .business-partner { width: auto; max-width: none; padding: 0 } .business-partner .apply-block { width: 100% } .business-partner .apply-block .header { max-width: 960px; margin: 0 auto; text-align: center } .business-partner .apply-block .content { position: relative; max-width: 960px; margin: 0 auto } .business-partner .apply-block .content.inset { padding: 30px 10px } .business-partner .apply-block .title { margin: 0 auto; padding: 0; font-size: 24px; line-height: 1.1em; font-weight: 700 } .business-partner .apply-block .subtitle { margin: 0 auto; padding: 0; font-size: 13px; line-height: 1.1em; font-weight: 400 } .business-partner .apply-block .title+.subtitle { margin-top: 10px } .business-partner .apply-block.heading { padding: 0; background: url(../business_partner/images/find-a-pro/become-a-pro/backgrounds/fap-apply-top-heading-mobile-818ed85e83.jpg) no-repeat top center; background-size: 120% auto } .business-partner .apply-block.heading .btn--huge.signup-btn { display: none } .business-partner .apply-block.heading .intro { padding: 25px 20px; text-align: center; color: #FFF } .business-partner .apply-block.heading .intro .title span { display: block; font-weight: 300 } .business-partner .apply-block.heading .logos { max-width: 600px; margin: 20px auto; padding: 0; list-style-type: none } .business-partner .apply-block.heading .logos:after, .business-partner .apply-block.heading .logos:before { content: " "; display: table } .business-partner .apply-block.heading .logos:after { clear: both } .business-partner .apply-block.heading .logos li { display: block; float: left; width: 30%; margin-left: 5% } .business-partner .apply-block.heading .logos li:first-child { margin-left: 0 } .business-partner .apply-block.heading .logos img { display: block; max-width: 100%; height: auto } .business-partner .apply-block.how { background: #F8F8F8; text-align: center; padding-left: 0; padding-right: 0 } .business-partner .apply-block.how .content ul { margin: auto; list-style: none; padding: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: -webkit-center } .business-partner .apply-block.how .content ul li { margin-top: 25px; padding: 0 15px 0 15px; width: 280px } .business-partner .apply-block.how .content ul li svg { color: #00A5EF; width: 50px; height: 50px; fill: currentColor } .business-partner .apply-block.how .content ul li svg path { fill: currentColor } .business-partner .apply-block.how .content ul li h3 { display: block; font-size: 16px; font-weight: 700 } .business-partner .apply-block.how .content ul li span { padding: 0; display: block; font-size: 14px } .business-partner .apply-block.easy { background: #FFF } .business-partner .apply-block.easy ul { position: relative; margin: 20px 0 0; padding: 0; list-style: none } .business-partner .apply-block.easy li { position: relative; width: 100%; height: auto; margin: 0 auto 0 0; padding: 0 0 20px } .business-partner .apply-block.easy li .icon { width: 30px; height: 30px; margin-bottom: 10px; display: block; float: left; background: 0 0; border-radius: 50% } .business-partner .apply-block.easy li .icon svg { width: 30px; height: 30px; display: block; fill: currentColor } .business-partner .apply-block.easy li .icon svg path { fill: currentColor } .business-partner .apply-block.easy li strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.2em; margin-left: 50px } .business-partner .apply-block.easy li span { display: block; font-size: 13px; font-weight: 300; line-height: 1.2em; margin-left: 50px } .business-partner .apply-block.easy li .pict { max-width: 400px; margin: 10px auto 0 } .business-partner .apply-block.easy li .pict:after, .business-partner .apply-block.easy li .pict:before { content: " "; display: table } .business-partner .apply-block.easy li .pict:after { clear: both } .business-partner .apply-block.easy li .pict img { max-width: 100%; max-height: 100%; display: block; margin: 0 auto } .business-partner .apply-block.testimonials { text-align: center; background: #F8F8F8 } .business-partner .apply-block.testimonials .testimonials-cards { padding: 0; list-style: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .business-partner .apply-block.testimonials .testimonials-cards .card { position: relative; margin: 10px 0; padding: 15px 10px 15px 90px; text-align: center; vertical-align: top; background: #FFF; border: 1px solid #E8E8E8; border-radius: 3px } .business-partner .apply-block.testimonials .testimonials-cards .card .pict { position: absolute; left: 15px; width: 60px; height: 60px; display: block; overflow: hidden; border-radius: 50% } .business-partner .apply-block.testimonials .testimonials-cards .card .name { display: block; font-size: 16px; font-weight: 600; line-height: 1em; color: #414A52 } .business-partner .apply-block.testimonials .testimonials-cards .card .role { margin-top: 5px; display: block; font-weight: 600; font-size: 12px; line-height: 1em; color: grey } .business-partner .apply-block.testimonials .testimonials-cards .card .text { margin-top: 10px; display: block; font-size: 14px; font-weight: 300; line-height: 1.25em; color: #414A52 } .business-partner .apply-block.testimonials .testimonials-cards .card .logo { max-width: 160px; max-height: 24px; display: block; margin: 15px auto 0 } .business-partner .apply-block.numbers { padding: 0; background: #4EB477 } .business-partner .apply-block.numbers .content { position: relative } .business-partner .apply-block.numbers .content:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient(rgba(78, 180, 119, .7), rgba(78, 180, 119, .7)), url(../business_partner/images/find-a-pro/become-a-pro/backgrounds/fap-apply-numbers-c4fafdfbfa.jpg); background-image: linear-gradient(rgba(78, 180, 119, .7), rgba(78, 180, 119, .7)), url(../business_partner/images/find-a-pro/become-a-pro/backgrounds/fap-apply-numbers-c4fafdfbfa.jpg); background-repeat: repeat, no-repeat; background-position: left top, left top; background-size: cover; content: ""; z-index: 1 } .business-partner .apply-block.numbers table { position: relative; display: block; z-index: 2 } .business-partner .apply-block.numbers tbody { display: block } .business-partner .apply-block.numbers tr { display: block; padding: 20px 0; border: none } .business-partner .apply-block.numbers th { display: block; text-align: center; vertical-align: middle } .business-partner .apply-block.numbers th span { max-width: 320px; display: inline-block; margin: 0 auto; font-size: 14px; font-weight: 600; line-height: 1.2em; text-transform: uppercase; text-align: center; color: #FFF } .business-partner .apply-block.numbers td { display: block; padding: 5px 10px; text-align: center; vertical-align: middle } .business-partner .apply-block.numbers td span { margin: 4px auto 4px; display: block; font-size: 12px; font-weight: 400; line-height: 1em; text-transform: uppercase; color: #FFF } .business-partner .apply-block.numbers td span:first-child { margin-top: 15px } .business-partner .apply-block.numbers td strong { display: block; font-size: 42px; font-weight: 600; line-height: 1em; color: #FFF } .business-partner .apply-block.pricing { text-align: center; background: #FFF } .business-partner .apply-block.pricing table { line-height: 1.1875rem; font-size: .8125rem; table-layout: fixed; width: 100%; text-align: left; border-spacing: 0; border-collapse: collapse; margin-top: 20px } .business-partner .apply-block.pricing thead td { padding: 0; width: auto } .business-partner .apply-block.pricing thead th { padding: 0; width: 150px } .business-partner .apply-block.pricing thead strong { display: block; font-size: 18px; line-height: 78px; font-weight: 600; text-align: center } .business-partner .apply-block.pricing thead .free strong { color: #414A52; background-color: #FDFDFD; border: 1px solid #DDE0E3; border-top-left-radius: 5px; border-right: none; border-bottom: none } .business-partner .apply-block.pricing thead .paid strong { color: #FFF; background-color: #4EB477; border: 1px solid #4EB477; border-top-right-radius: 5px; border-left: none; border-bottom: none } .business-partner .apply-block.pricing tbody tr:nth-child(2n) { background: #FDFDFD } .business-partner .apply-block.pricing tbody td { padding: 12px 20px; text-align: left; vertical-align: top; border: 1px solid #DDE0E3 } .business-partner .apply-block.pricing tbody td strong { display: block } .business-partner .apply-block.pricing tbody td span { display: block } .business-partner .apply-block.pricing tbody td span a { color: #32383D } .business-partner .apply-block.pricing tbody th { padding: 12px 10px; text-align: center; vertical-align: middle; font-weight: 400; border: 1px solid #DDE0E3 } .business-partner .apply-block.pricing tbody th .free { border-right-color: #4EB477 } .business-partner .apply-block.pricing tbody th .paid { border-right-color: #4EB477; border-left-color: #4EB477; border-bottom-color: #B1E2C4 } .business-partner .apply-block.pricing tbody th svg { width: 16px; height: 16px; display: inline-block; vertical-align: inherit; fill: currentColor } .business-partner .apply-block.pricing tbody th svg path { fill: currentColor } .business-partner .apply-block.pricing tbody th .cross { color: #D2D2D2 } .business-partner .apply-block.pricing tbody th .check { color: #4EB477 } .business-partner .apply-block.pricing tbody tr.price .free { font-size: 16px; color: #5D646A } .business-partner .apply-block.pricing tbody tr.price .paid strong { display: block; margin-bottom: 2px; font-size: 32px; line-height: 1em; font-weight: 300; color: #4EB477 } .business-partner .apply-block.pricing tbody tr.price .paid span { display: block; font-size: 13px; font-weight: 300; line-height: 1em; color: #414A52 } .business-partner .apply-block.pricing tbody tr.cta .paid { font-size: 12px; color: #414A52 } .business-partner .apply-block.pricing tbody tr.cta .paid a { text-decoration: none; display: block; font-size: 13px; font-weight: 700; color: #00A5EF } .business-partner .apply-block.pricing .footnote { display: block; margin: 10px; padding: 5px 15px 0; font-size: 12px; text-align: left; color: #5D646A } .business-partner .apply-block.closing-cta { padding-top: 50px; padding-bottom: 50px; text-align: center; background: #62718A url(../business_partner/images/find-a-pro/become-a-pro/backgrounds/fap-apply-bottom-cta-mobile-076a1fef90.jpg) no-repeat top center; background-size: cover } .business-partner .apply-block.closing-cta h2 { color: #FFF } .business-partner .apply-block.closing-cta .btn--huge { margin-top: 20px } .business-partner .apply-block.press { position: relative; max-width: 960px; margin: 0 auto; text-align: center } .business-partner .apply-block.press .content .title { margin: 0 auto; padding: 0; font-size: 24px; line-height: 1.1em; font-weight: 700 } .business-partner .apply-block.press .content #press-logos { margin-top: 20px; padding: 0; text-align: center } .business-partner .apply-block.press .content #press-logos li { display: inline-block; margin: 5px; padding: 0; text-align: center; vertical-align: middle } .business-partner .apply-block.press .content #press-logos li img { height: 20px } .cta-business-apply { text-align: center } .cta-business-apply .text { margin: .8em auto 0; font-size: 14px; font-weight: 400; line-height: 1.4em; color: #414A52 } .cta-business-apply .text strong { display: block; margin-bottom: 5px; font-size: 18px; font-weight: 600; color: #32383D } .cta-business-apply a { margin-top: 15px } .cta-plentific-promise { text-align: center } .cta-plentific-promise .badge { width: 80px; height: 80px; margin: 0 auto; display: block } .cta-plentific-promise a { text-decoration: none } .cta-plentific-promise a:hover strong { text-decoration: underline } .cta-plentific-promise .text { margin: .8em auto 0; font-size: 14px; font-weight: 400; line-height: 1.5em; color: #414A52 } .cta-plentific-promise .text strong { font-size: 18px; font-weight: 600; color: #32383D } .cta-plentific-promise .text em { font-size: 16px; font-weight: 600; font-style: normal; color: #4EB477; vertical-align: top } .cta-post-a-job { text-align: center } .cta-post-a-job .title { display: block; margin: 5px auto 0; font-size: 18px; font-weight: 600; line-height: 1em } .cta-post-a-job .text { margin: 2px auto 0; font-size: 14px; font-weight: 400; line-height: 1.4em } .cta-post-a-job a[class^=btn] { min-width: 150px; margin-top: 15px; font-weight: 700 } .cta-post-a-job .team { margin-top: 20px } .cta-post-a-job .team strong { display: block; font-size: 16px; font-weight: 600 } .cta-post-a-job .team ul { margin: 15px auto 0; padding: 0; list-style-type: none } .cta-post-a-job .team li { width: 28%; max-width: 90px; margin: 0; display: inline-block; vertical-align: top } .cta-post-a-job .team li img { border-radius: 50% } .cta-post-a-job .team li span { font-size: 12px; display: block } .cta-post-a-job .call { margin-top: 20px } .cta-post-a-job .call .or { position: relative; margin: 15px auto; height: 15px; display: block; text-align: center; overflow: hidden } .cta-post-a-job .call .or span { position: relative; height: 15px; padding: 0 10px; display: inline-block; font-size: 12px; line-height: 15px } .cta-post-a-job .call .or span:after, .cta-post-a-job .call .or span:before { position: absolute; width: 100%; top: 50%; content: ""; height: 1px; background: currentColor; opacity: .2 } .cta-post-a-job .call .or span:before { right: 100% } .cta-post-a-job .call .or span:after { left: 100% } .cta-post-a-job .call .number { display: block; margin: 5px auto; font-size: 18px; font-weight: 400; line-height: 1em; text-decoration: none; color: #D64521 } .cta-post-a-job .call .times { margin: 0 auto; font-size: 11px; font-weight: 300; font-style: italic; line-height: 1.5em; opacity: .8 } .cta-post-a-job.evid { color: #FFF; background: #5C1862 } .cta-post-a-job.evid .title { font-size: 21px } .cta-post-a-job.evid a[class^=btn] { background-color: #D64521 } .cta-post-a-job.evid a[class^=btn]:hover { background-color: #cb421f } .cta-post-a-job.evid a[class^=btn]:active { background-color: #c13e1e } .cta-post-a-job.evid .call .number { color: currentColor } .hero-background { background-position: 50% 50%; background-size: cover } .hero-background:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; content: ""; background: -webkit-linear-gradient(top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .9)); background: linear-gradient(to bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, .9)); opacity: .3 } .hero-background.aerial-network-specialist, .hero-background.appliance-installer-repairer, .hero-background.security-specialist { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/network-cables-dce317ed57.jpg) } .hero-background.aerial-network-specialist:before, .hero-background.appliance-installer-repairer:before, .hero-background.security-specialist:before { opacity: .3 } .hero-background.architect-consultant, .hero-background.structural-engineer { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/architect-drawing-f488dda994.jpg) } .hero-background.architect-consultant:before, .hero-background.structural-engineer:before { opacity: .5 } .hero-background.bathroom-specialist { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/bathroom-65c5627f79.jpg) } .hero-background.bathroom-specialist:before { opacity: .4 } .hero-background.bricklayer, .hero-background.builder, .hero-background.driveway-specialist, .hero-background.plasterer-renderer, .hero-background.stoneworker-stonemason, .hero-background.tiler { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/placing-a-brick-8b5092b965.jpg) } .hero-background.bricklayer:before, .hero-background.builder:before, .hero-background.driveway-specialist:before, .hero-background.plasterer-renderer:before, .hero-background.stoneworker-stonemason:before, .hero-background.tiler:before { opacity: .3 } .hero-background.conveyancer { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/two-shaking-hands-15935a15ba.jpg) } .hero-background.conveyancer:before { opacity: .5 } .hero-background.buying-agent, .hero-background.estate-agent, .hero-background.financial-adviser, .hero-background.mortgage-broker, .hero-background.property-manager { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/man-pointing-at-property-a03b3fc950.jpg) } .hero-background.buying-agent:before, .hero-background.estate-agent:before, .hero-background.financial-adviser:before, .hero-background.mortgage-broker:before, .hero-background.property-manager:before { opacity: .4 } .hero-background.cleaner { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/woman-cleaning-900a6e871a.jpg) } .hero-background.cleaner:before { opacity: .3 } .hero-background.asbestos-specialist, .hero-background.damp-proof-specialist, .hero-background.drainage-specialist, .hero-background.insulation-specialist { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/man-insulating-roof-75e458f05c.jpg) } .hero-background.asbestos-specialist:before, .hero-background.damp-proof-specialist:before, .hero-background.drainage-specialist:before, .hero-background.insulation-specialist:before { opacity: .3 } .hero-background.electrician, .hero-background.energy-specialist, .hero-background.handyman, .hero-background.hire-services { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/electrician-08cc28d8ad.jpg) } .hero-background.electrician:before, .hero-background.energy-specialist:before, .hero-background.handyman:before, .hero-background.hire-services:before { opacity: .5 } .hero-background.appliance-stockist, .hero-background.carpet-specialist, .hero-background.fire-safety-consultant, .hero-background.fireplace-specialist, .hero-background.flooring-specialist, .hero-background.furniture-specialist, .hero-background.photographer { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/living-room-with-fireplace-4877f9d88a.jpg) } .hero-background.appliance-stockist:before, .hero-background.carpet-specialist:before, .hero-background.fire-safety-consultant:before, .hero-background.fireplace-specialist:before, .hero-background.flooring-specialist:before, .hero-background.furniture-specialist:before, .hero-background.photographer:before { opacity: .3 } .hero-background.heating-boiler-engineer { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/boiler-5ca895b021.jpg) } .hero-background.heating-boiler-engineer:before { opacity: .6 } .hero-background.interior-designer { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/interior-designer-sketching-0189f39ec0.jpg) } .hero-background.interior-designer:before { opacity: .4 } .hero-background.kitchen-specialist { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/kitchen-c1dd73897c.jpg) } .hero-background.kitchen-specialist:before { opacity: .5 } .hero-background.metalworker { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/man-working-with-metal-2034a3a8a7.jpg) } .hero-background.metalworker:before { opacity: .5 } .hero-background.locksmith { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/man-fixing-lock-ee0d749f6e.jpg) } .hero-background.locksmith:before { opacity: .6 } .hero-background.painter { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/man-painting-5f69c03616.jpg) } .hero-background.painter:before { opacity: .6 } .hero-background.pest-control-specialist { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/man-searching-for-pest-a99f4bba3c.jpg) } .hero-background.pest-control-specialist:before { opacity: .5 } .hero-background.plumber { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/plumber-9a48b6074e.jpg) } .hero-background.plumber:before { opacity: .6 } .hero-background.roofer { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/men-working-on-roof-c0c462a06b.jpg) } .hero-background.roofer:before { opacity: .5 } .hero-background.scaffolder { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/scaffold-around-house-4c006542cf.jpg) } .hero-background.scaffolder:before { opacity: .6 } .hero-background.surveyor { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/two-men-looking-at-map-c107d057f8.jpg) } .hero-background.surveyor:before { opacity: .6 } .hero-background.gardener-landscaper, .hero-background.swimming-pool-specialist, .hero-background.tree-surgeon { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/swimming-pool-in-garden-5b895855af.jpg) } .hero-background.gardener-landscaper:before, .hero-background.swimming-pool-specialist:before, .hero-background.tree-surgeon:before { opacity: .4 } .hero-background.remover { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/man-moving-box-878a0f435c.jpg) } .hero-background.remover:before { opacity: .6 } .hero-background.waste-remover { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/raking-waste-5ab692410d.jpg) } .hero-background.waste-remover:before { opacity: .5 } .hero-background.glass-mirror-specialist, .hero-background.window-conservatory-specialist { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/conservatory-with-windows-e9d380c0e0.jpg) } .hero-background.glass-mirror-specialist:before, .hero-background.window-conservatory-specialist:before { opacity: .6 } .hero-background.building-product-supplier, .hero-background.carpenter-joiner { background-image: url(../business_partner/images/find-a-pro/category-backgrounds/tools-on-wood-2e0c316b59.jpg) } .hero-background.building-product-supplier:before, .hero-background.carpenter-joiner:before { opacity: .4 } .is-hidden { display: none } img { max-width: 100%!important; height: auto; display: block; margin: 0 auto } .primelocation #logo, .zoopla #logo { padding-left: 15px } html body.screen--fap { margin: 0!important; background: #EAECEE!important; padding: 0!important; color: #3B3A3C!important } .zoopla .header { margin-bottom: 0!important } @media (min-width:480px) { .business-partner .apply-block.heading { background-size: 100% auto } } @media (min-width:641px) { .form-linear .cell { margin: 0 9px } .form-linear .cell.half { float: left; width: calc(50% - 18px); clear: none } .form-linear .cell.half:nth-of-type(1)+.cell.half:nth-of-type(2) { border-top: 1px solid #F8F8F8 } .form-linear .cell.half:nth-of-type(1)+.half:nth-of-type(2) { border-top: 1px solid #F8F8F8 } .form-polyvalent.horizontal:after, .form-polyvalent.horizontal:before { content: " "; display: table } .form-polyvalent.horizontal:after { clear: both } .form-polyvalent.horizontal .cell { width: calc(100% - 2px); margin-right: 2px } .form-polyvalent.horizontal .cell+.cell { margin-top: 0 } .form-polyvalent.horizontal .inputs { width: calc(100% - 150px); float: left } .form-polyvalent.horizontal .actions { width: 150px; float: left } .form-polyvalent.horizontal .inputs+.actions { margin-top: 0 } .screen--fap .page-block { padding: 35px 20px } .screen--fap .b-box { padding: 25px 30px } .screen--fap .b-title { margin-bottom: 25px } .screen--fap .b-subtitle { font-size: 18px } .screen--fap .b-title+.b-subtitle { margin-top: -20px } .screen--fap .b-more { right: 30px; font-size: 14px; line-height: 1em; font-weight: 400; color: #5C1862 } .screen--fap .b-actions .btn--fill, .screen--fap .b-actions .btn--outline { width: auto; min-width: 150px } .screen--fap .b-instructions+.b-actions { margin-top: 40px } .ctrl-fap-review { padding-left: 58px } .ctrl-fap-review .avatar { width: 48px; height: 48px } .ctrl-fap-review .author { margin-left: 0 } .ctrl-fap-review .rating { margin-left: 0 } .page-header-search .search-form .cell { width: calc(50% - 2px); float: left } .page-index .page-header-search { padding: 35px 20px 50px } .page-index .page-header-search h1 { font-size: 32px } .page-index .page-header-search h2 { font-size: 24px } .list.alphabetical-grouped { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px } .list.alphabetical-grouped .group { -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid } .list.alphabetical-multicolumn { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px } .list.alphabetical-multicolumn.wider-columns { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1 } .a-z-index .alphabetical-grouped { padding-left: 2em } .list.tiles .icon { top: 15px } .list.tiles .label { top: 62px } .page-index .g-row:after, .page-index .g-row:before { content: " "; display: table } .page-index .g-row:after { clear: both } .page-index .g-column.aside { width: 320px; float: right } .page-index .g-column.main { width: calc(100% - 320px); padding-right: 20px; float: left } .fap-results-top { padding: 15px 20px 30px } .fap-results-top .results-top-breadcrumb { display: block; margin-right: 200px } .fap-results-top .results-top-breadcrumb .ctrl-fap-breadcrumb { color: #A3A7AB } .fap-results-top .results-top-title { font-size: 24px; margin: 20px 200px 0 0 } .fap-results-top .results-top-powered { position: absolute; top: -5px; right: 0; display: block } .fap-results-top .results-top-sort { position: absolute; bottom: -5px; right: 0; width: auto; height: 30px } .fap-results-top .results-top-sort span { font-size: 14px; line-height: 30px } .fap-results-top .results-top-sort.js-is-available { min-width: 120px; margin-left: 60px; text-align: left; padding: 0 30px 0 10px } .fap-results-top .results-top-sort.js-is-available span.label { position: absolute; top: -1px; right: 100%; padding-right: 10px; display: block; text-align: right; line-height: 28px; white-space: nowrap } .fap-results-top .results-top-sort.js-is-available span.ui-surrogate { line-height: 28px } .fap-results-top .results-average-rating { position: absolute; bottom: -40px; right: 0; display: block; text-align: right } .fap-results-list .post-a-job-block { text-align: left; padding: 27px 180px 0 30px } .fap-results-list .post-a-job-block .btn--fill { width: auto; position: absolute; top: 28px; right: 30px; max-width: 140px } .fap-results-list .pict { width: 200px; height: 150px; position: absolute } .fap-results-list .pict .photo { height: 100% } .fap-results-list .pict .placeholder { padding-top: 40px } .fap-results-list .main { min-height: 150px; padding-left: 230px; margin-bottom: 0 } .fap-results-list .main .company-name { margin-right: 100px } .fap-results-list .main .company-subdetails { margin-right: 100px } .fap-results-list .unclaimed.no-logo .pict { height: 60px } .fap-results-list .unclaimed.no-logo .pict .placeholder { padding-top: 0 } .fap-results-list .unclaimed.no-logo .main { min-height: 60px } .fap-results-list .claim { margin: 5px auto 5px 0; padding: 2px 0; display: inline-block; font-size: 12px; font-weight: 400; color: #D64521 } .fap-results-list .summary .basics { max-width: 400px; margin-left: 0 } .fap-results-list .summary li { padding-top: 0; padding-left: 30px; min-height: 20px; text-align: left; background-position: 0 0 } .fap-results-list .actions { position: absolute; top: 20px; right: 20px } .fap-results-list .actions .contact { padding: 5px 20px; display: block } .fap-results-list .actions .contact .speech-icon { display: none } .page-detail .g-row:after, .page-detail .g-row:before { content: " "; display: table } .page-detail .g-row:after { clear: both } .page-detail .g-column.aside { width: 280px; float: right } .page-detail .g-column.main { width: calc(100% - 280px); padding-right: 20px; float: left } .detail-top-breadcrumb .ctrl-fap-breadcrumb { display: block; margin-right: 180px } .detail-top-breadcrumb .back-to-search { position: absolute; top: 0; right: 0 } .detail-top-header { margin-bottom: 30px; padding-top: 50px; padding-bottom: 90px } .detail-top-header .detail-top-main .wrapper { min-height: 150px; padding-top: 0; padding-left: 190px; text-align: left } .detail-top-header .detail-top-main .logo { position: absolute; top: -20px; left: 50%; top: 0; left: 0; width: 150px; height: 150px; margin-left: 0 } .detail-top-header .detail-top-main .company { font-size: 24px } .detail-top-header .detail-top-main .rating { margin-top: 20px; display: block } .detail-top-header .detail-top-main .rating .ctrl-star-rating { display: inline-block } .detail-top-header .detail-top-main .rating .write-review { display: inline-block; height: 14px; margin-left: 15px; padding-top: 2px; font-size: 14px; font-weight: 400; line-height: 14px; color: #FFF; vertical-align: top } .detail-top-header .detail-top-main .verified-badge { top: -1px; left: 4px } .detail-top-header .detail-top-navigation { position: absolute; left: 0; bottom: 0; width: 100%; height: 50px; padding: 0 20px; display: block; text-align: center; background: rgba(0, 0, 0, .35) } .detail-top-header .detail-top-navigation .menu ul { position: relative; left: -20px; max-width: 960px; margin: 0 auto; padding: 0; list-style-type: none; text-align: left } .detail-top-header .detail-top-navigation .menu li { position: relative; display: inline-block; margin: 0; padding: 0; font-size: 18px; font-weight: 400; line-height: 50px; color: #FFF } .detail-top-header .detail-top-navigation .menu li:after { position: absolute; bottom: 0; left: 50%; height: 0; margin-left: -8px; border-width: 10px 8px; border-style: solid; border-color: transparent; border-bottom-color: #EAECEE } .page-detail.overview .detail-top-header .detail-top-navigation .menu li.overview { font-weight: 600 } .page-detail.overview .detail-top-header .detail-top-navigation .menu li.overview:after { content: "" } .page-detail.services .detail-top-header .detail-top-navigation .menu li.services { font-weight: 600 } .page-detail.services .detail-top-header .detail-top-navigation .menu li.services:after { content: "" } .page-detail.projects .detail-top-header .detail-top-navigation .menu li.projects { font-weight: 600 } .page-detail.projects .detail-top-header .detail-top-navigation .menu li.projects:after { content: "" } .page-detail.team .detail-top-header .detail-top-navigation .menu li.team { font-weight: 600 } .page-detail.team .detail-top-header .detail-top-navigation .menu li.team:after { content: "" } .page-detail.branches .detail-top-header .detail-top-navigation .menu li.branches { font-weight: 600 } .page-detail.branches .detail-top-header .detail-top-navigation .menu li.branches:after { content: "" } .page-detail.reviews .detail-top-header .detail-top-navigation .menu li.reviews { font-weight: 600 } .page-detail.reviews .detail-top-header .detail-top-navigation .menu li.reviews:after { content: "" } .detail-top-header .detail-top-navigation .menu a { display: block; height: 50px; padding: 0 10px; text-decoration: none; color: inherit } .detail-top-header .detail-top-navigation .powered { display: none } .detail-sidebar-contact .card-summary { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0 } .detail-sidebar-contact .card-links { position: relative; padding: 20px 20px 25px; display: block; text-align: center; background: #FFF; border-right: 1px solid #DFDFDF; border-left: 1px solid #DFDFDF } .detail-sidebar-contact .card-links:empty { display: none } .detail-sidebar-contact .card-links:before { position: absolute; top: 0; left: 25px; height: 1px; right: 25px; content: ""; background: #E8E8E8 } .page-detail.overview .fap-detail-overview-services .services-list .item { margin-bottom: 25px } .page-detail.services .fap-detail-services-list .services-list .item { margin-bottom: 25px } .page-detail.projects.single .gallery { margin-right: -5px; margin-left: -5px } .page-detail.projects.single .gallery>li { padding: 10px } .page-detail.reviews.write .back-button { position: absolute; top: 30px; right: 30px } .fap-detail-main-claim .b-box { padding-top: 40px; padding-bottom: 40px } .fap-detail-sidebar-claim .b-box { padding-top: 40px; padding-bottom: 40px } .page-enquiry .g-wrap { position: relative } .page-enquiry .g-row:after, .page-enquiry .g-row:before { content: " "; display: table } .page-enquiry .g-row:after { clear: both } .page-enquiry .g-column.aside { width: 320px; float: left } .page-enquiry .g-column.main { width: calc(100% - 320px); padding-left: 20px; float: right } .page-enquiry .powered { position: absolute; bottom: 0; left: 0; width: 320px } .fap-apply-signup .b-page-title { margin-bottom: 25px; font-size: 32px } .fap-apply-signup { padding: 35px 20px } .business-partner .apply-block .content.inset { padding: 60px 20px } .business-partner .apply-block .title { font-size: 32px } .business-partner .apply-block .subtitle { font-size: 14px } .business-partner .apply-block.heading { min-height: 350px; background-image: url(../business_partner/images/find-a-pro/become-a-pro/backgrounds/fap-apply-top-heading-mobile-818ed85e83.jpg); background-position: center center; background-size: cover } .business-partner .apply-block.heading .btn--large.signup-btn { display: none } .business-partner .apply-block.heading .btn--huge.signup-btn { display: inline-block } .business-partner .apply-block.heading .intro { padding: 10px } .business-partner .apply-block.heading .intro .title { margin-top: 35px } .business-partner .apply-block.heading .intro .btn { margin-top: 15px; margin-bottom: 25px } .business-partner .apply-block.how .content { padding-top: 50px; padding-bottom: 40px } .business-partner .apply-block.how .content ul { margin: 60px 0; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .business-partner .apply-block.how .content ul li { margin-top: 5px } .business-partner .apply-block.easy ul { margin-top: 35px } .business-partner .apply-block.easy li { position: static; width: 38.1953% } .business-partner .apply-block.easy li .tab { padding-right: 20px; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCA4IDE2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj48Zz48cGF0aCBkPSJNNi42MjAzNzE3LDguMzI1Mzk1NjkgTDYuNjIwMzcxNyw3LjY3NDYwNDMxIEwwLjYyMDM3MTY5OSwxNC42NzQ2MDQzIEwxLjM3OTYyODMsMTUuMzI1Mzk1NyBMNy4zNzk2MjgzLDguMzI1Mzk1NjkgTDcuNjU4NTM4ODksOCBMNy4zNzk2MjgzLDcuNjc0NjA0MzEgTDEuMzc5NjI4MywwLjY3NDYwNDMxMyBMMC42MjAzNzE2OTksMS4zMjUzOTU2OSBMNi42MjAzNzE3LDguMzI1Mzk1NjkgWiIgZmlsbD0iIzQxNEE1MiI+PC9wYXRoPjwvZz48L3N2Zz4=); background-position: right 50%; background-repeat: no-repeat; background-size: 8px 16px; cursor: pointer; -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out } .business-partner .apply-block.easy li .icon { width: 60px; height: 60px; margin-bottom: 0 } .business-partner .apply-block.easy li .icon svg { width: 40px; height: 40px; margin: 10px } .business-partner .apply-block.easy li strong { margin-left: 80px } .business-partner .apply-block.easy li span { margin-left: 80px; font-size: 14px; line-height: 1.5em } .business-partner .apply-block.easy li .pict { position: absolute; top: 0; right: 0; width: 61.8047%; max-width: none; height: 100%; margin-top: 0; padding-left: 30px; text-align: center } .business-partner .apply-block.easy li .tab { opacity: .3 } .business-partner .apply-block.easy li .tab:hover { opacity: 1 } .business-partner .apply-block.easy li .pict { opacity: 0; -webkit-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out } .business-partner .apply-block.easy li.active .tab { opacity: 1 } .business-partner .apply-block.easy li.active .icon { color: #FFF; background-color: #4EB477 } .business-partner .apply-block.easy li.active strong { color: #4EB477 } .business-partner .apply-block.easy li.active .pict { opacity: 1 } .business-partner .apply-block.testimonials .testimonials-cards { margin-top: 35px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .business-partner .apply-block.testimonials .testimonials-cards .card { max-width: 240px; margin: 0 5px; padding: 20px; display: inline-block } .business-partner .apply-block.testimonials .testimonials-cards .card .pict { position: relative; left: auto; width: 120px; height: 120px; margin: 0 auto 20px } .business-partner .apply-block.testimonials .testimonials-cards .card .name { font-size: 14px } .business-partner .apply-block.testimonials .testimonials-cards .card .text { margin-top: 15px } .business-partner .apply-block.numbers .content:before { position: absolute; left: 33.33333%; width: 66.66667%; background-position: left top, left bottom } .business-partner .apply-block.numbers table { display: table; table-layout: fixed; width: 100%; border-spacing: 0; border-collapse: collapse; border: none; z-index: 2 } .business-partner .apply-block.numbers tbody { display: table-row-group } .business-partner .apply-block.numbers tr { display: table-row; padding: 0; background: 0 0 } .business-partner .apply-block.numbers th { display: table-cell } .business-partner .apply-block.numbers th span { text-align: left } .business-partner .apply-block.numbers td { display: table-cell; padding: 40px 30px } .business-partner .apply-block.numbers td strong { font-size: 48px } .business-partner .apply-block.pricing table { margin-top: 70px } .business-partner .apply-block.closing-cta { padding-top: 50px; padding-bottom: 50px; background-image: url(../business_partner/images/find-a-pro/become-a-pro/backgrounds/fap-apply-bottom-cta-tablet-a03a15df65.jpg) } .business-partner .apply-block.closing-cta .btn--huge { margin-top: 35px } .business-partner .apply-block.press .content #press-logos li img { height: 25px } } @media (min-width:641px) and (min-width:641px) { .detail-top-header .detail-top-navigation .menu a { padding: 0 15px } .detail-top-header .detail-top-navigation .powered { position: absolute; top: 11px; right: 20px; display: block } .on-plentific .detail-top-header .detail-top-navigation .powered { display: none } .detail-sidebar-contact .card-links:before { left: 40px; right: 40px } } @media (min-width:641px) and (min-width:960px) { .detail-top-header .detail-top-navigation .menu a { padding: 0 20px } } @media (min-width:960px) { .form-linear .cell { padding-right: 20px; padding-left: 20px } .form-linear .cell[type=simplecheck]>label { left: 43px } .form-linear .cell>label { left: 20px; right: 20px } .form-linear .cell>span { right: 20px } .form-linear .cell>span { padding: 0 20px } .form-polyvalent .cell { padding-right: 20px; padding-left: 20px } .form-polyvalent .cell>label { left: 20px; right: 20px } .form-polyvalent .cell>span { right: 20px } .form-polyvalent .cell>span { padding: 0 20px } .form-polyvalent .autocomplete-list .autocomplete-option, .form-polyvalent .autocomplete-list .item { padding: 15px 20px } .ctrl-fap-review { padding-left: 85px } .ctrl-fap-review .avatar { width: 70px; height: 70px } .page-index .page-header-search { padding-top: 50px; padding-bottom: 40px } .page-index .page-header-search h1 { font-size: 36px } .list.alphabetical-grouped { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3 } .list.alphabetical-multicolumn { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3 } .list.alphabetical-multicolumn.wider-columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2 } .a-z-index .alphabetical-index { position: absolute; top: 5px; right: 30px } .list.tiles .tile { width: 24% } .list.cards-circle .avatar { width: 100px; height: 100px } .page-list .g-row:after, .page-list .g-row:before { content: " "; display: table } .page-list .g-row:after { clear: both } .page-list .g-column.aside { width: 240px; float: left } .page-list .g-column.main { width: calc(100% - 240px); padding-left: 20px; float: right } .page-detail .g-column.aside { width: 320px } .page-detail .g-column.main { width: calc(100% - 320px) } .page-detail.overview .fap-detail-overview-reviews .fap-featured-reviews { margin: 0 -20px } .page-detail.overview .fap-detail-overview-reviews .fap-featured-reviews>li { margin-bottom: 0; padding-right: 20px; padding-left: 20px; border-bottom: none } .page-detail.overview .fap-detail-overview-reviews .actions { margin-top: 20px } .page-detail.projects .fap-projects-list>li { margin: 30px auto; padding-left: 270px } .page-detail.projects .fap-projects-list .preview { position: absolute; top: 0; left: 0; width: 240px; height: 200px; overflow: hidden } .page-detail.projects .fap-projects-list .details { min-height: 200px } .page-detail.branches .fap-branches-list>li { margin: 30px auto; padding-left: 270px } .page-detail.branches .fap-branches-list .preview { position: absolute; top: 0; left: 0; width: 240px; height: 200px; margin-bottom: 0; overflow: hidden } .page-detail.branches .fap-branches-list .preview img { display: block } .page-detail.branches .fap-branches-list .details { min-height: 200px } .page-detail.branches .fap-branches-list+.b-title { margin-top: 30px } .page-detail.team .fap-team-member .avatar { display: block; float: left; margin: 0 auto 30px 0; width: 120px; height: 120px } .page-detail.team .fap-team-member .details { margin-left: 150px; text-align: left } .page-detail.team .fap-team-member .bio { clear: left } .business-partner .apply-block .content.inset { padding-top: 90px; padding-bottom: 90px } .business-partner .apply-block .title { font-size: 36px } .business-partner .apply-block .subtitle { font-size: 16px } .business-partner .apply-block.heading { background-image: url(../business_partner/images/find-a-pro/become-a-pro/backgrounds/fap-apply-top-heading-mobile-818ed85e83.jpg); min-height: 450px } .business-partner .apply-block.heading .intro { padding: 20px } .business-partner .apply-block.heading .intro .title { margin-top: 70px } .business-partner .apply-block.heading .intro .btn { margin-top: 30px; margin-bottom: 30px } .business-partner .apply-block.heading .logos { margin-top: 30px } .business-partner .apply-block.how .content { padding-top: 50px; padding-bottom: 40px } .business-partner .apply-block.easy ul { height: 350px; padding: 20px 0 } .business-partner .apply-block.easy li { padding: 20px 0 } .business-partner .apply-block.numbers td { padding-top: 65px; padding-bottom: 65px } .business-partner .apply-block.numbers td span { font-size: 14px } .business-partner .apply-block.numbers td strong { font-size: 60px } .business-partner .apply-block.closing-cta { padding-top: 160px; padding-bottom: 160px; background-image: url(../business_partner/images/find-a-pro/become-a-pro/backgrounds/fap-apply-bottom-cta-desktop-c8a128d21b.jpg) } .business-partner .apply-block.press .content #press-logos li img { height: 35px } } @media (max-width:768px) { .zoopla .header-main { padding-top: 1px; padding-bottom: 10px } .zoopla .wrap { width: auto!important } .zoopla .content-wrapper { margin: 0 auto!important } .zoopla .header .main-nav { display: none!important } .zoopla .main-nav-top-item { float: none!important; display: inline-block!important } .zoopla #logo { float: none!important } .zoopla .header .wrap { text-align: center!important } .zoopla .footer .wrap { text-align: center!important } .zoopla .header-sub .wrap { text-align: center!important } .primelocation .wrap { width: auto!important } .primelocation #logo { float: none!important } .primelocation #logo img { margin: 0 auto!important } .primelocation #pl-main-nav { display: none!important } .primelocation .header-sub { display: none!important } .primelocation .header-sub .wrap { text-align: center!important } } @media (max-width:640px) { .screen--fap .b-more { width: 24px; height: 24px; overflow: hidden; text-indent: -9999px } .screen--fap .b-more:after { position: absolute; top: 0; right: 0; width: 24px; height: 24px; content: ""; background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#5C1862" d="M3.75 11.25h14.572l-7.579-6.947c-.305-.28-.325-.755-.046-1.06.28-.305.755-.326 1.06-.046l9 8.25.011.012.06.068.038.046.051.089.022.041.038.119.008.025.016.154-.016.154-.007.024-.039.12-.022.041-.051.089-.038.045-.06.068-.01.012-9 8.25c-.144.132-.325.197-.506.197-.203 0-.406-.082-.553-.243-.28-.306-.26-.78.046-1.06l7.579-6.947h-14.572c-.414 0-.75-.336-.75-.75s.336-.75.75-.75" /></svg>'); background-repeat: no-repeat; background-size: 100% 100% } .page-index .page-header-search .search-form .cell+.cell { margin-top: 4px } .fap-results-list .featured-items { height: auto } .fap-results-list .featured-items li .logo-wrapper { height: auto } .fap-results-list .featured-items li .company-name { font-size: 16px; font-weight: 600; height: auto; max-height: 32px; width: 80% } .fap-results-list .featured-items li .verified-badge small { font-size: 11px } .fap-results-list .featured-items li .verified-badge { font-size: 13px } .fap-results-list .featured-items li { width: 100%; height: auto; float: none; margin-bottom: 20px; padding-bottom: 20px } .fap-results-list .item .b-box { padding: 0; margin-bottom: 10px } .fap-results-list .pict { width: 70px; height: 70px; position: absolute; top: 10px; left: 10px } .fap-results-list .pict .photo { height: auto; border-radius: 3px 3px 0 0 } .fap-results-list .pict .placeholder { padding-top: 10px } .fap-results-list .main { min-height: 75px; padding-left: 80px; margin: 7px } .fap-results-list .ctrl-star-rating { margin: 4px 0 } .fap-results-list .claim { display: none } .fap-results-list .summary { display: none } .fap-results-list .summary .basics { display: none } .fap-results-list .actions .contact { margin: 0 auto; width: 100%; padding: 3px; border: none; border-top: 1px solid #d3d3d3 } .fap-results-list .actions .contact .speech-icon { height: 11px; width: 11px; display: inline-block; margin: 0 3px; background-image: url(../business_partner/images/find-a-pro/summary/speech_bubble-bbbfbf18c5.svg) } .detail-sidebar-contact .card-location { display: none } .detail-sidebar-social { display: none } .fap-detail-sidebar-awards { display: none } .business-partner .apply-block.pricing table, .business-partner .apply-block.pricing tbody, .business-partner .apply-block.pricing td, .business-partner .apply-block.pricing th, .business-partner .apply-block.pricing thead, .business-partner .apply-block.pricing tr { display: block } .business-partner .apply-block.pricing tr:after, .business-partner .apply-block.pricing tr:before { content: " "; display: table } .business-partner .apply-block.pricing tr:after { clear: both } .business-partner .apply-block.pricing thead th { width: 50%; float: left } .business-partner .apply-block.pricing tbody tr { border: 1px solid #DDE0E3; border-top: none } .business-partner .apply-block.pricing tbody td { width: 100%; padding-bottom: 5px; border: none } .business-partner .apply-block.pricing tbody th { width: 50%; padding-bottom: 15px; float: left; border: none } .business-partner .apply-block.pricing tbody th.paid { border-left: 1px dotted #DDE0E3 } } @-webkit-keyframes bounceFromRight { 0% { margin-left: 0 } 50% { margin-left: -30px } 100% { margin-left: 0 } } @keyframes bounceFromRight { 0% { margin-left: 0 } 50% { margin-left: -30px } 100% { margin-left: 0 } } @-webkit-keyframes bounceFromLeft { 0% { margin-left: 0 } 50% { margin-left: 30px } 100% { margin-left: 0 } } @keyframes bounceFromLeft { 0% { margin-left: 0 } 50% { margin-left: 30px } 100% { margin-left: 0 } } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0) } 50% { -webkit-transform: scale(1); transform: scale(1) } } @keyframes bounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0) } 50% { -webkit-transform: scale(1); transform: scale(1) } }</style></head><body> <div class="b-box"> <h3 class="b-title">Most popular professional categories</h3> <div> <ul class="list tiles"> <li class="tile"> <a href="/find-a-pro/c/architect-consultant/" title="Architect / Consultant"> <div class="icon"> <img src="//static.plentific.com/find-a-pro/static/business_partner/images/find-a-pro/icons/zoopla/services/architect-consultant.png" alt="Architect / Consultant"> </div> <span class="label">Architect / Consultant</span> </a> </li> <li class="tile"> <a href="/find-a-pro/c/builder/" title="Builder"> <div class="icon"> <img src="//static.plentific.com/find-a-pro/static/business_partner/images/find-a-pro/icons/zoopla/services/builder.png" alt="Builder"> </div> <span class="label">Builder</span> </a> </li> <li class="tile"> <a href="/find-a-pro/c/carpenter-joiner/" title="Carpenter / Joiner"> <div class="icon"> <img src="//static.plentific.com/find-a-pro/static/business_partner/images/find-a-pro/icons/zoopla/services/carpenter-joiner.png" alt="Carpenter / Joiner"> </div> <span class="label">Carpenter / Joiner</span> </a> </li> <li class="tile"> <a href="/find-a-pro/c/conveyancer/" title="Conveyancer"> <div class="icon"> <img src="//static.plentific.com/find-a-pro/static/business_partner/images/find-a-pro/icons/zoopla/services/conveyancer.png" alt="Conveyancer"> </div> <span class="label">Conveyancer</span> </a> </li> <li class="tile"> <a href="/find-a-pro/c/electrician/" title="Electrician"> <div class="icon"> <img src="//static.plentific.com/find-a-pro/static/business_partner/images/find-a-pro/icons/zoopla/services/electrician.png" alt="Electrician"> </div> <span class="label">Electrician</span> </a> </li> <li class="tile"> <a href="/find-a-pro/c/gardener-landscaper/" title="Gardener / Landscaper"> <div class="icon"> <img src="//static.plentific.com/find-a-pro/static/business_partner/images/find-a-pro/icons/zoopla/services/gardener-landscaper.png" alt="Gardener / Landscaper"> </div> <span class="label">Gardener / Landscaper</span> </a> </li> <li class="tile"> <a href="/find-a-pro/c/heating-boiler-engineer/" title="Heating / Boiler Engineer"> <div class="icon"> <img src="//static.plentific.com/find-a-pro/static/business_partner/images/find-a-pro/icons/zoopla/services/heating-boiler-engineer.png" alt="Heating / Boiler Engineer"> </div> <span class="label">Heating / Boiler Engineer</span> </a> </li> <li class="tile"> <a href="/find-a-pro/c/locksmith/" title="Locksmith"> <div class="icon"> <img src="//static.plentific.com/find-a-pro/static/business_partner/images/find-a-pro/icons/zoopla/services/locksmith.png" alt="Locksmith"> </div> <span class="label">Locksmith</span> </a> </li> <li class="tile"> <a href="/find-a-pro/c/painter/" title="Painter"> <div class="icon"> <img src="//static.plentific.com/find-a-pro/static/business_partner/images/find-a-pro/icons/zoopla/services/painter.png" alt="Painter"> </div> <span class="label">Painter</span> </a> </li> <li class="tile"> <a href="/find-a-pro/c/plumber/" title="Plumber"> <div class="icon"> <img src="//static.plentific.com/find-a-pro/static/business_partner/images/find-a-pro/icons/zoopla/services/plumber.png" alt="Plumber"> </div> <span class="label">Plumber</span> </a> </li> <li class="tile"> <a href="/find-a-pro/c/structural-engineer/" title="Structural Engineer"> <div class="icon"> <img src="//static.plentific.com/find-a-pro/static/business_partner/images/find-a-pro/icons/zoopla/services/structural-engineer.png" alt="Structural Engineer"> </div> <span class="label">Structural Engineer</span> </a> </li> <li class="tile"> <a href="/find-a-pro/c/surveyor/" title="Surveyor"> <div class="icon"> <img src="//static.plentific.com/find-a-pro/static/business_partner/images/find-a-pro/icons/zoopla/services/surveyor.png" alt="Surveyor"> </div> <span class="label">Surveyor</span> </a> </li> </ul> </div> </div> </body></html>

Related: See More


Questions / Comments: