:root {
    /*--body-color: #22262a;*/
    --body-color: #2a2e2b;
    --body-line-height: 1.7;
    --body-font-size: 1.1rem;
    --joejoomla-font-family-body: "Roboto", sans-serif;
    --joejoomla-font-family-headings: "Roboto", sans-serif;
    --joejoomla-font-weight-headings: 700;
    --joejoomla-font-weight-normal: 400;
    --dark:#212529;
    --bs-light-rgb: 248, 249, 250;
    --joejoomla-color-primary-blue-35: rgba(29, 112, 183, 0.35);
    --joejoomla-color-primary-blue-45: rgba(29, 112, 183, 0.45);
    --joejoomla-color-primary-blue-55: rgba(29, 112, 183, 0.55);
    --joejoomla-color-primary-blue-65: rgba(29, 112, 183, 0.65);
    --joejoomla-color-primary-blue-15: rgba(29, 112, 183, 0.15);
    --joejoomla-color-primary-yellow-15: rgba(255, 204, 102, 0.15);
    --joejoomla-color-primary-yellow: rgba(255, 204, 102);
    --joejoomla-color-primary-blue: rgba(29, 112, 183, 1);
}
.accordion {--accordion-active-bg: #0f244d;--accordion-active-color: #fff;}
body {overflow-x: hidden;}
:focus {box-shadow:none!important;}
.navbar-nav .nav-link, .navbar-nav .nav-link:hover {color:#fff;}
body.bg-light .mod-breadcrumbs__wrapper {background:#fff!important;}
.bg-featured-blog {height: 100%;width: 100%;background-size: cover;background-position: center;background-repeat: no-repeat;min-height: 15rem;}
body.no-padding .site-content > section.py-5 {padding-top:0!important;padding-bottom:0!important;}

/* Joe's changes */

span.icon-menu {color: #ffffff;}

.com_content.view-article.article-body-text {
    font-size: 18px;
    line-height: 1.7;
    color: #2a2e2b;
}

h2.portfolioh1 a {
    font-size: 46px;
    /*margin-bottom: 10px;
    margin-top: 0;*/
    font-weight: normal;
    text-align: center;
    line-height: 1.2;
    text-decoration: none;
    color: #3d86b5;
}

h3.portfolioh1 {
    font-size: 36px;
    font-weight: normal;
    text-align: center;
    line-height: 1.2;
    color: #3d86b5;
}

.copyright {vertical-align: super;}



.hero__slider--box {height: 50vh !important; background-repeat: no-repeat; background-size: cover;}



/*#fullTop {background-color: var(--joejoomla-color-primary-yellow-15);}*/
#fullTop {
    /*background: rgb(255,204,102);
    background: linear-gradient(163deg, rgba(255,204,102,1) 0%, rgba(255,153,51,1) 35%, rgba(196,22,34,1) 100%);*/
    /*background: var(--joejoomla-color-primary-yellow-15);*/
}

#modId126 {
    /*background-color: var(--joejoomla-color-primary-yellow-15);*/
    background-color: #0d324c !important;
}
#modId126 p {color: #ffffff !important;}

div.slideshowtagline {
    background-color: var(--joejoomla-color-primary-blue-35);
    width: 700px;
    text-align: center;
    -webkit-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -o-transform: skew(-10deg);
    padding-top: 35px;
    padding-bottom: 35px;
    border-radius: 40px;
    /*position: relative;
    top: -60px;*/
}
nav.navbar.fixed-top:not(.scrolling-top) {background: linear-gradient(to top, rgba(17, 40, 85, 0), rgba(17, 40, 85, 0.94));}
nav.navbar.fixed-top.scrolling-top {background-color: var(--joejoomla-color-primary-blue-65)!important;}


@media (max-width: 640px) {
    div.slideshowtagline {
        background-color: var(--joejoomla-color-primary-blue-35);
        /*background-color: transparent;*/
        width: 300px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        -webkit-transform: skew(0deg);
        -moz-transform: skew(0deg);
        -o-transform: skew(0deg);
        padding: 35px;
    }
}


nav.navbar.navbar-expand-lg {z-index: 10;}

/*.navbar.navbar-expand-lg.navbar-dark.bg-dark {background-color: transparent !important;}*/
.navbar.navbar-expand-lg.navbar-dark.bg-dark {background-color: var(--joejoomla-color-primary-blue-15) !important;}


/* Blog */

.blog-title {color:var(--joejoomla-color-primary-blue)}

@media only screen and (min-width : 1024px) {
    div.blogcontainernarrow {
        /*width: 800px; margin: auto*/
        width: 70%; margin: auto
    }
}

.blog-testimonial-quote p {font-size: 18px}
.blog-testimonial-quote h2 {
    text-align: left !important;
    font-size: 34px!important;
    font-weight: bold;
    /*color: rgb(46, 163, 242);*/
    color: var(--joejoomla-color-primary-blue);
    font-style: italic;
}
.testimonial-inner {
    background-image: url(/images/quotation-mark-illustration.png);
    background-size: 5%;
    background-repeat: no-repeat;
    opacity: .7;
    padding-left: 7%;
}

/*.testimonial-quote, .blog-testimonial-quote {
    padding-top: .5em;
}*/
@media only screen and (max-width : 480px) {
    .testimonial-quote, .blog-testimonial-quote {
        padding-top: 1.5em;
    }
}

div.calltoaction-freetrial {
    background-image: url('/images/accessibility/greenpicture.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}

/* /Blog */

/* Custom Bootstrap Buttons */
.accessible-btn-yellow {
    color: #1d70b7;
    /*font-weight: bold;*/
    text-transform: uppercase;
    background: #ffff00;
    border-color: transparent;
}
.accessible-btn-yellow:hover, .accessible-btn-yellow.active {
    color: #ffffff;
    background: #1d70b7;
}
/* /Custom Bootstrap Buttons */

/* consultation page */
.jsg-consultation {height: 150px;}
/* /consultation page */



/* CSS3 PORTFOLIO START */

h2.portfolioh1 {color: var(--joejoomla-color-primary-blue);}

@media screen and (max-width: 480px) {
    h1.portfolioh1 {
        font-size: 25px;
        font-weight: bold;
        line-height: 26px;
    }
}

@media screen and (max-width: 480px) {
    h2.portfolioh1 {
        font-size: 25px;
        font-weight: bold;
        line-height: 26px;
    }
}

.view {
    width: 310px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 5px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 0px 0px 5px #aaa;
    cursor: default;
}
.view .mask, .view .content {
    width: 310px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.view img {
    display: block;
    position: relative;
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding:0;
    text-indent:-9999px;
    width:20px;
    height:20px;
    background-image: url(/images/link.png);
}

/* FIRST EFFECTS */
.effect-mobile img {
    opacity:1;
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    -ms-transform:scale(1,1);
    transform:scale(1,1);
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.effect-mobile .mask {
    opacity:0;
    overflow:visible;
    border-color:rgba(29,112,183,0.8) transparent transparent transparent;
    border-style:solid;
    border-width:150px;
    width:0;
    height:0;
    -moz-transform:translateY(-125px);
    -webkit-transform:translateY(-125px);
    -o-transform:translateY(-125px);
    -ms-transform:translateY(-125px);
    transform:translateY(-125px);
    -moz-transition: -moz-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
    -webkit-transition: -webkit-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
    -o-transition: -o-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
    -ms-transition: -ms-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
    transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
}
.effect-mobile a.info {
    opacity:0;
    -moz-transform:translateY(-125px);
    -webkit-transform:translateY(-125px);
    -o-transform:translateY(-125px);
    -ms-transform:translateY(-125px);
    transform:translateY(-125px);
    -moz-transition: -moz-transform 0.3s ease-in, opacity 0.1s ease-in-out;
    -webkit-transition: -webkit-transform 0.3s ease-in, opacity 0.1s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in, opacity 0.1s ease-in-out;
    -ms-transition: -ms-transform 0.3s ease-in, opacity 0.1s ease-in-out;
    transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;

}
.effect-mobile:hover img {
    opacity:0.7;
    -moz-transform:scale(2,2);
    -webkit-transform:scale(2,2);
    -o-transform:scale(2,2);
    -ms-transform:scale(2,2);
    transform:scale(2,2);
}
.effect-mobile:hover .mask {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}
.effect-mobile:hover a.info {
    opacity:1;
    -moz-transform:translateY(100px);
    -webkit-transform:translateY(100px);
    -o-transform:translateY(100px);
    -ms-transform:translateY(100px);
    transform:translateY(100px);
}


/*Large Version*/
.viewlarge {
    width: 509px;
    height: 350px;
    margin: 10px;
    float: left;
    border: 5px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 0px 0px 5px #aaa;
    cursor: default;
}
.viewlarge .masklarge, .viewlarge .contentlarge {
    width: 509px;
    height: 350px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.viewlarge img {
    display: block;
    position: relative;
}
.viewlarge a.infolarge {
    display: inline-block;
    text-decoration: none;
    padding:0;
    text-indent:-9999px;
    width:20px;
    height:20px;
    background-image: url(/images/link.png);
    transform: translateX(-50px);
}
.effectlarge img {
    opacity:1;
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    -ms-transform:scale(1,1);
    transform:scale(1,1);
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.effectlarge .masklarge {
    opacity:0;
    overflow:visible;
    border-color:rgba(29,112,183,0.8) transparent transparent transparent;
    border-style:solid;
    border-width:300px;
    width:0;
    height:0;
    -moz-transform:translateY(-225px);
    -webkit-transform:translateY(-225px);
    -o-transform:translateY(-225px);
    -ms-transform:translateY(-225px);
    transform:translateY(-225px);
    -moz-transition: -moz-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
    -webkit-transition: -webkit-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
    -o-transition: -o-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
    -ms-transition: -ms-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
    transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
}
.effectlarge a.infolarge {
    opacity:0;
    -moz-transform:translateY(-225px);
    -webkit-transform:translateY(-225px);
    -o-transform:translateY(-225px);
    -ms-transform:translateY(-225px);
    transform:translateY(-225px);
    -moz-transition: -moz-transform 0.3s ease-in, opacity 0.1s ease-in-out;
    -webkit-transition: -webkit-transform 0.3s ease-in, opacity 0.1s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in, opacity 0.1s ease-in-out;
    -ms-transition: -ms-transform 0.3s ease-in, opacity 0.1s ease-in-out;
    transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;

}
.effectlarge:hover img {
    opacity:0.7;
    -moz-transform:scale(2,2);
    -webkit-transform:scale(2,2);
    -o-transform:scale(2,2);
    -ms-transform:scale(2,2);
    transform:scale(2,2);
}
.effectlarge:hover .masklarge {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -webkit-transform: translateX(-50px);
    -moz-transform: translateY(0px);
    -moz-transform: translateX(-50px);
    -o-transform: translateY(0px);
    -o-transform: translateX(-50px);
    -ms-transform: translateY(0px);
    -ms-transform: translateX(-50px);
    transform: translateY(0px);
    transform: translateX(-50px);
}
.effectlarge:hover a.infolarge {
    opacity:1;
    -moz-transform:translateY(-215px);
    -webkit-transform:translateY(-215px);
    -o-transform:translateY(-215px);
    -ms-transform:translateY(-215px);
    transform:translateY(-215px);
}

/* CSS3 PORTFOLIO END*/

/* ERROR PAGE */
div#secondDiv {width: 400px; margin: auto;}
/* /ERROR PAGE */

/* SERVICES PAGE */

ul.col-lg-7.mx-auto.nav.nav-pills.nav-justified.servicestab {
    -webkit-transform: skew(-5deg);
    -moz-transform: skew(-5deg);
    -o-transform: skew(-5deg);
}


@media (max-width: 640px) {
    ul.col-lg-7.mx-auto.nav.nav-pills.nav-justified.servicestab {
        -webkit-transform: skew(0deg);
        -moz-transform: skew(0deg);
        -o-transform: skew(0deg);
    }
}

.servicestab li.nav-item {
    border: 1px solid grey;
    border-radius: 5px;
    margin: 5px; /* Adjust this value to increase or decrease the gap */
}
.servicestab li.nav-item .nav-link {
    padding: 15px;
}
.servicestab .nav-item .nav-link.active {
    background-color: #3d86b5;
    color: #ffffff;
}

li.nav-item .nav-link.active svg {
    stroke: white; /* Makes the SVG path color inside 'g' with class 'mono' white */
}

.servicestab > li.nav-item > a.nav-link {
    color: rgb(42, 46, 43);
    text-transform: uppercase;
    font-size: 14px;
}

.two {
    background-color: #34ADFF;
    background-image: -webkit-linear-gradient(150deg, #34ADFF 35%, #4CBFFF 35%);
    /*padding: 30px;*/
}

.formRequired {color: red;}

i.fa.fa-paint-brush.fontawesome-paintbrush {
    color: #ffcc66;
}

i.fa.fa-cog.fontawesome-paintbrush {
    color: #ff9933;
}

i.fa.fa-check-square.fontawesome-paintbrush {
    color: rgba(196, 22, 33, 0.82);
}

i.fa.fa-paint-brush.fontawesome-paintbrush, i.fa.fa-cog.fontawesome-paintbrush, i.fa.fa-check-square.fontawesome-paintbrush {
    font-size: 134px;
    text-shadow: 5px 5px 5px #ccc;
    margin-bottom: 16px;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* /SERVICES PAGE */

/* FOOTER MODULE */
.small.m-0.text-white a {color: #ffffff;}

/* /FOOTER MODULE */

/* /Joe's changes */
/***No Header Top Block**/
.top--header_block {background: #0d324c;height:74px;margin-bottom:5rem;}
/***End No Header Top Block**/

.spacer60 {padding-top:60px;padding-bottom:60px;}