* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
    margin: 10px 0 0;
    background: #fff url("../images/bgg3.avif") no-repeat top center fixed;
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 12px;
}
img { border: 0; max-width: 100%; height: auto; }
a { color: #1f6db5; text-decoration: none; }
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
}
.skip-link:focus { left: 8px; background: #fff; padding: 6px; z-index: 5; }
.wrapper {
    box-sizing: border-box;
    width: 980px;
    max-width: 100%;
    margin: 10px auto 0;
    background: #fff;
    border: 10px solid #fff;
}
#header { background: #fff; min-height: 123px; }
.logo { display: inline-block; }
.logo img { width: 198px; height: auto; display: block; }
.menu {
    background: #1f6db5 url("../images/nav.gif") repeat-x center;
    border-radius: 5px;
    margin: 0 0 5px;
    min-height: 40px;
}
.menu ul { display: flex; list-style: none; margin: 0; padding: 0; }
.menu li {
    flex: 1 1 0;
    height: 40px;
    background: url("../images/menu_spacer.png") top right no-repeat;
}
.menu a {
    display: block;
    color: #eee;
    font-size: 16px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
}
.slider {
    position: relative;
    border: 3px solid #c1c1c1;
    overflow: hidden;
    background: #111;
}
.slider .viewport { position: relative; padding-top: 25%; }
.slider .track {
    position: absolute;
    inset: 0;
    display: flex;
    transition: transform 500ms ease;
}
.slider .slide { min-width: 100%; height: 100%; }
.slider .slide img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.slider button.prev,
.slider button.next {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border: 0;
    padding: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    z-index: 2;
}
.slider button.prev { left: 8px; background-image: url("../images/slideshow_arrow_prev.png"); }
.slider button.next { right: 8px; background-image: url("../images/slideshow_arrow_next.png"); }
.dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}
.dots button {
    width: 14px;
    height: 14px;
    border: 0;
    padding: 0;
    background: url("../images/slideshow_icon_inactive.png") center no-repeat;
    cursor: pointer;
}
.dots button.active { background-image: url("../images/slideshow_icon_active.png"); }
.slider-shadow { margin: 0 0 0 3px; }
.slider-shadow img { display: block; width: 100%; height: auto; }
#content { padding-top: 10px; }
.itembox {
    border: 1px solid #e2e2e2;
    clear: both;
    margin: 0 0 15px;
}
.itembox h1.title {
    margin: 0;
    min-height: 40px;
    padding: 12px 20px 0;
    border-bottom: 1px solid #e8e8e8;
    background: #efeeee url("../images/itemboxh2.gif") top left repeat-x;
    color: #444;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -1px;
    text-transform: uppercase;
}
.itemboxinner { padding: 10px; }
.entry { color: #000; font-size: 12px; line-height: 19px; }
.hcon {
    clear: both;
    box-sizing: border-box;
    width: 918px;
    max-width: 100%;
    margin: 0 0 10px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 0 14px #d1d1d1;
    color: #000;
    font-family: Calibri, Candara, Arial, sans-serif;
    font-size: 16px;
    text-align: justify;
}
.hcon:hover { box-shadow: 0 0 14px #707070; }
.hcon p { margin: 0 0 10px; font-size: 16px; line-height: 24px; }
.hcon h3, .hcon h4, .projectspage h1, .projectspage h2 {
    color: #1f6db5;
    font-weight: 400;
}
.hcon h3 { margin: 5px 0; font-size: 20px; }
.hcon h4 { margin: 8px 0; font-size: 16px; }
.entry ul { list-style: disc; margin: 0 0 10px 22px; padding: 0; }
.entry li { margin: 0 0 2px; }
.entry ul.b { list-style: square; list-style-image: url("../images/bullet1.jpg"); }
#tit {
    display: inline;
    background: #e6e6e6;
    color: #ff0000;
    border-radius: 8px;
    padding: 0 133px 0 63px;
    font-family: Calibri, Candara, Arial, sans-serif;
    font-size: 25px;
    line-height: 1.2;
    white-space: nowrap;
}
.lead { font-size: 17px; }
.center { text-align: center; }
.under { text-decoration: underline; }
.brand { color: #ff0000; font-size: 20px; }
.alignleft { float: left; margin: 0 15px 10px 0; }
.alignright { float: right; margin: 0 0 10px 15px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.himg { display: flow-root; }
.himg img {
    float: left;
    border: 3px solid #fff;
    border-radius: 4px;
    box-shadow: 0 0 7px #000;
    margin: 0 6px 8px 0;
    height: auto;
}
.dealer-photo {
    border: 3px solid #fff;
    border-radius: 30px;
    box-shadow: 0 0 8px #000;
}
.component { display: flow-root; margin-bottom: 8px; }
.clear { clear: both; }
.battery-label {
    display: inline-block;
    margin-left: 53px;
    padding: 6px;
    background: #ccc;
    border-radius: 5px;
    font-weight: 700;
}
.note { text-align: center; }
.note span { color: #ff0000; }
.projectspage h1 { margin: 0 0 8px; font-size: 24px; text-align: left; }
.projectspage h2 { margin: 0; padding-top: 15px; text-align: center; font-size: 22px; }
.projectspage img { width: 100%; height: auto; margin: 20px auto; }
.form-heading { margin: 0 0 33px 166px !important; }
.enquiry table { border-collapse: collapse; width: 100%; max-width: 640px; }
.enquiry td { vertical-align: baseline; padding: 4px 8px 4px 0; }
.enquiry p { margin: 0 0 4px; }
.enquiry input[type="text"],
.enquiry input[type="email"],
.enquiry textarea,
.enquiry select {
    max-width: 100%;
    padding: 2px 4px;
    border: 1px solid #bbb;
    font: 13px Arial, sans-serif;
    background: #fff;
}
.enquiry input[type="text"],
.enquiry input[type="email"] { width: 295px; }
.enquiry textarea { width: 250px; height: 91px; }
.enquiry select { min-width: 196px; }
.submit-row { text-align: left; }
.enquiry button {
    margin-left: 182px;
    padding: 5px;
    background: #fff;
    font: 13px Arial, sans-serif;
    cursor: pointer;
}
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.form-note { margin: 0 0 10px; font-weight: 700; }
.form-note.ok { color: #0a7a20; }
.form-note.error, .field-error { color: #c00; display: block; }
#footer {
    background: #efefef;
    color: #1f6db5;
    min-height: 50px;
    overflow: hidden;
}
#copyright p {
    margin: 0 0 10px;
    padding-left: 15px;
    color: #1f6db5;
    font-weight: 700;
}
.credit { float: right; margin: 0; }
.credit a {
    position: relative;
    top: -30px;
    right: 20px;
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
}
@media (max-width: 800px) {
    body { margin-top: 0; background-attachment: scroll; }
    .wrapper { border-width: 6px; }
    .menu a { font-size: 14px; padding: 0 4px; }
    .hcon, .hcon p { text-align: left; }
    #tit { padding: 2px 12px; font-size: 20px; white-space: normal; }
    .form-heading { margin-left: 0 !important; }
    .battery-label { margin-left: 0; }
}
@media (max-width: 520px) {
    .menu ul { flex-wrap: wrap; }
    .menu li { flex: 1 1 50%; }
    .alignleft, .alignright, .himg img { float: none; display: block; margin: 8px auto; }
    .enquiry table, .enquiry tbody, .enquiry tr, .enquiry td { display: block; width: 100%; }
    .enquiry input[type="text"],
    .enquiry input[type="email"],
    .enquiry textarea,
    .enquiry select { width: 100%; }
    .credit { float: none; text-align: right; }
    .credit a { position: static; top: auto; right: auto; }
    #footer { padding-bottom: 8px; }
}