/* =========================================================
   RESET & VARIABLES
========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --sm:576px;
  --md:768px;
  --lg:992px;
  --xl:1200px;
  --xxl:1400px;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.25rem; --s6:1.5rem; --s7:1.75rem; --s8:2rem;
  --s9:2.25rem; --s10:2.5rem; --s11:2.75rem; --s12:3rem;
}

/* =========================================================
   CONTAINER
========================================================= */
.container{width:100%;padding:1rem;margin:auto}
@media(min-width:576px){.container{max-width:540px}}
@media(min-width:768px){.container{max-width:720px}}
@media(min-width:992px){.container{max-width:960px}}
@media(min-width:1200px){.container{max-width:1140px}}
@media(min-width:1400px){.container{max-width:1320px}}

/* =========================================================
   GRID SYSTEM (1–12, RESPONSIVE)
========================================================= */
.row{display:flex;flex-wrap:wrap;margin:-.75rem}
[class^="col"]{padding:.75rem;width:100%}
.col{flex:1 0 0%}

.col-1{width:8.333%}.col-2{width:16.666%}.col-3{width:25%}
.col-4{width:33.333%}.col-5{width:41.666%}.col-6{width:50%}
.col-7{width:58.333%}.col-8{width:66.666%}.col-9{width:75%}
.col-10{width:83.333%}.col-11{width:91.666%}.col-12{width:100%}

@media(min-width:576px){
.col-sm-1{width:8.333%}.col-sm-2{width:16.666%}.col-sm-3{width:25%}
.col-sm-4{width:33.333%}.col-sm-5{width:41.666%}.col-sm-6{width:50%}
.col-sm-7{width:58.333%}.col-sm-8{width:66.666%}.col-sm-9{width:75%}
.col-sm-10{width:83.333%}.col-sm-11{width:91.666%}.col-sm-12{width:100%}}
@media(min-width:768px){
.col-md-1{width:8.333%}.col-md-2{width:16.666%}.col-md-3{width:25%}
.col-md-4{width:33.333%}.col-md-5{width:41.666%}.col-md-6{width:50%}
.col-md-7{width:58.333%}.col-md-8{width:66.666%}.col-md-9{width:75%}
.col-md-10{width:83.333%}.col-md-11{width:91.666%}.col-md-12{width:100%}}
@media(min-width:992px){
.col-lg-1{width:8.333%}.col-lg-2{width:16.666%}.col-lg-3{width:25%}
.col-lg-4{width:33.333%}.col-lg-5{width:41.666%}.col-lg-6{width:50%}
.col-lg-7{width:58.333%}.col-lg-8{width:66.666%}.col-lg-9{width:75%}
.col-lg-10{width:83.333%}.col-lg-11{width:91.666%}.col-lg-12{width:100%}}
@media(min-width:1200px){
.col-xl-1{width:8.333%}.col-xl-2{width:16.666%}.col-xl-3{width:25%}
.col-xl-4{width:33.333%}.col-xl-5{width:41.666%}.col-xl-6{width:50%}
.col-xl-7{width:58.333%}.col-xl-8{width:66.666%}.col-xl-9{width:75%}
.col-xl-10{width:83.333%}.col-xl-11{width:91.666%}.col-xl-12{width:100%}}
@media(min-width:1400px){
.col-xxl-1{width:8.333%}.col-xxl-2{width:16.666%}.col-xxl-3{width:25%}
.col-xxl-4{width:33.333%}.col-xxl-5{width:41.666%}.col-xxl-6{width:50%}
.col-xxl-7{width:58.333%}.col-xxl-8{width:66.666%}.col-xxl-9{width:75%}
.col-xxl-10{width:83.333%}.col-xxl-11{width:91.666%}.col-xxl-12{width:100%}}

/* =========================================================
   DISPLAY (RESPONSIVE)
========================================================= */
.d-none{display:none!important}
.d-block{display:block!important}
.d-inline{display:inline!important}
.d-inline-block{display:inline-block!important}
.d-flex{display:flex!important}
.d-inline-flex{display:inline-flex!important}
.d-grid{display:grid!important}

@media(min-width:576px){.d-sm-none{display:none!important}.d-sm-block{display:block!important}.d-sm-flex{display:flex!important}}
@media(min-width:768px){.d-md-none{display:none!important}.d-md-block{display:block!important}.d-md-flex{display:flex!important}}
@media(min-width:992px){.d-lg-none{display:none!important}.d-lg-block{display:block!important}.d-lg-flex{display:flex!important}}
@media(min-width:1200px){.d-xl-none{display:none!important}.d-xl-block{display:block!important}.d-xl-flex{display:flex!important}}
@media(min-width:1400px){.d-xxl-none{display:none!important}.d-xxl-block{display:block!important}.d-xxl-flex{display:flex!important}}

/* =========================================================
   FLEX (FULL BOOTSTRAP)
========================================================= */
/*.flex-row{flex-direction:row!important}*/
/*.flex-column{flex-direction:column!important}*/
/*.flex-row-reverse{flex-direction:row-reverse!important}*/
/*.flex-column-reverse{flex-direction:column-reverse!important}*/

/*.flex-wrap{flex-wrap:wrap!important}*/
/*.flex-nowrap{flex-wrap:nowrap!important}*/
/*.flex-wrap-reverse{flex-wrap:wrap-reverse!important}*/

/*.justify-content-start{justify-content:flex-start!important}*/
/*.justify-content-end{justify-content:flex-end!important}*/
/*.justify-content-center{justify-content:center!important}*/
/*.justify-content-between{justify-content:space-between!important}*/
/*.justify-content-around{justify-content:space-around!important}*/
/*.justify-content-evenly{justify-content:space-evenly!important}*/

/*.align-items-start{align-items:flex-start!important}*/
/*.align-items-end{align-items:flex-end!important}*/
/*.align-items-center{align-items:center!important}*/
/*.align-items-baseline{align-items:baseline!important}*/
/*.align-items-stretch{align-items:stretch!important}*/

/*.align-self-start{align-self:flex-start!important}*/
/*.align-self-end{align-self:flex-end!important}*/
/*.align-self-center{align-self:center!important}*/
/*.align-self-stretch{align-self:stretch!important}*/

/*.flex-grow-0{flex-grow:0!important}*/
/*.flex-grow-1{flex-grow:1!important}*/
/*.flex-shrink-0{flex-shrink:0!important}*/
/*.flex-shrink-1{flex-shrink:1!important}*/
/*.flex-fill{flex:1 1 auto!important}*/

/* Order */
/*.order-first{order:-1!important}*/
/*.order-last{order:13!important}*/
/*.order-0{order:0!important}*/
/*.order-1{order:1!important}*/
/*.order-2{order:2!important}*/
/*.order-3{order:3!important}*/
/*.order-4{order:4!important}*/
/*.order-5{order:5!important}*/
/*.order-6{order:6!important}*/
/*.order-7{order:7!important}*/
/*.order-8{order:8!important}*/
/*.order-9{order:9!important}*/
/*.order-10{order:10!important}*/
/*.order-11{order:11!important}*/
/*.order-12{order:12!important}*/

/* =========================================================
   SPACING (MARGIN & PADDING 0–12)
========================================================= */
.m-0{margin:0}
.m-1{margin:var(--s1)}.m-2{margin:var(--s2)}.m-3{margin:var(--s3)}
.m-4{margin:var(--s4)}.m-5{margin:var(--s5)}.m-6{margin:var(--s6)}
.m-7{margin:var(--s7)}.m-8{margin:var(--s8)}.m-9{margin:var(--s9)}
.m-10{margin:var(--s10)}.m-11{margin:var(--s11)}.m-12{margin:var(--s12)}

.p-0{padding:0}
.p-1{padding:var(--s1)}.p-2{padding:var(--s2)}.p-3{padding:var(--s3)}
.p-4{padding:var(--s4)}.p-5{padding:var(--s5)}.p-6{padding:var(--s6)}
.p-7{padding:var(--s7)}.p-8{padding:var(--s8)}.p-9{padding:var(--s9)}
.p-10{padding:var(--s10)}.p-11{padding:var(--s11)}.p-12{padding:var(--s12)}

/* =========================================================
   WIDTH & HEIGHT (1–12)
========================================================= */
/*.w-1{width:8.333%}.w-2{width:16.666%}.w-3{width:25%}*/
/*.w-4{width:33.333%}.w-5{width:41.666%}.w-6{width:50%}*/
/*.w-7{width:58.333%}.w-8{width:66.666%}.w-9{width:75%}*/
/*.w-10{width:83.333%}.w-11{width:91.666%}.w-12{width:100%}*/

/*.h-1{height:8.333%}.h-2{height:16.666%}.h-3{height:25%}*/
/*.h-4{height:33.333%}.h-5{height:41.666%}.h-6{height:50%}*/
/*.h-7{height:58.333%}.h-8{height:66.666%}.h-9{height:75%}*/
/*.h-10{height:83.333%}.h-11{height:91.666%}.h-12{height:100%}*/

/* =========================================================
   PRINT
========================================================= */
@media print{
  .d-print-none{display:none!important}
  .d-print-block{display:block!important}
  .d-print-flex{display:flex!important}
}