/* ===================================================================
* ACT Main Stylesheet
* Template Ver. 1.0.0
* ------------------------------------------------------------------
*
* TOC:
* # SETTINGS
* ## fonts
* ## colors
* ## spacing and typescale
* ## grid variables
* # NORMALIZE
* # BASE SETUP
* # GRID
* ## large screen devices
* ## medium screen devices
* ## tablet devices
* ## mobile devices
* ## small screen devices
* ## additional column stackpoints
* # UTILITY CLASSES
* # TYPOGRAPHY
* ## base type styles
* ## additional typography & helper classes
* ## lists
* ## spacing
* # PRELOADER
* ## page loaded
* # FORM
* ## style placeholder text
* ## change autocomplete styles in Chrome
* # BUTTONS
* # TABLE
* # COMPONENTS
* ## pagination
* ## alert box
* ## skillbars
* ## stats tabs
* # PROJECT-WIDE SHARED STYLES
* ## fade in up effect
* ## media classes
* ## swiper overrides
* ## bricks masonry
* ## masonry entries
* # PAGE WRAP
* # SITE HEADER
* ## branding
* ## main navigation
* ## mobile menu toggle
* ## header-search
* ## close button for search
* ## search triggers
* # HERO
* ## hero slider
* ## hero scroll down
* ## slide transitions
* # SITE CONTENT
* ## pageheader
* # FOOTER
* ## subscription form
* ## footer social
* ## copyright
* ## go top
* # BLOG STYLES
* ## blog comments
* # CUSTOM SITE STYLES
* ## forms, galleries and tabs
* ## homepage sections
* ## news, events and partner logos
* ## inner-page headers and banners
* ## reusable blocks and donation components
* ## button system
* ## impact cards and fundraiser panel
*
* ------------------------------------------------------------------ */
/* ===================================================================
* # SETTINGS
*
*
* ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
* ## fonts
* ------------------------------------------------------------------- */
/* Clarity code @import url("https://use.typekit.net/wsd2ouh.css"); */
/* Agency code */ @import url("https://use.typekit.net/nki6fas.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");
:root {
--font-1: "basic-sans", sans-serif;
font-weight: 400;
font-style: normal;
--font-2: "fields", sans-serif;
font-weight: 400;
font-style: normal;
--font-3: "roc-grotesk-condensed", sans-serif;
font-weight: 600;
font-style: normal;
/* monospace
*/
--font-mono: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}
/* -------------------------------------------------------------------
* ## colors
* ------------------------------------------------------------------- */
:root {
--color-1: #fff867;
--color-2: #c2bfff;
--color-3: #302653;
--color-4: #f5eee3;
/* feedback colors
*/
--color-error: hsla(359, 100%, 91%, 1);
--color-success: hsla(76, 69%, 68%, 1);
--color-info: hsla(205, 82%, 91%, 1);
--color-notice: hsla(51, 100%, 80%, 1);
--color-error-content: hsla(359, 50%, 50%, 1);
--color-success-content: hsla(76, 29%, 28%, 1);
--color-info-content: hsla(205, 32%, 31%, 1);
--color-notice-content: hsla(51, 30%, 30%, 1);
/* shades
*/
--color-black: #000000;
--color-gray-19: #141415;
--color-gray-18: #27292a;
--color-gray-17: #3b3d40;
--color-gray-16: #4f5255;
--color-gray-15: #63676a;
--color-gray-14: #767b7f;
--color-gray-13: #8a9094;
--color-gray-12: #9ea4aa;
--color-gray-11: #b1b9bf;
--color-gray-10: #c5cdd4;
--color-gray-9: #cbd2d8;
--color-gray-8: #d1d7dd;
--color-gray-7: #d6dce1;
--color-gray-6: #dce1e5;
--color-gray-5: #e2e6ea;
--color-gray-4: #e8ebee;
--color-gray-3: #eef0f2;
--color-gray-2: #f3f5f6;
--color-gray-1: #f9fafb;
--color-white: #ffffff;
/* text
*/
--color-text: var(--color-gray-19);
--color-text-dark: var(--color-gray-15);
--color-text-light: var(--color-gray-15);
--color-placeholder: var(--color-gray-13);
/* buttons
*/
--color-btn: var(--color-gray-5);
--color-btn-text: var(--color-black);
--color-btn-hover: var(--color-gray-7);
--color-btn-hover-text: var(--color-black);
--color-btn-primary: var(--color-black);
--color-btn-primary-text: var(--color-white);
--color-btn-primary-hover: var(--color-1);
--color-btn-primary-hover-text: var(--color-white);
--color-btn-stroke: var(--color-black);
--color-btn-stroke-white: var(--color-white);
--color-btn-stroke-white-hover: var(--color-gray-13);
--color-btn-stroke-text: var(--color-black);
--color-btn-stroke-text-white: var(--color-white);
--color-btn-stroke-text-white-hover: var(--color-gray-13);
--color-btn-stroke-hover: var(--color-black);
--color-btn-stroke-hover-text: var(--color-white);
/* preloader
*/
--color-preloader-bg: #112d49;
--color-loader: white;
--color-loader-light: rgba(0, 0, 0, 0.1);
/* others
*/
--color-body: white;
--color-footer: var(--color-gray-2);
--color-border: rgba(0, 0, 0, 0.08);
--border-radius: 3px;
}
/* -------------------------------------------------------------------
* ## spacing and typescale
* ------------------------------------------------------------------- */
:root {
/* spacing
* base font size: 18px
* vertical space unit : 32px
*/
--base-size: 62.5%;
--multiplier: 1;
--base-font-size: calc(1.8rem * var(--multiplier));
--space: calc(3.2rem * var(--multiplier));
/* vertical spacing
*/
--vspace-0_125: calc(0.125 * var(--space));
--vspace-0_25: calc(0.25 * var(--space));
--vspace-0_375: calc(0.375 * var(--space));
--vspace-0_5: calc(0.5 * var(--space));
--vspace-0_625: calc(0.625 * var(--space));
--vspace-0_75: calc(0.75 * var(--space));
--vspace-0_875: calc(0.875 * var(--space));
--vspace-1: calc(var(--space));
--vspace-1_25: calc(1.25 * var(--space));
--vspace-1_5: calc(1.5 * var(--space));
--vspace-1_75: calc(1.75 * var(--space));
--vspace-2: calc(2 * var(--space));
--vspace-2_5: calc(2.5 * var(--space));
--vspace-2_7: calc(2.7 * var(--space));
--vspace-3: calc(3 * var(--space));
--vspace-3_5: calc(3.5 * var(--space));
--vspace-4: calc(4 * var(--space));
--vspace-4_5: calc(4.5 * var(--space));
--vspace-5: calc(5 * var(--space));
/* type scale
* ratio 1 :2 | base: 18px
* -------------------------------------------------------
*
* --text-display-3 = (77.40px)
* --text-display-2 = (64.50px)
* --text-display-1 = (53.75px)
* --text-xxxl = (44.79px)
* --text-xxl = (37.32px)
* --text-xl = (31.10px)
* --text-lg = (25.92px)
* --text-md = (21.60px)
* --text-size = (18.00px) BASE
* --text-sm = (15.00px)
* --text-xs = (12.50px)
*
* ---------------------------------------------------------
*/
--text-scale-ratio: 1.2;
--text-size: var(--base-font-size);
--text-xs: calc(
(var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio)
);
--text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
--text-md: calc(
var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio)
);
--text-lg: calc(var(--text-md) * var(--text-scale-ratio));
--text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
--text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
--text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
--text-display-1: calc(var(--text-xxxl) * var(--text-scale-ratio));
--text-display-2: calc(var(--text-display-1) * var(--text-scale-ratio));
--text-display-3: calc(var(--text-display-2) * var(--text-scale-ratio));
--text-display-4: calc(var(--text-display-3) * var(--text-scale-ratio));
--text-display-5: calc(var(--text-display-4) * var(--text-scale-ratio));
/* default button height
*/
--vspace-btn: var(--vspace-2);
}
/* on mobile devices below 600px, change the value of '--multiplier'
* to adjust the values of base font size and vertical space unit.
*/
@media screen and (max-width: 600px) {
:root {
--base-font-size: 1.8rem;
}
}
@media screen and (max-width: 479px) {
:root {
--base-font-size: 1.6rem;
}
}
/* -------------------------------------------------------------------
* ## grid variables
* ------------------------------------------------------------------- */
:root {
/* widths for rows and containers
*/
--width-full: 100%;
--width-max: 1200px;
--width-wide: 1400px;
--width-wider: 1600px;
--width-widest: 1800px;
--width-narrow: 1000px;
--width-narrower: 800px;
--width-grid-max: var(--width-widest);
/* gutter
*/
--gutter: 2rem;
}
/* on medium screen devices
*/
@media screen and (max-width: 1200px) {
:root {
--gutter: 1.8rem;
}
}
/* on mobile devices
*/
@media screen and (max-width: 600px) {
:root {
--gutter: 1rem;
}
}
/* ====================================================================
* # NORMALIZE
*
*
* --------------------------------------------------------------------
* normalize.css v8.0.1 | MIT License |
* github.com/necolas/normalize.css
* -------------------------------------------------------------------- */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
margin: 0;
}
body {
margin: 0;
}
main {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
font-family: monospace, monospace;
font-size: 1em;
}
a {
background-color: transparent;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 14px;
line-height: 16px!Important;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sub strong, sub b, sup strong, sup b {
font-weight: normal
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focuact-inner,
[type="button"]::-moz-focuact-inner,
[type="reset"]::-moz-focuact-inner,
[type="submit"]::-moz-focuact-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
details {
display: block;
}
summary {
display: list-item;
}
template {
display: none;
}
/* ===================================================================
* # BASE SETUP
*
*
* ------------------------------------------------------------------- */
html {
font-size: var(--base-size);
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
body {
height: 100%;
}
body {
background-color: var(--color-body);
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
p {
font-size: inherit;
text-rendering: optimizeLegibility;
}
a {
text-decoration: none;
}
svg,
img,
video {
max-width: 100%;
height: auto;
}
pre {
overflow: auto;
}
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* ===================================================================
* # GRID v4.0.0
*
*
* -----------------------------------------------------------------
* - Grid breakpoints are based on MAXIMUM WIDTH media queries,
* meaning they apply to that one breakpoint and ALL THOSE BELOW IT.
* - Grid columns without a specified width will automatically layout
* as equal width columns.
*
* - BLOCK GRID columns(columns inside BLOCK GRID containers) are
* equally-sized columns define at parent/row level.
* A BLOCK GRID container's class attribute value begins with "block-".
*
* ------------------------------------------------------------------- */
/* row
*/
.row {
width: 92%;
max-width: var(--width-grid-max);
margin: 0 auto;
display: flex;
flex-flow: row wrap;
}
.row .row {
width: auto;
max-width: none;
margin-left: calc(var(--gutter) * -1);
margin-right: calc(var(--gutter) * -1);
}
/* column
*/
.column {
display: block;
flex: 1 1 0%;
padding: 0 var(--gutter);
}
.collapse > .column,
.column.collapse {
padding: 0;
}
.column.column-full {
padding: 0;
}
/* row utility classes
*/
.row-fuller {
max-width: var(--width-widest);
margin: 0 auto;
display: flex;
flex-flow: row wrap;
}
.row-full {
max-width: var(--width-full);
width: var(--width-full);
}
.row.row-wrap {
flex-wrap: wrap;
}
.row.row-nowrap {
flex-wrap: nowrap;
}
.row.row-y-top {
align-items: flex-start;
}
.row.row-y-bottom {
align-items: flex-end;
}
.row.row-y-center {
align-items: center;
}
.row.row-stretch {
align-items: stretch;
}
.row.row-baseline {
align-items: baseline;
}
.row.row-x-left {
justify-content: flex-start;
}
.row.row-x-right {
justify-content: flex-end;
}
.row.row-x-center {
justify-content: center;
}
/* --------------------------------------------------------------------
* ## large screen devices
* -------------------------------------------------------------------- */
.lg-1 {
flex: none;
width: 8.33333%;
}
.lg-2 {
flex: none;
width: 16.66667%;
}
.lg-3 {
flex: none;
width: 25%;
}
.lg-4 {
flex: none;
width: 33.33333%;
}
.lg-5 {
flex: none;
width: 41.66667%;
}
.lg-6 {
flex: none;
width: 50%;
}
.lg-7 {
flex: none;
width: 58.33333%;
}
.lg-8 {
flex: none;
width: 66.66667%;
}
.lg-9 {
flex: none;
width: 75%;
}
.lg-10 {
flex: none;
width: 83.33333%;
}
.lg-11 {
flex: none;
width: 91.66667%;
}
.lg-12 {
flex: none;
width: 100%;
}
.block-lg-one-eight > .column {
flex: none;
width: 12.5%;
}
.block-lg-one-sixth > .column {
flex: none;
width: 16.66667%;
}
.block-lg-one-fifth > .column {
flex: none;
width: 20%;
}
.block-lg-one-fourth > .column {
flex: none;
width: 25%;
}
.block-lg-one-third > .column {
flex: none;
width: 33.33333%;
}
.block-lg-one-half > .column {
flex: none;
width: 50%;
}
.block-lg-whole > .column {
flex: none;
width: 100%;
}
/* --------------------------------------------------------------------
* ## medium screen devices
* -------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
.md-1 {
flex: none;
width: 8.33333%;
}
.md-2 {
flex: none;
width: 16.66667%;
}
.md-3 {
flex: none;
width: 25%;
}
.md-4 {
flex: none;
width: 33.33333%;
}
.md-5 {
flex: none;
width: 41.66667%;
}
.md-6 {
flex: none;
width: 50%;
}
.md-7 {
flex: none;
width: 58.33333%;
}
.md-8 {
flex: none;
width: 66.66667%;
}
.md-9 {
flex: none;
width: 75%;
}
.md-10 {
flex: none;
width: 83.33333%;
}
.md-11 {
flex: none;
width: 91.66667%;
}
.md-12 {
flex: none;
width: 100%;
}
.block-md-one-eight > .column {
flex: none;
width: 12.5%;
}
.block-md-one-sixth > .column {
flex: none;
width: 16.66667%;
}
.block-md-one-fifth > .column {
flex: none;
width: 20%;
}
.block-md-one-fourth > .column {
flex: none;
width: 25%;
}
.block-md-one-third > .column {
flex: none;
width: 33.33333%;
}
.block-md-one-half > .column {
flex: none;
width: 50%;
}
.block-md-whole > .column {
flex: none;
width: 100%;
}
.hide-on-md {
display: none;
}
}
/* --------------------------------------------------------------------
* ## tablet devices
* -------------------------------------------------------------------- */
@media screen and (max-width: 800px) {
.tab-1 {
flex: none;
width: 8.33333%;
}
.tab-2 {
flex: none;
width: 16.66667%;
}
.tab-3 {
flex: none;
width: 25%;
}
.tab-4 {
flex: none;
width: 33.33333%;
}
.tab-5 {
flex: none;
width: 41.66667%;
}
.tab-6 {
flex: none;
width: 50%;
}
.tab-7 {
flex: none;
width: 58.33333%;
}
.tab-8 {
flex: none;
width: 66.66667%;
}
.tab-9 {
flex: none;
width: 75%;
}
.tab-10 {
flex: none;
width: 83.33333%;
}
.tab-11 {
flex: none;
width: 91.66667%;
}
.tab-12 {
flex: none;
width: 100%;
}
.block-tab-one-eight > .column {
flex: none;
width: 12.5%;
}
.block-tab-one-sixth > .column {
flex: none;
width: 16.66667%;
}
.block-tab-one-fifth > .column {
flex: none;
width: 20%;
}
.block-tab-one-fourth > .column {
flex: none;
width: 25%;
}
.block-tab-one-third > .column {
flex: none;
width: 33.33333%;
}
.block-tab-one-half > .column {
flex: none;
width: 50%;
}
.block-tab-whole > .column {
flex: none;
width: 100%;
}
.hide-on-tab {
display: none;
}
}
/* --------------------------------------------------------------------
* ## mobile devices
* -------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
.row {
width: 100%;
padding-left: 3vw;
padding-right: 3vw;
}
.row .row {
padding-left: 0;
padding-right: 0;
}
.mob-1 {
flex: none;
width: 8.33333%;
}
.mob-2 {
flex: none;
width: 16.66667%;
}
.mob-3 {
flex: none;
width: 25%;
}
.mob-4 {
flex: none;
width: 33.33333%;
}
.mob-5 {
flex: none;
width: 41.66667%;
}
.mob-6 {
flex: none;
width: 50%;
}
.mob-7 {
flex: none;
width: 58.33333%;
}
.mob-8 {
flex: none;
width: 66.66667%;
}
.mob-9 {
flex: none;
width: 75%;
}
.mob-10 {
flex: none;
width: 83.33333%;
}
.mob-11 {
flex: none;
width: 91.66667%;
}
.mob-12 {
flex: none;
width: 100%;
}
.block-mob-one-eight > .column {
flex: none;
width: 12.5%;
}
.block-mob-one-sixth > .column {
flex: none;
width: 16.66667%;
}
.block-mob-one-fifth > .column {
flex: none;
width: 20%;
}
.block-mob-one-fourth > .column {
flex: none;
width: 25%;
}
.block-mob-one-third > .column {
flex: none;
width: 33.33333%;
}
.block-mob-one-half > .column {
flex: none;
width: 50%;
}
.block-mob-whole > .column {
flex: none;
width: 100%;
}
.hide-on-mob {
display: none;
}
}
/* --------------------------------------------------------------------
* ## small screen devices
* --------------------------------------------------------------------*/
/* stack columns on small screen devices
*/
@media screen and (max-width: 400px) {
.row .row {
margin-left: 0;
margin-right: 0;
}
.news-item .column {
padding: 0 15px;
}
.block-stack > .column,
.column {
flex: none;
width: 100%;
margin-left: 0;
margin-right: 0;
padding: 0;
}
.hide-on-sm {
display: none;
}
}
/* --------------------------------------------------------------------
* ## additional column stackpoints
* -------------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
.stack-on-1000,
.block-stack-on-1000 > .column {
flex: none;
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
@media screen and (max-width: 700px) {
.stack-on-700,
.block-stack-on-700 > .column {
flex: none;
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
@media screen and (max-width: 550px) {
.stack-on-550,
.block-stack-on-550 > .column {
flex: none;
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
/* ===================================================================
* # UTILITY CLASSES
*
*
* ------------------------------------------------------------------- */
/* flex item alignment classes
*/
.u-flexitem-center {
margin: auto;
align-self: center;
}
.u-flexitem-left {
margin-right: auto;
align-self: center;
}
.u-flexitem-right {
margin-left: auto;
align-self: center;
}
.u-flexitem-x-center {
margin-right: auto;
margin-left: auto;
}
.u-flexitem-x-left {
margin-right: auto;
}
.u-flexitem-x-right {
margin-left: auto;
}
.u-flexitem-y-center {
align-self: center;
}
.u-flexitem-y-top {
align-self: flex-start;
}
.u-flexitem-y-bottom {
align-self: flex-end;
}
/* misc helper classes
*/
.u-screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
border: 0;
position: absolute;
word-wrap: normal !important;
}
.u-clearfix:after {
content: "";
display: table;
clear: both;
}
.u-hidden {
display: none;
}
.u-invisible {
visibility: hidden;
}
.u-antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.u-overflow-hidden {
overflow: hidden;
}
.u-remove-top {
margin-top: 0;
}
.u-remove-bottom {
margin-bottom: 0;
}
.u-add-half-bottom {
margin-bottom: var(--vspace-0_5);
}
.u-add-bottom {
margin-bottom: var(--vspace-1);
}
.u-no-border {
border: none;
}
.u-fullwidth {
width: 100%;
}
.u-pull-left {
float: left;
}
.u-pull-right {
float: right;
}
/* ===================================================================
* # TYPOGRAPHY
*
*
* -------------------------------------------------------------------
* type scale - ratio 1:2 | base: 18px
* -------------------------------------------------------------------
*
* --text-display-3 = (77.40px)
* --text-display-2 = (64.50px)
* --text-display-1 = (53.75px)
* --text-xxxl = (44.79px)
* --text-xxl = (37.32px)
* --text-xl = (31.10px)
* --text-lg = (25.92px)
* --text-md = (21.60px)
* --text-size = (18.00px) BASE
* --text-sm = (15.00px)
* --text-xs = (12.50px)
*
* -------------------------------------------------------------------- */
/* --------------------------------------------------------------------
* ## base type styles
* -------------------------------------------------------------------- */
body {
font-family: var(--font-1);
font-size: var(--base-font-size);
font-weight: 400;
line-height: var(--vspace-1);
color: var(--color-text);
}
@media screen and (max-width: 600px) {
body {
line-height: var(--vspace-0_75);
}
}
/* links
*/
a,
a:visited {
color: var(--color-3);
transition: all 0.3s ease-in-out;
text-decoration: underline;
}
a:focus,
a:hover,
a:active {
color: var(--color-2);
}
a:hover,
a:active {
outline: 0;
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 3px solid #111;
outline-offset: 3px;
}
.skip-link:focus {
clip: auto !important;
clip-path: none;
width: auto;
height: auto;
top: 10px;
left: 10px;
padding: 12px 18px;
background: #fff;
color: #111;
z-index: 10000;
}
.entry-content a {
font-weight: 600;
word-wrap: break-word;
}
/* headings
*/
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: var(--font-3);
font-weight: 600;
color: var(--color-3);
font-variant-ligatures: common-ligatures;
text-rendering: optimizeLegibility;
}
h1,
.h1 {
margin-top: var(--vspace-2_5);
margin-bottom: var(--vspace-0_75);
}
h2,
.h2,
h3,
.h3,
h4,
.h4 {
margin-top: var(--vspace-0_75);
margin-bottom: var(--vspace-0_75);
}
h5,
.h5,
h6,
.h6 {
margin-top: var(--vspace-0_75);
margin-bottom: var(--vspace-0_75);
}
h1,
.h1 {
font-size: var(--text-display-2);
line-height: calc(2.75 * var(--space));
}
@media screen and (max-width: 500px) {
h1,
.h1 {
font-size: var(--text-display-1);
line-height: calc(1.4 * var(--space));
}
}
h2,
.h2 {
font-size: var(--text-xxxl);
line-height: calc(1.3 * var(--space));
}
h3,
.h3 {
font-size: var(--text-xl);
line-height: calc(1.1 * var(--space));
}
h4,
.h4 {
font-size: var(--text-lg);
line-height: var(--vspace-0_95);
}
h5,
.h5 {
font-size: var(--text-md);
line-height: var(--vspace-0_875);
}
h6,
.h6 {
font-family: var(--font-1);
font-weight: 600;
font-size: var(--text-sm);
line-height: var(--vspace-0_75);
text-transform: uppercase;
letter-spacing: 0.3rem;
}
.entry-content h1:first-of-type,
.entry-content h2:first-of-type,
.entry-content h3:first-of-type,
.entry-content h4:first-of-type,
.entry-content h5:first-of-type,
.entry-content h6:first-of-type,
.entry-content .h1:first-of-type,
.entry-content .h2:first-of-type,
.entry-content .h3:first-of-type,
.entry-content .h4:first-of-type,
.entry-content .h5:first-of-type,
.entry-content .h6:first-of-type {
margin-top: 0 !important;
}
@media (max-width: 1300px) {
h1 {
font-size: 48px;
line-height: 50px;
}
}
@media (max-width: 780px) {
h2 {
font-size: 34px;
line-height: 38px;
}
h1 {
font-size: 38px;
line-height: 40px;
}
}
@media (max-width: 580px) {
h2 {
font-size: 30px;
line-height: 34px;
}
h1 {
font-size: 34px;
line-height: 36px;
}
}
/* emphasis, italic,
* strong, bold and small text
*/
em,
i,
strong,
b {
font-size: inherit;
line-height: inherit;
}
em,
i {
font-style: italic;
}
strong,
b {
font-weight: 600;
}
small {
font-size: 80%;
font-weight: 400;
line-height: var(--vspace-0_5);
}
/* blockquotes
*/
blockquote {
margin: 0 0 var(--vspace-1) 0;
padding: var(--vspace-1) var(--vspace-1_5);
border-left: 2px solid var(--color-text-dark);
position: relative;
}
blockquote p {
font-family: var(--font-1);
font-weight: 400;
font-size: var(--text-lg);
font-style: normal;
line-height: var(--vspace-1_25);
color: var(--color-text-dark);
padding: 0;
}
blockquote cite {
display: block;
font-family: var(--font-1);
font-weight: 400;
font-size: var(--text-sm);
line-height: var(--vspace-0_75);
font-style: normal;
}
blockquote cite:before {
content: "\2014 \0020";
}
blockquote cite,
blockquote cite a,
blockquote cite a:visited {
color: var(--color-text-light);
border: none;
}
@media screen and (max-width: 500px) {
blockquote {
padding: var(--vspace-0_75) var(--vspace-0_75);
}
blockquote p {
font-size: var(--text-md);
line-height: var(--vspace-1);
}
}
/* figures
*/
figure img,
p img {
margin: 0;
vertical-align: bottom;
}
figure {
display: block;
margin-left: 0;
margin-right: 0;
}
figure img + figcaption {
margin-top: var(--vspace-1);
}
figcaption {
/* font-style: italic; */
font-size: var(--text-sm);
text-align: center;
margin-bottom: 0;
}
/* preformatted, code
*/
var,
kbd,
samp,
code,
pre {
font-family: var(--font-mono);
}
pre {
padding: var(--vspace-0_75) var(--vspace-1) var(--vspace-1);
background: var(--color-gray-6);
overflow-x: auto;
}
code {
font-size: var(--text-sm);
line-height: 1.6rem;
margin: 0 0.2rem;
padding: calc(((var(--vspace-1) - 1.6rem) / 2) - 0.1rem) calc(0.8rem - 0.1rem);
white-space: nowrap;
background: var(--color-gray-6);
border: 1px solid var(--color-gray-10);
color: var(--color-text-dark);
border-radius: 3px;
}
pre > code {
display: block;
white-space: pre;
line-height: var(--vspace-1);
padding: 0;
margin: 0;
border: none;
}
/* deleted text, abbreviation,
* & mark text
*/
del {
text-decoration: line-through;
}
abbr {
font-family: var(--font-1);
font-weight: 600;
font-variant: small-caps;
text-transform: lowercase;
letter-spacing: 0.1em;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
text-decoration: none;
}
mark {
background: var(--color-1-lighter);
color: var(--color-black);
}
/* horizontal rule
*/
hr {
border: solid var(--color-border);
border-width: 0.1rem 0 0;
clear: both;
margin: var(--vspace-2) 0 calc(var(--vspace-2) - 1px);
height: 0;
}
hr.fancy {
border: none;
margin: var(--vspace-1) 0;
height: var(--vspace-1);
text-align: center;
}
hr.fancy::before {
content: "*****";
letter-spacing: 0.3em;
}
hr.style-eight {
overflow: visible; /* For IE */
padding: 0;
border: none;
border-top: medium double rgba(0, 0, 0, 0.37);
color: #333;
text-align: center;
width: 40%;
margin: 0 auto 0;
margin-top: var(--vspace-1_5);
margin-bottom: var(--vspace-1_5);
}
hr.style-eight:after {
content: "ยง";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: var(--color-body);
}
/* --------------------------------------------------------------------
* ## additional typography & helper classes
* -------------------------------------------------------------------- */
.lead,
p.is-style-lead,
.attention-getter {
font-family: var(--font-1);
font-weight: 400;
font-size: var(--text-md);
line-height: var(--vspace-1_25);
}
@media screen and (max-width: 800px) {
.lead,
p.is-style-lead,
.attention-getter {
font-size: calc(var(--text-size) * 1.0556);
line-height: calc(1.125 * var(--space));
}
}
@media screen and (max-width: 600px) {
.lead,
p.is-style-lead,
.attention-getter {
font-size: var(--text-size);
line-height: var(--vspace-0_75);
}
}
.pull-quote {
position: relative;
padding: 0;
margin-top: 0;
text-align: center;
}
.pull-quote blockquote {
border: none;
margin: 0 auto;
max-width: 76rem;
padding-top: var(--vspace-2_5);
position: relative;
}
.pull-quote blockquote p {
font-weight: 400;
color: var(--color-text-dark);
}
.pull-quote blockquote:before {
content: "";
display: block;
height: var(--vspace-1);
width: var(--vspace-1);
background-repeat: no-repeat;
background: center center;
background-size: contain;
background-image: url(../images/icons/icon-quote.svg);
transform: translate(-50%, 0);
position: absolute;
top: var(--vspace-1);
left: 50%;
}
.drop-cap:first-letter {
float: left;
font-family: var(--font-1);
font-weight: 700;
font-size: calc(3 * var(--space));
line-height: 1;
padding: 0 0.125em 0 0;
text-transform: uppercase;
background: transparent;
color: var(--color-text-dark);
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
/* --------------------------------------------------------------------
* ## custom padding
* -------------------------------------------------------------------- */
.space-b-0 {
padding-bottom: 0;
margin-bottom: 0;
}
.space-b-40 {
padding-bottom: 40px;
margin-bottom: 0;
}
.space-t-40 {
padding-top: 40px;
margin-bottom: 0;
}
/* --------------------------------------------------------------------
* ## lists
* -------------------------------------------------------------------- */
ol {
list-style: decimal;
}
ul {
list-style: disc;
}
li {
display: list-item;
}
ol,
ul {
margin-left: 1.6rem;
}
ul li {
padding-left: 0;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin: 1.6rem 0 1.6rem 1.6rem;
}
ul.disc li {
display: list-item;
list-style: none;
padding: 0 0 0 0.8rem;
position: relative;
}
ul.disc li::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-1);
position: absolute;
left: -0.9em;
top: 11px;
vertical-align: middle;
}
dt {
margin: 0;
color: var(--color-1);
}
dd {
margin: 0 0 0 2rem;
}
/* definition list line style
*/
.lining dt,
.lining dd {
display: inline;
margin: 0;
}
.lining dt + dt:before,
.lining dd + dt:before {
content: "\A";
white-space: pre;
}
.lining dd + dd:before {
content: ", ";
}
.lining dd:before {
content: ": ";
margin-left: -0.2em;
}
/* definition list dictionary style
*/
.dictionary-style dt {
display: inline;
counter-reset: definitions;
}
.dictionary-style dt + dt:before {
content: ", ";
margin-left: -0.2em;
}
.dictionary-style dd {
display: block;
counter-increment: definitions;
}
.dictionary-style dd:before {
content: counter(definitions, decimal) ". ";
}
/* --------------------------------------------------------------------
* ## spacing
* -------------------------------------------------------------------- */
fieldset,
button,
.btn {
margin-bottom: var(--vspace-0_5);
}
input,
textarea,
select,
pre,
blockquote,
figure,
figcaption,
table,
p,
ul,
ol,
dl,
form,
img,
.video-container,
.act-custom-select {
margin-bottom: var(--vspace-0_75);
}
@media screen and (max-width: 600px) {
input,
textarea,
select,
pre,
blockquote,
figure,
figcaption,
table,
p,
ul,
ol,
dl,
form,
img,
.video-container,
.act-custom-select {
margin-bottom: var(--vspace-0_5);
}
}
/* ===================================================================
* # PRELOADER
*
*
* -------------------------------------------------------------------
* - markup:
*
*
*
* - loader class:
*
*
* ------------------------------------------------------------------- */
#preloader {
position: fixed;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
background: var(--color-preloader-bg);
z-index: 500;
height: 100vh;
width: 100%;
opacity: 1;
overflow: hidden;
}
.no-js #preloader {
display: none;
}
#loader {
position: relative;
width: 4px;
height: 4px;
padding: 0;
display: inline-block;
}
.loaderlogo {
width: 280px;
height: auto;
position: relative;
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
-moz-animation: fadeIn 2s;
-o-animation: fadeIn 2s;
-ms-animation: fadeIn 2s;
}
.loaderlogo img {
margin-bottom: 0;
}
#loader > div {
content: "";
background: var(--color-loader);
width: 4px;
height: 4px;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
}
#loader > div:nth-of-type(1) {
left: 15px;
}
#loader > div:nth-of-type(3) {
left: -15px;
}
/* dots jump */
.act-jump > div {
-webkit-animation: act-jump 1.2s infinite ease;
animation: act-jump 1.2s infinite ease;
animation-delay: 0.2s;
}
.act-jump > div:nth-of-type(1) {
animation-delay: 0.4s;
}
.act-jump > div:nth-of-type(3) {
animation-delay: 0s;
}
@-webkit-keyframes act-jump {
0% {
top: 0;
}
40% {
top: -6px;
}
80% {
top: 0;
}
}
@keyframes act-jump {
0% {
top: 0;
}
40% {
top: -6px;
}
80% {
top: 0;
}
}
/* dots fade */
.act-fade > div {
-webkit-animation: act-fade 1.6s infinite ease;
animation: act-fade 1.6s infinite ease;
animation-delay: 0.4s;
}
.act-fade > div:nth-of-type(1) {
animation-delay: 0.8s;
}
.act-fade > div:nth-of-type(3) {
animation-delay: 0s;
}
@-webkit-keyframes act-fade {
0% {
opacity: 1;
}
40% {
opacity: 0.2;
}
80% {
opacity: 1;
}
}
@keyframes act-fade {
0% {
opacity: 1;
}
40% {
opacity: 0.2;
}
80% {
opacity: 1;
}
}
/* dots pulse */
.act-pulse > div {
-webkit-animation: act-pulse 1.2s infinite ease;
animation: act-pulse 1.2s infinite ease;
animation-delay: 0.2s;
}
.act-pulse > div:nth-of-type(1) {
animation-delay: 0.4s;
}
.act-pulse > div:nth-of-type(3) {
animation-delay: 0s;
}
@-webkit-keyframes act-pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
-webkit-transform: scale(1.1);
transform: scale(1.3);
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes act-pulse {
0% {
transform: scale(1);
}
40% {
transform: scale(1.3);
}
80% {
transform: scale(1);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* -------------------------------------------------------------------
* ## page loaded
* ------------------------------------------------------------------- */
.act-loaded #preloader {
opacity: 0;
visibility: hidden;
transition: all 0.6s 0.9s ease-in-out;
}
.act-loaded #preloader #loader {
opacity: 0;
transition: opacity 0.6s ease-in-out;
}
/* ===================================================================
* # FORM
*
*
* ------------------------------------------------------------------- */
/*fieldset {
border : none;
padding : 0;
}*/
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
--input-height: var(--vspace-2);
--input-line-height: var(--vspace-1);
--input-vpadding: calc(
((var(--input-height) - var(--input-line-height)) / 2) - 1px
);
display: block;
height: var(--input-height);
padding: var(--input-vpadding) calc(2.4rem - 1px) !important;
border: 0;
outline: 0;
color: var(--color-placeholder);
font-family: var(--font-1);
font-size: var(--text-sm);
font-size: calc(var(--text-size) * 0.8889);
line-height: var(--input-line-height);
width: 100% !important;
background-color: white;
border: 1px solid rgba(155, 155, 155, 0.4);
transition: all 0.3s ease-in-out;
border-radius: var(--border-radius);
}
input[type="search"] {
width: 100%;
}
.act-custom-select {
position: relative;
padding: 0;
}
.act-custom-select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: 0.01px;
text-overflow: "";
margin: 0;
vertical-align: middle;
}
.act-custom-select select option {
padding-left: 2rem;
padding-right: 2rem;
}
.act-custom-select select::-ms-expand {
display: none;
}
.act-custom-select::after {
border-bottom: 2px solid black;
border-right: 2px solid black;
content: "";
display: block;
height: 8px;
width: 8px;
margin-top: -7px;
pointer-events: none;
position: absolute;
right: 2.4rem;
top: 50%;
transition: all 0.15s ease-in-out;
transform-origin: 66% 66%;
transform: rotate(45deg);
}
textarea {
min-height: calc(8 * var(--space));
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
color: var(--color-black);
background-color: white;
box-shadow: 0 0 5px var(--color-1);
border: 1px solid var(--color-1-light);
}
/*label,
legend {
font-family : var(--font-1);
font-weight : 600;
font-size : var(--text-sm);
line-height : var(--vspace-0_5);
margin-bottom : var(--vspace-0_5);
color : var(--color-text-dark);
display : block;
}
input[type="checkbox"],
input[type="radio"] {
display : inline;
}
label>.label-text {
display : inline-block;
margin-left : 1rem;
font-family : var(--font-1);
line-height : inherit;
}
label>input[type="checkbox"],
label>input[type="radio"] {
margin : 0;
position : relative;
top : 2px;
}*/
/* GRAVITY FORM */
.gform_legacy_markup_wrapper.gf_browser_chrome
.gfield_checkbox
li
input[type="checkbox"],
.gform_legacy_markup_wrapper.gf_browser_chrome
.gfield_radio
li
input[type="radio"] {
/* margin-top: -5px!important;*/
margin-right: 5px !important;
}
.gform_legacy_markup_wrapper .gfield_checkbox li label {
padding-top: 0px !important;
max-width: 90% !important;
}
body .gform_legacy_markup_wrapper img.ui-datepicker-trigger {
display: none !important;
}
.gform_legacy_markup_wrapper.gf_browser_chrome
.gfield_checkbox
li
input[type="checkbox"],
.gform_legacy_markup_wrapper.gf_browser_chrome
.gfield_radio
li
input[type="radio"] {
margin-bottom: 0 !important;
}
.gform_legacy_markup_wrapper .gfield_checkbox li input {
vertical-align: top !important;
}
/* -------------------------------------------------------------------
* ## style placeholder text
* ------------------------------------------------------------------- */
::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: var(--color-placeholder);
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: var(--color-placeholder);
opacity: 1;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: var(--color-placeholder);
opacity: 1;
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: var(--color-placeholder);
}
::-ms-input-placeholder {
/* Microsoft Edge */
color: var(--color-placeholder);
}
::placeholder {
/* Most modern browsers support this now. */
color: var(--color-placeholder);
}
/* -------------------------------------------------------------------
* ## change autocomplete styles in Chrome
* ------------------------------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-text-fill-color: var(--color-placeholder);
transition: background-color 5000s ease-in-out 0s;
}
/* ===================================================================
* # BUTTONS
*
*
* ------------------------------------------------------------------- */
input[type="submit"],
input[type="reset"],
input[type="button"] {
--btn-height: var(--vspace-btn);
display: inline-block;
font-family: var(--font-2);
font-weight: 700;
letter-spacing: 0em;
height: var(--btn-height);
line-height: calc(var(--btn-height) - 8px);
padding: 0 3.6rem;
margin: 0 0.4rem var(--vspace-0_5) 0;
color: var(--color-btn-text);
text-decoration: none;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: all 0.3s;
border-radius: 0;
background-color: var(--color-6);
border: 2px solid var(--color-6);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: 40px;
}
.btn:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
background-color: black;
border-color: black;
color: white;
outline: 0;
}
/* button primary
*/
.btn.btn--primary,
button.btn--primary,
input[type="submit"].btn--primary,
input[type="reset"].btn--primary,
input[type="button"].btn--primary {
background: var(--color-btn-primary);
border-color: var(--color-btn-primary);
color: var(--color-btn-primary-text);
}
.btn.btn--primary:focus,
button.btn--primary:focus,
input[type="submit"].btn--primary:focus,
input[type="reset"].btn--primary:focus,
input[type="button"].btn--primary:focus,
.btn.btn--primary:hover,
button.btn--primary:hover,
input[type="submit"].btn--primary:hover,
input[type="reset"].btn--primary:hover,
input[type="button"].btn--primary:hover {
background: var(--color-btn-primary-hover);
border-color: var(--color-btn-primary-hover);
color: var(--color-btn-primary-hover-text);
}
input[type="submit"] {
margin-top: var(--vspace-0_75);
color: white;
background-color: var(--color-3);
border: 2px solid var(--color-3);
padding: 0 4rem;
margin-right: 10px;
text-align: center;
font-size: 2.7rem !important;
font-weight: 600;
font-family: var(--font-1);
}
input[type="submit"]:hover {
color: var(--color-3);
background-color: var(--color-1);
border: 2px solid var(--color-1);
}
input[type="submit"]:disabled {
background-color: rgba(105, 105, 105, 0.9) !important;
border: 2px solid rgba(105, 105, 105, 0.9) !important;
color: white !important;
}
input[type="submit"]:disabled {
cursor: not-allowed;
}
/* button modifiers
*/
.btn.u-fullwidth,
button.u-fullwidth {
width: 100%;
margin-right: 0;
}
/*.btn--small,
button.btn--small {
--btn-height : calc(var(--vspace-btn) - 1.6rem);
}*/
.btn--medium,
button.btn--medium {
--btn-height: calc(var(--vspace-btn) + 0.8rem);
}
.btn--large,
button.btn--large {
--btn-height: calc(var(--vspace-btn) + 1.6rem);
}
.btn--pill,
button.btn--pill {
padding-left: 3.2rem !important;
padding-right: 3.2rem !important;
border-radius: 1000px !important;
}
/* ===================================================================
* # TABLE
*
*
* ------------------------------------------------------------------- */
table {
border-width: 0;
width: 100%;
max-width: 100%;
font-family: var(--font-1);
border-collapse: collapse;
}
th,
td {
padding: var(--vspace-0_5) 3.2rem calc(var(--vspace-0_5) - 1px);
text-align: left;
border-bottom: 1px solid var(--color-border);
}
th {
padding: var(--vspace-0_5) 3.2rem;
color: var(--color-text-dark);
font-family: var(--font-1);
font-weight: 600;
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ===================================================================
* # COMPONENTS
*
*
* ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
* ## pagination
* ------------------------------------------------------------------- */
.pgn {
--pgn-num-height: calc(var(--vspace-1) + 0.4rem);
margin: 0 auto var(--vspace-1);
text-align: center;
}
.pgn ul {
display: inline-flex;
flex-flow: row wrap;
justify-content: center;
list-style: none;
margin-left: 0;
position: relative;
padding: 0 6rem;
}
.pgn ul li {
margin: 0;
padding: 0;
}
.pgn__num {
font-family: var(--font-1);
font-weight: 600;
font-size: var(--text-size);
line-height: var(--vspace-1);
display: block;
padding: 0.2rem 1.2rem;
height: var(--pgn-num-height);
margin: 0.2rem 0.2rem;
color: var(--color-text-dark);
border-radius: var(--border-radius);
transition: all, 0.3s, ease-in-out;
}
.pgn__num:focus,
.pgn__num:hover {
background: var(--color-text-dark);
color: var(--color-white);
}
.pgn .current,
.pgn .current:focus,
.pgn .current:hover {
background: var(--color-text-dark);
color: var(--color-white);
}
.pgn .inactive,
.pgn .inactive:focus,
.pgn .inactive:hover {
opacity: 0.4;
cursor: default;
}
.pgn__prev,
.pgn__next {
display: inline-flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
height: var(--pgn-num-height);
width: 4.8rem;
line-height: var(--vspace-1);
border-radius: 4px;
padding: 0;
margin: 0;
opacity: 1;
font: 0/0 a;
text-shadow: none;
color: transparent;
transition: all, 0.3s, ease-in-out;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
.pgn__prev:focus,
.pgn__prev:hover,
.pgn__next:focus,
.pgn__next:hover {
background: var(--color-text-dark);
}
.pgn__prev svg,
.pgn__next svg {
height: 2.4rem;
width: 2.4rem;
transition: all, 0.3s, ease-in-out;
}
.pgn__prev svg path,
.pgn__next svg path {
stroke: var(--color-text-dark);
}
.pgn__prev:focus svg path,
.pgn__prev:hover svg path,
.pgn__next:focus svg path,
.pgn__next:hover svg path {
stroke: white;
}
.pgn__prev {
left: 0;
}
.pgn__next {
right: 0;
}
.pgn__prev.inactive,
.pgn__next.inactive {
opacity: 0.4;
cursor: default;
}
.pgn__prev.inactive:focus,
.pgn__prev.inactive:hover,
.pgn__next.inactive:focus,
.pgn__next.inactive:hover {
background-color: transparent;
}
/* -------------------------------------------------------------------
* responsive:
* pagination
* ------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
.pgn ul {
padding: 0 5.2rem;
}
}
/* -------------------------------------------------------------------
* ## alert box
* ------------------------------------------------------------------- */
.alert-box {
padding: var(--vspace-0_75) 4rem var(--vspace-0_75) 3.2rem;
margin-bottom: var(--vspace-1);
border-radius: var(--border-radius);
font-family: var(--font-1);
font-size: 2.7rem;
font-weight: 600;
line-height: var(--vspace-0_75);
opacity: 1;
visibility: visible;
position: relative;
}
.alert-box__close {
position: absolute;
display: block;
right: 1.6rem;
top: 1.6rem;
cursor: pointer;
width: 12px;
height: 12px;
}
.alert-box__close::before,
.alert-box__close::after {
content: "";
display: inline-block;
width: 1px;
height: 12px;
position: absolute;
top: 0;
left: 5px;
}
.alert-box__close::before {
transform: rotate(45deg);
}
.alert-box__close::after {
transform: rotate(-45deg);
}
.alert-box--error {
background-color: var(--color-error);
color: var(--color-error-content);
}
.alert-box--error .alert-box__close::before,
.alert-box--error .alert-box__close::after {
background-color: var(--color-error-content);
}
.alert-box--success {
background-color: var(--color-success);
color: var(--color-success-content);
}
.alert-box--success .alert-box__close::before,
.alert-box--success .alert-box__close::after {
background-color: var(--color-success-content);
}
.alert-box--info {
background-color: var(--color-info);
color: var(--color-info-content);
}
.alert-box--info .alert-box__close::before,
.alert-box--info .alert-box__close::after {
background-color: var(--color-info-content);
}
.alert-box--notice {
background-color: var(--color-notice);
color: var(--color-notice-content);
}
.alert-box--notice .alert-box__close::before,
.alert-box--notice .alert-box__close::after {
background-color: var(--color-notice-content);
}
.alert-box.hideit {
opacity: 0;
visibility: hidden;
transition: all 0.5s;
}
/* ===================================================================
* # PROJECT-WIDE SHARED STYLES
*
*
* ------------------------------------------------------------------- */
.wide {
max-width: var(--width-wide);
}
.wider {
max-width: var(--width-wider);
}
.narrow {
max-width: var(--width-narrow);
}
.body-text-sm {
font-size: calc(var(--text-size) * 0.8889);
line-height: calc(0.9375 * var(--space));
}
/* -------------------------------------------------------------------
* ## fade in up effect
* ------------------------------------------------------------------- */
[data-animate-el] {
--transition-delay: 0ms;
transition-timing-function: cubic-bezier(0.28, 0.12, 0.22, 1);
transition-property: opacity, visibility, transform;
transition-duration: 1s;
transition-delay: var(--transition-delay);
opacity: 0;
visibility: hidden;
transform: translate(0, 150%);
}
.act-animated [data-animate-el] {
opacity: 1;
visibility: visible;
transform: translate(0, 0);
}
/* -------------------------------------------------------------------
* ## media classes
* ------------------------------------------------------------------- */
/* floated image
*/
img.u-pull-right {
margin: var(--vspace-0_5) 0 var(--vspace-0_5) var(--vspace-0_875);
}
img.u-pull-left {
margin: var(--vspace-0_5) var(--vspace-0_875) var(--vspace-0_5) 0;
}
/* responsive video container
*/
.video-container {
--aspect-ratio: 16/9;
position: relative;
height: 0;
overflow: hidden;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* -------------------------------------------------------------------
* ## swiper overrides
* ------------------------------------------------------------------- */
.swiper-container .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 1.2rem;
}
.swiper-container .swiper-pagination-bullet {
width: 6px;
height: 6px;
background: rgba(0, 0, 0, 0.3);
opacity: 1;
}
.swiper-container .swiper-pagination-bullet-active {
background: black;
opacity: 1;
}
/* -------------------------------------------------------------------
* ## bricks masonry
* ------------------------------------------------------------------- */
.bricks {
--brick-padding: 0rem;
padding-bottom: var(--vspace-4);
}
.brickact--half-top-padding {
padding-top: var(--vspace-2_5);
}
.bricks .masonry {
max-width: 1520px;
width: 100%;
margin: 0 auto 0;
overflow: hidden;
}
.bricks .pagination {
margin-top: var(--vspace-2);
}
.brickact-wrapper {
position: relative;
margin-top: calc(var(--brick-padding) * -1);
}
.brickact-wrapper .grid-sizer,
.brickact-wrapper .brick {
width: 25%;
}
.brickact-wrapper .brick {
float: left;
padding: var(--brick-padding) var(--brick-padding) 0;
}
/* -------------------------------------------------------------------
* ## masonry entries
* ------------------------------------------------------------------- */
.brickact-wrapper .entry__thumb {
overflow: hidden;
position: relative;
}
.brickact-wrapper .entry__thumb img {
vertical-align: bottom;
transition: all 0.3s ease-in-out;
margin: 0;
}
.brickact-wrapper .entry__thumb .thumb-link::before {
z-index: 1;
content: "";
display: block;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
width: 100%;
height: 100%;
transition: all 0.3s ease-in-out;
position: absolute;
top: 0;
left: 0;
}
.brickact-wrapper .entry__thumb .thumb-link::after {
z-index: 1;
display: block;
content: "...";
font-family: georgia, serif;
font-size: 2.4rem;
height: 90px;
width: 90px;
letter-spacing: 0.2rem;
line-height: 90px;
margin-left: -45px;
margin-top: -55px;
text-align: center;
color: white;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transition: all 0.3s ease-in-out;
position: absolute;
left: 50%;
top: 50%;
}
.brickact-wrapper .entry__thumb:hover .thumb-link::before {
opacity: 1;
visibility: visible;
}
.brickact-wrapper .entry__thumb:hover .thumb-link::after {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.brickact-wrapper .entry__thumb:hover .thumb-link img {
transform: scale(1.05);
}
.brickact-wrapper .entry__text {
padding: var(--vspace-1) 0 calc(var(--vspace-1) + 2px);
}
.brickact-wrapper .entry__header {
margin: 0;
text-align: left;
}
.brickact-wrapper .entry__title {
font-size: var(--text-xl);
font-weight: 400;
line-height: calc(var(--vspace-1) + var(--vspace-0_125));
letter-spacing: -0.02em;
margin-top: 0;
margin-bottom: var(--vspace-0_875);
}
.brickact-wrapper .entry__title a,
.brickact-wrapper .entry__title a:visited {
color: black;
}
.brickact-wrapper .entry__title a:focus,
.brickact-wrapper .entry__title a:hover {
color: rgba(0, 0, 0, 0.8);
}
.brickact-wrapper .entry__meta {
display: block;
font-family: var(--font-1);
font-weight: 400;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 0.1em;
line-height: 1.455;
color: black;
margin-bottom: var(--vspace-0_375);
}
.brickact-wrapper .entry__meta a {
font-weight: 300;
color: var(--color-gray-15);
}
.brickact-wrapper .entry__meta a:focus,
.brickact-wrapper .entry__meta a:hover {
color: black;
}
.brickact-wrapper .entry__meta .cat-links,
.brickact-wrapper .entry__meta .byline {
display: inline-block;
}
.brickact-wrapper .entry__meta .cat-links {
margin-right: 0.8rem;
}
.brickact-wrapper .entry__meta .cat-links a::after {
content: ", ";
}
.brickact-wrapper .entry__meta .cat-links a:last-child::after {
display: none;
}
.brickact-wrapper .entry__excerpt {
font-weight: 400;
font-size: 1.5rem;
line-height: 1.733;
}
.brickact-wrapper .entry__excerpt p {
margin-bottom: var(--vspace-0_75);
}
.brickact-wrapper .entry__more-link {
display: inline-block;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: black;
border-bottom: 1px solid transparent;
}
.brickact-wrapper .entry__more-link:focus,
.brickact-wrapper .entry__more-link:hover {
border-bottom: 1px solid black;
}
/* -------------------------------------------------------------------
* responsive:
* project-wide and shared styles
* ------------------------------------------------------------------- */
@media screen and (max-width: 1600px) {
.bricks {
--brick-padding: 2.8rem;
}
}
@media screen and (max-width: 1500px) {
.bricks {
--brick-padding: 4rem;
}
.bricks .masonry {
max-width: 1280px;
}
.brickact-wrapper .grid-sizer,
.brickact-wrapper .brick {
width: 33.3333%;
}
}
@media screen and (max-width: 1200px) {
.bricks {
--brick-padding: 2.8rem;
}
}
@media screen and (max-width: 1080px) {
.bricks {
--brick-padding: 4rem;
}
.brickact-wrapper .grid-sizer,
.brickact-wrapper .brick {
width: 50%;
}
}
@media screen and (max-width: 900px) {
.bricks {
--brick-padding: 2.8rem;
}
}
@media screen and (max-width: 800px) {
.bricks {
--brick-padding: 2.4rem;
}
}
@media screen and (max-width: 700px) {
.bricks {
--brick-padding: 4rem;
}
.bricks .masonry {
max-width: 500px;
}
/* .brickact-wrapper .grid-sizer,
.brickact-wrapper .brick {
width : 100%;
}*/
}
@media screen and (max-width: 420px) {
.bricks .masonry {
width: 100%;
}
.brickact-wrapper .brick {
padding-right: 8vw;
padding-left: 8vw;
}
.brickact-wrapper .entry__title {
font-size: calc(var(--text-size) * 1.659);
}
}
/* ===================================================================
* # PAGE WRAP
*
*
* ------------------------------------------------------------------- */
.act-pagewrap {
display: flex;
flex-direction: column;
min-height: 100%;
overflow: hidden;
position: relative;
}
/* ===================================================================
* # SITE HEADER
*
*
* ------------------------------------------------------------------- */
.act-header {
z-index: 100;
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: calc(var(--vspace-1) + 10px) 0 calc(var(--vspace-1) + 10px);
background-color: white;
}
@media screen and (max-width: 1550px) {
.act-header {
height: 100px;
padding: calc(var(--vspace-0_75) + 5px) 0 calc(var(--vspace-0_75) + 10px);
}
}
@media screen and (max-width: 1200px) {
.act-header {
height: 80px;
}
}
@media screen and (max-width: 420px) {
.act-header {
height: 60px;
padding: calc(var(--vspace-0_75) - 5px) 0 calc(var(--vspace-0_75) - 8px);
}
}
/* --------------------------------------------------------------------
* ## branding
* -------------------------------------------------------------------- */
.act-header__branding {
z-index: 301;
font-family: var(--font-1);
font-size: 2.8rem;
line-height: 1;
letter-spacing: -0.03em;
transform: translateY(-50%);
position: absolute;
top: calc(50% - 10px);
left: 3.6rem;
}
.act-header__branding .site-title {
margin: 0;
padding: 0;
}
.act-header__branding a {
margin: 0;
padding: 0;
outline: 0;
border: none;
color: black;
display: block;
}
.act-home .act-header__branding a {
color: white;
}
.act-header__branding img {
width: 245px;
height: auto;
margin-bottom: 0;
}
@media screen and (max-width: 1550px) {
.act-header__branding img {
width: 200px;
}
}
@media screen and (max-width: 1200px) {
.act-header__branding img {
margin-top: 16px;
width: 170px;
}
}
@media screen and (max-width: 600px) {
.act-header__branding img {
width: 160px;
margin-top: 10px;
}
}
@media screen and (max-width: 420px) {
.act-header__branding img {
width: 140px;
margin-top:10px
}
}
/* --------------------------------------------------------------------
* ## main navigation
* -------------------------------------------------------------------- */
.act-header__navigation {
max-width: none;
width: 100%;
}
.act-header__nav-wrap {
display: flex;
justify-content: center;
margin-left: 6rem;
margin-right: 6rem;
width: 100%;
}
/*.act-home .act-header__nav-wrap {
margin-left : 50%;
}*/
.act-header__nav-wrap .act-header__nav-heading {
display: none;
font-family: var(--font-1);
font-weight: 300;
font-size: var(--text-size);
color: var(--color-text-light);
letter-spacing: -0.02em;
padding-left: 3.2rem;
margin-top: 0;
margin-bottom: 30px;
position: relative;
visibility: hidden;
}
.act-header__nav-wrap .act-header__nav-heading::before {
content: "";
display: block;
width: 2rem;
height: 1px;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: 50%;
left: 0;
}
.act-header__nav {
list-style: none;
display: flex;
flex-flow: row nowrap;
margin: 0;
padding: 0;
}
.act-header__nav a {
display: inline-block;
font-family: var(--font-1);
font-size: 2.4rem;
font-weight: 600;
line-height: 4rem;
color: var(--color-3);
transition-property: color, background-color;
text-decoration: none;
}
.act-header__nav a:hover {
color: black;
}
.act-header__nav li {
padding: 0 1.8rem;
/*position : relative;*/
}
.act-header__nav li.menu-item-has-children > a {
padding-right: 1.2rem;
position: relative;
}
.act-header__nav li.menu-item-has-children > a::after {
background: url(../images/arrow-down.svg) center / contain no-repeat;
content: "";
display: block;
width: 23px;
height: 18px;
pointer-events: none;
position: absolute;
right: -15px;
top: 50%;
margin-top: 2px;
transform: translateY(-50%) rotate(0deg);
transform-origin: center;
transition: transform 0.3s ease;
}
.act-header__nav li.sub-menu-is-open > ul {
opacity: 1;
visibility: visible;
transform: translate(0, 0);
}
.act-header__nav li.sub-menu-is-open > a::after,
.act-header__nav li > a[aria-expanded="true"]::after {
transform: translateY(-50%) rotate(180deg);
}
.act-header__nav .current-menu-item > a {
border-bottom: 1px solid var(--color-1);
}
.act-header__nav ul {
z-index: 200;
margin: 0;
padding: 3rem 2rem;
background: white;
border-radius: 0;
transform: translate(0);
transition: all 0.5s;
opacity: 0;
visibility: hidden;
position: absolute;
top: calc(100% - 1px);
left: 0;
}
.act-header__nav ul ul {
position: absolute;
top: 0;
left: calc(100% + 1px);
border-radius: 0;
padding-top: 1.2rem;
}
.act-header__nav ul li {
display: block;
text-align: left;
padding: 0;
margin: 0;
min-height: 3.2rem;
width: 100%;
}
.act-header__nav ul li a {
display: block;
white-space: nowrap;
padding: 0.6rem 3rem 0.6rem 3rem;
font-family: var(--font-1);
font-weight: 400;
font-size: 2.35rem;
line-height: 3.3rem;
color: var(--color-3);
position: relative;
}
.act-header__nav ul li a:focus,
.act-header__nav ul li a:hover {
color: black;
}
.act-header__nav li:hover > ul {
opacity: 1;
visibility: visible;
transform: translate(0, 0);
}
/*.act-header__nav ul li a::before {
border-bottom: 2px solid red;
border-right: 2px solid red;
content: '';
display: block;
height: 7px;
width: 7px;
margin-top: -4px;
pointer-events: none;
transform: rotate(-50deg);
transition: all .3s;
position: absolute;
left: 12px;
top: calc(50% + 3px);
}
.act-header__nav ul li a:hover::before {
left: 15px;
}*/
.act-header__nav ul li.sub-menu-title {
left: 0px;
padding: 0.6rem 3rem 3.4rem 1.2rem;
font-size: var(--text-xxxl);
font-family: var(--font-2);
font-weight: 600;
color: var(--color-2);
}
.act-header__donate {
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
position: absolute;
top: 50%;
right: 6.2rem;
}
.act-header__donate a {
font-size: 2rem;
margin-right:16px;
font-weight: 600;
}
.act-header__donate a.btn {
--button-background: var(--color-1);
border-radius: 999px;
padding: 0.55em 1.3em 0.55em 0.9em;
}
.act-header__donate a.btn::after {
display:none
}
@media screen and (min-width: 1201px) {
.act-header__nav.act-header__donate li {
padding: 0 1.8rem;
}
}
@media screen and (max-width: 1200px) {
.act-header__donate {
right: 8.6rem;
}
}
@media screen and (max-width: 400px) {
.act-header__donate {
right: 9rem;
}
}
@media screen and (max-width: 1410px) {
.act-header__nav a {
font-size: 1.85rem;
}
.act-header__donate a {
font-size: 1.85rem;
margin-right:12px;
}
.act-header__donate a.btn {
--button-background: var(--color-1);
padding: 0.50em 1em 0.550em 0.7em;
}
}
@media screen and (max-width: 1200px) {
.act-header__nav ul li.sub-menu-title {
display: none;
}
}
@media screen and (max-width: 600px) {
.act-header__donate a {
padding: 7px 17px 8px 14px !important;
border-radius: 40px;
}
}
@media screen and (max-width: 432px) {
.act-header__donate a.btn {
display:none
}
}
/* --------------------------------------------------------------------
* ## mobile menu toggle
* -------------------------------------------------------------------- */
.act-header__menu-toggle {
display: none;
border: 0;
background: transparent;
padding: 0;
margin: 0;
min-height: 0;
box-shadow: none;
font: inherit;
z-index: 301;
width: 6.8rem;
height: 7.2rem;
transform: translateY(-50%);
position: absolute;
top: 50%;
right: 0.6rem;
}
.act-header__menu-toggle:hover {
background: white;
}
@media screen and (max-width: 400px) {
.act-header__menu-toggle {
width: 5.8rem;
right: 0.3rem;
}
}
.act-header__menu-toggle span {
display: block;
background-color: var(--color-3);
width: 22px;
height: 2px;
margin-top: -1px;
font: 0/0 a;
text-shadow: none;
color: transparent;
transition: background-color 0.3s ease-in-out;
position: absolute;
right: 23px;
top: 50%;
bottom: auto;
left: auto;
}
.act-header__menu-toggle span::before,
.act-header__menu-toggle span::after {
content: "";
width: 100%;
height: 100%;
transition: transform 0.3s ease-in-out;
background-color: inherit;
position: absolute;
left: 0;
}
.act-header__menu-toggle span::before {
top: -8px;
}
.act-header__menu-toggle span::after {
bottom: -8px;
}
/* is clicked
*/
.act-header__menu-toggle.is-clicked span {
background-color: white;
transition: all 0.1s;
}
.act-header__menu-toggle.is-clicked span::before,
.act-header__menu-toggle.is-clicked span::after {
background-color: black;
}
.act-header__menu-toggle.is-clicked span::before {
top: 0;
transform: rotate(135deg);
}
.act-header__menu-toggle.is-clicked span::after {
bottom: 0;
transform: rotate(225deg);
}
/* -------------------------------------------------------------------
* ## header-search
* ------------------------------------------------------------------- */
.act-header__search {
z-index: 302;
display: block;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
transition: all 0.3s 0.5s;
}
.act-header__search-inner {
background-color: var(--color-3);
height: var(--vspace-3);
width: 100%;
transform: translateY(-200%);
transition: transform 0.5s 0.3s cubic-bezier(0, 0.55, 0.45, 1);
position: absolute;
top: 0;
left: 0;
}
.act-header__search-form {
width: 100%;
padding: 0 var(--gutter);
margin: 0;
}
.act-header__search-form label {
margin: 0;
}
.act-header__search-form input[type="search"] {
--input-height: var(--vspace-3);
background-color: transparent;
color: white;
height: auto;
width: 100%;
font-family: var(--font-1);
font-weight: 400;
font-size: var(--text-md);
line-height: 1;
border: transparent;
margin: 0;
text-align: center;
}
.act-header__search-form input[type="search"]::-webkit-search-decoration,
.act-header__search-form input[type="search"]::-webkit-search-cancel-button,
.act-header__search-form input[type="search"]::-webkit-search-resultact-button,
.act-header__search-form
input[type="search"]::-webkit-search-resultact-decoration {
-webkit-appearance: none;
}
.act-header__search-form input[type="search"]::-webkit-input-placeholder {
color: white;
opacity: 1;
}
.act-header__search-form input[type="search"]:-moz-placeholder {
color: white;
opacity: 1;
}
.act-header__search-form input[type="search"]::-moz-placeholder {
color: white;
opacity: 1;
}
.act-header__search-form input[type="search"]:-ms-input-placeholder {
color: white;
opacity: 1;
}
.act-header__search-form input[type="search"].placeholder {
color: white;
opacity: 1;
}
.act-header__search-form input[type="search"]:focus {
outline: none;
color: white;
box-shadow: none;
}
.act-header__search-form input[type="submit"] {
display: none;
}
body.search-is-visible .act-header__search {
transition: all 0.3s;
opacity: 1;
visibility: visible;
}
body.search-is-visible .act-header__search-inner {
transform: none;
}
.error404 .page-content input[type="submit"] {
background-color: var(--color-3);
color: white;
}
.error404 .page-content input[type="submit"]:hover {
background-color: var(--color-1);
color: var(--color-3);
}
/* -------------------------------------------------------------------
* ## close button for search
* ------------------------------------------------------------------- */
.act-header__search-close {
display: block;
border: 0;
padding: 0;
background-color: var(--color-1);
width: 36px;
height: 36px;
border-radius: 50%;
font: 0/0 a;
text-shadow: none;
color: transparent;
transform: translateY(-50%);
position: absolute;
top: 100%;
right: 2.8rem;
}
.act-header__search-close::before,
.act-header__search-close::after {
content: "";
display: inline-block;
width: 2px;
height: 14px;
background-color: var(--color-3);
position: absolute;
top: 11px;
left: 17px;
}
.act-header__search-close::before {
transform: rotate(45deg);
}
.act-header__search-close::after {
transform: rotate(-45deg);
}
/* -------------------------------------------------------------------
* ## search triggers
* ------------------------------------------------------------------- */
.act-header__search-trigger {
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
position: absolute;
top: 50%;
right: 3.6rem;
}
button.act-header__search-trigger {
display: inline-block;
border: 0;
background: transparent;
padding: 0;
margin: 0;
min-height: 0;
box-shadow: none;
font-family: var(--font-2);
font-size: 1.8rem;
font-weight: 400;
line-height: 1rem;
color: var(--color-3);
transition-property: color, background-color;
width: 30px;
height: 30px;
border-radius: 50px;
}
button.act-header__search-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
padding: 0;
/*color: var(--color-gray-1);
background-color: var(--color-2);
border-radius: 50%;*/
line-height: 1;
text-decoration: none;
transition:
color 0.3s ease,
background-color 0.3s ease,
transform 0.3s ease;
}
button.act-header__search-trigger svg {
display: block;
width: 40px;
height: 40px;
color: var(--color-3);
}/*a.act-header__search-trigger:hover svg {
color: white;
}*/
/* Hover and keyboard focus */
button.act-header__search-trigger:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
button.act-header__search-trigger {
transition: none;
}
html:focus-within {
scroll-behavior: auto;
}
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* -------------------------------------------------------------------
* responsive:
* site-header
* ------------------------------------------------------------------- */
@media screen and (max-width: 1400px) {
.act-home .act-header__nav > li {
padding: 0 1rem;
}
.act-home .act-header__nav > li > a {
font-size: 1.6rem;
}
}
@media screen and (min-width: 1201px) {
.act-header__nav ul {
border-bottom: solid 1px rgba(0, 0, 0, 0.065);
}
.act-header__nav li {
padding: 0 1.8rem 0 1.8rem;
}
.act-header__nav li.menu-item-has-children:hover > a::after,
.act-header__nav li.act-children:focus > a::after {
transform: translateY(-50%) rotate(180deg);
}
.act-header__nav li.active > a {
border: none;
/*color: var(--color-2);*/
text-decoration: underline;
}
.act-header__nav li ul {
display: block;
/*width: 100vw;*/
width: 70%;
float: right;
position: absolute;
/*left: 0;*/
right: 0;
overflow: hidden;
}
ul.main-dropdown {
margin-left: 30%;
columns: 2;
}
.act-header__nav ul li {
/*width: 30%;*/
width: 70%;
}
.act-header__nav ul li a {
font-weight: 600;
}
.act-header__nav ul.mega-menu-wrapper li {
/*width: 50%!important;*/
width: 100% !important;
display: inline-block;
}
.act-header__nav .mega-menu-wrapper {
position: absolute;
right: 0;
/*left:30%;
width: 70%;*/
width: 30%;
right: 0%;
background-color: var(--color-4);
height: 40vh;
padding: 30px;
z-index: 201;
}
.act-header__nav .mega-menu-wrapper h3 {
margin-top: 0;
margin-bottom: 12px;
font-size: var(--text-xxxl);
line-height: calc(1.3 * var(--space));
}
.act-header__nav .mega-menu-wrapper p {
font-size: 18px;
line-height: 22px;
margin-bottom: 20px;
}
.act-header__nav .mega-menu-wrapper a {
padding: 7px 20px 12px;
background-color: var(--color-6);
color: black;
line-height: normal;
border-radius: 40px;
display: inline-block;
font-family: var(--font-2);
font-size: 2rem;
font-weight: 600;
line-height: 2.6rem;
transition-property: color, background-color;
}
.act-header__nav .mega-menu-wrapper a::after {
display: none;
}
.act-header__nav .mega-menu-wrapper a:hover {
padding: 7px 20px 12px;
background-color: black;
color: white;
line-height: normal;
}
}
@media screen and (max-width: 1675px) {
.act-header__nav ul li a {
font-weight: 600;
font-size: 1.8rem;
}
}
@media screen and (max-width: 1400px) {
.act-header__nav ul li a {
letter-spacing: -0.45px;
}
}
@media screen and (max-width: 1330px) {
.act-header__nav ul li a {
font-size: 1.6rem;
}
}
@media screen and (max-width: 1200px) {
.act-header__nav .mega-menu-wrapper {
display: none;
}
.act-header__branding {
left: 2.8rem;
}
.act-header__nav-wrap {
z-index: 300;
display: block;
opacity: 0;
visibility: hidden;
background-color: white;
width: 100%;
height: 100%;
margin: 0 !important;
padding: var(--vspace-1_5) 0;
border: none;
overflow-y: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.act-header__nav-wrap .act-header__nav-heading {
display: inline-block;
margin-left: 5.6vw;
}
.act-header__nav-wrap .act-header__nav {
display: block;
counter-reset: ctr;
padding: 0 6vw var(--vspace-1);
}
.act-header__nav-wrap .act-header__nav > li.act-children > a {
padding-right: 1.6rem;
}
.act-header__nav-wrap .act-header__nav > li a {
font-size: var(--text-xxxl);
line-height: 1.6;
padding-left: 2.4rem;
color: black;
}
.act-header__nav-wrap .act-header__nav > li a:hover {
color: var(--color-1);
}
.act-header__nav-wrap .act-header__nav > li::before {
content: counter(ctr, decimal-leading-zero);
counter-increment: ctr;
display: inline;
font-family: var(--font-1);
font-weight: 400;
font-size: var(--text-xs);
color: black;
transform: translateY(-50%);
position: absolute;
left: 0;
top: 2.8em;
}
.act-header__nav-wrap .act-header__nav li {
display: block;
padding: 0;
text-align: left;
position: relative;
}
.act-header__nav-wrap .act-header__nav li ul {
width: 100%;
opacity: 0;
visibility: visible;
height: auto;
max-height: 0;
overflow: hidden;
transform: translate(0, 0);
background-color: transparent;
padding: 0;
position: static;
}
.act-header__nav-wrap .act-header__nav li.sub-menu-is-open > ul {
opacity: 1;
max-height: 1000px;
}
.act-header__nav-wrap .act-header__nav li.menu-item-has-children > a::after {
top: 0.85em;
}
.act-header__nav-wrap .act-header__nav li.sub-menu-is-open > a::after {
transform: translateY(-50%) rotate(180deg);
}
.act-header__nav li.active > a {
color: var(--color-2);
}
.act-header__nav-wrap .act-header__nav li ul li a {
font-size: calc(var(--text-size) * 1);
font-weight: 400;
line-height: var(--vspace-0_5);
color: var(--color-text-light);
padding: 0.4rem 1.6rem 0.2rem 3.2rem;
white-space: normal !important;
}
.act-header__nav-wrap .act-header__nav li ul li a:focus,
.act-header__nav-wrap .act-header__nav li ul li a:hover {
color: var(--color-text-black);
}
.act-header__nav ul li a::after {
left: 24px;
}
.act-header__nav-wrap .act-header__nav li.current-menu-item a {
border: none;
color: black;
text-decoration: underline
}
.act-header__menu-toggle {
display: block;
}
.act-header__search-trigger {
right: 6.4rem;
}
.act-header__search-trigger svg {
height: 3.2rem;
width: 3.2rem;
}
.act-home .act-header__nav li > a {
font-size: var(--text-xxl);
color: black;
}
body.menu-is-open .act-header__nav-wrap {
opacity: 1;
visibility: visible;
}
}
@media screen and (max-width: 700px) {
.act-header__nav-wrap .act-header__nav > li a {
font-size: var(--text-xxl);
}
}
@media screen and (max-width: 700px) {
.act-header__branding {
left: 20px;
}
}
@media screen and (max-width: 600px) {
.act-header__nav-wrap .act-header__nav-heading {
margin-left: 7vw;
}
.act-header__nav-wrap .act-header__nav li ul li a {
font-size: 18px;
font-weight: 600;
padding: 0.4rem 1rem 2.2rem 3rem;
}
}
@media screen and (max-width: 430px) {
.act-header__branding {
left: 15px;
}
.act-header__nav-wrap .act-header__nav-heading {
margin-bottom: 14px;
}
.act-header__nav > li a {
font-size: var(--text-xxl);
padding-left: 2.2rem;
}
.act-header__nav > li::before {
top: 2.6rem;
}
.act-header__nav-wrap .act-header__nav > li a {
font-size: 30px;
}
.act-header__nav-wrap .act-header__nav li ul li a {
line-height: var(--vspace-0_75);
padding: 0.4rem 1rem 1.6rem 3rem;
}
.act-header__menu-toggle {
right: 0.25rem;
}
.act-header__search-trigger {
right: 6.1rem;
}
}
@media screen and (max-width: 400px) {
.act-header__nav li {
padding: 0 1rem 0 0;
}
}
@media screen and (max-width: 330px) {
.act-header__nav li {
padding: 0 0.5rem 0 0;
}
.act-header__branding img {
width: 120px;
}
}
/* --------------------------------------------------------------------
* ## NEW hero
* -------------------------------------------------------------------- */
.hero {
--entry-title-size: 6.6rem;
--text-multiplier: 1;
width: 100%;
min-height: calc(20.5);
position: relative;
box-sizing: border-box;
display: block;
padding-top: calc(var(--vspace-4) - 10px);
}
/* Stable, usable first slide before Owl loads (also works without JavaScript).
* Target slide wrappers only so Owl's generated stage and controls are intact. */
.hero.owl-carousel-hero {
display: block;
}
.hero.owl-carousel-hero > .act-hero-slide {
width: 100%;
min-width: 0;
}
.hero.owl-carousel-hero:not(.owl-loaded) > .act-hero-slide {
display: none;
}
.hero.owl-carousel-hero:not(.owl-loaded) > .act-hero-slide:first-child {
display: block;
}
.hero.owl-carousel-hero > .owl-stage-outer {
width: 100%;
}
@media screen and (max-width: 1550px) {
.hero {
padding-top: calc(var(--vspace-2_7) + 10px);
}
}
@media screen and (max-width: 1400px) {
.hero {
padding-top: calc(var(--vspace-2) - 24px);
}
}
@media screen and (max-width: 1200px) {
.hero {
padding-top: calc(var(--vspace-3) - 47px);
}
}
@media screen and (max-width: 600px) {
.hero {
padding-top: calc(var(--vspace-3) - 37px);
}
}
@media screen and (max-width: 420px) {
.hero {
padding-top: calc(var(--vspace-3) - 67px);
}
}
.hero .inner-header {
margin-top: 0;
}
.hero .inner-header .inner-header-img img {
height: auto;
}
@media (max-width: 1000px) {
.hero .inner-header-wrp {
margin: 0 auto 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: flex-start;
overflow: hidden;
}
.hero .inner-header .inner-header-text,
.hero .inner-header .inner-header-img {
flex-direction: column;
flex: 1 100%;
}
.hero .inner-header .inner-header-text {
text-align: center;
padding-bottom: 0;
padding-top: var(--vspace-1);
}
}
.hero .inner-header .inner-header-text h1 {
font-family: var(--font-3);
}
.hero .inner-header .inner-header-text h4 {
margin-top: 0;
color: var(--color-3);
font-family: var(--font-1);
font-weight: 400;
}
.hero .inner-header .inner-header-text h1,
.hero .inner-header .inner-header-text h4,
.hero .inner-header .inner-header-text .btn-wrp {
margin: 0 3rem 2rem 6rem;
}
@media (max-width: 1400px) {
.hero .inner-header .inner-header-text h1,
.hero .inner-header .inner-header-text h4,
.hero .inner-header .inner-header-text .btn-wrp {
margin: 0 3rem 1.5rem 3rem;
}
.hero .inner-header .inner-header-text h4 {
font-size: 20px;
line-height: 24px;
}
}
@media (max-width: 1200px) {
.hero .inner-header .inner-header-text h4 {
font-size: 18px;
line-height: 22px;
}
}
@media (max-width: 1000px) {
.hero .inner-header .inner-header-text h4 {
font-size: 16px;
line-height: 20px;
}
}
@media (max-width: 1000px) {
.hero .inner-header .inner-header-text .btn-wrp {
margin: 0 2rem 0 2rem;
}
}
@media (max-width: 650px) {
.hero .inner-header .inner-header-text .btn-wrp {
margin: 0 2rem 15px 2rem;
}
}
@media (min-width: 1800px) {
.hero .inner-header .inner-header-text {
padding-top: 0;
padding-bottom: 0;
}
}
.hero .hero__entry-text .btn-wrp,
.inner-header .inner-header-text .btn-wrp {
flex-direction: row;
}
.hero .hero__entry-text .btn-wrp .btn,
.inner-header .inner-header-text .btn-wrp .btn {
margin-top: var(--vspace-0_75);
margin-right: 40px;
font-size: 2.4rem;
--button-background: var(--color-1);
color: var(--color-3);
}
.hero .hero__entry-text .btn-wrp .btn:before,
.inner-header .inner-header-text .btn-wrp .btn:before {
color: var(--color-3);
}
.hero .hero__entry-text .btn-wrp .btn:after,
.inner-header .inner-header-text .btn-wrp .btn:after {
background: var(--color-1);
}
.hero .hero__entry-text .btn-wrp .btn:hover,
.inner-header .inner-header-text .btn-wrp .btn:hover {
background-color: var(--color-3);
color: white;
}
.hero .hero__entry-text .btn-wrp .btn:hover::before,
.inner-header .inner-header-text .btn-wrp .btn:hover::before {
color: white;
}
.hero .hero__entry-text .btn-wrp .btn:hover::after,
.inner-header .inner-header-text .btn-wrp .btn:hover::after {
background: var(--color-3);
}
/** Button Stroke **/
.hero .hero__entry-text .btn-wrp .btn--stroke,
.inner-header .inner-header-text .btn-wrp .btn--stroke {
--button-background: var(--color-3);
color: white;
}
.hero .hero__entry-text .btn-wrp .btn--stroke:before,
.inner-header .inner-header-text .btn-wrp .btn--stroke:before {
color: var(--color-3);
}
.hero .hero__entry-text .btn-wrp .btn--stroke:after,
.inner-header .inner-header-text .btn-wrp .btn--stroke:after {
background: var(--color-3);
}
.hero .hero__entry-text .btn-wrp .btn--stroke:hover,
.inner-header .inner-header-text .btn-wrp .btn--stroke:hover {
background-color: var(--color-1);
color: var(--color-3);
}
.hero .hero__entry-text .btn-wrp .btn--stroke:hover::before,
.inner-header .inner-header-text .btn-wrp .btn--stroke:hover::before {
color: var(--color-3);
}
.hero .hero__entry-text .btn-wrp .btn--stroke:hover::after,
.inner-header .inner-header-text .btn-wrp .btn--stroke:hover::after {
background: var(--color-1);
}
@media (max-width: 1400px) {
.hero .inner-header .inner-header-text .btn-wrp .btnn,
.inner-header .inner-header-text .btn-wrp .btn {
font-size: 2.1rem !important;
margin-top: 15px !important;
line-height: calc(45px - 4px);
height: 50px;
padding: 0 3rem;
}
}
@media (max-width: 1100px) {
.hero .inner-header .inner-header-text .btn-wrp .btnn,
.inner-header .inner-header-text .btn-wrp .btn {
font-size: 1.8rem !important;
line-height: calc(41px - 4px);
height: 45px;
padding: 0 2.4rem;
}
}
@media (max-width: 1000px) {
.hero .inner-header .inner-header-text .btn-wrp .btn,
.inner-header .inner-header-text .btn-wrp .btn {
margin-top: 5px !important;
margin-bottom: 0px !important;
}
}
@media (max-width: 500px) {
.hero .inner-header .inner-header-text .btn-wrp .btn,
.inner-header .inner-header-text .btn-wrp .btn {
font-size: 1.6rem !important;
line-height: calc(38px - 4px);
height: 40px;
padding: 0 2.2rem;
}
}
/* --------------------------------------------------------------------
* ## hero slider
* -------------------------------------------------------------------- */
.swiper-container-fade .swiper-slide {
transition-duration: 0ms !important;
}
.hero__slider {
--slider-bg-color: var(--color-grey-16);
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
min-height: calc(25.5 * var(--space));
}
.hero__slider .swiper-pagination {
font-size: var(--text-sm);
width: auto;
transform: translateY(-50%);
top: 50%;
right: 4rem;
left: auto;
bottom: auto;
}
.hero__slider .swiper-pagination .swiper-pagination-bullet {
display: block;
outline: none;
font-weight: 300;
width: auto;
height: auto;
background: transparent;
color: var(--color-gray-12);
margin: 1.4rem 0;
opacity: 1;
position: relative;
}
.hero__slider .swiper-pagination .swiper-pagination-bullet::before {
content: "0";
}
.hero__slider
.swiper-pagination
.swiper-pagination-bullet:nth-child(n + 10)::before {
content: none;
}
.hero__slider .swiper-pagination .swiper-pagination-bullet-active {
font-weight: 400;
color: var(--color-1);
}
.hero__slider .swiper-pagination .swiper-pagination-bullet-active::after {
content: "";
display: block;
background-color: white;
height: 1px;
width: 2.8rem;
position: absolute;
top: 50%;
right: -4rem;
pointer-events: none;
}
.hero__slide {
background-color: var(--slider-bg-color);
display: flex;
align-items: center;
position: relative;
}
.hero__slide::before {
content: "";
display: block;
background-color: black;
width: 50%;
height: 100%;
position: absolute;
top: 0;
right: 50%;
bottom: 0;
left: 0;
}
.hero__entry-image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 50%;
position: absolute;
top: 0;
right: 50%;
bottom: 0;
left: 0;
}
.hero__entry-image::before {
z-index: 2;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
pointer-events: none;
background: black;
background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, black 94%);
opacity: 0.3;
mix-blend-mode: multiply;
}
.hero__entry-text {
width: 50%;
display: flex;
justify-content: center;
margin-left: 50%;
margin-right: 6rem;
padding-top: calc(1.8rem + var(--vspace-3));
padding-bottom: var(--vspace-4);
}
.hero__entry-text-inner {
z-index: 2;
box-sizing: border-box;
background-color: var(--slider-bg-color);
padding: var(--vspace-1) 4rem var(--vspace-2) 6rem;
text-align: center;
max-width: 680px;
max-height: calc(20 * var(--space));
overflow: hidden;
position: relative;
}
/*.hero__entry-text-inner::after {
content : "";
display : block;
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
width : 100%;
height : 100%;
background : linear-gradient(180deg, rgba(249, 250, 251, 0) 95%, #f9fafb 100%);
pointer-events : none;
}*/
.hero__entry-meta {
margin-left: 0.4rem;
margin-bottom: var(--vspace-0_5);
}
.hero__entry-meta .cat-links a {
font-weight: 400;
color: var(--color-gray-1);
}
.hero__entry-meta .cat-links a::after {
content: ", ";
}
.hero__entry-meta .cat-links a:last-child::after {
display: none;
}
.hero__entry-meta .cat-links img {
display: block;
width: 60px;
height: auto;
margin: 0 auto 0;
margin-bottom: 7px;
}
.hero__entry-title {
font-size: calc(var(--entry-title-size) * var(--text-multiplier));
line-height: 1.158;
letter-spacing: -0.015em;
margin-top: 0;
margin-bottom: var(--vspace-0_75);
}
.hero__entry-title a {
color: var(--color-1);
}
.hero__entry-desc {
max-width: 540px;
margin-right: auto;
margin-left: auto;
color: var(--color-gray-1);
}
.hero__more-link {
display: inline-block;
color: var(--color-gray-1);
font-weight: 500;
font-size: 1.15rem;
text-transform: uppercase;
border-bottom: 1px solid transparent;
}
.hero__more-link:focus,
.hero__more-link:hover {
color: var(--color-text-dark);
border-bottom: 1px solid white;
}
.hero__entry-text-inner .btn--stroke {
background: transparent !important;
font-weight: 700;
border: 2px solid var(--color-btn-stroke-white);
color: var(--color-btn-stroke-text-white);
margin: var(--vspace-0_25) 0 0 0;
}
.hero__entry-text-inner .btn--stroke:hover {
border: 2px solid var(--color-btn-stroke-white-hover);
color: var(--color-btn-stroke-text-white-hover);
}
.owl-carousel-hero .owl-nav {
margin-top: 1.8rem;
margin-bottom: 1.5rem;
text-align: center;
-webkit-tap-highlight-color: transparent;
}
.owl-carousel-hero .owl-nav [class*="owl-"] {
color: #ffffff;
font-family: "montserrat-regular", sanact-serif;
font-size: 1.4rem;
height: 3rem;
line-height: 3rem;
margin: 0.6rem;
padding: 0 15px;
background: rgba(0, 0, 0, 0);
display: inline-block;
cursor: pointer;
border-radius: 3px;
}
.owl-carousel-hero .owl-nav [class*="owl-"]:hover {
background: rgba(0, 0, 0, 0);
color: #ffffff;
text-decoration: none;
}
.owl-carousel-hero .owl-nav .owl-next {
margin-left: 15px
}
.owl-carousel-hero .owl-nav .owl-prev {
margin-right: 15px
}
.owl-carousel-hero .owl-nav button:focus-visible,
.owl-carousel .owl-nav button:focus-visible {
background: transparent !important;
outline: 3px solid var(--color-3);
outline-offset: 3px;
}
.owl-carousel-hero .owl-item.active a:focus-visible,
.owl-carousel-hero .owl-item.active button:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
.owl-carousel-hero .owl-nav .disabled,
.owl-carousel-hero .owl-nav .disabled:hover,
.owl-carousel-hero .owl-nav .disabled:focus,
.owl-carousel-hero .owl-nav .disabled:focus-visible {
background: transparent !important;
cursor: default;
}
.owl-carousel-hero .owl-nav.disabled + .owl-dots {
margin-top: 0;
margin-left: 6rem;
}
@media screen and (max-width: 1300px) {
.owl-carousel-hero .owl-nav.disabled + .owl-dots {
margin-left: 5rem;
margin-right: 5rem;
}
}
@media screen and (max-width: 700px) {
.owl-carousel-hero .owl-nav.disabled + .owl-dots {
margin-left: 3rem;
}
}
@media screen and (max-width: 500px) {
.owl-carousel-hero .owl-nav.disabled + .owl-dots {
margin-left: 2rem;
}
}
.owl-carousel-hero .owl-dots {
/*text-align: center;*/
-webkit-tap-highlight-color: transparent;
}
.owl-carousel-hero .owl-dots .owl-dot {
display: inline-block;
zoom: 1;
*display: inline;
}
.owl-carousel-hero .owl-dots .owl-dot span {
width: 9px;
height: 9px;
background-color: var(--color-gray-6);
margin: 6px 6px;
display: block;
-webkit-backface-visibility: visible;
transition: opacity 200ms ease;
border-radius: 50%;
}
.owl-carousel-hero .owl-dots .owl-dot.active span,
.owl-carousel-hero .owl-dots .owl-dot:hover span {
background-color: var(--color-6);
}
.owl-carousel-hero .owl-nav {
bottom: 40px;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1100px) {
.owl-carousel-hero .owl-nav {
bottom: 10px;
}
}
@media (max-width: 650px) {
.owl-carousel-hero .owl-nav {
bottom: 25px;
}
}
.owl-carousel-hero .nav-btn {
position: relative;
height: 50px;
width: 50px;
cursor: pointer;
opacity: 1;
transition: all 0.3s;
overflow: visible !important;
}
.owl-carousel-hero .owl-prev.disabled,
.owl-carousel-hero .owl-next.disabled {
pointer-events: none;
opacity: 0.4;
}
.owl-carousel-hero .prev-slide {
background: url(../images/nav-prev.svg) no-repeat scroll 0 0;
left: 0rem;
height: 50px;
width: 50px;
}
.owl-carousel-hero .next-slide {
background: url(../images/nav-next.svg) no-repeat scroll 0 0px;
right: 0;
}
.owl-carousel-hero .prev-slide:hover {
background: url(../images/nav-prev-hover.svg) no-repeat scroll 0 0px;
}
.owl-carousel-hero .next-slide:hover {
background: url(../images/nav-next-hover.svg) no-repeat scroll 0 0px;
}
.owl-carousel-hero .owl-nav .owl-prev,
.owl-carousel-hero .owl-nav .owl-next {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
width: 50px;
height: 50px;
min-height: 50px;
padding: 0;
overflow: visible;
}
.owl-carousel-hero .owl-nav .nav-btn,
.client-lists.owl-carousel .owl-nav .nav-btn {
position: static;
display: block;
width: 100%;
height: 100%;
bottom: auto !important;
left: auto;
right: auto;
}
@media screen and (min-width: 1001px) {
.hero .inner-header-wrp {
align-items: stretch;
}
.hero .inner-header .inner-header-text {
display: flex;
flex-direction: column;
justify-content: center;
align-self: stretch;
}
}
/* --------------------------------------------------------------------
* ## hero scroll down
* -------------------------------------------------------------------- */
.hero__scroll-down {
z-index: 2;
display: flex;
align-items: center;
font-size: calc(var(--text-size) * 0.5556);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3em;
color: black !important;
position: absolute;
bottom: 4.4rem;
left: calc(100% - 3rem);
transform-origin: left bottom;
transform: rotate(-90deg);
width: 200px;
}
.hero__scroll-down svg {
margin-right: 1.2rem;
height: var(--vspace-0_625);
width: var(--vspace-0_625);
}
.hero__scroll-down svg path {
stroke: black;
}
/* ===================================================================
* # SITE CONTENT
*
*
* ------------------------------------------------------------------- */
/*.act-content {
padding-top : var(--vspace-5);
}*/
.act-content--blog .entry-wrap,
.act-content--page .entry-wrap {
padding-top: calc(1 * var(--space));
padding-bottom: calc(1 * var(--space));
}
.act-home .act-content {
padding-top: 0;
margin-top: var(--vspace-2_7);
background-color: white;
}
@media screen and (max-width: 1200px) {
.act-home .act-content {
margin-top: var(--vspace-1);
}
}
.act-content-nopadd {
padding-top: 0;
}
/* --------------------------------------------------------------------
* ## pageheader
* -------------------------------------------------------------------- */
.act-pageheader {
text-align: center;
}
.act-pageheader .row {
max-width: 900px;
}
.act-pageheader .page-title {
font-size: var(--text-display-3);
line-height: 1.085;
margin-top: 0;
margin-bottom: var(--vspace-1);
}
.act-pageheader .page-title__small-type {
display: block;
font-family: var(--font-1);
font-weight: 300;
font-size: calc(var(--text-size) * 0.8889);
letter-spacing: 0;
line-height: 1;
color: var(--color-text-light);
}
.act-pageheader + .bricks {
padding-top: var(--vspace-2);
}
/* -------------------------------------------------------------------
* responsive:
* site content
* ------------------------------------------------------------------- */
@media screen and (max-width: 1400px) {
.act-content--blog,
.act-content--page {
padding-top: calc(1.8 * var(--space));
}
}
@media screen and (max-width: 1200px) {
.act-content--blog,
.act-content--page {
padding-top: 30px;
}
}
@media screen and (max-width: 800px) {
.act-pageheader .page-title {
font-size: var(--text-display-2);
}
.act-pageheader .page-title__small-type {
font-size: calc(var(--text-size) * 0.8333);
}
}
@media screen and (max-width: 600px) {
.act-content--blog,
.act-content--page {
padding-top: 15px;
}
.act-pageheader .page-title {
font-size: 4.8rem;
}
}
@media screen and (max-width: 430px) {
.act-content {
padding-top: var(--vspace-0_75);
}
.act-pageheader .page-title {
font-size: 4.2rem;
}
.act-pageheader .page-title__small-type {
font-size: 1.3rem;
}
.act-pageheader + .bricks {
padding-top: var(--vspace-1);
}
}
/* ===================================================================
* # FOOTER
*
*
* ------------------------------------------------------------------- */
.act-footer {
background-color: var(--color-2);
color: var(--color-3);
font-weight: 500;
padding-top: var(--vspace-2_5);
padding-bottom: var(--vspace-4);
}
/*.act-footer>.row {
max-width : 1000px;
}*/
.act-footer h2 {
font-size: var(--text-xxxl);
line-height: var(--vspace-1_5);
margin-top: 0;
margin-bottom: var(--vspace-0_375);
}
.act-footer h4 {
font-family: var(--font-1);
font-weight: 600;
font-size: calc(var(--text-size) * 1.2556);
margin-top: 0;
margin-bottom: var(--vspace-0_5);
}
.act-footer p {
margin-bottom: 15px;
}
.act-footer .link-list {
list-style: none;
margin-left: 0;
}
.act-footer .link-list li {
padding-left: 0;
}
.act-footer .link-list a {
border: none;
position: relative;
text-decoration: none;
display: inline-block;
line-height: 21px;
color: black;
text-decoration: underline;
}
.act-footer .link-list a:focus,
.act-footer .link-list a:hover,
.act-footer .link-list a:active {
color: var(--color-3);
}
.act-footer__main {
font-size: calc(var(--text-size) * 0.9889);
line-height: var(--vspace-0_875);
padding-top: 20px;
}
.act-footer__about {
margin-right: auto;
}
.act-footer__bottom {
padding-top: var(--vspace-1);
font-size: var(--text-sm);
line-height: var(--vspace-0_75);
color: white;
}
.act-footer__bottom a {
color: black;
text-decoration: none;
}
.act-footer__about a {
color: black;
text-decoration: underline;
}
.act-footer__bottom a:focus,
.act-footer__bottom a:hover,
.act-footer__bottom a:active,
.act-footer__about a:focus,
.act-footer__about a:hover,
.act-footer__about a:active {
color: var(--color-3);
}
/* -------------------------------------------------------------------
* ## subscription form
* ------------------------------------------------------------------- */
.act-footer__subscribe {
margin-bottom: var(--vspace-0_5);
line-height: var(--vspace-0_875);
/*text-align : center;*/
}
.act-footer__subscribe .gform_title,
.act-footer__subscribe .gform_description {
text-align: center !important;
}
.act-footer__subscribe .gform_description {
padding: 0 30px 35px 30px;
display: block;
}
.act-footer__subscribe .gform_required_legend {
display: none;
}
.act-footer__subscribe .gform_body {
width: calc(80%);
float: left;
}
.act-footer__subscribe .gform_wrapper.gravity-theme .gfield input.medium,
.act-footer__subscribe .gform_wrapper.gravity-theme .gfield select.medium {
width: 100%;
}
.act-footer__subscribe .gform_wrapper.gravity-theme .gform_fields {
display: block;
width: 100%;
}
.act-footer__subscribe .gform_wrapper.gravity-theme .gform_footer {
width: 20%;
float: right;
}
.act-footer__subscribe .gform_wrapper.gravity-theme .gform_footer,
.act-footer__subscribe .gform_wrapper.gravity-theme .gform_page_footer {
margin: 0;
padding: 0;
}
.act-footer__subscribe input[type="submit"] {
--btn-height: var(--vspace-btn);
display: inline-block;
font-family: var(--font-1);
font-weight: 600;
font-size: var(--text-xs) !important;
text-transform: uppercase;
letter-spacing: 0.35em;
height: var(--btn-height);
line-height: calc(var(--btn-height) - 4px);
padding: 0 0.6rem;
margin: 0 0.4rem var(--vspace-0_5) 0;
color: white;
text-decoration: none;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: all 0.3s;
border-radius: 0;
background-color: var(--color-1);
border: 0px solid var(--color-btn);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 100%;
}
.act-footer__subscribe .gform_wrapper.gravity-theme input[type="email"] {
border-radius: 0;
padding: 8px 14px;
}
.act-footer__subscribe.gform_required_legend {
display: none;
}
.act-footer__subscribe.ginput_container_consent {
text-align: left;
}
.act-footer__subscribe label,
.act-footer__subscribe legend {
font-weight: 300;
font-size: 13px;
line-height: var(--vspace-0_5);
margin-bottom: var(--vspace-0_5);
color: white;
display: block;
}
.act-footer__subscribe #field_1_2 {
grid-column: span 12 !important;
}
.act-footer__subscribe .gfield_consent_label {
width: calc(100% - 25px);
float: right;
padding-top: 5px;
}
.act-footer__subscribe .ginput_container_consent {
margin-top: 25px;
}
.act-footer__subscribe .gfield_required_asterisk {
display: none !important;
}
.gfield_consent_label a,
.gfield_consent_label a:hover {
color: white;
}
/* --------------------------------------------------------------------
* ## footer social
* -------------------------------------------------------------------- */
.act-footer__social {
list-style: none;
display: flex;
margin: 10px 0 0 0;
}
.act-footer__social li {
padding-left: 0;
margin-right: 2rem;
margin-bottom: 2rem;
line-height: 1;
}
.act-footer__social li:last-child {
margin-right: 0;
}
.act-footer__social svg {
height: 2.8rem;
width: 2.8rem;
}
.act-footer__social svg path {
fill: white;
}
.act-footer__social a {
color: var(--color-6);
font-size: 29px;
}
/* -------------------------------------------------------------------
* ## copyright
* ------------------------------------------------------------------- */
.act-copyright {
margin-top: 22px;
text-align: center;
list-style: none;
}
.act-copyright span,
.act-copyright li {
display: inline-block;
}
.act-copyright span::after,
.act-copyright li::after {
content: "|";
display: inline-block;
padding: 0 0.8rem 0 1rem;
color: black;
}
.act-copyright span:last-child::after,
.act-copyright li:last-child::after {
display: none;
}
.act-copyright p {
color: black;
margin-bottom: 5px;
}
.act-copyright ul {
margin-left: 0;
margin-top: 0;
}
.act-copyright li {
list-style: none;
display: inline-block;
padding-left: 0;
}
/* -------------------------------------------------------------------
* ## go top
* ------------------------------------------------------------------- */
.act-go-top {
z-index: 2;
opacity: 0;
visibility: hidden;
transform: translate(0, 200%);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
position: fixed;
bottom: 3rem;
}
.act-go-top a {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
border: none;
height: 6rem;
width: 6rem;
border-radius: 50%;
background-color: var(--color-1);
transition: all 0.3s;
position: relative;
}
.act-go-top a:focus,
.act-go-top a:hover {
background-color: var(--color-3);
}
.act-go-top a:focus svg path,
.act-go-top a:hover svg path {
stroke: white;
}
.act-go-top svg {
height: 1.8rem;
width: 1.8rem;
}
.act-go-top svg path {
stroke: black;
}
.act-go-top.link-act-visible {
opacity: 1;
visibility: visible;
transform: translate(0, 0);
}
/* -------------------------------------------------------------------
* responsive:
* footer
* ------------------------------------------------------------------- */
@media screen and (min-width: 1201px) {
.act-go-top {
right: 4rem;
}
}
@media screen and (max-width: 1550px) {
.act-copyright {
text-align: left;
}
}
@media screen and (max-width: 1400px) {
.act-go-top {
bottom: 3rem;
}
.act-go-top a {
height: 5.2rem;
width: 5.2rem;
}
}
@media screen and (max-width: 1200px) {
.act-footer {
padding-bottom: var(--vspace-1_5);
}
.act-footer__main {
margin-bottom: 0;
}
.act-footer__social {
margin-bottom: var(--vspace-0_5);
}
.act-footer__social li {
margin-bottom: 0rem;
}
.act-go-top {
right: 3rem;
}
}
@media screen and (min-width: 1001px) {
.act-footer {
position: relative;
background-image: url("../images/footer-bg.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom left;
background-size: 25%;
}
}
@media screen and (max-width: 950px) {
.act-copyright span,
.act-copyright li {
display: block;
}
.act-copyright span::after,
.act-copyright li::after {
display: none;
}
.act-footer {
padding-top: var(--vspace-1_5);
}
.act-footer__subscribe .gform_description {
padding: 0 0px 25px 0px;
display: block;
}
}
@media screen and (max-width: 600px) {
.act-footer {
padding-top: var(--vspace-1_5);
padding-bottom: var(--vspace-1_5);
margin-top: 30px;
}
.act-footer__main {
padding-top: 0;
}
.act-footer h2 {
font-size: 36px;
line-height: var(--vspace-1_5);
}
.act-footer__subscribe {
margin-bottom: var(--vspace-0_5);
line-height: var(--vspace-0_575);
}
.act-footer p {
margin-bottom: 12px;
line-height: var(--vspace-0_75);
}
.act-footer h4 {
margin-bottom: 6px;
}
.act-footer .link-list {
margin-bottom: 10px;
}
.act-copyright {
margin-top: 0px;
}
/*.act-footer__subscribe .mc-form {
display : block;
}
.act-footer__subscribe input[type="email"],
.act-footer__subscribe input[type="submit"] {
border-radius : var(--border-radius);
}
.act-footer__subscribe input[type="email"] {
text-align : center;
}
.act-footer__subscribe input[type="submit"] {
width : 100%;
}*/
.act-copyright span {
display: block;
}
.act-copyright span::after {
display: none;
}
.act-go-top a {
height: 4.8rem;
width: 4.8rem;
}
}
@media screen and (max-width: 430px) {
.act-footer {
padding-top: var(--vspace-1);
padding-bottom: var(--vspace-1);
}
.act-footer h2 {
font-size: var(--text-xxl);
line-height: var(--vspace-1_25);
}
.act-footer__about {
margin-bottom: 5px;
}
.act-footer p {
margin-bottom: 2px;
}
.act-copyright ul {
margin-bottom: 0;
}
.act-go-top {
bottom: 4rem;
right: 2rem;
}
.act-go-top a {
height: 4rem;
width: 4rem;
}
.act-go-top svg {
height: 1.6rem;
width: 1.6rem;
}
}
/* -------------------------------------------------------------------
* ## donate footer
* ------------------------------------------------------------------- */
.act-donate-footer {
z-index: 2;
opacity: 0;
visibility: hidden;
transform: translate(0, 200%);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
position: fixed;
bottom: 0rem;
right: 4rem;
width: 350px;
}
.act-donate-footer .alert-box {
background: white;
padding: var(--vspace-0_5) 3rem var(--vspace-0_5) 2.8rem;
box-shadow: 0 0 20px 0 rgb(0 0 0 / 20%);
}
.act-donate-footer .alert-box h4 {
color: black;
line-height: normal;
text-align: center;
font-weight: 700;
margin-top: 0;
}
.act-donate-footer .alert-box .alert-box__close::before,
.act-donate-footer .alert-box .alert-box__close::after {
background: black;
}
.act-donate-footer .alert-box .btn {
background-color: var(--color-6);
border: 2px solid var(--color-6);
color: black;
width: 100%;
}
.act-donate-footer .alert-box .btn:hover {
background-color: rgba(105, 105, 105, 0.9);
border: 2px solid rgba(105, 105, 105, 0.9);
color: white;
}
.act-donate-footer.link-act-visible {
opacity: 1;
visibility: visible;
transform: translate(0, 0);
}
@media screen and (max-width: 1200px) {
.act-donate-footer {
display: none;
}
}
.act-footer__subscribe {
text-align: center;
}
.act-footer__subscribe .btn {
margin-top: 0px;
margin-bottom: 8px;
}
.act-footer__subscribe .btn {
--button-background: var(--color-3);
color: white;
font-size: 2.4rem;
margin-right:40px
}
.act-footer__subscribe .btn:before {
background-color: white;
}
.act-footer__subscribe .btn:after {
background: var(--color-3);
}
.act-footer__subscribe .btn:hover {
background-color: var(--color-1);
color: var(--color-3);
}
.act-footer__subscribe .btn:hover::before {
background-color: var(--color-3);
}
.act-footer__subscribe .btn:hover::after {
background: var(--color-1);
}
.act-footer__subscribe p {
padding: 20px 40px 5px 40px;
display: block;
text-align: center;
width: 100%;
}
.act-footer__subscribe .icon svg {
margin-right: 3px;
vertical-align: middle;
margin-bottom: 4px;
}
@media screen and (max-width: 1400px) {
.act-footer__subscribe .btn {
font-size:20px;
}
}
@media screen and (max-width: 700px) {
.act-footer__subscribe p {
padding: 10px 0px 0px 0px;
}
.act-footer__subscribe .btn {
font-size:20px;
margin-right: 20px;
}
}
@media screen and (max-width: 550px) {
.act-footer__subscribe .btn {
font-size:16px;
}
}
@media screen and (max-width: 450px) {
.act-footer__subscribe .btn {
font-size: 0.9em;
}
}
/* ===================================================================
* # HIDE ON PAGES
* ------------------------------------------------------------------- */
/*.page-id-107 .act-donate-footer {
display:none
}*/
/* ===================================================================
* # BLOG STYLES
*
*
* ------------------------------------------------------------------- */
.entry-wrap {
--entry-title-size: 6rem;
--text-multiplier: 1;
--width-content-blog: 600px;
--content-primary-padding: 15rem;
max-width: var(--width-content-blog);
padding-bottom: var(--vspace-3);
}
.home .entry-wrap {
--width-content-blog: 1300px;
}
.entry-wrap .content-primary,
.entry-wrap .commentact-wrap {
padding-left: var(--content-primary-padding);
padding-right: var(--content-primary-padding);
}
.entry-wrap--widest {
--entry-title-size: 6rem;
--text-multiplier: 1;
--width-content-blog: 1300px;
--content-primary-padding: 15rem;
max-width: var(--width-content-blog);
padding-bottom: var(--vspace-3);
}
.entry-wrap--wider {
--entry-title-size: 6rem;
--text-multiplier: 1;
--width-content-blog: 1100px;
--content-primary-padding: 15rem;
max-width: var(--width-content-blog);
padding-bottom: var(--vspace-3);
}
.page-template-page-partners .entry-wrap--wider,
.page-template-page-our-partners .entry-wrap--wider {
padding-bottom: 0;
}
.page-template-front-page .act-content--page .entry-wrap {
padding-top: 80px;
}
/* entry header
*/
.entry__header {
text-align: center;
max-width: 1100px;
margin-right: auto;
margin-left: auto;
margin-bottom: var(--vspace-2);
}
.entry__header--narrow {
max-width: 1000px;
}
.entry__header--narrower {
max-width: 600px;
}
.entry__title {
font-size: calc(var(--entry-title-size) * var(--text-multiplier));
line-height: 1;
margin-top: 0;
margin-bottom: var(--vspace-1);
text-align: center;
}
.entry__meta {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
font-size: calc(var(--text-size) * 0.9444);
font-weight: 400;
}
.entry__meta a {
color: var(--color-text);
}
.entry__meta .cat-links a::after {
content: ", ";
}
.entry__meta .cat-links a:last-child::after {
display: none;
}
.entry__meta > [class*="entry__meta"] {
display: flex;
align-items: center;
margin: 0 1.4rem;
}
.entry__meta > [class*="entry__meta"] svg {
margin-right: 0.4rem;
height: var(--vspace-0_875);
width: var(--vspace-0_875);
}
.entry__meta > [class*="entry__meta"] svg path,
.entry__meta > [class*="entry__meta"] svg circle {
stroke: var(--color-text);
}
/* entry featured media
*/
.entry__media {
margin-bottom: var(--vspace-2);
}
.entry__media figure {
margin: 0;
}
.entry__media img {
vertical-align: bottom;
margin-bottom: 0;
}
/* entry main content
*/
.entry__content .alignwide img {
--img-width: calc(var(--width-content-blog) - var(--gutter) * 2);
max-width: var(--img-width);
margin: var(--vspace-1) 0 var(--vspace-1)
calc(var(--content-primary-padding) * -1);
}
/* entry tags
*/
.entry__tags {
display: flex;
flex-flow: row wrap;
margin: var(--vspace-1_5) 0;
}
.entry__tags strong,
.entry__tags span {
display: inline-block;
}
.entry__tags strong {
margin-right: 1.2rem;
margin-bottom: var(--vspace-0_25);
}
.entry__tag-list {
display: flex;
flex-flow: row wrap;
font-size: calc(var(--text-size) * 0.6111);
text-transform: uppercase;
letter-spacing: 0.2em;
}
.entry__tag-list a {
display: inline-block;
margin-right: 0.2rem;
margin-bottom: var(--vspace-0_25);
padding: 0 1rem;
border: 1px solid var(--color-gray-8);
border-radius: var(--border-radius);
color: var(--color-text);
}
.entry__tag-list a:focus,
.entry__tag-list a:hover {
background-color: var(--color-text);
color: white;
}
/* author box
*/
.entry__author-box {
display: flex;
align-items: flex-start;
font-size: calc(var(--text-size) * 0.8889);
font-weight: 300;
line-height: calc(0.9375 * var(--space));
color: var(--color-text-light);
padding: var(--vspace-1_5) 0 var(--vspace-1);
border-top: 1px solid var(--color-border);
}
.entry__author-avatar {
margin-top: 0;
padding-right: var(--vspace-1);
flex: none;
}
.entry__author-avatar img {
height: var(--vspace-2_5);
width: var(--vspace-2_5);
border-radius: 50%;
}
.entry__author-name {
margin-top: 0;
}
.entry__author-name a {
color: var(--color-text);
}
/* entry blocks, entry forms
*/
.entry__blocks {
margin-top: var(--vspace-2);
margin-bottom: var(--vspace-1);
}
.entry__blocks h4 {
margin-top: 0;
}
.entry__form {
margin-top: var(--vspace-1_5);
}
.entry #contactForms,
.entry #cForm {
--gutter: 1.6rem;
}
/* post navigation
*/
.post-nav {
display: flex;
padding: var(--vspace-1_25) 0 var(--vspace-2);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
position: relative;
}
.post-nav::before {
content: "";
display: block;
width: 1px;
height: 100%;
background-color: var(--color-border);
position: absolute;
top: 0;
left: 50%;
bottom: 0;
}
.post-nav__prev,
.post-nav__next {
flex: none;
width: 50%;
}
.post-nav__prev {
padding-right: calc(var(--gutter) + 1.2rem);
}
.post-nav__next {
padding-left: calc(var(--gutter) + 1.2rem);
margin-left: auto;
}
.post-nav a {
font-family: var(--font-2);
font-size: var(--text-xl);
line-height: 1.158;
color: var(--color-text);
}
.post-nav span {
font-family: var(--font-1);
font-weight: 400;
font-size: var(--text-sm);
line-height: var(--vspace-1);
display: block;
margin-left: 0.2rem;
margin-bottom: var(--vspace-0_25);
color: var(--color-text-light);
}
/* -------------------------------------------------------------------
* responsive:
* blog styles
* ------------------------------------------------------------------- */
@media screen and (min-width: 1401px) {
.entry-wrap {
--width-content-blog: 1000px;
}
}
@media screen and (max-width: 1400px) {
.entry-wrap {
--text-multiplier: 0.9;
--width-content-blog: 800px;
--content-primary-padding: 10rem;
}
.entry__header {
max-width: 1000px;
margin-bottom: var(--vspace-1);
}
.act-content--page .entry-wrap {
padding-top: calc(0 * var(--space));
}
.page-template-front-page .act-content--page .entry-wrap {
padding-top: 40px;
}
}
@media screen and (max-width: 1300px) {
.entry-wrap {
--text-multiplier: 0.85;
/*--width-content-blog : 1040px;*/
--content-primary-padding: 9rem;
}
}
@media screen and (max-width: 1200px) {
.entry-wrap {
--text-multiplier: 0.8;
/*--width-content-blog : 1000px;*/
--content-primary-padding: 6rem;
}
.entry__header {
max-width: 900px;
margin-bottom: var(--vspace-1);
}
}
@media screen and (max-width: 1100px) {
.entry-wrap {
--text-multiplier: 0.7;
--width-content-blog: 860px;
--content-primary-padding: 0;
}
.entry__content .alignwide img {
max-width: 100%;
margin: var(--vspace-1) 0;
}
.act-content--page .entry-wrap {
padding-top: calc(0 * var(--space));
padding-bottom: calc(1 * var(--space));
}
}
@media screen and (max-width: 900px) {
.entry__title {
font-size: 46px;
margin-bottom: 0px;
}
.entry__header {
max-width: 900px;
margin-bottom: var(--vspace-0_5);
}
.entry-wrap {
--text-multiplier: 0.62;
}
}
@media screen and (max-width: 700px) {
.act-content--page .entry-wrap {
padding-top: 0;
padding-bottom: calc(0.2 * var(--space));
}
.entry__title {
font-size: 36px;
margin-bottom: 0px;
}
.entry__author-box {
display: block;
text-align: center;
}
.entry__author-avatar {
padding: 0;
margin-bottom: var(--vspace-0_5);
}
.post-nav {
display: block;
text-align: center;
}
.post-nav::before {
display: none;
}
.post-nav > div:first-child {
margin-bottom: var(--vspace-0_75);
}
.post-nav__prev,
.post-nav__next {
flex: none;
width: 100%;
padding: 0;
}
}
@media screen and (max-width: 600px) {
.entry-wrap {
--text-multiplier: 0.55;
}
.page-template-front-page .act-content--page .entry-wrap {
padding-top: 20px;
}
}
@media screen and (max-width: 500px) {
.entry-wrap {
--text-multiplier: 0.46;
}
.entry__title {
font-size: 32px;
line-height: 35px;
}
.entry__header {
margin-bottom: var(--vspace-1);
}
.entry__meta {
font-size: 1.5rem;
}
.entry__meta > [class*="entry__meta"] svg {
margin-right: 0.2rem;
height: var(--vspace-0_75);
width: var(--vspace-0_75);
}
.entry__media {
margin-bottom: var(--vspace-1_5);
}
.entry__content .alignwide img {
margin: var(--vspace-0_5) 0;
}
.page-template-front-page .act-content--page .entry-wrap {
padding-top:15px;
}
}
@media screen and (max-width: 430px) {
.entry-wrap {
--text-multiplier: 0.42;
}
}
@media screen and (max-width: 350px) {
.entry-wrap {
--text-multiplier: 0.38;
}
}
/* -------------------------------------------------------------------
* ## blog comments
* ------------------------------------------------------------------- */
.commentact-wrap {
margin: var(--vspace-3);
}
.commentact-wrap h2 {
text-align: center;
margin-top: 0;
margin-bottom: var(--vspace-0_5);
}
.commentact-wrap h2 span {
display: block;
font-family: var(--font-1);
font-weight: 400;
font-size: calc(var(--text-size) * 0.8889);
line-height: var(--vspace-0_75);
color: var(--color-text-light);
margin: var(--vspace-0_125) var(--vspace-1) 0 var(--vspace-1);
}
/* comments
* -------------------------------------------------- */
#comments {
padding-top: var(--vspace-0_5);
padding-bottom: var(--vspace-0_5);
}
#comments ol,
#comments ul {
list-style: none;
}
.commentlist {
margin: var(--vspace-2) 0 var(--vspace-1_5);
padding: 0;
}
.commentlist > .comment {
position: relative;
list-style: none;
margin: 0;
padding: 2rem 0 0 0;
padding-left: 14%;
}
.comment__avatar {
position: absolute;
left: 0;
display: block;
}
.comment__avatar img {
height: var(--vspace-2);
width: var(--vspace-2);
border-radius: 100%;
vertical-align: bottom;
}
.comment__info .comment__author {
font-weight: 600;
font-size: var(--text-size);
line-height: var(--vspace-1);
font-style: normal;
color: var(--color-text-dark);
}
.comment__info .comment__author a {
color: var(--color-text-dark);
}
.comment__meta {
display: flex;
align-items: center;
font-style: normal;
line-height: var(--vspace-0_75);
color: var(--color-text-light);
}
.comment__meta .comment__time {
font-size: calc(var(--text-size) * 0.7778);
text-transform: uppercase;
letter-spacing: 0.1rem;
color: var(--color-text-light);
margin-right: 1.6rem;
}
.comment__meta .comment__time a {
color: var(--color-text-light);
}
.comment__meta .comment__time a:focus,
.comment__meta .comment__time a:hover {
color: var(--color-text-dark);
}
.comment__meta .comment__reply a {
font-size: var(--text-xs);
font-family: var(--font-1);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2rem;
color: var(--color-text-dark);
}
.comment__text {
margin: var(--vspace-0_5) 0 0 0;
}
.comment ul.children {
margin: 0;
padding: 0;
}
.comment ul.children li {
padding-left: 5%;
margin-top: calc(var(--vspace-1) + 2rem);
border-left: 1px solid var(--color-border);
}
/* comments form
* ---------------------------- */
.commentact-wrap .comment-respond {
margin-top: var(--vspace-1);
}
.comment-respond form {
padding-top: var(--vspace-1);
}
/* -------------------------------------------------------------------
* responsive:
* comments
* ------------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
.comment__avatar img {
height: var(--vspace-1_75);
width: var(--vspace-1_75);
}
.commentact-wrap {
margin: var(--vspace-2);
}
}
@media screen and (max-width: 800px) {
.comment__avatar img {
margin-top: 0;
height: var(--vspace-1_5);
width: var(--vspace-1_5);
}
}
@media screen and (max-width: 600px) {
.commentlist > .comment {
padding-top: 0;
padding-left: 0;
}
.comment__avatar {
display: none;
}
.comment ul.children li {
margin-top: calc(var(--vspace-1) + 0rem);
}
.commentact-wrap {
margin: var(--vspace-1) 0;
}
}
@media screen and (max-width: 500px) {
.comment ul.children li {
border-left: none;
}
}
@media screen and (max-width: 430px) {
.comment-respond form {
padding-top: var(--vspace-1);
}
}
/* ===================================================================
* # social
*
* ------------------------------------------------------------------- */
.act-social {
padding-top: 10.4rem;
padding-bottom: 9.6rem;
background-color: var(--color-2);
}
.act-social h1 {
margin-top: 0rem;
margin-bottom: 0;
}
.social-content {
max-width: 1200px;
margin-top: 70px;
}
.social-list {
list-style: none;
font-family: "Montserrat", sanact-serif;
font-weight: 700;
font-size: 1.4rem;
line-height: 5.6rem;
text-transform: uppercase;
letter-spacing: 0.4rem;
text-align: center;
margin: 0;
}
.social-list li {
display: inline-block;
margin-right: 0;
margin-left: 0;
width: 24%;
}
.social-list a {
color: var(--color-gray-12);
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
justify-content: center;
}
.social-list__icon {
display: block;
width: 4.8rem;
height: 4.8rem;
border-radius: 50%;
border: 1px solid var(--color-gray-12);
margin-right: 2rem;
position: relative;
}
.social-list__icon::before {
content: "";
display: block;
height: 2rem;
width: 2rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
position: absolute;
top: 50%;
left: 50%;
}
.social-list__icon--facebook::before {
background-image: url(../images/icons/icon-facebook.svg);
}
.social-list__icon--twitter::before {
background-image: url(../images/icons/icon-twitter.svg);
}
.social-list__icon--instagram::before {
background-image: url(../images/icons/icon-instagram.svg);
}
.social-list__icon--email::before {
background-image: url(../images/icons/icon-email.svg);
}
/* -------------------------------------------------------------------
* responsive:
* social
* ------------------------------------------------------------------- */
@media screen and (max-width: 1600px) {
.act-social {
padding-top: 4.4rem;
padding-bottom: 9.6rem;
}
}
@media screen and (max-width: 1200px) {
.act-social {
padding-top: 2.4rem;
padding-bottom: 6.6rem;
}
.social-list li {
margin-right: 1.2rem;
margin-left: 1.2rem;
}
}
@media screen and (max-width: 1000px) {
.act-social {
padding-top: 1rem;
padding-bottom: 4.6rem;
}
.social-list__text {
display: none;
}
.social-list__icon {
width: 5.6rem;
height: 5.6rem;
margin-right: 0;
}
.social-list__icon::before {
height: 2.4rem;
width: 2.4rem;
}
}
@media screen and (max-width: 1000px) {
.act-social h1 {
margin-top: 30px;
margin-bottom: 10px;
font-size: var(--text-display-1);
}
}
@media screen and (max-width: 600px) {
.act-social h1 {
font-size: 40px;
}
.social-list__icon {
width: 4.8rem;
height: 4.8rem;
}
.social-list__icon::before {
height: 2rem;
width: 2rem;
}
.act-social {
padding-top: 1rem;
padding-bottom: 0rem;
}
}
@media screen and (max-width: 430px) {
.act-social h1 {
font-size: 32px;
}
}
@media screen and (max-width: 400px) {
.social-list li {
margin-right: 0.8rem;
margin-left: 0.8rem;
}
.social-list__icon {
width: 4.4rem;
height: 4.4rem;
}
.social-list__icon::before {
height: 1.6rem;
width: 1.6rem;
}
}
/**** NEW CSS ****/
.google-maps {
position: relative;
padding-bottom: 55%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/**** NEW CSS - CONTACT FORM SECTION ****/
.act-content-contact {
background-color: var(--color-black);
}
.act-content-contact .commentact-wrap h2 {
color: var(--color-1);
}
.act-content-contact .commentact-wrap h2 span {
color: var(--color-gray-2);
margin-bottom: var(--vspace-1_5);
margin-top: var(--vspace-0_5);
}
.act-content-contact .commentact-wrap .btn.btn--primary,
.act-content-contact .commentact-wrap input[type="submit"].btn--primary {
background: var(--color-1);
border-color: var(--color-1);
color: var(--color-btn-primary-text);
}
.act-content-contact .commentact-wrap .btn.btn--primary:focus,
.act-content-contact .commentact-wrap input[type="submit"].btn--primary:focus,
.act-content-contact .commentact-wrap .btn.btn--primary:hover,
.act-content-contact .commentact-wrap input[type="submit"].btn--primary:hover {
background: var(--color-white);
border-color: var(--color-white);
color: var(--color-black);
}
.column-img {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.act-content-contact th,
.act-content-contact td {
padding: var(--vspace-0_5) 2.2rem calc(var(--vspace-0_5) - 1px);
text-align: left;
border-bottom: 1px solid var(--color-gray-17);
}
.act-content-contact table {
color: var(--color-white);
margin-top: 20px;
font-size: 14px;
line-height: 18px;
}
.act-content-contact table i {
color: var(--color-1);
margin-right: 6px;
}
.act-content-contact tr:first-child {
border-top: 1px solid var(--color-gray-17);
}
.act-content-contact tbody tr:nth-child(odd) {
background-color: rgba(159, 131, 4, 0.18);
}
.act-content-contact span {
float: right;
font-weight: bold;
}
.act-content-contact .menu-desc {
display: block;
font-size: 13px;
color: rgba(255, 255, 255, 0.6);
}
.act-content-contact h3 {
margin-top: 0;
color: var(--color-gray-12);
}
.act-content-contact .btn--stroke {
background: transparent !important;
font-weight: 700;
border: 1px solid var(--color-btn-stroke-white);
color: var(--color-btn-stroke-text-white);
margin: var(--vspace-0_25) 0 0 0;
padding: 0 20px;
height: 42px;
line-height: 40px;
}
.act-content-contact .btn--stroke:hover {
border: 1px solid var(--color-btn-stroke-white-hover);
color: var(--color-btn-stroke-text-white-hover);
}
/**** NEW CSS - GALLERY SECTION ****/
.act-content--gallery {
background: var(--color-white);
padding-top: var(--vspace-2);
}
/**** NEW CSS - TABS ****/
.tabs {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
.tabs label {
order: 1;
display: block;
padding: 1rem 2rem;
margin-right: 0.2rem;
cursor: pointer;
background: var(--color-1);
font-weight: bold;
transition: background ease 0.2s;
color: white;
margin-bottom: 0;
width: 33%;
text-align: center;
}
.tabs .tab {
order: 99;
flex-grow: 1;
width: 100%;
display: none;
padding: 1rem 0;
transition: background ease 0.2s;
}
.tabs input[type="radio"] {
display: none;
}
.tabs input[type="radio"]:checked + label {
background: #fff;
color: black;
}
.tabs input[type="radio"]:checked + label + .tab {
display: block;
transition: background ease 0.2s;
}
@media (max-width: 45em) {
.tabs .tab,
.tabs label {
order: initial;
}
.tabs label {
width: 100%;
margin-right: 0;
margin-top: 0.2rem;
}
}
.tabs p.intro {
color: var(--color-gray-10);
text-align: center;
font-size: 14px;
margin: 10px 0;
}
/**** NEW CSS - CLIENTS ****/
#clients {
background-color: #fff;
padding: 2rem 30px 0;
}
#clients .owl-carousel .owl-nav {
margin-top: 1.8rem;
margin-bottom: 1.5rem;
text-align: center;
-webkit-tap-highlight-color: transparent;
}
#clients .owl-carousel .owl-nav [class*="owl-"] {
color: #ffffff;
font-family: "montserrat-regular", sanact-serif;
font-size: 1.4rem;
height: 3rem;
line-height: 3rem;
margin: 0.6rem;
padding: 0 10px;
background: transparent;
display: inline-block;
cursor: pointer;
border-radius: 3px;
}
#clients .owl-carousel .owl-nav [class*="owl-"]:hover {
background: transparent;
color: #ffffff;
text-decoration: none;
}
#clients .owl-carousel .owl-nav .disabled {
background: transparent;
cursor: default;
}
#clients .owl-carousel .owl-nav.disabled + .owl-dots {
margin-top: 1.8rem;
}
#clients .owl-carousel .owl-dots {
text-align: center;
-webkit-tap-highlight-color: transparent;
}
#clients .owl-carousel .owl-dots .owl-dot {
display: inline-block;
zoom: 1;
*display: inline;
}
#clients .owl-carousel .owl-dots .owl-dot span {
width: 9px;
height: 9px;
background-color: var(--color-4);
margin: 6px 6px;
display: block;
-webkit-backface-visibility: visible;
transition: opacity 200ms ease;
border-radius: 50%;
}
#clients .owl-carousel .owl-dots .owl-dot.active span {
background-color: var(--color-2);
}
#clients .owl-carousel .owl-dots .owl-dot:hover span {
background-color: var(--color-3);
}
.owl-carousel .owl-nav {
overflow: hidden;
height: 0px;
}
.client-lists.owl-carousel .owl-nav {
height: 60px;
overflow: visible;
position: relative;
}
#clients .client-lists.owl-carousel .owl-nav .owl-prev,
#clients .client-lists.owl-carousel .owl-nav .owl-next {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
min-height: 50px;
padding: 0 !important;
overflow: visible;
box-sizing: border-box;
}
#clients .client-lists.owl-carousel .owl-nav .nav-btn,
#clients .client-lists.owl-carousel .prev-slide,
#clients .client-lists.owl-carousel .next-slide {
width: 50px;
min-width: 50px;
height: 50px;
background-size: 50px 50px;
background-position: center;
background-repeat: no-repeat;
overflow: visible !important;
}
@media screen and (max-width: 799px) {
.client-lists.owl-carousel .owl-dots {
display: none !important;
}
}
.owl-carousel .nav-btn {
height: 47px;
position: absolute;
width: 47px;
cursor: pointer;
bottom: 2px !important;
opacity: 1;
transition: all 0.3s;
}
.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled {
pointer-events: none;
opacity: 0.4;
}
.owl-carousel .prev-slide {
background: url(../images/nav-prev.svg) no-repeat scroll 0 0;
left: 0px;
height: 47px;
width: 47px;
}
.owl-carousel .next-slide {
background: url(../images/nav-next.svg) no-repeat scroll 0 0px;
right: 0px;
}
.owl-carousel .prev-slide:hover {
background: url(../images/nav-prev-hover.svg) no-repeat scroll 0 0px;
}
.owl-carousel .next-slide:hover {
background: url(../images/nav-next-hover.svg) no-repeat scroll 0 0px;
}
/*** EFFECTS ***/
.link-block {
display: block;
position: relative;
color: rgba(255, 255, 255, 1);
padding: 0;
margin: 0;
overflow: hidden;
border-radius: 15px;
}
.no-gutter .link-block {
margin: 0 0 3px 0;
}
.link-block:before {
position: absolute;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, 1);
}
.no-gutter .link-block .img-fluid {
width: 100%;
height: auto;
}
.link-block .slide-text {
position: relative;
padding: 12px 24px 24px;
background: var(--color-1);
transition: all 0.4s ease-in-out;
font-size: 18px;
color: black;
margin-top: -30px;
min-height: inherit;
}
.link-block .slide-text h3 {
font-size: 40px;
font-weight: 600;
color: var(--color-3);
margin-bottom: 10px;
margin-top: 20px;
}
@media (max-width: 1150px) {
.link-block .slide-text h3 {
font-size: 29px;
}
}
@media (max-width: 600px) {
.link-block .slide-text h3 {
font-size: 26px;
}
}
.no-gutter .link-block .slide-text h3 {
min-height: 60px;
}
/*.link-block .slide-text *:last-child {
margin-bottom: 0; }*/
.img-fluid {
width: 100%;
height: auto;
}
.link-block img {
-webkit-transition: 0.3s all ease-out !important;
-o-transition: 0.3s all ease-out !important;
transition: 0.3s all ease-out !important;
margin-bottom: 0;
flex: none;
margin-top: -40px;
}
.link-block:hover img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.link-block p {
margin-bottom: 12px;
display: block;
line-height: normal;
}
@media (max-width: 1150px) {
.link-block p {
font-size: 16px;
}
}
.ctr-btn {
text-align: left;
margin-top: 22px;
}
/**** NEW CSS - HOMEPAGE - WHO WE ARE ****/
.home-who-we-are {
text-align: center;
}
.home-who-we-are h3 {
margin-top: var(--vspace-0_75);
margin-bottom: var(--vspace-0_25);
}
.home-who-we-are img {
margin-bottom: 15px;
width: 150px;
}
@media (max-width: 1200px) {
.home-who-we-are img {
margin-bottom: 15px;
}
}
@media (max-width: 600px) {
.home-who-we-are img {
margin-bottom: 5px;
width: 90px;
}
}
/**** NEW CSS - HOMEPAGE - FUNDRAISE ****/
@media (max-width: 1050px) {
.home-spacer {
height: 30px !important;
}
}
@media (max-width: 780px) {
.home-spacer {
height: 10px !important;
}
}
/**** NEW CSS - HOMEPAGE - NEWS EVENTS ****/
.news-events {
padding-top: calc(2 * var(--space));
padding-bottom: calc(2.5 * var(--space));
background-color: var(--color-4);
}
.page-template-page-people .news-events {
background-color: white;
}
.single .news-events {
background-color: white;
}
.page-template-page-events .news-events,
.post-type-archive-events .news-events,
.page-template-page-events-previous .news-events,
.page-template-page-news .news-events,
.page-template-page-people .news-events,
.category .news-events,
.page-template-page-partners .news-events,
.page-template-page-our-partners .news-events,
.page-template-page-blogs .news-events,
.page-template-page-campaigns .news-events {
padding-bottom: 0;
}
.page-template-page-campaigns .news-events {
background-color: white;
padding-top: 0;
}
.page-template-page-events .news-events .row .row,
.post-type-archive-events .news-events .row .row,
.page-template-page-events-previous .news-events .row .row,
.page-template-page-news .news-events .row .row,
.tax-event .news-events .row .row,
.category .news-events .row .row,
.page-template-page-partners .news-events .row .row,
.page-template-page-our-partners .news-events .row .row,
.page-template-page-blogs .news-events .row .row,
.tax-blog .news-events .row .row {
margin-left: 0px;
margin-right: 0px;
}
.page-template-page-our-partners .news-events .row .row {
width: 100%;
}
.news-events h2 {
margin-top: 0;
}
.news-events h4,
.news-events .content-wrp h3 {
margin-top: 20px;
margin-bottom: 6px;
}
.news-events h4 {
font-size: 22px;
font-family: var(--font-1);
}
.page-template-page-our-partners .news-events h4,
.page-template-page-our-partners .news-events h3 {
margin-top: 0px;
}
.page-template-page-people .news-events h3 {
margin-top: 7px;
margin-bottom: 6px;
line-height: 1!Important
}
.page-template-page-people .news-events h2 {
margin-bottom: 0px;
}
.news-item {
margin-bottom: 20px;
border-radius: 15px;
overflow: hidden;
}
.page-template-page-people .news-item > .column > div {
border-radius: 15px;
overflow: hidden;
}
.news-item a {
font-size: 16px;
}
.news-item-wrp-left {
margin-right: 60px;
}
.news-item-wrp-left {
margin-right: 0px;
}
.news-events .news-item h3 a {
font-size: var(--text-lg);
}
.news-events .news-item h3 a::after {
display: none;
}
.news-events .news-item h3 a {
padding-left: 0;
}
.news-events .news-item .featured_img-wrp {
display: block;
height: 25vh;
overflow: hidden;
}
.news-events .news-item .featured_img-nowrp {
display: block;
height: auto;
}
.news-events .news-item .content-wrp {
display: block;
padding-bottom: 20px;
}
.page-template-page-people .news-events .news-item .content-wrp {
padding-left: 25px;
padding-right: 25px;
text-align:center;
padding-bottom:15px
}
.page-template-page-our-partners .news-events .news-item .content-wrp {
padding-left: 20px;
padding-right: 20px;
}
.news-events .news-item img {
margin-top: 20px;
}
.news-events .news-item .featured_img-nowrp img {
margin: 0px;
width: 100%;
height: auto;
}
.page-template-page-events .news-events .news-item img,
.post-type-archive-events .news-events .news-item img,
.page-template-page-events-previous .news-events .news-item img,
.page-template-page-news .news-events .news-item img,
.category .news-events .news-item img,
.tax-event .news-events .news-item img,
.page-template-page-blogs .news-events .news-item img,
.tax-blog .news-events .news-item img {
font-size: 16px;
line-height: normal;
margin-bottom: 16px;
}
.news-events .news-item p {
font-size: 16px;
margin-bottom: 20px;
line-height: normal;
}
.news-events .news-item i {
color: var(--color-3);
}
.page-template-page-events .news-events .news-item p,
.post-type-archive-events .news-events .news-item p,
.page-template-page-events-previous .news-events .news-item p,
.page-template-page-news .news-events .news-item p,
.category .news-events .news-item p,
.tax-event .news-events .news-item p,
.page-template-page-blogs .news-events .news-item p,
.tax-blog .news-events .news-item p {
font-size: 16px;
line-height: normal;
margin-bottom: 16px;
}
.page-template-page-people .news-events .news-item p {
font-size: 16px;
margin-bottom: 0px;
}
.page-template-page-news .news-events .news-item .category a {
font-weight: 400;
padding-left: 3px;
line-height: normal;
margin-bottom: 0;
text-decoration: none;
}
.page-template-page-our-partners .news-events .news-item p {
margin-bottom: 0;
}
.news-events .news-item .category a::after {
display: none;
}
.news-events .btn--small,
.entry-content a.btn--small {
margin-right: 10px;
}
@media (max-width: 1550px) {
.news-item-wrp-left {
margin-right: 30px;
}
.news-item-wrp-right {
margin-left: 30px;
}
}
@media (max-width: 1200px) {
.news-events .btn--small {
margin-top: var(--vspace-0_50);
margin-bottom: 30px;
}
.news-item-wrp-left {
margin-right: 0px;
}
.news-item-wrp-right {
margin-left: 0px;
}
.news-events .news-item .featured_img-wrp {
display: block;
height: auto;
overflow: hidden;
}
.page-template-page-events .news-events .news-item img,
.post-type-archive-events .news-events .news-item img,
.page-template-page-events-previous .news-events .news-item img,
.page-template-page-news .news-events .news-item img,
.category .news-events .news-item img,
.tax-event .news-events .news-item img,
.page-template-page-blogs .news-events .news-item img,
.tax-blog .news-events .news-item img {
margin-bottom: 0;
}
}
@media (max-width: 1400px) {
.news-events .btn--small,
.entry-content a.btn--small,
.link-block .btn {
font-size: 2.1rem !important;
margin-top: 15px !important;
}
}
@media (max-width: 1100px) {
.news-events .btn--small,
.entry-content a.btn--small,
.link-block .btn {
font-size: 1.8rem !important;
line-height: calc(41px - 4px);
height: 45px;
padding: 0 2.4rem;
}
}
@media (max-width: 1000px) {
.news-events .btn--small,
.entry-content a.btn--small,
.link-block .btn {
margin-top: 5px !important;
}
.link-block .btn {
margin-top: 20px !important;
}
}
@media (max-width: 767px) {
.news-events .column .column .btn--small {
margin-bottom: 0px !important;
}
}
@media (max-width: 500px) {
.news-events .btn--small,
.entry-content a.btn--small,
.link-block .btn {
font-size: 1.6rem !important;
line-height: calc(38px - 4px);
height: 40px;
padding: 0 2.2rem;
}
}
@media (max-width: 800px) {
.news-events {
padding-top: calc(1.5 * var(--space));
padding-bottom: calc(1 * var(--space));
}
.news-item {
margin-bottom: 20px;
/*margin-right: 0px!important;*/
}
.page-template-page-events .news-events .column,
.post-type-archive-events .news-events .column,
.page-template-page-events-previous .news-events .column,
.page-template-page-news .news-events .column,
.category .news-events .column,
.tax-event .news-events .column,
.page-template-page-blogs .news-events .column,
.tax-blog .news-events .column {
padding: 0 20px;
}
.news-events h4 {
padding-right: 12px;
}
.page-template-page-people .news-events .news-item .content-wrp,
.page-template-page-our-partners .news-events .news-item .content-wrp {
padding-left: 20px;
padding-right: 20px;
}
}
@media (max-width: 600px) {
.news-events {
padding-top: calc(1 * var(--space));
padding-bottom: calc(1 * var(--space));
}
.news-events .news-item .featured_img-nowrp img {
margin-top: 0px;
}
.single .news-events {
padding-top: calc(1 * var(--space));
padding-bottom: calc(1 * var(--space));
}
.page-template-page-events .news-events .news-events .row,
.post-type-archive-events .news-events .news-events .row,
.page-template-page-events-previous .news-events .row,
.category .news-events .row,
.tax-event .news-events .row,
.tax-blog .news-events .row,
.page-template-page-blogs .news-events .news-events .row {
padding-left: 0vw;
padding-right: 0vw;
}
}
@media (min-width: 801px) {
.page-template-page-people .news-item .column {
margin: 0 var(--gutter) 20px 0;
}
}
@media (max-width: 430px) {
.news-events .news-item p {
font-size: 14px;
margin-bottom: 16px;
}
}
#pagination-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.page-numbers {
display: inline-block;
padding: 8px 14px 10px;
margin: 60px 10px 0 0;
border: 0px solid var(--color-2);
line-height: 1;
text-decoration: none;
border-radius: 0px;
font-weight: 600;
background: #f9f9f9;
border-radius: 40px;
}
a.page-numbers {
color: var(--color-2);
}
.page-numbers.current,
a.page-numbers:hover {
background: var(--color-6);
color: white;
}
@media screen and (max-width: 900px) {
.page-numbers {
margin: 40px 2px 0 0;
}
}
.page-template-page-news .status,
.single-post .status {
position: absolute;
top: 26px;
left: 7px;
background-color: var(--color-1);
padding: 0.3rem 1rem;
text-align: center;
color: black;
font-size: 16px;
font-weight: 600;
border-radius: 5px;
text-transform: uppercase;
}
.single-post .status {
position: relative;
top: 0;
left: 0
}
.page-template-page-news .news-events .news-item .featured_img-wrp {
position: relative;
}
/*** PARTNER LOGOS ***/
.page-template-page-partners .news-events .news-item img,
.page-template-page-our-partners .news-events .news-item img {
margin-bottom: 20px;
margin-top: 20px;
border-radius: 0;
width: 70%;
height: auto;
align-self: center;
}
@media screen and (max-width: 730px) {
.page-template-page-partners .news-events .news-item img,
.page-template-page-our-partners .news-events .news-item img {
margin: 20px;
width: calc(100% - 40px);
}
}
@media screen and (max-width: 560px) {
.page-template-page-partners .news-events .news-item img,
.page-template-page-our-partners .news-events .news-item img {
margin: 10px;
width: calc(100% - 20px);
}
}
.page-template-page-partners .news-events .news-item .featured_img-wrp,
.page-template-page-our-partners .news-events .news-item .featured_img-wrp {
margin: 0 auto 0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: auto;
}
.page-template-page-partners .news-item,
.page-template-page-our-partners .news-item {
text-align: center;
}
.news-events .news-item p {
font-size: 16px;
margin-bottom: 20px;
line-height: normal;
width: 100%;
}
/**** NEW CSS - SINGLE ****/
.news-events select {
border: 0;
outline: 0;
background-color: var(--color-gray-1) !important;
margin-top: 0px;
float: right;
}
/**** NEW CSS - HOMEPAGE - SHOWCASE SLIDER ****/
.showcase__slider {
--slider-bg-color: var(--color-grey-16);
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: auto;
min-height: calc(25.5 * var(--space));
}
.showcase__slider .swiper-pagination {
font-size: var(--text-sm);
width: auto;
transform: translateY(-50%);
top: 50%;
right: 4rem;
left: auto;
bottom: auto;
}
.showcase__slider .swiper-pagination .swiper-pagination-bullet {
display: block;
outline: none;
font-weight: 300;
width: auto;
height: auto;
background: transparent;
color: var(--color-gray-12);
margin: 1.4rem 0;
opacity: 1;
position: relative;
}
.showcase__slider .swiper-pagination .swiper-pagination-bullet::before {
content: "0";
}
.showcase__slider
.swiper-pagination
.swiper-pagination-bullet:nth-child(n + 10)::before {
content: none;
}
.showcase__slider .swiper-pagination .swiper-pagination-bullet-active {
font-weight: 400;
color: var(--color-1);
}
.showcase__slider .swiper-pagination .swiper-pagination-bullet-active::after {
content: "";
display: block;
background-color: white;
height: 1px;
width: 2.8rem;
position: absolute;
top: 50%;
right: -4rem;
pointer-events: none;
}
.showcase__slider {
background-color: var(--slider-bg-color);
display: block;
align-items: center;
position: relative;
}
/*.showcase__slider::before {
content : "";
display : block;
background-color : black;
width : 50%;
height : 100%;
position : absolute;
top : 0;
right : 50%;
bottom : 0;
left : 0;
}*/
.showcase__slide {
background-color: white;
display: flex;
align-items: center;
position: relative;
}
/*** NEWS CSS - INNER PAGE HEADER **/
.inner-header {
--entry-title-size: 6.6rem;
--text-multiplier: 1;
background-color: var(--color-2);
width: 100%;
position: relative;
box-sizing: border-box;
margin-top: var(--vspace-4);
}
/*** HACK - INNER PAGE HEADER **/
.inner-header.doante {
background-color: var(--color-4);
}
.page-template-page-news .inner-header,
.single .inner-header {
background-color: var(--color-2);
}
.page-template-page-events .inner-header,
.single-events .inner-header,
.page-template-page-events-previous .inner-header {
background-color: var(--color-2);
}
.single-stories .inner-header {
background-color: var(--color-2);
}
.single-campaigns .inner-header {
background-color: var(--color-2);
}
.inner-header-wrp {
margin: 0 auto 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: space-between;
overflow: hidden;
}
.inner-header .inner-header-text {
flex: 1 1 0;
width: 0;
padding-top: var(--vspace-1_5);
padding-bottom: var(--vspace-1_5);
flex-direction: column;
color: white;
}
@media (min-width: 1800px) {
.inner-header .inner-header-text {
padding-top: var(--vspace-2);
padding-bottom: var(--vspace-2);
}
}
.inner-header .inner-header-img {
flex: 1 1 0;
width: 0;
margin: 30px;
padding-top: 0;
padding-bottom: 0;
flex-direction: column;
color: white;
}
.inner-header .inner-header-img img {
text-align: right;
margin-bottom: 0;
display: block;
margin-left: auto;
width: 100%;
height: 100%;
border-radius: 15px;
}
.inner-header .inner-header-text h1 {
margin: 0 10vh 0px;
color: var(--color-3);
font-family: var(--font-3);
font-weight: 600;
font-size: clamp(42px, calc(-13.556px + 5.5556vw), 92px);
line-height: 1.1;
overflow-wrap: break-word;
}
/* Shared title scale for the homepage hero and inner-page headers.
* Unitless leading follows the actual font size at every viewport width.
* Articles use a smaller scale to accommodate longer titles. */
.single .inner-header .inner-header-text h1 {
font-size: clamp(36px, calc(-1.778px + 3.7778vw), 70px);
line-height: 1.1;
}
@media (max-width: 1000px) {
.inner-header .inner-header-text h1 {
font-size: clamp(30px, calc(22px + 2vw), 42px);
}
.single .inner-header .inner-header-text h1 {
font-size: clamp(28px, calc(24.235px + 1.1765vw), 36px);
}
}
.inner-header .inner-header-text .btn-wrp {
margin: 0 10vh 30px;
}
.inner-header .inner-header-text h3 {
margin: 25px 10vh 0px;
color: var(--color-3);
font-family: var(--font-1);
font-weight: 400;
}
.inner-header .inner-header-text a {
color: var(--color-3);
}
.category .inner-header .inner-header-text a {
text-decoration: none;
}
.inner-header .inner-header-text .blog-cat {
margin: 0 10vh 30px;
color: white;
font-weight: 400;
font-size: 14px;
}
@media (max-width: 1950px) {
.inner-header .inner-header-text h3 {
font-size: 1.45vw;
}
}
@media (max-width: 1600px) {
.inner-header .inner-header-text h1,
.inner-header .inner-header-text h3 {
margin: 0 5vh;
}
.inner-header .inner-header-text h3 {
line-height: normal;
margin-top: 15px;
font-size: 24px;
}
.inner-header .inner-header-text .btn-wrp,
.inner-header .inner-header-text .blog-cat {
margin: 0 5vh;
}
}
@media (max-width: 1550px) {
.inner-header {
margin-top: calc(var(--vspace-3) + 5px);
}
}
@media (max-width: 1200px) {
.inner-header {
margin-top: calc(var(--vspace-2) + 13px);
}
.inner-header .inner-header-text h3 {
line-height: normal;
margin-top: 8px;
font-size: 18px;
}
}
@media (max-width: 1000px) {
.inner-header .inner-header-text h1,
.inner-header .inner-header-text h3,
.inner-header .inner-header-text .blog-cat {
margin: 0 3vh;
}
.inner-header .inner-header-text h3 {
margin: 8px 3vh 0;
}
.inner-header .inner-header-text .btn-wrp {
margin: 20px 0 0 3vh;
}
}
@media (max-width: 800px) {
.inner-header-wrp {
margin: 0 auto 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: flex-start;
overflow: hidden;
}
.inner-header .inner-header-text {
flex-direction: column;
flex: 1 100%;
}
.inner-header .inner-header-img {
flex-direction: column;
flex: 1 100%;
margin: 0 30px 30px 30px;
}
.inner-header .inner-header-text {
text-align: center;
padding-top: calc(var(--vspace-1_5) + -10px);
padding-bottom: calc(var(--vspace-1_5) + -10px);
}
.inner-header .inner-header-text .btn-wrp {
margin: 20px 0 0 0;
}
}
@media (max-width: 600px) {
.inner-header .inner-header-text {
padding-bottom: var(--vspace-1);
padding-top: calc(var(--vspace-1) + 0px);
}
}
@media (min-width: 851px) {
.70spc {
max-width: 70%;
}
}
@media (max-width: 780px) {
.inner-header .inner-header-text h1,
.inner-header .inner-header-text h3,
.inner-header .inner-header-text .blog-cat {
margin: 0 20px;
}
.inner-header .inner-header-text h3 {
line-height: normal;
margin-top: 2px;
font-size: 16px;
}
}
@media (max-width: 420px) {
.inner-header {
margin-top: calc(var(--vspace-2) + 0px);
}
}
.cd-breadcrumb {
width: 100%;
padding: 0;
margin: 0 10vh;
}
.cd-breadcrumb::after {
clear: both;
content: "";
display: table;
}
.cd-breadcrumb li {
display: inline-block;
float: left;
margin: 0.5em 0;
font-size: 1.4rem;
}
.cd-breadcrumb li::after {
display: inline-block;
content: "\00bb";
margin: 0 0.4em;
color: yellow;
}
.cd-breadcrumb li:last-of-type::after {
display: none;
}
.cd-breadcrumb li a {
display: inline-block;
font-size: 1.6rem;
color: rgba(255, 255, 255, 0.61);
}
.cd-breadcrumb li.current,
.bread-current {
color: rgba(255, 255, 255, 0.61);
}
.cd-breadcrumb a:hover {
color: yellow;
}
@media only screen and (min-width: 768px) {
.cd-breadcrumb {
padding: 0;
}
.cd-breadcrumb li {
margin: 0;
}
.cd-breadcrumb li::after {
margin: 0 0.6em;
}
}
@media (min-width: 1700px) {
.cd-breadcrumb li {
margin: 0 0 1em;
}
}
@media (max-width: 1600px) {
.inner-header .cd-breadcrumb {
margin: 0 5vh;
}
}
@media (max-width: 1000px) {
.inner-header .cd-breadcrumb {
margin: 0 3vh;
}
}
@media (max-width: 850px) {
.inner-header .cd-breadcrumb {
text-align: center;
margin: 0;
}
.inner-header .cd-breadcrumb li {
margin: 0 0 0.5em 0;
}
.inner-header .cd-breadcrumb {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
}
@media (max-width: 800px) {
.inner-header .inner-header-img img {
height: auto;
}
}
@media (max-width: 600px) {
.cd-breadcrumb li {
font-size: 1.3rem;
}
}
ul#breadcrumbs,
#breadcrumbs li {
margin-left: 0px;
padding-left: 0;
margin-bottom: 0;
}
#breadcrumbs .separator {
display: none;
}
#breadcrumbs strong {
font-weight: normal !important;
}
/** Date **/
.inner-header .inner-header-text h3 span {
font-size: 16px;
display: block;
}
/** Blog Cat **/
.inner-header .inner-header-text .blog-cat,
.page-template-page-blogs .blog-cat {
margin-right: 4px;
}
.inner-header .inner-header-text .blog-cat a,
.page-template-page-blogs .blog-cat a {
display: inline-block;
min-height: 10px;
min-width: 30px;
margin-right: 5px;
padding: 4px 10px 6px;
font-size: 14px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-radius: 50px;
background-color: var(--color-5);
color: #fff;
line-height: normal;
text-decoration: none;
transition: all 200ms ease-in;
margin-bottom: 0 !important;
}
.inner-header .inner-header-text .blog-cat a:hover {
background-color: #000;
color: #fff;
}
.page-template-page-blogs .blog-cat a {
background-color: rgba(0, 0, 0, 0.23);
color: #fff;
font-size: 12px;
padding: 2px 8px 5px;
}
.page-template-page-blogs .blog-cat a:hover {
background-color: #000;
color: #fff;
}
.page-template-page-blogs .blog-cat a::after {
display: none;
}
/**** NEW CSS - BANNER ****/
.banner {
--entry-title-size: 6.6rem;
--text-multiplier: 1;
background-color: var(--color-1);
width: 100%;
position: relative;
box-sizing: border-box;
}
.banner-wrp {
margin: 0 auto 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: space-between;
overflow: hidden;
}
.banner .banner-text {
flex: 1 1 0;
width: 0;
padding-top: var(--vspace-1);
padding-bottom: var(--vspace-1);
flex-direction: column;
color: white;
background-color: var(--color-1);
}
.banner .banner-img {
flex: 1 1 0;
width: 0;
margin: 0;
padding-top: 0;
padding-bottom: 0;
flex-direction: column;
color: white;
}
.banner .banner-img img {
text-align: right;
margin-bottom: 0;
display: block;
margin-left: auto;
margin-bottom: 0 !important;
width: 100%;
height: 100%;
}
.banner .pull-quote blockquote {
max-width: none;
margin: 0 10vh !important;
color: white;
padding-top: var(--vspace-2_7);
}
.banner .pull-quote blockquote p,
.banner .pull-quote blockquote h2 {
font-family: var(--font-2);
font-weight: 500;
font-size: 2vw;
line-height: normal;
color: white;
}
.banner .pull-quote blockquote h2 {
font-size: 3vw;
margin-top: 0;
}
blockquote cite {
color: rgba(255, 255, 255, 0.74);
}
.banner .pull-quote blockquote:before {
background-image: url(../images/icons/icon-quote1.svg);
left: calc(50% - 20px);
height: var(--vspace-1_25);
width: var(--vspace-1_25);
}
.banner-above-footer {
padding-top: var(--vspace-4);
padding-bottom: var(--vspace-4);
background-color: rgba(0, 0, 0, 0.06);
margin-bottom: -120px;
}
@media (max-width: 1700px) {
.banner .pull-quote blockquote {
max-width: none;
margin: 0 3vh !important;
}
}
@media (max-width: 1450px) {
.banner .pull-quote blockquote {
margin: 0 1vh !important;
}
.banner .banner-text {
padding-top: var(--vspace-0_5);
padding-bottom: var(--vspace-0_5);
}
}
@media (max-width: 1400px) {
.banner-wrp {
background-size: contain !important;
}
}
@media (max-width: 1100px) {
.banner .banner-text {
flex: 0 0 100%;
}
.banner .pull-quote blockquote p {
font-size: 26px;
}
.banner .pull-quote blockquote h2 {
font-size: 26px;
}
.banner-above-footer {
padding-top: var(--vspace-2_5);
padding-bottom: var(--vspace-2_5);
margin-bottom: -100px;
}
}
@media (max-width: 900px) {
.banner-above-footer {
display: none;
}
}
@media (max-width: 480px) {
.banner .pull-quote blockquote p {
font-size: 22px;
}
}
/**** NEW CSS - BLOCK IMG ALIGN/SIZE ****/
@media screen and (min-width: 1400px) {
.alignfull {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
}
.alignwide {
margin: 40px 0 40px -170px;
max-width: 1200px;
width: 1200px;
}
}
body {
overflow-x: hidden;
}
/**** NEW CSS - BLOCK CTA (footer ****/
.call-to-action.wp-block-media-text .wp-block-media-text__content {
padding: 18% 8% 14%;
}
.small-quote.call-to-action.wp-block-media-text .wp-block-media-text__content {
padding: 9% 6% 4%;
}
.call-to-action.wp-block-media-text .wp-block-media-text__content p {
margin-bottom: 0;
font-size: 16px;
text-align: left;
font-family: var(--font-1);
padding-left: 4em;
}
.call-to-action.wp-block-media-text .wp-block-media-text__content h3,
.call-to-action.wp-block-media-text .wp-block-media-text__content h4 {
position: relative;
font-weight: 400;
text-align: left;
font-family: var(--font-2);
}
.call-to-action.wp-block-media-text .wp-block-media-text__content h2,
.call-to-action.wp-block-media-text .wp-block-media-text__content h1,
.call-to-action.wp-block-media-text .wp-block-media-text__content h4 {
font-family: var(--font-2);
}
.call-to-action.wp-block-media-text .wp-block-media-text__content strong {
font-weight: 400;
}
.call-to-action .wp-block-media-text__content h2 {
position: relative;
padding-left: 1.2em;
text-align: left;
}
/* Decorative quote icon */
.call-to-action .wp-block-media-text__content h2::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
background-image: url("../images/quote.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.call-to-action.wp-block-media-text .wp-block-media-text__content h3::before,
.call-to-action.wp-block-media-text .wp-block-media-text__content h4::before {
content: "";
display: block;
background-repeat: no-repeat;
background: center center;
background-size: contain;
transform: translate(-50%, 0);
position: absolute;
top: -55px;
background-image: url(../images/icons/icon-quote1.svg);
left: calc(50% - 20px);
height: var(--vspace-1_25);
width: var(--vspace-1_25);
}
.call-to-action.alignfull {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
}
@media screen and (max-width: 1400px) {
.call-to-action.wp-block-media-text .wp-block-media-text__content h2 {
font-size: 28px;
line-height: normal
}
.call-to-action .wp-block-media-text__content h2::before {
top: 3px;
width:0.9em;
height: 0.9em;
}
.call-to-action.wp-block-media-text .wp-block-media-text__content p {
padding-left: 2.7em;
}
.call-to-action.wp-block-media-text .wp-block-media-text__content h3,
.call-to-action.wp-block-media-text .wp-block-media-text__content h4 {
font-size: 24px;
}
.call-to-action.wp-block-media-text .wp-block-media-text__content {
padding: 14% 8% 10%;
}
.small-quote.call-to-action.wp-block-media-text
.wp-block-media-text__content {
padding: 7% 5% 4%;
}
.small-quote.call-to-action {
margin-bottom: 30px !important;
}
}
@media (max-width: 990px) {
.call-to-action.wp-block-media-text.is-stacked-on-mobile {
grid-template-columns: 100% !important;
}
.call-to-action.wp-block-media-text.is-stacked-on-mobile
.wp-block-media-text__media {
grid-column: 1;
grid-row: 1;
}
.call-to-action.wp-block-media-text.is-stacked-on-mobile
.wp-block-media-text__content {
grid-column: 1;
grid-row: 2;
}
.call-to-action.wp-block-media-text .wp-block-media-text__content {
padding: 40px;
}
.call-to-action.wp-block-media-text .wp-block-media-text__content h2 {
margin-bottom: 15px
}
}
.wp-block-media-text {
font-family: verveine, sans-serif;
}
@media (max-width: 890px) {
.wp-block-media-text .wp-block-media-text__content {
padding: 20px !important;
}
}
@media (max-width: 600px) {
.call-to-action.wp-block-media-text .wp-block-media-text__content h2 {
font-size: 22px;
line-height: normal
}
.call-to-action.wp-block-media-text .wp-block-media-text__content p {
padding-left: 2em;
}
.call-to-action.wp-block-media-text .wp-block-media-text__content h2 {
margin-bottom: 6px
}
}
/**** BLOVK BUTTON ****/
.wp-block-button__link,
.wp-block-button__link:active,
.wp-block-button__link:focus,
.wp-block-button__link:visited {
color: #000;
background-color: var(--color-6);
padding: calc(0.367em) calc(1em + 2px);
}
.wp-block-button__link:hover {
color: #fff;
background-color: black;
}
/*** VOLUNTEERING ***/
.volunteering-job h2,
.volunteering-job h3,
.volunteering-job h4 {
margin-bottom: 4px;
}
.volunteering-job p {
margin-bottom: 0;
}
/*** CAMPAIGN DONATION TOTAL ***/
.donation-raised-wrapper {
background-color: var(--color-2);
display: block;
padding: 6%;
margin-top: 20px;
}
.donation-raised-wrapper .row {
width: auto;
max-width: none;
margin-left: 0 !important;
margin-right: 0 !important;
}
.donation-raised-wrapper #jqmeter-container {
padding: 8px;
background-color: rgba(255, 255, 255, 0.2);
}
.donation-raised-wrapper h3 {
color: var(--color-6);
margin-bottom: 20px;
}
.donation-raised-wrapper h2 {
font-size: 60px;
margin-bottom:2.3vw !important;
}
.donation-raised-wrapper a.btn--small {
margin-top: 30px !important;
background-color: var(--color-6);
border: 2px solid var(--color-6);
color: black !important;
}
@media (max-width: 1400px) {
.donation-raised-wrapper h2 {
margin-bottom: 50px !important;
}
}
@media (max-width: 770px) {
.donation-raised-wrapper h2 {
margin-bottom: 40px !important;
}
}
@media (max-width: 670px) {
.donation-raised-wrapper h2 {
font-size: 35px;
margin-bottom: 30px !important;
}
.donation-raised-wrapper h3 {
font-size: 26px;
margin-bottom: 6px;
}
}
@media (max-width: 600px) {
.donation-raised-wrapper {
padding: 30px 30px 40px;
}
.donation-raised-wrapper h2 {
font-size: 45px;
margin-bottom: 30px !important;
}
.donation-raised-wrapper h3 {
font-size: 22px;
margin-bottom: 2px;
}
}
/*** CAMPAIGN DONATION - REUSABLE BLOCK FORM ***/
.donation-box {
border: 0px;
padding-top: 25px;
padding-right: 40px;
padding-left: 40px;
padding-bottom: 10px;
width: 100% !important;
background-color: var(--color-2);
margin-bottom: 0px !important;
margin-top: 0px !important;
}
.donation-box h3.donation-title {
letter-spacing: normal !important;
margin: 10px 0 16px 0;
font-family: var(--font-1);
font-size: 34px;
font-weight: bold;
}
.donation-box ul {
margin-left: 0;
margin-bottom: 0;
display: block;
overflow: hidden;
}
.donation-box ul.hidden {
display: none;
}
.donation-box li {
display: inline-block;
list-style-type: none;
overflow: hidden;
vertical-align: top;
position: relative;
box-sizing: border-box;
float: left;
}
.donation-box input[type="radio"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
.donation-box input:checked + label,
.donation-box input[type="radio"]:checked + label {
background-color: var(--color-1);
}
.donation-box input:checked + label::before,
.donation-box input[type="radio"]:checked + label::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f00c";
font-size: 2.8rem;
margin-right: 10px;
}
.donation-box li label {
margin: 0;
max-width: 100%;
width: calc(100%);
font-size: 28px !important;
line-height: 1.5;
display: block;
font-weight: 600;
padding: 1.525rem 0;
line-height: 1.4;
color: var(--color-3);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
margin-bottom: 16px;
background-color: white;
border: 0px solid white;
text-align: center;
min-height: 0 !important;
}
.donation-box .amount-info {
height: 118px;
}
.donation-box #other-amount {
height: 118px;
padding-top: 5px;
}
.donation-box .amount-info img {
width: 140px;
height: auto;
float: left;
margin-bottom:0
}
.donation-box .amount-info .amount-info-header {
color: var(--color-3);
margin-top: 7px;
margin-bottom: 0;
padding-left: 165px;
font-weight: 300;
font-size: 22px;
line-height: 22px;
font-family: var(--font-1);
}
.donation-box #other-amount label[for="donation_other_amount"] {
display: none;
}
.donation-box
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not(
[type="button"]
):not([type="image"]):not([type="file"]) {
font-size: 28px !important;
line-height: 26px;
}
/** SUBMIT BUTTON **/
.donation-submit {
position: relative;
isolation: isolate;
display: block;
width: fit-content;
margin: 40px 1.1em 0 0;
font-size: clamp(1.8rem, 2.4vw, 2.25rem);
overflow: visible;
transition: transform 0.25s ease;
}
body .donation-submit input[type="submit"] {
position: relative;
z-index: 1;
display: block;
width: 100%;
min-height: 2.7em;
margin: 0 !important;
padding: 0.7em 1.75em 0.7em 2.85em !important;
color: #302653 !important;
font-family: "basic-sans", Arial, sans-serif !important;
font-size: 1em !important;
font-weight: 700;
line-height: 1.15 !important;
text-align: center;
text-transform: none;
background-color: #fff867 !important;
background-image: url("../images/donate-icon.svg") !important;
background-repeat: no-repeat !important;
background-position: 1.1em center !important;
background-size: 1.1em 1.1em !important;
border: 0 !important;
border-radius: 999px 0 0 999px;
cursor: pointer;
transition:
color 0.25s ease,
background-color 0.25s ease,
transform 0.25s ease;
}
/* Heart icon. */
.donation-submit::before {
content: none;
}
/* Rounded arrow end. */
.donation-submit::after {
content: "";
position: absolute;
z-index: 0;
top: 0;
right: -1.05em;
bottom: 0;
width: 1.1em;
background-color: #fff867;
clip-path: polygon(0 0, 100% 50%, 0 100%);
pointer-events: none;
transition: background-color 0.25s ease;
}
.donation-submit:hover input[type="submit"],
body .donation-submit input[type="submit"]:focus-visible {
color: #ffffff !important;
background-color: #302653 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M10.26 2.05C9.13.92 7.19.87 6 1.91 4.81.87 2.87.92 1.74 2.05a3.1 3.1 0 0 0 0 4.4L6 10.71l4.26-4.26a3.1 3.1 0 0 0 0-4.4Z'/%3E%3C/svg%3E") !important;
transform: none;
}
.donation-submit:hover,
.donation-submit:focus-within {
transform: translateY(-2px);
}
.donation-submit:hover::before,
.donation-submit:focus-within::before {
background-color: #ffffff;
}
.donation-submit:hover::after,
.donation-submit:focus-within::after {
background-color: #302653;
}
body .donation-submit input[type="submit"]:focus-visible {
outline: 3px solid #302653;
outline-offset: 5px;
}
@media (max-width: 1000px) {
.donation-submit {
font-size: 2rem;
}
body .donation-submit input[type="submit"] {
padding-left: 2.5em !important;
}
}
@media (max-width: 800px) {
.donation-submit {
width: calc(100% - 1.05em);
margin-right: 1.05em;
margin-top: 20px;
}
body .donation-submit input[type="submit"] {
min-height: 2.6em;
padding: 0.65em 2em !important;
background-position: calc(50% - 3.75em) center !important;
background-size: 1.05em 1.05em !important;
}
}
/** RESPONSIVE CLASSES **/
@media only screen and (min-width: 641px) {
.donation-box ul.donation-type li {
width: calc(50% - 1px);
display: -moz-inline-stack;
display: inline-block;
margin: 0;
padding: 0px;
min-height: 28px;
border-right: solid 1px var(--color-2);
}
.donation-box .donation-suggested-amounts li {
width: calc(20% - 1px);
border-right: solid 1px var(--color-2);
}
.donation-box .donation-suggested-amounts li:last-child {
width: calc(40% - 1px);
border-right: solid 1px var(--color-2);
}
}
@media (max-width: 1100px) {
.donation-box {
padding-top: 15px;
padding-right: 30px;
padding-left: 30px;
}
.donation-box li label {
font-size: 24px !important;
}
.donation-box input:checked + label::before,
.donation-box input[type="radio"]:checked + label::before {
font-size: 2rem;
}
}
@media screen and (max-width: 900px) {
.donation-box h3.donation-title {
font-size: 28px;
}
.donation-box li label {
font-size: 22px !important;
}
}
@media (max-width: 850px) {
.donation-box {
padding-top: 15px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
}
}
@media (max-width: 850px) {
.donation-box .amount-info {
height: 94px;
}
.donation-box #other-amount {
height: 91px;
padding-top: 0px;
}
.donation-box .amount-info img {
width: 90px;
}
.donation-box .amount-info .amount-info-header {
padding-left: 110px;
font-size: 16px;
line-height: 16px;
font-weight: 400;
}
.donation-box
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not(
[type="button"]
):not([type="image"]):not([type="file"]) {
font-size: 22px !important;
line-height: 20px;
margin-top: 3px !important;
}
}
@media (max-width: 850px) {
.donation-box .amount-info .amount-info-header {
text-align: left;
}
}
@media screen and (max-width: 650px) {
.donation-box ul.donation-type li,
.donation-box .donation-suggested-amounts li,
.donation-box .donation-suggested-amounts li:last-child {
width: calc(100%);
}
#monthly-suggested-amounts,
#single-suggested-amounts {
padding-top: 20px;
border-top: rgba(255, 255, 255, 0.18) 1px solid;
}
}
@media screen and (max-width: 600px) {
.donation-box h3.donation-title {
font-size: 22px;
}
}
.donate-wrapper-outer .donate-other-wrapper {
width: 100%;
margin: 20px 0 0 0;
padding: 15px 20px;
background-color: var(--color-2);
float: left;
text-align: center;
}
.donate-wrapper-outer .donate-other-wrapper p {
margin-bottom: 0;
}
@media (max-width: 800px) {
.donate-wrapper-outer .donate-other-wrapper {
margin: 0;
padding: 10px 20px;
}
}
@media (max-width: 650px) {
.donate-wrapper-outer .donate-other-wrapper {
font-size: 16px;
}
}
/* Donorfy Subscribe Form */
.donorfy-subscribe-intro {
margin-bottom: 1em;
}
.gform_wrapper.dsf_theme .ginput_complex {
display: flex;
flex-flow: row;
gap: 20px;
}
.gform_wrapper.dsf_theme .ginput_complex span {
flex: 1;
}
.gform_wrapper.dsf_theme input[type="checkbox"] {
width: 1.2em;
height: 1em;
}
.gform_wrapper.dsf_theme .gfield-choice-input + label {
margin-top: -3px;
margin-left: 0.3em;
max-width: calc(100% - 22px);
vertical-align: top;
display: inline-block;
}
.gform_wrapper.dsf_theme .gchoice_consent input {
float: left;
margin-top: 10px;
}
.gform_wrapper.dsf_theme .gchoice_consent label {
display: block;
padding-left: 1.5em;
line-height: var(--vspace-0_875) !important;
}
[hidden],
.gform_wrapper.dsf_theme [hidden] {
display: none;
}
/* ===================================================================
* # CUSTOM BUTTON SYSTEM
* ------------------------------------------------------------------- */
:root {
/* Default button icon */
--act-button-icon: url("../images/default-icon.svg");
--act-button-icon-color: var(--color-3);
--act-button-icon-hover-color: #ffffff;
--act-button-background: var(--color-2);
--act-button-background-hover: var(--color-3);
--act-button-text: var(--color-3);
--act-button-text-hover: white;
}
/* Main button */
a.btn,
button.btn {
--button-background: var(--act-button-background);
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55em;
width: auto;
height: auto;
min-height: 2.35em;
padding: 0.55em 0.7em 0.55em 0.8em;
margin-bottom: 0;
font-family: var(--font-1);
color: var(--act-button-text);
font-weight: 600;
line-height: 1.15;
text-align: left;
text-decoration: none;
background: var(--button-background);
border: 0;
border-radius: 999px 6px 6px 999px;
overflow: visible;
vertical-align: middle;
transition:
background-color 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
/* Icon to the left of the button text */
a.btn::before,
button.btn::before {
content: "";
display: block;
flex: 0 0 1.15em;
width: 1.15em;
height: 1.15em;
background-color: var(--act-button-icon-color);
-webkit-mask-image: var(--act-button-icon);
mask-image: var(--act-button-icon);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
transition: background-color 0.25s ease;
}
/* Rounded right-hand arrow */
a.btn::after,
button.btn::after {
content: "";
position: absolute;
z-index: -1;
top: 50%;
right: 0;
width: auto;
height: calc(70.711% + 3px);
aspect-ratio: 1 / 1;
background-color: var(--button-background);
border-radius: 5.5px;
transform: translate(50%, -50%) rotate(45deg);
transform-origin: center;
pointer-events: none;
transition: background-color 0.25s ease;
}
/* Hover and keyboard focus */
a.btn:hover,
a.btn:focus-visible,
button.btn:hover,
button.btn:focus-visible {
--button-background: var(--act-button-background-hover);
color: var(--act-button-text-hover);
background: var(--button-background);
}
a.btn:focus-visible,
button.btn:focus-visible {
outline: 3px solid currentColor;
outline-offset: 5px;
}
a.btn:hover::before,
a.btn:focus-visible::before,
button.btn:hover::before,
button.btn:focus-visible::before {
background-color: var(--act-button-icon-hover-color);
}
/* Smaller button variation */
a.btn.btn--small,
button.btn.btn--small {
min-height: 2.15em;
padding: 0.45em 1.2em;
border-radius: 999px;
}
a.btn.btn--small::after,
button.btn.btn--small::after,
a.btn.btn--small::before,
button.btn.btn--small::before {
display: none;
}
/* Remove animation when requested by the visitor */
@media (prefers-reduced-motion: reduce) {
a.btn,
button.btn,
a.btn::after,
button.btn::after {
transition: none;
}
}
.btn--search {
--act-button-icon: url("../images/search.svg");
}
.btn--external {
--act-button-icon: url("../images/external-link.svg");
}
.btn--donate {
--act-button-icon: url("../images/donate-icon.svg");
--button-background: var(--color-1);
}
.btn--email {
--act-button-icon: url("../images/email-icon.svg");
}
a.btn--stroke,
button.btn.btn--stroke {
--button-background: var(--color-3) !important;
color: white;
}
a.btn--stroke:before {
background-color: white;
}
a.btn--stroke:focus,
button.btn--stroke:focus,
a.btn--stroke:hover,
button.btn--stroke:hover {
background-color: var(--color-2);
color: var(--color-3);
}
a.btn--stroke:hover::before,
a.btn--stroke:focus-visible::before,
button.btn--stroke:hover::before,
button.btn--stroke:focus-visible::before {
background-color: var(--color-3);
}
a.btn--stroke:hover::after,
a.btn--stroke:focus-visible::after,
button.btn--stroke:hover::after,
button.btn--stroke:focus-visible::after {
background-color: var(--color-2);
}
:root {
--act-section-width: 1840px;
--act-card-radius: 15px;
}
/* --------------------------------
Three impact cards
-------------------------------- */
/*.act-impact, .act-fundraise-block {
padding: clamp(50px, 7vw, 70px) 0px;
}*/
.act-impact__inner {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(24px, 3vw, 40px);
max-width: var(--act-section-width);
margin-inline: auto;
}
.act-impact-card {
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
color: var(--color-3);
/*background-color: var(--color-2);*/
border-radius: var(--act-card-radius);
}
.act-impact-card__image {
position: relative;
aspect-ratio: 1.65 / 1;
overflow: hidden;
background-color: #ddd;
}
.act-impact-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.act-impact-card:hover .act-impact-card__image img {
transform: scale(1.025);
}
.act-impact-card__content {
flex-grow: 1;
padding: 30px;
text-align: center;
}
.act-impact-card__content h2 {
margin: 0 0 14px;
color: var(--color-3);
font-family: var(--font-3);
font-weight: 700;
line-height: 1;
}
.act-impact-card__content p {
max-width: 420px;
margin: 0 auto;
color: var(--color-3);
font-size: 18px;
line-height: normal;
margin-bottom: 12px;
}
/* --------------------------------
Fundraise with us
-------------------------------- */
.act-fundraise {
padding: clamp(50px, 7vw, 60px) 30px;
overflow: hidden;
width: 100%;
}
.act-fundraise__inner {
position: relative;
max-width: var(--act-section-width);
min-height: 640px;
margin-inline: auto;
}
.act-fundraise__image {
width: 70%;
min-height: 640px;
margin-left: auto;
overflow: hidden;
background-color: #ddd;
}
.act-fundraise__image img {
display: block;
width: 100%;
height: 640px;
object-fit: cover;
object-position: center;
margin-bottom: 0;
}
.act-fundraise__content {
position: absolute;
z-index: 1;
top: 50%;
left: 0;
width: min(620px, 52%);
padding: 50px;
transform: translateY(-50%);
color: var(--color-3);
background-color: var(--color-1);
border-radius: var(--act-card-radius);
}
.act-fundraise__content h2 {
margin: 0 0 24px;
color: var(--color-3);
font-family: var(--font-3);
font-size: clamp(2.6rem, 5vw, 4.75rem);
}
.act-fundraise__content p {
margin: 0 0 24px;
color: var(--color-3);
font-size: 18px;
line-height: 1.35;
}
.act-fundraise__content .act-fundraise__intro {
font-size: 22px;
}
.act-fundraise__content .btn {
margin-top: 18px;
}
/* --------------------------------
Responsive layout
-------------------------------- */
@media (max-width: 1000px) {
.act-impact__inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.act-impact-card:last-child {
grid-column: 1 / -1;
width: calc(50% - 12px);
margin-inline: auto;
}
.act-fundraise__inner {
min-height: 580px;
padding-left: 0;
}
.act-fundraise__image,
.act-fundraise__image img {
min-height: 580px;
height: 580px;
}
.act-fundraise__content {
width: 55%;
}
}
@media (max-width: 767px) {
.act-impact,
.act-fundraise,
.act-fundraise-block {
padding-inline: 20px 0 20px 0!Important;
}
.act-impact__inner {
grid-template-columns: 1fr;
}
.act-impact-card:last-child {
grid-column: auto;
width: 100%;
}
.act-fundraise__inner {
display: flex;
flex-direction: column;
min-height: 0;
}
.act-fundraise__image {
order: 1;
width: 100%;
min-height: 0;
border-radius: var(--act-card-radius) var(--act-card-radius) 0 0;
}
.act-fundraise__image img {
height: auto;
min-height: 320px;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.act-fundraise__content {
position: static;
order: 2;
width: 100%;
padding: 36px 28px;
transform: none;
border-radius: 0 0 var(--act-card-radius) var(--act-card-radius);
}
.act-fundraise__content h2 {
font-size: clamp(2.5rem, 12vw, 4rem);
}
}
@media (prefers-reduced-motion: reduce) {
.act-impact-card__image img {
transition: none;
}
.act-impact-card:hover .act-impact-card__image img {
transform: none;
}
}
/* Consistent keyboard focus treatment across the public interface. */
body :where(a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus {
outline: 3px solid #111111 !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 2px #ffffff !important;
}
body :where(a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus:not(:focus-visible) {
outline: none !important;
box-shadow: none !important;
}
body :where(a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
outline: 3px solid #111111 !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 2px #ffffff !important;
}
.owl-carousel-hero .owl-nav button:focus-visible,
.owl-carousel .owl-nav button:focus-visible {
background: transparent !important;
}
.skip-link.screen-reader-text:focus {
display: block;
clip: auto !important;
clip-path: none;
width: auto;
height: auto;
margin: 0;
top: 12px;
left: 12px;
padding: 14px 20px;
background: #ffffff;
color: #111111;
border: 3px solid #111111;
border-radius: 2px;
font-size: 18px;
font-weight: 700;
line-height: 1.4;
text-decoration: none;
z-index: 10000;
}
#content {
scroll-margin-top: 100px;
}