body,html{width:100%;height:100%}body{margin:0;font-family:Lato,sans-serif}.wrapper{height:calc(100% - 66px);width:100%;padding-top:66px}#interactive-map{height:100%}header{height:66px;width:100%;background:#fff;font-size:0;z-index:100;overflow:hidden;position:absolute;top:0;padding-left:185px;box-sizing:border-box}header.variation-view #variation-palette-menu{top:0}#logo{height:56px;position:absolute;top:5px;left:5px;padding-left:56px;background:url(playground_icon.4264ade4.svg) no-repeat}header.variation-view #logo{background:url(icon-harlem.48b4bb1d.svg) no-repeat;background-size:auto 100%}header h2{display:inline-block;border-left:2px solid #000;font-size:16px;font-weight:400;vertical-align:middle;margin-left:15px;padding-left:15px}header h2 .composer{display:block}.header-menu{position:absolute;top:66px;transition:top .5s;width:calc(100% - 185px)}.button-group{margin:5px;padding:6px 4px;border-radius:28px;background:#eae1e1;display:inline-block;vertical-align:middle}button{border:none;outline:none;background-color:#fff;color:#000;text-align:center;font-family:Lato,sans-serif}.button-group button{margin:0 2px;z-index:115;position:relative}button.outline{background-color:#eadfdd;border:2px solid #fff}button.outline:hover:enabled{background-color:#87cefa}button.large{width:44px;height:44px;border-radius:22px;font-size:18px;padding:9px 11px 11px;cursor:pointer}#share-button,#variation-info{padding:0}#map-container{width:100%;height:100%;position:relative;overflow:scroll;background-color:#6ad1df}#map-container img{max-width:100%;width:100%;height:auto}.blockPosition{position:absolute;width:5%;right:50%;top:50%;transform:translate(-50%,-50%)}.blockPosition:hover .button-action>img{animation-duration:1s;animation-iteration-count:infinite;animation-name:bounce-7}.cotton-club{top:41%;right:61.5%}.strivers-row{top:31%;right:52.5%;width:7.5%}.abyssinian-baptist-church{top:29%;right:37.5%;width:8%}.national-urban-league{top:43%;right:54%}.schomburg-center{top:42%;right:47%}.augusta-savage-studio-of-arts-and-crafts{top:57%;right:53.5%;width:6%}.home-of-james-reese-europe{top:53.5%;right:42%;width:4%}.the-apollo-theater{top:60%;right:47%;width:5.5%}.james-van-der-zee-portrait-studio{top:64%;right:42%;width:4.5%}.home-of-langston-hughes{top:62%;right:31%}.duke-ellington-statue{top:73.1%;right:37.7%;width:2.5%}.lenox-avenue{top:50%;right:48.5%;width:5.5%}.lenox-avenue .circle-number{left:auto;right:-4px}#map-container .block-hover button img{max-width:none;width:30px}.block-cards .card{display:none;background-color:#fff;pointer-events:none;position:relative}.block-cards .card.active{display:flex;flex-direction:column;max-height:100%;overflow:scroll;pointer-events:all}.block-cards{width:30%;height:calc(100% - 66px);margin-top:66px;display:flex;justify-content:center;flex-direction:column;position:fixed;right:5%;top:0;pointer-events:none;z-index:100}.block-cards .header{display:flex;flex-direction:row;align-items:flex-end;width:100%;padding:10px 50px 0 20px;box-sizing:border-box}.block-cards .header h2{margin:0 10px;font-weight:500;font-size:20px}#map-container .block-cards .header img{width:60px}#map-container .block-cards #duke-ellington-statue .header img{width:30px}.block-cards .card p{padding:0 20px;font-size:14px;color:#414747;line-height:1.5}.block-cards .card .scale-prompt{background:#a907b5;color:#fff;text-align:center;padding:5px}.block-cards button,.popup button{align-self:flex-end;top:10px;right:10px;-webkit-appearance:none;border:none;background:none;font-size:14px;cursor:pointer}.button-action{position:relative;cursor:pointer}.circle-number{background-color:#fff;position:absolute;bottom:-5px;left:-2px;padding:5px;border-radius:100%;width:14px;height:14px;font-size:12px;text-align:center;line-height:14px}.circle-number img{position:absolute;top:0;left:0;display:none}.button-action:hover .circle-number img{display:block}.block-cards video{margin-top:10px}.instrument-picker{position:absolute;top:66px;width:100%;height:calc(100% - 66px);box-sizing:border-box;z-index:80;transition:top .5s}.instrument-picker.hidden{top:-100%}.instrument-picker .title{height:200px;text-align:center;color:#fff;background-color:#a2d9eb;display:flex;align-items:center}.instrument-picker .title h2{display:inline-block;margin:0 auto;padding:30px 0 30px 120px;font-size:20px;text-align:left;background-size:80px 80px;background-position:20px 20px;background-repeat:no-repeat}.instrument-picker .title .composer{display:block;font-size:32px;font-weight:700}.instrument-picker .prompt{height:calc(100% - 260px)}.instrument-picker p{width:600px;margin:0 auto;padding:30px 0;font-size:25px;font-weight:900;text-align:center;color:#fff}.instrument-picker.cardmode .title h2{background-image:url(icon-harlem.48b4bb1d.svg)}.instrument-picker.cardmode{background:#6ad1df}.instrument-picker.cardmode .prompt{background:url(splash.1b40a5f6.svg) bottom no-repeat;background-size:100% auto}#start-button{text-align:center;display:block;margin:0 auto;font-size:16px;padding:18px 40px 18px 60px;text-transform:uppercase;font-weight:700;border-radius:29px;border:none;background-color:hsla(0,0%,100%,.4);background-image:url(play_icon.94a2cb62.svg);background-size:35px 35px;background-position:10px 10px;background-repeat:no-repeat;transform:scale(1);transition:transform .15s;cursor:pointer}#start-button:hover{background-color:#fff}.instrument-picker .credits{height:60px;position:relative}.instrument-picker .credit-logo.left{top:10px;left:10px}.instrument-picker .credit-logo{height:40px;position:absolute}.instrument-picker.cardmode .credits{background:#62b778}.instrument-picker .credit-logo.right{top:10px;right:10px}.popup{position:fixed;width:100%;height:100%;top:0;left:0;right:0;bottom:0;margin:auto;background:transparent;transition:background .5s;z-index:100;pointer-events:none}.popup_inner{position:absolute;width:80%;height:50%;transform:translate(-50%,-50%);top:-100%;left:50%;margin:auto;background:#fff;display:flex;flex-direction:column;padding:10px;border-radius:10px;transition:top .5s}.popup.active{display:block;pointer-events:all;background:rgba(0,0,0,.2)}.popup.active .popup_inner{top:50%}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-20px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}#map-container div button{border-radius:100%;height:40px;width:40px!important;font-weight:900;font-size:24px;padding:0!important;line-height:30px;margin-right:5px}#map-container div button.center{font-size:20px!important}.block-cards .card button,.tools{position:absolute}.tools{z-index:10;padding:10px;left:0;display:flex;align-items:center;justify-content:center}.TransformComponent-module_container__3NwNd{width:100%!important;height:100%!important}@media only screen and (max-width:1024px){#map-container-points{top:0;width:auto;height:calc(100vh - 60px)}#map-container #map-container-points>img{max-width:none;width:auto;height:100%}.block-cards{width:50%}}@media only screen and (max-width:950px){.instrument-picker p{width:100%}.circle-number{width:2px;height:2px;font-size:5px;line-height:2px}.block-cards{width:90%;pointer-events:none}.block-cards .card{pointer-events:all}}