.col {
    border: none;
    float: left;
    outline: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.col.full {
    width: 100% !important;
}

@media screen and (min-width: 1451px) {

    /* Columns */
    .col.xl-1 {
        width: 10% !important;
    }

    .col.xl-2 {
        width: 20% !important;
    }

    .col.xl-3 {
        width: 30% !important;
    }

    .col.xl-4 {
        width: 40% !important;
    }

    .col.xl-5 {
        width: 50% !important;
    }

    .col.xl-6 {
        width: 60% !important;
    }

    .col.xl-7 {
        width: 70% !important;
    }

    .col.xl-8 {
        width: 80% !important;
    }

    .col.xl-9 {
        width: 90% !important;
    }

    .col.xl-10 {
        width: 100% !important;
    }

    .col.xl-hide {
        visibility: hidden !important;
        display: none !important;
        z-index: -999 !important;
    }

}


@media screen and (min-width: 1025px) and (max-width: 1450px) {

    /* Columns */
    .col.l-1 {
        width: 10% !important;
    }

    .col.l-2 {
        width: 20% !important;
    }

    .col.l-3 {
        width: 30% !important;
    }

    .col.l-4 {
        width: 40% !important;
    }

    .col.l-5 {
        width: 50% !important;
    }

    .col.l-6 {
        width: 60% !important;
    }

    .col.l-7 {
        width: 70% !important;
    }

    .col.l-8 {
        width: 80% !important;
    }

    .col.l-9 {
        width: 90% !important;
    }

    .col.l-10 {
        width: 100% !important;
    }

    .col.l-hide {
        visibility: hidden !important;
        display: none !important;
        z-index: -999 !important;
    }

}

@media screen and (max-width: 1024px) and (min-width: 787px) {

    /* Columns */
    .col.md-1 {
        width: 10% !important;
    }

    .col.md-2 {
        width: 20% !important;
    }

    .col.md-3 {
        width: 30% !important;
    }

    .col.md-4 {
        width: 40% !important;
    }

    .col.md-5 {
        width: 50% !important;
    }

    .col.md-6 {
        width: 60% !important;
    }

    .col.md-7 {
        width: 70% !important;
    }

    .col.md-8 {
        width: 80% !important;
    }

    .col.md-9 {
        width: 90% !important;
    }

    .col.md-10 {
        width: 100% !important;
    }

    .col.md-hide {
        visibility: hidden !important;
        display: none !important;
        z-index: -999 !important;
    }

}

@media screen and (max-width: 786px) and (min-width: 481px) {

    /* Columns */
    .col.s-1 {
        width: 10% !important;
    }

    .col.s-2 {
        width: 20% !important;
    }

    .col.s-3 {
        width: 30% !important;
    }

    .col.s-4 {
        width: 40% !important;
    }

    .col.s-5 {
        width: 50% !important;
    }

    .col.s-6 {
        width: 60% !important;
    }

    .col.s-7 {
        width: 70% !important;
    }

    .col.s-8 {
        width: 80% !important;
    }

    .col.s-9 {
        width: 90% !important;
    }

    .col.s-10 {
        width: 100% !important;
    }

    .col.s-hide {
        visibility: hidden !important;
        display: none !important;
        z-index: -999 !important;
    }

}

@media screen and (max-width: 480px) {

    /* Columns */
    .col.xs-1 {
        width: 10% !important;
    }

    .col.xs-2 {
        width: 20% !important;
    }

    .col.xs-3 {
        width: 30% !important;
    }

    .col.xs-4 {
        width: 40% !important;
    }

    .col.xs-5 {
        width: 50% !important;
    }

    .col.xs-6 {
        width: 60% !important;
    }

    .col.xs-7 {
        width: 70% !important;
    }

    .col.xs-8 {
        width: 80% !important;
    }

    .col.xs-9 {
        width: 90% !important;
    }

    .col.xs-10 {
        width: 100% !important;
    }

    .col.xs-hide {
        visibility: hidden !important;
        display: none !important;
        z-index: -999 !important;
    }

}