/* //////////////////////////////////////////////////////////// */
/* // colours */
/* //////////////////////////////////////////////////////////// */

.bg-white {
    --bg-opacity     : 1;
    background-color : #fff;
    background-color : rgba(255, 255, 255, var(--bg-opacity))
}

.bg-black {
    --bg-opacity     : 1;
    background-color : #fff;
    background-color : rgba(255, 255, 255, var(--bg-opacity))
}

/* //////////////////////////////////////////////////////////// */
/* // display */
/* //////////////////////////////////////////////////////////// */

.block {
    display : block
}

.inline-block {
    display : inline-block
}

.inline {
    display : inline
}

.flex {
    display : flex
}

.inline-flex {
    display : inline-flex
}

.grid {
    display : grid
}

.hidden {
    display : none
}

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

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

.flex-col {
    flex-direction : column
}

.flex-wrap {
    flex-wrap : wrap
}

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

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

.items-center {
    align-items : center
}

.items-baseline {
    align-items : baseline
}

.items-stretch {
    align-items : stretch
}

.content-center {
    align-content : center
}

.content-start {
    align-content : flex-start
}

.content-end {
    align-content : flex-end
}

.content-between {
    align-content : space-between
}

.content-around {
    align-content : space-around
}

.content-evenly {
    align-content : space-evenly
}

.justify-items-auto {
    justify-items : auto
}

.justify-items-start {
    justify-items : start
}

.justify-items-end {
    justify-items : end
}

.justify-items-center {
    justify-items : center
}

.justify-items-stretch {
    justify-items : stretch
}

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

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

.justify-center {
    justify-content : center
}

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

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

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

.justify-self-auto {
    justify-self : auto
}

.justify-self-start {
    justify-self : start
}

.justify-self-end {
    justify-self : end
}

.justify-self-center {
    justify-self : center
}

.justify-self-stretch {
    justify-self : stretch
}

.flex-shrink-0 {
    flex-shrink : 0
}

.static {
    position : static
}

.fixed {
    position : fixed
}

.absolute {
    position : absolute
}

.relative {
    position : relative
}

.sticky {
    position : -webkit-sticky;
    position : sticky
}

.visible {
    visibility : visible
}

/* //////////////////////////////////////////////////////////// */
/* // positional */
/* //////////////////////////////////////////////////////////// */

.max-w-none {
    max-width : none
}

.max-w-xs {
    max-width : 20rem
}

.max-w-sm {
    max-width : 24rem
}

.max-w-md {
    max-width : 28rem
}

.max-w-lg {
    max-width : 32rem
}

.max-w-xl {
    max-width : 36rem
}

.max-w-2xl {
    max-width : 42rem
}

.max-w-3xl {
    max-width : 48rem
}

.max-w-4xl {
    max-width : 56rem
}

.max-w-5xl {
    max-width : 64rem
}

.max-w-6xl {
    max-width : 72rem
}

.max-w-full {
    max-width : 100%
}

.m-auto {
    margin : auto
}

.mx-auto {
    margin-left  : auto;
    margin-right : auto
}

.py-0 {
    padding-top    : 0;
    padding-bottom : 0
}

.px-0 {
    padding-left  : 0;
    padding-right : 0
}

.py-1 {
    padding-top    : .25rem;
    padding-bottom : .25rem
}

.px-1 {
    padding-left  : .25rem;
    padding-right : .25rem
}

.py-2 {
    padding-top    : .5rem;
    padding-bottom : .5rem
}

.px-2 {
    padding-left  : .5rem;
    padding-right : .5rem
}

.py-3 {
    padding-top    : .75rem;
    padding-bottom : .75rem
}

.px-3 {
    padding-left  : .75rem;
    padding-right : .75rem
}

.py-4 {
    padding-top    : 1rem;
    padding-bottom : 1rem
}

.px-4 {
    padding-left  : 1rem;
    padding-right : 1rem
}

.py-5 {
    padding-top    : 1.25rem;
    padding-bottom : 1.25rem
}

.px-5 {
    padding-left  : 1.25rem;
    padding-right : 1.25rem
}

.py-6 {
    padding-top    : 1.5rem;
    padding-bottom : 1.5rem
}

.px-6 {
    padding-left  : 1.5rem;
    padding-right : 1.5rem
}

.py-8 {
    padding-top    : 2rem;
    padding-bottom : 2rem
}

.px-8 {
    padding-left  : 2rem;
    padding-right : 2rem
}

.py-10 {
    padding-top    : 2.5rem;
    padding-bottom : 2.5rem
}

.px-10 {
    padding-left  : 2.5rem;
    padding-right : 2.5rem
}

.my-auto {
    margin-top    : auto;
    margin-bottom : auto
}

.ml-auto {
    margin-left : auto
}

.mr-auto {
    margin-right : auto
}

.mt-auto {
    margin-top : auto
}

.mb-auto {
    margin-bottom : auto
}

.top-auto {
    top : auto
}

.right-auto {
    right : auto
}

.bottom-auto {
    bottom : auto
}

.left-auto {
    left : auto
}

.p-0 {
    padding : 0
}

.p-1 {
    padding : .25rem
}

.p-6 {
    padding : 1.5rem
}

.py-3 {
    padding-top    : .75rem;
    padding-bottom : .75rem
}

.px-5 {
    padding-left  : 1.25rem;
    padding-right : 1.25rem
}

.py-6 {
    padding-top    : 1.5rem;
    padding-bottom : 1.5rem
}

.px-10 {
    padding-left  : 2.5rem;
    padding-right : 2.5rem
}

.py-16 {
    padding-top    : 4rem;
    padding-bottom : 4rem
}

.pl-0 {
    padding-left : 0
}

.pt-2 {
    padding-top : .5rem
}

.pb-2 {
    padding-bottom : .5rem
}

.pb-3 {
    padding-bottom : .75rem
}

.pt-6 {
    padding-top : 1.5rem
}

.pt-8 {
    padding-top : 2rem
}

.pt-12 {
    padding-top : 3rem
}

.pt-16 {
    padding-top : 4rem
}

.pb-16 {
    padding-bottom : 4rem
}

.top-0 {
    top : 0
}

.left-0 {
    left : 0
}

.right-0 {
    right : 0
}

.bottom-0 {
    bottom : 0
}

.m-0 {
    margin : 0;
}

.float-right {
    float : right;
}

.float-left {
    float : left;
}

.float-none {
    float : none;
}

/* //////////////////////////////////////////////////////////// */
/* // background images  */
/* //////////////////////////////////////////////////////////// */

.bg-auto {
    background-size : auto;
}

.bg-cover {
    background-size : cover;
}

.bg-contain {
    background-size : contain;
}

.bg-bottom {
    background-position : bottom;
}

.bg-center {
    background-position : center;
}

.bg-left {
    background-position : left;
}

.bg-left-bottom {
    background-position : left bottom;
}

.bg-left-top {
    background-position : left top;
}

.bg-right {
    background-position : right;
}

.bg-right-bottom {
    background-position : right bottom;
}

.bg-right-top {
    background-position : right top;
}

.bg-top {
    background-position : top;
}

/* //////////////////////////////////////////////////////////// */
/* // type  */
/* //////////////////////////////////////////////////////////// */

.text-center {
    text-align : center
}

.text-black {
    --text-opacity : 1;
    color          : #000;
    color          : rgba(0, 0, 0, var(--text-opacity))
}

.text-white {
    --text-opacity : 1;
    color          : #fff;
    color          : rgba(255, 255, 255, var(--text-opacity))
}

.uppercase {
    text-transform : uppercase
}

.lowercase {
    text-transform : lowercase
}

.font-light {
    font-weight : 300
}

.font-normal {
    font-weight : 400
}

.font-semibold {
    font-weight : 600
}

.font-bold {
    font-weight : 700
}

.text-xs {
    font-size : 70%;
}

.text-sm {
    font-size : 85%;
}

.text-base {
    font-size : 1rem
}

.text-lg {
    font-size : 115%;
}

.text-xl {
    font-size : 130%;
}

/* //////////////////////////////////////////////////////////// */
/* // other  */
/* //////////////////////////////////////////////////////////// */


.overflow-auto {
    overflow : auto;
}

.overflow-hidden {
    overflow : hidden;
}

.overflow-visible {
    overflow : visible;
}

.overflow-scroll {
    overflow : scroll;
}

.overflow-x-auto {
    overflow-x : auto;
}

.overflow-y-auto {
    overflow-y : auto;
}

.overflow-x-hidden {
    overflow-x : hidden;
}

.overflow-y-hidden {
    overflow-y : hidden;
}

.overflow-x-visible {
    overflow-x : visible;
}

.overflow-y-visible {
    overflow-y : visible;
}

.overflow-x-scroll {
    overflow-x : scroll;
}

.overflow-y-scroll {
    overflow-y : scroll;
}


.clear-left {
    clear : left;
}

.clear-right {
    clear : right;
}

.clear-both {
    clear : both;
}

.clear-none {
    clear : none;
}

.clearfix:after {
    content : "";
    display : table;
    clear   : both
}

.list-none {
    list-style-type : none
}

.shadow {
    box-shadow : 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)
}

.w-1\/2 {
    width : 50%;
}

.w-1\/3 {
    width : 33.333333%;
}

.w-2\/3 {
    width : 66.666667%;
}

.w-1\/4 {
    width : 25%;
}

.w-2\/4 {
    width : 50%;
}

.w-3\/4 {
    width : 75%;
}

.w-1\/5 {
    width : 20%;
}

.w-2\/5 {
    width : 40%;
}

.w-3\/5 {
    width : 60%;
}

.w-4\/5 {
    width : 80%;
}

.w-1\/6 {
    width : 16.666667%;
}

.w-2\/6 {
    width : 33.333333%;
}

.w-3\/6 {
    width : 50%;
}

.w-4\/6 {
    width : 66.666667%;
}

.w-5\/6 {
    width : 83.333333%;
}

.w-1\/12 {
    width : 8.333333%;
}

.w-2\/12 {
    width : 16.666667%;
}

.w-3\/12 {
    width : 25%;
}

.w-4\/12 {
    width : 33.333333%;
}

.w-5\/12 {
    width : 41.666667%;
}

.w-6\/12 {
    width : 50%;
}

.w-7\/12 {
    width : 58.333333%;
}

.w-8\/12 {
    width : 66.666667%;
}

.w-9\/12 {
    width : 75%;
}

.w-10\/12 {
    width : 83.333333%;
}

.w-11\/12 {
    width : 91.666667%;
}

.w-full {
    width : 100%;
}

.z-0 {
    z-index : 0;
}

.z-10 {
    z-index : 10;
}

.z-20 {
    z-index : 20;
}

.z-30 {
    z-index : 30;
}

.z-40 {
    z-index : 40;
}

.z-50 {
    z-index : 50;
}

.grid-flow-col {
    grid-auto-flow : column
}

.transform {
    --transform-translate-x : 0;
    --transform-translate-y : 0;
    --transform-rotate      : 0;
    --transform-skew-x      : 0;
    --transform-skew-y      : 0;
    --transform-scale-x     : 1;
    --transform-scale-y     : 1;
    transform               : translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y))
}

.transition {
    transition-property : background-color, border-color, color, fill, stroke, opacity, box-shadow, transform
}

.ease-out {
    transition-timing-function : cubic-bezier(0, 0, .2, 1)
}

.ease-in-out {
    transition-timing-function : cubic-bezier(.4, 0, .2, 1)
}