@charset "utf-8";
/* CSS Document */
	   
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} } 

.page-wrap {
	width: 370px;
	height: auto;
	margin: 0px auto;
}

body{
	font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana," sans-serif";
	background: black;
}

header{
	width: 370px;
	height: 225px;
	margin-left: 0px;
	z-index: -100;
	float: left;
	position: fixed;
}

 h1:first-letter {
	 font-size: 55px;
     float: left; 
     color: white;
     line-height: 35px;
     padding-top: 3px; 
     padding-right: 2px;
     text-shadow: 3px 5px 5px black;
     font-family: Times, serif, Georgia;
			  
		  }
h1{
	font-size: 16px;
	font-style:normal;
	font-weight: normal;
	margin-bottom: -14px;
	
}

h2{
	font-size: 16px;
	font-weight: normal;
	display: inline;
	font-style: italic;
}
 .phone-number{ 
    width: 370px; 
	height: 40px;
	padding-bottom: 0px;
	margin-top: -20px;
	margin-left: 75px;
	background-repeat: no-repeat;
	float: left;
	  
	   font-size: 20px;
  
  
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 100px #fff, 0 0 30px #fff, 0 0 40px #33A8FF, 0 0 50px #33A8FF, 0 0 60px #33A8FF, 0 0 90px #33A8FF, 0 0 100px #33A8FF;
  }
  to {
    text-shadow: 0 0 200px #fff, 0 0 40px #33A8FF, 0 0 50px #33A8FF, 0 0 60px #33A8FF, 0 0 70px #33A8FF, 0 0 80px #33A8FF, 0 0 90px #33A8FF;
  }
}	 

.header-wrap{
	width: 370px;
	height:195px;
}

.headerbackground {
	background-image: url("../images/pklogophone.png");
	width: 370px;
	height: auto;
	margin: -15px 0px;
	padding-top: 0px;
	float:left;
	background-repeat: no-repeat;
	display: none;
}
 
.poolkinglogo {
	background-image:url("../images/pklogophone.png");
	width: 370px; 
	height: 225px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-left: 0px;
	background-repeat: no-repeat;
	float: left;
	
}

.navbar { 
	width: 370px;
	float: left;
    height: 200px;
	margin: 0px auto;	
	border-top: 5px solid black;  
	border-bottom: 5px solid black;
	background: linear-gradient(to bottom right, rgba(0,102,255,.2), rgba(77, 148, 255, .4));
	background-repeat: no-repeat;
	z-index: 100;
	text-align: center;
	background-color: black;
	display: none;
}

.navbarplaceholder {
	width: 370px;
    height: 55px;
	margin: -140px 0px;	
	border-top: 5px solid black;  
	border-bottom: 5px solid black;
	background: rgb(0,102,255);
	background-repeat: no-repeat;
	float: left;
	visibility: hidden;	
	display:none;
	background-color: black;
}
	
.fixed-navbar{ 
	width: 768px;
    height: 55px;
	position:fixed;
	margin: -215px 0px;
	padding: 1px;
	border-top: 5px solid black;  
	border-bottom: 5px solid black;
	background: rgba(0,102,255,1);
	background-repeat: no-repeat;
	z-index: 100;
	background-color: black;
	display:none;
}

input.search {
	border-radius: 5px; 
	height: 20px; 
	margin-top: 15px; 
	border: 1px solid rgb(150,150,150);
	width: 200px;
	background: rgb(255,255,255) url(../images/search.png) no-repeat 4px 4px;
	padding: 4px 4px 4px 30px;
	margin-right: 10px; 
	float:right;
	display: none;
}

.gradientbox {
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left top, rgb(0,102,255), white); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, rgb(0,102,255), white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, rgb(0,102,255), white); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, rgba(0,102,255,.2), rgba(77, 148, 255, .4));
    width: 360px;
    height: auto;
    margin: 0px 0px;
    float: left;
    padding: 5px;
	background-color: black;	
}

.cleaner {
	width: 150px;
	height: 150px;
    margin: 10px 2px;
    padding-right:3px;
    float: left;
	clear: right;
    background:url("../images/cleanercirclephone.png") no-repeat ; 
}

 .tester {
	width: 150px;
	height: 150px;
	margin-top: 0px;
	margin-bottom: -8px;
    margin-right: 6px;
	margin-left: 3px;
    float: right;
	clear: left;
    background:url("../images/testerphone.png") no-repeat ; 
}
.poolmaintenance {
    width: 335px;
	height: 130px;
	margin-top: 10px;
    margin-left: -2px;
    float: left;
	clear: both;
	padding-right: 0px;
	padding-bottom: 10px;
    background:url("../images/pool-maintenance-phone.png") no-repeat ; 
}

 .bottommaintenance {
	width: 310px;
	height: 205px;
    margin: 5px 0px;
	 padding-right: 100px;
    float: left;
	clear: right;
    background:url("../images/bottommaintenance.png") no-repeat ; 
}

.openpool {
    width: 335px;
	height:140px;
    margin: 6px 0px;
    float: left;
	clear: both;
	padding-left: 70px;
    background:url("../images/open-pool-phone.png") no-repeat ; 
}

 .closedpool {
	width: 330px;
	height: 140px;
    margin: 10px 2px;
    float: left;
	clear: both;
    background:url("../images/closed-pool-phone.png") no-repeat ; 
}

.topleakdetection {
    width: 335px;
	height: 140px;
	margin-top: 10px;
    margin-left: 0px;
    float: left;
	clear: both;
	padding-right: 100px;
	padding-bottom: 10px;
    background:url("../images/top-leak-detection-phone.png") no-repeat ; 
}
.leakbottom {
    width: 401px;
	height: 205px;
    margin: 6px 2px;
    float: left;
	clear: right;
	padding-left: 400px;
    background:url("../images/leak-bottom-phone.png") no-repeat ; 
}

.crackrepairtop {
    width: 335px;
	height: 140px;
	margin-top: 10px;
    margin-left: 0px;
    float: left;
	clear: both;
	padding-right: 100px;
	padding-bottom: 10px;
    background:url("../images/crack-repair-top-phone.png") no-repeat ; 
}

.poolinspections {
    width: 335px;
	height: 110px;
	margin-top: 10px;
    margin-left: -1px;
    float: left;
	clear: both;
	padding-right: 100px;
	padding-bottom: 10px;
    background:url("../images/swimming-pool-inspections-phone.png") no-repeat ; 
}

.repairs {
    width: 335px;
	height: 130px;
	margin-top: 10px;
    margin-left: 0px;
    float: left;
	clear: both;
	padding-right: 100px;
	padding-bottom: 10px;
    background:url("../images/repairs-top-phone.png") no-repeat ; 
}

.warranty {
    width: 335px;
	height: 110px;
	margin-top: 10px;
    margin-left: 0px;
    float: left;
	clear: both;
	padding-right: 100px;
	padding-bottom: 10px;
    background:url("../images/warranty-phone.png") no-repeat ; 
}

.companies {
    width: 205px;
	height: 205px;
    margin: 10px 10px;
    float: left;
	clear: right;
    background:url("../images/companies.png") no-repeat ; 
}

.aboutus {
    width: 420px;
	height: 162px;
	margin-top: 10px;
    margin-left: 0px;
    float: left;
	clear: both;
	padding-right: 100px;
	padding-bottom: 10px;
    background:url("../images/about-us-phone.png") no-repeat ; 
}
.bottomwarranty {
	width: 310px;
	height: 230px;
    margin: 10px 20px;
	padding-left: 0px;
    float: right;
	clear: left;
    background:url("../images/bottom-warranty.png") no-repeat ; 
}
.crackrepairbottom {
	width: 255px;
	height: 205px;
    margin: 10px 40px;
	padding-right: 40px;
    float: left;
	clear: right;
    background:url("../images/crackbottom.png") no-repeat ; 
}	
.contentindex{
	text-indent: 3px;
    font-size: 15px;
	margin: 3px 3px;
	color: white;
	float: left;
	width: 319px;
	height: auto;
	background: linear-gradient(to bottom right, rgba(0,102,255,1), rgba(0,0,0, .5)); 
	border-radius: 10px 10px 10px 10px;
	border: 3px solid black;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-top: 0px;
}

.rightbox {
	width: 225px;
	height: 285px;
	margin: 50px 20px;
	float:right;
	background: rgba(0,102,255,0.4);
	color: white;
	text-shadow: 3px 5px 5px black;
	border: 3px solid black;
	border-radius: 100px 10px 10px 10px;
	text-align: center;
	font-weight: bold;
	display: none;
}

.slider{
	width:375px;
	height: 400px;
	margin-left: 65px;
	margin-top: 0px;
	float: left;	
}

.slide1,.slide2,.slide3,.slide4,.slide5,.slide6 {
    position: absolute;
    width: 225px;
    height: 400px;
    background: black;	
}

.slide1 {
    background: url(../images/gps.png)no-repeat center;
    animation:fade 25s infinite;
    -webkit-animation:fade 25s infinite;
} 

.slide2 {
    background: url(../images/servicetickets.png)no-repeat center;
    animation:fade2 25s infinite;
    -webkit-animation:fade2 25s infinite;
}

.slide3 {
    background: url(../images/drugfree.png)no-repeat center;
    animation:fade3 25s infinite;
    -webkit-animation:fade3 25s infinite;
}

.slide4 {
    background: url(../images/backgroundcheck.png)no-repeat center;
    animation:fade4 25s infinite;
    -webkit-animation:fade4 25s infinite;
}

@keyframes fade{
  0%   {opacity: 1}
  25% { opacity: 0}
  50% { opacity: 0}
  75% { opacity: 0}
  100% { opacity: 1}
}

@keyframes fade2{
  0%   {opacity: 0}
  25% { opacity: 1}
  50% { opacity: 0}
  75% { opacity: 0}
  100% { opacity: 0}
}

@keyframes fade3{
  0%   {opacity: 0}
  25% { opacity: 0}
  50% { opacity: 1}
  75% { opacity: 0}
  100% { opacity: 0}
}

@keyframes fade4{
  0%   {opacity: 0}
  25% { opacity: 0}
  50% { opacity: 0}
  75% { opacity: 1}
  100% { opacity: 0}
}

.footer{
	font-style: oblique;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	padding-left: 15px;
	padding-right: 15px;
	color: white;
	float: left;
	text-align: center;
	margin: 0px 0px;
	width: 340px;
	height: 118px;
    background: blue; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left top, rgba(0,102,255,.5), rgba(77, 148, 255, .8)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, rgba(0,102,255,.5), rgba(77, 148, 255, .8)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, rgba(0,102,255,.5), rgba(77, 148, 255, .8)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, rgba(0,102,255,.5), rgba(77, 148, 255, .8));
	background-color: black;		
}
/* start of social media footer*/


h3 {
    margin:  15px 0;
	width: 375px;
}


h4 {
    margin:  15px 0;
	width: 375px;
}

._12 {
    font-size: 1.2em;
}

._14 {
    font-size: 1.4em;
}

.icon {
    padding:5px;
    list-style: none;
}

.footer-social-icons {
    width: 370px;
    display:block;
    margin: 0px auto;
	font-style: oblique;
	color: white;
	float: left;
	text-align: center;
	height: 105px;
    background: blue; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left top, rgba(0,102,255,.2), rgba(77, 148, 255, .4)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, rgba(0,102,255,.2), rgba(77, 148, 255, .4)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, rgba(0,102,255,.2), rgba(77, 148, 255, .4)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, rgba(0,102,255,.2), rgba(77, 148, 255, .4));
	background-color: black;
	font-family: 'Lato', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.social-icon {
    color: black;
}

.social-icons {
    margin-top: 5px;
	margin-left: -35px;
}

.social-icons li {
    vertical-align: top;
    display: inline;
    height: 100px;
}
.social-icons a {
    color: #fff;
    text-decoration: none;
}

.fa-facebook {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .3s;
    background-color: linear-gradient(to bottom right, rgba(0,102,255,.2), rgba(77, 148, 255, .4));;
}

.fa-facebook:hover {
    background-color: #3d5b99;
}

.fa-twitter {
    padding:10px 12px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .2s;
    background-color: linear-gradient(to bottom right, rgba(0,102,255,.2), rgba(77, 148, 255, .4));;
}

.fa-twitter:hover {
    background-color: #00aced;
}

.fa-rss {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .2s;
    background-color: linear-gradient(to bottom right, rgba(0,102,255,.2), rgba(77, 148, 255, .4));;
}

.fa-rss:hover {
    background-color: #eb8231;
}

.fa-youtube {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .2s;
    background-color: linear-gradient(to bottom right, rgba(0,102,255,.2), rgba(77, 148, 255, .4));
}

.fa-youtube:hover {
    background-color: #e64a41;
}

.fa-linkedin {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .2s;
    background-color: linear-gradient(to bottom right, rgba(0,102,255,.2), rgba(77, 148, 255, .4));;
}

.fa-linkedin:hover {
    background-color: #0073a4;
}

.fa-google-plus {
    padding:10px 9px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .2s;
    background-color: linear-gradient(to bottom right, rgba(0,102,255,.2), rgba(77, 148, 255, .4));;
}

.fa-google-plus:hover {
    background-color: #e25714;
}
/* end of social media footer*/

/*
Responsive Mobile Toggle Menu v2.2
Description: Mobile first responsive toggle menu
*/

/*Menu mobile first CSS*/
body{ -webkit-animation: bugfix infinite 1s; }

/*This fixes a chrome/webkit bug for older Android Browsers */
/* causing issues in safari @-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} } */

/*Required functional CSS don't change this bit
CSS styles are at the end! */

.mainMenu {
	color: white;
	display:block;
	position:relative;
	width:100%;
	margin:0;
	padding:0;
	float:left;
	background: linear-gradient(to bottom right, rgba(0,102,255,.5), rgba(77, 148, 255, .8));
	background-color: black;
}
	
#toggleMenu { 
	display: none;
}

#toggleMenu:checked ~ ul {  
	max-height:100%; /*Make page height*/ 
	opacity:1;
}
	
.mainMenu > ul {
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
	float:left;
    overflow-y: hidden;
	max-height:0;
}

.mainMenu li {
	margin:0;
	padding:0;
	white-space:nowrap;
	display:block;
	width:100%;
	float:left;
}
	
.mainMenu a, .mainMenu a:visited {
	display:block;
	width:100%; /*required to make whole element clickable*/
}

label.menuTitle {
	margin:0;
	display:block;
	cursor:pointer;
	background: url('../images/menu-white.png');
    background-image: url('../images/menu-white.svg'), none; 
	background-repeat: no-repeat;
	background-position: 97% 10px;
	background-size: 24px 19px; /*Make same size as your menu.png*/
}
	
@media screen and (min-width:768px) {

label.menuTitle {
	display:none;
}
	
.mainMenu ul { 
	display:block!important;
	border:0;
	overflow:visible;
	max-height:100%!important; 
}	

.mainMenu ul li {
	width:auto; 
	display:inline; 
	border:0; 
}
}


/* Child CSS Functionality - do not change*/
.mainMenu > ul ul {
	float:left;
	width:100%;
	margin:0;
	padding:0;
}

@media screen and (min-width:768px) {
		
.mainMenu > ul > li {
	position: relative;
}

.mainMenu > ul > li:hover ul {
	display: block!important;
}

.mainMenu > ul ul {
	display:none!important;
	position: absolute;
	left:0;
}

.mainMenu > ul ul li {
	display: block;
	width:100%;
	float:left;
	padding:0;
	margin:0;
}
	
.mainMenu .toggleChildren {
	display:none!important;
}
}
/*End Child CSS Functionality*/

/*Menu Styling CSS - change the below to suit your site!*/
.mainMenu {
	border-bottom:1px solid dodgerblue;
}

.mainMenu li {
	border-top:1px solid dodgerblue;
}
	
.mainMenu a, .mainMenu a:visited {
	color:white;
	text-decoration:none;
	width:94%; /*Use 100% and box-sizing if not supporting ie7*/
	padding:5px 3%;
	background: none;
}
	
label.menuTitle {
	font-size:20px;
	width:94%;  /*Use 100% and box-sizing if not supporting ie7*/
	padding:6px 3%;
	font-weight:bold;
}
	
@media screen and (min-width:768px) {

.mainMenu li {
	border:0;
}
	
.mainMenu a:hover  {
	color:dodgerblue;
}

.mainMenu a, .mainMenu a:visited {
	padding:10px 3px 10px 8px;
}
}

/*Menu Child Styling*/
.mainMenu .toggleChildren {
	float:right;
	margin-right:3%;
	width:30px; /*Note width is required */
	height:30px; /*Customise to your menu height*/
	padding:0;
	display:block;
	background:url(../images/nav-arrow.png) no-repeat center center;
	background-size: 11px 8px; 
}

.mainMenu .toggleChildren.contract {
	background:url(../images/nav-arrow.png) no-repeat center center;
	background-size: 11px 8px; 
	-moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

.mainMenu > ul ul a, .mainMenu > ul ul a:visited {
	background:rgb(13,128,242);
}


@media screen and (min-width:768px) {
	
.mainMenu > ul > li:hover > a {
	 color:#767676;
}

.mainMenu > ul ul {
	 top:38px; /*height of your main nav*/
	 min-width:260px; /*Set your width*/
}

.mainMenu > ul ul a {
	 border:0;
	 border-bottom:1px solid #ccc;
}
}
/*End Menu Child Styling*/

/* contact form css*/
form.email p {
    font-size: 15px;
    padding: 0 0 10px 0;
    margin: 0;
}

form.email input, form.email textarea {
    font-family: Arial;
    font-size: 15px;
    margin: 0 0 20px 0;
}

form.email input {
    background: #f5f5f5;
    padding: 5px;
    border: 1px solid #bbb;
    border-radius: 5px;
}

form.email textarea {
    background: #f5f5f5;
    padding: 5px;
    border: 1px solid #bbb;
    border-radius: 5px;
    width: 316px;
    height: 250px;
}

form.email input.send {
    color: #fff;
    background: #222;
    border: #000;
    padding: 10px 25px 10px 25px;
    cursor: pointer;
}

.error {
	color: #FF0000;
}
/* end contact form css*/

.footer3{
	font-style: oblique;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	color: white;
	float: left;
	padding-left: 15px;
	padding-right: 15px;
	text-align: center;
	margin: 0px 0px;
	width: 340px;
	height: 138px;
    background: blue; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left top, rgba(0,102,255,.5), rgba(77, 148, 255, .8)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, rgba(0,102,255,.5), rgba(77, 148, 255, .8)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, rgba(0,102,255,.5), rgba(77, 148, 255, .8)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, rgba(0,102,255,.5), rgba(77, 148, 255, .8));
	background-color: black;
}

.footer3 a{
	color: white;
	text-decoration: none;
}

.mapcontact {
	float:right;
	margin: -10px 0px;

	}


.retailmap {
	display: none;
	visibility: hidden;
}
.retailmapt {
	display: none;
	visibility: hidden;
}
.retailmapp {
	
}