/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

*                       {box-sizing:border-box;}

html					{width:100%; height:100%; margin:0px; padding:0px; background: #ffffff; font-size: clamp(14px, 1vw + 0.5rem, 16px);
  line-height: clamp(28px, 2vw + 1rem, 40px);}
body					{width:100%; height:100%; margin:0px; padding:0px; font-family: 'Inter', sans-serif; color:#000000; font-weight: 400;}

a						{text-decoration:none; outline: none; color:#000000;}
a:hover					{text-decoration:underline;}

a.button				{position: relative; display: inline-block; width: auto; height: 40px; line-height: 38px; border: 1px solid #000000; color: #000000; font-size: 0.875rem; border-radius: 20px 20px 20px 20px; padding: 0px 30px 0px 55px; background: url(images/arrow-right.svg) 20px center no-repeat;}
a.button:hover			{text-decoration: none; background-color: #EFEFEF; transition: background-color 0.3s ease;}
a.button-orange			{border-color: #F45656; background-color: #F45656; color: #ffffff;}
a.button-orange:hover	{background-color: #000000; border-color: #000000;}
a.button-green			{border-color: #19AB5B; background-color: #19AB5B; color: #ffffff;}
a.button-green:hover	{background-color: #000000; border-color: #000000;}

#wrap					{position: relative; display: block; width: auto; height: 100%; max-width: 1920px; margin: 0px auto 0px auto;}

.container              {width: 100%; max-width: 1440px; margin: 0px auto 0px auto; padding-left: 50px; padding-right: 50px;}

section h2             { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 3.625rem; line-height: 100%; color: #3D3D3D;}

header					{position: absolute; display: flex; width: auto; height: auto; top: 45px; left: 50%; transform: translateX(-50%); z-index: 100; align-items: center; justify-content: center;}
header img				{position: relative; display: block; width: 270px; height: auto;}

section.top				{position: relative; display: block; width: auto; height: auto; overflow: hidden;}
section.top img			{position: relative; display: block; width: auto; height: auto; min-height: 770px; left: 50%; transform: translateX(-50%);}
section.top .copy		{position: absolute; display: block; width: 100%; height: auto; bottom: 60px; left: 50%; transform: translateX(-50%); color: #ffffff; text-align: center; padding: 0px 20px 0px 20px;}
section.top .copy h1	{position: relative; display: block; width: auto; height: auto; font-size: 4.5rem; line-height: 100%; font-family: 'Cormorant Garamond', serif; font-weight: 500; margin-bottom: 22px; whitse-space: nowrap;}
section.top .copy span	{position: relative; display: block; width: auto; height: auto; max-width: 505px; font-size: 1.375rem; line-height: 1.9375rem; margin: 0px auto 40px auto;}

section.about           {position: relative; display: flex; padding-top: 100px; padding-bottom: 100px; flex-direction: row; align-items: flex-start; gap: clamp(10px, 10%, 130px); justify-content: flex-start; flex-wrap: wrap;}
section.about img       {display: block; width: 100%; height: auto; max-width: 560px;}
section.about .acopy    {position: relative; width: 100%; height: auto; max-width: 550px; padding: 20px 20px 20px 20px;}
section.about .acopy h2 {position: relative; display: block; color: #3D3D3D; margin-bottom: 20px;}
section.about .acopy p   {display: block; font-size: 1.125rem; line-height: 1.625rem; color: #6E6E6E; margin-bottom: 20px; font-weight: 300;}

section.impact              {position: relative; display: block; width: auto; height: 430px; background: url(../images/our-impact-and-programs.jpg) center center no-repeat; color: #ffffff;}
section.impact .container   {padding-top: 70px; padding-bottom: 35px;}
section.impact .container h2  {color: #ffffff; margin-bottom: 125px;}
section.impact .container ul  {display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: nowrap; gap: clamp(20px, 5%, 80px);}
section.impact .container li  {flex: 1 1 0;}
section.impact .container li h3 {font-weight: 900; font-size: 1.375rem; line-height: 100%; margin-bottom: 20px;}
section.impact .container li span {font-weight: 400px; font-size: 1rem; line-height: 1.375rem;}

section.artists         {padding-top: 80px; padding-bottom: 50px; }
section.artists h2      {display: block; margin-bottom: 75px;}
section.artists .abox-holder  {position: relative; display: block;}
section.artists .abox-content-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
}
section.artists .abox-content {display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: nowrap; gap: clamp(10px, 5%, 30px); transition: transform 0.6s ease;  will-change: transform;  backface-visibility: hidden; transform: translateZ(0);}
section.artists .abox-nav    {position: absolute; display: block; width: 40px; height: 100%; max-height: 330px; overflow: hidden; background-repeat: no-repeat; background-position: center center; z-index: 10; text-indent: -10000px;}
section.artists .nav-left    {top: 0px; left: -50px; background-image: url(images/nav-left.svg);}
section.artists .nav-right    {top: 0px; right: -50px; background-image: url(images/nav-right.svg);}
section.artists .abox  {flex: 0 0 calc((100% - (3 * clamp(10px, 5%, 30px))) / 4); margin-bottom: 30px; box-sizing: border-box;}
section.artists .abox img {position: relative; display: block; width: 100%; height: auto; margin-bottom: 40px; border-radius: 15px;}
section.artists .abox strong  {position: relative; display: block; font-family: 'Cormorant Garamond', serif; font-weight: 400; color: #000000; font-size: 1.75rem; line-height: 1.625rem; margin-bottom: 20px; }
section.artists .abox span  {position: relative; display: block; font-weight: 400; font-size: 1rem; line-height: 1.5rem; color: #6E6E6E;}

div.quote           {position: relative; display: flex; padding: 100px 0px 100px 0px; background-color: #EBEBEB;}
div.quote .container {position: relative; display: flex; flex-direction: row; align-items: center; gap: clamp(20px, 5%, 130px); justify-content: flex-start; flex-wrap: wrap;}
div.quote img       {display: block; width: 100%; height: auto; max-width: 800px; border-radius: 15px;}
div.quote .qcopy    {position: relative; width: 100%; height: auto; max-width: 350px; padding: 20px 20px 20px 20px; font-family: 'Cormorant Garamond', serif; font-weight: 400; color: #000000; }
div.quote .qcopy em {position: relative; display: block; font-size: 2.375rem; line-height: 2.875rem; margin-bottom: 25px;}
div.quote .qcopy span   {font-size: 1.1875rem; line-height: 1.625rem; }


div.video           {padding-top: 100px; padding-bottom: 100px; background-color: #353535; text-align: center; padding-left: 20px; padding-right: 20px;}
div.video a         {position: relative; display: inline-block; width: auto; height: auto; margin: 0px auto 0px auto;}
div.video a img     {position: relative; display: block; width: 100%; height: auto; max-width: 900px;}
div.video a::after   {position: absolute; display: block; content: ''; width: 80px; height: 80px; top: 50%; left: 50%; z-index: 10; transform: translate(-50%, -50%);
  background-color: #ffffff;
  mask: url('images/ico-play.svg') no-repeat center;
  mask-size: contain;
  -webkit-mask: url('images/ico-play.svg') no-repeat center;
  -webkit-mask-size: contain;
  transition: background-color 0.3s ease;
}
div.video a:hover::after {background-color: #bfbfbf;}

section.supporters      {padding-top: 100px; padding-bottom: 30px;}
section.supporters h2   {margin-bottom: 100px;}
section.supporters ul   {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(40px, 5%, 90px);}
section.supporters li   {margin-bottom: 50px;}
section.supporters img  {flex: 1 1 auto; width: 100%; height: auto; object-fit: contain; max-width: 100%;}

section.join            {padding: 130px 0px 90px 0px; background: rgba(25, 171, 91, 0.05); text-align: center;}
section.join h2         {position: relative; display: block; font-family: 'Cormorant Garamond', serif; font-weight: 500; margin-bottom: 20px;}
section.join span       {position: relative; display: block; max-width: 800px; color: #6E6E6E; font-weight: 300; font-size: 1.625rem; line-height: 2.125rem; margin: 0px auto 40px auto; padding: 0px 20px 0px 20px;}
section.join span strong  {color: #19AB5B; font-weight: 700;}
section.join img        {position: relative; display: block; width: 100%; height: auto; max-width: 170px; margin: 0px auto 40px auto;}

@media only screen and (max-width : 1320px) {
  section.about img {
    max-width: 490px;
  }
  section.about .acopy {
    max-width: 510px;
    
  }
}

@media only screen and (max-width : 1250px) {
  div.quote img {
    max-width: 700px;
  }
}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
  section.top img {
    min-height: auto;
    height: 600px;
  }

  section.about {
    padding-top: 60px;
    padding-bottom: 20px;
    gap: 50px;
  }
  
  section.about img {
    width: 450px;
  }

  section.about .acopy {
    max-width: auto;
    width: auto;
    flex: 1 1 0;
  }
  
  section.impact {
    height: auto;
    background-size: cover;
  }
  
  section.impact .container {
    padding-top: 50px;
  }
  
  section.artists {
    padding-top: 50px; 
    padding-bottom: 20px; 
  }
  
  div.quote {
    padding-top: 50px; 
    padding-bottom: 50px; 
  }

  div.quote .container {
    gap: 50px;
  }
  
  div.quote img {
    width: 500px;
  }
  
  section.about .acopy {
    max-width: auto;
    width: auto;
    flex: 1 1 0;
  }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
  header {
    top: 25px;
  }
  
  section.top .copy h1 {
    font-size: 3.75rem;
  }

  section.about {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  section.about img {
    width: 100%;
    max-width: 560px;
  }
  
  section.impact .container h2 {
    text-align: left;
    margin-bottom: 80px;
  }
    
  section.impact .container ul {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: auto;
    margin-right: auto;
  }
  
  section.impact .container li {
    flex: none;
    width: 200px;
    margin-bottom: 40px;
  }

  section.artists .abox {
    flex: 0 0 calc((100% - (2 * clamp(10px, 5%, 30px))) / 3);
  }
  
  div.quote .container {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  div.quote img {
    width: auto;
    max-width: 100%;
  }

  div.quote .qcopy {
    width: 100%;
    text-align: center;
  }

  div.video {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  section.supporters {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  section.supporters h2 {
    margin-bottom: 50px;
  }

  section.join {
    padding-top: 50px;
    padding-bottom: 50px;
  }

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
  header img {
    width: 220px;
  }

  section.top img {
    height: 600px;
  }
  
  section.top .copy {
    bottom: 40px;
  }

  section.impact .container ul {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 30px;
  }
  
  section.impact .container ul li {
    width: auto;
    max-width: 350px;
  }

  section.artists .abox {
    flex: 0 0 calc((100% - (1 * clamp(10px, 5%, 30px))) / 2);
  }
      
  section.join img {
    max-width: 120px;
  }
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
  html {
    font-size: 14px;
    line-height: 24px;
  }

  header img {
    width: 180px;
  }

  section.artists .abox {
    flex: 0 0 100%;
    max-width: 330px;
  }
}