/* Theme Name: William Patten Primary School Author: James Sui Author URI: http://jamessui.co.uk/ */ /* resets -------------------------------------------------------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } html { font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; overflow-y: scroll; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -moz-box-sizing: inherit; -webkit-box-sizing: inherit; 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; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } svg:not(:root) { overflow: hidden; } img, iframe { border: 0; vertical-align: middle; } strong { font-weight: 500; } em { font-style: italic; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } button, input, optgroup, select, textarea { margin: 0; font: inherit; line-height: normal; vertical-align: baseline; color: inherit; outline: 0; border-radius: 0; -webkit-font-smoothing: inherit; } button, input, textarea { padding: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } legend { white-space: normal; } input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; } input[type="checkbox"], input[type="radio"] { padding: 0; } label, button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; } button[disabled], input[disabled] { cursor: default; } button { width: auto; overflow: visible; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input[type="search"] { -webkit-appearance: none; border-radius: 0; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } table { border-collapse: collapse; border-spacing: 0; } th, td { vertical-align: top; } th { font-weight: normal; text-align: left; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } ul, ol { list-style: none; } li { display: list-item; } a { color: #000; background: transparent; text-decoration: none; cursor: pointer; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } .hide { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } h2, li, a, span, span:before, span:after, button { -webkit-transition: color .4s ease, background-color .4s ease, border-color .4s ease, opacity .4s ease; transition: color .4s ease, background-color .4s ease, border-color .4s ease, opacity .4s ease; } /* global -------------------------------------------------------------------------- */ body { padding-top: 168px; font: 62.5%/1 'omnes-pro', 'Helvetica Neue', 'Arial', 'Helvetica', sans-serif; background: #fff; color: #000; text-align: center; letter-spacing: .02em; } /* header */ .close-nav { width: 100%; max-width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9997; display: none; cursor: pointer; } body > header { width: 100%; background: #fff; position: fixed; top: 0; left: 0; z-index: 9998; } body > header > div { max-width: 1008px; margin: 0 auto; position: relative; } body > header > div > h1 { padding: 1.8em 80px 1.8em 0; text-align: center; -webkit-transition: all .4s ease; transition: all .4s ease; } body > header > div > h1 a { width: 307px; height: 150px; position: relative; display: inline-block; -webkit-transition: all .4s ease; transition: all .4s ease; } body > header > div > h1 img { width: 307px; height: 150px; -webkit-transition: all .4s ease; transition: all .4s ease; } body > header > div > h1 img + img { width: 83px; height: 69px; position: absolute; top: 0; left: 60px; } body > header > div > ul { position: absolute; top: 0; left: 0; } body > header > div > ul + ul { left: auto; right: 0; } body > header > div > ul > li { position: relative; padding: 0 12px; -webkit-transition: all .4s ease; transition: all .4s ease; } body > header > div > ul > li > a { display: inline-block; position: relative; font-size: 2em; color: #0080c0; text-transform: uppercase; } body > header > div > ul > li > a:hover { color: #e82884; } body > header > div > ul > li.menu { margin-top: 3em; } body > header > div > ul > li.menu > a { padding: 36px 0 0; } body > header > div > ul > li.menu > a > span { width: 28px; height: 3px; background: #0080c0; position: absolute; top: 8px; left: 50%; margin-left: -14px; } body > header > div > ul > li.menu > a > span:before, body > header > div > ul > li.menu > a > span:after { width: 100%; height: 3px; background: #0080c0; position: absolute; left: 0; content: ' '; display: block; } body > header > div > ul > li.menu > a > span:before { top: -6px; } body > header > div > ul > li.menu > a > span:after { bottom: -6px; } body > header > div > ul > li.menu > a:hover > span, body > header > div > ul > li.menu > a:hover > span:before, body > header > div > ul > li.menu > a:hover > span:after { background: #e82884; } body > header > div > ul + ul > li { margin-top: 3em; } body > header > div > ul + ul > li + li { margin-top: 1.8em; } body > header > div > nav.menu { width: 1040px; min-height: 100%; height: 100%; position: fixed; top: 0; left: 50%; margin-left: -520px; background: rgba(255,255,255,.5); text-align: left; overflow: auto; display: none; z-index: 9999;-webkit-transition: top .2s ease; transition: top .2s ease; } body > header > div > nav.menu h2 { width: 273px; padding: 50px 0 14px; text-align: center; font-size: 1.6em; text-transform: uppercase; letter-spacing: .03em; position: relative; z-index: 9998; } body > header > div > nav.menu > h2 { color: #585857; padding-left: 132px; text-align: left; background: #cecece url(images/menu-close.svg) no-repeat 32px 20px; background-size: 28px auto; cursor: pointer; } body > header > div > nav.menu > h2:hover { background-color: #ebebeb; } body > header > div > nav.menu ul { width: 273px; background: #ebebeb; position: relative; z-index: 9998; } body > header > div > nav.menu ul > li { border-top: 1px solid #fff; } body > header > div > nav.menu ul > li > a { text-transform: uppercase; padding: 11px 32px 8px; font-size: 1.6em; line-height: 1.25em; color: #585857; background: #ebebeb; display: block; letter-spacing: .03em; } body > header > div > nav.menu ul > li.on > a, body > header > div > nav.menu ul > li > a:hover, body > header > div > nav.menu ul > li.expanded > a { color: #fff; } body > header > div > nav.menu ul > li.has-children > a { background-image: url(images/menu-has-children.svg); background-repeat: no-repeat; background-position: 90% 50%; background-position: calc(100% - 18px) 50%; background-size: 6px auto; } body > header > div > nav.menu ul > li.has-children > a:hover, body > header > div > nav.menu ul > li.has-children.expanded > a { background-image: url(images/menu-has-children-hover.svg); } body > header > div > nav.menu ul > li > div { width: 273px; position: absolute; top: -80px; left: 273px; border-left: 1px solid #fff; display: none; } body > header > div > nav.menu ul > li > div .back { display: none; } body > header > div > nav.menu ul > li > div h2 { color: #fff; } body > header > div > nav.menu > ul > li:nth-of-type(4n-3).on > a, body > header > div > nav.menu > ul > li:nth-of-type(4n-3).on li.on > a, body > header > div > nav.menu > ul > li:nth-of-type(4n-3) a:hover, body > header > div > nav.menu > ul > li:nth-of-type(4n-3).expanded > a, body > header > div > nav.menu > ul > li:nth-of-type(4n-3).expanded li.expanded > a { background-color: #0080c0; } body > header > div > nav.menu > ul > li:nth-of-type(4n-2).on > a, body > header > div > nav.menu > ul > li:nth-of-type(4n-2).on li.on > a, body > header > div > nav.menu > ul > li:nth-of-type(4n-2) a:hover, body > header > div > nav.menu > ul > li:nth-of-type(4n-2).expanded > a, body > header > div > nav.menu > ul > li:nth-of-type(4n-2).expanded li.expanded > a { background-color: #e82837; } body > header > div > nav.menu > ul > li:nth-of-type(4n-1).on > a, body > header > div > nav.menu > ul > li:nth-of-type(4n-1).on li.on > a, body > header > div > nav.menu > ul > li:nth-of-type(4n-1) a:hover, body > header > div > nav.menu > ul > li:nth-of-type(4n-1).expanded > a, body > header > div > nav.menu > ul > li:nth-of-type(4n-1).expanded li.expanded > a { background-color: #ff6e00; } body > header > div > nav.menu > ul > li:nth-of-type(4n).on > a, body > header > div > nav.menu > ul > li:nth-of-type(4n).on li.on > a, body > header > div > nav.menu > ul > li:nth-of-type(4n) a:hover, body > header > div > nav.menu > ul > li:nth-of-type(4n).expanded > a, body > header > div > nav.menu > ul > li:nth-of-type(4n).expanded li.expanded > a { background-color: #e82884; } body > header > div > nav.menu > ul > li:nth-of-type(4n-3) > div h2 { background: #0080c0; } body > header > div > nav.menu > ul > li:nth-of-type(4n-2) > div h2 { background: #e82837; } body > header > div > nav.menu > ul > li:nth-of-type(4n-1) > div h2 { background: #ff6e00; } body > header > div > nav.menu > ul > li:nth-of-type(4n) > div h2 { background: #e82884; } body > header > section.contact { width: 1040px; margin: 0 auto; position: relative; background: #0080c0; text-align: left; height: 224px; max-height: 0; z-index: 9999; overflow: hidden; -webkit-transition: max-height .2s ease; transition: max-height .2s ease; } body.show-contact > header > section.contact { max-height: 224px; } body > header > section.contact > div { width: 492px; padding: 0 0 0 36px; float: left; } body > header > section.contact > div + div { width: 256px; padding: 0; } body > header > section.contact > div + div + div { width: 292px; } body > header > section.contact > div a { color: #fff; text-transform: uppercase; } body > header > section.contact > div a span { position: relative; display: inline-block; overflow: hidden; } body > header > section.contact > div a span:after { background: #fff; display: block; width: 100%; height: 1px; position: absolute; bottom: 0; left: -100%; -webkit-transition: left .2s ease-in-out; transition: left .2s ease-in-out; content: ''; } body > header > section.contact > div a:hover span:after { left: 0; } body > header > section.contact > div > h2 { padding: 46px 0 0; font-size: 1.4em; color: #fff; text-transform: uppercase; letter-spacing: .03em; opacity: .5; } body > header > section.contact > div > p { margin-top: 1.053em; font-size: 1.9em; line-height: 1.211em; color: #fff; font-weight: 300; letter-spacing: .03em; } body > header > section.contact > div > p.button { margin-top: .143em; font-size: 1.4em; line-height: 1.571em; font-weight: 400; opacity: .5; } body > header > section.contact > div > ul { margin-top: 1.053em; font-size: 1.9em; line-height: 1.211em; color: #fff; font-weight: 300; letter-spacing: .03em; } body > header > section.contact > div > ul a { text-transform: none; } body > header > section.contact > div > ul img { width: 34px; height: auto; margin: 0 8px 0 0; display: inline-block; vertical-align: middle; } body > header > section.contact > div > ul span { vertical-align: middle; } body > header > section.contact > div > ul li ~ li { margin-top: 6px; } body > header > div > a.contact-close { line-height: 100px; height: 100px; padding: 0 42px; font-size: 2em; color: #fff; position: absolute; top: 0; right: -16px; background: #0080c0; text-transform: uppercase; display: none; -webkit-transition: all .4s ease; transition: all .4s ease; } body > header > div > a.contact-close span { line-height: 120%; position: relative; display: inline-block; overflow: hidden; vertical-align: middle; } body > header > div > a.contact-close span:after { background: #fff; display: block; width: 100%; height: 1px; position: absolute; bottom: 0; left: -100%; -webkit-transition: left .2s ease-in-out; transition: left .2s ease-in-out; content: ''; } body > header > div > a.contact-close:hover span:after { left: 0; } body > header > div > section.search { width: 1040px; padding: 5.6em 0; position: fixed; top: 0; left: 50%; margin-left: -520px; background: #0080c0; text-align: left; display: none; z-index: 9999; } body > header > div > section.search form { margin: 0 145px; display: block; } body > header > div > section.search form label { margin-bottom: 6px; font-size: 2.6em; font-weight: 300; color: #fff; letter-spacing: .03em; display: block; } body > header > div > section.search form input { width: calc(100% - 78px); height: 78px; line-height: 78px; font-size: 5.4em; font-weight: 300; color: #fff; letter-spacing: .03em; border: 0; border-bottom: 1px solid rgba(255,255,255,.5); background: transparent; float: left; } body > header > div > section.search form button { width: 78px; height: 78px; line-height: 78px; font-size: 3em; text-transform: uppercase; font-weight: 300; color: #0080c0; background: #fff; border: 0; float: left; } body > header > div > section.search form button:hover { opacity: .75; } body > header > div > section.search .close { width: 45px; height: 45px; position: absolute; top: 30px; right: 30px; background: url(images/search-close.svg) no-repeat 0 0; background-size: 100% 100%; } body > header > div > section.search .close:hover { opacity: .5; } body.scrolling > header > div > h1 { padding: .8em 0; } body.scrolling > header > div > h1 a { width: 36px; height: 30px; } body.scrolling > header > div > h1 img { width: 36px; height: auto; opacity: 0; } body.scrolling > header > div > h1 img + img { width: 36px; height: 30px; top: 0; left: 0; opacity: 1; } body.scrolling > header > div > ul > li { padding: 0; } body.scrolling > header > div > ul > li.menu { margin-top: 1.4em; } body.scrolling > header > div > ul > li.menu > a { padding: 0 0 0 45px; } body.scrolling > header > div > ul > li.menu > a > span { top: 50%; left: 0; margin-top: -2px; margin-left: 0; } body.scrolling > header > div > ul + ul > li { margin-left: 2.8em; margin-top: 1.4em; float: right; } body.scrolling > header > div > ul + ul > li + li { margin-top: 1.4em; } body.scrolling > header > div > a.contact-close { height: 46px; line-height: 46px; padding: 0 28px; } /* main content */ #wpps { max-width: 1008px; margin: 0 auto; padding: 4em 0 0; position: relative; z-index: 2; text-align: left; -webkit-transition: margin-top .2s ease; transition: margin-top .2s ease; } body.show-contact #wpps { margin-top: 224px; } #wpps > .ticker { padding: 0 8px; border: 1px solid #ebebeb; border-width: 1em 0; background: #ebebeb; position: relative; } #wpps > .ticker h2 { position: absolute; top: 0; left: 8px; font-size: 1.6em; line-height: 1.188em; font-weight: 300; color: #585857; text-transform: uppercase; vertical-align: top; display: inline-block; } #wpps > .ticker ul { margin: 0 0 0 122px; font-size: 1.6em; line-height: 1.188em; font-weight: 300; color: #585857; vertical-align: top; position: relative; } #wpps > .ticker ul li { padding: 0 40px 0 0; float: left; } #wpps > .ticker ul li a { color: #0080c0; } #wpps > .ticker ul li a:hover { color: #e82884; } #wpps > .slideshow > div { position: relative; } #wpps > .slideshow > div + div { display: none; } #wpps > .slideshow > div div { position: relative; } #wpps > .slideshow > div a { position: relative; display: block; } #wpps > .slideshow > div img { width: 1008px; height: 460px; } #wpps > .slideshow > div span { width: 100%; height: 100%; padding: 24px 130px; position: absolute; top: 0; left: 0; background: rgba(0,128,194,.75); font-size: 3.8em; line-height: 1.263em; color: #fff; opacity: 0; } #wpps > .slideshow > div:hover span { opacity: 1; } #wpps > .slideshow .slick-prev { width: 26px; height: 48px; background: url(images/slideshow-prev.svg) no-repeat 0 0; background-size: 100% 100%; position: absolute; top: 50%; margin-top: -24px; left: 16px; z-index: 9997; outline: 0; } #wpps > .slideshow .slick-next { width: 26px; height: 48px; background: url(images/slideshow-next.svg) no-repeat 0 0; background-size: 100% 100%; position: absolute; top: 50%; margin-top: -24px; right: 16px; z-index: 9997; outline: 0; } #wpps > .slideshow .slick-prev:hover, #wpps > .slideshow .slick-next:hover { opacity: .75; } #wpps > .slideshow .slick-dots li { width: 110px; text-align: center; padding: 8px 0 10px; background: #0080c0; color: #fff; font-size: 2em; font-weight: 300; position: absolute; bottom: 0; left: 0; z-index: 4; } #wpps > .slideshow .slick-dots li.slick-active { z-index: 5; } #wpps > .pods > section { width: 496px; margin: 3em 0 0; float: left; } #wpps > .pods > section > header { position: relative; padding: .3em 9px; background: #ebebeb; } #wpps > .pods > section > header > h2 { font-size: 2.8em; line-height: 120%; font-weight: 300; } #wpps > .pods > section > header > h2 a { color: #0080c0; position: relative; display: inline-block; overflow: hidden; } #wpps > .pods > section > header > h2 a:after { background: #0080c0; display: block; width: 100%; height: 1px; position: absolute; bottom: 0; left: -100%; -webkit-transition: left .2s ease-in-out; transition: left .2s ease-in-out; content: ''; } #wpps > .pods > section > header > h2 a:hover:after { left: 0; } #wpps > .pods > section > header > p { position: absolute; top: 12px; right: 16px; font-size: 2em; line-height: 120%; font-weight: 300; } #wpps > .pods > section > header > p a { color: #6f6f6e; position: relative; display: inline-block; overflow: hidden; } #wpps > .pods > section > header > p a:after { background: #6f6f6e; display: block; width: 100%; height: 1px; position: absolute; bottom: 0; left: -100%; -webkit-transition: left .2s ease-in-out; transition: left .2s ease-in-out; content: ''; } #wpps > .pods > section > header > p a:hover:after { left: 0; } #wpps > .pods > section > .scroll { margin-top: 1px; background: #ebebeb; height: 378px; border: 1px solid #ebebeb; border-width: 12px 8px 0; overflow: auto; } #wpps > .pods > section > .scroll .scroll-element { position: absolute; background: #fff; width: 4px; height: 100%; top: 0; right: 0; } #wpps > .pods > section > .scroll .scroll-element div { width: 100%; height: 100%; left: 0; top: 0; display: block; position: absolute; } #wpps > .pods > section > .scroll .scroll-bar { background: #0080c0; cursor: pointer; } #wpps > .pods > section > .bar { margin-top: 1px; padding: 1.4em 16px 1.2em; background: #0080c0; } #wpps > .pods > section > .bar a { color: #fff; } #wpps > .pods > section > .bar a span { position: relative; display: inline-block; overflow: hidden; } #wpps > .pods > section > .bar a span:after { background: #fff; display: block; width: 100%; height: 1px; position: absolute; bottom: 0; left: -100%; -webkit-transition: left .2s ease-in-out; transition: left .2s ease-in-out; content: ''; } #wpps > .pods > section > .bar a:hover span:after { left: 0; } #wpps > .pods > section > .bar ul { font-size: 1.3em; line-height: 120%; font-weight: 300; } #wpps > .pods > section > .bar ul li { float: left; } #wpps > .pods > section > .bar ul li + li { margin-left: 92px; } #wpps > .pods > section > .bar ul li.subscribe a { padding-left: 28px; display: inline-block; position: relative; } #wpps > .pods > section > .bar ul li.subscribe a:before { width: 20px; height: 20px; background: url(images/pods-subscribe.svg) no-repeat 0 0; background-size: 100% 100%; content: ' '; display: block; position: absolute; top: 50%; left: 0; margin-top: -10px; } #wpps > .pods > section.calendar .scroll > h3 { margin-bottom: 18px; font-size: 2em; font-weight: 300; color: #6f6f6e; } #wpps > .pods > section.calendar .scroll > article { padding-bottom: 1.6em; } #wpps > .pods > section.calendar .scroll > article a { display: block; } #wpps > .pods > section.calendar .scroll > article a > span { margin-right: 14px; width: 40px; height: 40px; line-height: 40px; background: #0080c0; font-size: 2em; font-weight: 600; color: #fff; text-align: center; border-radius: 50%; float: left; } #wpps > .pods > section.calendar .scroll > article a time { margin-top: 2px; font-size: 1.3em; line-height: 120%; font-weight: 300; color: #0080c0; display: block; } #wpps > .pods > section.calendar .scroll > article a time strong { font-weight: 600; } #wpps > .pods > section.calendar .scroll > article a h4 { font-size: 1.6em; line-height: 120%; font-weight: 600; color: #0080c0; } #wpps > .pods > section.calendar .scroll > article a:hover h4 { text-decoration: underline; } #wpps > .pods > section.news { float: right; } #wpps > .pods > section.news > header > h2 a { color: #e82837; } #wpps > .pods > section.news > header > h2 a:after { background: #e82837; } #wpps > .pods > section.news > .bar { background: #e82837; } #wpps > .pods > section.news > .scroll .scroll-bar { background: #e82837; } #wpps > .pods > section.news > .scroll article { margin: 0 12px 0 0; padding: 0 0 1.2em; } #wpps > .pods > section.news > .scroll article ~ article { padding-top: 1.2em; border-top: 1px solid #fff; } #wpps > .pods > section.news > .scroll article a { display: block; } #wpps > .pods > section.news > .scroll article a h2 { font-size: 1.6em; line-height: 120%; font-weight: 600; color: #e82837; letter-spacing: .03em; } #wpps > .pods > section.news > .scroll article a:hover h2 span { text-decoration: underline; } #wpps > .pods > section.news > .scroll article a h2 img { margin: 4px 8px 0 0; width: 114px; height: 64px; float: left; } #wpps > .pods > section.news > .scroll article a p { margin: 4px 0 0 122px; font-size: 1.3em; line-height: 120%; font-weight: 300; color: #6f6f6e; letter-spacing: .03em; } #wpps > .pods > section.news > .scroll article a p + p { text-transform: uppercase; color: #e82837; -webkit-transition: color .4s ease; transition: color .4s ease; } #wpps > .pods > section.news > .scroll article a:hover p + p { color: #6f6f6e; } #wpps > .pods.custom { display: flex; justify-content: space-between; } #wpps > .pods.custom:before, #wpps > .pods.custom:after { display: none; } #wpps > .pods.custom > section { background: #ebebeb; display: flex; flex-direction: column; } #wpps > .pods.custom > section > header > h2, #wpps > .pods.custom > section > header > h2 a { color: #e82837; } #wpps > .pods.custom > section > header > h2 a:after { background: #e82837; } #wpps > .pods.custom > section > .bar { background: #e82837; } #wpps > .pods.custom > section { width: 496px; margin: 3em 0 0; } #wpps > .pods.custom > section > .panel { padding: 12px 8px 0; border-top: 1px solid #FFFFFF; } #wpps > .pods.custom > section > .panel article { margin: 0 12px 0 0; padding: 0 0 1.2em; } #wpps > .pods.custom > section > .panel article ~ article { padding-top: 1.2em; border-top: 1px solid #fff; } #wpps > .pods.custom > section > .panel article a, #wpps > .pods.custom > section > .panel article > span { display: block; } #wpps > .pods.custom > section > .panel article h2 { font-size: 1.6em; line-height: 120%; font-weight: 600; color: #e82837; letter-spacing: .03em; } #wpps > .pods.custom > section > .panel article a:hover h2 span { text-decoration: underline; } #wpps > .pods.custom > section > .panel article h2 img { margin: 4px 8px 0 0; width: 114px; height: 64px; float: left; } #wpps > .pods.custom > section > .panel article p { margin: 4px 0 0; font-size: 1.3em; line-height: 120%; font-weight: 300; color: #6f6f6e; letter-spacing: .03em; } #wpps > .pods.custom > section > .panel article p + p { text-transform: uppercase; color: #e82837; -webkit-transition: color .4s ease; transition: color .4s ease; } #wpps > .pods.custom > section > .panel article a:hover p + p { color: #6f6f6e; } #wpps > .pods.custom > section > .bar { margin: auto 0 0; border-top: 1px solid #FFFFFF; } #wpps > .pods.custom > section + section > header > h2, #wpps > .pods.custom > section + section > header > h2 a { color: #0080c0; } #wpps > .pods.custom > section + section > header > h2 a:after { background: #0080c0; } #wpps > .pods.custom > section + section > .bar { background: #0080c0; } #wpps > .pods.custom > section + section > .panel article h2 { color: #0080c0; } #wpps > .pods.custom > section + section > .panel article a h2 { color: #0080c0; } #wpps > .pods.custom > section + section > .panel article a p + p { color: #0080c0; } #wpps > .slideshows { display: flex; justify-content: space-between; } #wpps > .slideshows:before, #wpps > .slideshows:after { display: none; } #wpps > .slideshows .slideshow { width: 496px; } #wpps > .slideshows .slideshow > div { position: relative; } #wpps > .slideshows .slideshow > div + div { display: none; } #wpps > .slideshows .slideshow > div div { position: relative; } #wpps > .slideshows .slideshow > div a { position: relative; display: block; } #wpps > .slideshows .slideshow > div img { width: 496px; height: 400px; } #wpps > .slideshows .slideshow > div span { width: 100%; height: 100%; padding: 20px; position: absolute; top: 0; left: 0; background: rgba(0,128,194,.75); font-size: 1.8em; line-height: 120%; color: #fff; opacity: 0; } #wpps > .slideshows .slideshow > div:hover span { opacity: 1; } #wpps > .slideshows .slideshow .slick-prev { width: 13px; height: 24px; background: url(images/slideshow-prev.svg) no-repeat 0 0; background-size: 100% 100%; position: absolute; top: 50%; margin-top: -12px; left: 10px; z-index: 9997; outline: 0; } #wpps > .slideshows .slideshow .slick-next { width: 13px; height: 24px; background: url(images/slideshow-next.svg) no-repeat 0 0; background-size: 100% 100%; position: absolute; top: 50%; margin-top: -12px; right: 10px; z-index: 9997; outline: 0; } #wpps > .slideshows .slideshow .slick-prev:hover, #wpps > .slideshows .slideshow .slick-next:hover { opacity: .75; } #wpps > .slideshows .slideshow .slick-dots li { width: 70px; text-align: center; padding: 0.5em; background: #0080c0; color: #fff; font-size: 1.6em; font-weight: 300; position: absolute; bottom: 0; left: 0; z-index: 4; } #wpps > .slideshows .slideshow .slick-dots li.slick-active { z-index: 5; } /* general content */ #wpps > header { position: relative; } #wpps > header > nav { min-width: 273px; padding: 1em 56px .8em 24px; background: #ff6e00; position: absolute; top: 0; left: 0; z-index: 5; } #wpps > header > nav > ol li { margin: 2px 4px 0 0; font-size: 1.6em; line-height: 120%; letter-spacing: .03em; text-transform: uppercase; display: inline-block; vertical-align: top; } #wpps > header > nav > ol li span { display: none; } #wpps > header > nav > ol li ~ li span { display: inline; } #wpps > header > nav > ol li a { color: #fff; opacity: .85; } #wpps > header > nav > ol li a:hover { opacity: 1; } #wpps > header > nav > ol li.current { margin: 0; color: #fff; font-size: 2.6em; } #wpps > header > nav > .toggle { width: 16px; height: 8px; background: url(images/content-header-toggle.svg) no-repeat 0 0; background-size: 100% 100%; position: absolute; top: 20px; right: 16px; display: block; cursor: pointer; -webkit-transition: -webkit-transform .4s ease-in-out; transition: transform .4s ease-in-out; } #wpps > header > nav.open > .toggle { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } #wpps > header > nav > ul { width: 273px; background: #ebebeb; position: absolute; top: 100%; right: 0; max-height: 0; overflow: hidden; -webkit-transition: max-height .4s ease-in-out; transition: max-height .4s ease-in-out; } #wpps > header > nav.open > ul { max-height: 1000px; } #wpps > header > nav > ul > li { border-bottom: 1px solid #fff; } #wpps > header > nav > ul > li > a { text-transform: uppercase; padding: 11px 20px 8px; font-size: 1.6em; line-height: 1.25em; color: #585857; background: #ebebeb; display: block; letter-spacing: .03em; } #wpps > header > nav > ul > li > a:hover { background: #ff6e00; color: #fff; } #wpps > header > nav > ul > li.current_page_item > a { opacity: .5; } #wpps > header > nav > ul > li.current_page_item > a:hover { opacity: 1; } #wpps > header > nav > ul > li ul { display: none; } #wpps > header > .images img { width: 1008px; height: 450px; } #wpps > header > .text { max-width: 750px; padding: 10px 24px 12px; font-size: 2.6em; line-height: 1.154em; font-weight: 300; color: #fff; width: 100%; position: absolute; bottom: 0; left: 0; background: #ff6e00; z-index: 4; } #wpps .gen { color: #6f6f6e; } #wpps .gen > header { margin-top: 1.5em; } #wpps .gen > header h1 { max-width: 780px; margin-top: 22px; margin-bottom: 18px; padding-left: 126px; font-size: 2.6em; line-height: 120%; font-weight: 300; color: #ff6e00; position: relative; } #wpps .gen > header h1 strong { font-weight: 600; } #wpps .gen > header h1 span { font-size: 16px; line-height: 1.375em; font-weight: 500; display: block; } #wpps .gen > header h1:before { width: 72px; height: 72px; background: #ff6e00 url(images/gen-icon.svg) no-repeat 50% 50%; border-radius: 50%; background-size: 50px auto; position: absolute; top: -22px; left: 22px; content: ' '; display: block; } body.search-results #wpps .gen > header h1:before { visibility: hidden; } #wpps .gen > .block { margin-left: 126px; border-top: 1px solid #e6e6e6; } #wpps .gen > .block > * { max-width: 624px; } #wpps .gen > .block ~ .block { margin-top: 2.6em; } #wpps .gen > .block img.inline-image { margin-top: 2em; margin-right: -256px; float: right; } #wpps .gen > .block a { color: #ff6e00; position: relative; display: inline-block; overflow: hidden; vertical-align: text-bottom; } #wpps .gen > .block a:after { background: #ff6e00; display: block; width: 100%; height: 1px; position: absolute; bottom: 0; left: -100%; -webkit-transition: left .2s ease-in-out; transition: left .2s ease-in-out; content: ''; } #wpps .gen > .block a:hover:after { left: 0; } #wpps .gen > .block h2 { margin-top: .667em; font-size: 2.4em; line-height: 1.25em; font-weight: 300; letter-spacing: .03em; } #wpps .gen > .block p { margin-top: 1.25em; font-size: 1.6em; line-height: 1.375em; font-weight: 300; } #wpps .gen > .block ul { margin-top: 1.25em; font-size: 1.6em; line-height: 1.375em; font-weight: 300; } #wpps .gen > .block ul li { position: relative; } #wpps .gen > .block ul li:before { width: 10px; height: 10px; background: #ff6e00; border-radius: 50%; position: absolute; top: 6px; left: -18px; content: ' '; display: block; } #wpps .gen > .block ul li ~ li { margin-top: 1.125em; } #wpps .gen > .block ol { margin-top: 1.25em; margin-left: 2em; font-size: 1.6em; line-height: 1.375em; font-weight: 300; list-style: decimal; } #wpps .gen > .block ol li ~ li { margin-top: 1.125em; } #wpps .gen > .block .table-wrap { overflow: auto; } #wpps .gen > .block > .table-wrap { max-width: 100%; } #wpps .gen > .block table { width: 100%; margin-top: 1.25em; font-size: 1.4em; line-height: 1.375em; font-weight: 300; } #wpps .gen > .block table th, #wpps .gen > .block table td { padding: .313em 8px; border: 1px solid #e6e6e6; } #wpps .gen > .block table thead th, #wpps .gen > .block table thead td { background: #ff6e00; font-weight: 600; color: #fff; } #wpps .gen > .block table thead th strong, #wpps .gen > .block table thead td strong { font-weight: 600; } #wpps .gen > .block table p { margin-top: 0; font-size: inherit; line-height: inherit; font-weight: inherit; } #wpps .gen > .block img.aligncenter { margin: 0 auto; display: block; } #wpps .gen > .listing { margin-left: 126px; max-width: 752px; } #wpps .gen > .blog + .listing { margin-left: 0; max-width: 100%; } #wpps .gen > .listing nav { padding-top: 1em; border-top: 1px solid #e6e6e6; } #wpps .gen > .listing nav h2 { margin-right: 1em; font-size: 1.6em; line-height: 1.375em; font-weight: 300; display: inline-block; } #wpps .gen > .listing nav ul { margin-right: 34px; font-size: 1.6em; line-height: 1.375em; font-weight: 300; display: inline-block; } #wpps .gen > .listing nav ul li { display: inline-block; } #wpps .gen > .listing nav ul li ~ li:before { margin: 0 7px 0 5px; display: inline-block; content: '|'; } #wpps .gen > .listing nav ul li a { color: #585857; } #wpps .gen > .listing nav ul li a:hover { color: #ff6e00; } #wpps .gen > .listing nav ul li span { font-weight: 600; color: #ff6e00; } #wpps .gen > .listing article { margin-top: 3em; border-top: 1px solid #e6e6e6; } #wpps .gen > .listing nav + article { margin-top: 1em; border-top: 0; } #wpps .gen > .listing article > a { display: block; position: relative; } #wpps .gen > .listing article > a span { margin-top: -4px; position: relative; float: left; } #wpps .gen > .listing article.video > a span:before { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: url(images/play.svg) no-repeat 0 0; background-size: 100% 100%; position: absolute; top: 50%; left: 50%; content: ' '; display: block; } #wpps .gen > .listing article > a span img { width: 240px; height: 135px; } #wpps .gen > .listing article.video > a span img { height: auto; } #wpps .gen > .listing article > a time { margin-top: 1.25em; font-size: 1.6em; line-height: 120%; font-weight: 600; letter-spacing: .03em; color: #585857; display: block; } #wpps .gen > .listing article > a h2 { margin-top: .833em; font-size: 2.4em; line-height: 120%; font-weight: 300; letter-spacing: .03em; color: #ff6e00; } #wpps .gen > .listing article > a:hover h2 { text-decoration: underline; } #wpps .gen > .listing article > a time + h2 { margin-top: 0; } #wpps .gen > .listing article > a p { margin-top: .375em; font-size: 1.6em; line-height: 1.375em; letter-spacing: .03em; color: #585857; } #wpps .gen > .listing article > a p + p { color: #ff6e00; text-transform: uppercase; } #wpps .gen > .listing article > a span ~ time, #wpps .gen > .listing article > a span ~ h2, #wpps .gen > .listing article > a span ~ p { margin-left: 265px; } #wpps .gen > .listing article > .gallery { display: none; } .page-id-375 #wpps .gen > .listing article > a span img { width: 70px; height: 59px; } .page-id-375 #wpps .gen > .listing article > a span ~ time, .page-id-375 #wpps .gen > .listing article > a span ~ h2, .page-id-375 #wpps .gen > .listing article > a span ~ p { margin-left: 90px; } #wpps .gen > .listing .nav { margin-top: 3em; } #wpps .gen > .listing .nav a { padding: .5em 0 .625em; font-size: 1.6em; line-height: 1.375em; color: #585857; text-align: center; font-weight: 300; background: #ebebeb; display: block; } #wpps .gen > .listing .nav a:hover { background: #f5f5f5; } #wpps .gen > .listing .wp-pagenavi { margin-top: 3em; padding-top: 3em; border-top: 1px solid #e6e6e6; text-align: center; } #wpps .gen > .listing .wp-pagenavi a, #wpps .gen > .listing .wp-pagenavi span { margin: 0 2px; padding: 0 2px; font-size: 1.6em; line-height: 1.375em; font-weight: 300; display: inline-block; } #wpps .gen > .listing .wp-pagenavi a { color: #ff6e00; } #wpps .gen > .listing .wp-pagenavi a:hover { color: #585857; } #wpps .gen > .listing .wp-pagenavi span.current { font-weight: 600; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } #wpps .gen > .listing > .ajax { position: relative; } #wpps .gen > .listing > .ajax:before { width: 20px; height: 20px; margin-left: -10px; background: url(images/loading.svg) no-repeat 50% 50%; background-size: cover; position: absolute; bottom: -20px; left: 50%; z-index: 1000; content: ''; opacity: 0; -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; -ms-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } #wpps .gen > .listing > .ajax > article { -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; -ms-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; } #wpps .gen > .listing nav + .ajax > article:first-child { margin-top: 1em; border-top: 0; } #wpps .gen > .listing > .ajax.loading > article { opacity: .5; } #wpps .gen > .listing > .ajax.loading:before { opacity: 1; } #wpps .gen > .blog article { width: 496px; margin: 2.8em 0 0 1.6em; padding-bottom: 3.4em; float: left; } #wpps .gen > .blog article:nth-of-type(2n-1) { margin-left: 0; } #wpps .gen > .blog article a { position: relative; display: block; } #wpps .gen > .blog article a span { position: relative; overflow: hidden; display: block; background: #e1e1e1; } #wpps .gen > .blog article a span img { width: 365px; height: 206px; float: left; } #wpps .gen > .blog article a span time { max-width: 90px; margin: 6px 8px; font-size: 1.6em; line-height: 1.375em; font-weight: 500; letter-spacing: .03em; color: #0080c0; float: left; } #wpps .gen > .blog article a span:after { width: 110px; height: 120px; background: url(images/blog-teacher.svg) no-repeat 0 0; background-size: 100% 100%; position: absolute; bottom: 10px; right: 10px; content: ' '; display: block; } #wpps .gen > .blog article a cite { padding: 0 10px; margin-top: 10px; font-size: 1.6em; line-height: 1.375em; font-weight: 500; letter-spacing: .03em; color: #0080c0; display: block; } #wpps .gen > .blog article a h2 { padding: 0 10px; font-size: 2.4em; line-height: 120%; font-weight: 300; letter-spacing: .03em; color: #0080c0; } #wpps .gen > .blog article a:hover h2 { text-decoration: underline; } #wpps .gen > .blog article a p { padding: 0 10px; margin-top: .375em; font-size: 1.6em; line-height: 1.375em; letter-spacing: .03em; color: #585857; } #wpps .gen > .blog article a p + p { color: #0080c0; text-transform: uppercase; } #wpps .gen > .blog article.pupil a span time { color: #e82884; } #wpps .gen > .blog article.pupil a span:after { background-image: url(images/blog-pupil.svg); } #wpps .gen > .blog article.pupil a cite { color: #e82884; } #wpps .gen > .blog article.pupil a h2 { color: #e82884; } #wpps .gen > .blog article.pupil a p + p { color: #e82884; } /* colour variations */ #wpps.blue > header > nav { background: #0080c0; } #wpps.blue > header > nav > ul > li > a:hover { background: #0080c0; } #wpps.blue > header > .text { background: #0080c0; } #wpps.blue .gen > header h1 { color: #0080c0; } #wpps.blue .gen > header h1:before { background-color: #0080c0; } #wpps.blue .gen > .block a { color: #0080c0; } #wpps.blue .gen > .block a:after { background: #0080c0; } #wpps.blue .gen > .block ul li:before { background: #0080c0; } #wpps.blue .gen > .block table thead th, #wpps.blue .gen > .block table thead td { background: #0080c0; } #wpps.blue .gen > .listing article a h2 { color: #0080c0; } #wpps.blue .gen > .listing nav ul li a:hover { color: #0080c0; } #wpps.blue .gen > .listing nav ul li span { color: #0080c0; } #wpps.blue .gen > .listing article a p + p { color: #0080c0; } #wpps.blue .gen > .listing .wp-pagenavi a { color: #0080c0; } #wpps.blue .gen > .listing .wp-pagenavi a:hover { color: #585857; } #wpps.red > header > nav { background: #e82837; } #wpps.red > header > nav > ul > li > a:hover { background: #e82837; } #wpps.red > header > .text { background: #e82837; } #wpps.red .gen > header h1 { color: #e82837; } #wpps.red .gen > header h1:before { background-color: #e82837; } #wpps.red .gen > .block a { color: #e82837; } #wpps.red .gen > .block a:after { background: #e82837; } #wpps.red .gen > .block ul li:before { background: #e82837; } #wpps.red .gen > .block table thead th, #wpps.red .gen > .block table thead td { background: #e82837; } #wpps.red .gen > .listing article a h2 { color: #e82837; } #wpps.red .gen > .listing nav ul li a:hover { color: #e82837; } #wpps.red .gen > .listing nav ul li span { color: #e82837; } #wpps.red .gen > .listing article a p + p { color: #e82837; } #wpps.red .gen > .listing .wp-pagenavi a { color: #e82837; } #wpps.red .gen > .listing .wp-pagenavi a:hover { color: #585857; } #wpps.pink > header > nav { background: #e82884; } #wpps.pink > header > nav > ul > li > a:hover { background: #e82884; } #wpps.pink > header > .text { background: #e82884; } #wpps.pink .gen > header h1 { color: #e82884; } #wpps.pink .gen > header h1:before { background-color: #e82884; } #wpps.pink .gen > .block a { color: #e82884; } #wpps.pink .gen > .block a:after { background: #e82884; } #wpps.pink .gen > .block ul li:before { background: #e82884; } #wpps.pink .gen > .block table thead th, #wpps.pink .gen > .block table thead td { background: #e82884; } #wpps.pink .gen > .listing article a h2 { color: #e82884; } #wpps.pink .gen > .listing nav ul li a:hover { color: #e82884; } #wpps.pink .gen > .listing nav ul li span { color: #e82884; } #wpps.pink .gen > .listing article a p + p { color: #e82884; } #wpps.pink .gen > .listing .wp-pagenavi a { color: #e82884; } #wpps.pink .gen > .listing .wp-pagenavi a:hover { color: #585857; } #game-lightbox { width: 100%; height: 100%; background: rgba(255,255,255,.95); position: fixed; top: 0; left: 0; display: none; z-index: 99999; } #game-lightbox iframe { width: 680px; height: 600px; position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -340px; border: 3px solid #e82884; background: #fff; } #game-lightbox .close { background: url(images/swipebox/icons.svg) no-repeat 15px 12px; background-size: 120px 24px; width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; margin: -338px 0 0 308px; } /* the events calendar */ #wpps .tribe-bar-disabled { display: none; } #wpps #tribe-events-content table.tribe-events-calendar { border-color: #eee; } #wpps #tribe-events-content table.tribe-events-calendar { font-size: 14px; } #wpps .tribe-events-calendar div[id*=tribe-events-daynum-], #wpps .tribe-events-calendar div[id*=tribe-events-daynum-] a { font-weight: 600; } #wpps #tribe-events-content .tribe-events-calendar th { border-color: #eee; } #wpps #tribe-events-content .tribe-events-calendar td { border-color: #eee; font-size: 14px; } #wpps #tribe-events-content .tribe-events-calendar td div[id*=tribe-events-daynum-] { font-size: 16px; color: #ff6e00; } #wpps #tribe-events-content .tribe-events-ical { font-size: 1.3em; line-height: 120%; font-weight: 300; color: #fff; padding: 14px 16px 12px; background: #ff6e00; display: inline-block; } #wpps #tribe-events-content .tribe-events-ical:hover { text-decoration: underline; } #wpps .tribe-events-month { margin-top: 2em; } #wpps .tribe-events-month h2.tribe-events-page-title { font-size: 2.6em; line-height: 120%; font-weight: 300; color: #ff6e00; } #wpps .tribe-events-month .tribe-events-sub-nav { font-size: 1.6em; line-height: 1.375em; font-weight: 300; } #wpps .tribe-events-month .tribe-events-sub-nav a { color: #ff6e00; position: relative; display: inline-block; overflow: hidden; vertical-align: text-bottom; } #wpps .tribe-events-month .tribe-events-sub-nav a:after { background: #ff6e00; display: block; width: 100%; height: 1px; position: absolute; bottom: 0; left: -100%; -webkit-transition: left .2s ease-in-out; transition: left .2s ease-in-out; content: ''; } #wpps .tribe-events-month .tribe-events-sub-nav a:hover:after { left: 0; } #wpps .gen > .block h2 { margin-top: .667em; font-size: 2.4em; line-height: 1.25em; font-weight: 300; letter-spacing: .03em; } #wpps .gen > .block p { margin-top: 1.25em; font-size: 1.6em; line-height: 1.375em; font-weight: 300; } #wpps .gen .tribe-events-schedule { margin-top: 1.25em; font-size: 1.6em; line-height: 1.375em; font-weight: 300; } #wpps .gen .tribe-events-schedule h2 { font-size: inherit; line-height: inherit; margin: 0; font-weight: 500; vertical-align: middle; } #wpps .gen .tribe-events-schedule span { vertical-align: middle; } #wpps .gen .tribe-events-cal-links { display: none; } #wpps .gen .tribe-events-event-meta .tribe-events-meta-group { width: 50%; margin-top: 2em; float: left; } #wpps .gen .tribe-events-event-meta .tribe-events-meta-group h3 { font-size: 1.6em; line-height: 1.375em; font-weight: 500; } #wpps .gen .tribe-events-event-meta .tribe-events-meta-group dl { font-size: 1.6em; line-height: 1.375em; font-weight: 300; } #wpps .gen .tribe-events-event-meta .tribe-events-meta-group dl dt { padding-right: 6px; font-weight: 300; float: left; clear: left; } #wpps .gen .tribe-events-event-meta .tribe-events-meta-group dl dd { float: left; } #wpps .gen .tribe-events-event-meta .tribe-events-meta-group dl dd.tribe-venue, #wpps .gen .tribe-events-event-meta .tribe-events-meta-group dl dd.tribe-venue-location { float: none; } /* overrides */ .single-tribe_events #wpps .gen .tribe-events-single-event-description { margin-bottom: 0; } .single-tribe_events #wpps .gen .tribe-events-event-meta { margin: 0; } #wpps .tribe-events-notices { border: 0; background: #ff6e00; color: #fff; text-shadow: none; font-size: 14px; } /* footer */ body > footer { max-width: 1040px; margin: 6.5em auto 0; padding: 8.4em 0 4em; background: url(images/ftr.svg) no-repeat center top; background-size: 1008px auto; } body > footer > h2 { padding: 0 24px; font-size: 2em; font-weight: 300; color: #6f6f6e; text-align: left; } body > footer > ul { margin: 6px 0 0; font-size: 0; } body > footer > ul > li { width: 112px; height: 112px; margin: 1.6em 8px 0; line-height: 112px; background: #fcfcfc; font-size: 10px; display: inline-block; vertical-align: top; text-align: center; } body > footer > p { margin: 1em 0 0; font-size: 1.3em; font-weight: 300; color: #0080c0; text-align: left; } /*! Swipebox v1.3.0 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */ html.swipebox-html.swipebox-touch{overflow:hidden!important}#swipebox-overlay img{border:none!important}#swipebox-overlay{width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999!important;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#swipebox-container{position:relative;width:100%;height:100%}#swipebox-slider{-webkit-transition:-webkit-transform .4s ease;transition:transform .4s ease;height:100%;left:0;top:0;width:100%;white-space:nowrap;position:absolute;display:none;cursor:pointer}#swipebox-slider .slide{height:100%;width:100%;padding:4%;line-height:1px;text-align:center;display:inline-block}#swipebox-slider .slide:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}#swipebox-slider .slide .swipebox-inline-container,#swipebox-slider .slide .swipebox-video-container,#swipebox-slider .slide img{display:inline-block;max-height:100%;max-width:100%;margin:0;padding:0;width:auto;height:auto;vertical-align:middle}#swipebox-slider .slide .swipebox-video-container{background:0 0;max-width:1140px;max-height:100%;width:100%;padding:5%;-webkit-box-sizing:border-box;box-sizing:border-box}#swipebox-slider .slide .swipebox-video-container .swipebox-video{width:100%;height:0;padding-bottom:56.25%;overflow:hidden;position:relative}#swipebox-slider .slide .swipebox-video-container .swipebox-video iframe{width:100%!important;height:100%!important;position:absolute;top:0;left:0}#swipebox-slider .slide-loading{background:url(images/swipebox/loader.gif) center center no-repeat}#swipebox-bottom-bar,#swipebox-top-bar{-webkit-transition:.5s;transition:.5s;position:absolute;left:0;z-index:999;height:50px;width:100%}#swipebox-bottom-bar{bottom:-50px}#swipebox-bottom-bar.visible-bars{-webkit-transform:translate3d(0,-50px,0);transform:translate3d(0,-50px,0)}#swipebox-top-bar{top:-50px}#swipebox-top-bar.visible-bars{-webkit-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0)}#swipebox-title{display:block;width:100%;text-align:center}#swipebox-close,#swipebox-next,#swipebox-prev{background-image:url(images/swipebox/icons.png);background-repeat:no-repeat;background-size:120px 24px;border:none!important;text-decoration:none!important;cursor:pointer;width:50px;height:50px;top:0}#swipebox-arrows{display:block;margin:0 auto;width:100%;height:50px}#swipebox-prev{background-position:-32px 13px;float:left}#swipebox-next{background-position:-78px 13px;float:right}#swipebox-close{top:0;right:0;position:absolute;z-index:9999;background-position:15px 12px}.swipebox-no-close-button #swipebox-close{display:none}#swipebox-next.disabled,#swipebox-prev.disabled{opacity:.3}.swipebox-no-touch #swipebox-overlay.rightSpring #swipebox-slider{-webkit-animation:rightSpring .3s;animation:rightSpring .3s}.swipebox-no-touch #swipebox-overlay.leftSpring #swipebox-slider{-webkit-animation:leftSpring .3s;animation:leftSpring .3s}.swipebox-touch #swipebox-container:after,.swipebox-touch #swipebox-container:before{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .3s ease;transition:all .3s ease;content:' ';position:absolute;z-index:999;top:0;height:100%;width:20px;opacity:0}.swipebox-touch #swipebox-container:before{left:0;-webkit-box-shadow:inset 10px 0 10px -8px #656565;box-shadow:inset 10px 0 10px -8px #656565}.swipebox-touch #swipebox-container:after{right:0;-webkit-box-shadow:inset -10px 0 10px -8px #656565;box-shadow:inset -10px 0 10px -8px #656565}.swipebox-touch #swipebox-overlay.leftSpringTouch #swipebox-container:before,.swipebox-touch #swipebox-overlay.rightSpringTouch #swipebox-container:after{opacity:1}@-webkit-keyframes rightSpring{0%{left:0}50%{left:-30px}100%{left:0}}@keyframes rightSpring{0%{left:0}50%{left:-30px}100%{left:0}}@-webkit-keyframes leftSpring{0%{left:0}50%{left:30px}100%{left:0}}@keyframes leftSpring{0%{left:0}50%{left:30px}100%{left:0}}@media screen and (min-width:800px){#swipebox-close{right:10px}#swipebox-arrows{width:92%;max-width:800px}}#swipebox-overlay{background:rgba(255,255,255,.95)}#swipebox-bottom-bar,#swipebox-top-bar{text-shadow:1px 1px 1px #fff;background:#fff;opacity:.95}#swipebox-top-bar{color:#585857!important;font-size:15px;line-height:43px;} /* slick */ .slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-slider{-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none} /* ticker */ .scroll-wrapper{overflow:hidden!important;padding:0!important;position:relative}.scroll-wrapper>.scroll-content{border:none!important;box-sizing:content-box!important;height:auto;left:0;margin:0;max-height:none;max-width:none!important;overflow:scroll!important;padding:0;position:relative!important;top:0;width:auto!important}.scroll-wrapper>.scroll-content::-webkit-scrollbar{height:0;width:0}.scroll-element{display:none}.scroll-element,.scroll-element div{box-sizing:content-box}.scroll-element.scroll-x.scroll-scrollx_visible,.scroll-element.scroll-y.scroll-scrolly_visible{display:block}.scroll-element .scroll-arrow,.scroll-element .scroll-bar{cursor:default}.scroll-textarea{border:1px solid #ccc;border-top-color:#999}.scroll-textarea>.scroll-content{overflow:hidden!important}.scroll-textarea>.scroll-content>textarea{border:none!important;box-sizing:border-box;height:100%!important;margin:0;max-height:none!important;max-width:none!important;overflow:scroll!important;outline:0;padding:2px;position:relative!important;top:0;width:100%!important}.scroll-textarea>.scroll-content>textarea::-webkit-scrollbar{height:0;width:0} /* responsive -------------------------------------------------------------------------- */ @media only screen and (max-width: 1008px) { body > header > div > ul { left: 20px; } body > header > div > ul + ul { right: 20px; } body > header > div > nav.menu { left: 0; margin-left: 0; } body > header > section.contact { width: 100%; } body > header > section.contact > div { width: 50%; } body > header > section.contact > div + div { width: 25%; } body > header > section.contact > div + div + div { width: 25%; } body > header > div > a.contact-close { right: 0; } body > header > div > section.search { width: 100%; left: 0; margin-left: 0; } body > header > div > section.search form { margin: 0 20px; } body > header > div > section.search .close { width: 25px; height: 25px; top: 20px; right: 20px; } body.show-contact #wpps { margin-top: 410px; } #wpps > .slideshow > div img { width: 100%; height: auto; } #wpps > .slideshow > div span { padding: 20px 46px; font-size: 1.6em; line-height: 120%; } #wpps > .slideshow .slick-prev { left: 6px; -webkit-transform: scale(.5,.5); -ms-transform: scale(.5,.5); transform: scale(.5,.5); } #wpps > .slideshow .slick-next { right: 6px; -webkit-transform: scale(.5,.5); -ms-transform: scale(.5,.5); transform: scale(.5,.5); } #wpps > .slideshow .slick-dots li { width: 60px; padding: 8px 0 8px; font-size: 1.2em; } #wpps > .slideshows { display: block; } #wpps > .slideshows .slideshow { width: 100%; } #wpps > .slideshows .slideshow + .slideshow { margin-top: 3em; } #wpps > .slideshows .slideshow > div img { width: 100%; height: auto; } #wpps > .pods > section { width: calc(50% - 10px); } #wpps > .pods > section > .bar ul li { float: none; } #wpps > .pods > section > .bar ul li + li { margin-left: 0; margin-top: 8px; } #wpps > .pods > section.calendar .scroll > article a h4 { display: inline; } #wpps > .pods > section.calendar .scroll > article a h4:after { display: none; } #wpps > .pods > section.news > .scroll article a h2 span { display: inline; } #wpps > .pods > section.news > .scroll article a h2 span:after { display: none; } #wpps > .pods.custom { display: block; } #wpps > header > nav > ol li { display: none; } #wpps > header > nav > ol li.current { display: inline-block; } #wpps > header > nav > ol li.current span { display: none; } #wpps > header > .images img { width: 100%; height: auto; } #wpps > header > .text { display: none; } #wpps .gen { padding: 0 20px; } #wpps .gen > header h1 { padding-left: 0; } #wpps .gen > header h1:before { display: none; } #wpps .gen > .block { margin-left: auto; margin-right: auto; } #wpps .gen > .block > * {max-width: 100%; } #wpps .gen > .block img.inline-image { margin-right: 0; margin-left: 20px; } #wpps .gen > .block ul li { padding-left: 18px; } #wpps .gen > .block ul li:before { left: 0; } #wpps .gen > .listing { margin-left: auto; margin-right: auto; max-width: 100%; } #wpps .gen > .blog article { width: calc(50% - 10px); margin: 2.8em 0 0 20px; } #wpps .gen > .blog article:nth-of-type(2n-1) { margin-left: 0; } #wpps .gen > .blog article a span img { width: 100%; height: auto; float: none; } #wpps .gen .tribe-events-event-meta .tribe-events-meta-group { width: auto; float: none; } body > footer { background-image: url(images/ftr-mobile.svg); background-size: 294px auto;} body > footer > ul > li { width: 60px; height: 60px; line-height: 60px; } body > footer > ul > li.blank { display: none; } body > footer > ul > li img { width: 50px; height: auto; } body > footer > p { padding: 0 20px; } } @media only screen and (max-width: 700px) { body { padding-top: 76px; } body > header { background: #f1f1f3; } body > header > div > h1, body.scrolling > header > div > h1 { padding: 8px 0 8px 60px; text-align: left; } body > header > div > h1 a { width: 124px; height: 60px; } body > header > div > h1 a img { width: 124px; height: 60px; } body > header > div > h1 img + img { width: 32px; height: 27px; left: 25px; } body > header > div > ul { left: 0; } body > header > div > ul + ul { right: 0; } body > header > div > ul > li { padding: 0; } body > header > div > ul > li > a { font-size: 1.6em; } body > header > div > ul > li.menu { width: 28px; margin-top: 16px; margin-left: 16px; } body > header > div > ul > li.menu > a { width: 28px; padding: 0; text-indent: -99999px; } body > header > div > ul + ul > li { margin-right: 15px; margin-left: 0; margin-top: 1.4em; text-align: right; } body > header > div > ul + ul > li + li { margin-top: 1em; } body.scrolling > header > div > ul + ul > li { margin-top: 1.4em; margin-left: 0; } body > header > div > nav.menu { width: 100%; top: 76px; } body.scrolling > header > div > nav.menu { top: 46px; } body > header > div > nav.menu h2 { width: 100%; padding: 14px 0 12px; background: #cecece; text-align: center; } body > header > div > nav.menu ul { width: 100%; height: 100%; background: #cecece; } body > header > div > nav.menu ul > li > div { width: 100%; height: 100%; background: #cecece; left: 0; top: 0; } body > header > div > nav.menu ul > li > div .back { width: 100%; padding: 14px 0 12px; text-align: center; font-size: 1.6em; text-transform: uppercase; letter-spacing: .03em; display: block; color: #fff; background: #0880be; } body > header > div > nav.menu ul > li > div .back:hover { color: #585857; background: #cecece; } body.show-contact > header > section.contact { height: 410px; max-height: 410px; } body > header > section.contact > div { width: auto; padding: 0 8px 20px; float: none; } body > header > section.contact > div + div { width: auto; padding: 0 8px 20px; } body > header > section.contact > div + div + div { width: auto; padding: 0 8px 20px; } body > header > section.contact > div > h2 { padding: 14px 10px 0; } body > header > section.contact > div + div > h2 { border-top: 1px solid rgba(255,255,255,.25); } body > header > section.contact > div > p { margin-top: 20px; padding: 0 10px; } body > header > section.contact > div > p.button { margin-top: 4px; } body > header > section.contact > div > ul { margin-top: 14px; padding: 0 10px; } body > header > div > a.contact-close, body.scrolling > header > div > a.contact-close { height: 46px; line-height: 46px; padding: 0 15px; } body > header > div > section.search { padding: 3em 0; } body > header > div > section.search form label { font-size: 1.6em; } body > header > div > section.search form input { font-size: 4em; } #wpps { padding: 0; } #wpps > header > nav { width: 100%; position: relative; top: auto; left: auto; } #wpps > header > nav > ol li.current { font-size: 2em; } #wpps > header > nav > .toggle { top: 16px; } #wpps .gen > .block img { max-width: 100%; height: auto; margin-left: auto; margin-right: auto; display: block; } #wpps .gen > .block img.inline-image { margin-left: auto; margin-right: auto; margin-bottom: 10px; float: none; display: block; } #wpps > .pods > section { width: 100%; float: none; margin-left: auto; margin-right: auto; } #wpps > .pods > section.news { float: none; } #wpps .gen > .listing article a { text-align: center; } #wpps .gen > .listing article a span { margin-top: 20px; margin-left: auto; margin-right: auto; display: inline-block; float: none; } #wpps .gen > .listing article a time, #wpps .gen > .listing article a h2, #wpps .gen > .listing article a p { text-align: left; } #wpps .gen > .listing article a span ~ time, #wpps .gen > .listing article a span ~ h2, #wpps .gen > .listing article a span ~ p { margin-left: 0; } #wpps .gen > .blog article { width: 100%; margin: 2.8em 0 0; float: none; } #wpps .gen > .blog article a span { text-align: center; } #wpps .gen > .blog article a span time { max-width: 100%; float: none; display: block; text-align: left; } #wpps .gen > .blog article a span:after { display: none; } } /* clearfix -------------------------------------------------------------------------- */ .clearfix:before, .clearfix:after, div:before, div:after, header:before, header:after, main:before, main:after, section:before, section:after, article:before, article:after, nav:before, nav:after, ul:before, ul:after, ol:before, ol:after, footer:before, footer:after { content: " "; display: table; } .clearfix:after, div:after, header:after, main:after, section:after, article:after, nav:after, ul:after, ol:after, footer:after { clear: both; }