/* CSS Document Client: Mayhill Junior School Version: 1.0 Date: 14/09/2023 Author: Geoff Boult Company: Concept4 Website: www.concept4.com Type: Inclusive Stylesheet */ /* 01: Variables 02: Mixins 03: Placeholder 04: REM/Boilerplate/Project Color Scheme/Transitions 05: Normalize 06: Building Blocks 07: Type 08: Header 09: Menu 10: Footer 11: Landing page 12: Internal Page 13: News template 14: Search template 15: Sitemap page 16: C4 Global */ .visuallyhidden { border: 0; margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0); position: absolute; } /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ html { color: #4d4d4d; height: 100%; font-size: 16px; webkit-font-smoothing: antialiased; } nav[role="mobileMenu"] { display: none; } .indent { text-indent: -999em; } /* Remove text-shadow in selection highlight: https://twitter.com/miketaylr/status/12228805301 These selection rule sets have to be separate. Customize the background color to match your design. */ ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } /* A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* Remove the gap between audio, canvas, iframes, images, videos and the bottom of their containers: https://github.com/h5bp/html5-boilerplate/issues/440 */ audio, canvas, iframe, img, svg, video { vertical-align: middle; } /* Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* ========================================================================== Browser Upgrade Prompt ========================================================================== */ .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== Author's custom styles ========================================================================== */ body { width: 100%; height: 100%; min-height: 100%; font-size: 62.5%; /* 1em = 10px */ line-height: 1; font-family: "Comfortaa", sans-serif; background: #fff; margin: 0; color: #4d4d4d; } /* ========================================================================== Helper classes ========================================================================== */ /* Hide visually and from screen readers: */ .hidden { display: none !important; } /* Hide only visually, but have it available for screen readers: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: https://www.drupal.org/node/897638 */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* Hide visually and from screen readers, but maintain layout */ .invisible { visibility: hidden; } /* Clearfix: contain floats For modern browsers 1. The space content is one way to avoid an Opera bug when the `contenteditable` attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that receive the `clearfix` class. 2. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements. */ /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ @media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ } @media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: http://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */ @media print { *, *:before, *:after { background: transparent !important; color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* Don't show links that are fragment identifiers, or use the `javascript:` pseudo protocol */ a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } /* Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables */ thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } header#masthead, nav#mainMenu .sf-menu li a:after, #pageHolder aside#sidebar ul li a:after, #slider .sliderText .slide .bannerText a.more:hover, #welcome .holder:before, #welcome .holder:after, #pageHolder .pageHolder:before, a.mobileMenuBTN #navIcon span, #pageHolder #pageContent ul.newsList .itemInfo, #events .carouselHolder:before, #events .carouselHolder:after, #events .eventsCarousel .eventDayList a:before, #events a.more, #events .smallOverlay, #quote .owl-dots button { background-color: #fff; } nav#mainMenu, #slider .sliderText .slide .bannerText a.more, header#masthead .leftHeader a:hover, header#masthead .leftHeader .translateOpen a, #welcome .holder a.more, footer#siteFooter, #pageHolder aside#sidebar .sectionHeader, #pageHolder #pageContent .breadcrumb a:before, #pageHolder #pageContent .linkTable .linkTableItem a:hover, #pageHolder #pageContent ul.newsList .itemInfo .more, #pageHolder #pageContent .fullWidth.alignCenter a.more, #quote .owl-dots button.active, #housePoints a.more.viewHouses { background-color: #BD1622; } #quickLinks .flex .link span.overlay, #events .overlay { background-color: #bd1622; background-color: rgba(189, 22, 34, 0.9); } nav#mainMenu ul ul, #welcome .holder a.more:hover, #pageHolder aside#sidebar ul, #pageHolder #pageContent ul.newsList a:hover .itemInfo .more, #pageHolder #pageContent .fullWidth.alignCenter a.more:hover, #pageHolder #pageContent .sitemap li ul ul li:before, #events a.more:hover, #housePoints a.more.viewHouses:hover { background-color: #4d4d4d; } #quickLinks .flex .link a:hover span.overlay { background-color: #4d4d4d; background-color: rgba(77, 77, 77, 0.9); } nav#mainMenu .sf-menu ul li a:hover, nav#mainMenu .sf-menu ul li a.active, nav#mainMenu .sf-menu ul li a:focus, #pageHolder aside#sidebar ul li a:hover, #pageHolder aside#sidebar ul li a.active, #pageHolder aside#sidebar ul li a:focus { background-color: #383838; } #quickLinks, .filterWrapper .filterGroup, .filterWrapper .filterItems, #housePoints:after { background-color: #f7f7f7; } header#masthead .leftHeader a, #pageHolder aside#sidebar ul li ul li a:hover, #pageHolder aside#sidebar ul li ul li a.active, #pageHolder aside#sidebar ul li ul li a:focus, #events .owl-nav button { background-color: transparent; } #housePoints .flex .link.seaKing a .overlay { background-color: #1B769F; } #housePoints .flex .link.merlin a .overlay { background-color: #B52E29; } #housePoints .flex .link.chinook a .overlay { background-color: #528015; } #housePoints .flex .link.puma a .overlay { background-color: #E6BD3B; } nav#mainMenu ul li a, #slider .sliderText .slide .bannerText, #slider .sliderText .slide .bannerText a.more, #slider button, header#masthead .leftHeader a:hover, header#masthead .leftHeader a:hover i, header#masthead .leftHeader .translateOpen a, header#masthead .leftHeader .translateOpen a i, #welcome .holder a.more, footer#siteFooter, footer#siteFooter a, #pageHolder aside#sidebar .sectionHeader, #pageHolder aside#sidebar ul li a, #pageHolder aside#sidebar .holder:after, #pageHolder #pageContent .linkTable .linkTableItem a:hover, #quickLinks .flex .link span.title, #pageHolder #pageContent ul.newsList .itemInfo .more, #pageHolder #pageContent .fullWidth.alignCenter a.more, #events .eventsCarousel .eventDayList a, #events .owl-nav button, #events .sectionTitle, #events a.more:hover, #housePoints .flex .link a, #housePoints a.more.viewHouses { color: #fff; } #slider .sliderText .slide .bannerText a.more:hover, .searchBox button.searchBTN, header#masthead .leftHeader a i, #welcome h1, #welcome a.scrollMore, #pageHolder #pageContent .breadcrumb a.current, #pageHolder #pageContent .breadcrumb a:hover, #pageHolder #pageContent h1, #pageHolder #pageContent h2, #pageHolder #pageContent h3, #pageHolder #pageContent h4, #pageHolder #pageContent h5, #pageHolder #pageContent p a, #pageHolder #pageContent blockquote, #pageHolder #pageContent .linkTable .linkTableItem a, header#masthead a.mobileMenuSearch, .share, .share a, #pageHolder #pageContent ul.newsList .itemInfo .title, #pageHolder #pageContent .sitemap li a, #pageHolder #pageContent .sitemap li ul li a:hover, #events a.more, #quote .quoteCarousel, #housePoints .sectionTitle, #slider .sliderText .slide .bannerText .title span { color: #BD1622; } header#masthead .leftHeader a, #welcome a.scrollMore:hover, #pageHolder #pageContent .breadcrumb a, #pageHolder #pageContent blockquote cite, .share a:hover, #pageHolder #pageContent ul.newsList .itemInfo, #pageHolder #pageContent .sitemap li ul li a, #quote .quoteCarousel cite, #housePoints .flex .link.puma a { color: #4d4d4d; } #pageHolder #pageContent .linkTable .linkTableItem a, #quote .owl-dots button { border-color: #BD1622; } @media (max-width: 767px) { #quickLinks .flex .link a:hover span.overlay { background-color: #bd1622; background-color: rgba(189, 22, 34, 0.9); } #quickLinks { background-color: transparent; } #quickLinks:before { background-color: #f7f7f7; } header#masthead .leftHeader a.contact:hover { background-color: transparent; } header#masthead .leftHeader a.contact:hover i { color: #BD1622; } header#masthead .leftHeader .translateOpener a, header#masthead .leftHeader .translateOpener a i, #slider .sliderText .slide .bannerText .title span { color: #fff; } #slider.home .sliderText { background-color: #BD1622; } #slider.home .sliderText .slide .bannerText a.more { background-color: #fff; color: #BD1622; } } header#masthead .leftHeader a i, #welcome a.scrollMore, .share a { -webkit-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } nav#mainMenu .sf-menu ul li a, #pageHolder aside#sidebar ul li a { -webkit-transition: background-color, 0.3s ease-in-out; -moz-transition: background-color, 0.3s ease-in-out; -ms-transition: background-color, 0.3s ease-in-out; -o-transition: background-color, 0.3s ease-in-out; transition: background-color, 0.3s ease-in-out; } a.more, span.more, header, nav#mainMenu, header .logoHolder, header .logoHolder a, nav#mainMenu .sf-menu li a:after, .searchBox, header#masthead .leftHeader, header#masthead .leftHeader a, #quickLinks .flex .link span, a.mobileMenuBTN #navIcon span, #pageHolder #pageContent ul.newsList figure img, .filterWrapper .filterGroup:after, #events .eventsCarousel .eventDayList a:before, #housePoints .flex .link .overlay, #housePoints .flex .link .image { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ box-sizing: border-box; overscroll-behavior: none; } body { margin: 0; overscroll-behavior: none; } *, *:before, *:after { box-sizing: inherit; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; text-decoration: none; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } button { overflow: visible; } button, elect { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } /** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width. 1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ } /** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** 1. Correct `color` not being inherited in IE 8/9/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } #wrapper, .mm-page { width: 100%; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto; position: relative; top: 0; padding: 0; } #wrapper { overflow: hidden; } .container { padding: 0 6%; position: relative; } @media (min-width: 1500px) { .container { max-width: 1500px; max-width: 93.75rem; padding: 0 50px; padding: 0 3.125rem; margin: 0 auto; position: relative; } } @media (min-width: 1700px) { .container.wide { max-width: 1700px; max-width: 106.25rem; padding: 0 50px; padding: 0 3.125rem; margin: 0 auto; position: relative; } } h2, h3, h4, h5 { margin: 5px 0 8px 0; margin: 0.3125rem 0 0.5rem 0; padding-top: 0; line-height: 1.2; } footer#siteFooter .bottomSection, #pageHolder #pageContent .linkTable .linkTableItem a .tableDownload, #pageHolder aside#sidebar ul li ul li a { font-size: 14px; font-size: 0.875rem; } body, #welcome .holder a.more, #pageHolder #pageContent .sitemap li ul li a { font-size: 16px; font-size: 1rem; } header#masthead .leftHeader a i, header#masthead a.mobileMenuSearch, .share a { font-size: 18px; font-size: 1.125rem; } nav#mainMenu .sf-menu > li > a, header#masthead .leftHeader .translateOpener i, #welcome, #pageHolder aside#sidebar .sectionHeader, #pageHolder #pageContent h5, #pageHolder #pageContent blockquote cite, #pageHolder #pageContent .linkTable .linkTableItem a .tableIcon, .share, #events .eventsCarousel .eventInfo .eventTime span, #events .eventsCarousel .eventInfo .eventName, #quote .quoteCarousel cite { font-size: 20px; font-size: 1.25rem; } #pageHolder #pageContent h4, #pageHolder #pageContent ul.newsList .itemInfo .title { font-size: 25px; font-size: 1.5625rem; } #slider .sliderText .slide .bannerText .subText, #pageHolder #pageContent h3, #pageHolder #pageContent blockquote, #quickLinks .flex .link span.title, #pageHolder #pageContent .sitemap li a, #events .eventsCarousel .eventInfo .eventTime, #events .owl-nav button, #quote .quoteCarousel { font-size: 30px; font-size: 1.875rem; } #pageHolder #pageContent h2, #housePoints .flex .link span.name { font-size: 35px; font-size: 2.1875rem; } footer#siteFooter .topSection .column .row.sectionTitle { font-size: 40px; font-size: 2.5rem; } #welcome h1, #pageHolder #pageContent h1, #events .sectionTitle, #events .eventsCarousel .eventDate span, #housePoints .sectionTitle { font-size: 50px; font-size: 3.125rem; } #housePoints .flex .link a .counter { font-size: 60px; font-size: 3.75rem; } #events .eventsCarousel .eventDate { font-size: 120px; font-size: 7.5rem; } #slider .sliderText .slide .bannerText .title { font-size: 150px; font-size: 9.375rem; } #pageHolder #pageContent ul.newsList .itemInfo .excerpt, #pageHolder #pageContent .sitemap li ul li a, #quote .quoteCarousel cite { font-weight: 400; } a.more, span.more, nav#mainMenu .sf-menu li a, #slider .sliderText .slide .bannerText .title, .searchBox input.searchInput, footer#siteFooter .topSection .column .row.sectionTitle, #pageHolder aside#sidebar .sectionHeader, #pageHolder #pageContent h1, #pageHolder #pageContent h2, #pageHolder #pageContent h3, #pageHolder #pageContent h4, #pageHolder #pageContent h5, #pageHolder #pageContent .linkTable .linkTableItem a .linkName, #quickLinks .flex .link span.title, span.articleDate, .share span, #pageHolder #pageContent ul.newsList .itemInfo, .filterWrapper .sectionName, #pageHolder #pageContent .sitemap li a, #events .eventsCarousel .eventDate, #events .eventsCarousel .eventInfo .eventTime, #events .sectionTitle, #quote .quoteCarousel, #housePoints .sectionTitle, #housePoints .flex .link { font-weight: 700; } @media (max-width: 767px) { body, #pageHolder #pageContent blockquote cite, #pageHolder #pageContent ul.newsList .itemInfo .more, #pageHolder #pageContent .sitemap li ul li a, #slider .sliderText .slide .bannerText .subText, #welcome, #welcome .holder a.more, #events .eventsCarousel .eventInfo .eventName, #quote cite.author { font-size: 14px; font-size: 0.875rem; } #pageHolder aside#sidebar .sectionHeader, #pageHolder #pageContent h5, span.articleDate, #pageHolder #pageContent ul.newsList .itemInfo { font-size: 16px; font-size: 1rem; } #slider .sliderText .slide .bannerText .subText { font-size: 17px; font-size: 1.0625rem; } #pageHolder #pageContent h4, #quickLinks .flex .link a span.title, #pageHolder #pageContent blockquote, #pageHolder #pageContent ul.newsList .itemInfo .title, #events .eventsCarousel .eventInfo .eventTime, #quote .quoteCarousel { font-size: 20px; font-size: 1.25rem; } #slider .sliderText .slide .bannerText .title, #pageHolder #pageContent h3, #pageHolder #pageContent .sitemap li a { font-size: 25px; font-size: 1.5625rem; } #housePoints .flex .link span.name { font-size: 28px; font-size: 1.75rem; } #pageHolder #pageContent h2, footer#siteFooter .topSection .column .row.sectionTitle, #events .eventsCarousel .eventDate span { font-size: 30px; font-size: 1.875rem; } #pageHolder #pageContent h1, #welcome h1, #events .sectionTitle, #housePoints .sectionTitle { font-size: 35px; font-size: 2.1875rem; } #housePoints .flex .link a .counter { font-size: 50px; font-size: 3.125rem; } #events .eventsCarousel .eventDate { font-size: 80px; font-size: 5rem; } } @media all and (min-width: 600px) and (max-width: 800px) { #slider .sliderText .slide .bannerText .title { font-size: 55px; font-size: 3.4375rem; } } @media all and (min-width: 768px) and (max-width: 1023px) { #slider .sliderText .slide .bannerText .subText { font-size: 20px; font-size: 1.25rem; } } @media all and (min-width: 800px) and (max-width: 1023px) { #slider .sliderText .slide .bannerText .title { font-size: 70px; font-size: 4.375rem; } } @media all and (min-width: 1024px) and (max-width: 1200px) { #quickLinks .flex .link span.title { font-size: 20px; font-size: 1.25rem; } #slider .sliderText .slide .bannerText .subText { font-size: 25px; font-size: 1.5625rem; } } @media all and (min-width: 1200px) and (max-width: 1400px) { nav#mainMenu .sf-menu > li > a { font-size: 17px; font-size: 1.0625rem; } #quickLinks .flex .link span.title { font-size: 26px; font-size: 1.625rem; } } @media all and (min-width: 1024px) and (max-width: 1300px) { #slider .sliderText .slide .bannerText .title { font-size: 90px; font-size: 5.625rem; } } @media all and (min-width: 1300px) and (max-width: 1500px) { #slider .sliderText .slide .bannerText .title { font-size: 110px; font-size: 6.875rem; } } @media all and (min-width: 1500px) and (max-width: 1750px) { #slider .sliderText .slide .bannerText .title { font-size: 130px; font-size: 8.125rem; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadein { /* Firefox */ from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadein { /* Opera */ from { opacity: 0; } to { opacity: 1; } } @keyframes fade-in-move-down { 0% { opacity: 0; transform: translateY(2rem); -webkit-transform: translateY(2rem); } 100% { opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); } } header#masthead { position: fixed; top: 0; left: 0; width: 100%; height: 200px; height: 12.5rem; z-index: 9000; } header#masthead .logoHolder { position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); top: 10px; top: 0.625rem; z-index: 2000; } header#masthead .logoHolder a { display: block; position: relative; z-index: 5; } header#masthead .logoHolder a img { max-width: 100%; height: auto; } header#masthead .logoHolder, header#masthead .logoHolder a { width: 153px; width: 9.5625rem; height: 130px; height: 8.125rem; } header#masthead .leftHeader { position: absolute; top: 22px; top: 1.375rem; left: 50px; left: 3.125rem; } header#masthead .leftHeader a { display: inline-block; padding: 12px 10px; margin-right: 15px; margin-right: 0.9375rem; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); } header#masthead .leftHeader a i { margin-right: 4px; } header#masthead .leftHeader .translateOpener { position: relative; display: inline-block; } header#masthead .leftHeader .translateHolder { position: absolute; top: 44px; top: 2.75rem; width: 200px; width: 12.5rem; left: 0; left: 0; display: none; z-index: 9999; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); overflow: hidden; } header#masthead .leftHeader .translateHolder img { max-width: 100%; } header#masthead .leftHeader .translateHolder.active { display: block; } header#masthead a.mobileMenuSearch { position: absolute; right: calc(6% - 5px); top: 20px; padding: 8px 5px; display: none; } @media (max-width: 767px) { header#masthead { height: 120px; height: 7.5rem; } header#masthead .logoHolder, header#masthead .logoHolder a { width: 70px; height: 60px; } header#masthead .logoHolder { top: 10px; } header#masthead a.mobileMenuSearch { display: block; } header#masthead .leftHeader { top: 15px; } header#masthead .leftHeader a { padding: 12px 0; margin-right: 0; } header#masthead .leftHeader a.contact span { display: none; } header#masthead .leftHeader .translateOpener { z-index: 200; position: absolute; left: 0; top: 75px; } header#masthead .leftHeader .translateOpener a { padding: 0; width: 105px; display: flex; align-items: center; } header#masthead .leftHeader .translateHolder { top: 30px; } } @media all and (min-width: 768px) and (max-width: 1023px) { header#masthead .leftHeader { top: 18px; } } @media (max-width: 1023px) { header#masthead .leftHeader .translateOpener { display: block; } header#masthead a.mobileMenuSearch { display: block; } } @media (max-width: 1400px) { header#masthead .leftHeader { left: 6%; } } @media all and (min-width: 768px) and (max-width: 1200px) { header#masthead { height: 160px; height: 10rem; } header#masthead .logoHolder, header#masthead .logoHolder a { width: 117px; height: 100px; } } @media (min-width: 1024px) { body.fixedHeader header#masthead { height: 110px; -webkit-box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.38); -moz-box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.38); box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.38); } body.fixedHeader header#masthead .logoHolder { top: 8px; } body.fixedHeader header#masthead .searchBox { top: 12px; } body.fixedHeader header#masthead .leftHeader { top: 8px; } body.fixedHeader header#masthead .logoHolder { width: 60px; height: 43px; overflow: hidden; } body.fixedHeader header#masthead .logoHolder a { width: 60px; height: 51px; } } nav#mainMenu { position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; } nav#mainMenu .container { height: 50px; } nav#mainMenu .sf-menu { display: flex; justify-content: space-between; margin: 0; padding: 0; list-style-type: none; } nav#mainMenu .sf-menu li { position: relative; } nav#mainMenu .sf-menu li a { display: block; line-height: 50px; height: 50px; position: relative; } nav#mainMenu .sf-menu li a:after { content: ""; position: absolute; bottom: 0; left: 0; right: 100%; height: 5px; } nav#mainMenu .sf-menu li a:hover:after, nav#mainMenu .sf-menu li a:focus:after, nav#mainMenu .sf-menu li a.active:after { right: 0; } nav#mainMenu .sf-menu li:hover > a:after { right: 0; } nav#mainMenu .sf-menu ul { list-style: none; position: absolute; top: 100%; width: 220px; padding: 0; margin: 0; left: 50%; transform: translateX(-50%); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.28); border-radius: 0 0 20px 20px; display: none; } nav#mainMenu .sf-menu ul li { width: 100%; } nav#mainMenu .sf-menu ul li a { display: block; line-height: 1.5; padding: 10px 15px; height: auto; text-align: center; } nav#mainMenu .sf-menu ul li a:after { height: 1px; right: 0; opacity: 0.2; } nav#mainMenu .sf-menu ul li:last-child a:after { display: none; } nav#mainMenu .sf-menu ul li:last-child a { border-radius: 0 0 20px 20px; } a.mobileMenuBTN { display: none; float: right; margin-top: 3px; margin-top: 0.1875rem; padding: 7px 0; padding: 0.4375rem 0; outline: none; } a.mobileMenuBTN #navIcon { width: 30px; width: 1.875rem; height: 21px; height: 1.3125rem; position: relative; cursor: pointer; float: left; } a.mobileMenuBTN #navIcon span { display: block; position: absolute; height: 2px; height: 0.125rem; width: 100%; opacity: 1; left: 0; } a.mobileMenuBTN #navIcon span:nth-child(1) { top: 0px; } a.mobileMenuBTN #navIcon span:nth-child(2) { top: 9px; top: 0.5625rem; opacity: 1; } a.mobileMenuBTN #navIcon span:nth-child(3) { top: 18px; top: 1.125rem; } body.mobileMenuInUse a.mobileMenuBTN #navIcon span:nth-child(1) { top: 10px; transform: rotate(40deg); -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); } body.mobileMenuInUse a.mobileMenuBTN #navIcon span:nth-child(2) { opacity: 0; } body.mobileMenuInUse a.mobileMenuBTN #navIcon span:nth-child(3) { top: 10px; transform: rotate(-40deg); -webkit-transform: rotate(-40deg); -ms-transform: rotate(-40deg); } .mm-searchfield__input .searchButton { position: absolute; right: 0px; right: 0rem; top: 0px; top: 0rem; width: 35px; width: 2.1875rem; height: 35px; height: 2.1875rem; border: none; -webkit-appearance: none; padding: 0; z-index: 10; border-radius: 50%; -webkit-border-radius: 50%; } .mm-searchfield__input .searchButton:before { width: 40px; width: 2.5rem; height: 40px; height: 2.5rem; content: "\f002"; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; text-align: center; line-height: 40px; line-height: 2.5rem; font-family: "Font Awesome 6 Free"; font-weight: 700; } .mm-searchfield__input .searchButton:hover { cursor: pointer; } .mm-searchfield__input input { border: none; color: #4d4d4d; } .mm-searchfield__input input::-webkit-input-placeholder { color: #4d4d4d; opacity: 1; } .mm-searchfield__input input:moz-placeholder { color: #4d4d4d; opacity: 1; } .mm-searchfield__input input::-moz-placeholder { color: #4d4d4d; opacity: 1; } .mm-searchfield__input input:-ms-input-placeholder { color: #4d4d4d; opacity: 1; } @media (max-width: 1200px) { nav#mainMenu { height: 40px; } nav#mainMenu .sf-menu { display: none; } a.mobileMenuBTN { display: block; } } footer#siteFooter { clear: both; width: 100%; } footer#siteFooter a:hover { text-decoration: underline; } footer#siteFooter .topSection { display: flex; width: 100%; padding: 35px 0 30px 0; justify-content: space-between; } footer#siteFooter .topSection .column.column-right { align-self: flex-end; } footer#siteFooter .topSection .column.column-right img { width: 90px; height: 90px; } footer#siteFooter .topSection .column .row.sectionTitle { width: 100%; margin-bottom: 35px; } footer#siteFooter .topSection .column .row { display: inline-block; margin-right: 90px; } footer#siteFooter .topSection i { margin-right: 4px; } footer#siteFooter .bottomSection { display: flex; justify-content: space-between; width: 100%; padding: 30px 0; border-top-width: 1px; border-top-style: solid; } footer#siteFooter .bottomSection .fLeft a { margin-right: 23px; } footer#siteFooter .bottomSection .fRight .copy, footer#siteFooter .bottomSection .fRight .siteBy { display: inline-block; } footer#siteFooter .bottomSection .fRight .copy { margin-right: 20px; } footer#siteFooter .bottomSection .fLeft { width: 50%; } @media (max-width: 767px) { footer#siteFooter .topSection { padding: 30px 0 15px 0; flex-wrap: wrap; } footer#siteFooter .topSection .column { flex: 0 0 100%; text-align: center; } footer#siteFooter .topSection .column .row { margin-right: 0; margin-bottom: 15px; } footer#siteFooter .topSection .column .row.sectionTitle { margin-bottom: 28px; } footer#siteFooter .topSection .column.column-right img { width: 60px; height: 60px; } footer#siteFooter .bottomSection { text-align: center; padding: 26px 0; } footer#siteFooter .bottomSection a { line-height: 1.7; } footer#siteFooter .bottomSection .fLeft a { margin: 0; display: block; } footer#siteFooter .bottomSection .fRight .copy { margin: 0 0 6px 0; } } @media all and (min-width: 768px) and (max-width: 1023px) { footer#siteFooter .topSection .column .row { margin-right: 50px; } } @media (max-width: 1300px) { footer#siteFooter .bottomSection { flex-wrap: wrap; } footer#siteFooter .bottomSection .fLeft, footer#siteFooter .bottomSection .fRight { flex: 0 0 100%; } footer#siteFooter .bottomSection .fRight { margin-top: 20px; } } a.more, span.more { padding: 14px 15px 12px 15px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); display: inline-block; } #slider { position: relative; float: left; width: 100%; height: 100vh; height: calc(100vh - 200px); margin-top: 200px; margin-top: 12.5rem; overflow: hidden; min-height: 550px; min-height: 34.375rem; } #slider .container { height: 100vh; height: calc(100vh - 200px); min-height: 550px; min-height: 34.375rem; } #slider .sliderImages { position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; } #slider .sliderImages button.slick-prev, #slider .sliderImages button.slick-next { position: absolute; z-index: 20; height: 50px; width: 50px; margin-top: -25px; margin-top: -1.5625rem; top: 50%; border: none; font-size: 0; outline: none; background: rgba(0, 0, 0, 0.1); -webkit-appearance: none; } #slider .sliderImages button.slick-prev:before, #slider .sliderImages button.slick-next:before { font-family: "Font Awesome 5 Free"; font-weight: 700; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; font-size: 20px; font-size: 1.25rem; line-height: 50px; line-height: 3.125rem; text-align: center; } #slider .sliderImages button.slick-prev:hover, #slider .sliderImages button.slick-next:hover { background: rgba(255, 255, 255, 0.8); } #slider .sliderImages button.slick-prev { left: 0; left: 0; } #slider .sliderImages button.slick-prev:before { content: "\f053"; } #slider .sliderImages button.slick-next { right: 0; right: 0; } #slider .sliderImages button.slick-next:before { content: "\f054"; } #slider .sliderImages .slideImage { position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; } #slider .sliderImages .slide .overlay { position: absolute; bottom: 0; height: 100%; left: 0; width: 100%; z-index: 2; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #4d4d4d 100%); background-repeat: repeat-x; background-position: bottom center; mix-blend-mode: multiply; } #slider .slick-list, #slider .slick-track { height: 100%; } #slider .sliderText { position: absolute; top: 0; left: 50px; left: 3.125rem; right: 50px; right: 3.125rem; width: auto; z-index: 200; height: 100%; } #slider .sliderText .slide .bannerText { bottom: 180px; bottom: 11.25rem; width: 100%; left: 0; position: absolute; z-index: 200; text-align: center; transform: translateY(2rem); -webkit-transform: translateY(2rem); animation: fade-in-move-down 1s; -webkit-animation: fade-in-move-down 1s; opacity: 0; } #slider .sliderText .slide .bannerText .title { line-height: 1; float: left; width: 100%; margin-bottom: 20px; margin-bottom: 1.25rem; letter-spacing: 0; text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.28); } #slider .sliderText .slide .bannerText .subTitle { line-height: 1.5; float: left; width: 90%; } #slider .sliderText .slide .bannerText a.more { margin-top: 35px; } #slider .slick-slide.slick-active .bannerText { transform: translateY(0); -webkit-transform: translateY(0); opacity: 1; transition-duration: 1s; -webkit-transition-duration: 1s; } #slider button.slick-prev, #slider button.slick-next { position: absolute; z-index: 20; height: 20px; width: 20px; margin-top: -25px; margin-top: -1.5625rem; bottom: 98px; border: none; font-size: 0; outline: none; background: none; -webkit-appearance: none; } #slider button.slick-prev:before, #slider button.slick-next:before { font-family: "Font Awesome 6 Free"; font-weight: 700; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; font-size: 20px; font-size: 1.25rem; line-height: 20px; line-height: 1.25rem; text-align: center; } #slider button.slick-prev { left: calc(50% - 60px); } #slider button.slick-prev:before { content: "\f0a8"; } #slider button.slick-next { right: calc(50% - 60px); } #slider button.slick-next:before { content: "\f0a9"; } #slider .pausePlay { position: absolute; z-index: 1000; height: 20px; width: 20px; left: 50%; bottom: 98px; transform: translateX(-50%); -webkit-transform: translateX(-50%); } #slider .pausePlay button { position: absolute; height: 20px; width: 20px; left: 0; top: 0px; padding: 0; border: none; font-size: 20px; -webkit-appearance: none; background-color: transparent; } #slider .pausePlay i { line-height: 20px; width: 20px; text-align: center; position: absolute; left: 0; top: 0; } #slider .pausePlay:hover { cursor: pointer; } #slider button#play { display: none; } #welcome { clear: both; width: 100%; position: relative; } #welcome a.scrollMore { position: absolute; top: -30px; top: -1.875rem; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); z-index: 2000; line-height: 20px; line-height: 1.25rem; z-index: 300; text-align: center; } #welcome a.scrollMore:hover { cursor: pointer; } #welcome .holder { width: 100%; text-align: center; padding: 95px 250px 110px 250px; padding: 5.9375rem 15.625rem 6.875rem 15.625rem; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; background-clip: padding-box; behavior: url(PIE.htc); position: relative; } #welcome .holder:before, #welcome .holder:after { content: ""; position: absolute; left: -110px; right: -110px; width: auto; height: 45px; z-index: 200; } #welcome .holder:before { top: -44px; border-radius: 20px 20px 0 0; -webkit-border-radius: 20px 20px 0 0; } #welcome .holder:after { bottom: -44px; border-radius: 0 0 20px 20px; -webkit-border-radius: 0 0 20px 20px; } #welcome h1 { margin: 0 0 20px 0; margin: 0 0 1.25rem 0; line-height: 1.4; } #welcome p { line-height: 1.5; } #welcome a.more { margin-top: 20px; margin-top: 1.25rem; } #events { clear: both; width: 100%; position: relative; padding: 105px 0 100px 0; padding: 6.5625rem 0 6.25rem 0; text-align: center; } #events .smallOverlay { content: ""; position: absolute; left: 50%; width: 1610px; transform: translateX(-50%); height: 45px; bottom: 0; border-radius: 20px 20px 0 0; -webkit-border-radius: 20px 20px 0 0; z-index: 10; } #events .sectionTitle { width: 100%; margin: 0; position: relative; z-index: 5; } #events .overlay { position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 2; } #events .bgImage { position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 1; background-size: cover; background-repeat: no-repeat; background-position: center; } #events .carouselHolder { width: 100%; margin-top: 45px; margin-top: 2.8125rem; position: relative; z-index: 5; } #events .carouselHolder:before, #events .carouselHolder:after { content: ""; position: absolute; top: 250px; height: 1px; height: 0.0625rem; width: 100%; width: 100%; } #events .carouselHolder:before { left: 0; left: 0; } #events .carouselHolder:after { right: 0; right: 0; } #events .eventsCarousel { margin: 0; padding: 0; list-style-type: none; position: relative; } #events .eventsCarousel.owl-carousel .owl-stage-outer { z-index: 4; } #events .eventsCarousel .eventDayList { position: relative; width: 100%; height: 400px; height: 25rem; } #events .eventsCarousel .eventDayList a { display: block; position: relative; height: 400px; height: 25rem; z-index: 10; } #events .eventsCarousel .eventDayList a:before { height: 20px; width: 20px; position: absolute; content: ""; top: 250px; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); border-radius: 50%; } #events .eventsCarousel .eventDayList a:hover:before { height: 30px; width: 30px; } #events .eventsCarousel .eventDate { padding: 40px 0 45px 0; padding: 2.5rem 0 2.8125rem 0; text-align: center; position: relative; z-index: 5; } #events .eventsCarousel .eventDate span { display: block; } #events .eventsCarousel .eventInfo { padding: 45px 40px 15px 40px; padding: 2.8125rem 2.5rem 0.9375rem 2.5rem; text-align: center; position: relative; z-index: 5; } #events .eventsCarousel .eventInfo .eventName, #events .eventsCarousel .eventInfo .eventTime { display: block; margin: 7px 0; } #events .eventsCarousel .eventInfo .eventTime { margin: 0 0 5px 0; line-height: 1.2; } #events .eventsCarousel .eventInfo .eventName { line-height: 1.5; } #events .owl-nav { position: absolute; width: 100%; cursor: pointer; display: block; top: 236px; top: 14.75rem; height: 26px; height: 1.625rem; } #events .owl-nav .owl-prev, #events .owl-nav .owl-next { height: 30px; width: 30px; position: absolute; outline: none; border: none; -webkit-appearance: none; z-index: 5; top: 0; padding: 0; } #events .owl-nav .owl-prev:before, #events .owl-nav .owl-next:before { position: absolute; top: 0; height: 100%; width: 100%; font-family: 'Font Awesome 6 Free'; font-weight: 900; text-align: center; line-height: 30px; line-height: 1.875rem; } #events .owl-nav .owl-prev { left: -50px; left: -3.125rem; } #events .owl-nav .owl-prev:before { content: "\f0a8"; left: 0; left: 0; } #events .owl-nav .owl-next { right: -50px; right: -3.125rem; } #events .owl-nav .owl-next:before { content: "\f0a9"; left: 0; left: 0; } #events .owl-nav .owl-dots { display: none; } #events a.more { display: inline-block; margin-top: 90px; z-index: 5; position: relative; } #quote { clear: both; padding: 80px 0 35px 0; position: relative; } #quote .speechMarks { margin-bottom: 25px; margin-bottom: 1.5625rem; text-align: center; } #quote .quoteCarousel { width: 100%; position: relative; } #quote .quoteCarousel .item { width: 100%; padding: 0 150px; text-align: center; line-height: 1.5; } #quote cite.author { margin-top: 15px; margin-top: 0.9375rem; display: block; font-style: normal; } #quote .owl-nav { display: none; } #quote .owl-dots { position: relative; width: 100%; text-align: center; margin-top: 20px; } #quote .owl-dots button { display: inline-block; padding: 0; -webkit-appearance: none; text-indent: -999em; height: 12px; width: 12px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; background-clip: padding-box; behavior: url(PIE.htc); border-style: solid; border-width: 1px; outline: none; margin: 0 5px; line-height: 1; } #housePoints { clear: both; width: 100%; position: relative; padding: 50px 0 80px 0; padding: 3.125rem 0 5rem 0; text-align: center; } #housePoints:after { position: absolute; content: ""; left: 0; width: 100%; bottom: 0; top: 270px; height: auto; } #housePoints .sectionTitle { text-align: center; margin-bottom: 50px; margin-bottom: 3.125rem; } #housePoints .flex { display: flex; } #housePoints .flex.space-between { justify-content: space-between; } #housePoints .flex .link { flex: 0 0 21.5384%; } #housePoints .flex .link a { display: block; width: 100%; height: 280px; position: relative; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; background-clip: padding-box; behavior: url(PIE.htc); padding: 30px; } #housePoints .flex .link span { display: block; } #housePoints .flex .link .image { position: absolute; left: 50%; bottom: 15px; width: 310px; transform: translateX(-50%); -webkit-transform: translateX(-50%); z-index: 5; mix-blend-mode: multiply; } #housePoints .flex .link .image img { width: 100%; height: auto; } #housePoints .flex .link .progress-bar { position: relative; z-index: 6; margin-top: 10px; } #housePoints .flex .link .overlay { position: absolute; left: 0; width: 100%; top: 0; height: 280px; bottom: 0; z-index: 2; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; background-clip: padding-box; behavior: url(PIE.htc); } #housePoints .flex .link span.name { width: 100%; justify-content: center; align-items: center; z-index: 6; line-height: 1.3; position: relative; } #housePoints .flex .link a:hover .overlay { top: 0; } #housePoints .flex .link a:hover span.title { bottom: 50%; transform: translateY(50%); -webkit-transform: translateY(50%); } #housePoints .flex .link a:hover .overlay { height: 310px; } #housePoints .flex .link a:hover .image { bottom: -5px; } #housePoints a.more.viewHouses { display: inline-block; margin-top: 60px; position: relative; z-index: 3; } @media (max-width: 767px) { #slider { margin-top: 120px; } #slider.home { overflow: visible; height: auto; min-height: 0; } #slider.home .container { min-height: 0; height: auto; padding: 0; } #slider.home .sliderImages .slide .overlay { height: 90px; } #slider.home .sliderImages { height: 220px; } #slider.home .sliderText { position: relative; height: auto; left: auto; right: auto; top: auto; float: left; width: 100%; margin-top: 220px; padding: 20px 5% 55px 5%; } #slider.home .sliderText .slide .bannerText { position: relative; padding: 0; bottom: auto; width: 100%; } #slider.home .sliderText .slide .bannerText .intro { line-height: 1.7; } #slider.home .sliderText .slide .bannerText .title { margin-bottom: 15px; line-height: 1.2; } #slider.home .sliderText .slide .bannerText .subText { float: left; padding: 0 7%; line-height: 1.5; } #slider.home .sliderText .slide .bannerText a.more { margin-top: 20px; } #slider.home .slick-slide .bannerText { transform: none !important; } #slider.home .pausePlay { top: 170px; bottom: auto; } #slider.home button.slick-prev, #slider.home button.slick-next { bottom: auto; top: -25px; } #welcome { z-index: 205; } #welcome .holder { padding: 0; } #welcome .holder:before, #welcome .holder:after { left: -10px; right: -10px; height: 30px; } #welcome .holder:before { top: -30px; } #welcome .holder:after { bottom: -30px; } #events { padding: 55px 0 70px 0; } #events .carouselHolder:before, #events .carouselHolder:after, #events .eventsCarousel .eventDayList a:before { top: 170px; } #events .eventsCarousel .eventDate { padding: 20px 0 45px 0; } #events .eventsCarousel .eventDayList { height: auto; } #events .eventsCarousel .eventDayList a { height: auto; } #events a.more { margin-top: 20px; } #events .owl-nav { top: 156px; } #events .owl-nav .owl-prev { left: -40px; } #events .owl-nav .owl-next { right: -40px; } #events .smallOverlay { width: auto; left: calc(6% - 10px); right: calc(6% - 10px); height: 30px; transform: none; } #quote { padding: 0; } #quote .quoteCarousel .item { padding: 0; } #quote .speechMarks svg { width: 91px; height: 30px; } #housePoints { padding: 40px 0 30px 0; } #housePoints:after { top: 170px; } #housePoints .sectionTitle { margin-bottom: 20px; } #housePoints .flex { gap: 10px 0; flex-wrap: wrap; width: 280px; margin: 0 auto; } #housePoints .flex .link { flex: 0 0 100%; } #housePoints .flex .link .overlay { height: 100% !important; } #housePoints .flex .link .image { bottom: auto !important; top: 50% !important; transform: translate(-50%, -50%); opacity: 0.5; } #housePoints .flex .link a { height: 140px; padding: 18px 20px; } #housePoints a.more.viewHouses { margin-top: 25px; } } @media all and (min-width: 768px) and (max-width: 1023px) { #slider, #slider .container { height: 525px; min-height: 0; } #slider .pausePlay { bottom: 75px; } #slider button.slick-prev, #slider button.slick-next { bottom: 75px; } #slider .sliderText .slide .bannerText { bottom: 130px; } #welcome .holder { padding: 20px 0; } #welcome .holder:before, #welcome .holder:after { height: 35px; } #welcome .holder:before { top: -34px; } #welcome .holder:after { bottom: -34px; } #welcome .holder a.more { margin-top: 10px; } } @media (max-width: 1023px) { #welcome a.scrollMore { display: none; } } @media all and (min-width: 768px) and (max-width: 1200px) { #slider { margin-top: 160px; } #quote { padding: 50px 0 35px 0; } #quote .quoteCarousel .item { padding: 0; } #housePoints .flex { flex-wrap: wrap; width: 610px; gap: 30px 50px; margin: 0 auto; } #housePoints .flex .link { flex: 0 0 280px; } } @media all and (min-width: 1024px) and (max-width: 1200px) { #slider, #slider .container { height: calc(100vh - 160px); } } @media (max-width: 1249px) { #latestNews .row .upcomingEvents, #latestNews .row .twitter { width: 100%; } #latestNews .row .eventHolder, #latestNews .row .twitterHolder, #latestNews .row .twitterHolder .post { min-height: 0; } } @media (max-width: 1399px) { #slider .sliderText { left: 5%; right: 5%; } } @media all and (min-width: 768px) and (max-width: 1400px) { #welcome .holder:before, #welcome .holder:after { left: -25px; right: -25px; } #events .smallOverlay { width: auto; left: calc(6% - 25px); right: calc(6% - 25px); transform: none; } } @media all and (min-width: 1024px) and (max-width: 1400px) { #welcome .holder { padding: 40px 50px 50px 50px; } } @media all and (min-width: 1200px) and (max-width: 1400px) { #quote .quoteCarousel .item { padding: 0 75px; } #housePoints .flex .link { flex: 0 0 22.5384%; } #housePoints .flex .link .image { width: 280px; } } @media all and (min-width: 1400px) and (max-width: 1550px) { #welcome .holder:before, #welcome .holder:after { left: -35px; right: -35px; } } @media all and (min-width: 1400px) and (max-width: 1500px) { #events .smallOverlay { width: auto; left: 50px; right: 50px; transform: none; } #welcome .holder { padding: 70px 175px 80px 175px; } } @media (max-width: 1550px) { #events .carouselHolder { padding: 0 30px; } #events .carouselHolder:before { left: 30px; width: 50%; } #events .carouselHolder:after { right: 30px; width: 50%; } } @media all and (min-width: 1500px) and (max-width: 1550px) { #events .smallOverlay { width: 1465px; } } @media all and (min-width: 1550px) and (max-width: 1700px) { #welcome .holder:before, #welcome .holder:after { left: -50px; right: -50px; } #events .smallOverlay { width: 1495px; } } #slider.page { min-height: 0; } #slider.page .sliderImages { left: 0; width: 100%; top: 0; } #slider.page .sliderImages .slideImage { width: 100%; background-size: cover; background-position: center; } #slider.page, #slider.page .sliderImages, #slider.page .sliderImages .slide, #slider.page .sliderImages .slideImage { height: 600px; height: 37.5rem; max-height: 65vh; } #pageHolder { clear: both; width: 100%; position: relative; } #pageHolder .pageHolder { display: flex; gap: 0 50px; width: 100%; position: relative; padding: 0 0 280px 0; } #pageHolder .pageHolder:before { height: 50px; content: ""; position: absolute; left: -110px; right: -110px; width: auto; top: -49px; border-radius: 20px 20px 0 0; -webkit-border-radius: 20px 20px 0 0; } #pageHolder aside#sidebar { flex: 0 0 280px; position: relative; margin: 0; padding: 0; opacity: 1; } #pageHolder aside#sidebar nav#sideMenu { width: 100%; border-radius: 0 0 20px 20px; -webkit-border-radius: 0 0 20px 20px; overflow: hidden; } #pageHolder aside#sidebar .sectionHeader { display: block; position: relative; padding: 0 30px; padding: 0 1.875rem; width: 100%; height: 65px; height: 4.0625rem; line-height: 65px; line-height: 4.0625rem; text-align: center; border-radius: 20px 20px 0 0; -webkit-border-radius: 20px 20px 0 0; } #pageHolder aside#sidebar .sectionHeader .sectionTitle i { display: none; line-height: 55px; line-height: 3.4375rem; -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } #pageHolder aside#sidebar .sectionHeader a.linkAction { display: none; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; } #pageHolder aside#sidebar .sectionHeader.sectionMenuOpen .sectionTitle i { -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); margin: 0 0 0 0; margin: 0 0 0 0; } #pageHolder aside#sidebar ul { margin: 0; padding: 0; list-style-type: none; width: 100%; z-index: 2000; position: relative; } #pageHolder aside#sidebar ul li { width: 100%; position: relative; } #pageHolder aside#sidebar ul li a { display: block; padding: 10px 35px; padding: 0.625rem 2.1875rem; line-height: 1.5; text-align: center; position: relative; } #pageHolder aside#sidebar ul li a:after { height: 1px; right: 0; width: 100%; content: ""; position: absolute; top: 0; opacity: 0.2; } #pageHolder aside#sidebar ul li:first-child a:after { display: none; } #pageHolder aside#sidebar ul li ul { display: none; margin: 0; margin: 0; padding: 4px 0 8px 0; } #pageHolder aside#sidebar ul li ul li { width: 100%; padding: 0; border: none; /*&.has-sub > a { // Level 4 sub menu @include rem(padding, 2px 60px 2px 42px); } li { a { @include rem(padding, 2px 35px 2px 55px); } }*/ } #pageHolder aside#sidebar ul li ul li a { padding: 2px 30px 2px 30px; padding: 0.125rem 1.875rem 0.125rem 1.875rem; border: none; } #pageHolder aside#sidebar ul li ul li a:after { display: none; } #pageHolder aside#sidebar ul li ul li a:hover { text-decoration: underline; } #pageHolder aside#sidebar ul li.has-sub ul { display: none; } #pageHolder aside#sidebar ul li.has-sub.open .holder { top: -2px; top: -0.125rem; } #pageHolder aside#sidebar ul li.has-sub.open .holder:after { content: "\f106"; } #pageHolder aside#sidebar ul li.has-sub.open ul li .holder:after { content: "\f107"; } #pageHolder aside#sidebar ul li.has-sub.open ul li.has-sub.open .holder:after { content: "\f106"; } #pageHolder aside#sidebar .holder { width: 30px; width: 1.875rem; height: 0; right: 10px; right: 0.625rem; position: absolute; top: 0; top: 0; height: 100%; } #pageHolder aside#sidebar .holder:after { display: block; position: absolute; text-align: center; width: 100%; height: 12px; height: 0.75rem; padding: 0; padding: 0; z-index: 10; content: "\f107"; font-family: 'Font Awesome 5 Free'; font-weight: 900; top: 14px; top: 0.875rem; } #pageHolder aside#sidebar .holder:hover { cursor: pointer; } #pageHolder aside#sidebar ul li ul li .holder:after { display: block; position: absolute; text-align: center; width: 100%; height: 12px; height: 0.75rem; padding: 0; padding: 0; z-index: 10; content: "\f107"; font-family: 'Font Awesome 5 Free'; font-weight: 900; top: 6px; top: 0.375rem; } #pageHolder aside#sidebar ul li ul li ul { text-align: center; } #pageHolder aside#sidebar ul li ul li ul li a { padding: 0 0 0 5px; display: inline-block; position: relative; } #pageHolder aside#sidebar ul li ul li ul li a:before { position: absolute; left: -7px; top: -1px; width: 5px; content: "-"; height: 2px; } #pageHolder #pageContent { flex-grow: 1; position: relative; z-index: 2000; } #pageHolder #pageContent .breadcrumb { display: block; position: relative; width: 100%; margin: 0 0 50px 0; line-height: 1.3; flex-wrap: wrap; } #pageHolder #pageContent .breadcrumb a { word-break: break-word; padding: 5px 0; padding: 0.3125rem 0; margin: 0 18px; margin: 0 1.125rem; position: relative; } #pageHolder #pageContent .breadcrumb a:before { height: 15px; width: 1px; content: ""; position: absolute; left: -20px; top: 8px; } #pageHolder #pageContent .breadcrumb a:first-child { margin: 0 18px 0 0; margin: 0 1.125rem 0 0; } #pageHolder #pageContent .breadcrumb a:first-child:before { display: none; } #pageHolder #pageContent .breadcrumb a:hover, #pageHolder #pageContent .breadcrumb a.current { text-decoration: underline; } #pageHolder #pageContent ul, #pageHolder #pageContent ol { line-height: 1.5; display: block; width: 100%; } #pageHolder #pageContent h1 { margin-top: 0; margin-bottom: 30px; margin-bottom: 1.875rem; position: relative; line-height: 1.3; width: 100%; } #pageHolder #pageContent p { line-height: 1.5; margin: 0 0 25px 0; margin: 0 0 1.5625rem 0; } #pageHolder #pageContent p a:hover { text-decoration: underline; } #pageHolder #pageContent img.alignLeft, #pageHolder #pageContent img.alignRight { margin-bottom: 25px; margin-bottom: 1.5625rem; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; background-clip: padding-box; behavior: url(PIE.htc); } #pageHolder #pageContent img.alignLeft { float: left; margin-right: 25px; margin-right: 1.5625rem; } #pageHolder #pageContent img.alignRight { float: right; margin-left: 25px; margin-left: 1.5625rem; } #pageHolder #pageContent img.centered { display: block; margin-left: auto; margin-right: auto; } #pageHolder #pageContent img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; background-clip: padding-box; behavior: url(PIE.htc); } #pageHolder #pageContent img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; background-clip: padding-box; behavior: url(PIE.htc); } #pageHolder #pageContent .alignright { float: right; } #pageHolder #pageContent .alignleft { float: left; } #pageHolder #pageContent blockquote { margin: 50px 0 40px 0; margin: 3.125rem 0 2.5rem 0; padding: 40px 40px 40px 40px; padding: 2.5rem 2.5rem 2.5rem 2.5rem; line-height: 1.5; text-align: center; } #pageHolder #pageContent blockquote cite.author { margin-top: 15px; margin-top: 0.9375rem; display: block; font-style: normal; } #pageHolder #pageContent blockquote .speechMarks { margin-bottom: 25px; margin-bottom: 1.5625rem; } #pageHolder #pageContent .oneThird { float: left; width: 30%; margin-left: 5%; } #pageHolder #pageContent .oneHalf { float: left; width: 47.5%; margin-left: 5%; } #pageHolder #pageContent .extraContent { padding: 20px 0 0 0; padding: 1.25rem 0 0 0; float: left; width: 100%; } #pageHolder #pageContent .extraContent h2 { text-transform: none; } #pageHolder #pageContent .oneThird:first-of-type { margin-left: 0; } #pageHolder #pageContent .oneHalf:first-of-type { margin-left: 0; } #pageHolder #pageContent.fullWidth { margin-left: 0; } /* New Link table styling */ #pageHolder #pageContent .linkTable { width: 100%; margin-bottom: 30px; } #pageHolder #pageContent .linkTable .linkTableItem { width: 100%; margin-bottom: 10px; } #pageHolder #pageContent .linkTable .linkTableItem a { display: flex; padding: 20px 160px 20px 65px; border-style: solid; border-width: 1px; align-items: center; position: relative; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; background-clip: padding-box; behavior: url(PIE.htc); } #pageHolder #pageContent .linkTable .linkTableItem a .tableIcon { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 30px; text-align: center; } #pageHolder #pageContent .linkTable .linkTableItem a .tableDownload { position: absolute; top: 50%; right: 30px; transform: translateY(-50%); -webkit-transform: translateY(-50%); } #pageHolder #pageContent .linkTable .linkTableItem a .tableDownload i { margin-left: 4px; } #pageHolder #pageContent .linkTable .linkTableItem a .linkName { line-height: 1.6; } #quickLinks { clear: both; width: 100%; padding: 0 0 80px 0; } #quickLinks .flex { display: flex; } #quickLinks .flex.space-between { justify-content: space-between; } #quickLinks .flex .link { flex: 0 0 23.8461%; margin-top: -140px; } #quickLinks .flex .link a { display: block; width: 100%; height: 310px; position: relative; overflow: hidden; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; background-clip: padding-box; behavior: url(PIE.htc); } #quickLinks .flex .link span { display: block; } #quickLinks .flex .link .image { position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 1; } #quickLinks .flex .link .image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } #quickLinks .flex .link .overlay { position: absolute; left: 0; width: 100%; top: 210px; height: auto; bottom: 0; z-index: 2; } #quickLinks .flex .link span.title { position: absolute; height: 100px; bottom: 0; left: 0; width: 100%; padding: 0 30px; display: flex; flex: 0 0 100%; justify-content: center; align-items: center; z-index: 5; line-height: 1.3; text-align: center; } #quickLinks .flex .link a:hover .overlay { top: 0; } #quickLinks .flex .link a:hover span.title { bottom: 50%; transform: translateY(50%); -webkit-transform: translateY(50%); } @media (max-width: 767px) { #slider.page, #slider.page .sliderImages, #slider.page .sliderImages .slide, #slider.page .sliderImages .slideImage { height: 200px; height: 12.5rem; min-height: 0; } #pageHolder .pageHolder { padding: 0 0 55px 0; } #pageHolder .pageHolder:before { left: -10px; right: -10px; height: 23px; top: -23px; } #pageHolder aside#sidebar { margin-top: -13px; } #pageHolder aside#sidebar .sectionHeader { height: 40px; line-height: 42px; border-radius: 15px 15px 0 0; -webkit-border-radius: 15px 15px 0 0; } #pageHolder aside#sidebar .sectionHeader .sectionTitle i { line-height: 40px; } #pageHolder aside#sidebar .collapse { border-radius: 0 0 15px 15px; -webkit-border-radius: 0 0 15px 15px; } #pageHolder #pageContent { margin-top: 50px; } #pageHolder #pageContent h1 { margin-bottom: 25px; margin-bottom: 1.5625rem; } #pageHolder #pageContent .breadcrumb { display: none; } #pageHolder #pageContent blockquote { padding: 25px 20px 20px 20px; padding: 1.5625rem 1.25rem 1.25rem 1.25rem; margin: 25px 0 20px 0; margin: 1.5625rem 0 1.25rem 0; } #pageHolder #pageContent blockquote .speechMarks svg, #pageHolder #pageContent blockquote .speechMarks svg path { width: 91px; height: 30px; } #pageHolder #pageContent img { width: 100%; margin-left: 0 !important; margin-right: 0 !important; } #pageHolder #pageContent.fullWidth { padding-top: 0; margin-top: -10px; } #pageHolder #pageContent .linkTable .linkTableItem a { padding: 15px 45px 15px 50px; } #pageHolder #pageContent .linkTable .linkTableItem a .tableIcon { left: 10px; } #pageHolder #pageContent .linkTable .linkTableItem a .tableDownload { right: 15px; } #pageHolder #pageContent .linkTable .linkTableItem a .tableDownload span { display: none; } #quickLinks { padding: 0 0 20px 0; position: relative; } #quickLinks:before { bottom: 0; left: 0; width: 100%; top: 100px; content: ""; position: absolute; height: auto; } #quickLinks .flex { flex-wrap: wrap; gap: 10px 0; } #quickLinks .flex.space-between { justify-content: flex-start; } #quickLinks .flex .link { margin-top: 0; flex: 0 0 100%; } #quickLinks .flex .link a { height: 200px; } #quickLinks .flex .link .overlay { height: 50px; top: auto; } #quickLinks .flex .link span.title { height: 50px; } #quickLinks .flex .link a:hover .overlay { top: auto; transform: none; } #quickLinks .flex .link a:hover span.title { bottom: 0; transform: none; } } @media all and (min-width: 768px) and (max-width: 1023px) { #slider.page, #slider.page .sliderImages, #slider.page .sliderImages .slide, #slider.page .sliderImages .slideImage { height: 350px; height: 21.875rem; min-height: 0; } #pageHolder .pageHolder { padding: 0 0 200px 0; } #pageHolder aside#sidebar .sectionHeader { height: 55px; line-height: 58px; } #pageHolder aside#sidebar .collapse { border-radius: 0 0 20px 20px; -webkit-border-radius: 0 0 20px 20px; } #pageHolder #pageContent { margin-top: 85px; } #pageHolder #pageContent .breadcrumb { margin-bottom: 35px; } #pageHolder #pageContent blockquote { padding-left: 0; padding-right: 0; } #pageHolder #pageContent.fullWidth { padding-top: 0; margin-top: 0; } #quickLinks { padding: 0 0 50px 0; } #quickLinks .flex { flex-wrap: wrap; } #quickLinks .flex .link { flex: 0 0 48.4375%; margin-top: 20px; } #quickLinks .flex .link:nth-child(1), #quickLinks .flex .link:nth-child(2) { margin-top: -140px; } #pageHolder #pageContent .linkTable .linkTableItem a { padding: 20px 160px 20px 65px; } } @media (max-width: 1023px) { #pageHolder .pageHolder { flex-wrap: wrap; gap: 0 0; } #pageHolder aside#sidebar .collapse { position: relative; display: none; width: 100%; position: relative; overflow: hidden; } #pageHolder aside#sidebar { flex: 0 0 100%; width: 100%; z-index: 3000; } #pageHolder aside#sidebar nav#sideMenu { position: absolute; left: 0; z-index: 5; border-radius: 0; } #pageHolder aside#sidebar .sectionHeader { margin-top: 0; padding: 0 20px; text-align: left; } #pageHolder aside#sidebar .sectionHeader a.linkAction { display: block; z-index: 2000; } #pageHolder aside#sidebar .sectionHeader a.linkAction:hover { cursor: pointer; } #pageHolder aside#sidebar .sectionHeader .sectionTitle i { position: absolute; top: 0; right: 20px; display: block; } #pageHolder #pageContent { margin-left: 0; } } @media (max-width: 1249px) { #pageHolder #pageContent .oneThird { width: 100%; margin: 0; } #pageHolder #pageContent .oneThird:first-child { margin-top: 0; } } @media all and (min-width: 768px) and (max-width: 1400px) { #pageHolder .pageHolder:before { left: -25px; right: -25px; height: 25px; top: -25px; } } @media all and (min-width: 1024px) and (max-width: 1400px) { #pageHolder #pageContent { padding-top: 20px; } #pageHolder #pageContent.fullWidth { padding-top: 0; } } @media all and (min-width: 1024px) and (max-width: 1200px) { #quickLinks { padding: 0 0 50px 0; } #quickLinks .flex .link a { height: 250px; } #quickLinks .flex .link a .overlay { top: 170px; } #quickLinks .flex .link a span.title { height: 80px; } } @media all and (min-width: 1200px) and (max-width: 1400px) { #quickLinks { padding: 0 0 65px 0; } #quickLinks .flex .link a { height: 270px; } #quickLinks .flex .link a .overlay { top: 180px; } #quickLinks .flex .link a span.title { height: 90px; } } @media all and (min-width: 1400px) and (max-width: 1550px) { #pageHolder .pageHolder:before { left: -35px; right: -35px; } } @media all and (min-width: 1550px) and (max-width: 1700px) { #pageHolder .pageHolder:before { left: -50px; right: -50px; } } @media (min-width: 1024px) { #pageHolder aside#sidebar nav#sideMenu .collapse { display: block !important; } } span.articleDate { margin-bottom: 25px; margin-bottom: 1.5625rem; display: block; } #pageHolder #pageContent ul.newsList { margin: 0; padding: 0; list-style-type: none; margin: 0; margin: 0; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 20px 2.06195%; } #pageHolder #pageContent ul.newsList li:before { display: none; } #pageHolder #pageContent ul.newsList li { flex: 0 0 31.9587%; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); border-radius: 10px; -webkit-border-radius: 10px; overflow: hidden; } #pageHolder #pageContent ul.newsList li a { display: block; z-index: 5; } #pageHolder #pageContent ul.newsList figure { margin: 0; height: 180px; height: 11.25rem; width: 100%; overflow: hidden; position: relative; } #pageHolder #pageContent ul.newsList figure img { position: relative; width: 101%; height: 101%; top: 50%; left: 50%; max-width: none; object-fit: cover; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); } #pageHolder #pageContent ul.newsList figure a { display: block; } #pageHolder #pageContent ul.newsList a:hover figure img { transform: translate(-50%, -50%) scale(1.1); -webkit-transform: translate(-50%, -50%) scale(1.1); } #pageHolder #pageContent ul.newsList .itemInfo { display: flex; flex-direction: column; padding: 30px 25px 105px 25px; padding: 1.875rem 1.5625rem 6.5625rem 1.5625rem; line-height: 1.4; position: relative; } #pageHolder #pageContent ul.newsList .itemInfo .title { margin: 12px 0 15px 0; margin: 0.75rem 0 0.9375rem 0; } #pageHolder #pageContent ul.newsList .itemInfo .more { display: block; position: absolute; left: 22px; left: 1.375rem; bottom: 22px; bottom: 1.375rem; line-height: 1; } .fullWidth.alignCenter { width: 100%; text-align: center; } .fullWidth.alignCenter a.showMore { margin-top: 30px; } .share { clear: both; width: 100%; margin: 20px 0; margin: 1.25rem 0; padding-top: 30px; } .share span { display: inline-block; float: left; margin: -2px 5px 0 0; margin: -0.125rem 0.3125rem 0 0; line-height: 25px; } .share a { display: inline-block; margin-left: 7px; margin-left: 0.4375rem; padding: 0 3px; } .filterWrapper { width: 100%; } .filterWrapper .sectionName { margin: 40px 0 10px 0; display: block; width: 100%; } .filterWrapper .filterGroup { width: 100%; margin-bottom: 10px; height: 45px; height: 2.8125rem; line-height: 45px; line-height: 2.8125rem; padding: 0 35px 0 17px; position: relative; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); } .filterWrapper .filterGroup.open { border-radius: 5px 5px 0 0; } .filterWrapper .filterGroup.open:after { transform: rotate(180deg); -webkit-transform: rotate(180deg); } .filterWrapper .filterGroup:after { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 700; position: absolute; top: 0; line-height: 45px; line-height: 2.8125rem; width: 34px; width: 2.125rem; height: 45px; height: 2.8125rem; right: 5px; right: 0.3125rem; text-align: center; transform-style: preserve-3d; transform: rotate(0deg); -webkit-transform: rotate(0deg); } .filterWrapper .filterItems { position: absolute; width: 100%; top: 100%; left: 0; max-height: 200px; overflow: hidden; display: none; z-index: 100; border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; } .filterWrapper .filterItems .filterItem { line-height: normal; padding: 4px 17px; padding: 0.25rem 1.0625rem; line-height: 1.4; } .filterWrapper .filterItems .filterItem:last-child { padding: 4px 18px 15px 17px; padding: 0.25rem 1.125rem 0.9375rem 1.0625rem; } .filterWrapper .filterItems .filterItem:hover, .filterWrapper .filterItems .filterItem:focus { cursor: pointer; text-decoration: underline; z-index: 200; } @media (max-width: 767px) { span.articleDate { margin-bottom: 20px; } .share { padding-top: 0; margin-bottom: 0; } .filterWrapper { position: absolute; top: 100px; left: 0; } .filterWrapper .filterGroup, .filterWrapper .filterGroup:after { height: 40px; line-height: 40px; } #pageHolder #pageContent ul.newsList { gap: 10px 0; margin-top: 165px; } #pageHolder #pageContent ul.newsList li { flex: 0 0 100%; } #pageHolder #pageContent ul.newsList figure { height: auto; } #pageHolder #pageContent ul.newsList figure img { position: relative; width: 100%; height: auto; top: auto; left: auto; transform: none !important; } #pageHolder #pageContent ul.newsList .itemInfo { padding: 20px 22px 90px 22px; } #pageHolder #pageContent ul.newsList .itemInfo .title { margin: 12px 0 15px 0; } .fullWidth.alignCenter a.showMore { margin-top: 25px; } } @media all and (min-width: 768px) and (max-width: 1023px) { .filterWrapper { position: absolute; top: 240px; left: 0; display: flex; justify-content: space-between; gap: 0 2.0164%; z-index: 2; align-items: center; } .filterWrapper .sectionName { margin: 0; flex: 0 0 75px; } .filterWrapper .filterGroup { flex: 0 0 42.0118%; margin-bottom: 0; } #pageHolder #pageContent ul.newsList { margin-top: 110px; } } @media all and (min-width: 768px) and (max-width: 1400px) { #pageHolder #pageContent ul.newsList { gap: 20px 3.125%; } #pageHolder #pageContent ul.newsList li { flex: 0 0 48.4375%; } } .searchBox { --size: 36px; width: 80px; width: 5rem; height: var(--size); right: 80px; position: absolute; top: 30px; z-index: 10; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; border-radius: 18px; background-clip: padding-box; behavior: url(PIE.htc); margin-right: 4px; } .searchBox input.searchInput { position: absolute; top: 0; left: 15px; left: 0.9375rem; width: calc(100% - 15px); height: 26px; height: 1.625rem; padding: 5px 0 5px 0; padding: 0.3125rem 0 0.3125rem 0; box-sizing: content-box; border: none; color: #4d4d4d; -webkit-appearance: none; z-index: 10; background: none; outline: none; } .searchBox input.searchInput::-webkit-input-placeholder { color: #4d4d4d; opacity: 1; } .searchBox input.searchInput:moz-placeholder { color: #4d4d4d; opacity: 1; } .searchBox input.searchInput::-moz-placeholder { color: #4d4d4d; opacity: 1; } .searchBox input.searchInput:-ms-input-placeholder { color: #4d4d4d; opacity: 1; } .searchBox button.searchBTN { position: absolute; right: -30px; right: -1.875rem; top: 0; top: 0; width: 30px; width: 1.875rem; height: var(--size); border: none !important; -webkit-appearance: none; padding: 0; background-color: transparent; } .searchBox:focus-within { width: 300px; width: 18.75rem; background-color: #f7f7f7; } .searchBox:focus-within input.searchInput { width: calc(100% - 30px); padding: 5px 15px 5px 0; padding: 0.3125rem 0.9375rem 0.3125rem 0; } .searchBox a.closeBTN { position: absolute; left: -43px; left: -2.6875rem; top: 0; top: 0; z-index: 2; width: 40px; width: 2.5rem; height: 40px; height: 2.5rem; margin-left: 0 !important; text-align: center; } .searchBox a.closeBTN i { line-height: 40px; line-height: 2.5rem; } @media (max-width: 1023px) { .searchBox { display: none; } } @media all and (min-width: 1023px) and (max-width: 1400px) { .searchBox { right: calc(5% + 20px); top: 23px; } .searchBox:focus-within { width: 250px; width: 15.625rem; } } #pageHolder #pageContent .sitemap { display: flex; justify-content: space-between; } #pageHolder #pageContent .sitemap .span_5_of_10 { width: 48%; flex: 0 0 48%; } #pageHolder #pageContent .sitemap ul { list-style-type: none; margin: 0; padding: 0; list-style-type: none; padding-left: 0; } #pageHolder #pageContent .sitemap li { list-style-position: inside; margin: 0; padding: 0; list-style-type: none; width: 100%; padding: 5px 0 !important; padding: 0.3125rem 0 !important; } #pageHolder #pageContent .sitemap li a { line-height: 1.2; text-decoration: none; position: relative; } #pageHolder #pageContent .sitemap li a:hover { text-decoration: underline; } #pageHolder #pageContent .sitemap li:before { display: none; } #pageHolder #pageContent .sitemap li ul { margin: 15px 0 10px 0 !important; margin: 0.9375rem 0 0.625rem 0 !important; } #pageHolder #pageContent .sitemap li ul li { padding: 2px 0 !important; padding: 0.125rem 0 !important; } #pageHolder #pageContent .sitemap li ul ul { margin: 5px 0 !important; margin: 0.3125rem 0 !important; } #pageHolder #pageContent .sitemap li ul ul li { padding: 0 0 0 16px !important; padding: 0 0 0 1rem !important; position: relative; } #pageHolder #pageContent .sitemap li ul ul li:before { padding: 0 4px; padding: 0 0.25rem; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -ms-transition: color 0.3s; -o-transition: color 0.3s; transition: color 0.3s; display: block; height: 1px !important; height: 0.0625rem !important; left: 0 !important; width: 3px !important; width: 0.1875rem !important; border-radius: 0 !important; top: 11px !important; top: 0.6875rem !important; position: absolute; content: ""; } @media (max-width: 767px) { #pageHolder #pageContent .sitemap { margin: 0 0 55px 0; flex-wrap: wrap; } #pageHolder #pageContent .sitemap .column.span_5_of_10 { width: 100%; flex: 0 0 100%; } } @media all and (min-width: 768px) and (max-width: 1023px) { #pageHolder #pageContent .sitemap { margin-bottom: 120px; } } @media all and (min-width: 768px) and (max-width: 1250px) { #pageHolder #pageContent nav.sitemap .span_5_of_10 { flex: 0 0 48%; } }