@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');



/* Your Desing Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

:root {
    --coral: #F44932;
    --coral-hover: #BF3D2C;
    --tan: #F7F7F0;
    --grey: #212121;
    --green: #F2F7F3;
    --blue: #F5FAFC;
}
/* feature */
.feature {
    background: #fff;
    padding: clamp(20px, 5vw, 40px);
    border-radius: 15px;
    border: 1px solid #E4EAEB;
    box-shadow: 0px 8px 30px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 8px 30px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 8px 30px 0px rgba(0,0,0,0.1);
    transition: all .25s ease;
    margin-bottom: 3rem;
}
p:empty {
  display: none;
}
.feature:hover {
    box-shadow: 0px 10px 38px 0px rgba(0,0,0,0.15);
    -webkit-box-shadow: 0px 10px 38px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 10px 38px 0px rgba(0,0,0,0.15);
}
.feature h4 {
    font-size: clamp(1.8rem, 5vw, 2.2rem);
    margin-bottom: 1.8rem;
}
.feature h4 img {
    height: 18px;
    width: auto;
}
.feature .label {
    padding: 3px 12px;
    border-radius: 4px;
    font-family: "Fira Code", monospace;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--grey);
    margin-bottom: 2rem;
}
.feature .label img {
    height: 18px;
    width: auto;
    align-items: baseline;
    display: inline;
    margin-right: 8px;
}
.feature.quiz .label {
    background: #E0F1FF;
    display: inline-flex;
    align-items: center;
}
.feature.quiz ul {
    margin-bottom: 2rem;
}
.feature.quiz ul li {
    list-style: none;
    margin-bottom: 6px;
    margin-left: 0;
}
.feature.quiz button {
    background: #F8F8F8;
    display: block;
    width: 100%;
    border-radius: 4px;
    padding: 3px 15px;
    text-align: left;
    color: var(--grey);
    font-size: 1.6rem;
    font-weight: normal;
    letter-spacing: normal;
}
.feature.quiz button:hover {
    background: #F2F2F2;
}
.feature.listen .label {
    background: #E0FFEB;
    display: inline-flex;
    align-items: center;
}
.feature.listen h4 {
    cursor: pointer;
    padding: 6px 0px;
    transition-delay:.5s;
    border-radius: 4px;
    background: #fff;
    transition: all .5s ease;

}
.feature.listen h4:hover {
    padding: 6px 10px;
    background: #F2F2F2;
}

.feature-footer  {
    font-size: 1.4rem;
    color: #ACACAC;
}
.feature-footer .feedback.answered {
    font-weight: bold;
    color: #e96654;
    transition: all 0.3s ease;
}
.feature.fact h4 {
    margin-bottom: 0;
}
.feature.fact .label {
    background: #FFE0F2;
    display: inline-flex;
    align-items: center;
}
.feature.meaning .label {
    background: #FFFBE0;
    display: inline-flex;
    align-items: center;
}
.feature.meaning .feature-info p {
    margin-bottom: 1.6rem;
    line-height: 130%;
    font-size: 1.6rem;
}
.feature.meaning .feature-info span {
    font-weight: 500;
}
.feature.meaning .feature-info ul {
    border-left: 2px solid #C7C7C7;
    font-size: 1.6rem;
    padding-left: 10px;
}
.feature.meaning .feature-info li {
    list-style: none;
    margin-bottom: 0px;
}
.feature-mb .feature {
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem)
}
/* sections */
.greenbg {
    background: var(--green);
}
.bluebg {
    background: var(--blue);
}
.cta {
    padding: clamp(25px, 10vw, 160px) 0;
}
.cta-img img  {
    max-height: 500px;
    margin-top: 30px;
}
@media (min-width: 900px) {
    .cta-img img  {
        margin-top: 0;
    }
}
.audio-bars {
    width: 24px;
    height: 24px;
    fill: var(--grey);
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}
/* form */
.success-message {
    padding: 15px 20px;
    margin-bottom: 30px;
    background: #D7F8ED;
    border-radius: 4px;
}
.error-message {
    padding: 15px 20px;
    margin-bottom: 30px;
    background: #FDDFDF;
    border-radius: 4px;

}
.slideup {
    display: block;
    position: fixed;
    height: 100vh;
    width: 100%;
    background: rgba(255,255,255, .9);
    z-index: 33;
    top: 100vh;
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);
    transition: top .55s ease-in-out;
    border-top: 1px solid #C9C9C3;
    overflow: scroll;
}
.slideup-wrap {
    padding: clamp(25px, 10vw, 160px) 0;
}
.signup-show {
    top: 0;
}
.button-hide {
    display: none!important;
}
/* masonary */
.masonry {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(30px, 4vw, 80px);
}

.masonry-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 4vw, 80px);
}
.calendar .button img {
    height: 60%;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    margin-top: -5px;
}


/* Responsive: Stack in 1 column on smaller screens */
@media (max-width: 768px) {
    .masonry {
        flex-direction: column;
    }

    .masonry-column {
        width: 100%;
    }
}
/* Preloader */
#preloader {
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:999999;
}
#status {
    width:37px;
    height:46px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(../images/status.gif);
    background-size: 100%;
    background-repeat:no-repeat;
    background-position:center center;
    margin:-50px 0 0 -15px;
}
/* top */
#top {
    position: fixed;
    background: rgba(33, 33, 33, .95);
    width: 100%;
    z-index: 999;
    height: clamp(60px, 5vw, 80px);
    top: 0;
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);
}
.nav-wrap li.off-trigger {
    width: 100%;
    height: 100vh;
}
.nav-wrap {
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 1;
    top: 59px;
    left: -100vw;
    height: 100vh;
    overflow: hidden;
    transition: all .35s ease-in-out;
    background: rgba(33, 33, 33, .95);
    padding: 0;
}
.nav-wrap.show {
    height: 100vh;
    left: 0;
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
}
.nav-wrap a {
    color: #fff;
    font-size: 2.4rem;
    text-decoration: none;
    transition: all 100ms ease-out;
    display: block;
    line-height: 140%;
    padding: 15px 2.5rem;
    font-weight:
}
.nav-wrap a:hover {
    color: var(--coral);
    text-decoration: none;
}
.nav-wrap ul {
    list-style: none;
    margin-bottom: 0;
    border-bottom: 1px solid #333;
}
.nav-wrap li {
    border-top: 1px solid #333;
    padding: 2rem 0;
    width: 100%;
    margin-bottom: 0;
    margin-left: 0;
}
.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 100%;
    color: #ffffff;

    position: unset;
}
#burger-toggle {
    display: block;
}
.burger {
    display: flex;
    height: 24px;
    width: 24px;
    align-items: center;
    position: relative;
    margin-right: 12px;
    transition: all .30s ease-in-out;
    justify-content: center;
}
.burger-lines {
    width: 90%;
    border-radius: 30px;
    height: 2px;
    background: #fff;
    display: flex;
}
.burger-lines::before {
    content: '';
    width: 90%;
    border-radius: 30px;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 13%;
    transition: all 240ms ease-in-out;
}
.burger-lines::after {
    content: '';
    width: 90%;
    border-radius: 30px;
    height: 2px;
    background: #fff;
    position: absolute;
    bottom: 13%;
    transition: all 240ms ease-in-out;
}
.burger.b-show {
    transform: rotate(-180deg);
    border-radius: 100%;
    background:  #E96654;
}
.burger-lines.l-show {
    width: 70%;
    border-radius: 30px;
    height: 3px;
    background: #fff;
    display: flex;
}
.burger-lines.l-show::before{
    content: '';
    width: 100%;
    border-radius: 30px;
    height: 2px;
    background: green;
    position: absolute;
    top: 40%;
    opacity: 0;
}
.burger-lines.l-show::after {
    content: '';
    width: 100%;
    border-radius: 30px;
    height: 2px;
    background: green;
    position: absolute;
    bottom: 40%;
    opacity: 0;
}
/* responsive  menu */
@media only screen and (min-width: 768px) {
    #burger-toggle {
        display: none;
    }
    .nav-wrap li.off-trigger {
        width: 0;
        height: 0;
        display: none;
    }
    .nav-wrap {
        position: static;
        width: 100%;
        z-index: 9999;
        margin-top: 0;
        transition: all 0s;
        background: none;
        padding: 0;
        top: 0;
        height: auto;
        text-align: left;
        height: auto;
        left: auto;
    }
    .nav-wrap.show {
        height: auto;
        left: auto;
    }
    .nav-wrap a {
        color: #fff;
        font-size: 1.4rem;
        font-weight: 400;
        text-decoration: none;
        transition: all .25s ease-out;
        display: inline-block;
        line-height: 1rem;
        align-items: center;
        display: inline-flex;
        line-height: 1rem;
        margin-left: 0;
        padding: 10px 5px;
    }

    .nav-wrap ul {
        list-style: none;
        margin-bottom: 0;
        border-bottom: 0;
    }
    .nav-wrap li {
        border-top:0;
        padding: 0;
        display: inline;
        margin-right: 1rem;
        margin-left: 0;
        margin-bottom: 0;
    }
}
.top-right {
    text-align: right;
    height: 100%;
    display: flex;
    align-items: center;
}
.top-right .button {
    margin-bottom: 0px;
    font-size: 1.1rem;
    padding: 0px 14px;
    line-height: 28px;
    height: 28px;
    align-self: center;
}
.top-left {
    text-align: left;
    height: 100%;
    flex-grow: 1;
    display: flex;
    align-items: center;
    width: auto
}
.nav-logo {
    margin-right: clamp(15px, 3vw, 40px);
}
.main-logo {
    text-align: center;
    margin-top: 0px;
}
.top-left img {
    width: clamp(85px, 8vw, 145px);
    display: block;

}
.logo {
    margin-top: clamp(2px, 7vw, 6px);

}
.flex-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
}

.flex-items, .benefits {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    width: 100%;
}

/* form */

.field-items {
    margin-bottom:8px;
}

.field-items input {
    width: 100%;
}
.field-items textarea {
    width: 100%;
    height: 100px
}




/* hero */
.hero {
    height: auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--tan); /* optional */
}

.hero-container {
    max-width: 1500px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 4%;
    padding-top: 80px;
    padding-bottom: 30px;
    align-items: center;
}
.tagline, .hero-img {
    display: flex;
    flex-direction: column;
    justify-content: left;
}
.tagline p {
    font-size: clamp(2.9rem, 2.8vw, 5.2rem);
    line-height: 110%;
    font-weight: 600;
    margin-bottom: 20px;
}
.tagline h1 {
    line-height: 2.6rem;
    margin-bottom: 10px;
}
.tagline h1 span {
    font-size: clamp(2rem, 4vw, 2.4rem);
}
.tagline h2 {
    font-size: clamp(1.6rem, 4vw, 2.0rem);
    line-height: 140%;
}
.tagline svg {
    width: 50%;
    height: auto;
    margin: 0 auto;
    margin-bottom: -6px;
    max-width: 220px;
}
.tagline {
    width: 30.6666666667%;

}
.hero-img {
    width: 65.3333333333%;
}
.hero-img img {
    width: 100%;
    height: auto;
    display: block;
}
@media screen and (max-width: 900px) {
    .hero {
        height: auto;
        min-height: auto;
        min-height: auto;
        display: block;
        padding: clamp(25px, 10vw, 160px) 0;
    }
    .hero-container {
        flex-direction: column;
        align-items: center;
        height: auto;
        gap: 20px;
        padding-top: 65px;
        padding-bottom: 0;
    }

    .tagline, .hero-img {
        width: 100%;
    }

    .hero-img img {
        max-width: 100%;
        height: auto;
    }
}
/* intro */
.introimg img {
    margin-top: 30px;
    margin-bottom: 30px;
}





/* sections */
.section {
    padding: clamp(25px, 10vw, 160px) 0;
}
.graphic-man img {
    width: 100%;
    max-width: 900px;
}
.review {
    text-align: center;
    margin: 0 auto;
}
img.quote-graphic {
    width: 40px;
    height: auto;
}
.quote {
    font-size: clamp(1.6rem, 2vw, 2.4rem);
    font-weight: 600;
    text-align: left;
    line-height: 140%;
    color: var(--grey);
    position: relative;
}
.by  {
    font-size: 20px;
    font-weight: 500;
    position: relative;
    margin-top: 30px;

}
.by img {
    position: absolute;
    z-index: -1;
    top: -8px;
    left: 40px;
    width: 150px;

}
.box {
    max-width: 100%;
    margin: 0 auto;
    border-radius: 0;
    padding: 50px 0px;
}
.did-you-know {
    background-image: url("../images/map-outline.svg");
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
}
.did-you-know img {
    width: 100%;
    margin-top: 0px;
    max-width: 490px;
}
.signup-table {
    background-color: #F3F3EB;
    background-size: 100%;
    background-position: 0 360px;
    background-repeat: no-repeat;
}
.mini-price-table .price-table {
    text-align: left;
    border-collapse: collapse;
    font-size: 1.5rem;
    font-weight: 500;
}



.esc-hint {
    font-size: 0.85rem;
    color: #999;
    text-align: center;
    margin-top: 1rem;
    padding-right: 1rem;
    font-style: italic;
}

.esc-hint kbd {
    background: #eee;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: monospace;
    font-size: 0.9em;
}
/* table */
div.price-table {
    width: 100%;
    font-size: 2.2rem;
    margin-top: 10px;
    font-weight: 500;
}
.divTable.price-table .divTableCell, .divTable.price-table .divTableHead {
    padding: 5px 0;
    text-align: center;
    width: 100%;
}
.divTable.price-table .divTableHeading {
}
.divTable.price-table .divTableHeading .divTableHead {
    font-weight: 600;
    font-size: 1.6rem;

}
.price-table .tableFootStyle {
}
.price-table .tableFootStyle .links {
    text-align: right;
}
.price-table .tableFootStyle .links a{
    display: inline-block;

}
.price-table.outerTableFooter {
    border-top: none;
}
.price-table.outerTableFooter .tableFootStyle {
    padding: 0;
}
/* DivTable.com */
.divTable{ display: block; }
.divTableRow { display: block; border-bottom: 1px solid #CECECE; padding: 20px 0}
.divTableHeading { display: block;}
.divTableCell, .divTableHead { display: block; width: 100%}
.divTableHeading { display: none;}
.divTableFoot { display: block;}
.divTableBody { display: block; border-top: 1px solid #CECECE;}
.divTableCell a.button {
    margin-bottom: 0px;
    text-decoration: none;
}

.cell-width-button {
    width: 190px;
}
.footer {
    background: var(--grey);
    color: #ffffff;
    margin-top: 0px;
    padding: 50px 0;
    padding: clamp(30px, 8rem, 80px) 0 clamp(10px, 8rem, 30px) 0;
}
.footer h4 {
    color: #ffffff;
}
.footer hr {
    margin: 40px 0;
    opacity: .5;
}
.latest-posts {

}
.latest-posts li {
    list-style-type: none;
    padding: 4px 0;
    margin-left: 0;
}
.latest-posts li a {
    color: #fff;

}
.subscribe input {
    width: 100%;
    padding: 20px 15px!important;
}
.subscribe button {
    border-top-style: none;
    border: none;
    margin-top: 15px;
}
.inside-hero {
    background: var(--tan);
}
.inside-hero img {
    height: auto;
    width: 100%;
    max-height: 400px;
    display: inline-block;
    margin-top: clamp(30px, 13vw, 250px);
    margin-bottom: 30px;
}
@media screen and (max-width: 900px) {
    .inside-hero img {
        margin-top: clamp(0px, 0vw, 250px);
    }
}
.inside-tag-wrap {
}

.inside-tag {
    padding-bottom: clamp(30px, 3vw, 70px);
    padding-top: clamp(100px, 16vw, 300px);
}






.benefits span {
    font-weight: 700;
}
.benefits-box h3 {
    margin-bottom: 20px
}
.facts-box {
    background: #E9F4EC;
}
.facts span {
    font-weight: 700;
}
.facts-box h3 {
    margin-bottom: 20px
}
.copyright {
    font-size: clamp(1.2rem, 5vw, 1.4rem);
}
.copyright p {
    margin-bottom: 0;
}


.post-meta {
    font-size: 1.4rem;
}
div.post-item:first-child {
    padding: 0 0 20px 0;
}
.post-item {
    padding: 20px 0;
    border-bottom: 1px solid #D6D6D6;
}
.post-content {
}
.post-more {
    margin-top: 20px;
}
.post-title h2 {
    margin-bottom: 5px;
}

.post-main h1 {
    margin-bottom: 4px!important;
}
.post-main-content img {
    width: 100%;
    height: auto;
}
.pagination {
    margin-top: 30px;
}
article .section {
    margin-top: 80px;
}

.contact {
    margin-top: 88px;
}


@media (min-width: 1000px) {

    .top-right .button {
        margin-bottom: 0px;
        font-size: 1.2rem;
        padding: 0px 18px;
        line-height: 40px;
        height: 38px;
    }
    .nav-wrap {
        text-align: left;
    }
    /* hero */

    #hero-back {
        height: auto;
        width: 100%;
        display: table;
        position: relative;
    }

    .review {
        text-align: center;
        margin: 0 auto;

    }


    .box {
        max-width: 85%;
        margin: 0 auto;
        border-radius: 20px;
        padding: 120px 30px;
    }
    .did-you-know {
        background-image: url("../images/map-outline.svg");
        background-size: 100%;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .did-you-know p {
    }
    .signup-table {
        background-color: #F3F3EB;
        background-size: 100%;
        background-position: 0 360px;
        background-repeat: no-repeat;
    }

    /* table */
    div.price-table {
        width: 100%;
        text-align: left;
        border-collapse: collapse;
        font-size: 2rem;
        margin-top: 10px;
        font-weight: 500;
    }
    .divTable.price-table .divTableCell, .divTable.price-table .divTableHead {
        border-bottom: 1px solid #CECECE;
        padding: 20px 0;
        text-align: left;
        width: auto;
    }
    .divTable.price-table .divTableHeading {
    }
    .divTable.price-table .divTableHeading .divTableHead {
        font-weight: 700;

    }
    .price-table .tableFootStyle {
    }
    .price-table .tableFootStyle .links {
        text-align: right;
    }
    .price-table .tableFootStyle .links a{
        display: inline-block;

    }
    .price-table.outerTableFooter {
        border-top: none;
    }
    .price-table.outerTableFooter .tableFootStyle {
        padding: 0;
    }
    /* DivTable.com */
    .divTable{ display: table; }
    .divTableRow { display: table-row;   transition: all .23s ease-in-out; }
    .divTableHeading { display: table-header-group;}
    .divTableCell, .divTableHead { display: table-cell;}
    .divTableHeading { display: table-header-group;}
    .divTableFoot { display: table-footer-group;}
    .divTableBody { display: table-row-group;}
    .divTableRow:hover {
        background: rgba(255, 255, 255, .5);
    }
    .divTableCell a.button {
        margin-bottom: 0px;
    }
    .cell-width-button {
        width: 190px!important;
    }
    .learn-hero {
        background-color: #F3F3EB;
    }
    .about-hero {
        background-color: #E9F2F4;
    }
    .learn-hero #tag-wrap h1, .about-hero #tag-wrap h1 {
        margin-bottom: 8px;
    }
    .learn-hero .seven {
        text-align: center;
        position: relative;
    }
    .learn-hero img, .about-hero img {
        width: 90%;
        height: auto;
    }
    .learn-hero #tag-wrap h2 {
        line-height: 1.05;
    }
    .learn-hero #tag-wrap .sub-header {
        margin-bottom: 60px;
        font-size: 2.8rem;
    }

    .margin-bottom-spacing-60 {
        margin-bottom: 60px;
    }
    .margin-bottom-spacing-30 {
        margin-bottom: 30px;
    }
    .benefits-box {
        background: #E9F2F4;
    }
    .benefits span {
        font-weight: 700;
    }
    .benefits-box h3 {
        margin-bottom: 40px
    }
    .facts-box {
        background: #E9F4EC;
    }
    .facts span {
        font-weight: 700;
    }
    .facts-box h3 {
        margin-bottom: 40px
    }
    .post-meta {
        font-size: 1.4rem;
    }

    .post-item {
        padding: 60px 0;
        border-bottom: 1px solid #D6D6D6;
    }
    .post-content {
    }
    .post-more {
        margin-top: 20px;
    }
    .post-title h2 {
        margin-bottom: 5px;
    }
    div.post-item:first-child {
        padding: 0 0 60px 0;
    }

    .flex-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
        align-content: stretch;
    }

    .flex-items, .benefits {
        display: block;
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: auto;
        align-self: auto;
        order: 0;
        margin-right: 4%;
        width: 30.666666666%;
    }
    /* form */
    .flex-items:nth-child(3n-0) {
        margin-right: 0;
    }

    .fields-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
        align-content: stretch;
    }

    .field-items:nth-child(2n) {
        margin-right: 0px;
    }
    .field-items:nth-child(5) {
        width: 100%;
        margin-right: 0;
    }

    .field-items input {
        width: 100%;
    }
    .field-items textarea {
        width: 100%;
        height: 100px
    }
}


























/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* Note
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
    font-size: 62.5%;
}
body {
    font-size: clamp(1.5rem, 4vw, 1.8rem);
    line-height: clamp(150%, 5vw, 170%);
    font-weight: 400;
    font-family: "Inter", sans-serif;
    color: var(--grey);
}
.sub-header {
    font-size: 2.2rem;
    line-height: 125%;
    letter-spacing: 0;
    font-weight: 600;
}
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 2rem;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
    color: var(--grey);
    /* text-wrap: balance; */
}
h1 {
    font-size: clamp(3.8rem, 8vw, 6rem);
    line-height: 110%;
    font-weight: 700;
}
h2 {
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    line-height: 110%;
    font-weight: 600;
}
h3 { font-size: 2.1rem; line-height: 125%; font-weight: 600; }
h4 { font-size: 1.8rem; line-height: 130%; font-weight: 600; }
h5 { font-size: 1.6rem; line-height: 130%; font-weight: 600; }

/* Larger than phablet */
@media (min-width: 550px) {
    body {
        font-size: 1.8rem; /* currently ems cause chrome bug misinterpreting rems on body element */
        line-height: 170%;
        font-weight: 400;
        font-family: "Inter", sans-serif;
        color: var(--grey);
    }

    h3 { font-size: 3.0rem; }
    h4 { font-size: 2.2rem; }
    h5 { font-size: 2.2rem; }
}

p {
    margin-top: 0;
}
/* Links  */
a {
    color: var(--coral);
    text-decoration: none;
    transition: color .25s ease;
}
a:hover {
    color: var(--coral-hover);
    text-decoration: underline;
}
/* Buttons  */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    display: inline-block;
    height: 38px;
    padding: 0 18px;
    color: #fff;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background-color: var(--coral);
    border-radius: 4px;
    cursor: pointer;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
    border: none;
    transition: background-color .15s ease;
    width: auto;
    align-self: flex-start;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
    color: #fff;
    outline: 0;
    background-color: var(--coral-hover);
    text-decoration: none;
}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
    color: #FFF;
    background-color: var(--grey);
    border-color: none;
}
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
    color: #FFF;
    background-color: #3B3A3A;
    border-color: none;
}


@media (max-width: 500px) {
    .button,
    button,
    input[type="submit"],
    input[type="reset"],
    input[type="button"] {
        width: 100%;
    }
}

/* Forms  */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
    height: 38px;
    padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
    background-color: #fff;
    border: 1px solid #D1D1D1;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
}
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
textarea {
    min-height: 65px;
    padding-top: 6px;
    padding-bottom: 6px;
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border: 1px solid #33C3F0;
    outline: 0;
}
label,
legend {
    display: block;
    margin-bottom: .5rem;
    font-weight: 600;
}
fieldset {
    padding: 0;
    border-width: 0;
}
input[type="checkbox"],
input[type="radio"] {
    display: inline;
}
label > .label-body {
    display: inline-block;
    margin-left: .5rem;
    font-weight: normal;
}


/* Lists  */
ul {
    list-style: circle inside;
    list-style-type: disc;
}
ol {
    list-style: decimal inside;
}
ol, ul {
    padding-left: 0;
    margin-top: 0;
    list-style-position: outside;
}
ul ul,
ul ol,
ol ol,
ol ul {
    margin: 1.5rem 0 1.5rem 3rem;
    font-size: 90%;
}
li {
    margin-bottom: 1rem;
    margin-left: 20px;
}
li p {
    margin-bottom: 0;
}


/* Code */
code {
    padding: .2rem .5rem;
    margin: 0 .2rem;
    font-size: 90%;
    white-space: nowrap;
    background: #F1F1F1;
    border: 1px solid #E1E1E1;
    border-radius: 4px;
}
pre > code {
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre;
}
pre {  overflow: scroll; }


/* Tables  */
th,
td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #E1E1E1;
}
th:first-child,
td:first-child {
    padding-left: 0;
}
th:last-child,
td:last-child {
    padding-right: 0;
}


/* Spacing */
button,
.button {
    margin-bottom: 1rem;
}
input,
textarea,
select,
fieldset {
    margin-bottom: 1.5rem;
}
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
    margin-bottom: 3rem;
}

figure {
    margin: 0 0 0 0;
}

iframe {
    margin-bottom: 40px;
    width: 100%;
    aspect-ratio: 16 / 9;
}



/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
    position: relative;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.column,
.columns {
    width: 100%;
    float: left;
    box-sizing: border-box;
}

/* For devices larger than 400px */
@media (min-width: 768px) {
    .container {
        width: 90%;
        padding: 0;
    }
}

/* For devices larger than 768px */
@media (min-width: 900px) {

    .column,
    .columns {
        margin-left: 4%;
    }
    .column:first-child,
    .columns:first-child {
        margin-left: 0;
    }


    .one.column,
    .one.columns                    { width: 4.66666666667%; }
    .two.columns                    { width: 13.3333333333%; }
    .three.columns                  { width: 22%;            }
    .four.columns                   { width: 30.6666666667%; }
    .five.columns                   { width: 39.3333333333%; }
    .six.columns                    { width: 48%;            }
    .seven.columns                  { width: 56.6666666667%; }
    .eight.columns                  { width: 65.3333333333%; }
    .nine.columns                   { width: 74.0%;          }
    .ten.columns                    { width: 82.6666666667%; }
    .eleven.columns                 { width: 91.3333333333%; }
    .twelve.columns                 { width: 100%; margin-left: 0; }

    .three.column               { width: 30.6666666667%; }
    .two-thirds.column              { width: 65.3333333333%; }

    .one-half.column                { width: 48%; }

    /* Offsets */
    .offset-by-one.column,
    .offset-by-one.columns          { margin-left: 12.66%; }
    .offset-by-two.column,
    .offset-by-two.columns          { margin-left: 17.3333333333%; }
    .offset-by-three.column,
    .offset-by-three.columns        { margin-left: 26%;            }
    .offset-by-four.column,
    .offset-by-four.columns         { margin-left: 34.6666666667%; }
    .offset-by-five.column,
    .offset-by-five.columns         { margin-left: 43.3333333333%; }
    .offset-by-six.column,
    .offset-by-six.columns          { margin-left: 52%;            }
    .offset-by-seven.column,
    .offset-by-seven.columns        { margin-left: 60.6666666667%; }
    .offset-by-eight.column,
    .offset-by-eight.columns        { margin-left: 69.3333333333%; }
    .offset-by-nine.column,
    .offset-by-nine.columns         { margin-left: 78.0%;          }
    .offset-by-ten.column,
    .offset-by-ten.columns          { margin-left: 86.6666666667%; }
    .offset-by-eleven.column,
    .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

    .offset-by-three.column,
    .offset-by-three.columns    { margin-left: 34.6666666667%; }
    .offset-by-two-thirds.column,
    .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

    .offset-by-one-half.column,
    .offset-by-one-half.columns     { margin-left: 52%; }

}

/* Optional 4 Column layout For devices larger than 768px */
/*@media (min-width: 1000px) {
.three.columns {
width: 48%;
}
.one-fourth.column {
width: 48%;
}
.one-fourth.column:nth-of-type(3), .three.columns:nth-of-type(3)  {
margin-left: 0;
}
}
/* Optional 4 Column layout For devices larger than 768px */
/* @media (min-width: 1200px) {
.three.columns {
width: 22%;
}
.one-fourth.column {
width: 22%;
}
.one-fourth.column:nth-of-type(3), .three.columns:nth-of-type(3)  {
margin-left: 4%;
}
}


/* utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
    width: 100%;
    box-sizing: border-box;
}
.u-max-full-width {
    max-width: 100%;
    box-sizing: border-box;
}
.u-pull-right {
    float: right;
}
.u-pull-left {
    float: left;
}


hr {
    margin-top: 8rem;
    margin-bottom: 8.5rem;
    border-width: 0;
    border-top: 1px solid #E1E1E1;
}


/* Clearing */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
    content: "";
    display: table;
    clear: both;
}


/* Media Queries */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {

}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {

}

/* Larger than tablet */
@media (min-width: 750px) {

}

/* Larger than desktop */
@media (min-width: 1000px) {

}

/* Larger than Desktop HD */
@media (min-width: 1200px) {

}



/* Typography Utilities */
.u-caps { text-transform: uppercase; letter-spacing: .u-15em }
.u-text-right { text-align: right; }
.u-text-left { text-align: left; }
.u-text-center { text-align: center; }
.u-bold     { font-weight: bold; }
.u-regular  { font-weight: normal; }
.u-italic   { font-style: italic; }
.u-white	{ color: #fff; }
.u-gray { color: #848484; }
.u-dark-gray { color: #282828; }
.u-red { color: #bd2c00;}
.u-green { color: #6cc644;}

/* layout */
.u-relative { position: relative; }
.u-absolute { position: absolute; }
.u-fixed { position: fixed; }
.u-zindex-1 { z-index: 1; }
.u-zindex-2 { z-index: 2; }
.u-zindex-3 { z-index: 3; }

.u-hide { display: none; }
.u-show .u-block  { display: block; }
.u-no-scroll { overflow: hidden !important; }
.u-scroll { overflow: visible; }
.u-inline       { display: inline; }
.u-inline-block { display: inline-block; }
.u-flex         { display: flex; }
.u-flex-1 {
    flex: 1;
}

.u-m0 { margin: 0;}
.u-mt0 { margin-top: 0; }
.u-mr0 { margin-right: 0;}
.u-mb0 { margin-bottom: 0;}
.u-ml0 { margin-left: 0;}

.u-fit         { max-width: 100%; }
.u-half-width  { width: 50% }
.u-full-width  { width: 100%; }
.u-full-height { height: 100%; }

.u-right { float: right; }
.u-left { float: left; }
.u-centered { display: block; float: none; margin-right: auto; margin-left: auto }

.u-bg-white         { background-color: #fff; }
.u-bg-gray          { background-color: #848484; }
.u-bg-dark-gray     { background-color: #282828; }
.u-bg-light-gray {background-color: #eeeeee;}
.u-bg-green     { background-color: #6cc644; }
.u-bg-red     { background-color: #bd2c00; }

.u-img-circle { border-radius: 50%; }

.u-bg-fixed { background-attachment:inherit !important; }
@media (min-width: 980px) {
    .u-bg-fixed {	background-attachment: fixed !important; 	}
}

/* Clearing */
.u-container:after, .u-row:after,  .u-cf {
    content: "";
    display: table;
    clear: both;
}
/* Clear Fix */
.u-clearfix:before, .u-clearfix:after {
    content: "";
    display: table;
}
.u-clearfix:after {
    clear: both;
}
.u-clearfix {
    zoom: 1; /* ie 6/7 */
}




/* Nomrmalize
–––––––––––––––––––––––––––––––––––––––––––––––––– */

html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

body {
    margin: 0;
}

main {
    display: block;
}

/* h1 {
font-size: 2em;
margin: 0.67em 0;
}
*/
hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

a {
    background-color: transparent;
}

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

img {
    border-style: none;
}
img {
    width: 100%;
    height: auto;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

button,
input { /* 1 */
    overflow: visible;
}

button,
select { /* 1 */
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}

progress {
    vertical-align: baseline;
}

textarea {
    overflow: auto;
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

details {
    display: block;
}

summary {
    display: list-item;
}

template {
    display: none;
}

[hidden] {
    display: none;
}
html {
    scroll-behavior: smooth
}