/* ==========================================
   PrintQly Utilities CSS
   Version : 1.0
========================================== */

:root{

--primary:#FFD400;
--secondary:#111111;
--white:#FFFFFF;
--gray:#BDBDBD;

}

/* ==========================================
   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-column{flex-direction:column;}
.flex-row{flex-direction:row;}
.flex-wrap{flex-wrap:wrap;}

.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;}

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

/* ==========================================
   Grid
========================================== */

.grid-2{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

}

.grid-3{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

}

.grid-4{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}

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

.w-25{width:25%;}
.w-50{width:50%;}
.w-75{width:75%;}
.w-100{width:100%;}

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

.h-100{height:100%;}

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

.m-0{margin:0;}

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-50{margin-top:50px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-50{margin-bottom:50px;}

.mx-auto{

margin-left:auto;
margin-right:auto;

}

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

.p-10{padding:10px;}
.p-20{padding:20px;}
.p-30{padding:30px;}
.p-40{padding:40px;}

.pt-20{padding-top:20px;}
.pb-20{padding-bottom:20px;}

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

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

.text-white{color:#FFFFFF;}
.text-dark{color:#111111;}
.text-gray{color:#BDBDBD;}
.text-primary{color:#FFD400;}

.font-bold{font-weight:700;}
.font-light{font-weight:300;}

.uppercase{text-transform:uppercase;}
.capitalize{text-transform:capitalize;}

/* ==========================================
   Background
========================================== */

.bg-primary{background:#FFD400;}
.bg-dark{background:#111111;}
.bg-white{background:#FFFFFF;}
.bg-light{background:#F5F5F5;}

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

.rounded{

border-radius:12px;

}

.rounded-lg{

border-radius:20px;

}

.rounded-circle{

border-radius:50%;

}

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

.shadow{

box-shadow:0 10px 30px rgba(0,0,0,.10);

}

.shadow-lg{

box-shadow:0 18px 40px rgba(0,0,0,.20);

}

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

.overflow-hidden{

overflow:hidden;

}

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

.position-relative{

position:relative;

}

.position-absolute{

position:absolute;

}

.position-fixed{

position:fixed;

}

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

.cursor-pointer{

cursor:pointer;

}

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

.opacity-50{

opacity:.5;

}

.opacity-75{

opacity:.75;

}

.opacity-100{

opacity:1;

}

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

@media(max-width:768px){

.grid-2,
.grid-3,
.grid-4{

grid-template-columns:1fr;

}

.w-25,
.w-50,
.w-75{

width:100%;

}

}