nav.top_menu{ display: none; } /** * Box model adjustments * `border-box`... ALL THE THINGS - http://cbrac.co/RQrDL5 */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /** * 1. Force a vertical scrollbar - http://cbrac.co/163MspB * NOTE: Use `text-rendering` with caution - http://cbrac.co/SJt8p1 * NOTE: Avoid the webkit anti-aliasing trap - http://cbrac.co/TAdhbH * NOTE: IE for Windows Phone 8 ignores `-ms-text-size-adjust` if the * viewport tag is used - http://cbrac.co/1cFrAvl */ html { font-size: 100%; overflow-y: scroll; /* 1 */ min-height: 100%; } /** * 1. Inherits percentage declared on above as base `font-size` * 2. Unitless `line-height`, which acts as multiple of base `font-size` */ /* Page wrapper */ .wrapper { width: 90%; max-width: 800px; margin: 4em auto; text-align: center; } /* Icons */ .icon { display: inline-block; width: 16px; height: 16px; vertical-align: middle; fill: currentcolor; } .modal-city-btn-group{ margin-top: 30px; text-align: center; clear: both; } .modal-city-btn-group .custom-button{ padding: 10px 15px; font-size: 15px; margin: 0 5px 0 5px; cursor: pointer; background: #0071BC; color: #ffffff; border: none; border-radius: 4px; box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 2px rgba(0, 0, 0, 0.08); } .modal-city-btn-group .custom-button:hover{ opacity: 0.9; background-color: #0071BC; box-shadow: 0 -1px 2px 0 rgba(60,64,67,0.1), 0 5px 10px 0 rgba(60,64,67,0.14); } /** * Modals ($modal-citys) */ /* 1. Ensure this sits above everything when visible */ .modal-city { position: absolute; z-index: 10000; /* 1 */ top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; } .modal-city.is-visible { visibility: visible; } .modal-city-overlay { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background: hsla(0, 0%, 0%, 0.5); visibility: hidden; opacity: 0; transition: visibility 0s linear 0.3s, opacity 0.3s; } .modal-city.is-visible .modal-city-overlay { opacity: 1; visibility: visible; transition-delay: 0s; } .modal-city-wrapper { position: fixed; z-index: 9999; top: 50%; left: 50%; width: 500px; margin-top: -9em; margin-left: -16em; background-color: #fff; box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35); } @media (max-width: 767px){ .modal-city-wrapper { width: 100%; margin-left: 0; left: 0; } } .modal-city-transition { transition: all 0.3s 0.12s; transform: translateY(-10%); opacity: 0; } .modal-city.is-visible .modal-city-transition { transform: translateY(0); opacity: 1; } .modal-city-header, .modal-city-content { padding: 1em; } .modal-city-header { position: relative; background-color: #fff; box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06); border-bottom: 1px solid #e8e8e8; } .modal-city-close { position: absolute; top: 0; right: 0; padding: 1em; color: #aaa; background: none; border: 0; } .modal-city-close:hover { color: #777; } .modal-city-heading { font-size: 1.125em; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .modal-city-content > *:first-child { margin-top: 0; } .modal-city-content > *:last-child { margin-bottom: 0; } .modal-city-content #cities-region { width: 100%; box-sizing: border-box; font-size: 16px; padding: 10px; border: none; border: 1px solid #ddd; } .ui-widget.ui-widget-content{ z-index: 10000; max-height: 300px; overflow-y: auto; overflow-x: hidden; } @media (max-width: 767px){ .ui-widget.ui-widget-content { max-height: 200px; } }