@charset "UTF-8";
/* Web Solutions 4.0 Compatible */

body.slideNav {overflow: hidden;}

/* HEADINGS ------------------------------ */
h1 {font-size:1.5em;}
h2, .content * h1{font-size:1.45em}
h3, .content * h2{font-size:1.3em}
h4, th{font-size:1.2em}
h5 {font-size:1.1em}
h6 {font-size:1.0em}
.intro {font-size: 1.25em;}
body>*>.wrap, body>footer>.fatFooter, #alertApp>*, .home .wrap {padding-left: 5vw; padding-right: 5vw;}

/* HEADER ------------------------------ */
body>header{position: relative; background:#fff}
body>header:before{content: "";opacity: 0; z-index: 3;background-color: #000;display: block;position: fixed;left:100vw;top:0;width:100vw;height:100vh;transition:left 0ms ease 200ms, opacity 200ms ease}
        body.slideNav>header:before{left:0;opacity: .5;transition:left 0ms ease 0ms, opacity 200ms ease}
#navContainer{position: fixed;left: 100%;top:0;bottom:0;width: 75%;max-height: 100vh;background-color:#333;z-index:3;-webkit-transition: left 200ms ease;transition: left 200ms ease;overflow:auto;-webkit-overflow-scrolling: touch;}
        body.slideNav #navContainer{left: 25%;}
#navContainer nav{display: inline}
#navContainer ul{display: block;float: left;width: 100%;margin: 0;padding-left: 0}
#navContainer li {display:block;float: left;width: 100%; position: relative; border-top: 1px solid rgba(255,255,255,0.125)}
#navContainer li li {border: 0}
#navContainer a, #navContainer .menu{color:#ccc;line-height:1.6em;padding:.469rem 1rem;display:block;float: left;width: 100%}
/* for when search is visible 
#navContainer .menu {
        border-bottom: 1px solid rgba(255,255,255,0.125);
    margin-bottom: .875em;
}*/
#navContainer a:hover,#navContainer .menu:hover,
#navContainer li.on a{background-color:#103E62;color: #fff}
#navContainer li.open{background-color: #000}
#navContainer li>span{display: block; position: absolute;right: 0;top: 0;width:2.75em;height: 2.75em;}
#navContainer li>span:before{content: ""; display: block; width: 50%; height: 0.0625rem; background-color: #999; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); transform-origin: center center;}
#navContainer li>span:after{content: ""; display: block; width: 50%; height: 0.0625rem; background-color: #999; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: center center;}
#navContainer li.open > span:before {transform: translate(-50%, -50%)rotate(0deg);}
#navContainer li > span::before { -webkit-transition: -webkit-transform .2s ease; transition: -webkit-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease;}
#navContainer ul ul {font-size: .8em;display: none}
#navContainer ul ul a {padding-left: 2rem}
#navContainer ul ul li.on a {background-color: #0072CE;}
#navContainer #ancillary {clear:both;display: block;}
#navContainer #ancillary .search {clear:both; display: block; overflow: auto; padding:1rem; border-top: 1px solid rgba(255,255,255,0.125)}
#navContainer #ancillary .search input {float: left;}
#navContainer #ancillary .search input[type="text"] {width: calc(100% - 5rem)}
#navContainer #ancillary .search input[type="submit"] {width: 5rem;}
/* mobilenav */
#mobilenav{background-color: #103E62;border-bottom:1px solid rgb(57, 97, 123);float: left;width: 100%;text-align: center; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center;}
#mobilenav a, #mobilenav span{color: #eee;line-height: 2.5em; -ms-flex-order: 0; -webkit-box-ordinal-group: 1; order: 0; -ms-flex: 1 1 auto; -webkit-box-flex: 1; flex: 1 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;}
#mobilenav *+*{border-left: 1px solid rgb(57, 97, 123);}
#mobilenav a:hover, #mobilenav span:hover{color: #fff;background-color:#0072CE}
/* hamburger */
.hamburger{height: 2em;width: 2em;display: block;position: fixed;right: 3px;top:3px;z-index:2;opacity: 0;background-color: #0072CE;padding: 3px 5px 5px 5px;}
.hamburger path {fill:#fff;font-size: 1.75em;}
.hamburger svg {pointer-events: none;}
.hamburger.on{opacity: .3}

#brand {
        display: block;
        padding: .75rem 1.5rem .25rem;
}

#mainnav .search input{
        display: inline-block;
        height: 3.25rem;

        box-shadow: none;
        font-size: .9375rem;
        color: #082841;
}
#mainnav .search input[type="text"]::placeholder {
        color: rgba(8, 43, 65, 0.5);
}
#mainnav .search input[type="text"] {
        width: calc(100% - 7.7rem);
        padding: 0 1.3125rem;
        float: left;
        margin-left: 1rem;
        border: 0;
        transition: all 0s;
        background-color: #fff;
}
#mainnav .search input[type="submit"] {
        width: 3.875rem;
        background-color: #0072CE;
}
#mainnav .search-icon {
        position: relative;
        display: inline-block;
        height: 3.25rem;
}
#mainnav .search-icon svg {
        height: 1rem;
        width: 1rem;
        position: absolute;
        fill: #fff;
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%);
        pointer-events: none;
        transition: all .2s;
}
#mainnav .search-icon input[type="submit"]:hover {background: #103E62;}
.ancillary-wrap form.search {margin-bottom: .5rem;}
#ancillary>p {display: none;}

/* MAIN ------------------------------ */
.sidenav-button {
        width: 100%;
}
.sidenav-button br {
        content: "";
        width: .25em;
}
.sidenav-buttons > a.sidenav-button:first-of-type:after, .sidenav-buttons > a.sidenav-button:nth-of-type(2):after  {margin-bottom: 0; margin-left: 0.4rem;}
a.sidenav-button {
        padding: 1em .25em 1em 1.25rem;
}
.sidenav-button:last-child {
        padding: 1.25em .25em 1.25em 1.25rem;
}
.sidenav-button:last-child img {
        margin: -.4em .6875em 0 0;
}
.twoCol, .threeCol, .resCol{
-webkit-column-rule:1px outset rgba(0,0,0,.15);
        column-rule:1px outset rgba(0,0,0,.15);
-webkit-columns: auto;
        columns: auto;
-webkit-column-width: 13em;
        column-width: 13em;}

.content ul li {padding-left: 1.5em;}
.content ul li:before, .rightAside ul li:before {left: .75em;}
#content {padding-bottom: 2rem;}
#content img {max-width: 100%;}
.photoright.usb-img  {
        float: none;
        width: 100%;
}
.formTable, .formTable table{width:100%;display: block}
.formTable tbody{display: block}
.formTable tr{display: block}
.formTable td{display: block;width:100%;padding: 0; height: auto;}
.formTable input[type="text"], .formTable input[type="password"], .formTable input[type="tel"], .formTable input[type="number"], .formTable input[type="email"], .formTable input[type="url"], .formTable textarea{margin-bottom:1em}
.formTable table td + td {padding-left: 0 !important;}

/* .dataTable {overflow: scroll;} */
table.data {font-size:.9em;}
.photoright{margin:0 0 .75em 1em;}
.photoleft{margin:0 1em .75em 0;}
#sidenav {clear: both;}
/* HOME -------------------------------- */
#rotator {padding-bottom: 148%; display: block;}
.rotator-content {padding: 2em 0;}
#rotator h2 {font-size: 5.5vw; }
#rotator h2 span {margin-top: 0.5rem}
#rotator .slick-dots {position: absolute; bottom: 5%; left:50%; transform: translateX(-50%)}
#rotator .slider .slick-slide {background:none;}
#rotator .slider .slick-slide .mobile-bg {z-index:1; display: block; position:absolute; top:0; left:0; width:100%; height: 100%; background-size: cover; background-position: center top;}
#rotator .slick-slide .title {z-index:2; position:absolute; width: 100%;bottom: 18%;text-align: center;padding: 0 1rem;}
#rotator .slider .slick-slide .caption {display: none !important;}
#rotator .slick-dots {position: absolute; z-index:3; transform: none; margin:0; bottom: 3em; left: 0; width:100%; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}

.welcome-message > .wrap {flex-direction: column;}
.welcome-message .half:first-of-type, .welcome-message .half + .half {width: 100%; margin-left: 0;}
.welcome-message .half + .half {margin-top: 3rem;}
.callouts .wrap {padding: 3rem 1rem;}
.callouts .wrap ul {flex-wrap: wrap;}
.callouts li {
        width: calc(50% - .75rem);
}
.callouts li:nth-of-type(-n+2) {
        margin-bottom: 1.5rem;
}
.callouts li a {height: 100%;}

body.hasRightAside main > .wrap > #content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
}
body.hasRightAside main > .wrap > #content .rightAside {order: 999;margin-top: 2em;}

blockquote blockquote, blockquote blockquote blockquote {margin-right: 0;}

.flex-table h2 {margin-top: 2rem;}
.flex-table tr {display: flex; flex-direction: column; margin-bottom: 1rem;}

.pageHeader {padding-top: 5rem;}

/* FOOTER ------------------------------ */
body>footer .wrap{display: -ms-flexbox;display: -webkit-box;display: flex;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-ms-flex-pack: start;-webkit-box-pack: start;justify-content: flex-start;-ms-flex-line-pack: stretch;align-content: stretch;-ms-flex-align: stretch;-webkit-box-align: stretch;align-items: stretch;}
#web-solutions{-ms-flex-order: 1;-webkit-box-ordinal-group: 2;order: 1;}
body>footer .wrap nav a+span:before {content: "|"; margin: 0 0.5em}
body>footer>.wrap nav {display: block;}
.fatFooter-content {flex-direction: column;}
.footer-header {text-align: center;}
#rotator .foreground img.vehicle-animate.animated {transform: translate(50%, 0);}
.fatFooter-content>*, .fatFooter-content > a.accredited {margin-bottom: 1rem;}
.fatFooter address, .fatFooter .email, .fatFooter .phone-number {
        width: 11.45rem;
        margin-right: -1.25rem;
}
body>footer>.wrap {text-align: center;}
/* 600 */
@media (max-width: 37.5em) {
        .callouts li {
                width: 90%;
                margin-left: auto;
                margin-right: auto;
        }
        .callouts li:not(:last-of-type) {margin-bottom: 1.5rem;}
        .callouts a.button {width: 12.6rem;}

        .welcome-message a.button.white {display: table; margin-left: 0; margin-top: 1rem;}

        #brand img {max-width: 100%;}
}


/* 500 */
@media (max-width: 31.25em) {
        .rotator-content {font-size: .75em;}

        .welcome-message h1 {line-height: 1em;}
        .welcome-message a.button.white:before {left: .4rem;}
        .welcome-message a.button.white {padding-left: 5rem; padding-right: .5rem;}
      .footer-header {font-size: .93em;}
      .callouts a .title {
        line-height: 1.5em;
        margin-bottom: .5rem;
        display: block;
        text-align: left;
        margin-bottom: 0.5rem;
        }

        #mainnav .search input[type="text"] {
                width: calc(100% - 4rem);
                padding: 0 0.5rem;
                margin-left: .5rem;
        }        
        #mainnav .search input[type="submit"] {width: 3rem;padding: 1rem 1.5rem;}

        .sidenav-button br {
                content: initial;
                width: 0;
        }
        a.sidenav-button:first-of-type:after  {margin-bottom: -1rem; margin-left: .4rem;}
        a.sidenav-button:nth-of-type(2):after {margin-bottom: -2rem; margin-left: -1.4rem}

        h2 > img, blockquote + div > img {float: none;display: block; margin-left: auto; margin-right: auto;}
        blockquote + div > img {margin-bottom: 1rem;}
        h2 + blockquote, div + blockquote, blockquote blockquote, blockquote blockquote blockquote {margin: 0;clear: both;}

        table.data.specs-table td {padding: .25em .1em;}
}