@mixin clearfix {
    &::after {
        content: "";
        display: table;
        clear: both;        
    }    
}

@mixin absCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@mixin respond($breakpoint) {
    @if $breakpoint == phone {
        @media (max-width: 37.5em){ @content };     //600px
    }
    @if $breakpoint == tab-port {
        @media (max-width: 56.25em){ @content };      //900px
    }
    @if $breakpoint == tab-land {
        @media (max-width: 78em){ @content };     //1200px
    }
    @if $breakpoint == big-desktop {
        @media (min-width: 112.5em){ @content };     //1800px
    }
}