#wrapper{

    flex-direction: column;
    display: flex;



}

.pricing-nav{
    margin-right: 20px;
}

.page-content h1{
    font-size: 4rem;

}


.page-content.completed{
    font-size: 2rem;

}


.form-title{
    margin-bottom: 0px;

}

.form-subtitle{
    margin-top: 0.25rem;
    padding: 0;
    margin-bottom: 0.5rem;
}

.formulate-input-element--button--label{

    color: #b83b5e !important;
    border-color: #b83b5e !important;
}

button{
    border-color: #b83b5e !important;
}

button:active{
    background-color: #c6627e !important;

}

.formulate-input[data-classification=box] .formulate-input-element input:focus~.formulate-input-element-decorator {
    border-color: #b83b5e !important;
}

.formulate-input[data-classification=text] input:focus {
    border-color: #b83b5e !important;
}

.formulate-input .formulate-input-element{

    max-width: none;
}

.formulate-input[data-classification=group] [data-is-repeatable] .formulate-input-group-repeatable-remove{
    top: 10px !important;
}

.formulate-input[data-classification=box] .formulate-input-element input[type=checkbox]:checked~.formulate-input-element-decorator:before {
    background-color: #b83b5e !important;
}

.formulate-input[data-classification=box] .formulate-input-element input[type=radio]:checked~.formulate-input-element-decorator:before {
    background-color: #b83b5e !important;
}

.formulate-input[data-classification=box] .formulate-input-element input[type=radio]:checked~.formulate-input-element-decorator {
    border-color:  #b83b5e !important;
}

.formulate-input[data-classification=box] .formulate-input-element input[type=checkbox]:checked~.formulate-input-element-decorator {
    border-color: #b83b5e !important;
}

.page-content{

    max-width: 72rem;
    margin: 0 auto;
    margin-top: 12rem;
    min-height: 50rem;
    padding: 1rem;
}


html {

    font-family: 'Josefin Sans', sans-serif;
}


#content{
    margin-left: auto;
    margin-right: auto;
    flex-grow: 1;
    max-width: 72rem;

    margin-top: 6rem;

}



#banner, #reminder-form{
    letter-spacing: 0;
    padding-left: 2rem;
    padding-right: 2rem;
    line-height: 1.5;

}


#reminder-form{
    padding-top: 0rem;
    margin-top: 3rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
    border: 1px solid #e2e8f0;
    margin-bottom: 15rem;

}

.link-nav a{
    display: block;
}

.pricing-nav{
    text-align: center;
    margin-top: 10px;
}

#logo{
    max-height: 25px;
}

@media (min-width: 640px){

    .link-nav{
        display: flex;
        flex-direction: row-reverse;
    }

    #logo{
        max-height: 34px;
    }

    .pricing-nav{
        text-align: left;
        margin-top: 0;
    }

    #banner {
        padding-top: 10rem;
        padding-bottom: 4rem;
    }

    #reminder-form {
        margin-top: 10rem;
        padding-bottom: 4rem;
    }


    #content{
        margin-top: 2rem;
    }
}



@media (min-width: 768px){
    #banner-content{
        flex-direction: row;


    }
}



#banner-content{
    align-items: center;
    flex-wrap: wrap;
    display: flex;
    line-height: 1.5;
}


#banner-copy{
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    display: flex;

}




@media (min-width: 768px){
    #banner-copy{
        width: 50%;
        text-align: left;
    }
}




#question{
    width: 100%;
    text-transform: uppercase;

}

@media (max-width: 768px){
    #question{
        text-align: center;
    }
}



#heading{
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    line-height: 1.25;
    font-size: 3rem;
    font-weight: 700;
    text-align: center;


}


@media (min-width: 768px){
    #heading{
        text-align: left;
    }

}


#descriptor{

    text-align: center;

}



@media (min-width: 640px){
    #descriptor {
        margin-bottom: 1rem;
        line-height: 1.5;
    }

}

@media (max-width: 768px){
    #pricing {
        text-align: center;
    }


    #banner .cab{
        margin: 0 auto;
        margin-top: 0.5rem;
    }
}


@media (min-width: 768px){
    #descriptor{
        text-align: left;
    }

}


.cab{
    --text-opacity: 1;
    color: #fff;
    color: rgba(255,255,255,var(--text-opacity));
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-weight: 600;
    border-width: 1px;
    border-radius: 9999px;
    --border-opacity: 1;
    border-color: rgba(203,213,224,var(--border-opacity));
    --bg-opacity: 1;
    background-color: #b83b5e;
    background-color: rgba(184,59,94,var(--bg-opacity));
    text-decoration: inherit;
    line-height: 1.5;
    text-wrap: none;
    white-space: nowrap;

}


.cab:hover {
    --bg-opacity: 1;
    background-color: #c6627e;
    background-color: rgba(198, 98, 126,var(--bg-opacity));
}


@media (min-width: 640px){
    .cab {
        margin-left: 0;
        margin-right: 0;
    }
}


@media (min-width: 768px){
    .cab {
        text-align: left;
    }
}


#pricing{
    font-size: .875rem;
    line-height: 1.25rem;
    --text-opacity: 1;
    color: #a0aec0;
    color: rgba(160,174,192,var(--text-opacity));
    width: 100%;
    margin-top: .7rem;
    margin-bottom: 2rem;
}


@media (min-width: 640px){
    pricing {
        padding-left: .25rem;
    }
}



@media (min-width: 768px){
    #pricing {
        text-align: left;
    }
}

#banner-image-wrapper{
    width: 100%;
    text-align: center;

}




@media (min-width: 768px){
    #banner-image-wrapper {
        width: 40%;
    }
}

@media (min-width: 768px){
    #banner-image-wrapper {
        width: 50%;
        position: relative;
        top: -50px;
    }
}

@media (min-width: 640px){
    #banner-image-wrapper  {
        margin-top: 1rem;
    }
}


#banner-image{

    z-index: 50;
    width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
    text-align: center;
    margin: 0 auto;
    max-width: 25rem;
}

@media (min-width: 768px){
    #banner-image{
        width: 95%;
        margin-left: 5%;
    }
}



.form-wrapper {
    padding: 2em;
    border: 1px solid #a8a8a8;
    border-radius: .5em;
    box-sizing: border-box;
}
@media (min-width: 650px) {
    .attendee {
        display: flex;
    }
}

@media (min-width: 720px) {
    .attendee {
        display: block;
    }
}

@media (min-width: 850px) {
    .attendee {
        display: flex;
    }
    .attendee .formulate-input {
        margin-right: 1.5em;
    }
}
.attendee .formulate-input {
    margin-right: 2em;
    margin-bottom: 0;
}



strong.price {
    margin-top: 1.25em;
    margin-bottom: 0;
    height: 2.5em;
    display: inline-flex;
    align-items: center;
}

code {
    margin-top: 2em;
}


@media (min-width: 1280px){
    #hiw-wrapper {
        max-width: 1280px;
    }
}


@media (min-width: 1024px){
    #hiw-wrapper{
        max-width: 1024px;
    }
}


@media (min-width: 768px){
    #hiw-wrapper{
        max-width: 768px;
    }
}

@media (min-width: 640px){
    #hiw-wrapper{
        max-width: 640px;
    }
}

#hiw-wrapper{
    margin-left: auto;
    margin-right: auto;
    margin: 2rem;
    max-width: 64rem;


}


#hiw-heading{
    width: 100%;
    --text-opacity: 1;
    color: #2d3748;
    color: rgba(45,55,72,var(--text-opacity));
    text-align: center;
    margin-top: .5rem;
    padding-top: .75rem;
    margin-bottom: .5rem;
    line-height: 1.25;
    font-weight: 700;
    font-size: 2.25rem;
    text-align: center;
}


@media (max-width: 640px){
    #hiw-heading{
        padding-top: 4rem;
    }
}


#hiw-line-wrapper{
    width: 100%;
    margin-bottom: 1rem;
    box-sizing: border-box;
    border: 0 solid #e2e8f0;
    line-height: 1.5;

}

#hiw-line{
    background: linear-gradient(90deg,#4b45b2,#b5b1ff);
    width: 16rem;
    padding-top: 0;
    padding-bottom: 0;
    opacity: .25;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    height: .25rem;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;

}


section{
    width: 100%;
}



.step-wrapper{
    margin-top: 2rem;
    flex-wrap: wrap;
    display: flex;
    align-items: center;

}

@media (min-width: 640px){
    .step-wrapper{
        padding: 1.5rem;
        flex-direction: row;
        margin-top: 1.5rem;
    }
}


.step-copy{
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;


}



@media (min-width: 640px){
    .step-copy{
        width: 50%;
    }
}



.step-heading{
    --text-opacity: 1;
    color: #2d3748;
    color: rgba(45,55,72,var(--text-opacity));
    margin-bottom: .75rem;
    line-height: 1;
    font-size: 1.875rem;
    font-weight: 700;
    margin: 0;


}

.step-content{

    --text-opacity: 1;
    color: #4a5568;
    color: rgba(74,85,104,var(--text-opacity));
    margin: 0;
    margin-top: 0.5rem;
    line-height: 1.5;
}




.step-image-wrapper{
    width: 100%;
    margin-top: .75rem;
    margin-bottom: 4rem;

}



@media (min-width: 640px){
    .step-image-wrapper {
        width: 50%;
        margin-top: 0;
        margin-bottom: 0rem;
    }
}


.step-image{
    width: auto;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: 19rem;
    display: block;
    vertical-align: middle;
}


@media (min-width: 640px){
    .step-image{
        width: 70%;
        height: auto;
    }
}



*{
    box-sizing: border-box;
    border: 0 solid #e2e8f0;
}


@media (min-width: 640px){
    .reverse {
        flex-direction: row-reverse;
    }

}

#header{
    z-index: 10;
    width: 100%;
    top: 0;
    position: fixed;
    margin-top: 0;

}


#header .cab{
    z-index: 50;
    border: 4px solid white;
    box-shadow: none;

}


#nav{
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
    border-bottom-width: 1px;
    --border-opacity: 1;
    border-color: #edf2f7;
    border-color: rgba(237,242,247,var(--border-opacity));
    --bg-opacity: 1;
    background-color: #fff;
    background-color: rgba(255,255,255,var(--bg-opacity));
}




#nav-inner{

    padding-left: .5rem;
    padding-right: .5rem;
    margin-left: auto;
    margin-right: auto;
}



@media (min-width: 1024px){
    #nav-inner{
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 640px){
    #nav-inner{
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}




#nav-content{

    height: 5.5rem;
    justify-content: space-between;
    display: flex;
}






.flex{

    display: flex;
}


#logo-wrapper{
    flex-shrink: 0;
    align-items: center;
    display: flex;
}



a{
    color: inherit;
    text-decoration: inherit;
    background-color: transparent;
    --bg-opacity: 1;
}



#logo{
.width: 14rem;
.margin-top: .75rem;
    .height: 4.5rem;
    margin-left: 20px;
    position: relative;
    .top: -5px;
}



img, video {
    max-width: 100%;
    height: auto;
}
audio, canvas, embed, iframe, img, object, svg, video {
    display: block;
    vertical-align: middle;
}



body {
    margin: 0;
}


.items-center {
    align-items: center;
}







#footer-nav{

    box-shadow: 0 1px 10px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
    padding-top: .75rem;
    padding-bottom: .75rem;
    border-bottom-width: 1px;
    --border-opacity: 1;
    border-color: #edf2f7;
    border-color: rgba(237,242,247,var(--border-opacity));
}

#footer-links-wrapper{

    padding-left: 1rem;
    padding-right: 1rem;
}


@media (min-width: 1024px){
    #footer-links-wrapper {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}



@media (min-width: 640px){
    #footer-links-wrapper  {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

}





.justify-center {
    justify-content: center;
}



.footer-link{
    padding-left: .75rem;
    padding-right: .75rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25rem;
    --text-opacity: 1;
    color: #4a5568;
    color: rgba(74,85,104,var(--text-opacity));
    transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);

}



@media (min-width: 640px){
    .footer-link {
        padding-top: .25rem;
        margin-top: .25rem;
    }
}

a {
    color: inherit;
    text-decoration: inherit;
}
constructed stylesheet
a {
    background-color: transparent;
}



#hiw-cab{
    padding-top: 3rem;
    padding-bottom:6rem;

}