/* =========================================================================== */
/* Grid Structure */
/* =========================================================================== */
.Container {
    display: block;
    width: 100%;
    margin: 0 auto;
    /* padding: 1rem; */
}

.Container::after {
    content: "";
    display: block;
    clear: both;
}

/* ------------------------------------ */
/* ------------------------------------ */
.Row {
    display: flex;
    justify-content: center;
    gap: .3rem;
    position: relative;
    
    text-align: left;
    width: 100%;
}

.Row::after {
    content: "";
    clear: both;
    display: block;
}

/* ------------------------------------ */
/* ------------------------------------ */
[class*='Col-'] {
    float: left;
    padding: 0.3rem;
}

/* ------------------------------------ */
.Col-1,
.SubCol-1 {
    width: 16.666%;
}

/* ------------------------------------ */
.Col-2,
.SubCol-2 {
    width: 33.333%;
}

/* ------------------------------------ */
.Col-3,
.SubCol-3 {
    width: 50%;
}

/* ------------------------------------ */
.Col-4,
.SubCol-4 {
    width: 66.666%;
}

/* ------------------------------------ */
.Col-5,
.SubCol-5 {
    width: 83.333%;
}

/* ------------------------------------ */
.Col-6,
.SubCol-6 {
    width: 100%;
}
/* ------------------------------------ */
/* ------------------------------------ */

/* =========================================================================== */
/* Container */
/* =========================================================================== */
.Center {
    margin-left: auto;
    margin-right: auto;
}

.Round {
    border-radius: 50%;
}
/* ------------------------------------ */
/* ------------------------------------ */
.VerticalCenter{
    margin: 0;
    position: relative;
    top: 50%;
    /* -ms-transform: translateY(-50%); */
    transform: translateY(-50%);
}
/* =========================================================================== */
/* width */
/* =========================================================================== */
.w20 {
    width: 20%;
}

.w24 {
    width: 24%;
}

.w25 {
    width: 25%;
}

.w30 {
    width: 30%;
}

.w32 {
    width: 32%;
}

.w33 {
    width: 33.33%;
}

.w40 {
    width: 40%;
}

.w49 {
    width: 49%;
}

.w50 {
    width: 50%;
}

.w66 {
    width: 66.66%;
}

.w80 {
    width: 80%;
}

.w90 {
    width: 90%;
}

.w99 {
    width: 99%;
}

.w100 {
    width: 100%;
}
/* =========================================================================== */
/* responsive */
/* =========================================================================== */
@media (max-width: 1023px) {
    .Col-1 {
        width: 33.333%;
    }

    /* ------------------------------------ */
    .Col-5 {
        width: 66.666%;
    }

    /* ------------------------------------ */
    .Col-6 {
        width: 100%;
    }
}

@media (max-width: 480px) {
    [class*='Col-'] {
        width: 100%;
    }
}