@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');


@font-face {
    font-family: 'SF UI Display';
    src: url('https://www.teamgutters.com/wp-content/uploads/2020/07/SFUIDisplay-Light.eot');
    src: url('https://www.teamgutters.com/wp-content/uploads/2020/07/SFUIDisplay-Light.eot') format('embedded-opentype'),
        url('https://www.teamgutters.com/wp-content/uploads/2020/07/SFUIDisplay-Light.woff2') format('woff2'),
        url('https://www.teamgutters.com/wp-content/uploads/2020/07/SFUIDisplay-Light.woff') format('woff'),
        url('https://www.teamgutters.com/wp-content/uploads/2020/07/SFUIDisplay-Light.ttf') format('truetype'),
        url('https://www.teamgutters.com/wp-content/uploads/2020/07/SFUIDisplay-Light.svg') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF UI Display';
    src: url('https://www.teamgutters.com/wp-content/uploads/2020/07/SFUIDisplay-Medium.eot');
    src: url('https://www.teamgutters.com/wp-content/uploads/2020/07/SFUIDisplay-Medium.eot') format('embedded-opentype'),
        url('https://www.teamgutters.com/wp-content/uploads/2020/07/SFUIDisplay-Medium.woff2') format('woff2'),
        url('https://www.teamgutters.com/wp-content/uploads/2020/07/SFUIDisplay-Medium.woff') format('woff'),
        url('https://www.teamgutters.com/wp-content/uploads/2020/07/SFUIDisplay-Medium.ttf') format('truetype'),
        url('https://www.teamgutters.com/wp-content/uploads/2020/07/SFUIDisplay-Medium.svg') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF UI Display';
    src: url('https://www.teamgutters.com/wp-content/uploads/2020/07/SFUIDisplay-Bold.eot');
    src: url('SFUIDisplay-Bold.eot?#iefix') format('embedded-opentype'),
        url('https://www.teamgutters.com/wp-content/uploads/2020/07/SFUIDisplay-Bold.woff2'),
        url('https://www.teamgutters.com/wp-content/uploads/2020/07/SFUIDisplay-Bold.woff') format('woff'),
        url('https://www.teamgutters.com/wp-content/uploads/2020/07/SFUIDisplay-Bold.ttf') format('truetype'),
        url('https://www.teamgutters.com/wp-content/uploads/2020/07/SFUIDisplay-Bold.svg') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



*{
    margin: 0;
    padding: 0;
}
body {
    font-family: 'SF UI Display';
}
.gp-form-step *{
    font-family: 'SF UI Display' !important; 
    }
.gp-check-container {
     position: relative;
    padding-left: 32px;
    margin-bottom: 10px;
    font-size: 15px;
    color: grey;
    font-weight: 400;
}
.gp-calculator-from .gp-check-container input + label {
    display: block;
    cursor: pointer;
    font-size: 15px;
    width: 22px;
    height: 22px;
    border-radius: 11px;
    background-color: transparent;
    border: 1px solid #c3c3c3;
    position: absolute;
    left: 0px;
    top: 0px;
        transition: all .2s;
}

.gp-calculator-from .gp-check-container input {
  display: none;
}

.gp-calculator-from .gp-check-container input + label:active:before {
  transform: scale(0);
}

.gp-calculator-from .gp-check-container input:checked + label {
  border-color: #003957;
  background-color:#003957;
}

.gp-calculator-from .gp-check-container input:disabled + label:before {
  transform: scale(1);
  border-color: #aaa;
}

.gp-calculator-from .gp-check-container input:checked:disabled + label:before {
  transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
}
.gp-calculator-from .gp-check-container input + label:before {
    background: #003957;
    content: "\2714";
    position: absolute;
    left: 0px;
    right: 0px;
    margin: auto;
    top: 50%;
    transform: translateY(-50%) scale(0);
    border-radius: 50%;
    transition: all .2s;
    color: #fff;
    text-align: center;
}
.gp-calculator-from .gp-check-container input:checked + label:before {
     transform: translateY(-50%) scale(1);
    }
.gp-calculator-from h4 {
    font-size: 25px;
    line-height: 30px;
    color: #013957;
    font-weight: 700;
    text-align: center;
    font-family: "Merriweather" !important;
    opacity: .5;
    margin-bottom: 45px;
}

.gp-calculator-from h2 {
    font-size: 30px;
    line-height: 55px;
    color: #013957;
    font-weight: 700;
   font-family: "Merriweather" !important;
    text-align: center;
    margin:20px auto 60px;
}
.gp-calculator-from {
    margin: 0 auto;
    width: 100%;
    max-width: 710px;
    padding: 0px 15px 50px;
}
.gp-do-dont-button input[type=radio] + label {
    text-align: center;
    height: 44px;
    border-radius: 6px;
    border: 1px solid #013957;
    color: #003957;
    background: transparent;
    font-family: 'SF UI Display';
    margin: 0 10px;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
}
.gp-input-agree input {
    display: none;
}
.gp-do-dont-button input[type=radio]:checked + label {
    background: #003957;
    color: #fff;
}


.gp-do-dont-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
}
.gp-qust-pros p span {
    color: #000;
    padding-left: 150px;
}

.gp-qust-pros p {
    font-size: 16px;
    font-weight: 400;
    color: gray;
    margin-bottom: 30px;
}
.gp-qust-pros p input:focus {
    outline: none;
    border-bottom: 1px solid #d2d1d1;
}

.gp-qust-pros input {
font-size: 16px;
    padding: 10px 20px;
    font-weight: 400;
    border: 1px solid #e1e0e0;
    border-radius: 0px;
      color: gray;
}
body .gp-input-effact input,  body .gp-input-effact textarea {
    border: 1px solid #e1e0e0;
    width: 100%;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: 300;
    color: #00000087;
        background: transparent;
            border-radius: 0px;
}
body .gp-input-effact input:focus, body .gp-input-effact select:focus,  body .gp-input-effact textarea:focus {
    border-color: #e1e0e0;
    outline: 0 none;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
}
input[type=number] { 
  -moz-appearance: textfield;
  appearance: textfield;
}

.gp-map-input-wrap {
    position: relative;
}
.gp-display-none{
  display:none;  
    }
 #gp-map {
    height: 200px;
        max-width: 350px;
        -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
        margin-bottom: 10px;
}
.gp-input-effact {
    position: relative;
    margin-bottom: 40px;
}
#gp-form-step-1 .gp-input-effact {
    max-width: 350px;
}
.gp-form-step .gp-input-effact span {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}
.gp-form-step .gp-input-effact span.gp-asterik-required {
    color: red;
    position: static;
}
.gp-input-effact span.focus-border {
    position: static;
}
.gp-input-effact input ~ .focus-border:before, .gp-input-effact input ~ .focus-border:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0%;
    width: 0;
    height: 2px;
    background-color: #00bbf3;
    transition: 0.4s;
}
.gp-input-effact input ~ .focus-border:after {
    top: auto;
    bottom: 0px;
    left: auto;
    right: 0;
}
.gp-input-effact input:focus ~ .focus-border:before, .gp-input-effact input:focus ~ .focus-border:after{
width: 100%;
transition: 0.3s;
   }
.gp-input-effact input ~ .focus-border i:before, .gp-input-effact input ~ .focus-border i:after {
    content: "";
    position: absolute;
    top: 0%;
    left: 0;
    width: 2px;
    height: 0;
    background-color: #00bbf3;
    transition: 0.6s;
}
.gp-input-effact input ~ .focus-border i:after {
    left: auto;
    right: 0;
    top: auto;
    bottom: 0;
}
.gp-input-effact input:focus ~ .focus-border i:before, .gp-input-effact input:focus ~ .focus-border i:after {
height: 100%;
transition: 0.4s;
}
.gp-form-step .gp-input-effact input {
    z-index: 6;
    position: relative;
}
.gp-input-effact input ~ label {
    color: #999;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 17px;
    font-size: 15px;
    font-weight: 300;
    transition: 0.3s;
        z-index: 5;
}
.gp-input-effact input:focus ~ label,.gp-input-effact input.has-content ~ label {
    color: #00bbf3;
    top: -22px;
    transform: inherit;
    left: 0px;
    font-size: 14px;
    transition: 0.3s;
}


.gp-qust-pros h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
    display: flex;
   color: #000;
}
.gp-info-form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
   justify-content: space-between;
}
.gp-sum-total .gp-info-form h3 {
    margin: 5px 0px 40px;
}
.gp-form-step .gp-info-form .gp-input-effact {
    width: 48%;
}
.gp-form-step .gp-info-form .gp-input-effact.gp-extra-info {
    width: 100%;
  margin-bottom: 20px;
}
.gp-cal-tble h3 {
    text-align: center;
    justify-content: center;
}
.gp-i-info {
        position: relative;
        margin-left: 125px;
}
.gp-tooltip-content {
    position: absolute;
    background: #fff;
    border: 0px;
    padding: 16px;
    z-index: 99;
    left: 100%;
    width: 230px;
    box-shadow: 0px 0px 30px rgba(0,0,0,0.1);
    top: auto;
}
.gp-tooltip-content ul {
    margin: 0px;
    padding: 0px;
}

.gp-tooltip-content ul li {
    list-style: none;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5em;
}
.gp-tooltip-content p {
    font-weight: 300;
    font-size: 15px;
    line-height: 1.5em;
    margin: 0px;
}
.gp-tooltip-content p a {
    color: #00bbf3;
    font-weight: 600;
}
.gp-tooltip-content img {
    max-width: 120px;
    margin: auto;
    display: block;
}
button.gp-tooltip-close {
    background: transparent;
    border-color: #000;
    color: #000;
    padding: 0px;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    position: absolute;
    right: 8px;
    top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
button.gp-tooltip-close:hover, button.gp-tooltip-close:focus{
    background: transparent;
    color:#000;
    outline:none;
    }
body .gp-next-btn {
    background: #00bbf3;
    border: 1px solid #00bcf3;
    min-width: 190px;
    height: 44px;
    border-radius: 6px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
        transition: all .2s;
}
.gp-next-btn-section {
    padding-top: 100px;
    display: flex;
    justify-content: space-between;
}
body .gp-back-btn {
    font-size: 16px;
    color: #c3c3c3;
    font-weight: 400;
     cursor: pointer;
        transition: all .2s;
        border: 1px solid transparent;
}
body .gp-next-btn:hover, body .gp-next-btn:focus, body .gp-back-btn:hover, body .gp-back-btn:focus {
    background: #003957;
    border: 1px solid #003957;
    color: #fff;
    outline:none;
}
.gp-inner-pros {
width: 25%;
    padding: 0px 18px;
}

.gp-gutters-products {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 0 100px;
}

.gp-inner-pros img {
    width: 100%;
}

.gp-inner-pros p {
    font-size: 16px;
    font-weight: 700;
        color: #000;
}

.gp-gutters-style h3 {
    text-align: center;
    font-size: 24px;
        color: #000;
    font-weight: 700;
}  
 .gp-pro-variant {
    margin-bottom: 50px;
}
.gp-calculator-from .gp-pro-variant input[type=radio] + label {
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 50%;
    border: 1px solid #ccc;
    display: inline-block;
    margin-right: 5px;
    transition: all .2s;
}

.gp-calculator-from .gp-pro-variant input[type=radio]:checked + label {
    border: 2px solid #ff101f;
}

.gp-pro-variant input {
    display: none;
}
.gp-quotes-sec {
    margin-bottom: 50px;
}
.gp-plan-table {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.gp-plan-pro input {
    display: none;
}
.gp-plan-pro{
    width: 50%;
}
.gp-plan-pro label {
    width: 100%;
    text-align: center;
    min-height: 185px;
    max-width: 215px;
    margin: 40px auto;
    border-radius: 10px;
    border: 2px solid transparent;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    transition: all .2s;
        box-shadow: 0 0 4px rgba(0,0,0,0.1);
}
.gp-plan-pro input[type=radio]:checked ~ label {
    border: 2px solid #00bbf3;
}
.gp-calculator-from .gp-plan-pro p {
    margin: 0;
    color: #000;
    padding: 0;
    font-size: 18px;
}

.gp-calculator-from .gp-plan-pro h2 {
    margin: 0;
    font-family: 'SF UI Display' !important;
    line-height: 1.5em;
    padding: 6px 0px;
}
.gp-calculator-from .gp-plan-pro .save-info {
    color: #00bcf3;
    font-size: 16px;
    font-weight: 400;
}

.gp-plan-pro:hover {
    border-color: #00bbf3;
}
.gp-check-sub {
    display: flex;
    width: 100%;
}
.gp-cal-tble {
    text-align: center;
}
.gp-text-summry p {
    font-size: 18px;
    color: #999;
    font-weight: 400;
}

.gp-text-summry, .gp-total-summry {
    width: 50%;
    margin-bottom: 25px;
}
.gp-text-summry{
    padding-right: 5px;
        padding-left: 15px;
}
.gp-total-summry {
    padding-left: 5px;
        padding-right: 15px;
    }
.gp-text-summry p b {
    text-align: right;
}
.gp-sum-total h3 {
    color: #00bbf3;
    font-weight: 900;
    font-size: 25px;
    text-transform: capitalize;
    margin: 5px 0px 10px;
    width: 100%;
        display: block;
}
.gp-total-summry p, .gp-text-summry p {
    margin: 0px;
}
.gp-total-summry {
    text-align: right;
        color: #000;
    font-weight: 300;
}

.gp-sum-total {
    display: flex;
    flex-wrap: wrap;
}

.gp-sum-total .gp-length-not-available, .gp-sum-total .gp-length-available  {
    display: flex;
    flex-wrap: wrap;
}
.gp-price-wrap {
    display: flex;
    flex-wrap: wrap;
    position: relative;
        border: 1px solid #00bcf3;
    border-radius: 10px;
        padding: 15px;
    margin-bottom: 20px;
}
.gp-price-wrap .gp-text-summry {
    padding-left: 0px;
}
.gp-price-wrap .gp-total-summry {
    padding-right: 0px;
}
.gp-price-wrap .gp-total-summry.gp-main-total:last-child {
    margin-bottom: 0px !important;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 20px;
}
.gp-price-wrap .gp-text-summry p, .gp-price-wrap .gp-total-summry p {
    color: #02273a;
}
.gp-price-wrap .gp-text-summry p b, .gp-price-wrap .gp-total-summry p b {
    font-weight: 900;
    font-size: 22px;
}
.gp-price-wrap .gp-total-summry.gp-main-total:last-child p {
    color: #00bcf3;
    font-size: 30px;
    font-weight: 900;
}
.gp-calculator-from.gp-inner-summry {
    max-width: 380px;
    padding: 0px 15px 100px;
}
.frm_submit {
    text-align: center;
}
.gp-pay-btn, .frm_style_formidable-style.with_frm_style .frm_submit button, .gp-form-submit-wrap .gp-form-submit{
    width: 100%;
    background: #00bbf3;
    border: 1px solid #00bbf3;
    padding: 13px 10px;
    border-radius: 6px;
    font-size: 16px;
    color: #fff;
    margin-top: 0px;
    cursor: pointer;
    transition: all .2s;
}
.gp-info-form .gp-form-submit-wrap {
    width: 100%;
    margin: 20px 0px;
}
.gp-pay-btn:hover, .gp-pay-btn:focus, .frm_style_formidable-style.with_frm_style .frm_submit button:hover,
 .gp-form-submit-wrap .gp-form-submit:hover,
  .gp-form-submit-wrap .gp-form-submit:focus,
  .frm_style_formidable-style.with_frm_style .frm_submit button:focus {
    background: #02273a;
    border-color: #02273a;
    outline:none;
    color:#fff;
}
.gp-summary-table, .gp-submit-table {
    background-image: url(./images/bg-img.jpg);
    background-position: bottom right;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}
.gp-submit-table {
    background-image: url(./images/blue-bg.jpg);
    background-position: center right;
}
.gp-calculator-from.gp-submit-summry {
    max-width: 1170px;
}

.gp-submit-summry.gp-calculator-from h4, .gp-submit-summry.gp-calculator-from h2 {
    text-align: left;
}
.gp-calculator-from .gform_wrapper .gform_footer .gform_button {
    color: #fff;
    border-color: #fff;
}
.gp-calculator-from .gform_wrapper .gform_footer .gform_button:hover {
    color: #fff;
	background-color: #fff;
    border-color: #fff;
} 

.gp-submit-summry .gp-sum-total {
    max-width: 380px;
}
.gp-submit-summry .gp-pay-btn {
    max-width: 380px;
}
.city-page-review {
    max-width: 1180px;
    margin: 0 auto;
    visibility: hidden;
    height: 0px;
}
.city-page-review.visible-city-page-review{
	margin-top: -7%;
}
.gform_confirmation_wrapper {
    background: #e0f0d6;
    padding: 10px;
    border: 1px solid #5dc35d33;
    border-radius: 9px;
    color: #518658;
    margin-bottom: 20%;
}
.gp-qust-pros h3 b {
    font-weight: 700;
}

li.gp-progress-step {
    width: 14px;
    height: 5px;
    border-radius: 1px;
    background-color: #d8d8d8;
    margin: 0px 5px;
}

li.gp-progress-step.gp-step-active {
    background: #17b890;
}

ul.gp-progress-wrap {
    padding: 0px;
    margin: 0px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gp-progress-bar {
    display: flex;
    align-items: center;
}





.tpd-skin-purple .tpd-content,
.tpd-skin-purple .tpd-title,
.tpd-skin-purple .tpd-close { color: #fff; }
.tpd-skin-purple .tpd-background-content { background-color:#013957; }
.tpd-skin-purple .tpd-background {
  border-width: 1px;
  border-color: rgba(6,0,12,.6);
}
.tpd-skin-purple .tpd-background-title { background-color: #5b45e3; }
/* line below the title */
.tpd-skin-purple .tpd-title-wrapper { border-bottom: 1px solid #2a1fb4; }
/* shadow */
.tpd-skin-purple .tpd-background-shadow { box-shadow: 0 0 8px rgba(0,0,0,.15); }
/* spinner */
.tpd-skin-purple .tpd-spinner-spin {
  border-color: rgba(255,255,255,.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-purple a { color: #ddd; }
.tpd-skin-purple a:hover { color: #c6c6c6; }





.pac-container{
    border: 1px solid #DADADA;
    border-radius: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 250px;
    text-align: left;
    }
.pac-container:after {
    background-image: none !important;
    height: 0px;
     content:none !important;
}
.pac-container .pac-item{
padding: 10px 15px;
cursor: pointer;
   border-bottom: 1px solid #DADADA;
   background-color: #F7F7F7;
   color: #4A4A4A;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   -webkit-transition: background-color 0.3s, color 0.3s;
   -moz-transition: background-color 0.3s, color 0.3s;
   -o-transition: background-color 0.3s, color 0.3s;
   transition: background-color 0.3s, color 0.3s;
   font-size:15px;
   font-weight:400 !important;
   font-family: 'SF UI Display' !important;
   
}
.pac-container .pac-item span{
    font-size:inherit !important;
   font-weight:inherit !important;
   font-family: 'SF UI Display' !important;   
    }
.pac-container .pac-item:hover{
background-color: #ECECEC;
}
.gp-form-error {
    background-color: #ea09098a;
    display: inline-block;
    margin-right: auto;
    padding: 8px 13px;
    border-radius: 4px;
    color: #fff;
    font-size: 15px;
    border: 1px solid #ef0a0a;
}

.gp-form-error-section {
    text-align: right;
}
/*---- responsive start ----*/


@media(max-width:1024px){
.gp-calculator-from h2 {
    font-size: 28px;
    line-height: 1.5em;
    margin: 12px auto 40px;
}
.gp-calculator-from h4 {
    font-size: 16px;
  line-height: 1.5em;
    margin: 10px 0px;
}
.gp-gutters-style h3 {
    text-align: center;
    font-size: 22px;
}
.gp-gutters-products {
    padding: 30px 0 40px;
}
.gp-summary-table, .gp-submit-table {
    background-size: 35%;
}
.gp-form-step .gp-info-form .gp-input-effact {
    width: 100%;
    margin-bottom: 30px;
}
.gp-text-summry, .gp-total-summry {
    margin-bottom: 15px;
}
.gp-total-summry p, .gp-text-summry p {
    margin: 0px;
    font-size: 15px;
}
.gp-sum-total h3 {
    font-weight: 700;
    font-size: 22px;
}
}

@media(max-width:767px){
.gp-calculator-from h2 {
    font-size: 22px;
}
.gp-qust-pros h3 {
    font-size: 16px;
}
.gp-inner-pros {
    width: 50%;
    padding: 0px 10px 20px;
}
.gp-inner-pros img {
    width: 125px;
}
.gp-next-btn-section {
    padding-top: 40px;
    flex-direction: column;
}
.gp-progress-bar {
    order: 3;
    margin-top: 30px;
}
ul.gp-progress-wrap {
    width: 100%;
}
.gp-plan-pro {
    padding: 0px 10px;
}
.gp-plan-pro label {
    min-height: 150px;
    max-width: 170px;
}
.gp-calculator-from .gp-plan-pro p {
    font-size: 14px;
}
.gp-submit-table {
    background-size: 300px;
    background-position: center bottom;
    padding-bottom: 120px;
}
.gp-submit-summry .gp-sum-total {
    max-width: 100%;
}
#gp-form-step-1 .gp-qust-pros {
    width: 100%;
}
.gp-price-wrap .gp-total-summry.gp-main-total:last-child p {
    font-size: 22px;
}
.gp-price-wrap .gp-text-summry p b, .gp-price-wrap .gp-total-summry p b {
    font-size: 18px;
}
.gp-form-error-section {
    text-align: center;
}
.gp-calculator-from.gp-inner-summry {
    padding: 30px 15px 100px;
}
}

@media(max-width:489px){
.gp-do-dont-button {
    margin-bottom: 40px;
    flex-direction: column;
}
.gp-input-agree {
    margin-bottom: 15px;
}
.gp-form-step .gp-input-effact {
    position: relative;
    width: 100%;
}
.gp-submit-summry .gp-pay-btn {
    max-width: 100%;
}
.gp-qust-pros h3 {
    position: relative;
}
.gp-i-info {
    margin-left: 15px;
    position: static;
}
.gp-tooltip-content {
    left: auto;
    top: auto;
    right: 0px;
}

}