html {color: #222;font-size: 1em;line-height: 1.4;}::-moz-selection {background: #b3d4fc;text-shadow: none;}::selection {background: #b3d4fc;text-shadow: none;}hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0;}audio, canvas, iframe, img, svg, video {vertical-align: middle;}fieldset {border: 0;margin: 0;padding: 0;}textarea {resize: vertical;}.browserupgrade {margin: 0.2em 0;background: #ccc;color: #000;padding: 0.2em 0;}.hidden {display: none !important;}.sr-only {border: 0;clip: rect(0, 0, 0, 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;}.sr-only.focusable:active, .sr-only.focusable:focus {clip: auto;height: auto;margin: 0;overflow: visible;position: static;white-space: inherit;width: auto;}.invisible {visibility: hidden;}.clearfix:before, .clearfix:after {content: " ";display: table;}.clearfix:after {clear: both;}@media only screen and (min-width: 35em) {}@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {}@media print {*, *:before, *:after {background: transparent !important;color: #000 !important;box-shadow: none !important;text-shadow: none !important;}a, a:visited {text-decoration: underline;}a[href]:after {content: " (" attr(href) ")";}abbr[title]:after {content: " (" attr(title) ")";}a[href^="#"]:after, a[href^="javascript:"]:after {content: "";}pre {white-space: pre-wrap !important;}pre, blockquote {border: 1px solid #999;page-break-inside: avoid;}thead {display: table-header-group;}tr, img {page-break-inside: avoid;}p, h2, h3 {orphans: 3;widows: 3;}h2, h3 {page-break-after: avoid;}}

body {height:100%; font-family:'Montserrat', arial, verdana; background:none; color:#666;}

#container {height:100%; min-height:100%; display:flex; flex-direction:column;}
#siteheader, .mainform, .footer {display:flex; flex-direction:column; justify-content:center;}

.no-margin {margin:0 !important;}
.no-top-margin {margin-top:0 !important;}
.no-bottom-margin {margin-bottom:0 !important;}
.no-top-bottom-margin {margin-top:0 !important; margin-bottom:0 !important;}
.no-left-margin {margin-left:0 !important;}
.no-right-margin {margin-right:0 !important;}
.no-left-right-margin {margin-left:0 !important; margin-right:0 !important;}

#siteheader {text-align:center; padding:10px 40px 20px; position:relative; z-index:10;}
#siteheader a {display:block; margin-top:10px;}
#siteheader img {width:150px;}

.form-title-head {
  white-space: pre-wrap;
  margin-bottom: 30px;
  color: #000000;
  font-size: 24px;
}
.page-title {color:#000; text-align:center;}
.page-title h1 {font-size:22px; font-weight:700; margin:20px 0;}
.page-title p {margin:0; font-size:11px;}
.page-title span.bullet-spacing {color:#84dfeb; padding:0 3px; font-size:16px;}

@media (max-width:767px){
  html {background:#fff;}
  .page-title {color:#000;}
  .show-contractor-results .page-title {display:none;}
  .show-contractor-results .main-form fieldset {padding-top:5px; margin-top:10px;}
  .mobilehide {display:none !important;}
}
@media (min-width:768px){
  #siteheader {padding:20px 40px 30px;}
  #siteheader img {width:210px;}

  .page-title h1 {font-size:30px; margin:70px 0 30px;}
  .page-title p {margin:2px 0 0; font-size:14px;}
  .page-title span.bullet-spacing {color:#84dfeb; padding:0 5px; font-size:18px;}

  .show-contractor-results .page-title {display:none;}
  .show-contractor-results .main-form fieldset {padding-top:0; margin-top:0;}
  .desktophide {display:none !important;}
}

.main-form {text-align:center; position:relative; flex:1; margin-top: 40px;}
.main-form fieldset .stepwrap {
  background: #31b4c51f;
  width: 90%;
  max-width: 630px;
  border: 0 none;
  border-radius: 10px;
  box-sizing: border-box;
  margin: 0 auto 40px;
  position: relative;
  display: block;
}

.main-form fieldset .stepwrap2 {
  background: #ffa41930;
  width: 75%;
  border: 0 none;
  border-radius: 10px;
  box-sizing: border-box;
  margin: 0 auto 40px;
  position: relative;
  display: block;
}

.main-form fieldset:not(:first-of-type) {display:none;}
.main-form .ms-title {font-size:16px; color:#174146;}
.main-form .ms-subtitle {font-weight:300; font-size:13px;}
.main-form .ms-subtitle strong {font-weight:700; color:#000;}

.main-form .ms-note {
  background:#F2F2F2; font-size:13px; color:#000; padding:30px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; column-gap:20px; row-gap:20px;
}
.main-form .ms-note:before {
  content:" "; display:inline-block; width:50px; height:50px;
  background:url(../img/icon-notice.png); background-size:contain; background-repeat:no-repeat; background-position:center;
}

.main-form .fineprint {font-size:10px; line-height:20px; padding:10px; display:block;}
.main-form .fineprint a {color:#666;}
.main-form img.trust-img {max-width:250px; margin:30px auto 0;}
.main-form .logos {padding-left:20px;}
.main-form .logos img {max-width:100px;}
.main-form .logos img:last-of-type {max-width:80px}
div.footer { 
  margin-top: 30px;
  text-align:center;
  width: 90%;
  margin: 0 auto;
  font-size: 12px;
}
div.footer ul {margin:0; padding:0 0 20px;}
div.footer li {display:inline-block; font-size:12px; padding:0 10px;}
div.footer li a {color:#aaa;}

@media (max-width:767px){
  .main-form {padding-top:20px;}
  .main-form fieldset .stepwrap,
  .main-form fieldset .stepwrap2 {width:100%; margin:0 auto; border-radius:0; padding-left:20px; padding-right:20px; padding-top:0; box-shadow:none;}
}
@media (min-width:768px){
  .main-form fieldset .stepwrap,
  .main-form fieldset .stepwrap2 {padding:70px 60px;}
  .main-form .ms-title {font-size:20px; color:#174146;}
  .main-form .ms-subtitle {font-size:16px;}
}

.main-form label.label-checkbox i {-webkit-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease;}
.main-form input, .main-form textarea, select {
  padding: 15px;
  margin: 3px 0;
  border: 2px solid #ffa41985;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 15px;
}
.main-form input:focus, .main-form input:focus-visible, .main-form textarea:focus, .main-form textarea:focus-visible {border:3px solid #ffa41985;}
.main-form label.label-item.disabled {background-color:#bbb; cursor:not-allowed;}
.main-form label.label-item.disabled:before {
  content:"Appointments must be 1.5 hours apart";
  position:absolute; top:0; left:50%; margin-left:-70px; z-index:10;
  background:#666; color:#fff; font-size:11px;
  width:120px; padding:10px;
  opacity:0;
  -webkit-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease;
}
.main-form label.label-item.disabled:after {
  content:" ";
  position:absolute; top:0; left:50%; margin-left:-10px;
  width:0; height:0;
  border-style:solid;
  border-width:10px 10px 0 10px;
  border-color:#666666 transparent transparent transparent;
  opacity:0;
  -webkit-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease;
}
.main-form label:hover.label-item.disabled:before {opacity:1; top:-50px;}
.main-form label:hover.label-item.disabled:after {opacity:1;}
.main-form label.label-item.dates-button.disabled {display:none;}

.main-form input.radio-item, .main-form input.checkbox-item {display:none;}
.main-form label.label-item {
  display:block;
  background:#fff; position:relative;
  border:2px solid #ffa41985;
  border-radius:5px;
  padding:20px 35px; margin:5px;
  cursor:pointer;
  -webkit-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease;
}
.main-form label.label-item.with-images,
.main-form .contractor-info label.label-item {
  display: inline-block;
}
.main-form label.label-item:hover {border-color:#b5d334;}
.main-form label.label-item img {display:block; width:100%; max-width:100px; margin:0 auto 10px;}
.main-form label.label-item span {font-size:13px;}
.main-form label.label-item:hover span, .main-form input.radio-item:checked + label span {color:#000;}
.main-form label.label-item.disabled, .main-form label.label-item.disabled:hover {border-color:#bbb;}
.main-form label.label-item.disabled:hover span {color:#666;}
.main-form input.radio-item:checked + label {border-color:#b5d334; background:#b5d334;}
.main-form input.radio-item:checked + label span {color:#fff;}
.main-form label.label-item-visible {margin:25px 0 5px; display:block; font-size:15px;}

.main-form label.label-checkbox {background:none; padding:20px 0; border:0; position:relative;}
.main-form label.label-checkbox:before {
  content:" ";
  background:#fff;
  border:3px solid #ffa41985; border-radius:10px;
  display:inline-block;
  width:47px; height:47px;
  cursor:pointer;
  margin-bottom:-22px; margin-right:15px;
}
.main-form label.label-checkbox i {position:absolute; left:50%; margin-left:-88px; top:34px; font-size:24px; color:#48b9c6; opacity:0;}
.main-form input.checkbox-item:checked + label i {opacity:1;}

.main-form .fineprint input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance:none;
  /* Remove most all native input styles */
  appearance:none;
  /* For iOS < 15 */
  background-color:#fff;
  /* Not removed via appearance */
  margin:0;
  margin-right:10px;
  font-size:2em;
  color:#bbb;
  width:24px;
  height:24px;
  border-radius:10px;
  transform:translateY(-0.075em);
  display:inline-grid;
  place-content:center;
}
.main-form .fineprint input[type="checkbox"]::before {
  content: "";
  width:0.65em;
  height:0.65em;
  clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform:scale(0);
  transform-origin:bottom left;
  transition:120ms transform ease-in-out;
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}
.main-form .fineprint input[type="checkbox"]:checked::before {transform:scale(1);}

@media (min-width:768px){
  .main-form label.label-item {padding:20px 50px;}
  .main-form label.label-item img {max-width:120px;}
  .main-form label.label-item span {font-size:15px;}
  .main-form label.label-checkbox i {margin-left:-97px;}
}



/* ---------- CONTRACTOR DETAILS ---------- */
.contractor-title, .contractor-info, .confirm-title, .pros-calling {
  display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
  border-radius:10px;
  margin-bottom:10px;
  text-align:left;
  -webkit-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease;
}

.contractor-title, .pros-calling {background:#ffa41985; padding:17px 40px; font-size:15px; font-weight:700; color:#50767a; cursor:pointer;}
.contractor-title i {padding-left:5px; font-size:13px;}
.contractor-title-datetime span {background:#50767a; display:inline-block; color:#fff; border-radius:3px; padding:6px 10px; margin-right:10px; margin-left:-30px; font-weight:400; font-size:12px;}
.contractor-title-datetime span i {padding:0 5px 0 0;}
.confirm-title {background:#fff; border:3px solid #ffa41985; padding:25px 27px; font-size:13px; font-weight:700; color:#000;}
.confirm-title i {padding-right:5px; font-size:13px; color:#49bac6;}
.pros-calling {cursor:default;}
.pros-calling::after {content:' '; display:table; clear:both;}
.pro-name {text-align:left; display:block; float:left; width:50%;}
.pro-address, .pro-website {text-align:right; display:block; font-size:12px; padding-top:4px; font-weight:400; float:right; width:50%;}
.pro-website {
  width:auto;
  background:#fb9b26; color:#fff;
  margin:0; padding:5px 25px;
  display:inline-block; border:0 none; border-radius:10px;
  font-weight:700; font-size:14px; cursor:pointer; text-decoration:none;
}

.contractor-info {background:#fff; border:3px solid #ffa41985; padding:30px 27px 25px; position:relative;}
.ci-verified {color:#fff; background:#83BC50; padding:5px 10px 3px; border-radius:3px; font-weight:400; text-transform:uppercase; font-size:11px; position:absolute; top:10px; right:10px;}
.ci-verified i {margin-right:2px;}
.ci-title {margin-bottom:20px; display:block;}
.ci-title strong {font-size:15px; color:#000; display:block; margin:0 0 5px;}
.ci-title address {font-size:13px; font-style:normal;}
.ci-date, .ci-time {margin-bottom:20px; display:block; position:relative;}
.ci-date strong, .ci-time strong {font-weight:400; text-transform:uppercase; font-size:13px; color:#58c1cd; display:block; margin-bottom:10px;}
.main-form .ci-date label.label-item, .main-form .ci-time label.label-item {padding:7px 0; margin:3px .1%; width:24%; text-align:center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.main-form .ci-date label.label-item span, .main-form .ci-time label.label-item span {font-size:13px;}

@media (max-width:380px){
  .contractor-title-datetime span {margin-right:0;}
  .main-form .ci-date label.label-item span, .main-form .ci-time label.label-item span {font-size:10px;}
}
@media (max-width:767px){
  .contractor-title, .pros-calling {padding:17px 20px;}
  .contractor-info {padding:30px 17px 25px;}
  .contractor-title-datetime span {display:block; margin-left:0; margin-bottom:10px;}
  .pro-name {float:none; width:auto; display:block;}
  .pro-address, .pro-website {text-align:left; display:block; float:none; width:auto; padding-top:8px;}
  .pro-website {padding-top:5px; margin-top:8px; width:auto; display:inline-block;}
}
@media (min-width:768px){
  .contractor-info {padding:30px 37px;}
  .contractor-title-datetime span {margin-left:-54px;}
}

.main-form .ms-navigation {position:relative;}
.main-form .ms-navigation::after {content:' '; display:table; clear:both;}
.main-form .btn-next, .main-form .btn-next i, .main-form .btn-next-fixed, .main-form .btn-back {-webkit-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease;}
.main-form .btn-next {
  background:#fb9b26; color:#fff;
  margin:30px auto; padding:17px 25px; min-width:240px;
  display:inline-block; border:0 none; border-radius:10px;
  font-weight:700; font-size:20px; text-transform:uppercase;
  box-shadow:0 4px 5px 4px rgba(0,0,0,.15);
  cursor:pointer;
}
.main-form .mobileprogress .btn-next {width:100%; max-width:350px; font-size:14px; margin:0 auto; float:none;}
.main-form button.btn-next {display:block; width:300px; position:relative;}
.main-form .btn-next:hover {background:#c26b00;}
.main-form .btn-next span {text-shadow:rgba(0,0,0,.15) 2px 2px 0; letter-spacing:1px;}
.main-form .btn-next i {font-size:16px; padding-left:5px; opacity:.4; position:relative; left:0;}
.main-form .btn-next:hover i {opacity:.9; left:10px;}
.main-form .btn-next.disabled {background:#fb9b26; box-shadow:none; cursor:not-allowed;}
.main-form .btn-next.disabled i {font-size:0;}

.main-form .btn-next.disabled:before {
  content:"Missing information above";
  position:absolute; top:auto; bottom:57px; left:50%; margin-left:-70px; z-index:10;
  background:#666; color:#fff; font-size:11px;
  width:120px; padding:10px;
  opacity:0;
  -webkit-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease;
}
.main-form .btn-next.disabled:after {
  content:" ";
  position:absolute; bottom:57px; left:50%; margin-left:-10px;
  width:0; height:0;
  border-style:solid;
  border-width:10px 10px 0 10px;
  border-color:#666666 transparent transparent transparent;
  opacity:0;
  -webkit-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease;
}
.main-form .btn-next:hover.disabled:before {opacity:1; bottom:85px;}
.main-form .btn-next:hover.disabled:after {opacity:1; bottom:75px;}

.main-form .btn-back {
  position:absolute; bottom:35px; left:50%; margin-left:-200px; display:block;
  border:3px solid #a0cdd3; border-radius:100px;
  width:40px; height:40px;
  line-height:40px;
  background:none; color:#a0cdd3;
  cursor:pointer;
}
.main-form .btn-back:hover {color:#174146; border-color:#174146;}

.btn-orange {background:#fb9b26; color:#fff;
  margin:7px auto; padding: 10px 10px;
  display:inline-block; border:0 none; border-radius:10px;
  font-weight:700; font-size:14px; cursor:pointer; text-decoration:none;
  position: relative;
}
.btn-outline {
  color:#4abac6;
  margin:0; padding:8px 15px;
  display:inline-block; border:3px solid #4abac6; border-radius:10px;
  font-weight:700; font-size:14px; cursor:pointer; text-decoration:none;
  -webkit-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease;
}
.btn-outline:hover {background:#4abac6; color:#fff;}

@media (max-width:767px){
  .main-form .btn-back {position:absolute; top:auto; bottom:0; left:50%; margin:0 0 0 -23px; text-align:center;}
  .main-form .btn-next {float:none; margin:20px auto 60px; padding:17px 0; width:auto; font-size:18px;}
  .main-form .btn-next-fixed {position:fixed; bottom:0; right:20px;}
}

/* next button validation popups */
#step-zipCode .btn-next.disabled:before {content:"Enter your zipcode above";}
#step-estimateAction .btn-next.disabled:before {content:"Select an option above";}
#step-type .btn-next.disabled:before {content:"Select an option above";}
/*#step-roof-material .btn-next.disabled:before {content:"Select a material above";}*/
/*#step-window-amount .btn-next.disabled:before {content:"Select an amount above";}*/
#step-consider-replacement .btn-next.disabled:before {content:"Select an option above";}
#step-name .btn-next.disabled:before {content:"Enter your name above";}
#step-address .btn-next.disabled:before {content:"Enter your information above";}
#step-emailPhone .btn-next.disabled:before {content:"Valid Phone & Email Required";}
#step-schedule .btn-next.disabled:before {content:"Book an appointment above";}
#step-missing-phone-number .btn-next.disabled:before {content: "Enter a valid number above";}
#step-missing-address .btn-next.disabled:before {content:"Enter your address above";}

.fs-title {font-size:15px; text-transform:uppercase; color:#2C3E50; margin-bottom:10px;}
.fs-subtitle {font-weight:normal; font-size:13px; color:#666; margin-bottom:20px;}

.main-form fieldset#step-roof-material .stepwrap,
.main-form fieldset#step-roof-material .stepwrap2,
.main-form fieldset#step-consider-replacement .stepwrap,
.main-form fieldset#step-consider-replacement .stepwrap2,
.main-form fieldset#step-window-amount .stepwrap,
.main-form fieldset#step-window-amount .stepwrap2 {max-width:1100px;}
.main-form fieldset#step-match-confirmation .btn-back {position:relative; top:0; left:0; margin:0 auto; text-align:center;}
.main-form fieldset#step-emailPhone .ms-title, .main-form fieldset#step-schedule .ms-subtitle, .main-form fieldset#step-match-confirmation .ms-title {margin-bottom:5px;}
.main-form fieldset#step-emailPhone .ms-subtitle, .main-form fieldset#step-schedule .ms-title, .main-form fieldset#step-match-confirmation .ms-subtitle {margin-top:5px;}
.main-form .ci-date label.previous-dates-button, .main-form .ci-date label.next-dates-button {
  position:absolute; top:-8px; right:0;
  border:0; border-radius:20px;
  background:#666; color:#fff; font-size:14px; line-height:26px;
  width:26px; height:26px; padding:0;
  -webkit-transition:all 0.6s ease; -o-transition:all 0.6s ease; transition:all 0.6s ease;
}
.main-form .ci-date label.previous-dates-button {right:32px;}
.main-form .ci-date label.previous-dates-button i {position:relative; left:-1px;}
.main-form .ci-date label.previous-dates-button:hover, .main-form .ci-date label.next-dates-button:hover {background:#222;}
.main-form .ci-date:before {content:"see more dates:"; position:absolute; right:67px; font-size:12px;}
.main-form fieldset#step-type .stepwrap span:nth-child(6),
.main-form fieldset#step-type .stepwrap2 span:nth-child(6) {display:block; margin:0 auto; max-width:364px;}
.main-form .animation-complete {margin:-50px 0 -30px;}

@media (max-width:380px){
  .main-form .ci-date {padding-bottom:40px;}
  .main-form .ci-date label.previous-dates-button, .main-form .ci-date label.next-dates-button {top:auto; bottom:0;}
  .main-form .ci-date:before {top:auto; bottom:8px;}
}
@media (max-width:767px){
  .main-form fieldset#step-match-confirmation .btn-back {top:30px;}

  /* hide the mobile next and previous buttons */
  .main-form #step-schedule .ms-navigation, .main-form #step-confirmation .ms-navigation {height:100px;}
  .main-form #step-schedule .ms-navigation span,
  .main-form #step-confirmation .ms-navigation span,
  .main-form #step-confirmation .ms-navigation button {display:none !important;}
}
@media (min-width:768px){
  .main-form #step-schedule .btn-next {font-size:16px;}
  .main-form fieldset#step-type .stepwrap span:nth-child(6),
  .main-form fieldset#step-type .stepwrap2 span:nth-child(6) {max-width:464px;}
}

.mobileprogress {display:none;}

@media (max-width:767px){
  .mobileprogress {
    display:block; width:100%;
    padding:20px 20px 20px;
    background:#fff;
    position:fixed; bottom:-100%; left:0; z-index:10;
    -webkit-box-shadow:0 0 20px 1px rgba(0,0,0,.6); box-shadow:0 0 20px 1px rgba(0,0,0,.6);
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
    -webkit-transition:all 0.6s ease; -o-transition:all 0.6s ease; transition:all 0.6s ease;
  }
  .mobileprogress.active {bottom:0;}
  .mobileprogress p {margin:0 0 10px; font-size:14px;}
  .mobileprogress p span {color:#000; font-weight:700;}
}
@media (min-width:768px){
  .mobileprogress {display:block;}
  .mobileprogress p {margin:20px 0 -20px; font-size:14px;}
  .mobileprogress p span {color:#000; font-weight:700;}
  .mobileprogress .btn-next {display:none !important;}
}

#step-valueAdd .va-text {font-weight:700; color:#000; display:block; padding:30px 0 20px; height:30px;}
#step-valueAdd .va-text div {display:none;}
#step-valueAdd .va-images {display:block; position:relative;}
#step-valueAdd .va-images div {display:inline-block; width:60px; margin:0 10px;}
#step-valueAdd .va-images img {width:100%; min-width:40px; opacity:15%; image-rendering:crisp-edges;}

#step-my-appointments .page-title, #step-no-match-financing .page-title {padding:20px 0 5px;}
#step-my-appointments .page-title h1, #step-no-match-financing .page-title h1 {margin-bottom:0;}
#step-my-appointments .page-title .ms-subtitle, #step-no-match-financing .page-title .ms-subtitle {margin:5px auto 15px; max-width:600px; padding:0 40px;}
#step-my-appointments div.stepwrap, #step-no-match-financing div.stepwrap,
#step-my-appointments div.stepwrap2, #step-no-match-financing div.stepwrap2 {text-align:left; padding:40px;}
.upsellbox {background:#2e97a4; position:relative; padding:30px 10%; margin:20px 0 0; color:#fff; text-align:left; display:flex; align-items:center;}
.upsellbox img {width:40%; height:auto; object-fit: contain; max-width:200px; margin-right:8%;}
.upsellbox-wrap img {position:absolute; top:-20px; left:10%; width:40px;}
.upsellbox h4 {margin:20px 0 5px;}

.header-wrap {position:relative; padding:50px 0 10px;}
#step-no-match-financing .header-wrap {padding-top:10px;}
.hw-less-padding {padding-top:10px; padding-bottom:0;}
.header-wrap h3 {margin:0 0 5px;}
.header-wrap h3 small {font-weight:400;}
.header-wrap h2 {color:#174146; font-size:22px; text-transform:uppercase; margin:0; padding:0;}
.header-wrap .btn-orange {padding:8px 15px;}

.contentbox {
  padding:25px; margin:0;
  border:3px solid #ffa41985; border-radius:10px;
  width:100%;
  box-sizing:border-box;
  color:#2C3E50;
  font-size:15px;
}
#step-no-match-financing .contentbox {margin-bottom:10px;}

.appointments .your-appointments {border-bottom:1px solid #efefef; padding-bottom:20px; margin-bottom:20px;}
.appointments .your-appointments:last-of-type {border-bottom:0; padding-bottom:0; margin-bottom:0;}
.your-appointments .title, .your-financeoptions .title {display:block; margin-bottom:8px; font-weight:bold; color:#000;}
.your-appointments .date {background:#83bc50; display:inline-block; color:#fff; font-weight:normal; padding:5px 25px; margin-left:-25px; border-top-right-radius:20px; border-bottom-right-radius:20px;}
.your-appointments .date i {margin-right:5px;}

.expectations-wrap ul, .expectations-wrap ol {padding-left:25px;}

.project-details .title, .project-details .label, .project-details .data {display:block;}
.project-details .title {color:#000; font-weight:bold; margin-bottom:1em;}
.project-details .label {font-size:13px;}
.project-details .data {margin:.2em 0 1em; font-weight:bold;}

#step-my-appointments .header-wrap:first-of-type {padding-top:0;}
#scheduled-estimates .appointment-box, #previous-estimates .appointment-box {width:100%; background:#ecf9e0; border-radius:5px; position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#scheduled-estimates .date, #previous-estimates .date {display:block; background:#83bc50; color:#fff; border-top-right-radius:6px; border-top-left-radius:5px; padding:8px 15px; font-size:14px;}
#scheduled-estimates .title, #previous-estimates .title {display:block; padding:20px 25px; color:#4f7e25; font-weight:700; font-size:15px;}
#additional-roofing .appointment-box {background:#ffa41985; border-radius:5px; margin-bottom:10px; position:relative; padding:20px 200px 20px 25px;}
#additional-roofing .title {font-weight:700; font-size:15px; color:#50767a;}
#additional-roofing a.btn-orange {position:absolute; top:6px; right:20px;}

@media (max-width:767px){
  .your-appointments .date {margin-bottom:10px;}
}
@media (min-width:768px){
  .header-wrap {display:flex; align-items:flex-end; justify-content:space-between;}
  .header-wrap .btn-orange {margin:0;}
  .your-financeoptions .btn-orange {white-space:nowrap;}
  .your-appointments, .your-financeoptions {display:flex; justify-content:space-between; align-items:flex-start;}
}

.jello {animation:jello 0.9s both;}
@keyframes jello {
  0% {-webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1);}
  30% {-webkit-transform:scale3d(0.75, 1.25, 1); transform:scale3d(0.75, 1.25, 1);}
  40% {-webkit-transform:scale3d(1.25, 0.75, 1); transform:scale3d(1.25, 0.75, 1);}
  50% {-webkit-transform:scale3d(0.85, 1.15, 1); transform:scale3d(0.85, 1.15, 1);}
  65% {-webkit-transform:scale3d(1.05, 0.95, 1); transform:scale3d(1.05, 0.95, 1);}
  75% {-webkit-transform:scale3d(0.95, 1.05, 1); transform:scale3d(0.95, 1.05, 1);}
  100% {-webkit-transform:scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}
}

.waggle {animation:waggle 1s 0s forwards ease-out;}
@keyframes waggle {
  0% {transform:none;}
  50% {transform:rotateZ(-20deg) scale(1.2);}
  60% {transform:rotateZ(25deg) scale(1.2);}
  67.5% {transform:rotateZ(-15deg) scale(1.2);}
  75% {transform:rotateZ(15deg) scale(1.2);}
  82.5% {transform:rotateZ(-12deg) scale(1.2);}
  85% {transform:rotateZ(0) scale(1.2);}
  100% {transform:rotateZ(0) scale(1);}
}

/* loading spinner */
@keyframes lds-spinner {
  0% {opacity:1;}
  100% {opacity:0;}
}
@-webkit-keyframes lds-spinner {
  0% {opacity:1;}
  100% {opacity:0;}
}
.lds-spinner, .lds-css {position:relative;}
.lds-css .fa-search-dollar {position:absolute; top:86px; left:50%; margin-left:-10px; font-size:26px; color:#48BAC6;}
.lds-spinner div {
  left:94px;
  top:48px;
  position:absolute;
  -webkit-animation:lds-spinner linear 1s infinite;
  animation:lds-spinner linear 1s infinite;
  background:#93dbe9;
  width:12px;
  height:24px;
  border-radius:40%;
  -webkit-transform-origin:6px 52px;
  transform-origin:6px 52px;
}
.lds-spinner div:nth-child(1) {-webkit-transform:rotate(0deg); transform:rotate(0deg); -webkit-animation-delay:-0.916666666666667s; animation-delay:-0.916666666666667s;}
.lds-spinner div:nth-child(2) {-webkit-transform:rotate(30deg); transform:rotate(30deg); -webkit-animation-delay:-0.833333333333333s; animation-delay:-0.833333333333333s;}
.lds-spinner div:nth-child(3) {-webkit-transform:rotate(60deg); transform:rotate(60deg); -webkit-animation-delay:-0.75s; animation-delay:-0.75s;}
.lds-spinner div:nth-child(4) {-webkit-transform:rotate(90deg); transform:rotate(90deg); -webkit-animation-delay:-0.666666666666667s; animation-delay:-0.666666666666667s;}
.lds-spinner div:nth-child(5) {-webkit-transform:rotate(120deg); transform:rotate(120deg); -webkit-animation-delay:-0.583333333333333s; animation-delay:-0.583333333333333s;}
.lds-spinner div:nth-child(6) {-webkit-transform:rotate(150deg); transform:rotate(150deg); -webkit-animation-delay:-0.5s; animation-delay:-0.5s;}
.lds-spinner div:nth-child(7) {-webkit-transform:rotate(180deg); transform:rotate(180deg); -webkit-animation-delay:-0.416666666666667s; animation-delay:-0.416666666666667s;}
.lds-spinner div:nth-child(8) {-webkit-transform:rotate(210deg); transform:rotate(210deg); -webkit-animation-delay:-0.333333333333333s; animation-delay:-0.333333333333333s;}
.lds-spinner div:nth-child(9) {-webkit-transform:rotate(240deg); transform:rotate(240deg); -webkit-animation-delay:-0.25s; animation-delay:-0.25s;}
.lds-spinner div:nth-child(10) {-webkit-transform:rotate(270deg); transform:rotate(270deg); -webkit-animation-delay:-0.166666666666667s; animation-delay:-0.166666666666667s;}
.lds-spinner div:nth-child(11) {-webkit-transform:rotate(300deg); transform:rotate(300deg); -webkit-animation-delay:-0.083333333333333s; animation-delay:-0.083333333333333s;}
.lds-spinner div:nth-child(12) {-webkit-transform:rotate(330deg); transform:rotate(330deg); -webkit-animation-delay:0s; animation-delay:0s;}
.lds-spinner {
  width:200px !important;
  height:200px !important;
  margin:0 auto;
  -webkit-transform:translate(-100px, -100px) scale(1) translate(100px, 100px);
  transform:translate(-100px, -100px) scale(1) translate(100px, 100px);
}

/* progress bar */
#progress-wrap {
  border:1px solid #fb9b26;
  margin:10px auto 0;
  width:100%;
  max-width:630px;
  height:8px;
  border-radius:10px;
  overflow:hidden;
}
#progress-bar {
 width:0px;
 height:8px;
 border-radius:0px;
 background-color:#fb9b26;
}

/* BEN: Put this stuff wherever you like in this file.
   This ensures that extra headings, etc. are hidden when the page loads
   before the JavaScript parses which trade this is. -Alex */
.only {
  display: none;
}
/* This hides the TCPA source texts, so that
   only the correct one is shown (via Javascript).*/
.tcpaLanguage {
    display: none;
}
/* This shows the title for the step-no-match-financing step. */
#step-no-match-financing .page-title,
#step-my-appointments .page-title {
    display: block !important;
}
/* I'm using this for .trade elements. */
.capitalize {
    text-transform: capitalize;
}
/* Used for the No Match Page dynamically loaded elements. */
#shmktpl_retrieve_box {
    margin: 0 auto;
    max-width: 700px;
}
/* Just hiding the project details inputs to start with. */
.project-details-input {
    display: none;
}
/* Disabling the "Save" button on the edit project details section. */
#edit-project-details-button.disabled {
    cursor: not-allowed;
}
/* Left aligning certain content. */
#step-schedule .header-wrap,
.expectations-wrap,
.project-details-wrap {
    text-align: left;
}
/* Center aligning certain content. */
.book-estimate,
.reschedule-estimate,
#step-schedule .financing-options-header {
  text-align: center;
}
#step-schedule .financing-options-header h3 {
  margin: 0 auto;
}

.form-section {
    display: none;
    transition: all ease-in-out .5s;
    background-color: #fff;
}
.primary-btn.active {
  background: #ffa419;
  color: #fff;
  margin: 20px auto;
  padding: 15px 25px;
  min-width: 200px;
  display: inline-block;
  border: 0 none;
  border-radius: 5px;
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  cursor: pointer;
}
label.error {
    color: rgb(255, 45, 45);
    margin-top: .2rem;
    font-size: 13px;
}
.space-between {
  margin-top: 20px;
  margin-bottom: 20px;
}
.jj-row {
  display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.jj-col-4 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    width: 33.33333333%;
}
.jj-col-6 {
    position: relative;
    width: 50%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.jj-col-12 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.select2-selection--single {
        padding: 10px;
    margin: 3px 0;
    border: 2px solid #ffa41985 !important;
    border-radius: 5px !important;
    width: 100%;
    box-sizing: border-box !important;
    text-align: center;
    font-size: 15px;
    height: 50px !important;
}
.select2-dropdown {
  border: 1px solid #ffa41985 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 10px !important;
    top: 10px !important;
}
.main-form input[type="radio"], 
.main-form input[type="checkbox"] {
  width: auto !important;
}