.col-left,
.col-top{
    align-items: flex-start;
}

.col-center{
    align-items: center;
}

.col-right,
.col-bottom{
    align-items: flex-end;
}

.col-10{
    width: var(--col-10percent);
}

.col-20{
    width: var(--col-20percent);
}

.col-25{
    width: var(--col-25percent);
}

.col-30{
    width: var(--col-30percent);
}

.col-33{
    width: var(--col-33percent);
}

.col-40{
    width: var(--col-40percent);
}

.col-50{
    width: var(--col-50percent);
}

.col-60{
    width: var(--col-60percent);
}

.col-66{
    width: var(--col-66percent);
}

.col-70{ 
    width: var(--col-70percent);
}

.col-75{
    width: var(--col-75percent);
}

.col-80{
    width: var(--col-80percent);
}

.col-90{
    width: var(--col-90percent);
}

.col-100{
    width: 100%;
}


@media only screen and (min-width: 425px) {
    .S-col-10{
        width: var(--col-10percent);
    }

    .S-col-20{
        width: var(--col-20percent);
    }

    .S-col-25{
        width: var(--col-25percent);
    }

    .S-col-30{
        width: var(--col-30percent);
    }

    .S-col-33{
        width: var(--col-33percent);
    }

    .S-col-40{
        width: var(--col-40percent);
    }

    .S-col-50{
        width: var(--col-50percent);
    }

    .S-col-60{
        width: var(--col-60percent);
    }

    .S-col-66{
        width: var(--col-66percent);
    }

    .S-col-70{ 
        width: var(--col-70percent);
    }

    .S-col-75{
        width: var(--col-75percent);
    }

    .S-col-80{
        width: var(--col-80percent);
    }

    .S-col-90{
        width: var(--col-90percent);
    }
}

@media only screen and (min-width: 768px) {
    .M-col-10{
        width: var(--col-10percent);
    }

    .M-col-20{
        width: var(--col-20percent);
    }

    .M-col-25{
        width: var(--col-25percent);
    }

    .M-col-30{
        width: var(--col-30percent);
    }

    .M-col-33{
        width: var(--col-33percent);
    }

    .M-col-40{
        width: var(--col-40percent);
    }

    .M-col-50{
        width: var(--col-50percent);
    }

    .M-col-60{
        width: var(--col-60percent);
    }

    .M-col-66{
        width: var(--col-66percent);
    }

    .M-col-70{ 
        width: var(--col-70percent);
    }

    .M-col-75{
        width: var(--col-75percent);
    }

    .M-col-80{
        width: var(--col-80percent);
    }

    .M-col-90{
        width: var(--col-90percent);
    }
}

@media only screen and (min-width: 1024px) {
    .L-col-10{
        width: var(--col-10percent);
    }

    .L-col-20{
        width: var(--col-20percent);
    }

    .L-col-25{
        width: var(--col-25percent);
    }

    .L-col-30{
        width: var(--col-30percent);
    }

    .L-col-33{
        width: var(--col-33percent);
    }

    .L-col-40{
        width: var(--col-40percent);
    }

    .L-col-50{
        width: var(--col-50percent);
    }

    .L-col-60{
        width: var(--col-60percent);
    }

    .L-col-66{
        width: var(--col-66percent);
    }

    .L-col-70{ 
        width: var(--col-70percent);
    }

    .L-col-75{
        width: var(--col-75percent);
    }

    .L-col-80{
        width: var(--col-80percent);
    }

    .L-col-90{
        width: var(--col-90percent);
    }
}

/* New Hero Section */

.herocontainer {
    margin-top: 100px;
}

.blueherobg {
    background-color: var(--main-bg-color);
}

.height-35{
    min-height: 35vh
}

.max-col-width{
    display: flex;
    width: 100%;
    height: 100%;
    padding: 10px var(--main-padding-width);
    margin: auto;
    max-width: var(--main-container-width);
}