#toppicback {height: 450px; background-color: #4C505F;}
@media (max-width: 949px) {#toppicback {height: 390px;}}

.caption {font-size: 75px; text-align: center; margin: auto; left: 0; right: 0; width: 90%; top: 45%; -webkit-transform: translateY(-45%); -ms-transform: translateY(-45%); transform: translateY(-45%);}
.cap1 {font-size: 1em;} .cap2 {margin-top: 15px; font-size: .5em;}

@media (min-width: 1360px) {.cap1 span {display: block;}}

@media (max-width: 980px) {.cap1 {font-size: 7.5vw;} .cap2 {font-size: 4vw;}}
@media (max-width: 715px) {#toppicback {height: 45vw;}}
@media (max-width: 470px) {#toppicback {height: 57vw;} .cap2 {font-size: 24px;} .cap2 span {display: block;}}

.toppic {background-position: 50% 20%;}
@media (min-width: 801px) {.toppic {background-image: url("../images/toppics/contact-cambridge-exteriors-south-jersey1.jpg");}}
@media (max-width: 800px) {.toppic {background-image: url("../images/toppics/contact-cambridge-exteriors-south-jersey2.jpg");}}
@media (max-width: 500px) {.toppic {background-image: url("../images/toppics/contact-cambridge-exteriors-south-jersey3.jpg");}}

/*-------------------------------*/

/*Contact Info*/

#contactinfo {text-align: center;} .conamecont {font-size: 22px; line-height: 1.35; font-weight: 600;}

#formarea {position: relative; margin: 0 auto 20px auto;} #formhead {color: #FFF;}
#formarea table {position: relative; width: 100%; padding: 5px;}
#formhead div {position: relative; text-align: center; margin: auto; vertical-align: middle; padding-bottom: 5px; line-height: 1.35;}
#formhead span {display: block; font-size: 28px; font-weight: 600; padding: 6px 0 5px 0; color: #000;}

::placeholder, :-ms-input-placeholder, ::-ms-input-placeholder {color: #999; opacity: 1;}
#helpwith:first-child, #howheard:first-child, #posit:first-child, #refest:first-child {color: #999;}
#helpwith option:not(:first-child), #howheard option:not(:first-child), #posit option:not(:first-child), #refest option:not(:first-child) {color: #000;}

@media (min-width: 1021px) {#formarea {width: 85%;}} @media (max-width: 1020px) {#formarea {width: 100%;}}

input[type=text] {height: 24px;}
input[type=text], textarea, select
{padding: 8px; margin-bottom: 3px; background-color: #F6F6F6; font-size: 16px !important; border: 1px solid #DDD; width: calc(100% - 18px);}
select {width: 100%; height: 40px;} textarea {height: 80px; font-family: inherit;}
.title {text-align: left; font-size: 18px; line-height: 1.4; padding: 17px 0 1px 0;}

form label {position: absolute; font-size: 13px; text-align: right; margin-top: -22px;}
form label, label[for=helpwith], label[for=howheard] {width: calc(100% - 10px) !important;}
/*label[for=helpwith], label[for=howheard] {width: calc(98.5% - 26px) !important;}*/

input[type=submit] {font-size: 20px; margin-top: 20px; padding: 7px 12px 5px 12px; -webkit-transition: 0.3s; cursor: pointer;}
input.error, textarea.error, select.error {border: 2px solid red;} 
.required {text-align: center; margin: 15px auto; font-weight: 400; font-size: 16px;} .required, .req, form label, #error {color: #F10000;}
#success, #error {display: none; position: absolute; width: 100%; text-align: center; margin-top: -170px; font-size: 24px; line-height: 1.25; font-weight: 600;}
#error {color: #F10000;}

@media (max-width: 360px) {.howheard {font-size: .85em !important;}} @media (max-width: 330px) {.howheard {font-size: .8em !important;}}
@media (max-width: 350px) {input[type=submit] {font-size: 17px;}}
@media (max-width: 310px) {.howheard {letter-spacing: -.5px;}}