/** Crayola **/
.C\(white\) {
    color: white;
}
.C\(green\) {
    color: #8ac539;
}
.C\(blue\) {
    color: #1ba7cd;
}

.C\(black\) {
    color: #252328;
}

/** Background Colours **/
.Bgc\(green\) {
    background-color: #8ac539;
}

.Bgc\(blue\) {
    background-color: #1ba7cd;
}
.Bgc\(dark-green\) {
    background-color: #659228;
}
.Bgc\(grey\) {
    background-color: #f9f9f9;
}
.Bgc\(white\) {
    background-color: #ffffff;
}
.Bgc\(black\) {
    background-color: #252328;
}
.Bgc\(red\) {
    background-color: #dc7460;
}





/** Padding **/
.P\(0\) {
    padding: 0;
}
.P\(1\) {
    padding: 5px;
}
.P\(2\) {
    padding: 10px;
}
.P\(3\) {
    padding: 20px;
}
.P\(4\) {
    padding: 40px;
}
.Pl\(1\) {
    padding-left: 5px;
}
.Pl\(2\) {
    padding-left: 10px;
}
.Pr\(1\) {
    padding-right: 5px;
}
.Pr\(2\) {
    padding-right: 10px;
}
.Pt\(1\) {
    padding-top: 5px;
}
.Pt\(2\) {
    padding-top: 10px;
}
.Pb\(1\) {
    padding-bottom: 5px;
}
.Pb\(2\) {
    padding-bottom: 10px;
}
.Pb\(100\) {
    padding-bottom: 100px;
}
.Pb\(150\) {
    padding-bottom: 150px;
}


/** Margins **/
.M\(0\) {
    margin: 0;
}
.M\(1\) {
    margin: 5px;
}
.M\(2\) {
    margin: 10px;
}
.Ma\(0\) {
    margin: 0 auto;
}
.Ml\(1\) {
    margin-left: 5px;
}
.Ml\(2\) {
    margin-left: 10px;
}
.Mr\(1\) {
    margin-right: 5px;
}
.Mr\(2\) {
    margin-right: 10px;
}
.Mt\(0\) {
    margin-top: 0;
}
.Mt\(1\) {
    margin-top: 5px;
}
.Mt\(2\) {
    margin-top: 10px;
}
.Mt\(3\) {
    margin-top: 20px;
}
.Mt\(4\) {
    margin-top: 40px;
}
.Mb\(0\) {
    margin-bottom: 0;
}
.Mb\(1\) {
    margin-bottom: 5px;
}
.Mb\(2\) {
    margin-bottom: 10px;
}
.Mb\(3\) {
    margin-bottom: 20px;
}
.Mb\(4\) {
    margin-bottom: 40px;
}
.Mb\(200\) {
    margin-bottom: 200px;
}
/** Positioning & Display **/
.D\(ib\) {
    display: inline-block;
}
.D\(if\) {
    display: inline-flex;
}
.D\(ifi\) {
    display: inline-flex!important;
}
.D\(f\) {
    display: flex;
}
.D\(b\) {
    display: block;
}
.D\(n\) {
    display: none;
}
.Fd\(r\) {
    flex-direction: row;
}
.Fd\(c\) {
    flex-direction: column;
}
.Fw\(w\) {
    flex-wrap: wrap;
}
.Jc\(sa\) {
    justify-content: space-around;
}
.Jc\(sb\) {
    justify-content: space-between;
}
.Jc\(c\) {
    justify-content: center;
}
.Jc\(se\)  {
    justify-content: space-evenly;
}

/** media queries **/
@media (min-width:400px) {
    .Jc\(sa\)--sm {
        justify-content: space-around;
    }
    .Jc\(sb\)--sm  {
        justify-content: space-between;
    }
    .Jc\(c\)--sm  {
        justify-content: center;
    }
    .Jc\(se\)--sm  {
        justify-content: space-evenly;
    }
    .Fd\(r\)--sm {
        flex-direction: row;
    }
    .Fd\(c\)--sm {
        flex-direction: column;
    }
}

@media (min-width:600px) {
    .Jc\(sa\)--lg {
        justify-content: space-around;
    }
    .Jc\(sb\)--lg  {
        justify-content: space-between;
    }
    .Jc\(c\)--lg  {
        justify-content: center;
    }
    .Jc\(se\)--lg  {
        justify-content: space-evenly;
    }
    .Fd\(r\)--lg {
        flex-direction: row;
    }
    .Fd\(c\)--lg {
        flex-direction: column;
    }
}


.Ai\(c\) {
    align-items: center;
}
.P\(f\) {
    position: fixed;
}
.P\(r\) {
    position: relative;
}
.P\(a\) {
    position: absolute;
}
.L\(0\) {
    left: 0;
}
.L\(10\) {
    left: 10px;
}
.L\(20\) {
    left: 20px;
}
.R\(0\) {
    right: 0;
}
.R\(10\) {
    right: 10px;
}
.R\(-10\) {
    right: -10px;
}
.R\(-20\) {
    right: -20px;
}
.T\(0\) {
    top: 0;
}
.T\(10\) {
    top: 10PX;
}
.T\(25\) {
    top: 25PX;
}
.T\(50\) {
    top: 50PX;
}
.B\(0\) {
    bottom: 0;
}
.B\(10\) {
    bottom: 10px;
}
.Bneg\(70\) {
    bottom: -70px;
}
.Fl\(l\) {
    float: left;
}
.Fl\(r\) {
    float: right;
}

/** Widths **/

/** media queries **/
@media (min-width:400px) {
    .W\(80\)--sm {
        width: 80%;
    }
    .W\(20\)--sm {
        width: 20%;
    }
    .W\(10\)--sm {
        width: 10%;
    }
    .W\(70\)--sm {
        width: 70%;
    }
    .W\(100\)--sm {
        width: 100%;
    }
    .Wx\(200\)--sm {
        width: 200px;
    }
    .Wx\(400\)--sm {
        width: 400px;
    }
    .Fw\(30\)--sm {
        flex: 0 0 30%;
        max-width: 30%;
    }
    .Fw\(70\)--sm {
        flex: 0 0 70%;
        max-width: 70%;
    }
}

@media (min-width:600px) {
    .Fw\(30\)--lg {
        flex: 0 0 30%;
        max-width: 30%;
    }
    .Fw\(70\)--lg {
        flex: 0 0 70%;
        max-width: 70%;
    }
    .W\(8\)--lg {
        width: 8%;
    }
    .W\(10\)--lg {
        width: 10%;
    }
    .W\(80\)--lg {
        width: 80%;
    }
    .W\(50\)--lg {
        width: 50%;
    }
    .W\(40\)--lg {
        width: 40%;
    }
    .W\(100\)--lg {
        width: 100%;
    }
    .Wx\(200\)--lg {
        width: 200px;
    }
    .Wx\(400\)--lg {
        width: 400px;
    }
}

.W\(a\) {
    width: auto
}
.W\(8\) {
    width: 8%
}
.W\(10\) {
    width: 10%
}
.W\(15\) {
    width: 15%
}
.W\(20\){
    width: 20%
}
.W\(25\) {
    width: 25%
}
.W\(30\){
    width: 30%
}
.W\(33\) {
    width: 33.3333333333%
}
.W\(35\){
    width: 35%
}
.W\(40\) {
    width: 40%
}
.W\(45\) {
    width: 45%
}
.W\(50\) {
    width: 50%
}
.W\(55\){
    width: 55%
}
.W\(60\) {
    width: 60%
}
.W\(65\) {
    width: 65%
}
.W\(66\) {
    width: 66.6666666667%
}
.W\(70\){
    width: 70%
}
.W\(75\) {
    width: 75%
}
.W\(80\) {
    width: 80%
}
.W\(85\) {
    width: 85%
}
.W\(90\) {
    width: 90%
}
.W\(100\) {
    width: 100%
}
.Wx\(400\) {
    width: 400px
}
.Wx\(150\) {
    width: 150px
}
.Wx\(100\) {
    width: 100px
}
.Wx\(250\) {
    width: 250px
}
.Wx\(50\) {
    width: 50px
}

.H\(100\) {
    height: 100%
}
.H\(a\) {
    height: auto
}
.H\(10\) {
    height: 10%
}
.H\(15\) {
    height: 15%
}
.H\(20\){
    height: 20%
}
.H\(25\) {
    height: 25%
}
.H\(30\){
    height: 30%
}
.H\(33\) {
    height: 33.3333333333%
}
.H\(35\){
    height: 35%
}
.H\(40\) {
    height: 40%
}
.H\(45\) {
    height: 45%
}
.H\(50\) {
    height: 50%
}
.H\(55\){
    height: 55%
}
.H\(60\) {
    height: 60%
}
.H\(65\) {
    height: 65%
}
.H\(66\) {
    height: 66.6666666667%
}
.H\(70\){
    height: 70%
}
.H\(75\) {
    height: 75%
}
.H\(80\) {
    height: 80%
}
.H\(85\) {
    height: 85%
}
.H\(90\) {
    height: 90%
}
.H\(100\) {
    height: 100%
}
.Hx\(100\) {
    height: 100px
}
.Hx\(50\) {
    height: 50px
}
.Mah\(180\) {
    max-height: 180px;
}
.Mah\(190\) {
    max-height: 190px;
}
.Mah\(200\) {
    max-height: 200px;
}
.Fw\(30\) {
    flex: 0 0 30%;
    max-width: 30%;
}
.Fw\(70\) {
    flex: 0 0 70%;
    max-width: 70%;
}


/** Text **/
.Ta\(l\) {
    text-align: left
}
.Ta\(r\) {
    text-align: right
}
.Ta\(c\) {
    text-align: center
}
.Tt\(u\) {
    text-transform: uppercase;
}
.Td\(n\) {
    text-decoration: none;
}
.Ls\(1\) {
    letter-spacing: 1px;
}
.Ls\(2\) {
    letter-spacing: 2px;
}

/** Font sizes **/
.Fz\(10\) {
    font-size: 10px;
}
.Fz\(12\) {
    font-size: 12px;
}
.Fz\(14\) {
    font-size: 14px;
}
.Fz\(18\) {
    font-size: 18px;
}
.Fz\(28\) {
    font-size: 28px;
}
.Fz\(35\) {
    font-size: 35px;
}
.Fz\(40\) {
    font-size: 40px;
}
.Fz\(60\) {
    font-size: 60px;
}

/** Font Weights **/
.Fw\(n\) {
    font-weight: normal;
}
.Fw\(b\) {
    font-weight: bold;
}
.Fs\(i\) {
    font-style: italic;
}


/** Borders **/
.BdN\(1\) {
    border: none;
}
.Bc\(black\) {
    border-color: #252328;
}
.Bc\(grey\) {
    border-color: #efefef;
}
.BdW\(1\) {
    border-width: 1px;
}
.BdL\(1\){
    border-left: 1px solid #efefef
}
.BdR\(1\){
    border-right: 1px solid #efefef
}
.BdT\(1\){
    border-top: 1px solid #efefef
}
.BdB\(1\){
    border-bottom: 1px solid #efefef
}
.Bs\(s\) {
    border-style: solid
}

/** Image styling **/
.Of\(cov\) {
    object-fit: cover;
}
.Of\(con\) {
    object-fit: contain;
}

/** Opacity **/
.O\(0\) {
    opacity: 0;
}
.O\(1\) {
    opacity: 0.1;
}
.O\(2\) {
    opacity: 0.2;
}
.O\(3\) {
    opacity: 0.3;
}
.O\(4\) {
    opacity: 0.4;
}
.O\(5\) {
    opacity: 0.5;
}
.O\(6\) {
    opacity: 0.6;
}
.O\(7\) {
    opacity: 0.7;
}
.O\(8\) {
    opacity: 0.8;
}
.O\(9\) {
    opacity: 0.9;
}
.O\(10\) {
    opacity: 1;
}

/** Utilities **/
.Cur\(p\) {
    cursor: pointer;
}


.Br\(5\) {
  border-radius: 5px;
}

.Bs\(20\) {
    box-shadow: 0 10px 14px 0 rgb(23 43 77 / 20%)
}
.Bs\(10\) {
    box-shadow: 0 10px 14px 0 rgb(23 43 77 / 10%)
}
.Li\(n\) {
    list-style-type: none
}




/** media queries **/
@media (min-width:400px) {
    .So\(1\)--sm {
        order: 1;
    }
    .So\(2\)--sm {
        order: 2;
    }

}

@media (min-width:600px) {
    .So\(1\)--lg {
        order: 1;
    }
    .So\(2\)--lg {
        order: 2;
    }
}