/* 
/*  custom.css
/*
/*  If not using Gulp and Sass, add your custom CSS below then include it in your page by adding a reference to assets/css/custom.css in the head of each page.
/*
*/
html {
	scroll-behavior: smooth;
}

#navigation-menu .nav-item {
	align-items: center;
	display: flex;
}
#navigation-menu .nav-item.button {
	margin-left: auto;
}
@media screen and (max-width: 768px) {
	#navigation-menu .nav-item {
		display: list-item;
	}
	#navigation-menu .nav-item.button {
		margin-left: inherit;
	}
}
@media screen and (max-width: 991px) and (min-width: 768px) {
	#navigation-menu .nav-item .nav-link {
		font-size: 0.8rem;
	}
}

nav.navbar ul.navbar-nav li.nav-item a:hover:not(.btn) {
	border-bottom: 2px solid #75be26;
	padding-bottom: 6px;
}

.nav-link {
	transition: none;
}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
	color: #000;
}

a#loginButton:hover {
	background-color: rgba(0, 155, 114, 0.2);
	color: #009b72;
}

#hero-container {
	margin-bottom: 5px;
	color: #2C3038;
}

#hero-title-left {
	font-size: 85px;
	font-weight: 700;
	margin-right: 25px;
}

@media screen and (max-width: 500px) {
	#hero-title-left {
		font-size: 65px;
	}
	#hero-container {
		margin-bottom: 10px;
	}
}
@media screen and (max-width: 409px) {
	#hero-title-left {
		width: 100%;
		margin-right: 0;
	}
	#hero-title-right-container {
		width: 100%;
	}
	#hero-title-right {
		text-align: center !important;
	}
}

#hero-title-right {
	display: flex;
	justify-content: center;
	flex-direction: column;
	font-size: 22px;
	font-weight: 400;
	text-align: left !important;
}

.slick-next::before,
.slick-prev::before {
	color: #727272;
}

.slick-slide {
	margin-right: 80px;
}
.slick-slide img {
	height: 65px;
}

@media screen and (max-width: 500px) {
	.slick-slide img {
		height: 40px;
	}
}
@media screen and (max-width: 595px) {
	#carouselContainer {
		padding-left: 25px;
		padding-right: 25px;
	}
}

#faq-accordion .card > [data-toggle="collapse"][aria-expanded="true"] h6,
#faq-accordion .card > [data-toggle="collapse"][aria-expanded="false"]:hover h6 {
	color: #242424;
}

.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1021;
}

.navbar-container {
	background-color: white;
}

a#monthly-tab:hover:not(.active),
a#yearly-tab:hover:not(.active) {
	/*text-decoration: underline;*/
	background-color: #e5f5f1;
	color: #192d35;
}

.section {
	scroll-margin-top: 7em;
}

/** For the blog **/
img.flex-fill {
	object-fit: contain;
}

#blog-posts-section a.more-link {
	display: block;
	margin-top: 20px;
}

#blog-posts-section .lead {
	font-size: 1.15rem;
}


#blog-posts-section img.flex-fill {
	max-height: 350px;
	max-width: 350px;
}

.comment ol.children {
	list-style: none;
	padding-left: 0;
}

.required-field {
	color: red;
	font-size: 10px;
	vertical-align: super;
}

#commentform.comment-form .form-submit {
	display: flex;
	justify-content: flex-end;
}

.article-comments {
	margin-bottom: 4rem !important;
}

.has-error input {
	 border: 1px solid red;
 }

.help-block-error {
	color: red;
}

.survey-tip {
	margin-bottom: 25px;
	text-align: center;
}

.survey-tip img {
	max-width: 100%;
	height: auto;
}

ul.employee-list,
ul.education-list,
ul.event-list {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

li.check {
	background-repeat: no-repeat;
	background-position: left top;
	background-image: url('/home/assets/img/icons/misc/check.svg');
	height: 34px;
	padding-left: 30px;
}

#signup input[type="number"] {
	-moz-appearance: textfield;
}

#signup-form .payment_info #card-element.StripeElement {
	padding: 10px 5px 10px 5px;
	padding-top: 13px;
	border: 1px solid #EAEDF2;
	border-radius: 0.1875rem;
	height: calc(1.5em + 1.375rem + 2px);
}

#signup #totalAmountCharged {
	font-weight: bold;
}

#signup #amountChargedParent {
	height: calc(1.5em + 1.375rem + 2px);
}

.paymentForm .custom-checkbox input.error:not(:checked) + .custom-control-label {
	border-bottom: 2px solid rgb(255, 0, 0);
}

#signup #login-form .custom-checkbox input#tos_agreement.error:not(:checked) + .custom-control-label::after,
.paymentForm .custom-checkbox input.error:not(:checked) + .custom-control-label::after {
	background: none repeat scroll 0 0 rgba(255, 71, 61, 0.2);
	border: 2px solid #CC0000;
}

/** Wordpress stuff **/
.lazy-load{
	transition:opacity .15s;
	opacity:0;
}

.lazy-load.is-loaded{
	opacity:1;
}

.lazy-load[data-loaded=true]{
	opacity:1;
}

.article img[class*=wp-image-]{
	max-width:100%;
	height:auto;
}

body#blogpost section {
	font-size: 1.1rem;
}

@media (max-width: 992px) {
	li.check {
		font-size: 15px;
	}
}

/** Pricing Page **/
#account_plan .pricingRow {
	margin-bottom: 10px;
}

#account_plan .pricingRow label.custom-control-label {
	width: 100%;
	padding-top: 5px;
	padding-left: 30px;
	margin-left: -30px;
}

#account_plan .pricingRow label.custom-control-label::before,
#account_plan .pricingRow label.custom-control-label::after {
	margin-left: 30px;
	top: 7px;
}

#account_plan .pricingRow label.custom-control-label:hover {
	background-color: #ffffb2;
}

#account_plan h5 {
	margin-bottom: 5px;
}

.paymentForm #account_plan .col-md,
.paymentForm #account_plan .col-md-2,
.paymentForm #account_plan .col-md-4 {
    padding-right: 2px;
    padding-left: 2px;
}

.paymentForm #account_plan {
    font-size: 0.9rem;
}

#signup-form.paymentForm #card-element.StripeElement.StripeElement--invalid {
	border-color: red;
	border-width: 2px;
}

#signup-form.paymentForm #card-errors {
	color: #f90f1a;
	font-weight: bold;
	margin-top: 10px;
}