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

:root {
	--blue: #00ADEF;
	--charcoal: #13191C;
}

#header .logo-holder a {display: grid;align-items: center;}
#header .logo-holder {margin-left: 15px;height: 96px;}
#header .menu-holder {align-self: center;}
#header .menu-item a {line-height: 96px;}
.header-cta span {color: white; background: var(--blue);padding: 12px 24px;border: 2px solid var(--blue);border-radius: 8px;font-weight: 600; transition: .5s;}
.header-cta span:hover {color: var(--blue); background: transparent;}
.header-social-2 a, .header-social-1 a {padding-right: 0 !important;}
.header-social-1 i, .header-social-2 i {background: #EDEDED33;padding: 5px;border-radius: 100%;font-size: 18px;}
#header .container {margin-top: 20px;background-color: rgba(0, 0, 0, 0.5) !important;backdrop-filter: saturate(180%) blur(11px);-webkit-backdrop-filter: saturate(180%) blur(11px);border-radius: 8px;}
.header-social-1 a {padding-left: 5px !important;}
#header img {height: 96px;padding: 6px 0;}

.staff-grid {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px;}
.staff-grid img {margin-bottom: 20px; transition: .5s; filter: brightness(1); width: 100%;}
.staff-grid a:hover img {filter: brightness(.6);}
.staff-grid a:hover h3 {border-color: var(--charcoal);}
.staff-grid p strong {color: black;}
.staff-grid h3 {color: var(--charcoal); transition: .5s; text-transform: capitalize; border-bottom: 2px solid transparent; display: inline-block;}

.single-staff #content h2 {text-transform: capitalize;}
.single-staff #content ul > * {margin-bottom: 7px !important;}
.single-staff #content ul {padding-left: 0 !important; list-style: none; margin-bottom: 30px;}
.single-staff .staff-wrapper img {max-width: 300px;}

.title-area {min-height: 350px; padding-top: 30px; padding-bottom: 30px;}
.title-area {background-position: 50% 24% !important;}

.cta h2 {font-size: 60px; line-height: 70px; color: white;}
.cta:before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(360deg, rgba(240, 249, 255, 1) 3%, rgba(240, 249, 255, 0) 25%, rgba(240, 249, 255, 0) 75%, rgba(240, 249, 255, 1) 97%); z-index: 1;}
.cta:after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgb(0, 0, 0, .5);z-index: 0;}
.cta .container {position: relative;z-index: 2;}

.footer-info {display: grid;gap: 10px;}
#footer .footer-info i {width: 25px;color: var(--blue);text-align: center;margin-top: 6px;}
#footer .footer-info a {display: flex;gap: 8px;}
.footer-socials {margin-top: 15px;}
.footer-socials a {color: var(--blue); font-size: 22px; line-height: 32px;}
.footer-socials a:hover {opacity: .7;}
.footer-socials a:not(:last-child) {margin-right: 7px;}

@media (max-width: 1500px) {
	#header .header-bottom .container {max-width: calc(100% - 60px);}
}

@media (max-width: 1400px) {
	#header .header-bottom .logo-holder img {height: 80px;}
}

@media (max-width: 1300px) {
	#header .header-bottom .logo-holder img {height: 70px;}
	#header .header-bottom  .menu-item a {padding: 0 10px;}
	#header .header-bottom .header-cta a {padding-right: 15px !important;}
}

@media (max-width: 1200px) {
	#header .header-bottom  .menu-item a {padding: 0 7px; font-size: 13px;}
	.header-bottom .header-cta span {padding: 12px 12px;}
}

@media (max-width: 1100px) {
	#header .header-bottom .logo-holder img {height: 56px;}
}

@media (max-width: 1023px) {
	#mobile-header {background-color:var(--charcoal) !important;}
	#header .logo-holder {height: 80px;}
	#header .header-social-2, #header .header-social-1 {display: inline-block;float: left;margin: 5px 5px 5px 0;}
	#header .header-cta {clear: both; padding-top: 10px;}
	#header .header-cta span {padding: 7px 15px !important;background: var(--blue); color: white;}
	#header .logo-holder img {height: 70px; padding: 12px 0 3px 0}
}

@media (max-width: 767px) {
	#header .logo-holder img {height: 75px; padding: 12px 0 8px 0;}
	
	.jawn_text_block h1, .title-area h1 {font-size: 50px; line-height: 60px}
	.jawn_text_block h2, .jawn-itr h2, #content h2 {font-size: 40px; line-height: 50px}
	
	.jawn_col:not(:last-child) {margin-bottom: 30px;}
	
	.m-reversed .jawn_col:last-child {margin-bottom: 30px;}
    .m-reversed .jawn_col:first-child {order: 2;margin-bottom: 0px;}
    .m-reversed .row_margin {display: grid;}

	.staff-grid {grid-template-columns: 1fr;}
	
	.single-staff .staff-wrapper {flex-wrap: wrap;gap: 20px;}
	
	.cta h2 {font-size: 40px; line-height: 50px;}
}