/*@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600";*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } ol, ul, li { margin: 0; border: 0; font-size: 100%; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; font-family: sans-serif; font-size: 1em; line-height: 1.5; -webkit-text-size-adjust: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } nav { color: #58aadb; font-size: 1.4em; } .wrapper { max-width: 70em; margin: 0 auto; } .smallicon { font-size: 1em; } .mediumicon { font-size: 2.5em; } .bigicon { font-size: 4em; } .logo { display: inline-block; height: inherit; width: 250px; left: 0; line-height: inherit; position: absolute; top: 0; } .inner { max-width: 75em; margin: 0 auto; } .inner-narrow { max-width: 50em; margin: 0 auto; } .inner.flex, .inner-narrow.flex { -ms-flex-pack: center; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; text-align: center; margin: 0 auto 1em auto; } .flex { display: -ms-flexbox; -ms-flex-wrap: wrap; -ms-flex-pack: justify; -moz-justify-content: space-between; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; } .container { padding: 1em 0; text-align: center; } .container h2 { font-size: 2em; color: #1c75b0; } .container.style1 { background-color: #fafafa; color: #999999; } .container.style1 .features-icon, .container.style1 h4 { color: #1c75b0; font-weight: bold; } .container.style2 { background-color: #3498db; color: #aed6f1; } .container.style2 .features-icon, .container.style2 h4 { color: rgba(255, 255, 255, 0.9); font-weight: bold; } .features-item { margin: 1em; width: 20em; } .fourohfour { text-align: center; margin: 2em; } footer { border-top: 1px solid rgba(108, 192, 145, 0.40); bottom: 0; color: #58aadb; left: 0; font-size: 1.8em; margin: 0; padding: 3em 0; text-align: center; width: 100%; } footer p { margin-top: 1.5em; font-size: 0.7em; } footer .social { overflow: hidden; } footer .social li:first-child { margin-left: 0px; } footer .social li { margin: 0px 7.5px; display: inline-block; } footer .social li a { color: #58aadb; text-align: center; background-color: transparent; display: inline-block; font-size: 1em; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; text-decoration: none; } footer .social li a:hover { color: #c8d4de; } #header { color: #fff; cursor: default; height: 3em; line-height: 3em; position: absolute; text-align: right; top: 1em; width: 100%; z-index: 10001; } #header .inner { margin: 0 auto; position: relative; } #header a { -moz-transition: color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; display: inline-block; padding: 0 0.75em; color: inherit; text-decoration: none; font-size: 1em; } #header a:hover { color: #c0c0c0; } #header a:last-child { padding-right: 0; } #header a.navPanelToggle { color: #58aadb; display: none; margin: 0 0.3em; text-decoration: none; height: 4em; width: 4em; z-index: 10003; } #header a.navPanelToggle .fa { color: #58aadb; font-size: 1.25em; } #banner { padding: 5em 0 2em 0; background-image: url(../images/banner-main.webp); background-size: cover; background-position: bottom; background-attachment: fixed; background-repeat: no-repeat; text-align: center; position: relative; } #banner:before { content: ''; background: rgba(70, 70, 90, 0.90); position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #banner .inner { border-top: 2px solid rgba(255, 255, 255, 0.2); position: relative; z-index: 10005; padding-top: 3em; } #banner h1 { font-size: 3.5em; font-weight: 400; color: #fff; line-height: 1em; margin: 0 0 1em 0; padding: 0; } #banner h3 { font-weight: 400; color: #fff; margin: 0; font-size: 1.5em; } #banner .icon { color: #6cc091; font-size: 2em; } #banner p { font-size: 1em; color: rgba(255, 255, 255, 0.55); margin-bottom: 1.75em; } #banner .flex { -ms-flex-pack: center; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; text-align: center; margin: 0 auto 1em auto; } #banner .flex div { border-right: 2px solid rgba(255, 255, 255, 0.2); padding: 0 6em; color: #6cc091; } #banner .flex div:last-child { border: none; padding-right: 0; } #banner .flex div:first-child { padding-left: 0; } #banner .flex div p { margin: 0; } /* Max screen */ @media screen and (max-width: 100em) { #banner .flex div { padding: 0 6em; } } /* X-Large screen */ @media screen and (max-width: 80em) { #banner { padding: 7em 0 6em 0; } #banner .inner { padding-top: 6em; } #banner h1 { font-size: 3em; } #banner h3 { font-size: 1.25em; } #banner .flex div { padding: 0 3em; } } /* Large screen */ @media screen and (max-width: 62em) { #banner { background-attachment: scroll; padding: 5em 0 2em 0; } #banner .inner { padding-top: 2em; } #banner h1 { font-size: 2.5em; } #banner h3 { font-size: 1.25em; } #banner .flex div { font-size: .85em; padding: 0 1.5em; } #footer { padding: 4em 0; } } /* Medium screen 50*/ @media screen and (max-width: 50em) { #header a.navPanelToggle { display: inline-block; } #nav { display: none; } #banner { padding: 4em 0 0.2em 0; } #banner .inner { padding-top: 1.5em; } #banner .flex { -moz-flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin: 0 auto 2em auto; } #banner .flex div { font-size: .85em; padding: 0; border: none; margin-bottom: 1em; } #banner h1 { font-size: 2em; } #banner h3 { font-size: 1.25em; } #footer { padding: 3em 0; } } /* Small screen 30*/ @media screen and (max-width: 30em) { .inner { max-width: 90%; } #banner h1 { font-size: 1.5em; } } #navPanel { -moz-transform: translatex(20em); -webkit-transform: translatex(20em); -ms-transform: translatex(20em); transform: translatex(20em); -moz-transition: -moz-transform 0.2s ease-in-out, visibility 0.2s ease-in-out; -webkit-transition: -webkit-transform 0.2s ease-in-out, visibility 0.2s ease-in-out; -ms-transition: -ms-transform 0.2s ease-in-out, visibility 0.2s ease-in-out; transition: transform 0.2s ease-in-out, visibility 0.2s ease-in-out; -webkit-overflow-scrolling: touch; visibility: hidden; overflow-y: auto; position: fixed; right: 0; top: 0; background: #3B3B3B; color: #58aadb; height: 100%; max-width: 80%; width: 20em; padding: 0.5em 1.25em; z-index: 10010; } #navPanel.visible { -moz-transform: translatex(0); -webkit-transform: translatex(0); -ms-transform: translatex(0); transform: translatex(0); box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, 0.2); visibility: visible; } #navPanel a:not(.close) { border-top: solid 1px #58aadb; color: #58aadb; font-weight: 600; display: block; padding: 0.75em 0; text-decoration: none; font-weight: 400; } #navPanel a:not(.close):first-child { border: none; } #navPanel .close { text-decoration: none; -moz-transition: color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; -webkit-tap-highlight-color: transparent; border: 0; color: #58aadb; cursor: pointer; display: block; height: 4em; padding-right: 1.25em; position: absolute; right: 0; text-align: right; top: 0; vertical-align: middle; width: 5em; } #navPanel .close:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'icomoon'; font-style: normal; font-weight: normal; text-transform: none !important; content: "\ea0f"; width: 3em; height: 3em; line-height: 3em; display: block; position: absolute; right: 0; top: 0; text-align: center; } #navPanel .close:hover { color: inherit; }