/* ==========================================================================
   HAUS OF LESS
   Utilities
   Version: 1.0
   ========================================================================== */

/* ==========================================================
   Display
========================================================== */

.hidden{

    display:none !important;

}

.block{

    display:block;

}

.inline-block{

    display:inline-block;

}

.flex{

    display:flex;

}

.inline-flex{

    display:inline-flex;

}

.grid{

    display:grid;

}

/* ==========================================================
   Alignment
========================================================== */

.align-center{

    align-items:center;

}

.align-start{

    align-items:flex-start;

}

.align-end{

    align-items:flex-end;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

.justify-end{

    justify-content:flex-end;

}

/* ==========================================================
   Text Alignment
========================================================== */

.text-left{

    text-align:left;

}

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

/* ==========================================================
   Width
========================================================== */

.w-100{

    width:100%;

}

.h-100{

    height:100%;

}

/* ==========================================================
   Margin Top
========================================================== */

.mt-0{margin-top:0;}
.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}
.mt-4{margin-top:4rem;}
.mt-5{margin-top:5rem;}
.mt-6{margin-top:6rem;}

/* ==========================================================
   Margin Bottom
========================================================== */

.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:1rem;}
.mb-2{margin-bottom:2rem;}
.mb-3{margin-bottom:3rem;}
.mb-4{margin-bottom:4rem;}
.mb-5{margin-bottom:5rem;}
.mb-6{margin-bottom:6rem;}

/* ==========================================================
   Padding Top
========================================================== */

.pt-0{padding-top:0;}
.pt-1{padding-top:1rem;}
.pt-2{padding-top:2rem;}
.pt-3{padding-top:3rem;}
.pt-4{padding-top:4rem;}
.pt-5{padding-top:5rem;}
.pt-6{padding-top:6rem;}

/* ==========================================================
   Padding Bottom
========================================================== */

.pb-0{padding-bottom:0;}
.pb-1{padding-bottom:1rem;}
.pb-2{padding-bottom:2rem;}
.pb-3{padding-bottom:3rem;}
.pb-4{padding-bottom:4rem;}
.pb-5{padding-bottom:5rem;}
.pb-6{padding-bottom:6rem;}

/* ==========================================================
   Border Radius
========================================================== */

.radius-sm{

    border-radius:var(--radius-sm);

}

.radius-md{

    border-radius:var(--radius-md);

}

.radius-lg{

    border-radius:var(--radius-lg);

}

.radius-round{

    border-radius:999px;

}

/* ==========================================================
   Shadow
========================================================== */

.shadow-sm{

    box-shadow:var(--shadow-sm);

}

.shadow-md{

    box-shadow:var(--shadow-md);

}

.shadow-lg{

    box-shadow:var(--shadow-lg);

}

/* ==========================================================
   Image
========================================================== */

.img-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

.img-contain{

    width:100%;

    height:100%;

    object-fit:contain;

}

/* ==========================================================
   Overflow
========================================================== */

.overflow-hidden{

    overflow:hidden;

}

/* ==========================================================
   Position
========================================================== */

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

/* ==========================================================
   Animation Helpers
========================================================== */

.transition{

    transition:var(--transition);

}

.transition-fast{

    transition:var(--transition-fast);

}

.transition-slow{

    transition:var(--transition-slow);

}

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

.mobile-only{

    display:none;

}

.desktop-only{

    display:block;

}

@media(max-width:992px){

    .mobile-only{

        display:block;

    }

    .desktop-only{

        display:none;

    }

}

/* ==========================================================
   Logo visuality hidden
========================================================== */

.visually-hidden{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}