$b: 'header';

.index { // fix height index banner!
  .#{$b} { padding-top: 650px; }
  .#{$b}__text { top: 250px; }
}

.#{$b} {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 0;
  padding-top: 350px;
  overflow: hidden;
}

.#{$b}__image {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  text-align: center;
  background: url(image_path('index_b.jpg')) transparent top center;
}
.#{$b}__shade {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.2;
}

.#{$b}__text {
    font-size: 26px;
    position: absolute;
    top: 100px;
    width: 100%;
    margin: 0 auto;
    z-index: 7;

    text-align: center;
    color: white;
}

    .#{$b}__text-l1 {
        font-size: 2em;
        padding-bottom: 12px;
        margin: 0!important;
        line-height: 1em;
        text-shadow: 0px 1px 3px #000;

    }

    .#{$b}__text-l2 {
        font-size: 2.2em;
        margin: 0!important;
        line-height: 1em;
        color: gold;
        text-shadow: 0px 1px 3px #000;
        z-index: 7;
    }
    .#{$b}__logo {
      position: relative;
      display: inline-block;
      z-index: 7;
    }

    .#{$b}__logo-t {
      position: absolute;
      z-index: 10;
      font-size: 2em;
      line-height: 1em;
      font-family: sans;
      font-weight: bold;
      color: white;
      text-shadow: 0 1px 4px #000;
      left: 0;
      width: 0.8em;
      top: 0.15em;
    }


    .#{$b}__logo-romb {
      margin-top: -0.8em;
      z-index: 9;
      display: inline-block;
      margin-bottom: 0.5em; width: 0; height: 0;
      border: 0.8em solid transparent;
      border-bottom: 1.2em solid (gold - #333);
      position: relative;
    }
    .#{$b}__logo-romb:after {
      content: "";
      width: 0; height: 0;
      position: absolute; left: -0.8em; top: 1.2em;
      border: 0.8em solid transparent;
      border-top: 1.2em solid (gold - #333);
    }

.#{$b}__administrative_page_link {
  position: fixed;
  z-index: 1000;
  top:70px;
  right: 0;
  background: white;
  font-size: 12px;
  line-height: 14px;
  text-transform: uppercase;
  a {
    color: green;
  }
}

@media (max-width: 1199px) {

}

@media (max-width: 991px) {

}

@media (max-width: 767px) {

}

@media (max-width: 643px) {
  .#{$b}__text { font-size: 16px;}
}

@media (max-width: 443px) {
  .#{$b}__text { font-size: 12px;}
  .index { // fix height index banner!
    .#{$b} { padding-top: 350px; }
    .#{$b}__text { top: 150px; }
  }
  .#{$b}__text { top: 150px; }
}