/* Theme Name: Gender Justice Author: Teal Media Author URI: https://tealmedia.com Description: 2020 website theme for Gender Justice Version: 1.0 */ :root { --contain: 1010; --sx: 30px; --sy: 20px; --sn: 174px; --so: 24px; --s1: 40px; --s2: 60px; --s3: 80px; --s4: 100px; --s5: 120px; --nx: calc(var(--sx) * -1); --ny: calc(var(--sy) * -1); --vwx: calc(var(--vw, 1vw) * 100); --vhx: calc(var(--vh, 1vh) * 100); --ff_1: HK Grotesk,Helvetica Neue,Arial,sans-serif; --ff_2: Abril Fatface,Georgia,serif; --c_d1: #18414C; --c_d1t: var(--c_d1); /* default: dark-blue, text, headers */ --c_d2: #000000; --c_d2t: var(--c_d2); /* default: black, headers */ --c_d3: #10343E; --c_d3t: var(--c_d3); /* default: off-blue, footer */ --c_i1: #ffffff; --c_i1t: var(--c_i1); /* inverted: white, text */ --c_i2: #ffffff; --c_i2t: var(--c_i2); /* inverted: white, text */ --c_a1: #257587; --c_a1t: var(--c_a1); --c_a1a: #196474; --c_a1at: var(--c_a1a); /* accent: lighter dark-blue, links */ --c_a2: #F15B43; --c_a2t: var(--c_a2); --c_a2a: #ce4730; --c_a2at: var(--c_a2a); /* accent: orange, links hover */ --c_a3: #00A755; --c_a3t: var(--c_a3); --c_a3a: #1C8444; --c_a3at: var(--c_a3a); /* accent: green, header, backgrounds */ --c_b1: #ffffff; --c_b1t: var(--c_b1); /* background: white, default */ --c_b2: #f3f3f3; --c_b2t: var(--c_b2); /* background: light gray, alternative */ --c_b3: #C3D0D1; --c_b3t: var(--c_b3); /* background: light gray, alternative */ --c_b4: #B4B5B7; --c_b4t: var(--c_b4); /* background: darker gray, alternative */ --c_o1: #dddddd; --c_o1t: var(--c_o1); /* borders: gray, fields */ --c_o2: #aaaaaa; --c_o2t: var(--c_o2); /* borders: dark gray, fields:focus */ --c_e1: #ef4242; --c_e1t: var(--c_e1); /* error: red, fields */ --xw_1: calc(var(--contain) * 1px); --xw_2: 830px; --xw_3: 670px; --t8n_d1: 0.3s; --t8n_p1: border-color, background, background-size, box-shadow, transform, opacity, filter, clip-path, -webkit-clip-path; --t8n_p2: var(--t8n_p1), visibility; --t8n_e1: cubic-bezier(.5,0,0,1); --t8n_e2: cubic-bezier(.35,.6,.45,1); } body:where(.-s\:action) { --c_a3: var(--c_a2); --c_a3t: var(--c_a2); --c_a3a: var(--c_a2a); --c_a3at: var(--c_a2a); /* accent: green, header, backgrounds */ } @media screen and (max-width: 1023px) { :root { --sn: 70px; --s1: 30px; --s2: 45px; --s3: 60px; --s4: 75px; --s5: 90px; } } @media screen and (max-width: 719px) { :root { --sx: 20px; --sn: 60px; --so: 5px; } } @media print { :root { --so: 0px; } } @font-face { font-family: 'HK Grotesk'; font-weight: 400; font-style: normal; src: url('_assets/fonts/hkgrotesk/hkgrotesk-400.woff2') format('woff2'), url('_assets/fonts/hkgrotesk/hkgrotesk-400.woff') format('woff'); } @font-face { font-family: 'HK Grotesk'; font-weight: 400; font-style: italic; src: url('_assets/fonts/hkgrotesk/hkgrotesk-400i.woff2') format('woff2'), url('_assets/fonts/hkgrotesk/hkgrotesk-400i.woff') format('woff'); } @font-face { font-family: 'HK Grotesk'; font-weight: 500; font-style: normal; src: url('_assets/fonts/hkgrotesk/hkgrotesk-500.woff2') format('woff2'), url('_assets/fonts/hkgrotesk/hkgrotesk-500.woff') format('woff'); } @font-face { font-family: 'HK Grotesk'; font-weight: 700; font-style: normal; src: url('_assets/fonts/hkgrotesk/hkgrotesk-700.woff2') format('woff2'), url('_assets/fonts/hkgrotesk/hkgrotesk-700.woff') format('woff'); } @font-face { font-family: 'Abril Fatface'; font-weight: 400; font-style: normal; src: url('_assets/fonts/abrilfatface/abrilfatface-400.woff2') format('woff2'), url('_assets/fonts/abrilfatface/abrilfatface-400.woff') format('woff'); } @font-face { font-family: 'Icons'; font-weight: normal; font-style: normal; src: url('_assets/fonts/icomoon/fonts/icomoon.ttf?z8888v') format('truetype'), url('_assets/fonts/icomoon/fonts/icomoon.woff?z8888v') format('woff'), url('_assets/fonts/icomoon/fonts/icomoon.svg?z8888v#icomoon') format('svg'); } /* ______ _______ _______ _______ * |_____] |_____| |______ |______ * |_____] | | ______| |______ */ .root1 { position: relative; width: 100%; min-width: 320px; margin: 0; padding: 0; } .root1, .root1 *, .root1 *:before, .root1 *:after { box-sizing: border-box; } .root1-wrap { margin: 0; } @media screen { .-contain { max-width: 1210px; max-width: calc(var(--contain) * 1px + 2 * var(--sx)); margin-left: auto; margin-right: auto; border-left: 20px solid transparent; border-right: 20px solid transparent; border-left-width: var(--sx); border-right-width: var(--sx); } .-decontain { margin-left: calc(50% - var(--vw, 1vw) * 50); margin-right: calc(50% - var(--vw, 1vw) * 50); } .-recontain { margin-left: calc(50% - var(--vw, 1vw) * 50); margin-right: calc(50% - var(--vw, 1vw) * 50); padding-left: calc(var(--vw, 1vw) * 50 - 50%); padding-right: calc(var(--vw, 1vw) * 50 - 50%); } } @media print { .-contain { margin-left: auto; margin-right: auto; } } /* grid */ [g1] { --gc: 12; --gy: 20px; --gx: 20px; display: grid; grid-template-columns: repeat(var(--gc, 12), 1fr); grid-row-gap: var(--gy); margin-left: calc(var(--gx) / -2); margin-right: calc(var(--gx) / -2); padding: 0; } [g1~="end"] { align-items: end; }[g1~="middle"] { align-items: center; } [g1]>* { grid-column: var(--c, auto) / span var(--w, var(--gc, 12)); order: var(--o,0); margin-bottom: 0; margin-left: calc(var(--gx) / 2); margin-right: calc(var(--gx) / 2); } [g1]>*:before { display: none; } [g2] { --gc: 12; --gx: 20px; --gy: 20px; display: flex; flex-wrap: wrap; margin-top: calc(var(--gy,var(--gx)) * -1); margin-left: calc(var(--gx) / -2); margin-right: calc(var(--gx) / -2); padding: 0; pointer-events: none; } [g2~="inline"] { display: inline-flex; }[g2~="between"] { justify-content: space-between; }[g2~="end"] { align-items: flex-end; }[g2~="center"] { justify-content: center; }[g2~="middle"] { align-items: center; } [g2]>* { order: var(--o,0); width: calc(100% * (var(--w,0) / var(--gc, 12) * 0.9999)); min-width: 0; margin-bottom: 0; border: 1px solid transparent; border-width: var(--gy,var(--gx)) calc(var(--gx) / 2) 0; background-clip: padding-box; pointer-events: auto; } [g2]>[end] { align-self: flex-end } [g2]>*:before { display: none; } [w^="a/"]{width:auto}[w^="1/"]{--w:1}[w^="2/"]{--w:2}[w^="3/"]{--w:3}[w^="4/"]{--w:4}[w^="5/"]{--w:5}[w^="6/"]{--w:6}[w^="7/"]{--w:7}[w^="8/"]{--w:8}[w^="9/"]{--w:9}[w^="10/"]{--w:10}[w^="11/"]{--w:11}[w^="12/"]{--w:12} [c^="-1/"]{grid-column:span var(--w, var(--gc, 12))/-1}[c^="0/"]{--c:1}[c^="1/"]{--c:2}[c^="2/"]{--c:3}[c^="3/"]{--c:4}[c^="4/"]{--c:5}[c^="5/"]{--c:6}[c^="6/"]{--c:7}[c^="7/"]{--c:8}[c^="8/"]{--c:9}[c^="9/"]{--c:10}[c^="10/"]{--c:11}[c^="11/"]{--c:12} [o^="-1/"]{--o:-1}[o^="0/"]{--o:0}[o^="1/"]{--o:1}[o^="2/"]{--o:2}[o^="3/"]{--o:3} @media screen and (max-width: 719px) {[w^="0/"] { display: none; }} @media screen and (min-width: 720px) and (max-width: 1023px) {[w*="/0/"] { display: none; }} @media print, screen and (min-width: 720px){[w*="/a/"]{width:auto}[w*="/1/"]{--w:1}[w*="/2/"]{--w:2}[w*="/3/"]{--w:3}[w*="/4/"]{--w:4}[w*="/5/"]{--w:5}[w*="/6/"]{--w:6}[w*="/7/"]{--w:7}[w*="/8/"]{--w:8}[w*="/9/"]{--w:9}[w*="/10/"]{--w:10}[w*="/11/"]{--w:11}[w*="/12/"]{--w:12}[c*="/-1/"]{grid-column:span var(--w, var(--gc, 12))/-1}[c*="/0/"]{--c:1}[c*="/1/"]{--c:2}[c*="/2/"]{--c:3}[c*="/3/"]{--c:4}[c*="/4/"]{--c:5}[c*="/5/"]{--c:6}[c*="/6/"]{--c:7}[c*="/7/"]{--c:8}[c*="/8/"]{--c:9}[c*="/9/"]{--c:10}[c*="/10/"]{--c:11}[c*="/11/"]{--c:12}[o*="/-1/"]{--o:-1}[o*="/0/"]{--o:0}[o*="/1/"]{--o:1}[o*="/2/"]{--o:2}[o*="/3/"]{--o:3}} @media print, screen and (min-width: 1024px){[w$="/0"]{display:none}[w$="/a"]{width:auto}[w$="/1"]{--w:1}[w$="/2"]{--w:2}[w$="/3"]{--w:3}[w$="/4"]{--w:4}[w$="/5"]{--w:5}[w$="/6"]{--w:6}[w$="/7"]{--w:7}[w$="/8"]{--w:8}[w$="/9"]{--w:9}[w$="/10"]{--w:10}[w$="/11"]{--w:11}[w$="/12"]{--w:12}[c$="/-1"]{grid-column:span var(--w, var(--gc, 12))/-1}[c$="/0"]{--c:1}[c$="/1"]{--c:2}[c$="/2"]{--c:3}[c$="/3"]{--c:4}[c$="/4"]{--c:5}[c$="/5"]{--c:6}[c$="/6"]{--c:7}[c$="/7"]{--c:8}[c$="/8"]{--c:9}[c$="/9"]{--c:10}[c$="/10"]{--c:11}[c$="/11"]{--c:12}[o$="/-1"]{--o:-1}[o$="/0"]{--o:0}[o$="/1"]{--o:1}[o$="/2"]{--o:2}[o$="/3"]{--o:3}} /* reveal */ @media screen { [reveal^="1"] { transition-duration: 0.5s; transition-timing-function: ease; } [reveal^="2"] { transition-duration: 1s; } [r5s]:not([ready]) [reveal^="1+/"], [r5s] [reveal^="1/"]:not([revealed]) { opacity: 0; transform: translateY(30px); } [r5s]:not([ready]) [reveal^="2+/"], [r5s] [reveal^="2/"]:not([revealed]) { opacity: 0; } [reveal]{--rd:0;transition-delay:calc(var(--rd,0) * var(--rs, 0.1s))}[reveal$="/0"]{--rd:0}[reveal$="/1"]{--rd:1}[reveal$="/2"]{--rd:2}[reveal$="/3"]{--rd:3}[reveal$="/4"]{--rd:4}[reveal$="/5"]{--rd:5}[reveal$="/6"]{--rd:6}[reveal$="/7"]{--rd:7}[reveal$="/8"]{--rd:8}[reveal$="/9"]{--rd:9}[reveal$="/10"]{--rd:10} [aligned]{transition-delay:calc(var(--rd,0) * var(--rs, 0.1s) + var(--rq) * 0.1s)} } /* _______ _____ ______ _ _ _ _______ _______ * | | | | | | \ | | | |______ |______ * | | | |_____| |_____/ |_____| |_____ |______ ______| */ /** * @name .accordion1 * @description FAQ sections * @example { } */ .accordion1 { padding: 0; border-bottom: 1px solid var(--c_o1t); counter-reset: accordion1; } .accordion1-title { position: relative; margin: 0; padding: 20px 30px 20px 0; border-top: 1px solid var(--c_o1t); counter-increment: accordion1; } .accordion1-title:after { position: absolute; right: 0; top: 20px; content: '\e912'; font-family: Icons; } .accordion1-title.is-active:after { transform: rotate(180deg); } .accordion1-details { overflow: hidden; margin: 0; transition-property: height; } [js] .accordion1-details { height: 0; } .accordion1-title.is-active + .accordion1-details { height: var(--height, auto); } .accordion1-inner { padding: 0 0 var(--s1); } /** * @name .anchor1 * @description Localscroll helper * @example { } */ .anchor1 { --offset: calc(var(--st, 0px) * -1 - var(--s1)); overflow: hidden; height: 1px; margin: 0 0 -1px; } .anchor1-target { overflow: hidden; height: 1px; margin: var(--offset) 0 0; } @media screen and (max-width: 719px) { .anchor1 { --offset: calc(var(--st, 0px) * -1 - var(--s2)); } } /** * @name .background1 * @description Wrap background * @example { } */ .background1 { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; bottom: 0; margin: 0; } .background1-image { position: absolute; left: 0; top: 0; width: 100%; } .background1-image:after { position: absolute; left: 0; bottom: 0; content: ''; width: 100%; height: 200px; background: linear-gradient(transparent, currentColor); } @media screen and (max-width: 719px) { .background1-image:after { height: 15vw; } } /** * @name .block1 * @description Content block * @example { } */ .block1 { position: relative; padding-top: calc(var(--s1) * 0.75); } .block1:before { position: absolute; left: 0; top: 0; content: ''; width: 100%; border-top: 1px solid var(--c_a3t); transform-origin: 0 50%; transition-delay: inherit; } .block1-title { } .block1-title:before { display: block; content: '\e90d'; margin-bottom: var(--sy); color: var(--c_a3t); font: 20px/1 Icons; } /** * @name .body1 * @description Content wrapper * @example { } */ .body1 { } .body1 > * { max-width: var(--xw_3); } .body1 .wp-caption { margin: 0; /* browser reset */ max-width: 100%; } /* iOS does not obey max-width if width is set. */ .body1 .ios .wp-caption { width: auto !important; } .body1 dl.wp-caption dt.wp-caption-dt img { display: inline-block; margin-bottom: -1ex; } .body1 dl.wp-caption, .body1 dl.wp-caption * { -webkit-user-drag: none; } .body1 .wp-caption-dd { font-size: 14px; padding-top: 0.5em; margin: 0; /* browser reset */ } .body1 .aligncenter { display: block; margin-left: auto; margin-right: auto; } .body1 .alignleft { float: left; margin: 0.5em 1em 0.5em 0; } .body1 .alignright { float: right; margin: 0.5em 0 0.5em 1em; } /** * @name .box1 * @description Green content box * @example { } */ .box1 { position: relative; overflow: hidden; margin-bottom: var(--s3); background: currentColor; color: transparent; } .box1:before { position: absolute; left: 0; top: 0; content: '\e90d'; color: var(--c_a3a); font: 100px/1 Icons; pointer-events: none; } .box1:after { position: absolute; right: 0; bottom: 0; content: '\e90d'; color: var(--c_d1); font: 250px/1 Icons; pointer-events: none; transform: rotate(180deg); } .box1-inner { display: flex; position: relative; z-index: 1; color: var(--c_d1t); } .box1-main { min-width: 0; margin-bottom: 0; padding: var(--s3); } .box1-side { flex: none; min-width: 0; width: 390px; margin: 0; padding: var(--s3) var(--s1) var(--s3) 0; } .box1-image { margin: calc(var(--s3) * -1) calc(var(--s1) * -1) var(--s1) 0; } @media screen and (max-width: 1023px) { .box1-inner { display: block; } .box1-main { margin-bottom: 0; } .box1-side { width: 390px; margin-left: auto; } } @media screen and (max-width: 719px) { .box1-main { padding: var(--s2) var(--sx); } } @media screen and (max-width: 599px) { .box1 { margin-left: var(--nx); margin-right: var(--nx); } .box1-side { width: 100%; margin: 0; padding: 0 var(--sx) var(--s2); } .box1-image { margin: 0 var(--nx) var(--sy); } } @media print { .box1 { background: none; box-shadow: inset 0 0 0 2px; color: inherit; } .box1:after { font-size: 140px; } } /** * @name .card1 * @description Card * @example { } */ .card1 { max-width: 570px; } .card1-wrap { --atcn: 'inherit'; --atch: var(--atcn); display: flex; align-items: flex-end; font-weight: inherit } .card1-image { align-self: stretch; position: relative; width: 100%; min-width: 0; margin: 0 -100% 0 0; } .card1-image:after { position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ''; margin: 0; background: linear-gradient(rgba(37,117,135,0.00), rgba(40,40,40,0.60)); } .card1-image .img1 { height: 100%; } .card1-main { position: relative; width: 100%; max-width: 500px; min-width: 0; margin: 0; padding: 50px; } .card1-title { color: var(--c_i1); font: 400 48px/1.04 var(--ff_2); } @media screen and (max-width: 1023px) { .card1-main { padding: var(--s1); } .card1-title { font-size: 36px; } } @media screen and (max-width: 719px) { .card1 { max-width: 100%; } } @media print { .card1-image:after { display: none; } .card1-title { margin: -5px -10px; padding: 5px 10px; background: #fff; } .card1-title span { color: var(--c_d1); } } /** * @name .card2 * @description Ghost card * @example { } */ .card2 { } .card2-wrap { --aocn: #7DBEC9; --aoch: transparent; --aown: 2px; --atcn: 'inherit'; --atch: var(--c_i1); --abch: var(--c_a2); display: flex; flex-direction: column; justify-content: flex-end; position: relative; min-height: 350px; padding: var(--s1); box-shadow: inset 0 0 0 var(--aow) var(--aoc); font-weight: inherit } .card2-image[class] { position: absolute; left: var(--aown); right: var(--aown); top: var(--aown); bottom: var(--aown); width: auto; } a:hover .card2-image { opacity: 0; } .card2-image:after { position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(40, 40, 40, 0.76) 30%, rgba(24, 65, 76, 0)); mix-blend-mode: darken; } .card2-image ~ * { position: relative; } .card2-title { margin-bottom: var(--s1); } .card2-wrap:not(:hover) .card2-title .more1:after { opacity: 0; } .card2-title .more1:after { position: relative; top: -0.15em; margin-top: 0; vertical-align: baseline; } .card2-title + * { margin-top: auto; } @media screen and (max-width: 599px) { .card2-wrap { min-height: 250px; padding: var(--sx); } } /** * @name .card3 * @description Ghost card (home) * @example { } */ .card3 { } .card3-wrap { --aocn: #7DBEC9; --aoch: transparent; --aown: 2px; --atcn: 'inherit'; --atch: var(--c_i1); --abch: var(--c_a2); display: flex; align-items: center; justify-content: center; position: relative; min-height: 200px; padding: var(--s1); box-shadow: inset 0 0 0 var(--aow) var(--aoc); background: none; font-weight: inherit; text-align: center; } .card3-wrap:after { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; content: ''; margin: 0; background: var(--abch); opacity: 0; } .card3-wrap:hover:after { opacity: 1; } .card3-image { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; margin: 0; } .card3-image .img1 { height: 100%; } .card3-image .img1:after { position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ''; margin: 0; background: #282828; opacity: 0.5; } .card3-title { position: relative; z-index: 3; font: 700 20px/25px var(--ff_1); } .card3-wrap:hover .card3-title { transform: scale(1.1); } .card3-title:after { position: absolute; left: 0; right: 0; top: 100%; content: '\e904'; margin: 10px 0 0; font: 20px/1 Icons; opacity: 0; } .card3-wrap:hover .card3-title:after { opacity: 1; } @media screen and (max-width: 599px) { .card3-wrap { min-height: 120px; } .card3-title { font-size: 16px; line-height: 1.3; } .card3-title:after { display: none; } } @media print { .card3-image .img1:after { display: none; } .card3-title { margin: -3px -5px; padding: 3px 5px; background: #fff; } } /** * @name .content1 * @description Global content */ .content1 { margin-bottom: 0; } .content1:before { display: block; content: attr(data-warning); margin: 0; padding: 20px 40px; background: #b22; color: #fff; text-align: center; } @supports(--css: variables) { .content1:before { display: none; } } @media screen and (max-width: 599px) { .content1:before { padding: 15px 20px; font-size: 14px; } } /** * @name .embed1 * @description Responsive embeds */ .embed1 { display: block; position: relative; overflow: hidden; height: 0; padding-bottom: 56.25%; } .embed1 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /** * @name .error1 * @description Error page overlay */ .error1 { display: flex; align-items: center; position: fixed; left: 0; top: 0; z-index: 201; width: 100%; height: var(--vhx); margin: 0; background: #f2f2f2; text-align: center; } .error1-wrap { margin-left: auto; margin-right: auto; } .error1-code { margin: 0; font-size: 82px; line-height: 1; opacity: 0.2; } .error1-title { margin-bottom: 0; } .error1-info { margin-bottom: calc(var(--sy) / 2); } /** * @name .field1 * @description Underlined form fields * @example { } */ .field1[class] { --ocn: var(--c_a1t); --ocf: var(--ocn); --bcf: var(--bcn); --px: 0; box-shadow: inset 0 calc(var(--ow, 1px) * -1) 0 var(--oc); } /** * @name .float1 * @description Floating image * @example { } */ @media screen and (min-width: 600px) { .float1 { float: right; width: var(--w, 50%); margin-left: var(--sy); } .float1.-left { float: left; margin-left: 0; margin-right: var(--sy); } .float1 > img { display: block; } } /** * @name .footer1 * @description Global footer */ .footer1 { margin-bottom: 0; padding: var(--s3) 0; background: var(--c_d1t); } .footer1-wrap { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: var(--s2); } .footer1 .logo1 { margin-bottom: 30px; font-size: 45px; } .footer1 .logo1 .icon-logo:before { color: var(--c_i1); } .footer1 .socials1 { justify-content: space-between; } .footer1 .signup1 { order: 2; margin-bottom: 0; } .footer1-address { font: 500 14px/1.2 var(--ff_1); } .footer1-address[class] a { --atcn: var(--c_i1); --atch: var(--c_i1); } .footer1-copys { color: #B3B5B7; font: 500 14px/1.2 var(--ff_1); } .footer1-copys small { color: transparent; } .footer1-copys a { --atch: var(--c_i1); } .-s\:action .footer1 .logo1 { font-size: 64px; } @media screen and (max-width: 1279px) { .footer1-wrap { grid-column-gap: var(--s1); } } @media screen and (max-width: 719px) { .footer1-wrap { display: block; } .footer1-wrap .signup1 { margin-bottom: var(--s1); } } @media print { .footer1 { background: none; padding-bottom: 0; } .footer1 .logo1 .icon-logo:before { color: var(--c_d1); } .footer1-copys { color: var(--c_d1t); opacity: 0.35; } } /** * @name .footer1 * @description Global footer */ .footer2 { margin-bottom: 0; padding: var(--s3) 0; background: var(--c_d3t); } .footer2-wrap { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: var(--s2); } .footer2 .logo1 { grid-column: 1 / -1; margin-bottom: 30px; font-size: 64px; } .footer2 .logo1 .icon-logo:before { color: var(--c_i1); } .footer2 .socials1 { justify-content: space-between; } .footer2 .signup1 { order: 2; margin-bottom: 0; } .footer2-address { font: 500 14px/1.2 var(--ff_1); } .footer2-address[class] a { --atcn: var(--c_i1); --atch: var(--c_i1); } .footer2-copys { color: #B3B5B7; font: 500 14px/1.2 var(--ff_1); } .footer2-copys small { color: transparent; } .footer2-copys a { --atch: var(--c_i1); } @media screen and (max-width: 1279px) { .footer2-wrap { grid-column-gap: var(--s1); } } @media screen and (max-width: 719px) { .footer2-wrap { display: block; } .footer2-wrap .signup1 { margin-bottom: var(--s1); } } @media print { .footer2 { background: none; padding-bottom: 0; } .footer2 .logo1 .icon-logo:before { color: var(--c_d1); } .footer2-copys { color: var(--c_d1t); opacity: 0.35; } } /** * @name .gallery1 * @description Gallery * @example { } */ .gallery1 { overflow: hidden; max-width: none; } .gallery1-wrap { position: relative; width: calc(100% - var(--sx) * 2); max-width: var(--xw_1); margin: 0 auto; padding: 0 0 20px; border-bottom: 1px solid var(--c_o1t); } .gallery1-main { margin-bottom: 30px; } .gallery1 .tns-outer { margin-bottom: 0; } .gallery1 .tns-outer > .tns-ovh { overflow: visible; } .gallery1-entries { display: flex; overflow: auto; margin: 0; white-space: nowrap; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; vertical-align: top; } .gallery1-entries.tns-slider { transition-timing-function: var(--t8n_e1); } .gallery1-entries::-webkit-scrollbar { display: none; } .gallery1-entry { flex: none; width: 100%; margin: 0 100px 0 0; white-space: normal; scroll-snap-align: start; transition-duration: 0.5s; } [js] .gallery1-entry { width: auto; margin-right: 0; opacity: 0.5; } [js] .gallery1-entry.tns-slide-active { opacity: 1; } [js] .gallery1-entry figure { margin-bottom: 0; } [js] .gallery1-entry [caption] { display: none; } .gallery1[style*="--ar:"] .gallery1-entry .img1[class]:before { padding-bottom: calc(100% / var(--ar)); } .gallery1-arrow { --lh: 1; --aown: 0; --atcn: var(--c_d1t); --atch: var(--atcn); --aoph: 0.75; justify-content: center; align-items: center; position: absolute; left: 0.6em; bottom: 20px; z-index: 2; font: 20px/1 Icons; text-align: center; pointer-events: auto; text-decoration: none; } .gallery1-arrow.-prev { left: -0.2em; } .gallery1.-first .gallery1-arrow.-prev, .gallery1.-last .gallery1-arrow.-next { opacity: 0.2; pointer-events: none; } .gallery1-details { --sy: 12px; overflow: hidden; } .gallery1-counters { margin-top: 20px; text-align: right; } @media print, (min-width: 1024px) { .gallery1 { padding-left: 0; padding-right: 0; } .gallery1-main { position: relative; } .gallery1-arrow { --lh: 1; --aown: 0; --atcn: var(--c_d1t); --atch: var(--atcn); --aoph: 0.75; position: absolute; left: 100%; top: 50%; width: 100px; height: 1em; margin: -0.5em 0 0; font-size: 32px; } .gallery1-arrow.-prev { right: 100%; left: auto; } .gallery1.-last .gallery1-arrow.-next { transform: rotate(180deg); text-shadow: 7px 0 0; opacity: 0.2; pointer-events: auto; } .gallery1-details { display: flex; } .gallery1-title { flex: none; width: 18px; margin: 0 var(--s1) 0 0; } :root:not([js]) .gallery1-title { width: auto; } .gallery1-caption { flex-grow: 1; margin: 0; } .gallery1-counters { flex: none; margin: 0 0 0 var(--s2); } } /** * @name .grid1 * @description * @example { } */ .grid1 { --g1c: 2; --gx: var(--s3); --gy: var(--gx); overflow: hidden; margin-bottom: var(--s1); } .grid1-wrap { display: grid; grid-template-columns: repeat(var(--g1c), 1fr); grid-row-gap: var(--gy, var(--gx)); grid-column-gap: var(--gx); align-items: var(--g1align, start); margin-top: calc(var(--g1s, 0) * (var(--gy, var(--gx)) * -1 - 1px) + var(--g1a, 0) * (var(--gy, var(--gx)) + 1px)); } .grid1-wrap > * { margin-bottom: 0; padding-top: calc(var(--g1s, 0) * var(--gy)); border-top: calc(var(--g1s, 0) * 1px) solid var(--c_o1t); } .grid1.-s1 { --g1s: 1; } /* toggle separators */ .grid1.-sa { --g1a: 1; } /* show first row separators too */ @media screen and (max-width: 1023px) { .grid1 { --gx: var(--s2); } .grid1.-c1\div:first-child, .form1 .at-row, .form1 .iti-flag.us { margin-bottom: 0; } @media screen and (max-width: 1023px) { .form1 { margin-left: var(--nx); margin-right: var(--nx); padding: calc(var(--sx) * 1.5) var(--sx); } .form1[class] { max-width: none; } } @media print { .form1 { padding: 0; background: none; } } /** * @name .header1 * @description Page header * @example { } */ .header1 { display: flex; align-items: center; position: relative; overflow: hidden; min-height: 300px; margin-bottom: 0; padding: var(--s4) 0; background: currentColor; color: var(--c_d1t); } .header1.-bottom { align-items: flex-end; } .header1:before { position: absolute; left: 0; top: 0; z-index: 2; content: '\e90d'; color: var(--c_a3t); font: 140px/1 Icons; pointer-events: none; } .header1:after { display: none; position: absolute; right: 0; bottom: 0; z-index: 2; content: '\e90d'; color: var(--c_a3at); font: 300px/1 Icons; pointer-events: none; transform: rotate(180deg); } .header1-image { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; margin: 0; } .header1-image .img1 { height: 100%; } .header1-image .img1.-dark { background: #333; } .header1-wrap { position: relative; z-index: 3; width: 100%; } .header1.-clear:before, .header1.-clear:after { display: none; } .header1.-sizing1 { min-height: 500px; } .header1.-c\:a3:before { color: var(--c_d1); } .header1.-c\:a3:after { display: block; } .header1.-right:after { display: block; color: #10343E; } .header1.-noright:after { display: none; } @media screen and (max-width: 1023px) { .header1 { min-height: 35vw; padding: var(--s2) 0; } .header1.-sizing1 { min-height: 52.5vw; } .header1:before { font-size: 10vw; } .header1:after { font-size: 30vw; } } @media print { .header1[class] { min-height: 0px; background: none; box-shadow: inset 0 1px var(--c_o1t), 0 1px var(--c_o1t); color: inherit; } .header1:before, .header1:after { display: none !important; } .header1-image { display: none; } } /** * @name .hero1 * @description Homepage hero * @example { } */ .hero1[class] { padding: var(--s4) 0 20px; } .hero1-title { min-height: 200px; margin-bottom: var(--s5); } @media screen and (max-width: 1023px) { .hero1-title { min-height: 0px; } } @media print { .hero1 > .img1 { display: none; } .hero1-title { min-height: 0; } } /** * @name .highlight1 * @description Image with overlapping text * @example { } */ .highlight1 { } .highlight1-wrap { display: flex; } .highlight1-image { flex: none; width: 290px; margin: 0 0 0 -154px; } .highlight1-image-full { flex: none; width: 100%; margin: 0 0 0 0; } .highlight1-title { position: relative; min-width: 0; margin: 0 0 0 calc(var(--s3) * -1); text-align: right; } @media screen and (max-width: 1365px) { .highlight1-image { margin-left: calc(var(--offset-left, 154px) * -1 + var(--so)); } } @media screen and (max-width: 599px) { .highlight1-wrap { display: block; } .highlight1-image { width: auto; margin: 0 0 var(--sy); } .highlight1-title { margin: 0; text-align: left; } } /** * @name .img1 * @description Image wrapper */ .img1 { display: block; position: relative; overflow: hidden; width: 100%; } .img1[style*="--r:"]:before { display: block; content: ''; width: 100%; padding-bottom: calc(var(--r) * 100%); } .img1 img, .img1 video { display: block; width: 100%; } .img1[style*="--r:"] img { position: absolute; left: 0; top: 0; height: 100%; object-fit: cover; object-position: var(--x, 50%) var(--y, 50%); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .img1.-round img, .img1.-round video { border-radius: 50%; } .img1.-left { --x: 0; } .img1.-right { --x: 100%; } .img1.-top { --y: 0; } .img1.-bottom { --y: 100%; } .img1.-fit img, .img1.-fit video { height: 100%; object-fit: contain; } .img1.-zoom { transform: translateZ(0); } [mouse] a:hover .img1.-zoom img, [data-img1zoom]:hover .img1.-zoom img { transform: scale(1.1); } @media screen and (max-width: 599px) { .img1[style*="--r2:"]:before { padding-bottom: calc(var(--r2, var(--r)) * 100%); } } /** * @name .invalid1 * @description Validation message * @example { } */ .invalid1 { display: none; margin-top: 5px; color: var(--c_e1t); } .-validated:invalid ~ .invalid1, .-validated:invalid + label .invalid1, .invalid1.-visible { display: block; } /** * @name .links1 * @description Tab links */ .links1 { padding: 0; font: 700 30px/1.1 var(--ff_1); } .links1 li { --w: 6; } .links1 li a {--aown: 0.1em; --aocn: transparent; --aoch: transparent; --atcn: currentColor; } .links1 li.is-active > a { --aocn: var(--atcn); --atcn: var(--atch); } .links1.-underlines li > a { --aoch: currentColor; --atch: var(--atcn) } .links1.-underlines li.is-active > a { --atcn: currentColor; } @media screen and (max-width: 1023px) { .links1 { --gy: 10px; font: inherit; } .links1 li { --w: 12; } } /** * @name .links2 * @description Description * @example { } */ .links2 { padding: 0; border-top: 1px solid var(--c_o1t); font: 700 20px/1.1 var(--ff_1); text-transform: uppercase; } .links2 li { margin: 0; border-bottom: 1px solid var(--c_o1t); } .links2 li:before { display: none; } .links2 a { display: flex; justify-content: space-between; position: relative; padding: var(--s1) 0; } .links2 span { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0; background: #fff; opacity: 0; pointer-events: none; } .links2 a:hover span { opacity: 1; transform: scaleY(1.1); } .links2 span:before, .links2 span:after { position: absolute; left: 0; right: 0; bottom: 100%; content: ''; height: 20px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.05)); opacity: var(--o); } .links2 span:after { bottom: auto; top: 100%; transform: scaleY(-1); } .links2 strong { position: relative; font: inherit; transform-origin: 0 50%; } .links2 a:hover strong { transform: scale(1.05); } .links2 i { position: relative; margin: 0 20px 0 0; font-size: 1.2em; } .links2 a:not(:hover) i { opacity: 0; transform: translateX(-10px); } @media screen and (max-width: 719px) { .links2 { margin-left: var(--nx); margin-right: var(--nx); font-size: 16px; } .links2 a { padding: var(--sx); } .links2 i { display: none; } } /** * @name .list1 * @description Sidebar list * @example { } */ .list1 { padding: 0; border-top: 1px solid var(--c_o1t); } .list1 li { margin: 0; padding: 0.4em 0; border-bottom: 1px solid var(--c_o1t); } .list1 li:before { display: none; } /** * @name .loader1 * @description Loading spinner */ .loader1 { display: block; position: absolute; left: 50%; top: 50%; margin: -0.5em 0 0 -0.5em; color: rgba(0,0,0,0.25); font-size: 30px; animation: loader1 1s 1 linear; pointer-events: none; transition-property: var(--t8n_p2); } .img1.-dark .loader1, .loader1.-light { color: rgba(255,255,255,0.65); } .lazyloading ~ .loader1 { animation-iteration-count: infinite; } .lazyloaded ~ .loader1, html:not([js]) .loader1 { visibility: hidden; opacity: 0; animation-iteration-count: 1; } .loader1:before { display: block; content: ''; width: 1em; height: 1em; border: 0.1em solid; border-top-color: transparent; border-radius: 50%; } @media screen and (max-width: 599px) { .loader1 { font-size: 20px; } } @keyframes loader1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /** * @name .loader2 * @description Full screen loader */ .loader2 { visibility: hidden; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; margin: 0; background: rgba(0,0,0,0.35); font-size: 60px; transition-property: opacity, visibility; opacity: 0; } .loader2.is-active { visibility: visible; opacity: 1; } .loader2:after { position: absolute; left: 50%; top: 50%; content: ''; width: 1em; height: 1em; margin: -0.5em 0 0 -0.5em; border: 0.1em solid; border-top-color: transparent; border-radius: 50%; color: var(--c_i1t); animation: loader1 1s infinite paused linear; } .loader2.is-active:after { animation-play-state: running; } .loader2.-small { font-size: 32px; } .loader2.-static { display: none; position: relative; z-index: unset; margin-bottom: var(--sy); background: none; } .loader2.-static.is-active { display: block; } .loader2.-static:after { display: block; position: relative; left: 0; top: 0; margin: 0; color: var(--c_d1); opacity: 0.75; } @media screen and (max-width: 599px) { .loader2 { font-size: 40px; } .loader2.-small { font-size: 22px; } .loader2.-small:after { border-width: 3px; } } /** * @name .loadmore1 * @description Load more button * @example { } */ .loadmore1 { display: inline-flex; position: relative; vertical-align: top; } .loadmore1 > span { display: inline-flex; align-items: center; transition-property: opacity; } .loadmore1 > span i { display: inline-block; content: '\e904'; margin: 0 0 0 0.5em; font: 1.2em/1 Icons; vertical-align: top; } .loadmore1:hover > span i { animation: bounce 0.6s infinite ease; } .loadmore1 > span i:before { display: block; transform: rotate(90deg); } .loadmore1 > .loader1 { opacity: 0; animation-iteration-count: infinite; animation-play-state: paused; transition-property: opacity, animation; } .loadmore1[disabled] > span { opacity: 0; } .loadmore1[disabled] > .loader1 { animation-play-state: running; opacity: 1; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /** * @name .logo1 * @description Scallable logo wrapper * @example { } */ .logo1 { font-size: var(--dh, 60px); line-height: 1; } .logo1 a { --aown: 0; --aowh: 0; display: block; } .logo1 img, .logo1 svg { display: block; height: 1.5em; } .logo1 i { display: block; } .-s\:action .logo1 { --dh: 60px; } @media screen and (max-width: 1023px) { .logo1 { font-size: var(--mh, 40px); } .-s\:action .logo1 { --mh: 54px; } .logo1 img, .logo1 svg { height: 1em; } } @media screen and (max-width: 719px) { .logo1 { font-size: var(--mh, 34px); } .-s\:action .logo1 { --mh: 44px; } } @media screen and (max-width: 413px) { .logo1 { font-size: var(--mh, 30px); } } @media screen and (max-width: 359px) { .logo1 { font-size: var(--mh, 28px); } } /** * @name .logos1 * @description Logos list * @example { } */ .logos1 { overflow: hidden; } .logos1 ul { --gx: var(--s3); --gy: 30px; align-items: center; } .logos1 li { width: auto; } .logos1 a { --aoph: 0.7; display: block; width: 100%; } @media screen and (max-width: 599px) { .logos1 ul { --gy: var(--sy); } } /** * @name .more1 * @description Link with arrow */ .more1 { display: inline-block; font: inherit; vertical-align: top; } .more1:after { display: inline-block; content: '\e904'; margin: 0.5em 0 0 0.5em; font: 0.5em/1 Icons; vertical-align: top; } a.more1:hover:after, a:hover .more1:after { transform: translateX(10px); } /** * @name .more2 * @description Vertical see more link * @example { } */ .more2 { width: 158px; font: 700 25px/1.1 var(--ff_1); text-transform: uppercase; } .more2 a { --atcn: var(--c_i1); --atch: var(--tcn); --abcn: var(--c_a2); --abch: var(--c_a2a); display: flex; flex-direction: column; justify-content: space-between; padding: var(--s1); font-weight: inherit } .more2 a { color: #fff !important; } .more2 a span { margin-bottom: var(--sy); } .more2 a:hover i { transform: translateX(10px); } @media print { .more2 a { box-shadow: 0 0 0 1px; background: none; color: var(--c_a2t); } } /** * @name .moreblock1 * @description Wrapper with sidebar see more * @example { } */ .moreblock1 { position: relative; } .teaser2 + .moreblock1 { margin-top: -1px; } .moreblock1 .more2 { position: absolute; left: 100%; top: 0; bottom: 0; margin-left: 0px; } .moreblock1 .more2 a { height: 100%; } @media print, screen and (max-width: 1359px) { .moreblock1 .more2 { position: relative; left: auto; width: auto; margin: 20px calc(var(--offset-right) * -1) 0 0; } } @media screen and (min-width: 1360px) { .moreblock1 .teaser1:first-child:nth-last-child(2) .teaser1-link { min-height: 200px; } } @media print { .moreblock1 .more2 { margin-right: 0; } } /** * @name .nav1 * @description Primary navigation */ .nav1 { } @media print, screen and (min-width: 1024px) { .nav1-close { display: none; } .nav1-wrap { } .nav1-main { display: flex; margin: 0; padding: 0; font: 700 20px/1.15 var(--ff_1); text-transform: uppercase; } .nav1-main li { margin-bottom: 0; } .nav1-main li ~ li { margin-left: var(--s1); } .nav1-main li:before { display: none; } .nav1-main em { position: absolute; left: -10001px; top: -10001px; font-style: normal; } .nav1-main a { --atcn: var(--c_d1t); --atch: var(--atcn); --aown: 1px; --aocn: transparent; --aoch: currentColor; font: inherit; } .nav1-main .is-active > a, .nav1-main li.current-menu-item > a { --aocn: currentColor; } .nav1-side { display: flex; position: absolute; right: 0; top: 0; padding: 0; font-size: 16px; } .nav1-side li { display: flex; margin: 0 0 0 1px; } .nav1-side li:before { display: none; } .nav1-side .-link a { --abch: #DAEDF0; --atcn: var(--c_d1t); --atch: var(--atcn); display: flex; align-items: center; padding: 0 20px; } .nav1-side .-link.is-active a, .nav1-side .-link.current-menu-item a { --abcn: #DAEDF0; --atcn: var(--atcn); } .nav1-side .-link i { margin-right: 6px; font-size: 20px; } } @media print, screen and (min-width: 1024px) and (max-width: 1279px) { .nav1-main { font-size: 18px; } .nav1-main li ~ li { margin-left: 24px; } } @media screen and (max-width: 1023px) { .nav1 { position: absolute; left: 0; top: 100%; right: 0; visibility: hidden; background: #fff; opacity: 0; transition-property: var(--t8n_p2); } .is-nav-active .nav1 { visibility: visible; opacity: 1; } .nav1-wrap { position: relative; z-index: 2; box-shadow: 0 12px 14px 0 rgba(0,0,0,0.25); } .nav1 ul { margin-bottom: 0; padding: 0; font: 700 16px/1.25 var(--ff_1); } .nav1 li { margin: 0; border-top: 1px solid var(--c_o1t); } .nav1 li:before { display: none; } .nav1 li a { --atcn: var(--c_d1t); --atch: var(--atcn); --aown: 1px; --aocn: transparent; --aoch: currentColor; display: block; padding: 20px var(--sx); font: inherit; } .nav1 li.is-active > a { --aocn: currentColor; } .nav1 li em { display: none; } .nav1-wrap { } .nav1-main { text-transform: uppercase; } .nav1-side { border-top: 1px solid var(--c_d1t); } .nav1-side li:first-child { border-top-width: 0; } .nav1-side li.-button { display: none; } .nav1-side li a { --abcn: #DAEDF0; display: flex; align-items: center; } .nav1-side li i { flex: none; width: 1.5em; margin: 0 0.2em 0 -0.35em; font-size: 20px; line-height: 1; text-align: center; } } /** * @name .overlay1 * @description Nav overlay * @example { } */ .overlay1 { position: fixed; left: 0; top: 0; bottom: -100px; right: 0; z-index: 100; visibility: hidden; margin: 0; background: var(--c_d1t); opacity: 0; transition-property: var(--t8n_p2); pointer-events: none; } .is-nav-active .overlay1 { visibility: visible; opacity: 0.8; pointer-events: auto; } /** * @name .promo1 * @description 10 Years promo * @example { } */ .promo1 { } @media print { .promo1 > .img1 { display: none !important; } } /** * @name .promo2 * @description Promo * @example { } */ .promo2 { transition-property: background, color; pointer-events: none; } .promo2.-c\:a2:hover { color: var(--c_a2a); } .promo2 a { pointer-events: auto; } /** * @name .promo3 * @description Promo box * @example { } */ .promo3 { max-width: none; } .promo3 > .wrap1-inner { display: block; max-width: 100%; border-width: 0; } .promo3 > a.wrap1-inner:hover { background: var(--c_a3a); } .promo3-image { margin: 0; } .promo3-main { --sy: 12px; padding: var(--s1) var(--sx); } .promo3-title { margin-bottom: var(--sy); } .promo3-title i { font-size: 0.5em; } a:hover .promo3-title i { transform: translateX(10px); } .promo3 > .wrap1-inner:not(a) .promo3-title i { display: none; } @media print, (min-width: 720px) { .promo3 { margin-right: calc(var(--offset-right) * -1); } .promo3 > .wrap1-inner { display: grid; grid-template-columns: 57.5% auto; } .promo3-image { } .promo3-image .img1 { height: 100%; } .promo3-main { padding: var(--s2); } } /** * @name .scrolled1 * @description Horizontally scrolled container */ @media screen and (max-width: 1023px) { .scrolled1 { position: relative; margin-right: var(--nx); margin-left: var(--nx); } .scrolled1:after { position: absolute; right: var(--sx); bottom: -16px; content: ''; width: 18px; height: 24px; background: url(_assets/images/table1-icon1.png) no-repeat; background-size: contain; opacity: 0.75; pointer-events: none; animation: scrolled1 2s infinite; } .scrolled1-outer { overflow: auto; overflow-y: hidden; padding: 0; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .scrolled1-outer::-webkit-scrollbar { display: none; } .scrolled1-inner { min-width: 984px; } .scrolled1-inner table { width: 100%; } .scrolled1-inner tr > :first-child { border-left-width: 0; padding-left: var(--sx); } .scrolled1-inner tr > :last-child { border-right-width: 0; padding-right: var(--sx); } @keyframes scrolled1 { 0% { opacity: 0; transform: translate3d(0,0,0); } 60% { transform: translate3d(-20px,0,0); opacity: 0.75; } 80% { opacity: 0.75; } 100% { opacity: 0; transform: translate3d(-20px,0,0); } } } /** * @name .search1 * @description Search box * @example { } */ .search1 { position: absolute; left: 0; top: 0; right: 400px; z-index: 3; visibility: hidden; padding: var(--s1) var(--sx); background: var(--c_i1); box-shadow: 0 0 20px 5px rgba(0,0,0,0.10); transform: translateY(-100%); opacity: 0; transition-property: var(--t8n_p2); } .search1.is-active { visibility: visible; opacity: 1; transform: translateY(0); } .search1:target { visibility: visible; opacity: 1; transform: translateY(0); } .search1-close { position: absolute; right: 20px; top: 20px; color: inherit; box-shadow: none; } .search1-title[class] { margin-bottom: var(--sy); } .search1-fields { position: relative; } .search1-fields:before { display: flex; align-items: center; position: absolute; left: 0; top: 0; content: '\e90c'; height: 100%; padding: 3px 0 0; font: 24px/1 Icons; } .search1-fields input[type] { --ocn: var(--c_d1); --ocf: var(--c_a3); --bcf: transparent; padding-right: 35px; padding-left: 33px; box-shadow: inset 0 calc(var(--ow, 1px) * -1) var(--oc); outline: none; } .search1-fields button { --tcn: 'inherit'; --tch: var(--c_a2); position: absolute; right: 0; top: 0; min-width: 0; height: 100%; padding: 0; box-shadow: none; background: none; } @media screen and (max-width: 1023px) { .search1 { right: 0; top: calc(var(--sn) * -1); box-shadow: 0 12px 14px 0 rgba(0,0,0,0.1); transform: none; } } /** * @name .signup1 * @description Signup form * @example { } */ .signup1 { } .signup1 > * { --sy: 15px; } .signup1-fields { display: flex; justify-content: space-between; margin: 0; } .signup1-fields > span:first-child { display: block; width: 100%; height: 44px; line-height: 43px; border-bottom: 1px solid var(--c_a1t); } .signup1-fields input[type] { --h: 44px; } .signup1-fields .button1 { flex: none; margin: 0 0 0 20px; } .signup1-fields.-thanks { display: none; } .signup1-fields.-thanks .button1 { pointer-events: none; } .signup1.is-done .signup1-fields.-thanks { display: flex; } .signup1.is-done .signup1-fields.-fields { display: none; } /** * @name .skips1 * @description Skip links */ .skips1 { position: absolute; top: 100%; left: 0; z-index: 9999; list-style: none; width: 100%; height: 0; margin: -30px 0 0; padding: 0; text-align: center; } .skips1 li { position: absolute; left: 0; top: 0; width: 100%; height: 0; font: bold 50px/1 Calibri,Myriad Pro,Arial,Helvetica Neue,Helvetica,sans-serif; } .skips1 li:before { display: none; } .skips1 li a { display: inline-block; position: absolute; left: -10001px; margin: 0 auto; padding: 20px 30px; border: 1px dotted #fff; border-color: rgba(255,255,255,0.7); border-radius: 20px; background: #333; background: rgba(0,0,0,0.6); color: #fff; text-align: center; text-decoration: none; outline: none; } .skips1 li a:focus, .skips1 li a:active { position: relative; left: 0; } @media print, screen and (max-width: 1279px) { .skips1 { display: none; } } /** * @name .socials1 * @description Round social links * @example { } */ .socials1 { display: inline-flex; align-items: center; overflow: hidden; vertical-align: top; } .socials1-label { margin-bottom: 0; } .socials1-items { --gx: 40px; --gy: 20px; margin-bottom: 0; } .socials1-items li { width: auto; } .socials1-items a { --aown: 0; --abch: transparent; --atcn: 'inherit'; --atch: var(--atcn); --aoph: 0.7; font-size: 30px; line-height: 1; } .socials1 > *:not(:first-child) { margin-left: 30px; } .socials1.-small .socials1-items { --gx: 20px; } .socials1.-small .socials1-items a { font-size: 18px; } @media screen and (max-width: 599px) { .socials1 { width: 100%; justify-content: space-between; } .socials1-items { --gx: 24px; --gy: 10px; } .socials1-items a { font-size: 24px; } .socials1 > *:not(:first-child) { margin-left: 30px; } } /** * @name .split1 * @description Content split * @example { } */ @media print, screen and (min-width: 1024px) { .split1 { --w: 280px; --s: var(--s3); display: flex; justify-content: space-between; } .split1 > * { min-width: 0; margin: 0; } .split1-main { width: 590px; max-width: calc(100% - var(--w) - var(--s)); } .split1-side { flex: none; width: var(--w); } } @media screen and (max-width: 1023px) { .split1-main { margin-bottom: var(--s2); } } /** * @name .stat1 * @description Stata paragraph * @example { } */ .stat1 { padding-left: var(--s2); border-left: 1px solid; color: var(--c_a3t); } .stat1.-compact { padding-left: var(--s1); color: #00A755; } .stat1 strong { margin-bottom: 10px; color: inherit; } .stat1 span { color: var(--c_d1t); } /** * @name .stream1 * @description News stream */ .stream1 { } /** * @name .stream2 * @description Cards stream */ .stream2 { position: relative; } .stream2-outer { margin-left: -154px; } .stream2 .card1-wrap { height: 100%; } .stream2 .more2 { position: absolute; left: 100%; top: 0; bottom: 0; margin-left: 20px; } .stream2 .more2 a { height: 100%; } @media print, screen and (max-width: 1365px) { .stream2-outer { margin-left: calc(var(--offset-left, 154px) * -1 + var(--so)); } .stream2 .more2 { position: relative; left: auto; width: auto; margin: 20px calc(var(--offset-right) * -1) 0 0; } } @media screen and (max-width: 599px) { .stream2-outer { overflow: hidden; margin-left: var(--nx); margin-right: var(--nx); } } @media print { .stream2-outer { margin-left: 0; } .stream2 .more2 { margin-right: 0; } } /** * @name .stream3 * @description Get involved cards * @example { } */ .stream3 { overflow: hidden; border: 1px solid transparent; border-width: 0 var(--so); } .stream3.-full { border-width: 0; padding-left: 3px; padding-right: 3px; } .stream3-outer { max-width: 1440px; margin-left: auto; margin-right: auto; } .stream3-inner { margin-left: -2px; margin-right: -2px; } .stream3-entries { --gx: var(--s1); --gy: var(--gx); } .stream3-entries .card2 { width: 100%; max-width: 600px; } .stream3-entries .card2:nth-child(4n+3) { margin-left: auto; } .stream3-more { padding: 0 var(--sx) 7px; } @media print, (min-width: 1280px) { .stream3.-sidemore .stream3-entries .card2 { width: calc(50% - 120px); } .stream3.-sidemore .stream3-entries .more2 { flex-grow: 1; align-self: stretch; } .stream3.-sidemore .stream3-entries .more2 > a { height: 100%; } } @media print, screen and (max-width: 1279px) { .stream3-entries .card2 { max-width: 480px; } .stream3.-sidemore .stream3-entries .more2 { width: 100%; } } @media screen and (max-width: 1023px) { .stream3-entries .card2 { width: 50%; } } @media screen and (max-width: 599px) { .stream3-entries .card2 { width: 100%; } } @media print { .stream3-inner { margin-left: 0px; margin-right: 0px; } } /** * @name .stream4 * @description Homepage cards * @example { } */ .stream4 { overflow: hidden; } .stream4-outer { max-width: 1440px; margin-left: auto; margin-right: auto; } .stream4-inner { margin-left: -2px; margin-right: -2px; } .stream4-entries { --gx: 20px; --gy: var(--gx); } .stream4-entry { width: 100%; max-width: calc(290px + var(--gx)); } @media screen and (min-width: 1280px) { .stream4-entry:nth-child(8n+5) { margin-left: auto; } } @media print, screen and (max-width: 1279px) { .stream4-inner { padding-right: var(--sx); } .stream4-entry { max-width: 25%; } } @media screen and (max-width: 1023px) { .stream4-entry { max-width: 50%; } } @media screen and (max-width: 599px) { } /** * @name .tabs1 * @description Header tabs * @example { } */ .tabs1 { } @media print, screen and (min-width: 1024px) { .tabs1-nav { margin-bottom: var(--s1); } :root:not([js]) .tabs1-nav { display: none; } .tabs1-nav:after { display: block; content: ''; height: 1px; margin: 30px 0 0; background: currentColor; opacity: 0.35; } .tabs1-nav ul { --px: 30px; display: flex; justify-content: space-between; margin: 0 calc(var(--px) * -1); padding: 0; } .tabs1-nav li { min-width: 0; margin: 0; } .tabs1-nav li:before { display: none; } .tabs1-nav .button1[class] { --px: inherit; padding-left: var(--px); padding-right: var(--px); } :where(.tabs1.-dark) .tabs1-nav .button1[class] { --bcn: transparent; --bch: #10343E } .tabs1-nav .is-active .button1 { --bcn: var(--bch); } .tabs1-main { } .tabs1-tab { margin-bottom: var(--s1); } [js] .tabs1-tab { display: none; margin-bottom: 0; } [js] .tabs1-tab.is-active { display: block; } [js] .tabs1-tabtitle { display: none; } } @media screen and (max-width: 1023px) { .tabs1-nav { display: none; } .tabs1-main { margin: 0 var(--nx); border-top: 1px solid; } .tabs1-tab { margin-bottom: 0; padding: 20px var(--sx); border-bottom: 1px solid; } .tabs1-tabtitle { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; } .tabs1-tabtitle:after { display: inline-block; flex: none; content: '\e904'; margin: 0 0 0 20px; font: 1em/1 Icons; transform: rotate(90deg); } .tabs1-tab.is-mobile-active .tabs1-tabtitle:after { transform: rotate(-90deg); } .tabs1-tabinner { padding-top: 15px; padding-left: 20px; } .tabs1-tab:not(.is-mobile-active) .tabs1-tabinner { display: none; } } @media print { .tabs1-nav ul { margin-left: 0; margin-right: 0; } .tabs1-nav .button1[class] { --opn: 0.35; } .tabs1-nav .is-active .button1[class] { --opn: 1; } } /** * @name .team1 * @description Team grid * @example { } */ .team1 { position: relative; overflow: hidden; margin-bottom: var(--s5); } .team1-entries { --gx: var(--s5); --gy: var(--s4); margin-top: calc(var(--gy) * -1); } .team1-entry { --a: 0; width: 50%; } :root:not([js]) .team1-entry { width: 100%; } .team1-entry.is-active { --a: 1; } .team1-entry:hover { --a: 1; } .team1-header { position: relative; z-index: 2; margin: 0; padding: 0 0 30px; box-shadow: inset 0 -1px var(--c_o1t); cursor: pointer; } .team1-header:after { position: absolute; left: 0; bottom: 0; content: ''; width: 100%; height: 3px; background: var(--c_a3t); transform: scaleX(var(--a)); transform-origin: 0 50%; } .team1-name { margin-bottom: 3px; } .team1-title { margin-bottom: 10px; } .team1-gender { margin-bottom: 5px; } .team1-toggle { margin-top: 30px; color: var(--c_a1t); font: 700 16px/1.1 var(--ff_1); } .team1-toggle span:before { display: inline-block; content: '+'; width: 15px; padding-right: 5px; text-align: center; } .team1-entry.is-active .team1-toggle span:before { content: '-'; } .team1-toggle span:after { content: attr(data-off); } .team1-entry.is-active .team1-toggle span:after { content: attr(data-on); } .team1-details { position: absolute; left: 0; right: 0; top: auto; z-index: 1; overflow: hidden; height: 0; margin: 0; } :root:not([js]) .team1-details { position: relative; left: auto; right: auto; height: auto; } .team1-wrap { position: relative; padding: var(--s2) 0; border-bottom: 1px solid var(--c_o1t); } .team1-split { display: flex; } .team1-image { flex: none; width: 100%; max-width: 250px; margin: 0 var(--s2) 0 0; } .team1-main { flex-grow: 1; margin: 0; } .team1 [expander] { height: 0; margin: 0; } @media screen and (max-width: 1279px) { .team1-entries { --gx: 40px; --gy: var(--gx); } } @media screen and (max-width: 1023px) { .team1-image { max-width: 180px; } } @media screen and (max-width: 719px) { .team1-wrap { padding-top: var(--s1); padding-bottom: var(--s1); } } @media screen and (max-width: 599px) { .team1-entries { --gx: 30px; } .team1-entry { width: 100%; } .team1-split { display: block; } .team1-image { margin: 0 0 var(--s1); } } /** * @name .team2 * @description Team columns * @example { } */ .team2 { } .team2-items { padding: 0; columns: 4; } .team2-items li { min-height: 65px; } .team2-items li:before { display: none; } .team2-items a { --atcn: 'inherit'; } @media screen and (max-width: 1023px) { .team2-items { columns: 3; } } @media screen and (max-width: 599px) { .team2-items { columns: 2; } } /** * @name .teaser1 * @description News teaser * @example { } */ .teaser1 { margin-bottom: var(--s2); box-shadow: inset 0 1px var(--c_o1t), inset 0 -1px var(--c_o1t); } .teaser1 + .teaser1 { margin-top: calc(var(--s2) * -1 - 1px); } .teaser1-link { --o: 0; display: flex; position: relative; padding-right: var(--s3); color: inherit; font-weight: normal; } /* .teaser1-link:hover { --o: 1; z-index: 1; } */ .teaser1-link:before, .teaser1-link:after { position: absolute; left: 0; right: 0; bottom: 100%; content: ''; height: 20px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.05)); opacity: var(--o); } .teaser1-link:after { bottom: auto; top: 100%; transform: scaleY(-1); } .teaser1-image { flex: none; min-width: 0; width: 240px; margin: 0 var(--s2) 0 0; } .teaser1-image .img1 { height: 100%; } .teaser1-main { --sy: 15px; flex-grow: 1; align-self: center; max-width: var(--xw_2); padding: var(--s1) 0; } .teaser1-main:before { position: absolute; right: 30px; top: 50%; content: '\e904'; margin: -0.5em 0 0; color: var(--c_a2t); font: 24px/1 Icons; vertical-align: top; opacity: var(--o); transform: translateX(calc(var(--o) * 10px)); } .teaser1-title { margin-bottom: var(--sy); color: var(--c_a1t); transition-property: var(--t8n_p1), color; } .teaser1-link:hover .teaser1-title { color: var(--c_a2t); } @media screen and (max-width: 1023px) { .teaser1-link { padding-right: var(--s1); } .teaser1-image { width: 160px; margin-right: var(--s1); } .teaser1-main:before { display: none; } } @media screen and (max-width: 599px) { .teaser1-image { display: none; } .teaser1-main { padding: var(--sx) 0; } } /** * @name .teaser2 * @description News/resource teaser * @example { } */ .teaser2 { margin-bottom: var(--s2); box-shadow: inset 0 1px var(--c_o1t), inset 0 -1px var(--c_o1t); } .teaser2 + .teaser2 { margin-top: calc(var(--s2) * -1 - 1px); } .teaser2-link { --o: 0; display: flex; flex-direction: row-reverse; position: relative; color: inherit; font-weight: normal; } .teaser2-link:hover { --o: 1; z-index: 1; } .teaser2-link:before, .teaser2-link:after { position: absolute; left: 0; right: 0; bottom: 100%; content: ''; height: 20px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.05)); opacity: var(--o); } .teaser2-link:after { bottom: auto; top: 100%; transform: scaleY(-1); } .teaser2-image { flex: none; min-width: 0; width: 240px; margin: 0 0 0 var(--s2); } .teaser2-image .img1 { height: 100%; } .teaser2-main { --sy: 15px; flex-grow: 1; align-self: center; max-width: var(--xw_2); margin: 0 auto 0 0; padding: var(--s1) 0; } .teaser2-title { margin-bottom: var(--sy); color: var(--c_a1t); transition-property: var(--t8n_p1), color; } .teaser2-link:hover .teaser2-title { color: var(--c_a2t); } .teaser2-title i { color: var(--c_a2t); font-size: 0.75em; vertical-align: baseline; opacity: var(--o); transform: translateX(calc(var(--o) * 10px)); } @media screen and (max-width: 1023px) { .teaser2-image { width: 160px; margin-left: var(--s1); } } @media screen and (max-width: 599px) { .teaser2-image { display: none; } .teaser2-main { padding: var(--sx) 0; } } /** * @name .theme1 * @description Inverted theme * @example { } */ @media screen { .theme1 { --c_d1t: #fff; --c_d2t: #fff; --c_o1t: #333; --c_o2t: #555; color: var(--c_d1t); } .-c\:a3 .theme1 { --c_a2t: var(--c_d1); } } /** * @name .timeline1 * @description Description * @example { } */ .timeline1 { overflow: hidden; } .timeline1-list { } .timeline1-list li { width: 10%; min-width: calc(50px + var(--gx)); } /** * @name .title1 * @description Title split * @example { } */ .title1 { } .title1-main a { color: inherit; font: inherit; } .title1-main span { display: block; } @media print, screen and (min-width: 1024px) { .title1 { display: flex; } .title1-main { flex: none; width: 300px; min-width: 0; margin: 0 20px 0 0; } .title1-side { flex: 1 0 0; min-width: 0; margin-bottom: 0; } .title1.-half { justify-content: space-between; } .title1.-half > * { width: calc(50% - 20px); margin: 0; } } /** * @name .top1 * @description Global header */ .top1 { position: relative; z-index: 101; margin: 0; padding: 44px 0 0; background: #fff; } .top1:before { position: absolute; left: 0; top: 44px; right: 0; content: ''; height: 1px; background: var(--c_o1t); } .top1-wrap { --sx: 70px; display: flex; justify-content: space-between; align-items: center; min-height: calc(var(--sn) - 44px); } .top1 .logo1 { align-self: center; margin-bottom: 0; } .top1 .nav1 { margin-bottom: 0; } .top1-action { display: none; } .top1-toggler { display: none; } @media screen and (max-width: 1279px) { .top1-wrap { --sx: inherit; } } @media screen and (max-width: 1023px) { .top1 { padding-top: 0; } .top1:before { display: none; } .top1-wrap { min-height: var(--sn); } .top1-action { display: block; margin: 0 0 0 auto; } .top1-action .button1 { --h: var(--sn); } .top1-toggler { display: block; margin: 0 0 0 var(--sx); font-size: 24px; line-height: 1; } .top1-toggler a { display: block; min-width: 1.43em; color: inherit; text-align: center; } .top1-toggler a:before { display: block; } .is-nav-active .top1-toggler a:before { content: '\e906'; transform: scale(1.3); } } @media screen and (max-width: 719px) { .top1-toggler { font-size: 20px; } } @media screen and (max-width: 413px) { .top1 .logo1 { margin-left: -5px; } .top1-action { } .top1-action .button1 { --px: 20px; min-width: 0; font-size: 16px; } .top1-toggler { font-size: 18px; } } @media screen and (max-width: 359px) { .top1 .logo1 { margin-left: -10px; } .top1-action .button1 { --px: 15px; font-size: 15px; } .top1-toggler { font-size: 16px; } } /** * @name .wrap1 * @description Content wrapper */ .wrap1 { position: relative; margin-bottom: 0; padding: var(--s3) 0; background: currentColor; color: transparent; } .wrap1 > .img1 { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0; } .wrap1 > .img1:before { display: none; } .wrap1-inner { position: relative; color: var(--c_d1t); } @media screen { .wrap1.-stroke { border: var(--so) solid var(--c_d1t); } .wrap1.-without-top { border-top-width: 0; } } @media print { .wrap1 { box-shadow: inset 0 1px var(--c_o1t), 0 1px var(--c_o1t); background: none; color: inherit; } .wrap1 > .img1 { display: none; } } /* ______ _ _ _______ _______ _____ __ _ _______ * |_____] | | | | | | | \ | |______ * |_____] |_____| | | |_____| | \_| ______| */ .button1, [type="submit"], [type="button"], [type="reset"] { --w: 130px; --h: 44px; --lh: 20px; --px: 25px; --py: 7px; --bcn: var(--c_a1t); --bch: var(--c_a1at); --own: 1px; --orn: 0; --ocn: var(--bc); --tcn: var(--c_i1); --tch: var(--c_i1); --ow: var(--own); --oc: var(--ocn); --or: var(--orn); --bc: var(--bcn); --tc: var(--tcn); --op: var(--opn, 1); } .button1, [type="submit"], [type="button"], [type="reset"] { display: inline-flex; justify-content: center; align-items: center; min-width: var(--w); height: auto; min-height: var(--h); padding: var(--py) var(--px); border: none; border-radius: var(--or); box-shadow: inset 0 0 0 var(--ow) var(--oc); background: var(--bc); color: var(--tc); font: 700 20px/var(--lh) var(--ff_1); text-align: center; text-decoration: none !important; text-transform: uppercase; opacity: var(--op); transition-property: var(--t8n_p1), color; } input[type="submit"] { --bcf: var(--bcn); } .button1:hover, [type="submit"]:hover, [type="button"]:hover, [type="reset"]:hover { --oc: var(--och, var(--ocn)); --bc: var(--bch, var(--bcn)); --tc: var(--tch, var(--tcn)); --op: var(--oph, var(--opn, 1)); color: var(--tc); } .button1 > span:not(:first-child) { margin-left: 5px; } .button1 > span:not(:last-child) { margin-right: 5px; } .button1.-round { --px: 35px; border-radius: calc(var(--h) / 2); } .button1.-ghost { --ocn: var(--tcn); --bcn: transparent } .button1.-medium { --h: 50px; --py: 10px } .button1.-orange { --bcn: var(--c_a2); --bch: var(--c_a2at); } .button1.-green { --bcn: var(--c_a3); --bch: var(--c_a3at); } .button1.-to-white { --bch: var(--c_i1); --tch: var(--c_d1); } @media print { .button1 { background: none; color: var(--bcn); } } .button1.-green a { color: white;} /* _____ ______ ______ __ _ _______ * | | | | | \ | |______ * __|__ |_____ |_____| | \_| ______| */ [class^="icon-"],[class*=" icon-"] { display: inline-block; font-family: 'Icons' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; } [class^="icon-"]:before, [class^="icon-"]:after, [class*=" icon-"]:before, [class*=" icon-"]:after { transition-property: var(--t8n_p1); } [class^="icon-"] i, [class*=" icon-"] i { font: inherit; } [class^="icon-"] span, [class*=" icon-"] span { display: none; } .icon-logo:before { content: "\e908"; color: rgb(22, 65, 77); } .icon-logo:after { content: "\e909"; margin-left: -5.3115234375em; color: rgb(0, 167, 81); } .icon-angle-down-bold:before { content: "\e910"; } .icon-angle-down-light:before { content: "\e911"; } .icon-angle-down-medium:before { content: "\e912"; } .icon-angle-left-bold:before { content: "\e913"; } .icon-angle-left-light:before { content: "\e914"; } .icon-angle-left-medium:before { content: "\e915"; } .icon-angle-right-bold:before { content: "\e916"; } .icon-angle-right-light:before { content: "\e917"; } .icon-angle-right-medium:before { content: "\e918"; } .icon-angle-up-bold:before { content: "\e919"; } .icon-angle-up-light:before { content: "\e91a"; } .icon-angle-up-medium:before { content: "\e90f"; } .icon-download-medium:before { content: "\e90e"; } .icon-instagram:before { content: "\e900"; } .icon-youtube:before { content: "\e901"; } .icon-twitter:before { content: "\e902"; } .icon-facebook:before { content: "\e903"; } .icon-arrow-right:before { content: "\e904"; } .icon-check:before { content: "\e905"; } .icon-close:before { content: "\e906"; } .icon-envelope:before { content: "\e907"; } .icon-menu:before { content: "\e90a"; } .icon-news:before { content: "\e90b"; } .icon-search:before { content: "\e90c"; } .icon-triangle:before { content: "\e90d"; } /* ______ _______ _______ _______ _ _ _ _______ _______ * | \ |______ |______ |_____| | | | | |______ * |_____/ |______ | | | |_____| |_____ | ______| */ *, *:before, *:after { margin: 0; padding: 0; color: inherit; transition: none var(--t8n_d1) ease; transition-property: var(--t8n_p1); } :root:not([ready]) *, :root:not([ready]) *:before, :root:not([ready]) *:after { transition: none !important; } html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { font: inherit; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } div, form, fieldset, blockquote, article, aside, details, figcaption, figure, footer, header, menu, nav, main, section, address, ul, ol, dl, dd, dt, p, table, pre, h1, h2, h3, h4, h5, h6 { display: block; margin-bottom: 1rem; margin-bottom: var(--sy); } body > :not(.root1), body > :not(.root1) div, body > :not(.root1) form { margin-bottom: 0; } @page { margin: 40px; } @media print { body { width: 1024px; margin: 0 auto; background: #fff; } } /* forms */ fieldset { min-width: 0; padding: 0; border: none; } label { cursor: pointer; vertical-align: middle; } label:first-child { display: block; margin: 0 0 5px; } label em { color: #f00; font-style: inherit; } input, textarea, select { --h: 50px; --lh: 20px; --px: 15px; --py: calc((var(--h) - var(--lh)) / 2); --bcn: transparent; --bcf: rgba(150,150,150,0.1); --ocn: var(--c_o1t); --ocf: var(--c_o2t); --tcn: var(--c_d1t); --pcn: #aaa; --oc: var(--ocn); --or: var(--orn); --ow: var(--own); --bc: var(--bcn); --tc: var(--tcn); --pc: var(--pcn); } input:hover, textarea:hover, select:hover { --oc: var(--och, var(--ocn)); --bc: var(--bch, var(--bcn)); --tc: var(--tch, var(--tcn)); } input:focus, textarea:focus, select:focus { --oc: var(--ocf, var(--ocn)); --bc: var(--bcf, var(--bcn)); --tc: var(--tcf, var(--tcn)); } input[type=text], input[type=password], input[type=search], input[type=email], input[type=tel], input[type="checkbox"], input[type="radio"], textarea, select { width: 100%; height: var(--h); padding: var(--py) var(--px); border: none; border-radius: var(--or, 0); box-shadow: inset 0 0 0 var(--ow, 1px) var(--oc); background: var(--bc); color: var(--tc); font: 18px/var(--lh) var(--ff_1); vertical-align: top; -webkit-appearance: none; -moz-appearance: none; } input::-ms-clear { display: none; } textarea { overflow: auto; height: auto; resize: vertical; } textarea[data-autoresize] { min-height: var(--h); max-height: calc(var(--h) * 3); } select { padding: calc(var(--py) - 1px) calc(var(--px) - 1px); padding-right: 60px; background: url(_assets/images/select1.svg) right 20px center no-repeat; background-color: var(--bc); background-size: 14px 8px; line-height: normal; text-indent: 1px; text-overflow: ''; } select::-ms-expand { display: none; } .firefox select { padding-left: calc(var(--px) - 6px); } button, input[type="submit"], input[type="button"], input[type="reset"] { overflow: visible; cursor: pointer; -webkit-appearance: button; } button::-moz-focus-inner { padding: 0; border: none; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { --s: 1.25rem; --tc: var(--c_d1t); display: inline-block; position: relative; width: var(--s, 20px); height: var(--s, 20px); margin: 0 5px 0 0; padding: 0; text-align: center; vertical-align: middle; } input[type="radio"] { --hb: 98%; --orn: 50%; --bs: '●'; --fm: 1; --tb: none; } input[type]:checked:before { display: flex; justify-content: center; align-items: center; position: absolute; left: 0; content: var(--bs,'L'); width: 100%; height: var(--hb, 90%); color: inherit; font: 700 calc(var(--s, 20px)* var(--fm, 0.8))/1 Helvetica Neue,Helvetica,Arial,sans-serif; transform: var(--tb, scaleX(-1) rotate(-45deg)); } .edge input[type]:checked:before { content: 'L'; } input::-ms-check { border: none; background: transparent; color: var(--tc); } @media screen and (max-width: 1023px) { input[type="radio"] { --hb: 90%; } .safari input[type="radio"] { --hb: 94%; } } ::-webkit-input-placeholder { color: var(--pc); font-style: normal; line-height: normal; opacity: 1; } :-ms-input-placeholder { color: var(--pc); font-style: normal; opacity: 1; } ::-moz-placeholder { color: var(--pc); font-style: normal; opacity: 1; } select:invalid, select.is-placeholder { color: var(--pc); } .-validated:invalid, .-validated:invalid + label, .-validated:invalid + label:before { --oc: var(--c_e1t); color: var(--c_e1t); } /* tables */ table { display: table; border-collapse: collapse; border-spacing: 0; } th, td { padding: 9px 19px; border: 1px solid var(--c_o1t); text-align: left; vertical-align: top; } thead th { padding-top: 14px; padding-bottom: 14px; background: var(--c_o1t); font-size: 0.86rem; text-transform: uppercase; } /* lists */ ul, ol, dd, blockquote { padding-left: 40px; } ol, ul { list-style: none; counter-reset: ordered; } li { margin-bottom: 10px; counter-increment: ordered; } ol > li:before { position: absolute; content: counter(ordered) '.'; width: 15px; margin: 0 0 0 -30px; text-align: right; } ul > li:before { float: left; overflow: hidden; content: '\2022'; margin: 0 0 0 -25px; } dt { margin-bottom: 5px; font-weight: bold; } dd { padding-left: 0; } /* links */ a { --atcn: var(--c_a1t); --atch: var(--c_a2t); /**/ --aow: var(--aown); --aoc: var(--aocn); --abc: var(--abcn); --atc: var(--atcn); --aop: var(--aopn, 1); box-shadow: 0 var(--aow, 0) 0 0 var(--aoc, 'currentColor'); background: var(--abc, transparent); color: var(--atc, 'currentColor'); font-weight: 700; text-decoration: none; opacity: var(--aop); transition-property: var(--t8n_p1), color; } a:hover { --aow: var(--aowh, var(--aown)); --aoc: var(--aoch, var(--aocn)); --abc: var(--abch, var(--abcn)); --atc: var(--atch, var(--atcn)); --aop: var(--aoph, var(--aopn, 1)); } a * { cursor: pointer; } /* images */ figure { } img { max-width: 100%; border-width: 0; box-sizing: content-box; } figure img { display: inline-block; vertical-align: top; } figcaption { margin-top: 10px; } /* other */ blockquote { position: relative; overflow: hidden; padding-left: 200px; } blockquote:before { display: block; position: absolute; left: 0; top: 160px; content: ''; width: 1px; height: 160px; margin: -160px 0 0; background: currentColor; transform: skewX(-45deg); transform-origin: 0 100%; } blockquote q { display: block; } cite { display: block; margin-top: 15px; font: inherit; } pre { padding: 10px; border: 1px solid var(--c_o1t); background: var(--c_b2t); font: 14px/1.2 Consolas,Monaco,Courier New,monospace; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } code { padding: 2px 4px; background-color: #f9f2f4; color: #c7254e; font-size: 80%; white-space: nowrap; } hr { overflow: hidden; width: auto; height: 1px; margin: var(--s2) 0; border: none; border-top: 1px solid; background: none; color: var(--c_o1t); font-size: 0; } sup, sub { font-size: 0.6875em; vertical-align: top; } sub { vertical-align: bottom; } b, strong { font-weight: bolder; } mark { padding: 0 2px; background-color: rgba(255,228,0,0.25); } abbr { border-bottom: 1px dotted; text-decoration: none; } ins { border-bottom: 1px dotted green; text-decoration: none; } @media screen and (max-width: 599px) { blockquote { position: relative; overflow: hidden; padding-left: var(--sx); border-left: 1px solid; } blockquote:before { display: none; } } /* other */ [mouse] *:focus { outline: none; } [toggle], [clickable] { cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); } [hidden], [js] [noscript], :root:not([js]) [scripted], [x-cloak]:not(:target), [js] [cloaked] { display: none !important; } [invisible] { position: absolute; overflow: hidden; width: 1px; height: 1px; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); } [disabled] { pointer-events: none; opacity: 0.4; } [disabled] [disabled] { opacity: 1; } /* first/last margins */ body :last-child { margin-bottom: 0; } /* _ _ _______ ______ _______ * \ / |_____| |_____/ |______ * \/ | | | \_ ______| */ /* text styling */ html, h1, h2, h3, h4, h5, h6, blockquote, cite, figcaption, [class*="-t:"] { font: 18px/1.44 var(--ff_1); letter-spacing: 0; text-transform: none; } .-t\:1, h1 { color: var(--c_a3t); font: 400 48px/1.04 var(--ff_2); text-transform: uppercase; } .-t\:2, h2 { margin-bottom: 0.65em; font: 700 43px/1.04 var(--ff_1); } .-t\:3, h3 { color: var(--c_a1t); font: 700 35px/1.09 var(--ff_1); } .-t\:4, h4 { font: 700 20px/1.15 var(--ff_1); text-transform: uppercase; } .-t\:5, h5 { font: 700 20px/1.30 var(--ff_1); } .-t\:6, h6 { font: 700 14px/1.30 var(--ff_1); text-transform: uppercase; } .-t\:7, blockquote { color: var(--c_a1t); font: 700 20px/1.20 var(--ff_1); } .-t\:8, cite { color: var(--c_d1t); font: 700 18px/1.25 var(--ff_1); } .-t\:9, figcaption { font: 500 12px/1.25 var(--ff_1); } .-t\:10 { font: 400 62px/1.00 var(--ff_2); text-transform: uppercase; } .-t\:11 { font: 700 20px/1.50 var(--ff_1); } .-t\:12 { font: 400 100px/1 var(--ff_2); } @media screen and (max-width: 1023px) { .-t\:0, html { font-size: 16px; } .-t\:1, h1 { font: 400 40px/1.05 var(--ff_2); } .-t\:2, h2 { font: 700 32px/1.13 var(--ff_1); } .-t\:3, h3 { font: 700 24px/1.25 var(--ff_1); } .-t\:4, h4 { font: 700 16px/1.25 var(--ff_1); } .-t\:5, h5 { font: 700 16px/1.25 var(--ff_1); } .-t\:10 { font-size: 42px; } .-t\:11 { font-size: 18px; } } @media screen and (max-width: 719px) { .-t\:12 { font-size: 64px; } } /* link styling */ a.-as\:1, .-as\:1 a { --atcn: 'inherit'; --aoch: 'inherit'; font-weight: inherit; } a.-as\:2, .-as\:2 a { --atcn: 'inherit'; --aoch: 'inherit'; font-weight: inherit; text-decoration: underline; } /* list styling */ ul.-ls\:1, ol.-ls\:1, .-ls\:1 ul, .-ls\:1 ol { padding: 0; } .-ls\:1 li { margin-bottom: 0; } .-ls\:1 li:before { display: none; } /* spacing */ .-mb\:a,.-my\:a{margin-bottom:auto}.-mt\:a,.-my\:a {margin-top:auto}.-ml\:a,.-mx\:a{margin-left:auto}.-mr\:a,.-mx\:a{margin-right:auto} .-mb\:0,.-my\:0,.-ma\:0{margin-bottom:0}.-mt\:0,.-my\:0,.-ma\:0{margin-top:0}.-ml\:0,.-mx\:0,.-ma\:0{margin-left:0}.-mr\:0,.-mx\:0,.-ma\:0{margin-right:0}.-pb\:0,.-py\:0,.-pa\:0{padding-bottom:0}.-pt\:0,.-py\:0,.-pa\:0{padding-top:0}.-pl\:0,.-px\:0,.-pa\:0{padding-left:0}.-pr\:0,.-px\:0,.-pa\:0{padding-right:0} .-mb\:x,.-my\:x,.-ma\:x{margin-bottom:var(--sx)}.-mt\:x,.-my\:x,.-ma\:x{margin-top:var(--sx)}.-ml\:x,.-mx\:x,.-ma\:x{margin-left:var(--sx)}.-mr\:x,.-mx\:x,.-ma\:x{margin-right:var(--sx)}.-mb\:-x,.-my\:-x,.-ma\:-x{margin-bottom: var(--nx)}.-mt\:-x,.-my\:-x,.-ma\:-x{margin-top: var(--nx)}.-ml\:-x,.-mx\:-x,.-ma\:-x{margin-left: var(--nx)}.-mr\:-x,.-mx\:-x,.-ma\:-x{margin-right: var(--nx)}.-pb\:x,.-py\:x,.-pa\:x{padding-bottom:var(--sx)}.-pt\:x,.-py\:x,.-pa\:x{padding-top:var(--sx)}.-pl\:x,.-px\:x,.-pa\:x{padding-left:var(--sx)}.-pr\:x,.-px\:x,.-pa\:x{padding-right:var(--sx)} .-mb\:y,.-my\:y,.-ma\:y{margin-bottom:var(--sy)}.-mt\:y,.-my\:y,.-ma\:y{margin-top:var(--sy)}.-ml\:y,.-mx\:y,.-ma\:y{margin-left:var(--sy)}.-mr\:y,.-mx\:y,.-ma\:y{margin-right:var(--sy)}.-mb\:-y,.-my\:-y,.-ma\:-y{margin-bottom: var(--nx)}.-mt\:-y,.-my\:-y,.-ma\:-y{margin-top: var(--nx)}.-ml\:-y,.-mx\:-y,.-ma\:-y{margin-left: var(--nx)}.-mr\:-y,.-mx\:-y,.-ma\:-y{margin-right: var(--nx)}.-pb\:y,.-py\:y,.-pa\:y{padding-bottom:var(--sy)}.-pt\:y,.-py\:y,.-pa\:y{padding-top:var(--sy)}.-pl\:y,.-px\:y,.-pa\:y{padding-left:var(--sy)}.-pr\:y,.-px\:y,.-pa\:y{padding-right:var(--sy)} .-mb\:1,.-my\:1{margin-bottom:var(--s1)}.-mt\:1,.-my\:1{margin-top:var(--s1)}.-mb\:-1,.-my\:-1,.-ma\:-1{margin-bottom: calc(var(--s1) * -1)}.-mt\:-1,.-my\:-1,.-ma\:-1{margin-top: calc(var(--s1) * -1)}.-ml\:-1,.-mx\:-1,.-ma\:-1{margin-left: calc(var(--s1) * -1)}.-mr\:-1,.-mx\:-1,.-ma\:-1{margin-right: calc(var(--s1) * -1)}.-pb\:1,.-py\:1,.-pa\:1{padding-bottom:var(--s1)}.-pt\:1,.-py\:1,.-pa\:1{padding-top:var(--s1)}.-pl\:1,.-px\:1,.-pa\:1{padding-left:var(--s1)}.-pr\:1,.-px\:1,.-pa\:1{padding-right:var(--s1)} .-mb\:2,.-my\:2{margin-bottom:var(--s2)}.-mt\:2,.-my\:2{margin-top:var(--s2)}.-mb\:-2,.-my\:-2,.-ma\:-2{margin-bottom: calc(var(--s2) * -1)}.-mt\:-2,.-my\:-2,.-ma\:-2{margin-top: calc(var(--s2) * -1)}.-ml\:-2,.-mx\:-2,.-ma\:-2{margin-left: calc(var(--s2) * -1)}.-mr\:-2,.-mx\:-2,.-ma\:-2{margin-right: calc(var(--s2) * -1)}.-pb\:2,.-py\:2,.-pa\:2{padding-bottom:var(--s2)}.-pt\:2,.-py\:2,.-pa\:2{padding-top:var(--s2)}.-pl\:2,.-px\:2,.-pa\:2{padding-left:var(--s2)}.-pr\:2,.-px\:2,.-pa\:2{padding-right:var(--s2)} .-mb\:3,.-my\:3{margin-bottom:var(--s3)}.-mt\:3,.-my\:3{margin-top:var(--s3)}.-mb\:-3,.-my\:-3,.-ma\:-3{margin-bottom: calc(var(--s3) * -1)}.-mt\:-3,.-my\:-3,.-ma\:-3{margin-top: calc(var(--s3) * -1)}.-ml\:-3,.-mx\:-3,.-ma\:-3{margin-left: calc(var(--s3) * -1)}.-mr\:-3,.-mx\:-3,.-ma\:-3{margin-right: calc(var(--s3) * -1)}.-pb\:3,.-py\:3,.-pa\:3{padding-bottom:var(--s3)}.-pt\:3,.-py\:3,.-pa\:3{padding-top:var(--s3)}.-pl\:3,.-px\:3,.-pa\:3{padding-left:var(--s3)}.-pr\:3,.-px\:3,.-pa\:3{padding-right:var(--s3)} .-mb\:4,.-my\:4{margin-bottom:var(--s4)}.-mt\:4,.-my\:4{margin-top:var(--s4)}.-mb\:-4,.-my\:-4,.-ma\:-4{margin-bottom: calc(var(--s4) * -1)}.-mt\:-4,.-my\:-4,.-ma\:-4{margin-top: calc(var(--s4) * -1)}.-ml\:-4,.-mx\:-4,.-ma\:-4{margin-left: calc(var(--s4) * -1)}.-mr\:-4,.-mx\:-4,.-ma\:-4{margin-right: calc(var(--s4) * -1)}.-pb\:4,.-py\:4,.-pa\:4{padding-bottom:var(--s4)}.-pt\:4,.-py\:4,.-pa\:4{padding-top:var(--s4)}.-pl\:4,.-px\:4,.-pa\:4{padding-left:var(--s4)}.-pr\:4,.-px\:4,.-pa\:4{padding-right:var(--s4)} .-mb\:5,.-my\:5{margin-bottom:var(--s5)}.-mt\:5,.-my\:5{margin-top:var(--s5)}.-mb\:-5,.-my\:-5,.-ma\:-5{margin-bottom: calc(var(--s5) * -1)}.-mt\:-5,.-my\:-5,.-ma\:-5{margin-top: calc(var(--s5) * -1)}.-ml\:-5,.-mx\:-5,.-ma\:-5{margin-left: calc(var(--s5) * -1)}.-mr\:-5,.-mx\:-5,.-ma\:-5{margin-right: calc(var(--s5) * -1)}.-pb\:5,.-py\:5,.-pa\:5{padding-bottom:var(--s5)}.-pt\:5,.-py\:5,.-pa\:5{padding-top:var(--s5)}.-pl\:5,.-px\:5,.-pa\:5{padding-left:var(--s5)}.-pr\:5,.-px\:5,.-pa\:5{padding-right:var(--s5)} @media screen and (max-width: 1279px) { .-mb\:0\s{display:none}.-d\:b\>s{display:block}} @media screen and (min-width: 1280px){.-d\:n\>m{display:none}.-d\:b\>m{display:block}} /* max widths */ .-xw\:n { max-width: none; } .-xw\:1 { max-width: var(--xw_1); } .-xw\:1.-contain { max-width: calc(var(--xw_1) + var(--sx) * 2); } .-xw\:2 { max-width: var(--xw_2); } .-xw\:2.-contain { max-width: calc(var(--xw_2) + var(--sx) * 2); } .-xw\:3 { max-width: var(--xw_3); } .-xw\:3.-contain { max-width: calc(var(--xw_3) + var(--sx) * 2); } /* colors */ .-c\:d1 { color: var(--c_d1); } .-c\:d1t, html { color: var(--c_d1t); } .-c\:d2 { color: var(--c_d2); } .-c\:d2t { color: var(--c_d2t); } .-c\:a1 { color: var(--c_a1); } .-c\:a1t { color: var(--c_a1t); } .-c\:a2 { color: var(--c_a2); } .-c\:a2t { color: var(--c_a2t); } .-c\:a3 { color: var(--c_a3); } .-c\:a3t { color: var(--c_a3t); } .-c\:i1 { color: var(--c_i1); } .-c\:i1t { color: var(--c_i1t); } .-c\:i2 { color: var(--c_i2); } .-c\:i2t { color: var(--c_i2t); } .-c\:b1 { color: var(--c_b1); } .-c\:b1t { color: var(--c_b1t); } .-c\:b2 { color: var(--c_b2); } .-c\:b2t { color: var(--c_b2t); } .-c\:o1 { color: var(--c_o1); } .-c\:o1t { color: var(--c_o1t); } .-c\:o2 { color: var(--c_o2); } .-c\:o2t { color: var(--c_o2t); } .-c\:e1 { color: var(--c_e1); } .-c\:e1t { color: var(--c_e1t); } .-c\:ix { color: inherit; } .-c\:ux { color: unset; } /* families */ .-ff\:1 { font-family: var(--ff_1); } /* weights */ .-fw\:4, .-fw\:n { font-weight: 400; } .-fw\:5 { font-weight: 500; } .-fw\:7, .-fw\:b { font-weight: 700; } .-fw\:ix, .-fw\:i { font-weight: inherit; } /* basic css */ .-ta\:l { text-align: left; }.-ta\:c { text-align: center; }.-ta\:r { text-align: right; } .-tt\:n { text-transform: none; }.-tt\:l { text-transform: lowercase; }.-tt\:u { text-transform: uppercase; } .-us\:n, [toggle], [data-toggle] { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media screen and (max-width: 719px) { .-ta\:l\.tns-item{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.tns-horizontal.tns-subpixel{white-space:nowrap}.tns-horizontal.tns-subpixel>.tns-item{display:inline-block;vertical-align:top;white-space:normal}.tns-horizontal.tns-no-subpixel:after{content:'';display:table;clear:both}.tns-horizontal.tns-no-subpixel>.tns-item{float:left}.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item{margin-right:-100%}.tns-no-calc{position:relative;left:0}.tns-gallery{position:relative;left:0;min-height:1px}.tns-gallery>.tns-item{position:absolute;left:-100%;-webkit-transition:transform 0s, opacity 0s;-moz-transition:transform 0s, opacity 0s;transition:transform 0s, opacity 0s}.tns-gallery>.tns-slide-active{position:relative;left:auto !important}.tns-gallery>.tns-moving{-webkit-transition:all 0.25s;-moz-transition:all 0.25s;transition:all 0.25s}.tns-autowidth{display:inline-block}.tns-lazy-img{-webkit-transition:opacity 0.6s;-moz-transition:opacity 0.6s;transition:opacity 0.6s;opacity:0.6}.tns-lazy-img.tns-complete{opacity:1}.tns-ah{-webkit-transition:height 0s;-moz-transition:height 0s;transition:height 0s}.tns-ovh{overflow:hidden}.tns-visually-hidden{position:absolute;left:-10000em}.tns-transparent{opacity:0;visibility:hidden}.tns-fadeIn{opacity:1;filter:alpha(opacity=100);z-index:0}.tns-normal,.tns-fadeOut{opacity:0;filter:alpha(opacity=0);z-index:-1}.tns-vpfix{white-space:nowrap}.tns-vpfix>div,.tns-vpfix>li{display:inline-block}.tns-t-subp2{margin:0 auto;width:310px;position:relative;height:10px;overflow:hidden}.tns-t-ct{width:2333.3333333%;width:-webkit-calc(100% * 70 / 3);width:-moz-calc(100% * 70 / 3);width:calc(100% * 70 / 3);position:absolute;right:0}.tns-t-ct:after{content:'';display:table;clear:both}.tns-t-ct>div{width:1.4285714%;width:-webkit-calc(100% / 70);width:-moz-calc(100% / 70);width:calc(100% / 70);height:10px;float:left} /** * @description Supporter Survey form overrides */ .form1-wrap { } .form1-wrap .HeaderHtml { padding: 0; } .form1-wrap .at .at-fieldset { padding: 0; } .form1-wrap .at-legend { margin-bottom: 0.5rem !important; } .form1-wrap .at legend { margin: 0; } .form1-wrap .FirstName, .form1-wrap .LastName { margin-top: 1rem; } .form1-wrap .at-select { margin-bottom: 1rem !important; } .form1-wrap .at-row-full { margin-top: 1rem; } .form1-wrap .at-text, .form1-wrap .at-select, .form1-wrap .at-date, .form1-wrap .at-area, .form1-wrap .form-unit-radio label, .form1-wrap .at-row-full label { font-weight: bolder; } .form1-wrap .radios label, .form1-wrap .at-row-full .at-check { font-weight: normal; } .form1-wrap .at-form-submit .at-submit { float: left; } /* New Styles Added in November 2022 */ .news-meta { float: left; margin-bottom: 0; } .news-end { text-align: center; }