/* 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: 1420px) 
{
    /* HEADER */
    .home-intro     {gap: 20px;}
    .home-intro h1  {width: auto; flex: 0 0 50%}
    .home-intro h2  {width: auto; flex: 0 0 50%}
    
    .services-listing .cols {gap: 60px;}
    .services-listing .col  {flex: 0 1 calc((33.333% - 40px));}
}

@media (max-width: 1230px) 
{
    .home-intro h1  {font-size: 55px;}
    .home-intro h2  {font-size: 30px;}

    .home-listing-panel h2  {font-size: 55px;}
    .home-listing-panel p   {font-size: 30px;}
    .home-listing-panel .read-more  {font-size: 25px;}
    
    h2              {font-size: 30px;}
    .intro-text p   {font-size: 30px;}
    
    /* SERVICE DETAIL */
    .services-detail-page  .cols.span-2 .col,
    .services-detail-page .cols.span-2 .col.services-image-col  {width: 50%; min-height: unset;}
    .services-detail-page  .cols.span-2 .col:first-child    {padding-bottom: 60px;}
    
    /* CAUSES */
    .causes-page .cols.span-2       {gap: 50px;}
    .causes-page .col:nth-child(1),
    .causes-page .cols.span-2 .col.services-image-col   {width: 50%;}
}

@media (max-width: 1000px) 
{
    .home-intro {flex-direction: column; justify-content: flex-start; align-items: flex-start}
    
    .home-hero-image    {height: 720px; border-bottom-left-radius: 120px; margin-bottom: 37px;}
	.home-hero-video 	{height: 100% !important;} 
    .home-listing .home-listing-panel {margin-bottom: 37px;}
    .home-listing section:nth-child(1) .home-listing-panel  {border-radius: 120px 0 0 120px !important;}

    /* ABOUT PAGE */
    .about-page .col.col-text,
    .about-page .cols.span-2 .col.about-logos-col   {width: 50%}
    .about-page .cols   {padding-bottom: 60px;}
    
    /* SERVICE LISTING */
    .services-listing .col {flex: 0 1 calc((50% - 30px));}  
    
    /* COOKIES */
    .text-page .cols        {gap: 50px;}
    .text-page .cols .col   {width: 50%;}
}

@media (max-width: 860px) 
{
    .panel-text                     {padding: 50px 30px;}
    .home-listing-panel h2          {font-size: 36px;}
    .home-listing-panel p           {font-size: 26px;}
    .home-listing-panel .read-more  {font-size: 26px;}
    
    footer ul   {font-size: 14px; flex-wrap: wrap; justify-content: center; gap: 20px;}
    footer ul li    {flex-shrink: 0}
    
    /* ABOUT */
    .about-page .cols,
    .about-page .cols.about-bottom                          {flex-direction: column}
    .about-page .cols.about-bottom .col.col-text,
    .about-page .col.col-text                               {width: 100%; padding-bottom: 0}
    .about-page .cols.span-2 .col.about-logos-col           {width: calc(100% + 40px);}
    .about-page .cols.about-bottom .col.services-image-col  {height: 80vw; width: calc(100% + 40px);}
    
    /* SERVICE DETAIL */
    .services-detail-page .cols.span-2                          {flex-direction: column}
    .services-detail-page .cols.span-2 .col,
    .services-detail-page .cols.span-2 .col.services-image-col  {width: 100%; min-height: unset;}
    .services-detail-page .cols.span-2 .col:first-child         {padding-bottom: 0;}
    .causes-page .cols.span-2 .col.services-image-col,
    .services-detail-page .cols.span-2 .col.services-image-col  {height: 80vw; width: calc(100% + 40px);}

    /* CAUSES */
    .causes-page .cols.span-2       {flex-direction: column}
    .causes-page .col:nth-child(1)  {width: 100%; padding-bottom: 0}
    
    .form-cell                          {flex-direction: column; align-items: flex-start}
    .form-container input[type="text"]  {width: 100%;}
    .error-container  {width: 100%;}
}

@media (max-width: 767px) 
{
    .listing-card p,
    p       {font-size: 16px;}
    .inner  {padding: 0 30px;}
    
    .cols.span-2    {gap: 30px;}
    
    .causes-page .cols.span-2 .col.services-image-col,
    .services-detail-page .cols.span-2 .col.services-image-col,
    .about-page .cols.about-bottom .col.services-image-col,
    .about-page .cols.span-2 .col.about-logos-col,
    .home-listing-panel,
    .home-hero-image    {width: calc(100% + 30px);}
    
    .about-page .cols.span-2 .col.about-logos-col,
    .about-page .col.services-image-col  {margin-left: -30px;}
    
    .about-page .cols.about-bottom .col.services-image-col  {margin-left: auto; margin-right: -30px;} 
    
    .hlp-cols                       {flex-direction: column-reverse!important; height: auto}
    .home-listing-panel h2          {font-size: 33px;}
    .home-listing-panel p           {font-size: 20px; line-height: 1.2em}
    .home-listing-panel .read-more  {font-size: 20px;}

    .home-listing-panel {height: auto; min-height: unset;}
    
    .home-listing section:nth-child(1)  .home-listing-panel {border-radius: 0 120px 120px 0 !important}
    .home-listing section:nth-child(odd) .home-listing-panel {border-radius: 0 120px 120px 0; margin-left: -30px; margin-right: 0;}
    .home-listing section:nth-child(even) .home-listing-panel {border-radius: 120px 0 0 120px; margin-left: 0; margin-right: -30px;}
    
    .home-listing-panel .panel-image-container        {height: 80vw; width: 100%;}
    
     .listing-card .panel-image-container:after,
    .home-listing-panel .panel-image-container:after  {width: 100%; height: 80vw; background: linear-gradient(0deg, rgba(35, 67, 82, 0) 0%, rgba(35, 67, 82, 1) 100%) !important;}
    
    .panel-text         {justify-content: flex-start}
    .panel-text-inner   {width: calc(100% - 60px);}
    
    .home-listing section:nth-child(even)  .panel-text {text-align: right; justify-content: flex-end}
    
    .services-listing .cols                 {flex-direction: column}
    .services-listing .col                  {flex: auto; width:100%;}

    
    .services-listing .col:nth-child(odd)   {margin-left: -30px;}
    .services-listing .col:nth-child(odd) .listing-card-text    {padding-right: 40px;}
    
    .services-listing .col:nth-child(even)                       {margin-right: -30px; margin-left: auto}
    .services-listing .col:nth-child(even) .listing-card-text    {padding-left: 40px; text-align: right; margin-left: auto}
    .services-listing .col:nth-child(even) .listing-card         {border-radius: 120px 0 0 120px}

    .listing-card               {flex-direction: column-reverse; display: flex; overflow: hidden; background-color: var(--navy); border-radius: 0 120px 120px 0;}
    .listing-card h3            {font-size: 30px;}
    .listing-card-text          {padding:35px 30px}
    .listing-card-text:before   {display: none}
    .listing-card .panel-image-container    {padding-top: 0; height: 80vw; border-radius: 0}
    .listing-card .panel-image-container:after  {inset:0; width: 100%; position: absolute; content: '';}
    
    body.gradient-mobile   {background: rgb(210,59,128); background: linear-gradient(0deg, rgba(210,59,128,1) 0%, rgba(36,67,82,1) 100%); background-size: cover; background-repeat: no-repeat}
 
    .form-container {margin-top: 20px;}
    
    /* COOKIES */
    .col h2:first-child     {margin-top: 0}
    .text-page .cols        {gap: 0px; flex-direction: column}
    .text-page .cols .col   {width: 100%;}         
    
}

@media (max-width: 640px) 
{

    .home-intro h1  {font-size: 35px; flex: 1}
    .home-intro h2  {font-size: 20px; flex: 1; line-height: 1.2em}
    
    .text-page h2   {font-size: 20px;}
    
    h1              {font-size: 35px;}
    .intro-text p   {font-size: 20px;}
    .about-page h2  {font-size: 20px; line-height: 1.2em}

    .back-btn   {font-size: 16px;}
    .back-btn svg   {width: 17px; height: auto; margin-top: 3px;}
    
    footer ul  {font-size: 12px;}
    
    .causes-page .cols.span-2   {gap: 30px;}
    
    
}

@media (max-width: 550px) 
{
    
    
    /* HEADER */
    header  {padding: 20px 0; border-bottom: 1px solid #ffffff; position: relative; margin-bottom: 35px;}
    .logo   {width: 170px;}
    
	/* MOBILE NAV */
    body.mm-open                    {overflow: hidden}
    body.mm-open:after              {position: fixed; z-index: 99; left: 0; top: 0; background-color: var(--navy); opacity: 0.5;  width: 100%; height: 100%; content: '';}
    body.mm-open .logo              {opacity: 0.5}
    
    .hamburger 						{width: 33px; height: 25px; flex-shrink: 0; z-index: 50; margin: 0; cursor: pointer; position: absolute; right: 30px; top: 42px; display: block}
	.hamburger span 				{width: 100%; display: block; height: 3px; background-color: #ffffff; position: absolute; top: 0; left: 0;}
	.hamburger span:nth-child(1) 	{}
	.hamburger span:nth-child(2) 	{top: 11px;}
	.hamburger span:nth-child(3) 	{top:auto; bottom: 0;}

	.hamburger.open 	 				{z-index: 999}
	.hamburger.open span				{background-color: var(--navy) !important;}
	.hamburger.open span:nth-child(1) 	{top: 11px; transform: rotate(45deg) scaleX(-1);}
	.hamburger.open span:nth-child(2) 	{opacity: 0; transform: scale(0)}
	.hamburger.open span:nth-child(3) 	{bottom: 11px; transform: rotate(-45deg) scaleX(-1);}

    header                      {position: relative; z-index:100;}
    header nav			        {transition: 0.4s ease-out; transform: translateX(100%); position: fixed; z-index: 99; background-color: #ffffff; width: 230px; top: 0; right: 0; margin: 0; padding-top: 140px; padding-right: 30px; padding-bottom: 80px; border-radius: 120px 0 0 120px;}
    
    header nav ul				{font-size: 22px; flex-direction: column; width: 100%; position: relative; z-index: 5; font-size: 27px; width: 100%; gap:36px; text-align: right}
	header nav ul li			{margin: 0; width: 100%;}
	header nav ul li a			{display: block; padding: 5px 0; color: var(--navy);}
	header nav ul li a:hover	{color: var(--magenta);}

	header nav.open		   {opacity: 1; transform: translateX(0); visibility: visible;}
        
    
}

@media (max-width: 500px) 
{
}

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

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

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