@-ms-viewport {
    width: device-width;
}

.container {
    /* width: 100%; */

    margin-right: auto;
    margin-left: auto;

    /* width: calc(100% - 300px); */
    width: 100%;

}
.container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.container .row {
    padding-right: -15px;
    padding-left: -15px;
}

.col {
    position: relative;
    float: left;
    min-height: 1px;
}
.col{
    padding-right: 5%;
    padding-left: 5%;
}

.container:before,
.container:after,
.row:before,
.row:after,
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}


@media (min-width: 40em) {
    .container {
        width: 960px;
    }
    .col{
        padding-right: 15px;
        padding-left: 15px;
    }
}
/* @media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1440px) {
    .container {
        max-width: 1260px;
    }
}

@media (min-width: 1720px) {
    .container {
        max-width: 1380px;
    }
} */



/* ------------------------------- DEVICE A from 0 to 639px ------------------------------- */

@media (min-width: 0em) {
    .col.a-12 {
        width: 100%;
    }
    .col.a-11 {
        width: 91.66666667%;
    }
    .col.a-10 {
        width: 83.33333333%;
    }
    .col.a-9 {
        width: 75%;
    }
    .col.a-8 {
        width: 66.66666667%;
    }
    .col.a-7 {
        width: 58.33333333%;
    }
    .col.a-6 {
        width: 50%;
    }
    .col.a-5 {
        width: 41.66666667%;
    }
    .col.a-4 {
        width: 33.33333333%;
    }
    .col.a-3 {
        width: 25%;
    }
    .col.a-2 {
        width: 16.66666667%;
    }
    .col.a-1 {
        width: 8.33333333%;
    }
}

/* ------------------------------- DEVICE B from 640px to 1023px ------------------------------- */

@media (min-width: 40em) {
    .col.b-12 {
        width: 100%;
    }
    .col.b-11 {
        width: 91.66666667%;
    }
    .col.b-10 {
        width: 83.33333333%;
    }
    .col.b-9 {
        width: 75%;
    }
    .col.b-8 {
        width: 66.66666667%;
    }
    .col.b-7 {
        width: 58.33333333%;
    }
    .col.b-6 {
        width: 50%;
    }
    .col.b-5 {
        width: 41.66666667%;
    }
    .col.b-4 {
        width: 33.33333333%;
    }
    .col.b-3 {
        width: 25%;
    }
    .col.b-2 {
        width: 16.66666667%;
    }
    .col.b-1 {
        width: 8.33333333%;
    }
}

/* ------------------------------- DEVICE C from 1024px to 1439px orange ------------------------------- */

@media (min-width: 64em) {
    .col.c-12 {
        width: 100%;
    }
    .col.c-11 {
        width: 91.66666667%;
    }
    .col.c-10 {
        width: 83.33333333%;
    }
    .col.c-9 {
        width: 75%;
    }
    .col.c-8 {
        width: 66.66666667%;
    }
    .col.c-7 {
        width: 58.33333333%;
    }
    .col.c-6 {
        width: 50%;
    }
    .col.c-5 {
        width: 41.66666667%;
    }
    .col.c-4 {
        width: 33.33333333%;
    }
    .col.c-3 {
        width: 25%;
    }
    .col.c-2 {
        width: 16.66666667%;
    }
    .col.c-1 {
        width: 8.33333333%;
    }
}

/* ------------------------------- DEVICE D from 1440px to 1679px ------------------------------- */

@media (min-width: 90em) {
    .col.d-12 {
        width: 100%;
    }
    .col.d-11 {
        width: 91.66666667%;
    }
    .col.d-10 {
        width: 83.33333333%;
    }
    .col.d-9 {
        width: 75%;
    }
    .col.d-8 {
        width: 66.66666667%;
    }
    .col.d-7 {
        width: 58.33333333%;
    }
    .col.d-6 {
        width: 50%;
    }
    .col.d-5 {
        width: 41.66666667%;
    }
    .col.d-4 {
        width: 33.33333333%;
    }
    .col.d-3 {
        width: 25%;
    }
    .col.d-2 {
        width: 16.66666667%;
    }
    .col.d-1 {
        width: 8.33333333%;
    }
}

/* ------------------------------- DEVICE E from 1680px to 2559px ------------------------------- */

@media (min-width: 105em) {
    .col.e-12 {
        width: 100%;
    }
    .col.e-11 {
        width: 91.66666667%;
    }
    .col.e-10 {
        width: 83.33333333%;
    }
    .col.e-9 {
        width: 75%;
    }
    .col.e-8 {
        width: 66.66666667%;
    }
    .col.e-7 {
        width: 58.33333333%;
    }
    .col.e-6 {
        width: 50%;
    }
    .col.e-5 {
        width: 41.66666667%;
    }
    .col.e-4 {
        width: 33.33333333%;
    }
    .col.e-3 {
        width: 25%;
    }
    .col.e-2 {
        width: 16.66666667%;
    }
    .col.e-1 {
        width: 8.33333333%;
    }
}