@media (min-width: 769px) {
    .visible-xs {
        display: none;
    }

    .follow-us-col {
        order: 2;
    }
}

@media (max-width: 992px) {
    .navbar-toggler-icon {
        background: url(../images/menu-icon-dark.svg) no-repeat;
        -webkit-background-size: contain;
        background-size: contain;
    }

    .home .navbar-toggler-icon {
        background: url(../images/menu-icon.svg) no-repeat;
    }

    .scrolled .navbar-toggler-icon {
        background-image: url(../images/menu-icon-dark.svg);
    }

    .navbar-collapse {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background: #6bc9df;
        background: -moz-linear-gradient(-45deg, #6bc9df 0%, #3391ff 100%);
        background: -webkit-linear-gradient(-45deg, #6bc9df 0%, #3391ff 100%);
        background: linear-gradient(135deg, #6bc9df 0%, #3391ff 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6bc9df', endColorstr='#3391ff', GradientType=1);
        text-align: center;
        display: flex;
        align-items: center;
    }

    .navbar-collapse .close-btn {
        position: absolute;
        right: 17px;
        z-index: 9;
        top: 17px;
        background: none;
        border: none;
    }

    .navbar-close-icon {
        width: 14px;
        height: 14px;
        display: inline-block;
        background: url(../images/menu-close-icon.svg);
    }

    .navbar-collapse:after {
        background: url(../images/menu-bg@2x.png);
        -webkit-background-size: cover;
        background-size: cover;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: '';
        z-index: 1;
    }

    header .navbar-nav {
        display: block;
        width: 100%;
        padding: 0 40px;
        position: relative;
        z-index: 9;
    }

    header .nav-item {
        margin: 0 0 30px;
        display: block;
    }

    header .nav-item a {
        color: #fff;
    }

    header .nav-item .login-btn {
        background: #ffffff;
        height: 56px;
        width: 120px;
        text-align: center;
        display: inline-block;
        color: #00b1ff;
        line-height: 56px;
    }
}

@media (max-width: 767px) {
    header.scrolled.nav-up {
        top: -97px;
    }

    .hidden-xs {
        display: none;
    }

    .navbar-toggler {
        margin-top: 0.5rem;
    }

    .home.scrolled .header-link {
        color: #fff;
    }

    .home.scrolled .register-btn {
        color: #fff !important;
    }

    header .register-btn {
        border: 1px solid #fff;
        height: 56px;
        width: 120px;
        text-align: center;
        display: inline-block;
        color: #00b1ff;
        line-height: 54px;
    }

    .hero-section {
        background: url(../images/home-bg-mobile@2x.png) center center no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
    }

    header,
    .nav-down {
        height: 66px;
        padding: 0 10px 0 10px;
    }

    .scrolled.nav-down {
        padding-top: 0;
    }

    .hero-section h3 {
        padding-left: 0;
        padding-right: 50px;
        line-height: 1.5;
    }

    .hero-section h3:before {
        display: none;
    }

    .logo img {
        width: 110px;
    }

    .banner-content {
        padding-left: 35px;
        padding-right: 35px;
    }

    .hero-section h1 {
        font-size: 32px;
        line-height: 44px;
    }

    .banner-text p {
        line-height: 28px;
    }

    .hiw-item-inner {
        margin-bottom: 15px;
        padding: 30px 30px 35px;
    }

    .section-title {
        font-size: 24px;
    }

    .how-it-works-section .section-title {

    }

    .why-section .justify-content-around {
        flex-wrap: wrap;
    }

    .trusted-item {
        margin-bottom: 20px;
    }

    .price-type--discount {
        right: 30px;
        top: 60px;
    }

    .price-type--discount span {
        position: absolute;
        right: -15px;
        top: 6px;
    }

    .price-type--discount i {
        width: 40px;
        height: 29px;
        background-image: url(../images/price-arrow-mobile.svg);
    }

    /**/

    .plan-item {
        margin-bottom: 35px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .plan-item--inner {
        max-height: 600px;
        transition: max-height 0.45s ease-out;
        position: relative;
    }

    .opened .plan-item--inner {
        max-height: 9999px;
    }

    .plan-item--inner:after {
        content: '';
        position: absolute;
        height: 100px;
        bottom: 0;
        left: 0;
        width: 100%;
        background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 45%, rgba(255,255,255,1) 100%);
        background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 45%,rgba(255,255,255,1) 100%);
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 45%,rgba(255,255,255,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
        -webkit-border-radius: 0 0 4px 4px;
        -moz-border-radius: 0 0 4px 4px;
        border-radius: 0 0 4px 4px;
    }

    .opened .plan-item--inner:after {
        display: none;
    }

    .plan-item.platinum {
        margin-top: 0;
    }

    .plan-item-more {
        position: absolute;
        bottom: -18px;
        height: 36px;
        padding: 0 15px;
        -webkit-border-radius: 18px;
        -moz-border-radius: 18px;
        border-radius: 18px;
        background: #e0f5ff;
        color: #4DC5FA;
        border: none;
        line-height: 36px;
        font-size: 13px;
        left: 50%;
        margin-left: -50px;
        font-weight: 500;
        outline: none;
    }

    .plan-item-more:focus {
        outline: none;
    }


    .opened .more,
    .plan-item-more .less {
        display: none;
    }

    .opened .plan-item-more .less {
        display: block;
    }

    .plan-item-corner {
        left: 0;
    }

    /**/

    .question-section-head {
        text-align: center;
    }

    .question-tabs {
        padding-left: 40px;
        margin-bottom: 55px;
    }

    .question-section {
        padding: 70px 0;
    }

    .contact-section .section-title {
        text-align: center;
    }

    .contact-text-col {
        margin-right: 0;
    }

    .get-in-touch {
        text-align: center;
        padding-right: 0;
    }

    .contact-details {
        padding: 50px 55px 0 80px;
    }

    .coffee-text {
        padding-left: 80px;
    }

    footer {
        text-align: center;
        position: relative;
    }

    footer:after {
        background: url(../images/footer-bg-mobile@2x.png);
        -webkit-background-size: cover;
        background-size: cover;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: '';
        z-index: 1;
    }

    footer:before {
        display: none;
    }

    footer .container {
        position: relative;
        z-index: 9;
    }

    .footer-top {
        padding-top: 80px;
    }

    .footer-top h4 {
        margin: 40px 0 24px;
    }

    footer a.btn-big-height {
        display: inline-block;
        line-height: 56px;
    }

    .follow-us-col {
        text-align: center;
        margin-bottom: 30px;
    }

    .follow-us-col span {
        display: block;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .copyright i {
        display: block;
        margin-top: 6px;
    }

    /***/

    .docs-section {
        padding-top: 108px;
    }

    .disctrict-aside-list {
        padding-left: 110px;
        background: url(../images/terms-menu-bg.svg) no-repeat left bottom;
        -webkit-background-size: contain;
        background-size: contain;
        padding-bottom: 60px;
    }

    .docs-title {
        text-align: center;
    }

    .docs-content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .docs-content h2 {
        padding-left: 20px;
    }

    .docs-content .second-line li:before {
        margin-right: 20px;
    }

    .form-section--register,
    .form-section--login {
        padding-top: 110px;
        padding-bottom: 80px;
    }

    .form-section .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .payment-method {
        width: 100%;
    }

    .payment-section .row {
        margin-left: 0;
        margin-right: 0;
    }

    .price-info:before {
        display: none;
    }

    .price-info:after {
        width: 207px;
        height: 156px;
        background: url(../images/payment-top-bg.svg) no-repeat right bottom;
        position: absolute;
        content: '';
        right: 0;
        top: 130px;
    }

    .payment-section {
        padding-top: 116px;
    }

    .payment-section .section-title {
        margin-bottom: 30px;
    }

    .payment-section .plan-title {
        font-size: 19px;
    }

    .verification-section {
        padding-top: 115px;
        padding-bottom: 80px;
    }

    .ver-title {
        font-size: 22px;
    }

    .verification-col-inner {
        padding: 35px 20px;
    }

    .verification-col .form-btn-wrapper .form-btn {
        width: 130px;
        margin: 0 10px;
    }

    .col-inner-relative:before {
        display: none;
    }

    .verification-col-inner {
        -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 87, 126, 0.1);
        -moz-box-shadow: 0px 0px 30px 0px rgba(0, 87, 126, 0.1);
        box-shadow: 0px 0px 30px 0px rgba(0, 87, 126, 0.1);
    }

    .report-section {
        padding-top: 115px;
        padding-bottom: 80px;
    }

    .report-col {
        width: 100%;

    }

    .report-col-inner {
        padding: 35px 20px;
    }

    .report-title {
        font-size: 22px;
    }

    .modal-dialog {
        margin-right: 1rem;
        margin-left: 1rem;
    }

    .download-modal .modal-content {
        padding: 35px 24px;
    }

    .account-section {
        padding-top: 115px;
        padding-bottom: 80px;
    }

    .account-section .disctrict-aside-list {
        display: none;
    }

    .account-content-inner {
        padding: 35px 25px;
    }

    .account-content-inner .details-body {
        flex-wrap: wrap;
    }

    .details-logo {
        width: 100%;
        margin-right: 0;
        margin-bottom: 35px;
    }

    .img-upload-block {
        margin: 0 auto;
    }

    .details-info {
        width: 100%;
        text-align: center;
    }

    .account-title {
        font-size: 22px;
        line-height: 26px;
        margin-bottom: 30px;
    }

    a.account-btn {
        display: inline-block;
        width: 120px;
        line-height: 56px;
    }

    .upload-field {
        margin-bottom: 40px;
    }

    .account-btn-wrapper {
        text-align: center;
        display: block !important;
    }

    .subscription-label {
        padding-left: 0;
    }

    .past-reports-wrapper {
        width: 100%;
        padding: 0 10px;
    }

    .report-row {
        display: block;
    }

    .report-info {
        margin-right: 0;
        margin-bottom: 8px;
    }

    .details-form-fields {
        width: 100%;
    }

    .reset-password .account-content-inner {
        padding: 35px 20px;
    }

    .account-content-inner form,
    .reset-password form {
        width: 100%;
    }

    .manage-users-wrapper .edit-btn {
        width: 45px;
        font-size: 10px;
        height: 30px;
    }

    header.header-map {
        padding-left: 10px;
        padding-right: 0;
    }

    .map-search {
        left: 12px;
        right: 12px;
        top: 78px;
    }

    .left-visible .map-search {
        left: 12px;
    }

    .map-search form {
        width: 100%;
        display: block !important;
    }

    .map-search input[type=text] {
        width: 100%;
        display: block;
        float: left;
    }

    .map-switcher {
        top: 133px;
        left: 12px !important;
    }

    .map-content .map-zoom-control {
        top: 178px;
        left: 12px !important;
    }

    .left-sidebar {
        top: 65px;
        height: calc(100% - 65px);
    }

    .right-sidebar {
        top: 65px;
    }

    .right-opened .right-sidebar-control {
        bottom: 125px;
    }

    .left-opened .left-sidebar-control {
        bottom: 125px;
    }

    .map-middle-modal {
        width: calc(100% - 24px);
        margin-left: 12px;
        margin-right: 12px;
    }

    .map-modal-body-content {
        display: block !important;
    }

    .modal-col-6 {
        width: 100%;
    }

    .map-modal-wrapper {
        z-index: 20;
    }

    .map-modal-wrapper:after {
        display: none;
    }

    .map-modal-body .simplebar-mask {
        overflow: auto;
    }

    .map-big-modal {
        width: calc(100% - 24px);
        margin-left: 12px;
        margin-right: 12px;
    }

    .left-visible .map-modal {
        margin-left: 12px;
    }

    .map-modal-body table th {
        padding: 5px 8px;
    }

    .map-modal-body table td {
        padding: 5px 8px;
    }

    .map-modal-body table:not(.flag-table) td:first-child,
    .map-modal-body table:not(.flag-table) td:nth-child(2) {
        min-width: 150px;
    }

    .map-modal-body .col-6,
    .map-modal-body .col-5,
    .map-modal-body .col-4
    {
        width: 100%;
        max-width: unset;
    }

    .map-modal-body-graphs .row {
        display: block;
    }

    .map-modal-body img {
        max-width: 100%;
    }

    .map-modal-body .d-flex,
    .map-modal-body .row {
        display: block !important;
    }

    .modal-inner-padding {
        padding: 15px;
    }

    .household-row {
        margin-top: 30px;
    }

    .flag-list {
        margin: 0 -5px;
    }
    .map-modal .flag-table td span {
        font-size: 11px;
        width: 100px;
    }

    .map-modal .flag-table td {
        width: 42%;
        padding: 12px 10px 12px 0;
        text-align: center;
    }

    .map-modal-body table td.row-num {
        width: 6%;
        text-align: center;
    }

    .map-modal .flag-table td img {
        margin-right: 0;
        margin-bottom: 5px;
        max-height: 17px;
    }

    .map-modal {
        width: calc(100% - 24px);
        margin-left: 12px;
        margin-right: 12px;
    }
}