/*Style Sheet for Splash's Pools Responsive website - September 2017
Prepared by McNicol Williams Management & Marketing Services - Author Max Williams*/
* {margin: 0px;padding: 0px;box-sizing:border-box;}
html {height: 100%;}
body {min-height: 100%;font-size: 18px;font-family: Roboto, sans-serif;overflow: auto;background-color: #EAFAFC;}
/* __________________________________________________________________________________________________ */
#container {position:relative;left: 0;top: 0;width: 100%;min-height:100vh;padding: 0;}
#container::after{content: "";background: url('../images/Site/water.gif');opacity: 0.3;top: 0;left: 0;bottom: 0;right: 0;position: absolute;z-index: -1;  }
/* Header styles */
#top {width: 100%;margin:0 auto;background-color: #F9F9F9;border-bottom: 0px solid #094896;text-align: center;}
img.headerbrand {width: 90%;height: auto;margin: 0.5em auto 0;}
.phonehours1 {display: none;}
.phonehours2 {display: block;width: 90%;margin: auto;background-color: transparent;}
/* Content Styles */
#content{margin: 0em auto 0em;width:100%;}
.contentwide{width:100%; background-color:transparent;}
/* contentwide background colour styles */
.cwgbg-blue-1{background-color:#6AAFF3;}
.cwgbg-blue-2{background-color:#21BFFF;}
.cwgbg-blue-o{background-color:#3399FE;}
.contentcarrier{width:96%; max-width:1000px;margin:auto;}
.cccol-center{width:98%;max-width:450px;margin:0.5em auto;} /* Looks like a column div, (cccol-left, etc.) but is centered and is not in a column. */
.cccol-left, .cccol-right, .cccol-left2, .cccol-right2{width: 98%;margin:auto; float:none;}
.cccol-left2, .cccol-right2{width: 95%;}
.cccol-right2{margin-top: 1em;}
.keyitemcarrier{width:100%;background:none;margin-top:-3em;}
.keyitem1, .keyitem2, .keyitem3, .keyitem4{width:98%;max-width:350px;margin:1em auto;float:none;background-color:#FFFFFF;border: 1px solid #E4E4E4;padding:1em;overflow:hidden;text-align:center;font-family:"bree serif";}
.interlink{width: 98%;max-width:350px;margin:0 auto;padding:0;background-color:#FFFFFF;border:1px solid #E4E4E4;}
.interlinklogo{float:none;margin:auto;padding:1em  0.5em;width:250px;}
.interlinkfill{width:100%; text-align:center;display:block;}
.interlinktext{text-align:center;padding:1em 0.2em 2em;}
.alarm-captcha{margin:0 auto; background: url('../images/Site/blue-jean-texture.jpg');border: 1px solid #99AA99;width: 80%;max-width:500px;padding: 3.5em 0.3em;text-align: center;} /* background-color: #0099FF;*/
.goback, .gohome{background-color: #0088EE; color: #FFFFFF;width: 80%;max-width:300px;padding: 0.1em 0.3em;border: 1px solid #FFFFFF; font-size: 1.4em;}
.gohome{margin:auto;max-width:400px;}
img.keyitem{width:100%;height:auto;}
/* The line below was commented out to remove the effect of round images in a rectangular box as requested by the client. The animations in media queries min width 1009 were also commented out. 
img.keyitem{width:75%;height:auto;border-radius: 50%;}*/ 
p.keyitem {color:#C42B1D;text-align:center;font-size:1.6em;}
p.sitelink{color:#C42B1D;font-weight:bold;font-family:"bree serif"; padding:1em 0}
p.colhead, p.colhead2, p.sechead, p.sechead2 {color: #C42B1D;text-shadow: rgb(51, 51, 51) 1px 1px;font-size: 1.4em;font-weight: bold;text-align: center;padding: 0em 0em 1em;}
p.colhead2 {text-align: left;}
p.sechead, p.sechead2 {color:#FFFFFF;padding:0 0 0.5em;font-size: 1.8em;text-shadow: rgb(51, 51, 51) 1px 2px;}
/* Possible blue for heading text #2B8AF1*/
p.sechead2 {padding:0;}
p.subhead {text-align:center;padding:0 0 0.5em;font-weight:bold;font-size:1.2em;color:#FFFFFF;text-shadow: rgb(51, 51, 51) 1px 1px;}
p.col, p.colsmall,p.colbold {padding: 0.5em 0em;font-size: 1em;font-weight: normal;text-align: justify;}
p.colsmall {font-size: 0.9em;}
p.colbold {font-weight: bold;}
ul.collist, li.collist {margin-left: 0.5em;padding: 0.2em 0;font-weight: bold;}
/* Handle responsive slide shows with different slides for screen sizes */
.sliderresp1{display:block;margin-bottom:-20px;}
.sliderresp2{display:none;}
/* Handle layer for text overlay on slider */
.slideroverlay1{display:block;position:relative;top:-6em;left:0%;background-color:transparent;color:#FFFFFF;text-align:center;z-index:600;}
.slideroverlay2{display:none;}
.slideroverlay3{display:none;}
h1.slideroverlay{font-size:2em;font-weight:bold;text-shadow: #000000 1px 1px;}
/* Content slide show for specials defines here */
.underslides {position: relative;left: 0;top: 1em;}
/* Content links */
a:link.contentred, a:visited.contentred {color: #C42B1D;text-decoration: none;}
a:hover.contentred {color: #074D95;text-decoration: underline;}
a:link.keyitem, a:visited.keyitem, a:hover.keyitem {display:block;text-decoration: none;}
a:link.interlink, a:visited.interlink, a:hover.interlink {display:block;text-decoration: none;width: 100%; height: 100%;color: #0099FF;text-align: center;}
/* Footer styles */
#footer, #footerShortPage {width: 100%;background-color: #3E3E3E;color: #FFFFFF;text-align: center;padding: 0.5em 0em 0.5em;} 
/* footerShortPage allows footer to sink to the bottom of the screen at media rule "@media screen and (min-width: 1009px) " */
.footerbreak{display: block;}
.footinline, .footinline1, .footinline2{display: none;}
a:link.footer, a:visited.footer, a:hover.footer {font-size: 0.8em;color: #0099FF;text-decoration: none;}
a:hover.footer {text-decoration: underline;}
/* General Styles  */
/*h1, h2 {text-align: center;font-size: 2em;font-weight: bold;color: #C42B1D;}*/
h2 {text-align: center;font-size: 2em;font-weight: bold;color: #C42B1D;}
h2 {font-size: 1.6em;}
.bold {font-weight: bold;}
.small {font-size: 0.8em;}
.medium {font-size: 1.2em;}
.large {font-size: 1.6em;}
.justify {text-align: justify;}
.leftalign {text-align: left;}
.center {text-align: center;}
.rightalign {text-align: right;}
.white {color: #FFFFFF;}
.red {color: #C42B1D;}
.grey {color: #333344;}
.blue{color:#00008B;}
.clear, .clearspace {width: 100%;height: 1px;clear: both;}
.clearspace{height:1em;}
.padtop{padding-top: 0.5em;}
.padbot{padding-bottom: 0.5em;}
.spaced{padding:0.5em 0;}
.unspaced{padding:0;}
.smallscreen{display:block;}
.bigscreen{display:none;}
.circular--square {border-radius: 50%;}
img.showmobile {display: block;}
img.showwide {display: none;}
/* Unique Styles Created for Sharing in Shop */
/* Shopholder style replicated in the theme style sheet ------
#shopholder {width: 94%;max-width:1000px;margin: 10px auto 0;background-color: #F4F4F4;opacity: 0.85;filter: alpha(opacity=85);padding: 2%;border: 1px solid  #C8C8C8;text-align: left;} */
p.days, p.phoneL, p.phoneT, p.daysM, p.phoneLM, p.phoneTM{font-family: Roboto, sans-serif;line-height:120%;}
p.days{margin: 0.3em 0 0 ; text-align: left; font-size: 1.4em; color: rgb(196,42,28); font-weight: bold;}
p.phoneL{margin: -0.1em 0 0; text-align: left; font-size: 0.9em; font-weight: normal; color: #094896;}
p.phoneT{margin: 0em 0 0; text-align: left; font-size: 0.9em; font-weight: normal; color: #094896;}
p.daysM{margin: 0.3em 0 0 ; text-align: center; font-size: 1.2em; color: rgb(196,42,28); font-weight: bold;}
p.phoneLM{margin: -0.1em 0 0; text-align: center; font-size: 0.9em; font-weight:bold; color: #094896;}
p.phoneTM{margin: 0.3em 0 0; text-align: center; font-size: 0.9em; font-weight: bold; color: #094896;}
.shopmenu{font-family:'Open Sans Condensed';font-weight:normal;}
/*  _______________________________________ Media Queries Begin _______________________________    */
@media screen and (min-width: 502px) and (max-width: 820px) {
img.headerbrand {width: 70%;height: auto;margin: 0.5em auto 0;}
/* Handle layer for text overlay on slider */
.slideroverlay1{display:none;}
.slideroverlay2{display:block;position:relative;top:-8em;left:0%;background-color:transparent;color:#FFFFFF;text-align:center;z-index:600;}
.slideroverlay3{display:none;}
h1.slideroverlay{font-size:3em;}
.keyitemcarrier{margin-top: -2em;}
}
@media screen and (min-width: 821px) and (max-width: 1008px) {
/* Header styles */
img.headerbrand {width: 40%;height: auto;margin: 0.5em auto 0 10%;}
.phonehours1 {display: block;width: 380px;float: right;background-color: transparent;}
.phonehours2 {display: none;}
/* Handle layer for text overlay on slider */
.slideroverlay1{display:none;}
.slideroverlay2{display:block;position:relative;top:-8em;left:0%;background-color:transparent;color:#FFFFFF;text-align:center;z-index:600;}
.slideroverlay3{display:none;}
h1.slideroverlay{font-size:2.5em;}
.keyitemcarrier{margin-top:-5em;}
/* Footer styles */
#footer {position:fixed;left: 0px;bottom: 0px;}
.footerbreak{display: none;}
.footinline, .footinline2{display: inline;}
}

/* PC Screen size change for  interlink div on landscape tablets   */
@media screen and (min-width: 1009px) and (max-width: 1040px) {
.interlink{width: 98%;max-width:700px;}
.interlinklogo{float:left;margin:0 1em 0 0;padding:0.4em 0.5em 0;width:100%;max-width:250px;}
.interlinktext{overflow: hidden;text-align:center;padding:0.2em 0.5em;}
.interlinkfill{width:100%; text-align:center;display:none;}
.smallscreen{display:none;}
.bigscreen{display:none;}
p.sitelink{padding:0}
}
@media screen and (min-width: 1041px) {
.interlink{width: 98%;max-width:800px;margin:0 auto;padding:0;}
.interlinklogo{float:left;margin:0 1em 0 0;padding:0.4em 0.5em 0;width:100%;max-width:250px;}
.interlinktext{overflow: hidden;text-align:center;padding:0.2em 0.5em;}
.interlinkfill{width:100%; text-align:center;display:none;}
.smallscreen{display:none;}
.bigscreen{display:block;}
p.sitelink{padding:0}
}

/* PC Screen sizes  ___________________________________________________________________   */
@media screen and (min-width: 1009px)  { 
#top {position: fixed;left: 0;top: 0;height:130px;z-index: 700;}
.phonehours1 {display: block;width: 380px;float: right;background-color: transparent;}
.phonehours2 {display: none;}
#content {position:relative;top:130px;left:0;}
.cccol-left, .cccol-right{width: 98%; max-width:450px; float:left;}
.cccol-left2, .cccol-right2 {width: 95%;max-width:440px; float:left;}
.cccol-right, .cccol-right2{float:right;}
.cccol-right2{margin-top: 0;}
/* .keyitemcarrier{height:__em;} is specified for each standard screen width - see below */
.keyitem1, .keyitem2, .keyitem3, .keyitem4{width:17%;margin:0em 4%;float:left;}
img.keyitem{width:75%;height:auto;} /*border-radius: 50%; -webkit-transform: rotate(-10deg); *//* Safari *//* transform: rotate(-10deg);}*/
img.keyitem:hover{width:100%;height:auto;} /*border-radius:0%; -webkit-transform: rotate(0deg);*/ /* Safari */ /*transform: rotate(0deg); -webkit-transform: 0.5s; *//* Safari */ /*transition: transform 0.5s;}*/
p.sechead, p.sechead2 {padding:0.5em 0;font-size: 2.2em;text-transform:uppercase;}
 p.sechead2 {padding:0.5em 0 0 0;}
img.headerbrand {width: 40%;max-width: 490px;height: auto;float:left;margin: 1.5em 0 -0.5em;}
img.indexmenu {width:24px;height: 24px;margin: 0px 0em 0 1em;border: 0px solid;}
img.showmobile {display: none;}
img.showwide {display: block;}
.indexmenuholder {width: 80%;max-width: 1000px;margin: 1em auto;text-align: center;}
ul.indexmenu, li.indexmenu {color: #FFFFFF;display: inline;}
ul.indexmenuM, li.indexmenuM {display: none;}
a:link.index, a:visited.index, a:hover.index {font-size: 1.4em;}
.otherindexoffersleft {float: left;margin: 0.1em;background: transparent;width: 47%;max-width: 340px;padding: 0.2em 1%;}
.otherindexoffersright {float: right;margin: 0.1em;background: transparent;width: 47%;max-width: 340px;padding: 0.2em 1%;}
#contentPromo {max-width: 1000px;margin: -15em auto 5em;padding: 1em;}
.col1,.col2, .col2index,.col3 {float: left;margin-left: 3%;width: 28%;padding: 0.2em 1%;height: 32em;}
.col1 {margin-top: 0;}
.col2index {background: url('../images/products40.png') right top;background-size: auto 100%;background-repeat: no-repeat;background-color: rgba(83,204,255,0.95);}
.percont1 >ul {margin-left: 50px;color: #626262;}
.percont1 >ol {margin-left: 50px;color: #626262;}
#shopholder {margin: 180px auto 20px;}
/* Handle responsive slide shows with different slides for screen sizes */
.sliderresp1{display:none;}
.sliderresp2{display:block;margin:0 0 10px;}
/* Handle layer for text overlay on slider */
.slideroverlay1{display:none;}
.slideroverlay2{display:none;}
.slideroverlay3{display:block;position:relative;top:-5em;left:12%;width:88%;background-color:transparent;color:white;z-index:600;}
h1.slideroverlay{font-size:2.2em;}
/* Footer styles */
#footer{margin-top:130px;}
#footerShortPage{position:absolute;bottom:0;}
.footerbreak{display: none;}
.footinline, .footinline2{display: inline;list-style:none;}
.showfooter{width:100%;padding:0;height:275px;}
}
@media screen and (min-width: 1040px){
.footinline, .footinline1{display: inline;list-style:none;}
.footinline2{display:none;}
}
@media screen and (min-width: 1040px) and (max-width: 1259px) {
.slideroverlay3{display:block;position:relative;top:-8em;left:18%;width:82%;background-color:transparent;color:white;z-index:600;}
h1.slideroverlay{font-size:2.8em;}
}
@media screen and (min-width: 1351px) {
.phonehours1 {margin-top: 12px;}
}
/* Handle index page displays and animated items */
@media screen and (min-width: 1009px) and (max-width: 1259px) {
.keyitemcarrier{height:14em;}
p.keyitem {font-size:1.35em;}
.keyitemcarrier{margin-top: -3em;}
h1.slideroverlay{font-size:2em;}
}
@media screen and (min-width: 1260px) and (max-width: 1350px) {
.slideroverlay3{display:block;position:relative;top:-6em;left:22%;width:85%;background-color:transparent;color:white;z-index:600;}
h1.slideroverlay{font-size:2.6em;}
.keyitemcarrier{margin-top: -4em;height:16em;}
}
@media screen and (min-width: 1351px) and (max-width: 1425px) {
.slideroverlay3{display:block;position:relative;top:-8em;left:22%;width:78%;background-color:transparent;color:white;z-index:600;}
h1.slideroverlay{font-size:2.8em;}
.keyitemcarrier{margin-top: -3em;height:17em;}
}
@media screen and (min-width: 1426px) and (max-width: 1459px) {
.slideroverlay3{display:block;position:relative;top:-8em;left:22%;width:78%;background-color:transparent;color:white;z-index:600;}
h1.slideroverlay{font-size:3em;}
.keyitemcarrier{margin-top:-3.5em;height:20em;}
}
@media screen and (min-width: 1459px) and (max-width: 1665px) {
.slideroverlay3{display:block;position:relative;top:-8em;left:22%;width:78%;background-color:transparent;color:white;z-index:600;}
h1.slideroverlay{font-size:3em;}
.keyitemcarrier{margin-top:-3em;height:20em;}
}
@media screen and (min-width: 1666px) {
.slideroverlay3{display:block;position:relative;top:-10em;left:30%;width:70%;background-color:transparent;color:white;z-index:600;}
h1.slideroverlay{font-size:3em;}
.keyitemcarrier{margin-top:-3em;height:22em;}
}
/*  Media Queries End ------------------------------------------------------------------------------------------------------------------------------------  */
/* Code ends  */