<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>
