@charset "utf-8";
@font-face {
  font-family: 'icon';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/icons.woff2') format('woff2'),
       url('../fonts/icons.woff') format('woff');
}

html{-webkit-text-size-adjust:100%;/*height:100%;overflow-y:scroll;*/font-size:22px;line-height:1.4;font-family: 'aktiv-grotesk', sans-serif;font-weight:100}
@media only screen and (max-width: 576px){html{font-size:16px}.mobile-hidden{display:none}}
body{/*height:100%;*/margin:0;background:#303E49 url(../img/indicator-loader.gif) no-repeat center 50vh;color:#303E49;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
main{display:block;overflow-x:hidden}
hr{box-sizing:content-box;overflow:visible;display:block;height:1px;border:0;border-top:1px solid #fff;margin:1em 0;padding:0}
pre{font-family:monospace, monospace;font-size:1em}

a{background-color:transparent;color:#303E49;text-decoration:none}
a.underline{/*text-decoration:underline;*/border-bottom: 1px solid #303E49;}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b, strong{font-weight:800}
code, kbd, samp{font-family:monospace, monospace;font-size:1em}
small{font-size:80%}
sub, sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}
sup{top:-0.5em}
img{border-style:none;height:auto;max-width:100%}
figure{margin:0}
button, input, optgroup, select, textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
button, input{overflow:visible}
button, select{text-transform:none}
button, [type="button"], [type="reset"], [type="submit"]{-webkit-appearance:button}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:0;margin:0;padding:0}
legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
progress{vertical-align:baseline}
textarea{overflow:auto;resize:vertical}
[type="checkbox"], [type="radio"]{box-sizing:border-box;padding:0}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button{height:auto}
[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}
[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
details{display:block}
summary{display:list-item}
template{display:none}
.hidden, [hidden],.no-js .no-js-hidden,.js .js-hidden{display:none !important}
audio, canvas, iframe, img, svg, video{vertical-align:middle}
::-moz-selection{background:#b3d4fc;text-shadow:none}
::selection{background:#b3d4fc;text-shadow:none}

.sr-only{border:0;clip:rect(0, 0, 0, 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
.sr-only.focusable:active, .sr-only.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;white-space:inherit;width:auto}
.invisible{visibility:hidden}
.clearfix::before, .clearfix::after{content:" ";display:table}
.clearfix::after{clear:both}
.nowrap{white-space: nowrap;}
#skiptocontent a{position:absolute;top:-45px;padding:6px;left:0;color:#fff;border-right:1px solid #fff;border-bottom:1px solid #fff;border-bottom-right-radius:8px;background:transparent;-webkit-transition:top 1s ease-out,background 1s linear;transition:top 1s ease-out,background 1s linear;z-index:100}#skiptocontent a:focus{position:absolute;left:0;top:0;background:#BF1722;outline:0;-webkit-transition:top .1s ease-in,background .5s linear;transition:top .1s ease-in,background .5s linear}



        /* Fix issue on mobile browser where scroll breaks  */
        .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan, 
        .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
            touch-action: unset;
        }


        .mask2 {
        -webkit-mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%);
        mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.4) 50%);
        }


#features{overflow-x:hidden}

.contain{box-sizing:border-box;padding:1em;width:100%;max-width:1200px;margin:0 auto}

#top-header{position:fixed;top:0;left:0;width:100%;z-index:100;background:#303E49;}

#titles{padding:16px 0 16px 16px}
#project-title{font-size:.75em;color:#fff;padding:0;margin:0;letter-spacing:.01em;transition:font-size .5s;font-weight:100;}
#section-title{font-size:1.2em;color:#fff;padding:0;margin:0;font-weight:400;color:#9EE2BA}

#main-nav{background:#303E49;color:#fff;}

#menu-trigger,#menu-trigger .icon{margin:0;padding:0;height:56px;cursor:pointer;}
#menu-trigger{min-width:53px;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border-radius:0;border:none;background:0 0;color:#000;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);float:right;margin:5px 5px 0 0}
#menu-trigger .label{display:none}
#menu-trigger .icon{top:0;right:0;overflow:hidden;width:53px;font-size:0;text-indent:-9999px}
#menu-trigger .icon span{display:block;position:absolute;top:26px;left:10px;right:10px;height:2px;background:#fff;-webkit-transition:background 0s .3s;transition:background 0s .3s}
#menu-trigger .icon span::after,#menu-trigger .icon span::before{position:absolute;display:block;left:0;height:2px;background-color:#fff;content:"";-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-delay:.3s,0s;transition-delay:.3s,0s;width:33px}
#menu-trigger .icon span::before{top:-10px;-webkit-transition-property:top,-webkit-transform;transition-property:top,transform}
#menu-trigger .icon span::after{bottom:-10px;-webkit-transition-property:bottom,-webkit-transform;transition-property:bottom,transform}
.is-active #menu-trigger .icon span{background:0 0!important;height:3px}
.is-active #menu-trigger .icon span::before{top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);height:2px}
.is-active #menu-trigger .icon span::after{bottom:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}
.is-active #menu-trigger .icon span::after,.is-active #menu-trigger .icon span::before{-webkit-transition-delay:0s,.3s;transition-delay:0s,.3s;}
#menu-trigger:focus { /*outline: 1px dotted #fff;*/outline:none }

#main-menu{list-style:none;margin:66px 0 0 0;padding:0;
    transform: translateX(100%);    position: absolute;
    width: 100%;
    transition: transform 250ms ease-in;background:#303E49;border-bottom: 2px solid #fff;}
.is-active #main-menu {transform: translateX(0);}
#main-menu li{margin:0;padding:.5em 1em;border-top: 1px solid #fff;}
#main-menu li a{font-weight:bold;color:#fff;text-decoration:none;font-size:.8em;letter-spacing:.05em;}
#main-menu li.active a{color:#9EE2BA}

.bkg-img{position:relative}
.bkg{width:100%;height:100%;object-fit:cover}
.overlay{position:absolute;width:100%;top:0}

#fading-img{position:fixed;width:100%;height:100vh;z-index:5}
#fading-img img{position:absolute;top:0;width:100%;height:100%;object-fit:cover}

.step{min-height:100vh;}
/*.step.content{min-height:auto}*/

.step h2{font-weight:100;font-size:3em;}
.step h3{margin:0;display:inline-block;padding:0}
.step p{margin:0;display:inline-block;padding:0}

/*title*/
#content-0{background:transparent;min-height:auto;}
#title-wrap{background:#303E49;color:#fff;padding:10vh 0 10vh;}
#title-wrap h1,
#title-wrap h3{font-size:2em;font-weight:100}
#title-wrap h1{line-height:1.1}
#title-wrap h2{font-size:1.3em;font-weight:700}
#title-wrap h3{margin-top:5vh;color:#9EE2BA}
.title-step{background:#303E49;height:46px;width:33%;float:right;padding:0;box-sizing:border-box}

/*intro*/
#content-1{background:#FF8289;color:#fff;display:flex;flex-direction:column;justify-content:center;}
#content-1 p{font-size:1.5em}

/*goals*/
#content-2{background:#00AEAA;}
#content-2 img{margin:1em auto}
#content-2 .txt{margin-bottom:2em}

/*covid*/
#content-3{background:#303E49;color:#fff;display:flex;flex-direction:column;justify-content:center;}
#content-3 p{font-size:1.5em}
#content-3 p+p{margin-top:2em}
#content-3a{background:#fff;min-height:auto;color:#303E49}
#content-3a .overlay{position:static}

/*proposed*/ #content-4{background:#FFF;min-height:auto;}

/*greenwich*/
#content-4a1,
#content-4a2,
#content-4a3,
#content-4a4,
#content-4a5{background:transparent}
#content4aimg4{object-position:40% 50%}
#content4aimg5{object-position:20% 50%}

/*houston*/
#content-4b1,
#content-4b2,
#content-4b3{background:transparent}
#content4bimg1{object-position:30% 50%}
#content4bimg2{object-position:30% 50%;transition:opacity 1s, object-position .5s}

/*hudson*/
#content-4c1,
#content-4c2,
#content-4c3,
#content-4c4,
#content-4c5{background:transparent}
#content4cimg3{object-position:30% 50%}
#content4cimg4{object-position:30% 50%;transition:opacity 1s, object-position .5s}

.fading-slide{min-height:100vh;display:flex;flex-direction:column;justify-content:center;}

/*impact*/
#content-5{background:#303E49;color:#fff;display:flex;flex-direction:column;justify-content:center;}
#content-5 p{font-size:1.5em;}
#content-5 a{color:#fff}
#content-5 a.underline{border-bottom-color:#fff;}
#content-5 p+p{margin-top:2em}
#content-5a{background:#FF8289;color:#fff;}
#content-5a p{font-size:1.5em;margin:3em 0 1em;}
.callouts div.col{margin:2em 0}
.callouts strong{background:#303E49;display:inline-block;padding:0 .5em;}
.callouts span.number{color:#fff;/*white-space:nowrap;*/background:#303E49;display:inline-block;font-size:4em;padding:0 .1em;line-height:1.2;font-weight:100}
.callouts strong:nth-child(1){padding-top:.1em}
.callouts div + strong{padding-bottom:.3em}
#content-5a img{margin:1em 0;}

/*share*/
#content-6{background:#000;color:#fff;min-height:auto;}
#content-6 .overlay{position:static;}
#content-6 p{font-size:1.5em;}
#content-6 a{color:#fff;}
#content-6 a.underline{border-bottom-color:#fff;}

#content-6 .flex-wrap{display:flex;justify-content:space-between;align-items:flex-end}
#content-6 .flex-wrap div + div{text-align:right}

.social{margin:0;padding:0;list-style:none}
.social li{display:inline-block;padding-right:1em}

.social a{vertical-align:text-bottom}
.social a.email{vertical-align:bottom}

.social a::after{font-family:'icon';font-size: 1.3em;}
.social a.email::after{content:'\e900';}
.social a.linkedin::after{content:'\eaca';}
.social a.twitter::after{content:'\ea96'}
.social a.facebook::after{content:'\ea90'}

.social a.instagram::after{content:'\ea92'}
.social a.youtube::after{content:'\ea9d'}

.arrow-up::after{font-family:'icon';font-size: 1.3em;content:'\e901';padding-left:.2em;}

.color1{color:#9EE2BA}
.color2{color:#FFBE9F}
.color3{color:#FF8289}

.title-border{border-left:1em solid #303E49;line-height:1.25;padding:.2em 0}
.title-border h2{background:#303E49;color:#9EE2BA;font-size:2em;display:inline;margin:0;padding:.1em 0}
.title-border h2 span{position:relative;left:-.25em}

#content-2 h2{color:#FFF}

#content-2 h3,
.fading-slide h3,
.lefty .text h3{background:rgba(255,255,255,.8);padding:.5em 1em}

#content-2 p,
#content-3a p,
.fading-slide p,
.lefty .text p{background:rgba(255,255,255,.8);padding:1em}

.fade-bkg-colors{}


.fade-in{opacity:0;transition:opacity 1s;}
.faded{opacity:1}


@media (min-width: 782px){
#features{overflow-x:visible}
  #titles{/*float:left;*/padding:18px 0 0 23px}
  #project-title{font-size:1em;}
  #section-title{font-size:1.4em;}
  
  #main-nav{float:right}
  #menu-trigger{margin:14px 23px 0 0}
  .logo{background:url(https://hudsonsquarebid.org/images/HS-BID.svg) no-repeat;background-size:contain;display:inline-block;width:170px;height:40px;margin:23px 23px 18px 0;box-sizing:border-box}
  #main-menu{transform: translateY(-100%);
    z-index: -1;margin:0;border-bottom:none}
  .is-active #main-menu{transform: translateY(0);}
  #main-menu li a{font-size:.7em}
  
  .flex-wrap{display:flex;justify-content:space-between;align-items:flex-start}
  .flex-wrap div{flex-basis:50%;box-sizing: border-box;}
  .reverse{flex-direction:row-reverse}
  .flex-wrap .img{padding:5em 0 5em 3em;}
  
  .callouts{font-size:.8em}
  .callouts span.number{white-space:nowrap;}

  div.text{width:50%}
  .lefty .callouts{width:50%}
  
  #content-0 h1{width:50%}
  #content-0 h2{width:50%}
  
#title-wrap h1,
#title-wrap h3{font-size:3em;}
#title-wrap h1 span{white-space:nowrap}
#title-wrap h2{font-size:1.6em;}
#title-wrap h3{margin-top:10vh;}
  
  #content-1 .text{width:66%}
  
  #content-2 .flex-wrap{align-items:center}
  
  #content-3 .text{width:66%}
  
  #content-3a .overlay{position:absolute;height:100%;display:flex;flex-direction:column;justify-content:flex-end;}
  #content-3a .overlay .contain{margin-bottom:5vh}
  
#content4aimg4,
#content4aimg5,
#content4bimg1,
#content4bimg2,
#content4cimg3,
#content4cimg4{object-position:center !important}
  
  #content-5 .text{width:66%}
  
  #content-5a .flex-wrap{gap:5%;}
  #content-5a .flex-wrap div{flex-basis:60%;padding-top:0}
  #content-5a .flex-wrap div+div{flex-basis:40%;padding-top:4em}
  #content-5a .flex-wrap .callouts div{padding-top:0}
  
  #content-6 .overlay{position:absolute;height:100%;display:flex;flex-direction:column;justify-content:center;}
  #content-6 p,
  #content-6 ul
  #content-6 .flex-wrap{font-size:2.5em}
  .social a::after{font-size: 2em;}
}
@media (max-width: 782px){.mobile-hidden{display:none}}