﻿.jurisdiction-list,
.hamburger  {display: none}


/* IE10+ SPECIFIC STYLES GO HERE. IE10+ NO LONGER SUPPORT CONDITIONAL STATEMENTS IN THE HEAD OF A FILE */ 
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  

}

@media (max-width: 1300px) 
{
   /* MEMBERS */   
   .listing-grid .col {flex: 0 0 calc((100% - (2 * 25px)) / 3);}
}

@media (max-width: 1200px) 
{
   /* HEADER */
   header         {padding: 30px 0 0}
   header .inner  {padding-bottom: 20px;}
}

@media (max-width: 1024px) 
{
   
   /* MEMBERS */   
   .listing-grid .col {flex: 0 0 calc((100% - (1 * 25px)) / 2);}

   /* FOOTER */
   footer ul   {font-size: 20px; gap: 45px}
}

@media (max-width: 960px) 
{
   /* HEADER */
   header .logo,
   footer .logo   {width: 180px;}
   header nav ul  {font-size: 25px;}
 
   /* HEADER */
   .hero-tag            {font-size: 20px;}
   .hero-container p    {font-size: 30px;}

   .full-image-container-section,
   .purple-container,
   .grey-container,
   .white-container     {padding-left: 20px; padding-right: 20px;}
   
   /* JURISDICTION MAP */
   .jurisdiction-map {display: none}
   
   /* JURISDICTION LIST */
   .jurisdiction-list   {display: block; padding-bottom: 60px;}
   
   
}

@media (max-width: 800px) 
{
   /* CONTACT */
   .contact-section .cols  {flex-direction: column; justify-content: flex-start; gap: 25px;}
   .contact-section .col   {flex: auto !important}
}
   
@media (max-width: 768px) 
{
   /* HERO CONTAINER */
   .hero-container      {margin-top: 35px;}
   .hero-container h1   {font-size: 70px;}
   .hero-container p    {font-size: 30px; width: 490px; max-width: 100%;}
   
   .hero-tags-container {flex-direction: column; align-items: flex-start; gap: 10px;}
   .hero-container img  {top: auto; bottom: 0; width: 200%; margin-left: -91%;}

   .parent-inner        {width: calc(100% - 20px);}
   
}

@media (max-width: 767px) 
{
   .full-image-container-section, .purple-container, .grey-container, .white-container {padding-top: 40px}
   
   .section-intro h2 {font-size: 25px;}
   .section-intro p  {font-size: 20px;}
   
   /* HERO CONTAINER */
   .hero-container      {height: auto; padding-bottom: 112px;}
   
	.hero-container {min-height: 85vw; height: auto;}
	.text-page .hero-container {min-height: unset; height: auto; padding-bottom: 10vw;}
   
   /* FOOTER */
   footer .inner  {align-items: flex-start}
   footer ul      {flex-direction: column; gap: 15px;}
   
   /* TEXT COL */
   .two-col .cols              {flex-direction: column; gap: 45px;} 
   .two-col .col:first-child   {flex: auto}
   .two-col .col:last-child  {flex: auto}
   .two-col .col:first-child p   {font-size: 25px;}
   
   .expander.two-col .inner   {max-height: 630px; overflow: hidden; position: relative; transition: .2s ease-in;}
	
   .expander.two-col .inner:after   {position: absolute; left: 0; bottom: 0; width: 100%; height: 250px; content: ''; background: rgba(255, 255, 255, 0.1); background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%,  rgba(255, 255, 255, 1) 90%);}
   .expander.two-col.active .inner   {max-height: 2400px; padding-bottom: 40px;}
   .expander.two-col.active .inner:after   {display: none;}
   
   .two-col .read-more  {display: inline-flex; position: absolute; bottom: 0; z-index: 10}

   .white-container.expander.two-col   {padding-bottom: 60px;}
   
   /* CAROUSEL SECTION */
   .carousel-section .section-intro    {flex-direction: column; justify-content: flex-start; gap: 0; padding-bottom: 30px;}
   
   .lcf-top p,
   .lcf-top h3       {font-size: 20px}
   
   .lcf-top p.region {font-size: 15px;}
   
   .carousel-nav-container {display: flex; justify-content: center; margin-top: 20px;}
   
   /* FULL WIDTH TEXT */
   .full-width-text     {padding-bottom: 40px}
   
   /* FULL WIDTH IMAGE */
   .full-image-container-section h2    {font-size: 30px;}
   .full-image-container-section   {padding-bottom: 0; min-height: 200px;}
   
   /* TEXT PAGE */
   .hero-container.text-page-hero   {height: auto; min-height: unset; padding: 70px 0}
   
   /* MEMBERS LISTING */
   .filter-container .cols {flex-direction: column; justify-content: flex-start; align-items: flex-start}
   .select-dropdown-trigger   {font-size: 20px; min-height: 45px;}
   .select-dropdown-arrow     {width: 53px;}
   .select-dropdown-options   {font-size: 20px;}
   
   .filter-btn                {font-size: 15px;}
   .filter-btn:before         {width: 11px; height: 10px}
   .listing-grid              {padding-top: 30px;}
   .selected-filters          {margin-top: 30px;}
   
   /* CONTACT */
   textarea, input[type="text"]  {font-size: 20px;}
   
   /* BTN */
   .btn  {font-size: 20px; padding: 12px 15px;}
   
}

@media (max-width: 640px) 
{
   .full-image-container-section,
   .purple-container,
   .grey-container,
   .white-container {padding-left:0; padding-right: 0}
   
   /* MOBILE NAV */
	.hamburger 						   {width: 44px; height: 34px; flex-shrink: 0; z-index: 50; margin: 0; cursor: pointer; position: relative; display: block}
	.hamburger span 				   {width: 100%; display: block; height: 4px; background-color: #ffffff; position: absolute; top: 0; left: 0; transition: 0.2s ease-out; }
	.hamburger span:nth-child(1) 	{}
	.hamburger span:nth-child(2) 	{top: 15px;}
	.hamburger span:nth-child(3) 	{top:auto; bottom: 0;}

	.hamburger.open span   			      {background-color: var(--red);}
	.hamburger.open span:nth-child(1) 	{top: 7px; transform: rotate(45deg) scaleX(-1);}
	.hamburger.open span:nth-child(2) 	{opacity: 0; transform: scale(0)}
	.hamburger.open span:nth-child(3) 	{top: 7px; transform: rotate(-45deg) scaleX(-1);}
   
   header nav				{position: fixed; right: 0; top:0; background-color: #ffffff; width:243px; height: 100%; z-index: 20; display: flex; transform: translateX(100%); opacity: 0; visibility: hidden;}
   header nav ul			{flex-direction: column; margin: 0; width: 100%; font-size: 25px; font-weight: 600; padding:124px 24px 0 24px; gap: 30px;}
   header nav ul li		{margin: 0; border-bottom: 1px solid var(--red); padding-bottom: 15px;}
   header nav ul li a   {color: var(--darkPurple);}
   header nav:before    {position: absolute; content: ''; background-color: var(--darkPurple);  opacity: 0.35; right: 100%; top: 0; width: 102vw; height: 100%;}
   
   header nav.open		{transform: scale(1); opacity: 1; transform: translateX(0); visibility: visible; transition: 0.2s ease-out}

   /* HERO CONTAINER */
   .hero-container h1   {font-size: 55px;}

   
}

@media (max-width: 600px) 
{
   /* MEMBERS */   
   .listing-grid .col {flex: 100%;}
}

@media (max-width: 414px) 
{
   /* FOOTER */
   footer ul   {font-size: 15px;}

}

@media (max-width: 375px) 
{
    /* IPHONE 6 */
}

@media (max-width: 360px) 
{
    /* SAMSUNG GALAXY S5 */
}

@media (max-width: 320px) 
{
    /* IPHONE 5 */
}
