/* START of Image slider */
/*
https://www.quora.com/What-is-the-explanation-for-this-CSS-code
http://thenewcode.com/627/Make-A-Responsive-CSS3-Image-Slider
*/
@keyframes slidy {
0% { left: 0%; }/*these values are the timing of each slide as a percentage of the total*/
20% { left: 0%; }/*the left percentage refers to the total size of the slides - example had four slides and was 400% - 500% seems tp work with six - expand if more than this*/
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }/*see SH Notaries for an improved version with a 99.99% addition for the last frame*/ 
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }}
div#slider { overflow: hidden; }
div#slider figure img { width: 20%;/*100 divided by the number of slides*/ float: left; }
div#slider figure { position: relative;width: 500%;/*100 multiplied by the number of slides*/margin: 0;left: 0;text-align: left;font-size: 0;animation: 40s slidy infinite;/*total animation time*/  }
/* END of Image slider */
body, nav, ul, li, a  {margin: 0; padding: 0;}
body {font-family: 'Open Sans', sans-serif;}
a[href^=tel] {color:inherit;text-decoration:none;}
a {text-decoration: none;}
.container {font-family: 'Open Sans', sans-serif;width: 100%;max-width: 1920px;margin: 0px auto;}
a img {border:none;}
img, object, embed, video {max-width: 100%;}
.google-maps {position: relative;padding-bottom: 75%; // This is the aspect ratioheight: 0;overflow: hidden;}
.google-maps iframe {position: absolute;top: 0;left: 0;width: 96% !important;height: 100% !important;}
.wrap {margin:0 auto;width:80%;max-width:1500px;}
#header, #footer {width:100%;float:left;}
#header {height:130px;background:linear-gradient(to right, rgb(0,157,220), rgb(0,55,128));}
#phone {width:33%;float:left;color:white;font-weight:300;font-size:2em;text-align:center;padding-top:25px;}
#firmname {font-family: 'Cinzel', serif;font-size:3em;line-height:1.0em;color:white;width:34%;text-align:center;float:left;padding-top:15px;}
#email {width:32%;float:right;color:white;font-weight:300;font-size:1.7em;text-align:center;padding-top:40px;padding-right:1%;}
#email a{color:white;text-decoration: none;}
#reorderphone {display:none;}
#logos {width:100%;text-align: center;border-top:1px solid grey;height:120px;margin-top:200px;}
#footer {min-height:180px;background:linear-gradient(to right, rgb(0,157,220), rgb(0,55,128));color:white;border-bottom:2px solid white;}
#addressftr {float:left;text-align:left;font-size:1.1em;color:white;width:46%;font-weight:300;padding-left:1.666%;padding-top:20px;}
#SRA {width:30%;margin-left:2%;float:left;padding-top:10px;}
#subfooter {height:auto;background:linear-gradient(to right, rgb(0,157,220), rgb(0,55,128));color:white;text-align: center;font-size:1.1em;font-weight:300;padding:0% 5% 2% 3%;}
#subfooter a {text-decoration:none;color:white;}
#subfooter a:hover {text-decoration:underline;}
.stripewrap {margin:0 auto;width:66%;max-width:1200px;}
#break {width:100%;height:1px;clear:both;}
#indexintro {margin: 0px auto;color:black;text-align:center;width:74%;font-size:1.3em;line-height:1.8em;padding-top:20px;font-weight:300;}
#indexintro h2 {font-size:2em;color:black;font-weight:300;text-align:center;margin: 0 0 0 0;padding:0 0 0 0;}
#indexcontainer {width:100%;height:220px;background-color:#EFEFEF;}
#indeximage {height:200px;padding-top:30px;padding-left:20px;float:left;width:25%;}
#indexdescriptionbox {padding-top:30px;padding-right:10px;padding-left:30px;float:left;font-weight:300;width:65%;}
#indexdescriptionbox h6 {font-size:1.8em;color:black;margin:0 0 0 0;padding:0 0 0 0;font-weight:300;}
#indexdescriptiontext {font-size:1.3em;color:black;width:auto;padding-top:5px;line-height:1.4em;}
#button {width:130px;height:25px;background:linear-gradient(to right, #B17F00, #DCC700);;color:white;padding:10px 10px 5px 10px;float:left;margin-top:20px;text-align:center;font-size:1.1em;}
#button a{text-decoration:none;color:white;}
#WHindexcontainer {width:100%;height:200px;background-color:white;}
#WHindeximage {height:200px;padding-top:25px;padding-left:10px;padding-right:20px;float:right;width:30%;}
#WHindexdescriptionbox {padding-top:25px;padding-left:20px;padding-right:10px;float:left;font-weight:300;width:60%;}
#WHindexdescriptionbox h6 {font-size:1.8em;color:black;margin:0 0 0 0;padding:0 0 0 0;font-weight:300;}
#WHindexdescriptiontext {font-size:1.3em;color:black;width:auto;padding-top:5px;line-height:1.4em;}
#WHbutton {width:130px;height:25px;background:linear-gradient(to right, rgb(0,157,220), rgb(0,55,128));color:white;padding:10px 10px 5px 10px;float:left;margin-top:20px;text-align:center;font-size:1.1em;}
#WHbutton a{text-decoration:none;color:white;}
#contactbox {width:90%;height:auto;font-weight:300;font-size:1.2em;padding: 10px 20px 10px 20px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;margin:30px 0px 30px 0px;}
#contactbox h2 {font-size:1.4em;padding: 0 0 0 0;margin: 0px 0px 0px 0px;color:rgb(0,157,220);text-align:left;font-weight:300;}
#testimonialsbox {width:90%;height:auto;font-weight:300;font-size:1.2em;padding: 10px 20px 10px 20px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;background:linear-gradient(to right, rgb(0,157,220), rgb(0,55,128));color:white;margin:30px 0px 30px 0px;}
#knockoutboxyellow {width:90%;height:auto;font-weight:300;font-size:1.1em;padding: 10px 20px 10px 20px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;background:linear-gradient(to right, #B17F00, #DCC700);color:white;margin:30px 0px 30px 0px;}
#knockoutboxblue {width:90%;height:auto;font-weight:300;font-size:1.1em;padding: 10px 20px 10px 20px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;background:linear-gradient(to right, rgb(0,157,220), rgb(0,55,128));color:white;margin:30px 0px 30px 0px;}
#profilebox {width:90%;min-height:500px;height:auto;font-weight:300;font-size:1.2em;padding: 10px 20px 10px 20px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;margin:30px 0px 30px 0px;}
#profilebox h2 {font-size:1.4em;padding: 0 0 0 0;margin: 0px 0px 0px 0px;color:rgb(0,157,220);text-align:left;font-weight:300;}
#maincontent {width:100%;min-height:500px;background:white;color:black;font-size:1.2em;line-height:1.9em;padding-top:20px;font-weight:300;}
#maincontent ul {padding:0px 0px 0px 10%;list-style-type:square;}
#maincontent a {text-decoration:none;color:rgb(0,157,220);}
#maincontent a:hover {text-decoration:underline;}
h1 {font-size:1.8em;padding: 0 0 0 0;margin: 0px 0px 0px 0px;color:rgb(0,157,220);text-align:left;font-weight:300;}
h2,h3,h4,h5 {font-size:1.6em;padding: 0 0 0 0;margin: 0px 0px 0px 0px;color:rgb(0,157,220);text-align:left;font-weight:300;}

/* START of NAV styling */
.toggleMenu {display:  none;background: #ffffff;/* menu button mobile version background colour */padding: 10px 15px;color: #000000;}
.nav {list-style: none;*zoom: 1;background:#ffffff;/* menu bar background colour */font-size:1.1em;}
.nav:before,
.nav:after {content: " "; display: table; }
.nav:after {clear: both;}
.nav ul {list-style: none;width: 15em;color: #000000;/* affects width of pop out nav */}
.nav a {padding: 10px 30px;/* affects width nav elements and sub elements */color:#000000;*zoom: 1;}
.nav li {position: relative;}
.nav > li {float: left;border-top: 1px solid #FFFFFF;/* menu button mobile version sub level top border colour (and main nav bar top colour) and single pixel line on top of desktop nav */}
.nav > li > .parent {background-image: url("images/downArrow.png");background-repeat: no-repeat;background-position: right;}
.nav > li > a {display: block;font-weight:300;}
.nav li  ul {position: absolute;left: -9999px;}
.nav > li.hover > ul {left: 0;}
.nav li li.hover ul {left: 100%;top: 0;}
.nav li li a {display: block;background:linear-gradient(to right, rgb(0,157,220), rgb(0,55,128));zoom:1;color:white;/* menu bar 1st sub level background colour */position: relative;z-index:100;border-top: 1px solid white;/* menu bar 1st sub level top border colour */font-weight:300;}
.nav li li li a {background:linear-gradient(to right, #B17F00, #DCC700);color:white;/* menu bar 2nd sub level background colour */z-index:200;border-top: 1px solid white;/* menu bar 1st sub level top border colour */font-weight:300;}
/* END of NAV styling */

@media screen and (max-width: 1024px) {
/* iPad Pro and old monitor section */
#email {font-size:1.2em;}
.stripewrap {margin:0 auto;width:80%;max-width:1200px;}
#indexintro h2 {font-size:1.8em;}
#indexcontainer {width:100%;height:220px;background-color:#EFEFEF;}
#indeximage {height:200px;padding-top:25px;padding-left:10px;padding-right:20px;float:right;width:30%;}
#indexdescriptionbox {padding-top:25px;padding-left:20px;padding-right:10px;float:left;font-weight:300;width:60%;}
#indexdescriptionbox h6 {font-size:1.7em;color:black;margin:0 0 0 0;padding:0 0 0 0;font-weight:300;}
#indexdescriptiontext {font-size:1.2em;color:black;width:auto;padding-top:5px;line-height:1.4em;}
#button {width:130px;height:25px;background:linear-gradient(to right, #B17F00, #DCC700);;color:white;padding:10px 10px 5px 10px;float:left;margin-top:20px;text-align:center;font-size:1.1em;}
#button a{text-decoration:none;color:white;}
#phone {font-size:1.6em;}
#WHindexcontainer {width:100%;height:200px;background-color:white;}
#WHindeximage {height:200px;padding-top:25px;padding-left:10px;padding-right:20px;float:right;width:30%;}
#WHindexdescriptionbox {padding-top:25px;padding-left:20px;padding-right:10px;float:left;font-weight:300;width:60%;}
#WHindexdescriptionbox h6 {font-size:1.7em;color:black;margin:0 0 0 0;padding:0 0 0 0;font-weight:300;}
#WHindexdescriptiontext {font-size:1.2em;color:black;width:auto;padding-top:5px;line-height:1.4em;}
#WHbutton {width:130px;height:25px;background:linear-gradient(to right, rgb(0,157,220), rgb(0,55,128));color:white;padding:10px 10px 5px 10px;float:left;margin-top:20px;text-align:center;font-size:1.1em;}
#WHbutton a{text-decoration:none;color:white;}
    
h1 {font-size:1.6em;}
h2,h3,h4,h5 {font-size:1.5em;}

}

@media screen and (max-width: 768px) {
/* START of NAV styling */
.active {display: block;}
.nav > li {float: none;}
.nav > li > .parent {background-position: 95% 50%;}
.nav li li .parent {background-image: url("images/downArrow.png");background-repeat: no-repeat;background-position: 95% 50%;background:linear-gradient(to right, rgb(0,157,220), rgb(0,55,128));}
.nav ul {display: block; width: 100%;}
.nav > li.hover > ul , .nav li li.hover ul {position: static;}
/* END of NAV styling */
.wrap {margin:0 auto;width:90%;}
#phone {width:33%;float:left;color:white;font-weight:300;font-size:1.5em;text-align:center;padding-top:25px;}
#firmname {font-family: 'Cinzel', serif;font-size:2em;line-height:1.0em;color:white;width:34%;text-align:center;float:left;padding-top:20px;}
#email {width:32%;float:right;color:white;font-weight:300;font-size:1.0em;text-align:center;padding-top:45px;padding-right:1%;}
#reorderphone {display:none;}
#header {height:110px;}
#footer {min-height:500px;}
#addressftr {float:left;text-align:center;width:100%;padding-left:0%;padding-top:0px;}
#indexintro {margin: 0px auto;color:black;text-align:center;width:94%;font-size:1.2em;line-height:1.8em;padding-top:20px;font-weight:300;}
#indexintro h2 {font-size:1.5em;}
#indeximage {display:none;}
#indexdescriptionbox {padding-top:25px;padding-left:5%;padding-right:5%;float:left;font-weight:300;width:90%;}
#indexdescriptionbox h6 {font-size:1.4em;color:black;margin:0 0 0 0;padding:0 0 0 0;font-weight:300;text-align:center;}
#indexdescriptiontext {font-size:1.1em;color:black;width:auto;padding-top:5px;line-height:1.4em;text-align:center;margin-bottom:20px;}
#button {width:130px;height:25px;background:linear-gradient(to right, #B17F00, #DCC700);;color:white;padding:10px 10px 5px 10px;margin-top:20px;text-align:center;font-size:1.1em;float:none;margin:0 auto;}
#button a{text-decoration:none;color:white;}
#WHindeximage {display:none;}
#WHindexdescriptionbox {padding-top:25px;padding-left:5%;padding-right:5%;float:left;font-weight:300;width:90%;}
#WHindexdescriptionbox h6 {font-size:1.4em;color:black;margin:0 0 0 0;padding:0 0 0 0;font-weight:300;text-align:center;}
#WHindexdescriptiontext {font-size:1.1em;color:black;width:auto;padding-top:5px;line-height:1.4em;text-align:center;margin-bottom:20px;}
#WHbutton {width:130px;height:25px;background:linear-gradient(to right, rgb(0,157,220), rgb(0,55,128));color:white;padding:10px 10px 5px 10px;margin-top:20px;text-align:center;font-size:1.1em;float:none;margin:0 auto;}
#WHbutton a{text-decoration:none;color:white;}
h1 {font-size:1.5em;}
h2,h3,h4,h5 {font-size:1.4em;}
#contactbox h2 {font-size:1.3em;padding: 0 0 0 0;margin: 0px 0px 0px 0px;color:rgb(0,157,220);text-align:left;font-weight:300;}
#profilebox h2 {font-size:1.3em;padding: 0 0 0 0;margin: 0px 0px 0px 0px;color:rgb(0,157,220);text-align:left;font-weight:300;}

}

@media screen and (max-width: 480px) {
/* Phone section */
#header {height:150px;}
#phone {display:none;}
#firmname {font-family: 'Cinzel', serif;font-size:2em;line-height:1.0em;color:white;width:100%;text-align:center;float:left;padding-top:10px;text-allign:center;}
#email {width:100%;float:left;color:white;font-weight:300;font-size:1.2em;text-align:center;padding-top:2px;}
#reorderphone {width:100%;float:left;color:white;font-weight:300;font-size:1.3em;text-align:center;padding-top:0px;display:block;}
h1 {font-size:1.4em;}
h2,h3,h4,h5 {font-size:1.3em;}
#maincontent {font-size:1.1em;}
#contactbox {font-size:1.1em;}
#testimonialsbox {font-size:1.1em;}
#knockoutboxyellow {font-size:1.1em;}
#knockoutboxblue {font-size:1.1em;}
#profilebox {font-size:1.1em;}

}