@font-face {
  font-family: 'AvenirNextCyr-bold';
  src: url("../assets/fonts/avenir/AvenirNextCyr-Bold/AvenirNextCyr-Bold.eot");
  src: url("../assets/fonts/avenir/AvenirNextCyr-Bold/AvenirNextCyr-Bold.woff") format("woff"), 
  url("../assets/fonts/avenir/AvenirNextCyr-Bold/AvenirNextCyr-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AvenirNextCyr-Regular';
  src: url("../assets/fonts/avenir/AvenirNextCyr-Regular/AvenirNextCyr-Regular.eot");
  src: url("../assets/fonts/avenir/AvenirNextCyr-Regular/AvenirNextCyr-Regular.woff") format("woff"),
  url("../assets/fonts/avenir/AvenirNextCyr-Regular/AvenirNextCyr-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  background-color: white;
  color: black;
}

.login {
  border: 5px solid black;
  width: 600px;
  height: 200px;
  position: absolute;
  font-family: "AvenirNextCyr-Regular";
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

.login img {
  width: 70%;
}

.login h {
  max-width: 100%;
}

.login p.warning {
  color: red;
}

@media screen and (max-width: 700px) {
  .login {
      width: 100%;
      height: auto;
      position: relative;
  }
}

@media screen and (max-width: 400px) {
  .login {float: none;}
  .login img {width: 98%;}
}