.storeLocator-container { position: relative; background: #fff; display: -webkit-box; display: flex; } .storeLocator-container * { box-sizing: border-box; } .storeLocator-container.storeLocator-fullWidthMap .storeLocator-searchBox{ position: absolute; } .storeLocator-map { border: 1px solid #d7d7d7; background-color: rgb(229, 227, 223); height: 500px; -webkit-box-flex: 1; flex: 1; } .storeLocator-infoWindow { max-width: 200px; } .storeLocator-infoWindow h4 { margin: 0 0 5px; padding: 0; } .storeLocator-searchBox { border: 1px solid #d7d7d7; border-right: 0; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; padding: 15px; top: 15px; bottom: 30px; left: 10px; width: 350px; background: #fff; z-index: 1; max-height: 500px; } .storeLocator-storesList { border: 1px solid #d7d7d7; list-style: none; overflow: auto; margin: 0; padding: 0; } .storeLocator-storesList li { background: #f8f8f8; color: #333333; padding: 15px; margin: 0 0 1px 0; -webkit-transition: background 0.2s ease; transition: background 0.2s ease; position: relative; } .storeLocator-storesList .storeLocator-hiddenStore { opacity: 0.3; } .storeLocator-storesList .storeLocator-activeStore { background: #ebebeb; opacity: 1; } .storeLocator-storesList li h4 { margin: 0 0 5px; font-size: 1em; } .storeLocator-storesList li address { margin: 0 0 10px; } .storeLocator-searchInput { border: 1px solid #d7d7d7; position: relative; margin-bottom: 10px; } .storeLocator-searchInput input { border: 0; background: #ffffff; line-height: 36px; height: 36px; width: 100%; padding: 0 36px 0 15px; font-size: 1em; outline: none; } .storeLocator-searchIcon { position: absolute; right: 5px; top: 0; bottom: 0; margin: auto; width: 24px; height: 16px; } .storeLocator-searchHint { margin-bottom: 10px; padding: 0 2px 0; font-size: 0.9em; color: #696969; } .storeLocator-storeActions { text-transform: uppercase; font-size: 0.9em; } .storeLocator-storeActions a { margin-right: 10px; text-decoration: none; color: #999999; -webkit-transition: color 0.2s ease; transition: color 0.2s ease; } .storeLocator-storeActions a:hover { color: #000; } .storeLocator-storeActions a:hover svg { fill: #000; } .storeLocator-storeActions a svg { vertical-align: middle; margin-right: 3px; fill: #999999; -webkit-transition: fill 0.2s ease; transition: fill 0.2s ease; } .storeLocator-storeDistance { color: #999999; font-size: 0.9em; margin-bottom: 5px; } @media (max-width: 767px) { .storeLocator-searchBox { padding: 10px; top: 10px; left: 10px; right: 10px; bottom: auto; width: auto; } .storeLocator-storesList { position: absolute; top: 350px; left: -11px; right: -11px; height: 250px; } .storeLocator-map { height: 350px; } .storeLocator-searchHint { display: none; } .storeLocator-searchInput { margin-bottom: 0; } .storeLocator-container { padding-bottom: 270px; } }