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


:root {

    --cassiopeia-color-primary: #795548;
    --cassiopeia-color-secondary: #FFC107;
    --cassiopeia-color-link: #f57c00;
    --cassiopeia-color-hover: #FFC107;
    --rtl-green-clip: rgba(71, 182, 72, 0.3);
    --feature-band-yellow: rgba(255, 236, 93, 0.3);
    --portfolio-card-bg: rgba(237, 28, 36, 0.4);
    --card-quote-bg: #FFF9CE;
    --project-card-bg: #D6D1E7;
    --blue: #0d6efd;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --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;
    --font-cursive: "Architects+Daughter", cursive;
    --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: 1rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #383838;
    --body-bg: #fff;
}


/* 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: 'Montserrat', sans-serif;
    overflow-x: hidden;

}

blockquote {
    font-family: 'Architects Daughter', cursive;
    font-size: calc(1.3rem + 1.1vw);
    font-weight: 400;
    color: #FFC107;
    padding: 2rem 0;
    line-height: 175%;
}

body.wrapper-fluid .grid-child {
    max-width: 1200px;
    padding-left: 2em;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

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

.header {
    height: auto;
    padding-bottom: 0px;
    background-image: none;
    background-color: #fff;
    color: #333;
}


.container-header {
    position: relative;
    width: 100vw;
    z-index: 10;
    background-color: #fff;
    background-image: none;
    -webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);
}

.container-header .site-description {
    float:right;
    padding-left: 20px;
    font-size: 40px;
    color: #999;

    font-family: 'Sanchez', serif;
}
a
/*Smaller banner - not in fluid layout*/
.container-banner .banner-overlay {
    height: 40vh;
}
/* HEADER SLIDER */
.nivoSlider {
    z-index: 2;
    background: #c7b79e!important;
    -moz-box-shadow: none!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}
/*
@media (max-width: 767px) {
    .pottery-pages img.nivo-main-image {
        width: auto !important;
        height: 250px !important;

    }
}
*/
/* MENU ITEMS  */
.navbar {
   align-items: start;
}

.navbar-brand{
    padding:2rem;
}
/* hamburger -0 see .fa, .fas for hori line colour */

.container-header .navbar-toggler {
    cursor: pointer;
    border: 0px;
}

/* To hide non-burger menu */

.navbar-expand-md .navbar-collapse {
    display: none;
    flex-basis: auto;
}


/* Header Padding for mobiles */
@media (max-width: 767px) {
    .header {
    padding-bottom: 0;
        height: 90px;
        overflow: hidden;
    }
}


.container-header .navbar-collapse.show {
    margin-bottom: 2rem;
}




.navbar-expand-md .navbar-toggler {
    display: flex;
}
.navbar-expand-md .offcanvas-header {
    display: flex;
}


/* The links in the menu */

.container-header .mod-menu {
    color: #475BAF;
}

/* Color the dropdown menu in the menu with the class .metismenu.mod-menu .mm-collapse */

.metismenu.mod-menu .metismenu-item {
    display: block;
}

/* The links in the dropdown menu you have to address them individually */

.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: #333;

}
.metismenu.mod-menu .mm-collapse > li > a {
    display: inline-flex;
    align-items: center;

}
/* drop down menu item links */
.metismenu.mod-menu .metismenu-item > span, .metismenu.mod-menu .metismenu-item > a, .metismenu.mod-menu .metismenu-item > button {
    overflow: visible;
    margin-right: 1.25em;

}


/* 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: 'Sanchez', serif;
    color: var(--cassiopeia-color-primary);
    line-height: 125%;
    padding-bottom: 2rem;
    font-size: calc(1.375rem + 1.5vw);
    font-weight: 400;
}

h2, .h2 {
    font-family: 'Sanchez', serif;
    color: var(--cassiopeia-color-primary);
    line-height: 125%;
    padding-bottom: 1rem;
    font-size: calc(1.375rem + 1.5vw);
    font-weight: 400;

}
/*
@media (max-width: 800px) {
    h2, .h2 {
        font-size: 2 rem;
    }
}
*/


h3, .h3 {
    font-size: calc(1.3rem + 0.6vw);
    font-weight: 400;
    font-family: 'Sanchez', serif;
    color: var(--cassiopeia-color-link);
    line-height: 125%;
    padding: 2rem 0;

}
h4, .h4 {
    font-size: calc(1.2rem + 0.6vw);
    font-weight: 400;
    font-family: 'Sanchez', serif;
    color: var(--cassiopeia-color-link);
    line-height: 125%;
    padding: 2rem 0;

}
h5, .h5 {
    font-size: calc(0.8rem + 0.6vw);
    font-weight: 400;
    font-family: 'Sanchez', serif;
    color: var(--cassiopeia-color-link);
    line-height: 125%;
    padding-top: 1rem;

}

dt {
    font-weight: 400;
}

ul li {
    list-style: disc;
    margin: 0 0 0 1em;
    line-height: 175%;

}
li::marker {
    color: var(--cassiopeia-color-link);
}

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

p {
    margin-left: 15px
}

/* 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;
    margin: 2rem 0;
    display: block;
    width: 190px;
    text-align: center;
}
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);

}

/* 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*/



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

.fa, .fas, [class*="icon-"], [class^="icon-"] {
    color: var(--cassiopeia-color-hover);
}
/* Next Project chevron */
.icon-project {
    color: #fff!important;
}
.icon-quote {
    color: #666!important;
}

.fa-atom::before {
    font-family: "Font Awesome 5 Free";
    content: "\f5d2";
    margin-right: 10px;
    font-weight: 900;
}

.back-to-top-link:hover, .back-to-top-link:focus {
    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: 25%;
    height: auto;
    padding: 50px 20px 145px 80px;
}

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



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


.footer {
    margin-top: 1em;
    color: white;
    background-color: var(--cassiopeia-color-primary);
    background-image: none;

}
.footer .grid-child {
    align-items: flex-start;
    justify-content: space-around;
    padding: 2.5rem 0.5em;
    display: flow;
}
.footer h2{
    color: var(--cassiopeia-color-secondary);
    font-size: calc(1rem + 1.5vw);
}
.footer a:not(.btn):focus, .footer a:not(.btn):hover {
    color: #ffffff;
    text-decoration: none;
}
.footer .row {
    margin-right: calc(3.5*var(--gutter-x));
    margin-left: calc(5.5*var(--gutter-x));
}
@media (max-width: 676px) {
    .footer .row {
        margin-right: calc(2.5 * var(--gutter-x));
        margin-left: calc(2.5 * var(--gutter-x));
    }
}
@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 .";
        }
    }
}

/* colourless seperator in menu
.sidenav .navbar-nav #bootstrap_a_menu_item_114 {
    color: #fff;
}
*/
/* menu content alignment */
.sidenav a {
    display: flex!important;
    justify-content: end;
    border-bottom: none!important;
}
.sidenav a:hover {
  /*  text-decoration: underline;*/
}
.sidenav ul {

    margin: 30px 50px;
}


/*
.header .container-header .full-width .position-sticky .sticky-top .small-header{
    box-sizing: border-box;
    display: block;
    height: 100px;
}
.show-logo{
    display: inherit;
}

*/

/* FORMS  */

.form-control {
border-radius: 0;
max-width: 600px;
}
.btn {
    border-radius: 0
}
@media (min-width: 1200px){
.com-contact__container {
    grid-template-columns: repeat(4,auto);
} }



/* OFFLINE PAGE  */

.offline-card {

    border: 0;
    box-shadow: none;

}


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

}

/*LOGO IN HEADER */
.logo-visible-phone {
    display: none!important;

}
.logo-visible-non-phone {
    display: inherit!important;
}
@media (max-width: 800px){
    .logo-visible-phone {
        display: inherit!important;
    }
    .logo-visible-non-phone {
        display: none!important;
    }
}
/* IGNITE GALLERY */
.ig-thumb-scroller-main-below {
    padding-top: 4px;
}
.igui-icon {
    color: transparent;
}

/* COLUMN SPACING */
.row>* {

    padding-left: calc(var(--gutter-x) * 0);
    padding-right: calc(var(--gutter-x) * 2);
}


/* HOME CARDS */

.row .home-cards {

}
.gap-card {
    /* Add shadows to create the "card" effect
    width: 400px;
    height:400px;*/
    margin:40px 0 60px 0;
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.6);
    transition: 0.2s;
    border-radius: 0;
    padding: 30px;

}


/* On mouse-over, add a deeper shadow */
.gap-card:hover {
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
}

.gap-card .fa-solid {
    color: var(--cassiopeia-color-link);
    padding: 20px 0 0 20px;
}
.gap-card h3 {
    padding: 1rem 0;
}
.gap-card li {
    margin-left: 10px;
}
.gap-card ul li {
    color: var(--body-color);
}
.home-cards a {
    text-decoration: none!important;
}


/* CARD LAYOUT CONTROL*/
.home-cards .col-sm-12 {
    display: flex;
    justify-content: space-around;
}

/* VISFORMS */
#form1walltileoptionslbl, #form1candleholderoptionslbl{
    display: none;
}
.visCSSinput, .editor {

    margin-top: 20px;

}

/*FORM MISC */
.contact-miscinfo dt .jicons-text {
    display: none;
}
span.contact-misc {
    display: flex;
    align-items: baseline;
}
.visCSSlabel {
    width: 33%;

}

/* PHOTOS */
.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%);

}
/* VISIBLE VS INVISIBLE BANNERS  */

.visible-phone {
    display: none!important;
    width: 100vw;
}
.visible-non-phone {
    display: inherit!important;
    width: 100vw!important;
    position: relative;
    left: 50%;
    margin-left: -51vw;
    margin-top: -32px;
}
@media (max-width: 767px){
    .visible-phone {
        display: inherit!important;
        margin-left: -32px;
        margin-top: -24px;
    }
    .visible-non-phone {
        display: none!important;
    }
}

.ig-slideshow-item-inner-lboxon  {
    cursor: zoom-in!important;
}

/* BURGER MENU */
.offcanvas_show {

    position: absolute!important;

}

/*Video BANNER*/
.nx-YouTubeBox iframe {
    z-index: 9!important;
}