/* Change some root colors and settings of the document */


:root {

    --cassiopeia-color-primary: #356a82;
    --cassiopeia-color-primary-faded: rgba(53, 106, 130, 0.67);
    --cassiopeia-color-secondary: #c4e0ec;
    --cassiopeia-color-secondary-faded: rgba(196, 224, 236, 0.73);
    --cassiopeia-color-link:  #c4e0ec;
    --cassiopeia-color-hover: #356a82;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --primary: #0d6efd;
    --secondary: #6c757d;
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #212529;
    --primary-rgb: 13, 110, 253;
    --secondary-rgb: 108, 117, 125;
    --success-rgb: 25, 135, 84;
    --info-rgb: 13, 202, 240;
    --warning-rgb: 255, 193, 7;
    --danger-rgb: 220, 53, 69;
    --light-rgb: 248, 249, 250;
    --dark-rgb: 33, 37, 41;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --body-color-rgb: 33, 37, 41;
    --body-bg-rgb: 255, 255, 255;
    --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --body-font-family: var(--cassiopeia-font-family-body);
    --body-font-size: 1.2rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #383838;
    --body-bg: #fff;


}
/* TABLE STRIP COLOURS */

.table {
    --table-striped-bg: #f7ebed;
    --table-striped-color: none;
    --table-hover-color: none;
    --table-hover-bg: none;
}


/* Use the imported font (See first lines of the document) on the page: On Google you can also find the CSS instruction for using the font. If you put this in the body element then the font will be used on the whole website. */

body {
    font-family: 'Quattrocento', sans-serif;
    width:100vw;
   overflow-x: hidden;


}

body.wrapper-fluid .site-grid {

  /*  width:99vw;*/
}

body.wrapper-fluid .grid-child {
   max-width: 1200px;
    padding-bottom: 2rem;

}

/* HEADER */

.header {
    height: auto;
    /*padding-bottom: 25px;*/
    background-image: none;
    background-color: transparent;
    color: #333;
}


.container-header {
    position: relative;
    z-index: 10;
    background-color: transparent;
    background-image: linear-gradient(to top,transparent,#15495f);

}
.container-header .navbar-brand
{
    width: 100%;
    text-align: center;
}
.container-header .navbar-brand a {
    text-decoration: none;
}
.container-header .brand-logo {
    font-size: calc(1.0rem + 4.5vw);
    color: #999;
    font-family: 'Cinzel Decorative', serif;
}
@media (max-width: 767px){
    .container-header .brand-logo {
        font-size: calc(1.0rem + 5.5vw);
        padding-right: 25px;
    }
}
.container-banner {

    margin: 0;
}

/*Smaller banner - not in fluid layout
.container-banner .banner-overlay {
    height: 100vh;
}
*/


/*  SLIDER */

.ari-image-slider-wrapper {
    box-sizing: border-box;
    display: block;
    z-index: 1;
    width: 100vw;
    position: relative;
   /* left: 50%;
    margin: -50vw;*/

}
@media (min-width: 1801px) {
    .ari-image-slider-wrapper {
        margin-top: -250px!important;
    }
}
@media (max-width: 1800px) {
    .ari-image-slider-wrapper {
        margin-top: -225px!important;
    }
}
@media (max-width: 1200px) {
    .ari-image-slider-wrapper {
        margin-top: -190px!important;
    }
}
@media (max-width: 979px) {
    .ari-image-slider-wrapper {
        margin-top: -145px!important;
    }
}

@media (max-width: 767px) {
    .ari-image-slider-wrapper {
        margin-top: -118px !important;
    }
    .visible-phone .ari-image-slider-wrapper {
        margin-top: -130px !important;
    }
    .art-pages img.nivo-main-image    {
            width: auto!important;
           height: 200px!important;

        }

    }
@media (max-width: 600px) {
    .ari-image-slider-wrapper {
        margin-top: -90px!important;
    }
}

/* HOME CARDS */
.as-cards{
    margin-bottom:60px;
}

.as-cards a:link, .as-cards a:visited {
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    position: relative;
    height: 274px;
    width: 275px;
    text-align: center;
    box-shadow: 3px 3px 21px rgba(0,0,0,0.3);
    -webkit-box-shadow: 3px 3px 21px rgba(0,0,0,0.3);
    transition: box-shadow .1s;
    -webkit-transition: box-shadow .1s;
}
.as-cards h3 {
    font-family: Quattrocento,sans-serif;
    font-weight: 300;
    color: var(--cassiopeia-color-primary);
    height: 274px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.as-cards a:active, .as-cards a:hover {
    box-shadow: 0.5px 0.5px 1px rgba(0,0,0,.6);
    -webkit-box-shadow: 0.5px 0.5px 1px rgba(0,0,0,.6);
}
.as-cards a {
    text-decoration: none!important;
}
.as-cards ul li {
    list-style: disc;
    margin-left: 15px;
    line-height: 175%;
}
@media (max-width: 767px){
    .as-cards a:link, .as-cards a:visited {
        height: 274px;
        width: 275px;
    }
/*    .as-cards h3{
        font-size: 24px;
    }*/

}



/* table remove border bottom*/
.table>:not(caption)>*>* {

 border-bottom-width: 0;
}



/* Modules have the class card, so you control them with .card - if you want to control only a specific module, you can give the module its own CSS class in the settings and then control it with that */
/*
.card {
    box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
}
*/
/* Modules are on different module positions in the Cassiopeia template then the modules get in addition to card also the position as class name, for example main-top - so if you want to change all modules to main top you take .main-top.card */

.main-top.card {
    background: #e1e9f5;
}


/* Headings are html elements, the main heading is an h1, then comes h2, h3, h4 and so on. You control an html element by simply writing the name in front of it */

h1 {
    font-family: 'Quattrocento', serif;
    color: var(--cassiopeia-color-primary);
    line-height: 125%;
    padding: 1rem 0 1rem 1rem;
    font-size: calc(1.375rem + 2.5vw);
    font-weight: 300;

    word-spacing: 5px;
}

h2, .h2 {
    font-family: 'Quattrocento', serif;
    color: var(--cassiopeia-color-primary);
    line-height: 125%;
    padding: 1rem 0 1rem 1rem;
    font-size: calc(1.375rem + 2.0vw);
    font-weight: 300;
    word-spacing: 5px;

}


h3, .h3 {
    font-family: 'Quattrocento', serif;
    color: var(--cassiopeia-color-primary);
    line-height: 125%;
    padding: 1rem 0 1rem 1rem;
    font-size: calc(1.3rem + 1.2vw);
    font-weight: 300;
    word-spacing: 5px;
}


h4, .h4 {
    font-family: 'Quattrocento', serif;
    color: var(--cassiopeia-color-primary);
    line-height: 125%;
    padding: 1rem 0 1rem 1.2rem;
   font-size: calc(1.3rem + 0.8vw);

    font-weight: 300;
    font-style: italic;

}
@media (max-width: 767px) {
    h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
        padding: 1rem 0 1rem 0;
    }
}

dt {
    font-weight: 400;
}

ul li {
    list-style: disc;
    margin-left: 60px;
    line-height: 175%;
}
li::marker {
    color: var(--cassiopeia-color-primary);
}

/* menu-override */
ul.nav.navbar-nav > li {
    list-style: none;
}

p {
    margin-left: 40px
}



/* In Joomla most buttons have the class btn-primary - in the element inspector you can check if the button you want to color really has this color.
*/

.btn-primary {
    background: var(--cassiopeia-color-link);
    padding: 0.5rem 0.75rem 0.5rem 0.75rem;
    margin: 2rem 0;
    display: block;
   /* width: 190px;*/
    text-align: center;
    color: #333!important;
}
a.btn-primary  {
    text-decoration: none;
    color: #fff!important;

}

/* If you want to color something, only if you move the mouse over it then write :hover behind it
*/

.btn-primary:hover {
    background: var(--cassiopeia-color-hover);
    color: #fff!important;

}

/* In Joomla all article images have the class item-image, if you want to control only a specific image, then you have to give the image inside the article its own CSS class.
*/
/*
.item-image {
    border: 2px solid #ff0000;
}
*/

/*If you run into icons on the website, you can color them individually*/
.icon-as {
    color:var(--cassiopeia-color-primary);
    padding:  10px 10px 5px 10px;

}
@media (max-width: 767px) {
    .icon-as {
        color: var(--cassiopeia-color-primary);
        padding: 10px 10px 5px 5px;
    }
}


/* or you color all icons with this special statement - includes hamburger lines*/

.fa, .fas, [class*="icon-"], [class^="icon-"] {
   /* color:var(--cassiopeia-color-primary);*/

}
.fa.fa-lg.fa-bars.hamburgernav {

    font-size: 30px!important;
    line-height: 1.05em!important;
    margin-right: 20px;
}

.fa-atom::before {
    font-family: "Font Awesome 5 Free";
    content: "\f5d2";
    margin-right: 10px;
    font-weight: 900;
}
.back-to-top-link {
   padding: .25em;
    bottom: .8rem;
    border-radius: .2rem;

}
.back-to-top-link, .back-to-top-link:focus {
    margin-right: 20px;
    background-color: #356a8247;
    border: 1px solid var(--white,#fff);
    color: var(--white, white)!important;

}
.back-to-top-link:hover {
    color: var(--white, white);
    background-color: var(--cassiopeia-color-primary);
    border-color: var(--white, white);
}

/* HOME HEADING FEATURE  */


.heading-container{
    position: relative;
    display: block;
    margin-left: 15vw;
    height: auto;
    padding: 40px 0px 120px 80px;

}

@media (max-width: 900px) {
    .heading-container {
        margin-left: 8vw;
        padding: 40px 20px 125px 20px;
    }
}

/*Colour BANDS */
.as-blue-band .row, .as-white-band .row, .as-white-band-home .row {
    max-width: 1320px;
    margin: auto;
}
.as-blue-band, .as-white-band, as-white-band-home  {
    box-sizing: border-box;
    display: block;
    width: 100vw;
    position: relative;
    left: 50%;
    overflow: hidden;
}
.as-blue-band  {
    margin: 1vw 0 0 -50vw;
    padding: 3vw 5vw 3vw 6vw;
    background-color: #335f844d;
}
.as-white-band  {
    margin: 0 0 0 -50vw;
    padding: 3vw 5vw 3vw 6vw;
}
.as-white-band-home  {
    margin: 0 0 0 0;
    padding: 6vw 5vw 3vw 10vw;
}
@media (max-width: 979px){
    .as-blue-band, .as-white-band, .as-white-band-home {
        padding: 5vw 5vw 3vw 6vw;
    }
}

.photo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    z-index: 2;

}

.photo-clipped {
    -webkit-clip-path: polygon(0 0,100% 10%,100% 100%,0 90%);
    clip-path: polygon(0 0,100% 10%,100% 100%,0 90%);

}


/* The page footer of Cassiopeia has the class "footer" so you control it with .footer */


.footer {
    margin-top: 0;
    padding-top: 30px;
    padding-bottom: 50px;
    color: white;
    background-color: var(--cassiopeia-color-primary);
    background-image: none!important;

}
.footer .grid-child {
    align-items: flex-start;
    justify-content: space-around;
    padding: 2.5rem 0.5em;
    display: flow;
}
.footer .row {
    margin-right: calc(3.5*var(--gutter-x));
    margin-left: calc(4.5*var(--gutter-x));
}
@media (max-width: 767px) {
    .footer .row {
        margin-right: calc(2.5*var(--gutter-x));
        margin-left: calc(2.5*var(--gutter-x));
    }

}
.footer h2{
    color: white;
    font-size: calc(1rem + 1.5vw);
    padding: 0 0 1rem 0;
}
.footer a {
    text-decoration: none;
    color: white;
}
.footer a:hover {
    text-decoration: underline;
    color: white;
}
.footer ul li {
    list-style: none;
    padding-right: 40px;
    margin-left: 0;
    line-height: 250%;
}


@supports (display: grid) {
    .site-grid {
        display: grid;
        grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". menu menu menu menu ." ". comp comp comp comp ." ". side-r side-r side-r side-r ." ". side-l side-l side-l side-l ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." ". footer footer footer footer .";
        grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end];
        grid-gap: 0 1em;
    }

    @media (min-width: 992px) {
        .site-grid {
            grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". menu menu menu menu ." ". side-l comp comp side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." ". footer footer footer footer .";
        }
    }
}




/* OFFLINE PAGE  */

.offline-card {

    border: 0;
    box-shadow: none;

}


/*GENERAL MEDIA */
@media (max-width: 767px) {
    body.wrapper-fluid .grid-child {
        padding: 0;
    }
    ul {
        padding-left: 1.2rem;
    }
    ul li {
        margin-left: 5px;
    }
    p {
        margin-left: 0;
    }
    .container-header .container-nav {
        padding-bottom: 0;
    }
    .footer > p{
        margin: 1rem;

    }

}



/* TABLES  */

.table-striped-columns>:not(caption)>tr>:nth-child(2n), .table-striped>tbody>tr:nth-of-type(odd)>* {
    --table-accent-bg: var(--table-striped-bg);
    color: var(--table-striped-color);
}


/* BUTTON */

.as-button {
    position: relative;
    display: inline-block;
    border-width: 0;
    border-collapse: separate;
    -webkit-border-radius: 0;
    -webkit-background-origin: border !important;
    -moz-background-origin: border !important;
    background-origin: border-box !important;
    background-color: var(--cassiopeia-color-secondary)!important;
    padding: 5px 10px;
    margin: 10px 10px 10px 0;
    height: 27px;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
    text-indent: 0;
    line-height: 150%;

}

a.as-button, a.as-button:link, a.pas-button:visited, a:link.as-button:link, body a.as-button:link, body a.as-button:visited, button.as-button, input.as-button {
    text-decoration: none;
    color: #333;
    overflow: visible;
    cursor: pointer;
    text-indent: 0;
    line-height: 27px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    padding: 5px 10px;
     margin: 10px 10px 10px 0;
}
input.as-button {
    float: none !important;
    -webkit-appearance: none
}

.as-button.active, .as-button.active:hover {
    background: var(--cassiopeia-color-primary)!important;
    padding: 5px 10px;
    margin: 10px 10px 10px 0;
    color: #fff!important;
}

.as-button.hover, .as-button:hover {
    background: var(--cassiopeia-color-primary)!important;
    padding: 5px 10px;
    margin: 10px 10px 10px 0;
    color: #fff!important;
}


/* FORMS  */

.form-control {
    border-radius: 0;
    max-width: 600px;
   /* padding:0;*/
}
.btn {
    border-radius: 0
}


.com-contact.contact {
    margin-left: 30px;
}

.com-contact__info {
    margin-left: 50px;
}
.com-contact__form.contact-form {
    margin-left: 50px;
}
@media (max-width: 767px) {
    .com-contact.contact {
        margin-left: 0;
    }

    .com-contact__info {
        margin-left: 20px;
    }
    .com-contact__form.contact-form {
        margin-left: 0;
    }
}
.contact-miscinfo dt .jicons-text{
    display: none;
}

@media (width >= 1200px){
.com-contact__container {
    grid-template-columns: none;
    }
}



/* NAV BURGER  */

.menu-spacer{
    height: 24px;
    width: 14px;
    display: block;

}
.offcanvas_show {
    top: 10px !important;
    right: 0px !important;

}
@media (max-width: 767px) {

    .offcanvas_show {
        top: -7px !important;
        right: -5px !important;
    }
}
.sidenav ul li {
    list-style: none;
    margin-left: 10px;
    margin-bottom: 0;

}
@media (max-width: 767px){
    .sidenav ul li {
        list-style: none;
        line-height: 125%;
    }
    .sidenav ul li ul li {
        list-style: none;
        line-height: 125%;
    }
}

.sidenav a {
    text-decoration: underline!important;
    text-decoration-color: rgba(53, 106, 130, 0)!important;
    transition: text-decoration-color 0.6s!important;
}
.sidenav a:hover {
    text-decoration-color: rgba(53, 106, 130, 1)!important;
}
.sidenav .closebtn {
    top: -28px!important;
    font-size: 80px!important;
}
.sidenav .closebtn:hover{
   /* background-color: transparent;*/
    text-decoration: none!important;
}

.navbar-nav {
   /* margin-left: 50vw;*/
    margin-top:-30px;
}
@media (min-width: 768px){
    .navbar-nav {
        width:400px!important;
        float:right;
    }
}
@media only screen and (max-width: 979px) {
    .navbar-nav {
    margin-left: 0;
        margin-bottom: 40px;
}
}
@media (min-width: 200px) and (max-width: 5000px) {
    .hamburgernav {
         border-radius: 0!important;
    }
}

/* VISIBLE VS INVISIBLE BANNERS  */

.visible-phone {
    display: none!important;

}

.visible-non-phone {
    display: inherit!important;
    width: 100vw!important;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}
/*HEADER ON SMALL DEVICES */
@media (max-width: 767px){
    .visible-phone {
        display: inherit!important;

        margin-left: -20px;
        margin-top: -20px;
    }
    .visible-non-phone {
        display: none!important;
    }
}

/* IMAGE GALLERY  */
.ig-gallery-wrapper {
    margin-left: auto;
    margin-right: auto;
}
.igui-icon {
    color: transparent;
}
.igui-lightbox-toolbar {
    background: rgb(0 0 0 / 0%);
}
.igui-light .igui-link, .igui-light .igui-link:hover, .igui-light a, .igui-light a:hover, .igui-overlay-primary .igui-link, .igui-overlay-primary .igui-link:hover, .igui-overlay-primary a, .igui-overlay-primary a:hover {
    color: var(--cassiopeia-color-primary)!important;
}
.ig-image-description {
    font-size: 1.1rem;
    line-height: 125%;
    padding: 5px 0;
}
.ig-slideshow-item-inner-lboxon  {
    cursor: zoom-in!important;
}
.ig-slideshow-button svg {
background: rgba(0, 0, 0, .3);
}
.ig-slideshow-button svg {
    background: transparent;
}
.igui-lightbox{
    background: #fff;
}
.ig-lightbox-descriptions {
    color: #333;
}

.ig-lightbox-descriptions-overlay {
    background: #fff;
}
.igui-lightbox-toolbar * {
    color: var(--cassiopeia-color-primary) !important;
}
.ig-lightbox-button svg {
    background: transparent !important;
}