/*
Theme Name: WESTYLE Interior Design
Theme URI: https://janetmurphy.ca
Author: Janet Murphy
Author URI: https://janetmurphy.ca
Description: Standalone theme for WESTYLE Interior Design. Rebuilt from the GeneratePress child theme - carries the same design and CSS forward, but no longer requires GeneratePress or any parent theme.
Version: 4.8
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: westyle
*/

/* =========================================================================
   BASE / STRUCTURE
   GeneratePress supplied all of this automatically before. Now that the
   theme is standalone, these rules replace it. Everything below this
   block, down to the original comment marker, is unchanged from the old
   child theme's style.css.
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	background-color: #ffffff;
}

body {
	margin: 0;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
	color: #222222;
	background-color: #ffffff;
}

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

a {
	color: #24B0C9;
	text-decoration: none;
}

a:hover {
	color: #000000;
	text-decoration: none;
}

h1 {
	font-family: Raleway, 'Open Sans', Arial, sans-serif;
	font-size: 36px;
	font-weight: 300;
	line-height: 1.1;
}

/* Bare h2 fallback (heading_2_font_size). Specific contexts - .entry-content
   h2, .blog .inside-article h2, the slider h2 - already override this via
   the original design CSS further down; this only covers a plain <h2>
   that isn't inside one of those. */
h2 {
	font-size: 30px;
}

/* Buttons/forms base - from GeneratePress's assets/css/main.css. The child
   theme's button rule (further down, under ORIGINAL DESIGN CSS) only ever
   overrode colors/typography/border-radius; padding and display came from
   here, so it has to be restored for buttons to size correctly. */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background: #55555e;
	color: #fff;
	border: 1px solid transparent;
	cursor: pointer;
	-webkit-appearance: button;
	padding: 10px 20px;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	border: 1px solid #cccccc;
	border-radius: 0;
	padding: 10px 15px;
	max-width: 100%;
	color: #666666;
	background-color: #fafafa;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
	border-color: #bfbfbf;
	color: #666666;
	background-color: #ffffff;
}

textarea {
	width: 100%;
}

a,
button,
input {
	transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

.button,
.wp-block-button .wp-block-button__link {
	padding: 10px 20px;
	display: inline-block;
}

.wp-block-button .wp-block-button__link {
	font-size: inherit;
	line-height: inherit;
}

/* Note: .menu-toggle already has its own background/border/padding rule
   further down (nav structure block) - it intentionally does not inherit
   the generic button rule above. */

/* Matches GP's actual combined output for your site: unsemantic-grid.css
   (enqueued because structure: "floats", not flexbox) sets margin/padding,
   and the Customizer's dynamic CSS overrides max-width to your
   container_width value (1200) - confirmed against both files directly. */
.grid-container {
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
	padding-left: 10px;
	padding-right: 10px;
}

.grid-container::after {
	content: "";
	display: table;
	clear: both;
}

/* Header / logo / nav ---------------------------------------------------- */

.site-header .inside-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.site-logo a {
	display: inline-block;
	color: #ffffff;
}

.main-navigation {
	position: relative;
}

.main-navigation .main-nav > .menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.main-navigation .menu-item {
	position: relative;
}

.main-navigation .menu-item > a {
	display: block;
	padding: 15px 20px;
	color: #ffffff;
}

/* Hover/current nav background - overridden to transparent (with the
   underline effect instead) by the original design CSS further down,
   which uses !important. Set here for completeness/documentation. */
.main-navigation .menu-item > a:hover,
.main-navigation .menu-item.current-menu-item > a {
	background-color: #3f3f3f;
}

.main-navigation .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	background: #3f3f3f;
	min-width: 200px;
	z-index: 999;
}

.main-navigation .menu-item:hover > .sub-menu,
.main-navigation .menu-item:focus-within > .sub-menu {
	display: block;
}

.main-navigation .sub-menu a {
	display: block;
	padding: 12px 20px;
	color: #ffffff;
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu .current-menu-item > a {
	background-color: #4f4f4f;
	color: #ffffff;
}

.menu-toggle {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 15px 20px;
	color: #ffffff;
}

/* Tier 2 (769px-1200px, nav_drop_point): GP doesn't switch to the hamburger
   here - it stacks the logo above the nav (both centered) but keeps the
   full text menu visible as its own centered row. The hamburger is a
   separate, narrower breakpoint (see below). */
@media (max-width: 1200px) and (min-width: 769px) {
	.site-header .inside-header {
		flex-direction: column;
		align-items: center;
	}

	.site-logo {
		margin-bottom: 1.5em;
	}

	.main-navigation {
		margin: 0 auto;
	}

	.main-navigation .main-nav > .menu {
		justify-content: center;
	}
}

/* Tier 3 (768px and below): GP's actual mobile breakpoint - hamburger
   replaces the full nav here, not at nav_drop_point. */
@media (max-width: 768px) {
	.site-header .inside-header {
		flex-direction: column;
		align-items: center;
	}

	.site-logo {
		margin-bottom: 1em;
	}

	.main-navigation {
		margin: 0 auto;
	}

	.menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin: 0 auto;
	}

	.main-navigation .main-nav {
		display: none;
		width: 100%;
	}

	.main-navigation.toggled .main-nav {
		display: block;
	}

	.main-navigation .main-nav > .menu {
		flex-direction: column;
		align-items: center;
	}

	.main-navigation .main-nav > .menu .menu-item > a {
		text-align: center;
	}
}

/* Hamburger icon - three bars that animate into an X when the nav is
   toggled open (navigation.js adds/removes the .toggled class). */
.hamburger-icon {
	position: relative;
	display: inline-block;
	width: 22px;
	height: 2px;
	background-color: currentColor;
	transition: background-color 0.2s ease;
}

.hamburger-icon::before,
.hamburger-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background-color: currentColor;
	transition: transform 0.2s ease, top 0.2s ease;
}

.hamburger-icon::before {
	top: -7px;
}

.hamburger-icon::after {
	top: 7px;
}

.main-navigation.toggled .hamburger-icon {
	background-color: transparent;
}

.main-navigation.toggled .hamburger-icon::before {
	top: 0;
	transform: rotate(45deg);
}

.main-navigation.toggled .hamburger-icon::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Content ------------------------------------------------------------- */

/* container_width setting (1200px) - applies to every .site-content usage,
   including the shared inner wrapper inside #testimonial-block, so all
   content areas stay a consistent max width. Only adds max-width/margin,
   doesn't touch padding, so the original design's .one-container
   .site-content padding (60px 40px) stays intact. */
.site-content {
	padding: 40px 0;
	max-width: 1200px;
	margin: 0 auto;
}

/* Note: .site-content is reused (without an ID) as the inner wrapper
   inside #testimonial-block too - do NOT put a background-color here,
   it would paint over the testimonial section's own blue background.
   html/body already default to white, so the main content area doesn't
   need its own explicit background. */

.homepage-hero {
	width: 100%;
}

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

.footer-widgets-container {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	padding: 40px;
}

.footer-widget {
	flex: 1 1 250px;
}

#footer-widgets .widget-title {
	margin-top: 0;
	color: #000000;
}

/* Site info / copyright -------------------------------------------------- */

.site-info {
	color: #ffffff;
}

.site-info a {
	color: #ffffff;
}

.site-info a:hover {
	color: #d3d3d3;
}

/* Back to top button - GP's Customizer CSS generator output for this
   (position/sizing) plus its default colors, since no custom colors were
   set (back_to_top_background_color / text_color weren't in the export). */
.westyle-back-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 40px;
	line-height: 40px;
	font-size: 20px;
	text-align: center;
	border-radius: 3px;
	z-index: 10;
	background-color: rgba( 0, 0, 0, 0.4 );
	color: #ffffff;
	opacity: 0.1;
	transform: translateY( 1000px );
	transition: opacity 300ms ease-in-out;
}

.westyle-back-to-top:hover,
.westyle-back-to-top:focus {
	background-color: rgba( 0, 0, 0, 0.6 );
	color: #ffffff;
}

.westyle-back-to-top svg {
	fill: currentColor;
	vertical-align: middle;
}

.westyle-back-to-top__show {
	opacity: 1;
	transform: translateY( 0 );
}

/* Blog grid - column_layout: true, columns: "25" (25% = 4 columns) */
.westyle-blog-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 30px;
	/* Defensive reset in case a leftover plugin (e.g. GP Premium's Blog
	   module, which uses an Isotope/masonry-style grid with its own
	   column-width classes) is still active and tries to apply its own
	   layout here. */
	column-count: initial;
	column-width: initial;
}

.westyle-blog-grid > article {
	min-width: 0;
	width: auto;
	float: none;
}

.westyle-blog-grid .post-image {
	display: block;
}

.westyle-blog-grid .post-image img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 768px) {
	.westyle-blog-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (max-width: 500px) {
	.westyle-blog-grid {
		grid-template-columns: 1fr;
	}
}

/* General clearfix for .entry-content - covers any floated content inside
   post/page bodies (align-left/align-right images, the portfolio grid's
   floated .project-container items, etc.). Without it, a floated element
   with no clearfix on its parent collapses that parent to zero height, so
   whatever comes after (e.g. the testimonial section) renders overlapping
   it instead of below it. */
.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

/* =========================================================================
   ORIGINAL DESIGN CSS
   Unchanged from the GeneratePress child theme's style.css.
   ========================================================================= */


.site-header {
 	background-image: url('images/header-background.png');
 	background-repeat: no-repeat;
 	background-color: #0f0f0f;
 	padding: 30px 0;
    width: 100%;
    z-index: 99999;
	}

.site-logo {
	max-width: 300px;
	}

#sticky-navigation {
 	background-image: url('images/header-bkgd.png');
 	background-repeat: no-repeat;
 	background-color: #0f0f0f !important;
	}

.one-container .site-content {
    padding: 60px 40px;
	}

.entry-content > .wp-block-eedee-block-gutenslider {
    margin-bottom: 0 !important;
	}
	
.wp-block-eedee-gutenslider__content h2 {
	color: #ffffff;
    font-family: Raleway, 'Open Sans', sans-serif;
    text-align: center;
    font-size: 42px;
    font-weight: 300;
    }
    
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.wp-block-button__link:not(.has-background) {
    color: #ffffff;
    background-color: #24B0C9;
    border: 0 !important;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'Open Sans', Arial, sans-serif !important;
    letter-spacing: 2px;
    border-radius: 2px !important;
    line-height: 12px;
	}
	
.entry-content input[type="text"], .entry-content input[type="email"], .entry-content input[type="url"], .entry-content input[type="search"], .entry-content input[type="tel"], .entry-content input[type="number"], .entry-content textarea {
	width: 90%;
	}


.featured-image {display: none !important; }

h1, h2, h3, h4, h5, h6 {
    font-family: Raleway, 'Open Sans', Arial, sans-serif !important;
	}
	
.entry-content h2 {
	color: #24B0C9;
	font-size: 28px !important;
    font-weight: 400 !important;
	}

.entry-content a {
    font-weight: 600;
	}
	
.blog .inside-article h2 {
	font-size: 16px !important;
    font-weight: 400 !important;
    font-family: 'Open Sans', Arial, sans-serif !important;
	line-height: 1em;
    }

/* Base link color for blog post titles (blog_post_title_color) - the
   child theme only ever styled the hover state, so without this it was
   falling back to the generic link color instead of GP's dark default. */
.blog .inside-article h2 a {
	color: #222222;
	}

.blog .inside-article h2 a:hover {
	font-size: 16px !important;
	color: #24B0C9;
    }
    
.blog .inside-article .post-image img:hover {
    opacity: 0.6;
    }
    
	
h3 {
	color: #277397;
	font-size: 16px !important;
    font-weight: 600 !important;
    font-family: 'Open Sans', Arial, sans-serif !important;
    letter-spacing: 1px;
    text-transform: uppercase;
	}

h4 {
	color: #000;
	font-size: 16px !important;
    font-weight: 600 !important;
    font-family: 'Open Sans', Arial, sans-serif !important;
    text-transform: initial;
	}

@media (max-width: 781px) {
	.page-id-1261 .entry-content .wp-block-column, .page-id-1261 .entry-content .wp-block-column:not(:only-child) {
    flex-basis: 100%!important;
	}
	}
@media (min-width: 600px) and (max-width: 781px) {
	.page-id-1261 .entry-content .wp-block-column:nth-child(2n) {
    margin-left: 0;
	}
	}
@media (max-width: 500px) {
	.page-id-1261 .entry-content .wp-block-jetpack-contact-form .grunion-field-width-50-wrap {
    flex: 0 0 100%;
	}
	}

.contact-form-submission { border-top: 1px solid #dedede !important; border-bottom: 1px solid #dedede !important;}
	
/* nav links effect */
.main-navigation {
	background-color: rgba(0,0,0,0) !important;
	}

.main-navigation a {	
	font-size: 14px !important;
    font-weight: 400 !important;
    font-family: 'Open Sans', Arial, sans-serif !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    }
    
.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 2px;
    background-color: #24B0C9;
    transition: 0.3s width ease;
	}
	
.main-navigation .menu > .menu-item.current-menu-item > a, .main-navigation .menu > .menu-item > a:hover,
.main-navigation .menu > .menu-item.current-menu-item > a, .main-navigation .menu > .menu-item > a:focus {
	background-color: rgba(0,0,0,0) !important;
	}

.main-navigation .menu > .menu-item.current-menu-item > a::after, .main-navigation .menu > .menu-item > a:hover::after {
    width: calc(100% - 40px);
	}

.menu-toggle .mobile-menu {
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: 'Open Sans', Arial, sans-serif !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    }
    
.main-navigation.toggled .main-nav > ul {
	max-width: 300px;
	margin: 10px auto 0;
	}
	
.main-navigation.toggled .menu > .menu-item > a::after {
    background-color: rgba(255,255,255,0.25);
	}
	
/* Deliberate change from the original: mobile menu underline now matches
   the same teal used everywhere else, instead of the original's white. */
.main-navigation.toggled .menu > .menu-item > a::after {
	background-color: #24B0C9;
	}
	
.main-navigation.toggled .menu > .menu-item.current-menu-item > a::after, .main-navigation .menu > .menu-item > a:hover::after {
    width: calc(100% - 40px);
    }
    
#breadcrumbs {
    font-size: 13px;
    color: #999;
    }
   
.wp-block-image .alignleft {
    margin: 0 3em 2em 0;
    }
    
.one-third {
    float: left;
    width: calc(33% - 22px);
    margin-right: 30px;
    box-sizing: border-box;
	}
.one-third:nth-child(3n) { margin-right: 0; }
.one-third:nth-child(3n+1) { clear: both; }

#services-block {
	clear: both;
	text-align: center;
	padding: 50px 0 20px;
    display: flex;
  	flex-wrap: wrap;
	}

#services-block .services-box {
    float: left;
    width: calc(33% - 20px);
    margin-right: 30px;
	margin-bottom: 30px;
    padding: 30px 20px 20px;
    box-sizing: border-box;
    background-color: #efefef;
	}

#services-block .services-box:nth-child(3n) { margin-right: 0; }
#services-block .services-box:nth-child(3n+1) { clear: both; }

@media (max-width: 768px) {
	#services-block .services-box {
    width: calc(50% - 20px);
    margin-right: 40px;
	}
	#services-block .services-box:nth-child(2n) { margin-right: 0; }
	#services-block .services-box:nth-child(2n+1) { clear: both; }
	}

@media (max-width: 599px) {
	#services-block .services-box {
    width: 100%;
    margin-right: 0;
	}
	#services-block .services-box { clear: both; }
	}

.page-id-1440 #services-block .services-box {
    padding: 0;
    text-align: left;
    background-color: #ffffff;
	}

#services-block .services-box h3, #testimonial-block h3, #instagram-block h3 {
	text-align: center;
    color: #252525;
    font-size: 15px !important;
	}
	
#services-block .services-box h3:after {
	content: "";
    display: block;
    height: 2px;
    background-color: #24B0C9;
    width: 100px;
    margin: 10px auto 0;
    }
	
.services-button {
	width: 100%;
	text-align: center;
	}

#instagram-block {
	clear: both;
	text-align: center;
	padding: 50px 0;
	}

#instagram-block .desktop { display: block; }
#instagram-block .tablet { display: none; }
#instagram-block .phone { display: none; }

@media (min-width: 600px) and (max-width: 781px) {
	#instagram-block .desktop { display: none; }
	#instagram-block .tablet { display: block; }
	#instagram-block .phone { display: none; }
	}
@media (max-width: 500px) {
	#instagram-block .desktop { display: none; }
	#instagram-block .tablet { display: none; }
	#instagram-block .phone { display: block; }
	}
    
#sb_instagram .sbi_follow_btn a {
	color: #ffffff;
    background-color: #24B0C9;
    border: 0 !important;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'Open Sans', Arial, sans-serif !important;
    letter-spacing: 2px;
    border-radius: 2px !important;
    line-height: 12px;
    padding: 10px 20px;
    display: inline-block;
	}

#sb_instagram .sbi_follow_btn a:hover {
	color: #ffffff;
    background-color: #3f4047 !important;
    box-shadow: none !important;
    }
    
#testimonial-block  {
	background-color: #e4f1f4;
	text-align: center;
	}	

#testimonial-block h3  {
    margin-bottom: 0;
	}	

#testimonial-block .testimonial-entry {
	margin: 0 !important;
	}

#testimonial-block .testimonial-entry-content {
	color: #277397;
	display: block;
	margin: 2.5em 0 10px !important;
	position: relative;
	font-style: normal;
	font-size: 1.25em;
	line-height: 1.35em;
	font-weight: 300;
	text-align: center;
	}

.testimonial-quote {
	display: block;
	margin: 2.5em 1em !important;
	position: relative;
	font-style: normal;
	}

@media (max-width: 650px) {
	.testimonial-quote {
	margin: 2.5em 0 !important;
	}
	}

.testimonial-quote:after { 
	content: "";
	display: block;
    height: 1px;
    background-color: #dedede;
    width: 90%;
    margin: 40px auto !important;
    }

.testimonial-quote:last-of-type:after { 
	content: "";
	display: none;
    }

.wp-block-separator, .services-stack:before {
	content: "";
	display: block;
    height: 1px;
    background-color: #dedede;
    width: 90%;
    margin: 40px auto !important;
    border: 0;
    }

#testimonial-block .testimonial-entry-content p:first-of-type:before, #testimonial-block .testimonial-quote p:first-of-type:before{content:"\""}
#testimonial-block .testimonial-entry-content p:last-of-type:after, #testimonial-block .testimonial-quote p:last-of-type:before{content:"\""}
	
#testimonial-block .testimonial-entry-title a, #testimonial-block .testimonial-entry-title, .testimonial-quote .cite {
	color: #277397;
	font-size: 14px;
	font-style: italic; 
	font-weight: normal;
	margin-bottom: 2.5em;
	}

#testimonial-block .testimonial-entry-title a, #testimonial-block .testimonial-entry-title a:hover {
	color: #277397;
	text-decoration: none;
	font-weight: normal;
	}

#testimonial-block .testimonial-entry-title:after {
	content: ' ―'
	}

#testimonial-block a.see-all, #testimonial-block a.see-all:hover {
	color: #525252;
	text-decoration: none;
	font-weight: 300;
	}

.post-type-archive-jetpack-portfolio ul li.blocks-gallery-item, 
.tax-jetpack-portfolio-type ul li.blocks-gallery-item, 
.tax-jetpack-portfolio-tag ul li.blocks-gallery-item,
.post-type-archive-jetpack-portfolio .wp-block-gallery.has-nested-images figure.wp-block-image, 
.tax-jetpack-portfolio-type .wp-block-gallery.has-nested-images figure.wp-block-image, 
.tax-jetpack-portfolio-tag .wp-block-gallery.has-nested-images figure.wp-block-image { 
	display: none; 
	}

.post-type-archive-jetpack-portfolio ul li.blocks-gallery-item:first-of-type, 
.tax-jetpack-portfolio-tag ul li.blocks-gallery-item:first-of-type,
.tax-jetpack-portfolio-type ul li.blocks-gallery-item:first-of-type, 
.post-type-archive-jetpack-portfolio .wp-block-gallery.has-nested-images figure.wp-block-image:first-of-type, 
.tax-jetpack-portfolio-tag .wp-block-gallery.has-nested-images figure.wp-block-image:first-of-type,
.tax-jetpack-portfolio-type .wp-block-gallery.has-nested-images figure.wp-block-image:first-of-type { 
	display: flex;
    }

.post-type-archive-jetpack-portfolio .project-container, 
.tax-jetpack-portfolio-tag .project-container, 
.tax-jetpack-portfolio-type .project-container { 
	display: flex;
    width: calc(33.33333% - 0.66667em);
    margin: 0 1em 1em 0;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    position: relative;
    float: left;
    }

@media (min-width: 600px) and (max-width: 768px) { 
	.post-type-archive-jetpack-portfolio .project-container, 
	.tax-jetpack-portfolio-tag .project-container,
	.tax-jetpack-portfolio-type .project-container { 
    width: calc(50% - 1em);
    }
    }
	
@media (max-width: 599px) { 
	.post-type-archive-jetpack-portfolio .project-container, 
	.tax-jetpack-portfolio-type .project-container, 
	.tax-jetpack-portfolio-tag .project-container { 
    width: 100%;
    }
    }

.post-type-archive-jetpack-portfolio .project-container .project-outer, 
.tax-jetpack-portfolio-type .project-container .project-outer,
.tax-jetpack-portfolio-tag .project-container .project-outer {
    width: 100%;
    padding-top: 50%; /* defines aspect ratio */
    position: relative;
	}

.post-type-archive-jetpack-portfolio .project-container .project-outer .project-inner, 
.tax-jetpack-portfolio-type .project-container .project-outer .project-inner,
.tax-jetpack-portfolio-tag .project-container .project-outer .project-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden !important
	}
	
.post-type-archive-jetpack-portfolio .project-container .project-outer .project-inner > figure.wp-block-gallery, 
.tax-jetpack-portfolio-type .project-container .project-outer .project-inner > figure.wp-block-gallery,
.tax-jetpack-portfolio-tag .project-container .project-outer .project-inner > figure.wp-block-gallery {
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
	}

.post-type-archive-jetpack-portfolio .project-title h3, 
.tax-jetpack-portfolio-type .project-title h3, 
.tax-jetpack-portfolio-tag .project-title h3 { 
	font-size: 14px;
	margin-top: 10px; 
	margin-bottom: 0;
	color: #000000;
	font-weight: 400;
	}

.post-type-archive-jetpack-portfolio .project-title h3 a, 
.tax-jetpack-portfolio-type .project-title h3 a, 
.tax-jetpack-portfolio-tag .project-title h3 a { 
	color: #000000;
	font-weight: 400;
	}

.post-type-archive-jetpack-portfolio .project-title h3 span, 
.tax-jetpack-portfolio-type .project-title h3 span,
.tax-jetpack-portfolio-tag .project-title h3 span { 
	text-transform: initial;
	letter-spacing: 0;
	font-weight: 400;
	}

.post-type-archive-jetpack-portfolio .project-title h3 a:hover, 
.tax-jetpack-portfolio-type .project-title h3 a:hover, 
.tax-jetpack-portfolio-tag .project-title h3 a:hover { 
	color: #24B0C9;
	font-weight: 400;
	}

.post-type-archive-jetpack-portfolio .project-title .project-awards,
.tax-jetpack-portfolio-type .project-title .project-awards, 
.tax-jetpack-portfolio-tag .project-title .project-awards, 
.single-jetpack-portfolio .entry-header .project-awards { 
	font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    color: #24B0C9;
    line-height: 15px;
	margin-top: 0;
	}

.post-type-archive-jetpack-portfolio .project-title .project-awards .dashicons-awards,
.tax-jetpack-portfolio-type .project-title .project-awards .dashicons-awards, 
.tax-jetpack-portfolio-tag .project-title .project-awards .dashicons-awards,
.single-jetpack-portfolio .entry-header .project-awards .dashicons-awards { 
	font-size: 2em;
    float: left;
    margin-right: 5px;
	display: block;
	}

@media (min-width: 769px) { 
	.post-type-archive-jetpack-portfolio .project-container:nth-child(3n), 
	.tax-jetpack-portfolio-type .project-container:nth-child(3n),
	.tax-jetpack-portfolio-tag .project-container:nth-child(3n) 
	{ margin-right: 0; }
	.post-type-archive-jetpack-portfolio .project-container:nth-child(3n+1), 
	.tax-jetpack-portfolio-type .project-container:nth-child(3n+1),
	.tax-jetpack-portfolio-tag .project-container:nth-child(3n+1) 
	{ clear: both; }
    }

@media (min-width: 600px) and (max-width: 768px) { 
	.post-type-archive-jetpack-portfolio .project-container:nth-child(2n), 
	.tax-jetpack-portfolio-type .project-container:nth-child(2n),
	.tax-jetpack-portfolio-tag .project-container:nth-child(2n) 
	{ margin-right: 0; }
	.post-type-archive-jetpack-portfolio .project-container:nth-child(2n+1), 
	.tax-jetpack-portfolio-type .project-container:nth-child(2n+1),
 	.tax-jetpack-portfolio-type .project-container:nth-child(2n+1) 
 	{ clear: both; }
    }

@media (max-width: 600px) { 
	.post-type-archive-jetpack-portfolio .project-container, 
	.tax-jetpack-portfolio-type .project-container,
	.tax-jetpack-portfolio-tag .project-container 
	{ margin-right: 0; }
	.post-type-archive-jetpack-portfolio .project-container, 
	.tax-jetpack-portfolio-type .project-container,
	.tax-jetpack-portfolio-tag .project-container
	{ clear: both; }
    }

.post-type-archive-jetpack-portfolio .project-album:last-of-type:after, 
.tax-jetpack-portfolio-type .project-album:last-of-type:after, 
.tax-jetpack-portfolio-tag .project-album:last-of-type:after { 
	content: "";
  	clear: both;
  	display: table;
    }

.jp-carousel-wrap.swiper-container {
    width: 90vw !important;
    height: 95% !important;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0);
	}

.jp-carousel-overlay {
	background: rgba(20,20,20,0.9) !important;
	}

.wp-block-jetpack-contact-form .grunion-field-wrap {
    box-sizing: border-box;
	}

#nav-below {
	clear: both;
    padding-top: 20px;
    text-align: center;
    border-top: 1px solid #dedede;
    display: block;
	margin: 20px 5% 0;
	}

.post-image-above-header .inside-article .featured-image, .post-image-above-header .inside-article .post-image {
	margin-bottom: 10px !important;
	}
	
.entry-content:not(:first-child), .entry-summary:not(:first-child), .page-content:not(:first-child) {
    margin-top: 1em;
	}

#footer-widgets {
	background-color: #fefefe;
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 43.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%23f0f0f0' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
	}	

#footer-widgets aside p {
	font-size: 14px !important; 
	}	

#footer-widgets .westyle-footer-about { max-width: 500px; }
#footer-widgets .footer-logo img { max-width: 200px; }
#footer-widgets .association-logos img { max-width: 100px; }
#footer-widgets .association-logos { float: right; }
    
@media (max-width: 599px) {
	#block-34 .wp-block-column {
    flex-basis: 50%!important;
	}
	}
	
@media screen and (max-width: 768px) {
	.footer-logo {
	text-align: center;
    border-bottom: 1px solid rgba(155,155,155,0.35);
    padding-bottom: 20px;
    margin-left: 40px;
    margin-right: 40px;
 	}
	}
   
.wp-block-social-link {
	display: inline-block !important; 
	}
	
.wp-block-social-links .wp-social-link svg {
    width: 32px;
    height: 32px;
	}

.wp-block-social-links .wp-social-link a {
 	color: rgba(255,255,255,0.6) !important; 
 	padding: 0 !important;
 	}

.wp-block-social-links .wp-social-link a:hover {
 	color: rgba(255,255,255,1.0) !important;  
 	}
 	
.wp-block-social-links .wp-social-link.wp-social-link.wp-social-link {
    margin: 0 !important;
	}

    
#block-12 { margin-bottom: 10px !important; }
	
.site-info {
	background-color: #0f0f0f;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHZpZXdCb3g9JzAgMCA0IDQnPjxwYXRoIGZpbGw9JyM0OTQ5MzEnIGZpbGwtb3BhY2l0eT0nMC42NCcgZD0nTTEgM2gxdjFIMVYzem0yLTJoMXYxSDNWMXonPjwvcGF0aD48L3N2Zz4=);
    width: 100%;
    padding: 30px 0 40px; 
	}

.copyright-bar { 
	font-size: 12px;
	}