$break-xl: 1400px;
$break-lg: 1200px;
$break-md: 991px;
$break-sm: 768px;
$break-smt: 767px;
$break-ip: 640px;
$break-xs: 480px;
@mixin breakpoint($point) {
    @if $point==xldesktop {
        @media (max-width: $break-xl) {
            @content;
        }
    }
    @else if $point==lgdesktop {
        @media (max-width: $break-lg) {
            @content;
        }
    }
    @else if $point==desktop {
        @media (max-width: $break-md) {
            @content;
        }
    }
    @else if $point==tablet {
        @media (max-width: $break-sm) {
            @content;
        }
    }
    @else if $point==smt {
        @media (max-width: $break-smt) {
            @content;
        }
    }
    @else if $point==iphone {
        @media (max-width: $break-ip) {
            @content;
        }
    }
    @else if $point==mobile {
        @media (max-width: $break-xs) {
            @content;
        }
    }
}


/*Breakpoint media query start here*/

@include breakpoint(desktop) {
    .banner-section-wrap {
        min-height: 470px;
        padding: 30px 0;
    }
    .header-top {
        .desktop-right {
            float: none;
        }
    }
    h2 {
        font-size: 25px;
    }
    h3 {
        font-size: 22px;
    }
    .speciality-tab {
        .spec-tab-content {
            .spec-tabs {
                li {
                    a {
                        font-size: 14px;
                    }
                }
            }
        }
    }
    /*Home ent*/
    .home-banner-ent {
        position: relative;
        .sp-row-padding {
            &:hover {
                [class*="col-"] {
                    width: 33.33%;
                }
            }
            [class*="col-"] {
                min-height: 45vh;
                position: relative;
                color: $white-color;
                &:before {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.8);
                    @include transition(all 0.6s ease-in-out 0s);
                    z-index: 0;
                }
                &:hover {
                    width: 33.33%;
                    &:before {
                        content: '';
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, 0.6);
                        @include transition(all 0.6s ease-in-out 0s);
                        z-index: 0;
                    }
                }
            }
            [class*="col-"].ear {
                background-image: url(../images/ear.png);
                background-size: cover;
                background-position: 50% 50%;
            }
            [class*="col-"].nose {
                background-image: url(../images/nose.jpg);
                background-size: cover;
                background-position: 50% 50%;
            }
            [class*="col-"].throat {
                background-image: url(../images/throat.jpg);
                background-size: cover;
                background-position: 50% 50%;
            }
            .content-ent {
                display: block;
                margin-top: 50%;
                transform: translateY(-50%);
                z-index: 9999;
                text-align: center;
                max-width: 500px;
                width: 100%;
                padding: 0 50px;
                text-align: left;
            }
        }
    }
    .coming-soon-body {
        display: block;
        overflow: hidden;
        position: relative;
        z-index: 111;
        .coming-soon-content-wrap {
            position: relative;
            text-align: center;
            .left-img {
                width: 260px;
                height: 360px;
                display: inline-block;
                clear: both;
                @include box-sizing (border-box);
                padding-right: 20px;
                float: none;
                img {
                    max-width: 100%;
                }
            }
            .right-content {
                @include calc(width, '100% - 0');
                width: 100%;
                clear: both;
                float: none;
                padding: 15px;
                margin-bottom: 25px;
                h2 {
                    font-size: 40px;
                }
                .logo {
                    h1 {
                        font-weight: 100;
                        font-size: 30px;
                        span {
                            color: $theme-color;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }
    .defaultCountdown {
        display: inline-block;
        .countdown-section {
            .countdown-amount {
                margin-right: 5px;
            }
        }
    }
}

@include breakpoint(tablet) {
    .appointment-wrap {
        .appointment-form {
            .form-row {
                .one-half {
                    width: 100%;
                    clear: both;
                }
            }
        }
    }
    h2 {
        font-size: 22px;
    }
    h3 {
        font-size: 21px;
    }
    p {
        font-size: 13px;
    }
    /*Ent section */
    .individual-thought {
        .thought-quote {
            font-size: 18px;
        }
    }
    .blog-body-content {
        .medical-blog-block {
            .blog-heading {
                h2 {
                    font-size: 16px;
                }
            }
        }
    }
    .heading-wrap {
        span.top-tag {
            font-size: 18px;
        }
    }
    .menu-logo-wrap {
        .logo {
            h1 {
                font-size: 30px;
            }
        }
    }
    .inner-about-wrap .about-content .text-wrap h3 {
        font-size: 25px;
    }
    .call-to-action-two .cta-right-info .phone-no {
        font-size: 25px;
    }
    /*Home ent*/
    .home-banner-ent {
        position: relative;
        display: block;
        background: $black-color;
        display: block;
        background-size: cover;
        .sp-row-padding {
            &:hover {
                [class*="col-"] {
                    width: auto;
                }
            }
            [class*="col-"] {
                padding-left: auto;
                padding-right: auto;
                min-height: 30vh;
                position: relative;
                @include transition(all 0.6s ease-in-out 0s);
                color: $white-color;
                &:before {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.8);
                    @include transition(all 0.5s ease-in-out 0s);
                    z-index: 0;
                }
                &:hover {
                    width: auto;
                    &:before {
                        content: '';
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, 0.6);
                        z-index: 0;
                    }
                }
            }
            [class*="col-"].ear {
                overflow: hidden;
            }
            [class*="col-"].nose {
                overflow: hidden;
            }
            [class*="col-"].throat {
                overflow: hidden;
            }
            .content-ent {
                display: block;
                margin-top: 20%;
                transform: translateY(-20%);
                margin-bottom: 50px;
                overflow: hidden;
            }
        }
    }
    .home-banner-eye {
        position: relative;
        .banner-eye-content {
            color: $white-color;
            margin-top: 20%;
            transform: translateY(-20%);
        }
    }
    .counter-wrap {
        position: relative;
        .counter-single {
            color: $white-color;
            padding: 40px 0;
            span {
                display: inline-block;
                width: 100%;
            }
            .counter {
                font-size: 22px;
                font-weight: 600;
                margin: 25px 0 15px;
            }
            .counter-text {
                margin: 10 0;
                font-size: 15px;
                font-weight: 300;
            }
        }
    }
    /*app responsive*/
    .menu-app-wrap.fixed-header {
        .health-app-nav {
            min-height: 10px;
        }
    }
    .menu-app-wrap {
        .logo {}
        .health-app-nav {
            background: transparent;
            border: none;
            .navbar-collapse {
                border-top: 1px solid transparent;
                margin-top: 15px;
                background: $black-color;
            }
            .navbar-toggle {
                position: absolute;
                top: -25px;
                right: -10px;
                border: none;
                margin: 0;
                &:hover {
                    background-color: transparent;
                }
                &:focus {
                    background-color: transparent;
                }
                &:active {
                    background-color: transparent;
                }
                span {
                    background-color: $white-color;
                }
            }
        }
    }
    .app-feature-wrap {
        .feature-right-icon {
            li {
                .feature-cont {
                    float: right;
                    text-align: left;
                    padding-left: 20px;
                }
                .feature-icon {
                    float: left;
                    text-align: center;
                }
            }
        }
    }
}

@include breakpoint(smt) {
    .call-to-action-two:after {
        background: none;
    }
    .menu-logo-wrap {
        .health-main-nav {
            margin-top: 0;
            margin-bottom: 15px;
            min-height: 1px;
            ul#menu {
                .dropdown {
                    position: relative;
                    &:after {
                        content: "";
                        position: absolute;
                        right: 10px;
                        top: 25px;
                        width: 0;
                        height: 0;
                        border-top: 5px solid lighten($theme-color, 10%);
                        border-right: 5px solid transparent;
                        border-bottom: 5px solid transparent;
                        border-left: 5px solid transparent;
                    }
                }
            }
        }
    }
}

@include breakpoint(iphone) {
    .header-top .header-top-link li a {
        font-size: 12px;
    }
    .sidebar-wrap {
        .news-tab-block {
            .recent-news {
                li {
                    .right-news-content {
                        h4 {
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
    .coming-soon-body {
        .coming-soon-content-wrap {
            .right-content {
                h2 {
                    font-size: 35px;
                    margin-top: 15px;
                }
            }
        }
    }
    .banner-section-wrap .hc-banner button {
        font-size: 12px;
    }
    .home-banner-eye {
        min-height: 450px;
        .banner-eye-content {
            margin-top: 28%;
            overflow: hidden;
        }
    }
    .header-top {
        .header-top-link {
            li {
                border-left: none;
                display: inline-block;
                clear: both;
                text-align: left;
                margin-bottom: 15px;
            }
            ul.emr-dropdown {
                li {
                    .emr-phone {
                        ;
                    }
                    .emr-department {
                        display: block;
                        clear: both;
                    }
                }
            }
        }
    }
    .speciality-tab {
        margin: -280px 15px 0 15px;
        .spec-tab-content {
            .spec-tabs {
                li {
                    a {
                        font-size: 12px;
                        padding: 10px 8px;
                        margin-bottom: 12px;
                    }
                }
            }
        }
    }
}

@include breakpoint(mobile) {
    .getin-touch {
        .appoitment-wrap {
            li a {
                font-size: 12px;
                padding: 10px 6px;
            }
        }
    }
    .speciality-tab {
        .spec-tab-content {
            .spec-tabs {
                li {
                    a {
                        font-size: 10px;
                        padding: 10px 8px;
                        margin-bottom: 12px;
                    }
                }
            }
        }
    }
}