/*
	Theme Name: v215 Child
	Template:v215
*/

:root {
	--orange: #f37c4c;
	--gray: #666b71;
}

#header .header-cta span {border: 1px solid white; padding: 12px 24px; color: white !important; transition: .5s;}
#header .header-cta:hover span {background: white; color: var(--orange) !important;}
.title-area h1 {padding-top: 75px; color: white;}
.title-area {min-height: 300px; height: unset !important;}

.featured-portfolio {display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.featured-portfolio .item {padding: 30px; aspect-ratio: 1/1; display: grid; align-items: center; text-align: center; color: white; position: relative; background-size: cover; background-position: center;}
.featured-portfolio .content {transition: .5s; opacity: 0; position: relative;}
.featured-portfolio .item:hover .content {opacity: 1;}
.featured-portfolio .item:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: .5s; opacity: 0;}
.featured-portfolio .item:hover:before {opacity: 1;}
.featured-portfolio .item.Institutional:before {background: rgb(0,132,129, .7);}
.featured-portfolio .item.Hospitality:before {background: rgb(89,140,3, .7);}
.featured-portfolio .item.Workplace:before {background: rgb(134,1,144, .7);}
.featured-portfolio .item.Residential:before {background: rgb(255,134,0, .7);}
.featured-portfolio .item.Retail:before {background: rgb(0,68,190, .7);}
.featured-portfolio .item.Objects:before {background: rgb(202,0,91, .7);}
.featured-portfolio .item.Worship:before {background: rgb(138,115,3, .7);}
.featured-portfolio .content span {font-size: 14px;}
.featured-portfolio .tags {display: inline;}
.featured-portfolio .tags span:not(:last-child):after {content: ', ';}

.staff-grid {display: grid;grid-template-columns: repeat(4,1fr);gap: 2px;text-align: center;}
.staff-grid .orange-fill {background: var(--orange);}
.staff-grid .logo-fill {background-position: center calc(100% - 20px);background-image: url(http://jz.devjawn.com/wp-content/uploads/2024/01/Vector-Smart-Object-ai-1.png);background-size: calc(100% - 50px);background-color: var(--gray);background-repeat: no-repeat;}
.staff-grid .post-item {position: relative;}
.staff-grid .title {font-size: 22px;line-height: 30px;}
.staff-grid .content {width: calc(100% - 30px); color: white; transition: .5s; opacity: 0; position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.staff-grid .post-item:before {transition: .5s; opacity: 0; position: absolute;content: '';top: 0;left: 0;width: 100%;height: 100%;background-color: rgb(102,107,113, .7);}
.staff-grid .post-item:hover .content, .staff-grid .post-item:hover:before {opacity: 1;}
.staff-grid .position strong {font-weight: 400;text-transform: uppercase; display: block;}
.staff-grid .position {font-weight: 700; line-height: 22px;}

.single-staff .staff-content {padding-top: 100px; grid-template-columns: 1fr 1fr;gap: 30px; display: grid;}
.single-staff #content .left {padding-bottom: 50px;}
.single-staff #content .right {text-align: center; align-self: flex-end;}
.single-staff .position {font-weight: 700;font-size: 24px;line-height: 34px;}
.single-staff .position strong {font-weight: 400; display: block;}
.single-staff #content .right img {max-width: 450px;}

#testi .jawn_col:first-child {aspect-ratio: 800/667;object-fit: cover;}
.single-portfolio .jawn_image .inner {width: 100%;}
.single-portfolio .jawn_image img {aspect-ratio: 800/667;object-fit: cover; width: 100%;}
.single-portfolio .title-area > .container {position: unset !important;}
.single-portfolio .title-area {height: 70vh !important; background-size: cover; background-position: center;}
.single-portfolio .title-area h1 {position: absolute; bottom: 30px; left: 30px; color: white;}
.single-portfolio .tags:not(:last-child):after {content: ", ";}
.single-portfolio .abstract {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center;}
.single-portfolio .abstract p {margin-bottom: 5px !important;}
.single-portfolio .title-area:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0,0,0,.2);}
.single-portfolio .abstract {padding-bottom: 50px;}
.single-portfolio .post-content {padding-bottom: 15px;}
.single-portfolio .abstract .left strong:first-child {text-transform: uppercase; color: var(--orange);}
.single-portfolio .jawn_testimonials .testimonial {text-align: left;}
.single-portfolio .jawn_testimonials:before {font-family: 'Font Awesome 5 Free'; content: "\f10d"; font-weight: 900; color: var(--orange); font-size: 40px; padding-left: 75px; padding-top: 20px; padding-bottom: 20px; display: block;}
.single-portfolio .testimonial-author {color: var(--orange);}
.single-portfolio .testimonial-author strong {display: block; color: #333333;}
.single-portfolio .navigation-bottom {display: flex; align-items: center; margin-top: 30px; justify-content: space-between;}
.single-portfolio .portfolio-nav a {border: 2px solid var(--gray); color: var(--gray); padding: 15px; font-weight: 500;}
.single-portfolio .portfolio-nav a:hover {color: var(--orange);}
.single-portfolio .portfolio-nav a:first-child {margin-right: 10px;}

.projects-by-topic .filter-set h6 {display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px;}
.projects-by-topic .topic {transition: .5s; color: white; font-size: 13px; text-transform: uppercase; padding: 7px; cursor: pointer;}
.projects-by-topic .topic:hover, .projects-by-topic .topic.active {background: black !important;}
.projects-by-topic .topic[data-topic="*"] {background: #676d73;}
.projects-by-topic .topic[data-topic="institutional"] {background: #008481;}
.projects-by-topic .topic[data-topic="hospitality"] {background: #598c03;}
.projects-by-topic .topic[data-topic="workplace"] {background: #860190;}
.projects-by-topic .topic[data-topic="residential"] {background: #ff8600;}
.projects-by-topic .topic[data-topic="retail"] {background: #0044be;}
.projects-by-topic .topic[data-topic="objects"] {background: #ca005b;}
.projects-by-topic .topic[data-topic="worship"] {background: #8a7303;}

#project-list {margin-top: 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;}
#project-list .image {aspect-ratio: 1/1; width: 100%; height: 100%; object-fit: cover;  background-size: cover !important;}
#project-list .project-item {position: relative;}
#project-list .text {position: absolute; top: 0; left: 0;  z-index: 1; line-height: 1.5; opacity: 0; transition: .5s; width: 100%; height: 100%; display: grid; align-items: center; padding: 30px;}
#project-list .project-item:hover .text {opacity: 1;}
#project-list .project-item.Institutional .text {background: rgb(0,132,129, .7);}
#project-list .project-item.Hospitality .text {background: rgb(89,140,3, .7);}
#project-list .project-item.Workplace .text {background: rgb(134,1,144, .7);}
#project-list .project-item.Residential .text {background: rgb(255,134,0, .7);}
#project-list .project-item.Retail .text {background: rgb(0,68,190, .7);}
#project-list .project-item.Objects .text {background: rgb(202,0,91, .7);}
#project-list .project-item.Worship .text {background: rgb(138,115,3, .7);}
#project-list .title {line-height: 26px;}
#project-list .title, #project-list p {color: white;}
#project-list span.no-projects {position: absolute; left: 50%; transform: translateX(-50%); font-weight: 700;}

.lds-ellipsis-wrap {padding-bottom: 50px;}
.lds-ellipsis {display:inline-block;position:relative;width:80px;height:80px;position: absolute; left: 50%; transform: translateX(-50%);}
.lds-ellipsis div {position:absolute;top:33px;width:13px;height:13px;border-radius:50%;background:#000;animation-timing-function:cubic-bezier(0,1,1,0);}
.lds-ellipsis div:nth-child(1) {left:8px;animation:lds-ellipsis1 0.6s infinite;}
.lds-ellipsis div:nth-child(2) {left:8px;animation:lds-ellipsis2 0.6s infinite;}
.lds-ellipsis div:nth-child(3) {left:32px;animation:lds-ellipsis2 0.6s infinite;}
.lds-ellipsis div:nth-child(4) {left:56px;animation:lds-ellipsis3 0.6s infinite;}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

.news-grid .post-item {display: grid;grid-template-columns: 1fr 2fr;gap: 30px;}
.news-grid .post-item:not(:last-child) {margin-bottom: 40px;}
.news-grid .content {padding-top: 15px;}
.news-grid h3 a {color: #333;}
.news-grid h3 a:hover {color: var(--orange);}
.news-grid img {transition: .5s; filter: brightness(1);}
.news-grid img:hover {filter: brightness(.6);}

#footer img {max-height: 60px; margin-bottom: 15px;}
#footer .socials a {font-size: 25px; color: var(--gray);}
#footer .socials a:hover {color: var(--orange);}
#footer .socials a:not(:last-child) {margin-right: 8px;}
#footer .footer-top-inner {border-top: 1px solid #e5e5e5;}

@media (max-width: 1400px) {
	.image-text4 .image-text4-content .jawn_col-inner {padding-left: 30px; padding-right: 30px;}
	.image-text4 .image-text4-content .jawn_button {padding-left: 15px; padding-right: 15px;}
	
	.jawn_text_block h2, h2.itr-title {font-size: 40px; line-height: 50px;}
	
	#project-list .text {padding: 20px;}
}

@media (max-width: 1100px) {
	.news-grid .content {padding-top: 0;}
}

@media (max-width: 1023px) {
	#header .logo-holder {height: 80px;}
	#header {background: rgba(102,107,113,1);}
	#mobile-header .menu-holder {background: rgba(102, 107, 113, 1);}
	#header .header-cta {margin-top: 10px; margin-bottom: 10px; }
	#header .header-cta, #header .header-socials {display: inline-block !important;}
	#header .header-cta a {padding-right: 0;}
	
	.image-text4 .image-text4-content {order: 2;}
	
	.jawn_text_block h2, h2.itr-title {font-size: 30px; line-height: 40px;}
	
	.projects-by-topic .topic {font-size: 11px;}
	#project-list .title {font-size: 15px; line-height: 20px;}
	#project-list .location {font-size: 13px;}
	#project-list .text {padding: 15px;}
	
	.staff-grid .content {width: calc(100% - 15px);}
	.staff-grid .title {font-size: 18px; line-height: 22px;}
	.staff-grid .position {line-height: 20px;font-size: 13px;}
	
	.single-portfolio .title-area {height: 50vh !important;}
	.single-portfolio .title-area h1 {padding-left: 30px; padding-right: 30px; left: 0;}
	.single-portfolio .navigation-bottom {gap: 15px; display: grid; justify-content: center;}
	.single-portfolio .portfolio-nav a:first-child {margin-right: 0px;}
	.single-portfolio .portfolio-nav a {display: block;padding-top: 0;padding-bottom: 0;line-height: 48px;margin-bottom: 15px; text-align: center;}
	
	.single-staff .staff-content {grid-template-columns: 1fr;}
	.single-staff #content .right img {max-height: 500px;}
}

@media (max-width: 767px) {
	.title-area h1 {font-size: 38px; line-height: 48px;}
	
	.featured-portfolio {grid-template-columns: 1fr;}
	.image-text4 .flex-stretch {display: flex;}
	.image-text4 .col-fill {min-height: 400px !important;}
	.jawn_col:not(:last-child), .jawn_col_inner:not(:last-child) {margin-bottom: 15px;}
	.jawn_image {text-align: center;}
	.image-text4 .image-text4-content .jawn_col-inner {padding-left: 0px !important; padding-right: 0px !important; max-width: 300px; margin: auto;}
	.jawn-itr .itr-content-side {width: 100%;}
	
	.projects-by-topic .filter-set h6 {grid-template-columns: repeat(3, 1fr);}
	#project-list {grid-template-columns: repeat(2, 1fr);}
	#project-list .title {font-size: 14px;}
	#project-list .text {padding: 15px 10px;}
	
	#form input[type="submit"] {line-height: 48px;}
		
	.staff-grid {grid-template-columns:1fr;}
	.staff-grid .title {font-size: 24px;line-height: 31px;}
	.staff-grid .position {line-height: 22px;font-size: 16px;}
	
	.news-grid .post-item {grid-template-columns: 1fr;gap: 15px;}
	
	.single-portfolio .abstract {grid-template-columns: 1fr;}
	.single-portfolio .abstract .right {margin-top: 15px;}
	.single-portfolio .title-area h1 {position: relative; padding-left: 0 !important; padding-right: 0 !important;}
	.single-portfolio .title-area {min-height: 50vh !important; height: unset !important; padding-top: 100px; padding-bottom: 30px; }
	.single-portfolio .testimonial5 .jawn_col {padding: 30px;}
	
	.single-staff #content .right img {max-height: 350px;}
	
	#footer .footer-3-cols {display: grid;}
	#footer .col-1 {order: 2;}
	#footer .col-2 {order: 1;}
	#footer .col-3 {order: 3;}
}