@charset "UTF-8";

html {height: 101%; margin: 0; padding: 0; min-height: 101%;}
body {font-family: "Open Sans", sans-serif; font-weight: 300; font-size: 100%; font-style: normal; margin: 0; padding: 0; height: 100%; position: relative; overflow-x: hidden; background: #131313; min-height: 101%;}

hr {width: 100%; height: 1px; background: #cccccc; border: none; margin: 10px auto; clear: both;}

img {display: block; margin: 0; outline: none; padding: 0; max-width: 100%; width: auto;}
img.seecmsimagedefault, img.seecmsimagedefaultundefined {display: inline-block; margin: 0 0 20px 0!important;}
img.seecmsimageleft, img.seecmsimageleftundefined {float: left; margin: 0 20px 20px 0!important;}
img.seecmsimageright, img.seecmsimagerightundefined {float: right; margin: 0 0 20px 20px!important;}
img.seecmsimagecentre, img.seecmsimagecentreundefined {display: block; margin: 0 auto;}

p, h1, h2, h3, h4, li {margin: 0; padding: 0; line-height: 150%; color: #000000; font-style: normal; font-weight: 300;}
p {padding: 0 0 20px 0;}
ul, ol {margin: 0 0 20px 20px; padding: 0;}
li p {padding: 0;}
li li, li p {font-size: 100%;}
strong {font-weight: bold;}
a {text-decoration: none; color: #000000;}
a:hover {color: #000000; text-decoration: underline;}
a img {border: none; outline: none;}
* {-webkit-print-color-adjust: exact;}
label {color: #000000; font-size: 100%;}
sup {font-size: 70%; line-height: 110%; padding: 0 0 10px 0; margin: 0; font-weight: 300; color: #000000;}

p.seeformerrors {color: red;}
.introbanner p.seeformerrors {max-width: initial; font-size: 90%; font-weight: 700; line-height: 170%; color: #ff5757;}
.required {font-weight: 500; margin-left: 8px; color: #26606c;}

.floatleft {float: left;}
.floatright {float: right;}
.textright {text-align: right;}
.textleft {text-align: left;}
.textcenter {text-align: center;}
.largertext {font-size: 120%!important;}

.col1, .col2, .col3, .col4, .left, .right {display: block; float: left; min-height: 5px;}

div:after, form:after, ul:after, input:after, section:after, article:after, header:after, footer:after, nav:after, aside:after, hgroup:after {clear: both; content: ""; display: block; height: 0; visibility: hidden;}
section, article, header, footer, nav, aside, hgroup {display: block;}

table {width: 100%; margin: 0 0 20px 0; border: 0!important; border-collapse: separate!important; border-spacing: 2px!important;}
table th {padding: 10px; font-size: 100%; color: #ffffff; background: #000000; font-weight: 300; border-collapse: separate!important; text-align: left; border: 0!important; border-spacing: 2px!important;}
table td {padding: 10px; font-size: 100%; color: #000000; background: #f1f1f1; font-weight: 300; border-collapse: separate!important; text-align: left; border: 0!important; border-spacing: 2px!important;}
table th p, table td p {font-size: 100%; padding: 0;}
table th a {color: #ffffff!important;}

input[type="tel"], input[type="text"], input[type="password"], input[type="email"], textarea, select, button {width: 100%; padding: 0 10px; box-sizing: border-box; height: 40px; background: #ffffff; border: 1px solid #cccccc; margin: 5px 0 15px 0; outline: none; resize: none; font-family: "Open Sans", sans-serif; font-weight: 300; font-size: 100%; border-radius: 5px;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px white inset; -webkit-text-fill-color: #000000;}
textarea {height: 130px; padding: 10px; border-radius: 5px;}
input[type="checkbox"], input[type="radio"] {width: 15px; height: 15px; float: left; margin: 0 10px 0 0;}
input[type="radio"] {margin-top: 5px;}
input[type="tel"], input[type="text"], input[type="submit"], textarea, button, input[type="password"], input[type="button"], select {-webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 5px;}
input[type="submit"], button, input[type="button"] {cursor: pointer; width: auto; outline: none; border: none; background: #76b82a; padding: 0 20px; height: 40px; color: #ffffff; font-size: 90%; text-transform: uppercase; font-family: "Nunito", sans-serif; font-weight: 700; border-radius: 5px; letter-spacing: 1px;}

.slick-slide {outline: none!important;}

.login {position: relative;}
.login label {color: #ffffff;}
.login input[type="submit"] {float: right;}
.login input[type="text"], .login input[type="tel"], .login input[type="email"], .login input[type="password"], .login textarea {background: #11292e; border-color: #11292e; color: #ffffff; height: 50px;}
.login textarea {height: 100px;}
.login input:-webkit-autofill, .login input:-webkit-autofill:hover, .login input:-webkit-autofill:focus {-webkit-box-shadow: 0 0 0 1000px #11292e inset; -webkit-text-fill-color: #ffffff; border: 1px solid #11292e; transition: background-color 5000s ease-in-out 0s;}
.login .forgottenpassword {position: absolute; bottom: 0; left: 0; font-size: 80%; color: #8da4a9; padding: 0;}
.login .forgottenpassword a {color: #8da4a9; text-decoration: none;}
.login .forgottenpassword a:hover {color: #ffffff;}
.login .forgottenpassword span {display: inline-block; margin: 0 5px;}

/* Old form builder */
.cmsform p {padding: 0;}
.cmsform p.fieldname {padding: 0 0 5px 0;}
.cmsform p.fieldoption {padding: 0 0 20px 0;}
.cmsform p.fieldoption .notes {font-style: italic;}
.cmsform input, .cmsform select, .cmsform textarea {margin: 0 0 5px 0;}
.cmsform input[type="checkbox"] {margin: 0 10px 0 0;}
.cmsform input[type="submit"] {margin: 15px 0;}
.cmsform .errors p {color: red!important; padding: 0 0 20px 0;}

/* New form builder */
.sc-fb p {padding: 0;}
.sc-fb p.sc-fb-field-name {padding: 0 0 5px 0;}
.sc-fb p.sc-fb-field-option {padding: 0 0 20px 0;}
.sc-fb p.sc-fb-field-option .sc-fb-field-notes {font-style: italic;}
.sc-fb input, .sc-fb select, .sc-fb textarea {margin: 0 0 5px 0;}
.sc-fb input[type="checkbox"] {margin: 0 10px 0 0;}
.sc-fb input[type="submit"] {margin: 15px 0;}
.sc-fb .sc-fb-submit-errors {color: red!important; padding: 0 0 20px 0;}
.sc-fb .sc-fb-field-error {color: red!important; float: right;}
.sc-fb .sc-fb-field-required {margin-left: 8px; font-weight: 600;}
.sc-fb .sc-fb-required-desc {float: right;}

.searchresult h3 img {width: auto; float: left; margin: 0 10px 0 0;}

.clear {clear: both;}

.sitemap ul ul {margin: 0 0 0 20px;}

.allclickable {cursor: pointer;}

.form .block {margin-bottom: 30px;}
.form h4 {color: #26606c;}
.form .row.thirds, .form .row.halves {width: 102%; margin-left: -2%;}
.form .row.thirds .input {float: left; width: 31.3%; margin: 0 0 0 2%;}
.form .row.halves .input {float: left; width: 48%; margin: 0 0 0 2%;}

.nopadding {padding: 0!important;}
.nopaddingtop {padding-top: 0!important;}

/* font-family: 'Nunito', sans-serif; */

h1, h2, h3, h4, h5 {font-family: "Nunito", sans-serif; text-transform: uppercase; line-height: 120%; font-weight: 400; margin: 0; padding: 0 0 20px 0;}
h1 strong, h2 strong, h3 strong, h4 strong {color: #76b82a;}
h2 {font-size: 300%; letter-spacing: 1px; line-height: 110%;}
h3 {font-size: 225%; letter-spacing: 1px;}
h4, h5 {font-size: 120%; font-weight: 700; padding: 0 0 15px 0; text-transform: none; font-family: "Open Sans", sans-serif;}
h5 {font-weight: 400;}
img.hexagon {clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 1% 75%, 0 25%);}

.checkbox label {display: block; position: relative; padding-left: 25px!important; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.checkbox label input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.checkbox label .checkmark {position: absolute; top: 0; left: 0; height: 15px; width: 15px; background: #ffffff; border: 1px solid #cccccc;}
.checkbox label:hover input ~ .checkmark {background: #ffffff;}
.checkbox label input:checked ~ .checkmark {background: #76b82a; border-color: #76b82a;}
.checkbox label .checkmark:after {content: ""; position: absolute; display: none;}
.checkbox label input:checked ~ .checkmark:after {display: block;}
.checkbox label .checkmark:after {left: 5px; top: 1px; width: 4px; height: 9px; border: solid white; border-width: 0 1px 1px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

.hidden {display: none;}
.invisible {visibility: hidden;}

.arrowbutton a {font-weight: 600; display: inline-block; text-transform: uppercase; font-family: "Nunito", sans-serif; text-decoration: none; letter-spacing: 0.5px; padding: 0 30px 0 0; position: relative;}
.arrowbutton.opp a {padding: 0 0 0 30px;}
.arrowbutton a:after {font-family: "Font Awesome 5 Free"; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-weight: 900; content: "\f061"; position: absolute; top: -1px; right: 0; color: #76b82a;}
.arrowbutton.opp a:after {content: "\f060"; right: auto; left: 0; color: #76b82a;}

.blockbutton a {font-size: 90%; display: inline-block; margin: 10px 10px 0 0; border-radius: 5px; color: #ffffff; text-decoration: none!important; font-weight: 700; text-transform: uppercase; padding: 6px 15px; font-family: "Nunito", sans-serif; letter-spacing: 1px; position: relative; text-align: center; box-sizing: border-box; background: #306e7b;}
.blockbutton a:hover {background: #26606c;}
.blockbutton .green a {background: #76b82a;}
.blockbutton .green a:hover {background: #609c1c;}
.blockbutton .darkergreen a {background: #122d32;}
.blockbutton .darkergreen a:hover {background: #041215;}
.blockbutton.newsback {padding: 30px 0 0 0; text-align: center;}

.hexfeature .inner {background: #ffffff; padding: 30px 20px 10px 20px; text-align: center;}
.hexfeature:before, .hexfeature:after {width: 100%; height: 0; display: block; content: ""; padding-bottom: 25%; background: #ffffff; clip-path: polygon(0% 0%, 100% 0%, 50% 100%); visibility: visible;}
.hexfeature:before {transform: rotate(-180deg); margin-bottom: -1px;}
.hexfeature h1, .hexfeature h2, .hexfeature h3, .hexfeature h4, .hexfeature p, .hexfeature .arrowbutton a {color: #000000!important;}
.hexfeature h1, .hexfeature h2, .hexfeature h3, .hexfeature h4 {font-weight: 600; font-size: 170%; line-height: 130%;}

.blue h1, .blue h2, .blue h3, .blue h4, .blue p, .blue .arrowbutton a, .blueopp h1, .blueopp h2, .blueopp h3, .blueopp h4, .blueopp p, .blueopp .arrowbutton a {color: #ffffff;}

.header-wrap {padding: 0 50px; background: none; position: absolute; top: 0; left: 0; width: 100%; z-index: 2; box-sizing: border-box; z-index: 90;}
.header {max-width: 1280px; width: 100%; margin: 0 auto; padding: 40px 0 0 0;}
.header a.logo {display: block; width: 100%; height: 120px; background: url(../images/svgs/logo.svg) no-repeat 0 0; background-size: 100%;}
.header .left {float: left; width: 20%;}
.header .right {float: right; width: 80%; padding: 30px 0 0 0; box-sizing: border-box;}

.nav {text-align: right;}
.nav ul {margin: 0; padding: 0; width: 100%; display: block;}
.nav li {list-style: none; padding: 0 0 0 15px; display: inline-block; text-align: center; vertical-align: middle; font-size: 100%; font-weight: 700;}
.nav li a {text-align: center; text-decoration: none; color: #ffffff; transition: all 0.2s ease; -moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease;}
.nav li.selected a, .nav li:hover a {color: #76b82a;}
.nav li.p4 a, .nav li.p5 a {font-family: "Nunito", sans-serif; display: block; padding: 5px 12px; border-radius: 5px; background: #76b82a; color: #ffffff; text-transform: uppercase; font-size: 90%; letter-spacing: 1px;}
.nav li.p5 a {background: #3e8190;}
.nav li.p5 {padding: 0 0 0 10px;}

.snav ul {margin: 0; padding: 0;}
.snav li {list-style: none; margin: 0; padding: 0!important; background: none!important; font-size: 100%; font-weight: 700; font-family: "Nunito", sans-serif; letter-spacing: 1px; text-transform: uppercase;}
.snav li a {color: #ffffff; background: #3e8190; padding: 15px; display: block; text-decoration: none; margin: 0 0 10px 0; border-radius: 5px;}
.snav li.selected a, .snav li.selected:hover a {background: #76b82a;}
.snav li:hover a {background: #306e7b;}

.introbanner {min-height: 715px; height: 70vh; position: relative; overflow: hidden; padding: 0;}
.introbanner h4 {color: #76b82a; font-size: 150%;}
.introbanner h2, .introbanner h1, .introbanner h3 {font-size: 540%; color: #ffffff; line-height: 100%; padding: 0 0 15px 0;}
.introbanner p {max-width: 480px; font-size: 110%; line-height: 150%; font-weight: 300; letter-spacing: 0.3px;}
.introbanner p.blockbutton {font-size: 100%; letter-spacing: 0; max-width: 100%;}
.introbanner p.blockbutton a, .introbanner p.blockbutton span {display: inline-block; width: 206px;}
.introbanner .content .left {float: left; width: 55%; position: relative; z-index: 5;}
.introbanner .content .right {float: right; width: 40%;}
.introbanner .content {position: absolute; top: 50%; max-width: 1380px; box-sizing: border-box; padding: 100px 50px 0 50px; left: 0; right: 0; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%);}
.introbanner .images {width: 40%; overflow: hidden; position: absolute; top: 50%; right: 0; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); margin: 10px 0 0 0;}
.introbanner .images .image img {width: 100%; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 1% 75%, 0 25%); -webkit-box-shadow: 0 0 34px -12px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 34px -12px rgba(0, 0, 0, 0.6); box-shadow: 0 0 34px -12px rgba(0, 0, 0, 0.6);}
.introbanner .images .text {padding-top: 20px;}
.introbanner.innerintrobanner {height: 80vh; min-height: 650px;}
.introbanner.innerintrobanner .images {width: 35%;}

.text p.center {text-align: center;}

.pg5 .introbanner .content .left {width: 40%;}
.pg5 .introbanner .content .right {width: 50%;}

.blogpost .introbanner {min-height: 0; height: auto; max-height: none;}
.blogpost .introbanner .content {max-width: 1280px; padding: 250px 25px 50px 25px; position: static; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none;}

.content-wrap {padding: 0 50px; background: #ffffff;}
.content-wrap.blue {background: rgb(37, 94, 106); background: -moz-linear-gradient(-45deg, rgba(37, 94, 106, 1) 0%, rgba(17, 42, 47, 1) 100%); background: -webkit-linear-gradient(-45deg, rgba(37, 94, 106, 1) 0%, rgba(17, 42, 47, 1) 100%); background: linear-gradient(135deg, rgba(37, 94, 106, 1) 0%, rgba(17, 42, 47, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#255e6a", endColorstr="#112a2f", GradientType=1);}
.content-wrap.blueopp {background: rgb(26, 64, 73); background: -moz-linear-gradient(45deg, rgba(26, 64, 73, 1) 1%, rgba(39, 98, 110, 1) 100%); background: -webkit-linear-gradient(45deg, rgba(26, 64, 73, 1) 1%, rgba(39, 98, 110, 1) 100%); background: linear-gradient(45deg, rgba(26, 64, 73, 1) 1%, rgba(39, 98, 110, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1a4049", endColorstr="#27626e", GradientType=1);}
.content {max-width: 1280px; width: 100%; margin: 0 auto; padding: 80px 0 60px 0;}
.content .intro {max-width: 1200px; width: 100%; margin: 0 auto; text-align: center;}
.content .intro p {font-size: 120%; max-width: 900px; width: 100%; margin: 0 auto;}
.content .left {width: 29%; float: left;}
.content .right {width: 63%; float: right;}
.content ul {margin: 0 0 20px 0;}
.content li {list-style: none; padding: 0 0 0 25px; background: url(../images/svgs/list-style.svg) no-repeat left 3px; background-size: 15px;}

.home .content .left {float: left; width: 34%;}
.home .content .right {float: right; width: 60%;}

.opposite .content .left {width: 63%;}
.opposite .content .right {width: 29%;}

.halves .content .left, .halves .content .right {float: left; width: 45%;}
.halves .content .right {float: right;}
.halves .content .leftthree {float: left; width: 70%;}
.halves .content .rightone {float: right; width: 25%;}
.halves .content .rightone .greenbackground {background: #76b82a; padding: 10px; border-radius: 5px;}
.rightone .greenbackground p, .rightone .greenbackground h1, .rightone .greenbackground h2, .rightone .greenbackground h3, .rightone .greenbackground h4, .rightone .greenbackground li {color: #ffffff;}
.halves .content .leftone {float: left; width: 25%;}
.halves .content .leftone .greenbackground {background: #76b82a; padding: 10px; border-radius: 5px;}
.leftone .greenbackground p, .leftone .greenbackground h1, .leftone .greenbackground h2, .leftone .greenbackground h3, .leftone .greenbackground h4, .leftone .greenbackground li {color: #ffffff;}
.halves .content .rightthree {float: right; width: 70%;}

.features {padding: 15px 0;}
.features .feature {position: relative; padding: 0 36%;}
.features .feature .images {width: 55%; overflow: hidden; transform: rotate(90deg); float: left; position: absolute; top: 50%; transform: translate(0, -50%) rotate(90deg); -webkit-transform: translate(0, -50%) rotate(90deg); -moz-transform: translate(0, -50%) rotate(90deg); -ms-transform: translate(0, -50%) rotate(90deg); -o-transform: translate(0, -50%) rotate(90deg); left: -7%;}
.features .feature .images:last-child {right: -7%; left: auto;}
.features .feature .images .image {width: 100%; overflow: hidden; visibility: hidden; -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg);}
.features .feature .images .image .inner {overflow: hidden; width: 100%; height: 100%; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg);}
.features .feature .images .image .innerinner {width: 100%; height: 0; padding-bottom: 50%; visibility: visible; -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -ms-transform: rotate(-120deg); -o-transform: rotate(-120deg); transform: rotate(-120deg);}
.features .feature .hexfeature .inner {background: #bddbe1; text-align: left; padding: 30px;}
.features .feature .hexfeature:before, .features .feature .hexfeature:after {background: #bddbe1;}
.features .feature p {font-size: 90%; padding: 0;}
.features .feature h4 {text-transform: none; letter-spacing: 0; font-size: 110%; font-weight: 700; font-family: "Open Sans", sans-serif; padding: 0 0 10px 0;}

.benefitssection .blockbutton {padding: 30px 0 20px 0;}
.benefits {width: 104%; margin-left: -4%; padding: 20px 0 0 0;}
.benefits .benefit {float: left; width: 29.3333%; margin: 0 0 0 4%;}
.benefits .benefit h4 {font-size: 110%; font-weight: 900; color: #76b82a; padding: 0 0 5px 0; text-transform: uppercase; font-family: "Nunito", sans-serif;}
.benefits .benefit img {max-height: 100px; margin: 0 auto;}
.benefits .benefit p {font-size: 90%; padding: 0;}
.benefits .benefit .image {float: left; width: 30%;}
.benefits .benefit .text {float: right; width: 65%;}

.smallbenefits {padding: 20px 0 0 0;}
.smallbenefits .benefit {float: left; width: 33.333%; box-sizing: border-box; padding: 0 30px; text-align: center;}
.smallbenefits .benefit img {max-height: 180px; margin: 0 auto;}
.smallbenefits .benefit .image {padding: 0 0 20px 0;}
.smallbenefits .benefit h4 {padding: 0; font-size: 110%; color: #26606c;}

#accountSimpleSteps {background-color: #e9f9fc;}
.accountsimplesteps {padding: 20px 0 0 0;}
.accountsimplesteps h2 {text-align: center; color: #26606c; font-size: 200%; padding: 20px 0;}
.accountsimplesteps .benefit {float: left; width: 33.333%; box-sizing: border-box; padding: 0 30px; text-align: center;}
.accountsimplesteps .benefit img {max-height: 180px; margin: 0 auto;}
.accountsimplesteps .benefit .image {padding: 0 0 20px 0;}
.accountsimplesteps .benefit h4 {padding: 15px; font-size: 110%; color: #ffffff;}
.accountsimplesteps .benefit .text.circle {background-color: #26606c; border-radius: 50%; width: 50px; height: 50px; margin: 20px auto;}
.accountsimplesteps .benefit .text p {font-size: 120%; color: #26606c; font-weight: 700;}

.testimonialssection .content .left {float: left; width: 55%;}
.testimonialssection .content .right {float: right; width: 28%; box-sizing: border-box;}
.testimonials h4 {font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 110%; text-transform: none; letter-spacing: 0;}
.testimonials h2 {font-size: 320%; color: #76b82a; font-weight: 700; padding: 0 0 10px 0;}
.testimonials h3 {text-transform: none; padding: 0; font-family: "Open Sans", sans-serif; font-weight: 400; font-style: italic; font-size: 120%; letter-spacing: 0;}
.testimonials .text {padding: 30px 0 0 0;}
.testimonials .slick-dots {width: 100%; margin: 0 auto; position: absolute; left: 0; right: 0; text-align: center;}
.testimonials .slick-dots li {width: 12px; display: inline-block; padding: 0!important; background: none!important; margin: 0 5px; line-height: 100%; height: 12px;}
.testimonials .slick-dots li button {width: 100%; height: 12px; border-radius: 50%; background: #dbdbdb; margin: 0; padding: 0; text-indent: -9999px; outline: none; cursor: pointer; border: none;}
.testimonials .slick-dots li:hover button, .testimonials .slick-dots li.slick-active button {background: #8f8c8c;}
.testimonials .testimonial .image {width: 100%; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 1% 75%, 0 25%); overflow: hidden;}
.testimonials .testimonial .image img {width: 100%;}
.testimonials .testimonial p.quotetext {font-size: 170%;}

.principlestimeline {position: relative; max-width: 800px; width: 100%; text-align: right; margin: 40px auto 0 auto;}
.principlestimeline .centerline {width: 1px; height: 100%; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; background: #d0d0d0;}
.principlestimeline .principle {float: left; width: 50%; clear: both; position: relative; margin-top: -80px;}
.principlestimeline .principle.first {margin-top: 0;}
.principlestimeline .principle.p2 {float: right; clear: both; text-align: left;}
.principlestimeline .principle .number {width: 140px; height: 140px; margin: 0 40px 15px 0; display: inline-block; position: relative; background: url(../images/svgs/list-style.svg) no-repeat 0 0; background-size: 100% 100%;}
.principlestimeline .principle .number .line {width: 40px; height: 1px; position: absolute; top: 50%; right: -40px; background: #d0d0d0; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%);}
.principlestimeline .principle .number .inner {width: 30px; padding: 0!important; position: absolute; top: 16%; left: 0; right: 0; margin: 0 auto; text-align: center; min-height: 1px!important;}
.principlestimeline .principle .number p {color: #255e6a; padding: 0; font-size: 165%; line-height: 100%; font-family: "Nunito", sans-serif; font-weight: 700;}
.principlestimeline .principle .text {padding: 0 40px 0 0;}
.principlestimeline .principle .text h4 {font-family: "Nunito", sans-serif; font-weight: 700; font-size: 130%; text-transform: uppercase; padding: 0 0 5px 0;}
.principlestimeline .principle.p2 .number {margin: 0 0 15px 40px;}
.principlestimeline .principle.p2 .number .line {right: auto; left: -40px;}
.principlestimeline .principle.p2 .text {padding: 0 0 0 40px;}

.concertina {padding: 0 0 30px 0;}
.concertina .section .heading {padding: 15px; background: #255e6a; margin: 0 0 5px 0; cursor: pointer;}
.concertina .section .heading h4 {padding: 0 20px 0 0; margin: 0; color: #ffffff; font-size: 100%; position: relative; font-weight: 600; position: relative;}
.concertina .section .heading h4:after {position: absolute; top: 50%; right: 10px; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); color: #ffffff; font-family: "Font Awesome 5 Free"; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-weight: 900; content: "\f078";}
.concertina .section .text {display: none; padding: 10px 15px 15px 15px;}

.faqs .content h2 {font-size: 200%; font-weight: 700;}
.faqs .content h3 {font-size: 140%; font-weight: 700; padding: 0 0 10px 0; color: #76b82a;}

.statisticssection .content .right {padding: 40px 0 0 0;}
.statistics {width: 108%; margin-left: -8%;}
.statistics .stat {width: 42%; float: left; margin: 0 0 0 8%; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 1% 75%, 0 25%);}
.statistics .stat .inner {background: #ffffff; padding: 35% 20px; text-align: center;}
.statistics .stat p {padding: 0; font-size: 80%; text-transform: uppercase; font-family: "Nunito", sans-serif; text-transform: uppercase; line-height: 110%; font-weight: 700; letter-spacing: 1px; color: #333333;}
.statistics .stat p span {display: block; font-size: 600%; font-weight: 900; line-height: 100%; color: #76b82a; letter-spacing: 0;}

.plandetails .details span {font-weight: 700; display: inline-block; margin: 0 20px 0 0;}
.plandetails .details .blockbutton a {margin: 10px 10px 0 0;}

.recommendations .recommendation {padding: 25px; background: #e9f9fc; margin: 0 0 10px 0;}
.recommendations .recommendation p {padding: 0 0 0 25px; position: relative;}
.recommendations .recommendation input {position: absolute; top: 4px; left: 0;}
.recommendations .recommendation.completed {background: #daecc5;}
.recommendations .recommendation.completed label, .recommendations .recommendation.completed .recommendationwhy {text-decoration: line-through;}
.recommendations .recommendation label {display: block; position: relative; padding-left: 35px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.recommendations .recommendation label input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.recommendations .recommendation label .checkmark {position: absolute; top: 3px; left: 0; height: 20px; width: 20px; background: #ffffff; border: 1px solid #cccccc;}
.recommendations .recommendation label:hover input ~ .checkmark {background: #ffffff;}
.recommendations .recommendation label input:checked ~ .checkmark {background: #76b82a; border-color: #76b82a;}
.recommendations .recommendation label .checkmark:after {content: ""; position: absolute; display: none;}
.recommendations .recommendation label input:checked ~ .checkmark:after {display: block;}
.recommendations .recommendation label .checkmark:after {left: 7px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.recommendations .recommendation .expandrecommendation {padding: 0 0 0 55px; font-weight: 700; font-size: 90%; cursor: pointer; position: relative; margin: 5px 0;}
.recommendations .recommendation .expandrecommendation:before {position: absolute; top: 2px; left: 35px; font-family: "Font Awesome 5 Free"; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-weight: 900; content: "\f055"; visibility: visible;}
.recommendations .recommendation .expandrecommendation.open:before {content: "\f056";}
.recommendations .recommendation .recommendationwhy {padding: 0 0 0 35px;}

.helpoptions {text-align: center;}
.helpoptions .hexfeature {max-width: 300px; width: 100%; display: inline-block; margin: 0 20px; position: relative;}
.helpoptions .hexfeature a.overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 4;}
.helpoptions .hexfeature:before, .helpoptions .hexfeature:after, .helpoptions .hexfeature .inner {background: #3e8190;}
.helpoptions .hexfeature .inner {height: 0; padding-bottom: 50%; position: relative;}
.helpoptions .hexfeature .inner p {position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; max-width: 70%; width: 100%; color: #ffffff!important; font-size: 120%; font-weight: 700; padding: 0; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); text-transform: uppercase; font-family: "Nunito", sans-serif; letter-spacing: 1px;}

.featurebuttons {width: 102%; margin-left: -2%; padding: 20px 0 0 0;}
.featurebuttons .button {float: left; width: 48%; margin: 0 0 0 2%; border-radius: 20px; background: #20505a; box-sizing: border-box; padding: 60px; text-align: center; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; position: relative;}
.featurebuttons .button a.connectmelink {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.featurebuttons .button:hover {background: #26606c;}
.featurebuttons .button h4 {font-size: 170%; text-transform: uppercase; letter-spacing: 1px; font-family: "Nunito", sans-serif; padding: 0 0 10px 0; color: #76b82a;}
.featurebuttons .button p {padding: 0; color: #ffffff; font-weight: 700;}
.featurebuttons .button img {max-height: 150px; max-width: none; width: auto; margin: 0 auto; display: inline-block; position: absolute; top: 50%; left: 0; right: 0; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%);}
.featurebuttons .button .image {margin: 0 0 15px 0; height: 150px; width: 100%; position: relative;}
.featurebuttons .icons {padding: 0 0 30px 0;}
.featurebuttons .icons .icon {float: left; width: 25%; box-sizing: border-box; padding: 0 20px;}
.featurebuttons .icons .icon img {max-height: 90px; margin: 0 auto 10px auto;}
.featurebuttons .icons .icon p {font-size: 100%!important; font-weight: 500;}
.featurebuttons .button p.blockbutton {padding: 15px 0 0 0; font-size: 100%!important;}

.blogfeed {width: 102%; margin-left: -2%;}
.blogfeed .post {float: left; width: 31.333%; margin: 0 0 20px 2%; position: relative; background: #e6f2f4; border-radius: 15px; box-sizing: border-box; overflow: hidden;}
.blogfeed .post .text {padding: 30px 30px 80px 30px;}
.blogfeed .post .image img {width: 100%;}
.blogfeed .post h4 {text-transform: uppercase; letter-spacing: 1px; font-family: "Nunito", sans-serif; padding: 0 0 5px 0; color: #76b82a; font-size: 140%; font-weight: 700;}
.blogfeed .post .date {padding: 0 0 10px 0; font-size: 90%; font-weight: 500;}
.blogfeed .post .date i {margin: 0 5px 0 0; font-size: 120%;}
.blogfeed .post .blockbutton {padding: 0; position: absolute; bottom: 30px; left: 30px;}

.questions {background: #e6edef; border-radius: 20px; padding: 30px 40px; position: relative;}
.questions .question {text-align: center; display: none; max-width: 80%; width: 100%; margin: 0 auto;}
.questions .question.active {display: block;}
.questions .question h4 {text-transform: none; font-size: 170%; font-weight: 700; font-family: "Open Sans", sans-serif; letter-spacing: 0; padding: 0 0 20px 0;}
.questions .question h4.subquestion {font-size: 120%; padding: 20px 0 10px 0;}
.questions .question h5 {text-transform: none; font-size: 140%; font-weight: 700; font-family: "Open Sans", sans-serif; letter-spacing: 0; padding: 0 0 30px 0;}
.questions .question p {font-size: 100%; padding: 0 0 20px 0;}
.questions .question p.clickall {font-size: 80%; font-style: italic;}
.questions .question p.count {font-weight: 700; padding: 0 0 20px 0;}
.questions .question a.mail {text-decoration: none; font-weight: 700; color: #76b82a;}
.questions .question .left {float: left; width: 40%;}
.questions .question .right {float: right; width: 50%;}
.questions .question .buttons .button p {font-size: 100%; padding: 0;}
.questions .question .optionsgrid table {margin: 0;}
.questions .question .optionsgrid th {vertical-align: top; background: none; font-weight: 700; color: #000000; padding: 10px 10px 10px 0; font-size: 100%; border-spacing: 0!important; border-bottom: 1px solid #245b67!important; border-collapse: collapse!important;}
.questions .question .optionsgrid td {vertical-align: top; background: none; font-weight: 300; color: #000000; padding: 10px 10px 10px 0; font-size: 100%; border-spacing: 0!important; border-bottom: 1px solid #245b67!important; border-collapse: collapse!important;}
.questions .question.wideright .left {width: 30%;}
.questions .question.wideright .right {width: 60%;}
.questions .question input[type="checkbox"] {margin-top: 4px;}
.questions .buttons .button {float: none; display: inline-block; margin: 0 5px 10px 5px; color: #ffffff; background-color: #245c68; padding: 15px 20px; font-weight: 700; font-size: 95%; border: none; border-radius: 10px; cursor: pointer; box-sizing: border-box; line-height: 110%; text-align: center;}
.questions .buttons .button.selected {background: #76b82a;}
.questions .buttons .button:hover {opacity: 0.5;}
.questions .buttons input[type="checkbox"], .questions .buttons input[type="radio"] {opacity: 0; position: fixed; width: 0; height: 0;}
.questions .buttons input[type="checkbox"]:checked + label, .questions .buttons input[type="radio"]:checked + label {background-color: #76b82a; color: #ffffff;}
.questions .buttons input[type="checkbox"]:focus + label, .questions .buttons input[type="radio"]:focus + label {border: none;}
.questions .buttons label:hover {background-color: #76b82a; color: #ffffff;}
.questions .questionnav {padding: 70px 0 0 0;}
.questions .questionnav p {padding: 0; font-size: 90%;}
.questions .questionnav p.next {float: right;}
.questions .questionnav p.prev {float: left;}
.questions .questionnav .hidden {opacity: 0.4;}
.questions .progressbar {padding: 0 0 70px 0;}
.questions .progressbar p {text-transform: uppercase; font-weight: 700; padding: 0 0 10px 0; font-size: 120%; font-family: "Nunito", sans-serif;}
.questions .progressbar .bar {background: #ffffff; padding: 10px; overflow: hidden; border-radius: 10px;}
.questions .progressbar .bar span {display: block; border-radius: 10px; width: 1%; background: #76b82a; height: 10px;}
.questions .icon {width: 124px; height: 150px; background: url(../images/svgs/icon.svg) no-repeat 0 0; background-size: 100%; margin: 0 auto 20px auto;}

.questions .question.circleoptions .inner {width: 94%; height: 860px; position: relative; margin: 0 auto;}
.questions .question.circleoptions .inner .innerinner {box-sizing: border-box; position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; width: 45%; height: 0; padding-bottom: 45%; border-radius: 50%; background: #245b67; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%);}
.questions .question.circleoptions .inner .innerinner .block {position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; width: 80%; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); line-height: 140%;}
.questions .question.circleoptions .inner .innerinner .block h4 {line-height: 140%; color: #ffffff; font-size: 130%;}
.questions .question.circleoptions .inner .innerinner .block p {color: #ffffff;}
.questions .question.circleoptions .button {position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 23%; text-align: center; cursor: pointer; height: 0; padding-bottom: 23%; border-radius: 50%; background: #ffffff;}
/* .questions .question.circleoptions .button {position: relative; top: 0; left: 0; right: 0; margin: 5px; width: 23%; text-align: center; cursor: pointer; height: 0; padding-bottom: 23%; border-radius: 50%; background: #ffffff; float: left;} */
.questions .question.circleoptions .button:hover {background: #dcebca;}
.questions .question.circleoptions .button.selected {background: #76b82a;}
.questions .question.circleoptions .button.selected span {color: #ffffff;}
.questions .question.circleoptions .button.selected:hover {background: #76b82a;}
.questions .question.circleoptions .button span {position: absolute; top: 50%; left: 0; right: 0; width: 70%; margin: 0 auto; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); font-weight: 400; font-size: 85%; color: #333333; line-height: 135%;}
.questions .question.circleoptions .button.b2 {top: 13%; left: auto; right: 10%;}
.questions .question.circleoptions .button.b3 {top: 50%; left: auto; right: 0; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%);}
.questions .question.circleoptions .button.b4 {top: 65%; left: auto; right: 10%;}
.questions .question.circleoptions .button.b5 {top: auto; bottom: 0;}
.questions .question.circleoptions .button.b6 {top: 65%; right: auto; left: 10%;}
.questions .question.circleoptions .button.b7 {top: 50%; right: auto; left: 0; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%);}
.questions .question.circleoptions .button.b8 {top: 13%; right: auto; left: 10%;}

.questions .question.circleoptions.x5 .button.b2 {top: 25%; left: auto; right: 2%;}
.questions .question.circleoptions.x5 .button.b3 {top: 67%; left: auto; right: 11%; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none;}
.questions .question.circleoptions.x5 .button.b4 {top: 67%; left: 11%; right: auto;}
.questions .question.circleoptions.x5 .button.b5 {top: 25%; left: 2%; right: auto;}

.questions .question.circleoptions.x6 .button.b2 {top: 18%; left: auto; right: 5%;}
.questions .question.circleoptions.x6 .button.b3 {top: 58%; left: auto; right: 5%; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none;}
.questions .question.circleoptions.x6 .button.b4 {top: auto; bottom: 0; left: 0; right: 0; margin: 0 auto;}
.questions .question.circleoptions.x6 .button.b5 {top: 58%; left: 5%; right: auto;}
.questions .question.circleoptions.x6 .button.b6 {top: 18%; left: 5%; right: auto;}

.questions .question.circleoptions.x7 .button.b2 {top: 14%; left: auto; right: 7%;}
.questions .question.circleoptions.x7 .button.b3 {top: 47%; left: auto; right: 0%; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none;}
.questions .question.circleoptions.x7 .button.b4 {top: 75%; bottom: auto; left: auto; right: 23%;}
.questions .question.circleoptions.x7 .button.b5 {top: 71%; left: 16%; right: auto;}
.questions .question.circleoptions.x7 .button.b6 {top: 43%; left: 0%; right: auto;}
.questions .question.circleoptions.x7 .button.b7 {top: 23%; left: 7%; right: auto;}

.questions .question.statscreen .statistics {width: 100%; margin-left: 0; max-width: 800px; margin: 0 auto; padding: 40px 0;}
.questions .question.statscreen .statistics .statblock {padding: 20px 0 0 240px; position: relative;}
.questions .question.statscreen .statistics .statblock .stat {position: absolute; top: 50%; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); left: 0; width: 200px; margin: 0;}
.questions .question.statscreen .statistics .statblock h4 {text-transform: uppercase; font-family: "Nunito", sans-serif; letter-spacing: 1px; font-weight: 700; font-size: 120%; padding: 0 0 5px 0; color: #76b82a;}
.questions .question.statscreen .statistics .statblock .text span {display: inline; font-weight: 700; color: #76b82a; font-size: 120%;}
.questions .question.statscreen .statistics .stat p {font-size: 90%; padding: 10px 0;}
.questions .question.statscreen .statistics .stat p span {font-size: 268%; color: #76b82a;}
.questions .question.statscreen .statistics .stat .inner {padding: 35% 10px;}
.questions .question.statscreen .statistics .statblock .text {text-align: left;}
.questions .question.statscreen .statistics .statblock .text p {font-weight: 600; padding: 10px 0 20px 0;}

.questions h5 {padding: 20px 0;}

.questions .progressbar .buttons {position: absolute; top: 25px; right: 40px;}
.questions .progressbar .buttons .savebutton {padding: 7px 15px 5px 15px; font-size: 80%; background: #76b82a; border-radius: 5px; color: #ffffff; text-decoration: none; text-transform: uppercase; font-family: "Nunito", sans-serif; letter-spacing: 1px; font-weight: 700; cursor: pointer;}

.repeatablearea .content img {clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 1% 75%, 0 25%);}
.repeatablearea .content .inner {position: relative; padding: 0 0 0 350px; min-height: 337px;}
.repeatablearea .content .left {width: 300px; position: absolute; top: 0; left: 0;}
.repeatablearea .content .right {width: 100%;}
.repeatablearea.c2 .content .left {left: auto; right: 0;}
.repeatablearea.c2 .content .inner {padding: 0 350px 0 0;}
.repeatablearea .content h4 {line-height: 150%;}
.repeatablearea.c2 {background: #e9fbff;}

.progresspopup {background: rgb(37, 94, 106); background: -moz-linear-gradient(-45deg, rgba(37, 94, 106, 1) 0%, rgba(17, 42, 47, 1) 100%); background: -webkit-linear-gradient(-45deg, rgba(37, 94, 106, 1) 0%, rgba(17, 42, 47, 1) 100%); background: linear-gradient(135deg, rgba(37, 94, 106, 1) 0%, rgba(17, 42, 47, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#255e6a", endColorstr="#112a2f", GradientType=1); padding: 60px!important; width: 800px; text-align: center!important;}
.progresspopup h1, .progresspopup h2, .progresspopup h3 {font-size: 200%; color: #ffffff; padding: 0;}
.progresspopup h4 {color: #76b82a;}
.progresspopup h1, .progresspopup h2, .progresspopup h3, .progresspopup h4 {text-transform: uppercase; font-family: "Nunito", sans-serif; letter-spacing: 1px; font-weight: 700;}
.progresspopup span.name {color: #76b82a;}
.progresspopup p {color: #ffffff; font-family: "Open Sans", sans-serif; font-weight: 300; padding: 0 0 10px 0;}
.progresspopup input[type="email"] {font-size: 90%;}
.progresspopup p.seeformerrors {max-width: initial; font-size: 90%; font-weight: 700; line-height: 170%; color: #ff5757;}
.progresspopup p a {color: #ffffff; text-decoration: underline;}
.progresspopup .login {padding: 20px 0 0 0;}
#progresspopuploaded, #progresspopupsaved {width: 700px; text-align: center;}
.progresspopup .buttons {padding: 20px 0 0 0; text-align: center;}
.progresspopup .buttons .button {padding: 7px 15px 5px 15px; font-size: 80%; background: #76b82a; border-radius: 5px; color: #ffffff; text-decoration: none; text-transform: uppercase; font-family: "Nunito", sans-serif; letter-spacing: 1px; font-weight: 700; cursor: pointer; display: inline-block; margin: 0 5px;}
.progresspopup .smiles {max-width: 240px; font-size: 300%; color: #ffffff; margin: 20px auto;}
.progresspopup .smiles i {margin: 0 15px; box-shadow: 0 0 0 0 rgba(255, 255, 255, 1); border-radius: 50%; animation: smilePulse 2s infinite;}
.smiles i:hover {cursor: pointer;}
.smiles i.fa-frown.selected {color: #ff5454;}
.smiles i.fa-meh.selected {color: #fcff47;}
.smiles i.fa-grin-beam.selected {color: #9dfb31;}

@keyframes smilePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  
  50% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.connectmepopup {background: rgb(37, 94, 106); background: -moz-linear-gradient(-45deg, rgba(37, 94, 106, 1) 0%, rgba(17, 42, 47, 1) 100%); background: -webkit-linear-gradient(-45deg, rgba(37, 94, 106, 1) 0%, rgba(17, 42, 47, 1) 100%); background: linear-gradient(135deg, rgba(37, 94, 106, 1) 0%, rgba(17, 42, 47, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#255e6a", endColorstr="#112a2f", GradientType=1); padding: 60px!important; width: 800px;}
.connectmepopup h1, .connectmepopup h2, .connectmepopup h3 {font-size: 200%; color: #ffffff; padding: 0;}
.connectmepopup h1, .connectmepopup h2, .connectmepopup h3, .connectmepopup h4 {text-transform: uppercase; font-family: "Nunito", sans-serif; letter-spacing: 1px; font-weight: 700;}
.connectmepopup p, .connectmepopup label {color: #ffffff; font-family: "Open Sans", sans-serif; font-weight: 300; padding: 0 0 10px 0;}
.connectmepopup input[type="email"] {font-size: 90%;}
.connectmepopup p a {color: #ffffff; text-decoration: underline;}
.connectmeform {padding: 20px 0 0 0;}
.connectmeform p, .connectmeform label {font-size: 90%;}
.connectmeform label a {color: #ffffff; text-decoration: underline;}
.connectmeform p label {font-size: 100%;}
.connectmeform .checkboxes, .contactform .checkboxes {padding: 0 0 20px 0;}
.connectmeform .checkboxes .checkbox {display: block; float: left; width: 33.333%;}
.connectmepopup a.registerbutton {display: block; padding: 10px 15px; margin: 0 auto; width: fit-content; background: #76b82a; color: #ffffff; line-height: 100%; border-radius: 10px; font-family: "Nunito", sans-serif; font-weight: 700;}

.contactform p, .contactform label {font-size: 90%;}
.contactform .checkboxes .checkbox {padding: 5px 0 0 0;}

.footer-wrap {padding: 0 50px;}
.footer {max-width: 1280px; width: 100%; margin: 0 auto; padding: 50px 0;}
.footer h4, .footer p {color: #ffffff; padding: 0; line-height: 170%; font-size: 100%; font-weight: 300;}
.footer h4 {font-weight: 700; text-transform: none; font-family: "Open Sans", sans-serif;}
.footer a.logo {display: block; width: 224px; height: 106px; background: url(../images/svgs/logo.svg) no-repeat 0 0; background-size: 100%; position: absolute; top: 0; left: 0;}
.footer .inner {padding: 0 0 0 310px; position: relative;}
.footer .left, .footer .right {float: left; width: 45%;}
.footer .right {float: right;}
.footer .right a {color: #ffffff;}
.footer sup {color: #ffffff;}

.socialicons {margin: 5px 0 0 0;}
.socialicons a i {font-size: 170%; margin: 0 5px 0 0;}
.socialicons a:hover i {color: #75b72a;}

.mobile-header-wrap {display: none;}
.mobile-nav {display: none;}
.mobile-nav ul {margin: 0; padding: 0; width: 100%;}
.mobile-nav li {padding: 0; list-style: none; margin: 0; width: 100%;}
.mobile-nav li:before {display: none;}
.mobile-nav li a {color: #ffffff; text-decoration: none; background: #183a41; display: block; margin: 0 auto; padding: 15px; text-align: center;}
.mobile-nav li span {position: absolute; top: 0; right: 0; height: 51px; width: 51px; background: #20505a; text-align: center; line-height: 51px; color: #ffffff; font-size: 140%; font-family: "Open Sans", sans-serif;}
.mobile-nav li ul {padding: 14px 20px; background: #ffffff; display: none;}
.mobile-nav li.selected a {background: #76b82a;}

.pg3 .introbanner.innerintrobanner {min-height: 1px; height: auto;}
.pg3 .introbanner .content {max-width: 1280px; position: static; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; padding: 215px 0 50px 0;}
.pg3 .introbanner .images {top: 0; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none;}

.slideroptions .left {float: left; width: 20%!important; text-align: left;}
.slideroptions .right {float: right; width: 80%!important;}
.slideroptions .options {padding: 15px 0;}
.slideroptions .options .option {float: left; width: 33.333%; text-align: center; font-weight: 700; color: #000000; padding: 0; font-size: 90%;}
.slideroptions .options .option p {font-weight: 400; color: #000000; padding: 0; font-size: 85%;}
.slideroptions .options .option:first-child p {padding: 0 0 0 20px;}
.slideroptions .options .option:last-child p {padding: 0 20px 0 0;}
.slideroptions .section {padding: 5px 0 20px 0; border-top: 1px solid #9ab7bf;}
.slideroptions .section:first-child {border-top: 0;}
.slider {height: 3px; background: #3e8190; width: 62.6666%; position: relative; border-radius: 5px; margin: 0 auto; padding: 0 20px 0 0;}
.slider span {height: 0; background: #76b82a; width: 0; display: block; position: absolute; top: 50%; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); cursor: pointer; outline: none!important; z-index: 2;}
.slider span:after {width: 20px; height: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); border-radius: 5px; background: #76b82a; display: block; content: ""; visibility: visible;}
.slider .dots {position: absolute; top: -7px; left: 50%; transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0%); -moz-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); -o-transform: translate(-50%, 0%); width: 148.33%;}
.slider .dots .dot {width: 33.333%; float: left;}
.slider .dots .dot:after {width: 15px; height: 15px; border-radius: 50%; content: ""; visibility: visible; display: block; background: #3e8190; margin: 0 auto;}

.questions .question .slideroptions h4.subquestion {font-size: 100%; padding: 20px 0 0 0;}
.slideroptions.slider4opts .options .option, .slideroptions.slider4opts .slider .dots .dot {width: 25%;}
.slideroptions.slider4opts .slider .dots {width: 134%;}
.slideroptions.slider4opts .slider {width: 70%;}

@media screen and (max-width: 1240px){
  .introbanner h2, .introbanner h1, .introbanner h3 {font-size: 440%;}
}

@media screen and (max-width: 1140px) {
  .questions .question.circleoptions {max-width: 100%;}
}

@media screen and (max-width: 1070px){
  h2 {font-size: 220%;}

  .nav li {font-size: 100%;}
	
  .introbanner {min-height: 70vh;}
  .introbanner h2, .introbanner h1, .introbanner h3 {font-size: 350%;}
  .introbanner h4 {font-size: 110%;}
  .introbanner p {font-size: 100%; max-width: 360px;}

  .content .intro {max-width: 900px;}
  .content .intro p {font-size: 100%; max-width: 700px;}

  .features .feature {padding: 0 30%;}
  .features .feature .images {left: -14%;}
  .features .feature .images:last-child {right: -14%; left: auto;}

  .testimonials .testimonial p {font-size: 90%;}
  .testimonialssection .content .left {width: 55%;}
  .testimonialssection .content .right {width: 38%;}
  .testimonials h2 {font-size: 280%;}

  .benefits .benefit .image img {max-height: 80px;}

  .hexfeature h1, .hexfeature h2, .hexfeature h3, .hexfeature h4 {font-size: 130%;}
}

@media screen and (max-width: 1005px){
  .header-wrap {display: none;}

  .mobile-header-wrap {display: block; position: absolute; top: 0; left: 0; width: 100%; background: none; z-index: 10;}
  .mobile-header {padding: 20px 50px 10px 50px;}
  .mobile-header .left {float: left; width: 180px;}
  .mobile-header .right {float: right;}
  .mobile-header p {padding: 0 0 10px 0;}
  .mobile-header .blockbutton a {margin: 0 0 0 5px; font-size: 70%; padding: 5px 10px;}
  .mobile-header a.logo {display: block; width: 100%; height: 84px; background: url(../images/svgs/logo.svg) no-repeat 0 0; background-size: 100%;}

  .mobile-header .nav-icon {width: 27px; height: 20px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer; float: right; margin: 20px 0 0 0;}
  .mobile-header .nav-icon span {display: block; position: absolute; height: 1px; width: 100%; background: #ffffff; border-radius: 0; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out;}
  .mobile-header .nav-icon span:nth-child(1) {top: 0;}
  .mobile-header .nav-icon span:nth-child(2), .mobile-header .nav-icon span:nth-child(3) {top: 7px;}
  .mobile-header .nav-icon span:nth-child(4) {top: 14px;}
  .mobile-header .open .nav-icon span:nth-child(1) {top: 21px; width: 0%; left: 50%;}
  .mobile-header .open .nav-icon span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
  .mobile-header .open .nav-icon span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
  .mobile-header .open .nav-icon span:nth-child(4) {top: 18px; width: 0%; left: 50%;}

  .content-wrap.faded {opacity: 0.6;}
}

@media screen and (max-width: 980px){
  .questions .question.circleoptions .button span {font-size: 80%;}
  .questions .question.circleoptions p {font-size: 80%;}
  .questions .question.circleoptions .inner .innerinner .block h4 {font-size: 110%;}
}

@media screen and (max-width: 910px){
  .introbanner {min-height: 580px; height: 80vh;}
  .benefits .benefit {width: 45%; margin: 0 0 0 3%;}
}

@media screen and (max-width: 890px){
  .introbanner .blockbutton a {margin: 0 0 10px 0;}

  .questions .question.circleoptions .button span {font-size: 70%;}
  .questions .question.circleoptions .inner {width: 100%; padding-bottom: 100%;}

  .arrowbutton {font-size: 90%;}

  .introbanner h2, .introbanner h1, .introbanner h3 {font-size: 300%;}
  .introbanner {height: 60vh; min-height: 500px;}

  .testimonialssection .content .left {width: 100%; float: none; box-sizing: border-box; padding: 0 50px 0 0;}
  .testimonialssection .content .right {max-width: 300px; width: 100%; margin: 0 auto; float: none; padding: 20px 0 0 0;}

  .content {padding: 50px 0;}

  .home .content .left, .home .content .right, .statisticssection.halves .content .left, .statisticssection.halves .content .right {width: 100%;}

  .benefits {padding: 20px 0 0 0;}
  .benefits .benefit {padding: 0 5px;}

  .footer a.logo {width: 150px; height: 70px;}
  .footer .inner {padding: 0 0 0 200px;}
  .footer .left, .footer .right {float: none; width: 100%;}
  .footer .left {padding: 0 0 20px 0;}
}

@media screen and (max-width: 760px){
  .introbanner {height: 70vh;}

  .questions .question.circleoptions {text-align: center;}
  .questions .question.circleoptions .inner {height: auto; padding-bottom: 0;}
  .questions .question.circleoptions .inner .innerinner {position: relative; padding-bottom: 0; width: 70%; padding-bottom: 70%; top: 0; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; margin-bottom: 30px;}
  .questions .question.circleoptions .button {vertical-align: top; width: 31%; padding-bottom: 31%; margin: 0 1% 2% 1%; float: none; display: inline-block; position: relative; top: auto!important; left: auto!important; right: auto!important; transform: none!important; -webkit-transform: none!important; -moz-transform: none!important; -ms-transform: none!important; -o-transform: none!important;}

  .blogfeed {width: 100%; margin-left: 0;}
  .blogfeed .post {width: 100%; margin: 0 0 20px 0;}

  .progresspopup {width: 100%;}
}

@media screen and (max-width: 700px){
  h2 {font-size: 180%;}
  p, li, label, .introbanner p, .content .intro p {font-size: 90%;}
  p label {font-size: 100%;}
  .largertext {font-size: 110%!important;}

  .form .row.thirds, .form .row.halves {width: 100%; margin-left: 0;}
  .form .row.thirds .input, .form .row.halves .input {float: none; width: 100%; margin: 0;}

  .mobile-header {padding: 20px 25px;}
  .mobile-header .left {float: left; width: 120px;}
  .mobile-header a.logo {height: 60px;}

  .snav li {font-size: 90%;}
  .snav li a {padding: 10px 15px;}

  .content-wrap {padding: 0 25px;}
  .content .left, .content .right, .halves .content .left, .halves .content .right {width: 100%; float: none;}
  .halves .content .leftthree, .halves .content .rightone, .halves .content .leftone, .halves .content .rightthree {float: none; width: 100%;}

  .progresspopu, #progresspopuploaded, #progresspopupsavedp {width: 100%;}

  .introbanner, .introbanner.innerintrobanner {padding: 0; height: auto; min-height: 0;}
  .introbanner .content, .pg3 .introbanner .content {padding: 0 25px; padding-top: 120px; padding-bottom: 60px;}
  .introbanner .content, .pg3 .introbanner .content {position: static; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none;}
  .introbanner .content .left {width: 100%; padding: 0 0 10px 0;}
  .introbanner .content .right {width: 100%;}
  .introbanner h2, .introbanner h1, .introbanner h3 {font-size: 240%;}
  .introbanner h4 {font-size: 115%;}
  .introbanner .images, .introbanner.innerintrobanner .images {position: static; width: 50%; margin: 0 auto; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none;}
  .introbanner p.blockbutton span {margin: 0 0 0 5px;}

  .pg5 .introbanner .content .left, .pg5 .introbanner .content .right {width: 100%;}

  .myaccountsection .introbanner .content .right {width: 100%;}

  .testimonialssection .content .left {padding: 0;}
  .testimonials {padding: 0 0 20px 0;}

  .benefits .benefit {padding: 40px 0 0 0; width: 100%;}
  .benefits .benefit:first-child {padding: 0;}
  .benefits .benefit h4 {font-size: 110%;}

  .featurebuttons {width: 100%; margin-left: 0; padding: 0;}
  .featurebuttons .button {float: none; width: 100%; margin: 0 0 20px 0; padding: 30px;}
  .featurebuttons .button img {max-height: 120px;}
  .featurebuttons .button h4 {font-size: 130%;}
  .featurebuttons .button p {font-size: 80%;}

  .smallbenefits {padding: 0;}
  .smallbenefits .benefit {float: none; max-width: 280px; margin: 0 auto; width: 100%; padding: 0 0 20px 0;}
  .smallbenefits .benefit h4 {font-size: 100%; padding: 0;}
  .smallbenefits .benefit img {max-height: 100px;}

  .accountsimplesteps {padding: 0;}
  .accountsimplesteps .benefit {float: none; max-width: 280px; margin: 0 auto; width: 100%; padding: 0 0 20px 0;}
  .accountsimplesteps .benefit h4 {font-size: 100%; padding: 15px;}
  .accountsimplesteps .benefit img {max-height: 100px;}

  .questions .question h4 {font-size: 100%;}
  .questions .question h5 {font-size: 70%;}
  .questions .question .buttons .button p, .questions .question .optionsgrid th, .questions .question .optionsgrid td {font-size: 90%;}
  .questions .question p {font-size: 80%;}

  .slideroptions .left {width: 100%!important; text-align: left;}
  .slideroptions .right {width: 100%!important;}

  .recommendations .recommendation {padding: 15px;}
  .recommendations .recommendation p {font-size: 80%; font-weight: 500;}

  .repeatablearea .content .inner {padding: 0; min-height: 1px;}
  .repeatablearea .content .left {position: static; width: 100%;}

  #progresspopuploaded, #progresspopupsaved {width: 100%;}
  .progresspopup {padding: 30px!important;}

  .statistics {width: 100%; margin-left: 0;}
  .statistics .stat {width: 100%; max-width: 250px; margin: 30px auto 0 auto; float: none;}
  .statistics .stat:first-child {margin: 0 auto;}

  .footer-wrap {padding: 0 25px;}
  .footer a.logo {position: static;}
  .footer p, .footer h4 {font-size: 90%;}
  .footer .inner {padding: 0;}
  .footer .left {padding: 20px 0;}
}

@media screen and (max-width: 580px){
  .questions .question.circleoptions .button {width: 48%; padding-bottom: 48%;}
  .questions .question.circleoptions .inner .innerinner {background: none; width: 100%; height: auto; padding-bottom: 0; margin-bottom: 10px;}
  .questions .question.circleoptions .inner .innerinner .block {position: static; width: 100%; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none;}
  .questions .question.circleoptions .inner .innerinner .block p, .questions .question.circleoptions .inner .innerinner .block h4 {color: #000000;}

  .introbanner p.blockbutton a, .introbanner p.blockbutton span {width: 100%; margin: 5px 0 0 0;}

  .questions .questionnav {padding: 20px 0 0 0;}
  .questions .questionnav p.prev {float: none; text-align: center;}
  .questions .questionnav p.next {float: none; text-align: center; margin: 0 0 0 23px;}
  .arrowbutton a:after {right: -7px;}

  .questions .progressbar {padding: 0 0 30px 0;}
  .questions .question {max-width: 100%;}
  .questions .question.statscreen .statistics .statblock {padding: 0;}
  .questions .question.statscreen .statistics .statblock .stat {position: relative; top: none; transform: none; -webkit-transform: none; left: none; margin: 0 auto;}
  .questions .question.statscreen .statistics .statblock .text {margin: 40px 0 0 0;}

  .testimonials h2 {font-size: 200%;}

  /* .mobile-header .blockbutton a {margin: 0 0 0 5px; padding: 5px 10px; width: auto;} */
}

@media screen and (max-width: 375px){
  .mobile-header {padding: 20px 25px 10px 25px;}
  .mobile-header .blockbutton {padding: 0 0 15px 0; display: inline;}
  .mobile-header .blockbutton a {padding: 1px 5px 0 5px;}
  .mobile-header .nav-icon {margin: 7px 0 0 0;}

  .mobile-header .left {display: block; margin: 0 auto; float: none;}
  .mobile-header .right {width: 100%; float: left; margin: 5px 0 0 0;}

  .questions .progressbar .buttons {position: static;}
  .questions .progressbar .buttons .savebutton {text-align: center;}
  .questions .progressbar p {padding: 10px 0;}
  .arrowbutton.opp a {padding: 0 0 0 25px;}
  .questions .question.circleoptions .button {width: 100%; padding: 50px 0; border-radius: 18px;}
}

@media print {
  * {-webkit-print-color-adjust: exact;}
  body {font-size: 12pt; font-family: arial, serif; line-height: 140%;}
  .see-cms-toolbar {display: none!important;}
}