/* margin: (top) (right) (bottom) (left) */
/* padding: (top AND bottom) (right AND left) */

/* Brand Colours
----------------------------------------------------------------------------- */
:root {
    --brand0: rgba(51, 51, 51, 1);
	--brand1: rgba(1, 31, 75, 1);
    --brand2: rgba(3, 57, 108, 1);
    --brand3: rgba(0, 91, 150, 1);
    --brand4: rgba(99, 99, 99, 1);
    --brand5: rgba(250, 205, 8, 1);
    --brand6: rgba(147, 147, 147, 1);
    /* --brand7: rgba(245, 246, 247, 1); */
    --brand7: rgba(250, 250, 250, 1);
    --brand8: rgba(16, 27, 48, 1);
}


/* Layout & Body
----------------------------------------------------------------------------- */
html {
	height: 100%;
    scroll-padding-top: 70px;
    scroll-behavior: smooth;
}
body {
	height: 100%;
	font-family: 'Raleway', sans-serif;
	color: var(--brand0);
    position: relative;
    /* overflow-x: unset; # Used for ScrollSpy offset, didn't work... */ 
}


/* Site Name in NavBar 
----------------------------------------------------------------------------- */
.site-name {
	font-size: 34px;
	font-weight: 400;
}


/* Nav-Link styling in NavBar
----------------------------------------------------------------------------- */
.navbar-nav .nav-item .nav-link {
    color: rgba(255,255,255,1.0);
	font-size: 1.1rem;
	padding: 10px 20px;
}

.navbar-nav .nav-item .nav-link.active {
	color: var(--brand3);
  	font-weight: 600;
}

.navbar-nav .nav-item .nav-link:focus {
	color:#c6ccd8;
}
	
.navbar-nav .nav-item .nav-link:hover {
	color:#296fad;
}

.navbar-nav .nav-item .active>.nav-link {
	color:var(--brand3);
}

.navbar-collapse .nav-button, .navbar-collapse .nav-button:active {
	background-color: var(--brand2);
	border-color: var(--brand2);
	border-radius: 0px;
}

.banner-text .quote-button, .banner-text .quote-button:active {
	background-color: var(--brand2);
	border-color: var(--brand2);
	border-radius: 0px;
}

.nav-button:focus, .nav-button:hover, .quote-button:focus, .quote-button:hover {
	background-color: var(--brand3);
	border-color: var(--brand3);
}

/* NavBar
----------------------------------------------------------------------------- */
.nav-img {
    max-width: 350px;
}

.nav-logo {
    max-height: 66px;
}

.nav-h {
    height: 78px
}

.fixed-top.scrolled .navbar-brand .nav-img-unscr {
	display: none;
}

.fixed-top.scrolled .navbar-brand .nav-img-scr {
	display: inline;
}

.fixed-top .navbar-brand .nav-img-unscr {
	display: inline;
}

.fixed-top .navbar-brand .nav-img-scr {
	display: none;
}

@media screen and (max-width: 300px) {

    .fixed-top.scrolled .navbar-brand .nav-img-unscr,
    .fixed-top.scrolled .navbar-brand .nav-img-scr,
    .fixed-top .navbar-brand .nav-img-unscr,
    .fixed-top .navbar-brand .nav-img-scr {
        display: none !important;
    }
}

@media screen and (max-width: 450px) and (min-width: 350px) {

    .nav-img {
        max-width: 250px;
    }
}

@media screen and (max-width: 350px) and (min-width: 300px) {

    .nav-img {
        max-width: 200px;
    }
}

@media screen and (max-width: 300px) {
    .nav-logo {
        max-height: 50px;
    }
}

.fixed-top.scrolled .navbar-brand .nav-logo-unscr {
	display: none;
}

.fixed-top.scrolled .navbar-brand .nav-logo-scr {
	display: inline;
}

.fixed-top .navbar-brand .nav-logo-unscr {
	display: inline;
}

.fixed-top .navbar-brand .nav-logo-scr {
	display: none;
}

@media screen and (max-width: 1279px) and (min-width: 1199px) {

    .fixed-top.scrolled .navbar-brand .nav-logo-unscr,
    .fixed-top.scrolled .navbar-brand .nav-logo-scr,
    .fixed-top .navbar-brand .nav-logo-unscr,
    .fixed-top .navbar-brand .nav-logo-scr {
        display: none !important;
    }
}

@media screen and (max-width: 600px) and (min-width: 300px) {

    .fixed-top.scrolled .navbar-brand .nav-logo-unscr,
    .fixed-top.scrolled .navbar-brand .nav-logo-scr,
    .fixed-top .navbar-brand .nav-logo-unscr,
    .fixed-top .navbar-brand .nav-logo-scr {
        display: none !important;
    }
}


/* Dropdown Items styling in NavBar */

/* Collapsed NavBar Menu Background Colour (1199px for container-xxl) */
@media (max-width: 1199px) {
    .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.9);
        border-radius: 5px;
    }

    .fixed-top.scrolled .navbar-collapse {
        background-color: rgba(255, 255, 255, 0.95);
    }

    .navbar-nav .nav-item .dropdown-menu {
        background-color: rgba(0, 0, 0, 0);
        /* 0 Opacity as dropdown-menu is on top of Navbar */
        background-clip: padding-box;
        border: none;
        padding-left: 10px;
    }

    .nav-button {
        display: none;
    }

    /* NEW STUFF */
    .navbar-collapse {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100vh;
        display: flex;
        transition: all 0.4s;
    }

    .navbar-toggler,
    .navbar-brand {
        z-index: 1;
    }

    .navbar-collapse.collapsing {
        transition: none;
    }

    .navbar-nav .nav-item .dropdown-menu .dropdown-item {
        padding-top: 0px !important;
        padding-bottom: 5px !important;

    }

    .navbar-nav .nav-item .dropdown-menu {
        padding-top: 0px !important;
        padding-bottom: 5px !important;
        padding-left: 20px;
    }

    .navbar-nav .nav-item .nav-link {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .dropdown-menu {
        display: block !important;
    }

    .fixed-top.scrolled .navbar-nav .nav-item .dropdown-menu,
    .fixed-top.scrolled .navbar-nav .nav-item .dropdown-menu .dropdown-item {
        background-color: rgba(0, 0, 0, 0);
        /* 0 Opacity as dropdown-menu is on top of Navbar */
    }

    /* NEW STUFF */

}


/* Define the shape and colour of the 3 hamburger lines inside navbar-toggler */
.navbar-toggler span {
    display: block;
    /* background-color: #a6a6a6; */
    background-color: rgba(255, 255, 255, 1);
    height: 3px;
    width: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    left: 0;
    opacity: 1;
    transition: all 0.35s ease-out;
    transform-origin: center left;
}

/* top line needs a little padding */
.navbar-toggler span:nth-child(1) {
    margin-top: 0.3em;
}

/**
 * Animate collapse into X.
 */

/* top line rotates 45 degrees clockwise and moves up and in a bit to close the center of the X in the center of the button */
.navbar-toggler:not(.collapsed) span:nth-child(1) {
    transform: translate(15%, -33%) rotate(45deg);
}
/* center line goes transparent */
.navbar-toggler:not(.collapsed) span:nth-child(2) {
    opacity: 0;
}
/* bottom line rotates 45 degrees counter clockwise, in, and down a bit to close the center of the X in the center of the button  */
.navbar-toggler:not(.collapsed) span:nth-child(3) {
    transform: translate(15%, 33%) rotate(-45deg) ;
}

/**
 * Animate collapse open into hamburger menu
 */

/* top line moves back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(1) {
    transform: translate(0%, 0%) rotate(0deg) ;
}
/* middle line goes back to regular color and opacity */
.navbar-toggler span:nth-child(2) {
    opacity: 1;
}
/* bottom line goes back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(3) {
    transform: translate(0%, 0%) rotate(0deg) ;
}

/* NavBar Dropdown on Hover */
.dropdown:hover>.dropdown-menu{
	display: block;
}

/* Fullscreen NavBar Background Colour */
@media (min-width: 1199px) {
	.navbar-nav .nav-item .dropdown-menu {
		background-color: rgba(0,0,0,0.8);
		background-clip: padding-box;
		border: none;
	}
}

.navbar-nav .nav-item .dropdown-menu .dropdown-item {
    color: rgba(255,255,255,1.0);
	font-size: 1.1rem;
	padding: 10px 20px;
}

.navbar-nav .nav-item .dropdown-menu .dropdown-item:focus, 
.navbar-nav .nav-item .dropdown-menu .dropdown-item:hover {
    color: #296fad;
    background-color: rgba(0,0,0,0);
}



.navbar-nav .nav-item .dropdown-menu .dropdown-item.active {
	color:#296fad;
	font-weight: 500;
    background-color: rgba(0,0,0,0);
}

/* Change Navbar Colour on Scroll */
.fixed-top {
	transition: background-color 200ms linear;
}

.fixed-top.scrolled {
	background-color: #fff !important;
	transition: background-color 200ms linear; /* Was 200ms */
}

.fixed-top.scrolled .dropdown-menu {
	background-color: rgba(255,255,255,1);
}

.fixed-top.scrolled .nav-link {
	color:#666666;
}

.fixed-top.scrolled .dropdown-menu .dropdown-item,
.fixed-top.scrolled .dropdown-menu .dropdown-item:focus
{
	color:#666666;
	background-color: rgba(255,255,255,1);
}

.fixed-top.scrolled .nav-link:focus {
	color:#666666;
}

.fixed-top.scrolled .dropdown-menu .dropdown-item.active {
	color:#296fad;
}

.fixed-top.scrolled .nav-link:hover {
	color:#296fad;
}

.fixed-top.scrolled .dropdown-menu .dropdown-item:hover {
	background-color: rgba(255,255,255,1);
}

.fixed-top.scrolled .navbar-brand {
	color:#555555;
}

.fixed-top.scrolled button.navbar-toggler {
	border-color:rgba(0, 0, 0, 1);
	outline-color: rgba(0, 0, 0, 1);
} 

.fixed-top.scrolled button.navbar-toggler span {
    background-color: rgba(0, 0, 0, 1);
}

/* Hide "Logout" text for smaller viewports */
@media (max-width:1080px) {
	.account_label {
		display: none;
	}
}

/* Hide or Show depending on viewport size */
@media (max-width:767px) {   /* Hide for screens with width < 767 */
	.hidemax767 {
		display: none;
	}
}
@media (min-width:767px) {   /* Hide for screens with width > 767 */
	.hidemin767 {
		display: none;
	}
}

/* NavBar End */


/* Banners
----------------------------------------------------------------------------- */
.banner-image {
    height: 70vh;
    background-image: url("/static/img/banner.jpg");
    /* background-image: url("../img/banner.jpg"); */
    background-size: cover;
    background-position: center;
    /* background-attachment: fixed; */
    background-repeat: no-repeat;
    position: relative;
    margin-top: 0px;
}

.areas-banner-image {
    height: 70vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin-top: 0px;
}

@media (max-height:500px) {
    .banner-image {
        height: 100vh;
    }
    .areas-banner-image {
        height: 100vh;
    }
    .banner-text {
        margin-top: 6vh;
    }
}

.banner-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    color: white;
}

.banner-title {
	color: #ffffff;
	font-size: 48px;
	font-weight: 500;
}

.banner-caption {
	color: #ffffff;
	font-size: 28px;
	font-weight: 400;
}

@media (max-width:767px) {
    .banner-title {
        font-size: 30px;
        font-weight: 400;
    }
    .banner-caption {
        font-size: 18px;
        font-weight: 300;
    }
}


/* Brand Colours
----------------------------------------------------------------------------- */
.brandcol1 {
	color: var(--brand1);
}

.brandcol2 {
	color: var(--brand2);
}

.brandcol3 {
	color: var(--brand3);
}


/* Backgrounds
----------------------------------------------------------------------------- */

.bg-brand0 {
	background-color: var(--brand0);
	border-color: var(--brand0);
}

.bg-brand0:hover, .bg-brand0:focus {
	background-color: var(--brand4);
	border-color: var(--brand4);
}

.bg-brand1 {
	background-color: var(--brand1);
	border-color: var(--brand1);
}

.bg-brand1:hover, .bg-brand1:focus {
	background-color: var(--brand2);
	border-color: var(--brand2);
}

.bg-brand2 {
	background-color: var(--brand2);
	border-color: var(--brand2);
}

.bg-brand2:hover, .bg-brand2:focus {
	background-color: var(--brand3);
	border-color: var(--brand3);
}

.bg-brand4 {
	background-color: var(--brand4);
	border-color: var(--brand4);
}

.bg-brand4:hover, .bg-brand4:focus {
	background-color: var(--brand6);
	border-color: var(--brand6);
}

.bg-head-grey {
	background-color: var(--brand0);
	height: 78px;
}

.bg-sts-0 {
	background-color: var(--brand0);
}

.bg-sts-7 {
    background-color: var(--brand7);
}

.bg-head-white {
	background-color: rgba(255, 255, 255, 1);
	height: 78px;
}

.bg-strip-blue {
	background-color: #296DAA;
}


/*--------------------------------------------------------------
# Text Properties
--------------------------------------------------------------*/
h1 {
	color: var(--brand2);
	font-size: 38px;
	font-weight: 700;
}

h2 {
    color: var(--brand2);
    font-weight: 700;
    font-size: 38px;
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

h2:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 60px;
    height: 3px;
    background: var(--brand5);
    left: 0;
    bottom: 0;
}

.text-center h2:after {
    background: var(--brand5);
    left: 50%;
    transform: translate(-50%);
    bottom: 0;
}

h3, h4, h5 {
	/* color: #444444; */
	color: var(--brand0);
}

h3 {
	font-size: 26px;
	font-weight: 600;
}

h4 {
	font-size: 26px;
}

h5 {
	font-size: 16px;
	font-weight: 700;
}

h6 {
	font-size: 16px;
	font-weight: 600;
	color: var(--brand0);
}

.subtitle {
	color: var(--brand0);
	font-size: 32px;
	font-weight: 700;
}

a {
	color: var(--brand2);
}
a:hover {
	color: var(--brand3);
}

a:focus,
a:active {
	color: var(--brand3);
	outline: none;
}

.fw-medium {
    font-weight: 500 !important;
}

.clearfix {
  overflow: auto;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.h55 {
    height: 55px;
}

.maxh100 {
    max-height: 100px;
}

.minh400 {
    min-height: 400px;
}

.message-container {
    position: fixed;
    z-index: 101;
    top: 0rem;
    right: 1rem;
    left: 1rem;
    text-align: center;
    margin-top: 78px;
  }

input.contact_form_h {
	display: none;
}

.bigButton {
    color: white;
	font-size: 1.75rem;
	font-weight: 500;
}

.h4under {
    padding-bottom: 8px;
    position: relative;
    display: inline-block;
    border-bottom: 3px solid var(--brand5);
    transition: 0.3s;
}

.sub-icon {
    font-size: 20px;
}


/* Image properties 
----------------------------------------------------------------------------- */
.ssimg {
	max-height: 80px;
}


/* Visible and Invisible objects */
.object-non-visible {
	opacity: 0;
}
.object-visible,
.touch .object-non-visible {
	opacity: 1 !important;
}


/* Buttons & Pills
----------------------------------------------------------------------------- */
button.navbar-toggler, button.navbar-toggler:focus, button.navbar-toggler:active {
	/* outline-color: var(--brand3); */
    outline-color: rgba(255, 255, 255, 1);
	outline: 1px;
	box-shadow: none;
} 

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-xl-square {
    width: 72px;
    height: 72px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square,
.btn-xl-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.btn-brand2, .btn-brand2:disabled {
	color: white;
    background-color: var(--brand2);
	border-color: var(--brand2);
}

.btn-brand2:hover, .btn-brand2:focus, .btn-brand2:active {
    color: white;
	background-color: var(--brand3) !important;
	border-color: var(--brand3) !important;
}

.btn-brand8 {
	color: white;
    background-color: var(--brand8);
	border-color: var(--brand8);
}

.btn-brand8:hover, .btn-brand8:focus, .btn-brand8:active {
    color: var(--brand8);
	background-color: var(--brand7) !important;
	border-color: var(--brand8) !important;
}

/* Slick Slider (Carousel)
----------------------------------------------------------------------------- */
.slick-slider:before,
.slick-slider:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 100px;
  top: 0;
  height: 100%;
  pointer-events: none; /*makes the links behind clickable.*/
}
.slick-slider:before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.slick-slider:after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}


/*--------------------------------------------------------------
# About Us Section
--------------------------------------------------------------*/
@media (min-width: 992px) {
    .container.about {
        max-width: 100% !important;
    }

    .about-text  {
        padding-right: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .about-text  {
        padding-right: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .about-text  {
        padding-right: calc(((100% - 1320px) / 2) + .75rem);
    }
}


/*--------------------------------------------------------------
# Solutions Section
--------------------------------------------------------------*/
.product-item {
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
    height: 100%;
}

.product-icon {
    position: relative;
    margin: -50px 0 25px 0;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand2);
    background: #FFFFFF;
    border-radius: 100px;
    box-shadow: 0 0 45px var(--brand2);
    transition: .5s;
}

.product-item:hover .product-icon {
    color: #FFFFFF;
    background: var(--brand3);
}


/*--------------------------------------------------------------
# Why Choose Us Section
--------------------------------------------------------------*/
@media (min-width: 992px) {
    .container.whyus {
        max-width: 100% !important;
    }

    .whyus-text  {
        padding-left: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .whyus-text  {
        padding-left: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .whyus-text  {
        padding-left: calc(((100% - 1320px) / 2) + .75rem);
    }
}


/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonial-text {
    margin-bottom: 30px;
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
    transform: scale(.8);
    transition: .5s;
}

.center .testimonial-text {
    transform: scale(1);
}


/*--------------------------------------------------------------
# Project Portfolio Section
--------------------------------------------------------------*/
.portfolio-filters li {
    display: inline-block;
    font-weight: 500;
    color: var(--dark);
    cursor: pointer;
    transition: .5s;
    border-bottom: 2px solid transparent;
}

.portfolio-filters li:hover,
.portfolio-filters li.active {
    color: var(--brand2);
    border-color: var(--brand2);
}

.portfolio-img {
    position: relative;
}

.portfolio-img::before,
.portfolio-img::after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    background: var(--dark);
    transition: .5s;
}

.portfolio-img::before {
    left: 50%;
}

.portfolio-img::after {
    right: 50%;
}

.portfolio-item:hover .portfolio-img::before {
    width: 51%;
    left: 0;
}

.portfolio-item:hover .portfolio-img::after {
    width: 51%;
    right: 0;
}

.portfolio-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 1;
    transition: .5s;
}

.portfolio-item:hover .portfolio-btn {
    opacity: 1;
    transition-delay: .3s;
}


/*--------------------------------------------------------------
# Quotation / Contact Section
--------------------------------------------------------------*/
@media (min-width: 992px) {
    .container.quote {
        max-width: 100% !important;
    }

    .quote-text  {
        padding-right: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .quote-text  {
        padding-right: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .quote-text  {
        padding-right: calc(((100% - 1320px) / 2) + .75rem);
    }
}


/*--------------------------------------------------------------
# Meet the Team Section
--------------------------------------------------------------*/
.team-card {
    margin-left: 10%;
    margin-right: 10%;
}

.team-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #ffffff;
    border-radius: 6px;
}

.team-card-text {
    color: var(--brand0);
    /* font-size: 20px; */
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.card-img-caption:hover .team-overlay {
    opacity: 1;
}

@media screen and (max-width: 1199px) and (min-width: 992px) {
    .team-card-text {
        font-size: 12px;
    }
}

@media screen and (max-width: 992px) and (min-width: 768px) {
    .team-card-text {
        font-size: 10px;
    }
}


/*--------------------------------------------------------------
# Why Go Solar Page
--------------------------------------------------------------*/
.whysolar-header {
    text-align: center;
    padding-bottom: 40px;
}
.whysolar .whysolar-item {
    
    padding: 20px 40px 40px 40px;
    background: #fff;
    height: 100%;
}

.whysolar .whysolar-item h4 {
    color: var(--brand0);
    font-weight: 700;
    margin: 0 0 20px 0;
    padding-bottom: 8px;
    font-size: 22px;
    position: relative;
    display: inline-block;
    border-bottom: 4px solid #ebebed;
    transition: 0.3s;
}

.whysolar .whysolar-item p {
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0.5rem;
}

.whysolar .whysolar-item .readmore {
    margin-top: 15px;
    display: inline-block;
    color: var(--brand2);
}

.whysolar .whysolar-item:hover h4 {
    border-color: var(--brand5);
}

.whygosolar-filters li {
    display: inline-block;
    font-weight: 500;
    color: var(--dark);
    cursor: pointer;
    transition: .5s;
    border-bottom: 2px solid transparent;
}

.whygosolar-filters li:hover,
.whygosolar-filters li.active {
    color: var(--brand2);
    border-color: var(--brand2);
}

.wgs-icon-bg {
    color: #f0f1f2;
    transition: 0.3s;
}

.whysolar .whysolar-item:hover .wgs-icon-bg {
    color: var(--brand5);
    transition: 0.3s;
}

.table-click {
    --bs-table-bg-type: #f8f9fa !important;
}

.table-click:hover {
    --bs-table-bg-type: #d6eaf8 !important;
    cursor: pointer;
}


/*--------------------------------------------------------------
# Solar Solutions Page
--------------------------------------------------------------*/
.sol-img-right {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.sol-img-left {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}


/*--------------------------------------------------------------
# FAQs Page
--------------------------------------------------------------*/
.faq-panel > .faq-panel-heading {
	padding: 0;
	outline: none;
	border: none;
	-webkit-border-radius: 0; /* Safari */
	border-radius: 0;
	width: 100%;
}

.faq-panel > .faq-panel-heading + .panel-collapse > .faq-panel-body {
	border: 1px solid #000;
	border-top: none;
	background-color: #333333;
}

.faq-panel-heading a {
	font-weight: 500;
	padding: 17px 35px 17px 15px;
	display: inline-block;
	width: 100%;
	background-color: #ffffff;
	color: #333333;
	position: relative;
	text-decoration: none;
	border: 1px solid #000000;
    box-shadow: 0 0 0 3px rgba(250, 205, 8, 0.8);
	transition: all 0.5s ease;
}

.faq-panel-heading a.collapsed {
	color: #333333;
	background-color: #ffffff;
	border: 1px solid #000000;
	box-shadow: none;
}

.faq-panel-heading a:after {
	font-family: "Font Awesome 5 Free";
	content: "\f146";
	position: absolute;
	right: 15px;
	font-size: 14px;
	font-weight: 300;
	top: 50%;
	line-height: 1;
	margin-top: -7px;
}

.faq-panel-heading a.collapsed:after {
	content: "\f0fe";
}

.faq-panel-heading a:hover {
	text-decoration: none;
	background-color: #333333;
	color: #ffffff;
}

.faq-panel-title a i {
	padding-right: 10px;
	font-size: 16px;
}


/*--------------------------------------------------------------
# Solar Panels Page
--------------------------------------------------------------*/
.progress {
	padding: 15px;
	position: relative;
	margin-top: 15px;
}

.progress-bar {
    transition: 3s;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
    background-color: var(--brand2);
}

.progress-element {
    text-align: left;
    padding-inline-start: 0.5rem;
    font-size: 1rem;
	font-weight: 500;
}

.solar-item {
    border: 2px solid var(--brand7);
    border-radius: 6px;
}

.solar-accord {
    padding-left: 0%;
}

.solar-accord-button:not(.collapsed) {
    color: var(--bs-accordion-active-color);
    background-color: white;
    box-shadow: white;
}

.solar-accord-button:focus {
    box-shadow: none;
}


/*--------------------------------------------------------------
# Design & Planning Page
--------------------------------------------------------------*/
.timeline:before {
    content: "";
    background: var(--bs-secondary);
    width: 5px;
    height: 95%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.timeline-item:nth-child(even) .timeline-content {
    float: right;
}

.timeline-item:nth-child(even) .timeline-content .date {
    right: auto;
    left: 0;
}

.timeline-item:nth-child(even) .timeline-content::after {
    content: "";
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
    top: 30px;
    left: -15px;
    border-width: 10px 15px 10px 0;
    border-color: transparent var(--bs-light) transparent transparent;
}

.timeline-item::after {
    content: "";
    display: block;
    clear: both;
}

.timeline-content {
    position: relative;
    width: 45%;
    padding: 20px 30px 10px 30px;
    border-radius: 4px;
    background: var(--bs-light);
}

.timeline-content::after {
    content: "";
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
    top: 30px;
    right: -15px;
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent var(--bs-light);
}

.timeline-img {
    width: 30px;
    height: 30px;
    background: var(--bs-secondary);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-top: 25px;
    margin-left: -15px;
}

@media screen and (max-width: 768px) {
    .timeline::before {
        left: 50px;
    }

    .timeline .timeline-img {
        left: 50px;
    }

    .timeline .timeline-content {
        max-width: 100%;
        width: auto;
        margin-left: 70px;
    }

    .timeline .timeline-item:nth-child(even) .timeline-content {
        float: none;
    }

    .timeline .timeline-item:nth-child(odd) .timeline-content::after {
        content: "";
        position: absolute;
        border-style: solid;
        width: 0;
        height: 0;
        top: 30px;
        left: -15px;
        border-width: 10px 15px 10px 0;
        border-color: transparent #f5f5f5 transparent transparent;
    }
}

.timeline-sts h3 {
    color: var(--brand0);
    font-weight: 700;
    margin: 0 0 20px 0;
    padding-bottom: 8px;
    font-size: 22px;
    position: relative;
    display: inline-block;
    border-bottom: 4px solid #ebebed;
    transition: 0.3s;
}

.timeline-sts p {
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0.5rem;
}

.timeline-sts:hover h3 {
    border-color: var(--brand5);
}

.timeline-sts:hover .dap-icon-bg {
    color: var(--brand5);
    transition: 0.3s;
}

.dap-icon-bg {
    color: #f0f1f2;
    transition: 0.3s;
}


/*--------------------------------------------------------------
# STS Yellow Nav Tab Branding
--------------------------------------------------------------*/
.stsyellow .nav-tabs {
    border: 0;
}

.stsyellow .nav-link {
    padding: 15px 0;
    transition: 0.3s;
    color: var(--color-secondary);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    border: 0;
    border-bottom: 4px solid #e2e4e6;
}

.stsyellow .nav-link i {
    padding-right: 15px;
    font-size: 48px;
}

.stsyellow .nav-link h5 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.stsyellow .nav-link.active h5 {
    color: var(--brand5);
}

@media (max-width: 575px) {
    .stsyellow .nav-link h5 {
        font-size: 16px;
    }
}

.stsyellow .nav-link:hover {
    color: var(--brand5);
}

.stsyellow .nav-link.active {
    color: var(--brand5);
    background-color: transparent;
    border-color: var(--brand5);
}

.stsyellow .tab-content {
    margin-top: 30px;
}

.stsyellow .tab-pane h4, .stsyellow h4 {
    font-weight: 700;
    font-size: 32px;
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.stsyellow .tab-pane h4:after, .stsyellow h4:after {
    content: "";
    position: absolute;
    display: block;
    width: 60px;
    height: 3px;
    background: var(--brand5);
    left: 0;
    bottom: 0;
}

.stsyellow .tab-pane ul, .stsyellow ul {
    list-style: none;
    padding: 0;
}

.stsyellow .tab-pane ul li, .stsyellow ul li {
    padding-top: 10px;
}

.stsyellow .tab-pane ul i, .stsyellow ul i {
    padding-right: 4px;
    color: var(--brand5);
}


/*--------------------------------------------------------------
# Inverters, Chargers & Optimizers Page
--------------------------------------------------------------*/
.contact-btn, .contact-btn:active {
    background-color: var(--brand2);
	border-color: var(--brand2);
	border-radius: 0px;
}

.contact-btn:focus, .contact-btn:hover {
	background-color: var(--brand3);
	border-color: var(--brand3);
}

/* Footer Section
----------------------------------------------------------------------------- */
.footer .btn.btn-social {
    margin: 10px;
    color: #9B9B9B;
    border: 1px solid #9B9B9B;
    border-radius: 38px;
    transition: 0.5s;
}

.footer .btn.btn-social:hover {
    color: var(--brand3);
    border-color: var(--brand);
}

.footer-site-link {
    font-size: 1.5rem;
	padding: 10px 20px;
}

.footer-legal-link {
	padding: 10px 20px;
    text-decoration: none;
    cursor: pointer;
}


/* Copyright Footer
----------------------------------------------------------------------------- */
.cfooter {
	background-color: #fafafa;
	border-top: 1px solid #f3f3f3;
	border-bottom: 1px solid #f3f3f3;
	padding: 40px 0;
}
.cfooter p {
	margin-bottom: 0;
}

.footer .copyright a:hover {
    color: var(--brand3);
}


/*--------------------------------------------------------------
# Staff Pages
--------------------------------------------------------------*/
.breadcrumb {
    font-size: 0.75rem;
    font-weight: 700;
}

.breadcrumb-item + .breadcrumb-item::before {
    font-family: 'FontAwesome';
    content: "\f105" !important; 
}

.staff-accord-button:not(.collapsed) {
    color: white;
    font-weight: 700;
    background-color: var(--brand0);
    box-shadow: var(--brand0);
}

.staff-accord-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(180deg)
}

.staff-accord-button:focus {
    box-shadow: none;
}

.noafter:after {
    content: none;
}

.fw-700 {
    font-weight: 700 !important;
}

.alert-error {
    background-color: #dc3545;
}