/*!
Theme Name: knowsley estate
Theme URI: https://knowsley.com/
Author: Knowsley Estate
Author URI: https://knowsley.com/
Description: Wordpress theme for the Knowsley Estate
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: knowsley-estate

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

knowsley estate 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/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Base
	- Typography
	- Elements
	- Links
	- Forms
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- 
# Utilities
	- Alignments
	- Spacing

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important; 
}

body, button, input, select, textarea {
	color: #22314e; /* Navy Blue */
	font-family: "proxima-nova",sans-serif;
	font-size: 18px;
	font-size: 1.125rem;
	font-style: normal;
	font-weight: 300;
	line-height: 1.4;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-family: "adobe-garamond-pro",sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.15em;
	margin: 0 0 0.5em 0;
	padding: 0;
}

h1 {       
	font-size: 40px;
	font-size: 2.5rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

h2 {
	color: #af8a17;
	font-size: 28px;
	font-size: 1.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

h3 {       
	font-size: 20px;
	font-size: 1.25rem;
}

h4 {       
	font-size: 18px;
	font-size: 1.125rem;
}

p {
	margin-bottom: 1.5em;
}

strong {
	font-weight: 600;
}

.has-intro-font-size {
	font-size: 22px;
	font-size: 1.375rem;
	font-weight: 400;
}

.has-white-color {
	color: #FFFFFF; /* White */
}

.has-navy-color {
	color: #22314e; /* Navy */
}

.has-white-background-color {
	background-color: #ffffff; /* White */
}
.has-grey-background-color {
	background-color: #e2dfdc; /* Grey */
}

.has-navy-background-color {
	background-color: #22314e; /* Navy */
}

/* Titles with ruled line either side */
.title-ruled {
	color: #22314e; /* Navy Blue */
	font-weight: 400;
	font-style: italic;
	font-size: 28px;
	font-size: 1.75rem;
	display: inline-block;
	margin-bottom: .5em;
  	padding: 0 .5em;
  	position: relative;
}
.title-ruled:before, .title-ruled:after {
	background: #22314e; /* Navy Blue */
	content: '';
	display: block;
	height: 1px;
	position: absolute;
	top: 50%;
	width: 2em;
}
.title-ruled:before {
	right: 100%;
}
.title-ruled:after {
	left: 100%;
}

/* Titles with coronet above */
.title-coronet {
	background: url(img/coronet-gold.png);
	background-image: url(img/coronet-gold.svg);
	background-size: 50px 23px;
	background-repeat: no-repeat;
	background-position: center top;
	color: #22314e; /* Navy Blue */
	display: block;
	font-size: 36px;
	font-size: 2.25rem;
	letter-spacing: .05em;
	line-height: 0.95em;
	margin-bottom: 1em;
	padding-top: 45px;
	text-transform: uppercase;
}

.title-coronet:after {
    border-top:1px solid #af8a17;
	content:' ';
    display: block;
	margin: 24px auto 0 auto;
	width: 100px;
}

.title-coronet.white {
	background: url(img/coronet-white.png);
	background-image: url(img/coronet-white.svg);
	background-size: 50px 23px;
	background-repeat: no-repeat;
	background-position: center top;
	color: #ffffff;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
	h1 {       
		font-size: 48px;
		font-size: 3rem;
	}
	h2 {       
		font-size: 30px;
		font-size: 1.875rem;
	}
	h3 {       
		font-size: 24px;
		font-size: 1.5rem;
	}
	h4 {       
		font-size: 20px;
		font-size: 1.25rem;
	}
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
    color: #af8a17; /* Gold */
    text-decoration: none;
    background-color: transparent;
}

a:hover, a:focus, a:active {
	color: #af8a17; /* Gold */
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: #af8a17; /* Gold */
}

.btn {
	border-radius: 0;
	color: #22314e; /* Navy Blue */
	font-weight: 500;
	line-height: 1;
    padding: 12px 15px 10px 15px;
	text-transform: uppercase;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.btn-primary {
    color: #ffffff;
    background-color: #af8a17; /* Gold */
    border-color: #af8a17; /* Gold */
}

.btn-primary:hover, .btn-primary:active {
	color: #af8a17; /* Gold */
    background-color: #ffffff; /* White */
	border-color: #ffffff; /* White */
}

.btn-primary-outline {
    color: #af8a17; /* Gold */
    background-color: transparent;
    border-color: #af8a17; /* Gold */
}

.btn-primary-outline:hover, .btn-primary-outline:active {
	color: #ffffff;
    background-color: #af8a17; /* Gold */
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
/* Header
--------------------------------------------- */
.navbar-brand {
 	background: url(img/knowsley-estate-logo.png);
	background-image: url(img/knowsley-estate-logo.svg);
    background-size: 202px 100px;
	background-repeat: no-repeat;
	background-position: top center;
	display: block;
	height: 80px;
	text-indent: -9999em;
	width: 140px;
}

.site-contact {
	display: block;
    position: absolute;
    bottom: -6px;
	right: 1.5rem;
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
	.navbar-brand {
		background-size: 202px 100px;
		height: 100px;
		width: 202px;
	}
}

/* Navigation
--------------------------------------------- */
.navbar {
	position: absolute;
	left: 1.5rem;
	bottom: 0;
	width: calc(100% - 3rem);
}

.navbar-collapse {
	background: #ffffff;
	position: absolute;
	top: 60px;
	width: 100%;
	z-index: 100;
	padding: 1.2em 1em;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.navbar-toggler {
	border: 1px solid #af8a17; /* Gold */
	background-color: #ffffff; /* White */
	color: #af8a17; /* Gold */
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1;
	padding: 10px 15px 9px 15px;
	text-transform: uppercase;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.navbar-toggler:hover {
	border: 1px solid #af8a17; /* Gold */
	background-color: #af8a17; /* Gold */
	color: #ffffff;
}

.navbar-toggler i {
	margin-right: 0;
}

#menu-primary-menu {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
	-webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
	list-style: none;
	margin: 0;
	padding: 0;
}

#menu-primary-menu .nav-item {
	border-bottom: 1px solid #bdc1ca;
	color: #af8a17; /* Gold */
	font-size: 16px;
    font-size: 1rem;
	font-weight: 400;
    text-transform: uppercase;
	min-height: 36px;
    padding: .5rem 0;
}

#menu-primary-menu .nav-link {
    padding: 0;
}

.footer-menu, .social-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu li, .social-menu li {
    display: inline-block;
    margin: 0 0.5rem;
}

.footer-menu li a, .legal-menu li a {
	color: #ffffff;
	font-weight: 400;
	font-size: 16px;
	font-size: 1rem;
}

.social-menu li a {
    color: #ffffff;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	#menu-primary-menu {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}	
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
	.navbar-toggler i {
		margin-right: 10px;
	}
	.footer-menu li {
		margin: 0 1rem 0 0;
	}
	#menu-primary-menu {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	#menu-primary-menu {
		-webkit-column-count: 4;
		-moz-column-count: 4;
		column-count: 4;
	}
}

/* Hero
--------------------------------------------- */
.hero-area {
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
	color: #ffffff;
	position: relative;
	width: 100%;
	padding-bottom: 60%;
}

.hero-area:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
}

.hero-content {
	position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
	.hero-area {
		padding-bottom: 33.3333%;
	}
}

/* Posts and pages
--------------------------------------------- */
.entry-title, .page-title {
	color: #ffffff;
	margin: 0;
}

.entry-title .small, .page-title .small {
	font-size: 70%;
	text-transform: none !important;
	letter-spacing: 0.05em;
}

.entry-content p + h2, .entry-content p + h3, .entry-content p + h4 {
	margin-top: 1.5em;
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

.content-blocks .has-navy-background-color {
	color: #ffffff;
}

.content-blocks .bkgd-image {
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
	color: #ffffff;
	position: relative;
	width: 100%;
	padding-bottom: 50%;	
}

.content-blocks p:last-child {
	margin-bottom: 0;
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
	.content-blocks .bkgd-image {
		padding-bottom: 33.3333%;	
	}
}

/* Carousels
--------------------------------------------- */
/* Home carousel styles */
#heroCarousel .carousel-item {
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
	color: #ffffff;
	position: relative;
	width: 100%;
	padding-bottom: 60%;
}

#heroCarousel .carousel-item:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
}

#heroCarousel .carousel-content {
	position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;
}

#heroCarousel .entry-excerpt {
    color: #ffffff;
    font-family: "adobe-garamond-pro",sans-serif;
    font-weight: 400;
    font-size: 22px;
    font-size: 1.375rem;
}


#heroCarousel .entry-excerpt:before {
    border-top: 1px solid #ffffff;
    content: ' ';
    display: block;
    margin: 1em auto;
    width: 100px;
}

/* Quick link styles */
.caption {
	background: rgb(0, 0, 0); /* The Fallback */
   	background: rgba(0, 0, 0, 0.5);
	bottom: 0;
	color: #ffffff;
	font-family: "adobe-garamond-pro",sans-serif;
	font-weight: 400;
	font-size: 18px;
	font-size: 1.125rem;
	font-style: italic;
	position: absolute;
	left: 0;
	right: 0;
	padding: .3em 1em;
	margin: 0;
}

.caption-bold {
	font-family: "proxima-nova",sans-serif;
	font-style: normal;
	line-height: 1.2;
	text-transform: uppercase;
	padding: .5em 1em;
}

.slider-gallery .owl-prev, .slider-gallery .owl-next {
    background: none;
    border-radius: none;
    filter: none;
    margin: 0;
    position: absolute;
    top: 45%;
    z-index: 10;
}

.slider-gallery .owl-nav i {
	background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
	font-size: 30px;
}

.slider-gallery .owl-prev {
    left: 0;
}

.slider-gallery .owl-prev i {
    padding: 10px 16px 10px 10px;
}

.slider-gallery .owl-next {
    right: 0;
}

.slider-gallery .owl-next i {
    padding: 10px 10px 10px 16px;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
	#heroCarousel .carousel-item {
		padding-bottom: 33.3333%;
	}
}

/* Quote block
--------------------------------------------- */
.quote-block .quote {
	background: url(img/five-stars.png);
	background-image: url(img/five-stars.svg);
    background-size: 110px 15px;
	background-repeat: no-repeat;
	background-position: center bottom;
    font-family: "adobe-garamond-pro",sans-serif;
	font-weight: 400;
	font-size: 26px;
	font-size: 1.625rem;
	font-style: italic;
	line-height: 1.3;
	margin: 0 0 .5em 0;
	padding: 0 0 1em 0;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
	.quote-block .quote {
		font-size: 30px;
		font-size: 1.875rem;
	}
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Footer
--------------------------------------------- */
.footer-brand {
    background: url(img/knowsley-crest.png);
    background-image: url(img/knowsley-crest.svg);
    background-size: 56px 65px;
    background-repeat: no-repeat;
    display: block;
    height: 65px;
	margin: 0 auto;
    text-indent: -9999em;
    width: 56px;  
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* Spacing
--------------------------------------------- */
.mb-4rem, .my-4rem {
    margin-bottom: 4rem !important;
}

.mt-4rem, .my-4rem {
    margin-top: 4rem !important;
}

.pb-4rem, .py-4rem {
    padding-bottom: 4rem !important;
}

.pt-4rem, .py-4rem {
    padding-top: 4rem !important;
}

@media (min-width: 576px) {
	.mt-sm-4rem, .my-sm-4rem {
		margin-top: 4rem !important;
	}
	.mb-sm-4rem, .my-sm-4rem {
		margin-bottom: 4rem !important;
	}
	.pt-sm-4rem, .py-sm-4rem {
		padding-top: 4rem !important;
	}
	.pb-sm-4rem, .py-sm-4rem {
		padding-bottom: 4rem !important;
	}
}

@media (min-width: 768px) {
	.mt-md-4rem, .my-md-4rem {
		margin-top: 4rem !important;
	}
	.mb-md-4rem, .my-md-4rem {
		margin-bottom: 4rem !important;
	}
	.pt-md-4rem, .py-md-4rem {
		padding-top: 4rem !important;
	}
	.pb-md-4rem, .py-md-4rem {
		padding-bottom: 4rem !important;
	}
}

@media (min-width: 992px) {
	.mt-lg-4rem, .my-lg-4rem {
		margin-top: 4rem !important;
	}
	.mb-lg-4rem, .my-lg-4rem {
		margin-bottom: 4rem !important;
	}
	.pt-lg-4rem, .py-lg-4rem {
		padding-top: 4rem !important;
	}
	.pb-lg-4rem, .py-lg-4rem {
		padding-bottom: 4rem !important;
	}
}


.mb-6, .my-6 {
    margin-bottom: 6rem !important;
}

.mt-6, .my-6 {
    margin-top: 6rem !important;
}

.pb-6, .py-6 {
    padding-bottom: 6rem !important;
}

.pt-6, .py-6 {
    padding-top: 6rem !important;
}

@media (min-width: 576px) {
	.mt-sm-6, .my-sm-6 {
		margin-top: 6rem !important;
	}
	.mb-sm-6, .my-sm-6 {
		margin-bottom: 6rem !important;
	}
	.pt-sm-6, .py-sm-6 {
		padding-top: 6rem !important;
	}
	.pb-sm-6, .py-sm-6 {
		padding-bottom: 6rem !important;
	}
}

@media (min-width: 768px) {
	.mt-md-6, .my-md-6 {
		margin-top: 6rem !important;
	}
	.mb-md-6, .my-md-6 {
		margin-bottom: 6rem !important;
	}
	.pt-md-6, .py-md-6 {
		padding-top: 6rem !important;
	}
	.pb-md-6, .py-md-6 {
		padding-bottom: 6rem !important;
	}
}

@media (min-width: 992px) {
	.mt-lg-6, .my-lg-6 {
		margin-top: 6rem !important;
	}
	.mb-lg-6, .my-lg-6 {
		margin-bottom: 6rem !important;
	}
	.pt-lg-6, .py-lg-6 {
		padding-top: 6rem !important;
	}
	.pb-lg-6, .py-lg-6 {
		padding-bottom: 6rem !important;
	}
}