body, nav, ul, li, a  {margin: 0; padding: 0;}
body {font-family: 'Open Sans', sans-serif;}
a[href^=tel] {color:inherit;text-decoration:none;}
.hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(images/banner-homepage.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    filter: brightness(100%);
}
.hero-content {
    position: relative; 
    font-family: 'Open Sans', serif;
    color: white;
    text-align: center;
    margin: 0.625rem;
    border: 3px solid white;
    padding:0px 10px 20px 10px;
    background:#002D4D;
}
.hero-title {
    font-size: 7.5rem;
    font-weight: 500;
    margin-bottom: 0;
text-shadow: 0px 0px 4px #000000;
}
.hero-subtitle {
    font-size: 2rem;
    font-weight: 400;
    margin-top: 0rem;
    text-align:center;
    text-shadow: 0px 0px 4px #000000;
}

a {text-decoration: none;}
a img {border:none;}
img, object, embed, video {max-width: 100%;}
.container {width: 100%;max-width: 1920px;margin: 0px auto;}
.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:85%;max-width:1500px;}
#footer {width:100%;float:left;}
#footer {height:auto;background:#15283B;}
#footer a {text-decoration:none;color:white;}
#footer a:hover {text-decoration:underline;}
#footercolumn {float:left;width:31%;margin-right:2%;color:white;font-size:1.1em;text-align:left;font-weight:300;}
#social {text-align:center;width:100%;height:90px;margin-top:20px;}
#break {width:100%;height:1px;clear:both;}

#maincontent {min-height:500px;background:white;color:black;font-size:1.2em;line-height:1.9em;font-weight:300;}
h1 {font-size:2.0em;padding: 10px 0 0 0;margin: 0px 0px 0px 0px;color:#15283B;text-align:left;font-weight:400;}
h2,h3,h4,h5 {font-size:1.8em;padding: 0 0 0 0;margin: 0px 0px 0px 0px;color:#15283B;text-align:left;font-weight:400;}
#maincontentbluedeepbutton {width:200px;height:80px;background:#15283B;color:white;padding:10px 10px 5px 10px;margin:60px 10px 10px 0px;text-align:center;font-size:1.2em;font-weight:500;}
#maincontentbluedeepbutton a{text-decoration:none;color:white;}

#maincontentblueregularbutton {width:200px;height:50px;background:#15283B;color:white;padding:16px 10px 5px 10px;margin:60px 10px 10px 0px;text-align:center;font-size:1.2em;font-weight:500;}
#maincontentblueregularbutton a{text-decoration:none;color:white;}

#indexcontainer {width:100%;height:500px;background-color:white;}
#indeximage {padding-top:50px;padding-left:10px;padding-right:20px;float:right;width:40%;}
#indexdescriptionbox {padding-top:25px;padding-left:20px;padding-right:10px;float:left;width:50%;}
#indexdescriptionbox h6 {font-size:1.7em;color:#15283B;margin:0 0 0 0;padding:0 0 0 0;font-weight:400;}
#indexdescriptiontext {font-size:1.1em;color:black;width:auto;padding-top:5px;line-height:1.4em;font-weight:300;}
#button {width:200px;height:40px;background:#15283B;color:white;padding:20px 10px 5px 10px;margin:60px 10px 10px 0px;text-align:center;font-size:1.3em;font-weight:500;}
#button a{text-decoration:none;color:white;}
#deepbutton {width:200px;height:60px;background:#15283B;color:white;padding:20px 10px 5px 10px;margin:60px 10px 10px 0px;text-align:center;font-size:1.3em;font-weight:500;}
#deepbutton a{text-decoration:none;color:white;}

.stripewrap {margin:0 auto;width:83%;max-width:1600px;}

#bluecontainer {width:100%;height:500px;background-color:#15283B;}
#blueimage {padding-top:50px;padding-left:10px;padding-right:20px;float:right;width:40%;}
#bluedescriptionbox {padding-top:25px;padding-left:20px;padding-right:10px;float:left;width:50%;}
#bluedescriptionbox h6 {font-size:1.7em;color:white;margin:0 0 0 0;padding:0 0 0 0;font-weight:400;}
#bluedescriptiontext {font-size:1.1em;color:white;width:auto;padding-top:5px;line-height:1.4em;font-weight:300;}
#bluebutton {width:200px;height:40px;background:#15283B;color:white;padding:20px 10px 5px 10px;margin:60px 10px 10px 0px;text-align:center;font-size:1.3em;font-weight:500;border:2px solid white;}
#bluebutton a{text-decoration:none;color:white;}

#profilebox {width:90%;min-height:500px;height:auto;font-weight:300;font-size:1.0em;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:#15283B;text-align:left;font-weight:400;}

#contactpagebox {width:88%;height:auto;font-weight:300;font-size:1.0em;padding: 10px 20px 10px 20px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;margin:30px 0px 30px 0px;}
#contactpagebox a {text-decoration:none;color:#15283B;font-weight:400;}
#contactpagebox a:hover {text-decoration:underline;}

#vacancybox {width:25%;height:450px;float:left;padding: 10px 20px 10px 20px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;margin:30px 20px 30px 20px;}
#vacancybox h2 {font-size:1.3em;padding: 0 0 0 0;margin: 0px 0px 0px 0px;color:#15283B;text-align:left;font-weight:400;}
#vacancybutton {width:90%;height:33px;background:#15283B;color:white;padding:2px 10px 5px 10px;margin:10px 5px 10px 5px;text-align:center;font-size:1.0em;font-weight:400;}
#vacancybutton a{text-decoration:none;color:white;}
#widevacancybox {width:90%;height:auto;float:left;padding: 10px 20px 10px 20px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;margin:30px 20px 30px 20px;}
#widevacancyboxdescription {width:90%;float:left;padding: 0px 10px 10px 0px;}
#widevacancyboxdescription ul {padding:0px 0px 0px 30px;}

/* https://www.w3schools.com/howto/howto_js_navbar_sticky.asp */
#navbar {
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}


/* START of NAV styling */
.toggleMenu {display:  none;background: #ffffff;/* menu button mobile version background colour */padding: 10px 15px;color: #000000;font-size:1.1em;font-weight:400;}
.nav {list-style: none;*zoom: 1;background:#ffffff;font-size:1.1em;font-weight:400;/* menu bar background colour */}
.nav:before,
.nav:after {content: " "; display: table; }
.nav:after {clear: both;}
.nav ul {list-style: none;width: 14em;color: #000000;/* affects width of pop out nav */}
.nav a {padding: 10px 25px;/* 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;}
.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: #ffffff;/* menu bar 1st sub level background colour */position: relative;z-index:100;border-top: 1px solid #ffffff;/* menu bar 1st sub level top border colour */}
.nav li li li a {background:#249578;zoom:1;/* menu bar 2nd sub level background colour */z-index:200;border-top: 1px solid #1d7a62;/* menu bar 1st sub level top border colour */}
/* END of NAV styling */

@media screen and (max-width: 1024px) {
/* iPad Pro and old monitor section */
#vacancybox {width:38%;height:500px;float:left;padding: 10px 20px 10px 20px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;margin:30px 20px 30px 20px;}

}

@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%;}
.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%;}
.hero-title {
    font-size: 4.5rem;
    font-weight: 500;
    margin-bottom: 0;
text-shadow: 0px 0px 4px #000000;
}
.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    margin-top: 0rem;
    text-align:center;
    text-shadow: 0px 0px 4px #000000;
}
#vacancybox {width:35%;height:600px;float:left;padding: 10px 20px 10px 20px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;margin:30px 20px 30px 20px;}
#footercolumn {float:left;width:100%;margin-right:0%;color:white;font-size:1.1em;text-align:center;font-weight:300;}

}

@media screen and (max-width: 480px) {
/* Phone section */
.hero-content {
    position: relative; 
    font-family: 'Open Sans', serif;
    color: white;
    text-align: center;
    margin: 0.625rem;
    border: 2px solid white;
    padding:0px 5px 10px 5px;
}
.hero-title {
    font-size: 3.5rem;
    font-weight: 500;
    margin-bottom: 0;
text-shadow: 0px 0px 4px #000000;
}
.hero-subtitle {
    font-size: 1rem;
    font-weight: 400;
    margin-top: 0rem;
    text-align:center;
    text-shadow: 0px 0px 4px #000000;
}
#profilebox h2 {font-size:1.3em;padding: 0 0 0 0;margin: 0px 0px 0px 0px;color:#15283B;text-align:left;font-weight:400;}
#vacancybox h2 {font-size:1.3em;padding: 0 0 0 0;margin: 0px 0px 0px 0px;color:#15283B;text-align:left;font-weight:400;}
#profilebox {font-size:0.9em;}

h1 {font-size:1.5em;}
h2,h3,h4,h5 {font-size:1.3em;}
#indexcontainer {width:100%;height:auto;background-color:white;}
#indeximage {padding-top:50px;padding-left:3%px;padding-right:3%;float:right;width:94%;}
#indexdescriptionbox {padding-top:25px;padding-left:3%px;padding-right:3%;float:left;width:94%;}
#indexdescriptionbox h6 {font-size:1.4em;color:#15283B;margin:0 0 0 0;padding:0 0 0 0;font-weight:400;}
#indexdescriptiontext {font-size:1.1em;color:black;width:auto;padding-top:5px;line-height:1.4em;font-weight:300;}
#button {width:200px;height:40px;background:#15283B;color:white;padding:20px 10px 5px 10px;margin:60px 10px 10px 0px;text-align:center;font-size:1.3em;font-weight:500;}
#button a{text-decoration:none;color:white;}
#deepbutton {width:200px;height:60px;background:#15283B;color:white;padding:20px 10px 5px 10px;margin:60px 10px 10px 0px;text-align:center;font-size:1.3em;font-weight:500;}
#deepbutton a{text-decoration:none;color:white;}

#bluecontainer {width:100%;height:700px;background-color:#15283B;}
#blueimage {padding-top:50px;padding-left:3%px;padding-right:3%;float:right;width:94%;}
#bluedescriptionbox {padding-top:25px;padding-left:3%px;padding-right:3%;float:left;width:94%;}
#bluedescriptionbox h6 {font-size:1.4em;color:white;margin:0 0 0 0;padding:0 0 0 0;font-weight:400;}
#bluedescriptiontext {font-size:1.1em;color:white;width:auto;padding-top:5px;line-height:1.4em;font-weight:300;}
#bluebutton {width:200px;height:40px;background:#15283B;color:white;padding:20px 10px 5px 10px;margin:60px 10px 10px 0px;text-align:center;font-size:1.3em;font-weight:500;border:2px solid white;}
#bluebutton a{text-decoration:none;color:white;}
#vacancybox {width:84%;height:auto;float:left;padding: 10px 20px 10px 20px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;margin:30px 5px 30px 5px;}
#widevacancybox {width:84%;height:auto;float:left;padding: 10px 20px 10px 20px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;margin:30px 5px 30px 5px;}
#widevacancyboxdescription {width:90%;float:left;padding: 0px 10px 10px 10px;}
#widevacancyboxdescription ul {padding:0px 0px 0px 30px;}

}