//===== MEDIA QUERY with max width===//
@mixin brk-point-mm($mnw,$mx) {
    @media(min-width: $mnw) and (max-width: $mx) {
        @content;
    }
}
@mixin mx-mobile-xs {
    @media(max-width: 479px) {
        @content;
    }
}

@mixin mx-mobile {
    @media (min-width: 480px) and (max-width: 575px) {
        @content;
    }
}

// Small devices (portrait phones, less than 575px)//
@mixin all-mx-mobile {
	@media (max-width: 575px) {
		@content;
	}
}

@mixin mx-mobile-lg {
    @media (min-width: 576px) and (max-width: 767px) {
        @content;
    }
}

// All below mobile lg
@mixin all-below-mobile-lg {
    @media (max-width: 767px) {
        @content;
    }
}

@mixin mx-tablet {
    @media(min-width: 768px) and (max-width: 991px) {
        @content;
    }
}

// All devices below 991px //
@mixin all-below-med {
    @media (max-width: 991px) {
        @content;
    }
}

@mixin mx-desktops {
    @media(min-width: 992px) and (max-width: 1199px) {
        @content;
    }
}

@mixin mmx-desktops {
    @media (max-width: 1200px) {
        @content;
    }
}

@mixin mx-large-desktops {
    @media(min-width: 1200px) and (max-width: 1500px) {
        @content;
    }
}

@mixin mx-large-desktops2 {
    @media (max-width: 1600px) {
        @content;
    }
}

@mixin mx-extra-large-desktops {
    @media(min-width: 1500px) {
        @content;
    }
}


//=== Media Query in min wdith ===//
@mixin brk-point($mw) {
    @media(min-width: $mw) {
        @content;
    }
}
@mixin from-zero-px {
    @media(min-width: 0px) {
        @content;
    }
}
@mixin mobile-xs {
    @media(min-width: 320px) {
        @content;
    }
}

@mixin mobile {
    @media(min-width: 480px) {
        @content;
    }
}

@mixin mobile-lg {
    @media(min-width: 576px) {
        @content;
    }
}

@mixin tablet {
    @media(min-width: 768px) {
        @content;
    }
}

@mixin desktops {
    @media(min-width: 992px) {
        @content;
    }
}

@mixin large-desktops {
    @media(min-width: 1200px) {
        @content;
    }
}

@mixin large-desktops-mid {
    @media(min-width: 1352px) {
        @content;
    }
}

@mixin extra-large-desktops {
    @media(min-width: 1500px) {
        @content;
    }
}

@mixin xx-large-desktops {
    @media(min-width: 2000px) {
        @content;
    }
}

@mixin till-desktop {
    @media (min-width: 320px) and (max-width:992px) {
        @content;
    }
}

// Media Queries in Variable //

$extra-device: 'only screen and (min-width: 1600px) and (max-width: 1919px)';
$laptop-device: 'only screen and (min-width: 1200px) and (max-width: 1599px)';
$lg-layout: 'only screen and (min-width: 992px) and (max-width: 1199px)';
$md-layout:'only screen and (min-width: 768px) and (max-width: 991px)';
$sm-layout:'only screen and (max-width: 767px)';
$large-mobile: 'only screen and (max-width: 575px)';
$small-mobile: 'only screen and (max-width: 479px)';