/* Globally used variables etc */
body {
    overflow-x:hidden;
}

img.center, .captionImage.center {
    max-width: 100%;
    height: auto;
    display:block;
    margin:0 auto !important;
}
img.left {
    max-width: 100%;
    height: auto;
    float:left;
    margin: 0 12px 12px 0;
}
img.right {
    max-width: 100%;
    height: auto;
    float:right;
    margin: 0 0 12px 12px;
}

/* colouring classes, :root vars declared in Gecco\Skin\PageControllerExtension, Gecco\Skin\SiteConfigExtension */
.primary-color {
    color: var(--primaryColor);
}
.primary-color > * {
    color: var(--primaryColor);
}
.secondary-color {
    color: var(--secondaryColor);
}
.secondary-color > * {
    color: var(--secondaryColor);
}
.tertiary-color {
    color: var(--tertiaryColor);
}
.tertiary-color > * {
    color: var(--tertiaryColor);
}

.bg-primary-color {
    background-color: var(--primaryColor);
}
.bg-secondary-color {
    background-color: var(--secondaryColor);
}
.bg-tertiary-color {
    background-color: var(--tertiaryColor);
}

/* buttons */
.skin-button-primary {
    color: #ffffff !important;
    background-color: var(--primaryColor);
    border: none;
    align-self: center;
}
.skin-button-primary:hover {
    background-color:rgba(0, 0, 0, 0.6);
}
.skin-button-secondary {
    color: #ffffff !important;
    background-color: var(--secondaryColor);
    border: none;
    align-self: center;
}
.skin-button-secondary:hover {
    background-color:rgba(0, 0, 0, 0.6);
}

.full-height {
    height: 100vh;
}

/* horizontal rules */
.hr-primary {
    border-top: 2px solid var(--primaryColor);
}
.hr-secondary {
    border-top: 2px solid var(--secondaryColor);
}
.hr-tertiary {
    border-top: 2px solid var(--tertiaryColor);
}

/* links */
.link-color-primary a {
    color: var(--primaryColor) !important;
}
.link-color-secondary a {
    color: var(--secondaryColor) !important;
}
.link-color-tertiary a {
    color: var(--tertiaryColor) !important;
}
.link-color-primary a:hover, .link-color-secondary a:hover, .link-color-tertiary a:hover {
    filter: brightness(70%);
    transition: all 0.2s;
}
.page-links {
    list-style: none;
}

.page-links li.current {
    border-left:4px solid var(--primaryColor);
    padding-left: 16px !important;
}