/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 768px) {
    html, body {
        overflow-x: hidden;
    }
    .navbar-brand {
        display: block;
    }
    div#navbarSupportedContent {
        display: block !important;
        position: fixed;
        background: #000;
        height: 100vh !important;
        top: 0px;
        padding-left: 15px;
        left: -80%;
        z-index: 9999;
        width: 70%;
        transition: all 0.4s;
    }
    div#navbarSupportedContent.show {
        left: 0;
    }
    .navbar-fixed-top {
        position: relative;
    }
    .top-header, .banner-caption {
        display: none;
    }
    .logo {
        text-align: center;
    }

    .mobilemenu-bg {
        background: #000; 
        margin-top: 10px;
    }
    .btm-header .main-menu {
        float: none;
        position: relative;
        top: 0;
        width: 100%;
        left: 0;
        margin-top: 0px;
        z-index: 999;  
    }
    .navbar-nav .nav-item.active > .nav-link:before {
        pointer-events: none;
        content: '';
        position: absolute;
        border: #f50005 solid 4px;
        border-radius: 30px;
        top: -8px;
        right: -8px;
        bottom: -8px;
        left: -8px;
        opacity: 1;
    }
    .hvr-outline-in:hover:before, .hvr-outline-in:focus:before, .hvr-outline-in:active:before {
        top: -8px;
        right: -8px;
        bottom: -8px;
        left: -8px;
        opacity: 1;
    }
    .main-menu .navbar-nav > li {
        line-height: normal;
    }
    .main-menu ul li a {
        margin: 10px 0;
        line-height: 25px;
    }
    .main-menu .navbar-nav li:hover .dropdown-menu {
        top: 35px;
    }
    .main-menu ul.dropdown-menu li a {
        margin: 0;
    }
    .btm-header {
        padding-bottom: 0;
        background: #fff;
    }
    .banner-wrapper {
        margin-top: 0;
    }
    .breadcrumbs .breadcrumb {
        text-align: center;
    }
    .welcome-content {
        text-align: center;
    }
    .welcome-image {
        margin: 15px;
    }
    .services-box .no-padding-left, .services-box .no-padding-right {
        padding: inherit;
    }
    .services-grid .services-wrap {
        background-color: #e4e4e4;
    }
    .maintenance-content h3 {
        font-weight: 600;
        font-size: 25px;
        text-align: center;
        margin-top: 20px;
    }
    .product-container {
        margin-bottom: 30px;
    }
    #quote .no-padding-right {
        padding: inherit;
    }
    .quote-form {
        margin-top: 30px; 
    }
    .time-table ul li {
        font-size: 15px;
    }
    #free-tips {
        background: url(../images/free-tips.jpg) repeat;
        padding: 40px;
    }
    .tips-container {
        background: none;
        padding: 0px 10px 60px 10px;
        overflow: hidden;
    }
    #free-tips h2 {
        font-size: 25px;
    }
    #free-tips a {
        float: left;
    }
    #free-tips li {
        float: left;
        margin-right: 10px;
    }
    #free-tips li a {
        padding: 10px 25px; 
    }
    .footer-menu ul li {
        display: inline;
        text-transform: uppercase;
        font-weight: 600;
        padding: 10px 18px;
        font-size: 14px;
    }
    .footer-contact {
        margin-bottom: 20px;
        overflow: hidden;
        text-align: center;
    }
    .footer-contact .contact-details {
        width: 100%;
        /* float: left; */
        text-align: center;
        margin-bottom: 15px;
    }
    .footer-contact .contact-icon {
        float: none;
    }
    .footer-phone .contact-details {
        width: 100%;
    }
    .footer-contact .contact-details p {
        text-align: center;
    }
    #footer {
        padding-bottom: 100px;
    }
    .scrollup {
        bottom: 80px;
        right: 15px;
    }
    .icon {
        width: 30px;
        height: 30px;
        font-size: 20px;
        line-height: 30px;
    }

    .btm-footer {
        padding-bottom: 100px;
    }
    .copyright {
        text-align: center;
    }
    .powered {
        text-align: center;
        float: none;
    }
    .footer-button {
        display: block;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    /* Styles */
}
@media (min-width: 768px) {

}
@media (min-width: 576px) {
    .page-heading .breadcrumb a::after {
        color: rgba(255,255,255,.2);
    }
    .breadcrumbs .breadcrumb a::after {
        position: relative;
        margin-left: 15px;
        content: "\f105";
        font-family: 'FontAwesome';
        color: rgba(255,255,255,.8);
    }
    .breadcrumbs .breadcrumb a {
        margin-right: 15px;
    }
    .breadcrumbs .breadcrumb>span {
        padding: 18px 0;
    }
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
    ul.slimmenu li a {
        padding: 12px 5px;
    }
    .nav-link {
        padding: 0rem 0.8rem !important;
    }
    .main-menu ul li a {
        font-size: 16px;
    }
    .banner-caption {
        top: 25%;
        width: 50%;
    }
    .tips-container {
        background: no-repeat;
    }
    .services-grid .services-wrap {
        min-height: 315px;
    }
    .services-grid .services-caption {
        min-height: 296px;
        padding: 10px 10px 10px 10px;
    }
    .services-grid .services-caption h3 {
        padding-bottom: 0;
    }
    .services-caption .main-btn {
        width: 190px;
    }
    .services-caption .main-btn i {
        margin-left: 0px;
    }
    .services-caption .main-btn span {
        margin-left: 30px;
    }
}

/* iPads (landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {

}

/* iPads (portrait) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
    /* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}

@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
    /* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
    /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}

@media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

@media only screen and (min-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

@media only screen and (min-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

@media only screen and (min-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

@media only screen and (min-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

@media only screen and (min-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

@media only screen and (min-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

@media only screen and (min-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

@media only screen and (min-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}