/*Common CSS*/
#acornclub body {
    padding: 0;
    font-family: 'Open-Sans', sans-serif;
    color: #444;
}
#acornclub h1, #acornclub h2, #acornclub h3, #acornclub h4, #acornclub p, #acornclub a, #acornclub span {
    margin: unset;
}
#acornclub h1, #acornclub h2, #acornclub h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
}


/*
Bootstrap Overide
#acornclub .container-fluid {
    padding: unset;      
}
*/
/*Common Classes*/
.bg-lightgrey {
    background-color: #f6f8fa;
}
.bg-white {
    background-color: white
}
.img-fluid {
    width: 100%;
    height: auto;
}
.bg-green {
    background-color: #47a447;
}
.bg-gold {
    background-color: #aa7f4b;
}
.white {
    color: #fff;
}
#acornclub {
    padding-left: 0;
    padding-right: 0;
}
#acornclub .red-button {
    font-weight: 700;
    color: white;
    display: flex;
    background-color: #8F023D;
    padding: 1rem 4rem;
    text-transform: uppercase;
    border-radius: 4rem;
}
#acornclub .red-button:hover {
    background-color: #aa7f4b;
}
#acornclub .small-line {
    height: 1px;
    background-color: #444;
    opacity: 0.2;
}
#acornclub .trim-p {
    max-width: 64rem;
    margin: 0 auto;
}
/*FlexBox Common*/
.d-flex {
    display: flex;
}
.flex-1 {
    flex: 1;
}
.flex-row {
    flex-direction: row;
}
.flex-column {
    flex-direction: column;
}
.align-items-center {
    align-items: center;
}
.align-items-end {
    align-items: flex-end;
}
.align-self-center {
    align-self: center;
}
.aligns-self-start {
    align-self: start;
}
.aligns-self-end {
    align-self: flex-end;
}
.text-center {
    text-align: center;
}
.text-underline {
    text-decoration: underline;
}
.justify-content-center {
    justify-content: center;
}
.justify-content-around {
    justify-content: space-around;
}
.justify-content-between {
    justify-content: space-between;
}
.justify-content-end {
    justify-content: flex-end;
}
/*Perks Grid*/
.perks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr 1fr;
}
@media (max-width: 480px) {
    .perks-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
    }
}
/*Spacing Common*/
.card {
/*    border-radius: 20px;*/
    overflow: hidden;
    box-shadow: 2px 4px 6px 0px #00000066;
}
.new-banner {
    background: #A97F4F;
    top: 0;
    left: 0;
    transform: rotate(-45deg) translate(-0.55rem, -1.75rem);
    color: white;
    padding: 1.5rem 1.5rem;
    border-radius: 50%;
}
@media (max-width: 1120px) {
    .new-banner h2 {
    font-size: 1.4rem!important;
}
    .new-banner {
    background: #A97F4F;
    top: 0;
    left: 0;
    transform: rotate(-45deg) translate(-0.55rem, -1.75rem);
    color: white;
    padding: 1.5rem 1.5rem;
    border-radius: 50%;
}
}
.margin-block-off {
    margin-block-start: 0;
    margin-block-start: 0;
}
.gap-1 {
    grid-gap: 1rem;
}
.gap-2 {
    grid-gap: 2rem;
}
.gap-3 {
    grid-gap: 3rem;
}
.grid-gap-1 {
    grid-gap: 1rem;
}
.grid-gap-2 {
    grid-gap: 2rem;
}
.grid-gap-3 {
    grid-gap: 3rem;
}
.pt-top {
    padding-top: 1rem;
}
.pl-1 {
    padding-left: 1rem;
}
.py-1 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.py-2 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.px-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.px-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.px-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
/*Mobile Responsiveness*/
@media (max-width:800px) {
    .m-flex-row {
        flex-direction: row;
    }
    .m-flex-column {
        flex-direction: column;
    }
    .m-text-center {
        text-align: center;
    }
    .m-align-self-center {
        align-self: center;
    }
}
#hero-banner {
    background-color: #8f023d;
}
#hero-banner img {
    width: 100%;
    height: auto;
    margin: 0 auto;
}
#hero-banner2 {
    background-color: #8f023d;
    padding: 4rem 0;
}
#stairsafe {
    padding-left: 0;
    padding-right: 0;
}
#stairsafe .header {
    color: #444;
    font-family: 'Nunito', sans-serif;
}
#stairsafe .sub-header {
    color: #444;
    font-family: 'Nunito', sans-serif;
}
#stairsafe .span {
    font-family: 'Nunito', sans-serif;
}
/*Common Class */
#stairsafe .acorn-primary {
    background-color: #8f023d;
    border-radius: 20px;
}
#stairsafe .acorn-secondary {
    background: #008000;
    border-radius: 20px;
    min-width: 20rem
}
#stairsafe .card {
    background: #FFFFFF;
    /*    border-radius: 2rem;*/
    /*    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/
    overflow: hidden;
}
#stairsafe .red-card-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    background-color: #8f023d;
    color: white;
    margin: 0;
    padding: 2rem 1rem;
}
#stairsafe .card-p {
    background: #FFFFFF;
    /*    border-radius: 2rem;*/
    /*    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/
    padding: 2rem;
}
.light {
    font-weight: 300;
}
.medium {
    font-weight: 700;
}
.bold {
    font-weight: 800;
}
.red {
    color: #8f023d;
}
.white {
    color: white;
}
.ml-auto, .mx-auto {
    margin-left: auto;
}
.mb-1 {
    margin-bottom: 1rem;
}
.mb-2 {
    margin-bottom: 2rem;
}
.mr-auto, .mx-auto {
    margin-right: auto;
}
.mx-1 {
    margin: 0 1rem;
}
.ml-2 {
    margin-left: 2rem;
}
.m-2 {
    margin: 2rem;
}
.my-2 {
    margin-bottom: 2rem;
    margin-top: 2rem
}
.mr-2 {
    margin-right: 2rem;
}
.w-20 {
    width: 20%;
}
.w-30 {
    width: 30%;
}
.w-40 {
    width: 40%;
}
.w-50 {
    width: 50%;
}
.w-60 {
    width: 60%;
}
.w-70 {
    width: 70%;
}
#stairsafe .mb-0 {
    margin-bottom: 0;
}
#stairsafe .px-1 {
    padding: 1rem 0;
}
#stairsafe .px-2 {
    padding: 2rem 0;
}
#stairsafe .padding-1-2 {
    padding: 1rem 3rem;
}
#stairsafe .padding-2-1 {
    padding: 2rem 3rem;
}
#stairsafe .p-0 {
    padding: 0;
}
#stairsafe .padding-30 {
    padding-left: 35%;
}
#stairsafe .w-50 {
    width: 50%;
}
#stairsafe .w-60 {
    width: 60%;
}
#stairsafe .w-100 {
    width: 100%;
}
#stairsafe .no-decoration {
    text-decoration: unset;
    list-style: none;
}
#stairsafe .grey-divider {
    height: 100%;
    border: 1px solid #d8d8d8;
}
#stairsafe .red-button {
    font-weight: 700;
    color: white;
    display: flex;
    background-color: #8F023D;
    padding: 1rem 4rem;
    text-transform: uppercase;
    border-radius: 4rem;
}
#stairsafe .red-button:hover {
    background-color: #aa7f4b;
}
.black {
    color: black;
}
.position-r {
    position: relative;
}
.position-a {
    position: absolute;
}
/*Hero*/
#hero {
    background-color: #8f023d;
}
#hero img {
    width: 100%;
    height: auto;
    margin: 0 auto;
}
#hero2 {
    background-color: #8f023d;
}
#hero2 img {
    padding: 4rem 0;
}
#design-for-you {
    background-color: #f6f8fa;
    padding: 6rem 0;
}
#stairsafe-detects {
    padding: 6rem 0;
}
#stairsafe-includes {
    background-color: #f6f8fa;
    padding: 16rem 0;
}
#phone2 {
    left: 18%;
    top: 50%;
    height: calc(80% + 5vw);
    transform: translate(-50%, -50%);
}
@media (max-width: 992px) {
    .flex-m-column {
        flex-direction: column;
    }
    .flex-m-row {
        flex-direction: row;
    }
    #stairsafe .w-60 {
        width: unset;
    }
    #stairsafe .padding-30 {
        padding: 1rem 2rem;
    }
    .order-1 {
        order: -1;
    }
    .m-xs-auto {
        margin: 0 auto;
    }
    #stairsafe .padding-1-2 {
        padding: 2rem 6rem;
    }
    .m-text-center {
        text-align: center;
    }
    .m-text-left {
        text-align: left;
    }
    .flex-wrap {
        flex-wrap: wrap;
    }
    .m-j-content-center {
        justify-content: center;
    }
    #stairsafe .m-w-100 {
        width: 100%;
    }
    #stairsafe .m-row {
        flex-direction: row;
    }
    #stairsafe .m-row-reverse {
        flex-direction: row-reverse;
    }
    #stairsafe .for-you-card {
        flex-wrap: wrap-reverse;
    }
    #phone2 {
        left: 50%;
        top: -30%;
        transform: translate(-50%, -50%);
        height: 55%;
    }
    .m-grid-gap {
        grid-gap: 0.6rem;
    }
    #hero-content {
        padding: 4vw 0;
    }
    #design-for-you {
        background-color: #f6f8fa;
        padding: 2rem 0;
    }
    #stairsafe-detects {
        padding: 2rem 0;
    }
    #stairsafe-includes {
        background-color: #f6f8fa;
        padding: 40rem 0 2rem 0;
    }
}


/*NEW STAIRSAFE PAGE*/
.stairsafe-page * {
	margin: 0;
	padding: 0;
	webkit-font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	text-shadow: rgba(0, 0, 0, .1) 0 0 1px;
}

.stairsafe-page h1,
.stairsafe-page h2,
.stairsafe-page h3,
.stairsafe-page h4,
.stairsafe-page h5 {
	line-height: 1.4;
}

.stairsafe-page .bg-sb {
  background-color: #8F023D;
}
.stairsafe-page .bg-llg {
	background: #F6F8FA;
}
.stairsafe-page .color-w {
	color: #ffffff;
}
.stairsafe-page .color-sb {
	color: #8F023D !important;
}

/*Specific Styling*/
.max-stairsafe {
	max-width: 1250px;
}
.stairsafe-page-header {
	padding: 0 0 5px;
}
/*Stairsafe Grid Layout*/
.stairsafe-grid-content-container {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 35px;
}
.stairsafe-grid-content.stairsafe-large {
	max-width: 750px;
}
.stairsafe-grid-content.stairsafe-medium {
	max-width: 720px;
}
.stairsafe-grid-content.stairsafe-small {
	max-width: 550px;
}
.stairsafe-grid-content-container > *:nth-child(1) {
	align-self: flex-end;
}
.stairsafe-grid-content-phone {
	display: block;
	height: auto;
	margin: 0 auto;
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: center;
}

/*Intro StairSafe Section*/
.stairsafe-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px 0 60px;
}
.stairsafe-banner {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 32px 0;
}
.stairsafe-logo {
	display: block;
	width: 180px;
	height: auto;
}
@media (min-width: 800px) {
	.stairsafe-intro-title {
		padding: 32px 0 0 0;
	}
}
.stairsafe-intro-content {
	width: 90%;
	padding: 16px 0 0 0;
	grid-template-rows: auto auto 1fr;
}
.stairsafe-current-customers {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.stairsafe-current-customers-title {
	padding: 0 0 5px;
}
.stairsafe-contact-container {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.stairsafe-contact-container-title {
	max-width: 550px;
}
.stairsafe-contact-btn-container {
	display: flex;
	align-items: center;
	gap: 20px;
}
.stairsafe-contact-btn-container .btn.btn-action {
	padding: 20px 25px;
}
.stairsafe-link {
	display: flex;
	gap: 5px;
	align-items: center;
}
.stairsafe-link-arrow {
	padding: 0 0 0 5px;
}
.stairsafe-phone-angle {
	width: min(25vw, 250px);
}

/*StairSafe Card Section*/
.stairsafe-card-section {
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: 32px 0;
}
@media (min-width: 1024px) {
	.stairsafe-card-section {
		width: 95%;
	}
}
.stairsafe-designed-safety {
	max-width: 1180px;
}
.stairsafe-card-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: min(3.5vw, 60px);
	padding: 0 0 50px;
}
.stairsafe-card {
	display: grid;
	grid-template-rows: auto 1fr;
}
.stairsafe-card-header {
	background: #8F023D;
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 12px 20px;
	white-space: nowrap;
}
.stairsafe-card:nth-of-type(odd) .stairsafe-card-header {
	justify-content: space-between;
}
.stairsafe-card:nth-of-type(odd) .stairsafe-card-header::after {
	content: "";
}
.stairsafe-card:nth-of-type(odd) .stairsafe-card-header::after,
.stairsafe-card-icon {
	display: block;
	width: 38px;
	height: 38px;
}
.stairsafe-card-body {
	background: #ffffff;
	padding: 21px;
	text-align: center;
}

/*StairSafe Detects*/
.stairsafe-detects-section {
	width: 90%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 112px 0;
}
.stairsafe-detects-opener {
	max-width: 450px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.stairsafe-detects-opener-title {
	display: flex;
	align-items: center;
	gap: 16px;
}
.stairsafe-exclamation-mark {
	display: block;
	width: 85px;
	height: auto;
}
.stairsafe-info-container {
	flex: 1;
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-evenly;
	gap: 20px;
	list-style: none;
}
.stairsafe-info {
	position: relative;
	font-weight: 700;
	color: #8F023D;
	margin: 0 0 0 20px;
}
.stairsafe-info::before {
	content: "";
	display: block;
	position: absolute;
	left: -20px;
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
	height: 15px;
	background-image: url(/assets/stairsafe/check-icon.svg);
	background-position: center;
	background-size: contain;
}

/*Included StairSafe*/
.included-stairsafe {
	width: 90%;
	margin: 0 auto;
	padding: 48px 0;
}
.included-stairsafe-item {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.stairsafe-phone-android {
	width: min(25vw, 250px);
	transform: rotate(1deg);
}

@media screen and (max-width: 1150px) and (min-width: 1024px) {
	.stairsafe-card-container {
		gap: 20px;
	}
	.stairsafe-card-header {
		gap: 10px;
		padding: 12px 15px;
	}
}
@media screen and (max-width: 1023px) {
	/*StairSafe Card Section*/
	.stairsafe-card-container {
		grid-template-columns: auto;
		justify-content: center;
	}
	.stairsafe-card {
		max-width: 400px;
	}
	
	/*StairSafe Detects*/
	.stairsafe-detects-section {
		flex-direction: column;
		align-items: initial;
	}
	.stairsafe-info-container {
		width: 100%;
	}
}
/*
@media screen and (max-width: 1023px) and (min-width: 200px) {
	.stairsafe-card:nth-of-type(2) .stairsafe-card-header {
		justify-content: space-between;
	}
	.stairsafe-card:nth-of-type(2) .stairsafe-card-header::after {
		content: "";
		display: block;
		width: 38px;
		height: 38px;
	}
}
*/

@media screen and (max-width: 825px) and (min-width: 701px) {
	.stairsafe-grid-content-container.included-stairsafe h2.stairsafe-grid-content {
		grid-column: 1 / span 2;
	}
	.stairsafe-grid-content-container.included-stairsafe .stairsafe-grid-content-phone {
		grid-row: 2;
	}
}
/*
@media (max-width: 800px) and (min-width: 651px) {
	.stairsafe-phone-angle {
		grid-row: 1 / span 2;
	}
	.stairsafe-contact-container {
		grid-column: 1 / span 2;
	}
}
*/
@media screen and (max-width: 700px) {
	.stairsafe-grid-content-container.included-stairsafe {
		grid-template-columns: 1fr;
	}
	.stairsafe-grid-content-container.included-stairsafe .stairsafe-grid-content-phone {
		grid-column: 1;
		grid-row: 2;
		width: min(60vw, 250px);
	}
}
@media screen and (max-width: 800px) {
	.stairsafe-grid-content-container {
		grid-template-columns: 1fr;
	}
	.stairsafe-grid-content-phone.stairsafe-phone-angle {
		grid-column: 1;
		grid-row: 2;
		width: min(48vw, 200px);
	}
	.stairsafe-contact-btn-container .btn.btn-action {
		padding: 15px;
	}
}
@media (max-width: 549px) {
	.stairsafe-contact-btn-container {
		flex-direction: column;
		width: fit-content;
		gap: 15px;
	}
	.stairsafe-contact-btn-container .btn.btn-action {
		width: 100%;
	}
}
@media screen and (max-width: 475px) {
	/*StairSafe Card Section*/
	.stairsafe-card-container {
		padding: 0;
	}
	.stairsafe-card-header {
		gap: 10px;
	}
	/*StairSafe Detects*/
	.stairsafe-detects-section {
		padding: 75px 0;
	}
	.stairsafe-exclamation-mark {
		width: 65px;
	}
	.stairsafe-info-container {
		grid-template-columns: 1fr;
	}
}

.newstairsafebanner img {
    width: 100%;
    max-width: 2300px;
    /* height: auto; */
    max-height: 200px;
}

a.home-stairsafe-link:hover{
	 opacity: 1;
}


.summer-banner {
	display: none;
}

@media screen and (min-width: 1580px) {
	.summer-banner {
		display: block;
		background-image: url("/assets/images/summer-banner.png");
		background-repeat: no-repeat;
		background-size: 100%;
		height: 80px;
		background-position: center;
		position: relative;
		z-index: -1;
		top: -10px;
	}

	.banner-text {
		text-transform: uppercase;
		color: #FFFFFF;
		height: 100%;
		/*font-family: "Nunito", sans-serif;*/
		font-family: "Museo Sans Rounded", sans-serif;
		font-size: 24px;
		font-weight: 500;
		/*line-height: 22px;*/
		line-height: 1;
		letter-spacing: 0.06em;
		text-align: center;
		display: inline-flex;
		width: 100%;
		margin: 0 auto;
	}

	.banner-bold {
		/*font-family: "Nunito", sans-serif;*/
		font-family: "Museo Sans Rounded", sans-serif;
		font-size: 28px;
		font-weight: 700;
		/*line-height: 22px;*/	
		line-height: 1;
		letter-spacing: 0.06em;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		/*width: auto;*/
	}
}