/*==================================== CSS Grid v.1 ------------------- Developed by Maiorov Maksim <a href="mailto:m.maiorov@gmail.com">m.maiorov@gmail.com</a>
2014 | Kaliningrad, Russia =====================================*/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.clearFix::before,
.clearFix::after {
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

.noselect {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.container {
    position: relative;
    width: 100%
}

.line {
    margin: 0 auto;
}

.line::before,
.line::after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

.substrateSmall {
    width: 100%;
    height: 20px;
}

.substrateMedium {
    width: 100%;
    height: 40px;
}

.substrateHuge {
    width: 100%;
    height: 60px;
}

.fullWidth {
    width: 100%;
}

.half {
    width: 50%;
}

.oneThird {
    width: 33.33%;
}

.twoThird {
    width: 66.66%;
}

.oneFourth {
    width: 25%;
}

.oneFifth {
    width: 20%;
}

.oneSixth {
    width: 16.66%;
}

.half,
.oneThird,
.twoThird,
.oneFourth,
.oneFifth,
.oneSixth {
    position: relative;
    float: left;
}

.half:last-child,
.oneThird:last-child,
.twoThird:last-child,
.oneFourth:last-child,
.oneFifth:last-child,
.oneSixth:last-child {
    margin-right: 0;
    float: right;
}

/*===================== RESPONSIVE GRID ======================*/
@media all and (min-width: 1368px) {
    .line {
        width: 1220px;
    }
}

/*@media all and (min-width: 1451px)*/
@media all and (max-width: 1367px) {
    .line {
        width: 1190px;
    }
}

/*@media all and (min-width:1200px) and (max-width:1365px)*/
@media all and (max-width: 1199px) {
    .line {
        width: 970px;
    }

    .oneSixth {
        width: 33.3%;
    }
}

/*@media all and (min-width:992px) and (max-width:1199px)*/
@media all and (max-width: 991px) {
    .line {
        width: 750px;
    }

    .oneFifth,
    .oneSixth {
        width: 33.3%;
    }

    .oneFifth:nth-child(4),
    .oneFifth:nth-child(5) {
        width: 50%;
    }
}

/*@media all and (min-width:768px) and (max-width:991px)*/
@media all and (max-width:767px) {
    .line {
        width: 580px;
    }

    .half {
        width: 100%;
    }

    .oneFourth,
    .oneFifth,
    .oneSixth {
        width: 50%;
    }

    .oneFifth:nth-child(5) {
        width: 100%;
    }

    .half:last-child,
    .oneThird:last-child,
    .twoThird:last-child,
    .oneFourth:last-child,
    .oneFifth:last-child,
    .oneSixth:last-child {
        float: left;
    }
}

/*@media all and (min-width:600px) and (max-width:767px)*/
@media all and (max-width:599px) {
    .line {
        width: 100%;
        padding: 0 10px;
    }

    .half,
    .oneThird,
    .twoThird {
        width: 100%;
    }

    .oneFourth,
    .oneFifth,
    .oneSixth {
        width: 50%;
    }

    .oneFifth:nth-child(5) {
        width: 100%;
    }

    .half:last-child,
    .oneThird:last-child,
    .twoThird:last-child,
    .oneFourth:last-child,
    .oneFifth:last-child,
    .oneSixth:last-child {
        float: left;
    }
}

/*@media all and (min-width:481px) and (max-width:599px)*/
@media all and (max-width:479px) {
    .line {
        width: 100%;
        padding: 0 10px;
    }

    .half,
    .oneThird,
    .oneFourth,
    .twoThird,
    .oneFifth,
    .oneSixth {
        width: 100%;
    }

    .half:last-child,
    .oneThird:last-child,
    .twoThird:last-child,
    .oneFourth:last-child,
    .oneFifth:last-child,
    .oneSixth:last-child {
        float: left;
    }
}

/*@media all and (min-width:321px) and (max-width:480px)*/
@media all and (max-width:359px) {}

/*@media all and (max-width:320px)*/
/*==================================== CSS Grid v.1 ------------------- Developed by Maiorov Maksim <a href="mailto:m.maiorov@gmail.com">m.maiorov@gmail.com</a>
2014 | Kaliningrad, Russia =====================================*/

#header::before {
  content: '';
  position: absolute;
  top: 50px;
  left: 20px;
  width: 250px; /* Width of the fragment */
  height: 90px; /* Height of the fragment */
  background-image: url('https://www.zelenogradsk.com/gallery/brand.png');
  background-repeat: no-repeat;
  background-position: -444px -481px; /* Position of the fragment in the image */
  background-size: 1123px 794px; /* Total image width and height */
}

@media screen and (max-width: 1751px) {
  #header::before {
    background-image: none;
  }
}

#header::after {
  content: '';
  position: absolute;
  top: 50px;
  right: 10px;
  width: 250px; /* Width of the fragment */
  height: 90px; /* Height of the fragment */
  background-image: url('https://www.zelenogradsk.com/gallery/brand.png');
  background-repeat: no-repeat;
  background-position: -446px -195px; /* Position of the fragment in the image */
  background-size: 1123px 794px; /* Total image width and height */
}

@media screen and (max-width: 1751px) {
  #header::after {
    background-image: none;
  }
}