/* 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: 1310px) 
{
    /* HEADER */
    nav ul  {gap: 1.2vw;}
}

@media (max-width: 1220px) 
{
    /* HEADER */
    header .logo    {width: 260px;}
    nav ul          {font-size: 16px;}

    /* BLOG LISTING */
    .blog-listing .grid {grid-template-columns: repeat(3, 1fr);}

}

@media (max-width: 1100px) 
{   
   h2      {font-size: 35px;}
   p.intro {font-size: 20px;}

   .btn        {font-size: 16px;}
   .btn.small  {font-size: 14px;}

   /* HEADER */
   .header-right   {flex-direction: row; align-items: center;}

   /* MOBILE NAV */
   .hamburger	    {display: block}
   .hamburger.open span {background-color: #ffffff;}

   
   nav            {position: fixed; left: 0; top:0; padding-top: 80px; background-color: var(--blue); width:100%; height: 100%; z-index: 20; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; transform: scale(0.9); opacity: 0; visibility: hidden;}
   nav ul			{flex-direction: column; text-align: center; margin: 0; font-size: 20px; gap: 0; width: 100%;}
   nav ul li		{margin: 0; padding:0; border-bottom: 0.5px solid rgba(255,255,255,0.5)}
   nav ul li a    {color: #ffffff; padding: 15px 0; display: block}
   nav.open		   {transform: scale(1); opacity: 1; visibility: visible; transition: 0.2s ease-out}

   nav ul li.active a  {color: #ffffff;}
   
   nav ul li:hover a {color: #ffffff; opacity: 0.5}
   
   nav ul li ul      {visibility: visible; opacity: 1; transform: translateY(0); position: relative; left: auto; box-shadow: none; top: auto; border-radius: 0; padding: 0; width: 100%; max-width: 100%; font-size: 18px; display: none}
   nav ul li ul li   {margin: 0; position: static}
   nav ul li ul li a {color: var(--blue); padding:15px 10px; opacity: 1 !important}
   
   nav ul li ul li:hover a   {background-color: #ffffff !important; color: var(--blue) !important}
   
   nav ul li.dropdown span   {width: 50px; height: 50px; background-color: #ffffff; display: block; position: absolute; right: 0; top: 0; background-image: url(/_uploads/_assets/chevron-down.svg); background-position: center; background-repeat: no-repeat;}
   
   nav ul li span          {display: none}
   nav ul li ul li span  {display: none !important}
   
   /* HOME INTRO TEXT */
   .home-intro-text .cols      {justify-content: space-between;}
   .founder-lockup h3          {font-size: 20px;}
   .home-intro-text .buttons   {width: 100%;}

   /* CONTACT */
   .contact-section .cols  {gap: 40px;}
   
   /* IMAGE CAROUSEL */
   .image-carousel-section .image-carousel .slide   {height: 55.5vw}
   .image-carousel .slick-list                     {padding: 0 !important}
}

@media (max-width: 1000px) 
{   
    /* THERAPISTS LISTING */
    .therapists-listing .cols.grid  {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 960px) 
{

    /* TREATMENT LISTING */
    .grid   {grid-template-columns: repeat(3, 1fr); gap: 25px}
    
    /* THERAPIST AGE */
    .therapist-detail .cols                     {gap: 30px}
    .therapist-detail .cols .col:first-child    {flex: 0 0 33.333%;}
    .therapist-detail .person-image-outer       {width: 100%;}
   .image-carousel-section .image-carousel     {padding-left: 50px; padding-right: 50px;}
}

@media (max-width: 840px) 
{

    /* HEADER */
    header                          {padding: 20px 0}
    header .logo                    {width: 220px;}
    .quick-contact-lockup           {gap: 10px;}
    .quick-contact-lockup a span    {display: none;}
    .header-right                   {gap: 15px}

    /* HOME HERO */
    h1,
    .home-hero h1   {font-size: 60px;}
    
    /* BLOG POST */
    .blog-post-header h1    {font-size: 45px;}
    .blog-post              {padding-top: 40px;}
    .blog-post-content      {padding-top: 40px;}
    .bph-image              {height: 50vw;}

    /* HOME INTRO TEXT */
    .home-intro-text                        {padding: 60px 0 0}
    .home-intro-text .cols                  {flex-direction: column;}
    .home-intro-text .col                   {width: 100%;}
    .home-intro-text .buttons               {width: auto; align-items: flex-start;}
    .home-intro-text .btn                   {width: auto;}
    .home-intro-text .col:last-child        {background-color: #F4F0E6; padding: 60px 0; width: calc(100% + 50px); margin-left: -25px; overflow: hidden;}
    .home-intro-text .col:last-child:after  {width: 90%; height: 90%; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.65;}
    .col-inner                              {padding: 0 25px}

    /* INTRO TEXT WITH CARD */
    .home-intro-text.intro-text-with-card .cols     {gap: 35px}
    .home-intro-text.intro-text-with-card .col      {width: 100%;}
    .home-intro-text.intro-text-with-card::before   {display: none;}
    .home-intro-text.intro-text-with-card .col:last-child   {width: 100%; margin-left: 0; background-color: transparent; padding-top: 0}

   .home-intro-text.intro-text-with-card .col-inner.col-inner-not-central  {width: 100%}
   .home-intro-text.intro-text-with-card .col-inner.col-inner-not-central img {width: 100%;}
   
   .intro-text-image-quote .blockquote-container   {margin:40px auto 0}
   
   .home-intro-text.intro-text-with-card .col-inner   {padding-top: 50px;}
   
    /* CONTENT PAGE HEADER */
    .content-page-header .inner     {min-height: 300px;}

    /* BUTTON STRIP */
    .button-strip          {padding: 40px 0;}
    .button-strip .inner   {grid-template-columns: repeat(1, 1fr); gap: 20px}

    /* TREATMENT LISTING */
    .treatment-listing          {padding:55px 0 60px 0}
    .treatment-card::before     {opacity: 1;}

    /* TEAM CAROUSEL */
    .team-carousel-section  {padding:55px 0 60px 0}

    /* BLOG LISTING */
    .blog-listing       {padding: 60px 0;}
    .blog-listing .grid {grid-template-columns: repeat(2, 1fr);}

    /* THERAPISTS */
   .section-centred-intro-text   {padding: 60px 0}
    .therapists-listing {padding-top: 60px; margin-top: 0;}

    /* THERAPIST PAGE */
    .therapist-detail,                       
    .therapist-page .therapists-listing     {padding: 50px 0 60px}

    /* ACCORDIONS */
    .faq-section    {padding: 60px 0;}

   /* CONTACT */
   .contact-section        {padding: 60px 0}
   .contact-section .cols  {gap: 40px; flex-direction: column}
   .contact-section .col   {width: 100%;}
   .content-page-header .quick-contact-lockup      {gap: 20px}
   .content-page-header .quick-contact-lockup span {display: block}
   
    /* FOOTER */
    footer                          {padding: 60px 0 0;}
    .footer-bottom .cols            {padding-bottom: 60px; flex-direction: column; align-items: flex-start;}
    footer .quick-contact-lockup    {margin-top: 30px;}

    .footer-top .cols                   {gap: 40px; align-items: center;}
    .footer-top .col                    {width: 50%;}
    .footer-top .col:last-child img     {margin-left: auto; display: block;}
    
    footer .quick-contact-lockup a span    {display: block;}

}

@media (max-width: 760px) 
{
    /* TEAM CAROUSEL */
    .team-carousel              {}
    .team-carousel .slick-list  {}
    .team-carousel-section .button  {margin-top: 20px;}
}

@media (max-width: 600px) 
{
    /* THERAPISTS LISTING */
    .therapists-listing .cols.grid          {grid-template-columns: repeat(1, 1fr);}
    .therapist-profile-card .person-image   {}

    /* THERAPIST PAGE */
    .therapist-detail                                       {padding-top: 0;}
    .therapist-detail .cols                                 {flex-direction: column;}
    .therapist-detail .cols .col:first-child                {margin-top: -40px; position: relative; z-index: 5;}
    .therapist-detail .person-image-outer                   {max-width: 300px; margin: auto; border: 10px solid #ffffff; border-radius: 100%;}
    .therapist-detail .person-image-outer .person-image     {margin-bottom: 10px;}
   
   
    /* FOOTER */
    .footer-top .col:last-child img {width: 100px;}
}

@media (max-width: 550px) 
{
   
    /* CONTACT */
   .content-page-header .quick-contact-lockup      {gap: 10px; flex-direction: column; align-items:center; justify-content: center}
   
   
}

@media (max-width: 500px) 
{
    /* HOME HERO */
    h1,
    .home-hero h1   {font-size: 45px;}
    .home-hero p    {font-size: 20px;}

    .content-page-header h2,
   .therapist-page .content-page-header h2   {font-size: 20px;}

   
   
    /* TREATMENT LISTING */
    .grid   {grid-template-columns: repeat(2, 1fr); gap: 15px}

    /* TEAM CAROUSEL */
    .team-card .person-image    {}
    .team-carousel h3           {font-size: 24px;}

    /* CONTENT PAGE HEADER */
    .content-page-header p  {font-size: 18px;}
    .content-page-header::after {opacity: 0.65;}

    /* BLOG LISTING */
    .blog-listing .grid {grid-template-columns: repeat(1, 1fr); row-gap: 40px;}
    .smaller-header .content-page-header p  {font-size: 16px;}

    /* BLOG POST */
    .blog-post-header h1    {font-size: 35px;}
    .bph-text p             {margin-bottom: 10px; font-size: 14px;}

    /* FOOTER */
    .footer-bottom .cols {flex-direction: column; align-items: flex-start;}
    footer .quick-contact-lockup    {flex-direction: column;}
}

@media (max-width: 414px) 
{
    h2  {font-size: 30px;}

    /* HOME INTRO */
    .founder-lockup h3                       {font-size: 17px;}
    .home-intro-text .col:last-child:after  {background-size: cover; left: 0; top: 0; right: 0; bottom: 0; transform: none; width: 100%; height: 100%;}

    /* TREATMENT LISTING */
    .tc-text p      {padding: 10px; font-size: 17px;}
    .tc-text p br   {display: none;}

    /* TEAM CAROUSEL */
    .team-carousel              {padding: 0 40px}
    .team-carousel .col         {padding: 20px 10px;}
    .team-card .person-image    {width: 50vw; height: 50vw;}
    .slick-arrow                {width: 40px; height: 40px;}
}

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

@media (max-width: 360px) 
{
    h2  {font-size: 28px;}

    /* TREATMENT LISTING */
    .grid                   {grid-template-columns: repeat(1, 1fr);}
    .treatment-card img     {width: 100%; object-fit: cover;}
    .treatment-card         {height: 175px;}

    /* FOOTER */
    .footer-bottom .quick-contact-lockup a  {font-size: 14px;}

}

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