/*!
Theme Name: FindNYCourts
Theme URI: http://underscores.me/
Author: PerfectWebSolutions
Author URI: https://www.perfectwebsolutions.info/
Description: Custom Theme Designed for FindNYCourts
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: findnycourts
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

FindNYCourts is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */




*{
	padding: 0;
	margin: 0;
}

@font-face {
  font-family: 'Neue-Haas-Grotesk';
  src: url('assets/fonts/NeueHaasGrotDisp-15XXThin-Trial.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Neue-Haas-Grotesk';
  src: url('assets/fonts/NeueHaasGrotDisp-16XXThinItalic-Trial.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: 'Neue-Haas-Grotesk';
  src: url('assets/fonts/NeueHaasGrotDisp-25XThin-Trial.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Neue-Haas-Grotesk';
  src: url('assets/fonts/NeueHaasGrotDisp-26XThinItalic-Trial.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: 'Neue-Haas-Grotesk';
  src: url('assets/fonts/NeueHaasGrotDisp-45Light-Trial.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Neue-Haas-Grotesk';
  src: url('assets/fonts/NeueHaasGrotDisp-46LightItalic-Trial.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Neue-Haas-Grotesk';
  src: url('assets/fonts/NeueHaasGrotDisp-55Roman-Trial.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Neue-Haas-Grotesk';
  src: url('assets/fonts/NeueHaasGrotDisp-56Italic-Trial.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Neue-Haas-Grotesk';
  src: url('assets/fonts/NeueHaasGrotDisp-65Medium-Trial.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Neue-Haas-Grotesk';
  src: url('assets/fonts/NeueHaasGrotDisp-66MediumItalic-Trial.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Neue-Haas-Grotesk';
  src: url('assets/fonts/NeueHaasGrotDisp-76BoldItalic-Trial.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Neue-Haas-Grotesk';
  src: url('assets/fonts/NeueHaasGrotDisp-96BlackItalic-Trial.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
}

body {
  font-family: 'Neue-Haas-Grotesk', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  word-spacing: 3px;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
}

header {
    padding: 16px 120px;
    background-color: #FFFFFF;
}

.head-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.head-nav a {
  display: flex;
  color: #06090F;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}
.banner {
	background-color: #E4EEF0;
  padding: 0px 120px;
}

.banner-content {
	display: flex;
	height: 480px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	gap: 24px;
}
.banner-content h1 {
	color: #06090F;
	text-align: center;
	font-size: 80px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	max-width: 600px;
}
.banner-content h1 span {
	color: #233458;
	font-size: 80px;
	font-style: italic;
	font-weight: 500;
	line-height: 100%;
}
.banner-content p {
	color: #06090F;
	text-align: center;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	word-spacing: 3px;
}

.location-indexing {
    padding: 60px 120px;
    background-color: #fff;
}

.location-indexing h2 {
  color: #233458;
  font-size: 42px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
}

.locations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding-top: 48px;
  column-gap: 80px;
}

.locations-col {
    display: flex;
    flex-direction: column;
    gap: 40px;
}



.locations-grid-row h3 {
  color: #233458;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
  padding-bottom: 12px;
}
.locations-grid-row ul {
  list-style: none;
}
.locations-grid-row ul li a {
  color: #06090F;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  padding: 4px 0px;
  text-decoration: none;
}

section.cta {
    background: #06090F;
    padding: 80px 120px;
}

.cta-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
}
.cta-content h2 {
  color: #E4EEF0;
  text-align: center;
  font-size: 42px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
  max-width: 500px;
}
.cta-content p {
  color: #FFF;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  max-width: 350px;
  word-spacing: 3px;
}
.cta-content a {
  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  display: flex;
  gap: 8px;
  align-items: center;
}
footer {
  padding: 60px 120px;
  background: #E4EEF0;
}
.footer-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
.footer-content p {
  color: #06090F;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  max-width: 720px;
  word-spacing: 3px;
}



.locatiodetial-banner {
  background-color: #E4EEF0;
  padding: 0px 120px;
}
 
 
.detail-banner-content {
  display: flex;
  height: 420px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}
 
.detail-banner-content span {
  color: #06090F;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.detail-banner-content span a {
   font-weight: 400;
   font-size: 14px;
   line-height: 150%;
   letter-spacing: 0px;
   text-decoration: none;
   color: #06090F;
}
 
.detail-banner-content h1 {
  color: #233458;
  font-size: 80px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  padding: 40px 0px 16px;
}
 
.detail-banner-content p {
  color: #16232B;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  max-width: 387px;
  letter-spacing: 0.5px;
}
 
.courts-detail {
  padding: 80px 120px;
}
 
.filtration {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 48px;
}
 
.filtration h2 {
  color: #233458;
  font-size: 42px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
}
 
.select-area {
    display: flex;
    border: 1.1px solid #E9EAEB;
    border-radius: 8.8px;
    align-items: center;
    overflow: hidden;
}

.select-area hr {
    height: 44px;
    background: #e7e7e7;
    width: 1px;
    border: 0;
}

.select-area a {
    display: flex;
    height: 44px;
    align-items: center;
    padding: 0px 12px;
    cursor: pointer;
    transition: .2s linear;
}

.select-area a:hover {
    background-color: #FAFAFA;
}

.block-icon {
  border-right: 1.1px solid #E9EAEB;
}
 
.select-area img {
  padding: 11px 13.2px;
}
 
.courts-grids
{
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 15px;
}

.courts-grids.list-view {
    flex-direction: column;
    flex-wrap: nowrap;
}

.courts-grids.list-view .courts-info {
    flex-direction: row;
    gap: 40px;
    transition: 0.5s;
    width: calc(100% - 64px);
    align-items: center;
}
 
.courts-info {
  padding: 32px;
  border: 1px solid #E9EAEB;
  background-color: #FDFDFD;
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  transition: 0.2s linear;
  width: calc(25% - 81px);
  justify-content: space-between !important;
}

.courts-info:hover {
  background-color: #F5F5F5;
  box-shadow: 0px 59px 17px 0px rgba(115, 117, 120, 0.00), 0px 38px 15px 0px rgba(115, 117, 120, 0.01), 0px 21px 13px 0px rgba(115, 117, 120, 0.03), 0px 9px 9px 0px rgba(115, 117, 120, 0.04), 0px 2px 5px 0px rgba(115, 117, 120, 0.05);
}

.courts-info:hover a.button svg {
    background-color: #233458;
    border-radius: 100px;
}
 
.courts-info:hover a.button svg path {
  stroke: #FFFFFF;
}

.courts-info svg {
    transition: .2s linear;
}

.icon-list svg {
    min-width: 20px !important;
    height: 20px !important;
}
 
.court-content {
    width: 100%;
    max-width: 245px;
}

.court-content h4 {
  color: #06090F;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  max-width: 240px;
}
 
.court-content p {
  color: #535862;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}
 
.icon-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  width: 100%;
  max-width: 890px;
}
 
.icon-list a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-decoration: none;
}


.icon-list p {
  color: #535862;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}
 
.courts-info a.button {
  display: flex;
  justify-content: end;
}

.list-grids {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    column-gap: 80px;
}
 
.icon-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 387px;
}
 
.grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
 
.icon-heading h4 {
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
}
 
.icon-box a {
  text-decoration: none;
  color: #535862;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; 
}

.icon-box span {
  color: #535862;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; 
}

.list-grids {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    column-gap: 80px;
}
 
 
.icon-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}
.icon-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 387px;
}
 
.grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
 
.icon-heading h4 {
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
}
 
.icon-box a {
  text-decoration: none;
  color: #535862;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; 
}
.icon-box span {
  color: #535862;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; 
}

.courts-detail .pagination {
  display: flex;
  justify-content: center;
  padding-top: 48px;
}

.courts-detail .pagination ul {
  display: flex;
  text-decoration: none;
  list-style: none;
  border: 1px solid #E9EAEB;
  border-radius: 8px;
}

.courts-detail .pagination ul li {
  padding: 10px 16px;
  border-right: 1px solid #E9EAEB;
}

.courts-detail .pagination ul li span {
  color: #06090F;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

a.page-numbers {
  text-decoration: none;
  color: #06090F;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.custom-pagination li:last-child {
  border-right: none !important;
}

.icon-box a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-wrapper {
  padding-top: 60px;
}

.map-wrapper iframe {
  border-radius: 24px;
  height: 320px;
}
.footer-content p a {
  color: #06090F;
}

@media (max-width: 1024px) {

header {
  padding: 16px 50px;
  background-color: #FFFFFF;
}
.banner {
  padding: 0px 50px;
}
.location-indexing {
    padding: 60px 50px;
}
section.cta {
    padding: 60px 50px;
}
footer {
    padding: 60px 50px;
}
.locatiodetial-banner {
  padding: 0px 50px;
}
.courts-detail {
  padding: 60px 50px;
}
.courts-grids {
  grid-template-columns: 1fr 1fr;
}
.banner-content h1 {
  font-size: 60px;
}
.banner-content h1 span {
  font-size: 60px;
}
.detail-banner-content h1 {
  font-size: 60px;
}
.courts-info {
  width: calc(50% - 76px);
  flex-wrap: wrap;
}
}


@media (max-width: 767px) {

header {
  padding: 12px 24px;
  background-color: #FFFFFF;
}
.banner-content {
  height: 420px;
}
.banner {
  padding: 0px 24px;
}
.banner-content h1 {
  font-size: 48px;
}
.banner-content h1 span {
  font-size: 48px;
}
.locations-grid {
  grid-template-columns: 1fr;
  gap: 40px;
}
.location-indexing h2 {
  font-size: 32px;
}
.location-indexing {
  padding: 40px 24px;
}
section.cta {
  padding: 60px 24px;
}
.cta-content h2 {
  font-size: 32px;
}
footer {
  padding: 40px 24px;
}
br {
  display: none;
}
.detail-banner-content {
  height: 320px;
}
.detail-banner-content h1 {
  font-size: 48px;
}
.courts-grids {
  grid-template-columns: 1fr;
  row-gap: 20px;
}
.locatiodetial-banner {
  padding: 0px 24px;
}
.courts-detail {
  padding: 60px 24px;
}
.filtration h2 {
  font-size: 32px;
}
.list-grids {
  grid-template-columns: 1fr !important;
  row-gap: 42px;
}
.grid {
  gap: 42px;
}
.filtration {
  padding-bottom: 40px;
}
.map-wrapper {
  padding-top: 42px;
}
.courts-info {
  width: calc(100% - 76px);
}
.select-area {
  display: none !important;
}
}