/* ==========================================================
   SammyVibes Portfolio
   utilities.css
========================================================== */


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

.d-none{ display:none; }

.d-block{ display:block; }

.d-inline{ display:inline; }

.d-inline-block{ display:inline-block; }

.d-flex{ display:flex; }

.d-grid{ display:grid; }


/* ==========================================================
   Flex
========================================================== */

.flex-row{ flex-direction:row; }

.flex-column{ flex-direction:column; }

.flex-wrap{ flex-wrap:wrap; }

.items-start{ align-items:flex-start; }

.items-center{ align-items:center; }

.items-end{ align-items:flex-end; }

.justify-start{ justify-content:flex-start; }

.justify-center{ justify-content:center; }

.justify-end{ justify-content:flex-end; }

.justify-between{ justify-content:space-between; }

.justify-around{ justify-content:space-around; }

.justify-evenly{ justify-content:space-evenly; }


/* ==========================================================
   Gap
========================================================== */

.gap-xs{ gap:.25rem; }

.gap-sm{ gap:.5rem; }

.gap-md{ gap:1rem; }

.gap-lg{ gap:1.5rem; }

.gap-xl{ gap:2rem; }


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

.w-100{ width:100%; }

.w-auto{ width:auto; }

.max-w-sm{ max-width:480px; }

.max-w-md{ max-width:720px; }

.max-w-lg{ max-width:960px; }

.max-w-xl{ max-width:1200px; }


/* ==========================================================
   Height
========================================================== */

.h-100{ height:100%; }

.min-vh-100{ min-height:100vh; }


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

.m-0{ margin:0; }

.mt-0{ margin-top:0; }

.mt-1{ margin-top:.5rem; }

.mt-2{ margin-top:1rem; }

.mt-3{ margin-top:1.5rem; }

.mt-4{ margin-top:2rem; }

.mt-5{ margin-top:3rem; }

.mb-0{ margin-bottom:0; }

.mb-1{ margin-bottom:.5rem; }

.mb-2{ margin-bottom:1rem; }

.mb-3{ margin-bottom:1.5rem; }

.mb-4{ margin-bottom:2rem; }

.mb-5{ margin-bottom:3rem; }

.mx-auto{

    margin-left:auto;

    margin-right:auto;

}


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

.p-0{ padding:0; }

.p-1{ padding:.5rem; }

.p-2{ padding:1rem; }

.p-3{ padding:1.5rem; }

.p-4{ padding:2rem; }

.p-5{ padding:3rem; }

.pt-0{ padding-top:0; }

.pb-0{ padding-bottom:0; }


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

.rounded-sm{

    border-radius:8px;

}

.rounded{

    border-radius:16px;

}

.rounded-lg{

    border-radius:24px;

}

.rounded-full{

    border-radius:999px;

}


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

.overflow-hidden{

    overflow:hidden;

}

.overflow-auto{

    overflow:auto;

}


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

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

.fixed{

    position:fixed;

}

.sticky{

    position:sticky;

}


/* ==========================================================
   Cursor
========================================================== */

.pointer{

    cursor:pointer;

}


/* ==========================================================
   Visibility
========================================================== */

.hidden{

    visibility:hidden;

}

.visible{

    visibility:visible;

}


/* ==========================================================
   Opacity
========================================================== */

.opacity-0{

    opacity:0;

}

.opacity-25{

    opacity:.25;

}

.opacity-50{

    opacity:.5;

}

.opacity-75{

    opacity:.75;

}

.opacity-100{

    opacity:1;

}


/* ==========================================================
   Object Fit
========================================================== */

.object-cover{

    object-fit:cover;

}

.object-contain{

    object-fit:contain;

}


/* ==========================================================
   User Select
========================================================== */

.no-select{

    user-select:none;

    -webkit-user-select:none;

}


/* ==========================================================
   Pointer Events
========================================================== */

.no-pointer{

    pointer-events:none;

}


/* ==========================================================
   Transition
========================================================== */

.transition{

    transition:.3s ease;

}