$mq-extend-flag: true !global;

/* ==========================================================================
	Responsive
/* ========================================================================== */

$phone-min-size: 320px;
$phone-max-size: 767px;
$tablet-min-size: 768px;
$tablet-max-size: 991px;
$laptop-min-size: 992px;
$laptop-max-size: 1279px;
$desktop-min-size: 1280px;
$desktop-max-size: 2520px;
//*****************************************
//  MOBILE / MEDIA QUERIES
//*****************************************
@mixin mobile-detect() {
    display: none;
    @media (max-width: 1024px) and (orientation: landscape), (max-width: 1024px) and (orientation: portrait) {
        display: block;
    }
}

@mixin mq( $mq) {
    $found: false;
    $mq-extend-flag: false !global;
    @each $name,
    $breakpoint in $breakpoints {
        @if $mq==$name {
            $found: true;
            @media (max-width: $breakpoint) {
                @content;
            }
        }
    }
    @if $found==false {
        @warn 'Breakpoint #{$mq} doesn\'t exist!';
    }
    $mq-extend-flag: false !global;
}

@mixin retina() {
    $mq-extend-flag: false !global;
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and ( min--moz-device-pixel-ratio: 1.5), only screen and ( -o-min-device-pixel-ratio: 3/2), only screen and ( min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) {
        @content;
    }
    $mq-extend-flag: true !global;
}
@mixin iphone5SEportrait() {
    @media only screen
    and (max-width : 350px)
    and (max-height : 600px)
    and (orientation : portrait) {
        @content;
    }
}
@mixin iphone6portrait() {
    @media only screen
    and (max-width : 450px)
    and (max-height : 700px)
    and (orientation : portrait) {
        @content;
    }
}
@mixin iphone6andXportrait() {
    @media only screen
    and (max-width : 450px)
    and (max-height : 850px)
    and (orientation : portrait) {
        @content;
    }
}
@mixin tabletPortrait() {
    @media only screen
        and (max-width: $tablet-max-size)
        and (min-width: $tablet-min-size)
        and (orientation:portrait)  {
            @content;
    }
}
@mixin tabletLandscape() {
    @media only screen
        and (max-width: 1024px)
        and (min-height : 400px)
        and (min-width: $tablet-min-size)
        and (orientation:landscape)  {
            @content;
    }
}

@mixin middleHeight() {
    @media only screen
    and (min-height : 520px)
    and (max-height : 665px)
    and (min-width: $tablet-min-size) {
        @content;
    }
}

@mixin smallLaptop() {
    @media only screen
    and (max-width: 1366px)
    and (min-width: $tablet-max-size)
    and (min-height : 665px) {
        @content;
    }
}

// Responsive
@mixin respond-to($media) {
    @if $media==phone-min {
        @media only screen and (min-width: $phone-min-size) {
            @content;
        }
    }
    @else if $media==phone-max {
        @media only screen and (max-width: $phone-max-size) {
            @content;
        }
    }
    @else if $media==tablet-min {
        @media only screen and (min-width: $tablet-min-size) {
            @content;
        }
    }
    @else if $media==tablet-max {
        @media only screen and (max-width: $tablet-max-size) {
            @content;
        }
    }
    @else if $media==tablet-only {
        @media only screen and (max-width: $tablet-max-size) and (min-width: $tablet-min-size) {
            @content;
        }
    }
    @else if $media==laptop-min {
        @media only screen and (min-width: $laptop-min-size) {
            @content;
        }
    }
    @else if $media==laptop-max {
        @media only screen and (max-width: $laptop-max-size) {
            @content;
        }
    }
    @else if $media==laptop-only {
        @media only screen and (max-width: $laptop-max-size) and (min-width: $laptop-min-size) {
            @content;
        }
    }
    @else if $media==desktop-min {
        @media only screen and (min-width: $desktop-min-size) {
            @content;
        }
    }
    @else if $media==desktop-max {
        @media only screen and (max-width: $desktop-max-size) {
            @content;
        }
    }
    @if $media==only-phone {
        @media only screen and (min-width: $phone-min-size) and (max-width: $phone-max-size) {
            @content;
        }
    }
    @else if $media==only-tablet {
        @media only screen and (min-width: $tablet-min-size) and (max-width: $tablet-max-size) {
            @content;
        }
    }
    @else if $media==only-laptop {
        @media only screen and (min-width: $laptop-min-size) and (max-width: $laptop-max-size) {
            @content;
        }
    }
    @else if $media==only-desktop {
        @media only screen and (min-width: $desktop-min-size) and (max-width: $desktop-max-size) {
            @content;
        }
    }
}