@charset "UTF-8";
/* CSS Document
Client: ImOn Communications
Company: Informatics, Inc
Author: Jeff S
Date: June 2019

*/

/* Variables */
:root {
  --primary: #0155a5;
  --secondary: #7ac142;
  --secondary-aa: #64A234;
  --orange: #f27a30;
  --yellow: #fec53e;
  --dark: #333;
  --bkg: #f9f9f9;
  --bold: 'Montserrat', sans-serif;
  --body: 'Muli', sans-serif;
  --shadow: 15px 15px 25px rgba(0,0,0,.2);
}

.btn-text {padding: 15px 20px; background: rgba(0,0,0,.1); display: inline-block; color: #555; border-radius: 4px;}
.btn-text:hover {text-decoration: underline; color: #222;}
.btn-form {padding: 15px 20px; color: #fff; background: var(--secondary); display: inline-block; border-radius: 4px; border: none; transition: all .1s linear;}
.btn-form span {font-style: italic;}
.btn-form:hover {color: #fff; background: var(--primary);}
.redirect {list-style: none; padding: 0;}
.redirect li:before {content: "\f00c";font-family: FontAwesome; margin: 0 5px 0 0; color: var(--secondary);} 
.form-alert {padding: 15px; background: #fff; border: 1px solid #eee; border-left: 5px solid var(--secondary);}
#purchase h1 {font-size: 32px;}
#purchase .container {padding: 0 20px;}
#purchase .row {margin: 0; padding: 0;}
#purchase .screen-header h1 {font-weight: 700; font-family: var(--bold);}
#purchase .screen-header {margin: 0 0 25px 0;}
#purchase .small {font-size: 13px; text-align: center;}

#purchase-header {padding: 20px 0; background: url(../img/bkg-graphics.jpg); text-align: center; border-top: 5px solid var(--secondary); position: relative; top: -5px;}
#purchase-header img {width: 90px; margin: 0 15px 0 0;}
#purchase-header h1 {color: #fff; font-size: 28px;}
#purchase-header h1 i {color: var(--secondary);}
#purchase-header a {color: #333; font-weight: 700;}
#purchase-header .phone {color: #fff;}
#purchase-header .phone span {display: none;}
#purchase-header .phone i {color: var(--secondary);}

.large-btns {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 25px;}
.large-btns a {display: block; background: #fff; padding: 25px; border: 1px solid #ddd; border-radius: 5px; text-align: center; font-size: 1.2em;}
.large-btns a:hover {border-color: var(--secondary-aa); color: var(--secondary-aa);}

#imon-form a {text-decoration: underline;}
#imon-form input[type="checkbox"], input[type="radio"], #purchase input[type="checkbox"], input[type="radio"] {margin-top: 6px;}
#imon-form .radio + .alert {margin-top: 25px;}
#imon-form .form-group label {display: block; font-size: 15px; vertical-align: middle;}
#imon-form .form-group label.optional:after {content: "Optional";font-weight: 400; position: relative; bottom: 1px; left: 5px; font-size: 13px; font-style: italic;}
/* #imon-form .form-group label:after {content: "(optional)"; font-weight: 400; position: relative; bottom: 1px; left: 5px; font-size: 13px;}
#imon-form .form-group label.required:after {content: "";} */

#imon-form .form-group input, #imon-form .form-group select, #imon-form .form-group textarea {width: 100%; padding: 12px; border: 1px solid #ccc;}
#imon-form input:focus {box-shadow: 0 0 0 2px var(--secondary); outline: none; border-color: #fff;}
#imon-form .checkbox + .form-group {margin-top: 25px;}
.form-actions {display: block; width: 100%; border-top: 1px dotted #ccc; padding: 25px 0; margin: 25px 0 0 0;}
#imon-form .form-actions a, .form-actions a {text-decoration: none; margin: 0 0 5px 0;}
.list-grid {display: grid; grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) ); grid-gap: 15px; margin: 0 0 25px 0;}
.list-grid .radio {margin: 0; background: #eee; padding: 10px;}

#imon-form .alert-danger p {margin: 0 0 10px 0;}
#imon-form .alert-danger ul {font-size: .9em; padding: 0 0 0 25px;}
#imon-form .alert-danger strong {color: #a94442;}
#imon-form .form-error input {border-color: #a94442; box-shadow: 0 0 5px #cb8281;}

.view-tabs {display: block; padding: 0; list-style: none; border-bottom: 1px solid #ccc;}
.view-tabs li {display: inline-block;}
.view-tabs a {display: block; padding: 12px 22px; border: 1px solid #ccc; border-bottom: none; background: rgba(0,0,0,.05); position: relative; bottom: -1px; margin: 0 15px 0 0 0; font-size: 15px; color: #555;}
.view-tabs .active a {background: var(--bkg); color: #222;}
.view-tabs a:focus {outline: none; text-decoration: none;}

#purchase .flex .feature {flex-grow: 0;}
#purchase .flex .feature h3 {min-height: auto;}
#purchase .flex .feature .preheader i {font-size: 30px; margin: 0 3px;}
#purchase .feature-price:after {content: "Add to Cart";}
.feature h3 span {display: block; font-size: 65%; text-transform: uppercase; margin: 10px 0 0 0; color: var(--secondary); letter-spacing: 1px; font-style: italic;}
#purchase .preheader + .flex {margin-top: 15px;}
.group-header {padding: 15px 0; font-size: 18px; font-weight: bold; text-transform: uppercase; letter-spacing: .5px;}

.feature.color-two .text {border-top-color: var(--orange);}
.feature.color-two .text .preheader i, .feature.color-two ul li::before, .feature.color-two .number::before {color: var(--orange);}
.feature.color-two .text .preheader:before, .feature.color-two .text .preheader:after {background: var(--orange);}
.feature.color-three .text {border-top-color: var(--yellow);}
.feature.color-three .text .preheader i, .feature.color-three ul li::before, .feature.color-three .number::before, .feature.color-three h3 span {color: var(--yellow);}
.feature.color-three .text .preheader:before, .feature.color-three .text .preheader:after {background: var(--yellow);}

#purchase table {background: #fff;}
.compare-view table {border: 1px solid #ccc; background: #f9f9f9; border-top: 5px solid var(--primary);}
.compare-view table td {padding: 12px; font-size: 13px; border-right: 1px solid #ccc;}
.compare-view table tr:first-of-type td {font-weight: bold; color: var(--primary);}
.compare-view table tr:nth-of-type(odd) {background: rgba(255,255,255,.5);}
.compare-view table td:nth-of-type(odd) {background: rgba(0,0,0,.025);}
.compare-view table td:first-of-type {font-weight: bold;}
.compare-view table ul {font-size: 12px;}
.compare-view table ul li {position: relative; padding: 3px 0 3px 15px; line-height: 13px; margin: 0 0 5px 0;}
.compare-view table ul li:before {position: absolute; left: 0; top : 5px;}
.compare-view table .btn-form {padding: 10px 5px; font-weight: bold; display: block; text-align: center;}

.purchase-box.affix {position: relative;}
.purchase-box {background: #fff; max-height: none; font-size: 13px; box-shadow: 10px 10px 25px rgba(0,0,0,.025);}
.purchase-box h3 {padding: 10px; background: var(--primary); color: #fff; margin: 0; font-size: 18px;}
.purchase-box h4, .bundle-extras h4 {font-size: 12px; color: var(--primary); padding: 7px 10px; margin: 15px 0 10px 0;background: rgba(0,0,0,.075);}
.purchase-box h4:first-of-type, .bundle-extras h4:first-of-type {margin-top: 0;}
.purchase-box .text {padding: 0;}
.purchase-box .summary-item {padding: 7px 15px; font-size: 13px; position: relative; line-height: 1.2;}
.purchase-box ul {margin: 5px 0 10px 0; padding: 0 0 0 35px; font-size: 10px;}
.purchase-box ul li {font-size: 12px;}
.purchase-box .summary-item.summary-price {padding: 7px 80px 7px 15px;}
.purchase-box .summary-item.summary-price span {display: inline-block; width: 80px; position: absolute; right: 0; top: 7px; border-left: 1px solid #ccc; padding: 0 10px; color: #222;}
.purchase-box .additonal-info {font-size: 12px; font-style: italic; padding: 10px 15px 25px 15px; margin: 0;}
.purchase-box .clear-cart {display: block; padding: 10px 15px; border: 1px dotted #ccc; text-align: center; background: #f4f4f4;}
.purchase-box .clear-cart i {color: #ad3838;}
.purchase-box .clear-cart:hover {color: #ad3838;}

.bundle-extras span {font-weight: bold; float: right;}
.bundle-extras label {font-weight: bold;}
.bundle-extras .checkbox label {width: 100%;}
.bundle-extras .addon-row {display: block; margin: 0; border-top: 1px dotted #ccc;}
.bundle-extras h4 + .addon-row {border: none;}
.bundle-extras .addon-row .desc {font-size: 13px; font-style: italic; padding: 0 20px 0 20px; margin: 0;}
.bundle-extras .addon-row .desc + .desc {margin-top: 10px;}
.bundle-extras .addon-row .price {font-weight: 700; margin: 0; padding: 5px 0 15px 20px;}
.bundle-extras .addon-row .form-group label {font-size: 12px;}
.bundle-extras .addon-row:hover {background: #f4f4f4;}

.order-steps {list-style: none; padding: 0 0 25px 0; display: flex; margin: 34px 0 15px 0; position: relative; z-index: 5; border-bottom: 1px dotted #ccc;}
.order-steps:after {position: absolute; left: 15%; top: 5px; right: 15%; height: 1px; background: #ccc; content: ""; z-index: -2;}
.order-steps li {flex: 1; text-align: center; padding: 25px 10px 10px 10px; font-size: 12px; position: relative; font-weight: bold;}
.order-steps li:before {position: absolute; width: 30px; height: 30px; content: "1";background: #ccc; font-size: 15px; border-radius: 50%; top: -10px; line-height: 30px; left: 50%; margin-left: -15px; font-weight: normal;}
.order-steps li:nth-of-type(2):before {content: "2";}
.order-steps li:nth-of-type(3):before {content: "3";}
.order-steps li:nth-of-type(4):before {content: "4";}
.order-steps li.active:before {background: var(--secondary); color: #fff; content: "\f00c";font-family: FontAwesome; }

#purchase .contact {font-size: 14px;}
#purchase .contact h3 {font-size: 18px;}

.compare-item {display: block; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,.05); border-top: 4px solid var(--secondary); border: 1px solid #ddd; position: relative;}
.compare-item .text {padding: 10px 20px 125px 20px; text-align: center; font-size: 14px; position: relative; border-top: 1px solid #ddd;}
.compare-item h2 {font-size: 22px; margin: 0 0 10px 0; font-weight: 700; min-height: 85px; display: flex; flex-direction: column; justify-content: center;}
.compare-item h3 {font-size: 14px; font-weight: 700;; text-transform: uppercase; text-align: left;}
.compare-item .price-wrap {padding: 18px 10px 12px 10px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.compare-item .price {display: grid; text-align: left; line-height: 15px; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; margin: 0;}
.compare-item strike {display: block; font-weight: 700;font-size: 16px; margin-top: 5px;}
.compare-item .price .dollars {font-size: 38px; font-weight: 700;  text-align: right; line-height: 25px; padding-right: 5px; grid-column: 1 / 2; grid-row: 1 / 3;}
.compare-item .price .dollars:before {content: "$"; font-size: 26px; position: relative; top: -10px; left: -3px;}
.compare-item .price .cents {font-weight: 700; font-size: 18px;}
.compare-item .per {font-size: 12px;}
.compare-item .text p.description {text-align: left; line-height: 1.3; margin: 15px 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;}

.compare-item .button {border: 0; background: none; color: var(--primary); background: #eee; padding: 5px 5px; border-radius: 5px; font-size: 12px; display: block; position: absolute; bottom: 80px; left: 15px; right: 15px; text-align: center;}
.compare-item button:hover {background: none; text-decoration: underline; cursor: pointer;}
.compare-item ul {list-style: none; text-align: left; padding: 0; margin: 0;}
.compare-item ul li {position: relative; padding: 3px 0 3px 15px;}
.compare-item ul li:before {content: "\f00c"; font-family: FontAwesome; color: var(--secondary); position: absolute; left: 0; top: 4px; font-size: 12px;}
.compare-item .btn-theme {display: block; box-shadow: none; text-align: center; position: absolute; bottom: 20px; left: 15px; right: 15px;
}
.compare-list {display: flex; flex-wrap: wrap; margin: 0 -.5%; justify-content: flex-start;}
.compare-item {margin: 15px .5%;}

#purchase .modal-dialog {width: auto; max-width: 800px; text-align: left;}
#purchase .modal-dialog .modal-content {border-radius: 0; padding: 25px 50px 50px 50px; border-top: 5px solid var(--secondary);}
#purchase .modal-dialog h2 {min-height: auto; border-bottom: 1px solid #ccc; padding: 0 0 25px 0;}
#purchase .modal-dialog h3 {text-align: left;}
#purchase .modal-dialog .modal-col { padding: 15px; flex: 1;}
#purchase .modal-dialog .compare-item .text button {opacity: 1;}
#purchase .modal-dialog .close {opacity: 1; padding: 12px 15px 15px 15px; font-weight: bold; margin: 0; position: absolute; right: 10px; top: 10px; font-size: 21px; display: inline-block; width: auto;}
#purchase .modal-dialog .modal-desc { padding: 15px;}
#purchase .check-list {padding: 0 0 0 15px;}
#purchase .check-list li {padding: 7px 10px 7px 20px; border: none;}
#purchase .check-list li:before {top: 8px;}
#purchase .package-name-second {display: block; font-size: .65em; margin: 10px 0 25px 0; font-style: italic;}

#purchase .alert-link {background: rgba(0,0,0,.035);}
#purchase .alert {font-size: 15px;}
#purchase .alert ul {margin: 10px 0; padding: 0 0 0 25px;}

/* FIX LOADING CENTERING */
#loading {
  width: 100vw;
  height: calc(100vh - 115px);
  top: 0;
  left: 0;
  position: fixed;
  display: none;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding-bottom: 50px;
}
#loading-image {
  position: relative;
  top: auto;
  left: auto;
  z-index: 100;
  align-self: center;
}

#purchase .col:nth-of-type(2) {margin: 0 0; border-top: 1px dotted #ccc; padding-top: 35px;}

.receipt-table {font-size: 14px;}
.receipt-table .table-header {background: #eee; font-weight: bold;;}
.receipt-table p {margin: 0;}
.receipt-table ul {padding: 0 0 0 25px; margin: 10px 0;}

/* --------------
/* TABLETS */
@media (min-width: 768px) {
#purchase .container {padding: 0 40px; max-width: 1150px;}
#purchase .col {padding: 25px 0;}
#purchase-header .text {float: left; width: 400px; text-align: left;}
#purchase-header .text a {float: left; display: inline-block;}
#purchase-header h1 {font-size: 28px;}
#purchase-header .phone {float: right; font-weight: bold; position: relative; text-align: left; padding: 10px 0 0 40px;}
#purchase-header .phone span {display: block; font-size: 13px; font-weight: normal;}
#purchase-header .phone i {position: absolute; left: 0; top: 17px; font-size: 35px;}

#imon-form .form-flex {display: flex; justify-content: space-between; margin: 0 -10px;}
#imon-form .form-flex .form-group {margin: 0 10px 10px 10px; width: 100%;}
.form-actions .btn-form {float: right;}

#purchase .flex {display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 -1.5%;}
#purchase .flex .feature {max-width: none; overflow: hidden; position: relative; width: 45%;}

.bundle-extras .addon-row {display: flex; padding: 5px 0;}
.bundle-extras .addon-row * {flex-grow: 1;}
.bundle-extras .addon-row .price {padding: 25px 10px 10px 10px; text-align: right;}

#purchase .contact .row {margin:0 -15px;}

.compare-item {flex: 1; margin: 15px .5%; min-width: 200px; max-width: 33%;}

.bundle-extras .addon-row .price {padding: 0;}
}

/* --------------
/* SMALL DESKTOPS */
@media (min-width: 992px) {
#purchase .col {width: 65%; float: left; padding: 0 35px 25px 0; position: relative; margin: 25px 0 0 0; min-height: 350px;}
#purchase .col:nth-of-type(2) {width: 35%; float: right; font-size: 15px; padding: 25px 0 35px 35px; margin: 25px 0 0 0; border: none;}
#purchase .col:first-of-type {border-right: 1px dotted #ccc;}
#purchase .flex .feature {width: 30%; margin: 0 1.5% 20px 1.5%;}

.purchase-fix-affix {position: relative; left: 0; top: 0; right: 0; width: 300px;}
.purchase-box.affix {width: 300px; top: 55px; position: fixed;}
.purchase-box.affix-bottom {position: absolute; width: 300px;}

/*
.order-steps:after {top: 10px;}
.order-steps li {font-size: 14px; padding-top: 35px;}
.order-steps li:before {width: 40px; height: 40px; line-height: 40px; font-size: 20px; margin-left: -20px;}
*/
}


/* LARGE DESKTOPS */
@media (min-width: 1250px) {
#purchase .col {width: 70%;}
#purchase .col:nth-of-type(2) {width: 30%;}

#hero .text {width: 55%; padding-left: 0;}
}

/* MEGA DESKTOPS */
@media (min-width: 1400px) {

}
/* WIDE AND TALL */
@media (min-height: 900px) and (min-width: 1200px) {

}
.formidable .captcha_input + .captcha_done {
    display: none;
}

#imon-form .form-error select {
    border-color: #a94442;
    box-shadow: 0 0 5px #cb8281;
}

/* Payment Modal CSS */
#paymentModal .modal-dialog .modal-content {
	padding: 0px 0px 0px 0px;
}

#paymentModal .modal-dialog .close {
	padding: 5px 15px 15px 15px;
}
.no-border {border-top: 0;}



/*Broadband Label related styles*/
.bf-item {
    box-sizing: border-box;
}


@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;700&display=swap');

.bf-item {
    font-family: 'Libre Franklin', sans-serif;
}

    .bf-item p {
        margin: 0;
        font-size: 12px;
    }

    .bf-item .font-weight-900 {
        font-weight: 900 !important;
    }

    .bf-item .font-weight-800 {
        font-weight: 800 !important;
    }

    .bf-item .font-weight-700 {
        font-weight: 700;
    }

    .bf-item .wrapper {
        display: flex;
        justify-content: center;
        background-color: #fff;
        border: 4px solid black;
        max-width: 390px;
        padding: 8px;
        margin: auto
    }

    .bf-item .main-header {
        margin: -4px 0;
        text-decoration-line: underline;
        text-decoration-thickness: 2px;
        font-size: 30px !important;
    }

    .bf-item .secondary-header {
        font-weight: 800;
        font-size: 14px;
        margin-top: 4px;
    }

    .bf-item .typical-header {
        font-weight: 800;
        font-size: 13px;
    }

    .bf-item .provider-name {
        font-weight: 700;
        font-size: 15px;
    }

    .bf-item .margin-top-normal {
        margin-top: 10px;
    }

    .bf-item .margin-left-12 {
        margin-left: 12px;
    }

    .bf-item .margin-top-15 {
        margin-top: 15px;
    }

    .bf-item .additional-charges-list-key-section {
        margin-bottom: 4px;
    }

    .bf-item .additional-charges-list-value {
        margin-left: 48px;
        margin-bottom: 3px;
    }

    .bf-item .key-value {
        display: flex;
        justify-content: space-between;
    }

    .bf-item .link {
        all: unset;
        color: #24439b;
        cursor: pointer;
    }

    .bf-item .acp-key-value {
        margin-left: 36px;
        display: flex;
        justify-content: space-between;
    }

    .bf-item .section {
        padding: 4px 0;
    }

    .bf-item .section-slim {
        border-bottom: 1px solid black;
    }

    .bf-item .section-thick {
        border-bottom: 3px solid black;
    }

    .bf-item .section-half-huge {
        border-bottom: 5px solid black;
    }

.section-huge {
    border-bottom: 10px solid black;
}

.bf-item .bottom-section {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}

.bf-item .fixed-or-mobile-header {
    margin: 0;
    font-size: 13px;
    border-bottom: 10px solid black;
}

.bf-item .additional-charges-list-value--small {
    margin-left: 48px;
    margin-bottom: 2px;
}

.modal-body {
    padding: 0px !important;
}

#purchase .modal-dialog .modal-content {
    padding: 20px 20px 20px 20px !important;
}

.carousel-indicators.broadband-labels {
    position: initial;
    margin: auto;
}

    .carousel-indicators.broadband-labels li {
        border-color: #000000;
    }

.carousel-control {
    width: 0px !important;
    color: #000000 !important;
}

#paymentModal .modal-dialog {
    max-width: 900px;
    width: 90vw;
}
#paymentModal .modal-content,
#paymentModal .modal-body {
    padding: 0 !important;
}
#paymentModal iframe {
    width: 100% !important;
    min-height: 900px !important;
    border: none !important;
    display: block !important;
}

@media print {
    .bf-item .wrapper {
        border: none; /* Removes the border when printed */
        max-width: 390px;
        display:block
    }

    .bf-item {
        page-break-after: always;
    }

    #page-header .text .breadcrumb
    {
        display:none;
    }

    #page-header .text {
        padding: 10px 0px 10px 0px !important; 
    }

    #menu {
        display: none !important;
    }
}
/*END Broadband Label related styles*/