@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto Flex:wght@300;400;500;700;900&display=swap");
:root{
--white:#fff;
--aliceblue:#f2f7fa;
--navyblue:#006fe5;
--caribbeangreen:#00CF8B;
--neonpink:#ff60d0;
--purple:#c980ff;
--black:#000000;
--old-black:#102f44;
--dark:#003046;
--pad:7vw;
--huge:110px;
--size-huge:62px;
--size-h3:20px;
--size-stat-number:42px;
--size-quote:14px;
--vpad:60px;
--video-pad:16px;
--callout-pad:40px}
@media screen and (min-width:375px){
:root{
--size-huge:55px;
--size-h3:calc(17.1831px + 0.75117vw);
--size-stat-number:calc(37.42254px + 1.22066vw);
--vpad:calc(38.87324px + 5.6338vw);
--video-pad:calc(10.3662px + 1.50235vw);
--callout-pad:calc(25.91549px + 3.75587vw)}
}
@media screen and (min-width:1440px){
:root{
--size-huge:90px;
--size-h3:28px;
--size-stat-number:55px;
--vpad:120px;
--video-pad:32px;
--callout-pad:80px}
}
@media screen and (min-width:992px){
:root{
--size-h3:28px;
}
}
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{
border:0;
font-size:100%;
font:inherit;
margin:0;
padding:0;
vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
display:block}
body{
color:var(--dark);
font-family:Roboto,sans-serif;
line-height:1}
ol,ul{
list-style:none}
blockquote,q{
quotes:none}
blockquote:after,blockquote:before,q:after,q:before{
content:"";
content:none}
table{
border-collapse:collapse;
border-spacing:0}
*{
box-sizing:border-box}
img{
display:block;
height:auto;
max-width:100%}
button{
cursor:pointer}
@font-face{
font-family:robotovf;
font-weight:300 900;
src:url(../fonts/Roboto-VF.ttf) format("truetype-variations")}
#preload{
display:none}
.js--will-fade-in{
visibility:hidden}
.overflow{
overflow:hidden}
.sm-only{
display:block}
@media (min-width:992px){
.sm-only{
display:none}
}
.lg-only{
display:none}
@media (min-width:992px){
.lg-only{
display:block}
}
section{
padding:var(--vpad) 0}
.inner,section{
position:relative}
.inner{
box-sizing:border-box;
height:100%;
margin:0 auto;
padding:0 var(--pad)}
.section-heading{
color:var(--black);
display:flex;
flex-direction:column;
font-family:Roboto Flex,sans-serif;
font-size:40px;
font-weight:400;
line-height:40px;
max-width:500px;
text-transform:uppercase;
margin-bottom:60px;
}
@media (min-width:1024px){
.section-heading.heading_with_icon{
flex-direction: row;
max-width: 100%;
justify-content: space-between;
}
}
.section-subheading{
font-size:18px;
line-height:20px;
margin-top:15px;
font-weight: 700;
}
.flex{
display:flex;
height:100%;
width:100%}
.flex.v-center{
align-items:center}
.column{
flex-direction:column}
.h3,.wave-heading{
color:var(--black);
font-family:Roboto,sans-serif;
font-size:var(--size-h3);
font-weight:400;
line-height:1.1;
text-transform:uppercase}
.wave-heading div:nth-child(2){
margin-left:var(--pad)}
p{
color:var(--black);
font-family:Roboto,sans-serif;
font-size:16px;
font-weight:400;
line-height:28px}
p.sm{
font-size:14px;
font-weight:700;
line-height:14px;
opacity:.5}
p.lg{
font-size:22px;
font-weight:500;
line-height:34px}
p strong{
font-weight:700}
p+p{
margin-top:1em}
a{
color:var(--black);
cursor:pointer;
font-family:Roboto,sans-serif;
font-size:16px;
font-weight:400;
line-height:28px;
text-decoration:none;
transition:opacity .3s}
a:hover{
opacity:.7}
a.lg{
display:block;
font-size:18px;
font-weight:500;
line-height:26px;
text-transform: capitalize;}
@media (min-width:768px){
a.lg{
font-size:22px;
line-height:30px}
}
nav{
background-color:var(--dark);
box-shadow:-3px 0 6px rgba(0,48,70,.3);
height:100%;
max-width:600px;
min-height:600px;
padding:0 36px;
position:fixed;
right:0;
top:0;
transform:translateX(100%);
width:100%;
z-index:100}
@media (min-width:992px){
nav{
padding:0 138px 0 80px}
}
nav .menu-close{
align-items:center;
cursor:pointer;
display: flex;
justify-content:flex-end;
margin-top:45px;
transition:opacity .3s;
width:auto}
nav .nav-inner{
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
nav .menu-close p{
font-weight:500}
nav .menu-close svg{
margin:0 0 2px 10px}
nav .menu-close:hover{
opacity:.7}
nav .menu-items{
margin:20px 0}
nav .menu-items p{
margin-bottom:20px}
nav .menu-items a:not(:last-of-type){
margin-bottom:16px}
nav .menu-footer{
justify-content:space-between;
margin-bottom:45px;
display: flex;}
nav .menu-footer svg{
margin-right:16px;
min-height:42px;
min-width:42px}
nav a,nav p{
color:var(--white)}
nav .flex-left{
width:200px}
nav .flex-right{
cursor:pointer;
text-align:right;
width:96px}
canvas{
bottom:0;
height:100%;
left:0;
position:absolute;
right:0;
top:0;
width:100%}
#hero{
background-color:var(--caribbeangreen);
overflow:hidden;
padding:0;
position:relative}
.hero__header{
display:flex}
#gwclogo{
padding: 10px 0 10px 0;
}
@media(min-width:768px){
#gwclogo{
padding-top: 50px;
} 
}
.hero__inner{
--blob-size:25vw;
width:100%;}
.hero__content{
display:flex;
flex-direction:column;
width:100%}
.hero__content .hero__grid{
height:100%;
align-items: end;}
.hero__scroll-down{
justify-content:center}
.hero__grid{
--image-height:45vh;
display:grid;
padding-top:calc(var(--pad)*.1);
}
.hero__grid-item-top{
display: flex;
flex-direction: column;
}
@media (min-width:1024px){
.hero__grid{
grid-template-columns:1fr 2fr;
padding: 0;}
.hero__grid .hero__grid-image-inner-wrap{
padding-bottom:var(--image-height)}
.hero__grid .hero__grid-image{
position:relative;
margin: -1px;}
.hero__grid>*{
grid-row:1;
position:relative}
}
.hero__grid-item{
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 100%;}
.hero__grid-item p{
font-size: 18px;
text-transform: uppercase;
}
.hero__grid-1{
z-index:1;
padding: 50px 0;}
.hero__grid-image{
align-self:center;}
.hero__squiggle{
display:none;
position:absolute;
right:-12em;
top:-5em;
transform:scale(1.2)}
@media (min-width:1024px){
.hero__squiggle{
display:block}
.hero__grid-1{
padding: 140px 0 0;
}
}
.hero__grid-image-inner{
left:50%;
position:relative;
transform:translateX(-50%)}
@media (min-width:768px){
.hero__grid-image-inner{
min-width:600px;
width:40vw}
}
.hero__grid-image-inner img{
height:100%;
left:0;
position:absolute;
top:0;
width:100%}
.hero__grid-image-inner-wrap{
height:0;
overflow:hidden;
padding-bottom:66.66%;
position:relative}
.hero__scroll-down{
align-items:center;
align-self:center;
background-color:transparent;
border:0;
display:flex;
flex-direction:column;
margin:calc(var(--pad)*.5) 0;
padding:0;
position:relative;
width:auto;
z-index:1;
color: var(--dark)}
@media(min-width:1450px){
.hero__scroll-down{
position: absolute;
bottom: -15px;
}
}
.annual-report-header{
color:var(--black);
text-transform:uppercase;
font-family:Roboto flex;
font-size:var(--size-huge);
font-style:normal;
font-weight:400;
letter-spacing:0;
line-height:90%;
text-align:left;
white-space:nowrap}
#blob1{
overflow:visible;
top:25%;
}
#blob1,#blob2{
height:auto;
position:absolute;
width:var(--blob-size);
fill:var(--caribbeangreen);
z-index: 5;}
#blob2{
bottom:0;
left:0;
}
#hero .header{
align-items:center;
justify-content:space-between;
margin-bottom:2em;
position:relative}
#hero .header svg{
max-width:90px}
@media (min-width:992px){
#hero .header svg{
max-width:100%}
}
#hero .menu-button{
align-items:center;
cursor:pointer;
display:flex;
font-weight:700;
height:auto;
position:fixed;
right:36px;
top:30px;
transition:opacity .3s;
width:auto;
z-index:10}
@media (min-width:992px){
#hero .menu-button{
right:96px;
}
}
@media (min-width:768px){
#hero .menu-button{
top:60px;
}
}
@media (min-width:1366px){
#hero .menu-button{
right:138px}
}
#hero .menu-button:hover{
opacity:.7}
#hero .bars{
height:auto;
margin:0 0 1px 10px}
#hero .bars>div{
background-color:var(--dark);
height:3px;
width:14px}
#hero .bars>div:first-of-type{
margin-bottom:4px}
.letter__inner{
margin:0 auto;
max-width:950px}
.letter__image{
align-self:center;
flex-shrink:0;
max-width:298px;
position:relative}
@media (min-width:1024px){
.letter__image img{
align-self:flex-start;
max-width:calc(100% + 60px);
margin-top:-25px;
width:22vw;
}
}
.letter__left{
align-items:flex-end;
display:flex;
flex-direction:column}
.letter__left svg{
margin-top:1.5em}
.letter__squiggle{
display:none}
@media (min-width:768px){
.letter__squiggle{
display:block}
}
.letter__content{
grid-gap:1em;
display:grid;
}
@media (min-width:996px){
.letter__content{
grid-gap:5vw;
grid-template-columns:auto 1fr}
.letter__content .letter__left{
grid-column:1;
grid-row:1}
.letter__content .content{
grid-column:2}
}
#letter{
background-color:var(--aliceblue);
position:relative;
z-index:1}
.pixel-letter-top svg{
position: absolute;
width: 16%;
right: 0;
top: 0;
}
.pixel-letter-bottom svg{
position: absolute;
width: 16%;
left: 0;
bottom: 0;
}
.callout{
margin:var(--callout-pad) 0;
text-transform:uppercase}
.callout *{
font-family:robotovf,sans-serif;
font-variation-settings:"wght" var(--font-weight,300)}
#letter .content{
flex-direction:column}
@media (min-width:992px){
#letter .content{
flex-direction:row}
}
#letter .paragraph{
max-width:370px}
@media (min-width:992px){
#letter .paragraph:first-of-type{
margin:0 15px 0 80px}
}
@media (min-width:1366px){
#letter .paragraph:first-of-type{
margin:0 15px 0 160px}
}
@media (min-width:992px){
#letter .paragraph:nth-of-type(2){
margin:225px 80px 0 15px}
}
@media (min-width:1366px){
#letter .paragraph:nth-of-type(2){
margin:225px 160px 0 15px}
}
@media (min-width:992px){
#letter h3:first-of-type{
margin-left:80px}
#letter h3:nth-of-type(2){
margin-left:155px}
}
@media (min-width:992px) and (min-width:1366px){
#letter h3:nth-of-type(2){
margin-left:305px}
}
@media (min-width:992px){
#letter h3:nth-of-type(3){
margin-left:210px}
}
@media (min-width:992px) and (min-width:1366px){
#letter h3:nth-of-type(3){
margin-left:415px}
}
@media (min-width:992px){
#letter h3:nth-of-type(4){
margin-left:115px}
}
@media (min-width:992px) and (min-width:1366px){
#letter h3:nth-of-type(4){
margin-left:180px}
}
@media (min-width:992px){
#letter h3:nth-of-type(5){
margin-left:155px}
}
@media (min-width:992px) and (min-width:1366px){
#letter h3:nth-of-type(5){
margin-left:305px}
}
#letter .signature{
height:auto;
margin-top:2em;
width:224px}
.numbers{
background-color:var(--aliceblue);
}
.numbers .pixel-numbers-bottom img{
position: absolute;
width: 17%;
left: 0;
bottom: -1px;
}
.numbers__blob1,.numbers__blob2{
height:auto;
width:100%}
.numbers__blob1{
max-width:80vw;
min-width:200px}
@media (min-width:320px){
.numbers__blob1{
min-width:calc(60vw + var(--pad))}
}
@media (min-width:520px){
.numbers__blob1{
min-width:calc(40vw + var(--pad))}
}
@media (min-width:1024px){
.numbers__blob1{
min-width:0}
}
.numbers__blob2{
align-self:flex-end;
margin-top:auto;
min-width:30vw;
width:calc(100% + var(--pad))}
.numbers__inner{
overflow:hidden}
.stat__big{
-webkit-text-fill-color:transparent;
-webkit-text-stroke:2px var(--navyblue)}
.stat__big--filled{
font-size:55px}
.stat__big strong{
color:var(--black);
font-weight:700}
.numbers__inner .svg-cake-mobile{
display:none;
}
@media (min-width:1024px){
.numbers__inner{
align-items:stretch;
display:grid;
grid-template-columns:1fr 2fr;
grid-gap:5em}
.numbers__inner .stat-container{
padding:0}
}
@media (max-width:1023px){
.numbers__inner .numbers__image-left-wrap{
display:none;
}
.numbers__inner .svg-cake-mobile{
display:block;
position: absolute;
right: 30px;
top: -30px;
}
}
.stat{
margin:0 auto 25px;
text-align:center;
border:2px solid var(--black);
border-radius: 100px;
padding:10px 50px;
}
@media (min-width:1024px){
.stat{
width:100%}
}
.stat__number{
color:var(--navyblue);
font-size:var(--size-stat-number);
letter-spacing:.05em;
line-height:1.1;
font-weight:700;
}
.stat__number{
font-family:Roboto;
font-style:normal;
}
.stat__explainer{
font-family:Roboto flex;
font-style:normal;
}
.stat__explainer{
font-size:20px;
font-weight:100;
letter-spacing:0;
line-height:28px;
margin:0 auto;
max-width:25em;
}
.work{
--bw:1.8vw;
background-color:var(--navyblue)}
#students-served{
background-color: var(--aliceblue);
}
@media (min-width:1024px){
#students-served .girls-svg{
margin-top:-40px;
margin-right:100px;
}
#numbers .section-heading{
margin-bottom:0;
}
}
.work .pixel-work svg{
position: absolute;
width: 8%;
right:0;
top:-1px;
}
#work .section-heading{
color:var(--white);
margin-bottom:30px;
}
#work #cursor-svg{
margin: -30px 0 0 120px;
}
#partners h3{
color:var(--black);
font-family:Roboto flex,sans-serif;
font-size:32px;
line-height:44px;
margin-bottom: 15px;
}
#partners .work h3,.work #partners h3,.work .h3,.work .wave-heading{
max-width:100%}
#partners .work h3 div:last-child,.work #partners h3 div:last-child,.work .wave-heading div:last-child{
margin-left:calc(var(--pad))}
#partners .work__map h3 div:nth-child(2),.work__map #partners h3 div:nth-child(2),.work__map .h3 div:nth-child(2),.work__map .wave-heading div:nth-child(2){
margin-left:calc(var(--pad)*1.4)}
#partners .work__map h3 div:nth-child(3),.work__map #partners h3 div:nth-child(3),.work__map .h3 div:nth-child(3),.work__map .wave-heading div:nth-child(3){
margin-left:calc(var(--pad)*.45)}
.work__map .subheading{
margin-top:16px;
max-width:10em}
.work__charts{
--chart-pad:var(--pad);
grid-row-gap:calc(var(--pad)*.8);
display:grid;
margin-top:calc(var(--vpad)*0.2)}
.work__charts dt{
text-transform:uppercase}
.work__charts h3+p{
margin-left:var(--chart-pad)}
.work__grid p{
margin:2em 0;
color:var(--white)}
@media (min-width:1024px){
.work__grid{
grid-gap:var(--pad);
display:grid;
grid-template-columns:4fr 5fr;
margin-right:10%;
}
.work__grid .work__heading{
grid-column:1/-1}
.work__grid p{
margin-top:0;
max-width:25em}
}
#students-reached{
background-color: var(--caribbeangreen);
}
.pixel-map-bottom svg{
position: absolute;
width:16%;
bottom: 0;
right:0;
}
#students-reached .section-heading{
color:var(--white);
margin-bottom:30px;
max-width: 17em;
}
#students-reached .section-heading b{
font-weight: 700;
font-family: 'Roboto';
}
.countries-title{
font-size: 30px;
max-width: 25em;
line-height: 35px;
padding: 25px 0;
color: var(--white);
margin: 0;
}
.students-reached-grid{
column-count: 2;
}
@media(min-width:768px){
.students-reached-grid{
max-width: 60em;
display: grid;
grid-template-columns:2fr 2fr 2fr 2fr 2fr;
}
}
.students-reached-grid p {
color: var(--white);
margin: 0;
font-size: 18px;
}
.pixel-students svg{
position: absolute;
width:32%;
top:-1px;
right:0; 
}
.work__stats{
grid-row-gap:var(--pad);
display:grid}
@media (min-width:1024px){
.work__stats{
grid-column-gap:2rem;
grid-template-columns:repeat(3,1fr)
}
}
.work__stats li{
text-transform:uppercase}
.work__stats .work__stats_program{
color:var(--navyblue);
margin:10px 0;
}
.work__stats li p:first-child,.work__stats li p:nth-child(4){
color:var(--black);
margin:0}
.work__stats li p:nth-child(3){
color:inherit;
margin:0}
#work .graph svg{
width:100%}
#work .callout{
margin:var(--callout-pad) 0 0}
#work h3{
color:var(--white);
}
@media (min-width:992px){
#work .content{
align-items:flex-end}
}
#work .graph-1 .content{
flex-direction:column}
@media (min-width:992px){
#work .graph-1 .content{
flex-direction:row}
}
#work .graph-1 dd{
color:#0d38d3}
@media (min-width:992px){
#work .graph-1 h1{
margin:40px 0 0}
}
@media (min-width:1366px){
#work .graph-1 h1{
margin:40px 0 0 80px}
}
#work .graph-2 .content{
flex-direction:column}
@media (min-width:992px){
#work .graph-2 .content{
flex-direction:row}
}
#work .graph-2 h1{
color:#fa7816}
#work .graph-2 h4{
margin:40px 0 10px}
#work .g2-bar{
cursor:pointer}
#work select{
background-color:var(--dark);
color:#fff;
font-size:16px;
font-weight:700;
padding:10px;
width:160px}
.school_grade_programming{
background-color: var(--aliceblue);
}
.school_grade_programming .inner{
padding: var(--pad);
padding-bottom: 0;
}
.pixel-school-grade svg{
position: absolute;
z-index: 1;
}
.pixel-school-grade svg#pixel-map-bottom{
width: 32%;
left: 0;
top: -1px;
}
.pixel-school-grade svg#pixel-school-top{
width: 24%;
right: 0;
top:0;
}
.pixel-school-grade svg#pixel-school-bottom{
width: 16%;
right: 0;
bottom:0;
}
.school_grade_programming .section-heading{
color:var(--neonpink);
position: relative;
}
.school_grade_programming .gwc-pink-svg{
transform: rotate(8deg);
margin-top:10px;
}
@media(min-width:1024px){
.school_grade_programming .gwc-pink-svg{
position: absolute;
right: 40%;
top: -100%;
margin:0;
}
}
.school_grade_grid img{
width:23em;
margin-bottom: 10px;
}
.school_grade_grid{
display:grid;
grid-template-columns: 33.33% 45%;
margin-bottom: 50px;
grid-gap: 1em;
}
@media (max-width:1024px){
.school_grade_grid{
display: block;
}
}
.school_grade_title{
color:var(--neonpink);
font-size: 26px;
line-height: 30px;
margin-bottom: 20px;
text-transform: uppercase;
}
.career_outcome_title{
color:var(--navyblue);
margin-bottom: 20px;
}
.short_term_outcomes_grid-1, .short_term_outcomes_grid-2{
display:flex;
flex-direction: column;
}
.short_term_outcomes_left{
margin-right: 55px;
}
.short_term_outcomes_grid-1 svg{
padding-top: 30px;
}
@media(min-width:1024px){
.short_term_outcomes_grid-1{
display:grid;
grid-template-columns: 24% 60%;
}
.short_term_outcomes_grid-2{
display: grid;
grid-template-columns: 24% 40%;
margin-top:30px;
}
}
.careers .pixel-career-top{
width:100%;
height: var(--pad);
background-color: var(--navyblue);
}
.careers .section-heading{
color:var(--navyblue);
position: relative;}
.careers .careers-svg{
position:absolute;
right: 20%;
bottom: -9vw;
width: 15vw;
z-index: 1;
}
@media(min-width:1024px){
.careers .equity-svg{
position:absolute;
top:-40px;
right:150px;
}
}
.careers{
background-color:var(--aliceblue);
padding-top:0}
.careers .inner{
padding-top: var(--pad);
}
.careers-grid{
display:flex;
flex-direction:column;
}
.careers-grid p{
max-width:600px}
.careers__blob-right{
max-width:25vw;
position:absolute;
right:0;
top:0}
.careers__blob-left{
bottom:0;
left:0;
max-width:25vw;
position:absolute}
.careers-grid__item{
display:flex;
flex-direction:column;
align-items:start;
margin-bottom:50px;
}
.careers-grid__item.reversed_grid_item{
justify-content:center;
}
@media(max-width:767px){
.careers-grid__item.reversed_grid_item{
flex-direction:column-reverse;
}
}
.careers-grid__item .h3>div:nth-child(2),.careers-grid__item .wave-heading>div:nth-child(2){
padding-left:1.25em}
.careers-grid__item p{
margin-top:1rem}
.careers-grid__item h3{
font-weight:400;
color:var(--navyblue)}
@media (min-width:768px){
.careers-grid__item{
grid-gap:1.25em;
display:flex;
flex-direction:row;
}
.careers-grid__item img{
max-width:25%;
}
.careers-grid__item p{
grid-column:2;
grid-row:2}
}
#alumni{
background-color: var(--caribbeangreen);
}
.pixel-alumni-bottom svg{
position: absolute;
bottom:0;
}
.pixel-alumni-bottom #pixel-alumni-left{
left:0;
width:8%;
}
.pixel-alumni-bottom #pixel-alumni-right{
right:0;
width:32%;
}
.alumni-grid{
display:flex;
flex-direction:column;
}
.alumni-grid__item{
display:flex;
flex-direction:column;
align-items:start;
}
.alumni-grid__item:not(:last-child){
margin-bottom:50px;
}
.alumni-video{
max-width:1200px;
width:50%}
.pixel-alumni svg{
position: absolute;
width: 40%;
right: 0;
top: -1px;
}
@media(max-width:768px){
.alumni-grid__item.reversed_grid_item{
flex-direction:column-reverse;
}
.alumni-video.youtube-embed{
width: 100%;
padding: 0;
margin-top:2rem;
} 
}
@media (min-width:1024px){
.alumni-grid__item{
grid-gap:1.25em;
display:flex;
flex-direction:row;
}
.alumni-grid__item img{
max-width:45%;
}
.alumni-grid p{
max-width:400px}
}
.alumni-grid .alumni_info{
border-radius: 50px;
border: 2px solid var(--dark);
text-align: center;
padding: 10px 15px;
margin-top: 20px;
font-weight: 700;
font-family: Roboto flex;
font-size:18px;
line-height:28px;
}
.alumni-grid .alumni_info .alumni_name{
font-size:22px;
}
#brand-campaigns{
background-color: var(--neonpink);
}
.pixel-campaigns-top svg{
position: absolute;
right:0;
top:0;
width: 32%;
}
.brand_campaigns .section-heading {
color: var(--white);
}
.campaigns-grid__item h3 {
font-weight: 400;
color: var(--white);
}
.campaigns-grid__item p{
color:var(--white);
margin-top:0.5rem;
}
.campaigns-grid__item a{
color:var(--white);
font-weight:400;
text-decoration: underline;
}
.campaigns-grid{
display:flex;
flex-direction:column;
}
.campaigns-grid__item{
display:flex;
flex-direction:column;
align-items:start;
}
.campaigns-grid__item_right{
width:100%;
}
@media (min-width:1024px){
.campaigns-grid__item_right{
text-align: center;
}
.campaigns-grid__item{
grid-gap:1.25em;
display: grid;
grid-template-columns: 1fr 2fr;
}
.campaigns-grid__item img{
max-width:60%;
margin: 0 auto;
}
.campaign_stats_item p{
max-width: 100px;
line-height: 20px;
}
.campaign_stats{
display: flex;
grid-gap: 1.25em;
justify-content: center;
}
}
@media (max-width:1023px){
.campaign_stats_item {
margin: 0.5rem 0;
flex-direction: row;
display: flex;
align-items: baseline;
}
.campaign_stats h3{
width:100px;
}
.campaign_stats_item br{
content: " ";
display: inline;
}
.campaign_stats_item br::after{
content: " ";
}
}
#celebration {
background-color: var(--aliceblue);
padding-bottom: 10px;
}
@media(min-width:996px){
#celebration {
padding-top: calc(var(--vpad)*0.3);
padding-bottom: 0;
}
}
.pixel-celebration svg{
position: absolute;
top:0;
width:8%;
margin-top:-1px;
}
.pixel-celebration #pixel-celebration-top-left{
left:0;
}
.pixel-celebration #pixel-celebration-top-right{
right:0;
}
#celebration .section-heading{
color:var(--navyblue);
max-width: 100%;
margin: 0 auto 40px;
}
.celebration_video_block .celebration_video{
max-width: 1200px;
width: 60%;
margin: 20px auto 0;
}
.celebration_video > img {
width:250px;
margin-bottom: 50px;
}
@media(max-width:1023px){
.celebration_video_block .celebration_video{
width: 100%;
padding: 0;
}
}
@media(min-width:1024px) {
.celebration_video > img {
position: absolute;
top:35%;
left: -100px;
z-index: 1;
}
}
.pixel-codefair svg{
position: absolute;
right:0;
top:0;
width:16%;
}
#codefair{
background-color: var(--aliceblue);
}
#codefair .section-heading{
color:var(--navyblue)
}
.codefair-grid{
display:flex;
flex-direction:column;
}
.codefair-grid__item{
display:flex;
flex-direction:column;
align-items:start;
}
.codefair-grid__item.codefair_images_item > div:not(:first-child):not(:last-child){
width:100%;
margin-top: 10px;
}
#codefair .code_icon{
width: 14vw;
right: 9%;
position: absolute;
bottom: -5vw;
z-index: 1;
}
@media (min-width:1024px){
.codefair-grid__item{
grid-gap:3em;
display: grid;
}
.codefair-grid__item:first-child{
grid-template-columns: 1fr 0 2fr 0;
}
.codefair-grid__item.codefair_images_item{
grid-template-columns: 0.8fr 1.5fr 1.5fr 0.5fr;
margin-top: 3em;
}
.codefair-grid__item img{
max-width: 400px;
}
}
#codefair-partners {
background-color: var(--navyblue);
}
.codefair_partners .inner{
padding-top:var(--pad);
}
.pixel-codefair-partners svg{
position: absolute;
top:0;
}
#pixel-codefair-partners-top-left{
width:8%;
left:16%;
}
#pixel-codefair-partners-top-right{
width:16%;
right:8%;
}
.pixel-codefair-partners-bottom svg{
position: absolute;
width:8%;
left:0;
bottom:0;
}
.codefair_partners .section-heading, .codefair_partners p{
color:var(--white);
}
@media(min-width:1024px) {
#codefair-partners {
padding-bottom: calc(var(--vpad)*0.5);
}
.codefair_partners .flex{
display: grid;
grid-template-columns: 2fr 2fr 3fr 1fr;
grid-gap: 2em;
}
}
@media(max-width:1023px) {
.codefair_partners .flex div:last-child{
margin-top:1em;
} 
}
#honor_founder{
background-color: var(--navyblue);
padding-top: calc(var(--vpad)*0.5);
margin-top: -1px;
}
.pixel-honor svg{
position:absolute;
bottom: -1px;
right:0;
width:8%;
z-index: 1;
}
.honor_founder .section-heading{
color:var(--white);
max-width: 50%;
}
.honor_founder p{
color:var(--white);
}
.honor_founder .honor_found-grid{
display:flex;
flex-direction:column;
}
.honor_founder .honor_found-grid img{
width: 600px;
}
@media (min-width:1024px){
.honor_founder .honor_found-grid{
grid-gap:6em;
display: grid;
grid-template-columns: 1.5fr 3fr;
}
.honor_founder p{
margin-top: 5em;
}
}
#reshma-video{
background-color: var(--navyblue);
padding: 0;
margin-top: -1px
}
.reshma-video .inner{
background-color: var(--aliceblue);
padding-top: var(--vpad);
padding-bottom: calc(var(--vpad)*.5);
margin-left: 8%;
margin-bottom: -1px;
}
.reshma_video_block{
margin: 0 auto;
max-width: 900px;
}
.reshma-video_img__item img{
width: 16%;
position: absolute;
top: calc(var(--vpad)*-0.5);
left: 48%;
z-index: 1;
}
.wave-heading--spring div:last-child{
margin-left:calc(var(--pad)*.5)}
@media (min-width:1024px){
.partners__content{
grid-column-gap:calc(var(--pad)*.5);
display:grid;
grid-template-columns:1fr 1fr}
}
.author{
color:var(--white);
font-family:Roboto flex;
font-size:20px;
letter-spacing:0;
line-height:1;
margin-top:.5em}
#partners{
background-color:var(--aliceblue)}
#partners p+p{
margin-top:0}
#partners .content{
flex-direction:column;
margin-top:60px}
@media (min-width:992px){
#partners .content{
flex-direction:row;
margin-top:0}
}
#partners .partner-list{
position:relative}
#partners .partner-list .partner>.flex{
flex-direction:column}
@media (min-width:450px){
#partners .partner-list .partner>.flex{
flex-direction:row}
}
#partners .partner{
display:flex;
flex-direction:column;
margin-bottom:60px}
#partners .flex-left,#partners .flex-right{
margin-right:30px;
max-width:290px}
#partners .quotes{
display:flex;
flex-direction:column;
max-width:450px;
position:-webkit-sticky;
position:sticky;
top:calc(var(--pad)*0.25);
}
@media(min-width:1024px){
#partners .quotes{
height:150vh;
}
}
#partners .quotes_block{
padding: 30px;
background-color: var(--purple);
}
#partners .quote + div{
text-align:right;
}
#partners .quotes img{
margin:0 auto;
}
#partners .quote{
font-family:Roboto flex;
color: var(--white);
font-size:var(--size-quote);
font-style:normal;
letter-spacing:0;
line-height:1.6;
}
#partners .quotes .title{
color:var(--white);
font-family: Roboto flex;
line-height: 20px;
margin: 5px 0;
}
#partners .quote_start span{
display: inline-block;
width:10px;
height: 16px;
margin:-5px 5px 5px -2px;
background-color: var(--white);
}
.vision{
background-color:var(--navyblue);
overflow:hidden;
position:relative}
.pixel-vision svg{
position: absolute;
top:-1px;
right:0;
width:40%;
z-index: 10;
}
.vision .section-heading{
color:var(--white);
}
.vision img{
width:120vh;
margin:0 auto;
}
.vision .vision_message{
margin-top: 50px;
}
.vision .vision_message p{
color:var(--white);
font-family: 'Roboto Flex',sans-serif;
font-size: 16px;
line-height: 25px;
margin-block-end: 1em;
}
.vision .vision_message p+p{
margin-top: 1em;
}
@media (min-width:1024px){
.vision .vision_message{
column-count:3;
column-gap:80px;
}
}
.vision__blob-right{
max-width:25vw;
position:absolute;
right:0;
top:0;
z-index:1}
.vision__blob-left{
bottom:0;
left:0;
max-width:25vw;
position:absolute}
@media (min-width:768px){
.vision__quote>div:first-child{
margin-left:var(--pad)}
.vision__quote>div:nth-child(2){
margin-left:calc(var(--pad)*3)}
.vision__quote>div:nth-child(3){
margin-left:calc(var(--pad)*2.3)}
.vision__quote>div:nth-child(4){
margin-left:calc(var(--pad)*2.5)}
.vision__quote>div:nth-child(5){
margin-left:calc(var(--pad)*4.25)}
.vision__quote>div:nth-child(6){
margin-left:calc(var(--pad)*3)}
.vision__quote>div:nth-child(7){
margin-left:calc(var(--pad)*5)}
}
.vision__content{
grid-gap:var(--pad);
display:grid}
@media (min-width:1024px){
.vision__content{
grid-template-columns:1fr 1fr;
padding-left:var(--pad)}
}
.vision__content-text{
display:flex}
.vision__content-text svg{
display:none;
margin-top:calc(var(--pad)*-2)}
@media (min-width:768px){
.vision__content-text svg{
display:block}
}
.financial{
background-color:var(--navyblue);
padding: 0;
margin-top:-1px;
}
.financial .inner{
background: var(--aliceblue);
padding: 50px 0 50px var(--pad);
margin-right: 60px;
margin-bottom:-1px;
}
.financial .pixel-financial svg{
width:16%;
}
@media(max-width:767px){
.pixel-financial{
background: var(--aliceblue);
display: flex;
justify-content: end;
margin-bottom: -1px;
}
.financial .inner{
margin-right: 0;
padding: 30px var(--pad);
}
}
@media(min-width:768px){
.financial .pixel-financial svg{
position: absolute;
bottom: -1px;
right: 59px;
} 
}
@media(min-width:1024px){
.financial .inner{
margin-right: 100px;
}
.financial .pixel-financial svg{
/* width: 12em; */
right: 99px;
}
}
.financial-items{
align-items:flex-end;
margin:0 auto;
max-width:800px}
.financial-items,.financial-items li{
display:flex;
flex-direction:column;
width:100%}
.financial-items li{
padding:2rem 0}
.financial-item{
background-color:transparent;
border:0;
display:flex;
font:inherit;
justify-content:flex-end;
margin:0;
padding:0;
text-align:left;
border: 2px solid var(--dark);
border-radius: 100px;
padding: 10px 25px;
}
.financial-item:hover{
background-color:var(--navyblue);
}
.financial-item:hover h3{
color:var(--white)}
.financial-item svg{
stroke:var(--navyblue)}
.financial-item:hover svg{
stroke:var(--white)}
.financial-item__heading{
display:flex;
align-items:center;
}
.financial-item__heading svg{
margin-right:0.5vw}
.financial-item__heading-text span{
font-weight:400}
.financial-item__heading-text div:nth-child(2){
margin-left:10vw}
.financial-content{
height:0;
overflow:hidden;
max-width:600px;
margin-bottom:40px;
margin-left:1.5rem;
}
.financial-table{
background-color:var(--aliceblue);
font-family:Roboto;
margin-top:1em;
width:100%}
.financial-table td,.financial-table th{
padding:.5vw;
border:2px solid var(--dark);
text-align:left;
}
tr.financial_empty_row td {
border: none;
background: var(--aliceblue);
}
.financial-table td:not(:first-child),.financial-table th:not(:first-child){
text-align:right}
.financial-table__header{
background-color:var(--caribbeangreen);
color:var(--dark);
font-size:18px}
.financial-table__header td,.financial-table__header th{
font-weight:700;
font-weight:500;
padding:.6rem;
text-transform:uppercase;
vertical-align:middle}
.financial-table__total td,.financial-table__total th{
font-weight:700;
}
.download-link{
display:flex;
justify-content:center;
align-items:center;
}
.download-link svg{
margin-right:0.5vw}
.download-link__text>span{
font-weight:400}
.contact{
font-family:Roboto;
font-size:16px;
font-weight:300;
letter-spacing:0;
line-height:26px}
.contact a{
overflow:auto;
width:100%}
.contact__address{
color:var(--white);
margin-top:3em!important}
#download{
background-color:var(--navyblue);
padding-bottom:60px}
#download a,#download p{
color:#fff}
#download .opaque{
font-weight:700;
opacity:1}
#download a,#download img,#download p{
display:inline-block}
#download .callout h3{
position:relative}
#download .contact>div:not(:first-of-type){
margin-top:20px}
@media (min-width:992px){
#download .contact>div:not(:first-of-type){
margin-top:0}
}
#download footer{
align-items:baseline;
flex-direction:column;
}
@media (min-width:992px){
#download footer{
flex-direction:row;
justify-content: space-between;
}
}
#download footer .social{
order:1;
width:auto;
margin-top: 60px;
margin-bottom:15px;
}
#download footer .social p{
text-transform: uppercase;
margin-right: 30px;
font-weight:700;
}
@media (min-width:992px){
#download footer .social{
order:2;
margin-bottom:0;
}
}
#download footer .social a:not(:last-of-type){
margin-right:30px}
#download footer a{
margin:0;
order:3}
@media (min-width:992px){
#download footer a{
margin:0 0 0 auto}
}
#download footer .back_to_gwc{
padding: 5px 10px;
border: 1px solid var(--white);
border-radius: 20px;
}
.media{
padding-top: calc(var(--pad)*2);
padding-bottom: 0;
background-color: var(--aliceblue);
}
.media svg{
max-width:100%}
.media__grid-row{
display:grid}
.media__grid-row .media_cell{
margin-top:20px}
.media__grid-row .media_cell a {
border-radius: 40px;
border: 2px solid var(--black);
margin-top: 20px;
line-height: 20px;
display: flex;
height: 90px;
text-align: center;
align-items: center;
justify-content: center;
text-transform: capitalize;
}
.media__grid-row .media_cell a:hover{
background-color: var(--neonpink);
border-color: var(--white);
color: var(--white);
cursor: pointer;
}
.media .pixel-media svg{
position:absolute;
top:0;
}
#pixel-media-top-left{
left:8%;
width: 16%;
}
#pixel-media-top-right{
right:0;
width: 16%;
}
.pixel-media-bottom{
position: relative;
margin-top: calc(var(--vpad)*0.5);
}
#pixel-media-bottom-right{
position:absolute;
bottom: 0;
right:0;
width:8%;
}
#pixel-media-line{
width: 100%;
height: 8vw;
background-color: var(--neonpink);
}
@media (min-width:1024px){
.media__grid-row{
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 6em;}
.media__grid-row .media_cell:nth-child(2n) img{
margin-top: -50%;
}
.media__grid-row .media_cursor{
width: 50%;
margin-top: 40%;
}
}
@media (max-width:1024px){
.media__grid-row .media_cursor{
width: 50%;
margin: 20px auto;}
}
.media__grid-row-heading{
background-color:var(--color);
color:var(--white);
display:inline-flex;
font-family:Roboto;
font-size:28px;
font-weight:700;
justify-content:center;
letter-spacing:0;
line-height:1.2;
margin-left:auto;
min-width:250px;
padding:.25em 1em;
text-align:center;
text-transform:uppercase;
transform:translateY(-50%)}
.media__grid-row-description{
font-family:Roboto;
font-size:16px;
font-weight:500;
letter-spacing:0;
line-height:26px;
margin-top:1em;
max-width:23em}
.media__grid-row-image{
border:8px solid transparent;
margin-right:calc(var(--pad)*.5);
transition:border-color .3s}
.hero__scroll-down,.stat,.work__charts dt,.work__map .subheading,.work__stats li p:first-child,.work__stats li p:nth-child(4){
font-family:Roboto;
font-size:20px;
font-style:normal;
font-weight:700;
letter-spacing:0;
line-height:32px}
.stat__big,.stat__big--filled,p.stat__big--filled{
font-family:Roboto flex,sans-serif;
font-size:var(--size-stat-number);
font-weight:700;
line-height:48px}
.intro-paragraph{
max-width:650px}
@media (min-width:400px){
.intro-paragraph{
padding-right:var(--pad)}
}
.youtube-embed{
padding:0 0 var(--video-pad) var(--video-pad);
position:relative}
.youtube-embed iframe{
height:100%;
position:absolute;
width:100%}
.iframe-wrap{
height:0;
padding-bottom:62.5%;
position:relative}
.swal2-popup{
background:linear-gradient(135deg,#e4f9ff,#fdefee,#d6f9f4,#fff9e2)!important}
.swal2-popup .swal2-header{
display:none!important}
.swal2-popup .swal2-content{
padding:0;
text-align:auto}
.swal2-popup .swal2-actions{
left:50%;
margin:0!important;
position:absolute;
transform:translateX(-50%);
z-index:0!important}
.swal2-popup .swal2-actions button.swal2-confirm{
display:none!important}
.gradient-border{
position:relative}
.gradient-border img{
position:relative;
z-index:1}
.gradient-border:after,.gradient-border:before{
-webkit-animation:hue 2s linear infinite;
animation:hue 2s linear infinite;
background:none;
background-size:320%;
content:"";
height:calc(100% + .8em);
left:-.4em;
position:absolute;
top:-.4em;
width:calc(100% + .8em)}
#partners .partner .flex.column p{
padding-left:15px;
text-indent:-15px}
@-webkit-keyframes hue{
0%{
filter:hue-rotate(0deg)}
to{
filter:hue-rotate(1turn)}
}
@keyframes hue{
0%{
filter:hue-rotate(0deg)}
to{
filter:hue-rotate(1turn)}
}
.bold{
font-weight:700!important}