@mixin transition {
    transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
}

@mixin transformY {
    transform: translateY(-50%);
    -moz-ransform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

@mixin transformX {
    transform: translateX(-50%);
    -moz-ransform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

@mixin transform {
    transform: translate(-50%, -50%);
    -moz-ransform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

@mixin transformReset {
    transform: translate(0, 0);
    -moz-ransform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}

@mixin rotate {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
}

@mixin ImgCon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -o-object-fit: contain;
}

@mixin ImgCov {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

// @mixin height {
//     @media (max-height: 390px) {
//         @content;
//     }
// }

@mixin sm-md {
    @media (max-width: 350px) {
        @content;
    }
}

@mixin sm-xl {
    @media (max-width: 520px) {
        @content;
    }
}

@mixin md-sm {
    @media (max-width: 720px) {
        @content;
    }
}

@mixin md-lg {
    @media (max-width: 900px) {
        @content;
    }
}


@mixin md-xlg {
    @media (max-width: 1024px) {
        @content;
    }
}

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

@mixin lg-xlg {
    @media (max-width: 1400px) {
        @content;
    }
}

@mixin lg-xxlg {
    @media (max-width: 1500px) {
        @content;
    }
}

@mixin xlg-xxlg {
    @media (max-width: 1665px) {
        @content;
    }
}