/* FORM CONTAINER STARTS HERE  */
.thank-you-container {
	display: block;
    width: 100%;
    max-width: 650px;
	place-items: center;
    padding: 4rem .5rem .5rem;
    background-color: #F9F8F5;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: auto;
	margin: auto;
}
.thank-you-container h1{
    padding: .8rem 1rem;
    text-align: left; 
    font-size: var(--gutterLg);
    line-height: 1.8rem;
}
.thank-you-container h2{
    padding: .8rem 1rem .3rem;
    text-align: left; 
    font-size: var(--fontSizeMd);
    line-height: 1.8rem;
}
.thank-you-container p{
    padding: 0 1rem;
    text-align: left; 
    font-size: var(--gutterMd);
    line-height: 1.2rem;
}

.form-container {
	display: block;
    width: 100%;
    max-width: 420px;
	place-items: center;
    padding: 1rem .5rem .5rem;
    background-color: #F9F8F5;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: auto;
	margin: auto;
}

.form-container h1 {
    color: #0f0F0F;
}

.form-container h2 {
    color: #1f386e;
    padding: 0 .5rem;
	font-weight: bold;
    font-size: var(--gutterLg);
    line-height: 1rem; 
}



/* *------------ FORM 1 STARTS HERE -------------* */
.wf1 fieldset {
    margin: 1rem 0;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: .5rem 2%;
}

.wf1 legend {
    color: #445ba9;
    padding: 0 .5rem;
	font-weight: bold;
    font-size: var(--gutterMd);  
}

.wf1 label {
    display: block;
    padding-top: .1rem;
    color: #0f0f0f;
    font-size: var(--gutterMd);
	font-weight: 400;
 
}
#info {
    line-height: 1rem;
    padding-bottom: 1rem;
    font-size: var(--gutterMd);
    color: #9c2c13;
}



.wf1 div {
    padding-top: 1rem;
    color: #141927;
    font-size: .9rem;
}
.wf1 input[type="text"],
.wf1 input[type="tel"],
.wf1 input[type="email"],
.wf1 input[type="url"],
.wf1 input[type="date"],
.wf1 textarea,
.wf1 input[type="number"]
{
    background-color: #d4d8d9;
    display: block;
    border: solid 1px #999;
    border-radius: 6px;
    padding: .1rem .75rem;
    color: #3d3c3c;
    width: 100%;
    max-width: 400px;
    appearance: none;
}

.wf1 input[type="submit"]
{
    border: none;
    background-image: linear-gradient(#9c2c13, #6f200c);
    color: #fff;
    border-radius: 6px;
    padding: .8rem;
    width: 96%;
    max-width: 400px;
    margin: -1rem 2% 2rem 2%;
    box-shadow: 1px 1px 4px #999;
}

.wf1 input:required {
    border-bottom: solid 8px rebeccapurple;
}
.wf1 input:required:valid {
    border-bottom: solid 8px rgb(2, 102, 7);
}
/* 
@media (min-width: 769px) { 
    .form-container {
        display: block;
        width: 100%;
        max-width: 700px;
        place-items: center;
        padding: 1rem .5rem .5rem;
        background-color: #F9F8F5;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        height: auto;
        margin: auto; 
    }
    #name-f, .wf1 fieldset {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 1rem 0;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: .5rem 2%;
    }
    #info {
  
        font-weight: 400; 
        line-height: 1rem;
        padding-bottom: 1rem;
        font-size: var(--gutterMd);
        color: #9c2c13;
        max-width: 700px;
      
        
    }

    .wf1 input[type="text"],
    .wf1 input[type="email"]
    {
        background-color: #d4d8d9;
        display: inline;
        border: solid 1px #999;
        border-radius: 6px;
        padding: .1rem .75rem;
        color: #3d3c3c;
        width: 100%;
        max-width: 200px;
        appearance: none;
    }
    
    .wf1 textarea {
        width: 100%;
        max-width: 600px;
    }
    
    .wf1 input[type="submit"]
    {
        border: none;
        background-image: linear-gradient(#9c2c13, #6f200c);
        color: #fff;
        border-radius: 6px;
        padding: .8rem;
        width: 96%;
        max-width: 400px;
        margin: -1rem 2% 2rem 2%;
        box-shadow: 1px 1px 4px #999;
    }

    .wf1 input:required {
        border-bottom: solid 8px rebeccapurple;
    }
    .wf1 input:required:valid {
        border-bottom: solid 8px rgb(2, 102, 7);
    }
} */