@font-face { font-family: 'icons'; src: url('fonts/icon/liberties_20191115.woff2') format('woff2'), url('fonts/icon/liberties_20191115.woff') format('woff'); font-weight: normal; font-style: normal;font-display: fallback ; } /* cyrillic-ext */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; font-display: swap; src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xFIzIFKw.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; font-display: swap; src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xMIzIFKw.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; font-display: swap; src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xEIzIFKw.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; font-display: swap; src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xLIzIFKw.woff2) format('woff2'); unicode-range: U+0370-03FF; } /* vietnamese */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; font-display: swap; src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xHIzIFKw.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; font-display: swap; src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xGIzIFKw.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; font-display: swap; src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzI.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2'); unicode-range: U+0370-03FF; } /* vietnamese */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2'); unicode-range: U+0370-03FF; } /* vietnamese */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2'); unicode-range: U+0370-03FF; } /* vietnamese */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; font-display: swap; src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfCRc4EsA.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; font-display: swap; src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfABc4EsA.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; font-display: swap; src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfCBc4EsA.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; font-display: swap; src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBxc4EsA.woff2) format('woff2'); unicode-range: U+0370-03FF; } /* vietnamese */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; font-display: swap; src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfCxc4EsA.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; font-display: swap; src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfChc4EsA.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; font-display: swap; src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBBc4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /*@font-face {font-family: 'Plex'; font-style: normal; font-weight: 300; src: url('fonts/IBM-Plex-Sans/IBMPlexSans-Light.woff2') format('woff2'), url('fonts/IBM-Plex-Sans/IBMPlexSans-Light.woff') format('woff');font-display: fallback ; } @font-face {font-family: 'Plex'; font-style: normal; font-weight: 400; src: url('fonts/IBM-Plex-Sans/IBMPlexSans-Regular.woff2') format('woff2'), url('fonts/IBM-Plex-Sans/IBMPlexSans-Regular.woff') format('woff');font-display: fallback ; } @font-face {font-family: 'Plex'; font-style: italic; font-weight: 400; src: url('fonts/IBM-Plex-Sans/IBMPlexSans-Italic.woff2') format('woff2'), url('fonts/IBM-Plex-Sans/IBMPlexSans-Italic.woff') format('woff');font-display: fallback ; } @font-face {font-family: 'Plex'; font-style: normal; font-weight: 400; src: url('fonts/IBM-Plex-Sans/IBMPlexSans-Regular.woff2') format('woff2'), url('fonts/IBM-Plex-Sans/IBMPlexSans-Regular.woff') format('woff');font-display: fallback ; } @font-face {font-family: 'Plex'; font-style: normal; font-weight: 500; src: url('fonts/IBM-Plex-Sans/IBMPlexSans-Medium.woff2') format('woff2'), url('fonts/IBM-Plex-Sans/IBMPlexSans-Medium.woff') format('woff');font-display: fallback ; } @font-face {font-family: 'Plex'; font-style: normal; font-weight: 700; src: url('fonts/IBM-Plex-Sans/IBMPlexSans-Bold.woff2') format('woff2'), url('fonts/IBM-Plex-Sans/IBMPlexSans-Bold.woff') format('woff');font-display: fallback ; }*//* RESET */ /* ----------------------------------------- */ *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td, object, button { margin:0; padding:0 } table { border-collapse:collapse; border-spacing:0 } fieldset, img { border:0 } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal } ol, ul, li {list-style:none;} caption, th { text-align:left } h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal } html{ box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } q:before, q:after { content:''} /*sup {vertical-align: super;} sub {vertical-align: sub;}*/ sup, sub { vertical-align:baseline; position: relative; top:-0.5em; font-size:0.8em;/**/ } sub { top: 1em; } .clear { clear:both; } .clearfix:after, .module:after { content: " "; display: table; clear: both; } #skiptocontent, .screen-reader-text {display:none;} /* Global reset-RESET */ /* The below restores some sensible defaults */ em, i { font-style:italic !important; font-weight:inherit !important; } a img { border:none } /* Gets rid of IE's blue borders */ a { text-decoration:none; } a:active, a:focus, button {outline: none; border:none; -moz-outline-style: none;} input:focus, select:focus, textarea:focus, button:focus { outline: none; } ::selection { background:#3bb25e; color:#FFF; /* WebKit/Blink Browsers */ } ::-moz-selection { background: #3bb25e ; color:#FFF; /* Gecko Browsers */ } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* TYPE */ html { font-size:62.5%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; height: 100%; } @media all and (max-width: 767px) { /*html { font-size:87.5%; } */ } body { display: flex; flex-direction: column; min-height: 100%; font-family: 'Roboto',sans-serif; font-weight: 400; font-style:normal; line-height:1.4; color:#464646; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background:#E5E5E5; overflow-x:hidden; overflow-y: scroll; /* has to be scroll, not auto */ -webkit-overflow-scrolling: touch; transition:transform 0.4s ease; } .text ul, #footer ul { margin-bottom:1.8rem; } .text li { margin:0 0 0.5em 0; list-style:none; } .heading,p.img span, blockquote p, h1, h2, h3 { font-size: 3.2rem; margin: 0 0 0.75em 0; line-height:1.2; font-weight:900; /*font-family: 'chivo',sans-serif;*/ color: #000; } h3 {font-size: 2.8rem; } h1 { font-weight: 700; } .centred { text-align: center; } hr { border: 0; height: 1px; margin: 3rem 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(98, 2, 238, 0.5), rgba(255, 255, 255, 0)); } blockquote cite, p, li { font-size:1.6rem; font-weight:400; margin-bottom:1em;} div.profiles>div>div p, .textcontent p, .textcontent li { font-size: 2.1rem; line-height: 1.5238095238095238095238095238095; } p strong, li strong { font-weight: 700; } blockquote p { margin-bottom: 0; } blockquote { padding:0 3rem; border-left: 5px solid #f86b52; display: block; width: 100%; margin: 32px auto; max-width:calc(798px + 10px + 6rem); } blockquote cite { margin: 0.5em 0 ; font-weight: 500; display: block;} @media all and (max-width: 1199px) { blockquote p,p.img span, h1, h2, h3 {font-size: 2.8rem; } h3 {font-size: 2.4rem; } blockquote p {font-size: 3.2rem; line-height: 1.15625; } div.profiles>div>div p, .textcontent p, .textcontent li { font-size: 1.8rem; line-height:1.5; } p, li { font-size:1.6rem; } } @media all and (max-width: 599px) { p.img span, h1, h2, h3 {font-size: 2.4rem; } h3 {font-size: 2.1rem; } blockquote{padding:0 2rem;} blockquote p {font-size: 2.4rem; line-height: 1.1666666666666666666666666666667; } blockquote cite, p, li { font-size:1.4rem; } } @media all and (min-width:1200px) { blockquote p { font-size: 4.2rem; line-height: 1.1428571428571428571428571428571;} } blockquote p { } h3 { } /*p.img {margin: 0 !important; padding: 0 !important} p.img img { width: 90%; height: 90%; object-fit:contain; object-position:50% 0; display:block; } */ div.profiles>div>div p, .textcontent li, .textcontent p { max-width: 130em; } div.profiles>div>div p strong, .textcontent li strong, .textcontent p strong { font-weight:700; } div.profiles>div>div p a, .textcontent p:not(.addbusiness) a, .textcontent li a { transition: all 0.2s ease; font-weight:700; color: #464646; display: inline-block; position: relative; text-decoration: underline; } div.profiles>div>div p a:hover, .textcontent p a:hover, .textcontent li:hover, .textcontent li a:hover { color: #3BB25E } .textcontent ol li, .textcontent ul li { margin-left: 1em; list-style: disc; margin-bottom:0.5em; position: relative; } .textcontent ol li { list-style: decimal; } .textcontent ul li::before { } .textcontent ul li ul{ margin-top:0.5em; } .textcontent ul li ul li{ list-style: circle; } .textcontent ul, .textcontent ul { margin-bottom:2.4em; } .introtext p:first-child { font-size: 2.4rem; font-weight: 500; line-height: 1.3333333333333333333333333333333; } @media (max-width: 899px) { .textcontent ol li, .textcontent ul li { margin-left: 1em; } } @media (max-width: 599px) { .textcontent ul li {margin-left: calc(1em + 8px);} .textcontent ul li::before { display: inline-block; width: 8px; height: 8px; margin:0 0 0.1666666666666667em 0; position: absolute; left: calc(-1em - 4px); top: calc(0.7em - 4px); } } .textcontent img { display: block; max-width: 100%; height: auto;} .textcontent a { transition: all 0.2s ease; } figcaption { font-size:1.6rem; color:#666; } #load_here+.textcontent { margin-top: 48px;} .textcontent { padding: 18px;} .textcontent { display: block; width: 100%; margin: 16px auto; max-width:600px; } figcaption span.textcontent { margin: 0 auto;} .tencol { width: 100%; max-width:1001px; margin: 0 auto;} .vidholder { width: 100%; margin: 32px auto 16px; max-width:1204px; } .vidholder>div { width: 100%; height: 0; padding-bottom: 56.25%; position: relative; } .vidholder>div iframe { width: 100%; height: 100%; position: absolute; left: 0; top: 0;} ul.social { display: flex; align-items: flex-start; } div.shopinfo ul.social { margin:12px 12px 0; padding: 12px 0 8px;border-top: 1px solid #C4C4C4; } #footer ul.social { margin: 0 0 0; padding: 0 0 0; border:none;} ul.social li { display: inline-block; position:relative; font-size:1.5rem; line-height: 1; width: 36px; height: 36px; margin:0 16px 1em 0 ; } ul.social li:last-child { margin-right: 0;} ul.social li a { display:block; border: 1px solid #3BB25E; border-radius: 100%; text-decoration:none; overflow: hidden; width:36px; height:36px; overflow:hidden; margin: 0 auto !important; transition: all 0.2s ease;padding: 0.0833333333333333rem; background-position: center; background-size: contain; background-repeat: no-repeat; } body { background-image: url( "images/icons/facebook.php?colour=ffffff"), url( "images/icons/twitter.php?colour=ffffff"), url( "images/icons/insta.php?colour=ffffff"), url( "images/icons/linkedin.php?colour=ffffff"); background-position: -100px -100px, -100px -100px, -100px -100px, -100px -100px; background-repeat: no-repeat; background-size: 1px 1px; } ul.social li a span { height: 0; width: 0; position: absolute; overflow: hidden; } ul.social li a[href*="facebook"] { background-image: url( "images/icons/facebook.php?colour=3BB25E"); } ul.social li a[href*="twitter"]{ background-image: url( "images/icons/twitter.php?colour=3BB25E"); } ul.social li a[href*="instagram"]{ background-image: url( "images/icons/insta.php?colour=3BB25E"); } ul.social li a[href*="linkedin"]{ background-image: url( "images/icons/linkedin.php?colour=3BB25E"); } #footer ul.social li a { border: 1px solid #464646; } #footer ul.social li a[href*="facebook"] { background-image: url( "images/icons/facebook.php?colour=464646"); } #footer ul.social li a[href*="twitter"]{ background-image: url( "images/icons/twitter.php?colour=464646"); } #footer ul.social li a[href*="instagram"]{ background-image: url( "images/icons/insta.php?colour=464646"); } #footer ul.social li a[href*="linkedin"]{ background-image: url( "images/icons/linkedin.php?colour=464646"); } ul.social li a[href*="facebook"]:hover {background-image: url( "images/icons/facebook.php?colour=ffffff") !important; background-color:#3b5998; border: 1px solid #3b5998 !important; } ul.social li a[href*="twitter"]:hover {background-image: url( "images/icons/twitter.php?colour=ffffff") !important; background-color:#1da1f2; border: 1px solid #1da1f2 !important; } ul.social li a[href*="instagram"]:hover {background-image: url( "images/icons/insta.php?colour=ffffff") !important; background-color:#8134af; border: 1px solid #8134af !important; } ul.social li a[href*="linkedin"]:hover{ background-image: url( "images/icons/linkedin.php?colour=ffffff") !important;background-color:#0077B5; border: 1px solid #0077B5 !important;} .profiles ul.social li a[href*="linkedin"] {background-color:#0077B5; border: 1px solid #0077B5 !important; background-image: url( "images/icons/linkedin.php?colour=ffffff") !important; } .profiles ul.social li a[href*="linkedin"]:hover { filter:brightness(125%);}#masthead { height: 90px; transition: all 0.2s ease; background: white; position: fixed; width: 100%; top:0; left: 0; z-index: 99; display: flex; justify-content: center; align-items: center; box-shadow: 4px 0px 8px rgba(0, 0, 0, 0.25); /**/ } #masthead>div { width: 100%; max-width: 1500px; padding: 0 30px; height: 90px; display: flex; justify-content: flex-start; align-items: center; } #pagecontent { padding:120px 12px 12px;} @media all and (max-width: 899px) { #pagecontent {padding-top:150px; } } #masthead #logo {color: white; transition: all 0.2s ease; margin: auto 18px auto 0; width: 80px; font-weight: 700; } #masthead #logo a{ overflow: hidden; width: 80px; height: 54px; background-size:contain; background-repeat: no-repeat; background-position: center;display: block; background-image: url("images/shoplocal_.php?colour=3BB25E"); transition: all 0.2s ease; } @media all and (max-width: 899px) { #masthead #logo a{ width:110px; height: 72px; background-position: left center; } } #masthead #logo a span { position: fixed; top: -100px;} @media all and (min-width: 900px) { #masthead #logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } } #navside { margin-left: auto;} p.addbusiness { font-size: 16px; } p.addbusiness a { border-radius: 20px; padding: 0 1.5em 0 /*calc(28px + 1em)*/; line-height: 32px; font-weight: 500; display: inline-block; background: #E2F3E7; background: #1F5C32; color: #3BB25E; color: #FFF; height: 32px; /*display: flex;*/ align-items: center; position: relative; transition: all 0.2s ease; border:2px solid #48B062; } /*p.addbusiness a::before { display:block;height: 32px; width: 32px; background: #3BB25E; border-radius: 50%; position: absolute; top: 0; left: 0; text-align: center; content:"";} p.addbusiness a::after {color: white; content:"\002B"; display:block;height: 32px; width: 32px; position: absolute; top: 0; left: 0; text-align: center; font-size: 32px;} */ p.addbusiness a:hover { background: #3BB25E; color :white; box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);} /*#masthead */p.addbusiness {font-size: 14px; } /*#masthead*/ p.addbusiness a { height:40px; line-height: 38px; padding: 0 22px 0 } /*#masthead p.addbusiness a::before, #masthead p.addbusiness a::after { height: 29px; width: 29px; font-size: 27px; } */ #masthead p.addbusiness { animation: flickeringbutton 5s linear ; } @media all and (min-width: 900px) { /* #masthead>div ul.social { order: -10; } */ #masthead>div #navside{ width: 100%; display: flex;} #masthead>div #navside ul.social { order: -10; text-align: left;} #masthead p.addbusiness { margin-left: auto; } } @media all and (max-width: 899px) { #masthead>div #navside ul.social { justify-content: flex-end; } #masthead>div #navside ul.social li { margin-bottom: 0;} #masthead, #masthead>div { height: 120px; } } @keyframes flickeringbutton { 0% { opacity: 1; } 44% { opacity: 1;} 45% { opacity: 0;} 46% { opacity: 0;} 47% { opacity: 1;} 48% { opacity: 0;} 49% { opacity: 0;} 50% { opacity: 1;} 51% { opacity: 1;} 52% { opacity: 1;} 53% { opacity: 0;} 54% { opacity: 1;} } .textcontent p.addbusiness { margin-bottom:1.5em;} @media all and (max-width: 899px) { } @media all and (min-width: 900px) { } @media all and (min-width: 1200px) { } @media all and (min-width: 1500px) { } #footer { background: #EEE6EE; box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.25);} div.processing #shopform, div.processing #mapshow, div.processing #load_here>div { opacity: 0.333; pointer-events: none; } div.processing #load_here::before { display: block; content:"Loading businesses"; height: 60px; padding-top: 24px; margin: 10px 0 0; background: url("images/loader2.gif"); background-size:128px 16px; background-position:center top; background-repeat: no-repeat; pointer-events: none; mix-blend-mode: multiply; text-align: center; color:#3BB25E; font-size: 14px; /*animation: changeprocessingtext 16s linear infinite alternate; */ } @keyframes changeprocessingtext { /*5% { color:#3BB25E; content: attr(data-businesses);*/ 5% { color:#3BB25E; content: "Loading businesses"; } 16% { content: "Arts \0026 \00a0 Crafts";} 26% { content: "Books \0026 \00a0 Stationery";} 36% { content: "Cafes \0026 \00a0 Restaurants";} 46% { content: "Food \0026 \00a0 Drink";} 56% { content: "Garden";} 66% { content: "Health \0026 \00a0 Beauty";} 76% { content: "Home";} 86% {content: "Lifestyle";} 100% { color:#3BB25E; content: "Loading businesses";} } .wrapper {max-width: 900px; margin: 0 auto 24px; border-left: 18px solid transparent; border-right: 18px solid transparent; } form .wrapper { margin: 0 auto 12px; overflow:auto;} /*@media all and (max-width:325px) { */ @media all and (max-width:449px) { .wrapper {border-left: none; border-right: none; } } #welcome{ padding: 8px 18px; margin: 0 auto 12px; } #welcome p {font-weight: 800; font-size: 16px; line-height: 22px; margin-bottom: 0.25em;} #welcome p a { color: black; text-decoration: underline;} #welcome p a:hover { opacity: 0.8;} #listholder { max-width: 1500px; margin: 0 auto 12px;} #listholder>ul {padding: 0; margin: 0 0 0;} #listholder>ul>li { background: #FFFFFF; list-style: none; position: relative; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 8px; margin: 0 0 24px; /* */} @media all and (min-width:900px) { .mainlist { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;} .mainlist>li{ width: calc(50% - 12px); } .mainlist::after { display: block; height: 1px; width: calc(50% - 12px); content:""; } } @media all and (min-width:1200px) { .mainlist { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;} .mainlist>li{ width: calc(33% - 16px); } .mainlist::after { display: block; height: 1px; width: calc(33% - 16px); content:""; } } .mainlist { position: fixed; left: 200vw; top: 110%; opacity: 0; transition: opacity 0.3s ease-in-out;} .mainlist:first-child, .mainlist.shown { position: relative; left: 0; top: 0; opacity: 1;} #listholder>ul>li>header { height:100px; transition: all 0.4s ease; border-radius: 8px; background: #3BB25E; position: relative; display: flex; justify-content: flex-start; overflow: hidden; } #listholder>ul>li>p.openshop { width: 100%; height: 45px; position: absolute; left: 50%; bottom:0; transform: translate(-50%,50%); margin: 0; z-index: 30;} #listholder>ul>li>p.openshop::before { display: block; width: 28px; height: 28px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); content:""; background: #3BB25E; border-radius: 50%; box-shadow: -4px -4px 4px rgba(0, 0, 0, 0.25);} #listholder>ul>li>p.openshop>b{display: block; width: 16px; height: 16px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } #listholder>ul>li>p.openshop>b::before { display: block; content:""; background: white; height: 2px; width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } #listholder>ul>li>p.openshop>b::after { display: block; content:""; background: white; width: 2px; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: all 0.1s ease; } #listholder>ul>li.expanded>p.openshop>b::after {height: 0;} #listholder>ul>li.expanded>header { height: 160px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #listholder>ul>li>header p.banner {position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; z-index:1; opacity:1; } #listholder>ul>li>header p.banner img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } #listholder>ul>li>header p.logo { width: 62px; min-width: 62px; height: 62px; border-radius: 50%; overflow: hidden; position: relative; z-index: 10; margin: 8px 12px 8px 12px; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25); background: #3BB25E;} #listholder>ul>li>header p.logo img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } #listholder>ul>li>header p.logo span{ font-size: 8px; color: white; line-height: 1.2; display: inline-block; height: 34px; width: 48px; margin: 14px 7px; display: flex; align-items: center;} #listholder>ul>li>header h2 { position: relative; z-index: 10; margin: 12px auto 8px 0; color: white; font-weight: 500;font-size: 16px; line-height: 21px; flex: 1; } #listholder>ul>li>header p.distance { position: relative; z-index: 10; margin: 16px 12px 8px 24px; color: #80B2FE;font-size: 14px; line-height: 16px; text-align: right; min-width: 8em; } @media all and (max-width:325px) { #listholder>ul>li>header p.distance { font-size: 0; min-width:3em; margin: 16px 12px 8px 12px; } #listholder>ul>li>header p.distance strong{ font-size: 12px;} } body.single-listings .mainlist::after { display: none; } body.single-listings #listholder>ul.mainlist>li { margin: 0 auto 24px; } #listholder>ul>li>header p.distance strong { font-weight: 900;} #listholder>ul>li>header::before{ opacity:1; transition:all 0.2s ease; content:""; display:block; top:0; left:0; width:100%; height:100px ; pointer-events: none; position:absolute; box-sizing: content-box; z-index: 5; background: -webkit-linear-gradient(top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.738) 19%, hsla(0, 0%, 0%, 0.541) 34%, hsla(0, 0%, 0%, 0.382) 47%, hsla(0, 0%, 0%, 0.278) 56.5%, hsla(0, 0%, 0%, 0.194) 65%, hsla(0, 0%, 0%, 0.126) 73%, hsla(0, 0%, 0%, 0.075) 80.2%, hsla(0, 0%, 0%, 0.042) 86.1%, hsla(0, 0%, 0%, 0.021) 91%, hsla(0, 0%, 0%, 0.008) 95.2%, hsla(0, 0%, 0%, 0.002) 98.2%, hsla(0, 0%, 0%, 0) 100% ); background: linear-gradient(top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.738) 19%, hsla(0, 0%, 0%, 0.541) 34%, hsla(0, 0%, 0%, 0.382) 47%, hsla(0, 0%, 0%, 0.278) 56.5%, hsla(0, 0%, 0%, 0.194) 65%, hsla(0, 0%, 0%, 0.126) 73%, hsla(0, 0%, 0%, 0.075) 80.2%, hsla(0, 0%, 0%, 0.042) 86.1%, hsla(0, 0%, 0%, 0.021) 91%, hsla(0, 0%, 0%, 0.008) 95.2%, hsla(0, 0%, 0%, 0.002) 98.2%, hsla(0, 0%, 0%, 0) 100% ); } #listholder>ul>li>div.shopinfo { padding: 8px 8px 23px; display: none;} #listholder>ul>li>div.shopinfo>p { margin: 0; } a.shopbutton, p.shopbutton { display: block; display: flex; border-radius: 4px; color:white; font-size: 16px; padding: 8px 12px ; line-height: 20px; background: #3BB25E; margin:0 0 8px !important; text-decoration:none; align-items: center;} a.shopbutton, p.shopbutton { font-weight: 700; } a.shopbutton>span, p.shopbutton>span { font-weight: 400; } div.delivery{background:#7655BE; display: flex; border-radius: 4px; color:white; font-size: 16px; padding: 8px 12px ; line-height: 20px; margin:0 0 8px !important; } div.delivery>div {} div.delivery>div>p {font-size: 16px; line-height: 32px; margin: 0; font-weight: 700;} div.delivery>div>div>p { font-size: 14px; line-height: 18px; margin: 0;} .shopbutton.phone{background:#BA0270; } .shopbutton.delivery{background:#7655BE; } .shopbutton.collection{background:#4C91F6; } .shopbutton {display: flex; justify-content: flex-start;} .shopbutton span{display:inline-block; margin-left: auto;} .shopbutton::before { width: 32px; min-width: 32px; height:32px; display: inline-block; margin-right:8px; content:"";background-size:contain;background-repeat: no-repeat;} .shopbutton.delivery::before { background-image:url("images/icons/delivery.svg"); } .shopbutton.collection::before { background-image:url("images/icons/collection.svg"); } .shopbutton.phone::before { background-image:url("images/icons/phone.svg"); } .shopbutton.online::before { background-image:url("images/icons/order.svg"); } .shopbutton.online2::before { background-image:url("images/icons/cursor3.svg"); } a.shopbutton,p.shopbutton.collection{ transition: all 0.2s ease; } a.shopbutton:hover,p.shopbutton.collection:hover{ box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22); filter: brightness(115%); } #listholder>ul>li>div.shopinfo>div.open { padding:8px 12px;} #listholder>ul>li>div.shopinfo>div.open p a {color:#464646; text-decoration: underline; word-wrap: break-word; transition:all 0.2s ease; } #listholder>ul>li>div.shopinfo>div.open p a:hover { color: #3BB25E; } div.shopmap { border-radius: 4px; } div.shopmap.mapopened { height:250px; margin: 8px 0 ; } .contactinfo {display:flex;justify-content:space-between; flex-wrap: wrap;} .contactinfo>h3 { width: 100%; font-size: 16px; color:#3BB25E; font-weight: 700; } .contactinfo>div { width: calc(50% - 6px); } .contactinfo p { font-size: 14px; line-height: 18px; margin: 0 0 9px; } .contactinfo p a {color:#464646; text-decoration: underline; word-wrap: break-word; } .contactinfo p a:hover { color:#3BB25E; } @media all and (max-width:325px) { div.delivery>div>p, a.shopbutton, p.shopbutton { font-size: 14px; } .contactinfo p { font-size: 12px; } } body.single-listings #listholder>ul.mainlist>li .shopinfo { display: block !important; } body.single-listings #listholder>ul.mainlist>li p.openshop { display: none; } body.single-listings #listholder>ul>li>header { pointer-events: none; height: 160px !important; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } body.single-listings #listholder>ul>li>div.shopinfo {padding-bottom: 0;} input#showmap /*, form#listings_search #searchsubmit, form#filter ul li input[type='checkbox'], input#showfilter */ { visibility: hidden; position: fixed; left: -9999px; top: -9999px;} #mapholder { box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); margin: 0 0 24px; border-radius: 8px; overflow: hidden; width:100vw;} #listingsmap { width:100%; height: 650px;} .listings_list #mapholder, #showmap:checked~div>div>.listings_list #listholder { position: fixed; left: -9000px; top:-9000px; pointer-events: none; z-index: -1;} .listings_list #listholder, #showmap:checked~div>div>.listings_list #mapholder { width:100%; position: relative; z-index: 10; left:0; top: 0; pointer-events: auto;} p#catshow { font-size: 14px; line-height: 16px; } p#mapshow { font-weight: 900; font-size: 14px; line-height: 16px; max-width: 900px; margin: 0 auto 24px; margin: 0 auto 12px; border-left: 18px solid transparent; border-right: 18px solid transparent; } @media all and (min-width:450px) { p#mapshow { border-left: 36px solid transparent; border-right: 36px solid transparent; } } @media all and (min-width:600px) { p#mapshow { display:flex; justify-content: flex-end; } } p#catshow label, p#mapshow b { cursor: pointer; display: inline-block; padding: 7px 7px 6px; border-radius: 4px;} /*p#mapshow span { display: inline-block; padding: 0.5em 0.5em 0.5em 18px; margin-right: auto; } */ p#mapshow label { display: inline-block; margin-left: auto; } /*body.haslocation div#load_here:not(.processing) p#mapshow span::after {content:" within 30km of your location"; } */ body.haslocation div#load_here p#mapshow span em { font-style:normal !important; } body.haslocation div#load_here.processing p#mapshow span em { display: none !important; } p#mapshow b:last-child { margin-left: 18px;} p#mapshow b { background: #C4C4C4; background: #FFF; color: #3D3D3D;font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition:all 0.2s ease; } p#mapshow b:hover { box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22); } p#mapshow label b:first-child { background: #1F5C32; color: #FFF; font-weight: 900;box-shadow: none; } p#catshow label, #showmap:checked~p#mapshow label b { background: #C4C4C4; background: #FFF; color: #3D3D3D;font-weight: 500;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition:all 0.2s ease; } p#catshow label:hover, #showmap:checked~p#mapshow label b:hover { box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);} div#cats>#showcats:checked+p label, #showmap:checked~p#mapshow label b:last-child { background: #1F5C32; color: #FFF; font-weight: 900; box-shadow: none; } p#mapshow b#nearby { padding-left: 24px; position: relative;} p#mapshow b#nearby::after { display: inline; content: "Show businesses near your location"; } body.haslocation p#mapshow b#nearby::after { content: "Businesses ordered by your location"; } body.haslocation p#mapshow b#nearby {opacity:0.666;pointer-events: none; background: #1F5C32; color: #FFF; font-weight: 900; } p#mapshow b#nearby::before { display: block; content:""; width:16px; height: 16px; position: absolute; top: 6px; left:5px; background: none; text-indent: -1000px; cursor: pointer; background-size:16px 16px; background-repeat: no-repeat; background-position: left center ; background-image: url('data:image/svg+xml;utf8,'); } body.haslocation p#mapshow b#nearby::before { background-image: url('data:image/svg+xml;utf8,'); } @media all and (max-width:599px) { p#mapshow label { display: block; margin-top: 18px; } } /*@media all and (max-width:349px) { p#mapshow {border-left: none; border-right: none; } }*/ p.nextshops{ display:flex; justify-content: center; font-size: 14px; margin: 12px auto; position: relative; z-index:9999; line-height: 16px; display: none;} p.nextshops a { cursor: pointer; display: inline-block; padding: 0.5em; border-radius: 4px; background: #C4C4C4; background: #FFF; color: #3D3D3D;font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.2s ease; } p.nextshops a:hover { /*background: #3BB25E; color: #FFF; font-weight: 900;*/ box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);} .mainlist.shown+p.nextshops, body.loaded .mainlist:first-child+p.nextshops{display:flex;} .gm-style .gm-style-iw-d { overflow: hidden !important; } .gm-style .gm-style-iw-c { padding: 0 !important; max-width: 260px !important; } .gm-style .gm-style-iw>button{ filter: invert(1) !important; transform: scale(1.5); transform-origin: right top; z-index: 100; } .gm-style .gm-style-iw .gm-style-iw-d>div>div { position: relative; cursor: pointer; height:100px; background: #3BB25E; display: flex; justify-content: flex-start; overflow: hidden; width: 260px; border-radius: 12px; border:4px solid white; } .gm-style .gm-style-iw .gm-style-iw-d>div p.banner {position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; z-index:1; opacity:1; } .gm-style .gm-style-iw .gm-style-iw-d>div p.banner img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .gm-style .gm-style-iw .gm-style-iw-d>div p.logo { width: 62px; min-width: 62px; height: 62px; border-radius: 50%; overflow: hidden; position: relative; z-index: 10; margin: 8px 12px 8px 12px; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25); background: #3BB25E;} .gm-style .gm-style-iw .gm-style-iw-d>div p.logo img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .gm-style .gm-style-iw .gm-style-iw-d>div p.logo span{ font-size: 8px; color: white; line-height: 1.2; display: inline-block; height: 34px; width: 48px; margin: 14px 7px; display: flex; align-items: center;} .gm-style .gm-style-iw .gm-style-iw-d>div h2 { position: relative; z-index: 10; margin: 12px 25px 8px 0; color: white; font-weight: 500;font-size: 16px; line-height: 21px; flex: 1; } .gm-style .gm-style-iw .gm-style-iw-d>div p.distance { position: relative; z-index: 10; margin: 16px 12px 8px 24px; color: #80B2FE;font-size: 14px; line-height: 16px; text-align: right; min-width: 8em; display: none;} .gm-style .gm-style-iw .gm-style-iw-d>div p.distance strong { font-weight: 900;} .gm-style .gm-style-iw .gm-style-iw-d>div>div::before{ opacity:1; transition:all 0.2s ease; content:""; display:block; top:0; left:0; width:100%; height:100px ; pointer-events: none; position:absolute; box-sizing: content-box; z-index: 5; background: -webkit-linear-gradient(top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.738) 19%, hsla(0, 0%, 0%, 0.541) 34%, hsla(0, 0%, 0%, 0.382) 47%, hsla(0, 0%, 0%, 0.278) 56.5%, hsla(0, 0%, 0%, 0.194) 65%, hsla(0, 0%, 0%, 0.126) 73%, hsla(0, 0%, 0%, 0.075) 80.2%, hsla(0, 0%, 0%, 0.042) 86.1%, hsla(0, 0%, 0%, 0.021) 91%, hsla(0, 0%, 0%, 0.008) 95.2%, hsla(0, 0%, 0%, 0.002) 98.2%, hsla(0, 0%, 0%, 0) 100% ); background: linear-gradient(top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.738) 19%, hsla(0, 0%, 0%, 0.541) 34%, hsla(0, 0%, 0%, 0.382) 47%, hsla(0, 0%, 0%, 0.278) 56.5%, hsla(0, 0%, 0%, 0.194) 65%, hsla(0, 0%, 0%, 0.126) 73%, hsla(0, 0%, 0%, 0.075) 80.2%, hsla(0, 0%, 0%, 0.042) 86.1%, hsla(0, 0%, 0%, 0.021) 91%, hsla(0, 0%, 0%, 0.008) 95.2%, hsla(0, 0%, 0%, 0.002) 98.2%, hsla(0, 0%, 0%, 0) 100% ); } #shop_options p { position: relative; font-weight: 500; font-size: 14px; line-height: 24px; margin: 0 8px 12px 18px; display: flex; align-items: center; } #shop_options p:last-child { margin-bottom: 0;} /*#shop_options p#nearby { opacity:0; pointer-events:none; position: fixed; top: -100px; } body.haslocation #shop_options p#nearby { position:relative; top:0; opacity:1; pointer-events:auto;}*/ body.locationdenied #shop_options p#nearbybox { opacity:0.5; pointer-events:none; } @media all and (min-width:900px) { #shop_options { display: flex; } #shop_options p { display: flex; align-items: center; margin: 0 8px 0 18px; } } #shop_options p label { cursor: pointer; } #shop_options p label input { position: fixed; top: -100px; } #shop_options p label span { display: inline-block; display: flex; align-items: center;} #shop_options p label span::before { display: inline-block; content:""; margin-right: 8px; width: 24px; height: 24px; background: #FFFFFF; border: 2px solid #3BB25E; } #shop_options p label span::after { display:none; content:"";position: absolute; left: 9px; top: 5px; width: 6px; height: 12px; border: solid #3BB25E; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #shop_options p label input:checked ~ span::after { display: block; } p#results { font-weight: 900; font-size: 14px; line-height: 16px; max-width: 900px; margin: 0 auto 24px; margin: 0 auto 12px; border-left: 18px solid transparent; border-right: 18px solid transparent; } /*@media all and (min-width:350px) { */ div#cats { border-left: 18px solid transparent; border-right: 18px solid transparent; } /*}*/ /*div#cats>ul {display: grid; }*/ div#cats>ul { } div#cats>ul>li { display: flex; flex-wrap: wrap; position: relative; } div#cats>ul>li>ul { display: none; width: 100%; padding-top: 12px; /*padding-left: 6px;*/} div#cats>ul>li>ul>li:last-child{ margin-bottom: 0;} div#cats>ul>li>ul>li { font-size: 12px; /*font-weight: 400;*/} div#cats>ul>li>ul>li label span::before { } div#cats>ul>input.showsub { position: fixed; top: -100px; } div#cats>ul>input.showsub:checked+li>ul {display: block;} div#cats>ul>input.showsub:checked+li { border-bottom: 8px solid transparent;} /*div#cats>ul>input.showsub:checked+li::after {display: block; content:""; position: absolute; z-index: -1; top: -4px; left: -4px; width: calc(100% + 8px); height: calc(100% + 8px); background: rgba(255,255,255,0.4);} */ div#cats>ul>input.showsub:checked+li::after {display: block; content:""; position: absolute; z-index: -1; top: -6px; left: -4px; width: 42px; opacity: 0.5; height: calc(100% + 12px); background: #3BB25E; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #3BB25E; background: linear-gradient(90deg, rgba(59,178,94,0.5) 0%, rgba(59,178,94,0) 100%); } div#cats>ul>li>label { position: relative; display: block; } /*div#cats>ul>input.showsub:checked+li>label::after { background: #E5E5E5; height: 5px; content:""; display: block; width: 24px; position: absolute; bottom:-5px; } */ div#cats>ul>li>label.show { pointer-events: auto; margin-left: auto; padding:0 0.5em; font-size: 18px;} div#cats>ul>li>label.show::before { content:"\002B";} div#cats>ul>input.showsub:checked+li>label.show::before { content:"\2212";} div#cats {display: flex; flex-wrap: wrap; justify-content: space-between} div#cats p#catshow {width: 100%;} @media all and (max-width:599px) { div#cats>ul { display: none;} div#cats>p#catshow { cursor: pointer; } div#cats>p label::before { content:"Show\00a0"; } div#cats>#showcats:checked+p label::before { content:"Hide\00a0"; } #cats #showcats:checked~ul {display: block; } div#cats>#showcats:checked+p label { padding-right: 2em; position:relative; } div#cats>#showcats:checked+p label::after { font-size:26px; position:absolute; top: 14px; right:6px; transform:translateY(-50%);content:"\00a0\00D7"; } } div#cats { display: block; } @media all and (min-width:600px) { div#cats { display: flex; } div#cats>p { display: none !important; } div#cats>ul { width: calc(50% - 12px);} } @media all and (min-width:900px) { div#cats>ul { width: calc(25% - 9px);} } /*div#cats p,*/ div#cats li { position: relative; font-weight: 500; font-size: 14px; line-height: 24px; margin: 0 0 12px 0; } div#cats li label.label {display: flex; align-items: center; flex-wrap: wrap; } div#cats li ul { width: 100%;} div#cats p { margin-bottom:18px;} #shop_options p:last-child { margin-bottom: 0;} div#cats li label { cursor: pointer; } div#cats>input, div#cats li label input { position: fixed; top: -100px; } div#cats li label span { display: inline-block; display: flex; align-items: center;} div#cats li label span::before { display: inline-block; content:""; margin-right: 8px; width: 24px; height: 24px; background: #FFFFFF; border: 2px solid #3BB25E; border-radius: 3px; } div#cats li li label span::before { /* margin-left: 8px; */ /*margin-right: 18px;*/ margin-left: 3px; margin-right: 12px; width: 18px; height: 18px; } div#cats li label span::after { display:none; content:"";position: absolute; left: 9px; top: 5px; width: 6px; height: 12px; border: solid #3BB25E; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } div#cats li li label span::after { left: 7px;left: 10px; top: 6px; width: 5px; height: 10px; } div#cats li label input:checked ~ span::after { display: block; } form#shopform p#submit { position: fixed; top: -100px; } form#shopform div#search { position: relative; margin: 0 0 24px;} form#shopform div#search input[type="text"]{ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); background: #EAFFE0; border: 1px solid #3BB25E; box-sizing: border-box; border-radius: 36px; height: 54px; padding: 0 60px 0 18px; font-family: Roboto; font-style: normal; font-weight: 500; font-size: 18px; line-height: 54px; color: #3D3D3D; display: block; width: 100%; } form#shopform div#search input[type="submit"]{ outline: none; border: none; display: block; position: absolute; top: 0; right: 0; width: 54px; height: 54px; background: none; text-indent: -1000px; cursor: pointer; background-size:32px 32px; background-repeat: no-repeat; background-position: center left; background-image: url('data:image/svg+xml;utf8,'); } #listings_top{ position: relative; z-index: 40; } form#listings_search { position: relative; margin: 0 0 24px;} form#listings_search input[type="text"]{ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); background: #EAFFE0; border: 1px solid #3BB25E; box-sizing: border-box; border-radius: 36px; height: 54px; padding: 0 60px 0 18px; font-family: Roboto; font-style: normal; font-weight: 500; font-size: 18px; line-height: 54px; color: #3D3D3D; display: block; width: 100%; } form#listings_search input[type="submit"]{ outline: none; border: none; display: block; position: absolute; top: 0; right: 0; width: 54px; height: 54px; background: none; text-indent: -1000px; cursor: pointer; background-size:32px 32px; background-repeat: no-repeat; background-position: center left; background-image: url('data:image/svg+xml;utf8,'); } div#categories { border-radius: 27px; color: white; background: #3BB25E; padding: 0 18px; margin: 0 0px 24px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); pointer-events: none; opacity:0.25; } body.loaded div#categories{ pointer-events: auto; opacity:1; } div#categories p { height: 54px; line-height: 54px; margin:0; font-size: 18px; line-height: 54px; white-space: nowrap; display: flex; align-items: center; } div#categories p>span{ display: block; } div#categories p>b{ content:""; display: block; margin-left: auto; width: 32px; height:32px; position: relative;} div#categories p>b::after { content:""; display: block; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 13px solid #FFF; position: absolute; top:50%; left: 50%; transform:translate(-50%,-50%); transition:all 0.2s ease; } div#categories p.expanded>b::after { transform:translate(-50%,-50%) rotate(180deg); } div#categories ul { display:none; border-top: 1px dashed #FFFFFF; padding-bottom: 27px;} div#categories ul li { font-size: 18px; line-height: 21px; border-bottom: 1px dashed #FFFFFF; margin: 0; padding: 5px 0 5px; } div#categories ul li a { color: white; font-weight: 500; display: flex; align-items: center;} /*div#categories ul li a::after { width: 32px; height:32px; display: inline-block; margin-left: auto; content:"";background-size:contain; } */ div#categories a { color: white; font-weight: 500; display: flex; align-items: center; width: 100%;} /*div#categories a::after*/ div#categories a span{ width: 32px; height:32px; display: inline-block; margin-left: auto; content:"";background-size:contain; } div#categories a span img { display: inline-block; width: 32px; height:32px; } /*div#categories a[href*="children"]::after { background-image:url("images/cats/children.svg"); } div#categories a[href*="book"]::after { background-image:url("images/cats/book.svg"); } div#categories a[href*="seaf"]::after { background-image:url("images/cats/fish.svg"); } div#categories a[href*="meat"]::after { background-image:url("images/cats/butcher.svg"); } div#categories a[href*="art"]::after { background-image:url("images/cats/art.svg"); } div#categories a[href*="bake"]::after { background-image:url("images/cats/baker.svg"); } div#categories a[href*="garden"]::after { background-image:url("images/cats/flower.svg"); } div#categories a[href*="hard"]::after { background-image:url("images/cats/hardware.svg"); } div#categories a[href*="veg"]::after { background-image:url("images/cats/veg.svg"); } div#categories a[href*="beverages"]::after { background-image:url("images/cats/beverages.svg"); } div#categories a[href*="preserves"]::after { background-image:url("images/cats/preserves.svg"); } */#footer {margin-top: auto;} #footer>div {width:100%; margin: 0 auto; max-width: 1500px; padding: 30px;} @media all and (min-width:900px) { #footer>div { display: flex; justify-content: space-between; } #footer>div>div { width: calc(25% - 20px); margin-left: 40px;} #footer>div>div:first-child { /*width: calc(50% - 20px); */margin: 0;} } @media all and (max-width:899px) { #footer>div>div:not(:last-child){ margin-bottom: 40px;} } #footer>div>div:first-child img { display: block; width:160px; height:auto; } #footer>div>div:first-child { margin-right: auto;} #footer>div>div { display: flex; flex-direction: column; } #footer>div>div:not(:first-child):not(:nth-child(2)) p:last-child { margin-top: auto; } #footer>div>div p { font-size: 16px; line-height: 21px; } #footer>div>div p a { display: inline-block; color: #464646; font-weight: 700; position: relative; transition: all 0.2s ease; } #footer>div>div p a::after { display: inline-block; content:""; background: #464646; width: 100%; height: 1px; position: absolute; bottom:0px; left: 0; transition: all 0.2s ease;} #footer>div>div p a:hover { color: black; color: #3BB25E } #footer>div>div p a:hover::after { background: black; background: #3BB25E; } #footer>div>div:first-child a:after { display: none;} #footer>div>div:first-child p { max-width: 200px; font-size: 12px; line-height: 16px; font-weight: 500;} #footer>div>div:first-child p:first-child { margin-bottom: 18px;} #footer>div>div p a+a { margin-left: 1em;} #footer>div>div:last-child p a{ border: none; } #footer>div>div:last-child p a:hover{ } #footer>div>div:last-child p:last-child { font-size: 14px; line-height: 16px; } #footer>div>div:last-child p:last-child a{transition: all 0.2s ease; color: #000; font-weight: 400; border: none; } #footer>div>div:last-child p:last-child a:hover{ color: #3BB25E } #footer>div>div:last-child p a::after {display: none; transition: all 0.2s ease;} #footer>div>div:last-child p a:hover::after{display: inline-block; background: #3BB25E;} #footer>div>div:last-child p:last-child a strong{ font-weight: 700;} #footer>div>div:nth-child(2) p a::after { display: none !important; } #footer>div>div:nth-child(2) p a img { display: block; height: 70px; width: auto;} @media all and (max-width:899px) { #footer>div>div:last-child p:last-child { margin-top: 40px;} } #cookiewarning { position: fixed; transform: translateX(-100%); left: 0; top: 0; height: 100%; min-width: 275px; width: calc(100% - 60px); max-width: 400px; background: #3BB25E; color: white; box-shadow: 4px 0px 4px rgba(0, 0, 0, 0.25); z-index: 999; padding: 30px; display: flex; flex-direction: column; opacity: 0; } #cookiewarning.loaded { transform: translateX(0); opacity: 1; transition: all 0.5s ease; } #cookiewarning>div:first-child::before { height: 50px; display: block; content:""; background-size:auto 32px; background-repeat: no-repeat; background-position: top left; background-image: url('data:image/svg+xml;utf8,'); } #cookiewarning>div:last-child p {font-size:12px; line-height:14px; margin-bottom: 1.2em; margin: 1em 0 0 ; } #cookiewarning>div:last-child p a { display: inline-block; font-weight: 500; padding: 0.5em 0; color: white; position: relative;} #cookiewarning>div:last-child p a:after { height: 1px; width: 100%; position: absolute; display:block; content: ""; background: white; left: 0; bottom:2px; } #cookiewarning>div:last-child p:first-child { margin-right: 2em; } #cookiewarning>div:last-child { display: flex; /*flex-direction: column; justify-content: flex-end; flex: 1; justify-content: space-between; */margin-top: auto;} #cookiewarning>div:last-child p:last-child a { background: white; border-radius: 4px; color: #3BB25E; padding: 0.5em; } #cookiewarning>div:first-child p:first-child {font-size:14px; line-height:21px; font-weight: 400;} div.profiles { max-width: 648px; margin: 0 auto 24px; border-left: 18px solid transparent; border-right: 18px solid transparent;} div.profiles { display: flex; flex-wrap: wrap; justify-content: space-between; } div.profiles>div { width: 100%; } div.profiles>div>div { padding: 0 24px 48px;} div.profiles>div>header {/*width:100%; height:0; padding-bottom: 50%; border-radius: 10px;*/ position: relative; margin-bottom: 96px; } div.profiles>div>header h3 { position: absolute; bottom:0; right:0; text-align: right; padding: 24px; margin: 0; font-weight: 700; color: white; font-size: 2.4rem; line-height: 1.2; width: 100%; z-index:5; } div.profiles>div>header h3 a { font-weight: 500; color: white; } div.profiles>div>header h3::before{ opacity:1; transition:all 0.2s ease; content:""; display:block; bottom:0; left:0; width:100%; height:calc(100% + 2em) ; position:absolute; box-sizing: content-box; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; z-index:-1; background: -webkit-linear-gradient(bottom, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.738) 19%, hsla(0, 0%, 0%, 0.541) 34%, hsla(0, 0%, 0%, 0.382) 47%, hsla(0, 0%, 0%, 0.278) 56.5%, hsla(0, 0%, 0%, 0.194) 65%, hsla(0, 0%, 0%, 0.126) 73%, hsla(0, 0%, 0%, 0.075) 80.2%, hsla(0, 0%, 0%, 0.042) 86.1%, hsla(0, 0%, 0%, 0.021) 91%, hsla(0, 0%, 0%, 0.008) 95.2%, hsla(0, 0%, 0%, 0.002) 98.2%, hsla(0, 0%, 0%, 0) 100% ); background: linear-gradient(bottom, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.738) 19%, hsla(0, 0%, 0%, 0.541) 34%, hsla(0, 0%, 0%, 0.382) 47%, hsla(0, 0%, 0%, 0.278) 56.5%, hsla(0, 0%, 0%, 0.194) 65%, hsla(0, 0%, 0%, 0.126) 73%, hsla(0, 0%, 0%, 0.075) 80.2%, hsla(0, 0%, 0%, 0.042) 86.1%, hsla(0, 0%, 0%, 0.021) 91%, hsla(0, 0%, 0%, 0.008) 95.2%, hsla(0, 0%, 0%, 0.002) 98.2%, hsla(0, 0%, 0%, 0) 100% ); } div.profiles>div>header>div.banner {width:100%; height:0; padding-bottom: 50%; position: relative; border-radius: 8px; } div.profiles>div>header>div.banner picture {display:block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } div.profiles>div>header>div.banner { margin: 0; } div.profiles>div>header>div.banner picture { z-index: 1; overflow: hidden; border-radius: 8px;} div.profiles>div>header>div.banner img { object-fit: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } div.profiles>div>header>p.headshot {width:160px; height: 160px;position: absolute; top: 100%; left: 24px; border-radius:50%; overflow: hidden; transform:translateY(-50%); z-index: 10; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); } div.profiles>div>header>p.headshot picture { width:100%; height: 100%; position: absolute;left: 0; top: 0;} div.profiles>div>header>p.headshot img { object-fit: cover; width: 100%; height: 100%; } @media all and (min-width: 1200px) { div.profiles { max-width: 1500px; } div.profiles>div { width: calc(50% - 20px); } div.profiles>div>header>div.banner{padding-bottom: 33.33%; } } @media all and (min-width: 1500px) { } @media all and (max-width: 499px) { div.profiles>div>header {margin-bottom: 56px;} div.profiles>div>header>p.headshot {width: 90px; height: 90px;} div.profiles>div>header h3 { padding:18px 24px; bottom:auto; top:0; color: white; font-size: 1.8rem; } div.profiles>div>header h3::before{ bottom:auto; top: 0; left:0; width:100%; height:calc(100% + 2em) ; box-sizing: content-box; border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 8px; border-top-left-radius: 8px; z-index:-1; background: -webkit-linear-gradient(top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.738) 19%, hsla(0, 0%, 0%, 0.541) 34%, hsla(0, 0%, 0%, 0.382) 47%, hsla(0, 0%, 0%, 0.278) 56.5%, hsla(0, 0%, 0%, 0.194) 65%, hsla(0, 0%, 0%, 0.126) 73%, hsla(0, 0%, 0%, 0.075) 80.2%, hsla(0, 0%, 0%, 0.042) 86.1%, hsla(0, 0%, 0%, 0.021) 91%, hsla(0, 0%, 0%, 0.008) 95.2%, hsla(0, 0%, 0%, 0.002) 98.2%, hsla(0, 0%, 0%, 0) 100% ); background: linear-gradient(top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.738) 19%, hsla(0, 0%, 0%, 0.541) 34%, hsla(0, 0%, 0%, 0.382) 47%, hsla(0, 0%, 0%, 0.278) 56.5%, hsla(0, 0%, 0%, 0.194) 65%, hsla(0, 0%, 0%, 0.126) 73%, hsla(0, 0%, 0%, 0.075) 80.2%, hsla(0, 0%, 0%, 0.042) 86.1%, hsla(0, 0%, 0%, 0.021) 91%, hsla(0, 0%, 0%, 0.008) 95.2%, hsla(0, 0%, 0%, 0.002) 98.2%, hsla(0, 0%, 0%, 0) 100% ); } } #featured { max-width: 1500px; margin: 0 auto 36px; background: #1F5C32; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 8px; overflow: hidden; position: relative; min-height: 300px; display: flex; flex-direction: column; padding: 12px 24px; } #featured img.banner {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } #featured p.logo { width: 124px; min-width: 124px; height: 124px; border-radius: 50%; overflow: hidden; border: 2px solid white; position: relative; z-index: 10; margin: 12px 0 ; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25); background: #3BB25E;} #featured p.logo img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } #featured p.logo span{ font-size: 8px; color: white; line-height: 1.2; display: inline-block; height: 34px; width: 48px; margin: 14px 7px; display: flex; align-items: center;} #featured h2 strong { font-weight: inherit} #featured h2 { position: relative; z-index: 10; margin: 12px auto 12px 0; color: white; font-weight: 500;font-size: 16px; line-height: 21px; } #featured p.cta { position: relative; z-index: 10; margin: auto 0 12px 0; padding-top: 12px; } #featured p.cta a { border-radius: 300px; background:#48B062; border: 2px solid #48B062;color:white; padding: 1em 2em; display: inline-block;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition:all 0.2s ease; } #featured p.cta a:hover { background:#1F5C32; border: 2px solid #48B062; box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22); } #featured::before{ opacity:0.9; transition:all 0.2s ease; content:""; display:block; top:0; left:0; width:100%; height:50% ; pointer-events: none; position:absolute; box-sizing: content-box; z-index: 5; background: -webkit-linear-gradient(top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.738) 19%, hsla(0, 0%, 0%, 0.541) 34%, hsla(0, 0%, 0%, 0.382) 47%, hsla(0, 0%, 0%, 0.278) 56.5%, hsla(0, 0%, 0%, 0.194) 65%, hsla(0, 0%, 0%, 0.126) 73%, hsla(0, 0%, 0%, 0.075) 80.2%, hsla(0, 0%, 0%, 0.042) 86.1%, hsla(0, 0%, 0%, 0.021) 91%, hsla(0, 0%, 0%, 0.008) 95.2%, hsla(0, 0%, 0%, 0.002) 98.2%, hsla(0, 0%, 0%, 0) 100% ); background: linear-gradient(top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.738) 19%, hsla(0, 0%, 0%, 0.541) 34%, hsla(0, 0%, 0%, 0.382) 47%, hsla(0, 0%, 0%, 0.278) 56.5%, hsla(0, 0%, 0%, 0.194) 65%, hsla(0, 0%, 0%, 0.126) 73%, hsla(0, 0%, 0%, 0.075) 80.2%, hsla(0, 0%, 0%, 0.042) 86.1%, hsla(0, 0%, 0%, 0.021) 91%, hsla(0, 0%, 0%, 0.008) 95.2%, hsla(0, 0%, 0%, 0.002) 98.2%, hsla(0, 0%, 0%, 0) 100% ); } @media all and (max-width:599px) { #featured h2 strong { display: block} /*#featured p.logo { width:62px; min-width: 62px; height: 62px; }*/ } #showgrid{position:fixed; z-index:1000000; pointer-events:none; top:0; left:50%; height:100%; width:100%; border-left: 16px solid transparent; border-right:16px solid transparent; max-width: 1440px; transform:translateX(-50%); } #showgrid div{ background:rgba(255,0,255,0.05); } #showgrid{display: grid; -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-columns: repeat(14,1fr); grid-column-gap: 16px; }