@font-face {
  font-family: "Avenir";
  src: url("../assets/fonts/avenir/avenir-heavy-webfont.eot");
  src: url("../assets/fonts/avenir/avenir-heavy-webfont.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/avenir/avenir-heavy-webfont.woff") format("woff"), url("../assets/fonts/avenir/avenir-heavy-webfont.ttf") format("truetype"), url("../assets/fonts/avenir/avenir-heavy-webfont.svg#avenir_85_heavyregular") format("svg");
  font-weight: normal;
  font-style: normal; }

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; }

p {
  font-family: "avenir";
  color: #fff;
  font-size: 18px;
  letter-spacing: 1.8px;
  font-weight: bold; }

.text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); }
  .text.one {
    transform: translateY(-50%);
    left: 8vw; }
  .text.two {
    transform: translateY(-50%);
    right: 10vw; }
  .text.top {
    top: 8vh;
    left: 50%;
    transform: translateX(-50%);
    font-size: 25px; }

.logo {
  position: absolute;
  top: 8vh;
  left: 8vw; }
  .logo img {
    height: 8vh; }

.logo-ahmad {
  position: absolute;
  bottom: 8vh;
  left: 8vw; }
  .logo-ahmad img {
    height: 6vh; }

.sound {
  position: absolute;
  top: 8vh;
  right: 3.5vw;
  cursor: pointer;
  width: 4vh;
  height: 4vh;
  background: url("../assets/sound.png");
  background-size: 4vh;
  background-repeat: no-repeat; }
  .sound.off {
    background: url("../assets/sound-off.png");
    background-size: 4vh;
    background-repeat: no-repeat; }

.socials {
  position: absolute;
  top: 50%;
  right: 4.5vw;
  transform: translateY(-50%);
  margin: 1em 0; }
  .socials a {
    height: 20px;
    width: 20px;
    display: block;
    margin: 50px 0; }
  .socials .insta {
    background: url("../assets/insta.png");
    background-size: 20px;
    background-position: right;
    background-repeat: no-repeat; }
  .socials .vk {
    background: url("../assets/vk.png");
    background-size: 20px;
    background-position: right;
    background-repeat: no-repeat; }
  .socials .fb {
    background: url("../assets/fb.png");
    background-size: 20px;
    background-position: right;
    background-repeat: no-repeat; }

@media (max-width: 420px) {
  body {
    position: fixed; }
  .logo-ahmad img,
  .logo img {
    height: 6vh; }
  .logo-ahmad {
    bottom: 4vh; }
  .logo {
    top: 4vh; }
  .text {
    bottom: 9vh;
    top: initial;
    position: absolute;
    text-align: center;
    width: 100%; }
    .text.one, .text.two {
      left: 0; }
    .text.one {
      bottom: 12vh; }
  .socials {
    position: absolute;
    bottom: 4vh;
    top: initial;
    right: 1.5vw;
    margin: 0;
    transform: translateY(0); }
    .socials a {
      margin: 0px 20px;
      display: inline-block; }
  .sound {
    top: 6vh;
    right: 7vw; } }