/*!
Theme Name: hertsguttercleaning
Theme URI: http://cpmwebdesign.co.uk/
Author: CPM Webdesign
Author URI: http://cpmwebdesign.co.uk/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hertsguttercleaning
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

hertsguttercleaning is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*
 * Custom css (https://cpmwebdesign.co.uk/)
 * 
 */

/*--------------------------------------------------------------
# vars
--------------------------------------------------------------*/:root {
--dark: #000;
--font-size: .875rem;
--mob-font-size: .75rem;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
.contact-block-ul li svg {
position: relative;
top: 10px;
margin-right: 20px;
}

.fa-star {
color: gold;
}

.rating {
display: block;
margin: -20px auto 20px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
word-wrap: normal !important;/* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-size: .875rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;/* Above WP toolbar. */
}

html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}

body {
margin: 0;

font-display: auto;
font-weight: 300;
font-style: normal;
font-size: 1.125rem;
line-height: 1.5;
color: #000;
text-align: left;
background-color: #fff;
background-image: url(../hertsguttercleaning/dist/images/watermark.webp);
background-position: right 800px;
background-repeat: no-repeat;
padding: 30px 0 0;
}

/*--------------------------------------------------------------
 Typography
--------------------------------------------------------------*/
h1 {
font-family: pt-sans-pro-caption, sans-serif;
font-display: auto;
text-align: center;
}

h1.entry-title {
margin-bottom: 2rem;
}

/*--------------------------------------------------------------
 Header section
--------------------------------------------------------------*/
.orange {
background-color: #F76F0B;
color: #fff;
}

/*.black {
background-color: #000;
color: #fff;
}*/
.black {
background-color: #000;
color: #fff;
top: -1px;
position: relative;
padding: 20px 35px 19px !important;
}

.custom-logo {
max-width: 198px;
height: auto;
}

.top_row {
z-index: 9999;
display: block;
position: fixed;
top: 0;
width: 100%;
text-align: right;
margin: 0;
}

ul.tick {
list-style: none;
padding-left: 0;
}

ul.tick li:before {
content: "\2713";
font-weight: 400;
color: green;
padding-right: 5px;
font-size: 1.5rem;
}

ul.contact_top {
list-style: none;
padding-left: 0;
float: right;
margin: 0 -15px 0 0;
text-align: center;
}

ul.contact_top li {
display: inline-block;
padding: 18px 35px;
margin: 0;
font-style: italic;
font-size: 20px;
margin-top: -2px;
}

ul.contact_top li .fal {
margin-right: 10px;
}

.header-wrap-study {
position: relative;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
background-repeat: no-repeat;
background-position: center bottom;
height: 602px;
max-height: 602px;
display: table;
width: 100%;
margin-top: 168px;
}

.middle {
display: table-cell;
vertical-align: middle;
position: relative;
height: 100%;
width: 100%;
}

.inner {
margin-left: auto;
margin-right: auto;
max-width: 100%;
}

.mask {
background-size: cover !important;
background-image: url(../hertsguttercleaning/dist/images/mask.webp);
background-repeat: no-repeat;
background-position: right center;
height: 602px;
max-height: 602px;
display: table;
width: 60%;
position: absolute;
z-index: 9;
}

.mask p.slide_title {
font-weight: 700;
color: #fff;
font-size: 3.5rem;
text-align: left;
margin-left: 3.5rem;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
line-height: 3.5rem;
}

.mask h1 {
font-weight: 700;
color: #fff;
font-size: 3.5rem;
text-align: left;
margin-left: 3.5rem;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
}

p.orange-title {
font-weight: 700;
color: #F76F0B !important;
font-size: 3.5rem !important;
text-align: left;
margin-bottom: 0;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
}

h2.orange-title {
font-weight: 700;
color: #F76F0B;
font-size: 3.5rem;
text-align: left;
margin-bottom: 0;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
}

.call-now {
margin-left: 3.5rem;
display: block;
}

.call-now p {
color: #fff;
margin-bottom: 0;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
}

.call-now a .fal {
margin-right: 10px;
}

.call-now a {
color: #F76F0B;
font-size: 1.5rem;
}

.call-now-footer h2.orange-title {
font-weight: 700;
color: #F76F0B;
font-size: 3.5rem;
text-align: center;
margin-bottom: 0;
text-shadow: none;
}

.call-now-footer {

/*margin-left: 3.5rem;*/
display: block;
}

.call-now-footer p {
color: #000;
margin-bottom: 0;
}

.call-now-footer a .fal {
margin-right: 10px;
}

.call-now-footer a {
color: #F76F0B;
font-size: 1.5rem;
}

/*--------------------------------------------------------------
Content
--------------------------------------------------------------*/
hr {
margin: 2rem 0;
}

.container-xl {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

.container-xl {
max-width: 1280px;
}

#content {
margin-top: 30px;
}

/*--------------------------------------------------------------
Navbar
--------------------------------------------------------------*/
.bg-light {
background-color: #fff !important;
box-shadow: 0px 0px 5px #efefef;
}

.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link {
color: inherit;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
color: inherit;
}

.navbar {
padding: 1.5rem 2rem;
}

.navbar-nav {
font-style: italic;
font-weight: 400;
font-size: 1.125rem;
color: #000;
margin-left: 50px;
}

.navbar-light .navbar-nav .nav-link {
color: rgba(0, 0, 0, 1);
}

.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 1rem;
padding-left: 1rem;
}

.navbar-toggler .icon-bar {
background-color: #000;
transform: rotate(0deg) translate(0px, 0px);
transition: ease all .2s;
}

.navbar-toggler .icon-bar {
display: block;
width: 38px;
height: 3px;
border-radius: 0;
}

.navbar-toggler .icon-bar+.icon-bar {
margin-top: 8px;
}

.navbar-toggler:hover>.icon-bar:nth-child(2) {
width: 38px;
transition: ease all .2s;
}

.navbar-toggler:active>.icon-bar:nth-child(2) {
width: 38px;
transition: ease all .2s;
}

.navbar-toggler:not(.bend) .icon-bar:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
transition: ease all .2s;
}

.navbar-toggler:not(.bend) .icon-bar:nth-child(2) {
opacity: 0;
transition: ease all .2s;
}

.navbar-toggler:not(.bend) .icon-bar:nth-child(3) {
transform: rotate(-45deg) translate(9px, -9px);
transition: ease all .2s;
}

.dropdown-item {
padding: .75rem 1.5rem;
}

.split {
display: inline-block;
float: left;
}

.split_mid, .split_right {
top: 12px;
position: relative;
}

.split_left {
}

.split_left img {
}

.wp-block-image img {
height: auto !important;
}

/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/

/*--------------------------------------------------------------
  contact form
--------------------------------------------------------------*/::-webkit-input-placeholder {

/* Chrome/Opera/Safari */
color: #fff;
opacity: 1;
}

::-moz-placeholder {

/* Firefox 19+ */
color: #fff;
opacity: 1;
}

:-ms-input-placeholder {

/* IE 10+ */
color: #fff;
opacity: 1;
}

:-moz-placeholder {

/* Firefox 18- */
color: #fff;
opacity: 1;
}

.contact-form-btn {
position: relative;
text-transform: uppercase;
padding: 8px 50px !important;
border-radius: 2px;
border: solid thin #F76F0B !important;
background: #F76F0B !important;
color: black !important;
margin: 20px 0 0;
font-weight: 300;
}

.send_holder {
float: right;
}
.call-now-footer p strong{
  font-weight: 700;
  color: #F76F0B !important;
}
.nf-error .ninja-forms-field {
border-bottom: 2px solid #D30000 !important;
}

.nf-form-fields-required, .nf-input-limit {
display: none;
}

.nf-field-element textarea {
height: 100px !important;
}

input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="search"], textarea, input[type="number"] {
background-color: transparent !important;
border-bottom: 1px solid #fff !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
font-size: 16px !important;
min-height: 40px !important;
padding: 5px 10px 5px 0 !important;
font-weight: 300 !important;
color: #fff !important;
font-style: italic !important;
}

.contact_block {
background-image: url(../hertsguttercleaning/dist/images/contact_bg.webp);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
padding: 70px 10px;
color: #fff;
margin-top: 50px;
}

.contact_block ul {
list-style: none;
padding: 0;
margin: 0;
}

.contact_block ul a {
color: inherit;
}

.contact_block ul li {
margin-bottom: 10px;
}

.contact_block ul li i {
padding-right: 10px;
}

h2.contact-header {
font-size: 2.5rem;
font-weight: 400;
}

.contact-header span {
font-weight: 700;
}

ul.contact_list {
margin-top: 53px;
}

ul.contact_list li i {
padding-right: 10px;
}

ul.contact_list li i.fa-mobile-android-alt, .contact_block ul li i.fa-mobile-android-alt {
padding-left: 7px;
}

ul.contact_list li:before {
content: "" !important;
}

img.footer_logo {
width: 99px;
height: auto;
margin-top: -15px;
}

.site-info {
text-align: center;
font-size: 100%;
padding: 10px 5px;
color: #fff;
letter-spacing: 2px;
background-color: #000;
}

.site-info span {
font-size: 70%;
padding-left: 5px;
}

.pre_footer_holder {
padding: 50px 10px;
}

.pre_footer_holder a {
color: inherit;
}

.pre_footer_holder ul {
list-style: none;
padding: 0;
}
.pre_footer_holder ul li {

padding-bottom: 5px;
}
.pre_footer_holder ul li:before {
content: "\003E";
top: 2px;
position: relative;
margin-right: 5px;
}

.container-fluid.stone {
margin: 0;
padding: 70px 10px 50px;
background-color: #F8F8F8;
}

blockquote {
margin: 30px 0;
}

blockquote p {
font-style: italic;
font-size: 1.25rem;
margin-bottom: 0;
}

blockquote::before {
color: #000;
content: "\201C";
font-size: 7rem;
line-height: 0.1em;
margin-right: 0.15em;
vertical-align: -0.4em;
top: 20px;
position: relative;
}

blockquote p:last-of-type::after {
color: #000;
content: "\201D";
font-size: 7rem;
line-height: 0.4em;
margin-left: 0em;
vertical-align: -0.6em;
}

blockquote cite {
display: block;
text-align: center;
}

.carousel-indicators {
bottom: -30px;
}

.carousel-indicators li {
background-color: rgba(0, 0, 0, 1);
}

.carousel-indicators .active {
background-color: #F76F0B;
}
ul.contact_top li a span{
  color: white;
}
/*--------------------------------------------------------------
break points
--------------------------------------------------------------*/

/* Small devices (landscape phones,576px and up)*/
@media (min-width:576px) {
}

/* Medium devices (tablets,768px and up)*/
@media (min-width:768px) {
}

/*Large devices (desktops,992px and up)*/
@media (min-width:992px) {
}

/*Large devices (desktops,992px and up)*/

/* Medium devices (tablets,768px and up)*/
@media (max-width:1450px) {
.mask {
width: 65%;
}

}

@media (max-width:1350px) {
.mask {
width: 70%;
}

}

@media (max-width:1250px) {
.mask p.slide_title {
line-height: 2.75rem;
}

.mask h1, .mask p.slide_title {
font-size: 2.5rem;
}

p.orange-title {
font-size: 2.5rem !important;
}

h2.orange-title {
font-size: 2.5rem;
}

.call-now p {
font-size: 0.875rem;
}

.call-now a {
font-size: 1.25rem;
}

}

@media (max-width:991px) {
.wp-block-column {
flex-basis: 100%;
}

.wp-block-columns {
flex-wrap: wrap;
}

.navbar-nav {
text-align: center;
margin-left: 0px;
}

ul.contact_top li {
text-align: center;
padding: 18px 25px;
}

ul.contact_top li .fal {
margin-right: 0px;
font-size: 1.5rem;
}

.navbar-toggler {
padding: 0.75rem 0.75rem;
background-color: #F76F0B;
border-radius: 0;
}

.navbar-light .navbar-toggler {
margin-top: 50px;
}

.navbar-light .navbar-toggler {
border-color: #F76F0B;
}

.navbar-toggler .icon-bar {
background-color: white;
}

.top_row {
margin: 0;
float: none;
}

.mask {
width: 85%;
}

.mask p.slide_title {
line-height: 2.75rem;
}

.mask h1, .mask p.slide_title, .call-now {
margin-left: 1.5rem;
}

}

@media (max-width:768px) {
body {
background-position: center 600px;
}

ul.contact_list {
margin-top: 0px;
}

img.footer_logo {
margin-top: 0px;
}

ul.contact_top {
float: none;
margin: 0 -15px;
}

.hide {
display: none;
}

ul.contact_top li {
width: 49%;
}

.custom-logo {
max-width: 108px;
height: auto;
}
.header-wrap-study {
  margin-top: 140px;
}
.navbar {
padding: 4.5rem 2rem 1.25rem;
}

.navbar-light .navbar-toggler {
margin-top: 10px;
}

.mask, .header-wrap-study {
height: 402px;
max-height: 402px;
}

.mask p.slide_title {
line-height: 2.25rem;
}

.mask h1, .mask p.slide_title, h2.orange-title, p.orange-title {
font-size: 2rem !important;
}

.call-now p {
font-size: 0.6875rem;
}

.call-now a {
font-size: 1rem;
}

.mask h1, .mask p.slide_title, .call-now {
margin-left: 1.25rem;
}

}

@media (max-width:576px) {
.h1, h1, h2.contact-header {
font-size: 2rem;
}

body {
background-position: center 500px;
}

.mask {
width: 100%;
}

.mask, .header-wrap-study {
height: 302px;
max-height: 302px;
}

}

@media (max-width:440px) {
.h1, h1, h2.contact-header {
font-size: 1.75rem;
}

.mask, .header-wrap-study {
height: 270px;
max-height: 270px;
}

.mask p.slide_title {
line-height: 2rem;
}

.mask h1, .mask p.slide_title, h2.orange-title, p.orange-title {
font-size: 1.75rem !important;
}

.call-now p {
font-size: 0.6875rem;
}

.call-now a {
font-size: 1rem;
}

.mask h1, .mask p.slide_title, .call-now {
margin-left: 1rem;
}

}

@media (max-width:360px) {
.mask p.slide_title {
line-height: 1.75rem;
}

.mask h1, .mask p.slide_title, h2.orange-title, p.orange-title {
font-size: 1.50rem !important;
}

.call-now p {
font-size: 0.6875rem;
}

.call-now a {
font-size: 1rem;
}

}

/* Extra large devices (large desktops,1200px and up)*/
@media (min-width:1600px) {
.mask {
width: 55%;
}

}