/* -------------------------------------------------------------
/
/ Service Champions Media Queries
/ Device-specific customizations for champs-core.css
/
/ -------------------------------------------------------------*/

/* -------------------------------------------------------------
/
/
/ Global Device Styles
/
/
/ -------------------------------------------------------------*/

/* Icon with big phone number */

@media(max-width:599px) {
	.champs-icon-with-phone-number {
		font-size:25px;
	}
	.champs-icon-with-phone-number i {
		width:auto;
		height:auto;
		padding: 15px 20px;
	}
}

/* Disable hvr-gradient style on mobile */

@media(max-width:599px) {
	.reflex-btn.hvr-gradient a::before {
	    display: none;
	}
}

/* Standard buttons */

@media(max-width:899px) {
	.reflex-btn a {
		padding: 15px 25px;
		font-size: 13px;
	}
}

/* -------------------------------------------------------------
/
/
/ Homepage Styles
/ - Core Homepage Styles
/
/
/ -------------------------------------------------------------*/

/* Homepage heading styles */

@media(max-width:1099px) {
	.home h1 br,
	.home h2 br,
	.home h3 br,
	.home h4 br {
	}
	.home h1 {
		font-size: 50px;
	}
}
@media(max-width:1024px) {
	.home h3 {
		font-size: 30px;
	}
}
@media(max-width:899px) {
	.home h2 {
		font-size: 40px;
	}
	/* Headline with box effect behind it */
	.champs-box-headline {
		height: 200px;
	}
	.champs-box-headline::before {
		width: 200px;
	}
}
@media(max-width:699px) {
	.home h1 {
		font-size: 40px;
	}
	.home h1 br,
	.home h2 br,
	.home h3 br,
	.home h4 br {
		display: none;
	}
}

/* -------------------------------------------------------------
/
/
/ Header Top Menu Area
/ - Champs customizations
/ - Top bar with slogans, phone number, and socials
/
/
/ -------------------------------------------------------------*/

/* First breakpoint */

@media(max-width:1199px) {
	.champs-header-grid .slogan,
	.champs-header-grid .phone,
	.champs-header-grid .links li a {
		font-size: 14px;
	}
}
@media(max-width:1120px) {
	.champs-header-grid .links {
		width: 100%;
	}
	.champs-header-grid .slogan {
		width: 50%;
		text-align: left;
		padding-left: 20px;
		display: none;
	}
	.champs-header-grid .phone {
		width: 50%;
		text-align: left;
	}
	.champs-header-grid .socials {
		text-align: left;
		width: 100%;
		text-align: center;
	}
}

/* 2nd breakpoint */

@media(max-width:999px) {
	.champs-header-grid .block:first-of-type {
		width: 100%;
	}
	.champs-header-grid .block:last-of-type {
		display: none;
	}
	.champs-header-grid .phone {
		width: 100%;
		text-align: center;
		display: block;
		border-right: 1px solid rgba(255,255,255,0.2);
	}
	.champs-header-grid .slogan {

	}
	.champs-header-grid .socials {
		display: none;
	}
}

/* 3rd breakpoint */

@media(max-width:599px) {
	.reflex-header-top-menu {
		display: block;
	}
	.reflex-header-top-menu.desktop {
		display: none;
	}
	.champs-header-grid .slogan {
		display: none;
	}
	.champs-header-grid .phone {
		width: 100%;
		border: none;
		padding: 20px 0 20px 0;
	}
}

/* -------------------------------------------------------------
/
/
/ Header Identity Area
/ - Champs Customizations
/ - This area includes the logo, navigation menu, and a CTA button
/
/
/ -------------------------------------------------------------*/


/* 1st breakpoint */

@media(max-width:1199px) {
	.reflex-header-id-area .cta-btn .reflex-btn a {
	}
}

/* 2nd breakpoint */

@media(max-width:1099px) {
	.reflex-header-id-area .cta-btn {
		width: auto;
	}
	.reflex-header-id-area .cta-btn .reflex-btn a {
		padding: 15px 10px;
		font-size: 11px;
	}
	nav.reflex ul > li {
		margin: 0 10px;
	}
	nav.reflex ul > li > a {
		text-align: center;
		line-height: 1.3em;
	}
}

/* Mobile breakpoint */

@media(max-width:999px) {
	.reflex-header-id-area .reflex-header-nav {
		width: 0;
	}
	.reflex-header-id-area .reflex-container {
		display: flex;
		position: relative;
		justify-content: center;
	}
	.reflex-header-id-area .logo {
		width: 200px;
		height: auto;
		min-height: 0;
		max-width: 75%;
		order: 1;
		justify-content: center;
	}
	.reflex-header-id-area .cta-btn {
		display: none;
	}
	.reflex-header-id-area .cta-btn .reflex-btn a {
		padding: 15px 15px;
		letter-spacing: 0;
	}
	.reflex-header-id-area .mobile-menu {
		width: 33.333%;
		display: flex;
		justify-content: flex-end;
		order: 3;
	}
	/* Anchor mobile menu button regardless of logo position */
	.reflex-header-id-area .mobile-menu {
		width: auto;
		position: absolute;
		right: 30px;
		top: 0;
		bottom: 0;
		margin-top: auto;
		margin-bottom: auto;
	}
	nav.reflex ul > li {
		margin: 0;
	}
}

/* -------------------------------------------------------------
/
/ Homepage Styles
/ - Slider
/
/ -------------------------------------------------------------*/

/* 1st breakpoint */

@media(max-width:1200px) {
	.home-slider h1 {
		font-size: 55px;
	}
}

/* 2nd breakpoint */

@media(max-width:1024px) {
	.home-slider {
		height: auto;
		min-height: 0;
		padding-bottom: 100px;
	}
	.home-slider .slide-content {
		width:50%;
	}
	.home-slider .slide-img {
		width:50%;
	}
	.home-slider h1 {
		font-size:50px;
	}
	.home-slider h1 br {
	}
	.home-slider .phone-number {
		font-size:25px;
	}
	.home-slider .phone-number i {
		width:50px;
		height: 50px;
		border-radius:25px;
	}
	.home-slider .reflex-btn a {
		padding:15px 30px;
	}
}

/* 3rd breakpoint */

@media(max-width:799px) {
	.home-slider .slide-content {
		width:50%;
		padding: 75px 0 75px 0;
	}
	.home-slider .slide-img {
		width:50%;
	}
}

/* 4th breakpoint */

@media(max-width:750px) {
	.home-slider {
		height: auto;
		min-height: 0;
		padding-bottom: 0;
	}
	.home-slider .reflex-container {
		display: block;
	}
	.home-slider .slide-content {
		width:100%;
		text-align: center;
		padding: 40px 0 40px 0;
	}
	.home-slider .slide-content .phone-number {
		justify-content: center;
	}
	.home-slider .slide-img {
		width:100%;
		height: auto;
		padding-top: 90%;
		background-position: bottom center;
	}
	.home-slider h1 {
		font-size:40px;
	}
}

@media(max-width:699px) {
	.home-slider {
	}
}

/* -------------------------------------------------------------
/
/
/ Homepage Slider Boxes
/ - Set of 3 boxes that overlap the bottom of the slider
/
/
/ -------------------------------------------------------------*/

/* 1st breakpoint */

@media(max-width:1099px) {
	.home-slider-boxes .box {
		padding:30px;
	}
	.home-slider-boxes .big-phone-number {
		font-size:20px;
	}
}

/* 2nd breakpoint */

@media(max-width:999px) {
	.home-slider-boxes .block h3 {
		font-size: 20px;
	}
	.home-slider-boxes .block .reflex-btn a {
		font-size:14px;
		padding:15px;
		letter-spacing: 1px;;
	}
}

/* 3rd breakpoint */

@media(max-width:699px) {
	.home-slider-boxes {
		margin:0;
		padding:45px 0 0 0;
	}
	.home-slider-boxes .reflex-grid {
		display: block;
	}
	.home-slider-boxes .block:hover {
		box-shadow:none;
	}
	.home-slider-boxes .block:nth-of-type(2) {
		border-top:2px solid #fff;
		border-bottom:2px solid #fff;
	}
}


/* -------------------------------------------------------------
/
/
/ Homepage Services Slider
/ - 3+ slides each showing an image and supporting text
/ - As seen in the Plumbing theme: http://prohauz.bold-themes.com/plumbing/;
/
/
/ -------------------------------------------------------------*/

/* 1st breakpoint */

@media(max-width:1199px) {
	/* Remove line breaks */
	.home-services-slider br {
		display: none;
	}
}

/* 2nd breakpoint */

@media(max-width:799px) {
	.home-services-slider .reflex-grid {
		display: block;
	}
	.home-services-slider .block {
		width: 100%;
	}
	/* The text portion of each service slide */
	.home-services-slider .services-slide .block:last-of-type {
		padding: 45px 0 0 0;
	}
}

/* -------------------------------------------------------------
/
/ CTA Banner
/ - CTA banner on homepage and other pages
/
/ ------------------------------------------------------------*/

@media(max-width:899px) {
	.reflex-cta-banner .reflex-container {
		flex-wrap: wrap;
		justify-content: center;
	}
	.reflex-cta-banner h3 {
		text-align: center;
		flex-basis: 100%;
	}
	.reflex-cta-banner .reflex-btn {
		margin-top: 30px;
	}
}

/* -------------------------------------------------------------
/
/ Homepage Counters
/ - Large section with headline, animated numbers, and overlapping boxes.
/
/ -------------------------------------------------------------*/

/* 1st breakpoint */

@media(max-width:1024px) {
	.home-counters .counter {
		font-size: 60px;
		margin: 0;
		color: rgba(255,255,255,0.75);
	}
}

/* 2nd breakpoint */

@media(max-width:899px) {
	.home-counters .counter {
		font-size: 40px;
		margin: 0;
		color: rgba(255,255,255,0.75);
	}
}

/* 3rd breakpoint */


@media(max-width:599px) {
	.home-counters.first-set {
		padding: 45px 0 45px 0;
	}
	.home-counters.first-set .counter {
		font-size: 60px;
		margin: 0;
		color: rgba(255,255,255,0.75);
	}
}


/* -------------------------------------------------------------
/
/ 1st Set of Homepage Counter Boxes
/ - A set of boxes that overlap the counters.
/ - There are two sets of these: offer boxes and counter boxes.
/
/ -------------------------------------------------------------*/ 

/* 1st breakpoint */

@media(max-width:899px) {
	.home-counter-boxes.first-set p.offer-title {
		font-size: 25px;
	}
}
@media(max-width:799px) {
	.home-counter-boxes.first-set p.offer-title {
		font-size: 20px;
	}
}

/* 2nd breakpoint */

@media(max-width:699px) {
	.home-counter-boxes.first-set {
		margin: 0;
		background-position: center top;
	}
	.home-counter-boxes.first-set .reflex-grid {
		display: block;
	}
	.home-counter-boxes.first-set .reflex-grid {
		padding: 30px 0 30px 0;
		box-shadow: none;
	}
	.home-counter-boxes.first-set .block:not(:last-of-type) {
		margin: 0 0 15px 0;
	}
	.home-counter-boxes.first-set p.offer-title {
		font-size: 30px;
	}
	.home-counter-boxes.first-set p.offer-title br {
		display: none;
	}
}

/* -------------------------------------------------------------
/
/ 2nd Set of Homepage Counter Boxes
/ - A set of boxes that overlap the counters.
/ - There are two sets of these: offer boxes and counter boxes.
/
/ -------------------------------------------------------------*/ 

/* 1st breakpoint */

@media(max-width:1024px) {
	.home-counter-boxes.second-set .reflex-grid .block:first-of-type:nth-last-of-type(4),
	.home-counter-boxes.second-set .reflex-grid .block:first-of-type:nth-last-of-type(4) ~ .block {
		margin-bottom: 1px;
	}
}

/* -------------------------------------------------------------
/
/
/ Homepage Reviews
/ - Large section with reviews slider
/
/
/ -------------------------------------------------------------*/

@media(max-width:599px) {
	.home-reviews .review p {
		font-size: 16px;
	}
	.home-reviews .reviewer i {
		font-size: 16px;
	}
}

/* -------------------------------------------------------------
/
/
/ Homepage Content Area 1
/ - Section with headline and icons with text
/
/
/ -------------------------------------------------------------*/

/* 1st breakpoint */

@media(max-width:899px) {
	.home-content-area-1 h3 br {
		display: none;
	}
	.home-content-area-1 .reflex-grid {
		display: block;
	}
	.home-content-area-1 .reflex-grid .block {
		margin: 0;
	}
	.home-content-area-1 .reflex-grid .block:first-of-type {
		margin-bottom: 30px;
	}
	.home-content-area-1 .icon-with-text .text {
	}
}


/* -------------------------------------------------------------
/
/
/ Homepage Content Area 2
/ - Area with accordion and video
/
/
/ -------------------------------------------------------------*/

/* 1st breakpoint */

@media(max-width:899px) {
	.home-content-area-2 .reflex-grid {
		display: block;
	}
	.home-content-area-2 .reflex-grid.with-spacing .block {
		display: block;
		margin: 0;
	}
	.home-content-area-2 .reflex-video {
		margin-top: 30px;
	}
}
@media(max-width:699px) {
	/* Disable accordion title numbers for space */
	.reflex-accordion.numbered .title span {
		display: none;
	}
	/* Update numbered accordion title padding and font size */
	.reflex-accordion.numbered .title {
		padding: 20px 0 20px 10px;
		font-size: 14px;
	}
	/* The accordion body */
	.reflex-accordion.numbered .body {
		padding: 20px;
	}
}

/* -------------------------------------------------------------
/
/
/ Homepage Content Area 3
/ - Large section with body copy and technician photo side-by-side
/
/
/ -------------------------------------------------------------*/

@media(max-width:1024px) {
	.home-content-area-3 {
		background: url('../img/cross_grid.png');
		background-position: top center;
		background-repeat: no-repeat;
		padding: 120px 0 0 0;
	}
	.home-content-area-3 .reflex-grid {
		display: block;
	}
	/* The text column */
	.home-content-area-3 .reflex-grid .block {
		flex-basis: 1px;
	}
	.home-content-area-3 .reflex-grid .block:first-of-type {
		padding: 60px 0 60px 0;
	}
	/* The image column */
	.home-content-area-3 .reflex-grid .block:last-of-type {
		display: none;
		height: 600px;
	}
}

@media(max-width:699px) {
	/* The image column */
	.home-content-area-3 .reflex-grid .block:last-of-type {
		display: block;
		height: 500px;
		margin: 0;
	}
}

/* -------------------------------------------------------------
/
/
/ Homepage Recent Posts
/ - Homepage recent posts widget with numerous column breakpoints
/
/
/ -------------------------------------------------------------*/

@media(max-width:899px) {
	.home-recent-posts .rpwwt-widget ul li {
		flex-basis: 48%;
		margin-bottom: 30px;
	}
	.home-recent-posts .rpwwt-post-excerpt a {
		width: 100%;
		display: block;
		text-align: center;
	}
}
@media(max-width:599px) {
	.home-recent-posts .rpwwt-widget ul li {
		flex-basis: 100%;
	}
}

/* -------------------------------------------------------------
/
/
/ Footer Styles
/
/
/ -------------------------------------------------------------*/

/* First breakpoint */

@media(max-width:1200px) {
	/* Break the footer CTA buttons block onto its own row */
	footer .second-footer-row .cta-buttons {
		flex-basis: 100%;
		margin-top: 45px;
		padding-top: 30px;
		border-top: 1px solid rgba(255,255,255,0.25);
	}
}
@media(max-width:799px) {
	footer .reflex-grid .block {
		display: block;
		width: 100%;
		margin: 0;
	}
	footer .socials {
		text-align: left;
	}
}
@media(max-width:699px) {
	footer .first-footer-row .block:not(:last-of-type) {
		margin-bottom: 30px;
	}
}
@media(max-width:599px) {
	footer h4 {
		text-transform: none;
		font-weight: bold;
	}
	footer .first-footer-row {
		margin-bottom: 45px;
		padding-bottom: 45px;
		border-bottom: 1px solid rgba(255,255,255,0.25);
	}
	footer .second-footer-row {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
	footer .second-footer-row .block.contact,
	footer .second-footer-row .block.socials,
	footer .second-footer-row .block.cta-buttons {
		margin: 0 0 45px 0;
		padding: 0 0 45px 0;
		border-top: none;
		border-bottom: 1px solid rgba(255,255,255,0.25);
	}
	footer .second-footer-row .cta-buttons .buttons {
		display: block;
	}
	footer .second-footer-row .block.cta-buttons .reflex-btn {
		margin: 0 0 15px 0;
	}
}


/* -------------------------------------------------------------
/
/
/ WordPress Reflex Title Bar
/
/
/ -------------------------------------------------------------*/

@media(max-width:799px) {
	.reflex-title-bar .reflex-container {
		height: auto;
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.reflex-title-bar h3 {
		width: 100%;
		text-align: center;
	}
	.reflex-title-bar .truck {
		display: none;
	}
}

/* -------------------------------------------------------------
/
/
/ Services Template Styles
/
/
/ -------------------------------------------------------------*/

@media(max-width:799px) {
	/* Service Grid */
	.service-grid .reflex-grid {
		display: block;
	}
	.service-grid .text {
		padding: 60px 30px;
		border-top: 1px solid #eee;
	}
	/* Service Feature */
	.service-feature {
		background-image: linear-gradient(to right, rgba(228, 239, 244, 0.75) 0%, rgba(228, 239, 244, 0.75) 100%), url("../img/services/service-feature-bg.jpg");
		background-position: right;
	}
	.service-feature .reflex-grid {
		display: block;
	}
	/* Service Cards */
	.service-cards .reflex-grid {
		display: block;
	}
	.service-cards .reflex-grid .block { 
		margin: 0 0 5px 0;
	}
	.service-cards .reflex-grid .block:last-of-type {
		margin: 0;
	}
	.service-cards .reflex-grid .img {
		display: none;
	}
	.service-cards i {
		margin: 30px 0 0 30px;
	}
}
@media(max-width:599px) {
	/* Service Feature */
	.service-feature {
		background-position: -1250px 0;
	}
	/* Service Cards */
	.service-cards .reflex-grid.with-spacing .block { 
		margin: 0 0 5px 0;
	}
	.service-cards .reflex-grid.with-spacing .block:last-of-type {
		margin: 0;
	}
}


/* -------------------------------------------------------------
/
/
/ About Us Template Styles
/
/
/ -------------------------------------------------------------*/

@media(max-width:799px) {
	.about-feature {
		background-image: linear-gradient(to right, rgba(228, 239, 244, 0.75) 0%, rgba(228, 239, 244, 0.75) 100%), url("../img/about-us/about-feature-bg.jpg");
		background-position: center;
	}
	.about-feature .reflex-grid {
		display: block;
	}
}
@media(max-width:599px) {
	.about-feature {
		background-position: center;
	}
}


/* -------------------------------------------------------------
/
/
/ WordPress Blog Styles
/
/
/ -------------------------------------------------------------*/

/* -------------------------------------------------------------
/ Featured Images
/ -------------------------------------------------------------*/

@media(max-width:799px) {
	.reflex-featured-img {
		height:400px;
	}
}
@media(max-width:599px) {
	.reflex-featured-img {
		height:300px;
	}
}
@media(max-width:499px) {
	.reflex-featured-img {
		height:200px;
	}
}

/* -------------------------------------------------------------
/ Recent Posts With Thumbnails Widget
/ -----------------------------------------------------------*/

@media(max-width:799px) {
	.rpwwt-widget ul {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		flex-wrap: wrap;
	}
	.rpwwt-widget ul li {
		flex-basis: 30%;
		margin: 0 15px 0 0;
	}
	.rpwwt-widget ul li:last-child {
		margin: 0;
	}
	.rpwwt-widget .rpwwt-post-title {
		font-size: 16px;
		line-height: 1.3em;
	}
}

/* -------------------------------------------------------------
/
/
/ Subpage Styles
/
/
/ -------------------------------------------------------------*/
 
 /* Contact Us */

 @media(max-width:799px) {
 	.contact-us .block.contact-info {
 		width: 100%;
 		margin-bottom: 45px;
 	}
 	.contact-us .block.form {
 		width: 100%;
 	}
 }

/* -------------------------------------------------------------
/ Service Grid Styles for WP Bakery
/ -------------------------------------------------------------*/

@media(max-width:799px) {
	.vc_section.vc_section-has-fill.service-icons {
		padding: 60px 0 45px 0 !important;
	}
	.service-grid .vc_column-inner {
		min-height: 400px !important;
		padding: 60px 45px !important;
	}
}

/* -------------------------------------------------------------
/ Service Feature Styles for WP Bakery
/ -------------------------------------------------------------*/

@media(max-width:799px) {

}
.vc_section.vc_section-has-fill.service-feature {
	padding-top: 200px !important;
	padding-bottom: 60px !important;
}
.vc_section.vc_section-has-fill.service-feature::before,
.vc_section.vc_section-has-fill.service-feature.reverse::before  {
	background-image: url("https://bellbros.wpengine.com/wp-content/uploads/2021/02/about-us-feature-4.jpg);
		
}