@font-face {
font-family: 'Encode Sans Semi';
src: local('Encode Sans Semi'), local('EncodeSansSemi'), url(../fonts/Encode_Sans_Semi_Expanded/EncodeSansSemiExpanded-Regular.ttf);
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Encode Sans Semi Bold';
src: local('Encode Sans Semi Bold'), local('EncodeSansSemi-Bold'), url(../fonts/Encode_Sans_Semi_Expanded/EncodeSansSemiExpanded-Bold.ttf) format('ttf');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'Good Timing';
src: local('Good Timing'), local('GoodTiming'), url(../fonts/Good_Timing/goodtiming-bd.ttf);
font-weight: normal;
font-style: normal;
}

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

div#header button {
visibility: hidden;
}

* {
box-sizing: border-box;
}

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

@keyframes Blinker {
  50% {
opacity: 0;
 }
}

html, body {
margin: 0;
padding: 0;
/* background: #737478; */
}

span-(disabled)-drop {
text-indent:0em;
font-size:3.4em;
display:block;
float:left;
margin-top:-0.3em; 
margin-left:0em;
margin-right:0.34rem;
margin-bottom:-1.8rem;
font-family: "Vidaloka"; 
font-weight: 500;
line-height:1.5;
color: white;
  }

#readmore button {
font-size: 0.94rem;
color: #ffc;
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
/*overflow: hidden;*/
outline:none;
text-decoration:underline;
box-shadow:none;
-webkit-box-shadow: none; 
-moz-box-shadow: none;
}

#header {
width: 100%;
margin: 0 auto;
color: #fff;
background: #13588f;
height: 2.5em;
position: fixed;
padding: 0.3em 0 0 0;
text-align: center;
}

#header p {
text-align: center;
margin: 0.5rem 0 0 3rem;
font-family: Helvetica-Neue, 'Encode Sans Semi', sans-serif;
font-size: 0.7rem;
font-weight: 600;
text-align: left;
}

/*-------- --//--/-- FORM STYLES --//--// ----------*/

form#contactform {
margin: 2em auto;
text-align: center;
}
form#contactform input[type=text] {
border: 2px solid #333;
width: 16rem;
height: 1.7rem;
font-size: 0.9rem;
color: #222;
padding-left: 0.5rem;
}

input#custemail, input#custphone {
margin-left: 0.8rem;
}

form#contactform textarea {
margin: 2em 0 0 0;
width: 50.2rem;
/* background-color: #dff5fc; */
border: 2px solid #333;
font-size: 0.9rem;
color: #222;
padding-left: 0.5rem;
}

form#contactform button[type = submit] {
margin: 0.9rem auto;
position: relative;
width: 11rem; 
min-height: 2.5rem;
height: auto;
border: 2px solid #333; 
background: #13588f;   
font-size:1.2rem; 
color: #fff;
border-color: #555;
font-weight: 500;
border-style: outset;
border-radius: 0.1em;
}

form#contactform button[type = submit]:active {
border-style:inset;
border-width: 3px;
border-color: #666 #666 #333 #333;
}

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

button.skinny {
position: relative;
padding: 0.35rem;
min-height: 0.8em; 
height: 1.8rem;
width: auto;
border: 2px solid #000; 
background: #13588f;   
font-size:0.8rem; 
color: #fff;
border-color: #777 #555 #333 #555;
border-style: outset;
border-radius: 2px;
font-weight: 500;
cursor: pointer;
}

button.skinny:hover {
background: #2b97cd;
}

button.skinny:active {
border-style:inset;
/* border-width:thick; */
border-color: black black gray gray;
}

.spacer {
width: 100%;
height: 2em;
}

img#toplogo { 
max-width: 100%;
}

#veticon {
max-width: 30%;
/*margin: 0 0.5em 0 1em;*/
margin: 0 1.6em 0 0;
}

p#socials {
margin-top: 0;
}

/* //// APPOINTMENT BUTTONS //// */

.appt {
/*display:block;*/
display: inline-block;
/*width: 15em;*/
width: 20em;
height: 2.3em;
padding: 0.5rem;
/*min-width:150px;
max-width: 300px;
height: 1.6em;*/
margin: 1em auto;
text-align: center;
/*line-height: 50px;*/
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.2rem;
font-weight: 500;
color: #fff;
background: #13588f; 
text-decoration: none;
z-index: 10; 
border-style: outset;
border-width: 0.15rem;
border-color: #888 #555;
}

.appt:active {
border-style:inset;
border-width: 3px;
border-color: #666 #666 #333 #333;
}

a, a:visited {
color: #fff;
text-decoration: none;
}

a.blue {
color: #1d83cb;
font-weight: 600;
}

/* //// PARENT & MENU DIV ///// */

#parent {
text-align:center;
margin: 1em auto; 
background: #fff;
width: 100%;
min-height: 100vh;
}

#parentappt {
text-align:center;
margin: 1em auto; 
background: #fff;
width: 100%;
min-height: 110%;
}

.menu {
margin-top: 1.2em;
position: relative;
width: 100%;
z-index: 15; 
text-align:center;
background: #13588f; 
height: 3em; 
}

/* //// SLIDES //// ----------- SLIDES */

#slidescontainer {
position: relative;
z-index: 10;
width: 100%;
height: 50vh;
margin: 0;
margin-bottom: -50vh;
}

#slidescontainer p {
font-size: 0.9vw;
line-height: 1.2vw;
float: right;
width: 50em;
height: 60%;
padding: 2rem;
border: 1px solid #333;
border-radius: 0.6rem;
background-color: #999;
font-family: 'Encode Sans Semi', Helvetica-Neue, sans-serif;
/*line-height: 1.4rem;*/
color: #fff;
}

.mySlides {
margin: 0;
z-index: 5; 
width: 100%;
height: 45vh;
border: 1px solid #000;
}

#slide1, #slide2, #slide3 {
border: none;
}

#slide1 {
background-image: url('../images/van-fast-633.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 0% 47%;
z-index: 2; /* -1 */
}

#slide2 {
background-image: url('../images/shower1.jpg');
background-repeat: no-repeat;
z-index: 2; /* -1 */
}

#slide3 {
background-image: url('../images/faucet-gray1.jpg');
background-repeat: no-repeat;
z-index: 2; /* -1 */
}

/*-----------------/////////------------------*/
/* /// ------ BOTTOM COLUMNS ------- //////// */

p.large {
min-height: 12rem;
background-color: #d0d0d0;
padding: 0.7rem;
font-size: 1.6rem;
line-height: 2.8rem;
}

.botcol {
padding: 15px;
float: left;
width: 50%; /* 100% below overrides */
font-family: 'Helvetica Neue', 'Encode Sans Semi', sans-serif;
font-size: 1rem;
line-height: 1.6rem;
}

#leftcol {
/*padding: 1em 4em;*/
/*text-align: left;*/
width: 100%;
text-align: center; /* remove for 50% dual columns */
}

#leftcol p {
width: 60%;
text-align: center;
margin: 0 auto;
}

#leftcol h2 {
font-family: 'Good Timing', 'Times New Roman', serif;
font-size: 2rem;
}

#rightcol {
/*text-align: left; */
text-align: center; /* remove for split columns */
width: 100%;
}

#rightcol img {
max-width: 11%;
margin: 2rem;
}

#rightcol img#brad {
max-width: 16%;
}

#rightcol img#delta, #rightcol img#rheem, #rightcol img#marlo {
margin-top: -0.5rem;
}

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

#botmenu-left, #botmenu-mid, #botmenu-right {
font-family: 'Helvetica Neue', 'Encode Sans Semi', sans-serif;
line-height: 1.4rem;
width: 33.3%;
float: left;
margin: 0 auto;
background-color: #555;
height: 15em;
min-height: 15em;
}

#botmenu-left {
text-align: center;
padding: 3rem 0 0 3rem;
color: #fff;
font-weight: 600;
height: 15em;
}
.bottext {
/*font-size: 0.7rem;*/
font-size: 0.9rem;
font-weight: 400; /* normally removed */
letter-spacing: 0.1rem;
}
#botmenu-mid {
border: 0;
text-align:center;
color: #fff;
}
#botmenu-right {
text-align: center;
border: 0;
color: #fff;
font-weight: 600;
padding: 3rem 3rem 0 0;
}

#botmenu-mid h3 {
font-family: 'Good Timing', 'Times New Roman', serif;
font-weight: 600;
margin: 3rem 0 -1.3rem 0;
}

#moby, #hrsmobile {
margin: 2rem 0 2rem 0;
display: none;
font-size: 0.7rem; /*was under bottext class */
}

/* ////// ------- TOP COLUMNS ------ ///// */

.topcol {
width: 33%;
float: left;
}

#lefttopcol {
font-family: Helvetica-Neue, 'Encode-Sans-Semi', sans-serif;
font-size: 0.9rem;
text-align: left;
padding: 0 0 0 2em;
width: 32%; 
}
#midtopcol {
width: 36%;
}
#righttopcol {
text-align: right;
width: 32%; 
}


/* ////------// WIDGETS W3  ---/// --//// */

.fullwidget {
position: relative;
float: right;
margin: 0;
height: 130%;
width: 35%;
z-index: 10;
border: 1px black solid;
background: #1d83cb;
}

.widget {
position: relative;
float: right;
border-radius: 6px;
margin: 1.5em 1.5em 0;
min-height: 105%;
max-height: 200%;
width: 35%;
z-index: 10;
border: 1px black solid; 
background-image: linear-gradient(to right, #13588f, #1d83cb); 
box-shadow: 2px 4px 15px #303030; 
}

.w3-animate-right {
z-index: 2;
position:relative; 
animation:animateright 0.5s;
}

@keyframes animateright {
from {right:-300px;opacity:0;} 
to{left:0;opacity:1;}
}

.w3-animate-left {
position:relative;
animation:animateleft 0.3s;
}

@keyframes animateleft {
from {left:-300px;opacity:0;} 
to{left:0;opacity:1;}
}

/* --- ////// ---- MOUSEOVER MENU BUTTONS ------ ///// */

/*Strip the ul of padding and list styling*/
ul#menu {
padding: 0;
padding-left: 0.7rem;
}

ul.hidden {
    float: left;
    position: absolute;
    display:block; /* inline-block centers menu */
	list-style-type:none;
	margin:0;
	padding:0;
	/* position: absolute; */
	z-index: 10; /* from 5 */
}

/*Create a horizontal list with spacing*/
li.mainmenu {
	display:inline-block;
	float: left;
	margin-right: 2px;
	z-index: 10; /* from 4 */
}

/*Style for menu links*/
li.mainmenu a {
  padding-top: 0.7rem;
	display:block;
	min-width:13vw;
	/* height: 50px; original version */
	height: 3em;
	text-align: center;
	/*line-height: 50px;*/
	/*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
	font-family: 'Good Timing', 'Helvetica Neue', Helvetica, Verdana, sans-serif;
	color: #fff;
	background: #808080; /* #2f3036; */
	text-decoration: none;
	z-index: 10; /* from 4 */
}

/*Hover state for top level links*/
li.mainmenu:hover a {
padding-top: 0.5rem;
	background: #a0a0a0; /* #13588f; /* #19c589; */
	z-index: 10; /* from 4 */
	height: 3.5em; /* normally 3em, but added .5 to make tab popup */
	margin: -0.5em 0; /* added to make folder tab look at top */
	border-radius: 0.5em 0.5em 0 0; /* for folder tab tops */
}

/*Style for dropdown links*/
li.mainmenu:hover ul a {
	background: #f3f3f3;
	color: #2f3036;
	height: 40px;
	/*line-height: 40px; */
	z-index: 10; /* from 4  */
}

/*Hover state for dropdown links*/
li.mainmenu:hover ul a:hover {
	background: #1d83cb; /* #13588f; */
	color: #fff;
	z-index: 10; /* from 5 */
}

/*Hide dropdown links until they are needed*/
li.mainmenu ul {
	display: none;
	z-index: 10;
}

/*Make dropdown links vertical*/
li.mainmenu ul li {
	display: block;
	float: none;
	z-index: 10;
}

/*Prevent text wrapping*/
li.mainmenu ul li a {
	width: auto;
	min-width: 13vw;
	padding: 0 20px;
	z-index: 10;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
	display: block;
	z-index: 10;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	background: #19c589;
	text-align: center;
	padding: 10px 0;
	display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
    -webkit-appearance: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}

/* ------/////  FONT AWESOME ICONS ---------- ////// */

/* Style all font awesome icons */
.fa { 
  /*padding: 6px;*/
  width: 2.6rem;
  height: 2.6rem;
  text-align: center;
  text-decoration: none; 
  border-radius: 50%;
  padding: 0.4rem;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
  /* margin: 0.8rem 0.5rem 0 0.5rem; */
  margin: 0.7rem 0 0 0.2rem;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
   margin: 0.8rem 0.5rem 0 0;
}

/* /// SCREEN WIDTH ADJUSTMENTS // */

@media (max-width: 936px) {
#header {
height: 2em;
 }
.fa {
width: 1.5rem;
height: 1.5rem;
padding: 0.2rem;
  }
.fa-facebook {
margin: 0.2rem 0.5rem 0 0.3rem;
 }
 
 #lefttopcol {
width: 16%;
font-size: 0.6rem;
}
#midtopcol {
width: 60%;
}
#righttopcol {
width: 24%;
}
 
#leftcol {
font-size: 0.8rem;
line-height: 1.3rem;
width: 95%;
  }  
#leftcol h2 {
font-size: 1.5rem;
text-align: center;
} 
.menu {
height: 2em;
 } 
li a {
height: 2.2em;
font-size: 0.9rem;
padding-top: 0.5rem;
 }
li a:hover {
height: 2.6em;
margin: -0.4em 0;
}
#header p {
font-size: 0.4rem;
 }
img#toplogo {
width: 100%;
 }
#botmenu-mid h3 {
font-weight: 500;
margin: 3rem 0 -0.5rem 0;
 }
.appt {
width: 15em;
font-size: 1rem;
font-weight: 500;
padding: 0.4rem;
 }
#rightcol img {
max-width: 18%;
margin: 0.5rem;
 }
#rightcol img#brad {
max-width: 24%;
 }
#veticon {
max-width: 70%;
margin: 0 1em 0 0;
 }
form#contactform input[type=text] {
border: 2px solid #333;
width: 16rem;
height: 1.7rem;
font-size: 0.9rem;
color: #222;
padding-left: 0.5rem;
margin-left: 0;
margin: 0.5rem 0;
 }
form#contactform textarea {
margin: 2em 0 0 0;
width: 90%;
height: 40%;
/* background-color: #dff5fc; */
border: 2px solid #333;
font-size: 0.9rem;
color: #222;
padding-left: 0.5rem;
 }
#slide1 {
background-image: url('../images/van-fast-mobile.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 49% 47%;
z-index: 2; /* -1 */
}
#rightcol img#delta, #rightcol img#rheem, #rightcol img#marlo {
margin-top: 0;
}
}

/* ---// SMALLER MEDIA -- /// */

@media (max-width: 800px) {
button.skinny {
height: 1.5rem;
padding: 0.2rem;   
font-size:0.6rem; 
font-weight: 500;
 }
.mySlides {
height: 40vh;
 }
#botmenu-left, #botmenu-right {
height: 26em;
width: 10%;
}
#botmenu-mid {
height: 26em;
width: 80%;
}
#lefttopcol {
font-size: 0.3rem;
 }
#leftcol {
font-size: 0.8rem;
line-height: 1.3rem;
  }  
.fa-facebook {
padding: 0;
padding-top: 0.3rem;
font-size: 0.9rem !important;
margin: 0.1rem 0 0 0.1rem;
}
/*.fa {
width: 1.3rem;
height: 1.3rem;
padding: 0.2rem;
  }
.fa-facebook {
margin: 0.2rem 0.5rem 0 0.3rem;
 }
.fa-twitter {
margin: 0.2rem 0.5rem 0 0;
 } */
.menu {
height: 2em;
 }
li a {
height: 2.5em;
font-size: 0.8rem;
padding-top: 0.4rem;
min-width: 20vw;
margin: 0;
 }
li:hover a {
height: 2.9em;
margin: -0.4em 0;
/*margin: -0.4em 0;*/
}
#botmenu-left, #botmenu-mid, #botmenu-right {
font-size: 0.8rem;
line-height: 1.2rem;
 }
#botmenu-mid {
width: 64%;
}
#botmenu-left {
width: 18%;
}
#botmenu-right {
width: 18%;
}
#botmenu-mid h3 {
font-weight: 500;
margin: 1rem 0 -0.9rem 0;
}
#leftcol p {
width: 99%;
text-align: center;
margin: 0 auto;
}
.bottext {
display: none;
 }
#moby, #hrsmobile {
display: block;
 }
li.mainmenu a {
padding-top: 0.7rem;
min-width:13vw;
height: 2.8em;
font-size: 0.7rem;
padding-left: 0.3rem;
padding-right: 0.3rem;
  }
}
/*-- // SMALLEST MEDIA --/ */
@media (max-width: 760px) {
li.mainmenu a{
padding-top: 0.7rem;
min-width:13vw;
height: 3em;
font-size: 0.65rem;
padding-left: 0.2rem;
padding-right: 0.2rem;
  }
p.large {
font-size: 1.3rem;
line-height: 2.2rem;
}
}