@charset "utf-8";
/* J.S Taylor Electrical Main CSS Document */


@import url('https://fonts.googleapis.com/css?family=Literata:400,700&display=swap');


body { 
	background-color: #f5f5f5;
}

	
/* Main Elements */

.container-bg-white {
	background-color: #ffffff;
}

.contact-bar {
	background-color: #02029e;
	font-family: 'Literata', serif;
	font-weight: 400;
	font-size: 1em;
	color: #ffffff;
}

.contact-bar a {
	color: #ffffff;

}

.contact-bar a:hover {
	color: #ffffff;

}

.contact-bar-rcol {
text-align: right;
}

@media screen and (max-width : 767px){	
.contact-bar-lcol, .contact-bar-rcol {
    text-align: center;
}
}

.contact-bar-pipe{
	color: #7e7eaf;
	padding-left: 8px;
	padding-right: 8px;
	
}


/* Brand */

@media screen and (max-width : 992px){	
.logo{
    text-align: center;
}
}

/* Layout */

h1 {
	font-family: 'Literata', serif;
	font-size: 1.4em;
	font-weight: 700;
	color: #02029e;
}

h2 {
	font-family: 'Literata', serif;
	font-size: 1.1em;
	font-weight: 700;
	color: #02029e;
}


.body, .card-body {
	font-family: 'Literata', serif;
	color: #4e4e50;
	font-size: 1em;
	line-height: 1.8em;
}

.body a, .card-body a {
	color: #02029e;
}

.body a:hover, .card-body a:hover {
	color: #4e4e50;
	text-decoration: none;
}

.body ul, li {
	list-style: none;
	line-height: 2em;
	
}

.fa-bolt {
	color: #02029e;
	margin-right: 0.4em;
}


.sub-page-header {
	background-color: #02029e;
	font-family: 'Literata', serif;
	font-size: 1.1em;
    font-weight: 400;
	color: #fff;
	padding: 12px 16px;
}


/* Carousel*/

.carousel-caption { 
	font-family: 'Literata', serif;
	font-weight: 400;
    width:100%;
    background-color: rgba(9, 9, 157, 0.8);
    left: 0;
	bottom: 0;
	
}

.carousel-caption h5 {
	font-size: 1.4em;
	font-weight: 400;
}


/* Links On-State */

 #domestic .domestic, #commercial .commercial, #maintenance .maintenance, #rewires .rewires, #fuseboards .fuseboards, #lighting  .lighting , #alarms .alarms {  color: #ffffff;
	background-color: #3f3eab;
}

#domestic .domestic:hover, #commercial .commercial:hover, #maintenance .maintenance, #rewires .rewires:hover, #fuseboards .fuseboards, #lighting .lighting , #alarms .alarms {
    color: #ffffff;
	background-color: #3f3eab;
	cursor: default;
}

#home .home, #about .about, #terms .terms, #privacy .privacy, #contact .contact {
	color: #ffffff;
	text-decoration: underline;
}
#home .home:hover, #about .about:hover, #terms .terms:hover, #privacy .privacy:hover, #contact .contact:hover {
	color: #ffffff;
	cursor: default;
}

/* Footer */


.fluid-container-footer {
	background-color: #02029e;
}

.footer {
	font-family: 'Literata', serif;
	font-weight: 400;
	font-size: 0.8em;
	color: #ffffff;
	line-height: 24px;
}

	
.footerlinks a {
	color: #ffffff;
	text-decoration: none;
	font-weight: 400;
	}

.footerlinks a:hover {
	color: #ffffff;
	text-decoration: underline;
	}

@media screen and (max-width : 992px){	
.footerlinks {
    text-align: center;
}
}
	
.pipe {
	color: #7e7eaf;
	margin-right: 4px;
	margin-left: 4px;
	}

.accr {
	text-align: right;
	padding-top: 12px;
}

@media screen and (max-width : 992px){	
.accr {
    text-align: center;
	padding-top: 8px;
	padding-bottom: 16px;
}
}


.footer-2 {
	font-family: 'Literata', serif;
	font-weight: 400;
	line-height: 24px;
}

.footer-2, .footer-2 a, .footer-2 a:hover {
	font-size: 0.8em;
	text-align: center;
	color: #02029e;
	text-decoration: none;
}


@media screen and (max-width : 767px){	
.footer-2 {
    text-align: center;
}
}

.contact-icon {
    color: #02029e;
}

.google-maps {
	position: relative;
	padding-bottom: 75%; /* This is the aspect ratio */
	height: 0;
	overflow: hidden;
}
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}


/* Mobile container horizontal overflow fix*/

@media screen and (max-width: 767px) {
    body {
        overflow-x: hidden !important;
    }
    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}


/* Shine effect on home page image rollovers */
.hover14 figure {
	position: relative;
}
.hover14 figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
	cursor: pointer;
}
.hover14 figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}