/*!
Theme Name: Front Range Powerline
Theme URI: http://underscores.me/
Author: The BARK Firm
Author URI: https://thebarkfirm.com
Description: Custom Built WordPress Theme for Front Range Powerline
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: frontrangepowerline
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Front Range Powerline is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/


/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* --------------- Variables --------------- */
:root {
  --color-blue: #0b6787;
  --color-orange: #ff674e;
  --color-light: #dededf;
  --color-dark: #474d54;
  --color-gray: #a9a9a9;
  --color-light-gray: #a0a0a0;
  --font-sans: "Poppins", sans-serif;
  --font-size: 16px;
  --transition-dur: 0.3s;
  --body-padding: 5rem 5vw;
}
/* --------------- Typography --------------- */
html {
  font-size: var(--font-size);
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 20px;
  }
}

html,
body {
  overflow-x: hidden;
  margin-bottom: 0!important;
}

body {
  /* font-size: var(--font-size); */
  font-family: var(--font-sans);
  line-height: 1.5em;
}
p {
  font-size: 1em;
  color: #000;
  font-weight: 400;
}
a {
  text-decoration: none;
  transition: var(--transition-dur);
}
a:hover {
  color: var(--color-blue);
}
h1,
h3,
h5 {
  font-weight: 700;
}
h1 {
  color: #fff;
  font-size: 3.2rem;
  text-transform: uppercase;
  line-height: 0.9;
  padding-bottom: 1rem;
}
h2 {
  color: var(--color-dark);
  font-size: 1.1rem;
  text-transform: uppercase;
  font-weight: 300;
  transition: var(--transition-dur);
}
h3 {
  color: var(--color-dark);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
h4 {
  font-size: 1.2rem;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 1.3;
}
h5 {
  color: #fff;
  font-size: 1.5rem;
  transition: var(--transition-dur);
  text-transform: uppercase;
  line-height: 0.9;
}

.btn {
  background-color: var(--color-orange);
  border: none;
  text-transform: uppercase;
  font-weight: 500;
  padding: 8px 30px;
}
.btn:hover {
  background-color: var(--color-blue)!important;
}

/* --------------- General Reusable Styles --------------- */

i {
  color: var(--color-blue);
  font-size: 1.1rem;
  padding-right: 10px;
}

.bg-gray {
  background-color: var(--color-light);
}


/* --------------- Header Styles --------------- */
.top-bar {
  height: 15px;
  width: 100%;
  background-color: var(--color-blue);
}
.white-box {
  height: 30px;
  background-color: #fff;
}

/* ------- Navbar Styles ------- */
nav,
.navbar {
  position: absolute !important;
  z-index: 10 !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
nav.navbar {
  padding: 0;
}

.navbar-brand > img {
  width: auto;
  height: 90px;
  margin-top: -40px;
}
.navbar-light .navbar-toggler {
  border: 1px solid var(--color-blue) !important;
  margin-top: -40px;
}
/* Magic to change color of hamburger icon to 11-103-135 */
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2811, 103, 135, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-collapse.show {
  background-color: #fff;
  padding: 2rem;
  margin-top: -25px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}

.navbar-text {
  color: var(--color-orange) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.7rem;
  padding: 0;
}
.navbar-text:hover {
  color: var(--color-gray)!important;
}
a.nav-link {
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--color-light-gray) !important;
}
a.nav-link.active,
a.nav-link:active,
a.nav-link:hover {
  color: var(--color-blue) !important;
}
a.dropdown-item {
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--color-orange) !important;
}
.nav-bg {
  background: url("https://frontrangepowerline.com/wp-content/uploads/2021/12/swoosh.png") no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  width: 100vw;
  height: 335px;
  position: absolute !important;
  z-index: 8;
}

.current_page_item {
    background-color: blueviolet;
}

/* ------- Hero Styles ------- */

.hero {
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 25vw;
  padding-bottom: 20vw;
  position: relative;
  z-index: 0;
  background-position: center center;
  background-color: var(--color-blue);
}

/* ------- Header Media Queries ------- */

@media (min-width: 576px) {
  .navbar-brand > img {
    height: 120px;
  }
}

@media (min-width: 768px) {
  .navbar-brand > img {
    height: 130px;
  }
}

@media (min-width: 992px) {
  .navbar-brand > img {
    margin-top: 0;
  }
}

@media (min-width: 1200px) {
  .navbar-brand > img {
    height: 150px;
    margin-left: 2rem;
    margin-right: 3vw;
  }
  a.nav-link {
    padding-right: 1.5rem;
  }
  .navbar-text {
    font-size: 0.9rem;
  }
  .hero {
    padding-top: 20vw;
    padding-bottom: 15vw;
  }
}

@media (min-width: 1400px) {
  .navbar-brand > img {
    height: 180px;
  }
  .hero {
    margin-top: 5rem;
  }
  .navbar-text {
    font-size: 1rem;
  }
  a.nav-link {
    font-size: 1rem;
  }
}

@media (min-width: 1600px) {
  .navbar-brand > img {
    height: 200px;
    margin-left: 3rem;
  }
}

@media (min-width: 1921px) {
  .nav-bg {
    object-fit: fill;
    height: 1000px;
  }
  .navbar-brand > img {
    height: 250px;
    margin-left: 5rem;
  }
}


/* --------------- Home - Hero --------------- */
#homeHero {
  background-image: url("https://frontrangepowerline.com/wp-content/uploads/2021/12/home_hero.png");
}

/* --------------- Image Styles --------------- */
.offset-img {
  position: relative;
}


/* --------------- Home - Service Cards --------------- */


.service-cards {
  position: relative;
  top: -10vw;
  z-index: 9;
  margin-bottom: -5vw;
}

.service-card {
  background-color: #fff;
  border: 1px solid var(--color-light);
  text-align: center;
  padding: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.service-card h2 {
  text-transform: uppercase;
  font-weight: 300;
  color: var(--color-dark);
  font-size: 1rem;
}
.service-card a {
  font-weight: 700;
  color: var(--color-orange);
  text-decoration: none;
  text-transform: capitalize;
  font-size: .8rem;
}

.service-card a:hover {
  color: var(--color-blue);
}

.service-card > img {
  width: 50%;
  max-width: 100px;
  height: auto;
  margin-bottom: 1rem;
}

.service-card > img:hover {
	transform: scale(1.1, 1.1);
  transition: transform 0.5s ease-in-out;
}

#service1 {
	border-radius: 10px 0 0 0;
}
#service2 {
	border-radius: 0 10px 0 0;
}
#service3 {
	border-radius: 0 0 0 10px;
}
#service4 {
	border-radius: 0 0 10px 0;
}

#committed {
	padding: 2rem 1rem;
	padding-top: 0;
}

.committed-text {
}


#whyChoose {
	padding: 2rem 1rem;
}

/* ------- Home Media Queries ------- */

@media (min-width: 576px) {
}

@media (min-width: 768px) {
#service1 {
	border-radius: 10px 0 0 10px;
}
#service2 {
	border-radius: 0;
}
#service3 {
	border-radius: 0;
}
#service4 {
	border-radius: 0 10px 10px 0;
}
}

@media (min-width: 992px) {

.offset-img {
    margin-bottom: -80%;
  }

  #whyChoose {
	padding: 3rem 2rem;	 
  }
	#whyChoose h3 {
	padding-top: 15%;	 
  }
}

@media (min-width: 1200px) {
	
.service-card {
  padding: 2rem;
}
	.offset-img {
    margin-bottom: -70%;
  }
	#whyChoose {
	padding: 4rem 2rem;	 
  }
	#whyChoose h3 {
	padding-top: 30%;	 
  }
}

@media (min-width: 1400px) {

	#whyChoose h3 {
	padding-top: 30%;	 
  }
}

@media (min-width: 1600px) {
  #whyChoose {
    padding-top: 6rem;
  }
	.offset-img {
    margin-bottom: -60%;
  }
}
@media (min-width: 2000px) {
  #whyChoose {
    padding-top: 6rem;
  }
		#whyChoose h3 {
	padding-top: 10%;	 
  }
	.offset-img {
    margin-bottom: -20%;
  }
}

/* --------------- Footer --------------- */
.footer {
  margin-bottom: 0 !important;
}
.blue-banner {
  background-color: var(--color-blue);
  padding: var(--body-padding);
}

.blue-banner p {
  color: #fff;
}
.blue-banner h2 {
  color: #fff;
  font-size: 3rem;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 0.9;
  text-align: right;
  padding-right: 5vw;
  letter-spacing: 2px;
  padding-bottom: 1rem;
}
.vert-line {
  border-left: 8px solid var(--color-light);
  padding: 0 2rem;
}

.on-call-banner {
  background-color: var(--color-orange);
  padding: var(--body-padding);
  background-image: url("https://frontrangepowerline.com/wp-content/uploads/2022/01/powerline_banner.png");
  background-size: cover;
  background-repeat: none;
  background-position: center;
}
.on-call-banner h2 {
  color: #fff;
  font-size: 2.4rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 0.9;
}
.on-call-banner p {
  color: #fff;
  text-transform: uppercase;
}

.contact-section {
  padding: var(--body-padding);
	padding-bottom: 3rem;
  background-color: var(--color-light);
}

.contact-section h4 {
  color: var(--color-orange);
  font-size: 1.1rem;
  margin-bottom: 1rem;
  text-transform: capitalize;
  font-weight: 700;
}

.contact-section p {
	margin-bottom: 0;
}

.contact-section i {
	font-size: 1.8rem;
}

.copyright {
  background-color: var(--color-gray);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.copyright p {
  color: #fff;
	font-size: .8rem;
}

.copyright img {
  height: 25px;
  margin-left: 1rem;
}

/* ------- Form Styles ------- */
input, textarea {
  background-color: var(--color-gray);
  border: none;
  box-shadow: inset 1px 1px 5px var(--color-dark);
  border-radius: 6px;
color: #fff;
}
input:active, input:focus, textarea:active, textarea:focus {
	border-color: var(--color-dark)!important;
}
::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #fff;
}
::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #fff;
}
.gform_wrapper .gform_footer input[type=submit] {
  background-color: var(--color-orange);
  border: none;
  text-transform: uppercase;
  font-weight: 500;
  padding: 8px 30px;
  box-shadow: none;
  color: #fff;  
  border-radius: 6px;
  float: right;
}
.gform_wrapper .gform_footer input[type=submit]:hover {
  background-color: var(--color-blue)!important;
}

/* ------- Footer Media Queries ------- */

@media (max-width: 576px) {
	.blue-banner h2 {
  		text-align: left;
		padding-right: 0;
	}
	.vert-line {
		margin-left: 5vw;
	}
}

@media (min-width: 768px) {
  .blue-banner h2 {
    padding-bottom: 0;
  }
}

@media (min-width: 992px) {
.on-call-banner {
	background-position: 20%;
}
}

@media (min-width: 1200px) {


}

@media (min-width: 1400px) {
  .blue-banner h2 {
    font-size: 3.8rem;
  }
  .on-call-banner h2 {
    font-size: 3rem;
  }
}

@media (min-width: 1600px) {
}

/* --------------- About Page --------------- */
#aboutHero {
  background-image: url("https://frontrangepowerline.com/wp-content/uploads/2021/12/about_hero.png");
}

.employee {
  padding: 2rem 0;
}

.employee-info h3 {
  margin-bottom: 0;
  margin-top: 3px;
}
.employee-info h2 {
  text-transform: none;
  margin-bottom: 1rem;
}


/* ------- About Media Queries ------- */

@media (min-width: 576px) {
}

@media (min-width: 768px) {
  .employee-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: end;
  }
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

@media (min-width: 1600px) {
}

/* --------------- Services Page --------------- */
#servicesHero {
  background-image: none;
}

/* ------- Services Media Queries ------- */

@media (min-width: 576px) {
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

@media (min-width: 1600px) {
}