@font-face {
    font-family: titleFont;
    src: url('/National_Library/oe_/https://maps.metmuseum.org/fonts/TheMetSans-Semibold.otf');
}

@font-face {
    font-family: searchFont;
    src: url('/National_Library/oe_/https://maps.metmuseum.org/fonts/TheMetSans-Regular.otf');
}

@font-face {
    font-family: theMetSansMedium;
    src: url('/National_Library/oe_/https://maps.metmuseum.org/fonts/TheMetSans-Medium.otf');
}

#search {
    display: none;
    height: 100%;
    /*background-color: #282C32;*/
    z-index: 5;
    position: absolute;
    right: 0px;
}

#search.preview-display {
    display: none !important;
}

#search.display {
    display: block;
}

.mobile-only {
  display: none !important;
}

#topbar {
    z-index: 4;
    position: absolute;
    width: 100%;
    background: #e4002b;
    height: 42px;
    right: 0;
    display: none;

    /*-webkit-transition: width 500ms ease;
    -moz-transition: width 500ms ease;
    -o-transition: width 500ms ease;
    transition: width 500ms ease;*/
}

#topbar.display {
    display: block;
}

#topbar.preview-display, #topbar.preview-new-display{
    display: none !important;
}

#topbar.shrink {
    width: calc(100% - 20.5em);
}

#menu-icon {
    display: none;
    z-index: 2;
    background-image: url("/National_Library/oe_/https://maps.metmuseum.org/img/iconsSVG/icon_menu.svg");
    background-size: 48px;
    background-repeat: no-repeat;
    background-position: center;
    height: 42px;
    width: 41px;
    /*border-right: 1px solid #cd0027;*/
    float: left;
    cursor: pointer;
    opacity: 1;
}

#menu-icon.active {
  background-image: url('/National_Library/oe_/https://maps.metmuseum.org/img/iconsSVG/menu-collapse.svg');
}

#met-icon {
    z-index: 2;
    background-image: url("/National_Library/oe_/https://maps.metmuseum.org/img/iconsSVG/met_logo.svg");
    background-size: 48px;
    background-repeat: no-repeat;
    background-position: center;
    height: 42px;
    width: 41px;
    /*border-right: 1px solid #cd0027;*/
    float: left;
    cursor: pointer;
    opacity: 1;
}

#menu-icon.preview-display {
    display: none !important;
}

/*#menu-icon.display {
    display: block;
}*/

section > div {
    float: left;
}

#search-bar-icon {
    float: right;
    height: 42px;
    width: 50px;
    background-image: url('/National_Library/oe_/https://maps.metmuseum.org/img/iconsSVG/icon_search.svg');
    background-size: 42px;
    border: none;
    padding: 19px 12px 6px 30px;
    background-repeat: no-repeat;
    background-color: #e4002b;
    margin: 0px;
    outline: none;
}

#hide-search-icon {
    height: 42px;
    width: 16px;
    float: right;
    border: none;
    background-image: url("/National_Library/oe_/https://maps.metmuseum.org/img/iconsSVG/search-clear.svg");
    background-size: 42px;
    /*background-color: #D02C35;*/
    display: none;
    cursor: pointer;
    margin: 0px;
    position: absolute;
    background-position: center center;
    right: 35px;
    outline: none;
    /*box-shadow: -3px 0px 0px rgba(0, 0, 0, 0.2);*/
}

#hide-search-icon.active:hover {
    background-image: url("/National_Library/oe_/https://maps.metmuseum.org/img/iconsSVG/search-clear-hover.svg");
}

#hide-search-icon.active:active {
    background-image: url("/National_Library/oe_/https://maps.metmuseum.org/img/iconsSVG/search-clear-active.svg");
}

#hide-search-icon.active {
  display: none;
    /*display: block;*/
}

#search-bar-icon.focus {
    /*box-shadow: -3px 0px 0px rgba(0, 0, 0, 0.2);*/
    /*background-color: #D02C35;*/
}
/****************************************************************************/
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #fff;
    vertical-align: baseline;
    position: relative;
    top: 2px;
    /*font-size: 28px;*/
    /*line-height: 28px;*/
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #fff;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #fff;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #fff;
}
:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color:    #fff;
}

/****************************************************************************/
#search-bar:focus::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.3);
}

/* Firefox < 19 */
#search-bar:focus:-moz-placeholder {
    color: rgba(0, 0, 0, 0.3);
}

/* Firefox > 19 */
#search-bar:focus::-moz-placeholder {
    color: rgba(0, 0, 0, 0.3);
}

/* Internet Explorer 10 */
input:focus:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.3);
}

#search-bar {
    outline: none;
    font-family: titleFont;
    float: right;
    height: 42px;
    border: none;
    padding: 0;
    color: #fff;
    line-height: 28px;
    background-color: #e4002b;
    font-size: 16px;
    margin: 0;
    width: 230px;
    /*-webkit-transition: width 400ms ease 100ms;
    -moz-transition: width 400ms ease 100ms;
    -o-transition: width 400ms ease 100ms;
    transition: width 400ms ease 100ms;*/
}

#search-bar:focus {
    font-family: titleFont;
    background-color: #e4002b;
}

#search-bar.focus {
    background-color: #e4002b;
    width: 195px;
    display: block;
}

#search-bar.tablet {
    width: 80px;
}

#search-bar.tablet.focus {
    width: 230px;
}

::-webkit-input-placeholder {
   line-height: 30px;
}

:-ms-input-placeholder {
   line-height: 30px;
}

#areas {
    overflow: hidden;
    height: 100%;
    line-height: 45px;
    position: absolute;
    left: 42px;
    z-index: 4;
}

#areas ul {
    list-style: none;
    margin: 0px;
    font-family: theMetSansMedium;
    font-size: 18px;
    color: rgba(255, 255, 255, 1);
    display: inline;
    padding: 0;
    /*font-weight: bold;*/
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: margin-left 300ms linear;
    -moz-transition: margin-left 300ms linear;
    -o-transition: margin-left 300ms linear;
    transition: margin-left 300ms linear;
}

#areas ul.tablet {
    font-size: 18px;
}

#areas ul li:hover {
    color: rgba(255, 255, 255, 1);
}

#areas ul li span {
  pointer-events: none;
}

#areas ul li:hover span {
    border-bottom: 1px solid #fff;
}

#areas ul li:active span {
    color: rgba(255, 255, 255, 1);
}

#areas li.active span {
    display: inline !important;
    color: #FFFFFF;
    border-bottom: 1px solid #fff;
}

#areas.preview-margin {
    left: 16px;
}

#areas.margin {
    left: 16px;
}

#areas ul.active {
    margin-left: 300px;
}

#areas li {
    cursor: pointer;
    display: none;
    padding-left: 25px;
}

#areas li.preview-display {
    display:none !important;
}

#areas li.display {
    display:inline;
}

#collapse-search {
    display:none;
}

#search #collapse-search.mobile-show {
    background-image: url("/National_Library/oe_/https://maps.metmuseum.org/img/iconsSVG/search-collapse.svg");
    opacity: 0.6;
    background-size: 42px;
    background-position: center center;
    width: 35px;
    height: 100%;
    border-radius: 0px;
    border: 0px;
    cursor: pointer;
    background-color: #e4002b;
    float: right;
    outline: none;
    display: block;
    opacity: 1;
}

#search #collapse-search:hover {
    background-image: url("/National_Library/oe_/https://maps.metmuseum.org/img/iconsSVG/search-collapse-hover.svg");
}

#search #collapse-search:active {
    background-image: url("/National_Library/oe_/https://maps.metmuseum.org/img/iconsSVG/search-collapse-active.svg");
}

.beta {
    font-family: theMetSansMedium;
    color: #D02C35;
    /* float: left; */
    height: 100%;
    line-height: 47px;
    left: 570px;
    position: absolute;
}

.beta.preview-margin {
    left: 260px;
}

.beta.margin {
    left: 260px;
}

.beta.tablet {
    /*left: 515px;*/
    font-family: 17px;
}

#newwindow {
    cursor: pointer;
    display: none;
    z-index: 5;
    position: absolute;
    width: 100%;
    background: #282C32;
    height: 42px;
}

#newwindow.shrink {
    width: calc(100% - 20.5em);
    right: 0;
}

#newwindow.active {
    display: block;
}

#newwindow.preview-display {
    display: block;
}

#newwindow.display {
    display: block;
}

#newwindow_icon {
    height: 42px;
    width: 42px;
    background-image: url("/National_Library/oe_/https://maps.metmuseum.org/img/iconsSVG/open_map.svg");
    background-color: #e4002b;
    cursor: pointer;
}

#newwindow_larger:before {
    content: "Explore larger Map";
    text-transform: uppercase;
}

#newwindow_larger {
    cursor: pointer;
    font-family: titleFont;
    font-size: 16px;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.6);
    float: right;
    line-height: 45px;
    padding-right: 25px;
}

#newwindow_area {
    content: 'EXPLORE LARGER MAP';
    font-family: theMetSansMedium;
    font-size: 20px;
    line-height: 45px;
    color: #fff;
    padding-left: 25px;
}

#newwindow_larger:hover {
    color: rgba(255, 255, 255, 0.8);
}

#newwindow_larger:active {
    color: rgba(255, 255, 255, 1);
}

#areas ul li {
  -webkit-transition: color 250ms ease;
     -moz-transition: color 250ms ease;
       -o-transition: color 250ms ease;
          transition: color 250ms ease;

}

#areas ul li span {
  -webkit-transition: border-color 250ms ease;
     -moz-transition: border-color 250ms ease;
       -o-transition: border-color 250ms ease;
          transition: border-color 250ms ease;
}

#manhattan.bounce {
    color: #E4002B;
}