@charset "utf-8";
/*Colours  |  Black #091627  |  Blue #2058a1  |  LtBlue #01cbff  |  Green #1e861b   */

@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap');

/* Sitewide Typography
----------------------------------------------- */
html { scroll-behavior: smooth; font-size:18px; }
body { margin:0; padding:0; background-color:#fff; font-family:'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif; font-weight:400; font-style:normal; color:#151e2c; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; letter-spacing:0; word-spacing:0; line-height:1.2em; }
img { display:inline-block; }
.mobile, .mobilesm, .L1navmobile, #nav { display:none; }

h1 { margin:0; padding:0 0 0.5em 0; font-size:4em;   line-height:1.2em; color:#2058a1; font-weight:400; font-family:'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif; }
h2 { margin:0; padding:0 0 0.5em 0; font-size:4em;   line-height:1.2em; color:#2058a1; font-weight:400; font-family:'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif; }
h3 { margin:0; padding:0 0 0.5em 0; font-size:1.3em; line-height:1.2em; color:#2058a1; font-weight:400; font-family:'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif; }
h4 { margin:0; padding:0 0 0.5em 0; font-size:1.4em; line-height:1.5em; color:#2058a1; font-weight:400; font-family:'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif; }

p, li, dt, dd { font-size:1rem; }

p  { margin:0; padding:0 0 1em 0; line-height:1.5em; }
td { margin:0; padding:0; }
ul { list-style:disc; margin-left: 1em; }
li { line-height:1.5em; }
sup {font-size:0.5em; vertical-align: baseline; position: relative; top: -0.4em; }
em     { font-style:italic; }
strong {  }

a         { color:#fff; text-decoration:none; }
a:visited { color:#fff; }
a:hover   { color:#fff; }
a:focus   { }
a:hover, a:active { outline: 0; }

.SiteWrapper { margin:0 auto; padding:0 50px; width:100%; max-width:1350px; height:100%; text-align:left; }
.TwoCol { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; }
.TwoCol div:first-child { width:65%; }
.TwoCol div:last-child  { width:30%; }

.LogoNav { width:100%; display:flex; padding:45px 0px; justify-content:space-between; align-items:center; height:60px; position:fixed; background:linear-gradient(180deg, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0) 100%); }
.LogoNav h1   { margin-left:50px; padding:0; text-indent:-9999px; background: url("i/BlueBox1.png") no-repeat; background-size:contain; }
.LogoNav h1 a { width:241px; height:58px; display:block; }
.LogoNav .L1nav { margin-right:50px; text-align:right; display:flex; list-style:none; }
.LogoNav .L1nav ul { margin:0; }
.LogoNav .L1nav a { color:#fff; font-size:1em; padding:0.55em 1.388em; }
.LogoNav .L1nav a.selected, .LogoNav .L1nav a:hover { color:#2058a1; background-color:#fff; }

#nav { display:flex; flex-direction: column; justify-content:center; align-items:center; background-color:#2058a1; height:100vh; }
#nav ul { list-style:none; }
#nav li, #nav a { color:#fff; text-align:center; }
#nav li { margin:0; padding:0 0 0.5em 0; font-size:1.6rem; line-height:1.2em; font-weight:300; font-family:'Merriweather', Arial, 'Helvetica Neue', Helvetica, sans-serif; }

.Hero { display:flex; align-items:center; height:90vh; background:url("i/hero.jpg") center center no-repeat; background-size:cover; }
.Hero .tagwrapper { margin:0 auto; padding:0 50px; display:flex; flex-direction:column; justify-content:center; align-items:center;  width:100%; height:100%; text-align:center; }
.Hero .tagline { width:100%; margin:auto; display:table-cell; vertical-align:middle; }
.Hero h1 { color:#fff; }
.Hero h2 { font-size:1.3em; color:#fff; }
.Hero .arrow { height:50px; }

.Intro { padding:100px 0; }
.Intro .image img { width:100%; height:325px; object-fit:cover; border-radius:10px; }
.Intro .text { display:flex; align-items:center; margin:auto 0; }
.Intro .text div { width:100%; }
.Intro h2 { text-transform:uppercase; font-size:1em; font-weight:900; color:#01cbff; }

.CTA { padding:70px 0; background:url("i/bgcta.jpg") center center no-repeat; background-size:cover; }
.CTA h2 { color:#fff; font-weight:900; font-size:2.6em; padding:0; }
.CTA h3 { color:#fff; }

.Services { padding:100px 0; background-color:#e0e7f2; }
.Services .gridwrapper { display:flex; flex-wrap: wrap; gap:20px; }
.Services .gridwrapper .flipbox { background-color:#fff; min-height:300px; width:23.8%; border-radius:10px; position:relative; cursor:help; top: 0; transition: top ease 0.5s; }
.Services .gridwrapper .flipbox:hover { top: -10px; }
.Services .gridwrapper .flipbox.blank { background-color:transparent; }
.Services .gridwrapper .flipbox .default, .Services .gridwrapper .flipbox .detail { position:absolute; width:100%; height:100%; border-radius:10px; }
.Services .gridwrapper .flipbox .default { color:#2058a1; font-size:1.3em; font-weight:900; line-height:1.3em; }
.Services .gridwrapper .flipbox .default img { margin-top:35px; }
.Services .gridwrapper .flipbox .detail  { display:none; background-color:#01cbff; color:#2058a1; text-align:left; }
.Services .gridwrapper .flipbox .detail p  { text-align:center; font-weight:900; margin-top:35px; line-height:1.2em; }
.Services .gridwrapper .flipbox .detail ul { padding:0 20px; }
.Services .gridwrapper .flipbox .detail li { font-size:0.9em; line-height:1.2em; }
.Services .gridwrapper .flipbox:hover .default { display:none; }
.Services .gridwrapper .flipbox:hover .detail  { display:block; }

.About { padding:100px 0; color:#fff; background: #2058A1; background: linear-gradient(325deg, rgba(32, 88, 161, 1) 0%, rgba(2, 135, 253, 1) 45%, rgba(8, 126, 236, 1) 55%, rgba(32, 88, 161, 1) 100%); }
.About h2 { font-size:2.6em; color:#fff; font-weight:900; text-align:center; }
.About h3 { font-size:1em; color:#01cbff; font-weight:900; text-transform:uppercase; }
.About img { width:100%; max-width:962px; height:auto; }

.Contact { padding:100px 0; color:#fff; background:url("i/bgcontact.jpg") no-repeat; background-size:cover; }
.Contact h2 { font-size:2.6em; color:#fff; font-weight:900; text-align:center; }
.Contact table { float:right; }
.Contact table td { padding:0 20px 20px 0; vertical-align:middle; }
input, textarea, button { display:block; width:100%; max-width:400px; padding:20px; margin:0 0 10px 0; font-size:1em; font-family:inherit; border:none; text-align:left; }
button { background-color:#01cbff; } 

.Footer { padding:100px 0 10px 0; }
.Footer .footernav { margin:auto; padding:30px 0; display:flex; justify-content:center; gap:50px; list-style:none; }
.Footer .footernav a { color:#2058a1; }

@media only screen and (max-width:1400px) {
    .SiteWrapper { padding:0; max-width:92%; }
    .Services .gridwrapper .flipbox { width:32%; }
    .Services .gridwrapper .flipbox.blank { display:none; }
}
@media only screen and (max-width:1100px) {
    .Services .gridwrapper .flipbox { width:31%; }
}

@media only screen and (max-width:820px) {
    .LogoNav { width:auto; }
    .Services .gridwrapper .flipbox { width:48%; }
}

@media only screen and (max-width:675px) {
    .desktop, .LogoNav .Logo { display:none !important; }
    .mobile { display:block; }
    h1, h2 { font-size:3em; }
    .LogoNav { width:95%; padding:20px 0; justify-content: flex-end; background:none; }
    .LogoNav h1   { margin-left:20px; }
    .L1nav { display:none !important; }
    .L1navmobile { display:block; padding:0; margin-right:20px; }
    .Hero .tagwrapper { padding:0 20px; }
    .Hero .mobile { width:100%; max-width:250px; height:auto; margin:0 auto 50px auto; }
    .Intro { padding:50px 0; }
    .TwoCol div { width:100%; height:auto; }
    .Intro .image { padding-bottom:20px; }
    .Services .mobile { text-align: left; }
    .Services .mobile p { text-transform:uppercase; font-size:1em; font-weight:900; color:#01cbff; padding:0; }
    .Services .mobile ul { margin-bottom:1em; }
    .vendorlogos  { display:none; }
    .vendorlogosm { display:block; }
    .Contact table { float:none; margin:auto; }
}
@media only screen and (max-width:420px) {
    .LogoNav { width:75%; }
}