/* DISPLAYS */

.display-1 {
    font-size: 3rem;
    font-weight: 600;
    line-height: 104%;
}

.display-2 {
    font-size: 2.75rem;
    font-weight: 600;
    line-height: 105%;
}

.display-3 {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 105%;
}

.color-black {
    color: var(--bs-black);
}

.display-4 {
    line-height: 104%;
}

/* DISPLAYS › MD */

@media (min-width: 768px) {
    .display-1 {
        font-size: 4rem;
    }
    .display-2 {
        font-size: 3.25rem;
    }
    .display-3 {
        font-size: 2.75rem;
    }
}

/* DISPLAYS › LG */

@media (min-width: 992px) {
    .display-1 {
        font-size: 5rem;
    }
    .display-2 {
        font-size: 3.75rem;
    }
    .display-3 {
        font-size: 3rem;
    }
}

/* DISPLAYS › XL */

@media (min-width: 1200px) {
    .display-1 {
        font-size: 6rem;
    }
    .display-2 {
        font-size: 4.25rem;
    }
    .display-3 {
        font-size: 3.25rem;
    }
}

/* TITLES */

.title-1 {
    font-size: 2.125rem;
    font-weight: 600;
    line-height: 120%;
}

.title-2 {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 120%;
}

.title-3 {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 120%;
}

.title-4 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 120%;
}

/* Landscape orientation for all iPhones */
@media (max-device-width: 812px) and (orientation: landscape),
       (max-device-width: 896px) and (orientation: landscape),
       (max-device-width: 926px) and (orientation: landscape) {

}

/* CONTENT */

#mainHeader {
	@media (min-width: 1200px) {
		padding-bottom: 3rem !important;
		padding-top: 3rem !important;
	}
	@media (min-width: 992px) {
		padding-bottom: 1.5rem !important;
		padding-top: 1.5rem !important;
	}
	
	@media (resolution: 1.5dppx) {
		padding-bottom: 0 !important;
	    padding-top: 0 !important;
		margin-bottom: 0 !important;
		margin-top: 0 !important;
    }
}

.headline {
    font-size: 1rem;
    font-weight: 600;
}

.lead {
    font-size: 1.25rem;
}

.body {
    font-size: 1rem;
}

.callout {
    font-size: 0.9375rem;
}

.subhead {
    font-size: 0.875rem;
}

.footnote {
    font-size: 0.75rem;
}

.caption {
    font-size: 0.6875rem;
}

.bkg-radius {
    background: var(--bs-white);
	border-top-left-radius: 100px;
}

.bkg-radius-lower-right {
	border-top-left-radius: 0;
	border-bottom-right-radius: 100px;
}

.top-layer {
    position: relative;
	z-index: 200;
}

/* HERO SECTION */

#scrubby-guy {
    max-width: 196px;
	position: relative;
	z-index: 200;
}

#hubspotForm {
    position: relative;
	z-index: 200;
}

/* TWO-COLUMN SECTION - Upper */

#line-top {
	height: 100%;
	left: 0;
	width: 100%;
	z-index: 100;
}

#computer-girl {
    max-width: 390px;
	position: relative;
	top: 28px;
}

.custom-bullets li {
	margin-bottom: .5rem;
    padding-left: 1.3rem; 
	position: relative;
}

.triangle-bullets,
.circle-bullets {
	display: inline-block;
    height: 12px;
	left: 0;
	position: absolute;
	top: -1px;
	width: 12px;
}

.circle-bullets {
    height: 8px;
	width: 8px;
}

#bg-overlay {
	content: "";
	display: flex;
	flex-direction: row;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
#bg-overlay .slice-left {
	background: white;
	border-radius: 0 0 100px 0;
	height: 100%;
	width: 100%;
}
#bg-overlay .slice-right {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100px;
}

#bg-overlay .slice-right-top {
	background: white;
	flex-grow: 1;
}

#bg-overlay .slice-right-bottom {
	background: top left / contain no-repeat url(https://26117.fs1.hubspotusercontent-na1.net/hubfs/26117/mktgl-8839/top-slice.svg);
	flex-shrink: 0;
	min-height: 400px;
}

/* TESTIMONIAL SECTION */

#testimonial-section,
#two-column-section-lower,
#two-column-section-upper,
.hero-section.b,
#coaching-section {
    background: linear-gradient(90deg, #81D2E8 0%, #00909D 39%, #5B73B7 100%);
}

#testimonial-section {
	border-bottom-right-radius: 100px;
	border-top-left-radius: 100px;
	position: relative;
	z-index: 200;
}

/* TWO-COLUMN SECTION - Lower */

#line-bottom {
	bottom: 0;
    height: 100%;
	left: 15px;
	overflow: hidden;
	width: 100%;
}

#loverboy {
    max-width: 60%;
}

/* FOUR-COLUMN SECTION */

.ps-icons {
    height: 60px;
	width: 60px;
}


/* HubSpot Embedded Form Styles */

#hubspotFormContainer {
	background: #e4e9f6;
    border-bottom-right-radius: 100px;
	padding: 2rem !important;
	
	/* Extra large devices (large desktops) */
	@media (min-width: 1200px) { 
		border-bottom-right-radius: 0;
		border-top-right-radius: 100px;
	}
}

.hs-input {
    display: inline-block;
    width: 95%;
    max-width: 500px;
    height: 40px;
    padding: 9px 10px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 22px;
    color: #33475b;
    border: 1px solid #cbd6e2;
    box-sizing: border-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
}

.hs-input:not([type=file]) {
    background-color: #f5f8fa;
}

.input {
	border: none !important;
    margin-right: 0 !important;
}

input[type="text"],
input[type="tel"],
input[type="email"],
select {
    border-radius: .375rem !important;
	height: 50px !important;
}

textarea {
  border-radius: .375rem !important;
  max-height: 100% !important;
  min-height: 50px !important;
  resize: vertical !important;
}

.hs-form-field {
    padding: .5rem 0 !important;
}

.hs-submit {
    margin-top: 1.5rem;
}

.hs-error-msgs {
    list-style-type: none !important;
	margin-bottom: 0 !important;
	padding-left: 0 !important;
}

.hs-error-msg {
    color: red !important;
	font-size: .8rem !important;
}

.hs-form-field label span {
    font-size: .9rem !important;	
	display: inline-block !important;
	padding-bottom: .3rem !important;
}

.hs-form-field .inputs-list {
    list-style-type: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.hs-form-field .inputs-list input[type="checkbox"],
.hs-form-field .inputs-list input[type="radio"] {
    float: left !important;
	height: 25px !important;
	margin-right: 10px !important;
}

.hs-form-field .inputs-list span {
    margin: 0 !important;
	padding: 0 !important;
}

select {
    color: 545456 !important;
}

.hbspt-form .submitted-message {
	font-size: 1.2rem !important;
    text-align: center !important;
}

.hs_sms_opt_in_out_status a {
    color: var(--bs-black);
}

.hbspt-form .submitted-message {
    text-align: left !important;
}

.hs-variant .btn-secondary {
    background: #fff !important;
	border: 1px solid var(--bs-white);
}

.hs-variant h2,
.hs-variant #hs-form-info-text,
.hs-variant label span {
    color: var(--bs-white) !important;
}

.hs-variant {
    background: #1E9FAF !important;
}

.hs-variant .hbspt-form .submitted-message span,
.hs-variant .hbspt-form .submitted-message p,
.hs-error-msg {
    color: var(--bs-white) !important;
}

div.img-frame {
    width: auto;
    height: auto;
    background: url(https://content.speareducation.com/hubfs/Landing%20Pages/MKTGL-6481_Dentrix_Campaign-SPS_First_Month_Free/SPS-Scroll-w-Modals-Wide.gif) no-repeat;
    background-size: 61% 80%;
    background-position: 50% 28%;
    position: relative;
}

div.img-frame img {
    width: 80%;
    height: 80%;
}

#imageOverlayAfterSubmit,
#overlayBuffer {
    display: none;
}

#overlayBuffer {
    margin-bottom: 0;
}

.form-image-overlay .submitted-message p span {
    color: #ffffff !important;
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-7px);
	}
	60% {
		transform: translateY(-4px);
	}
}

.arrow.bounce {
	display: inline-block;
	animation: bounce 2s infinite;
	fill: #1863ad;
}

.arrow.bounce svg {
    width: 40px;
}

#handshake {
    bottom: -30px;
}

/* XS */
@media (max-width: 767px) {
	.img-overlay {
	    bottom: -100px !important;
		left: 0 !important;
	}
	#imageOverlayBeforeSubmit img {
		height: 170px;
	    width: 300px;
	}
	#imageOverlayAfterSubmit {
	    top: 100px !important;
	}
	#overlayBuffer {
	    margin-bottom: 50px !important;
	}
	#computer-girl {
		max-width: 270px;
		top: 0;
	}
	#line-top {
	    display: none !important;
	}
	#testimonial-section {
		border-top-left-radius: 0;
	}
}

/* MD */
@media (min-width: 768px) and (max-width: 991px) {
	.img-overlay {
	    bottom: -150px !important;
		left: 0 !important;
	}
	#imageOverlayAfterSubmit {
	    top: 100px !important;
	}
	#overlayBuffer {
	    margin-bottom: 50px !important;
	}
	video {
		margin-top: 75px !important;
	}
}

/* Extra small devices (phones) */
@media (max-width: 575.98px) { 
	#testimonial-section .title-2 {
		font-size: 1.5rem;
		line-height: 120%;
	}
	#line-bottom {
		display: none !important;
	}
	#computer-girl {
		max-width: 360px;
		top: 0;
	}
	#scrubby-guy {
	    max-width: 100px;
	}
	#line-top {
	    display: none !important;
	}
}

/* Small devices (landscape phones, tablets) */
@media (min-width: 576px) and (max-width: 767.98px) { 
	#line-bottom {
	    display: none !important;
	}
	#computer-girl {
		max-width: 270px;
	}
	#scrubby-guy {
	    max-width: 100px;
	}
	#line-top {
	    display: none !important;
	}
}

/* Medium devices (tablets, desktops) */
@media (min-width: 768px) and (max-width: 991.98px) { 
	#computer-girl {
		max-width: 270px;
		top: 0;
	}
	#scrubby-guy {
		max-width: 120px;
	}
	#line-bottom {
	    display: none !important;
	}
	.hbspt-form label span {
        font-size: .8rem !important;
	}
	#line-top {
	    display: none !important;
	}
	#handshake {
	    bottom: -48px;
	}
}

/* Large devices (desktops) */
@media (min-width: 992px) and (max-width: 1199.98px) { 
	#computer-girl {
	    top: 74px;
	}
	#two-column-section-lower h3 {
	    font-size: 2.5rem;
	}
	#line-bottom {
		bottom: 32px;
	}
	#loverboy {
	    top: 42px;
	}
	.hbspt-form label span {
        font-size: .8rem !important;
	}
	#line-top {
	    display: none !important;
	}
	#handshake {
	    bottom: -51px;
	}
}

/* Extra large devices (large desktops) */
@media (min-width: 1200px) { 
	#loverboy {
		top: 57px;
	}
	#line-bottom {
		bottom: 0;
	}
}

/* Extra Extra large devices (large desktops) */
@media (min-width: 1400px) {
  	#loverboy {
		top: 28px;
	}
	#line-bottom {
		bottom: 0;
	}
}

/* scale and layout setting at 150% */
/*@media (resolution: 1.5dppx) {
	body, html {
        transform: scale(.9);
	}
	.display-4 {
		font-size: 3.2rem !important;
	}
	.main-heading br,
	.main-subheading br {
	    display: none !important;
	}
	#handshake {
		margin-bottom: -177px;
		max-width: 450px;
		position: relative;
		top: -125px;
	}
	#line-top {
	    top: -10px !important;
	}
	.bullet-points {
	    padding-top: .5rem !important;
		margin-top: .5rem !important;
	}
} */