<header>
  <div class="absoulute_title">
    <span class="title_name">creative</span>
    <span class="title_name last_one">style</span>
    <span class="little_name">парикмахерский салон</span>
    <span class="little_name">в центре Хабаровска</span>
    
  </div>
  <div class="red_block"><div class="in_red_block"></div></div>
  <div class="photo_block"></div>
</header>
<article id="content">
<div class="bar">
  <a class="main_link">cs</a>
  <a class="underline">Услуги</a>
  <a class="underline">Запись</a>
  <a class="underline">Адрес</a>
  <a class="underline">Магазин</a>
</div> 
<div id="about_me">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 200">

<defs>
<filter id="identical-red-overlay">
  <feColorMatrix
    type="matrix"
    values="1   0   0   0   0
            0   0   0   0   0
            0   0   0   0   0
            0   0   0   1   0 "/>
</filter>
</defs>

<image xlink:href="https://hsto.org/webt/5c/b1/9c/5cb19cce459f2282755057.jpeg" id="filt" x="200" width="200" height="200"/>
</svg> 
  </div> 
  
</article>

@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic');

@import url('https://fonts.googleapis.com/css?family=Architects+Daughter|Caveat+Brush|Covered+By+Your+Grace|Gochi+Hand&subset=latin-ext');

@import url('https://fonts.googleapis.com/css?family=Neucha&subset=cyrillic');

v {font-family: 'Gloria Hallelujah', cursive;
font-family: 'Roboto', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Caveat Brush', cursive;
font-family: 'Covered By Your Grace', cursive;
font-family: 'Architects Daughter', cursive;
font-family: 'Gochi Hand', cursive;
}

body {--background: #040404;
  --red: #e8001e;
  background: var(--background) ;min-height: 300vh;margin: 0;padding: 0;font-family: 'Open Sans', sans-serif;color: white;}

header {display: grid; grid-template-columns: repeat(2, 1fr);min-height: 100vh;position: relative;}

header div {width: 100%; height: 100%;}
.red_block {background: #e8001e;
    display: flex;
    justify-content: center;
    align-items: center;}
.in_red_block { height: calc(100% - 150px); min-width: 70%; width: calc(100% - 150px);min-height: 70%;   

    background: url(http://hsk.wiki/different_websites/hair/man.png) no-repeat;
    background-position: center;
    background-size: cover;
    filter: grayscale(100%);
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}

.photo_block {
    background: url(http://hsk.wiki/different_websites/hair/woman.png) no-repeat;
    background-position: center;
    background-size: cover;
    filter: grayscale(100%);
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}

.absoulute_title {width: 100%; height: 100%;position: absolute; color: white;
    z-index: 9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.title_name {font-family: 'Gloria Hallelujah',cursive; 
   
    font-size: 10vw;
    letter-spacing: -3.5px;
    line-height: 0.7;text-shadow: black 0.05em 0.05em 0, white 0.08em 0.08em 0;text-shadow: 4px 4px 0px #1e1f26, 7px 7px 0px rgba(0, 0, 0, 0.2);
    text-shadow: 4px 4px 0px #d5d5d5, 7px 7px 0px rgba(0, 0, 0, 0.2);
    text-shadow: 4px 4px 0px #f50f0f, 7px 7px 0px rgba(0, 0, 0, 0.2);
  text-shadow: 0 -3px 0 #333, 0 6px 8px rgba(0,0,0,.4), 0 9px 10px rgba(0,0,0,.15), 0 30px 10px rgba(0,0,0,.18), 0 15px 10px rgba(0,0,0,.21);
  text-shadow: 0 1px 0 hsl(174,5%,80%), 0 2px 0 hsl(174,5%,75%), 0 3px 0 hsl(174,5%,70%), 0 4px 0 hsl(174,5%,66%), 0 5px 0 hsl(174,5%,64%), 0 6px 0 hsl(174,5%,62%), 0 7px 0 hsl(174,5%,61%), 0 8px 0 hsl(174,5%,60%), 0 0 5px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.2), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.2), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.3);
    text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);
  
}

.last_one {padding-bottom: 10vh;position: relative;}


.little_name {
   font-size: 2.5vw;
    font-weight: 500;
    font-style: italic;
}
#content {position: relative;}
.bar {height: 50px; overflow: hidden; 
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  position: absolute;
  top: 0;
  width: 100%;
  background: var(--background);
 }
.bar a {   
  position: relative;
  margin: 30px;
    font-size: x-large;
  font-family: 'Neucha', cursive;
    letter-spacing:  2px; 
}
.bar a.main_link {font-family: 'Gloria Hallelujah',cursive;
    font-size: -webkit-xxx-large;
    letter-spacing: -3.5px;
    line-height: 0.7;}
.underline:after {
  content: '';
  position: absolute;
  display: block;
  height: .35em;
  width: 120%;
  margin-left: -60%;
  left: 50%;
  bottom: -.35em;
  border-radius: 50%;
  z-index: -1;
  background: var(--background);
}
.underline:before {
  content: '';
  position: absolute;
  display: block;
  height: .3em;
  width: 110%;
  margin-left: -55%;
  left: 50%;
  bottom: -.22em;
  border-radius: 50%;
  z-index: -2;
  background: var(--red);
  background: linear-gradient(to right, var(--red) 25%,var(--background) 100%);
}

.stickytop {
  position: fixed;
}

#about_me image {filter:url('#identical-red-overlay');}

if ($(window).width() >= 801) {
  $(window).scroll(function () {
    if ($(this).scrollTop() >= window.innerHeight) {
      $('div.bar').addClass('stickytop');
    } else {
      $('div.bar').removeClass('stickytop');
    }
  });
}