@charset "utf-8";
/* CSS Document */

body {
	color: #51626f !important;
}
#top-menu .navbar, #top-menu .nav-dropdown-sm, #top-menu .nav-dropdown-sm .link[aria-expanded="true"], #top-menu .nav-dropdown-sm .dropdown-menu {
	background: #16181f !important;
	opacity: 0.9;
}
.mbr-arrow a {
	background: transparent; /* changed KKJ *//*    border-radius: 10px;	*/
}
.mbr-arrow-floating .mbr-arrow-icon {
	-webkit-animation: floating-arrow 1s infinite ease-in-out 0s; /* KKJ changed speed from 1.6 */
	animation: floating-arrow 1s infinite ease-in-out 0s; /* KKJ changed speed from 1.6 */
}
.mbr-arrow-icon::before {
	font-family: lato; /* KKJ changed from Serif */
	font-weight: 100; /* KKJ added */
	font-size: 72px; /* KKJ changed from 32px */
}
.mbr-arrow a:hover {
	background: transparent;
} /* KKJ Changed from dark */
.mbr-section-title {
	margin-bottom: 2.2rem !important; /* KKJ forced space below H1 title */
}
.display-1 {
	font-size: 4.125rem; /* KKJ changed to match 66px height in intro section - not only used in intro but all sub sections */
	font-weight: 300; /* KKJ overwrite default 600 */
}
#intro .display-4 {
	font-size: 2.2rem; /* KKJ changed to match 36px */
	font-weight: 400; /* changed to Regular */
}

@media (max-width: 767px) {
#intro .display-4 {
	font-size: 2.2rem !important; /* KKJ changed to control H2 subtitle on small resolution where it is bigger than H1 */
}
}
p.lead, .lead p, ul.lead {
	margin-bottom: 3rem; /* KKJ add more spacing */
	font-size: 1.5rem !important;   /* KKJ added to overwrite default 1.25 */
	line-height: 1.25 !IMPORTANT;	/* KKJ changed from 1.5 */
}
ul.lead li {
	margin-bottom: 1rem; /* KKJ add more spacing */
	font-size: 1.5rem !important;   /* KKJ added to overwrite default 1.25 */
	line-height: 1 !IMPORTANT;	/* KKJ changed from 1.5 */
}
/* force larger than default paragraph font size for all sections with cards */
#imagine-body P,  #how-it-works-body P,  #other-benefits-body P {
	font-size: 1.25rem;
	line-height: 1.5rem;
	letter-spacing: -0.05rem;
}
.dhi-card {
	padding-top: 80px;
	padding-bottom: 120px;
	padding-left: 1rem;
	padding-right: 1rem;
}
.card-title {
	padding-bottom: 1rem;
	min-height: 6.5rem;
}
.card-text {
	padding-bottom: 1rem;
}
.card-img {
	padding-bottom: 2rem;
}

@media (max-width: 991px) and (min-width: 320px) {
.card-title {
	min-height: 2rem;
}
.dhi-card {
	padding-top: 40px;
	padding-bottom: 60px;
	padding-left: 1rem;
	padding-right: 1rem;
}
}

/* position CT logo correct in card */
@media (max-width: 767px) {
.logo {
	position: relative;
	top: 0 !IMPORTANT;
	padding-top: 4rem;
	padding-bottom: 4rem;
}
}

@media (min-width: 768px) {
.logo {
	position: relative;
	padding-top: 4rem;
	padding-bottom: 4rem;
}
}

@media (min-width: 992px) {
.logo {
	position: relative;
	top: -20rem !important;
}
}

@media (min-width: 1200px) {
.logo {
	position: relative;
	top: -6em !important;
}
}
/* the 2 above might clash */
.ct-avatar {
	padding-bottom: 1rem;
}
.formblock form {
	border-radius: 12px;
}
.btn-primary {
	background-color: #61c250;
	border-color: #61c250;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active {
	background-color: #474747;
	border-color: #474747;
}
.btn {
	font-family: Lato, sans-serif;
	font-weight: 400;
	letter-spacing: 1px;
	padding: 0.65rem 1.875rem;
	font-size: 1.1rem;
	line-height: 1.2;
	border-radius: 25px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

@media (max-width: 767px) {
#cta-arrow {
	display: none;
}
}

/* overwrite CTA left column padding-right */
@media (min-width: 768px) {
.mbr-right-padding-md-up {
	padding-right: 40px;
}
}
.alert-success {
	background-color: #0098db;
}
 #cta input::-webkit-input-placeholder {
 color: #0098db !important;
}
 #cta input:-moz-placeholder { /* Firefox 18- */
 color: #0098db !important;
}
 #cta input::-moz-placeholder {  /* Firefox 19+ */
 color: #0098db !important;
}
 #cta input:-ms-input-placeholder {
 color: #0098db !important;
}
 #cta select::-webkit-input-placeholder {
 color: #0098db !important;
}
 #cta select:-moz-placeholder { /* Firefox 18- */
 color: #0098db !important;
}
 #cta select::-moz-placeholder {  /* Firefox 19+ */
 color: #0098db !important;
}
 #cta select:-ms-input-placeholder {
 color: #0098db !important;
}
#other-benefits .mbr-section-title {
	color: #fff;
}
#other-benefits .mbr-section-title,  #other-benefits p {
	color: #fff;
}
#contact-button {
	position: fixed;
	bottom: 0;
	right: 0;
	display: block;
	z-index: 1040;

} /* modal index is 1050 so we want the contact button behind */
#contact-button h1 {
	margin-bottom: 0;
	padding-bottom: 0;
}
#contact-button a {
	margin-bottom: 0;
}
.btn-contact {
	background-color: rgba(0, 152, 219, 0.5);
	border: 0;
	color: #ffffff;
}
.btn-contact:hover, .btn-contact:focus, .btn-contact.focus, .btn-contact:active, .btn-contact.active {
	background-color: rgba(0, 0, 0, 0.72);
	border: 0;
	color: white;
}

@media (max-width: 991px) {
#contact-button {
	display: none !important;
}
}
/* remove blue outline on links */
a:focus {
	outline: 0 !IMPORTANT;
}
/* footer reuse from dhigroup.com */
.footer-bottom .footer-logo {
}
.footer-summary {
	font-size: 11px;
	line-height: 15px;
}
.modal-backdrop {
	background: #000000;
	opacity: 1;
}
.vertical-alignment-helper {
	display: table;
	height: 100%;
	width: 100%;
	pointer-events: none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
	/* To center vertically */
	display: table-cell;
	vertical-align: middle;
	pointer-events: none;
}
.modal-content-cta {
	/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
	width: inherit;
	height: inherit;
	/* To center horizontally */
	margin: 0 auto;
	pointer-events: all;
}

#ctaReminder {
	z-index: 1049;  /* default modal z-index is 1050 and contact button is 1040 */
}

#ctaReminder .close:focus, #ctaReminder .close:hover {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	opacity: .9;
}
#ctaReminder button.close {
	padding: 0;
	cursor: pointer;
	background: 0 0;
	border: 0;
	-webkit-appearance: none;
}
#ctaReminder .close {
	float: right;
	font-size: 1.5rem;
	line-height: 1;
	color: #fff;
	text-shadow: 0 !important;
	opacity: .5;
}

/* styling the contact modal pop-up */
#myModal-title .modal-header {
    border-bottom: 0 !important;
}

#myModal-title .modal-body {
    padding: 15px;
}

#myModal-title .modal-footer {
	display: none;
}


/* START new styling for WA */
#intro .display-4 {
    font-size: 2rem;
}
/* imagine */
.card-title {
    min-height: 4rem;
}

	@media (min-width: 1200px) {
.logo {
    position: relative;
    top: 0 !important;
}
}

	@media (min-width: 992px) {
.logo {
    position: relative;
    top: 0 !important;
}
}

	@media (min-width: 768px) {
.logo {
    padding-bottom: 0rem;
}
}

	@media (max-width: 767px) {
.logo {
    padding-bottom: 0rem;
}
}

ul.ctalist li {
    font-size: 1.10rem !important;
}
#testimonial p.cta-author {
    font-size: 1.25rem !important;
    line-height: 1.5rem;
    letter-spacing: -0.05rem;
}
.mbr-cards-col {
    padding-bottom: 40px !important;
}

#how-it-works-body .card-title {
    min-height: 1rem !important;
}

#how-it-works-body .dhi-card {
    padding-top: 10px !important;
}

.mbr-gallery .mbr-slider .carousel-inner > .active {
	text-align: left;
}

#lb-gallery1-b .carousel-inner {
	color: white;
    background-color: #000 !important;
}

/* END new styling for WA */