/* Theme Name: EDify Urban Affairs Description: EDify Urban Affairs site Author: Odvod Media Version: 1 */ /* default -------------------------------------------------------------------------------*/ html, body, 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, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; } article, aside, figure, footer, header, hgroup, nav, section {display: block;} /* Responsive images and other embedded objects Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers. There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue. */ img, object, embed {width: 100%; height:auto} /* force a vertical scrollbar to prevent a jumpy page */ html {overflow-y: scroll;} /* we use a lot of ULs that aren't bulleted. don't forget to restore the bullets within content. */ ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; color:#666; text-decoration:none; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; } a > span { transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; } a:hover{ text-decoration:underline} del {text-decoration: line-through;} abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;} /* tables still need cellspacing="0" in the markup */ table {border-collapse: collapse; border-spacing: 0;} th {font-weight: bold; vertical-align: bottom;} td {font-weight: normal; vertical-align: top;} h1,h2,h3,h4,h5,h6{ font-weight:400} hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;} input, select {vertical-align: middle;} pre { white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } input[type="radio"] {vertical-align: text-bottom;} input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;} .ie6 input {vertical-align: text-bottom;} select, input, textarea {font: 99% sans-serif;} table {font-size: inherit; font: 100%;} /* Accessible focus treatment people.opera.com/patrickl/experiments/keyboard/test */ a:hover, a:active {outline: none;} small {font-size: 85%;} strong, b, th {font-weight: 400; } em, i { } td, td img {vertical-align: top;} /* Make sure sup and sub don't screw with your line-heights gist.github.com/413930 */ sub, sup {font-size: 75%; line-height: 0; position: relative;} sup {top: -0.5em;} sub {bottom: -0.25em;} /* standardize any monospaced elements */ pre, code, kbd, samp {font-family: monospace, sans-serif;} /* hand cursor on clickable elements */ .clickable, label, input[type=button], input[type=submit], button {cursor: pointer;} /* Webkit browsers add a 2px margin outside the chrome of form elements */ button, input, select, textarea {margin: 0;} /* make buttons play nice in IE */ button {width: auto; overflow: visible;} /* scale images in IE7 more attractively */ .ie7 img {-ms-interpolation-mode: bicubic;} /* prevent BG image flicker upon hover */ .ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} /* let's clear some floats */ .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } /*.clearfix { zoom: 1; } */ .clear { clear: both; } .hide { display: none !important; } img { display: block; /*transition: all .6s; -moz-transition: all .6s; -webkit-transition: all .6s; -o-transition: all .6s;*/ } .show-right:before { position: relative; left: 100%; display: block; width: 100%; float: left; margin: 0 0 0 -100%; } .left { float: left !important; } .middle { float: none !important; } .right { float: right !important; } .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .ab-right { position: absolute !important; right: 0; } .ab-bottom { position: absolute !important; bottom: 0; } .vert-middle { display: grid !important; align-content: center; justify-self: start; } .vert-middle-alt { display: grid !important; align-content: center; } .vert-bottom { display: grid !important; align-content: end; justify-self: start; } .background { background-position: center center; background-repeat: no-repeat; background-size: cover; } .background.overlay::after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; content: ''; background: rgba(0, 0, 0, .4); z-index: 10; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .transition { text-decoration:none; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; } .no-padding-bottom { padding-bottom: 0 !important; } /*** site variables ***/ :root { --colour1: #000000; /* black */ --colour2: #ffffff; /* white */ --colour3: #2c333a; /* charcoal */ --colour4: #dee3ed; /* light grey */ --colour5: #00a693; /* green */ --colour6: #006c6e; /* dark green */ --colour7: #314f92; /* indigo */ --colour9: #29386a; /* hover indigo */ --colour10: #f6f7fb; /* hover button */ --colour4: #afafc2; /* light purple */ --colour5: #495069; /* navy */ --colour7: #5364a7; /* dark indigo */ --colour8: #c4c4d5; /* light indigo */ --colour9: #7483b9; /* gray purple */ --colour10: #7b9ad7; /* hover indigo */ --colour11: #dee2fd; /* highlight */ --colour12: #cecbee; /* background image */ --colour13: #4a5169; /* footer */ --colour14: #ededf7; /* load more */ --font-size-87: 87px; --font-size-52: 52px; --font-size-38: 38px; --font-size-36: 36px; --font-size-26: 26px; --font-size-24: 24px; --font-size-22: 22px; --font-size-20: 20px; --font-size-18: 18px; --font-size-15: 16px; --font-size-15: 15px; --font-size-14: 14px; --font-size-10: 10px; --background: #ffffff; --background2: #f6f5f8; --padding-width: 20px; --padding-height: 50px; --padding-height-x2: 100px; --padding-height-2: 30px; --gap-width: 160px; --gap-width-2: 130px; --gap-width-3: 100px; --gap-width-medium: 50px; --gap-width-small: 40px; --section-width: 2560px; --post-width: 750px; --post-width-wide: 855px; --popup-width: 1060px; --font-header: rigid-square, sans-serif; --font-content: fieldwork, sans-serif; } /*** site defaults ***/ html, BODY { height: 100%; } BODY { background: #fff; font-family: var(--font-content); font-weight: 200; font-size: var(--font-size-18); color: var(--colour1); text-align: center; overflow-wrap: break-word; } h1, h2, h3, h4, h5 { position: relative; margin: 0 0 25px; padding: 0; line-height: 1.1; font-family: var(--font-content); color: var(--colour1); font-weight: 400; font-style: normal; z-index: 10; letter-spacing: .5px; } h1 { font-size: var(--font-size-52); font-weight: 600; } h1.page-title { font-size: var(--font-size-52); padding-top: 5px; font-weight: 600; margin-bottom: 15px; line-height: 1; } h1.category-title { margin: 0; padding: var(--padding-height-x2) 0 var(--padding-height); font-size: var(--font-size-87); font-family: var(--font-header); font-weight: 700; color: var(--colour8); text-transform: lowercase; letter-spacing: 0; } h2 { font-size: var(--font-size-26); font-weight: 400; } h3 { font-family: var(--font-header); font-weight: 300; font-size: var(--font-size-18); color: var(--colour1); text-transform: uppercase; margin-bottom: 5px; } h3.popup { font-family: var(--font-header); font-weight: 300; font-size: var(--font-size-36); color: var(--colour1); text-transform: uppercase; margin-bottom: 5px; } h3.error { margin-bottom: 30px; color: #cc0000; } h3.success { margin-bottom: 30px; } .background { background: var(--background); } .background-alt { background: var(--background2); } .content-width { width: 100%; max-width: var(--section-width); margin-left: auto; margin-right: auto; } .post-width { width: 100%; max-width: var(--post-width); margin-left: auto; margin-right: auto; } .post-width-wide { width: 100%; max-width: var(--post-width-wide); margin-left: auto; margin-right: auto; } .popup-width { width: 100%; max-width: var(--popup-width); margin-left: auto; margin-right: auto; } .extrabold { font-family: var(--font-header); font-weight: 800; } .bold { font-family: var(--font-header); font-weight: 700; } .semibold { font-family: var(--font-header); font-weight: 600; } .regular { font-family: var(--font-header); font-weight: 400; } .light { font-family: var(--font-header); font-weight: 300; } .contentbold { font-family: var(--font-content); font-weight: 700; } .contentdemi { font-family: var(--font-content); font-weight: 600; } .contentregular { font-family: var(--font-content); font-weight: 400; } .contentlight { font-family: var(--font-content); font-weight: 300; } .contentthin { font-family: var(--font-content); font-weight: 200; } .size10 { font-size: 10px; } .size12 { font-size: 12px; } .size13 { font-size: 13px; } .size14 { font-size: 14px; } .size15 { font-size: 15px; } .size16 { font-size: 16px; } .size18 { font-size: 18px; } .size20 { font-size: 20px; } .size22 { font-size: 22px; } .size24 { font-size: 24px; } .size26 { font-size: 26px; } .size28 { font-size: 28px; } .size32 { font-size: 32px; } .size34 { font-size: 34px; } .size36 { font-size: 36px; } .size40 { font-size: 40px; } .size44 { font-size: 44px; } .size48 { font-size: 48px; } .size87 { font-size: 87px; } .colour4 { color: var(--colour4); } .colour5 { color: var(--colour5); } .colour8 { color: var(--colour8); } .col-spacing { padding: var(--padding-height) 50px; } .col-spacing-top { padding: var(--padding-height) 50px 0; } .padding-top { padding-top: 25px; } .padding-top-x2 { padding-top: var(--padding-height); } .padding-bottom { padding-bottom: 25px; } .padding-bottom-x2 { padding-bottom: var(--padding-height); } .padding-bottom-2 { padding-bottom: var(--padding-height-2); } .padding-top-none { padding-top: 0; } .padding-bottom-none { padding-bottom: 0; } a { color: var(--colour7); text-decoration: none; } a:hover { color: var(--colour10); text-decoration: none; } p { padding: 0 0 35px; margin: 0; line-height: 1.5; } p:last-child, p:last-of-type { padding-bottom: 0; } ul, ol { margin: 0 0 30px 15px; padding: 0; list-style-type: disc; } ol { list-style-type: decimal; } li { margin: 0 0 10px 15px; padding: 0 0 0 2px; } ul:last-child, ul:last-of-type, ol:last-child, ol:last-of-type { margin-bottom: 0; } li:last-child, li:last-of-type { margin-bottom: 0; } li > ul, li > ol { margin-top: 0; margin-left: 0; padding-top: 10px; } ul:last-child + p, ol:last-child + p, .image-wrapper + ul, .image-wrapper + ol { padding-top: 30px; } p:last-child + ul, p:last-of-type + ul, p:last-child + ol, p:last-of-type + ol { margin-top: 0; padding: 20px 0 0; } p:last-of-type + h2, p:last-of-type + h3 { padding-top: var(--padding-height); } ul + h3, h3 + h3 { padding-top: 30px; } ul + p { padding-top: 10px; } p + ul, p + ol { margin-top: -15px; } p + form { padding-top: 20px; } .border-top { border-top: 1px solid var(--colour1); } .border-line { border-bottom: 5px solid var(--colour1); padding-top: var(--padding-height); } .wrap, .inner, .row, .col { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; } .grid { display: grid; grid-template-columns: auto; grid-template-rows: auto; grid-auto-rows: minmax(min-content, max-content); } .grid.split-column { grid-template-columns: 1fr 1fr; gap: 0 var(--gap-width); } .grid.split-column.column-side-border > .col::after { position: absolute; top: 0; left: calc((var(--gap-width) / 2)*-1); display: block; content: ''; width: 0; height: 100%; border-left: 1px solid var(--colour4); } .grid.split-column.column-side-border.column-side-border-dark > .col::after { border-left-color: var(--colour1); } .grid.split-column.column-side-border.border-double .col::after { width: 5px; border-right: 1px solid var(--colour4); } .grid.split-column.column-side-border .col:first-of-type::after { display: none; } .grid.split-row.row-border > .col::after, .grid.split-row.row-border > .row::after { position: absolute; top: calc((var(--padding-height-x2) / 2)*-1);; left: 0 !important; display: block; content: ''; width: 100%; height: 0; border-top: 1px solid var(--colour4); } .grid.split-row.row-border.row-border-dark > .col::after, .grid.split-row.row-border.row-border-dark > .row::after { border-top-color: var(--colour1); } .grid.split-row.row-border .col:first-of-type::after, .grid.split-row.row-border > .row:first-of-type::after { display: none; } .image-wrapper { position: relative; display: block; } .image-wrapper .image { position: relative; display: block; } .image-wrapper .image .image-wrap { position: relative; display: block; background: var(--colour2); /*border: 1px solid var(--colour4);*/ max-height: 560px; overflow: hidden; } .image-wrapper .image .image-description, .image-wrapper .image .image-caption, .gallery-caption .image-description, .gallery-caption .image-caption { padding-top: 10px; width: var(--post-width); margin: 0 auto; color: var(--colour4); } .image-wrapper:last-child { margin-bottom: 0 !important; } img.vertical { width: auto; height: 560px; margin-left: auto; margin-right: auto; } img.horizontal { width: auto; max-width: 100%; min-width: 100%; height: auto; margin-left: auto; margin-right: auto; } img.square { width: 100%; height: auto; max-height: 560px; max-width: 560px; margin-left: auto; margin-right: auto; } .content + .buttons { padding-top: 20px; } .buttons + .content { padding-top: 20px; } .buttons { position: relative; display: block; } .button { display: inline-block; margin-right: 25px; padding-top: 15px; } .button:last-of-type { margin-right: 0; } .button a { display: block; padding: 15px 30px 13px; min-width: 250px; text-align: center; text-decoration: none; background: var(--colour2); color: var(--colour7) !important; border: 1px solid var(--colour4); letter-spacing: 1.1px; font-size: var(--font-size-16); font-family: var(--font-header); font-weight: 800; box-sizing: border-box; -moz-box-sizing: border-box; text-transform: uppercase; } .button.alt a { background: var(--colour5); color: var(--colour2) !important; border-color: var(--colour5); } .button a:hover, .button.active a { background: var(--colour10); color: var(--colour7) !important; border-color: var(--colour4); text-decoration: none !important; } .button.alt a:hover, .button.active.alt a { background: var(--colour6); color: var(--colour2) !important; border-color: var(--colour6); } .button.alt2 a { background: var(--colour7); color: var(--colour2) !important; border: none; font-weight: 600; min-width: 230px !important; } .button.alt2 a:hover { background: var(--colour10); color: var(--colour2) !important; border: none; } .button.alt2 a span { position: relative; top: -3px; } span.break { display: block !important; margin: 0 !important; padding: 0 !important; } /*** site styles ***/ .flyout-wrapper { position: fixed; left: 0; top: 0; display: none; width: 100%; height: 100vh; padding: 40px 50px; background: var(--colour14); z-index: 99999; } .flyout-wrapper .flyout-menu { grid-template-rows: auto 1fr; gap: 30px 0; height: 100%; } .flyout-wrapper .flyout-close { text-align: right; } .flyout-wrapper .flyout-close a { font-family: var(--font-header); color: var(--colour1); text-transform: uppercase; font-size: 15px; } .flyout-wrapper .flyout-close a:hover { color: var(--colour10); } .flyout-wrapper .flyout-content-wrap { justify-self: initial !important; overflow: auto; } .flyout-wrapper .flyout-content { width: 100%; max-width: 1200px; grid-template-columns: 1fr 1fr 1fr; gap 0 50px; margin: 0 auto; } .flyout-wrapper .flyout-section { text-align: left; } .flyout-wrapper .flyout-content h4 { font-family: var(--font-header); font-weight: 600; font-size: 12px; text-transform: uppercase; color: var(--colour4); margin-bottom: 5px; } .flyout-wrapper .flyout-content ul { margin: 0; padding: 0; list-style-type: none; } .flyout-wrapper .flyout-content ul li { margin: 5px 0; padding: 0; list-style-type: none; } .flyout-wrapper .flyout-content ul li a { font-family: var(--font-header); font-weight: 300; font-size: 22px; text-transform: uppercase; color: var(--colour1); } .flyout-wrapper .flyout-content ul li a:hover { color: var(--colour7); } header { background: var(--colour2); } header.col-spacing { padding-top: 10px; padding-bottom: 10px; } header .wrap-1 { position: fixed !important; top: 0; left: 0; width: 100%; background: var(--colour2); padding: 0; z-index: 99; } .home header .wrap-1 { background: var(--background2); } .home header .wrap-1.scroll { background: var(--colour2); } header .row-1.grid { grid-template-columns: 1fr 230px 1fr; gap: 0 20px; padding: 10px 0; } header .wrap-2 { display: none; border-bottom: 1px solid var(--colour4); padding: 0 20px; } header .row-2 { padding: 100px 0 10px; } header .row-2 .logo { max-width: 480px; } header .col-2 .wrap.grid { float: right; grid-template-columns: repeat(1, auto); gap: 0 10px; } header .row-1 .menu a { color: var(--colour1); margin-left: 20px; font-size: 15px; } header .row-1 .menu a:first-child { margin-left: 0; } header .row-1 .menu a:hover { color: var(--colour7); } header a.search-icon span { position: relative; display: inline-block; top: -2px; } .search-wrapper { position: fixed; top: 49px; left: 0; display: none; width: 100%; padding: 10px 40px; background: var(--colour7); color: var(--colour2); z-index: 98; } .firefox .search-wrapper { top: 42px; } .search-wrapper.show { display: block; } .search-wrapper .section-wrapper form.grid { display: grid; grid-template-columns: 1fr auto; gap: 0 20px; background: var(--colour7); } .search-wrapper .section-wrapper form.grid .field input[type="text"] { padding: 5px 15px; } .search-wrapper .section-wrapper form.grid .field input[type="submit"] { color: var(--colour2); padding-left: 20px; padding-right: 20px; } .search-wrapper .section-wrapper form.grid .field input[type="submit"]:hover { color: var(--colour1); } .search-wrapper .section-wrapper form.grid .message { padding: 10px 0 0; } .search-wrapper .section-wrapper form.grid .message.error { color: #fff; } .search-wrapper .section-wrapper .search-cancel { position: absolute; top: 0; right: 20px; display: block; height: 100%; } .search-wrapper .section-wrapper .search-cancel a { position: relative; display: block; background: var(--colour7); color: var(--colour2); border-radius: 15px; overflow: hidden; } .search-wrapper .section-wrapper .search-cancel a span { postion: relative; display: inline-block; width: 15px; line-height: 15px; } header .wrap-1 .member-bar { grid-template-columns: auto 1fr; gap: 0 20px; padding: 8px 50px; background: var(--colour7); } header .row-0 .menu { line-height: .5; } header .row-0 .menu a { color: var(--colour2); margin-left: 20px; font-size: 11px; display: inline-block; line-height: 1; } header .row-0 .menu a:first-child { margin-left: 0; } header .row-0 .menu a:hover { color: var(--colour1); } .member .search-wrapper { top: 79px; } .member.firefox .search-wrapper { top: 84px; } /*header .avatar { max-width: 28px; border-radius: 30px; overflow: hidden; display: none !important; } header .username { color: var(--colour1); display: none !important; } header .logout { display: none !important; } header .col.flyout-btn { display: none !important; } header .flyout-btn a { line-height: 1; font-size: 26px; } header .logout a, header .flyout-btn a, header .search a { color: var(--colour1); } header .logout a:hover, header .flyout-btn a:hover, header .search a:hover { color: var(--colour7); }*/ .home header .wrap-1 .logo a { display: none; } .home header .wrap-2 { display: none; } header .wrap-2.mobile-header { display: none; } body.single-post { padding-top: 42px; } .section-wrapper { background: var(--background2); } .section-wrapper ul + h1, .section-wrapper ol + h1, .section-wrapper ul + h2, .section-wrapper ol + h2, .section-wrapper ul + p, .section-wrapper ol + p { padding-top: 30px; } .section-wrapper li { padding-left: 5px; } .section-wrapper ul > li, .section-wrapper ol > li { margin-bottom: 20px; } .section-wrapper ul > li > ul li, .section-wrapper ol > li > ol li { margin-bottom: 8px; } .section-wrapper ul > li:last-of-type, .section-wrapper ol > li:last-of-type { margin-bottom: 0; } .section-wrapper ul > li > ul li:last-of-type, .section-wrapper ol > li > ol li:last-of-type { margin-bottom: 0; } .section-wrapper .image-wrapper { padding-top: 35px; } .section-wrapper .sep::before { position: relative; display: inline-block; content: '|'; margin: 0 5px; } .section-wrapper .nowrap { white-space: nowrap; } .section-wrapper .breadcrumbs a { color: var(--colour9); } .section-wrapper .breadcrumbs a:hover { color: var(--colour1); } .section-wrapper .social-sharing { position: relative; display: block; text-align: center; } .section-wrapper .social-sharing ul { display: inline-block; list-style: none; margin: 0 auto; padding: 0; } .section-wrapper .social-sharing li { float: left; list-style: none; margin: 0; padding: 0; } .section-wrapper .social-sharing li:last-of-type { border-right: none; } .section-wrapper .social-sharing li a { display: block; width: 56px; height: 56px; color: var(--colour4); line-height: 56px; text-align: center; } .section-wrapper .social-sharing li a:hover { color: var(--colour7); } .section-wrapper .article-header.col-spacing { padding-top: 100px; } .section-wrapper .article a.grid { grid-template-rows: auto auto 1fr auto; gap: 5px 0; } .section-wrapper .article a.grid .category { color: var(--colour9); letter-spacing: 1.2px; } .section-wrapper .article a.grid .title { color: var(--colour1); letter-spacing: .5px; line-height: 1.1; } .section-wrapper .article a.grid .description { color: var(--colour5); padding-top: 2px; padding-bottom: 10px; line-height: 1.3; } .section-wrapper .article a.grid .author { color: var(--colour4); letter-spacing: .6px; } .section-wrapper .article a.grid:hover .category { color: var(--colour9); } .section-wrapper .article a.grid:hover .title { color: var(--colour1); } .section-wrapper .article a.grid:hover .description { color: var(--colour5); } .section-wrapper .article a.grid:hover .author { color: var(--colour4); } .section-wrapper .article a.image { grid-area: image; } .section-wrapper .article a.content { grid-area: content; } .section-wrapper .article a.image .image-wrap { position: relative; display: block; background: var(--colour2); border: 1px solid var(--colour4); max-height: 390px; overflow: hidden; } .section-wrapper .article.article-image-featured a.image .image-wrap { border-bottom: none; border-left: none; } .section-wrapper blockquote { font-family: var(--font-header); font-weight: 700; font-size: var(--font-size-38); color: var(--colour8); line-height: 1.3; } .section-wrapper blockquote .author { font-size: var(--font-size-10); font-weight: 600; text-transform: uppercase; padding-top: 20px; } .section-wrapper .article-row + .article-row, .section-wrapper .layout-featured-wrapper + .article-row { padding-top: var(--padding-height); padding-bottom: var(--padding-height); border-top: 5px solid var(--colour1); } .section-wrapper .article-row.split-column + .article-row.layout-right, .section-wrapper .article-row.split-column + .article-row.layout-left { border-top-width: 1px; } .section-wrapper .article-row + .article-row:last-of-type { padding-bottom: var(--padding-height-x2); } .section-wrapper .article.grid.article-image.article-image-top { grid-template-areas: "image" "content"; gap: 20px 0; grid-template-rows: auto 1fr; } .section-wrapper .article.grid.article-image.article-image-left { grid-template-areas: "image content"; gap: 0 var(--gap-width-medium); } .section-wrapper .article.grid.article-image.article-image-right { grid-template-areas: "content image"; gap: 0 var(--gap-width-medium); } .section-wrapper .layout-split.split-column-3 { grid-template-columns: 1fr 1fr 1fr; gap: 0 var(--gap-width-3); } .section-wrapper .layout-split.split-column-4 { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0 var(--gap-width-3); } .section-wrapper .layout-featured .article { grid-template-columns: 1fr 1fr; grid-template-areas: "image content"; gap: 0 var(--gap-width-medium); } .section-wrapper .layout-left .article { grid-template-columns: 43.75% 1fr; grid-template-areas: "image content"; gap: 0 var(--gap-width-medium); } .section-wrapper .layout-right .article { grid-template-columns: 1fr 43.75%; grid-template-areas: "content image"; gap: 0 var(--gap-width-medium); } .section-wrapper .layout-featured .article a.grid.content, .section-wrapper .layout-left .article a.grid.content, .section-wrapper .layout-right .article a.grid.content, .section-wrapper.article.article-image-left a.grid.content, .section-wrapper .article.article-image-right a.grid.content { grid-template-rows: auto auto auto 1fr; } .section-wrapper .article a.grid.content.has-caption { grid-template-rows: auto auto auto auto 1fr; } .section-wrapper .layout-featured .article.article-image a.grid.content { grid-template-rows: auto auto auto 1fr; } /*.section-wrapper .layout-featured .article a.grid .author, .section-wrapper .layout-featured .article a.grid .caption { padding-bottom: 10px; }*/ .section-wrapper .layout-split.split-column-3.column-side-border .col::after, .section-wrapper .layout-split.split-column-4.column-side-border .col::after, .section-wrapper .layout-layout-2.grid.split-column.column-side-border .col::after { left: calc((var(--gap-width-3) / 2)*-1); } .section-wrapper .layout-layout-1.grid.split-column { gap: 0 var(--gap-width-3); } .section-wrapper .layout-layout-1.grid.split-column.column-side-border .col::after { left: calc((var(--gap-width-3) / 2)*-1); border-left-color: var(--colour1); } .section-wrapper .layout-layout-1 .grid.split-row.row-border { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; gap: var(--padding-height-x2) 0; } .section-wrapper .layout-layout-1.layout-1-swap .col-1-main { grid-area: col-1-main; } .section-wrapper .layout-layout-1.layout-1-swap .col-2-main { grid-area: col-2-main; } .section-wrapper .layout-layout-1.layout-1-swap { grid-template-areas: "col-2-main col-1-main"; } .section-wrapper .layout-layout-1.layout-1-swap .split-row .col { padding-left: 50px; padding-right: 100px; } .section-wrapper .layout-layout-2.grid.split-column { grid-template-columns: 360px 1fr; gap: 0 var(--gap-width-3); } .section-wrapper .layout-layout-2.grid .split-row .split-column { gap: 0 var(--gap-width-3); } .section-wrapper .layout-layout-2.grid .split-row { grid-template-rows: auto 1fr; gap: var(--padding-height-x2) 0; } .section-wrapper .layout-layout-3.layout-3-swap .col-1-main { grid-area: col-1-main; padding-right: 100px; } .section-wrapper .layout-layout-3.layout-3-swap .col-2-main { grid-area: col-2-main; } .section-wrapper .layout-layout-3.layout-3-swap { grid-template-areas: "col-2-main col-1-main"; } .section-wrapper .layout-layout-3 .col-1-main .col { padding-left: 40px; } .section-wrapper .layout-layout-3.layout-3-swap .col-1-main .col { padding-left: 0; } /*.section-wrapper .layout-left-right .article2 { background: none; } .section-wrapper .layout-left-right .article2 a .image { grid-area: image; } .section-wrapper .layout-left-right .article2 a .content { grid-area: teaser; position: relative; padding: 0; bottom: unset; left: unset; display: grid; align-content: center; } .section-wrapper .layout-left-right .article2 a { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "teaser image"; gap: 0 var(--gap-width-medium); } .section-wrapper .layout-left-right.layout-left .article2 a { grid-template-areas: "image teaser"; } .section-wrapper .layout-left-right .article2 a .content .content-inner { background: none; padding: 0; max-width: none; } .section-wrapper .layout-left-right.layout-right .article2 a .content .content-inner { padding-left: 40px; } .section-wrapper .layout-left-right .article2 a .image-wrap { overflow: hidden; grid-area: image; height: 100%; }*/ .section-wrapper .related-articles.grid.split-column { grid-template-columns: 1fr 1fr 1fr; gap: 0 var(--gap-width-medium); } .section-wrapper .load a { max-width: 1200px; width: 100%; padding: 0 20px; line-height: 50px; font-weight: 600; font-family: var(--font-header); text-transform: uppercase; background: var(--colour14); color: var(--colour4); margin: 0 auto; } .section-wrapper .load a:hover, .section-wrapper .load a.active { background: var(--colour10); color: var(--colour2); } .section-wrapper .load a .icon { display: none; margin-left: 15px; } .section-wrapper .load a.active .icon:before { -webkit-animation:spin 1s linear infinite; -moz-animation:spin 1s linear infinite; animation:spin 1s linear infinite; } @-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); } } .section-wrapper .load a.active .icon { display: inline-block; } .section-wrapper h3.read-next { letter-spacing: .5px; } .section-wrapper .article2 { background: var(--colour12); } .section-wrapper .article2 a { display: block; width: 100%; height: 450px; overflow: hidden; } .section-wrapper .article2 a .image { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; opacity: .8; transition: all .3s ease; -webkit-transform: scale(1); transform: scale(1); } .section-wrapper .article2 a .image img { width: 100%; height: 100%; display: none; } .section-wrapper .article2 a .content { position: absolute; left: 0; bottom: 0; padding: 25px 25px; width: 100%; } .section-wrapper .article2 a.wide .content { padding: 50px 50px; } .section-wrapper .article2 a .content .content-inner { background: var(--colour2); padding: 25px 30px; max-width: 400px; } .section-wrapper .article2 a.wide .content .content-inner { max-width: 580px; } .section-wrapper .article2 a .content .content-inner .category { color: var(--colour9); margin-bottom: 5px; letter-spacing: 1.2px; } .section-wrapper .article2.sponsored a .content .content-inner .category { display: inline-block; color: var(--colour2); background: var(--colour1); padding: 2px 5px; } .section-wrapper .article2 a .content .content-inner .title { color: var(--colour1); margin-bottom: 5px; width: 100%; } .section-wrapper .article2 a .content .content-inner .title span { z-index: 10; line-height: 1.2; } .section-wrapper .article2 a .content .content-inner .author { color: var(--colour4); letter-spacing: 1.2px; } .section-wrapper .article2.alt.alt-ch a .content .content-inner .description { color: var(--colour5); padding-top: 2px; padding-bottom: 10px; line-height: 1.5; } .section-wrapper .article2 a:hover .image { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } .section-wrapper .article2 a .content .content-inner .title span { position: relative; display: block; z-index: 50; } .section-wrapper .article2 a .content .content-inner .title span::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 4px 0 -2px 0; transform: scaleX(0); transform-origin: bottom right; background: var(--colour11); transition: transform .3s ease; z-index: -1; } .firefox .section-wrapper .article2 a .content .content-inner .title span::before { inset: 2px 0 2px 0; } .section-wrapper .article2 a:hover .content .content-inner .title span::before { transform: scaleX(1); transform-origin: bottom left; } .section-wrapper .article2 a .content .content-inner .author { padding-top: 5px; } .section-wrapper .grid.sponsored-img { grid-template-columns: auto 1fr; gap: 20px 20px; } .section-wrapper .grid.sponsored-img .text.grid { align-content: center; } .section-wrapper .grid.sponsored-img .img { max-width: 300px; } .section-wrapper .layout-featured .article a.image .image-wrap { max-height: 450px; } .section-wrapper .layout-left .article a.image .image-wrap, .section-wrapper .layout-right .article a.image .image-wrap { max-height: 400px; } .section-wrapper .layout-layout-1 .article a.image .image-wrap { max-height: 410px; } .section-wrapper .layout-layout-2 .article a.image .image-wrap { max-height: 250px; } .section-wrapper .subscribe p { line-height: 1.3; } .single .rows.content-main > .row + .row { padding-top: 35px; } .single .excerpt { line-height: 1.4; } .single .rows.content-main > .row + .row.article-image { padding-top: 0; margin-bottom: 35px !important; } .single .rows.content-main > .row.article-image + .row.quote { padding-top: 10px; } .single .content-main .subscribe { color: var(--colour4); } .single .content-main .subscribe a { color: var(--colour1); } .single .content-main .subscribe a:hover { color: var(--colour7); } .section-wrapper ul.masthead { position: relative; display: grid; margin: 0; padding: 0; list-style-type: none; grid-template-columns: 1fr 1fr 1fr; gap: 20px 30px; } .section-wrapper ul.masthead li { margin: 0; padding: 0; list-style-type: none; } .section-wrapper ul.masthead li span { display: block; margin: 0 0 5px; } .section-wrapper .layout-layout-1.grid.split-column, .section-wrapper .layout-layout-3.grid.split-column, .section-wrapper .layout-layout-3 .grid.split-column { gap: var(--gap-width-medium) var(--gap-width-medium); } .grid.split-column.split-column-2 { grid-template-columns: 1fr 1fr; gap: var(--padding-height) var(--gap-width-medium); } .grid.split-column.split-column-3 { grid-template-columns: 1fr 1fr 1fr; gap: var(--padding-height) var(--gap-width-medium); } .grid.split-column.split-column-4 { grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--padding-height) var(--gap-width-medium); } .section-wrapper .split-column.layout-layout-1 .col.grid.split-row { grid-template-rows: 1fr 1fr; gap: 10px 0; } .layout-featured-wrapper { height: 100vh; } .grid.split-column.split-column-3.layout-featured { grid-template-columns: 350px 1fr 23%; margin-bottom: var(--padding-height); height: calc(100% - 50px); overflow: hidden; padding-bottom: 50px; } .grid.split-column.split-column-3.layout-featured .page-header { padding-right: var(--gap-width-medium); grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; gap: var(--padding-height) 0; height: 100%; } .layout-featured .department-menu { padding-top: var(--padding-height-x2); } .layout-featured .department-menu h4 { margin-bottom: 5px; } .layout-featured .department-menu ul, .layout-featured .department-menu ul li { margin: 0; padding: 0; list-style-type: none; } .layout-featured .department-menu ul li { position: relative; display: block; margin-bottom: 5px; } .layout-featured .department-menu ul li:last-child { margin-bottom: 0; } .section-wrapper .article-row.loading { position: relative; } .section-wrapper .article-row.loading.load, .section-wrapper .article-row.loading .article, .section-wrapper .article-row.loading .article2 { opacity: 0; } .section-wrapper .article-row.loading:after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: rgba(255, 255, 255, .4); content: ''; } .section-wrapper .article-row.loading:before { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: url("images/ajax-loader.gif") center center no-repeat; content: ''; } img.temp { position: absolute; top: 0; left: 0; display: none; width: 100%; height: auto; opacity: 0; } .layout-featured .department-menu ul li a { position: relative; font-family: var(--font-header); font-weight: 300; font-size: var(--font-size-22); color: #000; text-transform: uppercase; z-index: 50; } .layout-featured .department-menu ul li a::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 4px 0 -2px 0; transform: scaleX(0); transform-origin: bottom right; background: var(--colour11); transition: transform .3s ease; z-index: -1; } .firefox .layout-featured .department-menu ul li a::before::before { inset: 2px 0 2px 0 important; } .layout-featured .department-menu ul li a:hover::before { transform: scaleX(1); transform-origin: bottom left; } .layout-featured .department-menu ul li a:hover { color: var(--colour1); background: var(--colour11); } .section-wrapper .layout-featured .article { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .section-wrapper .article2 a { height: 570px; } .section-wrapper .article-row + .article-row, .section-wrapper .layout-featured-wrapper + .article-row { border-top: 0; } .section-wrapper .col.grid.split-row { gap: 30px 0; } .section-wrapper .col.grid > .col.article2 a { height: 100%; } .section-wrapper .article a.image .caption { display: none !important; } .section-wrapper .article2 a.wide { height: 690px; } .section-wrapper .article a.image .image-wrap { border: none; } .section-wrapper .article a.grid .title { position: relative; z-index: 50; } .section-wrapper .article a.grid .title span::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 4px 0 0 0; transform: scaleX(0); transform-origin: bottom right; background: var(--colour11); transition: transform .3s ease; z-index: -1; } .firefox .section-wrapper .article a.grid .title span::before { inset: 2px 0 2px 0; } .section-wrapper .article a.grid:hover .title { color: var(--colour1); } .section-wrapper .article a.grid:hover .title span::before { transform: scaleX(1); transform-origin: bottom left; } .section-wrapper .article2.alt { background: var(--background2); } .section-wrapper .article2.alt a { height: auto; display: grid; grid-auto-rows: 350px auto; } .section-wrapper .layout-featured .article2.alt a { grid-auto-rows: 1fr auto; } .section-wrapper .article2.alt a .image { height: auto; } .section-wrapper .article2.alt a .image img { height: auto; display: block; opacity: 0; } .section-wrapper .article2.alt a .content { position: relative; left: unset; bottom: unset; padding: 0; } .section-wrapper .article2.alt a .content .content-inner { background: var(--background2); padding: 15px 0; max-width: 100%; } .grid.split-column.split-column-3.layout-featured .article2.alt a .image img { height: auto; display: none; } .section-wrapper .article2.alt.height_700 a .image { height: 720px; } .section-wrapper .article2.alt.height_700 a .image img { height: 100%; opacity: 0; } .page-template-page-search .section-wrapper .article-row.layout-header { padding-top: 40px; } .section-wrapper.issue .more-issues { position: relative; display: inline-block; } .section-wrapper.issue .more-issues > a { color: var(--colour1); } .section-wrapper.issue .more-issues > a:hover, .section-wrapper.issue .more-issues:hover > a { color: var(--colour8); } .section-wrapper.issue .more-issues ul { position: absolute; display: none; width: 180px; list-style-type: none; padding: 15px 0 0; margin: 0; box-sizing: border-box; -moz-box-sizing: border-box; } .section-wrapper.issue .more-issues:hover ul { display: block; } .section-wrapper.issue .more-issues ul li { list-style-type: none; padding: 0; margin: 0; text-align: left; } .section-wrapper.issue .more-issues ul li a { display: block; padding: 7px 10px; background-color: var(--colour2); color: var(--colour4); } .section-wrapper.issue .more-issues ul li a span { color: var(--colour1); margin-right: 3px; } .section-wrapper.issue .more-issues ul li a:hover, .section-wrapper.issue .more-issues ul li a:hover span { color: var(--colour1); background: var(--colour11); } .popup-wrapper, .age-popup-wrapper, .login-popup-wrapper, .renew-popup-wrapper { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--colour14); z-index: 99; box-sizing: border-box; -moz-box-sizing: border-box; } .popup-wrapper .row { grid-template-columns: 1fr auto; gap: 0 var(--gap-width-3); } .popup-wrapper h3.popup { margin-bottom: 15px; } .popup-wrapper .close-button { position: absolute; top: 15px; right: 15px; } .popup-wrapper .close-button a { position: relative; display: block; /*height: 3px;*/ width: 12px; /*background: var(--colour7);*/ font-family: var(--font-header); font-weight: 800; color: var(--colour7); overflow: hidden; } .popup-wrapper .close-button a:hover { /*background: var(--colour7); color: var(--colour7);*/ color: var(--colour1); } .age-popup-wrapper .age-popup, .login-popup-wrapper .login-popup, .renew-popup-wrapper .renew-popup { position: relative; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; color: #fff; } .login-popup-wrapper, .renew-popup-wrapper { padding: 30px 40px; z-index: 999; background: var(--colour7); color: var(--colour2); } .login-popup-wrapper h2, .renew-popup-wrapper h2 { color: var(--colour2); } .login-popup-wrapper a, .renew-popup-wrapper a { color: var(--colour2); } .login-popup-wrapper a:hover, .renew-popup-wrapper a:hover { color: var(--colour1); } .login-popup-wrapper .login-popup .rows-popup, .renew-popup-wrapper .renew-popup .rows-popup { margin: 0 auto; } .renew-popup-wrapper .renew-popup .rows-popup p { color: var(--colour1); } .login-popup-wrapper .login-popup .rows-popup .login-restriction-form .inner.grid, .renew-popup-wrapper .renew-popup .rows-popup .renew-restriction-form .inner.grid { display: grid; grid-template-rows: auto; gap: 20px 0; } .login-popup-wrapper .login-popup .rows-popup .login-restriction-form .message, .renew-popup-wrapper .renew-popup .rows-popup .renew-restriction-form .message { padding-top: 20px; } .login-popup-wrapper.section-wrapper form .field input[type="submit"], .renew-popup-wrapper.section-wrapper form .field input[type="submit"] { color: var(--colour2); } .login-popup-wrapper.section-wrapper form .field input[type="submit"]:hover, .renew-popup-wrapper.section-wrapper form .field input[type="submit"]:hover { color: var(--colour1); } .section-wrapper form { position: relative; display: block; } .section-wrapper form .split.grid { grid-template-columns: 1fr 1fr; gap: 20px 20px; } .section-wrapper form .col-1.grid { gap: 20px 0; } .section-wrapper form .field { position: relative; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; } .section-wrapper form .field label { position: absolute; top: 0; display: none; width: 100%; opacity: 0; font-family: var(--font-content); font-weight: 200; font-size: 14px; color: #708090; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; z-index: 1 } .section-wrapper form .field input, .section-wrapper form .field select, .section-wrapper form .field textarea { position: relative; width: 100%; background: var(--colour2); font-family: var(--font-content); font-weight: 200; font-size: 18px; letter-spacing: normal; color: #2c333a; padding: 15px 15px; border: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .section-wrapper form .field textarea { height: 100%; min-height: 150px; } .section-wrapper form .field.center input { text-align: center; } .section-wrapper form .field.select { background: #fff; } .section-wrapper form .field .select-wrap { position: relative; display: block; z-index: 20; } .section-wrapper form .field select { -webkit-appearance: none; -moz-appearance: none; text-overflow: ''; background: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /*max-width: calc(100% - 50px);*/ padding-right: 60px; cursor: pointer; } .section-wrapper form .field select::-ms-expand { display: none; } .section-wrapper form .field .select-dir { position: absolute; top: 18px; right: 0px; display: block; height: 43%; border-left: 1px solid var(--colour7); padding: 0 15px; color: #708090; line-height: 1.1; z-index: 10; } .section-wrapper form .field input[type="checkbox"], .section-wrapper form .field input[type="radio"] { border: 1px solid #000; padding: 3px; margin: 0 10px 0 0; height: 20px; width: 20px; display: table-cell; float: left; } /*form .field.checkbox + .field.checkbox { padding-left: 20px; }*/ .section-wrapper form .field.checkbox { padding-right: 20px; } .section-wrapper form .field.checkbox.spacing { padding-top: 15px; } .section-wrapper form .field.checkbox span, .section-wrapper form .field.radio span { position: relative; top: -2px; } .section-wrapper form .field.checkbox span span.desc, .section-wrapper form .field.radio span span.desc { position: relative; top: auto; } .section-wrapper form .field.checkbox.terms input, .section-wrapper form .field.checkbox.align input { position: absolute; } .section-wrapper form .field.checkbox.terms span, .section-wrapper form .field.checkbox.align span { position: relative; top: 0; left: 30px; display: inline-block; width: 100%; padding-right: 30px; text-align: left !important; color: #b8c0c8; -webkit-box-sizing: border-box; box-sizing: border-box; } .section-wrapper form .field.checkbox.terms.dark span, .section-wrapper form .field.checkbox.align.dark span { color: #000; } .section-wrapper form .field.radio, form .field.radio .field-item { display: table-row; } .section-wrapper form .field input[type="radio"] { float: none; } .section-wrapper form .field.radio span { display: table-cell; top: 2px; padding-bottom: 10px; } .section-wrapper form .field input[type="submit"] { width: auto; font-family: var(--font-header); font-weight: 700; padding: 0; font-size: 15px; color: var(--colour1); background: none; border: none; text-transform: uppercase; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; letter-spacing: 1.3px; } .section-wrapper form .field input[type="submit"]:hover { color: var(--colour8); background: none; border: none; } .section-wrapper form .field span.submit { /*position: relative; top: -10px;*/ } .section-wrapper form .field span.submit::before { position: relative; top: 11px; float: right; margin-left: 5px; font-size: 12px; text-decoration:none; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; } .firefox .section-wrapper form .field span.submit::before { top: 4px; } .section-wrapper form .field span.submit:hover input[type="submit"], .section-wrapper form .field span.submit:hover::before { color: var(--colour8); } .section-wrapper form .field span.submit.submit-plain input[type="submit"] { background: var(--colour7); color: var(--colour2); font-weight: 600; width: 100%; height: 100%; } .section-wrapper form .field span.submit.submit-plain input[type="submit"]:hover { background: var(--colour10); color: var(--colour2); } .section-wrapper textarea:focus, .section-wrapper input:focus, .section-wrapper form .field select:focus { outline: none; } .section-wrapper form .field.floating label { position: absolute; top: 0; left: 0; display: block; margin-top: 6px; margin-left: 0; padding: 0 15px; text-align: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform: translateY(3px); transform: translateY(3px); pointer-events: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-box-sizing: border-box; box-sizing: border-box; opacity: 1; font-family: var(--font-header); font-weight: 600; color: var(--colour4); font-size: 10px; z-index: 50; text-transform: uppercase; } /*.section-wrapper form .field.floating:hover label { color: #00c0b4; }*/ .section-wrapper form .field.floating input, .section-wrapper form .field.floating select, .section-wrapper form .field.floating textarea { padding-top: 25px; padding-bottom: 5px; } .section-wrapper form .field.floating.error label { color: #cc0000; } .section-wrapper form .field.error input { background: #ededf7; } .section-wrapper form.newsletter .row.grid { gap: 0; grid-template-columns: 1fr 215px; } .section-wrapper form.subscribe .row.row-1.grid { gap: 0; grid-template-columns: 1fr 1fr; gap: 0 20px; } .section-wrapper form.subscribe .field span.submit.submit-plain input[type="submit"] { height: 50px; } .message { position: relative; display: none; padding: 0 0 30px; font-size: 15px; text-align: left; font-family: var(--font-header); font-weight: 600; color: var(--colour1); } .message.error { color: #cc0000; } .section-wrapper form .inner.loading::after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: rgba(246, 245, 248, .8) url(images/ajax-loader.gif) center center no-repeat; z-index: 20; content: ''; } .section-wrapper form + h3 { margin-top: 50px; } .section-wrapper .last-subscription.grid { margin-top: 15px; gap: 0 0; border-left: 1px solid #eaeaea; border-top: 1px solid #eaeaea; font-size: 16px; } .section-wrapper .last-subscription.grid .row { border-right: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } .section-wrapper .last-subscription.grid .row.grid.split-2 { grid-template-columns: 1fr 1fr; gap: 0 0; } .section-wrapper .last-subscription.grid .row .col.grid { padding: 5px; grid-template-columns: 135px 1fr; gap: 10px 10px; } .section-wrapper .last-subscription.grid .row .col.grid.col-auto { grid-template-columns: auto 1fr; } .section-wrapper .last-subscription.grid .row .col .col.col-1 { font-weight: 500; } .login-wrapper.cols.grid { width: 100%; min-height: 100%; grid-template-columns: 710px 1fr; grid-template-rows: 1fr; gap: 0 0; grid-template-areas: "col-1 col-2"; background-repeat: no-repeat; background-position: right center; background-size: cover; } .login-wrapper .rows.grid.col-1 { grid-template-rows: auto 1fr auto; gap: 0 0; grid-template-areas: "row-1" "row-2" "row-3"; background: #fff; } .login-wrapper .top { margin: 0; } .login-wrapper .top .inner { padding: 20px; } .login-wrapper .top .inner img { max-width: 210px; } .login-wrapper .content { padding: 50px 100px; width: 100%; display: grid; align-content: center; } .login-wrapper .bottom { padding: 0 100px; width: 100%; } .login-wrapper .bottom .inner { border-top: 1px solid #8e98a1; padding: 20px 0; color: #6c757d; } p + #loginform, p + #lostpasswordform { margin-top: 30px; } #loginform .login-username, #loginform .login-password, #lostpasswordform .login-username, #lostpasswordform .login-password { position: relative; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; } #loginform label, #lostpasswordform label { position: absolute; top: 0; display: none; width: 100%; opacity: 0; font-family: 'Nunito Sans', sans-serif; font-size: 14px; color: #708090; font-weight: 400; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; z-index: 1 } #loginform input[type="text"], #loginform input[type="password"], #lostpasswordform input[type="text"], #lostpasswordform input[type="password"] { position: relative; width: 100%; background: #f7f8fc; font-family: 'Nunito Sans', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: 1.2px; color: #000; padding: 15px 12px; border: 1px solid #d5d9e3; border-radius: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; box-shadow: 5px 5px 20px -10px rgba(0,0,0,0.50); -webkit-box-shadow: 5px 5px 20px -10px rgba(0,0,0,0.50); -moz-box-shadow: 5px 5px 20px -10px rgba(0,0,0,0.50); } #loginform input[type="text"]:focus, #loginform input[type="password"]:focus, #lostpasswordform input[type="text"]:focus, #lostpasswordform input[type="password"]:focus { background: #fff; color: #000; border-color: #214f6e; outline: none; } #loginform input[type="submit"], #loginform input[type="button"], #lostpasswordform input[type="submit"], #lostpasswordform input[type="button"] { position: relative; width: 100%; background: #8a4045; font-family: 'Nunito Sans', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 1.2px; color: #fff; padding: 15px 12px; border: none; border-radius: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } #loginform input[type="submit"]:hover, #loginform input[type="button"]:hover, #loginform input[type="submit"]:focus, #loginform input[type="button"]:focus, #lostpasswordform input[type="submit"]:hover, #lostpasswordform input[type="button"]:hover, #lostpasswordform input[type="submit"]:focus, #lostpasswordform input[type="button"]:focus { background: #421712; color: #fff; outline: none; } #loginform .floating label, #lostpasswordform .floating label { display: block; margin-top: 7px; margin-left: 0; padding: 0 15px; text-align: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform: translateY(3px); transform: translateY(3px); pointer-events: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-box-sizing: border-box; box-sizing: border-box; opacity: 1; } #loginform .floating input[type="text"], #loginform .floating input[type="password"], #lostpasswordform .floating input[type="text"], #lostpasswordform .floating input[type="password"] { padding-top: 25px; padding-bottom: 5px; } #loginform ::-webkit-input-placeholder, #lostpasswordform ::-webkit-input-placeholder { color: #6c757d; font-weight: 400; } #loginform :-moz-placeholder, #lostpasswordform :-moz-placeholder { color: #6c757d; font-weight: 400; } #loginform ::-moz-placeholder, #lostpasswordform ::-moz-placeholder { color: #6c757d; font-weight: 400; } #loginform :-ms-input-placeholder, #lostpasswordform :-ms-input-placeholder { color: #6c757d; font-weight: 400; } .password-notice { position: absolute; display: none; max-width: 400px; padding: 20px; background: #fff; border: 1px solid #ccc; border-radius: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 80; } .password-notice .password-notice-inner.grid { position: relative; font-size: 16px; color: #000; gap: 10px 0; } .password-notice .password-notice-inner.grid ul.grid { list-style-type: none; margin: 0; padding: 0; gap: 2px 0; } .password-notice .password-notice-inner.grid ul.grid li { list-style-type: none; margin: 0; padding: 0; color: #cc0000; } .password-notice .password-notice-inner.grid ul.grid li span { display: inline-block; font-size: 18px; padding-right: 10px; } .password-notice .password-notice-inner.grid ul.grid li span.check { display: none; } .password-notice .password-notice-inner.grid ul.grid li.valid { color: #1BC822; } .password-notice .password-notice-inner.grid ul.grid li.valid span.uncheck { display: none; } .password-notice .password-notice-inner.grid ul.grid li.valid span.check { display: inline-block; } .popup-wrapper.form-popup { position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100%; padding: 30px 50px; background: rgba(17, 18, 24, .9); box-sizing: border-box; -moz-box-sizing: border-box; z-index: 9999999; } .popup-wrapper.form-popup .popup { position: relative; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; color: #fff; } .popup-wrapper.form-popup .popup .section-wrapper { width: 100%; padding: 0; } .popup-wrapper.form-popup .popup .section-wrapper .row-1.padding-bottom-x2 { padding-bottom: 0 !important; } /*.age-popup h2, .search-popup h2, .popup-site h2 { color: #fff; font-family: 'MacklinSans-Bold', sans-serif; } .popup-window-box { display: none; } .popup-window-box .rows-popup, .menu-content-popup .rows-popup { max-height: calc(100% - 30px); margin-left: auto; margin-right: auto; } .popup-window-box .rows-popup .row-2 { max-height: calc(100vh - 160px); overflow-y: auto; } .popup-window-box iframe { width: 100%; height: calc(100vh - 150px); border: 0; } .search-wrapper a.icon-cancel, .popup-site-wrapper a.icon-cancel { position: absolute; top: 20px; right: 20px; color: #fff; } .search-wrapper a.icon-cancel:hover, .popup-site-wrapper a.icon-cancel:hover { color: #708090; } .popup-site .rows-popup { max-height: calc(100vh - 120px); overflow-y: auto; } .popup-site .buttons { margin-top: 10px; } .popup-site-wrapper.dark { background: rgba(255, 255, 255, .9); } .dark .popup-site h2, .dark .popup-site, .dark.popup-site-wrapper a.icon-cancel { color: #2c333a; } .dark.popup-site-wrapper a.icon-cancel:hover { color: #708090; }*/ .form-wrapper .message { margin-bottom: 10px; } .popup-wrapper.form-popup { display: block; z-index: 1; } .popup .form-wrapper { max-width: 800px; max-height: 800px; margin: 0 auto; } .form-wrapper .form-wrapper-inner { color: #2c333a; margin-bottom: 25px; } .popup .form-wrapper .form-wrapper-inner { margin-bottom: 0; } .popup .form-wrapper .form-wrapper-inner { max-height: calc(100vh - 80px); overflow-y: auto; padding: 50px; } .form-wrapper .form-wrapper-inner.msg { text-align: center; padding-top: 150px; padding-bottom: 150px; } .form-wrapper .message { display: none; } .form-wrapper .field { height: 100%; } .content .form-wrapper h2 + div { margin-top: 15px !important; } .form-wrapper .form-content, .form-wrapper .form-page-1-content { margin-bottom: 25px; } .form-wrapper div + .form-content { margin-top: 15px; } .form-wrapper .form-sections-wrapper { border-top: 1px solid #d1d6dc; padding-top: 0; margin-top: 0 !important; } .form-wrapper .form-sections-wrapper h2, .form-wrapper .form-sections-wrapper h3, .form-wrapper .form-sections-wrapper h4, .form-wrapper .form-sections-wrapper h5 { padding-top: 0; } .form-wrapper .form-sections-wrapper ul.form-sections { height: 100%; width: 100%; list-style-type: none; padding: 0; margin: 0; } .form-wrapper .form-sections-wrapper ul.form-sections li { list-style-type: none; padding: 0; margin: 0; } .form-wrapper .form-sections-wrapper ul.form-section { display: grid; grid-template-columns: 1fr; gap: 10px 0; grid-auto-rows: minmax(min-content, max-content); overflow: hidden; height: 100%; } .form-wrapper .form-sections-wrapper ul.form-section .field.radio { padding-top: 20px; padding-bottom: 20px; } .form-wrapper .form-content p.p1 { display: none; } .form-wrapper .btn-close { position: absolute !important; top: 15px; right: 15px; font-size: 28px; z-index: 99; } .form-wrapper .form-buttons { display: grid; grid-template-rows: auto; gap: 0 20px; grid-auto-rows: minmax(min-content, max-content); overflow: hidden; margin-top: 0; grid-template-columns: 1fr; grid-template-areas: "next"; padding-top: 30px; margin-bottom: 40px; opacity: 0; } .form-wrapper .form-buttons .button { padding: 0; margin: 0; } .form-wrapper .form-buttons .button.field-previous { grid-area: previous; text-align: center; } .form-wrapper .form-buttons .button.field-next { grid-area: next; text-align: center; } .form-wrapper .form-buttons .field-submit { grid-area: submit; text-align: center; } .form-wrapper .form-buttons .button a { padding-top: 16px; padding-bottom: 17px; } .form-wrapper .slick-track { display: flex !important; } .form-wrapper .slick-slide { height: inherit !important; } .form-wrapper ul.slick-dots { display: block !important; position: absolute; top: auto; bottom: -120px; left: auto; right: auto; width: 100%; text-align: center; } .form-wrapper ul.slick-dots li button { width: 15px; height: 15px; border: 1px solid #000; } .form-wrapper ul.slick-dots li.slick-active button { background: #000; } .form-wrapper .loading, .side-box-content.loading::after, .poll-selections-wrapper.loading::after, .box-poll-bracket.loading::after, .event-form .loading::after, .related-events.loading::after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: rgba(255, 255, 255, .8) url(images/ajax-loader.gif) center center no-repeat; z-index: 20; content: ''; } .gallery-view-all-wrapper.loading::after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: url(images/ajax-loader.gif) center center no-repeat; z-index: 20; content: ''; } .form-wrapper .field.required::after { position: absolute; top: 2px; right: 10px; content: '* REQUIRED'; font-size: 12px; z-index: 999; } .section-wrapper .form-wrapper form .field.floating input[type="submit"] { background: var(--colour7); color: var(--colour2); font-weight: 600; width: 100%; height: 100%; padding-top: 17px; padding-bottom: 16px; } .section-wrapper .form-wrapper form .field.floating input[type="submit"]:hover { background: var(--colour10); color: var(--colour2); } .footer-wrapper.pdf { display: none !important; } /*.footer-wrapper { border-top: 5px solid #000; } footer { color: var(--font-size-15); } footer a { color: var(--colour1); font-family: adelle, serif; } footer a:hover { color: var(--colour9); } footer .logo img { max-width: 300px; } footer .grid.footer-address { grid-template-columns: 35.5% 1fr; gap: 0 var(--gap-width-small); } footer .grid.staff { grid-template-columns: 1fr 1fr; grid-template-areas: "col-0 col-3" "col-1 col-4" "col-2 col-5"; gap: 5px var(--gap-width-small); } footer .background-alt strong { font-family: adelle, serif !important; font-weight: 600 !important; white-space: nowrap; } footer .background-alt a { font-family: adelle, serif !important; font-weight: 400 !important; white-space: nowrap; }*/ footer .row-1 .col-1 .logo img { max-width: 370px; } footer .row-2 { grid-template-columns: 1fr 300px 300px 140px; gap: 0 30px; color: var(--colour13); margin-bottom: var(--padding-height); } footer .row-2 strong { font-weight: 400; } footer .row-2 .col-1 { padding-top: 35px; } footer .row-2 .col-1 .content { max-width: 800px; } footer .row-2 .menu ul { margin: 0; padding: 0; list-style-type: none; } footer .row-2 .menu ul li { margin: 0 0 10px; padding: 0; list-style-type: none; } footer .row-2 .menu ul li a { color: var(--colour1); } footer .row-2 .menu ul li a:hover { color: var(--colour7); } footer ul.staff { margin: 0; padding: 0; list-style-type: none; } footer ul.staff li { margin: 0 0 10px; padding: 0; list-style-type: none; } footer ul.staff li:last-child { margin-bottom: 0; } footer ul.staff li a { color: var(--colour7); } footer ul.staff li a:hover { color: var(--colour1); } footer .social a { margin: 0 0 0 20px; display: inline-block; color: var(--colour7); } footer .social a:first-child { margin-left: 0; } footer .social a:hover { color: var(--colour1); } footer .row-3 { grid-template-columns: 120px 1fr; gap: 0 30px; color: var(--colour13); } footer .row-3 .col-1 .logo img { max-width: 120px; } footer .row-3 a { color: var(--colour7); } footer .row-3 a:hover { color: var(--colour1); } footer .row-3 p { margin: 0; padding: 0; } @viewport { width: auto; } @media only screen and (min-width: 1367px) and (min-height: 600px) { .grid.split-column.split-column-3.layout-featured .page-header { grid-template-rows: 180px 1fr auto; } .grid.split-column.split-column-3.layout-featured .col.col-3-main.grid.split-row { gap: 30px 0; } } @media only screen and (min-width: 1367px) and (min-height: 800px) { .grid.split-column.split-column-3.layout-featured .page-header { grid-template-rows: 220px 1fr auto; } .grid.split-column.split-column-3.layout-featured .col.col-3-main.grid.split-row { gap: 150px 0; } .grid.split-column.split-column-3.layout-featured .page-header { padding-right: var(--gap-width-medium); } } @media only screen and (min-width: 1281px) and (min-height: 1000px) { .grid.split-column.split-column-3.layout-featured .page-header { grid-template-rows: 180px 1fr auto; } .grid.split-column.split-column-3.layout-featured .col.col-3-main.grid.split-row { gap: 250px 0; } .section-wrapper .col.col-3-main.grid > .col.article2 a { height: 90%; } .grid.split-column.split-column-3.layout-featured .page-header { padding-right: 25px; } } @media only screen and (min-width: 1567px) and (min-height: 1000px) { .section-wrapper .col.col-3-main.grid > .col.article2 a { height: 100%; } } @media only screen and (min-width: 1281px) and (max-height: 900px) { .grid.split-column.split-column-3.layout-featured .page-header { grid-template-rows: 170px 1fr auto; } .layout-featured .department-menu { padding-top: 30px; } .section-wrapper .article2.alt.alt-ch a .content .content-inner .description { display: none; } } @media only screen and (min-width: 1281px) and (max-height: 800px) { .grid.split-column.split-column-3.layout-featured .page-header { grid-template-rows: 140px 1fr auto; } .layout-featured .department-menu { padding-top: 20px; } .section-wrapper .article2.alt a .image { min-height: 200px; } } @media only screen and (min-width: 1367px) and (max-height: 750px) { .layout-featured-wrapper { height: auto; } .grid.split-column.split-column-3.layout-featured { grid-template-columns: 245px 1fr 290px; } .grid.split-column.split-column-3.layout-featured .page-header { grid-template-rows: 135px 1fr auto; } } @media only screen and (max-width: 1920px) { .col-spacing-top, .col-spacing, header .wrap-2 { padding-left: 50px; padding-right: 50px; } .grid.split-column.split-column-3.layout-featured { grid-template-columns: 325px 1fr 23%; } .section-wrapper .article2 a { height: 450px; } .section-wrapper .article2.alt.height_700 a .image { height: 400px; } } @media only screen and (max-width: 1620px) { .grid.split-column.split-column-3.layout-featured { grid-template-columns: 300px 1fr 23%; } .grid.split-column.split-column-3.layout-featured .col.col-3-main.grid.split-row { gap: 50px var(--gap-width-medium); } } @media only screen and (max-width: 1400px) { .section-wrapper .article2.alt a { grid-auto-rows: 250px auto; } /*.col-spacing-top, .col-spacing, header .wrap-1, header .wrap-2 { padding-left: 70px; padding-right: 70px; }*/ footer .row-2 { grid-template-columns: 1fr 220px 260px 120px; } } @media only screen and (max-width: 1366px) { :root { --font-size-36: 30px; --font-size-22: 18px; --padding-height: 25px; } .size15 { font-size: 13px; } .grid.split-column.split-column-3.layout-featured { grid-template-columns: 245px 1fr 290px; } .grid.split-column.split-column-3.layout-featured .page-header { grid-template-rows: 135px 1fr auto; } .section-wrapper .article2 a { height: 395px; } .section-wrapper .article2 a.wide { height: 485px; } .section-wrapper .article2 a.wide .content { padding: 35px 35px; } .section-wrapper .article2 a.wide .content .content-inner { max-width: 430px; } .section-wrapper .article2.alt.height_700 a .image { height: 240px; } .layout-featured-wrapper { height: auto; } .grid.split-column.split-column-3.layout-featured { height: auto; padding-bottom: 0; overflow: visible; } .section-wrapper .layout-layout-1.layout-1-swap .split-row .col { padding-right: 50px; } .article .size40, .article2 .size40, .article .size36, .article2 .size36, .article .size34, .article2 .size34 { font-size: 28px; } .article .size26, .article2 .size26 { font-size: 18px; } .article .description.size24, .article2 .description.size24 { font-size: 18px; } } @media only screen and (max-width: 1280px) { .section-wrapper .article2 a { height: 400px; } :root { --padding-height: 30px; --padding-height-x2: 60px; --gap-width-medium: 35px; } .size18 { font-size: 16px; } header { background: var(--background2); } header .mobile-header { display: block; border: none; } header .mobile-header .row-2 { padding: 20px 0 0; } header .row-2 .logo { max-width: 390px; } .home header { padding-top: 42px; } .home header .wrap-2.mobile-header { display: block; } .home header .wrap-1 .row-1.grid { display: block !important; } .home header .wrap-1 .col-2, .home header .wrap-1 .col-3 { display: none !important; } .home header .wrap-1 .member-bar .col-2, .home header .wrap-1 .member-bar .col-3 { display: block !important; } .home.member header .wrap-2.mobile-header { padding-top: 60px; } .member h1.category-title { padding-top: 100px; } .grid.split-column.split-column-3.layout-featured .col-1-main { grid-area: col-1-main; } .grid.split-column.split-column-3.layout-featured .page-header { grid-template-rows: 1fr; padding-right: 0; } .grid.split-column.split-column-3.layout-featured .page-header .col-1, .grid.split-column.split-column-3.layout-featured .page-header .col-2 { display: none !important; } .grid.split-column.split-column-3.layout-featured .col-2-main { grid-area: col-2-main; } .grid.split-column.split-column-3.layout-featured .col-3-main { grid-area: col-3-main; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 0 var(--gap-width-medium); } .grid.split-column.split-column-3.layout-featured { grid-template-columns: 1fr; grid-template-areas: "col-2-main" "col-3-main" "col-1-main"; } .section-wrapper .col.grid > .col.article2.alt-ch a { height: 650px; } .article .size40, .article2 .size40, .article .size36, .article2 .size36, .article .size34, .article2 .size34 { font-size: 26px; } /*.article-row .article.article-image.article-image-top a.grid.content { position: absolute; bottom: 0; left: 0; }*/ .section-wrapper .article2.alt.alt-ch { background: var(--colour12); } .section-wrapper .article2.alt.alt-ch a, .layout-split.split-column-2 .article2 a { height: 450px !important; } .section-wrapper .article2.alt.alt-ch a .image { height: 100%; } .section-wrapper .article2.alt.alt-ch a .image img { height: 100%; display: none; } .section-wrapper .article2.alt.alt-ch a .content { position: absolute; left: 0; bottom: 0; padding: 25px 25px; } .section-wrapper .article2.alt.alt-ch a .content .content-inner { background: var(--background2); padding: 25px 30px; max-width: 400px; } .section-wrapper .article2.alt.alt-ch a .content .content-inner .description { display: none; } .section-wrapper .article2.alt.height_700 a .image { height: 100%; } .layout-split.split-column-2 .article2 a .size40 { font-size: 18px !important; } .article-row.layout-split.split-column-3 .article2 { background: var(--background2); } .article-row.layout-split.split-column-3 .article2 a { height: auto; grid-auto-rows: 250px auto; display: grid; } .article-row.layout-split.split-column-3 .article2 a .image img { height: auto; display: none; } .article-row.layout-split.split-column-3 .article2 a .content { position: relative; left: unset; bottom: unset; padding: 0; } .article-row.layout-split.split-column-3 .article2 a .content .content-inner { background: var(--background2); padding: 15px 0; max-width: 400px; } .section-wrapper .layout-layout-1.layout-1-swap .split-row .col, .section-wrapper .layout-layout-3.layout-3-swap .col-1-main { padding-left: 0; padding-right: 0; } footer .row-2 { grid-template-columns: auto 260px 300px; grid-template-areas: "col-1 col-2 col-3" "col-1 col-2 col-4"; grid-template-rows: auto 1fr; gap: 30px 50px; } footer .row-2 .col-1 { grid-area: col-1; } footer .row-2 .col-2 { grid-area: col-2; } footer .row-2 .col-3 { grid-area: col-3; } footer .row-2 .col-4 { grid-area: col-4; text-align: left !important; } .login-wrapper.cols.grid { grid-template-columns: 600px 1fr; } #loginform input[type="text"], #loginform input[type="password"], #loginform input[type="submit"], #loginform input[type="button"] { font-size: 18px; } } @media only screen and (max-width: 1100px) { .size44 { font-size: 40px; } .size32 { font-size: 30px; } .size26 { font-size: 22px; } .single .section-wrapper .article2 { background: var(--background2); } .single .section-wrapper .article2 a { height: auto; } .single .section-wrapper .article2 a .image img { height: auto; display: block; } .single .section-wrapper .article2 a .content { position: relative; left: unset; bottom: unset; padding: 0; } .single .section-wrapper .article2 a .content .content-inner { background: var(--background2); padding: 15px 0; max-width: 400px; } .section-wrapper .article2.alt a { grid-auto-rows: 150px auto; } footer .row-1 .col-1 .logo img { max-width: 300px; } footer .row-2 { margin-bottom: 30px; } footer .row-2 .col-1 .content { max-width: none; } footer .row-2 .menu ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; } footer .row-2 .menu ul li { margin: 0; } .login-wrapper.cols.grid { grid-template-columns: 500px 1fr; } .login-wrapper .content { padding: 40px 50px; } .login-wrapper .bottom { padding: 0 50px; } } @media only screen and (max-width: 1000px) { :root { --gap-width: 100px; --padding-height-x2: 50px; --gap-width-3: 50px; --font-size-87: 62px; --font-size-52: 46px; --font-size-36: 32px; } .size44 { font-size: 36px; } .size32 { font-size: 28px; } .size28 { font-size: 26px; } header .row-2 .logo { max-width: 400px; } .home header { padding-top: 42px; } .home header .wrap-2.mobile-header { display: block; } footer .row-1 .col-1 .logo img { max-width: 260px; } footer .row-2 { grid-template-columns: auto 200px 220px; } .login-wrapper .top .inner img { max-width: 185px; } .login-wrapper.cols.grid { grid-template-columns: 400px 1fr; } .login-wrapper .content { padding: 30px 40px; } .login-wrapper .bottom { padding: 0 40px; } } @media only screen and (max-width: 900px) { :root { --post-width: 520px; --post-width-wide: 900px; --gap-width: 50px; --gap-width-medium: 30px; --font-size-87: 52px; --font-size-52: 42px; --font-size-38: 28px; } .size87 { font-size: 48px; } .size44 { font-size: 32px; } .size26 { font-size: 18px; } .size22 { font-size: 18px; } .size24 { font-size: 18px; } header .row-1 .menu, header .row-3 .menu { font-size: 12px; } header .row-1.grid { grid-template-areas: "col-1 col-2 col-3"; gap: 0 30px; } header .row-1.grid .col-1 { grid-area: col-1; } header .row-1.grid .col-2 { grid-area: col-2; } header .row-1.grid .col-3 { grid-area: col-3; } .section-wrapper .layout-layout-2.grid .split-row .split-column { grid-template-columns: 1fr; gap: var(--padding-height-x2) 0; } .section-wrapper .layout-layout-2.grid .split-row .split-column .col:after { position: absolute; top: calc((var(--padding-height-x2) / 2)*-1); left: 0 !important; display: block; content: ''; width: 100%; height: 0; border-top: 1px solid var(--colour4); } .section-wrapper .layout-layout-2.grid .split-row .split-column .col:first-of-type:after { display: none; } .grid.split-row.row-border.row-border-dark > .row::after { border-top-color: var(--colour4); } .section-wrapper .layout-layout-2.grid .article.grid.article-image.article-image-right { grid-template-areas: "image" "content"; gap: 20px 0; } /* .section-wrapper .layout-left-right .article2 a { height: 260px; } .section-wrapper .layout-left-right.layout-right .article2 a .content .content-inner { padding-left: 0; }*/ .section-wrapper .article-header.col-spacing { padding: 60px 0 50px; } .member .section-wrapper .article-header.col-spacing { padding-top: 100px; } .single-post .section-wrapper .content-main .post-width-wide { max-width: var(--post-width); } .single-post .section-wrapper .content-main .post-width-wide.quote { max-width: var(--post-width-wide); } .section-wrapper form.newsletter .row.grid { gap: 0; grid-template-columns: 1fr 180px; } .section-wrapper .col.grid > .col.article2.alt-ch a { height: 450px; } .section-wrapper .article2.alt.alt-ch a, .layout-split.split-column-2 .article2 a { height: 250px !important; } .article-row.layout-split.split-column-3 .article2 a { grid-auto-rows: 200px auto; } .split-column.split-column-2 .article .size34, .split-column.split-column-2 .article2 .size34 { font-size: 18px; } footer .row-2 { grid-template-columns: auto 150px 210px; } footer .row-2 .menu ul { grid-template-columns: 1fr; } } @media only screen and (max-width: 800px) { header .row-2 { padding-top: 60px; } header .row-2 .logo { max-width: 320px; } .search-wrapper { top: 39px; } .firefox .search-wrapper { top: 38px; } .member .search-wrapper { top: 94px; } .member.firefox .search-wrapper { top: 80px; } .flyout-wrapper .flyout-content ul li a { font-size: 20px; } .section-wrapper .article-header.col-spacing { padding-top: 60px; } h1.category-title { padding-top: 30px; } .section-wrapper { overflow: hidden; } .section-wrapper .content .post-width { padding-left: 0; padding-right: 0; } .section-wrapper .post-width { max-width: 560px; padding-left: 20px; padding-right: 20px; } .image-wrapper .image .image-description, .image-wrapper .image .image-caption { padding-left: 20px; padding-right: 20px; width: auto; } .section-wrapper .image-wrapper { padding-top: 25px; } .article-header.col-spacing { padding-left: 0; padding-right: 0; } :root { --padding-height: 18px; --padding-height-x2: 36px; } header .row-1.grid { grid-template-columns: 190px 1fr; grid-template-areas: "col-2 col-1"; gap: 0 30px; } header .row-1.grid .col-1 { width: 100%; } header .row-1.grid .col-1 .wrap { text-align: right !important; } header .row-1.grid .col-3 { display: none !important; } .home header .row-1.grid .col-1 .wrap { text-align: left !important; } .archive .col-spacing-top, .page .col-spacing-top, .issue.col-spacing-top { padding-top: 42px; } .page.home .col-spacing-top { padding-top: var(--padding-height); } .grid.split-column.split-column-3.layout-featured { gap: var(--gap-width-medium) var(--gap-width-medium); } .section-wrapper .layout-layout-1.layout-1, .section-wrapper .layout-layout-1.layout-1-swap { grid-template-columns: 1fr; grid-template-areas: "col-2-main" "col-1-main"; } .section-wrapper .layout-layout-3, .section-wrapper .layout-layout-3.layout-3-swap { grid-template-columns: 1fr; grid-template-areas: "col-1-main" "col-2-main"; } .section-wrapper .split-column.layout-layout-1 .col.grid.split-row, .section-wrapper .layout-layout-3.layout-3-swap .col-2-main { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: var(--gap-width-medium) var(--gap-width-medium); } .grid.split-column.split-column-4 { grid-template-columns: 1fr 1fr; } .section-wrapper .layout-layout-1.layout-1-swap .col-2-main > .col.vert-middle { align-content: flex-start; } .section-wrapper .layout-layout-1.layout-1-swap .col-2-main > .col.vert-middle .title.size40 { font-size: 18px !important; } .section-wrapper .article2 a .content .content-inner { padding: 15px 20px; } .section-wrapper .article2 a.wide { height: 450px; } .section-wrapper .split-column-2 .article2 a.wide { height: 260px; } .section-wrapper .split-column-2 .article2 a.wide .content { padding: 20px; } .section-wrapper .split-column-2 .article2 a.wide .title.size40 { font-size: 18px !important; } .section-wrapper .article2.alt.alt-ch a, .layout-split.split-column-2 .article2 a { height: 260px !important; } .section-wrapper .layout-layout-1.layout-1-swap .col-2-main .article .size36 { font-size: 18px; } .section-wrapper .layout-layout-1.layout-1-swap .col-2-main .article .size22 { font-size: 16px; } .section-wrapper .article2.alt a { grid-auto-rows: 200px auto; } .section-wrapper .article2.alt a .image { height: 200px; } .category .section-wrapper .post-width { padding-left: 0; padding-right: 0; } .popup-wrapper .row { grid-template-columns: 1fr; gap: 20px 0; } footer .row-2 { grid-template-columns: auto 210px; grid-template-areas: "col-1 col-1" "col-2 col-3" "col-4 col-3"; } footer .row-2 .col-1 { padding-top: 20px; } } @media only screen and (max-width: 667px) { :root { --font-size-15: 14px; --padding-height: 30px; --font-size-87: 44px; --font-size-52: 38px; --font-size-36: 28px; --font-size-26: 24px; } .size44 { font-size: 30px; } .size32 { font-size: 24px; } .size28 { font-size: 24px; } .size22 { font-size: 18px; } .flyout-wrapper { padding: 12px 20px 20px; } .flyout-wrapper .flyout-content-wrap { align-content: baseline !important; } .flyout-wrapper .flyout-content { grid-template-columns: 1fr; gap: 25px 0; } .flyout-wrapper .flyout-content ul li a { font-size: 22px; } .section-wrapper .article-header.col-spacing { padding-top: 50px; } .col-spacing-top .col-spacing { padding-top: 5px; } .section-wrapper .layout-layout-2.grid.split-column { grid-template-columns: 1fr 1fr; } .category .section-wrapper .article-row + .article-row { padding-top: 0px; } .section-wrapper .last-subscription.grid .row.grid.split-2 { grid-template-columns: 1fr; } .section-wrapper .last-subscription.grid .row.grid.split-2 >.col-1 { border-bottom: 1px solid #eaeaea; } footer .row-2 { grid-template-columns: 1fr 1fr; } footer .row-2 .menu ul { grid-template-columns: 1fr; } } @media only screen and (max-width: 600px) { .size44 { font-size: 28px; } .size32 { font-size: 22px; } .size28 { font-size: 22px; } .size24 { font-size: 16px; } .size16 { font-size: 15px; } .col-spacing-top, .col-spacing, header .wrap-2, header .wrap-1 .member-bar { padding-left: 30px; padding-right: 30px; } .section-wrapper .layout-split.split-column-3 { grid-template-columns: 1fr 1fr; gap: var(--gap-width-3) var(--gap-width-3); } .section-wrapper .related-articles.grid.split-column { grid-template-columns: 1fr; gap: 20px 0; } /*.section-wrapper .layout-left-right .article2 a { height: 200px; }*/ .grid.split-column.split-column-3.layout-featured .col-2-main .col-1 { margin: 0 -35px; } .section-wrapper .article2 a.wide .content { padding: 25px; } .section-wrapper .layout-featured .article2 a.wide .content { padding: 40px; } .grid.split-column.split-column-3.layout-featured { grid-template-areas: "col-2-main" "col-1-main" "col-3-main"; } .grid.split-column.split-column-3.layout-featured .col-1-main { padding: 0 20px; } .grid.split-column.split-column-3.layout-featured .col-3-main { grid-template-columns: 1fr; gap: 25px 0; } .grid.split-column.split-column-3.layout-split .col-1 { grid-area: col-1; } .grid.split-column.split-column-3.layout-split .col-2 { grid-area: col-2; } .grid.split-column.split-column-3.layout-split .col-3 { grid-area: col-3; } .grid.split-column.split-column-3.layout-split { grid-template-columns: 1fr 1fr; grid-template-areas: "col-1 col-2" "col-3 col-3"; gap: 20px 20px; } .article-row.layout-split.split-column-3 .col-3.article2 a .content { position: absolute; left: 0; bottom: 0; padding: 25px 25px; } .article-row.layout-split.split-column-3 .col-3.article2 a .content .content-inner, .section-wrapper .article2.alt.alt-ch a .content .content-inner { padding: 15px 20px; } .section-wrapper .article2.alt a { height: 100% !important; } .section-wrapper .article2.alt.height_700 a .image img { display: block; } .article .size40, .article2 .size40 { font-size: 24px; } .layout-split.split-column-2 .article2 a .image img { display: none !important; } .section-wrapper.issue .more-issues { display: block; padding-top: 20px; } .section-wrapper .article-row.layout-header { z-index: 999; z-index: 88; } .section-wrapper.issue .more-issues ul { width: 100%; } .section-wrapper.issue .more-issues ul li a { padding: 10px 10px; } .section-wrapper ul.masthead { grid-template-columns: 1fr 1fr; } .article .size40, .article2 .size40, .article .size36, .article2 .size36, .article .size34, .article2 .size34 { font-size: 18px; } .section-wrapper .article2.alt a { grid-auto-rows: 150px auto; } .article-row.layout-split.split-column-3 .article2 a { grid-auto-rows: 150px auto; } .article-row.layout-split.split-column-3 .col-3.article2 a { grid-auto-rows: 300px auto; } footer ul.staff li span { display: block; margin-bottom: 5px; } .login-wrapper.cols.grid { grid-template-columns: 1fr; grid-template-rows: 1fr; gap: 0 0; grid-template-areas: "col-1"; } .login-wrapper .content { padding: 30px 20px; } .login-wrapper .bottom { padding: 0 20px; } } @media only screen and (max-width: 480px) { :root { --font-size-87: 34px; --font-size-52: 32px; --font-size-38: 24px; --font-size-18: 16px; } .size44 { font-size: 24px; } .size32 { font-size: 20px; } .size28 { font-size: 20px; } .button { display: block; } .button a { width: 100%; } header .row-2 { padding-top: 40px; } header .row-2 .logo { max-width: 260px; } .home header .wrap-1 .row-1.grid { display: grid !important; } .home header .wrap-1 .col-2 { display: grid !important; } .home header .wrap-1 .logo a { display: block !important; opacity: 1 !important; } header .row-1.grid { grid-template-columns: 160px 1fr; grid-template-areas: "col-2 col-1"; gap: 0 30px; } header .row-1.grid .col-3 { display: none !important; } .home header .wrap-2.mobile-header { display: none; } header .row-1.grid .col-1 { justify-self: end; } .home header .row-1.grid .col-1 .wrap { text-align: right !important; } .page.home .col-spacing-top { padding-top: 0; } /*.flyout-wrapper .flyout-close a { font-size: 12px; }*/ .flyout-wrapper .flyout-content h4 { font-size: 10px; } .flyout-wrapper .flyout-content ul li a { font-size: 16px; } .col-spacing-top, .col-spacing, header .wrap-2, .search-wrapper, header .wrap-1 .member-bar { padding-left: 20px; padding-right: 20px; } .col-spacing-top { padding-top: 0; } .col-spacing-top .col-spacing { padding-left: 0; padding-right: 0; } .grid.split-column, .section-wrapper .layout-split.split-column-3, .section-wrapper .layout-layout-1.grid.split-column { grid-template-columns: 1fr; gap: var(--gap-width-3) var(--gap-width-3); } .section-wrapper .layout-left .article, .section-wrapper .layout-right .article { grid-template-columns: 1fr; } .section-wrapper .article.grid.article-image.article-image-right, .section-wrapper .article.grid.article-image.article-image-left, .section-wrapper .layout-featured .article { grid-template-columns: 1fr; grid-template-areas: "image" "content"; gap: var(--gap-width-medium) var(--gap-width-medium); } .section-wrapper .article a.grid.content.has-caption .category { grid-area: category; } .section-wrapper .article a.grid.content.has-caption .title { grid-area: title; } .section-wrapper .article a.grid.content.has-caption .description { grid-area: description; } .section-wrapper .article a.grid.content.has-caption .author { grid-area: author; } .section-wrapper .article a.grid.content.has-caption .caption { grid-area: caption; text-align: right !important; top: -20px; padding-bottom: 0 !important; } .section-wrapper .article a.grid.content.has-caption { grid-template-rows: auto auto auto auto auto; grid-template-areas: "caption" "category" "title" "description" "author"; } .section-wrapper .article-header.col-spacing { padding-top: 30px; } .section-wrapper .layout-layout-2.grid.split-column { grid-template-columns: 1fr; gap: var(--padding-height-x2) var(--gap-width-3); } .grid.split-column.column-side-border > .col::after, .section-wrapper .layout-layout-2.grid.split-column .col::after { position: absolute; top: calc((var(--padding-height-x2) / 2)*-1); left: 0 !important; display: block; content: ''; width: 100%; height: 0; border-top: 1px solid var(--colour4); border-left: 0px; } .grid.split-column.column-side-border > .col:first-of-type::after, .section-wrapper .layout-layout-2.grid.split-column .col:first-of-type:after { display: none; } .image-wrapper .image .image-description, .image-wrapper .image .image-caption { padding-left: 10px; padding-right: 10px; } .single .rows.content-main > .row + .row.article-image { margin-bottom: 15px !important; } /* .section-wrapper .layout-left-right .article2 a { display: block; height: 300px; } .section-wrapper .layout-left-right .article2 a .content { display: block; position: absolute; left: 0; bottom: 0; padding: 25px 25px; } .section-wrapper .layout-left-right .article2 a .content .content-inner { background: var(--colour2); padding: 15px 20px !important; max-width: 400px; }*/ .section-wrapper .social-sharing li a { width: 44px; height: 44px; line-height: 44px; } .article .size40, .article2 .size40 { font-size: 18px; } .article .size24, .article2 .size24 { font-size: 15px; } header .row-2 .logo { max-width: 190px; } .section-wrapper .article2 a.wide, .article-row.layout-split.split-column-3 .col-3.article2 a { height: 260px; } .article-row.layout-split.split-column-2 .article2 { background: var(--background2); } .article-row.layout-split.split-column-2 .article2 a { height: auto !important; } .article-row.layout-split.split-column-2 .article2 a .image img { height: auto; display: block !important; } .article-row.layout-split.split-column-2 .article2 a .content { position: relative; left: unset; bottom: unset; padding: 0; } .article-row.layout-split.split-column-2 .article2 a .content .content-inner { background: var(--background2); padding: 15px 0; max-width: 400px; } .section-wrapper form.newsletter .row.grid { gap: 20px 0; grid-template-columns: 1fr; } .section-wrapper form .field span.submit.submit-plain input[type="submit"] { height: 51px; } .search-wrapper .section-wrapper form .field span.submit.submit-plain input[type="submit"] { height: 100%; } .section-wrapper form .split.grid { grid-template-columns: 1fr; } .section-wrapper .last-subscription.grid { font-size: 14px; } .section-wrapper .last-subscription.grid .row .col.grid { grid-template-columns: 115px 1fr; } footer .row-1 .col-1 .logo img { max-width: 210px; margin: 0 auto; } footer .row-2 { grid-template-columns: 1fr 1fr; grid-template-areas: "col-1 col-1" "col-2 col-3" "col-4 col-4"; gap: 20px 40px; } footer .row-2 .menu ul { display: block; text-align: left; } footer .row-2 .menu ul li { display: block; margin: 0 0 5px 0; } footer .row-2 .menu ul li:first-child { margin-left: 0; } footer ul.staff li { text-align: left; } footer ul.staff li span { display: block; margin-bottom: 0; } footer .row-2 .col-4 { text-align: left !important; } footer .row-3 { grid-template-columns: 1fr; gap: 10px 0; } footer .row-3 .col-1 { display: block !important; text-align: left !important; } footer .row-3 a { display: inline-block; } } @media only screen and (max-width: 400px) { header .row-1.grid { grid-template-columns: 140px 1fr; } header .row-1 .menu a { font-size: 14px; } } @media only screen and (max-width: 360px) { :root { --font-size-87: 30px; } header .row-1.grid { grid-template-columns: 130px 1fr; } header .row-1 .menu a { font-size: 13px; } header .row-1 .menu a { margin-left: 10px; } .section-wrapper .sep::before { display: none; } .section-wrapper .publication-date { display: block; } .section-wrapper ul.masthead { grid-template-columns: 1fr; } footer .row-1 .col-1 .logo img { max-width: 180px; } } @media print { BODY { font-size: 13px !important; } h1.page-title { font-size: 30px !important; } .size24 { font-size: 18px !important; } p { padding-bottom: 15px; } #wpadminbar { display: none !important; } .section-wrapper { background: #fff; } header .wrap-1 { position: relative !important; } header .row-1.grid { grid-template-columns: 1fr; } header .content-width .col-1, header .content-width .col-3 { display: none !important; } header .content-width .col-2 { margin: 0 auto; } header .content-width .col-2 .logo { max-width: 230px; } .section-wrapper .article-header.col-spacing { padding-top: 50px; } .section-wrapper .social-sharing { display: none; } .section-wrapper .rows.rows-2.col-spacing.padding-top-none { display: none; } .single .content-main .subscribe { display: none; } .footer-wrapper .inner > .row-1, .footer-wrapper .inner > .row-2 { display: none !important; } }