@charset "utf-8";
/* CSS Document */
html, body {height: 100%}
body {
	font-family: 'Roboto', sans-serif; font-weight: 400}
h1 {font-weight: 400}
a, h1 h2, h3, .products {color: #043F53}
h3, h4 {font-weight: 400}

p, footer {line-height: 1.6rem}

.container main h2 {padding: 120px 0 20px 0; text-align: center}
header {padding: 0 20px 16px 20px}
.logo {height:100px ; width: auto}

.navbar {float:right; list-style-type: none; margin-top: 48px}
.navbar li {float: left; padding-bottom: 0; margin-left: 10px;}
.navbar a, .products {padding: 8px 25px 8px 25px; font-size: 20px; font-weight: 400;display: block; text-decoration: none; background-color: #043F53; color:#fff!important; border-radius: 8px}

.navbar li li {margin: 0; width: 250px}
.navbar li li a {background-color: transparent; color:#000!important; padding: 16px; border-radius: 0; width:250px; margin: 0; box-sizing: border-box}

.navbar li li a:hover {background-color: #ddd}

.navbar .productContainer:hover .secondaryMenu {display: block; box-shadow: 0 2px 5px rgb(0 0 0 / 20%); }
.products {cursor: pointer}

h2 {font-weight: 400; font-size: 33px}
.splash {width: 100%; height: 500px; background-color: #ccc; background-image: url('splash.jpg'); background-size: cover}

.points {justify-content: center; margin: 20px 40px; display:flex; flex-wrap: wrap; text-align: center}
.bulletPoint {padding: 20px; width:250px; }
.bulletPoint * {text-decoration: none}

.partners {display:flex; flex-wrap: wrap; text-align: center; justify-content:center; align-items: center}
.partners img {display: inline-block; width:220px; height: auto; padding:0 20px}


.customers {display:flex; flex-wrap: wrap; text-align: center; justify-content:center; align-items: center}
.customers img {display: inline-block; padding:0 20px}

footer {background-color:#043F53;color:#fff; margin-top:80px; display: flex; justify-content: space-around}
.Sector {padding: 0 20px}
.list-style {list-style-type: none; color: #fff; font-weight: 400; padding: 0}
.list-style a {color: #fff; text-decoration: none}

.colContainer {display:flex; padding-top:30px; justify-content: space-between}
.col1, .col2, .col3 {width:30%}
.category {border-right: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; padding:10px; box-sizing:border-box; background-image: url('expand.svg'); background-repeat: no-repeat; background-position: right 8px; cursor: pointer; font-size: 18px}
.top {border-top: 1px solid #ccc; }
.features {display:none; transition: all; font-size: 16px; padding-top:16px}
.open {display: block}

.features ul {margin:0; padding-left:20px}
.features ul li  {margin:0; padding:2px 0 2px 10px; }

.secondaryMenu {
	display: none;
    transition: all 0.5s ease;
    position: absolute;
    background-color: #fff;
    color: #fff;
    margin: 0;
    padding: 0;
    z-index: 99;
    width: 250px;
    right: 0;}
.secondaryMenu li {padding-bottom: 0; margin-left: 10px; display: block}
.secondaryMenu a {padding: 10px 10px 10px 10px; font-size: 20px; font-weight: 400;display: block; text-decoration: none; width: 280px; }

.externalLink {padding:8px 16px; margin-top: 10px; display: inline-block; border-radius: 16px; background-color:#0f78ad; color:#fff; text-decoration:none}

input, textarea {padding:8px; width:400px; margin-bottom:10px; font-family:roboto; box-sizing: border-box}
button {background-color:#1aa2dc; color:#fff; border-radius:4px; border:none; padding:8px; width:400px}