html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{line-height:1}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important}

/* bootstrap carousel fade */


/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}


@font-face {
    font-family: 'Headline One';
    src: url('fonts/HeadlineOneHPLHS.eot');
    src: url('fonts/HeadlineOneHPLHS.eot?#iefix') format('embedded-opentype'),
        url('fonts/HeadlineOneHPLHS.woff2') format('woff2'),
        url('fonts/HeadlineOneHPLHS.woff') format('woff'),
        url('fonts/HeadlineOneHPLHS.ttf') format('truetype'),
        url('fonts/HeadlineOneHPLHS.svg#HeadlineOneHPLHS') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}






@font-face {
  font-family: 'BrandonGrotesque-Bold';
  src: url('fonts/BrandonGrotesque-Bold.eot?#iefix') format('embedded-opentype'),  url('fonts/BrandonGrotesque-Bold.otf')  format('opentype'),
	     url('fonts/BrandonGrotesque-Bold.woff') format('woff'), url('fonts/BrandonGrotesque-Bold.ttf')  format('truetype'), url('fonts/BrandonGrotesque-Bold.svg#BrandonGrotesque-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BrandonGrotesque-Regular';
  src: url('fonts/BrandonGrotesque-Regular.eot?#iefix') format('embedded-opentype'),  url('fonts/BrandonGrotesque-Regular.otf')  format('opentype'),
	     url('fonts/BrandonGrotesque-Regular.woff') format('woff'), url('fonts/BrandonGrotesque-Regular.ttf')  format('truetype'), url('fonts/BrandonGrotesque-Bold.svg#BrandonGrotesque-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}


body { font-family: 'BrandonGrotesque-Regular'; background-color:#221e1f; }

nav {font-family: 'Headline One';}

* {-webkit-font-smoothing: antialiased;}


.alignright, img.alignright {float:right; margin-left:1vw;}
.clear {clear:both;}
.nopadding {padding: 0 !important;margin: 0 !important;}
.padding {padding:1vw;}
.centered {text-align:center}
.align-right {text-align:right;}
p, li {font-size:1.2vw; line-height:1.8vw;  }
p strong { font-family: 'BrandonGrotesque-Bold'; font-weight:normal;}
p {margin-bottom:1.2vw;}
.padding-0 {padding:0;}
em, i { }
.mobile-only {display:none;}
.desktop-only {display:block;}

.red-bg {background-color:#e13f3b; color:#FFF; text-shadow:2px 2px 0 #000;}
.texture-bg {background-image:url(img/texture.jpg);}
.black-bg {background-color:#221e1f; color:#FFF;}
.white-bg {background-color:#FFF; color:#221e1f;  }


#branding {background-color:#221e1f; padding:2vw 1vw;}



#branding img {height:2vw; width:auto; margin-top:2vw;}


#header .col-sm-4  {text-align:center; }

#header .logo img {
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .51s;
}


#header.active .logo img {
	
width: 60%;
height: auto;
margin-right: 20%;
margin-left: 20%;

}




#branding .logo img {width:90%; height:auto; margin-right:5%; margin-left:5%; margin-top:0; margin-bottom:-5vw;} 

#branding { font-family: 'Headline One'; font-size:2.8vw; color:#FFF;}

#branding a {color:#FFF; text-decoration: none; display:inline-block; padding:3vw 1vw;}

#branding .logo a {padding:0; display:inline;}

#branding a:hover {color:#e13f3b; text-decoration: none; }

.nav-left {text-align:right;}

#branding .nav-left a {padding:3vw 2vw;}

.right-header, .middle-header {padding-top:1vw;}


#red-band-strip {text-align:center; padding:1.6vw; font-family: 'Headline One'; font-size:3vw;}
#red-band-strip span {display: inline-block; margin:0 2vw;}



#myCarousel .carousel-inner { position:relative; height:32vw;}
#myCarousel .item { background-position: top center; background-color:#000; height:32vw; padding:0; margin:0; background-size: 100% auto; }


.altversion #myCarousel .carousel-inner, .altversion #myCarousel .item {height:40vw;}


.content-width {padding:2vw 5vw;}

h2 {text-align:center; color:#e13f3b; font-family: 'Headline One'; font-size:3vw; margin-bottom:2vw;}

#music-section h2 {text-align:center; color:#e13f3b; font-family: 'Headline One'; font-size:3vw; margin-bottom:2vw;}

#music-section .col-sm-6 img {width:45%; margin-top:5px;  float:left; margin-right:15px; margin-bottom:15px;}

#music-section .col-sm-6 { padding-top:15px; padding-bottom:15px;}

#music-section .inner {background-color:#2b2728; padding:20px;}

#music-section h3 {font-family: 'Headline One'; font-size:2.5vw; color:#e13f3b; margin-bottom:10px;}


.columns-1 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
}

.columns-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}



a.order-button {display:inline-block; background-color:#e13f3b; padding:.5vw 3vw; font-size:2.5vw; color:#FFF; font-family: 'Headline One';}

a.order-button:hover {text-decoration:none; background-color:#FFF; color:#e13f3b;}

#reviews-section h2 {text-align:center; color:#221e1f; font-family: 'Headline One'; font-size:3vw; margin-bottom:2vw; }

#reviews-section {padding:2vw 5vw;}

.review-box {padding:1vw; margin-bottom:1.5vw;}


.review-box a {color:#e13f3b; font-family: 'BrandonGrotesque-Bold';}

.review-box .hidden {padding:3vw;}

#biography-section {padding:2vw 10vw;}

#biography-section h3 {font-size:2vw; font-family: 'BrandonGrotesque-Bold'; text-align:center; padding:1vw; padding-bottom:2vw;}

.bio-top {padding-bottom:2vw;}

.band-list p {font-size:2vw; line-height:4vw;}

#footer {background-image:url(img/footer-image.jpg); background-size:100% auto;}

/*---------------------FOOTER LIGHTBOX SLIDER---------------------*/

#photos-section {padding:4vw;}

#photos-section h2 {color:#FFF; text-align:center; font-size:3vw;}

.list_carousel {
	margin: 0 auto;
	width: 80%;
	margin-bottom:2vw;
}
.list_carousel ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}
.list_carousel li img {
	width: 100%;
	height: auto;
	border-radius: 0 !important;
}
.list_carousel li {
	font-size: 40px;
	color: #999;
	text-align: center;
	width: auto;
	height: 500px;
	padding: 0;
	margin: 6px;
	display: block;
	float: left;
}
.list_carousel.responsive {
	width: auto;
	margin-left: 0;
}
.clearfix {
	float: none;
	clear: both;
}


.prev {
	float: left;
	margin-left: 2vw;
	padding-top:220px;
	width: 5%;
	text-align: center;
}
.prev img, .next img {
	width: 60%;
	height: auto;
}
.next {
	padding-top:220px;
	float: right;
	margin-right: 2vw;
	width: 5%;
	text-align: center;
}
.pager {
	float: left;
	width: 300px;
	text-align: center;
}
.pager a {
	margin: 0 5px;
	text-decoration: none;
}
.pager a.selected {
	text-decoration: underline;
}
.timer {
	background-color: #999;
	height: 6px;
	width: 0px;
}



#header {position:fixed; z-index:1000;}
.bumper {height:15vw;}
a.anchor-jump {
    display: block;
    position: relative;
    top: -12vw;
    visibility: hidden;
}

#footer #copyright {font-size:1.1vw; line-height:2vw; padding-top:2vw; position:absolute; bottom:2vw; width:100%; left:0; right:0;}
#footer {background-color:#000; color:#FFF; text-align:center; padding:3vw; height:50vw; position:relative; }
#footer a {color:#FFF;}
#footer span.phone {margin-bottom:1vw; display:block;}



#more-1 {display:none;}
#more-2 {display:none;}
#more-3 {display:none;}
#more-4 {display:none;}

a.read-less {display:none;}


.footer-left {text-align:left; font-family: 'BrandonGrotesque-Bold';}
.footer-right {text-align:right; font-family: 'BrandonGrotesque-Bold';}

#footer p {color:#808080;}
#footer p strong {color:#e13f3b; font-size:1.7vw;}



.grid {


    -webkit-column-count: 3; /* Chrome, Safari, Opera */

    -moz-column-count: 3; /* Firefox */

    column-count: 3;

     margin-top:0px;

}

.grid-itemX:hover {-ms-transform: rotate(1deg);
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);}
  
.grid-item {
	
	-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
	
	
	vertical-align: top;
	/*-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;*/
	position:relative;
     margin-top:0px;
	font-size:0;
}

.grid-item img { width:100%; height:auto; display:inline-block;
      vertical-align:top; margin-bottom:1vw}







nav#menu {background-color:#252627;  color:#FFF; text-align:center;}

nav#menu a {color:#FFF;}


.middle-header a {color:#FFF; }
.middle-header a:hover {color:#FFF; text-decoration:none;}

nav#menu a:hover {
  background: linear-gradient(#fff3a5, #fff3a5, #995f00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


nav#menu a:hover {text-decoration:none;}

nav#menu li {display:inline-block; padding:.5vw 1vw; border-right: 1px solid #FFF;}

nav#menu li:last-child {border-right:0;}

span.phone {font-family: 'GothamMedium'; font-size:2vw;}

span.time-description  {font-family: 'GothamMedium'; font-size:1.1vw;}



.featured-img img {width:100%; height:auto;}
.donation {background-color:#000; color:#FFF; padding:2vw 5vw;}
.donation .col-sm-4 .inner {background-color:#232323; padding:.5vw 2vw; min-height:20vw; font-family: 'GothamBold';}
.donation .col-sm-4 .inner strong {color:#db1919; font-family: 'GothamBold';}
 a.big-red-button {color:#FFF; background-color:#db1919; padding:1vw 3vw; width:80%; margin:0 10%; display:block; margin-bottom:1vw; text-align:center; font-family: 'GothamBold';  font-size:1.5vw; }

a.learn-more-button {color:#db1919; border:2px solid #db1919; font-size:1.5vw; padding:.5vw 1vw; margin-top:.3vw; display:inline-block;}

.donation h2 {text-align:center; font-family: 'GothamBold';  font-size:1.8vw; padding:3vw;}

.donation h3 {font-family: 'GothamBold';  font-size:1.8vw; padding:1vw; text-align:center; }


/*--------- HOME ------------*/

#home-form {padding:2vw; color:#FFF; width:80%; margin:0 10%; position:absolute; bottom:0; z-index:100;}
#home-form .call-col {font-family: 'GothamBold'; text-align:center;}
#home-form .call-col span {font-size:1.6vw;}
#home-form .wpcf7-not-valid-tip {color:#FFF; padding-top:.4vw;}
#home-form .wpcf7 form.sent .wpcf7-response-output {border-color:#fff3a5;}
#home-form .wpcf7 form .wpcf7-response-output {font-size:1.4vw; text-align:center;}
#home-form h2 {font-size:2vw; font-family: 'GothamBold'; margin-bottom:1vw;}
input[type=text], input[type=tel], input[type=email], textarea {width:100%; font-size:1.1vw; padding:.8vw; border:0; color:#000;}

input[type=submit] {background: linear-gradient(#fff3a5, #fff3a5, #995f00); color:#000; border:0; padding:.8vw; font-size:1.2vw; font-family: 'GothamBold'; }





#middle-section {position:relative; height:40vw; background-image:url(http://staging.webbersites.com/qualitywatersystems/wp-content/uploads/2021/05/IMG_1763.jpg); background-size:cover; }

#middle-section h2 {display:block; background-color:#000; text-align:center; font-family: 'GothamBold'; font-size:2vw;   background: linear-gradient(#fff3a5, #ffe040,  #995f00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}

.headline-padding {padding:3vw; }

#coupon-signup {width:25vw; position:absolute; top:15vw; left:10vw; color:#FFF; background-color:#000; background-image:url(img/cash-money.jpg); }
#coupon-signup input {margin:.5vw 0;}
.signup-headline {padding:1vw; font-size:1.6vw; font-family: 'GothamBold';}
.signup-subhead {padding:1vw; font-size:1.6vw; font-family: 'GothamBold';}

#home-quote-section {background-color:#FFF; color:#000; padding:6vw 3vw; min-height:25vw; }

#home-quote-section .item {height:auto; width:80%; margin:0 10%;}
.test-left img {width:40%; height:auto; margin:0 30%; margin-bottom:1vw;}
.test-left {}
.test-right img { border-radius: 50%; width:80%; margin:0 10%; margin-bottom:2vw;}
.test-right {font-size:1.6vw; font-family: 'GothamBold'; text-align:center;}
.home-quote-logo img {width:100%; height:auto;}

.home-quote-copy {   font-size:1.4vw; font-family: 'GothamBold';  text-align:left;}

.home-quote-copy span { }

.home .carousel-control.left, .carousel-control.right {background-image:none; width:3%; padding-top: 3vw;}
.home .carousel-control.left {padding-right:1vw;}
.home .carousel-control.right {padding-left:1vw;}

.home .entry-content {padding:2vw 10%; }

.home .entry-content h2 {background: linear-gradient(#fff3a5, #ffe040,  #995f00); -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; text-align: center;
font-family: 'GothamBold'; text-transform: uppercase;
font-size: 2vw; margin:2vw 0; }

#bottom-section {padding:2vw 10%;}
#bottom-section h2 {font-family: 'GothamBold'; font-size:1.7vw; margin-bottom:1.2vw;}
#bottom-section p {margin-bottom:2vw;}
img.checkmark {width:2vw; height:auto; vertical-align: middle}

img.bbb {width:20vw; height:auto;}

.coupon-box {width:26vw; position:absolute; z-index:999; top:15vw; left:10vw; color:#FFF; background-color:#000; padding:.5vw; text-align:center;}
 
.coupon-box h2 {text-align:center; padding:.5vw 0; font-family: 'GothamBold'; font-size:3vw;   background: linear-gradient(#fff3a5, #ffe040,  #995f00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}

.coupon-box h3 {font-size:2vw; padding-bottom:.5vw; font-family: 'GothamBold'; text-align:center; }
.coupon-box p {font-size:.6vw; line-height:1vw;}

.coupon-perf {padding:.5vw; margin:.5vw; border:2px dashed #FFF;}






/*---------------------MOBILE---------------------*/

  

@media (max-width: 767px) {

.bumper {
height: 31vw;
}
	
	a.anchor-jump {
    display: block;
    position: relative;
    top: -23vw;
    visibility: hidden;
}
	
	
.nav-left, .nav-right {display:none;}

	p,.band-list p  {font-size:4vw; line-height:5vw;}
	
	.home .entry-content {padding:5vw;}
	
	#biography-section h3 {font-size:4vw; padding:5vw 0;}
	
	.donation h3 {font-size:6vw; margin-bottom:2vw; padding:5vw 0;}
	
	.donation .col-sm-4 {margin-bottom:5vw; }
	
	.donation .col-sm-4 .inner {min-height:auto; }
	
	a.big-red-button {font-size:4vw; line-height:5vw; margin-bottom:5vw; padding:2vw;}
	
	a.learn-more-button {font-size:4vw; line-height:5vw; padding:2vw 4vw;}
	
	
	.donation .col-sm-4 .inner {padding: 2vw 5vw;}
	
	#footer #copyright {font-size:2.5vw; line-height:4vw;}
	
	#music-section h2, #reviews-section h2, h2, #photos-section h2 {font-size:8vw; margin-top:4vw;}
	
	#reviews-section h2 {padding-bottom:2vw;}
	
	#music-section h3 {font-size:8vw;}
	
	a.order-button {font-size:8vw; padding:2vw 10vw;}
	
	
	
	.inner .col-sm-6 {padding-left:0; padding-right:0;}
	
	#red-band-strip span {font-size:6vw; line-height:9vw;}
	
	#more-1, #more-2, #more-3, #more-4 {padding:15px;}
	
	.review-box {margin-bottom:5vw;}
	
	.columns-2 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
	
	.band-list {padding:0; padding-top:4vw;}
	
	.footer-left, .footer-right {display:none; }
	#footer #copyright {
font-size: 2.2vw;
line-height: 2.5vw;
}
	
	
	.grid {


    -webkit-column-count: 2; /* Chrome, Safari, Opera */

    -moz-column-count: 2; /* Firefox */

    column-count: 2;

     margin-top:0px;

}
	
	
	
	
	
}