/*
    Name: grid styles;
    by CRYCODE
*/

.clearfix:after {
    content: '';
    display: table;
    clear: both
}

.grid,.row {
    display: table;
    width: calc(100% + 30px);
    margin: 0 -15px;
    table-layout: fixed;
}

[class*="col-"] {
    float: left;
    position: relative;
    padding: 0 15px;
}

.grid {
    margin-top: -15px;
    margin-bottom: -15px;
    font-size: 0
}

.grid [class*="col-"] {
    display: inline-block;
    vertical-align: top;
    padding: 15px;
    font-size: 15px;
    float: none;
}

.tac {
    text-align: center!important;
}

.tar {
    text-align: right!important;
}

.tal {
    text-align: left!important;
}

.vam {
    vertical-align: middle!important;
}

.vat {
    vertical-align: top!important;
}

.vab {
    vertical-align: bottom!important;
}

.col-p-1 {
    width: 10%
}

.col-p-2 {
    width: 20%
}

.col-p-25 {
    width: 25%
}

.col-p-3 {
    width: 30%
}

.col-p-33 {
    width: 33.33%
}

.col-p-4 {
    width: 40%
}

.col-p-5 {
    width: 50%
}

.col-p-55 {
    width: 55%;
}

.col-p-6 {
    width: 60%
}

.col-p-7 {
    width: 70%
}

.col-p-75 {
    width: 75%
}

.col-p-8 {
    width: 80%
}

.col-p-9 {
    width: 90%
}

.col-p-10 {
    width: 100%
}

@media screen and (min-width: 1600px) {
    .p-hidden {
        display: none!important;
    }
}

/* Планшеты */
@media screen and (max-width: 1279px) {
    .grid,.row {
        width: calc(100% + 20px);
    	margin: 0 -10px;
    }

    [class*="col-"] {
        padding: 0 10px;
    }

    .t-hidden {
        display: none!important;
    }

    .grid {
        margin-top: -10px;
        margin-bottom: -10px;
    }

    .grid [class*="col-"] {
        padding: 10px;
    }

    .t-tac {
        text-align: center!important;
    }

    .t-tar {
        text-align: right!important;
    }

    .t-tal {
        text-align: left!important;
    }

    .t-vat {
        vertical-align: top!important;
    }

    .t-vam {
        vertical-align: middle!important;
    }

    .t-vab {
        vertical-align: bottom!important;
    }

    .col-t-1 {
        width:10%
    }

    .col-t-2 {
        width: 20%
    }

    .col-t-25 {
        width: 25%
    }

    .col-t-3 {
        width: 30%
    }

    .col-t-33 {
        width: 33.33%
    }

    .col-t-4 {
        width: 40%
    }

    .col-t-5 {
        width: 50%
    }

    .col-t-6 {
        width: 60%
    }

    .col-t-7 {
        width: 70%
    }

    .col-t-8 {
        width: 80%
    }

    .col-t-9 {
        width: 90%
    }

    .col-t-10 {
        width: 100%
    }
}

/* Прочие смартфоны */
@media screen and (max-width: 1023px) {
    .grid,.row {
        width: calc(100% + 10px);
    	margin: 0 -5px;
    }

    [class*="col-"] {
        padding: 0 5px;
    }

    .m-tal {
        text-align: left!important;
    }

    .m-hidden {
        display: none!important;
    }

    .m-pull-left {
        float: left!important;
    }

    .m-pull-right {
        float: right!important;
    }

    .grid {
        margin-top: -5px;
        margin-bottom: -5px;
    }

    .grid [class*="col-"] {
        padding: 5px;
    }

    .m-tac {
        text-align: center!important;
    }

    .m-tar {
        text-align: right!important;
    }

    .m-tal {
        text-align: left!important;
    }

    .m-vat {
        vertical-align: top!important;
    }

    .m-vam {
        vertical-align: middle!important;
    }

    .m-vab {
        vertical-align: bottom!important;
    }

    .col-m-05 {
        width: 5%
    }

    .col-m-1 {
        width: 10%
    }

    .col-m-2 {
        width: 20%
    }

    .col-m-25 {
        width: 25%
    }

    .col-m-3 {
        width: 30%
    }

    .col-m-33 {
        width: 33.33%
    }

    .col-m-4 {
        width: 40%
    }

    .col-m-5 {
        width: 50%
    }

    .col-m-55 {
        width: 55%
    }

    .col-m-6 {
        width: 60%
    }

    .col-m-7 {
        width: 70%
    }

    .col-m-8 {
        width: 80%
    }

    .col-m-9 {
        width: 90%
    }

    .col-m-10 {
        width: 100%
    }
}

/* Смартфоны с экраном меньше 768 */
@media screen and (max-width: 767px) {
    .mm-fz14 {
        font-size: 14px!important;
    }

    .mm-tac {
        text-align: center!important;
    }

    .mm-tal {
        text-align: left!important;
    }

    .mm-hidden {
        display: none!important;
    }

    .col-mm-1 {
        width: 10%
    }

    .col-mm-2 {
        width: 20%
    }

    .col-mm-25 {
        width: 25%
    }

    .col-mm-3 {
        width: 30%
    }

    .col-mm-33 {
        width: 33.33%
    }

    .col-mm-4 {
        width: 40%
    }

    .col-mm-5 {
        width: 50%
    }

    .col-mm-6 {
        width: 60%
    }

    .col-mm-7 {
        width: 70%
    }

    .col-mm-8 {
        width: 80%
    }

    .col-mm-9 {
        width: 90%
    }

    .col-mm-10 {
        width: 100%
    }
}

/* Смартфоны с экраном меньше 480 */
@media screen and (max-width: 479px) {
    .mmm-tac {
        text-align: center!important;
    }

    .mmm-vat {
        vertical-align: top!important;
    }

    .mmm-hidden {
        display: none!important;
    }

    .col-mmm-1 {
        width: 10%
    }

    .col-mmm-2 {
        width: 20%
    }

    .col-mmm-25 {
        width: 25%
    }

    .col-mmm-3 {
        width: 30%
    }

    .col-mmm-33 {
        width: 33.33%
    }

    .col-mmm-4 {
        width: 40%
    }

    .col-mmm-5 {
        width: 50%
    }

    .col-mmm-6 {
        width: 60%
    }

    .col-mmm-7 {
        width: 70%
    }

    .col-mmm-8 {
        width: 80%
    }

    .col-mmm-9 {
        width: 90%
    }

    .col-mmm-10 {
        width: 100%
    }
}