@use "mixins";
@use "variables";

.vhidden{
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px; width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

.imageRender{
    position: absolute;
    top: 0; left: 0; right: 0; /*bottom: 0;*/
    overflow: hidden;

    img{
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        object-position: center center;
    }
}

.pRelative{ position: relative; }

.text-left{ text-align: left; }
.text-center{ text-align: center; }
.text-right{ text-align: right; }

.show-md-f, .show-md-ib, .show-md,
.show-sm-f, .show-sm-ib, .show-sm,
.show-xs-f, .show-xs-ib, .show-xs{
    display: none;
}

@include mixins.respondTo('md'){
    .show-md-f{ display: flex !important; }
    .show-md-ib{ display: inline-block; }
    .show-md{ display: block; }
    .hide-md{ display: none; }
}

@include mixins.respondTo('sm'){
    .show-sm-f{ display: flex !important; }
    .show-sm-ib{ display: inline-block; }
    .show-sm{ display: block; }
    .hide-sm{ display: none; }
}

@include mixins.respondTo('xs'){
    .show-xs-f{ display: flex !important; }
    .show-xs-ib{ display: inline-block; }
    .show-xs{ display: block; }
    .hide-xs{ display: none; }
}

@keyframes rotate {
    0% {
        transform: rotateZ(-360deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}

.cPrimary{
    color: variables.$cPrimary;
}