/*
Theme Name: SplitSmiths - Pepper Child
Author: Port 80 Services
Author URI: https://port80.services/
Description: Customisations of Pepper+ for Pepper Plus Child
Template: pepperplus
Version: 1.0.0
*/

/*Global, typography*/

body,button,input,select,textarea {
color: #fff}

#content a:not(.qbtn):link, #content a:not(.qbtn):visited {
text-decoration: underline}

#content a:hover {
text-decoration: none}

h1, #page h1.page-title, h2, h3, h3.insight-title,h3.service-title, h3.service-title a, h4, .portf-item-summary {
font-weight: bold;
line-height:normal!important;	
color: #fff}

#content .home-hero h1 {
font-size: 40px}

#content h1.mod-title {
font-size: 36px}

#content h2 {
font-size: 30px}

@media (min-width:768px) {
#content .home-hero h1 {
font-size: 66px}	

#content h1.mod-title {
font-size: 60px}
	
#content h2 {
font-size: 50px}	
}

@media (min-width:1024px) {
#content .home-hero h1 {
font-size: 80px}	

#content h1.mod-title {
font-size: 72px}
	
#content h2 {
font-size: 60px}	
}

/*cta*/ #page .quadro-mod a.qbtn, #page input.wpcf7-submit {
border: solid 2px #B19E5C;
align-self: center;
text-decoration: none!important;
padding: 16px 30px!important;
color:#fff;
text-decoration: none;
background: #B19E5C;
transition: all .2s ease}

#page .quadro-mod a.qbtn:hover, #page input.wpcf7-submit:hover {
background: none;
border-color: #fff;	
color:#fff!important;	
transition: all .4s ease}

#content .modheader-intro {
font-size:21px}

/*header*/

@media (max-width: 420px) {
#masthead .header-button {
display: none}
}

/*----------MODULES------------*/

.modheader-intro {
text-transform: none;
font-size: 18px;
color: #fff;
line-height: 150%;
letter-spacing: 0.1px;
font-weight: 400}

header.page-header {
border: none}

.page-inner-header {
padding-bottom: 0}

/*slogan - Banners*/

#content .type-slogan.home-hero {
height: auto;
min-height: 380px;
width: 100%;
aspect-ratio: 16/9}

#content .slogan-content-wrapper p{
font-size:19px;	
color:#fff}

#content .home-hero .slogan-content-wrapper * {
text-align:center;
color: #fff}

#content .home-hero .slogan-content-wrapper strong {
font-weight:normal;	
font-size: 40px}

#content .home-hero .slogan-wrapper {
position: absolute;
right: 0;
bottom: initial;
left: 0;
top: 50%;
transform: translateY(-50%)}

#content .type-slogan.slogan-large-text {
display: flex;
align-items: center}

@media(min-width:768px) {
#content .type-slogan.slogan-large-text p {
font-size: 26px}
}

/*home three blocks */
#content .home-blocks img{
display: block;
object-fit:cover;	
aspect-ratio: 1/1}

#content .home-blocks .service-icon{
margin-bottom:5px}

#content .home-blocks .qbtn{
margin-top:15px}
#content .home-blocks .service-title {
font-size: 24px}

/* Contact forms*/

#content .wpcf7-form input:not(.wpcf7-submit), #content .wpcf7-form textarea {
transition: .2s;
padding: 10px!important}

#content .wpcf7-form input:focus, #content .wpcf7-form textarea:focus {
background:#fff!important}

/*nav*/

#site-navigation li a {
font-size: 13px;
letter-spacing: .5px}

#msite-navigation li a {
letter-spacing: .2px}


/*Footer*/

#colophon {
color:#000;
font-weight: 400;}

#colophon h1.widget-title{
font-size: 24px;
letter-spacing: 0;  
padding-bottom: 10px;
margin-bottom: 24px;
text-transform: none;
border-width: 1px;
color: #000}

#colophon .widget-title::after {
opacity:1}

#colophon .widget  {
font-size: 90%}

#colophon .widget img {
display: block;
max-width:300px;
margin: -10px 0 10px 0;	
width: 100%;
filter: invert(1)}

#colophon .bottom-footer {
background: #000;
max-width: 100%;
padding: 20px 60px 20px 40px}

#colophon .bottom-footer .site-info{
display: block;
max-width: 1400px;
color:#ddd;
margin: auto}

#colophon .bottom-footer .site-info a {
color:#fff}

#colophon a {
color: #000;
text-decoration: underline}

#colophon a:hover {
text-decoration: none}

#colophon i.fa-solid {
color: #B19E5C}