.page-template-city-page-template .site-inner > .wrap {
    max-width: 100%;
}

.page-template-city-page-template .content ul {
    margin-bottom: 28px;
}

.page-template-city-page-template .content li {
    display: list-item;
    list-style: disc;
    margin-left: 20px;
}

/* City Intro */

.city-intro {
    padding: 50px 0;
	padding: 0px!important;
}

.city-hero-image {
	width: 100%;
	margin-bottom: 20px;
	aspect-ratio: 10 / 5;
	position: relative;
}

.city-hero-image img {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.city-hero-link {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translatex(-50%);
	z-index: 10;

	text-align: center;
    display: block;
    font-family: "Kanit-Bold";
    border: 3px solid #F43C8B;
    color: #121523;
    letter-spacing: -0.8px;
	line-height: 1.1;
    font-size: 42px;
    padding: 2px 40px;
	
	box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.16);
    background: rgba(255, 255, 255, 50%);
	backdrop-filter: blur(3px);
}

@media(max-width: 1024px) {
	.city-hero-link {
	    font-size: 28px;
	}
}

@media(max-width: 768px) {
	.city-hero-image img {
		width: 100%;
		margin-bottom: 20px;
		aspect-ratio: 10 / 5;
		position: relative;
	}

	.city-hero-link {
		bottom: 0;
		font-size: 20px;
	}
}

.form {
    float: right;
    width: 380px;
    vertical-align: top;
    background: #fff;
    border: 1px solid #58585a;
    margin-left: 20px;
    margin-bottom: 10px;
}

.form-title {
    font-family: "Open Sans Semibold";
    background: #58585a;
    color: #fff;
    text-align: center;
    font-size: 22px;
    line-height: 1.8em;
    padding: 15px;    
}

.form .gform_wrapper {
    margin: 25px 20px;
}

.form .gform_wrapper input,
.form .gform_wrapper textarea {
    background: #f0f0f0;
    border: 0;
    border-radius: 3px;
}

.form .gform_wrapper input::placeholder,
.form .gform_wrapper textarea::placeholder {
    color: #b5b5b5;
}

.form .gform_wrapper textarea {
    max-height: 100px;
}

.form .gform_wrapper .gform_footer {
    padding: 0 !important;
    margin: 16px 0 0 !important;
}

.form .gform_wrapper .gform_footer input {
    width: 100%;
    font-family: "Open Sans Semibold";
    background: #58585a;
    color: #fff;
    margin-bottom: 0 !important;
    letter-spacing: 4px;
    line-height: 1em;
    font-size: 24px;
    padding: 12px 24px;    
}

.intro-content {
    clear: left;
}

.service-product-image {
    float: right;
    width: 580px;
    padding-left: 20px;
}

/* Recent Projects */

.recent-projects {
    text-align: center;
    background: #dfdfdf;
    padding: 50px 0;
}

.recent-projects .soliloquy-wrapper {
	max-width: 100%!important;
}

.recent-title {
    font-size: 44px;
    margin-bottom: 40px;
}

.recent-projects .soliloquy-container .soliloquy-caption .soliloquy-caption-inside {
	background-color: rgba(0, 0, 0, 70%);
	padding: 25px 0px !important;
}

.project-type, 
.location {
    margin-bottom: 0px !important;
	font-size: 20px !important;
	line-height: 20px !important;
}

.project-type a,
.location a {
    color: #fff;
}

.recent-projects .soliloquy-container .soliloquy-prev {
	left: -50px !important;
	background: rgba(0,0,0,0) url('/wp-content/uploads/2020/02/Black-Arrow-Left.png') no-repeat scroll 50% 50% !important;
	background-size: contain !important;
}

.recent-projects .soliloquy-container .soliloquy-next  {
	right: -50px !important;
	background: rgba(0,0,0,0) url('/wp-content/uploads/2020/02/Black-Arrow-Right.png') no-repeat scroll 50% 50% !important;
	background-size: contain !important;
}

/* Service Areas */

.service-areas {
	background: #41599F;
	padding: 50px 0;
}

.services-area-flex {
	width: 100%;
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
}

.map {
    width: 50%;
    height: 510px;
}

.map p {
    margin: 0;
}

.map iframe {
	width: 100%;
    height: 510px;
}

.areas-locations {
    text-align: center;
    width: 50%;
}

.area-title {
    font-size: 44px;
    margin-bottom: 20px;
}

.city-list {
	width: 100%;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px 2%;
	margin: 0 !important;
}

.city-list li {
	display: unset;
	list-style: none !important;
	flex: 1 0 29%;
	margin: 0 !important;
}

.city-list span,
.city-list a {
	color: #fff;
}

.city-list a:hover {
	color: #F43C8B;
}

/* Location Info */

.location-info {
    clear: both;
    padding: 50px 0;
}

.directions {
    display: inline-block;
    float: right;
    width: 550px;
    height: 400px;
    margin-left: 20px;
    margin-bottom: 10px;
}

.directions p {
    margin: 0;
}

.directions iframe {
    height: 400px;
}

/* Responsive Design */

@media (max-width: 1440px) {
	
	.city-list li {
		flex: 1 0 32%;
		font-size: 16px;
	}	
}

@media (max-width: 1250px) {

/* City Intro */

	.city-intro {
		padding: 50px 20px;
	}

	.city-hero-image {
		float: none;
		width: auto;
		margin-bottom: 20px;
	}

	.city-hero-image img {
		width: 100%;
	}

	.service-product-image {
		clear: right;
	}

/* Recent Projects */

	.recent-projects {
		padding: 50px 20px;
	}

/* Location Info */

	.location-info {
		padding: 50px 20px;
	}

/* Testimonials */

    .testimonials {
    	padding: 0 20px;
    }


	.city-list {
		gap: 5px 2%;
	}
	
	.city-list li {
		flex: 1 0 49%;
	}		
}

@media (max-width: 1024px) {

/* City Intro */

	.service-product-image {
		float: none;
		width: auto;
		padding: 0;
		margin-bottom: 20px;
	}	

/* Service Areas */

	.services-area-flex {
		flex-direction: column;
	}

	.map {
		width: 100%;
	}

	.areas-locations {
		width: 100%;
		padding: 60px 20px;
	}
	
	.city-list li {
		flex: 1 0 32%;
	}		

/* Location Info */

	.location-info {
		padding: 0px 0px 50px;
	}

	.directions {
		float: none;
		width: 100%;
		margin-left: 0px;
		margin-bottom: 20px;
	}

	.location-content {
		padding: 0 20px;
	}		
}

@media (max-width: 900px) {

/* City Intro */

	.city-intro {
		padding: 30px 20px 50px;
	}

    .city-grid {
    	/* display: grid; */
    }

	.form {
		float: none;
		width: 100%;
		margin: 0;
		grid-column: 1;
		grid-row: 5;
	}
}

@media (max-width: 768px) {

/* Service Areas */

	.map {
		height: 410px;
	}

	.map iframe {
		height: 410px;
	}	
	
	.city-list li {
		flex: 1 0 49%;
	}	
}

@media (max-width: 600px) {

/* Recent Projects */

	.soliloquy-caption.soliloquy-caption-bottom {
		display: block !important;
	}

/* Service Areas */

	.city-list {
		gap: 5px 0;
	}
	
	.city-list li {
		flex: 1 0 100%;
	}	
}

@media (max-width: 400px) {

/* Service Areas */

	.map {
		height: 310px;
	}

	.map iframe {
		height: 310px;
	}

/* Location Info */

	.directions {
		height: 300px;
	}

	.directions iframe {
		height: 300px;
	}			
}