/* 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) {  

}


/* MOBILE STYLES */
@media (max-width: 1200px) 
{
    
}

@media (max-width: 1100px) 
{
   .two-col-page .col:first-child   {width: calc(40% - 20px)}
   .two-col-page .col:last-child    {width: calc(60% - 20px)}
}

@media (max-width: 1000px) 
{
    /* HERO */
   .hero-section .col,
   .hero-section .col:first-child   {width: calc(50% - 20px);}
   .hero-section .cols              {gap: 40px;}
   .hero-section h1                 {font-size: 30px;}
   .hero-section p                  {font-size: 20px;}
   
   /* HOW IT WORKS */
   .how-it-works .cols	      {gap: 27px;}
   .how-it-works .col	      {flex: 0 0 calc((100% - (2 * 27px)) / 3)}
   .how-it-works .col p       {font-size: 18px;}
   
   /* CONTACT */
   .two-col-page,
   .contact-page           {padding: 70px 0}
   
   .two-col-page h1,
   .contact-page h1        {font-size: 40px;}
   
   .two-col-page .col p,
   .contact-page .col p    {font-size: 20px;}
   
   .contact-page .col:first-child,
   .contact-page .col:last-child {width: calc(50% - 20px);}


   
}

@media (max-width: 768px) 
{
	/* NAV */
	header .nav-toggle		{display:block;}

	header nav					   {display:block;position: absolute;top: 69px; right: 0;z-index:999;background-color: #fff;width: 265px; border-bottom-left-radius: 8px; opacity: 0; visibility: hidden}
	header nav ul					{display:flex;flex-direction:column;}
	header nav ul li				{padding: 1.25em 0;padding-left:15px;position:relative;}
	header nav ul li a			{font-size: 18px; font-weight:500; line-height: 17px;}
	header nav .sub-menu ul li a			{font-size: 16px; font-weight:400;}

   header nav.open   {opacity: 1; visibility: visible}
   
   .hamburger 						{width: 30px; height: 22px; flex-shrink: 0; z-index: 50; margin: 0; cursor: pointer; position: absolute; right: 0px; top: 50%; margin-top: -11px; display: block}
   .hamburger span 				{width: 100%; display: block; height: 4px; background-color: #2A2E39; position: absolute; top: 0; left: 0; transition: 0.2s ease-out; }
   .hamburger span:nth-child(1) 	{}
   .hamburger span:nth-child(2) 	{top: 9px;}
   .hamburger span:nth-child(3) 	{top:auto; bottom: 0;}

   .hamburger.open 	 				{}
   .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);}

   /* FOOTER */
   footer hr   {display: none}
   footer nav  {display: flex; flex-direction: column; align-items: center; justify-content: center}
   footer nav img {width: 185px;}
   footer nav ul     {flex-direction: column; font-size: 24px; font-weight: 500; gap: 30px; margin-top: 40px;}
   
}

@media (max-width: 767px) 
{
   /* HERO */
   .hero-section                    {padding: 30px 0; text-align: center}
   .hero-section .cols              {flex-direction: column}
   .hero-section .col,
   .hero-section .col:first-child   {width: 100%;}
   .hero-text                       {width: 100%;}
   
   /* HOW IT WORKS */
   .how-it-works .cols  {flex-direction: column}
   
   /* CONTACT */
   .two-col-page .cols,
   .contact-page .cols                 {flex-direction: column;}
   
   .two-col-page .col:first-child,
   .two-col-page .col:last-child,
   .contact-page .col:first-child      {width: 100%;}
   
   .contact-page .col:last-child       {width: calc(100% + 60px); margin-left: -30px; max-width: unset}
   .contact-page .form-container-panel {width: 100%; border-radius: 0; padding-left: 30px; padding-right: 30px;}
}

@media (max-width: 620px) 
{
   /* CLAIM FORM */
   .form-container-panel   {border-radius: 0; padding-left: 30px; padding-right: 30px;}
}

@media (max-width: 414px) 
{
   /* CLAIM FORM */
   .form-container-panel .btn {width: 100%; text-align: center}
}

@media (max-width: 375px) 
{
    /* IPHONE 6 */
}

@media (max-width: 360px) 
{
    /* SAMSUNG GALAXY S5 */
}

@media (max-width: 320px) 
{
    /* IPHONE 5 */
}