/* CSS Document */

/* Global
---------------------------------------------------------------------------- */

.section {
	clear: both;
	position: relative;
}

.content > article {
	margin: 0;
}


/* Feature
---------------------------------------------------------------------------- */

.feature.alignfull > div {
	max-width: 100%;
}

.feature.alignfull div.alignfull > div {
	max-width: 90%;
}

.feature .bx-viewport,
.feature .bx-viewport > div {
	height: 100%;
}

.feature .wp-block-cover.slide {
	min-height: 100%;
	padding: 12vh 0;
}

.feature .wp-block-group.has-background {
	background-color: transparent !important;
	position: relative;
} 

.feature .wp-block-group.has-background::before {
	background-color: rgba(35,31,32,0.7) !important;
	border-bottom-left-radius: 30px;
	border-top-left-radius: 30px;
	content: '';
	display: block;
	height: 100%;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100vw;
}

.feature .wp-block-group.has-background > * {
	padding: 40px 0 40px 40px;
	position: relative;
}

.feature .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) {
	padding: 0;
}

.feature .bx-wrapper .bx-pager.bx-default-pager a {
	background-color: rgba(255,255,255,.5);
	border: none;
	border-radius: 10px;
	height: 18px;
	margin: 0 4px;
	width: 18px;
}


/* Welcome
---------------------------------------------------------------------------- */

.welcome {
	z-index: 1;
}

.welcome .wp-block-media-text.is-image-fill-element>.wp-block-media-text__media img {
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
}

.welcome .wp-block-media-text>.wp-block-media-text__content {
	padding: 0;
}

@media only screen and (min-width: 601px) {
	
	.welcome .wp-block-media-text {
		gap: 0 50px;
	}
	
	.welcome .wp-block-media-text>.wp-block-media-text__media::before,
	.welcome .wp-block-media-text>.wp-block-media-text__media::after {
		background-color: #fff;
		clip-path: polygon(100% 0, 0% 100%, 100% 100%);
		content: '';
		display: block;
		height: calc(100% + 2px);
		position: absolute;
		right: -1px;
		top: -1px;
		width: 130px;
		z-index: 1;
	}
	
	.welcome .wp-block-media-text>.wp-block-media-text__media::after {
		clip-path: polygon(90% 0, 100% 0%, 10% 100%, 0% 100%);
		right: 10px;
		width: 145px;
	}
	
	.welcome .wp-block-media-text.is-image-fill-element>.wp-block-media-text__media img {
		left: auto;
		right: 0;
		transform: none;
		width: 50vw;
	}
	
	.welcome .wp-block-media-text>.wp-block-media-text__content {
		padding: calc(12vh - 30px) 0;
	}
	
}


/* Roofing
---------------------------------------------------------------------------- */

.roofing {
	border: 3px solid #fff;
	border-width: 3px 0;
	outline: 1px solid #F1F1F2;
}

.roofing::before {
	background: url("../../images/jr-mark.svg") no-repeat center;
	content: '';
	display: block;
	filter: brightness(0);
	height: 625px;
	left: 50%;
	opacity: .04;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 1170px;
	z-index: 1;
}

.roofing > * {
	position: relative;
	z-index: 2;
}

.roofing h5 {
	margin-bottom: 15px;
}

.site-container .roofing div.wp-block-button .wp-block-button__link {
	padding: 14px 25px;
}


/* Services
---------------------------------------------------------------------------- */

div.service.alignfull > div {
	max-width: 100%;
	overflow: hidden;
}

.service.gb-3-col-widecenter>.gb-layout-column-wrap {
	grid-template-columns: 1fr 400px 55vw;
}

.service.gb-3-col-widecenter.even>.gb-layout-column-wrap {
	grid-template-columns: 55vw 400px 1fr;
}

.service div.gb-background-no-repeat {
	height: 100%;
}

.service .gb-block-layout-column {
	position: relative;
	z-index: 1;
}

.service.odd .gb-block-layout-column:nth-child(1),
.service.even .gb-block-layout-column:nth-child(3) {
	z-index: 0;
}

.service.odd .gb-block-layout-column:nth-child(1) div.gb-background-no-repeat,
.service.even .gb-block-layout-column:nth-child(3) div.gb-background-no-repeat {
	position: absolute;
	width: 55vw;
}

.service.odd .gb-block-layout-column:nth-child(1) div.gb-background-no-repeat {
	left: 0;
}

.service.even .gb-block-layout-column:nth-child(3) div.gb-background-no-repeat {
	right: 0;
}

.service .gb-block-layout-column:nth-child(2) {
	z-index: 2;
}

.service .gb-block-layout-column .has-white-background-color {
	filter: drop-shadow(0 7px 15px rgb(0 0 0 / .25));
	padding: 12vh 15px;
	position: relative;
}

.service .gb-block-layout-column .has-white-background-color::before,
.service .gb-block-layout-column .has-white-background-color::after {
	background-color: #fff;
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
	content: '';
	display: block;
	height: calc(100% + 2px);
	left: -129px;
	position: absolute;
	top: -1px;
	width: 130px;
	z-index: 1;
}

.service .gb-block-layout-column .has-white-background-color::after {
	clip-path: polygon(100% 0, 0 0, 0 100%);
	left: auto;
	right: -129px;
}

.service p:last-child {
	margin: 0;
}

.site-container .service div.wp-block-button .wp-block-button__link {
	padding: 10px 30px;
}



/* FAQs
---------------------------------------------------------------------------- */

.faqs {
	border: 3px solid #fff;
	border-width: 3px 0;
	outline: 1px solid #F1F1F2;
	overflow: hidden;
}

.faqs::before {
	background: url("../../images/jr-mark.svg") no-repeat center;
	bottom: -230px;
	content: '';
	display: block;
	height: 625px;
	opacity: .33;
	pointer-events: none;
	position: absolute;
	right: calc(50% - 90px);
	width: 1170px;
	z-index: 1;
}

.faqs > * {
	position: relative;
	z-index: 2;
}

.faqs .questions .gb-3-col-widecenter {
	margin-bottom: 10px;
}

.faqs .questions .gb-3-col-widecenter>.gb-layout-column-wrap {
	align-items: center;
	grid-template-columns: 200px 1fr 50px;
	width: 83%;
}

.faqs .questions .gb-3-col-widecenter:nth-child(even)>.gb-layout-column-wrap {
	margin-left: 17%;
}

.faqs .questions .gb-3-col-widecenter .gb-block-layout-column:nth-child(2) {
	position: relative;
	z-index: 0;
}

.faqs .questions .gb-3-col-widecenter .gb-block-layout-column:nth-child(2)::before {
	background-color: #fff;
	border-radius: 20px;
	content: '';
	display: block;
	left: -100px;
	height: 100%;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
}

.faqs .gb-3-col-widecenter .has-white-background-color {
	border-radius: 20px;
}

.faqs .wp-block-image {
	margin: 0 auto;
	text-align: center;
}

.faqs img {
	padding: 3px;
	outline: 1px solid #bbbdbf;
}

.faqs .wp-block-genesis-blocks-gb-column p:last-child {
	margin: 0;
}

.site-container .faqs div.wp-block-button {
	aspect-ratio: 1/1;
	height: 100%;
	width: 100%;
}

.site-container .faqs div.wp-block-button .wp-block-button__link {
	aspect-ratio: 1/1;
	border-radius: 100%;
	display: block;
	font-size: 0;
	padding: 3px;
	position: relative;
	transform: translateX(-50%);
}

.site-container .faqs div.wp-block-button .wp-block-button__link::after {
	content: "\f345";
	display: block;
	font-family: "dashicons";
	font-size: 40px;
	left: calc(50% + 3px);
	line-height: 1;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
}

.site-container .faqs div.wp-block-button .wp-block-button__link:focus,
.site-container .faqs div.wp-block-button .wp-block-button__link:hover {
	color: #fff;
}


/* Reviews
---------------------------------------------------------------------------- */

.reviews {
	z-index: 1;
}

.reviews .wp-block-media-text.is-image-fill-element>.wp-block-media-text__media img {
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
}

.reviews .wp-block-media-text>.wp-block-media-text__content {
	padding: 0;
	position: relative;
}

.reviews .bx-wrapper,
.reviews .bx-viewport {
	height: 100%;
	position: unset;
}

.reviews .quotes {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	height: 100%;
}

.reviews .quote-item {
	text-align: center;
}

.reviews .quote-item p {
	font-size: 24px;
	font-style: italic;
	line-height: 1.25;
}

.reviews .quote-title {
	font-family: 'Russo One', sans-serif;
	font-size: 18px;
	font-weight: 400;
}

.reviews .bx-wrapper .bx-pager,
.reviews .bx-wrapper .bx-controls-auto {
	bottom: 0;
}

.reviews .bx-wrapper .bx-pager.bx-default-pager a {
	background-color: #bbbdbf;
	border: none;
}

.reviews .bx-wrapper .bx-pager.bx-default-pager a:hover,
.reviews .bx-wrapper .bx-pager.bx-default-pager a.active,
.reviews .bx-wrapper .bx-pager.bx-default-pager a:focus {
	background-color: #243e8f;
}

@media only screen and (min-width: 601px) {
	
	.reviews .wp-block-media-text {
		gap: 0 50px;
	}
	
	.reviews .wp-block-media-text>.wp-block-media-text__media::before,
	.reviews .wp-block-media-text>.wp-block-media-text__media::after {
		background-color: #fff;
		clip-path: polygon(0 0, 0% 100%, 100% 100%);
		content: '';
		display: block;
		height: calc(100% + 2px);
		left: 0;
		position: absolute;
		top: -1px;
		width: 130px;
		z-index: 1;
	}
	
	.reviews .wp-block-media-text>.wp-block-media-text__media::after {
		clip-path: polygon(0 0, 10% 0, 100% 100%, 90% 100%);
		left: 10px;
		width: 145px;
	}
	
	.reviews .wp-block-media-text.is-image-fill-element>.wp-block-media-text__media img {
		left: 0;
		right: auto;
		transform: none;
		width: 50vw;
	}
	
	.reviews .wp-block-media-text>.wp-block-media-text__content {
		padding: calc(12vh - 30px) 0;
	}
	
	.reviews .bx-wrapper .bx-pager,
	.reviews .bx-wrapper .bx-controls-auto {
		bottom: calc(12vh - 40px);
	}
	
}


/* Blog
---------------------------------------------------------------------------- */

.blog.intro {
	box-shadow: 0 8px 4px rgba(0,0,0,0.15);
	position: relative;
	z-index: 3;
}

.blog .post {
	display: grid;
	grid-template-areas: 'image content image-alt';
	grid-template-columns: 55vw 400px 1fr;
	max-width: none;
	overflow: hidden;
}

.blog .post .post-image {
	grid-area: image;
}

.blog .post .post-content {
	background-color: #243e8f;
	color: #fff;
	font-size: 21px;
	grid-area: content;
	padding: 40px 5% 80px;
	position: relative;
	z-index: 2;
}

.blog .post .post-content h4 {
	font-size: 36px;
	line-height: 1;
	margin-top: 0;
}

.blog .post .post-content p {
	line-height: 1.25;
}

.blog .post .post-image-alt {
	grid-area: image-alt;
}

.blog .post .post-image,
.blog .post .post-image-alt {
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.blog .post .post-image-alt {
	height: 100%;
	position: absolute;
	right: 0;
	width: 55vw;
	z-index: 0;
}

.blog .post .post-image-alt::before {
	background-color: #dc1f26;
	content: '';
	display: block;
	height: 100%;
	left: 0;
	opacity: .75;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

.blog .post .post-image img,
.blog .post .post-image-alt img {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.blog .post .post-image-alt img {
	left: auto;
	right: 0;
}

@media only screen and (min-width: 601px) {
	
	.blog .post .post-content {
		padding: calc(12vh - 30px) 15px;
		position: relative;
	}
	
	.blog .post .post-content::before,
	.blog .post .post-content::after {
		background-color: #243e8f;
		clip-path: polygon(100% 0, 0% 100%, 100% 100%);
		content: '';
		display: block;
		height: calc(100% + 2px);
		left: -129px;
		position: absolute;
		top: -1px;
		width: 130px;
		z-index: 1;
}

	.blog .post .post-content::after {
		clip-path: polygon(100% 0, 0 0, 0 100%);
		left: auto;
		right: -129px;
	}
	
	.blog .post .post-content .white-line {
		height: 100%;
		pointer-events: none;
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
	}
	
	.blog .post .post-content .white-line::before {
		background-color: #fff;
		clip-path: polygon(90% 0, 100% 0%, 10% 100%, 0% 100%);
		content: '';
		display: block;
		height: calc(100% + 2px);
		position: absolute;
		right: -145px;
		top: -1px;
		width: 145px;
		z-index: 2;
	}
	
}


/* Logos
---------------------------------------------------------------------------- */

.logos {
	border-top: 3px solid #fff;
	box-shadow: 0 -8px 4px rgba(0,0,0,0.15);
	padding: 35px 0;
	position: relative;
	z-index: 2;
}

.logos .wp-block-gallery {
	align-content: center;
	grid-gap: 20px !important;
	justify-content: center;
}

.logos .wp-block-gallery .wp-block-image {
	/*align-self: center;
	flex: 1 0 auto !important;
	height: 100%;
	margin: 0 !important;
	width: auto !important;*/
}

.logos figure.wp-block-gallery .wp-block-image img {
	border-radius: 0;
	/*height: 100%;*/
	margin: 0 auto;
	/*max-height: 64px;
	max-width: 300px;
	object-fit: contain;*/
}


/* Map
---------------------------------------------------------------------------- */

div.map {
	overflow: hidden;
}

div.map > div {
	height: 450px;
	max-width: none;
}

.map iframe {
	height: calc(450px + 240px);
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
}


/* Media Queries
---------------------------------------------------------------------------- */

@media only screen and (min-width: 1023px) {
	
	.feature.alignfull div.alignfull > div {
		max-width: 960px;
	}
	
}

@media only screen and (min-width: 1240px) {
	
	.feature.alignfull div.alignfull > div {
		max-width: 1170px;
	}
	
}

@media only screen and (max-width: 960px ) {
	
	.roofing .gb-layout-columns-3>.gb-layout-column-wrap {
		gap: 0 2em;
	}
	
	.service.gb-3-col-widecenter>.gb-layout-column-wrap {
		grid-template-columns: 1fr 400px 35vw;
	}

	.service.gb-3-col-widecenter.even>.gb-layout-column-wrap,
	.blog .post {
		grid-template-columns: 35vw 400px 1fr;
	}
	
	.service.odd .gb-block-layout-column:nth-child(1) div.gb-background-no-repeat,
	.service.even .gb-block-layout-column:nth-child(3) div.gb-background-no-repeat {
		width: 35vw;
	}
	
	.faqs .questions .gb-3-col-widecenter>.gb-layout-column-wrap,
	.faqs .questions .gb-3-col-widecenter:nth-child(even)>.gb-layout-column-wrap {
		margin: 0;
		width: 100%;
	}
	
}

@media only screen and (max-width: 767px) {
	
	.roofing .gb-layout-columns-3>.gb-layout-column-wrap {
		gap: 60px 0;
		grid-template-areas: "col1" "col2" "col3";
		grid-template-columns: 100%;
	}
	
}

@media only screen and (max-width: 600px) {
	
	.feature .wp-block-group.has-background::before {
		border-radius: 30px;
		width: 100%;
	}
	
	.feature .wp-block-group.has-background > * {
		padding: 30px 5%;
	}
	
	.service.gb-3-col-widecenter>.gb-layout-column-wrap {
		grid-template-areas: "col3" "col2" "col1";
		grid-template-columns: auto;
	}
	.service.gb-3-col-widecenter.even>.gb-layout-column-wrap {
		grid-template-areas: "col1" "col2" "col3";
		grid-template-columns: auto;
	}
	
	.service.even .gb-block-layout-column:nth-child(1) div.gb-background-no-repeat,
	.service.odd .gb-block-layout-column:nth-child(3) div.gb-background-no-repeat,
	.blog .post .post-image {
		height: 250px;
	}
	
	.service .gb-block-layout-column .has-white-background-color {
		padding: 40px 5% 20px;
	}
	
	.faqs {
		text-align: center;
	}
	
	.faqs::before {
		right: 50%;
		transform: translateX(50%);
	}
	
	.faqs .questions .gb-3-col-widecenter {
		margin: 30px 0 0;
	}
	
	.faqs .questions .gb-3-col-widecenter>.gb-layout-column-wrap {
		grid-template-columns: auto;
		grid-template-rows: auto auto 50px;
		text-align: center;
	}
	
	.faqs .gb-3-col-widecenter .has-white-background-color {
		position: relative;
		margin-top: -25px;
	}
	
	.faqs .questions .gb-3-col-widecenter .gb-block-layout-column:nth-child(2)::before {
		display: none;
	}
	
	.site-container .faqs div.wp-block-button {
		aspect-ratio: auto;
	}
	
	.site-container .faqs div.wp-block-button .wp-block-button__link {
		height: 50px;
		margin: 0 auto;
		transform: translateY(-50%);
		width: 50px;
	}
	
	.blog .post {
		grid-template-areas: 'image' 'content' 'image-alt';
		grid-template-columns: auto;
	}
	
	.blog .post .post-image-alt {
		display: none;
	}
	
	.logos figure.wp-block-gallery .wp-block-image {
		/*flex-grow: 0;
		flex-shrink: 0;*/
	}
	
	.logos figure.wp-block-gallery .wp-block-image img {
		max-width: 200px !important;
	}
	
}