/*!
Theme Name: cpmwebdesign
Theme URI: http://underscores.me/
Author: CPM Webdesign
Author URI: https://cpmwebdesign.co.uk
Description: Description
Version: 1.1.0
Tested up to: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cpmwebdesign
Tags: Custom Template, Bootstrap 5,

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

cpmwebdesign is based on Underscores https://underscores.me/, (C) 2012-2020 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 {
--navy-bg: navy;
--bg-change: all 1s;
}


.bg-one { --bg-color: #1A1123; } /* Deep Plum */
.bg-two { --bg-color: #1A2238; } /* Midnight Indigo */
.bg-three{ --bg-color: #2B1838; } /* Obsidian Violet */
.bg-four  { --bg-color: #1A1123; } /* Charcoal Navy */
.bg-five { --bg-color: #1C2A40; } /* Slate Blue */
.bg-six { --bg-color: #2D2034; } /* Blackberry Night */




.red-bg{
	background-color: red;
}
.green-bg{
	background-color: green;
}
.orange-bg{
	background-color: orange;
}
#article {
  scroll-margin-top: 100px;
}
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
.star-rating:before{
	content: url(../cpmwebdesign/dist/images/5-star-rating.svg);
	display: block;
	text-align: center;
}
.faqs-list{
	list-style-image: url(../cpmwebdesign/dist/images/message-question.svg);
	list-style-position: inside;
}

h2.faqs-list:before{
	content: url(../cpmwebdesign/dist/images/message-question.svg);
	display: block;
}

.faqs-list li a{
	color: #FCF55F;
}
.faqs-list li a:after{
content: url(../cpmwebdesign/dist/images/arrow-up-right.svg);
margin-left: 0.2em;
}
td p{
	margin-top: 1rem;
}
th {
  padding-right: 0.5rem;
}
/* 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: #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. */
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
outline: 0;
}
.site-description,
span.screen-reader-text, .post-edit-link, a.skip-link, .site-title a, p.site-title {
color: white !important;

}

/*--------------------------------------------------------------
blog styles
--------------------------------------------------------------*/
.wp-block-latest-posts a, .nav-links a {
color: #FCF55F;
text-decoration: none;
}

.wp-block-latest-posts a:after {
content: url(../cpmwebdesign/dist/images/arrow-up-right.svg);
margin-left: 0.5em;
}
.post-navigation{
	text-align: center;
}
/*--------------------------------------------------------------
strapline rotate
--------------------------------------------------------------*/
.strapline.hidden {
display: none;
}

span.strapline {
position: absolute;
}

/*--------------------------------------------------------------
typography
--------------------------------------------------------------*/
html {
scroll-behavior: smooth;
background-color: #130927;

}

:target:before {
content: "";
display: block;
height: 20px;
margin: 20px 0 0;
}

body {
margin: 0;
font-family: "DM Sans", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.125rem;
line-height: 1.75;
color: #d1d1d1;
text-align: left;
/*background-color: #020E1A;*/
background-color: #130927;
padding: 0;
overflow: auto !important;
transition: var(--bg-change);

}
.first-display.display-4 span{
	color: #FCF55F;
}
.with-line {
border-right: solid thin rgba(255, 255, 255, .2);
padding: 0 0px 10px;
}

h1 {
font-size: 3rem;
font-weight: 900;
}

.page-title, .entry-title, h1.home-header, h2 {
font-size: 2.125rem;
font-weight: 900;
}

.entry-title a {
color: inherit;
}

.page-id-304 h3 {
font-weight: 500;
}

h2.home-h2, h3 {
font-size: 1.5rem;
font-weight: 900;
}

h4 {
font-size: 1.25rem;
font-weight: 700;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
width: 100%;
padding-right: var(--bs-gutter-x, 1.75rem);
padding-left: var(--bs-gutter-x, 1.75rem);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
}

.sticky-header {
position: sticky;
top: 90px;
}

.review-container {
background: #EDEDED;
padding: 3em 2em 1em;
color: black;
border-radius: 3px;
height: 100%;
}

.review-container.yellow-bg {
background: #FCF55F;
}

.yellow {
color: #FCF55F;
}

.wp-block-separator {
border-top: 1px solid;
border-bottom: none;
}
a.internal-link:hover {
text-decoration: underline;

}


a.internal-link {
color: #FCF55F;
text-decoration: none;
}

a.internal-link:after{
	content: url(../cpmwebdesign/dist/images/arrow-up-right.svg);
margin-left: 0.2em
}
.rank-math-list-item {
padding: 3em 0;
border-bottom: 8px solid rgba(255, 255, 255, 0.1);
}

.rank-math-list-item:first-of-type {
padding-top: 0;
}

.footer-row.row {
--bs-gutter-x: 0;
}
.jump-links{
	list-style: none;

}
.jump-links li {
  padding: 0 0.75em 0.5em 0;
  display: block;
 
}
.seo-jump-links{
	list-style: none;

}
.seo-jump-links li {
  padding: 0 0.75em 0.5em 0;
  display: block;
 
}
/*--------------------------------------------------------------
blog specific styles
--------------------------------------------------------------*/
body.category h1,
body.category h2,
body.single-post h1,
body.single-post,
body.category{
color: black;
}
body.single-post,
body.category{
	background: white;
	
}
/*--------------------------------------------------------------
Page top 
--------------------------------------------------------------*/
img.custom-logo {
width: 430px;
height: 18px;
}

img.mobile-custom-logo {
display: none;
}

.navbar-brand {
margin: 0 2rem;
}

.site-header {
position: fixed;
width: 100%;
z-index: 9;
}

#menu-menu-2 {
text-align: right;
position: absolute;
z-index: 1;
padding: 14px;
right: 0;
}

#menu-menu-2 li {
display: inline-block;
padding-left: 1em;
}

#menu-menu-2 li a {
text-decoration: none;
color: #DDDDDD;
}

/*--------------------------------------------------------------
callout
--------------------------------------------------------------*/
.callout {
height: 350px;
display: flex;
justify-content: center;
align-items: center;
}

.callout-home {
color: #DDDDDD;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.callout, .callout-home {
padding: 0 2rem;
width: 100%;
}

.display-4 {
font-weight: 900;
}

.first-display::before {
display: block;
content: open-quote;
font-size: 10rem;
color: #FCF55F;
position: relative;
top: 110px;
right: 5px;
}

.first-display::after {
display: block;
content: close-quote;
font-size: 0.1rem;
color: #FCF55F;
position: relative;
visibility: hidden;
}

.first-display {
margin-top: -90px;
}

.see-you{
	visibility: hidden;
}
/*--------------------------------------------------------------
blockquote
--------------------------------------------------------------*/

/*--------------------------------------------------------------
content
--------------------------------------------------------------*/

/*--------------------------------------------------------------
icons
--------------------------------------------------------------*/
.phone-link a::before {
display: none;
content: url(../cpmwebdesign/dist/images/phone-arrow-up-right.svg);
background: #1B1031;
padding: 15px 18px 8px;
}

.email-link a::before {
display: none;
content: url(../cpmwebdesign/dist/images/envelope.svg);
background: #25193C;
padding: 18px 16px 10px;
top: -2px;
position: relative;
}

.phone-link {
margin-right: -6px;
}

.page-title, .entry-title {
text-align: center;
color: #DDDDDD;
}

.page-id-575 .entry-title:before {
content: url(../cpmwebdesign/dist/images/message-question.svg);
display: block;
text-align: center;
margin-bottom: 1rem;
}

.page-id-304 .entry-title::before {
content: url(../cpmwebdesign/dist/images/memo-circle-info.svg);
display: block;
text-align: center;
margin-bottom: 1rem;
}

/*--------------------------------------------------------------
services list 
--------------------------------------------------------------*/

/*--------------------------------------------------------------
Buttons 
--------------------------------------------------------------*/
.more-bth-container {
display: block;
margin-top: 2em;
}

a.more-link {
text-decoration: none;
border-radius: 100px;
font-size: 1rem;
padding: 0.75em 2.5em 0.75em 3em;
}

.wp-block-button__link {
font-size: 1rem;
}

a.more-link, .lets-talk .wp-block-button__link {
background: transparent;
color: #FCF55F;
border: solid thin #FCF55F;
}

a.more-link:hover, .lets-talk .wp-block-button__link:hover {
background: #FCF55F;
color: black;
}

a.more-link:hover:after, .lets-talk .wp-block-button__link:hover:after {
content: url(../cpmwebdesign/dist/images/arrow-up-right-black.svg);
}

a.more-link:after, .img-overlay .link-btn:after, .lets-talk .wp-block-button__link:after {
content: url(../cpmwebdesign/dist/images/arrow-up-right.svg);
margin-left: 0.5em
}

.img-overlay .link-btn:after {
content: url(../cpmwebdesign/dist/images/arrow-up-right-black.svg);
}

.img-overlay .link-btn {
font-size: 1rem;
padding: 0.3em 1.5em 0.3em 2em;
background: #FCF55F;
color: black;
border-radius: 100px;
border: solid thin black;
}

/*--------------------------------------------------------------
Content Specific  
--------------------------------------------------------------*/
.img-overlay:hover {
opacity: 1;
}

.img-overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
opacity: 0;
text-align: center;
background-color: rgba(252, 245, 95, 1);
-webkit-transition: all .4s linear;
transition: all .4s linear;
margin-bottom: -20px;
}

.button-container {
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
}

.folio-home.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
position: relative;
}

.wp-block-image.folio-cover {
margin: 0 0 -1em;
padding: 0 0 20px;
}

/*--------------------------------------------------------------
wp style overrides
--------------------------------------------------------------*/

/*--------------------------------------------------------------
Navbar and Navigation
--------------------------------------------------------------*/
.offcanvas-collapse {
visibility: visible !important;
}

.dropdown-menu {
background: #FCF55F;
}

.navbar-dark .navbar-nav .nav-link.active {
color: #DDDDDD;
text-decoration: none;
background-color: transparent;
}

.dropdown-item.active, .dropdown-item:active {
color: #18212A;
text-decoration: none;
background-color: #FCF55F
}

.dropdown-item:focus, .dropdown-item:hover {
color: #FCF55F;
text-decoration: none;
background-color: #18212A;
}

.dropdown-menu {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
border: none;
border-radius: 0;
}

.bg-dark {
/*background-color: #020E1A !important;*/
background-color: #130927 !important;
transition: var(--bg-change);
}

.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.75rem;
padding-left: 0.75rem;
color: #DDDDDD;
font-size: 1rem;
text-align: center;
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link {
color: #FCF55F;
}

.navbar-toggler .icon-bar {
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, 9px);
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(6px, -9px);
transition: ease all .2s;
}

.navbar-toggler {
background: #FCF55F;
position: absolute;
right: 0;
}

.navbar-toggler:focus {
box-shadow: none;
}

.navbar-toggler:not(:disabled):not(.disabled) {
padding: 16px 12px 20px 14px;
outline: none;
border-radius: 0;
border: none;/* border-radius:2px;*/
}

.navbar-toggler .icon-bar {
background-color: #18212A;
}

/*--------------------------------------------------------------
# back to top
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/
.site-footer {
border-top: solid thin #353E48;
background-color: #130927;
}

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

.site-footer ul li {
padding-bottom: 10px;
}

.site-footer ul li a {
color: #DDDDDD;
text-decoration: none;
}

.site-footer ul li a:hover {
color: #FCF55F;
}

.site-info {
background: white;
font-size: 0.875rem;
color: black;
}

/*--------------------------------------------------------------
# tabs
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# break points
--------------------------------------------------------------*/
@media (max-width:1559px) {
}

@media (max-width:1400px) {
.image-holder-dark {
	padding: 50px 30px;
}

.email-link a::before, .phone-link a::before {
	display: inline-block;
}

.email-link a span, .phone-link a span {
	display: none;
}

#menu-menu-2 {
	padding: 0px;
}

#menu-menu-2 li {
	padding-left: 0em;
}

}

/*--------------------------------------------------------------
# max-width:1280px
--------------------------------------------------------------*/
@media (max-width:1280px) {
	.home-header br{
		display: none;
	}
}

/*--------------------------------------------------------------
# max-width:992px
--------------------------------------------------------------*/
@media (min-width:992px) {
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
	flex-basis: 0;
	flex-grow: 1;
}

}

@media (max-width:991px) {
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
	flex-basis: 100% !important;
}

.folio-home.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
	flex-basis: 45% !important;
}

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

}

@media (max-width:992px) {
.with-line {
	border-right: solid thin rgba(255, 255, 255, 0);
	padding: 0;
}

.page-title, .entry-title, h1.home-header, h2 {
	font-size: 2rem;
}

.sticky-header {
	position: relative;
	top: 0px;
}

.dropdown-menu {
	text-align: center;
}

.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2), .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) {
	width: 100%;
}

cite {
	font-size: 1rem;
}

.first-display::before {
	display: block;
	content: open-quote;
	font-size: 8rem;
	color: #FCF55F;
	position: relative;
	top: 90px;
	right: 5px;
}

.first-display {
	margin-top: -80px;
}

.display-4 {
	font-size: calc(1.475rem + 1.7vw);
}

#menu-menu-2 {
	right: 64px;
}

.offcanvas-collapse {
	position: fixed;
	top: 0px;   /* Height of navbar */
	bottom: 0;
	right: 100%;
	left: -100%;
	width: 100%;
	padding-right: 1rem;
	padding-left: 1rem;
	overflow-y: auto;
	visibility: hidden; /*background-color: var(--darkgrey);*/
	background: #130927;
	transition-timing-function: ease-in-out;
	transition-duration: .5s;
	transition-property: left, visibility;
	padding-top: 150px;
	z-index: -1;
}

.offcanvas-collapse.open {
	left: 0;
	visibility: visible;
}

}

/*--------------------------------------------------------------
# max-width:768px
--------------------------------------------------------------*/
@media (max-width:768px) {
.first-display::before {
	display: block;
	content: open-quote;
	font-size: 6rem;
	color: #FCF55F;
	position: relative;
	top: 70px;
	right: 5px;
}

.first-display {
	margin-top: -90px;
}

.display-4 {
	font-size: calc(1.475rem + 1.0vw);
}

img.custom-logo {
	width: 370px;
	height: 16px;
}

}

/*--------------------------------------------------------------
# max-width:576px
--------------------------------------------------------------*/
@media (max-width:620px) {
cite {
	font-size: 0.875rem;
}

.display-4 {
	font-size: 1.75rem;
	margin-bottom: .5rem;
}

}

/* Small devices (landscape phones,576px and up)*/
@media (max-width:576px) {
.page-title, .entry-title, h1.home-header, h2 {
	font-size: 1.5rem;
}
	.wp-block-image.is-style-rounded.mb-5.cpm-img figure img {
  width: 100% !important;
  height: auto !important;
}

h2.home-h2, h3 {
	font-size: 1.25rem;
	font-weight: 700;
}

.phone-link a::before {
	padding: 15px 18px 8px;
}

.row > * {
	padding-right: calc(var(--bs-gutter-x) * 1.5);
	padding-left: calc(var(--bs-gutter-x) * 1.5);
}

.display-4 {
	font-size: 1.475rem;
}

img.custom-logo {
	display: none !important;
}

img.mobile-custom-logo {
	display: block !important;
	width: 153px !important;
	height: 34px !important;
}

.navbar-toggler {
	top: -1px;
}

.navbar {
	padding-top: .55rem;
}

}

@media (max-width:498px) {
.display-4 {
	font-size: 1.375rem;
}

.callout, .callout-home {
	padding: 0 1rem;
}

.navbar-brand {
	margin: 0 1rem;
}

}

@media (max-width:460px) {
	.wp-block-image.is-style-rounded.mb-5.cpm-img figure img {
  width: 100% !important;
  height: auto !important;
}

.display-4 {
	font-size: 1.75rem;
}

.first-display br {
	display: none;
}

.long-heading br{
	display: none;
}
}

@media (max-width:400px) {
}

@media (max-width:360px) {
}

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

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

/* Extra large devices (large desktops,1200px and up)*/
@media (min-width:1200px) {
}