/** WRAPPER **/

.page-center {
    margin: 0 auto;
    width: 1200px;
    max-width: 100%;
    padding: 0 1rem;
}

/** GRIDS **/

.grid {
    display: grid;
}

.order1 {
    order: 1;
}

.order2 {
    order: 2;
}

.orderrev{
    order: -1;
}

.orderrev-rsp{
    order: -1;
}

.aic {
    align-items: center;
}

.pic {
    place-items: center;
}

.jic {
    justify-items: center;
}

.gap1 {
    gap: 1rem;
    grid-gap: 1rem;
}

.gap2 {
    gap: 2rem;
    grid-gap: 2rem;
}

.gap3 {
    gap: 3rem;
    grid-gap: 3rem;
}

.gap4 {
    gap: 4rem;
    grid-gap: 4rem;
}

.gap5 {
    gap: 5rem;
    grid-gap: 5rem;
}

.two-col {
    grid-template-columns: repeat(2, 1fr);
}

.two-col-2 {
    grid-template-columns: repeat(2, 1fr);
}

.three-col {
    grid-template-columns: repeat(3, 1fr);
}

.four-col {
    grid-template-columns: repeat(4, 1fr);
}

.one-two-col {
    grid-template-columns: 1fr 2fr;
}

.one-three-col {
    grid-template-columns: 1fr 3fr;
}

.two-one-col {
    grid-template-columns: 2fr 1fr;
}

.three-one-col {
    grid-template-columns: 3fr 1fr;
}

@media (max-width: 768px) {
    .two-col, .three-col, .four-col, .one-two-col, .one-three-col, .two-one-col, .three-one-col {
        grid-template-columns: 1fr;
    }

    .orderrev-rsp {
        order: initial;
    }
}

@media (max-width: 480px) {
    .two-col-2 {
        grid-template-columns: 1fr;
    }
}

/** FLEXBOX **/

.flex {
    display: flex;
}

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

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

.jcc {
    justify-content: center;
}

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

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

@media (max-width: 768px) {
    .flex {
        /* display: block; */
    }
}

/** BUTTONS **/

/** POSITIONING **/

.pos-rel {
    position: relative;
}

.pos-abs {
    position: absolute;
}

.z99 {
    z-index: 99;
}

.z33 {
    z-index: 33;
}


/** OTHER **/

.show {
    opacity: 1;
    visibility: visible;
}

.margin-auto {
    margin: 0 auto;
}

.tac {
    text-align: center;
}

.w50 {
     width: 50%;
}

.w50rsp {
    width: 50%;
}

.w75 {
    width: 75%;
}

.w75rsp {
    width: 75%;
}

.fl-left {
    float: left;
}

.fl-right {
    float: right;
}

@media (max-width: 768px) {

    .w75rsp {
        width: 100%;
    }

    .w50rsp {
        width: 100%;
    }
    
}