/*======================== Version 1.0 от 21 августа 2017 ========================*/

*,
*:after,
*:before {
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box
}

html {
    font-size: 16px;
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    display: flex;
    flex-direction: column;
    width: 100vw;
    min-width: 320px;
    min-height: 100vh;
    color: #000;
    background-color: #fff;
    word-wrap: break-word;
    overflow-x: hidden
}

main {
    flex: 1 0 auto
}

footer {
    flex: 0 0 auto
}

h1,
h2,
h3,
h4 {
    margin: 1em 0 0.5em
}

h1 {
    font-size: 2rem
}

h2 {
    font-size: 1.625rem
}

h3 {
    font-size: 1.25rem
}

h4 {
    font-size: 1rem
}

p {
    font-size: 1rem;
    line-height: 1.6rem;
    margin: .625em 0
}

article,
aside,
figcaption,
figure,
footer,
header,
main,
nav,
section {
    display: block
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    border-style: none
}

hr {
    box-sizing: content-box;
    width: 100%;
    height: 1px;
    overflow: visible;
    background-color: #ccc
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    transition: all .33s
}

a:focus,
a:hover,
a:active {
    outline: 0
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: inherit
}

b,
strong {
    font-weight: bolder
}

code,
pre {
    font-family: monospace, monospace;
    font-size: 1em
}

mark {
    background-color: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

audio,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

svg:not(:root) {
    overflow: hidden
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: 1.15;
    width: inherit;
    margin: 0;
    transition: all .33s
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    color: inherit;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    display: block;
    padding: .5em;
    border: 1px solid #ccc
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0 3px;
    white-space: normal
}

progress {
    display: inline-block;
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

[hidden] {
    display: none
}


/*=================================== Classes ====================================*/

.bg {
    background: #ccc
}

.inter {
    padding: 30px 0
}

.clear::before,
.clear::after {
    content: '';
    display: table;
    line-height: 0
}

.clear::after {
    clear: both
}

.fl {
    float: left
}

.fr {
    float: right
}

.btn {
    display: inline-block;
    cursor: pointer
}

.txt-l {
    text-align: left
}

.txt-r {
    text-align: right
}

.txt-c {
    text-align: center
}

.mb-sm {
    margin: 0;
    margin-bottom: 10px
}

.mb-sm-comp {
    margin-bottom: -10px
}

.mb-md {
    margin: 0;
    margin-bottom: 20px
}

.mb-md-comp {
    margin-bottom: -20px
}

.mb-lg {
    margin: 0;
    margin-bottom: 30px
}

.mb-lg-comp {
    margin-bottom: -30px
}

.mb-xl {
    margin: 0;
    margin-bottom: 60px
}

.m-none {
    margin: 0
}

.m-c {
    margin-left: auto;
    margin-right: auto
}

.col {
    padding-right: 6px;
    padding-left: 6px
}

.col-clear {
    width: calc(100% + 12px);
    margin-left: -6px
}


/*===================================== Grid =====================================*/

.con-1200,
.con-960,
.con-770,
.con-640,
.con-480 {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 6px;
    padding-left: 6px
}

.con-1200 {
    max-width: 1200px
}

.con-960 {
    max-width: 960px
}

.con-770 {
    max-width: 770px
}

.con-640 {
    max-width: 640px
}

.con-480 {
    max-width: 480px
}

.row,
.column {
    display: flex;
    flex: 0 1 auto
}

.row {
    flex-direction: row;
    flex-wrap: wrap
}

.column {
    flex-direction: column
}

.row.reverse {
    flex-direction: row-reverse
}

.column.reverse {
    flex-direction: column-reverse
}

.h100 {
    height: 100%
}


/*================================== xs <= 768px ==================================*/

.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
    flex: 0 0 auto
}

.col-xs {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%
}

.col-xs-1 {
    flex-basis: 8.333%;
    max-width: 8.333%
}

.col-xs-2 {
    flex-basis: 16.667%;
    max-width: 16.667%
}

.col-xs-3 {
    flex-basis: 25%;
    max-width: 25%
}

.col-xs-4 {
    flex-basis: 33.333%;
    max-width: 33.333%
}

.col-xs-5 {
    flex-basis: 41.667%;
    max-width: 41.667%
}

.col-xs-6 {
    flex-basis: 50%;
    max-width: 50%
}

.col-xs-7 {
    flex-basis: 58.333%;
    max-width: 58.333%
}

.col-xs-8 {
    flex-basis: 66.667%;
    max-width: 66.667%
}

.col-xs-9 {
    flex-basis: 75%;
    max-width: 75%
}

.col-xs-10 {
    flex-basis: 83.333%;
    max-width: 83.333%
}

.col-xs-11 {
    flex-basis: 91.667%;
    max-width: 91.667%
}

.col-xs-12 {
    flex-basis: 100%;
    max-width: 100%
}

.col-xs-offset-1 {
    margin-left: 8.333%
}

.col-xs-offset-2 {
    margin-left: 16.667%
}

.col-xs-offset-3 {
    margin-left: 25%
}

.col-xs-offset-4 {
    margin-left: 33.333%
}

.col-xs-offset-5 {
    margin-left: 41.667%
}

.col-xs-offset-6 {
    margin-left: 50%
}

.col-xs-offset-7 {
    margin-left: 58.333%
}

.col-xs-offset-8 {
    margin-left: 66.667%
}

.col-xs-offset-9 {
    margin-left: 75%
}

.col-xs-offset-10 {
    margin-left: 83.333%
}

.col-xs-offset-11 {
    margin-left: 91.667%
}

.start-xs {
    justify-content: flex-start
}

.center-xs {
    justify-content: center
}

.end-xs {
    justify-content: flex-end
}

.top-xs {
    align-items: flex-start
}

.middle-xs {
    align-items: center
}

.bottom-xs {
    align-items: flex-end
}

.around-xs {
    justify-content: space-around
}

.between-xs {
    justify-content: space-between
}

.first-xs {
    order: -1
}

.last-xs {
    order: 1
}

.invisible-xs {
    display: none;
    visibility: hidden
}

.visible-xs {
    display: block;
    visibility: visible
}

.nw-xs {
    flex-wrap: nowrap;
}


/*=============================== 768px >= sm <= 1024px ===============================*/

@media only screen and (min-width: 768px) {
    .con-1200, .con-960, .con-770, .con-640, .con-480 {
        padding-right: 10px;
        padding-left: 10px
    }
    .col-sm,
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12 {
        flex: 0 0 auto
    }
    .col-sm {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }
    .col-sm-1 {
        flex-basis: 8.333%;
        max-width: 8.333%
    }
    .col-sm-2 {
        flex-basis: 16.667%;
        max-width: 16.667%
    }
    .col-sm-3 {
        flex-basis: 25%;
        max-width: 25%
    }
    .col-sm-4 {
        flex-basis: 33.333%;
        max-width: 33.333%
    }
    .col-sm-5 {
        flex-basis: 41.667%;
        max-width: 41.667%
    }
    .col-sm-6 {
        flex-basis: 50%;
        max-width: 50%
    }
    .col-sm-7 {
        flex-basis: 58.333%;
        max-width: 58.333%
    }
    .col-sm-8 {
        flex-basis: 66.667%;
        max-width: 66.667%
    }
    .col-sm-9 {
        flex-basis: 75%;
        max-width: 75%
    }
    .col-sm-10 {
        flex-basis: 83.333%;
        max-width: 83.333%
    }
    .col-sm-11 {
        flex-basis: 91.667%;
        max-width: 91.667%
    }
    .col-sm-12 {
        flex-basis: 100%;
        max-width: 100%
    }
    .col-sm-offset-1 {
        margin-left: 8.333%
    }
    .col-sm-offset-2 {
        margin-left: 16.667%
    }
    .col-sm-offset-3 {
        margin-left: 25%
    }
    .col-sm-offset-4 {
        margin-left: 33.333%
    }
    .col-sm-offset-5 {
        margin-left: 41.667%
    }
    .col-sm-offset-6 {
        margin-left: 50%
    }
    .col-sm-offset-7 {
        margin-left: 58.333%
    }
    .col-sm-offset-8 {
        margin-left: 66.667%
    }
    .col-sm-offset-9 {
        margin-left: 75%
    }
    .col-sm-offset-10 {
        margin-left: 83.333%
    }
    .col-sm-offset-11 {
        margin-left: 91.667%
    }
    .start-sm {
        justify-content: flex-start
    }
    .center-sm {
        justify-content: center
    }
    .end-sm {
        justify-content: flex-end
    }
    .top-sm {
        align-items: flex-start
    }
    .middle-sm {
        align-items: center
    }
    .bottom-sm {
        align-items: flex-end
    }
    .around-sm {
        justify-content: space-around
    }
    .between-sm {
        justify-content: space-between
    }
    .first-sm {
        order: -1
    }
    .last-sm {
        order: 1
    }
    .invisible-sm {
        display: none;
        visibility: hidden
    }
    .visible-sm {
        display: block;
        visibility: visible
    }
    /*=================================== Classes ====================================*/
    .inter {
        padding: 60px 0
    }
    .col {
        padding-right: 10px;
        padding-left: 10px
    }
    .col-clear {
        width: calc(100% + 20px);
        margin-left: -10px
    }
}


/*=============================== 1024px >= md <= 1200 ===============================*/

@media only screen and (min-width: 1024px) {
    .con-1200, .con-960, .con-770, .con-640, .con-480 {
        padding-right: 15px;
        padding-left: 15px
    }
    .col-md,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12 {
        flex: 0 0 auto
    }
    .col-md {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }
    .col-md-1 {
        flex-basis: 8.333%;
        max-width: 8.333%
    }
    .col-md-2 {
        flex-basis: 16.667%;
        max-width: 16.667%
    }
    .col-md-3 {
        flex-basis: 25%;
        max-width: 25%
    }
    .col-md-4 {
        flex-basis: 33.333%;
        max-width: 33.333%
    }
    .col-md-5 {
        flex-basis: 41.667%;
        max-width: 41.667%
    }
    .col-md-6 {
        flex-basis: 50%;
        max-width: 50%
    }
    .col-md-7 {
        flex-basis: 58.333%;
        max-width: 58.333%
    }
    .col-md-8 {
        flex-basis: 66.667%;
        max-width: 66.667%
    }
    .col-md-9 {
        flex-basis: 75%;
        max-width: 75%
    }
    .col-md-10 {
        flex-basis: 83.333%;
        max-width: 83.333%;
    }
    .col-md-11 {
        flex-basis: 91.667%;
        max-width: 91.667%
    }
    .col-md-12 {
        flex-basis: 100%;
        max-width: 100%
    }
    .col-md-offset-1 {
        margin-left: 8.333%
    }
    .col-md-offset-2 {
        margin-left: 16.667%
    }
    .col-md-offset-3 {
        margin-left: 25%
    }
    .col-md-offset-4 {
        margin-left: 33.333%
    }
    .col-md-offset-5 {
        margin-left: 41.667%
    }
    .col-md-offset-6 {
        margin-left: 50%
    }
    .col-md-offset-7 {
        margin-left: 58.333%
    }
    .col-md-offset-8 {
        margin-left: 66.667%
    }
    .col-md-offset-9 {
        margin-left: 75%
    }
    .col-md-offset-10 {
        margin-left: 83.333%
    }
    .col-md-offset-11 {
        margin-left: 91.667%
    }
    .start-md {
        justify-content: flex-start
    }
    .center-md {
        justify-content: center
    }
    .end-md {
        justify-content: flex-end
    }
    .top-md {
        align-items: flex-start
    }
    .middle-md {
        align-items: center
    }
    .bottom-md {
        align-items: flex-end
    }
    .around-md {
        justify-content: space-around
    }
    .between-md {
        justify-content: space-between
    }
    .first-md {
        order: -1
    }
    .last-md {
        order: 1
    }
    .invisible-md {
        display: none;
        visibility: hidden
    }
    .visible-md {
        display: block;
        visibility: visible
    }
    /*=================================== Classes ====================================*/
    .inter {
        padding: 80px 0
    }
    .mb-sm {
        margin: 0;
        margin-bottom: 15px
    }
    .mb-sm-comp {
        margin-bottom: -15px
    }
    .mb-md {
        margin: 0;
        margin-bottom: 30px
    }
    .mb-md-comp {
        margin-bottom: -30px
    }
    .mb-lg {
        margin: 0;
        margin-bottom: 60px
    }
    .mb-lg-comp {
        margin-bottom: -60px
    }
    .mb-xl {
        margin: 0;
        margin-bottom: 90px
    }
    .col {
        padding-right: 15px;
        padding-left: 15px
    }
    .col-clear {
        width: calc(100% + 30px);
        margin-left: -15px
    }
}


/*=================================== lg >= 1200px ===================================*/

@media only screen and (min-width: 1200px) {
    .con-1200, .con-960, .con-770, .con-640, .con-480 {
        padding-right: 15px;
        padding-left: 15px
    }
    .col-lg,
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-20 {
        flex: 0 0 auto
    }
    .col-lg {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }
    .col-lg-1 {
        flex-basis: 8.333%;
        max-width: 8.333%
    }
    .col-lg-2 {
        flex-basis: 16.667%;
        max-width: 16.667%
    }
    .col-lg-3 {
        flex-basis: 25%;
        max-width: 25%
    }
    .col-lg-4 {
        flex-basis: 33.333%;
        max-width: 33.333%
    }
    .col-lg-5 {
        flex-basis: 41.667%;
        max-width: 41.667%
    }
    .col-lg-6 {
        flex-basis: 50%;
        max-width: 50%
    }
    .col-lg-7 {
        flex-basis: 58.333%;
        max-width: 58.333%
    }
    .col-lg-8 {
        flex-basis: 66.667%;
        max-width: 66.667%
    }
    .col-lg-9 {
        flex-basis: 75%;
        max-width: 75%
    }
    .col-lg-10 {
        flex-basis: 83.333%;
        max-width: 83.333%
    }
    .col-lg-11 {
        flex-basis: 91.667%;
        max-width: 91.667%
    }
    .col-lg-12 {
        flex-basis: 100%;
        max-width: 100%
    }
    .col-lg-20 {
        flex-basis: 20%;
        max-width: 20%
    }
    .col-lg-offset-1 {
        margin-left: 8.333%
    }
    .col-lg-offset-2 {
        margin-left: 16.667%
    }
    .col-lg-offset-3 {
        margin-left: 25%
    }
    .col-lg-offset-4 {
        margin-left: 33.333%
    }
    .col-lg-offset-5 {
        margin-left: 41.667%
    }
    .col-lg-offset-6 {
        margin-left: 50%
    }
    .col-lg-offset-7 {
        margin-left: 58.333%
    }
    .col-lg-offset-8 {
        margin-left: 66.667%
    }
    .col-lg-offset-9 {
        margin-left: 75%
    }
    .col-lg-offset-10 {
        margin-left: 83.333%
    }
    .col-lg-offset-11 {
        margin-left: 91.667%
    }
    .start-lg {
        justify-content: flex-start
    }
    .center-lg {
        justify-content: center
    }
    .end-lg {
        justify-content: flex-end
    }
    .top-lg {
        align-items: flex-start
    }
    .middle-lg {
        align-items: center
    }
    .bottom-lg {
        align-items: flex-end
    }
    .around-lg {
        justify-content: space-around
    }
    .between-lg {
        justify-content: space-between
    }
    .first-lg {
        order: -1
    }
    .last-lg {
        order: 1
    }
    .invisible-lg {
        display: none;
        visibility: hidden
    }
    .visible-lg {
        display: block;
        visibility: visible
    }
    /*=================================== Classes ====================================*/
    .inter {
        padding: 100px 0
    }
    .col {
        padding-right: 15px;
        padding-left: 15px
    }
    .col-clear {
        width: calc(100% + 30px);
        margin-left: -15px
    }
}