/*

--------------------------------------------------------------------------------
         # TABLE OF CONTENTS
--------------------------------------------------------------------------------

RESETS
BOOTSTRAP GRID OVERRIDES
BUILDER OVERRIDES
ACCESSIBILITY LINKS
BLOG
FORMS
ALIGNMENT
TEXT ALIGNMENT
GALLERY

*/

/*--------------------------------------------------------------------------------
         # RESETS
--------------------------------------------------------------------------------*/

div,
[class] h1,
[class] h2,
[class] h3,
[class] h4,
[class] h5,
[class] h6,
[class] p,
[class] ol,
[class] ul,
[class] li,
[class] label {
    margin: 0;
}

/*--------------------------------------------------------------------------------
         # BOOTSTRAP GRID OVERRIDES
--------------------------------------------------------------------------------*/

/* --- Containers --- */
[class*="ageDiv"] [class^="container"] {
    position: relative;
    z-index: 1;
    padding-left: var(--gutter-width);
    padding-right: var(--gutter-width);
}

/* --- Width of default containers --- */
@media (max-width: 767px) {
    .container {
        width: 100%;
    }
}

/* --- Width of fluid containers --- */
.container-fluid {
    width: 100%;
}

/* --- Rows --- */
[class*="ageDiv"] .row {
    margin-left: calc(var(--gutter-width) * -1);
    margin-right: calc(var(--gutter-width) * -1);
}

/* --- Make rows inside columns fill column height --- */
[class*="col-"] > .row {
    height: 100%;
}

/* --- Flexbox for regular modules --- */
[class].paddingLarge,
.paddingLarge .row {
    display: flex;
    flex-flow: row wrap;
}

/* --- Column gutters --- */
[class][class*="col-"] {
    padding-left: var(--gutter-width);
    padding-right: var(--gutter-width);
}

/* --- Inline-block utility class --- */
[class][class].d-inline-block {
    display: inline-block;
}

/* --- Layering utility class --- */
[class].layer-front {
    z-index: 2;
}

/* --- Wrap words wider than their containers --- */
[class] * {
    overflow-wrap: break-word;
}

/* --- Bugfix for safari wrapping columns too soon --- */
div.paddingLarge::before,
div.paddingLarge .row::before {
    display: block;
}

/* ------ COLUMNS ON EXTRA-SMALL SCREENS ------ */

/* --- Negative column offsets on extra-small screens --- */

.col-xs-offset-n1 {
    margin-left: -8.33333333%;
}

.col-xs-offset-n2 {
    margin-left: -16.66666667%;
}

.col-xs-offset-n3 {
    margin-left: -25%;
}

.col-xs-offset-n4 {
    margin-left: -33.33333333%;
}

.col-xs-offset-n5 {
    margin-left: -41.66666667%;
}

.col-xs-offset-n6 {
    margin-left: -50%;
}

.col-xs-offset-n7 {
    margin-left: -58.33333333%;
}

.col-xs-offset-n8 {
    margin-left: -66.66666667%;
}

.col-xs-offset-n9 {
    margin-left: -75%;
}

.col-xs-offset-n10 {
    margin-left: -83.33333333%;
}

.col-xs-offset-n11 {
    margin-left: -91.66666667%;
}

.col-xs-offset-n12 {
    margin-left: -100%;
}

/* --- Short columns on extra-small screens --- */
.col-xs-short {
    margin-top: calc(var(--gutter-width) * 2);
    margin-bottom: calc(var(--gutter-width) * 2);
}

/* ------ COLUMNS ON SMALL SCREENS ------ */
@media (min-width: 768px) {

    /* --- Column ordering on small screens --- */
    .first-sm {
        order: -1;
    }

    /* --- Negative column offsets on small screens --- */

    .col-sm-offset-n1 {
        margin-left: -8.33333333%;
    }

    .col-sm-offset-n2 {
        margin-left: -16.66666667%;
    }

    .col-sm-offset-n3 {
        margin-left: -25%;
    }

    .col-sm-offset-n4 {
        margin-left: -33.33333333%;
    }

    .col-sm-offset-n5 {
        margin-left: -41.66666667%;
    }

    .col-sm-offset-n6 {
        margin-left: -50%;
    }

    .col-sm-offset-n7 {
        margin-left: -58.33333333%;
    }

    .col-sm-offset-n8 {
        margin-left: -66.66666667%;
    }

    .col-sm-offset-n9 {
        margin-left: -75%;
    }

    .col-sm-offset-n10 {
        margin-left: -83.33333333%;
    }

    .col-sm-offset-n11 {
        margin-left: -91.66666667%;
    }

    .col-sm-offset-n12 {
        margin-left: -100%;
    }

    /* --- Short columns on small screens --- */
    .col-sm-short {
        margin-top: calc(var(--gutter-width) * 2);
        margin-bottom: calc(var(--gutter-width) * 2);
    }

/* --- End media query --- */
}

/* ------ COLUMNS ON MEDIUM SCREENS ------ */
@media (min-width: 992px) {

    /* --- Column ordering on medium screens --- */
    .first-md {
        order: -1;
    }

    /* --- Negative column offsets on medium screens --- */

    .col-md-offset-n1 {
        margin-left: -8.33333333%;
    }

    .col-md-offset-n2 {
        margin-left: -16.66666667%;
    }

    .col-md-offset-n3 {
        margin-left: -25%;
    }

    .col-md-offset-n4 {
        margin-left: -33.33333333%;
    }

    .col-md-offset-n5 {
        margin-left: -41.66666667%;
    }

    .col-md-offset-n6 {
        margin-left: -50%;
    }

    .col-md-offset-n7 {
        margin-left: -58.33333333%;
    }

    .col-md-offset-n8 {
        margin-left: -66.66666667%;
    }

    .col-md-offset-n9 {
        margin-left: -75%;
    }

    .col-md-offset-n10 {
        margin-left: -83.33333333%;
    }

    .col-md-offset-n11 {
        margin-left: -91.66666667%;
    }

    .col-md-offset-n12 {
        margin-left: -100%;
    }

    /* --- Short columns on medium screens --- */
    .col-md-short {
        margin-top: calc(var(--gutter-width) * 2);
        margin-bottom: calc(var(--gutter-width) * 2);
    }


/* --- End media query --- */
}

/* ------ COLUMNS ON LARGE SCREENS ------ */
@media (min-width: 1200px) {

    /* --- Column ordering on large screens --- */
    .first-lg {
        order: -1;
    }

    /* --- Negative column offsets on extra-small screens --- */

    .col-lg-offset-n1 {
        margin-left: -8.33333333%;
    }

    .col-lg-offset-n2 {
        margin-left: -16.66666667%;
    }

    .col-lg-offset-n3 {
        margin-left: -25%;
    }

    .col-lg-offset-n4 {
        margin-left: -33.33333333%;
    }

    .col-lg-offset-n5 {
        margin-left: -41.66666667%;
    }

    .col-lg-offset-n6 {
        margin-left: -50%;
    }

    .col-lg-offset-n7 {
        margin-left: -58.33333333%;
    }

    .col-lg-offset-n8 {
        margin-left: -66.66666667%;
    }

    .col-lg-offset-n9 {
        margin-left: -75%;
    }

    .col-lg-offset-n10 {
        margin-left: -83.33333333%;
    }

    .col-lg-offset-n11 {
        margin-left: -91.66666667%;
    }

    .col-lg-offset-n12 {
        margin-left: -100%;
    }

    /* --- Short columns on large screens --- */
    .col-lg-short {
        margin-top: calc(var(--gutter-width) * 2);
        margin-bottom: calc(var(--gutter-width) * 2);
    }


/* --- End media query --- */
}

/*--------------------------------------------------------------------------------
         # BUILDER OVERRIDES
--------------------------------------------------------------------------------*/

 /* --- Keep text readable in the editor --- */
#tinymce {
    background: rgb(var(--background-color)) !important;
}

/* --- Appearance of corner triangle to add content --- */
#addContentCorner {
    background: none;
    line-height: 1.4;
}

/* --- Ensure admin nav stays in fixed position --- */
[class].navbar-fixed-top {
    position: fixed;
}

/* --- Prevent accidental overrides of header links --- */
#adminNav a {
    text-decoration: none !important;
}

/* --- Keep edit buttons in top left of modules --- */
div[style*="z-index: 1000;"] {
    top: 0;
    left: 0;
}

/* --- Place info-bar edit button on top right --- */
.info-bar div[style*="z-index: 1000;"] {
    left: auto;
    right: 15px;
}

/*--------------------------------------------------------------------------------
         # ACCESSIBILITY LINKS
--------------------------------------------------------------------------------*/

.visible-focused:focus {
    display: block;
    clip: auto;
    position: fixed;
    z-index: 150;
    top: 15px;
    left: 15px;
    height: auto;
    width: auto;
    padding: 8px 20px;
    background-color: rgb(var(--background-color));
    color: rgb(var(--text-color)) !important;
    border: 1px solid currentColor;
    transition: none;
}

/*--------------------------------------------------------------------------------
         # BLOG
--------------------------------------------------------------------------------*/

/* --- Match left/right padding of blog modules to other modules --- */
.row.paddingXLarge {
    padding-left: var(--gutter-width) !important;
    padding-right: var(--gutter-width) !important;
}

/* --- Remove extra space under blog heading --- */
.paddingXLarge h1 + br {
    display: none;
}

/* --- Match dividers on blog overview to theme --- */
.paddingXLarge div[style*="border-bottom"] {
    border-bottom: none !important;
}

.paddingXLarge div[style*="border-bottom"]::after {
    content: "";
    display: block;
    height: 1px;
    width: auto;
    max-width: none;
    margin-top: 10px;
    margin-bottom: -10px;
    margin-left: -10px;
    margin-right: -10px;
    background: rgba(var(--text-color), 0.2);
}

/* --- Make archive link match base text size --- */
a[style*="font-size:smaller;"] {
    font-size: inherit !important;
}

/*--------------------------------------------------------------------------------
         # FORMS
--------------------------------------------------------------------------------*/

/* --- Limit form width --- */
form[name^="formFrm"] .col-xs-12 {
    margin: 0 auto;
    max-width: 600px;
    float: none;
}

/* --- Stack labels above inputs, remove excess spacing --- */
form[name^="formFrm"] .form-group [class*="col-"] {
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: left;
}

/* --- Input fields --- */
form[name^="formFrm"] .form-control {
    width: 100% !important;
    font-size: calc(8px + 0.5rem);
    height: auto;
}

/* --- Match form labels to surrounding text --- */
form[name^="formFrm"] label,
form[name^="formFrm"] b {
    font-weight: inherit;
    font-size: calc(8px + 0.5rem);
}

/* --- Checkbox label --- */
[class].checkbox label {
    padding-left: 3px;
}

/* --- Checkbox styles --- */
form[name^="formFrm"] input[type="checkbox"] {
    position: relative;
    margin: 0;
    margin-right: 0.5rem;
    transform: scale(1.3);
}

/* --- Remove excess space above submit button --- */
form[name^="formFrm"] .form-group:last-child > label:first-child {
    display: none;
}

/* --- Center the submit button --- */
[class] form[name^="formFrm"] .btn {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* --- Appearance of thank you message --- */
div[align="center"][style*="color:red;"] {
    color: inherit !important;
}

/*--------------------------------------------------------------------------------
         # ALIGNMENT
--------------------------------------------------------------------------------*/

/* ------ VERTICAL ALIGNMENT OF ADJACENT COLUMNS ------ */

.v-align-top.row,
.v-align-top .row {
    align-items: flex-start;
}

.v-align-center.row,
.v-align-center .row {
    align-items: center;
}

.v-align-bottom.row,
.v-align-bottom .row {
    align-items: flex-end;
}

.v-align-stretch.row,
.v-align-stretch .row {
    align-items: stretch;
}

/* ------ SELF-ALIGNED COLUMNS ------ */

[class].v-align-self-top {
    align-self: flex-start;
}

[class].v-align-self-center {
    align-self: center;
}

[class].v-align-self-bottom {
    align-self: flex-end;
}

[class].v-align-self-stretch {
    align-self: stretch;
}

/* ------ VERTICAL ALIGNMENT OF HERO AND CARD CONTENTS ------ */

[class].v-align-top.hero,
[class].v-align-top > [class^="container"],
[class].v-align-top > .card-body  {
    justify-content: flex-start;
}

[class].v-align-center.hero,
[class].v-align-center > [class^="container"],
[class].v-align-center > .card-body {
    justify-content: center;
}

[class].v-align-bottom.hero,
[class].v-align-bottom > [class^="container"],
[class].v-align-bottom > .card-body {
    justify-content: flex-end;
}

[class].v-align-stretch > .card-body {
    justify-content: space-around;
}

/* --- Disable aligning buttons to bottom of cards if alignment set --- */
.card[class*="v-align-"] .card-body .btn-wrap {
    margin-top: 0;
}

/* ------ FLOATED ELEMENTS ON SMALL SCREENS AND UP ------ */
@media (min-width: 768px) {

    [class].float-sm-left {
        float: left;
        margin-right: calc(var(--gutter-width) * 2);
        max-width: 50%;
    }

    [class].float-sm-right {
        float: right;
        margin-left: calc(var(--gutter-width) * 2);
        max-width: 50%;
    }

/* --- End media query --- */
}

/* ------ FLOATED ELEMENTS ON MEDIUM SCREENS AND UP ------ */
@media (min-width: 992px) {

    [class].float-md-left {
        float: left;
        margin-right: calc(var(--gutter-width) * 2);
        max-width: 50%;
    }

    [class].float-md-right {
        float: right;
        margin-left: calc(var(--gutter-width) * 2);
        max-width: 50%;
    }

/* --- End media query --- */
}

/* ------ FLOATED ELEMENTS ON LARGE SCREENS ------ */
@media (min-width: 1200px) {

    [class].float-lg-left {
        float: left;
        margin-right: calc(var(--gutter-width) * 2);
        max-width: 50%;
    }

    [class].float-lg-right {
        float: right;
        margin-left: calc(var(--gutter-width) * 2);
        max-width: 50%;
    }

/* --- End media query --- */
}

/*--------------------------------------------------------------------------------
         # TEXT ALIGNMENT
--------------------------------------------------------------------------------*/

/* ------ TEXT ALIGNMENT ON ALL SCREENS ------ */

[class].text-left {
    text-align: left;
}

[class].text-center {
    text-align: center;
}

[class].text-right {
    text-align: right;
}

[class].text-justify {
    text-align: justify;
}

[class].text-inherit {
    text-align: inherit;
}

/* ------ TEXT ALIGNMENT ON SMALL SCREENS AND UP ------ */
@media (min-width: 768px) {

    [class].text-sm-left {
        text-align: left;
    }

    [class].text-sm-center {
        text-align: center;
    }

    [class].text-sm-right {
        text-align: right;
    }

    [class].text-sm-justify {
        text-align: justify;
    }

    [class].text-sm-inherit {
        text-align: inherit;
    }

/* --- End media query --- */
}

/* ------ TEXT ALIGNMENT ON MEDIUM SCREENS AND UP ------ */
@media (min-width: 992px) {

    [class].text-md-left {
        text-align: left;
    }

    [class].text-md-center {
        text-align: center;
    }

    [class].text-md-right {
        text-align: right;
    }

    [class].text-md-justify {
        text-align: justify;
    }

    [class].text-md-inherit {
        text-align: inherit;
    }

/* --- End media query --- */
}

/* ------ TEXT ALIGNMENT ON LARGE SCREENS AND UP ------ */
@media (min-width: 1200px) {

    [class].text-lg-left {
        text-align: left;
    }

    [class].text-lg-center {
        text-align: center;
    }

    [class].text-lg-right {
        text-align: right;
    }

    [class].text-lg-justify {
        text-align: justify;
    }

    [class].text-lg-inherit {
        text-align: inherit;
    }

/* --- End media query --- */
}

/*--------------------------------------------------------------------------------
         # GALLERY
--------------------------------------------------------------------------------*/

/* ------ OUTER GALLERY LAYOUT ------ */

[href$="box.css"] ~ div {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: auto !important;
    margin-left: -8px;
    margin-right: -8px;
    padding: 0.8rem var(--gutter-width);
}

/* ------ GALLERY ITEMS ------ */
[href$="box.css"] ~ div > div {
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 8px;
    border: none !important;
    background: none !important;
    box-shadow: none;
}

/* --- Hide last item in gallery (workaround) --- */
[href$="box.css"] ~ div > div:last-child {
    display: none !important;
}

/* --- Shape and appearance of gallery items --- */
[href$="box.css"] ~ div a {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 100%; /* Adjust aspect ratio of gallery previews here */
    transition: all 0.25s;
    border-radius: var(--card-border-radius);
    box-shadow: 0 0 6px -2px var(--shadow-color);
}

/* --- Make image previews fill gallery items --- */
[href$="box.css"] ~ div img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
    transition: all 0.5s ease-in-out;
}

/* --- Gallery item borders --- */
[href$="box.css"] ~ div > div a::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    border: 1px solid rgba(128, 128, 128, 0.5);
    box-shadow: inset 0 0 0 600px transparent;
    transition: 0.25s;
}

/* --- Hover and focus tint on gallery items --- */
[href$="box.css"] ~ div > div a:hover::after,
[href$="box.css"] ~ div > div a:focus::after {
    background-color: rgba(0, 0, 0, 0.35);
}

/* --- Additional hover and focus effects on gallery items --- */
[href$="box.css"] ~ div > div a:hover > img,
[href$="box.css"] ~ div > div a:focus > img {
    transform: scale(1.03);
}

/* ------ GALLERY ITEMS ON EXTRA-SMALL SCREENS ------ */

/* --- Two items per line on extra-small screens --- */
[href$="box.css"] ~ div > div {
    width: 50%;
    max-width: 50%;
}

/* --- Fit items to last line on extra-small screens --- */
[href$="box.css"] ~ div > div:nth-child(2n + 1):nth-last-child(-n + 4),
[href$="box.css"] ~ div > div:nth-child(2n + 1):nth-last-child(-n + 4) ~ div {
    flex-basis: 0;
}

/* ------ GALLERY ITEMS ON SMALL SCREENS ------ */
@media (min-width: 480px) {

    /* --- Three items per line on small screens --- */
    [href$="box.css"] ~ div > div {
        width: 33.333%;
        max-width: 33.333%;
    }

    /* --- Fit items to last line on small screens --- */
    [href$="box.css"] ~ div > div:nth-child(3n + 1):nth-last-child(-n + 6),
    [href$="box.css"] ~ div > div:nth-child(3n + 1):nth-last-child(-n + 6) ~ div {
        flex-basis: 0;
    }
/* --- End media query --- */
}

/* ------ GALLERY ITEMS ON MEDIUM AND LARGE SCREENS ------ */
@media (min-width: 768px) {

    /* --- Five items per line on medium and large screens --- */
    [href$="box.css"] ~ div > div {
        width: 20%;
        max-width: 20%;
    }

    /* --- Fit items to last line on medium and large screens --- */
    [href$="box.css"] ~ div > div:nth-child(5n + 1):nth-last-child(-n + 10),
    [href$="box.css"] ~ div > div:nth-child(5n + 1):nth-last-child(-n + 10) ~ div {
        flex-basis: 0;
    }
/* --- End media query --- */
}

/* ------ GALLERY MODAL ------ */

/* --- Disable default gallery modal --- */
#lightbox, #overlay {
    display: none !important;
}

/* --- Keep track of when gallery modal is open --- */
.gallery-modal-open [class*="ageDiv"] {
    pointer-events: none;
}

/* --- Outer wrapper of gallery modal --- */
.gallery-modal {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1500;
}

/* --- Gallery backdrop --- */
.gallery-modal::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform: scale(1.2);
    background: rgba(0, 0, 0, 0.9);
}

/* --- Animated loading icon --- */
.gallery-modal::after {
    content: "";
    display: inline-block;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 5px solid #fff;
    border-radius: 50%;
    padding: 20px;
    border-top-color: transparent;
    animation: rotate 1s linear infinite;
}

/* --- Loading icon animation --- */
@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* --- Gallery modal container --- */
.gallery-modal-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(15px + 5vmin);
    color: #fff;
}

/* --- Gallery modal image --- */
.gallery-modal img {
    height: auto;
    width: auto;
    max-height: 100%;
    max-width: 100%;
    outline: none;
}

/* --- Label for gallery modal --- */
.gallery-label {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translatex(-50%);
    padding-bottom: 5px;
    font-size: 18px;
}

/* --- Positioning of prev/next controls for gallery modal --- */
.gallery-controls {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: calc(5px + 1vmin);
}

/* --- Appearance of prev/next controls for gallery modal --- */
[class].gallery-prev,
[class].gallery-next {
    display: flex;
    padding: calc(10px + 1vw);
    line-height: 1;
    font-size: calc(20px + 1vw);
    font-family: "Glyphicons Halflings";
    background: rgba(0, 0, 0, 0.9);
    opacity: 0.7;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    transition: opacity 0.25s;
    color: inherit;
    text-decoration: none;
}

/* --- Hover effects on prev / next controls for gallery modal --- */
[class].gallery-prev:hover,
[class].gallery-next:hover {
    opacity: 1;
}

/* --- Push prev button to left --- */
.gallery-prev {
    margin-right: auto;
}

/* --- Left arrow icon --- */
.gallery-prev::before {
    content:"\e079";
}

/* --- Push next button to right --- */
.gallery-next {
    margin-left: auto;
}

/* --- Right arrow icon --- */
.gallery-next::before {
    content:"\e080";
}

/* --- Positioning and appearance of close button for gallery modal --- */
[class].gallery-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: calc(15px + 1vw) calc(5px + 0.5vw);
    color: inherit;
    text-decoration: none;
    text-shadow: 0 0 5px #000;
    background: none;
    border: none;
    opacity: 0.7;
    transition: all 0.25s;
}

/* --- Hover effects on close button for gallery modal --- */
.gallery-close:hover {
    opacity: 1;
}

/* --- Close icon --- */

.gallery-close::before,
.gallery-close::after {
    content: "";
    display: block;
    width: calc(25px + 1vw);
    height: 4px;
    background: currentColor;
    transform: translatey(2px) rotate(45deg);
}

.gallery-close::after {
    transform: translatey(-2px) rotate(-45deg);
}