* {margin: 0px;}
        body {width: auto; font-family: Lato, Helvetica, sans-serif; background: #666;
            /*
            -ms-scroll-limit-x-max: 7000px;
            -ms-scroll-limit-y-max: 5000px;
            */

        }
.app-wrapper {position: fixed; top:0px; left:0px;}
/*
        .open-menu {position: fixed; top:0px; z-index:30; margin-left:10%; margin-top:25%; width: 90%; height:50%;}
*/
 .open-menu {position: fixed; top:0px; z-index:32; }
        .open-menu a { display: block; width: 38px; height: 38px; line-height:38px; background: #000; color: #fff; font-size: 20px; border: 1px solid #d0d0d0; text-align: center; margin-bottom: 10px; float:left; margin-left:2%;}
        #top-bar {background: #ebebeb; height: 106px; border-bottom: 1px solid #d0d0d0; position: fixed; top:0px; left:0px; width: 100%; z-index:20; }
        #video-overlay {position:fixed; top:0px; left:0px; background: url(images/video-bg.png); z-index: 1001; overflow: auto; text-align: center; width:100%; height:100%;}
        #video-overlay .close-video {position:absolute; top:0px; right: 0px; color: #fff; font-size: 22px; cursor:pointer;  width: 38px; height: 38px; line-height: 38px; background: #000; text-align: center;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
        }
        #video-overlay iframe {margin: 0 auto;}
        #video-overlay h1 {width: 793px; margin:20px auto; position: relative; padding-right:60px; text-align:left; font-size:26px; color: #000; box-sizing: content-box; overflow:hidden; min-height:38px;}
        #video-overlay #social {margin:10px auto; width: 853px; list-style:none; padding:0px;}
        #video-overlay #social li {float: left; padding: 0 20px; border-right: 1px solid #ccc; line-height: 42px; margin:0px; list-style:none; }
        #video-overlay #social li:last-child {border-right: 0px;}
        #video-overlay #social li.twitter a,
        #video-overlay #social li.twitter a:visited  {font-size:40px; color: #00abf0;}
        #video-overlay #social li.facebook a,
        #video-overlay #social li.facebook a:visited {font-size:38px; color: #3a579a;}
        #video-overlay #social li .email {font-size: 36px; color: #666666;}
/*
        #boundary {overflow:auto; margin:0 auto; position: fixed; top:0px; left: 0px; padding-top:106px;}
*/
#boundary {width:100%; height: 100%;}
        #menu-overlay {position: fixed; top:169px; left:25px; z-index:30; width: 100px; height: 240px; overflow: hidden;}
        #menu-overlay.open {width: 400px;}
        #menu-overlay .menu a {display: block; width: 38px; height: 38px; background: #000; color: #fff; font-size: 20px; border: 1px solid #d0d0d0; text-align: center; margin-bottom: 10px;}
        #menu-overlay .menu a i {margin: 9px; }
        #menu-overlay .menu a:hover,
        #menu-overlay .menu a.on {background: #fff; color:#000;}
        #menu-overlay .menu a.open-menu {margin-bottom: 25px;}
        #buttons-wrapper {position: fixed; top:106px; left:0; z-index:31; width: 100%; }
        #buttons {width: 760px; height: 60px; margin: 0 auto;}
        #buttons .button {/*position: relative;*/}
        #buttons a {display: block; width: 136px; height: 38px; line-height: 38px; text-align: center; margin: 7px;  color: #fff; text-decoration: none; float: left; border: 1px solid #d0d0d0;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
        }
        #buttons a:hover {background: #fff;}
        #buttons .brooklyn a,
        #buttons .brooklyn .sub-menu,
        .sub-context.brooklyn {background: #f58326;}
        #buttons .brooklyn a:hover {background: #fff; color: #f58326;}
        #buttons .bronx a,
        #buttons .bronx .sub-menu,
        .sub-context.bronx {background: #00a84f;}
        #buttons .bronx a:hover {background: #fff; color:#00a84f;}
        #buttons .manhattan a,
        #buttons .manhattan .sub-menu,
        .sub-context.manhattan {background: #006ab6;}
        #buttons .manhattan a:hover {background: #fff; color: #006ab6;}
        #buttons .queens a,
        #buttons .queens .sub-menu,
        .sub-context.queens {background: #ed174b;}
        #buttons .queens a:hover {background: #fff; color:#ed174b;}
        #buttons .staten-island a,
        #buttons .staten-island .sub-menu,
        .sub-context.statenIsland {background: #ebc003;}
        #buttons .staten-island a:hover {background: #fff; color: #ebc003;}
        #buttons .sub-menu {position: absolute; top:0px; left: 0px; width: auto; min-height: 400px; overflow: scroll; z-index:400; padding: 15px 0px 15px 15px;}
        #buttons .sub-menu div a {background: transparent; width: auto; height: auto; line-height: 26px; clear:both; font-size: 16px; font-weight: normal; padding: 0px; margin: 0; border: 0px;}
        #buttons .sub-menu div a:hover {background: transparent; color: #fff; text-decoration: underline;}
        #buttons .sub-menu .places {width: 25%; float:left;}
        #buttons .sub-menu .faces {width: 75%; float:left;}
        #buttons .sub-menu .faces div {width: 25%; float:left;}
        #buttons .sub-menu .faces div a {display: inline; clear:none; margin-right: 5px;}
        #buttons .sub-menu h1 {text-align: center; margin-top: 0px;  color: #fff; font-size: 30px;}
        #buttons .sub-menu h2 {margin: 0px; color: #fff; font-size: 18px;}
        #buttons .sub-menu .close {width: 38px; height: 38px; position: absolute; top:20px; right: 20px; margin: 0px; background: #fff; font-size: 22px; cursor: pointer; line-height: 38px; text-align: center;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;}
        #buttons .brooklyn .sub-menu .close {color: #f58326;}
        #buttons .bronx .sub-menu .close {color: #00a84f;}
        #buttons .manhattan .sub-menu .close {color: #006ab6;}
        #buttons .queens .sub-menu .color {background: #ed174b;}

        #buttons .sub-menu#statenIsland-sub-menu { width:100%; min-height:300px;}
        #buttons .sub-menu#statenIsland-sub-menu .places {width:50%;}
        #buttons .sub-menu#statenIsland-sub-menu .faces {width:50%;}
        #buttons .sub-menu#statenIsland-sub-menu .faces div {width: 100%;}

        @media screen and (max-width: 1300px) {
            #buttons .sub-menu#brooklyn-sub-menu div a {font-size:14px;}
        }

        .main-logo {float:right; margin: 17px 17% 0 0 ;}
        .main-logo img {width: 400px; height:80px;}
        .as-logo {float: right; margin: 17px 32px 0 0;}
        .as-logo img {width: 117px; height: 64px; }
        .logo-man {float: left; margin: 17px 0 0 32px;}
        .logo-man img {width: 34px; height:77px;}
        .legend {float: right; margin: 17px 32px 0 0;}
        .legend img {width: 141px; height: 68px; }
        .row {clear: both; overflow: hidden;}
        .row div {float: left; width:1000px; height:1050px;}
        .loading {display:none; width: 50px; height: 50px; margin: 20px auto;}

        img {box-sizing: border-box; width: 1000px; height:1050px;}
        #container {display: inline-block; width:7000px; /*height:10184px;*/  background: url(images/blurred_bg.jpg) no-repeat; background-size: contain; position: relative; top:106px; }

        .item { width: auto; position: relative;}
        .item i {position:absolute; top:50%; left:50%; font-size:40px; z-index:1;}
        .item img {position: relative; z-index:2;}

        #map-points {position: absolute; top:0px; left:0px; z-index:99000;}
        .map-point {position: absolute; font-family: Helvetica Neue LT Std, Helvetica, sans-serif; font-size:100px; color: #fff; visibility: hidden; }
        .map-point.context-menu {visibility:visible; width:200px; height:200px; background: transparent; text-align:center;}
        .map-point.context-menu h3 {font-size: 12px; color: #000; display:none;}
        /*
        .map-point.context-menu:before {content:"\f041"; font-family: FontAwesome; color: #000; line-height: 200px; text-align:center;}
        */
        .map-point.context-menu div.sub-context {display:none; position:absolute; top:-100px; left:-100px; min-width:700px; height:auto; padding: 20px;}
        .map-point.context-menu div {width: 50%; float:left; text-align:left;}
        .map-point.context-menu div a {display: block; line-height: 60px; color: #fff; font-size: 30px; text-decoration:none; margin:0 10px;}
        .map-point.context-menu div a:hover {text-decoration: underline;}
        .map-point.context-menu:hover { /*width: 1000px; height: 1000px; margin-left: -500px; margin-top:-500px;*/ z-index:100;
            filter: alpha(opacity=95);
            opacity: .95;

        }
        .map-point.context-menu:hover:before {display:none;}
        .map-point.context-menu:hover div.sub-context { display: block;}

        /*adjustments for place context menus*/
        .map-point.context-menu#RuckerPark div.sub-context {width:1000px; top:0px; left:-200px;}
        .map-point.context-menu#BarclaysCenter {width:325px;}
        .map-point.context-menu#DewittClintonHighSchool div.sub-context {top:50px;}
        .map-point.context-menu#LeagueOffices {width: 250px; height: 475px;}
        .map-point.context-menu#OldMSG {width: 285px; height: 180px;}
        .map-point.context-menu#MadisonSquareGarden {width: 325px; height: 200px;}

        #brooklyn {top:5000px; left: 2500px;}
        #bronx {top:1850px; left: 4500px;}
        #manhattan {top:2600px; left: 2500px;}
        #queens {top:4450px; left: 3600px;}
        #staten-island {top:7800px; left: 270px;}

        .hide {display: none;}


@media screen and (max-width: 1024px) {

    #video-overlay {width: 100%; height: 100%;}
    #video-overlay h1 {width: 300px; padding: 0px;}
    #video-overlay #social {display:none;}
     #video-overlay .close-video {right:30px;}

    #top-bar {position:fixed; top:0px; left:0px; height:106px; width:100%; text-align:center; overflow:hidden; z-index:32;}
    .open-menu {position:fixed; top:107px; left:10px; text-align:center; /*max-width: 1024px*/ margin-left:0px; overflow:hidden;}
    #menu-overlay { background: url(images/mobile_background.jpg) no-repeat top left; background-size: cover; top:106px; left: 0px; width: 100%; height: 100%; padding-bottom:30px; z-index: 3;}
    #menu-overlay .menu {display: none;}
    #container {zoom: .5;}
    .as-logo,
    .logo-man,
    .legend {display: none;}
    .main-logo {float:none; padding: 0 25px; margin:0 auto;}
    .main-logo img {width:299px; height:60px; margin:10px auto; float:none;}

    #buttons-wrapper {padding: 30px 0; height: 100%;}
    #buttons {width: auto; height: 80%; overflow: auto;}
    #buttons a {float: none; clear: both; width: 80%; margin: 11px auto;}

    /*sub menus*/
    #buttons .sub-menu {width: 100%; position: relative; top:0px; left:0px; overflow: scroll; padding: 0px; background: url(images/mobile_background.jpg) no-repeat top left;}
    #buttons .sub-menu h1,
    #buttons .sub-menu h2,
    #buttons .sub-menu .close {display:none;}
    #buttons .sub-menu div {width: 80%; float: none; clear: both; margin: 11px auto;}
    #buttons .sub-menu div a {line-height: 38px; border: 1px solid #d0d0d0;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
    }
    #buttons .sub-menu .places,
    #buttons .sub-menu .faces,
    #buttons .sub-menu#statenIsland-sub-menu .places,
    #buttons .sub-menu#statenIsland-sub-menu .faces {width: 100%; float:none;}

     #buttons .sub-menu .faces div,
    #buttons .sub-menu .places div,
    #buttons .sub-menu#statenIsland-sub-menu .places div,
    #buttons .sub-menu#statenIsland-sub-menu .faces div {width: 80%; height:38px; float: none; clear: both; margin: 11px auto;border: 1px solid #d0d0d0; text-align: center; position: relative;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
     }
    #buttons .sub-menu .faces a {line-height: 38px; border:0px;}
    #buttons .sub-menu .faces a.video {position: absolute; top:0px right:0px;}

    #buttons .brooklyn .sub-menu {background-color:transparent;}
    #buttons .brooklyn .sub-menu div a,
    #buttons .brooklyn .sub-menu .faces div {background: #f58326;}

    #buttons .bronx .sub-menu {background-color:transparent;}
    #buttons .bronx .sub-menu div a,
    #buttons .bronx .sub-menu .faces div {background: #00a84f;}

    #buttons .manhattan .sub-menu {background-color:transparent;}
    #buttons .manhattan .sub-menu div a,
    #buttons .manhattan .sub-menu .faces div {background: #006ab6;}

    #buttons .queens .sub-menu {background-color:transparent;}
    #buttons .queens .sub-menu div a,
    #buttons .queens .sub-menu .faces div {background: #ed174b;}

    #buttons .staten-island .sub-menu {background-color:transparent;}
    #buttons .staten-island .sub-menu div a,
    #buttons .staten-island .sub-menu .faces div {background: #ebc003;}
    .map-point.context-menu {z-index: 5000;}
    .map-point.context-menu div.sub-context {display: none;}
    .map-point.context-menu div.sub-context .close-menu {display:block; clear:both; font-size:40;}

}


@media screen and (min-width: 760px) and (max-width: 1024px) {
    #video-overlay h1 {width: 793px;}
}
@media screen and (max-width: 640px) {
     #boundary {overflow:auto; margin:0 auto; position: fixed; top:0px; left: 0px;}
    #video-overlay iframe {margin:0px 10px 0 0;}
 .open-menu {z-index:1000; margin-left:10%; left:-20px;}
.open-menu a {width: 38px; height: 38px; line-height:38px; background: #000; color: #fff; font-size: 20px;}
.main-logo {float:none; padding: 0; margin:0 auto;}
    /*
 .open-menu a {float:left; position:absolute; top:-50px; left:25%;}
    */

}


.sub-menu .fa.fa-video-camera {padding-left: 8px;};