@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese);
@import url(https://foundry.churchofjesuschrist.org/Foundry/v1/Ensign:Sans:300/css);
@import url(https://foundry.churchofjesuschrist.org/Foundry/v1/Ensign:Sans:Italic:300/css);
@import url(https://foundry.churchofjesuschrist.org/Foundry/v1/Ensign:Sans:400/css);
@import url(https://foundry.churchofjesuschrist.org/Foundry/v1/Ensign:Sans:Italic:400/css);
@import url(https://foundry.churchofjesuschrist.org/Foundry/v1/Ensign:Sans:600/css);
@import url(https://foundry.churchofjesuschrist.org/Foundry/v1/Ensign:Sans:Italic:600/css);
@import url(https://foundry.churchofjesuschrist.org/Foundry/v1/Ensign:Sans:700/css);
@import url(https://foundry.churchofjesuschrist.org/Foundry/v1/Ensign:Sans:Italic:700/css);
@import url(https://foundry.churchofjesuschrist.org/Foundry/v1/Ensign:Serif:400/css);
@import url(https://foundry.churchofjesuschrist.org/Foundry/v1/Ensign:Serif:Italic:400/css);
@import url(https://foundry.churchofjesuschrist.org/Foundry/v1/Ensign:Serif:700/css);
@import url(https://foundry.churchofjesuschrist.org/Foundry/v1/Ensign:Serif:Italic:700/css);
:root {
    --formalHeading: normal normal 400 var(--fontSize42)/var(--lineHeightTight) var(--serif);
    --h1: normal normal 700 var(--fontSize42)/var(--lineHeightTight) var(--sans);
    --h2: normal normal 300 var(--fontSize32)/var(--lineHeightTight) var(--sans);
    --h3: normal normal 700 var(--fontSize20)/var(--lineHeightTight) var(--sans);
    --h4: normal normal 600 var(--fontSize18)/var(--lineHeightTight) var(--sans);
    --h5: normal normal 700 var(--fontSize14)/var(--lineHeightTight) var(--sans);
}
:root {
    /* primary */
    --theme-color-100: var(--blue30);
    --link-color: var(--blue40);

    /* secondary */

        --theme-color-200: var(--green);
        --theme-color-300: var(--blue10);
        --theme-color-400: var(--green-300);
        --theme-color-500: var(--blue40);

}
@font-face{font-display: swap;font-family:"Zoram";font-weight:300;font-style:normal;src: url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-Light-Normal.woff2") format("woff2"), url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-Light-Normal.woff") format("woff");}
@font-face{font-display: swap;font-family:"Zoram";font-weight:300;font-style:italic;src: url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-Light-Italic.woff2") format("woff2"), url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-Light-Italic.woff") format("woff");}
@font-face{font-display: swap;font-family:"Zoram";font-weight:400;font-style:normal;src: url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-Regular-Normal.woff2") format("woff2"), url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-Regular-Normal.woff") format("woff");}
@font-face{font-display: swap;font-family:"Zoram";font-weight:400;font-style:italic;src: url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-Regular-Italic.woff2") format("woff2"), url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-Regular-Italic.woff") format("woff");}
@font-face{font-display: swap;font-family:"Zoram";font-weight:500;font-style:normal;src: url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-SemiBold-Normal.woff2") format("woff2"), url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-SemiBold-Normal.woff") format("woff");}
@font-face{font-display: swap;font-family:"Zoram";font-weight:600;font-style:normal;src: url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-SemiBold-Normal.woff2") format("woff2"), url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-SemiBold-Normal.woff") format("woff");}
@font-face{font-display: swap;font-family:"Zoram";font-weight:600;font-style:italic;src: url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-SemiBold-Italic.woff2") format("woff2"), url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-SemiBold-Italic.woff") format("woff");}
@font-face{font-display: swap;font-family:"Zoram";font-weight:700;font-style:normal;src: url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-Bold-Normal.woff2") format("woff2"), url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-Bold-Normal.woff") format("woff");}
@font-face{font-display: swap;font-family:"Zoram";font-weight:700;font-style:italic;src: url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-Bold-Italic.woff2") format("woff2"), url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-Bold-Italic.woff") format("woff");}
@font-face{font-display: swap;font-family:"Zoram";font-weight:800;font-style:normal;src: url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-ExtraBold-Normal.woff2") format("woff2"), url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-ExtraBold-Normal.woff") format("woff");}
@font-face{font-display: swap;font-family:"Zoram";font-weight:800;font-style:italic;src: url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-ExtraBold-Italic.woff2") format("woff2"), url("https://edge.ldscdn.org/cdn2/common/fonts/zoram/latest/Zoram-GWebM-ExtraBold-Italic.woff") format("woff");}
@font-face{font-display: swap;font-family:"McKay";font-weight:400;font-style:normal;src: url("https://edge.ldscdn.org/cdn2/common/fonts/mckay/latest/McKay-GWebM-Regular-Normal.woff2") format("woff2"), url("https://edge.ldscdn.org/cdn2/common/fonts/mckay/latest/McKay-GWebM-Regular-Normal.woff") format("woff");}
@font-face{font-display: swap;font-family:"McKay";font-weight:400;font-style:italic;src: url("https://edge.ldscdn.org/cdn2/common/fonts/mckay/latest/McKay-GWebM-Regular-Italic.woff2") format("woff2"), url("https://edge.ldscdn.org/cdn2/common/fonts/mckay/latest/McKay-GWebM-Regular-Italic.woff") format("woff");}
@font-face{font-display: swap;font-family:"McKay";font-weight:500;font-style:normal;src: url("https://edge.ldscdn.org/cdn2/common/fonts/mckay/latest/McKay-GWebM-Regular-Normal.woff2") format("woff2"), url("https://edge.ldscdn.org/cdn2/common/fonts/mckay/latest/McKay-GWebM-Regular-Normal.woff") format("woff");}
@font-face{font-display: swap;font-family:"McKay";font-weight:500;font-style:italic;src: url("https://edge.ldscdn.org/cdn2/common/fonts/mckay/latest/McKay-GWebM-Regular-Italic.woff2") format("woff2"), url("https://edge.ldscdn.org/cdn2/common/fonts/mckay/latest/McKay-GWebM-Regular-Italic.woff") format("woff");}
@font-face{font-display: swap;font-family:"McKay";font-weight:700;font-style:normal;src: url("https://edge.ldscdn.org/cdn2/common/fonts/mckay/latest/McKay-GWebM-Bold-Normal.woff2") format("woff2"), url("https://edge.ldscdn.org/cdn2/common/fonts/mckay/latest/McKay-GWebM-Bold-Normal.woff") format("woff");}
@font-face{font-display: swap;font-family:"McKay";font-weight:700;font-style:italic;src: url("https://edge.ldscdn.org/cdn2/common/fonts/mckay/latest/McKay-GWebM-Bold-Italic.woff2") format("woff2"), url("https://edge.ldscdn.org/cdn2/common/fonts/mckay/latest/McKay-GWebM-Bold-Italic.woff") format("woff");}









/*@import "@lds/themes/dist/css/common.css";*/
/*@import "@lds/themes/dist/css/international.css";*/
/*@import "@lds/themes/dist/css/lumen.css";*/

body {
    font-size: 18px
}

body div[class*=bc-player-default_default] {
        width: unset;
        height: unset;
    }





.loading-template {
	background: var(--white);
	position: absolute;
    left: 50%
}

.loading-template .loader {
		margin-top: 100px;
		display: flex;
		align-items: center;
		justify-content: center
	}

.loading-template .loader .outerLoader {
			border: 3px solid var(--grey2);
		    border-top: 3px solid var(--blue30);
			border-radius: 50%;
			position: absolute;
		    width: 4vw;
		    height: 4vw;
		    animation: spin 1.5s linear infinite
		}

@media(min-width: 0em) and (max-width: 37.5em) {

.loading-template .loader .outerLoader {
				width: 25vw;
				height: 25vw
		}
			}

.loading-template .loader .innerLoader {
		    border: 6px solid var(--grey2);
		    border-top: 6px solid var(--blue30);
		    border-radius: 50%;
		    width: 8vw;
		    height: 8vw;
		    animation: innerSpin 1.4s linear infinite
		}

@media(min-width: 0em) and (max-width: 37.5em) {

.loading-template .loader .innerLoader {
				width: 19vw;
				height: 19vw
		}
			}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes innerSpin {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}
.site-header {
    position: relative;
}

.sub-nav {
    display: flex;
    justify-content: space-between;
    position: relative;
    background-color: var(--white);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    padding: 1em 2em 0;
    height: 3em
}

@media (max-width: 640px) {

.sub-nav {
        display: block;
        height: 4em;
        padding: 0.7em 0.5em 1em
}

        .sub-nav:before,
        .sub-nav:after {
            content: "";
            display: block;
            height: 40px;
            pointer-events: none;
            position: absolute;
            bottom: 0;
            width: 1.5em;
            z-index: 1;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .sub-nav:before {
            background: linear-gradient(
                to right,
                #ffffff,
                #ffffff 41%,
                rgba(255, 255, 255, 0)
            );
            left: 0;
        }

        .sub-nav:after {
            background: linear-gradient(
                to left,
                #ffffff,
                #ffffff 41%,
                rgba(255, 255, 255, 0)
            );
            right: 0;
        }

        .sub-nav.rightShadow:after {
            opacity: 1;
        }

        .sub-nav.leftShadow:before {
            opacity: 1;
        }
    }

.sub-nav .header {
        font-size: var(--fontSize14);
        color: var(--grey40);
        text-align: left;
        font-weight: 400;
        letter-spacing: 0.025em;
        margin: 0;
        line-height: 1.5em;
        flex: 1 0 auto;
        position: relative;
    }

.sub-nav .title {
        color: var(--grey40);
        font-weight: 600
    }

.sub-nav .title:hover {
            text-decoration: none;
            cursor: pointer;
            color: var(--colorLinkHover);
        }

.sub-nav .list {
        display: flex;
        font-size: var(--fontSize14);
        text-align: right;
        list-style: none;
        padding: 0;
        line-height: 1;
        overflow: hidden;
    }

.sub-nav .retreat::-webkit-scrollbar {
        display: none;
    }

.sub-nav .item {
        display: inline-block;
        margin: 0 0 0 2em;
    }

.sub-nav .link {
        font-size: var(--fontSize13);
        color: var(--grey40);
        padding: 0 0 16px;
        line-height: 1.5em;
        margin: 0 16px;
        border: 0;
        cursor: pointer;
        display: inline-block;
        white-space: nowrap;
        height: 18px;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        outline: transparent
    }

.sub-nav .link:first-child {
            margin-left: 0;
        }

.sub-nav .link:last-child {
            margin-right: 0;
        }

.sub-nav .link a {
            color: var(--grey40)
        }

.sub-nav .link a:hover {
                text-decoration: none;
                color: var(--colorLinkHover);
            }

.sub-nav .link svg {
            vertical-align: middle;
            transition: transform 300ms ease;
            font-size: 0.7rem;
        }

@media (max-width: 640px) {

.sub-nav .link {
            padding: 8px 0 9px;
            font-size: var(--fontSize13)
    }
        }

.sub-nav .link:hover,
        .sub-nav .link:focus {
            color: var(--colorLinkHover);
            text-decoration: none;
        }

.sub-nav .retreat {
        flex: 1 1 100%;
        display: flex;
        overflow-x: scroll;
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
        box-sizing: content-box;
        padding-bottom: 18px;
        height: 100%
    }

@media (max-width: 640px) {

.sub-nav .retreat {
            align-items: center
    }
        }

.sub-nav .navBox {
        list-style: none;
        display: none;
        justify-content: space-between;
        flex-flow: column;
        flex-wrap: wrap;
        text-align: left;
        position: absolute;
        background: var(--white);
        box-shadow: 0 2px 5px 0 rgba(74, 74, 74, 0.1);
        padding: 12px;
        border: 1px solid var(--grey5);
        border-top: none;
        margin-top: 18px;
        cursor: default;
        z-index: 60
    }

.sub-nav .navBox li {
            padding: 10px 15px;
            flex: 0 0 0;
            width: auto;
        }

.sub-nav .navBox a.link {
            border-bottom: 1px solid transparent;
            cursor: pointer;
            display: inline-block;
            padding-bottom: 2px;
            white-space: nowrap;
            height: auto;
            margin: 0
        }

.sub-nav .navBox a.link:hover,
            .sub-nav .navBox a.link:focus {
                text-decoration: none;
            }

.sub-nav .link[data-expanded="true"] svg {
        transform: rotate(180deg);
    }

.sub-nav .link[data-expanded="true"] > div.navBox {
        display: block;
        width: auto;
    }

.sub-nav .container .hide {
        display: none;
    }

.sub-nav span.left {
        display: block;
        position: absolute;
        padding: 0 10px;
        background: hsl(0, 0%, 100%);
        border-right: 1px solid hsl(196, 6%, 66%)
    }

@media (max-width: 640px) {

.sub-nav span.left {
            display: none
    }
        }

.sub-nav span.right {
        display: block;
        position: absolute;
        right: 0;
        padding: 0 10px;
        background: hsl(0, 0%, 100%);
        border-left: 1px solid hsl(196, 6%, 66%)
    }

@media (max-width: 640px) {

.sub-nav span.right {
            display: none
    }
        }

.sub-nav .left::before {
        content: "";
        width: 80px;
        height: 100%;
        background: linear-gradient(
            to left,
            hsla(0, 0%, 100%, 0),
            hsl(0, 0%, 100%)
        );
        left: auto;
        right: -81px;
        display: block;
        position: absolute;
        pointer-events: none;
    }

.sub-nav .right::before {
        content: "";
        width: 80px;
        height: 100%;
        background: linear-gradient(
            to right,
            hsla(0, 0%, 100%, 0),
            hsl(0, 0%, 100%)
        );
        display: block;
        position: absolute;
        left: -81px;
        top: 0;
        pointer-events: none;
    }

.icon-container {
    align-items: center;
    display: inline-block
}

.icon-container.prefix {
        display: inline-flex;
        flex-direction: row-reverse;
    }

.icon-container.suffix {
        display: inline-flex;
    }

.icon-container.above,
    .icon-container.below {
        display: inline-flex;
        text-align: center;
    }

.icon-container.above {
        flex-direction: column-reverse;
    }

.icon-container.below {
        flex-direction: column;
    }

.icon-container .graphic {
        width: 1em;
        height: 1em;
        font-size: 1.25em;
        fill: currentColor;
    }

.icon-container svg {
        display: inline-block;
        vertical-align: text-top;
    }

.icon-container .text {
        position: absolute;
        left: -1000000px;
    }

.icon-container .prefix .text,
    .icon-container .suffix .text,
    .icon-container .above .text,
    .icon-container .below .text {
        position: static;
    }

.icon-container .prefix .text {
        margin-right: 0.2em;
    }

.icon-container .suffix .text {
        margin-left: 0.2em;
    }

.icon-container .screens-active path:nth-child(2) {
        opacity: 0.16;
        fill: currentColor;
    }

.icon-container .facebook.allowColor {
        fill: var(--color-facebook);
    }

.icon-container .instagram.allowColor {
        fill: var(--color-instagram);
    }

.icon-container .pinterest.allowColor {
        fill: var(--color-pinterest);
    }

.icon-container .twitter.allowColor {
        fill: var(--color-twitter);
    }

.icon-container .youtube.allowColor {
        fill: var(--color-google);
    }

/*******

  Zoram (Ensign:Sans)

  *******/

  /*******

  McKay (Ensign:Serif)

  *******/
html {
    font: normal normal 400 var(--fontSizeRoot) / var(--lineHeight) var(--sans);
    -ms-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

html.modal-open,
body.modal-open {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

body {
    color: var(--text120);
    margin: 0;
}

::selection {
    background: #d9f7fc;
}

div, nav, input, select, img {
  box-sizing: border-box;
}

input, select {
  font-size: var(--fontSize16);
}

button {
  font-size: var(--fontSize18);
}

p {
  font-family: var(--serif);
  font-size: var(--fontSize18);
  line-height: var(--lineHeightLoose);
  font-weight: normal;
  letter-spacing: normal;
  margin-block-start: var(--spacing16);
  margin-block-end: var(--spacing16)
}

p img {
    float: left;
    margin-right: var(--spacing24);
    margin-bottom: var(--spacing24);
  }

h1 {
    margin: 0;
    font-family: var(--sans);
    font-style: normal;
    font-weight: 700;
    font-size: var(--fontSize32);
    line-height: var(--lineHeightTight);
    letter-spacing: -0.03125rem;
}

h2 {
    margin: 0;
    font-family: var(--sans);
    font-weight: 300;
    line-height: var(--lineHeightTight);
    font-size: var(--fontSize28);
    margin-top: var(--spacing16);
}

h3 {
    margin: 0;
    font-family: var(--sans);
    font-weight: 700;
    font-size: var(--fontSize20);
    line-height: var(--lineHeightTight);
}

h4 {
    margin: 0;
    font-family: var(--sans);
    font-weight: 600;
    font-size: var(--fontSize18);
    line-height: var(--lineHeightTight);
}

h5 {
    margin: 0;
    font-family: var(--sans);
    font-weight: 700;
    font-size: var(--fontSize14);
    line-height: var(--lineHeightTight);
}

h6 {
    margin: 0;
    font-family: var(--sans);
    font-weight: 400;
    font-size: var(--fontSize13);
    line-height: var(--lineHeightTight);
}

body {
    color: var(--grey40);
}

a {
    color: var(--blue30);
    text-decoration: none
}

a:hover {
        text-decoration: underline;
    }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sans);
    /*margin: 0 0 var(--spacing16);*/
}



h1 {
	font: normal normal normal var(--fontSize42)/var(--line-height-400) var(--sans);
	font-weight: 300;
}

h2 {
    font-size: var(--fontSize28);
    line-height: 1.2;
    font-weight: 100;
}

h3, h4, h5, h6 {
    font-size: var(--fontSize110);
    font-weight: bold;
}

h3 {
    line-height: 1.278;
    letter-spacing: 0.00278em;
    /*text-transform: uppercase;*/
}

h4, h5, h6, {
    line-height: 1.222;
}

dt {
    font-size: var(--fontSize110);
    font-style: italic;
    font-weight: 400;
	line-height: var(--line-height-400);
}

dd {
    margin: 0;
    /*margin-left: var(--spacing64);*/
}

code {
    font-family: var(--mono);
    white-space: pre-wrap;
}

.home-template .title {
        font-size: var(--fontSize42);
    }

.home-template .sectionTitle {
        display: block;
        font: var(--h3);
        margin: var(--spacing64) 0 var(--spacing16)
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.home-template .sectionTitle {
            margin-top: var(--spacing16)
    }
        }

.home-template .conditionalTiles {
        margin: var(--spacing) 0 var(--spacing32);
    }

.home-template .newsSection {
        display: flex;
        justify-content: space-between
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.home-template .newsSection {
            display: block
    }
        }

@media (min-width: 37.5em) and (max-width: 60em) {

.home-template .newsSection {
            display: block
    }
        }

.home-template .newsSubSection {
        width: 48%
    }

.home-template .newsSubSection ul {
            list-style: none;
            padding-left: 0;
        }

.home-template .newsSubSection li {
            border-bottom: 1px solid #ddd;
            padding: 3px 0;
            font-size: var(--fontSize14);
        }

.home-template .newsSubSection .viewAllButton {
            font-size: var(--fontSize13);
        }

@media (min-width: 0em) and (max-width: 37.5em) {

.home-template .newsSubSection {
            margin: var(--spacing64) 0;
            width: 100%
    }
        }

@media (min-width: 37.5em) and (max-width: 60em) {

.home-template .newsSubSection {
            margin: var(--spacing16) 0;
            width: 100%
    }
        }

.home-template .openHouse h3 {
            font-size: var(--fontSize14);
            font-weight: 300;
            font-style: italic;
        }

.home-template .openHouse img {
            flex: 0 0 6em;
            height: var(--spacing);
            /*width: var(--spacing32);*/
            /*margin-right: var(--spacing16);*/
        }

@media (min-width: 0em) and (max-width: 37.5em) {

.home-template .openHouse {
            width: 100%
    }

            .home-template .openHouse img {
                margin-right: 0;
                height: auto !important;
            }
        }

.conditional-tile .title {
        display: block;
        font: var(--h2);
        text-align: center;
        margin: var(--spacing64) 0
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.conditional-tile .title {
            font-size: var(--fontSize32)
    }
        }

@media (min-width: 37.5em) and (max-width: 60em) {

.conditional-tile .title {
            font-size: var(--fontSize32)
    }
        }

.conditional-tile .tiles {
        display: flex;
        justify-content: space-between;
        width: 73vw;
        margin: 0 auto
    }

@media (min-width: 0em) and (max-width: 45em) {

.conditional-tile .tiles {
            width: 75vw;
            flex-wrap: wrap
    }
        }

@media (min-width: 37.5em) and (max-width: 60em) {

.conditional-tile .tiles {
            width: 80vw
    }
        }

.conditional-tile .tile {
        width: 25vw;
        text-align: center;
        cursor: pointer
    }

@media (min-width: 0em) and (max-width: 45em) {

.conditional-tile .tile {
            width: 35vw
    }
        }

.conditional-tile .tile span svg {
            width: 85px; /* to allow centering in IE & Edge */
            height: auto;
            transition: color 300ms ease
        }

@media (min-width: 0em) and (max-width: 45em) {

.conditional-tile .tile span svg {
                width: 60px
        }
            }

.conditional-tile .tile span svg:hover {
                color: var(--grey20);
            }

.conditional-tile .tile .imageContainer {
            margin: 0 auto
        }

@media (min-width: 0em) and (max-width: 45em) {

.conditional-tile .tile .imageContainer {
                height: 3.5rem
        }
            }

.conditional-tile .tile .imageContainer img {
                width: 85px;
                height: 85px;
                object-fit: cover
            }

@media (min-width: 0em) and (max-width: 45em) {

.conditional-tile .tile .imageContainer img {
                    width: 60px;
                    height: 60px
            }
                }

.conditional-tile .tile .tileHeading {
            display: block;
            width: 15vw;
            margin: var(--spacing8) auto;
            text-align: center;
            color: var(--grey30);
            line-height: var(--line-height)
        }

@media (min-width: 0em) and (max-width: 45em) {

.conditional-tile .tile .tileHeading {
                width: 35vw;
                margin-bottom: var(--spacing24)
        }
            }

@keyframes imgLoaded {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.image.loadingDefault:before {
            content: "";
            position: absolute;
            z-index: 16;
            background: var(--grey3);
            /*height: 100%;
		width: 100%;*/
            display: block;
            opacity: 1;
        }

.image.loadingDefault img {
            position: relative;
            z-index: 5;
            opacity: 0;
        }

.image.loadingDark {
        background: black
    }

.image.loadingDark:before {
            content: "";
            position: absolute;
            z-index: 16;
            background: black;
            /*height: 100%;
		width: 100%;*/
            display: block;
            opacity: 1;
        }

.image.loadingDark img {
            position: relative;
            z-index: 5;
            opacity: 0;
        }

.image.loaded {
        position: relative;
        height: 100%
    }

.image.loaded:before {
            content: "";
            position: absolute;
            z-index: 16;
            background: var(--grey3);
            height: 100%;
            width: 100%;
            display: block;
            opacity: 0;
            pointer-events: none;
            animation: imgLoaded 300ms;
        }

.image.loadedDark {
        position: relative;
        height: 100%
    }

.image.loadedDark:before {
            content: "";
            position: absolute;
            z-index: 16;
            background: black;
            height: 100%;
            width: 100%;
            display: block;
            opacity: 0;
            animation: imgLoaded 300ms;
        }

.image .wrapper {
        margin: 0;
        min-height: 50px;
        position: relative;
    }

.image .copyright {
        bottom: 6px;
        color: var(--white);
        font-size: var(--fontSize13);
        left: 8px;
        line-height: var(--line-height-400);
        position: absolute;
    }

.image .img {
        max-width: 100%
    }

.image .img:before {
            background: var(--grey3);
        }

.image .placeholder {
        background: var(--grey10);
        width: 100%;
        max-height: 200px;
    }

@keyframes geo-fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes geo-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.geo-location {
    background: var(--white);
    padding: 0.5em 2em 4em;
    border: 1px solid var(--grey3);
    border-radius: 0 0 2px 2px;
    width: 500px;
    position: fixed;
    top: -800px;
    left: 50%;
    margin-left: -250px;
    box-shadow: 0px 2px 5px rgba(74, 74, 74, 0.1);
    content: "";
    transition: all 500ms;
    z-index: 1100;
    display: none
}

@media (min-width: 0em) and (max-width: 37.5em) {

.geo-location {
        width: 90vw;
        margin-left: -45vw
}
    }

.geo-location .toggleButton {
        padding: 1em;
        margin: 2em;
        border-radius: 5px;
        background: #666;
        color: white;
        font-weight: bold;
    }

.geo-location.modalVisible {
        top: -5px;
    }

.geo-location .fade {
        animation-name: geo-fade;
        animation-duration: 500ms;
    }

.geo-location .loader {
        border: 8px solid #f3f3f3; /* Light grey */
        border-top: 8px solid #3498db; /* Blue */
        border-radius: 50%;
        margin: 2em auto 0;
        width: 75px;
        height: 75px;
        animation: geo-spin 2s linear infinite;
    }

.geo-location .modalHeading {
        font: var(--h4);
        display: block;
        margin: 1em 0;
        font-size: 1.5em;
    }

.geo-location .buttonContainer {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 1.5em auto 0;
    }

.geo-location .button {
        padding: 0.75em 1.25em;
        background: var(--white);
        margin: 0 10px;
        color: var(--text120)
    }

.geo-location .button.accept {
            border: 1px solid var(--green);
            border-radius: 5px;
        }

.geo-location .button.deny {
            border: 1px solid var(--danger60);
            border-radius: 5px;
        }

.geo-location .button:hover {
            box-shadow: 0px 1px 2px var(--grey20);
        }

.geo-location .button svg {
            margin-left: 0.5em;
        }

.geo-location .modalUp {
        position: absolute;
        right: 0;
        bottom: 0;
        margin: 1em;
        width: 1.5em;
        height: 1.5em;
        color: var(--blue30);
        border: 1px solid var(--blue30);
        border-radius: 50%;
        cursor: pointer
    }

.geo-location .modalUp svg {
            height: 25px;
            width: 25px;
            position: absolute;
            top: 0;
            left: 0;
        }

/* the `a` is required to override text-deco */
.compact-tile {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  padding: var(--spacing8) 0;
  border-bottom: 1px solid var(--grey3);
  margin-bottom: var(--spacing8)
}
.compact-tile:hover,
  .compact-tile:hover * {
    text-decoration: none;
  }
@media (min-width: 0em) and (max-width: 37.5em) {
.compact-tile img {
      width: 100%;
      height: 30vw;
      object-fit: cover
  }
    }
@media (min-width: 0em) and (max-width: 37.5em) {
.compact-tile {
    display: block
}
  }
@media (min-width: 37.5em) and (max-width: 60em) {
.compact-tile {
    justify-content: initial
}
  }
.compact-tile .image {
    object-fit: cover;
    flex: 0 0 8em;
    height: 6.667em;
    /*width: 8em;*/
  }
.compact-tile .textWrapper {
    flex: 0 0 75%;
    line-height: var(--line-height);
    flex-shrink: 1;
    margin-left: 1em
    /*max-width: 100%;*/

    /*@nest .image + & {
        flex: 0 0 calc( 100% - 9em );
        max-width: calc( 100% - 9em );
    }*/
  }
@media (min-width: 0em) and (max-width: 37.5em) {
.compact-tile .textWrapper {
      width: 100%;
      margin-left: 0;
      margin-top: var(--spacing16)
  }
    }
.compact-tile .title,
  .compact-tile .subtitle {
    color: var(--grey40);
    overflow: hidden;
  }
.compact-tile:hover .title,
  .compact-tile:hover .subtitle {
    text-decoration: none;
  }
.compact-tile .title {
    font-size: var(--fontSize14);
    margin: 0 0 var(--spacing4);
  }
.compact-tile .subtitle {
    /*text-transform: uppercase;*/
    font-size: var(--fontSize13);
    margin: 0;
  }

.frame.narrow {
        margin: var(--spacing64) 5%
    }

@media (min-width: 37.5em) {

.frame.narrow {
            margin: var(--spacing64) 28%
    }
        }

.frame.full {
        margin: var(--spacing64) 5%

        
    }

@media (min-width: 0em) and (max-width: 25em) {

.frame.full {
            margin: var(--spacing32) 5%

        
    }
        }

@media (min-width: 60em) {

.frame.full {
            margin: var(--spacing64) 20%

        
    }
        }

.frame.bleed {
        margin: var(--spacing64) 0;
    }

.frame.bleedTop {
        margin: 0 5%
    }

@media (min-width: 60em) {

.frame.bleedTop {
            margin: 0 10%
    }
        }

.frame.narrowTop {
        margin: var(--spacing16) 5% var(--spacing64) 5%
    }

@media (min-width: 60em) {

.frame.narrowTop {
            margin: var(--spacing16) 10% var(--spacing64) 10%
    }
        }

.tileLayout .tiles {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 1vw
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.tileLayout .tiles {
            display: block
    }
        }

@media (min-width: 37.5) {

.tileLayout .tiles {
            grid-template-columns: repeat(2, 1fr)
    }
        }

@media (min-width: 60em) {

.tileLayout .tiles {
            grid-template-columns: repeat(3, 1fr)
    }
        }

.tileLayout.threeFeature .tiles {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(8, 1fr);
        }

.tileLayout.threeFeature .tile {
            display: block;
            width: 100%;
            grid-column: span 8;
        }

.tileLayout.threeFeature .tile:nth-child(2),
        .tileLayout.threeFeature .tile:nth-child(3) {
            grid-column: span 8
        }

.tileLayout.threeFeature .tile:nth-child(2) > .imageContainer, .tileLayout.threeFeature .tile:nth-child(3) > .imageContainer {
                height: 100%;
            }

.tileLayout.threeFeature .tile:first-child {
            grid-column: span 8;
        }

@media (min-width: 37.5) {
            .tileLayout.threeFeature .tile {
                grid-column: span 4;
            }
            .tileLayout.threeFeature .tile:nth-child(2),
            .tileLayout.threeFeature .tile:nth-child(3) {
                grid-column: span 4;
                grid-row: span 2;
            }
            .tileLayout.threeFeature .tile:first-child {
                grid-column: span 8;
                grid-row: span 4;
            }
        }

@media (min-width: 60em) {
            .tileLayout.threeFeature .tile {
                grid-column: span 2;
            }
            .tileLayout.threeFeature .tile:nth-child(2),
            .tileLayout.threeFeature .tile:nth-child(3) {
                grid-column: span 3;
                grid-row: span 2;
            }
            .tileLayout.threeFeature .tile:first-child {
                grid-column: span 5;
                grid-row: span 4;
                height: 100%;
                min-height: 33vw;
            }
        }

/* now lay it out on the grid */

.tile {
    display: block;
    color: var(--grey40);
    text-decoration: none;
    cursor: pointer;
    padding-bottom: var(--spacing24)
}
.tile:hover {
        text-decoration: none;
    }
@media (min-width: 0em) and (max-width: 37.5em) {
.tile {
        padding-bottom: var(--spacing24)
}
    }
@media (min-width: 37.5em) and (max-width: 60em) {
.tile {
        padding-bottom: var(--spacing24)
}
    }
.tile .textContainer {
        padding: var(--spacing8) var(--spacing4);
        position: relative;
        z-index: 20;
    }
.tile .mediaContainer {
        /*margin-bottom: 0.7em;*/
        width: 100%
    }
.tile .mediaContainer img {
            width: 100%;
            display: block;
        }
.tile .title {
        font-family: var(--sans);
        font-size: var(--fontSize20);
        font-weight: 500;
        /*margin: var(--spacing16) 0;*/
        display: block
    }
@media (min-width: 0em) and (max-width: 37.5em) {
.tile .title {
            margin-bottom: var(--spacing8)
    }
        }
.tile .teaser {
        font-weight: 300;
        font-family: var(--sans);
        margin: 0;
        font-size: var(--fontSize16);
        line-height: var(--lineHeightLoose);
    }
.tile.overlay {
        position: relative;
        padding-bottom: 0;
        z-index: 50
    }
.tile.overlay .textContainer {
            box-sizing: border-box;
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
            background: var(--grey3-t);
            background: linear-gradient(0, rgba(0,0,0,.7), rgba(0, 0, 0, 0));
            background: -moz-linear-gradient(
                90deg,
                rgba(0,0,0,.7),
                rgba(0, 0, 0, 0)
            );
            color: var(--white);
            padding: var(--spacing16) var(--spacing24);
            font-weight: 300;
        }
.tile.overlay .title {
            font-style: normal;
        }
.tile.overlay .mediaContainer {
            /*position: absolute;
        z-index: 0;*/
            height: 100%
        }
.tile.overlay .mediaContainer img {
                object-fit: cover;
                height: 100%;
            }
.tile.overlay .objectFitFallbackContainer {
            background-position: center;
            background-size: cover;
            overflow: hidden;
        }
.tile.overlay .objectFitFallbackImage {
            /*opacity: 0;*/
        }
.tile.featured .title {
            font-size: var(--fontSize20);
            line-height: var(--lineHeightTight)
        }
@media (min-width: 37.5em) {
.tile.featured .title {
                font-size: var(--fontSize28)
        }
            }
@media (min-width: 60em) {
.tile.featured .title {
                font-size: var(--fontSize32)
        }
            }
.tile.featured .teaser {
            line-height: var(--lineHeightTight);
            font-weight: normal;
            font-size: var(--fontSize16);
            display: none
        }
@media (min-width: 37.5em) {
.tile.featured .teaser {
                display: block;
                font-size: var(--fontSize14)
        }
            }
@media (min-width: 60em) {
.tile.featured .teaser {
                font-size: var(--fontSize16)
        }
            }

.media-block {
    display: block;
    margin: 0;
    height: 100%;
    position: relative
}

.media-block .imageContainer {
        position: relative;
        height: 100%;
		width: 100%;
    }

.media-block .hideVideo {
        display: none;
    }

.media-block .showVideo {
        display: block;
    }

.media-block .topTile {
		height: 100%
	}

@media (min-width: 0em) and (max-width: 37.5em) {

.media-block .topTile {
			height: auto
	}
		}

.media-block {

    /* Safari support */
}

.media-block _::-webkit-:host:not(:root:root),
    .media-block .imageContainer {
        height: auto;
    }

.media-block .image {
        display: block;
        width: 100%;
    }

.media-block .copyright {
        position: absolute;
        left: var(--spacing8);
        bottom: 0;
        color: var(--grey10);
        font-size: var(--fontSize11);
    }

.media-block .posterFrame {
        position: relative;
        display: block
    }

.media-block .posterFrame .playButton {
            position: absolute;
            bottom: 0;
            left: 0;
            font-size: var(--fontSize110);
            color: var(--black);
            background: var(--white);
            border-radius: 50%;
            height: 40px;
            width: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 20;
            margin: var(--spacing16) var(--spacing32)
        }

.media-block .posterFrame .playButton svg {
                margin-left: 0px;
                margin-right: -3px;
            }

@media (min-width: 37.5) {

.media-block .posterFrame .playButton {
                font-size: var(--fontSize42)
        }
            }

.media-block .video {
        width: 100%;
        /*padding-top: 56.25%;*/
        position: relative;
    }

.media-block .video-container[style] {
            height: auto;
        }

.media-block .video-title {
        pointer-events: none;
        width: 100%;
        position: absolute;
        top: 0;
        color: var(--white);
        font-size: var(--fontSize20);
        line-height: var(--lineHeightTight);
        font-weight: 300;
        font-family: var(--sans);
        font-style: normal;
        padding: var(--spacing16) var(--spacing24);
        background: linear-gradient(0, rgba(0, 0, 0, 0), rgba(0,0,0,.7))
    }

@media (min-width: 37.5em) {

.media-block .video-title {
            font-size: var(--fontSize28)
    }
        }

@media (min-width: 60em) {

.media-block .video-title {
            font-size: var(--fontSize32)
    }
        }

.media-block .video iframe {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
    }

.media-block .caption {
        display: block;
        margin: var(--spacing4) 0 0;
        color: var(--grey10);
        text-align: left;
        font-size: var(--fontSize14);
    }

.media-block .widthHeightWrapper {
        width: 100%;
        height: 100%;
        text-align: center;
    }

.media-block .widthHeightWrapperHidden {
        display: none;
    }

.media-block .videoContainer {
        overflow: hidden;
        width: 100%;
    }

.tileGroup .group-title {
        display: block;
        font: var(--h3);
        margin: var(--spacing64) 0 var(--spacing16)
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.tileGroup .group-title {
            margin-top: var(--spacing16)
    }
        }

.tileGroup .tiles {
        display: block;
    }

.tileGroup .tile {
        padding-bottom: var(--spacing16);
        border-bottom: 1px solid var(--grey5);
        margin-bottom: var(--spacing24);
        width: 100%
    }

@media (min-width: 37.5) {

.tileGroup .tile {
            width: 100%
    }
        }

@media (min-width: 60em) {

.tileGroup .tile {
            width: 100%
    }
        }

@media (min-width: 37.5) {

.tileGroup.twoUp .tile {
            width: 100%
    }
        }

@media (min-width: 37.5) {

.tileGroup.fourUp .tile {
            width: 100%
    }
        }

@media (min-width: 60em) {

.tileGroup.fourUp .tile {
            width: 100%
    }
        }

.tileGroup {

    /* now lay it out on the grid */
}

.tileGroup .tiles {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 1vw
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.tileGroup .tiles {
            display: block
    }
        }

@media (min-width: 37.5) {

.tileGroup .tiles {
            grid-template-columns: repeat(2, 1fr)
    }
        }

@media (min-width: 60em) {

.tileGroup .tiles {
            grid-template-columns: repeat(3, 1fr)
    }
        }

.tileGroup.twoUp .tiles {
        grid-template-columns: 1fr;
    }

@media (min-width: 37.5) {

.tileGroup.twoUp .tiles {
            grid-template-columns: repeat(2, 1fr);
    }
        }

.tileGroup.twoUp .tiles {
        grid-template-columns: repeat(2, 1fr);
    }

.tileGroup.threeUp .tiles {
        grid-template-columns: 1fr;
    }

@media (min-width: 37.5) {

.tileGroup.threeUp .tiles {
            grid-template-columns: repeat(3, 1fr);
    }
        }

.tileGroup.threeUp .tiles {
        grid-template-columns: repeat(3, 1fr);
    }

.tileGroup.fourUp .tiles {
        grid-template-columns: 1fr
    }

@media (min-width: 37.5) {

.tileGroup.fourUp .tiles {
            grid-template-columns: repeat(2, 1fr)
    }
        }

@media (min-width: 60em) {

.tileGroup.fourUp .tiles {
            grid-template-columns: repeat(4, 1fr)
    }
        }

@media (min-width: 60em) {

.tileGroup.relatedTiles.threeUp .tile,
    .tileGroup.additionalTiles.threeUp .tile {
            border-bottom: 1px solid var(--grey10)
    }
        }

@media (min-width: 37.5) {

.tileGroup.relatedTiles.threeUp .tile,
    .tileGroup.additionalTiles.threeUp .tile {
            border-bottom: 1px solid var(--grey10)
    }
        }

.error-template .pageTitle {
        font: var(--formalHeading);
        display: block;
        text-align: center;
        margin: var(--spacing32) 0
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.error-template .pageTitle {
            font-size: var(--fontSize32)
    }
        }

.error-template .articleBody {
        line-height: 1.4;
    }

.details-template .photoLinks {
        margin-right: 0;
        margin-top: var(--spacing8);
        text-align: right;
    }

.details-template .pageTitle {
        font: var(--h1);
        display: block;
        text-align: left;
        margin: var(--spacing8) 0 var(--spacing32)
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.details-template .pageTitle {
            font-size: var(--fontSize32)
    }
        }

.details-template .schedulingLink {
        margin-bottom: var(--spacing8);
    }

.details-template .pageHead {
        position: relative;
        width: 100%
    }

.details-template .pageHead img {
            /*needed for IE */
            width: 100%;
        }

.details-template .pageHead .photoLinks {
            display: block;
            text-align: right;
        }

.details-template .detailsSection {
        margin-bottom: var(--spacing64)
    }

.details-template .detailsSection p {
            font-family: var(--sans);
        }

.details-template .templeInfo {
        display: flex;
        flex-wrap: nowrap
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.details-template .templeInfo {
            flex-direction: column-reverse;
            flex-wrap: wrap
    }
        }

.details-template .contactToggle {
        color: var(--blue30);
    }

.details-template .photoColumn {
        width: 50%;
        display: flex;
        flex-direction: column
        /*padding-left: var(--spacing16);*/
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.details-template .photoColumn {
            width: 100%;
            padding-left: 0
    }
        }

.details-template .photoColumn .detailImage {
            height: auto;
        }

.details-template .templeInformation {
        width: 50%
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.details-template .templeInformation {
            width: 100%
    }
        }

.details-template .infoItem {
        width: 100%;
        margin-bottom: var(--spacing24)
    }

.details-template .infoItem:last-child {
            margin-bottom: 0;
        }

.details-template .infoItem a.phonelink {
            display: inline-block;
        }

.details-template .heading {
        font: var(--h2);
        margin: var(--spacing16) 0;
        display: block;
        background: var(--grey3);
        font-weight: 400;
        padding: var(--spacing16)
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.details-template .heading {
            font-size: var(--fontSize20)
    }
        }

.details-template .subhead {
        font-style: italic;
        font-weight: 600;
        display: block;
    }

.details-template .sectionHeading {
        font-weight: 600;
        font-size: var(--fontSize20);
        margin: var(--spacing32) 0 var(--spacing16);
        display: block;
    }

.details-template .closuresSubhead {
        font: var(--h3);
        font-weight: bold;
        font-weight: 600;
        font-style: italic;
        line-height: var(--line-height-600);
        display: inline-block;
        margin-top: var(--spacing8);
    }

.details-template .closuresList {
        margin: var(--spacing16) 0 var(--spacing24);
    }

.details-template .closures {
        list-style: none;
        line-height: var(--line-height-600)
    }

.details-template .closures:before {
            content: "\B7";
            margin-right: var(--spacing8)
        }

@media (min-width: 0em) and (max-width: 37.5em) {

.details-template .closures:before {
                list-style: disc;
                content: "";
                margin: 0
        }
            }

@media (min-width: 0em) and (max-width: 37.5em) {

.details-template .closures {
            margin-bottom: var(--spacing8)
    }
        }

.details-template .milestoneItem {
        display: flex;
        flex-wrap: wrap;
        line-height: var(--line-height);
        margin-bottom: var(--spacing16)
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.details-template .milestoneItem {
            margin-bottom: var(--spacing16)
    }
        }

.details-template .milestoneItem:before {
            content: "\B7";
            margin-right: var(--spacing8)
        }

@media (min-width: 0em) and (max-width: 37.5em) {

.details-template .milestoneItem:before {
                list-style: disc;
                content: "";
                margin: 0
        }
            }

.details-template .date {
        flex-basis: 30%
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.details-template .date {
            flex-basis: 100%
    }
        }

.details-template .milestone {
        flex-basis: 60%
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.details-template .milestone {
            flex-basis: 100%
    }
        }

.alert {
  padding: 16px 48px 24px 16px;
  color: var(--text120);
  box-shadow: 0 2px 5px 0 var(--grey10);
  border: 1px solid var(--grey10);
  border-left: 8px solid var(--blue20);
  border-radius: 2px;
  margin-bottom: var(--spacing64)
}
.alert .alertTitle {
    font-weight: 600;
    font-size: var(--fontSize18);
    margin: 0;
    margin-bottom: var(--spacing8);
  }
.alert .alertText {
    font-size: var(--fontSize16);
    font-family: var(--sans);
    margin: 0;
    display: block;
  }
.alert .alertIcon {
    height: 24px;
    width: 24px;
    color: var(--blue20);
    margin-bottom: var(--spacing8);
  }

.button {
    border: 0;
    border-radius: 0.125em;
    fill: var(--white);
    color: var(--white);
    cursor: pointer;
    display: inline-block;
    font-size: var(--fontSize16);
    font-weight: normal;
    line-height: 1;
    padding: calc( (36px - 1em) / 2) calc(1em - (var(--spacing4) / 2));
    transition: transform .1s linear
}
.button:hover {
        text-decoration: none;
    }
.button.small {
        font-size: var(--fontSize14);
        padding: calc( (28px - 1em) / 2) .75rem;
    }
.button[disabled] {
        pointer-events: none;
    }
.button.primary {
        background: linear-gradient(150deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)), rgb(22, 123, 156)
    }
.button.primary:hover {
            background: rgb(22, 123, 156);
        }
.button.primary[disabled] {
            background: var(--grey2);
        }
.button.secondary {
        background: linear-gradient(150deg, rgba(255, 255, 255, 0) 75%, rgba(22, 123, 156, 0.13));
        color: var(--blue30);
        fill: var(--blue30)
    }
.button.secondary:hover {
            background: none;
        }
.button.secondary[disabled] {
            background: var(--grey2);
            color: var(--grey5);
        }
.button.success {
        background: linear-gradient(150deg, color(var(--green-400) lightness(+5%)), color(var(--green-400) lightness(+5%)), var(--green-400))
    }
.button.success:hover {
            background: color(var(--green-400) lightness(-5%));
        }
.button.success[disabled] {
            visibility: hidden;
        }
.button.warning {
        background: linear-gradient(150deg, color(var(--orange-400) lightness(+5%)), color(var(--orange-400) lightness(+5%)), var(--orange-400))
    }
.button.warning:hover {
            background: color(var(--orange-400) lightness(-5%));
        }
.button.warning[disabled] {
            background: var(--grey5);
        }
.button.danger {
        background: linear-gradient(150deg, color(var(--red-600) lightness(+5%)), color(var(--red-600) lightness(+5%)), var(--red-600))
    }
.button.danger:hover {
            background: color(var(--red-600) lightness(-5%));
        }
.button.danger[disabled] {
            background: var(--grey10);
        }
.button.tag-invert {
        border-color: var(--grey20);
        color: var(--grey40);
    }
.button.hollow, .button.tag, .button.tag-invert {
		background: none;
		/*background: linear-gradient(150deg, color(var(--white) alpha(15%)), color(var(--white) alpha(0)));*/
		border: 1px solid var(--grey5);
		color: var(--grey5)
    }
.button.hollow[disabled], .button.tag[disabled], .button.tag-invert[disabled] {
         background: transparent;
         opacity: .8;
     }
.button.hollow:hover, .button.tag:hover, .button.tag-invert:hover {
         background: transparent;
     }
.button.tag, .button.tag-invert {
        font-size: var(--fontSize11);
        padding: 0.6em 1em;
        border-radius: 0.2em;
        letter-spacing: 0.01em
    }
.button.tag:hover, .button.tag-invert:hover {
            background: var(--grey20);
            color: var(--grey3);
        }
.button .icon, .button .label {
        margin: 0 calc(var(--spacing4) / 2);
        pointer-events: none;
    }



@-webkit-keyframes load2 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load2 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.details-scheduling {
    position: relative;
    min-height: 270px
}

.details-scheduling .heading {
        font: var(--h2);
        display: block;
        background: var(--grey5);
        font-weight: 400;
        padding: var(--spacing16);
        margin-bottom: 0
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.details-scheduling .heading {
            font-size: var(--fontSize20)
    }
        }

.details-scheduling .filters {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 1em 0;
        background: #eee;
        //transition: all 1s
    }

.details-scheduling .filters .selectBox {
            flex: 0 0 45%;
            max-width: 45%;
            padding: 1em;
            position: relative
        }

.details-scheduling .filters .selectBox label {
                display: block;
                font-style: italic;
                font-weight: 600;
            }

.details-scheduling .filters .selectBox .icon {
                position: absolute;
                bottom: 35px;
                right: 35px;
                pointer-events: none;
                background: var(--white);
                font-size: 0.8rem;
            }

@media (min-width: 37.5em) and (max-width: 60em) {

.details-scheduling .filters .selectBox {
                width: 43%;
                overflow: hidden
        }
            }

.details-scheduling .filters .ordSelect {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            padding: 5px 15px;
            width: 100%;
            height: 3em;
            background: var(--white);
            border-radius: 5px;
            border: 1px solid rgb(166, 166, 166);
        }

.details-scheduling .filters .dateSelect {
            position: relative;
            cursor: pointer;
            display: flex;
            padding: 5px 15px;
            background: var(--white);
            height: 3em;
            border-radius: 5px;
            align-items: center;
            white-space: pre;
            -webkit-rtl-ordering: logical;
            border-width: 1px;
            border-style: solid;
            border-color: rgb(166, 166, 166);
            border-image: initial;
            width: 100%;
            overflow: hidden;
            padding-right: 50px;
            font-size: var(--fontSize16)
        }

.details-scheduling .filters .dateSelect > span {
                display: inline-block;
                max-width: 100%;
                overflow: hidden;
            }

.details-scheduling .filters .dateSelect .icon {
                bottom: 11px;
                right: 11px
            }

.details-scheduling .filters .dateSelect .icon svg {
                    width: 1.5rem;
                    height: 1.5rem;
                }

@media (min-width: 37.5em) and (max-width: 60em) {
            .details-scheduling .filters .selectBox {
                flex: 0 0 100%;
                max-width: 100%;
            }

            .details-scheduling .filters .dateSelectBox {
                order: 3;
            }
    }

@media (min-width: 0em) and (max-width: 37.5em) {
            .details-scheduling .filters .selectBox {
                flex: 0 0 100%;
                max-width: 100%;
            }

            .details-scheduling .filters .dateSelectBox {
                order: 3;
            }
    }

.details-scheduling .loadingBox {
        padding: var(--spacing16);
        background: var(--grey2);
        display: flex;
        height: 270px;
        z-index: 0;
    }

.details-scheduling .loader,
    .details-scheduling .loader:before,
    .details-scheduling .loader:after {
        border-radius: 50%;
    }

.details-scheduling .loader {
        color: var(--blue30);
        font-size: 8px;
        text-indent: -99999em;
        margin: 55px auto;
        position: relative;
        width: 10em;
        height: 10em;
        box-shadow: inset 0 0 0 1em;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
    }

.details-scheduling .loader:before,
    .details-scheduling .loader:after {
        position: absolute;
        content: "";
    }

.details-scheduling .loader:before {
        width: 5.2em;
        height: 10.2em;
        background: var(--grey2);
        border-radius: 10.2em 0 0 10.2em;
        top: -0.1em;
        left: -0.1em;
        -webkit-transform-origin: 5.2em 5.1em;
        transform-origin: 5.2em 5.1em;
        -webkit-animation: load2 1s infinite ease 0.75s;
        animation: load2 1s infinite ease 0.75s;
    }

.details-scheduling .loader:after {
        width: 5.2em;
        height: 10.2em;
        background: var(--grey2);
        border-radius: 0 10.2em 10.2em 0;
        top: -0.1em;
        left: 5.1em;
        -webkit-transform-origin: 0px 5.1em;
        transform-origin: 0px 5.1em;
        -webkit-animation: load2 1s infinite ease;
        animation: load2 1s infinite ease;
    }

.details-scheduling .filterContainer.isLoaded {
            opacity: 1;
            //transition: all 1s;
            position: relative;
            z-index: 10;
        }

.details-scheduling .filterContainer.isLoading {
            opacity: 0;
            height: 0;
            padding: 0;
            margin: 0;
            //transition: all 1s;
        }

.details-scheduling .loadingContainer {
        margin-bottom: var(--spacing32);
        background: var(--white);
        display: block
    }

.details-scheduling .loadingContainer > .heading {
            height: 69px;
            display: block
        }

.details-scheduling .loadingContainer > .heading:after {
                background: var(--grey5);
                content: "";
                position: absolute;
                height: 35px;
                width: 40%;
            }

.details-scheduling .loadingContainer .schedPlaceholder {
            background: var(--white);
            display: block;
            height: 18em;
        }

.details-scheduling .loadingContainer.isLoading {
            opacity: 1;
            //transition: all 2s;
            //transition-delay: 1s;
        }

.details-scheduling .loadingContainer.isLoaded {
            top: 0;
            left: 0;
            position: absolute;
            width: 100%;
            display: block;
            opacity: 0;
            height: 0;
            padding: 0;
            margin: 0;
            //transition: opacity 2s;
            //transition-delay: 1s;
            content: "";
            z-index: 0;
        }

.calendar {
  width: 450px;
  background: var(--white);
  padding: 0 2em 2em;
  position: absolute;
  right: 1em;
  top: 157px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(166, 166, 166);
  border-image: initial;
  border-radius: 0 5px 0 0;
  transition: width var(--speed);
  display: none
}

.calendar[data-visible="true"] {
    display: block;
  }

.calendar .icon {
    height: 100%;
    width: 100%
  }

.calendar .icon svg {
      vertical-align: top;
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.calendar {
    position: fixed;
    z-index: 1200;
    width: 100%;
    height: 100%;
    right: 0;
    padding: 0 0 1em;
    margin-right: 0;
    top: 0;
    box-shadow: 0px 1px 10px var(--grey10)
}
  }

.calendar .closeButton {
    position: absolute;
    top: 1em;
    right: 1em;
    width: 1.25em;
    height: 1.25em;
    color: var(--grey20);
    border: 1px solid var(--grey20);
    border-radius: 50%;
    cursor: pointer;
    padding: 4px;
    background: transparent
  }

.calendar .closeButton svg {
      height: 100%;
      width: 100%;
    }

.calendar .monthBox {
    display: flex;
    justify-content: space-between;
    text-align: center;
    padding: var(--spacing32) 0 var(--spacing8);
    width: 80%;
    margin: 0 auto
  }

@media (min-width: 0em) and (max-width: 37.5em) {

.calendar .monthBox {
      padding: var(--spacing16) var(--spacing8)
  }
    }

.calendar .title {
    font: var(--h2);
    text-align: center;
    display: block;
    order: 2;
    user-select: none
  }

@media (min-width: 0em) and (max-width: 37.5em) {

.calendar .title {
      font-size: var(--fontSize20)
  }
    }

.calendar .monthButton {
    width: 1.5em;
    height: 1.5em;
    color: var(--blue10);
    border: 0;
    font-size: 1.3em;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    background: transparent
  }

.calendar .monthButton svg {
      width: 100%;
      height: 100%;
    }

.calendar .monthButton:hover {
      color: var(--blue30);
      border-color: var(--blue30);
    }

.calendar .monthButton.prev {
      order: 1;
    }

.calendar .monthButton.next {
      order: 3;
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.calendar .monthButton {
      font-size: var(--fontSize13)
  }
    }

.calendar .selectedDate {
    text-align: center;
    display: block;
    font-size: 1em;
    margin: 1em 0;
    user-select: none;
  }

.calendar .cell {
    display: inline-block;
    position: relative;
    padding: 7px;
    height: 43px;
    width: 43px;
    border-radius: 50%;
    text-align: center;
    margin: 5px;
    background: var(--grey5);
    transition: background-color 450ms ease-in-out;
    cursor: pointer;
    user-select: none;
    border: 0
  }

@media (min-width: 0em) and (max-width: 37.5em) {

.calendar .cell {
      height: 35px;
      width: 35px;
      padding: 3px
  }
    }

.calendar .dayCell {
    background: none;
    cursor: default;
    transition: background-color 450ms ease-in-out
  }

.calendar .dayCell.weekDay {
      user-select: none;
    }

.calendar .dayRow,
  .calendar .calGrid {
    display: block;
    transition: background-color 450ms ease-in-out;
    margin: 0 auto
  }

@media (min-width: 0em) and (max-width: 37.5em) {

.calendar .dayRow,
  .calendar .calGrid {
      width: 100%;
      max-width: 320px
  }
    }

.calendar .calGrid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }

.calendar .templeOpen {
    background: #00d1f1;
    color: var(--white);
    transition: background-color 450ms ease-in-out;
  }

.calendar .ordAvailable {
    background: var(--blue30);
    color: var(--white);
    transition: background-color 450ms ease-in-out
  }

.calendar .ordAvailable:focus {
      background: var(--white);
      outline: 2px solid var(--blue30);
      color: var(--blue30);
    }

.calendar .isBlank {
    height: 0;
    padding: 0;
  }

.calendar .pastDay {
    background: var(--grey2);
    color: var(--grey10);
    pointer-events: none;
  }

.calendar .selected {
    background: var(--white);
    color: var(--blue30);
    outline: 1px solid var(--blue30);
  }

.calendar .filters {
    margin: 2em 0;
    display: flex;
    justify-content: space-between
  }

.calendar .filters select.ordSelect {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      padding: 5px;
      margin: 1em;
      flex-basis: 45%;
      background: var(--white);
    }

.calendar .calendarKey {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 2em;
    font-size: var(--fontSize13)
  }

.calendar .calendarKey .cell {
      width: 30px;
      height: 30px;
      display: inline-block;
      margin: 10px 10px -10px;
    }

.calendar .calendarKey .legend {
      display: inline;
      user-select: none
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.calendar .calendarKey .legend {
        font-size: var(--fontSize13)
    }
      }

.calendar .disabled {
    pointer-events: none;
    visibility: hidden;
  }

.calendar {

  /* Loading spinner */
}

.calendar .loadingBox {
    padding: var(--spacing16);
    background: var(--white);
    display: flex;
    height: 270px;
    z-index: 0;
  }

.calendar .loader,
  .calendar .loader:before,
  .calendar .loader:after {
    border-radius: 50%;
  }

.calendar .loader {
    color: var(--blue30);
    font-size: 8px;
    text-indent: -99999em;
    margin: 55px auto;
    position: relative;
    width: 10em;
    height: 10em;
    box-shadow: inset 0 0 0 1em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }

.calendar .loader:before,
  .calendar .loader:after {
    position: absolute;
    content: "";
  }

.calendar .loader:before {
    width: 5.2em;
    height: 10.2em;
    background: var(--white);
    border-radius: 10.2em 0 0 10.2em;
    top: -0.1em;
    left: -0.1em;
    -webkit-transform-origin: 5.2em 5.1em;
    transform-origin: 5.2em 5.1em;
    -webkit-animation: load2 1s infinite ease 0.75s;
    animation: load2 1s infinite ease 0.75s;
  }

.calendar .loader:after {
    width: 5.2em;
    height: 10.2em;
    background: var(--white);
    border-radius: 0 10.2em 10.2em 0;
    top: -0.1em;
    left: 5.1em;
    -webkit-transform-origin: 0px 5.1em;
    transform-origin: 0px 5.1em;
    -webkit-animation: load2 1s infinite ease;
    animation: load2 1s infinite ease;
  }

.calendar {

  @-webkit-keyframes load2 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @keyframes load2 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
}

.calendar .filterContainer.isLoaded {
      opacity: 1;
      transition: all 1s;
      position: relative;
      z-index: 10;
    }

.calendar .filterContainer.isLoading {
      opacity: 0;
      height: 0;
      padding: 0;
      margin: 0;
      transition: all 1s;
    }

.calendar .loadingContainer {
    margin-bottom: var(--spacing32);
    background: var(--white);
    display: block
  }

.calendar .loadingContainer > .heading {
      height: 69px;
      display: block
    }

.calendar .loadingContainer > .heading:after {
        background: var(--grey5);
        content: "";
        position: absolute;
        height: 35px;
        width: 40%;
      }

.calendar .loadingContainer .schedPlaceholder {
      background: var(--white);
      display: block;
      height: 18em;
      background-image: linear-gradient(var(--grey2) 36px, transparent 0),
        linear-gradient(var(--grey2) 20px, transparent 0),
        linear-gradient(var(--grey2) 18px, transparent 0),
        linear-gradient(var(--grey2) 18px, transparent 0),
        linear-gradient(var(--grey2) 18px, transparent 0),
        linear-gradient(var(--grey2) 18px, transparent 0);

      background-repeat: no-repeat;
      background-size: 40%, 35%, 10%, 10%, 10%, 10%;
      background-position: 17px 50px, 17px 105px, 17px 150px, 17px 190px,
        17px 230px, 17px 270px;
    }

.calendar .loadingContainer.isLoading {
      opacity: 1;
      transition: all 2s;
      transition-delay: 1s;
    }

.calendar .loadingContainer.isLoaded {
      top: 0;
      left: 0;
      position: absolute;
      width: 100%;
      display: block;
      opacity: 0;
      height: 0;
      padding: 0;
      margin: 0;
      transition: opacity 2s;
      transition-delay: 1s;
      content: "";
      z-index: 0;
    }

.scheduleList {
    padding: 1em
}

.scheduleList .heading {
        font: var(--h2);
        margin: 1em 0 0.5em;
        display: block
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.scheduleList .heading {
            font-size: var(--fontSize20)
    }
        }

.scheduleList .selectedDate {
        font-weight: 600;
        font-style: italic;
        margin: 0.5em 0 1em;
        display: block;
    }

.scheduleList .schedule {
        margin-bottom: 0;
    }

.scheduleList .scheduleItem {
        display: flex;
        list-style: none;
        line-height: var(--line-height);
        margin-bottom: var(--spacing16)
    }

.scheduleList .scheduleItem:last-child {
            margin-bottom: 0;
        }

.scheduleList .date {
        flex-basis: 35%;
    }

.scheduleList .times {
        flex-basis: 25%
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.scheduleList .times {
            flex-basis: 35%;
            min-width: 25vw
    }
        }

.scheduleList .noTimes {
        font-style: italic;
        font-weight: 600;
        margin: 2em 0;
        display: block
    }

.scheduleList .noTimes span {
            margin-bottom: var(--spacing16);
            display: block;
        }

.scheduleList .expander {
        padding: var(--spacing16) 0 0;
        position: relative;
    }

.scheduleList .expander a,
    .scheduleList .viewCalendar {
        color: var(--blue30);
        cursor: pointer;
        display: inline-block;
    }

.scheduleList .viewCalendar {
        margin-top: var(--spacing16);
    }

.scheduleList .collapsed {
        max-height: 9em;
        overflow: hidden
    }

.scheduleList .collapsed + div .expander:before {
                content: "";
                background: linear-gradient(rgba(255,255,255,0), white 80%);
                height: 30px;
                width: 100%;
                display: block;
                top: -35px;
                position: absolute;
            }

.scheduleList .expanded {
        max-height: none;
        overflow: auto;
    }

.scheduleList span[style] {
        color: var(--danger60) !important;
        font-family: var(--sans);
    }

@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.modal-drop-down .modal {
        background: var(--white);
        padding: 2em 2em 4em;
        border: 1px solid var(--grey3);
        border-radius: 0 0 2px 2px;
        width: 76vw;
        position: fixed;
        top: -1000px;
        left: 50%;
        margin-left: -38vw;
        box-shadow: 0px 2px 5px rgba(74, 74, 74, 0.1);
        content: "";
        transition: all 500ms;
        z-index: 1200;
        display: none
    }
@media (min-width: 0em) and (max-width: 37.5em) {
.modal-drop-down .modal {
            width: 94vw;
            margin-left: -47vw;
            position: absolute
    }
        }
@media (min-width: 60em) and (max-width: 80em) {
.modal-drop-down .modal {
            width: 44vw;
            margin-left: -22vw;
            position: absolute
    }
        }
.modal-drop-down .modalVisible {
        top: -5px;
    }
.modal-drop-down .fade {
        animation-name: fade;
        animation-duration: 500ms;
    }
.modal-drop-down .loader {
        border: 8px solid #f3f3f3; /* Light grey */
        border-top: 8px solid #3498db; /* Blue */
        border-radius: 50%;
        margin: 2em auto 0;
        width: 75px;
        height: 75px;
        animation: spin 2s linear infinite;
    }
.modal-drop-down .modalHeading {
        font: var(--h4);
        display: block;
        margin: 1em 0;
        font-size: 1.5em;
    }
.modal-drop-down .toggle {
        cursor: pointer;
    }
.modal-drop-down .modalUp {
        position: absolute;
        right: 0;
        bottom: 0;
        margin: 1em;
        width: 1.5em;
        height: 1.5em;
        color: var(--blue30);
        border: 1px solid var(--blue30);
        border-radius: 50%;
        cursor: pointer;
        background: transparent
    }
.modal-drop-down .modalUp svg {
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

.contact-form fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }

.contact-form legend {
    font: var(--h5);
  }

.contact-form .description {
    margin: 1em 0;
  }

.contact-form input,
  .contact-form textarea {
    display: block;
    margin: var(--spacing4) 0 var(--spacing16);
    padding: var(--spacing4) var(--spacing8);
    border: 1px solid var(--grey5);
    border-radius: 3px;
    font-size: var(--fontSize16)
  }

.contact-form input:focus, .contact-form textarea:focus {
      border-color: var(--blue20);
    }

.contact-form input .errorMessage, .contact-form textarea .errorMessage {
      display: none;
    }

.contact-form label {
    font-size: var(--fontSize13);
    margin-left: var(--spacing4)
  }

.contact-form label:after {
      content: "";
    }

.contact-form label .icon {
      vertical-align: bottom;
      margin-bottom: 3px;
    }

.contact-form textarea {
    width: 100%;
    min-height: var(--spacing128);
  }

.contact-form .errorMessage {
    display: none;
    color: var(--red-600);
  }

.contact-form .error input,
    .contact-form .error textarea {
      border-color: var(--red-600);
    }

.contact-form .error .errorMessage {
      display: inline;
    }

.inlineHtml * {
          visibility: hidden;
      }

.inlineHtml p,
    .inlineHtml a,
    .inlineHtml strong,
    .inlineHtml b,
    .inlineHtml em,
    .inlineHtml i,
    .inlineHtml sup,
    .inlineHtml sub,
    .inlineHtml span,
    .inlineHtml cite,
    .inlineHtml q,
    .inlineHtml > div {
            visibility: visible;
        }

.inlineHtml a[href] {
          border-bottom: 1px solid var(--blue20);
          color: inherit
    }

.inlineHtml a[href]:hover {
         color: var(--blue20);
         text-decoration: none;
     }

.inlineHtml > :first-child {
            margin-top: 0;
        }

.inlineHtml > :last-child {
            margin-bottom: 0;
        }

.temple-list-template .pageTitle {
        font: var(--h1);
        display: block;
        text-align: center;
        margin: var(--spacing16) 0 var(--spacing32)
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.temple-list-template .pageTitle {
            font-size: var(--fontSize32);
            margin-bottom: var(--spacing24)
    }
        }

.temple-list-template .filtersContainer {
        display: flex;
        justify-content: center;
        margin-bottom: var(--spacing64)
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.temple-list-template .filtersContainer {
            flex-direction: column;
            align-items: center;
            margin-bottom: var(--spacing32)
    }
        }

.temple-list-template .headLinks {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: flex-start;
        padding: var(--spacing8);
        border-bottom: 1px solid #ddd;
        list-style: none;
        color: var(--blue30);
        font-weight: 600;
    }

.temple-list-template .headLinks li {
        cursor: pointer;
    }

.filterSearchContainer {
    padding: 0.5em
}

@media screen and (max-width: 30em) {

.filterSearchContainer:last-child .resultsContainer {
            border-radius: 3px 0 3px 3px
    }
        }

@media screen and (max-width: 50em) {

.filterSearchContainer:last-child .resultsContainer {
            right: var(--spacing8);
            border-radius: 3px 3px 3px 3px
    }
        }

.filterSearchContainer .filterSearchButton {
        padding: var(--spacing4) var(--spacing16);
        display: block;
        border: 1px solid var(--grey20);
        background: var(--white);
        border-radius: 5px;
        margin-bottom: 0.5em
    }

.filterSearchContainer .filterSearchButton svg {
            margin-left: 0.5em;
            position: relative;
            top: 5px;
            font-size: 0.7rem;
        }

.filterSearchContainer .buttonOn {
        padding: 0.25em 1em;
        display: block;
        border: 1px solid #666;
        background: var(--white);
        border-bottom: 1px solid var(--white);
        border-radius: 3px 3px 0 0;
        z-index: 17;
        position: relative;
        padding-bottom: 0.5em;
        margin-bottom: 0
    }

.filterSearchContainer .buttonOn svg {
            margin-left: 0.5em;
            position: relative;
            top: 5px;
            font-size: 0.7rem;
        }

.filterSearchContainer .resultsContainer {
        display: block;
        padding: 0.5em;
        border: 1px solid #666;
        width: 300px;
        border-radius: 0 3px 3px 3px;
        margin-top: -1px;
        position: absolute;
        background: var(--white);
        z-index: 16;
        //transition: opacity 200ms linear, visibility 0ms 200ms linear;
        opacity: 0;
        visibility: hidden
    }

@media screen and (max-width: 30em) {

.filterSearchContainer .resultsContainer {
            width: auto;
            right: var(--spacing8);
            left: var(--spacing8);
            border-radius: 3px
    }
        }

.filterSearchContainer .show {
        opacity: 1;
        visibility: visible;
        //transition: opacity 200ms linear, visibility 0ms 0ms linear;
    }

.filterSearchContainer .filterSearchBox {
        background-color: var(--grey3);
        color: var(--grey60);
        border: none;
        width: 100%;
        border-radius: 0;
        padding: var(--spacing8);
    }

.filterSearchContainer .results {
        margin: 0.5em 0;
        padding: 0;
        line-height: 1.7;
        list-style: none;
    }

.filterSearchContainer .result {
        cursor: pointer;
        display: block;
        color: var(--blue30)
    }

.filterSearchContainer .result:-webkit-any-link {
            cursor: pointer;
            color: var(--blue30);
            text-decoration: none;
        }

.filterSearchContainer .result:focus {
            outline: 1px dotted;
        }

.filterSearchContainer .result:hover {
            text-decoration: underline;
        }

.filterSearchContainer .result.noLink {
            color: var(--grey30);
            cursor: default;
            text-decoration: none;
        }

.filterSearchContainer .allTemples {
        border-top: 1px solid #ccc;
        width: 100%;
        padding: 0.5em 0 0;
        display: block;
        color: #3692b7;
        cursor: pointer
    }

.filterSearchContainer .allTemples:focus {
            outline: 1px dotted;
        }

.filterSearchContainer .bold {
        font-weight: 600;
    }

.my-temple {
    display: block;
    margin: 0
}

.my-temple img {
        position: absolute;
        z-index: 15;
        margin-left: var(--spacing16);
        height: 3.25em;
        width: 3.25em;
        object-fit: cover
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.my-temple img {
			margin: var(--spacing8) 0 0 var(--spacing8);
            height: 4.75em;
            width: 4.75em
    }
        }

@media (min-width: 37.5em) and (max-width: 60em) {

.my-temple img {
            margin-top: 0.75em
    }
        }

.my-temple .heading {
        display: block;
        padding: var(--spacing8);
        list-style: none;
        color: var(--blue30);
        font-weight: 600;
    }

.my-temple .result {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: flex-start;
        padding: var(--spacing8);
        background: var(--grey2);
        margin-top: var(--spacing8);
        margin-bottom: var(--spacing24);
        font-size: var(--fontSize14)
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.my-temple .result {
            margin-top: 0;
			flex-direction: column;
            height: auto
    }
        }

@media (min-width: 37.5em) and (max-width: 60em) {

.my-temple .result {
            height: 4.5em
    }
        }

.my-temple .templeName {
        width: 35%;
        padding-left: 80px;
        box-sizing: border-box
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.my-temple .templeName {
            display: inline-block;
            width: 100%;
            padding-left: 95px;
            font-size: var(--fontSize13);
            box-sizing: border-box
    }
        }

.my-temple .templeLocation {
        width: 45%;
        text-align: left;
        padding: 0 var(--spacing8)
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.my-temple .templeLocation {
            display: inline-block;
            width: 100%;
            padding-left: 95px;
            box-sizing: border-box;
            font-size: var(--fontSize13)
    }
        }

.my-temple .dedicated {
        width: 20%
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.my-temple .dedicated {
            display: inline-block;
            width: 100%;
            padding-left: 95px;
            box-sizing: border-box;
            font-size: var(--fontSize13)
    }
        }

.data-list .headLinks {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    padding: var(--spacing8);
    border-bottom: 1px solid var(--grey2);
    list-style: none;
    color: var(--blue30);
    font-weight: 600;
  }

.data-list .headLinks li {
    cursor: pointer;
  }

.data-list .headLinks span {
    cursor: pointer;
  }

.data-list .filterResult {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    padding: var(--spacing8) var(--spacing8);
    border-bottom: 1px solid #ddd;
    font-size: var(--fontSize16);
  }

.data-list .templeName {
    width: 35%
  }

@media (min-width: 0em) and (max-width: 37.5em) {

.data-list .templeName {
      width: 37.5%;
      font-size: var(--fontSize13)
  }
    }

.data-list .templeLocation {
    width: 45%;
    text-align: left;
    padding: 0 var(--spacing8)
  }

@media (min-width: 0em) and (max-width: 37.5em) {

.data-list .templeLocation {
      width: 37.5%;
      font-size: var(--fontSize13)
  }
    }

.data-list {

  .dropDown {
    font-size: 0.7rem;
    margin-left: 0.4rem;
    color: hsl(0, 0%, 66%);
  }
  .dropUp {
    font-size: 0.7rem;
    margin-left: 0.4rem;
    transform: rotate(180deg);
    color: hsl(0, 0%, 66%);
  }
}

.data-list .dedicated {
    width: 20%
  }

@media (min-width: 0em) and (max-width: 37.5em) {

.data-list .dedicated {
      width: 30%;
      font-size: var(--fontSize13);
      text-align: right
  }
    }

.data-list {
  .dropDown {
    font-size: 0.7rem;
    margin-left: 0.4rem;
    color: hsl(0, 0%, 66%);
  }
  .dropUp {
    font-size: 0.7rem;
    margin-left: 0.4rem;
    transform: rotate(180deg);
    color: hsl(0, 0%, 66%);
  }
}

.open-houses-template .pageTitle {
        font: var(--h1);
        display: block;
        text-align: center;
        margin: 1.5em 0
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.open-houses-template .pageTitle {
            font-size: var(--fontSize32)
    }
        }

.open-houses-template .sectionTitle {
        font: var(--h2);
        margin: 2em auto;
        width: 100%;
        display: block;
        text-align: center;
    }

.ldsTwoTileSpotlightRow {
    display: flex;
    justify-content: space-between;
    flex-direction: columm;
    flex-wrap: wrap
}

@media (min-width: 37.5em) {

.ldsTwoTileSpotlightRow {
        flex-wrap: nowrap
}
    }

.ldsTwoTileSpotlightRow .tile {
        font-size: var(--fontSize16);
        line-height: 1.75;
        padding: 0 15px;
        width: 50%;
        align-items: flex-start;
        flex: 0 1 100%
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.ldsTwoTileSpotlightRow .tile {
            width: 100%;
            padding: 0
    }
        }

@media (min-width: 37.5em) {

.ldsTwoTileSpotlightRow .tile {
            width: 50%;
            flex: 0 0 50%;
            padding: 0 15px
    }
        }

@media (min-width: 60em) {

.ldsTwoTileSpotlightRow .tile {
            font-size: var(--fontSize110)
    }
        }

.ldsTwoTileSpotlightRow .tile:last-child:before {
            border-top: 1px solid #ddd;
            width: 100%;
            display: block;
            content: '';
        }

.ldsTwoTileSpotlightRow .tile iframe {
        flex: 0 1 100%;
        object-fit: fill;
        width: 100%;
    }

.ldsTwoTileSpotlightRow .tile p {
        margin: 1em 0 0;
        font-weight: 300;
        font-family: var(--sans);
    }

.ldsTwoTileSpotlightRow .tile img {
        width: 100%;
    }

.ldsTwoTileSpotlightRow .caption {
        font-weight: bold;
        font-style: italic
    }

.ldsTwoTileSpotlightRow .caption p {
            font-family: var(--sans);
        }

.openHouseBlock {
    align-items: center;
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5em
}

@media (min-width: 37.5em) {
        .openHouseBlock > *:first-child {
            width: 35%;
        }

        .openHouseBlock > *:last-child {
            width: 60%;
        }
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.openHouseBlock {
        display: block
}
    }

.openHouseBlock .openHouseImage {
        margin-right: 2em
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.openHouseBlock .openHouseImage {
            max-width: none;
            width: 100%;
            margin: 0
    }
        }

@media (max-width: 37.5em) {

.openHouseBlock .openHouseImage {
            margin-right: 0
    }
        }

.openHouseBlock .openHouseFeature {
        font-size: 1em;
        border-top: 1px solid #ddd
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.openHouseBlock .openHouseFeature {
            border-top: none;
            width: 100%
    }
        }

.openHouseBlock .subhead {
        font-weight: 600;
        margin: 1em 0;
    }

.openHouseBlock .heading {
        font-family: var(--sans);
        font-weight: 300;
        font-size: var(--fontSize32);
    }

.openHouseBlock .content {
        margin-top: 1em;
        margin-bottom: 1em;
        font-size: var(--fontSize16)
    }

.openHouseBlock .content p {
            font-family: var(--sans);
        }

.openHouseBlock .address span {
        display: block;
        font-size: var(--fontSize14);
    }

.openHouseBlock .button {
        background: var(--blue30);
        color: #fff;
        margin-top: 1em;
        border: none;
        font-size: 14px;
        padding: 0.25em 1em;
        transition: all 0.2s ease-in;
        border-radius: 5px;
        font-weight: 300;
    }

.HTMLRenderer {
    /* default is to render the raw html. */
    /* if it is inline or block, this is a very simple and cheap filter */
    /*&.inline, &.block {
        & * {
            display: none;
        }
    }

    &.inline {
        & a,
        & strong,
        & b,
        & em,
        & i,
        & sup,
        & sub,
        & span,
        & cite,
        & q {
            display: inline;
        }
    }
    &.block {
        & p,
        & blockquote,
        & dl,
        & dt,
        & dd,
        & ul,
        & ol,
        & li,
        & hr,
        & h2,
        & h3,
        & h4,
        & h5,
        & h6,
        & div {
            display: none;
        }
    }*/
}

.HTMLRenderer > :first-child {
        margin-top: 0;
    }

.HTMLRenderer > :last-child {
        margin-bottom: 0;
    }

.news-events .pageTitle {
        font: var(--h1);
        display: block;
        text-align: center;
        margin: var(--spacing16) 0;
    }

.news-events .tile {
        border-bottom: 1px solid var(--grey3);
    }

.news-events .pageTitle {
        margin-bottom: var(--spacing64);
    }

.news-events .title {
        font: var(--h2);
    }

@media (min-width: 0em) and (max-width: 37.5em) {
        .news-events .itemList {
            width: 100%;
        }

        .news-events .pageTitle {
            font-size: var(--fontSize110);
            margin: var(--spacing24);
        }
    }

.pagination a.link {
        border-radius: 3px; /* replace with variable */
        border: 1px solid transparent;
        color: var(--grey20);
        display: inline-block;
        font-size: var(--fontSize14);
        font-weight: 600;
        margin: 0 var(--spacing4);
        min-height: 1.5rem;
        min-width: 1.5rem;
        padding: var(--spacing4) var(--spacing8);
        text-align: center;
        line-height: 1.65em
    }

.pagination a.link:hover {
            border-color: var(--grey5);
            text-decoration: none;
        }

.pagination a.link.active {
            background: linear-gradient(150deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)), rgb(22, 123, 156);
            background-clip: padding-box;
            color: var(--white);
            cursor: default
        }

.pagination a.link.active:hover {
                border-color: transparent;
            }

.pagination .list {
        align-items: center;
        display: flex;
        flex-wrap: nowrap;
        /*align-items: center;*/
        margin: 0;
        padding: 0;
    }

.pagination .item {
        display: inline-block;
        list-style: none;
    }

.pagination .link.next,
    .pagination .link.prev {
        color: var(--blue30);
        font-size: var(--fontSize28);
        padding: var(--spacing4) var(--spacing8)
    }

.pagination .link.next:hover, .pagination .link.prev:hover {
            border-color: transparent;
        }

.horizontal-tile-list {
    margin: 0;
    padding: 0
}

.horizontal-tile-list .tile {
        margin-bottom: var(--spacing64);
        padding-bottom: var(--spacing24);
        border-bottom: 1px solid var(--grey3);
    }

.horizontal-tile .title {
        font-size: var(--fontSize20);
        line-height: var(--line-height-500);
        margin: 0 0 var(--spacing8)
    }

@media (min-width: 0em) and (max-width: 25em) {

.horizontal-tile .title {
            font-size: var(--fontSize110)
    }
        }

.horizontal-tile .subtitle {
        color: var(--grey30);
        font-size: var(--fontSize13);
        font-weight: 400;
        margin-bottom: var(--spacing16);
    }

.horizontal-tile .bodyWrapper {
        align-items: flex-start;
        display: flex;
        justify-content: space-between
    }

@media (min-width: 0em) and (max-width: 25em) {

.horizontal-tile .bodyWrapper {
            display: block
    }
        }

.horizontal-tile .lede {
        /*flex: 0 0 calc( 100% - 9em );*/
        margin: 0;
        flex-basis: 100%;
        display: inline
    }

.horizontal-tile .lede p:first-child {
            margin-top: 0;
        }

.horizontal-tile .HTMLRenderer {
        display: inline
    }

@media (min-width: 0em) and (max-width: 25em) {

.horizontal-tile .HTMLRenderer {
            display: block;
            margin-top: var(--spacing8);
            font-size: var(--fontSize14);
            line-height: var(--line-height-600)
    }
        }

.horizontal-tile .HTMLRenderer p {
            font-family: var(--sans);
        }

.horizontal-tile .readMore {
        color: var(--blue30);
        cursor: pointer;
        display: inline
    }

@media (min-width: 0em) and (max-width: 25em) {

.horizontal-tile .readMore {
            font-size: var(--fontSize14);
            padding-left: 0
    }
        }

.horizontal-tile .image {
        object-fit: cover;
        flex: 0 0 8em;
        width: var(--spacing128);
        height: var(--spacing128);
        padding-right: var(--spacing16)
    }

@media (min-width: 0em) and (max-width: 25em) {

.horizontal-tile .image {
            width: 100vw;
            height: var(--spacing128)
    }
        }

.photo-gallery-template .pageTitle {
        font: var(--h1);
        display: block;
        text-align: center;
        margin: var(--spacing16)
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.photo-gallery-template .pageTitle {
            font-size: var(--fontSize32)
    }
        }

.photo-gallery-template .filtersContainer {
        display: flex;
        justify-content: center;
        margin: var(--spacing32);
        height: 57px
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.photo-gallery-template .filtersContainer {
            flex-direction: column;
            align-items: center;
            height: 125px
    }
        }

.photo-gallery-template .galleryTitle {
        font: var(--h3);
        margin-bottom: var(--spacing16);
        display: block;
    }

.photo-gallery-template .bold {
        font-weight: 600;
    }

.gallery-filter {
    display: block;
    padding: 0.5em
}

.gallery-filter .pageTitle {
        font: var(--formalHeading);
        display: block;
        text-align: center;
        margin: var(--spacing16)
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.gallery-filter .pageTitle {
            font-size: var(--fontSize32)
    }
        }

.gallery-filter .galleryTitle {
        font: var(--h3);
        margin-bottom: var(--spacing16);
        display: block;
    }

.gallery-filter .filterSearchButton {
        padding: 0.25em 1em;
        display: block;
        border: 1px solid #666;
        background: var(--white);
        border-radius: 5px;
        margin-bottom: 5px
    }

.gallery-filter .filterSearchButton svg {
            margin-left: 0.5em;
            position: relative;
            top: 5px;
            font-size: 0.7rem;
        }

.gallery-filter .buttonOn {
        padding: 0.25em 1em;
        display: block;
        border: 1px solid #666;
        background: var(--white);
        border-bottom: 1px solid var(--white);
        border-radius: 3px 3px 0 0;
        z-index: 25;
        position: relative;
        padding-bottom: 0.5em;
        margin-bottom: 0
    }

.gallery-filter .buttonOn svg {
            margin-left: 0.5em;
            position: relative;
            top: 5px;
            font-size: 0.7rem;
        }

.gallery-filter .resultsContainer {
        display: block;
        padding: 0.5em;
        border: 1px solid #666;
        width: 300px;
        border-radius: 0 3px 3px 3px;
        margin-top: -1px;
        position: absolute;
        background: var(--white);
        z-index: 20;
        transition: opacity 200ms linear, visibility 0ms 200ms linear;
        opacity: 0;
        visibility: hidden
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.gallery-filter .resultsContainer {
            width: auto;
            left: 5%;
            right: 5%;
            border-radius: 3px
    }
        }

@media (min-width: 37.5em) and (max-width: 60em) {

.gallery-filter .resultsContainer {
            width: 250px
    }
        }

.gallery-filter .show {
        opacity: 1;
        visibility: visible;
        transition: opacity 200ms linear, visibility 0ms 0ms linear;
    }

.gallery-filter .filterSearchBox {
        background-color: var(--grey3);
        color: var(--grey10);
        border: none;
        width: 100%;
        border-radius: 0;
        padding: var(--spacing8);
    }

.gallery-filter .searchIcon {
        position: absolute;
        right: 16px;
        top: 13px;
        pointer-events: none;
    }

.gallery-filter .results {
        margin: 0.5em 0;
        padding: 0;
        line-height: 1.7;
        list-style: none
    }

.gallery-filter .results a {
            display: block;
            cursor: pointer
        }

.gallery-filter .results a:focus {
                outline: 1px dotted;
            }

.gallery-filter .results li,
    .gallery-filter .results a:-webkit-any-link {
        cursor: pointer;
        color: var(--grey30);
        text-decoration: none;
    }

.gallery-filter .showAll {
        border-top: 1px solid #ccc;
        width: 100%;
        padding: 0.5em 0 0;
        display: block;
        color: #3692b7;
        cursor: pointer
    }

.gallery-filter .showAll:focus {
            outline: 1px dotted;
        }

.gallery-filter .bold {
        font-weight: 600;
    }

.assetGrid {
	display: block
}


.assetGrid .group + .group {
            margin-top: var(--spacing4);
        }


.assetGrid .group:last-of-type .asset-list {
                justify-content: flex-start;
            }


.assetGrid .asset-list {
        display: flex;
        justify-content: space-between;
        //max-height: 6.8rem
    }


@media (min-width: 37.5) {


.assetGrid .asset-list {
            //max-height: 13.75rem
    }
        }


.assetGrid .link {
        display: inline-flex;
        transition: width .5s
    }


.assetGrid .link + .link {
            margin-left: var(--spacing4);
        }


.assetGrid .image {
        width: 100%;
        object-fit: cover;
    }


.assetGrid .summary {
        margin: var(--spacing8) 0 var(--spacing24);
    }



.assetDrawer {
    position: relative;
    background: var(--grey40);
    color: var(--white);
    padding: var(--spacing24) var(--spacing64);
    display: none
}
.assetDrawer[data-active=true] {
        display: block;
    }
.assetDrawer .assetDrawerContainer {
        display: flex;
        flex-direction: column;
        width: 100%
    }
@media (min-width: 60em) {
.assetDrawer .assetDrawerContainer {
            padding: var(--spacing64) var(--spacing64);
            flex-direction: row
    }
        }
.assetDrawer .asset {
        flex: 0 1 auto;
        max-width: 100%;
        text-align: center;
        justify-content: center;
        align-items: center
    }
@media (min-width: 60em) {
.assetDrawer .asset {
            max-width: 50%
    }
        }
.assetDrawer .info {
        flex: 1;
        color: var(--grey5)
        /*padding: var(--spacing16) 0 0;*/
    }
@media (min-width: 60em) {
.assetDrawer .info {
            padding-left: var(--spacing32)
    }
        }
.assetDrawer .imageLink {
        display: inline-flex;
    }
.assetDrawer .image {
        max-height: 350px;
        height: 350px;
        object-fit: contain;
        object-position: center
    }
@media (min-width: 60em) {
.assetDrawer .image {
            object-position: top
    }
        }
.assetDrawer .actions {
        text-align: left;
        margin: 1em 0;
    }
.assetDrawer .action {
        font-size: var(--fontSize14);
        font-weight: 300;
        display: inline-block
    }
.assetDrawer .action + .action {
            margin-left: 1.5em;
        }
.assetDrawer .actionIcon {
        margin: 0 0 0 var(--spacing16);
    }
.assetDrawer .downloadTitle {
        color: var(--grey5);
        display: block;
    }
.assetDrawer .downloadButton {
        display: inline-block;
        font-size: var(--fontSize14);
        margin: var(--spacing8) var(--spacing8) 0 0;
    }
.assetDrawer .downloadTitle {
        color: var(--grey5);
        display: block;
    }
.assetDrawer .downloadButton {
        display: inline-block;
        font-size: var(--fontSize14);
        margin: var(--spacing8) var(--spacing8) 0 0;
    }
.assetDrawer .title {
        font-size: var(--fontSize28);
        font-weight: 300;
        margin: 0 0 var(--spacing8);
        line-height: 1.4rem;
    }
.assetDrawer .titleLink {
        font-size: var(--fontSize20);
        color: inherit
    }
.assetDrawer .titleLink:hover {
            text-decoration: none;
        }
.assetDrawer .description {
        font-size: var(--fontSize13);
        font-weight: 300;
        line-height: var(--line-height-500);
        margin: 0 0 var(--spacing16);
        font-family: var(--sans);
    }
.assetDrawer .share {
        margin: 0;
    }
.assetDrawer .shareLink {
        color: var(--white);
        fill: var(--white);
        margin: 0 var(--spacing16) 0 0;
    }
.assetDrawer .shareIcon {
        font-size: var(--fontSize110);
    }
.assetDrawer .nav {
        flex: 0;
        cursor: pointer;
    }
.assetDrawer .close {
        position: absolute;
        top: var(--spacing16);
        right: var(--spacing16);
        color: var(--grey3);
        fill: var(--grey3);
    }
.assetDrawer .closeIcon {
        font-size: var(--fontSize32);
    }
.assetDrawer .previous, .assetDrawer .next {
        position: absolute;
        color: var(--white);
        fill: var(--white);
        background: var(--grey40);
        height: 3.688em;
        width: 3.063em;
        top: 50%;
        margin-top: calc(3.688em / -2);
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0;
    }
.assetDrawer .previous {
        left: 0;
        border-radius: 0 3px 3px 0;
    }
.assetDrawer .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }
.assetDrawer .previousIcon, .assetDrawer .nextIcon {
        font-size: var(--fontSize32);
    }
.assetDrawer .pointer {
        position: absolute;
        left: 0;
        top: calc(-1 * var(--spacing8));
        margin-left: calc(-1 * var(--spacing8));
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 var(--spacing8) var(--spacing8);
        border-color: transparent transparent var(--grey40) transparent;
    }





.tags {
    display: block;
    background-color: inherit
}

.tags.overflow .wrapper {
            max-height: calc(3 * 2.188em)
        }

.tags.overflow .wrapper:after {
                display: block;
            }

.tags.expand .wrapper {
            max-height: none
        }

.tags.expand .wrapper:after {
                display: none;
            }

.tags .wrapper {
        display: block;
        position: relative;
        overflow: hidden;
        background-image: none
    }

.tags .wrapper:after {
            display: none;
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2.5em;
            pointer-events: none;
            background-image: inherit;
        }

.tags .list {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        margin: 0;
    }

.tags .item {
        display: inline-block;
        margin: 0 var(--spacing4) var(--spacing4) 0;
        position: relative;
    }

.tags .tagInvert {
        color: var(--grey3);
    }

.tags .toggle {
        display: inline-block;
        color: var(--white);
        margin: var(--spacing4) 0 0;
    }

.tags .icon {
        line-height: 1em;
        vertical-align: middle;
        margin: 0 var(--spacing4) 0 0;
        font-size: var(--fontSize28);
    }

.tags .label {
        font-size: var(--fontSize13);
        line-height: var(--line-height-400);
    }

.tags .closeButton {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: 0;
    }

.article .header-text {
        margin-bottom: var(--spacing64);
    }

.article header h1 {
        text-align: left;
        font: var(--h1);
        margin: var(--spacing24) 12% var(--spacing24);
    }

.article header h1 p {
        font: var(--h1);
    }

.article .lede {
        text-align: left;
        margin: 0 12% var(--spacing16);
    }

.article header h1 div {
        font-size: var(--fontSize32);
        line-height: var(--spacing32);
    }

.article .mediaBlock {
        margin: var(--spacing24) 0 var(--spacing32);
    }

.article .actions {
        text-align: center;
    }

.article .tileGroup.additionalTiles {
        margin-top: var(--spacing64);
    }

.article ol, .article ul {
        font-family: var(--serif)
    }

.article ol li, .article ul li {
            padding-left: var(--spacing8);
        }

.article p > strong {
        font: var(--h3);
        display: block;
        margin: var(--spacing32) 0 var(--spacing16);
    }

@media (min-width: 60em) {
        .article header h1 {
            font: var(--formalHeading);
        }
        .article .lede {
            font-size: var(--fontSize110);
        }
    }

.quote {
    margin: var(--spacing64) 0;
    text-align: center;
    font-family: var(--serif);
    font-weight: 700
}
.quote .body {
        color: var(--grey40);
        font-size: var(--fontSize32);
        line-height: var(--lineHeight);
        font-style: italic;
    }
.quote cite {
        font-style: normal;
        font-size: var(--fontSize13);
        display: inline-block;
        margin-top: var(--spacing16);
    }
@media (min-width: 37.5) {
.quote {
        margin: var(--spacing64) -10%
}
    }
@media (min-width: 60em) {
.quote p {
            font-size: var(--fontSize32)
    }
        }

.drawers {
  margin: var(--spacing32) 0
}
.drawers .drawer {
    border-bottom: 1px solid var(--grey5);
  }
.drawers .drawer-header {
    display: flex;
    padding: var(--spacing16) 0;
    cursor: pointer;
  }
.drawers .drawer-title {
    font-weight: bold;
    flex: 1 1 auto
  }
.drawers .drawer-title p {
      margin: 0;
      padding: 0;
    }
.drawers .drawer-icon-container {
    flex: 0 0 20px;
  }
.drawers .drawer-icon {
    transition: transform 200ms ease;
  }
.drawers .drawer-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 200ms ease;
  }
.drawers .drawer-text {
    padding: 0 0 var(--spacing24) 0;
  }
.drawers .drawer[data-expanded="true"] .drawer-body {
      max-height: 10000px;
    }
.drawers .drawer[data-expanded="true"] .drawer-icon {
      transform: rotate(180deg);
    }

.action-bar .container {
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-top: var(--spacing24);
  }

.action-bar .iconWrapper {
    align-items: center;
    background-color: var(--grey3);
    border-radius: 50%;
    color: var(--grey40);
    display: flex;
    font-size: var(--fontSize20);
    height: 2.4em;
    justify-content: center;
    width: 2.4em;
    margin: var(--spacing8)
  }

.action-bar .iconWrapper:hover {
      background: color(var(--grey3) lightness(-5%));
    }

.action-bar .active {
    color: var(--white);
    fill: var(--white);
    background-color: var(--theme-color-100)
  }

.action-bar .active:hover {
      background: color(var(--theme-color-100) lightness(-5%));
    }

.simple-article-template .pageTitle {
        margin: var(--spacing24) 12% var(--spacing8);
        font: var(--formalHeading);
        font-size: var(--fontSize32);
        display: block;
        text-align: center;
    }

.simple-article-template .pageSubtitle {
        text-align: center;
        margin: 0 12% var(--spacing16);
        font: var(--h2);
        display: block;
        font-size: var(--fontSize110);
    }

.simple-article-template .excerpt {
        text-align: center;
        width: 60%;
        display: block;
        margin: 0 auto 3em;
        font-weight: 300;
        font-size: 18px;
        line-height: 1.4;
    }

.simple-article-template .articleBody {
        line-height: 1.4;
    }

.map .map-el {
        min-height: 600px;
        height: 75vh;
        margin-bottom: -150px
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.map .map-el {
            margin-bottom: -80px
    }
        }

.map input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: searchfield-cancel-button;
    }

.map .searchContainer {
        position: relative;
        top: var(--spacing8);
        left: var(--spacing8);
        width: 50vw;
        max-width: 450px;
    }

.map input[type="search"].search {
        background-color: var(--white, #fff);
        background-size: 20px 20px;
        border: 1px solid #8a8a8b;
        border-radius: 3px 0 0 0;
        box-sizing: border-box;
        height: 45px;
        width: calc(100% - 45px);
        padding: 8px 10px 8px 0;
        position: absolute;
        text-indent: 45px;
        z-index: 1;
    }

.map .search:focus {
        box-shadow: 0px 0px 4px #14739d;
    }

.map .searchIcon {
        position: absolute;
        margin: 12px;
        z-index: 10;
    }

.map .submit {
        background-color: #14739d;
        border: none;
        border-radius: 0px 3px 0 0px;
        box-sizing: border-box;
        color: #fff;
        font-size: 20px;
        height: 45px;
        line-height: 10px;
        position: absolute;
        width: 45px;
        left: calc(100% - 45px);
        z-index: 10;
    }

.map {

    /* results box  */
}

.map .resultsContainer {
        display: block;
        font-size: var(--fontSize14);
        padding: 0 var(--spacing8);
        border: 1px solid #666;
        width: 100%;
        border-radius: 0 0 3px 3px;
        position: absolute;
        top: 44px;
        background: var(--white, #fff);
        z-index: 9;
        transition: opacity 200ms linear, visibility 0ms 200ms linear;
        opacity: 0;
        visibility: hidden;
        max-height: 25vh;
        overflow: hidden;
    }

.map .bottom {
        position: absolute;
        bottom: 10px;
        left: 10px;
    }

.map .show {
        opacity: 1;
        visibility: visible;
        transition: opacity 200ms linear, visibility 0ms 0ms linear;
    }

.map .results {
        margin: 0.5em 0 0.75em;
        padding: 0;
        line-height: 1.7;
        list-style: none;
        overflow-y: scroll;
        max-height: 23.7vh;
        box-sizing: border-box
    }

.map .results::-webkit-scrollbar {
            -webkit-appearance: none;
        }

.map .results::-webkit-scrollbar:vertical {
            width: 11px;
        }

.map .results::-webkit-scrollbar:horizontal {
            height: 11px;
        }

.map .results::-webkit-scrollbar-thumb {
            border-radius: 8px;
            border: 2px solid white; /* should match background, can't be transparent */
            background-color: rgba(0, 0, 0, 0.5);
        }

.map .results::-webkit-scrollbar-track {
            background-color: #fff;
            border-radius: 8px;
        }

.map .results a {
            display: block;
            cursor: pointer;
            box-sizing: border-box;
            margin: var(--spacing8);
            line-height: 1.4;
            padding: 0 var(--spacing8);
        }

.map .results .noresults {
            padding: 0 var(--spacing8);
        }

.map .results hr {
            width: 100%;
            margin: 0;
        }

.map-result {
    padding: var(--spacing8) var(--spacing8) var(--spacing4);
    width: 100%;
    min-width: 300px;
    background-color: #fff;
    border: 1px solid #888;
    border-radius: 3px;
    z-index: 50;
    position: absolute;
    top: 55px
}

.map-result a:link,
    .map-result a:visited {
        text-decoration: none;
        color: var(--blue30);
    }

.map-result .closeSmall {
        color: #a19fa1;
        position: absolute;
        font-size: 12px;
        top: 0;
        right: 0;
        cursor: pointer;
        background: transparent;
        border: 0;
        padding: 0
    }

.map-result .closeSmall svg {
            height: 3em;
            width: 3em;
        }

.map-result .title {
        font: var(--h3);
        margin-bottom: 15px;
        margin-right: 35px;
    }

.map-result .addressSection {
        display: flex
    }

.map-result .addressSection div span {
            display: block;
        }

.map-result .addressSection div:first-child {
            flex-grow: 4;
        }

.map-result {

    & .address,
    .directionsLink {
        display: inline-block;
    }
}

.map-result .directionsLink {
        color: #4d84c8;
        align-self: center;
        flex-grow: 3;
        text-align: center;
    }

.map-result .directionIcon {
        display: block;
        font-size: 25px;
        text-align: center;
    }

.map-result .address {
        color: #aeadae;
        font-size: 15px;
        margin-bottom: 10px;
        line-height: 1.4;
    }

.map-result .extras {
        display: flex
    }

.map-result .extras .photos,
        .map-result .extras .moreInfo {
            color: #4d84c8;
            border-top: 1px solid #d8d8d8;
            display: inline-block;
            font-size: 14px;
            margin-top: 7%;
            padding: var(--spacing8) 0 var(--spacing4);
            text-align: center;
            width: 48%;
        }

.map-result .extras .moreInfo {
            border-right: 1px solid #d8d8d8;
        }

.map-result .extras .photoIcon,
        .map-result .extras .infoIcon {
            font-size: 20px;
            margin-right: 5px;
            vertical-align: middle;
        }

.map-result .phone {
        color: #4d84c8;
        font-size: 18px;
    }

.scheduling-template .pageTitle {
        font: var(--h1);
        display: block;
        text-align: center;
        margin: 1.5em 0
    }

@media (min-width: 0em) and (max-width: 37.5em) {

.scheduling-template .pageTitle {
            font-size: var(--fontSize32)
    }
        }

.scheduling-template .subtitle {
        text-align: center;
        margin: 0 12% var(--spacing16);
        font: var(--h2);
        display: block;
        font-size: var(--fontSize110)
    }

.scheduling-template .subtitle p {
            font-family: var(--sans);
        }

.scheduling-template .excerpt {
        text-align: center;
        width: 60%;
        display: block;
        margin: 0 auto 3em;
        font-weight: 300;
        font-size: 18px;
        line-height: 1.4
    }

.scheduling-template .excerpt p {
            font-family: var(--sans);
        }

.scheduling-template .iframeContainer {
        position: relative;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        height: 1000px;
    }

.scheduling-template .iframe {
        overflow: hidden;
        overflow-x: hidden;
        overflow-y: hidden;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0px;
        right: 0px;
        bottom: 0px;
        border: 0;
    }