/*
Theme Name: Westberry
Author: Bridgewater Finance Group
Description: Westberry stylesheet
Version: 1.0.0
Text Domain: Westberry
*/

/*COLOURS
Black - #161616
White - #FAFAFA
Black 2 - #1A1A1A
White 2 - #FFFFFF

#031926 - #46545D - #B3BABD
#457A8C - #65909E - #B9CFD6
#77ACA2 - #7DB6BE - #CFE0D8
#F7C600 - #99CCC3 - #FAE9AA

Orange - #F59E00
Pink - #E41B82
Blue - #008CBB
Green - #9DC41A

_FONT
Light 300 - Regular 400 - Semibold 600 - Bold 700
*/

html {scroll-behavior: smooth}
body {
	margin: 0;
    font-family: 'Plus Jakarta Sans', -apple-system, system-ui, BlinkMacSystemFont, “Segoe UI”, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”, sans-serif;
	font-size: .9rem;
	font-weight: 400;
	line-height: 1.5;
	color: #1A1A1A !important;
	text-align: left;
	background-color: #FAFAFA;
	word-spacing: 0.5px;
    letter-spacing: .3px;
}
* {scroll-margin-top: 100px;} /* for scroll-to elements to appear below header */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {line-height: 1.35;}
h1, h2, h3 {font-weight: 600}
h3 {font-size: 1.5rem}

a {
	text-decoration: underline;
	color: #457A8C;
}
a:hover, a:focus {color: #F59E00}

/* Accessibility */
.screenreader-desktop {
	position: fixed;
    left: -999px;
    width: 1px;
    height: 1px;
    top: 0;	
}
.screenreader-desktop:focus {
	color: #fff;
	text-decoration: none;
    background: #008CBB;
    display: inline-block;
    height: auto;
    width: auto;
    position: fixed;
    margin: auto;
    z-index: 10000;
    top: 15px;
    left: 15px;
    padding: 8px 16px;
    border-radius: 25px;
    -moz-box-shadow: 0 2px 5px -1px rgba(156,136,129,.3);
    -webkit-box-shadow: 0 2px 5px -1px rgb(156 136 129 / 30%);
    box-shadow: 0 2px 5px -1px rgb(156 136 129 / 30%);
}

/* Main nav */
.navbar li {padding-right: 3rem}
.navbar.bg-light, .navbar.bg-dark {
	-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.15); 
	-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.15); 
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.15);
}
.navbar.bg-dark {background-color: #191919 !important;}
.navbar.bg-dark a {color: #fff}
.navbar.bg-dark a:hover {color: #F59E00}
.navbar.bg-light {background-color: #fff !important;}
.navbar.bg-light a {color: #191919}
.navbar.bg-light a:hover, .navbar.bg-light a:focus {color: #E41B82}

.navbar.bg-dark .current_page_item a, footer .current_page_item a,
.navbar.bg-light .current_page_item a, .navbar.bg-dark .menu-items li.active a {
	font-weight: 700;
    cursor: default;
	text-decoration: none;
}
.navbar.bg-dark .current_page_item a, footer .current_page_item a {color: #F59E00;}
.navbar.bg-light .current_page_item a, .navbar.bg-dark .menu-items li.active a {color: #E41B82;}

@media only screen and (max-width:992px) {
	.hide-mobile {display:none;}

	/* MOBILE navigation */
	.nav-container .checkbox {
		position: absolute;
		display: block;
		height: 32px;
		width: 32px;
		top: 20px;
		right: 20px;
		z-index: 5;
		opacity: 0;
		cursor: pointer;
	}
	.nav-container .hamburger-lines {
		display: block;
		height: 26px;
		width: 32px;
		position: absolute;
		top: 17px;
		right: 20px;
		z-index: 2;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.nav-container .hamburger-lines .line {
		display: block;
		height: 4px;
		width: 100%;
		border-radius: 10px;
		background: #fff;
	}
	.bg-light .nav-container .hamburger-lines .line {background: #191919}
	.nav-container .hamburger-lines .line1 {
		transform-origin: 0% 0%;
		transition: transform 0.4s ease-in-out;
	}
	.nav-container .hamburger-lines .line2 {transition: transform 0.2s ease-in-out}
	.nav-container .hamburger-lines .line3 {
		transform-origin: 0% 100%;
		transition: transform 0.4s ease-in-out;
	}
	.navbar .menu-items {
		border-bottom-left-radius: 35px;
		position: fixed;
		background-color: #fff;
		width: 80%;
		z-index: 105;
		right: 0;
		padding: 3rem 2rem;
		top: 55px;
		-moz-box-shadow: -5px 5px 5px 0px rgba(0,0,0,0.15); 
		-webkit-box-shadow: -5px 5px 5px 0px rgba(0,0,0,0.15); 
		box-shadow: -5px 5px 5px 0px rgba(0,0,0,0.15);
		transform: translate(150%);
		transition: transform 0.5s ease-in-out;
		text-align: center;
	}
	.navbar .menu-items li {
		font-size: 1.25rem;
		text-decoration: none;
		margin-bottom: 1.5rem;
		color: #191919;
		text-align: center;
		font-weight: 700;
		padding-right: 0;
	}
	.navbar.bg-dark .menu-items li a {color: #191919;}
	.nav-container input[type="checkbox"]:checked ~ .menu-items {transform: translateX(0)}
	.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {transform: rotate(45deg)}
	.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {transform: scaleY(0)}
	.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {transform: rotate(-45deg)}
}

.breadcrumb {
	background-color: transparent;
	display: block;
	margin-bottom: 1rem !important;
	font-size: .8rem;
	padding-left: 0;
}
.breadcrumb li a {color:#F59E00}
.breadcrumb li a:hover {color:#9DC41A}
.breadcrumb li::after {content:none !important}
.breadcrumb-item.active {color: #81A8B5;}

.push-content {height: 85px;}

.navbar a, a.btn {text-decoration: none;}
.btn {
	border-radius: 50px;
	padding: 12px 40px;
	margin: 1rem 0 1.5rem 0;
	font-weight: 700;
	min-width: 80%
}
.btn.reg-size {min-width:10%;}
.btn.primary-btn {
	background-color: #1A1A1A;
	color: #fff;
}
.btn.primary-btn:hover, .btn.primary-btn:focus {
	background-color: #457A8C;
	color: #fff;
}
.dark-bg .primary-btn {
	color: #1A1A1A;
	background-color: #FAFAFA;
}
.dark-bg .primary-btn:hover, .dark-bg .primary-btn:focus {
	color: #1A1A1A;
	background-color: #FAE9AA;
}

.cky-btn {border-radius:50px}
button.cky-banner-element {
    border: none;
    padding: 12px 16px;
    color: #fff;
    background-color: #77aca2;
    border-color: #77aca2;
	border-radius:50px;
}

.hero {
    margin-bottom: 0;
    padding-top: 4rem;
}
img.hero-graphic {
    margin-top: -1px;
    position: absolute;
}
img.hero-graphic.index-behind {z-index:-2}
.dark-bg {
	background-color: #1A1A1A;
	color: #FAFAFA;
}
.dark-bg a {color: #FAE9AA}
.dark-bg a:hover, .dark-bg a:focus {color: #F59E00}

.absolute-div {height: 150px;}
@media only screen and (max-width:767px) {
.absolute-div {height: 50px;}
}
.push-up {margin-top: -4rem;}

.content-box {
	border-radius: 15px;
	min-height: 500px;
	background-color: #fff;
	color: #1A1A1A;
	-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.15); 
	-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.15); 
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.15);
}
.content-box .content {
	padding: 2rem 1rem;
}
.banner-img {
    background-size: cover;
    min-height: 500px;
    right: 0;
    background-position: center;
}

/*Lists*/
ul {padding-inline-start: 20px}
li {padding: .5rem 0}
.checklist {list-style: none}
.checklist li {padding:1rem 0}
.checklist li:after {
    content: "";
	background: url("/wp-content/uploads/2022/10/checkmark-WB.svg") center no-repeat;
    display: inline-block;
    vertical-align: top;
    margin-left: 8px;
    width: 25px;
    height: 25px;
	float:right;
}

.legal-content h2 {margin: 3rem 0 1rem 0}
h2.firsthead {margin-top: 0}
.legal-content h3 {margin-top: 2rem}
.white-bg {
	background-color: #FAFAFA;
	border-radius: 50px;
}
.legal-content {
	padding-top: 10rem;
	padding-bottom: 3rem;
}

/* CIRCLES */
.circle {
	border-radius: 50%;
	position: absolute;
	-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.15); 
	-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.15); 
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.15);
}
.size-sm {
	width: 50px;
	height: 50px;
}
.size-md {
	width: 70px;
	height: 70px;
}
.size-lg {
	width: 100px;
	height: 100px;
}
.yellow {background-color: #F7C600}
.pink {background-color: #E41B82}
.green {background-color: #77ACA2}

.index-behind {z-index: 0}
img.index {
	z-index: 2;
	position: relative;
}
	
@media only screen and (min-width:767px) {
.index-front {z-index: 5}
}

/* BLOBS */
.blobs {
	position: absolute;
	width: 30%;
	margin-top: -3rem;
}
.blobs.bottom {z-index: -10;}
.blobs.lg {width:80%}
.blobs.xl {width:100%}

.blobs.index-behind {z-index:-10}

@media only screen and (max-width:767px) {
.blobs {width: 60%;}
}
@media only screen and (max-width:576px) {
.blobs {
	width: 100%;
	margin-left: -15px;
	margin-top: 0;
}
}

/* PHOTO GRAPHICS */
.photo-graphic {
	width: 100%;
    position: absolute;
    z-index: 100;
}
@media only screen and (max-width:767px) {
.move-left {margin-left: -20px !important}
.move-down {top: 0 !important}
}

.rounded-img {border-radius: 15px;}
.rounded-right {border-radius: 0 15px 15px 0 !important;}
.rounded-left {border-radius: 15px 0 0 15px !important;}

p.email:before, p.phone:before {
	content: "";
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    width: 40px;
    height: 40px;
}
p.email:before {background: url("/wp-content/uploads/2022/10/email-WB.svg") center no-repeat}
p.phone:before {background: url("/wp-content/uploads/2022/10/phone-WB.svg") center no-repeat}
p.email.neg:before {background: url("/wp-content/uploads/2022/10/email-neg-WB.svg") center no-repeat}
p.phone.neg:before {background: url("/wp-content/uploads/2022/10/phone-neg-WB.svg") center no-repeat}

footer {
	background-color: #1A1A1A;
	font-size: .8rem;
	color: #fff;
	padding: 0 0 3rem 0;
	margin-top: -3px;
	z-index: 100;
	position: absolute;
	width: 100%;
}
.footer-graphic {
	margin-top: 3rem;
	z-index: 100;
	position: relative;
	width: 100%;
}
footer a {color: #FAE9AA}
footer a:hover, footer a:focus {color: #F59E00}

.menu-footer-menu-container ul {padding-inline-start: 15px}
.menu-footer-menu-container a {
	color: #fff;
}

@media only screen and (min-width:767px) {
.menu-footer-menu-container ul {padding-inline-start: 0;}
.menu-footer-menu-container li {
    display: inline !important;
    margin-right: 2.5rem;
	margin-left: 2.5rem;
}
.menu-footer-menu-container li:before {
    content: "";
    position: absolute;
    background-color: #fff;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-left: -2.5rem;
    margin-top: 7px;
}
.lg-spacer {height: 100px}
.md-spacer {height: 50px}
.sm-spacer {height: 25px}
}

@media only screen and (min-width:992px) {
.hero.push-down .container, .hero.push-down .container-fluid {
	margin-top: -15rem;
    margin-bottom: -12rem;
}
	
.img-hover, img.img-scale  {
	overflow: hidden;
	border-radius: 15px;
}
.img-hover img, img.img-scale {
	transition: .5s ease all;
	width: 100%;
	object-fit:cover;
}
.img-hover:hover img, img.img-scale:hover {transform: scale(1.05)}
}

@media only screen and (max-width:992px) {
.push-content {height: 55px;}
.rounded-right, .rounded-left {border-radius:0 0 15px 15px !important;}
}

@media only screen and (max-width:767px) {
.content-box, .banner-img {min-height: 300px;}
.legal-content {padding-top: 5rem;}
.lg-spacer {height: 50px}
.md-spacer {height: 25px}
.sm-spacer {height: 10px}
}