:root {
    --magenta: #D23B80;
    --navy: #234352;
}

* {margin:0; padding:0; outline:none; border:none; box-sizing:border-box; -moz-box-sizing:border-box;}

/* GLOBAL */

html 	{min-height: 100%}
body 	{min-height: 100%; line-height:1; font-family: "gill-sans-nova", sans-serif; color: #ffffff; background-color: var(--navy);}

h1		{font-size: 66px; font-weight: 300; text-transform: uppercase;}
h2		{font-size: 32px; font-weight: 600; text-transform: uppercase; color: var(--magenta)}
h3		{font-size: 28px; font-weight: 600; text-transform: uppercase; color: var(--magenta)}
h4		{font-size: 30px; font-weight: 600; text-transform: uppercase; color: var(--magenta)}
h5		{font-size: 25px; font-weight: 600; text-transform: uppercase; color: var(--magenta)}
h6		{font-size: 20px; font-weight: 600; text-transform: uppercase; color: var(--magenta)}

p		{font-size: 18px; line-height: 1.2em; font-weight: 300; margin-bottom: 1em}

strong  {font-weight: 600}

ul,
ol		{font-size: 18px; line-height: 1.2em; font-weight: 300; margin:1.5em}

ul li,
ol li   {margin-bottom: 0.5em}

img     {max-width:100%; height:auto;}
a       {color:inherit;}
a.cover {position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0); display:block;}
.inner  {max-width:100%; /*width:1800px;*/ padding: 0 40px; margin:0 auto; }

.cols   {display: flex;}


/* HEADER */
.logo           {display: block; width: 249px; max-width: 100%;}
header 			{padding: 55px 0 40px}
header .inner 	{}

/* NAV */
nav		            {margin-top:40px;}
nav ul	            {display: flex; font-size: 20px; list-style: none; gap:36px; text-transform: uppercase; margin: 0}
nav ul li           {margin: 0}
nav ul li a         {color: #ffffff; text-decoration: none; transition: 0.4s ease-out}
nav ul li a:hover   {color:var(--magenta);}

/* HOME */
body.gradient   {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}

.home-hero-image    {width: calc(100% + 40px); height: 870px; border-radius: 120px 0 0 0; background-size: cover; background-position: center; background-repeat: no-repeat;}
.home-hero-video    {height:100%;}
.home-intro         {display: flex; align-items: flex-end; justify-content: flex-start; gap: 112px; margin-bottom: 50px;}
.home-intro h1      {width: 570px; max-width: 100%;}
.home-intro h2      {width: 660px; max-width: 100%;} 

.home-listing-panel     {height: 57vw; min-height: 600px; width: calc(100% + 40px); overflow: hidden; border-radius: 120px 0 0 120px; text-decoration: none; display: block;}
.home-listing-panel h2  {font-size: 47px; font-weight: 300; text-transform: uppercase; color: #ffffff; margin-bottom: 0.65em}
.home-listing-panel p   {color:var(--magenta); font-size: 32px; font-weight: 600; text-transform: uppercase; margin-bottom: 1.3em; line-height: 1.2em}
.hlp-cols               {display: flex; align-items: center; height: 100%;}
.panel-image-container  {width: 50%; position: relative; height: 100%; flex-shrink: 0; overflow: hidden}
.panel-image            {position: absolute; left: 0; top: 0; inset:0; background-size: cover; background-position: center; transition: 0.4s ease-out}
.panel-text             {padding: 50px; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--navy);}

.home-listing-panel .read-more  {text-transform: uppercase; font-size: 24px; display: block; color: #ffffff; transition: 0.4s ease-out}

.home-listing-panel .panel-image-container:after    {position: absolute; inset:0; content: ''; background: rgb(35,67,82); background: linear-gradient(90deg, rgba(35,67,82,0) 0%, rgba(35,67,82,1) 100%);}

.home-listing section:nth-child(1) .home-listing-panel              {border-radius: 0 0 0 120px !important;}
.home-listing section:nth-child(even) .home-listing-panel           {border-radius: 0 120px 120px 0; margin-left: -40px;}
.home-listing section:nth-child(even) .hlp-cols {flex-direction: row-reverse}
.home-listing section:nth-child(even) .panel-image-container:after  {background: rgb(35,67,82); background: linear-gradient(-90deg, rgba(35,67,82,0) 0%, rgba(35,67,82,1) 100%);}

.home-listing-panel:hover .read-more    {color:var(--magenta);}
.home-listing-panel:hover .panel-image  {transform: scale(1.1);}

/* SERVICES LISTING */
.services-listing       {padding-bottom: 70px;}
.services-listing .cols {display: flex; flex-wrap: wrap; gap:90px;}
.services-listing .col  {flex: 0 1 calc((33.333% - 60px));}

.listing-card                           {text-decoration: none}
.listing-card .panel-image-container    {width: 100%; height: auto; padding-top: 70%; border-radius: 80px 0 0 0}
.listing-card h3                        {font-size: 36px; font-weight: 600; margin-bottom: 0.5em; color: var(--magenta); text-transform: none; transition: 0.3s ease-out}
.listing-card p                         {font-size: 18px; line-height: 1.3em; font-weight: 300; max-width: 450px;}
.listing-card-text                      {padding-top: 3vw; position: relative;}
.listing-card-text:before               {width: 100%; height: 0px; background-color: #ffffff; top: 0; left: 0; content: ''; display: block; position: absolute; opacity: 0; transition: 0.3s ease-out}

.listing-card:hover h3                          {color:#ffffff;}
.listing-card:hover .listing-card-text:before   {opacity: 1; height: 20px;}

.text-intro {margin-top: 30px; width: 960px; max-width: 100%;}

/* SERVICES DETAIL */
.cols.span-2                           {gap: 50px;}
.cols.span-2 .col                      {width: 40%;}
.cols.span-2 .col.services-image-col   {width: 60%; position: relative; overflow: hidden; min-height: 950px; margin-right: -40px; border-radius: 120px 0 0 0}
.cols.span-2 .col .services-image      {position: absolute; inset:0; background-size: cover; background-position: center;}

.intro-text p   {font-size: 32px; font-weight: 600; color: var(--magenta); text-transform: uppercase; line-height: 1.1em}

/* CAUSES */
.causes-page .col:nth-child(1)                      {padding-bottom: 50px;}
.causes-page .cols.span-2                           {gap: 190px;}
.causes-page .cols.span-2 .col.services-image-col   {min-height: unset;}
.causes-page .cols.span-2 .col .services-image      {display: flex; justify-content: center; align-items: center; background-color: #ffffff;}
.causes-page .cols.span-2 .col .services-image img  {width: 85%;}

/* ABOUT */
.about-page h2                                  {margin-bottom: 1em}
.about-page .cols                               {padding-bottom: 90px; flex-direction: row-reverse}
.about-page .col.col-text                       {width: 40%}

.about-page .cols.span-2 .col.about-logos-col   {width: 60%; overflow: hidden; margin-left: -40px;}
.about-logos                                    {background-color: #ffffff; border-radius: 0 120px 120px 0; display: flex; justify-content: center; flex-wrap: wrap; overflow: hidden;}
.about-logos .logo                              {flex: 50%; display: flex; justify-content: center; align-items: center; border-right:20px solid var(--navy); border-bottom: 20px solid var(--navy); padding: 40px;}
.about-logos .logo img                          {width: auto; max-height: 220px}
.about-logos .logo:nth-child(2)                 {border-right: none}
.about-logos .logo:nth-child(3)                 {flex: 100%; border: none; padding: 100px;}

.about-page .cols.about-bottom                            {flex-direction: row;}
.about-page .cols.about-bottom .col.services-image-col    {margin-right: -40px; min-height: 600px; border-radius: 120px 0 0 120px}
.about-page .cols.about-bottom .col.col-text              {width: 40%; padding-bottom: 50px;}

/* TEXT PAGE */
.text-page              {padding-bottom: 50px;}
.text-page h2           {margin: 1em 0 0.5em}
.text-page .cols        {gap: 100px;}
.text-page .cols .col   {width: 40%;}
.text-page .cols .col h2:first-child    {margin-top: 0}

.text-page-one-column .inner    {width: 1100px; max-width: 100%; margin: 0}

.text-page table    {margin: 40px 0}
.text-page td   {padding: 10px; border: 1px solid #ffffff;}

/* FOOTER */
footer	                {background-color: var(--magenta); padding-top: 50px; padding-bottom: 50px; font-weight: 600;}
footer ul               {text-transform: uppercase; display: flex; justify-content: space-between; font-size: 16px; margin: 0; list-style: none; margin: 0; font-weight: 600} 
footer ul li            {margin: 0}
footer ul li a          {color:var(--navy); text-decoration: none; transition: 0.4s ease-out}
footer ul li a:hover    {color: #ffffff;}

/* BUTTONS */
button                      {background-color: transparent;}
.back-btn-lockup            {margin: 2em 0}
.back-btn                   {font-size: 30px; font-weight: 300; display: inline-flex; gap:9px; align-items: center; text-decoration: none; color: #ffffff; transition: 0.4s ease-out}
.back-btn svg               {margin-top: 7px;}
.back-btn svg path          {transition: 0.4s ease-out}
.back-btn:hover             {color:var(--magenta)}
.back-btn:hover svg path    {stroke: var(--magenta)}

.btn	{}

p a {text-decoration: none}
p a:hover   {color: var(--magenta)}

/* CONTACT */
.form-text p    {font-size: 15px;}

.form-container label   { width:310px; font-size: 20px; font-weight: 300}
.form-row				   { margin-bottom: 10px;}
.form-cell				   { display: flex; align-items: center; gap:10px;}
.form-field-error       { color: #fff; font-size: 16px; margin-top: 2px; font-weight: 100; }
.form-cell.error input  { /*background-color: #ffdcdc;*/ /*border: 2px solid #ff0000;*/ }
.error-container        { flex: 1; width: 100%; display:flex; min-width: 243px; flex-wrap: wrap; flex-direction: column; }
.error-container input { width: 100%; display: block; flex-basis: 100%; flex: 1 1 100% }


.checkboxes-submit  {margin: 30px 0; display: block}

.sign-up-btn input[type="submit"]       {margin-top: 25px; background-color: var(--magenta); color: #ffffff; text-transform: uppercase; font-size: 20px; font-weight: 600; padding:5px 10px}
.sign-up-btn input[type="submit"]:hover {background-color: #437A93}

.checkmark                              {background-color: #437A93}
.container:hover input ~ .checkmark,
.container input:checked ~ .checkmark   {background-color: var(--magenta);}
    

input[type="text"]		{font-size: 20px; color: #ffffff; background-color: #437A93; padding:5px 10px; flex: 1}
input[type="password"]	{}
input[type="submit"]	{}
textarea				{}

/* SELECT CSS */
.select-css				{}

/* LEGACY COOKIE BAR */
.cookieBar              {width: 100%; background-color:rgba(0,0,0,0.5); position: fixed; bottom: 0px; left: 0px; text-align: center; padding: 10px 10px; z-index: 99999999;}
.cookieBar p			{color:#ffffff; font-size:14px; font-family:inherit; line-height:1.5em; text-align:center; display:inline-block;}
.cookieBar .acceptBtn   {background:#000; border:1px solid #DEDEDE; font-weight:bold; display:inline-block; margin-top:6px; margin-left:5px; font-family:inherit; font-size:12px; padding:5px 10px; text-decoration:none; color:#FFF; text-transform:uppercase; }