/*
  ===============================================================================
  RESET DEFAULTS AND BROWSER STANDARDISATION
  ===============================================================================
*/
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
main,
article,
aside,
figure,
footer,
header,
menu,
nav,
section,
time,
mark,
audio,
video,
canvas {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* force a vertical scrollbar to prevent a jumpy page, and text size adjust fix when changing page orientation */
html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
}

/* border box model */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
video,
canvas,
progress {
  display: inline-block;
}

/* Prevents modern browsers from displaying 'audio' without controls.
   Remove excess height in iOS 5 devices. */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template,
[hidden] {
  display: none;
}

/*
  ==========================
  images / objects
  ==========================
*/
/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems when using foreground images as sprites.
   If this default setting for images is causing issues replace with a .responsive class instead. */
img,
object,
embed {
  max-width: 100%;
}

img {
  border: 0;
  border-style: none;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden;
}

/*
  ==========================
  quotes
  ==========================
*/
blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

/*
  ==========================
  links
  ==========================
*/
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-decoration-skip: objects;
}

a:active,
a:hover {
  outline: none;
  outline-width: 0;
}

a:focus {
  outline: thin dotted;
}

/*
  ==========================
  marked up copy
  ==========================
*/
del {
  text-decoration: line-through;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

dfn {
  font-style: italic;
}

/*
  ==========================
  tables
  ==========================
*/
table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: inherit;
}

th {
  font-weight: bold;
  vertical-align: bottom;
}

td {
  font-weight: normal;
  vertical-align: top;
}

td img {
  vertical-align: top;
}

/*
  ==========================
  forms
  ==========================
*/
/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
select,
textarea {
  font: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
  resize: none;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
  ==========================
  pre copy
  ==========================
*/
pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */
}

/*
  ==========================
  character styles
  ==========================
*/
small {
  font-size: 80%;
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/*
  ==========================
  sub / superscript
  ==========================
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/*
  ==========================
  monospaced elements
  ==========================
*/
pre,
code,
kbd,
samp {
  font-family: monospace, sans-serif;
}

/*
  ==========================
  lightweight clearfix
  ==========================
*/
.cf:before,
.cf:after {
  content: "";
  display: table;
}

.cf:after {
  clear: both;
}

/*
  ==========================
  visibility options
  ==========================
*/
.hidden {
  display: none !important;
  visibility: hidden;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 0;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.invisible {
  visibility: hidden;
}

/*
  ==========================
  css transition page load fix
  ==========================
*/
.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

/*
  ===============================================================================
  VARIABLES
  ===============================================================================
*/
/*
  ==========================
  colours
  ==========================
*/
/*
  ==========================
  liturgy section colours
  ==========================
*/
/*
  ==========================
  columns
  ==========================
*/
/*
  ===============================================================================
  FONTS
  ===============================================================================
*/
/*
  ==========================
  font awesome
  ==========================
*/
@font-face {
  font-family: "FontAwesome";
  src: url("../../../themes/catholic/fonts/fontawesome-webfont.eot?v=4.7.0");
  src: url("../../../themes/catholic/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0")
      format("embedded-opentype"),
    url("../../../themes/catholic/fonts/fontawesome-webfont.woff2?v=4.7.0")
      format("woff2"),
    url("../../../themes/catholic/fonts/fontawesome-webfont.woff?v=4.7.0")
      format("woff"),
    url("../../../themes/catholic/fonts/fontawesome-webfont.ttf?v=4.7.0")
      format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NZ Church icons";
  src: url("../../../themes/catholic/fonts/NZ-Church-icons.eot");
  src: url("../../../themes/catholic/fonts/NZ-Church-icons.eot?#iefix")
      format("embedded-opentype"),
    url("../../../themes/catholic/fonts/NZ-Church-icons.woff") format("woff"),
    url("../../../themes/catholic/fonts/NZ-Church-icons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/*
  ==========================
  general
  ==========================
*/
body,
input,
select,
textarea {
  font-family: "PT Serif", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: #4a4a4a;
}

.rubik {
  font-family: "Rubik", sans-serif !important;
  font-size: 14px;
  line-height: 1.16;
}

/*
  ==========================
  headings
  ==========================
*/
/* content header - page title area */
/* -------------------------------- */
header.content-header {
  position: relative;
  background-color: #cccccc;
  /* default fallback colour only */
  /* liturgy colors */
}
header.content-header:after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 100%;
  right: 0;
  display: block;
  width: 133px;
  height: 703px;
  margin-top: 80px;
  background: url(../../../themes/catholic/images/pattern-holy-trinity-vertical@2x.png)
    top right no-repeat transparent;
  background-size: contain;
}
body.liturgy header.content-header:after {
  width: 109px;
  height: 503px;
  background: url(../../../themes/catholic/images/pattern-stairway-vertical@2x.png)
    top right no-repeat transparent;
  background-size: contain;
}
header.content-header .content-holder {
  min-height: 264px !important;
  padding-top: 108px !important;
  padding-bottom: 48px !important;
}
header.content-header .content-holder:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  min-height: 108px;
  overflow: hidden;
  vertical-align: bottom;
}
header.content-header .content-holder h1 {
  display: inline-block;
  vertical-align: bottom;
}
body.light-yellow header.content-header {
  background-color: #f4ebc9;
}
body.light-blue header.content-header {
  background-color: rgba(133, 173, 192, 0.4);
}
body.light-green header.content-header {
  background-color: rgba(173, 200, 120, 0.4);
}
body.light-purple header.content-header {
  background-color: rgba(156, 137, 193, 0.4);
}
body.light-grey header.content-header {
  background-color: rgba(204, 204, 204, 0.4);
}
body.dark-grey header.content-header {
  background-color: rgba(74, 74, 74, 0.4);
}
body.denim header.content-header {
  background-color: rgba(53, 81, 124, 0.3);
}
body.dark-blue-grey header.content-header {
  background-color: rgba(33, 40, 77, 0.4);
}

/* common styles */
/* ------------- */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: "Rubik", sans-serif;
  color: #4a4a4a;
  font-weight: 500;
}

/* liturgy headings */
/* ------------- */
body.liturgy h1,
body.liturgy .h1,
body.liturgy h2,
body.liturgy .h2,
body.liturgy h3,
body.liturgy .h3,
body.liturgy h4,
body.liturgy .h4,
body.liturgy h5,
body.liturgy .h5,
body.liturgy h6,
body.liturgy .h6 {
  color: #21284d;
}

/* main page title */
/* --------------- */
h1,
.h1 {
  font-size: 36px;
  line-height: normal;
}
h1 + *,
.h1 + * {
  margin-top: 24px !important;
}

/* heading */
/* ------- */
h2,
.h2 {
  font-size: 30px;
  line-height: 1.14;
}

/* sub-heading */
/* ----------- */
h3,
.h3 {
  font-size: 24px;
  line-height: 1.25;
}

/* minor heading */
/* ------------- */
h4,
.h4 {
  font-size: 18px;
  line-height: normal;
}

/* sub-minor heading */
/* ----------------- */
h5,
.h5 {
  font-size: 16px;
  line-height: 1.25;
}

/* unused heading levels */
/* --------------------- */
h6 {
  font-size: 10px;
  /* encourage not to use */
  font-weight: 400;
}

/* header spacing */
/* -------------- */
h2 + *,
h3 + *,
h4 + *,
h5 + *,
h6 + * {
  margin-top: 8px !important;
}

* + h2,
* + h3,
* + h4,
* + h5,
* + h6 {
  margin-top: 40px !important;
}

h2 + h3,
h2 + h4,
h2 + h5,
h2 + h6,
h3 + h4,
h3 + h5,
h3 + h6,
h4 + h5,
h4 + h6,
h5 + h6 {
  margin-top: 8px !important;
}

hr + h2,
hr + h3,
hr + h4,
hr + h5,
hr + h6 {
  margin-top: 40px !important;
}

/*
  ==========================
  section layouts
  ==========================
*/
.section-layout {
  margin: 28px 0;
  /*
    ==========================
    heading section layouts
    ==========================
  */
}
.section-layout.header {
  margin-top: 42px;
  background-color: #9b9b9b;
  /* default fallback colour only */
  /* heading spacing */
  /* --------------- */
  /* image size options */
  /* ------------------ */
  /* image position options */
  /* ---------------------- */
  /* above title */
  /* below title and baseline */
  /* typography inside header section */
}
body.light-yellow .section-layout.header {
  background-color: #f4ebc9;
}
body.light-blue .section-layout.header {
  background-color: rgba(133, 173, 192, 0.4);
}
body.light-green .section-layout.header {
  background-color: rgba(173, 200, 120, 0.4);
}
body.light-purple .section-layout.header {
  background-color: rgba(156, 137, 193, 0.4);
}
body.light-grey .section-layout.header {
  background-color: rgba(204, 204, 204, 0.4);
}
body.dark-grey .section-layout.header {
  background-color: rgba(74, 74, 74, 0.4);
}
.section-layout.header > .wrapper {
  padding-top: 34px;
  padding-bottom: 68px;
}
.section-layout.header h2 {
  /* header spacing */
  /* -------------- */
}
.section-layout.header h2 + * {
  margin-top: 34px !important;
}
.section-layout.header .image-holder {
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: cover;
}
.section-layout.header.image-4-3 .image-holder {
  padding-bottom: 75%;
}
.section-layout.header.image-1-1 .image-holder {
  padding-bottom: 100%;
}
.section-layout.header.image-5-3 .image-holder {
  padding-bottom: 60%;
}
.section-layout.header.image-5-2 .image-holder {
  padding-bottom: 40%;
}
.section-layout.header.above-title.with-image {
  /* 4:3 aspect ratio */
  /* 1:1 aspect ratio */
  /* 5:3 aspect ratio */
  /* 5:2 aspect ratio */
  /* left position */
  /* centre position */
  /* right position */
}
.section-layout.header.above-title.with-image > .wrapper {
  padding-top: 0;
}
.section-layout.header.above-title.with-image .above-title-holder {
  margin-left: -10px;
  margin-right: -10px;
}
.section-layout.header.above-title.with-image .image-column,
.section-layout.header.above-title.with-image .text-column {
  padding: 0 10px;
}
.section-layout.header.above-title.with-image .image-column {
  width: 50%;
  /* equivalent to 6 columns */
}
.section-layout.header.above-title.with-image .image-holder {
  margin-bottom: 34px;
}
.section-layout.header.above-title.with-image.image-4-3 {
  margin-top: 217px;
}
.section-layout.header.above-title.with-image.image-4-3 .image-holder {
  margin-top: -175px;
}
.section-layout.header.above-title.with-image.image-1-1 {
  margin-top: 332px;
}
.section-layout.header.above-title.with-image.image-1-1 .image-holder {
  margin-top: -290px;
}
.section-layout.header.above-title.with-image.image-5-3 {
  margin-top: 148px;
}
.section-layout.header.above-title.with-image.image-5-3 .image-holder {
  margin-top: -106px;
}
.section-layout.header.above-title.with-image.image-5-2 {
  margin-top: 126px;
  /* standard 42px margin + image holder top offset */
}
.section-layout.header.above-title.with-image.image-5-2 .image-column {
  width: 66.666%;
  /* equivalent to 8 columns */
}
.section-layout.header.above-title.with-image.image-5-2 .image-holder {
  margin-top: -84px;
}
.section-layout.header.above-title.with-image.left .image-column {
  margin-left: 0;
}
.section-layout.header.above-title.with-image.left .image-holder {
  margin-left: -20px;
  margin-right: 20px;
}
.section-layout.header.above-title.with-image.centre .image-column {
  margin-left: 25%;
}
.section-layout.header.above-title.with-image.centre.image-5-2 .image-column {
  margin-left: 16.666%;
}
.section-layout.header.above-title.with-image.right .image-column {
  margin-left: 50%;
}
.section-layout.header.above-title.with-image.right .image-holder {
  margin-left: 20px;
  margin-right: -20px;
}
.section-layout.header.above-title.with-image.right.image-5-2 .image-column {
  margin-left: 33.333%;
}
.section-layout.header.below-title h2,
.section-layout.header.baseline h2 {
  margin-bottom: 34px;
}
.section-layout.header.below-title.with-image,
.section-layout.header.baseline.with-image {
  /* 5:2 aspect ratio */
  /* left position */
  /* right position */
}
.section-layout.header.below-title.with-image .below-title-holder,
.section-layout.header.below-title.with-image .baseline-holder,
.section-layout.header.baseline.with-image .below-title-holder,
.section-layout.header.baseline.with-image .baseline-holder {
  margin-left: -10px;
  margin-right: -10px;
}
.section-layout.header.below-title.with-image .image-column,
.section-layout.header.below-title.with-image .text-column,
.section-layout.header.baseline.with-image .image-column,
.section-layout.header.baseline.with-image .text-column {
  padding: 0 10px;
}
.section-layout.header.below-title.with-image .image-column,
.section-layout.header.baseline.with-image .image-column {
  margin-bottom: 28px;
  margin-top: 5px;
  width: 50%;
  /* equivalent to 6 columns */
}
.section-layout.header.below-title.with-image .text-column,
.section-layout.header.baseline.with-image .text-column {
  width: 41.666%;
  /* equivalent to 5 columns */
}
.section-layout.header.below-title.with-image.image-5-2 .image-column,
.section-layout.header.baseline.with-image.image-5-2 .image-column {
  width: 66.66%;
  /* equivalent to 8 columns */
}
.section-layout.header.below-title.with-image.image-5-2 .text-column,
.section-layout.header.baseline.with-image.image-5-2 .text-column {
  width: 25%;
  /* equivalent to 3 columns */
}
.section-layout.header.below-title.with-image.left .text-column,
.section-layout.header.baseline.with-image.left .text-column {
  display: inline-block;
}
.section-layout.header.below-title.with-image.left .image-column,
.section-layout.header.baseline.with-image.left .image-column {
  float: left;
}
.section-layout.header.below-title.with-image.left .image-column .image-holder,
.section-layout.header.baseline.with-image.left .image-column .image-holder {
  margin-left: -20px;
}
.section-layout.header.below-title.with-image.right .text-column,
.section-layout.header.baseline.with-image.right .text-column {
  margin-left: 8.333%;
  /* one column left spacing */
}
.section-layout.header.below-title.with-image.right .image-column,
.section-layout.header.baseline.with-image.right .image-column {
  float: right;
}
.section-layout.header.below-title.with-image.right .image-column .image-holder,
.section-layout.header.baseline.with-image.right .image-column .image-holder {
  margin-right: -20px;
}
.section-layout.header blockquote {
  font-family: "Rubik", sans-serif;
  font-size: 24px;
  line-height: 1.33;
  font-weight: 400;
  color: #9b9b9b;
  font-style: normal;
}

/*
  ==========================
  paragraphs
  ==========================
*/
.intro,
.intro > * {
  font-family: "Rubik", sans-serif;
  font-size: 24px;
  line-height: 1.33;
  color: #9b9b9b;
}

* + .intro {
  margin-top: 20px;
}

* + p {
  margin-top: 16px;
}

b,
strong {
  font-weight: 700;
}

/* text helper classes */
/* ------------------- */
.txt-center {
  text-align: center;
}

.txt-left {
  text-align: left;
}

.txt-right {
  text-align: right;
}

/* block quotes */
/* ------------ */
blockquote {
  font-size: 16px;
  line-height: 1.75;
  font-weight: 400;
  font-style: italic;
}
blockquote.alternative-blockquote {
  border-top: solid 4px #9b9b9b;
  /* fallback color */
  border-bottom: solid 4px #9b9b9b;
  /* fallback color */
  padding: 6px 0 8px 0;
  font-family: "Rubik", sans-serif;
  font-weight: 300;
  font-style: normal;
}
body.light-yellow blockquote.alternative-blockquote {
  border-color: #f4ebc9;
}
body.light-blue blockquote.alternative-blockquote {
  border-color: #85adc0;
}
body.light-green blockquote.alternative-blockquote {
  border-color: #adc878;
}
body.light-purple blockquote.alternative-blockquote {
  border-color: #9c89c1;
}
body.light-grey blockquote.alternative-blockquote {
  border-color: #cccccc;
}
body.dark-grey blockquote.alternative-blockquote {
  border-color: #4a4a4a;
}

.citation {
  display: block;
  margin-top: 16px;
  font-family: "Rubik", sans-serif;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 500;
}

* + blockquote {
  margin-top: 32px;
}

blockquote + * {
  margin-top: 32px;
}

/*
  ==========================
  links / buttons
  ==========================
*/
.typography-wrapper a,
.typography-wrapper button.link-style {
  display: inline;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  color: #589cdd;
  text-decoration: none;
  /* external links */
  /* -------------- */
}
.typography-wrapper a:hover,
.typography-wrapper a:focus,
.typography-wrapper button.link-style:hover,
.typography-wrapper button.link-style:focus {
  text-decoration: underline;
}
.typography-wrapper a.external-link:after,
.typography-wrapper button.link-style.external-link:after {
  display: inline-block;
  content: "\00a0\f08e";
  font-family: FontAwesome;
  text-decoration: none;
}

/* button styles */
/* ------------- */
a.button,
.button {
  position: relative;
  display: inline-block;
  min-height: 53px;
  margin: 0;
  padding: 9px 62px 8px 20px;
  border: solid 3px #9b9b9b;
  background-color: transparent;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 400;
  color: #4a4a4a;
  text-decoration: none;
  text-align: left;
  vertical-align: middle;
  -webkit-transition: background-color 0.3s, color 0.3s;
  -moz-transition: background-color 0.3s, color 0.3s;
  -ms-transition: background-color 0.3s, color 0.3s;
  -o-transition: background-color 0.3s, color 0.3s;
  transition: background-color 0.3s, color 0.3s;
}
a.button.light-yellow,
.button.light-yellow {
  border-color: #f4ebc9;
  color: #f4ebc9;
}
a.button.light-yellow:after,
.button.light-yellow:after {
  color: #f4ebc9;
}
a.button.light-yellow:active,
.button.light-yellow:active {
  background-color: #f4ebc9;
  color: #ffffff !important;
}
a.button.light-yellow:active:after,
.button.light-yellow:active:after {
  color: #ffffff;
}
a.button.light-blue,
.button.light-blue {
  border-color: #85adc0;
  color: #85adc0;
}
a.button.light-blue:after,
.button.light-blue:after {
  color: #85adc0;
}
a.button.light-blue:active,
.button.light-blue:active {
  background-color: #85adc0;
  color: #ffffff !important;
}
a.button.light-blue:active:after,
.button.light-blue:active:after {
  color: #ffffff;
}
a.button.light-green,
.button.light-green {
  border-color: #adc878;
  color: #adc878;
}
a.button.light-green:after,
.button.light-green:after {
  color: #adc878;
}
a.button.light-green:active,
.button.light-green:active {
  background-color: #adc878;
  color: #ffffff !important;
}
a.button.light-green:active:after,
.button.light-green:active:after {
  color: #ffffff;
}
a.button.light-purple,
.button.light-purple {
  border-color: #9c89c1;
  color: #9c89c1;
}
a.button.light-purple:after,
.button.light-purple:after {
  color: #9c89c1;
}
a.button.light-purple:active,
.button.light-purple:active {
  background-color: #9c89c1;
  color: #ffffff !important;
}
a.button.light-purple:active:after,
.button.light-purple:active:after {
  color: #ffffff;
}
a.button.light-grey,
.button.light-grey {
  border-color: #cccccc;
  color: #cccccc;
}
a.button.light-grey:after,
.button.light-grey:after {
  color: #cccccc;
}
a.button.light-grey:active,
.button.light-grey:active {
  background-color: #cccccc;
  color: #ffffff !important;
}
a.button.light-grey:active:after,
.button.light-grey:active:after {
  color: #ffffff;
}
a.button.red,
.button.red {
  border-color: #e8665c;
  color: #e8665c;
}
a.button.red:after,
.button.red:after {
  color: #e8665c;
}
a.button.red:active,
.button.red:active {
  background-color: #e8665c;
  color: #ffffff !important;
}
a.button.red:active:after,
.button.red:active:after {
  color: #ffffff;
}
a.button.black,
.button.black {
  border-color: #222222;
  color: #222222;
}
a.button.black:after,
.button.black:after {
  color: #222222;
}
a.button.black:active,
.button.black:active {
  background-color: #222222;
  color: #ffffff !important;
}
a.button.black:active:after,
.button.black:active:after {
  color: #ffffff;
}
a.button.purple,
.button.purple {
  border-color: #644b82;
  color: #644b82;
}
a.button.purple:after,
.button.purple:after {
  color: #644b82;
}
a.button.purple:active,
.button.purple:active {
  background-color: #644b82;
  color: #ffffff !important;
}
a.button.purple:active:after,
.button.purple:active:after {
  color: #ffffff;
}
a.button.blue,
.button.blue {
  border-color: #589cdd;
  color: #589cdd;
}
a.button.blue:after,
.button.blue:after {
  color: #589cdd;
}
a.button.blue:active,
.button.blue:active {
  background-color: #589cdd;
  color: #ffffff !important;
}
a.button.blue:active:after,
.button.blue:active:after {
  color: #ffffff;
}
a.button.green,
.button.green {
  border-color: #788e0f;
  color: #788e0f;
}
a.button.green:after,
.button.green:after {
  color: #788e0f;
}
a.button.green:active,
.button.green:active {
  background-color: #788e0f;
  color: #ffffff !important;
}
a.button.green:active:after,
.button.green:active:after {
  color: #ffffff;
}
a.button.yellow,
.button.yellow {
  border-color: #f0d250;
  color: #f0d250;
}
a.button.yellow:after,
.button.yellow:after {
  color: #f0d250;
}
a.button.yellow:active,
.button.yellow:active {
  background-color: #f0d250;
  color: #ffffff !important;
}
a.button.yellow:active:after,
.button.yellow:active:after {
  color: #ffffff;
}
a.button.dark-grey,
.button.dark-grey {
  border-color: #4a4a4a;
  color: #4a4a4a;
}
a.button.dark-grey:after,
.button.dark-grey:after {
  color: #4a4a4a;
}
a.button.dark-grey:active,
.button.dark-grey:active {
  background-color: #4a4a4a;
  color: #ffffff !important;
}
a.button.dark-grey:active:after,
.button.dark-grey:active:after {
  color: #ffffff;
}
a.button:before,
.button:before {
  content: "";
  display: inline-block;
  margin: 0;
  padding: 0;
  min-height: 30px;
  height: 100%;
  width: 0;
  overflow: hidden;
  vertical-align: middle;
}
a.button > span,
.button > span {
  display: inline-block;
  vertical-align: middle;
}
a.button:after,
.button:after {
  content: "\0041";
  position: absolute;
  top: 50%;
  right: 16px;
  display: block;
  margin-top: -16px;
  font-family: "NZ Church icons";
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  color: #9b9b9b;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
  -webkit-transition: -webkit-transform 0.2s, color 0.3s;
  -moz-transition: -moz-transform 0.2s, color 0.3s;
  -ms-transition: -ms-transform 0.2s, color 0.3s;
  -o-transition: -o-transform 0.2s, color 0.3s;
  transition: transform 0.2s, color 0.3s;
}
a.button:hover,
a.button:focus,
.button:hover,
.button:focus {
  text-decoration: none;
  outline: none;
}
a.button:hover:after,
a.button:focus:after,
.button:hover:after,
.button:focus:after {
  -webkit-animation: arrow-bounce 0.5s ease 0s infinite;
  -moz-animation: arrow-bounce 0.5s ease 0s infinite;
  -o-animation: arrow-bounce 0.5s ease 0s infinite;
  animation: arrow-bounce 0.5s ease 0s infinite;
}

@-webkit-keyframes arrow-bounce {
  0%,
  100% {
    -webkit-transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(16px);
  }
}

@-moz-keyframes arrow-bounce {
  0%,
  100% {
    -moz-transform: translateX(0px);
  }
  50% {
    -moz-transform: translateX(16px);
  }
}

@-o-keyframes arrow-bounce {
  0%,
  100% {
    -o-transform: translateX(0px);
  }
  50% {
    -o-transform: translateX(16px);
  }
}

@keyframes arrow-bounce {
  0%,
  100% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(16px);
  }
}

a.button {
  text-decoration: none;
}
a.button:hover,
a.button:focus {
  text-decoration: none;
}

/* links with double right angle brackets */
/* -------------------------------------- */
a.brackets:after,
.button.brackets:after {
  display: inline-block;
  font-family: FontAwesome;
  line-height: 0.8;
  content: "\00a0\00a0\f101";
}

/* anchor links that are visually hidden - fix for Chrome 55+ on Windows */
/* --------------------------------------------------------------------- */
a[id].visuallyhidden:empty {
  width: 0.1px;
  height: 0.1px;
}

/*
  ==========================
  images
  ==========================
*/
figure {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  /* small images */
  /* ------------ */
  /* images as links */
  /* --------------- */
}
figure img {
  display: block;
  width: 100%;
  height:auto;
  margin: 0;
  padding: 0;
}
figure figcaption {
  display: block;
  width: auto;
  margin: 0;
  padding: 12px 0;
  border-bottom: solid 2px #9b9b9b;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
}
figure.small {
  float: left;
  clear: both;
  width: calc(33.33% + 10px);
  padding-right: 30px;
  margin-bottom: 12px;
}
figure a,
figure a.external-link {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  text-decoration: none;
}
figure a:after,
figure a.external-link:after {
  content: "\f00e" !important;
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  padding: 6px;
  background-color: rgba(0, 0, 0, 0.5);
  font-family: FontAwesome;
  font-size: 21px;
  line-height: 1;
  color: #ffffff;
}
figure a:hover,
figure a:focus,
figure a.external-link:hover,
figure a.external-link:focus {
  text-decoration: none;
}
figure a:focus,
figure a.external-link:focus {
  outline-width: 2px;
}

.typography-wrapper * + figure,
.typography-wrapper * + .two-column-figure,
.typography-wrapper * + .three-column-figure {
  margin-top: 24px;
}



.typography-wrapper img.center {display:block;margin-left:auto;margin-right:auto;}
.typography-wrapper .captionImage.center {
  display:block;
  text-align:center;
  margin:20px auto;
}

.typography-wrapper img.rightAlone {display:block;margin-left:auto}
.typography-wrapper .captionImage.rightAlone {
  display:block;
  text-align:right;
  margin:20px 0 20px auto;
}







/*
  ==========================
  lists
  ==========================
*/
.typography-wrapper ol,
.typography-wrapper ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.typography-wrapper ol * + li,
.typography-wrapper ul * + li {
  margin-top: 6px;
}
.typography-wrapper ol ol,
.typography-wrapper ol ul,
.typography-wrapper ul ol,
.typography-wrapper ul ul {
  margin-top: 6px;
}

.typography-wrapper ol {
  padding-left: 30px;
  list-style-type: decimal;
}
.typography-wrapper ol ol {
  list-style-type: lower-alpha;
}
.typography-wrapper ol ol ol {
  list-style-type: lower-roman;
}

.typography-wrapper ul {
  padding-left: 30px;
  list-style-type: disc;
}

.typography-wrapper * + ol,
.typography-wrapper * + ul {
  margin-top: 16px;
}

/*
  ==========================
  tables
  ==========================
*/
.typography-wrapper * + table,
.typography-wrapper * + .table-wrapper {
  margin-top: 16px;
}

.table-wrapper {
  width: auto;
}

/*
  ==========================
  misc styles
  ==========================
*/
/* horizontal rule */
/* --------------- */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 2px solid #9b9b9b;
  margin: 26px 0;
  padding: 0;
}
hr + h2,
hr + h3,
hr + h4,
hr + h5 {
  margin-top: 26px !important;
}

/* video player */
/* ------------ */
* + .media {
  margin-top: 26px;
}

/* address */
/* ------- */
address {
  font-style: normal;
}

/* custom text-selection colors */
/* ---------------------------- */
::-moz-selection {
  background: #9b9b9b;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #9b9b9b;
  color: #fff;
  text-shadow: none;
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
@media screen and (max-width: 860px) {
  /*
    ==========================
    headings
    ==========================
  */
  /* column spacing when collapsed */
  [class*="column-"] + [class*="column-"] > h2:first-child,
  [class*="column-"] + [class*="column-"] > h3:first-child,
  [class*="column-"] + [class*="column-"] > h4:first-child,
  [class*="column-"] + [class*="column-"] > h5:first-child,
  [class*="column-"] + [class*="column-"] > h6:first-child {
    margin-top: 40px;
  }
  /*
  ==========================
  section layouts
  ==========================
*/
  .section-layout {
    /*
      ==========================
      heading section layouts
      ==========================
    */
  }
  .section-layout.header {
    /* image position options */
    /* ---------------------- */
    /* below title and baseline */
  }
  .section-layout.header.below-title.with-image,
  .section-layout.header.baseline.with-image {
    /* 5:2 aspect ratio */
    /* right position */
  }
  .section-layout.header.below-title.with-image .text-column,
  .section-layout.header.baseline.with-image .text-column {
    width: 50%;
    /* equivalent to 6 columns */
  }
  .section-layout.header.below-title.with-image.image-5-2 .text-column,
  .section-layout.header.baseline.with-image.image-5-2 .text-column {
    width: 33.333%;
    /* equivalent to 4 columns */
  }
  .section-layout.header.below-title.with-image.right .text-column,
  .section-layout.header.baseline.with-image.right .text-column {
    margin-left: 0;
  }
}

/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  /*
    ==========================
    general
    ==========================
  */
  body,
  input,
  select,
  textarea {
    font-size: 14px;
    line-height: 1.57;
  }
  /*
    ==========================
    headings
    ==========================
  */
  /* content header - page title area */
  /* -------------------------------- */
  header.content-header:after {
    content: none;
    display: none;
  }
  header.content-header .content-holder {
    min-height: 110px !important;
    padding-top: 68px !important;
    padding-bottom: 26px !important;
  }
  header.content-header .content-holder:before {
    content: none;
    display: none;
  }
  /* main page title */
  /* --------------- */
  h1,
  .h1 {
    font-size: 24px;
  }
  /* heading */
  /* ------- */
  h2,
  .h2 {
    font-size: 20px;
  }
  /* sub-heading */
  /* ----------- */
  h3,
  .h3 {
    font-size: 16px;
  }
  /* minor heading */
  /* ------------- */
  h4,
  .h4 {
    font-size: 15px;
  }
  /* sub-minor heading */
  /* ----------------- */
  h5,
  .h5 {
    font-size: 14px;
  }
  /*
    ==========================
    section layouts
    ==========================
  */
  .section-layout {
    /*
      ==========================
      heading section layouts
      ==========================
    */
  }
  .section-layout.parent-page-content {
    position: relative;
    z-index: 1;
  }
  .section-layout.parent-page-content:after {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: -42px;
    right: 0;
    display: block;
    width: 44px;
    height: 234px;
    margin-top: 80px;
    background: url(../../../themes/catholic/images/pattern-holy-trinity-vertical@2x.png)
      top right no-repeat transparent;
    background-size: contain;
  }
  body.liturgy .section-layout.parent-page-content:after {
    width: 44px;
    height: 201px;
    background: url(../../../themes/catholic/images/pattern-stairway-vertical@2x.png)
      top right no-repeat transparent;
    background-size: contain;
  }
  .section-layout.header {
    /* heading spacing */
    /* --------------- */
    /* image position options */
    /* ---------------------- */
    /* above title */
    /* below title and baseline */
    /* baseline */
    /* typography inside header section */
  }
  .section-layout.header > .wrapper {
    padding-top: 22px;
    padding-bottom: 22px;
  }
  .section-layout.header h2 {
    /* header spacing */
    /* -------------- */
  }
  .section-layout.header h2 + * {
    margin-top: 20px !important;
  }
  .section-layout.header.above-title.with-image {
    /* all image ratios */
  }
  .section-layout.header.above-title.with-image .above-title-holder {
    margin-left: -20px;
    margin-right: -20px;
  }
  .section-layout.header.above-title.with-image .image-column,
  .section-layout.header.above-title.with-image .text-column {
    padding: 0;
  }
  .section-layout.header.above-title.with-image .image-column {
    width: auto;
    margin: 0 !important;
  }
  .section-layout.header.above-title.with-image .image-holder {
    margin: 0 0 20px 0 !important;
  }
  .section-layout.header.above-title.with-image.image-4-3,
  .section-layout.header.above-title.with-image.image-1-1,
  .section-layout.header.above-title.with-image.image-5-3,
  .section-layout.header.above-title.with-image.image-5-2 {
    margin-top: 24px;
  }
  .section-layout.header.above-title.with-image.image-4-3 .image-column,
  .section-layout.header.above-title.with-image.image-1-1 .image-column,
  .section-layout.header.above-title.with-image.image-5-3 .image-column,
  .section-layout.header.above-title.with-image.image-5-2 .image-column {
    width: 100%;
    margin: 0;
  }
  .section-layout.header.above-title.with-image.image-4-3 .image-holder,
  .section-layout.header.above-title.with-image.image-1-1 .image-holder,
  .section-layout.header.above-title.with-image.image-5-3 .image-holder,
  .section-layout.header.above-title.with-image.image-5-2 .image-holder {
    margin-top: 0;
  }
  .section-layout.header.below-title h2,
  .section-layout.header.baseline h2 {
    margin-bottom: 22px;
  }
  .section-layout.header.below-title.with-image,
  .section-layout.header.baseline.with-image {
    /* 5:2 aspect ratio */
    /* left position */
    /* right position */
  }
  .section-layout.header.below-title.with-image .below-title-holder,
  .section-layout.header.below-title.with-image .baseline-holder,
  .section-layout.header.baseline.with-image .below-title-holder,
  .section-layout.header.baseline.with-image .baseline-holder {
    margin-left: 0;
    margin-right: 0;
  }
  .section-layout.header.below-title.with-image .image-column,
  .section-layout.header.below-title.with-image .text-column,
  .section-layout.header.baseline.with-image .image-column,
  .section-layout.header.baseline.with-image .text-column {
    padding: 0;
  }
  .section-layout.header.below-title.with-image .image-column,
  .section-layout.header.baseline.with-image .image-column {
    margin-bottom: 20px;
    margin-top: 0;
    width: auto;
  }
  .section-layout.header.below-title.with-image .image-holder,
  .section-layout.header.baseline.with-image .image-holder {
    margin: 0 -20px !important;
  }
  .section-layout.header.below-title.with-image .text-column,
  .section-layout.header.baseline.with-image .text-column {
    width: auto;
  }
  .section-layout.header.below-title.with-image.image-5-2 .image-column,
  .section-layout.header.below-title.with-image.image-5-2 .text-column,
  .section-layout.header.baseline.with-image.image-5-2 .image-column,
  .section-layout.header.baseline.with-image.image-5-2 .text-column {
    width: auto;
  }
  .section-layout.header.below-title.with-image.left .text-column,
  .section-layout.header.baseline.with-image.left .text-column {
    display: block;
  }
  .section-layout.header.below-title.with-image.left .image-column,
  .section-layout.header.baseline.with-image.left .image-column {
    float: none;
  }
  .section-layout.header.below-title.with-image.right .text-column,
  .section-layout.header.baseline.with-image.right .text-column {
    margin-left: 0;
  }
  .section-layout.header.below-title.with-image.right .image-column,
  .section-layout.header.baseline.with-image.right .image-column {
    float: none;
  }
  .section-layout.header.baseline.with-image .wrapper {
    padding-top: 0;
  }
  .section-layout.header blockquote {
    font-size: 15px;
    line-height: 1.6;
  }
  /*
    ==========================
    paragraphs
    ==========================
  */
  .intro,
  .intro > * {
    font-size: 15px;
    line-height: 1.6;
  }
  /* block quotes */
  /* ------------ */
  blockquote {
    font-size: 14px;
    line-height: 1.57;
  }
  .citation {
    font-size: 10px;
  }
  /*
    ==========================
    images
    ==========================
  */
  figure {
    /* small images */
    /* ------------ */
  }
  figure.small {
    float: none;
    width: auto;
    padding-right: 0;
    margin-bottom: 0;
  }
  /*
    ==========================
    tables
    ==========================
  */
  .table-wrapper {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
.lt-ie-9 header.content-header:after {
  background-image: url(../../../themes/catholic/images/pattern-holy-trinity-vertical.png);
}

body.liturgy .lt-ie-9 header.content-header:after {
  background-image: url(../../../themes/catholic/images/pattern-stairway-vertical.png);
}

/*
  ===============================================================================
  COMMON PAGE ELEMENTS
  ===============================================================================
*/
/*
  ==========================
  general
  ==========================
*/
html,
body {
  height: 100%;
}

body {
  min-width: 320px;
  background-color: #ffffff;
}

/* sticky footer */
/* ------------- */
#page-wrapper {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#page-wrapper-inner,
#page-foot {
  display: table-row;
  height: 1px;
  width: 100%;
}

#page-wrapper-inner {
  height: auto;
}

/* page boundary */
/* ------------- */
.wrapper {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 980px !important;
}

/* accessibility links on focus */
/* ---------------------------- */
#accessibility-links {
  position: absolute;
  z-index: -1;
  top: 0;
  left: -99999em;
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 14px;
}
#accessibility-links a {
  text-decoration: none;
}
#accessibility-links a:hover,
#accessibility-links a:focus {
  text-decoration: underline;
  outline: none;
}
#accessibility-links.active {
  position: fixed;
  left: 0;
  z-index: 1000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 30px;
  background-color: #ffffff;
  opacity: 1;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
  clip: auto;
}

/*
  ==========================
  tabular layouts
  ==========================
*/
.table-layout {
  margin-left: -10px;
  margin-right: -10px;
}
.table-layout > .inner {
  display: table;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
}
.table-layout > .inner > .table-column {
  display: table-cell;
  vertical-align: top;
  padding-left: 10px;
  padding-right: 10px;
}
.table-layout.not-fixed > .inner {
  table-layout: auto;
}

/*
  ==========================
  back to top
  ==========================
*/
a.back-to-top:before {
  content: "";
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 38px;
  height: 22px;
  background: url(../../../themes/catholic/images/back-to-top-arrow@2x.png)
    center no-repeat transparent;
  background-size: contain;
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
@media screen and (max-width: 860px) {
  #page-wrapper {
    overflow: auto;
  }
  a.back-to-top {
    float: right;
  }
}

/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  /*
    ==========================
    tabular layouts
    ==========================
  */
  .table-layout {
    margin-left: 0;
    margin-right: 0;
  }
  .table-layout > .inner {
    display: block;
    width: auto;
  }
  .table-layout > .inner > .table-column {
    display: block;
    padding-left: 0;
    padding-right: 0;
  }
  .table-layout > .inner > .table-column + .table-column {
    margin-top: 24px;
  }
}

/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
.lt-ie-9 a.back-to-top:before {
  background-image: url(../../../themes/catholic/images/back-to-top-arrow.png);
}

/*
  ===============================================================================
  COLUMN LAYOUT STYLES
  ===============================================================================
*/
/*
  ==========================
  layout
  ==========================
*/
.column-wrapper {
  clear: left;
  /* clear floats */
  /* ------------ */
  /* spacing and widths */
  /* ------------------ */
}
.column-wrapper:before,
.column-wrapper:after {
  content: "";
  display: table;
}
.column-wrapper:after {
  clear: both;
}
.column-wrapper > .inner {
  margin-left: -10px;
  margin-right: -10px;
}
.column-wrapper > .inner > [class*="column-"] {
  float: left;
  padding: 0 10px;
  min-height: 0.1px;
}
.column-wrapper > .inner > [class*="column-"].column-1 {
  width: 8.333%;
}
.column-wrapper > .inner > [class*="column-"].column-2 {
  width: 16.666%;
}
.column-wrapper > .inner > [class*="column-"].column-3 {
  width: 25%;
}
.column-wrapper > .inner > [class*="column-"].column-4 {
  width: 33.333%;
}
.column-wrapper > .inner > [class*="column-"].column-5 {
  width: 41.666%;
}
.column-wrapper > .inner > [class*="column-"].column-6 {
  width: 50%;
}
.column-wrapper > .inner > [class*="column-"].column-7 {
  width: 58.333%;
}
.column-wrapper > .inner > [class*="column-"].column-8 {
  width: 66.666%;
}
.column-wrapper > .inner > [class*="column-"].column-9 {
  width: 75%;
}
.column-wrapper > .inner > [class*="column-"].column-10 {
  width: 83.333%;
}
.column-wrapper > .inner > [class*="column-"].column-11 {
  width: 91.666%;
}
.column-wrapper > .inner > [class*="column-"].column-12 {
  width: 100%;
}
.column-wrapper > .inner > [class*="column-"].left-1 {
  margin-left: 8.333%;
}
.column-wrapper > .inner > [class*="column-"].left-2 {
  margin-left: 16.666%;
}
.column-wrapper > .inner > [class*="column-"].left-3 {
  margin-left: 25%;
}
.column-wrapper > .inner > [class*="column-"].left-4 {
  margin-left: 33.333%;
}
.column-wrapper > .inner > [class*="column-"].left-5 {
  margin-left: 41.666%;
}
.column-wrapper > .inner > [class*="column-"].left-6 {
  margin-left: 50%;
}
.column-wrapper > .inner > [class*="column-"].left-7 {
  margin-left: 58.333%;
}
.column-wrapper > .inner > [class*="column-"].left-8 {
  margin-left: 66.666%;
}
.column-wrapper > .inner > [class*="column-"].left-9 {
  margin-left: 75%;
}
.column-wrapper > .inner > [class*="column-"].left-10 {
  margin-left: 83.333%;
}
.column-wrapper > .inner > [class*="column-"].left-11 {
  margin-left: 91.666%;
}
.column-wrapper > .inner > [class*="column-"].left-12 {
  margin-left: 100%;
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
@media screen and (max-width: 860px) {
  /*
    ==========================
    layout
    ==========================
  */
  .column-wrapper > .inner {
    margin-left: 0;
    margin-right: 0;
  }
  .column-wrapper > .inner > [class*="column-"] {
    float: none;
    padding: 0;
    min-height: 0;
  }
  .column-wrapper > .inner > [class*="column-"].column-1 {
    width: auto;
  }
  .column-wrapper > .inner > [class*="column-"].column-2 {
    width: auto;
  }
  .column-wrapper > .inner > [class*="column-"].column-3 {
    width: auto;
  }
  .column-wrapper > .inner > [class*="column-"].column-4 {
    width: auto;
  }
  .column-wrapper > .inner > [class*="column-"].column-5 {
    width: auto;
  }
  .column-wrapper > .inner > [class*="column-"].column-6 {
    width: auto;
  }
  .column-wrapper > .inner > [class*="column-"].column-7 {
    width: auto;
  }
  .column-wrapper > .inner > [class*="column-"].column-8 {
    width: auto;
  }
  .column-wrapper > .inner > [class*="column-"].column-9 {
    width: auto;
  }
  .column-wrapper > .inner > [class*="column-"].column-10 {
    width: auto;
  }
  .column-wrapper > .inner > [class*="column-"].column-11 {
    width: auto;
  }
  .column-wrapper > .inner > [class*="column-"].column-12 {
    width: auto;
  }
  .column-wrapper > .inner > [class*="column-"].left-1 {
    margin-left: 0;
  }
  .column-wrapper > .inner > [class*="column-"].left-2 {
    margin-left: 0;
  }
  .column-wrapper > .inner > [class*="column-"].left-3 {
    margin-left: 0;
  }
  .column-wrapper > .inner > [class*="column-"].left-4 {
    margin-left: 0;
  }
  .column-wrapper > .inner > [class*="column-"].left-5 {
    margin-left: 0;
  }
  .column-wrapper > .inner > [class*="column-"].left-6 {
    margin-left: 0;
  }
  .column-wrapper > .inner > [class*="column-"].left-7 {
    margin-left: 0;
  }
  .column-wrapper > .inner > [class*="column-"].left-8 {
    margin-left: 0;
  }
  .column-wrapper > .inner > [class*="column-"].left-9 {
    margin-left: 0;
  }
  .column-wrapper > .inner > [class*="column-"].left-10 {
    margin-left: 0;
  }
  .column-wrapper > .inner > [class*="column-"].left-11 {
    margin-left: 0;
  }
  .column-wrapper > .inner > [class*="column-"].left-12 {
    margin-left: 0;
  }
  .column-wrapper > .inner > [class*="column-"] + [class*="column-"] {
    margin-top: 16px;
  }
}

/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
/*
  ===============================================================================
  HEADER LAYOUT
  ===============================================================================
*/
#page-head {
  /*
    ==========================
    upper head
    ==========================
  */
  /*
    ==========================
    lower head
    ==========================
  */
}
#page-head > .upper {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  line-height: 1.3;
  color: #4a4a4a;
  padding: 14px 0 7px 0;
}
#page-head > .upper > .wrapper > .inner {
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 0;
  border-collapse: collapse;
}
#page-head > .upper > .wrapper > .inner > * {
  display: table-cell;
  vertical-align: middle;
}
#page-head > .upper > .wrapper > .inner > *:first-child {
  text-align: right;
}
#page-head > .upper > .wrapper > .inner > *.cross-icon {
  width: 51px;
  text-align: center;
}
#page-head > .upper > .wrapper > .inner > *.cross-icon > span {
  display: inline-block;
  width: 21px;
  height: 32px;
  background: url(../../../themes/catholic/images/icon-church-cross-desktop@2x.png)
    top center no-repeat transparent;
  background-size: cover;
}
body.liturgy #page-head > .upper {
  color: #ffffff;
  background-color: #21284d;
}
body.liturgy #page-head > .upper > .wrapper > .inner > *.cross-icon > span {
  background: url(../../../themes/catholic/images/icon-church-cross-liturgy@2x.png)
    top center no-repeat transparent;
  background-size: cover;
}
#page-head > .lower {
  position: relative;
  z-index: 10;
}
#page-head > .lower > .inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.7);
}

/*
  ==========================
  mobile menu options
  ==========================
*/
#mobile-menu-options {
  display: none;
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
@media screen and (max-width: 860px) {
  #page-head {
    /*
      ==========================
      lower head
      ==========================
    */
  }
  #page-head > .lower {
    position: relative;
  }
  #page-head > .lower > .inner {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.4);
    text-align: right;
  }
  /*
    ==========================
    mobile menu options
    ==========================
  */
  #mobile-menu-options {
    display: block;
    /* search menu link */
    /* ---------------- */
    /* hamburger menu button */
    /* --------------------- */
  }
  #mobile-menu-options > * {
    display: inline-block;
    height: 60px;
    vertical-align: middle;
  }
  #mobile-menu-options > *:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-size: 1px;
    vertical-align: middle;
  }
  #mobile-menu-options > * + * {
    margin-left: 30px;
  }
  #mobile-menu-options #mobile-search-link a {
    display: inline-block;
  }
  #mobile-menu-options #mobile-search-link a:before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    background: url(../../../themes/catholic/images/icon-loupe-desktop@2x.png) 0
      0 no-repeat;
    background-size: contain;
  }
  body.liturgy #mobile-menu-options #mobile-search-link a:before {
    background: url(../../../themes/catholic/images/icon-loupe-liturgy@2x.png) 0
      0 no-repeat;
    background-size: contain;
  }
  #mobile-menu-options #primary-nav-toggle button {
    display: inline-block;
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 0;
    height: 18px;
    vertical-align: middle;
  }
  #mobile-menu-options #primary-nav-toggle button .line {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    background-color: #4a4a4a;
  }
  #mobile-menu-options #primary-nav-toggle button .line:before,
  #mobile-menu-options #primary-nav-toggle button .line:after {
    position: absolute;
    left: 0;
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background-color: #4a4a4a;
  }
  #mobile-menu-options #primary-nav-toggle button .line:before {
    top: -7px;
  }
  #mobile-menu-options #primary-nav-toggle button .line:after {
    bottom: -7px;
  }
  body.liturgy #mobile-menu-options #primary-nav-toggle button .line {
    background-color: #21284d;
  }
  body.liturgy #mobile-menu-options #primary-nav-toggle button .line:before,
  body.liturgy #mobile-menu-options #primary-nav-toggle button .line:after {
    background-color: #21284d;
  }
}

/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  #page-head {
    /*
      ==========================
      upper head
      ==========================
    */
  }
  #page-head > .upper {
    font-size: 12px;
    line-height: 1.2;
  }
  #page-head > .upper > .wrapper > .inner {
    position: relative;
    display: block;
    width: auto;
    min-height: 36px;
    margin: 0;
    padding: 7px 0 7px 19px;
  }
  #page-head > .upper > .wrapper > .inner > * {
    display: block;
    vertical-align: top;
  }
  #page-head > .upper > .wrapper > .inner > *:first-child {
    text-align: left;
  }
  #page-head > .upper > .wrapper > .inner > *.cross-icon {
    position: absolute;
    top: 8px;
    left: -1px;
    width: 14px;
    text-align: center;
  }
  #page-head > .upper > .wrapper > .inner > *.cross-icon > span {
    width: 14px;
    height: 22px;
  }
  /*
    ==========================
    mobile menu options
    ==========================
  */
  #mobile-menu-options > * {
    height: 42px;
  }
  #mobile-menu-options > * + * {
    margin-left: 20px;
  }
}

/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
.lt-ie-9 {
  /*
    ==========================
    upper head
    ==========================
  */
  /*
    ==========================
    lower head
    ==========================
  */
}
.lt-ie-9 #page-head > .upper > .wrapper > .inner > *.cross-icon > span {
  background-image: url(../../../themes/catholic/images/icon-church-cross-desktop.png);
}
body.liturgy
  .lt-ie-9
  #page-head
  > .upper
  > .wrapper
  > .inner
  > *.cross-icon
  > span {
  background-image: url(../../../themes/catholic/images/icon-church-cross-liturgy.png);
}
.lt-ie-9 #page-head > .lower {
  background-color: #ffffff;
}

/*
  ===============================================================================
  MAIN PAGE AREA LAYOUT
  ===============================================================================
*/
#main-page-area {
  padding-bottom: 66px;
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
@media screen and (max-width: 860px) {
  #main-page-area {
    padding-bottom: 40px;
  }
}

/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  #main-page-area {
    padding-bottom: 30px;
  }
}

/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
/*
  ===============================================================================
  FOOTER LAYOUT
  ===============================================================================
*/
/*
  ==========================
  page foot base layout
  ==========================
*/
body.liturgy #page-foot {
  background-color: #21284d;
}
body.liturgy #page-foot > .inner:after {
  width: 491px;
  height: 108px;
  background: url(../../../themes/catholic/images/pattern-stairway@2x.png)
    bottom left no-repeat transparent;
  background-size: contain;
}

#page-foot {
  position: relative;
  z-index: 2;
  background-color: #4a4a4a;
  font-family: "Rubik", sans-serif;
  font-size: 12px;
  line-height: 1.25;
  color: #ffffff;
  /* upper layout */
  /* ------------ */
  /* mid layout */
  /* ---------- */
  /* lower layout */
  /* ------------ */
}
#page-foot > .inner {
  position: relative;
  z-index: 1;
  padding: 58px 0 25px 0;
}
#page-foot > .inner:after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: 0;
  display: block;
  width: 471px;
  height: 133px;
  background: url(../../../themes/catholic/images/pattern-holy-trinity@2x.png)
    bottom left no-repeat transparent;
  background-size: contain;
}
#page-foot > .inner > .wrapper {
  position: relative;
  z-index: 1;
}
#page-foot .upper-layout {
  margin-left: -10px;
  margin-right: -10px;
}
#page-foot .upper-layout a {
  color: #ffffff;
  text-decoration: none;
}
#page-foot .upper-layout a:hover,
#page-foot .upper-layout a:focus {
  text-decoration: underline;
}
#page-foot .upper-layout > .inner {
  display: table;
  width: 100%;
  margin: 0;
  padding: 0;
  border-collapse: collapse;
}
#page-foot .upper-layout > .inner > * {
  display: table-cell;
  padding: 0 10px;
  vertical-align: top;
  /* contact info */
  /* ------------ */
  /* footer nav */
  /* ---------- */
  /* footer social links */
  /* ------------------- */
}
#page-foot .upper-layout > .inner > *.contact-info {
  width: 40%;
}
#page-foot .upper-layout > .inner > *.contact-info .icon:before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 4px;
  background-position: left center;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: contain;
  vertical-align: text-bottom;
}
#page-foot .upper-layout > .inner > *.contact-info .icon.telephone:before {
  background-image: url(../../../themes/catholic/images/icon-phone-footer@2x.png);
}
#page-foot .upper-layout > .inner > *.contact-info .icon.email:before {
  background-image: url(../../../themes/catholic/images/icone-email-footer@2x.png);
}
#page-foot .upper-layout > .inner > *.footer-nav {
  width: 40%;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
#page-foot .upper-layout > .inner > *.footer-nav ul {
  list-style-type: none;
  margin: 0 0 -15px 0;
  padding: 0;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -ms-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  -ms-column-gap: 20px;
  column-gap: 20px;
}
#page-foot .upper-layout > .inner > *.footer-nav ul li {
  padding-bottom: 15px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
#page-foot .upper-layout > .inner > *.footer-social {
  width: 20%;
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}
#page-foot .upper-layout > .inner > *.footer-social a {
  display: inline-block;
}
#page-foot .upper-layout > .inner > *.footer-social a .outline {
  stroke: #f4ebc9;
  fill: transparent;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#page-foot .upper-layout > .inner > *.footer-social a .inner-line {
  stroke: #f4ebc9;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#page-foot .upper-layout > .inner > *.footer-social a:hover .outline,
#page-foot .upper-layout > .inner > *.footer-social a:focus .outline {
  fill: #f4ebc9;
}
#page-foot .upper-layout > .inner > *.footer-social a:hover .inner-line,
#page-foot .upper-layout > .inner > *.footer-social a:focus .inner-line {
  stroke: #4a4a4a;
}
#page-foot .upper-layout > .inner > *.footer-social a + a {
  margin-left: 20px;
}
#page-foot .mid-layout {
  margin-top: 36px;
}
#page-foot .mid-layout a.button {
  position: static;
  display: inline-block;
  margin: 0;
  padding: 13px 18px 12px 18px;
  min-height: 0;
  border: solid 3px #f4ebc9;
  background-color: transparent;
  color: #f4ebc9 !important;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  text-align: center;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  -webkit-transition: background 0.3s, color 0.3s;
  -moz-transition: background 0.3s, color 0.3s;
  -ms-transition: background 0.3s, color 0.3s;
  -o-transition: background 0.3s, color 0.3s;
  transition: background 0.3s, color 0.3s;
}
#page-foot .mid-layout a.button:before,
#page-foot .mid-layout a.button:after {
  content: none !important;
  display: none !important;
}
#page-foot .mid-layout a.button:hover,
#page-foot .mid-layout a.button:focus {
  background-color: #f4ebc9;
  color: #4a4a4a !important;
}
#page-foot .lower-layout {
  margin-top: 45px;
  color: #bbaf95;
}
#page-foot .lower-layout a {
  color: #bbaf95;
  text-decoration: none;
}
#page-foot .lower-layout a:hover,
#page-foot .lower-layout a:focus {
  text-decoration: underline;
}


#page-foot .lower-layout .footer-direct-links {
  margin-bottom:2rem;
}

#page-foot .lower-layout .footer-direct-links h5 {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: 1.2px;
  color: #a3a3a3;
  margin-bottom:6px;

}
#page-foot .lower-layout .footer-direct-links a {
  font-size: 12px;
  font-weight: 400;  
  line-height: 1.67;
  letter-spacing: normal;
  color: #a3a3a3;
}
#page-foot .lower-layout .footer-direct-links span {
  display:inline-block;
  padding:0 .5rem;
}
@media screen and (max-width: 580px) {
  
  /* #page-foot .lower-layout .footer-direct-links .dbreak {
    display:none
  } */

}


/*
    ===============================================================================
    TABLET
    ===============================================================================
  */
/*
    ===============================================================================
    SMART PHONE
    ===============================================================================
  */
@media screen and (max-width: 580px) {
  /*
      ==========================
      page foot base layout
      ==========================
    */
  #page-foot {
    font-size: 11px;
    /* upper layout */
    /* ------------ */
    /* mid layout */
    /* ---------- */
    /* lower layout */
    /* ------------ */
  }
  #page-foot > .inner {
    padding: 28px 0 44px 0;
    overflow: hidden;
  }
  #page-foot > .inner:after {
    width: 166px;
    height: 53px;
    background-image: url(../../../themes/catholic/images/pattern-holy-trinity-mobile@2x.png);
    background-size: cover;
  }
  body.liturgy #page-foot > .inner:after {
    width: 166px;
    height: 35px;
    background-image: url(../../../themes/catholic/images/pattern-stairway-mobile@2x.png);
    background-size: cover;
  }
  #page-foot .upper-layout {
    margin-left: 0;
    margin-right: 0;
  }
  #page-foot .upper-layout > .inner {
    display: block;
    width: auto;
  }
  #page-foot .upper-layout > .inner > * {
    display: block;
    padding: 0;
    /* contact info */
    /* ------------ */
    /* footer nav */
    /* ---------- */
    /* footer social links */
    /* ------------------- */
  }
  #page-foot .upper-layout > .inner > *.contact-info {
    width: auto;
  }
  #page-foot .upper-layout > .inner > *.footer-nav {
    display: none;
  }
  #page-foot .upper-layout > .inner > *.footer-social {
    width: auto;
    margin-top: 30px;
    text-align: left;
    vertical-align: top;
  }
  #page-foot .mid-layout {
    display: none;
  }
  #page-foot .lower-layout {
    margin-top: 20px;
  }
}

/*
    ===============================================================================
    INTERNET EXPLORER HACKS / FIXES
    ===============================================================================
  */
.lt-ie-9 #page-foot > .inner:after {
  background-image: url(../../../themes/catholic/images/pattern-holy-trinity.png);
}

body.liturgy .lt-ie-9 #page-foot > .inner:after {
  background-image: url(../../../themes/catholic/images/pattern-stairway.png);
}

/*
  ===============================================================================
  PRIMARY NAVIGATION
  ===============================================================================
*/
#primary-nav {
  position: relative;
  z-index: 10;
  margin-left: -10px;
  margin-right: -10px;
  /*
    ==========================
    moving highlight for desktop
    ==========================
  */
  /*
    ==========================
    moving highlight for desktop
    ==========================
  */
  /*
    ==========================
    tier 1 navigation
    ==========================
  */
}
#primary-nav > .close {
  display: none;
}
#primary-nav .highlight {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 6px;
  background-color: #e8665c;
}
#primary-nav > ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: table;
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}
#primary-nav > ul > li {
  display: table-cell;
  padding: 0 10px;
  vertical-align: middle;
  text-align: center;
  /*
        ==========================
        tier 2 navigation drop down
        ==========================
      */
  /* liturgy theme override
         ----------------------*/
}
#primary-nav > ul > li > a {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 0;
  padding: 4px 0 0 0;
  height: 60px;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  line-height: 1.14;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: #4a4a4a;
  white-space: nowrap;
}
#primary-nav > ul > li > a:hover,
#primary-nav > ul > li > a:focus {
  text-decoration: none;
}
#primary-nav > ul > li > a:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  vertical-align: middle;
  font-size: 1px;
  line-height: 1;
}
body.liturgy #primary-nav > ul > li > a {
  color: #21284d;
}
body.liturgy #primary-nav > ul > li > .menu-drop-down {
  background-color: rgba(33, 40, 77, 0.9);
}
body.liturgy #primary-nav > ul > li > .menu-drop-down > ul > li {
  border-bottom: solid 2px #85adc0;
}
body.liturgy #primary-nav > ul > li > .menu-drop-down > ul > li > ul {
  background-color: #21284d;
}
#primary-nav > ul > li > .menu-drop-down {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: auto;
  padding: 17px 22px 30px 22px;
  background-color: rgba(0, 0, 0, 0.8);
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  line-height: 1.3;
  color: #cccccc;
  text-align: left;
  /* close button */
  /* ------------ */
  /* all links in drop down */
  /* ---------------------- */
  /* all lists in drop down */
  /* ---------------------- */
  /* tier 2 nav */
  /* ---------- */
}
#primary-nav > ul > li > .menu-drop-down .close {
  position: absolute;
  bottom: 6px;
  right: 11px;
}
#primary-nav > ul > li > .menu-drop-down .close button {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  color: #4a4a4a;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -ms-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
}
#primary-nav > ul > li > .menu-drop-down .close button:after {
  content: "\00a0\2715";
  font-weight: 700;
  font-size: 22px;
  color: #ffffff;
  vertical-align: middle;
}
#primary-nav > ul > li > .menu-drop-down .close button:hover,
#primary-nav > ul > li > .menu-drop-down .close button:focus {
  color: #9b9b9b;
}
#primary-nav > ul > li > .menu-drop-down .close button:focus {
  outline: dotted thin;
}
#primary-nav > ul > li > .menu-drop-down a {
  position: relative;
  display: inline-block;
  color: #cccccc;
  text-decoration: none;
}
#primary-nav > ul > li > .menu-drop-down a:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 6px;
  background-color: transparent;
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  -ms-transition: background 0.3s;
  -o-transition: background 0.3s;
  transition: background 0.3s;
}
#primary-nav > ul > li > .menu-drop-down a:hover:after,
#primary-nav > ul > li > .menu-drop-down a:focus:after {
  background-color: #e8665c;
}
#primary-nav > ul > li > .menu-drop-down ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* all list items in drop down */
  /* --------------------------- */
}
#primary-nav > ul > li > .menu-drop-down ul li {
  margin: 0;
  padding: 0;
}
#primary-nav > ul > li > .menu-drop-down > ul {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  -ms-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 32px;
  -moz-column-gap: 32px;
  -ms-column-gap: 32px;
  column-gap: 32px;
}
#primary-nav > ul > li > .menu-drop-down > ul > li {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  border-bottom: solid 2px #9b9b9b;
  
  /*
              ==========================
              tier 3 navigation
              ==========================
            */
}
#primary-nav > ul > li > .menu-drop-down > ul > li > a {
  padding: 8px 0 5px 0;
}
#primary-nav > ul > li > .menu-drop-down > ul > li > ul {
  margin: 2px 0 0 0;
  padding: 6px 14px;
  background-color: #404040;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
#primary-nav > ul > li > .menu-drop-down > ul > li > ul > li > a {
  padding: 4px 0;
  color: #bbbbbb;
}

/*
  ==========================
  icon navigation items
  ==========================
*/
.nav-icon > a:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -2px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.nav-icon.home > a:before {
  width: 21px;
  height: 20px;
  background-image: url(../../../themes/catholic/images/icon-home@2x.png);
}

.nav-icon.contact > a:before {
  width: 16px;
  height: 10px;
  background-image: url(../../../themes/catholic/images/icon-envelope-desktop@2x.png);
}

.nav-icon.search > a:before {
  width: 16px;
  height: 16px;
  background-image: url(../../../themes/catholic/images/icon-loupe-desktop@2x.png);
}

body.liturgy .nav-icon.home > a:before {
  width: 21px;
  height: 20px;
  background-image: url(../../../themes/catholic/images/icon-home-liturgy@2x.png);
}

body.liturgy .nav-icon.contact > a:before {
  width: 16px;
  height: 10px;
  background-image: url(../../../themes/catholic/images/icon-envelope-liturgy@2x.png);
}

body.liturgy .nav-icon.search > a:before {
  width: 16px;
  height: 16px;
  background-image: url(../../../themes/catholic/images/icon-loupe-liturgy@2x.png);
}



.nav-icon.fb > a:before {
  width: 16px;
  height: 16px;
  background-image: url(../../../themes/catholic/images/icon-facebook16.png);
}
.nav-icon.tw > a:before {
  width: 16px;
  height: 16px;
  background-image: url(../../../themes/catholic/images/icon-twitter16.png);
}
body.liturgy .nav-icon.fb > a:before {
  width: 16px;
  height: 16px;
  background-image: url(../../../themes/catholic/images/icon-facebook16.png);
}
body.liturgy .nav-icon.tw > a:before {
  width: 16px;
  height: 16px;
  background-image: url(../../../themes/catholic/images/icon-twitter16.png);
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
@media screen and (max-width: 860px) {
  #primary-nav {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 34px 30px 26px 42px;
    background-color: rgba(0, 0, 0, 0.84);
    /*
      ==========================
      mobile close menu
      ==========================
    */
    /*
      ==========================
      moving highlight for desktop
      ==========================
    */
    /*
      ==========================
      tier 1 navigation
      ==========================
    */
  }
  #primary-nav > .close {
    display: block;
    position: absolute;
    top: 21px;
    right: 22px;
  }
  #primary-nav > .close button {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    font-family: "Rubik", sans-serif;
    font-size: 12px;
    line-height: 1;
    text-transform: uppercase;
    color: #9b9b9b;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -ms-transition: color 0.3s;
    -o-transition: color 0.3s;
    transition: color 0.3s;
  }
  #primary-nav > .close button:after {
    position: relative;
    top: -1px;
    content: "\00a0\2715";
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    color: #ffffff;
    vertical-align: middle;
  }
  #primary-nav > .close button:hover,
  #primary-nav > .close button:focus {
    color: #ffffff;
  }
  #primary-nav > .close button:focus {
    outline: dotted thin;
  }
  #primary-nav .highlight {
    display: none !important;
  }
  #primary-nav > ul {
    display: block;
    width: auto;
  }
  #primary-nav > ul > li {
    display: block;
    margin: 0;
    padding: 10px 0;
    text-align: left;
    /*
          ==========================
          tier 2 navigation drop down
          ==========================
        */
  }
  #primary-nav > ul > li > a {
    position: relative;
    margin: 0;
    padding: 0;
    height: auto;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    color: #ffffff;
    white-space: normal;
  }
  #primary-nav > ul > li > a:after {
    content: none;
    display: none;
  }
  #primary-nav > ul > li > a.current:after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    display: block;
    width: auto;
    height: 4px;
    background-color: #e8665c;
  }
  #primary-nav > ul > li.has-drop-down > a:before {
    content: ":";
    position: absolute;
    top: -2px;
    left: -18px;
    display: block;
    width: 18px;
    text-align: left;
    font-family: "PT Serif", serif;
    color: rgba(204, 204, 204, 0.8);
    font-size: 26px;
    line-height: 0.8;
    font-weight: 700;
  }
  #primary-nav > ul > li > .menu-drop-down {
    display: none;
    position: static;
    padding: 0;
    margin: 0;
    background-color: transparent;
    /* close button */
    /* ------------ */
    /* all links in drop down */
    /* ---------------------- */
    /* all lists in drop down */
    /* ---------------------- */
    /* tier 2 nav */
    /* ---------- */
  }
  #primary-nav > ul > li > .menu-drop-down .close {
    display: none;
  }
  #primary-nav > ul > li > .menu-drop-down ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /* all list items in drop down */
    /* --------------------------- */
  }
  #primary-nav > ul > li > .menu-drop-down ul li {
    margin: 0;
    padding: 0;
  }
  #primary-nav > ul > li > .menu-drop-down > ul {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    -ms-column-count: 1;
    column-count: 1;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    -ms-column-gap: 0;
    column-gap: 0;
  }
  #primary-nav > ul > li > .menu-drop-down > ul > li {
    border-bottom: solid 2px #9b9b9b;
    /*
                ==========================
                tier 3 navigation
                ==========================
              */
  }
  #primary-nav > ul > li > .menu-drop-down > ul > li > a {
    padding: 8px 0 5px 0;
  }
  #primary-nav > ul > li > .menu-drop-down > ul > li > ul {
    margin: 2px 0 0 0;
    padding: 6px 14px;
    background-color: #404040;
  }
  #primary-nav > ul > li > .menu-drop-down > ul > li > ul > li > a {
    padding: 4px 0;
    color: #bbbbbb;
  }
  body.liturgy #primary-nav {
    background-color: rgba(33, 40, 77, 0.9);
  }
  body.liturgy #primary-nav > ul > li .menu-drop-down {
    background-color: transparent;
  }
  body.liturgy #primary-nav > ul > li > a {
    color: #ffffff;
  }
  /*
    ==========================
    icon navigation items
    ==========================
  */
  .nav-icon.home > a:before {
    content: none;
    display: none;
  }
  .nav-icon.home > a .visuallyhidden {
    clip: auto;
    height: auto;
    position: static;
    width: auto;
  }
  .nav-icon.contact > a:before {
    background-image: url(../../../themes/catholic/images/icon-envelope-desktop-white@2x.png);
  }
  .nav-icon.search > a:before {
    background-image: url(../../../themes/catholic/images/icon-loupe-desktop-white@2x.png);
  }
  body.liturgy .nav-icon.contact > a:before {
    background-image: url(../../../themes/catholic/images/icon-envelope-desktop-white@2x.png);
  }
  body.liturgy .nav-icon.search > a:before {
    background-image: url(../../../themes/catholic/images/icon-loupe-desktop-white@2x.png);
  }


  .nav-icon.fb > a:before {    
    background-image: url(../../../themes/catholic/images/icon-facebook-white.png);
  }
  .nav-icon.tw > a:before {    
    background-image: url(../../../themes/catholic/images/icon-twitter-white.png);
  }
  body.liturgy .nav-icon.fb > a:before {    
    background-image: url(../../../themes/catholic/images/icon-liturgy-facebook-white.png);
  }
  body.liturgy .nav-icon.tw > a:before {    
    background-image: url(../../../themes/catholic/images/icon-liturgy-twitter-white.png);
  }

}

/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  #primary-nav {
    padding: 26px 20px 20px 30px;
    /*
      ==========================
      mobile close menu
      ==========================
    */
  }
  #primary-nav > .close {
    top: 11px;
    right: 22px;
  }
}

/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
/* IE10 and 11 */
/* ----------- */
/* legacy ie */
/* --------- */
.lt-ie-9 .nav-icon.home > a:before {
  background-image: url(../../../themes/catholic/images/icon-home.png);
}

.lt-ie-9 .nav-icon.contact > a:before {
  background-image: url(../../../themes/catholic/images/icon-envelope-desktop.png);
}

.lt-ie-9 .nav-icon.search > a:before {
  background-image: url(../../../themes/catholic/images/icon-loupe-desktop.png);
}

body.liturgy .lt-ie-9 .nav-icon.home > a:before {
  background-image: url(../../../themes/catholic/images/icon-home-liturgy.png);
}

body.liturgy .lt-ie-9 .nav-icon.contact > a:before {
  background-image: url(../../../themes/catholic/images/icon-envelope-liturgy.png);
}

body.liturgy .lt-ie-9 .nav-icon.search > a:before {
  background-image: url(../../../themes/catholic/images/icon-loupe-liturgy.png);
}

/*
  ===============================================================================
  SECTION NAVIGATION
  ===============================================================================
*/
.section-nav-holder {
  position: relative;
}

#section-nav {
  position: absolute;
  top: 0;
  left: 10px;
  overflow: visible;
}
#section-nav h2 {
  position: relative;
  margin-bottom: 16px;
  font-family: "Rubik", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
}
#section-nav h2:before {
  content: "\003e";
  position: absolute;
  top: 0;
  left: -18px;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  color: #e8665c;
}
#section-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  line-height: 1.14;
}
#section-nav ul li {
  margin: 0;
  padding: 0 0 8px 0;
}
#section-nav ul li a {
  position: relative;
  display: inline-block;
  padding: 0 0 2px 0;
  color: #4a4a4a;
  text-decoration: none;
  border-bottom: solid 6px transparent;
  -webkit-transition: border-bottom 0.3s;
  -moz-transition: border-bottom 0.3s;
  -ms-transition: border-bottom 0.3s;
  -o-transition: border-bottom 0.3s;
  transition: border-bottom 0.3s;
}
#section-nav ul li a:hover,
#section-nav ul li a:focus {
  border-bottom-color: #e8665c;
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
@media screen and (max-width: 860px) {
  #section-nav {
    position: static;
    border-top: solid 1px #9b9b9b;
    padding-top: 20px;
  }
  #section-nav h2 {
    margin-top: 0 !important;
  }
  #section-nav h2:before {
    left: -14px;
  }
  #section-nav ul {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -ms-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    -ms-column-gap: 20px;
    column-gap: 20px;
  }
  #section-nav ul li {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  #section-nav ul li a {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
/*
  ===============================================================================
  RELATED RESOURCES FOR SECTION PAGE
  ===============================================================================
*/
.related-resource-wrapper {
  /* layout */
  /* ------ */
  margin-left: -10px;
  margin-right: -10px;
}
.related-resource-wrapper > .inner {
  position: relative;
  z-index: 4;
}
.related-resource-wrapper > .inner > * {
  padding: 0 10px;
}
.related-resource-wrapper .related-resources {
  position: absolute;
  z-index: 2;
  left: 75%;
  top: 0;
  margin-top: -64px;
  /* content toggle */
  /* -------------- */
  /* content holder */
  /* -------------- */
  /* open state */
  /* ---------- */
}
.related-resource-wrapper .related-resources .content-toggle {
  position: relative;
  z-index: 3;
}
.related-resource-wrapper .related-resources .content-toggle button {
  display: block;
  width: 65px;
  height: 65px;
  overflow: hidden;
  border: none;
  border-radius: 50%;
  background: url(../../../themes/catholic/images/icon-book-resources@2x.png)
    center no-repeat transparent;
  background-size: contain;
  -webkit-transition: background-color 0.3s;
  -moz-transition: background-color 0.3s;
  -ms-transition: background-color 0.3s;
  -o-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.related-resource-wrapper .related-resources .content-toggle button:hover,
.related-resource-wrapper .related-resources .content-toggle button:focus {
  background-color: #ffffff;
}
.related-resource-wrapper .related-resources .content-holder {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 10px;
  left: auto;
  font-family: "Rubik", sans-serif;
  display: none;
}
.related-resource-wrapper .related-resources .content-holder > .inner {
  display: block;
  width: 460px;
  padding: 38px 80px 38px 42px;
  border-top-right-radius: 32px;
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-box-shadow: 0 0 12px 0 #cdcdcd;
  -moz-box-shadow: 0 0 12px 0 #cdcdcd;
  box-shadow: 0 0 12px 0 #cdcdcd;
}
.related-resource-wrapper .related-resources .content-holder h4 {
  color: #9b9b9b;
}
.related-resource-wrapper .related-resources .content-holder ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.4;
}
.related-resource-wrapper .related-resources .content-holder ul li {
  margin: 0;
  padding: 0;
}
.related-resource-wrapper .related-resources .content-holder ul li + li {
  margin-top: 12px;
}
.related-resource-wrapper .related-resources .content-holder ul li a {
  color: #4a4a4a;
}
.related-resource-wrapper .related-resources .content-holder ul li a span {
  font-weight: 500;
}
.related-resource-wrapper .related-resources .more-resources-link {
  margin-top: 32px;
}
.related-resource-wrapper .related-resources.open .content-toggle button {
  background-image: url(../../../themes/catholic/images/icon-book-resources-active@2x.png);
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
@media screen and (max-width: 860px) {
  .related-resource-wrapper {
    /* layout */
    /* ------ */
    margin-left: 0;
    margin-right: 0;
  }
  .related-resource-wrapper > .inner > * {
    padding: 0;
  }
  .related-resource-wrapper .related-resources {
    position: absolute;
    left: auto;
    right: 0;
    margin-top: -64px;
    /* content holder */
    /* -------------- */
  }
  .related-resource-wrapper .related-resources .content-holder {
    right: 0;
  }
}

/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  .related-resource-wrapper {
    /* layout */
    /* ------ */
    margin-left: 0;
    margin-right: 0;
  }
  .related-resource-wrapper > .inner > * {
    padding: 0;
  }
  .related-resource-wrapper .related-resources {
    position: absolute;
    left: 0;
    right: -20px;
    width: auto;
    margin-top: -54px;
    /* content toggle */
    /* -------------- */
    /* content holder */
    /* -------------- */
  }
  .related-resource-wrapper .related-resources .content-toggle {
    position: absolute;
    top: 0;
    right: 0;
  }
  .related-resource-wrapper .related-resources .content-toggle button {
    width: 54px;
    height: 54px;
  }
  .related-resource-wrapper .related-resources .content-holder {
    left: 0;
    right: 0;
    width: auto;
  }
  .related-resource-wrapper .related-resources .content-holder > .inner {
    width: auto;
    border-top-right-radius: 27px;
    padding: 30px 50px 30px 20px;
  }
}

/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
/*
  ===============================================================================
  DIOCESES MAP
  ===============================================================================
*/
.dioceses-map {
  padding-top: 50px;
  padding-bottom: 60px;
  /*
    ==========================
    color variations
    ==========================
  */
  /*
    ==========================
    map holder
    ==========================
  */
  /*
    ==========================
    map text links
    ==========================
  */
}
.dioceses-map > .wrapper > .outer {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
}
.dioceses-map .h2,
.dioceses-map .h4 {
  color: #ffffff;
}
body.light-yellow .dioceses-map .h2,
body.light-yellow .dioceses-map .h4,
body.light-blue .dioceses-map .h2,
body.light-blue .dioceses-map .h4,
body.light-green .dioceses-map .h2,
body.light-green .dioceses-map .h4,
body.light-purple .dioceses-map .h2,
body.light-purple .dioceses-map .h4,
body.light-grey .dioceses-map .h2,
body.light-grey .dioceses-map .h4,
body.dark-grey .dioceses-map .h2,
body.dark-grey .dioceses-map .h4 {
  color: #4a4a4a;
}
body.light-yellow .dioceses-map {
  background-color: #f4ebc9;
}
body.light-blue .dioceses-map {
  background-color: #85adc0;
}
body.light-green .dioceses-map {
  background-color: #adc878;
}
body.light-purple .dioceses-map {
  background-color: #9c89c1;
}
body.light-grey .dioceses-map {
  background-color: #cccccc;
}
body.dark-grey .dioceses-map {
  background-color: #4a4a4a;
}
body.denim .dioceses-map {
  background-color: #35517c;
}
body.dark-blue-grey .dioceses-map {
  background-color: #21284d;
}
body.HomePage .dioceses-map {
  background: #85adc0;
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    #c9dfe8 0%,
    #85adc0 100%
  );
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    #c9dfe8 0%,
    #85adc0 100%
  );
  background: radial-gradient(ellipse at center, #c9dfe8 0%, #85adc0 100%);
}
.dioceses-map .map-holder {
  position: relative;
  z-index: 1;
  margin: 30px auto;
  padding: 0;
  max-width: 380px;
  overflow: hidden;
}
.dioceses-map .map-holder img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
.dioceses-map .text-links .diocese-item {
  position: absolute;
  z-index: 3;
  top: 0;
  height: 1px;
  background-color: #ffffff;
  overflow: visible;
  /* left aligned text */
  /* ----------------- */
  /* right aligned text */
  /* ------------------ */
  /* area positions */
  /* -------------- */
}
.dioceses-map .text-links .diocese-item:after {
  content: "";
  position: absolute;
  top: -4px;
  width: 9px;
  height: 9px;
  border: solid 1px #ffffff;
  border-radius: 50%;
  background-color: transparent;
}
.dioceses-map .text-links .diocese-item .inner {
  position: absolute;
  z-index: 3;
  bottom: 0;
}
.dioceses-map .text-links .diocese-item .inner a {
  display: block;
  margin: 0;
  padding: 0 0 4px 0;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  color: #4a4a4a;
}
.dioceses-map .text-links .diocese-item .inner a:hover,
.dioceses-map .text-links .diocese-item .inner a:focus {
  outline: thin dotted #ffffff;
  text-decoration: none;
}
.dioceses-map .text-links .diocese-item .inner a .image-holder {
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 80px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ffffff;
  background-size: cover;
  border-radius: 50%;
}
.dioceses-map .text-links .diocese-item .inner a h4 {
  margin-top: 0 !important;
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
}
.dioceses-map .text-links .diocese-item .inner a h4 span {
  display: block;
  font-size: 16px;
  line-height: 1.6;
}
.dioceses-map .text-links .diocese-item .inner a h4 + * {
  margin-top: 3px !important;
}
.dioceses-map .text-links .diocese-item.left-aligned:after {
  right: -9px;
}
.dioceses-map .text-links .diocese-item.left-aligned .inner {
  left: 0;
}
.dioceses-map .text-links .diocese-item.left-aligned .inner a .image-holder {
  left: -88px;
}
.dioceses-map .text-links .diocese-item.right-aligned:after {
  left: -9px;
}
.dioceses-map .text-links .diocese-item.right-aligned .inner {
  right: 0;
}
.dioceses-map .text-links .diocese-item.right-aligned .inner a .image-holder {
  right: -88px;
}
.dioceses-map .text-links .diocese-item.area-01 {
  top: 20%;
  left: 58%;
  right: 10%;
}
.dioceses-map .text-links .diocese-item.area-01 .image-holder {
  background-image: url(../../../themes/catholic/images/auckland-bw@2x.png);
}
.dioceses-map .text-links .diocese-item.area-02 {
  top: 28%;
  left: 27%;
  right: 41.5%;
}
.dioceses-map .text-links .diocese-item.area-02 .image-holder {
  background-image: url(../../../themes/catholic/images/hamilton-bw@2x.png);
}
.dioceses-map .text-links .diocese-item.area-03 {
  top: 46%;
  left: 18%;
  right: 41%;
}
.dioceses-map .text-links .diocese-item.area-03 .image-holder {
  background-image: url(../../../themes/catholic/images/palmerston-bw-updated@2x.png);
}
.dioceses-map .text-links .diocese-item.area-04 {
  top: 52%;
  left: 57.4%;
  right: 11%;
}
.dioceses-map .text-links .diocese-item.area-04 .image-holder {
  background-image: url(../../../themes/catholic/images/wellington-bw@2x.png);
}
.dioceses-map .text-links .diocese-item.area-05 {
  top: 69.4%;
  left: 10%;
  right: 51.2%;
}
.dioceses-map .text-links .diocese-item.area-05 .image-holder {
  background-image: url(../../../themes/catholic/images/christchurch-bw@2x.png);
}
.dioceses-map .text-links .diocese-item.area-06 {
  top: 86.2%;
  left: 43%;
  right: 30%;
}
.dioceses-map .text-links .diocese-item.area-06 .image-holder {
  background-image: url(../../../themes/catholic/images/dunedin-bw@2x.png);
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
@media screen and (max-width: 860px) {
  .dioceses-map {
    /*
      ==========================
      map text links
      ==========================
    */
  }
  .dioceses-map .text-links .diocese-item {
    /* area positions */
    /* -------------- */
  }
  .dioceses-map .text-links .diocese-item.area-01 {
    left: 60%;
    right: 12%;
  }
  .dioceses-map .text-links .diocese-item.area-02 {
    right: 39%;
  }
  .dioceses-map .text-links .diocese-item.area-03 {
    right: 39%;
  }
  .dioceses-map .text-links .diocese-item.area-04 {
    left: 59.3%;
    right: 11%;
  }
  .dioceses-map .text-links .diocese-item.area-05 {
    left: 12%;
    right: 51.5%;
  }
  .dioceses-map .text-links .diocese-item.area-06 {
    left: 41%;
  }
}

/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  .dioceses-map {
    padding-top: 30px;
    padding-bottom: 30px;
    /*
      ==========================
      map holder
      ==========================
    */
    /*
      ==========================
      map text links
      ==========================
    */
  }
  .dioceses-map > .wrapper > .outer {
    padding-right: 20px;
  }
  .dioceses-map .map-holder {
    max-width: 200px;
  }
  .dioceses-map .text-links .diocese-item {
    /* area positions */
    /* -------------- */
  }
  .dioceses-map .text-links .diocese-item > .inner a > *:not(h4) {
    display: none;
  }
  .dioceses-map .text-links .diocese-item > .inner a h4 {
    font-size: 18px;
    font-weight: 500;
  }
  .dioceses-map .text-links .diocese-item > .inner a h4 span {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
  }
  .dioceses-map .text-links .diocese-item.area-01 {
    left: 61%;
    right: 2%;
  }
  .dioceses-map .text-links .diocese-item.area-02 {
    left: 10%;
    right: 40%;
  }
  .dioceses-map .text-links .diocese-item.area-03 {
    left: 2%;
    right: 39%;
  }
  .dioceses-map .text-links .diocese-item.area-04 {
    left: 60%;
    right: -10px;
  }
  .dioceses-map .text-links .diocese-item.area-05 {
    left: 0;
    right: 57%;
  }
  .dioceses-map .text-links .diocese-item.area-06 {
    left: 35%;
    right: 17%;
  }
}

/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
.ie .dioceses-map .text-links .diocese-item {
  /* area positions */
  /* -------------- */
}
.ie .dioceses-map .text-links .diocese-item.area-01 .image-holder {
  background-image: url(../../../themes/catholic/images/auckland-bw.png);
}
.ie .dioceses-map .text-links .diocese-item.area-02 .image-holder {
  background-image: url(../../../themes/catholic/images/hamilton-bw.png);
}
.ie .dioceses-map .text-links .diocese-item.area-03 .image-holder {
  background-image: url(../../../themes/catholic/images/palmerston-bw.png);
}
.ie .dioceses-map .text-links .diocese-item.area-04 .image-holder {
  background-image: url(../../../themes/catholic/images/wellington-bw.png);
}
.ie .dioceses-map .text-links .diocese-item.area-05 .image-holder {
  background-image: url(../../../themes/catholic/images/christchurch-bw.png);
}
.ie .dioceses-map .text-links .diocese-item.area-06 .image-holder {
  background-image: url(../../../themes/catholic/images/dunedin-bw.png);
}

/*
  ===============================================================================
  ANCHOR LISTS
  ===============================================================================
*/
/*
  ==========================
  layout
  ==========================
*/
.alphabetical-list-holder {
  position: relative;
}

/* anchor list */
/* ----------- */
ul.anchor-list {
  margin: 12px 0 0 0;
  padding: 0;
  list-style-type: none;
  font-family: "Rubik", sans-serif;
  font-size: 12px;
  line-height: 1.25;
  color: grey;
}
ul.anchor-list > li {
  display: inline-block;
  margin: 0 10px 10px 0;
}
ul.anchor-list > li a {
  color: #e8665c;
  text-decoration: none;
}
ul.anchor-list > li a:hover,
ul.anchor-list > li a:focus {
  text-decoration: underline;
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  /*
    ==========================
    layout
    ==========================
  */
  .alphabetical-list-holder .lettergroupedcontacts {
    padding-right: 25px;
  }
  /* anchor list */
  /* ----------- */
  ul.anchor-list {
    float: right;
    margin: 5px 0 0 0;
    padding: 0;
    width: 10px;
  }
  ul.anchor-list > li {
    display: block;
    margin: 0 0 7px 0;
  }
}

/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
/*
  ===============================================================================
  BIO LAYOUT
  ===============================================================================
*/
/*
  ==========================
  layout
  ==========================
*/
.bio-wrapper {
  margin-left: -10px;
  margin-right: -10px;
  /* main bio inner holder */
  /* --------------------- */
}
.bio-wrapper .elementbio {
  position: relative;
  width: 49.95%;
  padding: 0 10px;
}
.bio-wrapper .elementbio:nth-child(n + 3) {
  margin-top: 60px;
}
.bio-wrapper .elementbio:nth-child(2n + 1) {
  float: left;
  clear: both;
}
.bio-wrapper .elementbio:nth-child(2n + 1) .bio-extended {
  right: -100%;
}
.bio-wrapper .elementbio:nth-child(2n + 1) .bio-extended:before,
.bio-wrapper .elementbio:nth-child(2n + 1) .bio-extended:after {
  left: 10px;
  right: 50%;
  margin-right: 10px;
}
.bio-wrapper .elementbio:nth-child(2n + 1) .bio-extended .bio-close {
  left: 50%;
}
.bio-wrapper .elementbio:nth-child(2n) {
  float: right;
  clear: right;
}
.bio-wrapper .elementbio:nth-child(2n) .bio-extended {
  left: -100%;
}
.bio-wrapper .elementbio:nth-child(2n) .bio-extended:before,
.bio-wrapper .elementbio:nth-child(2n) .bio-extended:after {
  left: 50%;
  right: 10px;
  margin-left: 10px;
}
.bio-wrapper .elementbio:nth-child(2n) .bio-extended .bio-close {
  right: 50%;
}
.bio-wrapper .bio-inner {
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  line-height: 1.3;
  /* upper bio with image and text */
  /* extended expandable content */
  /* --------------------------- */
  /* spacer */
  /* ------ */
}
.bio-wrapper .bio-inner > .upper {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
}
.bio-wrapper .bio-inner > .upper > * {
  display: table-cell;
  vertical-align: top;
}
.bio-wrapper .bio-inner > .upper > *.image-holder {
  width: 40%;
}
.bio-wrapper .bio-inner > .upper > *.image-holder img {
  display: block;
  width: 100%;
  height:auto;
  margin: 0;
  padding: 0;
}
.bio-wrapper .bio-inner > .upper > *.content-holder {
  padding-left: 20px;
}
.bio-wrapper .bio-inner * + p {
  margin-top: 8px;
}
.bio-wrapper .bio-inner .name-title {
  font-weight: 500;
}
.bio-wrapper .bio-inner .bio-extended {
  display: none;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  font-family: "PT Serif", serif;
  font-size: 16px;
  line-height: 1.75;
}
.bio-wrapper .bio-inner .bio-extended:before,
.bio-wrapper .bio-inner .bio-extended:after {
  content: "";
  position: absolute;
  display: block;
  height: 6px;
  width: auto;
  background-color: #cccccc;
}
.bio-wrapper .bio-inner .bio-extended:before {
  top: 20px;
}
.bio-wrapper .bio-inner .bio-extended:after {
  bottom: 0;
}
.bio-wrapper .bio-inner .bio-extended > .inner {
  margin-top: 20px;
  padding: 24px 10px 32px 10px;
}
.bio-wrapper .bio-inner .bio-extended .bio-close {
  position: absolute;
  bottom: -9px;
}
.bio-wrapper .bio-inner .bio-extended .bio-close button {
  font-family: "Rubik", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
}
.bio-wrapper .bio-inner .bio-spacer {
  height: 0;
  overflow: hidden;
}

.icon {
  position: relative;
  padding-left: 30px;
}
.icon:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: contain;
}
.icon.telephone:before {
  width: 16px;
  height: 16px;
  background-image: url(../../../themes/catholic/images/icon-sml-phone@2x.png);
}
.icon.mobile:before {
  width: 16px;
  height: 16px;
  background-image: url(../../../themes/catholic/images/icon-sml-mobile.png);
}
.icon.email:before {
  top: 3px;
  width: 16px;
  height: 11px;
  background-image: url(../../../themes/catholic/images/icon-sml-email@2x.png);
}
.icon.bio-link:before {
  width: 13px;
  height: 16px;
  background-image: url(../../../themes/catholic/images/icon-sml-bio@2x.png);
}
.icon.website:before {
  top: 1px;
  width: 18px;
  height: 16px;
  background-image: url(../../../themes/catholic/images/icon-sml-web@2x.png);
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  /*
    ==========================
    layout
    ==========================
  */
  .bio-wrapper {
    margin-left: 0;
    margin-right: 0;
    /* main bio inner holder */
    /* --------------------- */
  }
  .bio-wrapper .elementbio {
    width: auto;
    padding-left: 0;
    padding-right: 0;
  }
  .bio-wrapper .elementbio:nth-child(n + 2) {
    margin-top: 60px;
  }
  .bio-wrapper .elementbio:nth-child(2n + 1),
  .bio-wrapper .elementbio:nth-child(2n) {
    float: none;
    clear: none;
  }
  .bio-wrapper .elementbio:nth-child(2n + 1) .bio-extended,
  .bio-wrapper .elementbio:nth-child(2n) .bio-extended {
    left: 0;
    right: 0;
  }
  .bio-wrapper .bio-inner {
    /* extended expandable content */
    /* --------------------------- */
    /* spacer */
    /* ------ */
  }
  .bio-wrapper .bio-inner .bio-extended {
    font-size: 14px;
  }
  .bio-wrapper .bio-inner .bio-extended:before,
  .bio-wrapper .bio-inner .bio-extended:after {
    content: none;
    display: none;
  }
  .bio-wrapper .bio-inner .bio-extended > .inner {
    padding: 24px 0;
    border-top: solid 6px #cccccc;
    border-bottom: solid 6px #cccccc;
  }
  .bio-wrapper .bio-inner .bio-extended .bio-close {
    position: static;
  }
  .bio-wrapper .bio-inner .bio-spacer {
    position: static;
    z-index: 0;
  }
  .bio-wrapper .bio-inner .bio-spacer:before,
  .bio-wrapper .bio-inner .bio-spacer:after {
    content: none;
    display: none;
  }
}

/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
/*
  ===============================================================================
  CONTACT BLOCKS
  ===============================================================================
*/
/*
  ==========================
  layout
  ==========================
*/
.lettergroupedcontacts {
  margin-top: 22px;
}
.lettergroupedcontacts + .lettergroupedcontacts {
  margin-top: 38px;
}

.letter-heading {
  margin-bottom: 4px;
  font-family: "Rubik", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  color: #cccccc;
}

.letter-group {
  margin-left: -10px;
  margin-right: -10px;
}
.letter-group > .odd,
.letter-group > .even {
  width: 49.99%;
  padding: 0 10px;
}
.letter-group > .odd:nth-child(n + 3),
.letter-group > .even:nth-child(n + 3) {
  margin-top: 38px;
}
.letter-group > .odd {
  float: left;
  clear: left;
}
.letter-group > .even {
  float: right;
  clear: right;
}

/*
  ==========================
  contact info styling
  ==========================
*/
.elementcontact {
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  line-height: 1.14;
}
.elementcontact h3 {
  font-size: 14px;
}
.elementcontact > * + * {
  margin-top: 6px;
}

/*
  ==========================
  contact info as aside in columns
  ==========================
*/
.aside-contact-holder {
  position: relative;
}

.aside-contact .elementcontact h3 {
  font-size: 24px;
}

.aside-contact .elementcontact + .elementcontact {
  margin-top: 20px;
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
@media screen and (max-width: 860px) {
  /*
    ==========================
    single contact styles
    ==========================
  */
  .contact-holder {
    position: relative;
  }
  .contact-holder > .elementcontact {
    position: static;
  }
}

/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  /*
    ==========================
    layout
    ==========================
  */
  .letter-heading:before,
  .letter-heading:after {
    content: none;
    display: none;
  }
  .letter-group {
    margin-left: 0;
    margin-right: 0;
  }
  .letter-group:before,
  .letter-group:after {
    content: none;
    display: none;
  }
  .letter-group > .odd,
  .letter-group > .even {
    float: none;
    clear: none;
    width: auto;
    padding: 0;
  }
  .letter-group > .odd:nth-child(n + 3),
  .letter-group > .even:nth-child(n + 3) {
    margin-top: 24px;
  }
  .letter-group > * + * {
    margin-top: 24px;
  }
}

/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
/*
  ===============================================================================
  USER DEFINED FORM
  ===============================================================================
*/
.userform {
  position: relative;
  /* required field asterisk */
  /*
  ==========================
  form button
  ==========================
  */
}
.userform .field {
  width: 100%;
  display: table;
}
.userform .field label {
  display: inline-block;
  margin: 0;
  margin-right: 1%;
  width: 18%;
  padding: 5px;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  font-weight: 400;
}
.userform .field .middleColumn {
  float: right;
  width: 80%;
}
.userform .field .middleColumn input.text,
.userform .field .middleColumn textarea {
  width: 100%;
  padding: 4px 8px;
  border: solid 1px #cccccc;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  line-height: 1.14;
  font-weight: 400;
}
.userform .field .middleColumn input.text {
  height: 40px;
}
.userform .field span.message {
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  /* server-side validation error (if JS disabled) */
}
.userform .field span.message.error {
  color: #e8665c;
}
.userform .field span.message.required,
.userform .field span.message.validation {
  width: 100%;
  display: table;
  margin-left: 20%;
  margin-top: 10px;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  color: #e8665c;
}
.userform .field + .field {
  margin-top: 10px;
}
.userform .field.requiredField label:after {
  content: "*";
  margin-left: 4px;
  font-weight: 500;
  color: #e8665c;
}
.userform .field.recaptcha {
  display: inline-block;
}
.userform .field.recaptcha .middleColumn .g-recaptcha {
  width: 305px;
}
.userform > fieldset + .btn-toolbar {
  position: absolute;
  bottom: -60px;
  right: 0;
}
.userform > fieldset + .btn-toolbar.recaptcha {
  bottom: 15px;
}
.userform .btn-toolbar input[type="submit"] {
  display: inline-block;
  margin: 0;
  padding: 14px 12px 12px 12px;
  min-height: 0;
  background: transparent;
  border: solid 3px #6a696f;
  font-family: "Rubik", sans-serif;
  color: #6a696f;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  text-align: center;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  -webkit-transition: background 0.3s, color 0.3s;
  -moz-transition: background 0.3s, color 0.3s;
  -ms-transition: background 0.3s, color 0.3s;
  -o-transition: background 0.3s, color 0.3s;
  transition: background 0.3s, color 0.3s;
}
.userform .btn-toolbar input[type="submit"]:hover,
.userform .btn-toolbar input[type="submit"]:focus {
  background-color: #6a696f;
  color: #cccccc !important;
  text-decoration: none;
}

/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  .userform .field label,
  .userform .field .middleColumn {
    display: block;
    width: 100%;
  }
  .userform fieldset + .btn-toolbar {
    position: static;
    margin-top: 20px;
  }
}

/*
  ===============================================================================
  ELEMENT LISTS
  ===============================================================================
*/
/*
  ==========================
  layout
  ==========================
*/
.element-list-holder {
  margin-left: -10px;
  margin-right: -10px;
}
.element-list-holder > .inner > * {
  float: left;
  width: 49.99%;
  padding: 0 10px;
}
.element-list-holder > .inner > *:nth-child(2n + 1) {
  clear: left;
}
.element-list-holder > .inner > *:nth-child(n + 3) {
  margin-top: 32px;
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  /*
    ==========================
    layout
    ==========================
  */
  .element-list-holder {
    margin-left: 0;
    margin-right: 0;
  }
  .element-list-holder > .inner > * {
    float: none;
    width: auto;
    padding: 0;
  }
  .element-list-holder > .inner > * + * {
    margin-top: 24px;
  }
  .element-list-holder > .inner > *:nth-child(n + 3) {
    margin-top: 24px;
  }
}

/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
/*
  ===============================================================================
  ARTICLE LISTS
  ===============================================================================
*/
/*
  ==========================
  layout
  ==========================
*/
.article-list .article {
  padding: 42px 0 34px 0;
}
.article-list .article + .article {
  border-top: solid 1px #4a4a4a;
}

.article-list .image-holder {
  width: 180px;
}
.article-list .image-holder img {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}

.article-list .content-holder h3 a {
  color: #4a4a4a;
}

.article-list .content-holder .metadata {
  font-family: "Rubik", sans-serif;
  font-size: 12px;
  font-weight: 500;
}

.article-list .content-holder .light-grey {
  line-height: 1.25;
  text-align: left;
  color: #cccccc;
}

.article-list .content-holder p + p {
  margin-top: 4px;
}

/*
  ==========================
  pagination
  ==========================
*/
.pagination {
  margin-top: 38px;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  line-height: 1.25;
  color: #cccccc;
  text-align: right;
}
.pagination > div {
  display: inline-block;
  margin: 12px 4px 0 4px;
  text-align: center;
}
.pagination > div > * {
  padding: 0 3px 2px 3px;
  border-bottom: solid 3px transparent;
}
.pagination > div > *.current {
  color: #e8665c;
  border-bottom-color: #e8665c;
}
.pagination > div > a {
  color: #cccccc;
  text-decoration: none;
  -webkit-transition: color 0.3s, border-bottom-color 0.3s;
  -moz-transition: color 0.3s, border-bottom-color 0.3s;
  -ms-transition: color 0.3s, border-bottom-color 0.3s;
  -o-transition: color 0.3s, border-bottom-color 0.3s;
  transition: color 0.3s, border-bottom-color 0.3s;
}
.pagination > div > a:hover,
.pagination > div > a:focus {
  text-decoration: none;
  color: #9b9b9b;
  border-bottom-color: #e8665c;
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  /*
    ==========================
    layout
    ==========================
  */
  .article-list .article {
    padding: 30px 0;
  }
  .article-list .image-holder {
    width: auto;
  }
  /*
    ==========================
    pagination
    ==========================
  */
  .pagination {
    margin-top: 10px;
  }
}

/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
/*
  ===============================================================================
  HOME STYLES
  ===============================================================================
*/
.HomePage #main-page-area {
  padding-bottom: 0;
}

/*
  ==========================
  season icon
  ==========================
*/
.season-dot-wrapper {
  margin-left: -10px;
  margin-right: -10px;
}
.season-dot-wrapper > .inner {
  position: relative;
  width: 25%;
  padding: 0 10px;
}
.season-dot-wrapper .image-holder {
  position: absolute;
  left: 10px;
  right: 10px;
  display: block;
  width: auto;
  height: auto;
  margin: -50% 0 0 0;
  padding: 0 0 100% 0;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: contain;
}
.season-dot-wrapper .image-holder.ordinary-time {
  background-image: url(../../../themes/catholic/images/liturgical-season-dot-ordinary-time@2x.png);
}
.season-dot-wrapper .image-holder.advent {
  background-image: url(../../../themes/catholic/images/liturgical-season-dot-advent@2x.png);
}
.season-dot-wrapper .image-holder.christmas {
  background-image: url(../../../themes/catholic/images/liturgical-season-dot-christmas@2x.png);
}
.season-dot-wrapper .image-holder.lent {
  background-image: url(../../../themes/catholic/images/liturgical-season-dot-lent@2x.png);
}
.season-dot-wrapper .image-holder.easter {
  background-image: url(../../../themes/catholic/images/liturgical-season-dot-easter@2x.png);
}
.season-dot-wrapper .image-holder.easter-triduum {
  background-image: url(../../../themes/catholic/images/liturgical-season-dot-easter-triduum@2x.png);
}
.season-dot-wrapper .image-holder.pentecost {
  background-image: url(../../../themes/catholic/images/liturgical-season-dot-pentecost@2x.png);
}

/*
  ==========================
  intro area
  ==========================
*/
.home-intro-wrapper {
  margin-top: 50px;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: 58px;
}
.home-intro-wrapper > .inner {
  display: table;
  width: 83.33%;
  max-width: 83.33%;
  margin: 0;
  padding: 0;
  table-layout: fixed;
}
.home-intro-wrapper > .inner > * {
  display: table-cell;
  padding: 0 10px;
  vertical-align: bottom;
}
.home-intro-wrapper > .inner > *.button-links {
  width: 30%;
}

.button-links > * + * {
  margin-top: 20px;
}

.button-links a.button {
  width: 100%;
}

/*
  ==========================
  latest news item
  ==========================
*/
.home-latest-news .news-content .news-metadata {
  font-family: "Rubik", sans-serif;
  font-size: 12px;
  line-height: 1.25;
}
.home-latest-news .news-content .news-metadata + h3 {
  margin-top: 20px !important;
}

/*
  ==========================
  home pulled content
  ==========================
*/
.home-pulled-section .column-wrapper + .column-wrapper {
  margin-top: 16px;
}

.home-pulled-section figure a {
  display: block;
}
.home-pulled-section figure a:after {
  display: none;
}

.home-pulled-section-title {
  font-family: "Rubik", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  text-align: right;
  direction: rtl;
}

.home-pulled-section-button a.button {
  width: 100%;
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
@media screen and (max-width: 860px) {
  /*
    ==========================
    season icon
    ==========================
  */
  .season-dot-wrapper > .inner {
    width: 30%;
  }
  /*
    ==========================
    intro area
    ==========================
  */
  .home-intro-wrapper > .inner {
    width: 100%;
    max-width: none;
  }
  /*
    ==========================
    home pulled content
    ==========================
  */
  .home-pulled-section h2 {
    margin-top: 0 !important;
  }
  .home-pulled-section-title {
    text-align: left;
  }
  .home-pulled-section-button a.button {
    width: 50%;
  }
}

/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  /*
    ==========================
    season icon
    ==========================
  */
  .season-dot-wrapper {
    margin-left: 0;
    margin-right: 0;
  }
  .season-dot-wrapper > .inner {
    width: 120px;
    padding: 0;
    left: -38px;
  }
  .season-dot-wrapper .image-holder {
    left: 0;
    right: 0;
    margin: -90px 0 0 0;
  }
  /*
    ==========================
    intro area
    ==========================
  */
  .home-intro-wrapper {
    margin: 32px 0 26px 0;
  }
  .home-intro-wrapper > .inner {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: auto;
  }
  .home-intro-wrapper > .inner > * {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    display: block;
    padding-left: 0;
    padding-right: 0;
    width: auto;
  }
  .home-intro-wrapper > .inner > *.button-links {
    margin-top: 28px;
    width: auto;
  }
  .home-intro-wrapper > .inner > *.title-intro-brief {
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
  }
  /*
    ==========================
    latest news item
    ==========================
  */
  .home-latest-news .image-holder {
    margin-left: -20px;
    margin-right: -20px;
  }
  .home-latest-news .news-content .news-metadata {
    font-size: 11px;
  }
  /*
    ==========================
    home pulled content
    ==========================
  */
  .home-pulled-section figure {
    margin-left: -20px;
    margin-right: -20px;
  }
  .home-pulled-section-button a.button {
    width: 100%;
  }
}

/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
/*
  ===============================================================================
  MEDIA RELEASES STYLES
  ===============================================================================
*/
.MediaReleaseIndexPage {
  background-color: #f5f5f5;
}

/*
  ==========================
  latest releases
  ==========================
*/
.latest-releases .media-release {
  padding: 14px 0;
  background-color: #ffffff;
  /* content area */
  /* ------------ */
  /* media release spacing */
  /* --------------------- */
}
.latest-releases .media-release > .inner {
  width: 100%;
}
.latest-releases .media-release > .inner > * {
  padding: 0 20px;
  vertical-align: top;
  /* image layout and size */
  /* --------------------- */
}
.latest-releases .media-release > .inner > *.image-holder {
  width: 42.86%;
  padding: 0;
}
.latest-releases .media-release > .inner > *.image-holder img {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}
.latest-releases .media-release .content-holder h3 a {
  color: #4a4a4a;
}
.latest-releases .media-release .content-holder p + p {
  margin-top: 6px;
}
.latest-releases .media-release .content-holder .metadata {
  font-family: "Rubik", sans-serif;
  font-size: 12px;
  font-weight: 500;
}
.latest-releases .media-release + .media-release {
  margin-top: 32px;
}

.media-social-share-links {
  text-align: right;
}
.media-social-share-links > span {
  font-family: "Rubik", sans-serif;
  font-size: 12px;
  line-height: 24px;
  color: #cccccc;
  text-transform: uppercase;
  vertical-align: middle;
}
.media-social-share-links a.icon {
  display: inline-block;
  margin-left: 10px;
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
  color: #cccccc;
  vertical-align: middle;
}
.media-social-share-links a.icon:before {
  position: static;
  display: inline-block;
  margin: 0;
  padding: 0;
  font-family: FontAwesome;
  color: #cccccc;
  vertical-align: middle;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -ms-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
}
.media-social-share-links a.icon.print:before {
  content: "\f02f";
}
.media-social-share-links a.icon.facebook:before {
  content: "\f09a";
}
.media-social-share-links a.icon.twitter:before {
  content: "\f099";
}
.media-social-share-links a.icon:hover,
.media-social-share-links a.icon:focus {
  text-decoration: none;
}
.media-social-share-links a.icon:hover:before,
.media-social-share-links a.icon:focus:before {
  color: #589cdd;
}

/*
  ==========================
  archived media releases
  ==========================
*/
.archived-releases {
  background-color: #ffffff;
  font-family: "Rubik", sans-serif;
}
.archived-releases .archive-year {
  border-top: solid 1px #cccccc;
  /* open state */
  /* ---------- */
}
.archived-releases .archive-year button.toggle {
  position: relative;
  display: block;
  margin: 0;
  padding: 13px 6px;
  width: 100%;
  border: none;
  background-color: #ffffff;
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #9b9b9b;
  line-height: 1;
  text-align: left;
}
.archived-releases .archive-year button.toggle:after {
  content: "\002b";
  position: absolute;
  top: 50%;
  right: 6px;
  display: block;
  margin-top: -17px;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}
.archived-releases .archive-year > .inner {
  display: none;
}
.archived-releases .archive-year > .inner .content-holder {
  padding: 13px 6px 26px 6px;
  font-size: 14px;
  line-height: 1.14;
}
.archived-releases .archive-year > .inner .content-holder ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.archived-releases .archive-year > .inner .content-holder ul li {
  display: table;
  width: 100%;
  margin: 0;
  padding: 0;
}
.archived-releases .archive-year > .inner .content-holder ul li + li {
  margin-top: 16px;
}
.archived-releases .archive-year > .inner .content-holder ul li > * {
  display: table-cell;
  vertical-align: top;
}
.archived-releases .archive-year > .inner .content-holder ul li > *.date {
  width: 80px;
}
.archived-releases .archive-year > .inner .content-holder ul li a {
  color: #4a4a4a;
  font-weight: 500;
}
.archived-releases .archive-year.open button.toggle:after {
  content: "\2212";
}

/*
  ==========================
  media release article
  ==========================
*/
.dated-page-article-metadata {
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.dated-page-back-link {
  position: relative;
  padding: 0 0 0 320px;
  font-family: "Rubik", sans-serif;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 500;
}
.dated-page-back-link:before {
  position: absolute;
  top: 4px;
  left: 0;
  width: 300px;
  height: 6px;
  background-color: #cccccc;
  content: "";
}
.dated-page-back-link a {
  color: #4a4a4a;
  text-decoration: none;
}
.dated-page-back-link a:hover,
.dated-page-back-link a:focus {
  text-decoration: underline;
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  /*
    ==========================
    latest releases
    ==========================
  */
  .latest-releases .media-release {
    padding: 0 0 14px 0;
    background-color: #ffffff;
  }
  .latest-releases .media-release > .inner > * {
    padding: 0 20px;
    /* image layout and size */
    /* --------------------- */
  }
  .latest-releases .media-release > .inner > *.image-holder {
    width: auto;
  }
  /*
    ==========================
    media release article
    ==========================
  */
  .dated-page-back-link {
    padding: 0;
  }
  .dated-page-back-link:before {
    content: none;
    display: none;
  }
}

/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
/*
  ===============================================================================
  RESOURCE INDEX STYLES
  ===============================================================================
*/
/*
  ==========================
  search form
  ==========================
*/
.ResourceIndexPage #main-page-area {
  padding-top:140px; 
  
}
  
  .ResourceIndexPage {
  /* clear filters button */
  /* -------------------- */
}
.ResourceIndexPage .form-section {
  font-family: "Rubik", sans-serif;
  /* key word input field */
  /* -------------------- */
  /* filters */
  /* ------- */
  /* action button */
  /* ------------- */
}
.ResourceIndexPage .form-section > .wrapper {
  padding-bottom: 34px;
}
.ResourceIndexPage .form-section form {
  position: relative;
  margin: 0;
  padding: 0;
}
.ResourceIndexPage .form-section .field.text label.left {
  position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  clip: rect(0, 0, 0, 0);
  border: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.ResourceIndexPage .form-section .field.text input.text {
  display: block;
  width: 100%;
  height: 52px;
  padding: 4px 8px;
  border: solid 1px #979797;
  font-family: "Rubik", sans-serif;
  font-size: 24px;
}
.ResourceIndexPage .form-section .fieldholder-small.optionset {
  float: left;
  width: 30%;
  padding: 10px 0 0 0;
  margin-top:0!important;
}


.ResourceIndexPage .form-section #topicFilterHeader {
  display:inline-block;
  margin-right:100%;
  font-size: 12px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  color: #4a4a4a;
  position:relative;
  width:auto;
  white-space: nowrap;
  cursor:pointer;
}
.ResourceIndexPage .form-section #topicFilterHeader:after {
  content:'\2303';
  position:absolute;
  right:-20px;
  top:-5px;
  transform: rotate(-180deg);
  font-size: 14px;
}

.ResourceIndexPage .form-section #TopicList1TopicList2lfclear {
  display:none;
}
.ResourceIndexPage .form-section.has-topics #TopicList1TopicList2lfclear, .ResourceIndexPage .form-section #TopicList1TopicList2lfclear.open {
  display:block;
}

  

.ResourceIndexPage .form-section .fieldholder-small.optionset#TopicList1,
.ResourceIndexPage .form-section .fieldholder-small.optionset#TopicList2 {
  width: 24%;  
}
.ResourceIndexPage .form-section .fieldholder-small.optionset > label {
  font-size: 12px;
  font-weight: 500;
}
.ResourceIndexPage .form-section .fieldholder-small.optionset ul {
  font-size: 12px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-top: 5px;
}
.ResourceIndexPage .form-section .fieldholder-small.optionset ul li {
  margin: 0;
  padding: 0;
  line-height: 1.9;
}
.ResourceIndexPage .form-section .fieldholder-small.optionset ul li input {
  vertical-align: middle;
}
.ResourceIndexPage .form-section .fieldholder-small.optionset ul li label {
  cursor: pointer;
  vertical-align: middle;
}
.ResourceIndexPage .form-section .btn-toolbar button {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  overflow: hidden;
  margin: 1px 1px 1px 0;
  border: none;
  background-color: #e8665c;
  height: 50px;
  width: 50px;
  color: #4a4a4a;
  text-align: center;
}
.ResourceIndexPage .form-section .btn-toolbar button > span {
  position: absolute;
  z-index: -1;
  display: inline-block;
  width: 0;
  height: 0;
  visibility: hidden;
  opacity: 0;
}
.ResourceIndexPage .form-section .btn-toolbar button:before {
  content: "";
  display: block;
  width: 33px;
  height: 33px;
  background: url(../../../themes/catholic/images/icon-loupe-desktop-white@2x.png)
    center no-repeat transparent;
  background-size: contain;
}


.ResourceIndexPage .clear-filters {  
  position: absolute;
  top: 140px;
  right:0;
  margin: 0;
  padding: 14px 12px 12px 12px;
  min-height: 0;
  background: transparent;
  border: solid 3px #6a696f;
  color: #6a696f;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  text-align: center;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  -webkit-transition: background 0.3s, color 0.3s;
  -moz-transition: background 0.3s, color 0.3s;
  -ms-transition: background 0.3s, color 0.3s;
  -o-transition: background 0.3s, color 0.3s;
  transition: background 0.3s, color 0.3s;
}
.ResourceIndexPage .clear-filters:after {
  display: none;
  content: "";
}
.ResourceIndexPage .clear-filters:hover,
.ResourceIndexPage .clear-filters:focus {
  background-color: #6a696f;
  color: #cccccc !important;
  text-decoration: none;
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  /*
    ==========================
    search form
    ==========================
  */
  .ResourceIndexPage {
    /* clear filters button */
    /* -------------------- */
  }
  .ResourceIndexPage .form-section {
    /* key word input field */
    /* -------------------- */
    /* filters */
    /* ------- */
    /* action button */
    /* ------------- */
  }
  .ResourceIndexPage .form-section .field.text input.text {
    height: 42px;
    font-size: 20px;
  }
  .ResourceIndexPage .form-section .field.optionset {
    width: 100%;
    padding-right: 0%;
  }
  .ResourceIndexPage .form-section .field.optionset#TopicList1 {
    padding-right: 10%;
  }
  .ResourceIndexPage .form-section .field.optionset#TopicList1,
  .ResourceIndexPage .form-section .field.optionset#TopicList2 {
    width: 50%;
    
  }
  .ResourceIndexPage .form-section .field.optionset ul {
  
  }
  .ResourceIndexPage .form-section .field.optionset ul li + li {
    margin-top: 5px;
  }
  .ResourceIndexPage .form-section .btn-toolbar button {
    height: 40px;
    width: 40px;
  }
  .ResourceIndexPage .form-section .btn-toolbar button:before {
    width: 28px;
    height: 28px;
  }
  .ResourceIndexPage .clear-filters {
    float: left;
    bottom: 0;
    display: block;
    margin-top: 20px;
    font-size: 12px;
    padding: 10px 12px 8px 12px;
  }
}

/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
/*
  ===============================================================================
  SLIDER CAROUSEL
  ===============================================================================
*/
/*
  ==========================
  layout
  ==========================
*/
.slider {
  height: 630px;
  overflow: hidden;
  /* slides */
  /* ------ */
  /* bullets */
  /* ------- */
  /* arrows / controls */
  /* ----------------- */
}
.slider .royalSlider {
  width: auto;
  height: 630px;
  position: relative;
  direction: ltr;
}
.slider .slide img {
  max-width: none !important;
  width: 100%;
  height: auto;
}
.slider .slide .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  height: 630px;
  font-family: "Rubik", sans-serif;
  font-size: 24px;
  line-height: 1.3;
}
.slider .slide .content.fixed-bottom {
  top: auto;
  bottom: 0;
  height: auto;
  padding: 30px 0 44px 0;
  background-color: rgba(74, 74, 74, 0.6);
}
.slider .slide .content.fixed-bottom .inner-content .read-more-holder {
  width: 1px;
  padding-top: 4px;
}
.slider
  .slide
  .content.fixed-bottom
  .inner-content
  .read-more-holder.offset-top {
  padding-top: 26px;
}
.slider
  .slide
  .content.fixed-bottom
  .inner-content
  .read-more-holder
  .read-more {
  white-space: nowrap;
}
.slider .slide .content > .wrapper {
  position: relative;
  height: 100%;
}
.slider .slide .content .rsABlock,
.slider .slide .content .inner-content {
  /* content position */
  /* ---------------- */
  /* content colour */
  /* -------------- */
}
.slider .slide .content .rsABlock.top-left,
.slider .slide .content .inner-content.top-left {
  top: 100px;
  left: 20px;
  margin-left: 8.33%;
}
.slider .slide .content .rsABlock.top-right,
.slider .slide .content .inner-content.top-right {
  top: 100px;
  left: auto;
  right: 20px;
  margin-right: 8.33%;
  text-align: right;
}
.slider .slide .content .rsABlock.bottom-right,
.slider .slide .content .inner-content.bottom-right {
  top: auto;
  left: auto;
  bottom: 40px;
  right: 20px;
  margin-right: 8.33%;
  text-align: right;
}
.slider .slide .content .rsABlock.light,
.slider .slide .content .inner-content.light {
  color: #ffffff;
}
.slider .slide .content .rsABlock.light *,
.slider .slide .content .inner-content.light * {
  color: #ffffff;
}
.slider .slide .content h2 {
  font-size: 36px;
}
.slider .slide .content b {
  font-weight: 500;
}
.slider .slide a.read-more {
  position: static;
  display: inline-block;
  margin: 0;
  padding: 13px 18px 12px 18px;
  min-height: 0;
  border: solid 3px #f4ebc9;
  background-color: transparent;
  color: #f4ebc9 !important;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  text-align: center;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  -webkit-transition: background 0.3s, color 0.3s;
  -moz-transition: background 0.3s, color 0.3s;
  -ms-transition: background 0.3s, color 0.3s;
  -o-transition: background 0.3s, color 0.3s;
  transition: background 0.3s, color 0.3s;
}
.slider .slide a.read-more:before,
.slider .slide a.read-more:after {
  content: none !important;
  display: none !important;
}
.slider .slide a.read-more:hover,
.slider .slide a.read-more:focus {
  background-color: #f4ebc9;
  color: #4a4a4a !important;
  text-decoration: none;
}
.slider .rsBullets {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  height: 12px;
  margin: 0;
  padding: 0;
  background-color: transparent;
  text-align: center;
  font-size: 1px;
  line-height: 1;
}
.slider .rsBullets .rsBullet {
  display: inline-block;
  margin: 0 5px;
  padding: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #f4ebc9;
  font-size: 1px;
  line-height: 1;
  opacity: 0.6;
}
.slider .rsBullets .rsBullet.rsNavSelected {
  opacity: 1;
}
.slider .rsArrow {
  position: absolute;
  top: 50%;
}
.slider .rsArrow .rsArrowIcn {
  display: block;
  margin-top: -44px;
  font-family: san-serif;
  font-weight: lighter;
  opacity: 0.65;
}
.slider .rsArrow .rsArrowIcn:before {
  display: block;
  font-size: 88px;
  line-height: 1;
  color: #ffffff;
}
.slider .rsArrow.rsArrowLeft {
  left: 40px;
}
.slider .rsArrow.rsArrowLeft .rsArrowIcn:before {
  content: "\3008";
}
.slider .rsArrow.rsArrowRight {
  right: 40px;
}
.slider .rsArrow.rsArrowRight .rsArrowIcn:before {
  content: "\3009";
}

/* v1.0.6 */
/* Core RS CSS file. 95% of time you shouldn't change anything here. */
.rsWebkit3d .rsSlide,
.rsWebkit3d .rsContainer,
.rsWebkit3d .rsThumbs,
.rsWebkit3d .rsPreloader,
.rsWebkit3d img,
.rsWebkit3d .rsOverflow,
.rsWebkit3d .rsBtnCenterer,
.rsWebkit3d .rsAbsoluteEl,
.rsWebkit3d .rsABlock,
.rsWebkit3d .rsLink {
  -webkit-backface-visibility: hidden;
}

.rsFade.rsWebkit3d .rsSlide,
.rsFade.rsWebkit3d img,
.rsFade.rsWebkit3d .rsContainer {
  -webkit-transform: none;
}

.rsOverflow {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  float: left;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.rsVisibleNearbyWrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  left: 0;
  top: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.rsVisibleNearbyWrap .rsOverflow {
  position: absolute;
  left: 0;
  top: 0;
}

.rsContainer {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.rsArrow,
.rsThumbsArrow {
  cursor: pointer;
}

.rsThumb {
  float: left;
  position: relative;
}

.rsArrow,
.rsNav,
.rsThumbsArrow {
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.rsHidden {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.3s, opacity 0.3s;
  -moz-transition: visibility 0s 0.3s, opacity 0.3s;
  -o-transition: visibility 0s 0.3s, opacity 0.3s;
  transition: visibility 0s 0.3s, opacity 0.3s;
}

.rsGCaption {
  width: 100%;
  float: left;
  text-align: center;
}

/* Fullscreen options, very important ^^ */
.royalSlider.rsFullscreen {
  position: fixed !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2147483647 !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
}

.royalSlider .rsSlide.rsFakePreloader {
  opacity: 1 !important;
  -webkit-transition: 0s;
  -moz-transition: 0s;
  -o-transition: 0s;
  transition: 0s;
  display: none;
}

.rsSlide {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.royalSlider.rsAutoHeight,
.rsAutoHeight .rsSlide {
  height: auto;
}

.rsContent {
  width: 100%;
  height: 100%;
  position: relative;
}

.rsPreloader {
  position: absolute;
  z-index: 0;
}

.rsNav {
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  user-select: none;
}

.rsNavItem {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.25);
}

.rsThumbs {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  float: left;
  z-index: 22;
}

.rsTabs {
  float: left;
  background: none !important;
}

.rsTabs,
.rsThumbs {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.rsVideoContainer {
  width: auto;
  height: auto;
  line-height: 0;
  position: relative;
}

.rsVideoFrameHolder {
  position: absolute;
  left: 0;
  top: 0;
  background: #141414;
  opacity: 0;
  -webkit-transition: 0.3s;
}

.rsVideoFrameHolder.rsVideoActive {
  opacity: 1;
}

.rsVideoContainer iframe,
.rsVideoContainer video,
.rsVideoContainer embed,
.rsVideoContainer .rsVideoObj {
  position: absolute;
  z-index: 50;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* ios controls over video bug, shifting video */
.rsVideoContainer.rsIOSVideo iframe,
.rsVideoContainer.rsIOSVideo video,
.rsVideoContainer.rsIOSVideo embed {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 44px;
}

.rsABlock {
  left: 0;
  top: 0;
  position: absolute;
  z-index: 15;
}

img.rsImg {
  max-width: none;
}

.grab-cursor {
  cursor: move;
}

.grabbing-cursor {
  cursor: move;
}

.rsNoDrag {
  cursor: auto;
}

.rsLink {
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 20;
  background-color: pink;
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
@media screen and (max-width: 860px) {
  /*
    ==========================
    layout
    ==========================
  */
  .slider {
    height: 520px;
    /* slides */
    /* ------ */
    /* arrows / controls */
    /* ----------------- */
  }
  .slider .royalSlider {
    height: 520px;
  }
  .slider .slide .content {
    height: 520px;
  }
  .slider .slide .content.fixed-bottom .inner-content {
    width: auto;
  }
  .slider .slide .content .rsABlock,
  .slider .slide .content .inner-content {
    width: 46%;
    margin-top: 0 !important;
    /* content position */
    /* ---------------- */
  }
  .slider .slide .content .rsABlock.top-left,
  .slider .slide .content .inner-content.top-left {
    top: 70px;
    left: 20px;
    margin-left: 0;
  }
  .slider .slide .content .rsABlock.top-right,
  .slider .slide .content .inner-content.top-right {
    top: 70px;
    right: 20px;
    margin-right: 0;
  }
  .slider .slide .content .rsABlock.bottom-right,
  .slider .slide .content .inner-content.bottom-right {
    bottom: 40px;
    right: 20px;
    margin-right: 0;
  }
  .slider .slide .content h2 {
    font-size: 32px;
  }
  .slider .rsArrow,
  .slider .rsArrow[style] {
    display: none !important;
  }
}

/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  /*
    ==========================
    layout
    ==========================
  */
  .slider {
    height: 320px;
    /* slides */
    /* ------ */
  }
  .slider .royalSlider {
    height: 320px;
  }
  .slider .slide .content {
    height: 320px;
    font-size: 15px;
  }
  .slider .slide .content.fixed-bottom {
    padding: 20px 0;
  }
  .slider .slide .content.fixed-bottom .inner-content {
    width: auto;
    margin-top: 0 !important;
  }
  .slider .slide .content.fixed-bottom .inner-content .read-more-holder {
    width: auto;
    padding-top: 0;
    margin-top: 5px;
  }
  .slider
    .slide
    .content.fixed-bottom
    .inner-content
    .read-more-holder.offset-top {
    padding-top: 0;
  }
  .slider .slide .content .rsABlock,
  .slider .slide .content .inner-content {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: auto;
    height: auto;
    margin-top: 56px !important;
  }
  .slider .slide .content .rsABlock + .rsABlock,
  .slider .slide .content .inner-content + .rsABlock {
    margin-top: 12px !important;
  }
  .slider .slide .content h2 {
    font-size: 24px;
  }
  .slider .slide .content a.read-more {
    padding: 10px 14px 9px 14px;
    font-size: 12px;
  }
  .slider .rsBullets {
    display: none;
  }
}

/*
  ===============================================================================
  IN PAGE SMALL CAROUSEL
  ===============================================================================
*/
/*
  ==========================
  layout
  ==========================
*/
.in-page-carousel {
  overflow: hidden;
  width: auto;
  position: relative;
  direction: ltr;
  /* slides */
  /* ------ */
  /* thumbnails */
  /* ---------- */
}
.in-page-carousel .simpleimageelement > .inner {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}
.in-page-carousel .simpleimageelement > .inner > * {
  display: table-cell;
  margin: 0;
  padding: 0;
  vertical-align: top;
}
.in-page-carousel .simpleimageelement > .inner > *.image-holder {
  width: 300px;
}
.in-page-carousel .simpleimageelement > .inner > *.image-holder img,
.in-page-carousel .simpleimageelement > .inner > *.image-holder .rsImg {
  display: block;
  margin: 0 !important;
  padding: 0;
  width: 100%;
}
.in-page-carousel .simpleimageelement > .inner > *.content-holder {
  padding-left: 20px;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  line-height: 1.14;
}
.in-page-carousel .rsThumbsHor {
  height: 48px;
  width: 100%;
  margin: 10px 0 0 0;
}
.in-page-carousel .rsThumbsHor .rsThumbsContainer {
  position: relative;
  height: 100%;
}
.in-page-carousel .rsThumbsHor .rsThumb {
  width: auto;
  height: 100%;
  background-color: #000000;
}
.in-page-carousel .rsThumbsHor .rsThumb img {
  display: block;
  margin: 0;
  padding: 0;
  width: auto;
  height: 100%;
  opacity: 0.6;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.in-page-carousel .rsThumbsHor .rsThumb:hover img,
.in-page-carousel .rsThumbsHor .rsThumb.rsNavSelected img {
  opacity: 1;
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  /*
    ==========================
    layout
    ==========================
  */
  .in-page-carousel {
    /* slides */
    /* ------ */
  }
  .in-page-carousel .simpleimageelement > .inner {
    display: block;
    width: auto;
  }
  .in-page-carousel .simpleimageelement > .inner > * {
    display: block;
  }
  .in-page-carousel .simpleimageelement > .inner > *.image-holder {
    width: 100%;
  }
  .in-page-carousel .simpleimageelement > .inner > *.content-holder {
    padding-top: 10px;
    padding-left: 0;
  }
}

/*
  ===============================================================================
  SOCIAL MEDIA FEEDS PAGE STYLES
  ===============================================================================
*/
.SocialMediaFeedPage {
  background-color: #f5f5f5;
}

/*
  ==========================
  social feeds
  ==========================
*/
.feed-wrapper {
  margin-left: -10px;
  margin-right: -10px;
  /* twitter tweets */
  /* -------------- */
}
.feed-wrapper > .inner > * {
  width: 50%;
  padding: 0 10px;
  margin-bottom: 20px;
}
.feed-wrapper > .inner > *.feed-sizer {
  margin: 0;
}
.feed-wrapper .twitter_tweet > iframe,
.feed-wrapper .twitter_tweet > iframe[style] {
  width: 100% !important;
  margin: 0 !important;
}

/*
  ==========================
  follow us buttons
  ==========================
*/
.social-follow-buttons > div + div {
  margin-top: 20px;
}

.social-follow-buttons .button:after {
  margin-top: -17px;
  font-family: FontAwesome;
  font-size: 34px;
}

.social-follow-buttons .button.facebook:after {
  content: "\f09a";
}

.social-follow-buttons .button.twitter:after {
  content: "\f099";
}

/*
  ==========================
  dioceses links
  ==========================
*/
.dioceses-social {
  margin-top: 32px;
}
.dioceses-social table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  border-top: solid 1px #cccccc;
}
.dioceses-social table td {
  border-bottom: solid 1px #cccccc;
  padding: 8px 10px;
  vertical-align: middle;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  font-weight: 500;
}
.dioceses-social table td:first-child {
  padding-left: 0;
}
.dioceses-social table td:last-child {
  padding-right: 0;
}
.dioceses-social table td.icon-cell {
  width: 1%;
}
.dioceses-social table td.icon-cell a {
  display: block;
  font-family: FontAwesome;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: #4a4a4a;
  text-decoration: none;
}
.dioceses-social table td.icon-cell a:before {
  display: block;
}
.dioceses-social table td.icon-cell a.blog:before {
  content: "\f0e5";
}
.dioceses-social table td.icon-cell a.facebook:before {
  content: "\f09a";
}
.dioceses-social table td.icon-cell a.twitter:before {
  content: "\f099";
}
.dioceses-social table td.icon-cell a:hover,
.dioceses-social table td.icon-cell a:focus {
  color: #589cdd;
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  /*
    ==========================
    social feeds
    ==========================
  */
  .feed-wrapper {
    margin-left: -20px;
    margin-right: -20px;
  }
  .feed-wrapper > .inner > * {
    float: none;
    width: auto;
    padding: 0;
  }
  .feed-wrapper > .inner > *:nth-child(2n) {
    float: none;
  }
  .feed-wrapper > .inner > *:nth-child(2n + 3) {
    clear: none;
  }
  /*
    ==========================
    follow us buttons
    ==========================
  */
  .social-follow-buttons {
    margin-top: 32px;
  }
}

/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
/*
  ===============================================================================
  STATEMENTS INDEX PAGE STYLES
  ===============================================================================
*/
.StatementIndexPage {
  /*
    ==========================
    search form
    ==========================
  */
}
.StatementIndexPage .form-section {
  font-family: "Rubik", sans-serif;
  /* key word input field */
  /* -------------------- */
  /* action button */
  /* ------------- */
}
.StatementIndexPage .form-section form {
  position: relative;
  margin: 0;
  padding: 0;
}
.StatementIndexPage .form-section .field.text label.left {
  position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  clip: rect(0, 0, 0, 0);
  border: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.StatementIndexPage .form-section .field.text input.text {
  display: block;
  width: 100%;
  height: 52px;
  padding: 4px 8px;
  border: solid 1px #979797;
  font-family: "Rubik", sans-serif;
  font-size: 24px;
}
.StatementIndexPage .form-section .btn-toolbar button {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  overflow: hidden;
  margin: 1px 1px 1px 0;
  border: none;
  background-color: #cccccc;
  height: 50px;
  width: 50px;
  color: #4a4a4a;
  text-align: center;
}
.StatementIndexPage .form-section .btn-toolbar button > span {
  position: absolute;
  z-index: -1;
  display: inline-block;
  width: 0;
  height: 0;
  visibility: hidden;
  opacity: 0;
}
.StatementIndexPage .form-section .btn-toolbar button:before {
  content: "";
  display: block;
  width: 33px;
  height: 33px;
  background: url(../../../themes/catholic/images/icon-loupe-desktop@2x.png)
    center no-repeat transparent;
  background-size: contain;
}

/*
  ==========================
  statements
  ==========================
*/
.statements {
  font-family: "Rubik", sans-serif;
}
.statements .statement-category {
  /* open state */
  /* ---------- */
  /* toggle */
  /* ------ */
  /* spacing */
  /* ------- */
}
.statements .statement-category .statement {
  margin-left: -10px;
  margin-right: -10px;
  /* spacing */
  /* ------- */
  /* hide statements when more than 3 */
  /* -------------------------------- */
}
.statements .statement-category .statement > .inner {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}
.statements .statement-category .statement > .inner > * {
  display: table-cell;
  padding: 0 10px;
  vertical-align: top;
}
.statements .statement-category .statement .date-info {
  width: 22.22%;
}
.statements .statement-category .statement + .statement {
  margin-top: 12px;
}
.statements .statement-category .statement:nth-child(n + 4) {
  display: none;
}
.no-js .statements .statement-category .statement:nth-child(n + 4) {
  display: block;
}
.statements .statement-category.open .statement:nth-child(n + 4) {
  display: block;
}
.statements .statement-category .more-toggle {
  display: block;
}
.no-js .statements .statement-category .more-toggle {
  display: none;
}
.statements .statement-category + .statement-category {
  margin-top: 32px;
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  /*
    ==========================
    search form
    ==========================
  */
  .StatementIndexPage .form-section {
    /* key word input field */
    /* -------------------- */
    /* action button */
    /* ------------- */
  }
  .StatementIndexPage .form-section .field.text input.text {
    height: 42px;
    font-size: 20px;
  }
  .StatementIndexPage .form-section .btn-toolbar button {
    height: 40px;
    width: 40px;
  }
  .StatementIndexPage .form-section .btn-toolbar button:before {
    width: 28px;
    height: 28px;
  }
  /*
    ==========================
    layout
    ==========================
  */
  .statements .statement-category .statement {
    font-size: 14px;
  }
  .statements .statement-category .statement .date-info {
    width: 34%;
  }
}

/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
/*
  ===============================================================================
  SEARCH PAGE STYLES
  ===============================================================================
*/
.SearchPage {
  /*
    ==========================
    search form
    ==========================
  */
}
.SearchPage .form-section {
  font-family: "Rubik", sans-serif;
  /* key word input field */
  /* -------------------- */
  /* action button */
  /* ------------- */
}
.SearchPage .form-section form {
  position: relative;
  margin: 0;
  padding: 0;
}
.SearchPage .form-section .field.text label.left {
  position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  clip: rect(0, 0, 0, 0);
  border: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.SearchPage .form-section .field.text input.text {
  display: block;
  width: 100%;
  height: 52px;
  padding: 4px 8px;
  border: solid 1px #979797;
  font-family: "Rubik", sans-serif;
  font-size: 24px;
}
.SearchPage .form-section button {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  overflow: hidden;
  margin: 1px 1px 1px 0;
  border: none;
  background-color: #cccccc;
  height: 50px;
  width: 50px;
  color: #4a4a4a;
  text-align: center;
}
.SearchPage .form-section button > span {
  position: absolute;
  z-index: -1;
  display: inline-block;
  width: 0;
  height: 0;
  visibility: hidden;
  opacity: 0;
}
.SearchPage .form-section button:before {
  content: "";
  display: block;
  width: 33px;
  height: 33px;
  background: url(../../../themes/catholic/images/icon-loupe-desktop@2x.png)
    center no-repeat transparent;
  background-size: contain;
}

/*
  ===============================================================================
  TABLET
  ===============================================================================
*/
/*
  ===============================================================================
  SMART PHONE
  ===============================================================================
*/
@media screen and (max-width: 580px) {
  /*
    ==========================
    search form
    ==========================
  */
  .SearchPage .form-section {
    /* key word input field */
    /* -------------------- */
    /* action button */
    /* ------------- */
  }
  .SearchPage .form-section .field.text input.text {
    height: 42px;
    font-size: 20px;
  }
  .SearchPage .form-section button {
    height: 40px;
    width: 40px;
  }
  .SearchPage .form-section button:before {
    width: 28px;
    height: 28px;
  }
}

/*
  ===============================================================================
  INTERNET EXPLORER HACKS / FIXES
  ===============================================================================
*/
img {height: auto;}




/*
  ===============================================================================
  cookie consent
  ===============================================================================
*/
.cc-color-override-2120296288.cc-window.cc-banner {padding-top:25px;padding-bottom:25px}
.cc-color-override-2120296288.cc-window.cc-banner .cc-message {
 
  margin-right:6rem;
  font-size: 12px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
}
.cc-color-override-2120296288.cc-window.cc-banner .cc-btn {
  border: 3px solid #f4ebc9;
  padding: 13px 18px 12px 18px;
  text-transform:uppercase;
  line-height: 1;
  font-weight: 500;
  text-align: center;
  letter-spacing: 1.2px;
  font-size: 14px;
  transition: background 0.3s, color 0.3s;
  background-color: transparent;
}
.cc-color-override-2120296288.cc-window.cc-banner .cc-btn:hover {
  background-color: #f4ebc9;
  color:#564c4a;
}
.debug {
  color:yellowgreen;
  font-size:11px;
}


/*
  ===============================================================================
  Curator
  ===============================================================================
*/

#curator-feed {
  margin-left:-12px;
  margin-right:-12px;
}

#curator-feed .crt-post .crt-post-header {
  padding-top: 28px;
  margin: 0 17px;
  color: #2b2b2b;
  position: relative;
  text-align: center;
}
#curator-feed .crt-post-fullname a {
  color: rgb(34, 34, 34);
  text-decoration: none;
}
#curator-feed .crt-post-text, #curator-feed .crt-post-content-text {
  padding: 0 17px 28px;
  color: rgb(34, 34, 34);
  font-size: .8em;
  line-height: 1.2em;
  text-align: left;
  overflow-wrap: break-word;
  word-break: break-word;
}

#curator-feed .crt-post-text a, #curator-feed .crt-post-content-text a{
  color: rgb(153, 153, 153);
}