:root {
    --blue: #0776A0;
    --light-blue: #d4f3ff;
    --white: white;
    --black: black;
    --bg-color: #efefef;
    --nav-bg-color: #e3e3e3;
    --light-grey: #d5d5d5;
    --mid-grey: #c7c7c7;
    --grey: grey;
    --soap: #CECEE8;
}


body {
    background-color: var(--bg-color);
    word-break: break-word;
    font-size: 16px;
}

/* lib */

*:focus {
    box-shadow: none !important;
}

::-moz-selection {
    color: var(--white);
    background: var(--blue);
}

::selection {
    color: var(--white);
    background: var(--blue);
}

.img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container {
    max-width: 1440px;
}

button, a {
    border-radius: 0 !important;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section {
    margin-bottom: 128px;
}

.card {
    border-radius: 0;
    box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}

.card img {
    height: 300px;
}

.text-pr {
    color: var(--blue);
}

.text-purple {
    color: var(--bs-purple);
}

.shadow-pr {
    box-shadow: 2px 10px 50px 0 rgba(68, 68, 68, 0.15);
}

.bg-light-blue {
    background-color: var(--light-blue);
}

.bg-pr {
    background-color: var(--bg-color) !important;
}

.bg-blue {
    background-color: var(--blue) !important;
}

.bg-soap {
    background-color: var(--soap);
}

.border-red {
    border-color: red !important;
}

.messages {
    border-radius: 0;
    margin: 10px 0;
}

.messages li {
    list-style: none;
}

form input,
form textarea,
form select {
    border: 2px solid #4c788233 !important;
    border-radius: 0 !important;
    padding: 10px 20px !important;
    font-size: 18px;
    font-weight: 500 !important;
}

form input:focus,
form textarea:focus,
form select:focus {
    border-color: #2a5d685e !important;
}

form label {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 14px;
}

form textarea {
    height: 210px;
    padding-top: 15px;
}

table {
    word-break: keep-all;
}

.errorlist {
    background-color: var(--white);
    color: var(--bs-danger);
    border: 1px solid lightgray;
    font-weight: 500;
    /*list-style: none;*/
    margin-bottom: 8px;
    padding: 8px 24px;
    font-size: 14px;
    /*margin-top: 32px;*/
}


/*!* Glow animation *!*/

/*.glow-animation {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    text-decoration: none;*/
/*    font-weight: bold;*/
/*    width: 100%;*/
/*    padding: 12px;*/
/*    text-align: center;*/
/*    border: none;*/
/*    outline: none;*/
/*    color: #fff;*/
/*    background: #111;*/
/*    cursor: pointer;*/
/*    position: relative;*/
/*    z-index: 0;*/
/*}*/

/*.glow-animation:hover {*/
/*    color: var(--white);*/
/*}*/

/*.glow-animation:before {*/
/*    content: '';*/
/*    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);*/
/*    position: absolute;*/
/*    top: -2px;*/
/*    left: -2px;*/
/*    background-size: 400%;*/
/*    z-index: -1;*/
/*    filter: blur(5px);*/
/*    width: calc(100% + 4px);*/
/*    height: calc(100% + 4px);*/
/*    animation: glowing 20s linear infinite;*/
/*    transition: opacity .3s ease-in-out;*/
/*}*/

/*.glow-animation:active {*/
/*    color: black;*/
/*}*/

/*.glow-animation:hover:after {*/
/*    background: transparent;*/
/*}*/

/*.glow-animation:after {*/
/*    z-index: -1;*/
/*    content: '';*/
/*    position: absolute;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background: #111;*/
/*    left: 0;*/
/*    top: 0;*/
/*}*/

/*@keyframes glowing {*/
/*    0% {*/
/*        background-position: 0 0;*/
/*    }*/
/*    50% {*/
/*        background-position: 400% 0;*/
/*    }*/
/*    100% {*/
/*        background-position: 0 0;*/
/*    }*/
/*}*/

/*!* End Glow animation *!*/


/*!* Button circle animation *!*/

/*.button-circle-animation-block {*/
/*    height: 100%;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

/*.button-circle-animation {*/
/*    width: 100%;*/
/*    font-family: 'Nunito', sans-serif;*/
/*    font-size: 20px;*/
/*    color: var(--white);*/
/*    background: var(--bs-info);*/
/*    box-shadow: 12px 12px 24px rgba(79, 190, 209, 0.64);*/
/*    transition: all 0.3s ease-in-out 0s;*/
/*    cursor: pointer;*/
/*    position: relative;*/
/*    padding: 16px 0;*/
/*    z-index: 1;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    text-decoration: none;*/
/*}*/

/*.button-circle-animation::before {*/
/*    content: '';*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    border: 6px solid #00e1ff;*/
/*    box-shadow: 0 0 60px rgba(0, 234, 255, 0.64);*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    opacity: 0;*/
/*    transition: all .3s ease-in-out 0s;*/
/*}*/

/*.button-circle-animation:hover, .button-circle-animation:focus {*/
/*    color: #313133;*/
/*    transform: translateY(-6px);*/
/*}*/

/*.button-circle-animation:hover::before, .button-circle-animation:focus::before {*/
/*    opacity: 1;*/
/*}*/

/*.button-circle-animation::after {*/
/*    content: '';*/
/*    width: 30px;*/
/*    height: 30px;*/
/*    border: 6px solid #00e1ff;*/
/*    position: absolute;*/
/*    z-index: -1;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    animation: ring 2s infinite;*/
/*}*/

/*.button-circle-animation:hover::after, .button-circle-animation:focus::after {*/
/*    animation: none;*/
/*    display: none;*/
/*}*/

/*@keyframes ring {*/
/*    0% {*/
/*        width: 30px;*/
/*        height: 30px;*/
/*        opacity: 1;*/
/*    }*/
/*    100% {*/
/*        width: 300px;*/
/*        height: 300px;*/
/*        opacity: 0;*/
/*    }*/
/*}*/

/*!* End Button circle animation *!*/


/*!* Pulse animation *!*/

/*.pulse-btn {*/
/*    position: fixed;*/
/*    z-index: 10;*/
/*    bottom: 16px;*/
/*    right: 0;*/
/*    transform: translateX(-50%) translateY(-50%);*/
/*    box-sizing: content-box;*/
/*    display: block;*/
/*    width: 50px;*/
/*    height: 50px;*/
/*    border-radius: 50%;*/
/*    border: none;*/
/*    background: 0 0;*/
/*}*/

/*.pulse-btn:before {*/
/*    content: "";*/
/*    color: red;*/
/*    position: absolute;*/
/*    z-index: 0;*/
/*    left: 50%;*/
/*    top: 50%;*/
/*    transform: translateX(-50%) translateY(-50%);*/
/*    display: block;*/
/*    width: 55px;*/
/*    height: 55px;*/
/*    background: var(--blue);*/
/*    border-radius: 50%;*/
/*    animation: pulse-border 1.5s ease-out infinite*/
/*}*/

/*.pulse-btn:after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    z-index: 1;*/
/*    left: 50%;*/
/*    top: 50%;*/
/*    transform: translateX(-50%) translateY(-50%);*/
/*    display: block;*/
/*    width: 55px;*/
/*    height: 55px;*/
/*    background: var(--blue);*/
/*    border-radius: 50%;*/
/*    transition: all .2s*/
/*}*/

/*.pulse-btn:hover:after {*/
/*    background-color: var(--bs-green)*/
/*}*/

/*.pulse-btn img {*/
/*    position: relative;*/
/*    z-index: 3;*/
/*    max-width: 100%;*/
/*    width: 100%;*/
/*    height: 100%*/
/*}*/

/*@keyframes pulse-border {*/
/*    0% {*/
/*        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);*/
/*        opacity: 1*/
/*    }*/

/*    100% {*/
/*        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);*/
/*        opacity: 0*/
/*    }*/
/*}*/

/*!* End Pulse animation *!*/


/* End  lib */


/* Navbar */

.navbar {
    background-color: var(--nav-bg-color);
    padding: 0;
    box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
    height: 50px;
    /*overflow: hidden;*/
}

.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-lg,
.navbar > .container-md,
.navbar > .container-sm,
.navbar > .container-xl,
.navbar > .container-xxl {
    height: 100%;
    flex-wrap: nowrap;
}

.navbar-brand {
    /*display: block;*/
    /*min-width: max-content;*/
    /*height: 100%;*/
    /*width: 38px;*/
    width: 65px;
    margin-right: 0;
}

.navbar-brand img {
    object-fit: contain;
}

.navbar-nav .nav-link {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 12px 16px !important;
    color: var(--black);
    font-size: 15px;
    transition: none;
}

.navbar-nav .nav-link i {
    margin-right: 8px;
    margin-bottom: 2px;
    color: var(--blue);
}

.navbar-nav .nav-link.call {
    background-color: var(--blue);
    color: var(--white);
}

.navbar-nav .nav-link.call i {
    color: var(--white);
}

.navbar-nav .nav-link.call:hover,
.navbar-nav .nav-link.call:hover i {
    color: var(--black);
}

.navbar .call-btn-mobile {
    color: var(--blue);
    text-decoration: none;
    font-size: 15px;
}

.navbar-nav .nav-link:hover {
    background-color: var(--light-grey);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:focus {
    background-color: var(--mid-grey);
}

.divider {
    height: 50px;
}

/* End Navbar */


/* Form */

/* Start Canvas */
#canvas {
    position: relative;
}

canvas#newSignature,
canvas#canvas_hidden {
    background-color: white;
    width: 100%;
    /*border-radius: 8px;*/
    overflow: hidden;
    border: 1px solid var(--bs-gray-400);
    max-height: 200px;
}

canvas#newSignature {
    z-index: 10;
}

canvas#canvas_hidden {
    z-index: -10;
    position: absolute;
    left: 0;
}

/* End Canvas */

.form-block {
    /*max-width: 850px;*/
    margin: 0 auto;
    box-shadow: 0 0 30px 10px rgb(0 0 0 / 12%);
    overflow: hidden;
    word-break: break-word;
}

.form-invalid-warning {
    position: fixed;
    top: 68px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1031;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bs-warning);
    max-width: 288px;
    width: 100%;
    text-align: center;
    box-shadow: 0 0 30px 10px rgb(0 0 0 / 12%);
    overflow: hidden;
}

.form-invalid-warning button {
    border-left: 1px solid var(--bg-color);
}

.form-block .steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow-x: auto;
}

.form-block .steps .step-title {
    width: 100%;
    text-align: center;
    padding: 10px;
    background-color: beige;
    border: 1px solid #dee2e6;
    white-space: nowrap;
    text-decoration: none;
    color: var(--black);
}

.form-block .steps .step-title:hover {
    background-color: white !important;
    color: black !important;
}

.form-block li {
    list-style: none;
}

.form-block input[type=radio] {
    width: 24px;
    height: 24px;
    padding: unset;
    margin: 10px 10px 10px 0 !important;
    background-color: unset;
}

.form-block .form-check {
    display: flex;
    justify-content: space-between;
    padding: 0;
}

.form-wrapper {
    padding: 24px;
    background-color: var(--bg-color);
}

.form-wrapper h3 {
    color: #043641;
    font-size: 36px;
    font-weight: 700;
    padding-bottom: 30px;
}

#home-permit-form > .row > * {
    width: 100%;
}

.form-wrapper .location-remove-btn {
    position: absolute;
    top: -12px;
    right: 14px;
    height: unset;
    width: unset;
    font-size: 12px;
    font-weight: bold;
}

label[for="id_oversize"] {
    display: inline;
    font-size: 20px;
    color: var(--blue);
}

form input[type="checkbox"] {
    width: 48px;
    height: 48px;
    margin-right: 12px;
}

#id_oversize {
    width: 32px;
    height: 32px;
    margin-bottom: 28px;
    margin-left: 8px;
}

.authorize-net-logo {
    max-width: 150px;
}

.thanks-block i {
    font-size: 100px;
    color: #009257;
    margin: 30px auto;
    text-align: center;
    display: block;
}

.cards-block {
    display: flex;
    /*align-items: center;*/
    /*justify-content: center;*/
    margin-top: 32px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--bs-gray-400);
    padding-bottom: 8px;
    flex-wrap: wrap;
}

.cards-block .card-img-block {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cards-block .card-img-item {
    max-width: 80px;
    padding: 0 8px;
    width: 100%;
}

.cards-block .card-img-item:first-child {
    padding-left: 0;
}

.cards-block .card-img-item:not(:last-child) {
    border-right: 2px solid grey;
}

.cards-block .card-img-item .img {
    height: 22px;
    object-fit: contain;
}

/* End Form */


/* Section 1 */

.section-one {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.section-one-left-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 20px;
    color: var(--white);
    text-shadow: 0 0 3px rgb(0 0 0 / 100%);
}

.section-one-left-block ul li {
    margin-bottom: 20px;
}

/* End Section 1 */


/* Section 3 */

.section-three {
    background-color: var(--white);
    padding: 64px 0;
}

/* End Section 3 */


/* Section 4 */

.section-four .card img {
    height: 230px;
}

/* End Section 4 */


/* Blog */

.post-img {
    height: 300px;
    object-fit: contain;
    max-width: 480px;
}

/* End Blog */


/* About */

.about-section-one {
    background-color: var(--white);
}

.about-logo {
    height: 350px;
}

.about-logo img {
    object-fit: contain;
}

.about-special-block h4 {
    color: var(--blue);
}

.about-special-block i {
    background-color: var(--light-blue);
    padding: 8px;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* End About */


/* Footer */

.footer {
    background-color: var(--white);
    padding: 32px 0;
}

.footer-logo {
    height: 200px;
}

.footer-logo img {
    object-fit: contain;
}

/* End Footer */


/* Error page */

.error-block {
    margin-top: 32px;
    margin-bottom: 128px;
}

/* End Error page */


/* START Pagination */

.page-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
}

.page-pagination li {
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    margin: 5px 10px;
}

.page-pagination li a {
    color: var(--blue);
    background-color: var(--white);
    padding: 10px;
    border-radius: 50px;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-decoration: none;
}

.page-pagination li a i {
    line-height: 24px;
}

.page-pagination li a:hover {
    color: var(--white);
    background-color: var(--blue);
}

.page-pagination li.active a {
    color: var(--white) !important;
    background-color: var(--blue);
}

.page-pagination li:first-child a {
    color: var(--blue);
    width: auto;
    padding: 10px 20px;
}

.page-pagination li:first-child a i {
    margin-right: 10px;
    float: left;
}

.page-pagination li.active a:hover {
    color: var(--white);
    background-color: var(--blue);
}

.page-pagination li:last-child a {
    width: auto;
    padding: 10px 20px;
    flex-direction: row-reverse;
}

.page-pagination li:last-child a i {
    margin-left: 10px;
    float: right;
}

/* End Pagination */


/* Media queries */

@media only screen and (min-width: 768px) {
    .offcanvas.offcanvas-start {
        height: 100% !important;
    }

    .navbar .offcanvas .offcanvas-body {
        height: 100%;
    }

    .navbar-nav .nav-link {
        margin-right: 1px;
    }
}

@media only screen and (max-width: 1200px) {
    .container {
        max-width: 100%;
    }
}

@media only screen and (max-width: 992px) {
    .navbar {
        box-shadow: none;
    }

    .section {
        margin-bottom: 32px;
    }
}

@media only screen and (max-width: 768px) {
    .navbar-nav .nav-link {
        margin-bottom: 1px;
    }

    .form-wrapper {
        padding: 16px;
    }

    .form-wrapper h1 {
        font-size: 14px;
    }

    .form-wrapper h3,
    .form-wrapper h4 {
        font-size: 14px;
        margin: 0;
        padding-bottom: 16px;
    }

    .form-wrapper h6 {
        font-size: 14px;
    }
}

/* End Media queries */