/*
	Theme Name: v215 Child
	Template:v215
	Author:The 215 Guys
	Author URI: https://www.the215guys.com
	Version: 1
*/

:root {
	--yellow: #ffbb22;
}

.topbar a {color: white;}
.topbar a:hover {color: var(--yellow);}
.topbar-socials a:not(:last-child) {margin-right: 10px;}
.topbar-info a:not(:last-child) {margin-right: 10px;}
.topbar-info i {margin-right: 5px;}
.topbar {border-bottom: 1px solid #E9E9E94D;}
.topbar-inner {padding: 10px 0px;}
.topbar-socials i {font-size: 20px;}

body:not(.home) #header {background: rgba(0,0,0,0.85);}

.title-area {padding: 50px 0; text-align: left;}
.title-area h1 {text-align: left;}

.header-cta span {background: white;   padding: 12px 24px;color: #222;border: 2px solid white;transition: .5s;}
.header-cta a:hover span {background: var(--yellow);color: #222;border-color: var(--yellow);}
.header-cta i {background: var(--yellow);color: #222;border-radius: 100%;width: 33px;height: 33px;line-height: 33px;text-align: center;transform: rotate(45deg); transition: .5s;}
.header-cta a:hover i {background: white;}

.projects-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;}
.projects-grid .project-item {aspect-ratio: 4 / 3;object-fit: cover;width: 100%;display: grid;align-items: flex-end;padding: 20px 30px; position: relative;}
.projects-grid .project-item:before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgb(255, 187, 34, .85);opacity: 0; transition: .5s}
.projects-grid .project-item:hover:before {opacity: 1;}
.projects-grid h3 {position: relative; opacity: 0; transition: .5s;}
.projects-grid .project-item:hover h3 {opacity: 1;}

.project-list {margin-top: 20px; display: grid;  grid-template-columns: repeat(4, minmax(0, 1fr));  grid-auto-flow: dense; gap: 20px;}
.project-list .project-item:nth-child(10n + 1) {grid-row: span 2;aspect-ratio: 1 / 2;}
.project-list .project-item:nth-child(10n + 2) {aspect-ratio: 1 / 1;grid-column: 2;}
.project-list .project-item:nth-child(10n + 3) {grid-column: span 2; aspect-ratio: 2 / 1;} 
.project-list .project-item:nth-child(10n + 4) {aspect-ratio: 2 / 1;grid-column: span 2;}
.project-list .project-item:nth-child(10n + 5) {aspect-ratio: 1 / 1;}
.project-list .project-item:nth-child(10n + 6) {aspect-ratio: 2 / 1;grid-column: span 2;}
.project-list .project-item:nth-child(10n + 7) {aspect-ratio: 1 / 1;grid-column: 3;}
.project-list .project-item:nth-child(10n + 8) {grid-row: span 2;grid-column: 4;aspect-ratio: 1 / 2;}
.project-list .project-item:nth-child(10n + 9) {aspect-ratio: 1 / 1;}
.project-list .project-item:nth-child(10n + 10) {aspect-ratio: 2 / 1;grid-column: span 2;} 
.project-list .image {background-position: center;width: 100%; height: 100%; object-fit: cover;  background-size: cover !important;}
.project-list .project-item {position: relative;width: 100%; height: 100%;}
.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 .text {background: rgb(255, 187, 34, .85);}
.project-list .title {line-height: 34px;font-size: 24px;text-align: center;}
.project-list .title, .project-list p {color: #222;}
.project-list span.no-projects {position: absolute; left: 50%; transform: translateX(-50%); font-weight: 700;}

.single-project .post-image, .single-project .post-title {display: none;}
.single-project #gal img {aspect-ratio: 4/3; width: 100%; object-fit: cover;}
.single-project .blog-holder-outer {padding-bottom: 0;}
.single-project #content .jawn_text_block h3:not(:first-of-type) {margin-top: 40px;}

.cta .container {text-align: left;}
.cta .jawn_button:last-child:after {content: "\f062";font-family: 'Font Awesome 5 Free';font-weight: 900;background: white;color: #222;border-radius: 100%;width: 33px;height: 33px;line-height: 33px;text-align: center;transform: rotate(45deg);transition: .5s;display: inline-block;margin-left: 10px;}
.cta .jawn_button:last-child:hover:after {background: var(--yellow);}

.footer-socials a:not(:last-child) {margin-right: 10px;}
.footer-socials i {font-size: 26px;}

#footer .footer-top-inner > * {justify-content: space-between;}
#footer .col-4 {width: 100%;max-width: 345px;}
#footer .col-3 {width: 100%;max-width: 240px;}
#footer .footer-top {background-size: 103% auto;background-repeat: no-repeat;background-position: bottom;}