"js filter"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/shauz/pen/EjWVYX?depth=everything&order=popularity&page=6&q=card+list&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/zurb/foundation-apps-1.1.0.min.css'> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700); #nav-wrapper { position: relative; z-index: 1; -moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1); } #nav-wrapper #top-nav-left, #nav-wrapper #top-nav-middle, #nav-wrapper #top-nav-right { -webkit-flex: 1; flex: 1; } @media only screen and (min-width: 641px) { #nav-wrapper #top-nav-left, #nav-wrapper #top-nav-middle, #nav-wrapper #top-nav-right { -webkit-flex: auto; flex: auto; } } @media only screen and (min-width: 641px) { #nav-wrapper #top-nav-left { padding-left: 10px; } } @media only screen and (min-width: 641px) { #nav-wrapper #bottom-nav-left { padding-left: 0; } } #nav-wrapper #top-nav-middle, #nav-wrapper #bottom-nav-middle { min-width: 130px; } #nav-wrapper #top-nav-right { padding-right: 5px; } @media only screen and (min-width: 641px) { #nav-wrapper #top-nav-right { padding-right: 15px; } } @media only screen and (min-width: 641px) { #nav-wrapper #bottom-nav-right { padding-right: 0; } } #nav-wrapper #top-nav-wrapper { background-color: black; } #nav-wrapper #top-nav-wrapper #top-nav-left, #nav-wrapper #top-nav-wrapper #top-nav-middle, #nav-wrapper #top-nav-wrapper #top-nav-right, #nav-wrapper #top-nav-wrapper svg, #nav-wrapper #top-nav-wrapper a { height: 56px; line-height: 56px; } @media only screen and (min-width: 641px) { #nav-wrapper #top-nav-wrapper #top-nav-left, #nav-wrapper #top-nav-wrapper #top-nav-middle, #nav-wrapper #top-nav-wrapper #top-nav-right, #nav-wrapper #top-nav-wrapper svg, #nav-wrapper #top-nav-wrapper a { height: 64px; line-height: 64px; } } #nav-wrapper #top-nav-wrapper #top-nav-left a, #nav-wrapper #top-nav-wrapper #top-nav-middle a, #nav-wrapper #top-nav-wrapper #top-nav-right a { font-size: 14px; font-family: "Roboto", sans-serif; text-transform: uppercase; color: white; padding: 0 10px; -moz-transition: background-color, 0.2s; -o-transition: background-color, 0.2s; -webkit-transition: background-color, 0.2s; transition: background-color, 0.2s; } #nav-wrapper #top-nav-wrapper #top-nav-left a.icon, #nav-wrapper #top-nav-wrapper #top-nav-middle a.icon, #nav-wrapper #top-nav-wrapper #top-nav-right a.icon { padding: 0 10px; } #nav-wrapper #top-nav-wrapper #top-nav-left a.icon svg, #nav-wrapper #top-nav-wrapper #top-nav-middle a.icon svg, #nav-wrapper #top-nav-wrapper #top-nav-right a.icon svg { width: 26px; display: block; fill: white; -moz-transition: fill, 0.2s; -o-transition: fill, 0.2s; -webkit-transition: fill, 0.2s; transition: fill, 0.2s; } @media only screen and (min-width: 641px) { #nav-wrapper #top-nav-wrapper #top-nav-left a.icon svg, #nav-wrapper #top-nav-wrapper #top-nav-middle a.icon svg, #nav-wrapper #top-nav-wrapper #top-nav-right a.icon svg { width: 26px; } } #nav-wrapper #top-nav-wrapper #top-nav-left a.icon.nav-logo svg, #nav-wrapper #top-nav-wrapper #top-nav-middle a.icon.nav-logo svg, #nav-wrapper #top-nav-wrapper #top-nav-right a.icon.nav-logo svg { width: 28px; fill: white; } #nav-wrapper #top-nav-wrapper #top-nav-left a.nav-menu-btn, #nav-wrapper #top-nav-wrapper #top-nav-middle a.nav-menu-btn, #nav-wrapper #top-nav-wrapper #top-nav-right a.nav-menu-btn { width: 68px; position: relative; display: block; overflow: hidden; white-space: nowrap; color: transparent !important; } #nav-wrapper #top-nav-wrapper #top-nav-left a.nav-menu-btn span, #nav-wrapper #top-nav-wrapper #top-nav-left a.nav-menu-btn span::before, #nav-wrapper #top-nav-wrapper #top-nav-left a.nav-menu-btn span::after, #nav-wrapper #top-nav-wrapper #top-nav-middle a.nav-menu-btn span, #nav-wrapper #top-nav-wrapper #top-nav-middle a.nav-menu-btn span::before, #nav-wrapper #top-nav-wrapper #top-nav-middle a.nav-menu-btn span::after, #nav-wrapper #top-nav-wrapper #top-nav-right a.nav-menu-btn span, #nav-wrapper #top-nav-wrapper #top-nav-right a.nav-menu-btn span::before, #nav-wrapper #top-nav-wrapper #top-nav-right a.nav-menu-btn span::after { position: absolute; display: inline-block; height: 2px; width: 24px; background: white; } #nav-wrapper #top-nav-wrapper #top-nav-left a.nav-menu-btn span, #nav-wrapper #top-nav-wrapper #top-nav-middle a.nav-menu-btn span, #nav-wrapper #top-nav-wrapper #top-nav-right a.nav-menu-btn span { position: absolute; top: 50%; right: 0; left: 0; margin: -1px auto 0 auto; -moz-transition: all, 0.2s; -o-transition: all, 0.2s; -webkit-transition: all, 0.2s; transition: all, 0.2s; } #nav-wrapper #top-nav-wrapper #top-nav-left a.nav-menu-btn span::before, #nav-wrapper #top-nav-wrapper #top-nav-left a.nav-menu-btn span::after, #nav-wrapper #top-nav-wrapper #top-nav-middle a.nav-menu-btn span::before, #nav-wrapper #top-nav-wrapper #top-nav-middle a.nav-menu-btn span::after, #nav-wrapper #top-nav-wrapper #top-nav-right a.nav-menu-btn span::before, #nav-wrapper #top-nav-wrapper #top-nav-right a.nav-menu-btn span::after { content: ''; right: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -moz-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); -moz-transition: all, 0.2s; -o-transition: all, 0.2s; -webkit-transition: all, 0.2s; transition: all, 0.2s; } #nav-wrapper #top-nav-wrapper #top-nav-left a.nav-menu-btn span::before, #nav-wrapper #top-nav-wrapper #top-nav-middle a.nav-menu-btn span::before, #nav-wrapper #top-nav-wrapper #top-nav-right a.nav-menu-btn span::before { top: -6px; } #nav-wrapper #top-nav-wrapper #top-nav-left a.nav-menu-btn span::after, #nav-wrapper #top-nav-wrapper #top-nav-middle a.nav-menu-btn span::after, #nav-wrapper #top-nav-wrapper #top-nav-right a.nav-menu-btn span::after { top: 6px; } #nav-wrapper #top-nav-wrapper #top-nav-left a.nav-menu-btn.nav-menu-btn-active span, #nav-wrapper #top-nav-wrapper #top-nav-middle a.nav-menu-btn.nav-menu-btn-active span, #nav-wrapper #top-nav-wrapper #top-nav-right a.nav-menu-btn.nav-menu-btn-active span { background: transparent; } #nav-wrapper #top-nav-wrapper #top-nav-left a.nav-menu-btn.nav-menu-btn-active span::before, #nav-wrapper #top-nav-wrapper #top-nav-left a.nav-menu-btn.nav-menu-btn-active span::after, #nav-wrapper #top-nav-wrapper #top-nav-middle a.nav-menu-btn.nav-menu-btn-active span::before, #nav-wrapper #top-nav-wrapper #top-nav-middle a.nav-menu-btn.nav-menu-btn-active span::after, #nav-wrapper #top-nav-wrapper #top-nav-right a.nav-menu-btn.nav-menu-btn-active span::before, #nav-wrapper #top-nav-wrapper #top-nav-right a.nav-menu-btn.nav-menu-btn-active span::after { background: white; } #nav-wrapper #top-nav-wrapper #top-nav-left a.nav-menu-btn.nav-menu-btn-active span::before, #nav-wrapper #top-nav-wrapper #top-nav-middle a.nav-menu-btn.nav-menu-btn-active span::before, #nav-wrapper #top-nav-wrapper #top-nav-right a.nav-menu-btn.nav-menu-btn-active span::before { -moz-transform: translateX(4px) translateY(-3px) rotate(45deg); -ms-transform: translateX(4px) translateY(-3px) rotate(45deg); -webkit-transform: translateX(4px) translateY(-3px) rotate(45deg); transform: translateX(4px) translateY(-3px) rotate(45deg); } #nav-wrapper #top-nav-wrapper #top-nav-left a.nav-menu-btn.nav-menu-btn-active span::after, #nav-wrapper #top-nav-wrapper #top-nav-middle a.nav-menu-btn.nav-menu-btn-active span::after, #nav-wrapper #top-nav-wrapper #top-nav-right a.nav-menu-btn.nav-menu-btn-active span::after { -moz-transform: translateX(4px) translateY(2px) rotate(-45deg); -ms-transform: translateX(4px) translateY(2px) rotate(-45deg); -webkit-transform: translateX(4px) translateY(2px) rotate(-45deg); transform: translateX(4px) translateY(2px) rotate(-45deg); } #nav-wrapper #top-nav-wrapper #top-nav-left a:hover, #nav-wrapper #top-nav-wrapper #top-nav-middle a:hover, #nav-wrapper #top-nav-wrapper #top-nav-right a:hover { color: white; } #nav-wrapper #top-nav-wrapper #top-nav-left a:hover svg, #nav-wrapper #top-nav-wrapper #top-nav-middle a:hover svg, #nav-wrapper #top-nav-wrapper #top-nav-right a:hover svg { fill: white; } #nav-wrapper #top-nav-wrapper #top-nav-left a:hover.nav-logo svg, #nav-wrapper #top-nav-wrapper #top-nav-middle a:hover.nav-logo svg, #nav-wrapper #top-nav-wrapper #top-nav-right a:hover.nav-logo svg { fill: white; } #nav-wrapper #top-nav-wrapper #top-nav-left a:hover span, #nav-wrapper #top-nav-wrapper #top-nav-left a:hover span::before, #nav-wrapper #top-nav-wrapper #top-nav-left a:hover span::after, #nav-wrapper #top-nav-wrapper #top-nav-middle a:hover span, #nav-wrapper #top-nav-wrapper #top-nav-middle a:hover span::before, #nav-wrapper #top-nav-wrapper #top-nav-middle a:hover span::after, #nav-wrapper #top-nav-wrapper #top-nav-right a:hover span, #nav-wrapper #top-nav-wrapper #top-nav-right a:hover span::before, #nav-wrapper #top-nav-wrapper #top-nav-right a:hover span::after { background: white; } #nav-wrapper #header-nav-wrapper { background-color: black; height: 72px; } @media only screen and (min-width: 641px) { #nav-wrapper #header-nav-wrapper { height: 192px; } } #nav-wrapper #header-nav-wrapper h1 { font-family: "Roboto", sans-serif; font-size: 50px; color: white; text-indent: 20px; margin-bottom: 20px; -webkit-align-self: flex-end; align-self: flex-end; } @media only screen and (min-width: 641px) { #nav-wrapper #header-nav-wrapper h1 { margin-bottom: 60px; } } #nav-wrapper #bottom-nav-wrapper { background-color: white; } #nav-wrapper #bottom-nav-wrapper #bottom-nav-container { max-width: 1300px; margin: 0 auto; } #nav-wrapper #bottom-nav-wrapper #bottom-nav-container #bottom-nav-left, #nav-wrapper #bottom-nav-wrapper #bottom-nav-container #bottom-nav-middle, #nav-wrapper #bottom-nav-wrapper #bottom-nav-container #bottom-nav-right, #nav-wrapper #bottom-nav-wrapper #bottom-nav-container svg, #nav-wrapper #bottom-nav-wrapper #bottom-nav-container a { height: 48px; line-height: 48px; } @media only screen and (min-width: 641px) { #nav-wrapper #bottom-nav-wrapper #bottom-nav-container #bottom-nav-left, #nav-wrapper #bottom-nav-wrapper #bottom-nav-container #bottom-nav-middle, #nav-wrapper #bottom-nav-wrapper #bottom-nav-container #bottom-nav-right, #nav-wrapper #bottom-nav-wrapper #bottom-nav-container svg, #nav-wrapper #bottom-nav-wrapper #bottom-nav-container a { height: 48px; line-height: 48px; } } #nav-wrapper #bottom-nav-wrapper #bottom-nav-container #bottom-nav-left a, #nav-wrapper #bottom-nav-wrapper #bottom-nav-container #bottom-nav-middle a, #nav-wrapper #bottom-nav-wrapper #bottom-nav-container #bottom-nav-right a { font-size: 16px; font-family: "Roboto", sans-serif; color: rgba(0, 0, 0, 0.54); padding: 0 10px; margin: 0 10px; -moz-transition: all, 0.2s; -o-transition: all, 0.2s; -webkit-transition: all, 0.2s; transition: all, 0.2s; -moz-box-shadow: inset; -webkit-box-shadow: inset; box-shadow: inset; } #nav-wrapper #bottom-nav-wrapper #bottom-nav-container #bottom-nav-left a:hover, #nav-wrapper #bottom-nav-wrapper #bottom-nav-container #bottom-nav-middle a:hover, #nav-wrapper #bottom-nav-wrapper #bottom-nav-container #bottom-nav-right a:hover { color: black; } #nav-wrapper #bottom-nav-wrapper #bottom-nav-container #bottom-nav-left a.active, #nav-wrapper #bottom-nav-wrapper #bottom-nav-container #bottom-nav-middle a.active, #nav-wrapper #bottom-nav-wrapper #bottom-nav-container #bottom-nav-right a.active { color: black; -moz-box-shadow: inset 0 -2px black; -webkit-box-shadow: inset 0 -2px black; box-shadow: inset 0 -2px black; } #message-wrapper { text-align: center; } #message-wrapper a { display: block; color: white; font-size: 16px; font-weight: 300; font-family: "Roboto", sans-serif; line-height: 80px; background-color: #ef4645; -moz-transition: background-color, 0.2s; -o-transition: background-color, 0.2s; -webkit-transition: background-color, 0.2s; transition: background-color, 0.2s; } #message-wrapper a:hover { background-color: #ef4645; } #message-wrapper a span { font-size: 15px; padding: 6px 15px; margin-left: 25px; background-color: #ef4645; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; -moz-transition: background-color, 0.2s; -o-transition: background-color, 0.2s; -webkit-transition: background-color, 0.2s; transition: background-color, 0.2s; } #message-wrapper a span:hover { color: black; background-color: white; } #main-wrapper { background-color: rgba(0, 0, 0, 0.02); } #main-wrapper #main-container { margin: 0 auto; padding: 0; } @media only screen and (min-width: 641px) { #main-wrapper #main-container { max-width: 900px; } } @media only screen and (min-width: 1201px) { #main-wrapper #main-container { max-width: 1300px; } } #main-wrapper #content-wrapper #filter-wrapper { width: 80%; margin: 0 auto; padding: 70px 0 10px 0; } #main-wrapper #content-wrapper #filter-wrapper .grid-content { padding: 0; } @media only screen and (min-width: 641px) { #main-wrapper #content-wrapper #filter-wrapper .grid-content { padding: 0 6px; } } #main-wrapper #content-wrapper #filter-wrapper select { font-size: 15px; line-height: 16px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #main-wrapper #content-wrapper #filter-wrapper a { background-color: black; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #main-wrapper #content-wrapper #list-wrapper { padding: 7.5px; } #main-wrapper #content-wrapper #list-wrapper #list-container { padding: 7.5px; width: 100%; } @media only screen and (min-width: 380px) { #main-wrapper #content-wrapper #list-wrapper #list-container { width: 100%; } } @media only screen and (min-width: 641px) { #main-wrapper #content-wrapper #list-wrapper #list-container { width: 33.33%; } } @media only screen and (min-width: 1201px) { #main-wrapper #content-wrapper #list-wrapper #list-container { width: 25%; } } #main-wrapper #content-wrapper #list-wrapper #list-container > div { overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.09); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08), 0 2px 10px 0 rgba(0, 0, 0, 0.04); -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08), 0 2px 10px 0 rgba(0, 0, 0, 0.04); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08), 0 2px 10px 0 rgba(0, 0, 0, 0.04); } #main-wrapper #content-wrapper #list-wrapper #list-container > div #list-image { position: relative; background: no-repeat center center; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; } #main-wrapper #content-wrapper #list-wrapper #list-container > div #list-image::before { content: ""; display: block; padding-top: 100%; } #main-wrapper #content-wrapper #list-wrapper #list-container > div #list-image::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjQ1cHgiIGN5PSI0NXB4IiByPSIxNjAlIj48c3RvcCBvZmZzZXQ9IjMxLjI1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-radial-gradient(45px 45px, rgba(0, 0, 0, 0) 50px, rgba(0, 0, 0, 0.1) 160px); background-image: -webkit-radial-gradient(45px 45px, rgba(0, 0, 0, 0) 50px, rgba(0, 0, 0, 0.1) 160px); background-image: radial-gradient(45px 45px, rgba(0, 0, 0, 0) 50px, rgba(0, 0, 0, 0.1) 160px); opacity: .001; -moz-transition: all, 0.2s; -o-transition: all, 0.2s; -webkit-transition: all, 0.2s; transition: all, 0.2s; } #main-wrapper #content-wrapper #list-wrapper #list-container > div:hover #list-image::after { opacity: 1; } #main-wrapper #content-wrapper #list-wrapper #list-container > div #details-container { background: white; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; } #main-wrapper #content-wrapper #list-wrapper #list-container > div #details-container a:nth-of-type(1) { padding: 16px 0 16px 16px; } #main-wrapper #content-wrapper #list-wrapper #list-container > div #details-container a:nth-of-type(1) h4, #main-wrapper #content-wrapper #list-wrapper #list-container > div #details-container a:nth-of-type(1) h6 { font-family: "Roboto", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -moz-transition: color, 0.2s; -o-transition: color, 0.2s; -webkit-transition: color, 0.2s; transition: color, 0.2s; } #main-wrapper #content-wrapper #list-wrapper #list-container > div #details-container a:nth-of-type(1) h4 { font-size: 16px; line-height: 16px; font-weight: 400; color: rgba(0, 0, 0, 0.87); margin: 2px 0 8px 0; } #main-wrapper #content-wrapper #list-wrapper #list-container > div #details-container a:nth-of-type(1) h6 { font-size: 13px; line-height: 14px; font-weight: 400; color: rgba(0, 0, 0, 0.54); margin: 0; } #main-wrapper #content-wrapper #list-wrapper #list-container > div #details-container a:nth-of-type(1) h6 svg { float: left; height: 16px; width: 16px; fill: rgba(0, 0, 0, 0.3); margin: -1.5px 6px 0 0; } #main-wrapper #content-wrapper #list-wrapper #list-container > div #details-container a:nth-of-type(2) { padding: 0 16px 0 8px; } #main-wrapper #content-wrapper #list-wrapper #list-container > div #details-container a:nth-of-type(2) svg { width: 24px; height: 24px; } #main-wrapper #content-wrapper #list-wrapper #list-container > div #details-container a:nth-of-type(2) svg use { -moz-transition: all, 0.2s; -o-transition: all, 0.2s; -webkit-transition: all, 0.2s; transition: all, 0.2s; } #main-wrapper #content-wrapper #list-wrapper #list-container > div #details-container a:nth-of-type(2) svg use:nth-of-type(1) { fill: rgba(0, 0, 0, 0.2); visibility: visible; } #main-wrapper #content-wrapper #list-wrapper #list-container > div #details-container a:nth-of-type(2) svg use:nth-of-type(2) { fill: transparent; visibility: hidden; } #main-wrapper #content-wrapper #list-wrapper #list-container > div #details-container a:nth-of-type(2):hover svg use:nth-of-type(1), #main-wrapper #content-wrapper #list-wrapper #list-container > div #details-container a:nth-of-type(2):focus svg use:nth-of-type(1) { fill: rgba(0, 0, 0, 0.54); } #main-wrapper #content-wrapper #list-wrapper #list-container > div #details-container a:nth-of-type(2):focus svg use:nth-of-type(1) { fill: transparent; visibility: hidden; } #main-wrapper #content-wrapper #list-wrapper #list-container > div #details-container a:nth-of-type(2):focus svg use:nth-of-type(2) { fill: rgba(0, 0, 0, 0.7); visibility: visible; } #main-wrapper #content-wrapper #list-wrapper #list-container > div:hover #details-container a:nth-of-type(1) h4, #main-wrapper #content-wrapper #list-wrapper #list-container > div:focus #details-container a:nth-of-type(1) h4 { color: rgba(0, 0, 0, 0.87); } #main-wrapper .sidebar-wrapper { padding: 70px 15px 0 15px; min-width: 300px; width: 300px; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } #main-wrapper .sidebar-wrapper .sidebar-advert .advert-container { height: 250px; width: 300px; background-color: lightgrey; } #main-wrapper .sidebar-wrapper .sidebar-advert p { font-size: 10px; line-height: 40px; color: rgba(0, 0, 0, 0.54); text-align: right; text-transform: uppercase; } #main-wrapper .sidebar-wrapper .sidebar-highlight h4 { color: rgba(0, 0, 0, 0.87); } </style></head><body> <svg xmlns="http://www.w3.org/2000/svg" style="display:none;"> <symbol id="icon-event_available" viewBox="0 0 1024 1024"> <title>event_available</title> <path class="path1" d="M810 810v-468h-596v468h596zM810 128q34 0 60 26t26 60v596q0 34-26 60t-60 26h-596q-36 0-61-26t-25-60v-596q0-34 25-60t61-26h42v-86h86v86h340v-86h86v86h42zM706 472l-254 254-136-136 46-46 90 90 208-208z"></path> </symbol> <symbol id="icon-event_note" viewBox="0 0 1024 1024"> <title>event_note</title> <path class="path1" d="M598 598v84h-300v-84h300zM810 810v-468h-596v468h596zM810 128q34 0 60 26t26 60v596q0 34-26 60t-60 26h-596q-36 0-61-26t-25-60v-596q0-34 25-60t61-26h42v-86h86v86h340v-86h86v86h42zM726 426v86h-428v-86h428z"></path> </symbol> <symbol id="icon-bookmark" viewBox="0 0 1024 1024"> <title>bookmark</title> <path class="path1" d="M725.333 128h-426.667c-47.147 0-84.907 38.187-84.907 85.333l-0.427 682.667 298.667-128 298.667 128v-682.667c0-47.147-38.187-85.333-85.333-85.333z"></path> </symbol> <symbol id="icon-bookmark-outline" viewBox="0 0 1024 1024"> <title>bookmark-outline</title> <path class="path1" d="M725.333 128h-426.667c-47.147 0-84.907 38.187-84.907 85.333l-0.427 682.667 298.667-128 298.667 128v-682.667c0-47.147-38.187-85.333-85.333-85.333zM725.333 768l-213.333-92.8-213.333 92.8v-554.667h426.667v554.667z"></path> </symbol> <symbol id="icon-event" viewBox="0 0 1024 1024"> <title>event</title> <path class="path1" d="M725.333 512h-213.333v213.333h213.333v-213.333zM682.667 42.667v85.333h-341.333v-85.333h-85.333v85.333h-42.667c-47.147 0-84.907 38.187-84.907 85.333l-0.427 597.333c0 47.147 38.187 85.333 85.333 85.333h597.333c47.147 0 85.333-38.187 85.333-85.333v-597.333c0-47.147-38.187-85.333-85.333-85.333h-42.667v-85.333h-85.333zM810.667 810.667h-597.333v-469.333h597.333v469.333z"></path> </symbol> <symbol id="icon-query-builder" viewBox="0 0 1024 1024"> <title>query-builder</title> <path class="path1" d="M511.787 85.333c-235.733 0-426.453 190.933-426.453 426.667s190.72 426.667 426.453 426.667c235.733 0 426.88-190.933 426.88-426.667s-191.147-426.667-426.88-426.667zM512 853.333c-188.587 0-341.333-152.747-341.333-341.333s152.747-341.333 341.333-341.333 341.333 152.747 341.333 341.333-152.747 341.333-341.333 341.333z"></path> <path class="path2" d="M533.333 298.667h-64v256l223.787 134.4 32.213-52.48-192-113.92z"></path> </symbol> <symbol id="icon-more-vert" viewBox="0 0 1024 1024"> <title>more-vert</title> <path class="path1" d="M512 341.333c47.147 0 85.333-38.187 85.333-85.333s-38.187-85.333-85.333-85.333-85.333 38.187-85.333 85.333 38.187 85.333 85.333 85.333zM512 426.667c-47.147 0-85.333 38.187-85.333 85.333s38.187 85.333 85.333 85.333 85.333-38.187 85.333-85.333-38.187-85.333-85.333-85.333zM512 682.667c-47.147 0-85.333 38.187-85.333 85.333s38.187 85.333 85.333 85.333 85.333-38.187 85.333-85.333-38.187-85.333-85.333-85.333z"></path> </symbol> <symbol id="icon-keyboard-arrow-right" viewBox="0 0 1024 1024"> <title>keyboard-arrow-right</title> <path class="path1" d="M366.293 702.293l195.627-195.627-195.627-195.627 60.373-60.373 256 256-256 256z"></path> </symbol> <symbol id="icon-search" viewBox="0 0 1024 1024"> <title>search</title> <path class="path1" d="M661.333 597.333h-33.92l-11.733-11.733c41.813-48.427 66.987-111.36 66.987-180.267 0-153.173-124.16-277.333-277.333-277.333s-277.333 124.16-277.333 277.333 124.16 277.333 277.333 277.333c68.907 0 131.84-25.173 180.267-66.773l11.733 11.733v33.707l213.333 212.907 63.573-63.573-212.907-213.333zM405.333 597.333c-106.027 0-192-85.973-192-192s85.973-192 192-192 192 85.973 192 192-85.973 192-192 192z"></path> </symbol> <symbol id="icon-clock" viewBox="0 0 1024 1024"> <title>icon-clock</title> <path class="path1" d="M512,2C230.417,2,2,230.34,2,512c0,281.663,228.417,510,510,510c281.662,0,510-228.337,510-510 C1022,230.34,793.662,2,512,2z M512,873.636c-199.362,0-361.635-162.198-361.635-361.636c0-199.43,162.273-361.636,361.635-361.636 c199.434,0,361.636,162.206,361.636,361.636C873.636,711.438,711.434,873.636,512,873.636z" /> <path d="M556.332,447.744V317.273c0-20.503-16.585-37.09-37.085-37.09c-20.506,0-37.092,16.587-37.092,37.09 v148.363l0.434,2.103l1.448,7.173l2.102,6.736l3.618,5.359l5,6.086l1.308,1.52l185.453,148.369 c6.81,5.431,14.994,8.113,23.105,8.113c10.938,0,21.661-4.784,29.056-13.91c12.813-16.002,10.143-39.337-5.793-52.166 L556.332,447.744z" /> </symbol> <symbol id="icon-heart" viewBox="0 0 1024 1024"> <title>icon-heart</title> <path class="path1" d="M792.47,28.49c-16.484-1.551-31.847-2.394-46.216-2.394c-115.541,0-170.915,49.877-234.324,125.476 C448.527,75.973,393.148,26.096,277.747,26.096c-14.509,0-29.872,0.843-46.216,2.394C131.491,38.211,15.951,129.73,2,305.084v58.337 c13.103,167.812,139.776,374.803,509.93,634.483C882.224,738.224,1008.898,531.232,1022,363.421v-58.337 C1007.91,129.73,892.369,38.211,792.47,28.49z M910.405,358.627C896.878,505.307,762.878,673.757,511.93,860.313 C260.983,673.827,127.122,505.307,113.456,358.627v-48.75c10.988-116.743,82.711-165.847,128.928-170.356 c12.539-1.267,24.375-1.831,35.363-1.831c66.227,0,93.984,20.29,148.799,85.6l85.385,101.804l85.53-101.804 c54.81-65.31,82.427-85.6,148.794-85.6c10.848,0,22.684,0.564,35.368,1.831c46.071,4.509,117.935,53.613,128.782,170.356V358.627z" /> </symbol> <symbol id="icon-logo" viewBox="0 0 1024 1024"> <title>icon-logo</title> <path class="path1" d="M1021.744,134.504c0-48.996-32.12-81.115-80.907-81.115 c-143.032,0.016-285.908,0.016-428.911,0c-144.217,0-288.437-0.065-432.654,0.016C37.075,53.437,2.045,87.971,2.045,129.848 c-0.033,254.797,0,509.514,0,764.327c0,3.646-0.161,7.359,0.127,11.038c2.495,31.256,37.75,65.103,69.102,65.135 c229.156,0.224,458.088,0.03,687.244,0.288c8.7,0,14.843-2.528,20.826-8.606c76.044-76.076,152.215-152.056,228.803-227.556 c9.789-9.727,13.853-19.548,13.853-33.559C1021.615,512.084,1021.744,323.317,1021.744,134.504z M530.001,659.867 c-12.732,32.282-34.966,56.179-66.094,70.928c-28.569,13.532-60.4,20.697-92.104,20.697c-50.45,0-96.806-18.042-127.198-49.46 c-27.257-28.151-32.664-63.694-37.911-98.085c-1.182-6.91,0.897-11.068,2.848-13.373c2.913-3.52,7.391-5.311,13.341-5.375 c2.176,0,4.319-0.127,6.526-0.317c9.63-0.8,16.925-1.376,22.682-1.376c24.826,0,28.953,11.996,38.999,40.979 c14.843,42.612,55.185,64.112,101.637,54.065c45.843-9.915,71.469-43.38,66.861-87.271c-3.582-35.384-31.862-61.359-70.413-64.64 c-13.053-1.152-26.137-1.088-39.253-0.592c0,0-0.032,0-0.063,0c-20.379,0-21.051-15.371-21.275-20.426 c-2.08-39.974,1.76-44.357,40.885-46.884c39.126-2.576,67.822-25.849,71.405-57.905c2.048-17.9-2.56-33.288-13.692-45.764 c-13.5-15.147-35.99-24.538-58.641-24.538c-7.902,0-15.483,1.216-21.881,3.52c-27.513,9.886-43.638,30.68-49.3,63.551 c-4.224,24.042-14.684,32.279-39.51,30.264l-9.502-0.687c-17.499-1.232-25.496-1.792-30.2-8.27 c-4.446-6.111-2.687-13.277,0.225-25.162c0.928-3.695,1.983-8.046,3.104-13.164c18.235-84.042,79.467-128.574,166.484-119.569 c12.06,1.248,24.761,3.503,38.837,6.879c50.93,12.365,82.475,44.979,91.24,94.31c9.247,52.019-5.055,93.112-42.484,122.257 C537.679,527.007,557.546,590.383,530.001,659.867z M784.335,448.372l0.097,67.12H783.6l-0.064,52.961 c-0.097,51.588-0.191,103.126,0.32,154.76c0.097,6.271-0.512,14.205-5.854,19.642c-5.119,5.184-12.382,5.793-17.404,5.793 l-2.976-0.098c-6.142-0.19-11.484-0.32-16.092-0.414c-17.337-0.354-26.041-0.544-31.927-6.687 c-5.726-5.983-5.502-14.27-5.149-29.337c0.127-4.607,0.254-10.014,0.254-16.315v-96.903c-0.032-62.335-0.095-124.671,0.258-186.991 c0.032-6.703-0.641-10.797-1.984-12.157c-0.991-0.992-3.552-1.535-7.198-1.535l-3.008,0.112c-9.374,0.607-18.81,0.784-28.28,0.784 l-34.712-0.256c-4.125,0-8.285,0.032-12.411,0.128c-0.032,0-0.032,0-0.032,0c-14.908,0-21.818-7.103-22.106-21.69 c-1.055-37.51,1.694-40.95,36.693-47.108c42.165-7.374,67.95-23.995,82.637-52.531c7.421-14.412,19.642-14.412,23.673-14.412 c2.079,0,4.223,0.16,6.334,0.32c2.688,0.192,5.502,0.448,8.03,0.048c11.964-2.16,19.771-0.384,25.24,5.167 c5.024,5.071,7.168,12.604,7.039,24.41C784.047,344.879,784.174,397.49,784.335,448.372z" /></path> </symbol> <symbol id="icon-person" viewBox="0 0 1024 1024"> <title>person</title> <path class="path1" d="M512 512c94.293 0 170.667-76.587 170.667-170.667 0-94.293-76.373-170.667-170.667-170.667s-170.667 76.373-170.667 170.667c0 94.080 76.373 170.667 170.667 170.667zM512 597.333c-113.707 0-341.333 56.96-341.333 170.667v85.333h682.667v-85.333c0-113.707-227.627-170.667-341.333-170.667z"></path> </symbol> <symbol id="icon-food" viewBox="0 0 1024 1024"> <title>icon-food</title> <path class="path1" d="M183.313,745.127c7.945-45.771,3.273-86.16,21.31-107.586 c30.481-36.131,78.607-31.826,119.478-10.471c46.296,24.371,91.414,51.318,134.69,80.615c28.225,19.146,50.502,18.203,78.002-0.645 c35.624-24.51,72.63-47.707,111.544-66.162c28.26-13.303,60.283-24.164,90.994-25.199c90.809-2.693,116.975,38.432,81.42,120.242 c76.207,44.393,84.158,77.578,35.992,151.588c-15.684,24.164-26.764,54.678-48.361,70.926 c-34.244,25.936-74.643,57.326-114.203,59.766c-122.348,7.709-245.791,7.777-368.197-0.07 c-39.277-2.461-78.952-34.979-113.875-60.156c-19.199-13.762-28.755-40.893-42.608-61.996 C115.418,813.615,120.895,784.779,183.313,745.127z M842.571,813.507c-88.156-24.691-630.752-15.345-659.045,9.689 c18.841,30.713,33.305,66.741,57.97,91.013c24.486,24.193,58.615,50.301,89.614,51.845c119.136,5.995,238.913,5.552,358.148,0.367 c29.763-1.362,63.817-23.827,86.237-47.186C802.379,891.533,818.725,852.442,842.571,813.507z" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M506.646,476.864c-91.937-0.069-184.024,0.576-275.996-0.207 c-68.188-0.644-95.711-30.976-100.021-97.966C116.897,169.387,292.699,11.126,475.348,0.793 C700.187-11.864,873.544,128.147,890.065,335.84c6.721,84.412-6.672,148.273-129.287,141.921 C676.229,473.413,591.356,476.911,506.646,476.864z M843.899,411.488c7.708-134.228-40.993-235.759-150.041-301.987 C566.779,32.459,436.4,35.508,312.846,118.646c-99.833,67.27-144.423,164.633-134.418,292.842 C401.577,411.488,620.635,411.488,843.899,411.488z" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M506.347,510.856c72.043,0.033,144.027,0.216,215.955-0.017 c29.686-0.183,60.248,3.8,54.033,29.537c-2.727,11.052-33.322,26.02-51.641,26.318c-142.151,2.141-284.43,1.012-426.685,1.211 c-29.831,0.15-57.792-3.551-56.417-29.652c1.479-25.655,30.268-27.829,59.598-27.547 C369.5,511.271,437.975,510.856,506.347,510.856z" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M327.898,290.067c-16.023-23.75-33.156-38.179-32.794-52.286 c0.236-11.185,24.124-32.402,33.404-30.354c14.112,3.084,31.396,21.034,34.445,35.417 C365.035,252.855,345.692,267.331,327.898,290.067z" /> </symbol> <symbol id="icon-drink" viewBox="0 0 1024 1024"> <title>icon-drink</title> <path class="path1" d="M877.278,82.719C863.484,68.854,780.905,0,512.012,0C243.106,0,160.563,68.854,146.71,82.719l-22.924,22.866l4.968,32.147 l123.471,800.323C259.04,985.96,302.959,1024,351.976,1024h320.025c49.041,0,92.925-38.04,99.846-86.6L895.27,137.732 l4.944-32.147L877.278,82.719z M719.703,952.406c-2.618,18.204-19.952,33.163-38.607,33.163H342.881 c-18.606,0-35.902-14.959-38.607-33.163L173.798,117.09c0,0,67.653-66.889,338.215-66.889 c270.525,0,338.154,66.889,338.154,66.889L719.703,952.406z" /> <polygon points="443.571,851.463 374.754,231.662 252.641,231.662 358.93,920.344 653.221,920.344 759.46,231.662 443.571,231.662 " /> </symbol> <symbol id="icon-music" viewBox="0 0 1024 1024"> <title>icon-music</title> <path class="path1" d="M1014.65,145.12L878.881,9.338c-12.508-12.449-32.777-12.449-45.051,0l-58.633,58.528 c-6.055,5.95-9.445,14.132-9.352,22.596v64.045c-0.094,3.857,0.83,7.54,2.15,11.117L627.972,305.59 c-110.229-91.083-189.892-81.661-269.449-2.127c-45.401,45.389-15.125,105.624-45.401,135.712 c-56.599,56.774-133.479-40.913-250.266,72.181c-94.075,90.989-88.639,240.693,58.166,387.487 c146.828,146.863,303.324,159.02,394.301,64.969c113.046-116.799,12.694-196.321,69.457-253.154 c30.1-30.053,90.475,0,135.678-45.155c79.615-79.546,89.037-159.184-1.988-269.448l140.037-139.979 c3.52,1.309,7.201,2.209,11.035,2.314l63.963-0.152c8.545,0,16.658-3.378,22.643-9.515l58.504-58.388 C1027.088,177.85,1027.088,157.627,1014.65,145.12z M605.493,539.117c-36.494,36.494-95.619,36.494-131.925,0 c-36.541-36.424-36.541-95.524,0-131.948c36.307-36.447,95.431-36.447,131.855,0C641.882,443.686,641.882,502.693,605.493,539.117z" /> </symbol> <symbol id="icon-comedy" viewBox="0 0 1024 1024"> <title>icon-comedy</title> <path class="path1" d="M863.722,74.922c-99.953-99.941-261.857-99.848-361.799,0l361.799,361.753C963.675,336.92,963.804,174.887,863.722,74.922 z" /> <path d="M855.681,686.05c-84.255-60.105-221.531-55.103-339.03,90.87C387.428,937.668,270.286,974.371,204.173,955.085 c-32.747-9.328-53.507-32.448-57.042-63.261c-3.7-31.421,11.566-75.068,58.749-117.803l24.623,24.688l45.395-30.158l0.497,1.824 l97.516-65.623l69.93-47.131c-0.45-0.163-0.777-0.163-1.228-0.279l221.017-147.47c51.163,3.881,102.935-7.411,148.521-34.319 L463.132,126.564c-26.844,45.541-38.188,97.23-34.331,148.521l-288.76,433.15l20.689,20.783 c-55.658,51.408-84.027,111.396-77.247,170.38c6.68,56.691,45.114,100.619,102.945,117.24 c111.654,32.191,253.752-42.454,380.088-199.602c91.514-113.617,192.53-121.449,251.945-78.947 c52.402,37.451,80.889,119.368,39.65,221.391h67.586C965.873,836.628,924.716,735.4,855.681,686.05z M445.669,447.686 l45.219,45.33l-45.219,45.19l-45.19-45.19L445.669,447.686z" /> </g> </symbol> <symbol id="icon-festival" viewBox="0 0 1024 1024"> <title>icon-festival</title> <path class="path1" d="M837.797,544.074c-108.682-43.931-320.963-238.898-385.235-337.586l-8.779-14.66 c-50.653,92.492-279.58,306-394.143,352.246c-114.434,46.328,28.653,136.553,28.653,136.553l32.989,343.372h664.851 l33.024-343.372C809.156,680.627,952.325,590.402,837.797,544.074z M341.634,975.088H204.919V709.513 c45.229,14.952,97.776,10.532,136.715-2.583C341.634,853.861,341.634,975.088,341.634,975.088z M383.426,436.362 c-4.863,18.868-27.448,88.81-35.257,131.327c-7.762,42.587,14.426,74.466-39.699,93.813 c-42.388,15.15-78.312-5.822-108.273-31.938c-29.985-26.069-39.583-51.238,8.709-86.986 c48.338-35.842,188.713-201.374,199.164-214.653C418.497,314.504,396.286,386.282,383.426,436.362z M687.977,975.088H551.319 V709.513c45.3,14.952,97.858,10.532,136.657-2.583C687.977,853.861,687.977,975.088,687.977,975.088z M687.451,629.564 c-30.009,26.115-65.839,47.088-108.263,31.938c-54.172-19.348-31.855-51.227-39.676-93.813 c-7.692-42.517-30.464-112.458-35.281-131.327c-12.883-50.08-35.082-121.857-24.713-108.437 c10.509,13.28,150.873,178.812,199.2,214.653C727.162,578.326,717.494,603.495,687.451,629.564z" /> </g> <path d="M443.782,157.729V15.881c0,0,369.208-54.604,348.038,38.694c-14.916,65.804-103.165,110.869,36.076,118.596 c139.264,7.762,190.828-15.443,190.828-15.443s-23.193,97.975-234.632,116.013c-211.427,18.096-165.088-69.661-128.906-123.763 C651.212,150.738,673.201,116.451,443.782,157.729z" /> </symbol> <symbol id="icon-new-places" viewBox="0 0 1024 1024"> <title>icon-new-places</title> <path class="path1" d="M511.994,0C317.62,0,159.988,157.609,159.988,351.995c0,224.009,237.512,397.12,352.006,672.005 C626.5,749.045,864.012,576.004,864.012,351.995C864.012,157.609,706.381,0,511.994,0z M225.126,278.86h219.883l66.985-215.545 l67.009,215.545h219.87l-176.99,119.265l94.352,206.404l-204.24-128.407L307.881,604.529l94.364-206.404L225.126,278.86z" /> </symbol> <symbol id="icon-location" viewBox="0 0 1024 1024"> <title>icon-location</title> <path class="path1" d="M512,0C300,0,128,172,128,384c0,256,384,640,384,640s384-384,384-640C896,172,724,0,512,0z M512,705.789 c-177.707,0-321.789-144.239-321.789-321.789c0-177.707,144.083-321.789,321.789-321.789c177.707,0,321.789,144.083,321.789,321.789 C833.789,561.55,689.707,705.789,512,705.789z" /> </symbol> <symbol id="icon-logo-new" viewBox="0 0 1024 1024"> <title>icon-logo-new</title> <path d="M248.655,444.319c-3.529,10.586,0.706,22.583,9.528,35.111c30.524-16.585,62.988-26.818,78.337-30.523 c25.055-6.352,27.349,20.996,26.113,20.643c-19.055-2.999-60.518,6.352-94.747,22.76c12.351,16.585,17.643,31.052,13.586,50.638 c-6.529,29.994-37.757,45.873-63.518,35.463c-16.586-6.526-29.818-28.406-13.586-53.107c7.763-12.174,19.232-22.936,32.288-32.288 c-10.056-16.762-11.292-35.993-2.47-50.99c11.468-19.231,33.347-28.229,47.637-21.702c20.644,9.704,14.468,29.112,3.882,36.346 c-20.29,13.762-25.76-8.293-25.76-8.293c21.35-4.94,22.761-17.467,16.056-20.643C263.651,422.088,252.713,432.321,248.655,444.319z M245.126,505.013c-9.352,6.352-17.291,13.233-22.584,20.29c-14.644,19.761-9.527,40.051,1.941,45.169 c14.292,6.88,32.288-0.354,37.229-19.407C265.593,536.417,260.123,524.068,245.126,505.013z M325.046,463.374 c6.881,1.235,13.41,1.941,19.231,1.058l2.293-0.352c7.94,3.528,7.234,12.35-4.411,14.644c-5.117,1.059-12.88,0-21.702-1.588 c-2.294,8.293-4.411,17.997-6.351,30.523c-2.824,17.29-4.235,45.17,0.705,47.109c5.293,1.94,12.704-9.705,17.291-22.231l0.176-0.178 c3.176-1.058,5.999,1.412,3.881,6.884c-6.704,16.936-20.819,30.875-32.641,25.583c-11.292-4.94-14.115-33.524-11.468-57.167 c1.235-12.35,2.999-25.23,5.646-35.64c-17.997-4.233-36.875-8.469-50.108-6.353c-18.702,2.824-24.701,11.646-24.701,11.646 c-8.645-8.998-7.058-30.523,16.585-33.876c17.467-2.47,40.757,6.705,62.987,13.938c1.588-3.882,3.706-6.881,5.646-8.822 c13.233-12.174,24.172-0.706,24.172-0.706S328.928,452.964,325.046,463.374z M365.27,484.37c0,0-3.705,3-7.057,22.408 c11.998-23.819,23.643-28.759,33.523-27.171c9.175,1.588,14.115,8.998,4.587,32.111c-5.646,13.764-25.937,2.647-25.937,2.647 c8.646-8.646,13.233-21.349,8.998-22.937c-4.411-1.235-12.174,8.999-23.995,36.875c-4.234,34.229-10.586,41.638-26.995,34.229 c0,0,2.117-2.999,2.823-8.998c4.235-40.229,1.765-65.988,12.88-73.221C355.919,472.373,365.27,484.37,365.27,484.37z M426.139,534.83c19.585-8.468,20.643-41.991,13.586-43.932c-7.235-2.117-14.645,15.703-17.821,27.876 c-3.881,14.645-2.823,34.582,11.115,37.404c14.822,3,32.465-8.998,37.758-23.642c0,0,0-0.178,0.177-0.178 c3.352-1.058,5.999,1.235,3.881,6.884c-7.234,18.347-29.642,32.11-52.579,27.169c-13.409-2.997-28.054-19.937-23.466-44.989 c4.764-25.055,23.113-41.993,46.051-37.935c32.64,5.999,23.113,44.109-19.056,58.047 C425.786,541.535,419.435,537.831,426.139,534.83z M495.122,534.83c19.584-8.468,20.643-41.991,13.586-43.932 c-7.234-2.117-14.644,15.703-17.82,27.876c-3.882,14.645-2.823,34.582,11.115,37.404c14.821,3,32.464-8.998,37.758-23.642 c0,0,0-0.178,0.177-0.178c3.353-1.058,5.998,1.235,3.881,6.884c-7.232,18.347-29.642,32.11-52.578,27.169 c-13.41-2.997-28.053-19.937-23.466-44.989c4.764-25.055,23.113-41.993,46.05-37.935c32.641,5.999,23.113,44.109-19.055,58.047 C494.769,541.535,488.418,537.831,495.122,534.83z M568.694,463.374c6.88,1.235,13.407,1.941,19.23,1.058l2.294-0.352 c7.939,3.528,7.233,12.35-4.411,14.644c-5.118,1.059-12.88,0-21.703-1.588c-2.294,8.293-4.41,17.997-6.351,30.523 c-2.822,17.29-4.233,45.17,0.706,47.109c5.294,1.94,12.702-9.705,17.291-22.231l0.177-0.178c3.176-1.058,5.998,1.412,3.881,6.884 c-6.704,16.936-20.82,30.875-32.642,25.583c-11.292-4.94-14.114-33.524-11.467-57.167c1.235-12.35,2.999-25.23,5.646-35.64 c-17.996-4.233-36.876-8.469-50.109-6.353c-18.702,2.824-24.701,11.646-24.701,11.646c-8.645-8.998-7.057-30.523,16.585-33.876 c17.467-2.47,40.756,6.705,62.988,13.938c1.587-3.882,3.705-6.881,5.646-8.822c13.233-12.174,24.173-0.706,24.173-0.706 S572.574,452.964,568.694,463.374z M583.863,502.719c-4.411-4.411-7.941-9.88-6.354-16.232c1.412-7.058,16.411-15.88,20.115-11.998 c2.822,2.823,2.116,11.998,1.058,18.173c-0.177,0.353-0.177,0.706-0.177,0.706c1.06,0.882,2.295,1.412,3.706,2.118 c10.939,5.999,25.584,18.878,29.642,34.051c7.057-3.175,12.704-7.409,15.526-15.173c0,0,0,0,0.353,0 c3.176-1.235,5.999,1.234,3.705,6.704c-3.527,8.822-10.409,14.644-18.524,18.879c0,1.059,0,2.118-0.177,3.176 c-4.94,28.23-32.995,36.699-45.875,28.406c-10.409-6.881-9.352-22.23,8.117-29.641c4.234-1.765,8.645-3.353,12.88-4.588 c0-11.468-6.882-22.054-13.938-27.171c-4.236,11.293-10.058,21.703-15.705,32.818c-2.646,5.294-6.352,4.763-7.409,1.588 c-0.176-0.177-0.176-0.177-0.176-0.177C575.922,534.302,581.923,515.599,583.863,502.719z M605.564,550.18 c-3.705,1.236-7.41,2.471-10.057,4.06c-7.588,4.058-6.528,10.938-1.941,11.114C597.448,565.531,602.036,561.12,605.564,550.18z M723.066,482.252c7.587-4.94,17.643-0.706,21.35,13.939c8.82,0.706,18.173,0.706,27.876-4.059c0,0,0.177,0.177,0.354,0.177 c2.999,1.234,3.353,5.117-2.117,7.41c-6.352,2.823-15.703,4.764-24.878,5.293c0,4.411,0,9.352-1.059,15.174 c-3,21.349-20.114,49.227-43.933,46.756c-17.997-1.589-31.583-17.644-28.229-42.874c3.353-26.113,22.055-44.991,43.757-43.404 C718.832,481.018,721.127,481.37,723.066,482.252z M695.542,520.009c-2.999,18.527,1.765,30.702,12.526,31.407 c11.47,0.706,23.819-12.173,26.996-31.053c0.883-5.471,0.529-10.939-0.53-15.88c-1.763-0.176-3.175-0.353-4.762-0.705 c-8.47-1.588-15.175-9.704-11.471-16.585c-1.234-0.353-2.292-0.53-3.527-0.706C706.128,486.134,698.542,500.603,695.542,520.009z M771.935,558.121h0.354c11.822,1.235,24.877-13.586,29.289-25.584c0,0,0.175,0,0.352-0.178c3.176-1.058,5.999,1.412,3.707,7.06 c-7.058,17.996-20.821,28.052-34.936,27.876c-4.059,27.526-8.115,50.108-15.88,57.166c-14.644,13.232-25.582-5.645-25.582-5.645 c6.174-4.236,13.231-20.645,21.172-58.931c-6.176-6.529-4.236-15.704,4.588-24.35c13.938-78.161,33.521-123.329,60.517-114.86 c23.113,7.764,11.998,53.46-38.816,106.392c-0.529,2.294-0.882,4.765-1.233,7.234C774.229,542.418,773.171,550.358,771.935,558.121z M779.168,513.482c25.937-33.348,39.522-68.105,34.582-72.34C806.164,434.615,790.637,454.905,779.168,513.482z M487.553,935.797 c-16.415-0.932-32.909-2.831-49.023-5.644l1.025-5.876c15.889,2.773,32.151,4.645,48.336,5.564L487.553,935.797z M536.898,935.771 l-0.344-5.955c16.182-0.936,32.442-2.825,48.332-5.615l1.031,5.875C569.802,932.906,553.31,934.822,536.898,935.771z M390.489,918.844c-15.723-4.688-31.338-10.362-46.412-16.861l2.362-5.478c14.859,6.407,30.253,12,45.754,16.622L390.489,918.844z M633.945,918.714l-1.71-5.715c15.486-4.636,30.867-10.241,45.715-16.662l2.367,5.476 C665.256,908.324,649.655,914.011,633.945,918.714z M299.96,879.819c-14.192-8.198-28.066-17.328-41.237-27.136l3.563-4.784 c12.987,9.67,26.667,18.672,40.659,26.755L299.96,879.819z M724.375,879.627l-2.988-5.163c13.98-8.094,27.646-17.103,40.613-26.775 l3.567,4.78C752.414,862.279,738.556,871.418,724.375,879.627z M220.906,820.964c-11.934-11.247-23.339-23.314-33.898-35.866 l4.564-3.84c10.412,12.376,21.657,24.274,33.425,35.364L220.906,820.964z M803.349,820.726l-4.095-4.338 c11.762-11.104,22.998-23.012,33.396-35.396l4.569,3.837C826.672,797.387,815.276,809.464,803.349,820.726z M157.484,745.562 c-9.041-13.695-17.365-28.056-24.741-42.683l5.326-2.686c7.272,14.42,15.479,28.579,24.392,42.082L157.484,745.562z M866.722,745.252l-4.98-3.282c8.905-13.518,17.105-27.693,24.37-42.133l5.328,2.682 C884.072,717.164,875.756,731.542,866.722,745.252z M113.132,657.588c-5.625-15.408-10.396-31.313-14.181-47.274l5.804-1.377 c3.731,15.736,8.435,31.416,13.98,46.604L113.132,657.588z M911.014,657.188l-5.605-2.041c5.531-15.197,10.222-30.891,13.939-46.644 l5.806,1.371C921.383,625.854,916.625,641.771,911.014,657.188z M90.388,561.711c-1.893-16.233-2.862-32.807-2.879-49.26 l5.965-0.006c0.017,16.226,0.973,32.568,2.84,48.575L90.388,561.711z M933.664,561.263l-5.926-0.685 c1.852-16.009,2.789-32.353,2.789-48.578l-0.001-0.886l5.965-0.02l0.001,0.905C936.492,528.453,935.541,545.027,933.664,561.263z M96.21,463.864l-5.926-0.679c1.868-16.319,4.715-32.677,8.459-48.621l5.807,1.364C100.859,431.646,98.053,447.774,96.21,463.864z M927.636,462.54c-1.894-16.083-4.751-32.202-8.493-47.909l5.802-1.382c3.797,15.932,6.694,32.282,8.616,48.594L927.636,462.54z M118.441,369.27l-5.608-2.034c5.592-15.416,12.161-30.674,19.525-45.351l5.332,2.675 C130.43,339.029,123.954,354.072,118.441,369.27z M905.111,368.041c-5.555-15.17-12.075-30.187-19.379-44.633l5.323-2.691 c7.408,14.653,14.022,29.885,19.658,45.273L905.111,368.041z M162.016,282.4l-4.984-3.276c9.005-13.699,18.917-27.024,29.46-39.606 l4.572,3.831C180.668,255.754,170.895,268.893,162.016,282.4z M861.294,281.353c-8.915-13.475-18.724-26.579-29.153-38.951 l4.562-3.845c10.576,12.547,20.524,25.838,29.566,39.504L861.294,281.353z M224.425,207.918l-4.1-4.333 c11.918-11.275,24.619-21.969,37.748-31.785l3.572,4.778C248.699,186.256,236.176,196.8,224.425,207.918z M798.679,207.071 c-11.784-11.084-24.341-21.594-37.319-31.237l3.557-4.789c13.164,9.78,25.897,20.439,37.85,31.681L798.679,207.071z M302.229,149.758l-2.994-5.159c14.19-8.235,29.005-15.715,44.034-22.232l2.374,5.473 C330.826,134.264,316.219,141.639,302.229,149.758z M720.672,149.123c-14.026-8.083-28.668-15.419-43.52-21.804l2.355-5.48 c15.064,6.476,29.916,13.917,44.143,22.116L720.672,149.123z M391.341,111.127l-1.717-5.712c15.7-4.719,31.855-8.559,48.016-11.414 l1.038,5.874C422.746,102.689,406.819,106.475,391.341,111.127z M631.381,110.745c-15.49-4.602-31.429-8.336-47.372-11.101 l1.02-5.877c16.172,2.804,32.339,6.592,48.052,11.26L631.381,110.745z M487.003,94.208l-0.351-5.954 c16.315-0.962,33.016-0.988,49.346-0.077l-0.332,5.955C519.563,93.234,503.093,93.261,487.003,94.208z M512,1024 c-69.119,0-136.171-13.538-199.295-40.237c-60.969-25.787-115.724-62.704-162.744-109.725S66.024,772.263,40.236,711.294 C13.538,648.17,0,581.117,0,512c0-69.118,13.538-136.17,40.236-199.294c25.788-60.969,62.705-115.724,109.725-162.745 c47.02-47.02,101.775-83.937,162.744-109.725C375.829,13.538,442.881,0,512,0c69.118,0,136.171,13.538,199.295,40.237 c60.969,25.788,115.725,62.705,162.745,109.725c47.02,47.021,83.936,101.775,109.723,162.745C1010.462,375.83,1024,442.882,1024,512 c0,69.117-13.538,136.17-40.237,199.294c-25.787,60.969-62.703,115.724-109.723,162.744 c-47.021,47.021-101.776,83.938-162.745,109.725C648.171,1010.462,581.118,1024,512,1024z M512,5.965 C232.971,5.965,5.965,232.971,5.965,512c0,279.029,227.006,506.035,506.035,506.035c279.029,0,506.035-227.006,506.035-506.035 C1018.035,232.971,791.029,5.965,512,5.965z" /> </symbol> <symbol id="icon-logo-new-1" viewBox="0 0 1024 1024"> <title>icon-logo-new-1</title> <path d="M704,0H320L0,1024h1024L704,0z M576,960H448V768h128V960z M576,640H448V448h128V640z M576,320H448V128h128V320z" /> </symbol> <symbol id="icon-calander" viewBox="0 0 1024 1024"> <title>icon-calander</title> <path d="M219.874,168.345 c-22.376,0-40.516,18.14-40.516,40.516c0,22.377,18.14,40.517,40.516,40.517c22.377,0,40.517-18.14,40.517-40.517 C260.391,186.484,242.25,168.345,219.874,168.345z M804.229,168.345c-22.376,0-40.517,18.14-40.517,40.516 c0,22.377,18.141,40.517,40.517,40.517c22.377,0,40.517-18.14,40.517-40.517C844.745,186.484,826.605,168.345,804.229,168.345z M336.173,474.561c1.262-50.694,27.504-60.836,74.152-60.836c46.212,0,73.625,10.389,73.625,61.233s-27.413,61.24-73.625,61.24 h-68.577v62h68.258c51.774,0,83.819,11.957,83.819,70.106c0,58.156-32.044,70.106-83.813,70.1 c-52.23,0.007-83.044-11.749-84.183-69.611h-78.55c0.507,105.331,75.004,134.74,163.11,134.74 c86.31,0,166.116-25.747,166.116-126.439c0-60.895-27.777-92.686-73.118-110.009c39.923-16.998,63.679-46.181,63.679-100.315 c0-94.111-75.96-118.336-156.696-118.336c-82.257,0-151.784,27.726-153.873,126.128H336.173z M774.763,795.069V352.72h-57.33 l-97.219,25.175v68.532l71.472-18.273v366.916H774.763z M1012,726.142L778.004,959.853H70.752C38.305,959.853,12,933.547,12,901.1 V122.901c0-32.448,26.305-58.753,58.752-58.753h880.539c32.448,0,58.752,26.305,58.752,58.753L1012,726.142z" /> </symbol> </svg> <div id="nav-wrapper" class="grid-block vertical"> <div id="top-nav-wrapper" class="grid-block"> <div id="top-nav-left" class="grid-block align-left"> <a class="nav-menu-btn hide-for-medium" href="#">Menu<span></span></a> <a class="hide icon nav-logo show-for-medium " href="#"> <svg class="hide"> <use xlink:href="#icon-logo"></use> </svg> </a> <a class="icon nav-logo show-for-medium " href="#"> SocialDays </a> </div> <div id="top-nav-middle" class="grid-block align-center hide-for-medium"> </div> <div id="top-nav-right" class="grid-block align-right"> <a class="icon" href="#"> <svg> <use xlink:href="#icon-search"></use> </svg> </a> <a class="icon show-for-medium" href="#"> <svg> <use xlink:href="#icon-more-vert"></use> </svg> </a> <a class="show-for-medium" href="#"> Sign In </a> </div> </div> <div id="header-nav-wrapper" class="hide grid-block"> <h1>Heading</h1> </div> <div id="bottom-nav-wrapper" class=""> <div id="bottom-nav-container" class="grid-block align-center show-for-medium"> <div id="bottom-nav-left" class="grid-block align-left"></div> <div id="bottom-nav-middle" class="grid-block align-center"> <a href="#" class="active">What's On</a> <a href="#" class="">Create an Event</a> <a href="#" class="">Join Us</a> <a href="#" class="">About</a> </div> <div id="bottom-nav-right" class="grid-block align-right"></div> </div> </div> </div> <div id="main-wrapper" class="grid-block"> <div id="main-container" class="grid-block"> <div id="content-wrapper" class="grid-block vertical"> <div id="filter-wrapper" class="vertical medium-horizontal grid-block align-center"> <div class="show-for-medium medium-3 grid-content"> <select name="" id=""> <option value="">Adelaide</option> <option value="">Brisbane</option> <option value="">Sydney</option> <option value="">Melbourne</option> <option value="">Perth</option> </select> </div> <div class="show-for-medium medium-3 grid-content"> <select name="" id=""> <option value="">All Categories</option> <option value="">Food Offers</option> <option value="">Drink Specials</option> <option value="">Festivals</option> <option value="">Music</option> <option value="">Comedy</option> </select> </div> <div class="show-for-medium medium-3 grid-content"> <select name="" id=""> <option value="">Today</option> <option value="">Tomorrow</option> <option value="">Sunday</option> <option value="">Monday</option> <option value="">Tuesday</option> <option value="">Wednesday</option> </select> </div> <div class="show-for-medium medium-2 grid-content"> <a href="#" class="expand button">Filter</a> </div> <div class="hide-for-medium small-12 grid-content"> <a href="#" class="expand button">Filter Options</a> </div> </div> <div id="list-wrapper" class="grid-block wrap"> <div id="list-container" class="grid-block"> <div class="grid-block vertical"> <a href="#" id="list-image" class="grid-block" style="background-image: url(https://socialdays.com.au/test/album-1.jpg)"></a> <div id="details-container" class="one grid-block"> <a href="#" class="grid-block vertical"> <h4>The Republic</h4> <h6> <svg><use xlink:href="#icon-query-builder"></use></svg> From 7pm </h6> </a> <a href="#" class="grid-block vertical align-center shrink"> <svg> <use xlink:href="#icon-event_note"></use> <use xlink:href="#icon-event_available"></use> </svg> </a> </div> </div> </div> <div id="list-container" class="grid-block"> <div class="grid-block vertical"> <a href="#" id="list-image" class="grid-block" style="background-image: url(https://socialdays.com.au/test/album-2.jpg)"></a> <div id="details-container" class="one grid-block"> <a href="#" class="grid-block vertical"> <h4>Maid & Magpie</h4> <h6> <svg><use xlink:href="#icon-query-builder"></use></svg> 7pm - Late </h6> </a> <a href="#" class="grid-block vertical align-center shrink"> <svg> <use xlink:href="#icon-event_note"></use> <use xlink:href="#icon-event_available"></use> </svg> </a> </div> </div> </div> <div id="list-container" class="grid-block"> <div class="grid-block vertical"> <a href="#" id="list-image" class="grid-block" style="background-image: url(https://socialdays.com.au/test/album-3.jpg)"></a> <div id="details-container" class="one grid-block"> <a href="#" class="grid-block vertical"> <h4>The Oakden</h4> <h6> <svg><use xlink:href="#icon-query-builder"></use></svg> 6 - 10pm </h6> </a> <a href="#" class="grid-block vertical align-center shrink"> <svg> <use xlink:href="#icon-event_note"></use> <use xlink:href="#icon-event_available"></use> </svg> </a> </div> </div> </div> <div id="list-container" class="grid-block"> <div class="grid-block vertical"> <a href="#" id="list-image" class="grid-block" style="background-image: url(https://socialdays.com.au/test/album-4.jpg)"></a> <div id="details-container" class="one grid-block"> <a href="#" class="grid-block vertical"> <h4>2KW</h4> <h6> <svg><use xlink:href="#icon-query-builder"></use></svg> From 11pm </h6> </a> <a href="#" class="grid-block vertical align-center shrink"> <svg> <use xlink:href="#icon-event_note"></use> <use xlink:href="#icon-event_available"></use> </svg> </a> </div> </div> </div> <div id="list-container" class="grid-block"> <div class="grid-block vertical"> <a href="#" id="list-image" class="grid-block" style="background-image: url(https://socialdays.com.au/test/album-5.jpg)"></a> <div id="details-container" class="one grid-block"> <a href="#" class="grid-block vertical"> <h4>Bye Bye Birdie</h4> <h6> <svg><use xlink:href="#icon-query-builder"></use></svg> From 8pm </h6> </a> <a href="#" class="grid-block vertical align-center shrink"> <svg> <use xlink:href="#icon-event_note"></use> <use xlink:href="#icon-event_available"></use> </svg> </a> </div> </div> </div> <div id="list-container" class="grid-block"> <div class="grid-block vertical"> <a href="#" id="list-image" class="grid-block" style="background-image: url(https://socialdays.com.au/test/album-6.jpg)"></a> <div id="details-container" class="one grid-block"> <a href="#" class="grid-block vertical"> <h4>Clever Little Taylor</h4> <h6> <svg><use xlink:href="#icon-query-builder"></use></svg> 10 - 11pm </h6> </a> <a href="#" class="grid-block vertical align-center shrink"> <svg> <use xlink:href="#icon-event_note"></use> <use xlink:href="#icon-event_available"></use> </svg> </a> </div> </div> </div> <div id="list-container" class="grid-block"> <div class="grid-block vertical"> <a href="#" id="list-image" class="grid-block" style="background-image: url(https://socialdays.com.au/test/album-2.jpg)"></a> <div id="details-container" class="one grid-block"> <a href="#" class="grid-block vertical"> <h4>Bye Bye Birdie</h4> <h6> <svg><use xlink:href="#icon-query-builder"></use></svg> From 8pm </h6> </a> <a href="#" class="grid-block vertical align-center shrink"> <svg> <use xlink:href="#icon-event_note"></use> <use xlink:href="#icon-event_available"></use> </svg> </a> </div> </div> </div> <div id="list-container" class="grid-block"> <div class="grid-block vertical"> <a href="#" id="list-image" class="grid-block" style="background-image: url(https://socialdays.com.au/test/album-1.jpg)"></a> <div id="details-container" class="one grid-block"> <a href="#" class="grid-block vertical"> <h4>The Republic</h4> <h6> <svg><use xlink:href="#icon-query-builder"></use></svg> From 7pm </h6> </a> <a href="#" class="grid-block vertical align-center shrink"> <svg> <use xlink:href="#icon-event_note"></use> <use xlink:href="#icon-event_available"></use> </svg> </a> </div> </div> </div> </div> </div> <div class="sidebar-wrapper show-for-large"> <div class="sidebar-advert"> <div class="advert-container"></div> <p>Advertisement</p> </div> <div class="sidebar-highlight"> <h4>Featured Events<h4> </div> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >$(function() { //run when the DOM is ready $(".nav-menu-btn").click(function() { //use a class, since your ID gets mangled $(this).toggleClass("nav-menu-btn-active"); //add the class to the clicked element }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Black Dashboard React
Filter elements, sidebar filter panel bootstrap 4
Easy Table Filter
Panel Tables with Filter

Questions / Comments: