/*  MICROTHEMER STYLES  */

/*= Animations ================ */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


/*= General =================== */

/** General >> Web care image **/
#web-care-image {
	
}
#web-care-image.mt-inview_once {
	/* MT [ sub: 1 | group: animation | event: 1 ] */
	-webkit-animation-name: fadeIn !important;
	animation-name: fadeIn !important;
	-webkit-animation-duration: 4.0s !important;
	animation-duration: 4.0s !important;
}

/** General >> Inspiration image image **/
#inspiration-image img {
	-webkit-animation-name: zoomIn !important;
	animation-name: zoomIn !important;
	-webkit-animation-duration: 3s !important;
	animation-duration: 3s !important;
	-webkit-animation-timing-function: ease-in-out !important;
	animation-timing-function: ease-in-out !important;
}

/** General >> Portfolio hero image fadein animation wp image 2226 **/
#portfolio-hero-image-fadein-animation .wp-image-2226 {
	
}
#portfolio-hero-image-fadein-animation .wp-image-2226.mt-inview_once {
	/* MT [ sub: 1 | group: animation | event: 1 ] */
	-webkit-animation-name: fadeInUp !important;
	animation-name: fadeInUp !important;
	-webkit-animation-duration: 1.5s !important;
	animation-duration: 1.5s !important;
	-webkit-animation-timing-function: ease-out !important;
	animation-timing-function: ease-out !important;
	-webkit-animation-fill-mode: both !important;
	animation-fill-mode: both !important;
}

/** General >> Pricing Table - Style Standard column **/
#standard-column {
	z-index: 10 !important;
}

/** General >> Pricing Table - Style Essentials Column **/
#Essentials-column {
	position: relative !important;
	z-index: 20 !important;
}

/** General >> Pricing Table - Style Elite column **/
#elite-column {
	z-index: 13 !important;
}

/** General >> Add class .fade-in to Fade in Images **/
.fade-in .pp-photo-img.mt-inview_once {
	
}
.fade-in .pp-photo-img.mt-inview_once.mt-inview_once {
	/* MT [ sub: 1 | group: animation | event: 1 ] */
	-webkit-animation-name: zoomIn !important;
	animation-name: zoomIn !important;
	-webkit-animation-duration: 2s !important;
	animation-duration: 2s !important;
	-webkit-animation-fill-mode: forwards !important;
	animation-fill-mode: forwards !important;
}

/** General >> Add Transition to PP Modal Popup buttons **/
.pp-modal-trigger {
	-webkit-transition: All 0.3s !important;
	transition: All 0.3s !important;
}

/** General >> Sticky - Make columns sticky using class .sticky-element **/
.sticky-element {
	position: -webkit-sticky !important;
	Position: sticky !important;
}
Body {
	overflow-x: visible !important;
}

/** General >> Testimonials - Increase size of arrows in testimonial slider **/
.compact .fa {
	font-size: 50px !important;
	-webkit-transition: All 0.2s !important;
	transition: All 0.2s !important;
}
.compact .fa:hover {
	/* MT [ sub: 1 ] */
	color: #02A9F2 !important;
}

/** General >> Add class .gradient border to give a column a gradient border **/
.gradient-border .fl-col-content {
	background-repeat: no-repeat !important;
	box-sizing: border-box !important;
	border-right: 15px solid #00506D !important;
	border-left: 15px solid #38AACE !important;
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	background-position: 0 0, 0 100% !important;
	-webkit-background-size: 100% 20px !important;
	-moz-background-size: 100% 20px !important;
	background-image: -webkit-linear-gradient(left, #38AACE 0%, #00506D 100%), -webkit-linear-gradient(left, #38AACE 0%, #00506D 100%) !important;
	background-image: -moz-linear-gradient(left, #38AACE 0%, #00506D 100%), -moz-linear-gradient(left, #38AACE 0%, #00506D 100%) !important;
	background-image: -o-linear-gradient(left, #38AACE 0%, #00506D 100%), -o-linear-gradient(left, #38AACE 0%, #00506D 100%) !important;
	background-image: linear-gradient(to right, #38AACE 0%, #00506D 100%), linear-gradient(to right, #38AACE 0%, #00506D 100%) !important;
}

/** General >> Reviews page - Styling for Sale Corner Ribbon on pricing chart **/
.box-1 {
	width: 90% !important;
	max-width: 600px !important;
	position: relative !important;
}
.ribbon {
	/* MT [ sub: 1 ] */
	width: 150px !important;
	height: 150px !important;
	position: absolute !important;
	overflow: hidden !important;
	right: -5px !important;
	top: -5px !important;
}
.ribbon span {
	/* MT [ sub: 1 ] */
	position: absolute !important;
	display: block !important;
	width: 225px !important;
	padding: 15px 0 !important;
	background: #E30001 !important;
	background: linear-gradient(#E30001 0%, #c20202 100%) !important;
	box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1) !important;
	color: #fff !important;
	font: 700 18px/1 'Lato', sans-serif !important;
	text-shadow: 0 1px 1px rgba(0,0,0,.2) !important;
	text-transform: uppercase !important;
	text-align: center !important;
}
.ribbon::before, 
.ribbon::after {
	/* MT [ sub: 1 ] */
	position: absolute !important;
	z-index: -1 !important;
	content: '' !important;
	display: block !important;
	border: 5px solid #2980b9 !important;
}
.ribbon-top-left {
	/* MT [ sub: 1 ] */
	top: -10px !important;
	left: -10px !important;
}
.ribbon-top-left::before, 
.ribbon-top-left::after {
	/* MT [ sub: 1 ] */
	border-top-color: transparent !important;
	border-left-color: transparent !important;
}
.ribbon-top-left::before {
	/* MT [ sub: 1 ] */
	top: 0 !important;
	right: 0 !important;
}
.ribbon-top-left::after {
	/* MT [ sub: 1 ] */
	bottom: 0 !important;
	left: 0 !important;
}
.ribbon-top-left span {
	/* MT [ sub: 1 ] */
	right: -25px !important;
	top: 30px !important;
	transform: rotate(-45deg) !important;
}
.ribbon-top-right {
	/* MT [ sub: 1 ] */
	top: -10px !important;
	right: -10px !important;
}
.ribbon-top-right::before, 
.ribbon-top-right::after {
	/* MT [ sub: 1 ] */
	border-top-color: transparent !important;
	border-right-color: transparent !important;
}
.ribbon-top-right::before {
	/* MT [ sub: 1 ] */
	top: 0 !important;
	left: 0 !important;
}
.ribbon-top-right::after {
	/* MT [ sub: 1 ] */
	bottom: 0 !important;
	right: 0 !important;
}
.ribbon-top-right span {
	/* MT [ sub: 1 ] */
	left: -25px !important;
	top: 30px !important;
	transform: rotate(45deg) !important;
}
.ribbon-bottom-left {
	/* MT [ sub: 1 ] */
	bottom: -10px !important;
	left: -10px !important;
}
.ribbon-bottom-left::before, 
.ribbon-bottom-left::after {
	/* MT [ sub: 1 ] */
	border-bottom-color: transparent !important;
	border-left-color: transparent !important;
}
.ribbon-bottom-left::before {
	/* MT [ sub: 1 ] */
	bottom: 0 !important;
	right: 0 !important;
}
.ribbon-bottom-left::after {
	/* MT [ sub: 1 ] */
	top: 0 !important;
	left: 0 !important;
}
.ribbon-bottom-left span {
	/* MT [ sub: 1 ] */
	right: -25px !important;
	bottom: 30px !important;
	transform: rotate(225deg) !important;
}
.ribbon-bottom-right {
	/* MT [ sub: 1 ] */
	bottom: -10px !important;
	right: -10px !important;
}
.ribbon-bottom-right::before, 
.ribbon-bottom-right::after {
	/* MT [ sub: 1 ] */
	border-bottom-color: transparent !important;
	border-right-color: transparent !important;
}
.ribbon-bottom-right::before {
	/* MT [ sub: 1 ] */
	bottom: 0 !important;
	left: 0 !important;
}
.ribbon-bottom-right::after {
	/* MT [ sub: 1 ] */
	top: 0 !important;
	right: 0 !important;
}
.ribbon-bottom-right span {
	/* MT [ sub: 1 ] */
	left: -25px !important;
	bottom: 30px !important;
	transform: rotate(-225deg) !important;
}

/** General >> Add transition to UABB login form button **/
.pp-login-form--button {
	-webkit-transition: All 0.3s !important;
	transition: All 0.3s !important;
}
.uabb-lf-submit-button {
	-webkit-transition: All 0.3s !important;
	transition: All 0.3s !important;
}

/** General >> Add transition to social icons **/
.pp-social-icon {
	-webkit-transition: All 0.3s !important;
	transition: All 0.3s !important;
}

/** General >> Highlighted text - Add highlight and increase wight of Strong text **/
p strong {
	background-color: rgb(232, 244, 255) !important;
	padding: 1px 5px 1px 5px !important;
	border-radius: 5px !important;
}
.dark-highlight p strong {
	background-color: rgb(40, 101, 157) !important;
	padding: 1px 5px 1px 5px !important;
	border-radius: 5px !important;
	color: #ffffff !important;
}
.no-highlight p strong {
	background-color: rgb(0, 0, 0, 0) !important;
	padding: 0px !important;
	border-radius: 5px !important;
}

/** General >> Align elements to bottom of column with .aligh-bottom **/
.align-bottom {
	-webkit-align-content: flex-end !important;
	align-content: flex-end !important;
	display: grid !important;
	-webkit-flex: 1 0 !important;
	flex: 1 0 !important;
}

/** General >> increase z-index to 9 with .increase-z-index **/
.increase-z-index {
	z-index: 9 !important;
}

/** General >> Style tooltips **/
.qtip-content {
	font-size: 18px !important;
	Line-height: 1.2 !important;
	Padding: 15px !important;
}

/** General >> Increase z-index with .df-increase-zindex **/
.df-increase-zindex {
	z-index: 10 !important;
}

/** General >> Home - Add height to star images **/
.df-rating-style .uabb-image-content .uabb-photo-img {
	height: 20px !important;
}

/** General >> Tooltips - Style tooltips **/
.tooltipsall {
	border-bottom-width: medium !important;
	border-bottom-style: none !important;
}

/** General >> Reviews Grid - Style Load More button **/
.wpsr-reviews-loadmore > span {
	padding: 15px 35px 15px 35px !important;
	border-radius: 0 !important;
	-webkit-transition: 0.3s !important;
	transition: 0.3s !important;
}


/*= Blog ====================== */

/** Blog >> Blog post - Styling for titles **/
.df-blog-post h2 {
	font-size: 35px !important;
	line-height: 1.2 !important;
}
.df-blog-post h3 {
	font-size: 30px !important;
	line-height: 1.2 !important;
}
.df-blog-post h4 {
	font-size: 24px !important;
	line-height: 1.2 !important;
}

/** Blog >> Blog post - Styling for block quotes **/
.df-blog-post .wp-block-quote {
	background-color: #ECF6FF !important;
	padding: 20px !important;
}

/** Blog >> Style Author bio image **/
.df-author-image .pp-infobox-image > img {
	background-color: #00506D !important;
}

/** Blog >> Blog Overview - Style grid builder filters **/
.wpgb-search-facet [type="search"], 
.wpgb-select-facet > .wpgb-select {
	background-color: #ffffff !important;
	border-color: rgb(143, 178, 191) !important;
	-webkit-transition: 0.3s !important;
	transition: 0.3s !important;
}
.wpgb-search-facet [type="search"]:hover, 
.wpgb-select-facet > .wpgb-select:hover {
	border-color: #00506D !important;
}

/** Blog >> Blog - Add underline to links in paragraphs **/
.df-blog-post p a {
	text-decoration: underline !important;
}


/*= Fluent Forms ============== */

/** Fluent Forms >> Error Validation Styling **/
.ff-el-is-error [type="text"], 
.ff-el-is-error [type="email"], 
.ff-el-is-error [type="number"], 
.ff-el-is-error textarea {
	background-color: rgb(255, 241, 241) !important;
	border-color: rgb(174, 80, 80) !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}
.ff-el-is-error select, 
.ff-el-is-error .choices__inner {
	border-color: rgb(174, 80, 80) !important;
}
.ff-el-is-error .choices {
	margin-bottom: 5px !important;
}
.ff-el-is-error select ~ .text-danger, 
.ff-el-is-error .choices ~ .text-danger {
	margin-top: 5px !important;
	border-radius: 5px !important;
}
.ff-el-is-error .ff-el-ratings ~ .text-danger, 
.ff-el-is-error .ff_file_upload_holder ~ .text-danger, 
.ff_list_buttons.ff-el-is-error .text-danger, 
.ff-el-is-error .ff-el-tc ~ .text-danger {
	border-radius: 5px !important;
}
.fluentform .ff-el-is-error.ff-el-group.ff_list_buttons .ff-el-form-check span {
	border-color: rgb(174, 80, 80) !important;
}
.ff-el-is-error .ff-el-form-check {
	border-radius: 0px !important;
	border: none !important;
}
.active select ~ .text-danger {
	max-width: 480px !important;
}
.ff-el-is-error .text-danger {
	background-color: rgb(174, 80, 80) !important;
	color: #ffffff !important;
	padding: 0px 10px 0px 10px !important;
	border-radius: 0px 0px 5px 5px !important;
	margin-top: 0px !important;
	font-size: 15px !important;
}

/** Fluent Forms >> Custom Radio styling **/
.ff-el-form-check-label > input[type="radio"] {
	background-color: #ECEDF0 !important;
	width: 20px !important;
	height: 20px !important;
	margin-top: 6px !important;
	border: 1px solid #aaaaaa !important;
	border-radius: 25px !important;
	-webkit-animation-name: zoomIn !important;
	animation-name: zoomIn !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	-o-appearance: none !important;
	appearance: none !important;
	outline: none !important;
}
.ff-el-form-check-label > input[type="radio"]:checked {
	border: 1px solid #00506d !important;
	background-color: #00506d !important;
}
.ff-el-form-check-label > input[type="radio"]:checked::before {
	display: block !important;
	text-align: center !important;
	color: #80D3DD !important;
	position: absolute !important;
	left: 0px !important;
	top: -10.5px !important;
	font-size: 30px !important;
	content: '\25CF' !important;
	-webkit-animation-name: zoomIn !important;
	animation-name: zoomIn !important;
	-webkit-animation-duration: 0.5s !important;
	animation-duration: 0.5s !important;
}
.ff-el-form-check-label > input[type="radio"]:active {
	border: 1px solid #00506d !important;
}
.ff-el-form-check-label > input[type="radio"]:hover {
	border: 1px solid #00A7BA !important;
}

/** Fluent Forms >> Custom Checkbox Styling - Minimal **/
.ff-el-form-check-label {
	display: -webkit-box !important;
	display: -moz-box !important;
	display: -ms-flexbox !important;
	display: -webkit-flex !important;
	display: flex !important;
	position: relative !important;
	cursor: pointer !important;
}
.ff-el-form-check-label span {
	margin-left: 5px !important;
}
.ff-el-form-check-label > input[type="checkbox"] {
	/* Custom styling for checkbox fields */
	height: 20px !important;
	min-width: 20px !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	-o-appearance: none !important;
	appearance: none !important;
	border: 1px solid #aaaaaa !important;
	border-radius: 4px !important;
	outline: none !important;
	-o-transition-duration: 0.3s !important;
	-moz-transition-duration: 0.3s !important;
	-webkit-transition-duration: 0.3s !important;
	transition-duration: 0.3s !important;
	background-color: #ECEDF0 !important;
	cursor: pointer !important;
	margin-top: 5px !important;
}
.ff-el-form-check-label > input[type="checkbox"]:checked {
	/* Custom styling for when checkbox fields are checked */
	border: 1px solid #00506D !important;
	background-color: #00506D !important;
}
.ff-el-form-check-label > input[type="checkbox"]:checked::before {
	/* Add a checkmark to checkbox when checkbox fields are checked */
	content: '\2713' !important;
	display: block !important;
	text-align: center !important;
	color: #80D3DD !important;
	position: absolute !important;
	left: 1px !important;
	top: -17px !important;
	font-size: 30px !important;
	-webkit-animation-name: zoomIn !important;
	animation-name: zoomIn !important;
	-webkit-animation-duration: 0.3s !important;
	animation-duration: 0.3s !important;
}
.ff-el-form-check-label > input[type="checkbox"]:active {
	border: 1px solid #00506d !important;
}
.ff-el-form-check-label > input[type="checkbox"]:hover {
	/* Change border color when checkbox is hovered */
	border: 1px solid #00A7BA !important;
}

/** Fluent Forms >> Custom Terms Checkbox Styling - Minimal **/
.ff-el-form-check-label {
	display: -webkit-box !important;
	display: -moz-box !important;
	display: -ms-flexbox !important;
	display: -webkit-flex !important;
	display: flex !important;
	position: relative !important;
	cursor: pointer !important;
}
.ff-el-form-check-label span.ff_tc_checkbox {
	margin-left: 0px !important;
	margin-right: 5px !important;
}
.ff-el-form-check-label .ff_tc_checkbox input[type="checkbox"] {
	/* Custom styling for checkbox fields */
	height: 20px !important;
	min-width: 20px !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	-o-appearance: none !important;
	appearance: none !important;
	border: 1px solid #aaaaaa !important;
	border-radius: 4px !important;
	outline: none !important;
	-o-transition-duration: 0.3s !important;
	-moz-transition-duration: 0.3s !important;
	-webkit-transition-duration: 0.3s !important;
	transition-duration: 0.3s !important;
	background-color: #ECEDF0 !important;
	cursor: pointer !important;
	margin-top: -15px !important;
}
.ff-el-form-check-label .ff_tc_checkbox input[type="checkbox"]:checked {
	/* Custom styling for when checkbox fields are checked */
	border: 1px solid #00506D !important;
	background-color: #00506D !important;
}
.ff-el-form-check-label .ff_tc_checkbox input[type="checkbox"]:checked::before {
	/* Add a checkmark to checkbox when checkbox fields are checked */
	content: '\2713' !important;
	display: block !important;
	text-align: center !important;
	color: #80D3DD !important;
	position: absolute !important;
	left: 1px !important;
	top: -16px !important;
	font-size: 30px !important;
	-webkit-animation-name: zoomIn !important;
	animation-name: zoomIn !important;
	-webkit-animation-duration: 0.3s !important;
	animation-duration: 0.3s !important;
}
.ff-el-form-check-label .ff_tc_checkbox input[type="checkbox"]:active {
	border: 1px solid #00506D !important;
}
.ff-el-form-check-label .ff_tc_checkbox input[type="checkbox"]:hover {
	/* Change border color when checkbox is hovered */
	border: 1px solid #00A7BA !important;
}

/** Fluent Forms >> Custom radio/checkbox Styling (Button layout) **/
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check span {
	color: #424B68 !important;
	background-color: #ffffff !important;
	border: 2px solid #aaaaaa !important;
	border-radius: 5px !important;
	-webkit-transition: All 0.3s !important;
	transition: All 0.3s !important;
}
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check span:hover {
	background-color: #f1f1f1 !important;
	border: 2px solid #aaaaaa !important;
}
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected span {
	background-color: #33B9C8 !important;
	border: 2px solid #33B9C8 !important;
	color: #ffffff !important;
}
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected span:hover {
	background-color: #33B9C8 !important;
	border: 2px solid #00506D !important;
}

/** Fluent Forms >> Custom styling for Dropdowns **/
select.ff-el-form-control {
	max-width: 480px !important;
	padding: 5px !important;
	appearance: none !important;
	-moz-appearance: none !important;
	-webkit-appearance: none !important;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%) !important;
	background-repeat: no-repeat, repeat !important;
	background-position: right .7em top 50%, 0 0 !important;
	background-size: .65em auto, 100% !important;
}
select.ff-el-form-control::-ms-expand {
	/* MT [ sub: 1 ] */
	display: none !important;
}
select.ff-el-form-ff-el-form-control:hover {
	/* MT [ sub: 1 ] */
	border-color: #888 !important;
}
select.ff-el-form-control:focus {
	/* MT [ sub: 1 ] */
	border-color: #aaa !important;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7) !important;
	box-shadow: 0 0 0 3px -moz-mac-focusring !important;
	color: #222222 !important;
	outline: none !important;
}
select.ff-el-form-control option {
	/* MT [ sub: 1 ] */
	font-weight: normal !important;
}
select.ff-el-form-control:disabled, 
select.ff-el-form-control[aria-disabled=true] {
	/* MT [ sub: 1 ] */
	color: graytext !important;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%) !important;
}
select.ff-el-form-control:disabled:hover, 
select.ff-el-form-control[aria-disabled=true] {
	/* MT [ sub: 1 ] */
	border-color: #aaaaaa !important;
}

/** Fluent Forms >> Custom styling for multiselect **/
.fluentform .choices {
	max-width: 480px !important;
}
.fluentform .choices__inner {
	border: 2px solid #aaaaaa !important;
}
.fluentform .choices .choices__list--dropdown {
	border-width: 2px !important;
	border-radius: 5px !important;
	margin-top: 2px !important;
}

/** Fluent Forms >> Style Thank You Message **/
#fluentform_1_success {
	background-color: rgb(246, 246, 246) !important;
}

/** Fluent Forms >> Style Progress Bar **/
.ff-step-titles li:before {
	border-color: #bfbfbf !important;
}
.ff-step-titles li:after {
	/*Set color of gray lines between points*/
	background-color: #bfbfbf !important;
}
.ff-step-titles li.ff_active:before, 
.ff-step-titles li.ff_completed:before {
	/* Remove border from active/completed squares */
	border: None !important;
}
.ff-step-titles li.ff_active:after, 
.ff-step-titles li.ff_completed:after {
	/*Set color of blue lines between points*/
	background-color: #007BFF !important;
}

/** Fluent Forms >> Style prev/next buttons **/
.fluentform .active .ff-btn-prev {
	color: #868E96 !important;
	font-size: 16px !important;
	text-transform: uppercase !important;
	background-color: rgba(0,0,0,0.0) !important;
	width: 130px !important;
	height: 40px !important;
	border-radius: 2px !important;
	float: left !important;
	-webkit-transition: All 0.3s !important;
	transition: All 0.3s !important;
	Margin: 20px 0px 0px 0px !important;
}
.fluentform .active .ff-btn-prev:hover {
	background-color: #868E96 !important;
	color: #ffffff !important;
	box-shadow: 2px 3px 5px 0 rgba(0,0,0,.2) !important;
}
.fluentform .active .ff-btn-next {
	color: #ffffff !important;
	font-size: 16px !important;
	box-shadow: 2px 3px 5px 0 rgba(0,0,0,.2) !important;
	background-color: #4eb5e5 !important;
	width: 130px !important;
	height: 40px !important;
	margin: 20px 0 0 0 !important;
	border-color: #4eb5e5 !important;
	border-radius: 2px !important;
	float: right !important;
	-webkit-transition: All 0.3s !important;
	transition: All 0.3s !important;
	text-transform: uppercase !important;
}
.ff-btn-md {
	-webkit-transition: All 0.3s !important;
	transition: All 0.3s !important;
}
.active .ff-btn {
	margin-bottom: 20px !important;
}
.active .ff-btn:hover {
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3) !important;
	transform: Scale(1.05) !important;
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3) !important;
	transform: Scale(1.05) !important;
}
.active .ff-btn-submit {
	float: Right !important;
	Margin: 20px 0px 0px 0px !important;
}

/** Fluent Forms >> Adjust font size of help message **/
.ff-el-help-message {
	font-size: 15px !important;
}

/** Fluent Forms >> Reduce font size of placeholder text **/
.contact-form-styles .ff-el-group ::placeholder {
	font-size: 15px !important;
}

/** Fluent Forms >> Style success message **/
.ff-message-success {
	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.3) !important;
	background-color: #ffffff !important;
	border: 2px solid #3E4A5D !important;
	border-radius: 5px !important;
}


/*= Header ==================== */

/** Header >> Main Menu - Underline styling **/
.mega-menu-item-object-page ul {
	display: table !important;
}
.mega-menu-item-object-page a {
	/* MT [ sub: 1 ] */
	text-transform: uppercase !important;
	text-decoration: none !important;
}
.mega-menu-grid a {
	/* MT [ sub: 1 ] */
	text-transform: uppercase !important;
	text-decoration: none !important;
}
.mega-menu-link {
	/* MT [ sub: 1 ] */
	text-transform: uppercase !important;
	text-decoration: none !important;
}
.mega-menu-item-object-page a:after {
	/* MT [ sub: 1 ] */
	background: none repeat scroll 0 0 transparent !important;
	bottom: 0 !important;
	content: "" !important;
	display: block !important;
	height: 2px !important;
	left: 50% !important;
	position: absolute !important;
	background: #fff !important;
	-webkit-transition: width 0.3s ease 0s, left 0.3s ease 0s !important;
	transition: width 0.3s ease 0s, left 0.3s ease 0s !important;
	width: 0 !important;
}
.mega-menu-item-object-page a:hover:after {
	/* MT [ sub: 1 ] */
	width: 100% !important;
	left: 0 !important;
}
.mega-menu-item-object-page ul li a.current {
	/* MT [ sub: 1 ] */
	Border-bottom: 2px solid #ffffff !important;
	Padding-bottom: 12px !important;
}

/** Header >> Add shadow to Header **/
header[data-type="header"] {
	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.3) !important;
}

/** Header >> Menu - Style descriptions **/
.menu-item-description {
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	margin-bottom: 0 !important;
}


/*= Footer ==================== */

/** Footer >> Style social icons **/
.df-footer-social-icons .adv-icon-link {
	color: white !important;
	text-align: center !important;
	background-position: 100% 0 !important;
	background-size: 200% 100% !important;
	width: 30px !important;
	border-radius: 50px !important;
	-webkit-transition: .25s ease-in !important;
	transition: .25s ease-in !important;
	/*display: block;*/
	background-image: linear-gradient(to left,     transparent,     transparent 50%,     #38aace 50%,     #38aace) !important;
}
.df-footer-social-icons .adv-icon-link:hover {
	background-position: 0 0 !important;
	color: #333 !important;
}
.df-footer-social-icons .uabb-image-content {
	Padding: 7px !important;
}


/*= Dashboard Pages =========== */

/** Dashboard Pages >> Align buttons in columns to bottom **/
.equal-column .dashboard-button {
	display: grid !important;
	-webkit-align-content: flex-end !important;
	align-content: flex-end !important;
	-webkit-flex: 1 1 0 !important;
	flex: 1 1 0 !important;
}

/** Dashboard Pages >> Useful Resources - Add animation to links **/
.useful-links-animated-underline a p {
	text-decoration: none !important;
	position: relative !important;
}
.useful-links-animated-underline a p::before {
	content: '' !important;
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 2px !important;
	background-color: #38AACE !important;
	-webkit-transform-origin: bottom right !important;
	transform-origin: bottom right !important;
	transform: scaleX(0) !important;
	-webkit-transition: transform 0.5s ease !important;
	transition: transform 0.5s ease !important;
}
.useful-links-animated-underline a p:hover::before {
	-webkit-transform-origin: bottom left !important;
	transform-origin: bottom left !important;
	transform: scaleX(1) !important;
}
.useful-links-animated-underline .pp-list-item .ua-icon {
	-webkit-transition: All 0.3s !important;
	transition: All 0.3s !important;
}
.useful-links-animated-underline .pp-list-item:hover .ua-icon {
	color: #38AACE !important;
}


/*= Account =================== */

/** Account >> Login Page - Set max-with for login column **/
.fl-col-group .max-width-600px {
	max-width: 650px !important;
}

/** Account >> Login - Style logged-in message **/
.pp-login-message {
	text-align: Center !important;
	background-color: #C1F1D5 !important;
	padding: 5px 10px 5px 10px !important;
	border-radius: 5px !important;
}

/** Account >> Login - Style form **/
.login-form ::placeholder {
	color: rgb(169, 172, 179) !important;
}
.login-form .pp-field-group input {
	border: 2px Solid #aaaaaa !important;
}
.login-form .pp-field-group input:focus {
	border: 2px Solid #02A9F2 !important;
}

/** Account >> Login - Add icons to login fields **/
.login-form input#user {
	padding-left: 50px !important;
}
.login-form input#password {
	padding-left: 50px !important;
}
.login-form label[for=user]::before {
	content: '\f2bd' !important;
	position: absolute !important;
	height: 50px !important;
	width: 50px !important;
	display: -webkit-inline-flexbox !important;
	display: -moz-inline-flexbox !important;
	display: -ms-inline-flexbox !important;
	display: inline-flex !important;
	-webkit-align-items: center !important;
	align-items: center !important;
	-webkit-justify-content: center !important;
	justify-content: center !important;
	color: #c0c0c0 !important;
	font-family: 'Font Awesome 5 Free' !important;
	font-weight: 500 !important;
	font-size: 25px !important;
	/*content: '\f0e0';*/
}
.login-form label[for=password]::before {
	content: '\f13e' !important;
	position: absolute !important;
	height: 50px !important;
	width: 50px !important;
	display: -webkit-inline-flexbox !important;
	display: -moz-inline-flexbox !important;
	display: -ms-inline-flexbox !important;
	display: inline-flex !important;
	-webkit-align-items: center !important;
	align-items: center !important;
	-webkit-justify-content: center !important;
	justify-content: center !important;
	color: #c0c0c0 !important;
	font-family: 'Font Awesome 5 Free' !important;
	font-weight: 900 !important;
	font-size: 25px !important;
	/*content: '\f023';*/
}

/** Account >> Login - Custom styling for Remember Me checkbox **/
.login-form .pp-field-type-checkbox label {
	display: -webkit-box !important;
	display: -moz-box !important;
	display: -ms-flexbox !important;
	display: -webkit-flex !important;
	display: flex !important;
	position: relative !important;
	cursor: pointer !important;
}
.login-form .pp-field-type-checkbox label span {
	margin-left: 5px !important;
}
.login-form .pp-field-type-checkbox label > input[type="checkbox"] {
	/* Custom styling for checkbox fields */
	height: 20px !important;
	width: 20px !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	-o-appearance: none !important;
	appearance: none !important;
	border: 1px solid #00506D !important;
	border-radius: 4px !important;
	outline: none !important;
	-o-transition-duration: 0.3s !important;
	-moz-transition-duration: 0.3s !important;
	-webkit-transition-duration: 0.3s !important;
	transition-duration: 0.3s !important;
	background-color: #ffffff !important;
	cursor: pointer !important;
	margin-top: 3px !important;
}
.login-form .pp-field-type-checkbox label > input[type="checkbox"]:checked {
	/* Custom styling for when checkbox fields are checked */
	border: 1px solid #00506D !important;
	background-color: #00506D !important;
}
.login-form .pp-field-type-checkbox label > input[type="checkbox"]:checked::before {
	/* Add a checkmark to checkbox when checkbox fields are checked */
	content: '\2713' !important;
	display: block !important;
	text-align: center !important;
	color: #5FD3BE !important;
	position: absolute !important;
	left: 1px !important;
	top: -11px !important;
	font-size: 30px !important;
	-webkit-animation-name: zoomIn !important;
	animation-name: zoomIn !important;
	-webkit-animation-duration: 0.3s !important;
	animation-duration: 0.3s !important;
}
.login-form .pp-field-type-checkbox label > input[type="checkbox"]:active {
	border: 1px solid #5FD3BE !important;
}
.login-form .pp-field-type-checkbox label > input[type="checkbox"]:hover {
	/* Change border color when checkbox is hovered */
	border: 1px solid #5FD3BE !important;
}

/** Account >> Client Portal - Set max-width for logo on Login Page **/
.mt-page-client-portal-login .project-logo.fixed-width {
	max-width: 100px !important;
}


/*( Large Desktop )*/
@media (min-width: 1200px) {
	/** General >> Sticky - Make columns sticky using class .sticky-element **/
	.sticky-element {
	position: -webkit-sticky !important;
	top: 160px !important;
	Position: sticky !important;
}

}


/*( Desktop & Tablet )*/
@media (min-width: 768px) and (max-width: 979px) {
	/** General >> Sticky - Make columns sticky using class .sticky-element **/
	.sticky-element {
	position: -webkit-sticky !important;
	top: 150px !important;
	Position: sticky !important;
}

}


/*( Tablet )*/
@media (min-width: 481px) and (max-width: 767px) {
	/** General >> Sticky - Make columns sticky using class .sticky-element **/
	.sticky-element {
	position: static !important;
}

}


/*( Tablet & Phone )*/
@media (max-width: 767px) {
	/** General >> Sticky - Make columns sticky using class .sticky-element **/
	.sticky-element {
	position: static !important;
}

	/** Header >> Menu - Add background color to submenus on mobile **/
	.sub-menu .menu-item a {
	background-color: rgb(0, 54, 83) !important;
}
.sub-menu .sub-menu .menu-item a {
	background-color: rgb(0, 54, 83) !important;
}

}


/*( Phone )*/
@media (max-width: 480px) {
	/** General >> Sticky - Make columns sticky using class .sticky-element **/
	.sticky-element {
	position: static !important;
}

	/** General >> Testimonials - Increase size of arrows in testimonial slider **/
	.compact .fa {
	font-size: 40px !important;
}

	/** General >> Testimonials - Shrink padding between text and arrows on phones **/
	.uabb-testimonials-wrap {
	padding-right: 30px !important;
	padding-left: 30px !important;
}

	/** General >> Free Resources - Style buttons on mobile **/
	.df-style-resource-button {
	width: 100% !important;
}

	/** Header >> Menu - Add background color to submenus on mobile **/
	.sub-menu .menu-item a {
	background-color: rgb(0, 54, 83) !important;
}
.sub-menu .sub-menu .menu-item a {
	background-color: rgb(0, 54, 83) !important;
}

	/** Fluent Forms >> Style Progress Bar **/
	.ff-step-titles li:before {
	
}
.ff-step-titles > li {
	padding-left: 1px !important;
	padding-right: 1px !important;
}
.ff-step-titles > li Span {
	font-size: 11px !important;
}

	/** Blog >> Blog post - Styling for block quotes **/
	.df-blog-post .wp-block-quote {
	padding: 15px !important;
}

	/** Blog >> Blog post - Styling for titles **/
	.df-blog-post h2 {
	font-size: 30px !important;
}
.df-blog-post h3 {
	font-size: 25px !important;
}
.df-blog-post h4 {
	font-size: 22px !important;
}

}