/*
	Version 1.01 от 8 июня 2016
*/

html,
body {
    padding: 0px;
    margin: 0px;
}

img {
    display: block;
}

.bd {
    background: #ccc;
}

.clear::before {
    content: '';
    display: table;
}

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

.inline-block {
    display: inline;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.fl-lg {
    float: left;
}

.fr-lg {
    float: right;
}


/* Containers */

.container {
    box-sizing: border-box;
    width: 100%;
}

.con-1200 {
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.con-960 {
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.con-720 {
    box-sizing: border-box;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.con-640 {
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.con-480 {
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.con-clear {
    max-width: 100%;
    margin: 0 auto;
}


/* Columns */


/* Large screen > 1200px Prefix: lg */

.col {
    box-sizing: border-box;
    padding-left: 1.5%;
    padding-right: 1.5%;
    padding-left: calc(15px);
    padding-right: calc(15px);
}

.col-clear {
    width: 103%;
    margin-left: -1.5%;
    width: calc(100% + 30px);
    margin-left: calc(-15px);
}

.lg-w100 {
    width: 100%;
}

.lg-w90 {
    width: 90%;
    float: left;
}

.lg-w80 {
    width: 80%;
    float: left;
}

.lg-w75 {
    width: 75%;
    float: left;
}

.lg-w70 {
    width: 70%;
    float: left;
}

.lg-w66 {
    width: 66.66666666666667%;
    float: left;
}

.lg-w60 {
    width: 60%;
    float: left;
}

.lg-w50 {
    width: 50%;
    float: left;
}

.lg-w40 {
    width: 40%;
    float: left;
}

.lg-w33 {
    width: 33.33333333333333%;
    float: left;
}

.lg-w30 {
    width: 30%;
    float: left;
}

.lg-w25 {
    width: 25%;
    float: left;
}

.lg-w20 {
    width: 20%;
    float: left;
}

.lg-w16 {
    width: 16.66666666666667%;
    float: left;
}


/* md < 1200px Prefix: md */

@media screen and (max-width: 1199px) {
    .con-1200 {
        box-sizing: border-box;
        width: 97%;
        width: calc(100%);
        padding-left: 1.5%;
        padding-right: 1.5%;
        padding-left: calc(15px);
        padding-right: calc(15px);
        margin: 0 auto;
    }
    .clear-md {
        clear: both;
    }
    .md-w100 {
        width: 100%;
    }
    .md-w90 {
        width: 90%;
        float: left;
    }
    .md-w80 {
        width: 80%;
        float: left;
    }
    .md-w75 {
        width: 75%;
        float: left;
    }
    .md-w70 {
        width: 70%;
        float: left;
    }
    .md-w66 {
        width: 66, 66666666666667%;
        float: left;
    }
    .md-w60 {
        width: 60%;
        float: left;
    }
    .md-w50 {
        width: 50%;
        float: left;
    }
    .md-w40 {
        width: 40%;
        float: left;
    }
    .md-w33 {
        width: 33.33333333333333%;
        float: left;
    }
    .md-w30 {
        width: 30%;
        float: left;
    }
    .md-w25 {
        width: 25%;
        float: left;
    }
    .md-w20 {
        width: 20%;
        float: left;
    }
    .md-w16 {
        width: 16, 66666666666667%;
        float: left;
    }
}


/* sm < 768px Prefix: sm */

@media screen and (max-width: 767px) {
    .clear-sm {
        clear: both;
    }
    .sm-disable {
        display: none;
    }
    .sm-w100 {
        width: 100%;
    }
    .sm-w90 {
        width: 90%;
        float: left;
    }
    .sm-w80 {
        width: 80%;
        float: left;
    }
    .sm-w75 {
        width: 75%;
        float: left;
    }
    .sm-w70 {
        width: 70%;
        float: left;
    }
    .sm-w66 {
        width: 66, 66666666666667%;
        float: left;
    }
    .sm-w60 {
        width: 60%;
        float: left;
    }
    .sm-w50 {
        width: 50%;
        float: left;
    }
    .sm-w40 {
        width: 40%;
        float: left;
    }
    .sm-w33 {
        width: 33.33333333333333%;
        float: left;
    }
    .sm-w30 {
        width: 30%;
        float: left;
    }
    .sm-w25 {
        width: 25%;
        float: left;
    }
    .sm-w20 {
        width: 20%;
        float: left;
    }
    .sm-w16 {
        width: 16, 66666666666667%;
        float: left;
    }
}


/* xs < 480px Prefix: sx */

@media screen and (max-width: 479px) {
    .sx-disable {
        display: none;
    }
    .clear-sx {
        clear: both;
    }
    .sx-w100 {
        width: 100%;
    }
    .sx-w90 {
        width: 90%;
        float: left;
    }
    .sx-w80 {
        width: 80%;
        float: left;
    }
    .sx-w75 {
        width: 75%;
        float: left;
    }
    .sx-w70 {
        width: 70%;
        float: left;
    }
    .sx-w66 {
        width: 66, 66666666666667%;
        float: left;
    }
    .sx-w60 {
        width: 60%;
        float: left;
    }
    .sx-w50 {
        width: 50%;
        float: left;
    }
    .sx-w40 {
        width: 40%;
        float: left;
    }
    .sx-w33 {
        width: 33.33333333333333%;
        float: left;
    }
    .sx-w30 {
        width: 30%;
        float: left;
    }
    .sx-w25 {
        width: 25%;
        float: left;
    }
    .sx-w20 {
        width: 20%;
        float: left;
    }
    .sx-w16 {
        width: 16, 66666666666667%;
        float: left;
    }
}