.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;overflow:hidden;display:block;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.slick-track{position:relative;left:0;top:0;display:block;margin-left:auto;margin-right:auto}.slick-track:before,.slick-track:after{content:"";display:table}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{float:left;height:100%;min-height:1px;display:none}[dir="rtl"] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}.slick-slider{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.slick-slide{outline:none}.slick-list{width:100%;order:1}.slick-dots{list-style:none;padding:0;margin:0;line-height:12px;text-align:center}.slick-dots li{display:inline-block;cursor:pointer;padding:9px 0}.slick-dots li+li{margin-left:12px}.slick-dots li button{width:12px;height:12px;vertical-align:top;padding:0;background:none;font-size:0;border-radius:50%;color:inherit;border:2px solid;opacity:0.25;transition:0.2s;outline:none;cursor:pointer}.slick-dots li:hover button,.slick-dots li.slick-active button{border-width:6px;opacity:1}.slick-dots li:first-child:last-child{display:none}.slick-arrow{width:36px;height:30px;display:block;position:relative;z-index:10;text-align:center;font-size:0;background:none;border:none;color:inherit;padding:0;outline:none;margin:0;left:unset;right:unset;opacity:0.25}.slick-arrow:not(.slick-disabled):hover{opacity:1;cursor:pointer}.slick-arrow:before,.slick-arrow:after{content:"";display:block;position:absolute;top:50%;left:0;width:16px;border-top:2px solid;margin-top:-1px}.slick-arrow:before{transform:rotate(-45deg);transform-origin:bottom left}.slick-arrow:after{transform:rotate(45deg);transform-origin:top left}.slick-arrow.slick-next{transform:scaleX(-1)}.slick-prev{order:2}.slick-dots{order:3}.slick-next{order:4}.slick-slider .slick-track{display:flex}.slick-slider .slick-track .slick-slide{height:auto}.slick-slider a{outline:none} .col.slick-slide {
flex: unset;
} *,
*:before,
*:after {
box-sizing: border-box;
}
:root {
--salmon: hsl(6deg, 100%, 70%);
--grey: #69747C;
--black: hsl(215deg, 50%, 20%);
--primary: var(--salmon);
--secondary: var(--black);
--bg-grey: hsl(215deg, 50%, 95%);
--window-inner-width: 100vw;
--container-margin: max(7.5vw, calc((var(--window-inner-width) - 1440px) / 2));
--header-height: 204px;
}
@media (color-gamut: p3) {
:root {
--salmon: oklch(0.7244 0.18 28.42);
}
}
@media (max-width: 1023px) {
:root {
--header-height: 144px;
}
}
@media (max-width: 567px) {
:root {
--container-margin: 30px;
--header-height: 136px;
}
}
body.has-scrolled-down {
--header-height: 136px;
}
body {
margin: 0;
background-color: #fff;
color: var(--black);
font-family: 'Inter', sans-serif;	
font-size: 16px;
line-height: 1.6;
letter-spacing: -0.005em;
position: relative;
font-optical-sizing: auto;
padding-top: var(--header-height);
}
.hidden-fields-container,
.screen-reader-response,
.screen-reader-text,
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.bg-primary {
background: var(--primary);
color: #fff;
}
.bg-black {
background: var(--black);
color: #fff;
}
.bg-black a {
color: inherit;
}
.bg-bg-grey {
background: var(--bg-grey);
}
@media (min-width: 1200px) {
.bg-primary + .bg-primary {
padding-left: 0 !important;
}
}
img {
max-width: 100%;
height: auto;
}
a,
a u {
color: inherit;
text-decoration: none;
} @keyframes underline {
0% {
transform-origin: right;
transform: scaleX(1);
}
40% {
transform-origin: right;
transform: scaleX(0); }
60% {
transform: scaleX(0);
transform-origin: left; }
100% {
transform-origin: left;
transform: scaleX(1); }
}
a u,
small a {
display: inline-block;
position: relative;
}
small a:after,
a u:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
border-top: 1px solid;
transform-origin: right;
}
h2 a u {
line-height: 1.6;
}
h2 a u:after {
border-top-width: 2px;
}
.current-menu-item a:hover:after,
.current_page_parent a:hover:after,
small a:hover:after,
a:hover u:after {
animation-name: underline;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.link-contact {
line-height: 24px;
color: var(--primary);
display: inline-flex;
align-items: center;
}
.link-contact svg {
width: 24px;
height: 24px;
vertical-align: top;
color: inherit;
margin-right: 20px;
}
h1, h2, h3, h4, p, ul {
margin: 0 0 20px;
}
h1, h2, h3, h4 {
font-weight: 600;
line-height: 1.333;
letter-spacing: -0.025em;
font-family: 'Plus Jakarta Sans', sans-serif;
} h1, h2 {
font-size: 30px; line-height: 1.25;
}
h3 {
font-size: 20px; font-weight: 500;
}
h4 {
font-family: inherit;
font-weight: 500;
font-size: 20px;
}
b, strong {
font-weight: 600;
}
h1 b,
h2 b,
h3 b {
font-weight: inherit;
}
p {
max-width: 36em;
}
.center {
text-align: center;
}
.center p {
margin-left: auto;
margin-right: auto;
}
@media (min-width: 568px) and (max-width: 1023px) {
.center-on-tablet {
text-align: center;
}
.center-on-tablet p,
.center-on-tablet .rating-stars {
margin-left: auto;
margin-right: auto;
}
.center-on-tablet .highlighted {
justify-content: center;
}
}
@media (max-width: 567px) {
.center-on-mobile {
text-align: center;
}
.center-on-mobile p,
.center-on-mobile .rating-stars {
margin-left: auto;
margin-right: auto;
}
.center-on-mobile .highlighted {
justify-content: center;
}
}
ul {
padding: 0;
list-style: none;
}
hr {
margin: 30px 0;
border: none;
border-top: 1px solid;
}
small {
display: block;
font-size: 13px;
}
h1 small {
font-size: 30px;
} figure {
margin: 0;
}
blockquote {
margin: 30px 0;
padding: 0;
border-left: 3px solid;
padding-left: 40px;
text-align: left;
}
@media (min-width: 568px) {
h1, h2 {
font-size: 35px;
}
.lede {
font-size: 18px; 
}
hr {
margin: 40px 0;
}
}
@media (min-width: 1200px) {
.heading-lg {
line-height: 1;
font-size: 50px;
margin-bottom: 30px;
}
.heading-md {
font-size: 42px;
}
}
@media (min-width: 1600px) {
h3,
.lede-lg {
font-size: 24px;
}
.lede {
font-size: 20px;
}
} .icon svg,
.icon img {
width: 32px;
height: 32px;
vertical-align: top;
} .entry-content a:not(.btn) {
color: var(--primary);
border-bottom: 1px solid;
}
.entry-content .child-pages a {
color: inherit;
border: none;
display: inline-block;
font-size: 1.1em;
max-width: 28em;
}
.entry-content .child-pages a:hover {
color: var(--primary);
}
.entry-content p,
.entry-content ul {
max-width: 44em;
}
.entry-content h1 {
margin-bottom: 40px;
}
.entry-content h3 {
max-width: 24em;
}
.entry-content h2 {
margin-bottom: 30px;
scroll-margin-top: 120px;
}
.entry-content .pullout {
margin: 80px auto;
padding: 50px;
padding-bottom: 30px;
background: linear-gradient(to bottom right, var(--bg-grey) 50%, hsl(6deg, 100%, 70%, 0.1));
border-left: 3px solid var(--primary);
}
.entry-content .pullout,
.entry-content img {
display: block;
clip-path: polygon(0px 0px, calc(100% - 80px) 0px, 100% 80px, 100% 100%, 0px 100%);
}
.entry-content img {
width: 100%;
margin: 60px 0;
}
@media (min-width: 568px) {
.entry-content h2 {
padding-right: 10%;
}
}
@media (max-width: 567px) {
.entry-content h2 {
font-size: 24px;
}
.entry-content .pullout {
padding: 40px;
padding-bottom: 20px;
}
.entry-content .pullout,
.entry-content img {
clip-path: polygon(0px 0px, calc(100% - 40px) 0px, 100% 40px, 100% 100%, 0px 100%);
}
} .entry-content blockquote {
margin: 50px 0;
padding: 0 50px;
border-left: 3px solid var(--primary);
}
.entry-content ul + h2,
.entry-content ol + h2,
.entry-content p + h2,
.entry-content h4 + h3,
.entry-content p + h3,
.entry-content ul + h3,
.entry-content ol + h3,
.entry-content .content-expander-container + h2,
.entry-content .content-expander-container + h3 {
margin-top: 50px;
}
.entry-content ul li {
padding-left: 30px;
position: relative;
}
.entry-content ul li:before {
content: ""; position: absolute;
left: 0;
top: calc((1.6em / 2) - 3px);
width: 6px;
height: 6px;
border: 3px solid;
color: var(--primary);
}
.entry-content ul li + li {
margin-top: 10px;
}
.entry-content ul li li:before {
border: 1px solid;
}
@media (min-width: 1024px) {
.entry-content {
font-size: 18px;
}
} .content-expander-container.expanded .state-inactive,
.content-expander-container:not(.expanded) .state-active,
.content-expander-container:not(.expanded) .expandable-content {
display: none;
}
.content-expander-container {
position: relative;
}
.content-expander-container .btn svg {
transition: transform 0.3s;
}
.content-expander-container.expanded .btn svg {
transform: rotate(180deg);
}
.content-expander-container:not(.expanded):before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: calc(100% + 20px);
height: 6.4em;
background: linear-gradient(rgba(255,255,255,0), #fff);
}
.entry-content ul + .content-expander-container ul {
margin-top: -20px;
} .container {
width: 85%;
margin-left: auto;
margin-right: auto;
max-width: 1440px;
}
@media (max-width: 567px) {
.container {
width: 100%;
padding-left: 30px;
padding-right: 30px;
}
}
.row {
display: flex;
flex-wrap: wrap;
margin: 0 -20px -40px;
}
.row.no-gutter {
margin: 0;
}
.row.no-gutter > .col {
padding: 0;
}
.row.small-gutter {
margin: 0 -10px -20px;
}
.row.small-gutter > .col {
padding: 0 10px 20px;
}
@media (max-width: 567px) {
.hide-on-mobile,
.hidden-mobile {
display: none !important;
}
}
@media (min-width: 568px) {
.show-on-mobile,
.hidden-not-mobile {
display: none !important;
}
}
@media (min-width: 568px) and (max-width: 1023px) {
.show-on-tablet {
display: block !important;
}
.hide-on-tablet {
display: none !important;
}
}
@media (min-width: 1025px) {
.show-on-tablet {
display: none !important;
}
}
@media (min-width: 1024px) {
.row.wide-gutter {
margin: 0 -30px -60px;
}
.row.wide-gutter > .col {
padding: 0 30px 60px;
}
}
@media (min-width: 1600px) {
.row.x-wide-gutter {
margin: 0 -40px -80px;
}
.row.x-wide-gutter .col {
padding: 0 40px 80px;
}
}
.col {
flex-basis: 0;
flex-grow: 1;
padding: 0 20px 40px;
min-width: 240px;
}
.col-auto {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
min-width: 0;
max-width: 100%;
}
.col-20,
.col-25,
.col-30,
.col-33,
.col-50,
.col-60,
.col-66,
.col-70,
.col-100 {
flex-basis: 100%;
flex-grow: 0;
flex-shrink: 0;
}
@media (min-width: 1024px) {
.col-30,
.col-33,
.col-25,
.col-20,
.col-50 {
flex-basis: 50%;
}
}
@media (min-width: 1200px) {
.col-25,
.col-20 {
flex-basis: 25%;
}
.col-30 {
flex-basis: 30%;
}
.col-33 {
flex-basis: 33.333%;
}
.col-45 {
flex-basis: 45%;
} .col-60 {
flex-basis: 60%;
}
.col-66 {
flex-basis: 66.666%;
}
.col-70 {
flex-basis: 70%;
}
.col-75 {
flex-basis: 75%;
}
}
@media (min-width: 1700px) {
.col-20 {
flex-basis: 20%;
}
} .header-bar {
border-bottom: 1px solid var(--bg-grey);
overflow: hidden;
font-size: 14px;
line-height: 44px;
max-height: 44px;
}
.header-bar a {
display: inline-flex;
vertical-align: top;
align-items: center;
}
.header-bar-right a {
padding: 0 20px;
position: relative;
}
@media (hover: hover) {
.header-bar-right a:hover { color: var(--primary);
}
}
.header-bar-right a + a {
margin-left: -1px;
}
.header-bar-right a + a:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-left: 1px solid var(--bg-grey);
}
.header-bar-right svg {
margin-right: 10px;	
color: var(--salmon);
}
.header-bar-right a:hover svg {
opacity: 1;
}
.header-bar-right .label {
opacity: 0.5;
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
margin-right: 10px;
transform: translateY(1px);
}
@media (min-width: 568px) {
.header-bar-right a:last-child { margin-right: -20px;
}
}
@media (max-width: 374px) {
.header-bar-right a[href^="mailto:"] {
display: none !important;
}
}
@media (max-width: 567px) {
.header-bar .col:first-child,
.header-bar-right {
transition: transform 0.3s, opacity 0.3s;
}
.header-bar-right {
position: absolute;
}
.header-bar-right a {
padding: 0 15px;
}
body:not(.has-scrolled-down) .header-bar-right {
opacity: 0;
transform: translateX(30px);
pointer-events: none;
}
body.has-scrolled-down .header-bar .col:first-child {
opacity: 0;
transform: translateX(-30px);
pointer-events: none;
}
}
@media (max-width: 1023px) {
.header-bar-right {
padding-right: 0;
padding-left: 0;
}
}
@media (max-width: 1199px) {
.header-bar-right .label {
display: none;
}
} .site-header {
position: fixed;
top: 0;
width: 100%;
background: #fff;
z-index: 100;
transition: 0.3s;
}
body.has-scrolled-down .site-header {
box-shadow: 0 0 80px hsla(215deg, 100%, 50%, 0.1);
}  .site-header nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.site-header nav li {
padding: 0;
}
.site-header nav li:before {
display: none;
} @keyframes animateLabel {
0% {
transform: translateY(10px);
}
100% {
transform: none;
}
}
.infield-label label.gfield_label {
margin-left: 15px !important;
}
.infield-label label.gfield_label,
label.infield {
position: absolute;
top: 18px;
left: 21px;
z-index: 5;
pointer-events: none;
margin: 0;
color: #aaa;
font-size: 16px;
line-height: 20px;
letter-spacing: 0;
}
.infield-label label.gfield_label.active,
.infield-label label.gfield_label.stay-active,
label.infield.active,
label.infield.stay-active {
font-size: 10px;
left: 10px;
top: 5px;
padding-left: 6px;
padding-right: 6px;
border-radius: 0 0 8px 8px;
text-transform: uppercase;
letter-spacing: 0.01em;
animation-name: animateLabel;
animation-duration: 0.2s;
animation-fill-mode: forwards;
font-style: normal;
}
.infield-label input,
label.infield + .form-control,
label.infield + span .form-control,
label.infield + div .form-control {
padding: 15px 15px 0 !important;
} label {
display: block;
}
.form-group {
margin-bottom: 30px;
position: relative;
}
@media (max-width: 567px) {
.form-group {
margin-bottom: 20px;
}
.wpcf7 .col-100 h4 {
margin-top: 10px;
}
}
::placeholder {
color: #aaa;
}
input[type="search"] {
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
select,
input[type="text"],
input[type="email"],
textarea,
.form-control {
height: 54px;
border: 1px solid #dee2e6;
font-size: inherit;
font-family: inherit;
line-height: 20px;
padding: 16px 20px;
font-size: 16px;
display: block;
width: 100%;
outline: none;
background: #fff; -webkit-appearance: none;
appearance: none;
border-radius: 8px;
transition: 0.2s;
letter-spacing: 0;
}
@media (hover: hover) {
select:hover,
input[type="text"]:hover,
input[type="email"]:hover,
textarea:hover,
.form-control:hover {
border-color: rgba(0, 123, 255, 0.5);
}
}
select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
.form-control:focus {
border-color: #007bff;
box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.2), 0 30px 40px rgba(0, 0, 0, 0.05), 0 15px 20px rgba(0, 123, 255, 0.1);
}
textarea,
textarea.form-control {
resize: vertical;
min-height: 108px;
}
select,
select.form-control {
color: inherit;
background-image: url(//www.nathsolicitors.co.uk/wp-content/themes/nathsolicitors/img/angle-down.svg);
background-repeat: no-repeat;
background-position: calc(100% - 16px) 50%;
background-size: 24px;
}
.input-group {
position: relative;
display: flex;
}
.input-group .form-control {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: none;
}
.input-group .btn {
width: auto;
min-width: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
white-space: nowrap;
flex-shrink: 0;
margin: 0;
}
input[type="radio"],
input[type="checkbox"] {
vertical-align: -1px;
margin: 0 10px 0 0;
} .radio-container {
display: flex;
}
.radio-container label ~ label {
margin-left: 30px;
}
.radio-container p {
margin-bottom: 0;
}
input[type="checkbox"],
input[type="radio"] {
position: absolute;
opacity: 0;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
display: flex !important;
align-items: center;
position: relative;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
content: "";
width: 2em;
height: 2em;
border-radius: 20%;
border: 1px solid #dee2e6;
margin-right: 0.75em;
flex-shrink: 0;
box-shadow: inset 0 5px 3px -3px rgba(0, 0, 0, 0.05);
}
input[type="radio"] + label:before {
border-radius: 50%;
}
input[type="radio"] + label:after {
content: "";
width: 1em;
height: 1em;
border-radius: 50%;
background: #007bff;
position: absolute;
top: calc(50% - 0.5em);
left: 0.5em;
visibility: hidden;
}
input[type="checkbox"] + label:after {
content: "";
position: absolute;
left: 1em;
top: 50%;
width: 0.5em;
height: 1em;
border: solid #007bff;
border-width: 0 3px 3px 0;
transform: translate(-40%, -60%) rotate(45deg);
visibility: hidden;
}
input[type="radio"]:checked + label:after,
input[type="checkbox"]:checked + label:after {
visibility: visible;
}
input[type="radio"] + label:focus:before,
input[type="radio"]:focus + label:before,
input[type="checkbox"] + label:focus:before,
input[type="checkbox"]:focus + label:before {
border-color: #007bff;
box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.2), 0 30px 40px rgba(0, 0, 0, 0.05), 0 15px 20px rgba(0, 123, 255, 0.1);
} .grecaptcha-badge {
visibility: hidden;
}
.gfield_error input,
.form-control.wpcf7-not-valid {
border-color: #dc3545 !important;
box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.2), 0 30px 40px rgba(0, 0, 0, 0.05), 0 15px 20px rgba(220, 53, 69, 0.1) !important;
}
.wpcf7-checkbox,
.wpcf7-radio {
display: flex;
align-items: center;
flex-wrap: wrap;
padding-top: 10px;
}
.wpcf7-checkbox label,
.wpcf7-radio label {
margin: 0 0 10px;
cursor: pointer;
}
.wpcf7-checkbox .last .wpcf7-list-item-label,
.wpcf7-radio .last .wpcf7-list-item-label {
padding-right: 0;
}
.wpcf7-checkbox .wpcf7-list-item-label,
.wpcf7-radio .wpcf7-list-item-label {
position: relative;
display: flex;
align-items: center;
text-align: left;
line-height: 1.25;
padding-right: 30px;
}
.wpcf7-checkbox .wpcf7-list-item-label:before,
.wpcf7-radio .wpcf7-list-item-label:before {
content: "";
width: 2em;
height: 2em;
border-radius: 20%;
border: 1px solid #dee2e6;
margin-right: 0.75em;
flex-shrink: 0;
box-shadow: inset 0 5px 3px -3px rgba(0, 0, 0, 0.05);
}
.wpcf7-checkbox input:checked ~ .wpcf7-list-item-label:after,
.wpcf7-checkbox input:checked ~ span:after,
.wpcf7-radio input:checked ~ .wpcf7-list-item-label:after,
.wpcf7-radio input:checked ~ span:after {
opacity: 1;
visibility: visible;
}
.wpcf7-checkbox input:focus ~ .wpcf7-list-item-label:before,
.wpcf7-checkbox input:focus ~ span:before,
.wpcf7-radio input:focus ~ .wpcf7-list-item-label:before,
.wpcf7-radio input:focus ~ span:before {
border-color: #0f4c94;
box-shadow: 0 0 0 4px rgba(15, 76, 148, 0.2);
}
.wpcf7-radio .wpcf7-list-item-label:before {
border-radius: 50%;
}
.wpcf7-radio .wpcf7-list-item-label:after {
content: "";
width: 1em;
height: 1em;
border-radius: 50%;
background: #0f4c94;
position: absolute;
top: calc(50% - 0.5em);
left: 0.5em;
visibility: hidden;
}
.wpcf7-checkbox .wpcf7-list-item-label:before {
border-radius: 8px;
}
.wpcf7-checkbox .wpcf7-list-item-label:after {
content: "";
position: absolute;
left: 1em;
top: 50%;
width: 0.5em;
height: 1em;
border: solid #0f4c94;
border-width: 0 3px 3px 0;
transform: translate(-40%, -60%) rotate(45deg);
visibility: hidden;
}
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
opacity: 0;
}
.wpcf7-display-none {
display: none;
}
@keyframes spin {
0% {
transform: none;
}
100% {
transform: rotate(360deg);
}
}
.wpcf7 form.submitting button[type="submit"]:after {
content: "";
display: inline-block;
vertical-align: top;
border: 2px solid transparent;
border-left: 2px solid;
animation: spin 1s infinite linear;
border-radius: 50%;
width: 24px;
height: 24px;
margin-left: 10px;
margin-right: -10px;
}
.wpcf7 form.submitting button[type="submit"] svg {
display: none;
}
.validation_message,
.wpcf7-not-valid-tip {
display: block;
color: #dc3545;
font-size: 14px;
margin-top: 10px;
text-align: left;
padding-left: 16px;
font-style: italic;
display: none;
}
.wpcf7-response-output:empty {
display: none;
}
.validation_error,
.wpcf7-response-output {
color: #dc3545;
background-color: hsla(330deg, 75%, 90%, 0.4);
background-image: url(//www.nathsolicitors.co.uk/wp-content/themes/nathsolicitors/img/alert-red.svg);
background-repeat: no-repeat;
background-size: 24px;
background-position: 20px 50%;
border-radius: 8px;
padding: 20px;
padding-left: 60px;
line-height: 20px;
font-size: 15px;
margin-top: 20px;
}
.wpcf7-form.sent .validation_error,
.validation_error.wpcf7-mail-sent-ok,
.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-response-output.wpcf7-mail-sent-ok {
color: #28a745;
background-color: rgba(40, 167, 69, 0.1);
background-image: url(//www.nathsolicitors.co.uk/wp-content/themes/nathsolicitors/img/check-green.svg);
} .btn-burger {
transition: 0s; position: fixed;
z-index: 30;
background: hsl(6deg, 100%, 70%, 0.05); color: var(--primary);
border: none;
width: 54px;
height: 54px;
border-radius: 50%;
padding: 0;
top: 62px;
right: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
align-self: center;
transition: 0.2s;
}
.burger-bar {
display: block;
width: 22px;
border-top: 2px solid;
transition: transform 0.3s;
}
.btn-burger .state-inactive .burger-bar + .burger-bar {
margin-top: 4px;
}
.btn-burger .state-inactive {
display: flex;
flex-direction: column;
justify-content: center;
}
.btn-burger .state-inactive,
.btn-burger .state-active {
width: 22px;
height: 22px;
position: relative;
overflow: hidden;
}
.btn-burger .state-active {
position: absolute;
}
.btn-burger .state-inactive .burger-bar:nth-child(1) {
transition-delay: 0.3s;
}
.btn-burger .state-inactive .burger-bar:nth-child(2) {
transition-delay: 0.35s;
}
.btn-burger .state-inactive .burger-bar:nth-child(3) {
transition-delay: 0.4s; }
.btn-burger .state-active .burger-bar {
position: absolute;
top: calc(50% - 1px);
left: calc(50% - 11px);
}
.btn-burger .state-active .burger-bar:nth-child(1) {
transform: rotate(-45deg) translateX(-27px);
transition-delay: 0.1s;
}
.btn-burger .state-active .burger-bar:nth-child(2) {
transform: rotate(45deg) translateX(27px);
} body.main-nav-active .btn-burger {
transition-delay: 0s; color: var(--primary);
}
body.main-nav-active .btn-burger .state-inactive .burger-bar {
transform: translateX(22px);
}
body.main-nav-active .btn-burger .state-inactive .burger-bar:nth-child(1) {
transition-delay: 0s;
}
body.main-nav-active .btn-burger .state-inactive .burger-bar:nth-child(2) {
transition-delay: 0.05s;
}
body.main-nav-active .btn-burger .state-inactive .burger-bar:nth-child(3) {
transition-delay: 0.1s;
} @keyframes cross_1 {
0% {
transform: rotate(-45deg) translateX(27px);
}
100% {
transform: rotate(-45deg);
}
}
@keyframes cross_2 {
0% {
transform: rotate(45deg) translateX(-27px);
}
100% {
transform: rotate(45deg);
}
}
body.main-nav-active .btn-burger .state-active .burger-bar:nth-child(1) {
transform: rotate(-45deg);
transition: 0s;
transition-delay: 0s;
animation-name: cross_1;
animation-duration: 0.3s;
animation-fill-mode: backwards;
animation-delay: 0.5s;
}
body.main-nav-active .btn-burger .state-active .burger-bar:nth-child(2) {
transform: rotate(45deg);
transition: 0s;
transition-delay: 0s;
animation-name: cross_2;
animation-duration: 0.3s;
animation-fill-mode: backwards;
animation-delay: 0.4s;
} .logo-container {
padding: 60px 0;
transition: 0.3s;
}
.logo img {
height: 40px; 
width: auto;
vertical-align: top;
transition: 0.3s;
}
@media (max-width: 567px) {
.site-header .logo img {
height: 32px;
}
}
@media (min-width: 568px) {
.site-footer .logo img {
height: 45px;
}
}
body.has-scrolled-down .site-header .logo-container {
padding-top: 30px;
padding-bottom: 30px;
}
body.has-scrolled-down .site-header .logo img {
height: 32px;
}  @media (min-width: 1024px) {
.dropdown-toggle {
background: none;
border: none;
margin: 0 -8px 0 8px;
padding: 0;
}
.dropdown-toggle svg {
vertical-align: top;
}
.sub-menu .dropdown-toggle {
display: none;
}
.cols-2 > .sub-menu {
columns: 2;
} .site-header nav > div > ul > li {
display: flex; 
align-items: center;
}
.site-header > .container {
display: flex;
align-items: center;
justify-content: space-between;
}
.site-header .menu {
display: flex;
font-size: 17px;
}
.site-header .menu > li > a {
position: relative;
display: block; }
.site-header .menu a:hover {
color: var(--primary);
}
.site-header .menu > li + li {
margin-left: 1.5em;
} .site-header .menu > li.menu-item-has-children > a {
position: relative;
}
.site-header .menu > li.menu-item-has-children:hover > a:before {
content: "";
position: absolute;
z-index: 5;
width: 50vw;
height: 80px;
top: 50%;
left: calc(50% - 25vw);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.site-header .menu > li > ul.sub-menu {
position: absolute;
top: 100%;
left: 50%;
width: 50%;
padding: 80px;
padding-top: 60px;
z-index: 5;
line-height: 1.5;
background: #fff;
opacity: 0;
pointer-events: none; border-top: 1px solid var(--bg-grey);
box-shadow: 0 80px 160px -80px hsla(215deg, 100%, 50%, 0.1);
}
.site-header .menu > li.megamenu > ul.sub-menu {
left: 0;
width: 100%;
padding-left: var(--container-margin);
display: grid;
grid-template-columns: 2fr 2fr 3fr;
grid-auto-flow: dense;
gap: 40px 80px;
font-size: 15px;
}
.site-header .menu > li#menu-item-3684 > ul.sub-menu {
grid-template-columns: 5fr 4.5fr 4fr;
gap: 40px;
}
.site-header .menu > li.megamenu-image > ul.sub-menu {
gap: 0 80px;
}
.site-header .megamenu .image > a {
margin-bottom: 0 !important;
background-color: var(--bg-grey);
background-image: url(//www.nathsolicitors.co.uk/wp-content/uploads/2025/06/pexels-negativespace-34092-960x640.jpg);
background-size: cover;
background-position: center;
clip-path: url(#clip_path_2);
width: 250px;
height: 250px;
color: transparent !important;
}
#menu-item-31611,
#menu-item-31624,
#menu-item-3678 {
grid-column: 2;
}
#menu-item-31611 a,
#menu-item-31624 a,
#menu-item-3678 a {
padding: 32px 0;
margin-bottom: 0;
border-bottom: 1px solid var(--bg-grey);
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="hsl(6deg, 100%, 70%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"/></svg>');
background-position: right;
background-repeat: no-repeat;
color: inherit;
}
#menu-item-31611 a:hover,
#menu-item-31624 a:hover,
#menu-item-3678 a:hover {
color: var(--primary);
}
#menu-item-31611 {
margin-top: -32px;
}
.site-header .megamenu .sub-menu .sub-menu li + li {
margin-top: 8px;
}
.site-header .megamenu .sub-menu .sub-menu .sub-menu {
display: none !important;
}
.site-header .menu > li > ul.sub-menu > li:nth-child(3) { }
.site-header .menu > li:hover > ul.sub-menu {
pointer-events: auto;
opacity: 1; z-index: 30;
}
.site-header .sub-menu > li:hover .sub-menu {
z-index: 2;
}
.site-header .menu > li > .sub-menu > li > a {
display: block;
position: relative; font-size: 20px;
font-family: 'Plus Jakarta Sans';
font-weight: 500;
margin-bottom: 20px;
color: var(--primary);
}
.btn-burger {
opacity: 0;
transform: scale(0.75);
pointer-events: none;
}
}
@media (min-width: 1200px) {
.site-header .menu > li + li {
margin-left: 2em;
}
}
@media (min-width: 1700px) {
.site-header .menu > li + li {
margin-left: 2.5em;
}
}
@media (max-width: 1023px) { .logo-container {
padding: 30px 0;
} .site-header nav {
position: fixed;
top: var(--header-height);
left: 0;
bottom: 0;
width: 100%; z-index: 5;
background: #fff;
transform: translateX(-100%);
transition: 0.3s;
pointer-events: none;
overflow: auto;
padding: 30px 0;
} body.main-nav-active .site-header nav {
transform: none;
pointer-events: auto;
} .dropdown-toggle {
position: absolute;
right: 0;
top: 0;
width: 60px;
height: 40px;
padding: 0;
background-color: transparent;
outline: none;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 22px;
color: inherit;
border: none;
}
.dropdown-toggle:after {
content: "";
position: absolute;
width: 1px;
top: 10px;
bottom: 10px;
right: calc(100% - 1px);
background: rgba(0, 0, 0, 0.1);
}
.dropdown-toggle svg {
transition: transform 0.2s;
}
a[href="#"] + .dropdown-toggle {
width: 100%;
}
a[href="#"] + .dropdown-toggle:after {
display: none;
}
.site-header ul.menu li {
position: relative;
}
.site-header ul.menu a {
display: block;
padding: 10px 30px;
padding-left: var(--container-margin);
display: flex;
align-items: center; line-height: 20px;
min-height: 40px;
}
.site-header ul.menu li.menu-item-has-children > a {
padding-right: 80px;
}
.site-header ul.menu .sub-menu {
height: 0;
overflow: hidden;
background: var(--bg-grey);
font-size: 14px; padding-left: 20px;
}
.site-header ul.menu .toggled-on > .dropdown-toggle svg {
transform: rotate(180deg);
}
.site-header ul.menu .toggled-on > .sub-menu {
height: auto;
overflow: visible;
padding-top: 20px;
padding-bottom: 20px;
margin: 10px 0;
transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.site-header ul.menu .sub-menu .toggled-on > .sub-menu {
margin: 0;
}
.site-header .megamenu .image {
display: none;
} }
@media (min-width: 568px) and (max-width: 1023px) {
.site-header nav {
width: 50%;
box-shadow: 0 80px 80px hsla(215deg, 100%, 50%, 0.1);
}
}
.site-header ul.menu > .current-menu-item > a,
.site-header ul.menu > .current_page_ancestor > a {
font-weight: 600 !important;
color: var(--primary);
} .btn {
margin: 0;
padding: 16px 30px 14px;
font-family: inherit;
font-size: 15px;
font-weight: 500;
letter-spacing: inherit;
display: inline-block;
text-align: center;
border-radius: 10px;
background: transparent;
border: 1px solid transparent;
color: var(--secondary);
transition: 0.3s;
line-height: 24px;
cursor: pointer;
--hover-trans: hsla(215deg, 50%, 20%, 0.1);
}
p + .btn,
p + p .btn,
h2 + p .btn,
div + p .btn {
margin-top: 10px;	
}
.btn svg {
width: 24px;
height: 24px;
vertical-align: top;
margin-left: 10px;
margin-right: -10px;
transform: translateY(-1px);
}
@media (max-width: 567px) {
.btn:not(button[type="submit"]) {
font-size: 14px;
padding: 13px 24px 11px;
}
.btn svg {
width: 16px;
margin-left: 8px;
margin-right: -4px;
}
}
@media (min-width: 1700px) {
.btn {
font-size: 16px;
}
}
.btn:hover {
transform: translateY(-6px);
box-shadow: 
0 30px 40px rgba(0,0,0,0.15), 
0 15px 20px var(--hover-trans);
}
.btn-outline-primary {
border: 1px solid var(--primary);
color: var(--primary);
}
.btn-outline-primary:hover {
background: var(--primary);
color: #fff;
}
.btn-outline-white svg,
.btn-outline-primary:hover svg {
color: inherit;
}
.btn-outline-white:hover svg,
.btn-outline-primary svg,
.btn-white svg {
color: var(--salmon);
opacity: 1;
}
.btn-primary svg {
opacity: 0.5;
}
.btn-outline-white {
border: 1px solid #fff;
color: #fff;
}
.btn-primary {
background: var(--primary);
color: #fff;
}
.btn-white,
.btn-outline-white:hover {
background: #fff;
}
.btn-salmon {
background: var(--salmon);
color: #fff;
}
.btn-primary:hover,
.btn-outline-primary:hover,
.btn-salmon:hover,
.btn-outline-salmon:hover {
--hover-trans: hsla(6deg, 100%, 70%, 0.1);
}
.btn-outline-salmon {
color: var(--salmon);
border: 1px solid var(--salmon);
}
.btn-outline-salmon:hover {
background: var(--salmon);
color: #fff;
}  .highlighted {
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
.highlighted > span {
margin-right: -0.25em;
padding: 0.1em 0.25em;
margin-top: -0.1em;
display: block;
background: var(--salmon);
color: var(--black);
} @media (prefers-reduced-motion: no-preference) {
.animate {
transition: opacity 0.6s, transform 0.6s;
}
body.intersection-observer .animate-hidden {
opacity: 0;
transform: translateY(80px);
}
body.intersection-observer .animate-hidden.animate-from-left {
opacity: 0;
transform: translateX(-20px);
}
body.intersection-observer .animate-hidden.animate-from-right {
opacity: 0;
transform: translateX(20px);
}
body.intersection-observer .animate-hidden.animate-up-100 {
opacity: 0;
transform: translateY(100%);
}
body.intersection-observer .animate-hidden.animate-down-100 {
opacity: 0;
transform: translateY(-100%);
}
body.intersection-observer .animate-hidden.animate-opacity {
opacity: 0;
}
body.intersection-observer .animate-hidden.animate-zoom {
opacity: 0;
transform: scale(0.9);
}
body.intersection-observer .animate.wipe-from-right {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
opacity: 1 !important;
transition: 0.5s clip-path cubic-bezier(0.075, 0.82, 0.165, 1);
}
body.intersection-observer .animate.animate-hidden.wipe-from-right {
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.animate + .animate {
transition-delay: 0.1s;
}
.animate + .animate + .animate {
transition-delay: 0.2s;
}
.animate + .animate + .animate + .animate {
transition-delay: 0.3s;
}
.animate + .animate + .animate + .animate + .animate {
transition-delay: 0.4s;
}
.animate + .animate + .animate + .animate + .animate + .animate {
transition-delay: 0.5s;
}
.animate + .animate + .animate + .animate + .animate + .animate + .animate {
transition-delay: 0.6s;
}
.animate + .animate + .animate + .animate + .animate + .animate + .animate + .animate {
transition-delay: 0.7s;
}
.animate + .animate + .animate + .animate + .animate + .animate + .animate + .animate + .animate {
transition-delay: 0.8s;
} .animate-slow + .animate-slow {
transition-delay: 0.2s;
}
.animate-slow + .animate-slow + .animate-slow {
transition-delay: 0.4s;
}
.animate-slow + .animate-slow + .animate-slow + .animate-slow {
transition-delay: 0.6s;
}
.animate-slow + .animate-slow + .animate-slow + .animate-slow + .animate-slow {
transition-delay: 0.8s;
}
.animate-slow + .animate-slow + .animate-slow + .animate-slow + .animate-slow + .animate-slow {
transition-delay: 1s;
}
.animate-slow + .animate-slow + .animate-slow + .animate-slow + .animate-slow + .animate-slow + .animate-slow {
transition-delay: 1.2s;
}
.animate-slow + .animate-slow + .animate-slow + .animate-slow + .animate-slow + .animate-slow + .animate-slow + .animate-slow {
transition-delay: 1.4s;
}
.animate-slow + .animate-slow + .animate-slow + .animate-slow + .animate-slow + .animate-slow + .animate-slow + .animate-slow + .animate-slow {
transition-delay: 1.6s;
}
} .section-padded {
padding: 50px 0 30px;
}
@media (min-width: 568px) {
.section-padded {
padding: 8vw 0;
}
} .banner .content {
position: relative; 
padding-top: 100px;
padding-bottom: 100px;
padding-right: var(--container-margin); 
background: linear-gradient(to bottom right, var(--bg-grey) 50%, hsl(215deg, 50%, 95%, 0.9));
}
.banner .content:before {
content: "";
position: absolute; 
top: 0; 
right: 100%; 
bottom: 0; 
width: var(--container-margin); 
background: var(--bg-grey);
}
.banner .image {
position: absolute; 
top: 80px; 
left: calc(33.333% + 80px); 
right: 0; 
bottom: 0; 
background-color: var(--secondary); 
background-size: cover; 
background-position: center;
}
.banner .image-grad {
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
background: linear-gradient(to top right, hsl(215deg, 50%, 20%, 0) 10%, var(--black));
} .banner a[href="#modalReviews"] {
position: absolute; 
right: 80px; 
bottom: 80px; 
display: inline-block; 
text-align: right;
font-size: 16px;
}
@media (min-width: 568px) and (max-width: 1199px) {
.banner {
overflow: hidden;
}
.banner .image {
right: calc(var(--container-margin) * -1);
}
.banner a[href="#modalReviews"] {
right: 40px;
bottom: 120px;
}
}
@media (max-width: 567px) {
.banner .content {
padding-top: 60px; 
padding-bottom: 60px; 
background: linear-gradient(to bottom right, var(--bg-grey) 50%, hsl(215deg, 50%, 95%, 0.7));
}
.banner .image {
left: calc(80px - var(--container-margin));
right: calc(var(--container-margin) * -1);
}
.banner:not(.section-quote) .image-grad {
background: linear-gradient(to top right, hsl(215deg, 50%, 20%, 0), hsl(215deg, 50%, 20%, 0.333) 10%, var(--black));
}
.banner a[href="#modalReviews"] {
display: flex !important;
bottom: 30px;
right: 0;
color: #fff !important;
font-size: 13px;
}
.banner a[href="#modalReviews"] .rating-stars {
order: 2;
margin-bottom: 0;
margin-left: 10px !important;
}
.banner a[href="#modalReviews"] b,
.banner a[href="#modalReviews"] br {
display: none;
}
}
@media (max-width: 1199px) {
.banner .content {
border-radius: 0 20px 20px 0;
}
.banner .image {
border-radius: 20px 0 0 20px;
overflow: hidden;
}
}
@media (min-width: 1200px) {
.banner a[href="#modalReviews"] {
color: #fff !important;
}
} .home-banner {
display: flex; 
flex-direction: column; 
justify-content: flex-end; 
}
.home-banner h1 {	
margin-left: -0.05em; 
margin-bottom: 0.666em; 
letter-spacing: -0.0333em; 
line-height: 1.333;
}
.home-banner .hero-image-container {
position: relative; 
overflow: hidden; 
}
.home-banner .hero-image {
background-color: var(--bg-grey);
}
.home-banner .content {
background: var(--black); 
color: #fff; 
}
@media (max-width: 567px) {
.home-banner h1 {
font-size: 24px;
}
.home-banner .hero-image-container {
margin-left: calc(var(--container-margin) * -1);
margin-right: calc(var(--container-margin) * -1);
padding-bottom: 80px;
}
.home-banner .hero-image {
position: absolute;
top: 80px;
right: calc(var(--container-margin) * -1);
bottom: 0;
left: 80px;
border-radius: 20px 0 0 20px;
overflow: hidden;
}
.home-banner .content {
position: relative;
padding: 60px 30px; 
margin-right: 30px;
border-radius: 0 20px 20px 0;
background: linear-gradient(to bottom right, var(--secondary) 50%, hsla(215deg, 50%, 20%, 0.7)); }
}
@media (min-width: 568px) {
.home-banner .hero-image-container {
display: flex;
margin-bottom: 80px; 
}
.home-banner .content {
padding: 80px; 
}
.home-banner .hero-image {
width: 20%;
flex-shrink: 0;
}
}
@media (min-width: 1200px) {
.home-banner .content { 
padding-right: 160px;
}
} .hero-image {
position: relative;
}
.hero-image video {
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%;
object-fit: cover;
}
@media (min-width: 1024px) {
.hero-image {
z-index: 50;
}
}
@media (min-width: 568px) and (max-width: 1199px) {
.home-banner .container-page-intro {
padding-left: 15vw;
}
}
@media (max-width: 1199px) {
.home-banner p {
max-width: 40em;
}
}
@media (min-width: 1200px) {
.home-banner .container-page-intro {
max-width: 40em;
}
.home-banner p {
max-width: 100%;
}
}
@media (min-width: 1500px) {
.home-banner p,
.banner p {
font-size: 18px;
}
} .section-faq + .section-quote,
.section-contact + .section-quote,
.section-services-grid + .section-quote,
.section-testimonials + .section-map {
padding-top: 0;
}
@media (min-width: 568px) {
.section-logo-scroller + .section-cta,
.section-quote + .section-cta {
padding-top: 0;
}
}
.section-map + .section-testimonials,
.section-services-grid + .section-testimonials {
margin-top: 50px;
}
body:not(.home) .section-services-grid:not(:first-child) {
background: linear-gradient(to bottom left, #fff, var(--bg-grey));
}
.section-cta:last-child {
background: linear-gradient(to bottom left, #fff 50%, var(--bg-grey));
}
@media (max-width: 567px) {
.section-services-grid,
.section-cta {
padding-bottom: 50px;
}
}
@media (min-width: 568px) {
.section-cta h2 {
max-width: 12em;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.section-services-grid .col-100 .col-33,
.section-services-grid .col-50 .col-50,
.section-cta .col-33,
.section-cta .col-50 {
flex-basis: 50%;
}
}
@media (max-width: 1023px) {
.section-cta .row .row .col-50 {
flex-basis: auto;
min-width: 0;
}
}
@media (min-width: 1200px) {
.section-cta .container {
padding-top: 80px;
}
.section-quote + .section-cta .container {
padding-top: 0;
}
.section-cta .col-sidebar {
margin-top: -80px;
}
} .service-image {
margin-bottom: 20px;
}
.service-image > div {
padding-top: 50%; 
background-color: var(--bg-grey); 
background-size: cover; 
background-position: center; }
.shape-image-container {
position: relative;
}
.shape-image-container h2 {
position: absolute; 
white-space: nowrap;
margin-bottom: 0;
}
@media (max-width: 1023px) {
.shape-image-container h2 {
left: 0;
top: calc(50% - 1.25em);
}
.service-image + p {
padding-top: calc(30% - 30px);
}
.service-image {
width: 60%;
}
.section-services-grid hr {
display: none;
}
}
@media (min-width: 1024px) {
.shape-image-container h2 {
top: -0.25em;
left: 60%;
}
.section-services-grid hr {
margin: 50px 0 80px;
}
.service-image + p {
padding-top: 10%;
}
.section-services-grid h3 {
max-width: 16em;
}
}
@media (min-width: 1024px) and (max-width: 1199px) {
.section-services-grid .col-33 {
flex-basis: 33.333%;
}
} .section-grid h2 {
padding-right: 20%;
}
.section-grid h3 {
padding-right: 10%;
}
.grid-item-icon {
width: 72px;
height: 80px;
background-color: var(--bg-grey);
margin-bottom: 20px;
clip-path: polygon(0 10%, 100% 0, 100% 90%, 0% 100%);
background-size: cover;
background-position: center;
font-size: 2em;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
} .grid-item {
display: block;
padding-top: 120%; background-size: cover;
background-position: center;
position: relative;
overflow: hidden; border-bottom: 5px solid var(--salmon);
}
body.blog .grid-item {
background-color: var(--secondary);
}
.grid-item,
.grid-item-content,
.grid-item-title,
.grid-item-gradient {
transition: 0.6s cubic-bezier(0.05, 0.2, 0.1, 1);
}
.grid-item:hover {
z-index: 5;
transform: translateY(-12px);
box-shadow: 
0 60px 80px hsla(215deg, 50%, 20%, 0.25);
}
.grid-item:hover .grid-item-content {
transform: translateY(-6px);
}
.grid-item-gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; overflow: hidden;
}
.grid-item-gradient:before,
.grid-item-gradient:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: 0.6s;
}
.grid-item-gradient:before {
background: linear-gradient(195deg, hsla(215deg, 50%, 20%, 0) 50%, hsl(215deg, 50%, 20%) 90%);
}
.grid-item-gradient:after {
background: linear-gradient(195deg, hsla(215deg, 50%, 20%, 0), hsl(215deg, 50%, 20%) 50%);
opacity: 0;
}
.grid-item:hover .grid-item-gradient:after {
opacity: 1;
}
.grid-item-content {
position: absolute;
top: 100%;
left: 0;
width: 100%;
display: flex;
align-items: flex-end;
line-height: 1.4;
padding: 0 35px 0 40px;
color: #fff;
}
@media (max-width: 1699px) {
.grid-item-content {
font-size: 16px;
}
}
.grid-item-title {
position: absolute;
top: 0;
transform: translateY(calc(-100% - 40px));
margin: 0;
color: inherit;
width: calc(100% - 80px);
padding-right: 48px;
}
.grid-item svg {
width: 32px;
height: 32px;
position: absolute;
bottom: 40px;
right: 40px;
z-index: 2;
color: var(--salmon);
transition: 0.2s;
}
.grid-item:hover svg {
transform: translateX(12px);
opacity: 0;
}
.grid-item-desc {
transform: translateY(0);
opacity: 0;
color: inherit;
transition: transform 0.6s cubic-bezier(0.05, 0.2, 0.1, 1);
}
.grid-item:hover .grid-item-content {
transform: translateY(-100%);
}
.grid-item:hover .grid-item-desc {
transform: translateY(-20px);
transition: transform 0.6s cubic-bezier(0.05, 0.2, 0.1, 1), opacity 0.6s cubic-bezier(0.05, 0.2, 0.1, 1);
transition-delay: 0.2s;
opacity: 1;
} .section-dark {
background-color: var(--black);
color: #fff;
}
.section-primary {
background-color: var(--primary);
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark a:not(.btn):hover {
color: inherit;
}  @media (max-width: 1199px) {
.no-gutter .col-content:not(.section-entry-content .col-content, .section-services-grid .col-content) {
padding-top: 40px !important;
}	
.section-entry-content .col-content {
order: -1;
padding-bottom: 40px !important;
}
}
@media (min-width: 1200px) {
.section-entry-content {
padding-top: 100px;
}
.section-faq .col-content,
.section-entry-content .col-content {
padding-left: 80px !important;
position: relative;
}
}
@media (max-width: 567px) {
.section-entry-content {
position: relative;
}
.section-entry-content + .section-news {
position: relative;
padding-top: 0;
}
.section-entry-content + .section-news:before {
content: "";
position: absolute;
height: 100vh;
left: 0;
right: 0;
bottom: 100%;
z-index: -1;
background: linear-gradient(to bottom, rgba(242, 242, 237, 0), var(--bg-grey));
pointer-events: none;
}
.section-entry-content .container {
position: relative;
}
}  .section-map {
background: linear-gradient(to bottom right, var(--bg-grey), #fff 50%);
}
@media (min-width: 568px) {
.section-faq:first-child,
.section-services-grid:first-child,
.section-contact {
background: linear-gradient(to bottom right, hsl(6deg, 100%, 70%, 0.1), var(--bg-grey) 25%, #fff 33.333%);
}
.contact-sidebar {
background: #fff; 
padding: 80px;
}
.section-map .contact-sidebar {
margin-top: 80px;
}
.section-contact .wpcf7 {
padding: 80px;
padding-bottom: 0;
max-width: 860px;
background: #fff;
box-shadow: -160px -80px 80px -80px hsla(215deg, 50%, 95%, 0.5);
}
.section-contact form > h4 { margin-bottom: 35px;
} }
@media (max-width: 567px) {
.section-contact {
background: linear-gradient(to bottom, var(--bg-grey), #fff 25%);
}
.wpcf7 small {
text-align: center;
}
} .wpcf7 .row {
margin-bottom: 0;
margin-left: -15px;
margin-right: -15px;
clear: both;
}
.wpcf7 .row > .col {
padding-bottom: 0;
padding-left: 15px;
padding-right: 15px;
}
.wpcf7 p {
max-width: 40em;
}
.form-group p {
max-width: 100%;
}  .entry-content hr,
.section-faq hr { 
border-top-color: var(--bg-grey);
margin: 30px 0;
}
.expander-title {
position: relative;
padding-right: 60px;
margin-bottom: 0;
max-width: 100% !important;
}
.expander-title:after {
content: "";
position: absolute;
width: 24px;
height: 24px;
top: calc(50% - 12px);
right: 6px;
background-image: url(//www.nathsolicitors.co.uk/wp-content/themes/nathsolicitors/img/angle-down.svg);
background-size: cover;
transition: 0.4s
}
.expander-title.toggled-on:after {
transform: rotate(180deg);
}
.expander-title:hover {
color: var(--primary);
cursor: pointer;
}
.expander {
overflow: hidden;
padding-top: 30px;
}
.expander-title-sm ~ hr {
margin: 22px 0;
}
.expander-title-sm ~ .expander {
padding-top: 20px;
}
@media (min-width: 568px) {
.expander-title:not(.expander-title-sm):after {
width: 32px;
height: 32px;
top: calc(50% - 16px);
right: 0;
}
.expander {
padding-right: 60px;
}
}
.expander *:last-child {
margin-bottom: 0;
} .section-image-text {
position: relative;
}
.section-image-text blockquote h2 {
color: var(--primary);
}
.section-image-text .col-25 {
flex-basis: 25%;
}
.section-image-text .small-image-container {
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
display: flex; 
align-items: center; 
pointer-events: none;
}
.section-image-text .small-image {
background-color: var(--black); 
padding-top: 133.333%; 
position: relative;
overflow: hidden;
box-shadow: 0px 60px 80px rgba(0, 0, 0, 0.333);
transform: translateX(-80%)
}
.section-image-text .small-image.right {
transform: translateX(80%)
}
.section-image-text .small-image-container .col-25 {
flex-basis: 25%;
min-width: 0;
}
@media (max-width: 1023px) {
.section-image-text .small-image-container {
height: 66.666vw;
}
.section-image-text .small-image {
transform: translateX(-50%)
}
.section-image-text .small-image.right {
transform: translateX(50%)
}
.section-image-text .small-image-container .row {
margin-left: 0;
margin-right: 0;
}
.section-image-text .small-image-container .col {
flex-basis: 50%;
padding-left: 0;
padding-right: 0;
}
} .section-image-text .image {
background-size: cover; 
background-color: var(--primary); 
background-position: center;
overflow: hidden;
position: relative;
} .section-image-text .btn + .btn {
margin-left: 10px;
}
@media (max-width: 1023px) {
.section-image-text .image:not(img) {
padding-top: 66.666%;
}
}
@media (min-width: 1024px) {
.section-image-text .btn + .btn {
margin-left: 20px;
}
.section-image-text .image {
position: absolute; 
top: 0; 
bottom: 0;
width: 40%;
}
.section-image-text {
min-height: 90vh; display: flex; 
align-items: center; 
}
} .lozenge-wrapper {
display: flex;
flex-wrap: wrap;
white-space: nowrap;
}
.lozenge {
background: var(--bg-grey);
color: var(--secondary);
border: 1px solid var(--secondary);
padding: 6px 30px 6px 14px;
line-height: 20px;
font-size: 14px; 
margin-bottom: 10px;
}
.lozenge + .lozenge {
padding-left: 30px;
margin-left: -17px;
clip-path: polygon(0 0, calc(100% + 1px) 0, calc(100% + 1px) 100%, 0 100%, 17px 50%);
}
.lozenge:first-child {
border-radius: 10px 0 0 10px;
}
.lozenge:last-child {
border-radius: 0 10px 10px 0;
padding-right: 14px;
}
.lozenge-primary {
background: var(--primary); 
color: #fff; 
}
.lozenge-secondary {
background: var(--secondary); 
color: #fff; 
} .floating-btn-container {
position: fixed; 
z-index: 30; 
right: 5vw; 
bottom: calc(7.5vw - 30px);
transition: 0.15s;
}
body:not(.has-scrolled-down) .floating-btn-container {
transform: translateX(30px);
opacity: 0;
}
body.main-nav-active .floating-btn {
box-shadow: none;
}
.floating-btn {
display: flex; 
align-items: center; 
background: var(--secondary); 
color: #fff;
white-space: nowrap;
box-shadow: 
0 30px 40px rgba(0,0,0,0.15), 
0 15px 20px hsla(215deg, 50%, 20%, 0.1);
border-radius: 30px;
}
.floating-btn svg {
margin-left: 18px;
}
@media (max-width: 567px) {
.floating-btn-container {
bottom: 20px;
right: 20px; }
.floating-btn:not(body.has-scrolled-down .floating-btn) {
transform: scale(0.9);
opacity: 0;
}
.floating-btn svg {
margin-left: 12px;
}
}
.floating-btn:hover {
background: var(--primary);
transform: translateY(-6px); }
.floating-btn img {
height: 90px; 
width: auto; 
position: absolute;
right: 16px;
bottom: 0;
} .rating-stars {
margin-bottom: 6px;
width: 102px;
height: 18px;
background-size: 21px;
background-image: url(//www.nathsolicitors.co.uk/wp-content/themes/nathsolicitors/img/star-bg-trans.svg);
}
.rating-stars-lg {
width: 136px;
height: 24px;
background-size: 28px;
}
.rating-stars-xl {
width: 204px;
height: 36px;
background-size: 42px;
}
.rating-stars-inner {
height: 100%;
background-size: inherit;
background-image: url(//www.nathsolicitors.co.uk/wp-content/themes/nathsolicitors/img/star.svg);
}
.header-bar .rating-stars {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-bottom: 5px;
}  .section-team {
overflow: hidden;
}
.section-team .link-contact {
font-size: 16px;
}
.section-dark .link-contact {
color: #F9C784;
}
.section-team .link-contact svg {
width: 16px;
margin-right: 12px;
}
.post-team-member .post-title-container {
position: relative;
padding-right: 48px;
}
.post-team-member .post-title-container svg {
position: absolute;
width: 24px;
height: 24px;
top: 22px;
right: 12px;
transition: 0.2s;
}
.post-team-member a:hover .post-title-container svg {
transform: translateX(12px);
opacity: 1;
}
.profile-pic {
flex-shrink: 0; 
width: 96px; 
height: 72px; 
margin-right: 45px; 
margin-bottom: 20px;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); 
background-size: cover; 
background-position: 50% 20%;
}
.profile-pic-shadow {
position: absolute; 
background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.2)) !important; 
transform: translateX(-50%);
}
@media (min-width: 568px) {
.profile-pic-container {
display: flex;
}
.profile-pic {
width: 120px; 
height: 90px; 
}
} .post-image.team-image {
margin: 20px 0;
}
@media (min-width: 568px) and (max-width: 1023px) {
.section-team .col-33 {
flex-basis: 50%;
}
.section-intro .col-50 {
flex-basis: 66.666%;
}
}
@media (min-width: 568px) {
.section-intro .col-team-image {
flex-basis: 25%;
min-width: 0;
margin-left: auto; 
position: relative; 
z-index: 55;
}
.section-intro .post-image.team-image {
background-color: #fff; 
position: absolute; 
left: 0; 
width: 100%;
bottom: 0; 
margin-bottom: 20px; 
box-shadow: 0px 60px 80px rgba(0, 0, 0, 0.333);
}
} .post-image {
background-color: rgba(0,0,0,0.25);
background-size: cover;
background-position: center;
padding-top: 100%;
border-radius: 16px;
margin-bottom: 30px;
} .site-footer {
overflow: hidden;
} .site-footer hr {
border-top: 1px solid var(--bg-grey);
margin: 0;
}
.site-footer h3 {
font-size: 20px;
}
.footer-legal {
max-width: 86em;
}
.footer-bottom {
font-size: 14px;
padding: 40px 0;
}
.menu-footer-bottom-menu-container ul * {
display: inline;
}
.menu-footer-bottom-menu-container ul, 
.menu-footer-bottom-menu-container li {
list-style: none;
padding: 0;
}
.menu-footer-bottom-menu-container li:first-child:before {
content: "";
}
.menu-footer-bottom-menu-container li + li:before {
content: "|\00a0";
position: static;
color: inherit;
margin: 0 0.75em;
}
iframe.sra {
width: 220px;
height: 130px;
}
@media (min-width: 568px) and (max-width: 1199px) {
.site-footer .col {
min-width: 300px;
}
}
@media (max-width: 567px) {
.site-footer .col {
flex-basis: 100%;
}
.footer-legal {
font-size: 13px;
}
.footer-bottom {
padding-bottom: 60px;
} }
@media (min-width: 568px) {
.footer-main {
padding-bottom: 60px;
}
.site-footer .col-33 {
flex-basis: 33.333%;
}
.menu-footer-bottom-menu-container {
display: inline;
}
} .section-entry-content .sidebar {
height: 100%;
}
@media (min-width: 1024px) and (max-width: 1199px) {
.section-entry-content .sidebar {
display: flex;
align-items: flex-start;
}
.sidebar-menu {
margin-right: auto;
}
} .sidebar-menu ul {
border-left: 1px solid var(--primary);
padding-left: 30px;
} .sidebar-menu h3 a {
color: inherit;
}
@media (hover: hover) {
.sidebar-menu h3 a:hover {
color: var(--primary);
}
}
.sidebar-menu ul a {
position: relative;
display: block;
padding: 0.25em 0;
}
.sidebar-menu ul a:before {
content: "";
position: absolute;
top: 0;
left: -30px;
bottom: 0;
border-left: 5px solid var(--primary);
transform: scaleX(0);
transform-origin: left;
transition: 0.3s;
}
.sidebar-menu ul a:hover:before{
transform: none;
} .sidebar-menu .current-menu-item:not(h3) {
padding: 0.25em 0;
color: inherit;
font-weight: 500;
position: relative;
cursor: default;
}
.sidebar-menu .current-menu-item:not(h3):before {
content: "";
position: absolute;
top: 0;
left: -30px;
bottom: 0;
border-left: 5px solid var(--primary);
transform-origin: left;
transition: 0.3s;
}
.sidebar-menu ul:hover .current-menu-item:not(h3):not(:hover):before {
transform: scaleX(0);
} .sidebar .form-group {
margin-bottom: 20px;
} .modal-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
display: flex;
align-items: flex-start;
justify-content: center;
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity 0.2s;
transition-delay: 0.2s;
overflow: hidden;
} .modal-container.modal-container-fixed {
position: fixed;
padding-top: 0 !important;
align-items: center;
justify-content: flex-start;
}
.modal-container-fixed .modal {
border-radius: 0;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.modal-container-fixed:not(.modal-active) .modal {
transform: translateX(-20px);
}
.modal-container:not(.modal-active) .modal-header {
display: none !important;
}
.modal-container-fixed .modal-close {
background: rgba(255,255,255,0.1);
color: #fff;
border-left: 1px solid rgba(255,255,255,0.15);
border-bottom: 1px solid rgba(255,255,255,0.15);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.modal-container.modal-active {
opacity: 1;
pointer-events: auto; 
visibility: visible;
z-index: 9999999; transition-delay: 0s;
}
.modal-container.modal-active .modal {
opacity: 1;
transform: none;
transition-delay: 0.2s;
}
.modal-close {
position: absolute;
top: 0; 
right: 0;
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
cursor: pointer;
color: var(--primary);
border-bottom-left-radius: 16px;
background: hsla(6, 100%, 70%, 0.1);
}
@media (max-width: 567px) {
.modal-close {
width: 60px;
height: 60px;
}
}
.modal {
background: #fff;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
width: 100%;
max-width: 740px;
transform: translateY(20px);
opacity: 0;
transition: 0.2s;
position: relative;
overflow: hidden; 
font-size: 16px;
border-radius: 16px;
}
@media (min-width: 1200px) {
.modal {
max-width: 780px;
}
}
.modal .pre-heading {
padding-right: 20px;
}
.modal .pad {
padding: 30px;
}
@media (min-width: 1200px) {
.modal .pad {
padding: 50px;
}
} .modal blockquote {
border: none;
margin: 0;
padding: 0;
}
.modal .btn,
.sidebar .btn {
margin-top: 0;
}
.modal .col {
min-width: 0;
}
.modal p,
.modal input[type="submit"],
.modal .btn-lg,
.sidebar .btn {
width: 100%;
max-width: 100%;
}
.modal .wpcf7-form.sent .hide-on-sent {
display: none;
} .modal-header {
background-size: cover;
background-position: 50% 40%;
background-color: var(--secondary);
color: #fff;
position: relative;
}
@media (max-width: 567px) {
.modal-header {
font-size: 15px;
}
}
.modal-header:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top right, var(--secondary) 10%, hsla(215deg, 50%, 20%, 0));
}
.modal-header h2,
.modal-header p {
position: relative;
}
.modal-header a {
color: inherit !important;
}
.modal-header p:last-child {
margin-bottom: 0;
} a[href="#modalReviews"]:not(.btn) {
color: inherit;
display: block;
}
#modalReviews .modal {
overflow: hidden;
display: flex;
flex-direction: column;
}
#modalReviews .modal-header {
padding-bottom: 20px;
}
@media (min-width: 1200px) {
#modalReviews .modal-header {
padding-bottom: 30px;
}
}
#modalReviews figcaption p {
margin-bottom: 10px;
}
#modalReviews figcaption .rating-stars {
margin-bottom: 20px;
}
#modalReviews .modal-reviews-view-all {
background: #fff;
border-top: 2px solid var(--bg-grey);
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
}
.modal-reviews-view-all a {
color: var(--primary);
}
.modal-reviews {
overflow: auto;
flex-grow: 1;
}
.modal-reviews .pad:nth-child(even) {
background: var(--bg-grey);
}
.modal-reviews p:last-child {
margin-bottom: 0;
}
.modal-reviews-footer {
display: flex;
background: var(--black);
color: #fff; 
flex-shrink: 0;
}
.modal-reviews-footer .pad {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 20px 30px;
}
@media (min-width: 568px) {
.modal-reviews-footer .pad  {
padding: 40px 40px;
}
}
.modal-reviews-footer .rating-stars {
margin-right: 16px;
margin-bottom: 0;
}
.modal-reviews-footer-rating {
background: rgba(0,0,0,0.1);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 2.5em;
line-height: 1;
}   .section-testimonials {
position: relative;
}
.section-testimonials .sidebar {
background: var(--black); 
color: #fff; 
padding: 40px;
}
.section-testimonials .sidebar-deco {
background-color: var(--salmon); 
height: 40px; 
margin-left: 40px;
}
.section-testimonials:last-child {
background: linear-gradient(to bottom right, #fff 50%, var(--bg-grey));
}
.section-testimonials p {
max-width: 100%;
}
figcaption h4 {
color: inherit;
}
@media (max-width: 567px) {
.post-grid-slider,
.testimonials-slider {
margin-bottom: 20px;
}
.section-news {
overflow: hidden;
}
.post-grid-slider .slick-list {
overflow: visible;
padding-right: 50px;
}
.testimonials-slider .item {
padding-bottom: 20px;
}
}
@media (min-width: 568px) {
.testimonials-slider {
background: #fff; 
position: relative;
}
.testimonials-slider .slick-list {
overflow: visible;
}
.testimonials-slider .item {
padding: 80px;
padding-bottom: 20px;
box-shadow: 160px 0 80px -80px var(--bg-grey);
}
.testimonials-slider .item.slick-active {
background: #fff;
z-index: 1;
} .section-testimonials .sidebar {
padding: 80px;
}
.section-testimonials .sidebar-deco {
height: 80px;
margin-left: 80px;
}
.section-testimonials .col-content {
padding-top: 80px;
}
.section-testimonials:last-child .testimonials-slider {
margin-bottom: 0;
padding-bottom: 40px;
}
.section-testimonials:after {
content: "";
position: absolute;
top: 0; 
right: 0; 
bottom: 0;
width: 7.5vw;
background: linear-gradient(to right, rgba(255,255,255,0), #fff 90%);
}
}
@media (min-width: 1200px) {
.testimonials-slider {
margin-bottom: -30px;
}
figcaption h4 {
margin-bottom: 0; 
}
} @media (max-width: 567px) {
body .rssw__widget {
bottom: 0px !important;
}
body .rssw__widget .rssw__widget-inner {
border-radius: 16px 0 0 0 !important;
}
} .section-scrolling-text-banner {
padding: 0.5em 0; 
overflow: hidden; 
white-space: nowrap; 
font-size: 5vw;
position: relative;
z-index: 2;
}
.section-scrolling-text-banner + .section-image-text {
margin-top: -2.5vw;
}
@keyframes marquee {
0% {
transform: none;
}
100% {
transform: translateX(-100%);
}
}
.marquee {
padding-bottom: 0.05em;
animation-name: marquee;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.section-accreds {
overflow: hidden; 
padding: 80px 0;
}
.section-accreds .marquee {
display: flex;
flex-wrap: nowrap;
}
.section-accreds img {
height: 80px;
width: 40vw;
margin: 0 5vw;
object-fit: contain;
filter: grayscale(100%);
}
@media (min-width: 1024px) {
.section-accreds {
padding: 100px 0;
}
.section-accreds img {
height: 80px;
width: 10vw;
margin: 0 3.333vw;
object-fit: contain;
}
} .nav-links {
text-align: center;
display: flex;
justify-content: center;
align-items: baseline;
}
.nav-links a,
.nav-links span {
min-width: 60px;
line-height: 60px;
padding: 0px 20px;
color: inherit;
}
@media (hover: hover) {
.nav-links a:hover,
.nav-links a:focus {
color: var(--primary);
}
}
.nav-links .current {
font-weight: 600;
background: var(--secondary);
color: #fff;
flex-shrink: 0;
cursor: default;
margin: 0 8px;
height: 50px;
line-height: 50px;
clip-path: polygon(0 0, calc(100% - 8px) 0%, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
@media (max-width: 480px) {
.nav-links .prev,
.nav-links .next {
display: none;
}
} .reviews-grid,
.scenarios-grid {
display: grid; 
grid-template-columns: 1fr; 
grid-gap: 40px;
grid-auto-flow: dense;
}
.reviews-grid .item,
.scenarios-grid .item {
height: 100%;
box-shadow: 0 40px 40px hsla(215deg, 50%, 20%, 0.075);
background: #fff;
overflow: hidden;
}
.reviews-grid .item {
text-align: center;
}
.reviews-grid .item .inner,
.scenarios-grid .item .inner {
padding: 40px;
} .reviews-grid .image {
height: 100%;
padding-top: 50%;
background-size: cover;
background-position: center;
}
.reviews-grid .rating-stars {
margin-left: auto;
margin-right: auto;
margin-bottom: 8px;
}
.reviews-grid h3 {
margin-top: 20px;
}
.reviews-grid h4 {
margin-bottom: 0;
}
.reviews-grid blockquote {
border: none;
padding: 0;
text-align: inherit;
}
.reviews-grid .rating-stars {
margin-bottom: 30px;
} .section-scenarios,
.section-404 {
background: linear-gradient(to bottom right, hsl(6deg, 100%, 70%, 0.1), var(--bg-grey) 25%);
}
@media (max-width: 567px) {
.section-scenarios {
padding-bottom: 40px;
}
}
.scenarios-grid .item h3 {
font-size: 20px;
}
.scenarios-grid .image {
height: 100%;
background-color: var(--black);
background-size: cover;
background-position: center;
}
.scenarios-grid .image:before {
content: "";
display: block;
padding-top: 50%;
}
.scenarios-grid .image-1 {
clip-path: polygon(0 0, calc(100% - 80px) 0, 100% 80px, 100% 100%, 0 100%);
background-position: 50% 85%; 
}
.scenarios-grid .image-2 {
background-size: 150%;
background-position: 50% 66%; 
}
.scenarios-grid:not(.view-all) .image-2 {
clip-path: polygon(0 0, 100% 0, 100% 100%, 80px 100%, 0 calc(100% - 80px));
}
.scenarios-grid:not(.view-all) .image-3,
.scenarios-grid:not(.view-all) .image-4 {
display: none !important;
} @media (max-width: 567px) {
.scenarios-grid .inner + .inner {
background: linear-gradient(var(--bg-grey), #fff 60px);
clip-path: polygon(0 0, 50% 20px, 100% 0, 100% 100%, 0 100%);
padding-top: 60px;
}
.scenarios-grid .image {
display: none;
}
}
@media (min-width: 568px) {
.reviews-grid,
.scenarios-grid {
grid-template-columns: 1fr 1fr; 
}
.col-span-3,
.col-span-2 {
grid-column-start: span 2;
}
.row-span-2 {
grid-row-start: span 2;
}
.row-span-3 {
grid-row-start: span 3;
}
.scenarios-grid .item:not(.col-span-2) .inner + .inner {
background: linear-gradient(var(--bg-grey), #fff 60px);
clip-path: polygon(0 0, 50% 20px, 100% 0, 100% 100%, 0 100%);
padding-top: 60px;
}
.scenarios-grid .item.col-span-2 .inner + .inner {
padding-left: 70px;
background: linear-gradient(90deg, var(--bg-grey), #fff 60px);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 20px 50%);
}
.scenarios-grid .item.col-span-2 {
display: flex;
}
.scenarios-grid .item.col-span-2 .inner {
flex-basis: 50%;
flex-shrink: 0;
}
}
@media (min-width: 568px) and (max-width: 1199px) {
.scenarios-grid .row-span-2:first-child {
grid-row-start: span 1;
}
.scenarios-grid .image-2,
.scenarios-grid .image-3,
.scenarios-grid .image-4 {
display: none !important;
}
}
@media (min-width: 1200px) {
.reviews-grid,
.scenarios-grid {
grid-gap: 60px;
}
.scenarios-grid {
grid-template-columns: 1fr 1fr 1fr; 
}
.reviews-grid .item .inner {
padding: 60px;
}
.scenarios-grid .image-1 {
grid-column-start: 3
}
.scenarios-grid .image-2 {
grid-column-start: 1; 
grid-row-start: 4;
}
.col-span-3 {
grid-column-start: span 3;
}
.scenarios-grid .image-3 {
grid-row-start: 6;
grid-column: 2;
}
.scenarios-grid .image-4 {
grid-row-start: 11;
grid-column: 2;
}
} .circle {
border-radius: 50%;
background: var(--yellow);
}
.circle:before {
content: "";
display: block;
padding-top: 100%;
}
.home-banner-form {
position: relative; 
padding: 80px;
margin-left: -80px; 
background: #fff;
box-shadow: 160px 30px 80px -80px var(--bg-grey);
}
@media (min-width: 1200px) {
.home-banner .home-banner-form {
padding-top: 50px;
padding-bottom: 0;
}
}
.home-banner-form h3 {
margin-bottom: 30px;
text-align: center;
}
.home-banner-form .form-group {
margin-bottom: 20px;
}
.home-banner-form .btn {
width: 100%;
margin-top: 0;
} .social-icons {
display: inline-flex;
}
.social-icons a {
width: 44px;
height: 44px;
border: 1px solid;
font-weight: 500;
padding-top: 2px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.social-icons a + a {
margin-left: 15px;
} .home-banner-form:not(.active) textarea {
min-height: 54px;
}
.home-banner-form:not(.active) .show-on-active {
display: none;
}
.home-banner-form .close img {
transition: 0.4s;
margin-top: 6px;
}
.home-banner-form.active .close img {
transform: rotate(180deg);
}
.home-banner-form .close:hover {
color: var(--salmon);
cursor: pointer;
} .section-quote {
overflow: hidden;
}
.section-quote h2 {
font-style: italic; 
margin: 0;
}
.section-quote .item {
border-left: 3px solid var(--primary); 
padding-left: 37px;  
}
.section-quote .slick-slider .slick-track {
display: block;
}
.section-quote .slick-slider .slick-track .slick-slide {
height: unset;
}
.section-quote .content {
background: linear-gradient(to bottom right, var(--secondary) 50%, hsla(215deg, 50%, 20%, 0.8)); 
color: transparent;
}
.testimonials-fader {
position: absolute; 
top: calc(50% - 40px); 
transform: translateY(-50%);
left: 0;
right: 30px;
}
@media (max-width: 567px) {
.section-quote .content {
padding-top: 80px;
padding-bottom: 80px;
}
.section-quote h2 {
font-size: 24px;
}
}
@media (min-width: 568px) {
.section-quote .content {
padding-left: 80px; 
padding-top: 160px; 
padding-bottom: 160px; 
padding-right: 0; 
}
.section-quote .item {
padding-left: 77px;
}
}
@media (max-width: 1199px) {
.section-quote .content:before {
background: var(--secondary);
}
}
@media (min-width: 1200px) {
.section-quote h2 {
font-size: 42px;
}
.section-quote .content:before {
display: none;
}
.testimonials-fader {
left: 14%; 
right: 14%; 
}
} .up-level-link {
line-height: 24px;
margin-bottom: 16px;
}
.up-level-link a {
color: var(--primary);
} @media (min-width: 568px) {
.section-logo-scroller .content {
padding-left: 80px;
padding-right: 80px;
padding-top: 80px;
background: linear-gradient(to left, #fff 50%, rgba(255, 255, 255, 0));
position: relative;
z-index: 2;
font-size: 17px;
}
} .glossary-underline:not(a .glossary-underline) {
border-bottom: 1px dotted #aaa; 
cursor: help;
}