/* ********************************************************************************************

    Design for a width of 1400px and above

*********************************************************************************************** */

@media only screen and (max-width: 1920px) and (min-width: 1400px) {
}

/* ********************************************************************************************

    Design for a width of 1200px and above

*********************************************************************************************** */

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 100%;
  }
}

/* ********************************************************************************************

    Design for a width of 768px and above

*********************************************************************************************** */

@media only screen and (min-width: 768px) {
  .p-md-89 {
    padding: 89px !important;
  }
  .p-md-50 {
    padding: 50px !important;
  }
}

/* ********************************************************************************************

    Design for a width of 992px and above

*********************************************************************************************** */
/* 
@media only screen and (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .navbar {
    padding-left: 0px;
    padding-right: 0px;
  }
} */

/* ********************************************************************************************

    Design for a width of 12000px and above

*********************************************************************************************** */

@media only screen and (min-width: 1200px) {
  .display-none-in-large {
    display: none;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .navbar {
    padding-left: 0px;
    padding-right: 0px;
  }
}

/* ********************************************************************************************

    Design for a width of 1200px and below

*********************************************************************************************** */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .display-none-in-large {
    display: none;
  }
}

/* ********************************************************************************************

    Design for a width of 1024px and below

*********************************************************************************************** */

@media only screen and (max-width: 1024px) {
  .display-none-in-large {
    display: none;
  }
}

/* ********************************************************************************************

    Design for a width of 992px and below

*********************************************************************************************** */

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .display-none-in-large {
    display: none;
  }
}

/* ********************************************************************************************

    Design for a width of 991px and below

*********************************************************************************************** */

@media only screen and (max-width: 991px) {
  .display-none-in-large {
    display: none;
  }
  .navbar-nav .dropdown-menu {
    position: absolute;
  }
  /* .before-login-2 .navbar-toggler {
        padding: .25rem .50rem;
        font-size: 1rem;
    } */
  .navbar-light .navbar-toggler {
    border: none;
  }
  .navbar-light .navbar-collapse {
    margin-top: 6px;
  }
  .navbar-light .navbar-collapse .navbar-nav .nav-link {
    padding-left: 0px;
  }

  .navbar-toggler {
    padding: 0.2rem 0.4rem;
    font-size: 13px;
  }
  .main-landing .navbar-toggler {
    margin-top: -3px;
  }
  .main-landing .navbar-toggler i {
    color: #fff;
  }
  .main-landing .navbar-brand {
    padding-top: 0px;
    margin-top: -15px;
  }
  .main-landing .right .navbar-nav .nav-link {
    color: #fff !important;
    padding-right: 1rem !important;
  }
  .main-landing .navbar-collapse {
    background: #fff;
    margin-right: 20px;
    border-radius: 3px;
  }
  .main-landing.navbar .navbar-nav {
    margin-bottom: 10px;
  }
  .main-landing.navbar .navbar-nav .nav-link {
    color: #2e3a59;
    padding-right: 1rem;
    padding-left: 1rem;
    text-transform: capitalize;
  }
  .navbar-light .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-nav .nav-item.dropdown .rounded-circle {
    width: 30px;
    height: 30px;
  }
  .navbar-brand img {
    height: 40px;
  }
  .logo-icon img {
    height: 25px;
  }
  .navbar-light .navbar-brand img {
    height: 30px;
  }
  .cart-text {
    margin-left: 0px;
    font-size: 15px;
  }
  .nav-item .nav-link i {
    vertical-align: middle;
  }
  .main-landing.navbar .navbar-nav .nav-link:hover {
    color: #2e3a59;
  }
  .navbar-brand {
    padding-top: 0px;
  }
}

/* ********************************************************************************************

    Design for a width of 767px and below

*********************************************************************************************** */

@media only screen and (max-width: 767px) {
  .h1,
  h1 {
    font-size: 1.7rem;
  }
  .h2,
  h2 {
    font-size: 1.3rem;
  }
  .main-heading {
    line-height: 40px;
  }
  .banner-slider.owl-carousel .item-img {
    height: 450px;
  }
  .user-app-bg-img::before,
  .vendor-app-bg-img::before {
    display: none;
  }
  .img-up-box {
    margin-top: 0px;
  }
  .img-up-box.right {
    margin-left: 0px;
    margin-top: 0px;
  }
  .comm-cylinder-img {
    height: auto;
  }
  .img-up-box.right .order-body img {
    height: auto;
  }
  .title {
    letter-spacing: normal;
    line-height: 30px;
    margin-bottom: 20px;
  }
  .landing-page .section {
    padding: 40px 0px;
  }
  .landing-page p {
    font-size: 15px;
  }
  .how-it-works img {
    width: 100px;
    margin-bottom: 20px;
  }
  .mt-md-65 {
    margin-top: 40px !important;
  }
  .benefits-list {
    margin-top: 50px !important;
  }
  .benefits-list .media-left {
    margin-right: 16px;
  }
  .number-box {
    height: 46px;
    width: 46px;
    line-height: 43px;
    font-size: 18px;
    border: 2px solid #269846;
  }
  .benefits-list h4 {
    font-size: 19px;
    margin-bottom: 8px;
  }
  .btn-section {
    text-align: center;
  }
  .btn-section img {
    width: 160px;
    height: 48px;
  }
  .btn-section img.mr-3 {
    margin-right: 0px !important;
  }
  .contact-us-bg {
    height: auto;
    background-image: none !important;
  }
  .contact-us-bg .title {
    color: #222b45 !important;
  }
  .contact-us-bg p {
    color: rgba(33, 33, 33, 0.8);
  }
  .location-section {
    padding: 25px;
  }
  .location-section h6 {
    font-size: 16px;
    margin-bottom: 5px;
  }
  .location-section li {
    margin-bottom: 20px;
  }
  .contact-form .form-control-lg {
    height: calc(1.675em + 1rem + 2px);
    font-size: 15px !important;
  }
  .contact-form textarea.form-control-lg {
    min-height: 100px;
  }
  .contact-icon i {
    font-size: 18px;
  }
  .contact-form .btn {
    width: 190px;
    height: 50px;
    font-size: 17px;
  }
  .footer-top {
    font-size: 14px;
  }
  .address-fields p {
    font-size: 14px;
  }
  .footer_main .footer-top {
    padding-bottom: 30px;
  }
  .footer-top {
    padding-top: 30px;
  }
  .card {
    min-height: auto;
    height: auto;
  }
  .card-header,
  .card-body,
  .card-footer {
    padding: 1rem;
  }
  .select-type-list li:last-child {
    margin-bottom: 0px;
  }
  .order-box,
  .delivery-box,
  .address-box {
    padding: 15px;
  }
  .btn {
    font-size: 13px;
  }
  .font-size-18 {
    font-size: 16px;
  }
  .value-number {
    font-size: 15px;
  }
  .qty-box i {
    font-size: 17px;
  }
  .settings-tab .nav-link {
    font-size: 14px;
    padding: 0.875rem 1.125rem;
    border-left: 2px solid transparent;
  }
  body {
    font-size: 14px;
  }
  .form-control {
    font-size: 14px;
  }
  .dropdown-item {
    padding: 10px 15px;
    font-size: 15px;
  }
  .font-size-16 {
    font-size: 15px;
  }
  .delivery-dropdown a i {
    font-size: 20px !important;
  }
  .has-mobile-text .form-control-feedback,
  .has-location-icon .form-control-feedback {
    font-size: 14px;
  }
  .form-action .checkbox-container {
    font-size: 14px;
  }
  .custom-btn-group {
    margin-top: 20px !important;
  }
  .checkbox-container,
  .radio-container {
    padding-left: 25px;
  }
  .checkbox-container .checkmark,
  .radio-container .checkmark {
    height: 16px;
    width: 16px;
  }
  .checkbox-container .checkmark::after,
  .radio-container .checkmark::after {
    left: 3px;
    width: 6px;
    height: 10px;
  }
  .font-size-17 {
    font-size: 15px;
  }
  .custom-badge {
    text-transform: capitalize;
  }
  .order-box img {
    height: 80px;
    width: 80px;
  }
  .security-deposit-section .order-box .order-body {
    padding: 20px 15px;
  }
  .h6,
  h6 {
    font-size: 15px;
  }
  .fileinput .thumbnail {
    width: 80px;
    height: 80px;
  }
  footer {
    font-size: 13px;
  }
  .h4,
  h4 {
    font-size: 1.125rem;
  }
  .h5,
  h5 {
    font-size: 16px;
  }
  .list-number-large .number {
    font-size: 17px;
    width: 40px;
    height: 40px;
    line-height: 37px;
  }
  .list-number-large {
    margin-top: 20px !important;
  }
  .store-icon img {
    width: 132px;
    height: 40px;
  }
  .h-40 {
    height: 38px;
  }
  .login-box {
    padding: 20px;
    margin: 20px auto 20px;
  }
  .content {
    min-height: auto;
  }
  .modal-header {
    padding: 20px 20px 0px 20px;
  }
  .modal-body {
    padding: 20px;
  }
  .modal-footer {
    padding: 0px 20px 20px;
  }
  .w-140 {
    width: 120px;
  }
  .base-timer {
    width: 90px;
    height: 90px;
  }
  .base-timer__label {
    width: 90px;
    height: 90px;
    font-size: 18px;
  }
  .modal-body p {
    font-size: 15px;
  }
  .gas-agency-title {
    font-size: 14px;
  }
  .pickup-list .radio-container {
    padding: 15px 15px 15px 45px;
  }
  .pickup-list .radio-container .checkmark {
    top: 20px;
    left: 15px;
  }
  .dropdown-menu {
    min-width: 295px !important;
  }
  .filter-dropdown .dropdown-menu {
    left: 57% !important;
  }
  .common-media {
    padding-bottom: 15px;
    margin-bottom: 15px;
    width: 100%;
  }
  .zmdi-hc-2x {
    font-size: 1.7em;
  }
  iframe {
    height: 300px;
  }
  .search-result .list-group-item {
    font-size: 15px;
  }
  .store-action {
    flex-wrap: wrap;
  }
  .list-icon-large img {
    width: 60px;
  }
  .prices-img {
    width: 180px;
  }
  .img-up-box .order-body img,
  .bg-primary .order-body img,
  .order-box-tab .order-body img {
    width: 150px;
  }

  .search-location .nav-link {
    font-size: 15px;
  }
  .login-body .nav-pills .nav-link {
    font-size: 15px;
  }
  .user-dropdown .dropdown-menu .dropdown-item {
    font-size: 13px;
  }
  .static-content .h6,
  .static-content h6 {
    margin-top: 1rem !important;
    margin-bottom: 0.875rem !important;
  }
  .static-content ul {
    padding-inline-start: 30px;
  }
  .order-box-tab .order-body {
    margin-top: 15px;
  }
  .footer-img-container {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    margin-bottom: 20px;
  }
  .footer-img-container .store-icon a {
    display: inline-block;
  }
  .footer-img-container .store-icon {
    display: inherit;
  }
  .footer-img-container .footer-logo img {
    height: 40px;
    margin-top: -12px;
  }
  .footer-img-container .store-icon img {
    width: 100px;
    height: 35px;
  }
  .footer-img-container .mb-4,
  .footer-img-container .mb-2 {
    margin-bottom: 0px !important;
  }
  .footer-img-container .mb-2:first-child {
    margin-right: 5px;
  }
  /* .footer-img-container .footer-logo, .footer-img-container .store-icon  {
        display: inline-block;
    } */
  .my-custom-tab a:hover,
  .my-custom-tab a.active {
    padding: 0.875rem 1.125rem 0.875rem 1.6rem !important;
  }
  .my-custom-tab a:before {
    padding: 8px;
  }
  .my-custom-tab a {
    width: auto;
  }
  .cylinder-img {
    height: auto;
  }
  .py-35 {
    padding: 20px 0px 0px !important;
  }
  ul.sidebar-links {
    margin: 0px;
  }
  .sidebar-links > li:last-child {
    margin-bottom: 5px;
  }
  .social-media-icons .col {
    max-width: max-content;
  }
  .social-media-icons a img {
    width: 35px;
    margin-right: 0px !important;
  }
  .social-media-icons li {
    margin: 0px 0px 4px 0px !important;
  }
  /* 09/09/2020 */
  .yellow-box {
    padding: 30px;
  }
  .yellow-box .h3 {
    font-size: 1.5rem;
  }
  .yellow-box h4 {
    line-height: 30px;
    font-size: 1.2rem !important;
  }
  .handshake-icon img {
    width: 140px;
  }
  .mt-80 {
    margin-top: 40px;
  }
  .display-none-in-small {
    display: none !important;
  }
  .display-in-only-small {
    display: block !important;
  }
  .order-list-scroll {
    height: 250px;
  }
  .responsive-buttons-container .btn {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  .responsive-btn {
    height: 40px;
  }
  .responsive-btn-refund-modal {
    height: 40px;
  }
  .h3,
  h3 {
    font-size: 1.5rem;
  }
  .remove-padding-li {
    padding-inline-start: 20px;
  }
  .ml-m-25 {
    margin-left: 0px !important;
  }
  .login-close {
      bottom: -5px;
  }
}

/* ********************************************************************************************

    Design for a width of 639px and below

*********************************************************************************************** */

@media only screen and (max-width: 639px) {
  .responsive-btn {
    font-size: 12px;
  }
  .responsive-btn-refund-modal {
    font-size: 10px;
    padding: 3px 7px !important;
  }
}

/* ********************************************************************************************

    Design for a width of 500px and below

*********************************************************************************************** */

@media only screen and (min-width: 576px) {
}

@media (min-width: 576px) {
  .modal-sm {
    max-width: 370px;
  }
}

/* ********************************************************************************************

    Design for a width of 520px and below

*********************************************************************************************** */

@media only screen and (min-width: 480px) and (max-width: 520px) {
}

/* ********************************************************************************************

    Design for a width of 479px and below

*********************************************************************************************** */

@media only screen and (max-width: 479px) {
}

/* ********************************************************************************************

    Design for a width of 380px and below

*********************************************************************************************** */

@media only screen and (max-width: 380px) {
}

/* ********************************************************************************************

    Design for a width of 320px and below

*********************************************************************************************** */

@media only screen and (max-width: 320px) {
}